@konce-pt/angular 0.7.7 → 0.7.9

package/fesm2022/konce-pt-angular.mjs

@@ -735,6 +735,7 @@ const KPT_MESSAGES_EN = {
         min: 'min',
         max: 'max',
         editCell: 'Edit: {column}',
+        total: 'Total',
     },
     confirm: {
         header: 'Confirmation',
@@ -762,6 +763,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',
@@ -997,6 +1003,7 @@ const KPT_MESSAGES_PL = {
         min: 'min',
         max: 'max',
         editCell: 'Edytuj: {column}',
+        total: 'Razem',
     },
     confirm: {
         header: 'Potwierdzenie',
@@ -1024,6 +1031,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 +3059,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 +3088,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();
+} 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();
-    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.ɵɵ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 +3386,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 +3433,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 +3459,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 +3607,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 +3706,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 +3813,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 +3856,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 +3890,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 +3898,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 +3911,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 +6020,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 +6098,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 +6239,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.ɵɵ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.ɵɵ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.ɵɵ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 +6267,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 +6296,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 +6328,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 +6354,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 +6398,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 +6462,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 +6525,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 +6533,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();
@@ -9062,6 +9281,53 @@ class KptRowDetailDef {
             }]
     }], null, null); })();
 
+/*
+ * Agregacje wiersza podsumowania (`<tfoot>`) — pure TS, wydzielone żeby dało się
+ * testować `node --test` bez ciągnięcia Angulara (jak `csv-export.ts`).
+ */
+/**
+ * Sumowanie liczb zmiennoprzecinkowych daje ogony (`0.1 + 0.2` → `0.30000000000000004`),
+ * które bez tego przycięcia wyciekłyby wprost do komórki podsumowania.
+ */
+function trimFloat(value) {
+    return Math.round(value * 1e10) / 1e10;
+}
+/** Liczba z komórki: `number` bez zmian, string przez `parseFloat`, reszta → `NaN` (pomijana). */
+function toNumber(value) {
+    if (typeof value === 'number')
+        return value;
+    if (typeof value === 'string' && value.trim() !== '')
+        return parseFloat(value);
+    return NaN;
+}
+/**
+ * Agreguje jedno pole po wierszach. `count` liczy wiersze; pozostałe funkcje pomijają
+ * wartości nieliczbowe. Pusty zbiór liczb: `sum` → 0, `avg`/`min`/`max` → `null`
+ * (komórka renderuje się wtedy pusta).
+ */
+function aggregate(rows, field, fn) {
+    if (fn === 'count')
+        return rows.length;
+    const nums = [];
+    for (const row of rows) {
+        const num = toNumber(row[field]);
+        if (!Number.isNaN(num))
+            nums.push(num);
+    }
+    switch (fn) {
+        case 'sum':
+            return trimFloat(nums.reduce((acc, n) => acc + n, 0));
+        case 'avg':
+            return nums.length === 0 ? null : trimFloat(nums.reduce((acc, n) => acc + n, 0) / nums.length);
+        case 'min':
+            return nums.length === 0 ? null : Math.min(...nums);
+        case 'max':
+            return nums.length === 0 ? null : Math.max(...nums);
+        default:
+            return null;
+    }
+}
+
 const _c0$e = ["scrollEl"];
 const _c1$5 = ["theadEl"];
 const _c2$2 = ["editorHost"];
@@ -9113,7 +9379,7 @@ function KptDataTable_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0, 8);
 } if (rf & 2) {
     i0.ɵɵnextContext();
-    const filterRowTpl_r4 = i0.ɵɵreference(22);
+    const filterRowTpl_r4 = i0.ɵɵreference(23);
     i0.ɵɵproperty("ngTemplateOutlet", filterRowTpl_r4);
 } }
 function KptDataTable_Conditional_8_Template(rf, ctx) { if (rf & 1) {
@@ -9181,7 +9447,7 @@ function KptDataTable_Conditional_13_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0, 8);
 } if (rf & 2) {
     i0.ɵɵnextContext();
-    const filterRowTpl_r4 = i0.ɵɵreference(22);
+    const filterRowTpl_r4 = i0.ɵɵreference(23);
     i0.ɵɵproperty("ngTemplateOutlet", filterRowTpl_r4);
 } }
 function KptDataTable_Conditional_15_Template(rf, ctx) { if (rf & 1) {
@@ -9221,7 +9487,7 @@ function KptDataTable_Conditional_17_For_2_Template(rf, ctx) { if (rf & 1) {
 } if (rf & 2) {
     const row_r8 = ctx.$implicit;
     i0.ɵɵnextContext(2);
-    const rowTpl_r9 = i0.ɵɵreference(20);
+    const rowTpl_r9 = i0.ɵɵreference(21);
     i0.ɵɵproperty("ngTemplateOutlet", rowTpl_r9)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c5, row_r8));
 } }
 function KptDataTable_Conditional_17_Conditional_3_Template(rf, ctx) { if (rf & 1) {
@@ -9251,7 +9517,7 @@ function KptDataTable_Conditional_18_For_1_Template(rf, ctx) { if (rf & 1) {
 } if (rf & 2) {
     const row_r10 = ctx.$implicit;
     i0.ɵɵnextContext(2);
-    const rowTpl_r9 = i0.ɵɵreference(20);
+    const rowTpl_r9 = i0.ɵɵreference(21);
     i0.ɵɵproperty("ngTemplateOutlet", rowTpl_r9)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c5, row_r10));
 } }
 function KptDataTable_Conditional_18_Template(rf, ctx) { if (rf & 1) {
@@ -9260,170 +9526,214 @@ function KptDataTable_Conditional_18_Template(rf, ctx) { if (rf & 1) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵrepeater(ctx_r1.paged());
 } }
-function KptDataTable_ng_template_19_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    const _r13 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "td", 17)(1, "button", 30);
-    i0.ɵɵlistener("click", function KptDataTable_ng_template_19_Conditional_1_Template_button_click_1_listener($event) { i0.ɵɵrestoreView(_r13); const row_r12 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(); $event.stopPropagation(); return i0.ɵɵresetView(ctx_r1.toggleExpand(row_r12)); });
-    i0.ɵɵelement(2, "kpt-icon", 31);
+function KptDataTable_Conditional_19_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "th", 29);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵstyleProp("left", ctx_r1.hasFrozen() ? 0 : null, "px");
+    i0.ɵɵclassProp("kpt-data-table__cell--frozen", ctx_r1.hasFrozen());
+    i0.ɵɵattribute("colspan", ctx_r1.summaryLabelSpan());
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.summaryLabelText(), " ");
+} }
+function KptDataTable_Conditional_19_For_4_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "td");
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const col_r11 = i0.ɵɵnextContext().$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵstyleProp("width", col_r11.width)("left", ctx_r1.frozenLeft(col_r11.field), "px");
+    i0.ɵɵclassProp("kpt-data-table__cell--frozen", ctx_r1.isFrozen(col_r11.field));
+    i0.ɵɵattribute("data-align", col_r11.align ?? "end");
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.summaryText(col_r11.field), " ");
+} }
+function KptDataTable_Conditional_19_For_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, KptDataTable_Conditional_19_For_4_Conditional_0_Template, 2, 8, "td", 30);
+} if (rf & 2) {
+    const ɵ$index_89_r12 = ctx.$index;
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵconditional(ɵ$index_89_r12 >= ctx_r1.summaryStartIndex() ? 0 : -1);
+} }
+function KptDataTable_Conditional_19_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "tfoot")(1, "tr", 27);
+    i0.ɵɵconditionalCreate(2, KptDataTable_Conditional_19_Conditional_2_Template, 2, 6, "th", 28);
+    i0.ɵɵrepeaterCreate(3, KptDataTable_Conditional_19_For_4_Template, 1, 1, null, null, _forTrack0$1);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r1.summaryLabelSpan() > 0 ? 2 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r1.visibleOrderedColumns());
+} }
+function KptDataTable_ng_template_20_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    const _r15 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "td", 17)(1, "button", 34);
+    i0.ɵɵlistener("click", function KptDataTable_ng_template_20_Conditional_1_Template_button_click_1_listener($event) { i0.ɵɵrestoreView(_r15); const row_r14 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(); $event.stopPropagation(); return i0.ɵɵresetView(ctx_r1.toggleExpand(row_r14)); });
+    i0.ɵɵelement(2, "kpt-icon", 35);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const row_r12 = i0.ɵɵnextContext().$implicit;
+    const row_r14 = i0.ɵɵnextContext().$implicit;
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵstyleProp("left", ctx_r1.expanderStickyLeft(), "px");
     i0.ɵɵclassProp("kpt-data-table__cell--frozen", ctx_r1.hasFrozen());
     i0.ɵɵadvance();
-    i0.ɵɵclassProp("kpt-data-table__expander-btn--open", ctx_r1.isExpanded(row_r12));
-    i0.ɵɵattribute("aria-expanded", ctx_r1.isExpanded(row_r12))("aria-label", ctx_r1.i18n.t("dataTable.expandRow"));
+    i0.ɵɵclassProp("kpt-data-table__expander-btn--open", ctx_r1.isExpanded(row_r14));
+    i0.ɵɵattribute("aria-expanded", ctx_r1.isExpanded(row_r14))("aria-label", ctx_r1.i18n.t("dataTable.expandRow"));
 } }
-function KptDataTable_ng_template_19_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    const _r14 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "td", 18)(1, "input", 32);
-    i0.ɵɵlistener("click", function KptDataTable_ng_template_19_Conditional_2_Template_input_click_1_listener($event) { return $event.stopPropagation(); })("change", function KptDataTable_ng_template_19_Conditional_2_Template_input_change_1_listener() { i0.ɵɵrestoreView(_r14); const row_r12 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleRow(row_r12)); });
+function KptDataTable_ng_template_20_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    const _r16 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "td", 18)(1, "input", 36);
+    i0.ɵɵlistener("click", function KptDataTable_ng_template_20_Conditional_2_Template_input_click_1_listener($event) { return $event.stopPropagation(); })("change", function KptDataTable_ng_template_20_Conditional_2_Template_input_change_1_listener() { i0.ɵɵrestoreView(_r16); const row_r14 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleRow(row_r14)); });
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const row_r12 = i0.ɵɵnextContext().$implicit;
+    const row_r14 = i0.ɵɵnextContext().$implicit;
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵstyleProp("left", ctx_r1.checkboxStickyLeft(), "px");
     i0.ɵɵclassProp("kpt-data-table__cell--frozen", ctx_r1.hasFrozen());
     i0.ɵɵadvance();
-    i0.ɵɵproperty("checked", ctx_r1.isSelected(row_r12));
+    i0.ɵɵproperty("checked", ctx_r1.isSelected(row_r14));
     i0.ɵɵattribute("aria-label", ctx_r1.i18n.t("dataTable.selectRow"));
 } }
-function KptDataTable_ng_template_19_For_4_Conditional_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+function KptDataTable_ng_template_20_For_4_Conditional_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0, 26);
 } if (rf & 2) {
-    const row_r12 = i0.ɵɵnextContext(3).$implicit;
+    const row_r14 = i0.ɵɵnextContext(3).$implicit;
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx)("ngTemplateOutletContext", i0.ɵɵpureFunction4(2, _c7, ctx_r1.editingValue(), row_r12, ctx_r1.commitEditValue, ctx_r1.cancelEdit));
+    i0.ɵɵproperty("ngTemplateOutlet", ctx)("ngTemplateOutletContext", i0.ɵɵpureFunction4(2, _c7, ctx_r1.editingValue(), row_r14, ctx_r1.commitEditValue, ctx_r1.cancelEdit));
 } }
-function KptDataTable_ng_template_19_For_4_Conditional_1_Conditional_3_Case_0_Template(rf, ctx) { if (rf & 1) {
-    const _r18 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kpt-input", 41);
-    i0.ɵɵlistener("valueChange", function KptDataTable_ng_template_19_For_4_Conditional_1_Conditional_3_Case_0_Template_kpt_input_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r18); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.editingValue.set($event)); })("keydown.enter", function KptDataTable_ng_template_19_For_4_Conditional_1_Conditional_3_Case_0_Template_kpt_input_keydown_enter_0_listener() { i0.ɵɵrestoreView(_r18); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.commitEdit()); })("keydown.escape", function KptDataTable_ng_template_19_For_4_Conditional_1_Conditional_3_Case_0_Template_kpt_input_keydown_escape_0_listener() { i0.ɵɵrestoreView(_r18); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.cancelEdit()); });
+function KptDataTable_ng_template_20_For_4_Conditional_1_Conditional_3_Case_0_Template(rf, ctx) { if (rf & 1) {
+    const _r20 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "kpt-input", 45);
+    i0.ɵɵlistener("valueChange", function KptDataTable_ng_template_20_For_4_Conditional_1_Conditional_3_Case_0_Template_kpt_input_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r20); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.editingValue.set($event)); })("keydown.enter", function KptDataTable_ng_template_20_For_4_Conditional_1_Conditional_3_Case_0_Template_kpt_input_keydown_enter_0_listener() { i0.ɵɵrestoreView(_r20); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.commitEdit()); })("keydown.escape", function KptDataTable_ng_template_20_For_4_Conditional_1_Conditional_3_Case_0_Template_kpt_input_keydown_escape_0_listener() { i0.ɵɵrestoreView(_r20); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.cancelEdit()); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const col_r16 = i0.ɵɵnextContext(3).$implicit;
+    const col_r18 = i0.ɵɵnextContext(3).$implicit;
     const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("value", ctx_r1.editingValue() ?? "")("placeholder", col_r16.edit.placeholder ?? "");
+    i0.ɵɵproperty("value", ctx_r1.editingValue() ?? "")("placeholder", col_r18.edit.placeholder ?? "");
 } }
-function KptDataTable_ng_template_19_For_4_Conditional_1_Conditional_3_Case_1_Template(rf, ctx) { if (rf & 1) {
-    const _r19 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kpt-input-number", 42);
-    i0.ɵɵlistener("valueChange", function KptDataTable_ng_template_19_For_4_Conditional_1_Conditional_3_Case_1_Template_kpt_input_number_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.editingValue.set($event)); })("keydown.enter", function KptDataTable_ng_template_19_For_4_Conditional_1_Conditional_3_Case_1_Template_kpt_input_number_keydown_enter_0_listener() { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.commitEdit()); })("keydown.escape", function KptDataTable_ng_template_19_For_4_Conditional_1_Conditional_3_Case_1_Template_kpt_input_number_keydown_escape_0_listener() { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.cancelEdit()); });
+function KptDataTable_ng_template_20_For_4_Conditional_1_Conditional_3_Case_1_Template(rf, ctx) { if (rf & 1) {
+    const _r21 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "kpt-input-number", 46);
+    i0.ɵɵlistener("valueChange", function KptDataTable_ng_template_20_For_4_Conditional_1_Conditional_3_Case_1_Template_kpt_input_number_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.editingValue.set($event)); })("keydown.enter", function KptDataTable_ng_template_20_For_4_Conditional_1_Conditional_3_Case_1_Template_kpt_input_number_keydown_enter_0_listener() { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.commitEdit()); })("keydown.escape", function KptDataTable_ng_template_20_For_4_Conditional_1_Conditional_3_Case_1_Template_kpt_input_number_keydown_escape_0_listener() { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.cancelEdit()); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const col_r16 = i0.ɵɵnextContext(3).$implicit;
+    const col_r18 = i0.ɵɵnextContext(3).$implicit;
     const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("value", ctx_r1.editingValue())("min", col_r16.edit.min)("max", col_r16.edit.max)("step", col_r16.edit.step ?? 1);
+    i0.ɵɵproperty("value", ctx_r1.editingValue())("min", col_r18.edit.min)("max", col_r18.edit.max)("step", col_r18.edit.step ?? 1);
 } }
