@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.
- package/CHANGELOG.md +44 -0
- package/charts/src/lib/llms.txt +30 -30
- package/fesm2022/konce-pt-angular.mjs +1403 -368
- package/fesm2022/konce-pt-angular.mjs.map +1 -1
- package/grid/src/lib/llms.txt +48 -48
- package/map/src/lib/llms.txt +446 -446
- package/package.json +1 -1
- package/roadmap/src/lib/llms.txt +74 -74
- package/src/lib/accordion/llms.txt +9 -9
- package/src/lib/alert/llms.txt +10 -10
- package/src/lib/app-shell/llms.txt +59 -59
- package/src/lib/auth/llms.txt +104 -0
- package/src/lib/autocomplete/llms.txt +8 -8
- package/src/lib/avatar/llms.txt +9 -9
- package/src/lib/avatar-group/llms.txt +8 -8
- package/src/lib/badge/llms.txt +9 -9
- package/src/lib/bottom-sheet/llms.txt +14 -14
- package/src/lib/breadcrumb/llms.txt +7 -7
- package/src/lib/breakpoint/llms.txt +21 -21
- package/src/lib/button/llms.txt +34 -34
- package/src/lib/button-group/llms.txt +5 -5
- package/src/lib/card/llms.txt +27 -27
- package/src/lib/carousel/llms.txt +11 -11
- package/src/lib/checkbox/llms.txt +7 -7
- package/src/lib/chip/llms.txt +6 -6
- package/src/lib/chips-input/llms.txt +9 -9
- package/src/lib/color-picker/llms.txt +7 -7
- package/src/lib/confirm/llms.txt +11 -11
- package/src/lib/context-menu/llms.txt +10 -10
- package/src/lib/data-table/llms.txt +170 -170
- package/src/lib/data-view/llms.txt +8 -8
- package/src/lib/date-range/llms.txt +25 -25
- package/src/lib/datepicker/llms.txt +48 -48
- package/src/lib/dialog/llms.txt +62 -62
- package/src/lib/divider/llms.txt +9 -9
- package/src/lib/drawer/llms.txt +18 -18
- package/src/lib/empty/llms.txt +9 -9
- package/src/lib/fab/llms.txt +12 -12
- package/src/lib/fieldset/llms.txt +9 -9
- package/src/lib/file-upload/llms.txt +10 -10
- package/src/lib/form-field/llms.txt +45 -45
- package/src/lib/galleria/llms.txt +7 -7
- package/src/lib/i18n/llms.txt +21 -21
- package/src/lib/icon/llms.txt +20 -20
- package/src/lib/icon-button/llms.txt +8 -8
- package/src/lib/image/llms.txt +9 -9
- package/src/lib/input/llms.txt +27 -25
- package/src/lib/input-mask/llms.txt +10 -10
- package/src/lib/input-number/llms.txt +34 -34
- package/src/lib/input-otp/llms.txt +11 -11
- package/src/lib/knob/llms.txt +14 -14
- package/src/lib/listbox/llms.txt +8 -8
- package/src/lib/megamenu/llms.txt +13 -13
- package/src/lib/menu/llms.txt +26 -26
- package/src/lib/menubar/llms.txt +10 -10
- package/src/lib/meter-group/llms.txt +8 -8
- package/src/lib/order-list/llms.txt +8 -8
- package/src/lib/paginator/llms.txt +12 -12
- package/src/lib/panel/llms.txt +12 -12
- package/src/lib/password/llms.txt +12 -9
- package/src/lib/pick-list/llms.txt +8 -8
- package/src/lib/popover/llms.txt +8 -8
- package/src/lib/progress/llms.txt +6 -6
- package/src/lib/radio-group/llms.txt +5 -5
- package/src/lib/rating/llms.txt +6 -6
- package/src/lib/rich-text/llms.txt +51 -32
- package/src/lib/scroll-top/llms.txt +7 -7
- package/src/lib/select/llms.txt +26 -26
- package/src/lib/sidenav/llms.txt +24 -24
- package/src/lib/skeleton/llms.txt +6 -6
- package/src/lib/slider/llms.txt +17 -17
- package/src/lib/speed-dial/llms.txt +7 -7
- package/src/lib/spinner/llms.txt +5 -5
- package/src/lib/split-button/llms.txt +15 -15
- package/src/lib/splitter/llms.txt +11 -11
- package/src/lib/stepper/llms.txt +10 -10
- package/src/lib/switch/llms.txt +10 -10
- package/src/lib/switch-group/llms.txt +16 -16
- package/src/lib/tabs/llms.txt +10 -10
- package/src/lib/textarea/llms.txt +5 -5
- package/src/lib/timeline/llms.txt +10 -10
- package/src/lib/toast/llms.txt +10 -10
- package/src/lib/toolbar/llms.txt +31 -31
- package/src/lib/tooltip/llms.txt +21 -21
- package/src/lib/tree/llms.txt +6 -6
- package/types/konce-pt-angular.d.ts +316 -7
- package/types/konce-pt-angular.d.ts.map +1 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@konce-pt/angular",
|
|
3
|
-
"version": "0.7.
|
|
3
|
+
"version": "0.7.12",
|
|
4
4
|
"description": "Open-source Angular 22 component library on Signals & Signal Forms — 70+ components, rich data table, zoneless, fully tokenized. Selektory kpt-*, klasy Kpt*.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "konce.pt",
|
package/roadmap/src/lib/llms.txt
CHANGED
|
@@ -1,112 +1,112 @@
|
|
|
1
1
|
# KptRoadmap (kpt-roadmap)
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
3
|
+
A roadmap — rows of tasks on a horizontal timeline (a Gantt-style view). The label column and the axis header
|
|
4
|
+
stay stuck while scrolling, the bars are positioned as percentages, and dependencies are drawn by an SVG layer.
|
|
5
5
|
Import: `import { KptRoadmap } from '@konce-pt/angular/roadmap';`
|
|
6
6
|
|
|
7
|
-
##
|
|
8
|
-
`kpt-roadmap` — standalone, OnPush, zoneless.
|
|
7
|
+
## Selector
|
|
8
|
+
`kpt-roadmap` — standalone, OnPush, zoneless. The generic `KptRoadmap<TItem, TGroup>` types the `meta` field.
|
|
9
9
|
|
|
10
|
-
##
|
|
11
|
-
- `config`: KptRoadmapConfig (
|
|
12
|
-
- `scrollHeight`: string | null —
|
|
13
|
-
- `labelWidth`: string —
|
|
14
|
-
- `cellWidthPx`: number | null —
|
|
15
|
-
- `showToday`: boolean —
|
|
16
|
-
- `virtual`: boolean —
|
|
10
|
+
## Inputs
|
|
11
|
+
- `config`: KptRoadmapConfig (required) — the data and every option
|
|
12
|
+
- `scrollHeight`: string | null — a fixed height, e.g. '420px'; enables the sticky header
|
|
13
|
+
- `labelWidth`: string — the width of the label column (default '14rem')
|
|
14
|
+
- `cellWidthPx`: number | null — the width of an axis column; without it the value depends on the zoom
|
|
15
|
+
- `showToday`: boolean — the "today" marker (default true)
|
|
16
|
+
- `virtual`: boolean — renders only the visible rows; worth it from roughly 100 rows up
|
|
17
17
|
|
|
18
|
-
## Model /
|
|
19
|
-
- `collapsedGroups`: model<string[]> —
|
|
18
|
+
## Model / events
|
|
19
|
+
- `collapsedGroups`: model<string[]> — the two-way ids of collapsed groups
|
|
20
20
|
- `itemClick`: output<KptRoadmapItem>
|
|
21
|
-
- `rangeChange`: output<KptTimeRange> —
|
|
21
|
+
- `rangeChange`: output<KptTimeRange> — the computed axis range
|
|
22
22
|
|
|
23
23
|
## KptRoadmapConfig
|
|
24
|
-
- `items`: KptRoadmapItem[] (
|
|
24
|
+
- `items`: KptRoadmapItem[] (required)
|
|
25
25
|
- `groups?`: KptRoadmapGroup[]
|
|
26
|
-
- `links?`: KptRoadmapLink[] —
|
|
27
|
-
- `zoom?`: 'year' | 'quarter' | 'month' | 'week' | 'day' | 'hour' (
|
|
28
|
-
- `range?`: { start?: number; end?: number } —
|
|
26
|
+
- `links?`: KptRoadmapLink[] — dependencies given as a graph
|
|
27
|
+
- `zoom?`: 'year' | 'quarter' | 'month' | 'week' | 'day' | 'hour' (default 'week')
|
|
28
|
+
- `range?`: { start?: number; end?: number } — a missing end is computed from the data
|
|
29
29
|
- `locale?`: string; `today?`: Date | number | string
|
|
30
|
-
- `timeline?`, `rows?`, `dependencies?`, `interaction?` —
|
|
30
|
+
- `timeline?`, `rows?`, `dependencies?`, `interaction?` — the detailed options
|
|
31
31
|
|
|
32
32
|
### KptRoadmapItem
|
|
33
|
-
- `id`: string, `label`: string (
|
|
34
|
-
- `start`: Date | number | string; `end?`:
|
|
33
|
+
- `id`: string, `label`: string (required)
|
|
34
|
+
- `start`: Date | number | string; `end?`: the same — no `end` means a milestone
|
|
35
35
|
- `sublabel?`, `icon?`, `disabled?`
|
|
36
36
|
- `variant?`: 'neutral' | 'primary' | 'success' | 'danger' | 'warning' | 'info'
|
|
37
|
-
- `color?`: string —
|
|
38
|
-
- `progress?`: number 0..1 —
|
|
39
|
-
- `groupId?`: string; `dependsOn?`: (string | KptRoadmapLink)[] —
|
|
40
|
-
- `milestone?`: boolean —
|
|
37
|
+
- `color?`: string — any CSS color, overriding `variant`
|
|
38
|
+
- `progress?`: number 0..1 — the fill inside the bar
|
|
39
|
+
- `groupId?`: string; `dependsOn?`: (string | KptRoadmapLink)[] — a bare string means an 'FS' dependency
|
|
40
|
+
- `milestone?`: boolean — forces a diamond
|
|
41
41
|
- `meta?`: TItem
|
|
42
|
-
-
|
|
42
|
+
- The `draggable`, `resizable`, `locked` and `constraints` fields are reserved for editing and are ignored today.
|
|
43
43
|
|
|
44
44
|
### KptRoadmapGroup
|
|
45
|
-
- `id`, `label` (
|
|
46
|
-
- `summary?`: 'auto' | 'none' — 'auto'
|
|
45
|
+
- `id`, `label` (required); `sublabel?`, `parentId?`, `collapsed?`, `variant?`, `color?`
|
|
46
|
+
- `summary?`: 'auto' | 'none' — 'auto' draws a rolled-up bar from min(start) to max(end) of the children
|
|
47
47
|
|
|
48
48
|
### KptTimelineOptions (`config.timeline`)
|
|
49
|
-
- `weekendDays?`: number[] (
|
|
50
|
-
- `workHours?`: { from, to, mode?: 'skip' | 'dim', skipWeekends? } —
|
|
51
|
-
'skip'
|
|
52
|
-
- `positionMode?`: 'uniform' (
|
|
53
|
-
- `bandUnit?`:
|
|
49
|
+
- `weekendDays?`: number[] (default [0, 6]); `weekPrefix?`: string (from i18n by default)
|
|
50
|
+
- `workHours?`: { from, to, mode?: 'skip' | 'dim', skipWeekends? } — only with `zoom: 'hour'`;
|
|
51
|
+
'skip' cuts the nights out of the axis, 'dim' leaves the columns greyed out
|
|
52
|
+
- `positionMode?`: 'uniform' (default) | 'linear'
|
|
53
|
+
- `bandUnit?`: the unit of the header's top level; `maxCells?`: number (default 4000)
|
|
54
54
|
|
|
55
55
|
### KptRoadmapRowOptions (`config.rows`)
|
|
56
|
-
- `mode?`: 'row-per-item' (
|
|
56
|
+
- `mode?`: 'row-per-item' (default) | 'pack' — 'pack' lays non-overlapping tasks out in a single row
|
|
57
57
|
- `itemHeight?`, `groupHeight?`, `laneHeight?`, `packMinGapMs?`
|
|
58
58
|
- `showUngroupedHeader?`, `ungroupedLabel?`
|
|
59
59
|
|
|
60
|
-
##
|
|
60
|
+
## Example
|
|
61
61
|
|
|
62
62
|
<kpt-roadmap [config]="roadmap" scrollHeight="420px" />
|
|
63
63
|
|
|
64
64
|
roadmap: KptRoadmapConfig = {
|
|
65
65
|
zoom: 'week',
|
|
66
|
-
groups: [{ id: 'app', label: '
|
|
66
|
+
groups: [{ id: 'app', label: 'Application' }],
|
|
67
67
|
items: [
|
|
68
|
-
{ id: 'auth', label: '
|
|
68
|
+
{ id: 'auth', label: 'Sign-in', start: '2026-08-24', end: '2026-08-31',
|
|
69
69
|
groupId: 'app', variant: 'success', progress: 1 },
|
|
70
|
-
{ id: 'ship', label: '
|
|
70
|
+
{ id: 'ship', label: 'Release', start: '2026-09-14', groupId: 'app',
|
|
71
71
|
variant: 'warning', dependsOn: ['auth'] },
|
|
72
72
|
],
|
|
73
73
|
};
|
|
74
74
|
|
|
75
|
-
##
|
|
76
|
-
-
|
|
77
|
-
-
|
|
78
|
-
|
|
79
|
-
-
|
|
80
|
-
|
|
81
|
-
-
|
|
82
|
-
-
|
|
83
|
-
|
|
84
|
-
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
a
|
|
89
|
-
-
|
|
90
|
-
-
|
|
75
|
+
## Behavior
|
|
76
|
+
- The axis is computed in local time; week numbering follows ISO 8601 (week 1 contains the year's first Thursday).
|
|
77
|
+
- The 'uniform' mode gives columns of equal width despite DST changes and months of different lengths;
|
|
78
|
+
inside a column the position is interpolated linearly, so a task can start in the middle of a day.
|
|
79
|
+
- A year change: a stronger vertical line and a black marker with the year on that year's first band.
|
|
80
|
+
At week zoom the boundary is computed by the ISO week year, so W53 does not fall into the next year.
|
|
81
|
+
- An item extending past the axis range is cut off on the side where it is clipped.
|
|
82
|
+
- Tooltips use the `kptTooltip` directive (not the native `title`): the bubble appears immediately, is
|
|
83
|
+
styled with tokens and works with keyboard focus too.
|
|
84
|
+
- The rule: a tooltip shows what cannot be seen. Bars, row labels and header bands carry it
|
|
85
|
+
with `kptTooltipOnlyWhenTruncated`, so a tooltip only pops up for text cut off with
|
|
86
|
+
an ellipsis — checked on hover, so it reacts to changes in width and zoom.
|
|
87
|
+
Milestones and header cells carry a tooltip unconditionally: a diamond shows no text at all,
|
|
88
|
+
and a cell fills in the year that "W35 / 24.08–30.08" does not show.
|
|
89
|
+
- Dependencies: 'FS' (the default), 'SS', 'FF', 'SF'; violated ones are drawn as a dashed line in the danger color.
|
|
90
|
+
- Entries with an invalid date or a duplicate `id` are skipped, with a warning in development mode.
|
|
91
91
|
|
|
92
92
|
## i18n
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
##
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
`--kpt-color-on-muted`.
|
|
105
|
-
`--kpt-color-on-surface-muted` — `--kpt-color-muted`
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
##
|
|
111
|
-
|
|
112
|
-
|
|
93
|
+
The `roadmap.*` keys: `empty`, `week`, `today`, `milestone`, `expandGroup`, `collapseGroup`.
|
|
94
|
+
Month and weekday names come from `Intl` per `config.locale` or the locale from `KptI18n`,
|
|
95
|
+
so they follow each language's orthography (lowercase in Polish, capitalized in English).
|
|
96
|
+
In the header the first character is capitalized through `::first-letter`, so that the axis looks the same
|
|
97
|
+
regardless of language; the text itself is untouched, so tooltips and screen reader output
|
|
98
|
+
get the original form.
|
|
99
|
+
|
|
100
|
+
## Tokens
|
|
101
|
+
Surfaces `--kpt-color-surface{,-variant,-sunken,-hover}`, outlines `--kpt-color-border{,-strong}`,
|
|
102
|
+
bars per variant `--kpt-color-{primary,success,danger,warning,info,muted}`.
|
|
103
|
+
A bar's label is white, but the `neutral` variant has a light background, so its text uses
|
|
104
|
+
`--kpt-color-on-muted`. A group's rolled-up bar in the `neutral` variant is drawn in
|
|
105
|
+
`--kpt-color-on-surface-muted` — `--kpt-color-muted` would be indistinguishable from the row background.
|
|
106
|
+
Further:
|
|
107
|
+
the year marker is inverted, `--kpt-color-on-surface` / `--kpt-color-surface`.
|
|
108
|
+
Sizes: `--kpt-roadmap-label-w`, `--kpt-roadmap-cell-w` (both can be overridden from outside).
|
|
109
|
+
|
|
110
|
+
## To do (roadmap)
|
|
111
|
+
Dragging and resizing bars, drawing dependencies with the mouse, adding rows —
|
|
112
|
+
the types (`KptRoadmapChange`, `constraints`, `interaction`) are already part of the API.
|
|
@@ -1,20 +1,20 @@
|
|
|
1
1
|
# KptAccordion (kpt-accordion) + KptAccordionPanel (kpt-accordion-panel)
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
An accordion — a group of expandable panels.
|
|
4
4
|
Import: `import { KptAccordion, KptAccordionPanel } from '@konce-pt/angular';`
|
|
5
5
|
|
|
6
6
|
## KptAccordion
|
|
7
|
-
- `multi`: boolean —
|
|
8
|
-
- `animated`: boolean (
|
|
9
|
-
- `animationDuration`: number (
|
|
7
|
+
- `multi`: boolean — allows several panels open at once (default: only one)
|
|
8
|
+
- `animated`: boolean (default true) — the panel expand animation (CSS grid, pure CSS)
|
|
9
|
+
- `animationDuration`: number (default 500) — animation time in ms (inherited by the panels)
|
|
10
10
|
|
|
11
11
|
## KptAccordionPanel
|
|
12
|
-
- `title`: string (
|
|
12
|
+
- `title`: string (required); `disabled`: boolean; `expanded`: model<boolean>
|
|
13
13
|
|
|
14
|
-
##
|
|
14
|
+
## Example
|
|
15
15
|
<kpt-accordion>
|
|
16
|
-
<kpt-accordion-panel title="
|
|
17
|
-
<kpt-accordion-panel title="
|
|
16
|
+
<kpt-accordion-panel title="Section 1" [expanded]="true">…</kpt-accordion-panel>
|
|
17
|
+
<kpt-accordion-panel title="Section 2">…</kpt-accordion-panel>
|
|
18
18
|
</kpt-accordion>
|
|
19
19
|
|
|
20
|
-
|
|
20
|
+
Single/multi coordination: a panel calls its parent through inject(KptAccordion).
|
package/src/lib/alert/llms.txt
CHANGED
|
@@ -1,19 +1,19 @@
|
|
|
1
1
|
# KptAlert (kpt-alert)
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
An inline message. Variants info/success/warning/danger, a title, dismissal.
|
|
4
4
|
Import: `import { KptAlert } from '@konce-pt/angular';`
|
|
5
5
|
|
|
6
|
-
##
|
|
6
|
+
## Selector
|
|
7
7
|
`kpt-alert`
|
|
8
8
|
|
|
9
|
-
##
|
|
10
|
-
- `variant`: 'info'|'success'|'warning'|'danger' (
|
|
11
|
-
- `title`: string; `dismissible`: boolean (
|
|
9
|
+
## Inputs / outputs
|
|
10
|
+
- `variant`: 'info'|'success'|'warning'|'danger' (default 'info')
|
|
11
|
+
- `title`: string; `dismissible`: boolean (a × button)
|
|
12
12
|
- `closed`: output<void>
|
|
13
13
|
|
|
14
|
-
##
|
|
15
|
-
<kpt-alert variant="success" title="
|
|
16
|
-
<kpt-alert variant="danger" dismissible (closed)="onClose()">
|
|
14
|
+
## Example
|
|
15
|
+
<kpt-alert variant="success" title="Saved">Your changes have been saved.</kpt-alert>
|
|
16
|
+
<kpt-alert variant="danger" dismissible (closed)="onClose()">Something went wrong.</kpt-alert>
|
|
17
17
|
|
|
18
|
-
##
|
|
19
|
-
|
|
18
|
+
## Tokens
|
|
19
|
+
The accent comes from `--kpt-color-{info,success,warning,danger}`; the background is a color-mix over `--kpt-color-surface`.
|
|
@@ -1,31 +1,31 @@
|
|
|
1
1
|
# KptAppShell (kpt-app-shell)
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
The application skeleton: a top bar, a side panel, the content. Responsive with no configuration.
|
|
4
4
|
Import: `import { KptAppShell, KptShellNavToggle } from '@konce-pt/angular';`
|
|
5
5
|
|
|
6
|
-
##
|
|
6
|
+
## Selector
|
|
7
7
|
`kpt-app-shell`
|
|
8
8
|
|
|
9
|
-
##
|
|
10
|
-
- `sidenavOpen`: model<boolean> (
|
|
11
|
-
(
|
|
12
|
-
- `sidenavCompactOpen`: model<boolean> (
|
|
13
|
-
- `sidenavMode`: `'auto' | 'side' | 'over'` (
|
|
14
|
-
- `sidenavBreakpoint`: `'sm'|'md'|'lg'|'xl'|'2xl'` (
|
|
15
|
-
|
|
16
|
-
- `sidenavRailBreakpoint`:
|
|
17
|
-
|
|
18
|
-
- `sidenavLabel`: string —
|
|
19
|
-
- `sidenavId`: readonly string —
|
|
20
|
-
- `isOverlay()`, `isSidenavOpen()`: Signal<boolean> —
|
|
21
|
-
- `toggleSidenav()`, `openSidenav()`, `closeSidenav()` —
|
|
9
|
+
## Inputs / outputs
|
|
10
|
+
- `sidenavOpen`: model<boolean> (default `true`) — the state of the DOCKED panel
|
|
11
|
+
(and of the forced `over` mode); two-way `[(sidenavOpen)]`
|
|
12
|
+
- `sidenavCompactOpen`: model<boolean> (default `false`) — the state of the OVERLAY in `auto` mode
|
|
13
|
+
- `sidenavMode`: `'auto' | 'side' | 'over'` (default **`'auto'`**)
|
|
14
|
+
- `sidenavBreakpoint`: `'sm'|'md'|'lg'|'xl'|'2xl'` (default `'lg'`) — from this threshold upward
|
|
15
|
+
`auto` docks the panel, below it turns it into an overlay
|
|
16
|
+
- `sidenavRailBreakpoint`: the same set or `null` (default `null`) — enables the icon rail
|
|
17
|
+
in the band from `sidenavBreakpoint` up to this threshold; the value must be HIGHER than `sidenavBreakpoint`
|
|
18
|
+
- `sidenavLabel`: string — the panel's a11y label; empty = `appShell.navigation` from the dictionary
|
|
19
|
+
- `sidenavId`: readonly string — the panel's identifier (`aria-controls`)
|
|
20
|
+
- `isOverlay()`, `isSidenavOpen()`: Signal<boolean> — the effective state for the current layout
|
|
21
|
+
- `toggleSidenav()`, `openSidenav()`, `closeSidenav()` — they hit the state that belongs to the layout
|
|
22
22
|
|
|
23
|
-
##
|
|
24
|
-
- `[kptShellToolbar]` →
|
|
25
|
-
- `[kptShellSidenav]` → panel
|
|
26
|
-
-
|
|
23
|
+
## Projection slots
|
|
24
|
+
- `[kptShellToolbar]` → the top bar
|
|
25
|
+
- `[kptShellSidenav]` → the side panel
|
|
26
|
+
- the default content → the main area
|
|
27
27
|
|
|
28
|
-
##
|
|
28
|
+
## Example
|
|
29
29
|
<kpt-app-shell [(sidenavOpen)]="navOpen">
|
|
30
30
|
<kpt-toolbar kptShellToolbar elevated>
|
|
31
31
|
<kpt-icon-button kptShellNavToggle variant="text" ariaLabel="Menu">
|
|
@@ -33,57 +33,57 @@ Import: `import { KptAppShell, KptShellNavToggle } from '@konce-pt/angular';`
|
|
|
33
33
|
</kpt-icon-button>
|
|
34
34
|
</kpt-toolbar>
|
|
35
35
|
<kpt-sidenav kptShellSidenav>
|
|
36
|
-
<a href="#"><kpt-icon name="list" /> <span kptNavLabel>
|
|
36
|
+
<a href="#"><kpt-icon name="list" /> <span kptNavLabel>Dashboard</span></a>
|
|
37
37
|
</kpt-sidenav>
|
|
38
38
|
<router-outlet />
|
|
39
39
|
</kpt-app-shell>
|
|
40
40
|
|
|
41
|
-
##
|
|
42
|
-
|
|
|
41
|
+
## The three bands of 'auto' mode
|
|
42
|
+
| width | layout | what closing does |
|
|
43
43
|
|---|---|---|
|
|
44
|
-
| `< sidenavBreakpoint` |
|
|
45
|
-
| `>= sidenavBreakpoint`, `< sidenavRailBreakpoint` |
|
|
46
|
-
| `>= sidenavRailBreakpoint` (
|
|
44
|
+
| `< sidenavBreakpoint` | overlay + scrim | the panel slides off the edge (state: `sidenavCompactOpen`) |
|
|
45
|
+
| `>= sidenavBreakpoint`, `< sidenavRailBreakpoint` | icon rail | the panel narrows to `--kpt-sidenav-rail-width` |
|
|
46
|
+
| `>= sidenavRailBreakpoint` (or no rail) | full panel | the panel hides entirely |
|
|
47
47
|
|
|
48
|
-
##
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
48
|
+
## Why TWO open states
|
|
49
|
+
"Open" means different things on either side of the threshold: on a desktop the panel stands open by default,
|
|
50
|
+
on a phone it has to be hidden by default. If both layouts shared one model, moving to a narrow
|
|
51
|
+
screen would have to overwrite the application's state, and coming back to a wide one would have nothing to restore.
|
|
52
|
+
Keeping them apart means the desktop intent survives narrowing and widening the window for free.
|
|
53
53
|
|
|
54
|
-
|
|
55
|
-
|
|
54
|
+
The `kptShellNavToggle` button hits the right state on its own — do not write `navOpen.set(...)` by hand,
|
|
55
|
+
because on a narrow screen you would be setting the wrong model.
|
|
56
56
|
|
|
57
|
-
##
|
|
58
|
-
- `[kptNavLabel]` —
|
|
59
|
-
|
|
60
|
-
- `[kptNavSection]` —
|
|
57
|
+
## The menu content convention (needed only for the rail)
|
|
58
|
+
- `[kptNavLabel]` — the entry's text; in the rail it is hidden with the "visually hidden" technique, so the entry
|
|
59
|
+
keeps an accessible name for a screen reader.
|
|
60
|
+
- `[kptNavSection]` — a group heading; hidden the same way.
|
|
61
61
|
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
`kptTooltip`,
|
|
62
|
+
These are plain attributes (like `kptShellToolbar` or `kptToolbarSpacer`), not directives — there is nothing
|
|
63
|
+
to import. Without them the rail shows clipped text instead of an icon. In the rail it is worth marking entries
|
|
64
|
+
with `kptTooltip`, since only the glyph is visible.
|
|
65
65
|
|
|
66
|
-
##
|
|
67
|
-
-
|
|
68
|
-
|
|
69
|
-
-
|
|
70
|
-
|
|
71
|
-
-
|
|
72
|
-
- `Escape`
|
|
73
|
-
-
|
|
74
|
-
-
|
|
75
|
-
- **
|
|
76
|
-
|
|
66
|
+
## Behavior
|
|
67
|
+
- The layout is decided by CSS alone (`@media`), so nothing flickers before hydration and the whole thing
|
|
68
|
+
works under SSR. JavaScript is only responsible for which state the button toggles.
|
|
69
|
+
- A closed panel drops out of the tab order through `visibility: hidden` (not `inert`) — it is correct
|
|
70
|
+
from the very first frame.
|
|
71
|
+
- An open overlay puts `inert` on the content (`<main>`), so Tab does not walk underneath the scrim.
|
|
72
|
+
- `Escape` closes the overlay; so does clicking the scrim.
|
|
73
|
+
- The slide direction follows `dir` (RTL slides in from the right).
|
|
74
|
+
- Height: `100dvh` with a `100vh` fallback.
|
|
75
|
+
- It does **not** close the menu after navigation — the shell does not know what counts as navigation
|
|
76
|
+
in a given application. Do it yourself: `if (shell.isOverlay()) shell.closeSidenav();`.
|
|
77
77
|
|
|
78
|
-
##
|
|
79
|
-
`sidenavMode="side"`
|
|
80
|
-
|
|
81
|
-
|
|
78
|
+
## Forced modes (backward compatibility)
|
|
79
|
+
`sidenavMode="side"` and `"over"` ignore the window width and read `sidenavOpen`, exactly as
|
|
80
|
+
before `auto` was introduced. Set `"side"` if the application manages responsiveness itself —
|
|
81
|
+
otherwise you end up with two layers of the same logic.
|
|
82
82
|
|
|
83
|
-
##
|
|
83
|
+
## Tokens
|
|
84
84
|
`--kpt-sidenav-width` (16rem), `--kpt-sidenav-rail-width` (4rem), `--kpt-z-overlay`,
|
|
85
85
|
`--kpt-color-overlay-scrim`, `--kpt-elevation-3`, `--kpt-motion-duration-base`.
|
|
86
86
|
|
|
87
|
-
##
|
|
88
|
-
|
|
89
|
-
|
|
87
|
+
## Deferred
|
|
88
|
+
A focus trap and returning focus to the button after closing (consistent with `kpt-drawer`, which does not
|
|
89
|
+
have them either — that is a separate task for the whole repo). The `<aside>` already carries `tabindex="-1"`.
|
|
@@ -0,0 +1,104 @@
|
|
|
1
|
+
# KptAuth (kpt-auth)
|
|
2
|
+
|
|
3
|
+
An authentication screen: sign in, sign up and password recovery in one component,
|
|
4
|
+
with a promo panel and a list of external providers (OAuth/SSO). Signal Forms.
|
|
5
|
+
The component is **presentational** — it does not call an API and does not navigate; the app does that in the handlers.
|
|
6
|
+
Import: `import { KptAuth, KptAuthProviderDef } from '@konce-pt/angular';`
|
|
7
|
+
|
|
8
|
+
## Selector
|
|
9
|
+
`kpt-auth`
|
|
10
|
+
|
|
11
|
+
## Inputs
|
|
12
|
+
- `mode`: model<'signIn' | 'signUp' | 'forgot'> = 'signIn' — two-way (the app can force a mode)
|
|
13
|
+
- `layout`: 'slider' | 'split' = 'slider' — the promo panel slides to the other side / stays put
|
|
14
|
+
- `providers`: KptAuthProvider[] = [] — `{ id, label, icon?, iconUrl?, description? }`
|
|
15
|
+
- `providerLayout`: 'list' | 'grid' = 'list' — a full-width list / a grid of icons with captions
|
|
16
|
+
- `showName`, `requireTerms`, `showRemember`: boolean = true — whether the fields are present
|
|
17
|
+
- `busy`: boolean — the buttons go into a loading state, the providers are blocked
|
|
18
|
+
- `error` / `notice`: string | null — a server message (a `danger` / `success` kpt-alert)
|
|
19
|
+
- `promoTitle` / `promoText`: string | null — `null` = mode-dependent text from i18n,
|
|
20
|
+
`''` = hide it (making room for the `[kptAuthPromo]` slot)
|
|
21
|
+
- `animated`: boolean = true; `animationDuration`: number = 320 (ms)
|
|
22
|
+
|
|
23
|
+
## Outputs
|
|
24
|
+
- `signIn`: { email, password, remember }
|
|
25
|
+
- `signUp`: { name, email, password, terms }
|
|
26
|
+
- `resetPassword`: { email }
|
|
27
|
+
- `providerSelect`: KptAuthProvider — the chosen provider (the whole object, not just the `id`)
|
|
28
|
+
- `modeChange` — from the `mode` model
|
|
29
|
+
|
|
30
|
+
## Content projection
|
|
31
|
+
- `[kptAuthBrand]` — a logo/name above the heading
|
|
32
|
+
- `[kptAuthPromo]` — the promo panel's content (below the title/text, above the CTA)
|
|
33
|
+
- `[kptAuthSso]` — an enterprise sign-in button **above** the provider separator
|
|
34
|
+
- `[kptAuthFields]` — extra fields inside the `<form>` (sign in and sign up)
|
|
35
|
+
- `[kptAuthFooter]` — the footer (terms, copyright)
|
|
36
|
+
- `ng-template[kptAuthProvider]="id"` (`KptAuthProviderDef`) — custom markup for a single provider;
|
|
37
|
+
context: `$implicit` = the provider, `select` = the function that reports the choice
|
|
38
|
+
|
|
39
|
+
**Fields from the `[kptAuthFields]` slot do not enter the component's model.** The consumer binds them to
|
|
40
|
+
their own form and reads them in the `signIn`/`signUp` handler — they are not part of the emitted value.
|
|
41
|
+
|
|
42
|
+
## Validation
|
|
43
|
+
Three independent forms (one per mode), with unconditional validators: e-mail required
|
|
44
|
+
and valid, password required (sign up: at least 8 characters), the password and its confirmation matching
|
|
45
|
+
(`validateTree`), consent required when `requireTerms`. Messages are composed from the error's `kind`
|
|
46
|
+
at render time, so **changing the language at runtime repaints them** (the validators are created once).
|
|
47
|
+
An error appears only once the field has been touched; `submit()` marks the whole tree as touched itself.
|
|
48
|
+
|
|
49
|
+
## Provider icons
|
|
50
|
+
The core carries no brand icons. Three ways around it:
|
|
51
|
+
1. `provideKptTablerIcons()` from `@konce-pt/angular/icons` → `icon: 'brand-google'`,
|
|
52
|
+
`'brand-facebook'`, `'brand-linkedin'`, `'brand-windows'`, `'brand-apple'`, `'brand-github'`, `'key'`.
|
|
53
|
+
2. `KptIconRegistry.register({ google: '<path …/>' })` — note: the sanitizer lets
|
|
54
|
+
`fill`/`stroke`/`opacity` through, but strips `defs`/gradients and `fill-rule`, and the `viewBox` is fixed
|
|
55
|
+
at `0 0 24 24`. A multi-color logo needs an explicit `fill` on every path.
|
|
56
|
+
3. `iconUrl` (a plain `<img alt="">`) or the `kptAuthProvider` template — for a logo with a gradient.
|
|
57
|
+
|
|
58
|
+
The icon is decorative (`kpt-icon` carries `aria-hidden`), so the button's accessible name always
|
|
59
|
+
comes from `label`.
|
|
60
|
+
|
|
61
|
+
## Accessibility
|
|
62
|
+
- Only the **active mode's form** lives in the DOM — there are no invisible but still
|
|
63
|
+
focusable elements.
|
|
64
|
+
- The panel heading carries `tabindex="-1"` and takes focus after a mode change (otherwise the change is not
|
|
65
|
+
announced, and focus stays on a button that has slid off screen).
|
|
66
|
+
- Labels through `kpt-form-field` + `controlId`; `autocomplete`: `email`, `current-password`,
|
|
67
|
+
`new-password`, `name`.
|
|
68
|
+
- The mode switches are `<button>` elements with text, not `<a href="#">`.
|
|
69
|
+
- `prefers-reduced-motion` disables the slide and the content's entrance.
|
|
70
|
+
|
|
71
|
+
## Styling
|
|
72
|
+
Public variables: `--kpt-auth-width` (64rem), `--kpt-auth-card-height` (34rem),
|
|
73
|
+
`--kpt-auth-min-height` (100dvh), `--kpt-auth-promo-bg` (your own brand gradient),
|
|
74
|
+
`--kpt-auth-padding`, `--kpt-auth-card-radius` / `--kpt-auth-card-border` / `--kpt-auth-card-shadow`.
|
|
75
|
+
The full-window variant (a borderless card, edge to edge):
|
|
76
|
+
|
|
77
|
+
kpt-auth {
|
|
78
|
+
--kpt-auth-padding: 0;
|
|
79
|
+
--kpt-auth-width: 100%;
|
|
80
|
+
--kpt-auth-card-height: 100dvh;
|
|
81
|
+
--kpt-auth-card-radius: 0;
|
|
82
|
+
--kpt-auth-card-border: 0;
|
|
83
|
+
--kpt-auth-card-shadow: none;
|
|
84
|
+
}
|
|
85
|
+
Below the `md` breakpoint the layout drops to a single column (promo above the form, no sliding).
|
|
86
|
+
|
|
87
|
+
## Example
|
|
88
|
+
<kpt-auth
|
|
89
|
+
[providers]="[{ id: 'google', label: 'Google', icon: 'brand-google' }]"
|
|
90
|
+
[busy]="loading()"
|
|
91
|
+
[error]="serverError()"
|
|
92
|
+
(signIn)="login($event)"
|
|
93
|
+
(signUp)="register($event)"
|
|
94
|
+
(resetPassword)="sendLink($event.email)"
|
|
95
|
+
(providerSelect)="oauth($event.id)"
|
|
96
|
+
>
|
|
97
|
+
<img kptAuthBrand src="/logo.svg" alt="Konce" />
|
|
98
|
+
<small kptAuthFooter>© 2026 Konce</small>
|
|
99
|
+
</kpt-auth>
|
|
100
|
+
|
|
101
|
+
## i18n
|
|
102
|
+
Every string comes from the `auth` namespace (EN/PL), including `auth.promo.*` and the
|
|
103
|
+
`auth.continueWith` ({provider}), `auth.passwordHint` / `auth.errorMinLength` ({min}) interpolations.
|
|
104
|
+
See `i18n/llms.txt`.
|
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
# KptAutocomplete (kpt-autocomplete)
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
3
|
+
A field with suggestions on CDK Overlay, Signal Forms. The value is the typed text.
|
|
4
|
+
Requires `import '@angular/cdk/overlay-prebuilt.css';`
|
|
5
5
|
Import: `import { KptAutocomplete } from '@konce-pt/angular';`
|
|
6
6
|
|
|
7
|
-
##
|
|
7
|
+
## Inputs
|
|
8
8
|
- `value`: model<string>; `options`: string[]; `placeholder`: string
|
|
9
9
|
- `disabled`/`invalid`/`touched`: boolean; `touch`: output
|
|
10
|
-
-
|
|
10
|
+
- Keyboard: ↑/↓ to navigate, Enter selects, Esc closes.
|
|
11
11
|
|
|
12
|
-
##
|
|
13
|
-
<kpt-autocomplete [formField]="f.city" [options]="cities" placeholder="
|
|
12
|
+
## Example
|
|
13
|
+
<kpt-autocomplete [formField]="f.city" [options]="cities" placeholder="City…" />
|
|
14
14
|
|
|
15
|
-
##
|
|
16
|
-
`--kpt-form-field-*`, panel `--kpt-color-surface-raised`.
|
|
15
|
+
## Tokens
|
|
16
|
+
`--kpt-form-field-*`, the panel `--kpt-color-surface-raised`.
|
package/src/lib/avatar/llms.txt
CHANGED
|
@@ -1,20 +1,20 @@
|
|
|
1
1
|
# KptAvatar (kpt-avatar)
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
An avatar — an image, initials (from `name`) or an icon. Import: `import { KptAvatar } from '@konce-pt/angular';`
|
|
4
4
|
|
|
5
|
-
##
|
|
6
|
-
- `src`: string|null (
|
|
5
|
+
## Inputs
|
|
6
|
+
- `src`: string|null (an image); `name`: string (initials, up to 2 letters); `icon`: string|null
|
|
7
7
|
- `size`: 'sm'|'md'|'lg'|'xl'; `shape`: 'circle'|'square'
|
|
8
8
|
|
|
9
|
-
##
|
|
9
|
+
## Examples
|
|
10
10
|
<kpt-avatar src="/u/anna.jpg" />
|
|
11
11
|
<kpt-avatar name="Anna Kowalska" size="lg" />
|
|
12
12
|
<kpt-avatar icon="user" shape="square" />
|
|
13
13
|
|
|
14
|
-
##
|
|
15
|
-
`name`
|
|
16
|
-
|
|
17
|
-
|
|
14
|
+
## Accessibility
|
|
15
|
+
`name` goes into the native `title` (a tooltip with the full name — initials on their own say nothing).
|
|
16
|
+
Without `src`: `role="img"` + `aria-label="name"`, and the initials are `aria-hidden`. With `src` the label
|
|
17
|
+
is carried by the image's `alt` — it is not duplicated in `aria-label`.
|
|
18
18
|
|
|
19
|
-
##
|
|
19
|
+
## Tokens
|
|
20
20
|
`--kpt-color-muted`, `--kpt-color-on-muted`, `--kpt-radius-full`/`--kpt-radius-md`.
|