@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
@@ -1,15 +1,15 @@
1
1
  # KptGalleria (kpt-galleria)
2
2
 
3
- Duży podgląd obrazu z paskiem miniatur i nawigacją.
3
+ A large image preview with a thumbnail strip and navigation.
4
4
  Import: `import { KptGalleria } from '@konce-pt/angular';`
5
5
 
6
- ## Wejścia / model
6
+ ## Inputs / model
7
7
  - `items`: KptGalleriaItem[] — { src, thumbnail?, alt? }
8
- - `activeIndex`: model<number> (dwukierunkowe)
9
- - `showThumbnails`: boolean (domyślnie true)
8
+ - `activeIndex`: model<number> (two-way)
9
+ - `showThumbnails`: boolean (default true)
10
10
 
11
- ## Przykład
11
+ ## Example
12
12
  <kpt-galleria [items]="photos" [(activeIndex)]="idx" />
13
13
 
14
- ## Tokeny
15
- Scena `--kpt-color-muted`; aktywna miniatura `--kpt-color-primary`.
14
+ ## Tokens
15
+ The stage `--kpt-color-muted`; the active thumbnail `--kpt-color-primary`.
@@ -1,35 +1,35 @@
1
1
  # i18n (provideKptI18n / KptI18n)
2
2
 
3
- Tłumaczenia etykiet komponentów. Języki bazowe: EN (domyślny), PL. Oparte o sygnały (zoneless-friendly), bez zależności zewnętrznych.
3
+ Translations for component labels. Base languages: EN (default), PL. Signal-based (zoneless-friendly), with no external dependencies.
4
4
  Import: `import { provideKptI18n, KptI18n } from '@konce-pt/angular';`
5
5
 
6
- ## Konfiguracja (provider)
7
- - `provideKptI18n({ locale?, messages? }): EnvironmentProviders` — w `bootstrapApplication`.
8
- - `locale`: 'en' | 'pl' | dowolny string (domyślnie 'en').
9
- - `messages`: `Record<locale, DeepPartial<KptMessages>>` — rejestruje nowy język lub nadpisuje istniejący (deep-merge, brakujące klucze → EN).
6
+ ## Configuration (provider)
7
+ - `provideKptI18n({ locale?, messages? }): EnvironmentProviders` — in `bootstrapApplication`.
8
+ - `locale`: 'en' | 'pl' | any string (default 'en').
9
+ - `messages`: `Record<locale, DeepPartial<KptMessages>>` — registers a new language or overrides an existing one (deep merge, missing keys fall back to EN).
10
10
 
11
- ## Serwis KptI18n (providedIn: 'root')
12
- - `locale: Signal<KptLocale>` — bieżący język.
13
- - `setLocale(locale)` — zmiana w runtime (reaktywna dla wszystkich komponentów).
14
- - `registerMessages(locale, patch)` — dodaje/nadpisuje słownik w runtime.
15
- - `t(key, params?)` — tłumaczy klucz w notacji kropkowej (`'paginator.range'`) z interpolacją `{name}`.
11
+ ## The KptI18n service (providedIn: 'root')
12
+ - `locale: Signal<KptLocale>` — the current language.
13
+ - `setLocale(locale)` — a runtime change (reactive across every component).
14
+ - `registerMessages(locale, patch)` — adds to or overrides a dictionary at runtime.
15
+ - `t(key, params?)` — translates a dotted key (`'paginator.range'`) with `{name}` interpolation.
16
16
 
17
- ## Dodanie własnego języka (jeden plik JSON)
18
- import de from './i18n/de.json'; // kształt = interfejs KptMessages
17
+ ## Adding your own language (one JSON file)
18
+ import de from './i18n/de.json'; // the shape is the KptMessages interface
19
19
  provideKptI18n({ locale: 'de', messages: { de } });
20
- // runtime: inject(KptI18n).registerMessages('de', de); inject(KptI18n).setLocale('de');
20
+ // at runtime: inject(KptI18n).registerMessages('de', de); inject(KptI18n).setLocale('de');
21
21
 
22
- ## Przełączanie języka w runtime
22
+ ## Switching language at runtime
23
23
  const i18n = inject(KptI18n);
24
24
  i18n.setLocale('pl');
25
25
 
