@kern-ux-annex/kern-angular-kit 0.3.6 → 0.3.7

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.
Files changed (5) hide show
  1. package/README.md +71 -30
  2. package/fesm2022/kern-ux-annex-kern-angular-kit.mjs +1053 -467
  3. package/fesm2022/kern-ux-annex-kern-angular-kit.mjs.map +1 -1
  4. package/index.d.ts +398 -126
  5. package/package.json +3 -2
package/README.md CHANGED
@@ -1,54 +1,95 @@
1
- # KernAngularKit
1
+ # @kern-ux-annex/kern-angular-kit
2
2
 
3
- This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 20.1.0.
3
+ [![Version](https://img.shields.io/npm/v/@kern-ux-annex/kern-angular-kit)](https://www.npmjs.com/package/@kern-ux-annex/kern-angular-kit)
4
+ [![License: EUPL-1.2](https://img.shields.io/badge/License-EUPL--1.2-blue.svg)](LICENSE.md)
5
+ [![TypeScript](https://img.shields.io/badge/TypeScript-5.8-blue)](https://www.typescriptlang.org/)
6
+ [![Angular](https://img.shields.io/badge/Angular-20.1-red.svg)](https://angular.io/)
4
7
 
5
- ## Code scaffolding
8
+ Angular component library implementing the KERN Design System. This library provides a comprehensive set of accessible, reusable UI components following the KERN UX standards.
6
9
 
7
- Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
10
+ ## 🚀 Features
8
11
 
9
- ```bash
10
- ng generate component component-name
11
- ```
12
+ - **🎨 KERN Design System** - Complete implementation of KERN UX components
13
+ - **📱 Modern Angular** - Built with Angular 20.1+ using InputSignal patterns
14
+ - **♿ Accessibility First** - WCAG 2.1 AA compliant components
15
+ - **📝 Form Integration** - Full Angular Forms support (Template-driven & Reactive)
16
+ - **🔧 TypeScript Ready** - Full TypeScript support with comprehensive type definitions
17
+ - **📦 Tree Shakable** - Optimized bundle size with standalone components
18
+ - **🎯 Production Ready** - Thoroughly tested and CI/CD integrated
19
+ - **🔄 Signal-based** - Modern Angular patterns with InputSignal and OutputEmitterRef
12
20
 
13
- For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
21
+ ## ⚡ Quick Start
14
22
 
15
23
  ```bash
16
- ng generate --help
24
+ npm install @kern-ux-annex/kern-angular-kit
17
25
  ```
18
26
 
19
- ## Building
27
+ ### 🛠️ Usage
20
28
 
21
- To build the library, run:
29
+ #### Import Components
22
30
 
23
- ```bash
24
- ng build kern-angular-kit
25
- ```
31
+ ```typescript
32
+ // Option 1: Import entire module
33
+ import { KernAngularKitModule } from '@kern-ux-annex/kern-angular-kit';
26
34
 
27
- This command will compile your project, and the build artifacts will be placed in the `dist/` directory.
35
+ @NgModule({
36
+ imports: [KernAngularKitModule]
37
+ })
38
+ export class AppModule {}
28
39
 
29
- ### Publishing the Library
40
+ // Option 2: Import individual components (Recommended)
41
+ import { KernInputText, KernAlert } from '@kern-ux-annex/kern-angular-kit';
30
42
 
31
- Once the project is built, you can publish your library by following these steps:
43
+ @Component({
44
+ imports: [KernInputText, KernAlert],
45
+ template: `...`
46
+ })
47
+ export class MyComponent {}
48
+ ```
32
49
 
33
- 1. Navigate to the `dist` directory:
50
+ #### Basic Example
34
51
 
35
- ```bash
36
- cd dist/kern-angular-kit
37
- ```
52
+ ```html
53
+ <kern-input-text
54
+ labelText="Full Name"
55
+ hintText="Enter your first and last name"
56
+ >
57
+ </kern-input-text>
38
58
 
39
- 2. Run the `npm publish` command to publish your library to the npm registry:
40
- ```bash
41
- npm publish
42
- ```
59
+ <kern-alert title="Success!" variant="success">
60
+ Form submitted successfully!
61
+ </kern-alert>
62
+ ```
43
63
 
44
- ## Running unit tests
64
+ ## 🎨 CSS Dependencies
45
65
 
46
- To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
66
+ You'll need the KERN UX CSS framework:
47
67
 
48
68
  ```bash
49
- ng test
69
+ npm install @kern-ux/native
70
+ ```
71
+
72
+ Add to your `angular.json` or main CSS file:
73
+
74
+ ```css
75
+ @import '@kern-ux/native/dist/kern.min.css';
76
+ @import '@kern-ux/native/dist/fonts/fira-sans.css';
50
77
  ```
51
78
 
52
- ## Additional Resources
79
+ ## 🔧 Peer Dependencies
80
+
81
+ The library requires these Angular packages:
82
+
83
+ - `@angular/core`: ^20.1.0
84
+ - `@angular/common`: ^20.1.0
85
+ - `@angular/forms`: ^20.1.0
86
+ - `@angular/localize`: ^20.1.0
87
+
88
+ ## 📄 License
89
+
90
+ EUPL-1.2
91
+
92
+ ## 🤝 Contributing
53
93
 
54
- For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
94
+ This package is part of the KERN-UX community project. For more information, visit:
95
+ [https://gitlab.opencode.de/kern-ux/community/angular-kit](https://gitlab.opencode.de/kern-ux/community/angular-kit)