@konce-pt/angular 0.7.6 → 0.7.8

package/fesm2022/konce-pt-angular.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, booleanAttribute, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, model, output, signal, Injectable, inject, ElementRef, effect, InjectionToken, PLATFORM_ID, DestroyRef, makeEnvironmentProviders, contentChild, afterNextRender, forwardRef, numberAttribute, viewChild, Directive, TemplateRef, contentChildren, viewChildren, afterRenderEffect, linkedSignal } from '@angular/core';
+import { input, booleanAttribute, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, model, output, signal, Injectable, inject, ElementRef, effect, InjectionToken, PLATFORM_ID, DestroyRef, makeEnvironmentProviders, contentChild, afterNextRender, untracked, forwardRef, numberAttribute, viewChild, Directive, TemplateRef, contentChildren, viewChildren, afterRenderEffect, linkedSignal } from '@angular/core';
 import { CdkOverlayOrigin, CdkConnectedOverlay, OverlayContainer } from '@angular/cdk/overlay';
 import { isPlatformBrowser, NgTemplateOutlet } from '@angular/common';
 
@@ -308,8 +308,48 @@ const KPT_ICONS = {
     'share': '<path d="M6 12m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" /> <path d="M18 6m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" /> <path d="M18 18m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" /> <path d="M8.7 10.7l6.6 -3.4" /> <path d="M8.7 13.3l6.6 3.4" />',
     'external-link': '<path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6" /> <path d="M11 13l9 -9" /> <path d="M15 4h5v5" />',
     'crosshair': '<path d="M4 12h4" /> <path d="M16 12h4" /> <path d="M12 4v4" /> <path d="M12 16v4" /> <path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" />',
+    'adjustments-horizontal': '<path d="M12 6a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" /> <path d="M4 6l8 0" /> <path d="M16 6l4 0" /> <path d="M6 12a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" /> <path d="M4 12l2 0" /> <path d="M10 12l10 0" /> <path d="M15 18a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" /> <path d="M4 18l11 0" /> <path d="M19 18l1 0" />',
 };
 
+// Allowlist SVG dla treści przechodzącej przez `register()` — sam rejestr trafia bez sanitizera
+// wprost do `innerHTML` (`icon.component.ts`, markery mapy), więc runtime'owe wywołanie `register()`
+// z niezaufaną treścią (CMS/API/upload) byłoby DOM XSS. Wbudowany `KPT_ICONS` (build-time, zaufany)
+// nie przechodzi przez ten filtr. Zestaw tagów/atrybutów pokrywa 100% wbudowanych ikon i pełnego
+// zestawu Tabler (5130) — oba używają wyłącznie `<path d/fill/opacity/stroke>` — więc sanitizacja
+// jest dla nich no-opem.
+const ALLOWED_SVG_TAGS = new Set([
+    'path', 'circle', 'rect', 'g', 'line', 'polygon', 'polyline', 'ellipse',
+]);
+const ALLOWED_SVG_ATTRS = new Set([
+    'd', 'cx', 'cy', 'r', 'rx', 'ry', 'x', 'y', 'x1', 'y1', 'x2', 'y2', 'width', 'height', 'points',
+    'fill', 'stroke', 'stroke-width', 'stroke-linecap', 'stroke-linejoin', 'opacity', 'transform',
+]);
+/**
+ * Sanityzuje fragment SVG do allowlisty tagów/atrybutów geometrii — patrz komentarz wyżej.
+ *
+ * Fragment MUSI być parsowany owinięty w `<svg>` — parser HTML przełącza się w tryb „foreign
+ * content" dopiero po napotkaniu tagu `<svg>`, dopiero wtedy składnia samozamykająca (`<path .../>`)
+ * jest respektowana. Bez wrappera `<path d="…" />` zostaje w zwykłym trybie HTML, gdzie `path` nie
+ * jest elementem pustym — kolejne rodzeństwo trafiłoby jako jego DZIECKO zamiast obok niego.
+ */
+function sanitizeSvgFragment(svg) {
+    const tpl = document.createElement('template');
+    tpl.innerHTML = `<svg>${svg}</svg>`;
+    const root = tpl.content.firstElementChild;
+    if (!root)
+        return '';
+    for (const el of Array.from(root.querySelectorAll('*'))) {
+        if (!ALLOWED_SVG_TAGS.has(el.tagName.toLowerCase())) {
+            el.remove();
+            continue;
+        }
+        for (const attr of Array.from(el.attributes)) {
+            if (!ALLOWED_SVG_ATTRS.has(attr.name.toLowerCase()))
+                el.removeAttribute(attr.name);
+        }
+    }
+    return root.innerHTML;
+}
 /**
  * Rejestr ikon dla `kpt-icon`. Zawiera wbudowany zestaw (używany przez komponenty).
  * Aby dodać pełny zestaw Tabler (5130 ikon), użyj `provideKptTablerIcons()`
@@ -323,10 +363,17 @@ class KptIconRegistry {
         /** Rośnie po każdej rejestracji — pozwala `kpt-icon` reagować na późne dodanie ikon. */
         this.version = this._version.asReadonly();
     }
-    /** Rejestruje (lub nadpisuje) ikony: `{ nazwa: 'inner svg' }`. */
+    /**
+     * Rejestruje (lub nadpisuje) ikony: `{ nazwa: 'inner svg' }`.
+     *
+     * Treść jest sanityzowana do allowlisty geometrii SVG (`path`/`circle`/`rect`/`g`/`line`/
+     * `polygon`/`polyline`/`ellipse` i ich atrybutów kształtu/stylu) — mimo to `register()` wolno
+     * wołać wyłącznie z treścią kontrolowaną przez developera (build-time), nigdy bezpośrednio
+     * z danych runtime/CMS/uploadu bez własnej walidacji domenowej wyżej w stosie.
+     */
     register(icons) {
         for (const [name, svg] of Object.entries(icons)) {
-            this.icons.set(name, svg);
+            this.icons.set(name, sanitizeSvgFragment(svg));
         }
         this._version.update((v) => v + 1);
     }
@@ -425,6 +472,11 @@ function KptAvatar_Conditional_3_Template(rf, ctx) { if (rf & 1) {
 /**
  * Awatar — obraz, inicjały (z `name`) lub ikona.
  *
+ * `name` trafia do natywnego `title` (podpowiedź spod kursora — inicjały same w sobie
+ * nie mówią, kto to jest). Bez `src` awatar dostaje dodatkowo `role="img"` i `aria-label`,
+ * a same inicjały są `aria-hidden`, żeby czytnik nie przeczytał „AK" litera po literze.
+ * Przy `src` etykietę niesie już `alt` obrazu — nie dublujemy jej.
+ *
  * @example
  * <kpt-avatar src="/u/anna.jpg" />
  * <kpt-avatar name="Anna Kowalska" size="lg" />
@@ -451,12 +503,12 @@ class KptAvatar {
         ...(ngDevMode ? [{ debugName: "initials" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = function KptAvatar_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || KptAvatar)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptAvatar, selectors: [["kpt-avatar"]], hostAttrs: [1, "kpt-avatar-host"], inputs: { src: [1, "src"], name: [1, "name"], icon: [1, "icon"], size: [1, "size"], shape: [1, "shape"] }, decls: 4, vars: 3, consts: [[1, "kpt-avatar"], [1, "kpt-avatar__img", 3, "src", "alt"], [1, "kpt-avatar__initials"], [3, "name"]], template: function KptAvatar_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptAvatar, selectors: [["kpt-avatar"]], hostAttrs: [1, "kpt-avatar-host"], inputs: { src: [1, "src"], name: [1, "name"], icon: [1, "icon"], size: [1, "size"], shape: [1, "shape"] }, decls: 4, vars: 6, consts: [[1, "kpt-avatar"], [1, "kpt-avatar__img", 3, "src", "alt"], ["aria-hidden", "true", 1, "kpt-avatar__initials"], [3, "name"]], template: function KptAvatar_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "span", 0);
             i0.ɵɵconditionalCreate(1, KptAvatar_Conditional_1_Template, 1, 2, "img", 1)(2, KptAvatar_Conditional_2_Template, 2, 1, "span", 2)(3, KptAvatar_Conditional_3_Template, 1, 1, "kpt-icon", 3);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
-            i0.ɵɵattribute("data-size", ctx.size())("data-shape", ctx.shape());
+            i0.ɵɵattribute("data-size", ctx.size())("data-shape", ctx.shape())("title", ctx.name() || null)("role", !ctx.src() && ctx.name() ? "img" : null)("aria-label", !ctx.src() && ctx.name() ? ctx.name() : null);
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.src() ? 1 : ctx.name() ? 2 : ctx.icon() ? 3 : -1);
         } }, dependencies: [KptIcon], styles: ["@layer kpt.components{.kpt-avatar-host{display:inline-flex;vertical-align:middle}.kpt-avatar{--%NS%_size: 2.5rem;display:inline-flex;align-items:center;justify-content:center;width:var(--%NS%_size);height:var(--%NS%_size);border-radius:var(--%NS%kpt-radius-full, 9999px);background:var(--%NS%kpt-color-muted);color:var(--%NS%kpt-color-on-muted);font-weight:var(--%NS%kpt-font-weight-semibold, 600);font-size:calc(var(--%NS%_size) * .4);overflow:hidden;-webkit-user-select:none;user-select:none}.kpt-avatar[data-size=sm]{--%NS%_size: 2rem}.kpt-avatar[data-size=md]{--%NS%_size: 2.5rem}.kpt-avatar[data-size=lg]{--%NS%_size: 3rem}.kpt-avatar[data-size=xl]{--%NS%_size: 4rem}.kpt-avatar[data-shape=square]{border-radius:var(--%NS%kpt-radius-md, .5rem)}.kpt-avatar__img{width:100%;height:100%;object-fit:cover}}\n"], encapsulation: 2 }); }
@@ -464,18 +516,25 @@ class KptAvatar {
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(KptAvatar, [{
         type: Component,
         args: [{ selector: 'kpt-avatar', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [KptIcon], template: `
-    <span class="kpt-avatar" [attr.data-size]="size()" [attr.data-shape]="shape()">
+    <span
+      class="kpt-avatar"
+      [attr.data-size]="size()"
+      [attr.data-shape]="shape()"
+      [attr.title]="name() || null"
+      [attr.role]="!src() && name() ? 'img' : null"
+      [attr.aria-label]="!src() && name() ? name() : null"
+    >
       @if (src()) {
         <img class="kpt-avatar__img" [src]="src()" [alt]="name() || ''" />
       } @else if (name()) {
-        <span class="kpt-avatar__initials">{{ initials() }}</span>
+        <span class="kpt-avatar__initials" aria-hidden="true">{{ initials() }}</span>
       } @else if (icon()) {
         <kpt-icon [name]="icon()!" />
       }
     </span>
   `, host: { class: 'kpt-avatar-host' }, styles: ["@layer kpt.components{.kpt-avatar-host{display:inline-flex;vertical-align:middle}.kpt-avatar{--_size: 2.5rem;display:inline-flex;align-items:center;justify-content:center;width:var(--_size);height:var(--_size);border-radius:var(--kpt-radius-full, 9999px);background:var(--kpt-color-muted);color:var(--kpt-color-on-muted);font-weight:var(--kpt-font-weight-semibold, 600);font-size:calc(var(--_size) * .4);overflow:hidden;-webkit-user-select:none;user-select:none}.kpt-avatar[data-size=sm]{--_size: 2rem}.kpt-avatar[data-size=md]{--_size: 2.5rem}.kpt-avatar[data-size=lg]{--_size: 3rem}.kpt-avatar[data-size=xl]{--_size: 4rem}.kpt-avatar[data-shape=square]{border-radius:var(--kpt-radius-md, .5rem)}.kpt-avatar__img{width:100%;height:100%;object-fit:cover}}\n"] }]
     }], null, { src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptAvatar, { className: "KptAvatar", filePath: "lib/avatar/avatar.component.ts", lineNumber: 34 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptAvatar, { className: "KptAvatar", filePath: "lib/avatar/avatar.component.ts", lineNumber: 46 }); })();
 
 const _c0$A = ["*"];
 /**
@@ -675,6 +734,7 @@ const KPT_MESSAGES_EN = {
         dateRange: 'Date range',
         min: 'min',
         max: 'max',
+        editCell: 'Edit: {column}',
     },
     confirm: {
         header: 'Confirmation',
@@ -702,6 +762,11 @@ const KPT_MESSAGES_EN = {
         nextYear: 'Next year',
         prevYears: 'Previous years',
         nextYears: 'Next years',
+        prevDecades: 'Previous decades',
+        nextDecades: 'Next decades',
+        chooseMonth: 'Choose month',
+        chooseYear: 'Choose year',
+        chooseDecade: 'Choose decade',
         calendar: 'Calendar',
         month: 'Month',
         time: 'Time',
@@ -936,6 +1001,7 @@ const KPT_MESSAGES_PL = {
         dateRange: 'Zakres dat',
         min: 'min',
         max: 'max',
+        editCell: 'Edytuj: {column}',
     },
     confirm: {
         header: 'Potwierdzenie',
@@ -963,6 +1029,11 @@ const KPT_MESSAGES_PL = {
         nextYear: 'Następny rok',
         prevYears: 'Poprzednie lata',
         nextYears: 'Następne lata',
+        prevDecades: 'Poprzednie dekady',
+        nextDecades: 'Następne dekady',
+        chooseMonth: 'Wybierz miesiąc',
+        chooseYear: 'Wybierz rok',
+        chooseDecade: 'Wybierz dekadę',
         calendar: 'Kalendarz',
         month: 'Miesiąc',
         time: 'Godzina',
@@ -2499,7 +2570,11 @@ class KptSelect {
         ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
         this.touch = output();
         this.i18n = inject(KptI18n);
-        this.open = signal(false, /* @ts-ignore */
+        /**
+         * Stan panelu (dwukierunkowy). Pozwala otworzyć listę z zewnątrz i — co ważniejsze — wiedzieć,
+         * kiedy user skończył wybierać. `touch` się do tego nie nadaje: leci też z blur triggera.
+         */
+        this.open = model(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
         this.filterText = signal('', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "filterText" }] : /* istanbul ignore next */ []));
@@ -2535,6 +2610,17 @@ class KptSelect {
          */
         this.filled = computed(() => this.selectedOptions().length > 0, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "filled" }] : /* istanbul ignore next */ []));
+        // Panel może zostać otwarty także z zewnątrz (`[open]`), nie tylko klikiem w trigger —
+        // filtr i aktywną pozycję resetujemy więc przy każdym otwarciu, nie w `toggleOpen()`.
+        effect(() => {
+            const isOpen = this.open();
+            untracked(() => {
+                if (!isOpen)
+                    return;
+                this.filterText.set('');
+                this.activeIndex.set(-1);
+            });
+        });
     }
     isSelected(opt) {
         return this.selectedValues().includes(opt.value);
@@ -2543,10 +2629,6 @@ class KptSelect {
         if (this.disabled())
             return;
         this.open.update((o) => !o);
-        if (this.open()) {
-            this.filterText.set('');
-            this.activeIndex.set(-1);
-        }
     }
     close() {
         if (!this.open())
@@ -2609,7 +2691,7 @@ class KptSelect {
         }
     }
     static { this.ɵfac = function KptSelect_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || KptSelect)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptSelect, selectors: [["kpt-select"]], hostAttrs: [1, "kpt-select-host"], inputs: { options: [1, "options"], placeholder: [1, "placeholder"], multiple: [1, "multiple"], filter: [1, "filter"], disabled: [1, "disabled"], invalid: [1, "invalid"], touched: [1, "touched"], value: [1, "value"] }, outputs: { value: "valueChange", touch: "touch" }, features: [i0.ɵɵProvidersFeature([{ provide: KPT_FORM_FIELD_CONTROL, useExisting: forwardRef(() => KptSelect) }])], decls: 8, vars: 14, consts: [["trigger", "cdkOverlayOrigin"], ["cdkOverlayOrigin", "", "role", "combobox", "tabindex", "0", 1, "kpt-select", 3, "click", "keydown", "blur"], [1, "kpt-select__value"], [1, "kpt-select__single"], [1, "kpt-select__placeholder"], ["name", "chevron-down", 1, "kpt-select__chevron"], ["cdkConnectedOverlay", "", "cdkConnectedOverlayBackdropClass", "cdk-overlay-transparent-backdrop", 3, "backdropClick", "detach", "cdkConnectedOverlayOrigin", "cdkConnectedOverlayOpen", "cdkConnectedOverlayPositions", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayWidth"], [1, "kpt-select__chip"], ["type", "button", 1, "kpt-select__chip-remove", 3, "click"], ["name", "x"], [1, "kpt-select__panel", 3, "keydown"], [1, "kpt-select__search"], ["role", "listbox", 1, "kpt-select__list"], ["role", "option", 1, "kpt-select__option", 3, "kpt-select__option--selected", "kpt-select__option--active", "kpt-select__option--disabled"], [1, "kpt-select__empty"], ["name", "search"], ["type", "text", 1, "kpt-select__search-input", 3, "input", "value"], ["role", "option", 1, "kpt-select__option", 3, "click", "mouseenter"], [1, "kpt-select__check", 3, "is-on"], [1, "kpt-select__option-label"], ["name", "check", 1, "kpt-select__option-tick"], [1, "kpt-select__check"], ["name", "check"]], template: function KptSelect_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptSelect, selectors: [["kpt-select"]], hostAttrs: [1, "kpt-select-host"], inputs: { options: [1, "options"], placeholder: [1, "placeholder"], multiple: [1, "multiple"], filter: [1, "filter"], disabled: [1, "disabled"], invalid: [1, "invalid"], touched: [1, "touched"], value: [1, "value"], open: [1, "open"] }, outputs: { value: "valueChange", touch: "touch", open: "openChange" }, features: [i0.ɵɵProvidersFeature([{ provide: KPT_FORM_FIELD_CONTROL, useExisting: forwardRef(() => KptSelect) }])], decls: 8, vars: 14, consts: [["trigger", "cdkOverlayOrigin"], ["cdkOverlayOrigin", "", "role", "combobox", "tabindex", "0", 1, "kpt-select", 3, "click", "keydown", "blur"], [1, "kpt-select__value"], [1, "kpt-select__single"], [1, "kpt-select__placeholder"], ["name", "chevron-down", 1, "kpt-select__chevron"], ["cdkConnectedOverlay", "", "cdkConnectedOverlayBackdropClass", "cdk-overlay-transparent-backdrop", 3, "backdropClick", "detach", "cdkConnectedOverlayOrigin", "cdkConnectedOverlayOpen", "cdkConnectedOverlayPositions", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayWidth"], [1, "kpt-select__chip"], ["type", "button", 1, "kpt-select__chip-remove", 3, "click"], ["name", "x"], [1, "kpt-select__panel", 3, "keydown"], [1, "kpt-select__search"], ["role", "listbox", 1, "kpt-select__list"], ["role", "option", 1, "kpt-select__option", 3, "kpt-select__option--selected", "kpt-select__option--active", "kpt-select__option--disabled"], [1, "kpt-select__empty"], ["name", "search"], ["type", "text", 1, "kpt-select__search-input", 3, "input", "value"], ["role", "option", 1, "kpt-select__option", 3, "click", "mouseenter"], [1, "kpt-select__check", 3, "is-on"], [1, "kpt-select__option-label"], ["name", "check", 1, "kpt-select__option-tick"], [1, "kpt-select__check"], ["name", "check"]], template: function KptSelect_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 1, 0);
             i0.ɵɵlistener("click", function KptSelect_Template_div_click_0_listener() { return ctx.toggleOpen(); })("keydown", function KptSelect_Template_div_keydown_0_listener($event) { return ctx.onTriggerKeydown($event); })("blur", function KptSelect_Template_div_blur_0_listener() { return ctx.touch.emit(); });
             i0.ɵɵelementStart(2, "div", 2);
