@konce-pt/angular 0.7.7 → 0.7.8

package/fesm2022/konce-pt-angular.mjs

@@ -762,6 +762,11 @@ const KPT_MESSAGES_EN = {
         nextYear: 'Next year',
         prevYears: 'Previous years',
         nextYears: 'Next years',
+        prevDecades: 'Previous decades',
+        nextDecades: 'Next decades',
+        chooseMonth: 'Choose month',
+        chooseYear: 'Choose year',
+        chooseDecade: 'Choose decade',
         calendar: 'Calendar',
         month: 'Month',
         time: 'Time',
@@ -1024,6 +1029,11 @@ const KPT_MESSAGES_PL = {
         nextYear: 'Następny rok',
         prevYears: 'Poprzednie lata',
         nextYears: 'Następne lata',
+        prevDecades: 'Poprzednie dekady',
+        nextDecades: 'Następne dekady',
+        chooseMonth: 'Wybierz miesiąc',
+        chooseYear: 'Wybierz rok',
+        chooseDecade: 'Wybierz dekadę',
         calendar: 'Kalendarz',
         month: 'Miesiąc',
         time: 'Godzina',
@@ -3047,7 +3057,7 @@ class KptClock {
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptClock, { className: "KptClock", filePath: "lib/datepicker/clock.component.ts", lineNumber: 94 }); })();
 
 const _forTrack0$8 = ($index, $item) => $item.iso;
-const _forTrack1$1 = ($index, $item) => $item.value;
+const _forTrack1$2 = ($index, $item) => $item.label;
 function KptDatepicker_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 2);
     i0.ɵɵtext(1);
@@ -3076,325 +3086,284 @@ function KptDatepicker_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵattribute("aria-label", ctx_r0.i18n.t("common.clear"));
 } }
-function KptDatepicker_ng_template_7_Case_1_Template(rf, ctx) { if (rf & 1) {
-    const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kpt-clock", 11);
-    i0.ɵɵtwoWayListener("valueChange", function KptDatepicker_ng_template_7_Case_1_Template_kpt_clock_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r0.timeStr, $event) || (ctx_r0.timeStr = $event); return i0.ɵɵresetView($event); });
+function KptDatepicker_ng_template_7_Conditional_1_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 12)(1, "button", 14);
+    i0.ɵɵlistener("click", function KptDatepicker_ng_template_7_Conditional_1_Conditional_0_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.backToCalendar()); });
+    i0.ɵɵelement(2, "kpt-icon", 15);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(1, "div", 12)(2, "kpt-button", 13);
-    i0.ɵɵlistener("click", function KptDatepicker_ng_template_7_Case_1_Template_kpt_button_click_2_listener() { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.commit()); });
-    i0.ɵɵtext(3);
+    i0.ɵɵelementStart(3, "span", 16);
+    i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(2);
-    i0.ɵɵtwoWayProperty("value", ctx_r0.timeStr);
-    i0.ɵɵproperty("hourFormat", ctx_r0.hourFormat())("minuteStep", ctx_r0.minuteStep());
-    i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(ctx_r0.i18n.t("common.done"));
-} }
-function KptDatepicker_ng_template_7_Case_2_Conditional_0_For_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 20);
-    i0.ɵɵtext(1);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const wd_r7 = ctx.$implicit;
+    const ctx_r0 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(wd_r7);
+    i0.ɵɵattribute("aria-label", ctx_r0.i18n.t("datepicker.calendar"));
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(ctx_r0.i18n.t("datepicker.time"));
 } }
-function KptDatepicker_ng_template_7_Case_2_Conditional_0_For_12_For_1_Template(rf, ctx) { if (rf & 1) {
-    const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 25);
-    i0.ɵɵlistener("click", function KptDatepicker_ng_template_7_Case_2_Conditional_0_For_12_For_1_Template_button_click_0_listener() { const cell_r9 = i0.ɵɵrestoreView(_r8).$implicit; const ctx_r0 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r0.selectDay(cell_r9)); });
-    i0.ɵɵtext(1);
+function KptDatepicker_ng_template_7_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵconditionalCreate(0, KptDatepicker_ng_template_7_Conditional_1_Conditional_0_Template, 5, 2, "div", 12);
+    i0.ɵɵelementStart(1, "kpt-clock", 13);
+    i0.ɵɵtwoWayListener("valueChange", function KptDatepicker_ng_template_7_Conditional_1_Template_kpt_clock_valueChange_1_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r0.timeStr, $event) || (ctx_r0.timeStr = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const cell_r9 = ctx.$implicit;
-    i0.ɵɵclassProp("kpt-calendar__day--muted", !cell_r9.inMonth)("kpt-calendar__day--today", cell_r9.today)("kpt-calendar__day--selected", cell_r9.selected);
-    i0.ɵɵproperty("disabled", cell_r9.disabled);
-    i0.ɵɵattribute("aria-pressed", cell_r9.selected);
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵconditional(ctx_r0.selectionMode() === "datetime" ? 0 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(cell_r9.day);
-} }
-function KptDatepicker_ng_template_7_Case_2_Conditional_0_For_12_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵrepeaterCreate(0, KptDatepicker_ng_template_7_Case_2_Conditional_0_For_12_For_1_Template, 2, 9, "button", 24, _forTrack0$8);
-} if (rf & 2) {
-    const week_r10 = ctx.$implicit;
-    i0.ɵɵrepeater(week_r10);
+    i0.ɵɵtwoWayProperty("value", ctx_r0.timeStr);
+    i0.ɵɵproperty("hourFormat", ctx_r0.hourFormat())("minuteStep", ctx_r0.minuteStep());
 } }
-function KptDatepicker_ng_template_7_Case_2_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+function KptDatepicker_ng_template_7_Conditional_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 14)(1, "button", 15);
-    i0.ɵɵlistener("click", function KptDatepicker_ng_template_7_Case_2_Conditional_0_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r6); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.prevMonth()); });
-    i0.ɵɵelement(2, "kpt-icon", 16);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 17);
-    i0.ɵɵtext(4);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "button", 15);
-    i0.ɵɵlistener("click", function KptDatepicker_ng_template_7_Case_2_Conditional_0_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r6); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.nextMonth()); });
-    i0.ɵɵelement(6, "kpt-icon", 18);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(7, "div", 19);
-    i0.ɵɵrepeaterCreate(8, KptDatepicker_ng_template_7_Case_2_Conditional_0_For_9_Template, 2, 1, "span", 20, i0.ɵɵrepeaterTrackByIdentity);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "div", 21);
-    i0.ɵɵrepeaterCreate(11, KptDatepicker_ng_template_7_Case_2_Conditional_0_For_12_Template, 2, 0, null, null, i0.ɵɵrepeaterTrackByIndex);
+    i0.ɵɵelementStart(0, "button", 22);
+    i0.ɵɵlistener("click", function KptDatepicker_ng_template_7_Conditional_2_Conditional_1_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.pagePrev()); });
+    i0.ɵɵelement(1, "kpt-icon", 15);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(13, "button", 22);
-    i0.ɵɵlistener("click", function KptDatepicker_ng_template_7_Case_2_Conditional_0_Template_button_click_13_listener() { i0.ɵɵrestoreView(_r6); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.openClock()); });
-    i0.ɵɵelement(14, "kpt-icon", 23);
-    i0.ɵɵelementStart(15, "span");
-    i0.ɵɵtext(16);
-    i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(3);
-    i0.ɵɵadvance();
-    i0.ɵɵattribute("aria-label", ctx_r0.i18n.t("datepicker.prevMonth"));
-    i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(ctx_r0.monthLabel());
-    i0.ɵɵadvance();
-    i0.ɵɵattribute("aria-label", ctx_r0.i18n.t("datepicker.nextMonth"));
-    i0.ɵɵadvance(3);
-    i0.ɵɵrepeater(ctx_r0.weekdays());
-    i0.ɵɵadvance(3);
-    i0.ɵɵrepeater(ctx_r0.weeks());
-    i0.ɵɵadvance(5);
-    i0.ɵɵtextInterpolate(ctx_r0.timeBarLabel());
+    i0.ɵɵproperty("disabled", !ctx_r0.canPageBack());
+    i0.ɵɵattribute("aria-label", ctx_r0.navPrevLabel());
 } }
-function KptDatepicker_ng_template_7_Case_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    const _r11 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 14)(1, "button", 15);
-    i0.ɵɵlistener("click", function KptDatepicker_ng_template_7_Case_2_Conditional_1_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r11); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.backToCalendar()); });
-    i0.ɵɵelement(2, "kpt-icon", 16);
+function KptDatepicker_ng_template_7_Conditional_2_Case_3_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 23);
+    i0.ɵɵlistener("click", function KptDatepicker_ng_template_7_Conditional_2_Case_3_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r7); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.goTo("month")); });
+    i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 17);
-    i0.ɵɵtext(4);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(5, "kpt-clock", 11);
-    i0.ɵɵtwoWayListener("valueChange", function KptDatepicker_ng_template_7_Case_2_Conditional_1_Template_kpt_clock_valueChange_5_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r0 = i0.ɵɵnextContext(3); i0.ɵɵtwoWayBindingSet(ctx_r0.timeStr, $event) || (ctx_r0.timeStr = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(2, "button", 23);
+    i0.ɵɵlistener("click", function KptDatepicker_ng_template_7_Conditional_2_Case_3_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r7); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.goTo("year")); });
+    i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵattribute("aria-label", ctx_r0.i18n.t("datepicker.chooseMonth"));
     i0.ɵɵadvance();
-    i0.ɵɵattribute("aria-label", ctx_r0.i18n.t("datepicker.calendar"));
-    i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(ctx_r0.i18n.t("datepicker.time"));
+    i0.ɵɵtextInterpolate(ctx_r0.monthName());
     i0.ɵɵadvance();
-    i0.ɵɵtwoWayProperty("value", ctx_r0.timeStr);
-    i0.ɵɵproperty("hourFormat", ctx_r0.hourFormat())("minuteStep", ctx_r0.minuteStep());
-} }
-function KptDatepicker_ng_template_7_Case_2_Template(rf, ctx) { if (rf & 1) {
-    const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵconditionalCreate(0, KptDatepicker_ng_template_7_Case_2_Conditional_0_Template, 17, 4)(1, KptDatepicker_ng_template_7_Case_2_Conditional_1_Template, 6, 5);
-    i0.ɵɵelementStart(2, "div", 12)(3, "kpt-button", 13);
-    i0.ɵɵlistener("click", function KptDatepicker_ng_template_7_Case_2_Template_kpt_button_click_3_listener() { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.commit()); });
-    i0.ɵɵtext(4);
-    i0.ɵɵelementEnd()();
-} if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(2);
-    i0.ɵɵconditional(ctx_r0.dtView() === "calendar" ? 0 : 1);
-    i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate(ctx_r0.i18n.t("common.done"));
+    i0.ɵɵattribute("aria-label", ctx_r0.i18n.t("datepicker.chooseYear"));
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r0.viewYear());
 } }
-function KptDatepicker_ng_template_7_Case_3_For_9_Template(rf, ctx) { if (rf & 1) {
-    const _r13 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 28);
-    i0.ɵɵlistener("click", function KptDatepicker_ng_template_7_Case_3_For_9_Template_button_click_0_listener() { const cell_r14 = i0.ɵɵrestoreView(_r13).$implicit; const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.selectCell(cell_r14)); });
+function KptDatepicker_ng_template_7_Conditional_2_Case_4_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 16);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const cell_r14 = ctx.$implicit;
-    i0.ɵɵclassProp("kpt-calendar__cell--selected", cell_r14.selected);
-    i0.ɵɵproperty("disabled", cell_r14.disabled);
-    i0.ɵɵattribute("aria-pressed", cell_r14.selected);
+    const ctx_r0 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(cell_r14.label);
+    i0.ɵɵtextInterpolate(ctx_r0.i18n.t("datepicker.month"));
 } }
-function KptDatepicker_ng_template_7_Case_3_Template(rf, ctx) { if (rf & 1) {
-    const _r12 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 14)(1, "button", 15);
-    i0.ɵɵlistener("click", function KptDatepicker_ng_template_7_Case_3_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r12); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.prevYear()); });
-    i0.ɵɵelement(2, "kpt-icon", 16);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 17);
-    i0.ɵɵtext(4);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "button", 15);
-    i0.ɵɵlistener("click", function KptDatepicker_ng_template_7_Case_3_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r12); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.nextYear()); });
-    i0.ɵɵelement(6, "kpt-icon", 18);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(7, "div", 26);
-    i0.ɵɵrepeaterCreate(8, KptDatepicker_ng_template_7_Case_3_For_9_Template, 2, 5, "button", 27, _forTrack1$1);
+function KptDatepicker_ng_template_7_Conditional_2_Case_4_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 23);
+    i0.ɵɵlistener("click", function KptDatepicker_ng_template_7_Conditional_2_Case_4_Conditional_1_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r8); const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.goTo("year")); });
+    i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(2);
+    const ctx_r0 = i0.ɵɵnextContext(4);
+    i0.ɵɵattribute("aria-label", ctx_r0.i18n.t("datepicker.chooseYear"));
     i0.ɵɵadvance();
-    i0.ɵɵattribute("aria-label", ctx_r0.i18n.t("datepicker.prevYear"));
-    i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate(ctx_r0.viewYear());
-    i0.ɵɵadvance();
-    i0.ɵɵattribute("aria-label", ctx_r0.i18n.t("datepicker.nextYear"));
-    i0.ɵɵadvance(3);
-    i0.ɵɵrepeater(ctx_r0.monthCells());
 } }
-function KptDatepicker_ng_template_7_Case_4_For_9_Template(rf, ctx) { if (rf & 1) {
-    const _r16 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 28);
-    i0.ɵɵlistener("click", function KptDatepicker_ng_template_7_Case_4_For_9_Template_button_click_0_listener() { const cell_r17 = i0.ɵɵrestoreView(_r16).$implicit; const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.selectCell(cell_r17)); });
-    i0.ɵɵtext(1);
-    i0.ɵɵelementEnd();
+function KptDatepicker_ng_template_7_Conditional_2_Case_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, KptDatepicker_ng_template_7_Conditional_2_Case_4_Conditional_0_Template, 2, 1, "span", 16)(1, KptDatepicker_ng_template_7_Conditional_2_Case_4_Conditional_1_Template, 2, 2, "button", 19);
 } if (rf & 2) {
-    const cell_r17 = ctx.$implicit;
-    i0.ɵɵclassProp("kpt-calendar__cell--selected", cell_r17.selected);
-    i0.ɵɵproperty("disabled", cell_r17.disabled);
-    i0.ɵɵattribute("aria-pressed", cell_r17.selected);
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(cell_r17.label);
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵconditional(ctx_r0.selectionMode() === "month" ? 0 : 1);
 } }
-function KptDatepicker_ng_template_7_Case_4_Template(rf, ctx) { if (rf & 1) {
-    const _r15 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 14)(1, "button", 15);
-    i0.ɵɵlistener("click", function KptDatepicker_ng_template_7_Case_4_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r15); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.prevYearPage()); });
-    i0.ɵɵelement(2, "kpt-icon", 16);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 17);
-    i0.ɵɵtext(4);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "button", 15);
-    i0.ɵɵlistener("click", function KptDatepicker_ng_template_7_Case_4_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r15); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.nextYearPage()); });
-    i0.ɵɵelement(6, "kpt-icon", 18);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(7, "div", 26);
-    i0.ɵɵrepeaterCreate(8, KptDatepicker_ng_template_7_Case_4_For_9_Template, 2, 5, "button", 27, _forTrack1$1);
+function KptDatepicker_ng_template_7_Conditional_2_Case_5_Template(rf, ctx) { if (rf & 1) {
+    const _r9 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 23);
+    i0.ɵɵlistener("click", function KptDatepicker_ng_template_7_Conditional_2_Case_5_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r9); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.goTo("decade")); });
+    i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(2);
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵattribute("aria-label", ctx_r0.i18n.t("datepicker.chooseDecade"));
     i0.ɵɵadvance();
-    i0.ɵɵattribute("aria-label", ctx_r0.i18n.t("datepicker.prevYears"));
-    i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate(ctx_r0.yearRangeLabel());
-    i0.ɵɵadvance();
-    i0.ɵɵattribute("aria-label", ctx_r0.i18n.t("datepicker.nextYears"));
-    i0.ɵɵadvance(3);
-    i0.ɵɵrepeater(ctx_r0.yearCells());
 } }
-function KptDatepicker_ng_template_7_Case_5_For_5_Template(rf, ctx) { if (rf & 1) {
-    const _r18 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 30);
-    i0.ɵɵlistener("click", function KptDatepicker_ng_template_7_Case_5_For_5_Template_button_click_0_listener() { const cell_r19 = i0.ɵɵrestoreView(_r18).$implicit; const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.selectCell(cell_r19)); });
+function KptDatepicker_ng_template_7_Conditional_2_Case_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 16);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const cell_r19 = ctx.$implicit;
-    i0.ɵɵclassProp("kpt-calendar__cell--selected", cell_r19.selected);
-    i0.ɵɵattribute("aria-pressed", cell_r19.selected);
+    const ctx_r0 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(cell_r19.label);
+    i0.ɵɵtextInterpolate(ctx_r0.decadeRangeLabel());
 } }
-function KptDatepicker_ng_template_7_Case_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 14)(1, "span", 17);
-    i0.ɵɵtext(2);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(3, "div", 26);
-    i0.ɵɵrepeaterCreate(4, KptDatepicker_ng_template_7_Case_5_For_5_Template, 2, 4, "button", 29, _forTrack1$1);
+function KptDatepicker_ng_template_7_Conditional_2_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    const _r10 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 22);
+    i0.ɵɵlistener("click", function KptDatepicker_ng_template_7_Conditional_2_Conditional_7_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r10); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.pageNext()); });
+    i0.ɵɵelement(1, "kpt-icon", 24);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(ctx_r0.i18n.t("datepicker.month"));
-    i0.ɵɵadvance(2);
-    i0.ɵɵrepeater(ctx_r0.monthCells());
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("disabled", !ctx_r0.canPageForward());
+    i0.ɵɵattribute("aria-label", ctx_r0.navNextLabel());
 } }
-function KptDatepicker_ng_template_7_Case_6_For_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 20);
+function KptDatepicker_ng_template_7_Conditional_2_Case_8_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 26);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const wd_r21 = ctx.$implicit;
+    const wd_r11 = ctx.$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(wd_r21);
+    i0.ɵɵtextInterpolate(wd_r11);
 } }
-function KptDatepicker_ng_template_7_Case_6_For_12_For_1_Template(rf, ctx) { if (rf & 1) {
-    const _r22 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 25);
-    i0.ɵɵlistener("click", function KptDatepicker_ng_template_7_Case_6_For_12_For_1_Template_button_click_0_listener() { const cell_r23 = i0.ɵɵrestoreView(_r22).$implicit; const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.selectDay(cell_r23)); });
+function KptDatepicker_ng_template_7_Conditional_2_Case_8_For_5_For_1_Template(rf, ctx) { if (rf & 1) {
+    const _r12 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 29);
+    i0.ɵɵlistener("click", function KptDatepicker_ng_template_7_Conditional_2_Case_8_For_5_For_1_Template_button_click_0_listener() { const cell_r13 = i0.ɵɵrestoreView(_r12).$implicit; const ctx_r0 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r0.selectDay(cell_r13)); });
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const cell_r23 = ctx.$implicit;
-    i0.ɵɵclassProp("kpt-calendar__day--muted", !cell_r23.inMonth)("kpt-calendar__day--today", cell_r23.today)("kpt-calendar__day--selected", cell_r23.selected);
-    i0.ɵɵproperty("disabled", cell_r23.disabled);
-    i0.ɵɵattribute("aria-pressed", cell_r23.selected);
+    const cell_r13 = ctx.$implicit;
+    i0.ɵɵclassProp("kpt-calendar__day--muted", !cell_r13.inMonth)("kpt-calendar__day--today", cell_r13.today)("kpt-calendar__day--selected", cell_r13.selected);
+    i0.ɵɵproperty("disabled", cell_r13.disabled);
+    i0.ɵɵattribute("aria-pressed", cell_r13.selected);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(cell_r23.day);
+    i0.ɵɵtextInterpolate(cell_r13.day);
 } }
