@shival99/z-ui 1.3.4 → 1.3.5

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

@@ -1,3 +1,4 @@
+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 { takeUntilDestroyed } from '@angular/core/rxjs-interop';
@@ -8,6 +9,7 @@ import { ZIconComponent } from '@shival99/z-ui/components/z-icon';
 import { ZPopoverDirective } from '@shival99/z-ui/components/z-popover';
 import { ZTranslateService } from '@shival99/z-ui/services';
 import { zTransform, zUuid, zMergeClasses } from '@shival99/z-ui/utils';
+import { NgScrollbar } from 'ngx-scrollbar';
 import { merge } from 'rxjs';
 import { cva } from 'class-variance-authority';
 
@@ -633,6 +635,14 @@ class ZCalendarComponent {
     weekdayNames = getWeekdayNames('vi-VN');
     monthNames = getMonthNames('vi-VN');
     quickSelectPresets = getQuickSelectPresets();
+    hourOptions = computed(() => {
+        if (this.zTimeFormat() === '12h') {
+            return Array.from({ length: 12 }, (_, i) => i + 1);
+        }
+        return Array.from({ length: 24 }, (_, i) => i);
+    }, ...(ngDevMode ? [{ debugName: "hourOptions" }] : []));
+    minuteOptions = Array.from({ length: 60 }, (_, i) => i);
+    secondOptions = Array.from({ length: 60 }, (_, i) => i);
     formattedHour = computed(() => {
         const h = this._hour();
         if (this.zTimeFormat() === '12h') {
@@ -643,6 +653,20 @@ class ZCalendarComponent {
     }, ...(ngDevMode ? [{ debugName: "formattedHour" }] : []));
     formattedMinute = computed(() => formatTimeValue(this._minute()), ...(ngDevMode ? [{ debugName: "formattedMinute" }] : []));
     formattedSecond = computed(() => formatTimeValue(this._second()), ...(ngDevMode ? [{ debugName: "formattedSecond" }] : []));
+    displayHour = computed(() => {
+        const h = this._hour();
+        if (this.zTimeFormat() === '12h') {
+            return h % 12 || 12;
+        }
+        return h;
+    }, ...(ngDevMode ? [{ debugName: "displayHour" }] : []));
+    displayHourEnd = computed(() => {
+        const h = this._hourEnd();
+        if (this.zTimeFormat() === '12h') {
+            return h % 12 || 12;
+        }
+        return h;
+    }, ...(ngDevMode ? [{ debugName: "displayHourEnd" }] : []));
     _popoverControl = signal(null, ...(ngDevMode ? [{ debugName: "_popoverControl" }] : []));
     _selectedDate = signal(null, ...(ngDevMode ? [{ debugName: "_selectedDate" }] : []));
     _rangeStart = signal(null, ...(ngDevMode ? [{ debugName: "_rangeStart" }] : []));
@@ -697,6 +721,17 @@ class ZCalendarComponent {
         const date = this._selectedDate();
         return date ? Math.floor(date.getMonth() / 3) : -1;
     }, ...(ngDevMode ? [{ debugName: "currentQuarterIndex" }] : []));
+    isSameDayRange = computed(() => {
+        if (!this.isRangeMode()) {
+            return false;
+        }
+        const start = this._rangeStart();
+        const end = this._rangeEnd();
+        if (!start || !end) {
+            return false;
+        }
+        return isSameDay(start, end);
+    }, ...(ngDevMode ? [{ debugName: "isSameDayRange" }] : []));
     isDisabled = computed(() => this._disabled() || this.zDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
     isRangeMode = computed(() => this.zMode() === 'range', ...(ngDevMode ? [{ debugName: "isRangeMode" }] : []));
     canApply = computed(() => {
@@ -956,7 +991,7 @@ class ZCalendarComponent {
             return '';
         }
         if (this.isMonthMode()) {
-            return date.toLocaleDateString(this.zLocale(), { month: 'long', year: 'numeric' });
+            return formatDate(date, this.zFormat());
         }
         if (this.isYearMode()) {
             return date.getFullYear().toString();
@@ -972,16 +1007,16 @@ class ZCalendarComponent {
     inputDisplayStart = computed(() => this._inputDisplayStart(), ...(ngDevMode ? [{ debugName: "inputDisplayStart" }] : []));
     inputDisplayEnd = computed(() => this._inputDisplayEnd(), ...(ngDevMode ? [{ debugName: "inputDisplayEnd" }] : []));
     displayValueStart = computed(() => {
-        const format = this._getDisplayFormat();
+        const format = this._getDisplayFormatStart();
         const start = this._rangeStart();
         return start ? formatDate(start, format) : '';
     }, ...(ngDevMode ? [{ debugName: "displayValueStart" }] : []));
     displayValueEnd = computed(() => {
-        const format = this._getDisplayFormat();
+        const format = this._getDisplayFormatEnd();
         const end = this._rangeEnd();
         return end ? formatDate(end, format) : '';
     }, ...(ngDevMode ? [{ debugName: "displayValueEnd" }] : []));
-    _getDisplayFormat() {
+    _getDisplayFormatStart() {
         let format = this.zFormat();
         if (this.zShowTime() || this.isTimeMode()) {
             const timeParts = [];
@@ -1000,6 +1035,25 @@ class ZCalendarComponent {
         }
         return format;
     }
+    _getDisplayFormatEnd() {
+        let format = this.zFormat();
+        if (this.zShowTime() || this.isTimeMode()) {
+            const timeParts = [];
+            if (this.zShowHour()) {
+                timeParts.push(this.zTimeFormat() === '12h' ? 'hh' : 'HH');
+            }
+            if (this.zShowMinute()) {
+                timeParts.push('mm');
+            }
+            if (this.zShowSecond()) {
+                timeParts.push('ss');
+            }
+            const timeFormat = timeParts.join(':');
+            const periodSuffix = this.zTimeFormat() === '12h' ? ` ${this._periodEnd()}` : '';
+            format = this.isTimeMode() ? timeFormat + periodSuffix : `${this.zFormat()} ${timeFormat}${periodSuffix}`;
+        }
+        return format;
+    }
     showClearButton = computed(() => {
         if (!this.zAllowClear() || this.isDisabled() || this.zReadonly() || this.isOpen()) {
             return false;
@@ -1255,6 +1309,7 @@ class ZCalendarComponent {
             this._inputDisplayStart.set(this.displayValueStart());
             this._inputDisplayEnd.set(this.displayValueEnd());
         }
+        this._scrollToTimeOnOpen();
         if (!this.isRangeMode()) {
             this._activePresetKey.set(null);
             const selected = this._selectedDate();
@@ -1286,13 +1341,15 @@ class ZCalendarComponent {
             return;
         }
         const now = new Date();
-        const selected = this._selectedDate();
-        this._syncTimeSignals(selected ?? now);
-        if (!this.isRangeMode()) {
+        if (this.isRangeMode()) {
+            const start = this._rangeStart();
+            const end = this._rangeEnd();
+            this._syncTimeSignals(start ?? now);
+            this._syncEndTimeSignals(end ?? now);
             return;
         }
-        const end = this._rangeEnd();
-        this._syncEndTimeSignals(end ?? now);
+        const selected = this._selectedDate();
+        this._syncTimeSignals(selected ?? now);
     }
     _syncEndTimeSignals(date) {
         const hours = date.getHours();
@@ -1342,10 +1399,24 @@ class ZCalendarComponent {
         this._rangeStart.set(this._backupRangeStart());
         this._rangeEnd.set(this._backupRangeEnd());
         this._dirty.set(false);
+        if (this.isRangeMode()) {
+            const backupStart = this._backupRangeStart();
+            const backupEnd = this._backupRangeEnd();
+            if (backupStart) {
+                this._syncTimeSignals(backupStart);
+            }
+            if (backupEnd) {
+                this._syncEndTimeSignals(backupEnd);
+            }
+            this._inputDisplayStart.set(this.displayValueStart());
+            this._inputDisplayEnd.set(this.displayValueEnd());
+            return;
+        }
         const backup = this._backupSelectedDate();
         if (backup) {
             this._syncTimeSignals(backup);
         }
+        this._inputDisplayValue.set(this.displayValue());
     }
     onPopoverControl(control) {
         this._popoverControl.set(control);
@@ -1360,7 +1431,8 @@ class ZCalendarComponent {
             return;
         }
         if (event.key === 'Escape' && this.isOpen()) {
-            this.close();
+            event.preventDefault();
+            this._cancelAndRestore();
         }
     }
     onInputChange(event) {
@@ -1397,6 +1469,7 @@ class ZCalendarComponent {
             this._selectedDate.set(date);
             this._currentMonth.set(date);
             this._syncTimeSignals(date);
+            this._scrollToCurrentTime();
         }
     }
     _getExpectedFormatLength(format) {
@@ -1427,6 +1500,7 @@ class ZCalendarComponent {
         this._rangeStart.set(date);
         this._currentMonth.set(date);
         this._syncTimeSignals(date);
+        this._scrollToCurrentTime();
     }
     onEndInputChange(event) {
         const input = event.target;
@@ -1453,6 +1527,7 @@ class ZCalendarComponent {
         this._rangeEnd.set(date);
         this._endMonth.set(date);
         this._syncEndTimeSignals(date);
+        this._scrollToEndTime();
     }
     onStartInputEnter(event) {
         event.preventDefault();
@@ -1476,7 +1551,11 @@ class ZCalendarComponent {
         this._currentMonth.set(date);
         this._syncTimeSignals(date);
         this._dirty.set(true);
+        this._inputDisplayStart.set(this.displayValueStart());
         input.blur();
+        if (this.showOkButton() && this.canApply()) {
+            this.onOkClick();
+        }
     }
     onEndInputEnter(event) {
         event.preventDefault();
@@ -1500,7 +1579,11 @@ class ZCalendarComponent {
         this._endMonth.set(date);
         this._syncEndTimeSignals(date);
         this._dirty.set(true);
+        this._inputDisplayEnd.set(this.displayValueEnd());
         input.blur();
+        if (this.showOkButton() && this.canApply()) {
+            this.onOkClick();
+        }
     }
     onInputFocus(_event) {
         this._backupSelectedDate.set(this._selectedDate());
@@ -1603,15 +1686,19 @@ class ZCalendarComponent {
         input.blur();
     }
     onCalendarKeydown(event) {
-        if (this._currentView() !== 'day') {
+        const { key, target } = event;
+        if (key === 'Escape') {
+            event.preventDefault();
+            this._cancelAndRestore();
             return;
         }
-        const { key } = event;
-        if (key === 'Escape') {
-            this.close();
+        if (this._currentView() !== 'day') {
             return;
         }
         if (key === 'Enter') {
+            if (target instanceof HTMLInputElement) {
+                return;
+            }
             if (!this.isRangeMode() || this.zShowTime()) {
                 this.onOkClick();
             }
@@ -1663,6 +1750,7 @@ class ZCalendarComponent {
         if (this.isYearMode()) {
             this._selectedDate.set(setYear(new Date(year, 0, 1), year));
             this._dirty.set(true);
+            this._inputDisplayValue.set(this.displayValue());
             this._applyValue();
             this.close();
             return;
@@ -1684,6 +1772,7 @@ class ZCalendarComponent {
         const date = new Date(currentYear, firstMonthOfQuarter, 1);
         this._selectedDate.set(date);
         this._dirty.set(true);
+        this._inputDisplayValue.set(this.displayValue());
         this._applyValue();
         this.close();
     }
@@ -1692,6 +1781,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._applyValue();
             this.close();
             return;
@@ -1748,10 +1838,12 @@ class ZCalendarComponent {
             this._minute.set(now.getMinutes());
             this._second.set(now.getSeconds());
             this._period.set(now.getHours() >= 12 ? 'PM' : 'AM');
+            this._scrollToCurrentTime();
         }
         if (this.isMonthMode()) {
             this._selectedDate.set(new Date(now.getFullYear(), now.getMonth(), 1));
             this._dirty.set(true);
+            this._inputDisplayValue.set(this.displayValue());
             this._applyValue();
             this.close();
             return;
@@ -1759,6 +1851,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._applyValue();
             this.close();
             return;
@@ -1767,6 +1860,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._applyValue();
             this.close();
             return;
@@ -1774,6 +1868,7 @@ class ZCalendarComponent {
         if (this.isTimeMode()) {
             this._selectedDate.set(now);
             this._dirty.set(true);
+            this._inputDisplayValue.set(this.displayValue());
             if (!this.showOkButton()) {
                 this._applyValue();
                 this.close();
@@ -1800,6 +1895,7 @@ class ZCalendarComponent {
         const selectedDate = this.zShowTime() ? now : today;
         this._selectedDate.set(selectedDate);
         this._dirty.set(true);
+        this._inputDisplayValue.set(this.displayValue());
         if (!this.showOkButton()) {
             this._applyValue();
             this.close();
@@ -1926,6 +2022,7 @@ class ZCalendarComponent {
         const value = parseTimeValue(digits, 23);
         this._hour.set(value);
         this._updateTimeToDate();
+        this._updateInputDisplayAfterTimeChange();
     }
     onMinuteInput(event) {
         const input = event.target;
@@ -1936,6 +2033,7 @@ class ZCalendarComponent {
         const value = parseTimeValue(digits, 59);
         this._minute.set(value);
         this._updateTimeToDate();
+        this._updateInputDisplayAfterTimeChange();
     }
     onSecondInput(event) {
         const input = event.target;
@@ -1946,10 +2044,32 @@ class ZCalendarComponent {
         const value = parseTimeValue(digits, 59);
         this._second.set(value);
         this._updateTimeToDate();
+        this._updateInputDisplayAfterTimeChange();
     }
     onTimeBlur(event) {
         const input = event.target;
         const dataType = input.getAttribute('data-time-type');
+        const digits = input.value.replace(/\D/g, '');
+        if (digits.length > 0 && digits.length <= 2) {
+            if (dataType === 'hour') {
+                const value = parseTimeValue(digits, this.zTimeFormat() === '12h' ? 12 : 23);
+                this._hour.set(value);
+                this._updateTimeToDate();
+                this._updateInputDisplayAfterTimeChange();
+            }
+            if (dataType === 'minute') {
+                const value = parseTimeValue(digits, 59);
+                this._minute.set(value);
+                this._updateTimeToDate();
+                this._updateInputDisplayAfterTimeChange();
+            }
+            if (dataType === 'second') {
+                const value = parseTimeValue(digits, 59);
+                this._second.set(value);
+                this._updateTimeToDate();
+                this._updateInputDisplayAfterTimeChange();
+            }
+        }
         if (dataType === 'hour') {
             input.value = this.formattedHour();
         }
@@ -1985,6 +2105,7 @@ class ZCalendarComponent {
         const value = parseTimeValue(digits, 23);
         this._hourEnd.set(value);
         this._updateEndTimeToDate();
+        this._inputDisplayEnd.set(this.displayValueEnd());
     }
     onMinuteEndInput(event) {
         const input = event.target;
@@ -1995,6 +2116,7 @@ class ZCalendarComponent {
         const value = parseTimeValue(digits, 59);
         this._minuteEnd.set(value);
         this._updateEndTimeToDate();
+        this._inputDisplayEnd.set(this.displayValueEnd());
     }
     onSecondEndInput(event) {
         const input = event.target;
@@ -2005,10 +2127,32 @@ class ZCalendarComponent {
         const value = parseTimeValue(digits, 59);
         this._secondEnd.set(value);
         this._updateEndTimeToDate();
+        this._inputDisplayEnd.set(this.displayValueEnd());
     }
     onTimeBlurEnd(event) {
         const input = event.target;
         const dataType = input.getAttribute('data-time-type');
+        const digits = input.value.replace(/\D/g, '');
+        if (digits.length > 0 && digits.length <= 2) {
+            if (dataType === 'hour-end') {
+                const value = parseTimeValue(digits, this.zTimeFormat() === '12h' ? 12 : 23);
+                this._hourEnd.set(value);
+                this._updateEndTimeToDate();
+                this._inputDisplayEnd.set(this.displayValueEnd());
+            }
+            if (dataType === 'minute-end') {
+                const value = parseTimeValue(digits, 59);
+                this._minuteEnd.set(value);
+                this._updateEndTimeToDate();
+                this._inputDisplayEnd.set(this.displayValueEnd());
+            }
+            if (dataType === 'second-end') {
+                const value = parseTimeValue(digits, 59);
+                this._secondEnd.set(value);
+                this._updateEndTimeToDate();
+                this._inputDisplayEnd.set(this.displayValueEnd());
+            }
+        }
         if (dataType === 'hour-end') {
             input.value = this.formattedHourEnd();
         }
@@ -2031,6 +2175,7 @@ class ZCalendarComponent {
             this._hourEnd.set(currentHour - 12);
         }
         this._updateEndTimeToDate();
+        this._inputDisplayEnd.set(this.displayValueEnd());
     }
     _updateEndTimeToDate() {
         const end = this._rangeEnd();
@@ -2284,6 +2429,28 @@ class ZCalendarComponent {
         }
         this._selectedDate.set(null);
     }
+    onInputEscape() {
+        this._cancelAndRestore();
+    }
+    onStartInputEscape() {
+        this._cancelAndRestore();
+    }
+    onEndInputEscape() {
+        this._cancelAndRestore();
+    }
+    _cancelAndRestore() {
+        this._restoreFromBackup();
+        this._updateAllInputDisplays();
+        this.close();
+    }
+    _updateAllInputDisplays() {
+        if (this.isRangeMode()) {
+            this._inputDisplayStart.set(this.displayValueStart());
+            this._inputDisplayEnd.set(this.displayValueEnd());
+            return;
+        }
+        this._inputDisplayValue.set(this.displayValue());
+    }
     _emitControl() {
         this.zControl.emit({
             validate: () => this.validate(),
@@ -2315,6 +2482,14 @@ class ZCalendarComponent {
             this._hour.set(currentHour - 12);
         }
         this._updateTimeToDate();
+        this._updateInputDisplayAfterTimeChange();
+    }
+    _updateInputDisplayAfterTimeChange() {
+        if (this.isRangeMode()) {
+            this._inputDisplayStart.set(this.displayValueStart());
+            return;
+        }
+        this._inputDisplayValue.set(this.displayValue());
     }
     onPeriodChange(event) {
         const select = event.target;
@@ -2329,6 +2504,345 @@ class ZCalendarComponent {
         }
         this._updateTimeToDate();
     }
+    selectHour(hour) {
+        let actualHour = hour;
+        if (this.zTimeFormat() === '12h') {
+            if (this._period() === 'PM' && hour !== 12) {
+                actualHour = hour + 12;
+            }
+            if (this._period() === 'AM' && hour === 12) {
+                actualHour = 0;
+            }
+        }
+        this._hour.set(actualHour);
+        this._updateTimeToDate();
+        this._updateInputDisplayAfterTimeChange();
+    }
+    selectMinute(minute) {
+        this._minute.set(minute);
+        this._updateTimeToDate();
+        this._updateInputDisplayAfterTimeChange();
+    }
+    selectSecond(second) {
+        this._second.set(second);
+        this._updateTimeToDate();
+        this._updateInputDisplayAfterTimeChange();
+    }
+    selectPeriod(period) {
+        if (this._period() === period) {
+            return;
+        }
+        this.togglePeriod();
+    }
+    selectHourEnd(hour) {
+        let actualHour = hour;
+        if (this.zTimeFormat() === '12h') {
+            if (this._periodEnd() === 'PM' && hour !== 12) {
+                actualHour = hour + 12;
+            }
+            if (this._periodEnd() === 'AM' && hour === 12) {
+                actualHour = 0;
+            }
+        }
+        this._hourEnd.set(actualHour);
+        this._updateEndTimeToDate();
+        this._inputDisplayEnd.set(this.displayValueEnd());
+    }
+    selectMinuteEnd(minute) {
+        this._minuteEnd.set(minute);
+        this._updateEndTimeToDate();
+        this._inputDisplayEnd.set(this.displayValueEnd());
+    }
+    selectSecondEnd(second) {
+        this._secondEnd.set(second);
+        this._updateEndTimeToDate();
+        this._inputDisplayEnd.set(this.displayValueEnd());
+    }
+    selectPeriodEnd(period) {
+        if (this._periodEnd() === period) {
+            return;
+        }
+        this.togglePeriodEnd();
+    }
+    scrollToSelectedTime(container, value, itemHeight = 28) {
+        if (!container) {
+            return;
+        }
+        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()) {
+            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 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);
+                const start = this._rangeStart();
+                if (start) {
+                    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;
+                        }
+                    }
+                }
+                const end = this._rangeEnd();
+                if (end) {
+                    let 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;
+            }
+            const selected = this._selectedDate();
+            if (selected) {
+                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: [
             {
@@ -2337,11 +2851,13 @@ 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        <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      } @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      }\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 rounded-[6px] border shadow-lg\"\n    (keydown)=\"onCalendarKeydown($event)\">\n    @if (zQuickSelect() && zMode() === 'range') {\n      <div class=\"border-border flex flex-col space-y-1 border-r p-2\">\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-col gap-2 p-3\">\n      @if (!isTimeMode()) {\n        <div class=\"z-calendars-wrapper flex gap-4\">\n          <!-- First Calendar -->\n          <div class=\"z-calendar-section flex flex-col justify-center 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\n            <!-- Start Time Picker for Range Mode -->\n            @if (isRangeMode() && zShowTime() && currentView() === 'day') {\n              <div class=\"flex items-center justify-center gap-2 pt-2\">\n                <span class=\"text-muted-foreground text-xs\">{{ 'i18n_z_ui_calendar_start' | translate }}:</span>\n                <div class=\"flex items-center gap-0.5\">\n                  @if (zShowHour()) {\n                    <input\n                      type=\"text\"\n                      tabindex=\"0\"\n                      inputmode=\"numeric\"\n                      data-time-type=\"hour\"\n                      class=\"border-input bg-background focus:border-ring focus:ring-ring/30 w-10 rounded border px-1.5 py-1 text-center text-sm outline-none focus:ring-2\"\n                      [value]=\"formattedHour()\"\n                      (input)=\"onHourInput($event)\"\n                      (blur)=\"onTimeBlur($event)\"\n                      maxlength=\"2\" />\n                  }\n                  @if (zShowHour() && zShowMinute()) {\n                    <span class=\"text-muted-foreground\">:</span>\n                  }\n                  @if (zShowMinute()) {\n                    <input\n                      type=\"text\"\n                      tabindex=\"0\"\n                      inputmode=\"numeric\"\n                      data-time-type=\"minute\"\n                      class=\"border-input bg-background focus:border-ring focus:ring-ring/30 w-10 rounded border px-1.5 py-1 text-center text-sm outline-none focus:ring-2\"\n                      [value]=\"formattedMinute()\"\n                      (input)=\"onMinuteInput($event)\"\n                      (blur)=\"onTimeBlur($event)\"\n                      maxlength=\"2\" />\n                  }\n                  @if (zShowMinute() && zShowSecond()) {\n                    <span class=\"text-muted-foreground\">:</span>\n                  }\n                  @if (zShowSecond()) {\n                    <input\n                      type=\"text\"\n                      tabindex=\"0\"\n                      inputmode=\"numeric\"\n                      data-time-type=\"second\"\n                      class=\"border-input bg-background focus:border-ring focus:ring-ring/30 w-10 rounded border px-1.5 py-1 text-center text-sm outline-none focus:ring-2\"\n                      [value]=\"formattedSecond()\"\n                      (input)=\"onSecondInput($event)\"\n                      (blur)=\"onTimeBlur($event)\"\n                      maxlength=\"2\" />\n                  }\n                  @if (zTimeFormat() === '12h') {\n                    <button\n                      type=\"button\"\n                      tabindex=\"0\"\n                      class=\"border-input bg-background hover:bg-muted focus:border-ring focus:ring-ring/30 ml-1 cursor-pointer rounded border px-2 py-1 text-sm font-medium transition-colors outline-none focus:ring-2\"\n                      (click)=\"togglePeriod()\">\n                      {{ period() }}\n                    </button>\n                  }\n                </div>\n              </div>\n            }\n          </div>\n\n          <!-- Second Calendar (Range Mode Only) -->\n          @if (isRangeMode()) {\n            <!-- Divider -->\n            <div class=\"border-border bg-border w-px self-stretch\"></div>\n\n            <div class=\"z-calendar-section flex flex-col justify-center 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\n              <!-- End Time Picker for Range Mode -->\n              @if (zShowTime()) {\n                <div class=\"flex items-center justify-center gap-2 pt-2\">\n                  <span class=\"text-muted-foreground text-xs\">{{ 'i18n_z_ui_calendar_end' | translate }}:</span>\n                  <div class=\"flex items-center gap-0.5\">\n                    @if (zShowHour()) {\n                      <input\n                        type=\"text\"\n                        tabindex=\"0\"\n                        inputmode=\"numeric\"\n                        data-time-type=\"hour-end\"\n                        class=\"border-input bg-background focus:border-ring focus:ring-ring/30 w-10 rounded border px-1.5 py-1 text-center text-sm outline-none focus:ring-2\"\n                        [value]=\"formattedHourEnd()\"\n                        (input)=\"onHourEndInput($event)\"\n                        (blur)=\"onTimeBlurEnd($event)\"\n                        maxlength=\"2\" />\n                    }\n                    @if (zShowHour() && zShowMinute()) {\n                      <span class=\"text-muted-foreground\">:</span>\n                    }\n                    @if (zShowMinute()) {\n                      <input\n                        type=\"text\"\n                        tabindex=\"0\"\n                        inputmode=\"numeric\"\n                        data-time-type=\"minute-end\"\n                        class=\"border-input bg-background focus:border-ring focus:ring-ring/30 w-10 rounded border px-1.5 py-1 text-center text-sm outline-none focus:ring-2\"\n                        [value]=\"formattedMinuteEnd()\"\n                        (input)=\"onMinuteEndInput($event)\"\n                        (blur)=\"onTimeBlurEnd($event)\"\n                        maxlength=\"2\" />\n                    }\n                    @if (zShowMinute() && zShowSecond()) {\n                      <span class=\"text-muted-foreground\">:</span>\n                    }\n                    @if (zShowSecond()) {\n                      <input\n                        type=\"text\"\n                        tabindex=\"0\"\n                        inputmode=\"numeric\"\n                        data-time-type=\"second-end\"\n                        class=\"border-input bg-background focus:border-ring focus:ring-ring/30 w-10 rounded border px-1.5 py-1 text-center text-sm outline-none focus:ring-2\"\n                        [value]=\"formattedSecondEnd()\"\n                        (input)=\"onSecondEndInput($event)\"\n                        (blur)=\"onTimeBlurEnd($event)\"\n                        maxlength=\"2\" />\n                    }\n                    @if (zTimeFormat() === '12h') {\n                      <button\n                        type=\"button\"\n                        tabindex=\"0\"\n                        class=\"border-input bg-background hover:bg-muted focus:border-ring focus:ring-ring/30 ml-1 cursor-pointer rounded border px-2 py-1 text-sm font-medium transition-colors outline-none focus:ring-2\"\n                        (click)=\"togglePeriodEnd()\">\n                        {{ periodEnd() }}\n                      </button>\n                    }\n                  </div>\n                </div>\n              }\n            </div>\n          }\n        </div>\n      }\n\n      @if (((zShowTime() && currentView() === 'day') || isTimeMode()) && !isRangeMode()) {\n        <div class=\"flex items-center justify-center gap-2\">\n          <div class=\"flex items-center gap-0.5\">\n            @if (zShowHour()) {\n              <input\n                type=\"text\"\n                tabindex=\"0\"\n                inputmode=\"numeric\"\n                data-time-type=\"hour\"\n                class=\"border-input bg-background focus:border-ring focus:ring-ring/30 w-10 rounded border px-1.5 py-1 text-center text-sm outline-none focus:ring-2\"\n                [value]=\"formattedHour()\"\n                (input)=\"onHourInput($event)\"\n                (blur)=\"onTimeBlur($event)\"\n                maxlength=\"2\" />\n            }\n\n            @if (zShowHour() && zShowMinute()) {\n              <span class=\"text-muted-foreground\">:</span>\n            }\n\n            @if (zShowMinute()) {\n              <input\n                type=\"text\"\n                tabindex=\"0\"\n                inputmode=\"numeric\"\n                data-time-type=\"minute\"\n                class=\"border-input bg-background focus:border-ring focus:ring-ring/30 w-10 rounded border px-1.5 py-1 text-center text-sm outline-none focus:ring-2\"\n                [value]=\"formattedMinute()\"\n                (input)=\"onMinuteInput($event)\"\n                (blur)=\"onTimeBlur($event)\"\n                maxlength=\"2\" />\n            }\n\n            @if (zShowMinute() && zShowSecond()) {\n              <span class=\"text-muted-foreground\">:</span>\n            }\n\n            @if (zShowSecond()) {\n              <input\n                type=\"text\"\n                tabindex=\"0\"\n                inputmode=\"numeric\"\n                data-time-type=\"second\"\n                class=\"border-input bg-background focus:border-ring focus:ring-ring/30 w-10 rounded border px-1.5 py-1 text-center text-sm outline-none focus:ring-2\"\n                [value]=\"formattedSecond()\"\n                (input)=\"onSecondInput($event)\"\n                (blur)=\"onTimeBlur($event)\"\n                maxlength=\"2\" />\n            }\n\n            @if (zTimeFormat() === '12h') {\n              <button\n                type=\"button\"\n                tabindex=\"0\"\n                class=\"border-input bg-background hover:bg-muted focus:border-ring focus:ring-ring/30 ml-1 cursor-pointer rounded border px-2 py-1 text-sm font-medium transition-colors outline-none focus:ring-2\"\n                (click)=\"togglePeriod()\">\n                {{ period() }}\n              </button>\n            }\n          </div>\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}@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: 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: 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 rounded-[6px] border shadow-lg\"\n    (keydown)=\"onCalendarKeydown($event)\">\n    @if (zQuickSelect() && zMode() === 'range') {\n      <div class=\"border-border flex flex-col space-y-1 border-r p-2\">\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-col gap-2 p-3\">\n      @if (!isTimeMode()) {\n        <div class=\"z-calendars-wrapper flex\">\n          <!-- First Calendar -->\n          <div class=\"z-calendar-section flex flex-col justify-center 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 class=\"border-border flex flex-col border-l 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 gap-1\">\n                <!-- Hour Column -->\n                @if (zShowHour()) {\n                  <ng-scrollbar class=\"z-time-column border-border h-[235px] w-12 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\n                <!-- Minute Column -->\n                @if (zShowMinute()) {\n                  <ng-scrollbar class=\"z-time-column border-border h-[235px] w-12 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\n                <!-- Second Column -->\n                @if (zShowSecond()) {\n                  <ng-scrollbar class=\"z-time-column border-border h-[235px] w-12 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\n                <!-- AM/PM Column -->\n                @if (zTimeFormat() === '12h') {\n                  <div class=\"flex flex-col gap-1\">\n                    <button\n                      type=\"button\"\n                      class=\"hover:bg-muted flex h-7 w-12 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 w-12 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 w-px self-stretch\"></div>\n\n            <div class=\"z-calendar-section flex flex-col justify-center 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 class=\"border-border flex flex-col gap-4 border-l 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 gap-1\">\n                  @if (zShowHour()) {\n                    <ng-scrollbar class=\"z-time-column border-border h-[140px] w-10 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-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 class=\"z-time-column border-border h-[140px] w-10 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-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 class=\"z-time-column border-border h-[140px] w-10 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-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                  @if (zTimeFormat() === '12h') {\n                    <div class=\"flex flex-col gap-1\">\n                      <button\n                        type=\"button\"\n                        class=\"hover:bg-muted flex h-6 w-9 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 w-9 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 gap-1\">\n                  @if (zShowHour()) {\n                    <ng-scrollbar class=\"z-time-column border-border h-[140px] w-10 rounded border\" 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 class=\"z-time-column border-border h-[140px] w-10 rounded border\" 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 class=\"z-time-column border-border h-[140px] w-10 rounded border\" 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                  @if (zTimeFormat() === '12h') {\n                    <div class=\"flex flex-col gap-1\">\n                      @let amDisabled = isEndPeriodDisabled('AM');\n                      <button\n                        type=\"button\"\n                        class=\"flex h-6 w-9 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 w-9 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      }\n\n      @if (isTimeMode()) {\n        <div class=\"flex justify-center gap-1 py-2\">\n          <!-- Hour Column -->\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\n          <!-- Minute Column -->\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\n          <!-- Second Column -->\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\n          <!-- AM/PM Column -->\n          @if (zTimeFormat() === '12h') {\n            <div class=\"flex flex-col gap-1\">\n              <button\n                type=\"button\"\n                class=\"hover:bg-muted flex h-7 w-14 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 w-14 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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZCalendarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'z-calendar', imports: [
+                        DecimalPipe,
+                        NgScrollbar,
                         ZIconComponent,
                         ZPopoverDirective,
                         ZButtonComponent,
@@ -2358,7 +2874,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        <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      } @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      }\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 rounded-[6px] border shadow-lg\"\n    (keydown)=\"onCalendarKeydown($event)\">\n    @if (zQuickSelect() && zMode() === 'range') {\n      <div class=\"border-border flex flex-col space-y-1 border-r p-2\">\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-col gap-2 p-3\">\n      @if (!isTimeMode()) {\n        <div class=\"z-calendars-wrapper flex gap-4\">\n          <!-- First Calendar -->\n          <div class=\"z-calendar-section flex flex-col justify-center 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\n            <!-- Start Time Picker for Range Mode -->\n            @if (isRangeMode() && zShowTime() && currentView() === 'day') {\n              <div class=\"flex items-center justify-center gap-2 pt-2\">\n                <span class=\"text-muted-foreground text-xs\">{{ 'i18n_z_ui_calendar_start' | translate }}:</span>\n                <div class=\"flex items-center gap-0.5\">\n                  @if (zShowHour()) {\n                    <input\n                      type=\"text\"\n                      tabindex=\"0\"\n                      inputmode=\"numeric\"\n                      data-time-type=\"hour\"\n                      class=\"border-input bg-background focus:border-ring focus:ring-ring/30 w-10 rounded border px-1.5 py-1 text-center text-sm outline-none focus:ring-2\"\n                      [value]=\"formattedHour()\"\n                      (input)=\"onHourInput($event)\"\n                      (blur)=\"onTimeBlur($event)\"\n                      maxlength=\"2\" />\n                  }\n                  @if (zShowHour() && zShowMinute()) {\n                    <span class=\"text-muted-foreground\">:</span>\n                  }\n                  @if (zShowMinute()) {\n                    <input\n                      type=\"text\"\n                      tabindex=\"0\"\n                      inputmode=\"numeric\"\n                      data-time-type=\"minute\"\n                      class=\"border-input bg-background focus:border-ring focus:ring-ring/30 w-10 rounded border px-1.5 py-1 text-center text-sm outline-none focus:ring-2\"\n                      [value]=\"formattedMinute()\"\n                      (input)=\"onMinuteInput($event)\"\n                      (blur)=\"onTimeBlur($event)\"\n                      maxlength=\"2\" />\n                  }\n                  @if (zShowMinute() && zShowSecond()) {\n                    <span class=\"text-muted-foreground\">:</span>\n                  }\n                  @if (zShowSecond()) {\n                    <input\n                      type=\"text\"\n                      tabindex=\"0\"\n                      inputmode=\"numeric\"\n                      data-time-type=\"second\"\n                      class=\"border-input bg-background focus:border-ring focus:ring-ring/30 w-10 rounded border px-1.5 py-1 text-center text-sm outline-none focus:ring-2\"\n                      [value]=\"formattedSecond()\"\n                      (input)=\"onSecondInput($event)\"\n                      (blur)=\"onTimeBlur($event)\"\n                      maxlength=\"2\" />\n                  }\n                  @if (zTimeFormat() === '12h') {\n                    <button\n                      type=\"button\"\n                      tabindex=\"0\"\n                      class=\"border-input bg-background hover:bg-muted focus:border-ring focus:ring-ring/30 ml-1 cursor-pointer rounded border px-2 py-1 text-sm font-medium transition-colors outline-none focus:ring-2\"\n                      (click)=\"togglePeriod()\">\n                      {{ period() }}\n                    </button>\n                  }\n                </div>\n              </div>\n            }\n          </div>\n\n          <!-- Second Calendar (Range Mode Only) -->\n          @if (isRangeMode()) {\n            <!-- Divider -->\n            <div class=\"border-border bg-border w-px self-stretch\"></div>\n\n            <div class=\"z-calendar-section flex flex-col justify-center 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\n              <!-- End Time Picker for Range Mode -->\n              @if (zShowTime()) {\n                <div class=\"flex items-center justify-center gap-2 pt-2\">\n                  <span class=\"text-muted-foreground text-xs\">{{ 'i18n_z_ui_calendar_end' | translate }}:</span>\n                  <div class=\"flex items-center gap-0.5\">\n                    @if (zShowHour()) {\n                      <input\n                        type=\"text\"\n                        tabindex=\"0\"\n                        inputmode=\"numeric\"\n                        data-time-type=\"hour-end\"\n                        class=\"border-input bg-background focus:border-ring focus:ring-ring/30 w-10 rounded border px-1.5 py-1 text-center text-sm outline-none focus:ring-2\"\n                        [value]=\"formattedHourEnd()\"\n                        (input)=\"onHourEndInput($event)\"\n                        (blur)=\"onTimeBlurEnd($event)\"\n                        maxlength=\"2\" />\n                    }\n                    @if (zShowHour() && zShowMinute()) {\n                      <span class=\"text-muted-foreground\">:</span>\n                    }\n                    @if (zShowMinute()) {\n                      <input\n                        type=\"text\"\n                        tabindex=\"0\"\n                        inputmode=\"numeric\"\n                        data-time-type=\"minute-end\"\n                        class=\"border-input bg-background focus:border-ring focus:ring-ring/30 w-10 rounded border px-1.5 py-1 text-center text-sm outline-none focus:ring-2\"\n                        [value]=\"formattedMinuteEnd()\"\n                        (input)=\"onMinuteEndInput($event)\"\n                        (blur)=\"onTimeBlurEnd($event)\"\n                        maxlength=\"2\" />\n                    }\n                    @if (zShowMinute() && zShowSecond()) {\n                      <span class=\"text-muted-foreground\">:</span>\n                    }\n                    @if (zShowSecond()) {\n                      <input\n                        type=\"text\"\n                        tabindex=\"0\"\n                        inputmode=\"numeric\"\n                        data-time-type=\"second-end\"\n                        class=\"border-input bg-background focus:border-ring focus:ring-ring/30 w-10 rounded border px-1.5 py-1 text-center text-sm outline-none focus:ring-2\"\n                        [value]=\"formattedSecondEnd()\"\n                        (input)=\"onSecondEndInput($event)\"\n                        (blur)=\"onTimeBlurEnd($event)\"\n                        maxlength=\"2\" />\n                    }\n                    @if (zTimeFormat() === '12h') {\n                      <button\n                        type=\"button\"\n                        tabindex=\"0\"\n                        class=\"border-input bg-background hover:bg-muted focus:border-ring focus:ring-ring/30 ml-1 cursor-pointer rounded border px-2 py-1 text-sm font-medium transition-colors outline-none focus:ring-2\"\n                        (click)=\"togglePeriodEnd()\">\n                        {{ periodEnd() }}\n                      </button>\n                    }\n                  </div>\n                </div>\n              }\n            </div>\n          }\n        </div>\n      }\n\n      @if (((zShowTime() && currentView() === 'day') || isTimeMode()) && !isRangeMode()) {\n        <div class=\"flex items-center justify-center gap-2\">\n          <div class=\"flex items-center gap-0.5\">\n            @if (zShowHour()) {\n              <input\n                type=\"text\"\n                tabindex=\"0\"\n                inputmode=\"numeric\"\n                data-time-type=\"hour\"\n                class=\"border-input bg-background focus:border-ring focus:ring-ring/30 w-10 rounded border px-1.5 py-1 text-center text-sm outline-none focus:ring-2\"\n                [value]=\"formattedHour()\"\n                (input)=\"onHourInput($event)\"\n                (blur)=\"onTimeBlur($event)\"\n                maxlength=\"2\" />\n            }\n\n            @if (zShowHour() && zShowMinute()) {\n              <span class=\"text-muted-foreground\">:</span>\n            }\n\n            @if (zShowMinute()) {\n              <input\n                type=\"text\"\n                tabindex=\"0\"\n                inputmode=\"numeric\"\n                data-time-type=\"minute\"\n                class=\"border-input bg-background focus:border-ring focus:ring-ring/30 w-10 rounded border px-1.5 py-1 text-center text-sm outline-none focus:ring-2\"\n                [value]=\"formattedMinute()\"\n                (input)=\"onMinuteInput($event)\"\n                (blur)=\"onTimeBlur($event)\"\n                maxlength=\"2\" />\n            }\n\n            @if (zShowMinute() && zShowSecond()) {\n              <span class=\"text-muted-foreground\">:</span>\n            }\n\n            @if (zShowSecond()) {\n              <input\n                type=\"text\"\n                tabindex=\"0\"\n                inputmode=\"numeric\"\n                data-time-type=\"second\"\n                class=\"border-input bg-background focus:border-ring focus:ring-ring/30 w-10 rounded border px-1.5 py-1 text-center text-sm outline-none focus:ring-2\"\n                [value]=\"formattedSecond()\"\n                (input)=\"onSecondInput($event)\"\n                (blur)=\"onTimeBlur($event)\"\n                maxlength=\"2\" />\n            }\n\n            @if (zTimeFormat() === '12h') {\n              <button\n                type=\"button\"\n                tabindex=\"0\"\n                class=\"border-input bg-background hover:bg-muted focus:border-ring focus:ring-ring/30 ml-1 cursor-pointer rounded border px-2 py-1 text-sm font-medium transition-colors outline-none focus:ring-2\"\n                (click)=\"togglePeriod()\">\n                {{ period() }}\n              </button>\n            }\n          </div>\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}@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 rounded-[6px] border shadow-lg\"\n    (keydown)=\"onCalendarKeydown($event)\">\n    @if (zQuickSelect() && zMode() === 'range') {\n      <div class=\"border-border flex flex-col space-y-1 border-r p-2\">\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-col gap-2 p-3\">\n      @if (!isTimeMode()) {\n        <div class=\"z-calendars-wrapper flex\">\n          <!-- First Calendar -->\n          <div class=\"z-calendar-section flex flex-col justify-center 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 class=\"border-border flex flex-col border-l 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 gap-1\">\n                <!-- Hour Column -->\n                @if (zShowHour()) {\n                  <ng-scrollbar class=\"z-time-column border-border h-[235px] w-12 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\n                <!-- Minute Column -->\n                @if (zShowMinute()) {\n                  <ng-scrollbar class=\"z-time-column border-border h-[235px] w-12 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\n                <!-- Second Column -->\n                @if (zShowSecond()) {\n                  <ng-scrollbar class=\"z-time-column border-border h-[235px] w-12 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\n                <!-- AM/PM Column -->\n                @if (zTimeFormat() === '12h') {\n                  <div class=\"flex flex-col gap-1\">\n                    <button\n                      type=\"button\"\n                      class=\"hover:bg-muted flex h-7 w-12 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 w-12 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 w-px self-stretch\"></div>\n\n            <div class=\"z-calendar-section flex flex-col justify-center 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 class=\"border-border flex flex-col gap-4 border-l 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 gap-1\">\n                  @if (zShowHour()) {\n                    <ng-scrollbar class=\"z-time-column border-border h-[140px] w-10 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-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 class=\"z-time-column border-border h-[140px] w-10 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-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 class=\"z-time-column border-border h-[140px] w-10 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-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                  @if (zTimeFormat() === '12h') {\n                    <div class=\"flex flex-col gap-1\">\n                      <button\n                        type=\"button\"\n                        class=\"hover:bg-muted flex h-6 w-9 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 w-9 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 gap-1\">\n                  @if (zShowHour()) {\n                    <ng-scrollbar class=\"z-time-column border-border h-[140px] w-10 rounded border\" 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 class=\"z-time-column border-border h-[140px] w-10 rounded border\" 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 class=\"z-time-column border-border h-[140px] w-10 rounded border\" 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                  @if (zTimeFormat() === '12h') {\n                    <div class=\"flex flex-col gap-1\">\n                      @let amDisabled = isEndPeriodDisabled('AM');\n                      <button\n                        type=\"button\"\n                        class=\"flex h-6 w-9 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 w-9 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      }\n\n      @if (isTimeMode()) {\n        <div class=\"flex justify-center gap-1 py-2\">\n          <!-- Hour Column -->\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\n          <!-- Minute Column -->\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\n          <!-- Second Column -->\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\n          <!-- AM/PM Column -->\n          @if (zTimeFormat() === '12h') {\n            <div class=\"flex flex-col gap-1\">\n              <button\n                type=\"button\"\n                class=\"hover:bg-muted flex h-7 w-14 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 w-14 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"] }]
         }], 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 }] }] } });
 
 /**