@@ -2632,8 +2714,8 @@ class KptSelect {
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(KptSelect, [{
         type: Component,
         args: [{ selector: 'kpt-select', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [CdkOverlayOrigin, CdkConnectedOverlay, KptIcon], host: { class: 'kpt-select-host' }, providers: [{ provide: KPT_FORM_FIELD_CONTROL, useExisting: forwardRef(() => KptSelect) }], template: "<div\n  class=\"kpt-select\"\n  cdkOverlayOrigin\n  #trigger=\"cdkOverlayOrigin\"\n  role=\"combobox\"\n  tabindex=\"0\"\n  [class.kpt-select--open]=\"open()\"\n  [class.kpt-select--disabled]=\"disabled()\"\n  [class.kpt-select--invalid]=\"showInvalid()\"\n  [attr.aria-expanded]=\"open()\"\n  [attr.aria-disabled]=\"disabled() || null\"\n  (click)=\"toggleOpen()\"\n  (keydown)=\"onTriggerKeydown($event)\"\n  (blur)=\"touch.emit()\"\n>\n  <div class=\"kpt-select__value\">\n    @if (multiple() && selectedOptions().length) {\n      @for (opt of selectedOptions(); track opt.value) {\n        <span class=\"kpt-select__chip\">\n          {{ opt.label }}\n          <button type=\"button\" class=\"kpt-select__chip-remove\" (click)=\"removeChip(opt, $event)\" [attr.aria-label]=\"i18n.t('select.removeChip')\">\n            <kpt-icon name=\"x\" />\n          </button>\n        </span>\n      }\n    } @else if (!multiple() && filled()) {\n      <span class=\"kpt-select__single\">{{ singleLabel() }}</span>\n    } @else {\n      <span class=\"kpt-select__placeholder\">{{ placeholder() }}</span>\n    }\n  </div>\n  <kpt-icon class=\"kpt-select__chevron\" name=\"chevron-down\" />\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  [cdkConnectedOverlayWidth]=\"trigger.elementRef.nativeElement.offsetWidth\"\n  (backdropClick)=\"close()\"\n  (detach)=\"close()\"\n>\n  <div class=\"kpt-select__panel\" (keydown)=\"onPanelKeydown($event)\">\n    @if (filter()) {\n      <div class=\"kpt-select__search\">\n        <kpt-icon name=\"search\" />\n        <input\n          type=\"text\"\n          class=\"kpt-select__search-input\"\n          [value]=\"filterText()\"\n          (input)=\"onFilterInput($event)\"\n          [attr.placeholder]=\"i18n.t('select.search')\"\n        />\n      </div>\n    }\n    <ul class=\"kpt-select__list\" role=\"listbox\" [attr.aria-multiselectable]=\"multiple()\">\n      @for (opt of filteredOptions(); track opt.value; let i = $index) {\n        <li\n          class=\"kpt-select__option\"\n          role=\"option\"\n          [attr.aria-selected]=\"isSelected(opt)\"\n          [class.kpt-select__option--selected]=\"isSelected(opt)\"\n          [class.kpt-select__option--active]=\"i === activeIndex()\"\n          [class.kpt-select__option--disabled]=\"opt.disabled\"\n          (click)=\"pick(opt)\"\n          (mouseenter)=\"activeIndex.set(i)\"\n        >\n          @if (multiple()) {\n            <span class=\"kpt-select__check\" [class.is-on]=\"isSelected(opt)\"><kpt-icon name=\"check\" /></span>\n          }\n          <span class=\"kpt-select__option-label\">{{ opt.label }}</span>\n          @if (!multiple() && isSelected(opt)) {\n            <kpt-icon class=\"kpt-select__option-tick\" name=\"check\" />\n          }\n        </li>\n      } @empty {\n        <li class=\"kpt-select__empty\">{{ i18n.t('select.noResults') }}</li>\n      }\n    </ul>\n  </div>\n</ng-template>\n", styles: ["@layer kpt.components{.kpt-select-host{display:block}.kpt-select{display:flex;align-items:center;gap:var(--kpt-space-2, .5rem);min-height:2.5rem;padding:.35rem 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;transition:border-color var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-select:hover:not(.kpt-select--disabled){border-color:var(--kpt-form-field-border-hover)}.kpt-select:focus-visible,.kpt-select.kpt-select--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-select.kpt-select--invalid{border-color:var(--kpt-form-field-border-error)}.kpt-select.kpt-select--disabled{cursor:not-allowed;opacity:.6;background:var(--kpt-color-surface-variant)}.kpt-select__value{flex:1;min-width:0;display:flex;flex-wrap:wrap;gap:.35rem;align-items:center}.kpt-select__placeholder{color:var(--kpt-form-field-placeholder)}.kpt-select__single{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kpt-select__chip{display:inline-flex;align-items:center;gap:.25rem;padding:.1rem .25rem .1rem .5rem;border-radius:var(--kpt-radius-sm, .25rem);background:var(--kpt-color-muted);color:var(--kpt-color-on-muted);font-size:var(--kpt-font-size-xs, .75rem)}.kpt-select__chip-remove{display:inline-flex;border:0;background:none;cursor:pointer;color:inherit;padding:0;opacity:.7}.kpt-select__chip-remove:hover{opacity:1}.kpt-select__chevron{color:var(--kpt-color-on-surface-muted);transition:transform var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-select.kpt-select--open .kpt-select__chevron{transform:rotate(180deg)}.kpt-select__panel{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);overflow:hidden;font-size:var(--kpt-font-size-sm, .875rem);color:var(--kpt-color-on-surface)}.kpt-select__search{display:flex;align-items:center;gap:var(--kpt-space-2, .5rem);padding:var(--kpt-space-2, .5rem) var(--kpt-space-3, .75rem);border-bottom:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);color:var(--kpt-color-on-surface-muted)}.kpt-select__search-input{flex:1;min-width:0;border:0;background:none;outline:none;color:var(--kpt-color-on-surface);font:inherit}.kpt-select__search-input::placeholder{color:var(--kpt-color-on-surface-muted)}.kpt-select__list{list-style:none;margin:0;padding:.25rem;max-height:15rem;overflow-y:auto}.kpt-select__option{display:flex;align-items:center;gap:var(--kpt-space-2, .5rem);padding:.45rem .6rem;border-radius:var(--kpt-radius-sm, .25rem);cursor:pointer}.kpt-select__option--active{background:var(--kpt-color-surface-variant)}.kpt-select__option--selected{color:var(--kpt-color-on-surface);font-weight:var(--kpt-font-weight-medium, 500)}.kpt-select__option--disabled{opacity:.45;cursor:not-allowed}.kpt-select__option-label{flex:1;min-width:0}.kpt-select__option-tick{color:var(--kpt-color-primary)}.kpt-select__check{display:inline-flex;align-items:center;justify-content:center;width:1.05rem;height:1.05rem;flex-shrink:0;border:var(--kpt-border-width-medium, 2px) solid var(--kpt-form-field-border);border-radius:var(--kpt-radius-sm, .25rem);color:var(--kpt-color-on-primary);font-size:.7rem}.kpt-select__check kpt-icon{opacity:0}.kpt-select__check.is-on{background:var(--kpt-color-primary);border-color:var(--kpt-color-primary)}.kpt-select__check.is-on kpt-icon{opacity:1}.kpt-select__empty{list-style:none;padding:.75rem .6rem;color:var(--kpt-color-on-surface-muted);text-align:center}}\n"] }]
-    }], null, { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", 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 }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], touch: [{ type: i0.Output, args: ["touch"] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptSelect, { className: "KptSelect", filePath: "lib/select/select.component.ts", lineNumber: 40 }); })();
+    }], () => [], { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", 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 }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], touch: [{ type: i0.Output, args: ["touch"] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptSelect, { className: "KptSelect", filePath: "lib/select/select.component.ts", lineNumber: 42 }); })();
 
 /*
  * Pomocniki nazw dni/miesięcy wyliczane z `Intl` — sterowane bieżącym locale i18n.
@@ -2975,7 +3057,7 @@ class KptClock {
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptClock, { className: "KptClock", filePath: "lib/datepicker/clock.component.ts", lineNumber: 94 }); })();
 
 const _forTrack0$8 = ($index, $item) => $item.iso;
-const _forTrack1$1 = ($index, $item) => $item.value;
+const _forTrack1$2 = ($index, $item) => $item.label;
 function KptDatepicker_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 2);
     i0.ɵɵtext(1);
@@ -3004,325 +3086,284 @@ function KptDatepicker_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵattribute("aria-label", ctx_r0.i18n.t("common.clear"));
 } }
-function KptDatepicker_ng_template_7_Case_1_Template(rf, ctx) { if (rf & 1) {
-    const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kpt-clock", 11);
-    i0.ɵɵtwoWayListener("valueChange", function KptDatepicker_ng_template_7_Case_1_Template_kpt_clock_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r0.timeStr, $event) || (ctx_r0.timeStr = $event); return i0.ɵɵresetView($event); });
+function KptDatepicker_ng_template_7_Conditional_1_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 12)(1, "button", 14);
+    i0.ɵɵlistener("click", function KptDatepicker_ng_template_7_Conditional_1_Conditional_0_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.backToCalendar()); });
+    i0.ɵɵelement(2, "kpt-icon", 15);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(1, "div", 12)(2, "kpt-button", 13);
-    i0.ɵɵlistener("click", function KptDatepicker_ng_template_7_Case_1_Template_kpt_button_click_2_listener() { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.commit()); });
-    i0.ɵɵtext(3);
+    i0.ɵɵelementStart(3, "span", 16);
+    i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(2);
-    i0.ɵɵtwoWayProperty("value", ctx_r0.timeStr);
-    i0.ɵɵproperty("hourFormat", ctx_r0.hourFormat())("minuteStep", ctx_r0.minuteStep());
-    i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(ctx_r0.i18n.t("common.done"));
-} }
-function KptDatepicker_ng_template_7_Case_2_Conditional_0_For_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 20);
-    i0.ɵɵtext(1);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const wd_r7 = ctx.$implicit;
+    const ctx_r0 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(wd_r7);
+    i0.ɵɵattribute("aria-label", ctx_r0.i18n.t("datepicker.calendar"));
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(ctx_r0.i18n.t("datepicker.time"));
 } }
-function KptDatepicker_ng_template_7_Case_2_Conditional_0_For_12_For_1_Template(rf, ctx) { if (rf & 1) {
-    const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 25);
-    i0.ɵɵlistener("click", function KptDatepicker_ng_template_7_Case_2_Conditional_0_For_12_For_1_Template_button_click_0_listener() { const cell_r9 = i0.ɵɵrestoreView(_r8).$implicit; const ctx_r0 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r0.selectDay(cell_r9)); });
-    i0.ɵɵtext(1);
+function KptDatepicker_ng_template_7_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵconditionalCreate(0, KptDatepicker_ng_template_7_Conditional_1_Conditional_0_Template, 5, 2, "div", 12);
+    i0.ɵɵelementStart(1, "kpt-clock", 13);
+    i0.ɵɵtwoWayListener("valueChange", function KptDatepicker_ng_template_7_Conditional_1_Template_kpt_clock_valueChange_1_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r0.timeStr, $event) || (ctx_r0.timeStr = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const cell_r9 = ctx.$implicit;
-    i0.ɵɵclassProp("kpt-calendar__day--muted", !cell_r9.inMonth)("kpt-calendar__day--today", cell_r9.today)("kpt-calendar__day--selected", cell_r9.selected);
-    i0.ɵɵproperty("disabled", cell_r9.disabled);
-    i0.ɵɵattribute("aria-pressed", cell_r9.selected);
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵconditional(ctx_r0.selectionMode() === "datetime" ? 0 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(cell_r9.day);
-} }
-function KptDatepicker_ng_template_7_Case_2_Conditional_0_For_12_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵrepeaterCreate(0, KptDatepicker_ng_template_7_Case_2_Conditional_0_For_12_For_1_Template, 2, 9, "button", 24, _forTrack0$8);
-} if (rf & 2) {
-    const week_r10 = ctx.$implicit;
-    i0.ɵɵrepeater(week_r10);
+    i0.ɵɵtwoWayProperty("value", ctx_r0.timeStr);
+    i0.ɵɵproperty("hourFormat", ctx_r0.hourFormat())("minuteStep", ctx_r0.minuteStep());
 } }
-function KptDatepicker_ng_template_7_Case_2_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+function KptDatepicker_ng_template_7_Conditional_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 14)(1, "button", 15);
-    i0.ɵɵlistener("click", function KptDatepicker_ng_template_7_Case_2_Conditional_0_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r6); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.prevMonth()); });
-    i0.ɵɵelement(2, "kpt-icon", 16);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 17);
-    i0.ɵɵtext(4);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "button", 15);
-    i0.ɵɵlistener("click", function KptDatepicker_ng_template_7_Case_2_Conditional_0_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r6); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.nextMonth()); });
-    i0.ɵɵelement(6, "kpt-icon", 18);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(7, "div", 19);
-    i0.ɵɵrepeaterCreate(8, KptDatepicker_ng_template_7_Case_2_Conditional_0_For_9_Template, 2, 1, "span", 20, i0.ɵɵrepeaterTrackByIdentity);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "div", 21);
-    i0.ɵɵrepeaterCreate(11, KptDatepicker_ng_template_7_Case_2_Conditional_0_For_12_Template, 2, 0, null, null, i0.ɵɵrepeaterTrackByIndex);
+    i0.ɵɵelementStart(0, "button", 22);
+    i0.ɵɵlistener("click", function KptDatepicker_ng_template_7_Conditional_2_Conditional_1_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.pagePrev()); });
+    i0.ɵɵelement(1, "kpt-icon", 15);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(13, "button", 22);
-    i0.ɵɵlistener("click", function KptDatepicker_ng_template_7_Case_2_Conditional_0_Template_button_click_13_listener() { i0.ɵɵrestoreView(_r6); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.openClock()); });
-    i0.ɵɵelement(14, "kpt-icon", 23);
-    i0.ɵɵelementStart(15, "span");
-    i0.ɵɵtext(16);
-    i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(3);
-    i0.ɵɵadvance();
-    i0.ɵɵattribute("aria-label", ctx_r0.i18n.t("datepicker.prevMonth"));
-    i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(ctx_r0.monthLabel());
-    i0.ɵɵadvance();
-    i0.ɵɵattribute("aria-label", ctx_r0.i18n.t("datepicker.nextMonth"));
-    i0.ɵɵadvance(3);
-    i0.ɵɵrepeater(ctx_r0.weekdays());
-    i0.ɵɵadvance(3);
-    i0.ɵɵrepeater(ctx_r0.weeks());
-    i0.ɵɵadvance(5);
-    i0.ɵɵtextInterpolate(ctx_r0.timeBarLabel());
+    i0.ɵɵproperty("disabled", !ctx_r0.canPageBack());
+    i0.ɵɵattribute("aria-label", ctx_r0.navPrevLabel());
 } }
-function KptDatepicker_ng_template_7_Case_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    const _r11 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 14)(1, "button", 15);
-    i0.ɵɵlistener("click", function KptDatepicker_ng_template_7_Case_2_Conditional_1_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r11); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.backToCalendar()); });
-    i0.ɵɵelement(2, "kpt-icon", 16);
+function KptDatepicker_ng_template_7_Conditional_2_Case_3_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 23);
+    i0.ɵɵlistener("click", function KptDatepicker_ng_template_7_Conditional_2_Case_3_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r7); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.goTo("month")); });
+    i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 17);
-    i0.ɵɵtext(4);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(5, "kpt-clock", 11);
-    i0.ɵɵtwoWayListener("valueChange", function KptDatepicker_ng_template_7_Case_2_Conditional_1_Template_kpt_clock_valueChange_5_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r0 = i0.ɵɵnextContext(3); i0.ɵɵtwoWayBindingSet(ctx_r0.timeStr, $event) || (ctx_r0.timeStr = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(2, "button", 23);
+    i0.ɵɵlistener("click", function KptDatepicker_ng_template_7_Conditional_2_Case_3_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r7); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.goTo("year")); });
+    i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵattribute("aria-label", ctx_r0.i18n.t("datepicker.chooseMonth"));
     i0.ɵɵadvance();
-    i0.ɵɵattribute("aria-label", ctx_r0.i18n.t("datepicker.calendar"));
-    i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(ctx_r0.i18n.t("datepicker.time"));
+    i0.ɵɵtextInterpolate(ctx_r0.monthName());
     i0.ɵɵadvance();
-    i0.ɵɵtwoWayProperty("value", ctx_r0.timeStr);
-    i0.ɵɵproperty("hourFormat", ctx_r0.hourFormat())("minuteStep", ctx_r0.minuteStep());
-} }
-function KptDatepicker_ng_template_7_Case_2_Template(rf, ctx) { if (rf & 1) {
-    const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵconditionalCreate(0, KptDatepicker_ng_template_7_Case_2_Conditional_0_Template, 17, 4)(1, KptDatepicker_ng_template_7_Case_2_Conditional_1_Template, 6, 5);
-    i0.ɵɵelementStart(2, "div", 12)(3, "kpt-button", 13);
-    i0.ɵɵlistener("click", function KptDatepicker_ng_template_7_Case_2_Template_kpt_button_click_3_listener() { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.commit()); });
-    i0.ɵɵtext(4);
-    i0.ɵɵelementEnd()();
-} if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(2);
-    i0.ɵɵconditional(ctx_r0.dtView() === "calendar" ? 0 : 1);
-    i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate(ctx_r0.i18n.t("common.done"));
+    i0.ɵɵattribute("aria-label", ctx_r0.i18n.t("datepicker.chooseYear"));
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r0.viewYear());
 } }
-function KptDatepicker_ng_template_7_Case_3_For_9_Template(rf, ctx) { if (rf & 1) {
-    const _r13 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 28);
-    i0.ɵɵlistener("click", function KptDatepicker_ng_template_7_Case_3_For_9_Template_button_click_0_listener() { const cell_r14 = i0.ɵɵrestoreView(_r13).$implicit; const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.selectCell(cell_r14)); });
+function KptDatepicker_ng_template_7_Conditional_2_Case_4_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 16);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const cell_r14 = ctx.$implicit;
-    i0.ɵɵclassProp("kpt-calendar__cell--selected", cell_r14.selected);
-    i0.ɵɵproperty("disabled", cell_r14.disabled);
-    i0.ɵɵattribute("aria-pressed", cell_r14.selected);
+    const ctx_r0 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(cell_r14.label);
+    i0.ɵɵtextInterpolate(ctx_r0.i18n.t("datepicker.month"));
 } }
-function KptDatepicker_ng_template_7_Case_3_Template(rf, ctx) { if (rf & 1) {
-    const _r12 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 14)(1, "button", 15);
-    i0.ɵɵlistener("click", function KptDatepicker_ng_template_7_Case_3_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r12); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.prevYear()); });
-    i0.ɵɵelement(2, "kpt-icon", 16);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 17);
-    i0.ɵɵtext(4);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "button", 15);
-    i0.ɵɵlistener("click", function KptDatepicker_ng_template_7_Case_3_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r12); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.nextYear()); });
-    i0.ɵɵelement(6, "kpt-icon", 18);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(7, "div", 26);
-    i0.ɵɵrepeaterCreate(8, KptDatepicker_ng_template_7_Case_3_For_9_Template, 2, 5, "button", 27, _forTrack1$1);
+function KptDatepicker_ng_template_7_Conditional_2_Case_4_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 23);
+    i0.ɵɵlistener("click", function KptDatepicker_ng_template_7_Conditional_2_Case_4_Conditional_1_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r8); const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.goTo("year")); });
+    i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(2);
+    const ctx_r0 = i0.ɵɵnextContext(4);
+    i0.ɵɵattribute("aria-label", ctx_r0.i18n.t("datepicker.chooseYear"));
     i0.ɵɵadvance();
-    i0.ɵɵattribute("aria-label", ctx_r0.i18n.t("datepicker.prevYear"));
-    i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate(ctx_r0.viewYear());
-    i0.ɵɵadvance();
-    i0.ɵɵattribute("aria-label", ctx_r0.i18n.t("datepicker.nextYear"));
-    i0.ɵɵadvance(3);
-    i0.ɵɵrepeater(ctx_r0.monthCells());
 } }
-function KptDatepicker_ng_template_7_Case_4_For_9_Template(rf, ctx) { if (rf & 1) {
-    const _r16 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 28);
-    i0.ɵɵlistener("click", function KptDatepicker_ng_template_7_Case_4_For_9_Template_button_click_0_listener() { const cell_r17 = i0.ɵɵrestoreView(_r16).$implicit; const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.selectCell(cell_r17)); });
-    i0.ɵɵtext(1);
-    i0.ɵɵelementEnd();
+function KptDatepicker_ng_template_7_Conditional_2_Case_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, KptDatepicker_ng_template_7_Conditional_2_Case_4_Conditional_0_Template, 2, 1, "span", 16)(1, KptDatepicker_ng_template_7_Conditional_2_Case_4_Conditional_1_Template, 2, 2, "button", 19);
 } if (rf & 2) {
-    const cell_r17 = ctx.$implicit;
-    i0.ɵɵclassProp("kpt-calendar__cell--selected", cell_r17.selected);
-    i0.ɵɵproperty("disabled", cell_r17.disabled);
-    i0.ɵɵattribute("aria-pressed", cell_r17.selected);
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(cell_r17.label);
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵconditional(ctx_r0.selectionMode() === "month" ? 0 : 1);
 } }
-function KptDatepicker_ng_template_7_Case_4_Template(rf, ctx) { if (rf & 1) {
-    const _r15 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 14)(1, "button", 15);
-    i0.ɵɵlistener("click", function KptDatepicker_ng_template_7_Case_4_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r15); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.prevYearPage()); });
-    i0.ɵɵelement(2, "kpt-icon", 16);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 17);
-    i0.ɵɵtext(4);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "button", 15);
-    i0.ɵɵlistener("click", function KptDatepicker_ng_template_7_Case_4_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r15); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.nextYearPage()); });
-    i0.ɵɵelement(6, "kpt-icon", 18);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(7, "div", 26);
-    i0.ɵɵrepeaterCreate(8, KptDatepicker_ng_template_7_Case_4_For_9_Template, 2, 5, "button", 27, _forTrack1$1);
+function KptDatepicker_ng_template_7_Conditional_2_Case_5_Template(rf, ctx) { if (rf & 1) {
+    const _r9 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 23);
+    i0.ɵɵlistener("click", function KptDatepicker_ng_template_7_Conditional_2_Case_5_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r9); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.goTo("decade")); });
+    i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(2);
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵattribute("aria-label", ctx_r0.i18n.t("datepicker.chooseDecade"));
     i0.ɵɵadvance();
-    i0.ɵɵattribute("aria-label", ctx_r0.i18n.t("datepicker.prevYears"));
-    i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate(ctx_r0.yearRangeLabel());
-    i0.ɵɵadvance();
-    i0.ɵɵattribute("aria-label", ctx_r0.i18n.t("datepicker.nextYears"));
-    i0.ɵɵadvance(3);
-    i0.ɵɵrepeater(ctx_r0.yearCells());
 } }
-function KptDatepicker_ng_template_7_Case_5_For_5_Template(rf, ctx) { if (rf & 1) {
-    const _r18 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 30);
-    i0.ɵɵlistener("click", function KptDatepicker_ng_template_7_Case_5_For_5_Template_button_click_0_listener() { const cell_r19 = i0.ɵɵrestoreView(_r18).$implicit; const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.selectCell(cell_r19)); });
+function KptDatepicker_ng_template_7_Conditional_2_Case_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 16);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const cell_r19 = ctx.$implicit;
-    i0.ɵɵclassProp("kpt-calendar__cell--selected", cell_r19.selected);
-    i0.ɵɵattribute("aria-pressed", cell_r19.selected);
+    const ctx_r0 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(cell_r19.label);
+    i0.ɵɵtextInterpolate(ctx_r0.decadeRangeLabel());
 } }
-function KptDatepicker_ng_template_7_Case_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 14)(1, "span", 17);
-    i0.ɵɵtext(2);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(3, "div", 26);
-    i0.ɵɵrepeaterCreate(4, KptDatepicker_ng_template_7_Case_5_For_5_Template, 2, 4, "button", 29, _forTrack1$1);
+function KptDatepicker_ng_template_7_Conditional_2_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    const _r10 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 22);
+    i0.ɵɵlistener("click", function KptDatepicker_ng_template_7_Conditional_2_Conditional_7_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r10); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.pageNext()); });
+    i0.ɵɵelement(1, "kpt-icon", 24);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(ctx_r0.i18n.t("datepicker.month"));
-    i0.ɵɵadvance(2);
-    i0.ɵɵrepeater(ctx_r0.monthCells());
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("disabled", !ctx_r0.canPageForward());
+    i0.ɵɵattribute("aria-label", ctx_r0.navNextLabel());
 } }
-function KptDatepicker_ng_template_7_Case_6_For_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 20);
+function KptDatepicker_ng_template_7_Conditional_2_Case_8_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 26);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const wd_r21 = ctx.$implicit;
+    const wd_r11 = ctx.$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(wd_r21);
+    i0.ɵɵtextInterpolate(wd_r11);
 } }
-function KptDatepicker_ng_template_7_Case_6_For_12_For_1_Template(rf, ctx) { if (rf & 1) {
-    const _r22 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 25);
-    i0.ɵɵlistener("click", function KptDatepicker_ng_template_7_Case_6_For_12_For_1_Template_button_click_0_listener() { const cell_r23 = i0.ɵɵrestoreView(_r22).$implicit; const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.selectDay(cell_r23)); });
+function KptDatepicker_ng_template_7_Conditional_2_Case_8_For_5_For_1_Template(rf, ctx) { if (rf & 1) {
+    const _r12 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 29);
+    i0.ɵɵlistener("click", function KptDatepicker_ng_template_7_Conditional_2_Case_8_For_5_For_1_Template_button_click_0_listener() { const cell_r13 = i0.ɵɵrestoreView(_r12).$implicit; const ctx_r0 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r0.selectDay(cell_r13)); });
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const cell_r23 = ctx.$implicit;
-    i0.ɵɵclassProp("kpt-calendar__day--muted", !cell_r23.inMonth)("kpt-calendar__day--today", cell_r23.today)("kpt-calendar__day--selected", cell_r23.selected);
-    i0.ɵɵproperty("disabled", cell_r23.disabled);
-    i0.ɵɵattribute("aria-pressed", cell_r23.selected);
+    const cell_r13 = ctx.$implicit;
+    i0.ɵɵclassProp("kpt-calendar__day--muted", !cell_r13.inMonth)("kpt-calendar__day--today", cell_r13.today)("kpt-calendar__day--selected", cell_r13.selected);
+    i0.ɵɵproperty("disabled", cell_r13.disabled);
+    i0.ɵɵattribute("aria-pressed", cell_r13.selected);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(cell_r23.day);
+    i0.ɵɵtextInterpolate(cell_r13.day);
 } }
-function KptDatepicker_ng_template_7_Case_6_For_12_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵrepeaterCreate(0, KptDatepicker_ng_template_7_Case_6_For_12_For_1_Template, 2, 9, "button", 24, _forTrack0$8);
+function KptDatepicker_ng_template_7_Conditional_2_Case_8_For_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵrepeaterCreate(0, KptDatepicker_ng_template_7_Conditional_2_Case_8_For_5_For_1_Template, 2, 9, "button", 28, _forTrack0$8);
 } if (rf & 2) {
-    const week_r24 = ctx.$implicit;
-    i0.ɵɵrepeater(week_r24);
+    const week_r14 = ctx.$implicit;
+    i0.ɵɵrepeater(week_r14);
 } }
-function KptDatepicker_ng_template_7_Case_6_Template(rf, ctx) { if (rf & 1) {
-    const _r20 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 14)(1, "button", 15);
-    i0.ɵɵlistener("click", function KptDatepicker_ng_template_7_Case_6_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r20); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.prevMonth()); });
-    i0.ɵɵelement(2, "kpt-icon", 16);
+function KptDatepicker_ng_template_7_Conditional_2_Case_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 25);
+    i0.ɵɵrepeaterCreate(1, KptDatepicker_ng_template_7_Conditional_2_Case_8_For_2_Template, 2, 1, "span", 26, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 17);
-    i0.ɵɵtext(4);
+    i0.ɵɵelementStart(3, "div", 27);
+    i0.ɵɵrepeaterCreate(4, KptDatepicker_ng_template_7_Conditional_2_Case_8_For_5_Template, 2, 0, null, null, i0.ɵɵrepeaterTrackByIndex);
+    i0.ɵɵelementEnd();
+} 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 */ []));
@@ -3343,6 +3384,13 @@ class KptDatepicker {
         /** Granulacja wyboru. */
         this.selectionMode = input('date', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "selectionMode" }] : /* istanbul ignore next */ []));
+        /**
+         * Poziom, od którego otwiera się panel. `null` = poziom zatwierdzania danego trybu
+         * (dni dla 'date'). Nie schodzi poniżej tego poziomu — `startView="day"` w trybie 'year'
+         * nie ma sensu i jest podnoszony do 'year'.
+         */
+        this.startView = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "startView" }] : /* istanbul ignore next */ []));
         /** Prezentacja miesiąca w trybie 'month': słownie ('long') lub liczbą ('number'). */
         this.monthDisplay = input('long', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "monthDisplay" }] : /* istanbul ignore next */ []));
@@ -3374,11 +3422,34 @@ class KptDatepicker {
         ...(ngDevMode ? [{ debugName: "weekdays" }] : /* istanbul ignore next */ []));
         this.months = computed(() => monthNames(this.i18n.locale()), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "months" }] : /* istanbul ignore next */ []));
-        this.open = signal(false, /* @ts-ignore */
+        /**
+         * Stan kalendarza (dwukierunkowy). Pozwala otworzyć go z zewnątrz i — co ważniejsze — wiedzieć,
+         * kiedy user skończył wybierać. `touch` się do tego nie nadaje: leci też z blur triggera.
+         */
+        this.open = model(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
         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 */ []));
@@ -3386,24 +3457,77 @@ class KptDatepicker {
         ...(ngDevMode ? [{ debugName: "dtView" }] : /* istanbul ignore next */ []));
         this.pendingDate = signal('', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "pendingDate" }] : /* istanbul ignore next */ []));
+        /** Tarcza zamiast siatek: tryb 'time' zawsze, 'datetime' po wejściu w pasek czasu. */
+        this.showClock = computed(() => this.selectionMode() === 'time' || (this.selectionMode() === 'datetime' && this.dtView() === 'clock'), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showClock" }] : /* istanbul ignore next */ []));
+        this.hasFooter = computed(() => this.selectionMode() === 'time' || this.selectionMode() === 'datetime', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasFooter" }] : /* istanbul ignore next */ []));
         this.positions = [
             { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4 },
             { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -4 },
         ];
         this.viewYear = computed(() => this.view().y, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "viewYear" }] : /* istanbul ignore next */ []));
-        this.monthLabel = computed(() => {
+        this.monthName = computed(() => this.months()[this.view().m], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "monthName" }] : /* istanbul ignore next */ []));
+        /** Początek dekady widocznej w siatce lat (1979 → 1970). */
+        this.decadeStart = computed(() => Math.floor(this.view().y / 10) * 10, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "decadeStart" }] : /* istanbul ignore next */ []));
+        /** Początek strony dekad: 12 dekad, czyli 120 lat (1979 → 1920, strona 1920–2039). */
+        this.centuryStart = computed(() => Math.floor(this.view().y / 120) * 120, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "centuryStart" }] : /* istanbul ignore next */ []));
+        this.yearRangeLabel = computed(() => `${this.decadeStart()} – ${this.decadeStart() + 9}`, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "yearRangeLabel" }] : /* istanbul ignore next */ []));
+        this.decadeRangeLabel = computed(() => `${this.centuryStart()} – ${this.centuryStart() + 119}`, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "decadeRangeLabel" }] : /* istanbul ignore next */ []));
+        /** Tryb 'month' nie ma po czym nawigować — siatka miesięcy jest kompletna. */
+        this.hasNav = computed(() => this.selectionMode() !== 'month', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasNav" }] : /* istanbul ignore next */ []));
+        this.navPrevLabel = computed(() => {
+            switch (this.panelView()) {
+                case 'month': return this.i18n.t('datepicker.prevYear');
+                case 'year': return this.i18n.t('datepicker.prevYears');
+                case 'decade': return this.i18n.t('datepicker.prevDecades');
+                default: return this.i18n.t('datepicker.prevMonth');
+            }
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "navPrevLabel" }] : /* istanbul ignore next */ []));
+        this.navNextLabel = computed(() => {
+            switch (this.panelView()) {
+                case 'month': return this.i18n.t('datepicker.nextYear');
+                case 'year': return this.i18n.t('datepicker.nextYears');
+                case 'decade': return this.i18n.t('datepicker.nextDecades');
+                default: return this.i18n.t('datepicker.nextMonth');
+            }
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "navNextLabel" }] : /* istanbul ignore next */ []));
+        /** Strzałka wstecz gasnie, gdy cała poprzednia strona wypada przed `minDate`. */
+        this.canPageBack = computed(() => {
+            const min = this.minDate();
+            if (!min)
+                return true;
             const { y, m } = this.view();
-            return `${this.months()[m]} ${y}`;
+            switch (this.panelView()) {
+                case 'month': return `${y - 1}-12` >= min.slice(0, 7);
+                case 'year': return this.decadeStart() - 1 >= +min.slice(0, 4);
+                case 'decade': return this.centuryStart() - 1 >= +min.slice(0, 4);
+                default: return toIso$1(new Date(y, m, 0)) >= min; // ostatni dzień poprzedniego miesiąca
+            }
         }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "monthLabel" }] : /* istanbul ignore next */ []));
-        this.yearPageStart = computed(() => {
-            const y = this.view().y;
-            return y - (((y % 12) + 12) % 12);
+        ...(ngDevMode ? [{ debugName: "canPageBack" }] : /* istanbul ignore next */ []));
+        this.canPageForward = computed(() => {
+            const max = this.maxDate();
+            if (!max)
+                return true;
+            const { y, m } = this.view();
+            switch (this.panelView()) {
+                case 'month': return `${y + 1}-01` <= max.slice(0, 7);
+                case 'year': return this.decadeStart() + 10 <= +max.slice(0, 4);
+                case 'decade': return this.centuryStart() + 120 <= +max.slice(0, 4);
+                default: return toIso$1(new Date(y, m + 1, 1)) <= max;
+            }
         }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "yearPageStart" }] : /* istanbul ignore next */ []));
