@konce-pt/angular 0.7.11 → 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 (83) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/charts/src/lib/llms.txt +30 -30
  3. package/grid/src/lib/llms.txt +48 -48
  4. package/map/src/lib/llms.txt +446 -446
  5. package/package.json +1 -1
  6. package/roadmap/src/lib/llms.txt +74 -74
  7. package/src/lib/accordion/llms.txt +9 -9
  8. package/src/lib/alert/llms.txt +10 -10
  9. package/src/lib/app-shell/llms.txt +59 -59
  10. package/src/lib/auth/llms.txt +58 -58
  11. package/src/lib/autocomplete/llms.txt +8 -8
  12. package/src/lib/avatar/llms.txt +9 -9
  13. package/src/lib/avatar-group/llms.txt +8 -8
  14. package/src/lib/badge/llms.txt +9 -9
  15. package/src/lib/bottom-sheet/llms.txt +14 -14
  16. package/src/lib/breadcrumb/llms.txt +7 -7
  17. package/src/lib/breakpoint/llms.txt +21 -21
  18. package/src/lib/button/llms.txt +34 -34
  19. package/src/lib/button-group/llms.txt +5 -5
  20. package/src/lib/card/llms.txt +27 -27
  21. package/src/lib/carousel/llms.txt +11 -11
  22. package/src/lib/checkbox/llms.txt +7 -7
  23. package/src/lib/chip/llms.txt +6 -6
  24. package/src/lib/chips-input/llms.txt +9 -9
  25. package/src/lib/color-picker/llms.txt +7 -7
  26. package/src/lib/confirm/llms.txt +11 -11
  27. package/src/lib/context-menu/llms.txt +10 -10
  28. package/src/lib/data-table/llms.txt +170 -170
  29. package/src/lib/data-view/llms.txt +8 -8
  30. package/src/lib/date-range/llms.txt +25 -25
  31. package/src/lib/datepicker/llms.txt +48 -48
  32. package/src/lib/dialog/llms.txt +62 -62
  33. package/src/lib/divider/llms.txt +9 -9
  34. package/src/lib/drawer/llms.txt +18 -18
  35. package/src/lib/empty/llms.txt +9 -9
  36. package/src/lib/fab/llms.txt +12 -12
  37. package/src/lib/fieldset/llms.txt +9 -9
  38. package/src/lib/file-upload/llms.txt +10 -10
  39. package/src/lib/form-field/llms.txt +45 -45
  40. package/src/lib/galleria/llms.txt +7 -7
  41. package/src/lib/i18n/llms.txt +21 -21
  42. package/src/lib/icon/llms.txt +20 -20
  43. package/src/lib/icon-button/llms.txt +8 -8
  44. package/src/lib/image/llms.txt +9 -9
  45. package/src/lib/input/llms.txt +27 -27
  46. package/src/lib/input-mask/llms.txt +10 -10
  47. package/src/lib/input-number/llms.txt +34 -34
  48. package/src/lib/input-otp/llms.txt +11 -11
  49. package/src/lib/knob/llms.txt +14 -14
  50. package/src/lib/listbox/llms.txt +8 -8
  51. package/src/lib/megamenu/llms.txt +13 -13
  52. package/src/lib/menu/llms.txt +26 -26
  53. package/src/lib/menubar/llms.txt +10 -10
  54. package/src/lib/meter-group/llms.txt +8 -8
  55. package/src/lib/order-list/llms.txt +8 -8
  56. package/src/lib/paginator/llms.txt +12 -12
  57. package/src/lib/panel/llms.txt +12 -12
  58. package/src/lib/password/llms.txt +12 -12
  59. package/src/lib/pick-list/llms.txt +8 -8
  60. package/src/lib/popover/llms.txt +8 -8
  61. package/src/lib/progress/llms.txt +6 -6
  62. package/src/lib/radio-group/llms.txt +5 -5
  63. package/src/lib/rating/llms.txt +6 -6
  64. package/src/lib/rich-text/llms.txt +50 -50
  65. package/src/lib/scroll-top/llms.txt +7 -7
  66. package/src/lib/select/llms.txt +26 -26
  67. package/src/lib/sidenav/llms.txt +24 -24
  68. package/src/lib/skeleton/llms.txt +6 -6
  69. package/src/lib/slider/llms.txt +17 -17
  70. package/src/lib/speed-dial/llms.txt +7 -7
  71. package/src/lib/spinner/llms.txt +5 -5
  72. package/src/lib/split-button/llms.txt +15 -15
  73. package/src/lib/splitter/llms.txt +11 -11
  74. package/src/lib/stepper/llms.txt +10 -10
  75. package/src/lib/switch/llms.txt +10 -10
  76. package/src/lib/switch-group/llms.txt +16 -16
  77. package/src/lib/tabs/llms.txt +10 -10
  78. package/src/lib/textarea/llms.txt +5 -5
  79. package/src/lib/timeline/llms.txt +10 -10
  80. package/src/lib/toast/llms.txt +10 -10
  81. package/src/lib/toolbar/llms.txt +31 -31
  82. package/src/lib/tooltip/llms.txt +21 -21
  83. package/src/lib/tree/llms.txt +6 -6
