@shival99/z-ui 1.0.11 → 1.0.12

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

@@ -1113,6 +1113,15 @@ class ZCalendarComponent {
                 const range = value;
                 this._rangeStart.set(range.start);
                 this._rangeEnd.set(range.end);
+                if (range.start && range.end) {
+                    this._currentMonth.set(range.start);
+                    this._endMonth.set(isSameMonth(range.start, range.end) ? addMonths(range.end, 1) : range.end);
+                }
+                setTimeout(() => {
+                    this._inputDisplayStart.set(this.displayValueStart());
+                    this._inputDisplayEnd.set(this.displayValueEnd());
+                    this._cdr.markForCheck();
+                });
             }
             return;
         }
@@ -2313,7 +2322,7 @@ class ZCalendarComponent {
                 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 });
+        ], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }, { propertyName: "inputRef", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }], exportAs: ["zCalendar"], ngImport: i0, template: "<div class=\"z-calendar-wrapper flex w-full flex-col gap-2\">\n  @if (zLabel()) {\n    <label [for]=\"pickerId\" class=\"text-xs leading-none font-medium\" [class]=\"zLabelClass()\">\n      {{ zLabel() }}\n      @if (zRequired()) {\n        <span class=\"text-destructive! ml-0.5\">*</span>\n      }\n    </label>\n  }\n\n  <div class=\"relative\">\n    <div\n      #triggerEl\n      z-popover\n      [zPopoverContent]=\"calendarTpl\"\n      zPosition=\"bottom-left\"\n      zPopoverWidth=\"auto\"\n      [zOffset]=\"6\"\n      [zDisabled]=\"isDisabled() || zReadonly()\"\n      [zManualClose]=\"showCancelButton()\"\n      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,
@@ -2332,7 +2341,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                             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"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, exportAs: 'zCalendar', template: "<div class=\"z-calendar-wrapper flex w-full flex-col gap-2\">\n  @if (zLabel()) {\n    <label [for]=\"pickerId\" class=\"text-xs leading-none font-medium\" [class]=\"zLabelClass()\">\n      {{ zLabel() }}\n      @if (zRequired()) {\n        <span class=\"text-destructive! ml-0.5\">*</span>\n      }\n    </label>\n  }\n\n  <div class=\"relative\">\n    <div\n      #triggerEl\n      z-popover\n      [zPopoverContent]=\"calendarTpl\"\n      zPosition=\"bottom-left\"\n      zPopoverWidth=\"auto\"\n      [zOffset]=\"6\"\n      [zDisabled]=\"isDisabled() || zReadonly()\"\n      [zManualClose]=\"showCancelButton()\"\n      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 }] }] } });
 
 /**