-        this.yearRangeLabel = computed(() => `${this.yearPageStart()} – ${this.yearPageStart() + 11}`, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "yearRangeLabel" }] : /* istanbul ignore next */ []));
+        ...(ngDevMode ? [{ debugName: "canPageForward" }] : /* istanbul ignore next */ []));
         /** Etykieta czasu na pasku trybu datetime (uwzględnia AM/PM). */
         this.timeBarLabel = computed(() => {
             const t = this.parseTime(this.timeStr());
@@ -3481,35 +3605,110 @@ 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(() => {
+            const isOpen = this.open();
+            untracked(() => {
+                if (!isOpen)
+                    return;
+                this.view.set(this.initialView());
+                this.panelView.set(this.effectiveStartView());
+                this.syncTimeFromValue();
+                this.dtView.set(this.selectionMode() === 'time' ? 'clock' : 'calendar');
+            });
+        });
     }
     // ── Prezentacja czasu ──
     formatTime(h, m) {
@@ -3593,11 +3792,6 @@ class KptDatepicker {
     toggleOpen() {
         if (this.disabled())
             return;
-        if (!this.open()) {
-            this.view.set(this.initialView());
-            this.syncTimeFromValue();
-            this.dtView.set(this.selectionMode() === 'time' ? 'clock' : 'calendar');
-        }
         this.open.update((o) => !o);
     }
     close() {
@@ -3617,11 +3811,29 @@ class KptDatepicker {
         this.value.set(cell.iso);
         this.close();
     }
+    /**
+     * Klik w komórkę siatki: na poziomie zatwierdzania ustawia wartość i zamyka panel,
+     * wyżej — przestawia widok i schodzi poziom niżej.
+     */
     selectCell(cell) {
         if (cell.disabled)
             return;
-        this.value.set(cell.value);
-        this.close();
+        const level = this.panelView();
+        if (level === this.commitLevel()) {
+            this.value.set(level === 'year' ? String(cell.y) : this.monthValue(cell));
+            this.close();
+            return;
+        }
+        this.view.update(({ m }) => ({ y: cell.y, m: level === 'month' ? cell.m : m }));
+        this.panelView.set(LEVELS[LEVELS.indexOf(level) - 1]);
+    }
+    monthValue(cell) {
+        const mm = pad$1(cell.m + 1);
+        return this.selectionMode() === 'month' ? mm : `${cell.y}-${mm}`;
+    }
+    /** Klik w tytuł — wejście poziom wyżej w stosie widoków. */
+    goTo(level) {
+        this.panelView.set(level);
     }
     // ── Zegar (delegowany do kpt-clock przez timeStr) ──
     openClock() {
@@ -3642,23 +3854,33 @@ class KptDatepicker {
         }
         this.close();
     }
-    prevMonth() {
-        this.view.update(({ y, m }) => (m === 0 ? { y: y - 1, m: 11 } : { y, m: m - 1 }));
-    }
-    nextMonth() {
-        this.view.update(({ y, m }) => (m === 11 ? { y: y + 1, m: 0 } : { y, m: m + 1 }));
-    }
-    prevYear() {
-        this.view.update(({ y, m }) => ({ y: y - 1, m }));
-    }
-    nextYear() {
-        this.view.update(({ y, m }) => ({ y: y + 1, m }));
+    /** Strzałki ‹ › — krok zależny od poziomu: miesiąc, rok, dekada, strona dekad. */
+    page(dir) {
+        const level = this.panelView();
+        this.view.update(({ y, m }) => {
+            switch (level) {
+                case 'month':
+                    return { y: y + dir, m };
+                case 'year':
+                    return { y: y + dir * 10, m };
+                case 'decade':
+                    return { y: y + dir * 120, m };
+                default: {
+                    const next = m + dir;
+                    if (next < 0)
+                        return { y: y - 1, m: 11 };
+                    if (next > 11)
+                        return { y: y + 1, m: 0 };
+                    return { y, m: next };
+                }
+            }
+        });
     }
-    prevYearPage() {
-        this.view.update(({ y, m }) => ({ y: y - 12, m }));
+    pagePrev() {
+        this.page(-1);
     }
-    nextYearPage() {
-        this.view.update(({ y, m }) => ({ y: y + 12, m }));
+    pageNext() {
+        this.page(1);
     }
     clear(event) {
         event.stopPropagation();
@@ -3666,7 +3888,7 @@ class KptDatepicker {
         this.pendingDate.set('');
     }
     static { this.ɵfac = function KptDatepicker_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || KptDatepicker)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptDatepicker, selectors: [["kpt-datepicker"]], hostAttrs: [1, "kpt-datepicker-host"], inputs: { value: [1, "value"], disabled: [1, "disabled"], invalid: [1, "invalid"], touched: [1, "touched"], placeholder: [1, "placeholder"], ariaLabel: [1, "ariaLabel"], displayFormat: [1, "displayFormat"], selectionMode: [1, "selectionMode"], monthDisplay: [1, "monthDisplay"], hourFormat: [1, "hourFormat"], minuteStep: [1, "minuteStep"], minDate: [1, "minDate"], maxDate: [1, "maxDate"] }, outputs: { value: "valueChange", touch: "touch" }, 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);
@@ -3674,10 +3896,10 @@ class KptDatepicker {
             i0.ɵɵconditionalCreate(5, KptDatepicker_Conditional_5_Template, 2, 1, "button", 5);
             i0.ɵɵelement(6, "kpt-icon", 6);
             i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(7, KptDatepicker_ng_template_7_Template, 7, 3, "ng-template", 7);
+            i0.ɵɵtemplate(7, KptDatepicker_ng_template_7_Template, 4, 4, "ng-template", 7);
             i0.ɵɵlistener("backdropClick", function KptDatepicker_Template_ng_template_backdropClick_7_listener() { return ctx.close(); })("detach", function KptDatepicker_Template_ng_template_detach_7_listener() { return ctx.close(); });
         } if (rf & 2) {
-            const trigger_r25 = i0.ɵɵreference(1);
+            const trigger_r19 = i0.ɵɵreference(1);
             i0.ɵɵclassProp("kpt-datepicker--open", ctx.open())("kpt-datepicker--disabled", ctx.disabled())("kpt-datepicker--invalid", ctx.showInvalid());
             i0.ɵɵattribute("aria-disabled", ctx.disabled() || null)("aria-label", ctx.ariaLabel());
             i0.ɵɵadvance(2);
@@ -3687,14 +3909,14 @@ class KptDatepicker {
             i0.ɵɵadvance();
             i0.ɵɵproperty("name", ctx.selectionMode() === "time" ? "clock" : "calendar");
             i0.ɵɵadvance();
-            i0.ɵɵproperty("cdkConnectedOverlayOrigin", trigger_r25)("cdkConnectedOverlayOpen", ctx.open())("cdkConnectedOverlayPositions", ctx.positions)("cdkConnectedOverlayHasBackdrop", true);
-        } }, dependencies: [CdkOverlayOrigin, CdkConnectedOverlay, KptIcon, KptButton, KptClock], styles: ["@layer kpt.components{.kpt-datepicker-host{display:block}.kpt-datepicker{display:flex;align-items:center;gap:var(--%NS%kpt-space-2, .5rem);height:2.5rem;padding-inline:var(--%NS%kpt-space-3, .75rem);box-sizing:border-box;border:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-form-field-border);border-radius:var(--%NS%kpt-form-field-radius, .5rem);background:var(--%NS%kpt-form-field-bg);color:var(--%NS%kpt-form-field-text);font-size:var(--%NS%kpt-font-size-sm, .875rem);cursor:pointer}.kpt-datepicker:hover:not(.kpt-datepicker--disabled){border-color:var(--%NS%kpt-form-field-border-hover)}.kpt-datepicker:focus-visible,.kpt-datepicker.kpt-datepicker--open{outline:none;border-color:var(--%NS%kpt-form-field-border-focus);box-shadow:0 0 0 2px color-mix(in oklch,var(--%NS%kpt-form-field-border-focus) 30%,transparent)}.kpt-datepicker.kpt-datepicker--invalid{border-color:var(--%NS%kpt-form-field-border-error)}.kpt-datepicker.kpt-datepicker--disabled{cursor:not-allowed;opacity:.6;background:var(--%NS%kpt-color-surface-variant)}.kpt-datepicker__placeholder{color:var(--%NS%kpt-form-field-placeholder)}.kpt-datepicker__spacer{flex:1}.kpt-datepicker__icon{color:var(--%NS%kpt-color-on-surface-muted)}.kpt-datepicker__clear{display:inline-flex;border:0;background:none;cursor:pointer;color:var(--%NS%kpt-color-on-surface-muted);padding:0}.kpt-datepicker__clear:hover{color:var(--%NS%kpt-color-on-surface)}.kpt-calendar{width:17rem;padding:var(--%NS%kpt-space-3, .75rem);background:var(--%NS%kpt-color-surface-raised);border:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border);border-radius:var(--%NS%kpt-radius-md, .5rem);box-shadow:var(--%NS%kpt-elevation-3);color:var(--%NS%kpt-color-on-surface);font-size:var(--%NS%kpt-font-size-sm, .875rem)}.kpt-calendar__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--%NS%kpt-space-2, .5rem)}.kpt-calendar__title{font-weight:var(--%NS%kpt-font-weight-semibold, 600);text-transform:capitalize}.kpt-calendar__nav{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:0;border-radius:var(--%NS%kpt-radius-md, .5rem);background:none;color:var(--%NS%kpt-color-on-surface);cursor:pointer}.kpt-calendar__nav:hover{background:var(--%NS%kpt-color-muted)}.kpt-calendar__weekdays,.kpt-calendar__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.kpt-calendar__weekday{text-align:center;font-size:var(--%NS%kpt-font-size-xs, .75rem);color:var(--%NS%kpt-color-on-surface-muted);padding:.25rem 0}.kpt-calendar__day{aspect-ratio:1;border:0;border-radius:var(--%NS%kpt-radius-sm, .25rem);background:none;color:var(--%NS%kpt-color-on-surface);cursor:pointer;font:inherit}.kpt-calendar__day:hover:not(:disabled){background:var(--%NS%kpt-color-muted)}.kpt-calendar__day--muted{color:var(--%NS%kpt-color-on-surface-muted);opacity:.5}.kpt-calendar__day--today{box-shadow:inset 0 0 0 1px var(--%NS%kpt-color-border-strong)}.kpt-calendar__day--selected{background:var(--%NS%kpt-color-primary)!important;color:var(--%NS%kpt-color-on-primary)}.kpt-calendar__day:disabled{opacity:.3;cursor:not-allowed}.kpt-calendar__grid--cells{grid-template-columns:repeat(3,1fr);gap:4px}.kpt-calendar__cell{padding:.6rem .25rem;border:0;border-radius:var(--%NS%kpt-radius-sm, .25rem);background:none;color:var(--%NS%kpt-color-on-surface);cursor:pointer;font:inherit;text-transform:capitalize}.kpt-calendar__cell:hover:not(:disabled){background:var(--%NS%kpt-color-muted)}.kpt-calendar__cell--selected{background:var(--%NS%kpt-color-primary)!important;color:var(--%NS%kpt-color-on-primary)}.kpt-calendar__cell:disabled{opacity:.3;cursor:not-allowed}.kpt-calendar__timebar{display:flex;align-items:center;justify-content:center;gap:var(--%NS%kpt-space-2, .5rem);width:100%;margin-top:var(--%NS%kpt-space-2, .5rem);padding:var(--%NS%kpt-space-2, .5rem);border:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border);border-radius:var(--%NS%kpt-radius-md, .5rem);background:none;color:var(--%NS%kpt-color-on-surface);font:inherit;font-variant-numeric:tabular-nums;cursor:pointer}.kpt-calendar__timebar:hover{background:var(--%NS%kpt-color-muted)}.kpt-calendar__timebar kpt-icon{color:var(--%NS%kpt-color-on-surface-muted)}.kpt-calendar__footer{display:flex;justify-content:flex-end;margin-top:var(--%NS%kpt-space-3, .75rem)}.kpt-calendar--clock{width:16rem}}\n"], encapsulation: 2 }); }
+            i0.ɵɵproperty("cdkConnectedOverlayOrigin", trigger_r19)("cdkConnectedOverlayOpen", ctx.open())("cdkConnectedOverlayPositions", ctx.positions)("cdkConnectedOverlayHasBackdrop", true);
+        } }, dependencies: [CdkOverlayOrigin, CdkConnectedOverlay, KptIcon, KptButton, KptClock], styles: ["@layer kpt.components{.kpt-datepicker-host{display:block}.kpt-datepicker{display:flex;align-items:center;gap:var(--%NS%kpt-space-2, .5rem);height:2.5rem;padding-inline:var(--%NS%kpt-space-3, .75rem);box-sizing:border-box;border:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-form-field-border);border-radius:var(--%NS%kpt-form-field-radius, .5rem);background:var(--%NS%kpt-form-field-bg);color:var(--%NS%kpt-form-field-text);font-size:var(--%NS%kpt-font-size-sm, .875rem);cursor:pointer}.kpt-datepicker:hover:not(.kpt-datepicker--disabled){border-color:var(--%NS%kpt-form-field-border-hover)}.kpt-datepicker:focus-visible,.kpt-datepicker.kpt-datepicker--open{outline:none;border-color:var(--%NS%kpt-form-field-border-focus);box-shadow:0 0 0 2px color-mix(in oklch,var(--%NS%kpt-form-field-border-focus) 30%,transparent)}.kpt-datepicker.kpt-datepicker--invalid{border-color:var(--%NS%kpt-form-field-border-error)}.kpt-datepicker.kpt-datepicker--disabled{cursor:not-allowed;opacity:.6;background:var(--%NS%kpt-color-surface-variant)}.kpt-datepicker__placeholder{color:var(--%NS%kpt-form-field-placeholder)}.kpt-datepicker__spacer{flex:1}.kpt-datepicker__icon{color:var(--%NS%kpt-color-on-surface-muted)}.kpt-datepicker__clear{display:inline-flex;border:0;background:none;cursor:pointer;color:var(--%NS%kpt-color-on-surface-muted);padding:0}.kpt-datepicker__clear:hover{color:var(--%NS%kpt-color-on-surface)}.kpt-calendar{width:17rem;padding:var(--%NS%kpt-space-3, .75rem);background:var(--%NS%kpt-color-surface-raised);border:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border);border-radius:var(--%NS%kpt-radius-md, .5rem);box-shadow:var(--%NS%kpt-elevation-3);color:var(--%NS%kpt-color-on-surface);font-size:var(--%NS%kpt-font-size-sm, .875rem)}.kpt-calendar__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--%NS%kpt-space-2, .5rem)}.kpt-calendar__title{font-weight:var(--%NS%kpt-font-weight-semibold, 600);text-transform:capitalize}.kpt-calendar__titles{display:flex;align-items:center;gap:var(--%NS%kpt-space-1, .25rem)}.kpt-calendar__title-btn{padding:.25rem var(--%NS%kpt-space-2, .5rem);border:0;border-radius:var(--%NS%kpt-radius-sm, .25rem);background:var(--%NS%kpt-color-muted);color:var(--%NS%kpt-color-on-surface);font:inherit;font-weight:var(--%NS%kpt-font-weight-semibold, 600);text-transform:capitalize;cursor:pointer}.kpt-calendar__title-btn:hover{background:var(--%NS%kpt-color-muted-hover)}.kpt-calendar__title-btn:focus-visible{outline:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border-strong);outline-offset:1px}.kpt-calendar__nav{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:0;border-radius:var(--%NS%kpt-radius-md, .5rem);background:none;color:var(--%NS%kpt-color-on-surface);cursor:pointer}.kpt-calendar__nav:hover:not(:disabled){background:var(--%NS%kpt-color-muted)}.kpt-calendar__nav:disabled{opacity:.3;cursor:not-allowed}.kpt-calendar__weekdays,.kpt-calendar__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.kpt-calendar__weekday{text-align:center;font-size:var(--%NS%kpt-font-size-xs, .75rem);color:var(--%NS%kpt-color-on-surface-muted);padding:.25rem 0}.kpt-calendar__day{aspect-ratio:1;border:0;border-radius:var(--%NS%kpt-radius-sm, .25rem);background:none;color:var(--%NS%kpt-color-on-surface);cursor:pointer;font:inherit}.kpt-calendar__day:hover:not(:disabled){background:var(--%NS%kpt-color-muted)}.kpt-calendar__day--muted{color:var(--%NS%kpt-color-on-surface-muted);opacity:.5}.kpt-calendar__day--today{box-shadow:inset 0 0 0 1px var(--%NS%kpt-color-border-strong)}.kpt-calendar__day--selected{background:var(--%NS%kpt-color-primary)!important;color:var(--%NS%kpt-color-on-primary)}.kpt-calendar__day:disabled{opacity:.3;cursor:not-allowed}.kpt-calendar__grid--cells{grid-template-columns:repeat(3,1fr);gap:4px}.kpt-calendar__cell{padding:.6rem .25rem;border:0;border-radius:var(--%NS%kpt-radius-sm, .25rem);background:none;color:var(--%NS%kpt-color-on-surface);cursor:pointer;font:inherit;text-transform:capitalize}.kpt-calendar__cell:hover:not(:disabled){background:var(--%NS%kpt-color-muted)}.kpt-calendar__cell--current{box-shadow:inset 0 0 0 1px var(--%NS%kpt-color-border-strong)}.kpt-calendar__cell--selected{background:var(--%NS%kpt-color-primary)!important;color:var(--%NS%kpt-color-on-primary)}.kpt-calendar__cell:disabled{opacity:.3;cursor:not-allowed}.kpt-calendar__grid--decades .kpt-calendar__cell{padding-inline:0;font-size:var(--%NS%kpt-font-size-xs, .75rem);white-space:nowrap}.kpt-calendar__timebar{display:flex;align-items:center;justify-content:center;gap:var(--%NS%kpt-space-2, .5rem);width:100%;margin-top:var(--%NS%kpt-space-2, .5rem);padding:var(--%NS%kpt-space-2, .5rem);border:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border);border-radius:var(--%NS%kpt-radius-md, .5rem);background:none;color:var(--%NS%kpt-color-on-surface);font:inherit;font-variant-numeric:tabular-nums;cursor:pointer}.kpt-calendar__timebar:hover{background:var(--%NS%kpt-color-muted)}.kpt-calendar__timebar kpt-icon{color:var(--%NS%kpt-color-on-surface-muted)}.kpt-calendar__footer{display:flex;justify-content:flex-end;margin-top:var(--%NS%kpt-space-3, .75rem)}.kpt-calendar--clock{width:16rem}}\n"], encapsulation: 2 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(KptDatepicker, [{
         type: Component,
-        args: [{ selector: 'kpt-datepicker', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [CdkOverlayOrigin, CdkConnectedOverlay, KptIcon, KptButton, KptClock], host: { class: 'kpt-datepicker-host' }, template: "<div\n  class=\"kpt-datepicker\"\n  cdkOverlayOrigin\n  #trigger=\"cdkOverlayOrigin\"\n  role=\"button\"\n  tabindex=\"0\"\n  [class.kpt-datepicker--open]=\"open()\"\n  [class.kpt-datepicker--disabled]=\"disabled()\"\n  [class.kpt-datepicker--invalid]=\"showInvalid()\"\n  [attr.aria-disabled]=\"disabled() || null\"\n  [attr.aria-label]=\"ariaLabel()\"\n  (click)=\"toggleOpen()\"\n  (keydown.enter)=\"toggleOpen()\"\n  (blur)=\"touch.emit()\"\n>\n  @if (display()) {\n    <span class=\"kpt-datepicker__value\">{{ display() }}</span>\n  } @else {\n    <span class=\"kpt-datepicker__placeholder\">{{ effectivePlaceholder() }}</span>\n  }\n  <span class=\"kpt-datepicker__spacer\"></span>\n  @if (display()) {\n    <button type=\"button\" class=\"kpt-datepicker__clear\" (click)=\"clear($event)\" [attr.aria-label]=\"i18n.t('common.clear')\"><kpt-icon name=\"x\" /></button>\n  }\n  <kpt-icon\n    class=\"kpt-datepicker__icon\"\n    [name]=\"selectionMode() === 'time' ? 'clock' : 'calendar'\"\n  />\n</div>\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"open()\"\n  [cdkConnectedOverlayPositions]=\"positions\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  (backdropClick)=\"close()\"\n  (detach)=\"close()\"\n>\n  <div class=\"kpt-calendar\" [class.kpt-calendar--clock]=\"selectionMode() === 'time' || (selectionMode() === 'datetime' && dtView() === 'clock')\" (keydown.escape)=\"close()\">\n    @switch (selectionMode()) {\n      @case ('time') {\n        <kpt-clock [(value)]=\"timeStr\" [hourFormat]=\"hourFormat()\" [minuteStep]=\"minuteStep()\" />\n        <div class=\"kpt-calendar__footer\">\n          <kpt-button size=\"sm\" (click)=\"commit()\">{{ i18n.t('common.done') }}</kpt-button>\n        </div>\n      }\n      @case ('datetime') {\n        @if (dtView() === 'calendar') {\n          <div class=\"kpt-calendar__header\">\n            <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"prevMonth()\" [attr.aria-label]=\"i18n.t('datepicker.prevMonth')\"><kpt-icon name=\"chevron-left\" /></button>\n            <span class=\"kpt-calendar__title\">{{ monthLabel() }}</span>\n            <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"nextMonth()\" [attr.aria-label]=\"i18n.t('datepicker.nextMonth')\"><kpt-icon name=\"chevron-right\" /></button>\n          </div>\n          <div class=\"kpt-calendar__weekdays\">\n            @for (wd of weekdays(); track wd) {\n              <span class=\"kpt-calendar__weekday\">{{ wd }}</span>\n            }\n          </div>\n          <div class=\"kpt-calendar__grid\">\n            @for (week of weeks(); track $index) {\n              @for (cell of week; track cell.iso) {\n                <button\n                  type=\"button\"\n                  class=\"kpt-calendar__day\"\n                  [class.kpt-calendar__day--muted]=\"!cell.inMonth\"\n                  [class.kpt-calendar__day--today]=\"cell.today\"\n                  [class.kpt-calendar__day--selected]=\"cell.selected\"\n                  [disabled]=\"cell.disabled\"\n                  [attr.aria-pressed]=\"cell.selected\"\n                  (click)=\"selectDay(cell)\"\n                >{{ cell.day }}</button>\n              }\n            }\n          </div>\n          <button type=\"button\" class=\"kpt-calendar__timebar\" (click)=\"openClock()\">\n            <kpt-icon name=\"clock\" />\n            <span>{{ timeBarLabel() }}</span>\n          </button>\n        } @else {\n          <div class=\"kpt-calendar__header\">\n            <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"backToCalendar()\" [attr.aria-label]=\"i18n.t('datepicker.calendar')\"><kpt-icon name=\"chevron-left\" /></button>\n            <span class=\"kpt-calendar__title\">{{ i18n.t('datepicker.time') }}</span>\n          </div>\n          <kpt-clock [(value)]=\"timeStr\" [hourFormat]=\"hourFormat()\" [minuteStep]=\"minuteStep()\" />\n        }\n        <div class=\"kpt-calendar__footer\">\n          <kpt-button size=\"sm\" (click)=\"commit()\">{{ i18n.t('common.done') }}</kpt-button>\n        </div>\n      }\n      @case ('monthYear') {\n        <div class=\"kpt-calendar__header\">\n          <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"prevYear()\" [attr.aria-label]=\"i18n.t('datepicker.prevYear')\"><kpt-icon name=\"chevron-left\" /></button>\n          <span class=\"kpt-calendar__title\">{{ viewYear() }}</span>\n          <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"nextYear()\" [attr.aria-label]=\"i18n.t('datepicker.nextYear')\"><kpt-icon name=\"chevron-right\" /></button>\n        </div>\n        <div class=\"kpt-calendar__grid kpt-calendar__grid--cells\">\n          @for (cell of monthCells(); track cell.value) {\n            <button\n              type=\"button\"\n              class=\"kpt-calendar__cell\"\n              [class.kpt-calendar__cell--selected]=\"cell.selected\"\n              [disabled]=\"cell.disabled\"\n              [attr.aria-pressed]=\"cell.selected\"\n              (click)=\"selectCell(cell)\"\n            >{{ cell.label }}</button>\n          }\n        </div>\n      }\n      @case ('year') {\n        <div class=\"kpt-calendar__header\">\n          <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"prevYearPage()\" [attr.aria-label]=\"i18n.t('datepicker.prevYears')\"><kpt-icon name=\"chevron-left\" /></button>\n          <span class=\"kpt-calendar__title\">{{ yearRangeLabel() }}</span>\n          <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"nextYearPage()\" [attr.aria-label]=\"i18n.t('datepicker.nextYears')\"><kpt-icon name=\"chevron-right\" /></button>\n        </div>\n        <div class=\"kpt-calendar__grid kpt-calendar__grid--cells\">\n          @for (cell of yearCells(); track cell.value) {\n            <button\n              type=\"button\"\n              class=\"kpt-calendar__cell\"\n              [class.kpt-calendar__cell--selected]=\"cell.selected\"\n              [disabled]=\"cell.disabled\"\n              [attr.aria-pressed]=\"cell.selected\"\n              (click)=\"selectCell(cell)\"\n            >{{ cell.label }}</button>\n          }\n        </div>\n      }\n      @case ('month') {\n        <div class=\"kpt-calendar__header\">\n          <span class=\"kpt-calendar__title\">{{ i18n.t('datepicker.month') }}</span>\n        </div>\n        <div class=\"kpt-calendar__grid kpt-calendar__grid--cells\">\n          @for (cell of monthCells(); track cell.value) {\n            <button\n              type=\"button\"\n              class=\"kpt-calendar__cell\"\n              [class.kpt-calendar__cell--selected]=\"cell.selected\"\n              [attr.aria-pressed]=\"cell.selected\"\n              (click)=\"selectCell(cell)\"\n            >{{ cell.label }}</button>\n          }\n        </div>\n      }\n      @default {\n        <div class=\"kpt-calendar__header\">\n          <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"prevMonth()\" [attr.aria-label]=\"i18n.t('datepicker.prevMonth')\"><kpt-icon name=\"chevron-left\" /></button>\n          <span class=\"kpt-calendar__title\">{{ monthLabel() }}</span>\n          <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"nextMonth()\" [attr.aria-label]=\"i18n.t('datepicker.nextMonth')\"><kpt-icon name=\"chevron-right\" /></button>\n        </div>\n        <div class=\"kpt-calendar__weekdays\">\n          @for (wd of weekdays(); track wd) {\n            <span class=\"kpt-calendar__weekday\">{{ wd }}</span>\n          }\n        </div>\n        <div class=\"kpt-calendar__grid\">\n          @for (week of weeks(); track $index) {\n            @for (cell of week; track cell.iso) {\n              <button\n                type=\"button\"\n                class=\"kpt-calendar__day\"\n                [class.kpt-calendar__day--muted]=\"!cell.inMonth\"\n                [class.kpt-calendar__day--today]=\"cell.today\"\n                [class.kpt-calendar__day--selected]=\"cell.selected\"\n                [disabled]=\"cell.disabled\"\n                [attr.aria-pressed]=\"cell.selected\"\n                (click)=\"selectDay(cell)\"\n              >{{ cell.day }}</button>\n            }\n          }\n        </div>\n      }\n    }\n  </div>\n</ng-template>\n", styles: ["@layer kpt.components{.kpt-datepicker-host{display:block}.kpt-datepicker{display:flex;align-items:center;gap:var(--kpt-space-2, .5rem);height:2.5rem;padding-inline:var(--kpt-space-3, .75rem);box-sizing:border-box;border:var(--kpt-border-width-thin, 1px) solid var(--kpt-form-field-border);border-radius:var(--kpt-form-field-radius, .5rem);background:var(--kpt-form-field-bg);color:var(--kpt-form-field-text);font-size:var(--kpt-font-size-sm, .875rem);cursor:pointer}.kpt-datepicker:hover:not(.kpt-datepicker--disabled){border-color:var(--kpt-form-field-border-hover)}.kpt-datepicker:focus-visible,.kpt-datepicker.kpt-datepicker--open{outline:none;border-color:var(--kpt-form-field-border-focus);box-shadow:0 0 0 2px color-mix(in oklch,var(--kpt-form-field-border-focus) 30%,transparent)}.kpt-datepicker.kpt-datepicker--invalid{border-color:var(--kpt-form-field-border-error)}.kpt-datepicker.kpt-datepicker--disabled{cursor:not-allowed;opacity:.6;background:var(--kpt-color-surface-variant)}.kpt-datepicker__placeholder{color:var(--kpt-form-field-placeholder)}.kpt-datepicker__spacer{flex:1}.kpt-datepicker__icon{color:var(--kpt-color-on-surface-muted)}.kpt-datepicker__clear{display:inline-flex;border:0;background:none;cursor:pointer;color:var(--kpt-color-on-surface-muted);padding:0}.kpt-datepicker__clear:hover{color:var(--kpt-color-on-surface)}.kpt-calendar{width:17rem;padding:var(--kpt-space-3, .75rem);background:var(--kpt-color-surface-raised);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);box-shadow:var(--kpt-elevation-3);color:var(--kpt-color-on-surface);font-size:var(--kpt-font-size-sm, .875rem)}.kpt-calendar__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--kpt-space-2, .5rem)}.kpt-calendar__title{font-weight:var(--kpt-font-weight-semibold, 600);text-transform:capitalize}.kpt-calendar__nav{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:0;border-radius:var(--kpt-radius-md, .5rem);background:none;color:var(--kpt-color-on-surface);cursor:pointer}.kpt-calendar__nav:hover{background:var(--kpt-color-muted)}.kpt-calendar__weekdays,.kpt-calendar__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.kpt-calendar__weekday{text-align:center;font-size:var(--kpt-font-size-xs, .75rem);color:var(--kpt-color-on-surface-muted);padding:.25rem 0}.kpt-calendar__day{aspect-ratio:1;border:0;border-radius:var(--kpt-radius-sm, .25rem);background:none;color:var(--kpt-color-on-surface);cursor:pointer;font:inherit}.kpt-calendar__day:hover:not(:disabled){background:var(--kpt-color-muted)}.kpt-calendar__day--muted{color:var(--kpt-color-on-surface-muted);opacity:.5}.kpt-calendar__day--today{box-shadow:inset 0 0 0 1px var(--kpt-color-border-strong)}.kpt-calendar__day--selected{background:var(--kpt-color-primary)!important;color:var(--kpt-color-on-primary)}.kpt-calendar__day:disabled{opacity:.3;cursor:not-allowed}.kpt-calendar__grid--cells{grid-template-columns:repeat(3,1fr);gap:4px}.kpt-calendar__cell{padding:.6rem .25rem;border:0;border-radius:var(--kpt-radius-sm, .25rem);background:none;color:var(--kpt-color-on-surface);cursor:pointer;font:inherit;text-transform:capitalize}.kpt-calendar__cell:hover:not(:disabled){background:var(--kpt-color-muted)}.kpt-calendar__cell--selected{background:var(--kpt-color-primary)!important;color:var(--kpt-color-on-primary)}.kpt-calendar__cell:disabled{opacity:.3;cursor:not-allowed}.kpt-calendar__timebar{display:flex;align-items:center;justify-content:center;gap:var(--kpt-space-2, .5rem);width:100%;margin-top:var(--kpt-space-2, .5rem);padding:var(--kpt-space-2, .5rem);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);background:none;color:var(--kpt-color-on-surface);font:inherit;font-variant-numeric:tabular-nums;cursor:pointer}.kpt-calendar__timebar:hover{background:var(--kpt-color-muted)}.kpt-calendar__timebar kpt-icon{color:var(--kpt-color-on-surface-muted)}.kpt-calendar__footer{display:flex;justify-content:flex-end;margin-top:var(--kpt-space-3, .75rem)}.kpt-calendar--clock{width:16rem}}\n"] }]
-    }], 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 }] }], 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 }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptDatepicker, { className: "KptDatepicker", filePath: "lib/datepicker/datepicker.component.ts", lineNumber: 66 }); })();
+        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"];
 /**
@@ -4413,7 +4635,10 @@ const ALLOWED_STYLES = new Set([
     'color', 'background-color', 'text-align', 'font-weight', 'font-style', 'text-decoration',
     'width', 'height', 'border', 'border-color', 'border-width', 'border-style', 'vertical-align',
 ]);
-const ALLOWED_ATTRS = new Set(['colspan', 'rowspan', 'span', 'width', 'class']);
+const ALLOWED_ATTRS = new Set(['colspan', 'rowspan', 'span', 'width', 'class', 'target', 'rel', 'title']);
+// Schematy URL dopuszczone w `href` wstawianym narzędziem „link" (blocklista jest obchodzalna).
+const SAFE_URL_SCHEME = /^(https?:|mailto:|tel:)/i;
+const HAS_URL_SCHEME = /^[a-z][a-z0-9+.-]*:/i;
 /**
  * Lekki edytor tekstu sformatowanego (contenteditable) z konfigurowalnym paskiem sekcji.
  * Narzędzia: schowek (kopiuj / wklej / wklej bez formatowania), styl (nagłówki H1–H6 / paragraf),
@@ -4508,11 +4733,14 @@ class KptRichText {
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "sections" }] : /* istanbul ignore next */ []));
         // Synchronizuj tylko przy zmianie zewnętrznej (bez resetu kursora podczas pisania).
+        // Porównanie `el.innerHTML !== v` działa na SUROWEJ wartości modelu (tej samej, którą ustawia
+        // `onInput()`), więc pisanie w edytorze nadal nie odpala tej gałęzi — sanityzacja włącza się
+        // wyłącznie przy zewnętrznym zapisie `value` (init, `[(value)]` z aplikacji, `onSource()`).
         effect(() => {
             const el = this.editor()?.nativeElement;
             const v = this.value();
             if (el && el.innerHTML !== v)
-                el.innerHTML = v;
+                el.innerHTML = this.sanitizeHtml(v);
         });
         // Odzwierciedlenie stanu aktywnego narzędzi na podstawie zaznaczenia.
         const onSel = () => this.refreshState();