-function KptDatepicker_ng_template_7_Case_6_For_12_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵrepeaterCreate(0, KptDatepicker_ng_template_7_Case_6_For_12_For_1_Template, 2, 9, "button", 24, _forTrack0$8);
+function KptDatepicker_ng_template_7_Conditional_2_Case_8_For_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵrepeaterCreate(0, KptDatepicker_ng_template_7_Conditional_2_Case_8_For_5_For_1_Template, 2, 9, "button", 28, _forTrack0$8);
 } if (rf & 2) {
-    const week_r24 = ctx.$implicit;
-    i0.ɵɵrepeater(week_r24);
+    const week_r14 = ctx.$implicit;
+    i0.ɵɵrepeater(week_r14);
 } }
-function KptDatepicker_ng_template_7_Case_6_Template(rf, ctx) { if (rf & 1) {
-    const _r20 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 14)(1, "button", 15);
-    i0.ɵɵlistener("click", function KptDatepicker_ng_template_7_Case_6_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r20); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.prevMonth()); });
-    i0.ɵɵelement(2, "kpt-icon", 16);
+function KptDatepicker_ng_template_7_Conditional_2_Case_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 25);
+    i0.ɵɵrepeaterCreate(1, KptDatepicker_ng_template_7_Conditional_2_Case_8_For_2_Template, 2, 1, "span", 26, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 17);
-    i0.ɵɵtext(4);
+    i0.ɵɵelementStart(3, "div", 27);
+    i0.ɵɵrepeaterCreate(4, KptDatepicker_ng_template_7_Conditional_2_Case_8_For_5_Template, 2, 0, null, null, i0.ɵɵrepeaterTrackByIndex);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "button", 15);
-    i0.ɵɵlistener("click", function KptDatepicker_ng_template_7_Case_6_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r20); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.nextMonth()); });
-    i0.ɵɵelement(6, "kpt-icon", 18);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r0.weekdays());
+    i0.ɵɵadvance(3);
+    i0.ɵɵrepeater(ctx_r0.weeks());
+} }
+function KptDatepicker_ng_template_7_Conditional_2_Case_9_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r15 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 32);
+    i0.ɵɵlistener("click", function KptDatepicker_ng_template_7_Conditional_2_Case_9_For_2_Template_button_click_0_listener() { const cell_r16 = i0.ɵɵrestoreView(_r15).$implicit; const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.selectCell(cell_r16)); });
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const cell_r16 = ctx.$implicit;
+    i0.ɵɵclassProp("kpt-calendar__cell--selected", cell_r16.selected)("kpt-calendar__cell--current", cell_r16.current);
+    i0.ɵɵproperty("disabled", cell_r16.disabled);
+    i0.ɵɵattribute("aria-pressed", cell_r16.selected);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(cell_r16.label);
+} }
+function KptDatepicker_ng_template_7_Conditional_2_Case_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 30);
+    i0.ɵɵrepeaterCreate(1, KptDatepicker_ng_template_7_Conditional_2_Case_9_For_2_Template, 2, 7, "button", 31, _forTrack1$2);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵclassProp("kpt-calendar__grid--decades", ctx_r0.panelView() === "decade");
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r0.levelCells());
+} }
+function KptDatepicker_ng_template_7_Conditional_2_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    const _r17 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 33);
+    i0.ɵɵlistener("click", function KptDatepicker_ng_template_7_Conditional_2_Conditional_10_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r17); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.openClock()); });
+    i0.ɵɵelement(1, "kpt-icon", 34);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(7, "div", 19);
-    i0.ɵɵrepeaterCreate(8, KptDatepicker_ng_template_7_Case_6_For_9_Template, 2, 1, "span", 20, i0.ɵɵrepeaterTrackByIdentity);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(ctx_r0.timeBarLabel());
+} }
+function KptDatepicker_ng_template_7_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 12);
+    i0.ɵɵconditionalCreate(1, KptDatepicker_ng_template_7_Conditional_2_Conditional_1_Template, 2, 2, "button", 17);
+    i0.ɵɵelementStart(2, "span", 18);
+    i0.ɵɵconditionalCreate(3, KptDatepicker_ng_template_7_Conditional_2_Case_3_Template, 4, 4)(4, KptDatepicker_ng_template_7_Conditional_2_Case_4_Template, 2, 1)(5, KptDatepicker_ng_template_7_Conditional_2_Case_5_Template, 2, 2, "button", 19)(6, KptDatepicker_ng_template_7_Conditional_2_Case_6_Template, 2, 1, "span", 16);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "div", 21);
-    i0.ɵɵrepeaterCreate(11, KptDatepicker_ng_template_7_Case_6_For_12_Template, 2, 0, null, null, i0.ɵɵrepeaterTrackByIndex);
+    i0.ɵɵconditionalCreate(7, KptDatepicker_ng_template_7_Conditional_2_Conditional_7_Template, 2, 2, "button", 17);
     i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(8, KptDatepicker_ng_template_7_Conditional_2_Case_8_Template, 6, 0)(9, KptDatepicker_ng_template_7_Conditional_2_Case_9_Template, 3, 2, "div", 20);
+    i0.ɵɵconditionalCreate(10, KptDatepicker_ng_template_7_Conditional_2_Conditional_10_Template, 4, 1, "button", 21);
 } if (rf & 2) {
+    let tmp_4_0;
+    let tmp_6_0;
     const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵattribute("aria-label", ctx_r0.i18n.t("datepicker.prevMonth"));
-    i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(ctx_r0.monthLabel());
+    i0.ɵɵconditional(ctx_r0.hasNav() ? 1 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional((tmp_4_0 = ctx_r0.panelView()) === "day" ? 3 : tmp_4_0 === "month" ? 4 : tmp_4_0 === "year" ? 5 : tmp_4_0 === "decade" ? 6 : -1);
+    i0.ɵɵadvance(4);
+    i0.ɵɵconditional(ctx_r0.hasNav() ? 7 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵattribute("aria-label", ctx_r0.i18n.t("datepicker.nextMonth"));
-    i0.ɵɵadvance(3);
-    i0.ɵɵrepeater(ctx_r0.weekdays());
-    i0.ɵɵadvance(3);
-    i0.ɵɵrepeater(ctx_r0.weeks());
+    i0.ɵɵconditional((tmp_6_0 = ctx_r0.panelView()) === "day" ? 8 : 9);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r0.selectionMode() === "datetime" ? 10 : -1);
+} }
+function KptDatepicker_ng_template_7_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    const _r18 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 11)(1, "kpt-button", 35);
+    i0.ɵɵlistener("click", function KptDatepicker_ng_template_7_Conditional_3_Template_kpt_button_click_1_listener() { i0.ɵɵrestoreView(_r18); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.commit()); });
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r0.i18n.t("common.done"));
 } }
 function KptDatepicker_ng_template_7_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 10);
     i0.ɵɵlistener("keydown.escape", function KptDatepicker_ng_template_7_Template_div_keydown_escape_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.close()); });
-    i0.ɵɵconditionalCreate(1, KptDatepicker_ng_template_7_Case_1_Template, 4, 4)(2, KptDatepicker_ng_template_7_Case_2_Template, 5, 2)(3, KptDatepicker_ng_template_7_Case_3_Template, 10, 3)(4, KptDatepicker_ng_template_7_Case_4_Template, 10, 3)(5, KptDatepicker_ng_template_7_Case_5_Template, 6, 1)(6, KptDatepicker_ng_template_7_Case_6_Template, 13, 3);
+    i0.ɵɵconditionalCreate(1, KptDatepicker_ng_template_7_Conditional_1_Template, 2, 4)(2, KptDatepicker_ng_template_7_Conditional_2_Template, 11, 5);
+    i0.ɵɵconditionalCreate(3, KptDatepicker_ng_template_7_Conditional_3_Template, 3, 1, "div", 11);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    let tmp_3_0;
     const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵclassProp("kpt-calendar--clock", ctx_r0.selectionMode() === "time" || ctx_r0.selectionMode() === "datetime" && ctx_r0.dtView() === "clock");
+    i0.ɵɵclassProp("kpt-calendar--clock", ctx_r0.showClock());
     i0.ɵɵadvance();
-    i0.ɵɵconditional((tmp_3_0 = ctx_r0.selectionMode()) === "time" ? 1 : tmp_3_0 === "datetime" ? 2 : tmp_3_0 === "monthYear" ? 3 : tmp_3_0 === "year" ? 4 : tmp_3_0 === "month" ? 5 : 6);
+    i0.ɵɵconditional(ctx_r0.showClock() ? 1 : 2);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r0.hasFooter() ? 3 : -1);
 } }
+/** Kolejność poziomów panelu, od najdrobniejszego. Indeks = „wysokość" widoku. */
+const LEVELS = ['day', 'month', 'year', 'decade'];
 const pad$1 = (n) => String(n).padStart(2, '0');
 const toIso$1 = (d) => `${d.getFullYear()}-${pad$1(d.getMonth() + 1)}-${pad$1(d.getDate())}`;
 /**
  * Wybór daty/godziny z własnym kalendarzem (CDK Overlay), Signal Forms.
  * Granulacja przez `selectionMode`: data, miesiąc+rok, rok, miesiąc, data+godzina, sama godzina.
+ * Panel jest stosem widoków dekady → lata → miesiące → dni: klik w komórkę schodzi poziom niżej,
+ * klik w tytuł wchodzi poziom wyżej. Poziom startowy ustawia `startView` (data urodzenia:
+ * `startView="decade"`); domyślnie startuje na poziomie, na którym tryb zatwierdza wartość.
  * Godzina na tarczy zegara (dwa etapy: godziny → minuty), format 12/24h przez `hourFormat`.
  * Format wartości zależy od trybu: 'RRRR-MM-DD' / 'RRRR-MM' / 'RRRR' / 'MM'
  * / 'RRRR-MM-DDTHH:mm' (datetime) / 'HH:mm' (time). Czas przechowywany zawsze 24h.
  * Wymaga stylów overlay CDK: `import '@angular/cdk/overlay-prebuilt.css';`
  *
  * @example
- * <kpt-datepicker [formField]="f.birthDate" minDate="1900-01-01" />
+ * <kpt-datepicker [formField]="f.birthDate" startView="decade" minDate="1900-01-01" />
  * <kpt-datepicker selectionMode="datetime" [hourFormat]="12" [(value)]="meetingAt" />
  * <kpt-datepicker selectionMode="time" [(value)]="alarm" />
  */
 class KptDatepicker {
+    effectiveStartView() {
+        const commit = LEVELS.indexOf(this.commitLevel());
+        const top = LEVELS.indexOf(this.topLevel());
+        const wanted = this.startView();
+        const idx = wanted ? LEVELS.indexOf(wanted) : commit;
+        return LEVELS[Math.min(Math.max(idx, commit), top)];
+    }
     constructor() {
         this.value = model('', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
@@ -3415,6 +3384,13 @@ class KptDatepicker {
         /** Granulacja wyboru. */
         this.selectionMode = input('date', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "selectionMode" }] : /* istanbul ignore next */ []));
+        /**
+         * Poziom, od którego otwiera się panel. `null` = poziom zatwierdzania danego trybu
+         * (dni dla 'date'). Nie schodzi poniżej tego poziomu — `startView="day"` w trybie 'year'
+         * nie ma sensu i jest podnoszony do 'year'.
+         */
+        this.startView = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "startView" }] : /* istanbul ignore next */ []));
         /** Prezentacja miesiąca w trybie 'month': słownie ('long') lub liczbą ('number'). */
         this.monthDisplay = input('long', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "monthDisplay" }] : /* istanbul ignore next */ []));
@@ -3455,6 +3431,25 @@ class KptDatepicker {
         this.today = new Date();
         this.view = signal({ y: this.today.getFullYear(), m: this.today.getMonth() }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "view" }] : /* istanbul ignore next */ []));
+        /** Aktualny poziom stosu widoków panelu. */
+        this.panelView = signal('day', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "panelView" }] : /* istanbul ignore next */ []));
+        /** Poziom, na którym klik w komórkę zatwierdza wartość zamiast schodzić niżej. */
+        this.commitLevel = computed(() => {
+            switch (this.selectionMode()) {
+                case 'monthYear':
+                case 'month':
+                    return 'month';
+                case 'year':
+                    return 'year';
+                default:
+                    return 'day';
+            }
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "commitLevel" }] : /* istanbul ignore next */ []));
+        /** Tryb 'month' nie ma roku ani dekady — wartością jest samo 'MM'. */
+        this.topLevel = computed(() => this.selectionMode() === 'month' ? 'month' : 'decade', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "topLevel" }] : /* istanbul ignore next */ []));
         // ── Stan czasu (bufor 'HH:mm', 24h) ──
         this.timeStr = signal('', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "timeStr" }] : /* istanbul ignore next */ []));
@@ -3462,24 +3457,77 @@ class KptDatepicker {
         ...(ngDevMode ? [{ debugName: "dtView" }] : /* istanbul ignore next */ []));
         this.pendingDate = signal('', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "pendingDate" }] : /* istanbul ignore next */ []));
+        /** Tarcza zamiast siatek: tryb 'time' zawsze, 'datetime' po wejściu w pasek czasu. */
+        this.showClock = computed(() => this.selectionMode() === 'time' || (this.selectionMode() === 'datetime' && this.dtView() === 'clock'), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showClock" }] : /* istanbul ignore next */ []));
+        this.hasFooter = computed(() => this.selectionMode() === 'time' || this.selectionMode() === 'datetime', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasFooter" }] : /* istanbul ignore next */ []));
         this.positions = [
             { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4 },
             { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -4 },
         ];
         this.viewYear = computed(() => this.view().y, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "viewYear" }] : /* istanbul ignore next */ []));
-        this.monthLabel = computed(() => {
+        this.monthName = computed(() => this.months()[this.view().m], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "monthName" }] : /* istanbul ignore next */ []));
+        /** Początek dekady widocznej w siatce lat (1979 → 1970). */
+        this.decadeStart = computed(() => Math.floor(this.view().y / 10) * 10, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "decadeStart" }] : /* istanbul ignore next */ []));
+        /** Początek strony dekad: 12 dekad, czyli 120 lat (1979 → 1920, strona 1920–2039). */
+        this.centuryStart = computed(() => Math.floor(this.view().y / 120) * 120, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "centuryStart" }] : /* istanbul ignore next */ []));
+        this.yearRangeLabel = computed(() => `${this.decadeStart()} – ${this.decadeStart() + 9}`, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "yearRangeLabel" }] : /* istanbul ignore next */ []));
+        this.decadeRangeLabel = computed(() => `${this.centuryStart()} – ${this.centuryStart() + 119}`, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "decadeRangeLabel" }] : /* istanbul ignore next */ []));
+        /** Tryb 'month' nie ma po czym nawigować — siatka miesięcy jest kompletna. */
+        this.hasNav = computed(() => this.selectionMode() !== 'month', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasNav" }] : /* istanbul ignore next */ []));
+        this.navPrevLabel = computed(() => {
+            switch (this.panelView()) {
+                case 'month': return this.i18n.t('datepicker.prevYear');
+                case 'year': return this.i18n.t('datepicker.prevYears');
+                case 'decade': return this.i18n.t('datepicker.prevDecades');
+                default: return this.i18n.t('datepicker.prevMonth');
+            }
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "navPrevLabel" }] : /* istanbul ignore next */ []));
+        this.navNextLabel = computed(() => {
+            switch (this.panelView()) {
+                case 'month': return this.i18n.t('datepicker.nextYear');
+                case 'year': return this.i18n.t('datepicker.nextYears');
+                case 'decade': return this.i18n.t('datepicker.nextDecades');
+                default: return this.i18n.t('datepicker.nextMonth');
+            }
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "navNextLabel" }] : /* istanbul ignore next */ []));
+        /** Strzałka wstecz gasnie, gdy cała poprzednia strona wypada przed `minDate`. */
+        this.canPageBack = computed(() => {
+            const min = this.minDate();
+            if (!min)
+                return true;
             const { y, m } = this.view();
-            return `${this.months()[m]} ${y}`;
+            switch (this.panelView()) {
+                case 'month': return `${y - 1}-12` >= min.slice(0, 7);
+                case 'year': return this.decadeStart() - 1 >= +min.slice(0, 4);
+                case 'decade': return this.centuryStart() - 1 >= +min.slice(0, 4);
+                default: return toIso$1(new Date(y, m, 0)) >= min; // ostatni dzień poprzedniego miesiąca
+            }
         }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "monthLabel" }] : /* istanbul ignore next */ []));
-        this.yearPageStart = computed(() => {
-            const y = this.view().y;
-            return y - (((y % 12) + 12) % 12);
+        ...(ngDevMode ? [{ debugName: "canPageBack" }] : /* istanbul ignore next */ []));
+        this.canPageForward = computed(() => {
+            const max = this.maxDate();
+            if (!max)
+                return true;
+            const { y, m } = this.view();
+            switch (this.panelView()) {
+                case 'month': return `${y + 1}-01` <= max.slice(0, 7);
+                case 'year': return this.decadeStart() + 10 <= +max.slice(0, 4);
+                case 'decade': return this.centuryStart() + 120 <= +max.slice(0, 4);
+                default: return toIso$1(new Date(y, m + 1, 1)) <= max;
+            }
         }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "yearPageStart" }] : /* istanbul ignore next */ []));