@@ -1,28 +1,28 @@
1
1
  # KptMenu (kpt-menu)
2
2
 
3
- Menu rozwijane (dropdown) na CDK Overlay. Trigger przez projekcję, pozycje przez `items`.
4
- Wymaga `import '@angular/cdk/overlay-prebuilt.css';`
3
+ A dropdown menu on CDK Overlay. The trigger comes through projection, the entries through `items`.
4
+ Requires `import '@angular/cdk/overlay-prebuilt.css';`
5
5
  Import: `import { KptMenu, KptMenuItem } from '@konce-pt/angular';`
6
6
 
7
- ## Wejścia / wyjścia
7
+ ## Inputs / outputs
8
8
  - `items`: KptMenuItem[]
9
- - `selected`: output<KptMenuItem> — emitowany tylko dla zwykłych pozycji (nie dla nagłówków)
9
+ - `selected`: output<KptMenuItem> — emitted only for regular entries (not for headers)
10
10
 
11
11
  ## KptMenuItem
12
12
  - `label?`, `value?`, `icon?`, `disabled?`, `danger?`, `separator?`
13
- - `description?: string` — druga linia tekstu (e-mail, rola, opis akcji)
14
- - `badge?: string | number` — odznaka po prawej stronie pozycji; `badgeVariant?: KptBadgeVariant`
15
- (domyślnie `primary`). Renderowana przez `kpt-badge`, więc liczby powyżej 99 skracają się do `99+`.
16
- - `avatar?: { src?, name?, icon? }` — awatar po lewej (`kpt-avatar`, rozmiar `sm`); `name` bez `src`
17
- daje inicjały. Używany w wierszu nagłówkowym.
18
- - `header?: boolean` — wiersz nagłówkowy: nieklikalny blok tekstu zamiast pozycji menu. Mieści dane
19
- zalogowanego użytkownika (`avatar` + `label` + `description`) albo opis funkcji menu. Renderowany
20
- jako `<div role="presentation">` — nie łapie fokusu i nie jest `menuitem`.
21
- - `items?`, `url?` — używane przez menubar / megamenu
22
-
23
- Pola `header`, `description`, `badge` i `avatar` honorują też `kpt-context-menu` i `kpt-split-button`.
24
-
25
- ## Przykład
13
+ - `description?: string` — a second line of text (an e-mail, a role, an action description)
14
+ - `badge?: string | number` — a badge on the right side of the entry; `badgeVariant?: KptBadgeVariant`
15
+ (default `primary`). Rendered through `kpt-badge`, so numbers above 99 collapse to `99+`.
16
+ - `avatar?: { src?, name?, icon? }` — an avatar on the left (`kpt-avatar`, size `sm`); `name` without `src`
17
+ produces initials. Used in the header row.
18
+ - `header?: boolean` — a header row: a non-clickable block of text instead of a menu entry. It holds the
19
+ signed-in user's details (`avatar` + `label` + `description`) or a description of what the menu does. Rendered
20
+ as a `<div role="presentation">` — it does not take focus and is not a `menuitem`.
21
+ - `items?`, `url?` — used by the menubar / megamenu
22
+
23
+ The `header`, `description`, `badge` and `avatar` fields are honored by `kpt-context-menu` and `kpt-split-button` too.
24
+
25
+ ## Example
26
26
  <kpt-menu [items]="items" (selected)="onSelect($event)">
27
27
  <kpt-avatar name="Anna Kowalska" />
28
28
  </kpt-menu>
