npm package: @reliability-design/angular
Description: Angular wrappers for Reliability Design web components
Author: Reliability Design Team
Latest version: 1.1.1

# @reliability-design/angular

Angular wrappers for Reliability Design web components.

## Installation

```bash
npm install @reliability-design/angular
```

## Usage

### Import the Module

```typescript
import { NgModule } from '@angular/core';
import { ReliabilityDesignModule } from '@reliability-design/angular';

@NgModule({
  imports: [ReliabilityDesignModule],
})
export class AppModule {}
```

For standalone components:

```typescript
import { Component } from '@angular/core';
import { RelButtonDirective, RelTextfieldDirective } from '@reliability-design/angular';

@Component({
  standalone: true,
  imports: [RelButtonDirective, RelTextfieldDirective],
  template: `
    <rel-textfield label="Username"></rel-textfield>
    <rel-button variant="primary">Submit</rel-button>
  `,
})
export class MyComponent {}
```

### Form Controls with Reactive Forms

All form control directives implement `ControlValueAccessor` for seamless integration with Angular forms:

```typescript
import { Component } from '@angular/core';
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
import { RelTextfieldDirective, RelCheckboxDirective } from '@reliability-design/angular';

@Component({
  standalone: true,
  imports: [ReactiveFormsModule, RelTextfieldDirective, RelCheckboxDirective],
  template: `
    <form [formGroup]="form">
      <rel-textfield formControlName="username" label="Username"></rel-textfield>
      <rel-checkbox formControlName="terms" label="Accept Terms"></rel-checkbox>
    </form>
  `,
})
export class FormComponent {
  form = new FormGroup({
    username: new FormControl(''),
    terms: new FormControl(false),
  });
}
```

### Form Controls with ngModel

```typescript
<rel-textfield [(ngModel)]="username" label="Username"></rel-textfield>
<rel-select [(ngModel)]="country" label="Country"></rel-select>
<rel-checkbox [(ngModel)]="accepted"></rel-checkbox>
<rel-radio [(ngModel)]="choice"></rel-radio>
<rel-switch [(ngModel)]="enabled"></rel-switch>
<rel-slider [(ngModel)]="volume" min="0" max="100"></rel-slider>
```

### Event-Driven Components

Components with custom events provide `@Output()` EventEmitters:

```typescript
import { Component } from '@angular/core';
import { RelTabDirective } from '@reliability-design/angular';

@Component({
  standalone: true,
  imports: [RelTabDirective],
  template: `
    <rel-tab (tabChange)="onTabChange($event)">
      <div slot="tab">Tab 1</div>
      <div slot="panel">Panel 1</div>
    </rel-tab>
  `,
})
export class TabsComponent {
  onTabChange(event: { index: number }) {
    console.log('Tab changed to:', event.index);
  }
}
```

## Component Categories

### Form Controls (6)
- `rel-textfield` - Text input with ControlValueAccessor
- `rel-select` - Select dropdown with ControlValueAccessor
- `rel-checkbox` - Checkbox with ControlValueAccessor
- `rel-radio` - Radio button with ControlValueAccessor
- `rel-switch` - Toggle switch with ControlValueAccessor
- `rel-slider` - Range slider with ControlValueAccessor

### Event-Driven Components (7)
- `rel-tab` - Tab navigation (@Output: tabChange)
- `rel-menu` - Menu with items (@Output: menuItemClick)
- `rel-accordion` - Expandable sections (@Output: toggle)
- `rel-chip` - Removable chips (@Output: removed)
- `rel-toast` - Toast notifications (@Output: dismissed, action)
- `rel-snackbar` - Snackbar messages (@Output: dismissed, action)
- `rel-stepper` - Step-by-step wizard (@Output: stepChange)

### Passive Components (13)
- `rel-button` - Button
- `rel-avatar` - User avatar
- `rel-badge` - Notification badge
- `rel-card` - Card container
- `rel-cardmedia` - Card media
- `rel-container` - Layout container
- `rel-divider` - Visual divider
- `rel-layout` - Flexbox layout
- `rel-progress` - Progress indicator
- `rel-breadcrumb` - Breadcrumb navigation
- `rel-alert` - Alert messages
- `rel-segmented-button` - Segmented button group
- `rel-tooltip` - Tooltip overlay

## Architecture

This package uses Angular **directives** (not components) that attach to the existing web component tags. This approach:

- Preserves web component behavior and styling
- Enables Angular forms integration via ControlValueAccessor
- Maps CustomEvents to Angular EventEmitters
- Works with both NgModule and standalone components
- Maintains Light DOM (no Shadow DOM conflicts)

## License

MIT