@konce-pt/angular 0.8.5 → 0.9.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 +153 -0
- package/fesm2022/konce-pt-angular-roadmap.mjs +2 -2
- package/fesm2022/konce-pt-angular.mjs +410 -213
- package/fesm2022/konce-pt-angular.mjs.map +1 -1
- package/package.json +11 -11
- package/src/lib/button/llms.txt +53 -9
- package/src/lib/button-group/llms.txt +17 -1
- package/src/lib/dialog/llms.txt +10 -0
- package/src/lib/progress/llms.txt +81 -5
- package/types/konce-pt-angular.d.ts +97 -21
- package/types/konce-pt-angular.d.ts.map +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,158 @@
|
|
|
1
1
|
# @konce-pt/angular
|
|
2
2
|
|
|
3
|
+
## 0.9.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- 45b2f99: `KptButton` dostaje ikony, wariant link, `<a>` i pełną paletę statusów.
|
|
8
|
+
|
|
9
|
+
Wsparcie ikon w przycisku do tej pory nie istniało — przykłady działały przypadkiem. `.kpt-button__content`
|
|
10
|
+
było zwykłym inline `<span>` bez `display:flex` i bez `gap`, więc odstęp ikona↔tekst brał się z literalnej
|
|
11
|
+
spacji w szablonie: wystarczyło sformatować szablon na dwie linie i odstęp znikał. Token
|
|
12
|
+
`--kpt-button-gap` był przy tym martwy, bo `gap` siedział na `.kpt-button`, który bez `loading` miał jedno
|
|
13
|
+
dziecko. Ikona siadała na linii bazowej zamiast na środku, a jej rozmiar szedł za `font-size` przycisku,
|
|
14
|
+
czyli 13 px przy `size="sm"` — zupełnie inna skala niż w `kpt-icon-button`.
|
|
15
|
+
|
|
16
|
+
Teraz są dwie drogi i jeden wynik. `icon` i `iconEnd` biorą nazwę z rejestru i renderuje je komponent;
|
|
17
|
+
to, co wstawisz do slotu, układa się tak samo. Jedno i drugie dostaje odstęp z tokena i rozmiar idący za
|
|
18
|
+
`size` (0.875rem przy `xs` do 1.5rem przy `xl`). `iconClass` / `iconEndClass` (w React `iconClassName` /
|
|
19
|
+
`iconEndClassName`) dokładają klasę obok stałego haka `.kpt-button__icon`.
|
|
20
|
+
|
|
21
|
+
`loading` podmienia ikonę wiodącą na spinner, zamiast stawać obok niej — wcześniej dostawało się spinner,
|
|
22
|
+
ikonę i tekst w jednym rzędzie. Spinner bierze przy tym rozmiar ikony, więc etykieta nie przeskakuje
|
|
23
|
+
w momencie wejścia w ładowanie; w przycisku bez ikony spinner urósł z 1em do skali ikony i to jedyna
|
|
24
|
+
widoczna zmiana w istniejących użyciach.
|
|
25
|
+
|
|
26
|
+
Doszło pięć wariantów: `elevated` (cień z `--kpt-shadow-sm`, na hover `md`), `link` (podkreślenie,
|
|
27
|
+
przezroczyste tło, zero paddingu bocznego — inaczej niż `text`, który ma tło na hover) oraz `success`,
|
|
28
|
+
`warning` i `info`. Tokeny semantyczne na te trzy statusy istniały w bibliotece od dawna, tylko przycisk
|
|
29
|
+
po nie nie sięgał. Przy okazji `danger` przestał liczyć kolory `color-mix` w SCSS i dostał własne tokeny
|
|
30
|
+
komponentowe, jak każdy inny wariant.
|
|
31
|
+
|
|
32
|
+
Skala rozmiarów rozszerza się o `xs` i `xl`; `md` zostaje bez zmiany.
|
|
33
|
+
|
|
34
|
+
`href` renderuje `<a class="kpt-button">` zamiast `<button>` — to domyka jedyną asymetrię portów w tym
|
|
35
|
+
komponencie, bo React miał `asChild`, a Angular nie miał nic i `<a>` ze stylem przycisku wymagał własnego
|
|
36
|
+
CSS-a (z podkreśleniem z resetu w gratisie). Wyłączony odnośnik traci `href`, a nie tylko dostaje atrybut,
|
|
37
|
+
więc nie da się go kliknąć ani wejść na niego Tabem; dostaje też `aria-disabled` i `tabindex="-1"`.
|
|
38
|
+
`target="_blank"` bez jawnego `rel` dostaje `rel="noopener noreferrer"`. W React `asChild` ma pierwszeństwo
|
|
39
|
+
przed `href`. Wygląd wyłączenia bierze się teraz z `:is(:disabled, [aria-disabled='true'])`, bo `<a>` nie
|
|
40
|
+
matchuje `:disabled`.
|
|
41
|
+
|
|
42
|
+
`KptButtonGroup` renderował wyłącznie `{{ opt.label }}`, choć segmentowany przełącznik — widok listy czy
|
|
43
|
+
siatki, wyrównanie tekstu — jest najbardziej „ikonowym" komponentem rodziny. `KptOption` dostaje
|
|
44
|
+
opcjonalne pole `icon`, a grupa je rysuje w tej samej skali co przycisk. Nowe wejście `iconOnly` chowa
|
|
45
|
+
etykiety i przenosi je do `aria-label` oraz `title`, a pozycje robią się kwadratami.
|
|
46
|
+
|
|
47
|
+
Rdzeń ikon rośnie o trzy codzienne akcje formularza i paska narzędzi: `device-floppy`, `arrow-back-up`
|
|
48
|
+
i `printer` (95 wbudowanych zamiast 92).
|
|
49
|
+
|
|
50
|
+
Jedna zmiana do odnotowania przy aktualizacji: `.kpt-button__content` jest teraz kontenerem flex.
|
|
51
|
+
Treść złożona wyłącznie z tekstu i ikon wygląda tak samo albo lepiej, ale etykieta mieszająca tekst
|
|
52
|
+
z własnym znacznikiem inline (`Tekst <span>x</span>`) dostanie między nimi odstęp z `--kpt-button-gap`.
|
|
53
|
+
|
|
54
|
+
- 120d1b0: `KptDialog` dostaje szerokość, a jego stopka przestaje ucinać przyciski.
|
|
55
|
+
|
|
56
|
+
Okno miało dotąd jedną szerokość — `min(32rem, calc(100vw - 2rem))` — wpisaną na sztywno w arkusz,
|
|
57
|
+
bez żadnego wejścia, które by ją zmieniło, w obu portach. 512 px wystarcza na pytanie „usunąć?"
|
|
58
|
+
i dwa przyciski, ale nie na treść, której nie da się sensownie zwęzić: kod, tabelę, porównanie
|
|
59
|
+
dwóch kolumn. Jedyną drogą było sięgnięcie z aplikacji do wnętrza komponentu selektorem, czyli
|
|
60
|
+
dokładnie to, czego zabrania kontrakt bloków.
|
|
61
|
+
|
|
62
|
+
Nowe wejście `size`: `sm` 24rem, `md` 32rem, `lg` 48rem. Domyślne `md` to **dzisiejsza wartość**,
|
|
63
|
+
więc żadne istniejące okno nie zmienia szerokości. Przycięcie do okna przeglądarki obowiązuje
|
|
64
|
+
w każdym rozmiarze, bo to ono, a nie stała, decyduje na telefonie. Szerokość idzie przez prywatne
|
|
65
|
+
`--_width`, zgodnie z kontraktem komponentu — warianty przestawiają jedną liczbę zamiast powtarzać
|
|
66
|
+
całe `min()`.
|
|
67
|
+
|
|
68
|
+
**Stopka zawija.** `[kptDialogFooter]` dostaje `flex-wrap: wrap` i to jest naprawa błędu, nie
|
|
69
|
+
kosmetyka. Przeglądarka daje `<dialog>` własny kontener przewijania (`overflow: auto` z jej
|
|
70
|
+
arkusza), więc przyciski, które nie mieszczą się w szerokości okna, **nie wystają — zostają
|
|
71
|
+
ucięte**. Cztery przyciski w oknie `sm` wystarczały, żeby pierwszy z nich stał się nieczytelny
|
|
72
|
+
i nie do klikniecia, bez żadnego sygnału, że coś jest nie tak. Teraz przechodzą do drugiego rzędu.
|
|
73
|
+
|
|
74
|
+
Typ `KptDialogSize` eksportowany z obu portów. Arkusz jest wspólny, więc `@konce-pt/styles/components`
|
|
75
|
+
niesie warianty dla Reacta bez osobnego kodu — stąd ta paczka na liście.
|
|
76
|
+
|
|
77
|
+
- 269238e: `KptProgress` pokazuje wartość, buforuje i porządnie się kręci.
|
|
78
|
+
|
|
79
|
+
Pasek postępu mówił dotąd wyłącznie geometrią. Użytkownik widział, że jest „gdzieś koło trzech
|
|
80
|
+
czwartych", ale nie wiedział, czy to 73% czy 78%, ani ile z ilu. Doszedł obszar etykiety: `showValue`
|
|
81
|
+
go otwiera, a `valueFormat` decyduje o treści — `percent` daje `80%`, `fraction` składa `152 / 160`
|
|
82
|
+
z `value` i `max`, `none` zostawia pusto. Oba napisy idą przez słownik (`progress.percent`,
|
|
83
|
+
`progress.fraction`), więc nowy język może im zmienić kształt. `label` dokłada tekst opisowy obok
|
|
84
|
+
paska, a `labelPosition` sadza wiersz nad paskiem, pod nim albo w tej samej linii.
|
|
85
|
+
|
|
86
|
+
Rzutowana treść (`ng-content` / `children`) zastępuje sformatowaną wartość zamiast się do niej
|
|
87
|
+
dokładać — tak w środku koła staje duża liczba nad podpisem, zamiast samego procentu.
|
|
88
|
+
|
|
89
|
+
Skala przestała być zaszyta: `min` i `max` opisują dowolny zakres, a wartości spoza niego są
|
|
90
|
+
przycinane, nie odrzucane. Domyślne 0–100 zachowują dotychczasowe zachowanie co do znaku.
|
|
91
|
+
|
|
92
|
+
`bufferValue` rysuje drugi, przygaszony pasek za głównym — pobrane, ale jeszcze nieodtworzone.
|
|
93
|
+
Bufor nigdy nie cofa się za pasek główny, bo wyglądałby wtedy jak błąd renderowania.
|
|
94
|
+
|
|
95
|
+
`size` (`sm`/`md`/`lg`) steruje grubością szyny i szerokością łuku; `md` to dotychczasowa grubość,
|
|
96
|
+
więc istniejące paski wyglądają tak samo.
|
|
97
|
+
|
|
98
|
+
Tryb nieokreślony dostał własne klatki animacji zamiast pożyczonych z `kpt-spinner` — pasek liniowy
|
|
99
|
+
rozciąga się i kurczy w przebiegu, łuk kołowy obraca się razem z pulsującą długością. Przy
|
|
100
|
+
`prefers-reduced-motion: reduce` animacja zwalnia, zamiast się zatrzymać: zamrożony wskaźnik postępu
|
|
101
|
+
czyta się jak zawieszona aplikacja. Zniknął też hack `width: 40% !important` — nieokreślony pasek po
|
|
102
|
+
prostu nie dostaje już szerokości z szablonu.
|
|
103
|
+
|
|
104
|
+
Dostępność: doszły `aria-valuemin` i `aria-valuemax`, przy `valueFormat="fraction"` także
|
|
105
|
+
`aria-valuetext` (czytnik mówi „152 / 160", a nie odczytuje surowej liczby jako procentu), widoczna
|
|
106
|
+
wartość ma `aria-hidden`, a nazwa dostępna bierze się z `label` albo ze słownika.
|
|
107
|
+
|
|
108
|
+
Nowe tokeny komponentowe: `--kpt-progress-track-bg`, `--kpt-progress-thickness-sm|md|lg`,
|
|
109
|
+
`--kpt-progress-buffer-opacity`, `--kpt-progress-label-fg`, `--kpt-progress-value-fg`,
|
|
110
|
+
`--kpt-progress-gap`.
|
|
111
|
+
|
|
112
|
+
Zmiana w DOM: `data-variant` przeniósł się z elementu wewnętrznego na hosta, gdzie dołączyły mu
|
|
113
|
+
`data-type`, `data-size` i `data-label-position`. Arkusz dostał to samo przepięcie, więc styl
|
|
114
|
+
biblioteczny działa bez zmian — ale aplikacja celująca własnym CSS-em w `.kpt-progress__linear[data-variant]`
|
|
115
|
+
musi przepiąć selektor na hosta.
|
|
116
|
+
|
|
117
|
+
### Patch Changes
|
|
118
|
+
|
|
119
|
+
- 457112a: Stonowane tła liczone z koloru akcentowego przestają wpadać w róż.
|
|
120
|
+
|
|
121
|
+
Siedem miejsc w bibliotece mieszało barwę akcentową z powierzchnią przez `color-mix(in oklch, …)`.
|
|
122
|
+
OKLCH interpoluje **odcień**, a barwa achromatyczna też ma odcień — biel to `oklch(1 0 0)`, czyli
|
|
123
|
+
kąt 0. Zmieszanie 10% błękitu (255°) z bielą szło więc po kole odcieni od 0 w stronę 255 i przy tak
|
|
124
|
+
małym udziale zatrzymywało się na 349,5° — różu. Tak samo zieleń (150°) wychodziła na 15°,
|
|
125
|
+
a bursztyn (60°) na 6°.
|
|
126
|
+
|
|
127
|
+
Skutek był widoczny gołym okiem i mylący: **wszystkie cztery warianty `kpt-alert` miały to samo
|
|
128
|
+
różowawe tło**, mimo że kreska i ikona zachowywały swoją barwę. Wariant przestawał cokolwiek
|
|
129
|
+
znaczyć. To samo dotyczyło tła wybranego chipa, strefy upuszczania pliku, zaznaczenia w roadmapie
|
|
130
|
+
i stanu hover przycisku ikonowego w wariancie niebezpiecznym.
|
|
131
|
+
|
|
132
|
+
Naprawa to zmiana przestrzeni na `oklab` — ta sama przestrzeń percepcyjna, ale we współrzędnych
|
|
133
|
+
prostokątnych, więc mieszanie nie przechodzi przez kąt i barwa achromatyczna niczego nie ciągnie.
|
|
134
|
+
Po zmianie tła niosą odcień swojego akcentu: info 255°, success 150°, warning 60°, danger 27°.
|
|
135
|
+
Idiom jest w repozytorium ustalony — `auth.component.scss` używał `in oklab` od początku, a te
|
|
136
|
+
siedem miejsc było odstępstwem.
|
|
137
|
+
|
|
138
|
+
Pozostałe 54 wystąpienia `color-mix(in oklch, …)` zostają bez zmian i **są poprawne**: mieszają
|
|
139
|
+
z `transparent`, a przy przezroczystym końcu CSS premnaża alfę, więc kanały barwy nie są
|
|
140
|
+
interpolowane i odcień przeżywa.
|
|
141
|
+
|
|
142
|
+
- Updated dependencies [45b2f99]
|
|
143
|
+
- Updated dependencies [f867af2]
|
|
144
|
+
- Updated dependencies [269238e]
|
|
145
|
+
- @konce-pt/icons@0.9.0
|
|
146
|
+
- @konce-pt/backdrop@0.9.0
|
|
147
|
+
- @konce-pt/i18n@0.9.0
|
|
148
|
+
- @konce-pt/chart@0.9.0
|
|
149
|
+
- @konce-pt/chat@0.9.0
|
|
150
|
+
- @konce-pt/datetime@0.9.0
|
|
151
|
+
- @konce-pt/map@0.9.0
|
|
152
|
+
- @konce-pt/mention@0.9.0
|
|
153
|
+
- @konce-pt/roadmap@0.9.0
|
|
154
|
+
- @konce-pt/table@0.9.0
|
|
155
|
+
|
|
3
156
|
## 0.8.5
|
|
4
157
|
|
|
5
158
|
### Minor Changes
|
|
@@ -629,7 +629,7 @@ class KptRoadmap {
|
|
|
629
629
|
i0.ɵɵconditional(ctx.showToday() && ctx.timeline().todayRatio !== null ? 10 : -1);
|
|
630
630
|
i0.ɵɵadvance();
|
|
631
631
|
i0.ɵɵconditional(ctx.isEmpty() ? 11 : 12);
|
|
632
|
-
} }, dependencies: [KptTooltip], styles: ["@layer kpt.components{.kpt-roadmap{display:block;--%NS%kpt-roadmap-cells: 1;--%NS%kpt-roadmap-cell-w: 76px;--%NS%kpt-roadmap-label-w: 14rem;--%NS%kpt-roadmap-track-w: calc(var(--%NS%kpt-roadmap-cell-w) * var(--%NS%kpt-roadmap-cells));color:var(--%NS%kpt-color-on-surface);font-family:var(--%NS%kpt-font-family-sans);background:var(--%NS%kpt-color-surface);border:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border);border-radius:var(--%NS%kpt-radius-lg, .75rem);overflow:hidden}.kpt-roadmap__scroll{overflow:auto;position:relative}.kpt-roadmap__head,.kpt-roadmap__row{display:grid;grid-template-columns:var(--%NS%kpt-roadmap-label-w) minmax(var(--%NS%kpt-roadmap-track-w),1fr);inline-size:max-content;min-inline-size:100%}.kpt-roadmap__head{position:sticky;inset-block-start:0;z-index:4;background:var(--%NS%kpt-color-surface-variant, var(--%NS%kpt-color-surface));border-block-end:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border)}.kpt-roadmap__head-label{position:sticky;inset-inline-start:0;z-index:5;background:var(--%NS%kpt-color-surface-variant, var(--%NS%kpt-color-surface));border-inline-end:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border)}.kpt-roadmap__head-track{position:relative;display:flex;flex-direction:column;min-inline-size:0}.kpt-roadmap__bands,.kpt-roadmap__cells,.kpt-roadmap__grid-cells{display:flex;inline-size:100%}.kpt-roadmap__band{position:relative;display:flex;align-items:center;justify-content:center;gap:var(--%NS%kpt-space-2, .5rem);min-inline-size:0;padding:var(--%NS%kpt-space-2, .5rem) var(--%NS%kpt-space-3, .75rem);font-size:var(--%NS%kpt-font-size-sm, .875rem);font-weight:var(--%NS%kpt-font-weight-medium, 500);color:var(--%NS%kpt-color-on-surface-muted);white-space:nowrap;overflow:hidden;border-inline-start:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border)}.kpt-roadmap__band:first-child{border-inline-start:0}.kpt-roadmap__band--year-start{border-inline-start:var(--%NS%kpt-border-width-medium, 2px) solid var(--%NS%kpt-color-border-strong)}.kpt-roadmap__band-label{overflow:hidden;text-overflow:ellipsis}.kpt-roadmap__band-sublabel{color:var(--%NS%kpt-color-text-subtle, var(--%NS%kpt-color-on-surface-muted))}.kpt-roadmap__year-badge{display:inline-flex;align-items:center;padding:.125rem var(--%NS%kpt-space-2, .5rem);font-size:var(--%NS%kpt-font-size-xs, .75rem);font-weight:var(--%NS%kpt-font-weight-semibold, 600);color:var(--%NS%kpt-color-surface);background:var(--%NS%kpt-color-on-surface);border-radius:var(--%NS%kpt-radius-full, 9999px)}.kpt-roadmap__cell{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.125rem;min-inline-size:0;padding:var(--%NS%kpt-space-2, .5rem) .25rem;text-align:center;white-space:nowrap;border-inline-start:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border)}.kpt-roadmap__cell:first-child{border-inline-start:0}.kpt-roadmap__cell-label{font-size:var(--%NS%kpt-font-size-xs, .75rem);font-weight:var(--%NS%kpt-font-weight-semibold, 600);letter-spacing:.02em;text-transform:uppercase;color:var(--%NS%kpt-color-on-surface-muted)}.kpt-roadmap__cell-sublabel{font-size:var(--%NS%kpt-font-size-xs, .75rem);color:var(--%NS%kpt-color-text-subtle, var(--%NS%kpt-color-on-surface-muted));overflow:hidden;text-overflow:ellipsis;inline-size:100%}.kpt-roadmap__cell--weekend{background:var(--%NS%kpt-color-surface-sunken, var(--%NS%kpt-color-muted))}.kpt-roadmap__cell--today .kpt-roadmap__cell-label{color:var(--%NS%kpt-color-primary)}.kpt-roadmap__cell--year-boundary,.kpt-roadmap__grid-cell--year-boundary{border-inline-start:var(--%NS%kpt-border-width-medium, 2px) solid var(--%NS%kpt-color-border-strong)}.kpt-roadmap__cell--gap-before,.kpt-roadmap__grid-cell--gap-before{border-inline-start:var(--%NS%kpt-border-width-thin, 1px) dashed var(--%NS%kpt-color-border-strong)}.kpt-roadmap__body{position:relative;inline-size:calc(var(--%NS%kpt-roadmap-label-w) + var(--%NS%kpt-roadmap-track-w));min-inline-size:100%}.kpt-roadmap__grid{position:absolute;inset-block:0;inset-inline-start:var(--%NS%kpt-roadmap-label-w);inset-inline-end:0;z-index:0;pointer-events:none}.kpt-roadmap__grid-cells{block-size:100%}.kpt-roadmap__grid-cell{min-inline-size:0;border-inline-start:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border)}.kpt-roadmap__grid-cell:first-child{border-inline-start:0}.kpt-roadmap__grid-cell--weekend,.kpt-roadmap__grid-cell--non-working{background:var(--%NS%kpt-color-surface-sunken, var(--%NS%kpt-color-muted))}.kpt-roadmap__today{position:absolute;inset-block:0;inline-size:0;border-inline-start:var(--%NS%kpt-border-width-medium, 2px) dashed color-mix(in oklch,var(--%NS%kpt-color-primary) 40%,transparent)}.kpt-roadmap__today-dot{position:absolute;inset-block-end:0rem;inline-size:.5rem;block-size:.5rem;transform:translate(-50%);background:color-mix(in oklch,var(--%NS%kpt-color-primary) 40%,transparent);border-radius:var(--%NS%kpt-radius-full, 9999px);pointer-events:none}.kpt-roadmap__links{position:absolute;inset-block-start:0;inset-inline-start:var(--%NS%kpt-roadmap-label-w);z-index:2;pointer-events:none;overflow:visible}.kpt-roadmap__link-path{fill:none;stroke:var(--%NS%kpt-color-on-surface-muted);stroke-width:1.75}.kpt-roadmap__link-arrow{fill:var(--%NS%kpt-color-on-surface-muted)}.kpt-roadmap__link--violated .kpt-roadmap__link-path{stroke:var(--%NS%kpt-color-danger);stroke-dasharray:4 3}.kpt-roadmap__link--violated .kpt-roadmap__link-arrow{fill:var(--%NS%kpt-color-danger)}.kpt-roadmap__row{position:absolute;inset-inline:0;border-block-end:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border)}.kpt-roadmap__row:hover{background:color-mix(in oklch,var(--%NS%kpt-color-primary) 10%,transparent)}.kpt-roadmap__row:hover .kpt-roadmap__label{background:color-mix(in oklch,var(--%NS%kpt-color-primary) 10%,var(--%NS%kpt-color-surface))}.kpt-roadmap__row--group,.kpt-roadmap__row--group .kpt-roadmap__label{background:var(--%NS%kpt-color-surface-variant, var(--%NS%kpt-color-surface))}.kpt-roadmap__row--%NS%group:hover,.kpt-roadmap__row--%NS%group:hover .kpt-roadmap__label{background:color-mix(in oklch,var(--%NS%kpt-color-primary) 10%,var(--%NS%kpt-color-surface-variant, var(--%NS%kpt-color-surface)))}.kpt-roadmap__label{position:sticky;inset-inline-start:0;z-index:3;display:flex;flex-direction:column;justify-content:center;gap:.125rem;min-inline-size:0;padding-inline-end:var(--%NS%kpt-space-3, .75rem);background:var(--%NS%kpt-color-surface);border-inline-end:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border)}.kpt-roadmap__label--group{justify-content:start;flex-direction:row;align-items:center;gap:var(--%NS%kpt-space-2, .5rem)}.kpt-roadmap__label-text{overflow:hidden;font-size:var(--%NS%kpt-font-size-sm, .875rem);font-weight:var(--%NS%kpt-font-weight-medium, 500);text-overflow:ellipsis;white-space:nowrap}.kpt-roadmap__label-text--group{font-weight:var(--%NS%kpt-font-weight-semibold, 600)}.kpt-roadmap__label-sub{overflow:hidden;font-size:var(--%NS%kpt-font-size-xs, .75rem);color:var(--%NS%kpt-color-on-surface-muted);text-overflow:ellipsis;white-space:nowrap}.kpt-roadmap__label-stack{display:flex;flex-direction:column;justify-content:center;gap:.125rem;min-inline-size:0}.kpt-roadmap__label-count{align-self:center;flex:0 0 auto;padding:0 var(--%NS%kpt-space-2, .5rem);font-size:var(--%NS%kpt-font-size-xs, .75rem);color:var(--%NS%kpt-color-on-surface-muted);background:var(--%NS%kpt-color-muted);border-radius:var(--%NS%kpt-radius-full, 9999px)}.kpt-roadmap__toggle{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;inline-size:1.25rem;block-size:1.25rem;padding:0;color:inherit;cursor:pointer;background:transparent;border:0;border-radius:var(--%NS%kpt-radius-sm, .25rem)}.kpt-roadmap__toggle:focus-visible{outline:var(--%NS%kpt-border-width-medium, 2px) solid var(--%NS%kpt-color-focus-ring);outline-offset:1px}.kpt-roadmap__toggle-icon{inline-size:0;block-size:0;border-block-start:.3rem solid transparent;border-block-end:.3rem solid transparent;border-inline-start:.4rem solid currentcolor;transition:transform var(--%NS%kpt-motion-duration-fast, .12s) var(--%NS%kpt-motion-easing-standard)}.kpt-roadmap__toggle-icon--open{transform:rotate(90deg)}.kpt-roadmap__lane{position:relative;min-inline-size:0}.kpt-roadmap__bar,.kpt-roadmap__milestone,.kpt-roadmap__summary{--%NS%_color: var(--%NS%kpt-color-primary)}.kpt-roadmap__bar[data-variant=neutral],.kpt-roadmap__milestone[data-variant=neutral],.kpt-roadmap__summary[data-variant=neutral]{--%NS%_color: var(--%NS%kpt-color-muted)}.kpt-roadmap__bar[data-variant=success],.kpt-roadmap__milestone[data-variant=success],.kpt-roadmap__summary[data-variant=success]{--%NS%_color: var(--%NS%kpt-color-success)}.kpt-roadmap__bar[data-variant=danger],.kpt-roadmap__milestone[data-variant=danger],.kpt-roadmap__summary[data-variant=danger]{--%NS%_color: var(--%NS%kpt-color-danger)}.kpt-roadmap__bar[data-variant=warning],.kpt-roadmap__milestone[data-variant=warning],.kpt-roadmap__summary[data-variant=warning]{--%NS%_color: var(--%NS%kpt-color-warning)}.kpt-roadmap__bar[data-variant=info],.kpt-roadmap__milestone[data-variant=info],.kpt-roadmap__summary[data-variant=info]{--%NS%_color: var(--%NS%kpt-color-info)}.kpt-roadmap__bar{position:absolute;z-index:1;display:flex;align-items:center;min-inline-size:.25rem;padding-inline:var(--%NS%kpt-space-2, .5rem);overflow:hidden;cursor:pointer;background:var(--%NS%_color);border-radius:var(--%NS%kpt-radius-full, 9999px);transition:filter var(--%NS%kpt-motion-duration-fast, .12s) var(--%NS%kpt-motion-easing-standard)}.kpt-roadmap__bar:hover{filter:brightness(1.08)}.kpt-roadmap__bar:focus-visible{outline:var(--%NS%kpt-border-width-medium, 2px) solid var(--%NS%kpt-color-focus-ring);outline-offset:2px}.kpt-roadmap__bar--disabled{cursor:default;opacity:.55}.kpt-roadmap__bar--clipped-start{border-start-start-radius:0;border-end-start-radius:0;clip-path:polygon(.5rem 0,100% 0,100% 100%,.5rem 100%,0 50%)}.kpt-roadmap__bar--clipped-end{border-start-end-radius:0;border-end-end-radius:0;clip-path:polygon(0 0,calc(100% - .5rem) 0,100% 50%,calc(100% - .5rem) 100%,0 100%)}.kpt-roadmap__bar--clipped-start.kpt-roadmap__bar--clipped-end{clip-path:polygon(.5rem 0,calc(100% - .5rem) 0,100% 50%,calc(100% - .5rem) 100%,.5rem 100%,0 50%)}.kpt-roadmap__bar-progress{position:absolute;inset-block:0;inset-inline-start:0;background:#00000038;pointer-events:none}.kpt-roadmap__bar-label{position:relative;overflow:hidden;font-size:var(--%NS%kpt-font-size-xs, .75rem);font-weight:var(--%NS%kpt-font-weight-medium, 500);color:var(--%NS%kpt-color-text-inverse, #fff);text-overflow:ellipsis;white-space:nowrap}.kpt-roadmap__bar[data-variant=neutral] .kpt-roadmap__bar-label{color:var(--%NS%kpt-color-on-muted)}.kpt-roadmap__milestone{position:absolute;z-index:1;cursor:pointer;background:var(--%NS%_color);transform:translate(-50%) rotate(45deg);border-radius:var(--%NS%kpt-radius-sm, .25rem)}.kpt-roadmap__milestone:focus-visible{outline:var(--%NS%kpt-border-width-medium, 2px) solid var(--%NS%kpt-color-focus-ring);outline-offset:2px}.kpt-roadmap__summary{position:absolute;inset-block-start:50%;z-index:1;block-size:.5rem;background:var(--%NS%_color);border-radius:var(--%NS%kpt-radius-full, 9999px);transform:translateY(-50%)}.kpt-roadmap__summary[data-variant=neutral]{--%NS%_color: var(--%NS%kpt-color-on-surface-muted)}.kpt-roadmap__empty{padding:var(--%NS%kpt-space-8, 2rem);color:var(--%NS%kpt-color-on-surface-muted);text-align:center}}\n"], encapsulation: 2 }); }
|
|
632
|
+
} }, dependencies: [KptTooltip], styles: ["@layer kpt.components{.kpt-roadmap{display:block;--%NS%kpt-roadmap-cells: 1;--%NS%kpt-roadmap-cell-w: 76px;--%NS%kpt-roadmap-label-w: 14rem;--%NS%kpt-roadmap-track-w: calc(var(--%NS%kpt-roadmap-cell-w) * var(--%NS%kpt-roadmap-cells));color:var(--%NS%kpt-color-on-surface);font-family:var(--%NS%kpt-font-family-sans);background:var(--%NS%kpt-color-surface);border:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border);border-radius:var(--%NS%kpt-radius-lg, .75rem);overflow:hidden}.kpt-roadmap__scroll{overflow:auto;position:relative}.kpt-roadmap__head,.kpt-roadmap__row{display:grid;grid-template-columns:var(--%NS%kpt-roadmap-label-w) minmax(var(--%NS%kpt-roadmap-track-w),1fr);inline-size:max-content;min-inline-size:100%}.kpt-roadmap__head{position:sticky;inset-block-start:0;z-index:4;background:var(--%NS%kpt-color-surface-variant, var(--%NS%kpt-color-surface));border-block-end:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border)}.kpt-roadmap__head-label{position:sticky;inset-inline-start:0;z-index:5;background:var(--%NS%kpt-color-surface-variant, var(--%NS%kpt-color-surface));border-inline-end:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border)}.kpt-roadmap__head-track{position:relative;display:flex;flex-direction:column;min-inline-size:0}.kpt-roadmap__bands,.kpt-roadmap__cells,.kpt-roadmap__grid-cells{display:flex;inline-size:100%}.kpt-roadmap__band{position:relative;display:flex;align-items:center;justify-content:center;gap:var(--%NS%kpt-space-2, .5rem);min-inline-size:0;padding:var(--%NS%kpt-space-2, .5rem) var(--%NS%kpt-space-3, .75rem);font-size:var(--%NS%kpt-font-size-sm, .875rem);font-weight:var(--%NS%kpt-font-weight-medium, 500);color:var(--%NS%kpt-color-on-surface-muted);white-space:nowrap;overflow:hidden;border-inline-start:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border)}.kpt-roadmap__band:first-child{border-inline-start:0}.kpt-roadmap__band--year-start{border-inline-start:var(--%NS%kpt-border-width-medium, 2px) solid var(--%NS%kpt-color-border-strong)}.kpt-roadmap__band-label{overflow:hidden;text-overflow:ellipsis}.kpt-roadmap__band-sublabel{color:var(--%NS%kpt-color-text-subtle, var(--%NS%kpt-color-on-surface-muted))}.kpt-roadmap__year-badge{display:inline-flex;align-items:center;padding:.125rem var(--%NS%kpt-space-2, .5rem);font-size:var(--%NS%kpt-font-size-xs, .75rem);font-weight:var(--%NS%kpt-font-weight-semibold, 600);color:var(--%NS%kpt-color-surface);background:var(--%NS%kpt-color-on-surface);border-radius:var(--%NS%kpt-radius-full, 9999px)}.kpt-roadmap__cell{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.125rem;min-inline-size:0;padding:var(--%NS%kpt-space-2, .5rem) .25rem;text-align:center;white-space:nowrap;border-inline-start:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border)}.kpt-roadmap__cell:first-child{border-inline-start:0}.kpt-roadmap__cell-label{font-size:var(--%NS%kpt-font-size-xs, .75rem);font-weight:var(--%NS%kpt-font-weight-semibold, 600);letter-spacing:.02em;text-transform:uppercase;color:var(--%NS%kpt-color-on-surface-muted)}.kpt-roadmap__cell-sublabel{font-size:var(--%NS%kpt-font-size-xs, .75rem);color:var(--%NS%kpt-color-text-subtle, var(--%NS%kpt-color-on-surface-muted));overflow:hidden;text-overflow:ellipsis;inline-size:100%}.kpt-roadmap__cell--weekend{background:var(--%NS%kpt-color-surface-sunken, var(--%NS%kpt-color-muted))}.kpt-roadmap__cell--today .kpt-roadmap__cell-label{color:var(--%NS%kpt-color-primary)}.kpt-roadmap__cell--year-boundary,.kpt-roadmap__grid-cell--year-boundary{border-inline-start:var(--%NS%kpt-border-width-medium, 2px) solid var(--%NS%kpt-color-border-strong)}.kpt-roadmap__cell--gap-before,.kpt-roadmap__grid-cell--gap-before{border-inline-start:var(--%NS%kpt-border-width-thin, 1px) dashed var(--%NS%kpt-color-border-strong)}.kpt-roadmap__body{position:relative;inline-size:calc(var(--%NS%kpt-roadmap-label-w) + var(--%NS%kpt-roadmap-track-w));min-inline-size:100%}.kpt-roadmap__grid{position:absolute;inset-block:0;inset-inline-start:var(--%NS%kpt-roadmap-label-w);inset-inline-end:0;z-index:0;pointer-events:none}.kpt-roadmap__grid-cells{block-size:100%}.kpt-roadmap__grid-cell{min-inline-size:0;border-inline-start:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border)}.kpt-roadmap__grid-cell:first-child{border-inline-start:0}.kpt-roadmap__grid-cell--weekend,.kpt-roadmap__grid-cell--non-working{background:var(--%NS%kpt-color-surface-sunken, var(--%NS%kpt-color-muted))}.kpt-roadmap__today{position:absolute;inset-block:0;inline-size:0;border-inline-start:var(--%NS%kpt-border-width-medium, 2px) dashed color-mix(in oklch,var(--%NS%kpt-color-primary) 40%,transparent)}.kpt-roadmap__today-dot{position:absolute;inset-block-end:0rem;inline-size:.5rem;block-size:.5rem;transform:translate(-50%);background:color-mix(in oklch,var(--%NS%kpt-color-primary) 40%,transparent);border-radius:var(--%NS%kpt-radius-full, 9999px);pointer-events:none}.kpt-roadmap__links{position:absolute;inset-block-start:0;inset-inline-start:var(--%NS%kpt-roadmap-label-w);z-index:2;pointer-events:none;overflow:visible}.kpt-roadmap__link-path{fill:none;stroke:var(--%NS%kpt-color-on-surface-muted);stroke-width:1.75}.kpt-roadmap__link-arrow{fill:var(--%NS%kpt-color-on-surface-muted)}.kpt-roadmap__link--violated .kpt-roadmap__link-path{stroke:var(--%NS%kpt-color-danger);stroke-dasharray:4 3}.kpt-roadmap__link--violated .kpt-roadmap__link-arrow{fill:var(--%NS%kpt-color-danger)}.kpt-roadmap__row{position:absolute;inset-inline:0;border-block-end:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border)}.kpt-roadmap__row:hover{background:color-mix(in oklch,var(--%NS%kpt-color-primary) 10%,transparent)}.kpt-roadmap__row:hover .kpt-roadmap__label{background:color-mix(in oklab,var(--%NS%kpt-color-primary) 10%,var(--%NS%kpt-color-surface))}.kpt-roadmap__row--group,.kpt-roadmap__row--group .kpt-roadmap__label{background:var(--%NS%kpt-color-surface-variant, var(--%NS%kpt-color-surface))}.kpt-roadmap__row--%NS%group:hover,.kpt-roadmap__row--%NS%group:hover .kpt-roadmap__label{background:color-mix(in oklab,var(--%NS%kpt-color-primary) 10%,var(--%NS%kpt-color-surface-variant, var(--%NS%kpt-color-surface)))}.kpt-roadmap__label{position:sticky;inset-inline-start:0;z-index:3;display:flex;flex-direction:column;justify-content:center;gap:.125rem;min-inline-size:0;padding-inline-end:var(--%NS%kpt-space-3, .75rem);background:var(--%NS%kpt-color-surface);border-inline-end:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border)}.kpt-roadmap__label--group{justify-content:start;flex-direction:row;align-items:center;gap:var(--%NS%kpt-space-2, .5rem)}.kpt-roadmap__label-text{overflow:hidden;font-size:var(--%NS%kpt-font-size-sm, .875rem);font-weight:var(--%NS%kpt-font-weight-medium, 500);text-overflow:ellipsis;white-space:nowrap}.kpt-roadmap__label-text--group{font-weight:var(--%NS%kpt-font-weight-semibold, 600)}.kpt-roadmap__label-sub{overflow:hidden;font-size:var(--%NS%kpt-font-size-xs, .75rem);color:var(--%NS%kpt-color-on-surface-muted);text-overflow:ellipsis;white-space:nowrap}.kpt-roadmap__label-stack{display:flex;flex-direction:column;justify-content:center;gap:.125rem;min-inline-size:0}.kpt-roadmap__label-count{align-self:center;flex:0 0 auto;padding:0 var(--%NS%kpt-space-2, .5rem);font-size:var(--%NS%kpt-font-size-xs, .75rem);color:var(--%NS%kpt-color-on-surface-muted);background:var(--%NS%kpt-color-muted);border-radius:var(--%NS%kpt-radius-full, 9999px)}.kpt-roadmap__toggle{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;inline-size:1.25rem;block-size:1.25rem;padding:0;color:inherit;cursor:pointer;background:transparent;border:0;border-radius:var(--%NS%kpt-radius-sm, .25rem)}.kpt-roadmap__toggle:focus-visible{outline:var(--%NS%kpt-border-width-medium, 2px) solid var(--%NS%kpt-color-focus-ring);outline-offset:1px}.kpt-roadmap__toggle-icon{inline-size:0;block-size:0;border-block-start:.3rem solid transparent;border-block-end:.3rem solid transparent;border-inline-start:.4rem solid currentcolor;transition:transform var(--%NS%kpt-motion-duration-fast, .12s) var(--%NS%kpt-motion-easing-standard)}.kpt-roadmap__toggle-icon--open{transform:rotate(90deg)}.kpt-roadmap__lane{position:relative;min-inline-size:0}.kpt-roadmap__bar,.kpt-roadmap__milestone,.kpt-roadmap__summary{--%NS%_color: var(--%NS%kpt-color-primary)}.kpt-roadmap__bar[data-variant=neutral],.kpt-roadmap__milestone[data-variant=neutral],.kpt-roadmap__summary[data-variant=neutral]{--%NS%_color: var(--%NS%kpt-color-muted)}.kpt-roadmap__bar[data-variant=success],.kpt-roadmap__milestone[data-variant=success],.kpt-roadmap__summary[data-variant=success]{--%NS%_color: var(--%NS%kpt-color-success)}.kpt-roadmap__bar[data-variant=danger],.kpt-roadmap__milestone[data-variant=danger],.kpt-roadmap__summary[data-variant=danger]{--%NS%_color: var(--%NS%kpt-color-danger)}.kpt-roadmap__bar[data-variant=warning],.kpt-roadmap__milestone[data-variant=warning],.kpt-roadmap__summary[data-variant=warning]{--%NS%_color: var(--%NS%kpt-color-warning)}.kpt-roadmap__bar[data-variant=info],.kpt-roadmap__milestone[data-variant=info],.kpt-roadmap__summary[data-variant=info]{--%NS%_color: var(--%NS%kpt-color-info)}.kpt-roadmap__bar{position:absolute;z-index:1;display:flex;align-items:center;min-inline-size:.25rem;padding-inline:var(--%NS%kpt-space-2, .5rem);overflow:hidden;cursor:pointer;background:var(--%NS%_color);border-radius:var(--%NS%kpt-radius-full, 9999px);transition:filter var(--%NS%kpt-motion-duration-fast, .12s) var(--%NS%kpt-motion-easing-standard)}.kpt-roadmap__bar:hover{filter:brightness(1.08)}.kpt-roadmap__bar:focus-visible{outline:var(--%NS%kpt-border-width-medium, 2px) solid var(--%NS%kpt-color-focus-ring);outline-offset:2px}.kpt-roadmap__bar--disabled{cursor:default;opacity:.55}.kpt-roadmap__bar--clipped-start{border-start-start-radius:0;border-end-start-radius:0;clip-path:polygon(.5rem 0,100% 0,100% 100%,.5rem 100%,0 50%)}.kpt-roadmap__bar--clipped-end{border-start-end-radius:0;border-end-end-radius:0;clip-path:polygon(0 0,calc(100% - .5rem) 0,100% 50%,calc(100% - .5rem) 100%,0 100%)}.kpt-roadmap__bar--clipped-start.kpt-roadmap__bar--clipped-end{clip-path:polygon(.5rem 0,calc(100% - .5rem) 0,100% 50%,calc(100% - .5rem) 100%,.5rem 100%,0 50%)}.kpt-roadmap__bar-progress{position:absolute;inset-block:0;inset-inline-start:0;background:#00000038;pointer-events:none}.kpt-roadmap__bar-label{position:relative;overflow:hidden;font-size:var(--%NS%kpt-font-size-xs, .75rem);font-weight:var(--%NS%kpt-font-weight-medium, 500);color:var(--%NS%kpt-color-text-inverse, #fff);text-overflow:ellipsis;white-space:nowrap}.kpt-roadmap__bar[data-variant=neutral] .kpt-roadmap__bar-label{color:var(--%NS%kpt-color-on-muted)}.kpt-roadmap__milestone{position:absolute;z-index:1;cursor:pointer;background:var(--%NS%_color);transform:translate(-50%) rotate(45deg);border-radius:var(--%NS%kpt-radius-sm, .25rem)}.kpt-roadmap__milestone:focus-visible{outline:var(--%NS%kpt-border-width-medium, 2px) solid var(--%NS%kpt-color-focus-ring);outline-offset:2px}.kpt-roadmap__summary{position:absolute;inset-block-start:50%;z-index:1;block-size:.5rem;background:var(--%NS%_color);border-radius:var(--%NS%kpt-radius-full, 9999px);transform:translateY(-50%)}.kpt-roadmap__summary[data-variant=neutral]{--%NS%_color: var(--%NS%kpt-color-on-surface-muted)}.kpt-roadmap__empty{padding:var(--%NS%kpt-space-8, 2rem);color:var(--%NS%kpt-color-on-surface-muted);text-align:center}}\n"], encapsulation: 2 }); }
|
|
633
633
|
}
|
|
634
634
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(KptRoadmap, [{
|
|
635
635
|
type: Component,
|
|
@@ -639,7 +639,7 @@ class KptRoadmap {
|
|
|
639
639
|
'[style.--kpt-roadmap-cell-w.px]': 'cellWidth()',
|
|
640
640
|
'[style.--kpt-roadmap-label-w]': 'labelWidth()',
|
|
641
641
|
'[class.kpt-roadmap--fixed-height]': '!!scrollHeight()',
|
|
642
|
-
}, template: "<div\n #scrollEl\n class=\"kpt-roadmap__scroll\"\n [style.max-block-size]=\"scrollHeight()\"\n (scroll)=\"onScroll($event)\"\n>\n <!-- Nag\u0142\u00F3wek: przykleja si\u0119 do g\u00F3ry, gdy podano sta\u0142\u0105 wysoko\u015B\u0107. -->\n <div class=\"kpt-roadmap__head\">\n <div class=\"kpt-roadmap__head-label\"></div>\n\n <div class=\"kpt-roadmap__head-track\">\n @if (timeline().hasBands) {\n <div class=\"kpt-roadmap__bands\">\n @for (band of timeline().bands; track band.key) {\n <div\n class=\"kpt-roadmap__band\"\n [class.kpt-roadmap__band--year-start]=\"band.isYearStart\"\n [style.inline-size.%]=\"(band.ratioEnd - band.ratioStart) * 100\"\n [kptTooltip]=\"band.sublabel ? band.label + ' ' + band.sublabel : band.label\"\n kptTooltipOnlyWhenTruncated\n >\n @if (band.yearBadge) {\n <span class=\"kpt-roadmap__year-badge\">{{ band.yearBadge }}</span>\n }\n <span class=\"kpt-roadmap__band-label\">{{ band.label }}</span>\n @if (band.sublabel && !band.yearBadge) {\n <span class=\"kpt-roadmap__band-sublabel\">{{ band.sublabel }}</span>\n }\n </div>\n }\n </div>\n }\n\n <!-- Nag\u0142\u00F3wek definiuje siatk\u0119, wi\u0119c to on jest \u017Ar\u00F3d\u0142em pomiaru szeroko\u015Bci toru. -->\n <div #laneMeasure class=\"kpt-roadmap__cells\">\n @for (cell of timeline().cells; track cell.key) {\n <div\n class=\"kpt-roadmap__cell\"\n [class.kpt-roadmap__cell--weekend]=\"cell.isWeekend\"\n [class.kpt-roadmap__cell--today]=\"cell.isToday && showToday()\"\n [class.kpt-roadmap__cell--year-boundary]=\"cell.isYearBoundary\"\n [class.kpt-roadmap__cell--gap-before]=\"cell.hasGapBefore\"\n [style.inline-size.%]=\"(cell.ratioEnd - cell.ratioStart) * 100\"\n [kptTooltip]=\"cell.title\"\n >\n <span class=\"kpt-roadmap__cell-label\">{{ cell.label }}</span>\n @if (cell.sublabel) {\n <span class=\"kpt-roadmap__cell-sublabel\">{{ cell.sublabel }}</span>\n }\n </div>\n }\n </div>\n\n <!-- Znacznik \u201Edzi\u015B\" mieszka w nag\u0142\u00F3wku: warstwa siatki ma w\u0142asny kontekst\n uk\u0142adania, wi\u0119c nic w niej nie mo\u017Ce znale\u017A\u0107 si\u0119 nad nag\u0142\u00F3wkiem. -->\n @if (showToday() && timeline().todayRatio !== null) {\n <span\n class=\"kpt-roadmap__today-dot\"\n [style.inset-inline-start.%]=\"timeline().todayRatio! * 100\"\n [attr.title]=\"i18n.t('roadmap.today')\"\n ></span>\n }\n </div>\n </div>\n\n @if (isEmpty()) {\n <div class=\"kpt-roadmap__empty\">{{ i18n.t('roadmap.empty') }}</div>\n } @else {\n <div class=\"kpt-roadmap__body\" [style.block-size.px]=\"layout().totalHeight\">\n <!-- Siatka t\u0142a: kolumny weekendowe, granice roku i znacznik dzi\u015B. -->\n <div class=\"kpt-roadmap__grid\" aria-hidden=\"true\">\n <div class=\"kpt-roadmap__grid-cells\">\n @for (cell of timeline().cells; track cell.key) {\n <div\n class=\"kpt-roadmap__grid-cell\"\n [class.kpt-roadmap__grid-cell--weekend]=\"cell.isWeekend\"\n [class.kpt-roadmap__grid-cell--non-working]=\"cell.isNonWorking\"\n [class.kpt-roadmap__grid-cell--year-boundary]=\"cell.isYearBoundary\"\n [class.kpt-roadmap__grid-cell--gap-before]=\"cell.hasGapBefore\"\n [style.inline-size.%]=\"(cell.ratioEnd - cell.ratioStart) * 100\"\n ></div>\n }\n </div>\n\n @if (showToday() && timeline().todayRatio !== null) {\n <!-- Sama prowadnica; znacznik siedzi w nag\u0142\u00F3wku, \u017Ceby by\u0142 nad nim widoczny. -->\n <div class=\"kpt-roadmap__today\" [style.inset-inline-start.%]=\"timeline().todayRatio! * 100\"></div>\n }\n </div>\n\n <!-- Zale\u017Cno\u015Bci rysowane nad paskami, pod kolumn\u0105 etykiet. -->\n @if (links().length > 0) {\n <svg\n class=\"kpt-roadmap__links\"\n [attr.viewBox]=\"'0 0 ' + laneWidth() + ' ' + layout().totalHeight\"\n [attr.width]=\"laneWidth()\"\n [attr.height]=\"layout().totalHeight\"\n aria-hidden=\"true\"\n >\n @for (link of links(); track link.key) {\n <g\n class=\"kpt-roadmap__link\"\n [class.kpt-roadmap__link--violated]=\"link.isViolated\"\n [attr.data-variant]=\"link.variant\"\n >\n <path class=\"kpt-roadmap__link-path\" [attr.d]=\"link.path\" [style.stroke]=\"link.color\" />\n <path class=\"kpt-roadmap__link-arrow\" [attr.d]=\"link.arrow\" [style.fill]=\"link.color\" />\n </g>\n }\n </svg>\n }\n\n @for (row of visibleRows(); track row.key) {\n <div\n class=\"kpt-roadmap__row\"\n [class.kpt-roadmap__row--group]=\"row.kind === 'group'\"\n [style.inset-block-start.px]=\"row.top\"\n [style.block-size.px]=\"row.height\"\n >\n <div\n class=\"kpt-roadmap__label\"\n [style.padding-inline-start.rem]=\"0.75 + row.depth * 1\"\n [class.kpt-roadmap__label--group]=\"row.kind === 'group'\"\n [kptTooltip]=\"labelTooltip(row)\"\n kptTooltipOnlyWhenTruncated\n >\n @if (row.group; as group) {\n <button\n type=\"button\"\n class=\"kpt-roadmap__toggle\"\n [attr.aria-expanded]=\"!isCollapsed(group)\"\n [attr.aria-label]=\"isCollapsed(group) ? i18n.t('roadmap.expandGroup') : i18n.t('roadmap.collapseGroup')\"\n (click)=\"toggleGroup(group)\"\n >\n <span class=\"kpt-roadmap__toggle-icon\" [class.kpt-roadmap__toggle-icon--open]=\"!isCollapsed(group)\">\n </span>\n </button>\n <!-- Dymek siedzi na stacku, nie na ca\u0142ej etykiecie: w grupie tekst jest\n o poziom g\u0142\u0119biej, a pomiar obejmuje tylko bezpo\u015Brednie dzieci hosta. -->\n <span\n class=\"kpt-roadmap__label-stack\"\n [kptTooltip]=\"group.sublabel ? group.label + ' \u2014 ' + group.sublabel : group.label\"\n kptTooltipOnlyWhenTruncated\n >\n <span class=\"kpt-roadmap__label-text kpt-roadmap__label-text--group\">{{ group.label }}</span>\n @if (group.sublabel) {\n <span class=\"kpt-roadmap__label-sub\">{{ group.sublabel }}</span>\n }\n </span>\n @if (row.groupState; as state) {\n @if (state.itemCount) {\n <span class=\"kpt-roadmap__label-count\">{{ state.itemCount }}</span>\n }\n }\n } @else if (row.items[0]; as first) {\n <span class=\"kpt-roadmap__label-text\">{{ first.source.label }}</span>\n @if (row.items.length === 1 && first.source.sublabel) {\n <span class=\"kpt-roadmap__label-sub\">{{ first.source.sublabel }}</span>\n }\n }\n </div>\n\n <div class=\"kpt-roadmap__lane\">\n @if (row.kind === 'group') {\n @if (summary(row); as sum) {\n <div\n class=\"kpt-roadmap__summary\"\n [attr.data-variant]=\"sum.variant\"\n [style.inset-inline-start.%]=\"sum.left\"\n [style.inline-size.%]=\"sum.width\"\n [style.background-color]=\"sum.color\"\n ></div>\n }\n } @else {\n @for (bar of bars(row); track bar.item.id) {\n @if (bar.isMilestone) {\n <div\n class=\"kpt-roadmap__milestone\"\n [attr.data-variant]=\"bar.variant\"\n [kptTooltip]=\"bar.title\"\n [attr.aria-label]=\"i18n.t('roadmap.milestone') + ': ' + bar.label\"\n [style.inset-inline-start.%]=\"bar.left\"\n [style.inset-block-start.px]=\"bar.top\"\n [style.inline-size.px]=\"bar.height\"\n [style.block-size.px]=\"bar.height\"\n [style.background-color]=\"bar.color\"\n tabindex=\"0\"\n (click)=\"onItemClick(bar.item)\"\n (keydown)=\"onItemKeydown($event, bar.item)\"\n ></div>\n } @else {\n <div\n class=\"kpt-roadmap__bar\"\n [attr.data-variant]=\"bar.variant\"\n [kptTooltip]=\"bar.title\"\n kptTooltipOnlyWhenTruncated\n [class.kpt-roadmap__bar--clipped-start]=\"bar.clippedStart\"\n [class.kpt-roadmap__bar--clipped-end]=\"bar.clippedEnd\"\n [class.kpt-roadmap__bar--disabled]=\"bar.item.source.disabled\"\n [style.inset-inline-start.%]=\"bar.left\"\n [style.inline-size.%]=\"bar.width\"\n [style.inset-block-start.px]=\"bar.top\"\n [style.block-size.px]=\"bar.height\"\n [style.background-color]=\"bar.color\"\n tabindex=\"0\"\n (click)=\"onItemClick(bar.item)\"\n (keydown)=\"onItemKeydown($event, bar.item)\"\n >\n @if (bar.progress !== null) {\n <span class=\"kpt-roadmap__bar-progress\" [style.inline-size.%]=\"bar.progress * 100\"></span>\n }\n <span class=\"kpt-roadmap__bar-label\">{{ bar.label }}</span>\n </div>\n }\n }\n }\n </div>\n </div>\n }\n </div>\n }\n</div>\n", styles: ["@layer kpt.components{.kpt-roadmap{display:block;--kpt-roadmap-cells: 1;--kpt-roadmap-cell-w: 76px;--kpt-roadmap-label-w: 14rem;--kpt-roadmap-track-w: calc(var(--kpt-roadmap-cell-w) * var(--kpt-roadmap-cells));color:var(--kpt-color-on-surface);font-family:var(--kpt-font-family-sans);background:var(--kpt-color-surface);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-lg, .75rem);overflow:hidden}.kpt-roadmap__scroll{overflow:auto;position:relative}.kpt-roadmap__head,.kpt-roadmap__row{display:grid;grid-template-columns:var(--kpt-roadmap-label-w) minmax(var(--kpt-roadmap-track-w),1fr);inline-size:max-content;min-inline-size:100%}.kpt-roadmap__head{position:sticky;inset-block-start:0;z-index:4;background:var(--kpt-color-surface-variant, var(--kpt-color-surface));border-block-end:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border)}.kpt-roadmap__head-label{position:sticky;inset-inline-start:0;z-index:5;background:var(--kpt-color-surface-variant, var(--kpt-color-surface));border-inline-end:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border)}.kpt-roadmap__head-track{position:relative;display:flex;flex-direction:column;min-inline-size:0}.kpt-roadmap__bands,.kpt-roadmap__cells,.kpt-roadmap__grid-cells{display:flex;inline-size:100%}.kpt-roadmap__band{position:relative;display:flex;align-items:center;justify-content:center;gap:var(--kpt-space-2, .5rem);min-inline-size:0;padding:var(--kpt-space-2, .5rem) var(--kpt-space-3, .75rem);font-size:var(--kpt-font-size-sm, .875rem);font-weight:var(--kpt-font-weight-medium, 500);color:var(--kpt-color-on-surface-muted);white-space:nowrap;overflow:hidden;border-inline-start:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border)}.kpt-roadmap__band:first-child{border-inline-start:0}.kpt-roadmap__band--year-start{border-inline-start:var(--kpt-border-width-medium, 2px) solid var(--kpt-color-border-strong)}.kpt-roadmap__band-label{overflow:hidden;text-overflow:ellipsis}.kpt-roadmap__band-sublabel{color:var(--kpt-color-text-subtle, var(--kpt-color-on-surface-muted))}.kpt-roadmap__year-badge{display:inline-flex;align-items:center;padding:.125rem var(--kpt-space-2, .5rem);font-size:var(--kpt-font-size-xs, .75rem);font-weight:var(--kpt-font-weight-semibold, 600);color:var(--kpt-color-surface);background:var(--kpt-color-on-surface);border-radius:var(--kpt-radius-full, 9999px)}.kpt-roadmap__cell{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.125rem;min-inline-size:0;padding:var(--kpt-space-2, .5rem) .25rem;text-align:center;white-space:nowrap;border-inline-start:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border)}.kpt-roadmap__cell:first-child{border-inline-start:0}.kpt-roadmap__cell-label{font-size:var(--kpt-font-size-xs, .75rem);font-weight:var(--kpt-font-weight-semibold, 600);letter-spacing:.02em;text-transform:uppercase;color:var(--kpt-color-on-surface-muted)}.kpt-roadmap__cell-sublabel{font-size:var(--kpt-font-size-xs, .75rem);color:var(--kpt-color-text-subtle, var(--kpt-color-on-surface-muted));overflow:hidden;text-overflow:ellipsis;inline-size:100%}.kpt-roadmap__cell--weekend{background:var(--kpt-color-surface-sunken, var(--kpt-color-muted))}.kpt-roadmap__cell--today .kpt-roadmap__cell-label{color:var(--kpt-color-primary)}.kpt-roadmap__cell--year-boundary,.kpt-roadmap__grid-cell--year-boundary{border-inline-start:var(--kpt-border-width-medium, 2px) solid var(--kpt-color-border-strong)}.kpt-roadmap__cell--gap-before,.kpt-roadmap__grid-cell--gap-before{border-inline-start:var(--kpt-border-width-thin, 1px) dashed var(--kpt-color-border-strong)}.kpt-roadmap__body{position:relative;inline-size:calc(var(--kpt-roadmap-label-w) + var(--kpt-roadmap-track-w));min-inline-size:100%}.kpt-roadmap__grid{position:absolute;inset-block:0;inset-inline-start:var(--kpt-roadmap-label-w);inset-inline-end:0;z-index:0;pointer-events:none}.kpt-roadmap__grid-cells{block-size:100%}.kpt-roadmap__grid-cell{min-inline-size:0;border-inline-start:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border)}.kpt-roadmap__grid-cell:first-child{border-inline-start:0}.kpt-roadmap__grid-cell--weekend,.kpt-roadmap__grid-cell--non-working{background:var(--kpt-color-surface-sunken, var(--kpt-color-muted))}.kpt-roadmap__today{position:absolute;inset-block:0;inline-size:0;border-inline-start:var(--kpt-border-width-medium, 2px) dashed color-mix(in oklch,var(--kpt-color-primary) 40%,transparent)}.kpt-roadmap__today-dot{position:absolute;inset-block-end:0rem;inline-size:.5rem;block-size:.5rem;transform:translate(-50%);background:color-mix(in oklch,var(--kpt-color-primary) 40%,transparent);border-radius:var(--kpt-radius-full, 9999px);pointer-events:none}.kpt-roadmap__links{position:absolute;inset-block-start:0;inset-inline-start:var(--kpt-roadmap-label-w);z-index:2;pointer-events:none;overflow:visible}.kpt-roadmap__link-path{fill:none;stroke:var(--kpt-color-on-surface-muted);stroke-width:1.75}.kpt-roadmap__link-arrow{fill:var(--kpt-color-on-surface-muted)}.kpt-roadmap__link--violated .kpt-roadmap__link-path{stroke:var(--kpt-color-danger);stroke-dasharray:4 3}.kpt-roadmap__link--violated .kpt-roadmap__link-arrow{fill:var(--kpt-color-danger)}.kpt-roadmap__row{position:absolute;inset-inline:0;border-block-end:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border)}.kpt-roadmap__row:hover{background:color-mix(in oklch,var(--kpt-color-primary) 10%,transparent)}.kpt-roadmap__row:hover .kpt-roadmap__label{background:color-mix(in oklch,var(--kpt-color-primary) 10%,var(--kpt-color-surface))}.kpt-roadmap__row--group,.kpt-roadmap__row--group .kpt-roadmap__label{background:var(--kpt-color-surface-variant, var(--kpt-color-surface))}.kpt-roadmap__row--group:hover,.kpt-roadmap__row--group:hover .kpt-roadmap__label{background:color-mix(in oklch,var(--kpt-color-primary) 10%,var(--kpt-color-surface-variant, var(--kpt-color-surface)))}.kpt-roadmap__label{position:sticky;inset-inline-start:0;z-index:3;display:flex;flex-direction:column;justify-content:center;gap:.125rem;min-inline-size:0;padding-inline-end:var(--kpt-space-3, .75rem);background:var(--kpt-color-surface);border-inline-end:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border)}.kpt-roadmap__label--group{justify-content:start;flex-direction:row;align-items:center;gap:var(--kpt-space-2, .5rem)}.kpt-roadmap__label-text{overflow:hidden;font-size:var(--kpt-font-size-sm, .875rem);font-weight:var(--kpt-font-weight-medium, 500);text-overflow:ellipsis;white-space:nowrap}.kpt-roadmap__label-text--group{font-weight:var(--kpt-font-weight-semibold, 600)}.kpt-roadmap__label-sub{overflow:hidden;font-size:var(--kpt-font-size-xs, .75rem);color:var(--kpt-color-on-surface-muted);text-overflow:ellipsis;white-space:nowrap}.kpt-roadmap__label-stack{display:flex;flex-direction:column;justify-content:center;gap:.125rem;min-inline-size:0}.kpt-roadmap__label-count{align-self:center;flex:0 0 auto;padding:0 var(--kpt-space-2, .5rem);font-size:var(--kpt-font-size-xs, .75rem);color:var(--kpt-color-on-surface-muted);background:var(--kpt-color-muted);border-radius:var(--kpt-radius-full, 9999px)}.kpt-roadmap__toggle{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;inline-size:1.25rem;block-size:1.25rem;padding:0;color:inherit;cursor:pointer;background:transparent;border:0;border-radius:var(--kpt-radius-sm, .25rem)}.kpt-roadmap__toggle:focus-visible{outline:var(--kpt-border-width-medium, 2px) solid var(--kpt-color-focus-ring);outline-offset:1px}.kpt-roadmap__toggle-icon{inline-size:0;block-size:0;border-block-start:.3rem solid transparent;border-block-end:.3rem solid transparent;border-inline-start:.4rem solid currentcolor;transition:transform var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-roadmap__toggle-icon--open{transform:rotate(90deg)}.kpt-roadmap__lane{position:relative;min-inline-size:0}.kpt-roadmap__bar,.kpt-roadmap__milestone,.kpt-roadmap__summary{--_color: var(--kpt-color-primary)}.kpt-roadmap__bar[data-variant=neutral],.kpt-roadmap__milestone[data-variant=neutral],.kpt-roadmap__summary[data-variant=neutral]{--_color: var(--kpt-color-muted)}.kpt-roadmap__bar[data-variant=success],.kpt-roadmap__milestone[data-variant=success],.kpt-roadmap__summary[data-variant=success]{--_color: var(--kpt-color-success)}.kpt-roadmap__bar[data-variant=danger],.kpt-roadmap__milestone[data-variant=danger],.kpt-roadmap__summary[data-variant=danger]{--_color: var(--kpt-color-danger)}.kpt-roadmap__bar[data-variant=warning],.kpt-roadmap__milestone[data-variant=warning],.kpt-roadmap__summary[data-variant=warning]{--_color: var(--kpt-color-warning)}.kpt-roadmap__bar[data-variant=info],.kpt-roadmap__milestone[data-variant=info],.kpt-roadmap__summary[data-variant=info]{--_color: var(--kpt-color-info)}.kpt-roadmap__bar{position:absolute;z-index:1;display:flex;align-items:center;min-inline-size:.25rem;padding-inline:var(--kpt-space-2, .5rem);overflow:hidden;cursor:pointer;background:var(--_color);border-radius:var(--kpt-radius-full, 9999px);transition:filter var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-roadmap__bar:hover{filter:brightness(1.08)}.kpt-roadmap__bar:focus-visible{outline:var(--kpt-border-width-medium, 2px) solid var(--kpt-color-focus-ring);outline-offset:2px}.kpt-roadmap__bar--disabled{cursor:default;opacity:.55}.kpt-roadmap__bar--clipped-start{border-start-start-radius:0;border-end-start-radius:0;clip-path:polygon(.5rem 0,100% 0,100% 100%,.5rem 100%,0 50%)}.kpt-roadmap__bar--clipped-end{border-start-end-radius:0;border-end-end-radius:0;clip-path:polygon(0 0,calc(100% - .5rem) 0,100% 50%,calc(100% - .5rem) 100%,0 100%)}.kpt-roadmap__bar--clipped-start.kpt-roadmap__bar--clipped-end{clip-path:polygon(.5rem 0,calc(100% - .5rem) 0,100% 50%,calc(100% - .5rem) 100%,.5rem 100%,0 50%)}.kpt-roadmap__bar-progress{position:absolute;inset-block:0;inset-inline-start:0;background:#00000038;pointer-events:none}.kpt-roadmap__bar-label{position:relative;overflow:hidden;font-size:var(--kpt-font-size-xs, .75rem);font-weight:var(--kpt-font-weight-medium, 500);color:var(--kpt-color-text-inverse, #fff);text-overflow:ellipsis;white-space:nowrap}.kpt-roadmap__bar[data-variant=neutral] .kpt-roadmap__bar-label{color:var(--kpt-color-on-muted)}.kpt-roadmap__milestone{position:absolute;z-index:1;cursor:pointer;background:var(--_color);transform:translate(-50%) rotate(45deg);border-radius:var(--kpt-radius-sm, .25rem)}.kpt-roadmap__milestone:focus-visible{outline:var(--kpt-border-width-medium, 2px) solid var(--kpt-color-focus-ring);outline-offset:2px}.kpt-roadmap__summary{position:absolute;inset-block-start:50%;z-index:1;block-size:.5rem;background:var(--_color);border-radius:var(--kpt-radius-full, 9999px);transform:translateY(-50%)}.kpt-roadmap__summary[data-variant=neutral]{--_color: var(--kpt-color-on-surface-muted)}.kpt-roadmap__empty{padding:var(--kpt-space-8, 2rem);color:var(--kpt-color-on-surface-muted);text-align:center}}\n"] }]
|
|
642
|
+
}, template: "<div\n #scrollEl\n class=\"kpt-roadmap__scroll\"\n [style.max-block-size]=\"scrollHeight()\"\n (scroll)=\"onScroll($event)\"\n>\n <!-- Nag\u0142\u00F3wek: przykleja si\u0119 do g\u00F3ry, gdy podano sta\u0142\u0105 wysoko\u015B\u0107. -->\n <div class=\"kpt-roadmap__head\">\n <div class=\"kpt-roadmap__head-label\"></div>\n\n <div class=\"kpt-roadmap__head-track\">\n @if (timeline().hasBands) {\n <div class=\"kpt-roadmap__bands\">\n @for (band of timeline().bands; track band.key) {\n <div\n class=\"kpt-roadmap__band\"\n [class.kpt-roadmap__band--year-start]=\"band.isYearStart\"\n [style.inline-size.%]=\"(band.ratioEnd - band.ratioStart) * 100\"\n [kptTooltip]=\"band.sublabel ? band.label + ' ' + band.sublabel : band.label\"\n kptTooltipOnlyWhenTruncated\n >\n @if (band.yearBadge) {\n <span class=\"kpt-roadmap__year-badge\">{{ band.yearBadge }}</span>\n }\n <span class=\"kpt-roadmap__band-label\">{{ band.label }}</span>\n @if (band.sublabel && !band.yearBadge) {\n <span class=\"kpt-roadmap__band-sublabel\">{{ band.sublabel }}</span>\n }\n </div>\n }\n </div>\n }\n\n <!-- Nag\u0142\u00F3wek definiuje siatk\u0119, wi\u0119c to on jest \u017Ar\u00F3d\u0142em pomiaru szeroko\u015Bci toru. -->\n <div #laneMeasure class=\"kpt-roadmap__cells\">\n @for (cell of timeline().cells; track cell.key) {\n <div\n class=\"kpt-roadmap__cell\"\n [class.kpt-roadmap__cell--weekend]=\"cell.isWeekend\"\n [class.kpt-roadmap__cell--today]=\"cell.isToday && showToday()\"\n [class.kpt-roadmap__cell--year-boundary]=\"cell.isYearBoundary\"\n [class.kpt-roadmap__cell--gap-before]=\"cell.hasGapBefore\"\n [style.inline-size.%]=\"(cell.ratioEnd - cell.ratioStart) * 100\"\n [kptTooltip]=\"cell.title\"\n >\n <span class=\"kpt-roadmap__cell-label\">{{ cell.label }}</span>\n @if (cell.sublabel) {\n <span class=\"kpt-roadmap__cell-sublabel\">{{ cell.sublabel }}</span>\n }\n </div>\n }\n </div>\n\n <!-- Znacznik \u201Edzi\u015B\" mieszka w nag\u0142\u00F3wku: warstwa siatki ma w\u0142asny kontekst\n uk\u0142adania, wi\u0119c nic w niej nie mo\u017Ce znale\u017A\u0107 si\u0119 nad nag\u0142\u00F3wkiem. -->\n @if (showToday() && timeline().todayRatio !== null) {\n <span\n class=\"kpt-roadmap__today-dot\"\n [style.inset-inline-start.%]=\"timeline().todayRatio! * 100\"\n [attr.title]=\"i18n.t('roadmap.today')\"\n ></span>\n }\n </div>\n </div>\n\n @if (isEmpty()) {\n <div class=\"kpt-roadmap__empty\">{{ i18n.t('roadmap.empty') }}</div>\n } @else {\n <div class=\"kpt-roadmap__body\" [style.block-size.px]=\"layout().totalHeight\">\n <!-- Siatka t\u0142a: kolumny weekendowe, granice roku i znacznik dzi\u015B. -->\n <div class=\"kpt-roadmap__grid\" aria-hidden=\"true\">\n <div class=\"kpt-roadmap__grid-cells\">\n @for (cell of timeline().cells; track cell.key) {\n <div\n class=\"kpt-roadmap__grid-cell\"\n [class.kpt-roadmap__grid-cell--weekend]=\"cell.isWeekend\"\n [class.kpt-roadmap__grid-cell--non-working]=\"cell.isNonWorking\"\n [class.kpt-roadmap__grid-cell--year-boundary]=\"cell.isYearBoundary\"\n [class.kpt-roadmap__grid-cell--gap-before]=\"cell.hasGapBefore\"\n [style.inline-size.%]=\"(cell.ratioEnd - cell.ratioStart) * 100\"\n ></div>\n }\n </div>\n\n @if (showToday() && timeline().todayRatio !== null) {\n <!-- Sama prowadnica; znacznik siedzi w nag\u0142\u00F3wku, \u017Ceby by\u0142 nad nim widoczny. -->\n <div class=\"kpt-roadmap__today\" [style.inset-inline-start.%]=\"timeline().todayRatio! * 100\"></div>\n }\n </div>\n\n <!-- Zale\u017Cno\u015Bci rysowane nad paskami, pod kolumn\u0105 etykiet. -->\n @if (links().length > 0) {\n <svg\n class=\"kpt-roadmap__links\"\n [attr.viewBox]=\"'0 0 ' + laneWidth() + ' ' + layout().totalHeight\"\n [attr.width]=\"laneWidth()\"\n [attr.height]=\"layout().totalHeight\"\n aria-hidden=\"true\"\n >\n @for (link of links(); track link.key) {\n <g\n class=\"kpt-roadmap__link\"\n [class.kpt-roadmap__link--violated]=\"link.isViolated\"\n [attr.data-variant]=\"link.variant\"\n >\n <path class=\"kpt-roadmap__link-path\" [attr.d]=\"link.path\" [style.stroke]=\"link.color\" />\n <path class=\"kpt-roadmap__link-arrow\" [attr.d]=\"link.arrow\" [style.fill]=\"link.color\" />\n </g>\n }\n </svg>\n }\n\n @for (row of visibleRows(); track row.key) {\n <div\n class=\"kpt-roadmap__row\"\n [class.kpt-roadmap__row--group]=\"row.kind === 'group'\"\n [style.inset-block-start.px]=\"row.top\"\n [style.block-size.px]=\"row.height\"\n >\n <div\n class=\"kpt-roadmap__label\"\n [style.padding-inline-start.rem]=\"0.75 + row.depth * 1\"\n [class.kpt-roadmap__label--group]=\"row.kind === 'group'\"\n [kptTooltip]=\"labelTooltip(row)\"\n kptTooltipOnlyWhenTruncated\n >\n @if (row.group; as group) {\n <button\n type=\"button\"\n class=\"kpt-roadmap__toggle\"\n [attr.aria-expanded]=\"!isCollapsed(group)\"\n [attr.aria-label]=\"isCollapsed(group) ? i18n.t('roadmap.expandGroup') : i18n.t('roadmap.collapseGroup')\"\n (click)=\"toggleGroup(group)\"\n >\n <span class=\"kpt-roadmap__toggle-icon\" [class.kpt-roadmap__toggle-icon--open]=\"!isCollapsed(group)\">\n </span>\n </button>\n <!-- Dymek siedzi na stacku, nie na ca\u0142ej etykiecie: w grupie tekst jest\n o poziom g\u0142\u0119biej, a pomiar obejmuje tylko bezpo\u015Brednie dzieci hosta. -->\n <span\n class=\"kpt-roadmap__label-stack\"\n [kptTooltip]=\"group.sublabel ? group.label + ' \u2014 ' + group.sublabel : group.label\"\n kptTooltipOnlyWhenTruncated\n >\n <span class=\"kpt-roadmap__label-text kpt-roadmap__label-text--group\">{{ group.label }}</span>\n @if (group.sublabel) {\n <span class=\"kpt-roadmap__label-sub\">{{ group.sublabel }}</span>\n }\n </span>\n @if (row.groupState; as state) {\n @if (state.itemCount) {\n <span class=\"kpt-roadmap__label-count\">{{ state.itemCount }}</span>\n }\n }\n } @else if (row.items[0]; as first) {\n <span class=\"kpt-roadmap__label-text\">{{ first.source.label }}</span>\n @if (row.items.length === 1 && first.source.sublabel) {\n <span class=\"kpt-roadmap__label-sub\">{{ first.source.sublabel }}</span>\n }\n }\n </div>\n\n <div class=\"kpt-roadmap__lane\">\n @if (row.kind === 'group') {\n @if (summary(row); as sum) {\n <div\n class=\"kpt-roadmap__summary\"\n [attr.data-variant]=\"sum.variant\"\n [style.inset-inline-start.%]=\"sum.left\"\n [style.inline-size.%]=\"sum.width\"\n [style.background-color]=\"sum.color\"\n ></div>\n }\n } @else {\n @for (bar of bars(row); track bar.item.id) {\n @if (bar.isMilestone) {\n <div\n class=\"kpt-roadmap__milestone\"\n [attr.data-variant]=\"bar.variant\"\n [kptTooltip]=\"bar.title\"\n [attr.aria-label]=\"i18n.t('roadmap.milestone') + ': ' + bar.label\"\n [style.inset-inline-start.%]=\"bar.left\"\n [style.inset-block-start.px]=\"bar.top\"\n [style.inline-size.px]=\"bar.height\"\n [style.block-size.px]=\"bar.height\"\n [style.background-color]=\"bar.color\"\n tabindex=\"0\"\n (click)=\"onItemClick(bar.item)\"\n (keydown)=\"onItemKeydown($event, bar.item)\"\n ></div>\n } @else {\n <div\n class=\"kpt-roadmap__bar\"\n [attr.data-variant]=\"bar.variant\"\n [kptTooltip]=\"bar.title\"\n kptTooltipOnlyWhenTruncated\n [class.kpt-roadmap__bar--clipped-start]=\"bar.clippedStart\"\n [class.kpt-roadmap__bar--clipped-end]=\"bar.clippedEnd\"\n [class.kpt-roadmap__bar--disabled]=\"bar.item.source.disabled\"\n [style.inset-inline-start.%]=\"bar.left\"\n [style.inline-size.%]=\"bar.width\"\n [style.inset-block-start.px]=\"bar.top\"\n [style.block-size.px]=\"bar.height\"\n [style.background-color]=\"bar.color\"\n tabindex=\"0\"\n (click)=\"onItemClick(bar.item)\"\n (keydown)=\"onItemKeydown($event, bar.item)\"\n >\n @if (bar.progress !== null) {\n <span class=\"kpt-roadmap__bar-progress\" [style.inline-size.%]=\"bar.progress * 100\"></span>\n }\n <span class=\"kpt-roadmap__bar-label\">{{ bar.label }}</span>\n </div>\n }\n }\n }\n </div>\n </div>\n }\n </div>\n }\n</div>\n", styles: ["@layer kpt.components{.kpt-roadmap{display:block;--kpt-roadmap-cells: 1;--kpt-roadmap-cell-w: 76px;--kpt-roadmap-label-w: 14rem;--kpt-roadmap-track-w: calc(var(--kpt-roadmap-cell-w) * var(--kpt-roadmap-cells));color:var(--kpt-color-on-surface);font-family:var(--kpt-font-family-sans);background:var(--kpt-color-surface);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-lg, .75rem);overflow:hidden}.kpt-roadmap__scroll{overflow:auto;position:relative}.kpt-roadmap__head,.kpt-roadmap__row{display:grid;grid-template-columns:var(--kpt-roadmap-label-w) minmax(var(--kpt-roadmap-track-w),1fr);inline-size:max-content;min-inline-size:100%}.kpt-roadmap__head{position:sticky;inset-block-start:0;z-index:4;background:var(--kpt-color-surface-variant, var(--kpt-color-surface));border-block-end:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border)}.kpt-roadmap__head-label{position:sticky;inset-inline-start:0;z-index:5;background:var(--kpt-color-surface-variant, var(--kpt-color-surface));border-inline-end:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border)}.kpt-roadmap__head-track{position:relative;display:flex;flex-direction:column;min-inline-size:0}.kpt-roadmap__bands,.kpt-roadmap__cells,.kpt-roadmap__grid-cells{display:flex;inline-size:100%}.kpt-roadmap__band{position:relative;display:flex;align-items:center;justify-content:center;gap:var(--kpt-space-2, .5rem);min-inline-size:0;padding:var(--kpt-space-2, .5rem) var(--kpt-space-3, .75rem);font-size:var(--kpt-font-size-sm, .875rem);font-weight:var(--kpt-font-weight-medium, 500);color:var(--kpt-color-on-surface-muted);white-space:nowrap;overflow:hidden;border-inline-start:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border)}.kpt-roadmap__band:first-child{border-inline-start:0}.kpt-roadmap__band--year-start{border-inline-start:var(--kpt-border-width-medium, 2px) solid var(--kpt-color-border-strong)}.kpt-roadmap__band-label{overflow:hidden;text-overflow:ellipsis}.kpt-roadmap__band-sublabel{color:var(--kpt-color-text-subtle, var(--kpt-color-on-surface-muted))}.kpt-roadmap__year-badge{display:inline-flex;align-items:center;padding:.125rem var(--kpt-space-2, .5rem);font-size:var(--kpt-font-size-xs, .75rem);font-weight:var(--kpt-font-weight-semibold, 600);color:var(--kpt-color-surface);background:var(--kpt-color-on-surface);border-radius:var(--kpt-radius-full, 9999px)}.kpt-roadmap__cell{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.125rem;min-inline-size:0;padding:var(--kpt-space-2, .5rem) .25rem;text-align:center;white-space:nowrap;border-inline-start:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border)}.kpt-roadmap__cell:first-child{border-inline-start:0}.kpt-roadmap__cell-label{font-size:var(--kpt-font-size-xs, .75rem);font-weight:var(--kpt-font-weight-semibold, 600);letter-spacing:.02em;text-transform:uppercase;color:var(--kpt-color-on-surface-muted)}.kpt-roadmap__cell-sublabel{font-size:var(--kpt-font-size-xs, .75rem);color:var(--kpt-color-text-subtle, var(--kpt-color-on-surface-muted));overflow:hidden;text-overflow:ellipsis;inline-size:100%}.kpt-roadmap__cell--weekend{background:var(--kpt-color-surface-sunken, var(--kpt-color-muted))}.kpt-roadmap__cell--today .kpt-roadmap__cell-label{color:var(--kpt-color-primary)}.kpt-roadmap__cell--year-boundary,.kpt-roadmap__grid-cell--year-boundary{border-inline-start:var(--kpt-border-width-medium, 2px) solid var(--kpt-color-border-strong)}.kpt-roadmap__cell--gap-before,.kpt-roadmap__grid-cell--gap-before{border-inline-start:var(--kpt-border-width-thin, 1px) dashed var(--kpt-color-border-strong)}.kpt-roadmap__body{position:relative;inline-size:calc(var(--kpt-roadmap-label-w) + var(--kpt-roadmap-track-w));min-inline-size:100%}.kpt-roadmap__grid{position:absolute;inset-block:0;inset-inline-start:var(--kpt-roadmap-label-w);inset-inline-end:0;z-index:0;pointer-events:none}.kpt-roadmap__grid-cells{block-size:100%}.kpt-roadmap__grid-cell{min-inline-size:0;border-inline-start:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border)}.kpt-roadmap__grid-cell:first-child{border-inline-start:0}.kpt-roadmap__grid-cell--weekend,.kpt-roadmap__grid-cell--non-working{background:var(--kpt-color-surface-sunken, var(--kpt-color-muted))}.kpt-roadmap__today{position:absolute;inset-block:0;inline-size:0;border-inline-start:var(--kpt-border-width-medium, 2px) dashed color-mix(in oklch,var(--kpt-color-primary) 40%,transparent)}.kpt-roadmap__today-dot{position:absolute;inset-block-end:0rem;inline-size:.5rem;block-size:.5rem;transform:translate(-50%);background:color-mix(in oklch,var(--kpt-color-primary) 40%,transparent);border-radius:var(--kpt-radius-full, 9999px);pointer-events:none}.kpt-roadmap__links{position:absolute;inset-block-start:0;inset-inline-start:var(--kpt-roadmap-label-w);z-index:2;pointer-events:none;overflow:visible}.kpt-roadmap__link-path{fill:none;stroke:var(--kpt-color-on-surface-muted);stroke-width:1.75}.kpt-roadmap__link-arrow{fill:var(--kpt-color-on-surface-muted)}.kpt-roadmap__link--violated .kpt-roadmap__link-path{stroke:var(--kpt-color-danger);stroke-dasharray:4 3}.kpt-roadmap__link--violated .kpt-roadmap__link-arrow{fill:var(--kpt-color-danger)}.kpt-roadmap__row{position:absolute;inset-inline:0;border-block-end:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border)}.kpt-roadmap__row:hover{background:color-mix(in oklch,var(--kpt-color-primary) 10%,transparent)}.kpt-roadmap__row:hover .kpt-roadmap__label{background:color-mix(in oklab,var(--kpt-color-primary) 10%,var(--kpt-color-surface))}.kpt-roadmap__row--group,.kpt-roadmap__row--group .kpt-roadmap__label{background:var(--kpt-color-surface-variant, var(--kpt-color-surface))}.kpt-roadmap__row--group:hover,.kpt-roadmap__row--group:hover .kpt-roadmap__label{background:color-mix(in oklab,var(--kpt-color-primary) 10%,var(--kpt-color-surface-variant, var(--kpt-color-surface)))}.kpt-roadmap__label{position:sticky;inset-inline-start:0;z-index:3;display:flex;flex-direction:column;justify-content:center;gap:.125rem;min-inline-size:0;padding-inline-end:var(--kpt-space-3, .75rem);background:var(--kpt-color-surface);border-inline-end:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border)}.kpt-roadmap__label--group{justify-content:start;flex-direction:row;align-items:center;gap:var(--kpt-space-2, .5rem)}.kpt-roadmap__label-text{overflow:hidden;font-size:var(--kpt-font-size-sm, .875rem);font-weight:var(--kpt-font-weight-medium, 500);text-overflow:ellipsis;white-space:nowrap}.kpt-roadmap__label-text--group{font-weight:var(--kpt-font-weight-semibold, 600)}.kpt-roadmap__label-sub{overflow:hidden;font-size:var(--kpt-font-size-xs, .75rem);color:var(--kpt-color-on-surface-muted);text-overflow:ellipsis;white-space:nowrap}.kpt-roadmap__label-stack{display:flex;flex-direction:column;justify-content:center;gap:.125rem;min-inline-size:0}.kpt-roadmap__label-count{align-self:center;flex:0 0 auto;padding:0 var(--kpt-space-2, .5rem);font-size:var(--kpt-font-size-xs, .75rem);color:var(--kpt-color-on-surface-muted);background:var(--kpt-color-muted);border-radius:var(--kpt-radius-full, 9999px)}.kpt-roadmap__toggle{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;inline-size:1.25rem;block-size:1.25rem;padding:0;color:inherit;cursor:pointer;background:transparent;border:0;border-radius:var(--kpt-radius-sm, .25rem)}.kpt-roadmap__toggle:focus-visible{outline:var(--kpt-border-width-medium, 2px) solid var(--kpt-color-focus-ring);outline-offset:1px}.kpt-roadmap__toggle-icon{inline-size:0;block-size:0;border-block-start:.3rem solid transparent;border-block-end:.3rem solid transparent;border-inline-start:.4rem solid currentcolor;transition:transform var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-roadmap__toggle-icon--open{transform:rotate(90deg)}.kpt-roadmap__lane{position:relative;min-inline-size:0}.kpt-roadmap__bar,.kpt-roadmap__milestone,.kpt-roadmap__summary{--_color: var(--kpt-color-primary)}.kpt-roadmap__bar[data-variant=neutral],.kpt-roadmap__milestone[data-variant=neutral],.kpt-roadmap__summary[data-variant=neutral]{--_color: var(--kpt-color-muted)}.kpt-roadmap__bar[data-variant=success],.kpt-roadmap__milestone[data-variant=success],.kpt-roadmap__summary[data-variant=success]{--_color: var(--kpt-color-success)}.kpt-roadmap__bar[data-variant=danger],.kpt-roadmap__milestone[data-variant=danger],.kpt-roadmap__summary[data-variant=danger]{--_color: var(--kpt-color-danger)}.kpt-roadmap__bar[data-variant=warning],.kpt-roadmap__milestone[data-variant=warning],.kpt-roadmap__summary[data-variant=warning]{--_color: var(--kpt-color-warning)}.kpt-roadmap__bar[data-variant=info],.kpt-roadmap__milestone[data-variant=info],.kpt-roadmap__summary[data-variant=info]{--_color: var(--kpt-color-info)}.kpt-roadmap__bar{position:absolute;z-index:1;display:flex;align-items:center;min-inline-size:.25rem;padding-inline:var(--kpt-space-2, .5rem);overflow:hidden;cursor:pointer;background:var(--_color);border-radius:var(--kpt-radius-full, 9999px);transition:filter var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-roadmap__bar:hover{filter:brightness(1.08)}.kpt-roadmap__bar:focus-visible{outline:var(--kpt-border-width-medium, 2px) solid var(--kpt-color-focus-ring);outline-offset:2px}.kpt-roadmap__bar--disabled{cursor:default;opacity:.55}.kpt-roadmap__bar--clipped-start{border-start-start-radius:0;border-end-start-radius:0;clip-path:polygon(.5rem 0,100% 0,100% 100%,.5rem 100%,0 50%)}.kpt-roadmap__bar--clipped-end{border-start-end-radius:0;border-end-end-radius:0;clip-path:polygon(0 0,calc(100% - .5rem) 0,100% 50%,calc(100% - .5rem) 100%,0 100%)}.kpt-roadmap__bar--clipped-start.kpt-roadmap__bar--clipped-end{clip-path:polygon(.5rem 0,calc(100% - .5rem) 0,100% 50%,calc(100% - .5rem) 100%,.5rem 100%,0 50%)}.kpt-roadmap__bar-progress{position:absolute;inset-block:0;inset-inline-start:0;background:#00000038;pointer-events:none}.kpt-roadmap__bar-label{position:relative;overflow:hidden;font-size:var(--kpt-font-size-xs, .75rem);font-weight:var(--kpt-font-weight-medium, 500);color:var(--kpt-color-text-inverse, #fff);text-overflow:ellipsis;white-space:nowrap}.kpt-roadmap__bar[data-variant=neutral] .kpt-roadmap__bar-label{color:var(--kpt-color-on-muted)}.kpt-roadmap__milestone{position:absolute;z-index:1;cursor:pointer;background:var(--_color);transform:translate(-50%) rotate(45deg);border-radius:var(--kpt-radius-sm, .25rem)}.kpt-roadmap__milestone:focus-visible{outline:var(--kpt-border-width-medium, 2px) solid var(--kpt-color-focus-ring);outline-offset:2px}.kpt-roadmap__summary{position:absolute;inset-block-start:50%;z-index:1;block-size:.5rem;background:var(--_color);border-radius:var(--kpt-radius-full, 9999px);transform:translateY(-50%)}.kpt-roadmap__summary[data-variant=neutral]{--_color: var(--kpt-color-on-surface-muted)}.kpt-roadmap__empty{padding:var(--kpt-space-8, 2rem);color:var(--kpt-color-on-surface-muted);text-align:center}}\n"] }]
|
|
643
643
|
}], () => [], { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], scrollHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollHeight", required: false }] }], labelWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelWidth", required: false }] }], cellWidthPx: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellWidthPx", required: false }] }], showToday: [{ type: i0.Input, args: [{ isSignal: true, alias: "showToday", required: false }] }], virtual: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtual", required: false }] }], collapsedGroups: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsedGroups", required: false }] }, { type: i0.Output, args: ["collapsedGroupsChange"] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], rangeChange: [{ type: i0.Output, args: ["rangeChange"] }], scrollEl: [{ type: i0.ViewChild, args: ['scrollEl', { isSignal: true }] }], laneEl: [{ type: i0.ViewChild, args: ['laneMeasure', { isSignal: true }] }] }); })();
|
|
644
644
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptRoadmap, { className: "KptRoadmap", filePath: "lib/roadmap.component.ts", lineNumber: 101 }); })();
|
|
645
645
|
|