@konce-pt/angular 0.7.10 → 0.7.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (87) hide show
  1. package/CHANGELOG.md +44 -0
  2. package/charts/src/lib/llms.txt +30 -30
  3. package/fesm2022/konce-pt-angular.mjs +1403 -368
  4. package/fesm2022/konce-pt-angular.mjs.map +1 -1
  5. package/grid/src/lib/llms.txt +48 -48
  6. package/map/src/lib/llms.txt +446 -446
  7. package/package.json +1 -1
  8. package/roadmap/src/lib/llms.txt +74 -74
  9. package/src/lib/accordion/llms.txt +9 -9
  10. package/src/lib/alert/llms.txt +10 -10
  11. package/src/lib/app-shell/llms.txt +59 -59
  12. package/src/lib/auth/llms.txt +104 -0
  13. package/src/lib/autocomplete/llms.txt +8 -8
  14. package/src/lib/avatar/llms.txt +9 -9
  15. package/src/lib/avatar-group/llms.txt +8 -8
  16. package/src/lib/badge/llms.txt +9 -9
  17. package/src/lib/bottom-sheet/llms.txt +14 -14
  18. package/src/lib/breadcrumb/llms.txt +7 -7
  19. package/src/lib/breakpoint/llms.txt +21 -21
  20. package/src/lib/button/llms.txt +34 -34
  21. package/src/lib/button-group/llms.txt +5 -5
  22. package/src/lib/card/llms.txt +27 -27
  23. package/src/lib/carousel/llms.txt +11 -11
  24. package/src/lib/checkbox/llms.txt +7 -7
  25. package/src/lib/chip/llms.txt +6 -6
  26. package/src/lib/chips-input/llms.txt +9 -9
  27. package/src/lib/color-picker/llms.txt +7 -7
  28. package/src/lib/confirm/llms.txt +11 -11
  29. package/src/lib/context-menu/llms.txt +10 -10
  30. package/src/lib/data-table/llms.txt +170 -170
  31. package/src/lib/data-view/llms.txt +8 -8
  32. package/src/lib/date-range/llms.txt +25 -25
  33. package/src/lib/datepicker/llms.txt +48 -48
  34. package/src/lib/dialog/llms.txt +62 -62
  35. package/src/lib/divider/llms.txt +9 -9
  36. package/src/lib/drawer/llms.txt +18 -18
  37. package/src/lib/empty/llms.txt +9 -9
  38. package/src/lib/fab/llms.txt +12 -12
  39. package/src/lib/fieldset/llms.txt +9 -9
  40. package/src/lib/file-upload/llms.txt +10 -10
  41. package/src/lib/form-field/llms.txt +45 -45
  42. package/src/lib/galleria/llms.txt +7 -7
  43. package/src/lib/i18n/llms.txt +21 -21
  44. package/src/lib/icon/llms.txt +20 -20
  45. package/src/lib/icon-button/llms.txt +8 -8
  46. package/src/lib/image/llms.txt +9 -9
  47. package/src/lib/input/llms.txt +27 -25
  48. package/src/lib/input-mask/llms.txt +10 -10
  49. package/src/lib/input-number/llms.txt +34 -34
  50. package/src/lib/input-otp/llms.txt +11 -11
  51. package/src/lib/knob/llms.txt +14 -14
  52. package/src/lib/listbox/llms.txt +8 -8
  53. package/src/lib/megamenu/llms.txt +13 -13
  54. package/src/lib/menu/llms.txt +26 -26
  55. package/src/lib/menubar/llms.txt +10 -10
  56. package/src/lib/meter-group/llms.txt +8 -8
  57. package/src/lib/order-list/llms.txt +8 -8
  58. package/src/lib/paginator/llms.txt +12 -12
  59. package/src/lib/panel/llms.txt +12 -12
  60. package/src/lib/password/llms.txt +12 -9
  61. package/src/lib/pick-list/llms.txt +8 -8
  62. package/src/lib/popover/llms.txt +8 -8
  63. package/src/lib/progress/llms.txt +6 -6
  64. package/src/lib/radio-group/llms.txt +5 -5
  65. package/src/lib/rating/llms.txt +6 -6
  66. package/src/lib/rich-text/llms.txt +51 -32
  67. package/src/lib/scroll-top/llms.txt +7 -7
  68. package/src/lib/select/llms.txt +26 -26
  69. package/src/lib/sidenav/llms.txt +24 -24
  70. package/src/lib/skeleton/llms.txt +6 -6
  71. package/src/lib/slider/llms.txt +17 -17
  72. package/src/lib/speed-dial/llms.txt +7 -7
  73. package/src/lib/spinner/llms.txt +5 -5
  74. package/src/lib/split-button/llms.txt +15 -15
  75. package/src/lib/splitter/llms.txt +11 -11
  76. package/src/lib/stepper/llms.txt +10 -10
  77. package/src/lib/switch/llms.txt +10 -10
  78. package/src/lib/switch-group/llms.txt +16 -16
  79. package/src/lib/tabs/llms.txt +10 -10
  80. package/src/lib/textarea/llms.txt +5 -5
  81. package/src/lib/timeline/llms.txt +10 -10
  82. package/src/lib/toast/llms.txt +10 -10
  83. package/src/lib/toolbar/llms.txt +31 -31
  84. package/src/lib/tooltip/llms.txt +21 -21
  85. package/src/lib/tree/llms.txt +6 -6
  86. package/types/konce-pt-angular.d.ts +316 -7
  87. package/types/konce-pt-angular.d.ts.map +1 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@konce-pt/angular",
3
- "version": "0.7.10",
3
+ "version": "0.7.12",
4
4
  "description": "Open-source Angular 22 component library on Signals & Signal Forms — 70+ components, rich data table, zoneless, fully tokenized. Selektory kpt-*, klasy Kpt*.",
5
5
  "license": "MIT",
6
6
  "author": "konce.pt",
