@konce-pt/angular 0.7.7 → 0.7.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@konce-pt/angular",
-  "version": "0.7.7",
+  "version": "0.7.9",
   "description": "Open-source Angular 22 component library on Signals & Signal Forms — 70+ components, rich data table, zoneless, fully tokenized. Selektory kpt-*, klasy Kpt*.",
   "license": "MIT",
   "author": "konce.pt",

package/src/lib/data-table/llms.txt

@@ -8,7 +8,7 @@ Import: `import { KptDataTable, KptColumn, KptCellDef, KptCellEditDef, KptRowDet
 `kpt-data-table`
 
 ## Model kolumny (KptColumn)
-`{ field: string; header: string; sortable?: boolean; align?: 'start'|'center'|'end'; width?: string; frozen?: boolean; filter?: KptColumnFilter; edit?: KptColumnEdit }`
+`{ field: string; header: string; sortable?: boolean; align?: 'start'|'center'|'end'; width?: string; frozen?: boolean; filter?: KptColumnFilter; edit?: KptColumnEdit; summary?: KptColumnSummary }`
 Kolumny `frozen` (wiodące, sąsiadujące) przyklejają się przy poziomym przewijaniu — wymagają `width`.
 
 ### Filtr kolumny (KptColumnFilter)
@@ -29,6 +29,10 @@ Gdy kolumna ma `edit`, jej komórki są klikalne — klik (albo Enter na sfokuso
 wartość na kontrolkę: `text` → `kpt-input`, `number` → `kpt-input-number`, `date` → `kpt-datepicker`,
 `select` → `kpt-select`, `multiselect` → `kpt-select multiple filter`. Patrz sekcja „Edycja inline” niżej.
 
+### Podsumowanie kolumny (KptColumnSummary)
+`{ fn: 'sum'|'avg'|'min'|'max'|'count' | ((rows) => unknown); format?: (value) => string }`
+Kolumna z `summary` jest agregowana w wierszu podsumowania — patrz sekcja „Wiersz podsumowania” niżej.
+
 ## Wejścia
 - `columns`: KptColumn[] (wymagane)
 - `data`: T[] (domyślnie [])
@@ -50,6 +54,9 @@ wartość na kontrolkę: `text` → `kpt-input`, `number` → `kpt-input-number`
 - `rowHeight`: number — stała wysokość wiersza w px (domyślnie 41), potrzebna przy virtualScroll
 - `expandable`: boolean — kolumna z przełącznikiem rozwijającym wiersz (renderuje szablon `kptRowDetail`)
 - `multiExpand`: boolean (domyślnie true) — pozwala rozwinąć wiele wierszy naraz; false = tylko jeden
+- `summaryLabel`: string — etykieta wiersza podsumowania; bez wartości używa i18n (`dataTable.total`)
+- `summaryValues`: Record<string, unknown> | null — gotowe wartości podsumowania (pole → wartość);
+  nadpisują wyliczenia, przy `lazy` są jedynym źródłem
 
 ## Model / zdarzenia
 - `selection`: model<T[]> — dwukierunkowe `[(selection)]`
@@ -136,6 +143,45 @@ Gdy 5 wbudowanych typów nie wystarcza, dyrektywa `kptCellEdit` daje pełny, wł
       </ng-template>
     </kpt-data-table>
 
+## Wiersz podsumowania (column.summary)
+Kolumny z `summary` renderują `<tfoot>` — ostatni wiersz tabeli, **nad paginatorem**, przyklejony
+do dołu obszaru przewijania (`position: sticky; bottom: 0`, jak sticky header).
+
+- **Etykieta** (`summaryLabel`, domyślnie i18n `dataTable.total` → „Total”/„Razem”) renderuje się
+  w jednej komórce scalonej (`colspan`) od początku wiersza do pierwszej liczonej kolumny,
+  wyrównana do prawej. Colspan obejmuje też kolumny systemowe (rozwijanie, zaznaczanie).
+  Przykład: `summary` na 3. kolumnie → scalone kolumny 1–2. Gdy liczona jest **pierwsza** widoczna
+  kolumna (i nie ma kolumn systemowych), etykieta nie ma się gdzie zmieścić i nie renderuje się.
+- **Zakres**: agregacja obejmuje **wszystkie wiersze po filtrach** — całą stronę 1 i każdą następną,
+  nie tylko widoczną. Filtr globalny i filtry kolumn zawężają zbiór (zgodnie z licznikiem paginatora),
+  sortowanie i strona nie zmieniają wyniku.
+- **Na żywo przy edycji inline**: `data` jest zwykłym inputem, więc gdy konsument po `cellEdit`
+  podmieni tablicę w sygnale, podsumowanie przelicza się samo (zwykły `computed`).
+- **Agregacje**: `sum`, `avg`, `min`, `max`, `count`. `count` liczy wiersze; pozostałe pomijają
+  wartości nieliczbowe (string z liczbą jest parsowany). Pusty zbiór: `sum` = 0, reszta — pusta
+  komórka. `sum`/`avg` przycinają ogony zmiennoprzecinkowe (bez tego `0.1+0.2` = `0.30000000000000004`).
+  Własna funkcja `fn: (rows) => unknown` dostaje ten sam zbiór (np. suma ważona).
+- **Formatowanie**: `format: (value) => string` (np. `Intl.NumberFormat`); bez niego wartość leci
+  surowa. Komórki podsumowania są domyślnie do prawej — jawne `align` kolumny ma priorytet.
+  Etykieta wiersza („Razem”) jest jedna na cały wiersz, więc kolumnę liczoną inaczej niż sumą
+  (`avg`, `min`, `max`) nazwij w `format` (np. `ø 662,57 zł`) — inaczej czyta się jak suma.
+- **Ukryte kolumny** (`hiddenFields`) wypadają też z podsumowania; kolejność po `reorderable`
+  jest respektowana (etykieta scala się do aktualnie pierwszej liczonej kolumny).
+- **Tryb `lazy`**: tabela ma tylko bieżącą stronę, więc nie liczy nic sama — podaj `summaryValues`
+  (pole → gotowa wartość z serwera). `summaryValues` działa też poza `lazy`, nadpisując wyliczenia.
+  Kolumna wymieniona wyłącznie w `summaryValues` (bez `summary`) też pokazuje wartość.
+- Wiersz nie renderuje się przy `loading` ani gdy tabela jest pusta (nie dublujemy komunikatu stanu).
+- Eksport CSV **nie zawiera** wiersza podsumowania — `exportCsv()` eksportuje same dane.
+
+    cols = [
+      { field: 'product', header: 'Produkt' },
+      { field: 'qty', header: 'Ilość', align: 'end', summary: { fn: 'sum' } },
+      { field: 'net', header: 'Netto', align: 'end', summary: { fn: 'sum', format: pln } },
+    ];
+
+    <kpt-data-table [columns]="cols" [data]="rows()" [pageSize]="5" rowKey="id"
+                    summaryLabel="Razem" (cellEdit)="onCellEdit($event)" />
+
 ## Zachowanie
 - Sortowanie: klik w nagłówek sortowalnej kolumny cyklicznie asc → desc → brak.
 - Filtr: dopasowanie tekstu we wszystkich polach kolumn; reset strony do 0.
@@ -164,6 +210,7 @@ patrz `hiddenFields` wyżej i przykład `pg-column-toggle` w playground.
 ## Tokeny
 `--kpt-table-{bg,fg,border,radius,header-bg,header-fg,row-hover,row-selected,cell-padding}`.
 Rozwijany wiersz: `--kpt-table-detail-bg` (fallback: surface-variant → row-hover).
+Wiersz podsumowania: `--kpt-table-summary-bg` (fallback: header-bg).
 Paginacja: komponent `kpt-paginator`.
 
 ## Do zrobienia (roadmap)
@@ -174,3 +221,6 @@ i przykład `pg-column-toggle` w playground).
 
 Edycja komórek inline: gotowe (`column.edit` + `cellEdit` + `kptCellEdit`; zapis do API —
 patrz przykład w playground, `pg-fake-users-api.ts`).
+
+Wiersz podsumowania: gotowe (`column.summary` + `summaryLabel` + `summaryValues` — patrz sekcja
+„Wiersz podsumowania” i przykład „Inline editing + summary row” w playground).

package/src/lib/date-range/llms.txt

@@ -9,6 +9,10 @@ Wymaga `import '@angular/cdk/overlay-prebuilt.css';`
 ## Wejścia / model
 - `value`: model<KptDateRangeValue> (lub `formField`)
 - `mode`: 'date' | 'datetime' | 'time' (domyślnie 'date')
+- `visibleMonths`: number (domyślnie 1, przycinane do 1–3) — liczba miesięcy obok siebie.
+  Strzałki ‹ › stoją na skrajnych panelach i przesuwają całość o jeden miesiąc.
+  Ignorowane w trybie 'time'. Przy >1 dni sąsiednich miesięcy są ukrywane (puste sloty) —
+  inaczej ta sama data byłaby klikalna w dwóch panelach naraz.
 - `hourFormat`: 12 | 24 (domyślnie 24) — tarcza z AM/PM lub 24h; czas zawsze 24h w wartości
 - `minuteStep`: number (domyślnie 1) — snap minut na tarczy
 - `placeholder`: string — bez wartości używa i18n (`dateRange.placeholder`); input ma priorytet
@@ -16,12 +20,15 @@ Wymaga `import '@angular/cdk/overlay-prebuilt.css';`
 - `disabled`/`invalid`/`touched`: boolean; `touch`: output
 
 ## Zachowanie
-Pierwszy klik ustawia `start`, drugi `end` (kolejność normalizowana). Zakres podświetlany; „×" czyści.
+Pierwszy klik ustawia `start`, drugi `end` (kolejność normalizowana). „×" czyści.
+Zakres podświetla ciągłe pasmo biegnące przez wszystkie panele: dni skrajne mają plamę
+zaznaczenia, a pasmo wychodzi z ich środka, zaokrąglając się na krańcach wiersza siatki.
 Tryby datetime/time: przełącznik „Od / Koniec" + tarcza zegara, zatwierdzenie przyciskiem „Gotowe".
 
 ## Przykład
     <kpt-date-range [formField]="f.period" />
     <kpt-date-range [(value)]="period" />
+    <kpt-date-range [visibleMonths]="2" [(value)]="period" />
 
     period = signal<KptDateRangeValue>({ start: '', end: '' });
 

package/src/lib/datepicker/llms.txt

@@ -2,13 +2,17 @@
 
 Wybór daty/godziny z własnym kalendarzem (CDK Overlay), Signal Forms. Granulacja przez
 `selectionMode`: data (domyślnie), 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` — do daty urodzenia