26
- ## Kontrakt kluczy (KptMessages)
27
- Namespace'y: `common` (close/remove/previous/next/clear/done/all), `paginator` (rowsPerPage/range/prevPage/nextPage),
26
+ ## The key contract (KptMessages)
27
+ Namespaces: `common` (close/remove/previous/next/clear/done/all), `paginator` (rowsPerPage/range/prevPage/nextPage),
28
28
  `select`, `listbox`, `dataView`, `dataTable`, `confirm`, `fileUpload`, `chipsInput`, `dateRange`, `datepicker`,
29
29
  `pickList`, `orderList`, `inputNumber`, `password`, `spinner`, `speedDial`, `scrollTop`, `splitButton`, `panel`,
30
- `breadcrumb`, `richText`. Interpolacje: `paginator.range` ({start},{end},{total}), `dataTable.filter*` ({column}),
31
- `richText.styleHeading` ({level}). Nazwy dni/miesięcy w kalendarzach są wyliczane z `Intl` wg locale (nie ze słownika).
30
+ `breadcrumb`, `richText`, `auth` (including `auth.promo.*`). Interpolations: `paginator.range` ({start},{end},{total}), `dataTable.filter*` ({column}),
31
+ `richText.styleHeading` ({level}), `auth.continueWith` ({provider}), `auth.passwordHint` and `auth.errorMinLength` ({min}). Day and month names in calendars are derived from `Intl` per locale (not from the dictionary).
32
32
 
33
- ## Uwaga
34
- Pojedyncze etykiety można też nadpisać per-komponent przez odpowiedni `input()` (np. `emptyMessage`, `acceptLabel`) —
35
- input ma priorytet nad słownikiem i18n.
33
+ ## Note
34
+ Individual labels can also be overridden per component through the matching `input()` (e.g. `emptyMessage`, `acceptLabel`) —
35
+ the input takes priority over the i18n dictionary.
@@ -1,40 +1,40 @@
1
1
  # KptIcon (kpt-icon)
2
2
 
3
- Ikona inline SVG (zestaw Tabler Icons — MIT). Rozmiar dziedziczy z `font-size` (1em),
4
- kolor z `currentColor`. Import: `import { KptIcon } from '@konce-pt/angular';`
3
+ An inline SVG icon (the Tabler Icons set — MIT). The size is inherited from `font-size` (1em),
4
+ the color from `currentColor`. Import: `import { KptIcon } from '@konce-pt/angular';`
5
5
 
6
- ## Selektor
6
+ ## Selector
7
7
  `kpt-icon`
8
8
 
9
- ## Wejścia
10
- - `name`: KptIconName (wymagane) — nazwa ikony z rejestru
11
- - `size`: string (opcjonalnie, np. '1.25rem') — inaczej dziedziczy z font-size
9
+ ## Inputs
10
+ - `name`: KptIconName (required) — an icon name from the registry
11
+ - `size`: string (optional, e.g. '1.25rem') — otherwise inherited from font-size
12
12
 
13
- ## Dostępne nazwy (wbudowane)
13
+ ## Available names (built in)
14
14
  menu, x, chevron-up, chevron-down, chevron-left, chevron-right, check, search,
15
15
  grip-vertical, info, alert-triangle, circle-check, circle-x, calendar, copy, link, code,
16
16
  star, phone, map-pin, world, clock, align-left, align-center, align-right, align-justified,
17
17
  palette, highlight, clipboard, clipboard-text, table, mail, share, external-link, crosshair
18
- (pełna lista w `icons.ts`).
18
+ (the full list lives in `icons.ts`).
19
19
 
20
- ## Pełny zestaw (5130 ikon Tabler)
21
- Opcjonalny entry point `@konce-pt/angular/icons` (pobierany tylko przy imporcie):
20
+ ## The full set (5130 Tabler icons)
21
+ An optional entry point `@konce-pt/angular/icons` (downloaded only when imported):
22
22
 
23
23
  import { provideKptTablerIcons } from '@konce-pt/angular/icons';
24
24
  bootstrapApplication(App, { providers: [provideKptTablerIcons()] });
25
- // potem: <kpt-icon name="rocket" />, <kpt-icon name="arrow-left" /> …
25
+ // then: <kpt-icon name="rocket" />, <kpt-icon name="arrow-left" /> …
26
26
 