@@ -1,112 +1,112 @@
1
1
  # KptRoadmap (kpt-roadmap)
2
2
 
3
- Roadmapa — wiersze zadań na poziomej osi czasu (widok typu Gantt). Kolumna etykiet i nagłówek osi
4
- są przyklejone przy przewijaniu, paski pozycjonowane procentowo, zależności rysuje warstwa SVG.
3
+ A roadmap — rows of tasks on a horizontal timeline (a Gantt-style view). The label column and the axis header
4
+ stay stuck while scrolling, the bars are positioned as percentages, and dependencies are drawn by an SVG layer.
5
5
  Import: `import { KptRoadmap } from '@konce-pt/angular/roadmap';`
6
6
 
7
- ## Selektor
8
- `kpt-roadmap` — standalone, OnPush, zoneless. Generyk `KptRoadmap<TItem, TGroup>` typuje pole `meta`.
7
+ ## Selector
8
+ `kpt-roadmap` — standalone, OnPush, zoneless. The generic `KptRoadmap<TItem, TGroup>` types the `meta` field.
9
9
 
10
- ## Wejścia
11
- - `config`: KptRoadmapConfig (wymagane) — dane i wszystkie opcje
12
- - `scrollHeight`: string | null — stała wysokość, np. '420px'; włącza przyklejony nagłówek
13
- - `labelWidth`: string — szerokość kolumny etykiet (domyślnie '14rem')
14
- - `cellWidthPx`: number | null — szerokość kolumny osi; brak ⇒ wartość zależna od zoomu
15
- - `showToday`: boolean — znacznik „dziś" (domyślnie true)
16
- - `virtual`: boolean — renderuje tylko widoczne wiersze; warto od ~100 wierszy
10
+ ## Inputs
11
+ - `config`: KptRoadmapConfig (required) — the data and every option
12
+ - `scrollHeight`: string | null — a fixed height, e.g. '420px'; enables the sticky header
13
+ - `labelWidth`: string — the width of the label column (default '14rem')
14
+ - `cellWidthPx`: number | null — the width of an axis column; without it the value depends on the zoom
15
+ - `showToday`: boolean — the "today" marker (default true)
16
+ - `virtual`: boolean — renders only the visible rows; worth it from roughly 100 rows up
17
17
 
18
- ## Model / zdarzenia
19
- - `collapsedGroups`: model<string[]> — dwukierunkowe id zwiniętych grup
18
+ ## Model / events
19
+ - `collapsedGroups`: model<string[]> — the two-way ids of collapsed groups
20
20
  - `itemClick`: output<KptRoadmapItem>
21
- - `rangeChange`: output<KptTimeRange> — wyliczony zakres osi
21
+ - `rangeChange`: output<KptTimeRange> — the computed axis range
22
22
 
23
23
  ## KptRoadmapConfig
24
- - `items`: KptRoadmapItem[] (wymagane)
24
+ - `items`: KptRoadmapItem[] (required)
25
25
  - `groups?`: KptRoadmapGroup[]
26
- - `links?`: KptRoadmapLink[] — zależności podane grafowo
27
- - `zoom?`: 'year' | 'quarter' | 'month' | 'week' | 'day' | 'hour' (domyślnie 'week')
28
- - `range?`: { start?: number; end?: number } — brakujący kraniec wyliczany z danych
26
+ - `links?`: KptRoadmapLink[] — dependencies given as a graph
27
+ - `zoom?`: 'year' | 'quarter' | 'month' | 'week' | 'day' | 'hour' (default 'week')
28
+ - `range?`: { start?: number; end?: number } — a missing end is computed from the data
29
29
  - `locale?`: string; `today?`: Date | number | string
30
- - `timeline?`, `rows?`, `dependencies?`, `interaction?` — opcje szczegółowe
30
+ - `timeline?`, `rows?`, `dependencies?`, `interaction?` — the detailed options
31
31
 
32
32
  ### KptRoadmapItem
33
- - `id`: string, `label`: string (wymagane)
34
- - `start`: Date | number | string; `end?`: to samo — brak `end` oznacza kamień milowy
33
+ - `id`: string, `label`: string (required)
34
+ - `start`: Date | number | string; `end?`: the same — no `end` means a milestone
35
35
  - `sublabel?`, `icon?`, `disabled?`
36
36
  - `variant?`: 'neutral' | 'primary' | 'success' | 'danger' | 'warning' | 'info'
37
- - `color?`: string — dowolny kolor CSS, nadpisuje `variant`
38
- - `progress?`: number 0..1 — wypełnienie wewnątrz paska
39
- - `groupId?`: string; `dependsOn?`: (string | KptRoadmapLink)[] — sam string oznacza zależność 'FS'
40
- - `milestone?`: boolean — wymusza romb
37
+ - `color?`: string — any CSS color, overriding `variant`
38
+ - `progress?`: number 0..1 — the fill inside the bar
39
+ - `groupId?`: string; `dependsOn?`: (string | KptRoadmapLink)[] — a bare string means an 'FS' dependency
40
+ - `milestone?`: boolean — forces a diamond
41
41
  - `meta?`: TItem
42
- - Pola `draggable`, `resizable`, `locked`, `constraints` są zarezerwowane pod edycję i dziś ignorowane.
42
+ - The `draggable`, `resizable`, `locked` and `constraints` fields are reserved for editing and are ignored today.
43
43
 
44
44
  ### KptRoadmapGroup
45
- - `id`, `label` (wymagane); `sublabel?`, `parentId?`, `collapsed?`, `variant?`, `color?`
46
- - `summary?`: 'auto' | 'none' — 'auto' rysuje pasek zbiorczy od min(start) do max(end) dzieci
45
+ - `id`, `label` (required); `sublabel?`, `parentId?`, `collapsed?`, `variant?`, `color?`
46
+ - `summary?`: 'auto' | 'none' — 'auto' draws a rolled-up bar from min(start) to max(end) of the children
47
47
 