-function KptDataTable_ng_template_19_For_4_Conditional_1_Conditional_3_Case_2_Template(rf, ctx) { if (rf & 1) {
-    const _r20 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kpt-datepicker", 43);
-    i0.ɵɵlistener("valueChange", function KptDataTable_ng_template_19_For_4_Conditional_1_Conditional_3_Case_2_Template_kpt_datepicker_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r20); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.editingValue.set($event)); })("openChange", function KptDataTable_ng_template_19_For_4_Conditional_1_Conditional_3_Case_2_Template_kpt_datepicker_openChange_0_listener($event) { i0.ɵɵrestoreView(_r20); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.onEditorPanelToggle($event)); });
+function KptDataTable_ng_template_20_For_4_Conditional_1_Conditional_3_Case_2_Template(rf, ctx) { if (rf & 1) {
+    const _r22 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "kpt-datepicker", 47);
+    i0.ɵɵlistener("valueChange", function KptDataTable_ng_template_20_For_4_Conditional_1_Conditional_3_Case_2_Template_kpt_datepicker_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r22); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.editingValue.set($event)); })("openChange", function KptDataTable_ng_template_20_For_4_Conditional_1_Conditional_3_Case_2_Template_kpt_datepicker_openChange_0_listener($event) { i0.ɵɵrestoreView(_r22); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.onEditorPanelToggle($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(5);
     i0.ɵɵproperty("value", ctx_r1.editingValue() ?? "")("open", ctx_r1.editorPanelOpen());
 } }
-function KptDataTable_ng_template_19_For_4_Conditional_1_Conditional_3_Case_3_Template(rf, ctx) { if (rf & 1) {
-    const _r21 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kpt-select", 44);
-    i0.ɵɵlistener("valueChange", function KptDataTable_ng_template_19_For_4_Conditional_1_Conditional_3_Case_3_Template_kpt_select_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.editingValue.set($event)); })("openChange", function KptDataTable_ng_template_19_For_4_Conditional_1_Conditional_3_Case_3_Template_kpt_select_openChange_0_listener($event) { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.onEditorPanelToggle($event)); });
+function KptDataTable_ng_template_20_For_4_Conditional_1_Conditional_3_Case_3_Template(rf, ctx) { if (rf & 1) {
+    const _r23 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "kpt-select", 48);
+    i0.ɵɵlistener("valueChange", function KptDataTable_ng_template_20_For_4_Conditional_1_Conditional_3_Case_3_Template_kpt_select_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r23); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.editingValue.set($event)); })("openChange", function KptDataTable_ng_template_20_For_4_Conditional_1_Conditional_3_Case_3_Template_kpt_select_openChange_0_listener($event) { i0.ɵɵrestoreView(_r23); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.onEditorPanelToggle($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const col_r16 = i0.ɵɵnextContext(3).$implicit;
+    const col_r18 = i0.ɵɵnextContext(3).$implicit;
     const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("options", col_r16.edit.options ?? i0.ɵɵpureFunction0(4, _c8))("placeholder", col_r16.edit.placeholder ?? "")("value", ctx_r1.editingValue())("open", ctx_r1.editorPanelOpen());
+    i0.ɵɵproperty("options", col_r18.edit.options ?? i0.ɵɵpureFunction0(4, _c8))("placeholder", col_r18.edit.placeholder ?? "")("value", ctx_r1.editingValue())("open", ctx_r1.editorPanelOpen());
 } }
-function KptDataTable_ng_template_19_For_4_Conditional_1_Conditional_3_Case_4_Template(rf, ctx) { if (rf & 1) {
-    const _r22 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kpt-select", 45);
-    i0.ɵɵlistener("valueChange", function KptDataTable_ng_template_19_For_4_Conditional_1_Conditional_3_Case_4_Template_kpt_select_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r22); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.editingValue.set($event)); })("openChange", function KptDataTable_ng_template_19_For_4_Conditional_1_Conditional_3_Case_4_Template_kpt_select_openChange_0_listener($event) { i0.ɵɵrestoreView(_r22); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.onEditorPanelToggle($event)); });
+function KptDataTable_ng_template_20_For_4_Conditional_1_Conditional_3_Case_4_Template(rf, ctx) { if (rf & 1) {
+    const _r24 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "kpt-select", 49);
+    i0.ɵɵlistener("valueChange", function KptDataTable_ng_template_20_For_4_Conditional_1_Conditional_3_Case_4_Template_kpt_select_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r24); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.editingValue.set($event)); })("openChange", function KptDataTable_ng_template_20_For_4_Conditional_1_Conditional_3_Case_4_Template_kpt_select_openChange_0_listener($event) { i0.ɵɵrestoreView(_r24); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.onEditorPanelToggle($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const col_r16 = i0.ɵɵnextContext(3).$implicit;
+    const col_r18 = i0.ɵɵnextContext(3).$implicit;
     const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("options", col_r16.edit.options ?? i0.ɵɵpureFunction0(4, _c8))("placeholder", col_r16.edit.placeholder ?? "")("value", ctx_r1.editingValue())("open", ctx_r1.editorPanelOpen());
+    i0.ɵɵproperty("options", col_r18.edit.options ?? i0.ɵɵpureFunction0(4, _c8))("placeholder", col_r18.edit.placeholder ?? "")("value", ctx_r1.editingValue())("open", ctx_r1.editorPanelOpen());
 } }
-function KptDataTable_ng_template_19_For_4_Conditional_1_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, KptDataTable_ng_template_19_For_4_Conditional_1_Conditional_3_Case_0_Template, 1, 2, "kpt-input", 36)(1, KptDataTable_ng_template_19_For_4_Conditional_1_Conditional_3_Case_1_Template, 1, 4, "kpt-input-number", 37)(2, KptDataTable_ng_template_19_For_4_Conditional_1_Conditional_3_Case_2_Template, 1, 2, "kpt-datepicker", 38)(3, KptDataTable_ng_template_19_For_4_Conditional_1_Conditional_3_Case_3_Template, 1, 5, "kpt-select", 39)(4, KptDataTable_ng_template_19_For_4_Conditional_1_Conditional_3_Case_4_Template, 1, 5, "kpt-select", 40);
+function KptDataTable_ng_template_20_For_4_Conditional_1_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, KptDataTable_ng_template_20_For_4_Conditional_1_Conditional_3_Case_0_Template, 1, 2, "kpt-input", 40)(1, KptDataTable_ng_template_20_For_4_Conditional_1_Conditional_3_Case_1_Template, 1, 4, "kpt-input-number", 41)(2, KptDataTable_ng_template_20_For_4_Conditional_1_Conditional_3_Case_2_Template, 1, 2, "kpt-datepicker", 42)(3, KptDataTable_ng_template_20_For_4_Conditional_1_Conditional_3_Case_3_Template, 1, 5, "kpt-select", 43)(4, KptDataTable_ng_template_20_For_4_Conditional_1_Conditional_3_Case_4_Template, 1, 5, "kpt-select", 44);
 } if (rf & 2) {
     let tmp_19_0;
-    const col_r16 = i0.ɵɵnextContext(2).$implicit;
-    i0.ɵɵconditional((tmp_19_0 = col_r16.edit?.type) === "text" ? 0 : tmp_19_0 === "number" ? 1 : tmp_19_0 === "date" ? 2 : tmp_19_0 === "select" ? 3 : tmp_19_0 === "multiselect" ? 4 : -1);
+    const col_r18 = i0.ɵɵnextContext(2).$implicit;
+    i0.ɵɵconditional((tmp_19_0 = col_r18.edit?.type) === "text" ? 0 : tmp_19_0 === "number" ? 1 : tmp_19_0 === "date" ? 2 : tmp_19_0 === "select" ? 3 : tmp_19_0 === "multiselect" ? 4 : -1);
 } }
-function KptDataTable_ng_template_19_For_4_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    const _r17 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 35, 4);
-    i0.ɵɵlistener("click", function KptDataTable_ng_template_19_For_4_Conditional_1_Template_div_click_0_listener($event) { return $event.stopPropagation(); })("focusout", function KptDataTable_ng_template_19_For_4_Conditional_1_Template_div_focusout_0_listener($event) { i0.ɵɵrestoreView(_r17); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onEditorFocusOut($event)); });
-    i0.ɵɵconditionalCreate(2, KptDataTable_ng_template_19_For_4_Conditional_1_Conditional_2_Template, 1, 7, "ng-container", 26)(3, KptDataTable_ng_template_19_For_4_Conditional_1_Conditional_3_Template, 5, 1);
+function KptDataTable_ng_template_20_For_4_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    const _r19 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 39, 4);
+    i0.ɵɵlistener("click", function KptDataTable_ng_template_20_For_4_Conditional_1_Template_div_click_0_listener($event) { return $event.stopPropagation(); })("focusout", function KptDataTable_ng_template_20_For_4_Conditional_1_Template_div_focusout_0_listener($event) { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onEditorFocusOut($event)); });
+    i0.ɵɵconditionalCreate(2, KptDataTable_ng_template_20_For_4_Conditional_1_Conditional_2_Template, 1, 7, "ng-container", 26)(3, KptDataTable_ng_template_20_For_4_Conditional_1_Conditional_3_Template, 5, 1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     let tmp_18_0;
-    const col_r16 = i0.ɵɵnextContext().$implicit;
+    const col_r18 = i0.ɵɵnextContext().$implicit;
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional((tmp_18_0 = ctx_r1.cellEditTemplate(col_r16.field)) ? 2 : 3, tmp_18_0);
+    i0.ɵɵconditional((tmp_18_0 = ctx_r1.cellEditTemplate(col_r18.field)) ? 2 : 3, tmp_18_0);
 } }
-function KptDataTable_ng_template_19_For_4_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+function KptDataTable_ng_template_20_For_4_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0, 26);
 } if (rf & 2) {
-    const col_r16 = i0.ɵɵnextContext().$implicit;
-    const row_r12 = i0.ɵɵnextContext().$implicit;
+    const col_r18 = i0.ɵɵnextContext().$implicit;
+    const row_r14 = i0.ɵɵnextContext().$implicit;
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c9, row_r12, ctx_r1.getValue(row_r12, col_r16.field)));
+    i0.ɵɵproperty("ngTemplateOutlet", ctx)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c9, row_r14, ctx_r1.getValue(row_r14, col_r18.field)));
 } }
-function KptDataTable_ng_template_19_For_4_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+function KptDataTable_ng_template_20_For_4_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0);
 } if (rf & 2) {
-    const col_r16 = i0.ɵɵnextContext().$implicit;
-    const row_r12 = i0.ɵɵnextContext().$implicit;
+    const col_r18 = i0.ɵɵnextContext().$implicit;
+    const row_r14 = i0.ɵɵnextContext().$implicit;
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.getValue(row_r12, col_r16.field), " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.getValue(row_r14, col_r18.field), " ");
 } }
-function KptDataTable_ng_template_19_For_4_Template(rf, ctx) { if (rf & 1) {
-    const _r15 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "td", 33);
-    i0.ɵɵlistener("click", function KptDataTable_ng_template_19_For_4_Template_td_click_0_listener($event) { const col_r16 = i0.ɵɵrestoreView(_r15).$implicit; const row_r12 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.isEditable(col_r16) ? ctx_r1.startEdit(row_r12, col_r16, $event) : null); })("keydown.enter", function KptDataTable_ng_template_19_For_4_Template_td_keydown_enter_0_listener($event) { const col_r16 = i0.ɵɵrestoreView(_r15).$implicit; const row_r12 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.isEditable(col_r16) && !ctx_r1.isEditingCell(row_r12, col_r16.field) ? ctx_r1.startEdit(row_r12, col_r16, $event) : null); });
-    i0.ɵɵconditionalCreate(1, KptDataTable_ng_template_19_For_4_Conditional_1_Template, 4, 1, "div", 34)(2, KptDataTable_ng_template_19_For_4_Conditional_2_Template, 1, 5, "ng-container", 26)(3, KptDataTable_ng_template_19_For_4_Conditional_3_Template, 1, 1);
+function KptDataTable_ng_template_20_For_4_Template(rf, ctx) { if (rf & 1) {
+    const _r17 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "td", 37);
+    i0.ɵɵlistener("click", function KptDataTable_ng_template_20_For_4_Template_td_click_0_listener($event) { const col_r18 = i0.ɵɵrestoreView(_r17).$implicit; const row_r14 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.isEditable(col_r18) ? ctx_r1.startEdit(row_r14, col_r18, $event) : null); })("keydown.enter", function KptDataTable_ng_template_20_For_4_Template_td_keydown_enter_0_listener($event) { const col_r18 = i0.ɵɵrestoreView(_r17).$implicit; const row_r14 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.isEditable(col_r18) && !ctx_r1.isEditingCell(row_r14, col_r18.field) ? ctx_r1.startEdit(row_r14, col_r18, $event) : null); });
+    i0.ɵɵconditionalCreate(1, KptDataTable_ng_template_20_For_4_Conditional_1_Template, 4, 1, "div", 38)(2, KptDataTable_ng_template_20_For_4_Conditional_2_Template, 1, 5, "ng-container", 26)(3, KptDataTable_ng_template_20_For_4_Conditional_3_Template, 1, 1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     let tmp_22_0;
-    const col_r16 = ctx.$implicit;
-    const row_r12 = i0.ɵɵnextContext().$implicit;
+    const col_r18 = ctx.$implicit;
+    const row_r14 = i0.ɵɵnextContext().$implicit;
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵstyleProp("left", ctx_r1.frozenLeft(col_r16.field), "px");
-    i0.ɵɵclassProp("kpt-data-table__cell--frozen", ctx_r1.isFrozen(col_r16.field))("kpt-data-table__cell--editable", ctx_r1.isEditable(col_r16) && !ctx_r1.isEditingCell(row_r12, col_r16.field));
-    i0.ɵɵattribute("data-align", col_r16.align ?? "start")("tabindex", ctx_r1.isEditable(col_r16) && !ctx_r1.isEditingCell(row_r12, col_r16.field) ? 0 : null)("aria-label", ctx_r1.isEditable(col_r16) && !ctx_r1.isEditingCell(row_r12, col_r16.field) ? ctx_r1.i18n.t("dataTable.editCell", i0.ɵɵpureFunction1(10, _c6, col_r16.header)) : null);
+    i0.ɵɵstyleProp("left", ctx_r1.frozenLeft(col_r18.field), "px");
+    i0.ɵɵclassProp("kpt-data-table__cell--frozen", ctx_r1.isFrozen(col_r18.field))("kpt-data-table__cell--editable", ctx_r1.isEditable(col_r18) && !ctx_r1.isEditingCell(row_r14, col_r18.field));
+    i0.ɵɵattribute("data-align", col_r18.align ?? "start")("tabindex", ctx_r1.isEditable(col_r18) && !ctx_r1.isEditingCell(row_r14, col_r18.field) ? 0 : null)("aria-label", ctx_r1.isEditable(col_r18) && !ctx_r1.isEditingCell(row_r14, col_r18.field) ? ctx_r1.i18n.t("dataTable.editCell", i0.ɵɵpureFunction1(10, _c6, col_r18.header)) : null);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.isEditingCell(row_r12, col_r16.field) ? 1 : (tmp_22_0 = ctx_r1.cellTemplate(col_r16.field)) ? 2 : 3, tmp_22_0);
+    i0.ɵɵconditional(ctx_r1.isEditingCell(row_r14, col_r18.field) ? 1 : (tmp_22_0 = ctx_r1.cellTemplate(col_r18.field)) ? 2 : 3, tmp_22_0);
 } }
-function KptDataTable_ng_template_19_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "tr", 29)(1, "td", 46);
+function KptDataTable_ng_template_20_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "tr", 33)(1, "td", 50);
     i0.ɵɵelementContainer(2, 26);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const row_r12 = i0.ɵɵnextContext().$implicit;
+    const row_r14 = i0.ɵɵnextContext().$implicit;
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
     i0.ɵɵattribute("colspan", ctx_r1.colspan());
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.rowDetailTpl())("ngTemplateOutletContext", i0.ɵɵpureFunction1(3, _c5, row_r12));
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.rowDetailTpl())("ngTemplateOutletContext", i0.ɵɵpureFunction1(3, _c5, row_r14));
 } }
-function KptDataTable_ng_template_19_Template(rf, ctx) { if (rf & 1) {
-    const _r11 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "tr", 27);
-    i0.ɵɵlistener("click", function KptDataTable_ng_template_19_Template_tr_click_0_listener() { const row_r12 = i0.ɵɵrestoreView(_r11).$implicit; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onRowClick(row_r12)); });
-    i0.ɵɵconditionalCreate(1, KptDataTable_ng_template_19_Conditional_1_Template, 3, 8, "td", 9);
-    i0.ɵɵconditionalCreate(2, KptDataTable_ng_template_19_Conditional_2_Template, 2, 6, "td", 10);
-    i0.ɵɵrepeaterCreate(3, KptDataTable_ng_template_19_For_4_Template, 4, 12, "td", 28, _forTrack0$1);
+function KptDataTable_ng_template_20_Template(rf, ctx) { if (rf & 1) {
+    const _r13 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "tr", 31);
+    i0.ɵɵlistener("click", function KptDataTable_ng_template_20_Template_tr_click_0_listener() { const row_r14 = i0.ɵɵrestoreView(_r13).$implicit; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onRowClick(row_r14)); });
+    i0.ɵɵconditionalCreate(1, KptDataTable_ng_template_20_Conditional_1_Template, 3, 8, "td", 9);
+    i0.ɵɵconditionalCreate(2, KptDataTable_ng_template_20_Conditional_2_Template, 2, 6, "td", 10);
+    i0.ɵɵrepeaterCreate(3, KptDataTable_ng_template_20_For_4_Template, 4, 12, "td", 32, _forTrack0$1);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(5, KptDataTable_ng_template_19_Conditional_5_Template, 3, 5, "tr", 29);
+    i0.ɵɵconditionalCreate(5, KptDataTable_ng_template_20_Conditional_5_Template, 3, 5, "tr", 33);
 } if (rf & 2) {
-    const row_r12 = ctx.$implicit;
+    const row_r14 = ctx.$implicit;
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵstyleProp("height", ctx_r1.virtualScroll() ? ctx_r1.rowHeight() : null, "px");
-    i0.ɵɵclassProp("kpt-data-table__row--selected", ctx_r1.isSelected(row_r12))("kpt-data-table__row--expanded", ctx_r1.hasRowDetail() && ctx_r1.isExpanded(row_r12));
+    i0.ɵɵclassProp("kpt-data-table__row--selected", ctx_r1.isSelected(row_r14))("kpt-data-table__row--expanded", ctx_r1.hasRowDetail() && ctx_r1.isExpanded(row_r14));
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.hasRowDetail() ? 1 : -1);
     i0.ɵɵadvance();
@@ -9431,114 +9741,114 @@ function KptDataTable_ng_template_19_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵrepeater(ctx_r1.visibleOrderedColumns());
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r1.hasRowDetail() && ctx_r1.isExpanded(row_r12) && !ctx_r1.virtualScroll() ? 5 : -1);
+    i0.ɵɵconditional(ctx_r1.hasRowDetail() && ctx_r1.isExpanded(row_r14) && !ctx_r1.virtualScroll() ? 5 : -1);
 } }
-function KptDataTable_ng_template_21_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+function KptDataTable_ng_template_22_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "th", 17);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵstyleProp("left", ctx_r1.expanderStickyLeft(), "px");
     i0.ɵɵclassProp("kpt-data-table__cell--frozen", ctx_r1.hasFrozen());
 } }
-function KptDataTable_ng_template_21_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+function KptDataTable_ng_template_22_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "th", 18);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵstyleProp("left", ctx_r1.checkboxStickyLeft(), "px");
     i0.ɵɵclassProp("kpt-data-table__cell--frozen", ctx_r1.hasFrozen());
 } }
-function KptDataTable_ng_template_21_For_4_Case_1_Template(rf, ctx) { if (rf & 1) {
-    const _r23 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "input", 55);
-    i0.ɵɵlistener("input", function KptDataTable_ng_template_21_For_4_Case_1_Template_input_input_0_listener($event) { i0.ɵɵrestoreView(_r23); const col_r24 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.setColumnFilter(col_r24.field, $event.target.value)); })("click", function KptDataTable_ng_template_21_For_4_Case_1_Template_input_click_0_listener($event) { return $event.stopPropagation(); });
+function KptDataTable_ng_template_22_For_4_Case_1_Template(rf, ctx) { if (rf & 1) {
+    const _r25 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "input", 58);
+    i0.ɵɵlistener("input", function KptDataTable_ng_template_22_For_4_Case_1_Template_input_input_0_listener($event) { i0.ɵɵrestoreView(_r25); const col_r26 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.setColumnFilter(col_r26.field, $event.target.value)); })("click", function KptDataTable_ng_template_22_For_4_Case_1_Template_input_click_0_listener($event) { return $event.stopPropagation(); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const col_r24 = i0.ɵɵnextContext().$implicit;
+    const col_r26 = i0.ɵɵnextContext().$implicit;
     const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("value", ctx_r1.columnFilters()[col_r24.field] || "");
-    i0.ɵɵattribute("placeholder", col_r24.filter.placeholder || "")("aria-label", ctx_r1.i18n.t("dataTable.filter", i0.ɵɵpureFunction1(3, _c6, col_r24.header)));
+    i0.ɵɵproperty("value", ctx_r1.columnFilters()[col_r26.field] || "");
+    i0.ɵɵattribute("placeholder", col_r26.filter.placeholder || "")("aria-label", ctx_r1.i18n.t("dataTable.filter", i0.ɵɵpureFunction1(3, _c6, col_r26.header)));
 } }
