@konce-pt/angular 0.4.0 → 0.5.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/README.md
CHANGED
|
@@ -37,11 +37,11 @@
|
|
|
37
37
|
## Installation
|
|
38
38
|
|
|
39
39
|
```bash
|
|
40
|
-
npm i @konce-pt/angular @konce-pt/tokens @konce-pt/styles
|
|
40
|
+
npm i @konce-pt/angular @konce-pt/tokens @konce-pt/styles @angular/cdk
|
|
41
41
|
# or: pnpm add / yarn add
|
|
42
42
|
```
|
|
43
43
|
|
|
44
|
-
|
|
44
|
+
`@angular/core`, `@angular/common` and `@angular/forms` (all `^22`) are already in an Angular app; **`@angular/cdk` (`^22`) is a required peer** — overlay components (select, autocomplete, datepicker, date-range, dialog, drawer, tooltip, popover, menu…) build on the CDK Overlay — so install it explicitly (above). Optional: `@konce-pt/validators` for the Polish-market validators (NIP, REGON, PESEL, IBAN, postal code).
|
|
45
45
|
|
|
46
46
|
## Setup
|
|
47
47
|
|
|
@@ -64,9 +64,18 @@ Zoneless bootstrap (Angular 22) lives in your app config — no CSS imports in `
|
|
|
64
64
|
|
|
65
65
|
```ts
|
|
66
66
|
import { provideZonelessChangeDetection } from '@angular/core';
|
|
67
|
-
//
|
|
67
|
+
// import { provideKptI18n } from '@konce-pt/angular';
|
|
68
|
+
// import { provideKptTablerIcons } from '@konce-pt/angular/icons';
|
|
69
|
+
|
|
70
|
+
providers: [
|
|
71
|
+
provideZonelessChangeDetection(), // required (zoneless)
|
|
72
|
+
// provideKptI18n({ locale: 'pl' }), // optional — UI is English by default; set for Polish/other
|
|
73
|
+
// provideKptTablerIcons(), // optional — full Tabler icon set
|
|
74
|
+
]
|
|
68
75
|
```
|
|
69
76
|
|
|
77
|
+
The UI language defaults to **English** and works with **zero config** — `provideKptI18n(...)` is optional and only needed for Polish (or a custom language). See [Internationalization](#internationalization-i18n) below.
|
|
78
|
+
|
|
70
79
|
Dark theme: set `<html data-theme="dark">` (or rely on `prefers-color-scheme`).
|
|
71
80
|
|
|
72
81
|
> **Why not `import '…css'` in `main.ts`?** Angular CLI (`@angular/build`) turns side-effect CSS imports into a separate stylesheet that isn't linked from `index.html`, so the app builds **without styles**. Use `angular.json → styles[]` instead.
|
|
@@ -169,11 +178,11 @@ import { provideKptTablerIcons } from '@konce-pt/angular/icons';
|
|
|
169
178
|
|
|
170
179
|
## Internationalization (i18n)
|
|
171
180
|
|
|
172
|
-
Component labels ship in **English (default)** and **Polish**. All user-facing strings — aria-labels, empty states, paginator, calendars, rich-text menus — read from
|
|
181
|
+
Component labels ship in **English (default)** and **Polish**. The `KptI18n` service is `providedIn: 'root'`, so **English works out of the box with no provider**. Call `provideKptI18n(...)` only to start in Polish (or another language), or to register/override dictionaries. All user-facing strings — aria-labels, empty states, paginator, calendars, rich-text menus — read from this signal-based service, so switching locale updates the UI instantly (zoneless-friendly).
|
|
173
182
|
|
|
174
183
|
```ts
|
|
175
184
|
import { provideKptI18n } from '@konce-pt/angular';
|
|
176
|
-
// providers: [provideKptI18n({ locale: 'pl' })] // Polish UI
|
|
185
|
+
// providers: [provideKptI18n({ locale: 'pl' })] // optional — Polish UI (EN is the default)
|
|
177
186
|
```
|
|
178
187
|
|
|
179
188
|
Switch at runtime:
|
|
@@ -232,9 +241,11 @@ Calendar weekday/month names come from the browser's `Intl` API for the active l
|
|
|
232
241
|
### Instalacja
|
|
233
242
|
|
|
234
243
|
```bash
|
|
235
|
-
npm i @konce-pt/angular @konce-pt/tokens @konce-pt/styles
|
|
244
|
+
npm i @konce-pt/angular @konce-pt/tokens @konce-pt/styles @angular/cdk
|
|
236
245
|
```
|
|
237
246
|
|
|
247
|
+
`@angular/core`, `@angular/common` i `@angular/forms` (`^22`) są już w aplikacji Angulara; **`@angular/cdk` (`^22`) to wymagany peer** — komponenty overlay (select, autocomplete, datepicker, date-range, dialog, drawer, tooltip, popover, menu…) bazują na CDK Overlay — więc instaluj go jawnie (powyżej). Opcjonalnie: `@konce-pt/validators` (walidatory PL: NIP, REGON, PESEL, IBAN, kod pocztowy).
|
|
248
|
+
|
|
238
249
|
### Konfiguracja
|
|
239
250
|
|
|
240
251
|
**Angular CLI (zalecane)** — dodaj CSS do tablicy **`styles`** w `angular.json`; kolejność ważna, `src/styles.scss` **na końcu**:
|
|
@@ -251,15 +262,31 @@ npm i @konce-pt/angular @konce-pt/tokens @konce-pt/styles
|
|
|
251
262
|
|
|
252
263
|
> W Angular CLI **nie** używaj `import '…css'` w `main.ts` — bundler wrzuca taki CSS do osobnego, niepodlinkowanego arkusza i aplikacja jest bez stylów. Dla **Vite/webpack** import w `main.ts` działa (tak robi playground).
|
|
253
264
|
|
|
265
|
+
Zoneless bootstrap (Angular 22) w konfiguracji aplikacji — bez importów CSS w `main.ts`:
|
|
266
|
+
|
|
267
|
+
```ts
|
|
268
|
+
import { provideZonelessChangeDetection } from '@angular/core';
|
|
269
|
+
// import { provideKptI18n } from '@konce-pt/angular';
|
|
270
|
+
// import { provideKptTablerIcons } from '@konce-pt/angular/icons';
|
|
271
|
+
|
|
272
|
+
providers: [
|
|
273
|
+
provideZonelessChangeDetection(), // wymagane (zoneless)
|
|
274
|
+
// provideKptI18n({ locale: 'pl' }), // opcjonalne — UI domyślnie po angielsku; ustaw dla PL/innego
|
|
275
|
+
// provideKptTablerIcons(), // opcjonalne — pełny zestaw Tabler
|
|
276
|
+
]
|
|
277
|
+
```
|
|
278
|
+
|
|
279
|
+
Język UI to domyślnie **angielski** i działa **bez żadnej konfiguracji** — `provideKptI18n(...)` jest opcjonalny, potrzebny tylko dla polskiego (lub własnego języka); szczegóły w sekcji i18n niżej.
|
|
280
|
+
|
|
254
281
|
Motyw ciemny: `<html data-theme="dark">`; nadpisania `--kpt-color-*` w `styles.scss`. Pełny zestaw ikon Tabler: `provideKptTablerIcons()` z `@konce-pt/angular/icons`.
|
|
255
282
|
|
|
256
283
|
### Internacjonalizacja (i18n)
|
|
257
284
|
|
|
258
|
-
Etykiety komponentów są dostępne po **angielsku (domyślnie)** i **polsku**. Wszystkie napisy (aria-label, stany puste, paginator, kalendarze, menu edytora) pochodzą z serwisu opartego o sygnały — zmiana języka odświeża UI natychmiast (zoneless).
|
|
285
|
+
Etykiety komponentów są dostępne po **angielsku (domyślnie)** i **polsku**. Serwis `KptI18n` jest `providedIn: 'root'`, więc **angielski działa od razu, bez providera**. `provideKptI18n(...)` wołasz tylko, by wystartować po polsku (lub w innym języku) albo zarejestrować/nadpisać słowniki. Wszystkie napisy (aria-label, stany puste, paginator, kalendarze, menu edytora) pochodzą z tego serwisu opartego o sygnały — zmiana języka odświeża UI natychmiast (zoneless).
|
|
259
286
|
|
|
260
287
|
```ts
|
|
261
288
|
import { provideKptI18n } from '@konce-pt/angular';
|
|
262
|
-
// providers: [provideKptI18n({ locale: 'pl' })] // polski interfejs
|
|
289
|
+
// providers: [provideKptI18n({ locale: 'pl' })] // opcjonalne — polski interfejs (EN domyślnie)
|
|
263
290
|
```
|
|
264
291
|
|
|
265
292
|
Przełączanie w runtime: `inject(KptI18n).setLocale('en')`.
|
package/dist/README.md
CHANGED
|
@@ -37,11 +37,11 @@
|
|
|
37
37
|
## Installation
|
|
38
38
|
|
|
39
39
|
```bash
|
|
40
|
-
npm i @konce-pt/angular @konce-pt/tokens @konce-pt/styles
|
|
40
|
+
npm i @konce-pt/angular @konce-pt/tokens @konce-pt/styles @angular/cdk
|
|
41
41
|
# or: pnpm add / yarn add
|
|
42
42
|
```
|
|
43
43
|
|
|
44
|
-
|
|
44
|
+
`@angular/core`, `@angular/common` and `@angular/forms` (all `^22`) are already in an Angular app; **`@angular/cdk` (`^22`) is a required peer** — overlay components (select, autocomplete, datepicker, date-range, dialog, drawer, tooltip, popover, menu…) build on the CDK Overlay — so install it explicitly (above). Optional: `@konce-pt/validators` for the Polish-market validators (NIP, REGON, PESEL, IBAN, postal code).
|
|
45
45
|
|
|
46
46
|
## Setup
|
|
47
47
|
|
|
@@ -64,9 +64,18 @@ Zoneless bootstrap (Angular 22) lives in your app config — no CSS imports in `
|
|
|
64
64
|
|
|
65
65
|
```ts
|
|
66
66
|
import { provideZonelessChangeDetection } from '@angular/core';
|
|
67
|
-
//
|
|
67
|
+
// import { provideKptI18n } from '@konce-pt/angular';
|
|
68
|
+
// import { provideKptTablerIcons } from '@konce-pt/angular/icons';
|
|
69
|
+
|
|
70
|
+
providers: [
|
|
71
|
+
provideZonelessChangeDetection(), // required (zoneless)
|
|
72
|
+
// provideKptI18n({ locale: 'pl' }), // optional — UI is English by default; set for Polish/other
|
|
73
|
+
// provideKptTablerIcons(), // optional — full Tabler icon set
|
|
74
|
+
]
|
|
68
75
|
```
|
|
69
76
|
|
|
77
|
+
The UI language defaults to **English** and works with **zero config** — `provideKptI18n(...)` is optional and only needed for Polish (or a custom language). See [Internationalization](#internationalization-i18n) below.
|
|
78
|
+
|
|
70
79
|
Dark theme: set `<html data-theme="dark">` (or rely on `prefers-color-scheme`).
|
|
71
80
|
|
|
72
81
|
> **Why not `import '…css'` in `main.ts`?** Angular CLI (`@angular/build`) turns side-effect CSS imports into a separate stylesheet that isn't linked from `index.html`, so the app builds **without styles**. Use `angular.json → styles[]` instead.
|
|
@@ -169,11 +178,11 @@ import { provideKptTablerIcons } from '@konce-pt/angular/icons';
|
|
|
169
178
|
|
|
170
179
|
## Internationalization (i18n)
|
|
171
180
|
|
|
172
|
-
Component labels ship in **English (default)** and **Polish**. All user-facing strings — aria-labels, empty states, paginator, calendars, rich-text menus — read from
|
|
181
|
+
Component labels ship in **English (default)** and **Polish**. The `KptI18n` service is `providedIn: 'root'`, so **English works out of the box with no provider**. Call `provideKptI18n(...)` only to start in Polish (or another language), or to register/override dictionaries. All user-facing strings — aria-labels, empty states, paginator, calendars, rich-text menus — read from this signal-based service, so switching locale updates the UI instantly (zoneless-friendly).
|
|
173
182
|
|
|
174
183
|
```ts
|
|
175
184
|
import { provideKptI18n } from '@konce-pt/angular';
|
|
176
|
-
// providers: [provideKptI18n({ locale: 'pl' })] // Polish UI
|
|
185
|
+
// providers: [provideKptI18n({ locale: 'pl' })] // optional — Polish UI (EN is the default)
|
|
177
186
|
```
|
|
178
187
|
|
|
179
188
|
Switch at runtime:
|
|
@@ -232,9 +241,11 @@ Calendar weekday/month names come from the browser's `Intl` API for the active l
|
|
|
232
241
|
### Instalacja
|
|
233
242
|
|
|
234
243
|
```bash
|
|
235
|
-
npm i @konce-pt/angular @konce-pt/tokens @konce-pt/styles
|
|
244
|
+
npm i @konce-pt/angular @konce-pt/tokens @konce-pt/styles @angular/cdk
|
|
236
245
|
```
|
|
237
246
|
|
|
247
|
+
`@angular/core`, `@angular/common` i `@angular/forms` (`^22`) są już w aplikacji Angulara; **`@angular/cdk` (`^22`) to wymagany peer** — komponenty overlay (select, autocomplete, datepicker, date-range, dialog, drawer, tooltip, popover, menu…) bazują na CDK Overlay — więc instaluj go jawnie (powyżej). Opcjonalnie: `@konce-pt/validators` (walidatory PL: NIP, REGON, PESEL, IBAN, kod pocztowy).
|
|
248
|
+
|
|
238
249
|
### Konfiguracja
|
|
239
250
|
|
|
240
251
|
**Angular CLI (zalecane)** — dodaj CSS do tablicy **`styles`** w `angular.json`; kolejność ważna, `src/styles.scss` **na końcu**:
|
|
@@ -251,15 +262,31 @@ npm i @konce-pt/angular @konce-pt/tokens @konce-pt/styles
|
|
|
251
262
|
|
|
252
263
|
> W Angular CLI **nie** używaj `import '…css'` w `main.ts` — bundler wrzuca taki CSS do osobnego, niepodlinkowanego arkusza i aplikacja jest bez stylów. Dla **Vite/webpack** import w `main.ts` działa (tak robi playground).
|
|
253
264
|
|
|
265
|
+
Zoneless bootstrap (Angular 22) w konfiguracji aplikacji — bez importów CSS w `main.ts`:
|
|
266
|
+
|
|
267
|
+
```ts
|
|
268
|
+
import { provideZonelessChangeDetection } from '@angular/core';
|
|
269
|
+
// import { provideKptI18n } from '@konce-pt/angular';
|
|
270
|
+
// import { provideKptTablerIcons } from '@konce-pt/angular/icons';
|
|
271
|
+
|
|
272
|
+
providers: [
|
|
273
|
+
provideZonelessChangeDetection(), // wymagane (zoneless)
|
|
274
|
+
// provideKptI18n({ locale: 'pl' }), // opcjonalne — UI domyślnie po angielsku; ustaw dla PL/innego
|
|
275
|
+
// provideKptTablerIcons(), // opcjonalne — pełny zestaw Tabler
|
|
276
|
+
]
|
|
277
|
+
```
|
|
278
|
+
|
|
279
|
+
Język UI to domyślnie **angielski** i działa **bez żadnej konfiguracji** — `provideKptI18n(...)` jest opcjonalny, potrzebny tylko dla polskiego (lub własnego języka); szczegóły w sekcji i18n niżej.
|
|
280
|
+
|
|
254
281
|
Motyw ciemny: `<html data-theme="dark">`; nadpisania `--kpt-color-*` w `styles.scss`. Pełny zestaw ikon Tabler: `provideKptTablerIcons()` z `@konce-pt/angular/icons`.
|
|
255
282
|
|
|
256
283
|
### Internacjonalizacja (i18n)
|
|
257
284
|
|
|
258
|
-
Etykiety komponentów są dostępne po **angielsku (domyślnie)** i **polsku**. Wszystkie napisy (aria-label, stany puste, paginator, kalendarze, menu edytora) pochodzą z serwisu opartego o sygnały — zmiana języka odświeża UI natychmiast (zoneless).
|
|
285
|
+
Etykiety komponentów są dostępne po **angielsku (domyślnie)** i **polsku**. Serwis `KptI18n` jest `providedIn: 'root'`, więc **angielski działa od razu, bez providera**. `provideKptI18n(...)` wołasz tylko, by wystartować po polsku (lub w innym języku) albo zarejestrować/nadpisać słowniki. Wszystkie napisy (aria-label, stany puste, paginator, kalendarze, menu edytora) pochodzą z tego serwisu opartego o sygnały — zmiana języka odświeża UI natychmiast (zoneless).
|
|
259
286
|
|
|
260
287
|
```ts
|
|
261
288
|
import { provideKptI18n } from '@konce-pt/angular';
|
|
262
|
-
// providers: [provideKptI18n({ locale: 'pl' })] // polski interfejs
|
|
289
|
+
// providers: [provideKptI18n({ locale: 'pl' })] // opcjonalne — polski interfejs (EN domyślnie)
|
|
263
290
|
```
|
|
264
291
|
|
|
265
292
|
Przełączanie w runtime: `inject(KptI18n).setLocale('en')`.
|