@shival99/z-ui 1.3.9 → 1.3.10

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

@@ -1,6 +1,6 @@
 import { DecimalPipe } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Pipe, input, output, viewChild, computed, signal, inject, Injector, DestroyRef, ChangeDetectorRef, effect, forwardRef, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { Pipe, input, output, viewChild, computed, signal, inject, Injector, DestroyRef, effect, forwardRef, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { NgControl, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { TranslatePipe } from '@ngx-translate/core';
@@ -395,9 +395,36 @@ const getDayState = (day) => {
     }
     return 'default';
 };
-const getMonthState = (monthIndex, currentMonthIndex) => monthIndex === currentMonthIndex ? 'selected' : 'default';
-const getQuarterState = (quarterIndex, currentQuarterIndex) => quarterIndex === currentQuarterIndex ? 'selected' : 'default';
-const getYearState = (year, currentYear) => year === currentYear ? 'selected' : 'default';
+const getMonthState = (monthIndex, selectedMonthIndex, todayMonthIndex) => {
+    if (monthIndex === selectedMonthIndex) {
+        return 'selected';
+    }
+    // Only show current month when no value is selected
+    if (selectedMonthIndex === -1 && monthIndex === todayMonthIndex) {
+        return 'current';
+    }
+    return 'default';
+};
+const getQuarterState = (quarterIndex, selectedQuarterIndex, todayQuarterIndex) => {
+    if (quarterIndex === selectedQuarterIndex) {
+        return 'selected';
+    }
+    // Only show current quarter when no value is selected
+    if (selectedQuarterIndex === -1 && quarterIndex === todayQuarterIndex) {
+        return 'current';
+    }
+    return 'default';
+};
+const getYearState = (year, selectedYear, todayYear) => {
+    if (year === selectedYear) {
+        return 'selected';
+    }
+    // Only show current year when no value is selected
+    if (selectedYear === -1 && year === todayYear) {
+        return 'current';
+    }
+    return 'default';
+};
 
 const zCalendarVariants = cva([
     'group flex w-fit items-center rounded-[6px] border border-input bg-white shadow-xs cursor-pointer',
@@ -456,7 +483,7 @@ const zCalendarMonthVariants = cva([
     variants: {
         state: {
             default: 'hover:bg-primary/10 text-foreground',
-            current: 'bg-primary/15 text-primary',
+            current: 'bg-primary text-primary-foreground',
             selected: 'bg-primary text-primary-foreground',
             disabled: 'text-muted-foreground/50 cursor-not-allowed line-through',
         },
@@ -473,7 +500,7 @@ const zCalendarYearVariants = cva([
     variants: {
         state: {
             default: 'hover:bg-primary/10 text-foreground',
-            current: 'bg-primary/15 text-primary',
+            current: 'bg-primary text-primary-foreground',
             selected: 'bg-primary text-primary-foreground',
             disabled: 'text-muted-foreground/50 cursor-not-allowed line-through',
         },
@@ -490,6 +517,7 @@ const zCalendarQuarterVariants = cva([
     variants: {
         state: {
             default: 'hover:bg-primary/10 text-foreground',
+            current: 'bg-primary text-primary-foreground',
             selected: 'bg-primary text-primary-foreground',
         },
     },
@@ -547,9 +575,121 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 }]
         }] });
 
+class ZIsEndHourDisabledPipe {
+    transform(hour, context) {
+        if (!context.isSameDay) {
+            return false;
+        }
+        let actualHour = hour;
+        let actualStartHour = context.startHour;
+        if (context.timeFormat === '12h') {
+            if (context.endPeriod === 'PM' && hour !== 12) {
+                actualHour = hour + 12;
+            }
+            if (context.endPeriod === 'AM' && hour === 12) {
+                actualHour = 0;
+            }
+            if (context.startPeriod === 'PM' && context.startHour !== 12) {
+                actualStartHour = context.startHour + 12;
+            }
+            if (context.startPeriod === 'AM' && context.startHour === 12) {
+                actualStartHour = 0;
+            }
+        }
+        return actualHour < actualStartHour;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZIsEndHourDisabledPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: ZIsEndHourDisabledPipe, isStandalone: true, name: "zIsEndHourDisabled" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZIsEndHourDisabledPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'zIsEndHourDisabled',
+                    standalone: true,
+                    pure: true,
+                }]
+        }] });
+class ZIsEndMinuteDisabledPipe {
+    transform(minute, context) {
+        if (!context.isSameDay) {
+            return false;
+        }
+        let actualStartHour = context.startHour;
+        let actualEndHour = context.endHour;
+        if (context.timeFormat === '12h') {
+            if (context.startPeriod === 'PM' && context.startHour !== 12) {
+                actualStartHour = context.startHour + 12;
+            }
+            if (context.startPeriod === 'AM' && context.startHour === 12) {
+                actualStartHour = 0;
+            }
+            if (context.endPeriod === 'PM' && context.endHour !== 12) {
+                actualEndHour = context.endHour + 12;
+            }
+            if (context.endPeriod === 'AM' && context.endHour === 12) {
+                actualEndHour = 0;
+            }
+        }
+        if (actualEndHour !== actualStartHour) {
+            return false;
+        }
+        return minute < context.startMinute;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZIsEndMinuteDisabledPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: ZIsEndMinuteDisabledPipe, isStandalone: true, name: "zIsEndMinuteDisabled" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZIsEndMinuteDisabledPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'zIsEndMinuteDisabled',
+                    standalone: true,
+                    pure: true,
+                }]
+        }] });
+class ZIsEndSecondDisabledPipe {
+    transform(second, context) {
+        if (!context.isSameDay) {
+            return false;
+        }
+        let actualStartHour = context.startHour;
+        let actualEndHour = context.endHour;
+        if (context.timeFormat === '12h') {
+            if (context.startPeriod === 'PM' && context.startHour !== 12) {
+                actualStartHour = context.startHour + 12;
+            }
+            if (context.startPeriod === 'AM' && context.startHour === 12) {
+                actualStartHour = 0;
+            }
+            if (context.endPeriod === 'PM' && context.endHour !== 12) {
+                actualEndHour = context.endHour + 12;
+            }
+            if (context.endPeriod === 'AM' && context.endHour === 12) {
+                actualEndHour = 0;
+            }
+        }
+        if (actualEndHour !== actualStartHour) {
+            return false;
+        }
+        if (context.endMinute !== context.startMinute) {
+            return false;
+        }
+        return second <= context.startSecond;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZIsEndSecondDisabledPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: ZIsEndSecondDisabledPipe, isStandalone: true, name: "zIsEndSecondDisabled" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZIsEndSecondDisabledPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'zIsEndSecondDisabled',
+                    standalone: true,
+                    pure: true,
+                }]
+        }] });
+
 class ZMonthClassesPipe {
-    transform(monthIndex, currentMonthIndex) {
-        const state = getMonthState(monthIndex, currentMonthIndex);
+    transform(monthIndex, selectedMonthIndex, todayMonthIndex) {
+        const state = getMonthState(monthIndex, selectedMonthIndex, todayMonthIndex);
         return zCalendarMonthVariants({ state });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZMonthClassesPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
@@ -564,9 +704,130 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 }]
         }] });
 
+class ZIsStartMonthDisabledPipe {
+    transform(monthIndex, context) {
+        if (context.disabledDateFn) {
+            const monthDate = new Date(context.currentYear, monthIndex, 1);
+            if (context.disabledDateFn(monthDate)) {
+                return true;
+            }
+        }
+        if (!context.isRangeMode) {
+            return false;
+        }
+        if (context.currentYear > context.endYear) {
+            return true;
+        }
+        if (context.currentYear === context.endYear && monthIndex > context.endMonthIndex) {
+            return true;
+        }
+        return false;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZIsStartMonthDisabledPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: ZIsStartMonthDisabledPipe, isStandalone: true, name: "zIsStartMonthDisabled" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZIsStartMonthDisabledPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'zIsStartMonthDisabled',
+                    standalone: true,
+                    pure: true,
+                }]
+        }] });
+class ZIsEndMonthDisabledPipe {
+    transform(monthIndex, context) {
+        if (context.disabledDateFn) {
+            const monthDate = new Date(context.endYear, monthIndex, 1);
+            if (context.disabledDateFn(monthDate)) {
+                return true;
+            }
+        }
+        if (!context.isRangeMode) {
+            return false;
+        }
+        if (context.endYear < context.startYear) {
+            return true;
+        }
+        if (context.endYear === context.startYear && monthIndex < context.startMonthIndex) {
+            return true;
+        }
+        return false;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZIsEndMonthDisabledPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: ZIsEndMonthDisabledPipe, isStandalone: true, name: "zIsEndMonthDisabled" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZIsEndMonthDisabledPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'zIsEndMonthDisabled',
+                    standalone: true,
+                    pure: true,
+                }]
+        }] });
+class ZIsStartYearDisabledPipe {
+    transform(year, context) {
+        if (context.disabledDateFn) {
+            const yearDate = new Date(year, 0, 1);
+            if (context.disabledDateFn(yearDate)) {
+                return true;
+            }
+        }
+        if (!context.isRangeMode) {
+            return false;
+        }
+        if (year > context.endYear) {
+            return true;
+        }
+        if (year === context.endYear && context.startMonthIndex >= context.endMonthIndex) {
+            return true;
+        }
+        return false;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZIsStartYearDisabledPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: ZIsStartYearDisabledPipe, isStandalone: true, name: "zIsStartYearDisabled" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZIsStartYearDisabledPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'zIsStartYearDisabled',
+                    standalone: true,
+                    pure: true,
+                }]
+        }] });
+class ZIsEndYearDisabledPipe {
+    transform(year, context) {
+        if (context.disabledDateFn) {
+            const yearDate = new Date(year, 0, 1);
+            if (context.disabledDateFn(yearDate)) {
+                return true;
+            }
+        }
+        if (!context.isRangeMode) {
+            return false;
+        }
+        if (year < context.startYear) {
+            return true;
+        }
+        if (year === context.startYear && context.endMonthIndex <= context.startMonthIndex) {
+            return true;
+        }
+        return false;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZIsEndYearDisabledPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: ZIsEndYearDisabledPipe, isStandalone: true, name: "zIsEndYearDisabled" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZIsEndYearDisabledPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'zIsEndYearDisabled',
+                    standalone: true,
+                    pure: true,
+                }]
+        }] });
+
 class ZQuarterClassesPipe {
-    transform(quarterIndex, currentQuarterIndex) {
-        const state = getQuarterState(quarterIndex, currentQuarterIndex);
+    transform(quarterIndex, selectedQuarterIndex, todayQuarterIndex) {
+        const state = getQuarterState(quarterIndex, selectedQuarterIndex, todayQuarterIndex);
         return zCalendarQuarterVariants({ state });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZQuarterClassesPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
@@ -581,9 +842,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 }]
         }] });
 
