@konce-pt/angular 0.7.5 → 0.7.7

package/CHANGELOG.md

@@ -1,5 +1,161 @@
 # @konce-pt/angular
 
+## 0.7.7
+
+### Minor Changes
+
+- 47ada55: `kpt-data-table` — edycja inline komórek, a przy okazji publiczny stan panelu w `kpt-select`
+  i `kpt-datepicker`.
+
+  - `KptColumn.edit` (`{ type, options?, placeholder?, min?, max?, step? }`) włącza edycję kolumny.
+    Klik w komórkę (albo Enter — komórka edytowalna ma `tabindex="0"`) zamienia wartość na kontrolkę:
+    `text` → `kpt-input`, `number` → `kpt-input-number`, `date` → `kpt-datepicker`, `select`
+    i `multiselect` → `kpt-select` (drugi z `multiple filter`). Dla edytorów na overlayu panel otwiera
+    się od razu, więc wybór to jedno kliknięcie.
+  - `cellEdit` (`output<KptCellEditEvent<T>>`) emituje `{ row, field, value, updatedRow }` po
+    zatwierdzeniu i tylko wtedy, gdy wartość faktycznie się zmieniła (tablice porównywane po
+    zawartości, więc powrót do tego samego zestawu nic nie wysyła). `updatedRow` to gotowe body
+    żądania — tabela sama nic nie zapisuje, jak przy `lazyLoad`.
+  - `kptCellEdit` — dyrektywa szablonu własnego edytora, gdy wbudowane typy nie wystarczają.
+    Kontekst: `$implicit` = wartość, `row`, `commit(value)`, `cancel()`.
+  - `open` w `kpt-select` i `kpt-datepicker` jest teraz publicznym `model(false)` — dwukierunkowe
+    `[(open)]` i `(openChange)`, spójnie z `kpt-dialog`/`kpt-drawer`. Bez tego nie da się z zewnątrz
+    odróżnić „user skończył wybierać" od „pole straciło fokus": `touch` leci również z blur triggera,
+    czyli już przy naciśnięciu myszy na opcji w panelu (panel żyje w kontenerze CDK Overlay przy
+    `<body>`). Inicjalizacja panelu przy otwarciu przeniosła się z `toggleOpen()` do efektu na `open`,
+    żeby otwarcie z zewnątrz ustawiało widok kalendarza i resetowało filtr tak samo jak klik w trigger.
+
+  `exportCsv()` i eksport nie zmieniają zachowania. Kolumny bez `edit` (i tabele bez `cellEdit`)
+  działają dokładnie jak dotąd.
+
+- `kpt-data-table` — ukrywanie kolumn przez `hiddenFields` i slot `kptPaginatorActions`.
+
+  - `hiddenFields` (`model<readonly string[]>`, dwukierunkowe) trzyma pola ukrytych kolumn.
+    Komponent celowo nie dostarcza UI do zarządzania widocznością — to minimalny hak do podpięcia
+    własnego przełącznika. Renderowanie (nagłówek, wiersz filtrów, wiersze, `colspan`, sticky-offsety
+    kolumn zamrożonych) i `exportCsv()` respektują ukryte kolumny; ukrycie nie wyłącza kolumny
+    z globalnego wyszukiwania ani z filtrów per-kolumna, a kolejność zapamiętana przez `reorderable`
+    przeżywa ukrycie i pokazanie z powrotem.
+  - Wiersz paginatora dostał slot projekcji `[kptPaginatorActions]` po lewej stronie `kpt-paginator`
+    (który ma teraz `flex: 1 1 auto`, więc bez projekcji wygląda dokładnie jak dotąd) — miejsce na
+    kompaktowy przycisk obok paginatora.
+  - Ikona `adjustments-horizontal` doszła do wbudowanego rejestru, więc przycisk dostosowywania
+    kolumn nie wymaga `provideKptTablerIcons()`.
+
+  Przy okazji naprawione przestawianie kolumn: `reorderable` operowało na indeksie z pętli `@for`,
+  co po odfiltrowaniu kolumn ukrytych przestawiałoby niewłaściwą kolumnę. Teraz identyfikuje kolumny
+  po `field`.
+
+  Gotowe UI dostosowywania kolumn (przycisk, dialog z checkboxami, zapis w `localStorage`) żyje jako
+  przykład w playgroundzie — nie wchodzi do biblioteki.
+
+### Patch Changes
+
+- Uzupełniona dokumentacja kontrolek `avatar`, `avatar-group`, `input-number`, `knob` i `slider`
+  (`llms.txt`) oraz poprawiony przykład w JSDoc `kpt-knob`.
+
+  Poprzedni przykład pokazywał `[formField]` razem z `[min]`/`[max]`, co jest błędem kompilacji:
+  pod `[formField]` zakres bierze się ze schematu (`min(path.level, 0)`, `max(path.level, 100)`),
+  a dyrektywa sama wstrzykuje go w wejścia. Jawne `[min]`/`[max]` należą do wariantu z `[(value)]`.
+  Sama implementacja bez zmian.
+
+- Domknięcie dwóch bliźniaczych luk, których pierwszy audyt nie objął — znalezionych przy
+  ponownej weryfikacji już naprawionych funkcji.
+
+  - `renderMarkerHtml()` w mapie escapuje teraz również `shape`. Poprzednia poprawka objęła
+    `color` i `contrast`, ale `shape` — trzecie pole trafiające do sklejanego HTML — wciąż szło
+    surowo do atrybutu `class`, więc wartość z CMS-a czy API bez walidacji runtime mogła wyrwać się
+    z atrybutu tym samym mechanizmem. Trzy legalne wartości (`pin`, `dot`, `square`) nie zawierają
+    znaków specjalnych HTML, więc wygląd jest bez zmian.
+  - Tooltip wykresu wiązał kolor kropki przez `[style.background]` — shorthand akceptujący `url()` —
+    zasilany niewalidowanym `KptChartSeries.color`. Zamiana na `background-color`, czyli ten sam fix,
+    który wcześniej dostały `color-picker`, `meter-group`, `roadmap` i legenda mapy.
+
+- Poprawki bezpieczeństwa z audytu: dwa krytyczne XSS, niebezpieczne publiczne API rejestru ikon
+  oraz CSV formula injection.
+
+  - `kpt-rich-text` zapisywał `value` wprost do `innerHTML` bez sanitizera wszędzie poza ścieżką
+    wklejania. Efekt synchronizujący sanityzuje teraz **każdy** zewnętrzny zapis wartości.
+  - `marker-html.ts` (mapa) wstawiał kolor kategorii surowo do atrybutu `style` — `colorVarOf`
+    i `foregroundVarOf` mają whitelistę `var(--kpt-*)`, co zamyka naraz wyrwanie się z atrybutu
+    i wstrzyknięcie CSS średnikiem.
+  - `KptIconRegistry.register()` przyjmował dowolny SVG jako string. Teraz sanityzuje do allowlisty
+    geometrii (`path`, `circle`, `rect`, `g`, `line`, `polygon`, `polyline`, `ellipse`) — bez zmian
+    dla zestawu wbudowanego i pełnego Tablera (5130 ikon), bo oba używają wyłącznie `<path>`.
+  - Eksport CSV z `kpt-data-table` poprzedza apostrofem komórki zaczynające się od `=`, `+`, `-`, `@`
+    (formula injection), a filtr `javascript:` w narzędziu linku, `normalizeUrl` w mapie i tła CSS
+    przyjmujące `url()` przeszły z blocklist na allowlisty schematów.
+
+  `escapeCsvCell`, `normalizeUrl` i nowy `sanitizeUrl` wydzieliły się do osobnych plików pure-TS,
+  żeby dało się je testować przez `node --test`.
+
+  Dla danych zgodnych z kontraktem zachowanie jest bez zmian. Dwa świadome wyjątki: URL bez schematu
+  dostaje prefiks `https://`, a komórki CSV zaczynające się od znaku formuły — wiodący apostrof.
+
+## 0.7.6
+
+### Minor Changes
+
+- 1e20c5e: `kpt-badge` — nowe wejście `size` (`'sm' | 'md' | 'lg'`, domyślnie `'md'`).
+
+  Wysokość (`1rem` / `1.25rem` / `1.5rem`) steruje resztą geometrii: krój to `calc(--_size * 0.6)`,
+  wcięcie boczne i średnica kropki skalują się razem z nią. `md` wychodzi identycznie jak dotąd
+  (0.75rem kroju, kropka 0.65rem), więc istniejące użycia nie zmieniają wyglądu.
+
+  `sm` jest po to, żeby wstawić odznakę w wiersz tekstu — przy etykiecie, w pozycji menu, w komórce
+  tabeli — bez rozpychania wiersza.
+
+- 8dd8e41: `KptMenuItem` — wiersz nagłówkowy i odznaka na pozycji.
+
+  - `header: true` zamienia pozycję w nieklikalny blok tekstu: `avatar` (`{ src?, name?, icon? }`,
+    renderowany przez `kpt-avatar`), `label` w półgrubym kroju i `description` drugą linią. Pokrywa
+    oba typowe zastosowania nagłówka menu: dane zalogowanego użytkownika (nazwa + e-mail) i opis
+    funkcji menu. To `<div role="presentation">`, więc nie wchodzi do nawigacji klawiaturą i nie
+    narusza kontraktu dzieci `role="menu"`.
+  - `badge` (`string | number`) plus `badgeVariant` dokładają odznakę wyrównaną do prawej krawędzi
+    pozycji — licznik powiadomień, status. Renderuje ją `kpt-badge`, więc wartości powyżej `max`
+    skracają się do `99+`, a wartość wchodzi w nazwę dostępną pozycji.
+  - `description` działa też na zwykłych pozycjach — dwuwierszowa pozycja menu.
+
+  Pola honorują `kpt-menu`, `kpt-context-menu` i `kpt-split-button`. `kpt-menubar`, `kpt-megamenu`
+  i `kpt-speed-dial` dzielą typ, ale renderowania nie zmieniają. Wszystkie pola są opcjonalne —
+  istniejące `items` działają bez zmian.
+
+- d67fde2: `kpt-sidenav` — slot stopki `kptSidenavFooter` przyklejonej do dołu panelu.
+
+  Element z tym atrybutem trafia poza obszar przewijany, więc zostaje na dole niezależnie od długości
+  nawigacji — blok zalogowanego użytkownika, przełącznik motywu czy numer wersji nie odjeżdżają razem
+  z listą pozycji. Stopka dostaje górną kreskę na pełną szerokość panelu i ten sam padding co nawigacja.
+  W szynie ikon (`sidenavRailBreakpoint`) tekst stopki chowa się tym samym atrybutem `kptNavLabel`
+  co etykiety pozycji.
+
+  Wewnątrz komponentu `padding`, `gap` i `overflow-y` przeniosły się z hosta do obszaru przewijanego —
+  panele bez stopki wyglądają identycznie jak dotąd. Zmiana dotyka tylko aplikacji, które celowały
+  w `kpt-sidenav > *` selektorem dziecka bezpośredniego.
+
+### Patch Changes
+
+- Migotanie przycisków i paneli na pierwszej klatce — poprawki `kpt-button`, `kpt-drawer`
+  i `kpt-bottom-sheet`.
+
+  Wspólna przyczyna: reguły stylu warunkowane atrybutem `[attr.data-*]`, który Angular ustawia
+  dopiero w przebiegu aktualizacji. Przez jedną klatkę komponent stał więc w stanie bazowym
+  i dopiero potem animował się do właściwego.
+
+  - **Przyciski** — sprzężenie zwrotne hovera i aktywności niesie pseudoelement `::after`
+    (`opacity` 0 → 1) zamiast animowanego `background-color`. Warstwa startuje przezroczysta,
+    więc zmiana jej koloru na pierwszej klatce jest niewidoczna. `inset: 0` trzyma ją wewnątrz
+    ramki, dzięki czemu obrys wariantu `outline` zostaje widoczny pod kursorem. Ten sam wzorzec
+    dostają `kpt-icon-button`, `kpt-fab` i `kpt-split-button`.
+  - **`kpt-drawer`** — geometria pozycji domyślnej i przesunięcie poza ekran wróciły do reguły
+    bazowej, więc zamknięty panel nie pokazuje się na moment przed animacją.
+  - **`kpt-drawer` i `kpt-bottom-sheet`** — zamknięty panel wypada z kolejki Tab i z drzewa
+    dostępności przez `visibility: hidden`, nie przez `inert`. Jest poprawny już na pierwszej
+    klatce, bez czekania na JavaScript, a animacja wjazdu zostaje (czego `display: none`
+    by nie pozwolił).
+
+  Wszystkie trzy komponenty honorują teraz `prefers-reduced-motion: reduce`.
+
 ## 0.7.5
 
 ### Minor Changes

package/fesm2022/konce-pt-angular-charts.mjs

@@ -612,7 +612,7 @@ function KptChartTooltip_Conditional_0_For_3_Template(rf, ctx) { if (rf & 1) {
 } if (rf & 2) {
     const row_r2 = ctx.$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵstyleProp("background", row_r2.color);
+    i0.ɵɵstyleProp("background-color", row_r2.color);
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(row_r2.name);
     i0.ɵɵadvance(2);
@@ -673,7 +673,7 @@ class KptChartTooltip {
         }
         @for (row of t.rows; track $index) {
           <div class="kpt-chart__tooltip-row">
-            <span class="kpt-chart__tooltip-dot" [style.background]="row.color"></span>
+            <span class="kpt-chart__tooltip-dot" [style.background-color]="row.color"></span>
             <span class="kpt-chart__tooltip-name">{{ row.name }}</span>
             <span class="kpt-chart__tooltip-val">{{ row.value }}</span>
           </div>