+`startView="decade"` (dekada → rok → miesiąc → dzień, cztery kliknięcia zamiast setek strzałek).
 Godzina na tarczy zegara (dwa etapy: godziny → minuty, klik lub przeciąganie), format 12/24h.
 Wyświetlanie wg `displayFormat` ('pl'/'iso'). Tydzień od poniedziałku, dziś zaznaczone, zakres min/max.
 Wymaga stylów overlay CDK: `import '@angular/cdk/overlay-prebuilt.css';`
 Import: `import { KptDatepicker } from '@konce-pt/angular';`
 
 ## Użycie
-    <kpt-datepicker [formField]="f.birthDate" minDate="1900-01-01" maxDate="2030-12-31" />
+    <kpt-datepicker [formField]="f.birthDate" startView="decade" minDate="1920-01-01" />
+    <kpt-datepicker [formField]="f.date" minDate="1900-01-01" maxDate="2030-12-31" />
     <kpt-datepicker selectionMode="monthYear" [(value)]="period" />
     <kpt-datepicker selectionMode="month" monthDisplay="long" [(value)]="month" />
     <kpt-datepicker selectionMode="datetime" [hourFormat]="12" [(value)]="meetingAt" />
@@ -18,6 +22,11 @@ Import: `import { KptDatepicker } from '@konce-pt/angular';`
 - `value`: model<string>; `minDate`/`maxDate`: string|null; `placeholder`: string
 - `selectionMode`: 'date' | 'monthYear' | 'year' | 'month' | 'datetime' | 'time' (domyślnie 'date').
   Format wartości zależny od trybu: 'RRRR-MM-DD' / 'RRRR-MM' / 'RRRR' / 'MM' / 'RRRR-MM-DDTHH:mm' (datetime) / 'HH:mm' (time).
