@life-cockpit/angular-ui-kit 1.10.0 → 1.11.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
|
@@ -1,6 +1,15 @@
|
|
|
1
1
|
# @life-cockpit/angular-ui-kit
|
|
2
2
|
|
|
3
|
-
Angular UI component library for the Life Cockpit Design System.
|
|
3
|
+
Angular UI component library for the **Life Cockpit Design System** — 60+ accessible, themeable Angular 21 standalone components with signal-based inputs, OnPush change detection, light/dark themes, and a full density token system (`compact` / `cosy` / `comfortable`).
|
|
4
|
+
|
|
5
|
+
## Resources
|
|
6
|
+
|
|
7
|
+
| | |
|
|
8
|
+
|---|---|
|
|
9
|
+
| 📖 **Live documentation & Storybook** | https://design.life-cockpit.de |
|
|
10
|
+
| 🤖 **MCP server for AI agents** | https://design.life-cockpit.de/mcp |
|
|
11
|
+
| 📦 **npm package** | https://www.npmjs.com/package/@life-cockpit/angular-ui-kit |
|
|
12
|
+
| 🐙 **Source code** | https://github.com/Life-Cockpit/lc-design-system |
|
|
4
13
|
|
|
5
14
|
## Installation
|
|
6
15
|
|
|
@@ -149,6 +158,34 @@ export class AppComponent {
|
|
|
149
158
|
}
|
|
150
159
|
```
|
|
151
160
|
|
|
161
|
+
## Branding (custom logo)
|
|
162
|
+
|
|
163
|
+
`lc-logo`, `lc-header` and `lc-sidenav` accept custom logo URLs so you can drop your own brand into the shell:
|
|
164
|
+
|
|
165
|
+
```html
|
|
166
|
+
<lc-header
|
|
167
|
+
title="Acme"
|
|
168
|
+
[logoSrc]="'/assets/acme-logo.svg'"
|
|
169
|
+
[logoEmblemSrc]="'/assets/acme-emblem.svg'"
|
|
170
|
+
[logoDarkSrc]="'/assets/acme-logo-dark.svg'"
|
|
171
|
+
logoAlt="Acme Inc."
|
|
172
|
+
/>
|
|
173
|
+
```
|
|
174
|
+
|
|
175
|
+
The built-in Life-Cockpit logos are loaded from `/assets/` by default. If your app serves static files from a different prefix, override the path via the `LC_LOGO_BASE_PATH` token:
|
|
176
|
+
|
|
177
|
+
```typescript
|
|
178
|
+
import { LC_LOGO_BASE_PATH } from '@life-cockpit/angular-ui-kit';
|
|
179
|
+
|
|
180
|
+
bootstrapApplication(AppComponent, {
|
|
181
|
+
providers: [
|
|
182
|
+
{ provide: LC_LOGO_BASE_PATH, useValue: '/static/lc' },
|
|
183
|
+
],
|
|
184
|
+
});
|
|
185
|
+
```
|
|
186
|
+
|
|
187
|
+
Or copy the assets from `node_modules/@life-cockpit/angular-ui-kit/assets/` to your app's public `/assets/` folder (e.g. via the `assets` array in `angular.json`).
|
|
188
|
+
|
|
152
189
|
## Chat with Rich Content
|
|
153
190
|
|
|
154
191
|
The Chat component supports custom message templates for embedding any component inside chat bubbles:
|
|
@@ -189,6 +226,63 @@ Design tokens for colors, spacing, typography, elevation, and more are available
|
|
|
189
226
|
import { ColorTokens, SpacingTokens } from '@life-cockpit/angular-ui-kit';
|
|
190
227
|
```
|
|
191
228
|
|
|
229
|
+
### Density
|
|
230
|
+
|
|
231
|
+
All components react to a density token cascade. Set the density on any ancestor element (or `<html>`) and every descendant component adapts paddings, gaps and font sizes:
|
|
232
|
+
|
|
233
|
+
```html
|
|
234
|
+
<div data-density="compact"> <!-- 'compact' | 'cosy' (default) | 'comfortable' -->
|
|
235
|
+
<lc-card>...</lc-card>
|
|
236
|
+
</div>
|
|
237
|
+
```
|
|
238
|
+
|
|
239
|
+
See the *Design Tokens → Density* section on https://design.life-cockpit.de for the full token reference.
|
|
240
|
+
|
|
241
|
+
## MCP Server for AI Agents
|
|
242
|
+
|
|
243
|
+
The design system ships with a hosted **Model Context Protocol** server that lets AI coding agents (Copilot, Claude, Cursor, etc.) discover components, props, variants and usage examples without hallucinating.
|
|
244
|
+
|
|
245
|
+
**Endpoint:** `https://design.life-cockpit.de/mcp`
|
|
246
|
+
|
|
247
|
+
### VS Code / GitHub Copilot
|
|
248
|
+
|
|
249
|
+
Add to your `.vscode/mcp.json` (or workspace `settings.json`):
|
|
250
|
+
|
|
251
|
+
```json
|
|
252
|
+
{
|
|
253
|
+
"servers": {
|
|
254
|
+
"lc-design-sys": {
|
|
255
|
+
"type": "http",
|
|
256
|
+
"url": "https://design.life-cockpit.de/mcp"
|
|
257
|
+
}
|
|
258
|
+
}
|
|
259
|
+
}
|
|
260
|
+
```
|
|
261
|
+
|
|
262
|
+
### Claude Desktop / Cursor
|
|
263
|
+
|
|
264
|
+
```json
|
|
265
|
+
{
|
|
266
|
+
"mcpServers": {
|
|
267
|
+
"lc-design-sys": {
|
|
268
|
+
"url": "https://design.life-cockpit.de/mcp"
|
|
269
|
+
}
|
|
270
|
+
}
|
|
271
|
+
}
|
|
272
|
+
```
|
|
273
|
+
|
|
274
|
+
### Available tools
|
|
275
|
+
|
|
276
|
+
| Tool | Description |
|
|
277
|
+
|---|---|
|
|
278
|
+
| `list-all-documentation` | Lists every component and docs page with its IDs |
|
|
279
|
+
| `search_component` | Finds a component by name and returns full docs in one call |
|
|
280
|
+
| `get-documentation` | Returns props, variants, usage examples and stories for a given ID |
|
|
281
|
+
| `get-documentation-for-story` | Retrieves docs for a specific Storybook story variant |
|
|
282
|
+
| `get_changelog` | Returns the changelog for the latest releases |
|
|
283
|
+
|
|
284
|
+
With the MCP server connected, your agent will *never invent props or variants* — it always grounds answers in the published component documentation.
|
|
285
|
+
|
|
192
286
|
## Development
|
|
193
287
|
|
|
194
288
|
```bash
|