-        this.yearRangeLabel = computed(() => `${this.yearPageStart()} – ${this.yearPageStart() + 11}`, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "yearRangeLabel" }] : /* istanbul ignore next */ []));
+        ...(ngDevMode ? [{ debugName: "canPageForward" }] : /* istanbul ignore next */ []));
         /** Etykieta czasu na pasku trybu datetime (uwzględnia AM/PM). */
         this.timeBarLabel = computed(() => {
             const t = this.parseTime(this.timeStr());
@@ -3557,35 +3605,97 @@ class KptDatepicker {
             return weeks;
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "weeks" }] : /* istanbul ignore next */ []));
-        // ── Siatka miesięcy (tryby 'monthYear' / 'month') ──
+        /** Rok/miesiąc bieżącej wartości — zaznaczenie w siatkach wyższych poziomów. */
+        this.selectedYM = computed(() => {
+            const v = this.value();
+            switch (this.selectionMode()) {
+                case 'month': {
+                    const m = /^(\d{2})$/.exec(v);
+                    return { y: null, m: m ? +m[1] - 1 : null };
+                }
+                case 'year':
+                    return { y: /^\d{4}$/.test(v) ? +v : null, m: null };
+                case 'monthYear': {
+                    const m = /^(\d{4})-(\d{2})$/.exec(v);
+                    return m ? { y: +m[1], m: +m[2] - 1 } : { y: null, m: null };
+                }
+                case 'time':
+                    return { y: null, m: null };
+                default: {
+                    const d = this.parseDate(this.selectedDateIso());
+                    return d ? { y: d.getFullYear(), m: d.getMonth() } : { y: null, m: null };
+                }
+            }
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedYM" }] : /* istanbul ignore next */ []));
+        // ── Siatka miesięcy ──
         this.monthCells = computed(() => {
             const { y } = this.view();
-            const sel = this.value();
+            const sel = this.selectedYM();
             const isMonthOnly = this.selectionMode() === 'month';
             const numeric = this.monthDisplay() === 'number';
-            return this.months().map((name, i) => {
-                const mm = pad$1(i + 1);
-                const value = isMonthOnly ? mm : `${y}-${mm}`;
-                return {
-                    label: numeric ? mm : name,
-                    value,
-                    selected: sel === value,
-                    disabled: isMonthOnly ? false : this.isMonthYearDisabled(y, i),
-                };
-            });
+            const todayY = this.today.getFullYear();
+            const todayM = this.today.getMonth();
+            return this.months().map((name, i) => ({
+                label: numeric ? pad$1(i + 1) : name,
+                y,
+                m: i,
+                selected: sel.m === i && (isMonthOnly || sel.y === y),
+                current: todayM === i && (isMonthOnly || todayY === y),
+                disabled: isMonthOnly ? false : this.isMonthYearDisabled(y, i),
+            }));
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "monthCells" }] : /* istanbul ignore next */ []));
-        // ── Siatka lat (tryb 'year') ──
+        // ── Siatka lat (pełna dekada) ──
         this.yearCells = computed(() => {
-            const start = this.yearPageStart();
-            const sel = this.value();
-            return Array.from({ length: 12 }, (_, i) => {
+            const start = this.decadeStart();
+            const sel = this.selectedYM();
+            const todayY = this.today.getFullYear();
+            return Array.from({ length: 10 }, (_, i) => {
                 const year = start + i;
-                const value = String(year);
-                return { label: value, value, selected: sel === value, disabled: this.isYearDisabled(year) };
+                return {
+                    label: String(year),
+                    y: year,
+                    m: 0,
+                    selected: sel.y === year,
+                    current: todayY === year,
+                    disabled: this.isYearDisabled(year),
+                };
             });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "yearCells" }] : /* istanbul ignore next */ []));