27
- Można też rejestrować własne przez `KptIconRegistry.register({ nazwa: 'inner svg' })` — treść jest
28
- sanityzowana do allowlisty geometrii SVG (`path`/`circle`/`rect`/`g`/`line`/`polygon`/`polyline`/
29
- `ellipse` + atrybuty kształtu/stylu), ale `register()` wolno wołać wyłącznie z treścią kontrolowaną
30
- build-time przez developera, nigdy bezpośrednio z danych runtime/CMS/uploadu.
31
- `kpt-icon` reaguje na późną rejestrację (sygnał `version`).
27
+ You can also register your own through `KptIconRegistry.register({ name: 'inner svg' })` — the content is
28
+ sanitized down to an allowlist of SVG geometry (`path`/`circle`/`rect`/`g`/`line`/`polygon`/`polyline`/
29
+ `ellipse` + shape/style attributes), but `register()` may only be called with content the developer controls
30
+ at build time, never straight from runtime/CMS/upload data.
31
+ `kpt-icon` reacts to late registration (the `version` signal).
32
32
 
33
- ## Przykład
33
+ ## Example
34
34
  <kpt-icon name="check" />
35
35
  <kpt-icon name="chevron-down" size="1.25rem" />
36
36
  <button><kpt-icon name="x" /></button>
37
37
 
38
- ## Licencja ikon
39
- Tabler Icons (MIT). Ikony wyodrębnione inline do `icons.ts`. Zob. ICONS-LICENSE w root.
40
- Dodanie ikony: dołóż wpis do `KPT_ICONS`/`KptIconName` (siatka 24×24, stroke 2px).
38
+ ## Icon license
39
+ Tabler Icons (MIT). The icons are extracted inline into `icons.ts`. See ICONS-LICENSE at the root.
40
+ Adding an icon: add an entry to `KPT_ICONS`/`KptIconName` (a 24×24 grid, 2px stroke).
@@ -1,15 +1,15 @@
1
1
  # KptIconButton (kpt-icon-button)
2
2
 
3
- Przycisk ikonowy (tylko ikona). Wymaga `ariaLabel`.
3
+ An icon-only button. `ariaLabel` is required.
4
4
  Import: `import { KptIconButton } from '@konce-pt/angular';`
5
5
 
6
- ## Wejścia
6
+ ## Inputs
7
7
  - `variant`: 'filled'|'tonal'|'outline'|'text'|'danger'; `size`: 'sm'|'md'|'lg'; `shape`: 'round'|'square'
8
- - `type`, `disabled`, `loading`, `ariaLabel` (wymagane)
8
+ - `type`, `disabled`, `loading`, `ariaLabel` (required)
9
9
 
10
- ## Przykłady
11
- <kpt-icon-button ariaLabel="Ustawienia"><kpt-icon name="menu" /></kpt-icon-button>
12
- <kpt-icon-button variant="danger" shape="square" ariaLabel="Usuń"><kpt-icon name="x" /></kpt-icon-button>
10
+ ## Examples
11
+ <kpt-icon-button ariaLabel="Settings"><kpt-icon name="menu" /></kpt-icon-button>
12
+ <kpt-icon-button variant="danger" shape="square" ariaLabel="Delete"><kpt-icon name="x" /></kpt-icon-button>
13
13
 
14
- ## Tokeny
15
- Współdzieli z kpt-button (`--kpt-color-primary`, `--kpt-color-muted`, …).
14
+ ## Tokens
15
+ Shared with kpt-button (`--kpt-color-primary`, `--kpt-color-muted`, …).
@@ -1,15 +1,15 @@
1
1
  # KptImage (kpt-image)
2
2
 
3
- Obraz z opcjonalnym podglądem pełnoekranowym (zoom).
3
+ An image with an optional full-screen preview (zoom).
4
4
  Import: `import { KptImage } from '@konce-pt/angular';`
5
5
 
6
- ## Wejścia
7
- - `src`: string (wymagane); `alt`: string
8
- - `width`: string | null (np. '240px')
9
- - `preview`: boolean — klik otwiera overlay z powiększeniem
6
+ ## Inputs
7
+ - `src`: string (required); `alt`: string
8
+ - `width`: string | null (e.g. '240px')
9
+ - `preview`: boolean — a click opens a magnifying overlay
10
10
 
11
- ## Przykład
12
- <kpt-image src="/foto.jpg" alt="Zdjęcie" preview width="240px" />
11
+ ## Example
12
+ <kpt-image src="/photo.jpg" alt="Photo" preview width="240px" />
13
13
 
14
- ## Tokeny
15
- Maska podglądu półprzezroczysta; ikona `zoom-in`; overlay ciemny.
14
+ ## Tokens
15
+ A semi-transparent preview mask; the `zoom-in` icon; a dark overlay.
@@ -1,48 +1,50 @@
1
1
  # KptInput (kpt-input)
2
2
 