@@ -30,17 +30,17 @@ Pola `header`, `description`, `badge` i `avatar` honorują też `kpt-context-men
30
30
  items: KptMenuItem[] = [
31
31
  { header: true, avatar: { src: '/u/anna.jpg' }, label: 'Anna Kowalska', description: 'anna@example.com' },
32
32
  { separator: true },
33
- { label: 'Profil', value: 'profile', icon: 'user' },
34
- { label: 'Powiadomienia', value: 'notif', icon: 'bell', badge: 4, badgeVariant: 'success' },
33
+ { label: 'Profile', value: 'profile', icon: 'user' },
34
+ { label: 'Notifications', value: 'notif', icon: 'bell', badge: 4, badgeVariant: 'success' },
35
35
  { separator: true },
36
- { label: 'Wyloguj', value: 'logout', icon: 'logout', danger: true },
36
+ { label: 'Sign out', value: 'logout', icon: 'logout', danger: true },
37
37
  ];
38
38
 
39
- ## Tokeny
40
- Panel `--kpt-color-surface-raised`, `--kpt-elevation-3`; pozycja danger `--kpt-color-danger`;
41
- opis i ikony `--kpt-color-on-surface-muted`, `--kpt-font-size-xs`.
39
+ ## Tokens
40
+ The panel `--kpt-color-surface-raised`, `--kpt-elevation-3`; a danger entry `--kpt-color-danger`;
41
+ descriptions and icons `--kpt-color-on-surface-muted`, `--kpt-font-size-xs`.
42
42
 
43
43
  ## A11y
44
- Panel `role="menu"`, pozycje `role="menuitem"` (natywne `<button>` — obsługa klawiatury bez
45
- dodatkowego kodu). Nagłówek jest poza nawigacją klawiaturą. Wartość odznaki wchodzi w nazwę dostępną
46
- pozycji („Powiadomienia 4").
44
+ The panel is `role="menu"`, entries are `role="menuitem"` (native `<button>` elements — keyboard support with no
45
+ extra code). The header sits outside keyboard navigation. The badge value becomes part of the entry's accessible
46
+ name ("Notifications 4").
@@ -1,21 +1,21 @@
1
1
  # KptMenubar (kpt-menubar)
2
2
 
3
- Pozioma belka menu z rozwijanymi pod-menu. Pozycje bez `items` działają jak akcje.
4
- Pod-menu na CDK Overlay (doczepiane do `body`, nieprzycinane przez `overflow: hidden`).
5
- Wymaga `import '@angular/cdk/overlay-prebuilt.css';`
3
+ A horizontal menu bar with drop-down submenus. Entries without `items` act as actions.
4
+ Submenus sit on CDK Overlay (attached to `body`, never clipped by `overflow: hidden`).
5
+ Requires `import '@angular/cdk/overlay-prebuilt.css';`
6
6
  Import: `import { KptMenubar } from '@konce-pt/angular';`
7
7
 
8
- ## Wejścia / wyjścia
9
- - `items`: KptMenuItem<T>[] — pozycje górne; pod-menu w `items?` każdej pozycji
8
+ ## Inputs / outputs
9
+ - `items`: KptMenuItem<T>[] — the top-level entries; submenus live in each entry's `items?`
10
10
  - `selected`: KptMenuItem<T>
11
11
 
12
- ## Przykład
12
+ ## Example
13
13
  <kpt-menubar [items]="items" (selected)="onSelect($event)" />
14
14
 
15
15
  items: KptMenuItem[] = [
16
- { label: 'Plik', items: [{ label: 'Nowy' }, { separator: true }, { label: 'Zamknij', danger: true }] },
17
- { label: 'Pomoc' },
16
+ { label: 'File', items: [{ label: 'New' }, { separator: true }, { label: 'Close', danger: true }] },
17
+ { label: 'Help' },
18
18
  ];
19
19
 
20
- ## Tokeny
21
- Belka `--kpt-color-surface-raised`; dropdown `--kpt-elevation-3`.
20
+ ## Tokens
21
+ The bar `--kpt-color-surface-raised`; the dropdown `--kpt-elevation-3`.
@@ -1,15 +1,15 @@
1
1
  # KptMeterGroup (kpt-meter-group)
2
2
 
3
- Wielosegmentowy miernik (meter group) z opcjonalną legendą.
3
+ A multi-segment meter group with an optional legend.
4
4
  Import: `import { KptMeterGroup } from '@konce-pt/angular';`
5
5
 
6
- ## Wejścia
6
+ ## Inputs
7
7
  - `values`: KptMeterItem[] — { label, value, color? }
8
- - `max`: number | undefined — suma odniesienia (domyślnie suma wartości = 100%)
9
- - `showLegend`: boolean (domyślnie true)
8
+ - `max`: number | undefined — the reference total (by default the sum of the values = 100%)
9
+ - `showLegend`: boolean (default true)
10
10
 
11
- ## Przykład
12
- <kpt-meter-group [values]="[{label:'Użyte', value:70}, {label:'Wolne', value:30}]" />
11
+ ## Example
12
+ <kpt-meter-group [values]="[{label:'Used', value:70}, {label:'Free', value:30}]" />
13
13
 
14
- ## Tokeny
15
- Segmenty: paleta `--kpt-color-{primary,info,success,warning,danger}` lub własny `color`.
14
+ ## Tokens
15
+ Segments: the `--kpt-color-{primary,info,success,warning,danger}` palette or a custom `color`.
@@ -1,17 +1,17 @@
1
1
  # KptOrderList (kpt-order-list)
2
2
 
3
- Lista z ręcznym porządkowaniem elementów (w górę/dół). Zaznacz element i przesuń przyciskami.
4
- Szablon elementu przez projekcję `<ng-template let-item>`.
3
+ A list with manual reordering (up/down). Select an item and move it with the buttons.
4
+ The item template comes through projection: `<ng-template let-item>`.
5
5
  Import: `import { KptOrderList } from '@konce-pt/angular';`
6
6
 
7
- ## Wejścia / model
8
- - `items`: model<T[]> (dwukierunkowe — zwraca nową kolejność)
7
+ ## Inputs / model
8
+ - `items`: model<T[]> (two-way — returns the new order)
9
9
  - `header`: string
10
10
 
11
- ## Przykład
12
- <kpt-order-list [(items)]="tasks" header="Kolejność">
11
+ ## Example
12
+ <kpt-order-list [(items)]="tasks" header="Order">
13
13
  <ng-template let-item>{{ item.name }}</ng-template>
14
14
  </kpt-order-list>
15
15
 
16
- ## Tokeny
17
- Zaznaczenie `--kpt-color-primary`; przyciski `--kpt-color-surface-raised`.
16
+ ## Tokens
17
+ Selection `--kpt-color-primary`; buttons `--kpt-color-surface-raised`.
@@ -1,22 +1,22 @@
1
1
  # KptPaginator (kpt-paginator)
2
2
 
3
- Paginator sterowany sygnałami. Import: `import { KptPaginator } from '@konce-pt/angular';`
3
+ A paginator driven by signals. Import: `import { KptPaginator } from '@konce-pt/angular';`
4
4
 
5
- ## Selektor
5
+ ## Selector
6
6
  `kpt-paginator`
7
7
 
8
- ## Wejścia / modele
9
- - `length`: number (wymagane) — łączna liczba elementów
10
- - `pageSize`: model<number> (domyślnie 10) — dwukierunkowe
11
- - `pageIndex`: model<number> od 0 (domyślnie 0) — dwukierunkowe
12
- - `pageSizeOptions`: number[] (domyślnie [5,10,20,50])
8
+ ## Inputs / models
9
+ - `length`: number (required) — the total number of items
10
+ - `pageSize`: model<number> (default 10) — two-way
11
+ - `pageIndex`: model<number> from 0 (default 0) — two-way
12
+ - `pageSizeOptions`: number[] (default [5,10,20,50])
13
13
 
14
- ## Przykład
14
+ ## Example
15
15
  <kpt-paginator [length]="total()" [(pageIndex)]="page" [(pageSize)]="size" />
16
16
 
17
- Pokazuje „X–Y z Z", wybór rozmiaru strony oraz przyciski poprzednia/następna.
18
- Przy zmianie długości/rozmiaru samoczynnie koryguje `pageIndex` (effect).
17
+ It shows "X–Y of Z", the page size selector and previous/next buttons.
18
+ When the length or the size changes it corrects `pageIndex` on its own (an effect).
19
19
 
20
20
  ## i18n
21
- Etykiety („Wierszy:", separator zakresu, aria stron) pochodzą z i18n (namespace `paginator`).
22
- Domyślny język EN; przełączenie/nadpisanie przez `provideKptI18n` — patrz `i18n/llms.txt`.
21
+ The labels ("Rows:", the range separator, the page aria labels) come from i18n (the `paginator` namespace).
22
+ English by default; switch or override it through `provideKptI18n` — see `i18n/llms.txt`.
@@ -1,20 +1,20 @@
1
1
  # KptPanel (kpt-panel)
2
2
 
3
- Panel z nagłówkiem i opcjonalnym zwijaniem. Import: `import { KptPanel } from '@konce-pt/angular';`
3
+ A panel with a header and optional collapsing. Import: `import { KptPanel } from '@konce-pt/angular';`
4
4
 
5
- ## Wejścia / model
5
+ ## Inputs / model
6
6
  - `header`: string
7
- - `toggleable`: boolean — pokazuje przycisk zwijania
8
- - `collapsed`: model<boolean> (dwukierunkowe)
9
- - `animated`: boolean (domyślnie true) — animacja zwijania (CSS grid, czysty CSS)
10
- - `animationDuration`: number (domyślnie 500) — czas animacji w ms
11
- - Akcje nagłówka: projekcja `[kptPanelActions]`. Treść: `<ng-content>`.
7
+ - `toggleable`: boolean — shows the collapse button
8
+ - `collapsed`: model<boolean> (two-way)
9
+ - `animated`: boolean (default true) — the collapse animation (CSS grid, pure CSS)
10
+ - `animationDuration`: number (default 500) — animation time in ms
11
+ - Header actions: the `[kptPanelActions]` projection. Content: `<ng-content>`.
12
12
 
13
- ## Przykład
14
- <kpt-panel header="Ustawienia" toggleable>
13
+ ## Example
14
+ <kpt-panel header="Settings" toggleable>
15
15
  <button kptPanelActions>…</button>
16
- Treść…
16
+ Content…
17
17
  </kpt-panel>
18
18
 
19
- ## Tokeny
20
- Nagłówek `--kpt-color-surface-variant`; ramka `--kpt-color-border`.
19
+ ## Tokens
20
+ The header `--kpt-color-surface-variant`; the border `--kpt-color-border`.
@@ -1,23 +1,23 @@
1
1
  # KptPassword (kpt-password)
2
2
 
3
- Pole hasła z przełącznikiem widoczności i opcjonalnym miernikiem siły. Signal Forms.
3
+ A password field with a visibility toggle and an optional strength meter. Signal Forms.
4
4
  Import: `import { KptPassword } from '@konce-pt/angular';`
5
5
 
6
- ## Wejścia / model
7
- - `value`: model<string> (lub `formField`)
8
- - `feedback`: boolean — pokazuje miernik siły (4 paski + etykieta)
6
+ ## Inputs / model
7
+ - `value`: model<string> (or `formField`)
8
+ - `feedback`: boolean — shows the strength meter (4 bars + a label)
9
9
  - `placeholder`: string
10
- - `id`: string — id natywnego pola; wiąże etykietę z `kpt-form-field [controlId]`
11
- - `autocomplete`: string | null = 'current-password' — w rejestracji i resecie ustaw
12
- `new-password`, inaczej menedżer haseł podstawi stare hasło zamiast zaproponować nowe
10
+ - `id`: string — the id of the native field; ties the label to `kpt-form-field [controlId]`
11
+ - `autocomplete`: string | null = 'current-password' — in sign-up and reset flows set it to
12
+ `new-password`, otherwise the password manager fills in the old password instead of proposing a new one
13
13
  - `disabled`/`invalid`/`touched`: boolean; `touch`: output
14
14
 
15
- ## Siła hasła
16
- Punktacja 0–4: długość ≥8, małe+wielkie litery, cyfra, znak specjalny. Kolory: danger→warning→info→success.
15
+ ## Password strength
16
+ A 0–4 score: length ≥8, lower+upper case, a digit, a special character. Colors: danger→warning→info→success.
17
17
 
18
- ## Przykład
18
+ ## Example
19
19
  <kpt-password [formField]="f.password" feedback />
20
20
  <kpt-password [(value)]="pass" />
21
21
 
22
- ## Tokeny
23
- Pole `--kpt-form-field-*`; paski miernika `--kpt-color-{danger,warning,info,success}`.
22
+ ## Tokens
23
+ The field `--kpt-form-field-*`; the meter bars `--kpt-color-{danger,warning,info,success}`.
@@ -1,17 +1,17 @@
1
1
  # KptPickList (kpt-pick-list)
2
2
 
3
- Transfer elementów między dwiema listami (źródło ↔ cel). Zaznacz i przenieś (pojedynczo/wszystko).
4
- Szablon elementu przez projekcję `<ng-template let-item>`.
3
+ Transfers items between two lists (source and target). Select and move them (one at a time or all).
4
+ The item template comes through projection: `<ng-template let-item>`.
5
5
  Import: `import { KptPickList } from '@konce-pt/angular';`
6
6
 
7
- ## Wejścia / model
8
- - `source`: model<T[]>; `target`: model<T[]> (oba dwukierunkowe)
7
+ ## Inputs / model
8
+ - `source`: model<T[]>; `target`: model<T[]> (both two-way)
9
9
  - `sourceHeader`/`targetHeader`: string
10
10
 
11
- ## Przykład
12
- <kpt-pick-list [(source)]="available" [(target)]="selected" sourceHeader="Dostępne" targetHeader="Wybrane">
11
+ ## Example
12
+ <kpt-pick-list [(source)]="available" [(target)]="selected" sourceHeader="Available" targetHeader="Selected">
13
13
  <ng-template let-item>{{ item.name }}</ng-template>
14
14
  </kpt-pick-list>
15
15
 
16
- ## Tokeny
17
- Zaznaczenie `--kpt-color-primary`; nagłówki `--kpt-color-surface-variant`.
16
+ ## Tokens
17
+ Selection `--kpt-color-primary`; headers `--kpt-color-surface-variant`.
@@ -1,17 +1,17 @@
1
1
  # KptPopover (kpt-popover)
2
2
 
3
- Popover — dowolna treść w dymku na CDK Overlay (bogatszy niż tooltip).
4
- Wymaga `import '@angular/cdk/overlay-prebuilt.css';`
3
+ A popover — arbitrary content in a bubble on CDK Overlay (richer than a tooltip).
4
+ Requires `import '@angular/cdk/overlay-prebuilt.css';`
5
5
  Import: `import { KptPopover } from '@konce-pt/angular';`
6
6
 
7
- ## Sloty
8
- - element z atrybutem `kptPopoverTrigger` = wyzwalacz; reszta treści = panel
7
+ ## Slots
8
+ - the element carrying the `kptPopoverTrigger` attribute = the trigger; everything else = the panel
9
9
 
10
- ## Przykład
10
+ ## Example
11
11
  <kpt-popover>
12
- <kpt-button kptPopoverTrigger variant="outline">Szczegóły</kpt-button>
13
- <div>Bogata treść popovera…</div>
12
+ <kpt-button kptPopoverTrigger variant="outline">Details</kpt-button>
13
+ <div>Rich popover content…</div>
14
14
  </kpt-popover>
15
15
 
16
- ## Tokeny
16
+ ## Tokens
17
17
  `--kpt-color-surface-raised`, `--kpt-elevation-3`.
@@ -1,16 +1,16 @@
1
1
  # KptProgress (kpt-progress)
2
2
 
3
- Wskaźnik postępu — liniowy lub kołowy, określony (0–100) lub nieokreślony (`value`=null).
3
+ A progress indicator — linear or circular, determinate (0–100) or indeterminate (`value`=null).
4
4
  Import: `import { KptProgress } from '@konce-pt/angular';`
5
5
 
6
- ## Wejścia
6
+ ## Inputs
7
7
  - `value`: number|null (null = indeterminate); `type`: 'linear'|'circular'
8
- - `variant`: 'primary'|'success'|'danger'|'warning'|'info'; `diameter`: number (kołowy)
8
+ - `variant`: 'primary'|'success'|'danger'|'warning'|'info'; `diameter`: number (circular)
9
9
 
10
- ## Przykłady
10
+ ## Examples
11
11
  <kpt-progress [value]="60" />
12
12
  <kpt-progress type="circular" [value]="75" variant="success" />
13
13
  <kpt-progress [value]="null" />
14
14
 
15
- ## Tokeny
16
- `--kpt-color-{primary,success,danger,warning,info}`, tło `--kpt-color-surface-variant`.
15
+ ## Tokens
16
+ `--kpt-color-{primary,success,danger,warning,info}`, the track `--kpt-color-surface-variant`.
@@ -1,15 +1,15 @@
1
1
  # KptRadioGroup (kpt-radio-group)
2
2
 
3
- Grupa przycisków opcji na Signal Forms (`FormValueControl<T>`). Opcje przez `options`.
3
+ A radio button group on Signal Forms (`FormValueControl<T>`). Options through `options`.
4
4
  Import: `import { KptRadioGroup, KptOption } from '@konce-pt/angular';`
5
5
 
6
- ## Użycie
6
+ ## Usage
7
7
  plans: KptOption<string>[] = [{label:'Free',value:'free'},{label:'Pro',value:'pro'}];
8
8
  <kpt-radio-group [formField]="f.plan" [options]="plans" />
9
9
 
10
- ## Wejścia
10
+ ## Inputs
11
11
  - `value`: model<T>; `options`: KptOption<T>[] `{ label, value, disabled? }`
12
- - `disabled`/`invalid`/`touched`: boolean; `name`: string (auto); output `touch`.
12
+ - `disabled`/`invalid`/`touched`: boolean; `name`: string (automatic); the `touch` output.
13
13
 
14
- ## Tokeny
14
+ ## Tokens
15
15
  `--kpt-color-primary`, `--kpt-form-field-border`.
@@ -1,14 +1,14 @@
1
1
  # KptRating (kpt-rating)
2
2
 
3
- Ocena gwiazdkami na Signal Forms. Import: `import { KptRating } from '@konce-pt/angular';`
3
+ A star rating on Signal Forms. Import: `import { KptRating } from '@konce-pt/angular';`
4
4
 
5
- ## Wejścia
6
- - `value`: model<number>; `count`: number (liczba gwiazdek, domyślnie 5)
5
+ ## Inputs
6
+ - `value`: model<number>; `count`: number (number of stars, default 5)
7
7
  - `readonly`/`disabled`/`touched`: boolean; `touch`: output
8
8
 
9
- ## Przykład
9
+ ## Example
10
10
  <kpt-rating [formField]="f.score" [count]="5" />
11
11
  <kpt-rating [value]="4" readonly />
12
12
 
13
- ## Tokeny
14
- Wypełnione gwiazdki `--kpt-color-warning`; puste `--kpt-color-border-strong`.
13
+ ## Tokens
14
+ Filled stars `--kpt-color-warning`; empty ones `--kpt-color-border-strong`.
@@ -1,64 +1,64 @@
1
1
  # KptRichText (kpt-rich-text)
2
2
 
3
- Lekki edytor tekstu sformatowanego (contenteditable) z konfigurowalnym paskiem sekcji.
4
- Wartość = HTML. Bez zależności zewnętrznych. Signal Forms.
5
- Popover kolorów na CDK Overlay — wymaga `import '@angular/cdk/overlay-prebuilt.css';`
3
+ A lightweight rich text editor (contenteditable) with a configurable, sectioned toolbar.
4
+ The value is HTML. No external dependencies. Signal Forms.
5
+ The color popover sits on CDK Overlay — requires `import '@angular/cdk/overlay-prebuilt.css';`
6
6
  Import: `import { KptRichText, KptRichTool, KptRichToolbar } from '@konce-pt/angular';`
7
7
 
8
- ## Wejścia
8
+ ## Inputs
9
9
  - `value`: model<string> (HTML)
10
- - `toolbar`: KptRichToolbar = KptRichTool[] | KptRichTool[][] (płaska lista lub grupy=sekcje).
11
- Pominięcie narzędzia/grupy je wyłącza; między grupami separator. Domyślnie pełny pasek w 5 sekcjach.
10
+ - `toolbar`: KptRichToolbar = KptRichTool[] | KptRichTool[][] (a flat list, or groups = sections).
11
+ Leaving a tool or a group out disables it; groups are separated by a divider. The full toolbar in 5 sections by default.
12
12
  - `placeholder`: string; `disabled`/`invalid`/`touched`: boolean; `touch`: output
13
- - `maxListLevel`: number = 6 — maksymalna głębokość zagnieżdżenia list. Limit dotyczy interakcji
14
- (Tab i narzędzia `indent`/`outdent`); wklejonej treści nie spłaszczamy, żeby nie gubić danych.
13
+ - `maxListLevel`: number = 6 — the maximum list nesting depth. The limit applies to interaction
14
+ (Tab and the `indent`/`outdent` tools); pasted content is not flattened, so that no data is lost.
15
15
 
16
- ## Narzędzia (KptRichTool)
17
- - Schowek: `copy`, `paste` (z formatowaniem, oczyszczone), `pasteText` (bez formatowania)
18
- - Styl: `heading` (select: Normalny/paragraf + Nagłówek 1–6)
16
+ ## Tools (KptRichTool)
17
+ - Clipboard: `copy`, `paste` (with formatting, sanitized), `pasteText` (without formatting)
18
+ - Style: `heading` (a select: Normal/paragraph + Heading 1–6)
19
19
  - Format: `bold`, `italic`, `underline`, `strike`, `ul`, `ol`
20
- - Wcięcia list: `indent` (dodaj wcięcie), `outdent` (usuń wcięcie) — działają wyłącznie w `li`,
21
- zagnieżdżają zgodnie ze specyfikacją (`li > ul/ol > li`, podlista dziedziczy typ listy rodzica).
22
- Aktywne tylko tam, gdzie coś zrobią (poza listą i przy limicie przycisk jest wyszarzony).
23
- Znaczniki poziomów cyklują co 3 (jak w edytorach tekstu): `ol` 1. → a. → i., `ul` • → ○ → ▪.
24
- Reguły `list-style-type` obowiązują w widoku edytora (`.kpt-rich-text__editor`) do 6. poziomu.
25
- Zapisany HTML nie niesie klas — renderując `value` poza edytorem opakuj go w `.kpt-rich-content`
26
- z `@konce-pt/styles`, żeby listy wyglądały tak samo.
27
- - Kolory: `foreColor` (kolor tekstu), `backColor` (kolor tła) — popover z próbkami + `input type=color`
28
- - Wyrównanie: `alignLeft`, `alignCenter`, `alignRight`, `alignJustify`
29
- - `table` (wstaw tabelę: popover z siatką NxM). W komórce prawy klik = menu kontekstowe
30
- (wstaw/usuń wiersz i kolumnę, nagłówek wiersza/kolumny — przełącza td↔th, kolor tła i wyrównanie
31
- komórki, obramowanie tabeli/komórki — kolor + grubość (cienkie/średnie/grube) lub bez, usuń tabelę).
32
- Przeciąganie po komórkach = prostokątne zaznaczenie (podświetlone); scalanie/dzielenie komórek
33
- (colspan/rowspan) z menu; operacje komórki (tło, wyrównanie, obramowanie) działają na całym zaznaczeniu.
34
- Przeciąganie prawej krawędzi kolumny zmienia jej szerokość.
35
- Odłożone: selekcja nieregularna, Ctrl+Backspace, zbiorcze formatowanie z górnego paska.
36
- - `link` (prompt URL), `clear` (usuń formatowanie), `html` (przełącznik podglądu źródła HTML — edycja surowego HTML)
20
+ - List indentation: `indent` (add an indent), `outdent` (remove one) — they work only inside an `li`,
21
+ nesting per the specification (`li > ul/ol > li`, a sublist inherits the parent list's type).
22
+ They are only active where they would do something (outside a list and at the limit the button is dimmed).
23
+ Level markers cycle every 3 (as in word processors): `ol` 1. → a. → i., `ul` • → ○ → ▪.
24
+ The `list-style-type` rules apply in the editor view (`.kpt-rich-text__editor`) down to level 6.
25
+ The saved HTML carries no classes — when rendering `value` outside the editor, wrap it in `.kpt-rich-content`
26
+ from `@konce-pt/styles` so the lists look the same.
27
+ - Colors: `foreColor` (text color), `backColor` (background color) — a popover with swatches + an `input type=color`
28
+ - Alignment: `alignLeft`, `alignCenter`, `alignRight`, `alignJustify`
29
+ - `table` (insert a table: a popover with an NxM grid). Inside a cell, right-click opens a context menu
30
+ (insert/remove a row and a column, a row/column header — toggling td↔th, cell background color and alignment,
31
+ table/cell borders — color + thickness (thin/medium/thick) or none, delete the table).
32
+ Dragging across cells makes a rectangular selection (highlighted); merging/splitting cells
33
+ (colspan/rowspan) from the menu; cell operations (background, alignment, borders) apply to the whole selection.
34
+ Dragging a column's right edge changes its width.
35
+ Deferred: irregular selection, Ctrl+Backspace, bulk formatting from the top toolbar.
36
+ - `link` (a URL prompt), `clear` (remove formatting), `html` (a toggle for the HTML source view — editing raw HTML)
37
37
 
38
- ## Klawiatura
39
- - Tab / Shift+Tab w punkcie listy = wcięcie / poziom wyżej (to samo co `indent`/`outdent`).
40
- - Tab / Shift+Tab w komórce tabeli = następna / poprzednia komórka (z zaznaczeniem jej treści).
41
- Lista wewnątrz komórki ma pierwszeństwo — dopiero gdy nie da się już wciąć, Tab zmienia komórkę.
42
- - Wszędzie indziej — a także na pierwszym punkcie listy, na poziomie najwyższym, przy `maxListLevel`
43
- i w ostatniej komórce tabeli — Tab zostaje **natywny** i wyprowadza fokus z edytora. To celowe:
44
- edytor nie może być pułapką klawiaturową (WCAG 2.1.2), więc `preventDefault()` wołamy wyłącznie
45
- wtedy, gdy operacja faktycznie zmieniła treść.
38
+ ## Keyboard
39
+ - Tab / Shift+Tab inside a list item = indent / one level up (the same as `indent`/`outdent`).
40
+ - Tab / Shift+Tab inside a table cell = the next / previous cell (with its content selected).
41
+ A list inside a cell takes precedence — only once it can no longer be indented does Tab move to another cell.
42
+ - Everywhere else — including on the first list item, at the top level, at `maxListLevel`
43
+ and in the last table cell — Tab stays **native** and moves focus out of the editor. That is deliberate:
44
+ an editor must not be a keyboard trap (WCAG 2.1.2), so `preventDefault()` is called only
45
+ when the operation actually changed the content.
46
46
 
47
- ## Przykład
48
- <kpt-rich-text [formField]="f.body" /> <!-- pełny pasek -->
47
+ ## Example
48
+ <kpt-rich-text [formField]="f.body" /> <!-- the full toolbar -->
49
49
  <kpt-rich-text [(value)]="v" [toolbar]="[['bold','italic'],['ul','ol'],['link']]" />
50
50
 
51
51
  ## i18n
52
- Wszystkie etykiety (aria narzędzi, style „Normalny/Nagłówek N", prompt linku, menu kontekstowe tabeli,
53
- popover obramowania, „Własny…") pochodzą z i18n (namespace `richText`, w tym `richText.menu.*`,
54
- `richText.border.*`). Domyślnie EN — patrz `i18n/llms.txt`.
52
+ Every label (the tools' aria text, the "Normal/Heading N" styles, the link prompt, the table context menu,
53
+ the border popover, "Custom…") comes from i18n (the `richText` namespace, including `richText.menu.*`,
54
+ `richText.border.*`). English by default — see `i18n/llms.txt`.
55
55
 
56
- ## Uwagi
57
- Formatowanie przez document.execCommand; aktywne narzędzia podświetlane (queryCommandState).
58
- Wklejanie (natywne i przyciskami) jest sanityzowane (allowlista tagów/stylów; usuwa script/on*/javascript:).
59
- Sanityzacja obejmuje **każdy** zapis do DOM edytora, nie tylko paste — w tym `value` ustawione z
60
- zewnątrz (`[(value)]`/`formField` z aplikacji, tryb źródła HTML). Traktuj `value` na wejściu jako
61
- potencjalnie niezaufane (DB, inny użytkownik, CMS); na wyjściu z komponentu jest sanityzowane.
62
- Schowek „wklej"/„wklej bez formatowania" używa async Clipboard API (wymaga uprawnień przeglądarki).
63
- Wyjątek od execCommand: wcięcia list robimy własnym kodem na DOM — `execCommand('indent')` produkuje
64
- w Chrome niepoprawne `ul > ul` (albo `blockquote` z marginesem, który i tak zdjąłby sanityzator).
56
+ ## Notes
57
+ Formatting goes through document.execCommand; active tools are highlighted (queryCommandState).
58
+ Pasting (both native and through the buttons) is sanitized (a tag/style allowlist; it strips script/on*/javascript:).
59
+ Sanitization covers **every** write into the editor's DOM, not just paste — including a `value` set from
60
+ outside (`[(value)]`/`formField` from the application, the HTML source mode). Treat an incoming `value` as
61
+ potentially untrusted (a database, another user, a CMS); on the way out of the component it is sanitized.
62
+ The "paste"/"paste without formatting" clipboard tools use the async Clipboard API (which needs browser permission).
63
+ An exception to execCommand: list indentation is done with our own DOM code — `execCommand('indent')` produces
64
+ invalid `ul > ul` in Chrome (or a `blockquote` with a margin, which the sanitizer would strip anyway).
@@ -1,15 +1,15 @@
1
1
  # KptScrollTop (kpt-scroll-top)
2
2
 
3
- Przycisk „do góry" — pojawia się po przewinięciu ponad `threshold` px.
3
+ A "back to top" button — appears after scrolling past `threshold` px.
4
4
  Import: `import { KptScrollTop } from '@konce-pt/angular';`
5
5
 
6
- ## Wejścia
7
- - `threshold`: number (px, domyślnie 300)
8
- - `target`: string | null — selektor przewijanego elementu; domyślnie okno
6
+ ## Inputs
7
+ - `threshold`: number (px, default 300)
8
+ - `target`: string | null — selector of the scrolled element; the window by default
9
9
 
10
- ## Przykład
10
+ ## Example
11
11
  <kpt-scroll-top [threshold]="300" />
12
12
  <kpt-scroll-top target="#panel" />
13
13
 
14
- ## Tokeny
15
- Przycisk `--kpt-color-primary` / `--kpt-color-on-primary`, `--kpt-elevation-3`.
14
+ ## Tokens
15
+ The button uses `--kpt-color-primary` / `--kpt-color-on-primary`, `--kpt-elevation-3`.