@@ -4611,8 +4839,11 @@ class KptRichText {
         switch (item) {
             case 'link': {
                 const url = window.prompt(this.i18n.t('richText.linkPrompt'));
-                if (url)
-                    document.execCommand('createLink', false, url);
+                if (url) {
+                    const safe = this.sanitizeUrl(url);
+                    if (safe)
+                        document.execCommand('createLink', false, safe);
+                }
                 break;
             }
             case 'copy':
@@ -5177,6 +5408,21 @@ class KptRichText {
     canSplit() {
         return this.canSplitCtx;
     }
+    /**
+     * Waliduje URL z narzędzia „link" (blocklista jest obchodzalna, np. `javascript:`).
+     * Brak schematu → dopisz `https://` (spójne z zachowaniem `normalizeUrl` w mapie); `#`/`/`
+     * przechodzą bez zmian; schemat spoza `SAFE_URL_SCHEME` → `null` (link nie zostaje wstawiony).
+     */
+    sanitizeUrl(url) {
+        const trimmed = url.trim().replace(/[\x00-\x1f]/g, '');
+        if (!trimmed)
+            return null;
+        if (trimmed.startsWith('#') || trimmed.startsWith('/'))
+            return trimmed;
+        if (!HAS_URL_SCHEME.test(trimmed))
+            return `https://${trimmed}`;
+        return SAFE_URL_SCHEME.test(trimmed) ? trimmed : null;
+    }
     sanitizeHtml(html) {
         const tpl = document.createElement('template');
         tpl.innerHTML = html;
@@ -5192,7 +5438,9 @@ class KptRichText {
                         el.removeAttribute(attr.name);
                     }
                     else if (name === 'href' || name === 'src') {
-                        if (/^\s*javascript:/i.test(attr.value))
+                        // Usuń znaki kontrolne przed testem schematu — przeglądarka i tak je ignoruje przy
+                        // parsowaniu URL-a (WHATWG URL spec), więc `jav\tascript:` obchodziłby sam blocklisting.
+                        if (/^\s*javascript:/i.test(attr.value.replace(/[\x00-\x1f]/g, '')))
                             el.removeAttribute(attr.name);
                     }
                     else if (name === 'style') {
@@ -5205,7 +5453,7 @@ class KptRichText {
                         else
                             el.removeAttribute('style');
                     }
-                    else if (!ALLOWED_ATTRS.has(name) && name !== 'color' && el.tagName !== 'A') {
+                    else if (!ALLOWED_ATTRS.has(name) && name !== 'color') {
                         el.removeAttribute(attr.name);
                     }
                 }
@@ -5250,7 +5498,7 @@ class KptRichText {
         type: Component,
         args: [{ selector: 'kpt-rich-text', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [KptIcon, CdkOverlayOrigin, CdkConnectedOverlay, NgTemplateOutlet, KptTooltip], host: { class: 'kpt-rich-text-host' }, template: "<div class=\"kpt-rich-text\" [class.kpt-rich-text--invalid]=\"showInvalid()\" [class.kpt-rich-text--disabled]=\"disabled()\">\n  <div class=\"kpt-rich-text__toolbar\" role=\"toolbar\">\n    @for (section of sections(); track $index; let firstSection = $first) {\n      @if (!firstSection) {\n        <span class=\"kpt-rich-text__divider\" aria-hidden=\"true\"></span>\n      }\n      @for (item of section; track item) {\n        @switch (item) {\n          @case ('heading') {\n            <button\n              type=\"button\"\n              class=\"kpt-rich-text__style\"\n              cdkOverlayOrigin\n              #styleOrigin=\"cdkOverlayOrigin\"\n              [class.is-open]=\"styleOpen()\"\n              [disabled]=\"disabled()\"\n              [attr.aria-label]=\"aria(item)\"\n              [attr.aria-expanded]=\"styleOpen()\"\n              [kptTooltip]=\"aria(item)\"\n              (mousedown)=\"$event.preventDefault()\"\n              (click)=\"openStyle()\"\n            >\n              <span>{{ styleLabel() }}</span>\n              <kpt-icon name=\"chevron-down\" class=\"kpt-rich-text__style-caret\" />\n            </button>\n            <ng-template\n              cdkConnectedOverlay\n              [cdkConnectedOverlayOrigin]=\"styleOrigin\"\n              [cdkConnectedOverlayOpen]=\"styleOpen()\"\n              [cdkConnectedOverlayPositions]=\"positions\"\n              [cdkConnectedOverlayHasBackdrop]=\"true\"\n              cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n              (backdropClick)=\"closeStyle()\"\n              (detach)=\"closeStyle()\"\n            >\n              <ul class=\"kpt-rich-text__style-panel\" role=\"listbox\">\n                @for (o of styleOptions(); track o.tag) {\n                  <li\n                    class=\"kpt-rich-text__style-opt\"\n                    [class]=\"'kpt-rich-text__style-opt kpt-rich-text__style-opt--' + o.tag\"\n                    role=\"option\"\n                    [attr.aria-selected]=\"currentBlock() === o.tag\"\n                    [class.is-selected]=\"currentBlock() === o.tag\"\n                    (click)=\"pickStyle(o.tag)\"\n                  >{{ o.label }}</li>\n                }\n              </ul>\n            </ng-template>\n          }\n          @case ('foreColor') {\n            <button\n              type=\"button\"\n              class=\"kpt-rich-text__tool kpt-rich-text__tool--color\"\n              cdkOverlayOrigin\n              #foreOrigin=\"cdkOverlayOrigin\"\n              [attr.aria-label]=\"aria(item)\"\n              [kptTooltip]=\"aria(item)\"\n              [disabled]=\"disabled()\"\n              (mousedown)=\"$event.preventDefault()\"\n              (click)=\"openColor('foreColor')\"\n            >\n              <kpt-icon [name]=\"icon(item)\" />\n            </button>\n            <ng-template\n              cdkConnectedOverlay\n              [cdkConnectedOverlayOrigin]=\"foreOrigin\"\n              [cdkConnectedOverlayOpen]=\"colorOpen() && colorKind() === 'foreColor'\"\n              [cdkConnectedOverlayPositions]=\"positions\"\n              [cdkConnectedOverlayHasBackdrop]=\"true\"\n              cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n              (backdropClick)=\"closeColor()\"\n              (detach)=\"closeColor()\"\n            >\n              <ng-container [ngTemplateOutlet]=\"paletteTpl\" />\n            </ng-template>\n          }\n          @case ('backColor') {\n            <button\n              type=\"button\"\n              class=\"kpt-rich-text__tool kpt-rich-text__tool--color\"\n              cdkOverlayOrigin\n              #backOrigin=\"cdkOverlayOrigin\"\n              [attr.aria-label]=\"aria(item)\"\n              [kptTooltip]=\"aria(item)\"\n              [disabled]=\"disabled()\"\n              (mousedown)=\"$event.preventDefault()\"\n              (click)=\"openColor('backColor')\"\n            >\n              <kpt-icon [name]=\"icon(item)\" />\n            </button>\n            <ng-template\n              cdkConnectedOverlay\n              [cdkConnectedOverlayOrigin]=\"backOrigin\"\n              [cdkConnectedOverlayOpen]=\"colorOpen() && colorKind() === 'backColor'\"\n              [cdkConnectedOverlayPositions]=\"positions\"\n              [cdkConnectedOverlayHasBackdrop]=\"true\"\n              cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n              (backdropClick)=\"closeColor()\"\n              (detach)=\"closeColor()\"\n            >\n              <ng-container [ngTemplateOutlet]=\"paletteTpl\" />\n            </ng-template>\n          }\n          @case ('table') {\n            <button\n              type=\"button\"\n              class=\"kpt-rich-text__tool\"\n              cdkOverlayOrigin\n              #tableOrigin=\"cdkOverlayOrigin\"\n              [class.is-active]=\"tableOpen()\"\n              [attr.aria-label]=\"aria(item)\"\n              [kptTooltip]=\"aria(item)\"\n              [disabled]=\"disabled()\"\n              (mousedown)=\"$event.preventDefault()\"\n              (click)=\"exec(item)\"\n            >\n              <kpt-icon [name]=\"icon(item)\" />\n            </button>\n            <ng-template\n              cdkConnectedOverlay\n              [cdkConnectedOverlayOrigin]=\"tableOrigin\"\n              [cdkConnectedOverlayOpen]=\"tableOpen()\"\n              [cdkConnectedOverlayPositions]=\"positions\"\n              [cdkConnectedOverlayHasBackdrop]=\"true\"\n              cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n              (backdropClick)=\"closeTable()\"\n              (detach)=\"closeTable()\"\n            >\n              <div class=\"kpt-rt-grid-pop\" (mousedown)=\"$event.preventDefault()\">\n                <div class=\"kpt-rt-grid\" (mouseleave)=\"gridHover(0, 0)\">\n                  @for (r of gridRows; track r) {\n                    <div class=\"kpt-rt-grid__row\">\n                      @for (c of gridCols; track c) {\n                        <span\n                          class=\"kpt-rt-grid__cell\"\n                          [class.is-on]=\"r <= gridR() && c <= gridC()\"\n                          (mouseenter)=\"gridHover(r, c)\"\n                          (click)=\"insertTable(r, c)\"\n                        ></span>\n                      }\n                    </div>\n                  }\n                </div>\n                <div class=\"kpt-rt-grid__label\">{{ gridR() }} \u00D7 {{ gridC() }}</div>\n              </div>\n            </ng-template>\n          }\n          @default {\n            <button\n              type=\"button\"\n              class=\"kpt-rich-text__tool\"\n              [class.is-active]=\"isActive(item)\"\n              [attr.aria-label]=\"aria(item)\"\n              [attr.aria-pressed]=\"isActive(item)\"\n              [kptTooltip]=\"aria(item)\"\n              [disabled]=\"disabled()\"\n              (mousedown)=\"$event.preventDefault()\"\n              (click)=\"exec(item)\"\n            >\n              <kpt-icon [name]=\"icon(item)\" />\n            </button>\n          }\n        }\n      }\n    }\n  </div>\n  @if (sourceView()) {\n    <textarea\n      class=\"kpt-rich-text__source\"\n      [value]=\"value()\"\n      [disabled]=\"disabled()\"\n      spellcheck=\"false\"\n      [attr.aria-label]=\"i18n.t('richText.htmlSource')\"\n      (input)=\"onSource($event)\"\n      (blur)=\"touch.emit()\"\n    ></textarea>\n  } @else {\n    <div\n      #editor\n      class=\"kpt-rich-text__editor\"\n      [attr.contenteditable]=\"disabled() ? 'false' : 'true'\"\n      [attr.data-placeholder]=\"placeholder()\"\n      [attr.aria-invalid]=\"showInvalid() ? 'true' : null\"\n      role=\"textbox\"\n      aria-multiline=\"true\"\n      (input)=\"onInput()\"\n      (paste)=\"onPaste($event)\"\n      (contextmenu)=\"onContextMenu($event)\"\n      (mousedown)=\"onEditorMouseDown($event)\"\n      (mousemove)=\"onEditorMouseMove($event)\"\n      (blur)=\"touch.emit()\"\n    ></div>\n  }\n\n  <!-- Menu kontekstowe tabeli (origin punktowy = pozycja kursora) -->\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"menuPoint()\"\n    [cdkConnectedOverlayOpen]=\"menuOpen()\"\n    [cdkConnectedOverlayHasBackdrop]=\"true\"\n    cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n    (backdropClick)=\"closeMenu()\"\n    (detach)=\"closeMenu()\"\n  >\n    <div class=\"kpt-rt-menu\" (contextmenu)=\"$event.preventDefault()\">\n      <div class=\"kpt-rt-menu__group\">{{ i18n.t('richText.menu.column') }}</div>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"insertColumn('left')\"><kpt-icon name=\"plus\" /> {{ i18n.t('richText.menu.insertLeft') }}</button>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"insertColumn('right')\"><kpt-icon name=\"plus\" /> {{ i18n.t('richText.menu.insertRight') }}</button>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"toggleHeaderColumn()\"><kpt-icon name=\"table\" /> {{ i18n.t('richText.menu.headerColumn') }}</button>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"deleteColumn()\"><kpt-icon name=\"trash\" /> {{ i18n.t('richText.menu.deleteColumn') }}</button>\n      <div class=\"kpt-rt-menu__sep\"></div>\n      <div class=\"kpt-rt-menu__group\">{{ i18n.t('richText.menu.row') }}</div>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"insertRow('above')\"><kpt-icon name=\"plus\" /> {{ i18n.t('richText.menu.insertAbove') }}</button>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"insertRow('below')\"><kpt-icon name=\"plus\" /> {{ i18n.t('richText.menu.insertBelow') }}</button>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"toggleHeaderRow()\"><kpt-icon name=\"table\" /> {{ i18n.t('richText.menu.headerRow') }}</button>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"deleteRow()\"><kpt-icon name=\"trash\" /> {{ i18n.t('richText.menu.deleteRow') }}</button>\n      <div class=\"kpt-rt-menu__sep\"></div>\n      <div class=\"kpt-rt-menu__group\">{{ i18n.t('richText.menu.cell') }}</div>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"openCellBg()\"><kpt-icon name=\"palette\" /> {{ i18n.t('richText.menu.cellBackground') }}</button>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"alignCell('left')\"><kpt-icon name=\"align-left\" /> {{ i18n.t('richText.menu.alignLeft') }}</button>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"alignCell('center')\"><kpt-icon name=\"align-center\" /> {{ i18n.t('richText.menu.alignCenter') }}</button>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"alignCell('right')\"><kpt-icon name=\"align-right\" /> {{ i18n.t('richText.menu.alignRight') }}</button>\n      <div class=\"kpt-rt-menu__sep\"></div>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" [class.is-disabled]=\"!canMerge()\" (click)=\"mergeCells()\"><kpt-icon name=\"table\" /> {{ i18n.t('richText.menu.mergeCells') }}</button>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" [class.is-disabled]=\"!canSplit()\" (click)=\"splitCell()\"><kpt-icon name=\"grip-vertical\" /> {{ i18n.t('richText.menu.splitCell') }}</button>\n      <div class=\"kpt-rt-menu__sep\"></div>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"openBorder()\"><kpt-icon name=\"table\" /> {{ i18n.t('richText.menu.border') }}</button>\n      <div class=\"kpt-rt-menu__sep\"></div>\n      <button type=\"button\" class=\"kpt-rt-menu__item kpt-rt-menu__item--danger\" (click)=\"deleteTable()\"><kpt-icon name=\"trash\" /> {{ i18n.t('richText.menu.deleteTable') }}</button>\n    </div>\n  </ng-template>\n\n  <!-- Popover obramowania (tabela / kom\u00F3rka) -->\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"menuPoint()\"\n    [cdkConnectedOverlayOpen]=\"borderOpen()\"\n    [cdkConnectedOverlayHasBackdrop]=\"true\"\n    cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n    (backdropClick)=\"closeBorder()\"\n    (detach)=\"closeBorder()\"\n  >\n    <div class=\"kpt-rt-border\" (mousedown)=\"$event.preventDefault()\">\n      <div class=\"kpt-rt-border__seg\">\n        <button type=\"button\" [class.is-active]=\"borderTarget() === 'table'\" (click)=\"borderTarget.set('table')\">{{ i18n.t('richText.border.table') }}</button>\n        <button type=\"button\" [class.is-active]=\"borderTarget() === 'cell'\" (click)=\"borderTarget.set('cell')\">{{ i18n.t('richText.border.cell') }}</button>\n      </div>\n      <div class=\"kpt-rt-border__widths\">\n        <button type=\"button\" (click)=\"setBorderWidth('none')\">{{ i18n.t('richText.border.none') }}</button>\n        <button type=\"button\" (click)=\"setBorderWidth('thin')\">{{ i18n.t('richText.border.thin') }}</button>\n        <button type=\"button\" (click)=\"setBorderWidth('medium')\">{{ i18n.t('richText.border.medium') }}</button>\n        <button type=\"button\" (click)=\"setBorderWidth('thick')\">{{ i18n.t('richText.border.thick') }}</button>\n      </div>\n      <div class=\"kpt-rich-text__swatches\">\n        @for (c of swatches; track c) {\n          <button type=\"button\" class=\"kpt-rich-text__swatch\" [style.background]=\"c\" [attr.aria-label]=\"c\" (click)=\"setBorderColor(c)\"></button>\n        }\n      </div>\n      <label class=\"kpt-rich-text__picker\">\n        <span>{{ i18n.t('richText.border.customColor') }}</span>\n        <input type=\"color\" (input)=\"onBorderColorInput($event)\" />\n      </label>\n    </div>\n  </ng-template>\n\n  <!-- Popover koloru t\u0142a kom\u00F3rki (z menu kontekstowego) -->\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"menuPoint()\"\n    [cdkConnectedOverlayOpen]=\"colorOpen() && colorKind() === 'cellBg'\"\n    [cdkConnectedOverlayHasBackdrop]=\"true\"\n    cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n    (backdropClick)=\"closeColor()\"\n    (detach)=\"closeColor()\"\n  >\n    <ng-container [ngTemplateOutlet]=\"paletteTpl\" />\n  </ng-template>\n</div>\n\n<ng-template #paletteTpl>\n  <div class=\"kpt-rich-text__palette\" (mousedown)=\"$event.preventDefault()\">\n    <div class=\"kpt-rich-text__swatches\">\n      @for (c of swatches; track c) {\n        <button\n          type=\"button\"\n          class=\"kpt-rich-text__swatch\"\n          [style.background]=\"c\"\n          [attr.aria-label]=\"c\"\n          (click)=\"applyColor(c)\"\n        ></button>\n      }\n    </div>\n    <label class=\"kpt-rich-text__picker\">\n      <span>{{ i18n.t('richText.paletteCustom') }}</span>\n      <input type=\"color\" (input)=\"onColorInput($event)\" />\n    </label>\n  </div>\n</ng-template>\n", styles: ["@layer kpt.components{.kpt-rich-text-host{display:block}.kpt-rich-text{border:var(--kpt-border-width-thin, 1px) solid var(--kpt-form-field-border);border-radius:var(--kpt-form-field-radius, .5rem);overflow:hidden;background:var(--kpt-form-field-bg)}.kpt-rich-text:focus-within{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-rich-text--invalid{border-color:var(--kpt-form-field-border-error)}.kpt-rich-text--disabled{opacity:.6}.kpt-rich-text__toolbar{display:flex;flex-wrap:wrap;gap:.15rem;padding:.3rem;border-bottom:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);background:var(--kpt-color-surface-variant)}.kpt-rich-text__tool{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:0;border-radius:var(--kpt-radius-sm, .25rem);background:none;color:var(--kpt-color-on-surface);cursor:pointer;font-size:1.05rem}.kpt-rich-text__tool:hover:not(:disabled){background:var(--kpt-color-muted)}.kpt-rich-text__tool:disabled{opacity:.5;cursor:not-allowed}.kpt-rich-text__tool.is-active{background:var(--kpt-color-muted);color:var(--kpt-color-primary)}.kpt-rich-text__divider{width:var(--kpt-border-width-thin, 1px);align-self:stretch;margin-inline:.2rem;background:var(--kpt-color-border)}.kpt-rich-text__style{display:inline-flex;align-items:center;gap:var(--kpt-space-1, .25rem);height:2rem;min-width:8rem;border:var(--kpt-border-width-thin, 1px) solid var(--kpt-form-field-border);border-radius:var(--kpt-radius-sm, .25rem);background:var(--kpt-form-field-bg);color:var(--kpt-form-field-text);font:inherit;font-size:var(--kpt-font-size-sm, .875rem);padding-inline:.5rem;cursor:pointer}.kpt-rich-text__style span{flex:1;text-align:start}.kpt-rich-text__style:hover:not(:disabled){border-color:var(--kpt-form-field-border-hover)}.kpt-rich-text__style.is-open{border-color:var(--kpt-form-field-border-focus)}.kpt-rich-text__style:disabled{opacity:.5;cursor:not-allowed}.kpt-rich-text__style-caret{opacity:.6}.kpt-rich-text__editor{min-height:6rem;padding:var(--kpt-space-3, .75rem);font-size:var(--kpt-font-size-sm, .875rem);line-height:var(--kpt-font-line-height-normal, 1.5);color:var(--kpt-form-field-text);outline:none;overflow-y:auto}.kpt-rich-text__editor:empty:before{content:attr(data-placeholder);color:var(--kpt-form-field-placeholder)}.kpt-rich-text__editor a{color:var(--kpt-color-primary)}.kpt-rich-text__editor ul,.kpt-rich-text__editor ol{padding-inline-start:1.5rem}.kpt-rich-text__editor h1{font-size:1.6em;font-weight:700;margin:.4em 0}.kpt-rich-text__editor h2{font-size:1.4em;font-weight:700;margin:.4em 0}.kpt-rich-text__editor h3{font-size:1.2em;font-weight:600;margin:.4em 0}.kpt-rich-text__editor h4{font-size:1.05em;font-weight:600;margin:.4em 0}.kpt-rich-text__editor h5{font-size:.95em;font-weight:600;margin:.4em 0}.kpt-rich-text__editor h6{font-size:.85em;font-weight:600;margin:.4em 0;text-transform:uppercase}.kpt-rich-text__editor blockquote{margin:.4em 0;padding-inline-start:.75rem;border-inline-start:3px solid var(--kpt-color-border-strong);color:var(--kpt-color-on-surface-muted)}.kpt-rich-text__editor .kpt-rt-table{border-collapse:collapse;table-layout:fixed;width:100%;margin:.5em 0}.kpt-rich-text__editor .kpt-rt-table td,.kpt-rich-text__editor .kpt-rt-table th{border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);padding:.35rem .5rem;min-width:2rem;vertical-align:top;overflow-wrap:anywhere}.kpt-rich-text__editor .kpt-rt-table th{background:var(--kpt-color-surface-variant);font-weight:var(--kpt-font-weight-semibold, 600)}.kpt-rich-text__editor .kpt-rt-table .kpt-rt-cell-sel{box-shadow:inset 0 0 0 2px var(--kpt-color-primary);background:color-mix(in oklch,var(--kpt-color-primary) 12%,transparent)}.kpt-rich-text__editor.is-col-resize{cursor:col-resize}.kpt-rich-text__source{display:block;width:100%;box-sizing:border-box;min-height:6rem;padding:var(--kpt-space-3, .75rem);border:0;background:var(--kpt-color-surface-variant);color:var(--kpt-form-field-text);font-family:var(--kpt-font-family-mono, ui-monospace, monospace);font-size:var(--kpt-font-size-xs, .75rem);line-height:var(--kpt-font-line-height-normal, 1.5);resize:vertical;outline:none}.kpt-rich-text__style-panel{min-width:11rem;margin:0;padding:.25rem;list-style:none;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);max-height:20rem;overflow-y:auto}.kpt-rich-text__style-opt{padding:.35rem .6rem;border-radius:var(--kpt-radius-sm, .25rem);color:var(--kpt-color-on-surface);cursor:pointer;line-height:1.2}.kpt-rich-text__style-opt:hover{background:var(--kpt-color-muted)}.kpt-rich-text__style-opt.is-selected{background:var(--kpt-color-muted);color:var(--kpt-color-primary)}.kpt-rich-text__style-opt--p{font-size:.95rem}.kpt-rich-text__style-opt--h1{font-size:1.7rem;font-weight:700}.kpt-rich-text__style-opt--h2{font-size:1.45rem;font-weight:700}.kpt-rich-text__style-opt--h3{font-size:1.25rem;font-weight:600}.kpt-rich-text__style-opt--h4{font-size:1.1rem;font-weight:600}.kpt-rich-text__style-opt--h5{font-size:1rem;font-weight:600}.kpt-rich-text__style-opt--h6{font-size:.85rem;font-weight:600;text-transform:uppercase;letter-spacing:.03em}.kpt-rich-text__palette{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)}.kpt-rich-text__swatches{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.kpt-rich-text__swatch{width:1.4rem;height:1.4rem;border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-sm, .25rem);cursor:pointer}.kpt-rich-text__swatch:hover{transform:scale(1.1)}.kpt-rich-text__picker{display:flex;align-items:center;justify-content:space-between;gap:var(--kpt-space-2, .5rem);margin-top:var(--kpt-space-2, .5rem);font-size:var(--kpt-font-size-sm, .875rem);color:var(--kpt-color-on-surface-muted)}.kpt-rich-text__picker input[type=color]{width:2rem;height:1.6rem;padding:0;border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-sm, .25rem);background:none;cursor:pointer}.kpt-rt-grid-pop{padding:var(--kpt-space-2, .5rem);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)}.kpt-rt-grid{display:flex;flex-direction:column;gap:3px}.kpt-rt-grid__row{display:flex;gap:3px}.kpt-rt-grid__cell{width:1rem;height:1rem;border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:2px;cursor:pointer}.kpt-rt-grid__cell.is-on{background:var(--kpt-color-primary);border-color:var(--kpt-color-primary)}.kpt-rt-grid__label{margin-top:var(--kpt-space-2, .5rem);text-align:center;font-size:var(--kpt-font-size-xs, .75rem);color:var(--kpt-color-on-surface-muted)}.kpt-rt-menu{min-width:12rem;padding:.25rem;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);font-size:var(--kpt-font-size-sm, .875rem)}.kpt-rt-menu__group{padding:.3rem .6rem .15rem;font-size:var(--kpt-font-size-xs, .75rem);font-weight:var(--kpt-font-weight-semibold, 600);text-transform:uppercase;letter-spacing:.03em;color:var(--kpt-color-on-surface-muted)}.kpt-rt-menu__item{display:flex;align-items:center;gap:var(--kpt-space-2, .5rem);width:100%;padding:.4rem .6rem;border:0;border-radius:var(--kpt-radius-sm, .25rem);background:none;color:var(--kpt-color-on-surface);font:inherit;text-align:start;cursor:pointer}.kpt-rt-menu__item:hover{background:var(--kpt-color-muted)}.kpt-rt-menu__item kpt-icon{color:var(--kpt-color-on-surface-muted)}.kpt-rt-menu__item--danger{color:var(--kpt-color-danger)}.kpt-rt-menu__item--danger kpt-icon{color:var(--kpt-color-danger)}.kpt-rt-menu__item.is-disabled{opacity:.4;pointer-events:none}.kpt-rt-menu__sep{height:1px;margin:.25rem 0;background:var(--kpt-color-border)}.kpt-rt-border{display:flex;flex-direction:column;gap:var(--kpt-space-2, .5rem);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)}.kpt-rt-border__seg{display:flex;gap:2px;padding:2px;background:var(--kpt-color-surface-variant);border-radius:var(--kpt-radius-md, .5rem)}.kpt-rt-border__seg button{flex:1;border:0;background:none;padding:.25rem .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-rt-border__seg 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)}.kpt-rt-border__widths{display:flex;gap:.25rem}.kpt-rt-border__widths button{flex:1;border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);background:none;padding:.25rem .3rem;border-radius:var(--kpt-radius-sm, .25rem);color:var(--kpt-color-on-surface);font:inherit;font-size:var(--kpt-font-size-xs, .75rem);cursor:pointer}.kpt-rt-border__widths button:hover{background:var(--kpt-color-muted)}}\n"] }]
     }], () => [], { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], toolbar: [{ type: i0.Input, args: [{ isSignal: true, alias: "toolbar", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", 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"] }], editor: [{ type: i0.ViewChild, args: ['editor', { isSignal: true }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptRichText, { className: "KptRichText", filePath: "lib/rich-text/rich-text.component.ts", lineNumber: 118 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptRichText, { className: "KptRichText", filePath: "lib/rich-text/rich-text.component.ts", lineNumber: 121 }); })();
 
 function KptSlider_Conditional_0_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵdomElementStart(0, "span", 5);
@@ -5311,8 +5559,13 @@ function KptSlider_Conditional_1_Template(rf, ctx) { if (rf & 1) {
  * Suwak wartości (slider) na Signal Forms.
  * W trybie `range` udostępnia dwa uchwyty, a wartość jest parą `[min, max]`.
  *
+ * Pod `[formField]` zakres bierze się ze schematu (`min(path.volume, 0)`,
+ * `max(path.volume, 100)`) — `[min]`/`[max]` obok `[formField]` to błąd kompilacji.
+ * Tryb `range` (wartość `[number, number]`) łączy się więc tylko z `[(value)]`.
+ *
  * @example
- * <kpt-slider [formField]="f.volume" [min]="0" [max]="100" [step]="5" showValue />
+ * <kpt-slider [formField]="f.volume" [step]="5" showValue />
+ * <kpt-slider [(value)]="volume" [min]="0" [max]="100" [step]="5" showValue />
  * <kpt-slider range [(value)]="zakres" [min]="0" [max]="100" showValue />
  */
 class KptSlider {
@@ -5439,7 +5692,7 @@ class KptSlider {
     }
   `, host: { class: 'kpt-slider-host' }, styles: ["@layer kpt.components{.kpt-slider-host{display:flex;align-items:center;gap:var(--kpt-space-3, .75rem)}.kpt-slider__input{--_pct: 0%;flex:1;height:1.25rem;appearance:none;background:none;cursor:pointer}.kpt-slider__input::-webkit-slider-runnable-track{height:.4rem;border-radius:var(--kpt-radius-full, 9999px);background:linear-gradient(to right,var(--kpt-color-primary) var(--_pct),var(--kpt-color-surface-variant) var(--_pct))}.kpt-slider__input::-moz-range-track{height:.4rem;border-radius:var(--kpt-radius-full, 9999px);background:var(--kpt-color-surface-variant)}.kpt-slider__input::-moz-range-progress{height:.4rem;border-radius:var(--kpt-radius-full, 9999px);background:var(--kpt-color-primary)}.kpt-slider__input::-webkit-slider-thumb{appearance:none;width:1.1rem;height:1.1rem;margin-top:-.35rem;border-radius:50%;background:var(--kpt-color-primary);box-shadow:var(--kpt-elevation-1)}.kpt-slider__input::-moz-range-thumb{width:1.1rem;height:1.1rem;border:0;border-radius:50%;background:var(--kpt-color-primary);box-shadow:var(--kpt-elevation-1)}.kpt-slider__input:focus-visible{outline:none}.kpt-slider__input:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px color-mix(in oklch,var(--kpt-color-focus-ring) 30%,transparent)}.kpt-slider__input:focus-visible::-moz-range-thumb{box-shadow:0 0 0 4px color-mix(in oklch,var(--kpt-color-focus-ring) 30%,transparent)}.kpt-slider__input:disabled{opacity:.5;cursor:not-allowed}.kpt-slider__value{min-width:2.5rem;text-align:end;font-size:var(--kpt-font-size-sm, .875rem);font-variant-numeric:tabular-nums;color:var(--kpt-color-on-surface)}.kpt-slider__range{position:relative;flex:1;height:1.25rem;display:flex;align-items:center}.kpt-slider__rail{position:absolute;inset-inline:0;height:.4rem;border-radius:var(--kpt-radius-full, 9999px);background:var(--kpt-color-surface-variant)}.kpt-slider__fill{position:absolute;height:.4rem;border-radius:var(--kpt-radius-full, 9999px);background:var(--kpt-color-primary)}.kpt-slider__thumb{position:absolute;inset-inline:0;width:100%;height:1.25rem;margin:0;appearance:none;background:none;pointer-events:none}.kpt-slider__thumb::-webkit-slider-runnable-track{height:.4rem;background:none}.kpt-slider__thumb::-moz-range-track{height:.4rem;background:none}.kpt-slider__thumb::-webkit-slider-thumb{pointer-events:auto;appearance:none;width:1.1rem;height:1.1rem;margin-top:-.35rem;border-radius:50%;background:var(--kpt-color-primary);box-shadow:var(--kpt-elevation-1);cursor:pointer}.kpt-slider__thumb::-moz-range-thumb{pointer-events:auto;width:1.1rem;height:1.1rem;border:0;border-radius:50%;background:var(--kpt-color-primary);box-shadow:var(--kpt-elevation-1);cursor:pointer}.kpt-slider__thumb:focus-visible{outline:none}.kpt-slider__thumb:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px color-mix(in oklch,var(--kpt-color-focus-ring) 30%,transparent)}.kpt-slider__thumb:focus-visible::-moz-range-thumb{box-shadow:0 0 0 4px color-mix(in oklch,var(--kpt-color-focus-ring) 30%,transparent)}.kpt-slider__thumb--high{z-index:1}.kpt-slider__thumb:disabled{opacity:.5;cursor:not-allowed}}\n"] }]
     }], null, { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], range: [{ type: i0.Input, args: [{ isSignal: true, alias: "range", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], showValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValue", 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(KptSlider, { className: "KptSlider", filePath: "lib/slider/slider.component.ts", lineNumber: 82 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptSlider, { className: "KptSlider", filePath: "lib/slider/slider.component.ts", lineNumber: 87 }); })();
 
 function KptRating_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
@@ -5458,7 +5711,7 @@ function KptRating_For_2_Template(rf, ctx) { if (rf & 1) {
  * Ocena gwiazdkami (rating) na Signal Forms.
  *
  * @example
- * <kpt-rating [formField]="f.score" [max]="5" />
+ * <kpt-rating [formField]="f.score" [count]="5" />
  * <kpt-rating [value]="4" readonly />
  */
 class KptRating {
@@ -5676,7 +5929,7 @@ function KptColorPicker_For_6_Template(rf, ctx) { if (rf & 1) {
 } if (rf & 2) {
     const color_r2 = ctx.$implicit;
     const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵstyleProp("background", color_r2);
+    i0.ɵɵstyleProp("background-color", color_r2);
     i0.ɵɵclassProp("is-active", color_r2 === ctx_r2.value());
     i0.ɵɵdomProperty("disabled", ctx_r2.disabled());
     i0.ɵɵattribute("aria-label", color_r2);
@@ -5704,7 +5957,7 @@ class KptColorPicker {
         this.value.set(event.target.value);
     }
     static { this.ɵfac = function KptColorPicker_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || KptColorPicker)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptColorPicker, selectors: [["kpt-color-picker"]], hostAttrs: [1, "kpt-color-picker-host"], inputs: { value: [1, "value"], presets: [1, "presets"], disabled: [1, "disabled"], invalid: [1, "invalid"], touched: [1, "touched"] }, outputs: { value: "valueChange", touch: "touch" }, decls: 7, vars: 6, consts: [[1, "kpt-color-picker"], [1, "kpt-color-picker__swatch"], ["type", "color", 3, "input", "blur", "value", "disabled"], ["type", "text", "maxlength", "7", 1, "kpt-color-picker__hex", 3, "input", "blur", "value", "disabled"], [1, "kpt-color-picker__presets"], ["type", "button", 1, "kpt-color-picker__preset", 3, "is-active", "background", "disabled"], ["type", "button", 1, "kpt-color-picker__preset", 3, "click", "disabled"]], template: function KptColorPicker_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptColorPicker, selectors: [["kpt-color-picker"]], hostAttrs: [1, "kpt-color-picker-host"], inputs: { value: [1, "value"], presets: [1, "presets"], disabled: [1, "disabled"], invalid: [1, "invalid"], touched: [1, "touched"] }, outputs: { value: "valueChange", touch: "touch" }, decls: 7, vars: 6, consts: [[1, "kpt-color-picker"], [1, "kpt-color-picker__swatch"], ["type", "color", 3, "input", "blur", "value", "disabled"], ["type", "text", "maxlength", "7", 1, "kpt-color-picker__hex", 3, "input", "blur", "value", "disabled"], [1, "kpt-color-picker__presets"], ["type", "button", 1, "kpt-color-picker__preset", 3, "is-active", "background-color", "disabled"], ["type", "button", 1, "kpt-color-picker__preset", 3, "click", "disabled"]], template: function KptColorPicker_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵdomElementStart(0, "div", 0)(1, "label", 1)(2, "input", 2);
             i0.ɵɵdomListener("input", function KptColorPicker_Template_input_input_2_listener($event) { return ctx.value.set($event.target.value); })("blur", function KptColorPicker_Template_input_blur_2_listener() { return ctx.touch.emit(); });
             i0.ɵɵdomElementEnd()();
@@ -5716,7 +5969,7 @@ class KptColorPicker {
             i0.ɵɵdomElementEnd()();
         } if (rf & 2) {
             i0.ɵɵadvance();
-            i0.ɵɵstyleProp("background", ctx.value());
+            i0.ɵɵstyleProp("background-color", ctx.value());
             i0.ɵɵadvance();
             i0.ɵɵdomProperty("value", ctx.value())("disabled", ctx.disabled());
             i0.ɵɵadvance();
@@ -5729,7 +5982,7 @@ class KptColorPicker {
         type: Component,
         args: [{ selector: 'kpt-color-picker', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: `
     <div class="kpt-color-picker">
-      <label class="kpt-color-picker__swatch" [style.background]="value()">
+      <label class="kpt-color-picker__swatch" [style.background-color]="value()">
         <input
           type="color"
           [value]="value()"
@@ -5753,7 +6006,7 @@ class KptColorPicker {
             type="button"
             class="kpt-color-picker__preset"
             [class.is-active]="color === value()"
-            [style.background]="color"
+            [style.background-color]="color"
             [disabled]="disabled()"
             (click)="value.set(color)"
             [attr.aria-label]="color"
@@ -5765,7 +6018,8 @@ class KptColorPicker {
     }], null, { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], presets: [{ type: i0.Input, args: [{ isSignal: true, alias: "presets", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptColorPicker, { className: "KptColorPicker", filePath: "lib/color-picker/color-picker.component.ts", lineNumber: 52 }); })();
 
-const _forTrack0$5 = ($index, $item) => $item.iso;
+const _forTrack0$5 = ($index, $item) => $item.key;
+const _forTrack1$1 = ($index, $item) => $item.iso;
 function KptDateRange_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 2);
     i0.ɵɵtext(1);
@@ -5842,64 +6096,129 @@ function KptDateRange_ng_template_7_Conditional_1_Template(rf, ctx) { if (rf & 1
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate(ctx_r0.i18n.t("common.done"));
 } }
-function KptDateRange_ng_template_7_Conditional_2_For_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 23);
+function KptDateRange_ng_template_7_Conditional_2_For_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 26);
+    i0.ɵɵlistener("click", function KptDateRange_ng_template_7_Conditional_2_For_2_Conditional_2_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r7); const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.prevMonth()); });
+    i0.ɵɵelement(1, "kpt-icon", 27);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(4);
+    i0.ɵɵattribute("aria-label", ctx_r0.i18n.t("datepicker.prevMonth"));
+} }
+function KptDateRange_ng_template_7_Conditional_2_For_2_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "span", 21);
+} }
+function KptDateRange_ng_template_7_Conditional_2_For_2_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 26);
+    i0.ɵɵlistener("click", function KptDateRange_ng_template_7_Conditional_2_For_2_Conditional_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r8); const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.nextMonth()); });
+    i0.ɵɵelement(1, "kpt-icon", 28);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(4);
+    i0.ɵɵattribute("aria-label", ctx_r0.i18n.t("datepicker.nextMonth"));
+} }
+function KptDateRange_ng_template_7_Conditional_2_For_2_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "span", 21);
+} }
+function KptDateRange_ng_template_7_Conditional_2_For_2_For_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 24);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const wd_r8 = ctx.$implicit;
+    const wd_r9 = ctx.$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(wd_r8);
+    i0.ɵɵtextInterpolate(wd_r9);
 } }