3
- Pole tekstowe Koncept UI zintegrowane z Angular Signal Forms. Implementuje
4
- `FormValueControl<string>` — wiąż dyrektywą `FormField` (`@angular/forms/signals`).
5
- Bez `ControlValueAccessor`. Import: `import { KptInput } from '@konce-pt/angular';`
3
+ The Koncept UI text field, integrated with Angular Signal Forms. It implements
4
+ `FormValueControl<string>` — bind it with the `FormField` directive (`@angular/forms/signals`).
5
+ No `ControlValueAccessor`. Import: `import { KptInput } from '@konce-pt/angular';`
6
6
 
7
- ## Selektor
7
+ ## Selector
8
8
  `kpt-input`
9
9
 
10
- ## Użycie z Signal Forms
10
+ ## Usage with Signal Forms
11
11
 
12
12
  import { form, FormField, required, email } from '@angular/forms/signals';
13
13
 
14
14
  model = signal({ email: '' });
15
15
  loginForm = form(this.model, (p) => {
16
- required(p.email, { message: 'E-mail jest wymagany' });
17
- email(p.email, { message: 'Podaj poprawny adres e-mail' });
16
+ required(p.email, { message: 'E-mail is required' });
17
+ email(p.email, { message: 'Enter a valid e-mail address' });
18
18
  });
19
19
 
20
- // szablon (imports: [KptInput, FormField, FormRoot, KptButton])
20
+ // template (imports: [KptInput, FormField, FormRoot, KptButton])
21
21
  <form [formRoot]="loginForm" (submit)="onSubmit()">
22
22
  <kpt-input [formField]="loginForm.email" type="email" id="f-email" />
23
- <kpt-button type="submit" [disabled]="loginForm().invalid()">Zaloguj</kpt-button>
23
+ <kpt-button type="submit" [disabled]="loginForm().invalid()">Sign in</kpt-button>
24
24
  </form>
25
25
 
26
- `[formRoot]` sam ustawia `novalidate` i woła `submit()`; `submit()` sam robi `markAsTouched()`.
27
- Nie warunkuj walidatorów przez `when: state.touched()` — psuje to `valid()`.
28
- Pełny przepływ: sekcja `## Formularz od zera (Signal Forms)` w głównym llms.txt.
26
+ `[formRoot]` sets `novalidate` and calls `submit()` on its own; `submit()` does `markAsTouched()` on its own.
27
+ Do not gate validators with `when: state.touched()` — it breaks `valid()`.
28
+ The full flow: the `## A form from scratch (Signal Forms)` section in the root llms.txt.
29
29
 
30
- ## Wejścia prezentacyjne
31
- - `type`: 'text'|'email'|'password'|'number'|'search'|'tel'|'url'|'time' (domyślnie 'text')
30
+ ## Presentational inputs
31
+ - `type`: 'text'|'email'|'password'|'number'|'search'|'tel'|'url'|'time' (default 'text')
32
32
  - `placeholder`: string
33
- - `id`: string — trafia na wewnętrzny `<input>` (do `label[for]`); host go nie nosi
33
+ - `id`: string — lands on the inner `<input>` (for `label[for]`); the host does not carry it
34
34
  - `ariaLabel`: string | null
35
+ - `autocomplete`: string | null — a hint for the browser and the password manager
36
+ (e.g. `email`, `username`, `one-time-code`); without it autofill does not work
35
37
 
36
- ## Stan wiązany automatycznie przez FormField
37
- `value` (model, wymagane), `disabled`, `readonly`, `required`, `invalid`, `errors`,
38
- `touched`; output `touch` (emitowany na blur). Nie ustawiaj ich ręcznie przy użyciu z formularzem.
38
+ ## State bound automatically by FormField
39
+ `value` (model, required), `disabled`, `readonly`, `required`, `invalid`, `errors`,
40
+ `touched`; the `touch` output (emitted on blur). Do not set them by hand when used with a form.
39
41
 
40
- ## Tokeny
42
+ ## Tokens
41
43
  `--kpt-form-field-{bg,text,placeholder,border,border-hover,border-focus,border-error,radius}`.
42
44
 