+- `startView`: 'day' | 'month' | 'year' | 'decade' | null (domyślnie null) — poziom, od którego
+  otwiera się panel. `null` = poziom, na którym tryb zatwierdza wartość: 'day' dla 'date'/'datetime',
+  'month' dla 'monthYear'/'month', 'year' dla 'year'. Poniżej tego poziomu nie zejdzie —
+  `startView="day"` w trybie 'year' jest podnoszony do 'year'. Tryb 'month' zostaje na 'month'
+  (wartość to samo 'MM', nie ma po czym nawigować), tryb 'time' ignoruje input.
 - `hourFormat`: 12 | 24 (domyślnie 24) — tarcza z AM/PM (12) lub pierścieniem 13–00 (24); wartość zawsze 24h.
 - `minuteStep`: number (domyślnie 1) — snap minut na tarczy.
 - `monthDisplay`: 'long' | 'number' (domyślnie 'long') — w trybie 'month' i etykietach miesięcy: słownie (styczeń) lub liczbą (01)
@@ -31,11 +40,26 @@ Import: `import { KptDatepicker } from '@konce-pt/angular';`
 - `ariaLabel`: string|null — nazwa dostępna, gdy pola nie opisuje `<label for>`
   (np. dwie godziny w jednym wierszu edytora). Bez niej czytnik ekranu ogłasza samą wartość.
 - Ikona w polu: kalendarz, a w trybie 'time' zegar.