-function KptDateRange_ng_template_7_Conditional_2_For_12_For_1_Template(rf, ctx) { if (rf & 1) {
-    const _r9 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 26);
-    i0.ɵɵlistener("click", function KptDateRange_ng_template_7_Conditional_2_For_12_For_1_Template_button_click_0_listener() { const cell_r10 = i0.ɵɵrestoreView(_r9).$implicit; const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.selectDay(cell_r10)); });
+function KptDateRange_ng_template_7_Conditional_2_For_2_For_13_For_1_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "span", 29);
+} }
+function KptDateRange_ng_template_7_Conditional_2_For_2_For_13_For_1_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    const _r10 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 31);
+    i0.ɵɵlistener("click", function KptDateRange_ng_template_7_Conditional_2_For_2_For_13_For_1_Conditional_1_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r10); const cell_r11 = i0.ɵɵnextContext().$implicit; const ctx_r0 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r0.selectDay(cell_r11)); });
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const cell_r10 = ctx.$implicit;
-    i0.ɵɵclassProp("kpt-calendar__day--muted", !cell_r10.inMonth)("kpt-calendar__day--range", cell_r10.inRange)("kpt-calendar__day--selected", cell_r10.isStart || cell_r10.isEnd);
+    const cell_r11 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵclassProp("kpt-calendar__day--muted", !cell_r11.inMonth)("kpt-calendar__day--today", cell_r11.today)("kpt-calendar__day--range", cell_r11.inRange)("kpt-calendar__day--range-start", cell_r11.rangeStart)("kpt-calendar__day--range-end", cell_r11.rangeEnd)("kpt-calendar__day--selected", cell_r11.isStart || cell_r11.isEnd);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(cell_r10.day);
+    i0.ɵɵtextInterpolate(cell_r11.day);
 } }
-function KptDateRange_ng_template_7_Conditional_2_For_12_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵrepeaterCreate(0, KptDateRange_ng_template_7_Conditional_2_For_12_For_1_Template, 2, 7, "button", 25, _forTrack0$5);
+function KptDateRange_ng_template_7_Conditional_2_For_2_For_13_For_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, KptDateRange_ng_template_7_Conditional_2_For_2_For_13_For_1_Conditional_0_Template, 1, 0, "span", 29)(1, KptDateRange_ng_template_7_Conditional_2_For_2_For_13_For_1_Conditional_1_Template, 2, 13, "button", 30);
 } if (rf & 2) {
-    const week_r11 = ctx.$implicit;
-    i0.ɵɵrepeater(week_r11);
+    const cell_r11 = ctx.$implicit;
+    i0.ɵɵconditional(cell_r11.blank ? 0 : 1);
 } }
-function KptDateRange_ng_template_7_Conditional_2_Conditional_13_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    const _r13 = i0.ɵɵgetCurrentView();
+function KptDateRange_ng_template_7_Conditional_2_For_2_For_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵrepeaterCreate(0, KptDateRange_ng_template_7_Conditional_2_For_2_For_13_For_1_Template, 2, 1, null, null, _forTrack1$1);
+} if (rf & 2) {
+    const week_r12 = ctx.$implicit;
+    i0.ɵɵrepeater(week_r12);
+} }
+function KptDateRange_ng_template_7_Conditional_2_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 18)(1, "div", 19);
+    i0.ɵɵconditionalCreate(2, KptDateRange_ng_template_7_Conditional_2_For_2_Conditional_2_Template, 2, 1, "button", 20)(3, KptDateRange_ng_template_7_Conditional_2_For_2_Conditional_3_Template, 1, 0, "span", 21);
+    i0.ɵɵelementStart(4, "span", 22);
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(6, KptDateRange_ng_template_7_Conditional_2_For_2_Conditional_6_Template, 2, 1, "button", 20)(7, KptDateRange_ng_template_7_Conditional_2_For_2_Conditional_7_Template, 1, 0, "span", 21);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(8, "div", 23);
+    i0.ɵɵrepeaterCreate(9, KptDateRange_ng_template_7_Conditional_2_For_2_For_10_Template, 2, 1, "span", 24, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(11, "div", 25);
+    i0.ɵɵrepeaterCreate(12, KptDateRange_ng_template_7_Conditional_2_For_2_For_13_Template, 2, 0, null, null, i0.ɵɵrepeaterTrackByIndex);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const panel_r13 = ctx.$implicit;
+    const ɵ$index_47_r14 = ctx.$index;
+    const ɵ$count_47_r15 = ctx.$count;
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ɵ$index_47_r14 === 0 ? 2 : 3);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(panel_r13.label);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ɵ$index_47_r14 === ɵ$count_47_r15 - 1 ? 6 : 7);
+    i0.ɵɵadvance(3);
+    i0.ɵɵrepeater(ctx_r0.weekdays());
+    i0.ɵɵadvance(3);
+    i0.ɵɵrepeater(panel_r13.weeks);
+} }
+function KptDateRange_ng_template_7_Conditional_2_Conditional_3_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    const _r17 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "kpt-clock", 16);
-    i0.ɵɵlistener("valueChange", function KptDateRange_ng_template_7_Conditional_2_Conditional_13_Conditional_5_Template_kpt_clock_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.startTime.set($event)); });
+    i0.ɵɵlistener("valueChange", function KptDateRange_ng_template_7_Conditional_2_Conditional_3_Conditional_5_Template_kpt_clock_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r17); const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.startTime.set($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(4);
     i0.ɵɵproperty("value", ctx_r0.startTime())("hourFormat", ctx_r0.hourFormat())("minuteStep", ctx_r0.minuteStep());
 } }
-function KptDateRange_ng_template_7_Conditional_2_Conditional_13_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    const _r14 = i0.ɵɵgetCurrentView();
+function KptDateRange_ng_template_7_Conditional_2_Conditional_3_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    const _r18 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "kpt-clock", 16);
-    i0.ɵɵlistener("valueChange", function KptDateRange_ng_template_7_Conditional_2_Conditional_13_Conditional_6_Template_kpt_clock_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r14); const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.endTime.set($event)); });
+    i0.ɵɵlistener("valueChange", function KptDateRange_ng_template_7_Conditional_2_Conditional_3_Conditional_6_Template_kpt_clock_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r18); const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.endTime.set($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(4);
     i0.ɵɵproperty("value", ctx_r0.endTime())("hourFormat", ctx_r0.hourFormat())("minuteStep", ctx_r0.minuteStep());
 } }
-function KptDateRange_ng_template_7_Conditional_2_Conditional_13_Template(rf, ctx) { if (rf & 1) {
-    const _r12 = i0.ɵɵgetCurrentView();
+function KptDateRange_ng_template_7_Conditional_2_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    const _r16 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 11)(1, "button", 12);
-    i0.ɵɵlistener("click", function KptDateRange_ng_template_7_Conditional_2_Conditional_13_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r12); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.timeEnd.set("start")); });
+    i0.ɵɵlistener("click", function KptDateRange_ng_template_7_Conditional_2_Conditional_3_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r16); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.timeEnd.set("start")); });
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(3, "button", 12);
-    i0.ɵɵlistener("click", function KptDateRange_ng_template_7_Conditional_2_Conditional_13_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r12); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.timeEnd.set("end")); });
+    i0.ɵɵlistener("click", function KptDateRange_ng_template_7_Conditional_2_Conditional_3_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r16); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.timeEnd.set("end")); });
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(5, KptDateRange_ng_template_7_Conditional_2_Conditional_13_Conditional_5_Template, 1, 3, "kpt-clock", 13)(6, KptDateRange_ng_template_7_Conditional_2_Conditional_13_Conditional_6_Template, 1, 3, "kpt-clock", 13);
+    i0.ɵɵconditionalCreate(5, KptDateRange_ng_template_7_Conditional_2_Conditional_3_Conditional_5_Template, 1, 3, "kpt-clock", 13)(6, KptDateRange_ng_template_7_Conditional_2_Conditional_3_Conditional_6_Template, 1, 3, "kpt-clock", 13);
     i0.ɵɵelementStart(7, "div", 14)(8, "kpt-button", 15);
-    i0.ɵɵlistener("click", function KptDateRange_ng_template_7_Conditional_2_Conditional_13_Template_kpt_button_click_8_listener() { i0.ɵɵrestoreView(_r12); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.commit()); });
+    i0.ɵɵlistener("click", function KptDateRange_ng_template_7_Conditional_2_Conditional_3_Template_kpt_button_click_8_listener() { i0.ɵɵrestoreView(_r16); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.commit()); });
     i0.ɵɵtext(9);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -5918,49 +6237,26 @@ function KptDateRange_ng_template_7_Conditional_2_Conditional_13_Template(rf, ct
     i0.ɵɵtextInterpolate(ctx_r0.i18n.t("common.done"));
 } }
 function KptDateRange_ng_template_7_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 17)(1, "button", 18);
-    i0.ɵɵlistener("click", function KptDateRange_ng_template_7_Conditional_2_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r7); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.prevMonth()); });
-    i0.ɵɵelement(2, "kpt-icon", 19);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 20);
-    i0.ɵɵtext(4);
-    i0.ɵɵ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.ɵɵelementStart(0, "div", 17);
+    i0.ɵɵrepeaterCreate(1, KptDateRange_ng_template_7_Conditional_2_For_2_Template, 14, 3, "div", 18, _forTrack0$5);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "div", 24);
-    i0.ɵɵrepeaterCreate(11, KptDateRange_ng_template_7_Conditional_2_For_12_Template, 2, 0, null, null, i0.ɵɵrepeaterTrackByIndex);
-    i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(13, KptDateRange_ng_template_7_Conditional_2_Conditional_13_Template, 10, 8);
+    i0.ɵɵconditionalCreate(3, KptDateRange_ng_template_7_Conditional_2_Conditional_3_Template, 10, 8);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵattribute("aria-label", ctx_r0.i18n.t("datepicker.prevMonth"));
-    i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(ctx_r0.monthLabel());
-    i0.ɵɵadvance();
-    i0.ɵɵattribute("aria-label", ctx_r0.i18n.t("datepicker.nextMonth"));
-    i0.ɵɵadvance(3);
-    i0.ɵɵrepeater(ctx_r0.weekdays());
-    i0.ɵɵadvance(3);
-    i0.ɵɵrepeater(ctx_r0.weeks());
+    i0.ɵɵrepeater(ctx_r0.panels());
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r0.mode() === "datetime" ? 13 : -1);
+    i0.ɵɵconditional(ctx_r0.mode() === "datetime" ? 3 : -1);
 } }
 function KptDateRange_ng_template_7_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 10);
     i0.ɵɵlistener("keydown.escape", function KptDateRange_ng_template_7_Template_div_keydown_escape_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.close()); });
-    i0.ɵɵconditionalCreate(1, KptDateRange_ng_template_7_Conditional_1_Template, 10, 8)(2, KptDateRange_ng_template_7_Conditional_2_Template, 14, 4);
+    i0.ɵɵconditionalCreate(1, KptDateRange_ng_template_7_Conditional_1_Template, 10, 8)(2, KptDateRange_ng_template_7_Conditional_2_Template, 4, 1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵclassProp("kpt-calendar--clock", ctx_r0.mode() === "time");
+    i0.ɵɵclassProp("kpt-calendar--clock", ctx_r0.mode() === "time")("kpt-calendar--range", ctx_r0.mode() !== "time")("kpt-calendar--multi", ctx_r0.multi() && ctx_r0.mode() !== "time");
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r0.mode() === "time" ? 1 : 2);
 } }