43
- ## Dostępność
44
- - `aria-invalid="true"` dopiero gdy pole jest nieprawidłowe **i** dotknięte (`blur`) — świeży,
45
- pusty formularz nie jest malowany na czerwono.
46
- - `aria-required="true"` przy `required` — celowo nie natywny atrybut `required`, który
47
- blokowałby zdarzenie submit i uruchamiał walidację przeglądarki obok Signal Forms.
48
- - Komunikaty błędów wyświetla zwykle `kpt-form-field` (`role="alert"`).
45
+ ## Accessibility
46
+ - `aria-invalid="true"` only once the field is invalid **and** touched (`blur`) — a fresh,
47
+ empty form is not painted red.
48
+ - `aria-required="true"` with `required` — deliberately not the native `required` attribute, which
49
+ would block the submit event and run browser validation alongside Signal Forms.
50
+ - Error messages are usually rendered by `kpt-form-field` (`role="alert"`).
@@ -1,20 +1,20 @@
1
1
  # KptInputMask (kpt-input-mask)
2
2
 
3
- Pole z maską znakową na Signal Forms. Wartość = string.
3
+ A field with a character mask on Signal Forms. The value is a string.
4
4
  Import: `import { KptInputMask } from '@konce-pt/angular';`
5
5
 
6
- ## Tokeny maski
7
- - `9` = cyfra, `a` = litera, `*` = alfanumeryczny. Pozostałe znaki maski to literały (spacje, nawiasy, myślniki).
6
+ ## Mask tokens
7
+ - `9` = a digit, `a` = a letter, `*` = alphanumeric. Every other character in the mask is a literal (spaces, parentheses, hyphens).
8
8
 
9
- ## Wejścia / model
10
- - `value`: model<string> (lub `formField`)
11
- - `mask`: string (np. `(999) 999-99-99`)
12
- - `placeholder`: string (domyślnie = maska)
9
+ ## Inputs / model
10
+ - `value`: model<string> (or `formField`)
11
+ - `mask`: string (e.g. `(999) 999-99-99`)
12
+ - `placeholder`: string (defaults to the mask)
13
13
  - `disabled`/`invalid`/`touched`: boolean; `touch`: output
14
14
 
15
- ## Przykład
15
+ ## Example
16
16
  <kpt-input-mask [formField]="f.phone" mask="(999) 999-99-99" />
17
17
  <kpt-input-mask [(value)]="zip" mask="99-999" />
18
18
 
19
- ## Tokeny
20
- Pole `--kpt-form-field-*`.
19
+ ## Tokens
20
+ The field uses `--kpt-form-field-*`.
@@ -1,40 +1,40 @@
1
1
  # KptInputNumber (kpt-input-number)
2
2
 
3
- Pole liczbowe ze strzałkami krokowania na Signal Forms. Wartość = number | null.
4
- `showButtons="false"` daje wariant bez strzałek — do zakresów „od–do".
3
+ A numeric field with stepper arrows on Signal Forms. The value is number | null.
4
+ `showButtons="false"` gives the arrow-less variant — for "from–to" ranges.
5
5
  Import: `import { KptInputNumber } from '@konce-pt/angular';`
6
6
 
7
- ## Wejścia / model
8
- - `value`: model<number | null> (lub `formField`)
9
- - `min`/`max`: number | undefined; `step`: number (domyślnie 1). Pod `[formField]` granic
10
- NIE bindujemy — deklarują je `min()`/`max()` w `form()`, a `FormField` sam wstrzykuje je
11
- w te wejścia; `[min]`/`[max]` obok `[formField]` to błąd kompilacji
12
- (FORM_FIELD_UNSUPPORTED_BINDING). Bindowanie wprost tylko z `[(value)]`.
13
- - `suffix`: string (np. ' %'); `placeholder`: string
14
- - `showButtons`: boolean (domyślnie `true`) — `false` chowa strzałki `−`/`+`; treść pola
15
- wyrównuje się wtedy do lewej, jak w `kpt-input` (modyfikator `.kpt-input-number--plain`)
7
+ ## Inputs / model
8
+ - `value`: model<number | null> (or `formField`)
9
+ - `min`/`max`: number | undefined; `step`: number (default 1). Under `[formField]` do NOT
10
+ bind the bounds — they are declared by `min()`/`max()` in `form()`, and `FormField` injects them
11
+ into these inputs itself; `[min]`/`[max]` next to `[formField]` is a compilation error
12
+ (FORM_FIELD_UNSUPPORTED_BINDING). Bind them directly only together with `[(value)]`.
13
+ - `suffix`: string (e.g. ' %'); `placeholder`: string
14
+ - `showButtons`: boolean (default `true`) — `false` hides the `−`/`+` arrows; the field content
15
+ then aligns left, as in `kpt-input` (the `.kpt-input-number--plain` modifier)
16
16
  - `disabled`/`invalid`/`touched`: boolean; `touch`: output
