@konce-pt/angular 0.6.1 → 0.7.0
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.
- package/CHANGELOG.md +68 -0
- package/README.md +38 -19
- package/fesm2022/konce-pt-angular-charts.mjs +1409 -0
- package/fesm2022/konce-pt-angular-charts.mjs.map +1 -0
- package/fesm2022/konce-pt-angular-grid.mjs +232 -0
- package/{dist/fesm2022 → fesm2022}/konce-pt-angular-grid.mjs.map +1 -1
- package/fesm2022/konce-pt-angular-roadmap.mjs +1919 -0
- package/fesm2022/konce-pt-angular-roadmap.mjs.map +1 -0
- package/fesm2022/konce-pt-angular.mjs +11869 -0
- package/fesm2022/konce-pt-angular.mjs.map +1 -0
- package/package.json +28 -51
- package/roadmap/src/lib/llms.txt +112 -0
- package/{dist/src → src}/lib/form-field/llms.txt +5 -0
- package/{dist/src → src}/lib/input/llms.txt +13 -3
- package/src/lib/input-number/llms.txt +61 -0
- package/src/lib/tooltip/llms.txt +33 -0
- package/{dist/types → types}/konce-pt-angular-charts.d.ts +1 -0
- package/types/konce-pt-angular-charts.d.ts.map +1 -0
- package/{dist/types → types}/konce-pt-angular-grid.d.ts +1 -0
- package/types/konce-pt-angular-grid.d.ts.map +1 -0
- package/{dist/types → types}/konce-pt-angular-icons.d.ts +1 -0
- package/types/konce-pt-angular-icons.d.ts.map +1 -0
- package/types/konce-pt-angular-roadmap.d.ts +649 -0
- package/types/konce-pt-angular-roadmap.d.ts.map +1 -0
- package/{dist/types → types}/konce-pt-angular.d.ts +69 -3
- package/types/konce-pt-angular.d.ts.map +1 -0
- package/dist/LICENSE +0 -21
- package/dist/README.md +0 -316
- package/dist/fesm2022/konce-pt-angular-charts.mjs +0 -957
- package/dist/fesm2022/konce-pt-angular-charts.mjs.map +0 -1
- package/dist/fesm2022/konce-pt-angular-grid.mjs +0 -218
- package/dist/fesm2022/konce-pt-angular.mjs +0 -8462
- package/dist/fesm2022/konce-pt-angular.mjs.map +0 -1
- package/dist/package.json +0 -79
- package/dist/src/lib/input-number/llms.txt +0 -17
- package/dist/src/lib/tooltip/llms.txt +0 -19
- /package/{dist/charts → charts}/src/lib/llms.txt +0 -0
- /package/{dist/fesm2022 → fesm2022}/konce-pt-angular-icons.mjs +0 -0
- /package/{dist/fesm2022 → fesm2022}/konce-pt-angular-icons.mjs.map +0 -0
- /package/{dist/grid → grid}/src/lib/llms.txt +0 -0
- /package/{dist/src → src}/lib/accordion/llms.txt +0 -0
- /package/{dist/src → src}/lib/alert/llms.txt +0 -0
- /package/{dist/src → src}/lib/app-shell/llms.txt +0 -0
- /package/{dist/src → src}/lib/autocomplete/llms.txt +0 -0
- /package/{dist/src → src}/lib/avatar/llms.txt +0 -0
- /package/{dist/src → src}/lib/avatar-group/llms.txt +0 -0
- /package/{dist/src → src}/lib/badge/llms.txt +0 -0
- /package/{dist/src → src}/lib/bottom-sheet/llms.txt +0 -0
- /package/{dist/src → src}/lib/breadcrumb/llms.txt +0 -0
- /package/{dist/src → src}/lib/button/llms.txt +0 -0
- /package/{dist/src → src}/lib/button-group/llms.txt +0 -0
- /package/{dist/src → src}/lib/card/llms.txt +0 -0
- /package/{dist/src → src}/lib/carousel/llms.txt +0 -0
- /package/{dist/src → src}/lib/checkbox/llms.txt +0 -0
- /package/{dist/src → src}/lib/chip/llms.txt +0 -0
- /package/{dist/src → src}/lib/chips-input/llms.txt +0 -0
- /package/{dist/src → src}/lib/color-picker/llms.txt +0 -0
- /package/{dist/src → src}/lib/confirm/llms.txt +0 -0
- /package/{dist/src → src}/lib/context-menu/llms.txt +0 -0
- /package/{dist/src → src}/lib/data-table/llms.txt +0 -0
- /package/{dist/src → src}/lib/data-view/llms.txt +0 -0
- /package/{dist/src → src}/lib/date-range/llms.txt +0 -0
- /package/{dist/src → src}/lib/datepicker/llms.txt +0 -0
- /package/{dist/src → src}/lib/dialog/llms.txt +0 -0
- /package/{dist/src → src}/lib/divider/llms.txt +0 -0
- /package/{dist/src → src}/lib/drawer/llms.txt +0 -0
- /package/{dist/src → src}/lib/empty/llms.txt +0 -0
- /package/{dist/src → src}/lib/fab/llms.txt +0 -0
- /package/{dist/src → src}/lib/fieldset/llms.txt +0 -0
- /package/{dist/src → src}/lib/file-upload/llms.txt +0 -0
- /package/{dist/src → src}/lib/galleria/llms.txt +0 -0
- /package/{dist/src → src}/lib/i18n/llms.txt +0 -0
- /package/{dist/src → src}/lib/icon/llms.txt +0 -0
- /package/{dist/src → src}/lib/icon-button/llms.txt +0 -0
- /package/{dist/src → src}/lib/image/llms.txt +0 -0
- /package/{dist/src → src}/lib/input-mask/llms.txt +0 -0
- /package/{dist/src → src}/lib/input-otp/llms.txt +0 -0
- /package/{dist/src → src}/lib/knob/llms.txt +0 -0
- /package/{dist/src → src}/lib/listbox/llms.txt +0 -0
- /package/{dist/src → src}/lib/megamenu/llms.txt +0 -0
- /package/{dist/src → src}/lib/menu/llms.txt +0 -0
- /package/{dist/src → src}/lib/menubar/llms.txt +0 -0
- /package/{dist/src → src}/lib/meter-group/llms.txt +0 -0
- /package/{dist/src → src}/lib/order-list/llms.txt +0 -0
- /package/{dist/src → src}/lib/paginator/llms.txt +0 -0
- /package/{dist/src → src}/lib/panel/llms.txt +0 -0
- /package/{dist/src → src}/lib/password/llms.txt +0 -0
- /package/{dist/src → src}/lib/pick-list/llms.txt +0 -0
- /package/{dist/src → src}/lib/popover/llms.txt +0 -0
- /package/{dist/src → src}/lib/progress/llms.txt +0 -0
- /package/{dist/src → src}/lib/radio-group/llms.txt +0 -0
- /package/{dist/src → src}/lib/rating/llms.txt +0 -0
- /package/{dist/src → src}/lib/rich-text/llms.txt +0 -0
- /package/{dist/src → src}/lib/scroll-top/llms.txt +0 -0
- /package/{dist/src → src}/lib/select/llms.txt +0 -0
- /package/{dist/src → src}/lib/sidenav/llms.txt +0 -0
- /package/{dist/src → src}/lib/skeleton/llms.txt +0 -0
- /package/{dist/src → src}/lib/slider/llms.txt +0 -0
- /package/{dist/src → src}/lib/speed-dial/llms.txt +0 -0
- /package/{dist/src → src}/lib/spinner/llms.txt +0 -0
- /package/{dist/src → src}/lib/split-button/llms.txt +0 -0
- /package/{dist/src → src}/lib/splitter/llms.txt +0 -0
- /package/{dist/src → src}/lib/stepper/llms.txt +0 -0
- /package/{dist/src → src}/lib/switch/llms.txt +0 -0
- /package/{dist/src → src}/lib/switch-group/llms.txt +0 -0
- /package/{dist/src → src}/lib/tabs/llms.txt +0 -0
- /package/{dist/src → src}/lib/textarea/llms.txt +0 -0
- /package/{dist/src → src}/lib/timeline/llms.txt +0 -0
- /package/{dist/src → src}/lib/toast/llms.txt +0 -0
- /package/{dist/src → src}/lib/toolbar/llms.txt +0 -0
- /package/{dist/src → src}/lib/tree/llms.txt +0 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@konce-pt/angular",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.7.0",
|
|
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",
|
|
@@ -29,29 +29,6 @@
|
|
|
29
29
|
"koncept-ui"
|
|
30
30
|
],
|
|
31
31
|
"sideEffects": false,
|
|
32
|
-
"files": [
|
|
33
|
-
"dist"
|
|
34
|
-
],
|
|
35
|
-
"module": "./dist/fesm2022/konce-pt-angular.mjs",
|
|
36
|
-
"types": "./dist/types/konce-pt-angular.d.ts",
|
|
37
|
-
"exports": {
|
|
38
|
-
".": {
|
|
39
|
-
"types": "./dist/types/konce-pt-angular.d.ts",
|
|
40
|
-
"default": "./dist/fesm2022/konce-pt-angular.mjs"
|
|
41
|
-
},
|
|
42
|
-
"./icons": {
|
|
43
|
-
"types": "./dist/types/konce-pt-angular-icons.d.ts",
|
|
44
|
-
"default": "./dist/fesm2022/konce-pt-angular-icons.mjs"
|
|
45
|
-
},
|
|
46
|
-
"./charts": {
|
|
47
|
-
"types": "./dist/types/konce-pt-angular-charts.d.ts",
|
|
48
|
-
"default": "./dist/fesm2022/konce-pt-angular-charts.mjs"
|
|
49
|
-
},
|
|
50
|
-
"./grid": {
|
|
51
|
-
"types": "./dist/types/konce-pt-angular-grid.d.ts",
|
|
52
|
-
"default": "./dist/fesm2022/konce-pt-angular-grid.mjs"
|
|
53
|
-
}
|
|
54
|
-
},
|
|
55
32
|
"peerDependencies": {
|
|
56
33
|
"@angular/cdk": "^22.0.0",
|
|
57
34
|
"@angular/common": "^22.0.0",
|
|
@@ -61,33 +38,33 @@
|
|
|
61
38
|
"dependencies": {
|
|
62
39
|
"tslib": "^2.3.0"
|
|
63
40
|
},
|
|
64
|
-
"
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
"
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
"
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
"
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
41
|
+
"module": "fesm2022/konce-pt-angular.mjs",
|
|
42
|
+
"typings": "types/konce-pt-angular.d.ts",
|
|
43
|
+
"exports": {
|
|
44
|
+
"./package.json": {
|
|
45
|
+
"default": "./package.json"
|
|
46
|
+
},
|
|
47
|
+
".": {
|
|
48
|
+
"types": "./types/konce-pt-angular.d.ts",
|
|
49
|
+
"default": "./fesm2022/konce-pt-angular.mjs"
|
|
50
|
+
},
|
|
51
|
+
"./charts": {
|
|
52
|
+
"types": "./types/konce-pt-angular-charts.d.ts",
|
|
53
|
+
"default": "./fesm2022/konce-pt-angular-charts.mjs"
|
|
54
|
+
},
|
|
55
|
+
"./grid": {
|
|
56
|
+
"types": "./types/konce-pt-angular-grid.d.ts",
|
|
57
|
+
"default": "./fesm2022/konce-pt-angular-grid.mjs"
|
|
58
|
+
},
|
|
59
|
+
"./icons": {
|
|
60
|
+
"types": "./types/konce-pt-angular-icons.d.ts",
|
|
61
|
+
"default": "./fesm2022/konce-pt-angular-icons.mjs"
|
|
62
|
+
},
|
|
63
|
+
"./roadmap": {
|
|
64
|
+
"types": "./types/konce-pt-angular-roadmap.d.ts",
|
|
65
|
+
"default": "./fesm2022/konce-pt-angular-roadmap.mjs"
|
|
87
66
|
}
|
|
88
67
|
},
|
|
89
|
-
"
|
|
90
|
-
|
|
91
|
-
"clean": "node -e \"require('fs').rmSync('dist',{recursive:true,force:true})\""
|
|
92
|
-
}
|
|
68
|
+
"type": "module",
|
|
69
|
+
"scripts": {}
|
|
93
70
|
}
|
|
@@ -0,0 +1,112 @@
|
|
|
1
|
+
# KptRoadmap (kpt-roadmap)
|
|
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.
|
|
5
|
+
Import: `import { KptRoadmap } from '@konce-pt/angular/roadmap';`
|
|
6
|
+
|
|
7
|
+
## Selektor
|
|
8
|
+
`kpt-roadmap` — standalone, OnPush, zoneless. Generyk `KptRoadmap<TItem, TGroup>` typuje pole `meta`.
|
|
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
|
|
17
|
+
|
|
18
|
+
## Model / zdarzenia
|
|
19
|
+
- `collapsedGroups`: model<string[]> — dwukierunkowe id zwiniętych grup
|
|
20
|
+
- `itemClick`: output<KptRoadmapItem>
|
|
21
|
+
- `rangeChange`: output<KptTimeRange> — wyliczony zakres osi
|
|
22
|
+
|
|
23
|
+
## KptRoadmapConfig
|
|
24
|
+
- `items`: KptRoadmapItem[] (wymagane)
|
|
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
|
|
29
|
+
- `locale?`: string; `today?`: Date | number | string
|
|
30
|
+
- `timeline?`, `rows?`, `dependencies?`, `interaction?` — opcje szczegółowe
|
|
31
|
+
|
|
32
|
+
### KptRoadmapItem
|
|
33
|
+
- `id`: string, `label`: string (wymagane)
|
|
34
|
+
- `start`: Date | number | string; `end?`: to samo — brak `end` oznacza kamień milowy
|
|
35
|
+
- `sublabel?`, `icon?`, `disabled?`
|
|
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
|
|
41
|
+
- `meta?`: TItem
|
|
42
|
+
- Pola `draggable`, `resizable`, `locked`, `constraints` są zarezerwowane pod edycję i dziś ignorowane.
|
|
43
|
+
|
|
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
|
|
47
|
+
|
|
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)
|
|
54
|
+
|
|
55
|
+
### KptRoadmapRowOptions (`config.rows`)
|
|
56
|
+
- `mode?`: 'row-per-item' (domyślnie) | 'pack' — 'pack' układa nienachodzące zadania w jednym wierszu
|
|
57
|
+
- `itemHeight?`, `groupHeight?`, `laneHeight?`, `packMinGapMs?`
|
|
58
|
+
- `showUngroupedHeader?`, `ungroupedLabel?`
|
|
59
|
+
|
|
60
|
+
## Przykład
|
|
61
|
+
|
|
62
|
+
<kpt-roadmap [config]="roadmap" scrollHeight="420px" />
|
|
63
|
+
|
|
64
|
+
roadmap: KptRoadmapConfig = {
|
|
65
|
+
zoom: 'week',
|
|
66
|
+
groups: [{ id: 'app', label: 'Aplikacja' }],
|
|
67
|
+
items: [
|
|
68
|
+
{ id: 'auth', label: 'Logowanie', start: '2026-08-24', end: '2026-08-31',
|
|
69
|
+
groupId: 'app', variant: 'success', progress: 1 },
|
|
70
|
+
{ id: 'ship', label: 'Wydanie', start: '2026-09-14', groupId: 'app',
|
|
71
|
+
variant: 'warning', dependsOn: ['auth'] },
|
|
72
|
+
],
|
|
73
|
+
};
|
|
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.
|
|
91
|
+
|
|
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.
|
|
@@ -45,6 +45,11 @@ Kontrolkę umieszcza się w treści (ng-content):
|
|
|
45
45
|
return s.touched() && s.invalid() ? s.errors()[0]?.message ?? null : null;
|
|
46
46
|
});
|
|
47
47
|
|
|
48
|
+
Bramka `touched()` dotyczy wyłącznie komunikatu — walidatorów nie warunkuj (`when:` na
|
|
49
|
+
`state.touched()` sprawia, że `valid()` kłamie na nietkniętym formularzu). Kontrolki `kpt-*`
|
|
50
|
+
same bramkują swój stan wizualny tak samo. Pełny przepływ submit: sekcja
|
|
51
|
+
`## Formularz od zera (Signal Forms)` w głównym llms.txt.
|
|
52
|
+
|
|
48
53
|
## Tokeny
|
|
49
54
|
`--kpt-form-field-label`, `--kpt-form-field-hint`, `--kpt-form-field-error`, `--kpt-color-danger`.
|
|
50
55
|
Warianty float dodatkowo: `--kpt-form-field-placeholder` (etykieta spoczynkowa),
|
|
@@ -17,8 +17,15 @@ Bez `ControlValueAccessor`. Import: `import { KptInput } from '@konce-pt/angular
|
|
|
17
17
|
email(p.email, { message: 'Podaj poprawny adres e-mail' });
|
|
18
18
|
});
|
|
19
19
|
|
|
20
|
-
// szablon (imports: [KptInput, FormField])
|
|
21
|
-
<
|
|
20
|
+
// szablon (imports: [KptInput, FormField, FormRoot, KptButton])
|
|
21
|
+
<form [formRoot]="loginForm" (submit)="onSubmit()">
|
|
22
|
+
<kpt-input [formField]="loginForm.email" type="email" id="f-email" />
|
|
23
|
+
<kpt-button type="submit" [disabled]="loginForm().invalid()">Zaloguj</kpt-button>
|
|
24
|
+
</form>
|
|
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.
|
|
22
29
|
|
|
23
30
|
## Wejścia prezentacyjne
|
|
24
31
|
- `type`: 'text'|'email'|'password'|'number'|'search'|'tel'|'url' (domyślnie 'text')
|
|
@@ -34,5 +41,8 @@ Bez `ControlValueAccessor`. Import: `import { KptInput } from '@konce-pt/angular
|
|
|
34
41
|
`--kpt-form-field-{bg,text,placeholder,border,border-hover,border-focus,border-error,radius}`.
|
|
35
42
|
|
|
36
43
|
## Dostępność
|
|
37
|
-
- `aria-invalid="true"`
|
|
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.
|
|
38
48
|
- Komunikaty błędów wyświetla zwykle `kpt-form-field` (`role="alert"`).
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
# KptInputNumber (kpt-input-number)
|
|
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".
|
|
5
|
+
Import: `import { KptInputNumber } from '@konce-pt/angular';`
|
|
6
|
+
|
|
7
|
+
## Wejścia / model
|
|
8
|
+
- `value`: model<number | null> (lub `formField`)
|
|
9
|
+
- `min`/`max`: number | undefined; `step`: number (domyślnie 1)
|
|
10
|
+
- `suffix`: string (np. ' %'); `placeholder`: string
|
|
11
|
+
- `showButtons`: boolean (domyślnie `true`) — `false` chowa strzałki `−`/`+`; treść pola
|
|
12
|
+
wyrównuje się wtedy do lewej, jak w `kpt-input` (modyfikator `.kpt-input-number--plain`)
|
|
13
|
+
- `disabled`/`invalid`/`touched`: boolean; `touch`: output
|
|
14
|
+
|
|
15
|
+
## Przykład
|
|
16
|
+
<kpt-input-number [formField]="f.qty" [min]="0" [max]="99" [step]="1" />
|
|
17
|
+
<kpt-input-number [(value)]="qty" suffix=" szt." />
|
|
18
|
+
<kpt-input-number [formField]="f.priceFrom" [showButtons]="false" suffix=" zł" />
|
|
19
|
+
|
|
20
|
+
## Zakres „od–do" (walidacja między polami)
|
|
21
|
+
|
|
22
|
+
Dwa osobne pola formularza; regułę „do ≥ od" wpina się przez `validateTree` na korzeniu.
|
|
23
|
+
Błąd celuje się w konkretne pole właściwością `fieldTree` — inaczej wylądowałby na formularzu
|
|
24
|
+
i nie pokazałby się pod żadną kontrolką.
|
|
25
|
+
|
|
26
|
+
import { form, min, validateTree } from '@angular/forms/signals';
|
|
27
|
+
|
|
28
|
+
model = signal({ priceFrom: null as number | null, priceTo: null as number | null });
|
|
29
|
+
|
|
30
|
+
rangeForm = form(this.model, (path) => {
|
|
31
|
+
min(path.priceFrom, 0, { message: 'Wartość nie może być ujemna' });
|
|
32
|
+
min(path.priceTo, 0, { message: 'Wartość nie może być ujemna' });
|
|
33
|
+
|
|
34
|
+
validateTree(path, (ctx) => {
|
|
35
|
+
const from = ctx.valueOf(path.priceFrom);
|
|
36
|
+
const to = ctx.valueOf(path.priceTo);
|
|
37
|
+
if (from === null || to === null || from <= to) return null;
|
|
38
|
+
return {
|
|
39
|
+
kind: 'range',
|
|
40
|
+
message: 'Wartość „do" nie może być mniejsza niż „od"',
|
|
41
|
+
fieldTree: ctx.fieldTreeOf(path.priceTo), // błąd ląduje na polu „do"
|
|
42
|
+
};
|
|
43
|
+
});
|
|
44
|
+
});
|
|
45
|
+
|
|
46
|
+
// szablon — dwie kolumny od md (klasy utility z @konce-pt/grid)
|
|
47
|
+
<form class="kpt-grid" [formRoot]="rangeForm" (submit)="onSubmit()">
|
|
48
|
+
<kpt-form-field class="kpt-col-12 kpt-col-md-6" label="Cena od" [error]="fromError()">
|
|
49
|
+
<kpt-input-number [formField]="rangeForm.priceFrom" [min]="0" [showButtons]="false" suffix=" zł" />
|
|
50
|
+
</kpt-form-field>
|
|
51
|
+
<kpt-form-field class="kpt-col-12 kpt-col-md-6" label="Cena do" [error]="toError()">
|
|
52
|
+
<kpt-input-number [formField]="rangeForm.priceTo" [min]="0" [showButtons]="false" suffix=" zł" />
|
|
53
|
+
</kpt-form-field>
|
|
54
|
+
</form>
|
|
55
|
+
|
|
56
|
+
`ctx.valueOf(path.x)` czyta wartość innego pola, `ctx.fieldTreeOf(path.x)` wskazuje pole
|
|
57
|
+
docelowe błędu. Komunikaty podaje się przez `errorFor()` z bramką `touched()` — walidatorów
|
|
58
|
+
nie warunkuj. Pełny przepływ submit: `## Formularz od zera (Signal Forms)` w głównym llms.txt.
|
|
59
|
+
|
|
60
|
+
## Tokeny
|
|
61
|
+
Pole `--kpt-form-field-*`; przyciski `--kpt-color-muted`.
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
# KptTooltip (kptTooltip)
|
|
2
|
+
|
|
3
|
+
Dyrektywa dymka podpowiedzi pokazywanego na hover/focus. Lekka — element dodawany do
|
|
4
|
+
`body`, pozycjonowany względem hosta (działa w trybie zoneless).
|
|
5
|
+
Import: `import { KptTooltip } from '@konce-pt/angular';`
|
|
6
|
+
|
|
7
|
+
## Selektor (atrybut)
|
|
8
|
+
`[kptTooltip]`
|
|
9
|
+
|
|
10
|
+
## Wejścia
|
|
11
|
+
- `kptTooltip`: string (treść, wymagane) — pusta treść wyłącza dymek
|
|
12
|
+
- `kptTooltipPosition`: 'top'|'bottom'|'left'|'right' (domyślnie 'top')
|
|
13
|
+
- `kptTooltipOnlyWhenTruncated`: boolean (domyślnie false) — pokazuje dymek tylko wtedy,
|
|
14
|
+
gdy treść nie mieści się w elemencie (jest ucięta wielokropkiem)
|
|
15
|
+
|
|
16
|
+
## Dymek tylko dla przyciętego tekstu
|
|
17
|
+
Przy `kptTooltipOnlyWhenTruncated` podpowiedź nie powtarza tekstu, który i tak widać.
|
|
18
|
+
Przepełnienie sprawdzane jest na hoście **oraz jego bezpośrednich dzieciach** — `text-overflow:
|
|
19
|
+
ellipsis` siedzi zwykle na wewnętrznym elemencie, a taki element kurczy się do dostępnej szerokości
|
|
20
|
+
i nie rozpycha rodzica, więc pomiar samego hosta niczego by nie wykrył. Gdy tekst jest głębiej niż
|
|
21
|
+
jeden poziom, dyrektywę trzeba osadzić na jego bezpośrednim rodzicu.
|
|
22
|
+
|
|
23
|
+
Sprawdzenie następuje w chwili najechania (lub focusu), nie przy renderze — wynik jest więc zawsze
|
|
24
|
+
aktualny po zmianie szerokości, powiększenia czy układu, bez `ResizeObserver`.
|
|
25
|
+
|
|
26
|
+
<span class="ellipsis" [kptTooltip]="name" kptTooltipOnlyWhenTruncated>{{ name }}</span>
|
|
27
|
+
|
|
28
|
+
## Przykład
|
|
29
|
+
<kpt-button kptTooltip="Zapisz zmiany" kptTooltipPosition="bottom">Zapisz</kpt-button>
|
|
30
|
+
<span kptTooltip="Więcej informacji">?</span>
|
|
31
|
+
|
|
32
|
+
## Tokeny
|
|
33
|
+
Tło `--kpt-color-on-surface`, tekst `--kpt-color-surface` (kontrast w obu motywach), `--kpt-elevation-2`.
|
|
@@ -354,3 +354,4 @@ declare function seriesColor(explicit: string | undefined, index: number, palett
|
|
|
354
354
|
|
|
355
355
|
export { KPT_CHART_PALETTE, KptChart, areaPath, barLayout, linePath, niceScale, pieSlices, polarSlices, radarGrid, radarPoints, seriesColor };
|
|
356
356
|
export type { KptAlign, KptAnimationOptions, KptBarOrientation, KptChartConfig, KptChartSeries, KptChartType, KptFont, KptLegendOptions, KptLegendPosition, KptLegendTitle, KptLineInterpolation, KptPadding, KptPointStyle, KptTitleOptions, KptTooltipContext, KptTooltipOptions };
|
|
357
|
+
//# sourceMappingURL=konce-pt-angular-charts.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"konce-pt-angular-charts.d.ts","sources":["../../charts/src/core/types.ts","../../charts/src/lib/chart-legend.component.ts","../../charts/src/lib/chart-tooltip.component.ts","../../charts/src/lib/chart.component.ts","../../charts/src/core/scale.ts","../../charts/src/core/line.ts","../../charts/src/core/bar.ts","../../charts/src/core/arc.ts","../../charts/src/core/radar.ts","../../charts/src/core/color.ts"],"mappings":"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","names":[]}
|
|
@@ -134,3 +134,4 @@ declare const KPT_GRID_IMPORTS: readonly [typeof KptGrid, typeof KptCol, typeof
|
|
|
134
134
|
|
|
135
135
|
export { KPT_GRID_IMPORTS, KptCol, KptFlex, KptGrid };
|
|
136
136
|
export type { KptAlignment, KptColSpan, KptFlexDirection, KptFlexWrap };
|
|
137
|
+
//# sourceMappingURL=konce-pt-angular-grid.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"konce-pt-angular-grid.d.ts","sources":["../../grid/src/lib/grid.directive.ts","../../grid/src/lib/col.directive.ts","../../grid/src/lib/flex.directive.ts","../../grid/src/public-api.ts"],"mappings":";;AAEA;;;;;;;;;;;;;;;AAeG;AACH,cAgBa,OAAO;;sBAEF,aAAA,CAAA,WAAA;;wBAEE,aAAA,CAAA,WAAA;;wBAEA,aAAA,CAAA,WAAA;;wBAEA,aAAA,CAAA,WAAA;;wBAEA,aAAA,CAAA,WAAA;;yBAEC,aAAA,CAAA,WAAA;;kBAGP,aAAA,CAAA,WAAA;;mBAEC,aAAA,CAAA,WAAA;;mBAEA,aAAA,CAAA,WAAA;AAEb;;;;AAIG;wBACe,aAAA,CAAA,wBAAA;oDA1BP,OAAO;sDAAP,OAAO;AA2BnB;;AC3DD;KACY,UAAU;AAEtB;;;;;;;;;;;;;AAaG;AACH,cAca,MAAM;;mBAEJ,aAAA,CAAA,WAAA,CAAA,UAAA;;qBAEE,aAAA,CAAA,WAAA,CAAA,UAAA;;qBAEA,aAAA,CAAA,WAAA,CAAA,UAAA;;qBAEA,aAAA,CAAA,WAAA,CAAA,UAAA;;qBAEA,aAAA,CAAA,WAAA,CAAA,UAAA;;sBAEC,aAAA,CAAA,WAAA,CAAA,UAAA;;oBAGF,aAAA,CAAA,WAAA;;oBAEA,aAAA,CAAA,WAAA;;mBAED,aAAA,CAAA,WAAA;oDAnBF,MAAM;sDAAN,MAAM;AAoBlB;;ACnDK,KAAM,gBAAgB;AACtB,KAAM,WAAW;KACX,YAAY;AAExB;;;;;;;;;;;;AAYG;AACH,cAkBa,OAAO;;wBAEA,aAAA,CAAA,WAAA,CAAA,gBAAA;;0BAEE,aAAA,CAAA,WAAA,CAAA,gBAAA;;0BAEA,aAAA,CAAA,WAAA,CAAA,gBAAA;;mBAEP,aAAA,CAAA,WAAA,CAAA,WAAA;;sBAGG,aAAA,CAAA,WAAA,CAAA,YAAA;;wBAEE,aAAA,CAAA,WAAA,CAAA,YAAA;;oBAEJ,aAAA,CAAA,WAAA,CAAA,YAAA;;sBAEE,aAAA,CAAA,WAAA,CAAA,YAAA;;kBAGJ,aAAA,CAAA,WAAA;;mBAEC,aAAA,CAAA,WAAA;;mBAEA,aAAA,CAAA,WAAA;;wBAGK,aAAA,CAAA,wBAAA;oDA3BP,OAAO;sDAAP,OAAO;AA4BnB;;AClDD;AACA,cAAa,gBAAgB,mBAAA,OAAA,SAAA,MAAA,SAAA,OAAA;;;;","names":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"konce-pt-angular-icons.d.ts","sources":["../../icons/src/tabler-icons.ts","../../icons/src/provider.ts"],"mappings":";;AAEA,cAAa,gBAAgB,EAAE,MAAM;AA6gKrC,cAAa,qBAAqB;;AC3gKlC;;;;;;;;;AASG;AACH,iBAAgB,qBAAqB,IAAI,oBAAoB;;;;","names":[]}
|