@@ -5969,11 +6265,14 @@ const toIso = (d) => `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDat
 /**
  * Wybór zakresu dat z kalendarzem (CDK Overlay), Signal Forms.
  * `mode`: 'date' (domyślnie), 'datetime' (data+godzina, tarcza zegara), 'time' (sama godzina).
+ * `visibleMonths` pokazuje kilka miesięcy obok siebie (typowo 2) — zakres podświetla się
+ * ciągłym pasmem przez wszystkie panele.
  * Wartość: `{ start, end }` — daty 'RRRR-MM-DD', datetime 'RRRR-MM-DDTHH:mm', godziny 'HH:mm'.
  * Wymaga `import '@angular/cdk/overlay-prebuilt.css';`
  *
  * @example
  * <kpt-date-range [formField]="f.period" />
+ * <kpt-date-range [visibleMonths]="2" [(value)]="period" />
  * <kpt-date-range mode="datetime" [hourFormat]="12" [(value)]="span" />
  * <kpt-date-range mode="time" [(value)]="hours" />
  */
@@ -5995,6 +6294,8 @@ class KptDateRange {
         ...(ngDevMode ? [{ debugName: "displayFormat" }] : /* istanbul ignore next */ []));
         this.mode = input('date', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+        /** Liczba miesięcy obok siebie (1–3; domyślnie 1). Ignorowana w trybie 'time'. */
+        this.visibleMonths = input(1, { ...(ngDevMode ? { debugName: "visibleMonths" } : /* istanbul ignore next */ {}), transform: numberAttribute });
         this.hourFormat = input(24, { ...(ngDevMode ? { debugName: "hourFormat" } : /* istanbul ignore next */ {}), transform: numberAttribute });
         this.minuteStep = input(1, { ...(ngDevMode ? { debugName: "minuteStep" } : /* istanbul ignore next */ {}), transform: numberAttribute });
         this.i18n = inject(KptI18n);
@@ -6025,11 +6326,13 @@ class KptDateRange {
             { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4 },
             { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -4 },
         ];
-        this.monthLabel = computed(() => {
-            const { y, m } = this.view();
-            return `${this.months()[m]} ${y}`;
+        this.panelCount = computed(() => {
+            const n = Math.trunc(this.visibleMonths());
+            return Number.isFinite(n) ? Math.min(3, Math.max(1, n)) : 1;
         }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "monthLabel" }] : /* istanbul ignore next */ []));
+        ...(ngDevMode ? [{ debugName: "panelCount" }] : /* istanbul ignore next */ []));
+        this.multi = computed(() => this.panelCount() > 1, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "multi" }] : /* istanbul ignore next */ []));
         this.display = computed(() => {
             const { start, end } = this.value();
             if (!start)
@@ -6049,34 +6352,25 @@ class KptDateRange {
             return end ? `${this.fmtDate(start)} – ${this.fmtDate(end)}` : `${this.fmtDate(start)} – …`;
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "display" }] : /* istanbul ignore next */ []));
-        this.weeks = computed(() => {
+        /**
+         * Panele miesięcy. Przy kilku panelach dni sąsiednich miesięcy są wygaszane do pustych slotów:
+         * inaczej ta sama data byłaby klikalna dwa razy (jako „wyszarzona" w jednym panelu i właściwa
+         * w drugim) i pasmo zakresu malowałoby się w obu miejscach.
+         */
+        this.panels = computed(() => {
             const { y, m } = this.view();
-            const start = this.mode() === 'datetime' ? this.startDate() : this.value().start;
-            const end = this.mode() === 'datetime' ? this.endDate() : this.value().end;
-            const first = new Date(y, m, 1);
-            const startOffset = (first.getDay() + 6) % 7;
-            const gridStart = new Date(y, m, 1 - startOffset);
-            const weeks = [];
-            for (let w = 0; w < 6; w++) {
-                const row = [];
-                for (let d = 0; d < 7; d++) {
-                    const date = new Date(gridStart.getFullYear(), gridStart.getMonth(), gridStart.getDate() + w * 7 + d);
-                    const iso = toIso(date);
-                    row.push({
-                        day: date.getDate(),
-                        iso,
-                        inMonth: date.getMonth() === m,
-                        isStart: iso === start,
-                        isEnd: iso === end,
-                        inRange: !!start && !!end && iso > start && iso < end,
-                        disabled: false,
-                    });
-                }
-                weeks.push(row);
-            }
-            return weeks;
+            return Array.from({ length: this.panelCount() }, (_, i) => {
+                const first = new Date(y, m + i, 1);
+                const py = first.getFullYear();
+                const pm = first.getMonth();
+                return {
+                    key: `${py}-${pad(pm + 1)}`,
+                    label: `${this.months()[pm]} ${py}`,
+                    weeks: this.buildWeeks(py, pm),
+                };
+            });
         }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "weeks" }] : /* istanbul ignore next */ []));
+        ...(ngDevMode ? [{ debugName: "panels" }] : /* istanbul ignore next */ []));
     }
     datePart(v) {
         return v ? v.slice(0, 10) : '';
@@ -6102,6 +6396,41 @@ class KptDateRange {
         }
         return hhmm;
     }
+    buildWeeks(y, m) {
+        const datetime = this.mode() === 'datetime';
+        const start = datetime ? this.startDate() : this.value().start;
+        const end = datetime ? this.endDate() : this.value().end;
+        const hasBand = !!start && !!end && start < end;
+        const hideOutside = this.multi();
+        const todayIso = toIso(this.today);
+        const first = new Date(y, m, 1);
+        const startOffset = (first.getDay() + 6) % 7;
+        const gridStart = new Date(y, m, 1 - startOffset);
+        const weeks = [];
+        for (let w = 0; w < 6; w++) {
+            const row = [];
+            for (let d = 0; d < 7; d++) {
+                const date = new Date(gridStart.getFullYear(), gridStart.getMonth(), gridStart.getDate() + w * 7 + d);
+                const iso = toIso(date);
+                const inMonth = date.getMonth() === m;
+                row.push({
+                    day: date.getDate(),
+                    iso,
+                    inMonth,
+                    today: iso === todayIso,
+                    isStart: iso === start,
+                    isEnd: iso === end,
+                    inRange: hasBand && iso > start && iso < end,
+                    rangeStart: hasBand && iso === start,
+                    rangeEnd: hasBand && iso === end,
+                    blank: hideOutside && !inMonth,
+                    disabled: false,
+                });
+            }
+            weeks.push(row);
+        }
+        return weeks;
+    }
     toggleOpen() {
         if (this.disabled())
             return;
@@ -6131,6 +6460,8 @@ class KptDateRange {
         this.touch.emit();
     }
     selectDay(cell) {
+        if (cell.blank || cell.disabled)
+            return;
         if (this.mode() === 'datetime') {
             const start = this.startDate();
             const end = this.endDate();
@@ -6192,7 +6523,7 @@ class KptDateRange {
         this.endDate.set('');
     }
     static { this.ɵfac = function KptDateRange_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || KptDateRange)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptDateRange, selectors: [["kpt-date-range"]], hostAttrs: [1, "kpt-date-range-host"], inputs: { value: [1, "value"], disabled: [1, "disabled"], invalid: [1, "invalid"], touched: [1, "touched"], placeholder: [1, "placeholder"], displayFormat: [1, "displayFormat"], mode: [1, "mode"], hourFormat: [1, "hourFormat"], minuteStep: [1, "minuteStep"] }, outputs: { value: "valueChange", touch: "touch" }, decls: 8, vars: 12, consts: [["trigger", "cdkOverlayOrigin"], ["cdkOverlayOrigin", "", "role", "button", "tabindex", "0", 1, "kpt-date-range", 3, "click", "keydown.enter", "blur"], [1, "kpt-date-range__value"], [1, "kpt-date-range__placeholder"], [1, "kpt-date-range__spacer"], ["type", "button", 1, "kpt-date-range__clear"], ["name", "calendar", 1, "kpt-date-range__icon"], ["cdkConnectedOverlay", "", "cdkConnectedOverlayBackdropClass", "cdk-overlay-transparent-backdrop", 3, "backdropClick", "detach", "cdkConnectedOverlayOrigin", "cdkConnectedOverlayOpen", "cdkConnectedOverlayPositions", "cdkConnectedOverlayHasBackdrop"], ["type", "button", 1, "kpt-date-range__clear", 3, "click"], ["name", "x"], [1, "kpt-calendar", 3, "keydown.escape"], [1, "kpt-range-tabs"], ["type", "button", 3, "click"], [3, "value", "hourFormat", "minuteStep"], [1, "kpt-calendar__footer"], ["size", "sm", 3, "click"], [3, "valueChange", "value", "hourFormat", "minuteStep"], [1, "kpt-calendar__header"], ["type", "button", 1, "kpt-calendar__nav", 3, "click"], ["name", "chevron-left"], [1, "kpt-calendar__title"], ["name", "chevron-right"], [1, "kpt-calendar__weekdays"], [1, "kpt-calendar__weekday"], [1, "kpt-calendar__grid"], ["type", "button", 1, "kpt-calendar__day", 3, "kpt-calendar__day--muted", "kpt-calendar__day--range", "kpt-calendar__day--selected"], ["type", "button", 1, "kpt-calendar__day", 3, "click"]], template: function KptDateRange_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptDateRange, selectors: [["kpt-date-range"]], hostAttrs: [1, "kpt-date-range-host"], inputs: { value: [1, "value"], disabled: [1, "disabled"], invalid: [1, "invalid"], touched: [1, "touched"], placeholder: [1, "placeholder"], displayFormat: [1, "displayFormat"], mode: [1, "mode"], visibleMonths: [1, "visibleMonths"], hourFormat: [1, "hourFormat"], minuteStep: [1, "minuteStep"] }, outputs: { value: "valueChange", touch: "touch" }, decls: 8, vars: 12, consts: [["trigger", "cdkOverlayOrigin"], ["cdkOverlayOrigin", "", "role", "button", "tabindex", "0", 1, "kpt-date-range", 3, "click", "keydown.enter", "blur"], [1, "kpt-date-range__value"], [1, "kpt-date-range__placeholder"], [1, "kpt-date-range__spacer"], ["type", "button", 1, "kpt-date-range__clear"], ["name", "calendar", 1, "kpt-date-range__icon"], ["cdkConnectedOverlay", "", "cdkConnectedOverlayBackdropClass", "cdk-overlay-transparent-backdrop", 3, "backdropClick", "detach", "cdkConnectedOverlayOrigin", "cdkConnectedOverlayOpen", "cdkConnectedOverlayPositions", "cdkConnectedOverlayHasBackdrop"], ["type", "button", 1, "kpt-date-range__clear", 3, "click"], ["name", "x"], [1, "kpt-calendar", 3, "keydown.escape"], [1, "kpt-range-tabs"], ["type", "button", 3, "click"], [3, "value", "hourFormat", "minuteStep"], [1, "kpt-calendar__footer"], ["size", "sm", 3, "click"], [3, "valueChange", "value", "hourFormat", "minuteStep"], [1, "kpt-calendar__panels"], [1, "kpt-calendar__panel"], [1, "kpt-calendar__header"], ["type", "button", 1, "kpt-calendar__nav"], [1, "kpt-calendar__nav-slot"], [1, "kpt-calendar__title"], [1, "kpt-calendar__weekdays"], [1, "kpt-calendar__weekday"], [1, "kpt-calendar__grid"], ["type", "button", 1, "kpt-calendar__nav", 3, "click"], ["name", "chevron-left"], ["name", "chevron-right"], [1, "kpt-calendar__day", "kpt-calendar__day--blank"], ["type", "button", 1, "kpt-calendar__day", 3, "kpt-calendar__day--muted", "kpt-calendar__day--today", "kpt-calendar__day--range", "kpt-calendar__day--range-start", "kpt-calendar__day--range-end", "kpt-calendar__day--selected"], ["type", "button", 1, "kpt-calendar__day", 3, "click"]], template: function KptDateRange_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 1, 0);
             i0.ɵɵlistener("click", function KptDateRange_Template_div_click_0_listener() { return ctx.toggleOpen(); })("keydown.enter", function KptDateRange_Template_div_keydown_enter_0_listener() { return ctx.toggleOpen(); })("blur", function KptDateRange_Template_div_blur_0_listener() { return ctx.touch.emit(); });
             i0.ɵɵconditionalCreate(2, KptDateRange_Conditional_2_Template, 2, 1, "span", 2)(3, KptDateRange_Conditional_3_Template, 2, 1, "span", 3);
@@ -6200,24 +6531,24 @@ class KptDateRange {
             i0.ɵɵconditionalCreate(5, KptDateRange_Conditional_5_Template, 2, 1, "button", 5);
             i0.ɵɵelement(6, "kpt-icon", 6);
             i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(7, KptDateRange_ng_template_7_Template, 3, 3, "ng-template", 7);
+            i0.ɵɵtemplate(7, KptDateRange_ng_template_7_Template, 3, 7, "ng-template", 7);
             i0.ɵɵlistener("backdropClick", function KptDateRange_Template_ng_template_backdropClick_7_listener() { return ctx.close(); })("detach", function KptDateRange_Template_ng_template_detach_7_listener() { return ctx.close(); });
         } if (rf & 2) {
-            const trigger_r15 = i0.ɵɵreference(1);
+            const trigger_r19 = i0.ɵɵreference(1);
             i0.ɵɵclassProp("kpt-date-range--open", ctx.open())("kpt-date-range--disabled", ctx.disabled())("kpt-date-range--invalid", ctx.showInvalid());
             i0.ɵɵadvance(2);
             i0.ɵɵconditional(ctx.display() ? 2 : 3);
             i0.ɵɵadvance(3);
             i0.ɵɵconditional(ctx.display() ? 5 : -1);
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("cdkConnectedOverlayOrigin", trigger_r15)("cdkConnectedOverlayOpen", ctx.open())("cdkConnectedOverlayPositions", ctx.positions)("cdkConnectedOverlayHasBackdrop", true);
-        } }, dependencies: [CdkOverlayOrigin, CdkConnectedOverlay, KptIcon, KptButton, KptClock], styles: ["@layer kpt.components{.kpt-date-range-host{display:block}.kpt-date-range{display:flex;align-items:center;gap:var(--%NS%kpt-space-2, .5rem);height:2.5rem;padding-inline:var(--%NS%kpt-space-3, .75rem);box-sizing:border-box;border:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-form-field-border);border-radius:var(--%NS%kpt-form-field-radius, .5rem);background:var(--%NS%kpt-form-field-bg);color:var(--%NS%kpt-form-field-text);font-size:var(--%NS%kpt-font-size-sm, .875rem);cursor:pointer}.kpt-date-range:hover:not(.kpt-date-range--disabled){border-color:var(--%NS%kpt-form-field-border-hover)}.kpt-date-range:focus-visible,.kpt-date-range.kpt-date-range--open{outline:none;border-color:var(--%NS%kpt-form-field-border-focus);box-shadow:0 0 0 2px color-mix(in oklch,var(--%NS%kpt-form-field-border-focus) 30%,transparent)}.kpt-date-range.kpt-date-range--invalid{border-color:var(--%NS%kpt-form-field-border-error)}.kpt-date-range.kpt-date-range--disabled{cursor:not-allowed;opacity:.6;background:var(--%NS%kpt-color-surface-variant)}.kpt-date-range__placeholder{color:var(--%NS%kpt-form-field-placeholder)}.kpt-date-range__spacer{flex:1}.kpt-date-range__icon{color:var(--%NS%kpt-color-on-surface-muted)}.kpt-date-range__clear{display:inline-flex;border:0;background:none;cursor:pointer;padding:0;color:var(--%NS%kpt-color-on-surface-muted)}.kpt-date-range__clear:hover{color:var(--%NS%kpt-color-on-surface)}.kpt-calendar{width:17rem;padding:var(--%NS%kpt-space-3, .75rem);background:var(--%NS%kpt-color-surface-raised);border:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border);border-radius:var(--%NS%kpt-radius-md, .5rem);box-shadow:var(--%NS%kpt-elevation-3);color:var(--%NS%kpt-color-on-surface);font-size:var(--%NS%kpt-font-size-sm, .875rem)}.kpt-calendar__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--%NS%kpt-space-2, .5rem)}.kpt-calendar__title{font-weight:var(--%NS%kpt-font-weight-semibold, 600);text-transform:capitalize}.kpt-calendar__nav{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:0;border-radius:var(--%NS%kpt-radius-md, .5rem);background:none;color:var(--%NS%kpt-color-on-surface);cursor:pointer}.kpt-calendar__nav:hover{background:var(--%NS%kpt-color-muted)}.kpt-calendar__weekdays,.kpt-calendar__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.kpt-calendar__weekday{text-align:center;font-size:var(--%NS%kpt-font-size-xs, .75rem);color:var(--%NS%kpt-color-on-surface-muted);padding:.25rem 0}.kpt-calendar__day{aspect-ratio:1;border:0;border-radius:var(--%NS%kpt-radius-sm, .25rem);background:none;color:var(--%NS%kpt-color-on-surface);cursor:pointer;font:inherit}.kpt-calendar__day:hover:not(:disabled){background:var(--%NS%kpt-color-muted)}.kpt-calendar__day--muted{color:var(--%NS%kpt-color-on-surface-muted);opacity:.5}.kpt-calendar__day--range{background:color-mix(in oklch,var(--%NS%kpt-color-primary) 14%,transparent);border-radius:0}.kpt-calendar__day--selected{background:var(--%NS%kpt-color-primary)!important;color:var(--%NS%kpt-color-on-primary)}.kpt-calendar__footer{display:flex;justify-content:flex-end;margin-top:var(--%NS%kpt-space-3, .75rem)}.kpt-calendar--clock{width:16rem}.kpt-range-tabs{display:flex;gap:var(--%NS%kpt-space-1, .25rem);margin-block:var(--%NS%kpt-space-3, .75rem) var(--%NS%kpt-space-2, .5rem);padding:2px;background:var(--%NS%kpt-color-surface-variant);border-radius:var(--%NS%kpt-radius-md, .5rem)}.kpt-range-tabs button{flex:1;border:0;background:none;padding:var(--%NS%kpt-space-1, .25rem) var(--%NS%kpt-space-2, .5rem);border-radius:var(--%NS%kpt-radius-sm, .25rem);color:var(--%NS%kpt-color-on-surface-muted);font:inherit;font-size:var(--%NS%kpt-font-size-sm, .875rem);cursor:pointer}.kpt-range-tabs button.is-active{background:var(--%NS%kpt-color-surface-raised);color:var(--%NS%kpt-color-on-surface);font-weight:var(--%NS%kpt-font-weight-medium, 500);box-shadow:var(--%NS%kpt-elevation-1)}}\n"], encapsulation: 2 }); }
+            i0.ɵɵproperty("cdkConnectedOverlayOrigin", trigger_r19)("cdkConnectedOverlayOpen", ctx.open())("cdkConnectedOverlayPositions", ctx.positions)("cdkConnectedOverlayHasBackdrop", true);
+        } }, dependencies: [CdkOverlayOrigin, CdkConnectedOverlay, KptIcon, KptButton, KptClock], styles: ["@charset \"UTF-8\";@layer kpt.components{.kpt-date-range-host{display:block}.kpt-date-range{display:flex;align-items:center;gap:var(--%NS%kpt-space-2, .5rem);height:2.5rem;padding-inline:var(--%NS%kpt-space-3, .75rem);box-sizing:border-box;border:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-form-field-border);border-radius:var(--%NS%kpt-form-field-radius, .5rem);background:var(--%NS%kpt-form-field-bg);color:var(--%NS%kpt-form-field-text);font-size:var(--%NS%kpt-font-size-sm, .875rem);cursor:pointer}.kpt-date-range:hover:not(.kpt-date-range--disabled){border-color:var(--%NS%kpt-form-field-border-hover)}.kpt-date-range:focus-visible,.kpt-date-range.kpt-date-range--open{outline:none;border-color:var(--%NS%kpt-form-field-border-focus);box-shadow:0 0 0 2px color-mix(in oklch,var(--%NS%kpt-form-field-border-focus) 30%,transparent)}.kpt-date-range.kpt-date-range--invalid{border-color:var(--%NS%kpt-form-field-border-error)}.kpt-date-range.kpt-date-range--disabled{cursor:not-allowed;opacity:.6;background:var(--%NS%kpt-color-surface-variant)}.kpt-date-range__placeholder{color:var(--%NS%kpt-form-field-placeholder)}.kpt-date-range__spacer{flex:1}.kpt-date-range__icon{color:var(--%NS%kpt-color-on-surface-muted)}.kpt-date-range__clear{display:inline-flex;border:0;background:none;cursor:pointer;padding:0;color:var(--%NS%kpt-color-on-surface-muted)}.kpt-date-range__clear:hover{color:var(--%NS%kpt-color-on-surface)}.kpt-calendar{width:17rem;padding:var(--%NS%kpt-space-3, .75rem);background:var(--%NS%kpt-color-surface-raised);border:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border);border-radius:var(--%NS%kpt-radius-md, .5rem);box-shadow:var(--%NS%kpt-elevation-3);color:var(--%NS%kpt-color-on-surface);font-size:var(--%NS%kpt-font-size-sm, .875rem)}.kpt-calendar__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--%NS%kpt-space-2, .5rem)}.kpt-calendar__title{font-weight:var(--%NS%kpt-font-weight-semibold, 600);text-transform:capitalize}.kpt-calendar__nav{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:0;border-radius:var(--%NS%kpt-radius-md, .5rem);background:none;color:var(--%NS%kpt-color-on-surface);cursor:pointer}.kpt-calendar__nav:hover{background:var(--%NS%kpt-color-muted)}.kpt-calendar__nav-slot{width:2rem;height:2rem}.kpt-calendar__panels{display:flex;flex-wrap:wrap;gap:var(--%NS%kpt-space-4, 1rem)}.kpt-calendar__panel{flex:none;width:15.5rem}.kpt-calendar__weekdays,.kpt-calendar__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.kpt-calendar__weekday{text-align:center;font-size:var(--%NS%kpt-font-size-xs, .75rem);color:var(--%NS%kpt-color-on-surface-muted);padding:.25rem 0}.kpt-calendar__day{position:relative;isolation:isolate;aspect-ratio:1;border:0;border-radius:var(--%NS%kpt-radius-sm, .25rem);background:none;color:var(--%NS%kpt-color-on-surface);cursor:pointer;font:inherit}.kpt-calendar__day:hover:not(:disabled){background:var(--%NS%kpt-color-muted)}.kpt-calendar__day--muted{color:var(--%NS%kpt-color-on-surface-muted);opacity:.5}.kpt-calendar__day--blank{cursor:default;pointer-events:none}.kpt-calendar__day--today{box-shadow:inset 0 0 0 1px var(--%NS%kpt-color-border-strong)}.kpt-calendar__day--selected{background:var(--%NS%kpt-color-primary)!important;color:var(--%NS%kpt-color-on-primary)}.kpt-calendar__footer{display:flex;justify-content:flex-end;margin-top:var(--%NS%kpt-space-3, .75rem)}.kpt-calendar--clock{width:16rem}.kpt-calendar--multi{width:auto;max-width:calc(100vw - 2rem)}.kpt-calendar--range .kpt-calendar__day--%NS%range:before,.kpt-calendar--range .kpt-calendar__day--%NS%range-start:before,.kpt-calendar--range .kpt-calendar__day--%NS%range-end:before{content:\"\";position:absolute;inset-block:0;inset-inline:-1px;z-index:-2;background:color-mix(in oklch,var(--%NS%kpt-color-primary) 14%,transparent)}.kpt-calendar--range .kpt-calendar__day--%NS%range-start:before{inset-inline-start:50%}.kpt-calendar--range .kpt-calendar__day--%NS%range-end:before{inset-inline-end:50%}.kpt-calendar--range .kpt-calendar__day--selected{background:none!important;color:var(--%NS%kpt-color-on-primary)}.kpt-calendar--range .kpt-calendar__day--%NS%selected:after{content:\"\";position:absolute;inset:0;z-index:-1;border-radius:var(--%NS%kpt-radius-sm, .25rem);background:var(--%NS%kpt-color-primary)}.kpt-calendar--range .kpt-calendar__grid>.kpt-calendar__day:nth-child(7n+1):before{border-start-start-radius:var(--%NS%kpt-radius-sm, .25rem);border-end-start-radius:var(--%NS%kpt-radius-sm, .25rem)}.kpt-calendar--range .kpt-calendar__grid>.kpt-calendar__day:nth-child(7n):before{border-start-end-radius:var(--%NS%kpt-radius-sm, .25rem);border-end-end-radius:var(--%NS%kpt-radius-sm, .25rem)}.kpt-range-tabs{display:flex;gap:var(--%NS%kpt-space-1, .25rem);margin-block:var(--%NS%kpt-space-3, .75rem) var(--%NS%kpt-space-2, .5rem);padding:2px;background:var(--%NS%kpt-color-surface-variant);border-radius:var(--%NS%kpt-radius-md, .5rem)}.kpt-range-tabs button{flex:1;border:0;background:none;padding:var(--%NS%kpt-space-1, .25rem) var(--%NS%kpt-space-2, .5rem);border-radius:var(--%NS%kpt-radius-sm, .25rem);color:var(--%NS%kpt-color-on-surface-muted);font:inherit;font-size:var(--%NS%kpt-font-size-sm, .875rem);cursor:pointer}.kpt-range-tabs button.is-active{background:var(--%NS%kpt-color-surface-raised);color:var(--%NS%kpt-color-on-surface);font-weight:var(--%NS%kpt-font-weight-medium, 500);box-shadow:var(--%NS%kpt-elevation-1)}}\n"], encapsulation: 2 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(KptDateRange, [{
         type: Component,
-        args: [{ selector: 'kpt-date-range', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [CdkOverlayOrigin, CdkConnectedOverlay, KptIcon, KptButton, KptClock], host: { class: 'kpt-date-range-host' }, template: "<div\n  class=\"kpt-date-range\"\n  cdkOverlayOrigin\n  #trigger=\"cdkOverlayOrigin\"\n  role=\"button\"\n  tabindex=\"0\"\n  [class.kpt-date-range--open]=\"open()\"\n  [class.kpt-date-range--disabled]=\"disabled()\"\n  [class.kpt-date-range--invalid]=\"showInvalid()\"\n  (click)=\"toggleOpen()\"\n  (keydown.enter)=\"toggleOpen()\"\n  (blur)=\"touch.emit()\"\n>\n  @if (display()) {\n    <span class=\"kpt-date-range__value\">{{ display() }}</span>\n  } @else {\n    <span class=\"kpt-date-range__placeholder\">{{ effectivePlaceholder() }}</span>\n  }\n  <span class=\"kpt-date-range__spacer\"></span>\n  @if (display()) {\n    <button type=\"button\" class=\"kpt-date-range__clear\" (click)=\"clear($event)\" [attr.aria-label]=\"i18n.t('common.clear')\"><kpt-icon name=\"x\" /></button>\n  }\n  <kpt-icon class=\"kpt-date-range__icon\" name=\"calendar\" />\n</div>\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"open()\"\n  [cdkConnectedOverlayPositions]=\"positions\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  (backdropClick)=\"close()\"\n  (detach)=\"close()\"\n>\n  <div class=\"kpt-calendar\" [class.kpt-calendar--clock]=\"mode() === 'time'\" (keydown.escape)=\"close()\">\n    @if (mode() === 'time') {\n      <div class=\"kpt-range-tabs\">\n        <button type=\"button\" [class.is-active]=\"timeEnd() === 'start'\" (click)=\"timeEnd.set('start')\">{{ i18n.t('dateRange.from') }}</button>\n        <button type=\"button\" [class.is-active]=\"timeEnd() === 'end'\" (click)=\"timeEnd.set('end')\">{{ i18n.t('dateRange.to') }}</button>\n      </div>\n      @if (timeEnd() === 'start') {\n        <kpt-clock [value]=\"startTime()\" (valueChange)=\"startTime.set($event)\" [hourFormat]=\"hourFormat()\" [minuteStep]=\"minuteStep()\" />\n      } @else {\n        <kpt-clock [value]=\"endTime()\" (valueChange)=\"endTime.set($event)\" [hourFormat]=\"hourFormat()\" [minuteStep]=\"minuteStep()\" />\n      }\n      <div class=\"kpt-calendar__footer\">\n        <kpt-button size=\"sm\" (click)=\"commit()\">{{ i18n.t('common.done') }}</kpt-button>\n      </div>\n    } @else {\n      <div class=\"kpt-calendar__header\">\n        <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"prevMonth()\" [attr.aria-label]=\"i18n.t('datepicker.prevMonth')\"><kpt-icon name=\"chevron-left\" /></button>\n        <span class=\"kpt-calendar__title\">{{ monthLabel() }}</span>\n        <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"nextMonth()\" [attr.aria-label]=\"i18n.t('datepicker.nextMonth')\"><kpt-icon name=\"chevron-right\" /></button>\n      </div>\n      <div class=\"kpt-calendar__weekdays\">\n        @for (wd of weekdays(); track wd) {\n          <span class=\"kpt-calendar__weekday\">{{ wd }}</span>\n        }\n      </div>\n      <div class=\"kpt-calendar__grid\">\n        @for (week of weeks(); track $index) {\n          @for (cell of week; track cell.iso) {\n            <button\n              type=\"button\"\n              class=\"kpt-calendar__day\"\n              [class.kpt-calendar__day--muted]=\"!cell.inMonth\"\n              [class.kpt-calendar__day--range]=\"cell.inRange\"\n              [class.kpt-calendar__day--selected]=\"cell.isStart || cell.isEnd\"\n              (click)=\"selectDay(cell)\"\n            >{{ cell.day }}</button>\n          }\n        }\n      </div>\n\n      @if (mode() === 'datetime') {\n        <div class=\"kpt-range-tabs\">\n          <button type=\"button\" [class.is-active]=\"timeEnd() === 'start'\" (click)=\"timeEnd.set('start')\">{{ i18n.t('dateRange.fromTime') }}</button>\n          <button type=\"button\" [class.is-active]=\"timeEnd() === 'end'\" (click)=\"timeEnd.set('end')\">{{ i18n.t('dateRange.toTime') }}</button>\n        </div>\n        @if (timeEnd() === 'start') {\n          <kpt-clock [value]=\"startTime()\" (valueChange)=\"startTime.set($event)\" [hourFormat]=\"hourFormat()\" [minuteStep]=\"minuteStep()\" />\n        } @else {\n          <kpt-clock [value]=\"endTime()\" (valueChange)=\"endTime.set($event)\" [hourFormat]=\"hourFormat()\" [minuteStep]=\"minuteStep()\" />\n        }\n        <div class=\"kpt-calendar__footer\">\n          <kpt-button size=\"sm\" (click)=\"commit()\">{{ i18n.t('common.done') }}</kpt-button>\n        </div>\n      }\n    }\n  </div>\n</ng-template>\n", styles: ["@layer kpt.components{.kpt-date-range-host{display:block}.kpt-date-range{display:flex;align-items:center;gap:var(--kpt-space-2, .5rem);height:2.5rem;padding-inline:var(--kpt-space-3, .75rem);box-sizing:border-box;border:var(--kpt-border-width-thin, 1px) solid var(--kpt-form-field-border);border-radius:var(--kpt-form-field-radius, .5rem);background:var(--kpt-form-field-bg);color:var(--kpt-form-field-text);font-size:var(--kpt-font-size-sm, .875rem);cursor:pointer}.kpt-date-range:hover:not(.kpt-date-range--disabled){border-color:var(--kpt-form-field-border-hover)}.kpt-date-range:focus-visible,.kpt-date-range.kpt-date-range--open{outline:none;border-color:var(--kpt-form-field-border-focus);box-shadow:0 0 0 2px color-mix(in oklch,var(--kpt-form-field-border-focus) 30%,transparent)}.kpt-date-range.kpt-date-range--invalid{border-color:var(--kpt-form-field-border-error)}.kpt-date-range.kpt-date-range--disabled{cursor:not-allowed;opacity:.6;background:var(--kpt-color-surface-variant)}.kpt-date-range__placeholder{color:var(--kpt-form-field-placeholder)}.kpt-date-range__spacer{flex:1}.kpt-date-range__icon{color:var(--kpt-color-on-surface-muted)}.kpt-date-range__clear{display:inline-flex;border:0;background:none;cursor:pointer;padding:0;color:var(--kpt-color-on-surface-muted)}.kpt-date-range__clear:hover{color:var(--kpt-color-on-surface)}.kpt-calendar{width:17rem;padding:var(--kpt-space-3, .75rem);background:var(--kpt-color-surface-raised);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);box-shadow:var(--kpt-elevation-3);color:var(--kpt-color-on-surface);font-size:var(--kpt-font-size-sm, .875rem)}.kpt-calendar__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--kpt-space-2, .5rem)}.kpt-calendar__title{font-weight:var(--kpt-font-weight-semibold, 600);text-transform:capitalize}.kpt-calendar__nav{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:0;border-radius:var(--kpt-radius-md, .5rem);background:none;color:var(--kpt-color-on-surface);cursor:pointer}.kpt-calendar__nav:hover{background:var(--kpt-color-muted)}.kpt-calendar__weekdays,.kpt-calendar__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.kpt-calendar__weekday{text-align:center;font-size:var(--kpt-font-size-xs, .75rem);color:var(--kpt-color-on-surface-muted);padding:.25rem 0}.kpt-calendar__day{aspect-ratio:1;border:0;border-radius:var(--kpt-radius-sm, .25rem);background:none;color:var(--kpt-color-on-surface);cursor:pointer;font:inherit}.kpt-calendar__day:hover:not(:disabled){background:var(--kpt-color-muted)}.kpt-calendar__day--muted{color:var(--kpt-color-on-surface-muted);opacity:.5}.kpt-calendar__day--range{background:color-mix(in oklch,var(--kpt-color-primary) 14%,transparent);border-radius:0}.kpt-calendar__day--selected{background:var(--kpt-color-primary)!important;color:var(--kpt-color-on-primary)}.kpt-calendar__footer{display:flex;justify-content:flex-end;margin-top:var(--kpt-space-3, .75rem)}.kpt-calendar--clock{width:16rem}.kpt-range-tabs{display:flex;gap:var(--kpt-space-1, .25rem);margin-block:var(--kpt-space-3, .75rem) var(--kpt-space-2, .5rem);padding:2px;background:var(--kpt-color-surface-variant);border-radius:var(--kpt-radius-md, .5rem)}.kpt-range-tabs button{flex:1;border:0;background:none;padding:var(--kpt-space-1, .25rem) var(--kpt-space-2, .5rem);border-radius:var(--kpt-radius-sm, .25rem);color:var(--kpt-color-on-surface-muted);font:inherit;font-size:var(--kpt-font-size-sm, .875rem);cursor:pointer}.kpt-range-tabs button.is-active{background:var(--kpt-color-surface-raised);color:var(--kpt-color-on-surface);font-weight:var(--kpt-font-weight-medium, 500);box-shadow:var(--kpt-elevation-1)}}\n"] }]
-    }], null, { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], displayFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayFormat", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], hourFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "hourFormat", required: false }] }], minuteStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteStep", required: false }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptDateRange, { className: "KptDateRange", filePath: "lib/date-range/date-range.component.ts", lineNumber: 63 }); })();
+        args: [{ selector: 'kpt-date-range', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [CdkOverlayOrigin, CdkConnectedOverlay, KptIcon, KptButton, KptClock], host: { class: 'kpt-date-range-host' }, template: "<div\n  class=\"kpt-date-range\"\n  cdkOverlayOrigin\n  #trigger=\"cdkOverlayOrigin\"\n  role=\"button\"\n  tabindex=\"0\"\n  [class.kpt-date-range--open]=\"open()\"\n  [class.kpt-date-range--disabled]=\"disabled()\"\n  [class.kpt-date-range--invalid]=\"showInvalid()\"\n  (click)=\"toggleOpen()\"\n  (keydown.enter)=\"toggleOpen()\"\n  (blur)=\"touch.emit()\"\n>\n  @if (display()) {\n    <span class=\"kpt-date-range__value\">{{ display() }}</span>\n  } @else {\n    <span class=\"kpt-date-range__placeholder\">{{ effectivePlaceholder() }}</span>\n  }\n  <span class=\"kpt-date-range__spacer\"></span>\n  @if (display()) {\n    <button type=\"button\" class=\"kpt-date-range__clear\" (click)=\"clear($event)\" [attr.aria-label]=\"i18n.t('common.clear')\"><kpt-icon name=\"x\" /></button>\n  }\n  <kpt-icon class=\"kpt-date-range__icon\" name=\"calendar\" />\n</div>\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"open()\"\n  [cdkConnectedOverlayPositions]=\"positions\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  (backdropClick)=\"close()\"\n  (detach)=\"close()\"\n>\n  <div\n    class=\"kpt-calendar\"\n    [class.kpt-calendar--clock]=\"mode() === 'time'\"\n    [class.kpt-calendar--range]=\"mode() !== 'time'\"\n    [class.kpt-calendar--multi]=\"multi() && mode() !== 'time'\"\n    (keydown.escape)=\"close()\"\n  >\n    @if (mode() === 'time') {\n      <div class=\"kpt-range-tabs\">\n        <button type=\"button\" [class.is-active]=\"timeEnd() === 'start'\" (click)=\"timeEnd.set('start')\">{{ i18n.t('dateRange.from') }}</button>\n        <button type=\"button\" [class.is-active]=\"timeEnd() === 'end'\" (click)=\"timeEnd.set('end')\">{{ i18n.t('dateRange.to') }}</button>\n      </div>\n      @if (timeEnd() === 'start') {\n        <kpt-clock [value]=\"startTime()\" (valueChange)=\"startTime.set($event)\" [hourFormat]=\"hourFormat()\" [minuteStep]=\"minuteStep()\" />\n      } @else {\n        <kpt-clock [value]=\"endTime()\" (valueChange)=\"endTime.set($event)\" [hourFormat]=\"hourFormat()\" [minuteStep]=\"minuteStep()\" />\n      }\n      <div class=\"kpt-calendar__footer\">\n        <kpt-button size=\"sm\" (click)=\"commit()\">{{ i18n.t('common.done') }}</kpt-button>\n      </div>\n    } @else {\n      <div class=\"kpt-calendar__panels\">\n        @for (panel of panels(); track panel.key; let first = $first, last = $last) {\n          <div class=\"kpt-calendar__panel\">\n            <!-- Strza\u0142ki tylko na skrajnych panelach; puste sloty trzymaj\u0105 tytu\u0142 na \u015Brodku. -->\n            <div class=\"kpt-calendar__header\">\n              @if (first) {\n                <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"prevMonth()\" [attr.aria-label]=\"i18n.t('datepicker.prevMonth')\"><kpt-icon name=\"chevron-left\" /></button>\n              } @else {\n                <span class=\"kpt-calendar__nav-slot\"></span>\n              }\n              <span class=\"kpt-calendar__title\">{{ panel.label }}</span>\n              @if (last) {\n                <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"nextMonth()\" [attr.aria-label]=\"i18n.t('datepicker.nextMonth')\"><kpt-icon name=\"chevron-right\" /></button>\n              } @else {\n                <span class=\"kpt-calendar__nav-slot\"></span>\n              }\n            </div>\n            <div class=\"kpt-calendar__weekdays\">\n              @for (wd of weekdays(); track wd) {\n                <span class=\"kpt-calendar__weekday\">{{ wd }}</span>\n              }\n            </div>\n            <div class=\"kpt-calendar__grid\">\n              @for (week of panel.weeks; track $index) {\n                @for (cell of week; track cell.iso) {\n                  @if (cell.blank) {\n                    <span class=\"kpt-calendar__day kpt-calendar__day--blank\"></span>\n                  } @else {\n                    <button\n                      type=\"button\"\n                      class=\"kpt-calendar__day\"\n                      [class.kpt-calendar__day--muted]=\"!cell.inMonth\"\n                      [class.kpt-calendar__day--today]=\"cell.today\"\n                      [class.kpt-calendar__day--range]=\"cell.inRange\"\n                      [class.kpt-calendar__day--range-start]=\"cell.rangeStart\"\n                      [class.kpt-calendar__day--range-end]=\"cell.rangeEnd\"\n                      [class.kpt-calendar__day--selected]=\"cell.isStart || cell.isEnd\"\n                      (click)=\"selectDay(cell)\"\n                    >{{ cell.day }}</button>\n                  }\n                }\n              }\n            </div>\n          </div>\n        }\n      </div>\n\n      @if (mode() === 'datetime') {\n        <div class=\"kpt-range-tabs\">\n          <button type=\"button\" [class.is-active]=\"timeEnd() === 'start'\" (click)=\"timeEnd.set('start')\">{{ i18n.t('dateRange.fromTime') }}</button>\n          <button type=\"button\" [class.is-active]=\"timeEnd() === 'end'\" (click)=\"timeEnd.set('end')\">{{ i18n.t('dateRange.toTime') }}</button>\n        </div>\n        @if (timeEnd() === 'start') {\n          <kpt-clock [value]=\"startTime()\" (valueChange)=\"startTime.set($event)\" [hourFormat]=\"hourFormat()\" [minuteStep]=\"minuteStep()\" />\n        } @else {\n          <kpt-clock [value]=\"endTime()\" (valueChange)=\"endTime.set($event)\" [hourFormat]=\"hourFormat()\" [minuteStep]=\"minuteStep()\" />\n        }\n        <div class=\"kpt-calendar__footer\">\n          <kpt-button size=\"sm\" (click)=\"commit()\">{{ i18n.t('common.done') }}</kpt-button>\n        </div>\n      }\n    }\n  </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";@layer kpt.components{.kpt-date-range-host{display:block}.kpt-date-range{display:flex;align-items:center;gap:var(--kpt-space-2, .5rem);height:2.5rem;padding-inline:var(--kpt-space-3, .75rem);box-sizing:border-box;border:var(--kpt-border-width-thin, 1px) solid var(--kpt-form-field-border);border-radius:var(--kpt-form-field-radius, .5rem);background:var(--kpt-form-field-bg);color:var(--kpt-form-field-text);font-size:var(--kpt-font-size-sm, .875rem);cursor:pointer}.kpt-date-range:hover:not(.kpt-date-range--disabled){border-color:var(--kpt-form-field-border-hover)}.kpt-date-range:focus-visible,.kpt-date-range.kpt-date-range--open{outline:none;border-color:var(--kpt-form-field-border-focus);box-shadow:0 0 0 2px color-mix(in oklch,var(--kpt-form-field-border-focus) 30%,transparent)}.kpt-date-range.kpt-date-range--invalid{border-color:var(--kpt-form-field-border-error)}.kpt-date-range.kpt-date-range--disabled{cursor:not-allowed;opacity:.6;background:var(--kpt-color-surface-variant)}.kpt-date-range__placeholder{color:var(--kpt-form-field-placeholder)}.kpt-date-range__spacer{flex:1}.kpt-date-range__icon{color:var(--kpt-color-on-surface-muted)}.kpt-date-range__clear{display:inline-flex;border:0;background:none;cursor:pointer;padding:0;color:var(--kpt-color-on-surface-muted)}.kpt-date-range__clear:hover{color:var(--kpt-color-on-surface)}.kpt-calendar{width:17rem;padding:var(--kpt-space-3, .75rem);background:var(--kpt-color-surface-raised);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);box-shadow:var(--kpt-elevation-3);color:var(--kpt-color-on-surface);font-size:var(--kpt-font-size-sm, .875rem)}.kpt-calendar__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--kpt-space-2, .5rem)}.kpt-calendar__title{font-weight:var(--kpt-font-weight-semibold, 600);text-transform:capitalize}.kpt-calendar__nav{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:0;border-radius:var(--kpt-radius-md, .5rem);background:none;color:var(--kpt-color-on-surface);cursor:pointer}.kpt-calendar__nav:hover{background:var(--kpt-color-muted)}.kpt-calendar__nav-slot{width:2rem;height:2rem}.kpt-calendar__panels{display:flex;flex-wrap:wrap;gap:var(--kpt-space-4, 1rem)}.kpt-calendar__panel{flex:none;width:15.5rem}.kpt-calendar__weekdays,.kpt-calendar__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.kpt-calendar__weekday{text-align:center;font-size:var(--kpt-font-size-xs, .75rem);color:var(--kpt-color-on-surface-muted);padding:.25rem 0}.kpt-calendar__day{position:relative;isolation:isolate;aspect-ratio:1;border:0;border-radius:var(--kpt-radius-sm, .25rem);background:none;color:var(--kpt-color-on-surface);cursor:pointer;font:inherit}.kpt-calendar__day:hover:not(:disabled){background:var(--kpt-color-muted)}.kpt-calendar__day--muted{color:var(--kpt-color-on-surface-muted);opacity:.5}.kpt-calendar__day--blank{cursor:default;pointer-events:none}.kpt-calendar__day--today{box-shadow:inset 0 0 0 1px var(--kpt-color-border-strong)}.kpt-calendar__day--selected{background:var(--kpt-color-primary)!important;color:var(--kpt-color-on-primary)}.kpt-calendar__footer{display:flex;justify-content:flex-end;margin-top:var(--kpt-space-3, .75rem)}.kpt-calendar--clock{width:16rem}.kpt-calendar--multi{width:auto;max-width:calc(100vw - 2rem)}.kpt-calendar--range .kpt-calendar__day--range:before,.kpt-calendar--range .kpt-calendar__day--range-start:before,.kpt-calendar--range .kpt-calendar__day--range-end:before{content:\"\";position:absolute;inset-block:0;inset-inline:-1px;z-index:-2;background:color-mix(in oklch,var(--kpt-color-primary) 14%,transparent)}.kpt-calendar--range .kpt-calendar__day--range-start:before{inset-inline-start:50%}.kpt-calendar--range .kpt-calendar__day--range-end:before{inset-inline-end:50%}.kpt-calendar--range .kpt-calendar__day--selected{background:none!important;color:var(--kpt-color-on-primary)}.kpt-calendar--range .kpt-calendar__day--selected:after{content:\"\";position:absolute;inset:0;z-index:-1;border-radius:var(--kpt-radius-sm, .25rem);background:var(--kpt-color-primary)}.kpt-calendar--range .kpt-calendar__grid>.kpt-calendar__day:nth-child(7n+1):before{border-start-start-radius:var(--kpt-radius-sm, .25rem);border-end-start-radius:var(--kpt-radius-sm, .25rem)}.kpt-calendar--range .kpt-calendar__grid>.kpt-calendar__day:nth-child(7n):before{border-start-end-radius:var(--kpt-radius-sm, .25rem);border-end-end-radius:var(--kpt-radius-sm, .25rem)}.kpt-range-tabs{display:flex;gap:var(--kpt-space-1, .25rem);margin-block:var(--kpt-space-3, .75rem) var(--kpt-space-2, .5rem);padding:2px;background:var(--kpt-color-surface-variant);border-radius:var(--kpt-radius-md, .5rem)}.kpt-range-tabs button{flex:1;border:0;background:none;padding:var(--kpt-space-1, .25rem) var(--kpt-space-2, .5rem);border-radius:var(--kpt-radius-sm, .25rem);color:var(--kpt-color-on-surface-muted);font:inherit;font-size:var(--kpt-font-size-sm, .875rem);cursor:pointer}.kpt-range-tabs button.is-active{background:var(--kpt-color-surface-raised);color:var(--kpt-color-on-surface);font-weight:var(--kpt-font-weight-medium, 500);box-shadow:var(--kpt-elevation-1)}}\n"] }]
+    }], null, { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], displayFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayFormat", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], visibleMonths: [{ type: i0.Input, args: [{ isSignal: true, alias: "visibleMonths", required: false }] }], hourFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "hourFormat", required: false }] }], minuteStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteStep", required: false }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptDateRange, { className: "KptDateRange", filePath: "lib/date-range/date-range.component.ts", lineNumber: 79 }); })();
 
 function KptInputNumber_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
@@ -6246,8 +6577,13 @@ function KptInputNumber_Conditional_3_Template(rf, ctx) { if (rf & 1) {
  * `showButtons="false"` chowa strzałki — wariant do zakresów „od–do", gdzie krokowanie
  * nie ma sensu, a pole ma wyglądać jak zwykłe `kpt-input` obok.
  *
+ * Pod `[formField]` granic NIE bindujemy w szablonie — `[min]`/`[max]` obok `[formField]`
+ * to błąd kompilacji. Deklaruje je schemat (`min(path.qty, 0)`, `max(path.qty, 99)`),
+ * a dyrektywa `FormField` sama wstrzykuje je w wejścia `min`/`max`.
+ *
  * @example
- * <kpt-input-number [formField]="f.qty" [min]="0" [max]="99" [step]="1" />
+ * <kpt-input-number [formField]="f.qty" [step]="1" />
+ * <kpt-input-number [(value)]="qty" [min]="0" [max]="99" suffix=" szt." />
  * <kpt-input-number [formField]="f.priceFrom" [showButtons]="false" suffix=" zł" />
  */
 class KptInputNumber {
@@ -6363,7 +6699,7 @@ class KptInputNumber {
     </div>
   `, host: { class: 'kpt-input-number-host' }, styles: ["@layer kpt.components{.kpt-input-number-host{display:block}.kpt-input-number{display:inline-flex;align-items:stretch;width:100%;height:2.5rem;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);overflow:hidden}.kpt-input-number:focus-within:not(.kpt-input-number--disabled){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-input-number--invalid{border-color:var(--kpt-form-field-border-error)}.kpt-input-number--disabled{opacity:.6;background:var(--kpt-color-surface-variant)}.kpt-input-number--plain .kpt-input-number__input{text-align:left;padding-inline:var(--kpt-space-3, .75rem)}.kpt-input-number__input{flex:1;min-width:0;border:0;background:none;text-align:center;color:var(--kpt-form-field-text);font-size:var(--kpt-font-size-sm, .875rem)}.kpt-input-number__input:focus{outline:none}.kpt-input-number__input::placeholder{color:var(--kpt-form-field-placeholder)}.kpt-input-number__btn{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;border:0;background:var(--kpt-color-muted);color:var(--kpt-color-on-surface);cursor:pointer}.kpt-input-number__btn:hover:not(:disabled){background:var(--kpt-color-surface-variant)}.kpt-input-number__btn:disabled{cursor:not-allowed;opacity:.5}}\n"] }]
     }], null, { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }], showButtons: [{ type: i0.Input, args: [{ isSignal: true, alias: "showButtons", 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(KptInputNumber, { className: "KptInputNumber", filePath: "lib/input-number/input-number.component.ts", lineNumber: 48 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptInputNumber, { className: "KptInputNumber", filePath: "lib/input-number/input-number.component.ts", lineNumber: 53 }); })();
 
 const _c0$s = () => [0, 1, 2, 3];
 function KptPassword_Conditional_4_For_3_Template(rf, ctx) { if (rf & 1) {
@@ -6936,8 +7272,12 @@ const GAP = Math.PI / 4; // przerwa u dołu (kąt „otwarcia" łuku)
 /**
  * Pokrętło (knob) — wybór wartości po łuku, myszką lub strzałkami. Signal Forms.
  *
+ * Pod `[formField]` zakres bierze się ze schematu (`min(path.level, 0)`,
+ * `max(path.level, 100)`) — `[min]`/`[max]` obok `[formField]` to błąd kompilacji.
+ *
  * @example
- * <kpt-knob [formField]="f.level" [min]="0" [max]="100" [step]="1" />
+ * <kpt-knob [formField]="f.level" [step]="1" />
+ * <kpt-knob [(value)]="level" [min]="0" [max]="100" [step]="1" />
  */
 class KptKnob {
     constructor() {
@@ -7089,7 +7429,7 @@ class KptKnob {
     </div>
   `, host: { class: 'kpt-knob-host' }, styles: ["@layer kpt.components{.kpt-knob-host{display:inline-block}.kpt-knob{display:inline-flex;cursor:pointer;touch-action:none;outline:none;border-radius:50%}.kpt-knob:focus-visible{box-shadow:0 0 0 2px color-mix(in oklch,var(--kpt-color-primary) 40%,transparent)}.kpt-knob[aria-disabled=true]{cursor:not-allowed;opacity:.6}.kpt-knob__range{stroke:var(--kpt-color-border)}.kpt-knob__value{stroke:var(--kpt-color-primary);transition:stroke-dashoffset .1s}.kpt-knob__text{fill:var(--kpt-color-on-surface);font-size:var(--kpt-font-size-lg, 1.125rem);font-weight:var(--kpt-font-weight-semibold, 600)}}\n"] }]
     }], null, { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], stroke: [{ type: i0.Input, args: [{ isSignal: true, alias: "stroke", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }], showValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValue", 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(KptKnob, { className: "KptKnob", filePath: "lib/knob/knob.component.ts", lineNumber: 41 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptKnob, { className: "KptKnob", filePath: "lib/knob/knob.component.ts", lineNumber: 45 }); })();
 
 const _c0$r = ["*", [["", "kptCardFooter", ""]]];
 const _c1$a = ["*", "[kptCardFooter]"];
@@ -7900,7 +8240,7 @@ function KptMeterGroup_For_3_Template(rf, ctx) { if (rf & 1) {
     const item_r1 = ctx.$implicit;
     const ɵ$index_5_r2 = ctx.$index;
     const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵstyleProp("width", ctx_r2.percent(item_r1), "%")("background", item_r1.color || ctx_r2.fallback(ɵ$index_5_r2));
+    i0.ɵɵstyleProp("width", ctx_r2.percent(item_r1), "%")("background-color", item_r1.color || ctx_r2.fallback(ɵ$index_5_r2));
     i0.ɵɵattribute("title", item_r1.label);
 } }
 function KptMeterGroup_Conditional_4_For_2_Template(rf, ctx) { if (rf & 1) {
@@ -7917,7 +8257,7 @@ function KptMeterGroup_Conditional_4_For_2_Template(rf, ctx) { if (rf & 1) {
     const ɵ$index_11_r5 = ctx.$index;
     const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵstyleProp("background", item_r4.color || ctx_r2.fallback(ɵ$index_11_r5));
+    i0.ɵɵstyleProp("background-color", item_r4.color || ctx_r2.fallback(ɵ$index_11_r5));
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(item_r4.label);
     i0.ɵɵadvance(2);
@@ -7963,7 +8303,7 @@ class KptMeterGroup {
         return Math.round(n);
     }
     static { this.ɵfac = function KptMeterGroup_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || KptMeterGroup)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptMeterGroup, selectors: [["kpt-meter-group"]], hostAttrs: [1, "kpt-meter-group-host"], inputs: { values: [1, "values"], max: [1, "max"], showLegend: [1, "showLegend"] }, decls: 5, vars: 3, consts: [[1, "kpt-meter-group"], ["role", "meter", 1, "kpt-meter-group__track"], [1, "kpt-meter-group__segment", 3, "width", "background"], [1, "kpt-meter-group__legend"], [1, "kpt-meter-group__segment"], [1, "kpt-meter-group__legend-item"], [1, "kpt-meter-group__dot"], [1, "kpt-meter-group__val"]], template: function KptMeterGroup_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptMeterGroup, selectors: [["kpt-meter-group"]], hostAttrs: [1, "kpt-meter-group-host"], inputs: { values: [1, "values"], max: [1, "max"], showLegend: [1, "showLegend"] }, decls: 5, vars: 3, consts: [[1, "kpt-meter-group"], ["role", "meter", 1, "kpt-meter-group__track"], [1, "kpt-meter-group__segment", 3, "width", "background-color"], [1, "kpt-meter-group__legend"], [1, "kpt-meter-group__segment"], [1, "kpt-meter-group__legend-item"], [1, "kpt-meter-group__dot"], [1, "kpt-meter-group__val"]], template: function KptMeterGroup_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵdomElementStart(0, "div", 0)(1, "div", 1);
             i0.ɵɵrepeaterCreate(2, KptMeterGroup_For_3_Template, 1, 5, "span", 2, i0.ɵɵrepeaterTrackByIndex);
             i0.ɵɵdomElementEnd();
@@ -7987,7 +8327,7 @@ class KptMeterGroup {
           <span
             class="kpt-meter-group__segment"
             [style.width.%]="percent(item)"
-            [style.background]="item.color || fallback(i)"
+            [style.background-color]="item.color || fallback(i)"
             [attr.title]="item.label"
           ></span>
         }
@@ -7996,7 +8336,7 @@ class KptMeterGroup {
         <ul class="kpt-meter-group__legend">
           @for (item of values(); track $index; let i = $index) {
             <li class="kpt-meter-group__legend-item">
-              <span class="kpt-meter-group__dot" [style.background]="item.color || fallback(i)"></span>
+              <span class="kpt-meter-group__dot" [style.background-color]="item.color || fallback(i)"></span>
               <span>{{ item.label }}</span>
               <span class="kpt-meter-group__val">{{ round(percent(item)) }}%</span>
             </li>
@@ -8852,6 +9192,68 @@ class KptCellDef {
             }]
     }], null, { kptCell: [{ type: i0.Input, args: [{ isSignal: true, alias: "kptCell", required: true }] }] }); })();
 
+/**
+ * Własny szablon edytora komórki dla kolumny `kpt-data-table` (gdy wbudowane typy
+ * `KptColumnEdit.type` nie wystarczają). Kontekst: `$implicit` = bieżąca wartość edycji,
+ * `row` = wiersz, `commit(value)` = zatwierdź wartość i zamknij edytor, `cancel()` = odrzuć.
+ *
+ * @example
+ * <kpt-data-table [columns]="cols" [data]="rows">
+ *   <ng-template kptCellEdit="team" let-value let-commit="commit">
+ *     <my-custom-picker [value]="value" (valueChange)="commit($event)" />
+ *   </ng-template>
+ * </kpt-data-table>
+ */
+class KptCellEditDef {
+    constructor() {
+        /** Nazwa pola kolumny, dla której obowiązuje szablon edytora. */
+        this.kptCellEdit = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "kptCellEdit" }] : /* istanbul ignore next */ []));
+        this.template = inject(TemplateRef);
+    }
+    static { this.ɵfac = function KptCellEditDef_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || KptCellEditDef)(); }; }
+    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: KptCellEditDef, selectors: [["ng-template", "kptCellEdit", ""]], inputs: { kptCellEdit: [1, "kptCellEdit"] } }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(KptCellEditDef, [{
+        type: Directive,
+        args: [{
+                selector: 'ng-template[kptCellEdit]',
+            }]
+    }], null, { kptCellEdit: [{ type: i0.Input, args: [{ isSignal: true, alias: "kptCellEdit", required: true }] }] }); })();
+
+/*
+ * Escapowanie komórek CSV dla `exportCsv()` — pure TS, wydzielone żeby dało się
+ * testować `node --test` bez ciągnięcia Angulara.
+ */
+// Znak startowy, który arkusz kalkulacyjny czyta jako początek formuły (CWE-1236).
+const FORMULA_PREFIX = /^[=+\-@\t\r]/;
+function stringifyCsvValue(value) {
+    switch (typeof value) {
+        case 'undefined':
+            return '';
+        case 'string':
+            return value;
+        case 'number':
+        case 'boolean':
+        case 'bigint':
+            return String(value);
+        default:
+            if (value === null)
+                return '';
+            if (value instanceof Date)
+                return value.toISOString();
+            return JSON.stringify(value);
+    }
+}
+/** Escapuje pojedynczą wartość komórki/nagłówka do bezpiecznego pola CSV (separator `;`). */
+function escapeCsvCell(value) {
+    let text = stringifyCsvValue(value);
+    // Wiodący `'` każe arkuszowi traktować komórkę jako tekst — sam znak nie jest wyświetlany.
+    if (FORMULA_PREFIX.test(text))
+        text = `'${text}`;
+    return /[",\n;]/.test(text) ? `"${text.replaceAll('"', '""')}"` : text;
+}
+
 /**
  * Szablon rozwijanego wiersza (row detail) dla `kpt-data-table`. Renderowany pod
  * wierszem po rozwinięciu. Kontekst: `$implicit` = wiersz. Wymaga `expandable`.
@@ -8879,17 +9281,21 @@ class KptRowDetailDef {
 
 const _c0$e = ["scrollEl"];
 const _c1$5 = ["theadEl"];
-const _c2$2 = a0 => ({ $implicit: a0 });
-const _c3 = (a0, a1) => ({ $implicit: a0, value: a1 });
-const _c4 = a0 => ({ column: a0 });
-const _c5 = () => [];
-const _c6 = () => ({ start: "", end: "" });
+const _c2$2 = ["editorHost"];
+const _c3 = [[["", "kptPaginatorActions", ""]]];
+const _c4 = ["[kptPaginatorActions]"];
+const _c5 = a0 => ({ $implicit: a0 });
+const _c6 = a0 => ({ column: a0 });
+const _c7 = (a0, a1, a2, a3) => ({ $implicit: a0, row: a1, commit: a2, cancel: a3 });
+const _c8 = () => [];
+const _c9 = (a0, a1) => ({ $implicit: a0, value: a1 });
+const _c10 = () => ({ start: "", end: "" });
 const _forTrack0$1 = ($index, $item) => $item.field;
 function _forTrack1($index, $item) { /* @ts-ignore */
 return this.trackRow($item); }
 function KptDataTable_Conditional_0_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "input", 14);
+    i0.ɵɵelementStart(0, "input", 15);
     i0.ɵɵlistener("input", function KptDataTable_Conditional_0_Conditional_1_Template_input_input_0_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onFilter($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -8899,7 +9305,7 @@ function KptDataTable_Conditional_0_Conditional_1_Template(rf, ctx) { if (rf & 1
 } }
 function KptDataTable_Conditional_0_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kpt-button", 15);
+    i0.ɵɵelementStart(0, "kpt-button", 16);
     i0.ɵɵlistener("click", function KptDataTable_Conditional_0_Conditional_2_Template_kpt_button_click_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.exportCsv()); });
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
@@ -8909,9 +9315,9 @@ function KptDataTable_Conditional_0_Conditional_2_Template(rf, ctx) { if (rf & 1
     i0.ɵɵtextInterpolate(ctx_r1.i18n.t("dataTable.exportCsv"));
 } }
 function KptDataTable_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 4);
-    i0.ɵɵconditionalCreate(1, KptDataTable_Conditional_0_Conditional_1_Template, 1, 2, "input", 12);
-    i0.ɵɵconditionalCreate(2, KptDataTable_Conditional_0_Conditional_2_Template, 2, 1, "kpt-button", 13);
+    i0.ɵɵelementStart(0, "div", 5);
+    i0.ɵɵconditionalCreate(1, KptDataTable_Conditional_0_Conditional_1_Template, 1, 2, "input", 13);
+    i0.ɵɵconditionalCreate(2, KptDataTable_Conditional_0_Conditional_2_Template, 2, 1, "kpt-button", 14);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -8921,14 +9327,14 @@ function KptDataTable_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵconditional(ctx_r1.exportable() ? 2 : -1);
 } }
 function KptDataTable_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementContainer(0, 7);
+    i0.ɵɵelementContainer(0, 8);
 } if (rf & 2) {
     i0.ɵɵnextContext();
     const filterRowTpl_r4 = i0.ɵɵreference(22);
     i0.ɵɵproperty("ngTemplateOutlet", filterRowTpl_r4);
 } }
 function KptDataTable_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "th", 16);