17
17
 
18
- ## Przykład
18
+ ## Example
19
19
  <kpt-input-number [formField]="f.qty" [step]="1" />
20
- <kpt-input-number [(value)]="qty" [min]="0" [max]="99" suffix=" szt." />
21
- <kpt-input-number [formField]="f.priceFrom" [showButtons]="false" suffix=" zł" />
20
+ <kpt-input-number [(value)]="qty" [min]="0" [max]="99" suffix=" pcs" />
21
+ <kpt-input-number [formField]="f.priceFrom" [showButtons]="false" suffix=" USD" />
22
22
 
23
- ## Zakres „od–do" (walidacja między polami)
23
+ ## A "from–to" range (cross-field validation)
24
24
 
25
- Dwa osobne pola formularza; regułę „do ≥ od" wpina się przez `validateTree` na korzeniu.
26
- Błąd celuje się w konkretne pole właściwością `fieldTree` — inaczej wylądowałby na formularzu
27
- i nie pokazałby się pod żadną kontrolką.
25
+ Two separate form fields; the "to ≥ from" rule is attached through `validateTree` on the root.
26
+ The error is aimed at a specific field with the `fieldTree` property — otherwise it would land on the form
27
+ and would not show up under any control.
28
28
 
29
29
  import { form, max, min, validateTree } from '@angular/forms/signals';
30
30
 
31
31
  model = signal({ priceFrom: null as number | null, priceTo: null as number | null });
32
32
 
33
33
  rangeForm = form(this.model, (path) => {
34
- min(path.priceFrom, 0, { message: 'Wartość nie może być ujemna' });
35
- max(path.priceFrom, 9999, { message: 'Wartość nie może przekroczyć 9999' });
36
- min(path.priceTo, 0, { message: 'Wartość nie może być ujemna' });
37
- max(path.priceTo, 9999, { message: 'Wartość nie może przekroczyć 9999' });
34
+ min(path.priceFrom, 0, { message: 'The value cannot be negative' });
35
+ max(path.priceFrom, 9999, { message: 'The value cannot exceed 9999' });
36
+ min(path.priceTo, 0, { message: 'The value cannot be negative' });
37
+ max(path.priceTo, 9999, { message: 'The value cannot exceed 9999' });
38
38
 
39
39
  validateTree(path, (ctx) => {
40
40
  const from = ctx.valueOf(path.priceFrom);
@@ -42,25 +42,25 @@ i nie pokazałby się pod żadną kontrolką.
42
42
  if (from === null || to === null || from <= to) return null;
43
43
  return {
44
44
  kind: 'range',
45
- message: 'Wartość „do" nie może być mniejsza niż „od"',
46
- fieldTree: ctx.fieldTreeOf(path.priceTo), // błąd ląduje na polu „do"
45
+ message: 'The "to" value cannot be lower than "from"',
46
+ fieldTree: ctx.fieldTreeOf(path.priceTo), // the error lands on the "to" field
47
47
  };
48
48
  });
49
49
  });
50
50
 
51
- // szablon — dwie kolumny od md (klasy utility z @konce-pt/grid)
51
+ // template — two columns from md up (utility classes from @konce-pt/grid)
52
52
  <form class="kpt-grid" [formRoot]="rangeForm" (submit)="onSubmit()">
53
- <kpt-form-field class="kpt-col-12 kpt-col-md-6" label="Cena od" [error]="fromError()">
54
- <kpt-input-number [formField]="rangeForm.priceFrom" [showButtons]="false" suffix=" zł" />
53
+ <kpt-form-field class="kpt-col-12 kpt-col-md-6" label="Price from" [error]="fromError()">
54
+ <kpt-input-number [formField]="rangeForm.priceFrom" [showButtons]="false" suffix=" USD" />
55
55
  </kpt-form-field>
56
- <kpt-form-field class="kpt-col-12 kpt-col-md-6" label="Cena do" [error]="toError()">
57
- <kpt-input-number [formField]="rangeForm.priceTo" [showButtons]="false" suffix=" zł" />
56
+ <kpt-form-field class="kpt-col-12 kpt-col-md-6" label="Price to" [error]="toError()">
57
+ <kpt-input-number [formField]="rangeForm.priceTo" [showButtons]="false" suffix=" USD" />
58
58
  </kpt-form-field>
59
59
  </form>
60
60
 
