@shival99/z-ui 1.9.21 → 1.9.23

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

@@ -293,10 +293,30 @@ const parseDate = (dateString, format) => {
             hour = 0;
         }
     }
+    if (values['MM'] < 1 || values['MM'] > 12) {
+        return null;
+    }
+    if (values['DD'] < 1 || values['DD'] > 31) {
+        return null;
+    }
+    if (format.includes('HH') && (values['HH'] < 0 || values['HH'] > 23)) {
+        return null;
+    }
+    if (format.includes('hh') && (values['hh'] < 1 || values['hh'] > 12)) {
+        return null;
+    }
+    if (values['mm'] < 0 || values['mm'] > 59 || values['ss'] < 0 || values['ss'] > 59) {
+        return null;
+    }
     try {
         const date = createDate(values['YYYY'], values['MM'] - 1, values['DD'], hour, values['mm'], values['ss']);
-        // Validate the date is valid (e.g., not 31/02/2025)
-        if (isNaN(date.getTime())) {
+        if (isNaN(date.getTime()) ||
+            date.getFullYear() !== values['YYYY'] ||
+            date.getMonth() !== values['MM'] - 1 ||
+            date.getDate() !== values['DD'] ||
+            date.getHours() !== hour ||
+            date.getMinutes() !== values['mm'] ||
+            date.getSeconds() !== values['ss']) {
             return null;
         }
         return date;
@@ -397,6 +417,38 @@ const parseTimeValue = (value, max) => {
     return clampTime(parsed, 0, max);
 };
 const formatTimeValue = (value) => String(value).padStart(2, '0');
+const buildTimeFormat = (showHour, showMinute, showSecond, timeFormat, period) => {
+    const timeParts = [];
+    if (showHour) {
+        timeParts.push(timeFormat === '12h' ? 'hh' : 'HH');
+    }
+    if (showMinute) {
+        timeParts.push('mm');
+    }
+    if (showSecond) {
+        timeParts.push('ss');
+    }
+    const periodSuffix = timeFormat === '12h' && period ? ` ${period}` : '';
+    return `${timeParts.join(':')}${periodSuffix}`;
+};
+const to24Hour = (hour, period, timeFormat) => {
+    if (timeFormat === '24h') {
+        return hour;
+    }
+    if (period === 'PM' && hour < 12) {
+        return hour + 12;
+    }
+    if (period === 'AM' && hour === 12) {
+        return 0;
+    }
+    return hour;
+};
+const getWrappedTimeValue = (value, min, max, step) => {
+    if (step > 0) {
+        return value >= max ? min : value + step;
+    }
+    return value <= min ? max : value + step;
+};
 const getDayState = (day) => {
     if (day.isDisabled) {
         return 'disabled';
@@ -616,22 +668,8 @@ class ZIsEndHourDisabledPipe {
         if (!context.isSameDay) {
             return false;
         }
-        let actualHour = hour;
-        let actualStartHour = context.startHour;
-        if (context.timeFormat === '12h') {
-            if (context.endPeriod === 'PM' && hour !== 12) {
-                actualHour = hour + 12;
-            }
-            if (context.endPeriod === 'AM' && hour === 12) {
-                actualHour = 0;
-            }
-            if (context.startPeriod === 'PM' && context.startHour !== 12) {
-                actualStartHour = context.startHour + 12;
-            }
-            if (context.startPeriod === 'AM' && context.startHour === 12) {
-                actualStartHour = 0;
-            }
-        }
+        const actualHour = to24Hour(hour, context.endPeriod, context.timeFormat);
+        const actualStartHour = to24Hour(context.startHour, context.startPeriod, context.timeFormat);
         return actualHour < actualStartHour;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZIsEndHourDisabledPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
@@ -650,22 +688,8 @@ class ZIsEndMinuteDisabledPipe {
         if (!context.isSameDay) {
             return false;
         }
-        let actualStartHour = context.startHour;
-        let actualEndHour = context.endHour;
-        if (context.timeFormat === '12h') {
-            if (context.startPeriod === 'PM' && context.startHour !== 12) {
-                actualStartHour = context.startHour + 12;
-            }
-            if (context.startPeriod === 'AM' && context.startHour === 12) {
-                actualStartHour = 0;
-            }
-            if (context.endPeriod === 'PM' && context.endHour !== 12) {
-                actualEndHour = context.endHour + 12;
-            }
-            if (context.endPeriod === 'AM' && context.endHour === 12) {
-                actualEndHour = 0;
-            }
-        }
+        const actualStartHour = to24Hour(context.startHour, context.startPeriod, context.timeFormat);
+        const actualEndHour = to24Hour(context.endHour, context.endPeriod, context.timeFormat);
         if (actualEndHour !== actualStartHour) {
             return false;
         }
@@ -687,22 +711,8 @@ class ZIsEndSecondDisabledPipe {
         if (!context.isSameDay) {
             return false;
         }
-        let actualStartHour = context.startHour;
-        let actualEndHour = context.endHour;
-        if (context.timeFormat === '12h') {
-            if (context.startPeriod === 'PM' && context.startHour !== 12) {
-                actualStartHour = context.startHour + 12;
-            }
-            if (context.startPeriod === 'AM' && context.startHour === 12) {
-                actualStartHour = 0;
-            }
-            if (context.endPeriod === 'PM' && context.endHour !== 12) {
-                actualEndHour = context.endHour + 12;
-            }
-            if (context.endPeriod === 'AM' && context.endHour === 12) {
-                actualEndHour = 0;
-            }
-        }
+        const actualStartHour = to24Hour(context.startHour, context.startPeriod, context.timeFormat);
+        const actualEndHour = to24Hour(context.endHour, context.endPeriod, context.timeFormat);
         if (actualEndHour !== actualStartHour) {
             return false;
         }
@@ -878,22 +888,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
                 }]
         }] });
 
-class ZIsTimeSelectedPipe {
-    transform(value, selectedValue) {
-        return value === selectedValue;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZIsTimeSelectedPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.9", ngImport: i0, type: ZIsTimeSelectedPipe, isStandalone: true, name: "zIsTimeSelected" });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZIsTimeSelectedPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'zIsTimeSelected',
-                    standalone: true,
-                    pure: true,
-                }]
-        }] });
-
 class ZYearClassesPipe {
     transform(year, selectedYear, todayYear) {
         const state = getYearState(year, selectedYear, todayYear);
@@ -1243,34 +1237,12 @@ class ZCalendarComponent {
         const format = this.zFormat();
         const formatHasTime = hasTimeTokens(format);
         if (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.period()}` : '';
-            return this._formatDisplayValue(timeFormat + periodSuffix);
+            const timeFormat = this._buildTimeFormat(this.period());
+            return this._formatDisplayValue(timeFormat);
         }
         if (this.zShowTime() && !formatHasTime) {
-            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.period()}` : '';
-            return this._formatDisplayValue(`${format} ${timeFormat}${periodSuffix}`);
+            const timeFormat = this._buildTimeFormat(this.period());
+            return this._formatDisplayValue(`${format} ${timeFormat}`);
         }
         return this._formatDisplayValue(format);
     }, ...(ngDevMode ? [{ debugName: "displayValue" }] : []));
@@ -1318,34 +1290,10 @@ class ZCalendarComponent {
         const format = this.zFormat();
         const formatHasTime = hasTimeTokens(format);
         if (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.period()}` : '';
-            return timeFormat + periodSuffix;
+            return this._buildTimeFormat(this.period());
         }
         if (this.zShowTime() && !formatHasTime) {
-            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.period()}` : '';
-            return `${format} ${timeFormat}${periodSuffix}`;
+            return `${format} ${this._buildTimeFormat(this.period())}`;
         }
         return format;
     }
@@ -1353,34 +1301,10 @@ class ZCalendarComponent {
         const format = this.zFormat();
         const formatHasTime = hasTimeTokens(format);
         if (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()}` : '';
-            return timeFormat + periodSuffix;
+            return this._buildTimeFormat(this._periodEnd());
         }
         if (this.zShowTime() && !formatHasTime) {
-            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()}` : '';
-            return `${format} ${timeFormat}${periodSuffix}`;
+            return `${format} ${this._buildTimeFormat(this._periodEnd())}`;
         }
         return format;
     }
@@ -1607,6 +1531,7 @@ class ZCalendarComponent {
             this._ngControl.control.markAsUntouched();
         }
     }
+    /** @deprecated Use `valid()` for boolean form-submit checks. */
     validate() {
         this.uiState.update(s => ({ ...s, touched: true, dirty: true }));
         this._onTouched();
@@ -1616,6 +1541,9 @@ class ZCalendarComponent {
         }
         return this.hasError();
     }
