@shival99/z-ui 1.0.1 → 1.0.2

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

@@ -0,0 +1,2335 @@
+import * as i0 from '@angular/core';
+import { Pipe, input, output, viewChild, computed, signal, inject, Injector, DestroyRef, ChangeDetectorRef, effect, forwardRef, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { NgControl, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { merge } from 'rxjs';
+import { cva } from 'class-variance-authority';
+import { zTransform, zGenerateId, zMergeClasses } from '@shival99/z-ui/utils';
+import { ZButtonComponent } from '@shival99/z-ui/components/z-button';
+import { ZIconComponent } from '@shival99/z-ui/components/z-icon';
+import { ZPopoverDirective } from '@shival99/z-ui/components/z-popover';
+
+const createDate = (year, month, day, hour = 0, minute = 0, second = 0) => new Date(year, month, day, hour, minute, second);
+const cloneDate = (date) => new Date(date.getTime());
+const getToday = () => {
+    const now = new Date();
+    return createDate(now.getFullYear(), now.getMonth(), now.getDate());
+};
+const startOfDay = (date) => createDate(date.getFullYear(), date.getMonth(), date.getDate());
+const startOfMonth = (date) => createDate(date.getFullYear(), date.getMonth(), 1);
+const endOfMonth = (date) => createDate(date.getFullYear(), date.getMonth() + 1, 0);
+const startOfYear = (date) => createDate(date.getFullYear(), 0, 1);
+const addDays = (date, days) => {
+    const result = cloneDate(date);
+    result.setDate(result.getDate() + days);
+    return result;
+};
+const addMonths = (date, months) => {
+    const result = cloneDate(date);
+    result.setMonth(result.getMonth() + months);
+    return result;
+};
+const addYears = (date, years) => {
+    const result = cloneDate(date);
+    result.setFullYear(result.getFullYear() + years);
+    return result;
+};
+const setMonth = (date, month) => {
+    const result = cloneDate(date);
+    result.setMonth(month);
+    return result;
+};
+const setYear = (date, year) => {
+    const result = cloneDate(date);
+    result.setFullYear(year);
+    return result;
+};
+const setTime = (date, hour, minute, second) => {
+    const result = cloneDate(date);
+    result.setHours(hour, minute, second, 0);
+    return result;
+};
+const isSameDay = (date1, date2) => {
+    if (!date1 || !date2) {
+        return false;
+    }
+    return (date1.getFullYear() === date2.getFullYear() &&
+        date1.getMonth() === date2.getMonth() &&
+        date1.getDate() === date2.getDate());
+};
+const isSameMonth = (date1, date2) => date1.getFullYear() === date2.getFullYear() && date1.getMonth() === date2.getMonth();
+const isSameYear = (date1, date2) => date1.getFullYear() === date2.getFullYear();
+const isToday = (date) => isSameDay(date, new Date());
+const isBefore = (date1, date2) => startOfDay(date1).getTime() < startOfDay(date2).getTime();
+const isAfter = (date1, date2) => startOfDay(date1).getTime() > startOfDay(date2).getTime();
+const isBeforeOrEqual = (date1, date2) => startOfDay(date1).getTime() <= startOfDay(date2).getTime();
+const isAfterOrEqual = (date1, date2) => startOfDay(date1).getTime() >= startOfDay(date2).getTime();
+const isBetween = (date, start, end) => {
+    const time = startOfDay(date).getTime();
+    const startTime = startOfDay(start).getTime();
+    const endTime = startOfDay(end).getTime();
+    return time > startTime && time < endTime;
+};
+const isDateInRange = (date, minDate, maxDate) => {
+    if (minDate && isBefore(date, minDate)) {
+        return false;
+    }
+    if (maxDate && isAfter(date, maxDate)) {
+        return false;
+    }
+    return true;
+};
+const getDaysInMonth = (year, month) => new Date(year, month + 1, 0).getDate();
+const getFirstDayOfMonth = (year, month) => new Date(year, month, 1).getDay();
+const computeRangeProperties = (date, rangeStart, rangeEnd, hoveredDate) => {
+    const defaultProps = {
+        isRangeStart: false,
+        isRangeEnd: false,
+        isInRange: false,
+        isHovered: false,
+    };
+    if (rangeStart && rangeEnd) {
+        const actualStart = isBefore(rangeStart, rangeEnd) ? rangeStart : rangeEnd;
+        const actualEnd = isAfter(rangeEnd, rangeStart) ? rangeEnd : rangeStart;
+        return {
+            isRangeStart: isSameDay(date, actualStart),
+            isRangeEnd: isSameDay(date, actualEnd),
+            isInRange: isBetween(date, actualStart, actualEnd),
+            isHovered: false,
+        };
+    }
+    if (rangeStart && hoveredDate && !rangeEnd) {
+        const isHoveredBefore = isBefore(hoveredDate, rangeStart);
+        const effectiveStart = isHoveredBefore ? hoveredDate : rangeStart;
+        const effectiveEnd = isHoveredBefore ? rangeStart : hoveredDate;
+        return {
+            isRangeStart: isSameDay(date, effectiveStart),
+            isRangeEnd: isSameDay(date, effectiveEnd),
+            isInRange: isBetween(date, effectiveStart, effectiveEnd),
+            isHovered: isSameDay(date, hoveredDate),
+        };
+    }
+    if (rangeStart) {
+        return { ...defaultProps, isRangeStart: isSameDay(date, rangeStart) };
+    }
+    return defaultProps;
+};
+const createCalendarDay = (date, isCurrentMonth, today, options) => {
+    const { selectedDate, minDate, maxDate, rangeStart, rangeEnd, hoveredDate, disabledDate } = options;
+    const isSelected = selectedDate ? isSameDay(date, selectedDate) : false;
+    const rangeProps = computeRangeProperties(date, rangeStart, rangeEnd, hoveredDate);
+    const isOutOfRange = !isDateInRange(date, minDate ?? null, maxDate ?? null);
+    const isDisabledByFn = disabledDate ? disabledDate(date) : false;
+    return {
+        date,
+        day: date.getDate(),
+        isCurrentMonth,
+        isToday: isSameDay(date, today),
+        isDisabled: isOutOfRange || isDisabledByFn,
+        isSelected,
+        ...rangeProps,
+    };
+};
+const generateCalendarGrid = (year, month, options = {}) => {
+    const daysInMonth = getDaysInMonth(year, month);
+    const firstDayOfMonth = getFirstDayOfMonth(year, month);
+    const today = getToday();
+    const prevMonth = month === 0 ? 11 : month - 1;
+    const prevMonthYear = month === 0 ? year - 1 : year;
+    const daysInPrevMonth = getDaysInMonth(prevMonthYear, prevMonth);
+    const days = [];
+    for (let i = firstDayOfMonth - 1; i >= 0; i--) {
+        const day = daysInPrevMonth - i;
+        const date = createDate(prevMonthYear, prevMonth, day);
+        days.push(createCalendarDay(date, false, today, options));
+    }
+    for (let day = 1; day <= daysInMonth; day++) {
+        const date = createDate(year, month, day);
+        days.push(createCalendarDay(date, true, today, options));
+    }
+    const nextMonth = month === 11 ? 0 : month + 1;
+    const nextMonthYear = month === 11 ? year + 1 : year;
+    const remainingDays = 42 - days.length;
+    for (let day = 1; day <= remainingDays; day++) {
+        const date = createDate(nextMonthYear, nextMonth, day);
+        days.push(createCalendarDay(date, false, today, options));
+    }
+    const weeks = [];
+    for (let i = 0; i < 6; i++) {
+        weeks.push(days.slice(i * 7, (i + 1) * 7));
+    }
+    return weeks;
+};
+const getMonthNames = (locale = 'vi-VN') => {
+    if (locale === 'vi-VN') {
+        return ['T1', 'T2', 'T3', 'T4', 'T5', 'T6', 'T7', 'T8', 'T9', 'T10', 'T11', 'T12'];
+    }
+    const months = [];
+    for (let i = 0; i < 12; i++) {
+        const date = new Date(2024, i, 1);
+        months.push(date.toLocaleDateString(locale, { month: 'short' }));
+    }
+    return months;
+};
+const getWeekdayNames = (locale = 'vi-VN') => {
+    const weekdays = [];
+    for (let i = 0; i < 7; i++) {
+        const actualDate = new Date(2024, 0, 7 + i);
+        weekdays.push(actualDate.toLocaleDateString(locale, { weekday: 'narrow' }));
+    }
+    return weekdays;
+};
+const getYearRange = (centerYear, range = 12) => {
+    const startYear = centerYear - Math.floor(range / 2);
+    return Array.from({ length: range }, (_, i) => startYear + i);
+};
+const formatDate = (date, format) => {
+    if (!date) {
+        return '';
+    }
+    const hours = date.getHours();
+    const hours12 = hours % 12 || 12;
+    const tokens = {
+        YYYY: String(date.getFullYear()),
+        MM: String(date.getMonth() + 1).padStart(2, '0'),
+        DD: String(date.getDate()).padStart(2, '0'),
+        HH: String(hours).padStart(2, '0'),
+        hh: String(hours12).padStart(2, '0'),
+        mm: String(date.getMinutes()).padStart(2, '0'),
+        ss: String(date.getSeconds()).padStart(2, '0'),
+    };
+    let result = format;
+    for (const [token, value] of Object.entries(tokens)) {
+        result = result.replace(token, value);
+    }
+    return result;
+};
+const parseDate = (dateString, format) => {
+    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 numbers = dateString.match(/\d+/g)?.map(n => parseInt(n, 10)) ?? [];
+    if (numbers.length === 0) {
+        return null;
+    }
+    const currentYear = new Date().getFullYear();
+    const values = {
+        YYYY: currentYear,
+        MM: 1,
+        DD: 1,
+        HH: 0,
+        hh: 0,
+        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 isPM = /PM/i.test(dateString);
+    const isAM = /AM/i.test(dateString);
+    let hour = values['HH'];
+    if (format.includes('hh')) {
+        hour = values['hh'];
+        if (isPM && hour < 12) {
+            hour += 12;
+        }
+        if (isAM && hour === 12) {
+            hour = 0;
+        }
+    }
+    try {
+        const date = createDate(values['YYYY'], values['MM'] - 1, values['DD'], hour, values['mm'], values['ss']);
+        // Validate the date is valid (e.g., not 31/02/2025)
+        if (isNaN(date.getTime())) {
+            return null;
+        }
+        return date;
+    }
+    catch {
+        return null;
+    }
+};
+const toISOString = (date) => {
+    if (!date) {
+        return '';
+    }
+    return date.toISOString();
+};
+const fromISOString = (isoString) => {
+    if (!isoString) {
+        return null;
+    }
+    const date = new Date(isoString);
+    return isNaN(date.getTime()) ? null : date;
+};
+const getQuickSelectPresets = () => [
+    {
+        key: 'today',
+        label: 'Hôm nay',
+        getValue: () => ({ start: getToday(), end: getToday() }),
+    },
+    {
+        key: '7days',
+        label: '7 ngày qua',
+        getValue: () => ({
+            start: addDays(getToday(), -6),
+            end: getToday(),
+        }),
+    },
+    {
+        key: '14days',
+        label: '14 ngày qua',
+        getValue: () => ({
+            start: addDays(getToday(), -13),
+            end: getToday(),
+        }),
+    },
+    {
+        key: '1month',
+        label: '1 tháng qua',
+        getValue: () => ({
+            start: addMonths(getToday(), -1),
+            end: getToday(),
+        }),
+    },
+    {
+        key: '2months',
+        label: '2 tháng qua',
+        getValue: () => ({
+            start: addMonths(getToday(), -2),
+            end: getToday(),
+        }),
+    },
+    {
+        key: '3months',
+        label: '3 tháng qua',
+        getValue: () => ({
+            start: addMonths(getToday(), -3),
+            end: getToday(),
+        }),
+    },
+    {
+        key: '6months',
+        label: '6 tháng qua',
+        getValue: () => ({
+            start: addMonths(getToday(), -6),
+            end: getToday(),
+        }),
+    },
+    {
+        key: 'custom',
+        label: 'Tùy chỉnh',
+        getValue: () => null,
+    },
+];
+const normalizeRange = (start, end) => {
+    if (!start || !end) {
+        return { start, end };
+    }
+    if (isBefore(end, start)) {
+        return { start: end, end: start };
+    }
+    return { start, end };
+};
+const isValidRange = (range) => range.start !== null && range.end !== null;
+const clampTime = (value, min, max) => Math.max(min, Math.min(max, value));
+const parseTimeValue = (value, max) => {
+    const parsed = parseInt(value, 10);
+    if (isNaN(parsed)) {
+        return 0;
+    }
+    return clampTime(parsed, 0, max);
+};
+const formatTimeValue = (value) => String(value).padStart(2, '0');
+const getDayState = (day) => {
+    if (day.isDisabled) {
+        return 'disabled';
+    }
+    if (!day.isCurrentMonth) {
+        return 'otherMonth';
+    }
+    if (day.isRangeStart && day.isRangeEnd) {
+        return 'rangeSingle';
+    }
+    if (day.isRangeStart) {
+        return 'rangeStart';
+    }
+    if (day.isRangeEnd) {
+        return 'rangeEnd';
+    }
+    if (day.isInRange) {
+        return 'inRange';
+    }
+    if (day.isHovered) {
+        return 'hovered';
+    }
+    if (day.isSelected) {
+        return 'selected';
+    }
+    if (day.isToday) {
+        return 'today';
+    }
+    return 'default';
+};
+const getMonthState = (monthIndex, currentMonthIndex) => monthIndex === currentMonthIndex ? 'selected' : 'default';
+const getQuarterState = (quarterIndex, currentQuarterIndex) => quarterIndex === currentQuarterIndex ? 'selected' : 'default';
+const getYearState = (year, currentYear) => year === currentYear ? 'selected' : 'default';
+
+const zCalendarVariants = cva([
+    'group flex w-fit items-center rounded-[6px] border border-input bg-white shadow-xs cursor-pointer',
+    'transition-[border-color,box-shadow,background-color,color,opacity] duration-200',
+    'dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
+    'outline-none',
+    'text-sm',
+], {
+    variants: {
+        zSize: {
+            sm: 'h-8 px-2 gap-2 text-sm',
+            default: 'h-9 px-2 gap-2 text-sm',
+            lg: 'h-10 px-2 gap-2.5 text-sm',
+        },
+        zStatus: {
+            default: 'focus-within:border-ring focus-within:ring-ring/50 focus-within:ring-[3px]',
+            open: 'border-ring ring-ring/50 ring-[3px]',
+            error: 'border-destructive! ring-destructive/20 ring-[3px] focus-within:border-destructive! focus-within:ring-destructive/30',
+            disabled: 'opacity-50 cursor-not-allowed bg-muted! text-muted-foreground',
+            readonly: 'cursor-default bg-muted/50 text-muted-foreground',
+        },
+    },
+    defaultVariants: {
+        zSize: 'default',
+        zStatus: 'default',
+    },
+});
+const zCalendarDayVariants = cva([
+    'flex items-center justify-center size-7 text-sm rounded-[4px] cursor-pointer',
+    'transition-all duration-150',
+    'outline-none focus-visible:ring-2 focus-visible:ring-ring',
+], {
+    variants: {
+        state: {
+            default: 'hover:bg-primary/10 text-foreground',
+            today: 'bg-primary/10 text-primary border border-primary',
+            selected: 'bg-primary text-primary-foreground',
+            inRange: 'bg-primary/10 text-foreground',
+            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',
+            otherMonth: 'text-muted-foreground/40 hover:bg-primary/5',
+            hovered: 'bg-primary/15 text-foreground',
+        },
+    },
+    defaultVariants: {
+        state: 'default',
+    },
+});
+const zCalendarMonthVariants = cva([
+    'flex items-center justify-center text-sm rounded-[4px] cursor-pointer px-8 py-1.5',
+    'transition-colors duration-150',
+    'outline-none focus-visible:ring-2 focus-visible:ring-ring',
+], {
+    variants: {
+        state: {
+            default: 'hover:bg-primary/10 text-foreground',
+            current: 'bg-primary/15 text-primary',
+            selected: 'bg-primary text-primary-foreground',
+            disabled: 'text-muted-foreground/50 cursor-not-allowed',
+        },
+    },
+    defaultVariants: {
+        state: 'default',
+    },
+});
+const zCalendarYearVariants = cva([
+    'flex items-center justify-center text-sm rounded-[4px] cursor-pointer px-6 py-1.5',
+    'transition-colors duration-150',
+    'outline-none focus-visible:ring-2 focus-visible:ring-ring',
+], {
+    variants: {
+        state: {
+            default: 'hover:bg-primary/10 text-foreground',
+            current: 'bg-primary/15 text-primary',
+            selected: 'bg-primary text-primary-foreground',
+            disabled: 'text-muted-foreground/50 cursor-not-allowed',
+        },
+    },
+    defaultVariants: {
+        state: 'default',
+    },
+});
+const zCalendarQuarterVariants = cva([
+    'flex items-center justify-center text-sm rounded-[4px] cursor-pointer px-15 py-1.5',
+    'transition-colors duration-150',
+    'outline-none focus-visible:ring-2 focus-visible:ring-ring',
+], {
+    variants: {
+        state: {
+            default: 'hover:bg-primary/10 text-foreground',
+            selected: 'bg-primary text-primary-foreground',
+        },
+    },
+    defaultVariants: {
+        state: 'default',
+    },
+});
+
+class ZDayClassesPipe {
+    transform(day) {
+        const state = getDayState(day);
+        return zCalendarDayVariants({ state });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZDayClassesPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: ZDayClassesPipe, isStandalone: true, name: "zDayClasses" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZDayClassesPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'zDayClasses',
+                    standalone: true,
+                    pure: true,
+                }]
+        }] });
+
+class ZIsPresetDisabledPipe {
+    transform(preset, disabledDateFn) {
+        if (preset.key === 'custom' || !disabledDateFn) {
+            return false;
+        }
+        const value = preset.getValue();
+        if (!value) {
+            return false;
+        }
+        if (value instanceof Date) {
+            return disabledDateFn(value);
+        }
+        if (value.start && disabledDateFn(value.start)) {
+            return true;
+        }
+        if (value.end && disabledDateFn(value.end)) {
+            return true;
+        }
+        return false;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZIsPresetDisabledPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: ZIsPresetDisabledPipe, isStandalone: true, name: "zIsPresetDisabled" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZIsPresetDisabledPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'zIsPresetDisabled',
+                    standalone: true,
+                    pure: true,
+                }]
+        }] });
+
+class ZMonthClassesPipe {
+    transform(monthIndex, currentMonthIndex) {
+        const state = getMonthState(monthIndex, currentMonthIndex);
+        return zCalendarMonthVariants({ state });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZMonthClassesPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: ZMonthClassesPipe, isStandalone: true, name: "zMonthClasses" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZMonthClassesPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'zMonthClasses',
+                    standalone: true,
+                    pure: true,
+                }]
+        }] });
+
+class ZYearClassesPipe {
+    transform(year, currentYear) {
+        const state = getYearState(year, currentYear);
+        return zCalendarYearVariants({ state });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZYearClassesPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: ZYearClassesPipe, isStandalone: true, name: "zYearClasses" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZYearClassesPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'zYearClasses',
+                    standalone: true,
+                    pure: true,
+                }]
+        }] });
+
+class ZQuarterClassesPipe {
+    transform(quarterIndex, currentQuarterIndex) {
+        const state = getQuarterState(quarterIndex, currentQuarterIndex);
+        return zCalendarQuarterVariants({ state });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZQuarterClassesPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: ZQuarterClassesPipe, isStandalone: true, name: "zQuarterClasses" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZQuarterClassesPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'zQuarterClasses',
+                    standalone: true,
+                    pure: true,
+                }]
+        }] });
+
+class ZCalendarComponent {
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : []));
+    zMode = input('single', ...(ngDevMode ? [{ debugName: "zMode" }] : []));
+    zSize = input('default', ...(ngDevMode ? [{ debugName: "zSize" }] : []));
+    zLabel = input('', ...(ngDevMode ? [{ debugName: "zLabel" }] : []));
+    zLabelClass = input('', ...(ngDevMode ? [{ debugName: "zLabelClass" }] : []));
+    zPlaceholder = input('Chọn ngày...', ...(ngDevMode ? [{ debugName: "zPlaceholder" }] : []));
+    zRequired = input(false, { ...(ngDevMode ? { debugName: "zRequired" } : {}), transform: zTransform });
+    zDisabled = input(false, { ...(ngDevMode ? { debugName: "zDisabled" } : {}), transform: zTransform });
+    zReadonly = input(false, { ...(ngDevMode ? { debugName: "zReadonly" } : {}), transform: zTransform });
+    zShowTime = input(false, { ...(ngDevMode ? { debugName: "zShowTime" } : {}), transform: zTransform });
+    zTimeFormat = input('24h', ...(ngDevMode ? [{ debugName: "zTimeFormat" }] : []));
+    zShowHour = input(true, { ...(ngDevMode ? { debugName: "zShowHour" } : {}), transform: zTransform });
+    zShowMinute = input(true, { ...(ngDevMode ? { debugName: "zShowMinute" } : {}), transform: zTransform });
+    zShowSecond = input(true, { ...(ngDevMode ? { debugName: "zShowSecond" } : {}), transform: zTransform });
+    zQuickSelect = input(false, { ...(ngDevMode ? { debugName: "zQuickSelect" } : {}), transform: zTransform });
+    zAllowClear = input(true, { ...(ngDevMode ? { debugName: "zAllowClear" } : {}), transform: zTransform });
+    zFormat = input('DD/MM/YYYY', ...(ngDevMode ? [{ debugName: "zFormat" }] : []));
+    zMinDate = input(null, ...(ngDevMode ? [{ debugName: "zMinDate" }] : []));
+    zMaxDate = input(null, ...(ngDevMode ? [{ debugName: "zMaxDate" }] : []));
+    zValueType = input('date', ...(ngDevMode ? [{ debugName: "zValueType" }] : []));
+    zValidators = input([], ...(ngDevMode ? [{ debugName: "zValidators" }] : []));
+    zLocale = input('vi-VN', ...(ngDevMode ? [{ debugName: "zLocale" }] : []));
+    zShowOk = input(false, { ...(ngDevMode ? { debugName: "zShowOk" } : {}), transform: zTransform });
+    zOkText = input('Áp dụng', ...(ngDevMode ? [{ debugName: "zOkText" }] : []));
+    zShowCancel = input(false, { ...(ngDevMode ? { debugName: "zShowCancel" } : {}), transform: zTransform });
+    zCancelText = input('Huỷ', ...(ngDevMode ? [{ debugName: "zCancelText" }] : []));
+    zDisabledDate = input(null, ...(ngDevMode ? [{ debugName: "zDisabledDate" }] : []));
+    zControl = output();
+    zChange = output();
+    triggerRef = viewChild('triggerEl', ...(ngDevMode ? [{ debugName: "triggerRef" }] : []));
+    inputRef = viewChild('inputEl', ...(ngDevMode ? [{ debugName: "inputRef" }] : []));
+    pickerId = zGenerateId('z-calendar');
+    weekdayNames = getWeekdayNames('vi-VN');
+    monthNames = getMonthNames('vi-VN');
+    quickSelectPresets = getQuickSelectPresets();
+    formattedHour = computed(() => {
+        const h = this._hour();
+        if (this.zTimeFormat() === '12h') {
+            const h12 = h % 12 || 12;
+            return formatTimeValue(h12);
+        }
+        return formatTimeValue(h);
+    }, ...(ngDevMode ? [{ debugName: "formattedHour" }] : []));
+    formattedMinute = computed(() => formatTimeValue(this._minute()), ...(ngDevMode ? [{ debugName: "formattedMinute" }] : []));
+    formattedSecond = computed(() => formatTimeValue(this._second()), ...(ngDevMode ? [{ debugName: "formattedSecond" }] : []));
+    _popoverControl = signal(null, ...(ngDevMode ? [{ debugName: "_popoverControl" }] : []));
+    _selectedDate = signal(null, ...(ngDevMode ? [{ debugName: "_selectedDate" }] : []));
+    _rangeStart = signal(null, ...(ngDevMode ? [{ debugName: "_rangeStart" }] : []));
+    _rangeEnd = signal(null, ...(ngDevMode ? [{ debugName: "_rangeEnd" }] : []));
+    _hoveredDate = signal(null, ...(ngDevMode ? [{ debugName: "_hoveredDate" }] : []));
+    _currentMonth = signal(getToday(), ...(ngDevMode ? [{ debugName: "_currentMonth" }] : []));
+    _endMonth = signal(addMonths(getToday(), 1), ...(ngDevMode ? [{ debugName: "_endMonth" }] : []));
+    _currentView = signal('day', ...(ngDevMode ? [{ debugName: "_currentView" }] : []));
+    _endView = signal('day', ...(ngDevMode ? [{ debugName: "_endView" }] : []));
+    _hour = signal(0, ...(ngDevMode ? [{ debugName: "_hour" }] : []));
+    _minute = signal(0, ...(ngDevMode ? [{ debugName: "_minute" }] : []));
+    _second = signal(0, ...(ngDevMode ? [{ debugName: "_second" }] : []));
+    _period = signal('AM', ...(ngDevMode ? [{ debugName: "_period" }] : []));
+    _hourEnd = signal(0, ...(ngDevMode ? [{ debugName: "_hourEnd" }] : []));
+    _minuteEnd = signal(0, ...(ngDevMode ? [{ debugName: "_minuteEnd" }] : []));
+    _secondEnd = signal(0, ...(ngDevMode ? [{ debugName: "_secondEnd" }] : []));
+    _periodEnd = signal('AM', ...(ngDevMode ? [{ debugName: "_periodEnd" }] : []));
+    _disabled = signal(false, ...(ngDevMode ? [{ debugName: "_disabled" }] : []));
+    _touched = signal(false, ...(ngDevMode ? [{ debugName: "_touched" }] : []));
+    _dirty = signal(false, ...(ngDevMode ? [{ debugName: "_dirty" }] : []));
+    _formControl = signal(null, ...(ngDevMode ? [{ debugName: "_formControl" }] : []));
+    _formStateVersion = signal(0, ...(ngDevMode ? [{ debugName: "_formStateVersion" }] : []));
+    _inputDisplayValue = signal('', ...(ngDevMode ? [{ debugName: "_inputDisplayValue" }] : []));
+    _backupSelectedDate = signal(null, ...(ngDevMode ? [{ debugName: "_backupSelectedDate" }] : []));
+    _backupRangeStart = signal(null, ...(ngDevMode ? [{ debugName: "_backupRangeStart" }] : []));
+    _backupRangeEnd = signal(null, ...(ngDevMode ? [{ debugName: "_backupRangeEnd" }] : []));
+    _activePresetKey = signal(null, ...(ngDevMode ? [{ debugName: "_activePresetKey" }] : []));
+    _hasViewChanged = signal(false, ...(ngDevMode ? [{ debugName: "_hasViewChanged" }] : []));
+    _hasEndViewChanged = signal(false, ...(ngDevMode ? [{ debugName: "_hasEndViewChanged" }] : []));
+    _appliedViaOk = signal(false, ...(ngDevMode ? [{ debugName: "_appliedViaOk" }] : []));
+    _skipBlurHandler = signal(false, ...(ngDevMode ? [{ debugName: "_skipBlurHandler" }] : []));
+    _injector = inject(Injector);
+    _destroyRef = inject(DestroyRef);
+    _cdr = inject(ChangeDetectorRef);
+    _onChange = () => void 0;
+    _onTouched = () => void 0;
+    _ngControl = null;
+    isOpen = computed(() => this._popoverControl()?.isVisible() ?? false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+    hoveredDate = this._hoveredDate.asReadonly();
+    currentView = this._currentView.asReadonly();
+    hour = this._hour.asReadonly();
+    minute = this._minute.asReadonly();
+    second = this._second.asReadonly();
+    period = this._period.asReadonly();
+    inputDisplayValue = this._inputDisplayValue.asReadonly();
+    activePresetKey = this._activePresetKey.asReadonly();
+    hasViewChanged = this._hasViewChanged.asReadonly();
+    hasEndViewChanged = this._hasEndViewChanged.asReadonly();
+    quarterNames = ['Q1', 'Q2', 'Q3', 'Q4'];
+    currentQuarterIndex = computed(() => {
+        const date = this._selectedDate();
+        return date ? Math.floor(date.getMonth() / 3) : -1;
+    }, ...(ngDevMode ? [{ debugName: "currentQuarterIndex" }] : []));
+    isDisabled = computed(() => this._disabled() || this.zDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
+    isRangeMode = computed(() => this.zMode() === 'range', ...(ngDevMode ? [{ debugName: "isRangeMode" }] : []));
+    canApply = computed(() => {
+        if (this.isTimeMode()) {
+            return true;
+        }
+        if (this.isRangeMode()) {
+            return this._rangeStart() !== null && this._rangeEnd() !== null;
+        }
+        return this._selectedDate() !== null;
+    }, ...(ngDevMode ? [{ debugName: "canApply" }] : []));
+    showOkButton = computed(() => this.zShowOk() || this.zShowTime() || this.isTimeMode(), ...(ngDevMode ? [{ debugName: "showOkButton" }] : []));
+    showCancelButton = computed(() => this.zShowCancel() || this.zShowTime() || this.isTimeMode(), ...(ngDevMode ? [{ debugName: "showCancelButton" }] : []));
+    isTimeMode = computed(() => this.zMode() === 'time', ...(ngDevMode ? [{ debugName: "isTimeMode" }] : []));
+    isMonthMode = computed(() => this.zMode() === 'month', ...(ngDevMode ? [{ debugName: "isMonthMode" }] : []));
+    isYearMode = computed(() => this.zMode() === 'year', ...(ngDevMode ? [{ debugName: "isYearMode" }] : []));
+    isQuarterMode = computed(() => this.zMode() === 'quarter', ...(ngDevMode ? [{ debugName: "isQuarterMode" }] : []));
+    todayButtonText = computed(() => {
+        if (this.isQuarterMode()) {
+            return 'Quý này';
+        }
+        if (this.isYearMode()) {
+            return 'Năm này';
+        }
+        if (this.isMonthMode()) {
+            return 'Tháng này';
+        }
+        if (this.zShowTime() || this.isTimeMode()) {
+            return 'Bây giờ';
+        }
+        return 'Hôm nay';
+    }, ...(ngDevMode ? [{ debugName: "todayButtonText" }] : []));
+    currentMonth = computed(() => this._currentMonth(), ...(ngDevMode ? [{ debugName: "currentMonth" }] : []));
+    currentYear = computed(() => this._currentMonth().getFullYear(), ...(ngDevMode ? [{ debugName: "currentYear" }] : []));
+    currentMonthIndex = computed(() => this._currentMonth().getMonth(), ...(ngDevMode ? [{ debugName: "currentMonthIndex" }] : []));
+    currentMonthName = computed(() => {
+        const month = this._currentMonth();
+        return month.toLocaleDateString(this.zLocale(), { month: 'long' });
+    }, ...(ngDevMode ? [{ debugName: "currentMonthName" }] : []));
+    yearRange = computed(() => {
+        const currentYear = this._currentMonth().getFullYear();
+        return getYearRange(currentYear, 12);
+    }, ...(ngDevMode ? [{ debugName: "yearRange" }] : []));
+    yearRangeSmall = computed(() => {
+        const currentYear = this._currentMonth().getFullYear();
+        return getYearRange(currentYear, 9);
+    }, ...(ngDevMode ? [{ debugName: "yearRangeSmall" }] : []));
+    calendarDays = computed(() => {
+        const month = this._currentMonth();
+        const year = month.getFullYear();
+        const monthIndex = month.getMonth();
+        return generateCalendarGrid(year, monthIndex, {
+            selectedDate: this._selectedDate(),
+            rangeStart: this._rangeStart(),
+            rangeEnd: this._rangeEnd(),
+            hoveredDate: this._hoveredDate(),
+            minDate: this.zMinDate(),
+            maxDate: this.zMaxDate(),
+            disabledDate: this.zDisabledDate(),
+        });
+    }, ...(ngDevMode ? [{ debugName: "calendarDays" }] : []));
+    endMonth = computed(() => this._endMonth(), ...(ngDevMode ? [{ debugName: "endMonth" }] : []));
+    endMonthName = computed(() => {
+        const month = this._endMonth();
+        return month.toLocaleDateString(this.zLocale(), { month: 'long' });
+    }, ...(ngDevMode ? [{ debugName: "endMonthName" }] : []));
+    endMonthYear = computed(() => this._endMonth().getFullYear(), ...(ngDevMode ? [{ debugName: "endMonthYear" }] : []));
+    calendarDaysEnd = computed(() => {
+        const month = this._endMonth();
+        const year = month.getFullYear();
+        const monthIndex = month.getMonth();
+        return generateCalendarGrid(year, monthIndex, {
+            selectedDate: this._selectedDate(),
+            rangeStart: this._rangeStart(),
+            rangeEnd: this._rangeEnd(),
+            hoveredDate: this._hoveredDate(),
+            minDate: this.zMinDate(),
+            maxDate: this.zMaxDate(),
+            disabledDate: this.zDisabledDate(),
+        });
+    }, ...(ngDevMode ? [{ debugName: "calendarDaysEnd" }] : []));
+    formattedHourEnd = computed(() => formatTimeValue(this.zTimeFormat() === '12h' ? this._hourEnd() % 12 || 12 : this._hourEnd()), ...(ngDevMode ? [{ debugName: "formattedHourEnd" }] : []));
+    formattedMinuteEnd = computed(() => formatTimeValue(this._minuteEnd()), ...(ngDevMode ? [{ debugName: "formattedMinuteEnd" }] : []));
+    formattedSecondEnd = computed(() => formatTimeValue(this._secondEnd()), ...(ngDevMode ? [{ debugName: "formattedSecondEnd" }] : []));
+    periodEnd = computed(() => this._periodEnd(), ...(ngDevMode ? [{ debugName: "periodEnd" }] : []));
+    endView = this._endView.asReadonly();
+    endYearRange = computed(() => {
+        const currentYear = this._endMonth().getFullYear();
+        return getYearRange(currentYear);
+    }, ...(ngDevMode ? [{ debugName: "endYearRange" }] : []));
+    isStartMonthDisabled(monthIndex) {
+        const disabledDateFn = this.zDisabledDate();
+        if (disabledDateFn) {
+            const year = this._currentMonth().getFullYear();
+            const monthDate = new Date(year, monthIndex, 1);
+            if (disabledDateFn(monthDate)) {
+                return true;
+            }
+        }
+        if (!this.isRangeMode()) {
+            return false;
+        }
+        const startYear = this._currentMonth().getFullYear();
+        const endMonth = this._endMonth();
+        const endYear = endMonth.getFullYear();
+        const endMonthIndex = endMonth.getMonth();
+        if (startYear > endYear) {
+            return true;
+        }
+        if (startYear === endYear && monthIndex > endMonthIndex) {
+            return true;
+        }
+        return false;
+    }
+    isEndMonthDisabled(monthIndex) {
+        const disabledDateFn = this.zDisabledDate();
+        if (disabledDateFn) {
+            const year = this._endMonth().getFullYear();
+            const monthDate = new Date(year, monthIndex, 1);
+            if (disabledDateFn(monthDate)) {
+                return true;
+            }
+        }
+        if (!this.isRangeMode()) {
+            return false;
+        }
+        const startMonth = this._currentMonth();
+        const startYear = startMonth.getFullYear();
+        const startMonthIndex = startMonth.getMonth();
+        const endYear = this._endMonth().getFullYear();
+        if (endYear < startYear) {
+            return true;
+        }
+        if (endYear === startYear && monthIndex < startMonthIndex) {
+            return true;
+        }
+        return false;
+    }
+    isStartYearDisabled(year) {
+        const disabledDateFn = this.zDisabledDate();
+        if (disabledDateFn) {
+            const yearDate = new Date(year, 0, 1);
+            if (disabledDateFn(yearDate)) {
+                return true;
+            }
+        }
+        if (!this.isRangeMode()) {
+            return false;
+        }
+        const endYear = this._endMonth().getFullYear();
+        const startMonthIndex = this._currentMonth().getMonth();
+        const endMonthIndex = this._endMonth().getMonth();
+        if (year > endYear) {
+            return true;
+        }
+        if (year === endYear && startMonthIndex >= endMonthIndex) {
+            return true;
+        }
+        return false;
+    }
+    isEndYearDisabled(year) {
+        const disabledDateFn = this.zDisabledDate();
+        if (disabledDateFn) {
+            const yearDate = new Date(year, 0, 1);
+            if (disabledDateFn(yearDate)) {
+                return true;
+            }
+        }
+        if (!this.isRangeMode()) {
+            return false;
+        }
+        const startYear = this._currentMonth().getFullYear();
+        const startMonthIndex = this._currentMonth().getMonth();
+        const endMonthIndex = this._endMonth().getMonth();
+        if (year < startYear) {
+            return true;
+        }
+        if (year === startYear && endMonthIndex <= startMonthIndex) {
+            return true;
+        }
+        return false;
+    }
+    canNavigateStartNext = computed(() => {
+        if (!this.isRangeMode()) {
+            return true;
+        }
+        const current = this._currentMonth();
+        const end = this._endMonth();
+        const view = this._currentView();
+        if (view === 'day') {
+            const startNext = addMonths(current, 1);
+            return (startNext.getFullYear() < end.getFullYear() ||
+                (startNext.getFullYear() === end.getFullYear() && startNext.getMonth() < end.getMonth()));
+        }
+        if (view === 'month' || view === 'quarter') {
+            const startNextYear = addYears(current, 1);
+            return startNextYear.getFullYear() < end.getFullYear();
+        }
+        if (view === 'year') {
+            const yearRange = getYearRange(current.getFullYear());
+            const lastYearInRange = yearRange[yearRange.length - 1];
+            return lastYearInRange < end.getFullYear() - 1;
+        }
+        return true;
+    }, ...(ngDevMode ? [{ debugName: "canNavigateStartNext" }] : []));
+    canNavigateEndPrev = computed(() => {
+        if (!this.isRangeMode()) {
+            return true;
+        }
+        const start = this._currentMonth();
+        const end = this._endMonth();
+        const view = this._endView();
+        if (view === 'day') {
+            const endPrev = addMonths(end, -1);
+            return (endPrev.getFullYear() > start.getFullYear() ||
+                (endPrev.getFullYear() === start.getFullYear() && endPrev.getMonth() > start.getMonth()));
+        }
+        if (view === 'month' || view === 'quarter') {
+            const endPrevYear = addYears(end, -1);
+            return endPrevYear.getFullYear() > start.getFullYear();
+        }
+        if (view === 'year') {
+            const yearRange = getYearRange(end.getFullYear());
+            const firstYearInRange = yearRange[0];
+            return firstYearInRange > start.getFullYear() + 1;
+        }
+        return true;
+    }, ...(ngDevMode ? [{ debugName: "canNavigateEndPrev" }] : []));
+    displayValue = computed(() => {
+        let format = this.zFormat();
+        if (this.zShowTime() || this.isTimeMode()) {
+            const timeParts = [];
+            if (this.zShowHour()) {
+                timeParts.push(this.zTimeFormat() === '12h' ? 'hh' : 'HH');
+            }
+            if (this.zShowMinute()) {
+                timeParts.push('mm');
+            }
+            if (this.zShowSecond()) {
+                timeParts.push('ss');
+            }
+            const timeFormat = timeParts.join(':');
+            const periodSuffix = this.zTimeFormat() === '12h' ? ` ${this._period()}` : '';
+            format = this.isTimeMode() ? timeFormat + periodSuffix : `${this.zFormat()} ${timeFormat}${periodSuffix}`;
+        }
+        if (this.isRangeMode()) {
+            const start = this._rangeStart();
+            const end = this._rangeEnd();
+            if (!start || !end) {
+                return '';
+            }
+            return `${formatDate(start, format)} - ${formatDate(end, format)}`;
+        }
+        const date = this._selectedDate();
+        if (!date) {
+            return '';
+        }
+        if (this.isMonthMode()) {
+            return date.toLocaleDateString(this.zLocale(), { month: 'long', year: 'numeric' });
+        }
+        if (this.isYearMode()) {
+            return date.getFullYear().toString();
+        }
+        if (this.isQuarterMode()) {
+            const quarter = Math.floor(date.getMonth() / 3) + 1;
+            return `Q${quarter} ${date.getFullYear()}`;
+        }
+        return formatDate(date, format);
+    }, ...(ngDevMode ? [{ debugName: "displayValue" }] : []));
+    _inputDisplayStart = signal('', ...(ngDevMode ? [{ debugName: "_inputDisplayStart" }] : []));
+    _inputDisplayEnd = signal('', ...(ngDevMode ? [{ debugName: "_inputDisplayEnd" }] : []));
+    inputDisplayStart = computed(() => this._inputDisplayStart(), ...(ngDevMode ? [{ debugName: "inputDisplayStart" }] : []));
+    inputDisplayEnd = computed(() => this._inputDisplayEnd(), ...(ngDevMode ? [{ debugName: "inputDisplayEnd" }] : []));
+    displayValueStart = computed(() => {
+        const format = this._getDisplayFormat();
+        const start = this._rangeStart();
+        return start ? formatDate(start, format) : '';
+    }, ...(ngDevMode ? [{ debugName: "displayValueStart" }] : []));
+    displayValueEnd = computed(() => {
+        const format = this._getDisplayFormat();
+        const end = this._rangeEnd();
+        return end ? formatDate(end, format) : '';
+    }, ...(ngDevMode ? [{ debugName: "displayValueEnd" }] : []));
+    _getDisplayFormat() {
+        let format = this.zFormat();
+        if (this.zShowTime() || this.isTimeMode()) {
+            const timeParts = [];
+            if (this.zShowHour()) {
+                timeParts.push(this.zTimeFormat() === '12h' ? 'hh' : 'HH');
+            }
+            if (this.zShowMinute()) {
+                timeParts.push('mm');
+            }
+            if (this.zShowSecond()) {
+                timeParts.push('ss');
+            }
+            const timeFormat = timeParts.join(':');
+            const periodSuffix = this.zTimeFormat() === '12h' ? ` ${this._period()}` : '';
+            format = this.isTimeMode() ? timeFormat + periodSuffix : `${this.zFormat()} ${timeFormat}${periodSuffix}`;
+        }
+        return format;
+    }
+    showClearButton = computed(() => {
+        if (!this.zAllowClear() || this.isDisabled() || this.zReadonly() || this.isOpen()) {
+            return false;
+        }
+        return this.displayValue() !== '';
+    }, ...(ngDevMode ? [{ debugName: "showClearButton" }] : []));
+    hasValue = computed(() => {
+        if (this.isRangeMode()) {
+            return this._rangeStart() !== null && this._rangeEnd() !== null;
+        }
+        return this._selectedDate() !== null;
+    }, ...(ngDevMode ? [{ debugName: "hasValue" }] : []));
+    currentStatus = computed(() => {
+        if (this.isDisabled()) {
+            return 'disabled';
+        }
+        if (this.zReadonly()) {
+            return 'readonly';
+        }
+        if (this.isOpen()) {
+            return 'open';
+        }
+        if (this.hasError()) {
+            return 'error';
+        }
+        return 'default';
+    }, ...(ngDevMode ? [{ debugName: "currentStatus" }] : []));
+    triggerClasses = computed(() => zMergeClasses(zCalendarVariants({
+        zSize: this.zSize(),
+        zStatus: this.currentStatus(),
+    }), this.class()), ...(ngDevMode ? [{ debugName: "triggerClasses" }] : []));
+    _shouldShowValidation = computed(() => {
+        const control = this._formControl();
+        this._formStateVersion();
+        if (control) {
+            return control.dirty;
+        }
+        return this._dirty() || this._touched();
+    }, ...(ngDevMode ? [{ debugName: "_shouldShowValidation" }] : []));
+    hasError = computed(() => {
+        const customErrors = this._getValidationErrors();
+        if (customErrors.length > 0) {
+            return true;
+        }
+        const control = this._formControl();
+        this._formStateVersion();
+        if (!control) {
+            return false;
+        }
+        return control.invalid && this._shouldShowValidation();
+    }, ...(ngDevMode ? [{ debugName: "hasError" }] : []));
+    showError = computed(() => this.hasError(), ...(ngDevMode ? [{ debugName: "showError" }] : []));
+    errorMessage = computed(() => {
+        const customErrors = this._getValidationErrors();
+        if (customErrors.length > 0) {
+            return customErrors[0];
+        }
+        const control = this._formControl();
+        const errors = control?.errors;
+        if (!errors) {
+            return '';
+        }
+        const validators = this.zValidators();
+        for (const validator of validators) {
+            if (errors[validator.error]) {
+                return validator.message;
+            }
+        }
+        if (errors['required']) {
+            return 'Vui lòng chọn ngày';
+        }
+        return '';
+    }, ...(ngDevMode ? [{ debugName: "errorMessage" }] : []));
+    constructor() {
+        effect(() => {
+            const date = this._selectedDate();
+            if (date && this.zShowTime()) {
+                this._hour.set(date.getHours());
+                this._minute.set(date.getMinutes());
+                this._second.set(date.getSeconds());
+            }
+        });
+    }
+    ngOnInit() {
+        void Promise.resolve().then(() => {
+            try {
+                this._ngControl = this._injector.get(NgControl, null);
+                if (!this._ngControl?.control) {
+                    return;
+                }
+                const { control } = this._ngControl;
+                this._formControl.set(control);
+                merge(control.statusChanges, control.valueChanges, control.events)
+                    .pipe(takeUntilDestroyed(this._destroyRef))
+                    .subscribe(() => {
+                    this._formStateVersion.update(v => v + 1);
+                    this._cdr.markForCheck();
+                });
+            }
+            catch {
+                this._ngControl = null;
+            }
+        });
+        setTimeout(() => this._emitControl());
+    }
+    writeValue(value) {
+        if (value === null || value === undefined) {
+            this._selectedDate.set(null);
+            this._rangeStart.set(null);
+            this._rangeEnd.set(null);
+            return;
+        }
+        const valueType = this.zValueType();
+        if (this.isRangeMode()) {
+            if (typeof value === 'object' && 'start' in value && 'end' in value) {
+                const range = value;
+                this._rangeStart.set(range.start);
+                this._rangeEnd.set(range.end);
+            }
+            return;
+        }
+        let date = null;
+        if (value instanceof Date) {
+            date = value;
+        }
+        if (!date && typeof value === 'string') {
+            date = valueType === 'iso' ? fromISOString(value) : parseDate(value, this.zFormat());
+        }
+        if (!date) {
+            return;
+        }
+        this._selectedDate.set(date);
+        this._currentMonth.set(date);
+        this._syncTimeSignals(date);
+        this._updateInputDisplay();
+    }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this._disabled.set(isDisabled);
+    }
+    open() {
+        if (this.isDisabled() || this.zReadonly()) {
+            return;
+        }
+        this._popoverControl()?.show();
+    }
+    close() {
+        this._popoverControl()?.close();
+    }
+    toggle() {
+        if (this.isDisabled() || this.zReadonly()) {
+            return;
+        }
+        const popover = this._popoverControl();
+        if (!popover) {
+            return;
+        }
+        if (popover.isVisible()) {
+            if (!this.showCancelButton()) {
+                this.close();
+            }
+            return;
+        }
+        this.open();
+    }
+    clear() {
+        this.onClear(new MouseEvent('click'));
+    }
+    focus() {
+        this.triggerRef()?.nativeElement.focus();
+    }
+    blur() {
+        this.triggerRef()?.nativeElement.blur();
+    }
+    reset() {
+        this._selectedDate.set(null);
+        this._rangeStart.set(null);
+        this._rangeEnd.set(null);
+        this._hour.set(0);
+        this._minute.set(0);
+        this._second.set(0);
+        this._touched.set(false);
+        this._dirty.set(false);
+        this._inputDisplayValue.set('');
+        const emitValue = this._getEmitValue();
+        this._onChange(emitValue);
+        if (this._ngControl?.control) {
+            this._ngControl.control.markAsPristine();
+            this._ngControl.control.markAsUntouched();
+        }
+    }
+    validate() {
+        this._touched.set(true);
+        this._dirty.set(true);
+        this._onTouched();
+        if (this._ngControl?.control) {
+            this._ngControl.control.markAsDirty();
+            this._ngControl.control.markAsTouched();
+        }
+    }
+    markAsTouched() {
+        this._touched.set(true);
+        this._onTouched();
+    }
+    markAsUntouched() {
+        this._touched.set(false);
+    }
+    markAsDirty() {
+        this._dirty.set(true);
+    }
+    markAsPristine() {
+        this._dirty.set(false);
+    }
+    onPopoverShow() {
+        this._backupIfNeeded();
+        this._appliedViaOk.set(false);
+        this._hasViewChanged.set(false);
+        this._hasEndViewChanged.set(false);
+        if (this.isMonthMode()) {
+            this._currentView.set('month');
+            this._initializeTimeIfNeeded();
+            return;
+        }
+        if (this.isYearMode()) {
+            this._currentView.set('year');
+            this._initializeTimeIfNeeded();
+            return;
+        }
+        if (this.isQuarterMode()) {
+            this._currentView.set('quarter');
+            this._initializeTimeIfNeeded();
+            return;
+        }
+        this._currentView.set('day');
+        this._initializeTimeIfNeeded();
+        if (this.isRangeMode()) {
+            this._endView.set('day');
+            this._inputDisplayStart.set(this.displayValueStart());
+            this._inputDisplayEnd.set(this.displayValueEnd());
+        }
+        if (!this.isRangeMode()) {
+            this._activePresetKey.set(null);
+            const selected = this._selectedDate();
+            if (selected) {
+                this._currentMonth.set(selected);
+                return;
+            }
+            this._resetCalendarsToDefault();
+            return;
+        }
+        const start = this._rangeStart();
+        const end = this._rangeEnd();
+        if (start && end) {
+            this._currentMonth.set(start);
+            this._endMonth.set(isSameMonth(start, end) ? addMonths(end, 1) : end);
+            this._activePresetKey.set(this._detectMatchingPreset(start, end));
+            return;
+        }
+        if (this.zQuickSelect()) {
+            this._activePresetKey.set(null);
+            this._resetCalendarsToDefault();
+            return;
+        }
+        this._activePresetKey.set(null);
+        this._resetCalendarsToDefault();
+    }
+    _initializeTimeIfNeeded() {
+        if (!this.zShowTime() && !this.isTimeMode()) {
+            return;
+        }
+        const now = new Date();
+        const selected = this._selectedDate();
+        this._syncTimeSignals(selected ?? now);
+        if (!this.isRangeMode()) {
+            return;
+        }
+        const end = this._rangeEnd();
+        this._syncEndTimeSignals(end ?? now);
+    }
+    _syncEndTimeSignals(date) {
+        const hours = date.getHours();
+        this._hourEnd.set(hours);
+        this._minuteEnd.set(date.getMinutes());
+        this._secondEnd.set(date.getSeconds());
+        this._periodEnd.set(hours >= 12 ? 'PM' : 'AM');
+    }
+    _resetCalendarsToDefault() {
+        const today = getToday();
+        this._currentMonth.set(today);
+        this._endMonth.set(addMonths(today, 1));
+        this._currentView.set('day');
+        this._endView.set('day');
+    }
+    _backupIfNeeded() {
+        const needsConfirmation = this.showOkButton() || this.showCancelButton();
+        if (needsConfirmation) {
+            this._backupSelectedDate.set(this._selectedDate());
+            this._backupRangeStart.set(this._rangeStart());
+            this._backupRangeEnd.set(this._rangeEnd());
+        }
+    }
+    onPopoverHide() {
+        this._hoveredDate.set(null);
+        const needsConfirmation = this.showOkButton() || this.showCancelButton();
+        if (needsConfirmation && !this._appliedViaOk()) {
+            this._restoreFromBackup();
+        }
+        if (this._dirty()) {
+            this._touched.set(true);
+        }
+        this._onTouched();
+        this._inputDisplayValue.set(this.displayValue());
+        if (this.isRangeMode()) {
+            this._inputDisplayStart.set(this.displayValueStart());
+            this._inputDisplayEnd.set(this.displayValueEnd());
+        }
+    }
+    _restoreFromBackup() {
+        this._selectedDate.set(this._backupSelectedDate());
+        this._rangeStart.set(this._backupRangeStart());
+        this._rangeEnd.set(this._backupRangeEnd());
+        this._dirty.set(false);
+        const backup = this._backupSelectedDate();
+        if (backup) {
+            this._syncTimeSignals(backup);
+        }
+    }
+    onPopoverControl(control) {
+        this._popoverControl.set(control);
+    }
+    onTriggerKeydown(event) {
+        if (this.isDisabled() || this.zReadonly()) {
+            return;
+        }
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this._popoverControl()?.toggle();
+            return;
+        }
+        if (event.key === 'Escape' && this.isOpen()) {
+            this.close();
+        }
+    }
+    onInputChange(event) {
+        const input = event.target;
+        const { value } = input;
+        this._inputDisplayValue.set(value);
+        const trimmedValue = value.trim();
+        if (!trimmedValue) {
+            return;
+        }
+        const format = this._getParseFormat();
+        const expectedLength = this._getExpectedFormatLength(format);
+        if (trimmedValue.length < expectedLength) {
+            return;
+        }
+        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);
+                if (start) {
+                    this._rangeStart.set(start);
+                    this._currentMonth.set(start);
+                }
+                if (end) {
+                    this._rangeEnd.set(end);
+                    this._endMonth.set(end);
+                }
+            }
+            return;
+        }
+        const date = parseDate(trimmedValue, format);
+        if (date) {
+            this._selectedDate.set(date);
+            this._currentMonth.set(date);
+            this._syncTimeSignals(date);
+        }
+    }
+    _getExpectedFormatLength(format) {
+        return format.replace(/\[.*?\]/g, ' ').length;
+    }
+    onStartInputChange(event) {
+        const input = event.target;
+        const { value } = input;
+        this._inputDisplayStart.set(value);
+        const trimmedValue = value.trim();
+        if (!trimmedValue) {
+            return;
+        }
+        const format = this._getParseFormat();
+        const expectedLength = this._getExpectedFormatLength(format);
+        if (trimmedValue.length < expectedLength) {
+            return;
+        }
+        const date = parseDate(trimmedValue, format);
+        if (!date) {
+            return;
+        }
+        const endDate = this._rangeEnd();
+        if (endDate && date >= endDate) {
+            this._inputDisplayStart.set(this.displayValueStart());
+            return;
+        }
+        this._rangeStart.set(date);
+        this._currentMonth.set(date);
+        this._syncTimeSignals(date);
+    }
+    onEndInputChange(event) {
+        const input = event.target;
+        const { value } = input;
+        this._inputDisplayEnd.set(value);
+        const trimmedValue = value.trim();
+        if (!trimmedValue) {
+            return;
+        }
+        const format = this._getParseFormat();
+        const expectedLength = this._getExpectedFormatLength(format);
+        if (trimmedValue.length < expectedLength) {
+            return;
+        }
+        const date = parseDate(trimmedValue, format);
+        if (!date) {
+            return;
+        }
+        const startDate = this._rangeStart();
+        if (startDate && date <= startDate) {
+            this._inputDisplayEnd.set(this.displayValueEnd());
+            return;
+        }
+        this._rangeEnd.set(date);
+        this._endMonth.set(date);
+        this._syncEndTimeSignals(date);
+    }
+    onStartInputEnter(event) {
+        event.preventDefault();
+        const input = event.target;
+        const value = input.value.trim();
+        const format = this._getParseFormat();
+        const date = parseDate(value, format);
+        if (!date) {
+            input.value = this.displayValueStart();
+            input.blur();
+            return;
+        }
+        const endDate = this._rangeEnd();
+        if (endDate && date >= endDate) {
+            input.value = this.displayValueStart();
+            input.blur();
+            return;
+        }
+        this._skipBlurHandler.set(true);
+        this._rangeStart.set(date);
+        this._currentMonth.set(date);
+        this._syncTimeSignals(date);
+        this._dirty.set(true);
+        input.blur();
+    }
+    onEndInputEnter(event) {
+        event.preventDefault();
+        const input = event.target;
+        const value = input.value.trim();
+        const format = this._getParseFormat();
+        const date = parseDate(value, format);
+        if (!date) {
+            input.value = this.displayValueEnd();
+            input.blur();
+            return;
+        }
+        const startDate = this._rangeStart();
+        if (startDate && date <= startDate) {
+            input.value = this.displayValueEnd();
+            input.blur();
+            return;
+        }
+        this._skipBlurHandler.set(true);
+        this._rangeEnd.set(date);
+        this._endMonth.set(date);
+        this._syncEndTimeSignals(date);
+        this._dirty.set(true);
+        input.blur();
+    }
+    onInputFocus(_event) {
+        this._backupSelectedDate.set(this._selectedDate());
+    }
+    onInputBlur(event) {
+        if (this._skipBlurHandler()) {
+            this._skipBlurHandler.set(false);
+            return;
+        }
+        const needsConfirmation = this.showOkButton() || this.showCancelButton();
+        if (needsConfirmation && this.isOpen()) {
+            return;
+        }
+        const input = event.target;
+        const currentValue = input.value.trim();
+        const format = this._getParseFormat();
+        if (!currentValue) {
+            this._selectedDate.set(null);
+            this._backupSelectedDate.set(null);
+            this._inputDisplayValue.set('');
+            this._applyValue();
+            return;
+        }
+        const parsed = parseDate(currentValue, format);
+        if (parsed) {
+            this._selectedDate.set(parsed);
+            this._currentMonth.set(parsed);
+            this._syncTimeSignals(parsed);
+            this._backupSelectedDate.set(parsed);
+            this._inputDisplayValue.set(this.displayValue());
+            this._applyValue();
+            return;
+        }
+        const backup = this._backupSelectedDate();
+        this._selectedDate.set(backup);
+        this._inputDisplayValue.set(this.displayValue());
+    }
+    onInputEnter(event) {
+        event.preventDefault();
+        const input = event.target;
+        const value = input.value.trim();
+        if (!value) {
+            this._skipBlurHandler.set(true);
+            this._clearDateValues();
+            this._dirty.set(true);
+            this._appliedViaOk.set(true);
+            this._applyValue();
+            this.close();
+            input.blur();
+            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);
+                if (start && end) {
+                    this._skipBlurHandler.set(true);
+                    const swapped = start > end;
+                    const rangeStart = swapped ? end : start;
+                    const rangeEnd = swapped ? start : end;
+                    this._rangeStart.set(rangeStart);
+                    this._rangeEnd.set(rangeEnd);
+                    this._currentMonth.set(rangeStart);
+                    this._endMonth.set(rangeEnd);
+                    this._dirty.set(true);
+                    this._appliedViaOk.set(true);
+                    this._applyValue();
+                    this.close();
+                    input.blur();
+                    return;
+                }
+            }
+            this._restoreFromBackup();
+            this._updateInputDisplay();
+            this.close();
+            input.blur();
+            return;
+        }
+        const date = parseDate(value, format);
+        if (date) {
+            this._skipBlurHandler.set(true);
+            this._selectedDate.set(date);
+            this._currentMonth.set(date);
+            this._syncTimeSignals(date);
+            this._dirty.set(true);
+            this._appliedViaOk.set(true);
+            this._applyValue();
+            this.close();
+            input.blur();
+            return;
+        }
+        this._restoreFromBackup();
+        this._updateInputDisplay();
+        this.close();
+        input.blur();
+    }
+    onCalendarKeydown(event) {
+        if (this._currentView() !== 'day') {
+            return;
+        }
+        const { key } = event;
+        if (key === 'Escape') {
+            this.close();
+            return;
+        }
+        if (key === 'Enter') {
+            if (!this.isRangeMode() || this.zShowTime()) {
+                this.onOkClick();
+            }
+            return;
+        }
+        if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(key)) {
+            event.preventDefault();
+            this._navigateByArrowKey(key);
+        }
+    }
+    onDayClick(day) {
+        if (day.isDisabled) {
+            return;
+        }
+        const clickedDate = day.date;
+        if (this.isRangeMode()) {
+            this._handleRangeSelection(clickedDate);
+            return;
+        }
+        this._handleSingleSelection(clickedDate);
+    }
+    onDayHover(day) {
+        if (this.isRangeMode() && this._rangeStart() && !this._rangeEnd()) {
+            this._hoveredDate.set(day.date);
+        }
+    }
+    onDayLeave() {
+        if (this.isRangeMode()) {
+            this._hoveredDate.set(null);
+        }
+    }
+    onMonthClick(monthIndex) {
+        const currentDate = this._currentMonth();
+        let newMonth = setMonth(currentDate, monthIndex);
+        if (this.isRangeMode()) {
+            const endMonth = this._endMonth();
+            const isExceedingEnd = newMonth.getFullYear() > endMonth.getFullYear() ||
+                (newMonth.getFullYear() === endMonth.getFullYear() && newMonth.getMonth() >= endMonth.getMonth());
+            if (isExceedingEnd) {
+                newMonth = addMonths(endMonth, -1);
+            }
+        }
+        this._currentMonth.set(newMonth);
+        this._hasViewChanged.set(true);
+        this._currentView.set('day');
+    }
+    onYearClick(year) {
+        const currentDate = this._currentMonth();
+        if (this.isYearMode()) {
+            this._selectedDate.set(setYear(new Date(year, 0, 1), year));
+            this._dirty.set(true);
+            this._applyValue();
+            this.close();
+            return;
+        }
+        let newYear = year;
+        if (this.isRangeMode()) {
+            const endYear = this._endMonth().getFullYear();
+            if (newYear >= endYear) {
+                newYear = endYear - 1;
+            }
+        }
+        this._currentMonth.set(setYear(currentDate, newYear));
+        this._hasViewChanged.set(true);
+        this._currentView.set(this.isQuarterMode() ? 'quarter' : 'month');
+    }
+    onQuarterClick(quarterIndex) {
+        const currentYear = this._currentMonth().getFullYear();
+        const firstMonthOfQuarter = quarterIndex * 3;
+        const date = new Date(currentYear, firstMonthOfQuarter, 1);
+        this._selectedDate.set(date);
+        this._dirty.set(true);
+        this._applyValue();
+        this.close();
+    }
+    onMonthSelect(monthIndex) {
+        if (this.isMonthMode()) {
+            const currentYear = this._currentMonth().getFullYear();
+            this._selectedDate.set(new Date(currentYear, monthIndex, 1));
+            this._dirty.set(true);
+            this._applyValue();
+            this.close();
+            return;
+        }
+        this.onMonthClick(monthIndex);
+    }
+    onQuickSelect(preset) {
+        this._activePresetKey.set(preset.key);
+        if (preset.key === 'custom') {
+            this._rangeStart.set(null);
+            this._rangeEnd.set(null);
+            this._inputDisplayStart.set('');
+            this._inputDisplayEnd.set('');
+            return;
+        }
+        const value = preset.getValue();
+        if (!value) {
+            return;
+        }
+        if (value instanceof Date) {
+            this._rangeStart.set(value);
+            this._rangeEnd.set(value);
+            this._currentMonth.set(value);
+            this._endMonth.set(addMonths(value, 1));
+            this._dirty.set(true);
+            this._inputDisplayStart.set(this.displayValueStart());
+            this._inputDisplayEnd.set(this.displayValueEnd());
+            return;
+        }
+        this._rangeStart.set(value.start);
+        this._rangeEnd.set(value.end);
+        const start = value.start ?? getToday();
+        const end = value.end ?? getToday();
+        this._currentMonth.set(start);
+        this._endMonth.set(isSameMonth(start, end) ? addMonths(end, 1) : end);
+        this._dirty.set(true);
+        this._inputDisplayStart.set(this.displayValueStart());
+        this._inputDisplayEnd.set(this.displayValueEnd());
+    }
+    onTodayClick() {
+        const now = new Date();
+        const today = getToday();
+        this._currentMonth.set(today);
+        if (this.zShowTime() || this.isTimeMode()) {
+            this._hour.set(now.getHours());
+            this._minute.set(now.getMinutes());
+            this._second.set(now.getSeconds());
+            this._period.set(now.getHours() >= 12 ? 'PM' : 'AM');
+        }
+        if (this.isMonthMode()) {
+            this._selectedDate.set(new Date(now.getFullYear(), now.getMonth(), 1));
+            this._dirty.set(true);
+            this._applyValue();
+            this.close();
+            return;
+        }
+        if (this.isYearMode()) {
+            this._selectedDate.set(new Date(now.getFullYear(), 0, 1));
+            this._dirty.set(true);
+            this._applyValue();
+            this.close();
+            return;
+        }
+        if (this.isQuarterMode()) {
+            const currentQuarter = Math.floor(now.getMonth() / 3);
+            this._selectedDate.set(new Date(now.getFullYear(), currentQuarter * 3, 1));
+            this._dirty.set(true);
+            this._applyValue();
+            this.close();
+            return;
+        }
+        if (this.isTimeMode()) {
+            this._selectedDate.set(now);
+            this._dirty.set(true);
+            if (!this.showOkButton()) {
+                this._applyValue();
+                this.close();
+            }
+            return;
+        }
+        if (this.isRangeMode()) {
+            const rangeDate = this.zShowTime() ? now : today;
+            this._rangeStart.set(rangeDate);
+            this._rangeEnd.set(rangeDate);
+            this._endMonth.set(addMonths(today, 1));
+            if (this.zShowTime()) {
+                this._syncEndTimeSignals(now);
+            }
+            this._dirty.set(true);
+            this._inputDisplayStart.set(this.displayValueStart());
+            this._inputDisplayEnd.set(this.displayValueEnd());
+            if (!this.showOkButton() && !this.showCancelButton()) {
+                this._applyValue();
+                this.close();
+            }
+            return;
+        }
+        const selectedDate = this.zShowTime() ? now : today;
+        this._selectedDate.set(selectedDate);
+        this._dirty.set(true);
+        if (!this.showOkButton()) {
+            this._applyValue();
+            this.close();
+        }
+    }
+    onClear(event) {
+        event.stopPropagation();
+        event.preventDefault();
+        this._selectedDate.set(null);
+        this._rangeStart.set(null);
+        this._rangeEnd.set(null);
+        this._hour.set(0);
+        this._minute.set(0);
+        this._second.set(0);
+        this._dirty.set(true);
+        this._backupSelectedDate.set(null);
+        this._backupRangeStart.set(null);
+        this._backupRangeEnd.set(null);
+        this._appliedViaOk.set(true);
+        const emitValue = this._getEmitValue();
+        this._onChange(emitValue);
+        this.zChange.emit(emitValue);
+        this._inputDisplayValue.set('');
+        if (this.isRangeMode()) {
+            this._inputDisplayStart.set('');
+            this._inputDisplayEnd.set('');
+        }
+        this.close();
+    }
+    onCancelClick() {
+        this.close();
+    }
+    onOkClick() {
+        if (!this.canApply()) {
+            return;
+        }
+        if (this.isTimeMode()) {
+            let hour = this._hour();
+            if (this.zTimeFormat() === '12h') {
+                if (this._period() === 'PM' && hour < 12) {
+                    hour += 12;
+                }
+                if (this._period() === 'AM' && hour === 12) {
+                    hour = 0;
+                }
+            }
+            const baseDate = this._selectedDate() ?? new Date();
+            this._selectedDate.set(setTime(baseDate, hour, this._minute(), this._second()));
+        }
+        this._appliedViaOk.set(true);
+        this._applyValue();
+        this.close();
+    }
+    navigatePrevious() {
+        const view = this._currentView();
+        const current = this._currentMonth();
+        const yearStep = this.isYearMode() || this.isQuarterMode() ? 9 : 12;
+        const navigationMap = {
+            day: addMonths(current, -1),
+            month: addYears(current, -1),
+            year: addYears(current, -yearStep),
+            quarter: addYears(current, -1),
+        };
+        this._currentMonth.set(navigationMap[view]);
+    }
+    navigateNext() {
+        const view = this._currentView();
+        const current = this._currentMonth();
+        const yearStep = this.isYearMode() || this.isQuarterMode() ? 9 : 12;
+        const navigationMap = {
+            day: addMonths(current, 1),
+            month: addYears(current, 1),
+            year: addYears(current, yearStep),
+            quarter: addYears(current, 1),
+        };
+        this._currentMonth.set(navigationMap[view]);
+    }
+    navigatePreviousFast() {
+        const current = this._currentMonth();
+        this._currentMonth.set(addYears(current, -1));
+    }
+    navigateNextFast() {
+        const current = this._currentMonth();
+        this._currentMonth.set(addYears(current, 1));
+    }
+    setView(view) {
+        this._hasViewChanged.set(true);
+        this._currentView.set(view);
+    }
+    setEndView(view) {
+        this._hasEndViewChanged.set(true);
+        this._endView.set(view);
+    }
+    onEndMonthClick(monthIndex) {
+        const currentDate = this._endMonth();
+        let newMonth = setMonth(currentDate, monthIndex);
+        const startMonth = this._currentMonth();
+        const isBeforeStart = newMonth.getFullYear() < startMonth.getFullYear() ||
+            (newMonth.getFullYear() === startMonth.getFullYear() && newMonth.getMonth() <= startMonth.getMonth());
+        if (isBeforeStart) {
+            newMonth = addMonths(startMonth, 1);
+        }
+        this._endMonth.set(newMonth);
+        this._hasEndViewChanged.set(true);
+        this._endView.set('day');
+    }
+    onEndYearClick(year) {
+        const currentDate = this._endMonth();
+        let newYear = year;
+        const startYear = this._currentMonth().getFullYear();
+        if (newYear <= startYear) {
+            newYear = startYear + 1;
+        }
+        this._endMonth.set(setYear(currentDate, newYear));
+        this._hasEndViewChanged.set(true);
+        this._endView.set('month');
+    }
+    onHourInput(event) {
+        const input = event.target;
+        const digits = input.value.replace(/\D/g, '');
+        if (digits.length !== 2) {
+            return;
+        }
+        const value = parseTimeValue(digits, 23);
+        this._hour.set(value);
+        this._updateTimeToDate();
+    }
+    onMinuteInput(event) {
+        const input = event.target;
+        const digits = input.value.replace(/\D/g, '');
+        if (digits.length !== 2) {
+            return;
+        }
+        const value = parseTimeValue(digits, 59);
+        this._minute.set(value);
+        this._updateTimeToDate();
+    }
+    onSecondInput(event) {
+        const input = event.target;
+        const digits = input.value.replace(/\D/g, '');
+        if (digits.length !== 2) {
+            return;
+        }
+        const value = parseTimeValue(digits, 59);
+        this._second.set(value);
+        this._updateTimeToDate();
+    }
+    onTimeBlur(event) {
+        const input = event.target;
+        const dataType = input.getAttribute('data-time-type');
+        if (dataType === 'hour') {
+            input.value = this.formattedHour();
+        }
+        if (dataType === 'minute') {
+            input.value = this.formattedMinute();
+        }
+        if (dataType === 'second') {
+            input.value = this.formattedSecond();
+        }
+    }
+    navigateEndPrevious() {
+        const current = this._endMonth();
+        this._endMonth.set(addMonths(current, -1));
+    }
+    navigateEndNext() {
+        const current = this._endMonth();
+        this._endMonth.set(addMonths(current, 1));
+    }
+    navigateEndPreviousFast() {
+        const current = this._endMonth();
+        this._endMonth.set(addYears(current, -1));
+    }
+    navigateEndNextFast() {
+        const current = this._endMonth();
+        this._endMonth.set(addYears(current, 1));
+    }
+    onHourEndInput(event) {
+        const input = event.target;
+        const digits = input.value.replace(/\D/g, '');
+        if (digits.length !== 2) {
+            return;
+        }
+        const value = parseTimeValue(digits, 23);
+        this._hourEnd.set(value);
+        this._updateEndTimeToDate();
+    }
+    onMinuteEndInput(event) {
+        const input = event.target;
+        const digits = input.value.replace(/\D/g, '');
+        if (digits.length !== 2) {
+            return;
+        }
+        const value = parseTimeValue(digits, 59);
+        this._minuteEnd.set(value);
+        this._updateEndTimeToDate();
+    }
+    onSecondEndInput(event) {
+        const input = event.target;
+        const digits = input.value.replace(/\D/g, '');
+        if (digits.length !== 2) {
+            return;
+        }
+        const value = parseTimeValue(digits, 59);
+        this._secondEnd.set(value);
+        this._updateEndTimeToDate();
+    }
+    onTimeBlurEnd(event) {
+        const input = event.target;
+        const dataType = input.getAttribute('data-time-type');
+        if (dataType === 'hour-end') {
+            input.value = this.formattedHourEnd();
+        }
+        if (dataType === 'minute-end') {
+            input.value = this.formattedMinuteEnd();
+        }
+        if (dataType === 'second-end') {
+            input.value = this.formattedSecondEnd();
+        }
+    }
+    togglePeriodEnd() {
+        const currentPeriod = this._periodEnd();
+        const newPeriod = currentPeriod === 'AM' ? 'PM' : 'AM';
+        this._periodEnd.set(newPeriod);
+        const currentHour = this._hourEnd();
+        if (newPeriod === 'PM' && currentHour < 12) {
+            this._hourEnd.set(currentHour + 12);
+        }
+        if (newPeriod === 'AM' && currentHour >= 12) {
+            this._hourEnd.set(currentHour - 12);
+        }
+        this._updateEndTimeToDate();
+    }
+    _updateEndTimeToDate() {
+        const end = this._rangeEnd();
+        if (!end) {
+            return;
+        }
+        let hour = this._hourEnd();
+        if (this.zTimeFormat() === '12h') {
+            if (this._periodEnd() === 'PM' && hour < 12) {
+                hour += 12;
+            }
+            if (this._periodEnd() === 'AM' && hour === 12) {
+                hour = 0;
+            }
+        }
+        const newDate = setTime(end, hour, this._minuteEnd(), this._secondEnd());
+        this._rangeEnd.set(newDate);
+        this._dirty.set(true);
+    }
+    _handleSingleSelection(date) {
+        let finalDate = date;
+        if (this.zShowTime()) {
+            finalDate = setTime(date, this._hour(), this._minute(), this._second());
+        }
+        this._selectedDate.set(finalDate);
+        this._dirty.set(true);
+        this._inputDisplayValue.set(this.displayValue());
+        if (!this.zShowTime() && !this.zShowOk()) {
+            this._applyValue();
+            this.close();
+        }
+    }
+    _handleRangeSelection(date) {
+        const start = this._rangeStart();
+        const end = this._rangeEnd();
+        if (!start || (start && end)) {
+            let startDate = date;
+            if (this.zShowTime()) {
+                let hour = this._hour();
+                if (this.zTimeFormat() === '12h') {
+                    if (this._period() === 'PM' && hour < 12) {
+                        hour += 12;
+                    }
+                    if (this._period() === 'AM' && hour === 12) {
+                        hour = 0;
+                    }
+                }
+                startDate = setTime(date, hour, this._minute(), this._second());
+            }
+            this._rangeStart.set(startDate);
+            this._rangeEnd.set(null);
+            this._activePresetKey.set('custom');
+            this._inputDisplayStart.set(this.displayValueStart());
+            this._inputDisplayEnd.set('');
+            return;
+        }
+        let endDate = date;
+        if (this.zShowTime()) {
+            let hour = this._hourEnd();
+            if (this.zTimeFormat() === '12h') {
+                if (this._periodEnd() === 'PM' && hour < 12) {
+                    hour += 12;
+                }
+                if (this._periodEnd() === 'AM' && hour === 12) {
+                    hour = 0;
+                }
+            }
+            endDate = setTime(date, hour, this._minuteEnd(), this._secondEnd());
+        }
+        const normalized = normalizeRange(start, endDate);
+        this._rangeStart.set(normalized.start);
+        this._rangeEnd.set(normalized.end);
+        this._dirty.set(true);
+        this._inputDisplayStart.set(this.displayValueStart());
+        this._inputDisplayEnd.set(this.displayValueEnd());
+        if (normalized.start && normalized.end) {
+            this._activePresetKey.set(this._detectMatchingPreset(normalized.start, normalized.end));
+        }
+        if (!this.showOkButton() && !this.showCancelButton()) {
+            this._applyValue();
+            this.close();
+        }
+    }
+    _updateTimeToDate() {
+        if (!this.zShowTime()) {
+            return;
+        }
+        let hour = this._hour();
+        if (this.zTimeFormat() === '12h') {
+            if (this._period() === 'PM' && hour < 12) {
+                hour += 12;
+            }
+            if (this._period() === 'AM' && hour === 12) {
+                hour = 0;
+            }
+        }
+        if (this.isRangeMode()) {
+            const start = this._rangeStart();
+            if (start) {
+                this._rangeStart.set(setTime(start, hour, this._minute(), this._second()));
+                this._dirty.set(true);
+            }
+            return;
+        }
+        const selected = this._selectedDate();
+        if (selected) {
+            this._selectedDate.set(setTime(selected, hour, this._minute(), this._second()));
+        }
+    }
+    _detectMatchingPreset(start, end) {
+        for (const preset of this.quickSelectPresets) {
+            if (preset.key === 'custom') {
+                continue;
+            }
+            const value = preset.getValue();
+            if (value && !(value instanceof Date)) {
+                if (value.start && value.end && isSameDay(start, value.start) && isSameDay(end, value.end)) {
+                    return preset.key;
+                }
+            }
+        }
+        return 'custom';
+    }
+    _applyValue() {
+        const emitValue = this._getEmitValue();
+        this._onChange(emitValue);
+        this.zChange.emit(emitValue);
+        this._dirty.set(true);
+        this._inputDisplayValue.set(this.displayValue());
+        if (this.isRangeMode()) {
+            this._inputDisplayStart.set(this.displayValueStart());
+            this._inputDisplayEnd.set(this.displayValueEnd());
+        }
+    }
+    _getEmitValue() {
+        const valueType = this.zValueType();
+        const format = this.zShowTime() ? `${this.zFormat()} HH:mm:ss` : this.zFormat();
+        if (this.isRangeMode()) {
+            const start = this._rangeStart();
+            const end = this._rangeEnd();
+            if (!start || !end) {
+                return null;
+            }
+            if (valueType === 'iso') {
+                return { start: toISOString(start), end: toISOString(end) };
+            }
+            if (valueType === 'string') {
+                return { start: formatDate(start, format), end: formatDate(end, format) };
+            }
+            return { start, end };
+        }
+        const date = this._selectedDate();
+        if (!date) {
+            return null;
+        }
+        if (valueType === 'iso') {
+            return toISOString(date);
+        }
+        if (valueType === 'string') {
+            return formatDate(date, format);
+        }
+        return date;
+    }
+    _getValidationErrors() {
+        const validators = this.zValidators();
+        const errors = [];
+        if (!this._shouldShowValidation()) {
+            return errors;
+        }
+        const isRequired = this.zRequired() || this._formControl()?.errors?.['required'];
+        if (isRequired) {
+            const hasValidValue = this.isRangeMode() ? !!(this._rangeStart() && this._rangeEnd()) : !!this._selectedDate();
+            if (!hasValidValue) {
+                errors.push('Vui lòng chọn ngày');
+            }
+        }
+        const value = this._getEmitValue();
+        for (const validator of validators) {
+            if (!validator.validate(value)) {
+                errors.push(validator.message);
+            }
+        }
+        return errors;
+    }
+    _navigateByArrowKey(key) {
+        const currentDate = this._selectedDate() ?? getToday();
+        let newDate;
+        switch (key) {
+            case 'ArrowUp':
+                newDate = addDays(currentDate, -7);
+                break;
+            case 'ArrowDown':
+                newDate = addDays(currentDate, 7);
+                break;
+            case 'ArrowLeft':
+                newDate = addDays(currentDate, -1);
+                break;
+            case 'ArrowRight':
+                newDate = addDays(currentDate, 1);
+                break;
+            default:
+                return;
+        }
+        const minDate = this.zMinDate();
+        const maxDate = this.zMaxDate();
+        if (minDate && newDate < minDate) {
+            return;
+        }
+        if (maxDate && newDate > maxDate) {
+            return;
+        }
+        this._selectedDate.set(newDate);
+        if (!isSameMonth(newDate, this._currentMonth())) {
+            this._currentMonth.set(newDate);
+        }
+    }
+    _syncTimeSignals(date) {
+        this._hour.set(date.getHours());
+        this._minute.set(date.getMinutes());
+        this._second.set(date.getSeconds());
+        this._period.set(date.getHours() >= 12 ? 'PM' : 'AM');
+    }
+    _getParseFormat() {
+        if (!this.zShowTime() && !this.isTimeMode()) {
+            return this.zFormat();
+        }
+        const timeParts = [];
+        if (this.zShowHour()) {
+            timeParts.push(this.zTimeFormat() === '12h' ? 'hh' : 'HH');
+        }
+        if (this.zShowMinute()) {
+            timeParts.push('mm');
+        }
+        if (this.zShowSecond()) {
+            timeParts.push('ss');
+        }
+        const timeFormat = timeParts.join(':');
+        if (this.isTimeMode()) {
+            return timeFormat;
+        }
+        return `${this.zFormat()} ${timeFormat}`;
+    }
+    _updateInputDisplay() {
+        this._inputDisplayValue.set(this.displayValue());
+    }
+    _clearDateValues() {
+        if (this.isRangeMode()) {
+            this._rangeStart.set(null);
+            this._rangeEnd.set(null);
+            return;
+        }
+        this._selectedDate.set(null);
+    }
+    _emitControl() {
+        this.zControl.emit({
+            validate: () => this.validate(),
+            reset: () => this.reset(),
+            focus: () => this.focus(),
+            blur: () => this.blur(),
+            open: () => this.open(),
+            close: () => this.close(),
+            clear: () => this.clear(),
+            markAsTouched: () => this.markAsTouched(),
+            markAsUntouched: () => this.markAsUntouched(),
+            markAsDirty: () => this.markAsDirty(),
+            markAsPristine: () => this.markAsPristine(),
+            hasError: this.hasError,
+            isOpen: this.isOpen,
+            value: computed(() => this._getEmitValue()),
+            errorMessage: this.errorMessage,
+        });
+    }
+    togglePeriod() {
+        const currentPeriod = this._period();
+        const newPeriod = currentPeriod === 'AM' ? 'PM' : 'AM';
+        this._period.set(newPeriod);
+        const currentHour = this._hour();
+        if (newPeriod === 'PM' && currentHour < 12) {
+            this._hour.set(currentHour + 12);
+        }
+        if (newPeriod === 'AM' && currentHour >= 12) {
+            this._hour.set(currentHour - 12);
+        }
+        this._updateTimeToDate();
+    }
+    onPeriodChange(event) {
+        const select = event.target;
+        const newPeriod = select.value;
+        const currentHour = this._hour();
+        this._period.set(newPeriod);
+        if (newPeriod === 'PM' && currentHour < 12) {
+            this._hour.set(currentHour + 12);
+        }
+        if (newPeriod === 'AM' && currentHour >= 12) {
+            this._hour.set(currentHour - 12);
+        }
+        this._updateTimeToDate();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ZCalendarComponent, isStandalone: true, selector: "z-calendar", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, zMode: { classPropertyName: "zMode", publicName: "zMode", isSignal: true, isRequired: false, transformFunction: null }, zSize: { classPropertyName: "zSize", publicName: "zSize", isSignal: true, isRequired: false, transformFunction: null }, zLabel: { classPropertyName: "zLabel", publicName: "zLabel", isSignal: true, isRequired: false, transformFunction: null }, zLabelClass: { classPropertyName: "zLabelClass", publicName: "zLabelClass", isSignal: true, isRequired: false, transformFunction: null }, zPlaceholder: { classPropertyName: "zPlaceholder", publicName: "zPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, zRequired: { classPropertyName: "zRequired", publicName: "zRequired", isSignal: true, isRequired: false, transformFunction: null }, zDisabled: { classPropertyName: "zDisabled", publicName: "zDisabled", isSignal: true, isRequired: false, transformFunction: null }, zReadonly: { classPropertyName: "zReadonly", publicName: "zReadonly", isSignal: true, isRequired: false, transformFunction: null }, zShowTime: { classPropertyName: "zShowTime", publicName: "zShowTime", isSignal: true, isRequired: false, transformFunction: null }, zTimeFormat: { classPropertyName: "zTimeFormat", publicName: "zTimeFormat", isSignal: true, isRequired: false, transformFunction: null }, zShowHour: { classPropertyName: "zShowHour", publicName: "zShowHour", isSignal: true, isRequired: false, transformFunction: null }, zShowMinute: { classPropertyName: "zShowMinute", publicName: "zShowMinute", isSignal: true, isRequired: false, transformFunction: null }, zShowSecond: { classPropertyName: "zShowSecond", publicName: "zShowSecond", isSignal: true, isRequired: false, transformFunction: null }, zQuickSelect: { classPropertyName: "zQuickSelect", publicName: "zQuickSelect", isSignal: true, isRequired: false, transformFunction: null }, zAllowClear: { classPropertyName: "zAllowClear", publicName: "zAllowClear", isSignal: true, isRequired: false, transformFunction: null }, zFormat: { classPropertyName: "zFormat", publicName: "zFormat", isSignal: true, isRequired: false, transformFunction: null }, zMinDate: { classPropertyName: "zMinDate", publicName: "zMinDate", isSignal: true, isRequired: false, transformFunction: null }, zMaxDate: { classPropertyName: "zMaxDate", publicName: "zMaxDate", isSignal: true, isRequired: false, transformFunction: null }, zValueType: { classPropertyName: "zValueType", publicName: "zValueType", isSignal: true, isRequired: false, transformFunction: null }, zValidators: { classPropertyName: "zValidators", publicName: "zValidators", isSignal: true, isRequired: false, transformFunction: null }, zLocale: { classPropertyName: "zLocale", publicName: "zLocale", isSignal: true, isRequired: false, transformFunction: null }, zShowOk: { classPropertyName: "zShowOk", publicName: "zShowOk", isSignal: true, isRequired: false, transformFunction: null }, zOkText: { classPropertyName: "zOkText", publicName: "zOkText", isSignal: true, isRequired: false, transformFunction: null }, zShowCancel: { classPropertyName: "zShowCancel", publicName: "zShowCancel", isSignal: true, isRequired: false, transformFunction: null }, zCancelText: { classPropertyName: "zCancelText", publicName: "zCancelText", isSignal: true, isRequired: false, transformFunction: null }, zDisabledDate: { classPropertyName: "zDisabledDate", publicName: "zDisabledDate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { zControl: "zControl", zChange: "zChange" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => ZCalendarComponent),
+                multi: true,
+            },
+        ], 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 w-fit\">\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      zTrigger=\"click\"\n      zClass=\"border-0 shadow-none bg-transparent p-0\"\n      (zHideStart)=\"onPopoverHide()\"\n      (zShow)=\"onPopoverShow()\"\n      (zControl)=\"onPopoverControl($event)\"\n      [id]=\"pickerId\"\n      [class]=\"triggerClasses()\"\n      (keydown)=\"onTriggerKeydown($event)\">\n      <z-icon\n        [zType]=\"isRangeMode() ? 'lucideCalendarRange' : 'lucideCalendar'\"\n        zSize=\"16\"\n        class=\"text-muted-foreground shrink-0 cursor-pointer\"\n        (click)=\"$event.stopPropagation(); toggle()\" />\n\n      @if (isRangeMode()) {\n        <input\n          type=\"text\"\n          data-range-type=\"start\"\n          class=\"placeholder:text-muted-foreground min-w-0 flex-1 truncate bg-transparent text-center text-sm outline-none\"\n          placeholder=\"T\u1EEB ng\u00E0y\"\n          [value]=\"inputDisplayStart()\"\n          [disabled]=\"isDisabled()\"\n          [readonly]=\"zReadonly()\"\n          (click)=\"isOpen() && $event.stopPropagation()\"\n          (focus)=\"onInputFocus($event)\"\n          (input)=\"onStartInputChange($event)\"\n          (blur)=\"onInputBlur($event)\"\n          (keydown.enter)=\"onStartInputEnter($event)\" />\n        <span class=\"text-muted-foreground text-sm\">-</span>\n        <input\n          type=\"text\"\n          data-range-type=\"end\"\n          class=\"placeholder:text-muted-foreground min-w-0 flex-1 truncate bg-transparent text-center text-sm outline-none\"\n          placeholder=\"\u0110\u1EBFn ng\u00E0y\"\n          [value]=\"inputDisplayEnd()\"\n          [disabled]=\"isDisabled()\"\n          [readonly]=\"zReadonly()\"\n          (click)=\"isOpen() && $event.stopPropagation()\"\n          (focus)=\"onInputFocus($event)\"\n          (input)=\"onEndInputChange($event)\"\n          (blur)=\"onInputBlur($event)\"\n          (keydown.enter)=\"onEndInputEnter($event)\" />\n      } @else {\n        <input\n          #inputEl\n          type=\"text\"\n          class=\"placeholder:text-muted-foreground min-w-0 flex-1 truncate bg-transparent text-sm outline-none\"\n          [placeholder]=\"zPlaceholder()\"\n          [value]=\"inputDisplayValue()\"\n          [disabled]=\"isDisabled()\"\n          [readonly]=\"zReadonly()\"\n          (click)=\"isOpen() && $event.stopPropagation()\"\n          (focus)=\"onInputFocus($event)\"\n          (input)=\"onInputChange($event)\"\n          (blur)=\"onInputBlur($event)\"\n          (keydown.enter)=\"onInputEnter($event)\" />\n      }\n\n      @if (zAllowClear() && !isDisabled() && !zReadonly()) {\n        <button\n          type=\"button\"\n          tabindex=\"-1\"\n          class=\"text-muted-foreground hover:text-foreground flex size-5 shrink-0 cursor-pointer items-center justify-center rounded transition-all\"\n          [class.opacity-0]=\"!hasValue()\"\n          [class.pointer-events-none]=\"!hasValue()\"\n          (click)=\"onClear($event)\">\n          <z-icon zType=\"lucideX\" zSize=\"14\" />\n        </button>\n      }\n    </div>\n  </div>\n\n  @if (showError()) {\n    <p class=\"text-destructive animate-in fade-in slide-in-from-top-1 m-0 text-xs duration-200\">\n      {{ errorMessage() }}\n    </p>\n  }\n</div>\n\n<ng-template #calendarTpl>\n  <div\n    class=\"z-calendar-calendar bg-popover border-border flex rounded-[6px] border shadow-lg\"\n    (keydown)=\"onCalendarKeydown($event)\">\n    @if (zQuickSelect() && zMode() === 'range') {\n      <div class=\"border-border flex flex-col space-y-1 border-r p-2\">\n        @for (preset of quickSelectPresets; track preset.key) {\n          @let presetDisabled = preset | zIsPresetDisabled: zDisabledDate();\n          <button\n            type=\"button\"\n            class=\"cursor-pointer rounded-[4px] px-3 py-1.5 text-left text-sm whitespace-nowrap transition-colors\"\n            [class.hover:bg-muted]=\"activePresetKey() !== preset.key && !presetDisabled\"\n            [class.bg-primary]=\"activePresetKey() === preset.key\"\n            [class.text-primary-foreground]=\"activePresetKey() === preset.key\"\n            [class.font-medium]=\"activePresetKey() === preset.key\"\n            [class.opacity-40]=\"presetDisabled\"\n            [class.cursor-not-allowed]=\"presetDisabled\"\n            [disabled]=\"presetDisabled\"\n            (click)=\"onQuickSelect(preset)\">\n            {{ preset.label }}\n          </button>\n        }\n      </div>\n    }\n    <div class=\"flex flex-col gap-2 p-3\">\n      @if (!isTimeMode()) {\n        <div class=\"z-calendars-wrapper flex gap-4\">\n          <!-- First Calendar -->\n          <div class=\"z-calendar-section flex flex-col justify-center gap-1\">\n            @if (!isTimeMode()) {\n              <div class=\"flex w-full items-center justify-between space-x-1\">\n                <button\n                  type=\"button\"\n                  z-button\n                  zType=\"ghost\"\n                  zSize=\"sm\"\n                  class=\"size-8 p-0!\"\n                  [zWave]=\"false\"\n                  [zWave]=\"false\"\n                  (click)=\"navigatePrevious()\">\n                  <z-icon zType=\"lucideChevronsLeft\" zSize=\"16\" />\n                </button>\n\n                <button\n                  type=\"button\"\n                  z-button\n                  zType=\"ghost\"\n                  zSize=\"sm\"\n                  class=\"size-8 p-0!\"\n                  [zWave]=\"false\"\n                  [zWave]=\"false\"\n                  (click)=\"navigatePreviousFast()\">\n                  <z-icon zType=\"lucideChevronLeft\" zSize=\"16\" />\n                </button>\n\n                <div class=\"flex flex-1 items-center justify-center gap-0.5\">\n                  @if (!isYearMode() && !isQuarterMode()) {\n                    <button\n                      type=\"button\"\n                      z-button\n                      zType=\"ghost\"\n                      zSize=\"sm\"\n                      class=\"w-20 px-2!\"\n                      [zWave]=\"false\"\n                      [zDisabled]=\"false\"\n                      (click)=\"setView('month')\">\n                      {{ currentMonthName() }}\n                    </button>\n                  }\n\n                  <button\n                    type=\"button\"\n                    z-button\n                    zType=\"ghost\"\n                    zSize=\"sm\"\n                    class=\"px-2!\"\n                    [zWave]=\"false\"\n                    [zDisabled]=\"isYearMode()\"\n                    (click)=\"setView('year')\">\n                    {{ currentYear() }}\n                  </button>\n                </div>\n\n                <button\n                  type=\"button\"\n                  z-button\n                  zType=\"ghost\"\n                  zSize=\"sm\"\n                  class=\"size-8 p-0!\"\n                  [zDisabled]=\"!canNavigateStartNext()\"\n                  [zWave]=\"false\"\n                  (click)=\"navigateNextFast()\">\n                  <z-icon zType=\"lucideChevronRight\" zSize=\"16\" />\n                </button>\n\n                <button\n                  type=\"button\"\n                  z-button\n                  zType=\"ghost\"\n                  zSize=\"sm\"\n                  class=\"size-8 p-0!\"\n                  [zDisabled]=\"!canNavigateStartNext()\"\n                  [zWave]=\"false\"\n                  (click)=\"navigateNext()\">\n                  <z-icon zType=\"lucideChevronsRight\" zSize=\"16\" />\n                </button>\n              </div>\n\n              <div class=\"z-calendar-views w-full\" [class.z-calendar-views-quarter]=\"isQuarterMode()\">\n                @if (currentView() === 'day') {\n                  <div class=\"flex h-full w-full flex-col gap-1\" [class.z-calendar-animate]=\"hasViewChanged()\">\n                    <div class=\"grid w-full grid-cols-7\">\n                      @for (weekday of weekdayNames; track weekday) {\n                        <div class=\"text-muted-foreground flex h-7 items-center justify-center text-xs font-medium\">\n                          {{ weekday }}\n                        </div>\n                      }\n                    </div>\n\n                    @for (week of calendarDays(); track $index) {\n                      <div class=\"grid w-full grid-cols-7\">\n                        @for (day of week; track day.date.getTime()) {\n                          <button\n                            type=\"button\"\n                            [class]=\"day | zDayClasses\"\n                            [disabled]=\"day.isDisabled\"\n                            (click)=\"onDayClick(day)\"\n                            (mouseenter)=\"onDayHover(day)\"\n                            (mouseleave)=\"onDayLeave()\">\n                            {{ day.day }}\n                          </button>\n                        }\n                      </div>\n                    }\n                  </div>\n                }\n\n                @if (currentView() === 'month') {\n                  <div class=\"grid h-full w-full grid-cols-3 grid-rows-4\" [class.z-calendar-animate]=\"hasViewChanged()\">\n                    @for (month of monthNames; track month; let i = $index) {\n                      @let monthDisabled = isStartMonthDisabled(i);\n                      <div class=\"flex items-center justify-center\">\n                        <button\n                          type=\"button\"\n                          [class]=\"i | zMonthClasses: currentMonthIndex()\"\n                          [disabled]=\"monthDisabled\"\n                          [class.opacity-30]=\"monthDisabled\"\n                          [class.cursor-not-allowed]=\"monthDisabled\"\n                          (click)=\"onMonthSelect(i)\">\n                          {{ month }}\n                        </button>\n                      </div>\n                    }\n                  </div>\n                }\n\n                @if (currentView() === 'year') {\n                  <div\n                    class=\"grid h-full w-full grid-cols-3 gap-0.5\"\n                    [class.grid-rows-4]=\"!isYearMode() && !isQuarterMode()\"\n                    [class.grid-rows-3]=\"isYearMode() || isQuarterMode()\"\n                    [class.z-calendar-animate]=\"hasViewChanged()\">\n                    @for (year of isYearMode() || isQuarterMode() ? yearRangeSmall() : yearRange(); track year) {\n                      @let yearDisabled = isStartYearDisabled(year);\n                      <div class=\"flex items-center justify-center\">\n                        <button\n                          type=\"button\"\n                          [class]=\"year | zYearClasses: currentYear()\"\n                          [disabled]=\"yearDisabled\"\n                          [class.opacity-30]=\"yearDisabled\"\n                          [class.cursor-not-allowed]=\"yearDisabled\"\n                          (click)=\"onYearClick(year)\">\n                          {{ year }}\n                        </button>\n                      </div>\n                    }\n                  </div>\n                }\n\n                @if (currentView() === 'quarter') {\n                  <div class=\"grid w-full grid-cols-2 gap-2\" [class.z-calendar-animate]=\"hasViewChanged()\">\n                    @for (quarter of quarterNames; track quarter; let i = $index) {\n                      <div class=\"flex items-center justify-center\">\n                        <button\n                          type=\"button\"\n                          [class]=\"i | zQuarterClasses: currentQuarterIndex()\"\n                          (click)=\"onQuarterClick(i)\">\n                          {{ quarter }}\n                        </button>\n                      </div>\n                    }\n                  </div>\n                }\n              </div>\n            }\n\n            <!-- Start Time Picker for Range Mode -->\n            @if (isRangeMode() && zShowTime() && currentView() === 'day') {\n              <div class=\"flex items-center justify-center gap-2 pt-2\">\n                <span class=\"text-muted-foreground text-xs\">B\u1EAFt \u0111\u1EA7u:</span>\n                <div class=\"flex items-center gap-0.5\">\n                  @if (zShowHour()) {\n                    <input\n                      type=\"text\"\n                      tabindex=\"0\"\n                      inputmode=\"numeric\"\n                      data-time-type=\"hour\"\n                      class=\"border-input bg-background focus:border-ring focus:ring-ring/30 w-10 rounded border px-1.5 py-1 text-center text-sm outline-none focus:ring-2\"\n                      [value]=\"formattedHour()\"\n                      (input)=\"onHourInput($event)\"\n                      (blur)=\"onTimeBlur($event)\"\n                      maxlength=\"2\" />\n                  }\n                  @if (zShowHour() && zShowMinute()) {\n                    <span class=\"text-muted-foreground\">:</span>\n                  }\n                  @if (zShowMinute()) {\n                    <input\n                      type=\"text\"\n                      tabindex=\"0\"\n                      inputmode=\"numeric\"\n                      data-time-type=\"minute\"\n                      class=\"border-input bg-background focus:border-ring focus:ring-ring/30 w-10 rounded border px-1.5 py-1 text-center text-sm outline-none focus:ring-2\"\n                      [value]=\"formattedMinute()\"\n                      (input)=\"onMinuteInput($event)\"\n                      (blur)=\"onTimeBlur($event)\"\n                      maxlength=\"2\" />\n                  }\n                  @if (zShowMinute() && zShowSecond()) {\n                    <span class=\"text-muted-foreground\">:</span>\n                  }\n                  @if (zShowSecond()) {\n                    <input\n                      type=\"text\"\n                      tabindex=\"0\"\n                      inputmode=\"numeric\"\n                      data-time-type=\"second\"\n                      class=\"border-input bg-background focus:border-ring focus:ring-ring/30 w-10 rounded border px-1.5 py-1 text-center text-sm outline-none focus:ring-2\"\n                      [value]=\"formattedSecond()\"\n                      (input)=\"onSecondInput($event)\"\n                      (blur)=\"onTimeBlur($event)\"\n                      maxlength=\"2\" />\n                  }\n                  @if (zTimeFormat() === '12h') {\n                    <button\n                      type=\"button\"\n                      tabindex=\"0\"\n                      class=\"border-input bg-background hover:bg-muted focus:border-ring focus:ring-ring/30 ml-1 cursor-pointer rounded border px-2 py-1 text-sm font-medium transition-colors outline-none focus:ring-2\"\n                      (click)=\"togglePeriod()\">\n                      {{ period() }}\n                    </button>\n                  }\n                </div>\n              </div>\n            }\n          </div>\n\n          <!-- Second Calendar (Range Mode Only) -->\n          @if (isRangeMode()) {\n            <!-- Divider -->\n            <div class=\"border-border bg-border w-px self-stretch\"></div>\n\n            <div class=\"z-calendar-section flex flex-col justify-center gap-1\">\n              <div class=\"flex w-full items-center justify-between space-x-1\">\n                <button\n                  type=\"button\"\n                  z-button\n                  zType=\"ghost\"\n                  zSize=\"sm\"\n                  class=\"size-8 p-0!\"\n                  [zDisabled]=\"!canNavigateEndPrev()\"\n                  [zWave]=\"false\"\n                  (click)=\"navigateEndPreviousFast()\">\n                  <z-icon zType=\"lucideChevronsLeft\" zSize=\"16\" />\n                </button>\n\n                <button\n                  type=\"button\"\n                  z-button\n                  zType=\"ghost\"\n                  zSize=\"sm\"\n                  class=\"size-8 p-0!\"\n                  [zDisabled]=\"!canNavigateEndPrev()\"\n                  [zWave]=\"false\"\n                  (click)=\"navigateEndPrevious()\">\n                  <z-icon zType=\"lucideChevronLeft\" zSize=\"16\" />\n                </button>\n\n                <div class=\"flex flex-1 items-center justify-center gap-0.5\">\n                  <button\n                    type=\"button\"\n                    z-button\n                    zType=\"ghost\"\n                    zSize=\"sm\"\n                    class=\"w-20 px-2!\"\n                    [zWave]=\"false\"\n                    (click)=\"setEndView('month')\">\n                    {{ endMonthName() }}\n                  </button>\n\n                  <button\n                    type=\"button\"\n                    z-button\n                    zType=\"ghost\"\n                    zSize=\"sm\"\n                    class=\"px-2!\"\n                    [zWave]=\"false\"\n                    (click)=\"setEndView('year')\">\n                    {{ endMonthYear() }}\n                  </button>\n                </div>\n\n                <button\n                  type=\"button\"\n                  z-button\n                  zType=\"ghost\"\n                  zSize=\"sm\"\n                  class=\"size-8 p-0!\"\n                  [zWave]=\"false\"\n                  [zWave]=\"false\"\n                  (click)=\"navigateEndNext()\">\n                  <z-icon zType=\"lucideChevronRight\" zSize=\"16\" />\n                </button>\n\n                <button\n                  type=\"button\"\n                  z-button\n                  zType=\"ghost\"\n                  zSize=\"sm\"\n                  class=\"size-8 p-0!\"\n                  [zWave]=\"false\"\n                  [zWave]=\"false\"\n                  (click)=\"navigateEndNextFast()\">\n                  <z-icon zType=\"lucideChevronsRight\" zSize=\"16\" />\n                </button>\n              </div>\n\n              <div class=\"z-calendar-views w-full\">\n                @if (endView() === 'day') {\n                  <div class=\"flex h-full w-full flex-col gap-1\" [class.z-calendar-animate]=\"hasEndViewChanged()\">\n                    <div class=\"grid grid-cols-7 gap-px\">\n                      @for (weekday of weekdayNames; track weekday) {\n                        <div class=\"text-muted-foreground flex h-8 w-8 items-center justify-center text-xs font-medium\">\n                          {{ weekday }}\n                        </div>\n                      }\n                    </div>\n\n                    @for (week of calendarDaysEnd(); track $index) {\n                      <div class=\"grid grid-cols-7 gap-px\">\n                        @for (day of week; track day.date.getTime()) {\n                          <button\n                            type=\"button\"\n                            [class]=\"day | zDayClasses\"\n                            [disabled]=\"day.isDisabled\"\n                            (click)=\"onDayClick(day)\"\n                            (mouseenter)=\"onDayHover(day)\"\n                            (mouseleave)=\"onDayLeave()\">\n                            {{ day.day }}\n                          </button>\n                        }\n                      </div>\n                    }\n                  </div>\n                }\n\n                @if (endView() === 'month') {\n                  <div\n                    class=\"grid h-full w-full grid-cols-3 grid-rows-4\"\n                    [class.z-calendar-animate]=\"hasEndViewChanged()\">\n                    @for (month of monthNames; track month; let i = $index) {\n                      @let endMonthDisabled = isEndMonthDisabled(i);\n                      <div class=\"flex items-center justify-center\">\n                        <button\n                          type=\"button\"\n                          [class]=\"i | zMonthClasses: endMonth().getMonth()\"\n                          [disabled]=\"endMonthDisabled\"\n                          [class.opacity-30]=\"endMonthDisabled\"\n                          [class.cursor-not-allowed]=\"endMonthDisabled\"\n                          (click)=\"onEndMonthClick(i)\">\n                          {{ month }}\n                        </button>\n                      </div>\n                    }\n                  </div>\n                }\n\n                @if (endView() === 'year') {\n                  <div\n                    class=\"grid h-full w-full grid-cols-3 grid-rows-4 gap-0.5\"\n                    [class.z-calendar-animate]=\"hasEndViewChanged()\">\n                    @for (year of endYearRange(); track year) {\n                      @let endYearDisabled = isEndYearDisabled(year);\n                      <div class=\"flex items-center justify-center\">\n                        <button\n                          type=\"button\"\n                          [class]=\"year | zYearClasses: endMonth().getFullYear()\"\n                          [disabled]=\"endYearDisabled\"\n                          [class.opacity-30]=\"endYearDisabled\"\n                          [class.cursor-not-allowed]=\"endYearDisabled\"\n                          (click)=\"onEndYearClick(year)\">\n                          {{ year }}\n                        </button>\n                      </div>\n                    }\n                  </div>\n                }\n              </div>\n\n              <!-- End Time Picker for Range Mode -->\n              @if (zShowTime()) {\n                <div class=\"flex items-center justify-center gap-2 pt-2\">\n                  <span class=\"text-muted-foreground text-xs\">K\u1EBFt th\u00FAc:</span>\n                  <div class=\"flex items-center gap-0.5\">\n                    @if (zShowHour()) {\n                      <input\n                        type=\"text\"\n                        tabindex=\"0\"\n                        inputmode=\"numeric\"\n                        data-time-type=\"hour-end\"\n                        class=\"border-input bg-background focus:border-ring focus:ring-ring/30 w-10 rounded border px-1.5 py-1 text-center text-sm outline-none focus:ring-2\"\n                        [value]=\"formattedHourEnd()\"\n                        (input)=\"onHourEndInput($event)\"\n                        (blur)=\"onTimeBlurEnd($event)\"\n                        maxlength=\"2\" />\n                    }\n                    @if (zShowHour() && zShowMinute()) {\n                      <span class=\"text-muted-foreground\">:</span>\n                    }\n                    @if (zShowMinute()) {\n                      <input\n                        type=\"text\"\n                        tabindex=\"0\"\n                        inputmode=\"numeric\"\n                        data-time-type=\"minute-end\"\n                        class=\"border-input bg-background focus:border-ring focus:ring-ring/30 w-10 rounded border px-1.5 py-1 text-center text-sm outline-none focus:ring-2\"\n                        [value]=\"formattedMinuteEnd()\"\n                        (input)=\"onMinuteEndInput($event)\"\n                        (blur)=\"onTimeBlurEnd($event)\"\n                        maxlength=\"2\" />\n                    }\n                    @if (zShowMinute() && zShowSecond()) {\n                      <span class=\"text-muted-foreground\">:</span>\n                    }\n                    @if (zShowSecond()) {\n                      <input\n                        type=\"text\"\n                        tabindex=\"0\"\n                        inputmode=\"numeric\"\n                        data-time-type=\"second-end\"\n                        class=\"border-input bg-background focus:border-ring focus:ring-ring/30 w-10 rounded border px-1.5 py-1 text-center text-sm outline-none focus:ring-2\"\n                        [value]=\"formattedSecondEnd()\"\n                        (input)=\"onSecondEndInput($event)\"\n                        (blur)=\"onTimeBlurEnd($event)\"\n                        maxlength=\"2\" />\n                    }\n                    @if (zTimeFormat() === '12h') {\n                      <button\n                        type=\"button\"\n                        tabindex=\"0\"\n                        class=\"border-input bg-background hover:bg-muted focus:border-ring focus:ring-ring/30 ml-1 cursor-pointer rounded border px-2 py-1 text-sm font-medium transition-colors outline-none focus:ring-2\"\n                        (click)=\"togglePeriodEnd()\">\n                        {{ periodEnd() }}\n                      </button>\n                    }\n                  </div>\n                </div>\n              }\n            </div>\n          }\n        </div>\n      }\n\n      @if (((zShowTime() && currentView() === 'day') || isTimeMode()) && !isRangeMode()) {\n        <div class=\"flex items-center justify-center gap-2\">\n          <div class=\"flex items-center gap-0.5\">\n            @if (zShowHour()) {\n              <input\n                type=\"text\"\n                tabindex=\"0\"\n                inputmode=\"numeric\"\n                data-time-type=\"hour\"\n                class=\"border-input bg-background focus:border-ring focus:ring-ring/30 w-10 rounded border px-1.5 py-1 text-center text-sm outline-none focus:ring-2\"\n                [value]=\"formattedHour()\"\n                (input)=\"onHourInput($event)\"\n                (blur)=\"onTimeBlur($event)\"\n                maxlength=\"2\" />\n            }\n\n            @if (zShowHour() && zShowMinute()) {\n              <span class=\"text-muted-foreground\">:</span>\n            }\n\n            @if (zShowMinute()) {\n              <input\n                type=\"text\"\n                tabindex=\"0\"\n                inputmode=\"numeric\"\n                data-time-type=\"minute\"\n                class=\"border-input bg-background focus:border-ring focus:ring-ring/30 w-10 rounded border px-1.5 py-1 text-center text-sm outline-none focus:ring-2\"\n                [value]=\"formattedMinute()\"\n                (input)=\"onMinuteInput($event)\"\n                (blur)=\"onTimeBlur($event)\"\n                maxlength=\"2\" />\n            }\n\n            @if (zShowMinute() && zShowSecond()) {\n              <span class=\"text-muted-foreground\">:</span>\n            }\n\n            @if (zShowSecond()) {\n              <input\n                type=\"text\"\n                tabindex=\"0\"\n                inputmode=\"numeric\"\n                data-time-type=\"second\"\n                class=\"border-input bg-background focus:border-ring focus:ring-ring/30 w-10 rounded border px-1.5 py-1 text-center text-sm outline-none focus:ring-2\"\n                [value]=\"formattedSecond()\"\n                (input)=\"onSecondInput($event)\"\n                (blur)=\"onTimeBlur($event)\"\n                maxlength=\"2\" />\n            }\n\n            @if (zTimeFormat() === '12h') {\n              <button\n                type=\"button\"\n                tabindex=\"0\"\n                class=\"border-input bg-background hover:bg-muted focus:border-ring focus:ring-ring/30 ml-1 cursor-pointer rounded border px-2 py-1 text-sm font-medium transition-colors outline-none focus:ring-2\"\n                (click)=\"togglePeriod()\">\n                {{ period() }}\n              </button>\n            }\n          </div>\n        </div>\n      }\n\n      @if (!(zQuickSelect() && zMode() === 'range' && !showOkButton() && !showCancelButton())) {\n        <div class=\"border-border flex items-center justify-between gap-2 border-t pt-2\">\n          @if (!zQuickSelect() || zMode() !== 'range') {\n            <button type=\"button\" z-button zType=\"secondary\" zSize=\"sm\" [zWave]=\"false\" (click)=\"onTodayClick()\">\n              {{ todayButtonText() }}\n            </button>\n          } @else {\n            <div></div>\n          }\n\n          @if (showOkButton() || showCancelButton()) {\n            <div class=\"flex items-center gap-2\">\n              @if (showCancelButton()) {\n                <button type=\"button\" z-button zType=\"outline\" zSize=\"sm\" (click)=\"onCancelClick()\">\n                  {{ zCancelText() }}\n                </button>\n              }\n              @if (showOkButton()) {\n                <button type=\"button\" z-button zSize=\"sm\" [zDisabled]=\"!canApply()\" (click)=\"onOkClick()\">\n                  {{ zOkText() }}\n                </button>\n              }\n            </div>\n          }\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n", styles: [".z-calendar-calendar .z-calendar-section{width:280px;flex-shrink:0}.z-calendar-calendar .z-calendar-views{height:225px;width:100%;display:flex;align-items:center;justify-content:center;flex-direction:column}.z-calendar-calendar .z-calendar-views.z-calendar-views-quarter{height:auto}.z-calendar-calendar .z-calendar-animate{animation:z-calendar-view-enter .2s ease-out}@keyframes z-calendar-view-enter{0%{opacity:0;transform:scale(.95) translateY(4px)}to{opacity:1;transform:scale(1) translateY(0)}}\n"], dependencies: [{ kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zSize", "zStrokeWidth", "zSvg"] }, { kind: "directive", type: ZPopoverDirective, selector: "[z-popover]", inputs: ["zPopoverContent", "zPosition", "zTrigger", "zClass", "zShowDelay", "zHideDelay", "zDisabled", "zOffset", "zPopoverWidth", "zManualClose", "zScrollClose", "zShowArrow"], outputs: ["zShow", "zHide", "zHideStart", "zControl"], exportAs: ["zPopover"] }, { kind: "component", type: ZButtonComponent, selector: "z-button, button[z-button], a[z-button]", inputs: ["class", "zType", "zSize", "zShape", "zLabel", "zLoading", "zDisabled", "zTypeIcon", "zSizeIcon", "zStrokeWidthIcon", "zWave"], exportAs: ["zButton"] }, { kind: "pipe", type: ZDayClassesPipe, name: "zDayClasses" }, { kind: "pipe", type: ZMonthClassesPipe, name: "zMonthClasses" }, { kind: "pipe", type: ZQuarterClassesPipe, name: "zQuarterClasses" }, { kind: "pipe", type: ZYearClassesPipe, name: "zYearClasses" }, { kind: "pipe", type: ZIsPresetDisabledPipe, name: "zIsPresetDisabled" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZCalendarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'z-calendar', imports: [
+                        ZIconComponent,
+                        ZPopoverDirective,
+                        ZButtonComponent,
+                        ZDayClassesPipe,
+                        ZMonthClassesPipe,
+                        ZQuarterClassesPipe,
+                        ZYearClassesPipe,
+                        ZIsPresetDisabledPipe,
+                    ], standalone: true, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => ZCalendarComponent),
+                            multi: true,
+                        },
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, exportAs: 'zCalendar', template: "<div class=\"z-calendar-wrapper flex w-full flex-col gap-2\">\n  @if (zLabel()) {\n    <label [for]=\"pickerId\" class=\"text-xs leading-none font-medium\" [class]=\"zLabelClass()\">\n      {{ zLabel() }}\n      @if (zRequired()) {\n        <span class=\"text-destructive! ml-0.5\">*</span>\n      }\n    </label>\n  }\n\n  <div class=\"relative w-fit\">\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      zTrigger=\"click\"\n      zClass=\"border-0 shadow-none bg-transparent p-0\"\n      (zHideStart)=\"onPopoverHide()\"\n      (zShow)=\"onPopoverShow()\"\n      (zControl)=\"onPopoverControl($event)\"\n      [id]=\"pickerId\"\n      [class]=\"triggerClasses()\"\n      (keydown)=\"onTriggerKeydown($event)\">\n      <z-icon\n        [zType]=\"isRangeMode() ? 'lucideCalendarRange' : 'lucideCalendar'\"\n        zSize=\"16\"\n        class=\"text-muted-foreground shrink-0 cursor-pointer\"\n        (click)=\"$event.stopPropagation(); toggle()\" />\n\n      @if (isRangeMode()) {\n        <input\n          type=\"text\"\n          data-range-type=\"start\"\n          class=\"placeholder:text-muted-foreground min-w-0 flex-1 truncate bg-transparent text-center text-sm outline-none\"\n          placeholder=\"T\u1EEB ng\u00E0y\"\n          [value]=\"inputDisplayStart()\"\n          [disabled]=\"isDisabled()\"\n          [readonly]=\"zReadonly()\"\n          (click)=\"isOpen() && $event.stopPropagation()\"\n          (focus)=\"onInputFocus($event)\"\n          (input)=\"onStartInputChange($event)\"\n          (blur)=\"onInputBlur($event)\"\n          (keydown.enter)=\"onStartInputEnter($event)\" />\n        <span class=\"text-muted-foreground text-sm\">-</span>\n        <input\n          type=\"text\"\n          data-range-type=\"end\"\n          class=\"placeholder:text-muted-foreground min-w-0 flex-1 truncate bg-transparent text-center text-sm outline-none\"\n          placeholder=\"\u0110\u1EBFn ng\u00E0y\"\n          [value]=\"inputDisplayEnd()\"\n          [disabled]=\"isDisabled()\"\n          [readonly]=\"zReadonly()\"\n          (click)=\"isOpen() && $event.stopPropagation()\"\n          (focus)=\"onInputFocus($event)\"\n          (input)=\"onEndInputChange($event)\"\n          (blur)=\"onInputBlur($event)\"\n          (keydown.enter)=\"onEndInputEnter($event)\" />\n      } @else {\n        <input\n          #inputEl\n          type=\"text\"\n          class=\"placeholder:text-muted-foreground min-w-0 flex-1 truncate bg-transparent text-sm outline-none\"\n          [placeholder]=\"zPlaceholder()\"\n          [value]=\"inputDisplayValue()\"\n          [disabled]=\"isDisabled()\"\n          [readonly]=\"zReadonly()\"\n          (click)=\"isOpen() && $event.stopPropagation()\"\n          (focus)=\"onInputFocus($event)\"\n          (input)=\"onInputChange($event)\"\n          (blur)=\"onInputBlur($event)\"\n          (keydown.enter)=\"onInputEnter($event)\" />\n      }\n\n      @if (zAllowClear() && !isDisabled() && !zReadonly()) {\n        <button\n          type=\"button\"\n          tabindex=\"-1\"\n          class=\"text-muted-foreground hover:text-foreground flex size-5 shrink-0 cursor-pointer items-center justify-center rounded transition-all\"\n          [class.opacity-0]=\"!hasValue()\"\n          [class.pointer-events-none]=\"!hasValue()\"\n          (click)=\"onClear($event)\">\n          <z-icon zType=\"lucideX\" zSize=\"14\" />\n        </button>\n      }\n    </div>\n  </div>\n\n  @if (showError()) {\n    <p class=\"text-destructive animate-in fade-in slide-in-from-top-1 m-0 text-xs duration-200\">\n      {{ errorMessage() }}\n    </p>\n  }\n</div>\n\n<ng-template #calendarTpl>\n  <div\n    class=\"z-calendar-calendar bg-popover border-border flex rounded-[6px] border shadow-lg\"\n    (keydown)=\"onCalendarKeydown($event)\">\n    @if (zQuickSelect() && zMode() === 'range') {\n      <div class=\"border-border flex flex-col space-y-1 border-r p-2\">\n        @for (preset of quickSelectPresets; track preset.key) {\n          @let presetDisabled = preset | zIsPresetDisabled: zDisabledDate();\n          <button\n            type=\"button\"\n            class=\"cursor-pointer rounded-[4px] px-3 py-1.5 text-left text-sm whitespace-nowrap transition-colors\"\n            [class.hover:bg-muted]=\"activePresetKey() !== preset.key && !presetDisabled\"\n            [class.bg-primary]=\"activePresetKey() === preset.key\"\n            [class.text-primary-foreground]=\"activePresetKey() === preset.key\"\n            [class.font-medium]=\"activePresetKey() === preset.key\"\n            [class.opacity-40]=\"presetDisabled\"\n            [class.cursor-not-allowed]=\"presetDisabled\"\n            [disabled]=\"presetDisabled\"\n            (click)=\"onQuickSelect(preset)\">\n            {{ preset.label }}\n          </button>\n        }\n      </div>\n    }\n    <div class=\"flex flex-col gap-2 p-3\">\n      @if (!isTimeMode()) {\n        <div class=\"z-calendars-wrapper flex gap-4\">\n          <!-- First Calendar -->\n          <div class=\"z-calendar-section flex flex-col justify-center gap-1\">\n            @if (!isTimeMode()) {\n              <div class=\"flex w-full items-center justify-between space-x-1\">\n                <button\n                  type=\"button\"\n                  z-button\n                  zType=\"ghost\"\n                  zSize=\"sm\"\n                  class=\"size-8 p-0!\"\n                  [zWave]=\"false\"\n                  [zWave]=\"false\"\n                  (click)=\"navigatePrevious()\">\n                  <z-icon zType=\"lucideChevronsLeft\" zSize=\"16\" />\n                </button>\n\n                <button\n                  type=\"button\"\n                  z-button\n                  zType=\"ghost\"\n                  zSize=\"sm\"\n                  class=\"size-8 p-0!\"\n                  [zWave]=\"false\"\n                  [zWave]=\"false\"\n                  (click)=\"navigatePreviousFast()\">\n                  <z-icon zType=\"lucideChevronLeft\" zSize=\"16\" />\n                </button>\n\n                <div class=\"flex flex-1 items-center justify-center gap-0.5\">\n                  @if (!isYearMode() && !isQuarterMode()) {\n                    <button\n                      type=\"button\"\n                      z-button\n                      zType=\"ghost\"\n                      zSize=\"sm\"\n                      class=\"w-20 px-2!\"\n                      [zWave]=\"false\"\n                      [zDisabled]=\"false\"\n                      (click)=\"setView('month')\">\n                      {{ currentMonthName() }}\n                    </button>\n                  }\n\n                  <button\n                    type=\"button\"\n                    z-button\n                    zType=\"ghost\"\n                    zSize=\"sm\"\n                    class=\"px-2!\"\n                    [zWave]=\"false\"\n                    [zDisabled]=\"isYearMode()\"\n                    (click)=\"setView('year')\">\n                    {{ currentYear() }}\n                  </button>\n                </div>\n\n                <button\n                  type=\"button\"\n                  z-button\n                  zType=\"ghost\"\n                  zSize=\"sm\"\n                  class=\"size-8 p-0!\"\n                  [zDisabled]=\"!canNavigateStartNext()\"\n                  [zWave]=\"false\"\n                  (click)=\"navigateNextFast()\">\n                  <z-icon zType=\"lucideChevronRight\" zSize=\"16\" />\n                </button>\n\n                <button\n                  type=\"button\"\n                  z-button\n                  zType=\"ghost\"\n                  zSize=\"sm\"\n                  class=\"size-8 p-0!\"\n                  [zDisabled]=\"!canNavigateStartNext()\"\n                  [zWave]=\"false\"\n                  (click)=\"navigateNext()\">\n                  <z-icon zType=\"lucideChevronsRight\" zSize=\"16\" />\n                </button>\n              </div>\n\n              <div class=\"z-calendar-views w-full\" [class.z-calendar-views-quarter]=\"isQuarterMode()\">\n                @if (currentView() === 'day') {\n                  <div class=\"flex h-full w-full flex-col gap-1\" [class.z-calendar-animate]=\"hasViewChanged()\">\n                    <div class=\"grid w-full grid-cols-7\">\n                      @for (weekday of weekdayNames; track weekday) {\n                        <div class=\"text-muted-foreground flex h-7 items-center justify-center text-xs font-medium\">\n                          {{ weekday }}\n                        </div>\n                      }\n                    </div>\n\n                    @for (week of calendarDays(); track $index) {\n                      <div class=\"grid w-full grid-cols-7\">\n                        @for (day of week; track day.date.getTime()) {\n                          <button\n                            type=\"button\"\n                            [class]=\"day | zDayClasses\"\n                            [disabled]=\"day.isDisabled\"\n                            (click)=\"onDayClick(day)\"\n                            (mouseenter)=\"onDayHover(day)\"\n                            (mouseleave)=\"onDayLeave()\">\n                            {{ day.day }}\n                          </button>\n                        }\n                      </div>\n                    }\n                  </div>\n                }\n\n                @if (currentView() === 'month') {\n                  <div class=\"grid h-full w-full grid-cols-3 grid-rows-4\" [class.z-calendar-animate]=\"hasViewChanged()\">\n                    @for (month of monthNames; track month; let i = $index) {\n                      @let monthDisabled = isStartMonthDisabled(i);\n                      <div class=\"flex items-center justify-center\">\n                        <button\n                          type=\"button\"\n                          [class]=\"i | zMonthClasses: currentMonthIndex()\"\n                          [disabled]=\"monthDisabled\"\n                          [class.opacity-30]=\"monthDisabled\"\n                          [class.cursor-not-allowed]=\"monthDisabled\"\n                          (click)=\"onMonthSelect(i)\">\n                          {{ month }}\n                        </button>\n                      </div>\n                    }\n                  </div>\n                }\n\n                @if (currentView() === 'year') {\n                  <div\n                    class=\"grid h-full w-full grid-cols-3 gap-0.5\"\n                    [class.grid-rows-4]=\"!isYearMode() && !isQuarterMode()\"\n                    [class.grid-rows-3]=\"isYearMode() || isQuarterMode()\"\n                    [class.z-calendar-animate]=\"hasViewChanged()\">\n                    @for (year of isYearMode() || isQuarterMode() ? yearRangeSmall() : yearRange(); track year) {\n                      @let yearDisabled = isStartYearDisabled(year);\n                      <div class=\"flex items-center justify-center\">\n                        <button\n                          type=\"button\"\n                          [class]=\"year | zYearClasses: currentYear()\"\n                          [disabled]=\"yearDisabled\"\n                          [class.opacity-30]=\"yearDisabled\"\n                          [class.cursor-not-allowed]=\"yearDisabled\"\n                          (click)=\"onYearClick(year)\">\n                          {{ year }}\n                        </button>\n                      </div>\n                    }\n                  </div>\n                }\n\n                @if (currentView() === 'quarter') {\n                  <div class=\"grid w-full grid-cols-2 gap-2\" [class.z-calendar-animate]=\"hasViewChanged()\">\n                    @for (quarter of quarterNames; track quarter; let i = $index) {\n                      <div class=\"flex items-center justify-center\">\n                        <button\n                          type=\"button\"\n                          [class]=\"i | zQuarterClasses: currentQuarterIndex()\"\n                          (click)=\"onQuarterClick(i)\">\n                          {{ quarter }}\n                        </button>\n                      </div>\n                    }\n                  </div>\n                }\n              </div>\n            }\n\n            <!-- Start Time Picker for Range Mode -->\n            @if (isRangeMode() && zShowTime() && currentView() === 'day') {\n              <div class=\"flex items-center justify-center gap-2 pt-2\">\n                <span class=\"text-muted-foreground text-xs\">B\u1EAFt \u0111\u1EA7u:</span>\n                <div class=\"flex items-center gap-0.5\">\n                  @if (zShowHour()) {\n                    <input\n                      type=\"text\"\n                      tabindex=\"0\"\n                      inputmode=\"numeric\"\n                      data-time-type=\"hour\"\n                      class=\"border-input bg-background focus:border-ring focus:ring-ring/30 w-10 rounded border px-1.5 py-1 text-center text-sm outline-none focus:ring-2\"\n                      [value]=\"formattedHour()\"\n                      (input)=\"onHourInput($event)\"\n                      (blur)=\"onTimeBlur($event)\"\n                      maxlength=\"2\" />\n                  }\n                  @if (zShowHour() && zShowMinute()) {\n                    <span class=\"text-muted-foreground\">:</span>\n                  }\n                  @if (zShowMinute()) {\n                    <input\n                      type=\"text\"\n                      tabindex=\"0\"\n                      inputmode=\"numeric\"\n                      data-time-type=\"minute\"\n                      class=\"border-input bg-background focus:border-ring focus:ring-ring/30 w-10 rounded border px-1.5 py-1 text-center text-sm outline-none focus:ring-2\"\n                      [value]=\"formattedMinute()\"\n                      (input)=\"onMinuteInput($event)\"\n                      (blur)=\"onTimeBlur($event)\"\n                      maxlength=\"2\" />\n                  }\n                  @if (zShowMinute() && zShowSecond()) {\n                    <span class=\"text-muted-foreground\">:</span>\n                  }\n                  @if (zShowSecond()) {\n                    <input\n                      type=\"text\"\n                      tabindex=\"0\"\n                      inputmode=\"numeric\"\n                      data-time-type=\"second\"\n                      class=\"border-input bg-background focus:border-ring focus:ring-ring/30 w-10 rounded border px-1.5 py-1 text-center text-sm outline-none focus:ring-2\"\n                      [value]=\"formattedSecond()\"\n                      (input)=\"onSecondInput($event)\"\n                      (blur)=\"onTimeBlur($event)\"\n                      maxlength=\"2\" />\n                  }\n                  @if (zTimeFormat() === '12h') {\n                    <button\n                      type=\"button\"\n                      tabindex=\"0\"\n                      class=\"border-input bg-background hover:bg-muted focus:border-ring focus:ring-ring/30 ml-1 cursor-pointer rounded border px-2 py-1 text-sm font-medium transition-colors outline-none focus:ring-2\"\n                      (click)=\"togglePeriod()\">\n                      {{ period() }}\n                    </button>\n                  }\n                </div>\n              </div>\n            }\n          </div>\n\n          <!-- Second Calendar (Range Mode Only) -->\n          @if (isRangeMode()) {\n            <!-- Divider -->\n            <div class=\"border-border bg-border w-px self-stretch\"></div>\n\n            <div class=\"z-calendar-section flex flex-col justify-center gap-1\">\n              <div class=\"flex w-full items-center justify-between space-x-1\">\n                <button\n                  type=\"button\"\n                  z-button\n                  zType=\"ghost\"\n                  zSize=\"sm\"\n                  class=\"size-8 p-0!\"\n                  [zDisabled]=\"!canNavigateEndPrev()\"\n                  [zWave]=\"false\"\n                  (click)=\"navigateEndPreviousFast()\">\n                  <z-icon zType=\"lucideChevronsLeft\" zSize=\"16\" />\n                </button>\n\n                <button\n                  type=\"button\"\n                  z-button\n                  zType=\"ghost\"\n                  zSize=\"sm\"\n                  class=\"size-8 p-0!\"\n                  [zDisabled]=\"!canNavigateEndPrev()\"\n                  [zWave]=\"false\"\n                  (click)=\"navigateEndPrevious()\">\n                  <z-icon zType=\"lucideChevronLeft\" zSize=\"16\" />\n                </button>\n\n                <div class=\"flex flex-1 items-center justify-center gap-0.5\">\n                  <button\n                    type=\"button\"\n                    z-button\n                    zType=\"ghost\"\n                    zSize=\"sm\"\n                    class=\"w-20 px-2!\"\n                    [zWave]=\"false\"\n                    (click)=\"setEndView('month')\">\n                    {{ endMonthName() }}\n                  </button>\n\n                  <button\n                    type=\"button\"\n                    z-button\n                    zType=\"ghost\"\n                    zSize=\"sm\"\n                    class=\"px-2!\"\n                    [zWave]=\"false\"\n                    (click)=\"setEndView('year')\">\n                    {{ endMonthYear() }}\n                  </button>\n                </div>\n\n                <button\n                  type=\"button\"\n                  z-button\n                  zType=\"ghost\"\n                  zSize=\"sm\"\n                  class=\"size-8 p-0!\"\n                  [zWave]=\"false\"\n                  [zWave]=\"false\"\n                  (click)=\"navigateEndNext()\">\n                  <z-icon zType=\"lucideChevronRight\" zSize=\"16\" />\n                </button>\n\n                <button\n                  type=\"button\"\n                  z-button\n                  zType=\"ghost\"\n                  zSize=\"sm\"\n                  class=\"size-8 p-0!\"\n                  [zWave]=\"false\"\n                  [zWave]=\"false\"\n                  (click)=\"navigateEndNextFast()\">\n                  <z-icon zType=\"lucideChevronsRight\" zSize=\"16\" />\n                </button>\n              </div>\n\n              <div class=\"z-calendar-views w-full\">\n                @if (endView() === 'day') {\n                  <div class=\"flex h-full w-full flex-col gap-1\" [class.z-calendar-animate]=\"hasEndViewChanged()\">\n                    <div class=\"grid grid-cols-7 gap-px\">\n                      @for (weekday of weekdayNames; track weekday) {\n                        <div class=\"text-muted-foreground flex h-8 w-8 items-center justify-center text-xs font-medium\">\n                          {{ weekday }}\n                        </div>\n                      }\n                    </div>\n\n                    @for (week of calendarDaysEnd(); track $index) {\n                      <div class=\"grid grid-cols-7 gap-px\">\n                        @for (day of week; track day.date.getTime()) {\n                          <button\n                            type=\"button\"\n                            [class]=\"day | zDayClasses\"\n                            [disabled]=\"day.isDisabled\"\n                            (click)=\"onDayClick(day)\"\n                            (mouseenter)=\"onDayHover(day)\"\n                            (mouseleave)=\"onDayLeave()\">\n                            {{ day.day }}\n                          </button>\n                        }\n                      </div>\n                    }\n                  </div>\n                }\n\n                @if (endView() === 'month') {\n                  <div\n                    class=\"grid h-full w-full grid-cols-3 grid-rows-4\"\n                    [class.z-calendar-animate]=\"hasEndViewChanged()\">\n                    @for (month of monthNames; track month; let i = $index) {\n                      @let endMonthDisabled = isEndMonthDisabled(i);\n                      <div class=\"flex items-center justify-center\">\n                        <button\n                          type=\"button\"\n                          [class]=\"i | zMonthClasses: endMonth().getMonth()\"\n                          [disabled]=\"endMonthDisabled\"\n                          [class.opacity-30]=\"endMonthDisabled\"\n                          [class.cursor-not-allowed]=\"endMonthDisabled\"\n                          (click)=\"onEndMonthClick(i)\">\n                          {{ month }}\n                        </button>\n                      </div>\n                    }\n                  </div>\n                }\n\n                @if (endView() === 'year') {\n                  <div\n                    class=\"grid h-full w-full grid-cols-3 grid-rows-4 gap-0.5\"\n                    [class.z-calendar-animate]=\"hasEndViewChanged()\">\n                    @for (year of endYearRange(); track year) {\n                      @let endYearDisabled = isEndYearDisabled(year);\n                      <div class=\"flex items-center justify-center\">\n                        <button\n                          type=\"button\"\n                          [class]=\"year | zYearClasses: endMonth().getFullYear()\"\n                          [disabled]=\"endYearDisabled\"\n                          [class.opacity-30]=\"endYearDisabled\"\n                          [class.cursor-not-allowed]=\"endYearDisabled\"\n                          (click)=\"onEndYearClick(year)\">\n                          {{ year }}\n                        </button>\n                      </div>\n                    }\n                  </div>\n                }\n              </div>\n\n              <!-- End Time Picker for Range Mode -->\n              @if (zShowTime()) {\n                <div class=\"flex items-center justify-center gap-2 pt-2\">\n                  <span class=\"text-muted-foreground text-xs\">K\u1EBFt th\u00FAc:</span>\n                  <div class=\"flex items-center gap-0.5\">\n                    @if (zShowHour()) {\n                      <input\n                        type=\"text\"\n                        tabindex=\"0\"\n                        inputmode=\"numeric\"\n                        data-time-type=\"hour-end\"\n                        class=\"border-input bg-background focus:border-ring focus:ring-ring/30 w-10 rounded border px-1.5 py-1 text-center text-sm outline-none focus:ring-2\"\n                        [value]=\"formattedHourEnd()\"\n                        (input)=\"onHourEndInput($event)\"\n                        (blur)=\"onTimeBlurEnd($event)\"\n                        maxlength=\"2\" />\n                    }\n                    @if (zShowHour() && zShowMinute()) {\n                      <span class=\"text-muted-foreground\">:</span>\n                    }\n                    @if (zShowMinute()) {\n                      <input\n                        type=\"text\"\n                        tabindex=\"0\"\n                        inputmode=\"numeric\"\n                        data-time-type=\"minute-end\"\n                        class=\"border-input bg-background focus:border-ring focus:ring-ring/30 w-10 rounded border px-1.5 py-1 text-center text-sm outline-none focus:ring-2\"\n                        [value]=\"formattedMinuteEnd()\"\n                        (input)=\"onMinuteEndInput($event)\"\n                        (blur)=\"onTimeBlurEnd($event)\"\n                        maxlength=\"2\" />\n                    }\n                    @if (zShowMinute() && zShowSecond()) {\n                      <span class=\"text-muted-foreground\">:</span>\n                    }\n                    @if (zShowSecond()) {\n                      <input\n                        type=\"text\"\n                        tabindex=\"0\"\n                        inputmode=\"numeric\"\n                        data-time-type=\"second-end\"\n                        class=\"border-input bg-background focus:border-ring focus:ring-ring/30 w-10 rounded border px-1.5 py-1 text-center text-sm outline-none focus:ring-2\"\n                        [value]=\"formattedSecondEnd()\"\n                        (input)=\"onSecondEndInput($event)\"\n                        (blur)=\"onTimeBlurEnd($event)\"\n                        maxlength=\"2\" />\n                    }\n                    @if (zTimeFormat() === '12h') {\n                      <button\n                        type=\"button\"\n                        tabindex=\"0\"\n                        class=\"border-input bg-background hover:bg-muted focus:border-ring focus:ring-ring/30 ml-1 cursor-pointer rounded border px-2 py-1 text-sm font-medium transition-colors outline-none focus:ring-2\"\n                        (click)=\"togglePeriodEnd()\">\n                        {{ periodEnd() }}\n                      </button>\n                    }\n                  </div>\n                </div>\n              }\n            </div>\n          }\n        </div>\n      }\n\n      @if (((zShowTime() && currentView() === 'day') || isTimeMode()) && !isRangeMode()) {\n        <div class=\"flex items-center justify-center gap-2\">\n          <div class=\"flex items-center gap-0.5\">\n            @if (zShowHour()) {\n              <input\n                type=\"text\"\n                tabindex=\"0\"\n                inputmode=\"numeric\"\n                data-time-type=\"hour\"\n                class=\"border-input bg-background focus:border-ring focus:ring-ring/30 w-10 rounded border px-1.5 py-1 text-center text-sm outline-none focus:ring-2\"\n                [value]=\"formattedHour()\"\n                (input)=\"onHourInput($event)\"\n                (blur)=\"onTimeBlur($event)\"\n                maxlength=\"2\" />\n            }\n\n            @if (zShowHour() && zShowMinute()) {\n              <span class=\"text-muted-foreground\">:</span>\n            }\n\n            @if (zShowMinute()) {\n              <input\n                type=\"text\"\n                tabindex=\"0\"\n                inputmode=\"numeric\"\n                data-time-type=\"minute\"\n                class=\"border-input bg-background focus:border-ring focus:ring-ring/30 w-10 rounded border px-1.5 py-1 text-center text-sm outline-none focus:ring-2\"\n                [value]=\"formattedMinute()\"\n                (input)=\"onMinuteInput($event)\"\n                (blur)=\"onTimeBlur($event)\"\n                maxlength=\"2\" />\n            }\n\n            @if (zShowMinute() && zShowSecond()) {\n              <span class=\"text-muted-foreground\">:</span>\n            }\n\n            @if (zShowSecond()) {\n              <input\n                type=\"text\"\n                tabindex=\"0\"\n                inputmode=\"numeric\"\n                data-time-type=\"second\"\n                class=\"border-input bg-background focus:border-ring focus:ring-ring/30 w-10 rounded border px-1.5 py-1 text-center text-sm outline-none focus:ring-2\"\n                [value]=\"formattedSecond()\"\n                (input)=\"onSecondInput($event)\"\n                (blur)=\"onTimeBlur($event)\"\n                maxlength=\"2\" />\n            }\n\n            @if (zTimeFormat() === '12h') {\n              <button\n                type=\"button\"\n                tabindex=\"0\"\n                class=\"border-input bg-background hover:bg-muted focus:border-ring focus:ring-ring/30 ml-1 cursor-pointer rounded border px-2 py-1 text-sm font-medium transition-colors outline-none focus:ring-2\"\n                (click)=\"togglePeriod()\">\n                {{ period() }}\n              </button>\n            }\n          </div>\n        </div>\n      }\n\n      @if (!(zQuickSelect() && zMode() === 'range' && !showOkButton() && !showCancelButton())) {\n        <div class=\"border-border flex items-center justify-between gap-2 border-t pt-2\">\n          @if (!zQuickSelect() || zMode() !== 'range') {\n            <button type=\"button\" z-button zType=\"secondary\" zSize=\"sm\" [zWave]=\"false\" (click)=\"onTodayClick()\">\n              {{ todayButtonText() }}\n            </button>\n          } @else {\n            <div></div>\n          }\n\n          @if (showOkButton() || showCancelButton()) {\n            <div class=\"flex items-center gap-2\">\n              @if (showCancelButton()) {\n                <button type=\"button\" z-button zType=\"outline\" zSize=\"sm\" (click)=\"onCancelClick()\">\n                  {{ zCancelText() }}\n                </button>\n              }\n              @if (showOkButton()) {\n                <button type=\"button\" z-button zSize=\"sm\" [zDisabled]=\"!canApply()\" (click)=\"onOkClick()\">\n                  {{ zOkText() }}\n                </button>\n              }\n            </div>\n          }\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n", styles: [".z-calendar-calendar .z-calendar-section{width:280px;flex-shrink:0}.z-calendar-calendar .z-calendar-views{height:225px;width:100%;display:flex;align-items:center;justify-content:center;flex-direction:column}.z-calendar-calendar .z-calendar-views.z-calendar-views-quarter{height:auto}.z-calendar-calendar .z-calendar-animate{animation:z-calendar-view-enter .2s ease-out}@keyframes z-calendar-view-enter{0%{opacity:0;transform:scale(.95) translateY(4px)}to{opacity:1;transform:scale(1) translateY(0)}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], zMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "zMode", required: false }] }], zSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSize", required: false }] }], zLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLabel", required: false }] }], zLabelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLabelClass", required: false }] }], zPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "zPlaceholder", required: false }] }], zRequired: [{ type: i0.Input, args: [{ isSignal: true, alias: "zRequired", required: false }] }], zDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDisabled", required: false }] }], zReadonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "zReadonly", required: false }] }], zShowTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowTime", required: false }] }], zTimeFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "zTimeFormat", required: false }] }], zShowHour: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowHour", required: false }] }], zShowMinute: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowMinute", required: false }] }], zShowSecond: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowSecond", required: false }] }], zQuickSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "zQuickSelect", required: false }] }], zAllowClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAllowClear", required: false }] }], zFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "zFormat", required: false }] }], zMinDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "zMinDate", required: false }] }], zMaxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "zMaxDate", required: false }] }], zValueType: [{ type: i0.Input, args: [{ isSignal: true, alias: "zValueType", required: false }] }], zValidators: [{ type: i0.Input, args: [{ isSignal: true, alias: "zValidators", required: false }] }], zLocale: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLocale", required: false }] }], zShowOk: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowOk", required: false }] }], zOkText: [{ type: i0.Input, args: [{ isSignal: true, alias: "zOkText", required: false }] }], zShowCancel: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowCancel", required: false }] }], zCancelText: [{ type: i0.Input, args: [{ isSignal: true, alias: "zCancelText", required: false }] }], zDisabledDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDisabledDate", required: false }] }], zControl: [{ type: i0.Output, args: ["zControl"] }], zChange: [{ type: i0.Output, args: ["zChange"] }], triggerRef: [{ type: i0.ViewChild, args: ['triggerEl', { isSignal: true }] }], inputRef: [{ type: i0.ViewChild, args: ['inputEl', { isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ZCalendarComponent, zCalendarDayVariants, zCalendarMonthVariants, zCalendarVariants, zCalendarYearVariants };
+//# sourceMappingURL=shival99-z-ui-components-z-calendar.mjs.map