+        // ── Siatka dekad (12 dekad = 120 lat) ──
+        this.decadeCells = computed(() => {
+            const start = this.centuryStart();
+            const sel = this.selectedYM();
+            const todayY = this.today.getFullYear();
+            return Array.from({ length: 12 }, (_, i) => {
+                const from = start + i * 10;
+                const to = from + 9;
+                return {
+                    label: `${from} – ${to}`,
+                    y: from,
+                    m: 0,
+                    selected: sel.y != null && sel.y >= from && sel.y <= to,
+                    current: todayY >= from && todayY <= to,
+                    // Dekada wypada z zakresu dopiero, gdy poza nim są oba jej krańce.
+                    disabled: this.isYearDisabled(from) && this.isYearDisabled(to),
+                };
+            });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "decadeCells" }] : /* istanbul ignore next */ []));
+        /** Komórki bieżącego poziomu — siatka miesięcy/lat/dekad ma jeden wspólny markup. */
+        this.levelCells = computed(() => {
+            switch (this.panelView()) {
+                case 'year':
+                    return this.yearCells();
+                case 'decade':
+                    return this.decadeCells();
+                default:
+                    return this.monthCells();
+            }
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "levelCells" }] : /* istanbul ignore next */ []));
         // Kalendarz może zostać otwarty także z zewnątrz (`[open]`), nie tylko klikiem w trigger —
         // widok i bufor czasu ustawiamy więc przy każdym otwarciu, nie w `toggleOpen()`.
         effect(() => {
@@ -3594,6 +3704,7 @@ class KptDatepicker {
                 if (!isOpen)
                     return;
                 this.view.set(this.initialView());
+                this.panelView.set(this.effectiveStartView());
                 this.syncTimeFromValue();
                 this.dtView.set(this.selectionMode() === 'time' ? 'clock' : 'calendar');
             });
@@ -3700,11 +3811,29 @@ class KptDatepicker {
         this.value.set(cell.iso);
         this.close();
     }
+    /**
+     * Klik w komórkę siatki: na poziomie zatwierdzania ustawia wartość i zamyka panel,
+     * wyżej — przestawia widok i schodzi poziom niżej.
+     */
     selectCell(cell) {
         if (cell.disabled)
             return;
-        this.value.set(cell.value);
-        this.close();
+        const level = this.panelView();
+        if (level === this.commitLevel()) {
+            this.value.set(level === 'year' ? String(cell.y) : this.monthValue(cell));
+            this.close();
+            return;
+        }
+        this.view.update(({ m }) => ({ y: cell.y, m: level === 'month' ? cell.m : m }));
+        this.panelView.set(LEVELS[LEVELS.indexOf(level) - 1]);
+    }
+    monthValue(cell) {
+        const mm = pad$1(cell.m + 1);
+        return this.selectionMode() === 'month' ? mm : `${cell.y}-${mm}`;
+    }
+    /** Klik w tytuł — wejście poziom wyżej w stosie widoków. */
+    goTo(level) {
+        this.panelView.set(level);
     }
     // ── Zegar (delegowany do kpt-clock przez timeStr) ──
     openClock() {
@@ -3725,23 +3854,33 @@ class KptDatepicker {
         }
         this.close();
     }
-    prevMonth() {
-        this.view.update(({ y, m }) => (m === 0 ? { y: y - 1, m: 11 } : { y, m: m - 1 }));
-    }
-    nextMonth() {
-        this.view.update(({ y, m }) => (m === 11 ? { y: y + 1, m: 0 } : { y, m: m + 1 }));
-    }
-    prevYear() {
-        this.view.update(({ y, m }) => ({ y: y - 1, m }));
-    }
-    nextYear() {
-        this.view.update(({ y, m }) => ({ y: y + 1, m }));
+    /** Strzałki ‹ › — krok zależny od poziomu: miesiąc, rok, dekada, strona dekad. */
+    page(dir) {
+        const level = this.panelView();
+        this.view.update(({ y, m }) => {
+            switch (level) {
+                case 'month':
+                    return { y: y + dir, m };
+                case 'year':
+                    return { y: y + dir * 10, m };
+                case 'decade':
+                    return { y: y + dir * 120, m };
+                default: {
+                    const next = m + dir;
+                    if (next < 0)
+                        return { y: y - 1, m: 11 };
+                    if (next > 11)
+                        return { y: y + 1, m: 0 };
+                    return { y, m: next };
+                }
+            }
+        });
     }
-    prevYearPage() {
-        this.view.update(({ y, m }) => ({ y: y - 12, m }));
+    pagePrev() {
+        this.page(-1);
     }
-    nextYearPage() {
-        this.view.update(({ y, m }) => ({ y: y + 12, m }));
+    pageNext() {
+        this.page(1);
     }
     clear(event) {
         event.stopPropagation();
@@ -3749,7 +3888,7 @@ class KptDatepicker {
         this.pendingDate.set('');
     }
     static { this.ɵfac = function KptDatepicker_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || KptDatepicker)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptDatepicker, selectors: [["kpt-datepicker"]], hostAttrs: [1, "kpt-datepicker-host"], inputs: { value: [1, "value"], disabled: [1, "disabled"], invalid: [1, "invalid"], touched: [1, "touched"], placeholder: [1, "placeholder"], ariaLabel: [1, "ariaLabel"], displayFormat: [1, "displayFormat"], selectionMode: [1, "selectionMode"], monthDisplay: [1, "monthDisplay"], hourFormat: [1, "hourFormat"], minuteStep: [1, "minuteStep"], minDate: [1, "minDate"], maxDate: [1, "maxDate"], open: [1, "open"] }, outputs: { value: "valueChange", touch: "touch", open: "openChange" }, decls: 8, vars: 15, consts: [["trigger", "cdkOverlayOrigin"], ["cdkOverlayOrigin", "", "role", "button", "tabindex", "0", 1, "kpt-datepicker", 3, "click", "keydown.enter", "blur"], [1, "kpt-datepicker__value"], [1, "kpt-datepicker__placeholder"], [1, "kpt-datepicker__spacer"], ["type", "button", 1, "kpt-datepicker__clear"], [1, "kpt-datepicker__icon", 3, "name"], ["cdkConnectedOverlay", "", "cdkConnectedOverlayBackdropClass", "cdk-overlay-transparent-backdrop", 3, "backdropClick", "detach", "cdkConnectedOverlayOrigin", "cdkConnectedOverlayOpen", "cdkConnectedOverlayPositions", "cdkConnectedOverlayHasBackdrop"], ["type", "button", 1, "kpt-datepicker__clear", 3, "click"], ["name", "x"], [1, "kpt-calendar", 3, "keydown.escape"], [3, "valueChange", "value", "hourFormat", "minuteStep"], [1, "kpt-calendar__footer"], ["size", "sm", 3, "click"], [1, "kpt-calendar__header"], ["type", "button", 1, "kpt-calendar__nav", 3, "click"], ["name", "chevron-left"], [1, "kpt-calendar__title"], ["name", "chevron-right"], [1, "kpt-calendar__weekdays"], [1, "kpt-calendar__weekday"], [1, "kpt-calendar__grid"], ["type", "button", 1, "kpt-calendar__timebar", 3, "click"], ["name", "clock"], ["type", "button", 1, "kpt-calendar__day", 3, "kpt-calendar__day--muted", "kpt-calendar__day--today", "kpt-calendar__day--selected", "disabled"], ["type", "button", 1, "kpt-calendar__day", 3, "click", "disabled"], [1, "kpt-calendar__grid", "kpt-calendar__grid--cells"], ["type", "button", 1, "kpt-calendar__cell", 3, "kpt-calendar__cell--selected", "disabled"], ["type", "button", 1, "kpt-calendar__cell", 3, "click", "disabled"], ["type", "button", 1, "kpt-calendar__cell", 3, "kpt-calendar__cell--selected"], ["type", "button", 1, "kpt-calendar__cell", 3, "click"]], template: function KptDatepicker_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptDatepicker, selectors: [["kpt-datepicker"]], hostAttrs: [1, "kpt-datepicker-host"], inputs: { value: [1, "value"], disabled: [1, "disabled"], invalid: [1, "invalid"], touched: [1, "touched"], placeholder: [1, "placeholder"], ariaLabel: [1, "ariaLabel"], displayFormat: [1, "displayFormat"], selectionMode: [1, "selectionMode"], startView: [1, "startView"], monthDisplay: [1, "monthDisplay"], hourFormat: [1, "hourFormat"], minuteStep: [1, "minuteStep"], minDate: [1, "minDate"], maxDate: [1, "maxDate"], open: [1, "open"] }, outputs: { value: "valueChange", touch: "touch", open: "openChange" }, decls: 8, vars: 15, consts: [["trigger", "cdkOverlayOrigin"], ["cdkOverlayOrigin", "", "role", "button", "tabindex", "0", 1, "kpt-datepicker", 3, "click", "keydown.enter", "blur"], [1, "kpt-datepicker__value"], [1, "kpt-datepicker__placeholder"], [1, "kpt-datepicker__spacer"], ["type", "button", 1, "kpt-datepicker__clear"], [1, "kpt-datepicker__icon", 3, "name"], ["cdkConnectedOverlay", "", "cdkConnectedOverlayBackdropClass", "cdk-overlay-transparent-backdrop", 3, "backdropClick", "detach", "cdkConnectedOverlayOrigin", "cdkConnectedOverlayOpen", "cdkConnectedOverlayPositions", "cdkConnectedOverlayHasBackdrop"], ["type", "button", 1, "kpt-datepicker__clear", 3, "click"], ["name", "x"], [1, "kpt-calendar", 3, "keydown.escape"], [1, "kpt-calendar__footer"], [1, "kpt-calendar__header"], [3, "valueChange", "value", "hourFormat", "minuteStep"], ["type", "button", 1, "kpt-calendar__nav", 3, "click"], ["name", "chevron-left"], [1, "kpt-calendar__title"], ["type", "button", 1, "kpt-calendar__nav", 3, "disabled"], [1, "kpt-calendar__titles"], ["type", "button", 1, "kpt-calendar__title-btn"], [1, "kpt-calendar__grid", "kpt-calendar__grid--cells", 3, "kpt-calendar__grid--decades"], ["type", "button", 1, "kpt-calendar__timebar"], ["type", "button", 1, "kpt-calendar__nav", 3, "click", "disabled"], ["type", "button", 1, "kpt-calendar__title-btn", 3, "click"], ["name", "chevron-right"], [1, "kpt-calendar__weekdays"], [1, "kpt-calendar__weekday"], [1, "kpt-calendar__grid"], ["type", "button", 1, "kpt-calendar__day", 3, "kpt-calendar__day--muted", "kpt-calendar__day--today", "kpt-calendar__day--selected", "disabled"], ["type", "button", 1, "kpt-calendar__day", 3, "click", "disabled"], [1, "kpt-calendar__grid", "kpt-calendar__grid--cells"], ["type", "button", 1, "kpt-calendar__cell", 3, "kpt-calendar__cell--selected", "kpt-calendar__cell--current", "disabled"], ["type", "button", 1, "kpt-calendar__cell", 3, "click", "disabled"], ["type", "button", 1, "kpt-calendar__timebar", 3, "click"], ["name", "clock"], ["size", "sm", 3, "click"]], template: function KptDatepicker_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 1, 0);
             i0.ɵɵlistener("click", function KptDatepicker_Template_div_click_0_listener() { return ctx.toggleOpen(); })("keydown.enter", function KptDatepicker_Template_div_keydown_enter_0_listener() { return ctx.toggleOpen(); })("blur", function KptDatepicker_Template_div_blur_0_listener() { return ctx.touch.emit(); });
             i0.ɵɵconditionalCreate(2, KptDatepicker_Conditional_2_Template, 2, 1, "span", 2)(3, KptDatepicker_Conditional_3_Template, 2, 1, "span", 3);
@@ -3757,10 +3896,10 @@ class KptDatepicker {
             i0.ɵɵconditionalCreate(5, KptDatepicker_Conditional_5_Template, 2, 1, "button", 5);
             i0.ɵɵelement(6, "kpt-icon", 6);
             i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(7, KptDatepicker_ng_template_7_Template, 7, 3, "ng-template", 7);
+            i0.ɵɵtemplate(7, KptDatepicker_ng_template_7_Template, 4, 4, "ng-template", 7);
             i0.ɵɵlistener("backdropClick", function KptDatepicker_Template_ng_template_backdropClick_7_listener() { return ctx.close(); })("detach", function KptDatepicker_Template_ng_template_detach_7_listener() { return ctx.close(); });
         } if (rf & 2) {
-            const trigger_r25 = i0.ɵɵreference(1);
+            const trigger_r19 = i0.ɵɵreference(1);
             i0.ɵɵclassProp("kpt-datepicker--open", ctx.open())("kpt-datepicker--disabled", ctx.disabled())("kpt-datepicker--invalid", ctx.showInvalid());
             i0.ɵɵattribute("aria-disabled", ctx.disabled() || null)("aria-label", ctx.ariaLabel());
             i0.ɵɵadvance(2);
@@ -3770,14 +3909,14 @@ class KptDatepicker {
             i0.ɵɵadvance();
             i0.ɵɵproperty("name", ctx.selectionMode() === "time" ? "clock" : "calendar");
             i0.ɵɵadvance();
-            i0.ɵɵproperty("cdkConnectedOverlayOrigin", trigger_r25)("cdkConnectedOverlayOpen", ctx.open())("cdkConnectedOverlayPositions", ctx.positions)("cdkConnectedOverlayHasBackdrop", true);
-        } }, dependencies: [CdkOverlayOrigin, CdkConnectedOverlay, KptIcon, KptButton, KptClock], styles: ["@layer kpt.components{.kpt-datepicker-host{display:block}.kpt-datepicker{display:flex;align-items:center;gap:var(--%NS%kpt-space-2, .5rem);height:2.5rem;padding-inline:var(--%NS%kpt-space-3, .75rem);box-sizing:border-box;border:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-form-field-border);border-radius:var(--%NS%kpt-form-field-radius, .5rem);background:var(--%NS%kpt-form-field-bg);color:var(--%NS%kpt-form-field-text);font-size:var(--%NS%kpt-font-size-sm, .875rem);cursor:pointer}.kpt-datepicker:hover:not(.kpt-datepicker--disabled){border-color:var(--%NS%kpt-form-field-border-hover)}.kpt-datepicker:focus-visible,.kpt-datepicker.kpt-datepicker--open{outline:none;border-color:var(--%NS%kpt-form-field-border-focus);box-shadow:0 0 0 2px color-mix(in oklch,var(--%NS%kpt-form-field-border-focus) 30%,transparent)}.kpt-datepicker.kpt-datepicker--invalid{border-color:var(--%NS%kpt-form-field-border-error)}.kpt-datepicker.kpt-datepicker--disabled{cursor:not-allowed;opacity:.6;background:var(--%NS%kpt-color-surface-variant)}.kpt-datepicker__placeholder{color:var(--%NS%kpt-form-field-placeholder)}.kpt-datepicker__spacer{flex:1}.kpt-datepicker__icon{color:var(--%NS%kpt-color-on-surface-muted)}.kpt-datepicker__clear{display:inline-flex;border:0;background:none;cursor:pointer;color:var(--%NS%kpt-color-on-surface-muted);padding:0}.kpt-datepicker__clear:hover{color:var(--%NS%kpt-color-on-surface)}.kpt-calendar{width:17rem;padding:var(--%NS%kpt-space-3, .75rem);background:var(--%NS%kpt-color-surface-raised);border:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border);border-radius:var(--%NS%kpt-radius-md, .5rem);box-shadow:var(--%NS%kpt-elevation-3);color:var(--%NS%kpt-color-on-surface);font-size:var(--%NS%kpt-font-size-sm, .875rem)}.kpt-calendar__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--%NS%kpt-space-2, .5rem)}.kpt-calendar__title{font-weight:var(--%NS%kpt-font-weight-semibold, 600);text-transform:capitalize}.kpt-calendar__nav{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:0;border-radius:var(--%NS%kpt-radius-md, .5rem);background:none;color:var(--%NS%kpt-color-on-surface);cursor:pointer}.kpt-calendar__nav:hover{background:var(--%NS%kpt-color-muted)}.kpt-calendar__weekdays,.kpt-calendar__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.kpt-calendar__weekday{text-align:center;font-size:var(--%NS%kpt-font-size-xs, .75rem);color:var(--%NS%kpt-color-on-surface-muted);padding:.25rem 0}.kpt-calendar__day{aspect-ratio:1;border:0;border-radius:var(--%NS%kpt-radius-sm, .25rem);background:none;color:var(--%NS%kpt-color-on-surface);cursor:pointer;font:inherit}.kpt-calendar__day:hover:not(:disabled){background:var(--%NS%kpt-color-muted)}.kpt-calendar__day--muted{color:var(--%NS%kpt-color-on-surface-muted);opacity:.5}.kpt-calendar__day--today{box-shadow:inset 0 0 0 1px var(--%NS%kpt-color-border-strong)}.kpt-calendar__day--selected{background:var(--%NS%kpt-color-primary)!important;color:var(--%NS%kpt-color-on-primary)}.kpt-calendar__day:disabled{opacity:.3;cursor:not-allowed}.kpt-calendar__grid--cells{grid-template-columns:repeat(3,1fr);gap:4px}.kpt-calendar__cell{padding:.6rem .25rem;border:0;border-radius:var(--%NS%kpt-radius-sm, .25rem);background:none;color:var(--%NS%kpt-color-on-surface);cursor:pointer;font:inherit;text-transform:capitalize}.kpt-calendar__cell:hover:not(:disabled){background:var(--%NS%kpt-color-muted)}.kpt-calendar__cell--selected{background:var(--%NS%kpt-color-primary)!important;color:var(--%NS%kpt-color-on-primary)}.kpt-calendar__cell:disabled{opacity:.3;cursor:not-allowed}.kpt-calendar__timebar{display:flex;align-items:center;justify-content:center;gap:var(--%NS%kpt-space-2, .5rem);width:100%;margin-top:var(--%NS%kpt-space-2, .5rem);padding:var(--%NS%kpt-space-2, .5rem);border:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border);border-radius:var(--%NS%kpt-radius-md, .5rem);background:none;color:var(--%NS%kpt-color-on-surface);font:inherit;font-variant-numeric:tabular-nums;cursor:pointer}.kpt-calendar__timebar:hover{background:var(--%NS%kpt-color-muted)}.kpt-calendar__timebar kpt-icon{color:var(--%NS%kpt-color-on-surface-muted)}.kpt-calendar__footer{display:flex;justify-content:flex-end;margin-top:var(--%NS%kpt-space-3, .75rem)}.kpt-calendar--clock{width:16rem}}\n"], encapsulation: 2 }); }
+            i0.ɵɵproperty("cdkConnectedOverlayOrigin", trigger_r19)("cdkConnectedOverlayOpen", ctx.open())("cdkConnectedOverlayPositions", ctx.positions)("cdkConnectedOverlayHasBackdrop", true);
+        } }, dependencies: [CdkOverlayOrigin, CdkConnectedOverlay, KptIcon, KptButton, KptClock], styles: ["@layer kpt.components{.kpt-datepicker-host{display:block}.kpt-datepicker{display:flex;align-items:center;gap:var(--%NS%kpt-space-2, .5rem);height:2.5rem;padding-inline:var(--%NS%kpt-space-3, .75rem);box-sizing:border-box;border:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-form-field-border);border-radius:var(--%NS%kpt-form-field-radius, .5rem);background:var(--%NS%kpt-form-field-bg);color:var(--%NS%kpt-form-field-text);font-size:var(--%NS%kpt-font-size-sm, .875rem);cursor:pointer}.kpt-datepicker:hover:not(.kpt-datepicker--disabled){border-color:var(--%NS%kpt-form-field-border-hover)}.kpt-datepicker:focus-visible,.kpt-datepicker.kpt-datepicker--open{outline:none;border-color:var(--%NS%kpt-form-field-border-focus);box-shadow:0 0 0 2px color-mix(in oklch,var(--%NS%kpt-form-field-border-focus) 30%,transparent)}.kpt-datepicker.kpt-datepicker--invalid{border-color:var(--%NS%kpt-form-field-border-error)}.kpt-datepicker.kpt-datepicker--disabled{cursor:not-allowed;opacity:.6;background:var(--%NS%kpt-color-surface-variant)}.kpt-datepicker__placeholder{color:var(--%NS%kpt-form-field-placeholder)}.kpt-datepicker__spacer{flex:1}.kpt-datepicker__icon{color:var(--%NS%kpt-color-on-surface-muted)}.kpt-datepicker__clear{display:inline-flex;border:0;background:none;cursor:pointer;color:var(--%NS%kpt-color-on-surface-muted);padding:0}.kpt-datepicker__clear:hover{color:var(--%NS%kpt-color-on-surface)}.kpt-calendar{width:17rem;padding:var(--%NS%kpt-space-3, .75rem);background:var(--%NS%kpt-color-surface-raised);border:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border);border-radius:var(--%NS%kpt-radius-md, .5rem);box-shadow:var(--%NS%kpt-elevation-3);color:var(--%NS%kpt-color-on-surface);font-size:var(--%NS%kpt-font-size-sm, .875rem)}.kpt-calendar__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--%NS%kpt-space-2, .5rem)}.kpt-calendar__title{font-weight:var(--%NS%kpt-font-weight-semibold, 600);text-transform:capitalize}.kpt-calendar__titles{display:flex;align-items:center;gap:var(--%NS%kpt-space-1, .25rem)}.kpt-calendar__title-btn{padding:.25rem var(--%NS%kpt-space-2, .5rem);border:0;border-radius:var(--%NS%kpt-radius-sm, .25rem);background:var(--%NS%kpt-color-muted);color:var(--%NS%kpt-color-on-surface);font:inherit;font-weight:var(--%NS%kpt-font-weight-semibold, 600);text-transform:capitalize;cursor:pointer}.kpt-calendar__title-btn:hover{background:var(--%NS%kpt-color-muted-hover)}.kpt-calendar__title-btn:focus-visible{outline:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border-strong);outline-offset:1px}.kpt-calendar__nav{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:0;border-radius:var(--%NS%kpt-radius-md, .5rem);background:none;color:var(--%NS%kpt-color-on-surface);cursor:pointer}.kpt-calendar__nav:hover:not(:disabled){background:var(--%NS%kpt-color-muted)}.kpt-calendar__nav:disabled{opacity:.3;cursor:not-allowed}.kpt-calendar__weekdays,.kpt-calendar__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.kpt-calendar__weekday{text-align:center;font-size:var(--%NS%kpt-font-size-xs, .75rem);color:var(--%NS%kpt-color-on-surface-muted);padding:.25rem 0}.kpt-calendar__day{aspect-ratio:1;border:0;border-radius:var(--%NS%kpt-radius-sm, .25rem);background:none;color:var(--%NS%kpt-color-on-surface);cursor:pointer;font:inherit}.kpt-calendar__day:hover:not(:disabled){background:var(--%NS%kpt-color-muted)}.kpt-calendar__day--muted{color:var(--%NS%kpt-color-on-surface-muted);opacity:.5}.kpt-calendar__day--today{box-shadow:inset 0 0 0 1px var(--%NS%kpt-color-border-strong)}.kpt-calendar__day--selected{background:var(--%NS%kpt-color-primary)!important;color:var(--%NS%kpt-color-on-primary)}.kpt-calendar__day:disabled{opacity:.3;cursor:not-allowed}.kpt-calendar__grid--cells{grid-template-columns:repeat(3,1fr);gap:4px}.kpt-calendar__cell{padding:.6rem .25rem;border:0;border-radius:var(--%NS%kpt-radius-sm, .25rem);background:none;color:var(--%NS%kpt-color-on-surface);cursor:pointer;font:inherit;text-transform:capitalize}.kpt-calendar__cell:hover:not(:disabled){background:var(--%NS%kpt-color-muted)}.kpt-calendar__cell--current{box-shadow:inset 0 0 0 1px var(--%NS%kpt-color-border-strong)}.kpt-calendar__cell--selected{background:var(--%NS%kpt-color-primary)!important;color:var(--%NS%kpt-color-on-primary)}.kpt-calendar__cell:disabled{opacity:.3;cursor:not-allowed}.kpt-calendar__grid--decades .kpt-calendar__cell{padding-inline:0;font-size:var(--%NS%kpt-font-size-xs, .75rem);white-space:nowrap}.kpt-calendar__timebar{display:flex;align-items:center;justify-content:center;gap:var(--%NS%kpt-space-2, .5rem);width:100%;margin-top:var(--%NS%kpt-space-2, .5rem);padding:var(--%NS%kpt-space-2, .5rem);border:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border);border-radius:var(--%NS%kpt-radius-md, .5rem);background:none;color:var(--%NS%kpt-color-on-surface);font:inherit;font-variant-numeric:tabular-nums;cursor:pointer}.kpt-calendar__timebar:hover{background:var(--%NS%kpt-color-muted)}.kpt-calendar__timebar kpt-icon{color:var(--%NS%kpt-color-on-surface-muted)}.kpt-calendar__footer{display:flex;justify-content:flex-end;margin-top:var(--%NS%kpt-space-3, .75rem)}.kpt-calendar--clock{width:16rem}}\n"], encapsulation: 2 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(KptDatepicker, [{
         type: Component,
-        args: [{ selector: 'kpt-datepicker', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [CdkOverlayOrigin, CdkConnectedOverlay, KptIcon, KptButton, KptClock], host: { class: 'kpt-datepicker-host' }, template: "<div\n  class=\"kpt-datepicker\"\n  cdkOverlayOrigin\n  #trigger=\"cdkOverlayOrigin\"\n  role=\"button\"\n  tabindex=\"0\"\n  [class.kpt-datepicker--open]=\"open()\"\n  [class.kpt-datepicker--disabled]=\"disabled()\"\n  [class.kpt-datepicker--invalid]=\"showInvalid()\"\n  [attr.aria-disabled]=\"disabled() || null\"\n  [attr.aria-label]=\"ariaLabel()\"\n  (click)=\"toggleOpen()\"\n  (keydown.enter)=\"toggleOpen()\"\n  (blur)=\"touch.emit()\"\n>\n  @if (display()) {\n    <span class=\"kpt-datepicker__value\">{{ display() }}</span>\n  } @else {\n    <span class=\"kpt-datepicker__placeholder\">{{ effectivePlaceholder() }}</span>\n  }\n  <span class=\"kpt-datepicker__spacer\"></span>\n  @if (display()) {\n    <button type=\"button\" class=\"kpt-datepicker__clear\" (click)=\"clear($event)\" [attr.aria-label]=\"i18n.t('common.clear')\"><kpt-icon name=\"x\" /></button>\n  }\n  <kpt-icon\n    class=\"kpt-datepicker__icon\"\n    [name]=\"selectionMode() === 'time' ? 'clock' : 'calendar'\"\n  />\n</div>\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"open()\"\n  [cdkConnectedOverlayPositions]=\"positions\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  (backdropClick)=\"close()\"\n  (detach)=\"close()\"\n>\n  <div class=\"kpt-calendar\" [class.kpt-calendar--clock]=\"selectionMode() === 'time' || (selectionMode() === 'datetime' && dtView() === 'clock')\" (keydown.escape)=\"close()\">\n    @switch (selectionMode()) {\n      @case ('time') {\n        <kpt-clock [(value)]=\"timeStr\" [hourFormat]=\"hourFormat()\" [minuteStep]=\"minuteStep()\" />\n        <div class=\"kpt-calendar__footer\">\n          <kpt-button size=\"sm\" (click)=\"commit()\">{{ i18n.t('common.done') }}</kpt-button>\n        </div>\n      }\n      @case ('datetime') {\n        @if (dtView() === 'calendar') {\n          <div class=\"kpt-calendar__header\">\n            <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"prevMonth()\" [attr.aria-label]=\"i18n.t('datepicker.prevMonth')\"><kpt-icon name=\"chevron-left\" /></button>\n            <span class=\"kpt-calendar__title\">{{ monthLabel() }}</span>\n            <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"nextMonth()\" [attr.aria-label]=\"i18n.t('datepicker.nextMonth')\"><kpt-icon name=\"chevron-right\" /></button>\n          </div>\n          <div class=\"kpt-calendar__weekdays\">\n            @for (wd of weekdays(); track wd) {\n              <span class=\"kpt-calendar__weekday\">{{ wd }}</span>\n            }\n          </div>\n          <div class=\"kpt-calendar__grid\">\n            @for (week of weeks(); track $index) {\n              @for (cell of week; track cell.iso) {\n                <button\n                  type=\"button\"\n                  class=\"kpt-calendar__day\"\n                  [class.kpt-calendar__day--muted]=\"!cell.inMonth\"\n                  [class.kpt-calendar__day--today]=\"cell.today\"\n                  [class.kpt-calendar__day--selected]=\"cell.selected\"\n                  [disabled]=\"cell.disabled\"\n                  [attr.aria-pressed]=\"cell.selected\"\n                  (click)=\"selectDay(cell)\"\n                >{{ cell.day }}</button>\n              }\n            }\n          </div>\n          <button type=\"button\" class=\"kpt-calendar__timebar\" (click)=\"openClock()\">\n            <kpt-icon name=\"clock\" />\n            <span>{{ timeBarLabel() }}</span>\n          </button>\n        } @else {\n          <div class=\"kpt-calendar__header\">\n            <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"backToCalendar()\" [attr.aria-label]=\"i18n.t('datepicker.calendar')\"><kpt-icon name=\"chevron-left\" /></button>\n            <span class=\"kpt-calendar__title\">{{ i18n.t('datepicker.time') }}</span>\n          </div>\n          <kpt-clock [(value)]=\"timeStr\" [hourFormat]=\"hourFormat()\" [minuteStep]=\"minuteStep()\" />\n        }\n        <div class=\"kpt-calendar__footer\">\n          <kpt-button size=\"sm\" (click)=\"commit()\">{{ i18n.t('common.done') }}</kpt-button>\n        </div>\n      }\n      @case ('monthYear') {\n        <div class=\"kpt-calendar__header\">\n          <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"prevYear()\" [attr.aria-label]=\"i18n.t('datepicker.prevYear')\"><kpt-icon name=\"chevron-left\" /></button>\n          <span class=\"kpt-calendar__title\">{{ viewYear() }}</span>\n          <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"nextYear()\" [attr.aria-label]=\"i18n.t('datepicker.nextYear')\"><kpt-icon name=\"chevron-right\" /></button>\n        </div>\n        <div class=\"kpt-calendar__grid kpt-calendar__grid--cells\">\n          @for (cell of monthCells(); track cell.value) {\n            <button\n              type=\"button\"\n              class=\"kpt-calendar__cell\"\n              [class.kpt-calendar__cell--selected]=\"cell.selected\"\n              [disabled]=\"cell.disabled\"\n              [attr.aria-pressed]=\"cell.selected\"\n              (click)=\"selectCell(cell)\"\n            >{{ cell.label }}</button>\n          }\n        </div>\n      }\n      @case ('year') {\n        <div class=\"kpt-calendar__header\">\n          <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"prevYearPage()\" [attr.aria-label]=\"i18n.t('datepicker.prevYears')\"><kpt-icon name=\"chevron-left\" /></button>\n          <span class=\"kpt-calendar__title\">{{ yearRangeLabel() }}</span>\n          <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"nextYearPage()\" [attr.aria-label]=\"i18n.t('datepicker.nextYears')\"><kpt-icon name=\"chevron-right\" /></button>\n        </div>\n        <div class=\"kpt-calendar__grid kpt-calendar__grid--cells\">\n          @for (cell of yearCells(); track cell.value) {\n            <button\n              type=\"button\"\n              class=\"kpt-calendar__cell\"\n              [class.kpt-calendar__cell--selected]=\"cell.selected\"\n              [disabled]=\"cell.disabled\"\n              [attr.aria-pressed]=\"cell.selected\"\n              (click)=\"selectCell(cell)\"\n            >{{ cell.label }}</button>\n          }\n        </div>\n      }\n      @case ('month') {\n        <div class=\"kpt-calendar__header\">\n          <span class=\"kpt-calendar__title\">{{ i18n.t('datepicker.month') }}</span>\n        </div>\n        <div class=\"kpt-calendar__grid kpt-calendar__grid--cells\">\n          @for (cell of monthCells(); track cell.value) {\n            <button\n              type=\"button\"\n              class=\"kpt-calendar__cell\"\n              [class.kpt-calendar__cell--selected]=\"cell.selected\"\n              [attr.aria-pressed]=\"cell.selected\"\n              (click)=\"selectCell(cell)\"\n            >{{ cell.label }}</button>\n          }\n        </div>\n      }\n      @default {\n        <div class=\"kpt-calendar__header\">\n          <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"prevMonth()\" [attr.aria-label]=\"i18n.t('datepicker.prevMonth')\"><kpt-icon name=\"chevron-left\" /></button>\n          <span class=\"kpt-calendar__title\">{{ monthLabel() }}</span>\n          <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"nextMonth()\" [attr.aria-label]=\"i18n.t('datepicker.nextMonth')\"><kpt-icon name=\"chevron-right\" /></button>\n        </div>\n        <div class=\"kpt-calendar__weekdays\">\n          @for (wd of weekdays(); track wd) {\n            <span class=\"kpt-calendar__weekday\">{{ wd }}</span>\n          }\n        </div>\n        <div class=\"kpt-calendar__grid\">\n          @for (week of weeks(); track $index) {\n            @for (cell of week; track cell.iso) {\n              <button\n                type=\"button\"\n                class=\"kpt-calendar__day\"\n                [class.kpt-calendar__day--muted]=\"!cell.inMonth\"\n                [class.kpt-calendar__day--today]=\"cell.today\"\n                [class.kpt-calendar__day--selected]=\"cell.selected\"\n                [disabled]=\"cell.disabled\"\n                [attr.aria-pressed]=\"cell.selected\"\n                (click)=\"selectDay(cell)\"\n              >{{ cell.day }}</button>\n            }\n          }\n        </div>\n      }\n    }\n  </div>\n</ng-template>\n", styles: ["@layer kpt.components{.kpt-datepicker-host{display:block}.kpt-datepicker{display:flex;align-items:center;gap:var(--kpt-space-2, .5rem);height:2.5rem;padding-inline:var(--kpt-space-3, .75rem);box-sizing:border-box;border:var(--kpt-border-width-thin, 1px) solid var(--kpt-form-field-border);border-radius:var(--kpt-form-field-radius, .5rem);background:var(--kpt-form-field-bg);color:var(--kpt-form-field-text);font-size:var(--kpt-font-size-sm, .875rem);cursor:pointer}.kpt-datepicker:hover:not(.kpt-datepicker--disabled){border-color:var(--kpt-form-field-border-hover)}.kpt-datepicker:focus-visible,.kpt-datepicker.kpt-datepicker--open{outline:none;border-color:var(--kpt-form-field-border-focus);box-shadow:0 0 0 2px color-mix(in oklch,var(--kpt-form-field-border-focus) 30%,transparent)}.kpt-datepicker.kpt-datepicker--invalid{border-color:var(--kpt-form-field-border-error)}.kpt-datepicker.kpt-datepicker--disabled{cursor:not-allowed;opacity:.6;background:var(--kpt-color-surface-variant)}.kpt-datepicker__placeholder{color:var(--kpt-form-field-placeholder)}.kpt-datepicker__spacer{flex:1}.kpt-datepicker__icon{color:var(--kpt-color-on-surface-muted)}.kpt-datepicker__clear{display:inline-flex;border:0;background:none;cursor:pointer;color:var(--kpt-color-on-surface-muted);padding:0}.kpt-datepicker__clear:hover{color:var(--kpt-color-on-surface)}.kpt-calendar{width:17rem;padding:var(--kpt-space-3, .75rem);background:var(--kpt-color-surface-raised);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);box-shadow:var(--kpt-elevation-3);color:var(--kpt-color-on-surface);font-size:var(--kpt-font-size-sm, .875rem)}.kpt-calendar__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--kpt-space-2, .5rem)}.kpt-calendar__title{font-weight:var(--kpt-font-weight-semibold, 600);text-transform:capitalize}.kpt-calendar__nav{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:0;border-radius:var(--kpt-radius-md, .5rem);background:none;color:var(--kpt-color-on-surface);cursor:pointer}.kpt-calendar__nav:hover{background:var(--kpt-color-muted)}.kpt-calendar__weekdays,.kpt-calendar__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.kpt-calendar__weekday{text-align:center;font-size:var(--kpt-font-size-xs, .75rem);color:var(--kpt-color-on-surface-muted);padding:.25rem 0}.kpt-calendar__day{aspect-ratio:1;border:0;border-radius:var(--kpt-radius-sm, .25rem);background:none;color:var(--kpt-color-on-surface);cursor:pointer;font:inherit}.kpt-calendar__day:hover:not(:disabled){background:var(--kpt-color-muted)}.kpt-calendar__day--muted{color:var(--kpt-color-on-surface-muted);opacity:.5}.kpt-calendar__day--today{box-shadow:inset 0 0 0 1px var(--kpt-color-border-strong)}.kpt-calendar__day--selected{background:var(--kpt-color-primary)!important;color:var(--kpt-color-on-primary)}.kpt-calendar__day:disabled{opacity:.3;cursor:not-allowed}.kpt-calendar__grid--cells{grid-template-columns:repeat(3,1fr);gap:4px}.kpt-calendar__cell{padding:.6rem .25rem;border:0;border-radius:var(--kpt-radius-sm, .25rem);background:none;color:var(--kpt-color-on-surface);cursor:pointer;font:inherit;text-transform:capitalize}.kpt-calendar__cell:hover:not(:disabled){background:var(--kpt-color-muted)}.kpt-calendar__cell--selected{background:var(--kpt-color-primary)!important;color:var(--kpt-color-on-primary)}.kpt-calendar__cell:disabled{opacity:.3;cursor:not-allowed}.kpt-calendar__timebar{display:flex;align-items:center;justify-content:center;gap:var(--kpt-space-2, .5rem);width:100%;margin-top:var(--kpt-space-2, .5rem);padding:var(--kpt-space-2, .5rem);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);background:none;color:var(--kpt-color-on-surface);font:inherit;font-variant-numeric:tabular-nums;cursor:pointer}.kpt-calendar__timebar:hover{background:var(--kpt-color-muted)}.kpt-calendar__timebar kpt-icon{color:var(--kpt-color-on-surface-muted)}.kpt-calendar__footer{display:flex;justify-content:flex-end;margin-top:var(--kpt-space-3, .75rem)}.kpt-calendar--clock{width:16rem}}\n"] }]
-    }], () => [], { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], displayFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayFormat", required: false }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], monthDisplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "monthDisplay", required: false }] }], hourFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "hourFormat", required: false }] }], minuteStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteStep", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptDatepicker, { className: "KptDatepicker", filePath: "lib/datepicker/datepicker.component.ts", lineNumber: 68 }); })();
+        args: [{ selector: 'kpt-datepicker', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [CdkOverlayOrigin, CdkConnectedOverlay, KptIcon, KptButton, KptClock], host: { class: 'kpt-datepicker-host' }, template: "<div\n  class=\"kpt-datepicker\"\n  cdkOverlayOrigin\n  #trigger=\"cdkOverlayOrigin\"\n  role=\"button\"\n  tabindex=\"0\"\n  [class.kpt-datepicker--open]=\"open()\"\n  [class.kpt-datepicker--disabled]=\"disabled()\"\n  [class.kpt-datepicker--invalid]=\"showInvalid()\"\n  [attr.aria-disabled]=\"disabled() || null\"\n  [attr.aria-label]=\"ariaLabel()\"\n  (click)=\"toggleOpen()\"\n  (keydown.enter)=\"toggleOpen()\"\n  (blur)=\"touch.emit()\"\n>\n  @if (display()) {\n    <span class=\"kpt-datepicker__value\">{{ display() }}</span>\n  } @else {\n    <span class=\"kpt-datepicker__placeholder\">{{ effectivePlaceholder() }}</span>\n  }\n  <span class=\"kpt-datepicker__spacer\"></span>\n  @if (display()) {\n    <button type=\"button\" class=\"kpt-datepicker__clear\" (click)=\"clear($event)\" [attr.aria-label]=\"i18n.t('common.clear')\"><kpt-icon name=\"x\" /></button>\n  }\n  <kpt-icon\n    class=\"kpt-datepicker__icon\"\n    [name]=\"selectionMode() === 'time' ? 'clock' : 'calendar'\"\n  />\n</div>\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"open()\"\n  [cdkConnectedOverlayPositions]=\"positions\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  (backdropClick)=\"close()\"\n  (detach)=\"close()\"\n>\n  <div class=\"kpt-calendar\" [class.kpt-calendar--clock]=\"showClock()\" (keydown.escape)=\"close()\">\n    @if (showClock()) {\n      @if (selectionMode() === 'datetime') {\n        <div class=\"kpt-calendar__header\">\n          <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"backToCalendar()\" [attr.aria-label]=\"i18n.t('datepicker.calendar')\"><kpt-icon name=\"chevron-left\" /></button>\n          <span class=\"kpt-calendar__title\">{{ i18n.t('datepicker.time') }}</span>\n        </div>\n      }\n      <kpt-clock [(value)]=\"timeStr\" [hourFormat]=\"hourFormat()\" [minuteStep]=\"minuteStep()\" />\n    } @else {\n      <!-- Nag\u0142\u00F3wek wsp\u00F3lny dla czterech poziom\u00F3w: r\u00F3\u017Cni je tylko tre\u015B\u0107 tytu\u0142u. -->\n      <div class=\"kpt-calendar__header\">\n        @if (hasNav()) {\n          <button type=\"button\" class=\"kpt-calendar__nav\" [disabled]=\"!canPageBack()\" (click)=\"pagePrev()\" [attr.aria-label]=\"navPrevLabel()\"><kpt-icon name=\"chevron-left\" /></button>\n        }\n        <span class=\"kpt-calendar__titles\">\n          @switch (panelView()) {\n            @case ('day') {\n              <button type=\"button\" class=\"kpt-calendar__title-btn\" (click)=\"goTo('month')\" [attr.aria-label]=\"i18n.t('datepicker.chooseMonth')\">{{ monthName() }}</button>\n              <button type=\"button\" class=\"kpt-calendar__title-btn\" (click)=\"goTo('year')\" [attr.aria-label]=\"i18n.t('datepicker.chooseYear')\">{{ viewYear() }}</button>\n            }\n            @case ('month') {\n              @if (selectionMode() === 'month') {\n                <span class=\"kpt-calendar__title\">{{ i18n.t('datepicker.month') }}</span>\n              } @else {\n                <button type=\"button\" class=\"kpt-calendar__title-btn\" (click)=\"goTo('year')\" [attr.aria-label]=\"i18n.t('datepicker.chooseYear')\">{{ viewYear() }}</button>\n              }\n            }\n            @case ('year') {\n              <button type=\"button\" class=\"kpt-calendar__title-btn\" (click)=\"goTo('decade')\" [attr.aria-label]=\"i18n.t('datepicker.chooseDecade')\">{{ yearRangeLabel() }}</button>\n            }\n            @case ('decade') {\n              <span class=\"kpt-calendar__title\">{{ decadeRangeLabel() }}</span>\n            }\n          }\n        </span>\n        @if (hasNav()) {\n          <button type=\"button\" class=\"kpt-calendar__nav\" [disabled]=\"!canPageForward()\" (click)=\"pageNext()\" [attr.aria-label]=\"navNextLabel()\"><kpt-icon name=\"chevron-right\" /></button>\n        }\n      </div>\n\n      @switch (panelView()) {\n        @case ('day') {\n          <div class=\"kpt-calendar__weekdays\">\n            @for (wd of weekdays(); track wd) {\n              <span class=\"kpt-calendar__weekday\">{{ wd }}</span>\n            }\n          </div>\n          <div class=\"kpt-calendar__grid\">\n            @for (week of weeks(); track $index) {\n              @for (cell of week; track cell.iso) {\n                <button\n                  type=\"button\"\n                  class=\"kpt-calendar__day\"\n                  [class.kpt-calendar__day--muted]=\"!cell.inMonth\"\n                  [class.kpt-calendar__day--today]=\"cell.today\"\n                  [class.kpt-calendar__day--selected]=\"cell.selected\"\n                  [disabled]=\"cell.disabled\"\n                  [attr.aria-pressed]=\"cell.selected\"\n                  (click)=\"selectDay(cell)\"\n                >{{ cell.day }}</button>\n              }\n            }\n          </div>\n        }\n        @default {\n          <div class=\"kpt-calendar__grid kpt-calendar__grid--cells\" [class.kpt-calendar__grid--decades]=\"panelView() === 'decade'\">\n            @for (cell of levelCells(); track cell.label) {\n              <button\n                type=\"button\"\n                class=\"kpt-calendar__cell\"\n                [class.kpt-calendar__cell--selected]=\"cell.selected\"\n                [class.kpt-calendar__cell--current]=\"cell.current\"\n                [disabled]=\"cell.disabled\"\n                [attr.aria-pressed]=\"cell.selected\"\n                (click)=\"selectCell(cell)\"\n              >{{ cell.label }}</button>\n            }\n          </div>\n        }\n      }\n\n      @if (selectionMode() === 'datetime') {\n        <button type=\"button\" class=\"kpt-calendar__timebar\" (click)=\"openClock()\">\n          <kpt-icon name=\"clock\" />\n          <span>{{ timeBarLabel() }}</span>\n        </button>\n      }\n    }\n    @if (hasFooter()) {\n      <div class=\"kpt-calendar__footer\">\n        <kpt-button size=\"sm\" (click)=\"commit()\">{{ i18n.t('common.done') }}</kpt-button>\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: ["@layer kpt.components{.kpt-datepicker-host{display:block}.kpt-datepicker{display:flex;align-items:center;gap:var(--kpt-space-2, .5rem);height:2.5rem;padding-inline:var(--kpt-space-3, .75rem);box-sizing:border-box;border:var(--kpt-border-width-thin, 1px) solid var(--kpt-form-field-border);border-radius:var(--kpt-form-field-radius, .5rem);background:var(--kpt-form-field-bg);color:var(--kpt-form-field-text);font-size:var(--kpt-font-size-sm, .875rem);cursor:pointer}.kpt-datepicker:hover:not(.kpt-datepicker--disabled){border-color:var(--kpt-form-field-border-hover)}.kpt-datepicker:focus-visible,.kpt-datepicker.kpt-datepicker--open{outline:none;border-color:var(--kpt-form-field-border-focus);box-shadow:0 0 0 2px color-mix(in oklch,var(--kpt-form-field-border-focus) 30%,transparent)}.kpt-datepicker.kpt-datepicker--invalid{border-color:var(--kpt-form-field-border-error)}.kpt-datepicker.kpt-datepicker--disabled{cursor:not-allowed;opacity:.6;background:var(--kpt-color-surface-variant)}.kpt-datepicker__placeholder{color:var(--kpt-form-field-placeholder)}.kpt-datepicker__spacer{flex:1}.kpt-datepicker__icon{color:var(--kpt-color-on-surface-muted)}.kpt-datepicker__clear{display:inline-flex;border:0;background:none;cursor:pointer;color:var(--kpt-color-on-surface-muted);padding:0}.kpt-datepicker__clear:hover{color:var(--kpt-color-on-surface)}.kpt-calendar{width:17rem;padding:var(--kpt-space-3, .75rem);background:var(--kpt-color-surface-raised);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);box-shadow:var(--kpt-elevation-3);color:var(--kpt-color-on-surface);font-size:var(--kpt-font-size-sm, .875rem)}.kpt-calendar__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--kpt-space-2, .5rem)}.kpt-calendar__title{font-weight:var(--kpt-font-weight-semibold, 600);text-transform:capitalize}.kpt-calendar__titles{display:flex;align-items:center;gap:var(--kpt-space-1, .25rem)}.kpt-calendar__title-btn{padding:.25rem var(--kpt-space-2, .5rem);border:0;border-radius:var(--kpt-radius-sm, .25rem);background:var(--kpt-color-muted);color:var(--kpt-color-on-surface);font:inherit;font-weight:var(--kpt-font-weight-semibold, 600);text-transform:capitalize;cursor:pointer}.kpt-calendar__title-btn:hover{background:var(--kpt-color-muted-hover)}.kpt-calendar__title-btn:focus-visible{outline:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border-strong);outline-offset:1px}.kpt-calendar__nav{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:0;border-radius:var(--kpt-radius-md, .5rem);background:none;color:var(--kpt-color-on-surface);cursor:pointer}.kpt-calendar__nav:hover:not(:disabled){background:var(--kpt-color-muted)}.kpt-calendar__nav:disabled{opacity:.3;cursor:not-allowed}.kpt-calendar__weekdays,.kpt-calendar__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.kpt-calendar__weekday{text-align:center;font-size:var(--kpt-font-size-xs, .75rem);color:var(--kpt-color-on-surface-muted);padding:.25rem 0}.kpt-calendar__day{aspect-ratio:1;border:0;border-radius:var(--kpt-radius-sm, .25rem);background:none;color:var(--kpt-color-on-surface);cursor:pointer;font:inherit}.kpt-calendar__day:hover:not(:disabled){background:var(--kpt-color-muted)}.kpt-calendar__day--muted{color:var(--kpt-color-on-surface-muted);opacity:.5}.kpt-calendar__day--today{box-shadow:inset 0 0 0 1px var(--kpt-color-border-strong)}.kpt-calendar__day--selected{background:var(--kpt-color-primary)!important;color:var(--kpt-color-on-primary)}.kpt-calendar__day:disabled{opacity:.3;cursor:not-allowed}.kpt-calendar__grid--cells{grid-template-columns:repeat(3,1fr);gap:4px}.kpt-calendar__cell{padding:.6rem .25rem;border:0;border-radius:var(--kpt-radius-sm, .25rem);background:none;color:var(--kpt-color-on-surface);cursor:pointer;font:inherit;text-transform:capitalize}.kpt-calendar__cell:hover:not(:disabled){background:var(--kpt-color-muted)}.kpt-calendar__cell--current{box-shadow:inset 0 0 0 1px var(--kpt-color-border-strong)}.kpt-calendar__cell--selected{background:var(--kpt-color-primary)!important;color:var(--kpt-color-on-primary)}.kpt-calendar__cell:disabled{opacity:.3;cursor:not-allowed}.kpt-calendar__grid--decades .kpt-calendar__cell{padding-inline:0;font-size:var(--kpt-font-size-xs, .75rem);white-space:nowrap}.kpt-calendar__timebar{display:flex;align-items:center;justify-content:center;gap:var(--kpt-space-2, .5rem);width:100%;margin-top:var(--kpt-space-2, .5rem);padding:var(--kpt-space-2, .5rem);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);background:none;color:var(--kpt-color-on-surface);font:inherit;font-variant-numeric:tabular-nums;cursor:pointer}.kpt-calendar__timebar:hover{background:var(--kpt-color-muted)}.kpt-calendar__timebar kpt-icon{color:var(--kpt-color-on-surface-muted)}.kpt-calendar__footer{display:flex;justify-content:flex-end;margin-top:var(--kpt-space-3, .75rem)}.kpt-calendar--clock{width:16rem}}\n"] }]
+    }], () => [], { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], displayFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayFormat", required: false }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], startView: [{ type: i0.Input, args: [{ isSignal: true, alias: "startView", required: false }] }], monthDisplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "monthDisplay", required: false }] }], hourFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "hourFormat", required: false }] }], minuteStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteStep", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptDatepicker, { className: "KptDatepicker", filePath: "lib/datepicker/datepicker.component.ts", lineNumber: 81 }); })();
 
 const _c0$u = ["ta"];
 /**
@@ -5879,7 +6018,8 @@ class KptColorPicker {
     }], null, { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], presets: [{ type: i0.Input, args: [{ isSignal: true, alias: "presets", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptColorPicker, { className: "KptColorPicker", filePath: "lib/color-picker/color-picker.component.ts", lineNumber: 52 }); })();
 
-const _forTrack0$5 = ($index, $item) => $item.iso;
+const _forTrack0$5 = ($index, $item) => $item.key;
+const _forTrack1$1 = ($index, $item) => $item.iso;
 function KptDateRange_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 2);
     i0.ɵɵtext(1);
@@ -5956,64 +6096,129 @@ function KptDateRange_ng_template_7_Conditional_1_Template(rf, ctx) { if (rf & 1
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate(ctx_r0.i18n.t("common.done"));
 } }
-function KptDateRange_ng_template_7_Conditional_2_For_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 23);
+function KptDateRange_ng_template_7_Conditional_2_For_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 26);
+    i0.ɵɵlistener("click", function KptDateRange_ng_template_7_Conditional_2_For_2_Conditional_2_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r7); const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.prevMonth()); });
+    i0.ɵɵelement(1, "kpt-icon", 27);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(4);
+    i0.ɵɵattribute("aria-label", ctx_r0.i18n.t("datepicker.prevMonth"));
+} }
+function KptDateRange_ng_template_7_Conditional_2_For_2_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "span", 21);
+} }
+function KptDateRange_ng_template_7_Conditional_2_For_2_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 26);
+    i0.ɵɵlistener("click", function KptDateRange_ng_template_7_Conditional_2_For_2_Conditional_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r8); const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.nextMonth()); });
+    i0.ɵɵelement(1, "kpt-icon", 28);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(4);
+    i0.ɵɵattribute("aria-label", ctx_r0.i18n.t("datepicker.nextMonth"));
+} }
+function KptDateRange_ng_template_7_Conditional_2_For_2_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "span", 21);
+} }
+function KptDateRange_ng_template_7_Conditional_2_For_2_For_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 24);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const wd_r8 = ctx.$implicit;
+    const wd_r9 = ctx.$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(wd_r8);
+    i0.ɵɵtextInterpolate(wd_r9);
 } }
-function KptDateRange_ng_template_7_Conditional_2_For_12_For_1_Template(rf, ctx) { if (rf & 1) {
-    const _r9 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 26);
-    i0.ɵɵlistener("click", function KptDateRange_ng_template_7_Conditional_2_For_12_For_1_Template_button_click_0_listener() { const cell_r10 = i0.ɵɵrestoreView(_r9).$implicit; const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.selectDay(cell_r10)); });
+function KptDateRange_ng_template_7_Conditional_2_For_2_For_13_For_1_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "span", 29);
+} }
+function KptDateRange_ng_template_7_Conditional_2_For_2_For_13_For_1_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    const _r10 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 31);
+    i0.ɵɵlistener("click", function KptDateRange_ng_template_7_Conditional_2_For_2_For_13_For_1_Conditional_1_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r10); const cell_r11 = i0.ɵɵnextContext().$implicit; const ctx_r0 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r0.selectDay(cell_r11)); });
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const cell_r10 = ctx.$implicit;
-    i0.ɵɵclassProp("kpt-calendar__day--muted", !cell_r10.inMonth)("kpt-calendar__day--range", cell_r10.inRange)("kpt-calendar__day--selected", cell_r10.isStart || cell_r10.isEnd);
+    const cell_r11 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵclassProp("kpt-calendar__day--muted", !cell_r11.inMonth)("kpt-calendar__day--today", cell_r11.today)("kpt-calendar__day--range", cell_r11.inRange)("kpt-calendar__day--range-start", cell_r11.rangeStart)("kpt-calendar__day--range-end", cell_r11.rangeEnd)("kpt-calendar__day--selected", cell_r11.isStart || cell_r11.isEnd);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(cell_r10.day);
+    i0.ɵɵtextInterpolate(cell_r11.day);
 } }
-function KptDateRange_ng_template_7_Conditional_2_For_12_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵrepeaterCreate(0, KptDateRange_ng_template_7_Conditional_2_For_12_For_1_Template, 2, 7, "button", 25, _forTrack0$5);
+function KptDateRange_ng_template_7_Conditional_2_For_2_For_13_For_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, KptDateRange_ng_template_7_Conditional_2_For_2_For_13_For_1_Conditional_0_Template, 1, 0, "span", 29)(1, KptDateRange_ng_template_7_Conditional_2_For_2_For_13_For_1_Conditional_1_Template, 2, 13, "button", 30);
 } if (rf & 2) {
-    const week_r11 = ctx.$implicit;
-    i0.ɵɵrepeater(week_r11);
+    const cell_r11 = ctx.$implicit;
+    i0.ɵɵconditional(cell_r11.blank ? 0 : 1);
 } }
-function KptDateRange_ng_template_7_Conditional_2_Conditional_13_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    const _r13 = i0.ɵɵgetCurrentView();
+function KptDateRange_ng_template_7_Conditional_2_For_2_For_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵrepeaterCreate(0, KptDateRange_ng_template_7_Conditional_2_For_2_For_13_For_1_Template, 2, 1, null, null, _forTrack1$1);
+} if (rf & 2) {
+    const week_r12 = ctx.$implicit;
+    i0.ɵɵrepeater(week_r12);
+} }
+function KptDateRange_ng_template_7_Conditional_2_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 18)(1, "div", 19);
+    i0.ɵɵconditionalCreate(2, KptDateRange_ng_template_7_Conditional_2_For_2_Conditional_2_Template, 2, 1, "button", 20)(3, KptDateRange_ng_template_7_Conditional_2_For_2_Conditional_3_Template, 1, 0, "span", 21);
+    i0.ɵɵelementStart(4, "span", 22);
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(6, KptDateRange_ng_template_7_Conditional_2_For_2_Conditional_6_Template, 2, 1, "button", 20)(7, KptDateRange_ng_template_7_Conditional_2_For_2_Conditional_7_Template, 1, 0, "span", 21);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(8, "div", 23);
+    i0.ɵɵrepeaterCreate(9, KptDateRange_ng_template_7_Conditional_2_For_2_For_10_Template, 2, 1, "span", 24, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(11, "div", 25);
+    i0.ɵɵrepeaterCreate(12, KptDateRange_ng_template_7_Conditional_2_For_2_For_13_Template, 2, 0, null, null, i0.ɵɵrepeaterTrackByIndex);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const panel_r13 = ctx.$implicit;
+    const ɵ$index_47_r14 = ctx.$index;
+    const ɵ$count_47_r15 = ctx.$count;
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ɵ$index_47_r14 === 0 ? 2 : 3);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(panel_r13.label);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ɵ$index_47_r14 === ɵ$count_47_r15 - 1 ? 6 : 7);
+    i0.ɵɵadvance(3);
+    i0.ɵɵrepeater(ctx_r0.weekdays());
+    i0.ɵɵadvance(3);
+    i0.ɵɵrepeater(panel_r13.weeks);
+} }
+function KptDateRange_ng_template_7_Conditional_2_Conditional_3_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    const _r17 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "kpt-clock", 16);
-    i0.ɵɵlistener("valueChange", function KptDateRange_ng_template_7_Conditional_2_Conditional_13_Conditional_5_Template_kpt_clock_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.startTime.set($event)); });
+    i0.ɵɵlistener("valueChange", function KptDateRange_ng_template_7_Conditional_2_Conditional_3_Conditional_5_Template_kpt_clock_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r17); const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.startTime.set($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(4);
     i0.ɵɵproperty("value", ctx_r0.startTime())("hourFormat", ctx_r0.hourFormat())("minuteStep", ctx_r0.minuteStep());
 } }
-function KptDateRange_ng_template_7_Conditional_2_Conditional_13_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    const _r14 = i0.ɵɵgetCurrentView();
+function KptDateRange_ng_template_7_Conditional_2_Conditional_3_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    const _r18 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "kpt-clock", 16);
-    i0.ɵɵlistener("valueChange", function KptDateRange_ng_template_7_Conditional_2_Conditional_13_Conditional_6_Template_kpt_clock_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r14); const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.endTime.set($event)); });
+    i0.ɵɵlistener("valueChange", function KptDateRange_ng_template_7_Conditional_2_Conditional_3_Conditional_6_Template_kpt_clock_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r18); const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.endTime.set($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(4);
     i0.ɵɵproperty("value", ctx_r0.endTime())("hourFormat", ctx_r0.hourFormat())("minuteStep", ctx_r0.minuteStep());
 } }
-function KptDateRange_ng_template_7_Conditional_2_Conditional_13_Template(rf, ctx) { if (rf & 1) {
-    const _r12 = i0.ɵɵgetCurrentView();
+function KptDateRange_ng_template_7_Conditional_2_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    const _r16 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 11)(1, "button", 12);
-    i0.ɵɵlistener("click", function KptDateRange_ng_template_7_Conditional_2_Conditional_13_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r12); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.timeEnd.set("start")); });
+    i0.ɵɵlistener("click", function KptDateRange_ng_template_7_Conditional_2_Conditional_3_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r16); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.timeEnd.set("start")); });
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(3, "button", 12);
-    i0.ɵɵlistener("click", function KptDateRange_ng_template_7_Conditional_2_Conditional_13_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r12); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.timeEnd.set("end")); });
+    i0.ɵɵlistener("click", function KptDateRange_ng_template_7_Conditional_2_Conditional_3_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r16); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.timeEnd.set("end")); });
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(5, KptDateRange_ng_template_7_Conditional_2_Conditional_13_Conditional_5_Template, 1, 3, "kpt-clock", 13)(6, KptDateRange_ng_template_7_Conditional_2_Conditional_13_Conditional_6_Template, 1, 3, "kpt-clock", 13);
+    i0.ɵɵconditionalCreate(5, KptDateRange_ng_template_7_Conditional_2_Conditional_3_Conditional_5_Template, 1, 3, "kpt-clock", 13)(6, KptDateRange_ng_template_7_Conditional_2_Conditional_3_Conditional_6_Template, 1, 3, "kpt-clock", 13);
     i0.ɵɵelementStart(7, "div", 14)(8, "kpt-button", 15);
-    i0.ɵɵlistener("click", function KptDateRange_ng_template_7_Conditional_2_Conditional_13_Template_kpt_button_click_8_listener() { i0.ɵɵrestoreView(_r12); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.commit()); });
+    i0.ɵɵlistener("click", function KptDateRange_ng_template_7_Conditional_2_Conditional_3_Template_kpt_button_click_8_listener() { i0.ɵɵrestoreView(_r16); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.commit()); });
     i0.ɵɵtext(9);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -6032,49 +6237,26 @@ function KptDateRange_ng_template_7_Conditional_2_Conditional_13_Template(rf, ct
     i0.ɵɵtextInterpolate(ctx_r0.i18n.t("common.done"));
 } }
 function KptDateRange_ng_template_7_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 17)(1, "button", 18);
-    i0.ɵɵlistener("click", function KptDateRange_ng_template_7_Conditional_2_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r7); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.prevMonth()); });
-    i0.ɵɵelement(2, "kpt-icon", 19);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 20);
-    i0.ɵɵtext(4);
+    i0.ɵɵelementStart(0, "div", 17);
+    i0.ɵɵrepeaterCreate(1, KptDateRange_ng_template_7_Conditional_2_For_2_Template, 14, 3, "div", 18, _forTrack0$5);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "button", 18);
-    i0.ɵɵlistener("click", function KptDateRange_ng_template_7_Conditional_2_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r7); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.nextMonth()); });
-    i0.ɵɵelement(6, "kpt-icon", 21);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(7, "div", 22);
-    i0.ɵɵrepeaterCreate(8, KptDateRange_ng_template_7_Conditional_2_For_9_Template, 2, 1, "span", 23, i0.ɵɵrepeaterTrackByIdentity);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "div", 24);
-    i0.ɵɵrepeaterCreate(11, KptDateRange_ng_template_7_Conditional_2_For_12_Template, 2, 0, null, null, i0.ɵɵrepeaterTrackByIndex);
-    i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(13, KptDateRange_ng_template_7_Conditional_2_Conditional_13_Template, 10, 8);
+    i0.ɵɵconditionalCreate(3, KptDateRange_ng_template_7_Conditional_2_Conditional_3_Template, 10, 8);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵattribute("aria-label", ctx_r0.i18n.t("datepicker.prevMonth"));
-    i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(ctx_r0.monthLabel());
-    i0.ɵɵadvance();
-    i0.ɵɵattribute("aria-label", ctx_r0.i18n.t("datepicker.nextMonth"));
-    i0.ɵɵadvance(3);
-    i0.ɵɵrepeater(ctx_r0.weekdays());
-    i0.ɵɵadvance(3);
-    i0.ɵɵrepeater(ctx_r0.weeks());
+    i0.ɵɵrepeater(ctx_r0.panels());
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r0.mode() === "datetime" ? 13 : -1);
+    i0.ɵɵconditional(ctx_r0.mode() === "datetime" ? 3 : -1);
 } }
 function KptDateRange_ng_template_7_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 10);
     i0.ɵɵlistener("keydown.escape", function KptDateRange_ng_template_7_Template_div_keydown_escape_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.close()); });
-    i0.ɵɵconditionalCreate(1, KptDateRange_ng_template_7_Conditional_1_Template, 10, 8)(2, KptDateRange_ng_template_7_Conditional_2_Template, 14, 4);
+    i0.ɵɵconditionalCreate(1, KptDateRange_ng_template_7_Conditional_1_Template, 10, 8)(2, KptDateRange_ng_template_7_Conditional_2_Template, 4, 1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵclassProp("kpt-calendar--clock", ctx_r0.mode() === "time");
+    i0.ɵɵclassProp("kpt-calendar--clock", ctx_r0.mode() === "time")("kpt-calendar--range", ctx_r0.mode() !== "time")("kpt-calendar--multi", ctx_r0.multi() && ctx_r0.mode() !== "time");
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r0.mode() === "time" ? 1 : 2);
 } }
@@ -6083,11 +6265,14 @@ const toIso = (d) => `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDat
 /**
  * Wybór zakresu dat z kalendarzem (CDK Overlay), Signal Forms.
  * `mode`: 'date' (domyślnie), 'datetime' (data+godzina, tarcza zegara), 'time' (sama godzina).
+ * `visibleMonths` pokazuje kilka miesięcy obok siebie (typowo 2) — zakres podświetla się
+ * ciągłym pasmem przez wszystkie panele.
  * Wartość: `{ start, end }` — daty 'RRRR-MM-DD', datetime 'RRRR-MM-DDTHH:mm', godziny 'HH:mm'.
  * Wymaga `import '@angular/cdk/overlay-prebuilt.css';`
  *
  * @example
  * <kpt-date-range [formField]="f.period" />
+ * <kpt-date-range [visibleMonths]="2" [(value)]="period" />
  * <kpt-date-range mode="datetime" [hourFormat]="12" [(value)]="span" />
  * <kpt-date-range mode="time" [(value)]="hours" />
  */