+    i0.ɵɵelement(0, "th", 17);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵstyleProp("left", ctx_r1.expanderStickyLeft(), "px");
@@ -8936,7 +9342,7 @@ function KptDataTable_Conditional_8_Template(rf, ctx) { if (rf & 1) {
 } }
 function KptDataTable_Conditional_9_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "th", 17)(1, "input", 18);
+    i0.ɵɵelementStart(0, "th", 18)(1, "input", 19);
     i0.ɵɵlistener("change", function KptDataTable_Conditional_9_Template_input_change_1_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleAllOnPage()); });
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -8948,17 +9354,17 @@ function KptDataTable_Conditional_9_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵattribute("aria-label", ctx_r1.i18n.t("dataTable.selectAll"));
 } }
 function KptDataTable_Conditional_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "th", 17);
+    i0.ɵɵelement(0, "th", 18);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵstyleProp("left", ctx_r1.checkboxStickyLeft(), "px");
     i0.ɵɵclassProp("kpt-data-table__cell--frozen", ctx_r1.hasFrozen());
 } }
 function KptDataTable_For_12_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "kpt-icon", 20);
+    i0.ɵɵelement(0, "kpt-icon", 21);
 } }
 function KptDataTable_For_12_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "kpt-icon", 22);
+    i0.ɵɵelement(0, "kpt-icon", 23);
 } if (rf & 2) {
     const col_r7 = i0.ɵɵnextContext().$implicit;
     const ctx_r1 = i0.ɵɵnextContext();
@@ -8967,20 +9373,19 @@ function KptDataTable_For_12_Conditional_4_Template(rf, ctx) { if (rf & 1) {
 } }
 function KptDataTable_For_12_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "th", 19);
-    i0.ɵɵlistener("click", function KptDataTable_For_12_Template_th_click_0_listener() { const col_r7 = i0.ɵɵrestoreView(_r6).$implicit; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleSort(col_r7)); })("dragstart", function KptDataTable_For_12_Template_th_dragstart_0_listener($event) { const ɵ$index_33_r8 = i0.ɵɵrestoreView(_r6).$index; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onColDragStart(ɵ$index_33_r8, $event)); })("dragover", function KptDataTable_For_12_Template_th_dragover_0_listener($event) { const ɵ$index_33_r8 = i0.ɵɵrestoreView(_r6).$index; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.reorderable() ? ctx_r1.onColDragOver(ɵ$index_33_r8, $event) : null); })("drop", function KptDataTable_For_12_Template_th_drop_0_listener($event) { const ɵ$index_33_r8 = i0.ɵɵrestoreView(_r6).$index; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.reorderable() ? ctx_r1.onColDrop(ɵ$index_33_r8, $event) : null); })("dragend", function KptDataTable_For_12_Template_th_dragend_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onColDragEnd()); });
-    i0.ɵɵconditionalCreate(1, KptDataTable_For_12_Conditional_1_Template, 1, 0, "kpt-icon", 20);
+    i0.ɵɵelementStart(0, "th", 20);
+    i0.ɵɵlistener("click", function KptDataTable_For_12_Template_th_click_0_listener() { const col_r7 = i0.ɵɵrestoreView(_r6).$implicit; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleSort(col_r7)); })("dragstart", function KptDataTable_For_12_Template_th_dragstart_0_listener($event) { const col_r7 = i0.ɵɵrestoreView(_r6).$implicit; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onColDragStart(col_r7.field, $event)); })("dragover", function KptDataTable_For_12_Template_th_dragover_0_listener($event) { const col_r7 = i0.ɵɵrestoreView(_r6).$implicit; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.reorderable() ? ctx_r1.onColDragOver(col_r7.field, $event) : null); })("drop", function KptDataTable_For_12_Template_th_drop_0_listener($event) { const col_r7 = i0.ɵɵrestoreView(_r6).$implicit; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.reorderable() ? ctx_r1.onColDrop(col_r7.field, $event) : null); })("dragend", function KptDataTable_For_12_Template_th_dragend_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onColDragEnd()); });
+    i0.ɵɵconditionalCreate(1, KptDataTable_For_12_Conditional_1_Template, 1, 0, "kpt-icon", 21);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(4, KptDataTable_For_12_Conditional_4_Template, 1, 3, "kpt-icon", 21);
+    i0.ɵɵconditionalCreate(4, KptDataTable_For_12_Conditional_4_Template, 1, 3, "kpt-icon", 22);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const col_r7 = ctx.$implicit;
-    const ɵ$index_33_r8 = ctx.$index;
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵstyleProp("width", col_r7.width)("left", ctx_r1.frozenLeft(col_r7.field), "px");
-    i0.ɵɵclassProp("kpt-data-table__cell--frozen", ctx_r1.isFrozen(col_r7.field))("kpt-data-table__th--sortable", col_r7.sortable)("kpt-data-table__th--draggable", ctx_r1.isColDraggable(col_r7))("kpt-data-table__th--dragover", ctx_r1.dragIndex() !== null && ctx_r1.dragIndex() !== ɵ$index_33_r8 && !col_r7.frozen);
+    i0.ɵɵclassProp("kpt-data-table__cell--frozen", ctx_r1.isFrozen(col_r7.field))("kpt-data-table__th--sortable", col_r7.sortable)("kpt-data-table__th--draggable", ctx_r1.isColDraggable(col_r7))("kpt-data-table__th--dragover", ctx_r1.dragField() !== null && ctx_r1.dragField() !== col_r7.field && !col_r7.frozen);
     i0.ɵɵattribute("draggable", ctx_r1.isColDraggable(col_r7) ? true : null)("data-align", col_r7.align ?? "start")("aria-sort", ctx_r1.ariaSort(col_r7));
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.isColDraggable(col_r7) ? 1 : -1);
@@ -8990,14 +9395,14 @@ function KptDataTable_For_12_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵconditional(col_r7.sortable ? 4 : -1);
 } }
 function KptDataTable_Conditional_13_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementContainer(0, 7);
+    i0.ɵɵelementContainer(0, 8);
 } if (rf & 2) {
     i0.ɵɵnextContext();
     const filterRowTpl_r4 = i0.ɵɵreference(22);
     i0.ɵɵproperty("ngTemplateOutlet", filterRowTpl_r4);
 } }
 function KptDataTable_Conditional_15_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "tr")(1, "td", 23);
+    i0.ɵɵelementStart(0, "tr")(1, "td", 24);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -9008,7 +9413,7 @@ function KptDataTable_Conditional_15_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtextInterpolate(ctx_r1.i18n.t("dataTable.loading"));
 } }
 function KptDataTable_Conditional_16_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "tr")(1, "td", 23);
+    i0.ɵɵelementStart(0, "tr")(1, "td", 24);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -9019,7 +9424,7 @@ function KptDataTable_Conditional_16_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtextInterpolate(ctx_r1.emptyText());
 } }
 function KptDataTable_Conditional_17_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "tr", 24);
+    i0.ɵɵelementStart(0, "tr", 25);
     i0.ɵɵelement(1, "td");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -9029,15 +9434,15 @@ function KptDataTable_Conditional_17_Conditional_0_Template(rf, ctx) { if (rf &
     i0.ɵɵattribute("colspan", ctx_r1.colspan());
 } }
 function KptDataTable_Conditional_17_For_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementContainer(0, 25);
+    i0.ɵɵelementContainer(0, 26);
 } if (rf & 2) {
-    const row_r9 = ctx.$implicit;
+    const row_r8 = ctx.$implicit;
     i0.ɵɵnextContext(2);
-    const rowTpl_r10 = i0.ɵɵreference(20);
-    i0.ɵɵproperty("ngTemplateOutlet", rowTpl_r10)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c2$2, row_r9));
+    const rowTpl_r9 = i0.ɵɵreference(20);
+    i0.ɵɵproperty("ngTemplateOutlet", rowTpl_r9)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c5, row_r8));
 } }
 function KptDataTable_Conditional_17_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "tr", 24);
+    i0.ɵɵelementStart(0, "tr", 25);
     i0.ɵɵelement(1, "td");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -9047,9 +9452,9 @@ function KptDataTable_Conditional_17_Conditional_3_Template(rf, ctx) { if (rf &
     i0.ɵɵattribute("colspan", ctx_r1.colspan());
 } }
 function KptDataTable_Conditional_17_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, KptDataTable_Conditional_17_Conditional_0_Template, 2, 3, "tr", 24);
-    i0.ɵɵrepeaterCreate(1, KptDataTable_Conditional_17_For_2_Template, 1, 4, "ng-container", 25, _forTrack1, true);
-    i0.ɵɵconditionalCreate(3, KptDataTable_Conditional_17_Conditional_3_Template, 2, 3, "tr", 24);
+    i0.ɵɵconditionalCreate(0, KptDataTable_Conditional_17_Conditional_0_Template, 2, 3, "tr", 25);
+    i0.ɵɵrepeaterCreate(1, KptDataTable_Conditional_17_For_2_Template, 1, 4, "ng-container", 26, _forTrack1, true);
+    i0.ɵɵconditionalCreate(3, KptDataTable_Conditional_17_Conditional_3_Template, 2, 3, "tr", 25);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵconditional(ctx_r1.topPad() > 0 ? 0 : -1);
@@ -9059,219 +9464,298 @@ function KptDataTable_Conditional_17_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵconditional(ctx_r1.bottomPad() > 0 ? 3 : -1);
 } }
 function KptDataTable_Conditional_18_For_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementContainer(0, 25);
+    i0.ɵɵelementContainer(0, 26);
 } if (rf & 2) {
-    const row_r11 = ctx.$implicit;
+    const row_r10 = ctx.$implicit;
     i0.ɵɵnextContext(2);
-    const rowTpl_r10 = i0.ɵɵreference(20);
-    i0.ɵɵproperty("ngTemplateOutlet", rowTpl_r10)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c2$2, row_r11));
+    const rowTpl_r9 = i0.ɵɵreference(20);
+    i0.ɵɵproperty("ngTemplateOutlet", rowTpl_r9)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c5, row_r10));
 } }
 function KptDataTable_Conditional_18_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵrepeaterCreate(0, KptDataTable_Conditional_18_For_1_Template, 1, 4, "ng-container", 25, _forTrack1, true);
+    i0.ɵɵrepeaterCreate(0, KptDataTable_Conditional_18_For_1_Template, 1, 4, "ng-container", 26, _forTrack1, true);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵrepeater(ctx_r1.paged());
 } }
 function KptDataTable_ng_template_19_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    const _r14 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "td", 16)(1, "button", 29);
-    i0.ɵɵlistener("click", function KptDataTable_ng_template_19_Conditional_1_Template_button_click_1_listener($event) { i0.ɵɵrestoreView(_r14); const row_r13 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(); $event.stopPropagation(); return i0.ɵɵresetView(ctx_r1.toggleExpand(row_r13)); });
-    i0.ɵɵelement(2, "kpt-icon", 30);
+    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);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const row_r13 = i0.ɵɵnextContext().$implicit;
+    const row_r12 = 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_r13));
-    i0.ɵɵattribute("aria-expanded", ctx_r1.isExpanded(row_r13))("aria-label", ctx_r1.i18n.t("dataTable.expandRow"));
+    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"));
 } }
 function KptDataTable_ng_template_19_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    const _r15 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "td", 17)(1, "input", 31);
-    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(_r15); const row_r13 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleRow(row_r13)); });
+    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)); });
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const row_r13 = i0.ɵɵnextContext().$implicit;
+    const row_r12 = 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_r13));
+    i0.ɵɵproperty("checked", ctx_r1.isSelected(row_r12));
     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) {
+    i0.ɵɵelementContainer(0, 26);
+} if (rf & 2) {
+    const row_r12 = 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));
+} }
+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()); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const col_r16 = i0.ɵɵnextContext(3).$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("value", ctx_r1.editingValue() ?? "")("placeholder", col_r16.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()); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const col_r16 = 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);
+} }
+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)); });
+    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)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const col_r16 = 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());
+} }
+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)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const col_r16 = 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());
+} }
+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);
+} 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);
+} }
 function KptDataTable_ng_template_19_For_4_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementContainer(0, 25);
+    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);
+    i0.ɵɵelementEnd();
 } if (rf & 2) {
+    let tmp_18_0;
     const col_r16 = i0.ɵɵnextContext().$implicit;
-    const row_r13 = i0.ɵɵnextContext().$implicit;
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c3, row_r13, ctx_r1.getValue(row_r13, col_r16.field)));
+    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);
 } }
 function KptDataTable_ng_template_19_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 ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("ngTemplateOutlet", ctx)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c9, row_r12, ctx_r1.getValue(row_r12, col_r16.field)));
+} }
+function KptDataTable_ng_template_19_For_4_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0);
 } if (rf & 2) {
     const col_r16 = i0.ɵɵnextContext().$implicit;
-    const row_r13 = i0.ɵɵnextContext().$implicit;
+    const row_r12 = i0.ɵɵnextContext().$implicit;
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.getValue(row_r13, col_r16.field), " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.getValue(row_r12, col_r16.field), " ");
 } }
 function KptDataTable_ng_template_19_For_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "td");
-    i0.ɵɵconditionalCreate(1, KptDataTable_ng_template_19_For_4_Conditional_1_Template, 1, 5, "ng-container", 25)(2, KptDataTable_ng_template_19_For_4_Conditional_2_Template, 1, 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);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    let tmp_19_0;
+    let tmp_22_0;
     const col_r16 = ctx.$implicit;
-    const ctx_r1 = i0.ɵɵnextContext(2);
+    const row_r12 = 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));
-    i0.ɵɵattribute("data-align", col_r16.align ?? "start");
+    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.ɵɵadvance();
-    i0.ɵɵconditional((tmp_19_0 = ctx_r1.cellTemplate(col_r16.field)) ? 1 : 2, tmp_19_0);
+    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);
 } }
 function KptDataTable_ng_template_19_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "tr", 28)(1, "td", 32);
-    i0.ɵɵelementContainer(2, 25);
+    i0.ɵɵelementStart(0, "tr", 29)(1, "td", 46);
+    i0.ɵɵelementContainer(2, 26);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const row_r13 = i0.ɵɵnextContext().$implicit;
+    const row_r12 = 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, _c2$2, row_r13));
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.rowDetailTpl())("ngTemplateOutletContext", i0.ɵɵpureFunction1(3, _c5, row_r12));
 } }
 function KptDataTable_ng_template_19_Template(rf, ctx) { if (rf & 1) {
-    const _r12 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "tr", 26);
-    i0.ɵɵlistener("click", function KptDataTable_ng_template_19_Template_tr_click_0_listener() { const row_r13 = i0.ɵɵrestoreView(_r12).$implicit; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onRowClick(row_r13)); });
-    i0.ɵɵconditionalCreate(1, KptDataTable_ng_template_19_Conditional_1_Template, 3, 8, "td", 8);
-    i0.ɵɵconditionalCreate(2, KptDataTable_ng_template_19_Conditional_2_Template, 2, 6, "td", 9);
-    i0.ɵɵrepeaterCreate(3, KptDataTable_ng_template_19_For_4_Template, 3, 6, "td", 27, _forTrack0$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);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(5, KptDataTable_ng_template_19_Conditional_5_Template, 3, 5, "tr", 28);
+    i0.ɵɵconditionalCreate(5, KptDataTable_ng_template_19_Conditional_5_Template, 3, 5, "tr", 29);
 } if (rf & 2) {
-    const row_r13 = ctx.$implicit;
+    const row_r12 = 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_r13))("kpt-data-table__row--expanded", ctx_r1.hasRowDetail() && ctx_r1.isExpanded(row_r13));
+    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.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.hasRowDetail() ? 1 : -1);
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.selectable() !== "none" ? 2 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵrepeater(ctx_r1.orderedColumns());
+    i0.ɵɵrepeater(ctx_r1.visibleOrderedColumns());
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r1.hasRowDetail() && ctx_r1.isExpanded(row_r13) && !ctx_r1.virtualScroll() ? 5 : -1);
+    i0.ɵɵconditional(ctx_r1.hasRowDetail() && ctx_r1.isExpanded(row_r12) && !ctx_r1.virtualScroll() ? 5 : -1);
 } }
 function KptDataTable_ng_template_21_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "th", 16);
+    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) {
-    i0.ɵɵelement(0, "th", 17);
+    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 _r17 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "input", 41);
-    i0.ɵɵlistener("input", function KptDataTable_ng_template_21_For_4_Case_1_Template_input_input_0_listener($event) { i0.ɵɵrestoreView(_r17); const col_r18 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.setColumnFilter(col_r18.field, $event.target.value)); })("click", function KptDataTable_ng_template_21_For_4_Case_1_Template_input_click_0_listener($event) { return $event.stopPropagation(); });
+    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(); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const col_r18 = i0.ɵɵnextContext().$implicit;
+    const col_r24 = i0.ɵɵnextContext().$implicit;
     const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("value", ctx_r1.columnFilters()[col_r18.field] || "");
-    i0.ɵɵattribute("placeholder", col_r18.filter.placeholder || "")("aria-label", ctx_r1.i18n.t("dataTable.filter", i0.ɵɵpureFunction1(3, _c4, col_r18.header)));
+    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)));
 } }
 function KptDataTable_ng_template_21_For_4_Case_2_Template(rf, ctx) { if (rf & 1) {
-    const _r19 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "input", 42);
-    i0.ɵɵlistener("input", function KptDataTable_ng_template_21_For_4_Case_2_Template_input_input_0_listener($event) { i0.ɵɵrestoreView(_r19); const col_r18 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onNumberFilter(col_r18.field, $event)); })("click", function KptDataTable_ng_template_21_For_4_Case_2_Template_input_click_0_listener($event) { return $event.stopPropagation(); });
+    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(); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const col_r18 = i0.ɵɵnextContext().$implicit;
+    const col_r24 = i0.ɵɵnextContext().$implicit;
     const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("value", ctx_r1.columnFilters()[col_r18.field] || "");