61
- `ctx.valueOf(path.x)` czyta wartość innego pola, `ctx.fieldTreeOf(path.x)` wskazuje pole
62
- docelowe błędu. Komunikaty podaje się przez `errorFor()` z bramką `touched()` — walidatorów
63
- nie warunkuj. Pełny przepływ submit: `## Formularz od zera (Signal Forms)` w głównym llms.txt.
61
+ `ctx.valueOf(path.x)` reads another field's value, `ctx.fieldTreeOf(path.x)` points at the field
62
+ the error belongs to. Messages are supplied through `errorFor()` with a `touched()` gate — do not
63
+ gate the validators. The full submit flow: `## A form from scratch (Signal Forms)` in the root llms.txt.
64
64
 
65
- ## Tokeny
66
- Pole `--kpt-form-field-*`; przyciski `--kpt-color-muted`.
65
+ ## Tokens
66
+ The field `--kpt-form-field-*`; the buttons `--kpt-color-muted`.
@@ -1,19 +1,19 @@
1
1
  # KptInputOtp (kpt-input-otp)
2
2
 
3
- Pole kodu jednorazowego (OTP/PIN) — N osobnych pól z autofocusem i wklejaniem. Signal Forms.
4
- Wartość = string (sklejone znaki). Import: `import { KptInputOtp } from '@konce-pt/angular';`
3
+ A one-time code field (OTP/PIN) — N separate boxes with autofocus and paste support. Signal Forms.
4
+ The value is a string (the characters joined). Import: `import { KptInputOtp } from '@konce-pt/angular';`
5
5
 
6
- ## Wejścia / model
7
- - `value`: model<string> (lub `formField`)
8
- - `length`: number (domyślnie 6)
9
- - `integerOnly`: boolean — tylko cyfry
6
+ ## Inputs / model
7
+ - `value`: model<string> (or `formField`)
8
+ - `length`: number (default 6)
9
+ - `integerOnly`: boolean — digits only
10
10
  - `disabled`/`invalid`/`touched`: boolean; `touch`: output
11
11
 
12
- ## Zachowanie
13
- Wpisanie znaku przechodzi do następnego pola; Backspace cofa; wklejenie rozkłada kod na pola.
12
+ ## Behavior
13
+ Typing a character moves to the next box; Backspace goes back; pasting spreads the code across the boxes.
14
14
 
15
- ## Przykład
15
+ ## Example
16
16
  <kpt-input-otp [formField]="f.code" [length]="6" integerOnly />
17
17
 
18
- ## Tokeny
19
- Komórki `--kpt-form-field-*`.
18
+ ## Tokens
19
+ The boxes use `--kpt-form-field-*`.
@@ -1,23 +1,23 @@
1
1
  # KptKnob (kpt-knob)
2
2
 
3
- Pokrętło (knob) — wybór wartości po łuku SVG, myszką (drag) lub klawiszami strzałek. Signal Forms.
3
+ A knob — pick a value along an SVG arc, with the mouse (drag) or the arrow keys. Signal Forms.
4
4
  Import: `import { KptKnob } from '@konce-pt/angular';`
5
5
 
6
- ## Wejścia / model
7
- - `value`: model<number> (lub `formField`)
8
- - `min`/`max`: number | undefined (0/100); `step`: number. Pod `[formField]` zakres bierze się
9
- z `min()`/`max()` w `form()` — `[min]`/`[max]` obok `[formField]` to błąd kompilacji
10
- (FORM_FIELD_UNSUPPORTED_BINDING); bindowanie wprost tylko z `[(value)]`.
11
- - `size`: px (domyślnie 96); `stroke`: px (10); `suffix`: string
12
- - `showValue`: boolean (domyślnie true)
6
+ ## Inputs / model
7
+ - `value`: model<number> (or `formField`)
8
+ - `min`/`max`: number | undefined (0/100); `step`: number. Under `[formField]` the bounds come
9
+ from `min()`/`max()` in `form()` — `[min]`/`[max]` next to `[formField]` is a compilation error
10
+ (FORM_FIELD_UNSUPPORTED_BINDING); bind them directly only together with `[(value)]`.
11
+ - `size`: px (default 96); `stroke`: px (10); `suffix`: string
12
+ - `showValue`: boolean (default true)
13
13
  - `disabled`/`invalid`/`touched`: boolean; `touch`: output
14
14
 
15
- ## Dostępność
16
- `role="slider"` + aria-valuemin/max/now; strzałki, Home/End.
15
+ ## Accessibility
16
+ `role="slider"` + aria-valuemin/max/now; arrow keys, Home/End.
17
17
 