@@ -6109,6 +6294,8 @@ class KptDateRange {
         ...(ngDevMode ? [{ debugName: "displayFormat" }] : /* istanbul ignore next */ []));
         this.mode = input('date', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+        /** Liczba miesięcy obok siebie (1–3; domyślnie 1). Ignorowana w trybie 'time'. */
+        this.visibleMonths = input(1, { ...(ngDevMode ? { debugName: "visibleMonths" } : /* istanbul ignore next */ {}), transform: numberAttribute });
         this.hourFormat = input(24, { ...(ngDevMode ? { debugName: "hourFormat" } : /* istanbul ignore next */ {}), transform: numberAttribute });
         this.minuteStep = input(1, { ...(ngDevMode ? { debugName: "minuteStep" } : /* istanbul ignore next */ {}), transform: numberAttribute });
         this.i18n = inject(KptI18n);
@@ -6139,11 +6326,13 @@ class KptDateRange {
             { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4 },
             { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -4 },
         ];
-        this.monthLabel = computed(() => {
-            const { y, m } = this.view();
-            return `${this.months()[m]} ${y}`;
+        this.panelCount = computed(() => {
+            const n = Math.trunc(this.visibleMonths());
+            return Number.isFinite(n) ? Math.min(3, Math.max(1, n)) : 1;
         }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "monthLabel" }] : /* istanbul ignore next */ []));
