npm package: @hegoatek/ui-angular
Description: HegoaTek UI - Angular component library
Author: HegoaTek
Latest version: 1.2.1

# @hegoatek/ui-angular

Bibliothèque de composants et services Angular réutilisables pour les projets HegoaTek.

## Installation

```bash
npm install @hegoatek/ui-angular
```

## Composants

### ButtonComponent

Bouton réutilisable avec variantes et états.

**Usage :**

```typescript
import { ButtonComponent } from '@hegoatek/ui-angular';

@Component({
  selector: 'app-example',
  standalone: true,
  imports: [ButtonComponent],
  template: `
    <hg-button variant="primary" (clicked)="handleClick($event)"> Click me </hg-button>

    <hg-button variant="secondary" size="lg" [disabled]="isDisabled"> Secondary </hg-button>

    <hg-button variant="danger" [loading]="isLoading" type="submit"> Delete </hg-button>
  `,
})
export class ExampleComponent {
  isDisabled = false;
  isLoading = false;

  handleClick(event: MouseEvent): void {
    console.log('Button clicked', event);
  }
}
```

**Propriétés :**

- `variant`: 'primary' | 'secondary' | 'danger' (défaut: 'primary')
- `size`: 'sm' | 'md' | 'lg' (défaut: 'md')
- `disabled`: boolean (défaut: false)
- `loading`: boolean (défaut: false)
- `type`: 'button' | 'submit' | 'reset' (défaut: 'button')

**Événements :**

- `clicked`: EventEmitter<MouseEvent>

---

### InputComponent

Input text avec support ControlValueAccessor, label et gestion d'erreurs.

**Usage :**

```typescript
import { InputComponent } from '@hegoatek/ui-angular';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-form',
  standalone: true,
  imports: [InputComponent, FormsModule],
  template: `
    <hg-input
      [(ngModel)]="email"
      name="email"
      type="email"
      label="Email"
      placeholder="user@example.com"
      [error]="emailError"
      [disabled]="isDisabled"
    />

    <hg-input
      [(ngModel)]="password"
      name="password"
      type="password"
      label="Password"
      [error]="passwordError"
    />
  `,
})
export class FormComponent {
  email = '';
  password = '';
  emailError: string | null = null;
  isDisabled = false;
}
```

**Propriétés :**

- `label`: string (optionnel)
- `type`: string (défaut: 'text')
- `placeholder`: string (optionnel)
- `error`: string | null (optionnel)
- `disabled`: boolean (défaut: false)
- `id`: string (généré automatiquement si non fourni)

**Implémente ControlValueAccessor** pour une intégration réactive formulaire.

---

### CardComponent

Conteneur de contenu avec styling cohérent.

**Usage :**

```typescript
import { CardComponent } from '@hegoatek/ui-angular';

@Component({
  selector: 'app-dashboard',
  standalone: true,
  imports: [CardComponent],
  template: `
    <hg-card>
      <h2>Card Title</h2>
      <p>Card content goes here.</p>
    </hg-card>

    <hg-card>
      <div class="card-header">
        <h3>User Profile</h3>
      </div>
      <div class="card-body">
        <!-- Content -->
      </div>
    </hg-card>
  `,
})
export class DashboardComponent {}
```

---

### ContainerComponent

Layout wrapper pour centrer et dimensionner le contenu.

**Usage :**

```typescript
import { ContainerComponent } from '@hegoatek/ui-angular';

@Component({
  selector: 'app-login',
  standalone: true,
  imports: [ContainerComponent],
  template: `
    <!-- Centré, largeur réduite -->
    <hg-container [centered]="true" [narrow]="true">
      <h1>Login</h1>
      <!-- Form content -->
    </hg-container>

    <!-- Full width -->
    <hg-container>
      <h2>Dashboard</h2>
      <!-- Dashboard content -->
    </hg-container>
  `,
})
export class LayoutComponent {}
```

**Propriétés :**

- `centered`: boolean (défaut: false) - Centre le contenu
- `narrow`: boolean (défaut: false) - Réduit la largeur maximale

---

## Services

### AuthService

Service centralisé d'authentification avec signaux Angular.

**Usage :**