+class ZIsTimeSelectedPipe {
+    transform(value, selectedValue) {
+        return value === selectedValue;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZIsTimeSelectedPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: ZIsTimeSelectedPipe, isStandalone: true, name: "zIsTimeSelected" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZIsTimeSelectedPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'zIsTimeSelected',
+                    standalone: true,
+                    pure: true,
+                }]
+        }] });
+
 class ZYearClassesPipe {
-    transform(year, currentYear) {
-        const state = getYearState(year, currentYear);
+    transform(year, selectedYear, todayYear) {
+        const state = getYearState(year, selectedYear, todayYear);
         return zCalendarYearVariants({ state });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZYearClassesPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
@@ -644,17 +921,17 @@ class ZCalendarComponent {
     minuteOptions = Array.from({ length: 60 }, (_, i) => i);
     secondOptions = Array.from({ length: 60 }, (_, i) => i);
     formattedHour = computed(() => {
-        const h = this._hour();
+        const h = this.hour();
         if (this.zTimeFormat() === '12h') {
             const h12 = h % 12 || 12;
             return formatTimeValue(h12);
         }
         return formatTimeValue(h);
     }, ...(ngDevMode ? [{ debugName: "formattedHour" }] : []));
-    formattedMinute = computed(() => formatTimeValue(this._minute()), ...(ngDevMode ? [{ debugName: "formattedMinute" }] : []));
-    formattedSecond = computed(() => formatTimeValue(this._second()), ...(ngDevMode ? [{ debugName: "formattedSecond" }] : []));
+    formattedMinute = computed(() => formatTimeValue(this.minute()), ...(ngDevMode ? [{ debugName: "formattedMinute" }] : []));
+    formattedSecond = computed(() => formatTimeValue(this.second()), ...(ngDevMode ? [{ debugName: "formattedSecond" }] : []));
     displayHour = computed(() => {
-        const h = this._hour();
+        const h = this.hour();
         if (this.zTimeFormat() === '12h') {
             return h % 12 || 12;
         }
@@ -671,15 +948,8 @@ class ZCalendarComponent {
     _selectedDate = signal(null, ...(ngDevMode ? [{ debugName: "_selectedDate" }] : []));
     _rangeStart = signal(null, ...(ngDevMode ? [{ debugName: "_rangeStart" }] : []));
     _rangeEnd = signal(null, ...(ngDevMode ? [{ debugName: "_rangeEnd" }] : []));
-    _hoveredDate = signal(null, ...(ngDevMode ? [{ debugName: "_hoveredDate" }] : []));
     _currentMonth = signal(getToday(), ...(ngDevMode ? [{ debugName: "_currentMonth" }] : []));
     _endMonth = signal(addMonths(getToday(), 1), ...(ngDevMode ? [{ debugName: "_endMonth" }] : []));
-    _currentView = signal('day', ...(ngDevMode ? [{ debugName: "_currentView" }] : []));
-    _endView = signal('day', ...(ngDevMode ? [{ debugName: "_endView" }] : []));
-    _hour = signal(0, ...(ngDevMode ? [{ debugName: "_hour" }] : []));
-    _minute = signal(0, ...(ngDevMode ? [{ debugName: "_minute" }] : []));
-    _second = signal(0, ...(ngDevMode ? [{ debugName: "_second" }] : []));
-    _period = signal('AM', ...(ngDevMode ? [{ debugName: "_period" }] : []));
     _hourEnd = signal(0, ...(ngDevMode ? [{ debugName: "_hourEnd" }] : []));
     _minuteEnd = signal(0, ...(ngDevMode ? [{ debugName: "_minuteEnd" }] : []));
     _secondEnd = signal(0, ...(ngDevMode ? [{ debugName: "_secondEnd" }] : []));
@@ -689,38 +959,40 @@ class ZCalendarComponent {
     _dirty = signal(false, ...(ngDevMode ? [{ debugName: "_dirty" }] : []));
     _formControl = signal(null, ...(ngDevMode ? [{ debugName: "_formControl" }] : []));
     _formStateVersion = signal(0, ...(ngDevMode ? [{ debugName: "_formStateVersion" }] : []));
-    _inputDisplayValue = signal('', ...(ngDevMode ? [{ debugName: "_inputDisplayValue" }] : []));
     _backupSelectedDate = signal(null, ...(ngDevMode ? [{ debugName: "_backupSelectedDate" }] : []));
     _backupRangeStart = signal(null, ...(ngDevMode ? [{ debugName: "_backupRangeStart" }] : []));
     _backupRangeEnd = signal(null, ...(ngDevMode ? [{ debugName: "_backupRangeEnd" }] : []));
-    _activePresetKey = signal(null, ...(ngDevMode ? [{ debugName: "_activePresetKey" }] : []));
-    _hasViewChanged = signal(false, ...(ngDevMode ? [{ debugName: "_hasViewChanged" }] : []));
-    _hasEndViewChanged = signal(false, ...(ngDevMode ? [{ debugName: "_hasEndViewChanged" }] : []));
     _appliedViaOk = signal(false, ...(ngDevMode ? [{ debugName: "_appliedViaOk" }] : []));
     _skipBlurHandler = signal(false, ...(ngDevMode ? [{ debugName: "_skipBlurHandler" }] : []));
     _injector = inject(Injector);
     _destroyRef = inject(DestroyRef);
-    _cdr = inject(ChangeDetectorRef);
     _zTranslate = inject(ZTranslateService);
     _onChange = () => void 0;
     _onTouched = () => void 0;
     _ngControl = null;
     isOpen = computed(() => this._popoverControl()?.isVisible() ?? false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
-    hoveredDate = this._hoveredDate.asReadonly();
-    currentView = this._currentView.asReadonly();
-    hour = this._hour.asReadonly();
-    minute = this._minute.asReadonly();
-    second = this._second.asReadonly();
-    period = this._period.asReadonly();
-    inputDisplayValue = this._inputDisplayValue.asReadonly();
-    activePresetKey = this._activePresetKey.asReadonly();
-    hasViewChanged = this._hasViewChanged.asReadonly();
-    hasEndViewChanged = this._hasEndViewChanged.asReadonly();
+    hoveredDate = signal(null, ...(ngDevMode ? [{ debugName: "hoveredDate" }] : []));
+    currentView = signal('day', ...(ngDevMode ? [{ debugName: "currentView" }] : []));
+    endView = signal('day', ...(ngDevMode ? [{ debugName: "endView" }] : []));
+    hour = signal(0, ...(ngDevMode ? [{ debugName: "hour" }] : []));
+    minute = signal(0, ...(ngDevMode ? [{ debugName: "minute" }] : []));
+    second = signal(0, ...(ngDevMode ? [{ debugName: "second" }] : []));
+    period = signal('AM', ...(ngDevMode ? [{ debugName: "period" }] : []));
+    inputDisplayValue = signal('', ...(ngDevMode ? [{ debugName: "inputDisplayValue" }] : []));
+    activePresetKey = signal(null, ...(ngDevMode ? [{ debugName: "activePresetKey" }] : []));
+    hasViewChanged = signal(false, ...(ngDevMode ? [{ debugName: "hasViewChanged" }] : []));
+    hasEndViewChanged = signal(false, ...(ngDevMode ? [{ debugName: "hasEndViewChanged" }] : []));
+    timeDropdownOpen = signal(false, ...(ngDevMode ? [{ debugName: "timeDropdownOpen" }] : []));
+    timeDropdownEndOpen = signal(false, ...(ngDevMode ? [{ debugName: "timeDropdownEndOpen" }] : []));
     quarterNames = ['Q1', 'Q2', 'Q3', 'Q4'];
-    currentQuarterIndex = computed(() => {
+    todayQuarterIndex = computed(() => {
+        const today = new Date();
+        return Math.floor(today.getMonth() / 3);
+    }, ...(ngDevMode ? [{ debugName: "todayQuarterIndex" }] : []));
+    selectedQuarterIndex = computed(() => {
         const date = this._selectedDate();
         return date ? Math.floor(date.getMonth() / 3) : -1;
-    }, ...(ngDevMode ? [{ debugName: "currentQuarterIndex" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "selectedQuarterIndex" }] : []));
     isSameDayRange = computed(() => {
         if (!this.isRangeMode()) {
             return false;
@@ -768,6 +1040,55 @@ class ZCalendarComponent {
     currentMonth = computed(() => this._currentMonth(), ...(ngDevMode ? [{ debugName: "currentMonth" }] : []));
     currentYear = computed(() => this._currentMonth().getFullYear(), ...(ngDevMode ? [{ debugName: "currentYear" }] : []));
     currentMonthIndex = computed(() => this._currentMonth().getMonth(), ...(ngDevMode ? [{ debugName: "currentMonthIndex" }] : []));
+    todayMonthIndex = computed(() => new Date().getMonth(), ...(ngDevMode ? [{ debugName: "todayMonthIndex" }] : []));
+    todayYear = computed(() => new Date().getFullYear(), ...(ngDevMode ? [{ debugName: "todayYear" }] : []));
+    selectedMonthIndex = computed(() => {
+        const date = this._selectedDate();
+        return date ? date.getMonth() : -1;
+    }, ...(ngDevMode ? [{ debugName: "selectedMonthIndex" }] : []));
+    selectedYear = computed(() => {
+        const date = this._selectedDate();
+        return date ? date.getFullYear() : -1;
+    }, ...(ngDevMode ? [{ debugName: "selectedYear" }] : []));
+    endTimeContext = computed(() => ({
+        isSameDay: this.isSameDayRange(),
+        startHour: this.hour(),
+        startMinute: this.minute(),
+        startSecond: this.second(),
+        endHour: this._hourEnd(),
+        endMinute: this._minuteEnd(),
+        timeFormat: this.zTimeFormat(),
+        startPeriod: this.period(),
+        endPeriod: this._periodEnd(),
+    }), ...(ngDevMode ? [{ debugName: "endTimeContext" }] : []));
+    startMonthDisabledContext = computed(() => ({
+        currentYear: this._currentMonth().getFullYear(),
+        endYear: this._endMonth().getFullYear(),
+        endMonthIndex: this._endMonth().getMonth(),
+        isRangeMode: this.isRangeMode(),
+        disabledDateFn: this.zDisabledDate(),
+    }), ...(ngDevMode ? [{ debugName: "startMonthDisabledContext" }] : []));
+    endMonthDisabledContext = computed(() => ({
+        startYear: this._currentMonth().getFullYear(),
+        startMonthIndex: this._currentMonth().getMonth(),
+        endYear: this._endMonth().getFullYear(),
+        isRangeMode: this.isRangeMode(),
+        disabledDateFn: this.zDisabledDate(),
+    }), ...(ngDevMode ? [{ debugName: "endMonthDisabledContext" }] : []));
+    startYearDisabledContext = computed(() => ({
+        endYear: this._endMonth().getFullYear(),
+        startMonthIndex: this._currentMonth().getMonth(),
+        endMonthIndex: this._endMonth().getMonth(),
+        isRangeMode: this.isRangeMode(),
+        disabledDateFn: this.zDisabledDate(),
+    }), ...(ngDevMode ? [{ debugName: "startYearDisabledContext" }] : []));
+    endYearDisabledContext = computed(() => ({
+        startYear: this._currentMonth().getFullYear(),
+        startMonthIndex: this._currentMonth().getMonth(),
+        endMonthIndex: this._endMonth().getMonth(),
+        isRangeMode: this.isRangeMode(),
+        disabledDateFn: this.zDisabledDate(),
+    }), ...(ngDevMode ? [{ debugName: "endYearDisabledContext" }] : []));
     currentMonthName = computed(() => {
         const month = this._currentMonth();
         return month.toLocaleDateString(this.zLocale(), { month: 'long' });
@@ -788,7 +1109,7 @@ class ZCalendarComponent {
             selectedDate: this._selectedDate(),
             rangeStart: this._rangeStart(),
             rangeEnd: this._rangeEnd(),
-            hoveredDate: this._hoveredDate(),
+            hoveredDate: this.hoveredDate(),
             minDate: this.zMinDate(),
             maxDate: this.zMaxDate(),
             disabledDate: this.zDisabledDate(),
@@ -808,7 +1129,7 @@ class ZCalendarComponent {
             selectedDate: this._selectedDate(),
             rangeStart: this._rangeStart(),
             rangeEnd: this._rangeEnd(),
-            hoveredDate: this._hoveredDate(),
+            hoveredDate: this.hoveredDate(),
             minDate: this.zMinDate(),
             maxDate: this.zMaxDate(),
             disabledDate: this.zDisabledDate(),
@@ -817,111 +1138,20 @@ class ZCalendarComponent {
     formattedHourEnd = computed(() => formatTimeValue(this.zTimeFormat() === '12h' ? this._hourEnd() % 12 || 12 : this._hourEnd()), ...(ngDevMode ? [{ debugName: "formattedHourEnd" }] : []));
     formattedMinuteEnd = computed(() => formatTimeValue(this._minuteEnd()), ...(ngDevMode ? [{ debugName: "formattedMinuteEnd" }] : []));
     formattedSecondEnd = computed(() => formatTimeValue(this._secondEnd()), ...(ngDevMode ? [{ debugName: "formattedSecondEnd" }] : []));
+    minuteEnd = computed(() => this._minuteEnd(), ...(ngDevMode ? [{ debugName: "minuteEnd" }] : []));
+    secondEnd = computed(() => this._secondEnd(), ...(ngDevMode ? [{ debugName: "secondEnd" }] : []));
     periodEnd = computed(() => this._periodEnd(), ...(ngDevMode ? [{ debugName: "periodEnd" }] : []));
-    endView = this._endView.asReadonly();
     endYearRange = computed(() => {
         const currentYear = this._endMonth().getFullYear();
         return getYearRange(currentYear);
     }, ...(ngDevMode ? [{ debugName: "endYearRange" }] : []));
-    isStartMonthDisabled(monthIndex) {
-        const disabledDateFn = this.zDisabledDate();
-        if (disabledDateFn) {
-            const year = this._currentMonth().getFullYear();
-            const monthDate = new Date(year, monthIndex, 1);
-            if (disabledDateFn(monthDate)) {
-                return true;
-            }
-        }
-        if (!this.isRangeMode()) {
-            return false;
-        }
-        const startYear = this._currentMonth().getFullYear();
-        const endMonth = this._endMonth();
-        const endYear = endMonth.getFullYear();
-        const endMonthIndex = endMonth.getMonth();
-        if (startYear > endYear) {
-            return true;
-        }
-        if (startYear === endYear && monthIndex > endMonthIndex) {
-            return true;
-        }
-        return false;
-    }
-    isEndMonthDisabled(monthIndex) {
-        const disabledDateFn = this.zDisabledDate();
-        if (disabledDateFn) {
-            const year = this._endMonth().getFullYear();
-            const monthDate = new Date(year, monthIndex, 1);
-            if (disabledDateFn(monthDate)) {
-                return true;
-            }
-        }
-        if (!this.isRangeMode()) {
-            return false;
-        }
-        const startMonth = this._currentMonth();
-        const startYear = startMonth.getFullYear();
-        const startMonthIndex = startMonth.getMonth();
-        const endYear = this._endMonth().getFullYear();
-        if (endYear < startYear) {
-            return true;
-        }
-        if (endYear === startYear && monthIndex < startMonthIndex) {
-            return true;
-        }
-        return false;
-    }
-    isStartYearDisabled(year) {
-        const disabledDateFn = this.zDisabledDate();
-        if (disabledDateFn) {
-            const yearDate = new Date(year, 0, 1);
-            if (disabledDateFn(yearDate)) {
-                return true;
-            }
-        }
-        if (!this.isRangeMode()) {
-            return false;
-        }
-        const endYear = this._endMonth().getFullYear();
-        const startMonthIndex = this._currentMonth().getMonth();
-        const endMonthIndex = this._endMonth().getMonth();
-        if (year > endYear) {
-            return true;
-        }
-        if (year === endYear && startMonthIndex >= endMonthIndex) {
-            return true;
-        }
-        return false;
-    }
-    isEndYearDisabled(year) {
-        const disabledDateFn = this.zDisabledDate();
-        if (disabledDateFn) {
-            const yearDate = new Date(year, 0, 1);
-            if (disabledDateFn(yearDate)) {
-                return true;
-            }
-        }
-        if (!this.isRangeMode()) {
-            return false;
-        }
-        const startYear = this._currentMonth().getFullYear();
-        const startMonthIndex = this._currentMonth().getMonth();
-        const endMonthIndex = this._endMonth().getMonth();
-        if (year < startYear) {
-            return true;
-        }
-        if (year === startYear && endMonthIndex <= startMonthIndex) {
-            return true;
-        }
-        return false;
-    }
     canNavigateStartNext = computed(() => {
         if (!this.isRangeMode()) {
             return true;
         }
         const current = this._currentMonth();
         const end = this._endMonth();
-        const view = this._currentView();
+        const view = this.currentView();
         if (view === 'day') {
             const startNext = addMonths(current, 1);
             return (startNext.getFullYear() < end.getFullYear() ||
@@ -944,7 +1174,7 @@ class ZCalendarComponent {
         }
         const start = this._currentMonth();
         const end = this._endMonth();
-        const view = this._endView();
+        const view = this.endView();
         if (view === 'day') {
             const endPrev = addMonths(end, -1);
             return (endPrev.getFullYear() > start.getFullYear() ||
@@ -975,7 +1205,7 @@ class ZCalendarComponent {
                 timeParts.push('ss');
             }
             const timeFormat = timeParts.join(':');
-            const periodSuffix = this.zTimeFormat() === '12h' ? ` ${this._period()}` : '';
+            const periodSuffix = this.zTimeFormat() === '12h' ? ` ${this.period()}` : '';
             format = this.isTimeMode() ? timeFormat + periodSuffix : `${this.zFormat()} ${timeFormat}${periodSuffix}`;
         }
         if (this.isRangeMode()) {
@@ -1030,7 +1260,7 @@ class ZCalendarComponent {
                 timeParts.push('ss');
             }
             const timeFormat = timeParts.join(':');
-            const periodSuffix = this.zTimeFormat() === '12h' ? ` ${this._period()}` : '';
+            const periodSuffix = this.zTimeFormat() === '12h' ? ` ${this.period()}` : '';
             format = this.isTimeMode() ? timeFormat + periodSuffix : `${this.zFormat()} ${timeFormat}${periodSuffix}`;
         }
         return format;
@@ -1132,9 +1362,9 @@ class ZCalendarComponent {
         effect(() => {
             const date = this._selectedDate();
             if (date && this.zShowTime()) {
-                this._hour.set(date.getHours());
-                this._minute.set(date.getMinutes());
-                this._second.set(date.getSeconds());
+                this.hour.set(date.getHours());
+                this.minute.set(date.getMinutes());
+                this.second.set(date.getSeconds());
             }
         });
     }
@@ -1151,14 +1381,13 @@ class ZCalendarComponent {
                     .pipe(takeUntilDestroyed(this._destroyRef))
                     .subscribe(() => {
                     this._formStateVersion.update(v => v + 1);
-                    this._cdr.markForCheck();
                 });
             }
             catch {
                 this._ngControl = null;
             }
         });
-        setTimeout(() => this._emitControl());
+        this._emitControl();
     }
     writeValue(value) {
         if (value === null || value === undefined) {
@@ -1177,11 +1406,8 @@ class ZCalendarComponent {
                     this._currentMonth.set(range.start);
                     this._endMonth.set(isSameMonth(range.start, range.end) ? addMonths(range.end, 1) : range.end);
                 }
-                setTimeout(() => {
-                    this._inputDisplayStart.set(this.displayValueStart());
-                    this._inputDisplayEnd.set(this.displayValueEnd());
-                    this._cdr.markForCheck();
-                });
+                this._inputDisplayStart.set(this.displayValueStart());
+                this._inputDisplayEnd.set(this.displayValueEnd());
             }
             return;
         }
@@ -1247,12 +1473,12 @@ class ZCalendarComponent {
         this._selectedDate.set(null);
         this._rangeStart.set(null);
         this._rangeEnd.set(null);
-        this._hour.set(0);
-        this._minute.set(0);
-        this._second.set(0);
+        this.hour.set(0);
+        this.minute.set(0);
+        this.second.set(0);
         this._touched.set(false);
         this._dirty.set(false);
-        this._inputDisplayValue.set('');
+        this.inputDisplayValue.set('');
         const emitValue = this._getEmitValue();
         this._onChange(emitValue);
         if (this._ngControl?.control) {
@@ -1285,33 +1511,32 @@ class ZCalendarComponent {
     onPopoverShow() {
         this._backupIfNeeded();
         this._appliedViaOk.set(false);
-        this._hasViewChanged.set(false);
-        this._hasEndViewChanged.set(false);
+        this.hasViewChanged.set(false);
+        this.hasEndViewChanged.set(false);
         if (this.isMonthMode()) {
-            this._currentView.set('month');
+            this.currentView.set('month');
             this._initializeTimeIfNeeded();
             return;
         }
         if (this.isYearMode()) {
-            this._currentView.set('year');
+            this.currentView.set('year');
             this._initializeTimeIfNeeded();
             return;
         }
         if (this.isQuarterMode()) {
-            this._currentView.set('quarter');
+            this.currentView.set('quarter');
             this._initializeTimeIfNeeded();
             return;
         }
-        this._currentView.set('day');
+        this.currentView.set('day');
         this._initializeTimeIfNeeded();
         if (this.isRangeMode()) {
-            this._endView.set('day');
+            this.endView.set('day');
             this._inputDisplayStart.set(this.displayValueStart());
             this._inputDisplayEnd.set(this.displayValueEnd());
         }
-        this._scrollToTimeOnOpen();
         if (!this.isRangeMode()) {
-            this._activePresetKey.set(null);
+            this.activePresetKey.set(null);
             const selected = this._selectedDate();
             if (selected) {
                 this._currentMonth.set(selected);
@@ -1325,15 +1550,15 @@ class ZCalendarComponent {
         if (start && end) {
             this._currentMonth.set(start);
             this._endMonth.set(isSameMonth(start, end) ? addMonths(end, 1) : end);
-            this._activePresetKey.set(this._detectMatchingPreset(start, end));
+            this.activePresetKey.set(this._detectMatchingPreset(start, end));
             return;
         }
         if (this.zQuickSelect()) {
-            this._activePresetKey.set(null);
+            this.activePresetKey.set(null);
             this._resetCalendarsToDefault();
             return;
         }
-        this._activePresetKey.set(null);
+        this.activePresetKey.set(null);
         this._resetCalendarsToDefault();
     }
     _initializeTimeIfNeeded() {
@@ -1362,8 +1587,8 @@ class ZCalendarComponent {
         const today = getToday();
         this._currentMonth.set(today);
         this._endMonth.set(addMonths(today, 1));
-        this._currentView.set('day');
-        this._endView.set('day');
+        this.currentView.set('day');
+        this.endView.set('day');
     }
     _backupIfNeeded() {
         this._backupSelectedDate.set(this._selectedDate());
@@ -1371,7 +1596,7 @@ class ZCalendarComponent {
         this._backupRangeEnd.set(this._rangeEnd());
     }
     onPopoverHide() {
-        this._hoveredDate.set(null);
+        this.hoveredDate.set(null);
         const needsConfirmation = this.showOkButton() || this.showCancelButton();
         if (needsConfirmation && !this._appliedViaOk()) {
             this._restoreFromBackup();
@@ -1387,7 +1612,7 @@ class ZCalendarComponent {
             this._touched.set(true);
         }
         this._onTouched();
-        this._inputDisplayValue.set(this.displayValue());
+        this.inputDisplayValue.set(this.displayValue());
         if (this.isRangeMode()) {
             this._inputDisplayStart.set(this.displayValueStart());
             this._inputDisplayEnd.set(this.displayValueEnd());
@@ -1416,7 +1641,7 @@ class ZCalendarComponent {
         if (backup) {
             this._syncTimeSignals(backup);
         }
-        this._inputDisplayValue.set(this.displayValue());
+        this.inputDisplayValue.set(this.displayValue());
     }
     onPopoverControl(control) {
         this._popoverControl.set(control);
@@ -1438,7 +1663,7 @@ class ZCalendarComponent {
     onInputChange(event) {
         const input = event.target;
         const { value } = input;
-        this._inputDisplayValue.set(value);
+        this.inputDisplayValue.set(value);
         const trimmedValue = value.trim();
         if (!trimmedValue) {
             return;
@@ -1469,7 +1694,6 @@ class ZCalendarComponent {
             this._selectedDate.set(date);
             this._currentMonth.set(date);
             this._syncTimeSignals(date);
-            this._scrollToCurrentTime();
         }
     }
     _getExpectedFormatLength(format) {
@@ -1500,7 +1724,6 @@ class ZCalendarComponent {
         this._rangeStart.set(date);
         this._currentMonth.set(date);
         this._syncTimeSignals(date);
-        this._scrollToCurrentTime();
     }
     onEndInputChange(event) {
         const input = event.target;
@@ -1527,7 +1750,6 @@ class ZCalendarComponent {
         this._rangeEnd.set(date);
         this._endMonth.set(date);
         this._syncEndTimeSignals(date);
-        this._scrollToEndTime();
     }
     onStartInputEnter(event) {
         event.preventDefault();
@@ -1606,7 +1828,7 @@ class ZCalendarComponent {
         if (!currentValue) {
             this._selectedDate.set(null);
             this._backupSelectedDate.set(null);
-            this._inputDisplayValue.set('');
+            this.inputDisplayValue.set('');
             this._applyValue();
             return;
         }
@@ -1616,13 +1838,13 @@ class ZCalendarComponent {
             this._currentMonth.set(parsed);
             this._syncTimeSignals(parsed);
             this._backupSelectedDate.set(parsed);
-            this._inputDisplayValue.set(this.displayValue());
+            this.inputDisplayValue.set(this.displayValue());
             this._applyValue();
             return;
         }
         const backup = this._backupSelectedDate();
         this._selectedDate.set(backup);
-        this._inputDisplayValue.set(this.displayValue());
+        this.inputDisplayValue.set(this.displayValue());
     }
     onInputEnter(event) {
         event.preventDefault();
@@ -1692,7 +1914,7 @@ class ZCalendarComponent {
             this._cancelAndRestore();
             return;
         }
-        if (this._currentView() !== 'day') {
+        if (this.currentView() !== 'day') {
             return;
         }
         if (key === 'Enter') {
@@ -1722,12 +1944,12 @@ class ZCalendarComponent {
     }
     onDayHover(day) {
         if (this.isRangeMode() && this._rangeStart() && !this._rangeEnd()) {
-            this._hoveredDate.set(day.date);
+            this.hoveredDate.set(day.date);
         }
     }
     onDayLeave() {
         if (this.isRangeMode()) {
-            this._hoveredDate.set(null);
+            this.hoveredDate.set(null);
         }
     }
     onMonthClick(monthIndex) {
@@ -1742,15 +1964,15 @@ class ZCalendarComponent {
             }
         }
         this._currentMonth.set(newMonth);
-        this._hasViewChanged.set(true);
-        this._currentView.set('day');
+        this.hasViewChanged.set(true);
+        this.currentView.set('day');
     }
     onYearClick(year) {
         const currentDate = this._currentMonth();
         if (this.isYearMode()) {
             this._selectedDate.set(setYear(new Date(year, 0, 1), year));
             this._dirty.set(true);
-            this._inputDisplayValue.set(this.displayValue());
+            this.inputDisplayValue.set(this.displayValue());
             this._applyValue();
             this.close();
             return;
@@ -1763,8 +1985,8 @@ class ZCalendarComponent {
             }
         }
         this._currentMonth.set(setYear(currentDate, newYear));
-        this._hasViewChanged.set(true);
-        this._currentView.set(this.isQuarterMode() ? 'quarter' : 'month');
+        this.hasViewChanged.set(true);
+        this.currentView.set(this.isQuarterMode() ? 'quarter' : 'month');
     }
     onQuarterClick(quarterIndex) {
         const currentYear = this._currentMonth().getFullYear();
@@ -1772,7 +1994,7 @@ class ZCalendarComponent {
         const date = new Date(currentYear, firstMonthOfQuarter, 1);
         this._selectedDate.set(date);
         this._dirty.set(true);
-        this._inputDisplayValue.set(this.displayValue());
+        this.inputDisplayValue.set(this.displayValue());
         this._applyValue();
         this.close();
     }
@@ -1781,7 +2003,7 @@ class ZCalendarComponent {
             const currentYear = this._currentMonth().getFullYear();
             this._selectedDate.set(new Date(currentYear, monthIndex, 1));
             this._dirty.set(true);
-            this._inputDisplayValue.set(this.displayValue());
+            this.inputDisplayValue.set(this.displayValue());
             this._applyValue();
             this.close();
             return;
@@ -1789,7 +2011,7 @@ class ZCalendarComponent {
         this.onMonthClick(monthIndex);
     }
     onQuickSelect(preset) {
-        this._activePresetKey.set(preset.key);
+        this.activePresetKey.set(preset.key);
         if (preset.key === 'custom') {
             this._rangeStart.set(null);
             this._rangeEnd.set(null);
@@ -1834,16 +2056,15 @@ class ZCalendarComponent {
         const today = getToday();
         this._currentMonth.set(today);
         if (this.zShowTime() || this.isTimeMode()) {
-            this._hour.set(now.getHours());
-            this._minute.set(now.getMinutes());
-            this._second.set(now.getSeconds());
-            this._period.set(now.getHours() >= 12 ? 'PM' : 'AM');
-            this._scrollToCurrentTime();
+            this.hour.set(now.getHours());
+            this.minute.set(now.getMinutes());
+            this.second.set(now.getSeconds());
+            this.period.set(now.getHours() >= 12 ? 'PM' : 'AM');
         }
         if (this.isMonthMode()) {
             this._selectedDate.set(new Date(now.getFullYear(), now.getMonth(), 1));
             this._dirty.set(true);
-            this._inputDisplayValue.set(this.displayValue());
+            this.inputDisplayValue.set(this.displayValue());
             this._applyValue();
             this.close();
             return;
@@ -1851,7 +2072,7 @@ class ZCalendarComponent {
         if (this.isYearMode()) {
             this._selectedDate.set(new Date(now.getFullYear(), 0, 1));
             this._dirty.set(true);
-            this._inputDisplayValue.set(this.displayValue());
+            this.inputDisplayValue.set(this.displayValue());
             this._applyValue();
             this.close();
             return;
@@ -1860,7 +2081,7 @@ class ZCalendarComponent {
             const currentQuarter = Math.floor(now.getMonth() / 3);
             this._selectedDate.set(new Date(now.getFullYear(), currentQuarter * 3, 1));
             this._dirty.set(true);
-            this._inputDisplayValue.set(this.displayValue());
+            this.inputDisplayValue.set(this.displayValue());
             this._applyValue();
             this.close();
             return;
@@ -1868,7 +2089,7 @@ class ZCalendarComponent {
         if (this.isTimeMode()) {
             this._selectedDate.set(now);
             this._dirty.set(true);
-            this._inputDisplayValue.set(this.displayValue());
+            this.inputDisplayValue.set(this.displayValue());
             if (!this.showOkButton()) {
                 this._applyValue();
                 this.close();
@@ -1895,7 +2116,7 @@ class ZCalendarComponent {
         const selectedDate = this.zShowTime() ? now : today;
         this._selectedDate.set(selectedDate);
         this._dirty.set(true);
-        this._inputDisplayValue.set(this.displayValue());
+        this.inputDisplayValue.set(this.displayValue());
         if (!this.showOkButton()) {
             this._applyValue();
             this.close();
@@ -1907,9 +2128,9 @@ class ZCalendarComponent {
         this._selectedDate.set(null);
         this._rangeStart.set(null);
         this._rangeEnd.set(null);
-        this._hour.set(0);
-        this._minute.set(0);
-        this._second.set(0);
+        this.hour.set(0);
+        this.minute.set(0);
+        this.second.set(0);
         this._dirty.set(true);
         this._backupSelectedDate.set(null);
         this._backupRangeStart.set(null);
@@ -1918,7 +2139,7 @@ class ZCalendarComponent {
         const emitValue = this._getEmitValue();
         this._onChange(emitValue);
         this.zChange.emit(emitValue);
-        this._inputDisplayValue.set('');
+        this.inputDisplayValue.set('');
         if (this.isRangeMode()) {
             this._inputDisplayStart.set('');
             this._inputDisplayEnd.set('');
@@ -1933,24 +2154,24 @@ class ZCalendarComponent {
             return;
         }
         if (this.isTimeMode()) {
-            let hour = this._hour();
+            let hour = this.hour();
             if (this.zTimeFormat() === '12h') {
-                if (this._period() === 'PM' && hour < 12) {
+                if (this.period() === 'PM' && hour < 12) {
                     hour += 12;
                 }
-                if (this._period() === 'AM' && hour === 12) {
+                if (this.period() === 'AM' && hour === 12) {
                     hour = 0;
                 }
             }
             const baseDate = this._selectedDate() ?? new Date();
-            this._selectedDate.set(setTime(baseDate, hour, this._minute(), this._second()));
+            this._selectedDate.set(setTime(baseDate, hour, this.minute(), this.second()));
         }
         this._appliedViaOk.set(true);
         this._applyValue();
         this.close();
     }
     navigatePrevious() {
-        const view = this._currentView();
+        const view = this.currentView();
         const current = this._currentMonth();
         const yearStep = this.isYearMode() || this.isQuarterMode() ? 9 : 12;
         const navigationMap = {
@@ -1962,7 +2183,7 @@ class ZCalendarComponent {
         this._currentMonth.set(navigationMap[view]);
     }
     navigateNext() {
-        const view = this._currentView();
+        const view = this.currentView();
         const current = this._currentMonth();
         const yearStep = this.isYearMode() || this.isQuarterMode() ? 9 : 12;
         const navigationMap = {
@@ -1982,12 +2203,12 @@ class ZCalendarComponent {
         this._currentMonth.set(addYears(current, 1));
     }
     setView(view) {
-        this._hasViewChanged.set(true);
-        this._currentView.set(view);
+        this.hasViewChanged.set(true);
+        this.currentView.set(view);
     }
     setEndView(view) {
-        this._hasEndViewChanged.set(true);
-        this._endView.set(view);
+        this.hasEndViewChanged.set(true);
+        this.endView.set(view);
     }
     onEndMonthClick(monthIndex) {
         const currentDate = this._endMonth();
@@ -1999,8 +2220,8 @@ class ZCalendarComponent {
             newMonth = addMonths(startMonth, 1);
         }
         this._endMonth.set(newMonth);
-        this._hasEndViewChanged.set(true);
-        this._endView.set('day');
+        this.hasEndViewChanged.set(true);
+        this.endView.set('day');
     }
     onEndYearClick(year) {
         const currentDate = this._endMonth();
@@ -2010,8 +2231,8 @@ class ZCalendarComponent {
             newYear = startYear + 1;
         }
         this._endMonth.set(setYear(currentDate, newYear));
-        this._hasEndViewChanged.set(true);
-        this._endView.set('month');
+        this.hasEndViewChanged.set(true);
+        this.endView.set('month');
     }
     onHourInput(event) {
         const input = event.target;
@@ -2020,7 +2241,7 @@ class ZCalendarComponent {
             return;
         }
         const value = parseTimeValue(digits, 23);
-        this._hour.set(value);
+        this.hour.set(value);
         this._updateTimeToDate();
         this._updateInputDisplayAfterTimeChange();
     }
@@ -2031,7 +2252,7 @@ class ZCalendarComponent {
             return;
         }
         const value = parseTimeValue(digits, 59);
-        this._minute.set(value);
+        this.minute.set(value);
         this._updateTimeToDate();
         this._updateInputDisplayAfterTimeChange();
     }
@@ -2042,7 +2263,7 @@ class ZCalendarComponent {
             return;
         }
         const value = parseTimeValue(digits, 59);
-        this._second.set(value);
+        this.second.set(value);
         this._updateTimeToDate();
         this._updateInputDisplayAfterTimeChange();
     }
@@ -2053,19 +2274,19 @@ class ZCalendarComponent {
         if (digits.length > 0 && digits.length <= 2) {
             if (dataType === 'hour') {
                 const value = parseTimeValue(digits, this.zTimeFormat() === '12h' ? 12 : 23);
-                this._hour.set(value);
+                this.hour.set(value);
                 this._updateTimeToDate();
                 this._updateInputDisplayAfterTimeChange();
             }
             if (dataType === 'minute') {
                 const value = parseTimeValue(digits, 59);
-                this._minute.set(value);
+                this.minute.set(value);
                 this._updateTimeToDate();
                 this._updateInputDisplayAfterTimeChange();
             }
             if (dataType === 'second') {
                 const value = parseTimeValue(digits, 59);
-                this._second.set(value);
+                this.second.set(value);
                 this._updateTimeToDate();
                 this._updateInputDisplayAfterTimeChange();
             }
@@ -2198,11 +2419,11 @@ class ZCalendarComponent {
     _handleSingleSelection(date) {
         let finalDate = date;
         if (this.zShowTime()) {
-            finalDate = setTime(date, this._hour(), this._minute(), this._second());
+            finalDate = setTime(date, this.hour(), this.minute(), this.second());
         }
         this._selectedDate.set(finalDate);
         this._dirty.set(true);
-        this._inputDisplayValue.set(this.displayValue());
+        this.inputDisplayValue.set(this.displayValue());
         if (!this.zShowTime() && !this.zShowOk()) {
             this._applyValue();
             this.close();
@@ -2214,20 +2435,20 @@ class ZCalendarComponent {
         if (!start || (start && end)) {
             let startDate = date;
             if (this.zShowTime()) {
-                let hour = this._hour();
+                let hour = this.hour();
                 if (this.zTimeFormat() === '12h') {
-                    if (this._period() === 'PM' && hour < 12) {
+                    if (this.period() === 'PM' && hour < 12) {
                         hour += 12;
                     }
-                    if (this._period() === 'AM' && hour === 12) {
+                    if (this.period() === 'AM' && hour === 12) {
                         hour = 0;
                     }
                 }
-                startDate = setTime(date, hour, this._minute(), this._second());
+                startDate = setTime(date, hour, this.minute(), this.second());
             }
             this._rangeStart.set(startDate);
             this._rangeEnd.set(null);
-            this._activePresetKey.set('custom');
+            this.activePresetKey.set('custom');
             this._inputDisplayStart.set(this.displayValueStart());
             this._inputDisplayEnd.set('');
             return;
@@ -2252,7 +2473,7 @@ class ZCalendarComponent {
         this._inputDisplayStart.set(this.displayValueStart());
         this._inputDisplayEnd.set(this.displayValueEnd());
         if (normalized.start && normalized.end) {
-            this._activePresetKey.set(this._detectMatchingPreset(normalized.start, normalized.end));
+            this.activePresetKey.set(this._detectMatchingPreset(normalized.start, normalized.end));
         }
         if (!this.showOkButton() && !this.showCancelButton()) {
             this._applyValue();
@@ -2260,29 +2481,29 @@ class ZCalendarComponent {
         }
     }
     _updateTimeToDate() {
-        if (!this.zShowTime()) {
+        if (!this.zShowTime() && !this.isTimeMode()) {
             return;
         }
-        let hour = this._hour();
+        let hour = this.hour();
         if (this.zTimeFormat() === '12h') {
-            if (this._period() === 'PM' && hour < 12) {
+            if (this.period() === 'PM' && hour < 12) {
                 hour += 12;
             }
-            if (this._period() === 'AM' && hour === 12) {
+            if (this.period() === 'AM' && hour === 12) {
                 hour = 0;
             }
         }
         if (this.isRangeMode()) {
             const start = this._rangeStart();
             if (start) {
-                this._rangeStart.set(setTime(start, hour, this._minute(), this._second()));
+                this._rangeStart.set(setTime(start, hour, this.minute(), this.second()));
                 this._dirty.set(true);
             }
             return;
         }
         const selected = this._selectedDate();
         if (selected) {
-            this._selectedDate.set(setTime(selected, hour, this._minute(), this._second()));
+            this._selectedDate.set(setTime(selected, hour, this.minute(), this.second()));
         }
     }
     _detectMatchingPreset(start, end) {
@@ -2304,7 +2525,7 @@ class ZCalendarComponent {
         this._onChange(emitValue);
         this.zChange.emit(emitValue);
         this._dirty.set(true);
-        this._inputDisplayValue.set(this.displayValue());
+        this.inputDisplayValue.set(this.displayValue());
         if (this.isRangeMode()) {
             this._inputDisplayStart.set(this.displayValueStart());
             this._inputDisplayEnd.set(this.displayValueEnd());
@@ -2393,10 +2614,10 @@ class ZCalendarComponent {
         }
     }
     _syncTimeSignals(date) {
-        this._hour.set(date.getHours());
-        this._minute.set(date.getMinutes());
-        this._second.set(date.getSeconds());
-        this._period.set(date.getHours() >= 12 ? 'PM' : 'AM');
+        this.hour.set(date.getHours());
+        this.minute.set(date.getMinutes());
+        this.second.set(date.getSeconds());
+        this.period.set(date.getHours() >= 12 ? 'PM' : 'AM');
     }
     _getParseFormat() {
         if (!this.zShowTime() && !this.isTimeMode()) {
@@ -2419,7 +2640,7 @@ class ZCalendarComponent {
         return `${this.zFormat()} ${timeFormat}`;
     }
     _updateInputDisplay() {
-        this._inputDisplayValue.set(this.displayValue());
+        this.inputDisplayValue.set(this.displayValue());
     }
     _clearDateValues() {
         if (this.isRangeMode()) {
@@ -2449,7 +2670,7 @@ class ZCalendarComponent {
             this._inputDisplayEnd.set(this.displayValueEnd());
             return;
         }
-        this._inputDisplayValue.set(this.displayValue());
+        this.inputDisplayValue.set(this.displayValue());
     }
     _emitControl() {
         this.zControl.emit({
@@ -2471,65 +2692,170 @@ class ZCalendarComponent {
         });
     }
     togglePeriod() {
-        const currentPeriod = this._period();
+        const currentPeriod = this.period();
         const newPeriod = currentPeriod === 'AM' ? 'PM' : 'AM';
-        this._period.set(newPeriod);
-        const currentHour = this._hour();
+        this.period.set(newPeriod);
+        const currentHour = this.hour();
         if (newPeriod === 'PM' && currentHour < 12) {
-            this._hour.set(currentHour + 12);
+            this.hour.set(currentHour + 12);
         }
         if (newPeriod === 'AM' && currentHour >= 12) {
-            this._hour.set(currentHour - 12);
+            this.hour.set(currentHour - 12);
         }
         this._updateTimeToDate();
         this._updateInputDisplayAfterTimeChange();
     }
+    incrementHour() {
+        const maxHour = this.zTimeFormat() === '12h' ? 12 : 23;
+        const minHour = this.zTimeFormat() === '12h' ? 1 : 0;
+        let currentHour = this.displayHour();
+        currentHour = currentHour >= maxHour ? minHour : currentHour + 1;
+        this.selectHour(currentHour);
+    }
+    decrementHour() {
+        const maxHour = this.zTimeFormat() === '12h' ? 12 : 23;
+        const minHour = this.zTimeFormat() === '12h' ? 1 : 0;
+        let currentHour = this.displayHour();
+        currentHour = currentHour <= minHour ? maxHour : currentHour - 1;
+        this.selectHour(currentHour);
+    }
+    incrementMinute() {
+        let currentMinute = this.minute();
+        currentMinute = currentMinute >= 59 ? 0 : currentMinute + 1;
+        this.selectMinute(currentMinute);
+    }
+    decrementMinute() {
+        let currentMinute = this.minute();
+        currentMinute = currentMinute <= 0 ? 59 : currentMinute - 1;
+        this.selectMinute(currentMinute);
+    }
+    incrementSecond() {
+        let currentSecond = this.second();
+        currentSecond = currentSecond >= 59 ? 0 : currentSecond + 1;
+        this.selectSecond(currentSecond);
+    }
+    decrementSecond() {
+        let currentSecond = this.second();
+        currentSecond = currentSecond <= 0 ? 59 : currentSecond - 1;
+        this.selectSecond(currentSecond);
+    }
+    incrementHourEnd() {
+        const maxHour = this.zTimeFormat() === '12h' ? 12 : 23;
+        const minHour = this.zTimeFormat() === '12h' ? 1 : 0;
+        let currentHour = this.displayHourEnd();
+        currentHour = currentHour >= maxHour ? minHour : currentHour + 1;
+        this.selectHourEnd(currentHour);
+    }
+    decrementHourEnd() {
+        const maxHour = this.zTimeFormat() === '12h' ? 12 : 23;
+        const minHour = this.zTimeFormat() === '12h' ? 1 : 0;
+        let currentHour = this.displayHourEnd();
+        currentHour = currentHour <= minHour ? maxHour : currentHour - 1;
+        this.selectHourEnd(currentHour);
+    }
+    incrementMinuteEnd() {
+        let currentMinute = this._minuteEnd();
+        currentMinute = currentMinute >= 59 ? 0 : currentMinute + 1;
+        this.selectMinuteEnd(currentMinute);
+    }
+    decrementMinuteEnd() {
+        let currentMinute = this._minuteEnd();
+        currentMinute = currentMinute <= 0 ? 59 : currentMinute - 1;
+        this.selectMinuteEnd(currentMinute);
+    }
+    incrementSecondEnd() {
+        let currentSecond = this._secondEnd();
+        currentSecond = currentSecond >= 59 ? 0 : currentSecond + 1;
+        this.selectSecondEnd(currentSecond);
+    }
+    decrementSecondEnd() {
+        let currentSecond = this._secondEnd();
+        currentSecond = currentSecond <= 0 ? 59 : currentSecond - 1;
+        this.selectSecondEnd(currentSecond);
+    }
+    openTimeDropdown(event) {
+        event.stopPropagation();
+        this.timeDropdownOpen.set(true);
+    }
+    closeTimeDropdown() {
+        this.timeDropdownOpen.set(false);
+    }
+    openTimeDropdownEnd(event) {
+        event.stopPropagation();
+        this.timeDropdownEndOpen.set(true);
+    }
+    closeTimeDropdownEnd() {
+        this.timeDropdownEndOpen.set(false);
+    }
+    onTimeDropdownShow() {
+        this._scrollToTimeDropdown();
+    }
+    onTimeDropdownEndShow() {
+        this._scrollToTimeDropdown(true);
+    }
+    _scrollToTimeDropdown(isEnd = false) {
+        setTimeout(() => {
+            const suffix = isEnd ? '-end' : '';
+            if (this.zShowHour()) {
+                this._scrollToTimeValue(`.z-time-scroll-hour${suffix}`);
+            }
+            if (this.zShowMinute()) {
+                this._scrollToTimeValue(`.z-time-scroll-minute${suffix}`);
+            }
+            if (this.zShowSecond()) {
+                this._scrollToTimeValue(`.z-time-scroll-second${suffix}`);
+            }
+        });
+    }
     _updateInputDisplayAfterTimeChange() {
         if (this.isRangeMode()) {
             this._inputDisplayStart.set(this.displayValueStart());
             return;
         }
-        this._inputDisplayValue.set(this.displayValue());
+        this.inputDisplayValue.set(this.displayValue());
     }
     onPeriodChange(event) {
         const select = event.target;
         const newPeriod = select.value;
-        const currentHour = this._hour();
-        this._period.set(newPeriod);
+        const currentHour = this.hour();
+        this.period.set(newPeriod);
         if (newPeriod === 'PM' && currentHour < 12) {
-            this._hour.set(currentHour + 12);
+            this.hour.set(currentHour + 12);
         }
         if (newPeriod === 'AM' && currentHour >= 12) {
-            this._hour.set(currentHour - 12);
+            this.hour.set(currentHour - 12);
         }
         this._updateTimeToDate();
     }
     selectHour(hour) {
         let actualHour = hour;
         if (this.zTimeFormat() === '12h') {
-            if (this._period() === 'PM' && hour !== 12) {
+            if (this.period() === 'PM' && hour !== 12) {
                 actualHour = hour + 12;
             }
-            if (this._period() === 'AM' && hour === 12) {
+            if (this.period() === 'AM' && hour === 12) {
                 actualHour = 0;
             }
         }
-        this._hour.set(actualHour);
+        this.hour.set(actualHour);
         this._updateTimeToDate();
         this._updateInputDisplayAfterTimeChange();
+        this._scrollToTimeValue('.z-time-scroll-hour');
     }
     selectMinute(minute) {
-        this._minute.set(minute);
+        this.minute.set(minute);
         this._updateTimeToDate();
         this._updateInputDisplayAfterTimeChange();
+        this._scrollToTimeValue('.z-time-scroll-minute');
     }
     selectSecond(second) {
-        this._second.set(second);
+        this.second.set(second);
         this._updateTimeToDate();
         this._updateInputDisplayAfterTimeChange();
+        this._scrollToTimeValue('.z-time-scroll-second');
     }
     selectPeriod(period) {
-        if (this._period() === period) {
+        if (this.period() === period) {
             return;
         }
         this.togglePeriod();
@@ -2547,16 +2873,19 @@ class ZCalendarComponent {
         this._hourEnd.set(actualHour);
         this._updateEndTimeToDate();
         this._inputDisplayEnd.set(this.displayValueEnd());
+        this._scrollToTimeValue('.z-time-scroll-hour-end');
     }
     selectMinuteEnd(minute) {
         this._minuteEnd.set(minute);
         this._updateEndTimeToDate();
         this._inputDisplayEnd.set(this.displayValueEnd());
+        this._scrollToTimeValue('.z-time-scroll-minute-end');
     }
     selectSecondEnd(second) {
         this._secondEnd.set(second);
         this._updateEndTimeToDate();
         this._inputDisplayEnd.set(this.displayValueEnd());
+        this._scrollToTimeValue('.z-time-scroll-second-end');
     }
     selectPeriodEnd(period) {
         if (this._periodEnd() === period) {
@@ -2571,268 +2900,15 @@ class ZCalendarComponent {
         const scrollTop = value * itemHeight;
         container.scrollTo({ top: scrollTop, behavior: 'smooth' });
     }
-    isHourSelected(hour) {
-        return this.displayHour() === hour;
-    }
-    isMinuteSelected(minute) {
-        return this._minute() === minute;
-    }
-    isSecondSelected(second) {
-        return this._second() === second;
-    }
-    isHourEndSelected(hour) {
-        return this.displayHourEnd() === hour;
-    }
-    isMinuteEndSelected(minute) {
-        return this._minuteEnd() === minute;
-    }
-    isSecondEndSelected(second) {
-        return this._secondEnd() === second;
-    }
-    isEndHourDisabled(hour) {
-        if (!this.isSameDayRange()) {
-            return false;
-        }
-        const startHour = this._hour();
-        let actualHour = hour;
-        let actualStartHour = startHour;
-        if (this.zTimeFormat() === '12h') {
-            if (this._periodEnd() === 'PM' && hour !== 12) {
-                actualHour = hour + 12;
-            }
-            if (this._periodEnd() === 'AM' && hour === 12) {
-                actualHour = 0;
-            }
-            if (this._period() === 'PM' && startHour !== 12) {
-                actualStartHour = startHour + 12;
-            }
-            if (this._period() === 'AM' && startHour === 12) {
-                actualStartHour = 0;
-            }
-        }
-        return actualHour < actualStartHour;
-    }
-    isEndMinuteDisabled(minute) {
-        if (!this.isSameDayRange()) {
-            return false;
-        }
-        const startHour = this._hour();
-        const endHour = this._hourEnd();
-        let actualStartHour = startHour;
-        let actualEndHour = endHour;
-        if (this.zTimeFormat() === '12h') {
-            if (this._period() === 'PM' && startHour !== 12) {
-                actualStartHour = startHour + 12;
-            }
-            if (this._period() === 'AM' && startHour === 12) {
-                actualStartHour = 0;
-            }
-            if (this._periodEnd() === 'PM' && endHour !== 12) {
-                actualEndHour = endHour + 12;
-            }
-            if (this._periodEnd() === 'AM' && endHour === 12) {
-                actualEndHour = 0;
-            }
-        }
-        if (actualEndHour !== actualStartHour) {
-            return false;
-        }
-        return minute < this._minute();
-    }
-    isEndSecondDisabled(second) {
-        if (!this.isSameDayRange()) {
-            return false;
-        }
-        const startHour = this._hour();
-        const endHour = this._hourEnd();
-        let actualStartHour = startHour;
-        let actualEndHour = endHour;
-        if (this.zTimeFormat() === '12h') {
-            if (this._period() === 'PM' && startHour !== 12) {
-                actualStartHour = startHour + 12;
-            }
-            if (this._period() === 'AM' && startHour === 12) {
-                actualStartHour = 0;
-            }
-            if (this._periodEnd() === 'PM' && endHour !== 12) {
-                actualEndHour = endHour + 12;
-            }
-            if (this._periodEnd() === 'AM' && endHour === 12) {
-                actualEndHour = 0;
-            }
-        }
-        if (actualEndHour !== actualStartHour) {
-            return false;
-        }
-        if (this._minuteEnd() !== this._minute()) {
-            return false;
-        }
-        return second <= this._second();
-    }
-    isEndPeriodDisabled(period) {
-        if (!this.isSameDayRange()) {
-            return false;
-        }
-        if (this._period() === 'PM' && period === 'AM') {
-            return true;
-        }
-        return false;
-    }
-    _scrollToCurrentTime() {
-        if (!this.zShowTime() && !this.isTimeMode()) {
-            return;
-        }
-        const itemHeight = 28;
-        setTimeout(() => {
-            const timeColumns = document.querySelectorAll('.z-time-column');
-            if (!timeColumns.length) {
-                return;
-            }
-            const columnsArray = Array.from(timeColumns);
-            const startIndex = 0;
-            let columnIndex = startIndex;
-            if (this.zShowHour()) {
-                const hourColumn = columnsArray[columnIndex];
-                if (hourColumn) {
-                    const hourValue = this.zTimeFormat() === '12h' ? this.displayHour() - 1 : this._hour();
-                    hourColumn.scrollTo({ top: hourValue * itemHeight, behavior: 'smooth' });
-                }
-                columnIndex++;
-            }
-            if (this.zShowMinute()) {
-                const minuteColumn = columnsArray[columnIndex];
-                if (minuteColumn) {
-                    minuteColumn.scrollTo({ top: this._minute() * itemHeight, behavior: 'smooth' });
-                }
-                columnIndex++;
-            }
-            if (this.zShowSecond()) {
-                const secondColumn = columnsArray[columnIndex];
-                if (secondColumn) {
-                    secondColumn.scrollTo({ top: this._second() * itemHeight, behavior: 'smooth' });
-                }
-            }
-        }, 50);
-    }
-    _scrollToEndTime() {
-        if (!this.zShowTime() || !this.isRangeMode()) {
+    _scrollToTimeValue(scrollbarSelector) {
+        const scrollbar = document.querySelector(scrollbarSelector);
+        if (!scrollbar) {
             return;
         }
-        const itemHeight = 28;
-        setTimeout(() => {
-            const timeColumns = document.querySelectorAll('.z-time-column');
-            if (!timeColumns.length) {
-                return;
-            }
-            const columnsArray = Array.from(timeColumns);
-            const columnsPerSection = (this.zShowHour() ? 1 : 0) + (this.zShowMinute() ? 1 : 0) + (this.zShowSecond() ? 1 : 0);
-            const endStartIndex = columnsPerSection;
-            let columnIndex = endStartIndex;
-            if (this.zShowHour()) {
-                const hourColumn = columnsArray[columnIndex];
-                if (hourColumn) {
-                    const hourValue = this.zTimeFormat() === '12h' ? this.displayHourEnd() - 1 : this._hourEnd();
-                    hourColumn.scrollTo({ top: hourValue * itemHeight, behavior: 'smooth' });
-                }
-                columnIndex++;
-            }
-            if (this.zShowMinute()) {
-                const minuteColumn = columnsArray[columnIndex];
-                if (minuteColumn) {
-                    minuteColumn.scrollTo({ top: this._minuteEnd() * itemHeight, behavior: 'smooth' });
-                }
-                columnIndex++;
-            }
-            if (this.zShowSecond()) {
-                const secondColumn = columnsArray[columnIndex];
-                if (secondColumn) {
-                    secondColumn.scrollTo({ top: this._secondEnd() * itemHeight, behavior: 'smooth' });
-                }
-            }
-        }, 50);
-    }
-    _scrollToTimeOnOpen() {
-        if (!this.zShowTime() && !this.isTimeMode()) {
-            return;
+        const selectedButton = scrollbar.querySelector('button.bg-primary');
+        if (selectedButton) {
+            selectedButton.scrollIntoView({ block: 'center', behavior: 'smooth' });
         }
-        const itemHeight = 28;
-        setTimeout(() => {
-            const timeColumns = document.querySelectorAll('.z-time-column');
-            if (!timeColumns.length) {
-                return;
-            }
-            const columnsArray = Array.from(timeColumns);
-            if (this.isRangeMode()) {
-                const columnsPerSection = (this.zShowHour() ? 1 : 0) + (this.zShowMinute() ? 1 : 0) + (this.zShowSecond() ? 1 : 0);
-                let columnIndex = 0;
-                if (this.zShowHour()) {
-                    const hourColumn = columnsArray[columnIndex];
-                    if (hourColumn) {
-                        const hourValue = this.zTimeFormat() === '12h' ? this.displayHour() - 1 : this._hour();
-                        hourColumn.scrollTop = hourValue * itemHeight;
-                    }
-                    columnIndex++;
-                }
-                if (this.zShowMinute()) {
-                    const minuteColumn = columnsArray[columnIndex];
-                    if (minuteColumn) {
-                        minuteColumn.scrollTop = this._minute() * itemHeight;
-                    }
-                    columnIndex++;
-                }
-                if (this.zShowSecond()) {
-                    const secondColumn = columnsArray[columnIndex];
-                    if (secondColumn) {
-                        secondColumn.scrollTop = this._second() * itemHeight;
-                    }
-                }
-                columnIndex = columnsPerSection;
-                if (this.zShowHour()) {
-                    const hourColumn = columnsArray[columnIndex];
-                    if (hourColumn) {
-                        const hourValue = this.zTimeFormat() === '12h' ? this.displayHourEnd() - 1 : this._hourEnd();
-                        hourColumn.scrollTop = hourValue * itemHeight;
-                    }
-                    columnIndex++;
-                }
-                if (this.zShowMinute()) {
-                    const minuteColumn = columnsArray[columnIndex];
-                    if (minuteColumn) {
-                        minuteColumn.scrollTop = this._minuteEnd() * itemHeight;
-                    }
-                    columnIndex++;
-                }
-                if (this.zShowSecond()) {
-                    const secondColumn = columnsArray[columnIndex];
-                    if (secondColumn) {
-                        secondColumn.scrollTop = this._secondEnd() * itemHeight;
-                    }
-                }
-                return;
-            }
-            let columnIndex = 0;
-            if (this.zShowHour()) {
-                const hourColumn = columnsArray[columnIndex];
-                if (hourColumn) {
-                    const hourValue = this.zTimeFormat() === '12h' ? this.displayHour() - 1 : this._hour();
-                    hourColumn.scrollTop = hourValue * itemHeight;
-                }
-                columnIndex++;
-            }
-            if (this.zShowMinute()) {
-                const minuteColumn = columnsArray[columnIndex];
-                if (minuteColumn) {
-                    minuteColumn.scrollTop = this._minute() * itemHeight;
-                }
-                columnIndex++;
-            }
-            if (this.zShowSecond()) {
-                const secondColumn = columnsArray[columnIndex];
-                if (secondColumn) {
-                    secondColumn.scrollTop = this._second() * itemHeight;
-                }
-            }
-        }, 0);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ZCalendarComponent, isStandalone: true, selector: "z-calendar", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, zMode: { classPropertyName: "zMode", publicName: "zMode", isSignal: true, isRequired: false, transformFunction: null }, zSize: { classPropertyName: "zSize", publicName: "zSize", isSignal: true, isRequired: false, transformFunction: null }, zLabel: { classPropertyName: "zLabel", publicName: "zLabel", isSignal: true, isRequired: false, transformFunction: null }, zLabelClass: { classPropertyName: "zLabelClass", publicName: "zLabelClass", isSignal: true, isRequired: false, transformFunction: null }, zPlaceholder: { classPropertyName: "zPlaceholder", publicName: "zPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, zRequired: { classPropertyName: "zRequired", publicName: "zRequired", isSignal: true, isRequired: false, transformFunction: null }, zDisabled: { classPropertyName: "zDisabled", publicName: "zDisabled", isSignal: true, isRequired: false, transformFunction: null }, zReadonly: { classPropertyName: "zReadonly", publicName: "zReadonly", isSignal: true, isRequired: false, transformFunction: null }, zShowTime: { classPropertyName: "zShowTime", publicName: "zShowTime", isSignal: true, isRequired: false, transformFunction: null }, zTimeFormat: { classPropertyName: "zTimeFormat", publicName: "zTimeFormat", isSignal: true, isRequired: false, transformFunction: null }, zShowHour: { classPropertyName: "zShowHour", publicName: "zShowHour", isSignal: true, isRequired: false, transformFunction: null }, zShowMinute: { classPropertyName: "zShowMinute", publicName: "zShowMinute", isSignal: true, isRequired: false, transformFunction: null }, zShowSecond: { classPropertyName: "zShowSecond", publicName: "zShowSecond", isSignal: true, isRequired: false, transformFunction: null }, zQuickSelect: { classPropertyName: "zQuickSelect", publicName: "zQuickSelect", isSignal: true, isRequired: false, transformFunction: null }, zAllowClear: { classPropertyName: "zAllowClear", publicName: "zAllowClear", isSignal: true, isRequired: false, transformFunction: null }, zFormat: { classPropertyName: "zFormat", publicName: "zFormat", isSignal: true, isRequired: false, transformFunction: null }, zMinDate: { classPropertyName: "zMinDate", publicName: "zMinDate", isSignal: true, isRequired: false, transformFunction: null }, zMaxDate: { classPropertyName: "zMaxDate", publicName: "zMaxDate", isSignal: true, isRequired: false, transformFunction: null }, zValueType: { classPropertyName: "zValueType", publicName: "zValueType", isSignal: true, isRequired: false, transformFunction: null }, zValidators: { classPropertyName: "zValidators", publicName: "zValidators", isSignal: true, isRequired: false, transformFunction: null }, zLocale: { classPropertyName: "zLocale", publicName: "zLocale", isSignal: true, isRequired: false, transformFunction: null }, zShowOk: { classPropertyName: "zShowOk", publicName: "zShowOk", isSignal: true, isRequired: false, transformFunction: null }, zOkText: { classPropertyName: "zOkText", publicName: "zOkText", isSignal: true, isRequired: false, transformFunction: null }, zShowCancel: { classPropertyName: "zShowCancel", publicName: "zShowCancel", isSignal: true, isRequired: false, transformFunction: null }, zCancelText: { classPropertyName: "zCancelText", publicName: "zCancelText", isSignal: true, isRequired: false, transformFunction: null }, zDisabledDate: { classPropertyName: "zDisabledDate", publicName: "zDisabledDate", isSignal: true, isRequired: false, transformFunction: null }, zScrollClose: { classPropertyName: "zScrollClose", publicName: "zScrollClose", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { zControl: "zControl", zChange: "zChange" }, providers: [
@@ -2842,7 +2918,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 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 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 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-[90vh] max-w-[95vw] flex-col overflow-auto rounded-[6px] border shadow-lg 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 }}\n          </button>\n        }\n      </div>\n    }\n    <div class=\"flex flex-1 flex-col gap-2 overflow-auto p-3 sm:overflow-visible\">\n      @if (!isTimeMode()) {\n        <div class=\"z-calendars-wrapper flex flex-col items-start gap-3 sm:flex-row sm:gap-0\">\n          <!-- First Calendar -->\n          <div class=\"z-calendar-section flex flex-col gap-1\">\n            @if (!isTimeMode()) {\n              <div class=\"flex w-full items-center justify-between space-x-1\">\n                <button\n                  type=\"button\"\n                  z-button\n                  zType=\"ghost\"\n                  zSize=\"sm\"\n                  class=\"size-8 p-0!\"\n                  [zWave]=\"false\"\n                  [zWave]=\"false\"\n                  (click)=\"navigatePrevious()\">\n                  <z-icon zType=\"lucideChevronsLeft\" zSize=\"16\" />\n                </button>\n\n                <button\n                  type=\"button\"\n                  z-button\n                  zType=\"ghost\"\n                  zSize=\"sm\"\n                  class=\"size-8 p-0!\"\n                  [zWave]=\"false\"\n                  [zWave]=\"false\"\n                  (click)=\"navigatePreviousFast()\">\n                  <z-icon zType=\"lucideChevronLeft\" zSize=\"16\" />\n                </button>\n\n                <div class=\"flex flex-1 items-center justify-center gap-0.5\">\n                  @if (!isYearMode() && !isQuarterMode()) {\n                    <button\n                      type=\"button\"\n                      z-button\n                      zType=\"ghost\"\n                      zSize=\"sm\"\n                      class=\"w-20 px-2!\"\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=\"px-2!\"\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-8 p-0!\"\n                  [zDisabled]=\"!canNavigateStartNext()\"\n                  [zWave]=\"false\"\n                  (click)=\"navigateNextFast()\">\n                  <z-icon zType=\"lucideChevronRight\" zSize=\"16\" />\n                </button>\n\n                <button\n                  type=\"button\"\n                  z-button\n                  zType=\"ghost\"\n                  zSize=\"sm\"\n                  class=\"size-8 p-0!\"\n                  [zDisabled]=\"!canNavigateStartNext()\"\n                  [zWave]=\"false\"\n                  (click)=\"navigateNext()\">\n                  <z-icon zType=\"lucideChevronsRight\" zSize=\"16\" />\n                </button>\n              </div>\n\n              <div class=\"z-calendar-views w-full\" [class.z-calendar-views-quarter]=\"isQuarterMode()\">\n                @if (currentView() === 'day') {\n                  <div class=\"flex h-full w-full flex-col gap-1\" [class.z-calendar-animate]=\"hasViewChanged()\">\n                    <div class=\"grid w-full grid-cols-7\">\n                      @for (weekday of weekdayNames; track weekday) {\n                        <div class=\"text-muted-foreground flex h-7 items-center justify-center text-xs font-medium\">\n                          {{ weekday }}\n                        </div>\n                      }\n                    </div>\n\n                    @for (week of calendarDays(); track $index) {\n                      <div class=\"grid w-full grid-cols-7\">\n                        @for (day of week; track day.date.getTime()) {\n                          <button\n                            type=\"button\"\n                            [class]=\"day | zDayClasses\"\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\n                @if (currentView() === 'month') {\n                  <div class=\"grid h-full w-full grid-cols-3 grid-rows-4\" [class.z-calendar-animate]=\"hasViewChanged()\">\n                    @for (month of monthNames; track month; let i = $index) {\n                      @let monthDisabled = isStartMonthDisabled(i);\n                      <div class=\"flex items-center justify-center\">\n                        <button\n                          type=\"button\"\n                          [class]=\"i | zMonthClasses: currentMonthIndex()\"\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 gap-0.5\"\n                    [class.grid-rows-4]=\"!isYearMode() && !isQuarterMode()\"\n                    [class.grid-rows-3]=\"isYearMode() || isQuarterMode()\"\n                    [class.z-calendar-animate]=\"hasViewChanged()\">\n                    @for (year of isYearMode() || isQuarterMode() ? yearRangeSmall() : yearRange(); track year) {\n                      @let yearDisabled = isStartYearDisabled(year);\n                      <div class=\"flex items-center justify-center\">\n                        <button\n                          type=\"button\"\n                          [class]=\"year | zYearClasses: currentYear()\"\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 class=\"grid w-full grid-cols-2 gap-2\" [class.z-calendar-animate]=\"hasViewChanged()\">\n                    @for (quarter of quarterNames; track quarter; let i = $index) {\n                      <div class=\"flex items-center justify-center\">\n                        <button\n                          type=\"button\"\n                          [class]=\"i | zQuarterClasses: currentQuarterIndex()\"\n                          (click)=\"onQuarterClick(i)\">\n                          {{ quarter }}\n                        </button>\n                      </div>\n                    }\n                  </div>\n                }\n              </div>\n            }\n          </div>\n\n          <!-- Time Picker Side Panel (for single date with showTime) -->\n          @if (!isRangeMode() && zShowTime() && currentView() === 'day') {\n            <div\n              class=\"border-border mt-3 flex w-full flex-col items-center border-t pt-3 sm:mt-0 sm:w-auto sm:border-t-0 sm:border-l sm:pt-0 sm:pl-3\">\n              <div class=\"text-muted-foreground mb-2 text-center text-xs font-medium\">\n                {{ 'i18n_z_ui_calendar_time' | translate }}\n              </div>\n              <div class=\"flex flex-col items-center gap-2\">\n                <div class=\"flex justify-center gap-1\">\n                  @if (zShowHour()) {\n                    <ng-scrollbar\n                      class=\"z-time-column border-border h-[140px] w-12 rounded border sm:h-[235px]\"\n                      track=\"vertical\">\n                      <div class=\"flex flex-col\">\n                        @for (hour of hourOptions(); track hour) {\n                          <button\n                            type=\"button\"\n                            class=\"hover:bg-muted flex h-7 shrink-0 cursor-pointer items-center justify-center text-sm transition-colors\"\n                            [class.bg-primary]=\"isHourSelected(hour)\"\n                            [class.text-primary-foreground]=\"isHourSelected(hour)\"\n                            [class.font-medium]=\"isHourSelected(hour)\"\n                            (click)=\"selectHour(hour)\">\n                            {{ hour | number: '2.0-0' }}\n                          </button>\n                        }\n                      </div>\n                    </ng-scrollbar>\n                  }\n                  @if (zShowMinute()) {\n                    <ng-scrollbar\n                      class=\"z-time-column border-border h-[140px] w-12 rounded border sm:h-[235px]\"\n                      track=\"vertical\">\n                      <div class=\"flex flex-col\">\n                        @for (minute of minuteOptions; track minute) {\n                          <button\n                            type=\"button\"\n                            class=\"hover:bg-muted flex h-7 shrink-0 cursor-pointer items-center justify-center text-sm transition-colors\"\n                            [class.bg-primary]=\"isMinuteSelected(minute)\"\n                            [class.text-primary-foreground]=\"isMinuteSelected(minute)\"\n                            [class.font-medium]=\"isMinuteSelected(minute)\"\n                            (click)=\"selectMinute(minute)\">\n                            {{ minute | number: '2.0-0' }}\n                          </button>\n                        }\n                      </div>\n                    </ng-scrollbar>\n                  }\n                  @if (zShowSecond()) {\n                    <ng-scrollbar\n                      class=\"z-time-column border-border h-[140px] w-12 rounded border sm:h-[235px]\"\n                      track=\"vertical\">\n                      <div class=\"flex flex-col\">\n                        @for (second of secondOptions; track second) {\n                          <button\n                            type=\"button\"\n                            class=\"hover:bg-muted flex h-7 shrink-0 cursor-pointer items-center justify-center text-sm transition-colors\"\n                            [class.bg-primary]=\"isSecondSelected(second)\"\n                            [class.text-primary-foreground]=\"isSecondSelected(second)\"\n                            [class.font-medium]=\"isSecondSelected(second)\"\n                            (click)=\"selectSecond(second)\">\n                            {{ second | number: '2.0-0' }}\n                          </button>\n                        }\n                      </div>\n                    </ng-scrollbar>\n                  }\n                </div>\n                @if (zTimeFormat() === '12h') {\n                  <div class=\"flex w-full gap-1\">\n                    <button\n                      type=\"button\"\n                      class=\"hover:bg-muted flex h-7 flex-1 cursor-pointer items-center justify-center rounded text-sm font-medium transition-colors\"\n                      [class.bg-primary]=\"period() === 'AM'\"\n                      [class.text-primary-foreground]=\"period() === 'AM'\"\n                      (click)=\"selectPeriod('AM')\">\n                      AM\n                    </button>\n                    <button\n                      type=\"button\"\n                      class=\"hover:bg-muted flex h-7 flex-1 cursor-pointer items-center justify-center rounded text-sm font-medium transition-colors\"\n                      [class.bg-primary]=\"period() === 'PM'\"\n                      [class.text-primary-foreground]=\"period() === 'PM'\"\n                      (click)=\"selectPeriod('PM')\">\n                      PM\n                    </button>\n                  </div>\n                }\n              </div>\n            </div>\n          }\n\n          <!-- Second Calendar (Range Mode Only) -->\n          @if (isRangeMode()) {\n            <!-- Divider -->\n            <div class=\"border-border bg-border hidden self-stretch sm:mx-3 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 flex-col gap-1\">\n              <div class=\"flex w-full items-center justify-between space-x-1\">\n                <button\n                  type=\"button\"\n                  z-button\n                  zType=\"ghost\"\n                  zSize=\"sm\"\n                  class=\"size-8 p-0!\"\n                  [zDisabled]=\"!canNavigateEndPrev()\"\n                  [zWave]=\"false\"\n                  (click)=\"navigateEndPreviousFast()\">\n                  <z-icon zType=\"lucideChevronsLeft\" zSize=\"16\" />\n                </button>\n\n                <button\n                  type=\"button\"\n                  z-button\n                  zType=\"ghost\"\n                  zSize=\"sm\"\n                  class=\"size-8 p-0!\"\n                  [zDisabled]=\"!canNavigateEndPrev()\"\n                  [zWave]=\"false\"\n                  (click)=\"navigateEndPrevious()\">\n                  <z-icon zType=\"lucideChevronLeft\" zSize=\"16\" />\n                </button>\n\n                <div class=\"flex flex-1 items-center justify-center gap-0.5\">\n                  <button\n                    type=\"button\"\n                    z-button\n                    zType=\"ghost\"\n                    zSize=\"sm\"\n                    class=\"w-20 px-2!\"\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=\"px-2!\"\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-8 p-0!\"\n                  [zWave]=\"false\"\n                  [zWave]=\"false\"\n                  (click)=\"navigateEndNext()\">\n                  <z-icon zType=\"lucideChevronRight\" zSize=\"16\" />\n                </button>\n\n                <button\n                  type=\"button\"\n                  z-button\n                  zType=\"ghost\"\n                  zSize=\"sm\"\n                  class=\"size-8 p-0!\"\n                  [zWave]=\"false\"\n                  [zWave]=\"false\"\n                  (click)=\"navigateEndNextFast()\">\n                  <z-icon zType=\"lucideChevronsRight\" zSize=\"16\" />\n                </button>\n              </div>\n\n              <div class=\"z-calendar-views w-full\">\n                @if (endView() === 'day') {\n                  <div class=\"flex h-full w-full flex-col gap-1\" [class.z-calendar-animate]=\"hasEndViewChanged()\">\n                    <div class=\"grid grid-cols-7 gap-px\">\n                      @for (weekday of weekdayNames; track weekday) {\n                        <div class=\"text-muted-foreground flex h-8 w-8 items-center justify-center text-xs font-medium\">\n                          {{ weekday }}\n                        </div>\n                      }\n                    </div>\n\n                    @for (week of calendarDaysEnd(); track $index) {\n                      <div class=\"grid grid-cols-7 gap-px\">\n                        @for (day of week; track day.date.getTime()) {\n                          <button\n                            type=\"button\"\n                            [class]=\"day | zDayClasses\"\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\n                @if (endView() === 'month') {\n                  <div\n                    class=\"grid h-full w-full grid-cols-3 grid-rows-4\"\n                    [class.z-calendar-animate]=\"hasEndViewChanged()\">\n                    @for (month of monthNames; track month; let i = $index) {\n                      @let endMonthDisabled = isEndMonthDisabled(i);\n                      <div class=\"flex items-center justify-center\">\n                        <button\n                          type=\"button\"\n                          [class]=\"i | zMonthClasses: endMonth().getMonth()\"\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-0.5\"\n                    [class.z-calendar-animate]=\"hasEndViewChanged()\">\n                    @for (year of endYearRange(); track year) {\n                      @let endYearDisabled = isEndYearDisabled(year);\n                      <div class=\"flex items-center justify-center\">\n                        <button\n                          type=\"button\"\n                          [class]=\"year | zYearClasses: endMonth().getFullYear()\"\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\n          <!-- Range Mode Time Picker Side Panel -->\n          @if (isRangeMode() && zShowTime() && currentView() === 'day' && endView() === 'day') {\n            <div\n              class=\"border-border mt-3 flex w-full flex-row justify-center gap-3 border-t pt-3 sm:mt-0 sm:w-auto sm:border-t-0 sm:border-l sm:pt-0 sm:pl-3\">\n              <!-- Start Time -->\n              <div class=\"flex flex-col\">\n                <div class=\"text-muted-foreground mb-2 text-center text-xs font-medium\">\n                  {{ 'i18n_z_ui_calendar_start' | translate }}\n                </div>\n                <div class=\"flex flex-col gap-2\">\n                  <div class=\"flex justify-center gap-1\">\n                    @if (zShowHour()) {\n                      <ng-scrollbar\n                        class=\"z-time-column border-border h-[120px] w-10 rounded border sm:h-[235px]\"\n                        track=\"vertical\">\n                        <div class=\"flex flex-col\">\n                          @for (hour of hourOptions(); track hour) {\n                            <button\n                              type=\"button\"\n                              class=\"hover:bg-muted flex h-7 shrink-0 cursor-pointer items-center justify-center text-xs transition-colors\"\n                              [class.bg-primary]=\"isHourSelected(hour)\"\n                              [class.text-primary-foreground]=\"isHourSelected(hour)\"\n                              [class.font-medium]=\"isHourSelected(hour)\"\n                              (click)=\"selectHour(hour)\">\n                              {{ hour | number: '2.0-0' }}\n                            </button>\n                          }\n                        </div>\n                      </ng-scrollbar>\n                    }\n                    @if (zShowMinute()) {\n                      <ng-scrollbar\n                        class=\"z-time-column border-border h-[120px] w-10 rounded border sm:h-[235px]\"\n                        track=\"vertical\">\n                        <div class=\"flex flex-col\">\n                          @for (minute of minuteOptions; track minute) {\n                            <button\n                              type=\"button\"\n                              class=\"hover:bg-muted flex h-7 shrink-0 cursor-pointer items-center justify-center text-xs transition-colors\"\n                              [class.bg-primary]=\"isMinuteSelected(minute)\"\n                              [class.text-primary-foreground]=\"isMinuteSelected(minute)\"\n                              [class.font-medium]=\"isMinuteSelected(minute)\"\n                              (click)=\"selectMinute(minute)\">\n                              {{ minute | number: '2.0-0' }}\n                            </button>\n                          }\n                        </div>\n                      </ng-scrollbar>\n                    }\n                    @if (zShowSecond()) {\n                      <ng-scrollbar\n                        class=\"z-time-column border-border h-[120px] w-10 rounded border sm:h-[235px]\"\n                        track=\"vertical\">\n                        <div class=\"flex flex-col\">\n                          @for (second of secondOptions; track second) {\n                            <button\n                              type=\"button\"\n                              class=\"hover:bg-muted flex h-7 shrink-0 cursor-pointer items-center justify-center text-xs transition-colors\"\n                              [class.bg-primary]=\"isSecondSelected(second)\"\n                              [class.text-primary-foreground]=\"isSecondSelected(second)\"\n                              [class.font-medium]=\"isSecondSelected(second)\"\n                              (click)=\"selectSecond(second)\">\n                              {{ second | number: '2.0-0' }}\n                            </button>\n                          }\n                        </div>\n                      </ng-scrollbar>\n                    }\n                  </div>\n                  @if (zTimeFormat() === '12h') {\n                    <div class=\"flex gap-1\">\n                      <button\n                        type=\"button\"\n                        class=\"hover:bg-muted flex h-6 flex-1 cursor-pointer items-center justify-center rounded text-xs font-medium transition-colors\"\n                        [class.bg-primary]=\"period() === 'AM'\"\n                        [class.text-primary-foreground]=\"period() === 'AM'\"\n                        (click)=\"selectPeriod('AM')\">\n                        AM\n                      </button>\n                      <button\n                        type=\"button\"\n                        class=\"hover:bg-muted flex h-6 flex-1 cursor-pointer items-center justify-center rounded text-xs font-medium transition-colors\"\n                        [class.bg-primary]=\"period() === 'PM'\"\n                        [class.text-primary-foreground]=\"period() === 'PM'\"\n                        (click)=\"selectPeriod('PM')\">\n                        PM\n                      </button>\n                    </div>\n                  }\n                </div>\n              </div>\n\n              <!-- End Time -->\n              <div class=\"flex flex-col\">\n                <div class=\"text-muted-foreground mb-2 text-center text-xs font-medium\">\n                  {{ 'i18n_z_ui_calendar_end' | translate }}\n                </div>\n                <div class=\"flex flex-col gap-2\">\n                  <div class=\"flex justify-center gap-1\">\n                    @if (zShowHour()) {\n                      <ng-scrollbar\n                        class=\"z-time-column border-border h-[120px] w-10 rounded border sm:h-[235px]\"\n                        track=\"vertical\">\n                        <div class=\"flex flex-col\">\n                          @for (hour of hourOptions(); track hour) {\n                            @let hourDisabled = isEndHourDisabled(hour);\n                            <button\n                              type=\"button\"\n                              class=\"flex h-7 shrink-0 items-center justify-center text-xs transition-colors\"\n                              [class.hover:bg-muted]=\"!hourDisabled\"\n                              [class.cursor-pointer]=\"!hourDisabled\"\n                              [class.bg-primary]=\"isHourEndSelected(hour)\"\n                              [class.text-primary-foreground]=\"isHourEndSelected(hour)\"\n                              [class.font-medium]=\"isHourEndSelected(hour)\"\n                              [class.opacity-30]=\"hourDisabled\"\n                              [class.cursor-not-allowed]=\"hourDisabled\"\n                              [disabled]=\"hourDisabled\"\n                              (click)=\"selectHourEnd(hour)\">\n                              {{ hour | number: '2.0-0' }}\n                            </button>\n                          }\n                        </div>\n                      </ng-scrollbar>\n                    }\n                    @if (zShowMinute()) {\n                      <ng-scrollbar\n                        class=\"z-time-column border-border h-[120px] w-10 rounded border sm:h-[235px]\"\n                        track=\"vertical\">\n                        <div class=\"flex flex-col\">\n                          @for (minute of minuteOptions; track minute) {\n                            @let minuteDisabled = isEndMinuteDisabled(minute);\n                            <button\n                              type=\"button\"\n                              class=\"flex h-7 shrink-0 items-center justify-center text-xs transition-colors\"\n                              [class.hover:bg-muted]=\"!minuteDisabled\"\n                              [class.cursor-pointer]=\"!minuteDisabled\"\n                              [class.bg-primary]=\"isMinuteEndSelected(minute)\"\n                              [class.text-primary-foreground]=\"isMinuteEndSelected(minute)\"\n                              [class.font-medium]=\"isMinuteEndSelected(minute)\"\n                              [class.opacity-30]=\"minuteDisabled\"\n                              [class.cursor-not-allowed]=\"minuteDisabled\"\n                              [disabled]=\"minuteDisabled\"\n                              (click)=\"selectMinuteEnd(minute)\">\n                              {{ minute | number: '2.0-0' }}\n                            </button>\n                          }\n                        </div>\n                      </ng-scrollbar>\n                    }\n                    @if (zShowSecond()) {\n                      <ng-scrollbar\n                        class=\"z-time-column border-border h-[120px] w-10 rounded border sm:h-[235px]\"\n                        track=\"vertical\">\n                        <div class=\"flex flex-col\">\n                          @for (second of secondOptions; track second) {\n                            @let secondDisabled = isEndSecondDisabled(second);\n                            <button\n                              type=\"button\"\n                              class=\"flex h-7 shrink-0 items-center justify-center text-xs transition-colors\"\n                              [class.hover:bg-muted]=\"!secondDisabled\"\n                              [class.cursor-pointer]=\"!secondDisabled\"\n                              [class.bg-primary]=\"isSecondEndSelected(second)\"\n                              [class.text-primary-foreground]=\"isSecondEndSelected(second)\"\n                              [class.font-medium]=\"isSecondEndSelected(second)\"\n                              [class.opacity-30]=\"secondDisabled\"\n                              [class.cursor-not-allowed]=\"secondDisabled\"\n                              [disabled]=\"secondDisabled\"\n                              (click)=\"selectSecondEnd(second)\">\n                              {{ second | number: '2.0-0' }}\n                            </button>\n                          }\n                        </div>\n                      </ng-scrollbar>\n                    }\n                  </div>\n                  @if (zTimeFormat() === '12h') {\n                    <div class=\"flex gap-1\">\n                      @let amDisabled = isEndPeriodDisabled('AM');\n                      <button\n                        type=\"button\"\n                        class=\"flex h-6 flex-1 items-center justify-center rounded text-xs font-medium transition-colors\"\n                        [class.hover:bg-muted]=\"!amDisabled\"\n                        [class.cursor-pointer]=\"!amDisabled\"\n                        [class.bg-primary]=\"periodEnd() === 'AM'\"\n                        [class.text-primary-foreground]=\"periodEnd() === 'AM'\"\n                        [class.opacity-30]=\"amDisabled\"\n                        [class.cursor-not-allowed]=\"amDisabled\"\n                        [disabled]=\"amDisabled\"\n                        (click)=\"selectPeriodEnd('AM')\">\n                        AM\n                      </button>\n                      @let pmDisabled = isEndPeriodDisabled('PM');\n                      <button\n                        type=\"button\"\n                        class=\"flex h-6 flex-1 items-center justify-center rounded text-xs font-medium transition-colors\"\n                        [class.hover:bg-muted]=\"!pmDisabled\"\n                        [class.cursor-pointer]=\"!pmDisabled\"\n                        [class.bg-primary]=\"periodEnd() === 'PM'\"\n                        [class.text-primary-foreground]=\"periodEnd() === 'PM'\"\n                        [class.opacity-30]=\"pmDisabled\"\n                        [class.cursor-not-allowed]=\"pmDisabled\"\n                        [disabled]=\"pmDisabled\"\n                        (click)=\"selectPeriodEnd('PM')\">\n                        PM\n                      </button>\n                    </div>\n                  }\n                </div>\n              </div>\n            </div>\n          }\n        </div>\n      } @else {\n        <div class=\"flex flex-col items-center gap-2 py-2\">\n          <div class=\"flex justify-center gap-1\">\n            @if (zShowHour()) {\n              <ng-scrollbar class=\"z-time-column border-border h-[196px] w-14 rounded border\" track=\"vertical\">\n                <div class=\"flex flex-col\">\n                  @for (hour of hourOptions(); track hour) {\n                    <button\n                      type=\"button\"\n                      class=\"hover:bg-muted flex h-7 shrink-0 cursor-pointer items-center justify-center text-sm transition-colors\"\n                      [class.bg-primary]=\"isHourSelected(hour)\"\n                      [class.text-primary-foreground]=\"isHourSelected(hour)\"\n                      [class.font-medium]=\"isHourSelected(hour)\"\n                      (click)=\"selectHour(hour)\">\n                      {{ hour | number: '2.0-0' }}\n                    </button>\n                  }\n                </div>\n              </ng-scrollbar>\n            }\n            @if (zShowMinute()) {\n              <ng-scrollbar class=\"z-time-column border-border h-[196px] w-14 rounded border\" track=\"vertical\">\n                <div class=\"flex flex-col\">\n                  @for (minute of minuteOptions; track minute) {\n                    <button\n                      type=\"button\"\n                      class=\"hover:bg-muted flex h-7 shrink-0 cursor-pointer items-center justify-center text-sm transition-colors\"\n                      [class.bg-primary]=\"isMinuteSelected(minute)\"\n                      [class.text-primary-foreground]=\"isMinuteSelected(minute)\"\n                      [class.font-medium]=\"isMinuteSelected(minute)\"\n                      (click)=\"selectMinute(minute)\">\n                      {{ minute | number: '2.0-0' }}\n                    </button>\n                  }\n                </div>\n              </ng-scrollbar>\n            }\n            @if (zShowSecond()) {\n              <ng-scrollbar class=\"z-time-column border-border h-[196px] w-14 rounded border\" track=\"vertical\">\n                <div class=\"flex flex-col\">\n                  @for (second of secondOptions; track second) {\n                    <button\n                      type=\"button\"\n                      class=\"hover:bg-muted flex h-7 shrink-0 cursor-pointer items-center justify-center text-sm transition-colors\"\n                      [class.bg-primary]=\"isSecondSelected(second)\"\n                      [class.text-primary-foreground]=\"isSecondSelected(second)\"\n                      [class.font-medium]=\"isSecondSelected(second)\"\n                      (click)=\"selectSecond(second)\">\n                      {{ second | number: '2.0-0' }}\n                    </button>\n                  }\n                </div>\n              </ng-scrollbar>\n            }\n          </div>\n          @if (zTimeFormat() === '12h') {\n            <div class=\"flex w-full gap-1\">\n              <button\n                type=\"button\"\n                class=\"hover:bg-muted flex h-7 flex-1 cursor-pointer items-center justify-center rounded text-sm font-medium transition-colors\"\n                [class.bg-primary]=\"period() === 'AM'\"\n                [class.text-primary-foreground]=\"period() === 'AM'\"\n                (click)=\"selectPeriod('AM')\">\n                AM\n              </button>\n              <button\n                type=\"button\"\n                class=\"hover:bg-muted flex h-7 flex-1 cursor-pointer items-center justify-center rounded text-sm font-medium transition-colors\"\n                [class.bg-primary]=\"period() === 'PM'\"\n                [class.text-primary-foreground]=\"period() === 'PM'\"\n                (click)=\"selectPeriod('PM')\">\n                PM\n              </button>\n            </div>\n          }\n        </div>\n      }\n\n      @if (!(zQuickSelect() && zMode() === 'range' && !showOkButton() && !showCancelButton())) {\n        <div class=\"border-border flex items-center justify-between gap-2 border-t 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", styles: [".z-calendar-calendar .z-calendar-section{width:280px;flex-shrink:0}.z-calendar-calendar .z-calendar-views{height:225px;width:100%;display:flex;align-items:center;justify-content:center;flex-direction:column}.z-calendar-calendar .z-calendar-views.z-calendar-views-quarter{height:auto}.z-calendar-calendar .z-calendar-animate{animation:z-calendar-view-enter .2s ease-out}.z-time-picker{display:flex;flex-direction:column;gap:.5rem;flex-shrink:0}.z-time-picker .z-time-columns{display:flex;gap:.25rem}.z-time-picker .z-time-column{width:42px;height:180px;overflow-y:auto;scroll-snap-type:y mandatory;scroll-behavior:smooth;scrollbar-width:thin}.z-time-picker .z-time-column::-webkit-scrollbar{width:4px}.z-time-picker .z-time-column::-webkit-scrollbar-track{background:transparent}.z-time-picker .z-time-column::-webkit-scrollbar-thumb{background-color:hsl(var(--border));border-radius:2px}.z-time-picker .z-time-item{height:32px;width:100%;display:flex;align-items:center;justify-content:center;font-size:.875rem;scroll-snap-align:center;border-radius:4px;cursor:pointer;transition:background-color .15s ease,color .15s ease}.z-time-picker .z-time-item:hover:not(.z-time-item-selected){background-color:hsl(var(--muted))}.z-time-picker .z-time-item.z-time-item-selected{background-color:hsl(var(--primary));color:hsl(var(--primary-foreground));font-weight:500}.z-time-picker .z-time-item:focus-visible{outline:2px solid hsl(var(--ring));outline-offset:-2px}.z-time-picker .z-time-period-buttons{display:flex;flex-direction:column;gap:.25rem;padding-top:8px}.z-time-picker .z-time-period-buttons button{height:28px;font-size:.75rem;border-radius:4px;transition:background-color .15s ease,color .15s ease}@keyframes z-calendar-view-enter{0%{opacity:0;transform:scale(.95) translateY(4px)}to{opacity:1;transform:scale(1) translateY(0)}}\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: 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 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 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 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-[90vh] max-w-[95vw] flex-col overflow-auto rounded-[6px] border shadow-lg 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 }}\n          </button>\n        }\n      </div>\n    }\n    <div\n      class=\"flex flex-1 flex-col items-center overflow-auto p-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                  [zWave]=\"false\"\n                  (click)=\"navigatePrevious()\">\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                  [zWave]=\"false\"\n                  (click)=\"navigatePreviousFast()\">\n                  <z-icon zType=\"lucideChevronLeft\" zSize=\"14\" />\n                </button>\n\n                <div class=\"flex flex-1 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)=\"navigateNextFast()\">\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)=\"navigateNext()\">\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]=\"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]=\"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]=\"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]=\"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:mx-2 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 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 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 flex-1 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 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 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]=\"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]=\"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]=\"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 sm:gap-3\">\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:mx-2 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 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)}}\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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZCalendarComponent, decorators: [{
             type: Component,
@@ -2857,6 +2933,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                         ZQuarterClassesPipe,
                         ZYearClassesPipe,
                         ZIsPresetDisabledPipe,
+                        ZIsTimeSelectedPipe,
+                        ZIsEndHourDisabledPipe,
+                        ZIsEndMinuteDisabledPipe,
+                        ZIsEndSecondDisabledPipe,
+                        ZIsStartMonthDisabledPipe,
+                        ZIsEndMonthDisabledPipe,
+                        ZIsStartYearDisabledPipe,
+                        ZIsEndYearDisabledPipe,
                         TranslatePipe,
                     ], standalone: true, providers: [
                         {
@@ -2865,7 +2949,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                             multi: true,
                         },
                         TranslatePipe,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, exportAs: 'zCalendar', 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 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 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 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-[90vh] max-w-[95vw] flex-col overflow-auto rounded-[6px] border shadow-lg 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 }}\n          </button>\n        }\n      </div>\n    }\n    <div class=\"flex flex-1 flex-col gap-2 overflow-auto p-3 sm:overflow-visible\">\n      @if (!isTimeMode()) {\n        <div class=\"z-calendars-wrapper flex flex-col items-start gap-3 sm:flex-row sm:gap-0\">\n          <!-- First Calendar -->\n          <div class=\"z-calendar-section flex flex-col gap-1\">\n            @if (!isTimeMode()) {\n              <div class=\"flex w-full items-center justify-between space-x-1\">\n                <button\n                  type=\"button\"\n                  z-button\n                  zType=\"ghost\"\n                  zSize=\"sm\"\n                  class=\"size-8 p-0!\"\n                  [zWave]=\"false\"\n                  [zWave]=\"false\"\n                  (click)=\"navigatePrevious()\">\n                  <z-icon zType=\"lucideChevronsLeft\" zSize=\"16\" />\n                </button>\n\n                <button\n                  type=\"button\"\n                  z-button\n                  zType=\"ghost\"\n                  zSize=\"sm\"\n                  class=\"size-8 p-0!\"\n                  [zWave]=\"false\"\n                  [zWave]=\"false\"\n                  (click)=\"navigatePreviousFast()\">\n                  <z-icon zType=\"lucideChevronLeft\" zSize=\"16\" />\n                </button>\n\n                <div class=\"flex flex-1 items-center justify-center gap-0.5\">\n                  @if (!isYearMode() && !isQuarterMode()) {\n                    <button\n                      type=\"button\"\n                      z-button\n                      zType=\"ghost\"\n                      zSize=\"sm\"\n                      class=\"w-20 px-2!\"\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=\"px-2!\"\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-8 p-0!\"\n                  [zDisabled]=\"!canNavigateStartNext()\"\n                  [zWave]=\"false\"\n                  (click)=\"navigateNextFast()\">\n                  <z-icon zType=\"lucideChevronRight\" zSize=\"16\" />\n                </button>\n\n                <button\n                  type=\"button\"\n                  z-button\n                  zType=\"ghost\"\n                  zSize=\"sm\"\n                  class=\"size-8 p-0!\"\n                  [zDisabled]=\"!canNavigateStartNext()\"\n                  [zWave]=\"false\"\n                  (click)=\"navigateNext()\">\n                  <z-icon zType=\"lucideChevronsRight\" zSize=\"16\" />\n                </button>\n              </div>\n\n              <div class=\"z-calendar-views w-full\" [class.z-calendar-views-quarter]=\"isQuarterMode()\">\n                @if (currentView() === 'day') {\n                  <div class=\"flex h-full w-full flex-col gap-1\" [class.z-calendar-animate]=\"hasViewChanged()\">\n                    <div class=\"grid w-full grid-cols-7\">\n                      @for (weekday of weekdayNames; track weekday) {\n                        <div class=\"text-muted-foreground flex h-7 items-center justify-center text-xs font-medium\">\n                          {{ weekday }}\n                        </div>\n                      }\n                    </div>\n\n                    @for (week of calendarDays(); track $index) {\n                      <div class=\"grid w-full grid-cols-7\">\n                        @for (day of week; track day.date.getTime()) {\n                          <button\n                            type=\"button\"\n                            [class]=\"day | zDayClasses\"\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\n                @if (currentView() === 'month') {\n                  <div class=\"grid h-full w-full grid-cols-3 grid-rows-4\" [class.z-calendar-animate]=\"hasViewChanged()\">\n                    @for (month of monthNames; track month; let i = $index) {\n                      @let monthDisabled = isStartMonthDisabled(i);\n                      <div class=\"flex items-center justify-center\">\n                        <button\n                          type=\"button\"\n                          [class]=\"i | zMonthClasses: currentMonthIndex()\"\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 gap-0.5\"\n                    [class.grid-rows-4]=\"!isYearMode() && !isQuarterMode()\"\n                    [class.grid-rows-3]=\"isYearMode() || isQuarterMode()\"\n                    [class.z-calendar-animate]=\"hasViewChanged()\">\n                    @for (year of isYearMode() || isQuarterMode() ? yearRangeSmall() : yearRange(); track year) {\n                      @let yearDisabled = isStartYearDisabled(year);\n                      <div class=\"flex items-center justify-center\">\n                        <button\n                          type=\"button\"\n                          [class]=\"year | zYearClasses: currentYear()\"\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 class=\"grid w-full grid-cols-2 gap-2\" [class.z-calendar-animate]=\"hasViewChanged()\">\n                    @for (quarter of quarterNames; track quarter; let i = $index) {\n                      <div class=\"flex items-center justify-center\">\n                        <button\n                          type=\"button\"\n                          [class]=\"i | zQuarterClasses: currentQuarterIndex()\"\n                          (click)=\"onQuarterClick(i)\">\n                          {{ quarter }}\n                        </button>\n                      </div>\n                    }\n                  </div>\n                }\n              </div>\n            }\n          </div>\n\n          <!-- Time Picker Side Panel (for single date with showTime) -->\n          @if (!isRangeMode() && zShowTime() && currentView() === 'day') {\n            <div\n              class=\"border-border mt-3 flex w-full flex-col items-center border-t pt-3 sm:mt-0 sm:w-auto sm:border-t-0 sm:border-l sm:pt-0 sm:pl-3\">\n              <div class=\"text-muted-foreground mb-2 text-center text-xs font-medium\">\n                {{ 'i18n_z_ui_calendar_time' | translate }}\n              </div>\n              <div class=\"flex flex-col items-center gap-2\">\n                <div class=\"flex justify-center gap-1\">\n                  @if (zShowHour()) {\n                    <ng-scrollbar\n                      class=\"z-time-column border-border h-[140px] w-12 rounded border sm:h-[235px]\"\n                      track=\"vertical\">\n                      <div class=\"flex flex-col\">\n                        @for (hour of hourOptions(); track hour) {\n                          <button\n                            type=\"button\"\n                            class=\"hover:bg-muted flex h-7 shrink-0 cursor-pointer items-center justify-center text-sm transition-colors\"\n                            [class.bg-primary]=\"isHourSelected(hour)\"\n                            [class.text-primary-foreground]=\"isHourSelected(hour)\"\n                            [class.font-medium]=\"isHourSelected(hour)\"\n                            (click)=\"selectHour(hour)\">\n                            {{ hour | number: '2.0-0' }}\n                          </button>\n                        }\n                      </div>\n                    </ng-scrollbar>\n                  }\n                  @if (zShowMinute()) {\n                    <ng-scrollbar\n                      class=\"z-time-column border-border h-[140px] w-12 rounded border sm:h-[235px]\"\n                      track=\"vertical\">\n                      <div class=\"flex flex-col\">\n                        @for (minute of minuteOptions; track minute) {\n                          <button\n                            type=\"button\"\n                            class=\"hover:bg-muted flex h-7 shrink-0 cursor-pointer items-center justify-center text-sm transition-colors\"\n                            [class.bg-primary]=\"isMinuteSelected(minute)\"\n                            [class.text-primary-foreground]=\"isMinuteSelected(minute)\"\n                            [class.font-medium]=\"isMinuteSelected(minute)\"\n                            (click)=\"selectMinute(minute)\">\n                            {{ minute | number: '2.0-0' }}\n                          </button>\n                        }\n                      </div>\n                    </ng-scrollbar>\n                  }\n                  @if (zShowSecond()) {\n                    <ng-scrollbar\n                      class=\"z-time-column border-border h-[140px] w-12 rounded border sm:h-[235px]\"\n                      track=\"vertical\">\n                      <div class=\"flex flex-col\">\n                        @for (second of secondOptions; track second) {\n                          <button\n                            type=\"button\"\n                            class=\"hover:bg-muted flex h-7 shrink-0 cursor-pointer items-center justify-center text-sm transition-colors\"\n                            [class.bg-primary]=\"isSecondSelected(second)\"\n                            [class.text-primary-foreground]=\"isSecondSelected(second)\"\n                            [class.font-medium]=\"isSecondSelected(second)\"\n                            (click)=\"selectSecond(second)\">\n                            {{ second | number: '2.0-0' }}\n                          </button>\n                        }\n                      </div>\n                    </ng-scrollbar>\n                  }\n                </div>\n                @if (zTimeFormat() === '12h') {\n                  <div class=\"flex w-full gap-1\">\n                    <button\n                      type=\"button\"\n                      class=\"hover:bg-muted flex h-7 flex-1 cursor-pointer items-center justify-center rounded text-sm font-medium transition-colors\"\n                      [class.bg-primary]=\"period() === 'AM'\"\n                      [class.text-primary-foreground]=\"period() === 'AM'\"\n                      (click)=\"selectPeriod('AM')\">\n                      AM\n                    </button>\n                    <button\n                      type=\"button\"\n                      class=\"hover:bg-muted flex h-7 flex-1 cursor-pointer items-center justify-center rounded text-sm font-medium transition-colors\"\n                      [class.bg-primary]=\"period() === 'PM'\"\n                      [class.text-primary-foreground]=\"period() === 'PM'\"\n                      (click)=\"selectPeriod('PM')\">\n                      PM\n                    </button>\n                  </div>\n                }\n              </div>\n            </div>\n          }\n\n          <!-- Second Calendar (Range Mode Only) -->\n          @if (isRangeMode()) {\n            <!-- Divider -->\n            <div class=\"border-border bg-border hidden self-stretch sm:mx-3 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 flex-col gap-1\">\n              <div class=\"flex w-full items-center justify-between space-x-1\">\n                <button\n                  type=\"button\"\n                  z-button\n                  zType=\"ghost\"\n                  zSize=\"sm\"\n                  class=\"size-8 p-0!\"\n                  [zDisabled]=\"!canNavigateEndPrev()\"\n                  [zWave]=\"false\"\n                  (click)=\"navigateEndPreviousFast()\">\n                  <z-icon zType=\"lucideChevronsLeft\" zSize=\"16\" />\n                </button>\n\n                <button\n                  type=\"button\"\n                  z-button\n                  zType=\"ghost\"\n                  zSize=\"sm\"\n                  class=\"size-8 p-0!\"\n                  [zDisabled]=\"!canNavigateEndPrev()\"\n                  [zWave]=\"false\"\n                  (click)=\"navigateEndPrevious()\">\n                  <z-icon zType=\"lucideChevronLeft\" zSize=\"16\" />\n                </button>\n\n                <div class=\"flex flex-1 items-center justify-center gap-0.5\">\n                  <button\n                    type=\"button\"\n                    z-button\n                    zType=\"ghost\"\n                    zSize=\"sm\"\n                    class=\"w-20 px-2!\"\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=\"px-2!\"\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-8 p-0!\"\n                  [zWave]=\"false\"\n                  [zWave]=\"false\"\n                  (click)=\"navigateEndNext()\">\n                  <z-icon zType=\"lucideChevronRight\" zSize=\"16\" />\n                </button>\n\n                <button\n                  type=\"button\"\n                  z-button\n                  zType=\"ghost\"\n                  zSize=\"sm\"\n                  class=\"size-8 p-0!\"\n                  [zWave]=\"false\"\n                  [zWave]=\"false\"\n                  (click)=\"navigateEndNextFast()\">\n                  <z-icon zType=\"lucideChevronsRight\" zSize=\"16\" />\n                </button>\n              </div>\n\n              <div class=\"z-calendar-views w-full\">\n                @if (endView() === 'day') {\n                  <div class=\"flex h-full w-full flex-col gap-1\" [class.z-calendar-animate]=\"hasEndViewChanged()\">\n                    <div class=\"grid grid-cols-7 gap-px\">\n                      @for (weekday of weekdayNames; track weekday) {\n                        <div class=\"text-muted-foreground flex h-8 w-8 items-center justify-center text-xs font-medium\">\n                          {{ weekday }}\n                        </div>\n                      }\n                    </div>\n\n                    @for (week of calendarDaysEnd(); track $index) {\n                      <div class=\"grid grid-cols-7 gap-px\">\n                        @for (day of week; track day.date.getTime()) {\n                          <button\n                            type=\"button\"\n                            [class]=\"day | zDayClasses\"\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\n                @if (endView() === 'month') {\n                  <div\n                    class=\"grid h-full w-full grid-cols-3 grid-rows-4\"\n                    [class.z-calendar-animate]=\"hasEndViewChanged()\">\n                    @for (month of monthNames; track month; let i = $index) {\n                      @let endMonthDisabled = isEndMonthDisabled(i);\n                      <div class=\"flex items-center justify-center\">\n                        <button\n                          type=\"button\"\n                          [class]=\"i | zMonthClasses: endMonth().getMonth()\"\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-0.5\"\n                    [class.z-calendar-animate]=\"hasEndViewChanged()\">\n                    @for (year of endYearRange(); track year) {\n                      @let endYearDisabled = isEndYearDisabled(year);\n                      <div class=\"flex items-center justify-center\">\n                        <button\n                          type=\"button\"\n                          [class]=\"year | zYearClasses: endMonth().getFullYear()\"\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\n          <!-- Range Mode Time Picker Side Panel -->\n          @if (isRangeMode() && zShowTime() && currentView() === 'day' && endView() === 'day') {\n            <div\n              class=\"border-border mt-3 flex w-full flex-row justify-center gap-3 border-t pt-3 sm:mt-0 sm:w-auto sm:border-t-0 sm:border-l sm:pt-0 sm:pl-3\">\n              <!-- Start Time -->\n              <div class=\"flex flex-col\">\n                <div class=\"text-muted-foreground mb-2 text-center text-xs font-medium\">\n                  {{ 'i18n_z_ui_calendar_start' | translate }}\n                </div>\n                <div class=\"flex flex-col gap-2\">\n                  <div class=\"flex justify-center gap-1\">\n                    @if (zShowHour()) {\n                      <ng-scrollbar\n                        class=\"z-time-column border-border h-[120px] w-10 rounded border sm:h-[235px]\"\n                        track=\"vertical\">\n                        <div class=\"flex flex-col\">\n                          @for (hour of hourOptions(); track hour) {\n                            <button\n                              type=\"button\"\n                              class=\"hover:bg-muted flex h-7 shrink-0 cursor-pointer items-center justify-center text-xs transition-colors\"\n                              [class.bg-primary]=\"isHourSelected(hour)\"\n                              [class.text-primary-foreground]=\"isHourSelected(hour)\"\n                              [class.font-medium]=\"isHourSelected(hour)\"\n                              (click)=\"selectHour(hour)\">\n                              {{ hour | number: '2.0-0' }}\n                            </button>\n                          }\n                        </div>\n                      </ng-scrollbar>\n                    }\n                    @if (zShowMinute()) {\n                      <ng-scrollbar\n                        class=\"z-time-column border-border h-[120px] w-10 rounded border sm:h-[235px]\"\n                        track=\"vertical\">\n                        <div class=\"flex flex-col\">\n                          @for (minute of minuteOptions; track minute) {\n                            <button\n                              type=\"button\"\n                              class=\"hover:bg-muted flex h-7 shrink-0 cursor-pointer items-center justify-center text-xs transition-colors\"\n                              [class.bg-primary]=\"isMinuteSelected(minute)\"\n                              [class.text-primary-foreground]=\"isMinuteSelected(minute)\"\n                              [class.font-medium]=\"isMinuteSelected(minute)\"\n                              (click)=\"selectMinute(minute)\">\n                              {{ minute | number: '2.0-0' }}\n                            </button>\n                          }\n                        </div>\n                      </ng-scrollbar>\n                    }\n                    @if (zShowSecond()) {\n                      <ng-scrollbar\n                        class=\"z-time-column border-border h-[120px] w-10 rounded border sm:h-[235px]\"\n                        track=\"vertical\">\n                        <div class=\"flex flex-col\">\n                          @for (second of secondOptions; track second) {\n                            <button\n                              type=\"button\"\n                              class=\"hover:bg-muted flex h-7 shrink-0 cursor-pointer items-center justify-center text-xs transition-colors\"\n                              [class.bg-primary]=\"isSecondSelected(second)\"\n                              [class.text-primary-foreground]=\"isSecondSelected(second)\"\n                              [class.font-medium]=\"isSecondSelected(second)\"\n                              (click)=\"selectSecond(second)\">\n                              {{ second | number: '2.0-0' }}\n                            </button>\n                          }\n                        </div>\n                      </ng-scrollbar>\n                    }\n                  </div>\n                  @if (zTimeFormat() === '12h') {\n                    <div class=\"flex gap-1\">\n                      <button\n                        type=\"button\"\n                        class=\"hover:bg-muted flex h-6 flex-1 cursor-pointer items-center justify-center rounded text-xs font-medium transition-colors\"\n                        [class.bg-primary]=\"period() === 'AM'\"\n                        [class.text-primary-foreground]=\"period() === 'AM'\"\n                        (click)=\"selectPeriod('AM')\">\n                        AM\n                      </button>\n                      <button\n                        type=\"button\"\n                        class=\"hover:bg-muted flex h-6 flex-1 cursor-pointer items-center justify-center rounded text-xs font-medium transition-colors\"\n                        [class.bg-primary]=\"period() === 'PM'\"\n                        [class.text-primary-foreground]=\"period() === 'PM'\"\n                        (click)=\"selectPeriod('PM')\">\n                        PM\n                      </button>\n                    </div>\n                  }\n                </div>\n              </div>\n\n              <!-- End Time -->\n              <div class=\"flex flex-col\">\n                <div class=\"text-muted-foreground mb-2 text-center text-xs font-medium\">\n                  {{ 'i18n_z_ui_calendar_end' | translate }}\n                </div>\n                <div class=\"flex flex-col gap-2\">\n                  <div class=\"flex justify-center gap-1\">\n                    @if (zShowHour()) {\n                      <ng-scrollbar\n                        class=\"z-time-column border-border h-[120px] w-10 rounded border sm:h-[235px]\"\n                        track=\"vertical\">\n                        <div class=\"flex flex-col\">\n                          @for (hour of hourOptions(); track hour) {\n                            @let hourDisabled = isEndHourDisabled(hour);\n                            <button\n                              type=\"button\"\n                              class=\"flex h-7 shrink-0 items-center justify-center text-xs transition-colors\"\n                              [class.hover:bg-muted]=\"!hourDisabled\"\n                              [class.cursor-pointer]=\"!hourDisabled\"\n                              [class.bg-primary]=\"isHourEndSelected(hour)\"\n                              [class.text-primary-foreground]=\"isHourEndSelected(hour)\"\n                              [class.font-medium]=\"isHourEndSelected(hour)\"\n                              [class.opacity-30]=\"hourDisabled\"\n                              [class.cursor-not-allowed]=\"hourDisabled\"\n                              [disabled]=\"hourDisabled\"\n                              (click)=\"selectHourEnd(hour)\">\n                              {{ hour | number: '2.0-0' }}\n                            </button>\n                          }\n                        </div>\n                      </ng-scrollbar>\n                    }\n                    @if (zShowMinute()) {\n                      <ng-scrollbar\n                        class=\"z-time-column border-border h-[120px] w-10 rounded border sm:h-[235px]\"\n                        track=\"vertical\">\n                        <div class=\"flex flex-col\">\n                          @for (minute of minuteOptions; track minute) {\n                            @let minuteDisabled = isEndMinuteDisabled(minute);\n                            <button\n                              type=\"button\"\n                              class=\"flex h-7 shrink-0 items-center justify-center text-xs transition-colors\"\n                              [class.hover:bg-muted]=\"!minuteDisabled\"\n                              [class.cursor-pointer]=\"!minuteDisabled\"\n                              [class.bg-primary]=\"isMinuteEndSelected(minute)\"\n                              [class.text-primary-foreground]=\"isMinuteEndSelected(minute)\"\n                              [class.font-medium]=\"isMinuteEndSelected(minute)\"\n                              [class.opacity-30]=\"minuteDisabled\"\n                              [class.cursor-not-allowed]=\"minuteDisabled\"\n                              [disabled]=\"minuteDisabled\"\n                              (click)=\"selectMinuteEnd(minute)\">\n                              {{ minute | number: '2.0-0' }}\n                            </button>\n                          }\n                        </div>\n                      </ng-scrollbar>\n                    }\n                    @if (zShowSecond()) {\n                      <ng-scrollbar\n                        class=\"z-time-column border-border h-[120px] w-10 rounded border sm:h-[235px]\"\n                        track=\"vertical\">\n                        <div class=\"flex flex-col\">\n                          @for (second of secondOptions; track second) {\n                            @let secondDisabled = isEndSecondDisabled(second);\n                            <button\n                              type=\"button\"\n                              class=\"flex h-7 shrink-0 items-center justify-center text-xs transition-colors\"\n                              [class.hover:bg-muted]=\"!secondDisabled\"\n                              [class.cursor-pointer]=\"!secondDisabled\"\n                              [class.bg-primary]=\"isSecondEndSelected(second)\"\n                              [class.text-primary-foreground]=\"isSecondEndSelected(second)\"\n                              [class.font-medium]=\"isSecondEndSelected(second)\"\n                              [class.opacity-30]=\"secondDisabled\"\n                              [class.cursor-not-allowed]=\"secondDisabled\"\n                              [disabled]=\"secondDisabled\"\n                              (click)=\"selectSecondEnd(second)\">\n                              {{ second | number: '2.0-0' }}\n                            </button>\n                          }\n                        </div>\n                      </ng-scrollbar>\n                    }\n                  </div>\n                  @if (zTimeFormat() === '12h') {\n                    <div class=\"flex gap-1\">\n                      @let amDisabled = isEndPeriodDisabled('AM');\n                      <button\n                        type=\"button\"\n                        class=\"flex h-6 flex-1 items-center justify-center rounded text-xs font-medium transition-colors\"\n                        [class.hover:bg-muted]=\"!amDisabled\"\n                        [class.cursor-pointer]=\"!amDisabled\"\n                        [class.bg-primary]=\"periodEnd() === 'AM'\"\n                        [class.text-primary-foreground]=\"periodEnd() === 'AM'\"\n                        [class.opacity-30]=\"amDisabled\"\n                        [class.cursor-not-allowed]=\"amDisabled\"\n                        [disabled]=\"amDisabled\"\n                        (click)=\"selectPeriodEnd('AM')\">\n                        AM\n                      </button>\n                      @let pmDisabled = isEndPeriodDisabled('PM');\n                      <button\n                        type=\"button\"\n                        class=\"flex h-6 flex-1 items-center justify-center rounded text-xs font-medium transition-colors\"\n                        [class.hover:bg-muted]=\"!pmDisabled\"\n                        [class.cursor-pointer]=\"!pmDisabled\"\n                        [class.bg-primary]=\"periodEnd() === 'PM'\"\n                        [class.text-primary-foreground]=\"periodEnd() === 'PM'\"\n                        [class.opacity-30]=\"pmDisabled\"\n                        [class.cursor-not-allowed]=\"pmDisabled\"\n                        [disabled]=\"pmDisabled\"\n                        (click)=\"selectPeriodEnd('PM')\">\n                        PM\n                      </button>\n                    </div>\n                  }\n                </div>\n              </div>\n            </div>\n          }\n        </div>\n      } @else {\n        <div class=\"flex flex-col items-center gap-2 py-2\">\n          <div class=\"flex justify-center gap-1\">\n            @if (zShowHour()) {\n              <ng-scrollbar class=\"z-time-column border-border h-[196px] w-14 rounded border\" track=\"vertical\">\n                <div class=\"flex flex-col\">\n                  @for (hour of hourOptions(); track hour) {\n                    <button\n                      type=\"button\"\n                      class=\"hover:bg-muted flex h-7 shrink-0 cursor-pointer items-center justify-center text-sm transition-colors\"\n                      [class.bg-primary]=\"isHourSelected(hour)\"\n                      [class.text-primary-foreground]=\"isHourSelected(hour)\"\n                      [class.font-medium]=\"isHourSelected(hour)\"\n                      (click)=\"selectHour(hour)\">\n                      {{ hour | number: '2.0-0' }}\n                    </button>\n                  }\n                </div>\n              </ng-scrollbar>\n            }\n            @if (zShowMinute()) {\n              <ng-scrollbar class=\"z-time-column border-border h-[196px] w-14 rounded border\" track=\"vertical\">\n                <div class=\"flex flex-col\">\n                  @for (minute of minuteOptions; track minute) {\n                    <button\n                      type=\"button\"\n                      class=\"hover:bg-muted flex h-7 shrink-0 cursor-pointer items-center justify-center text-sm transition-colors\"\n                      [class.bg-primary]=\"isMinuteSelected(minute)\"\n                      [class.text-primary-foreground]=\"isMinuteSelected(minute)\"\n                      [class.font-medium]=\"isMinuteSelected(minute)\"\n                      (click)=\"selectMinute(minute)\">\n                      {{ minute | number: '2.0-0' }}\n                    </button>\n                  }\n                </div>\n              </ng-scrollbar>\n            }\n            @if (zShowSecond()) {\n              <ng-scrollbar class=\"z-time-column border-border h-[196px] w-14 rounded border\" track=\"vertical\">\n                <div class=\"flex flex-col\">\n                  @for (second of secondOptions; track second) {\n                    <button\n                      type=\"button\"\n                      class=\"hover:bg-muted flex h-7 shrink-0 cursor-pointer items-center justify-center text-sm transition-colors\"\n                      [class.bg-primary]=\"isSecondSelected(second)\"\n                      [class.text-primary-foreground]=\"isSecondSelected(second)\"\n                      [class.font-medium]=\"isSecondSelected(second)\"\n                      (click)=\"selectSecond(second)\">\n                      {{ second | number: '2.0-0' }}\n                    </button>\n                  }\n                </div>\n              </ng-scrollbar>\n            }\n          </div>\n          @if (zTimeFormat() === '12h') {\n            <div class=\"flex w-full gap-1\">\n              <button\n                type=\"button\"\n                class=\"hover:bg-muted flex h-7 flex-1 cursor-pointer items-center justify-center rounded text-sm font-medium transition-colors\"\n                [class.bg-primary]=\"period() === 'AM'\"\n                [class.text-primary-foreground]=\"period() === 'AM'\"\n                (click)=\"selectPeriod('AM')\">\n                AM\n              </button>\n              <button\n                type=\"button\"\n                class=\"hover:bg-muted flex h-7 flex-1 cursor-pointer items-center justify-center rounded text-sm font-medium transition-colors\"\n                [class.bg-primary]=\"period() === 'PM'\"\n                [class.text-primary-foreground]=\"period() === 'PM'\"\n                (click)=\"selectPeriod('PM')\">\n                PM\n              </button>\n            </div>\n          }\n        </div>\n      }\n\n      @if (!(zQuickSelect() && zMode() === 'range' && !showOkButton() && !showCancelButton())) {\n        <div class=\"border-border flex items-center justify-between gap-2 border-t 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", styles: [".z-calendar-calendar .z-calendar-section{width:280px;flex-shrink:0}.z-calendar-calendar .z-calendar-views{height:225px;width:100%;display:flex;align-items:center;justify-content:center;flex-direction:column}.z-calendar-calendar .z-calendar-views.z-calendar-views-quarter{height:auto}.z-calendar-calendar .z-calendar-animate{animation:z-calendar-view-enter .2s ease-out}.z-time-picker{display:flex;flex-direction:column;gap:.5rem;flex-shrink:0}.z-time-picker .z-time-columns{display:flex;gap:.25rem}.z-time-picker .z-time-column{width:42px;height:180px;overflow-y:auto;scroll-snap-type:y mandatory;scroll-behavior:smooth;scrollbar-width:thin}.z-time-picker .z-time-column::-webkit-scrollbar{width:4px}.z-time-picker .z-time-column::-webkit-scrollbar-track{background:transparent}.z-time-picker .z-time-column::-webkit-scrollbar-thumb{background-color:hsl(var(--border));border-radius:2px}.z-time-picker .z-time-item{height:32px;width:100%;display:flex;align-items:center;justify-content:center;font-size:.875rem;scroll-snap-align:center;border-radius:4px;cursor:pointer;transition:background-color .15s ease,color .15s ease}.z-time-picker .z-time-item:hover:not(.z-time-item-selected){background-color:hsl(var(--muted))}.z-time-picker .z-time-item.z-time-item-selected{background-color:hsl(var(--primary));color:hsl(var(--primary-foreground));font-weight:500}.z-time-picker .z-time-item:focus-visible{outline:2px solid hsl(var(--ring));outline-offset:-2px}.z-time-picker .z-time-period-buttons{display:flex;flex-direction:column;gap:.25rem;padding-top:8px}.z-time-picker .z-time-period-buttons button{height:28px;font-size:.75rem;border-radius:4px;transition:background-color .15s ease,color .15s ease}@keyframes z-calendar-view-enter{0%{opacity:0;transform:scale(.95) translateY(4px)}to{opacity:1;transform:scale(1) translateY(0)}}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, exportAs: 'zCalendar', 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 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 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 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-[90vh] max-w-[95vw] flex-col overflow-auto rounded-[6px] border shadow-lg 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 }}\n          </button>\n        }\n      </div>\n    }\n    <div\n      class=\"flex flex-1 flex-col items-center overflow-auto p-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                  [zWave]=\"false\"\n                  (click)=\"navigatePrevious()\">\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                  [zWave]=\"false\"\n                  (click)=\"navigatePreviousFast()\">\n                  <z-icon zType=\"lucideChevronLeft\" zSize=\"14\" />\n                </button>\n\n                <div class=\"flex flex-1 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)=\"navigateNextFast()\">\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)=\"navigateNext()\">\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]=\"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]=\"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]=\"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]=\"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:mx-2 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 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 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 flex-1 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 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 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]=\"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]=\"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]=\"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 sm:gap-3\">\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:mx-2 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 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)}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], zMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "zMode", required: false }] }], zSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSize", required: false }] }], zLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLabel", required: false }] }], zLabelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLabelClass", required: false }] }], zPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "zPlaceholder", required: false }] }], zRequired: [{ type: i0.Input, args: [{ isSignal: true, alias: "zRequired", required: false }] }], zDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDisabled", required: false }] }], zReadonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "zReadonly", required: false }] }], zShowTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowTime", required: false }] }], zTimeFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "zTimeFormat", required: false }] }], zShowHour: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowHour", required: false }] }], zShowMinute: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowMinute", required: false }] }], zShowSecond: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowSecond", required: false }] }], zQuickSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "zQuickSelect", required: false }] }], zAllowClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAllowClear", required: false }] }], zFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "zFormat", required: false }] }], zMinDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "zMinDate", required: false }] }], zMaxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "zMaxDate", required: false }] }], zValueType: [{ type: i0.Input, args: [{ isSignal: true, alias: "zValueType", required: false }] }], zValidators: [{ type: i0.Input, args: [{ isSignal: true, alias: "zValidators", required: false }] }], zLocale: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLocale", required: false }] }], zShowOk: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowOk", required: false }] }], zOkText: [{ type: i0.Input, args: [{ isSignal: true, alias: "zOkText", required: false }] }], zShowCancel: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowCancel", required: false }] }], zCancelText: [{ type: i0.Input, args: [{ isSignal: true, alias: "zCancelText", required: false }] }], zDisabledDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDisabledDate", required: false }] }], zScrollClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "zScrollClose", required: false }] }], zControl: [{ type: i0.Output, args: ["zControl"] }], zChange: [{ type: i0.Output, args: ["zChange"] }], triggerRef: [{ type: i0.ViewChild, args: ['triggerEl', { isSignal: true }] }], inputRef: [{ type: i0.ViewChild, args: ['inputEl', { isSignal: true }] }] } });
 
 /**