@konce-pt/angular 0.6.0 → 0.7.0

package/CHANGELOG.md

@@ -0,0 +1,68 @@
+# @konce-pt/angular
+
+## 0.7.0
+
+### Minor Changes
+
+- Nowy komponent `KptRoadmap` (`kpt-roadmap`) w subpathu `@konce-pt/angular/roadmap` — zadania na
+  poziomej osi czasu w widoku typu Gantt. Przyklejona kolumna etykiet i nagłówek osi, przewijanie
+  w obu osiach, opcjonalna stała wysokość. Zoom: rok / kwartał / miesiąc / tydzień / dzień / godzina,
+  z oknem godzin roboczych. Numeracja tygodni wg ISO 8601 wraz z realnym zakresem dat; zmiana roku
+  oznaczona mocniejszą linią i czarnym znacznikiem. Kolumny zachowują równą szerokość mimo zmiany
+  czasu i różnej długości miesięcy. Grupy zwijane z paskiem zbiorczym, kamienie milowe, zależności
+  FS/SS/FF/SF z wykrywaniem naruszeń, wirtualizacja wierszy. Rdzeń obliczeń jako pure TS — subpath
+  eksportuje `buildTimeline`, `buildRows`, `resolveLinks`, `autoRange` i pomocniki kalendarza ISO.
+  Nowe klucze i18n `roadmap.*` (EN + PL).
+- `KptTooltip`: nowe wejście `kptTooltipOnlyWhenTruncated` — dymek pojawia się wyłącznie wtedy, gdy
+  treść nie mieści się w elemencie i jest ucięta wielokropkiem. Przepełnienie sprawdzane jest przy
+  najechaniu (nie przy renderze), więc wynik pozostaje aktualny po zmianie szerokości czy powiększenia
+  bez użycia `ResizeObserver`. Pomiar obejmuje hosta i jego bezpośrednie dzieci, bo `text-overflow`
+  zwykle siedzi na wewnętrznym elemencie.
+- `KptTooltip`: dymek podąża za hostem przy przewijaniu zagnieżdżonych kontenerów — wcześniej
+  zostawał w miejscu, gdy host przesuwał się we własnym obszarze przewijania.
+
+## 0.6.1
+
+### Patch Changes
+
+- Wydanie porządkowe — wyrównanie wersji paczek. Bez zmian w API.
+
+## 0.6.0
+
+### Minor Changes
+
+- Nowy entry point `@konce-pt/angular/grid` z dyrektywami `[kptGrid]`, `[kptCol]` i `[kptFlex]`
+  (sygnałowe inputy, zoneless) oraz skrótem `KPT_GRID_IMPORTS`. Ustawiają custom properties
+  inline, więc zmiana rozpiętości nie dodaje ani nie usuwa klas w DOM. Wymaga arkusza
+  `@konce-pt/grid`.
+- `llms.txt` podpaczek `charts` i `grid` trafiają teraz do `dist` (wcześniej pomijane).
+
+### Patch Changes
+
+- Updated dependencies
+  - @konce-pt/tokens@0.6.0
+
+## 0.1.2
+
+### Patch Changes
+
+- Naprawa dokumentacji ładowania stylów: metodą główną dla Angular CLI jest `angular.json → styles[]`
+  (import '...css' w main.ts zostaje jako wariant dla Vite/webpack). Tokeny SCSS dostają mixiny
+  `kpt-root-tokens`/`kpt-dark-tokens` emitujące custom properties w runtime. Wejścia CSS dostają
+  warunek `types` + stub `.d.ts` (usuwa TS2882 w projektach z tsc). Bez zmian w API komponentów.
+
+## 0.1.1
+
+### Patch Changes
+
+- Dodano profesjonalne README (EN/PL) i plik LICENSE do każdej paczki oraz metadane npm
+  (repository/homepage/bugs/keywords). Bez zmian w API komponentów.
+
+## 0.1.0
+
+### Minor Changes
+
+- eecb506: Pierwsze wydanie Koncept UI: design tokeny (OKLCH, motyw jasny/ciemny), bazowy CSS,
+  oraz komponenty Angular 22 — layout (app-shell/toolbar/sidenav/card/divider), formularze
+  na Signal Forms (input/select/checkbox/radio/switch/datepicker/form-field), flagowa tabela
+  danych (kpt-data-table) z paginatorem, oraz feedback (alert/dialog/toast/tooltip).

