@shival99/z-ui 2.0.24 → 2.0.26

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

@@ -243,28 +243,61 @@ const formatDate = (date, format, locale = 'vi-VN') => {
     }
     return result;
 };
-const parseDate = (dateString, format) => {
+const parseDate = (dateString, format, locale = 'vi-VN') => {
     if (!dateString) {
         return null;
     }
-    const pattern = format
-        .replace(/YYYY/g, '\\d{4}')
-        .replace(/MM/g, '\\d{1,2}')
-        .replace(/DD/g, '\\d{1,2}')
-        .replace(/HH/g, '\\d{1,2}')
-        .replace(/hh/g, '\\d{1,2}')
-        .replace(/mm/g, '\\d{1,2}')
-        .replace(/ss/g, '\\d{1,2}')
-        .replace(/\//g, '\\/')
-        .replace(/-/g, '\\-')
-        .replace(/:/g, '\\:')
-        .replace(/\s+/g, '\\s*');
-    const datePattern = new RegExp(`^${pattern}(\\s*(AM|PM))?$`, 'i');
-    if (!datePattern.test(dateString.trim())) {
-        return null;
+    const getFullMonthNamesPattern = (loc) => {
+        const names = [];
+        for (let i = 0; i < 12; i++) {
+            names.push(getFullMonthName(i, loc));
+        }
+        const sortedNames = [...names].sort((a, b) => b.length - a.length);
+        return `(${sortedNames.map(name => name.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&')).join('|')})`;
+    };
+    const getShortMonthNamesPattern = (loc) => {
+        const names = [];
+        for (let i = 0; i < 12; i++) {
+            names.push(getShortMonthName(i, loc));
+        }
+        const sortedNames = [...names].sort((a, b) => b.length - a.length);
+        return `(${sortedNames.map(name => name.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&')).join('|')})`;
+    };
+    const tokens = {
+        YYYY: '_T_0_',
+        MMMM: '_T_1_',
+        MMM: '_T_2_',
+        MM: '_T_3_',
+        DD: '_T_4_',
+        HH: '_T_5_',
+        hh: '_T_6_',
+        mm: '_T_7_',
+        ss: '_T_8_',
+    };
+    let tempFormat = format;
+    const sortedTokens = Object.keys(tokens).sort((a, b) => b.length - a.length);
+    for (const token of sortedTokens) {
+        tempFormat = tempFormat.split(token).join(tokens[token]);
+    }
+    let escapedPattern = tempFormat.replace(/[-/\\^$*+?.()|[\]{},]/g, '\\$&');
+    escapedPattern = escapedPattern.replace(/\s+/g, '\\s*');
+    const patterns = {
+        _T_0_: '(\\d{4})',
+        _T_1_: getFullMonthNamesPattern(locale),
+        _T_2_: getShortMonthNamesPattern(locale),
+        _T_3_: '(\\d{1,2})',
+        _T_4_: '(\\d{1,2})',
+        _T_5_: '(\\d{1,2})',
+        _T_6_: '(\\d{1,2})',
+        _T_7_: '(\\d{1,2})',
+        _T_8_: '(\\d{1,2})',
+    };
+    for (const [placeholder, regexStr] of Object.entries(patterns)) {
+        escapedPattern = escapedPattern.split(placeholder).join(regexStr);
     }
-    const numbers = dateString.match(/\d+/g)?.map(n => parseInt(n, 10)) ?? [];
-    if (numbers.length === 0) {
+    const datePattern = new RegExp(`^${escapedPattern}(\\s*(AM|PM))?$`, 'i');
+    const match = dateString.trim().match(datePattern);
+    if (!match) {
         return null;
     }
     const currentYear = new Date().getFullYear();
@@ -277,12 +310,64 @@ const parseDate = (dateString, format) => {
         mm: 0,
         ss: 0,
     };
-    const allTokens = ['YYYY', 'MM', 'DD', 'HH', 'hh', 'mm', 'ss'];
-    const tokensInFormat = allTokens
-        .filter(token => format.includes(token))
-        .sort((a, b) => format.indexOf(a) - format.indexOf(b));
-    for (let i = 0; i < Math.min(numbers.length, tokensInFormat.length); i++) {
-        values[tokensInFormat[i]] = numbers[i];
+    const placeholderOrder = tempFormat.match(/_T_\d+_/g) || [];
+    for (let i = 0; i < placeholderOrder.length; i++) {
+        const placeholder = placeholderOrder[i];
+        const groupVal = match[i + 1];
+        if (!groupVal) {
+            continue;
+        }
+        if (placeholder === '_T_0_') {
+            values['YYYY'] = parseInt(groupVal, 10);
+        }
+        else if (placeholder === '_T_3_') {
+            values['MM'] = parseInt(groupVal, 10);
+        }
+        else if (placeholder === '_T_4_') {
+            values['DD'] = parseInt(groupVal, 10);
+        }
+        else if (placeholder === '_T_5_') {
+            values['HH'] = parseInt(groupVal, 10);
+        }
+        else if (placeholder === '_T_6_') {
+            values['hh'] = parseInt(groupVal, 10);
+        }
+        else if (placeholder === '_T_7_') {
+            values['mm'] = parseInt(groupVal, 10);
+        }
+        else if (placeholder === '_T_8_') {
+            values['ss'] = parseInt(groupVal, 10);
+        }
+        else if (placeholder === '_T_1_') {
+            let foundMonth = -1;
+            for (let m = 0; m < 12; m++) {
+                if (getFullMonthName(m, locale).toLowerCase() === groupVal.toLowerCase()) {
+                    foundMonth = m;
+                    break;
+                }
+            }
+            if (foundMonth !== -1) {
+                values['MM'] = foundMonth + 1;
+            }
+            else {
+                return null;
+            }
+        }
+        else if (placeholder === '_T_2_') {
+            let foundMonth = -1;
+            for (let m = 0; m < 12; m++) {
+                if (getShortMonthName(m, locale).toLowerCase() === groupVal.toLowerCase()) {
+                    foundMonth = m;
+                    break;
+                }
+            }
+            if (foundMonth !== -1) {
+                values['MM'] = foundMonth + 1;
+            }
+            else {
+                return null;
+            }
+        }
     }
     const isPM = /PM/i.test(dateString);
     const isAM = /AM/i.test(dateString);
@@ -565,7 +650,7 @@ const zCalendarDayVariants = cva([
             rangeStart: 'bg-primary text-primary-foreground rounded-r-none',
             rangeEnd: 'bg-primary text-primary-foreground rounded-l-none',
             rangeSingle: 'bg-primary text-primary-foreground',
-            disabled: 'text-muted-foreground/50 cursor-not-allowed',
+            disabled: 'text-muted-foreground/50 cursor-not-allowed line-through',
             otherMonth: 'text-muted-foreground/40 hover:bg-primary/5',
             hovered: 'bg-primary/15 text-foreground',
         },
@@ -1011,6 +1096,7 @@ class ZCalendarComponent {
     _backupActivePresetKey = signal(null, ...(ngDevMode ? [{ debugName: "_backupActivePresetKey" }] : []));
     _backupShortDisplayPresetKey = signal(null, ...(ngDevMode ? [{ debugName: "_backupShortDisplayPresetKey" }] : []));
     _appliedViaOk = signal(false, ...(ngDevMode ? [{ debugName: "_appliedViaOk" }] : []));
+    _hasTypedDraft = signal(false, ...(ngDevMode ? [{ debugName: "_hasTypedDraft" }] : []));
     _skipBlurHandler = signal(false, ...(ngDevMode ? [{ debugName: "_skipBlurHandler" }] : []));
     _injector = inject(Injector);
     _destroyRef = inject(DestroyRef);
@@ -1504,7 +1590,7 @@ class ZCalendarComponent {
             date = value;
         }
         if (!date && typeof value === 'string') {
-            date = valueType === 'iso' ? fromISOString(value) : parseDate(value, this.zFormat());
+            date = valueType === 'iso' ? fromISOString(value) : parseDate(value, this.zFormat(), this.zLocale());
         }
         if (!date) {
             return;
@@ -1699,8 +1785,9 @@ class ZCalendarComponent {
             this.zEvent.emit(zCreateEvent('blur', blurEvent));
         }
         const needsConfirmation = this.showOkButton() || this.showCancelButton();
-        if (needsConfirmation && !this._appliedViaOk()) {
+        if ((needsConfirmation && !this._appliedViaOk()) || this._hasTypedDraft()) {
             this._restoreFromBackup();
+            this._hasTypedDraft.set(false);
         }
         if (this.isRangeMode()) {
             const hasIncompleteRange = this._rangeStart() && !this._rangeEnd();
@@ -1717,6 +1804,11 @@ class ZCalendarComponent {
         if (this.isRangeMode()) {
             this._updateRangeInputDisplay();
         }
+        // Force sync DOM input khi signal value không đổi (user gõ nhưng backup giống giá trị cũ)
+        const inputEl = this.inputRef()?.nativeElement;
+        if (inputEl) {
+            inputEl.value = this.inputDisplayValue();
+        }
         this.triggerRef()?.nativeElement.blur();
     }
     _restoreFromBackup() {
@@ -1767,7 +1859,8 @@ class ZCalendarComponent {
         }
         const input = event.target;
         const { value } = input;
-        this.inputDisplayValue.set(value);
+        this._preserveInputSelection(input);
+        this._hasTypedDraft.set(true);
         const trimmedValue = value.trim();
         if (!trimmedValue) {
             return;
@@ -1780,8 +1873,8 @@ class ZCalendarComponent {
         if (this.isRangeMode()) {
             const parts = trimmedValue.split(' - ');
             if (parts.length === 2) {
-                const start = parseDate(parts[0].trim(), format);
-                const end = parseDate(parts[1].trim(), format);
+                const start = parseDate(parts[0].trim(), format, this.zLocale());
+                const end = parseDate(parts[1].trim(), format, this.zLocale());
                 if (start) {
                     this._rangeStart.set(start);
                     this._currentMonth.set(start);
@@ -1793,7 +1886,7 @@ class ZCalendarComponent {
             }
             return;
         }
-        const date = parseDate(trimmedValue, format);
+        const date = parseDate(trimmedValue, format, this.zLocale());
         if (date) {
             this._selectedDate.set(date);
             this._currentMonth.set(date);
@@ -1803,13 +1896,24 @@ class ZCalendarComponent {
     _getExpectedFormatLength(format) {
         return format.replace(/\[.*?\]/g, ' ').length;
     }
+    _preserveInputSelection(input) {
+        const start = input.selectionStart;
+        const end = input.selectionEnd;
+        queueMicrotask(() => {
+            if (document.activeElement !== input || start === null || end === null) {
+                return;
+            }
+            input.setSelectionRange(start, end);
+        });
+    }
     onStartInputChange(event) {
         if (!this.zAllowEdit()) {
             return;
         }
         const input = event.target;
         const { value } = input;
-        this._inputDisplayStart.set(value);
+        this._preserveInputSelection(input);
+        this._hasTypedDraft.set(true);
         const trimmedValue = value.trim();
         if (!trimmedValue) {
             return;
@@ -1819,7 +1923,7 @@ class ZCalendarComponent {
         if (trimmedValue.length < expectedLength) {
             return;
         }
-        const date = parseDate(trimmedValue, format);
+        const date = parseDate(trimmedValue, format, this.zLocale());
         if (!date) {
             return;
         }
@@ -1838,7 +1942,8 @@ class ZCalendarComponent {
         }
         const input = event.target;
         const { value } = input;
-        this._inputDisplayEnd.set(value);
+        this._preserveInputSelection(input);
+        this._hasTypedDraft.set(true);
         const trimmedValue = value.trim();
         if (!trimmedValue) {
             return;
@@ -1848,7 +1953,7 @@ class ZCalendarComponent {
         if (trimmedValue.length < expectedLength) {
             return;
         }
-        const date = parseDate(trimmedValue, format);
+        const date = parseDate(trimmedValue, format, this.zLocale());
         if (!date) {
             return;
         }
@@ -1863,6 +1968,7 @@ class ZCalendarComponent {
     }
     onStartInputEnter(event) {
         event.preventDefault();
+        event.stopPropagation();
         if (!this.zAllowEdit()) {
             this._updateRangeInputDisplay();
             const input = event.target;
@@ -1872,7 +1978,7 @@ class ZCalendarComponent {
         const input = event.target;
         const value = input.value.trim();
         const format = this._getParseFormat();
-        const date = parseDate(value, format);
+        const date = parseDate(value, format, this.zLocale());
         if (!date) {
             input.value = this.displayValueStart();
             input.blur();
@@ -1890,17 +1996,11 @@ class ZCalendarComponent {
         this._syncTimeSignals(date);
         this.uiState.update(s => ({ ...s, dirty: true }));
         this._inputDisplayStart.set(this.displayValueStart());
-        input.blur();
-        if (this.showOkButton() && this.canApply()) {
-            this.onOkClick();
-            return;
-        }
-        if (!this.showOkButton()) {
-            this._applyValue();
-        }
+        this._confirmTypedValue(input);
     }
     onEndInputEnter(event) {
         event.preventDefault();
+        event.stopPropagation();
         if (!this.zAllowEdit()) {
             this._updateRangeInputDisplay();
             const input = event.target;
@@ -1910,7 +2010,7 @@ class ZCalendarComponent {
         const input = event.target;
         const value = input.value.trim();
         const format = this._getParseFormat();
-        const date = parseDate(value, format);
+        const date = parseDate(value, format, this.zLocale());
         if (!date) {
             input.value = this.displayValueEnd();
             input.blur();
@@ -1928,18 +2028,13 @@ class ZCalendarComponent {
         this._syncEndTimeSignals(date);
         this.uiState.update(s => ({ ...s, dirty: true }));
         this._inputDisplayEnd.set(this.displayValueEnd());
-        input.blur();
-        if (this.showOkButton() && this.canApply()) {
-            this.onOkClick();
-            return;
-        }
-        if (!this.showOkButton()) {
-            this._applyValue();
-        }
+        this._confirmTypedValue(input);
     }
     onInputFocus(_event) {
         this.isInputFocused.set(true);
-        this._backupSelectedDate.set(this._selectedDate());
+        if (!this.isOpen()) {
+            this._backupIfNeeded();
+        }
     }
     onInputBlur(event) {
         this.isInputFocused.set(false);
@@ -1955,6 +2050,12 @@ class ZCalendarComponent {
             return;
         }
         const input = event.target;
+        if (this._hasTypedDraft()) {
+            this._restoreFromBackup();
+            this._hasTypedDraft.set(false);
+            input.value = this.displayValue();
+            return;
+        }
         const currentValue = input.value.trim();
         const format = this._getParseFormat();
         if (!currentValue) {
@@ -1968,7 +2069,7 @@ class ZCalendarComponent {
             }
             return;
         }
-        const parsed = parseDate(currentValue, format);
+        const parsed = parseDate(currentValue, format, this.zLocale());
         if (parsed) {
             this._selectedDate.set(parsed);
             this._currentMonth.set(parsed);
@@ -1984,6 +2085,7 @@ class ZCalendarComponent {
     }
     onInputEnter(event) {
         event.preventDefault();
+        event.stopPropagation();
         const input = event.target;
         if (!this.zAllowEdit()) {
             this.inputDisplayValue.set(this.displayValue());
@@ -1995,18 +2097,16 @@ class ZCalendarComponent {
             this._skipBlurHandler.set(true);
             this._clearDateValues();
             this.uiState.update(s => ({ ...s, dirty: true }));
-            this._appliedViaOk.set(true);
-            this._applyValue();
-            this.close();
-            input.blur();
+            this.inputDisplayValue.set('');
+            this._confirmTypedValue(input);
             return;
         }
         const format = this._getParseFormat();
         if (this.isRangeMode()) {
             const parts = value.split(' - ');
             if (parts.length === 2) {
-                const start = parseDate(parts[0].trim(), format);
-                const end = parseDate(parts[1].trim(), format);
+                const start = parseDate(parts[0].trim(), format, this.zLocale());
+                const end = parseDate(parts[1].trim(), format, this.zLocale());
                 if (start && end) {
                     this._skipBlurHandler.set(true);
                     const swapped = start > end;
@@ -2017,35 +2117,33 @@ class ZCalendarComponent {
                     this._currentMonth.set(rangeStart);
                     this._endMonth.set(rangeEnd);
                     this.uiState.update(s => ({ ...s, dirty: true }));
-                    this._appliedViaOk.set(true);
-                    this._applyValue();
-                    this.close();
-                    input.blur();
+                    this._updateRangeInputDisplay();
+                    this._confirmTypedValue(input);
                     return;
                 }
             }
             this._restoreFromBackup();
             this._updateInputDisplay();
             this.close();
+            input.value = this.displayValue();
             input.blur();
             return;
         }
-        const date = parseDate(value, format);
+        const date = parseDate(value, format, this.zLocale());
         if (date) {
             this._skipBlurHandler.set(true);
             this._selectedDate.set(date);
             this._currentMonth.set(date);
             this._syncTimeSignals(date);
             this.uiState.update(s => ({ ...s, dirty: true }));
-            this._appliedViaOk.set(true);
-            this._applyValue();
-            this.close();
-            input.blur();
+            this.inputDisplayValue.set(this.displayValue());
+            this._confirmTypedValue(input);
             return;
         }
         this._restoreFromBackup();
         this._updateInputDisplay();
         this.close();
+        input.value = this.displayValue();
         input.blur();
     }
     onCalendarKeydown(event) {
@@ -2305,6 +2403,25 @@ class ZCalendarComponent {
         this.close();
     }
     onOkClick() {
+        if (this._hasTypedDraft() && !this.isRangeMode()) {
+            const input = this.inputRef()?.nativeElement;
+            const date = parseDate(input?.value.trim() ?? '', this._getParseFormat(), this.zLocale());
+            if (!date) {
+                this._cancelAndRestore();
+                if (input) {
+                    input.value = this.displayValue();
+                    input.blur();
+                }
+                return;
+            }
+            this._selectedDate.set(date);
+            this._currentMonth.set(date);
+            this._syncTimeSignals(date);
+            this.inputDisplayValue.set(this.displayValue());
+            if (input) {
+                input.value = this.displayValue();
+            }
+        }
         if (!this.canApply()) {
             return;
         }
@@ -2748,6 +2865,7 @@ class ZCalendarComponent {
         return false;
     }
     _applyValue() {
+        this._hasTypedDraft.set(false);
         const emitValue = this._getEmitValue();
         this._onChange(emitValue);
         this.zChange.emit(emitValue);
@@ -2757,6 +2875,12 @@ class ZCalendarComponent {
             this._updateRangeInputDisplay();
         }
     }
+    _confirmTypedValue(input) {
+        this._appliedViaOk.set(true);
+        this._applyValue();
+        this.close();
+        input.blur();
+    }
     _getEmitValue() {
         const valueType = this.zValueType();
         const format = this.zShowTime() ? `${this.zFormat()} HH:mm:ss` : this.zFormat();
@@ -2862,6 +2986,9 @@ class ZCalendarComponent {
         return buildTimeFormat(this.zShowHour(), this.zShowMinute(), this.zShowSecond(), this.zTimeFormat(), period);
     }
     _updateInputDisplay() {
+        if (this._hasTypedDraft()) {
+            return;
+        }
         this.inputDisplayValue.set(this.displayValue());
         if (this.isRangeMode()) {
             this._updateRangeInputDisplay();
@@ -2877,14 +3004,29 @@ class ZCalendarComponent {
         }
         this._selectedDate.set(null);
     }
-    onInputEscape() {
+    onInputEscape(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        const input = event.target;
         this._cancelAndRestore();
+        input.value = this.displayValue();
+        input.blur();
     }
-    onStartInputEscape() {
+    onStartInputEscape(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        const input = event.target;
         this._cancelAndRestore();
+        input.value = this.displayValueStart();
+        input.blur();
     }
-    onEndInputEscape() {
+    onEndInputEscape(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        const input = event.target;
         this._cancelAndRestore();
+        input.value = this.displayValueEnd();
+        input.blur();
     }
     _cancelAndRestore() {
         this._restoreFromBackup();
@@ -3118,7 +3260,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      z-tooltip\n      [zContent]=\"displayValue()\"\n      zTooltipTrigger=\"hover\"\n      zTooltipPosition=\"top\"\n      [zTooltipDisabled]=\"isInputFocused() || isOpen() || !hasValue()\"\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-sm outline-none disabled:opacity-100\"\n          [class.cursor-pointer]=\"!zAllowEdit()\"\n          [class.pointer-events-none]=\"!zAllowEdit()\"\n          [class.text-center]=\"!rangeShortDisplayValue()\"\n          [class.text-left]=\"rangeShortDisplayValue()\"\n          [placeholder]=\"'i18n_z_ui_calendar_start_date' | translate\"\n          [value]=\"inputDisplayStart()\"\n          [disabled]=\"isDisabled()\"\n          [readonly]=\"zReadonly() || !zAllowEdit()\"\n          (click)=\"zAllowEdit() && 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        @if (!rangeShortDisplayValue()) {\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 disabled:opacity-100\"\n            [class.cursor-pointer]=\"!zAllowEdit()\"\n            [class.pointer-events-none]=\"!zAllowEdit()\"\n            [placeholder]=\"'i18n_z_ui_calendar_end_date' | translate\"\n            [value]=\"inputDisplayEnd()\"\n            [disabled]=\"isDisabled()\"\n            [readonly]=\"zReadonly() || !zAllowEdit()\"\n            (click)=\"zAllowEdit() && 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        }\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 disabled:opacity-100\"\n          [class.cursor-pointer]=\"!zAllowEdit()\"\n          [class.pointer-events-none]=\"!zAllowEdit()\"\n          [placeholder]=\"effectivePlaceholder()\"\n          [value]=\"inputDisplayValue()\"\n          [disabled]=\"isDisabled()\"\n          [readonly]=\"zReadonly() || !zAllowEdit()\"\n          (click)=\"zAllowEdit() && 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-[calc(100vw-1.5rem)] flex-col overflow-hidden 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 class=\"border-border hidden shrink-0 flex-col gap-0 space-y-1 overflow-y-auto border-r p-2 sm:flex\">\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 min-h-0 flex-1 flex-col items-center overflow-hidden pb-0 sm:overflow-visible sm:py-2\"\n      [class.sm:pt-0!]=\"isTimeMode()\"\n      [class]=\"\n        !isRangeMode()\n          ? 'w-[17.75rem] max-w-[calc(100vw-1.5rem)]'\n          : 'w-[17.75rem] max-w-[calc(100vw-1.5rem)] sm:w-auto sm:max-w-none'\n      \">\n      @if (zQuickSelect() && zMode() === 'range') {\n        <div class=\"border-border w-full border-b px-2 pt-2 pb-2 sm:hidden\">\n          <z-select\n            class=\"w-full\"\n            zSize=\"sm\"\n            zPosition=\"bottom-left\"\n            [zShowSearch]=\"false\"\n            [zAllowClear]=\"false\"\n            [zOptions]=\"quickSelectOptions()\"\n            [ngModel]=\"activePresetKey()\"\n            [ngModelOptions]=\"{ standalone: true }\"\n            (ngModelChange)=\"onQuickSelectKeyChange($event)\" />\n        </div>\n      }\n      <div class=\"min-h-0 w-full flex-1 overflow-x-hidden overflow-y-auto pt-2 sm:overflow-visible sm:pt-0\">\n        @if (!isTimeMode()) {\n          <div\n            class=\"z-calendars-wrapper flex w-full flex-col items-center gap-0 sm:flex-row sm:items-stretch sm:justify-center\">\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\n                class=\"border-border bg-border mb-2 hidden self-stretch sm:block sm:w-px\"\n                [class.mb-2]=\"!zQuickSelect() || (zQuickSelect() && zShowOk())\"></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 pt-2 sm:pt-0\">\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\n              class=\"hover:bg-muted border-border flex w-full cursor-pointer items-center justify-center gap-1.5 border-t px-3 py-1.5 transition-colors\"\n              z-popover\n              [zPopoverContent]=\"timeDropdownTpl\"\n              zPosition=\"bottom\"\n              [zPopoverWidth]=\"240\"\n              [zOffset]=\"4\"\n              zTrigger=\"click\"\n              zClass=\"border-border shadow-lg\"\n              (zShow)=\"onTimeDropdownShow()\">\n              <z-icon zType=\"lucideCalendarClock\" zSize=\"18\" class=\"text-muted-foreground mr-1 shrink-0\" />\n              <span class=\"text-sm font-medium tabular-nums select-none\">\n                @if (zShowHour()) {\n                  {{ formattedHour() }}\n                }\n                @if (zShowHour() && zShowMinute()) {\n                  <span class=\"text-muted-foreground\">:</span>\n                }\n                @if (zShowMinute()) {\n                  {{ formattedMinute() }}\n                }\n                @if (zShowMinute() && zShowSecond()) {\n                  <span class=\"text-muted-foreground\">:</span>\n                }\n                @if (zShowSecond()) {\n                  {{ formattedSecond() }}\n                }\n                @if (zTimeFormat() === '12h') {\n                  <span class=\"text-primary ml-0.5 font-semibold\">\n                    {{ period() }}\n                  </span>\n                }\n              </span>\n              <z-icon zType=\"lucideChevronDown\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\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\n                class=\"hover:bg-muted flex flex-1 cursor-pointer items-center justify-center gap-1.5 px-3 py-1.5 transition-colors\"\n                z-popover\n                [zPopoverContent]=\"timeDropdownTpl\"\n                zPosition=\"bottom\"\n                [zPopoverWidth]=\"240\"\n                [zOffset]=\"4\"\n                zTrigger=\"click\"\n                zClass=\"border-border shadow-lg\"\n                (zShow)=\"onTimeDropdownShow()\">\n                <z-icon zType=\"lucideCalendarClock\" zSize=\"18\" class=\"text-muted-foreground mr-1 shrink-0\" />\n                <span class=\"text-sm font-medium tabular-nums select-none\">\n                  @if (zShowHour()) {\n                    {{ formattedHour() }}\n                  }\n                  @if (zShowHour() && zShowMinute()) {\n                    <span class=\"text-muted-foreground\">:</span>\n                  }\n                  @if (zShowMinute()) {\n                    {{ formattedMinute() }}\n                  }\n                  @if (zShowMinute() && zShowSecond()) {\n                    <span class=\"text-muted-foreground\">:</span>\n                  }\n                  @if (zShowSecond()) {\n                    {{ formattedSecond() }}\n                  }\n                  @if (zTimeFormat() === '12h') {\n                    <span class=\"text-primary ml-0.5 font-semibold\">\n                      {{ period() }}\n                    </span>\n                  }\n                </span>\n                <z-icon zType=\"lucideChevronDown\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\n              </div>\n\n              <!-- Divider -->\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\n                class=\"hover:bg-muted flex flex-1 cursor-pointer items-center justify-center gap-1.5 px-3 py-1.5 transition-colors\"\n                z-popover\n                [zPopoverContent]=\"timeDropdownEndTpl\"\n                zPosition=\"bottom\"\n                [zPopoverWidth]=\"240\"\n                [zOffset]=\"4\"\n                zTrigger=\"click\"\n                zClass=\"border-border shadow-lg\"\n                (zShow)=\"onTimeDropdownEndShow()\">\n                <z-icon zType=\"lucideCalendarClock\" zSize=\"18\" class=\"text-muted-foreground mr-1 shrink-0\" />\n                <span class=\"text-sm font-medium tabular-nums select-none\">\n                  @if (zShowHour()) {\n                    {{ formattedHourEnd() }}\n                  }\n                  @if (zShowHour() && zShowMinute()) {\n                    <span class=\"text-muted-foreground\">:</span>\n                  }\n                  @if (zShowMinute()) {\n                    {{ formattedMinuteEnd() }}\n                  }\n                  @if (zShowMinute() && zShowSecond()) {\n                    <span class=\"text-muted-foreground\">:</span>\n                  }\n                  @if (zShowSecond()) {\n                    {{ formattedSecondEnd() }}\n                  }\n                  @if (zTimeFormat() === '12h') {\n                    <span class=\"text-primary ml-0.5 font-semibold\">\n                      {{ periodEnd() }}\n                    </span>\n                  }\n                </span>\n                <z-icon zType=\"lucideChevronDown\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\n              </div>\n            </div>\n          }\n        } @else {\n          <!-- Time Only Mode -->\n          <div class=\"flex w-full justify-center px-2 pt-2 pb-1\">\n            <ng-container [ngTemplateOutlet]=\"timeDropdownTpl\" />\n          </div>\n        }\n      </div>\n\n      @if (!(zQuickSelect() && zMode() === 'range' && !showOkButton() && !showCancelButton())) {\n        <div\n          class=\"bg-popover border-border z-10 flex w-full shrink-0 items-center justify-between gap-2 border-t px-2 py-2 shadow-[0_-2px_8px_-2px_rgb(0_0_0_/_10%)] sm:pt-2 sm:pb-0 sm:shadow-none\">\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 min-w-56 justify-center overflow-hidden rounded-sm\">\n    @if (zShowHour()) {\n      <div\n        class=\"flex flex-col\"\n        [class.border-r]=\"zShowMinute() || zShowSecond() || zTimeFormat() === '12h'\"\n        [class.border-border]=\"zShowMinute() || zShowSecond() || zTimeFormat() === '12h'\">\n        <div\n          class=\"text-muted-foreground border-b-border flex h-7 shrink-0 items-center justify-center border-b text-xs font-medium select-none\">\n          {{ 'i18n_z_ui_calendar_hour' | translate }}\n        </div>\n        <ng-scrollbar\n          class=\"z-time-scroll-hour h-[11rem] w-14\"\n          [class.rounded-bl-sm]=\"!zShowMinute() && !zShowSecond() && zTimeFormat() !== '12h'\"\n          [class.rounded-tl-sm]=\"zShowMinute() || zShowSecond() || zTimeFormat() === '12h'\"\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\n        class=\"flex flex-col\"\n        [class.border-r]=\"zShowSecond() || zTimeFormat() === '12h'\"\n        [class.border-border]=\"zShowSecond() || zTimeFormat() === '12h'\">\n        <div\n          class=\"text-muted-foreground border-b-border flex h-7 shrink-0 items-center justify-center border-b text-xs font-medium select-none\">\n          {{ 'i18n_z_ui_calendar_minute' | translate }}\n        </div>\n        <ng-scrollbar\n          class=\"z-time-scroll-minute h-[11rem] w-14\"\n          [class.rounded-bl-sm]=\"!zShowHour() && !zShowSecond() && zTimeFormat() !== '12h'\"\n          [class.rounded-tl-sm]=\"!zShowHour() && (zShowSecond() || zTimeFormat() === '12h')\"\n          [class.rounded-br-sm]=\"(zShowHour() || !zShowHour()) && !zShowSecond() && zTimeFormat() !== '12h'\"\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\n        class=\"flex flex-col\"\n        [class.border-r]=\"zTimeFormat() === '12h'\"\n        [class.border-border]=\"zTimeFormat() === '12h'\">\n        <div\n          class=\"text-muted-foreground border-b-border flex h-7 shrink-0 items-center justify-center border-b text-xs font-medium select-none\">\n          {{ 'i18n_z_ui_calendar_second' | translate }}\n        </div>\n        <ng-scrollbar\n          class=\"z-time-scroll-second h-[11rem] w-14\"\n          [class.rounded-br-sm]=\"zTimeFormat() !== '12h'\"\n          [class.rounded-bl-sm]=\"!zShowHour() && !zShowMinute() && zTimeFormat() !== '12h'\"\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    @if (zTimeFormat() === '12h') {\n      <div class=\"flex flex-col\">\n        <div\n          class=\"text-muted-foreground border-b-border flex h-7 shrink-0 items-center justify-center border-b text-xs font-medium select-none\">\n          {{ 'i18n_z_ui_calendar_period' | translate }}\n        </div>\n        <ng-scrollbar class=\"z-time-scroll-period h-[11rem] w-14\" [class.rounded-br-sm]=\"true\" track=\"vertical\">\n          <div class=\"flex flex-col\">\n            @for (p of ['AM', 'PM']; track p) {\n              @let pSelected = p === period();\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]=\"!pSelected\"\n                [class.bg-primary]=\"pSelected\"\n                [class.text-primary-foreground]=\"pSelected\"\n                [class.font-medium]=\"pSelected\"\n                (click)=\"selectPeriod($any(p))\">\n                {{ p }}\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 min-w-56 justify-center overflow-hidden rounded-sm\">\n    @if (zShowHour()) {\n      <div\n        class=\"flex flex-col\"\n        [class.border-r]=\"zShowMinute() || zShowSecond() || zTimeFormat() === '12h'\"\n        [class.border-border]=\"zShowMinute() || zShowSecond() || zTimeFormat() === '12h'\">\n        <div\n          class=\"text-muted-foreground border-b-border flex h-7 shrink-0 items-center justify-center border-b text-xs font-medium select-none\">\n          {{ 'i18n_z_ui_calendar_hour' | translate }}\n        </div>\n        <ng-scrollbar\n          class=\"z-time-scroll-hour-end h-[11rem] w-14\"\n          [class.rounded-bl-sm]=\"!zShowMinute() && !zShowSecond() && zTimeFormat() !== '12h'\"\n          [class.rounded-tl-sm]=\"zShowMinute() || zShowSecond() || zTimeFormat() === '12h'\"\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\n        class=\"flex flex-col\"\n        [class.border-r]=\"zShowSecond() || zTimeFormat() === '12h'\"\n        [class.border-border]=\"zShowSecond() || zTimeFormat() === '12h'\">\n        <div\n          class=\"text-muted-foreground border-b-border flex h-7 shrink-0 items-center justify-center border-b text-xs font-medium select-none\">\n          {{ 'i18n_z_ui_calendar_minute' | translate }}\n        </div>\n        <ng-scrollbar\n          class=\"z-time-scroll-minute-end h-[11rem] w-14\"\n          [class.rounded-bl-sm]=\"!zShowHour() && !zShowSecond() && zTimeFormat() !== '12h'\"\n          [class.rounded-tl-sm]=\"!zShowHour() && (zShowSecond() || zTimeFormat() === '12h')\"\n          [class.rounded-br-sm]=\"(zShowHour() || !zShowHour()) && !zShowSecond() && zTimeFormat() !== '12h'\"\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\n        class=\"flex flex-col\"\n        [class.border-r]=\"zTimeFormat() === '12h'\"\n        [class.border-border]=\"zTimeFormat() === '12h'\">\n        <div\n          class=\"text-muted-foreground border-b-border flex h-7 shrink-0 items-center justify-center border-b text-xs font-medium select-none\">\n          {{ 'i18n_z_ui_calendar_second' | translate }}\n        </div>\n        <ng-scrollbar\n          class=\"z-time-scroll-second-end h-[11rem] w-14\"\n          [class.rounded-br-sm]=\"zTimeFormat() !== '12h'\"\n          [class.rounded-bl-sm]=\"!zShowHour() && !zShowMinute() && zTimeFormat() !== '12h'\"\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    @if (zTimeFormat() === '12h') {\n      <div class=\"flex flex-col\">\n        <div\n          class=\"text-muted-foreground border-b-border flex h-7 shrink-0 items-center justify-center border-b text-xs font-medium select-none\">\n          {{ 'i18n_z_ui_calendar_period' | translate }}\n        </div>\n        <ng-scrollbar class=\"z-time-scroll-period-end h-[11rem] w-14\" [class.rounded-br-sm]=\"true\" track=\"vertical\">\n          <div class=\"flex flex-col\">\n            @for (p of ['AM', 'PM']; track p) {\n              @let pSelected = p === periodEnd();\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]=\"!pSelected\"\n                [class.bg-primary]=\"pSelected\"\n                [class.text-primary-foreground]=\"pSelected\"\n                [class.font-medium]=\"pSelected\"\n                (click)=\"selectPeriodEnd($any(p))\">\n                {{ p }}\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: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NgScrollbar, selector: "ng-scrollbar:not([externalViewport]), [ngScrollbar]", exportAs: ["ngScrollbar"] }, { kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zAnimatedType", "zAnimate", "zAnimationTrigger", "zSize", "zStrokeWidth", "zSvg"] }, { kind: "component", type: ZSelectComponent, selector: "z-select", inputs: ["class", "zMode", "zSize", "zLabel", "zLabelClass", "zPlaceholder", "zRequired", "zDisabled", "zReadonly", "zLoading", "zPrefix", "zAllowClear", "zWrap", "zShowSearch", "zPlaceholderSearch", "zDebounce", "zNotFoundText", "zEmptyText", "zEmptyIcon", "zMaxTagCount", "zDropdownMaxHeight", "zOptionHeight", "zVirtualScroll", "zShowAction", "zOptions", "zConfig", "zTranslateLabels", "zKey", "zSearchServer", "zLoadingMore", "zEnableLoadMore", "zScrollDistance", "zMaxVisible", "zScrollClose", "zPosition", "zSelectedTemplate", "zOptionTemplate", "zActionTemplate", "zAsyncValidators", "zAsyncDebounce", "zAsyncValidateOn", "zValidators"], outputs: ["zOnSearch", "zOnLoadMore", "zOnBlur", "zOnFocus", "zControl", "zEvent"], exportAs: ["zSelect"] }, { kind: "directive", type: ZTooltipDirective, selector: "[z-tooltip], [zTooltip]", inputs: ["zContent", "zPosition", "zTooltipPosition", "zTrigger", "zTooltipTrigger", "zTooltipType", "zTooltipSize", "zClass", "zTooltipClass", "zShowDelay", "zTooltipShowDelay", "zHideDelay", "zTooltipHideDelay", "zArrow", "zTooltipArrow", "zDisabled", "zTooltipDisabled", "zOffset", "zTooltipOffset", "zAutoDetect", "zTriggerElement", "zAlwaysShow", "zMaxWidth"], outputs: ["zShow", "zHide"], exportAs: ["zTooltip"] }, { kind: "directive", type: ZPopoverDirective, selector: "[z-popover]", inputs: ["zPopoverContent", "zPosition", "zTrigger", "zPopoverTrigger", "zClass", "zShowDelay", "zHideDelay", "zDisabled", "zOffset", "zPopoverWidth", "zTriggerRef", "zManualClose", "zOutsideClickClose", "zScrollClose", "zShowArrow"], outputs: ["zShow", "zHide", "zHideStart", "zControl", "zPositionChange", "zOutsideClick"], exportAs: ["zPopover"] }, { kind: "component", type: ZButtonComponent, selector: "z-button, button[z-button], a[z-button]", inputs: ["class", "zType", "zSize", "zShape", "zLabel", "zLoading", "zDisabled", "zTypeIcon", "zAnimatedTypeIcon", "zAnimateIcon", "zAnimationTriggerIcon", "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 });
+        ], 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      [zOutsideClickClose]=\"true\"\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      z-tooltip\n      [zContent]=\"displayValue()\"\n      zTooltipTrigger=\"hover\"\n      zTooltipPosition=\"top\"\n      [zTooltipDisabled]=\"isInputFocused() || isOpen() || !hasValue()\"\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-sm outline-none disabled:opacity-100\"\n          [class.cursor-pointer]=\"!zAllowEdit()\"\n          [class.pointer-events-none]=\"!zAllowEdit()\"\n          [class.text-center]=\"!rangeShortDisplayValue()\"\n          [class.text-left]=\"rangeShortDisplayValue()\"\n          [placeholder]=\"'i18n_z_ui_calendar_start_date' | translate\"\n          [value]=\"inputDisplayStart()\"\n          [disabled]=\"isDisabled()\"\n          [readonly]=\"zReadonly() || !zAllowEdit()\"\n          (click)=\"zAllowEdit() && isOpen() && $event.stopPropagation()\"\n          (focus)=\"onInputFocus($event)\"\n          (input)=\"onStartInputChange($event)\"\n          (blur)=\"onInputBlur($event)\"\n          (keydown.enter)=\"onStartInputEnter($event)\"\n          (keydown.escape)=\"onStartInputEscape($event)\" />\n        @if (!rangeShortDisplayValue()) {\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 disabled:opacity-100\"\n            [class.cursor-pointer]=\"!zAllowEdit()\"\n            [class.pointer-events-none]=\"!zAllowEdit()\"\n            [placeholder]=\"'i18n_z_ui_calendar_end_date' | translate\"\n            [value]=\"inputDisplayEnd()\"\n            [disabled]=\"isDisabled()\"\n            [readonly]=\"zReadonly() || !zAllowEdit()\"\n            (click)=\"zAllowEdit() && isOpen() && $event.stopPropagation()\"\n            (focus)=\"onInputFocus($event)\"\n            (input)=\"onEndInputChange($event)\"\n            (blur)=\"onInputBlur($event)\"\n            (keydown.enter)=\"onEndInputEnter($event)\"\n            (keydown.escape)=\"onEndInputEscape($event)\" />\n        }\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 disabled:opacity-100\"\n          [class.cursor-pointer]=\"!zAllowEdit()\"\n          [class.pointer-events-none]=\"!zAllowEdit()\"\n          [placeholder]=\"effectivePlaceholder()\"\n          [value]=\"inputDisplayValue()\"\n          [disabled]=\"isDisabled()\"\n          [readonly]=\"zReadonly() || !zAllowEdit()\"\n          (click)=\"zAllowEdit() && isOpen() && $event.stopPropagation()\"\n          (focus)=\"onInputFocus($event)\"\n          (input)=\"onInputChange($event)\"\n          (blur)=\"onInputBlur($event)\"\n          (keydown.enter)=\"onInputEnter($event)\"\n          (keydown.escape)=\"onInputEscape($event)\" />\n      }\n\n      @if (zAllowClear() && !isDisabled() && !zReadonly()) {\n        <button\n          type=\"button\"\n          tabindex=\"-1\"\n          class=\"text-muted-foreground hover:text-foreground flex size-5 shrink-0 cursor-pointer items-center justify-center rounded-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-[calc(100vw-1.5rem)] flex-col overflow-hidden 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 class=\"border-border hidden shrink-0 flex-col gap-0 space-y-1 overflow-y-auto border-r p-2 sm:flex\">\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 min-h-0 flex-1 flex-col items-center overflow-hidden pb-0 sm:overflow-visible sm:py-2\"\n      [class.sm:pt-0!]=\"isTimeMode()\"\n      [class]=\"\n        !isRangeMode()\n          ? 'w-[17.75rem] max-w-[calc(100vw-1.5rem)]'\n          : 'w-[17.75rem] max-w-[calc(100vw-1.5rem)] sm:w-auto sm:max-w-none'\n      \">\n      @if (zQuickSelect() && zMode() === 'range') {\n        <div class=\"border-border w-full border-b px-2 pt-2 pb-2 sm:hidden\">\n          <z-select\n            class=\"w-full\"\n            zSize=\"sm\"\n            zPosition=\"bottom-left\"\n            [zShowSearch]=\"false\"\n            [zAllowClear]=\"false\"\n            [zOptions]=\"quickSelectOptions()\"\n            [ngModel]=\"activePresetKey()\"\n            [ngModelOptions]=\"{ standalone: true }\"\n            (ngModelChange)=\"onQuickSelectKeyChange($event)\" />\n        </div>\n      }\n      <div class=\"min-h-0 w-full flex-1 overflow-x-hidden overflow-y-auto pt-2 sm:overflow-visible sm:pt-0\">\n        @if (!isTimeMode()) {\n          <div\n            class=\"z-calendars-wrapper flex w-full flex-col items-center gap-0 sm:flex-row sm:items-stretch sm:justify-center\">\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\n                class=\"border-border bg-border mb-2 hidden self-stretch sm:block sm:w-px\"\n                [class.mb-2]=\"!zQuickSelect() || (zQuickSelect() && zShowOk())\"></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 pt-2 sm:pt-0\">\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\n              class=\"hover:bg-muted border-border flex w-full cursor-pointer items-center justify-center gap-1.5 border-t px-3 py-1.5 transition-colors\"\n              z-popover\n              [zPopoverContent]=\"timeDropdownTpl\"\n              zPosition=\"bottom\"\n              [zPopoverWidth]=\"240\"\n              [zOffset]=\"4\"\n              zTrigger=\"click\"\n              zClass=\"border-border shadow-lg\"\n              (zShow)=\"onTimeDropdownShow()\">\n              <z-icon zType=\"lucideCalendarClock\" zSize=\"18\" class=\"text-muted-foreground mr-1 shrink-0\" />\n              <span class=\"text-sm font-medium tabular-nums select-none\">\n                @if (zShowHour()) {\n                  {{ formattedHour() }}\n                }\n                @if (zShowHour() && zShowMinute()) {\n                  <span class=\"text-muted-foreground\">:</span>\n                }\n                @if (zShowMinute()) {\n                  {{ formattedMinute() }}\n                }\n                @if (zShowMinute() && zShowSecond()) {\n                  <span class=\"text-muted-foreground\">:</span>\n                }\n                @if (zShowSecond()) {\n                  {{ formattedSecond() }}\n                }\n                @if (zTimeFormat() === '12h') {\n                  <span class=\"text-primary ml-0.5 font-semibold\">\n                    {{ period() }}\n                  </span>\n                }\n              </span>\n              <z-icon zType=\"lucideChevronDown\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\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\n                class=\"hover:bg-muted flex flex-1 cursor-pointer items-center justify-center gap-1.5 px-3 py-1.5 transition-colors\"\n                z-popover\n                [zPopoverContent]=\"timeDropdownTpl\"\n                zPosition=\"bottom\"\n                [zPopoverWidth]=\"240\"\n                [zOffset]=\"4\"\n                zTrigger=\"click\"\n                zClass=\"border-border shadow-lg\"\n                (zShow)=\"onTimeDropdownShow()\">\n                <z-icon zType=\"lucideCalendarClock\" zSize=\"18\" class=\"text-muted-foreground mr-1 shrink-0\" />\n                <span class=\"text-sm font-medium tabular-nums select-none\">\n                  @if (zShowHour()) {\n                    {{ formattedHour() }}\n                  }\n                  @if (zShowHour() && zShowMinute()) {\n                    <span class=\"text-muted-foreground\">:</span>\n                  }\n                  @if (zShowMinute()) {\n                    {{ formattedMinute() }}\n                  }\n                  @if (zShowMinute() && zShowSecond()) {\n                    <span class=\"text-muted-foreground\">:</span>\n                  }\n                  @if (zShowSecond()) {\n                    {{ formattedSecond() }}\n                  }\n                  @if (zTimeFormat() === '12h') {\n                    <span class=\"text-primary ml-0.5 font-semibold\">\n                      {{ period() }}\n                    </span>\n                  }\n                </span>\n                <z-icon zType=\"lucideChevronDown\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\n              </div>\n\n              <!-- Divider -->\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\n                class=\"hover:bg-muted flex flex-1 cursor-pointer items-center justify-center gap-1.5 px-3 py-1.5 transition-colors\"\n                z-popover\n                [zPopoverContent]=\"timeDropdownEndTpl\"\n                zPosition=\"bottom\"\n                [zPopoverWidth]=\"240\"\n                [zOffset]=\"4\"\n                zTrigger=\"click\"\n                zClass=\"border-border shadow-lg\"\n                (zShow)=\"onTimeDropdownEndShow()\">\n                <z-icon zType=\"lucideCalendarClock\" zSize=\"18\" class=\"text-muted-foreground mr-1 shrink-0\" />\n                <span class=\"text-sm font-medium tabular-nums select-none\">\n                  @if (zShowHour()) {\n                    {{ formattedHourEnd() }}\n                  }\n                  @if (zShowHour() && zShowMinute()) {\n                    <span class=\"text-muted-foreground\">:</span>\n                  }\n                  @if (zShowMinute()) {\n                    {{ formattedMinuteEnd() }}\n                  }\n                  @if (zShowMinute() && zShowSecond()) {\n                    <span class=\"text-muted-foreground\">:</span>\n                  }\n                  @if (zShowSecond()) {\n                    {{ formattedSecondEnd() }}\n                  }\n                  @if (zTimeFormat() === '12h') {\n                    <span class=\"text-primary ml-0.5 font-semibold\">\n                      {{ periodEnd() }}\n                    </span>\n                  }\n                </span>\n                <z-icon zType=\"lucideChevronDown\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\n              </div>\n            </div>\n          }\n        } @else {\n          <!-- Time Only Mode -->\n          <div class=\"flex w-full justify-center px-2 pt-2 pb-1\">\n            <ng-container [ngTemplateOutlet]=\"timeDropdownTpl\" />\n          </div>\n        }\n      </div>\n\n      @if (!(zQuickSelect() && zMode() === 'range' && !showOkButton() && !showCancelButton())) {\n        <div\n          class=\"bg-popover border-border z-10 flex w-full shrink-0 items-center justify-between gap-2 border-t px-2 py-2 shadow-[0_-2px_8px_-2px_rgb(0_0_0_/_10%)] sm:pt-2 sm:pb-0 sm:shadow-none\">\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 min-w-56 justify-center overflow-hidden rounded-sm\">\n    @if (zShowHour()) {\n      <div\n        class=\"flex flex-col\"\n        [class.border-r]=\"zShowMinute() || zShowSecond() || zTimeFormat() === '12h'\"\n        [class.border-border]=\"zShowMinute() || zShowSecond() || zTimeFormat() === '12h'\">\n        <div\n          class=\"text-muted-foreground border-b-border flex h-7 shrink-0 items-center justify-center border-b text-xs font-medium select-none\">\n          {{ 'i18n_z_ui_calendar_hour' | translate }}\n        </div>\n        <ng-scrollbar\n          class=\"z-time-scroll-hour h-[11rem] w-14\"\n          [class.rounded-bl-sm]=\"!zShowMinute() && !zShowSecond() && zTimeFormat() !== '12h'\"\n          [class.rounded-tl-sm]=\"zShowMinute() || zShowSecond() || zTimeFormat() === '12h'\"\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\n        class=\"flex flex-col\"\n        [class.border-r]=\"zShowSecond() || zTimeFormat() === '12h'\"\n        [class.border-border]=\"zShowSecond() || zTimeFormat() === '12h'\">\n        <div\n          class=\"text-muted-foreground border-b-border flex h-7 shrink-0 items-center justify-center border-b text-xs font-medium select-none\">\n          {{ 'i18n_z_ui_calendar_minute' | translate }}\n        </div>\n        <ng-scrollbar\n          class=\"z-time-scroll-minute h-[11rem] w-14\"\n          [class.rounded-bl-sm]=\"!zShowHour() && !zShowSecond() && zTimeFormat() !== '12h'\"\n          [class.rounded-tl-sm]=\"!zShowHour() && (zShowSecond() || zTimeFormat() === '12h')\"\n          [class.rounded-br-sm]=\"(zShowHour() || !zShowHour()) && !zShowSecond() && zTimeFormat() !== '12h'\"\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\n        class=\"flex flex-col\"\n        [class.border-r]=\"zTimeFormat() === '12h'\"\n        [class.border-border]=\"zTimeFormat() === '12h'\">\n        <div\n          class=\"text-muted-foreground border-b-border flex h-7 shrink-0 items-center justify-center border-b text-xs font-medium select-none\">\n          {{ 'i18n_z_ui_calendar_second' | translate }}\n        </div>\n        <ng-scrollbar\n          class=\"z-time-scroll-second h-[11rem] w-14\"\n          [class.rounded-br-sm]=\"zTimeFormat() !== '12h'\"\n          [class.rounded-bl-sm]=\"!zShowHour() && !zShowMinute() && zTimeFormat() !== '12h'\"\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    @if (zTimeFormat() === '12h') {\n      <div class=\"flex flex-col\">\n        <div\n          class=\"text-muted-foreground border-b-border flex h-7 shrink-0 items-center justify-center border-b text-xs font-medium select-none\">\n          {{ 'i18n_z_ui_calendar_period' | translate }}\n        </div>\n        <ng-scrollbar class=\"z-time-scroll-period h-[11rem] w-14\" [class.rounded-br-sm]=\"true\" track=\"vertical\">\n          <div class=\"flex flex-col\">\n            @for (p of ['AM', 'PM']; track p) {\n              @let pSelected = p === period();\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]=\"!pSelected\"\n                [class.bg-primary]=\"pSelected\"\n                [class.text-primary-foreground]=\"pSelected\"\n                [class.font-medium]=\"pSelected\"\n                (click)=\"selectPeriod($any(p))\">\n                {{ p }}\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 min-w-56 justify-center overflow-hidden rounded-sm\">\n    @if (zShowHour()) {\n      <div\n        class=\"flex flex-col\"\n        [class.border-r]=\"zShowMinute() || zShowSecond() || zTimeFormat() === '12h'\"\n        [class.border-border]=\"zShowMinute() || zShowSecond() || zTimeFormat() === '12h'\">\n        <div\n          class=\"text-muted-foreground border-b-border flex h-7 shrink-0 items-center justify-center border-b text-xs font-medium select-none\">\n          {{ 'i18n_z_ui_calendar_hour' | translate }}\n        </div>\n        <ng-scrollbar\n          class=\"z-time-scroll-hour-end h-[11rem] w-14\"\n          [class.rounded-bl-sm]=\"!zShowMinute() && !zShowSecond() && zTimeFormat() !== '12h'\"\n          [class.rounded-tl-sm]=\"zShowMinute() || zShowSecond() || zTimeFormat() === '12h'\"\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\n        class=\"flex flex-col\"\n        [class.border-r]=\"zShowSecond() || zTimeFormat() === '12h'\"\n        [class.border-border]=\"zShowSecond() || zTimeFormat() === '12h'\">\n        <div\n          class=\"text-muted-foreground border-b-border flex h-7 shrink-0 items-center justify-center border-b text-xs font-medium select-none\">\n          {{ 'i18n_z_ui_calendar_minute' | translate }}\n        </div>\n        <ng-scrollbar\n          class=\"z-time-scroll-minute-end h-[11rem] w-14\"\n          [class.rounded-bl-sm]=\"!zShowHour() && !zShowSecond() && zTimeFormat() !== '12h'\"\n          [class.rounded-tl-sm]=\"!zShowHour() && (zShowSecond() || zTimeFormat() === '12h')\"\n          [class.rounded-br-sm]=\"(zShowHour() || !zShowHour()) && !zShowSecond() && zTimeFormat() !== '12h'\"\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\n        class=\"flex flex-col\"\n        [class.border-r]=\"zTimeFormat() === '12h'\"\n        [class.border-border]=\"zTimeFormat() === '12h'\">\n        <div\n          class=\"text-muted-foreground border-b-border flex h-7 shrink-0 items-center justify-center border-b text-xs font-medium select-none\">\n          {{ 'i18n_z_ui_calendar_second' | translate }}\n        </div>\n        <ng-scrollbar\n          class=\"z-time-scroll-second-end h-[11rem] w-14\"\n          [class.rounded-br-sm]=\"zTimeFormat() !== '12h'\"\n          [class.rounded-bl-sm]=\"!zShowHour() && !zShowMinute() && zTimeFormat() !== '12h'\"\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    @if (zTimeFormat() === '12h') {\n      <div class=\"flex flex-col\">\n        <div\n          class=\"text-muted-foreground border-b-border flex h-7 shrink-0 items-center justify-center border-b text-xs font-medium select-none\">\n          {{ 'i18n_z_ui_calendar_period' | translate }}\n        </div>\n        <ng-scrollbar class=\"z-time-scroll-period-end h-[11rem] w-14\" [class.rounded-br-sm]=\"true\" track=\"vertical\">\n          <div class=\"flex flex-col\">\n            @for (p of ['AM', 'PM']; track p) {\n              @let pSelected = p === periodEnd();\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]=\"!pSelected\"\n                [class.bg-primary]=\"pSelected\"\n                [class.text-primary-foreground]=\"pSelected\"\n                [class.font-medium]=\"pSelected\"\n                (click)=\"selectPeriodEnd($any(p))\">\n                {{ p }}\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: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NgScrollbar, selector: "ng-scrollbar:not([externalViewport]), [ngScrollbar]", exportAs: ["ngScrollbar"] }, { kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zAnimatedType", "zAnimate", "zAnimationTrigger", "zSize", "zStrokeWidth", "zSvg"] }, { kind: "component", type: ZSelectComponent, selector: "z-select", inputs: ["class", "zMode", "zSize", "zLabel", "zLabelClass", "zPlaceholder", "zRequired", "zDisabled", "zReadonly", "zLoading", "zPrefix", "zAllowClear", "zWrap", "zShowSearch", "zPlaceholderSearch", "zDebounce", "zNotFoundText", "zEmptyText", "zEmptyIcon", "zMaxTagCount", "zDropdownMaxHeight", "zOptionHeight", "zVirtualScroll", "zShowAction", "zOptions", "zConfig", "zTranslateLabels", "zKey", "zSearchServer", "zLoadingMore", "zEnableLoadMore", "zScrollDistance", "zMaxVisible", "zScrollClose", "zPosition", "zSelectedTemplate", "zOptionTemplate", "zActionTemplate", "zAsyncValidators", "zAsyncDebounce", "zAsyncValidateOn", "zValidators"], outputs: ["zOnSearch", "zOnLoadMore", "zOnBlur", "zOnFocus", "zControl", "zEvent"], exportAs: ["zSelect"] }, { kind: "directive", type: ZTooltipDirective, selector: "[z-tooltip], [zTooltip]", inputs: ["zContent", "zPosition", "zTooltipPosition", "zTrigger", "zTooltipTrigger", "zTooltipType", "zTooltipSize", "zClass", "zTooltipClass", "zShowDelay", "zTooltipShowDelay", "zHideDelay", "zTooltipHideDelay", "zArrow", "zTooltipArrow", "zDisabled", "zTooltipDisabled", "zOffset", "zTooltipOffset", "zAutoDetect", "zTriggerElement", "zAlwaysShow", "zMaxWidth"], outputs: ["zShow", "zHide"], exportAs: ["zTooltip"] }, { kind: "directive", type: ZPopoverDirective, selector: "[z-popover]", inputs: ["zPopoverContent", "zPosition", "zTrigger", "zPopoverTrigger", "zClass", "zShowDelay", "zHideDelay", "zDisabled", "zOffset", "zPopoverWidth", "zTriggerRef", "zManualClose", "zOutsideClickClose", "zScrollClose", "zShowArrow"], outputs: ["zShow", "zHide", "zHideStart", "zControl", "zPositionChange", "zOutsideClick"], exportAs: ["zPopover"] }, { kind: "component", type: ZButtonComponent, selector: "z-button, button[z-button], a[z-button]", inputs: ["class", "zType", "zSize", "zShape", "zLabel", "zLoading", "zDisabled", "zTypeIcon", "zAnimatedTypeIcon", "zAnimateIcon", "zAnimationTriggerIcon", "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,
@@ -3154,7 +3296,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      z-tooltip\n      [zContent]=\"displayValue()\"\n      zTooltipTrigger=\"hover\"\n      zTooltipPosition=\"top\"\n      [zTooltipDisabled]=\"isInputFocused() || isOpen() || !hasValue()\"\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-sm outline-none disabled:opacity-100\"\n          [class.cursor-pointer]=\"!zAllowEdit()\"\n          [class.pointer-events-none]=\"!zAllowEdit()\"\n          [class.text-center]=\"!rangeShortDisplayValue()\"\n          [class.text-left]=\"rangeShortDisplayValue()\"\n          [placeholder]=\"'i18n_z_ui_calendar_start_date' | translate\"\n          [value]=\"inputDisplayStart()\"\n          [disabled]=\"isDisabled()\"\n          [readonly]=\"zReadonly() || !zAllowEdit()\"\n          (click)=\"zAllowEdit() && 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        @if (!rangeShortDisplayValue()) {\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 disabled:opacity-100\"\n            [class.cursor-pointer]=\"!zAllowEdit()\"\n            [class.pointer-events-none]=\"!zAllowEdit()\"\n            [placeholder]=\"'i18n_z_ui_calendar_end_date' | translate\"\n            [value]=\"inputDisplayEnd()\"\n            [disabled]=\"isDisabled()\"\n            [readonly]=\"zReadonly() || !zAllowEdit()\"\n            (click)=\"zAllowEdit() && 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        }\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 disabled:opacity-100\"\n          [class.cursor-pointer]=\"!zAllowEdit()\"\n          [class.pointer-events-none]=\"!zAllowEdit()\"\n          [placeholder]=\"effectivePlaceholder()\"\n          [value]=\"inputDisplayValue()\"\n          [disabled]=\"isDisabled()\"\n          [readonly]=\"zReadonly() || !zAllowEdit()\"\n          (click)=\"zAllowEdit() && 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-[calc(100vw-1.5rem)] flex-col overflow-hidden 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 class=\"border-border hidden shrink-0 flex-col gap-0 space-y-1 overflow-y-auto border-r p-2 sm:flex\">\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 min-h-0 flex-1 flex-col items-center overflow-hidden pb-0 sm:overflow-visible sm:py-2\"\n      [class.sm:pt-0!]=\"isTimeMode()\"\n      [class]=\"\n        !isRangeMode()\n          ? 'w-[17.75rem] max-w-[calc(100vw-1.5rem)]'\n          : 'w-[17.75rem] max-w-[calc(100vw-1.5rem)] sm:w-auto sm:max-w-none'\n      \">\n      @if (zQuickSelect() && zMode() === 'range') {\n        <div class=\"border-border w-full border-b px-2 pt-2 pb-2 sm:hidden\">\n          <z-select\n            class=\"w-full\"\n            zSize=\"sm\"\n            zPosition=\"bottom-left\"\n            [zShowSearch]=\"false\"\n            [zAllowClear]=\"false\"\n            [zOptions]=\"quickSelectOptions()\"\n            [ngModel]=\"activePresetKey()\"\n            [ngModelOptions]=\"{ standalone: true }\"\n            (ngModelChange)=\"onQuickSelectKeyChange($event)\" />\n        </div>\n      }\n      <div class=\"min-h-0 w-full flex-1 overflow-x-hidden overflow-y-auto pt-2 sm:overflow-visible sm:pt-0\">\n        @if (!isTimeMode()) {\n          <div\n            class=\"z-calendars-wrapper flex w-full flex-col items-center gap-0 sm:flex-row sm:items-stretch sm:justify-center\">\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\n                class=\"border-border bg-border mb-2 hidden self-stretch sm:block sm:w-px\"\n                [class.mb-2]=\"!zQuickSelect() || (zQuickSelect() && zShowOk())\"></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 pt-2 sm:pt-0\">\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\n              class=\"hover:bg-muted border-border flex w-full cursor-pointer items-center justify-center gap-1.5 border-t px-3 py-1.5 transition-colors\"\n              z-popover\n              [zPopoverContent]=\"timeDropdownTpl\"\n              zPosition=\"bottom\"\n              [zPopoverWidth]=\"240\"\n              [zOffset]=\"4\"\n              zTrigger=\"click\"\n              zClass=\"border-border shadow-lg\"\n              (zShow)=\"onTimeDropdownShow()\">\n              <z-icon zType=\"lucideCalendarClock\" zSize=\"18\" class=\"text-muted-foreground mr-1 shrink-0\" />\n              <span class=\"text-sm font-medium tabular-nums select-none\">\n                @if (zShowHour()) {\n                  {{ formattedHour() }}\n                }\n                @if (zShowHour() && zShowMinute()) {\n                  <span class=\"text-muted-foreground\">:</span>\n                }\n                @if (zShowMinute()) {\n                  {{ formattedMinute() }}\n                }\n                @if (zShowMinute() && zShowSecond()) {\n                  <span class=\"text-muted-foreground\">:</span>\n                }\n                @if (zShowSecond()) {\n                  {{ formattedSecond() }}\n                }\n                @if (zTimeFormat() === '12h') {\n                  <span class=\"text-primary ml-0.5 font-semibold\">\n                    {{ period() }}\n                  </span>\n                }\n              </span>\n              <z-icon zType=\"lucideChevronDown\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\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\n                class=\"hover:bg-muted flex flex-1 cursor-pointer items-center justify-center gap-1.5 px-3 py-1.5 transition-colors\"\n                z-popover\n                [zPopoverContent]=\"timeDropdownTpl\"\n                zPosition=\"bottom\"\n                [zPopoverWidth]=\"240\"\n                [zOffset]=\"4\"\n                zTrigger=\"click\"\n                zClass=\"border-border shadow-lg\"\n                (zShow)=\"onTimeDropdownShow()\">\n                <z-icon zType=\"lucideCalendarClock\" zSize=\"18\" class=\"text-muted-foreground mr-1 shrink-0\" />\n                <span class=\"text-sm font-medium tabular-nums select-none\">\n                  @if (zShowHour()) {\n                    {{ formattedHour() }}\n                  }\n                  @if (zShowHour() && zShowMinute()) {\n                    <span class=\"text-muted-foreground\">:</span>\n                  }\n                  @if (zShowMinute()) {\n                    {{ formattedMinute() }}\n                  }\n                  @if (zShowMinute() && zShowSecond()) {\n                    <span class=\"text-muted-foreground\">:</span>\n                  }\n                  @if (zShowSecond()) {\n                    {{ formattedSecond() }}\n                  }\n                  @if (zTimeFormat() === '12h') {\n                    <span class=\"text-primary ml-0.5 font-semibold\">\n                      {{ period() }}\n                    </span>\n                  }\n                </span>\n                <z-icon zType=\"lucideChevronDown\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\n              </div>\n\n              <!-- Divider -->\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\n                class=\"hover:bg-muted flex flex-1 cursor-pointer items-center justify-center gap-1.5 px-3 py-1.5 transition-colors\"\n                z-popover\n                [zPopoverContent]=\"timeDropdownEndTpl\"\n                zPosition=\"bottom\"\n                [zPopoverWidth]=\"240\"\n                [zOffset]=\"4\"\n                zTrigger=\"click\"\n                zClass=\"border-border shadow-lg\"\n                (zShow)=\"onTimeDropdownEndShow()\">\n                <z-icon zType=\"lucideCalendarClock\" zSize=\"18\" class=\"text-muted-foreground mr-1 shrink-0\" />\n                <span class=\"text-sm font-medium tabular-nums select-none\">\n                  @if (zShowHour()) {\n                    {{ formattedHourEnd() }}\n                  }\n                  @if (zShowHour() && zShowMinute()) {\n                    <span class=\"text-muted-foreground\">:</span>\n                  }\n                  @if (zShowMinute()) {\n                    {{ formattedMinuteEnd() }}\n                  }\n                  @if (zShowMinute() && zShowSecond()) {\n                    <span class=\"text-muted-foreground\">:</span>\n                  }\n                  @if (zShowSecond()) {\n                    {{ formattedSecondEnd() }}\n                  }\n                  @if (zTimeFormat() === '12h') {\n                    <span class=\"text-primary ml-0.5 font-semibold\">\n                      {{ periodEnd() }}\n                    </span>\n                  }\n                </span>\n                <z-icon zType=\"lucideChevronDown\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\n              </div>\n            </div>\n          }\n        } @else {\n          <!-- Time Only Mode -->\n          <div class=\"flex w-full justify-center px-2 pt-2 pb-1\">\n            <ng-container [ngTemplateOutlet]=\"timeDropdownTpl\" />\n          </div>\n        }\n      </div>\n\n      @if (!(zQuickSelect() && zMode() === 'range' && !showOkButton() && !showCancelButton())) {\n        <div\n          class=\"bg-popover border-border z-10 flex w-full shrink-0 items-center justify-between gap-2 border-t px-2 py-2 shadow-[0_-2px_8px_-2px_rgb(0_0_0_/_10%)] sm:pt-2 sm:pb-0 sm:shadow-none\">\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 min-w-56 justify-center overflow-hidden rounded-sm\">\n    @if (zShowHour()) {\n      <div\n        class=\"flex flex-col\"\n        [class.border-r]=\"zShowMinute() || zShowSecond() || zTimeFormat() === '12h'\"\n        [class.border-border]=\"zShowMinute() || zShowSecond() || zTimeFormat() === '12h'\">\n        <div\n          class=\"text-muted-foreground border-b-border flex h-7 shrink-0 items-center justify-center border-b text-xs font-medium select-none\">\n          {{ 'i18n_z_ui_calendar_hour' | translate }}\n        </div>\n        <ng-scrollbar\n          class=\"z-time-scroll-hour h-[11rem] w-14\"\n          [class.rounded-bl-sm]=\"!zShowMinute() && !zShowSecond() && zTimeFormat() !== '12h'\"\n          [class.rounded-tl-sm]=\"zShowMinute() || zShowSecond() || zTimeFormat() === '12h'\"\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\n        class=\"flex flex-col\"\n        [class.border-r]=\"zShowSecond() || zTimeFormat() === '12h'\"\n        [class.border-border]=\"zShowSecond() || zTimeFormat() === '12h'\">\n        <div\n          class=\"text-muted-foreground border-b-border flex h-7 shrink-0 items-center justify-center border-b text-xs font-medium select-none\">\n          {{ 'i18n_z_ui_calendar_minute' | translate }}\n        </div>\n        <ng-scrollbar\n          class=\"z-time-scroll-minute h-[11rem] w-14\"\n          [class.rounded-bl-sm]=\"!zShowHour() && !zShowSecond() && zTimeFormat() !== '12h'\"\n          [class.rounded-tl-sm]=\"!zShowHour() && (zShowSecond() || zTimeFormat() === '12h')\"\n          [class.rounded-br-sm]=\"(zShowHour() || !zShowHour()) && !zShowSecond() && zTimeFormat() !== '12h'\"\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\n        class=\"flex flex-col\"\n        [class.border-r]=\"zTimeFormat() === '12h'\"\n        [class.border-border]=\"zTimeFormat() === '12h'\">\n        <div\n          class=\"text-muted-foreground border-b-border flex h-7 shrink-0 items-center justify-center border-b text-xs font-medium select-none\">\n          {{ 'i18n_z_ui_calendar_second' | translate }}\n        </div>\n        <ng-scrollbar\n          class=\"z-time-scroll-second h-[11rem] w-14\"\n          [class.rounded-br-sm]=\"zTimeFormat() !== '12h'\"\n          [class.rounded-bl-sm]=\"!zShowHour() && !zShowMinute() && zTimeFormat() !== '12h'\"\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    @if (zTimeFormat() === '12h') {\n      <div class=\"flex flex-col\">\n        <div\n          class=\"text-muted-foreground border-b-border flex h-7 shrink-0 items-center justify-center border-b text-xs font-medium select-none\">\n          {{ 'i18n_z_ui_calendar_period' | translate }}\n        </div>\n        <ng-scrollbar class=\"z-time-scroll-period h-[11rem] w-14\" [class.rounded-br-sm]=\"true\" track=\"vertical\">\n          <div class=\"flex flex-col\">\n            @for (p of ['AM', 'PM']; track p) {\n              @let pSelected = p === period();\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]=\"!pSelected\"\n                [class.bg-primary]=\"pSelected\"\n                [class.text-primary-foreground]=\"pSelected\"\n                [class.font-medium]=\"pSelected\"\n                (click)=\"selectPeriod($any(p))\">\n                {{ p }}\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 min-w-56 justify-center overflow-hidden rounded-sm\">\n    @if (zShowHour()) {\n      <div\n        class=\"flex flex-col\"\n        [class.border-r]=\"zShowMinute() || zShowSecond() || zTimeFormat() === '12h'\"\n        [class.border-border]=\"zShowMinute() || zShowSecond() || zTimeFormat() === '12h'\">\n        <div\n          class=\"text-muted-foreground border-b-border flex h-7 shrink-0 items-center justify-center border-b text-xs font-medium select-none\">\n          {{ 'i18n_z_ui_calendar_hour' | translate }}\n        </div>\n        <ng-scrollbar\n          class=\"z-time-scroll-hour-end h-[11rem] w-14\"\n          [class.rounded-bl-sm]=\"!zShowMinute() && !zShowSecond() && zTimeFormat() !== '12h'\"\n          [class.rounded-tl-sm]=\"zShowMinute() || zShowSecond() || zTimeFormat() === '12h'\"\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\n        class=\"flex flex-col\"\n        [class.border-r]=\"zShowSecond() || zTimeFormat() === '12h'\"\n        [class.border-border]=\"zShowSecond() || zTimeFormat() === '12h'\">\n        <div\n          class=\"text-muted-foreground border-b-border flex h-7 shrink-0 items-center justify-center border-b text-xs font-medium select-none\">\n          {{ 'i18n_z_ui_calendar_minute' | translate }}\n        </div>\n        <ng-scrollbar\n          class=\"z-time-scroll-minute-end h-[11rem] w-14\"\n          [class.rounded-bl-sm]=\"!zShowHour() && !zShowSecond() && zTimeFormat() !== '12h'\"\n          [class.rounded-tl-sm]=\"!zShowHour() && (zShowSecond() || zTimeFormat() === '12h')\"\n          [class.rounded-br-sm]=\"(zShowHour() || !zShowHour()) && !zShowSecond() && zTimeFormat() !== '12h'\"\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\n        class=\"flex flex-col\"\n        [class.border-r]=\"zTimeFormat() === '12h'\"\n        [class.border-border]=\"zTimeFormat() === '12h'\">\n        <div\n          class=\"text-muted-foreground border-b-border flex h-7 shrink-0 items-center justify-center border-b text-xs font-medium select-none\">\n          {{ 'i18n_z_ui_calendar_second' | translate }}\n        </div>\n        <ng-scrollbar\n          class=\"z-time-scroll-second-end h-[11rem] w-14\"\n          [class.rounded-br-sm]=\"zTimeFormat() !== '12h'\"\n          [class.rounded-bl-sm]=\"!zShowHour() && !zShowMinute() && zTimeFormat() !== '12h'\"\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    @if (zTimeFormat() === '12h') {\n      <div class=\"flex flex-col\">\n        <div\n          class=\"text-muted-foreground border-b-border flex h-7 shrink-0 items-center justify-center border-b text-xs font-medium select-none\">\n          {{ 'i18n_z_ui_calendar_period' | translate }}\n        </div>\n        <ng-scrollbar class=\"z-time-scroll-period-end h-[11rem] w-14\" [class.rounded-br-sm]=\"true\" track=\"vertical\">\n          <div class=\"flex flex-col\">\n            @for (p of ['AM', 'PM']; track p) {\n              @let pSelected = p === periodEnd();\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]=\"!pSelected\"\n                [class.bg-primary]=\"pSelected\"\n                [class.text-primary-foreground]=\"pSelected\"\n                [class.font-medium]=\"pSelected\"\n                (click)=\"selectPeriodEnd($any(p))\">\n                {{ p }}\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      [zOutsideClickClose]=\"true\"\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      z-tooltip\n      [zContent]=\"displayValue()\"\n      zTooltipTrigger=\"hover\"\n      zTooltipPosition=\"top\"\n      [zTooltipDisabled]=\"isInputFocused() || isOpen() || !hasValue()\"\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-sm outline-none disabled:opacity-100\"\n          [class.cursor-pointer]=\"!zAllowEdit()\"\n          [class.pointer-events-none]=\"!zAllowEdit()\"\n          [class.text-center]=\"!rangeShortDisplayValue()\"\n          [class.text-left]=\"rangeShortDisplayValue()\"\n          [placeholder]=\"'i18n_z_ui_calendar_start_date' | translate\"\n          [value]=\"inputDisplayStart()\"\n          [disabled]=\"isDisabled()\"\n          [readonly]=\"zReadonly() || !zAllowEdit()\"\n          (click)=\"zAllowEdit() && isOpen() && $event.stopPropagation()\"\n          (focus)=\"onInputFocus($event)\"\n          (input)=\"onStartInputChange($event)\"\n          (blur)=\"onInputBlur($event)\"\n          (keydown.enter)=\"onStartInputEnter($event)\"\n          (keydown.escape)=\"onStartInputEscape($event)\" />\n        @if (!rangeShortDisplayValue()) {\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 disabled:opacity-100\"\n            [class.cursor-pointer]=\"!zAllowEdit()\"\n            [class.pointer-events-none]=\"!zAllowEdit()\"\n            [placeholder]=\"'i18n_z_ui_calendar_end_date' | translate\"\n            [value]=\"inputDisplayEnd()\"\n            [disabled]=\"isDisabled()\"\n            [readonly]=\"zReadonly() || !zAllowEdit()\"\n            (click)=\"zAllowEdit() && isOpen() && $event.stopPropagation()\"\n            (focus)=\"onInputFocus($event)\"\n            (input)=\"onEndInputChange($event)\"\n            (blur)=\"onInputBlur($event)\"\n            (keydown.enter)=\"onEndInputEnter($event)\"\n            (keydown.escape)=\"onEndInputEscape($event)\" />\n        }\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 disabled:opacity-100\"\n          [class.cursor-pointer]=\"!zAllowEdit()\"\n          [class.pointer-events-none]=\"!zAllowEdit()\"\n          [placeholder]=\"effectivePlaceholder()\"\n          [value]=\"inputDisplayValue()\"\n          [disabled]=\"isDisabled()\"\n          [readonly]=\"zReadonly() || !zAllowEdit()\"\n          (click)=\"zAllowEdit() && isOpen() && $event.stopPropagation()\"\n          (focus)=\"onInputFocus($event)\"\n          (input)=\"onInputChange($event)\"\n          (blur)=\"onInputBlur($event)\"\n          (keydown.enter)=\"onInputEnter($event)\"\n          (keydown.escape)=\"onInputEscape($event)\" />\n      }\n\n      @if (zAllowClear() && !isDisabled() && !zReadonly()) {\n        <button\n          type=\"button\"\n          tabindex=\"-1\"\n          class=\"text-muted-foreground hover:text-foreground flex size-5 shrink-0 cursor-pointer items-center justify-center rounded-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-[calc(100vw-1.5rem)] flex-col overflow-hidden 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 class=\"border-border hidden shrink-0 flex-col gap-0 space-y-1 overflow-y-auto border-r p-2 sm:flex\">\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 min-h-0 flex-1 flex-col items-center overflow-hidden pb-0 sm:overflow-visible sm:py-2\"\n      [class.sm:pt-0!]=\"isTimeMode()\"\n      [class]=\"\n        !isRangeMode()\n          ? 'w-[17.75rem] max-w-[calc(100vw-1.5rem)]'\n          : 'w-[17.75rem] max-w-[calc(100vw-1.5rem)] sm:w-auto sm:max-w-none'\n      \">\n      @if (zQuickSelect() && zMode() === 'range') {\n        <div class=\"border-border w-full border-b px-2 pt-2 pb-2 sm:hidden\">\n          <z-select\n            class=\"w-full\"\n            zSize=\"sm\"\n            zPosition=\"bottom-left\"\n            [zShowSearch]=\"false\"\n            [zAllowClear]=\"false\"\n            [zOptions]=\"quickSelectOptions()\"\n            [ngModel]=\"activePresetKey()\"\n            [ngModelOptions]=\"{ standalone: true }\"\n            (ngModelChange)=\"onQuickSelectKeyChange($event)\" />\n        </div>\n      }\n      <div class=\"min-h-0 w-full flex-1 overflow-x-hidden overflow-y-auto pt-2 sm:overflow-visible sm:pt-0\">\n        @if (!isTimeMode()) {\n          <div\n            class=\"z-calendars-wrapper flex w-full flex-col items-center gap-0 sm:flex-row sm:items-stretch sm:justify-center\">\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\n                class=\"border-border bg-border mb-2 hidden self-stretch sm:block sm:w-px\"\n                [class.mb-2]=\"!zQuickSelect() || (zQuickSelect() && zShowOk())\"></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 pt-2 sm:pt-0\">\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\n              class=\"hover:bg-muted border-border flex w-full cursor-pointer items-center justify-center gap-1.5 border-t px-3 py-1.5 transition-colors\"\n              z-popover\n              [zPopoverContent]=\"timeDropdownTpl\"\n              zPosition=\"bottom\"\n              [zPopoverWidth]=\"240\"\n              [zOffset]=\"4\"\n              zTrigger=\"click\"\n              zClass=\"border-border shadow-lg\"\n              (zShow)=\"onTimeDropdownShow()\">\n              <z-icon zType=\"lucideCalendarClock\" zSize=\"18\" class=\"text-muted-foreground mr-1 shrink-0\" />\n              <span class=\"text-sm font-medium tabular-nums select-none\">\n                @if (zShowHour()) {\n                  {{ formattedHour() }}\n                }\n                @if (zShowHour() && zShowMinute()) {\n                  <span class=\"text-muted-foreground\">:</span>\n                }\n                @if (zShowMinute()) {\n                  {{ formattedMinute() }}\n                }\n                @if (zShowMinute() && zShowSecond()) {\n                  <span class=\"text-muted-foreground\">:</span>\n                }\n                @if (zShowSecond()) {\n                  {{ formattedSecond() }}\n                }\n                @if (zTimeFormat() === '12h') {\n                  <span class=\"text-primary ml-0.5 font-semibold\">\n                    {{ period() }}\n                  </span>\n                }\n              </span>\n              <z-icon zType=\"lucideChevronDown\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\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\n                class=\"hover:bg-muted flex flex-1 cursor-pointer items-center justify-center gap-1.5 px-3 py-1.5 transition-colors\"\n                z-popover\n                [zPopoverContent]=\"timeDropdownTpl\"\n                zPosition=\"bottom\"\n                [zPopoverWidth]=\"240\"\n                [zOffset]=\"4\"\n                zTrigger=\"click\"\n                zClass=\"border-border shadow-lg\"\n                (zShow)=\"onTimeDropdownShow()\">\n                <z-icon zType=\"lucideCalendarClock\" zSize=\"18\" class=\"text-muted-foreground mr-1 shrink-0\" />\n                <span class=\"text-sm font-medium tabular-nums select-none\">\n                  @if (zShowHour()) {\n                    {{ formattedHour() }}\n                  }\n                  @if (zShowHour() && zShowMinute()) {\n                    <span class=\"text-muted-foreground\">:</span>\n                  }\n                  @if (zShowMinute()) {\n                    {{ formattedMinute() }}\n                  }\n                  @if (zShowMinute() && zShowSecond()) {\n                    <span class=\"text-muted-foreground\">:</span>\n                  }\n                  @if (zShowSecond()) {\n                    {{ formattedSecond() }}\n                  }\n                  @if (zTimeFormat() === '12h') {\n                    <span class=\"text-primary ml-0.5 font-semibold\">\n                      {{ period() }}\n                    </span>\n                  }\n                </span>\n                <z-icon zType=\"lucideChevronDown\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\n              </div>\n\n              <!-- Divider -->\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\n                class=\"hover:bg-muted flex flex-1 cursor-pointer items-center justify-center gap-1.5 px-3 py-1.5 transition-colors\"\n                z-popover\n                [zPopoverContent]=\"timeDropdownEndTpl\"\n                zPosition=\"bottom\"\n                [zPopoverWidth]=\"240\"\n                [zOffset]=\"4\"\n                zTrigger=\"click\"\n                zClass=\"border-border shadow-lg\"\n                (zShow)=\"onTimeDropdownEndShow()\">\n                <z-icon zType=\"lucideCalendarClock\" zSize=\"18\" class=\"text-muted-foreground mr-1 shrink-0\" />\n                <span class=\"text-sm font-medium tabular-nums select-none\">\n                  @if (zShowHour()) {\n                    {{ formattedHourEnd() }}\n                  }\n                  @if (zShowHour() && zShowMinute()) {\n                    <span class=\"text-muted-foreground\">:</span>\n                  }\n                  @if (zShowMinute()) {\n                    {{ formattedMinuteEnd() }}\n                  }\n                  @if (zShowMinute() && zShowSecond()) {\n                    <span class=\"text-muted-foreground\">:</span>\n                  }\n                  @if (zShowSecond()) {\n                    {{ formattedSecondEnd() }}\n                  }\n                  @if (zTimeFormat() === '12h') {\n                    <span class=\"text-primary ml-0.5 font-semibold\">\n                      {{ periodEnd() }}\n                    </span>\n                  }\n                </span>\n                <z-icon zType=\"lucideChevronDown\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\n              </div>\n            </div>\n          }\n        } @else {\n          <!-- Time Only Mode -->\n          <div class=\"flex w-full justify-center px-2 pt-2 pb-1\">\n            <ng-container [ngTemplateOutlet]=\"timeDropdownTpl\" />\n          </div>\n        }\n      </div>\n\n      @if (!(zQuickSelect() && zMode() === 'range' && !showOkButton() && !showCancelButton())) {\n        <div\n          class=\"bg-popover border-border z-10 flex w-full shrink-0 items-center justify-between gap-2 border-t px-2 py-2 shadow-[0_-2px_8px_-2px_rgb(0_0_0_/_10%)] sm:pt-2 sm:pb-0 sm:shadow-none\">\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 min-w-56 justify-center overflow-hidden rounded-sm\">\n    @if (zShowHour()) {\n      <div\n        class=\"flex flex-col\"\n        [class.border-r]=\"zShowMinute() || zShowSecond() || zTimeFormat() === '12h'\"\n        [class.border-border]=\"zShowMinute() || zShowSecond() || zTimeFormat() === '12h'\">\n        <div\n          class=\"text-muted-foreground border-b-border flex h-7 shrink-0 items-center justify-center border-b text-xs font-medium select-none\">\n          {{ 'i18n_z_ui_calendar_hour' | translate }}\n        </div>\n        <ng-scrollbar\n          class=\"z-time-scroll-hour h-[11rem] w-14\"\n          [class.rounded-bl-sm]=\"!zShowMinute() && !zShowSecond() && zTimeFormat() !== '12h'\"\n          [class.rounded-tl-sm]=\"zShowMinute() || zShowSecond() || zTimeFormat() === '12h'\"\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\n        class=\"flex flex-col\"\n        [class.border-r]=\"zShowSecond() || zTimeFormat() === '12h'\"\n        [class.border-border]=\"zShowSecond() || zTimeFormat() === '12h'\">\n        <div\n          class=\"text-muted-foreground border-b-border flex h-7 shrink-0 items-center justify-center border-b text-xs font-medium select-none\">\n          {{ 'i18n_z_ui_calendar_minute' | translate }}\n        </div>\n        <ng-scrollbar\n          class=\"z-time-scroll-minute h-[11rem] w-14\"\n          [class.rounded-bl-sm]=\"!zShowHour() && !zShowSecond() && zTimeFormat() !== '12h'\"\n          [class.rounded-tl-sm]=\"!zShowHour() && (zShowSecond() || zTimeFormat() === '12h')\"\n          [class.rounded-br-sm]=\"(zShowHour() || !zShowHour()) && !zShowSecond() && zTimeFormat() !== '12h'\"\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\n        class=\"flex flex-col\"\n        [class.border-r]=\"zTimeFormat() === '12h'\"\n        [class.border-border]=\"zTimeFormat() === '12h'\">\n        <div\n          class=\"text-muted-foreground border-b-border flex h-7 shrink-0 items-center justify-center border-b text-xs font-medium select-none\">\n          {{ 'i18n_z_ui_calendar_second' | translate }}\n        </div>\n        <ng-scrollbar\n          class=\"z-time-scroll-second h-[11rem] w-14\"\n          [class.rounded-br-sm]=\"zTimeFormat() !== '12h'\"\n          [class.rounded-bl-sm]=\"!zShowHour() && !zShowMinute() && zTimeFormat() !== '12h'\"\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    @if (zTimeFormat() === '12h') {\n      <div class=\"flex flex-col\">\n        <div\n          class=\"text-muted-foreground border-b-border flex h-7 shrink-0 items-center justify-center border-b text-xs font-medium select-none\">\n          {{ 'i18n_z_ui_calendar_period' | translate }}\n        </div>\n        <ng-scrollbar class=\"z-time-scroll-period h-[11rem] w-14\" [class.rounded-br-sm]=\"true\" track=\"vertical\">\n          <div class=\"flex flex-col\">\n            @for (p of ['AM', 'PM']; track p) {\n              @let pSelected = p === period();\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]=\"!pSelected\"\n                [class.bg-primary]=\"pSelected\"\n                [class.text-primary-foreground]=\"pSelected\"\n                [class.font-medium]=\"pSelected\"\n                (click)=\"selectPeriod($any(p))\">\n                {{ p }}\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 min-w-56 justify-center overflow-hidden rounded-sm\">\n    @if (zShowHour()) {\n      <div\n        class=\"flex flex-col\"\n        [class.border-r]=\"zShowMinute() || zShowSecond() || zTimeFormat() === '12h'\"\n        [class.border-border]=\"zShowMinute() || zShowSecond() || zTimeFormat() === '12h'\">\n        <div\n          class=\"text-muted-foreground border-b-border flex h-7 shrink-0 items-center justify-center border-b text-xs font-medium select-none\">\n          {{ 'i18n_z_ui_calendar_hour' | translate }}\n        </div>\n        <ng-scrollbar\n          class=\"z-time-scroll-hour-end h-[11rem] w-14\"\n          [class.rounded-bl-sm]=\"!zShowMinute() && !zShowSecond() && zTimeFormat() !== '12h'\"\n          [class.rounded-tl-sm]=\"zShowMinute() || zShowSecond() || zTimeFormat() === '12h'\"\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\n        class=\"flex flex-col\"\n        [class.border-r]=\"zShowSecond() || zTimeFormat() === '12h'\"\n        [class.border-border]=\"zShowSecond() || zTimeFormat() === '12h'\">\n        <div\n          class=\"text-muted-foreground border-b-border flex h-7 shrink-0 items-center justify-center border-b text-xs font-medium select-none\">\n          {{ 'i18n_z_ui_calendar_minute' | translate }}\n        </div>\n        <ng-scrollbar\n          class=\"z-time-scroll-minute-end h-[11rem] w-14\"\n          [class.rounded-bl-sm]=\"!zShowHour() && !zShowSecond() && zTimeFormat() !== '12h'\"\n          [class.rounded-tl-sm]=\"!zShowHour() && (zShowSecond() || zTimeFormat() === '12h')\"\n          [class.rounded-br-sm]=\"(zShowHour() || !zShowHour()) && !zShowSecond() && zTimeFormat() !== '12h'\"\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\n        class=\"flex flex-col\"\n        [class.border-r]=\"zTimeFormat() === '12h'\"\n        [class.border-border]=\"zTimeFormat() === '12h'\">\n        <div\n          class=\"text-muted-foreground border-b-border flex h-7 shrink-0 items-center justify-center border-b text-xs font-medium select-none\">\n          {{ 'i18n_z_ui_calendar_second' | translate }}\n        </div>\n        <ng-scrollbar\n          class=\"z-time-scroll-second-end h-[11rem] w-14\"\n          [class.rounded-br-sm]=\"zTimeFormat() !== '12h'\"\n          [class.rounded-bl-sm]=\"!zShowHour() && !zShowMinute() && zTimeFormat() !== '12h'\"\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    @if (zTimeFormat() === '12h') {\n      <div class=\"flex flex-col\">\n        <div\n          class=\"text-muted-foreground border-b-border flex h-7 shrink-0 items-center justify-center border-b text-xs font-medium select-none\">\n          {{ 'i18n_z_ui_calendar_period' | translate }}\n        </div>\n        <ng-scrollbar class=\"z-time-scroll-period-end h-[11rem] w-14\" [class.rounded-br-sm]=\"true\" track=\"vertical\">\n          <div class=\"flex flex-col\">\n            @for (p of ['AM', 'PM']; track p) {\n              @let pSelected = p === periodEnd();\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]=\"!pSelected\"\n                [class.bg-primary]=\"pSelected\"\n                [class.text-primary-foreground]=\"pSelected\"\n                [class.font-medium]=\"pSelected\"\n                (click)=\"selectPeriodEnd($any(p))\">\n                {{ p }}\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 }] }], zAllowEdit: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAllowEdit", required: false }] }], zShortTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShortTime", 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 }] }] } });
 
 /**