48
48
  ### KptTimelineOptions (`config.timeline`)
49
- - `weekendDays?`: number[] (domyślnie [0, 6]); `weekPrefix?`: string (domyślnie z i18n)
50
- - `workHours?`: { from, to, mode?: 'skip' | 'dim', skipWeekends? } — tylko przy `zoom: 'hour'`;
51
- 'skip' wycina noce z osi, 'dim' zostawia kolumny wyszarzone
52
- - `positionMode?`: 'uniform' (domyślnie) | 'linear'
53
- - `bandUnit?`: jednostka górnego poziomu nagłówka; `maxCells?`: number (domyślnie 4000)
49
+ - `weekendDays?`: number[] (default [0, 6]); `weekPrefix?`: string (from i18n by default)
50
+ - `workHours?`: { from, to, mode?: 'skip' | 'dim', skipWeekends? } — only with `zoom: 'hour'`;
51
+ 'skip' cuts the nights out of the axis, 'dim' leaves the columns greyed out
52
+ - `positionMode?`: 'uniform' (default) | 'linear'
53
+ - `bandUnit?`: the unit of the header's top level; `maxCells?`: number (default 4000)
54
54
 
55
55
  ### KptRoadmapRowOptions (`config.rows`)
56
- - `mode?`: 'row-per-item' (domyślnie) | 'pack' — 'pack' układa nienachodzące zadania w jednym wierszu
56
+ - `mode?`: 'row-per-item' (default) | 'pack' — 'pack' lays non-overlapping tasks out in a single row
57
57
  - `itemHeight?`, `groupHeight?`, `laneHeight?`, `packMinGapMs?`
58
58
  - `showUngroupedHeader?`, `ungroupedLabel?`
59
59
 
60
- ## Przykład
60
+ ## Example
61
61
 
62
62
  <kpt-roadmap [config]="roadmap" scrollHeight="420px" />
63
63
 
