npm package: @r.wilde/akzo-ui
Description: A comprehensive Angular UI component library with `redacted` design system and Material Design principles
Author: Remco de Wilde
Latest version: 1.0.0

# @remcodewilde/akzo-ui

A comprehensive Angular UI component library built with AkzoNobel design system and Material Design principles.

## 🚀 Quick Start

### Installation

```bash
npm install @r.wilde/akzo-ui
```

### Usage

#### Option 1: Standalone Components (Recommended)

```typescript
import { Component } from '@angular/core';
import { ButtonComponent, CardComponent, InputComponent } from '@r.wilde/akzo-ui';

@Component({
  selector: 'app-example',
  standalone: true,
  imports: [ButtonComponent, CardComponent, InputComponent],
  template: `
    <akzo-card>
      <akzo-input label="Email" placeholder="Enter email"></akzo-input>
      <akzo-button variant="primary">Submit</akzo-button>
    </akzo-card>
  `
})
export class ExampleComponent {}
```

#### Option 2: Module-based (Legacy Support)

```typescript
import { NgModule } from '@angular/core';
import { AkzoUiModule } from '@r.wilde/akzo-ui';

@NgModule({
  imports: [AkzoUiModule],
  // ...
})
export class AppModule {}
```

### Global Styles

Add the following to your `styles.scss` or `angular.json`:

```scss
@import '@r.wilde/akzo-ui/theme';
```

## 📋 Components

### Navigation
- **Navbar** - Responsive navigation bar with AkzoNobel branding

### Form Components
- **Button** - Multiple variants (primary, secondary, outline, text, danger)
- **Input** - Text inputs with validation and helper text
- **Select** - Dropdown selects with options

### Layout
- **Card** - Material-design cards with headers and actions
- **Card Components** - Header, title, subtitle, and actions

### Data Display
- **Table** - Sortable data tables with filtering

### Feedback
- **Dialog** - Accessible modals with animations

## 🎨 Design System

### Colors
- **Primary**: AkzoNobel Blue (#1446a0)
- **Secondary**: Orange accent colors
- **Neutral**: Comprehensive gray scale
- **Status**: Success, warning, error, info colors

### Typography
- Consistent font families and sizing
- Utility classes for text styling

### Spacing & Layout
- Design tokens for consistent spacing
- Flexbox and grid utilities

## 📖 Examples

### Button Component

```html
<!-- Basic usage -->
<akzo-button>Default Button</akzo-button>

<!-- Variants -->
<akzo-button variant="primary">Primary</akzo-button>
<akzo-button variant="secondary">Secondary</akzo-button>
<akzo-button variant="outline">Outline</akzo-button>
<akzo-button variant="text">Text</akzo-button>
<akzo-button variant="danger">Danger</akzo-button>

<!-- Sizes -->
<akzo-button size="small">Small</akzo-button>
<akzo-button size="medium">Medium</akzo-button>
<akzo-button size="large">Large</akzo-button>

<!-- States -->
<akzo-button [disabled]="true">Disabled</akzo-button>
<akzo-button [fullWidth]="true">Full Width</akzo-button>
```

### Card Component

```html
<akzo-card variant="elevated" [hasHeader]="true" [hasActions]="true">
  <akzo-card-header>
    <akzo-card-title>Card Title</akzo-card-title>
    <akzo-card-subtitle>Card Subtitle</akzo-card-subtitle>
  </akzo-card-header>
  
  <p>Card content goes here...</p>
  
  <akzo-card-actions>
    <akzo-button variant="text">Cancel</akzo-button>
    <akzo-button variant="primary">Save</akzo-button>
  </akzo-card-actions>
</akzo-card>
```

### Form Components

```html
<!-- Input -->
<akzo-input 
  label="Email Address"
  placeholder="Enter your email"
  type="email"
  [required]="true"
  helperText="We'll never share your email"
  error="This field is required">
</akzo-input>

<!-- Select -->
<akzo-select 
  label="Choose Option"
  placeholder="Select..."
  [options]="selectOptions">
</akzo-select>
```

### Table Component

```typescript
// Component
tableColumns = [
  { key: 'name', label: 'Name', sortable: true },
  { key: 'email', label: 'Email', sortable: true },
  { key: 'role', label: 'Role' }
];

tableData = [
  { name: 'John Doe', email: 'john@example.com', role: 'Developer' },
  { name: 'Jane Smith', email: 'jane@example.com', role: 'Designer' }
];
```

```html
<!-- Template -->
<akzo-table 
  [columns]="tableColumns"
  [data]="tableData"
  [striped]="true"
  [hoverable]="true">
</akzo-table>
```

### Dialog Component

```html
<akzo-button (click)="showDialog = true">Open Dialog</akzo-button>

<akzo-dialog 
  [open]="showDialog"
  title="Confirm Action"
  size="medium"
  [hasActionsContent]="true"
  (dialogClose)="showDialog = false">
  
  <p>Are you sure you want to perform this action?</p>
  
  <akzo-card-actions>
    <akzo-button variant="text" (click)="showDialog = false">Cancel</akzo-button>
    <akzo-button variant="primary" (click)="confirmAction()">Confirm</akzo-button>
  </akzo-card-actions>
</akzo-dialog>
```

## 🛠️ Development

### Prerequisites
- Node.js 16+
- Angular 17+

### Building the Library
```bash
ng build akzo-ui
```

### Running Tests
```bash
ng test akzo-ui
```

## 📝 License

MIT © Remco de Wilde

## 🤝 Contributing

Contributions are welcome! Please read our contributing guidelines and submit pull requests to our repository.

## 📞 Support

For support, please create an issue in our GitHub repository.