+    valid() {
+        return !this.validate();
+    }
     setErrorMessage(message) {
         this._customError.set(message);
         if (message) {
@@ -2284,15 +2212,7 @@ class ZCalendarComponent {
             return;
         }
         if (this.isTimeMode()) {
-            let hour = this.hour();
-            if (this.zTimeFormat() === '12h') {
-                if (this.period() === 'PM' && hour < 12) {
-                    hour += 12;
-                }
-                if (this.period() === 'AM' && hour === 12) {
-                    hour = 0;
-                }
-            }
+            const hour = to24Hour(this.hour(), this.period(), this.zTimeFormat());
             const baseDate = this._selectedDate() ?? new Date();
             this._selectedDate.set(setTime(baseDate, hour, this.minute(), this.second()));
         }
@@ -2559,15 +2479,7 @@ class ZCalendarComponent {
         if (!end) {
             return;
         }
-        let hour = this._hourEnd();
-        if (this.zTimeFormat() === '12h') {
-            if (this._periodEnd() === 'PM' && hour < 12) {
-                hour += 12;
-            }
-            if (this._periodEnd() === 'AM' && hour === 12) {
-                hour = 0;
-            }
-        }
+        const hour = to24Hour(this._hourEnd(), this._periodEnd(), this.zTimeFormat());
         const newDate = setTime(end, hour, this._minuteEnd(), this._secondEnd());
         this._rangeEnd.set(newDate);
         this.uiState.update(s => ({ ...s, dirty: true }));
@@ -2679,15 +2591,7 @@ class ZCalendarComponent {
         if (!this.zShowTime() && !this.isTimeMode()) {
             return;
         }
-        let hour = this.hour();
-        if (this.zTimeFormat() === '12h') {
-            if (this.period() === 'PM' && hour < 12) {
-                hour += 12;
-            }
-            if (this.period() === 'AM' && hour === 12) {
-                hour = 0;
-            }
-        }
+        const hour = to24Hour(this.hour(), this.period(), this.zTimeFormat());
         if (this.isRangeMode()) {
             const start = this._rangeStart();
             if (start) {
@@ -2821,22 +2725,15 @@ class ZCalendarComponent {
         if (!this.zShowTime() && !this.isTimeMode()) {
             return this.zFormat();
         }
-        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 timeFormat = this._buildTimeFormat();
         if (this.isTimeMode()) {
             return timeFormat;
         }
         return `${this.zFormat()} ${timeFormat}`;
     }
+    _buildTimeFormat(period) {
+        return buildTimeFormat(this.zShowHour(), this.zShowMinute(), this.zShowSecond(), this.zTimeFormat(), period);
+    }
     _updateInputDisplay() {
         this.inputDisplayValue.set(this.displayValue());
         if (this.isRangeMode()) {
@@ -2876,6 +2773,7 @@ class ZCalendarComponent {
     }
     _emitControl() {
         this.zControl.emit({
+            valid: () => this.valid(),
             validate: () => this.validate(),
             reset: () => this.reset(),
             focus: () => this.focus(),
@@ -2905,72 +2803,50 @@ class ZCalendarComponent {
         this._updateInputDisplayAfterTimeChange();
     }
     incrementHour() {
-        const maxHour = this.zTimeFormat() === '12h' ? 12 : 23;
-        const minHour = this.zTimeFormat() === '12h' ? 1 : 0;
-        let currentHour = this.displayHour();
-        currentHour = currentHour >= maxHour ? minHour : currentHour + 1;
-        this.selectHour(currentHour, true);
+        this.selectHour(this._getNextHour(this.displayHour()), true);
     }
     decrementHour() {
-        const maxHour = this.zTimeFormat() === '12h' ? 12 : 23;
-        const minHour = this.zTimeFormat() === '12h' ? 1 : 0;
-        let currentHour = this.displayHour();
-        currentHour = currentHour <= minHour ? maxHour : currentHour - 1;
-        this.selectHour(currentHour, true);
+        this.selectHour(this._getPreviousHour(this.displayHour()), true);
     }
     incrementMinute() {
-        let currentMinute = this.minute();
-        currentMinute = currentMinute >= 59 ? 0 : currentMinute + 1;
-        this.selectMinute(currentMinute, true);
+        this.selectMinute(getWrappedTimeValue(this.minute(), 0, 59, 1), true);
     }
     decrementMinute() {
-        let currentMinute = this.minute();
-        currentMinute = currentMinute <= 0 ? 59 : currentMinute - 1;
-        this.selectMinute(currentMinute, true);
+        this.selectMinute(getWrappedTimeValue(this.minute(), 0, 59, -1), true);
     }
     incrementSecond() {
-        let currentSecond = this.second();
-        currentSecond = currentSecond >= 59 ? 0 : currentSecond + 1;
-        this.selectSecond(currentSecond, true);
+        this.selectSecond(getWrappedTimeValue(this.second(), 0, 59, 1), true);
     }
     decrementSecond() {
-        let currentSecond = this.second();
-        currentSecond = currentSecond <= 0 ? 59 : currentSecond - 1;
-        this.selectSecond(currentSecond, true);
+        this.selectSecond(getWrappedTimeValue(this.second(), 0, 59, -1), true);
     }
     incrementHourEnd() {
-        const maxHour = this.zTimeFormat() === '12h' ? 12 : 23;
-        const minHour = this.zTimeFormat() === '12h' ? 1 : 0;
-        let currentHour = this.displayHourEnd();
-        currentHour = currentHour >= maxHour ? minHour : currentHour + 1;
-        this.selectHourEnd(currentHour, true);
+        this.selectHourEnd(this._getNextHour(this.displayHourEnd()), true);
     }
     decrementHourEnd() {
-        const maxHour = this.zTimeFormat() === '12h' ? 12 : 23;
-        const minHour = this.zTimeFormat() === '12h' ? 1 : 0;
-        let currentHour = this.displayHourEnd();
-        currentHour = currentHour <= minHour ? maxHour : currentHour - 1;
-        this.selectHourEnd(currentHour, true);
+        this.selectHourEnd(this._getPreviousHour(this.displayHourEnd()), true);
     }
     incrementMinuteEnd() {
-        let currentMinute = this._minuteEnd();
-        currentMinute = currentMinute >= 59 ? 0 : currentMinute + 1;
-        this.selectMinuteEnd(currentMinute, true);
+        this.selectMinuteEnd(getWrappedTimeValue(this._minuteEnd(), 0, 59, 1), true);
     }
     decrementMinuteEnd() {
-        let currentMinute = this._minuteEnd();
-        currentMinute = currentMinute <= 0 ? 59 : currentMinute - 1;
-        this.selectMinuteEnd(currentMinute, true);
+        this.selectMinuteEnd(getWrappedTimeValue(this._minuteEnd(), 0, 59, -1), true);
     }
     incrementSecondEnd() {
-        let currentSecond = this._secondEnd();
-        currentSecond = currentSecond >= 59 ? 0 : currentSecond + 1;
-        this.selectSecondEnd(currentSecond, true);
+        this.selectSecondEnd(getWrappedTimeValue(this._secondEnd(), 0, 59, 1), true);
     }
     decrementSecondEnd() {
-        let currentSecond = this._secondEnd();
-        currentSecond = currentSecond <= 0 ? 59 : currentSecond - 1;
-        this.selectSecondEnd(currentSecond, true);
+        this.selectSecondEnd(getWrappedTimeValue(this._secondEnd(), 0, 59, -1), true);
+    }
+    _getNextHour(hour) {
+        const maxHour = this.zTimeFormat() === '12h' ? 12 : 23;
+        const minHour = this.zTimeFormat() === '12h' ? 1 : 0;
+        return getWrappedTimeValue(hour, minHour, maxHour, 1);
+    }
+    _getPreviousHour(hour) {
+        const maxHour = this.zTimeFormat() === '12h' ? 12 : 23;
+        const minHour = this.zTimeFormat() === '12h' ? 1 : 0;
+        return getWrappedTimeValue(hour, minHour, maxHour, -1);
     }
     openTimeDropdown(event) {
         event.stopPropagation();
@@ -3027,15 +2903,7 @@ class ZCalendarComponent {
         this._updateTimeToDate();
     }
     selectHour(hour, shouldScroll = false) {
-        let actualHour = hour;
-        if (this.zTimeFormat() === '12h') {
-            if (this.period() === 'PM' && hour !== 12) {
-                actualHour = hour + 12;
-            }
-            if (this.period() === 'AM' && hour === 12) {
-                actualHour = 0;
-            }
-        }
+        const actualHour = to24Hour(hour, this.period(), this.zTimeFormat());
         this.hour.set(actualHour);
         this._updateTimeToDate();
         this._updateInputDisplayAfterTimeChange();
@@ -3066,15 +2934,7 @@ class ZCalendarComponent {
         this.togglePeriod();
     }
     selectHourEnd(hour, shouldScroll = false) {
-        let actualHour = hour;
-        if (this.zTimeFormat() === '12h') {
-            if (this._periodEnd() === 'PM' && hour !== 12) {
-                actualHour = hour + 12;
-            }
-            if (this._periodEnd() === 'AM' && hour === 12) {
-                actualHour = 0;
-            }
-        }
+        const actualHour = to24Hour(hour, this._periodEnd(), this.zTimeFormat());
         this._hourEnd.set(actualHour);
         this._updateEndTimeToDate();
         this._inputDisplayEnd.set(this.displayValueEnd());
@@ -3131,7 +2991,7 @@ class ZCalendarComponent {
                 multi: true,
             },
             TranslatePipe,
-        ], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }, { propertyName: "inputRef", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }], exportAs: ["zCalendar"], ngImport: i0, template: "<div class=\"z-calendar-wrapper flex w-full flex-col gap-2\">\n  @if (zLabel()) {\n    <label [for]=\"pickerId\" class=\"text-xs leading-none font-medium\" [class]=\"zLabelClass()\">\n      {{ zLabel() }}\n      @if (zRequired()) {\n        <span class=\"text-destructive! ml-0.5\">*</span>\n      }\n    </label>\n  }\n\n  <div class=\"relative\">\n    <div\n      #triggerEl\n      z-popover\n      [zPopoverContent]=\"calendarTpl\"\n      zPosition=\"bottom-left\"\n      zPopoverWidth=\"auto\"\n      [zOffset]=\"6\"\n      [zDisabled]=\"isDisabled() || zReadonly()\"\n      [zManualClose]=\"showCancelButton()\"\n      [zScrollClose]=\"zScrollClose()\"\n      zTrigger=\"click\"\n      zClass=\"border-0 shadow-none p-0\"\n      (zHideStart)=\"onPopoverHide()\"\n      (zShow)=\"onPopoverShow()\"\n      (zControl)=\"onPopoverControl($event)\"\n      [id]=\"pickerId\"\n      [class]=\"triggerClasses()\"\n      (keydown)=\"onTriggerKeydown($event)\">\n      <z-icon\n        [zType]=\"isRangeMode() ? 'lucideCalendarRange' : 'lucideCalendar'\"\n        zSize=\"16\"\n        class=\"text-muted-foreground shrink-0 cursor-pointer\"\n        (click)=\"$event.stopPropagation(); toggle()\" />\n\n      @if (isRangeMode()) {\n        <input\n          type=\"text\"\n          data-range-type=\"start\"\n          class=\"placeholder:text-muted-foreground w-0 min-w-0 flex-1 truncate bg-transparent text-center text-sm outline-none\"\n          [placeholder]=\"'i18n_z_ui_calendar_start_date' | translate\"\n          [value]=\"inputDisplayStart()\"\n          [disabled]=\"isDisabled()\"\n          [readonly]=\"zReadonly()\"\n          (click)=\"isOpen() && $event.stopPropagation()\"\n          (focus)=\"onInputFocus($event)\"\n          (input)=\"onStartInputChange($event)\"\n          (blur)=\"onInputBlur($event)\"\n          (keydown.enter)=\"onStartInputEnter($event)\"\n          (keydown.escape)=\"onStartInputEscape()\" />\n        <span class=\"text-muted-foreground text-sm\">-</span>\n        <input\n          type=\"text\"\n          data-range-type=\"end\"\n          class=\"placeholder:text-muted-foreground w-0 min-w-0 flex-1 truncate bg-transparent text-center text-sm outline-none\"\n          [placeholder]=\"'i18n_z_ui_calendar_end_date' | translate\"\n          [value]=\"inputDisplayEnd()\"\n          [disabled]=\"isDisabled()\"\n          [readonly]=\"zReadonly()\"\n          (click)=\"isOpen() && $event.stopPropagation()\"\n          (focus)=\"onInputFocus($event)\"\n          (input)=\"onEndInputChange($event)\"\n          (blur)=\"onInputBlur($event)\"\n          (keydown.enter)=\"onEndInputEnter($event)\"\n          (keydown.escape)=\"onEndInputEscape()\" />\n      } @else {\n        <input\n          #inputEl\n          type=\"text\"\n          class=\"placeholder:text-muted-foreground w-0 min-w-0 flex-1 truncate bg-transparent text-sm outline-none\"\n          [placeholder]=\"effectivePlaceholder()\"\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-sm transition-all\"\n          [class.opacity-0]=\"!hasValue()\"\n          [class.pointer-events-none]=\"!hasValue()\"\n          (click)=\"onClear($event)\">\n          <z-icon zType=\"lucideX\" zSize=\"18\" />\n        </button>\n      }\n    </div>\n  </div>\n\n  @if (hasError()) {\n    <p class=\"text-destructive animate-in fade-in slide-in-from-top-1 m-0 text-xs duration-200\">\n      {{ errorMessage() }}\n    </p>\n  }\n</div>\n\n<ng-template #calendarTpl>\n  <div\n    class=\"z-calendar-calendar bg-popover border-border flex max-h-[50dvh] max-w-[95vw] flex-col overflow-auto rounded-sm border shadow-lg min-[480px]:max-h-[55dvh] sm:max-h-none sm:max-w-none sm:flex-row sm:overflow-visible\"\n    (keydown)=\"onCalendarKeydown($event)\">\n    @if (zQuickSelect() && zMode() === 'range') {\n      <div\n        class=\"border-border flex shrink-0 flex-row gap-1 overflow-x-auto border-b p-2 sm:flex-col sm:gap-0 sm:space-y-1 sm:overflow-x-visible sm:border-r sm:border-b-0\">\n        @for (preset of quickSelectPresets; track preset.key) {\n          @let presetDisabled = preset | zIsPresetDisabled: zDisabledDate();\n          <button\n            type=\"button\"\n            class=\"cursor-pointer rounded-sm px-3 py-1.5 text-left text-sm whitespace-nowrap transition-colors\"\n            [class.hover:bg-muted]=\"activePresetKey() !== preset.key && !presetDisabled\"\n            [class.bg-primary]=\"activePresetKey() === preset.key\"\n            [class.text-primary-foreground]=\"activePresetKey() === preset.key\"\n            [class.font-medium]=\"activePresetKey() === preset.key\"\n            [class.opacity-40]=\"presetDisabled\"\n            [class.cursor-not-allowed]=\"presetDisabled\"\n            [disabled]=\"presetDisabled\"\n            (click)=\"onQuickSelect(preset)\">\n            {{ preset.label | translate }}\n          </button>\n        }\n      </div>\n    }\n    <div\n      class=\"flex flex-1 flex-col items-center overflow-auto py-2 sm:overflow-visible\"\n      [class]=\"!isRangeMode() ? 'w-[17.5rem]' : ''\">\n      @if (!isTimeMode()) {\n        <div\n          class=\"z-calendars-wrapper flex w-full flex-col items-center gap-3 sm:flex-row sm:items-stretch sm:justify-center sm:gap-0\">\n          <!-- First Calendar -->\n          <div class=\"z-calendar-section flex w-[17.5rem] shrink-0 flex-col\">\n            @if (!isTimeMode()) {\n              <!-- Header -->\n              <div class=\"border-border flex w-full items-center justify-between gap-0.5 px-2\">\n                <!-- Double left arrow (always visible) -->\n                <button\n                  type=\"button\"\n                  z-button\n                  zType=\"ghost\"\n                  zSize=\"sm\"\n                  class=\"size-7 shrink-0 p-0!\"\n                  [zWave]=\"false\"\n                  (click)=\"navigatePreviousFast()\">\n                  <z-icon zType=\"lucideChevronsLeft\" zSize=\"18\" />\n                </button>\n\n                <!-- Single left arrow (hidden in month/year view) -->\n                @if (currentView() === 'day') {\n                  <button\n                    type=\"button\"\n                    z-button\n                    zType=\"ghost\"\n                    zSize=\"sm\"\n                    class=\"size-7 shrink-0 p-0!\"\n                    [zWave]=\"false\"\n                    (click)=\"navigatePrevious()\">\n                    <z-icon zType=\"lucideChevronLeft\" zSize=\"18\" />\n                  </button>\n                }\n\n                <!-- Header content -->\n                <div class=\"flex flex-1 shrink-0 items-center justify-center gap-0\">\n                  @if (currentView() === 'day') {\n                    <!-- Day view: Month + Year -->\n                    @if (!isYearMode() && !isQuarterMode()) {\n                      <button\n                        type=\"button\"\n                        z-button\n                        zType=\"ghost\"\n                        zSize=\"sm\"\n                        class=\"h-7 px-1.5 text-sm!\"\n                        [zWave]=\"false\"\n                        (click)=\"setView('month')\">\n                        {{ currentMonthName() }}\n                      </button>\n                    }\n                    <button\n                      type=\"button\"\n                      z-button\n                      zType=\"ghost\"\n                      zSize=\"sm\"\n                      class=\"h-7 px-1.5 text-sm!\"\n                      [zWave]=\"false\"\n                      [zDisabled]=\"isYearMode()\"\n                      (click)=\"setView('year')\">\n                      {{ currentYear() }}\n                    </button>\n                  } @else if (currentView() === 'month') {\n                    <!-- Month view: Only Year -->\n                    <button\n                      type=\"button\"\n                      z-button\n                      zType=\"ghost\"\n                      zSize=\"sm\"\n                      class=\"h-7 px-1.5 text-sm!\"\n                      [zWave]=\"false\"\n                      (click)=\"setView('year')\">\n                      {{ currentYear() }}\n                    </button>\n                  } @else if (currentView() === 'year') {\n                    <!-- Year view: Year Range -->\n                    <span class=\"text-sm font-medium\">\n                      {{ yearRange()[0] }} - {{ yearRange()[yearRange().length - 1] }}\n                    </span>\n                  } @else if (currentView() === 'quarter') {\n                    <!-- Quarter view: Only Year -->\n                    <button\n                      type=\"button\"\n                      z-button\n                      zType=\"ghost\"\n                      zSize=\"sm\"\n                      class=\"h-7 px-1.5 text-sm!\"\n                      [zWave]=\"false\"\n                      (click)=\"setView('year')\">\n                      {{ currentYear() }}\n                    </button>\n                  }\n                </div>\n\n                <!-- Single right arrow (hidden in month/year view) -->\n                @if (currentView() === 'day') {\n                  <button\n                    type=\"button\"\n                    z-button\n                    zType=\"ghost\"\n                    zSize=\"sm\"\n                    class=\"size-7 shrink-0 p-0!\"\n                    [zDisabled]=\"!canNavigateStartNext()\"\n                    [zWave]=\"false\"\n                    (click)=\"navigateNext()\">\n                    <z-icon zType=\"lucideChevronRight\" zSize=\"18\" />\n                  </button>\n                }\n\n                <!-- Double right arrow (always visible) -->\n                <button\n                  type=\"button\"\n                  z-button\n                  zType=\"ghost\"\n                  zSize=\"sm\"\n                  class=\"size-7 shrink-0 p-0!\"\n                  [zDisabled]=\"!canNavigateStartNext()\"\n                  [zWave]=\"false\"\n                  (click)=\"navigateNextFast()\">\n                  <z-icon zType=\"lucideChevronsRight\" zSize=\"18\" />\n                </button>\n              </div>\n\n              <!-- Body -->\n              <div\n                class=\"flex h-full w-full flex-col items-center justify-center p-2\"\n                [class.min-h-[14rem]]=\"!isQuarterMode()\"\n                [class.h-[14rem]]=\"\n                  !isYearMode() &&\n                  !isMonthMode() &&\n                  !isQuarterMode() &&\n                  (currentView() === 'month' || currentView() === 'year')\n                \"\n                [class.min-h-[6.25rem]]=\"isQuarterMode()\"\n                [class.!min-h-auto]=\"isYearMode() || isMonthMode() || isQuarterMode()\"\n                [class.!h-auto]=\"isYearMode() || isMonthMode() || isQuarterMode()\">\n                @if (currentView() === 'day') {\n                  <div\n                    class=\"flex h-full w-full flex-1 flex-col gap-1\"\n                    [class.animate-calendar-enter]=\"uiState().hasViewChanged\">\n                    <!-- Weekday headers -->\n                    <div class=\"flex w-full flex-1 justify-center gap-1\">\n                      @for (weekday of weekdayNames(); track weekday) {\n                        <div\n                          class=\"text-muted-foreground flex h-[1.875rem] w-[2.0313rem] items-center justify-center text-xs font-medium\">\n                          {{ weekday }}\n                        </div>\n                      }\n                    </div>\n\n                    <!-- Date rows -->\n                    @for (week of calendarDays(); track $index) {\n                      <div class=\"flex w-full flex-1 justify-center gap-1\">\n                        @for (day of week; track day.date.getTime()) {\n                          <button\n                            type=\"button\"\n                            [class]=\"day | zDayClasses\"\n                            class=\"h-[1.875rem] !w-[2.0313rem] !text-sm\"\n                            [disabled]=\"day.isDisabled\"\n                            (click)=\"onDayClick(day)\"\n                            (mouseenter)=\"onDayHover(day)\"\n                            (mouseleave)=\"onDayLeave()\">\n                            {{ day.day }}\n                          </button>\n                        }\n                      </div>\n                    }\n                  </div>\n                }\n                @if (currentView() === 'month') {\n                  <div\n                    class=\"grid h-full w-full grid-cols-3 grid-rows-4 gap-2.5 gap-y-5!\"\n                    [class.animate-calendar-enter]=\"uiState().hasViewChanged\">\n                    @for (month of monthNames(); track month; let i = $index) {\n                      @let monthDisabled = i | zIsStartMonthDisabled: startMonthDisabledContext();\n                      <div class=\"flex flex-1 items-center justify-center\">\n                        <button\n                          type=\"button\"\n                          [class]=\"i | zMonthClasses: selectedMonthIndex() : todayMonthIndex()\"\n                          class=\"!h-7 !w-full !text-sm\"\n                          [disabled]=\"monthDisabled\"\n                          [class.opacity-30]=\"monthDisabled\"\n                          [class.cursor-not-allowed]=\"monthDisabled\"\n                          (click)=\"onMonthSelect(i)\">\n                          {{ month }}\n                        </button>\n                      </div>\n                    }\n                  </div>\n                }\n\n                @if (currentView() === 'year') {\n                  <div\n                    class=\"grid h-full w-full grid-cols-3 grid-rows-4 gap-2.5 gap-y-5!\"\n                    [class.animate-calendar-enter]=\"uiState().hasViewChanged\">\n                    @for (year of yearRange(); track year) {\n                      @let yearDisabled = year | zIsStartYearDisabled: startYearDisabledContext();\n                      <div class=\"flex flex-1 items-center justify-center\">\n                        <button\n                          type=\"button\"\n                          [class]=\"year | zYearClasses: selectedYear() : todayYear()\"\n                          class=\"!h-7 !w-full !text-sm\"\n                          [disabled]=\"yearDisabled\"\n                          [class.opacity-30]=\"yearDisabled\"\n                          [class.cursor-not-allowed]=\"yearDisabled\"\n                          (click)=\"onYearClick(year)\">\n                          {{ year }}\n                        </button>\n                      </div>\n                    }\n                  </div>\n                }\n\n                @if (currentView() === 'quarter') {\n                  <div\n                    class=\"grid h-full w-full grid-cols-2 grid-rows-2 gap-2 p-1\"\n                    [class.animate-calendar-enter]=\"uiState().hasViewChanged\">\n                    @for (quarter of quarterNames; track quarter; let i = $index) {\n                      <div class=\"flex flex-1 items-center justify-center\">\n                        <button\n                          type=\"button\"\n                          [class]=\"i | zQuarterClasses: selectedQuarterIndex() : todayQuarterIndex()\"\n                          class=\"!h-8 !w-full !text-sm\"\n                          (click)=\"onQuarterClick(i)\">\n                          {{ quarter }}\n                        </button>\n                      </div>\n                    }\n                  </div>\n                }\n              </div>\n            }\n          </div>\n\n          <!-- Second Calendar (Range Mode Only) -->\n          @if (isRangeMode()) {\n            <!-- Divider -->\n            <div class=\"border-border bg-border hidden self-stretch sm:block sm:w-px\"></div>\n            <div class=\"border-border bg-border block h-px w-full sm:hidden\"></div>\n\n            <div class=\"z-calendar-section flex w-[17.5rem] shrink-0 flex-col\">\n              <!-- Header -->\n              <div class=\"border-border flex w-full items-center justify-between gap-0.5 px-2\">\n                <button\n                  type=\"button\"\n                  z-button\n                  zType=\"ghost\"\n                  zSize=\"sm\"\n                  class=\"size-7 shrink-0 p-0!\"\n                  [zDisabled]=\"!canNavigateEndPrev()\"\n                  [zWave]=\"false\"\n                  (click)=\"navigateEndPreviousFast()\">\n                  <z-icon zType=\"lucideChevronsLeft\" zSize=\"18\" />\n                </button>\n\n                <button\n                  type=\"button\"\n                  z-button\n                  zType=\"ghost\"\n                  zSize=\"sm\"\n                  class=\"size-7 shrink-0 p-0!\"\n                  [zDisabled]=\"!canNavigateEndPrev()\"\n                  [zWave]=\"false\"\n                  (click)=\"navigateEndPrevious()\">\n                  <z-icon zType=\"lucideChevronLeft\" zSize=\"18\" />\n                </button>\n\n                <div class=\"flex w-[7.5rem] shrink-0 items-center justify-center gap-0\">\n                  <button\n                    type=\"button\"\n                    z-button\n                    zType=\"ghost\"\n                    zSize=\"sm\"\n                    class=\"h-7 px-1.5 text-sm!\"\n                    [zWave]=\"false\"\n                    (click)=\"setEndView('month')\">\n                    {{ endMonthName() }}\n                  </button>\n\n                  <button\n                    type=\"button\"\n                    z-button\n                    zType=\"ghost\"\n                    zSize=\"sm\"\n                    class=\"h-7 px-1.5 text-sm!\"\n                    [zWave]=\"false\"\n                    (click)=\"setEndView('year')\">\n                    {{ endMonthYear() }}\n                  </button>\n                </div>\n\n                <button\n                  type=\"button\"\n                  z-button\n                  zType=\"ghost\"\n                  zSize=\"sm\"\n                  class=\"size-7 shrink-0 p-0!\"\n                  [zWave]=\"false\"\n                  [zWave]=\"false\"\n                  (click)=\"navigateEndNext()\">\n                  <z-icon zType=\"lucideChevronRight\" zSize=\"18\" />\n                </button>\n\n                <button\n                  type=\"button\"\n                  z-button\n                  zType=\"ghost\"\n                  zSize=\"sm\"\n                  class=\"size-7 shrink-0 p-0!\"\n                  [zWave]=\"false\"\n                  [zWave]=\"false\"\n                  (click)=\"navigateEndNextFast()\">\n                  <z-icon zType=\"lucideChevronsRight\" zSize=\"18\" />\n                </button>\n              </div>\n\n              <!-- Body -->\n              <div\n                class=\"flex h-full min-h-[14rem] w-full flex-col items-center justify-center p-2\"\n                [class.h-[14rem]]=\"endView() === 'month' || endView() === 'year'\">\n                @if (endView() === 'day') {\n                  <div\n                    class=\"flex h-full w-full flex-1 flex-col gap-1\"\n                    [class.animate-calendar-enter]=\"uiState().hasEndViewChanged\">\n                    <!-- Weekday headers -->\n                    <div class=\"flex w-full flex-1 justify-center gap-1\">\n                      @for (weekday of weekdayNames(); track weekday) {\n                        <div\n                          class=\"text-muted-foreground flex h-[1.875rem] w-[2.0313rem] items-center justify-center text-xs font-medium\">\n                          {{ weekday }}\n                        </div>\n                      }\n                    </div>\n\n                    <!-- Date rows -->\n                    @for (week of calendarDaysEnd(); track $index) {\n                      <div class=\"flex w-full flex-1 justify-center gap-1\">\n                        @for (day of week; track day.date.getTime()) {\n                          <button\n                            type=\"button\"\n                            [class]=\"day | zDayClasses\"\n                            class=\"h-[1.875rem] !w-[2.0313rem] !text-sm\"\n                            [disabled]=\"day.isDisabled\"\n                            (click)=\"onDayClick(day)\"\n                            (mouseenter)=\"onDayHover(day)\"\n                            (mouseleave)=\"onDayLeave()\">\n                            {{ day.day }}\n                          </button>\n                        }\n                      </div>\n                    }\n                  </div>\n                }\n                @if (endView() === 'month') {\n                  <div\n                    class=\"grid h-full w-full grid-cols-3 grid-rows-4 gap-2.5 gap-y-5!\"\n                    [class.animate-calendar-enter]=\"uiState().hasEndViewChanged\">\n                    @for (month of monthNames(); track month; let i = $index) {\n                      @let endMonthDisabled = i | zIsEndMonthDisabled: endMonthDisabledContext();\n                      <div class=\"flex flex-1 items-center justify-center\">\n                        <button\n                          type=\"button\"\n                          [class]=\"i | zMonthClasses: endMonth().getMonth() : -1\"\n                          class=\"!h-7 !w-full !text-sm\"\n                          [disabled]=\"endMonthDisabled\"\n                          [class.opacity-30]=\"endMonthDisabled\"\n                          [class.cursor-not-allowed]=\"endMonthDisabled\"\n                          (click)=\"onEndMonthClick(i)\">\n                          {{ month }}\n                        </button>\n                      </div>\n                    }\n                  </div>\n                }\n\n                @if (endView() === 'year') {\n                  <div\n                    class=\"grid h-full w-full grid-cols-3 grid-rows-4 gap-2.5 gap-y-5!\"\n                    [class.animate-calendar-enter]=\"uiState().hasEndViewChanged\">\n                    @for (year of endYearRange(); track year) {\n                      @let endYearDisabled = year | zIsEndYearDisabled: endYearDisabledContext();\n                      <div class=\"flex flex-1 items-center justify-center\">\n                        <button\n                          type=\"button\"\n                          [class]=\"year | zYearClasses: endMonth().getFullYear() : -1\"\n                          class=\"!h-7 !w-full !text-sm\"\n                          [disabled]=\"endYearDisabled\"\n                          [class.opacity-30]=\"endYearDisabled\"\n                          [class.cursor-not-allowed]=\"endYearDisabled\"\n                          (click)=\"onEndYearClick(year)\">\n                          {{ year }}\n                        </button>\n                      </div>\n                    }\n                  </div>\n                }\n              </div>\n            </div>\n          }\n        </div>\n\n        <!-- Compact Time Picker Below Calendar (Single Date) -->\n        @if (!isRangeMode() && zShowTime()) {\n          <div class=\"border-border w-full border-t text-center\">\n            <div\n              class=\"hover:bg-muted my-1 inline-flex cursor-pointer items-center rounded-sm px-2 py-1 transition-colors\"\n              z-popover\n              [zPopoverContent]=\"timeDropdownTpl\"\n              zPosition=\"bottom\"\n              zPopoverWidth=\"auto\"\n              [zOffset]=\"4\"\n              zTrigger=\"click\"\n              zClass=\"border-border shadow-md\"\n              (zShow)=\"onTimeDropdownShow()\">\n              <div class=\"flex items-center justify-center gap-1\">\n                <!-- Hour -->\n                @if (zShowHour()) {\n                  <div\n                    class=\"hover:bg-muted/50 flex min-w-7 cursor-pointer flex-col items-center gap-0 rounded-sm px-1 transition-colors\">\n                    <button\n                      type=\"button\"\n                      class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mb-0.5 flex h-4 w-full cursor-pointer items-center justify-center rounded-sm border-none bg-transparent transition-colors\"\n                      (click)=\"decrementHour(); $event.stopPropagation()\">\n                      <z-icon zType=\"lucideChevronUp\" zSize=\"18\" />\n                    </button>\n                    <span class=\"text-foreground min-w-5 text-center text-sm leading-tight font-medium select-none\">\n                      {{ formattedHour() }}\n                    </span>\n                    <button\n                      type=\"button\"\n                      class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mt-0.5 flex h-4 w-full cursor-pointer items-center justify-center rounded-sm border-none bg-transparent transition-colors\"\n                      (click)=\"incrementHour(); $event.stopPropagation()\">\n                      <z-icon zType=\"lucideChevronDown\" zSize=\"18\" />\n                    </button>\n                  </div>\n                }\n                @if (zShowHour() && zShowMinute()) {\n                  <span class=\"text-muted-foreground text-sm font-medium\">:</span>\n                }\n                <!-- Minute -->\n                @if (zShowMinute()) {\n                  <div\n                    class=\"hover:bg-muted/50 flex min-w-7 cursor-pointer flex-col items-center gap-0 rounded-sm px-1 transition-colors\">\n                    <button\n                      type=\"button\"\n                      class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mb-0.5 flex h-4 w-full cursor-pointer items-center justify-center rounded-sm border-none bg-transparent transition-colors\"\n                      (click)=\"decrementMinute(); $event.stopPropagation()\">\n                      <z-icon zType=\"lucideChevronUp\" zSize=\"18\" />\n                    </button>\n                    <span class=\"text-foreground min-w-5 text-center text-sm leading-tight font-medium select-none\">\n                      {{ formattedMinute() }}\n                    </span>\n                    <button\n                      type=\"button\"\n                      class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mt-0.5 flex h-4 w-full cursor-pointer items-center justify-center rounded-sm border-none bg-transparent transition-colors\"\n                      (click)=\"incrementMinute(); $event.stopPropagation()\">\n                      <z-icon zType=\"lucideChevronDown\" zSize=\"18\" />\n                    </button>\n                  </div>\n                }\n                @if (zShowMinute() && zShowSecond()) {\n                  <span class=\"text-muted-foreground text-sm font-medium\">:</span>\n                }\n                <!-- Second -->\n                @if (zShowSecond()) {\n                  <div\n                    class=\"hover:bg-muted/50 flex min-w-7 cursor-pointer flex-col items-center gap-0 rounded-sm px-1 transition-colors\">\n                    <button\n                      type=\"button\"\n                      class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mb-0.5 flex h-4 w-full cursor-pointer items-center justify-center rounded-sm border-none bg-transparent transition-colors\"\n                      (click)=\"decrementSecond(); $event.stopPropagation()\">\n                      <z-icon zType=\"lucideChevronUp\" zSize=\"18\" />\n                    </button>\n                    <span class=\"text-foreground min-w-5 text-center text-sm leading-tight font-medium select-none\">\n                      {{ formattedSecond() }}\n                    </span>\n                    <button\n                      type=\"button\"\n                      class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mt-0.5 flex h-4 w-full cursor-pointer items-center justify-center rounded-sm border-none bg-transparent transition-colors\"\n                      (click)=\"incrementSecond(); $event.stopPropagation()\">\n                      <z-icon zType=\"lucideChevronDown\" zSize=\"18\" />\n                    </button>\n                  </div>\n                }\n                <!-- AM/PM Toggle -->\n                @if (zTimeFormat() === '12h') {\n                  <button\n                    type=\"button\"\n                    class=\"bg-primary/10 text-primary hover:bg-primary/20 active:bg-primary/30 ml-1 flex w-8 cursor-pointer items-center justify-center rounded-sm border-none px-2 py-1 text-xs font-semibold transition-colors\"\n                    (click)=\"togglePeriod(); $event.stopPropagation()\">\n                    {{ period() }}\n                  </button>\n                }\n              </div>\n            </div>\n          </div>\n        }\n\n        <!-- Compact Time Pickers Below Calendars (Range Mode) -->\n        @if (isRangeMode() && zShowTime()) {\n          <div class=\"border-border flex w-full flex-col border-t sm:flex-row\">\n            <!-- Start Time -->\n            <div class=\"flex w-full flex-col items-center justify-center gap-1\">\n              <div\n                class=\"hover:bg-muted my-1 inline-flex cursor-pointer items-center rounded-sm px-2 py-1 transition-colors\"\n                z-popover\n                [zPopoverContent]=\"timeDropdownStartTpl\"\n                zPosition=\"bottom\"\n                zPopoverWidth=\"auto\"\n                [zOffset]=\"4\"\n                zTrigger=\"click\"\n                zClass=\"border-border shadow-md\"\n                (zShow)=\"onTimeDropdownShow()\">\n                <div class=\"flex items-center justify-center gap-1\">\n                  <!-- Hour -->\n                  @if (zShowHour()) {\n                    <div\n                      class=\"hover:bg-muted/50 flex min-w-7 cursor-pointer flex-col items-center gap-0 rounded-sm px-1 transition-colors\">\n                      <button\n                        type=\"button\"\n                        class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mb-0.5 flex h-4 w-full cursor-pointer items-center justify-center rounded-sm border-none bg-transparent transition-colors\"\n                        (click)=\"decrementHour(); $event.stopPropagation()\">\n                        <z-icon zType=\"lucideChevronUp\" zSize=\"18\" />\n                      </button>\n                      <span class=\"text-foreground min-w-5 text-center text-sm leading-tight font-medium select-none\">\n                        {{ formattedHour() }}\n                      </span>\n                      <button\n                        type=\"button\"\n                        class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mt-0.5 flex h-4 w-full cursor-pointer items-center justify-center rounded-sm border-none bg-transparent transition-colors\"\n                        (click)=\"incrementHour(); $event.stopPropagation()\">\n                        <z-icon zType=\"lucideChevronDown\" zSize=\"18\" />\n                      </button>\n                    </div>\n                  }\n                  @if (zShowHour() && zShowMinute()) {\n                    <span class=\"text-muted-foreground text-sm font-medium\">:</span>\n                  }\n                  <!-- Minute -->\n                  @if (zShowMinute()) {\n                    <div\n                      class=\"hover:bg-muted/50 flex min-w-7 cursor-pointer flex-col items-center gap-0 rounded-sm px-1 transition-colors\">\n                      <button\n                        type=\"button\"\n                        class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mb-0.5 flex h-4 w-full cursor-pointer items-center justify-center rounded-sm border-none bg-transparent transition-colors\"\n                        (click)=\"decrementMinute(); $event.stopPropagation()\">\n                        <z-icon zType=\"lucideChevronUp\" zSize=\"18\" />\n                      </button>\n                      <span class=\"text-foreground min-w-5 text-center text-sm leading-tight font-medium select-none\">\n                        {{ formattedMinute() }}\n                      </span>\n                      <button\n                        type=\"button\"\n                        class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mt-0.5 flex h-4 w-full cursor-pointer items-center justify-center rounded-sm border-none bg-transparent transition-colors\"\n                        (click)=\"incrementMinute(); $event.stopPropagation()\">\n                        <z-icon zType=\"lucideChevronDown\" zSize=\"18\" />\n                      </button>\n                    </div>\n                  }\n                  @if (zShowMinute() && zShowSecond()) {\n                    <span class=\"text-muted-foreground text-sm font-medium\">:</span>\n                  }\n                  <!-- Second -->\n                  @if (zShowSecond()) {\n                    <div\n                      class=\"hover:bg-muted/50 flex min-w-7 cursor-pointer flex-col items-center gap-0 rounded-sm px-1 transition-colors\">\n                      <button\n                        type=\"button\"\n                        class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mb-0.5 flex h-4 w-full cursor-pointer items-center justify-center rounded-sm border-none bg-transparent transition-colors\"\n                        (click)=\"decrementSecond(); $event.stopPropagation()\">\n                        <z-icon zType=\"lucideChevronUp\" zSize=\"18\" />\n                      </button>\n                      <span class=\"text-foreground min-w-5 text-center text-sm leading-tight font-medium select-none\">\n                        {{ formattedSecond() }}\n                      </span>\n                      <button\n                        type=\"button\"\n                        class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mt-0.5 flex h-4 w-full cursor-pointer items-center justify-center rounded-sm border-none bg-transparent transition-colors\"\n                        (click)=\"incrementSecond(); $event.stopPropagation()\">\n                        <z-icon zType=\"lucideChevronDown\" zSize=\"18\" />\n                      </button>\n                    </div>\n                  }\n                  <!-- AM/PM Toggle -->\n                  @if (zTimeFormat() === '12h') {\n                    <button\n                      type=\"button\"\n                      class=\"bg-primary/10 text-primary hover:bg-primary/20 active:bg-primary/30 ml-1 flex w-8 cursor-pointer items-center justify-center rounded-sm border-none px-2 py-1 text-xs font-semibold transition-colors\"\n                      (click)=\"togglePeriod(); $event.stopPropagation()\">\n                      {{ period() }}\n                    </button>\n                  }\n                </div>\n              </div>\n            </div>\n\n            <!-- Divider space -->\n            <div class=\"border-border bg-border h-px self-stretch sm:block sm:h-full sm:w-px\"></div>\n\n            <!-- End Time -->\n            <div class=\"flex w-full flex-col items-center justify-center gap-1\">\n              <div\n                class=\"hover:bg-muted my-1 inline-flex cursor-pointer items-center rounded-sm px-2 py-1 transition-colors\"\n                z-popover\n                [zPopoverContent]=\"timeDropdownEndTpl\"\n                zPosition=\"bottom\"\n                zPopoverWidth=\"auto\"\n                [zOffset]=\"4\"\n                zTrigger=\"click\"\n                zClass=\"border-border shadow-md\"\n                (zShow)=\"onTimeDropdownEndShow()\">\n                <div class=\"flex items-center justify-center gap-1\">\n                  <!-- Hour -->\n                  @if (zShowHour()) {\n                    <div\n                      class=\"hover:bg-muted/50 flex min-w-7 cursor-pointer flex-col items-center gap-0 rounded-sm px-1 transition-colors\">\n                      <button\n                        type=\"button\"\n                        class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mb-0.5 flex h-4 w-full cursor-pointer items-center justify-center rounded-sm border-none bg-transparent transition-colors\"\n                        (click)=\"decrementHourEnd(); $event.stopPropagation()\">\n                        <z-icon zType=\"lucideChevronUp\" zSize=\"18\" />\n                      </button>\n                      <span class=\"text-foreground min-w-5 text-center text-sm leading-tight font-medium select-none\">\n                        {{ formattedHourEnd() }}\n                      </span>\n                      <button\n                        type=\"button\"\n                        class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mt-0.5 flex h-4 w-full cursor-pointer items-center justify-center rounded-sm border-none bg-transparent transition-colors\"\n                        (click)=\"incrementHourEnd(); $event.stopPropagation()\">\n                        <z-icon zType=\"lucideChevronDown\" zSize=\"18\" />\n                      </button>\n                    </div>\n                  }\n                  @if (zShowHour() && zShowMinute()) {\n                    <span class=\"text-muted-foreground text-sm font-medium\">:</span>\n                  }\n                  <!-- Minute -->\n                  @if (zShowMinute()) {\n                    <div\n                      class=\"hover:bg-muted/50 flex min-w-7 cursor-pointer flex-col items-center gap-0 rounded-sm px-1 transition-colors\">\n                      <button\n                        type=\"button\"\n                        class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mb-0.5 flex h-4 w-full cursor-pointer items-center justify-center rounded-sm border-none bg-transparent transition-colors\"\n                        (click)=\"decrementMinuteEnd(); $event.stopPropagation()\">\n                        <z-icon zType=\"lucideChevronUp\" zSize=\"18\" />\n                      </button>\n                      <span class=\"text-foreground min-w-5 text-center text-sm leading-tight font-medium select-none\">\n                        {{ formattedMinuteEnd() }}\n                      </span>\n                      <button\n                        type=\"button\"\n                        class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mt-0.5 flex h-4 w-full cursor-pointer items-center justify-center rounded-sm border-none bg-transparent transition-colors\"\n                        (click)=\"incrementMinuteEnd(); $event.stopPropagation()\">\n                        <z-icon zType=\"lucideChevronDown\" zSize=\"18\" />\n                      </button>\n                    </div>\n                  }\n                  @if (zShowMinute() && zShowSecond()) {\n                    <span class=\"text-muted-foreground text-sm font-medium\">:</span>\n                  }\n                  <!-- Second -->\n                  @if (zShowSecond()) {\n                    <div\n                      class=\"hover:bg-muted/50 flex min-w-7 cursor-pointer flex-col items-center gap-0 rounded-sm px-1 transition-colors\">\n                      <button\n                        type=\"button\"\n                        class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mb-0.5 flex h-4 w-full cursor-pointer items-center justify-center rounded-sm border-none bg-transparent transition-colors\"\n                        (click)=\"decrementSecondEnd(); $event.stopPropagation()\">\n                        <z-icon zType=\"lucideChevronUp\" zSize=\"18\" />\n                      </button>\n                      <span class=\"text-foreground min-w-5 text-center text-sm leading-tight font-medium select-none\">\n                        {{ formattedSecondEnd() }}\n                      </span>\n                      <button\n                        type=\"button\"\n                        class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mt-0.5 flex h-4 w-full cursor-pointer items-center justify-center rounded-sm border-none bg-transparent transition-colors\"\n                        (click)=\"incrementSecondEnd(); $event.stopPropagation()\">\n                        <z-icon zType=\"lucideChevronDown\" zSize=\"18\" />\n                      </button>\n                    </div>\n                  }\n                  <!-- AM/PM Toggle -->\n                  @if (zTimeFormat() === '12h') {\n                    <button\n                      type=\"button\"\n                      class=\"bg-primary/10 text-primary hover:bg-primary/20 active:bg-primary/30 ml-1 flex w-8 cursor-pointer items-center justify-center rounded-sm border-none px-2 py-1 text-xs font-semibold transition-colors\"\n                      (click)=\"togglePeriodEnd(); $event.stopPropagation()\">\n                      {{ periodEnd() }}\n                    </button>\n                  }\n                </div>\n              </div>\n            </div>\n          </div>\n        }\n      } @else {\n        <!-- Time Only Mode - Compact Display -->\n        <div class=\"flex flex-col items-center gap-3 pb-2\">\n          <div\n            class=\"hover:bg-muted inline-flex cursor-pointer items-center rounded-sm px-3 py-2 transition-colors\"\n            z-popover\n            [zPopoverContent]=\"timeDropdownTpl\"\n            zPosition=\"bottom\"\n            zPopoverWidth=\"auto\"\n            [zOffset]=\"4\"\n            zTrigger=\"click\"\n            zClass=\"border-border shadow-md\"\n            (zShow)=\"onTimeDropdownShow()\">\n            <div class=\"flex items-center justify-center gap-1.5\">\n              <!-- Hour -->\n              @if (zShowHour()) {\n                <div\n                  class=\"hover:bg-muted/50 flex min-w-9 cursor-pointer flex-col items-center gap-0 rounded-sm px-1.5 transition-colors\">\n                  <button\n                    type=\"button\"\n                    class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mb-1 flex h-5 w-full cursor-pointer items-center justify-center rounded-sm border-none bg-transparent transition-colors\"\n                    (click)=\"decrementHour(); $event.stopPropagation()\">\n                    <z-icon zType=\"lucideChevronUp\" zSize=\"16\" />\n                  </button>\n                  <span class=\"text-foreground min-w-6 text-center text-base leading-tight font-medium select-none\">\n                    {{ formattedHour() }}\n                  </span>\n                  <button\n                    type=\"button\"\n                    class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mt-1 flex h-5 w-full cursor-pointer items-center justify-center rounded-sm border-none bg-transparent transition-colors\"\n                    (click)=\"incrementHour(); $event.stopPropagation()\">\n                    <z-icon zType=\"lucideChevronDown\" zSize=\"16\" />\n                  </button>\n                </div>\n              }\n              @if (zShowHour() && zShowMinute()) {\n                <span class=\"text-muted-foreground text-base font-medium\">:</span>\n              }\n              <!-- Minute -->\n              @if (zShowMinute()) {\n                <div\n                  class=\"hover:bg-muted/50 flex min-w-9 cursor-pointer flex-col items-center gap-0 rounded-sm px-1.5 transition-colors\">\n                  <button\n                    type=\"button\"\n                    class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mb-1 flex h-5 w-full cursor-pointer items-center justify-center rounded-sm border-none bg-transparent transition-colors\"\n                    (click)=\"decrementMinute(); $event.stopPropagation()\">\n                    <z-icon zType=\"lucideChevronUp\" zSize=\"16\" />\n                  </button>\n                  <span class=\"text-foreground min-w-6 text-center text-base leading-tight font-medium select-none\">\n                    {{ formattedMinute() }}\n                  </span>\n                  <button\n                    type=\"button\"\n                    class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mt-1 flex h-5 w-full cursor-pointer items-center justify-center rounded-sm border-none bg-transparent transition-colors\"\n                    (click)=\"incrementMinute(); $event.stopPropagation()\">\n                    <z-icon zType=\"lucideChevronDown\" zSize=\"16\" />\n                  </button>\n                </div>\n              }\n              @if (zShowMinute() && zShowSecond()) {\n                <span class=\"text-muted-foreground text-base font-medium\">:</span>\n              }\n              <!-- Second -->\n              @if (zShowSecond()) {\n                <div\n                  class=\"hover:bg-muted/50 flex min-w-9 cursor-pointer flex-col items-center gap-0 rounded-sm px-1.5 transition-colors\">\n                  <button\n                    type=\"button\"\n                    class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mb-1 flex h-5 w-full cursor-pointer items-center justify-center rounded-sm border-none bg-transparent transition-colors\"\n                    (click)=\"decrementSecond(); $event.stopPropagation()\">\n                    <z-icon zType=\"lucideChevronUp\" zSize=\"16\" />\n                  </button>\n                  <span class=\"text-foreground min-w-6 text-center text-base leading-tight font-medium select-none\">\n                    {{ formattedSecond() }}\n                  </span>\n                  <button\n                    type=\"button\"\n                    class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mt-1 flex h-5 w-full cursor-pointer items-center justify-center rounded-sm border-none bg-transparent transition-colors\"\n                    (click)=\"incrementSecond(); $event.stopPropagation()\">\n                    <z-icon zType=\"lucideChevronDown\" zSize=\"16\" />\n                  </button>\n                </div>\n              }\n              <!-- AM/PM Toggle -->\n              @if (zTimeFormat() === '12h') {\n                <button\n                  type=\"button\"\n                  class=\"bg-primary/10 text-primary hover:bg-primary/20 active:bg-primary/30 ml-1 flex w-10 cursor-pointer items-center justify-center rounded-sm border-none px-2.5 py-1.5 text-sm font-semibold transition-colors\"\n                  (click)=\"togglePeriod(); $event.stopPropagation()\">\n                  {{ period() }}\n                </button>\n              }\n            </div>\n          </div>\n        </div>\n      }\n\n      @if (!(zQuickSelect() && zMode() === 'range' && !showOkButton() && !showCancelButton())) {\n        <div class=\"border-border flex w-full items-center justify-between gap-2 border-t px-2 pt-2\">\n          @if (!zQuickSelect() || zMode() !== 'range') {\n            <button type=\"button\" z-button zType=\"secondary\" zSize=\"sm\" [zWave]=\"false\" (click)=\"onTodayClick()\">\n              {{ todayButtonText() }}\n            </button>\n          } @else {\n            <div></div>\n          }\n\n          @if (showOkButton() || showCancelButton()) {\n            <div class=\"flex items-center gap-2\">\n              @if (showCancelButton()) {\n                <button type=\"button\" z-button zType=\"outline\" zSize=\"sm\" (click)=\"onCancelClick()\">\n                  {{ zCancelText() ?? ('i18n_z_ui_calendar_cancel' | translate) }}\n                </button>\n              }\n              @if (showOkButton()) {\n                <button type=\"button\" z-button zSize=\"sm\" [zDisabled]=\"!canApply()\" (click)=\"onOkClick()\">\n                  {{ zOkText() ?? ('i18n_z_ui_calendar_ok' | translate) }}\n                </button>\n              }\n            </div>\n          }\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #timeDropdownTpl>\n  <div class=\"bg-popover flex overflow-hidden rounded-sm\">\n    @if (zShowHour()) {\n      <div\n        class=\"flex flex-col\"\n        [class.border-r]=\"zShowMinute() || zShowSecond()\"\n        [class.border-border]=\"zShowMinute() || zShowSecond()\">\n        <ng-scrollbar\n          class=\"z-time-scroll-hour h-[12.5rem] w-12\"\n          [class.rounded-sm]=\"!zShowMinute() && !zShowSecond()\"\n          [class.rounded-l-sm]=\"zShowMinute() || zShowSecond()\"\n          track=\"vertical\">\n          <div class=\"flex flex-col\">\n            @for (hr of hourOptions(); track hr) {\n              @let hrSelected = hr | zIsTimeSelected: displayHour();\n              <button\n                type=\"button\"\n                class=\"flex h-7 shrink-0 cursor-pointer items-center justify-center text-sm transition-colors\"\n                [class.hover:bg-muted]=\"!hrSelected\"\n                [class.bg-primary]=\"hrSelected\"\n                [class.text-primary-foreground]=\"hrSelected\"\n                [class.font-medium]=\"hrSelected\"\n                (click)=\"selectHour(hr)\">\n                {{ hr | number: '2.0-0' }}\n              </button>\n            }\n          </div>\n        </ng-scrollbar>\n      </div>\n    }\n    @if (zShowMinute()) {\n      <div class=\"flex flex-col\" [class.border-r]=\"zShowSecond()\" [class.border-border]=\"zShowSecond()\">\n        <ng-scrollbar\n          class=\"z-time-scroll-minute h-[12.5rem] w-12\"\n          [class.rounded-sm]=\"!zShowHour() && !zShowSecond()\"\n          [class.rounded-l-sm]=\"!zShowHour() && zShowSecond()\"\n          [class.rounded-r-sm]=\"zShowHour() && !zShowSecond()\"\n          track=\"vertical\">\n          <div class=\"flex flex-col\">\n            @for (min of minuteOptions; track min) {\n              @let minSelected = min | zIsTimeSelected: minute();\n              <button\n                type=\"button\"\n                class=\"flex h-7 shrink-0 cursor-pointer items-center justify-center text-sm transition-colors\"\n                [class.hover:bg-muted]=\"!minSelected\"\n                [class.bg-primary]=\"minSelected\"\n                [class.text-primary-foreground]=\"minSelected\"\n                [class.font-medium]=\"minSelected\"\n                (click)=\"selectMinute(min)\">\n                {{ min | number: '2.0-0' }}\n              </button>\n            }\n          </div>\n        </ng-scrollbar>\n      </div>\n    }\n    @if (zShowSecond()) {\n      <div class=\"flex flex-col\">\n        <ng-scrollbar\n          class=\"z-time-scroll-second h-[12.5rem] w-12\"\n          [class.rounded-sm]=\"!zShowHour() && !zShowMinute()\"\n          [class.rounded-r-sm]=\"zShowHour() || zShowMinute()\"\n          track=\"vertical\">\n          <div class=\"flex flex-col\">\n            @for (sec of secondOptions; track sec) {\n              @let secSelected = sec | zIsTimeSelected: second();\n              <button\n                type=\"button\"\n                class=\"flex h-7 shrink-0 cursor-pointer items-center justify-center text-sm transition-colors\"\n                [class.hover:bg-muted]=\"!secSelected\"\n                [class.bg-primary]=\"secSelected\"\n                [class.text-primary-foreground]=\"secSelected\"\n                [class.font-medium]=\"secSelected\"\n                (click)=\"selectSecond(sec)\">\n                {{ sec | number: '2.0-0' }}\n              </button>\n            }\n          </div>\n        </ng-scrollbar>\n      </div>\n    }\n  </div>\n</ng-template>\n\n<ng-template #timeDropdownStartTpl>\n  <div class=\"bg-popover flex overflow-hidden rounded-sm\">\n    @if (zShowHour()) {\n      <div\n        class=\"flex flex-col\"\n        [class.border-r]=\"zShowMinute() || zShowSecond()\"\n        [class.border-border]=\"zShowMinute() || zShowSecond()\">\n        <ng-scrollbar\n          class=\"z-time-scroll-hour h-[12.5rem] w-12\"\n          [class.rounded-sm]=\"!zShowMinute() && !zShowSecond()\"\n          [class.rounded-l-sm]=\"zShowMinute() || zShowSecond()\"\n          track=\"vertical\">\n          <div class=\"flex flex-col\">\n            @for (hr of hourOptions(); track hr) {\n              @let hrSelected = hr | zIsTimeSelected: displayHour();\n              <button\n                type=\"button\"\n                class=\"flex h-7 shrink-0 cursor-pointer items-center justify-center text-sm transition-colors\"\n                [class.hover:bg-muted]=\"!hrSelected\"\n                [class.bg-primary]=\"hrSelected\"\n                [class.text-primary-foreground]=\"hrSelected\"\n                [class.font-medium]=\"hrSelected\"\n                (click)=\"selectHour(hr)\">\n                {{ hr | number: '2.0-0' }}\n              </button>\n            }\n          </div>\n        </ng-scrollbar>\n      </div>\n    }\n    @if (zShowMinute()) {\n      <div class=\"flex flex-col\" [class.border-r]=\"zShowSecond()\" [class.border-border]=\"zShowSecond()\">\n        <ng-scrollbar\n          class=\"z-time-scroll-minute h-[12.5rem] w-12\"\n          [class.rounded-sm]=\"!zShowHour() && !zShowSecond()\"\n          [class.rounded-l-sm]=\"!zShowHour() && zShowSecond()\"\n          [class.rounded-r-sm]=\"zShowHour() && !zShowSecond()\"\n          track=\"vertical\">\n          <div class=\"flex flex-col\">\n            @for (min of minuteOptions; track min) {\n              @let minSelected = min | zIsTimeSelected: minute();\n              <button\n                type=\"button\"\n                class=\"flex h-7 shrink-0 cursor-pointer items-center justify-center text-sm transition-colors\"\n                [class.hover:bg-muted]=\"!minSelected\"\n                [class.bg-primary]=\"minSelected\"\n                [class.text-primary-foreground]=\"minSelected\"\n                [class.font-medium]=\"minSelected\"\n                (click)=\"selectMinute(min)\">\n                {{ min | number: '2.0-0' }}\n              </button>\n            }\n          </div>\n        </ng-scrollbar>\n      </div>\n    }\n    @if (zShowSecond()) {\n      <div class=\"flex flex-col\">\n        <ng-scrollbar\n          class=\"z-time-scroll-second h-[12.5rem] w-12\"\n          [class.rounded-sm]=\"!zShowHour() && !zShowMinute()\"\n          [class.rounded-r-sm]=\"zShowHour() || zShowMinute()\"\n          track=\"vertical\">\n          <div class=\"flex flex-col\">\n            @for (sec of secondOptions; track sec) {\n              @let secSelected = sec | zIsTimeSelected: second();\n              <button\n                type=\"button\"\n                class=\"flex h-7 shrink-0 cursor-pointer items-center justify-center text-sm transition-colors\"\n                [class.hover:bg-muted]=\"!secSelected\"\n                [class.bg-primary]=\"secSelected\"\n                [class.text-primary-foreground]=\"secSelected\"\n                [class.font-medium]=\"secSelected\"\n                (click)=\"selectSecond(sec)\">\n                {{ sec | number: '2.0-0' }}\n              </button>\n            }\n          </div>\n        </ng-scrollbar>\n      </div>\n    }\n  </div>\n</ng-template>\n\n<ng-template #timeDropdownEndTpl>\n  <div class=\"bg-popover flex overflow-hidden rounded-sm\">\n    @if (zShowHour()) {\n      <div\n        class=\"flex flex-col\"\n        [class.border-r]=\"zShowMinute() || zShowSecond()\"\n        [class.border-border]=\"zShowMinute() || zShowSecond()\">\n        <ng-scrollbar\n          class=\"z-time-scroll-hour-end h-[12.5rem] w-12\"\n          [class.rounded-sm]=\"!zShowMinute() && !zShowSecond()\"\n          [class.rounded-l-sm]=\"zShowMinute() || zShowSecond()\"\n          track=\"vertical\">\n          <div class=\"flex flex-col\">\n            @for (hr of hourOptions(); track hr) {\n              @let hrDisabled = hr | zIsEndHourDisabled: endTimeContext();\n              @let hrEndSelected = hr | zIsTimeSelected: displayHourEnd();\n              <button\n                type=\"button\"\n                class=\"flex h-7 shrink-0 items-center justify-center text-sm transition-colors\"\n                [class.hover:bg-muted]=\"!hrDisabled && !hrEndSelected\"\n                [class.cursor-pointer]=\"!hrDisabled\"\n                [class.bg-primary]=\"hrEndSelected\"\n                [class.text-primary-foreground]=\"hrEndSelected\"\n                [class.font-medium]=\"hrEndSelected\"\n                [class.opacity-30]=\"hrDisabled\"\n                [class.cursor-not-allowed]=\"hrDisabled\"\n                [disabled]=\"hrDisabled\"\n                (click)=\"selectHourEnd(hr)\">\n                {{ hr | number: '2.0-0' }}\n              </button>\n            }\n          </div>\n        </ng-scrollbar>\n      </div>\n    }\n    @if (zShowMinute()) {\n      <div class=\"flex flex-col\" [class.border-r]=\"zShowSecond()\" [class.border-border]=\"zShowSecond()\">\n        <ng-scrollbar\n          class=\"z-time-scroll-minute-end h-[12.5rem] w-12\"\n          [class.rounded-sm]=\"!zShowHour() && !zShowSecond()\"\n          [class.rounded-l-sm]=\"!zShowHour() && zShowSecond()\"\n          [class.rounded-r-sm]=\"zShowHour() && !zShowSecond()\"\n          track=\"vertical\">\n          <div class=\"flex flex-col\">\n            @for (min of minuteOptions; track min) {\n              @let minDisabled = min | zIsEndMinuteDisabled: endTimeContext();\n              @let minEndSelected = min | zIsTimeSelected: minuteEnd();\n              <button\n                type=\"button\"\n                class=\"flex h-7 shrink-0 items-center justify-center text-sm transition-colors\"\n                [class.hover:bg-muted]=\"!minDisabled && !minEndSelected\"\n                [class.cursor-pointer]=\"!minDisabled\"\n                [class.bg-primary]=\"minEndSelected\"\n                [class.text-primary-foreground]=\"minEndSelected\"\n                [class.font-medium]=\"minEndSelected\"\n                [class.opacity-30]=\"minDisabled\"\n                [class.cursor-not-allowed]=\"minDisabled\"\n                [disabled]=\"minDisabled\"\n                (click)=\"selectMinuteEnd(min)\">\n                {{ min | number: '2.0-0' }}\n              </button>\n            }\n          </div>\n        </ng-scrollbar>\n      </div>\n    }\n    @if (zShowSecond()) {\n      <div class=\"flex flex-col\">\n        <ng-scrollbar\n          class=\"z-time-scroll-second-end h-[12.5rem] w-12\"\n          [class.rounded-sm]=\"!zShowHour() && !zShowMinute()\"\n          [class.rounded-r-sm]=\"zShowHour() || zShowMinute()\"\n          track=\"vertical\">\n          <div class=\"flex flex-col\">\n            @for (sec of secondOptions; track sec) {\n              @let secDisabled = sec | zIsEndSecondDisabled: endTimeContext();\n              @let secEndSelected = sec | zIsTimeSelected: secondEnd();\n              <button\n                type=\"button\"\n                class=\"flex h-7 shrink-0 items-center justify-center text-sm transition-colors\"\n                [class.hover:bg-muted]=\"!secDisabled && !secEndSelected\"\n                [class.cursor-pointer]=\"!secDisabled\"\n                [class.bg-primary]=\"secEndSelected\"\n                [class.text-primary-foreground]=\"secEndSelected\"\n                [class.font-medium]=\"secEndSelected\"\n                [class.opacity-30]=\"secDisabled\"\n                [class.cursor-not-allowed]=\"secDisabled\"\n                [disabled]=\"secDisabled\"\n                (click)=\"selectSecondEnd(sec)\">\n                {{ sec | number: '2.0-0' }}\n              </button>\n            }\n          </div>\n        </ng-scrollbar>\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: [".animate-calendar-enter{animation:z-calendar-view-enter .2s ease-out}@keyframes z-calendar-view-enter{0%{opacity:0;transform:scale(.95) translateY(.25rem)}to{opacity:1;transform:scale(1) translateY(0)}}.z-calendar input{text-overflow:ellipsis;overflow:hidden}\n"], dependencies: [{ kind: "component", type: NgScrollbar, selector: "ng-scrollbar:not([externalViewport]), [ngScrollbar]", exportAs: ["ngScrollbar"] }, { kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zSize", "zStrokeWidth", "zSvg"] }, { kind: "directive", type: ZPopoverDirective, selector: "[z-popover]", inputs: ["zPopoverContent", "zPosition", "zTrigger", "zClass", "zShowDelay", "zHideDelay", "zDisabled", "zOffset", "zPopoverWidth", "zManualClose", "zScrollClose", "zShowArrow"], outputs: ["zShow", "zHide", "zHideStart", "zControl", "zPositionChange"], exportAs: ["zPopover"] }, { kind: "component", type: ZButtonComponent, selector: "z-button, button[z-button], a[z-button]", inputs: ["class", "zType", "zSize", "zShape", "zLabel", "zLoading", "zDisabled", "zTypeIcon", "zSizeIcon", "zStrokeWidthIcon", "zWave"], exportAs: ["zButton"] }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "pipe", type: ZDayClassesPipe, name: "zDayClasses" }, { kind: "pipe", type: ZMonthClassesPipe, name: "zMonthClasses" }, { kind: "pipe", type: ZQuarterClassesPipe, name: "zQuarterClasses" }, { kind: "pipe", type: ZYearClassesPipe, name: "zYearClasses" }, { kind: "pipe", type: ZIsPresetDisabledPipe, name: "zIsPresetDisabled" }, { kind: "pipe", type: ZIsTimeSelectedPipe, name: "zIsTimeSelected" }, { kind: "pipe", type: ZIsEndHourDisabledPipe, name: "zIsEndHourDisabled" }, { kind: "pipe", type: ZIsEndMinuteDisabledPipe, name: "zIsEndMinuteDisabled" }, { kind: "pipe", type: ZIsEndSecondDisabledPipe, name: "zIsEndSecondDisabled" }, { kind: "pipe", type: ZIsStartMonthDisabledPipe, name: "zIsStartMonthDisabled" }, { kind: "pipe", type: ZIsEndMonthDisabledPipe, name: "zIsEndMonthDisabled" }, { kind: "pipe", type: ZIsStartYearDisabledPipe, name: "zIsStartYearDisabled" }, { kind: "pipe", type: ZIsEndYearDisabledPipe, name: "zIsEndYearDisabled" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], 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 p-0\"\n      (zHideStart)=\"onPopoverHide()\"\n      (zShow)=\"onPopoverShow()\"\n      (zControl)=\"onPopoverControl($event)\"\n      [id]=\"pickerId\"\n      [class]=\"triggerClasses()\"\n      (keydown)=\"onTriggerKeydown($event)\">\n      <z-icon\n        [zType]=\"isRangeMode() ? 'lucideCalendarRange' : 'lucideCalendar'\"\n        zSize=\"16\"\n        class=\"text-muted-foreground shrink-0 cursor-pointer\"\n        (click)=\"$event.stopPropagation(); toggle()\" />\n\n      @if (isRangeMode()) {\n        <input\n          type=\"text\"\n          data-range-type=\"start\"\n          class=\"placeholder:text-muted-foreground w-0 min-w-0 flex-1 truncate bg-transparent text-center text-sm outline-none\"\n          [placeholder]=\"'i18n_z_ui_calendar_start_date' | translate\"\n          [value]=\"inputDisplayStart()\"\n          [disabled]=\"isDisabled()\"\n          [readonly]=\"zReadonly()\"\n          (click)=\"isOpen() && $event.stopPropagation()\"\n          (focus)=\"onInputFocus($event)\"\n          (input)=\"onStartInputChange($event)\"\n          (blur)=\"onInputBlur($event)\"\n          (keydown.enter)=\"onStartInputEnter($event)\"\n          (keydown.escape)=\"onStartInputEscape()\" />\n        <span class=\"text-muted-foreground text-sm\">-</span>\n        <input\n          type=\"text\"\n          data-range-type=\"end\"\n          class=\"placeholder:text-muted-foreground w-0 min-w-0 flex-1 truncate bg-transparent text-center text-sm outline-none\"\n          [placeholder]=\"'i18n_z_ui_calendar_end_date' | translate\"\n          [value]=\"inputDisplayEnd()\"\n          [disabled]=\"isDisabled()\"\n          [readonly]=\"zReadonly()\"\n          (click)=\"isOpen() && $event.stopPropagation()\"\n          (focus)=\"onInputFocus($event)\"\n          (input)=\"onEndInputChange($event)\"\n          (blur)=\"onInputBlur($event)\"\n          (keydown.enter)=\"onEndInputEnter($event)\"\n          (keydown.escape)=\"onEndInputEscape()\" />\n      } @else {\n        <input\n          #inputEl\n          type=\"text\"\n          class=\"placeholder:text-muted-foreground w-0 min-w-0 flex-1 truncate bg-transparent text-sm outline-none\"\n          [placeholder]=\"effectivePlaceholder()\"\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-sm transition-all\"\n          [class.opacity-0]=\"!hasValue()\"\n          [class.pointer-events-none]=\"!hasValue()\"\n          (click)=\"onClear($event)\">\n          <z-icon zType=\"lucideX\" zSize=\"18\" />\n        </button>\n      }\n    </div>\n  </div>\n\n  @if (hasError()) {\n    <p class=\"text-destructive animate-in fade-in slide-in-from-top-1 m-0 text-xs duration-200\">\n      {{ errorMessage() }}\n    </p>\n  }\n</div>\n\n<ng-template #calendarTpl>\n  <div\n    class=\"z-calendar-calendar bg-popover border-border flex max-h-[50dvh] max-w-[95vw] flex-col overflow-auto rounded-sm border shadow-lg min-[480px]:max-h-[55dvh] sm:max-h-none sm:max-w-none sm:flex-row sm:overflow-visible\"\n    (keydown)=\"onCalendarKeydown($event)\">\n    @if (zQuickSelect() && zMode() === 'range') {\n      <div\n        class=\"border-border flex shrink-0 flex-row gap-1 overflow-x-auto border-b p-2 sm:flex-col sm:gap-0 sm:space-y-1 sm:overflow-x-visible sm:border-r sm:border-b-0\">\n        @for (preset of quickSelectPresets; track preset.key) {\n          @let presetDisabled = preset | zIsPresetDisabled: zDisabledDate();\n          <button\n            type=\"button\"\n            class=\"cursor-pointer rounded-sm px-3 py-1.5 text-left text-sm whitespace-nowrap transition-colors\"\n            [class.hover:bg-muted]=\"activePresetKey() !== preset.key && !presetDisabled\"\n            [class.bg-primary]=\"activePresetKey() === preset.key\"\n            [class.text-primary-foreground]=\"activePresetKey() === preset.key\"\n            [class.font-medium]=\"activePresetKey() === preset.key\"\n            [class.opacity-40]=\"presetDisabled\"\n            [class.cursor-not-allowed]=\"presetDisabled\"\n            [disabled]=\"presetDisabled\"\n            (click)=\"onQuickSelect(preset)\">\n            {{ preset.label | translate }}\n          </button>\n        }\n      </div>\n    }\n    <div\n      class=\"flex flex-1 flex-col items-center overflow-auto py-2 sm:overflow-visible\"\n      [class]=\"!isRangeMode() ? 'w-[17.5rem]' : ''\">\n      @if (!isTimeMode()) {\n        <div\n          class=\"z-calendars-wrapper flex w-full flex-col items-center gap-3 sm:flex-row sm:items-stretch sm:justify-center sm:gap-0\">\n          <!-- First Calendar -->\n          <div class=\"z-calendar-section flex w-[17.5rem] shrink-0 flex-col\">\n            @if (!isTimeMode()) {\n              <!-- Header -->\n              <div class=\"border-border flex w-full items-center justify-between gap-0.5 px-2\">\n                <!-- Double left arrow (always visible) -->\n                <button\n                  type=\"button\"\n                  z-button\n                  zType=\"ghost\"\n                  zSize=\"sm\"\n                  class=\"size-7 shrink-0 p-0!\"\n                  [zWave]=\"false\"\n                  (click)=\"navigatePreviousFast()\">\n                  <z-icon zType=\"lucideChevronsLeft\" zSize=\"18\" />\n                </button>\n\n                <!-- Single left arrow (hidden in month/year view) -->\n                @if (currentView() === 'day') {\n                  <button\n                    type=\"button\"\n                    z-button\n                    zType=\"ghost\"\n                    zSize=\"sm\"\n                    class=\"size-7 shrink-0 p-0!\"\n                    [zWave]=\"false\"\n                    (click)=\"navigatePrevious()\">\n                    <z-icon zType=\"lucideChevronLeft\" zSize=\"18\" />\n                  </button>\n                }\n\n                <!-- Header content -->\n                <div class=\"flex flex-1 shrink-0 items-center justify-center gap-0\">\n                  @if (currentView() === 'day') {\n                    <!-- Day view: Month + Year -->\n                    @if (!isYearMode() && !isQuarterMode()) {\n                      <button\n                        type=\"button\"\n                        z-button\n                        zType=\"ghost\"\n                        zSize=\"sm\"\n                        class=\"h-7 px-1.5 text-sm!\"\n                        [zWave]=\"false\"\n                        (click)=\"setView('month')\">\n                        {{ currentMonthName() }}\n                      </button>\n                    }\n                    <button\n                      type=\"button\"\n                      z-button\n                      zType=\"ghost\"\n                      zSize=\"sm\"\n                      class=\"h-7 px-1.5 text-sm!\"\n                      [zWave]=\"false\"\n                      [zDisabled]=\"isYearMode()\"\n                      (click)=\"setView('year')\">\n                      {{ currentYear() }}\n                    </button>\n                  } @else if (currentView() === 'month') {\n                    <!-- Month view: Only Year -->\n                    <button\n                      type=\"button\"\n                      z-button\n                      zType=\"ghost\"\n                      zSize=\"sm\"\n                      class=\"h-7 px-1.5 text-sm!\"\n                      [zWave]=\"false\"\n                      (click)=\"setView('year')\">\n                      {{ currentYear() }}\n                    </button>\n                  } @else if (currentView() === 'year') {\n                    <!-- Year view: Year Range -->\n                    <span class=\"text-sm font-medium\">\n                      {{ yearRange()[0] }} - {{ yearRange()[yearRange().length - 1] }}\n                    </span>\n                  } @else if (currentView() === 'quarter') {\n                    <!-- Quarter view: Only Year -->\n                    <button\n                      type=\"button\"\n                      z-button\n                      zType=\"ghost\"\n                      zSize=\"sm\"\n                      class=\"h-7 px-1.5 text-sm!\"\n                      [zWave]=\"false\"\n                      (click)=\"setView('year')\">\n                      {{ currentYear() }}\n                    </button>\n                  }\n                </div>\n\n                <!-- Single right arrow (hidden in month/year view) -->\n                @if (currentView() === 'day') {\n                  <button\n                    type=\"button\"\n                    z-button\n                    zType=\"ghost\"\n                    zSize=\"sm\"\n                    class=\"size-7 shrink-0 p-0!\"\n                    [zDisabled]=\"!canNavigateStartNext()\"\n                    [zWave]=\"false\"\n                    (click)=\"navigateNext()\">\n                    <z-icon zType=\"lucideChevronRight\" zSize=\"18\" />\n                  </button>\n                }\n\n                <!-- Double right arrow (always visible) -->\n                <button\n                  type=\"button\"\n                  z-button\n                  zType=\"ghost\"\n                  zSize=\"sm\"\n                  class=\"size-7 shrink-0 p-0!\"\n                  [zDisabled]=\"!canNavigateStartNext()\"\n                  [zWave]=\"false\"\n                  (click)=\"navigateNextFast()\">\n                  <z-icon zType=\"lucideChevronsRight\" zSize=\"18\" />\n                </button>\n              </div>\n\n              <!-- Body -->\n              <div\n                class=\"flex h-full w-full flex-col items-center justify-center p-2\"\n                [class.min-h-[14rem]]=\"!isQuarterMode()\"\n                [class.h-[14rem]]=\"\n                  !isYearMode() &&\n                  !isMonthMode() &&\n                  !isQuarterMode() &&\n                  (currentView() === 'month' || currentView() === 'year')\n                \"\n                [class.min-h-[6.25rem]]=\"isQuarterMode()\"\n                [class.!min-h-auto]=\"isYearMode() || isMonthMode() || isQuarterMode()\"\n                [class.!h-auto]=\"isYearMode() || isMonthMode() || isQuarterMode()\">\n                @if (currentView() === 'day') {\n                  <div\n                    class=\"flex h-full w-full flex-1 flex-col gap-1\"\n                    [class.animate-calendar-enter]=\"uiState().hasViewChanged\">\n                    <!-- Weekday headers -->\n                    <div class=\"flex w-full flex-1 justify-center gap-1\">\n                      @for (weekday of weekdayNames(); track weekday) {\n                        <div\n                          class=\"text-muted-foreground flex h-[1.875rem] w-[2.0313rem] items-center justify-center text-xs font-medium\">\n                          {{ weekday }}\n                        </div>\n                      }\n                    </div>\n\n                    <!-- Date rows -->\n                    @for (week of calendarDays(); track $index) {\n                      <div class=\"flex w-full flex-1 justify-center gap-1\">\n                        @for (day of week; track day.date.getTime()) {\n                          <button\n                            type=\"button\"\n                            [class]=\"day | zDayClasses\"\n                            class=\"h-[1.875rem] !w-[2.0313rem] !text-sm\"\n                            [disabled]=\"day.isDisabled\"\n                            (click)=\"onDayClick(day)\"\n                            (mouseenter)=\"onDayHover(day)\"\n                            (mouseleave)=\"onDayLeave()\">\n                            {{ day.day }}\n                          </button>\n                        }\n                      </div>\n                    }\n                  </div>\n                }\n                @if (currentView() === 'month') {\n                  <div\n                    class=\"grid h-full w-full grid-cols-3 grid-rows-4 gap-2.5 gap-y-5!\"\n                    [class.animate-calendar-enter]=\"uiState().hasViewChanged\">\n                    @for (month of monthNames(); track month; let i = $index) {\n                      @let monthDisabled = i | zIsStartMonthDisabled: startMonthDisabledContext();\n                      <div class=\"flex flex-1 items-center justify-center\">\n                        <button\n                          type=\"button\"\n                          [class]=\"i | zMonthClasses: selectedMonthIndex() : todayMonthIndex()\"\n                          class=\"!h-7 !w-full !text-sm\"\n                          [disabled]=\"monthDisabled\"\n                          [class.opacity-30]=\"monthDisabled\"\n                          [class.cursor-not-allowed]=\"monthDisabled\"\n                          (click)=\"onMonthSelect(i)\">\n                          {{ month }}\n                        </button>\n                      </div>\n                    }\n                  </div>\n                }\n\n                @if (currentView() === 'year') {\n                  <div\n                    class=\"grid h-full w-full grid-cols-3 grid-rows-4 gap-2.5 gap-y-5!\"\n                    [class.animate-calendar-enter]=\"uiState().hasViewChanged\">\n                    @for (year of yearRange(); track year) {\n                      @let yearDisabled = year | zIsStartYearDisabled: startYearDisabledContext();\n                      <div class=\"flex flex-1 items-center justify-center\">\n                        <button\n                          type=\"button\"\n                          [class]=\"year | zYearClasses: selectedYear() : todayYear()\"\n                          class=\"!h-7 !w-full !text-sm\"\n                          [disabled]=\"yearDisabled\"\n                          [class.opacity-30]=\"yearDisabled\"\n                          [class.cursor-not-allowed]=\"yearDisabled\"\n                          (click)=\"onYearClick(year)\">\n                          {{ year }}\n                        </button>\n                      </div>\n                    }\n                  </div>\n                }\n\n                @if (currentView() === 'quarter') {\n                  <div\n                    class=\"grid h-full w-full grid-cols-2 grid-rows-2 gap-2 p-1\"\n                    [class.animate-calendar-enter]=\"uiState().hasViewChanged\">\n                    @for (quarter of quarterNames; track quarter; let i = $index) {\n                      <div class=\"flex flex-1 items-center justify-center\">\n                        <button\n                          type=\"button\"\n                          [class]=\"i | zQuarterClasses: selectedQuarterIndex() : todayQuarterIndex()\"\n                          class=\"!h-8 !w-full !text-sm\"\n                          (click)=\"onQuarterClick(i)\">\n                          {{ quarter }}\n                        </button>\n                      </div>\n                    }\n                  </div>\n                }\n              </div>\n            }\n          </div>\n\n          <!-- Second Calendar (Range Mode Only) -->\n          @if (isRangeMode()) {\n            <!-- Divider -->\n            <div class=\"border-border bg-border hidden self-stretch sm:block sm:w-px\"></div>\n            <div class=\"border-border bg-border block h-px w-full sm:hidden\"></div>\n\n            <div class=\"z-calendar-section flex w-[17.5rem] shrink-0 flex-col\">\n              <!-- Header -->\n              <div class=\"border-border flex w-full items-center justify-between gap-0.5 px-2\">\n                <button\n                  type=\"button\"\n                  z-button\n                  zType=\"ghost\"\n                  zSize=\"sm\"\n                  class=\"size-7 shrink-0 p-0!\"\n                  [zDisabled]=\"!canNavigateEndPrev()\"\n                  [zWave]=\"false\"\n                  (click)=\"navigateEndPreviousFast()\">\n                  <z-icon zType=\"lucideChevronsLeft\" zSize=\"18\" />\n                </button>\n\n                <button\n                  type=\"button\"\n                  z-button\n                  zType=\"ghost\"\n                  zSize=\"sm\"\n                  class=\"size-7 shrink-0 p-0!\"\n                  [zDisabled]=\"!canNavigateEndPrev()\"\n                  [zWave]=\"false\"\n                  (click)=\"navigateEndPrevious()\">\n                  <z-icon zType=\"lucideChevronLeft\" zSize=\"18\" />\n                </button>\n\n                <div class=\"flex w-[7.5rem] shrink-0 items-center justify-center gap-0\">\n                  <button\n                    type=\"button\"\n                    z-button\n                    zType=\"ghost\"\n                    zSize=\"sm\"\n                    class=\"h-7 px-1.5 text-sm!\"\n                    [zWave]=\"false\"\n                    (click)=\"setEndView('month')\">\n                    {{ endMonthName() }}\n                  </button>\n\n                  <button\n                    type=\"button\"\n                    z-button\n                    zType=\"ghost\"\n                    zSize=\"sm\"\n                    class=\"h-7 px-1.5 text-sm!\"\n                    [zWave]=\"false\"\n                    (click)=\"setEndView('year')\">\n                    {{ endMonthYear() }}\n                  </button>\n                </div>\n\n                <button\n                  type=\"button\"\n                  z-button\n                  zType=\"ghost\"\n                  zSize=\"sm\"\n                  class=\"size-7 shrink-0 p-0!\"\n                  [zWave]=\"false\"\n                  [zWave]=\"false\"\n                  (click)=\"navigateEndNext()\">\n                  <z-icon zType=\"lucideChevronRight\" zSize=\"18\" />\n                </button>\n\n                <button\n                  type=\"button\"\n                  z-button\n                  zType=\"ghost\"\n                  zSize=\"sm\"\n                  class=\"size-7 shrink-0 p-0!\"\n                  [zWave]=\"false\"\n                  [zWave]=\"false\"\n                  (click)=\"navigateEndNextFast()\">\n                  <z-icon zType=\"lucideChevronsRight\" zSize=\"18\" />\n                </button>\n              </div>\n\n              <!-- Body -->\n              <div\n                class=\"flex h-full min-h-[14rem] w-full flex-col items-center justify-center p-2\"\n                [class.h-[14rem]]=\"endView() === 'month' || endView() === 'year'\">\n                @if (endView() === 'day') {\n                  <div\n                    class=\"flex h-full w-full flex-1 flex-col gap-1\"\n                    [class.animate-calendar-enter]=\"uiState().hasEndViewChanged\">\n                    <!-- Weekday headers -->\n                    <div class=\"flex w-full flex-1 justify-center gap-1\">\n                      @for (weekday of weekdayNames(); track weekday) {\n                        <div\n                          class=\"text-muted-foreground flex h-[1.875rem] w-[2.0313rem] items-center justify-center text-xs font-medium\">\n                          {{ weekday }}\n                        </div>\n                      }\n                    </div>\n\n                    <!-- Date rows -->\n                    @for (week of calendarDaysEnd(); track $index) {\n                      <div class=\"flex w-full flex-1 justify-center gap-1\">\n                        @for (day of week; track day.date.getTime()) {\n                          <button\n                            type=\"button\"\n                            [class]=\"day | zDayClasses\"\n                            class=\"h-[1.875rem] !w-[2.0313rem] !text-sm\"\n                            [disabled]=\"day.isDisabled\"\n                            (click)=\"onDayClick(day)\"\n                            (mouseenter)=\"onDayHover(day)\"\n                            (mouseleave)=\"onDayLeave()\">\n                            {{ day.day }}\n                          </button>\n                        }\n                      </div>\n                    }\n                  </div>\n                }\n                @if (endView() === 'month') {\n                  <div\n                    class=\"grid h-full w-full grid-cols-3 grid-rows-4 gap-2.5 gap-y-5!\"\n                    [class.animate-calendar-enter]=\"uiState().hasEndViewChanged\">\n                    @for (month of monthNames(); track month; let i = $index) {\n                      @let endMonthDisabled = i | zIsEndMonthDisabled: endMonthDisabledContext();\n                      <div class=\"flex flex-1 items-center justify-center\">\n                        <button\n                          type=\"button\"\n                          [class]=\"i | zMonthClasses: endMonth().getMonth() : -1\"\n                          class=\"!h-7 !w-full !text-sm\"\n                          [disabled]=\"endMonthDisabled\"\n                          [class.opacity-30]=\"endMonthDisabled\"\n                          [class.cursor-not-allowed]=\"endMonthDisabled\"\n                          (click)=\"onEndMonthClick(i)\">\n                          {{ month }}\n                        </button>\n                      </div>\n                    }\n                  </div>\n                }\n\n                @if (endView() === 'year') {\n                  <div\n                    class=\"grid h-full w-full grid-cols-3 grid-rows-4 gap-2.5 gap-y-5!\"\n                    [class.animate-calendar-enter]=\"uiState().hasEndViewChanged\">\n                    @for (year of endYearRange(); track year) {\n                      @let endYearDisabled = year | zIsEndYearDisabled: endYearDisabledContext();\n                      <div class=\"flex flex-1 items-center justify-center\">\n                        <button\n                          type=\"button\"\n                          [class]=\"year | zYearClasses: endMonth().getFullYear() : -1\"\n                          class=\"!h-7 !w-full !text-sm\"\n                          [disabled]=\"endYearDisabled\"\n                          [class.opacity-30]=\"endYearDisabled\"\n                          [class.cursor-not-allowed]=\"endYearDisabled\"\n                          (click)=\"onEndYearClick(year)\">\n                          {{ year }}\n                        </button>\n                      </div>\n                    }\n                  </div>\n                }\n              </div>\n            </div>\n          }\n        </div>\n\n        <!-- Compact Time Picker Below Calendar (Single Date) -->\n        @if (!isRangeMode() && zShowTime()) {\n          <div class=\"border-border w-full border-t text-center\">\n            <div\n              class=\"hover:bg-muted my-1 inline-flex cursor-pointer items-center rounded-sm px-2 py-1 transition-colors\"\n              z-popover\n              [zPopoverContent]=\"timeDropdownTpl\"\n              zPosition=\"bottom\"\n              zPopoverWidth=\"auto\"\n              [zOffset]=\"4\"\n              zTrigger=\"click\"\n              zClass=\"border-border shadow-md\"\n              (zShow)=\"onTimeDropdownShow()\">\n              <div class=\"flex items-center justify-center gap-1\">\n                <!-- Hour -->\n                @if (zShowHour()) {\n                  <div\n                    class=\"hover:bg-muted/50 flex min-w-7 cursor-pointer flex-col items-center gap-0 rounded-sm px-1 transition-colors\">\n                    <button\n                      type=\"button\"\n                      class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mb-0.5 flex h-4 w-full cursor-pointer items-center justify-center rounded-sm border-none bg-transparent transition-colors\"\n                      (click)=\"decrementHour(); $event.stopPropagation()\">\n                      <z-icon zType=\"lucideChevronUp\" zSize=\"18\" />\n                    </button>\n                    <span class=\"text-foreground min-w-5 text-center text-sm leading-tight font-medium select-none\">\n                      {{ formattedHour() }}\n                    </span>\n                    <button\n                      type=\"button\"\n                      class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mt-0.5 flex h-4 w-full cursor-pointer items-center justify-center rounded-sm border-none bg-transparent transition-colors\"\n                      (click)=\"incrementHour(); $event.stopPropagation()\">\n                      <z-icon zType=\"lucideChevronDown\" zSize=\"18\" />\n                    </button>\n                  </div>\n                }\n                @if (zShowHour() && zShowMinute()) {\n                  <span class=\"text-muted-foreground text-sm font-medium\">:</span>\n                }\n                <!-- Minute -->\n                @if (zShowMinute()) {\n                  <div\n                    class=\"hover:bg-muted/50 flex min-w-7 cursor-pointer flex-col items-center gap-0 rounded-sm px-1 transition-colors\">\n                    <button\n                      type=\"button\"\n                      class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mb-0.5 flex h-4 w-full cursor-pointer items-center justify-center rounded-sm border-none bg-transparent transition-colors\"\n                      (click)=\"decrementMinute(); $event.stopPropagation()\">\n                      <z-icon zType=\"lucideChevronUp\" zSize=\"18\" />\n                    </button>\n                    <span class=\"text-foreground min-w-5 text-center text-sm leading-tight font-medium select-none\">\n                      {{ formattedMinute() }}\n                    </span>\n                    <button\n                      type=\"button\"\n                      class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mt-0.5 flex h-4 w-full cursor-pointer items-center justify-center rounded-sm border-none bg-transparent transition-colors\"\n                      (click)=\"incrementMinute(); $event.stopPropagation()\">\n                      <z-icon zType=\"lucideChevronDown\" zSize=\"18\" />\n                    </button>\n                  </div>\n                }\n                @if (zShowMinute() && zShowSecond()) {\n                  <span class=\"text-muted-foreground text-sm font-medium\">:</span>\n                }\n                <!-- Second -->\n                @if (zShowSecond()) {\n                  <div\n                    class=\"hover:bg-muted/50 flex min-w-7 cursor-pointer flex-col items-center gap-0 rounded-sm px-1 transition-colors\">\n                    <button\n                      type=\"button\"\n                      class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mb-0.5 flex h-4 w-full cursor-pointer items-center justify-center rounded-sm border-none bg-transparent transition-colors\"\n                      (click)=\"decrementSecond(); $event.stopPropagation()\">\n                      <z-icon zType=\"lucideChevronUp\" zSize=\"18\" />\n                    </button>\n                    <span class=\"text-foreground min-w-5 text-center text-sm leading-tight font-medium select-none\">\n                      {{ formattedSecond() }}\n                    </span>\n                    <button\n                      type=\"button\"\n                      class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mt-0.5 flex h-4 w-full cursor-pointer items-center justify-center rounded-sm border-none bg-transparent transition-colors\"\n                      (click)=\"incrementSecond(); $event.stopPropagation()\">\n                      <z-icon zType=\"lucideChevronDown\" zSize=\"18\" />\n                    </button>\n                  </div>\n                }\n                <!-- AM/PM Toggle -->\n                @if (zTimeFormat() === '12h') {\n                  <button\n                    type=\"button\"\n                    class=\"bg-primary/10 text-primary hover:bg-primary/20 active:bg-primary/30 ml-1 flex w-8 cursor-pointer items-center justify-center rounded-sm border-none px-2 py-1 text-xs font-semibold transition-colors\"\n                    (click)=\"togglePeriod(); $event.stopPropagation()\">\n                    {{ period() }}\n                  </button>\n                }\n              </div>\n            </div>\n          </div>\n        }\n\n        <!-- Compact Time Pickers Below Calendars (Range Mode) -->\n        @if (isRangeMode() && zShowTime()) {\n          <div class=\"border-border flex w-full flex-col border-t sm:flex-row\">\n            <!-- Start Time -->\n            <div class=\"flex w-full flex-col items-center justify-center gap-1\">\n              <div\n                class=\"hover:bg-muted my-1 inline-flex cursor-pointer items-center rounded-sm px-2 py-1 transition-colors\"\n                z-popover\n                [zPopoverContent]=\"timeDropdownTpl\"\n                zPosition=\"bottom\"\n                zPopoverWidth=\"auto\"\n                [zOffset]=\"4\"\n                zTrigger=\"click\"\n                zClass=\"border-border shadow-md\"\n                (zShow)=\"onTimeDropdownShow()\">\n                <div class=\"flex items-center justify-center gap-1\">\n                  <!-- Hour -->\n                  @if (zShowHour()) {\n                    <div\n                      class=\"hover:bg-muted/50 flex min-w-7 cursor-pointer flex-col items-center gap-0 rounded-sm px-1 transition-colors\">\n                      <button\n                        type=\"button\"\n                        class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mb-0.5 flex h-4 w-full cursor-pointer items-center justify-center rounded-sm border-none bg-transparent transition-colors\"\n                        (click)=\"decrementHour(); $event.stopPropagation()\">\n                        <z-icon zType=\"lucideChevronUp\" zSize=\"18\" />\n                      </button>\n                      <span class=\"text-foreground min-w-5 text-center text-sm leading-tight font-medium select-none\">\n                        {{ formattedHour() }}\n                      </span>\n                      <button\n                        type=\"button\"\n                        class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mt-0.5 flex h-4 w-full cursor-pointer items-center justify-center rounded-sm border-none bg-transparent transition-colors\"\n                        (click)=\"incrementHour(); $event.stopPropagation()\">\n                        <z-icon zType=\"lucideChevronDown\" zSize=\"18\" />\n                      </button>\n                    </div>\n                  }\n                  @if (zShowHour() && zShowMinute()) {\n                    <span class=\"text-muted-foreground text-sm font-medium\">:</span>\n                  }\n                  <!-- Minute -->\n                  @if (zShowMinute()) {\n                    <div\n                      class=\"hover:bg-muted/50 flex min-w-7 cursor-pointer flex-col items-center gap-0 rounded-sm px-1 transition-colors\">\n                      <button\n                        type=\"button\"\n                        class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mb-0.5 flex h-4 w-full cursor-pointer items-center justify-center rounded-sm border-none bg-transparent transition-colors\"\n                        (click)=\"decrementMinute(); $event.stopPropagation()\">\n                        <z-icon zType=\"lucideChevronUp\" zSize=\"18\" />\n                      </button>\n                      <span class=\"text-foreground min-w-5 text-center text-sm leading-tight font-medium select-none\">\n                        {{ formattedMinute() }}\n                      </span>\n                      <button\n                        type=\"button\"\n                        class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mt-0.5 flex h-4 w-full cursor-pointer items-center justify-center rounded-sm border-none bg-transparent transition-colors\"\n                        (click)=\"incrementMinute(); $event.stopPropagation()\">\n                        <z-icon zType=\"lucideChevronDown\" zSize=\"18\" />\n                      </button>\n                    </div>\n                  }\n                  @if (zShowMinute() && zShowSecond()) {\n                    <span class=\"text-muted-foreground text-sm font-medium\">:</span>\n                  }\n                  <!-- Second -->\n                  @if (zShowSecond()) {\n                    <div\n                      class=\"hover:bg-muted/50 flex min-w-7 cursor-pointer flex-col items-center gap-0 rounded-sm px-1 transition-colors\">\n                      <button\n                        type=\"button\"\n                        class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mb-0.5 flex h-4 w-full cursor-pointer items-center justify-center rounded-sm border-none bg-transparent transition-colors\"\n                        (click)=\"decrementSecond(); $event.stopPropagation()\">\n                        <z-icon zType=\"lucideChevronUp\" zSize=\"18\" />\n                      </button>\n                      <span class=\"text-foreground min-w-5 text-center text-sm leading-tight font-medium select-none\">\n                        {{ formattedSecond() }}\n                      </span>\n                      <button\n                        type=\"button\"\n                        class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mt-0.5 flex h-4 w-full cursor-pointer items-center justify-center rounded-sm border-none bg-transparent transition-colors\"\n                        (click)=\"incrementSecond(); $event.stopPropagation()\">\n                        <z-icon zType=\"lucideChevronDown\" zSize=\"18\" />\n                      </button>\n                    </div>\n                  }\n                  <!-- AM/PM Toggle -->\n                  @if (zTimeFormat() === '12h') {\n                    <button\n                      type=\"button\"\n                      class=\"bg-primary/10 text-primary hover:bg-primary/20 active:bg-primary/30 ml-1 flex w-8 cursor-pointer items-center justify-center rounded-sm border-none px-2 py-1 text-xs font-semibold transition-colors\"\n                      (click)=\"togglePeriod(); $event.stopPropagation()\">\n                      {{ period() }}\n                    </button>\n                  }\n                </div>\n              </div>\n            </div>\n\n            <!-- Divider space -->\n            <div class=\"border-border bg-border h-px self-stretch sm:block sm:h-full sm:w-px\"></div>\n\n            <!-- End Time -->\n            <div class=\"flex w-full flex-col items-center justify-center gap-1\">\n              <div\n                class=\"hover:bg-muted my-1 inline-flex cursor-pointer items-center rounded-sm px-2 py-1 transition-colors\"\n                z-popover\n                [zPopoverContent]=\"timeDropdownEndTpl\"\n                zPosition=\"bottom\"\n                zPopoverWidth=\"auto\"\n                [zOffset]=\"4\"\n                zTrigger=\"click\"\n                zClass=\"border-border shadow-md\"\n                (zShow)=\"onTimeDropdownEndShow()\">\n                <div class=\"flex items-center justify-center gap-1\">\n                  <!-- Hour -->\n                  @if (zShowHour()) {\n                    <div\n                      class=\"hover:bg-muted/50 flex min-w-7 cursor-pointer flex-col items-center gap-0 rounded-sm px-1 transition-colors\">\n                      <button\n                        type=\"button\"\n                        class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mb-0.5 flex h-4 w-full cursor-pointer items-center justify-center rounded-sm border-none bg-transparent transition-colors\"\n                        (click)=\"decrementHourEnd(); $event.stopPropagation()\">\n                        <z-icon zType=\"lucideChevronUp\" zSize=\"18\" />\n                      </button>\n                      <span class=\"text-foreground min-w-5 text-center text-sm leading-tight font-medium select-none\">\n                        {{ formattedHourEnd() }}\n                      </span>\n                      <button\n                        type=\"button\"\n                        class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mt-0.5 flex h-4 w-full cursor-pointer items-center justify-center rounded-sm border-none bg-transparent transition-colors\"\n                        (click)=\"incrementHourEnd(); $event.stopPropagation()\">\n                        <z-icon zType=\"lucideChevronDown\" zSize=\"18\" />\n                      </button>\n                    </div>\n                  }\n                  @if (zShowHour() && zShowMinute()) {\n                    <span class=\"text-muted-foreground text-sm font-medium\">:</span>\n                  }\n                  <!-- Minute -->\n                  @if (zShowMinute()) {\n                    <div\n                      class=\"hover:bg-muted/50 flex min-w-7 cursor-pointer flex-col items-center gap-0 rounded-sm px-1 transition-colors\">\n                      <button\n                        type=\"button\"\n                        class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mb-0.5 flex h-4 w-full cursor-pointer items-center justify-center rounded-sm border-none bg-transparent transition-colors\"\n                        (click)=\"decrementMinuteEnd(); $event.stopPropagation()\">\n                        <z-icon zType=\"lucideChevronUp\" zSize=\"18\" />\n                      </button>\n                      <span class=\"text-foreground min-w-5 text-center text-sm leading-tight font-medium select-none\">\n                        {{ formattedMinuteEnd() }}\n                      </span>\n                      <button\n                        type=\"button\"\n                        class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mt-0.5 flex h-4 w-full cursor-pointer items-center justify-center rounded-sm border-none bg-transparent transition-colors\"\n                        (click)=\"incrementMinuteEnd(); $event.stopPropagation()\">\n                        <z-icon zType=\"lucideChevronDown\" zSize=\"18\" />\n                      </button>\n                    </div>\n                  }\n                  @if (zShowMinute() && zShowSecond()) {\n                    <span class=\"text-muted-foreground text-sm font-medium\">:</span>\n                  }\n                  <!-- Second -->\n                  @if (zShowSecond()) {\n                    <div\n                      class=\"hover:bg-muted/50 flex min-w-7 cursor-pointer flex-col items-center gap-0 rounded-sm px-1 transition-colors\">\n                      <button\n                        type=\"button\"\n                        class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mb-0.5 flex h-4 w-full cursor-pointer items-center justify-center rounded-sm border-none bg-transparent transition-colors\"\n                        (click)=\"decrementSecondEnd(); $event.stopPropagation()\">\n                        <z-icon zType=\"lucideChevronUp\" zSize=\"18\" />\n                      </button>\n                      <span class=\"text-foreground min-w-5 text-center text-sm leading-tight font-medium select-none\">\n                        {{ formattedSecondEnd() }}\n                      </span>\n                      <button\n                        type=\"button\"\n                        class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mt-0.5 flex h-4 w-full cursor-pointer items-center justify-center rounded-sm border-none bg-transparent transition-colors\"\n                        (click)=\"incrementSecondEnd(); $event.stopPropagation()\">\n                        <z-icon zType=\"lucideChevronDown\" zSize=\"18\" />\n                      </button>\n                    </div>\n                  }\n                  <!-- AM/PM Toggle -->\n                  @if (zTimeFormat() === '12h') {\n                    <button\n                      type=\"button\"\n                      class=\"bg-primary/10 text-primary hover:bg-primary/20 active:bg-primary/30 ml-1 flex w-8 cursor-pointer items-center justify-center rounded-sm border-none px-2 py-1 text-xs font-semibold transition-colors\"\n                      (click)=\"togglePeriodEnd(); $event.stopPropagation()\">\n                      {{ periodEnd() }}\n                    </button>\n                  }\n                </div>\n              </div>\n            </div>\n          </div>\n        }\n      } @else {\n        <!-- Time Only Mode - Compact Display -->\n        <div class=\"flex flex-col items-center gap-3 pb-2\">\n          <div\n            class=\"hover:bg-muted inline-flex cursor-pointer items-center rounded-sm px-3 py-2 transition-colors\"\n            z-popover\n            [zPopoverContent]=\"timeDropdownTpl\"\n            zPosition=\"bottom\"\n            zPopoverWidth=\"auto\"\n            [zOffset]=\"4\"\n            zTrigger=\"click\"\n            zClass=\"border-border shadow-md\"\n            (zShow)=\"onTimeDropdownShow()\">\n            <div class=\"flex items-center justify-center gap-1.5\">\n              <!-- Hour -->\n              @if (zShowHour()) {\n                <div\n                  class=\"hover:bg-muted/50 flex min-w-9 cursor-pointer flex-col items-center gap-0 rounded-sm px-1.5 transition-colors\">\n                  <button\n                    type=\"button\"\n                    class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mb-1 flex h-5 w-full cursor-pointer items-center justify-center rounded-sm border-none bg-transparent transition-colors\"\n                    (click)=\"decrementHour(); $event.stopPropagation()\">\n                    <z-icon zType=\"lucideChevronUp\" zSize=\"16\" />\n                  </button>\n                  <span class=\"text-foreground min-w-6 text-center text-base leading-tight font-medium select-none\">\n                    {{ formattedHour() }}\n                  </span>\n                  <button\n                    type=\"button\"\n                    class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mt-1 flex h-5 w-full cursor-pointer items-center justify-center rounded-sm border-none bg-transparent transition-colors\"\n                    (click)=\"incrementHour(); $event.stopPropagation()\">\n                    <z-icon zType=\"lucideChevronDown\" zSize=\"16\" />\n                  </button>\n                </div>\n              }\n              @if (zShowHour() && zShowMinute()) {\n                <span class=\"text-muted-foreground text-base font-medium\">:</span>\n              }\n              <!-- Minute -->\n              @if (zShowMinute()) {\n                <div\n                  class=\"hover:bg-muted/50 flex min-w-9 cursor-pointer flex-col items-center gap-0 rounded-sm px-1.5 transition-colors\">\n                  <button\n                    type=\"button\"\n                    class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mb-1 flex h-5 w-full cursor-pointer items-center justify-center rounded-sm border-none bg-transparent transition-colors\"\n                    (click)=\"decrementMinute(); $event.stopPropagation()\">\n                    <z-icon zType=\"lucideChevronUp\" zSize=\"16\" />\n                  </button>\n                  <span class=\"text-foreground min-w-6 text-center text-base leading-tight font-medium select-none\">\n                    {{ formattedMinute() }}\n                  </span>\n                  <button\n                    type=\"button\"\n                    class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mt-1 flex h-5 w-full cursor-pointer items-center justify-center rounded-sm border-none bg-transparent transition-colors\"\n                    (click)=\"incrementMinute(); $event.stopPropagation()\">\n                    <z-icon zType=\"lucideChevronDown\" zSize=\"16\" />\n                  </button>\n                </div>\n              }\n              @if (zShowMinute() && zShowSecond()) {\n                <span class=\"text-muted-foreground text-base font-medium\">:</span>\n              }\n              <!-- Second -->\n              @if (zShowSecond()) {\n                <div\n                  class=\"hover:bg-muted/50 flex min-w-9 cursor-pointer flex-col items-center gap-0 rounded-sm px-1.5 transition-colors\">\n                  <button\n                    type=\"button\"\n                    class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mb-1 flex h-5 w-full cursor-pointer items-center justify-center rounded-sm border-none bg-transparent transition-colors\"\n                    (click)=\"decrementSecond(); $event.stopPropagation()\">\n                    <z-icon zType=\"lucideChevronUp\" zSize=\"16\" />\n                  </button>\n                  <span class=\"text-foreground min-w-6 text-center text-base leading-tight font-medium select-none\">\n                    {{ formattedSecond() }}\n                  </span>\n                  <button\n                    type=\"button\"\n                    class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mt-1 flex h-5 w-full cursor-pointer items-center justify-center rounded-sm border-none bg-transparent transition-colors\"\n                    (click)=\"incrementSecond(); $event.stopPropagation()\">\n                    <z-icon zType=\"lucideChevronDown\" zSize=\"16\" />\n                  </button>\n                </div>\n              }\n              <!-- AM/PM Toggle -->\n              @if (zTimeFormat() === '12h') {\n                <button\n                  type=\"button\"\n                  class=\"bg-primary/10 text-primary hover:bg-primary/20 active:bg-primary/30 ml-1 flex w-10 cursor-pointer items-center justify-center rounded-sm border-none px-2.5 py-1.5 text-sm font-semibold transition-colors\"\n                  (click)=\"togglePeriod(); $event.stopPropagation()\">\n                  {{ period() }}\n                </button>\n              }\n            </div>\n          </div>\n        </div>\n      }\n\n      @if (!(zQuickSelect() && zMode() === 'range' && !showOkButton() && !showCancelButton())) {\n        <div class=\"border-border flex w-full items-center justify-between gap-2 border-t px-2 pt-2\">\n          @if (!zQuickSelect() || zMode() !== 'range') {\n            <button type=\"button\" z-button zType=\"secondary\" zSize=\"sm\" [zWave]=\"false\" (click)=\"onTodayClick()\">\n              {{ todayButtonText() }}\n            </button>\n          } @else {\n            <div></div>\n          }\n\n          @if (showOkButton() || showCancelButton()) {\n            <div class=\"flex items-center gap-2\">\n              @if (showCancelButton()) {\n                <button type=\"button\" z-button zType=\"outline\" zSize=\"sm\" (click)=\"onCancelClick()\">\n                  {{ zCancelText() ?? ('i18n_z_ui_calendar_cancel' | translate) }}\n                </button>\n              }\n              @if (showOkButton()) {\n                <button type=\"button\" z-button zSize=\"sm\" [zDisabled]=\"!canApply()\" (click)=\"onOkClick()\">\n                  {{ zOkText() ?? ('i18n_z_ui_calendar_ok' | translate) }}\n                </button>\n              }\n            </div>\n          }\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #timeDropdownTpl>\n  <div class=\"bg-popover flex overflow-hidden rounded-sm\">\n    @if (zShowHour()) {\n      <div\n        class=\"flex flex-col\"\n        [class.border-r]=\"zShowMinute() || zShowSecond()\"\n        [class.border-border]=\"zShowMinute() || zShowSecond()\">\n        <ng-scrollbar\n          class=\"z-time-scroll-hour h-[12.5rem] w-12\"\n          [class.rounded-sm]=\"!zShowMinute() && !zShowSecond()\"\n          [class.rounded-l-sm]=\"zShowMinute() || zShowSecond()\"\n          track=\"vertical\">\n          <div class=\"flex flex-col\">\n            @for (hr of hourOptions(); track hr) {\n              @let hrSelected = hr === displayHour();\n              <button\n                type=\"button\"\n                class=\"flex h-7 shrink-0 cursor-pointer items-center justify-center text-sm transition-colors\"\n                [class.hover:bg-muted]=\"!hrSelected\"\n                [class.bg-primary]=\"hrSelected\"\n                [class.text-primary-foreground]=\"hrSelected\"\n                [class.font-medium]=\"hrSelected\"\n                (click)=\"selectHour(hr)\">\n                {{ hr | number: '2.0-0' }}\n              </button>\n            }\n          </div>\n        </ng-scrollbar>\n      </div>\n    }\n    @if (zShowMinute()) {\n      <div class=\"flex flex-col\" [class.border-r]=\"zShowSecond()\" [class.border-border]=\"zShowSecond()\">\n        <ng-scrollbar\n          class=\"z-time-scroll-minute h-[12.5rem] w-12\"\n          [class.rounded-sm]=\"!zShowHour() && !zShowSecond()\"\n          [class.rounded-l-sm]=\"!zShowHour() && zShowSecond()\"\n          [class.rounded-r-sm]=\"zShowHour() && !zShowSecond()\"\n          track=\"vertical\">\n          <div class=\"flex flex-col\">\n            @for (min of minuteOptions; track min) {\n              @let minSelected = min === minute();\n              <button\n                type=\"button\"\n                class=\"flex h-7 shrink-0 cursor-pointer items-center justify-center text-sm transition-colors\"\n                [class.hover:bg-muted]=\"!minSelected\"\n                [class.bg-primary]=\"minSelected\"\n                [class.text-primary-foreground]=\"minSelected\"\n                [class.font-medium]=\"minSelected\"\n                (click)=\"selectMinute(min)\">\n                {{ min | number: '2.0-0' }}\n              </button>\n            }\n          </div>\n        </ng-scrollbar>\n      </div>\n    }\n    @if (zShowSecond()) {\n      <div class=\"flex flex-col\">\n        <ng-scrollbar\n          class=\"z-time-scroll-second h-[12.5rem] w-12\"\n          [class.rounded-sm]=\"!zShowHour() && !zShowMinute()\"\n          [class.rounded-r-sm]=\"zShowHour() || zShowMinute()\"\n          track=\"vertical\">\n          <div class=\"flex flex-col\">\n            @for (sec of secondOptions; track sec) {\n              @let secSelected = sec === second();\n              <button\n                type=\"button\"\n                class=\"flex h-7 shrink-0 cursor-pointer items-center justify-center text-sm transition-colors\"\n                [class.hover:bg-muted]=\"!secSelected\"\n                [class.bg-primary]=\"secSelected\"\n                [class.text-primary-foreground]=\"secSelected\"\n                [class.font-medium]=\"secSelected\"\n                (click)=\"selectSecond(sec)\">\n                {{ sec | number: '2.0-0' }}\n              </button>\n            }\n          </div>\n        </ng-scrollbar>\n      </div>\n    }\n  </div>\n</ng-template>\n\n<ng-template #timeDropdownEndTpl>\n  <div class=\"bg-popover flex overflow-hidden rounded-sm\">\n    @if (zShowHour()) {\n      <div\n        class=\"flex flex-col\"\n        [class.border-r]=\"zShowMinute() || zShowSecond()\"\n        [class.border-border]=\"zShowMinute() || zShowSecond()\">\n        <ng-scrollbar\n          class=\"z-time-scroll-hour-end h-[12.5rem] w-12\"\n          [class.rounded-sm]=\"!zShowMinute() && !zShowSecond()\"\n          [class.rounded-l-sm]=\"zShowMinute() || zShowSecond()\"\n          track=\"vertical\">\n          <div class=\"flex flex-col\">\n            @for (hr of hourOptions(); track hr) {\n              @let hrDisabled = hr | zIsEndHourDisabled: endTimeContext();\n              @let hrEndSelected = hr === displayHourEnd();\n              <button\n                type=\"button\"\n                class=\"flex h-7 shrink-0 items-center justify-center text-sm transition-colors\"\n                [class.hover:bg-muted]=\"!hrDisabled && !hrEndSelected\"\n                [class.cursor-pointer]=\"!hrDisabled\"\n                [class.bg-primary]=\"hrEndSelected\"\n                [class.text-primary-foreground]=\"hrEndSelected\"\n                [class.font-medium]=\"hrEndSelected\"\n                [class.opacity-30]=\"hrDisabled\"\n                [class.cursor-not-allowed]=\"hrDisabled\"\n                [disabled]=\"hrDisabled\"\n                (click)=\"selectHourEnd(hr)\">\n                {{ hr | number: '2.0-0' }}\n              </button>\n            }\n          </div>\n        </ng-scrollbar>\n      </div>\n    }\n    @if (zShowMinute()) {\n      <div class=\"flex flex-col\" [class.border-r]=\"zShowSecond()\" [class.border-border]=\"zShowSecond()\">\n        <ng-scrollbar\n          class=\"z-time-scroll-minute-end h-[12.5rem] w-12\"\n          [class.rounded-sm]=\"!zShowHour() && !zShowSecond()\"\n          [class.rounded-l-sm]=\"!zShowHour() && zShowSecond()\"\n          [class.rounded-r-sm]=\"zShowHour() && !zShowSecond()\"\n          track=\"vertical\">\n          <div class=\"flex flex-col\">\n            @for (min of minuteOptions; track min) {\n              @let minDisabled = min | zIsEndMinuteDisabled: endTimeContext();\n              @let minEndSelected = min === minuteEnd();\n              <button\n                type=\"button\"\n                class=\"flex h-7 shrink-0 items-center justify-center text-sm transition-colors\"\n                [class.hover:bg-muted]=\"!minDisabled && !minEndSelected\"\n                [class.cursor-pointer]=\"!minDisabled\"\n                [class.bg-primary]=\"minEndSelected\"\n                [class.text-primary-foreground]=\"minEndSelected\"\n                [class.font-medium]=\"minEndSelected\"\n                [class.opacity-30]=\"minDisabled\"\n                [class.cursor-not-allowed]=\"minDisabled\"\n                [disabled]=\"minDisabled\"\n                (click)=\"selectMinuteEnd(min)\">\n                {{ min | number: '2.0-0' }}\n              </button>\n            }\n          </div>\n        </ng-scrollbar>\n      </div>\n    }\n    @if (zShowSecond()) {\n      <div class=\"flex flex-col\">\n        <ng-scrollbar\n          class=\"z-time-scroll-second-end h-[12.5rem] w-12\"\n          [class.rounded-sm]=\"!zShowHour() && !zShowMinute()\"\n          [class.rounded-r-sm]=\"zShowHour() || zShowMinute()\"\n          track=\"vertical\">\n          <div class=\"flex flex-col\">\n            @for (sec of secondOptions; track sec) {\n              @let secDisabled = sec | zIsEndSecondDisabled: endTimeContext();\n              @let secEndSelected = sec === secondEnd();\n              <button\n                type=\"button\"\n                class=\"flex h-7 shrink-0 items-center justify-center text-sm transition-colors\"\n                [class.hover:bg-muted]=\"!secDisabled && !secEndSelected\"\n                [class.cursor-pointer]=\"!secDisabled\"\n                [class.bg-primary]=\"secEndSelected\"\n                [class.text-primary-foreground]=\"secEndSelected\"\n                [class.font-medium]=\"secEndSelected\"\n                [class.opacity-30]=\"secDisabled\"\n                [class.cursor-not-allowed]=\"secDisabled\"\n                [disabled]=\"secDisabled\"\n                (click)=\"selectSecondEnd(sec)\">\n                {{ sec | number: '2.0-0' }}\n              </button>\n            }\n          </div>\n        </ng-scrollbar>\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: [".animate-calendar-enter{animation:z-calendar-view-enter .2s ease-out}@keyframes z-calendar-view-enter{0%{opacity:0;transform:scale(.95) translateY(.25rem)}to{opacity:1;transform:scale(1) translateY(0)}}.z-calendar input{text-overflow:ellipsis;overflow:hidden}\n"], dependencies: [{ kind: "component", type: NgScrollbar, selector: "ng-scrollbar:not([externalViewport]), [ngScrollbar]", exportAs: ["ngScrollbar"] }, { kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zSize", "zStrokeWidth", "zSvg"] }, { kind: "directive", type: ZPopoverDirective, selector: "[z-popover]", inputs: ["zPopoverContent", "zPosition", "zTrigger", "zClass", "zShowDelay", "zHideDelay", "zDisabled", "zOffset", "zPopoverWidth", "zManualClose", "zScrollClose", "zShowArrow"], outputs: ["zShow", "zHide", "zHideStart", "zControl", "zPositionChange"], exportAs: ["zPopover"] }, { kind: "component", type: ZButtonComponent, selector: "z-button, button[z-button], a[z-button]", inputs: ["class", "zType", "zSize", "zShape", "zLabel", "zLoading", "zDisabled", "zTypeIcon", "zSizeIcon", "zStrokeWidthIcon", "zWave"], exportAs: ["zButton"] }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "pipe", type: ZDayClassesPipe, name: "zDayClasses" }, { kind: "pipe", type: ZMonthClassesPipe, name: "zMonthClasses" }, { kind: "pipe", type: ZQuarterClassesPipe, name: "zQuarterClasses" }, { kind: "pipe", type: ZYearClassesPipe, name: "zYearClasses" }, { kind: "pipe", type: ZIsPresetDisabledPipe, name: "zIsPresetDisabled" }, { kind: "pipe", type: ZIsEndHourDisabledPipe, name: "zIsEndHourDisabled" }, { kind: "pipe", type: ZIsEndMinuteDisabledPipe, name: "zIsEndMinuteDisabled" }, { kind: "pipe", type: ZIsEndSecondDisabledPipe, name: "zIsEndSecondDisabled" }, { kind: "pipe", type: ZIsStartMonthDisabledPipe, name: "zIsStartMonthDisabled" }, { kind: "pipe", type: ZIsEndMonthDisabledPipe, name: "zIsEndMonthDisabled" }, { kind: "pipe", type: ZIsStartYearDisabledPipe, name: "zIsStartYearDisabled" }, { kind: "pipe", type: ZIsEndYearDisabledPipe, name: "zIsEndYearDisabled" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZCalendarComponent, decorators: [{
             type: Component,
@@ -3146,7 +3006,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
                         ZQuarterClassesPipe,
                         ZYearClassesPipe,
                         ZIsPresetDisabledPipe,
-                        ZIsTimeSelectedPipe,
                         ZIsEndHourDisabledPipe,
                         ZIsEndMinuteDisabledPipe,
                         ZIsEndSecondDisabledPipe,
@@ -3164,7 +3023,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
                         TranslatePipe,
                     ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'block min-w-0',
-                    }, 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 p-0\"\n      (zHideStart)=\"onPopoverHide()\"\n      (zShow)=\"onPopoverShow()\"\n      (zControl)=\"onPopoverControl($event)\"\n      [id]=\"pickerId\"\n      [class]=\"triggerClasses()\"\n      (keydown)=\"onTriggerKeydown($event)\">\n      <z-icon\n        [zType]=\"isRangeMode() ? 'lucideCalendarRange' : 'lucideCalendar'\"\n        zSize=\"16\"\n        class=\"text-muted-foreground shrink-0 cursor-pointer\"\n        (click)=\"$event.stopPropagation(); toggle()\" />\n\n      @if (isRangeMode()) {\n        <input\n          type=\"text\"\n          data-range-type=\"start\"\n          class=\"placeholder:text-muted-foreground w-0 min-w-0 flex-1 truncate bg-transparent text-center text-sm outline-none\"\n          [placeholder]=\"'i18n_z_ui_calendar_start_date' | translate\"\n          [value]=\"inputDisplayStart()\"\n          [disabled]=\"isDisabled()\"\n          [readonly]=\"zReadonly()\"\n          (click)=\"isOpen() && $event.stopPropagation()\"\n          (focus)=\"onInputFocus($event)\"\n          (input)=\"onStartInputChange($event)\"\n          (blur)=\"onInputBlur($event)\"\n          (keydown.enter)=\"onStartInputEnter($event)\"\n          (keydown.escape)=\"onStartInputEscape()\" />\n        <span class=\"text-muted-foreground text-sm\">-</span>\n        <input\n          type=\"text\"\n          data-range-type=\"end\"\n          class=\"placeholder:text-muted-foreground w-0 min-w-0 flex-1 truncate bg-transparent text-center text-sm outline-none\"\n          [placeholder]=\"'i18n_z_ui_calendar_end_date' | translate\"\n          [value]=\"inputDisplayEnd()\"\n          [disabled]=\"isDisabled()\"\n          [readonly]=\"zReadonly()\"\n          (click)=\"isOpen() && $event.stopPropagation()\"\n          (focus)=\"onInputFocus($event)\"\n          (input)=\"onEndInputChange($event)\"\n          (blur)=\"onInputBlur($event)\"\n          (keydown.enter)=\"onEndInputEnter($event)\"\n          (keydown.escape)=\"onEndInputEscape()\" />\n      } @else {\n        <input\n          #inputEl\n          type=\"text\"\n          class=\"placeholder:text-muted-foreground w-0 min-w-0 flex-1 truncate bg-transparent text-sm outline-none\"\n          [placeholder]=\"effectivePlaceholder()\"\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-sm transition-all\"\n          [class.opacity-0]=\"!hasValue()\"\n          [class.pointer-events-none]=\"!hasValue()\"\n          (click)=\"onClear($event)\">\n          <z-icon zType=\"lucideX\" zSize=\"18\" />\n        </button>\n      }\n    </div>\n  </div>\n\n  @if (hasError()) {\n    <p class=\"text-destructive animate-in fade-in slide-in-from-top-1 m-0 text-xs duration-200\">\n      {{ errorMessage() }}\n    </p>\n  }\n</div>\n\n<ng-template #calendarTpl>\n  <div\n    class=\"z-calendar-calendar bg-popover border-border flex max-h-[50dvh] max-w-[95vw] flex-col overflow-auto rounded-sm border shadow-lg min-[480px]:max-h-[55dvh] sm:max-h-none sm:max-w-none sm:flex-row sm:overflow-visible\"\n    (keydown)=\"onCalendarKeydown($event)\">\n    @if (zQuickSelect() && zMode() === 'range') {\n      <div\n        class=\"border-border flex shrink-0 flex-row gap-1 overflow-x-auto border-b p-2 sm:flex-col sm:gap-0 sm:space-y-1 sm:overflow-x-visible sm:border-r sm:border-b-0\">\n        @for (preset of quickSelectPresets; track preset.key) {\n          @let presetDisabled = preset | zIsPresetDisabled: zDisabledDate();\n          <button\n            type=\"button\"\n            class=\"cursor-pointer rounded-sm px-3 py-1.5 text-left text-sm whitespace-nowrap transition-colors\"\n            [class.hover:bg-muted]=\"activePresetKey() !== preset.key && !presetDisabled\"\n            [class.bg-primary]=\"activePresetKey() === preset.key\"\n            [class.text-primary-foreground]=\"activePresetKey() === preset.key\"\n            [class.font-medium]=\"activePresetKey() === preset.key\"\n            [class.opacity-40]=\"presetDisabled\"\n            [class.cursor-not-allowed]=\"presetDisabled\"\n            [disabled]=\"presetDisabled\"\n            (click)=\"onQuickSelect(preset)\">\n            {{ preset.label | translate }}\n          </button>\n        }\n      </div>\n    }\n    <div\n      class=\"flex flex-1 flex-col items-center overflow-auto py-2 sm:overflow-visible\"\n      [class]=\"!isRangeMode() ? 'w-[17.5rem]' : ''\">\n      @if (!isTimeMode()) {\n        <div\n          class=\"z-calendars-wrapper flex w-full flex-col items-center gap-3 sm:flex-row sm:items-stretch sm:justify-center sm:gap-0\">\n          <!-- First Calendar -->\n          <div class=\"z-calendar-section flex w-[17.5rem] shrink-0 flex-col\">\n            @if (!isTimeMode()) {\n              <!-- Header -->\n              <div class=\"border-border flex w-full items-center justify-between gap-0.5 px-2\">\n                <!-- Double left arrow (always visible) -->\n                <button\n                  type=\"button\"\n                  z-button\n                  zType=\"ghost\"\n                  zSize=\"sm\"\n                  class=\"size-7 shrink-0 p-0!\"\n                  [zWave]=\"false\"\n                  (click)=\"navigatePreviousFast()\">\n                  <z-icon zType=\"lucideChevronsLeft\" zSize=\"18\" />\n                </button>\n\n                <!-- Single left arrow (hidden in month/year view) -->\n                @if (currentView() === 'day') {\n                  <button\n                    type=\"button\"\n                    z-button\n                    zType=\"ghost\"\n                    zSize=\"sm\"\n                    class=\"size-7 shrink-0 p-0!\"\n                    [zWave]=\"false\"\n                    (click)=\"navigatePrevious()\">\n                    <z-icon zType=\"lucideChevronLeft\" zSize=\"18\" />\n                  </button>\n                }\n\n                <!-- Header content -->\n                <div class=\"flex flex-1 shrink-0 items-center justify-center gap-0\">\n                  @if (currentView() === 'day') {\n                    <!-- Day view: Month + Year -->\n                    @if (!isYearMode() && !isQuarterMode()) {\n                      <button\n                        type=\"button\"\n                        z-button\n                        zType=\"ghost\"\n                        zSize=\"sm\"\n                        class=\"h-7 px-1.5 text-sm!\"\n                        [zWave]=\"false\"\n                        (click)=\"setView('month')\">\n                        {{ currentMonthName() }}\n                      </button>\n                    }\n                    <button\n                      type=\"button\"\n                      z-button\n                      zType=\"ghost\"\n                      zSize=\"sm\"\n                      class=\"h-7 px-1.5 text-sm!\"\n                      [zWave]=\"false\"\n                      [zDisabled]=\"isYearMode()\"\n                      (click)=\"setView('year')\">\n                      {{ currentYear() }}\n                    </button>\n                  } @else if (currentView() === 'month') {\n                    <!-- Month view: Only Year -->\n                    <button\n                      type=\"button\"\n                      z-button\n                      zType=\"ghost\"\n                      zSize=\"sm\"\n                      class=\"h-7 px-1.5 text-sm!\"\n                      [zWave]=\"false\"\n                      (click)=\"setView('year')\">\n                      {{ currentYear() }}\n                    </button>\n                  } @else if (currentView() === 'year') {\n                    <!-- Year view: Year Range -->\n                    <span class=\"text-sm font-medium\">\n                      {{ yearRange()[0] }} - {{ yearRange()[yearRange().length - 1] }}\n                    </span>\n                  } @else if (currentView() === 'quarter') {\n                    <!-- Quarter view: Only Year -->\n                    <button\n                      type=\"button\"\n                      z-button\n                      zType=\"ghost\"\n                      zSize=\"sm\"\n                      class=\"h-7 px-1.5 text-sm!\"\n                      [zWave]=\"false\"\n                      (click)=\"setView('year')\">\n                      {{ currentYear() }}\n                    </button>\n                  }\n                </div>\n\n                <!-- Single right arrow (hidden in month/year view) -->\n                @if (currentView() === 'day') {\n                  <button\n                    type=\"button\"\n                    z-button\n                    zType=\"ghost\"\n                    zSize=\"sm\"\n                    class=\"size-7 shrink-0 p-0!\"\n                    [zDisabled]=\"!canNavigateStartNext()\"\n                    [zWave]=\"false\"\n                    (click)=\"navigateNext()\">\n                    <z-icon zType=\"lucideChevronRight\" zSize=\"18\" />\n                  </button>\n                }\n\n                <!-- Double right arrow (always visible) -->\n                <button\n                  type=\"button\"\n                  z-button\n                  zType=\"ghost\"\n                  zSize=\"sm\"\n                  class=\"size-7 shrink-0 p-0!\"\n                  [zDisabled]=\"!canNavigateStartNext()\"\n                  [zWave]=\"false\"\n                  (click)=\"navigateNextFast()\">\n                  <z-icon zType=\"lucideChevronsRight\" zSize=\"18\" />\n                </button>\n              </div>\n\n              <!-- Body -->\n              <div\n                class=\"flex h-full w-full flex-col items-center justify-center p-2\"\n                [class.min-h-[14rem]]=\"!isQuarterMode()\"\n                [class.h-[14rem]]=\"\n                  !isYearMode() &&\n                  !isMonthMode() &&\n                  !isQuarterMode() &&\n                  (currentView() === 'month' || currentView() === 'year')\n                \"\n                [class.min-h-[6.25rem]]=\"isQuarterMode()\"\n                [class.!min-h-auto]=\"isYearMode() || isMonthMode() || isQuarterMode()\"\n                [class.!h-auto]=\"isYearMode() || isMonthMode() || isQuarterMode()\">\n                @if (currentView() === 'day') {\n                  <div\n                    class=\"flex h-full w-full flex-1 flex-col gap-1\"\n                    [class.animate-calendar-enter]=\"uiState().hasViewChanged\">\n                    <!-- Weekday headers -->\n                    <div class=\"flex w-full flex-1 justify-center gap-1\">\n                      @for (weekday of weekdayNames(); track weekday) {\n                        <div\n                          class=\"text-muted-foreground flex h-[1.875rem] w-[2.0313rem] items-center justify-center text-xs font-medium\">\n                          {{ weekday }}\n                        </div>\n                      }\n                    </div>\n\n                    <!-- Date rows -->\n                    @for (week of calendarDays(); track $index) {\n                      <div class=\"flex w-full flex-1 justify-center gap-1\">\n                        @for (day of week; track day.date.getTime()) {\n                          <button\n                            type=\"button\"\n                            [class]=\"day | zDayClasses\"\n                            class=\"h-[1.875rem] !w-[2.0313rem] !text-sm\"\n                            [disabled]=\"day.isDisabled\"\n                            (click)=\"onDayClick(day)\"\n                            (mouseenter)=\"onDayHover(day)\"\n                            (mouseleave)=\"onDayLeave()\">\n                            {{ day.day }}\n                          </button>\n                        }\n                      </div>\n                    }\n                  </div>\n                }\n                @if (currentView() === 'month') {\n                  <div\n                    class=\"grid h-full w-full grid-cols-3 grid-rows-4 gap-2.5 gap-y-5!\"\n                    [class.animate-calendar-enter]=\"uiState().hasViewChanged\">\n                    @for (month of monthNames(); track month; let i = $index) {\n                      @let monthDisabled = i | zIsStartMonthDisabled: startMonthDisabledContext();\n                      <div class=\"flex flex-1 items-center justify-center\">\n                        <button\n                          type=\"button\"\n                          [class]=\"i | zMonthClasses: selectedMonthIndex() : todayMonthIndex()\"\n                          class=\"!h-7 !w-full !text-sm\"\n                          [disabled]=\"monthDisabled\"\n                          [class.opacity-30]=\"monthDisabled\"\n                          [class.cursor-not-allowed]=\"monthDisabled\"\n                          (click)=\"onMonthSelect(i)\">\n                          {{ month }}\n                        </button>\n                      </div>\n                    }\n                  </div>\n                }\n\n                @if (currentView() === 'year') {\n                  <div\n                    class=\"grid h-full w-full grid-cols-3 grid-rows-4 gap-2.5 gap-y-5!\"\n                    [class.animate-calendar-enter]=\"uiState().hasViewChanged\">\n                    @for (year of yearRange(); track year) {\n                      @let yearDisabled = year | zIsStartYearDisabled: startYearDisabledContext();\n                      <div class=\"flex flex-1 items-center justify-center\">\n                        <button\n                          type=\"button\"\n                          [class]=\"year | zYearClasses: selectedYear() : todayYear()\"\n                          class=\"!h-7 !w-full !text-sm\"\n                          [disabled]=\"yearDisabled\"\n                          [class.opacity-30]=\"yearDisabled\"\n                          [class.cursor-not-allowed]=\"yearDisabled\"\n                          (click)=\"onYearClick(year)\">\n                          {{ year }}\n                        </button>\n                      </div>\n                    }\n                  </div>\n                }\n\n                @if (currentView() === 'quarter') {\n                  <div\n                    class=\"grid h-full w-full grid-cols-2 grid-rows-2 gap-2 p-1\"\n                    [class.animate-calendar-enter]=\"uiState().hasViewChanged\">\n                    @for (quarter of quarterNames; track quarter; let i = $index) {\n                      <div class=\"flex flex-1 items-center justify-center\">\n                        <button\n                          type=\"button\"\n                          [class]=\"i | zQuarterClasses: selectedQuarterIndex() : todayQuarterIndex()\"\n                          class=\"!h-8 !w-full !text-sm\"\n                          (click)=\"onQuarterClick(i)\">\n                          {{ quarter }}\n                        </button>\n                      </div>\n                    }\n                  </div>\n                }\n              </div>\n            }\n          </div>\n\n          <!-- Second Calendar (Range Mode Only) -->\n          @if (isRangeMode()) {\n            <!-- Divider -->\n            <div class=\"border-border bg-border hidden self-stretch sm:block sm:w-px\"></div>\n            <div class=\"border-border bg-border block h-px w-full sm:hidden\"></div>\n\n            <div class=\"z-calendar-section flex w-[17.5rem] shrink-0 flex-col\">\n              <!-- Header -->\n              <div class=\"border-border flex w-full items-center justify-between gap-0.5 px-2\">\n                <button\n                  type=\"button\"\n                  z-button\n                  zType=\"ghost\"\n                  zSize=\"sm\"\n                  class=\"size-7 shrink-0 p-0!\"\n                  [zDisabled]=\"!canNavigateEndPrev()\"\n                  [zWave]=\"false\"\n                  (click)=\"navigateEndPreviousFast()\">\n                  <z-icon zType=\"lucideChevronsLeft\" zSize=\"18\" />\n                </button>\n\n                <button\n                  type=\"button\"\n                  z-button\n                  zType=\"ghost\"\n                  zSize=\"sm\"\n                  class=\"size-7 shrink-0 p-0!\"\n                  [zDisabled]=\"!canNavigateEndPrev()\"\n                  [zWave]=\"false\"\n                  (click)=\"navigateEndPrevious()\">\n                  <z-icon zType=\"lucideChevronLeft\" zSize=\"18\" />\n                </button>\n\n                <div class=\"flex w-[7.5rem] shrink-0 items-center justify-center gap-0\">\n                  <button\n                    type=\"button\"\n                    z-button\n                    zType=\"ghost\"\n                    zSize=\"sm\"\n                    class=\"h-7 px-1.5 text-sm!\"\n                    [zWave]=\"false\"\n                    (click)=\"setEndView('month')\">\n                    {{ endMonthName() }}\n                  </button>\n\n                  <button\n                    type=\"button\"\n                    z-button\n                    zType=\"ghost\"\n                    zSize=\"sm\"\n                    class=\"h-7 px-1.5 text-sm!\"\n                    [zWave]=\"false\"\n                    (click)=\"setEndView('year')\">\n                    {{ endMonthYear() }}\n                  </button>\n                </div>\n\n                <button\n                  type=\"button\"\n                  z-button\n                  zType=\"ghost\"\n                  zSize=\"sm\"\n                  class=\"size-7 shrink-0 p-0!\"\n                  [zWave]=\"false\"\n                  [zWave]=\"false\"\n                  (click)=\"navigateEndNext()\">\n                  <z-icon zType=\"lucideChevronRight\" zSize=\"18\" />\n                </button>\n\n                <button\n                  type=\"button\"\n                  z-button\n                  zType=\"ghost\"\n                  zSize=\"sm\"\n                  class=\"size-7 shrink-0 p-0!\"\n                  [zWave]=\"false\"\n                  [zWave]=\"false\"\n                  (click)=\"navigateEndNextFast()\">\n                  <z-icon zType=\"lucideChevronsRight\" zSize=\"18\" />\n                </button>\n              </div>\n\n              <!-- Body -->\n              <div\n                class=\"flex h-full min-h-[14rem] w-full flex-col items-center justify-center p-2\"\n                [class.h-[14rem]]=\"endView() === 'month' || endView() === 'year'\">\n                @if (endView() === 'day') {\n                  <div\n                    class=\"flex h-full w-full flex-1 flex-col gap-1\"\n                    [class.animate-calendar-enter]=\"uiState().hasEndViewChanged\">\n                    <!-- Weekday headers -->\n                    <div class=\"flex w-full flex-1 justify-center gap-1\">\n                      @for (weekday of weekdayNames(); track weekday) {\n                        <div\n                          class=\"text-muted-foreground flex h-[1.875rem] w-[2.0313rem] items-center justify-center text-xs font-medium\">\n                          {{ weekday }}\n                        </div>\n                      }\n                    </div>\n\n                    <!-- Date rows -->\n                    @for (week of calendarDaysEnd(); track $index) {\n                      <div class=\"flex w-full flex-1 justify-center gap-1\">\n                        @for (day of week; track day.date.getTime()) {\n                          <button\n                            type=\"button\"\n                            [class]=\"day | zDayClasses\"\n                            class=\"h-[1.875rem] !w-[2.0313rem] !text-sm\"\n                            [disabled]=\"day.isDisabled\"\n                            (click)=\"onDayClick(day)\"\n                            (mouseenter)=\"onDayHover(day)\"\n                            (mouseleave)=\"onDayLeave()\">\n                            {{ day.day }}\n                          </button>\n                        }\n                      </div>\n                    }\n                  </div>\n                }\n                @if (endView() === 'month') {\n                  <div\n                    class=\"grid h-full w-full grid-cols-3 grid-rows-4 gap-2.5 gap-y-5!\"\n                    [class.animate-calendar-enter]=\"uiState().hasEndViewChanged\">\n                    @for (month of monthNames(); track month; let i = $index) {\n                      @let endMonthDisabled = i | zIsEndMonthDisabled: endMonthDisabledContext();\n                      <div class=\"flex flex-1 items-center justify-center\">\n                        <button\n                          type=\"button\"\n                          [class]=\"i | zMonthClasses: endMonth().getMonth() : -1\"\n                          class=\"!h-7 !w-full !text-sm\"\n                          [disabled]=\"endMonthDisabled\"\n                          [class.opacity-30]=\"endMonthDisabled\"\n                          [class.cursor-not-allowed]=\"endMonthDisabled\"\n                          (click)=\"onEndMonthClick(i)\">\n                          {{ month }}\n                        </button>\n                      </div>\n                    }\n                  </div>\n                }\n\n                @if (endView() === 'year') {\n                  <div\n                    class=\"grid h-full w-full grid-cols-3 grid-rows-4 gap-2.5 gap-y-5!\"\n                    [class.animate-calendar-enter]=\"uiState().hasEndViewChanged\">\n                    @for (year of endYearRange(); track year) {\n                      @let endYearDisabled = year | zIsEndYearDisabled: endYearDisabledContext();\n                      <div class=\"flex flex-1 items-center justify-center\">\n                        <button\n                          type=\"button\"\n                          [class]=\"year | zYearClasses: endMonth().getFullYear() : -1\"\n                          class=\"!h-7 !w-full !text-sm\"\n                          [disabled]=\"endYearDisabled\"\n                          [class.opacity-30]=\"endYearDisabled\"\n                          [class.cursor-not-allowed]=\"endYearDisabled\"\n                          (click)=\"onEndYearClick(year)\">\n                          {{ year }}\n                        </button>\n                      </div>\n                    }\n                  </div>\n                }\n              </div>\n            </div>\n          }\n        </div>\n\n        <!-- Compact Time Picker Below Calendar (Single Date) -->\n        @if (!isRangeMode() && zShowTime()) {\n          <div class=\"border-border w-full border-t text-center\">\n            <div\n              class=\"hover:bg-muted my-1 inline-flex cursor-pointer items-center rounded-sm px-2 py-1 transition-colors\"\n              z-popover\n              [zPopoverContent]=\"timeDropdownTpl\"\n              zPosition=\"bottom\"\n              zPopoverWidth=\"auto\"\n              [zOffset]=\"4\"\n              zTrigger=\"click\"\n              zClass=\"border-border shadow-md\"\n              (zShow)=\"onTimeDropdownShow()\">\n              <div class=\"flex items-center justify-center gap-1\">\n                <!-- Hour -->\n                @if (zShowHour()) {\n                  <div\n                    class=\"hover:bg-muted/50 flex min-w-7 cursor-pointer flex-col items-center gap-0 rounded-sm px-1 transition-colors\">\n                    <button\n                      type=\"button\"\n                      class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mb-0.5 flex h-4 w-full cursor-pointer items-center justify-center rounded-sm border-none bg-transparent transition-colors\"\n                      (click)=\"decrementHour(); $event.stopPropagation()\">\n                      <z-icon zType=\"lucideChevronUp\" zSize=\"18\" />\n                    </button>\n                    <span class=\"text-foreground min-w-5 text-center text-sm leading-tight font-medium select-none\">\n                      {{ formattedHour() }}\n                    </span>\n                    <button\n                      type=\"button\"\n                      class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mt-0.5 flex h-4 w-full cursor-pointer items-center justify-center rounded-sm border-none bg-transparent transition-colors\"\n                      (click)=\"incrementHour(); $event.stopPropagation()\">\n                      <z-icon zType=\"lucideChevronDown\" zSize=\"18\" />\n                    </button>\n                  </div>\n                }\n                @if (zShowHour() && zShowMinute()) {\n                  <span class=\"text-muted-foreground text-sm font-medium\">:</span>\n                }\n                <!-- Minute -->\n                @if (zShowMinute()) {\n                  <div\n                    class=\"hover:bg-muted/50 flex min-w-7 cursor-pointer flex-col items-center gap-0 rounded-sm px-1 transition-colors\">\n                    <button\n                      type=\"button\"\n                      class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mb-0.5 flex h-4 w-full cursor-pointer items-center justify-center rounded-sm border-none bg-transparent transition-colors\"\n                      (click)=\"decrementMinute(); $event.stopPropagation()\">\n                      <z-icon zType=\"lucideChevronUp\" zSize=\"18\" />\n                    </button>\n                    <span class=\"text-foreground min-w-5 text-center text-sm leading-tight font-medium select-none\">\n                      {{ formattedMinute() }}\n                    </span>\n                    <button\n                      type=\"button\"\n                      class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mt-0.5 flex h-4 w-full cursor-pointer items-center justify-center rounded-sm border-none bg-transparent transition-colors\"\n                      (click)=\"incrementMinute(); $event.stopPropagation()\">\n                      <z-icon zType=\"lucideChevronDown\" zSize=\"18\" />\n                    </button>\n                  </div>\n                }\n                @if (zShowMinute() && zShowSecond()) {\n                  <span class=\"text-muted-foreground text-sm font-medium\">:</span>\n                }\n                <!-- Second -->\n                @if (zShowSecond()) {\n                  <div\n                    class=\"hover:bg-muted/50 flex min-w-7 cursor-pointer flex-col items-center gap-0 rounded-sm px-1 transition-colors\">\n                    <button\n                      type=\"button\"\n                      class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mb-0.5 flex h-4 w-full cursor-pointer items-center justify-center rounded-sm border-none bg-transparent transition-colors\"\n                      (click)=\"decrementSecond(); $event.stopPropagation()\">\n                      <z-icon zType=\"lucideChevronUp\" zSize=\"18\" />\n                    </button>\n                    <span class=\"text-foreground min-w-5 text-center text-sm leading-tight font-medium select-none\">\n                      {{ formattedSecond() }}\n                    </span>\n                    <button\n                      type=\"button\"\n                      class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mt-0.5 flex h-4 w-full cursor-pointer items-center justify-center rounded-sm border-none bg-transparent transition-colors\"\n                      (click)=\"incrementSecond(); $event.stopPropagation()\">\n                      <z-icon zType=\"lucideChevronDown\" zSize=\"18\" />\n                    </button>\n                  </div>\n                }\n                <!-- AM/PM Toggle -->\n                @if (zTimeFormat() === '12h') {\n                  <button\n                    type=\"button\"\n                    class=\"bg-primary/10 text-primary hover:bg-primary/20 active:bg-primary/30 ml-1 flex w-8 cursor-pointer items-center justify-center rounded-sm border-none px-2 py-1 text-xs font-semibold transition-colors\"\n                    (click)=\"togglePeriod(); $event.stopPropagation()\">\n                    {{ period() }}\n                  </button>\n                }\n              </div>\n            </div>\n          </div>\n        }\n\n        <!-- Compact Time Pickers Below Calendars (Range Mode) -->\n        @if (isRangeMode() && zShowTime()) {\n          <div class=\"border-border flex w-full flex-col border-t sm:flex-row\">\n            <!-- Start Time -->\n            <div class=\"flex w-full flex-col items-center justify-center gap-1\">\n              <div\n                class=\"hover:bg-muted my-1 inline-flex cursor-pointer items-center rounded-sm px-2 py-1 transition-colors\"\n                z-popover\n                [zPopoverContent]=\"timeDropdownStartTpl\"\n                zPosition=\"bottom\"\n                zPopoverWidth=\"auto\"\n                [zOffset]=\"4\"\n                zTrigger=\"click\"\n                zClass=\"border-border shadow-md\"\n                (zShow)=\"onTimeDropdownShow()\">\n                <div class=\"flex items-center justify-center gap-1\">\n                  <!-- Hour -->\n                  @if (zShowHour()) {\n                    <div\n                      class=\"hover:bg-muted/50 flex min-w-7 cursor-pointer flex-col items-center gap-0 rounded-sm px-1 transition-colors\">\n                      <button\n                        type=\"button\"\n                        class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mb-0.5 flex h-4 w-full cursor-pointer items-center justify-center rounded-sm border-none bg-transparent transition-colors\"\n                        (click)=\"decrementHour(); $event.stopPropagation()\">\n                        <z-icon zType=\"lucideChevronUp\" zSize=\"18\" />\n                      </button>\n                      <span class=\"text-foreground min-w-5 text-center text-sm leading-tight font-medium select-none\">\n                        {{ formattedHour() }}\n                      </span>\n                      <button\n                        type=\"button\"\n                        class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mt-0.5 flex h-4 w-full cursor-pointer items-center justify-center rounded-sm border-none bg-transparent transition-colors\"\n                        (click)=\"incrementHour(); $event.stopPropagation()\">\n                        <z-icon zType=\"lucideChevronDown\" zSize=\"18\" />\n                      </button>\n                    </div>\n                  }\n                  @if (zShowHour() && zShowMinute()) {\n                    <span class=\"text-muted-foreground text-sm font-medium\">:</span>\n                  }\n                  <!-- Minute -->\n                  @if (zShowMinute()) {\n                    <div\n                      class=\"hover:bg-muted/50 flex min-w-7 cursor-pointer flex-col items-center gap-0 rounded-sm px-1 transition-colors\">\n                      <button\n                        type=\"button\"\n                        class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mb-0.5 flex h-4 w-full cursor-pointer items-center justify-center rounded-sm border-none bg-transparent transition-colors\"\n                        (click)=\"decrementMinute(); $event.stopPropagation()\">\n                        <z-icon zType=\"lucideChevronUp\" zSize=\"18\" />\n                      </button>\n                      <span class=\"text-foreground min-w-5 text-center text-sm leading-tight font-medium select-none\">\n                        {{ formattedMinute() }}\n                      </span>\n                      <button\n                        type=\"button\"\n                        class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mt-0.5 flex h-4 w-full cursor-pointer items-center justify-center rounded-sm border-none bg-transparent transition-colors\"\n                        (click)=\"incrementMinute(); $event.stopPropagation()\">\n                        <z-icon zType=\"lucideChevronDown\" zSize=\"18\" />\n                      </button>\n                    </div>\n                  }\n                  @if (zShowMinute() && zShowSecond()) {\n                    <span class=\"text-muted-foreground text-sm font-medium\">:</span>\n                  }\n                  <!-- Second -->\n                  @if (zShowSecond()) {\n                    <div\n                      class=\"hover:bg-muted/50 flex min-w-7 cursor-pointer flex-col items-center gap-0 rounded-sm px-1 transition-colors\">\n                      <button\n                        type=\"button\"\n                        class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mb-0.5 flex h-4 w-full cursor-pointer items-center justify-center rounded-sm border-none bg-transparent transition-colors\"\n                        (click)=\"decrementSecond(); $event.stopPropagation()\">\n                        <z-icon zType=\"lucideChevronUp\" zSize=\"18\" />\n                      </button>\n                      <span class=\"text-foreground min-w-5 text-center text-sm leading-tight font-medium select-none\">\n                        {{ formattedSecond() }}\n                      </span>\n                      <button\n                        type=\"button\"\n                        class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mt-0.5 flex h-4 w-full cursor-pointer items-center justify-center rounded-sm border-none bg-transparent transition-colors\"\n                        (click)=\"incrementSecond(); $event.stopPropagation()\">\n                        <z-icon zType=\"lucideChevronDown\" zSize=\"18\" />\n                      </button>\n                    </div>\n                  }\n                  <!-- AM/PM Toggle -->\n                  @if (zTimeFormat() === '12h') {\n                    <button\n                      type=\"button\"\n                      class=\"bg-primary/10 text-primary hover:bg-primary/20 active:bg-primary/30 ml-1 flex w-8 cursor-pointer items-center justify-center rounded-sm border-none px-2 py-1 text-xs font-semibold transition-colors\"\n                      (click)=\"togglePeriod(); $event.stopPropagation()\">\n                      {{ period() }}\n                    </button>\n                  }\n                </div>\n              </div>\n            </div>\n\n            <!-- Divider space -->\n            <div class=\"border-border bg-border h-px self-stretch sm:block sm:h-full sm:w-px\"></div>\n\n            <!-- End Time -->\n            <div class=\"flex w-full flex-col items-center justify-center gap-1\">\n              <div\n                class=\"hover:bg-muted my-1 inline-flex cursor-pointer items-center rounded-sm px-2 py-1 transition-colors\"\n                z-popover\n                [zPopoverContent]=\"timeDropdownEndTpl\"\n                zPosition=\"bottom\"\n                zPopoverWidth=\"auto\"\n                [zOffset]=\"4\"\n                zTrigger=\"click\"\n                zClass=\"border-border shadow-md\"\n                (zShow)=\"onTimeDropdownEndShow()\">\n                <div class=\"flex items-center justify-center gap-1\">\n                  <!-- Hour -->\n                  @if (zShowHour()) {\n                    <div\n                      class=\"hover:bg-muted/50 flex min-w-7 cursor-pointer flex-col items-center gap-0 rounded-sm px-1 transition-colors\">\n                      <button\n                        type=\"button\"\n                        class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mb-0.5 flex h-4 w-full cursor-pointer items-center justify-center rounded-sm border-none bg-transparent transition-colors\"\n                        (click)=\"decrementHourEnd(); $event.stopPropagation()\">\n                        <z-icon zType=\"lucideChevronUp\" zSize=\"18\" />\n                      </button>\n                      <span class=\"text-foreground min-w-5 text-center text-sm leading-tight font-medium select-none\">\n                        {{ formattedHourEnd() }}\n                      </span>\n                      <button\n                        type=\"button\"\n                        class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mt-0.5 flex h-4 w-full cursor-pointer items-center justify-center rounded-sm border-none bg-transparent transition-colors\"\n                        (click)=\"incrementHourEnd(); $event.stopPropagation()\">\n                        <z-icon zType=\"lucideChevronDown\" zSize=\"18\" />\n                      </button>\n                    </div>\n                  }\n                  @if (zShowHour() && zShowMinute()) {\n                    <span class=\"text-muted-foreground text-sm font-medium\">:</span>\n                  }\n                  <!-- Minute -->\n                  @if (zShowMinute()) {\n                    <div\n                      class=\"hover:bg-muted/50 flex min-w-7 cursor-pointer flex-col items-center gap-0 rounded-sm px-1 transition-colors\">\n                      <button\n                        type=\"button\"\n                        class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mb-0.5 flex h-4 w-full cursor-pointer items-center justify-center rounded-sm border-none bg-transparent transition-colors\"\n                        (click)=\"decrementMinuteEnd(); $event.stopPropagation()\">\n                        <z-icon zType=\"lucideChevronUp\" zSize=\"18\" />\n                      </button>\n                      <span class=\"text-foreground min-w-5 text-center text-sm leading-tight font-medium select-none\">\n                        {{ formattedMinuteEnd() }}\n                      </span>\n                      <button\n                        type=\"button\"\n                        class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mt-0.5 flex h-4 w-full cursor-pointer items-center justify-center rounded-sm border-none bg-transparent transition-colors\"\n                        (click)=\"incrementMinuteEnd(); $event.stopPropagation()\">\n                        <z-icon zType=\"lucideChevronDown\" zSize=\"18\" />\n                      </button>\n                    </div>\n                  }\n                  @if (zShowMinute() && zShowSecond()) {\n                    <span class=\"text-muted-foreground text-sm font-medium\">:</span>\n                  }\n                  <!-- Second -->\n                  @if (zShowSecond()) {\n                    <div\n                      class=\"hover:bg-muted/50 flex min-w-7 cursor-pointer flex-col items-center gap-0 rounded-sm px-1 transition-colors\">\n                      <button\n                        type=\"button\"\n                        class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mb-0.5 flex h-4 w-full cursor-pointer items-center justify-center rounded-sm border-none bg-transparent transition-colors\"\n                        (click)=\"decrementSecondEnd(); $event.stopPropagation()\">\n                        <z-icon zType=\"lucideChevronUp\" zSize=\"18\" />\n                      </button>\n                      <span class=\"text-foreground min-w-5 text-center text-sm leading-tight font-medium select-none\">\n                        {{ formattedSecondEnd() }}\n                      </span>\n                      <button\n                        type=\"button\"\n                        class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mt-0.5 flex h-4 w-full cursor-pointer items-center justify-center rounded-sm border-none bg-transparent transition-colors\"\n                        (click)=\"incrementSecondEnd(); $event.stopPropagation()\">\n                        <z-icon zType=\"lucideChevronDown\" zSize=\"18\" />\n                      </button>\n                    </div>\n                  }\n                  <!-- AM/PM Toggle -->\n                  @if (zTimeFormat() === '12h') {\n                    <button\n                      type=\"button\"\n                      class=\"bg-primary/10 text-primary hover:bg-primary/20 active:bg-primary/30 ml-1 flex w-8 cursor-pointer items-center justify-center rounded-sm border-none px-2 py-1 text-xs font-semibold transition-colors\"\n                      (click)=\"togglePeriodEnd(); $event.stopPropagation()\">\n                      {{ periodEnd() }}\n                    </button>\n                  }\n                </div>\n              </div>\n            </div>\n          </div>\n        }\n      } @else {\n        <!-- Time Only Mode - Compact Display -->\n        <div class=\"flex flex-col items-center gap-3 pb-2\">\n          <div\n            class=\"hover:bg-muted inline-flex cursor-pointer items-center rounded-sm px-3 py-2 transition-colors\"\n            z-popover\n            [zPopoverContent]=\"timeDropdownTpl\"\n            zPosition=\"bottom\"\n            zPopoverWidth=\"auto\"\n            [zOffset]=\"4\"\n            zTrigger=\"click\"\n            zClass=\"border-border shadow-md\"\n            (zShow)=\"onTimeDropdownShow()\">\n            <div class=\"flex items-center justify-center gap-1.5\">\n              <!-- Hour -->\n              @if (zShowHour()) {\n                <div\n                  class=\"hover:bg-muted/50 flex min-w-9 cursor-pointer flex-col items-center gap-0 rounded-sm px-1.5 transition-colors\">\n                  <button\n                    type=\"button\"\n                    class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mb-1 flex h-5 w-full cursor-pointer items-center justify-center rounded-sm border-none bg-transparent transition-colors\"\n                    (click)=\"decrementHour(); $event.stopPropagation()\">\n                    <z-icon zType=\"lucideChevronUp\" zSize=\"16\" />\n                  </button>\n                  <span class=\"text-foreground min-w-6 text-center text-base leading-tight font-medium select-none\">\n                    {{ formattedHour() }}\n                  </span>\n                  <button\n                    type=\"button\"\n                    class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mt-1 flex h-5 w-full cursor-pointer items-center justify-center rounded-sm border-none bg-transparent transition-colors\"\n                    (click)=\"incrementHour(); $event.stopPropagation()\">\n                    <z-icon zType=\"lucideChevronDown\" zSize=\"16\" />\n                  </button>\n                </div>\n              }\n              @if (zShowHour() && zShowMinute()) {\n                <span class=\"text-muted-foreground text-base font-medium\">:</span>\n              }\n              <!-- Minute -->\n              @if (zShowMinute()) {\n                <div\n                  class=\"hover:bg-muted/50 flex min-w-9 cursor-pointer flex-col items-center gap-0 rounded-sm px-1.5 transition-colors\">\n                  <button\n                    type=\"button\"\n                    class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mb-1 flex h-5 w-full cursor-pointer items-center justify-center rounded-sm border-none bg-transparent transition-colors\"\n                    (click)=\"decrementMinute(); $event.stopPropagation()\">\n                    <z-icon zType=\"lucideChevronUp\" zSize=\"16\" />\n                  </button>\n                  <span class=\"text-foreground min-w-6 text-center text-base leading-tight font-medium select-none\">\n                    {{ formattedMinute() }}\n                  </span>\n                  <button\n                    type=\"button\"\n                    class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mt-1 flex h-5 w-full cursor-pointer items-center justify-center rounded-sm border-none bg-transparent transition-colors\"\n                    (click)=\"incrementMinute(); $event.stopPropagation()\">\n                    <z-icon zType=\"lucideChevronDown\" zSize=\"16\" />\n                  </button>\n                </div>\n              }\n              @if (zShowMinute() && zShowSecond()) {\n                <span class=\"text-muted-foreground text-base font-medium\">:</span>\n              }\n              <!-- Second -->\n              @if (zShowSecond()) {\n                <div\n                  class=\"hover:bg-muted/50 flex min-w-9 cursor-pointer flex-col items-center gap-0 rounded-sm px-1.5 transition-colors\">\n                  <button\n                    type=\"button\"\n                    class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mb-1 flex h-5 w-full cursor-pointer items-center justify-center rounded-sm border-none bg-transparent transition-colors\"\n                    (click)=\"decrementSecond(); $event.stopPropagation()\">\n                    <z-icon zType=\"lucideChevronUp\" zSize=\"16\" />\n                  </button>\n                  <span class=\"text-foreground min-w-6 text-center text-base leading-tight font-medium select-none\">\n                    {{ formattedSecond() }}\n                  </span>\n                  <button\n                    type=\"button\"\n                    class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mt-1 flex h-5 w-full cursor-pointer items-center justify-center rounded-sm border-none bg-transparent transition-colors\"\n                    (click)=\"incrementSecond(); $event.stopPropagation()\">\n                    <z-icon zType=\"lucideChevronDown\" zSize=\"16\" />\n                  </button>\n                </div>\n              }\n              <!-- AM/PM Toggle -->\n              @if (zTimeFormat() === '12h') {\n                <button\n                  type=\"button\"\n                  class=\"bg-primary/10 text-primary hover:bg-primary/20 active:bg-primary/30 ml-1 flex w-10 cursor-pointer items-center justify-center rounded-sm border-none px-2.5 py-1.5 text-sm font-semibold transition-colors\"\n                  (click)=\"togglePeriod(); $event.stopPropagation()\">\n                  {{ period() }}\n                </button>\n              }\n            </div>\n          </div>\n        </div>\n      }\n\n      @if (!(zQuickSelect() && zMode() === 'range' && !showOkButton() && !showCancelButton())) {\n        <div class=\"border-border flex w-full items-center justify-between gap-2 border-t px-2 pt-2\">\n          @if (!zQuickSelect() || zMode() !== 'range') {\n            <button type=\"button\" z-button zType=\"secondary\" zSize=\"sm\" [zWave]=\"false\" (click)=\"onTodayClick()\">\n              {{ todayButtonText() }}\n            </button>\n          } @else {\n            <div></div>\n          }\n\n          @if (showOkButton() || showCancelButton()) {\n            <div class=\"flex items-center gap-2\">\n              @if (showCancelButton()) {\n                <button type=\"button\" z-button zType=\"outline\" zSize=\"sm\" (click)=\"onCancelClick()\">\n                  {{ zCancelText() ?? ('i18n_z_ui_calendar_cancel' | translate) }}\n                </button>\n              }\n              @if (showOkButton()) {\n                <button type=\"button\" z-button zSize=\"sm\" [zDisabled]=\"!canApply()\" (click)=\"onOkClick()\">\n                  {{ zOkText() ?? ('i18n_z_ui_calendar_ok' | translate) }}\n                </button>\n              }\n            </div>\n          }\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #timeDropdownTpl>\n  <div class=\"bg-popover flex overflow-hidden rounded-sm\">\n    @if (zShowHour()) {\n      <div\n        class=\"flex flex-col\"\n        [class.border-r]=\"zShowMinute() || zShowSecond()\"\n        [class.border-border]=\"zShowMinute() || zShowSecond()\">\n        <ng-scrollbar\n          class=\"z-time-scroll-hour h-[12.5rem] w-12\"\n          [class.rounded-sm]=\"!zShowMinute() && !zShowSecond()\"\n          [class.rounded-l-sm]=\"zShowMinute() || zShowSecond()\"\n          track=\"vertical\">\n          <div class=\"flex flex-col\">\n            @for (hr of hourOptions(); track hr) {\n              @let hrSelected = hr | zIsTimeSelected: displayHour();\n              <button\n                type=\"button\"\n                class=\"flex h-7 shrink-0 cursor-pointer items-center justify-center text-sm transition-colors\"\n                [class.hover:bg-muted]=\"!hrSelected\"\n                [class.bg-primary]=\"hrSelected\"\n                [class.text-primary-foreground]=\"hrSelected\"\n                [class.font-medium]=\"hrSelected\"\n                (click)=\"selectHour(hr)\">\n                {{ hr | number: '2.0-0' }}\n              </button>\n            }\n          </div>\n        </ng-scrollbar>\n      </div>\n    }\n    @if (zShowMinute()) {\n      <div class=\"flex flex-col\" [class.border-r]=\"zShowSecond()\" [class.border-border]=\"zShowSecond()\">\n        <ng-scrollbar\n          class=\"z-time-scroll-minute h-[12.5rem] w-12\"\n          [class.rounded-sm]=\"!zShowHour() && !zShowSecond()\"\n          [class.rounded-l-sm]=\"!zShowHour() && zShowSecond()\"\n          [class.rounded-r-sm]=\"zShowHour() && !zShowSecond()\"\n          track=\"vertical\">\n          <div class=\"flex flex-col\">\n            @for (min of minuteOptions; track min) {\n              @let minSelected = min | zIsTimeSelected: minute();\n              <button\n                type=\"button\"\n                class=\"flex h-7 shrink-0 cursor-pointer items-center justify-center text-sm transition-colors\"\n                [class.hover:bg-muted]=\"!minSelected\"\n                [class.bg-primary]=\"minSelected\"\n                [class.text-primary-foreground]=\"minSelected\"\n                [class.font-medium]=\"minSelected\"\n                (click)=\"selectMinute(min)\">\n                {{ min | number: '2.0-0' }}\n              </button>\n            }\n          </div>\n        </ng-scrollbar>\n      </div>\n    }\n    @if (zShowSecond()) {\n      <div class=\"flex flex-col\">\n        <ng-scrollbar\n          class=\"z-time-scroll-second h-[12.5rem] w-12\"\n          [class.rounded-sm]=\"!zShowHour() && !zShowMinute()\"\n          [class.rounded-r-sm]=\"zShowHour() || zShowMinute()\"\n          track=\"vertical\">\n          <div class=\"flex flex-col\">\n            @for (sec of secondOptions; track sec) {\n              @let secSelected = sec | zIsTimeSelected: second();\n              <button\n                type=\"button\"\n                class=\"flex h-7 shrink-0 cursor-pointer items-center justify-center text-sm transition-colors\"\n                [class.hover:bg-muted]=\"!secSelected\"\n                [class.bg-primary]=\"secSelected\"\n                [class.text-primary-foreground]=\"secSelected\"\n                [class.font-medium]=\"secSelected\"\n                (click)=\"selectSecond(sec)\">\n                {{ sec | number: '2.0-0' }}\n              </button>\n            }\n          </div>\n        </ng-scrollbar>\n      </div>\n    }\n  </div>\n</ng-template>\n\n<ng-template #timeDropdownStartTpl>\n  <div class=\"bg-popover flex overflow-hidden rounded-sm\">\n    @if (zShowHour()) {\n      <div\n        class=\"flex flex-col\"\n        [class.border-r]=\"zShowMinute() || zShowSecond()\"\n        [class.border-border]=\"zShowMinute() || zShowSecond()\">\n        <ng-scrollbar\n          class=\"z-time-scroll-hour h-[12.5rem] w-12\"\n          [class.rounded-sm]=\"!zShowMinute() && !zShowSecond()\"\n          [class.rounded-l-sm]=\"zShowMinute() || zShowSecond()\"\n          track=\"vertical\">\n          <div class=\"flex flex-col\">\n            @for (hr of hourOptions(); track hr) {\n              @let hrSelected = hr | zIsTimeSelected: displayHour();\n              <button\n                type=\"button\"\n                class=\"flex h-7 shrink-0 cursor-pointer items-center justify-center text-sm transition-colors\"\n                [class.hover:bg-muted]=\"!hrSelected\"\n                [class.bg-primary]=\"hrSelected\"\n                [class.text-primary-foreground]=\"hrSelected\"\n                [class.font-medium]=\"hrSelected\"\n                (click)=\"selectHour(hr)\">\n                {{ hr | number: '2.0-0' }}\n              </button>\n            }\n          </div>\n        </ng-scrollbar>\n      </div>\n    }\n    @if (zShowMinute()) {\n      <div class=\"flex flex-col\" [class.border-r]=\"zShowSecond()\" [class.border-border]=\"zShowSecond()\">\n        <ng-scrollbar\n          class=\"z-time-scroll-minute h-[12.5rem] w-12\"\n          [class.rounded-sm]=\"!zShowHour() && !zShowSecond()\"\n          [class.rounded-l-sm]=\"!zShowHour() && zShowSecond()\"\n          [class.rounded-r-sm]=\"zShowHour() && !zShowSecond()\"\n          track=\"vertical\">\n          <div class=\"flex flex-col\">\n            @for (min of minuteOptions; track min) {\n              @let minSelected = min | zIsTimeSelected: minute();\n              <button\n                type=\"button\"\n                class=\"flex h-7 shrink-0 cursor-pointer items-center justify-center text-sm transition-colors\"\n                [class.hover:bg-muted]=\"!minSelected\"\n                [class.bg-primary]=\"minSelected\"\n                [class.text-primary-foreground]=\"minSelected\"\n                [class.font-medium]=\"minSelected\"\n                (click)=\"selectMinute(min)\">\n                {{ min | number: '2.0-0' }}\n              </button>\n            }\n          </div>\n        </ng-scrollbar>\n      </div>\n    }\n    @if (zShowSecond()) {\n      <div class=\"flex flex-col\">\n        <ng-scrollbar\n          class=\"z-time-scroll-second h-[12.5rem] w-12\"\n          [class.rounded-sm]=\"!zShowHour() && !zShowMinute()\"\n          [class.rounded-r-sm]=\"zShowHour() || zShowMinute()\"\n          track=\"vertical\">\n          <div class=\"flex flex-col\">\n            @for (sec of secondOptions; track sec) {\n              @let secSelected = sec | zIsTimeSelected: second();\n              <button\n                type=\"button\"\n                class=\"flex h-7 shrink-0 cursor-pointer items-center justify-center text-sm transition-colors\"\n                [class.hover:bg-muted]=\"!secSelected\"\n                [class.bg-primary]=\"secSelected\"\n                [class.text-primary-foreground]=\"secSelected\"\n                [class.font-medium]=\"secSelected\"\n                (click)=\"selectSecond(sec)\">\n                {{ sec | number: '2.0-0' }}\n              </button>\n            }\n          </div>\n        </ng-scrollbar>\n      </div>\n    }\n  </div>\n</ng-template>\n\n<ng-template #timeDropdownEndTpl>\n  <div class=\"bg-popover flex overflow-hidden rounded-sm\">\n    @if (zShowHour()) {\n      <div\n        class=\"flex flex-col\"\n        [class.border-r]=\"zShowMinute() || zShowSecond()\"\n        [class.border-border]=\"zShowMinute() || zShowSecond()\">\n        <ng-scrollbar\n          class=\"z-time-scroll-hour-end h-[12.5rem] w-12\"\n          [class.rounded-sm]=\"!zShowMinute() && !zShowSecond()\"\n          [class.rounded-l-sm]=\"zShowMinute() || zShowSecond()\"\n          track=\"vertical\">\n          <div class=\"flex flex-col\">\n            @for (hr of hourOptions(); track hr) {\n              @let hrDisabled = hr | zIsEndHourDisabled: endTimeContext();\n              @let hrEndSelected = hr | zIsTimeSelected: displayHourEnd();\n              <button\n                type=\"button\"\n                class=\"flex h-7 shrink-0 items-center justify-center text-sm transition-colors\"\n                [class.hover:bg-muted]=\"!hrDisabled && !hrEndSelected\"\n                [class.cursor-pointer]=\"!hrDisabled\"\n                [class.bg-primary]=\"hrEndSelected\"\n                [class.text-primary-foreground]=\"hrEndSelected\"\n                [class.font-medium]=\"hrEndSelected\"\n                [class.opacity-30]=\"hrDisabled\"\n                [class.cursor-not-allowed]=\"hrDisabled\"\n                [disabled]=\"hrDisabled\"\n                (click)=\"selectHourEnd(hr)\">\n                {{ hr | number: '2.0-0' }}\n              </button>\n            }\n          </div>\n        </ng-scrollbar>\n      </div>\n    }\n    @if (zShowMinute()) {\n      <div class=\"flex flex-col\" [class.border-r]=\"zShowSecond()\" [class.border-border]=\"zShowSecond()\">\n        <ng-scrollbar\n          class=\"z-time-scroll-minute-end h-[12.5rem] w-12\"\n          [class.rounded-sm]=\"!zShowHour() && !zShowSecond()\"\n          [class.rounded-l-sm]=\"!zShowHour() && zShowSecond()\"\n          [class.rounded-r-sm]=\"zShowHour() && !zShowSecond()\"\n          track=\"vertical\">\n          <div class=\"flex flex-col\">\n            @for (min of minuteOptions; track min) {\n              @let minDisabled = min | zIsEndMinuteDisabled: endTimeContext();\n              @let minEndSelected = min | zIsTimeSelected: minuteEnd();\n              <button\n                type=\"button\"\n                class=\"flex h-7 shrink-0 items-center justify-center text-sm transition-colors\"\n                [class.hover:bg-muted]=\"!minDisabled && !minEndSelected\"\n                [class.cursor-pointer]=\"!minDisabled\"\n                [class.bg-primary]=\"minEndSelected\"\n                [class.text-primary-foreground]=\"minEndSelected\"\n                [class.font-medium]=\"minEndSelected\"\n                [class.opacity-30]=\"minDisabled\"\n                [class.cursor-not-allowed]=\"minDisabled\"\n                [disabled]=\"minDisabled\"\n                (click)=\"selectMinuteEnd(min)\">\n                {{ min | number: '2.0-0' }}\n              </button>\n            }\n          </div>\n        </ng-scrollbar>\n      </div>\n    }\n    @if (zShowSecond()) {\n      <div class=\"flex flex-col\">\n        <ng-scrollbar\n          class=\"z-time-scroll-second-end h-[12.5rem] w-12\"\n          [class.rounded-sm]=\"!zShowHour() && !zShowMinute()\"\n          [class.rounded-r-sm]=\"zShowHour() || zShowMinute()\"\n          track=\"vertical\">\n          <div class=\"flex flex-col\">\n            @for (sec of secondOptions; track sec) {\n              @let secDisabled = sec | zIsEndSecondDisabled: endTimeContext();\n              @let secEndSelected = sec | zIsTimeSelected: secondEnd();\n              <button\n                type=\"button\"\n                class=\"flex h-7 shrink-0 items-center justify-center text-sm transition-colors\"\n                [class.hover:bg-muted]=\"!secDisabled && !secEndSelected\"\n                [class.cursor-pointer]=\"!secDisabled\"\n                [class.bg-primary]=\"secEndSelected\"\n                [class.text-primary-foreground]=\"secEndSelected\"\n                [class.font-medium]=\"secEndSelected\"\n                [class.opacity-30]=\"secDisabled\"\n                [class.cursor-not-allowed]=\"secDisabled\"\n                [disabled]=\"secDisabled\"\n                (click)=\"selectSecondEnd(sec)\">\n                {{ sec | number: '2.0-0' }}\n              </button>\n            }\n          </div>\n        </ng-scrollbar>\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: [".animate-calendar-enter{animation:z-calendar-view-enter .2s ease-out}@keyframes z-calendar-view-enter{0%{opacity:0;transform:scale(.95) translateY(.25rem)}to{opacity:1;transform:scale(1) translateY(0)}}.z-calendar input{text-overflow:ellipsis;overflow:hidden}\n"] }]
+                    }, 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 p-0\"\n      (zHideStart)=\"onPopoverHide()\"\n      (zShow)=\"onPopoverShow()\"\n      (zControl)=\"onPopoverControl($event)\"\n      [id]=\"pickerId\"\n      [class]=\"triggerClasses()\"\n      (keydown)=\"onTriggerKeydown($event)\">\n      <z-icon\n        [zType]=\"isRangeMode() ? 'lucideCalendarRange' : 'lucideCalendar'\"\n        zSize=\"16\"\n        class=\"text-muted-foreground shrink-0 cursor-pointer\"\n        (click)=\"$event.stopPropagation(); toggle()\" />\n\n      @if (isRangeMode()) {\n        <input\n          type=\"text\"\n          data-range-type=\"start\"\n          class=\"placeholder:text-muted-foreground w-0 min-w-0 flex-1 truncate bg-transparent text-center text-sm outline-none\"\n          [placeholder]=\"'i18n_z_ui_calendar_start_date' | translate\"\n          [value]=\"inputDisplayStart()\"\n          [disabled]=\"isDisabled()\"\n          [readonly]=\"zReadonly()\"\n          (click)=\"isOpen() && $event.stopPropagation()\"\n          (focus)=\"onInputFocus($event)\"\n          (input)=\"onStartInputChange($event)\"\n          (blur)=\"onInputBlur($event)\"\n          (keydown.enter)=\"onStartInputEnter($event)\"\n          (keydown.escape)=\"onStartInputEscape()\" />\n        <span class=\"text-muted-foreground text-sm\">-</span>\n        <input\n          type=\"text\"\n          data-range-type=\"end\"\n          class=\"placeholder:text-muted-foreground w-0 min-w-0 flex-1 truncate bg-transparent text-center text-sm outline-none\"\n          [placeholder]=\"'i18n_z_ui_calendar_end_date' | translate\"\n          [value]=\"inputDisplayEnd()\"\n          [disabled]=\"isDisabled()\"\n          [readonly]=\"zReadonly()\"\n          (click)=\"isOpen() && $event.stopPropagation()\"\n          (focus)=\"onInputFocus($event)\"\n          (input)=\"onEndInputChange($event)\"\n          (blur)=\"onInputBlur($event)\"\n          (keydown.enter)=\"onEndInputEnter($event)\"\n          (keydown.escape)=\"onEndInputEscape()\" />\n      } @else {\n        <input\n          #inputEl\n          type=\"text\"\n          class=\"placeholder:text-muted-foreground w-0 min-w-0 flex-1 truncate bg-transparent text-sm outline-none\"\n          [placeholder]=\"effectivePlaceholder()\"\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-sm transition-all\"\n          [class.opacity-0]=\"!hasValue()\"\n          [class.pointer-events-none]=\"!hasValue()\"\n          (click)=\"onClear($event)\">\n          <z-icon zType=\"lucideX\" zSize=\"18\" />\n        </button>\n      }\n    </div>\n  </div>\n\n  @if (hasError()) {\n    <p class=\"text-destructive animate-in fade-in slide-in-from-top-1 m-0 text-xs duration-200\">\n      {{ errorMessage() }}\n    </p>\n  }\n</div>\n\n<ng-template #calendarTpl>\n  <div\n    class=\"z-calendar-calendar bg-popover border-border flex max-h-[50dvh] max-w-[95vw] flex-col overflow-auto rounded-sm border shadow-lg min-[480px]:max-h-[55dvh] sm:max-h-none sm:max-w-none sm:flex-row sm:overflow-visible\"\n    (keydown)=\"onCalendarKeydown($event)\">\n    @if (zQuickSelect() && zMode() === 'range') {\n      <div\n        class=\"border-border flex shrink-0 flex-row gap-1 overflow-x-auto border-b p-2 sm:flex-col sm:gap-0 sm:space-y-1 sm:overflow-x-visible sm:border-r sm:border-b-0\">\n        @for (preset of quickSelectPresets; track preset.key) {\n          @let presetDisabled = preset | zIsPresetDisabled: zDisabledDate();\n          <button\n            type=\"button\"\n            class=\"cursor-pointer rounded-sm px-3 py-1.5 text-left text-sm whitespace-nowrap transition-colors\"\n            [class.hover:bg-muted]=\"activePresetKey() !== preset.key && !presetDisabled\"\n            [class.bg-primary]=\"activePresetKey() === preset.key\"\n            [class.text-primary-foreground]=\"activePresetKey() === preset.key\"\n            [class.font-medium]=\"activePresetKey() === preset.key\"\n            [class.opacity-40]=\"presetDisabled\"\n            [class.cursor-not-allowed]=\"presetDisabled\"\n            [disabled]=\"presetDisabled\"\n            (click)=\"onQuickSelect(preset)\">\n            {{ preset.label | translate }}\n          </button>\n        }\n      </div>\n    }\n    <div\n      class=\"flex flex-1 flex-col items-center overflow-auto py-2 sm:overflow-visible\"\n      [class]=\"!isRangeMode() ? 'w-[17.5rem]' : ''\">\n      @if (!isTimeMode()) {\n        <div\n          class=\"z-calendars-wrapper flex w-full flex-col items-center gap-3 sm:flex-row sm:items-stretch sm:justify-center sm:gap-0\">\n          <!-- First Calendar -->\n          <div class=\"z-calendar-section flex w-[17.5rem] shrink-0 flex-col\">\n            @if (!isTimeMode()) {\n              <!-- Header -->\n              <div class=\"border-border flex w-full items-center justify-between gap-0.5 px-2\">\n                <!-- Double left arrow (always visible) -->\n                <button\n                  type=\"button\"\n                  z-button\n                  zType=\"ghost\"\n                  zSize=\"sm\"\n                  class=\"size-7 shrink-0 p-0!\"\n                  [zWave]=\"false\"\n                  (click)=\"navigatePreviousFast()\">\n                  <z-icon zType=\"lucideChevronsLeft\" zSize=\"18\" />\n                </button>\n\n                <!-- Single left arrow (hidden in month/year view) -->\n                @if (currentView() === 'day') {\n                  <button\n                    type=\"button\"\n                    z-button\n                    zType=\"ghost\"\n                    zSize=\"sm\"\n                    class=\"size-7 shrink-0 p-0!\"\n                    [zWave]=\"false\"\n                    (click)=\"navigatePrevious()\">\n                    <z-icon zType=\"lucideChevronLeft\" zSize=\"18\" />\n                  </button>\n                }\n\n                <!-- Header content -->\n                <div class=\"flex flex-1 shrink-0 items-center justify-center gap-0\">\n                  @if (currentView() === 'day') {\n                    <!-- Day view: Month + Year -->\n                    @if (!isYearMode() && !isQuarterMode()) {\n                      <button\n                        type=\"button\"\n                        z-button\n                        zType=\"ghost\"\n                        zSize=\"sm\"\n                        class=\"h-7 px-1.5 text-sm!\"\n                        [zWave]=\"false\"\n                        (click)=\"setView('month')\">\n                        {{ currentMonthName() }}\n                      </button>\n                    }\n                    <button\n                      type=\"button\"\n                      z-button\n                      zType=\"ghost\"\n                      zSize=\"sm\"\n                      class=\"h-7 px-1.5 text-sm!\"\n                      [zWave]=\"false\"\n                      [zDisabled]=\"isYearMode()\"\n                      (click)=\"setView('year')\">\n                      {{ currentYear() }}\n                    </button>\n                  } @else if (currentView() === 'month') {\n                    <!-- Month view: Only Year -->\n                    <button\n                      type=\"button\"\n                      z-button\n                      zType=\"ghost\"\n                      zSize=\"sm\"\n                      class=\"h-7 px-1.5 text-sm!\"\n                      [zWave]=\"false\"\n                      (click)=\"setView('year')\">\n                      {{ currentYear() }}\n                    </button>\n                  } @else if (currentView() === 'year') {\n                    <!-- Year view: Year Range -->\n                    <span class=\"text-sm font-medium\">\n                      {{ yearRange()[0] }} - {{ yearRange()[yearRange().length - 1] }}\n                    </span>\n                  } @else if (currentView() === 'quarter') {\n                    <!-- Quarter view: Only Year -->\n                    <button\n                      type=\"button\"\n                      z-button\n                      zType=\"ghost\"\n                      zSize=\"sm\"\n                      class=\"h-7 px-1.5 text-sm!\"\n                      [zWave]=\"false\"\n                      (click)=\"setView('year')\">\n                      {{ currentYear() }}\n                    </button>\n                  }\n                </div>\n\n                <!-- Single right arrow (hidden in month/year view) -->\n                @if (currentView() === 'day') {\n                  <button\n                    type=\"button\"\n                    z-button\n                    zType=\"ghost\"\n                    zSize=\"sm\"\n                    class=\"size-7 shrink-0 p-0!\"\n                    [zDisabled]=\"!canNavigateStartNext()\"\n                    [zWave]=\"false\"\n                    (click)=\"navigateNext()\">\n                    <z-icon zType=\"lucideChevronRight\" zSize=\"18\" />\n                  </button>\n                }\n\n                <!-- Double right arrow (always visible) -->\n                <button\n                  type=\"button\"\n                  z-button\n                  zType=\"ghost\"\n                  zSize=\"sm\"\n                  class=\"size-7 shrink-0 p-0!\"\n                  [zDisabled]=\"!canNavigateStartNext()\"\n                  [zWave]=\"false\"\n                  (click)=\"navigateNextFast()\">\n                  <z-icon zType=\"lucideChevronsRight\" zSize=\"18\" />\n                </button>\n              </div>\n\n              <!-- Body -->\n              <div\n                class=\"flex h-full w-full flex-col items-center justify-center p-2\"\n                [class.min-h-[14rem]]=\"!isQuarterMode()\"\n                [class.h-[14rem]]=\"\n                  !isYearMode() &&\n                  !isMonthMode() &&\n                  !isQuarterMode() &&\n                  (currentView() === 'month' || currentView() === 'year')\n                \"\n                [class.min-h-[6.25rem]]=\"isQuarterMode()\"\n                [class.!min-h-auto]=\"isYearMode() || isMonthMode() || isQuarterMode()\"\n                [class.!h-auto]=\"isYearMode() || isMonthMode() || isQuarterMode()\">\n                @if (currentView() === 'day') {\n                  <div\n                    class=\"flex h-full w-full flex-1 flex-col gap-1\"\n                    [class.animate-calendar-enter]=\"uiState().hasViewChanged\">\n                    <!-- Weekday headers -->\n                    <div class=\"flex w-full flex-1 justify-center gap-1\">\n                      @for (weekday of weekdayNames(); track weekday) {\n                        <div\n                          class=\"text-muted-foreground flex h-[1.875rem] w-[2.0313rem] items-center justify-center text-xs font-medium\">\n                          {{ weekday }}\n                        </div>\n                      }\n                    </div>\n\n                    <!-- Date rows -->\n                    @for (week of calendarDays(); track $index) {\n                      <div class=\"flex w-full flex-1 justify-center gap-1\">\n                        @for (day of week; track day.date.getTime()) {\n                          <button\n                            type=\"button\"\n                            [class]=\"day | zDayClasses\"\n                            class=\"h-[1.875rem] !w-[2.0313rem] !text-sm\"\n                            [disabled]=\"day.isDisabled\"\n                            (click)=\"onDayClick(day)\"\n                            (mouseenter)=\"onDayHover(day)\"\n                            (mouseleave)=\"onDayLeave()\">\n                            {{ day.day }}\n                          </button>\n                        }\n                      </div>\n                    }\n                  </div>\n                }\n                @if (currentView() === 'month') {\n                  <div\n                    class=\"grid h-full w-full grid-cols-3 grid-rows-4 gap-2.5 gap-y-5!\"\n                    [class.animate-calendar-enter]=\"uiState().hasViewChanged\">\n                    @for (month of monthNames(); track month; let i = $index) {\n                      @let monthDisabled = i | zIsStartMonthDisabled: startMonthDisabledContext();\n                      <div class=\"flex flex-1 items-center justify-center\">\n                        <button\n                          type=\"button\"\n                          [class]=\"i | zMonthClasses: selectedMonthIndex() : todayMonthIndex()\"\n                          class=\"!h-7 !w-full !text-sm\"\n                          [disabled]=\"monthDisabled\"\n                          [class.opacity-30]=\"monthDisabled\"\n                          [class.cursor-not-allowed]=\"monthDisabled\"\n                          (click)=\"onMonthSelect(i)\">\n                          {{ month }}\n                        </button>\n                      </div>\n                    }\n                  </div>\n                }\n\n                @if (currentView() === 'year') {\n                  <div\n                    class=\"grid h-full w-full grid-cols-3 grid-rows-4 gap-2.5 gap-y-5!\"\n                    [class.animate-calendar-enter]=\"uiState().hasViewChanged\">\n                    @for (year of yearRange(); track year) {\n                      @let yearDisabled = year | zIsStartYearDisabled: startYearDisabledContext();\n                      <div class=\"flex flex-1 items-center justify-center\">\n                        <button\n                          type=\"button\"\n                          [class]=\"year | zYearClasses: selectedYear() : todayYear()\"\n                          class=\"!h-7 !w-full !text-sm\"\n                          [disabled]=\"yearDisabled\"\n                          [class.opacity-30]=\"yearDisabled\"\n                          [class.cursor-not-allowed]=\"yearDisabled\"\n                          (click)=\"onYearClick(year)\">\n                          {{ year }}\n                        </button>\n                      </div>\n                    }\n                  </div>\n                }\n\n                @if (currentView() === 'quarter') {\n                  <div\n                    class=\"grid h-full w-full grid-cols-2 grid-rows-2 gap-2 p-1\"\n                    [class.animate-calendar-enter]=\"uiState().hasViewChanged\">\n                    @for (quarter of quarterNames; track quarter; let i = $index) {\n                      <div class=\"flex flex-1 items-center justify-center\">\n                        <button\n                          type=\"button\"\n                          [class]=\"i | zQuarterClasses: selectedQuarterIndex() : todayQuarterIndex()\"\n                          class=\"!h-8 !w-full !text-sm\"\n                          (click)=\"onQuarterClick(i)\">\n                          {{ quarter }}\n                        </button>\n                      </div>\n                    }\n                  </div>\n                }\n              </div>\n            }\n          </div>\n\n          <!-- Second Calendar (Range Mode Only) -->\n          @if (isRangeMode()) {\n            <!-- Divider -->\n            <div class=\"border-border bg-border hidden self-stretch sm:block sm:w-px\"></div>\n            <div class=\"border-border bg-border block h-px w-full sm:hidden\"></div>\n\n            <div class=\"z-calendar-section flex w-[17.5rem] shrink-0 flex-col\">\n              <!-- Header -->\n              <div class=\"border-border flex w-full items-center justify-between gap-0.5 px-2\">\n                <button\n                  type=\"button\"\n                  z-button\n                  zType=\"ghost\"\n                  zSize=\"sm\"\n                  class=\"size-7 shrink-0 p-0!\"\n                  [zDisabled]=\"!canNavigateEndPrev()\"\n                  [zWave]=\"false\"\n                  (click)=\"navigateEndPreviousFast()\">\n                  <z-icon zType=\"lucideChevronsLeft\" zSize=\"18\" />\n                </button>\n\n                <button\n                  type=\"button\"\n                  z-button\n                  zType=\"ghost\"\n                  zSize=\"sm\"\n                  class=\"size-7 shrink-0 p-0!\"\n                  [zDisabled]=\"!canNavigateEndPrev()\"\n                  [zWave]=\"false\"\n                  (click)=\"navigateEndPrevious()\">\n                  <z-icon zType=\"lucideChevronLeft\" zSize=\"18\" />\n                </button>\n\n                <div class=\"flex w-[7.5rem] shrink-0 items-center justify-center gap-0\">\n                  <button\n                    type=\"button\"\n                    z-button\n                    zType=\"ghost\"\n                    zSize=\"sm\"\n                    class=\"h-7 px-1.5 text-sm!\"\n                    [zWave]=\"false\"\n                    (click)=\"setEndView('month')\">\n                    {{ endMonthName() }}\n                  </button>\n\n                  <button\n                    type=\"button\"\n                    z-button\n                    zType=\"ghost\"\n                    zSize=\"sm\"\n                    class=\"h-7 px-1.5 text-sm!\"\n                    [zWave]=\"false\"\n                    (click)=\"setEndView('year')\">\n                    {{ endMonthYear() }}\n                  </button>\n                </div>\n\n                <button\n                  type=\"button\"\n                  z-button\n                  zType=\"ghost\"\n                  zSize=\"sm\"\n                  class=\"size-7 shrink-0 p-0!\"\n                  [zWave]=\"false\"\n                  [zWave]=\"false\"\n                  (click)=\"navigateEndNext()\">\n                  <z-icon zType=\"lucideChevronRight\" zSize=\"18\" />\n                </button>\n\n                <button\n                  type=\"button\"\n                  z-button\n                  zType=\"ghost\"\n                  zSize=\"sm\"\n                  class=\"size-7 shrink-0 p-0!\"\n                  [zWave]=\"false\"\n                  [zWave]=\"false\"\n                  (click)=\"navigateEndNextFast()\">\n                  <z-icon zType=\"lucideChevronsRight\" zSize=\"18\" />\n                </button>\n              </div>\n\n              <!-- Body -->\n              <div\n                class=\"flex h-full min-h-[14rem] w-full flex-col items-center justify-center p-2\"\n                [class.h-[14rem]]=\"endView() === 'month' || endView() === 'year'\">\n                @if (endView() === 'day') {\n                  <div\n                    class=\"flex h-full w-full flex-1 flex-col gap-1\"\n                    [class.animate-calendar-enter]=\"uiState().hasEndViewChanged\">\n                    <!-- Weekday headers -->\n                    <div class=\"flex w-full flex-1 justify-center gap-1\">\n                      @for (weekday of weekdayNames(); track weekday) {\n                        <div\n                          class=\"text-muted-foreground flex h-[1.875rem] w-[2.0313rem] items-center justify-center text-xs font-medium\">\n                          {{ weekday }}\n                        </div>\n                      }\n                    </div>\n\n                    <!-- Date rows -->\n                    @for (week of calendarDaysEnd(); track $index) {\n                      <div class=\"flex w-full flex-1 justify-center gap-1\">\n                        @for (day of week; track day.date.getTime()) {\n                          <button\n                            type=\"button\"\n                            [class]=\"day | zDayClasses\"\n                            class=\"h-[1.875rem] !w-[2.0313rem] !text-sm\"\n                            [disabled]=\"day.isDisabled\"\n                            (click)=\"onDayClick(day)\"\n                            (mouseenter)=\"onDayHover(day)\"\n                            (mouseleave)=\"onDayLeave()\">\n                            {{ day.day }}\n                          </button>\n                        }\n                      </div>\n                    }\n                  </div>\n                }\n                @if (endView() === 'month') {\n                  <div\n                    class=\"grid h-full w-full grid-cols-3 grid-rows-4 gap-2.5 gap-y-5!\"\n                    [class.animate-calendar-enter]=\"uiState().hasEndViewChanged\">\n                    @for (month of monthNames(); track month; let i = $index) {\n                      @let endMonthDisabled = i | zIsEndMonthDisabled: endMonthDisabledContext();\n                      <div class=\"flex flex-1 items-center justify-center\">\n                        <button\n                          type=\"button\"\n                          [class]=\"i | zMonthClasses: endMonth().getMonth() : -1\"\n                          class=\"!h-7 !w-full !text-sm\"\n                          [disabled]=\"endMonthDisabled\"\n                          [class.opacity-30]=\"endMonthDisabled\"\n                          [class.cursor-not-allowed]=\"endMonthDisabled\"\n                          (click)=\"onEndMonthClick(i)\">\n                          {{ month }}\n                        </button>\n                      </div>\n                    }\n                  </div>\n                }\n\n                @if (endView() === 'year') {\n                  <div\n                    class=\"grid h-full w-full grid-cols-3 grid-rows-4 gap-2.5 gap-y-5!\"\n                    [class.animate-calendar-enter]=\"uiState().hasEndViewChanged\">\n                    @for (year of endYearRange(); track year) {\n                      @let endYearDisabled = year | zIsEndYearDisabled: endYearDisabledContext();\n                      <div class=\"flex flex-1 items-center justify-center\">\n                        <button\n                          type=\"button\"\n                          [class]=\"year | zYearClasses: endMonth().getFullYear() : -1\"\n                          class=\"!h-7 !w-full !text-sm\"\n                          [disabled]=\"endYearDisabled\"\n                          [class.opacity-30]=\"endYearDisabled\"\n                          [class.cursor-not-allowed]=\"endYearDisabled\"\n                          (click)=\"onEndYearClick(year)\">\n                          {{ year }}\n                        </button>\n                      </div>\n                    }\n                  </div>\n                }\n              </div>\n            </div>\n          }\n        </div>\n\n        <!-- Compact Time Picker Below Calendar (Single Date) -->\n        @if (!isRangeMode() && zShowTime()) {\n          <div class=\"border-border w-full border-t text-center\">\n            <div\n              class=\"hover:bg-muted my-1 inline-flex cursor-pointer items-center rounded-sm px-2 py-1 transition-colors\"\n              z-popover\n              [zPopoverContent]=\"timeDropdownTpl\"\n              zPosition=\"bottom\"\n              zPopoverWidth=\"auto\"\n              [zOffset]=\"4\"\n              zTrigger=\"click\"\n              zClass=\"border-border shadow-md\"\n              (zShow)=\"onTimeDropdownShow()\">\n              <div class=\"flex items-center justify-center gap-1\">\n                <!-- Hour -->\n                @if (zShowHour()) {\n                  <div\n                    class=\"hover:bg-muted/50 flex min-w-7 cursor-pointer flex-col items-center gap-0 rounded-sm px-1 transition-colors\">\n                    <button\n                      type=\"button\"\n                      class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mb-0.5 flex h-4 w-full cursor-pointer items-center justify-center rounded-sm border-none bg-transparent transition-colors\"\n                      (click)=\"decrementHour(); $event.stopPropagation()\">\n                      <z-icon zType=\"lucideChevronUp\" zSize=\"18\" />\n                    </button>\n                    <span class=\"text-foreground min-w-5 text-center text-sm leading-tight font-medium select-none\">\n                      {{ formattedHour() }}\n                    </span>\n                    <button\n                      type=\"button\"\n                      class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mt-0.5 flex h-4 w-full cursor-pointer items-center justify-center rounded-sm border-none bg-transparent transition-colors\"\n                      (click)=\"incrementHour(); $event.stopPropagation()\">\n                      <z-icon zType=\"lucideChevronDown\" zSize=\"18\" />\n                    </button>\n                  </div>\n                }\n                @if (zShowHour() && zShowMinute()) {\n                  <span class=\"text-muted-foreground text-sm font-medium\">:</span>\n                }\n                <!-- Minute -->\n                @if (zShowMinute()) {\n                  <div\n                    class=\"hover:bg-muted/50 flex min-w-7 cursor-pointer flex-col items-center gap-0 rounded-sm px-1 transition-colors\">\n                    <button\n                      type=\"button\"\n                      class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mb-0.5 flex h-4 w-full cursor-pointer items-center justify-center rounded-sm border-none bg-transparent transition-colors\"\n                      (click)=\"decrementMinute(); $event.stopPropagation()\">\n                      <z-icon zType=\"lucideChevronUp\" zSize=\"18\" />\n                    </button>\n                    <span class=\"text-foreground min-w-5 text-center text-sm leading-tight font-medium select-none\">\n                      {{ formattedMinute() }}\n                    </span>\n                    <button\n                      type=\"button\"\n                      class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mt-0.5 flex h-4 w-full cursor-pointer items-center justify-center rounded-sm border-none bg-transparent transition-colors\"\n                      (click)=\"incrementMinute(); $event.stopPropagation()\">\n                      <z-icon zType=\"lucideChevronDown\" zSize=\"18\" />\n                    </button>\n                  </div>\n                }\n                @if (zShowMinute() && zShowSecond()) {\n                  <span class=\"text-muted-foreground text-sm font-medium\">:</span>\n                }\n                <!-- Second -->\n                @if (zShowSecond()) {\n                  <div\n                    class=\"hover:bg-muted/50 flex min-w-7 cursor-pointer flex-col items-center gap-0 rounded-sm px-1 transition-colors\">\n                    <button\n                      type=\"button\"\n                      class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mb-0.5 flex h-4 w-full cursor-pointer items-center justify-center rounded-sm border-none bg-transparent transition-colors\"\n                      (click)=\"decrementSecond(); $event.stopPropagation()\">\n                      <z-icon zType=\"lucideChevronUp\" zSize=\"18\" />\n                    </button>\n                    <span class=\"text-foreground min-w-5 text-center text-sm leading-tight font-medium select-none\">\n                      {{ formattedSecond() }}\n                    </span>\n                    <button\n                      type=\"button\"\n                      class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mt-0.5 flex h-4 w-full cursor-pointer items-center justify-center rounded-sm border-none bg-transparent transition-colors\"\n                      (click)=\"incrementSecond(); $event.stopPropagation()\">\n                      <z-icon zType=\"lucideChevronDown\" zSize=\"18\" />\n                    </button>\n                  </div>\n                }\n                <!-- AM/PM Toggle -->\n                @if (zTimeFormat() === '12h') {\n                  <button\n                    type=\"button\"\n                    class=\"bg-primary/10 text-primary hover:bg-primary/20 active:bg-primary/30 ml-1 flex w-8 cursor-pointer items-center justify-center rounded-sm border-none px-2 py-1 text-xs font-semibold transition-colors\"\n                    (click)=\"togglePeriod(); $event.stopPropagation()\">\n                    {{ period() }}\n                  </button>\n                }\n              </div>\n            </div>\n          </div>\n        }\n\n        <!-- Compact Time Pickers Below Calendars (Range Mode) -->\n        @if (isRangeMode() && zShowTime()) {\n          <div class=\"border-border flex w-full flex-col border-t sm:flex-row\">\n            <!-- Start Time -->\n            <div class=\"flex w-full flex-col items-center justify-center gap-1\">\n              <div\n                class=\"hover:bg-muted my-1 inline-flex cursor-pointer items-center rounded-sm px-2 py-1 transition-colors\"\n                z-popover\n                [zPopoverContent]=\"timeDropdownTpl\"\n                zPosition=\"bottom\"\n                zPopoverWidth=\"auto\"\n                [zOffset]=\"4\"\n                zTrigger=\"click\"\n                zClass=\"border-border shadow-md\"\n                (zShow)=\"onTimeDropdownShow()\">\n                <div class=\"flex items-center justify-center gap-1\">\n                  <!-- Hour -->\n                  @if (zShowHour()) {\n                    <div\n                      class=\"hover:bg-muted/50 flex min-w-7 cursor-pointer flex-col items-center gap-0 rounded-sm px-1 transition-colors\">\n                      <button\n                        type=\"button\"\n                        class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mb-0.5 flex h-4 w-full cursor-pointer items-center justify-center rounded-sm border-none bg-transparent transition-colors\"\n                        (click)=\"decrementHour(); $event.stopPropagation()\">\n                        <z-icon zType=\"lucideChevronUp\" zSize=\"18\" />\n                      </button>\n                      <span class=\"text-foreground min-w-5 text-center text-sm leading-tight font-medium select-none\">\n                        {{ formattedHour() }}\n                      </span>\n                      <button\n                        type=\"button\"\n                        class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mt-0.5 flex h-4 w-full cursor-pointer items-center justify-center rounded-sm border-none bg-transparent transition-colors\"\n                        (click)=\"incrementHour(); $event.stopPropagation()\">\n                        <z-icon zType=\"lucideChevronDown\" zSize=\"18\" />\n                      </button>\n                    </div>\n                  }\n                  @if (zShowHour() && zShowMinute()) {\n                    <span class=\"text-muted-foreground text-sm font-medium\">:</span>\n                  }\n                  <!-- Minute -->\n                  @if (zShowMinute()) {\n                    <div\n                      class=\"hover:bg-muted/50 flex min-w-7 cursor-pointer flex-col items-center gap-0 rounded-sm px-1 transition-colors\">\n                      <button\n                        type=\"button\"\n                        class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mb-0.5 flex h-4 w-full cursor-pointer items-center justify-center rounded-sm border-none bg-transparent transition-colors\"\n                        (click)=\"decrementMinute(); $event.stopPropagation()\">\n                        <z-icon zType=\"lucideChevronUp\" zSize=\"18\" />\n                      </button>\n                      <span class=\"text-foreground min-w-5 text-center text-sm leading-tight font-medium select-none\">\n                        {{ formattedMinute() }}\n                      </span>\n                      <button\n                        type=\"button\"\n                        class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mt-0.5 flex h-4 w-full cursor-pointer items-center justify-center rounded-sm border-none bg-transparent transition-colors\"\n                        (click)=\"incrementMinute(); $event.stopPropagation()\">\n                        <z-icon zType=\"lucideChevronDown\" zSize=\"18\" />\n                      </button>\n                    </div>\n                  }\n                  @if (zShowMinute() && zShowSecond()) {\n                    <span class=\"text-muted-foreground text-sm font-medium\">:</span>\n                  }\n                  <!-- Second -->\n                  @if (zShowSecond()) {\n                    <div\n                      class=\"hover:bg-muted/50 flex min-w-7 cursor-pointer flex-col items-center gap-0 rounded-sm px-1 transition-colors\">\n                      <button\n                        type=\"button\"\n                        class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mb-0.5 flex h-4 w-full cursor-pointer items-center justify-center rounded-sm border-none bg-transparent transition-colors\"\n                        (click)=\"decrementSecond(); $event.stopPropagation()\">\n                        <z-icon zType=\"lucideChevronUp\" zSize=\"18\" />\n                      </button>\n                      <span class=\"text-foreground min-w-5 text-center text-sm leading-tight font-medium select-none\">\n                        {{ formattedSecond() }}\n                      </span>\n                      <button\n                        type=\"button\"\n                        class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mt-0.5 flex h-4 w-full cursor-pointer items-center justify-center rounded-sm border-none bg-transparent transition-colors\"\n                        (click)=\"incrementSecond(); $event.stopPropagation()\">\n                        <z-icon zType=\"lucideChevronDown\" zSize=\"18\" />\n                      </button>\n                    </div>\n                  }\n                  <!-- AM/PM Toggle -->\n                  @if (zTimeFormat() === '12h') {\n                    <button\n                      type=\"button\"\n                      class=\"bg-primary/10 text-primary hover:bg-primary/20 active:bg-primary/30 ml-1 flex w-8 cursor-pointer items-center justify-center rounded-sm border-none px-2 py-1 text-xs font-semibold transition-colors\"\n                      (click)=\"togglePeriod(); $event.stopPropagation()\">\n                      {{ period() }}\n                    </button>\n                  }\n                </div>\n              </div>\n            </div>\n\n            <!-- Divider space -->\n            <div class=\"border-border bg-border h-px self-stretch sm:block sm:h-full sm:w-px\"></div>\n\n            <!-- End Time -->\n            <div class=\"flex w-full flex-col items-center justify-center gap-1\">\n              <div\n                class=\"hover:bg-muted my-1 inline-flex cursor-pointer items-center rounded-sm px-2 py-1 transition-colors\"\n                z-popover\n                [zPopoverContent]=\"timeDropdownEndTpl\"\n                zPosition=\"bottom\"\n                zPopoverWidth=\"auto\"\n                [zOffset]=\"4\"\n                zTrigger=\"click\"\n                zClass=\"border-border shadow-md\"\n                (zShow)=\"onTimeDropdownEndShow()\">\n                <div class=\"flex items-center justify-center gap-1\">\n                  <!-- Hour -->\n                  @if (zShowHour()) {\n                    <div\n                      class=\"hover:bg-muted/50 flex min-w-7 cursor-pointer flex-col items-center gap-0 rounded-sm px-1 transition-colors\">\n                      <button\n                        type=\"button\"\n                        class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mb-0.5 flex h-4 w-full cursor-pointer items-center justify-center rounded-sm border-none bg-transparent transition-colors\"\n                        (click)=\"decrementHourEnd(); $event.stopPropagation()\">\n                        <z-icon zType=\"lucideChevronUp\" zSize=\"18\" />\n                      </button>\n                      <span class=\"text-foreground min-w-5 text-center text-sm leading-tight font-medium select-none\">\n                        {{ formattedHourEnd() }}\n                      </span>\n                      <button\n                        type=\"button\"\n                        class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mt-0.5 flex h-4 w-full cursor-pointer items-center justify-center rounded-sm border-none bg-transparent transition-colors\"\n                        (click)=\"incrementHourEnd(); $event.stopPropagation()\">\n                        <z-icon zType=\"lucideChevronDown\" zSize=\"18\" />\n                      </button>\n                    </div>\n                  }\n                  @if (zShowHour() && zShowMinute()) {\n                    <span class=\"text-muted-foreground text-sm font-medium\">:</span>\n                  }\n                  <!-- Minute -->\n                  @if (zShowMinute()) {\n                    <div\n                      class=\"hover:bg-muted/50 flex min-w-7 cursor-pointer flex-col items-center gap-0 rounded-sm px-1 transition-colors\">\n                      <button\n                        type=\"button\"\n                        class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mb-0.5 flex h-4 w-full cursor-pointer items-center justify-center rounded-sm border-none bg-transparent transition-colors\"\n                        (click)=\"decrementMinuteEnd(); $event.stopPropagation()\">\n                        <z-icon zType=\"lucideChevronUp\" zSize=\"18\" />\n                      </button>\n                      <span class=\"text-foreground min-w-5 text-center text-sm leading-tight font-medium select-none\">\n                        {{ formattedMinuteEnd() }}\n                      </span>\n                      <button\n                        type=\"button\"\n                        class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mt-0.5 flex h-4 w-full cursor-pointer items-center justify-center rounded-sm border-none bg-transparent transition-colors\"\n                        (click)=\"incrementMinuteEnd(); $event.stopPropagation()\">\n                        <z-icon zType=\"lucideChevronDown\" zSize=\"18\" />\n                      </button>\n                    </div>\n                  }\n                  @if (zShowMinute() && zShowSecond()) {\n                    <span class=\"text-muted-foreground text-sm font-medium\">:</span>\n                  }\n                  <!-- Second -->\n                  @if (zShowSecond()) {\n                    <div\n                      class=\"hover:bg-muted/50 flex min-w-7 cursor-pointer flex-col items-center gap-0 rounded-sm px-1 transition-colors\">\n                      <button\n                        type=\"button\"\n                        class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mb-0.5 flex h-4 w-full cursor-pointer items-center justify-center rounded-sm border-none bg-transparent transition-colors\"\n                        (click)=\"decrementSecondEnd(); $event.stopPropagation()\">\n                        <z-icon zType=\"lucideChevronUp\" zSize=\"18\" />\n                      </button>\n                      <span class=\"text-foreground min-w-5 text-center text-sm leading-tight font-medium select-none\">\n                        {{ formattedSecondEnd() }}\n                      </span>\n                      <button\n                        type=\"button\"\n                        class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mt-0.5 flex h-4 w-full cursor-pointer items-center justify-center rounded-sm border-none bg-transparent transition-colors\"\n                        (click)=\"incrementSecondEnd(); $event.stopPropagation()\">\n                        <z-icon zType=\"lucideChevronDown\" zSize=\"18\" />\n                      </button>\n                    </div>\n                  }\n                  <!-- AM/PM Toggle -->\n                  @if (zTimeFormat() === '12h') {\n                    <button\n                      type=\"button\"\n                      class=\"bg-primary/10 text-primary hover:bg-primary/20 active:bg-primary/30 ml-1 flex w-8 cursor-pointer items-center justify-center rounded-sm border-none px-2 py-1 text-xs font-semibold transition-colors\"\n                      (click)=\"togglePeriodEnd(); $event.stopPropagation()\">\n                      {{ periodEnd() }}\n                    </button>\n                  }\n                </div>\n              </div>\n            </div>\n          </div>\n        }\n      } @else {\n        <!-- Time Only Mode - Compact Display -->\n        <div class=\"flex flex-col items-center gap-3 pb-2\">\n          <div\n            class=\"hover:bg-muted inline-flex cursor-pointer items-center rounded-sm px-3 py-2 transition-colors\"\n            z-popover\n            [zPopoverContent]=\"timeDropdownTpl\"\n            zPosition=\"bottom\"\n            zPopoverWidth=\"auto\"\n            [zOffset]=\"4\"\n            zTrigger=\"click\"\n            zClass=\"border-border shadow-md\"\n            (zShow)=\"onTimeDropdownShow()\">\n            <div class=\"flex items-center justify-center gap-1.5\">\n              <!-- Hour -->\n              @if (zShowHour()) {\n                <div\n                  class=\"hover:bg-muted/50 flex min-w-9 cursor-pointer flex-col items-center gap-0 rounded-sm px-1.5 transition-colors\">\n                  <button\n                    type=\"button\"\n                    class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mb-1 flex h-5 w-full cursor-pointer items-center justify-center rounded-sm border-none bg-transparent transition-colors\"\n                    (click)=\"decrementHour(); $event.stopPropagation()\">\n                    <z-icon zType=\"lucideChevronUp\" zSize=\"16\" />\n                  </button>\n                  <span class=\"text-foreground min-w-6 text-center text-base leading-tight font-medium select-none\">\n                    {{ formattedHour() }}\n                  </span>\n                  <button\n                    type=\"button\"\n                    class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mt-1 flex h-5 w-full cursor-pointer items-center justify-center rounded-sm border-none bg-transparent transition-colors\"\n                    (click)=\"incrementHour(); $event.stopPropagation()\">\n                    <z-icon zType=\"lucideChevronDown\" zSize=\"16\" />\n                  </button>\n                </div>\n              }\n              @if (zShowHour() && zShowMinute()) {\n                <span class=\"text-muted-foreground text-base font-medium\">:</span>\n              }\n              <!-- Minute -->\n              @if (zShowMinute()) {\n                <div\n                  class=\"hover:bg-muted/50 flex min-w-9 cursor-pointer flex-col items-center gap-0 rounded-sm px-1.5 transition-colors\">\n                  <button\n                    type=\"button\"\n                    class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mb-1 flex h-5 w-full cursor-pointer items-center justify-center rounded-sm border-none bg-transparent transition-colors\"\n                    (click)=\"decrementMinute(); $event.stopPropagation()\">\n                    <z-icon zType=\"lucideChevronUp\" zSize=\"16\" />\n                  </button>\n                  <span class=\"text-foreground min-w-6 text-center text-base leading-tight font-medium select-none\">\n                    {{ formattedMinute() }}\n                  </span>\n                  <button\n                    type=\"button\"\n                    class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mt-1 flex h-5 w-full cursor-pointer items-center justify-center rounded-sm border-none bg-transparent transition-colors\"\n                    (click)=\"incrementMinute(); $event.stopPropagation()\">\n                    <z-icon zType=\"lucideChevronDown\" zSize=\"16\" />\n                  </button>\n                </div>\n              }\n              @if (zShowMinute() && zShowSecond()) {\n                <span class=\"text-muted-foreground text-base font-medium\">:</span>\n              }\n              <!-- Second -->\n              @if (zShowSecond()) {\n                <div\n                  class=\"hover:bg-muted/50 flex min-w-9 cursor-pointer flex-col items-center gap-0 rounded-sm px-1.5 transition-colors\">\n                  <button\n                    type=\"button\"\n                    class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mb-1 flex h-5 w-full cursor-pointer items-center justify-center rounded-sm border-none bg-transparent transition-colors\"\n                    (click)=\"decrementSecond(); $event.stopPropagation()\">\n                    <z-icon zType=\"lucideChevronUp\" zSize=\"16\" />\n                  </button>\n                  <span class=\"text-foreground min-w-6 text-center text-base leading-tight font-medium select-none\">\n                    {{ formattedSecond() }}\n                  </span>\n                  <button\n                    type=\"button\"\n                    class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mt-1 flex h-5 w-full cursor-pointer items-center justify-center rounded-sm border-none bg-transparent transition-colors\"\n                    (click)=\"incrementSecond(); $event.stopPropagation()\">\n                    <z-icon zType=\"lucideChevronDown\" zSize=\"16\" />\n                  </button>\n                </div>\n              }\n              <!-- AM/PM Toggle -->\n              @if (zTimeFormat() === '12h') {\n                <button\n                  type=\"button\"\n                  class=\"bg-primary/10 text-primary hover:bg-primary/20 active:bg-primary/30 ml-1 flex w-10 cursor-pointer items-center justify-center rounded-sm border-none px-2.5 py-1.5 text-sm font-semibold transition-colors\"\n                  (click)=\"togglePeriod(); $event.stopPropagation()\">\n                  {{ period() }}\n                </button>\n              }\n            </div>\n          </div>\n        </div>\n      }\n\n      @if (!(zQuickSelect() && zMode() === 'range' && !showOkButton() && !showCancelButton())) {\n        <div class=\"border-border flex w-full items-center justify-between gap-2 border-t px-2 pt-2\">\n          @if (!zQuickSelect() || zMode() !== 'range') {\n            <button type=\"button\" z-button zType=\"secondary\" zSize=\"sm\" [zWave]=\"false\" (click)=\"onTodayClick()\">\n              {{ todayButtonText() }}\n            </button>\n          } @else {\n            <div></div>\n          }\n\n          @if (showOkButton() || showCancelButton()) {\n            <div class=\"flex items-center gap-2\">\n              @if (showCancelButton()) {\n                <button type=\"button\" z-button zType=\"outline\" zSize=\"sm\" (click)=\"onCancelClick()\">\n                  {{ zCancelText() ?? ('i18n_z_ui_calendar_cancel' | translate) }}\n                </button>\n              }\n              @if (showOkButton()) {\n                <button type=\"button\" z-button zSize=\"sm\" [zDisabled]=\"!canApply()\" (click)=\"onOkClick()\">\n                  {{ zOkText() ?? ('i18n_z_ui_calendar_ok' | translate) }}\n                </button>\n              }\n            </div>\n          }\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #timeDropdownTpl>\n  <div class=\"bg-popover flex overflow-hidden rounded-sm\">\n    @if (zShowHour()) {\n      <div\n        class=\"flex flex-col\"\n        [class.border-r]=\"zShowMinute() || zShowSecond()\"\n        [class.border-border]=\"zShowMinute() || zShowSecond()\">\n        <ng-scrollbar\n          class=\"z-time-scroll-hour h-[12.5rem] w-12\"\n          [class.rounded-sm]=\"!zShowMinute() && !zShowSecond()\"\n          [class.rounded-l-sm]=\"zShowMinute() || zShowSecond()\"\n          track=\"vertical\">\n          <div class=\"flex flex-col\">\n            @for (hr of hourOptions(); track hr) {\n              @let hrSelected = hr === displayHour();\n              <button\n                type=\"button\"\n                class=\"flex h-7 shrink-0 cursor-pointer items-center justify-center text-sm transition-colors\"\n                [class.hover:bg-muted]=\"!hrSelected\"\n                [class.bg-primary]=\"hrSelected\"\n                [class.text-primary-foreground]=\"hrSelected\"\n                [class.font-medium]=\"hrSelected\"\n                (click)=\"selectHour(hr)\">\n                {{ hr | number: '2.0-0' }}\n              </button>\n            }\n          </div>\n        </ng-scrollbar>\n      </div>\n    }\n    @if (zShowMinute()) {\n      <div class=\"flex flex-col\" [class.border-r]=\"zShowSecond()\" [class.border-border]=\"zShowSecond()\">\n        <ng-scrollbar\n          class=\"z-time-scroll-minute h-[12.5rem] w-12\"\n          [class.rounded-sm]=\"!zShowHour() && !zShowSecond()\"\n          [class.rounded-l-sm]=\"!zShowHour() && zShowSecond()\"\n          [class.rounded-r-sm]=\"zShowHour() && !zShowSecond()\"\n          track=\"vertical\">\n          <div class=\"flex flex-col\">\n            @for (min of minuteOptions; track min) {\n              @let minSelected = min === minute();\n              <button\n                type=\"button\"\n                class=\"flex h-7 shrink-0 cursor-pointer items-center justify-center text-sm transition-colors\"\n                [class.hover:bg-muted]=\"!minSelected\"\n                [class.bg-primary]=\"minSelected\"\n                [class.text-primary-foreground]=\"minSelected\"\n                [class.font-medium]=\"minSelected\"\n                (click)=\"selectMinute(min)\">\n                {{ min | number: '2.0-0' }}\n              </button>\n            }\n          </div>\n        </ng-scrollbar>\n      </div>\n    }\n    @if (zShowSecond()) {\n      <div class=\"flex flex-col\">\n        <ng-scrollbar\n          class=\"z-time-scroll-second h-[12.5rem] w-12\"\n          [class.rounded-sm]=\"!zShowHour() && !zShowMinute()\"\n          [class.rounded-r-sm]=\"zShowHour() || zShowMinute()\"\n          track=\"vertical\">\n          <div class=\"flex flex-col\">\n            @for (sec of secondOptions; track sec) {\n              @let secSelected = sec === second();\n              <button\n                type=\"button\"\n                class=\"flex h-7 shrink-0 cursor-pointer items-center justify-center text-sm transition-colors\"\n                [class.hover:bg-muted]=\"!secSelected\"\n                [class.bg-primary]=\"secSelected\"\n                [class.text-primary-foreground]=\"secSelected\"\n                [class.font-medium]=\"secSelected\"\n                (click)=\"selectSecond(sec)\">\n                {{ sec | number: '2.0-0' }}\n              </button>\n            }\n          </div>\n        </ng-scrollbar>\n      </div>\n    }\n  </div>\n</ng-template>\n\n<ng-template #timeDropdownEndTpl>\n  <div class=\"bg-popover flex overflow-hidden rounded-sm\">\n    @if (zShowHour()) {\n      <div\n        class=\"flex flex-col\"\n        [class.border-r]=\"zShowMinute() || zShowSecond()\"\n        [class.border-border]=\"zShowMinute() || zShowSecond()\">\n        <ng-scrollbar\n          class=\"z-time-scroll-hour-end h-[12.5rem] w-12\"\n          [class.rounded-sm]=\"!zShowMinute() && !zShowSecond()\"\n          [class.rounded-l-sm]=\"zShowMinute() || zShowSecond()\"\n          track=\"vertical\">\n          <div class=\"flex flex-col\">\n            @for (hr of hourOptions(); track hr) {\n              @let hrDisabled = hr | zIsEndHourDisabled: endTimeContext();\n              @let hrEndSelected = hr === displayHourEnd();\n              <button\n                type=\"button\"\n                class=\"flex h-7 shrink-0 items-center justify-center text-sm transition-colors\"\n                [class.hover:bg-muted]=\"!hrDisabled && !hrEndSelected\"\n                [class.cursor-pointer]=\"!hrDisabled\"\n                [class.bg-primary]=\"hrEndSelected\"\n                [class.text-primary-foreground]=\"hrEndSelected\"\n                [class.font-medium]=\"hrEndSelected\"\n                [class.opacity-30]=\"hrDisabled\"\n                [class.cursor-not-allowed]=\"hrDisabled\"\n                [disabled]=\"hrDisabled\"\n                (click)=\"selectHourEnd(hr)\">\n                {{ hr | number: '2.0-0' }}\n              </button>\n            }\n          </div>\n        </ng-scrollbar>\n      </div>\n    }\n    @if (zShowMinute()) {\n      <div class=\"flex flex-col\" [class.border-r]=\"zShowSecond()\" [class.border-border]=\"zShowSecond()\">\n        <ng-scrollbar\n          class=\"z-time-scroll-minute-end h-[12.5rem] w-12\"\n          [class.rounded-sm]=\"!zShowHour() && !zShowSecond()\"\n          [class.rounded-l-sm]=\"!zShowHour() && zShowSecond()\"\n          [class.rounded-r-sm]=\"zShowHour() && !zShowSecond()\"\n          track=\"vertical\">\n          <div class=\"flex flex-col\">\n            @for (min of minuteOptions; track min) {\n              @let minDisabled = min | zIsEndMinuteDisabled: endTimeContext();\n              @let minEndSelected = min === minuteEnd();\n              <button\n                type=\"button\"\n                class=\"flex h-7 shrink-0 items-center justify-center text-sm transition-colors\"\n                [class.hover:bg-muted]=\"!minDisabled && !minEndSelected\"\n                [class.cursor-pointer]=\"!minDisabled\"\n                [class.bg-primary]=\"minEndSelected\"\n                [class.text-primary-foreground]=\"minEndSelected\"\n                [class.font-medium]=\"minEndSelected\"\n                [class.opacity-30]=\"minDisabled\"\n                [class.cursor-not-allowed]=\"minDisabled\"\n                [disabled]=\"minDisabled\"\n                (click)=\"selectMinuteEnd(min)\">\n                {{ min | number: '2.0-0' }}\n              </button>\n            }\n          </div>\n        </ng-scrollbar>\n      </div>\n    }\n    @if (zShowSecond()) {\n      <div class=\"flex flex-col\">\n        <ng-scrollbar\n          class=\"z-time-scroll-second-end h-[12.5rem] w-12\"\n          [class.rounded-sm]=\"!zShowHour() && !zShowMinute()\"\n          [class.rounded-r-sm]=\"zShowHour() || zShowMinute()\"\n          track=\"vertical\">\n          <div class=\"flex flex-col\">\n            @for (sec of secondOptions; track sec) {\n              @let secDisabled = sec | zIsEndSecondDisabled: endTimeContext();\n              @let secEndSelected = sec === secondEnd();\n              <button\n                type=\"button\"\n                class=\"flex h-7 shrink-0 items-center justify-center text-sm transition-colors\"\n                [class.hover:bg-muted]=\"!secDisabled && !secEndSelected\"\n                [class.cursor-pointer]=\"!secDisabled\"\n                [class.bg-primary]=\"secEndSelected\"\n                [class.text-primary-foreground]=\"secEndSelected\"\n                [class.font-medium]=\"secEndSelected\"\n                [class.opacity-30]=\"secDisabled\"\n                [class.cursor-not-allowed]=\"secDisabled\"\n                [disabled]=\"secDisabled\"\n                (click)=\"selectSecondEnd(sec)\">\n                {{ sec | number: '2.0-0' }}\n              </button>\n            }\n          </div>\n        </ng-scrollbar>\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: [".animate-calendar-enter{animation:z-calendar-view-enter .2s ease-out}@keyframes z-calendar-view-enter{0%{opacity:0;transform:scale(.95) translateY(.25rem)}to{opacity:1;transform:scale(1) translateY(0)}}.z-calendar input{text-overflow:ellipsis;overflow:hidden}\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 }] }], 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 }] }], zDefaultTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDefaultTime", required: false }] }], zRangeDefaultTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "zRangeDefaultTime", required: false }] }], zControl: [{ type: i0.Output, args: ["zControl"] }], zChange: [{ type: i0.Output, args: ["zChange"] }], zOnBlur: [{ type: i0.Output, args: ["zOnBlur"] }], zOnFocus: [{ type: i0.Output, args: ["zOnFocus"] }], zEvent: [{ type: i0.Output, args: ["zEvent"] }], triggerRef: [{ type: i0.ViewChild, args: ['triggerEl', { isSignal: true }] }], inputRef: [{ type: i0.ViewChild, args: ['inputEl', { isSignal: true }] }] } });
 
 /**