64
64
  roadmap: KptRoadmapConfig = {
65
65
  zoom: 'week',
66
- groups: [{ id: 'app', label: 'Aplikacja' }],
66
+ groups: [{ id: 'app', label: 'Application' }],
67
67
  items: [
68
- { id: 'auth', label: 'Logowanie', start: '2026-08-24', end: '2026-08-31',
68
+ { id: 'auth', label: 'Sign-in', start: '2026-08-24', end: '2026-08-31',
69
69
  groupId: 'app', variant: 'success', progress: 1 },
70
- { id: 'ship', label: 'Wydanie', start: '2026-09-14', groupId: 'app',
70
+ { id: 'ship', label: 'Release', start: '2026-09-14', groupId: 'app',
71
71
  variant: 'warning', dependsOn: ['auth'] },
72
72
  ],
73
73
  };
74
74
 
75
- ## Zachowanie
76
- - Oś liczona w czasie lokalnym; numeracja tygodni wg ISO 8601 (tydzień 1 zawiera pierwszy czwartek roku).
77
- - Tryb 'uniform' daje kolumny równej szerokości mimo zmiany czasu i różnej długości miesięcy;
78
- wewnątrz kolumny pozycja jest interpolowana liniowo, więc zadanie może zaczynać się w środku dnia.
79
- - Zmiana roku: mocniejsza pionowa linia i czarny znacznik z rokiem na pierwszym paśmie danego roku.
80
- Przy zoomie tygodniowym granica liczona po roku tygodnia ISO, więc W53 nie trafia do kolejnego roku.
81
- - Item wystający poza zakres osi jest ścinany od strony przycięcia.
82
- - Podpowiedzi to dyrektywa `kptTooltip` (nie natywny `title`): dymek pojawia się od razu, jest
83
- stylowany tokenami i działa też na focusie z klawiatury.
84
- - Zasada: dymek pokazuje to, czego nie widać. Paski, etykiety wierszy i pasma nagłówka mają go
85
- z `kptTooltipOnlyWhenTruncated`, więc podpowiedź wyskakuje wyłącznie przy tekście uciętym
86
- wielokropkiem — sprawdzanym przy najechaniu, więc reagującym na zmianę szerokości i zoomu.
87
- Kamienie milowe i komórki nagłówka mają dymek bezwarunkowo: romb nie pokazuje tekstu w ogóle,
88
- a komórka dopowiada rok, którego w „W35 / 24.08–30.08" nie widać.
89
- - Zależności: 'FS' (domyślna), 'SS', 'FF', 'SF'; naruszone są rysowane linią przerywaną w kolorze danger.
90
- - Elementy z niepoprawną datą lub zduplikowanym `id` są pomijane, z ostrzeżeniem w trybie deweloperskim.
75
+ ## Behavior
76
+ - The axis is computed in local time; week numbering follows ISO 8601 (week 1 contains the year's first Thursday).
77
+ - The 'uniform' mode gives columns of equal width despite DST changes and months of different lengths;
78
+ inside a column the position is interpolated linearly, so a task can start in the middle of a day.
79
+ - A year change: a stronger vertical line and a black marker with the year on that year's first band.
80
+ At week zoom the boundary is computed by the ISO week year, so W53 does not fall into the next year.
81
+ - An item extending past the axis range is cut off on the side where it is clipped.
82
+ - Tooltips use the `kptTooltip` directive (not the native `title`): the bubble appears immediately, is
83
+ styled with tokens and works with keyboard focus too.
84
+ - The rule: a tooltip shows what cannot be seen. Bars, row labels and header bands carry it
85
+ with `kptTooltipOnlyWhenTruncated`, so a tooltip only pops up for text cut off with
86
+ an ellipsis — checked on hover, so it reacts to changes in width and zoom.
87
+ Milestones and header cells carry a tooltip unconditionally: a diamond shows no text at all,
88
+ and a cell fills in the year that "W35 / 24.08–30.08" does not show.
89
+ - Dependencies: 'FS' (the default), 'SS', 'FF', 'SF'; violated ones are drawn as a dashed line in the danger color.
90
+ - Entries with an invalid date or a duplicate `id` are skipped, with a warning in development mode.
91
91
 
92
92
  ## i18n
93
- Klucze `roadmap.*`: `empty`, `week`, `today`, `milestone`, `expandGroup`, `collapseGroup`.
94
- Nazwy miesięcy i dni tygodnia pochodzą z `Intl` wg `config.locale` albo locale z `KptI18n`,
95
- więc mają formę zgodną z ortografią języka (po polsku małą literą, po angielsku wielką).
96
- W nagłówku pierwszy znak jest kapitalizowany przez `::first-letter`, żeby wygląd osi był ten sam
97
- niezależnie od języka; sam tekst pozostaje niezmieniony, więc podpowiedzi i odczyt przez czytnik
98
- ekranu dostają formę oryginalną.
99
-
100
- ## Tokeny
101
- Powierzchnie `--kpt-color-surface{,-variant,-sunken,-hover}`, obrys `--kpt-color-border{,-strong}`,
102
- paski wg wariantu `--kpt-color-{primary,success,danger,warning,info,muted}`.
103
- Etykieta paska jest biała, ale wariant `neutral` ma jasne tło, więc jego napis używa
104
- `--kpt-color-on-muted`. Pasek zbiorczy grupy w wariancie `neutral` rysuje się kolorem
105
- `--kpt-color-on-surface-muted` — `--kpt-color-muted` byłby nieodróżnialny od tła wiersza.
106
- Dalej:
107
- znacznik roku na inwersji `--kpt-color-on-surface` / `--kpt-color-surface`.
108
- Rozmiary: `--kpt-roadmap-label-w`, `--kpt-roadmap-cell-w` (obie można nadpisać z zewnątrz).
109
-
110
- ## Do zrobienia (roadmap)
111
- Przeciąganie i zmiana zakresu pasków, rysowanie zależności myszą, dodawanie wierszy —
112
- typy (`KptRoadmapChange`, `constraints`, `interaction`) są już częścią API.
93
+ The `roadmap.*` keys: `empty`, `week`, `today`, `milestone`, `expandGroup`, `collapseGroup`.
94
+ Month and weekday names come from `Intl` per `config.locale` or the locale from `KptI18n`,
95
+ so they follow each language's orthography (lowercase in Polish, capitalized in English).
96
+ In the header the first character is capitalized through `::first-letter`, so that the axis looks the same
97
+ regardless of language; the text itself is untouched, so tooltips and screen reader output
98
+ get the original form.
99
+
100
+ ## Tokens
101
+ Surfaces `--kpt-color-surface{,-variant,-sunken,-hover}`, outlines `--kpt-color-border{,-strong}`,
102
+ bars per variant `--kpt-color-{primary,success,danger,warning,info,muted}`.
103
+ A bar's label is white, but the `neutral` variant has a light background, so its text uses
104
+ `--kpt-color-on-muted`. A group's rolled-up bar in the `neutral` variant is drawn in
105
+ `--kpt-color-on-surface-muted` — `--kpt-color-muted` would be indistinguishable from the row background.
106
+ Further:
107
+ the year marker is inverted, `--kpt-color-on-surface` / `--kpt-color-surface`.
108
+ Sizes: `--kpt-roadmap-label-w`, `--kpt-roadmap-cell-w` (both can be overridden from outside).
109
+
110
+ ## To do (roadmap)
111
+ Dragging and resizing bars, drawing dependencies with the mouse, adding rows —
112
+ the types (`KptRoadmapChange`, `constraints`, `interaction`) are already part of the API.
@@ -1,20 +1,20 @@
1
1
  # KptAccordion (kpt-accordion) + KptAccordionPanel (kpt-accordion-panel)
2
2
 
3
- Akordeon — grupa rozwijanych paneli.
3
+ An accordion — a group of expandable panels.
4
4
  Import: `import { KptAccordion, KptAccordionPanel } from '@konce-pt/angular';`
5
5
 
6
6
  ## KptAccordion
7
- - `multi`: boolean — pozwala otworzyć wiele naraz (domyślnie: tylko jeden)
8
- - `animated`: boolean (domyślnie true) — animacja rozwijania paneli (CSS grid, czysty CSS)
9
- - `animationDuration`: number (domyślnie 500) — czas animacji w ms (dziedziczone przez panele)
7
+ - `multi`: boolean — allows several panels open at once (default: only one)
8
+ - `animated`: boolean (default true) — the panel expand animation (CSS grid, pure CSS)
9
+ - `animationDuration`: number (default 500) — animation time in ms (inherited by the panels)
10
10
 
11
11
  ## KptAccordionPanel
12
- - `title`: string (wymagane); `disabled`: boolean; `expanded`: model<boolean>
12
+ - `title`: string (required); `disabled`: boolean; `expanded`: model<boolean>
13
13
 
14
- ## Przykład
14
+ ## Example
15
15
  <kpt-accordion>
16
- <kpt-accordion-panel title="Sekcja 1" [expanded]="true">…</kpt-accordion-panel>
17
- <kpt-accordion-panel title="Sekcja 2">…</kpt-accordion-panel>
16
+ <kpt-accordion-panel title="Section 1" [expanded]="true">…</kpt-accordion-panel>
17
+ <kpt-accordion-panel title="Section 2">…</kpt-accordion-panel>
18
18
  </kpt-accordion>
19
19
 
20
- Koordynacja single/multi: panel woła rodzica przez inject(KptAccordion).
20
+ Single/multi coordination: a panel calls its parent through inject(KptAccordion).
@@ -1,19 +1,19 @@
1
1
  # KptAlert (kpt-alert)
2
2
 
3
- Komunikat inline. Warianty info/success/warning/danger, tytuł, zamykanie.
3
+ An inline message. Variants info/success/warning/danger, a title, dismissal.
4
4
  Import: `import { KptAlert } from '@konce-pt/angular';`
5
5
 
6
- ## Selektor
6
+ ## Selector
7
7
  `kpt-alert`
8
8
 
9
- ## Wejścia / wyjścia
10
- - `variant`: 'info'|'success'|'warning'|'danger' (domyślnie 'info')
11
- - `title`: string; `dismissible`: boolean (przycisk ×)
9
+ ## Inputs / outputs
10
+ - `variant`: 'info'|'success'|'warning'|'danger' (default 'info')
11
+ - `title`: string; `dismissible`: boolean (a × button)
12
12
  - `closed`: output<void>
13
13
 
14
- ## Przykład
15
- <kpt-alert variant="success" title="Zapisano">Zmiany zapisane.</kpt-alert>
16
- <kpt-alert variant="danger" dismissible (closed)="onClose()">Błąd.</kpt-alert>
14
+ ## Example
15
+ <kpt-alert variant="success" title="Saved">Your changes have been saved.</kpt-alert>
16
+ <kpt-alert variant="danger" dismissible (closed)="onClose()">Something went wrong.</kpt-alert>
17
17
 
18
- ## Tokeny
19
- Akcent z `--kpt-color-{info,success,warning,danger}`; tło color-mix na `--kpt-color-surface`.
18
+ ## Tokens
19
+ The accent comes from `--kpt-color-{info,success,warning,danger}`; the background is a color-mix over `--kpt-color-surface`.
@@ -1,31 +1,31 @@
1
1
  # KptAppShell (kpt-app-shell)
2
2
 
3
- Szkielet aplikacji: pasek u góry, panel boczny, treść. Responsywny bez konfiguracji.
3
+ The application skeleton: a top bar, a side panel, the content. Responsive with no configuration.
4
4
  Import: `import { KptAppShell, KptShellNavToggle } from '@konce-pt/angular';`
5
5
 
6
- ## Selektor
6
+ ## Selector
7
7
  `kpt-app-shell`
8
8
 
9
- ## Wejścia / wyjścia
10
- - `sidenavOpen`: model<boolean> (domyślnie `true`) — stan panelu ZADOKOWANEGO
11
- (oraz wymuszonego trybu `over`); dwukierunkowe `[(sidenavOpen)]`
12
- - `sidenavCompactOpen`: model<boolean> (domyślnie `false`) — stan NAKŁADKI w trybie `auto`
13
- - `sidenavMode`: `'auto' | 'side' | 'over'` (domyślnie **`'auto'`**)
14
- - `sidenavBreakpoint`: `'sm'|'md'|'lg'|'xl'|'2xl'` (domyślnie `'lg'`) — od tego progu w górę
15
- tryb `auto` dokuje panel, poniżej robi z niego nakładkę
16
- - `sidenavRailBreakpoint`: ten sam zbiór albo `null` (domyślnie `null`) — włącza szynę ikon
17
- w paśmie od `sidenavBreakpoint` do tego progu; wartość musi być WYŻSZA niż `sidenavBreakpoint`
18
- - `sidenavLabel`: string — etykieta a11y panelu; puste = `appShell.navigation` ze słownika
19
- - `sidenavId`: readonly string — identyfikator panelu (`aria-controls`)
20
- - `isOverlay()`, `isSidenavOpen()`: Signal<boolean> — stan efektywny dla bieżącego układu
21
- - `toggleSidenav()`, `openSidenav()`, `closeSidenav()` — trafiają w stan właściwy dla układu
9
+ ## Inputs / outputs
10
+ - `sidenavOpen`: model<boolean> (default `true`) — the state of the DOCKED panel
11
+ (and of the forced `over` mode); two-way `[(sidenavOpen)]`
12
+ - `sidenavCompactOpen`: model<boolean> (default `false`) — the state of the OVERLAY in `auto` mode
13
+ - `sidenavMode`: `'auto' | 'side' | 'over'` (default **`'auto'`**)
14
+ - `sidenavBreakpoint`: `'sm'|'md'|'lg'|'xl'|'2xl'` (default `'lg'`) — from this threshold upward
15
+ `auto` docks the panel, below it turns it into an overlay
16
+ - `sidenavRailBreakpoint`: the same set or `null` (default `null`) — enables the icon rail
17
+ in the band from `sidenavBreakpoint` up to this threshold; the value must be HIGHER than `sidenavBreakpoint`
18
+ - `sidenavLabel`: string — the panel's a11y label; empty = `appShell.navigation` from the dictionary
19
+ - `sidenavId`: readonly string — the panel's identifier (`aria-controls`)
20
+ - `isOverlay()`, `isSidenavOpen()`: Signal<boolean> — the effective state for the current layout
21
+ - `toggleSidenav()`, `openSidenav()`, `closeSidenav()` — they hit the state that belongs to the layout
22
22
 
23
- ## Sloty projekcji
24
- - `[kptShellToolbar]` → pasek u góry
25
- - `[kptShellSidenav]` → panel boczny
26
- - treść domyślna → obszar główny
23
+ ## Projection slots
24
+ - `[kptShellToolbar]` → the top bar
25
+ - `[kptShellSidenav]` → the side panel
26
+ - the default content → the main area
27
27
 
28
- ## Przykład
28
+ ## Example
29
29
  <kpt-app-shell [(sidenavOpen)]="navOpen">
30
30
  <kpt-toolbar kptShellToolbar elevated>
31
31
  <kpt-icon-button kptShellNavToggle variant="text" ariaLabel="Menu">
@@ -33,57 +33,57 @@ Import: `import { KptAppShell, KptShellNavToggle } from '@konce-pt/angular';`
33
33
  </kpt-icon-button>
34
34
  </kpt-toolbar>
35
35
  <kpt-sidenav kptShellSidenav>
36
- <a href="#"><kpt-icon name="list" /> <span kptNavLabel>Pulpit</span></a>
36
+ <a href="#"><kpt-icon name="list" /> <span kptNavLabel>Dashboard</span></a>
37
37
  </kpt-sidenav>
38
38
  <router-outlet />
39
39
  </kpt-app-shell>
40
40
 
41
- ## Trzy pasma trybu 'auto'
42
- | szerokość | układ | co robi zamknięcie |
41
+ ## The three bands of 'auto' mode
42
+ | width | layout | what closing does |
43
43
  |---|---|---|
44
- | `< sidenavBreakpoint` | nakładka + scrim | panel wyjeżdża poza krawędź (stan: `sidenavCompactOpen`) |
45
- | `>= sidenavBreakpoint`, `< sidenavRailBreakpoint` | szyna ikon | panel zwęża się do `--kpt-sidenav-rail-width` |
46
- | `>= sidenavRailBreakpoint` (lub brak szyny) | pełny panel | panel chowa się w całości |
44
+ | `< sidenavBreakpoint` | overlay + scrim | the panel slides off the edge (state: `sidenavCompactOpen`) |
45
+ | `>= sidenavBreakpoint`, `< sidenavRailBreakpoint` | icon rail | the panel narrows to `--kpt-sidenav-rail-width` |
46
+ | `>= sidenavRailBreakpoint` (or no rail) | full panel | the panel hides entirely |
47
47
 
48
- ## Dlaczego DWA stany otwarcia
49
- „Otwarty" znaczy co innego po obu stronach progu: na desktopie panel domyślnie stoi otwarty,
50
- na telefonie domyślnie musi być schowany. Gdyby oba układy dzieliły jeden model, wejście na wąski
51
- ekran musiałoby nadpisać stan aplikacji, a powrót na szeroki nie miałby czego przywrócić.
52
- Rozdzielenie sprawia, że intencja z desktopu przeżywa zwężenie i rozszerzenie okna za darmo.
48
+ ## Why TWO open states
49
+ "Open" means different things on either side of the threshold: on a desktop the panel stands open by default,
50
+ on a phone it has to be hidden by default. If both layouts shared one model, moving to a narrow
51
+ screen would have to overwrite the application's state, and coming back to a wide one would have nothing to restore.
52
+ Keeping them apart means the desktop intent survives narrowing and widening the window for free.
53
53
 
54
- Przycisk `kptShellNavToggle` sam trafia we właściwy stan — nie pisz `navOpen.set(...)` ręcznie,
55
- bo na wąskim ekranie ustawisz nie ten model.
54
+ The `kptShellNavToggle` button hits the right state on its own — do not write `navOpen.set(...)` by hand,
55
+ because on a narrow screen you would be setting the wrong model.
56
56
 
57
- ## Konwencja treści menu (potrzebna tylko dla szyny)
58
- - `[kptNavLabel]` — tekst pozycji; w szynie chowany techniką „visually hidden", więc pozycja
59
- zachowuje dostępną nazwę dla czytnika ekranu.
60
- - `[kptNavSection]` — nagłówek grupy; chowany tak samo.
57
+ ## The menu content convention (needed only for the rail)
58
+ - `[kptNavLabel]` — the entry's text; in the rail it is hidden with the "visually hidden" technique, so the entry
59
+ keeps an accessible name for a screen reader.
60
+ - `[kptNavSection]` — a group heading; hidden the same way.
61
61
 
62
- To płaskie atrybuty (jak `kptShellToolbar` czy `kptToolbarSpacer`), nie dyrektywy — nic nie trzeba
63
- importować. Bez nich szyna pokaże ucięty tekst zamiast ikony. W szynie warto opatrzyć pozycje
64
- `kptTooltip`, bo widać sam znak.
62
+ These are plain attributes (like `kptShellToolbar` or `kptToolbarSpacer`), not directives — there is nothing
63
+ to import. Without them the rail shows clipped text instead of an icon. In the rail it is worth marking entries
64
+ with `kptTooltip`, since only the glyph is visible.
65
65
 
66
- ## Zachowanie
67
- - O układzie decyduje wyłącznie CSS (`@media`), więc nic nie migocze przed hydracją i całość
68
- działa na SSR. JavaScript odpowiada tylko za to, który stan przełącza przycisk.
69
- - Zamknięty panel wypada z kolejki Tab przez `visibility: hidden` (nie `inert`) — jest poprawny
70
- już na pierwszej klatce.
71
- - Otwarta nakładka nakłada `inert` na treść (`<main>`), więc Tab nie wchodzi pod scrim.
72
- - `Escape` zamyka nakładkę; klik w scrim też.
73
- - Kierunek wysuwu idzie za `dir` (RTL wyjeżdża z prawej).
74
- - Wysokość: `100dvh` z fallbackiem `100vh`.
75
- - **Nie** zamyka menu po nawigacji — shell nie wie, co w danej aplikacji nią jest.
76
- Zrób to sam: `if (shell.isOverlay()) shell.closeSidenav();`.
66
+ ## Behavior
67
+ - The layout is decided by CSS alone (`@media`), so nothing flickers before hydration and the whole thing
68
+ works under SSR. JavaScript is only responsible for which state the button toggles.
69
+ - A closed panel drops out of the tab order through `visibility: hidden` (not `inert`) — it is correct
70
+ from the very first frame.
71
+ - An open overlay puts `inert` on the content (`<main>`), so Tab does not walk underneath the scrim.
72
+ - `Escape` closes the overlay; so does clicking the scrim.
73
+ - The slide direction follows `dir` (RTL slides in from the right).
74
+ - Height: `100dvh` with a `100vh` fallback.
75
+ - It does **not** close the menu after navigation — the shell does not know what counts as navigation
76
+ in a given application. Do it yourself: `if (shell.isOverlay()) shell.closeSidenav();`.
77
77
 
78
- ## Tryby wymuszone (zgodność wsteczna)
79
- `sidenavMode="side"` i `"over"` ignorują szerokość okna i czytają `sidenavOpen`, dokładnie jak
80
- przed wprowadzeniem `auto`. Ustaw `"side"`, jeśli aplikacja sama zarządza responsywnością —
81
- inaczej dostaniesz dwie warstwy tej samej logiki.
78
+ ## Forced modes (backward compatibility)
79
+ `sidenavMode="side"` and `"over"` ignore the window width and read `sidenavOpen`, exactly as
80
+ before `auto` was introduced. Set `"side"` if the application manages responsiveness itself —
81
+ otherwise you end up with two layers of the same logic.
82
82
 
83
- ## Tokeny
83
+ ## Tokens
84
84
  `--kpt-sidenav-width` (16rem), `--kpt-sidenav-rail-width` (4rem), `--kpt-z-overlay`,
85
85
  `--kpt-color-overlay-scrim`, `--kpt-elevation-3`, `--kpt-motion-duration-base`.
86
86
 
87
- ## Odłożone
88
- Focus trap i zwrot fokusu do przycisku po zamknięciu (spójnie z `kpt-drawer`, który też ich
89
- nie ma — to osobne zadanie dla całego repo). `<aside>` ma już `tabindex="-1"`.
87
+ ## Deferred
88
+ A focus trap and returning focus to the button after closing (consistent with `kpt-drawer`, which does not
89
+ have them either — that is a separate task for the whole repo). The `<aside>` already carries `tabindex="-1"`.
@@ -0,0 +1,104 @@
1
+ # KptAuth (kpt-auth)
2
+
3
+ An authentication screen: sign in, sign up and password recovery in one component,
4
+ with a promo panel and a list of external providers (OAuth/SSO). Signal Forms.
5
+ The component is **presentational** — it does not call an API and does not navigate; the app does that in the handlers.
6
+ Import: `import { KptAuth, KptAuthProviderDef } from '@konce-pt/angular';`
7
+
8
+ ## Selector
9
+ `kpt-auth`
10
+
11
+ ## Inputs
12
+ - `mode`: model<'signIn' | 'signUp' | 'forgot'> = 'signIn' — two-way (the app can force a mode)
13
+ - `layout`: 'slider' | 'split' = 'slider' — the promo panel slides to the other side / stays put
14
+ - `providers`: KptAuthProvider[] = [] — `{ id, label, icon?, iconUrl?, description? }`
15
+ - `providerLayout`: 'list' | 'grid' = 'list' — a full-width list / a grid of icons with captions
16
+ - `showName`, `requireTerms`, `showRemember`: boolean = true — whether the fields are present
17
+ - `busy`: boolean — the buttons go into a loading state, the providers are blocked
18
+ - `error` / `notice`: string | null — a server message (a `danger` / `success` kpt-alert)
19
+ - `promoTitle` / `promoText`: string | null — `null` = mode-dependent text from i18n,
20
+ `''` = hide it (making room for the `[kptAuthPromo]` slot)
21
+ - `animated`: boolean = true; `animationDuration`: number = 320 (ms)
22
+
23
+ ## Outputs
24
+ - `signIn`: { email, password, remember }
25
+ - `signUp`: { name, email, password, terms }
26
+ - `resetPassword`: { email }
27
+ - `providerSelect`: KptAuthProvider — the chosen provider (the whole object, not just the `id`)
28
+ - `modeChange` — from the `mode` model
29
+
30
+ ## Content projection
31
+ - `[kptAuthBrand]` — a logo/name above the heading
32
+ - `[kptAuthPromo]` — the promo panel's content (below the title/text, above the CTA)
33
+ - `[kptAuthSso]` — an enterprise sign-in button **above** the provider separator
34
+ - `[kptAuthFields]` — extra fields inside the `<form>` (sign in and sign up)
35
+ - `[kptAuthFooter]` — the footer (terms, copyright)
36
+ - `ng-template[kptAuthProvider]="id"` (`KptAuthProviderDef`) — custom markup for a single provider;
37
+ context: `$implicit` = the provider, `select` = the function that reports the choice
38
+
39
+ **Fields from the `[kptAuthFields]` slot do not enter the component's model.** The consumer binds them to
40
+ their own form and reads them in the `signIn`/`signUp` handler — they are not part of the emitted value.
41
+
42
+ ## Validation
43
+ Three independent forms (one per mode), with unconditional validators: e-mail required
44
+ and valid, password required (sign up: at least 8 characters), the password and its confirmation matching
45
+ (`validateTree`), consent required when `requireTerms`. Messages are composed from the error's `kind`
46
+ at render time, so **changing the language at runtime repaints them** (the validators are created once).
47
+ An error appears only once the field has been touched; `submit()` marks the whole tree as touched itself.
48
+
49
+ ## Provider icons
50
+ The core carries no brand icons. Three ways around it:
51
+ 1. `provideKptTablerIcons()` from `@konce-pt/angular/icons` → `icon: 'brand-google'`,
52
+ `'brand-facebook'`, `'brand-linkedin'`, `'brand-windows'`, `'brand-apple'`, `'brand-github'`, `'key'`.
53
+ 2. `KptIconRegistry.register({ google: '<path …/>' })` — note: the sanitizer lets
54
+ `fill`/`stroke`/`opacity` through, but strips `defs`/gradients and `fill-rule`, and the `viewBox` is fixed
55
+ at `0 0 24 24`. A multi-color logo needs an explicit `fill` on every path.
56
+ 3. `iconUrl` (a plain `<img alt="">`) or the `kptAuthProvider` template — for a logo with a gradient.
57
+
58
+ The icon is decorative (`kpt-icon` carries `aria-hidden`), so the button's accessible name always
59
+ comes from `label`.
60
+
61
+ ## Accessibility
62
+ - Only the **active mode's form** lives in the DOM — there are no invisible but still
63
+ focusable elements.
64
+ - The panel heading carries `tabindex="-1"` and takes focus after a mode change (otherwise the change is not
65
+ announced, and focus stays on a button that has slid off screen).
66
+ - Labels through `kpt-form-field` + `controlId`; `autocomplete`: `email`, `current-password`,
67
+ `new-password`, `name`.
68
+ - The mode switches are `<button>` elements with text, not `<a href="#">`.
69
+ - `prefers-reduced-motion` disables the slide and the content's entrance.
70
+
71
+ ## Styling
72
+ Public variables: `--kpt-auth-width` (64rem), `--kpt-auth-card-height` (34rem),
73
+ `--kpt-auth-min-height` (100dvh), `--kpt-auth-promo-bg` (your own brand gradient),
74
+ `--kpt-auth-padding`, `--kpt-auth-card-radius` / `--kpt-auth-card-border` / `--kpt-auth-card-shadow`.
75
+ The full-window variant (a borderless card, edge to edge):
76
+
77
+ kpt-auth {
78
+ --kpt-auth-padding: 0;
79
+ --kpt-auth-width: 100%;
80
+ --kpt-auth-card-height: 100dvh;
81
+ --kpt-auth-card-radius: 0;
82
+ --kpt-auth-card-border: 0;
83
+ --kpt-auth-card-shadow: none;
84
+ }
85
+ Below the `md` breakpoint the layout drops to a single column (promo above the form, no sliding).
86
+
87
+ ## Example
88
+ <kpt-auth
89
+ [providers]="[{ id: 'google', label: 'Google', icon: 'brand-google' }]"
90
+ [busy]="loading()"
91
+ [error]="serverError()"
92
+ (signIn)="login($event)"
93
+ (signUp)="register($event)"
94
+ (resetPassword)="sendLink($event.email)"
95
+ (providerSelect)="oauth($event.id)"
96
+ >
97
+ <img kptAuthBrand src="/logo.svg" alt="Konce" />
98
+ <small kptAuthFooter>© 2026 Konce</small>
99
+ </kpt-auth>
100
+
101
+ ## i18n
102
+ Every string comes from the `auth` namespace (EN/PL), including `auth.promo.*` and the
103
+ `auth.continueWith` ({provider}), `auth.passwordHint` / `auth.errorMinLength` ({min}) interpolations.
104
+ See `i18n/llms.txt`.
@@ -1,16 +1,16 @@
1
1
  # KptAutocomplete (kpt-autocomplete)
2
2
 
3
- Pole z podpowiedziami na CDK Overlay, Signal Forms. Wartość = wpisany tekst.
4
- Wymaga `import '@angular/cdk/overlay-prebuilt.css';`
3
+ A field with suggestions on CDK Overlay, Signal Forms. The value is the typed text.
4
+ Requires `import '@angular/cdk/overlay-prebuilt.css';`
5
5
  Import: `import { KptAutocomplete } from '@konce-pt/angular';`
6
6
 
7
- ## Wejścia
7
+ ## Inputs
8
8
  - `value`: model<string>; `options`: string[]; `placeholder`: string
9
9
  - `disabled`/`invalid`/`touched`: boolean; `touch`: output
10
- - Klawiatura: ↑/↓ nawigacja, Enter wybiera, Esc zamyka.
10
+ - Keyboard: ↑/↓ to navigate, Enter selects, Esc closes.
11
11
 
12
- ## Przykład
13
- <kpt-autocomplete [formField]="f.city" [options]="cities" placeholder="Miasto…" />
12
+ ## Example
13
+ <kpt-autocomplete [formField]="f.city" [options]="cities" placeholder="City…" />
14
14
 
15
- ## Tokeny
16
- `--kpt-form-field-*`, panel `--kpt-color-surface-raised`.
15
+ ## Tokens
16
+ `--kpt-form-field-*`, the panel `--kpt-color-surface-raised`.
@@ -1,20 +1,20 @@
1
1
  # KptAvatar (kpt-avatar)
2
2
 
3
- Awatar — obraz, inicjały (z `name`) lub ikona. Import: `import { KptAvatar } from '@konce-pt/angular';`
3
+ An avatar — an image, initials (from `name`) or an icon. Import: `import { KptAvatar } from '@konce-pt/angular';`
4
4
 
5
- ## Wejścia
6
- - `src`: string|null (obraz); `name`: string (inicjały, do 2 liter); `icon`: string|null
5
+ ## Inputs
6
+ - `src`: string|null (an image); `name`: string (initials, up to 2 letters); `icon`: string|null
7
7
  - `size`: 'sm'|'md'|'lg'|'xl'; `shape`: 'circle'|'square'
8
8
 
9
- ## Przykłady
9
+ ## Examples
10
10
  <kpt-avatar src="/u/anna.jpg" />
11
11
  <kpt-avatar name="Anna Kowalska" size="lg" />
12
12
  <kpt-avatar icon="user" shape="square" />
13
13
 
14
- ## Dostępność
15
- `name` trafia do natywnego `title` (podpowiedź z pełną nazwą — inicjały same nic nie mówią).
16
- Bez `src`: `role="img"` + `aria-label="name"`, a inicjały są `aria-hidden`. Ze `src` etykietę
17
- niesie `alt` obrazu — nie dubluje się z `aria-label`.
14
+ ## Accessibility
15
+ `name` goes into the native `title` (a tooltip with the full name — initials on their own say nothing).
16
+ Without `src`: `role="img"` + `aria-label="name"`, and the initials are `aria-hidden`. With `src` the label
17
+ is carried by the image's `alt` — it is not duplicated in `aria-label`.
18
18
 
19
- ## Tokeny
19
+ ## Tokens
20
20
  `--kpt-color-muted`, `--kpt-color-on-muted`, `--kpt-radius-full`/`--kpt-radius-md`.