-function KptDataTable_ng_template_21_For_4_Case_2_Template(rf, ctx) { if (rf & 1) {
-    const _r25 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "input", 56);
-    i0.ɵɵlistener("input", function KptDataTable_ng_template_21_For_4_Case_2_Template_input_input_0_listener($event) { i0.ɵɵrestoreView(_r25); const col_r24 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onNumberFilter(col_r24.field, $event)); })("click", function KptDataTable_ng_template_21_For_4_Case_2_Template_input_click_0_listener($event) { return $event.stopPropagation(); });
+function KptDataTable_ng_template_22_For_4_Case_2_Template(rf, ctx) { if (rf & 1) {
+    const _r27 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "input", 59);
+    i0.ɵɵlistener("input", function KptDataTable_ng_template_22_For_4_Case_2_Template_input_input_0_listener($event) { i0.ɵɵrestoreView(_r27); const col_r26 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onNumberFilter(col_r26.field, $event)); })("click", function KptDataTable_ng_template_22_For_4_Case_2_Template_input_click_0_listener($event) { return $event.stopPropagation(); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const col_r24 = i0.ɵɵnextContext().$implicit;
+    const col_r26 = i0.ɵɵnextContext().$implicit;
     const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("value", ctx_r1.columnFilters()[col_r24.field] || "");
-    i0.ɵɵattribute("placeholder", col_r24.filter.placeholder || "")("aria-label", ctx_r1.i18n.t("dataTable.filter", i0.ɵɵpureFunction1(3, _c6, col_r24.header)));
+    i0.ɵɵproperty("value", ctx_r1.columnFilters()[col_r26.field] || "");
+    i0.ɵɵattribute("placeholder", col_r26.filter.placeholder || "")("aria-label", ctx_r1.i18n.t("dataTable.filter", i0.ɵɵpureFunction1(3, _c6, col_r26.header)));
 } }
-function KptDataTable_ng_template_21_For_4_Case_3_Template(rf, ctx) { if (rf & 1) {
-    const _r26 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kpt-select", 57);
-    i0.ɵɵlistener("valueChange", function KptDataTable_ng_template_21_For_4_Case_3_Template_kpt_select_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r26); const col_r24 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.setColumnFilter(col_r24.field, $event)); });
+function KptDataTable_ng_template_22_For_4_Case_3_Template(rf, ctx) { if (rf & 1) {
+    const _r28 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "kpt-select", 60);
+    i0.ɵɵlistener("valueChange", function KptDataTable_ng_template_22_For_4_Case_3_Template_kpt_select_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r28); const col_r26 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.setColumnFilter(col_r26.field, $event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const col_r24 = i0.ɵɵnextContext().$implicit;
+    const col_r26 = i0.ɵɵnextContext().$implicit;
     const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("options", col_r24.filter.options || i0.ɵɵpureFunction0(4, _c8))("multiple", !!col_r24.filter.multiple)("placeholder", col_r24.filter.placeholder || ctx_r1.i18n.t("dataTable.all"))("value", ctx_r1.columnFilters()[col_r24.field] ?? null);
+    i0.ɵɵproperty("options", col_r26.filter.options || i0.ɵɵpureFunction0(4, _c8))("multiple", !!col_r26.filter.multiple)("placeholder", col_r26.filter.placeholder || ctx_r1.i18n.t("dataTable.all"))("value", ctx_r1.columnFilters()[col_r26.field] ?? null);
 } }
-function KptDataTable_ng_template_21_For_4_Case_4_Template(rf, ctx) { if (rf & 1) {
-    const _r27 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 52)(1, "input", 56);
-    i0.ɵɵlistener("input", function KptDataTable_ng_template_21_For_4_Case_4_Template_input_input_1_listener($event) { i0.ɵɵrestoreView(_r27); const col_r24 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.setRangeFilter(col_r24.field, "min", $event)); })("click", function KptDataTable_ng_template_21_For_4_Case_4_Template_input_click_1_listener($event) { return $event.stopPropagation(); });
+function KptDataTable_ng_template_22_For_4_Case_4_Template(rf, ctx) { if (rf & 1) {
+    const _r29 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 55)(1, "input", 59);
+    i0.ɵɵlistener("input", function KptDataTable_ng_template_22_For_4_Case_4_Template_input_input_1_listener($event) { i0.ɵɵrestoreView(_r29); const col_r26 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.setRangeFilter(col_r26.field, "min", $event)); })("click", function KptDataTable_ng_template_22_For_4_Case_4_Template_input_click_1_listener($event) { return $event.stopPropagation(); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(2, "input", 56);
-    i0.ɵɵlistener("input", function KptDataTable_ng_template_21_For_4_Case_4_Template_input_input_2_listener($event) { i0.ɵɵrestoreView(_r27); const col_r24 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.setRangeFilter(col_r24.field, "max", $event)); })("click", function KptDataTable_ng_template_21_For_4_Case_4_Template_input_click_2_listener($event) { return $event.stopPropagation(); });
+    i0.ɵɵelementStart(2, "input", 59);
+    i0.ɵɵlistener("input", function KptDataTable_ng_template_22_For_4_Case_4_Template_input_input_2_listener($event) { i0.ɵɵrestoreView(_r29); const col_r26 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.setRangeFilter(col_r26.field, "max", $event)); })("click", function KptDataTable_ng_template_22_For_4_Case_4_Template_input_click_2_listener($event) { return $event.stopPropagation(); });
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const col_r24 = i0.ɵɵnextContext().$implicit;
+    const col_r26 = i0.ɵɵnextContext().$implicit;
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("value", ctx_r1.rangeVal(col_r24.field).min);
-    i0.ɵɵattribute("placeholder", ctx_r1.i18n.t("dataTable.min"))("aria-label", ctx_r1.i18n.t("dataTable.filterMin", i0.ɵɵpureFunction1(6, _c6, col_r24.header)));
+    i0.ɵɵproperty("value", ctx_r1.rangeVal(col_r26.field).min);
+    i0.ɵɵattribute("placeholder", ctx_r1.i18n.t("dataTable.min"))("aria-label", ctx_r1.i18n.t("dataTable.filterMin", i0.ɵɵpureFunction1(6, _c6, col_r26.header)));
     i0.ɵɵadvance();
-    i0.ɵɵproperty("value", ctx_r1.rangeVal(col_r24.field).max);
-    i0.ɵɵattribute("placeholder", ctx_r1.i18n.t("dataTable.max"))("aria-label", ctx_r1.i18n.t("dataTable.filterMax", i0.ɵɵpureFunction1(8, _c6, col_r24.header)));
+    i0.ɵɵproperty("value", ctx_r1.rangeVal(col_r26.field).max);
+    i0.ɵɵattribute("placeholder", ctx_r1.i18n.t("dataTable.max"))("aria-label", ctx_r1.i18n.t("dataTable.filterMax", i0.ɵɵpureFunction1(8, _c6, col_r26.header)));
 } }
-function KptDataTable_ng_template_21_For_4_Case_5_Template(rf, ctx) { if (rf & 1) {
-    const _r28 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 58);
-    i0.ɵɵlistener("click", function KptDataTable_ng_template_21_For_4_Case_5_Template_div_click_0_listener($event) { return $event.stopPropagation(); });
-    i0.ɵɵelementStart(1, "kpt-slider", 59);
-    i0.ɵɵlistener("valueChange", function KptDataTable_ng_template_21_For_4_Case_5_Template_kpt_slider_valueChange_1_listener($event) { i0.ɵɵrestoreView(_r28); const col_r24 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.setColumnFilter(col_r24.field, $event)); });
+function KptDataTable_ng_template_22_For_4_Case_5_Template(rf, ctx) { if (rf & 1) {
+    const _r30 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 61);
+    i0.ɵɵlistener("click", function KptDataTable_ng_template_22_For_4_Case_5_Template_div_click_0_listener($event) { return $event.stopPropagation(); });
+    i0.ɵɵelementStart(1, "kpt-slider", 62);
+    i0.ɵɵlistener("valueChange", function KptDataTable_ng_template_22_For_4_Case_5_Template_kpt_slider_valueChange_1_listener($event) { i0.ɵɵrestoreView(_r30); const col_r26 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.setColumnFilter(col_r26.field, $event)); });
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const col_r24 = i0.ɵɵnextContext().$implicit;
+    const col_r26 = i0.ɵɵnextContext().$implicit;
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("min", col_r24.filter.min ?? 0)("max", col_r24.filter.max ?? 100)("step", col_r24.filter.step ?? 1)("value", ctx_r1.sliderVal(col_r24));
+    i0.ɵɵproperty("min", col_r26.filter.min ?? 0)("max", col_r26.filter.max ?? 100)("step", col_r26.filter.step ?? 1)("value", ctx_r1.sliderVal(col_r26));
 } }
-function KptDataTable_ng_template_21_For_4_Case_6_Template(rf, ctx) { if (rf & 1) {
-    const _r29 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kpt-date-range", 60);
-    i0.ɵɵlistener("valueChange", function KptDataTable_ng_template_21_For_4_Case_6_Template_kpt_date_range_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r29); const col_r24 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.setColumnFilter(col_r24.field, $event)); });
+function KptDataTable_ng_template_22_For_4_Case_6_Template(rf, ctx) { if (rf & 1) {
+    const _r31 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "kpt-date-range", 63);
+    i0.ɵɵlistener("valueChange", function KptDataTable_ng_template_22_For_4_Case_6_Template_kpt_date_range_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r31); const col_r26 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.setColumnFilter(col_r26.field, $event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const col_r24 = i0.ɵɵnextContext().$implicit;
+    const col_r26 = i0.ɵɵnextContext().$implicit;
     const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("placeholder", col_r24.filter.placeholder || ctx_r1.i18n.t("dataTable.dateRange"))("value", ctx_r1.columnFilters()[col_r24.field] || i0.ɵɵpureFunction0(2, _c10));
+    i0.ɵɵproperty("placeholder", col_r26.filter.placeholder || ctx_r1.i18n.t("dataTable.dateRange"))("value", ctx_r1.columnFilters()[col_r26.field] || i0.ɵɵpureFunction0(2, _c10));
 } }
-function KptDataTable_ng_template_21_For_4_Template(rf, ctx) { if (rf & 1) {
+function KptDataTable_ng_template_22_For_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "th");
-    i0.ɵɵconditionalCreate(1, KptDataTable_ng_template_21_For_4_Case_1_Template, 1, 5, "input", 49)(2, KptDataTable_ng_template_21_For_4_Case_2_Template, 1, 5, "input", 50)(3, KptDataTable_ng_template_21_For_4_Case_3_Template, 1, 5, "kpt-select", 51)(4, KptDataTable_ng_template_21_For_4_Case_4_Template, 3, 10, "div", 52)(5, KptDataTable_ng_template_21_For_4_Case_5_Template, 2, 4, "div", 53)(6, KptDataTable_ng_template_21_For_4_Case_6_Template, 1, 3, "kpt-date-range", 54);
+    i0.ɵɵconditionalCreate(1, KptDataTable_ng_template_22_For_4_Case_1_Template, 1, 5, "input", 52)(2, KptDataTable_ng_template_22_For_4_Case_2_Template, 1, 5, "input", 53)(3, KptDataTable_ng_template_22_For_4_Case_3_Template, 1, 5, "kpt-select", 54)(4, KptDataTable_ng_template_22_For_4_Case_4_Template, 3, 10, "div", 55)(5, KptDataTable_ng_template_22_For_4_Case_5_Template, 2, 4, "div", 56)(6, KptDataTable_ng_template_22_For_4_Case_6_Template, 1, 3, "kpt-date-range", 57);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     let tmp_19_0;
-    const col_r24 = ctx.$implicit;
+    const col_r26 = ctx.$implicit;
     const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵstyleProp("width", col_r24.width)("left", ctx_r1.frozenLeft(col_r24.field), "px");
-    i0.ɵɵclassProp("kpt-data-table__cell--frozen", ctx_r1.isFrozen(col_r24.field));
-    i0.ɵɵattribute("data-align", col_r24.align ?? "start");
+    i0.ɵɵstyleProp("width", col_r26.width)("left", ctx_r1.frozenLeft(col_r26.field), "px");
+    i0.ɵɵclassProp("kpt-data-table__cell--frozen", ctx_r1.isFrozen(col_r26.field));
+    i0.ɵɵattribute("data-align", col_r26.align ?? "start");
     i0.ɵɵadvance();
-    i0.ɵɵconditional((tmp_19_0 = col_r24.filter?.type) === "text" ? 1 : tmp_19_0 === "number" ? 2 : tmp_19_0 === "select" ? 3 : tmp_19_0 === "numberRange" ? 4 : tmp_19_0 === "slider" ? 5 : tmp_19_0 === "dateRange" ? 6 : -1);
+    i0.ɵɵconditional((tmp_19_0 = col_r26.filter?.type) === "text" ? 1 : tmp_19_0 === "number" ? 2 : tmp_19_0 === "select" ? 3 : tmp_19_0 === "numberRange" ? 4 : tmp_19_0 === "slider" ? 5 : tmp_19_0 === "dateRange" ? 6 : -1);
 } }
-function KptDataTable_ng_template_21_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "tr", 47);
-    i0.ɵɵconditionalCreate(1, KptDataTable_ng_template_21_Conditional_1_Template, 1, 4, "th", 9);
-    i0.ɵɵconditionalCreate(2, KptDataTable_ng_template_21_Conditional_2_Template, 1, 4, "th", 10);
-    i0.ɵɵrepeaterCreate(3, KptDataTable_ng_template_21_For_4_Template, 7, 8, "th", 48, _forTrack0$1);
+function KptDataTable_ng_template_22_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "tr", 51);
+    i0.ɵɵconditionalCreate(1, KptDataTable_ng_template_22_Conditional_1_Template, 1, 4, "th", 9);
+    i0.ɵɵconditionalCreate(2, KptDataTable_ng_template_22_Conditional_2_Template, 1, 4, "th", 10);
+    i0.ɵɵrepeaterCreate(3, KptDataTable_ng_template_22_For_4_Template, 7, 8, "th", 30, _forTrack0$1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -9549,12 +9859,12 @@ function KptDataTable_ng_template_21_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵrepeater(ctx_r1.visibleOrderedColumns());
 } }
-function KptDataTable_Conditional_23_Template(rf, ctx) { if (rf & 1) {
-    const _r30 = i0.ɵɵgetCurrentView();
+function KptDataTable_Conditional_24_Template(rf, ctx) { if (rf & 1) {
+    const _r32 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 12);
     i0.ɵɵprojection(1);
-    i0.ɵɵelementStart(2, "kpt-paginator", 61);
-    i0.ɵɵlistener("pageIndexChange", function KptDataTable_Conditional_23_Template_kpt_paginator_pageIndexChange_2_listener($event) { i0.ɵɵrestoreView(_r30); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.pageIndex.set($event)); })("pageSizeChange", function KptDataTable_Conditional_23_Template_kpt_paginator_pageSizeChange_2_listener($event) { i0.ɵɵrestoreView(_r30); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.pageSizeState.set($event)); });
+    i0.ɵɵelementStart(2, "kpt-paginator", 64);
+    i0.ɵɵlistener("pageIndexChange", function KptDataTable_Conditional_24_Template_kpt_paginator_pageIndexChange_2_listener($event) { i0.ɵɵrestoreView(_r32); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.pageIndex.set($event)); })("pageSizeChange", function KptDataTable_Conditional_24_Template_kpt_paginator_pageSizeChange_2_listener($event) { i0.ɵɵrestoreView(_r32); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.pageSizeState.set($event)); });
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -9637,6 +9947,15 @@ class KptDataTable {
         this.expandable = input(false, { ...(ngDevMode ? { debugName: "expandable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** Zezwala na rozwinięcie wielu wierszy naraz (domyślnie tak). */
         this.multiExpand = input(true, { ...(ngDevMode ? { debugName: "multiExpand" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Etykieta wiersza podsumowania; bez wartości używa i18n (`dataTable.total`). */
+        this.summaryLabel = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "summaryLabel" }] : /* istanbul ignore next */ []));
+        /**
+         * Gotowe wartości podsumowania (pole → wartość). Nadpisują wyliczenia po stronie klienta,
+         * a w trybie `lazy` są ich jedynym źródłem (tabela ma wtedy tylko bieżącą stronę).
+         */
+        this.summaryValues = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "summaryValues" }] : /* istanbul ignore next */ []));
         // ── Model / zdarzenia ──
         this.selection = model([], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "selection" }] : /* istanbul ignore next */ []));
@@ -9804,12 +10123,65 @@ class KptDataTable {
             return rows.slice(start, start + size);
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "paged" }] : /* istanbul ignore next */ []));
-        this.colspan = computed(() => this.visibleOrderedColumns().length +
-            (this.selectable() !== 'none' ? 1 : 0) +
-            (this.hasRowDetail() ? 1 : 0), /* @ts-ignore */
+        /** Wiodące kolumny systemowe (rozwijanie + zaznaczanie) — poza `visibleOrderedColumns()`. */
+        this.leadingCells = computed(() => (this.selectable() !== 'none' ? 1 : 0) + (this.hasRowDetail() ? 1 : 0), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "leadingCells" }] : /* istanbul ignore next */ []));
+        this.colspan = computed(() => this.visibleOrderedColumns().length + this.leadingCells(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "colspan" }] : /* istanbul ignore next */ []));
         this.displayCount = computed(() => this.virtualScroll() ? this.sorted().length : this.paged().length, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "displayCount" }] : /* istanbul ignore next */ []));