-- Panel: nawigacja (‹ ›) miesięcy/lat/dekad wg trybu; tarcza zegara z „Gotowe"; przycisk czyszczenia (×).
+- Panel: przycisk czyszczenia (×), tarcza zegara z „Gotowe".
+
+## Zachowanie (stos widoków)
+Nagłówek panelu ma zawsze kształt `‹ tytuł ›`; strzałki przesuwają stronę bieżącego poziomu,
+a tytuł jest przyciskiem wchodzącym poziom wyżej:
+
+    dzień    ‹ [czerwiec] [1979] ›   strzałki ±1 miesiąc;  chipy → miesiące / lata
+    miesiąc  ‹      [1979]      ›    strzałki ±1 rok;      chip  → lata
+    rok      ‹  [1970 – 1979]   ›    strzałki ±10 lat;     chip  → dekady
+    dekada   ‹   1920 – 2039    ›    strzałki ±120 lat;    szczyt stosu, tytuł nieklikalny
+
+Strona lat to **pełna dekada** (10 komórek, 1970–1979), strona dekad to 12 dekad (1920–2039).
+Klik w komórkę powyżej poziomu zatwierdzania schodzi niżej; na poziomie zatwierdzania ustawia
+wartość i zamyka panel. Komórka obejmująca dziś dostaje obrys (jak „dziś" w siatce dni).
+Strzałka gaśnie (`disabled`), gdy cała sąsiednia strona wypada poza `minDate`/`maxDate`.
 
 ## i18n
 Nazwy dni tygodnia i miesięcy są wyliczane z `Intl` wg aktywnego locale i18n (nie ze słownika).
-Etykiety nawigacji/aria i „Gotowe" z i18n (namespace `datepicker` + `common`). Domyślnie EN;
+Etykiety nawigacji/aria („poprzednie dekady", „wybierz rok"…) i „Gotowe" z i18n
+(namespace `datepicker` + `common`). Domyślnie EN;
 konfiguracja przez `provideKptI18n` — patrz `i18n/llms.txt`. Uwaga: `displayFormat` ('pl'/'iso')
 steruje wyłącznie formatem daty i jest niezależny od języka etykiet.
 

package/types/konce-pt-angular.d.ts

@@ -255,6 +255,8 @@ interface KptMessages {
         max: string;
         /** Interpolacja: {column}. Aria-label edytowalnej komórki. */
         editCell: string;
+        /** Domyślna etykieta wiersza podsumowania (input `summaryLabel` ma priorytet). */
+        total: string;
     };
     confirm: {
         header: string;
@@ -283,6 +285,11 @@ interface KptMessages {
         nextYear: string;
         prevYears: string;
         nextYears: string;
+        prevDecades: string;
+        nextDecades: string;
+        chooseMonth: string;
+        chooseYear: string;
+        chooseDecade: string;
         calendar: string;
         month: string;
         time: string;
@@ -1046,24 +1053,33 @@ interface DayCell$1 {
     selected: boolean;
     disabled: boolean;
 }
+/** Komórka siatki miesięcy/lat/dekad — niesie cel nawigacji (rok + ewentualny miesiąc). */
 interface GridCell {
     label: string;
-    value: string;
+    y: number;
+    m: number;
     selected: boolean;
+    /** Zawiera dzisiejszą datę — obrys jak „dziś" w siatce dni. */
+    current: boolean;
     disabled: boolean;
 }
 /** Granulacja wyboru. */
 type KptDatepickerMode = 'date' | 'monthYear' | 'year' | 'month' | 'datetime' | 'time';
+/** Poziom panelu: dni → miesiące → lata → dekady. */
+type KptDatepickerView = 'day' | 'month' | 'year' | 'decade';
 /**
  * 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" />
  */
@@ -1081,6 +1097,12 @@ declare class KptDatepicker implements FormValueControl<string> {
     readonly displayFormat: _angular_core.InputSignal<"pl" | "iso">;
     /** Granulacja wyboru. */
     readonly selectionMode: _angular_core.InputSignal<KptDatepickerMode>;
+    /**
+     * 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'.
+     */
+    readonly startView: _angular_core.InputSignal<KptDatepickerView | null>;
     /** Prezentacja miesiąca w trybie 'month': słownie ('long') lub liczbą ('number'). */
     readonly monthDisplay: _angular_core.InputSignal<"number" | "long">;
     /** Format godziny: 24 lub 12 (z AM/PM). */
@@ -1100,23 +1122,49 @@ declare class KptDatepicker implements FormValueControl<string> {
     readonly open: _angular_core.ModelSignal<boolean>;
     private readonly today;
     private readonly view;
+    /** Aktualny poziom stosu widoków panelu. */
+    protected readonly panelView: _angular_core.WritableSignal<KptDatepickerView>;
+    /** Poziom, na którym klik w komórkę zatwierdza wartość zamiast schodzić niżej. */
+    protected readonly commitLevel: _angular_core.Signal<KptDatepickerView>;
+    /** Tryb 'month' nie ma roku ani dekady — wartością jest samo 'MM'. */
+    private readonly topLevel;
+    private effectiveStartView;
     protected readonly timeStr: _angular_core.WritableSignal<string>;
     protected readonly dtView: _angular_core.WritableSignal<"calendar" | "clock">;
     private readonly pendingDate;
+    /** Tarcza zamiast siatek: tryb 'time' zawsze, 'datetime' po wejściu w pasek czasu. */
+    protected readonly showClock: _angular_core.Signal<boolean>;
+    protected readonly hasFooter: _angular_core.Signal<boolean>;
     protected readonly positions: ConnectedPosition[];
     constructor();
     protected readonly viewYear: _angular_core.Signal<number>;
-    protected readonly monthLabel: _angular_core.Signal<string>;
-    protected readonly yearPageStart: _angular_core.Signal<number>;
+    protected readonly monthName: _angular_core.Signal<string>;
+    /** Początek dekady widocznej w siatce lat (1979 → 1970). */
+    private readonly decadeStart;
+    /** Początek strony dekad: 12 dekad, czyli 120 lat (1979 → 1920, strona 1920–2039). */
+    private readonly centuryStart;
     protected readonly yearRangeLabel: _angular_core.Signal<string>;
+    protected readonly decadeRangeLabel: _angular_core.Signal<string>;
+    /** Tryb 'month' nie ma po czym nawigować — siatka miesięcy jest kompletna. */
+    protected readonly hasNav: _angular_core.Signal<boolean>;
+    protected readonly navPrevLabel: _angular_core.Signal<string>;
+    protected readonly navNextLabel: _angular_core.Signal<string>;
+    /** Strzałka wstecz gasnie, gdy cała poprzednia strona wypada przed `minDate`. */
+    protected readonly canPageBack: _angular_core.Signal<boolean>;
+    protected readonly canPageForward: _angular_core.Signal<boolean>;
     private formatTime;
     /** Etykieta czasu na pasku trybu datetime (uwzględnia AM/PM). */
     protected readonly timeBarLabel: _angular_core.Signal<string>;
     protected readonly display: _angular_core.Signal<string>;
     private readonly selectedDateIso;
     protected readonly weeks: _angular_core.Signal<DayCell$1[][]>;
+    /** Rok/miesiąc bieżącej wartości — zaznaczenie w siatkach wyższych poziomów. */
+    private readonly selectedYM;
     protected readonly monthCells: _angular_core.Signal<GridCell[]>;
     protected readonly yearCells: _angular_core.Signal<GridCell[]>;
+    protected readonly decadeCells: _angular_core.Signal<GridCell[]>;
+    /** Komórki bieżącego poziomu — siatka miesięcy/lat/dekad ma jeden wspólny markup. */
+    protected readonly levelCells: _angular_core.Signal<GridCell[]>;
     private parseDate;
     private parseTime;
     private parseDateTime;
@@ -1127,19 +1175,24 @@ declare class KptDatepicker implements FormValueControl<string> {
     protected toggleOpen(): void;
     protected close(): void;
     protected selectDay(cell: DayCell$1): void;
+    /**
+     * Klik w komórkę siatki: na poziomie zatwierdzania ustawia wartość i zamyka panel,
+     * wyżej — przestawia widok i schodzi poziom niżej.
+     */
     protected selectCell(cell: GridCell): void;
+    private monthValue;
+    /** Klik w tytuł — wejście poziom wyżej w stosie widoków. */
+    protected goTo(level: KptDatepickerView): void;
     protected openClock(): void;
     protected backToCalendar(): void;
     protected commit(): void;
-    protected prevMonth(): void;
-    protected nextMonth(): void;
-    protected prevYear(): void;
-    protected nextYear(): void;
-    protected prevYearPage(): void;
-    protected nextYearPage(): void;
+    /** Strzałki ‹ › — krok zależny od poziomu: miesiąc, rok, dekada, strona dekad. */
+    private page;
+    protected pagePrev(): void;
+    protected pageNext(): void;
     protected clear(event: Event): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<KptDatepicker, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KptDatepicker, "kpt-datepicker", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "displayFormat": { "alias": "displayFormat"; "required": false; "isSignal": true; }; "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; "monthDisplay": { "alias": "monthDisplay"; "required": false; "isSignal": true; }; "hourFormat": { "alias": "hourFormat"; "required": false; "isSignal": true; }; "minuteStep": { "alias": "minuteStep"; "required": false; "isSignal": true; }; "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touch": "touch"; "open": "openChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KptDatepicker, "kpt-datepicker", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "displayFormat": { "alias": "displayFormat"; "required": false; "isSignal": true; }; "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; "startView": { "alias": "startView"; "required": false; "isSignal": true; }; "monthDisplay": { "alias": "monthDisplay"; "required": false; "isSignal": true; }; "hourFormat": { "alias": "hourFormat"; "required": false; "isSignal": true; }; "minuteStep": { "alias": "minuteStep"; "required": false; "isSignal": true; }; "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touch": "touch"; "open": "openChange"; }, never, never, true, never>;
 }
 
 interface ClockMark {
@@ -1469,19 +1522,34 @@ interface DayCell {
     day: number;
     iso: string;
     inMonth: boolean;
+    today: boolean;
     isStart: boolean;
     isEnd: boolean;
     inRange: boolean;
+    /** Pasmo zakresu wychodzi z tej komórki w prawo / dochodzi z lewej — do zaokrągleń kapsuły. */
+    rangeStart: boolean;
+    rangeEnd: boolean;
+    /** Pusty slot siatki: dni sąsiednich miesięcy przy wielu panelach (patrz `panels`). */
+    blank: boolean;
     disabled: boolean;
 }
+/** Jeden miesiąc panelu kalendarza. */
+interface MonthPanel {
+    key: string;
+    label: string;
+    weeks: DayCell[][];
+}
 /**
  * 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" />
  */
@@ -1497,6 +1565,8 @@ declare class KptDateRange implements FormValueControl<KptDateRangeValue> {
     readonly placeholder: _angular_core.InputSignal<string | undefined>;
     readonly displayFormat: _angular_core.InputSignal<"pl" | "iso">;
     readonly mode: _angular_core.InputSignal<KptDateRangeMode>;
+    /** Liczba miesięcy obok siebie (1–3; domyślnie 1). Ignorowana w trybie 'time'. */
+    readonly visibleMonths: _angular_core.InputSignalWithTransform<number, unknown>;
     readonly hourFormat: _angular_core.InputSignalWithTransform<number, unknown>;
     readonly minuteStep: _angular_core.InputSignalWithTransform<number, unknown>;
     protected readonly i18n: KptI18n;
@@ -1512,13 +1582,20 @@ declare class KptDateRange implements FormValueControl<KptDateRangeValue> {
     private readonly startDate;
     private readonly endDate;
     protected readonly positions: ConnectedPosition[];
-    protected readonly monthLabel: _angular_core.Signal<string>;
+    protected readonly panelCount: _angular_core.Signal<number>;
+    protected readonly multi: _angular_core.Signal<boolean>;
     private datePart;
     private timePart;
     private fmtDate;
     private fmtTime;
     protected readonly display: _angular_core.Signal<string>;
-    protected readonly weeks: _angular_core.Signal<DayCell[][]>;
+    /**
+     * 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.
+     */
+    protected readonly panels: _angular_core.Signal<MonthPanel[]>;
+    private buildWeeks;
     protected toggleOpen(): void;
     protected close(): void;
     protected selectDay(cell: DayCell): void;
@@ -1527,7 +1604,7 @@ declare class KptDateRange implements FormValueControl<KptDateRangeValue> {
     protected nextMonth(): void;
     protected clear(event: Event): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<KptDateRange, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KptDateRange, "kpt-date-range", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "displayFormat": { "alias": "displayFormat"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "hourFormat": { "alias": "hourFormat"; "required": false; "isSignal": true; }; "minuteStep": { "alias": "minuteStep"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touch": "touch"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KptDateRange, "kpt-date-range", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "displayFormat": { "alias": "displayFormat"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "visibleMonths": { "alias": "visibleMonths"; "required": false; "isSignal": true; }; "hourFormat": { "alias": "hourFormat"; "required": false; "isSignal": true; }; "minuteStep": { "alias": "minuteStep"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touch": "touch"; }, never, never, true, never>;
 }
 
 /**
@@ -2261,6 +2338,18 @@ declare class KptPaginator {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<KptPaginator, "kpt-paginator", never, { "length": { "alias": "length"; "required": true; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; "isSignal": true; }; "pageIndex": { "alias": "pageIndex"; "required": false; "isSignal": true; }; "pageSizeOptions": { "alias": "pageSizeOptions"; "required": false; "isSignal": true; }; }, { "pageSize": "pageSizeChange"; "pageIndex": "pageIndexChange"; }, never, never, true, never>;
 }
 
+/** Wbudowana agregacja kolumny w wierszu podsumowania. */
+type KptSummaryFn = 'sum' | 'avg' | 'min' | 'max' | 'count';
+interface KptColumnSummary {
+    /**
+     * Agregacja wbudowana albo własna funkcja liczona na całym zbiorze wierszy
+     * (po filtrach, ze wszystkich stron).
+     */
+    fn: KptSummaryFn | ((rows: readonly Record<string, unknown>[]) => unknown);
+    /** Formatowanie wyniku (np. waluta). Bez niego wartość renderowana jest surowo. */
+    format?: (value: unknown) => string;
+}
+
 /** Rodzaj kontrolki filtra w nagłówku kolumny. */
 type KptColumnFilterType = 'text' | 'number' | 'select' | 'dateRange' | 'numberRange' | 'slider';
 interface KptColumnFilter {
@@ -2307,6 +2396,8 @@ interface KptColumn {
     filter?: KptColumnFilter;
     /** Włącza edycję inline (klik w komórkę zamienia wartość na kontrolkę tego typu). */
     edit?: KptColumnEdit;
+    /** Włącza agregację tej kolumny w wierszu podsumowania (`<tfoot>`, nad paginatorem). */
+    summary?: KptColumnSummary;
 }
 /** Zdarzenie po zatwierdzeniu edycji komórki. */
 interface KptCellEditEvent<T> {
@@ -2377,6 +2468,13 @@ declare class KptDataTable<T = Record<string, unknown>> {
     readonly expandable: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /** Zezwala na rozwinięcie wielu wierszy naraz (domyślnie tak). */
     readonly multiExpand: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Etykieta wiersza podsumowania; bez wartości używa i18n (`dataTable.total`). */
+    readonly summaryLabel: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Gotowe wartości podsumowania (pole → wartość). Nadpisują wyliczenia po stronie klienta,
+     * a w trybie `lazy` są ich jedynym źródłem (tabela ma wtedy tylko bieżącą stronę).
+     */
+    readonly summaryValues: _angular_core.InputSignal<Record<string, unknown> | null>;
     readonly selection: _angular_core.ModelSignal<T[]>;
     /** Rozwinięte wiersze (dwukierunkowo). */
     readonly expandedRows: _angular_core.ModelSignal<T[]>;
@@ -2491,8 +2589,32 @@ declare class KptDataTable<T = Record<string, unknown>> {
     private readonly sorted;
     protected readonly filteredCount: _angular_core.Signal<number>;
     protected readonly paged: _angular_core.Signal<readonly T[]>;
+    /** Wiodące kolumny systemowe (rozwijanie + zaznaczanie) — poza `visibleOrderedColumns()`. */
+    private readonly leadingCells;
     protected readonly colspan: _angular_core.Signal<number>;
     protected readonly displayCount: _angular_core.Signal<number>;
+    /** Etykieta wiersza podsumowania (input albo domyślna z i18n). */
+    protected readonly summaryLabelText: _angular_core.Signal<string>;
+    /**
+     * Zbiór do agregacji: wszystkie wiersze po filtrach (a więc ze wszystkich stron — `paged()`
+     * tnie dopiero po tym kroku). Przy `lazy` tabela ma tylko bieżącą stronę, więc nie liczy nic
+     * sama — jedynym źródłem jest wtedy `summaryValues`.
+     */
+    private readonly summarySource;
+    /** Pola z podsumowaniem: kolumny z `summary` (tylko widoczne) + klucze podane w `summaryValues`. */
+    private readonly summaryFields;
+    protected readonly hasSummary: _angular_core.Signal<boolean>;
+    /** Indeks pierwszej podsumowywanej kolumny — do niej scala się etykieta. */
+    protected readonly summaryStartIndex: _angular_core.Signal<number>;
+    /**
+     * Colspan komórki z etykietą: kolumny systemowe + kolumny przed pierwszą podsumowywaną.
+     * Zero (pierwsza widoczna kolumna jest liczona) = etykieta nie ma się gdzie zmieścić i nie
+     * renderuje się wcale.
+     */
+    protected readonly summaryLabelSpan: _angular_core.Signal<number>;
+    /** Gotowe teksty komórek podsumowania (pole → tekst); pusty string dla braku wartości. */
+    private readonly summaryTexts;
+    protected summaryText(field: string): string;
     private parseWidthPx;
     /** Mapa pole → przesunięcie left (px) dla wiodących zamrożonych kolumn. */
     /** Suma szerokości wiodących kolumn systemowych (rozwijanie + zaznaczanie) w px. */
@@ -2519,7 +2641,7 @@ declare class KptDataTable<T = Record<string, unknown>> {
     protected getValue(row: T, field: string): unknown;
     protected trackRow: (row: T) => unknown;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<KptDataTable<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KptDataTable<any>, "kpt-data-table", never, { "columns": { "alias": "columns"; "required": true; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "filterable": { "alias": "filterable"; "required": false; "isSignal": true; }; "filterRowPosition": { "alias": "filterRowPosition"; "required": false; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; "isSignal": true; }; "pageSizeOptions": { "alias": "pageSizeOptions"; "required": false; "isSignal": true; }; "selectable": { "alias": "selectable"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; "rowKey": { "alias": "rowKey"; "required": false; "isSignal": true; }; "scrollHeight": { "alias": "scrollHeight"; "required": false; "isSignal": true; }; "virtualScroll": { "alias": "virtualScroll"; "required": false; "isSignal": true; }; "rowHeight": { "alias": "rowHeight"; "required": false; "isSignal": true; }; "reorderable": { "alias": "reorderable"; "required": false; "isSignal": true; }; "exportable": { "alias": "exportable"; "required": false; "isSignal": true; }; "exportFilename": { "alias": "exportFilename"; "required": false; "isSignal": true; }; "lazy": { "alias": "lazy"; "required": false; "isSignal": true; }; "totalRecords": { "alias": "totalRecords"; "required": false; "isSignal": true; }; "expandable": { "alias": "expandable"; "required": false; "isSignal": true; }; "multiExpand": { "alias": "multiExpand"; "required": false; "isSignal": true; }; "selection": { "alias": "selection"; "required": false; "isSignal": true; }; "expandedRows": { "alias": "expandedRows"; "required": false; "isSignal": true; }; "hiddenFields": { "alias": "hiddenFields"; "required": false; "isSignal": true; }; }, { "selection": "selectionChange"; "expandedRows": "expandedRowsChange"; "hiddenFields": "hiddenFieldsChange"; "rowClick": "rowClick"; "lazyLoad": "lazyLoad"; "cellEdit": "cellEdit"; }, ["cellDefs", "cellEditDefs", "rowDetailDef"], ["[kptPaginatorActions]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KptDataTable<any>, "kpt-data-table", never, { "columns": { "alias": "columns"; "required": true; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "filterable": { "alias": "filterable"; "required": false; "isSignal": true; }; "filterRowPosition": { "alias": "filterRowPosition"; "required": false; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; "isSignal": true; }; "pageSizeOptions": { "alias": "pageSizeOptions"; "required": false; "isSignal": true; }; "selectable": { "alias": "selectable"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; "rowKey": { "alias": "rowKey"; "required": false; "isSignal": true; }; "scrollHeight": { "alias": "scrollHeight"; "required": false; "isSignal": true; }; "virtualScroll": { "alias": "virtualScroll"; "required": false; "isSignal": true; }; "rowHeight": { "alias": "rowHeight"; "required": false; "isSignal": true; }; "reorderable": { "alias": "reorderable"; "required": false; "isSignal": true; }; "exportable": { "alias": "exportable"; "required": false; "isSignal": true; }; "exportFilename": { "alias": "exportFilename"; "required": false; "isSignal": true; }; "lazy": { "alias": "lazy"; "required": false; "isSignal": true; }; "totalRecords": { "alias": "totalRecords"; "required": false; "isSignal": true; }; "expandable": { "alias": "expandable"; "required": false; "isSignal": true; }; "multiExpand": { "alias": "multiExpand"; "required": false; "isSignal": true; }; "summaryLabel": { "alias": "summaryLabel"; "required": false; "isSignal": true; }; "summaryValues": { "alias": "summaryValues"; "required": false; "isSignal": true; }; "selection": { "alias": "selection"; "required": false; "isSignal": true; }; "expandedRows": { "alias": "expandedRows"; "required": false; "isSignal": true; }; "hiddenFields": { "alias": "hiddenFields"; "required": false; "isSignal": true; }; }, { "selection": "selectionChange"; "expandedRows": "expandedRowsChange"; "hiddenFields": "hiddenFieldsChange"; "rowClick": "rowClick"; "lazyLoad": "lazyLoad"; "cellEdit": "cellEdit"; }, ["cellDefs", "cellEditDefs", "rowDetailDef"], ["[kptPaginatorActions]"], true, never>;
 }
 
 /**
@@ -3107,5 +3229,5 @@ declare class KptSpeedDial<T = unknown> {
 }
 
 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 };
-export type { DeepPartial, KptAlertVariant, KptAvatarItem, KptAvatarShape, KptAvatarSize, KptBadgeSize, KptBadgeVariant, KptBreadcrumbItem, KptBreakpoint, KptButtonSize, KptButtonVariant, KptCardVariant, KptCellEditEvent, KptChipVariant, KptColumn, KptColumnEdit, KptColumnEditType, KptConfirmOptions, KptConfirmRequest, KptDateRangeValue, KptDividerOrientation, KptDrawerPosition, KptFormFieldControl, KptGalleriaItem, KptI18nConfig, KptIconName, KptInputType, KptLocale, KptMenuItem, KptMessages, KptMeterItem, KptOption, KptProgressVariant, KptRichTool, KptRichToolbar, KptSidenavMode, KptSkeletonVariant, KptSliderValue, KptSpeedDialDirection, KptSplitterOrientation, KptTableLazyState, KptTimelineItem, KptToast, KptToastOptions, KptTooltipPosition, KptTreeNode };
+export type { DeepPartial, KptAlertVariant, KptAvatarItem, KptAvatarShape, KptAvatarSize, KptBadgeSize, KptBadgeVariant, KptBreadcrumbItem, KptBreakpoint, KptButtonSize, KptButtonVariant, KptCardVariant, KptCellEditEvent, KptChipVariant, KptColumn, KptColumnEdit, KptColumnEditType, KptColumnSummary, KptConfirmOptions, KptConfirmRequest, KptDateRangeValue, KptDatepickerMode, KptDatepickerView, KptDividerOrientation, KptDrawerPosition, KptFormFieldControl, KptGalleriaItem, KptI18nConfig, KptIconName, KptInputType, KptLocale, KptMenuItem, KptMessages, KptMeterItem, KptOption, KptProgressVariant, KptRichTool, KptRichToolbar, KptSidenavMode, KptSkeletonVariant, KptSliderValue, KptSpeedDialDirection, KptSplitterOrientation, KptSummaryFn, KptTableLazyState, KptTimelineItem, KptToast, KptToastOptions, KptTooltipPosition, KptTreeNode };
 //# sourceMappingURL=konce-pt-angular.d.ts.map