@suntelecoms/ngx-dynamic-form 1.1.0

package/README.md

@@ -0,0 +1,950 @@
+# @suntelecoms/ngx-dynamic-form
+
+> Génère des formulaires Angular complexes à partir d'une configuration TypeScript — sans écrire une ligne de template HTML. Inclut un Form Builder visuel, la gestion des schémas sauvegardés et un système de stockage interchangeable (localStorage / API REST).
+
+[![Angular](https://img.shields.io/badge/Angular-19-red?logo=angular)](https://angular.dev)
+[![Angular Material](https://img.shields.io/badge/Angular_Material-19-blue?logo=material-design)](https://material.angular.io)
+[![Version](https://img.shields.io/badge/version-1.1.0-brightgreen)](CHANGELOG.md)
+[![License](https://img.shields.io/badge/License-MIT-green)](LICENSE)
+[![Author](https://img.shields.io/badge/Author-Amadou%20Diallo-purple)](mailto:amadoumacbookpro38@gmail.com)
+
+---
+
+## Sommaire
+
+- [Présentation](#présentation)
+- [Fonctionnalités](#fonctionnalités)
+- [Installation](#installation)
+- [Démarrage rapide — formulaire statique](#démarrage-rapide--formulaire-statique)
+- [Démarrage rapide — stack complète](#démarrage-rapide--stack-complète)
+- [Types de champs](#types-de-champs)
+- [Configuration — DynamicFormConfig](#configuration--dynamicformconfig)
+- [Propriétés d'un champ — DynamicFormField](#propriétés-dun-champ--dynamicformfield)
+- [Validation](#validation)
+- [Affichage conditionnel — showWhen](#affichage-conditionnel--showwhen)
+- [Icônes (Material Icons)](#icônes-material-icons)
+- [Disposition en grille (col)](#disposition-en-grille-col)
+- [API du composant DynamicForm](#api-du-composant-dynamicform)
+- [provideNgxForms — configuration globale](#providengxforms--configuration-globale)
+- [FormConfigService — gestion des schémas](#formconfigservice--gestion-des-schémas)
+- [Stockage — LocalStorage vs API REST](#stockage--localstorage-vs-api-rest)
+- [Form Builder — éditeur visuel](#form-builder--éditeur-visuel)
+- [Composants de navigation](#composants-de-navigation)
+- [Intégration dans un composant](#intégration-dans-un-composant)
+- [Pages de démonstration](#pages-de-démonstration)
+- [Exemples complets](#exemples-complets)
+- [Personnalisation CSS](#personnalisation-css)
+- [Interfaces TypeScript](#interfaces-typescript)
+- [Auteur](#auteur)
+
+---
+
+## Présentation
+
+**@suntelecoms/ngx-dynamic-form** est un plugin Angular 19 qui génère des formulaires réactifs dynamiquement à partir d'un objet de configuration TypeScript. Il s'appuie sur **Angular Reactive Forms** et **Angular Material**.
+
+Depuis la **v1.1.0**, le plugin embarque directement :
+- Le **Form Builder visuel** (`<ngx-form-builder>`)
+- Le **gestionnaire de formulaires** (`<ngx-mes-formulaires>`)
+- La **page de rendu par ID** (`<ngx-form-loader>`)
+- Un **système de stockage abstrait** (localStorage par défaut, API REST Spring en option)
+
+Résultat : dans n'importe quel projet Angular, il suffit de **2 lignes** pour avoir une interface complète de paramétrage de formulaires.
+
+---
+
+## Fonctionnalités
+
+- **16 types de champs** — `text`, `email`, `password`, `number`, `tel`, `url`, `date`, `textarea`, `select`, `multiselect`, `radio`, `checkbox`, `file`, `hidden`, `divider`, `heading`
+- **Floating label** Angular Material (`mat-form-field appearance="outline"`)
+- **Validation déclarative** — `required`, `email`, `minLength`, `maxLength`, `min`, `max`, `pattern`, validateur personnalisé
+- **Messages d'erreur personnalisés** par champ
+- **Affichage conditionnel** (`showWhen`) avec 7 opérateurs
+- **Conditions multiples** (logique AND)
+- **Grille 12 colonnes** — propriété `col`
+- **Icônes Material Icons** — préfixe et suffixe par champ
+- **Préremplissage** via `[initialValues]`
+- **Mode lecture seule / désactivé** par champ
+- **Sections et séparateurs** (`heading`, `divider`)
+- **API publique** — `getForm()`, `patchValues()` via `@ViewChild`
+- **Événements** — `formSubmit`, `formChange`, `formReset`
+- **Form Builder visuel** — interface 3 panneaux intégrée dans le plugin
+- **Stockage abstrait** — localStorage (v1.1.0) ou API REST Spring (v1.1.0)
+- **FormConfigService** — Signal-based, Observable API
+
+---
+
+## Installation
+
+### 1. Prérequis
+
+- Angular **19+**
+- Node.js **18+**
+
+### 2. Installer les dépendances
+
+```bash
+npm install @suntelecoms/ngx-dynamic-form @angular/material@^19.0.0 @angular/cdk@^19.0.0
+```
+
+### 3. Ajouter le thème Material et les icônes
+
+**angular.json :**
+```json
+"styles": [
+  "@angular/material/prebuilt-themes/azure-blue.css",
+  "src/styles.css"
+]
+```
+
+**index.html :**
+```html
+<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
+```
+
+### 4. Configurer le plugin (app.config.ts)
+
+```typescript
+import { ApplicationConfig } from '@angular/core';
+import { provideRouter } from '@angular/router';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { provideNgxForms } from '@suntelecoms/ngx-dynamic-form';
+import { routes } from './app.routes';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideRouter(routes),
+    provideAnimations(),
+    provideNgxForms({ storage: 'local' }),  // ← stockage localStorage
+  ],
+};
+```
+
+### 5. Ajouter les routes (app.routes.ts)
+
+```typescript
+import { Routes } from '@angular/router';
+
+export const routes: Routes = [
+  // ... vos routes
+  {
+    path: 'builder',
+    loadComponent: () => import('@suntelecoms/ngx-dynamic-form').then(m => m.FormBuilderComponent),
+  },
+  {
+    path: 'mes-formulaires',
+    loadComponent: () => import('@suntelecoms/ngx-dynamic-form').then(m => m.MesFormulairesComponent),
+  },
+  {
+    path: 'form/:id',
+    loadComponent: () => import('@suntelecoms/ngx-dynamic-form').then(m => m.FormLoaderComponent),
+  },
+];
+```
+
+**C'est tout.** Aucun code supplémentaire à écrire — le Builder, la liste des formulaires et la page de rendu sont entièrement fournis par le plugin.
+
+---
+
+## Démarrage rapide — formulaire statique
+
+Utilisez `<ngx-dynamic-form>` directement avec une config TypeScript :
+
+```typescript
+import { Component } from '@angular/core';
+import { DynamicFormComponent } from '@suntelecoms/ngx-dynamic-form';
+import type { DynamicFormConfig, DynamicFormSubmitEvent } from '@suntelecoms/ngx-dynamic-form';
+
+@Component({
+  selector: 'app-contact',
+  standalone: true,
+  imports: [DynamicFormComponent],
+  template: `
+    <ngx-dynamic-form [config]="config" (formSubmit)="onSubmit($event)" />
+  `,
+})
+export class ContactComponent {
+  config: DynamicFormConfig = {
+    submitLabel: 'Envoyer',
+    showReset: true,
+    fields: [
+      { key: 'name',  type: 'text',  label: 'Nom complet', col: 6, icon: 'person',
+        validation: { required: true } },
+      { key: 'email', type: 'email', label: 'E-mail',      col: 6, icon: 'email',
+        validation: { required: true, email: true } },
+      { key: 'message', type: 'textarea', label: 'Message', rows: 5,
+        validation: { required: true } },
+    ],
+  };
+
+  onSubmit(event: DynamicFormSubmitEvent): void {
+    console.log(event.value);
+  }
+}
+```
+
+---
+
+## Démarrage rapide — stack complète
+
+Pour disposer du **Form Builder + gestionnaire + rendu par URL** dans votre application, il suffit des 2 fichiers de configuration vus à l'installation. Après `ng serve` :
+
+| URL | Page |
+|---|---|
+| `/builder` | Interface graphique de création de formulaires |
+| `/mes-formulaires` | Liste des formulaires sauvegardés, avec rendu à la volée |
+| `/form/abc123` | Rendu d'un formulaire sauvegardé par son ID |
+
+---
+
+## Types de champs
+
+| Type | Rendu | Description |
+|---|---|---|
+| `text` | `<input type="text">` | Champ texte standard |
+| `email` | `<input type="email">` | Validation e-mail intégrée |
+| `password` | `<input type="password">` | Mot de passe masqué |
+| `number` | `<input type="number">` | Supporte `min`, `max` |
+| `tel` | `<input type="tel">` | Téléphone |
+| `url` | `<input type="url">` | URL |
+| `date` | `<input type="date">` | Sélecteur de date natif |
+| `textarea` | `<textarea>` | Zone de texte multi-lignes |
+| `select` | `<mat-select>` | Liste déroulante — 1 choix |
+| `multiselect` | `<mat-select multiple>` | Liste déroulante — plusieurs choix |
+| `radio` | `<mat-radio-group>` | Boutons radio |
+| `checkbox` | `<mat-checkbox>` | Case à cocher booléenne |
+| `file` | `<input type="file">` | Téléversement de fichier |
+| `hidden` | `<input type="hidden">` | Champ caché (présent dans le FormGroup) |
+| `divider` | `<hr>` | Séparateur horizontal |
+| `heading` | `<h1>` à `<h6>` | Titre de section |
+
+---
+
+## Configuration — DynamicFormConfig
+
+```typescript
+interface DynamicFormConfig {
+  fields: DynamicFormField[];     // Liste des champs (obligatoire)
+  submitLabel?: string;           // Libellé du bouton Envoyer (défaut : "Envoyer")
+  resetLabel?: string;            // Libellé du bouton Réinitialiser (défaut : "Réinitialiser")
+  showReset?: boolean;            // Afficher le bouton Réinitialiser (défaut : false)
+  layout?: 'vertical' | 'horizontal' | 'inline';
+  cssClass?: string;
+  debug?: boolean;                // Affiche les valeurs JSON en temps réel
+}
+```
+
+---
+
+## Propriétés d'un champ — DynamicFormField
+
+```typescript
+interface DynamicFormField {
+  // Obligatoire
+  key: string;                    // Identifiant unique (clé dans FormGroup)
+  type: FieldType;
+
+  // Affichage
+  label?: string;
+  placeholder?: string;
+  hint?: string;
+  icon?: string;                  // Icône préfixe (Material Icons)
+  iconSuffix?: string;            // Icône suffixe (Material Icons)
+
+  // Valeur & état
+  defaultValue?: any;
+  disabled?: boolean;
+  readonly?: boolean;
+  hidden?: boolean;
+
+  // Options (select / multiselect / radio)
+  options?: SelectOption[];
+
+  // Validation
+  validation?: FieldValidation;
+
+  // Disposition
+  col?: 1|2|3|4|6|8|9|12;       // Colonnes sur 12 (défaut : 12)
+  cssClass?: string;
+
+  // Affichage conditionnel
+  showWhen?: FieldCondition | FieldCondition[];
+
+  // Spécifique file
+  accept?: string;                // Ex : ".pdf,.jpg"
+  multiple?: boolean;
+
+  // Spécifique textarea
+  rows?: number;                  // Défaut : 3
+
+  // Spécifique heading
+  text?: string;
+  level?: 1|2|3|4|5|6;          // Défaut : 2
+
+  attrs?: Record<string, any>;
+}
+```
+
+### SelectOption
+
+```typescript
+interface SelectOption {
+  label: string;
+  value: any;
+  disabled?: boolean;
+  group?: string;
+}
+```
+
+---
+
+## Validation
+
+```typescript
+interface FieldValidation {
+  required?: boolean;
+  email?: boolean;
+  minLength?: number;
+  maxLength?: number;
+  min?: number;
+  max?: number;
+  pattern?: string | RegExp;
+  custom?: (value: any) => string | null;
+  messages?: {
+    required?: string;
+    email?: string;
+    minLength?: string;
+    maxLength?: string;
+    min?: string;
+    max?: string;
+    pattern?: string;
+  };
+}
+```
+
+**Exemples :**
+
+```typescript
+// Validateur avec message personnalisé
+{
+  key: 'email',
+  type: 'email',
+  label: 'E-mail',
+  validation: {
+    required: true,
+    email: true,
+    messages: {
+      required: 'L\'e-mail est obligatoire.',
+      email: 'Format e-mail invalide.',
+    },
+  },
+}
+
+// Validateur custom
+{
+  key: 'password',
+  type: 'password',
+  label: 'Mot de passe',
+  validation: {
+    required: true,
+    custom: (v) => {
+      if (!v || v.length < 8) return 'Minimum 8 caractères.';
+      if (!/[A-Z]/.test(v)) return 'Au moins une majuscule.';
+      return null;
+    },
+  },
+}
+```
+
+---
+
+## Affichage conditionnel — showWhen
+
+```typescript
+// Condition unique
+{
+  key: 'company',
+  type: 'text',
+  label: 'Entreprise',
+  showWhen: { field: 'accountType', operator: 'equals', value: 'pro' },
+}
+
+// Conditions multiples (logique AND)
+{
+  key: 'discount',
+  type: 'number',
+  label: 'Remise (%)',
+  showWhen: [
+    { field: 'accountType', operator: 'equals',      value: 'pro' },
+    { field: 'orderTotal',  operator: 'greaterThan', value: 500 },
+  ],
+}
+```
+
+### Opérateurs disponibles
+
+| Opérateur | Description |
+|---|---|
+| `equals` | Valeur exactement égale |
+| `notEquals` | Valeur différente |
+| `contains` | Contient (string ou tableau) |
+| `greaterThan` | Valeur numérique supérieure |
+| `lessThan` | Valeur numérique inférieure |
+| `exists` | Champ renseigné (non vide, non null) |
+| `notExists` | Champ vide ou null |
+
+---
+
+## Icônes (Material Icons)
+
+```typescript
+{ key: 'email', type: 'email', label: 'E-mail', icon: 'email', iconSuffix: 'verified' }
+```
+
+| Champ | Icône recommandée |
+|---|---|
+| Nom, Prénom | `person`, `badge` |
+| E-mail | `email` |
+| Téléphone | `phone` |
+| Mot de passe | `lock` |
+| Adresse | `home`, `location_on` |
+| Entreprise | `business` |
+| Prix | `euro`, `attach_money` |
+| Date | `calendar_today` |
+| Pièce jointe | `attach_file` |
+
+---
+
+## Disposition en grille (col)
+
+La propriété `col` détermine le nombre de colonnes sur 12 occupées par le champ.
+
+| `col` | Largeur | Usage |
+|---|---|---|
+| `12` | 100% | Pleine largeur (défaut) |
+| `6` | 50% | Deux champs côte à côte |
+| `4` | 33% | Trois champs côte à côte |
+| `3` | 25% | Quatre champs côte à côte |
+
+> En dessous de 600 px, tous les champs passent automatiquement en pleine largeur.
+
+**Sections :**
+```typescript
+fields: [
+  { key: '_s1', type: 'heading', text: 'Informations', level: 3, col: 12 },
+  { key: 'name',  type: 'text',  label: 'Nom',    col: 6 },
+  { key: 'email', type: 'email', label: 'E-mail', col: 6 },
+  { key: '_div',  type: 'divider', col: 12 },
+  { key: '_s2', type: 'heading', text: 'Adresse', level: 3, col: 12 },
+]
+```
+
+---
+
+## API du composant DynamicForm
+
+### Inputs
+
+| Propriété | Type | Description |
+|---|---|---|
+| `[config]` | `DynamicFormConfig` | Configuration du formulaire (obligatoire) |
+| `[initialValues]` | `Record<string, any>` | Préremplissage des champs (mode édition) |
+
+### Outputs
+
+| Événement | Type | Description |
+|---|---|---|
+| `(formSubmit)` | `DynamicFormSubmitEvent` | Formulaire soumis et valide |
+| `(formChange)` | `Record<string, any>` | Émis à chaque modification |
+| `(formReset)` | `void` | Formulaire réinitialisé |
+
+### API publique via @ViewChild
+
+```typescript
+@ViewChild('f') formRef!: DynamicFormComponent;
+
+// Accéder au FormGroup Angular
+const fg = this.formRef.getForm();
+console.log(fg.value, fg.valid);
+
+// Mettre à jour des valeurs sans réinitialiser
+this.formRef.patchValues({ name: 'Nouveau nom' });
+```
+
+```html
+<ngx-dynamic-form
+  #f
+  [config]="config"
+  [initialValues]="existingData"
+  (formSubmit)="onSubmit($event)"
+  (formChange)="onChange($event)"
+/>
+```
+
+---
+
+## provideNgxForms — configuration globale
+
+`provideNgxForms()` est la fonction de configuration du plugin. Elle enregistre le `FormConfigService` et l'adaptateur de stockage dans le contexte Angular.
+
+### Stockage localStorage (défaut)
+
+```typescript
+// app.config.ts
+import { provideNgxForms } from '@suntelecoms/ngx-dynamic-form';
+
+providers: [
+  provideNgxForms({ storage: 'local' }),
+]
+```
+
+### Stockage API REST (Spring Boot)
+
+```typescript
+// app.config.ts
+providers: [
+  provideNgxForms({
+    storage: 'http',
+    apiUrl: 'https://api.monprojet.com/forms',
+  }),
+  provideHttpClient(),   // requis pour le mode http
+]
+```
+
+L'API doit exposer les endpoints suivants :
+
+```
+GET    /forms        → SavedFormSchema[]
+GET    /forms/:id    → SavedFormSchema
+PUT    /forms/:id    → SavedFormSchema (création ou mise à jour)
+DELETE /forms/:id    → void
+```
+
+---
+
+## FormConfigService — gestion des schémas
+
+`FormConfigService` est fourni par `provideNgxForms()`. Il gère les schémas de formulaires avec un **Signal réactif** et une **API Observable**.
+
+```typescript
+import { inject } from '@angular/core';
+import { FormConfigService } from '@suntelecoms/ngx-dynamic-form';
+
+export class MonComposant {
+  private formService = inject(FormConfigService);
+
+  // Signal réactif — mise à jour automatique
+  readonly schemas = this.formService.schemas; // Signal<SavedFormSchema[]>
+
+  // Lecture synchrone
+  getById(id: string) {
+    return this.formService.get(id); // SavedFormSchema | null
+  }
+
+  // Sauvegarde — Observable (complète après écriture)
+  saveForm(id: string, title: string, config: DynamicFormConfig) {
+    this.formService.save(id, title, config).subscribe(schema => {
+      console.log('Sauvegardé :', schema);
+    });
+  }
+
+  // Suppression — Observable
+  deleteForm(id: string) {
+    this.formService.delete(id).subscribe(() => {
+      console.log('Supprimé');
+    });
+  }
+
+  // Génère un ID unique
+  newId() {
+    return this.formService.generateId();
+  }
+}
+```
+
+### Interface SavedFormSchema
+
+```typescript
+interface SavedFormSchema {
+  id: string;                // Identifiant unique
+  title: string;             // Nom du formulaire
+  config: DynamicFormConfig; // Configuration complète
+  updatedAt: string;         // ISO 8601
+}
+```
+
+---
+
+## Stockage — LocalStorage vs API REST
+
+Le plugin utilise une abstraction `FormStorageAdapter` qui permet de changer le backend de stockage sans toucher au reste de l'application.
+
+### Résumé des adaptateurs
+
+| Option | Classe | Quand utiliser |
+|---|---|---|
+| `storage: 'local'` | `LocalStorageAdapter` | Développement, démo, usage hors-ligne |
+| `storage: 'http'` | `HttpStorageAdapter` | Production avec backend Spring Boot |
+
+### Clé localStorage
+
+Quand `storage: 'local'`, les données sont stockées sous :
+
+```
+localStorage['ngx-dynamic-form__schemas'] = [ { id, title, config, updatedAt }, ... ]
+```
+
+### Implémenter son propre adaptateur
+
+```typescript
+import { Injectable } from '@angular/core';
+import { Observable, of } from 'rxjs';
+import { FormStorageAdapter, SavedFormSchema } from '@suntelecoms/ngx-dynamic-form';
+
+@Injectable()
+export class IndexedDBAdapter extends FormStorageAdapter {
+  list():                      Observable<SavedFormSchema[]>      { /* ... */ }
+  get(id: string):             Observable<SavedFormSchema | null> { /* ... */ }
+  save(schema: SavedFormSchema): Observable<SavedFormSchema>      { /* ... */ }
+  delete(id: string):          Observable<void>                   { /* ... */ }
+}
+
+// app.config.ts
+providers: [
+  { provide: FormStorageAdapter, useClass: IndexedDBAdapter },
+  FormConfigService,
+]
+```
+
+---
+
+## Form Builder — éditeur visuel
+
+Le **Form Builder** est une interface 3 panneaux intégrée directement dans le plugin via le composant `<ngx-form-builder>` (sélecteur `ngx-form-builder`).
+
+### Ajouter la route
+
+```typescript
+{
+  path: 'builder',
+  loadComponent: () => import('@suntelecoms/ngx-dynamic-form').then(m => m.FormBuilderComponent),
+}
+```
+
+### Interface
+
+```
+┌──────────────────┬───────────────────────────────┬─────────────────────┐
+│  Palette         │   Schéma / Aperçu             │   Propriétés        │
+│                  │                               │   (champ sélect.)   │
+│  Saisie          │  ┌────────────────────────┐   │                     │
+│  [Texte]         │  │ 👤 Nom     (text)  ↑↓⎘🗑│   │  Label : Nom        │
+│  [E-mail]        │  │ 📧 Email   (email) ↑↓⎘🗑│   │  Col : 6/12         │
+│  [Nombre]        │  └────────────────────────┘   │  Icône : person     │
+│  ...             │                               │  Required : ✓       │
+│  Choix           │  Paramètres du formulaire     │                     │
+│  [Select]        ├───────────────────────────────┤  Validation         │
+│  [Radio]         │  Bouton Envoyer : [Envoyer]   │  Options            │
+│  ...             │  [ ] Afficher Réinitialiser   │                     │
+│                  │                               │                     │
+│  Formulaires     │  [Schéma] [Aperçu]            │                     │
+│  sauvegardés     │                               │                     │
+└──────────────────┴───────────────────────────────┴─────────────────────┘
+```
+
+### Fonctionnalités du Builder
+
+| Action | Description |
+|---|---|
+| Ajouter un champ | Clic sur un type dans la palette |
+| Réordonner | Boutons ↑ ↓ sur chaque champ |
+| Dupliquer | Copie d'un champ avec toutes ses propriétés |
+| Supprimer | Icône corbeille |
+| Éditer | Panneau droit — label, col, icône, validation, options… |
+| Aperçu | Onglet **Aperçu** — rendu réel via `<ngx-dynamic-form>` |
+| Sauvegarder | Stocke en localStorage (ou API) avec ID unique |
+| Export JSON | JSON de la config dans un modal copiable |
+| Export TypeScript | `const config: DynamicFormConfig = { ... }` |
+| Partager | Copie l'URL `/form/<id>` dans le presse-papiers |
+
+### Inputs du FormBuilderComponent
+
+| Input | Type | Défaut | Description |
+|---|---|---|---|
+| `[backRoute]` | `string` | `'/'` | Route du lien "Retour" dans la topbar |
+
+---
+
+## Composants de navigation
+
+### MesFormulairesComponent — `<ngx-mes-formulaires>`
+
+Liste et aperçu de tous les formulaires sauvegardés. Permet de les prévisualiser, les soumettre, les supprimer.
+
+```typescript
+{
+  path: 'mes-formulaires',
+  loadComponent: () => import('@suntelecoms/ngx-dynamic-form').then(m => m.MesFormulairesComponent),
+}
+```
+
+| Input | Type | Défaut | Description |
+|---|---|---|---|
+| `[backRoute]` | `string` | `'/'` | Lien "Retour" |
+| `[builderRoute]` | `string` | `'/builder'` | Route vers le Builder |
+| `[formRoute]` | `string` | `'/form'` | Préfixe de la route de rendu (+ `/:id`) |
+
+### FormLoaderComponent — `<ngx-form-loader>`
+
+Charge et affiche un formulaire depuis son ID (via `ActivatedRoute` ou `@Input`).
+
+```typescript
+{
+  path: 'form/:id',
+  loadComponent: () => import('@suntelecoms/ngx-dynamic-form').then(m => m.FormLoaderComponent),
+}
+```
+
+| Input | Type | Défaut | Description |
+|---|---|---|---|
+| `[formId]` | `string` | — | ID direct (sans routing, optionnel) |
+| `[backRoute]` | `string` | `'/'` | Lien "Retour" |
+| `[builderRoute]` | `string` | `'/builder'` | Lien "Éditer" |
+
+---
+
+## Intégration dans un composant
+
+### Approche A — chargement dynamique via FormConfigService
+
+```typescript
+import { Component, computed, inject, signal } from '@angular/core';
+import { DynamicFormComponent, FormConfigService } from '@suntelecoms/ngx-dynamic-form';
+import type { DynamicFormConfig, DynamicFormSubmitEvent } from '@suntelecoms/ngx-dynamic-form';
+
+@Component({
+  standalone: true,
+  imports: [DynamicFormComponent],
+  template: `
+    @if (activeConfig(); as cfg) {
+      <ngx-dynamic-form [config]="cfg" (formSubmit)="onSubmit($event)" />
+    }
+  `,
+})
+export class MonFormulaireComponent {
+  private formService = inject(FormConfigService);
+
+  // Signal réactif — liste des formulaires disponibles
+  readonly schemas = this.formService.schemas;
+
+  // Sélection de l'ID actif
+  selectedId = signal('votre-id-ici');
+
+  // Config dérivée automatiquement
+  activeConfig = computed(() =>
+    this.formService.get(this.selectedId())?.config ?? null
+  );
+
+  onSubmit(event: DynamicFormSubmitEvent): void {
+    console.log(event.value);
+  }
+}
+```
+
+### Approche B — configuration statique TypeScript
+
+```typescript
+import { Component } from '@angular/core';
+import { DynamicFormComponent } from '@suntelecoms/ngx-dynamic-form';
+import type { DynamicFormConfig, DynamicFormSubmitEvent } from '@suntelecoms/ngx-dynamic-form';
+
+@Component({
+  standalone: true,
+  imports: [DynamicFormComponent],
+  template: `<ngx-dynamic-form [config]="config" (formSubmit)="onSubmit($event)" />`,
+})
+export class ContactComponent {
+  config: DynamicFormConfig = {
+    submitLabel: 'Envoyer',
+    fields: [
+      { key: 'nom',   type: 'text',  label: 'Nom',     col: 6, validation: { required: true } },
+      { key: 'email', type: 'email', label: 'E-mail',  col: 6, validation: { required: true } },
+    ],
+  };
+
+  onSubmit(event: DynamicFormSubmitEvent): void {
+    console.log(event.value);
+  }
+}
+```
+
+> **Astuce :** créez le formulaire dans le Builder (`/builder`) → cliquez **Export TypeScript** → collez dans votre composant.
+
+### Approche C — avec backend API REST (Spring Boot)
+
+Configurez simplement `provideNgxForms({ storage: 'http', apiUrl: '...' })` — tout le reste est identique aux approches A et B. Le `FormConfigService` appellera automatiquement votre API au lieu de localStorage.
+
+```typescript
+// app.config.ts
+provideNgxForms({
+  storage: 'http',
+  apiUrl: 'https://api.monprojet.com/forms',
+}),
+provideHttpClient(),
+```
+
+```java
+// Exemple endpoint Spring Boot
+@RestController
+@RequestMapping("/forms")
+public class FormController {
+  @GetMapping         List<SavedFormSchema> list()           { ... }
+  @GetMapping("/{id}") SavedFormSchema       get(@PathVariable String id) { ... }
+  @PutMapping("/{id}") SavedFormSchema       save(@PathVariable String id, @RequestBody SavedFormSchema s) { ... }
+  @DeleteMapping("/{id}") void              delete(@PathVariable String id) { ... }
+}
+```
+
+---
+
+## Pages de démonstration
+
+L'application de démonstration (`ng serve`) illustre le plugin sur plusieurs cas d'usage :
+
+| Route | Description |
+|---|---|
+| `/` | Page d'accueil |
+| `/inscription` | Formulaire multi-sections avec `showWhen` |
+| `/contact` | Formulaire de contact (select, textarea, radio) |
+| `/produit` | Fiche produit — modes vue / édition / création |
+| `/builder` | **Form Builder** — composant `FormBuilderComponent` de la lib |
+| `/mes-formulaires` | **Gestionnaire** — composant `MesFormulairesComponent` de la lib |
+| `/form/:id` | **Rendu par ID** — composant `FormLoaderComponent` de la lib |
+
+---
+
+## Exemples complets
+
+### Formulaire d'inscription avec showWhen
+
+```typescript
+config: DynamicFormConfig = {
+  submitLabel: 'Créer mon compte',
+  showReset: true,
+  fields: [
+    { key: '_info', type: 'heading', text: 'Informations', level: 3, col: 12 },
+    { key: 'firstName', type: 'text',  label: 'Prénom', col: 6, icon: 'person',
+      validation: { required: true } },
+    { key: 'lastName',  type: 'text',  label: 'Nom',    col: 6, icon: 'badge',
+      validation: { required: true } },
+    { key: 'email',     type: 'email', label: 'E-mail', col: 12, icon: 'email',
+      validation: { required: true, email: true } },
+    { key: '_div', type: 'divider', col: 12 },
+    { key: 'accountType', type: 'radio', label: 'Type de compte', col: 12,
+      defaultValue: 'personal',
+      options: [
+        { label: 'Particulier',   value: 'personal' },
+        { label: 'Professionnel', value: 'pro' },
+      ] },
+    { key: 'company', type: 'text', label: 'Entreprise', col: 6, icon: 'business',
+      showWhen: { field: 'accountType', operator: 'equals', value: 'pro' } },
+    { key: 'siret', type: 'text', label: 'SIRET', col: 6, icon: 'tag',
+      showWhen: { field: 'accountType', operator: 'equals', value: 'pro' },
+      validation: { minLength: 14, maxLength: 14 } },
+    { key: 'terms', type: 'checkbox',
+      placeholder: "J'accepte les CGU *", col: 12,
+      validation: { required: true, messages: { required: 'Vous devez accepter les CGU.' } } },
+  ],
+};
+```
+
+### Fiche produit avec préremplissage et mode vue/édition
+
+```typescript
+mode = signal<'view' | 'edit'>('edit');
+prefill = { name: 'Casque Pro X1', price: 129.99, stock: 42 };
+
+get config(): DynamicFormConfig {
+  const ro = this.mode() === 'view';
+  return {
+    submitLabel: 'Sauvegarder',
+    fields: [
+      { key: 'name',  type: 'text',   label: 'Nom',   col: 8, icon: 'inventory', readonly: ro,
+        validation: { required: true } },
+      { key: 'price', type: 'number', label: 'Prix',  col: 4, icon: 'euro',      readonly: ro },
+      { key: 'stock', type: 'number', label: 'Stock', col: 4, icon: 'inventory_2', readonly: ro },
+    ],
+  };
+}
+```
+
+```html
+<ngx-dynamic-form
+  [config]="config"
+  [initialValues]="prefill"
+  (formSubmit)="onSubmit($event)"
+/>
+```
+
+---
+
+## Personnalisation CSS
+
+```css
+/* styles.css */
+:root {
+  --ngx-form-gap: 1.25rem;
+  --ngx-color-border: #e2e8f0;
+  --ngx-color-text: #1a202c;
+  --ngx-color-hint: #718096;
+}
+```
+
+Pour les couleurs des champs Material (outline, focus, erreur), personnalisez le thème Angular Material selon la [documentation officielle](https://material.angular.io/guide/theming).
+
+---
+
+## Interfaces TypeScript
+
+```typescript
+// Exports publics de @suntelecoms/ngx-dynamic-form
+
+// Composants
+export { DynamicFormComponent }     // <ngx-dynamic-form>
+export { FormBuilderComponent }     // <ngx-form-builder>
+export { MesFormulairesComponent }  // <ngx-mes-formulaires>
+export { FormLoaderComponent }      // <ngx-form-loader>
+
+// Services & Providers
+export { FormConfigService }        // inject(FormConfigService)
+export { FormStorageAdapter }       // classe abstraite de stockage
+export { LocalStorageAdapter }      // implémentation localStorage
+export { HttpStorageAdapter }       // implémentation API REST
+export { FORM_API_URL }             // InjectionToken<string>
+export { provideNgxForms }          // function(options) → EnvironmentProviders
+
+// Types
+export type { NgxFormsOptions }     // { storage: 'local' } | { storage: 'http', apiUrl: string }
+export type { SavedFormSchema }     // { id, title, config, updatedAt }
+export type { DynamicFormConfig }
+export type { DynamicFormField }
+export type { DynamicFormSubmitEvent }
+export type { FieldType }
+export type { FieldValidation }
+export type { FieldCondition }
+export type { SelectOption }
+```
+
+---
+
+## Auteur
+
+**Amadou Diallo** — [@amepro](https://github.com/amepro)
+📧 [amadoumacbookpro38@gmail.com](mailto:amadoumacbookpro38@gmail.com)
+
+Développé dans le cadre du projet **SUNTELECOMS** — Plugin Angular 19 standalone.
+
+---
+
+*MIT License — Libre d'utilisation, de modification et de distribution.*