-    i0.ɵɵattribute("placeholder", col_r18.filter.placeholder || "")("aria-label", ctx_r1.i18n.t("dataTable.filter", i0.ɵɵpureFunction1(3, _c4, col_r18.header)));
+    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)));
 } }
 function KptDataTable_ng_template_21_For_4_Case_3_Template(rf, ctx) { if (rf & 1) {
-    const _r20 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kpt-select", 43);
-    i0.ɵɵlistener("valueChange", function KptDataTable_ng_template_21_For_4_Case_3_Template_kpt_select_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r20); const col_r18 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.setColumnFilter(col_r18.field, $event)); });
+    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)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const col_r18 = i0.ɵɵnextContext().$implicit;
+    const col_r24 = i0.ɵɵnextContext().$implicit;
     const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("options", col_r18.filter.options || i0.ɵɵpureFunction0(4, _c5))("multiple", !!col_r18.filter.multiple)("placeholder", col_r18.filter.placeholder || ctx_r1.i18n.t("dataTable.all"))("value", ctx_r1.columnFilters()[col_r18.field] ?? null);
+    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);
 } }
 function KptDataTable_ng_template_21_For_4_Case_4_Template(rf, ctx) { if (rf & 1) {
-    const _r21 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 38)(1, "input", 42);
-    i0.ɵɵlistener("input", function KptDataTable_ng_template_21_For_4_Case_4_Template_input_input_1_listener($event) { i0.ɵɵrestoreView(_r21); const col_r18 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.setRangeFilter(col_r18.field, "min", $event)); })("click", function KptDataTable_ng_template_21_For_4_Case_4_Template_input_click_1_listener($event) { return $event.stopPropagation(); });
+    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(); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(2, "input", 42);
-    i0.ɵɵlistener("input", function KptDataTable_ng_template_21_For_4_Case_4_Template_input_input_2_listener($event) { i0.ɵɵrestoreView(_r21); const col_r18 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.setRangeFilter(col_r18.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", 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.ɵɵelementEnd()();
 } if (rf & 2) {
-    const col_r18 = i0.ɵɵnextContext().$implicit;
+    const col_r24 = i0.ɵɵnextContext().$implicit;
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("value", ctx_r1.rangeVal(col_r18.field).min);
-    i0.ɵɵattribute("placeholder", ctx_r1.i18n.t("dataTable.min"))("aria-label", ctx_r1.i18n.t("dataTable.filterMin", i0.ɵɵpureFunction1(6, _c4, col_r18.header)));
+    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.ɵɵadvance();
-    i0.ɵɵproperty("value", ctx_r1.rangeVal(col_r18.field).max);
-    i0.ɵɵattribute("placeholder", ctx_r1.i18n.t("dataTable.max"))("aria-label", ctx_r1.i18n.t("dataTable.filterMax", i0.ɵɵpureFunction1(8, _c4, col_r18.header)));
+    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)));
 } }
 function KptDataTable_ng_template_21_For_4_Case_5_Template(rf, ctx) { if (rf & 1) {
-    const _r22 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 44);
+    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", 45);
-    i0.ɵɵlistener("valueChange", function KptDataTable_ng_template_21_For_4_Case_5_Template_kpt_slider_valueChange_1_listener($event) { i0.ɵɵrestoreView(_r22); const col_r18 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.setColumnFilter(col_r18.field, $event)); });
+    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)); });
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const col_r18 = i0.ɵɵnextContext().$implicit;
+    const col_r24 = i0.ɵɵnextContext().$implicit;
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("min", col_r18.filter.min ?? 0)("max", col_r18.filter.max ?? 100)("step", col_r18.filter.step ?? 1)("value", ctx_r1.sliderVal(col_r18));
+    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));
 } }
 function KptDataTable_ng_template_21_For_4_Case_6_Template(rf, ctx) { if (rf & 1) {
-    const _r23 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kpt-date-range", 46);
-    i0.ɵɵlistener("valueChange", function KptDataTable_ng_template_21_For_4_Case_6_Template_kpt_date_range_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r23); const col_r18 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.setColumnFilter(col_r18.field, $event)); });
+    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)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const col_r18 = i0.ɵɵnextContext().$implicit;
+    const col_r24 = i0.ɵɵnextContext().$implicit;
     const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("placeholder", col_r18.filter.placeholder || ctx_r1.i18n.t("dataTable.dateRange"))("value", ctx_r1.columnFilters()[col_r18.field] || i0.ɵɵpureFunction0(2, _c6));
+    i0.ɵɵproperty("placeholder", col_r24.filter.placeholder || ctx_r1.i18n.t("dataTable.dateRange"))("value", ctx_r1.columnFilters()[col_r24.field] || i0.ɵɵpureFunction0(2, _c10));
 } }
 function KptDataTable_ng_template_21_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", 35)(2, KptDataTable_ng_template_21_For_4_Case_2_Template, 1, 5, "input", 36)(3, KptDataTable_ng_template_21_For_4_Case_3_Template, 1, 5, "kpt-select", 37)(4, KptDataTable_ng_template_21_For_4_Case_4_Template, 3, 10, "div", 38)(5, KptDataTable_ng_template_21_For_4_Case_5_Template, 2, 4, "div", 39)(6, KptDataTable_ng_template_21_For_4_Case_6_Template, 1, 3, "kpt-date-range", 40);
+    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.ɵɵelementEnd();
 } if (rf & 2) {
     let tmp_19_0;
-    const col_r18 = ctx.$implicit;
+    const col_r24 = ctx.$implicit;
     const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵstyleProp("width", col_r18.width)("left", ctx_r1.frozenLeft(col_r18.field), "px");
-    i0.ɵɵclassProp("kpt-data-table__cell--frozen", ctx_r1.isFrozen(col_r18.field));
-    i0.ɵɵattribute("data-align", col_r18.align ?? "start");
+    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.ɵɵadvance();
-    i0.ɵɵconditional((tmp_19_0 = col_r18.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_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);
 } }
 function KptDataTable_ng_template_21_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "tr", 33);
-    i0.ɵɵconditionalCreate(1, KptDataTable_ng_template_21_Conditional_1_Template, 1, 4, "th", 8);
-    i0.ɵɵconditionalCreate(2, KptDataTable_ng_template_21_Conditional_2_Template, 1, 4, "th", 9);
-    i0.ɵɵrepeaterCreate(3, KptDataTable_ng_template_21_For_4_Template, 7, 8, "th", 34, _forTrack0$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);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -9280,20 +9764,34 @@ function KptDataTable_ng_template_21_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.selectable() !== "none" ? 2 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵrepeater(ctx_r1.orderedColumns());
+    i0.ɵɵrepeater(ctx_r1.visibleOrderedColumns());
 } }
 function KptDataTable_Conditional_23_Template(rf, ctx) { if (rf & 1) {
-    const _r24 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kpt-paginator", 47);
-    i0.ɵɵlistener("pageIndexChange", function KptDataTable_Conditional_23_Template_kpt_paginator_pageIndexChange_0_listener($event) { i0.ɵɵrestoreView(_r24); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.pageIndex.set($event)); })("pageSizeChange", function KptDataTable_Conditional_23_Template_kpt_paginator_pageSizeChange_0_listener($event) { i0.ɵɵrestoreView(_r24); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.pageSizeState.set($event)); });
-    i0.ɵɵelementEnd();
+    const _r30 = 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.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(2);
     i0.ɵɵproperty("length", ctx_r1.filteredCount())("pageIndex", ctx_r1.pageIndex())("pageSize", ctx_r1.pageSizeState())("pageSizeOptions", ctx_r1.pageSizeOptions());
 } }
 const REM_PX = 16;
 const CHECKBOX_FROZEN_W = 3; // rem
 const EXPANDER_FROZEN_W = 2.5; // rem
+/** Edytory renderujące panel w CDK Overlay — otwierane od razu i zatwierdzane na zamknięciu panelu. */
+const OVERLAY_EDITORS = ['date', 'select', 'multiselect'];
+/** Tablice (multiselect) porównujemy po zawartości, resztę po referencji. */
+function sameEditValue(a, b) {
+    if (a === b)
+        return true;
+    if (Array.isArray(a) && Array.isArray(b)) {
+        return a.length === b.length && a.every((v, i) => v === b[i]);
+    }
+    return false;
+}
 /**
  * Flagowa tabela danych Koncept UI: kolumny konfiguracją, sortowanie,
  * filtr globalny, paginacja, zaznaczanie wierszy i własne szablony komórek (`kptCell`).
@@ -9362,9 +9860,18 @@ class KptDataTable {
         /** Rozwinięte wiersze (dwukierunkowo). */
         this.expandedRows = model([], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "expandedRows" }] : /* istanbul ignore next */ []));
+        /**
+         * Pola (`KptColumn.field`) aktualnie ukrytych kolumn (dwukierunkowo). Sam komponent nie
+         * dostarcza UI do zarządzania tym stanem — to hak do podpięcia zewnętrznego przełącznika
+         * kolumn (patrz przykład „Dostosowywanie kolumn" w playground).
+         */
+        this.hiddenFields = model([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hiddenFields" }] : /* istanbul ignore next */ []));
         this.rowClick = output();
         /** Emitowane w trybie lazy przy zmianie sortowania/filtra/strony. */
         this.lazyLoad = output();
+        /** Emitowane po zatwierdzeniu edycji komórki (tylko gdy wartość faktycznie się zmieniła). */
+        this.cellEdit = output();
         this.i18n = inject(KptI18n);
         /** Komunikat pustej tabeli (input albo domyślny z i18n). */
         this.emptyText = computed(() => this.emptyMessage() ?? this.i18n.t('dataTable.empty'), /* @ts-ignore */
@@ -9372,6 +9879,9 @@ class KptDataTable {
         /** Kolumny w bieżącej kolejności (po ewentualnym przestawieniu). */
         this.orderedColumns = linkedSignal(() => this.columns(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "orderedColumns" }] : /* istanbul ignore next */ []));
+        /** Kolumny w bieżącej kolejności, bez tych ukrytych przez `hiddenFields` — do renderowania i eksportu. */
+        this.visibleOrderedColumns = computed(() => this.orderedColumns().filter((c) => !this.hiddenFields().includes(c.field)), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "visibleOrderedColumns" }] : /* istanbul ignore next */ []));
         // ── Wirtualizacja (ręczne okno wierszy) ──
         this.scrollEl = viewChild('scrollEl', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "scrollEl" }] : /* istanbul ignore next */ []));
@@ -9385,6 +9895,16 @@ class KptDataTable {
         ...(ngDevMode ? [{ debugName: "theadEl" }] : /* istanbul ignore next */ []));
         this.theadOffset = signal(0, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "theadOffset" }] : /* istanbul ignore next */ []));
+        // ── Edycja inline komórek ──
+        this.editingCell = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "editingCell" }] : /* istanbul ignore next */ []));
+        this.editingValue = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "editingValue" }] : /* istanbul ignore next */ []));
+        /** Czy panel edytora overlayowego (date/select/multiselect) jest otwarty. */
+        this.editorPanelOpen = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "editorPanelOpen" }] : /* istanbul ignore next */ []));
+        this.editorHost = viewChild('editorHost', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "editorHost" }] : /* istanbul ignore next */ []));
         this.virtualStart = computed(() => Math.max(0, Math.floor(this.scrollTop() / this.rowHeight()) - this.buffer), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "virtualStart" }] : /* istanbul ignore next */ []));
         this.virtualEnd = computed(() => {
@@ -9400,8 +9920,12 @@ class KptDataTable {
         this.bottomPad = computed(() => (this.sorted().length - this.virtualEnd()) * this.rowHeight(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "bottomPad" }] : /* istanbul ignore next */ []));
         // ── Przestawianie kolumn (natywny HTML5 drag-and-drop; działa w trybie zoneless) ──
-        this.dragIndex = signal(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "dragIndex" }] : /* istanbul ignore next */ []));
+        /**
+         * Pole przeciąganej kolumny (nie indeks — przy ukrytych kolumnach `$index` z pętli
+         * `visibleOrderedColumns()` nie odpowiada pozycji w pełnej `orderedColumns()`).
+         */
+        this.dragField = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "dragField" }] : /* istanbul ignore next */ []));
         // ── Szablony komórek ──
         this.cellDefs = contentChildren(KptCellDef, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "cellDefs" }] : /* istanbul ignore next */ []));
@@ -9412,6 +9936,21 @@ class KptDataTable {
             return map;
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "cellMap" }] : /* istanbul ignore next */ []));
+        // ── Własne edytory komórek (furtka poza wbudowane typy `column.edit.type`) ──
+        this.cellEditDefs = contentChildren(KptCellEditDef, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "cellEditDefs" }] : /* istanbul ignore next */ []));
+        this.cellEditMap = computed(() => {
+            const map = new Map();
+            for (const def of this.cellEditDefs())
+                map.set(def.kptCellEdit(), def.template);
+            return map;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "cellEditMap" }] : /* istanbul ignore next */ []));
+        /** Dla własnych szablonów (`kptCellEdit`): ustaw wartość i od razu zatwierdź. */
+        this.commitEditValue = (value) => {
+            this.editingValue.set(value);
+            this.commitEdit();
+        };
         // ── Rozwijane wiersze ──
         this.rowDetailDef = contentChild(KptRowDetailDef, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "rowDetailDef" }] : /* istanbul ignore next */ []));
@@ -9482,7 +10021,7 @@ class KptDataTable {
             return rows.slice(start, start + size);
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "paged" }] : /* istanbul ignore next */ []));
-        this.colspan = computed(() => this.columns().length +
+        this.colspan = computed(() => this.visibleOrderedColumns().length +
             (this.selectable() !== 'none' ? 1 : 0) +
             (this.hasRowDetail() ? 1 : 0), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "colspan" }] : /* istanbul ignore next */ []));
@@ -9502,7 +10041,7 @@ class KptDataTable {
         this.frozenOffsets = computed(() => {
             const map = new Map();
             let acc = this.leadingStickyWidth();
-            for (const col of this.orderedColumns()) {
+            for (const col of this.visibleOrderedColumns()) {
                 if (!col.frozen)
                     break; // tylko wiodące, sąsiadujące
                 map.set(col.field, acc);
@@ -9560,11 +10099,19 @@ class KptDataTable {
         afterRenderEffect(() => {
             this.filterRowPosition();
             this.hasColumnFilters();
-            this.orderedColumns();
+            this.visibleOrderedColumns();
             const first = this.theadEl()?.nativeElement?.rows?.[0];
             if (first)
                 this.theadOffset.set(first.offsetHeight);
         });
+        // Wejście w edycję komórki → przenieś fokus na jej edytor.
+        afterRenderEffect(() => {
+            if (!this.editingCell())
+                return;
+            this.editorHost()
+                ?.nativeElement.querySelector('input, .kpt-select, [tabindex]')
+                ?.focus();
+        });
     }
     onScroll(event) {
         if (!this.virtualScroll())
@@ -9577,10 +10124,10 @@ class KptDataTable {
     isColDraggable(col) {
         return this.reorderable() && !col.frozen;
     }
-    /** Liczba wiodących kolumn zamrożonych — poza nie wolno upuszczać ani ich przesuwać. */
+    /** Liczba wiodących widocznych kolumn zamrożonych — poza nie wolno upuszczać ani ich przesuwać. */
     frozenLeadCount() {
         let n = 0;
-        for (const col of this.orderedColumns()) {
+        for (const col of this.visibleOrderedColumns()) {
             if (col.frozen)
                 n++;
             else
@@ -9588,45 +10135,48 @@ class KptDataTable {
         }
         return n;
     }
-    onColDragStart(index, event) {
-        if (this.orderedColumns()[index]?.frozen)
+    onColDragStart(field, event) {
+        const col = this.orderedColumns().find((c) => c.field === field);
+        if (col?.frozen)
             return; // frozen nieprzeciągalne
-        this.dragIndex.set(index);
-        event.dataTransfer?.setData('text/plain', String(index));
+        this.dragField.set(field);
+        event.dataTransfer?.setData('text/plain', field);
         if (event.dataTransfer)
             event.dataTransfer.effectAllowed = 'move';
     }
-    onColDragOver(index, event) {
+    onColDragOver(field, event) {
         // Zezwól na upuszczenie tylko poza obszarem kolumn zamrożonych.
-        if (this.dragIndex() !== null && index >= this.frozenLeadCount())
+        const visIndex = this.visibleOrderedColumns().findIndex((c) => c.field === field);
+        if (this.dragField() !== null && visIndex >= this.frozenLeadCount())
             event.preventDefault();
     }
-    onColDrop(index, event) {
+    onColDrop(field, event) {
         event.preventDefault();
-        const from = this.dragIndex();
-        if (from === null || from === index)
+        const from = this.dragField();
+        if (from === null || from === field)
             return;
-        if (index < this.frozenLeadCount())
+        const visIndex = this.visibleOrderedColumns().findIndex((c) => c.field === field);
+        if (visIndex < this.frozenLeadCount())
             return; // nie wsuwaj przed/pomiędzy kolumny zamrożone
         const cols = [...this.orderedColumns()];
-        const [moved] = cols.splice(from, 1);
-        cols.splice(index, 0, moved);
+        const fromIdx = cols.findIndex((c) => c.field === from);
+        const toIdx = cols.findIndex((c) => c.field === field);
+        if (fromIdx === -1 || toIdx === -1)
+            return;
+        const [moved] = cols.splice(fromIdx, 1);
+        cols.splice(toIdx, 0, moved);
         this.orderedColumns.set(cols);
-        this.dragIndex.set(null);
+        this.dragField.set(null);
     }
     onColDragEnd() {
-        this.dragIndex.set(null);
+        this.dragField.set(null);
     }
     exportCsv() {
-        const cols = this.orderedColumns();
+        const cols = this.visibleOrderedColumns();
         const rows = this.lazy() ? this.data() : this.sorted();
-        const escape = (value) => {
-            const text = String(value ?? '');
-            return /[",\n;]/.test(text) ? `"${text.replace(/"/g, '""')}"` : text;
-        };
-        const header = cols.map((c) => escape(c.header)).join(';');
+        const header = cols.map((c) => escapeCsvCell(c.header)).join(';');
         const body = rows
-            .map((row) => cols.map((c) => escape(row[c.field])).join(';'))
+            .map((row) => cols.map((c) => escapeCsvCell(row[c.field])).join(';'))
             .join('\n');
         // BOM () — poprawne polskie znaki w Excelu.
         const csv = `${header}\n${body}`;
@@ -9641,6 +10191,72 @@ class KptDataTable {
     cellTemplate(field) {
         return this.cellMap().get(field) ?? null;
     }
+    cellEditTemplate(field) {
+        return this.cellEditMap().get(field) ?? null;
+    }
+    // ── Edycja inline komórek ──
+    isEditable(col) {
+        return !!col.edit || !!this.cellEditTemplate(col.field);
+    }
+    isEditingCell(row, field) {
+        const e = this.editingCell();
+        return !!e && e.field === field && this.sameRow(e.row, row);
+    }
+    startEdit(row, col, event) {
+        event.stopPropagation();
+        if (!this.isEditable(col) || this.isEditingCell(row, col.field))
+            return;
+        this.editingCell.set({ row, field: col.field });
+        this.editingValue.set(this.getValue(row, col.field));
+        // Edytory na overlayu otwieramy od razu. To nie kosmetyka: backdrop CDK sprawia, że każdy klik
+        // poza edytorem zamyka panel, a więc zatwierdza i zamyka edycję — bez tego edytor z zamkniętym
+        // panelem potrafiłby zostać otwarty w nieskończoność.
+        const type = col.edit?.type;
+        this.editorPanelOpen.set(!!type && OVERLAY_EDITORS.includes(type));
+    }
+    /**
+     * Panel edytora zamknięty (wybór, klik poza, Esc) → zatwierdź. Celowo NIE wieszamy tego na
+     * `touch`: ten leci też z blur triggera, czyli już przy naciśnięciu myszy na opcji w panelu —
+     * edytor ginąłby, zanim kliknięcie zdąży wybrać wartość.
+     */
+    onEditorPanelToggle(open) {
+        this.editorPanelOpen.set(open);
+        if (!open)
+            this.commitEdit();
+    }
+    /**
+     * Edytory bez overlaya (text/number, własne `kptCellEdit`) zatwierdza dopiero wyjście fokusu
+     * **poza cały edytor**. Nie wystarczy `touch`/blur samej kontrolki: `kpt-input-number` ma
+     * fokusowalne strzałki `+`/`-` obok pola (i dodatkowo emituje `touch` w `step_()`), więc każde
+     * kliknięcie strzałki zamykałoby edycję, zanim zdąży zmienić wartość.
+     */
+    onEditorFocusOut(event) {
+        if (this.editorPanelOpen())
+            return; // edytory overlayowe zatwierdza zamknięcie panelu
+        const host = this.editorHost()?.nativeElement;
+        const next = event.relatedTarget;
+        if (host && next && host.contains(next))
+            return; // fokus został w edytorze (np. strzałki +/-)
+        this.commitEdit();
+    }
+    /** Zatwierdza bieżącą edycję — emituje `cellEdit` tylko gdy wartość faktycznie się zmieniła. */
+    commitEdit() {
+        const editing = this.editingCell();
+        if (!editing)
+            return;
+        const { row, field } = editing;
+        const value = this.editingValue();
+        this.editingCell.set(null);
+        this.editorPanelOpen.set(false);
+        if (sameEditValue(value, this.getValue(row, field)))
+            return;
+        const updatedRow = { ...row, [field]: value };
+        this.cellEdit.emit({ row, field, value, updatedRow });
+    }
+    cancelEdit() {
+        this.editingCell.set(null);
+        this.editorPanelOpen.set(false);
+    }
     isExpanded(row) {
         return this.expandedRows().some((r) => this.sameRow(r, row));
     }
@@ -9837,33 +10453,34 @@ class KptDataTable {
     }
     static { this.ɵfac = function KptDataTable_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || KptDataTable)(); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptDataTable, selectors: [["kpt-data-table"]], contentQueries: function KptDataTable_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
-            i0.ɵɵcontentQuerySignal(dirIndex, ctx.cellDefs, KptCellDef, 4)(dirIndex, ctx.rowDetailDef, KptRowDetailDef, 5);
+            i0.ɵɵcontentQuerySignal(dirIndex, ctx.cellDefs, KptCellDef, 4)(dirIndex, ctx.cellEditDefs, KptCellEditDef, 4)(dirIndex, ctx.rowDetailDef, KptRowDetailDef, 5);
         } if (rf & 2) {
-            i0.ɵɵqueryAdvance(2);
+            i0.ɵɵqueryAdvance(3);
         } }, viewQuery: function KptDataTable_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuerySignal(ctx.scrollEl, _c0$e, 5)(ctx.theadEl, _c1$5, 5);
+            i0.ɵɵviewQuerySignal(ctx.scrollEl, _c0$e, 5)(ctx.theadEl, _c1$5, 5)(ctx.editorHost, _c2$2, 5);
         } if (rf & 2) {
-            i0.ɵɵqueryAdvance(2);
+            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"] }, outputs: { selection: "selectionChange", expandedRows: "expandedRowsChange", rowClick: "rowClick", lazyLoad: "lazyLoad" }, decls: 24, vars: 13, consts: [["scrollEl", ""], ["theadEl", ""], ["rowTpl", ""], ["filterRowTpl", ""], [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"], [3, "length", "pageIndex", "pageSize", "pageSizeOptions"], ["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"], [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"], [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) {
-            i0.ɵɵconditionalCreate(0, KptDataTable_Conditional_0_Template, 3, 2, "div", 4);
-            i0.ɵɵelementStart(1, "div", 5, 0);
+        } }, 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) {
+            i0.ɵɵprojectionDef(_c3);
+            i0.ɵɵconditionalCreate(0, KptDataTable_Conditional_0_Template, 3, 2, "div", 5);
+            i0.ɵɵelementStart(1, "div", 6, 0);
             i0.ɵɵlistener("scroll", function KptDataTable_Template_div_scroll_1_listener($event) { return ctx.onScroll($event); });
-            i0.ɵɵelementStart(3, "table", 6)(4, "thead", null, 1);
-            i0.ɵɵconditionalCreate(6, KptDataTable_Conditional_6_Template, 1, 1, "ng-container", 7);
+            i0.ɵɵelementStart(3, "table", 7)(4, "thead", null, 1);
+            i0.ɵɵconditionalCreate(6, KptDataTable_Conditional_6_Template, 1, 1, "ng-container", 8);
             i0.ɵɵelementStart(7, "tr");
-            i0.ɵɵconditionalCreate(8, KptDataTable_Conditional_8_Template, 1, 4, "th", 8);
-            i0.ɵɵconditionalCreate(9, KptDataTable_Conditional_9_Template, 2, 7, "th", 9)(10, KptDataTable_Conditional_10_Template, 1, 4, "th", 9);
-            i0.ɵɵrepeaterCreate(11, KptDataTable_For_12_Template, 5, 18, "th", 10, _forTrack0$1);
+            i0.ɵɵconditionalCreate(8, KptDataTable_Conditional_8_Template, 1, 4, "th", 9);
+            i0.ɵɵconditionalCreate(9, KptDataTable_Conditional_9_Template, 2, 7, "th", 10)(10, KptDataTable_Conditional_10_Template, 1, 4, "th", 10);
+            i0.ɵɵrepeaterCreate(11, KptDataTable_For_12_Template, 5, 18, "th", 11, _forTrack0$1);
             i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(13, KptDataTable_Conditional_13_Template, 1, 1, "ng-container", 7);
+            i0.ɵɵconditionalCreate(13, KptDataTable_Conditional_13_Template, 1, 1, "ng-container", 8);
             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, 1, 4, "kpt-paginator", 11);
+            i0.ɵɵconditionalCreate(23, KptDataTable_Conditional_23_Template, 3, 4, "div", 12);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.filterable() || ctx.exportable() ? 0 : -1);
             i0.ɵɵadvance();
@@ -9877,23 +10494,43 @@ class KptDataTable {
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.selectable() === "multiple" ? 9 : ctx.selectable() === "single" ? 10 : -1);
             i0.ɵɵadvance(2);
-            i0.ɵɵrepeater(ctx.orderedColumns());
+            i0.ɵɵrepeater(ctx.visibleOrderedColumns());
             i0.ɵɵadvance(2);
             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);
-        } }, dependencies: [NgTemplateOutlet, KptButton, KptIcon, KptPaginator, KptSelect, KptDateRange, KptSlider], 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}.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__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__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 }); }
+        } }, dependencies: [NgTemplateOutlet,
+            KptButton,
+            KptIcon,
+            KptPaginator,
+            KptSelect,
+            KptDateRange,
+            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 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(KptDataTable, [{
         type: Component,
-        args: [{ selector: 'kpt-data-table', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [NgTemplateOutlet, KptButton, KptIcon, KptPaginator, KptSelect, KptDateRange, KptSlider], host: {
+        args: [{ selector: 'kpt-data-table', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
+                    NgTemplateOutlet,
+                    KptButton,
+                    KptIcon,
+                    KptPaginator,
+                    KptSelect,
+                    KptDateRange,
+                    KptSlider,
+                    KptInput,
+                    KptInputNumber,
+                    KptDatepicker,
+                ], 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 orderedColumns(); track col.field; let i = $index) {\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]=\"dragIndex() !== null && dragIndex() !== i && !col.frozen\"\n            [attr.aria-sort]=\"ariaSort(col)\"\n            (click)=\"toggleSort(col)\"\n            (dragstart)=\"onColDragStart(i, $event)\"\n            (dragover)=\"reorderable() ? onColDragOver(i, $event) : null\"\n            (drop)=\"reorderable() ? onColDrop(i, $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 orderedColumns(); 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      >\n        @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 orderedColumns(); 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  <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}\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}.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__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__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"] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], lazyLoad: [{ type: i0.Output, args: ["lazyLoad"] }], scrollEl: [{ type: i0.ViewChild, args: ['scrollEl', { isSignal: true }] }], theadEl: [{ type: i0.ViewChild, args: ['theadEl', { isSignal: true }] }], cellDefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => KptCellDef), { 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: 113 }); })();
+                }, 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 }); })();
 
 const _c0$d = a0 => ({ $implicit: a0, level: 0 });
 const _c1$4 = (a0, a1) => ({ $implicit: a0, level: a1 });
@@ -12611,5 +13248,5 @@ class KptSpeedDial {
  * Generated bundle index. Do not edit.
  */
 
-export { KPT_BREAKPOINTS, KPT_FORM_FIELD_CONTROL, KPT_I18N_CONFIG, KPT_MESSAGES_EN, KPT_MESSAGES_PL, KptAccordion, KptAccordionPanel, KptAlert, KptAppShell, KptAutocomplete, KptAvatar, KptAvatarGroup, KptBadge, KptBottomSheet, KptBreadcrumb, KptBreakpointObserver, KptButton, KptButtonGroup, KptCard, KptCarousel, KptCellDef, KptCheckbox, KptChip, KptChipsInput, KptClock, KptColorPicker, KptConfirmContainer, KptConfirmService, KptContextMenu, KptDataTable, KptDataView, KptDateRange, KptDatepicker, KptDialog, KptDivider, KptDrawer, KptEmpty, KptFab, KptFieldset, KptFileUpload, KptFormField, KptGalleria, KptI18n, KptIcon, KptIconButton, KptIconRegistry, KptImage, KptInput, KptInputMask, KptInputNumber, KptInputOtp, KptKnob, KptListbox, KptMegamenu, KptMenu, KptMenubar, KptMeterGroup, KptOrderList, KptPaginator, KptPanel, KptPassword, KptPickList, KptPopover, KptProgress, KptRadioGroup, KptRating, KptRichText, KptRowDetailDef, KptScrollTop, KptSelect, KptShellNavToggle, KptSidenav, KptSkeleton, KptSlider, KptSpeedDial, KptSpinner, KptSplitButton, KptSplitter, KptStep, KptStepper, KptSwitch, KptSwitchGroup, KptTab, KptTabs, KptTextarea, KptTimeline, KptToastContainer, KptToastService, KptToolbar, KptTooltip, KptTree, provideKptI18n, renderKptIconSvg };
+export { KPT_BREAKPOINTS, KPT_FORM_FIELD_CONTROL, KPT_I18N_CONFIG, KPT_MESSAGES_EN, KPT_MESSAGES_PL, KptAccordion, KptAccordionPanel, KptAlert, KptAppShell, KptAutocomplete, KptAvatar, KptAvatarGroup, KptBadge, KptBottomSheet, KptBreadcrumb, KptBreakpointObserver, KptButton, KptButtonGroup, KptCard, KptCarousel, KptCellDef, KptCellEditDef, KptCheckbox, KptChip, KptChipsInput, KptClock, KptColorPicker, KptConfirmContainer, KptConfirmService, KptContextMenu, KptDataTable, KptDataView, KptDateRange, KptDatepicker, KptDialog, KptDivider, KptDrawer, KptEmpty, KptFab, KptFieldset, KptFileUpload, KptFormField, KptGalleria, KptI18n, KptIcon, KptIconButton, KptIconRegistry, KptImage, KptInput, KptInputMask, KptInputNumber, KptInputOtp, KptKnob, KptListbox, KptMegamenu, KptMenu, KptMenubar, KptMeterGroup, KptOrderList, KptPaginator, KptPanel, KptPassword, KptPickList, KptPopover, KptProgress, KptRadioGroup, KptRating, KptRichText, KptRowDetailDef, KptScrollTop, KptSelect, KptShellNavToggle, KptSidenav, KptSkeleton, KptSlider, KptSpeedDial, KptSpinner, KptSplitButton, KptSplitter, KptStep, KptStepper, KptSwitch, KptSwitchGroup, KptTab, KptTabs, KptTextarea, KptTimeline, KptToastContainer, KptToastService, KptToolbar, KptTooltip, KptTree, provideKptI18n, renderKptIconSvg };
 //# sourceMappingURL=konce-pt-angular.mjs.map