18
- ## Przykład
19
- <kpt-knob [formField]="f.level" [step]="5" /> <!-- zakres z min()/max() w form() -->
18
+ ## Example
19
+ <kpt-knob [formField]="f.level" [step]="5" /> <!-- bounds from min()/max() in form() -->
20
20
  <kpt-knob [(value)]="level" [min]="0" [max]="100" [step]="5" />
21
21
 
22
- ## Tokeny
23
- Łuk tła `--kpt-color-border`; wartość `--kpt-color-primary`; tekst `--kpt-color-on-surface`.
22
+ ## Tokens
23
+ The background arc `--kpt-color-border`; the value `--kpt-color-primary`; text `--kpt-color-on-surface`.
@@ -1,17 +1,17 @@
1
1
  # KptListbox (kpt-listbox)
2
2
 
3
- Lista wyboru (listbox) na Signal Forms. Pojedynczy lub wielokrotny wybór, opcjonalny filtr.
4
- Wartość: `T` (single) lub `T[]` (multiple). Import: `import { KptListbox } from '@konce-pt/angular';`
3
+ A selection list (listbox) on Signal Forms. Single or multiple selection, an optional filter.
4
+ Value: `T` (single) or `T[]` (multiple). Import: `import { KptListbox } from '@konce-pt/angular';`
5
5
 
6
- ## Wejścia / model
7
- - `value`: model<T | T[] | null> (lub `formField`)
6
+ ## Inputs / model
7
+ - `value`: model<T | T[] | null> (or `formField`)
8
8
  - `options`: KptOption<T>[] — { label, value, disabled? }
9
- - `multiple`: boolean; `filter`: boolean (pole wyszukiwania)
9
+ - `multiple`: boolean; `filter`: boolean (a search field)
10
10
  - `disabled`/`invalid`/`touched`: boolean; `touch`: output
11
11
 
12
- ## Przykład
12
+ ## Example
13
13
  <kpt-listbox [formField]="f.role" [options]="roles" filter />
14
14
  <kpt-listbox [(value)]="tags" [options]="tagOptions" multiple />
15
15
 
16
- ## Tokeny
17
- Ramka `--kpt-form-field-*`; zaznaczenie `--kpt-color-primary`.
16
+ ## Tokens
17
+ The frame `--kpt-form-field-*`; selection `--kpt-color-primary`.
@@ -1,23 +1,23 @@
1
1
  # KptMegamenu (kpt-megamenu)
2
2
 
3
- Mega-menu — pozioma belka z szerokim, wielokolumnowym panelem.
4
- Struktura: pozycja górna → `items` (kolumny) → każda kolumna `items` (odnośniki).
5
- Panel na CDK Overlay (doczepiany do `body`, nieprzycinany przez `overflow: hidden`).
6
- Wymaga `import '@angular/cdk/overlay-prebuilt.css';`
3
+ A mega menu — a horizontal bar with a wide, multi-column panel.
4
+ Structure: a top-level entry → `items` (the columns) → each column's `items` (the links).
5
+ The panel sits on CDK Overlay (attached to `body`, never clipped by `overflow: hidden`).
6
+ Requires `import '@angular/cdk/overlay-prebuilt.css';`
7
7
  Import: `import { KptMegamenu } from '@konce-pt/angular';`
8
8
 
9
- ## Wejścia / wyjścia
10
- - `items`: KptMenuItem<T>[] (3 poziomy: top → kolumny → linki)
11
- - `selected`: KptMenuItem<T> (kliknięty odnośnik)
9
+ ## Inputs / outputs
10
+ - `items`: KptMenuItem<T>[] (3 levels: top → columns → links)
11
+ - `selected`: KptMenuItem<T> (the clicked link)
12
12
 
13
- ## Przykład
13
+ ## Example
14
14
  items = [{
15
- label: 'Produkty',
15
+ label: 'Products',
16
16
  items: [
17
- { label: 'Komponenty', items: [{ label: 'Formularze' }, { label: 'Tabele' }] },
18
- { label: 'Szablony', items: [{ label: 'Dashboard' }] },
17
+ { label: 'Components', items: [{ label: 'Forms' }, { label: 'Tables' }] },
18
+ { label: 'Templates', items: [{ label: 'Dashboard' }] },
19
19
  ],
20
20
  }];
21
21
 
22
- ## Tokeny
23
- Panel `--kpt-color-surface-raised`, `--kpt-elevation-3`.
22
+ ## Tokens
23
+ The panel `--kpt-color-surface-raised`, `--kpt-elevation-3`.