+        ...(ngDevMode ? [{ debugName: "panelCount" }] : /* istanbul ignore next */ []));
+        this.multi = computed(() => this.panelCount() > 1, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "multi" }] : /* istanbul ignore next */ []));
         this.display = computed(() => {
             const { start, end } = this.value();
             if (!start)
@@ -6163,34 +6352,25 @@ class KptDateRange {
             return end ? `${this.fmtDate(start)} – ${this.fmtDate(end)}` : `${this.fmtDate(start)} – …`;
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "display" }] : /* istanbul ignore next */ []));
-        this.weeks = computed(() => {
+        /**
+         * Panele miesięcy. Przy kilku panelach dni sąsiednich miesięcy są wygaszane do pustych slotów:
+         * inaczej ta sama data byłaby klikalna dwa razy (jako „wyszarzona" w jednym panelu i właściwa
+         * w drugim) i pasmo zakresu malowałoby się w obu miejscach.
+         */
+        this.panels = computed(() => {
             const { y, m } = this.view();
-            const start = this.mode() === 'datetime' ? this.startDate() : this.value().start;
-            const end = this.mode() === 'datetime' ? this.endDate() : this.value().end;
-            const first = new Date(y, m, 1);
-            const startOffset = (first.getDay() + 6) % 7;
-            const gridStart = new Date(y, m, 1 - startOffset);
-            const weeks = [];
-            for (let w = 0; w < 6; w++) {
-                const row = [];
-                for (let d = 0; d < 7; d++) {
-                    const date = new Date(gridStart.getFullYear(), gridStart.getMonth(), gridStart.getDate() + w * 7 + d);
-                    const iso = toIso(date);
-                    row.push({
-                        day: date.getDate(),
-                        iso,
-                        inMonth: date.getMonth() === m,
-                        isStart: iso === start,
-                        isEnd: iso === end,
-                        inRange: !!start && !!end && iso > start && iso < end,
-                        disabled: false,
-                    });
-                }
-                weeks.push(row);
-            }
-            return weeks;
+            return Array.from({ length: this.panelCount() }, (_, i) => {
+                const first = new Date(y, m + i, 1);
+                const py = first.getFullYear();
+                const pm = first.getMonth();
+                return {
+                    key: `${py}-${pad(pm + 1)}`,
+                    label: `${this.months()[pm]} ${py}`,
+                    weeks: this.buildWeeks(py, pm),
+                };
+            });
         }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "weeks" }] : /* istanbul ignore next */ []));
+        ...(ngDevMode ? [{ debugName: "panels" }] : /* istanbul ignore next */ []));
     }
     datePart(v) {
         return v ? v.slice(0, 10) : '';
@@ -6216,6 +6396,41 @@ class KptDateRange {
         }
         return hhmm;
     }
