@konce-pt/angular 0.1.1 → 0.2.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 +54 -22
- package/dist/README.md +54 -22
- package/dist/fesm2022/konce-pt-angular.mjs +2 -2
- package/dist/fesm2022/konce-pt-angular.mjs.map +1 -1
- package/dist/package.json +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -42,25 +42,43 @@ Peer dependencies: `@angular/core`, `@angular/common`, `@angular/forms`, `@angul
|
|
|
42
42
|
|
|
43
43
|
## Setup
|
|
44
44
|
|
|
45
|
-
|
|
45
|
+
### Angular CLI (recommended)
|
|
46
|
+
|
|
47
|
+
Add the design tokens, base styles and — if you use overlay components — the CDK overlay CSS to the **`styles`** array in `angular.json`. **Order matters:** tokens first, your own `src/styles.scss` **last** so your overrides win the cascade.
|
|
48
|
+
|
|
49
|
+
```jsonc
|
|
50
|
+
// angular.json → projects.<app>.architect.build.options
|
|
51
|
+
"styles": [
|
|
52
|
+
"node_modules/@konce-pt/tokens/dist/css/tokens.css",
|
|
53
|
+
"node_modules/@konce-pt/tokens/dist/css/tokens.dark.css",
|
|
54
|
+
"node_modules/@konce-pt/styles/index.css",
|
|
55
|
+
"node_modules/@angular/cdk/overlay-prebuilt.css",
|
|
56
|
+
"src/styles.scss"
|
|
57
|
+
]
|
|
58
|
+
```
|
|
46
59
|
|
|
47
|
-
|
|
48
|
-
import '@konce-pt/tokens/css';
|
|
49
|
-
import '@konce-pt/tokens/css/dark';
|
|
50
|
-
import '@konce-pt/styles';
|
|
51
|
-
import '@angular/cdk/overlay-prebuilt.css'; // for select, datepicker, menu, popover, drawer…
|
|
60
|
+
Zoneless bootstrap (Angular 22) lives in your app config — no CSS imports in `main.ts`:
|
|
52
61
|
|
|
62
|
+
```ts
|
|
53
63
|
import { provideZonelessChangeDetection } from '@angular/core';
|
|
54
|
-
|
|
55
|
-
import { App } from './app';
|
|
56
|
-
|
|
57
|
-
bootstrapApplication(App, {
|
|
58
|
-
providers: [provideZonelessChangeDetection()],
|
|
59
|
-
});
|
|
64
|
+
// providers: [provideZonelessChangeDetection(), /* provideKptTablerIcons() */]
|
|
60
65
|
```
|
|
61
66
|
|
|
62
67
|
Dark theme: set `<html data-theme="dark">` (or rely on `prefers-color-scheme`).
|
|
63
68
|
|
|
69
|
+
> **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.
|
|
70
|
+
|
|
71
|
+
### Other bundlers (Vite / webpack)
|
|
72
|
+
|
|
73
|
+
Non-Angular-CLI bundlers can import the CSS directly (this is how the Koncept UI playground works):
|
|
74
|
+
|
|
75
|
+
```ts
|
|
76
|
+
import '@konce-pt/tokens/css';
|
|
77
|
+
import '@konce-pt/tokens/css/dark';
|
|
78
|
+
import '@konce-pt/styles';
|
|
79
|
+
import '@angular/cdk/overlay-prebuilt.css';
|
|
80
|
+
```
|
|
81
|
+
|
|
64
82
|
## Quick start
|
|
65
83
|
|
|
66
84
|
A form powered by **Signal Forms** — no `ControlValueAccessor`, no `FormsModule`:
|
|
@@ -123,13 +141,20 @@ Every component ships an `llms.txt` API sheet next to its source for quick refer
|
|
|
123
141
|
|
|
124
142
|
## Theming
|
|
125
143
|
|
|
126
|
-
All visuals are driven by `var(--kpt-*)` tokens (three tiers: primitives → semantic → component).
|
|
144
|
+
All visuals are driven by `var(--kpt-*)` tokens (three tiers: primitives → semantic → component). Override them in your **`src/styles.scss`** (it's last in `styles[]`, so it wins the cascade):
|
|
127
145
|
|
|
128
|
-
```
|
|
129
|
-
:root {
|
|
130
|
-
|
|
146
|
+
```scss
|
|
147
|
+
:root {
|
|
148
|
+
--kpt-color-primary: oklch(0.55 0.2 265); /* rebrand in one line */
|
|
149
|
+
--kpt-color-primary-hover: oklch(0.5 0.2 265);
|
|
150
|
+
}
|
|
151
|
+
:root[data-theme='dark'] {
|
|
152
|
+
--kpt-color-primary: oklch(0.7 0.16 265);
|
|
153
|
+
}
|
|
131
154
|
```
|
|
132
155
|
|
|
156
|
+
**Common token names:** surfaces `--kpt-color-surface`, `--kpt-color-surface-sunken|raised|variant`; text `--kpt-color-on-surface`, `--kpt-color-on-surface-muted`; borders `--kpt-color-border`, `--kpt-color-border-strong`; radii `--kpt-radius-sm|md|lg|xl|full|none`; elevation `--kpt-elevation-1..4`. (There is **no** `--kpt-color-text`, `--kpt-color-bg` or `--kpt-shadow-*`.)
|
|
157
|
+
|
|
133
158
|
## Icons
|
|
134
159
|
|
|
135
160
|
A built-in set is bundled. For the full **Tabler Icons** set (MIT), opt in via the secondary entry point:
|
|
@@ -174,14 +199,21 @@ npm i @konce-pt/angular @konce-pt/tokens @konce-pt/styles
|
|
|
174
199
|
|
|
175
200
|
### Konfiguracja
|
|
176
201
|
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
202
|
+
**Angular CLI (zalecane)** — dodaj CSS do tablicy **`styles`** w `angular.json`; kolejność ważna, `src/styles.scss` **na końcu**:
|
|
203
|
+
|
|
204
|
+
```jsonc
|
|
205
|
+
"styles": [
|
|
206
|
+
"node_modules/@konce-pt/tokens/dist/css/tokens.css",
|
|
207
|
+
"node_modules/@konce-pt/tokens/dist/css/tokens.dark.css",
|
|
208
|
+
"node_modules/@konce-pt/styles/index.css",
|
|
209
|
+
"node_modules/@angular/cdk/overlay-prebuilt.css",
|
|
210
|
+
"src/styles.scss"
|
|
211
|
+
]
|
|
182
212
|
```
|
|
183
213
|
|
|
184
|
-
|
|
214
|
+
> 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).
|
|
215
|
+
|
|
216
|
+
Motyw ciemny: `<html data-theme="dark">`; nadpisania `--kpt-color-*` w `styles.scss`. Pełny zestaw ikon Tabler: `provideKptTablerIcons()` z `@konce-pt/angular/icons`.
|
|
185
217
|
|
|
186
218
|
### Komponenty (70+)
|
|
187
219
|
|
package/dist/README.md
CHANGED
|
@@ -42,25 +42,43 @@ Peer dependencies: `@angular/core`, `@angular/common`, `@angular/forms`, `@angul
|
|
|
42
42
|
|
|
43
43
|
## Setup
|
|
44
44
|
|
|
45
|
-
|
|
45
|
+
### Angular CLI (recommended)
|
|
46
|
+
|
|
47
|
+
Add the design tokens, base styles and — if you use overlay components — the CDK overlay CSS to the **`styles`** array in `angular.json`. **Order matters:** tokens first, your own `src/styles.scss` **last** so your overrides win the cascade.
|
|
48
|
+
|
|
49
|
+
```jsonc
|
|
50
|
+
// angular.json → projects.<app>.architect.build.options
|
|
51
|
+
"styles": [
|
|
52
|
+
"node_modules/@konce-pt/tokens/dist/css/tokens.css",
|
|
53
|
+
"node_modules/@konce-pt/tokens/dist/css/tokens.dark.css",
|
|
54
|
+
"node_modules/@konce-pt/styles/index.css",
|
|
55
|
+
"node_modules/@angular/cdk/overlay-prebuilt.css",
|
|
56
|
+
"src/styles.scss"
|
|
57
|
+
]
|
|
58
|
+
```
|
|
46
59
|
|
|
47
|
-
|
|
48
|
-
import '@konce-pt/tokens/css';
|
|
49
|
-
import '@konce-pt/tokens/css/dark';
|
|
50
|
-
import '@konce-pt/styles';
|
|
51
|
-
import '@angular/cdk/overlay-prebuilt.css'; // for select, datepicker, menu, popover, drawer…
|
|
60
|
+
Zoneless bootstrap (Angular 22) lives in your app config — no CSS imports in `main.ts`:
|
|
52
61
|
|
|
62
|
+
```ts
|
|
53
63
|
import { provideZonelessChangeDetection } from '@angular/core';
|
|
54
|
-
|
|
55
|
-
import { App } from './app';
|
|
56
|
-
|
|
57
|
-
bootstrapApplication(App, {
|
|
58
|
-
providers: [provideZonelessChangeDetection()],
|
|
59
|
-
});
|
|
64
|
+
// providers: [provideZonelessChangeDetection(), /* provideKptTablerIcons() */]
|
|
60
65
|
```
|
|
61
66
|
|
|
62
67
|
Dark theme: set `<html data-theme="dark">` (or rely on `prefers-color-scheme`).
|
|
63
68
|
|
|
69
|
+
> **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.
|
|
70
|
+
|
|
71
|
+
### Other bundlers (Vite / webpack)
|
|
72
|
+
|
|
73
|
+
Non-Angular-CLI bundlers can import the CSS directly (this is how the Koncept UI playground works):
|
|
74
|
+
|
|
75
|
+
```ts
|
|
76
|
+
import '@konce-pt/tokens/css';
|
|
77
|
+
import '@konce-pt/tokens/css/dark';
|
|
78
|
+
import '@konce-pt/styles';
|
|
79
|
+
import '@angular/cdk/overlay-prebuilt.css';
|
|
80
|
+
```
|
|
81
|
+
|
|
64
82
|
## Quick start
|
|
65
83
|
|
|
66
84
|
A form powered by **Signal Forms** — no `ControlValueAccessor`, no `FormsModule`:
|
|
@@ -123,13 +141,20 @@ Every component ships an `llms.txt` API sheet next to its source for quick refer
|
|
|
123
141
|
|
|
124
142
|
## Theming
|
|
125
143
|
|
|
126
|
-
All visuals are driven by `var(--kpt-*)` tokens (three tiers: primitives → semantic → component).
|
|
144
|
+
All visuals are driven by `var(--kpt-*)` tokens (three tiers: primitives → semantic → component). Override them in your **`src/styles.scss`** (it's last in `styles[]`, so it wins the cascade):
|
|
127
145
|
|
|
128
|
-
```
|
|
129
|
-
:root {
|
|
130
|
-
|
|
146
|
+
```scss
|
|
147
|
+
:root {
|
|
148
|
+
--kpt-color-primary: oklch(0.55 0.2 265); /* rebrand in one line */
|
|
149
|
+
--kpt-color-primary-hover: oklch(0.5 0.2 265);
|
|
150
|
+
}
|
|
151
|
+
:root[data-theme='dark'] {
|
|
152
|
+
--kpt-color-primary: oklch(0.7 0.16 265);
|
|
153
|
+
}
|
|
131
154
|
```
|
|
132
155
|
|
|
156
|
+
**Common token names:** surfaces `--kpt-color-surface`, `--kpt-color-surface-sunken|raised|variant`; text `--kpt-color-on-surface`, `--kpt-color-on-surface-muted`; borders `--kpt-color-border`, `--kpt-color-border-strong`; radii `--kpt-radius-sm|md|lg|xl|full|none`; elevation `--kpt-elevation-1..4`. (There is **no** `--kpt-color-text`, `--kpt-color-bg` or `--kpt-shadow-*`.)
|
|
157
|
+
|
|
133
158
|
## Icons
|
|
134
159
|
|
|
135
160
|
A built-in set is bundled. For the full **Tabler Icons** set (MIT), opt in via the secondary entry point:
|
|
@@ -174,14 +199,21 @@ npm i @konce-pt/angular @konce-pt/tokens @konce-pt/styles
|
|
|
174
199
|
|
|
175
200
|
### Konfiguracja
|
|
176
201
|
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
202
|
+
**Angular CLI (zalecane)** — dodaj CSS do tablicy **`styles`** w `angular.json`; kolejność ważna, `src/styles.scss` **na końcu**:
|
|
203
|
+
|
|
204
|
+
```jsonc
|
|
205
|
+
"styles": [
|
|
206
|
+
"node_modules/@konce-pt/tokens/dist/css/tokens.css",
|
|
207
|
+
"node_modules/@konce-pt/tokens/dist/css/tokens.dark.css",
|
|
208
|
+
"node_modules/@konce-pt/styles/index.css",
|
|
209
|
+
"node_modules/@angular/cdk/overlay-prebuilt.css",
|
|
210
|
+
"src/styles.scss"
|
|
211
|
+
]
|
|
182
212
|
```
|
|
183
213
|
|
|
184
|
-
|
|
214
|
+
> 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).
|
|
215
|
+
|
|
216
|
+
Motyw ciemny: `<html data-theme="dark">`; nadpisania `--kpt-color-*` w `styles.scss`. Pełny zestaw ikon Tabler: `provideKptTablerIcons()` z `@konce-pt/angular/icons`.
|
|
185
217
|
|
|
186
218
|
### Komponenty (70+)
|
|
187
219
|
|
|
@@ -2785,7 +2785,7 @@ class KptAppShell {
|
|
|
2785
2785
|
}
|
|
2786
2786
|
}
|
|
2787
2787
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: KptAppShell, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2788
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: KptAppShell, isStandalone: true, selector: "kpt-app-shell", inputs: { sidenavOpen: { classPropertyName: "sidenavOpen", publicName: "sidenavOpen", isSignal: true, isRequired: false, transformFunction: null }, sidenavMode: { classPropertyName: "sidenavMode", publicName: "sidenavMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sidenavOpen: "sidenavOpenChange" }, host: { properties: { "attr.data-sidenav-mode": "sidenavMode()", "class.kpt-app-shell--nav-open": "sidenavOpen()" }, classAttribute: "kpt-app-shell" }, ngImport: i0, template: "<ng-content select=\"[kptShellToolbar]\" />\n\n<div class=\"kpt-app-shell__body\">\n <aside class=\"kpt-app-shell__sidenav\">\n <ng-content select=\"[kptShellSidenav]\" />\n </aside>\n\n @if (sidenavMode() === 'over' && sidenavOpen()) {\n <div class=\"kpt-app-shell__scrim\" (click)=\"onScrimClick()\"></div>\n }\n\n <main class=\"kpt-app-shell__content\">\n <ng-content />\n </main>\n</div>\n", styles: ["@layer kpt.components{.kpt-app-shell{display:flex;flex-direction:column;
|
|
2788
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: KptAppShell, isStandalone: true, selector: "kpt-app-shell", inputs: { sidenavOpen: { classPropertyName: "sidenavOpen", publicName: "sidenavOpen", isSignal: true, isRequired: false, transformFunction: null }, sidenavMode: { classPropertyName: "sidenavMode", publicName: "sidenavMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sidenavOpen: "sidenavOpenChange" }, host: { properties: { "attr.data-sidenav-mode": "sidenavMode()", "class.kpt-app-shell--nav-open": "sidenavOpen()" }, classAttribute: "kpt-app-shell" }, ngImport: i0, template: "<ng-content select=\"[kptShellToolbar]\" />\n\n<div class=\"kpt-app-shell__body\">\n <aside class=\"kpt-app-shell__sidenav\">\n <ng-content select=\"[kptShellSidenav]\" />\n </aside>\n\n @if (sidenavMode() === 'over' && sidenavOpen()) {\n <div class=\"kpt-app-shell__scrim\" (click)=\"onScrimClick()\"></div>\n }\n\n <main class=\"kpt-app-shell__content\">\n <ng-content />\n </main>\n</div>\n", styles: ["@layer kpt.components{.kpt-app-shell{display:flex;flex-direction:column;height:100vh}.kpt-app-shell__body{position:relative;flex:1;display:flex;min-height:0}.kpt-app-shell__sidenav{width:var(--kpt-sidenav-width, 16rem);flex-shrink:0;min-height:0;overflow-y:auto;transition:margin-inline-start var(--kpt-motion-duration-base, .2s) var(--kpt-motion-easing-standard),transform var(--kpt-motion-duration-base, .2s) var(--kpt-motion-easing-standard)}.kpt-app-shell__content{flex:1;min-width:0;overflow:auto}.kpt-app-shell__scrim{position:absolute;inset:0;background:var(--kpt-color-overlay-scrim);z-index:calc(var(--kpt-z-overlay, 1100) - 1)}.kpt-app-shell[data-sidenav-mode=side]:not(.kpt-app-shell--nav-open) .kpt-app-shell__sidenav{margin-inline-start:calc(-1 * var(--kpt-sidenav-width, 16rem))}.kpt-app-shell[data-sidenav-mode=over] .kpt-app-shell__sidenav{position:absolute;inset-block:0;inset-inline-start:0;z-index:var(--kpt-z-overlay, 1100);box-shadow:var(--kpt-elevation-3)}.kpt-app-shell[data-sidenav-mode=over]:not(.kpt-app-shell--nav-open) .kpt-app-shell__sidenav{transform:translate(-100%)}@media(prefers-reduced-motion:reduce){.kpt-app-shell__sidenav{transition:none}}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
2789
2789
|
}
|
|
2790
2790
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: KptAppShell, decorators: [{
|
|
2791
2791
|
type: Component,
|
|
@@ -2793,7 +2793,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
|
|
|
2793
2793
|
class: 'kpt-app-shell',
|
|
2794
2794
|
'[attr.data-sidenav-mode]': 'sidenavMode()',
|
|
2795
2795
|
'[class.kpt-app-shell--nav-open]': 'sidenavOpen()',
|
|
2796
|
-
}, template: "<ng-content select=\"[kptShellToolbar]\" />\n\n<div class=\"kpt-app-shell__body\">\n <aside class=\"kpt-app-shell__sidenav\">\n <ng-content select=\"[kptShellSidenav]\" />\n </aside>\n\n @if (sidenavMode() === 'over' && sidenavOpen()) {\n <div class=\"kpt-app-shell__scrim\" (click)=\"onScrimClick()\"></div>\n }\n\n <main class=\"kpt-app-shell__content\">\n <ng-content />\n </main>\n</div>\n", styles: ["@layer kpt.components{.kpt-app-shell{display:flex;flex-direction:column;
|
|
2796
|
+
}, template: "<ng-content select=\"[kptShellToolbar]\" />\n\n<div class=\"kpt-app-shell__body\">\n <aside class=\"kpt-app-shell__sidenav\">\n <ng-content select=\"[kptShellSidenav]\" />\n </aside>\n\n @if (sidenavMode() === 'over' && sidenavOpen()) {\n <div class=\"kpt-app-shell__scrim\" (click)=\"onScrimClick()\"></div>\n }\n\n <main class=\"kpt-app-shell__content\">\n <ng-content />\n </main>\n</div>\n", styles: ["@layer kpt.components{.kpt-app-shell{display:flex;flex-direction:column;height:100vh}.kpt-app-shell__body{position:relative;flex:1;display:flex;min-height:0}.kpt-app-shell__sidenav{width:var(--kpt-sidenav-width, 16rem);flex-shrink:0;min-height:0;overflow-y:auto;transition:margin-inline-start var(--kpt-motion-duration-base, .2s) var(--kpt-motion-easing-standard),transform var(--kpt-motion-duration-base, .2s) var(--kpt-motion-easing-standard)}.kpt-app-shell__content{flex:1;min-width:0;overflow:auto}.kpt-app-shell__scrim{position:absolute;inset:0;background:var(--kpt-color-overlay-scrim);z-index:calc(var(--kpt-z-overlay, 1100) - 1)}.kpt-app-shell[data-sidenav-mode=side]:not(.kpt-app-shell--nav-open) .kpt-app-shell__sidenav{margin-inline-start:calc(-1 * var(--kpt-sidenav-width, 16rem))}.kpt-app-shell[data-sidenav-mode=over] .kpt-app-shell__sidenav{position:absolute;inset-block:0;inset-inline-start:0;z-index:var(--kpt-z-overlay, 1100);box-shadow:var(--kpt-elevation-3)}.kpt-app-shell[data-sidenav-mode=over]:not(.kpt-app-shell--nav-open) .kpt-app-shell__sidenav{transform:translate(-100%)}@media(prefers-reduced-motion:reduce){.kpt-app-shell__sidenav{transition:none}}}\n"] }]
|
|
2797
2797
|
}], propDecorators: { sidenavOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidenavOpen", required: false }] }, { type: i0.Output, args: ["sidenavOpenChange"] }], sidenavMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidenavMode", required: false }] }] } });
|
|
2798
2798
|
|
|
2799
2799
|
/**
|