```typescript
import { AuthService } from '@hegoatek/ui-angular';
import { inject } from '@angular/core';

@Component({
  selector: 'app-login',
  standalone: true,
  template: `
    <form (ngSubmit)="onSubmit()">
      <input [(ngModel)]="email" name="email" type="email" />
      <input [(ngModel)]="password" name="password" type="password" />

      @if (authService.error()) {
        <p class="error">{{ authService.error() }}</p>
      }

      <button [disabled]="authService.loading()">
        @if (authService.loading()) {
          Loading...
        } @else {
          Login
        }
      </button>
    </form>
  `,
})
export class LoginComponent {
  authService = inject(AuthService);
  email = '';
  password = '';

  async onSubmit(): Promise<void> {
    await this.authService.login({
      email: this.email,
      password: this.password,
    });
  }
}
```

**Signaux :**

- `isAuthenticated`: Signal<boolean> - État d'authentification
- `loading`: Signal<boolean> - État de chargement
- `error`: Signal<string | null> - Message d'erreur

**Méthodes :**

- `login(credentials: { email: string; password: string }): Promise<void>`
- `logout(): Promise<void>`
- `refreshToken(): Promise<void>`

**Configuration :**

La configuration peut être modifiée en fournissant le token `AUTH_CONFIG` :

```typescript
import { AUTH_CONFIG } from '@hegoatek/ui-angular';

providers: [
  {
    provide: AUTH_CONFIG,
    useValue: {
      apiUrl: 'https://api.example.com',
      tokenKey: 'auth_token',
      loginRedirect: '/dashboard',
      logoutRedirect: '/login',
    },
  },
];
```

---

### LocalStorageService

Service typé pour gérer le localStorage.

**Usage :**

```typescript
import { LocalStorageService } from '@hegoatek/ui-angular';
import { inject } from '@angular/core';

@Component({
  selector: 'app-preferences',
  standalone: true,
})
export class PreferencesComponent {
  storageService = inject(LocalStorageService);

  saveUserPreferences(): void {
    const preferences = {
      theme: 'dark',
      language: 'fr',
      notifications: true,
    };

    this.storageService.setItem('userPreferences', preferences);
  }

  loadUserPreferences(): void {
    const preferences = this.storageService.getItem('userPreferences');
    console.log(preferences);
  }

  clearPreferences(): void {
    this.storageService.removeItem('userPreferences');
  }
}
```

**Méthodes :**

- `setItem<T>(key: string, value: T): void` - Sauvegarde avec sérialisation JSON
- `getItem<T>(key: string): T | null` - Récupère avec désérialisation JSON
- `removeItem(key: string): void` - Supprime une clé
- `clear(): void` - Vide tout le localStorage

---

## Thèmes et Styles

Les composants utilisent des variables CSS pour le thème. Vous pouvez personnaliser l'apparence en définissant les variables CSS racine :

```css
:root {
  --hg-primary: #3b82f6;
  --hg-secondary: #6b7280;
  --hg-danger: #ef4444;
  --hg-border-radius: 0.5rem;
  --hg-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
```

---

## Exemple complet

```typescript
import { Component, inject } from '@angular/core';
import { FormsModule } from '@angular/forms';
import {
  AuthService,
  ButtonComponent,
  CardComponent,
  ContainerComponent,
  InputComponent,
} from '@hegoatek/ui-angular';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [FormsModule, ButtonComponent, CardComponent, ContainerComponent, InputComponent],
  template: `
    <hg-container [centered]="true" [narrow]="true">
      <hg-card>
        <h2>Welcome</h2>

        @if (authService.isAuthenticated()) {
          <p>You are logged in!</p>
          <hg-button variant="danger" (clicked)="handleLogout()"> Logout </hg-button>
        } @else {
          <form (ngSubmit)="handleLogin()">
            <hg-input
              [(ngModel)]="email"
              name="email"
              type="email"
              label="Email"
              [error]="authService.error()"
            />

            <hg-input [(ngModel)]="password" name="password" type="password" label="Password" />

            <hg-button
              type="submit"
              [loading]="authService.loading()"
              [disabled]="!email || !password"
            >
              Login
            </hg-button>
          </form>
        }
      </hg-card>
    </hg-container>
  `,
})
export class AppComponent {
  authService = inject(AuthService);
  email = '';
  password = '';

  async handleLogin(): Promise<void> {
    await this.authService.login({
      email: this.email,
      password: this.password,
    });
  }

  async handleLogout(): Promise<void> {
    await this.authService.logout();
  }
}
```

---

## Licence

MIT