+    buildWeeks(y, m) {
+        const datetime = this.mode() === 'datetime';
+        const start = datetime ? this.startDate() : this.value().start;
+        const end = datetime ? this.endDate() : this.value().end;
+        const hasBand = !!start && !!end && start < end;
+        const hideOutside = this.multi();
+        const todayIso = toIso(this.today);
+        const first = new Date(y, m, 1);
+        const startOffset = (first.getDay() + 6) % 7;
+        const gridStart = new Date(y, m, 1 - startOffset);
+        const weeks = [];
+        for (let w = 0; w < 6; w++) {
+            const row = [];
+            for (let d = 0; d < 7; d++) {
+                const date = new Date(gridStart.getFullYear(), gridStart.getMonth(), gridStart.getDate() + w * 7 + d);
+                const iso = toIso(date);
+                const inMonth = date.getMonth() === m;
+                row.push({
+                    day: date.getDate(),
+                    iso,
+                    inMonth,
+                    today: iso === todayIso,
+                    isStart: iso === start,
+                    isEnd: iso === end,
+                    inRange: hasBand && iso > start && iso < end,
+                    rangeStart: hasBand && iso === start,
+                    rangeEnd: hasBand && iso === end,
+                    blank: hideOutside && !inMonth,
+                    disabled: false,
+                });
+            }
+            weeks.push(row);
+        }
+        return weeks;
+    }
     toggleOpen() {
         if (this.disabled())
             return;
@@ -6245,6 +6460,8 @@ class KptDateRange {
         this.touch.emit();
     }
     selectDay(cell) {
+        if (cell.blank || cell.disabled)
+            return;
         if (this.mode() === 'datetime') {
             const start = this.startDate();
             const end = this.endDate();
@@ -6306,7 +6523,7 @@ class KptDateRange {
         this.endDate.set('');
     }
     static { this.ɵfac = function KptDateRange_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || KptDateRange)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptDateRange, selectors: [["kpt-date-range"]], hostAttrs: [1, "kpt-date-range-host"], inputs: { value: [1, "value"], disabled: [1, "disabled"], invalid: [1, "invalid"], touched: [1, "touched"], placeholder: [1, "placeholder"], displayFormat: [1, "displayFormat"], mode: [1, "mode"], hourFormat: [1, "hourFormat"], minuteStep: [1, "minuteStep"] }, outputs: { value: "valueChange", touch: "touch" }, decls: 8, vars: 12, consts: [["trigger", "cdkOverlayOrigin"], ["cdkOverlayOrigin", "", "role", "button", "tabindex", "0", 1, "kpt-date-range", 3, "click", "keydown.enter", "blur"], [1, "kpt-date-range__value"], [1, "kpt-date-range__placeholder"], [1, "kpt-date-range__spacer"], ["type", "button", 1, "kpt-date-range__clear"], ["name", "calendar", 1, "kpt-date-range__icon"], ["cdkConnectedOverlay", "", "cdkConnectedOverlayBackdropClass", "cdk-overlay-transparent-backdrop", 3, "backdropClick", "detach", "cdkConnectedOverlayOrigin", "cdkConnectedOverlayOpen", "cdkConnectedOverlayPositions", "cdkConnectedOverlayHasBackdrop"], ["type", "button", 1, "kpt-date-range__clear", 3, "click"], ["name", "x"], [1, "kpt-calendar", 3, "keydown.escape"], [1, "kpt-range-tabs"], ["type", "button", 3, "click"], [3, "value", "hourFormat", "minuteStep"], [1, "kpt-calendar__footer"], ["size", "sm", 3, "click"], [3, "valueChange", "value", "hourFormat", "minuteStep"], [1, "kpt-calendar__header"], ["type", "button", 1, "kpt-calendar__nav", 3, "click"], ["name", "chevron-left"], [1, "kpt-calendar__title"], ["name", "chevron-right"], [1, "kpt-calendar__weekdays"], [1, "kpt-calendar__weekday"], [1, "kpt-calendar__grid"], ["type", "button", 1, "kpt-calendar__day", 3, "kpt-calendar__day--muted", "kpt-calendar__day--range", "kpt-calendar__day--selected"], ["type", "button", 1, "kpt-calendar__day", 3, "click"]], template: function KptDateRange_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptDateRange, selectors: [["kpt-date-range"]], hostAttrs: [1, "kpt-date-range-host"], inputs: { value: [1, "value"], disabled: [1, "disabled"], invalid: [1, "invalid"], touched: [1, "touched"], placeholder: [1, "placeholder"], displayFormat: [1, "displayFormat"], mode: [1, "mode"], visibleMonths: [1, "visibleMonths"], hourFormat: [1, "hourFormat"], minuteStep: [1, "minuteStep"] }, outputs: { value: "valueChange", touch: "touch" }, decls: 8, vars: 12, consts: [["trigger", "cdkOverlayOrigin"], ["cdkOverlayOrigin", "", "role", "button", "tabindex", "0", 1, "kpt-date-range", 3, "click", "keydown.enter", "blur"], [1, "kpt-date-range__value"], [1, "kpt-date-range__placeholder"], [1, "kpt-date-range__spacer"], ["type", "button", 1, "kpt-date-range__clear"], ["name", "calendar", 1, "kpt-date-range__icon"], ["cdkConnectedOverlay", "", "cdkConnectedOverlayBackdropClass", "cdk-overlay-transparent-backdrop", 3, "backdropClick", "detach", "cdkConnectedOverlayOrigin", "cdkConnectedOverlayOpen", "cdkConnectedOverlayPositions", "cdkConnectedOverlayHasBackdrop"], ["type", "button", 1, "kpt-date-range__clear", 3, "click"], ["name", "x"], [1, "kpt-calendar", 3, "keydown.escape"], [1, "kpt-range-tabs"], ["type", "button", 3, "click"], [3, "value", "hourFormat", "minuteStep"], [1, "kpt-calendar__footer"], ["size", "sm", 3, "click"], [3, "valueChange", "value", "hourFormat", "minuteStep"], [1, "kpt-calendar__panels"], [1, "kpt-calendar__panel"], [1, "kpt-calendar__header"], ["type", "button", 1, "kpt-calendar__nav"], [1, "kpt-calendar__nav-slot"], [1, "kpt-calendar__title"], [1, "kpt-calendar__weekdays"], [1, "kpt-calendar__weekday"], [1, "kpt-calendar__grid"], ["type", "button", 1, "kpt-calendar__nav", 3, "click"], ["name", "chevron-left"], ["name", "chevron-right"], [1, "kpt-calendar__day", "kpt-calendar__day--blank"], ["type", "button", 1, "kpt-calendar__day", 3, "kpt-calendar__day--muted", "kpt-calendar__day--today", "kpt-calendar__day--range", "kpt-calendar__day--range-start", "kpt-calendar__day--range-end", "kpt-calendar__day--selected"], ["type", "button", 1, "kpt-calendar__day", 3, "click"]], template: function KptDateRange_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 1, 0);
             i0.ɵɵlistener("click", function KptDateRange_Template_div_click_0_listener() { return ctx.toggleOpen(); })("keydown.enter", function KptDateRange_Template_div_keydown_enter_0_listener() { return ctx.toggleOpen(); })("blur", function KptDateRange_Template_div_blur_0_listener() { return ctx.touch.emit(); });
             i0.ɵɵconditionalCreate(2, KptDateRange_Conditional_2_Template, 2, 1, "span", 2)(3, KptDateRange_Conditional_3_Template, 2, 1, "span", 3);
@@ -6314,24 +6531,24 @@ class KptDateRange {
             i0.ɵɵconditionalCreate(5, KptDateRange_Conditional_5_Template, 2, 1, "button", 5);
             i0.ɵɵelement(6, "kpt-icon", 6);
             i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(7, KptDateRange_ng_template_7_Template, 3, 3, "ng-template", 7);
+            i0.ɵɵtemplate(7, KptDateRange_ng_template_7_Template, 3, 7, "ng-template", 7);
             i0.ɵɵlistener("backdropClick", function KptDateRange_Template_ng_template_backdropClick_7_listener() { return ctx.close(); })("detach", function KptDateRange_Template_ng_template_detach_7_listener() { return ctx.close(); });
         } if (rf & 2) {
-            const trigger_r15 = i0.ɵɵreference(1);
+            const trigger_r19 = i0.ɵɵreference(1);
             i0.ɵɵclassProp("kpt-date-range--open", ctx.open())("kpt-date-range--disabled", ctx.disabled())("kpt-date-range--invalid", ctx.showInvalid());
             i0.ɵɵadvance(2);
             i0.ɵɵconditional(ctx.display() ? 2 : 3);
             i0.ɵɵadvance(3);
             i0.ɵɵconditional(ctx.display() ? 5 : -1);
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("cdkConnectedOverlayOrigin", trigger_r15)("cdkConnectedOverlayOpen", ctx.open())("cdkConnectedOverlayPositions", ctx.positions)("cdkConnectedOverlayHasBackdrop", true);
-        } }, dependencies: [CdkOverlayOrigin, CdkConnectedOverlay, KptIcon, KptButton, KptClock], styles: ["@layer kpt.components{.kpt-date-range-host{display:block}.kpt-date-range{display:flex;align-items:center;gap:var(--%NS%kpt-space-2, .5rem);height:2.5rem;padding-inline:var(--%NS%kpt-space-3, .75rem);box-sizing:border-box;border:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-form-field-border);border-radius:var(--%NS%kpt-form-field-radius, .5rem);background:var(--%NS%kpt-form-field-bg);color:var(--%NS%kpt-form-field-text);font-size:var(--%NS%kpt-font-size-sm, .875rem);cursor:pointer}.kpt-date-range:hover:not(.kpt-date-range--disabled){border-color:var(--%NS%kpt-form-field-border-hover)}.kpt-date-range:focus-visible,.kpt-date-range.kpt-date-range--open{outline:none;border-color:var(--%NS%kpt-form-field-border-focus);box-shadow:0 0 0 2px color-mix(in oklch,var(--%NS%kpt-form-field-border-focus) 30%,transparent)}.kpt-date-range.kpt-date-range--invalid{border-color:var(--%NS%kpt-form-field-border-error)}.kpt-date-range.kpt-date-range--disabled{cursor:not-allowed;opacity:.6;background:var(--%NS%kpt-color-surface-variant)}.kpt-date-range__placeholder{color:var(--%NS%kpt-form-field-placeholder)}.kpt-date-range__spacer{flex:1}.kpt-date-range__icon{color:var(--%NS%kpt-color-on-surface-muted)}.kpt-date-range__clear{display:inline-flex;border:0;background:none;cursor:pointer;padding:0;color:var(--%NS%kpt-color-on-surface-muted)}.kpt-date-range__clear:hover{color:var(--%NS%kpt-color-on-surface)}.kpt-calendar{width:17rem;padding:var(--%NS%kpt-space-3, .75rem);background:var(--%NS%kpt-color-surface-raised);border:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border);border-radius:var(--%NS%kpt-radius-md, .5rem);box-shadow:var(--%NS%kpt-elevation-3);color:var(--%NS%kpt-color-on-surface);font-size:var(--%NS%kpt-font-size-sm, .875rem)}.kpt-calendar__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--%NS%kpt-space-2, .5rem)}.kpt-calendar__title{font-weight:var(--%NS%kpt-font-weight-semibold, 600);text-transform:capitalize}.kpt-calendar__nav{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:0;border-radius:var(--%NS%kpt-radius-md, .5rem);background:none;color:var(--%NS%kpt-color-on-surface);cursor:pointer}.kpt-calendar__nav:hover{background:var(--%NS%kpt-color-muted)}.kpt-calendar__weekdays,.kpt-calendar__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.kpt-calendar__weekday{text-align:center;font-size:var(--%NS%kpt-font-size-xs, .75rem);color:var(--%NS%kpt-color-on-surface-muted);padding:.25rem 0}.kpt-calendar__day{aspect-ratio:1;border:0;border-radius:var(--%NS%kpt-radius-sm, .25rem);background:none;color:var(--%NS%kpt-color-on-surface);cursor:pointer;font:inherit}.kpt-calendar__day:hover:not(:disabled){background:var(--%NS%kpt-color-muted)}.kpt-calendar__day--muted{color:var(--%NS%kpt-color-on-surface-muted);opacity:.5}.kpt-calendar__day--range{background:color-mix(in oklch,var(--%NS%kpt-color-primary) 14%,transparent);border-radius:0}.kpt-calendar__day--selected{background:var(--%NS%kpt-color-primary)!important;color:var(--%NS%kpt-color-on-primary)}.kpt-calendar__footer{display:flex;justify-content:flex-end;margin-top:var(--%NS%kpt-space-3, .75rem)}.kpt-calendar--clock{width:16rem}.kpt-range-tabs{display:flex;gap:var(--%NS%kpt-space-1, .25rem);margin-block:var(--%NS%kpt-space-3, .75rem) var(--%NS%kpt-space-2, .5rem);padding:2px;background:var(--%NS%kpt-color-surface-variant);border-radius:var(--%NS%kpt-radius-md, .5rem)}.kpt-range-tabs button{flex:1;border:0;background:none;padding:var(--%NS%kpt-space-1, .25rem) var(--%NS%kpt-space-2, .5rem);border-radius:var(--%NS%kpt-radius-sm, .25rem);color:var(--%NS%kpt-color-on-surface-muted);font:inherit;font-size:var(--%NS%kpt-font-size-sm, .875rem);cursor:pointer}.kpt-range-tabs button.is-active{background:var(--%NS%kpt-color-surface-raised);color:var(--%NS%kpt-color-on-surface);font-weight:var(--%NS%kpt-font-weight-medium, 500);box-shadow:var(--%NS%kpt-elevation-1)}}\n"], encapsulation: 2 }); }
+            i0.ɵɵproperty("cdkConnectedOverlayOrigin", trigger_r19)("cdkConnectedOverlayOpen", ctx.open())("cdkConnectedOverlayPositions", ctx.positions)("cdkConnectedOverlayHasBackdrop", true);
+        } }, dependencies: [CdkOverlayOrigin, CdkConnectedOverlay, KptIcon, KptButton, KptClock], styles: ["@charset \"UTF-8\";@layer kpt.components{.kpt-date-range-host{display:block}.kpt-date-range{display:flex;align-items:center;gap:var(--%NS%kpt-space-2, .5rem);height:2.5rem;padding-inline:var(--%NS%kpt-space-3, .75rem);box-sizing:border-box;border:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-form-field-border);border-radius:var(--%NS%kpt-form-field-radius, .5rem);background:var(--%NS%kpt-form-field-bg);color:var(--%NS%kpt-form-field-text);font-size:var(--%NS%kpt-font-size-sm, .875rem);cursor:pointer}.kpt-date-range:hover:not(.kpt-date-range--disabled){border-color:var(--%NS%kpt-form-field-border-hover)}.kpt-date-range:focus-visible,.kpt-date-range.kpt-date-range--open{outline:none;border-color:var(--%NS%kpt-form-field-border-focus);box-shadow:0 0 0 2px color-mix(in oklch,var(--%NS%kpt-form-field-border-focus) 30%,transparent)}.kpt-date-range.kpt-date-range--invalid{border-color:var(--%NS%kpt-form-field-border-error)}.kpt-date-range.kpt-date-range--disabled{cursor:not-allowed;opacity:.6;background:var(--%NS%kpt-color-surface-variant)}.kpt-date-range__placeholder{color:var(--%NS%kpt-form-field-placeholder)}.kpt-date-range__spacer{flex:1}.kpt-date-range__icon{color:var(--%NS%kpt-color-on-surface-muted)}.kpt-date-range__clear{display:inline-flex;border:0;background:none;cursor:pointer;padding:0;color:var(--%NS%kpt-color-on-surface-muted)}.kpt-date-range__clear:hover{color:var(--%NS%kpt-color-on-surface)}.kpt-calendar{width:17rem;padding:var(--%NS%kpt-space-3, .75rem);background:var(--%NS%kpt-color-surface-raised);border:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border);border-radius:var(--%NS%kpt-radius-md, .5rem);box-shadow:var(--%NS%kpt-elevation-3);color:var(--%NS%kpt-color-on-surface);font-size:var(--%NS%kpt-font-size-sm, .875rem)}.kpt-calendar__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--%NS%kpt-space-2, .5rem)}.kpt-calendar__title{font-weight:var(--%NS%kpt-font-weight-semibold, 600);text-transform:capitalize}.kpt-calendar__nav{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:0;border-radius:var(--%NS%kpt-radius-md, .5rem);background:none;color:var(--%NS%kpt-color-on-surface);cursor:pointer}.kpt-calendar__nav:hover{background:var(--%NS%kpt-color-muted)}.kpt-calendar__nav-slot{width:2rem;height:2rem}.kpt-calendar__panels{display:flex;flex-wrap:wrap;gap:var(--%NS%kpt-space-4, 1rem)}.kpt-calendar__panel{flex:none;width:15.5rem}.kpt-calendar__weekdays,.kpt-calendar__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.kpt-calendar__weekday{text-align:center;font-size:var(--%NS%kpt-font-size-xs, .75rem);color:var(--%NS%kpt-color-on-surface-muted);padding:.25rem 0}.kpt-calendar__day{position:relative;isolation:isolate;aspect-ratio:1;border:0;border-radius:var(--%NS%kpt-radius-sm, .25rem);background:none;color:var(--%NS%kpt-color-on-surface);cursor:pointer;font:inherit}.kpt-calendar__day:hover:not(:disabled){background:var(--%NS%kpt-color-muted)}.kpt-calendar__day--muted{color:var(--%NS%kpt-color-on-surface-muted);opacity:.5}.kpt-calendar__day--blank{cursor:default;pointer-events:none}.kpt-calendar__day--today{box-shadow:inset 0 0 0 1px var(--%NS%kpt-color-border-strong)}.kpt-calendar__day--selected{background:var(--%NS%kpt-color-primary)!important;color:var(--%NS%kpt-color-on-primary)}.kpt-calendar__footer{display:flex;justify-content:flex-end;margin-top:var(--%NS%kpt-space-3, .75rem)}.kpt-calendar--clock{width:16rem}.kpt-calendar--multi{width:auto;max-width:calc(100vw - 2rem)}.kpt-calendar--range .kpt-calendar__day--%NS%range:before,.kpt-calendar--range .kpt-calendar__day--%NS%range-start:before,.kpt-calendar--range .kpt-calendar__day--%NS%range-end:before{content:\"\";position:absolute;inset-block:0;inset-inline:-1px;z-index:-2;background:color-mix(in oklch,var(--%NS%kpt-color-primary) 14%,transparent)}.kpt-calendar--range .kpt-calendar__day--%NS%range-start:before{inset-inline-start:50%}.kpt-calendar--range .kpt-calendar__day--%NS%range-end:before{inset-inline-end:50%}.kpt-calendar--range .kpt-calendar__day--selected{background:none!important;color:var(--%NS%kpt-color-on-primary)}.kpt-calendar--range .kpt-calendar__day--%NS%selected:after{content:\"\";position:absolute;inset:0;z-index:-1;border-radius:var(--%NS%kpt-radius-sm, .25rem);background:var(--%NS%kpt-color-primary)}.kpt-calendar--range .kpt-calendar__grid>.kpt-calendar__day:nth-child(7n+1):before{border-start-start-radius:var(--%NS%kpt-radius-sm, .25rem);border-end-start-radius:var(--%NS%kpt-radius-sm, .25rem)}.kpt-calendar--range .kpt-calendar__grid>.kpt-calendar__day:nth-child(7n):before{border-start-end-radius:var(--%NS%kpt-radius-sm, .25rem);border-end-end-radius:var(--%NS%kpt-radius-sm, .25rem)}.kpt-range-tabs{display:flex;gap:var(--%NS%kpt-space-1, .25rem);margin-block:var(--%NS%kpt-space-3, .75rem) var(--%NS%kpt-space-2, .5rem);padding:2px;background:var(--%NS%kpt-color-surface-variant);border-radius:var(--%NS%kpt-radius-md, .5rem)}.kpt-range-tabs button{flex:1;border:0;background:none;padding:var(--%NS%kpt-space-1, .25rem) var(--%NS%kpt-space-2, .5rem);border-radius:var(--%NS%kpt-radius-sm, .25rem);color:var(--%NS%kpt-color-on-surface-muted);font:inherit;font-size:var(--%NS%kpt-font-size-sm, .875rem);cursor:pointer}.kpt-range-tabs button.is-active{background:var(--%NS%kpt-color-surface-raised);color:var(--%NS%kpt-color-on-surface);font-weight:var(--%NS%kpt-font-weight-medium, 500);box-shadow:var(--%NS%kpt-elevation-1)}}\n"], encapsulation: 2 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(KptDateRange, [{
         type: Component,
-        args: [{ selector: 'kpt-date-range', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [CdkOverlayOrigin, CdkConnectedOverlay, KptIcon, KptButton, KptClock], host: { class: 'kpt-date-range-host' }, template: "<div\n  class=\"kpt-date-range\"\n  cdkOverlayOrigin\n  #trigger=\"cdkOverlayOrigin\"\n  role=\"button\"\n  tabindex=\"0\"\n  [class.kpt-date-range--open]=\"open()\"\n  [class.kpt-date-range--disabled]=\"disabled()\"\n  [class.kpt-date-range--invalid]=\"showInvalid()\"\n  (click)=\"toggleOpen()\"\n  (keydown.enter)=\"toggleOpen()\"\n  (blur)=\"touch.emit()\"\n>\n  @if (display()) {\n    <span class=\"kpt-date-range__value\">{{ display() }}</span>\n  } @else {\n    <span class=\"kpt-date-range__placeholder\">{{ effectivePlaceholder() }}</span>\n  }\n  <span class=\"kpt-date-range__spacer\"></span>\n  @if (display()) {\n    <button type=\"button\" class=\"kpt-date-range__clear\" (click)=\"clear($event)\" [attr.aria-label]=\"i18n.t('common.clear')\"><kpt-icon name=\"x\" /></button>\n  }\n  <kpt-icon class=\"kpt-date-range__icon\" name=\"calendar\" />\n</div>\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"open()\"\n  [cdkConnectedOverlayPositions]=\"positions\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  (backdropClick)=\"close()\"\n  (detach)=\"close()\"\n>\n  <div class=\"kpt-calendar\" [class.kpt-calendar--clock]=\"mode() === 'time'\" (keydown.escape)=\"close()\">\n    @if (mode() === 'time') {\n      <div class=\"kpt-range-tabs\">\n        <button type=\"button\" [class.is-active]=\"timeEnd() === 'start'\" (click)=\"timeEnd.set('start')\">{{ i18n.t('dateRange.from') }}</button>\n        <button type=\"button\" [class.is-active]=\"timeEnd() === 'end'\" (click)=\"timeEnd.set('end')\">{{ i18n.t('dateRange.to') }}</button>\n      </div>\n      @if (timeEnd() === 'start') {\n        <kpt-clock [value]=\"startTime()\" (valueChange)=\"startTime.set($event)\" [hourFormat]=\"hourFormat()\" [minuteStep]=\"minuteStep()\" />\n      } @else {\n        <kpt-clock [value]=\"endTime()\" (valueChange)=\"endTime.set($event)\" [hourFormat]=\"hourFormat()\" [minuteStep]=\"minuteStep()\" />\n      }\n      <div class=\"kpt-calendar__footer\">\n        <kpt-button size=\"sm\" (click)=\"commit()\">{{ i18n.t('common.done') }}</kpt-button>\n      </div>\n    } @else {\n      <div class=\"kpt-calendar__header\">\n        <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"prevMonth()\" [attr.aria-label]=\"i18n.t('datepicker.prevMonth')\"><kpt-icon name=\"chevron-left\" /></button>\n        <span class=\"kpt-calendar__title\">{{ monthLabel() }}</span>\n        <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"nextMonth()\" [attr.aria-label]=\"i18n.t('datepicker.nextMonth')\"><kpt-icon name=\"chevron-right\" /></button>\n      </div>\n      <div class=\"kpt-calendar__weekdays\">\n        @for (wd of weekdays(); track wd) {\n          <span class=\"kpt-calendar__weekday\">{{ wd }}</span>\n        }\n      </div>\n      <div class=\"kpt-calendar__grid\">\n        @for (week of weeks(); track $index) {\n          @for (cell of week; track cell.iso) {\n            <button\n              type=\"button\"\n              class=\"kpt-calendar__day\"\n              [class.kpt-calendar__day--muted]=\"!cell.inMonth\"\n              [class.kpt-calendar__day--range]=\"cell.inRange\"\n              [class.kpt-calendar__day--selected]=\"cell.isStart || cell.isEnd\"\n              (click)=\"selectDay(cell)\"\n            >{{ cell.day }}</button>\n          }\n        }\n      </div>\n\n      @if (mode() === 'datetime') {\n        <div class=\"kpt-range-tabs\">\n          <button type=\"button\" [class.is-active]=\"timeEnd() === 'start'\" (click)=\"timeEnd.set('start')\">{{ i18n.t('dateRange.fromTime') }}</button>\n          <button type=\"button\" [class.is-active]=\"timeEnd() === 'end'\" (click)=\"timeEnd.set('end')\">{{ i18n.t('dateRange.toTime') }}</button>\n        </div>\n        @if (timeEnd() === 'start') {\n          <kpt-clock [value]=\"startTime()\" (valueChange)=\"startTime.set($event)\" [hourFormat]=\"hourFormat()\" [minuteStep]=\"minuteStep()\" />\n        } @else {\n          <kpt-clock [value]=\"endTime()\" (valueChange)=\"endTime.set($event)\" [hourFormat]=\"hourFormat()\" [minuteStep]=\"minuteStep()\" />\n        }\n        <div class=\"kpt-calendar__footer\">\n          <kpt-button size=\"sm\" (click)=\"commit()\">{{ i18n.t('common.done') }}</kpt-button>\n        </div>\n      }\n    }\n  </div>\n</ng-template>\n", styles: ["@layer kpt.components{.kpt-date-range-host{display:block}.kpt-date-range{display:flex;align-items:center;gap:var(--kpt-space-2, .5rem);height:2.5rem;padding-inline:var(--kpt-space-3, .75rem);box-sizing:border-box;border:var(--kpt-border-width-thin, 1px) solid var(--kpt-form-field-border);border-radius:var(--kpt-form-field-radius, .5rem);background:var(--kpt-form-field-bg);color:var(--kpt-form-field-text);font-size:var(--kpt-font-size-sm, .875rem);cursor:pointer}.kpt-date-range:hover:not(.kpt-date-range--disabled){border-color:var(--kpt-form-field-border-hover)}.kpt-date-range:focus-visible,.kpt-date-range.kpt-date-range--open{outline:none;border-color:var(--kpt-form-field-border-focus);box-shadow:0 0 0 2px color-mix(in oklch,var(--kpt-form-field-border-focus) 30%,transparent)}.kpt-date-range.kpt-date-range--invalid{border-color:var(--kpt-form-field-border-error)}.kpt-date-range.kpt-date-range--disabled{cursor:not-allowed;opacity:.6;background:var(--kpt-color-surface-variant)}.kpt-date-range__placeholder{color:var(--kpt-form-field-placeholder)}.kpt-date-range__spacer{flex:1}.kpt-date-range__icon{color:var(--kpt-color-on-surface-muted)}.kpt-date-range__clear{display:inline-flex;border:0;background:none;cursor:pointer;padding:0;color:var(--kpt-color-on-surface-muted)}.kpt-date-range__clear:hover{color:var(--kpt-color-on-surface)}.kpt-calendar{width:17rem;padding:var(--kpt-space-3, .75rem);background:var(--kpt-color-surface-raised);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);box-shadow:var(--kpt-elevation-3);color:var(--kpt-color-on-surface);font-size:var(--kpt-font-size-sm, .875rem)}.kpt-calendar__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--kpt-space-2, .5rem)}.kpt-calendar__title{font-weight:var(--kpt-font-weight-semibold, 600);text-transform:capitalize}.kpt-calendar__nav{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:0;border-radius:var(--kpt-radius-md, .5rem);background:none;color:var(--kpt-color-on-surface);cursor:pointer}.kpt-calendar__nav:hover{background:var(--kpt-color-muted)}.kpt-calendar__weekdays,.kpt-calendar__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.kpt-calendar__weekday{text-align:center;font-size:var(--kpt-font-size-xs, .75rem);color:var(--kpt-color-on-surface-muted);padding:.25rem 0}.kpt-calendar__day{aspect-ratio:1;border:0;border-radius:var(--kpt-radius-sm, .25rem);background:none;color:var(--kpt-color-on-surface);cursor:pointer;font:inherit}.kpt-calendar__day:hover:not(:disabled){background:var(--kpt-color-muted)}.kpt-calendar__day--muted{color:var(--kpt-color-on-surface-muted);opacity:.5}.kpt-calendar__day--range{background:color-mix(in oklch,var(--kpt-color-primary) 14%,transparent);border-radius:0}.kpt-calendar__day--selected{background:var(--kpt-color-primary)!important;color:var(--kpt-color-on-primary)}.kpt-calendar__footer{display:flex;justify-content:flex-end;margin-top:var(--kpt-space-3, .75rem)}.kpt-calendar--clock{width:16rem}.kpt-range-tabs{display:flex;gap:var(--kpt-space-1, .25rem);margin-block:var(--kpt-space-3, .75rem) var(--kpt-space-2, .5rem);padding:2px;background:var(--kpt-color-surface-variant);border-radius:var(--kpt-radius-md, .5rem)}.kpt-range-tabs button{flex:1;border:0;background:none;padding:var(--kpt-space-1, .25rem) var(--kpt-space-2, .5rem);border-radius:var(--kpt-radius-sm, .25rem);color:var(--kpt-color-on-surface-muted);font:inherit;font-size:var(--kpt-font-size-sm, .875rem);cursor:pointer}.kpt-range-tabs button.is-active{background:var(--kpt-color-surface-raised);color:var(--kpt-color-on-surface);font-weight:var(--kpt-font-weight-medium, 500);box-shadow:var(--kpt-elevation-1)}}\n"] }]
-    }], null, { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], displayFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayFormat", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], hourFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "hourFormat", required: false }] }], minuteStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteStep", required: false }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptDateRange, { className: "KptDateRange", filePath: "lib/date-range/date-range.component.ts", lineNumber: 63 }); })();
+        args: [{ selector: 'kpt-date-range', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [CdkOverlayOrigin, CdkConnectedOverlay, KptIcon, KptButton, KptClock], host: { class: 'kpt-date-range-host' }, template: "<div\n  class=\"kpt-date-range\"\n  cdkOverlayOrigin\n  #trigger=\"cdkOverlayOrigin\"\n  role=\"button\"\n  tabindex=\"0\"\n  [class.kpt-date-range--open]=\"open()\"\n  [class.kpt-date-range--disabled]=\"disabled()\"\n  [class.kpt-date-range--invalid]=\"showInvalid()\"\n  (click)=\"toggleOpen()\"\n  (keydown.enter)=\"toggleOpen()\"\n  (blur)=\"touch.emit()\"\n>\n  @if (display()) {\n    <span class=\"kpt-date-range__value\">{{ display() }}</span>\n  } @else {\n    <span class=\"kpt-date-range__placeholder\">{{ effectivePlaceholder() }}</span>\n  }\n  <span class=\"kpt-date-range__spacer\"></span>\n  @if (display()) {\n    <button type=\"button\" class=\"kpt-date-range__clear\" (click)=\"clear($event)\" [attr.aria-label]=\"i18n.t('common.clear')\"><kpt-icon name=\"x\" /></button>\n  }\n  <kpt-icon class=\"kpt-date-range__icon\" name=\"calendar\" />\n</div>\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"open()\"\n  [cdkConnectedOverlayPositions]=\"positions\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  (backdropClick)=\"close()\"\n  (detach)=\"close()\"\n>\n  <div\n    class=\"kpt-calendar\"\n    [class.kpt-calendar--clock]=\"mode() === 'time'\"\n    [class.kpt-calendar--range]=\"mode() !== 'time'\"\n    [class.kpt-calendar--multi]=\"multi() && mode() !== 'time'\"\n    (keydown.escape)=\"close()\"\n  >\n    @if (mode() === 'time') {\n      <div class=\"kpt-range-tabs\">\n        <button type=\"button\" [class.is-active]=\"timeEnd() === 'start'\" (click)=\"timeEnd.set('start')\">{{ i18n.t('dateRange.from') }}</button>\n        <button type=\"button\" [class.is-active]=\"timeEnd() === 'end'\" (click)=\"timeEnd.set('end')\">{{ i18n.t('dateRange.to') }}</button>\n      </div>\n      @if (timeEnd() === 'start') {\n        <kpt-clock [value]=\"startTime()\" (valueChange)=\"startTime.set($event)\" [hourFormat]=\"hourFormat()\" [minuteStep]=\"minuteStep()\" />\n      } @else {\n        <kpt-clock [value]=\"endTime()\" (valueChange)=\"endTime.set($event)\" [hourFormat]=\"hourFormat()\" [minuteStep]=\"minuteStep()\" />\n      }\n      <div class=\"kpt-calendar__footer\">\n        <kpt-button size=\"sm\" (click)=\"commit()\">{{ i18n.t('common.done') }}</kpt-button>\n      </div>\n    } @else {\n      <div class=\"kpt-calendar__panels\">\n        @for (panel of panels(); track panel.key; let first = $first, last = $last) {\n          <div class=\"kpt-calendar__panel\">\n            <!-- Strza\u0142ki tylko na skrajnych panelach; puste sloty trzymaj\u0105 tytu\u0142 na \u015Brodku. -->\n            <div class=\"kpt-calendar__header\">\n              @if (first) {\n                <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"prevMonth()\" [attr.aria-label]=\"i18n.t('datepicker.prevMonth')\"><kpt-icon name=\"chevron-left\" /></button>\n              } @else {\n                <span class=\"kpt-calendar__nav-slot\"></span>\n              }\n              <span class=\"kpt-calendar__title\">{{ panel.label }}</span>\n              @if (last) {\n                <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"nextMonth()\" [attr.aria-label]=\"i18n.t('datepicker.nextMonth')\"><kpt-icon name=\"chevron-right\" /></button>\n              } @else {\n                <span class=\"kpt-calendar__nav-slot\"></span>\n              }\n            </div>\n            <div class=\"kpt-calendar__weekdays\">\n              @for (wd of weekdays(); track wd) {\n                <span class=\"kpt-calendar__weekday\">{{ wd }}</span>\n              }\n            </div>\n            <div class=\"kpt-calendar__grid\">\n              @for (week of panel.weeks; track $index) {\n                @for (cell of week; track cell.iso) {\n                  @if (cell.blank) {\n                    <span class=\"kpt-calendar__day kpt-calendar__day--blank\"></span>\n                  } @else {\n                    <button\n                      type=\"button\"\n                      class=\"kpt-calendar__day\"\n                      [class.kpt-calendar__day--muted]=\"!cell.inMonth\"\n                      [class.kpt-calendar__day--today]=\"cell.today\"\n                      [class.kpt-calendar__day--range]=\"cell.inRange\"\n                      [class.kpt-calendar__day--range-start]=\"cell.rangeStart\"\n                      [class.kpt-calendar__day--range-end]=\"cell.rangeEnd\"\n                      [class.kpt-calendar__day--selected]=\"cell.isStart || cell.isEnd\"\n                      (click)=\"selectDay(cell)\"\n                    >{{ cell.day }}</button>\n                  }\n                }\n              }\n            </div>\n          </div>\n        }\n      </div>\n\n      @if (mode() === 'datetime') {\n        <div class=\"kpt-range-tabs\">\n          <button type=\"button\" [class.is-active]=\"timeEnd() === 'start'\" (click)=\"timeEnd.set('start')\">{{ i18n.t('dateRange.fromTime') }}</button>\n          <button type=\"button\" [class.is-active]=\"timeEnd() === 'end'\" (click)=\"timeEnd.set('end')\">{{ i18n.t('dateRange.toTime') }}</button>\n        </div>\n        @if (timeEnd() === 'start') {\n          <kpt-clock [value]=\"startTime()\" (valueChange)=\"startTime.set($event)\" [hourFormat]=\"hourFormat()\" [minuteStep]=\"minuteStep()\" />\n        } @else {\n          <kpt-clock [value]=\"endTime()\" (valueChange)=\"endTime.set($event)\" [hourFormat]=\"hourFormat()\" [minuteStep]=\"minuteStep()\" />\n        }\n        <div class=\"kpt-calendar__footer\">\n          <kpt-button size=\"sm\" (click)=\"commit()\">{{ i18n.t('common.done') }}</kpt-button>\n        </div>\n      }\n    }\n  </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";@layer kpt.components{.kpt-date-range-host{display:block}.kpt-date-range{display:flex;align-items:center;gap:var(--kpt-space-2, .5rem);height:2.5rem;padding-inline:var(--kpt-space-3, .75rem);box-sizing:border-box;border:var(--kpt-border-width-thin, 1px) solid var(--kpt-form-field-border);border-radius:var(--kpt-form-field-radius, .5rem);background:var(--kpt-form-field-bg);color:var(--kpt-form-field-text);font-size:var(--kpt-font-size-sm, .875rem);cursor:pointer}.kpt-date-range:hover:not(.kpt-date-range--disabled){border-color:var(--kpt-form-field-border-hover)}.kpt-date-range:focus-visible,.kpt-date-range.kpt-date-range--open{outline:none;border-color:var(--kpt-form-field-border-focus);box-shadow:0 0 0 2px color-mix(in oklch,var(--kpt-form-field-border-focus) 30%,transparent)}.kpt-date-range.kpt-date-range--invalid{border-color:var(--kpt-form-field-border-error)}.kpt-date-range.kpt-date-range--disabled{cursor:not-allowed;opacity:.6;background:var(--kpt-color-surface-variant)}.kpt-date-range__placeholder{color:var(--kpt-form-field-placeholder)}.kpt-date-range__spacer{flex:1}.kpt-date-range__icon{color:var(--kpt-color-on-surface-muted)}.kpt-date-range__clear{display:inline-flex;border:0;background:none;cursor:pointer;padding:0;color:var(--kpt-color-on-surface-muted)}.kpt-date-range__clear:hover{color:var(--kpt-color-on-surface)}.kpt-calendar{width:17rem;padding:var(--kpt-space-3, .75rem);background:var(--kpt-color-surface-raised);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);box-shadow:var(--kpt-elevation-3);color:var(--kpt-color-on-surface);font-size:var(--kpt-font-size-sm, .875rem)}.kpt-calendar__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--kpt-space-2, .5rem)}.kpt-calendar__title{font-weight:var(--kpt-font-weight-semibold, 600);text-transform:capitalize}.kpt-calendar__nav{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:0;border-radius:var(--kpt-radius-md, .5rem);background:none;color:var(--kpt-color-on-surface);cursor:pointer}.kpt-calendar__nav:hover{background:var(--kpt-color-muted)}.kpt-calendar__nav-slot{width:2rem;height:2rem}.kpt-calendar__panels{display:flex;flex-wrap:wrap;gap:var(--kpt-space-4, 1rem)}.kpt-calendar__panel{flex:none;width:15.5rem}.kpt-calendar__weekdays,.kpt-calendar__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.kpt-calendar__weekday{text-align:center;font-size:var(--kpt-font-size-xs, .75rem);color:var(--kpt-color-on-surface-muted);padding:.25rem 0}.kpt-calendar__day{position:relative;isolation:isolate;aspect-ratio:1;border:0;border-radius:var(--kpt-radius-sm, .25rem);background:none;color:var(--kpt-color-on-surface);cursor:pointer;font:inherit}.kpt-calendar__day:hover:not(:disabled){background:var(--kpt-color-muted)}.kpt-calendar__day--muted{color:var(--kpt-color-on-surface-muted);opacity:.5}.kpt-calendar__day--blank{cursor:default;pointer-events:none}.kpt-calendar__day--today{box-shadow:inset 0 0 0 1px var(--kpt-color-border-strong)}.kpt-calendar__day--selected{background:var(--kpt-color-primary)!important;color:var(--kpt-color-on-primary)}.kpt-calendar__footer{display:flex;justify-content:flex-end;margin-top:var(--kpt-space-3, .75rem)}.kpt-calendar--clock{width:16rem}.kpt-calendar--multi{width:auto;max-width:calc(100vw - 2rem)}.kpt-calendar--range .kpt-calendar__day--range:before,.kpt-calendar--range .kpt-calendar__day--range-start:before,.kpt-calendar--range .kpt-calendar__day--range-end:before{content:\"\";position:absolute;inset-block:0;inset-inline:-1px;z-index:-2;background:color-mix(in oklch,var(--kpt-color-primary) 14%,transparent)}.kpt-calendar--range .kpt-calendar__day--range-start:before{inset-inline-start:50%}.kpt-calendar--range .kpt-calendar__day--range-end:before{inset-inline-end:50%}.kpt-calendar--range .kpt-calendar__day--selected{background:none!important;color:var(--kpt-color-on-primary)}.kpt-calendar--range .kpt-calendar__day--selected:after{content:\"\";position:absolute;inset:0;z-index:-1;border-radius:var(--kpt-radius-sm, .25rem);background:var(--kpt-color-primary)}.kpt-calendar--range .kpt-calendar__grid>.kpt-calendar__day:nth-child(7n+1):before{border-start-start-radius:var(--kpt-radius-sm, .25rem);border-end-start-radius:var(--kpt-radius-sm, .25rem)}.kpt-calendar--range .kpt-calendar__grid>.kpt-calendar__day:nth-child(7n):before{border-start-end-radius:var(--kpt-radius-sm, .25rem);border-end-end-radius:var(--kpt-radius-sm, .25rem)}.kpt-range-tabs{display:flex;gap:var(--kpt-space-1, .25rem);margin-block:var(--kpt-space-3, .75rem) var(--kpt-space-2, .5rem);padding:2px;background:var(--kpt-color-surface-variant);border-radius:var(--kpt-radius-md, .5rem)}.kpt-range-tabs button{flex:1;border:0;background:none;padding:var(--kpt-space-1, .25rem) var(--kpt-space-2, .5rem);border-radius:var(--kpt-radius-sm, .25rem);color:var(--kpt-color-on-surface-muted);font:inherit;font-size:var(--kpt-font-size-sm, .875rem);cursor:pointer}.kpt-range-tabs button.is-active{background:var(--kpt-color-surface-raised);color:var(--kpt-color-on-surface);font-weight:var(--kpt-font-weight-medium, 500);box-shadow:var(--kpt-elevation-1)}}\n"] }]
+    }], null, { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], displayFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayFormat", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], visibleMonths: [{ type: i0.Input, args: [{ isSignal: true, alias: "visibleMonths", required: false }] }], hourFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "hourFormat", required: false }] }], minuteStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteStep", required: false }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptDateRange, { className: "KptDateRange", filePath: "lib/date-range/date-range.component.ts", lineNumber: 79 }); })();
 
 function KptInputNumber_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();