+        // ── Wiersz podsumowania (tfoot) ──
+        /** Etykieta wiersza podsumowania (input albo domyślna z i18n). */
+        this.summaryLabelText = computed(() => this.summaryLabel() ?? this.i18n.t('dataTable.total'), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "summaryLabelText" }] : /* istanbul ignore next */ []));
+        /**
+         * Zbiór do agregacji: wszystkie wiersze po filtrach (a więc ze wszystkich stron — `paged()`
+         * tnie dopiero po tym kroku). Przy `lazy` tabela ma tylko bieżącą stronę, więc nie liczy nic
+         * sama — jedynym źródłem jest wtedy `summaryValues`.
+         */
+        this.summarySource = computed(() => this.lazy() ? [] : this.filtered(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "summarySource" }] : /* istanbul ignore next */ []));
+        /** Pola z podsumowaniem: kolumny z `summary` (tylko widoczne) + klucze podane w `summaryValues`. */
+        this.summaryFields = computed(() => {
+            const cols = this.visibleOrderedColumns();
+            const overrides = this.summaryValues() ?? {};
+            return cols.filter((c) => c.summary || c.field in overrides).map((c) => c.field);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "summaryFields" }] : /* istanbul ignore next */ []));
+        this.hasSummary = computed(() => this.summaryFields().length > 0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasSummary" }] : /* istanbul ignore next */ []));
+        /** Indeks pierwszej podsumowywanej kolumny — do niej scala się etykieta. */
+        this.summaryStartIndex = computed(() => {
+            const first = this.summaryFields()[0];
+            return first === undefined ? -1 : this.visibleOrderedColumns().findIndex((c) => c.field === first);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "summaryStartIndex" }] : /* istanbul ignore next */ []));
+        /**
+         * Colspan komórki z etykietą: kolumny systemowe + kolumny przed pierwszą podsumowywaną.
+         * Zero (pierwsza widoczna kolumna jest liczona) = etykieta nie ma się gdzie zmieścić i nie
+         * renderuje się wcale.
+         */
+        this.summaryLabelSpan = computed(() => this.leadingCells() + this.summaryStartIndex(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "summaryLabelSpan" }] : /* istanbul ignore next */ []));
+        /** Gotowe teksty komórek podsumowania (pole → tekst); pusty string dla braku wartości. */
+        this.summaryTexts = computed(() => {
+            const rows = this.summarySource();
+            const overrides = this.summaryValues() ?? {};
+            const map = new Map();
+            for (const col of this.visibleOrderedColumns()) {
+                if (!col.summary && !(col.field in overrides))
+                    continue;
+                const raw = col.field in overrides
+                    ? overrides[col.field]
+                    : typeof col.summary.fn === 'function'
+                        ? col.summary.fn(rows)
+                        : aggregate(rows, col.field, col.summary.fn);
+                const format = col.summary?.format;
+                map.set(col.field, format ? format(raw) : raw == null ? '' : String(raw));
+            }
+            return map;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "summaryTexts" }] : /* istanbul ignore next */ []));
         /** Mapa pole → przesunięcie left (px) dla wiodących zamrożonych kolumn. */
         /** Suma szerokości wiodących kolumn systemowych (rozwijanie + zaznaczanie) w px. */
         this.leadingStickyWidth = computed(() => {
@@ -10149,6 +10521,9 @@ class KptDataTable {
             }
         });
     }
+    summaryText(field) {
+        return this.summaryTexts().get(field) ?? '';
+    }
     // ── Kolumny zamrożone (sticky, wiodące) ──
     parseWidthPx(width) {
         if (!width)
@@ -10245,7 +10620,7 @@ class KptDataTable {
             i0.ɵɵqueryAdvance(3);
         } }, hostAttrs: [1, "kpt-data-table"], hostVars: 2, hostBindings: function KptDataTable_HostBindings(rf, ctx) { if (rf & 2) {
             i0.ɵɵstyleProp("--%NS%kpt-thead-offset", ctx.theadOffset() + "px");
-        } }, inputs: { columns: [1, "columns"], data: [1, "data"], filterable: [1, "filterable"], filterRowPosition: [1, "filterRowPosition"], pageSize: [1, "pageSize"], pageSizeOptions: [1, "pageSizeOptions"], selectable: [1, "selectable"], loading: [1, "loading"], emptyMessage: [1, "emptyMessage"], rowKey: [1, "rowKey"], scrollHeight: [1, "scrollHeight"], virtualScroll: [1, "virtualScroll"], rowHeight: [1, "rowHeight"], reorderable: [1, "reorderable"], exportable: [1, "exportable"], exportFilename: [1, "exportFilename"], lazy: [1, "lazy"], totalRecords: [1, "totalRecords"], expandable: [1, "expandable"], multiExpand: [1, "multiExpand"], selection: [1, "selection"], expandedRows: [1, "expandedRows"], hiddenFields: [1, "hiddenFields"] }, outputs: { selection: "selectionChange", expandedRows: "expandedRowsChange", hiddenFields: "hiddenFieldsChange", rowClick: "rowClick", lazyLoad: "lazyLoad", cellEdit: "cellEdit" }, ngContentSelectors: _c4, decls: 24, vars: 13, consts: [["scrollEl", ""], ["theadEl", ""], ["rowTpl", ""], ["filterRowTpl", ""], ["editorHost", ""], [1, "kpt-data-table__toolbar"], [1, "kpt-data-table__scroll", 3, "scroll"], [1, "kpt-data-table__table"], [3, "ngTemplateOutlet"], [1, "kpt-data-table__expander", 3, "kpt-data-table__cell--frozen", "left"], [1, "kpt-data-table__checkbox", 3, "kpt-data-table__cell--frozen", "left"], [3, "width", "left", "kpt-data-table__cell--frozen", "kpt-data-table__th--sortable", "kpt-data-table__th--draggable", "kpt-data-table__th--dragover"], [1, "kpt-data-table__pager"], ["type", "search", 1, "kpt-data-table__filter", 3, "value"], ["variant", "outline", "size", "sm"], ["type", "search", 1, "kpt-data-table__filter", 3, "input", "value"], ["variant", "outline", "size", "sm", 3, "click"], [1, "kpt-data-table__expander"], [1, "kpt-data-table__checkbox"], ["type", "checkbox", 3, "change", "checked", "indeterminate"], [3, "click", "dragstart", "dragover", "drop", "dragend"], ["name", "grip-vertical", 1, "kpt-data-table__grip"], [1, "kpt-data-table__sort", 3, "kpt-data-table__sort--active", "name"], [1, "kpt-data-table__sort", 3, "name"], [1, "kpt-data-table__state"], ["aria-hidden", "true", 1, "kpt-data-table__spacer"], [3, "ngTemplateOutlet", "ngTemplateOutletContext"], [3, "click"], [3, "left", "kpt-data-table__cell--frozen", "kpt-data-table__cell--editable"], [1, "kpt-data-table__detail-row"], ["type", "button", 1, "kpt-data-table__expander-btn", 3, "click"], ["name", "chevron-right"], ["type", "checkbox", 3, "click", "change", "checked"], [3, "click", "keydown.enter"], [1, "kpt-data-table__editor"], [1, "kpt-data-table__editor", 3, "click", "focusout"], [3, "value", "placeholder"], [3, "value", "min", "max", "step"], [3, "value", "open"], [3, "options", "placeholder", "value", "open"], ["multiple", "", "filter", "", 3, "options", "placeholder", "value", "open"], [3, "valueChange", "keydown.enter", "keydown.escape", "value", "placeholder"], [3, "valueChange", "keydown.enter", "keydown.escape", "value", "min", "max", "step"], [3, "valueChange", "openChange", "value", "open"], [3, "valueChange", "openChange", "options", "placeholder", "value", "open"], ["multiple", "", "filter", "", 3, "valueChange", "openChange", "options", "placeholder", "value", "open"], [1, "kpt-data-table__detail"], [1, "kpt-data-table__filter-row"], [3, "width", "left", "kpt-data-table__cell--frozen"], ["type", "search", 1, "kpt-data-table__fcell", 3, "value"], ["type", "text", "inputmode", "numeric", 1, "kpt-data-table__fcell", 3, "value"], ["filter", "", 3, "options", "multiple", "placeholder", "value"], [1, "kpt-data-table__frange"], [1, "kpt-data-table__fslider"], [3, "placeholder", "value"], ["type", "search", 1, "kpt-data-table__fcell", 3, "input", "click", "value"], ["type", "text", "inputmode", "numeric", 1, "kpt-data-table__fcell", 3, "input", "click", "value"], ["filter", "", 3, "valueChange", "options", "multiple", "placeholder", "value"], [1, "kpt-data-table__fslider", 3, "click"], ["range", "", "showValue", "", 3, "valueChange", "min", "max", "step", "value"], [3, "valueChange", "placeholder", "value"], [3, "pageIndexChange", "pageSizeChange", "length", "pageIndex", "pageSize", "pageSizeOptions"]], template: function KptDataTable_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { columns: [1, "columns"], data: [1, "data"], filterable: [1, "filterable"], filterRowPosition: [1, "filterRowPosition"], pageSize: [1, "pageSize"], pageSizeOptions: [1, "pageSizeOptions"], selectable: [1, "selectable"], loading: [1, "loading"], emptyMessage: [1, "emptyMessage"], rowKey: [1, "rowKey"], scrollHeight: [1, "scrollHeight"], virtualScroll: [1, "virtualScroll"], rowHeight: [1, "rowHeight"], reorderable: [1, "reorderable"], exportable: [1, "exportable"], exportFilename: [1, "exportFilename"], lazy: [1, "lazy"], totalRecords: [1, "totalRecords"], expandable: [1, "expandable"], multiExpand: [1, "multiExpand"], summaryLabel: [1, "summaryLabel"], summaryValues: [1, "summaryValues"], selection: [1, "selection"], expandedRows: [1, "expandedRows"], hiddenFields: [1, "hiddenFields"] }, outputs: { selection: "selectionChange", expandedRows: "expandedRowsChange", hiddenFields: "hiddenFieldsChange", rowClick: "rowClick", lazyLoad: "lazyLoad", cellEdit: "cellEdit" }, ngContentSelectors: _c4, decls: 25, vars: 14, consts: [["scrollEl", ""], ["theadEl", ""], ["rowTpl", ""], ["filterRowTpl", ""], ["editorHost", ""], [1, "kpt-data-table__toolbar"], [1, "kpt-data-table__scroll", 3, "scroll"], [1, "kpt-data-table__table"], [3, "ngTemplateOutlet"], [1, "kpt-data-table__expander", 3, "kpt-data-table__cell--frozen", "left"], [1, "kpt-data-table__checkbox", 3, "kpt-data-table__cell--frozen", "left"], [3, "width", "left", "kpt-data-table__cell--frozen", "kpt-data-table__th--sortable", "kpt-data-table__th--draggable", "kpt-data-table__th--dragover"], [1, "kpt-data-table__pager"], ["type", "search", 1, "kpt-data-table__filter", 3, "value"], ["variant", "outline", "size", "sm"], ["type", "search", 1, "kpt-data-table__filter", 3, "input", "value"], ["variant", "outline", "size", "sm", 3, "click"], [1, "kpt-data-table__expander"], [1, "kpt-data-table__checkbox"], ["type", "checkbox", 3, "change", "checked", "indeterminate"], [3, "click", "dragstart", "dragover", "drop", "dragend"], ["name", "grip-vertical", 1, "kpt-data-table__grip"], [1, "kpt-data-table__sort", 3, "kpt-data-table__sort--active", "name"], [1, "kpt-data-table__sort", 3, "name"], [1, "kpt-data-table__state"], ["aria-hidden", "true", 1, "kpt-data-table__spacer"], [3, "ngTemplateOutlet", "ngTemplateOutletContext"], [1, "kpt-data-table__summary"], [1, "kpt-data-table__summary-label", 3, "kpt-data-table__cell--frozen", "left"], [1, "kpt-data-table__summary-label"], [3, "width", "left", "kpt-data-table__cell--frozen"], [3, "click"], [3, "left", "kpt-data-table__cell--frozen", "kpt-data-table__cell--editable"], [1, "kpt-data-table__detail-row"], ["type", "button", 1, "kpt-data-table__expander-btn", 3, "click"], ["name", "chevron-right"], ["type", "checkbox", 3, "click", "change", "checked"], [3, "click", "keydown.enter"], [1, "kpt-data-table__editor"], [1, "kpt-data-table__editor", 3, "click", "focusout"], [3, "value", "placeholder"], [3, "value", "min", "max", "step"], [3, "value", "open"], [3, "options", "placeholder", "value", "open"], ["multiple", "", "filter", "", 3, "options", "placeholder", "value", "open"], [3, "valueChange", "keydown.enter", "keydown.escape", "value", "placeholder"], [3, "valueChange", "keydown.enter", "keydown.escape", "value", "min", "max", "step"], [3, "valueChange", "openChange", "value", "open"], [3, "valueChange", "openChange", "options", "placeholder", "value", "open"], ["multiple", "", "filter", "", 3, "valueChange", "openChange", "options", "placeholder", "value", "open"], [1, "kpt-data-table__detail"], [1, "kpt-data-table__filter-row"], ["type", "search", 1, "kpt-data-table__fcell", 3, "value"], ["type", "text", "inputmode", "numeric", 1, "kpt-data-table__fcell", 3, "value"], ["filter", "", 3, "options", "multiple", "placeholder", "value"], [1, "kpt-data-table__frange"], [1, "kpt-data-table__fslider"], [3, "placeholder", "value"], ["type", "search", 1, "kpt-data-table__fcell", 3, "input", "click", "value"], ["type", "text", "inputmode", "numeric", 1, "kpt-data-table__fcell", 3, "input", "click", "value"], ["filter", "", 3, "valueChange", "options", "multiple", "placeholder", "value"], [1, "kpt-data-table__fslider", 3, "click"], ["range", "", "showValue", "", 3, "valueChange", "min", "max", "step", "value"], [3, "valueChange", "placeholder", "value"], [3, "pageIndexChange", "pageSizeChange", "length", "pageIndex", "pageSize", "pageSizeOptions"]], template: function KptDataTable_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef(_c3);
             i0.ɵɵconditionalCreate(0, KptDataTable_Conditional_0_Template, 3, 2, "div", 5);
             i0.ɵɵelementStart(1, "div", 6, 0);
@@ -10261,9 +10636,11 @@ class KptDataTable {
             i0.ɵɵelementEnd();
             i0.ɵɵelementStart(14, "tbody");
             i0.ɵɵconditionalCreate(15, KptDataTable_Conditional_15_Template, 3, 2, "tr")(16, KptDataTable_Conditional_16_Template, 3, 2, "tr")(17, KptDataTable_Conditional_17_Template, 4, 2)(18, KptDataTable_Conditional_18_Template, 2, 0);
-            i0.ɵɵelementEnd()()();
-            i0.ɵɵtemplate(19, KptDataTable_ng_template_19_Template, 6, 9, "ng-template", null, 2, i0.ɵɵtemplateRefExtractor)(21, KptDataTable_ng_template_21_Template, 5, 2, "ng-template", null, 3, i0.ɵɵtemplateRefExtractor);
-            i0.ɵɵconditionalCreate(23, KptDataTable_Conditional_23_Template, 3, 4, "div", 12);
+            i0.ɵɵelementEnd();
+            i0.ɵɵconditionalCreate(19, KptDataTable_Conditional_19_Template, 5, 1, "tfoot");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵtemplate(20, KptDataTable_ng_template_20_Template, 6, 9, "ng-template", null, 2, i0.ɵɵtemplateRefExtractor)(22, KptDataTable_ng_template_22_Template, 5, 2, "ng-template", null, 3, i0.ɵɵtemplateRefExtractor);
+            i0.ɵɵconditionalCreate(24, KptDataTable_Conditional_24_Template, 3, 4, "div", 12);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.filterable() || ctx.exportable() ? 0 : -1);
             i0.ɵɵadvance();
