@kern-ux-annex/kern-angular-kit/README.md

Angular-Umsetzung der KERN UX-Standard Komponenten

# @kern-ux-annex/kern-angular-kit

[![Version](https://img.shields.io/npm/v/@kern-ux-annex/kern-angular-kit)](https://www.npmjs.com/package/@kern-ux-annex/kern-angular-kit)
[![License: EUPL-1.2](https://img.shields.io/badge/License-EUPL--1.2-blue.svg)](https://gitlab.opencode.de/kern-ux/community/angular-kit/-/blob/main/LICENSE.md)
[![TypeScript](https://img.shields.io/badge/TypeScript-5.8-blue)](https://www.typescriptlang.org/)
[![Angular](https://img.shields.io/badge/Angular-20.2-red.svg)](https://angular.io/)

Angular component library implementing the KERN Design System. This library provides a comprehensive set of accessible, reusable UI components following the KERN UX standards.

## 🚀 Features

- **🎨 KERN Design System** - Complete implementation of KERN UX components
- **📱 Modern Angular** - Built with Angular 20.2+ using signal APIs
- **♿ Accessibility First** - WCAG 2.1 AA compliant components
- **📝 Form Integration** - Full Angular Forms support (Template-driven & Reactive)
- **🔧 TypeScript Ready** - Full TypeScript support with comprehensive type definitions
- **📦 Tree Shakable** - Optimized bundle size with standalone components
- **🎯 Production Ready** - Thoroughly tested and CI/CD integrated
- **🔄 Signal-based** - Modern Angular patterns with InputSignal and OutputEmitterRef

## ⚡ Quick Start

```bash
npm install @kern-ux-annex/kern-angular-kit
```

### 🛠️ Usage

#### Import Components

```typescript
// Option 1: Import entire module
import { KernAngularKitModule } from '@kern-ux-annex/kern-angular-kit';

@NgModule({
  imports: [KernAngularKitModule]
})
export class AppModule {}

// Option 2: Import individual components (Recommended)
import { KernInputText, KernAlert } from '@kern-ux-annex/kern-angular-kit';

@Component({
  imports: [KernInputText, KernAlert],
  template: `...`
})
export class MyComponent {}
```

#### Basic Example

```html
<kern-input-text
  labelText="Full Name"
  hintText="Enter your first and last name"
>
</kern-input-text>

<kern-alert title="Success!" variant="success">
  Form submitted successfully!
</kern-alert>
```

## 🎨 CSS Dependencies

You'll need the KERN UX CSS framework:

```bash
npm install @kern-ux/native
```

Add to your `angular.json` or main CSS file:

```css
@import '@kern-ux/native/dist/kern.min.css';
@import '@kern-ux/native/dist/fonts/fira-sans.css';
```

## 🔧 Peer Dependencies

The library requires these Angular packages:

- `@angular/core`: ^20.2.3
- `@angular/common`: ^20.2.3
- `@angular/forms`: ^20.2.3
- `@angular/localize`: ^20.2.3

## 📄 Storybook Documentation

Explore all components interactively with our **Storybook documentation**

🔗 **[View Component Storybook](https://angular-kit-ca257b.usercontent.opencode.de/)**

The Storybook includes:

- **🎯 Interactive Examples** - Live component demonstrations with controls
- **📋 API Documentation** - Complete property and event documentation
- **🔧 Usage Examples** - Copy-paste ready code snippets

## 📄 License

EUPL-1.2

## 🤝 Contributing

This package is part of the KERN-UX community project. For more information, visit:
[https://gitlab.opencode.de/kern-ux/community/angular-kit](https://gitlab.opencode.de/kern-ux/community/angular-kit)