package/README.md

@@ -93,40 +93,59 @@ import '@angular/cdk/overlay-prebuilt.css';
 
 ## Quick start
 
-A form powered by **Signal Forms** — no `ControlValueAccessor`, no `FormsModule`:
+A login form powered by **Signal Forms** — no `ControlValueAccessor`, no `FormsModule`:
 
 ```ts
-import { Component, signal } from '@angular/core';
-import { form, required, email, FormField } from '@angular/forms/signals';
-import { KptFormField, KptInput, KptSelect, KptButton } from '@konce-pt/angular';
+import { Component, computed, signal } from '@angular/core';
+import { FormField, FormRoot, email, form, required, submit } from '@angular/forms/signals';
+import { KptButton, KptFormField, KptInput } from '@konce-pt/angular';
 
 @Component({
   selector: 'app-login',
-  imports: [FormField, KptFormField, KptInput, KptSelect, KptButton],
+  imports: [FormRoot, FormField, KptFormField, KptInput, KptButton],
   template: `
-    <kpt-form-field label="E-mail" required>
-      <kpt-input [formField]="loginForm.email" type="email" placeholder="you@company.com" />
-    </kpt-form-field>
-
-    <kpt-form-field label="Role">
-      <kpt-select [formField]="loginForm.role" [options]="roles" placeholder="Pick a role…" />
-    </kpt-form-field>
-
-    <kpt-button (click)="submit()">Sign in</kpt-button>
+    <!-- formRoot sets novalidate, intercepts submit and calls submit() for you -->
+    <form [formRoot]="loginForm" (submit)="onSubmit()">
+      <kpt-form-field label="E-mail" [error]="emailError()" required controlId="f-email">
+        <kpt-input [formField]="loginForm.email" type="email" id="f-email" />
+      </kpt-form-field>
+
+      <kpt-form-field label="Password" [error]="passwordError()" required controlId="f-pass">
+        <kpt-input [formField]="loginForm.password" type="password" id="f-pass" />
+      </kpt-form-field>
+
+      <kpt-button type="submit" [disabled]="formInvalid()">Sign in</kpt-button>
+    </form>
   `,
 })
 export class Login {
-  readonly model = signal({ email: '', role: null as string | null });
+  readonly model = signal({ email: '', password: '' });
   readonly loginForm = form(this.model, (p) => {
-    required(p.email); email(p.email);
-    required(p.role);
+    required(p.email, { message: 'E-mail is required' });
+    email(p.email, { message: 'Enter a valid e-mail address' });
+    required(p.password, { message: 'Password is required' });
   });
-  readonly roles = [{ label: 'Admin', value: 'admin' }, { label: 'Editor', value: 'editor' }];
 
-  submit() { if (this.loginForm().valid()) console.log(this.model()); }
+  // Validators stay pure — only the *message* waits for the field to be touched.
+  private errorFor(name: 'email' | 'password'): string | null {
+    const s = this.loginForm[name]();
+    return s.touched() && s.invalid() ? s.errors()[0]?.message ?? null : null;
+  }
+  readonly emailError = computed(() => this.errorFor('email'));
+  readonly passwordError = computed(() => this.errorFor('password'));
+  readonly formInvalid = computed(() => this.loginForm().invalid());
+
+  async onSubmit(): Promise<void> {
+    // submit() marks the whole tree as touched before running the action
+    await submit(this.loginForm, { action: async () => { console.log(this.model()); } });
+  }
 }
 ```
 
+> Don't gate validators on UI state (`when: ({ state }) => state.touched()`) — it makes
+> `loginForm().valid()` return `true` on an untouched form. Koncept UI controls already show
+> the invalid state only once a field is touched.
+
 Data table with sorting, filtering, pagination and a custom cell template:
 
 ```html