@@ -10282,8 +10659,10 @@ class KptDataTable {
             i0.ɵɵconditional(ctx.hasColumnFilters() && ctx.filterRowPosition() === "bottom" ? 13 : -1);
             i0.ɵɵadvance(2);
             i0.ɵɵconditional(ctx.loading() ? 15 : ctx.displayCount() === 0 ? 16 : ctx.virtualScroll() ? 17 : 18);
-            i0.ɵɵadvance(8);
-            i0.ɵɵconditional(ctx.pageSize() > 0 && !ctx.virtualScroll() ? 23 : -1);
+            i0.ɵɵadvance(4);
+            i0.ɵɵconditional(ctx.hasSummary() && !ctx.loading() && ctx.displayCount() > 0 ? 19 : -1);
+            i0.ɵɵadvance(5);
+            i0.ɵɵconditional(ctx.pageSize() > 0 && !ctx.virtualScroll() ? 24 : -1);
         } }, dependencies: [NgTemplateOutlet,
             KptButton,
             KptIcon,
@@ -10293,7 +10672,7 @@ class KptDataTable {
             KptSlider,
             KptInput,
             KptInputNumber,
-            KptDatepicker], styles: ["@layer kpt.components{.kpt-data-table{display:flex;flex-direction:column;background:var(--%NS%kpt-table-bg);color:var(--%NS%kpt-table-fg);border:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-table-border);border-radius:var(--%NS%kpt-table-radius, .75rem);overflow:hidden;flex-grow:1}.kpt-data-table__toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--%NS%kpt-space-3, .75rem);padding:var(--%NS%kpt-space-3, .75rem);border-bottom:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-table-border)}.kpt-data-table__filter{width:100%;max-width:20rem;height:2.25rem;padding-inline:var(--%NS%kpt-space-3, .75rem);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)}.kpt-data-table__filter:focus-visible{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-data-table__scroll{overflow:auto}.kpt-data-table__pager{display:flex;align-items:center;gap:var(--%NS%kpt-space-2, .5rem)}.kpt-data-table__pager [kptPaginatorActions]{margin-inline-start:.5rem}.kpt-data-table__pager kpt-paginator{flex:1 1 auto;min-width:0}.kpt-data-table__table{width:100%;border-collapse:collapse;font-size:var(--%NS%kpt-font-size-sm, .875rem)}.kpt-data-table__table--frozen{width:max-content;min-width:100%}.kpt-data-table__table th,.kpt-data-table__table td{padding:var(--%NS%kpt-table-cell-padding, .75rem);text-align:start;border-bottom:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-table-border)}.kpt-data-table__table th[data-align=center],.kpt-data-table__table td[data-align=center]{text-align:center}.kpt-data-table__table th[data-align=end],.kpt-data-table__table td[data-align=end]{text-align:end}.kpt-data-table__table thead th{position:sticky;top:0;z-index:1;background:var(--%NS%kpt-table-header-bg);color:var(--%NS%kpt-table-header-fg);font-weight:var(--%NS%kpt-font-weight-semibold, 600);white-space:nowrap;-webkit-user-select:none;user-select:none}.kpt-data-table__table thead tr:nth-child(2) th{top:var(--%NS%kpt-thead-offset, 0px)}.kpt-data-table__filter-row th{padding:var(--%NS%kpt-space-2, .5rem);font-weight:var(--%NS%kpt-font-weight-normal, 400);cursor:auto}.kpt-data-table__fcell{width:100%;height:2rem;padding-inline:var(--%NS%kpt-space-2, .5rem);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:inherit}.kpt-data-table__fcell:focus-visible{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-data-table__filter-row kpt-select,.kpt-data-table__filter-row kpt-date-range{display:block;width:100%;font-weight:var(--%NS%kpt-font-weight-normal, 400)}.kpt-data-table__frange{display:flex;gap:var(--%NS%kpt-space-2, .5rem)}.kpt-data-table__frange .kpt-data-table__fcell{min-width:0}.kpt-data-table__fslider .kpt-slider-host{width:100%}.kpt-data-table__fslider .kpt-slider__value{min-width:auto;font-size:var(--%NS%kpt-font-size-xs, .75rem);color:var(--%NS%kpt-color-on-surface-muted)}.kpt-data-table__th--sortable{cursor:pointer}.kpt-data-table__th--%NS%sortable:hover{color:var(--%NS%kpt-color-on-surface)}.kpt-data-table__cell--editable{cursor:pointer}.kpt-data-table__cell--%NS%editable:hover{background:var(--%NS%kpt-table-row-hover)}.kpt-data-table__cell--%NS%editable:focus-visible{outline:var(--%NS%kpt-border-width-medium, 2px) solid var(--%NS%kpt-color-focus-ring);outline-offset:-2px}.kpt-data-table__editor{display:block;min-width:8rem}.kpt-data-table__editor .kpt-input-number-host{max-width:6.5rem}.kpt-data-table__editor .kpt-input-number__btn{width:1.75rem}.kpt-data-table__sort{margin-inline-start:.35em;opacity:.35}.kpt-data-table__sort--active{opacity:1}.kpt-data-table__th--draggable{cursor:grab}.kpt-data-table__th--%NS%draggable:active{cursor:grabbing}.kpt-data-table__th--dragover{box-shadow:inset 2px 0 0 0 var(--%NS%kpt-color-primary)}.kpt-data-table__grip{margin-inline-end:.4em;opacity:.45}.kpt-data-table__checkbox{width:1px;white-space:nowrap;text-align:center}.kpt-data-table__checkbox input[type=checkbox]{appearance:none;-webkit-appearance:none;position:relative;display:inline-block;width:1.15rem;height:1.15rem;margin:0;vertical-align:middle;cursor:pointer;border:var(--%NS%kpt-border-width-medium, 2px) solid var(--%NS%kpt-form-field-border);border-radius:var(--%NS%kpt-radius-sm, .25rem);background:var(--%NS%kpt-form-field-bg);transition:background-color var(--%NS%kpt-motion-duration-fast, .12s) var(--%NS%kpt-motion-easing-standard),border-color var(--%NS%kpt-motion-duration-fast, .12s) var(--%NS%kpt-motion-easing-standard)}.kpt-data-table__checkbox input[type=checkbox]:after{content:\"\";position:absolute;inset:0;opacity:0;background-color:var(--%NS%kpt-color-on-primary);transition:opacity var(--%NS%kpt-motion-duration-fast, .12s) var(--%NS%kpt-motion-easing-standard);-webkit-mask:no-repeat center/.85rem;mask:no-repeat center/.85rem}.kpt-data-table__checkbox input[type=checkbox]:checked,.kpt-data-table__checkbox input[type=checkbox]:indeterminate{background:var(--%NS%kpt-color-primary);border-color:var(--%NS%kpt-color-primary)}.kpt-data-table__checkbox input[type=checkbox]:checked:after{opacity:1;-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13 4.5 6.5 11 3 7.5' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13 4.5 6.5 11 3 7.5' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\")}.kpt-data-table__checkbox input[type=checkbox]:indeterminate:after{opacity:1;-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8h9' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8h9' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round'/%3E%3C/svg%3E\")}.kpt-data-table__checkbox input[type=checkbox]:focus-visible{outline:var(--%NS%kpt-border-width-medium, 2px) solid var(--%NS%kpt-color-focus-ring);outline-offset:2px}.kpt-data-table__expander{width:2.5rem;min-width:2.5rem;text-align:center;white-space:nowrap}.kpt-data-table__expander-btn{display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;padding:0;border:none;border-radius:var(--%NS%kpt-radius-sm, .25rem);background:transparent;color:var(--%NS%kpt-color-on-surface-muted);cursor:pointer;transition:background-color var(--%NS%kpt-motion-duration-fast, .12s) var(--%NS%kpt-motion-easing-standard),color var(--%NS%kpt-motion-duration-fast, .12s) var(--%NS%kpt-motion-easing-standard)}.kpt-data-table__expander-btn kpt-icon{display:inline-flex;transition:transform var(--%NS%kpt-motion-duration-fast, .12s) var(--%NS%kpt-motion-easing-standard)}.kpt-data-table__expander-btn:hover{background:var(--%NS%kpt-table-row-hover);color:var(--%NS%kpt-color-on-surface)}.kpt-data-table__expander-btn:focus-visible{outline:var(--%NS%kpt-border-width-medium, 2px) solid var(--%NS%kpt-color-focus-ring);outline-offset:2px}.kpt-data-table__expander-btn--open{color:var(--%NS%kpt-color-primary)}.kpt-data-table__expander-btn--open kpt-icon{transform:rotate(90deg)}.kpt-data-table__detail-row>.kpt-data-table__detail{padding:var(--%NS%kpt-space-4, 1rem);background:var(--%NS%kpt-table-detail-bg, var(--%NS%kpt-color-surface-variant, var(--%NS%kpt-table-row-hover)));border-bottom:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-table-border);box-shadow:inset 3px 0 0 0 var(--%NS%kpt-color-primary)}.kpt-data-table tbody tr{transition:background-color var(--%NS%kpt-motion-duration-fast, .12s) var(--%NS%kpt-motion-easing-standard)}.kpt-data-table tbody tr:hover{background:var(--%NS%kpt-table-row-hover)}.kpt-data-table tbody tr.kpt-data-table__detail-row:hover{background:transparent}.kpt-data-table__row--selected{background:var(--%NS%kpt-table-row-selected)!important}.kpt-data-table__row--expanded{background:var(--%NS%kpt-table-row-hover)}.kpt-data-table__table--frozen .kpt-data-table__checkbox{width:3rem;min-width:3rem}.kpt-data-table__table--frozen .kpt-data-table__expander{width:2.5rem;min-width:2.5rem}.kpt-data-table__cell--frozen{position:sticky;z-index:1;background:var(--%NS%kpt-table-bg);border-inline-end:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-table-border)}.kpt-data-table thead th.kpt-data-table__cell--frozen{z-index:3;background:var(--%NS%kpt-table-header-bg)}.kpt-data-table tbody tr:hover .kpt-data-table__cell--frozen{background:var(--%NS%kpt-table-row-hover)}.kpt-data-table__row--selected.kpt-data-table__row--selected .kpt-data-table__cell--frozen,.kpt-data-table tbody tr.kpt-data-table__row--selected .kpt-data-table__cell--frozen{background:var(--%NS%kpt-table-row-selected)}.kpt-data-table__state{padding:var(--%NS%kpt-space-8, 2rem)!important;text-align:center!important;color:var(--%NS%kpt-color-on-surface-muted)}.kpt-data-table__table--virtual td{padding-block:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.kpt-data-table__spacer td{padding:0!important;border:0!important}.kpt-data-table tbody tr:last-child td{border-bottom:0}}\n"], encapsulation: 2 }); }
+            KptDatepicker], styles: ["@layer kpt.components{.kpt-data-table{display:flex;flex-direction:column;background:var(--%NS%kpt-table-bg);color:var(--%NS%kpt-table-fg);border:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-table-border);border-radius:var(--%NS%kpt-table-radius, .75rem);overflow:hidden;flex-grow:1}.kpt-data-table__toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--%NS%kpt-space-3, .75rem);padding:var(--%NS%kpt-space-3, .75rem);border-bottom:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-table-border)}.kpt-data-table__filter{width:100%;max-width:20rem;height:2.25rem;padding-inline:var(--%NS%kpt-space-3, .75rem);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)}.kpt-data-table__filter:focus-visible{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-data-table__scroll{overflow:auto}.kpt-data-table__pager{display:flex;align-items:center;gap:var(--%NS%kpt-space-2, .5rem)}.kpt-data-table__pager [kptPaginatorActions]{margin-inline-start:.5rem}.kpt-data-table__pager kpt-paginator{flex:1 1 auto;min-width:0}.kpt-data-table__table{width:100%;border-collapse:collapse;font-size:var(--%NS%kpt-font-size-sm, .875rem)}.kpt-data-table__table--frozen{width:max-content;min-width:100%}.kpt-data-table__table th,.kpt-data-table__table td{padding:var(--%NS%kpt-table-cell-padding, .75rem);text-align:start;border-bottom:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-table-border)}.kpt-data-table__table th[data-align=center],.kpt-data-table__table td[data-align=center]{text-align:center}.kpt-data-table__table th[data-align=end],.kpt-data-table__table td[data-align=end]{text-align:end}.kpt-data-table__table thead th{position:sticky;top:0;z-index:1;background:var(--%NS%kpt-table-header-bg);color:var(--%NS%kpt-table-header-fg);font-weight:var(--%NS%kpt-font-weight-semibold, 600);white-space:nowrap;-webkit-user-select:none;user-select:none}.kpt-data-table__table thead tr:nth-child(2) th{top:var(--%NS%kpt-thead-offset, 0px)}.kpt-data-table__table tfoot th,.kpt-data-table__table tfoot td{position:sticky;bottom:0;z-index:1;background:var(--%NS%kpt-table-summary-bg, var(--%NS%kpt-table-header-bg));color:var(--%NS%kpt-table-header-fg);font-weight:var(--%NS%kpt-font-weight-semibold, 600);white-space:nowrap;border-bottom:0;border-top:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-table-border)}.kpt-data-table__table .kpt-data-table__summary-label{text-align:end}.kpt-data-table__filter-row th{padding:var(--%NS%kpt-space-2, .5rem);font-weight:var(--%NS%kpt-font-weight-normal, 400);cursor:auto}.kpt-data-table__fcell{width:100%;height:2rem;padding-inline:var(--%NS%kpt-space-2, .5rem);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:inherit}.kpt-data-table__fcell:focus-visible{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-data-table__filter-row kpt-select,.kpt-data-table__filter-row kpt-date-range{display:block;width:100%;font-weight:var(--%NS%kpt-font-weight-normal, 400)}.kpt-data-table__frange{display:flex;gap:var(--%NS%kpt-space-2, .5rem)}.kpt-data-table__frange .kpt-data-table__fcell{min-width:0}.kpt-data-table__fslider .kpt-slider-host{width:100%}.kpt-data-table__fslider .kpt-slider__value{min-width:auto;font-size:var(--%NS%kpt-font-size-xs, .75rem);color:var(--%NS%kpt-color-on-surface-muted)}.kpt-data-table__th--sortable{cursor:pointer}.kpt-data-table__th--%NS%sortable:hover{color:var(--%NS%kpt-color-on-surface)}.kpt-data-table__cell--editable{cursor:pointer}.kpt-data-table__cell--%NS%editable:hover{background:var(--%NS%kpt-table-row-hover)}.kpt-data-table__cell--%NS%editable:focus-visible{outline:var(--%NS%kpt-border-width-medium, 2px) solid var(--%NS%kpt-color-focus-ring);outline-offset:-2px}.kpt-data-table__editor{display:block;min-width:8rem}.kpt-data-table__editor .kpt-input-number-host{max-width:6.5rem}.kpt-data-table__editor .kpt-input-number__btn{width:1.75rem}.kpt-data-table__sort{margin-inline-start:.35em;opacity:.35}.kpt-data-table__sort--active{opacity:1}.kpt-data-table__th--draggable{cursor:grab}.kpt-data-table__th--%NS%draggable:active{cursor:grabbing}.kpt-data-table__th--dragover{box-shadow:inset 2px 0 0 0 var(--%NS%kpt-color-primary)}.kpt-data-table__grip{margin-inline-end:.4em;opacity:.45}.kpt-data-table__checkbox{width:1px;white-space:nowrap;text-align:center}.kpt-data-table__checkbox input[type=checkbox]{appearance:none;-webkit-appearance:none;position:relative;display:inline-block;width:1.15rem;height:1.15rem;margin:0;vertical-align:middle;cursor:pointer;border:var(--%NS%kpt-border-width-medium, 2px) solid var(--%NS%kpt-form-field-border);border-radius:var(--%NS%kpt-radius-sm, .25rem);background:var(--%NS%kpt-form-field-bg);transition:background-color var(--%NS%kpt-motion-duration-fast, .12s) var(--%NS%kpt-motion-easing-standard),border-color var(--%NS%kpt-motion-duration-fast, .12s) var(--%NS%kpt-motion-easing-standard)}.kpt-data-table__checkbox input[type=checkbox]:after{content:\"\";position:absolute;inset:0;opacity:0;background-color:var(--%NS%kpt-color-on-primary);transition:opacity var(--%NS%kpt-motion-duration-fast, .12s) var(--%NS%kpt-motion-easing-standard);-webkit-mask:no-repeat center/.85rem;mask:no-repeat center/.85rem}.kpt-data-table__checkbox input[type=checkbox]:checked,.kpt-data-table__checkbox input[type=checkbox]:indeterminate{background:var(--%NS%kpt-color-primary);border-color:var(--%NS%kpt-color-primary)}.kpt-data-table__checkbox input[type=checkbox]:checked:after{opacity:1;-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13 4.5 6.5 11 3 7.5' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13 4.5 6.5 11 3 7.5' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\")}.kpt-data-table__checkbox input[type=checkbox]:indeterminate:after{opacity:1;-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8h9' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8h9' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round'/%3E%3C/svg%3E\")}.kpt-data-table__checkbox input[type=checkbox]:focus-visible{outline:var(--%NS%kpt-border-width-medium, 2px) solid var(--%NS%kpt-color-focus-ring);outline-offset:2px}.kpt-data-table__expander{width:2.5rem;min-width:2.5rem;text-align:center;white-space:nowrap}.kpt-data-table__expander-btn{display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;padding:0;border:none;border-radius:var(--%NS%kpt-radius-sm, .25rem);background:transparent;color:var(--%NS%kpt-color-on-surface-muted);cursor:pointer;transition:background-color var(--%NS%kpt-motion-duration-fast, .12s) var(--%NS%kpt-motion-easing-standard),color var(--%NS%kpt-motion-duration-fast, .12s) var(--%NS%kpt-motion-easing-standard)}.kpt-data-table__expander-btn kpt-icon{display:inline-flex;transition:transform var(--%NS%kpt-motion-duration-fast, .12s) var(--%NS%kpt-motion-easing-standard)}.kpt-data-table__expander-btn:hover{background:var(--%NS%kpt-table-row-hover);color:var(--%NS%kpt-color-on-surface)}.kpt-data-table__expander-btn:focus-visible{outline:var(--%NS%kpt-border-width-medium, 2px) solid var(--%NS%kpt-color-focus-ring);outline-offset:2px}.kpt-data-table__expander-btn--open{color:var(--%NS%kpt-color-primary)}.kpt-data-table__expander-btn--open kpt-icon{transform:rotate(90deg)}.kpt-data-table__detail-row>.kpt-data-table__detail{padding:var(--%NS%kpt-space-4, 1rem);background:var(--%NS%kpt-table-detail-bg, var(--%NS%kpt-color-surface-variant, var(--%NS%kpt-table-row-hover)));border-bottom:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-table-border);box-shadow:inset 3px 0 0 0 var(--%NS%kpt-color-primary)}.kpt-data-table tbody tr{transition:background-color var(--%NS%kpt-motion-duration-fast, .12s) var(--%NS%kpt-motion-easing-standard)}.kpt-data-table tbody tr:hover{background:var(--%NS%kpt-table-row-hover)}.kpt-data-table tbody tr.kpt-data-table__detail-row:hover{background:transparent}.kpt-data-table__row--selected{background:var(--%NS%kpt-table-row-selected)!important}.kpt-data-table__row--expanded{background:var(--%NS%kpt-table-row-hover)}.kpt-data-table__table--frozen .kpt-data-table__checkbox{width:3rem;min-width:3rem}.kpt-data-table__table--frozen .kpt-data-table__expander{width:2.5rem;min-width:2.5rem}.kpt-data-table__cell--frozen{position:sticky;z-index:1;background:var(--%NS%kpt-table-bg);border-inline-end:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-table-border)}.kpt-data-table thead th.kpt-data-table__cell--frozen{z-index:3;background:var(--%NS%kpt-table-header-bg)}.kpt-data-table tfoot th.kpt-data-table__cell--frozen,.kpt-data-table tfoot td.kpt-data-table__cell--frozen{z-index:3;background:var(--%NS%kpt-table-summary-bg, var(--%NS%kpt-table-header-bg))}.kpt-data-table tbody tr:hover .kpt-data-table__cell--frozen{background:var(--%NS%kpt-table-row-hover)}.kpt-data-table__row--selected.kpt-data-table__row--selected .kpt-data-table__cell--frozen,.kpt-data-table tbody tr.kpt-data-table__row--selected .kpt-data-table__cell--frozen{background:var(--%NS%kpt-table-row-selected)}.kpt-data-table__state{padding:var(--%NS%kpt-space-8, 2rem)!important;text-align:center!important;color:var(--%NS%kpt-color-on-surface-muted)}.kpt-data-table__table--virtual td{padding-block:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.kpt-data-table__spacer td{padding:0!important;border:0!important}.kpt-data-table tbody tr:last-child td{border-bottom:0}}\n"], encapsulation: 2 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(KptDataTable, [{
         type: Component,
@@ -10311,9 +10690,9 @@ class KptDataTable {
                 ], host: {
                     'class': 'kpt-data-table',
                     '[style.--kpt-thead-offset]': "theadOffset() + 'px'",
-                }, template: "@if (filterable() || exportable()) {\n  <div class=\"kpt-data-table__toolbar\">\n    @if (filterable()) {\n      <input\n        class=\"kpt-data-table__filter\"\n        type=\"search\"\n        [attr.placeholder]=\"i18n.t('dataTable.search')\"\n        [value]=\"filterText()\"\n        (input)=\"onFilter($event)\"\n      />\n    }\n    @if (exportable()) {\n      <kpt-button variant=\"outline\" size=\"sm\" (click)=\"exportCsv()\">{{ i18n.t('dataTable.exportCsv') }}</kpt-button>\n    }\n  </div>\n}\n\n<div class=\"kpt-data-table__scroll\" #scrollEl [style.max-height]=\"scrollHeight()\" (scroll)=\"onScroll($event)\">\n  <table\n    class=\"kpt-data-table__table\"\n    [class.kpt-data-table__table--frozen]=\"hasFrozen()\"\n    [class.kpt-data-table__table--virtual]=\"virtualScroll()\"\n  >\n    <thead #theadEl>\n      @if (hasColumnFilters() && filterRowPosition() === 'top') {\n        <ng-container [ngTemplateOutlet]=\"filterRowTpl\" />\n      }\n      <tr>\n        @if (hasRowDetail()) {\n          <th class=\"kpt-data-table__expander\" [class.kpt-data-table__cell--frozen]=\"hasFrozen()\" [style.left.px]=\"expanderStickyLeft()\"></th>\n        }\n        @if (selectable() === 'multiple') {\n          <th class=\"kpt-data-table__checkbox\" [class.kpt-data-table__cell--frozen]=\"hasFrozen()\" [style.left.px]=\"checkboxStickyLeft()\">\n            <input\n              type=\"checkbox\"\n              [checked]=\"pageAllSelected()\"\n              [indeterminate]=\"pageSomeSelected()\"\n              (change)=\"toggleAllOnPage()\"\n              [attr.aria-label]=\"i18n.t('dataTable.selectAll')\"\n            />\n          </th>\n        } @else if (selectable() === 'single') {\n          <th class=\"kpt-data-table__checkbox\" [class.kpt-data-table__cell--frozen]=\"hasFrozen()\" [style.left.px]=\"checkboxStickyLeft()\"></th>\n        }\n        @for (col of visibleOrderedColumns(); track col.field) {\n          <th\n            [attr.draggable]=\"isColDraggable(col) ? true : null\"\n            [style.width]=\"col.width\"\n            [style.left.px]=\"frozenLeft(col.field)\"\n            [attr.data-align]=\"col.align ?? 'start'\"\n            [class.kpt-data-table__cell--frozen]=\"isFrozen(col.field)\"\n            [class.kpt-data-table__th--sortable]=\"col.sortable\"\n            [class.kpt-data-table__th--draggable]=\"isColDraggable(col)\"\n            [class.kpt-data-table__th--dragover]=\"dragField() !== null && dragField() !== col.field && !col.frozen\"\n            [attr.aria-sort]=\"ariaSort(col)\"\n            (click)=\"toggleSort(col)\"\n            (dragstart)=\"onColDragStart(col.field, $event)\"\n            (dragover)=\"reorderable() ? onColDragOver(col.field, $event) : null\"\n            (drop)=\"reorderable() ? onColDrop(col.field, $event) : null\"\n            (dragend)=\"onColDragEnd()\"\n          >\n            @if (isColDraggable(col)) {\n              <kpt-icon class=\"kpt-data-table__grip\" name=\"grip-vertical\" />\n            }\n            <span>{{ col.header }}</span>\n            @if (col.sortable) {\n              <kpt-icon\n                class=\"kpt-data-table__sort\"\n                [class.kpt-data-table__sort--active]=\"ariaSort(col) !== 'none'\"\n                [name]=\"sortIconName(col)\"\n              />\n            }\n          </th>\n        }\n      </tr>\n      @if (hasColumnFilters() && filterRowPosition() === 'bottom') {\n        <ng-container [ngTemplateOutlet]=\"filterRowTpl\" />\n      }\n    </thead>\n    <tbody>\n      @if (loading()) {\n        <tr><td class=\"kpt-data-table__state\" [attr.colspan]=\"colspan()\">{{ i18n.t('dataTable.loading') }}</td></tr>\n      } @else if (displayCount() === 0) {\n        <tr><td class=\"kpt-data-table__state\" [attr.colspan]=\"colspan()\">{{ emptyText() }}</td></tr>\n      } @else if (virtualScroll()) {\n        @if (topPad() > 0) {\n          <tr class=\"kpt-data-table__spacer\" aria-hidden=\"true\"><td [attr.colspan]=\"colspan()\" [style.height.px]=\"topPad()\"></td></tr>\n        }\n        @for (row of virtualRows(); track trackRow(row)) {\n          <ng-container [ngTemplateOutlet]=\"rowTpl\" [ngTemplateOutletContext]=\"{ $implicit: row }\" />\n        }\n        @if (bottomPad() > 0) {\n          <tr class=\"kpt-data-table__spacer\" aria-hidden=\"true\"><td [attr.colspan]=\"colspan()\" [style.height.px]=\"bottomPad()\"></td></tr>\n        }\n      } @else {\n        @for (row of paged(); track trackRow(row)) {\n          <ng-container [ngTemplateOutlet]=\"rowTpl\" [ngTemplateOutletContext]=\"{ $implicit: row }\" />\n        }\n      }\n    </tbody>\n  </table>\n</div>\n\n<ng-template #rowTpl let-row>\n  <tr\n    [class.kpt-data-table__row--selected]=\"isSelected(row)\"\n    [class.kpt-data-table__row--expanded]=\"hasRowDetail() && isExpanded(row)\"\n    [style.height.px]=\"virtualScroll() ? rowHeight() : null\"\n    (click)=\"onRowClick(row)\"\n  >\n    @if (hasRowDetail()) {\n      <td class=\"kpt-data-table__expander\" [class.kpt-data-table__cell--frozen]=\"hasFrozen()\" [style.left.px]=\"expanderStickyLeft()\">\n        <button\n          type=\"button\"\n          class=\"kpt-data-table__expander-btn\"\n          [class.kpt-data-table__expander-btn--open]=\"isExpanded(row)\"\n          [attr.aria-expanded]=\"isExpanded(row)\"\n          [attr.aria-label]=\"i18n.t('dataTable.expandRow')\"\n          (click)=\"$event.stopPropagation(); toggleExpand(row)\"\n        >\n          <kpt-icon name=\"chevron-right\" />\n        </button>\n      </td>\n    }\n    @if (selectable() !== 'none') {\n      <td class=\"kpt-data-table__checkbox\" [class.kpt-data-table__cell--frozen]=\"hasFrozen()\" [style.left.px]=\"checkboxStickyLeft()\">\n        <input\n          type=\"checkbox\"\n          [checked]=\"isSelected(row)\"\n          (click)=\"$event.stopPropagation()\"\n          (change)=\"toggleRow(row)\"\n          [attr.aria-label]=\"i18n.t('dataTable.selectRow')\"\n        />\n      </td>\n    }\n    @for (col of visibleOrderedColumns(); track col.field) {\n      <td\n        [attr.data-align]=\"col.align ?? 'start'\"\n        [style.left.px]=\"frozenLeft(col.field)\"\n        [class.kpt-data-table__cell--frozen]=\"isFrozen(col.field)\"\n        [class.kpt-data-table__cell--editable]=\"isEditable(col) && !isEditingCell(row, col.field)\"\n        [attr.tabindex]=\"isEditable(col) && !isEditingCell(row, col.field) ? 0 : null\"\n        [attr.aria-label]=\"isEditable(col) && !isEditingCell(row, col.field) ? i18n.t('dataTable.editCell', { column: col.header }) : null\"\n        (click)=\"isEditable(col) ? startEdit(row, col, $event) : null\"\n        (keydown.enter)=\"isEditable(col) && !isEditingCell(row, col.field) ? startEdit(row, col, $event) : null\"\n      >\n        @if (isEditingCell(row, col.field)) {\n          <div\n            class=\"kpt-data-table__editor\"\n            #editorHost\n            (click)=\"$event.stopPropagation()\"\n            (focusout)=\"onEditorFocusOut($event)\"\n          >\n            @if (cellEditTemplate(col.field); as etpl) {\n              <ng-container\n                [ngTemplateOutlet]=\"etpl\"\n                [ngTemplateOutletContext]=\"{ $implicit: editingValue(), row, commit: commitEditValue, cancel: cancelEdit }\"\n              />\n            } @else {\n              @switch (col.edit?.type) {\n                @case ('text') {\n                  <kpt-input\n                    [value]=\"$any(editingValue()) ?? ''\"\n                    [placeholder]=\"col.edit.placeholder ?? ''\"\n                    (valueChange)=\"editingValue.set($event)\"\n                    (keydown.enter)=\"commitEdit()\"\n                    (keydown.escape)=\"cancelEdit()\"\n                  />\n                }\n                @case ('number') {\n                  <kpt-input-number\n                    [value]=\"$any(editingValue())\"\n                    [min]=\"col.edit.min\"\n                    [max]=\"col.edit.max\"\n                    [step]=\"col.edit.step ?? 1\"\n                    (valueChange)=\"editingValue.set($event)\"\n                    (keydown.enter)=\"commitEdit()\"\n                    (keydown.escape)=\"cancelEdit()\"\n                  />\n                }\n                @case ('date') {\n                  <kpt-datepicker\n                    [value]=\"$any(editingValue()) ?? ''\"\n                    (valueChange)=\"editingValue.set($event)\"\n                    [open]=\"editorPanelOpen()\"\n                    (openChange)=\"onEditorPanelToggle($event)\"\n                  />\n                }\n                @case ('select') {\n                  <kpt-select\n                    [options]=\"col.edit.options ?? []\"\n                    [placeholder]=\"col.edit.placeholder ?? ''\"\n                    [value]=\"editingValue()\"\n                    (valueChange)=\"editingValue.set($event)\"\n                    [open]=\"editorPanelOpen()\"\n                    (openChange)=\"onEditorPanelToggle($event)\"\n                  />\n                }\n                @case ('multiselect') {\n                  <kpt-select\n                    multiple\n                    filter\n                    [options]=\"col.edit.options ?? []\"\n                    [placeholder]=\"col.edit.placeholder ?? ''\"\n                    [value]=\"editingValue()\"\n                    (valueChange)=\"editingValue.set($event)\"\n                    [open]=\"editorPanelOpen()\"\n                    (openChange)=\"onEditorPanelToggle($event)\"\n                  />\n                }\n              }\n            }\n          </div>\n        } @else if (cellTemplate(col.field); as tpl) {\n          <ng-container\n            [ngTemplateOutlet]=\"tpl\"\n            [ngTemplateOutletContext]=\"{ $implicit: row, value: getValue(row, col.field) }\"\n          />\n        } @else {\n          {{ getValue(row, col.field) }}\n        }\n      </td>\n    }\n  </tr>\n  @if (hasRowDetail() && isExpanded(row) && !virtualScroll()) {\n    <tr class=\"kpt-data-table__detail-row\">\n      <td class=\"kpt-data-table__detail\" [attr.colspan]=\"colspan()\">\n        <ng-container [ngTemplateOutlet]=\"rowDetailTpl()\" [ngTemplateOutletContext]=\"{ $implicit: row }\" />\n      </td>\n    </tr>\n  }\n</ng-template>\n\n<ng-template #filterRowTpl>\n  <tr class=\"kpt-data-table__filter-row\">\n    @if (hasRowDetail()) {\n      <th class=\"kpt-data-table__expander\" [class.kpt-data-table__cell--frozen]=\"hasFrozen()\" [style.left.px]=\"expanderStickyLeft()\"></th>\n    }\n    @if (selectable() !== 'none') {\n      <th class=\"kpt-data-table__checkbox\" [class.kpt-data-table__cell--frozen]=\"hasFrozen()\" [style.left.px]=\"checkboxStickyLeft()\"></th>\n    }\n    @for (col of visibleOrderedColumns(); track col.field) {\n      <th\n        [style.width]=\"col.width\"\n        [style.left.px]=\"frozenLeft(col.field)\"\n        [attr.data-align]=\"col.align ?? 'start'\"\n        [class.kpt-data-table__cell--frozen]=\"isFrozen(col.field)\"\n      >\n        @switch (col.filter?.type) {\n          @case ('text') {\n            <input\n              class=\"kpt-data-table__fcell\"\n              type=\"search\"\n              [attr.placeholder]=\"col.filter.placeholder || ''\"\n              [attr.aria-label]=\"i18n.t('dataTable.filter', { column: col.header })\"\n              [value]=\"$any(columnFilters()[col.field]) || ''\"\n              (input)=\"setColumnFilter(col.field, $any($event.target).value)\"\n              (click)=\"$event.stopPropagation()\"\n            />\n          }\n          @case ('number') {\n            <input\n              class=\"kpt-data-table__fcell\"\n              type=\"text\"\n              inputmode=\"numeric\"\n              [attr.placeholder]=\"col.filter.placeholder || ''\"\n              [attr.aria-label]=\"i18n.t('dataTable.filter', { column: col.header })\"\n              [value]=\"$any(columnFilters()[col.field]) || ''\"\n              (input)=\"onNumberFilter(col.field, $event)\"\n              (click)=\"$event.stopPropagation()\"\n            />\n          }\n          @case ('select') {\n            <kpt-select\n              [options]=\"col.filter.options || []\"\n              [multiple]=\"!!col.filter.multiple\"\n              filter\n              [placeholder]=\"col.filter.placeholder || i18n.t('dataTable.all')\"\n              [value]=\"columnFilters()[col.field] ?? null\"\n              (valueChange)=\"setColumnFilter(col.field, $event)\"\n            />\n          }\n          @case ('numberRange') {\n            <div class=\"kpt-data-table__frange\">\n              <input\n                class=\"kpt-data-table__fcell\"\n                type=\"text\"\n                inputmode=\"numeric\"\n                [attr.placeholder]=\"i18n.t('dataTable.min')\"\n                [attr.aria-label]=\"i18n.t('dataTable.filterMin', { column: col.header })\"\n                [value]=\"rangeVal(col.field).min\"\n                (input)=\"setRangeFilter(col.field, 'min', $event)\"\n                (click)=\"$event.stopPropagation()\"\n              />\n              <input\n                class=\"kpt-data-table__fcell\"\n                type=\"text\"\n                inputmode=\"numeric\"\n                [attr.placeholder]=\"i18n.t('dataTable.max')\"\n                [attr.aria-label]=\"i18n.t('dataTable.filterMax', { column: col.header })\"\n                [value]=\"rangeVal(col.field).max\"\n                (input)=\"setRangeFilter(col.field, 'max', $event)\"\n                (click)=\"$event.stopPropagation()\"\n              />\n            </div>\n          }\n          @case ('slider') {\n            <div class=\"kpt-data-table__fslider\" (click)=\"$event.stopPropagation()\">\n              <kpt-slider\n                range\n                [min]=\"col.filter.min ?? 0\"\n                [max]=\"col.filter.max ?? 100\"\n                [step]=\"col.filter.step ?? 1\"\n                [value]=\"sliderVal(col)\"\n                (valueChange)=\"setColumnFilter(col.field, $event)\"\n                showValue\n              />\n            </div>\n          }\n          @case ('dateRange') {\n            <kpt-date-range\n              [placeholder]=\"col.filter.placeholder || i18n.t('dataTable.dateRange')\"\n              [value]=\"$any(columnFilters()[col.field]) || { start: '', end: '' }\"\n              (valueChange)=\"setColumnFilter(col.field, $event)\"\n            />\n          }\n        }\n      </th>\n    }\n  </tr>\n</ng-template>\n\n@if (pageSize() > 0 && !virtualScroll()) {\n  <div class=\"kpt-data-table__pager\">\n    <ng-content select=\"[kptPaginatorActions]\" />\n    <kpt-paginator\n      [length]=\"filteredCount()\"\n      [pageIndex]=\"pageIndex()\"\n      (pageIndexChange)=\"pageIndex.set($event)\"\n      [pageSize]=\"pageSizeState()\"\n      (pageSizeChange)=\"pageSizeState.set($event)\"\n      [pageSizeOptions]=\"pageSizeOptions()\"\n    />\n  </div>\n}\n", styles: ["@layer kpt.components{.kpt-data-table{display:flex;flex-direction:column;background:var(--kpt-table-bg);color:var(--kpt-table-fg);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-table-border);border-radius:var(--kpt-table-radius, .75rem);overflow:hidden;flex-grow:1}.kpt-data-table__toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--kpt-space-3, .75rem);padding:var(--kpt-space-3, .75rem);border-bottom:var(--kpt-border-width-thin, 1px) solid var(--kpt-table-border)}.kpt-data-table__filter{width:100%;max-width:20rem;height:2.25rem;padding-inline:var(--kpt-space-3, .75rem);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)}.kpt-data-table__filter:focus-visible{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-data-table__scroll{overflow:auto}.kpt-data-table__pager{display:flex;align-items:center;gap:var(--kpt-space-2, .5rem)}.kpt-data-table__pager [kptPaginatorActions]{margin-inline-start:.5rem}.kpt-data-table__pager kpt-paginator{flex:1 1 auto;min-width:0}.kpt-data-table__table{width:100%;border-collapse:collapse;font-size:var(--kpt-font-size-sm, .875rem)}.kpt-data-table__table--frozen{width:max-content;min-width:100%}.kpt-data-table__table th,.kpt-data-table__table td{padding:var(--kpt-table-cell-padding, .75rem);text-align:start;border-bottom:var(--kpt-border-width-thin, 1px) solid var(--kpt-table-border)}.kpt-data-table__table th[data-align=center],.kpt-data-table__table td[data-align=center]{text-align:center}.kpt-data-table__table th[data-align=end],.kpt-data-table__table td[data-align=end]{text-align:end}.kpt-data-table__table thead th{position:sticky;top:0;z-index:1;background:var(--kpt-table-header-bg);color:var(--kpt-table-header-fg);font-weight:var(--kpt-font-weight-semibold, 600);white-space:nowrap;-webkit-user-select:none;user-select:none}.kpt-data-table__table thead tr:nth-child(2) th{top:var(--kpt-thead-offset, 0px)}.kpt-data-table__filter-row th{padding:var(--kpt-space-2, .5rem);font-weight:var(--kpt-font-weight-normal, 400);cursor:auto}.kpt-data-table__fcell{width:100%;height:2rem;padding-inline:var(--kpt-space-2, .5rem);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:inherit}.kpt-data-table__fcell:focus-visible{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-data-table__filter-row kpt-select,.kpt-data-table__filter-row kpt-date-range{display:block;width:100%;font-weight:var(--kpt-font-weight-normal, 400)}.kpt-data-table__frange{display:flex;gap:var(--kpt-space-2, .5rem)}.kpt-data-table__frange .kpt-data-table__fcell{min-width:0}.kpt-data-table__fslider .kpt-slider-host{width:100%}.kpt-data-table__fslider .kpt-slider__value{min-width:auto;font-size:var(--kpt-font-size-xs, .75rem);color:var(--kpt-color-on-surface-muted)}.kpt-data-table__th--sortable{cursor:pointer}.kpt-data-table__th--sortable:hover{color:var(--kpt-color-on-surface)}.kpt-data-table__cell--editable{cursor:pointer}.kpt-data-table__cell--editable:hover{background:var(--kpt-table-row-hover)}.kpt-data-table__cell--editable:focus-visible{outline:var(--kpt-border-width-medium, 2px) solid var(--kpt-color-focus-ring);outline-offset:-2px}.kpt-data-table__editor{display:block;min-width:8rem}.kpt-data-table__editor .kpt-input-number-host{max-width:6.5rem}.kpt-data-table__editor .kpt-input-number__btn{width:1.75rem}.kpt-data-table__sort{margin-inline-start:.35em;opacity:.35}.kpt-data-table__sort--active{opacity:1}.kpt-data-table__th--draggable{cursor:grab}.kpt-data-table__th--draggable:active{cursor:grabbing}.kpt-data-table__th--dragover{box-shadow:inset 2px 0 0 0 var(--kpt-color-primary)}.kpt-data-table__grip{margin-inline-end:.4em;opacity:.45}.kpt-data-table__checkbox{width:1px;white-space:nowrap;text-align:center}.kpt-data-table__checkbox input[type=checkbox]{appearance:none;-webkit-appearance:none;position:relative;display:inline-block;width:1.15rem;height:1.15rem;margin:0;vertical-align:middle;cursor:pointer;border:var(--kpt-border-width-medium, 2px) solid var(--kpt-form-field-border);border-radius:var(--kpt-radius-sm, .25rem);background:var(--kpt-form-field-bg);transition:background-color var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard),border-color var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-data-table__checkbox input[type=checkbox]:after{content:\"\";position:absolute;inset:0;opacity:0;background-color:var(--kpt-color-on-primary);transition:opacity var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard);-webkit-mask:no-repeat center/.85rem;mask:no-repeat center/.85rem}.kpt-data-table__checkbox input[type=checkbox]:checked,.kpt-data-table__checkbox input[type=checkbox]:indeterminate{background:var(--kpt-color-primary);border-color:var(--kpt-color-primary)}.kpt-data-table__checkbox input[type=checkbox]:checked:after{opacity:1;-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13 4.5 6.5 11 3 7.5' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13 4.5 6.5 11 3 7.5' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\")}.kpt-data-table__checkbox input[type=checkbox]:indeterminate:after{opacity:1;-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8h9' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8h9' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round'/%3E%3C/svg%3E\")}.kpt-data-table__checkbox input[type=checkbox]:focus-visible{outline:var(--kpt-border-width-medium, 2px) solid var(--kpt-color-focus-ring);outline-offset:2px}.kpt-data-table__expander{width:2.5rem;min-width:2.5rem;text-align:center;white-space:nowrap}.kpt-data-table__expander-btn{display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;padding:0;border:none;border-radius:var(--kpt-radius-sm, .25rem);background:transparent;color:var(--kpt-color-on-surface-muted);cursor:pointer;transition:background-color var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard),color var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-data-table__expander-btn kpt-icon{display:inline-flex;transition:transform var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-data-table__expander-btn:hover{background:var(--kpt-table-row-hover);color:var(--kpt-color-on-surface)}.kpt-data-table__expander-btn:focus-visible{outline:var(--kpt-border-width-medium, 2px) solid var(--kpt-color-focus-ring);outline-offset:2px}.kpt-data-table__expander-btn--open{color:var(--kpt-color-primary)}.kpt-data-table__expander-btn--open kpt-icon{transform:rotate(90deg)}.kpt-data-table__detail-row>.kpt-data-table__detail{padding:var(--kpt-space-4, 1rem);background:var(--kpt-table-detail-bg, var(--kpt-color-surface-variant, var(--kpt-table-row-hover)));border-bottom:var(--kpt-border-width-thin, 1px) solid var(--kpt-table-border);box-shadow:inset 3px 0 0 0 var(--kpt-color-primary)}.kpt-data-table tbody tr{transition:background-color var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-data-table tbody tr:hover{background:var(--kpt-table-row-hover)}.kpt-data-table tbody tr.kpt-data-table__detail-row:hover{background:transparent}.kpt-data-table__row--selected{background:var(--kpt-table-row-selected)!important}.kpt-data-table__row--expanded{background:var(--kpt-table-row-hover)}.kpt-data-table__table--frozen .kpt-data-table__checkbox{width:3rem;min-width:3rem}.kpt-data-table__table--frozen .kpt-data-table__expander{width:2.5rem;min-width:2.5rem}.kpt-data-table__cell--frozen{position:sticky;z-index:1;background:var(--kpt-table-bg);border-inline-end:var(--kpt-border-width-thin, 1px) solid var(--kpt-table-border)}.kpt-data-table thead th.kpt-data-table__cell--frozen{z-index:3;background:var(--kpt-table-header-bg)}.kpt-data-table tbody tr:hover .kpt-data-table__cell--frozen{background:var(--kpt-table-row-hover)}.kpt-data-table__row--selected.kpt-data-table__row--selected .kpt-data-table__cell--frozen,.kpt-data-table tbody tr.kpt-data-table__row--selected .kpt-data-table__cell--frozen{background:var(--kpt-table-row-selected)}.kpt-data-table__state{padding:var(--kpt-space-8, 2rem)!important;text-align:center!important;color:var(--kpt-color-on-surface-muted)}.kpt-data-table__table--virtual td{padding-block:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.kpt-data-table__spacer td{padding:0!important;border:0!important}.kpt-data-table tbody tr:last-child td{border-bottom:0}}\n"] }]
-    }], () => [], { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], filterable: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterable", required: false }] }], filterRowPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterRowPosition", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], rowKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowKey", required: false }] }], scrollHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollHeight", required: false }] }], virtualScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScroll", required: false }] }], rowHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowHeight", required: false }] }], reorderable: [{ type: i0.Input, args: [{ isSignal: true, alias: "reorderable", required: false }] }], exportable: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportable", required: false }] }], exportFilename: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportFilename", required: false }] }], lazy: [{ type: i0.Input, args: [{ isSignal: true, alias: "lazy", required: false }] }], totalRecords: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalRecords", required: false }] }], expandable: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandable", required: false }] }], multiExpand: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiExpand", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }, { type: i0.Output, args: ["selectionChange"] }], expandedRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedRows", required: false }] }, { type: i0.Output, args: ["expandedRowsChange"] }], hiddenFields: [{ type: i0.Input, args: [{ isSignal: true, alias: "hiddenFields", required: false }] }, { type: i0.Output, args: ["hiddenFieldsChange"] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], lazyLoad: [{ type: i0.Output, args: ["lazyLoad"] }], cellEdit: [{ type: i0.Output, args: ["cellEdit"] }], scrollEl: [{ type: i0.ViewChild, args: ['scrollEl', { isSignal: true }] }], theadEl: [{ type: i0.ViewChild, args: ['theadEl', { isSignal: true }] }], editorHost: [{ type: i0.ViewChild, args: ['editorHost', { isSignal: true }] }], cellDefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => KptCellDef), { isSignal: true }] }], cellEditDefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => KptCellEditDef), { isSignal: true }] }], rowDetailDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KptRowDetailDef), { isSignal: true }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptDataTable, { className: "KptDataTable", filePath: "lib/data-table/data-table.component.ts", lineNumber: 168 }); })();
+                }, template: "@if (filterable() || exportable()) {\n  <div class=\"kpt-data-table__toolbar\">\n    @if (filterable()) {\n      <input\n        class=\"kpt-data-table__filter\"\n        type=\"search\"\n        [attr.placeholder]=\"i18n.t('dataTable.search')\"\n        [value]=\"filterText()\"\n        (input)=\"onFilter($event)\"\n      />\n    }\n    @if (exportable()) {\n      <kpt-button variant=\"outline\" size=\"sm\" (click)=\"exportCsv()\">{{ i18n.t('dataTable.exportCsv') }}</kpt-button>\n    }\n  </div>\n}\n\n<div class=\"kpt-data-table__scroll\" #scrollEl [style.max-height]=\"scrollHeight()\" (scroll)=\"onScroll($event)\">\n  <table\n    class=\"kpt-data-table__table\"\n    [class.kpt-data-table__table--frozen]=\"hasFrozen()\"\n    [class.kpt-data-table__table--virtual]=\"virtualScroll()\"\n  >\n    <thead #theadEl>\n      @if (hasColumnFilters() && filterRowPosition() === 'top') {\n        <ng-container [ngTemplateOutlet]=\"filterRowTpl\" />\n      }\n      <tr>\n        @if (hasRowDetail()) {\n          <th class=\"kpt-data-table__expander\" [class.kpt-data-table__cell--frozen]=\"hasFrozen()\" [style.left.px]=\"expanderStickyLeft()\"></th>\n        }\n        @if (selectable() === 'multiple') {\n          <th class=\"kpt-data-table__checkbox\" [class.kpt-data-table__cell--frozen]=\"hasFrozen()\" [style.left.px]=\"checkboxStickyLeft()\">\n            <input\n              type=\"checkbox\"\n              [checked]=\"pageAllSelected()\"\n              [indeterminate]=\"pageSomeSelected()\"\n              (change)=\"toggleAllOnPage()\"\n              [attr.aria-label]=\"i18n.t('dataTable.selectAll')\"\n            />\n          </th>\n        } @else if (selectable() === 'single') {\n          <th class=\"kpt-data-table__checkbox\" [class.kpt-data-table__cell--frozen]=\"hasFrozen()\" [style.left.px]=\"checkboxStickyLeft()\"></th>\n        }\n        @for (col of visibleOrderedColumns(); track col.field) {\n          <th\n            [attr.draggable]=\"isColDraggable(col) ? true : null\"\n            [style.width]=\"col.width\"\n            [style.left.px]=\"frozenLeft(col.field)\"\n            [attr.data-align]=\"col.align ?? 'start'\"\n            [class.kpt-data-table__cell--frozen]=\"isFrozen(col.field)\"\n            [class.kpt-data-table__th--sortable]=\"col.sortable\"\n            [class.kpt-data-table__th--draggable]=\"isColDraggable(col)\"\n            [class.kpt-data-table__th--dragover]=\"dragField() !== null && dragField() !== col.field && !col.frozen\"\n            [attr.aria-sort]=\"ariaSort(col)\"\n            (click)=\"toggleSort(col)\"\n            (dragstart)=\"onColDragStart(col.field, $event)\"\n            (dragover)=\"reorderable() ? onColDragOver(col.field, $event) : null\"\n            (drop)=\"reorderable() ? onColDrop(col.field, $event) : null\"\n            (dragend)=\"onColDragEnd()\"\n          >\n            @if (isColDraggable(col)) {\n              <kpt-icon class=\"kpt-data-table__grip\" name=\"grip-vertical\" />\n            }\n            <span>{{ col.header }}</span>\n            @if (col.sortable) {\n              <kpt-icon\n                class=\"kpt-data-table__sort\"\n                [class.kpt-data-table__sort--active]=\"ariaSort(col) !== 'none'\"\n                [name]=\"sortIconName(col)\"\n              />\n            }\n          </th>\n        }\n      </tr>\n      @if (hasColumnFilters() && filterRowPosition() === 'bottom') {\n        <ng-container [ngTemplateOutlet]=\"filterRowTpl\" />\n      }\n    </thead>\n    <tbody>\n      @if (loading()) {\n        <tr><td class=\"kpt-data-table__state\" [attr.colspan]=\"colspan()\">{{ i18n.t('dataTable.loading') }}</td></tr>\n      } @else if (displayCount() === 0) {\n        <tr><td class=\"kpt-data-table__state\" [attr.colspan]=\"colspan()\">{{ emptyText() }}</td></tr>\n      } @else if (virtualScroll()) {\n        @if (topPad() > 0) {\n          <tr class=\"kpt-data-table__spacer\" aria-hidden=\"true\"><td [attr.colspan]=\"colspan()\" [style.height.px]=\"topPad()\"></td></tr>\n        }\n        @for (row of virtualRows(); track trackRow(row)) {\n          <ng-container [ngTemplateOutlet]=\"rowTpl\" [ngTemplateOutletContext]=\"{ $implicit: row }\" />\n        }\n        @if (bottomPad() > 0) {\n          <tr class=\"kpt-data-table__spacer\" aria-hidden=\"true\"><td [attr.colspan]=\"colspan()\" [style.height.px]=\"bottomPad()\"></td></tr>\n        }\n      } @else {\n        @for (row of paged(); track trackRow(row)) {\n          <ng-container [ngTemplateOutlet]=\"rowTpl\" [ngTemplateOutletContext]=\"{ $implicit: row }\" />\n        }\n      }\n    </tbody>\n    @if (hasSummary() && !loading() && displayCount() > 0) {\n      <tfoot>\n        <tr class=\"kpt-data-table__summary\">\n          @if (summaryLabelSpan() > 0) {\n            <th\n              class=\"kpt-data-table__summary-label\"\n              [attr.colspan]=\"summaryLabelSpan()\"\n              [class.kpt-data-table__cell--frozen]=\"hasFrozen()\"\n              [style.left.px]=\"hasFrozen() ? 0 : null\"\n            >\n              {{ summaryLabelText() }}\n            </th>\n          }\n          @for (col of visibleOrderedColumns(); track col.field; let i = $index) {\n            @if (i >= summaryStartIndex()) {\n              <td\n                [attr.data-align]=\"col.align ?? 'end'\"\n                [style.width]=\"col.width\"\n                [style.left.px]=\"frozenLeft(col.field)\"\n                [class.kpt-data-table__cell--frozen]=\"isFrozen(col.field)\"\n              >\n                {{ summaryText(col.field) }}\n              </td>\n            }\n          }\n        </tr>\n      </tfoot>\n    }\n  </table>\n</div>\n\n<ng-template #rowTpl let-row>\n  <tr\n    [class.kpt-data-table__row--selected]=\"isSelected(row)\"\n    [class.kpt-data-table__row--expanded]=\"hasRowDetail() && isExpanded(row)\"\n    [style.height.px]=\"virtualScroll() ? rowHeight() : null\"\n    (click)=\"onRowClick(row)\"\n  >\n    @if (hasRowDetail()) {\n      <td class=\"kpt-data-table__expander\" [class.kpt-data-table__cell--frozen]=\"hasFrozen()\" [style.left.px]=\"expanderStickyLeft()\">\n        <button\n          type=\"button\"\n          class=\"kpt-data-table__expander-btn\"\n          [class.kpt-data-table__expander-btn--open]=\"isExpanded(row)\"\n          [attr.aria-expanded]=\"isExpanded(row)\"\n          [attr.aria-label]=\"i18n.t('dataTable.expandRow')\"\n          (click)=\"$event.stopPropagation(); toggleExpand(row)\"\n        >\n          <kpt-icon name=\"chevron-right\" />\n        </button>\n      </td>\n    }\n    @if (selectable() !== 'none') {\n      <td class=\"kpt-data-table__checkbox\" [class.kpt-data-table__cell--frozen]=\"hasFrozen()\" [style.left.px]=\"checkboxStickyLeft()\">\n        <input\n          type=\"checkbox\"\n          [checked]=\"isSelected(row)\"\n          (click)=\"$event.stopPropagation()\"\n          (change)=\"toggleRow(row)\"\n          [attr.aria-label]=\"i18n.t('dataTable.selectRow')\"\n        />\n      </td>\n    }\n    @for (col of visibleOrderedColumns(); track col.field) {\n      <td\n        [attr.data-align]=\"col.align ?? 'start'\"\n        [style.left.px]=\"frozenLeft(col.field)\"\n        [class.kpt-data-table__cell--frozen]=\"isFrozen(col.field)\"\n        [class.kpt-data-table__cell--editable]=\"isEditable(col) && !isEditingCell(row, col.field)\"\n        [attr.tabindex]=\"isEditable(col) && !isEditingCell(row, col.field) ? 0 : null\"\n        [attr.aria-label]=\"isEditable(col) && !isEditingCell(row, col.field) ? i18n.t('dataTable.editCell', { column: col.header }) : null\"\n        (click)=\"isEditable(col) ? startEdit(row, col, $event) : null\"\n        (keydown.enter)=\"isEditable(col) && !isEditingCell(row, col.field) ? startEdit(row, col, $event) : null\"\n      >\n        @if (isEditingCell(row, col.field)) {\n          <div\n            class=\"kpt-data-table__editor\"\n            #editorHost\n            (click)=\"$event.stopPropagation()\"\n            (focusout)=\"onEditorFocusOut($event)\"\n          >\n            @if (cellEditTemplate(col.field); as etpl) {\n              <ng-container\n                [ngTemplateOutlet]=\"etpl\"\n                [ngTemplateOutletContext]=\"{ $implicit: editingValue(), row, commit: commitEditValue, cancel: cancelEdit }\"\n              />\n            } @else {\n              @switch (col.edit?.type) {\n                @case ('text') {\n                  <kpt-input\n                    [value]=\"$any(editingValue()) ?? ''\"\n                    [placeholder]=\"col.edit.placeholder ?? ''\"\n                    (valueChange)=\"editingValue.set($event)\"\n                    (keydown.enter)=\"commitEdit()\"\n                    (keydown.escape)=\"cancelEdit()\"\n                  />\n                }\n                @case ('number') {\n                  <kpt-input-number\n                    [value]=\"$any(editingValue())\"\n                    [min]=\"col.edit.min\"\n                    [max]=\"col.edit.max\"\n                    [step]=\"col.edit.step ?? 1\"\n                    (valueChange)=\"editingValue.set($event)\"\n                    (keydown.enter)=\"commitEdit()\"\n                    (keydown.escape)=\"cancelEdit()\"\n                  />\n                }\n                @case ('date') {\n                  <kpt-datepicker\n                    [value]=\"$any(editingValue()) ?? ''\"\n                    (valueChange)=\"editingValue.set($event)\"\n                    [open]=\"editorPanelOpen()\"\n                    (openChange)=\"onEditorPanelToggle($event)\"\n                  />\n                }\n                @case ('select') {\n                  <kpt-select\n                    [options]=\"col.edit.options ?? []\"\n                    [placeholder]=\"col.edit.placeholder ?? ''\"\n                    [value]=\"editingValue()\"\n                    (valueChange)=\"editingValue.set($event)\"\n                    [open]=\"editorPanelOpen()\"\n                    (openChange)=\"onEditorPanelToggle($event)\"\n                  />\n                }\n                @case ('multiselect') {\n                  <kpt-select\n                    multiple\n                    filter\n                    [options]=\"col.edit.options ?? []\"\n                    [placeholder]=\"col.edit.placeholder ?? ''\"\n                    [value]=\"editingValue()\"\n                    (valueChange)=\"editingValue.set($event)\"\n                    [open]=\"editorPanelOpen()\"\n                    (openChange)=\"onEditorPanelToggle($event)\"\n                  />\n                }\n              }\n            }\n          </div>\n        } @else if (cellTemplate(col.field); as tpl) {\n          <ng-container\n            [ngTemplateOutlet]=\"tpl\"\n            [ngTemplateOutletContext]=\"{ $implicit: row, value: getValue(row, col.field) }\"\n          />\n        } @else {\n          {{ getValue(row, col.field) }}\n        }\n      </td>\n    }\n  </tr>\n  @if (hasRowDetail() && isExpanded(row) && !virtualScroll()) {\n    <tr class=\"kpt-data-table__detail-row\">\n      <td class=\"kpt-data-table__detail\" [attr.colspan]=\"colspan()\">\n        <ng-container [ngTemplateOutlet]=\"rowDetailTpl()\" [ngTemplateOutletContext]=\"{ $implicit: row }\" />\n      </td>\n    </tr>\n  }\n</ng-template>\n\n<ng-template #filterRowTpl>\n  <tr class=\"kpt-data-table__filter-row\">\n    @if (hasRowDetail()) {\n      <th class=\"kpt-data-table__expander\" [class.kpt-data-table__cell--frozen]=\"hasFrozen()\" [style.left.px]=\"expanderStickyLeft()\"></th>\n    }\n    @if (selectable() !== 'none') {\n      <th class=\"kpt-data-table__checkbox\" [class.kpt-data-table__cell--frozen]=\"hasFrozen()\" [style.left.px]=\"checkboxStickyLeft()\"></th>\n    }\n    @for (col of visibleOrderedColumns(); track col.field) {\n      <th\n        [style.width]=\"col.width\"\n        [style.left.px]=\"frozenLeft(col.field)\"\n        [attr.data-align]=\"col.align ?? 'start'\"\n        [class.kpt-data-table__cell--frozen]=\"isFrozen(col.field)\"\n      >\n        @switch (col.filter?.type) {\n          @case ('text') {\n            <input\n              class=\"kpt-data-table__fcell\"\n              type=\"search\"\n              [attr.placeholder]=\"col.filter.placeholder || ''\"\n              [attr.aria-label]=\"i18n.t('dataTable.filter', { column: col.header })\"\n              [value]=\"$any(columnFilters()[col.field]) || ''\"\n              (input)=\"setColumnFilter(col.field, $any($event.target).value)\"\n              (click)=\"$event.stopPropagation()\"\n            />\n          }\n          @case ('number') {\n            <input\n              class=\"kpt-data-table__fcell\"\n              type=\"text\"\n              inputmode=\"numeric\"\n              [attr.placeholder]=\"col.filter.placeholder || ''\"\n              [attr.aria-label]=\"i18n.t('dataTable.filter', { column: col.header })\"\n              [value]=\"$any(columnFilters()[col.field]) || ''\"\n              (input)=\"onNumberFilter(col.field, $event)\"\n              (click)=\"$event.stopPropagation()\"\n            />\n          }\n          @case ('select') {\n            <kpt-select\n              [options]=\"col.filter.options || []\"\n              [multiple]=\"!!col.filter.multiple\"\n              filter\n              [placeholder]=\"col.filter.placeholder || i18n.t('dataTable.all')\"\n              [value]=\"columnFilters()[col.field] ?? null\"\n              (valueChange)=\"setColumnFilter(col.field, $event)\"\n            />\n          }\n          @case ('numberRange') {\n            <div class=\"kpt-data-table__frange\">\n              <input\n                class=\"kpt-data-table__fcell\"\n                type=\"text\"\n                inputmode=\"numeric\"\n                [attr.placeholder]=\"i18n.t('dataTable.min')\"\n                [attr.aria-label]=\"i18n.t('dataTable.filterMin', { column: col.header })\"\n                [value]=\"rangeVal(col.field).min\"\n                (input)=\"setRangeFilter(col.field, 'min', $event)\"\n                (click)=\"$event.stopPropagation()\"\n              />\n              <input\n                class=\"kpt-data-table__fcell\"\n                type=\"text\"\n                inputmode=\"numeric\"\n                [attr.placeholder]=\"i18n.t('dataTable.max')\"\n                [attr.aria-label]=\"i18n.t('dataTable.filterMax', { column: col.header })\"\n                [value]=\"rangeVal(col.field).max\"\n                (input)=\"setRangeFilter(col.field, 'max', $event)\"\n                (click)=\"$event.stopPropagation()\"\n              />\n            </div>\n          }\n          @case ('slider') {\n            <div class=\"kpt-data-table__fslider\" (click)=\"$event.stopPropagation()\">\n              <kpt-slider\n                range\n                [min]=\"col.filter.min ?? 0\"\n                [max]=\"col.filter.max ?? 100\"\n                [step]=\"col.filter.step ?? 1\"\n                [value]=\"sliderVal(col)\"\n                (valueChange)=\"setColumnFilter(col.field, $event)\"\n                showValue\n              />\n            </div>\n          }\n          @case ('dateRange') {\n            <kpt-date-range\n              [placeholder]=\"col.filter.placeholder || i18n.t('dataTable.dateRange')\"\n              [value]=\"$any(columnFilters()[col.field]) || { start: '', end: '' }\"\n              (valueChange)=\"setColumnFilter(col.field, $event)\"\n            />\n          }\n        }\n      </th>\n    }\n  </tr>\n</ng-template>\n\n@if (pageSize() > 0 && !virtualScroll()) {\n  <div class=\"kpt-data-table__pager\">\n    <ng-content select=\"[kptPaginatorActions]\" />\n    <kpt-paginator\n      [length]=\"filteredCount()\"\n      [pageIndex]=\"pageIndex()\"\n      (pageIndexChange)=\"pageIndex.set($event)\"\n      [pageSize]=\"pageSizeState()\"\n      (pageSizeChange)=\"pageSizeState.set($event)\"\n      [pageSizeOptions]=\"pageSizeOptions()\"\n    />\n  </div>\n}\n", styles: ["@layer kpt.components{.kpt-data-table{display:flex;flex-direction:column;background:var(--kpt-table-bg);color:var(--kpt-table-fg);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-table-border);border-radius:var(--kpt-table-radius, .75rem);overflow:hidden;flex-grow:1}.kpt-data-table__toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--kpt-space-3, .75rem);padding:var(--kpt-space-3, .75rem);border-bottom:var(--kpt-border-width-thin, 1px) solid var(--kpt-table-border)}.kpt-data-table__filter{width:100%;max-width:20rem;height:2.25rem;padding-inline:var(--kpt-space-3, .75rem);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)}.kpt-data-table__filter:focus-visible{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-data-table__scroll{overflow:auto}.kpt-data-table__pager{display:flex;align-items:center;gap:var(--kpt-space-2, .5rem)}.kpt-data-table__pager [kptPaginatorActions]{margin-inline-start:.5rem}.kpt-data-table__pager kpt-paginator{flex:1 1 auto;min-width:0}.kpt-data-table__table{width:100%;border-collapse:collapse;font-size:var(--kpt-font-size-sm, .875rem)}.kpt-data-table__table--frozen{width:max-content;min-width:100%}.kpt-data-table__table th,.kpt-data-table__table td{padding:var(--kpt-table-cell-padding, .75rem);text-align:start;border-bottom:var(--kpt-border-width-thin, 1px) solid var(--kpt-table-border)}.kpt-data-table__table th[data-align=center],.kpt-data-table__table td[data-align=center]{text-align:center}.kpt-data-table__table th[data-align=end],.kpt-data-table__table td[data-align=end]{text-align:end}.kpt-data-table__table thead th{position:sticky;top:0;z-index:1;background:var(--kpt-table-header-bg);color:var(--kpt-table-header-fg);font-weight:var(--kpt-font-weight-semibold, 600);white-space:nowrap;-webkit-user-select:none;user-select:none}.kpt-data-table__table thead tr:nth-child(2) th{top:var(--kpt-thead-offset, 0px)}.kpt-data-table__table tfoot th,.kpt-data-table__table tfoot td{position:sticky;bottom:0;z-index:1;background:var(--kpt-table-summary-bg, var(--kpt-table-header-bg));color:var(--kpt-table-header-fg);font-weight:var(--kpt-font-weight-semibold, 600);white-space:nowrap;border-bottom:0;border-top:var(--kpt-border-width-thin, 1px) solid var(--kpt-table-border)}.kpt-data-table__table .kpt-data-table__summary-label{text-align:end}.kpt-data-table__filter-row th{padding:var(--kpt-space-2, .5rem);font-weight:var(--kpt-font-weight-normal, 400);cursor:auto}.kpt-data-table__fcell{width:100%;height:2rem;padding-inline:var(--kpt-space-2, .5rem);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:inherit}.kpt-data-table__fcell:focus-visible{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-data-table__filter-row kpt-select,.kpt-data-table__filter-row kpt-date-range{display:block;width:100%;font-weight:var(--kpt-font-weight-normal, 400)}.kpt-data-table__frange{display:flex;gap:var(--kpt-space-2, .5rem)}.kpt-data-table__frange .kpt-data-table__fcell{min-width:0}.kpt-data-table__fslider .kpt-slider-host{width:100%}.kpt-data-table__fslider .kpt-slider__value{min-width:auto;font-size:var(--kpt-font-size-xs, .75rem);color:var(--kpt-color-on-surface-muted)}.kpt-data-table__th--sortable{cursor:pointer}.kpt-data-table__th--sortable:hover{color:var(--kpt-color-on-surface)}.kpt-data-table__cell--editable{cursor:pointer}.kpt-data-table__cell--editable:hover{background:var(--kpt-table-row-hover)}.kpt-data-table__cell--editable:focus-visible{outline:var(--kpt-border-width-medium, 2px) solid var(--kpt-color-focus-ring);outline-offset:-2px}.kpt-data-table__editor{display:block;min-width:8rem}.kpt-data-table__editor .kpt-input-number-host{max-width:6.5rem}.kpt-data-table__editor .kpt-input-number__btn{width:1.75rem}.kpt-data-table__sort{margin-inline-start:.35em;opacity:.35}.kpt-data-table__sort--active{opacity:1}.kpt-data-table__th--draggable{cursor:grab}.kpt-data-table__th--draggable:active{cursor:grabbing}.kpt-data-table__th--dragover{box-shadow:inset 2px 0 0 0 var(--kpt-color-primary)}.kpt-data-table__grip{margin-inline-end:.4em;opacity:.45}.kpt-data-table__checkbox{width:1px;white-space:nowrap;text-align:center}.kpt-data-table__checkbox input[type=checkbox]{appearance:none;-webkit-appearance:none;position:relative;display:inline-block;width:1.15rem;height:1.15rem;margin:0;vertical-align:middle;cursor:pointer;border:var(--kpt-border-width-medium, 2px) solid var(--kpt-form-field-border);border-radius:var(--kpt-radius-sm, .25rem);background:var(--kpt-form-field-bg);transition:background-color var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard),border-color var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-data-table__checkbox input[type=checkbox]:after{content:\"\";position:absolute;inset:0;opacity:0;background-color:var(--kpt-color-on-primary);transition:opacity var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard);-webkit-mask:no-repeat center/.85rem;mask:no-repeat center/.85rem}.kpt-data-table__checkbox input[type=checkbox]:checked,.kpt-data-table__checkbox input[type=checkbox]:indeterminate{background:var(--kpt-color-primary);border-color:var(--kpt-color-primary)}.kpt-data-table__checkbox input[type=checkbox]:checked:after{opacity:1;-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13 4.5 6.5 11 3 7.5' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13 4.5 6.5 11 3 7.5' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\")}.kpt-data-table__checkbox input[type=checkbox]:indeterminate:after{opacity:1;-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8h9' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8h9' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round'/%3E%3C/svg%3E\")}.kpt-data-table__checkbox input[type=checkbox]:focus-visible{outline:var(--kpt-border-width-medium, 2px) solid var(--kpt-color-focus-ring);outline-offset:2px}.kpt-data-table__expander{width:2.5rem;min-width:2.5rem;text-align:center;white-space:nowrap}.kpt-data-table__expander-btn{display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;padding:0;border:none;border-radius:var(--kpt-radius-sm, .25rem);background:transparent;color:var(--kpt-color-on-surface-muted);cursor:pointer;transition:background-color var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard),color var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-data-table__expander-btn kpt-icon{display:inline-flex;transition:transform var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-data-table__expander-btn:hover{background:var(--kpt-table-row-hover);color:var(--kpt-color-on-surface)}.kpt-data-table__expander-btn:focus-visible{outline:var(--kpt-border-width-medium, 2px) solid var(--kpt-color-focus-ring);outline-offset:2px}.kpt-data-table__expander-btn--open{color:var(--kpt-color-primary)}.kpt-data-table__expander-btn--open kpt-icon{transform:rotate(90deg)}.kpt-data-table__detail-row>.kpt-data-table__detail{padding:var(--kpt-space-4, 1rem);background:var(--kpt-table-detail-bg, var(--kpt-color-surface-variant, var(--kpt-table-row-hover)));border-bottom:var(--kpt-border-width-thin, 1px) solid var(--kpt-table-border);box-shadow:inset 3px 0 0 0 var(--kpt-color-primary)}.kpt-data-table tbody tr{transition:background-color var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-data-table tbody tr:hover{background:var(--kpt-table-row-hover)}.kpt-data-table tbody tr.kpt-data-table__detail-row:hover{background:transparent}.kpt-data-table__row--selected{background:var(--kpt-table-row-selected)!important}.kpt-data-table__row--expanded{background:var(--kpt-table-row-hover)}.kpt-data-table__table--frozen .kpt-data-table__checkbox{width:3rem;min-width:3rem}.kpt-data-table__table--frozen .kpt-data-table__expander{width:2.5rem;min-width:2.5rem}.kpt-data-table__cell--frozen{position:sticky;z-index:1;background:var(--kpt-table-bg);border-inline-end:var(--kpt-border-width-thin, 1px) solid var(--kpt-table-border)}.kpt-data-table thead th.kpt-data-table__cell--frozen{z-index:3;background:var(--kpt-table-header-bg)}.kpt-data-table tfoot th.kpt-data-table__cell--frozen,.kpt-data-table tfoot td.kpt-data-table__cell--frozen{z-index:3;background:var(--kpt-table-summary-bg, var(--kpt-table-header-bg))}.kpt-data-table tbody tr:hover .kpt-data-table__cell--frozen{background:var(--kpt-table-row-hover)}.kpt-data-table__row--selected.kpt-data-table__row--selected .kpt-data-table__cell--frozen,.kpt-data-table tbody tr.kpt-data-table__row--selected .kpt-data-table__cell--frozen{background:var(--kpt-table-row-selected)}.kpt-data-table__state{padding:var(--kpt-space-8, 2rem)!important;text-align:center!important;color:var(--kpt-color-on-surface-muted)}.kpt-data-table__table--virtual td{padding-block:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.kpt-data-table__spacer td{padding:0!important;border:0!important}.kpt-data-table tbody tr:last-child td{border-bottom:0}}\n"] }]
+    }], () => [], { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], filterable: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterable", required: false }] }], filterRowPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterRowPosition", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], rowKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowKey", required: false }] }], scrollHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollHeight", required: false }] }], virtualScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScroll", required: false }] }], rowHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowHeight", required: false }] }], reorderable: [{ type: i0.Input, args: [{ isSignal: true, alias: "reorderable", required: false }] }], exportable: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportable", required: false }] }], exportFilename: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportFilename", required: false }] }], lazy: [{ type: i0.Input, args: [{ isSignal: true, alias: "lazy", required: false }] }], totalRecords: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalRecords", required: false }] }], expandable: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandable", required: false }] }], multiExpand: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiExpand", required: false }] }], summaryLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "summaryLabel", required: false }] }], summaryValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "summaryValues", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }, { type: i0.Output, args: ["selectionChange"] }], expandedRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedRows", required: false }] }, { type: i0.Output, args: ["expandedRowsChange"] }], hiddenFields: [{ type: i0.Input, args: [{ isSignal: true, alias: "hiddenFields", required: false }] }, { type: i0.Output, args: ["hiddenFieldsChange"] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], lazyLoad: [{ type: i0.Output, args: ["lazyLoad"] }], cellEdit: [{ type: i0.Output, args: ["cellEdit"] }], scrollEl: [{ type: i0.ViewChild, args: ['scrollEl', { isSignal: true }] }], theadEl: [{ type: i0.ViewChild, args: ['theadEl', { isSignal: true }] }], editorHost: [{ type: i0.ViewChild, args: ['editorHost', { isSignal: true }] }], cellDefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => KptCellDef), { isSignal: true }] }], cellEditDefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => KptCellEditDef), { isSignal: true }] }], rowDetailDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KptRowDetailDef), { isSignal: true }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptDataTable, { className: "KptDataTable", filePath: "lib/data-table/data-table.component.ts", lineNumber: 173 }); })();
 
 const _c0$d = a0 => ({ $implicit: a0, level: 0 });
 const _c1$4 = (a0, a1) => ({ $implicit: a0, level: a1 });