chrv-components 1.12.21 → 1.12.22

package/README.md

@@ -1,544 +1,544 @@
-# 🎨 CHRV Components
-
-<div align="center">
-
-![npm version](https://img.shields.io/npm/v/chrv-components?style=for-the-badge)
-![Angular](https://img.shields.io/badge/Angular-16+-red?style=for-the-badge&logo=angular)
-![TypeScript](https://img.shields.io/badge/TypeScript-5.0+-blue?style=for-the-badge&logo=typescript)
-![Tailwind](https://img.shields.io/badge/Tailwind-3.0+-38bdf8?style=for-the-badge&logo=tailwindcss)
-
-**Bibliothèque complète de composants Angular avec Tailwind CSS**
-
-[📚 Documentation](#-documentation) • [🚀 Installation](#-installation) • [💡 Exemples](#-exemples) • [🛠️ API](#️-api)
-
-</div>
-
-## ✨ Composants disponibles
-
-### 🪟 Système de Modal
-
-- **ChrModalComponent** - Modal de base avec backdrop et animations
-- **ModalService** - Service pour gérer les modals avec injection de tokens
-
-### 📝 Formulaires et saisie
-
-- **ChrFormComponent** - Formulaire dynamique avec sections et contrôles
-- **ChrBaseInputComponent** - Input de base avec validation
-- **ChrColorInputComponent** - Sélecteur de couleur
-- **ChrDateInputComponent** - Input de date
-- **ChrDatetimeInputComponent** - Input de date et heure
-- **ChrFileInputComponent** - Upload de fichiers
-- **ChrNiceFileInputComponent** - Upload de fichiers avec interface améliorée
-- **ChrTextareaInputComponent** - Zone de texte multiligne
-- **ChrToggleInputComponent** - Bouton toggle on/off
-- **ChrSearchSelectComponent** - Sélection avec recherche
-- **ChrTagSelectComponent** - Sélection multiple avec tags
-- **ChrCheckboxComponent** - Case à cocher stylisée
-
-### 📊 Affichage de données
-
-- **ChrDataTable** - Table de données avec fonctionnalités avancées
-- **ChrTableComponent** - Table avec tri et fonctionnalités
-- **ChrPaginatorComponent** - Pagination avec gestion des cookies
-
-### 🎯 Interface utilisateur
-
-- **ChrButtonComponent** - Bouton avec icônes et couleurs personnalisables
-- **ChrDropdownComponent** - Menu déroulant avec animation et état vide/ouvert
-- **ChrContextMenuComponent** - Menu contextuel
-- **ChrSpinnerComponent** - Indicateur de chargement
-- **ChrToastComponent** - Notifications toast
-- **ChrInlineSvgComponent** - Affichage SVG inline
-
-### 🧭 Navigation
-
-- **ChrBreadcrumbComponent** - Fil d'Ariane de navigation
-- **TabComponent** - Onglet individuel
-- **TabGroupComponent** - Groupe d'onglets
-- **CarouselComponent** - Carrousel d'images/contenu
-
-### 🎛️ Directives
-
-- **TabInputOnlyHandlerDirective** - Gestion navigation par Tab
-- **TabToEnterHandlerDirective** - Conversion Tab vers Enter
-- **AutofocusDirective** - Focus automatique
-- **ChrContextMenuDirective** - Directive pour menus contextuels
-
-### 🛠️ Services
-
-- **ModalService** - Gestion des modals avec tokens
-- **DialogService** - Service de dialogue
-- **DataService** - Service de données
-- **LiveUpdateService** - Mises à jour en temps réel
-- **LoaderService** - Gestion des états de chargement
-- **ToastService** - Service de notifications
-- **CookieService** - Gestion des cookies
-- **FilesService** - Gestion des fichiers
-
-## 🚀 Installation
-
-```bash
-# Installation avec toutes les dépendances
-npm install chrv-components
-
-# Les dépendances suivantes sont automatiquement incluses :
-# - @angular/material
-# - ngx-pagination
-# - chrv-pipes
-# - @microsoft/signalr
-```
-
-## ⚙️ Configuration
-
-### Import dans votre module Angular
-
-```typescript
-import { NgModule } from "@angular/core";
-import { ChrButtonComponent, ChrFormComponent, ChrTableComponent, ModalService } from "chrv-components";
-
-@NgModule({
-  imports: [ChrButtonComponent, ChrFormComponent, ChrTableComponent],
-  providers: [ModalService],
-  // ...
-})
-export class AppModule {}
-```
-
-### Import dans un composant standalone
-
-```typescript
-import { Component } from "@angular/core";
-import { ChrButtonComponent, ChrFormComponent } from "chrv-components";
-
-@Component({
-  selector: "app-example",
-  standalone: true,
-  imports: [ChrButtonComponent, ChrFormComponent],
-  template: `...`,
-})
-export class ExampleComponent {}
-```
-
-## 💡 Exemples d'utilisation
-
-### 🎯 ChrButtonComponent
-
-Bouton personnalisable avec icônes et couleurs :
-
-```html
-<!-- Bouton simple -->
-<app-chr-button [display]="'Enregistrer'" [color]="'primary'" [click]="saveData"> </app-chr-button>
-
-<!-- Bouton avec icône -->
-<app-chr-button [display]="'Supprimer'" [icon]="'delete'" [color]="'warn'" [click]="deleteItem"> </app-chr-button>
-
-<!-- Bouton plat -->
-<app-chr-button [display]="'Annuler'" [flat]="true" [click]="cancel"> </app-chr-button>
-```
-
-### 📝 ChrFormComponent
-
-Formulaire dynamique basé sur l'interface IControl :
-
-**Option 1 : Avec sections**
-
-```html
-<app-chr-form [sections]="formSections"></app-chr-form>
-```
-
-```typescript
-export class FormExampleComponent {
-  formSections: IFormSection[] = [
-    {
-      title: "Informations personnelles",
-      controls: [
-        { name: "firstName", type: "text", label: "Prénom" },
-        { name: "lastName", type: "text", label: "Nom" },
-        { name: "email", type: "text", label: "Email" },
-        { name: "birthDate", type: "date", label: "Date de naissance" },
-      ],
-    },
-  ];
-}
-```
-
-**Option 2 : Avec contrôles directement**
-
-```html
-<app-chr-form [controls]="formControls"></app-chr-form>
-```
-
-```typescript
-export class FormExampleComponent {
-  formControls: IControl[] = [
-    { name: "firstName", type: "text", label: "Prénom" },
-    { name: "lastName", type: "text", label: "Nom" },
-    { name: "email", type: "text", label: "Email" },
-    { name: "birthDate", type: "date", label: "Date de naissance" },
-  ];
-}
-```
-
-### ChrPaginatorComponent
-
-Pagination avec gestion automatique :
-
-```html
-<app-chr-paginator [id]="'users-pagination'" [page]="currentPage" [pageSize]="itemsPerPage" [allowSizeChange]="true" (pageChange)="onPageChange($event)" (pageSizeChange)="onPageSizeChange($event)"> </app-chr-paginator>
-```
-
-```typescript
-export class PaginationExampleComponent {
-  currentPage = 1;
-  itemsPerPage = 20;
-
-  onPageChange(page: number) {
-    this.currentPage = page;
-  }
-
-  onPageSizeChange(size: number) {
-    this.itemsPerPage = size;
-  }
-}
-```
-
-### 🪟 ModalService
-
-Service pour gérer les modals avec injection de données :
-
-```typescript
-import { Component, inject } from "@angular/core";
-import { ModalService, CHR_MODAL_DATA, CHR_MODAL_REF } from "chrv-components";
-
-// Composant de modal
-@Component({
-  template: `
-    <div class="modal-content">
-      <h2>{{ data.title }}</h2>
-      <p>{{ data.message }}</p>
-      <button (click)="close()">Fermer</button>
-    </div>
-  `,
-})
-export class MyModalComponent {
-  data = inject(CHR_MODAL_DATA);
-  modalRef = inject(CHR_MODAL_REF);
-
-  close() {
-    this.modalRef.close();
-  }
-}
-
-// Utilisation du service
-export class ParentComponent {
-  private modalService = inject(ModalService);
-
-  openModal() {
-    this.modalService.open(MyModalComponent, {
-      data: {
-        title: "Confirmation",
-        message: "Êtes-vous sûr de vouloir continuer ?",
-      },
-    });
-  }
-}
-```
-
-### 🏷️ ChrTagSelectComponent
-
-Sélection multiple avec tags :
-
-```html
-<chr-tag-select [data]="availableData" [display]="displayFunction" [placeholder]="'Sélectionner des éléments...'" [acceptText]="true"> </chr-tag-select>
-```
-
-```typescript
-export class TagSelectExampleComponent {
-  availableData = [
-    { id: 1, name: "Option 1" },
-    { id: 2, name: "Option 2" },
-    { id: 3, name: "Option 3" },
-  ];
-
-  displayFunction = (item: any) => item.name;
-}
-```
-
-### 🔄 ChrSpinnerComponent
-
-Indicateur de chargement automatique :
-
-```html
-<!-- Spinner simple (contrôlé par LoaderService) -->
-<app-chr-spinner></app-chr-spinner>
-```
-
-```typescript
-export class SpinnerExampleComponent {
-  private loaderService = inject(LoaderService);
-
-  showSpinner() {
-    this.loaderService.show();
-    // Simulation d'une tâche
-    setTimeout(() => {
-      this.loaderService.hide();
-    }, 2000);
-  }
-}
-```
-
-## 🛠️ API
-
-### ChrButtonComponent
-
-```typescript
-@Component({
-  inputs: {
-    display: string;           // Texte du bouton
-    icon: string;             // Icône Material
-    click: Function;          // Fonction onClick
-    color: Color;             // Couleur du bouton
-    textColor: Color;         // Couleur du texte
-    flat: boolean;            // Style plat
-  }
-})
-```
-
-### ChrSearchbarComponent
-
-```typescript
-@Component({
-  inputs: {
-    model: string | null;     // Valeur actuelle
-    placeholder: string | null; // Texte d'aide
-    label: string | null;     // Label du champ
-  },
-  outputs: {
-    modelChange: string;      // Changement de valeur
-  }
-})
-```
-
-### ChrFormComponent
-
-```typescript
-@Component({
-  inputs: {
-    sections: IFormSection[];  // Sections avec contrôles groupés
-    controls: IControl[];      // Contrôles directs (utiliser l'un OU l'autre)
-  }
-})
-```
-
-**Interface IControl :**
-
-```typescript
-interface IControl {
-  name: string; // Nom unique du contrôle
-  type: InputType; // Type d'input
-  label?: string; // Label affiché
-  value?: any; // Valeur par défaut
-  validations?: IControlValidation[]; // Validations
-  data?: any[]; // Données pour select/options
-  // ... autres propriétés
-}
-```
-
-**Interface IFormSection :**
-
-```typescript
-interface IFormSection {
-  title?: string; // Titre de la section
-  controls: IControl[]; // Contrôles de la section
-}
-```
-
-### ChrSearchbarComponent
-
-```typescript
-@Component({
-  inputs: {
-    model: string | null;     // Valeur actuelle
-    placeholder: string | null; // Texte d'aide
-    label: string | null;     // Label du champ
-  },
-  outputs: {
-    modelChange: string;      // Changement de valeur
-  }
-})
-```
-
-### ChrPaginatorComponent
-
-```typescript
-@Component({
-  inputs: {
-    page: number;             // Page actuelle
-    pageSize: number;         // Nombre d'éléments par page
-    id: string;              // ID unique du paginateur
-    allowSizeChange: boolean | string; // Permet de changer la taille
-  },
-  outputs: {
-    pageChange: number;       // Changement de page
-    pageSizeChange: number;   // Changement de taille
-  }
-})
-```
-
-### ChrTagSelectComponent
-
-```typescript
-@Component({
-  inputs: {
-    placeholder: string;        // Texte d'aide dans l'input
-    data: any[] | null;        // Données pour l'autocomplete
-    display: (entry: any) => string; // Fonction d'affichage
-    filters: IInputSearchFilter[] | null; // Filtres de recherche
-    editCallback: Function;     // Callback de modification
-    addCallback: Function;      // Callback d'ajout
-    removeCallback: Function;   // Callback de suppression
-    acceptText: boolean | null; // Accepte le texte libre
-  }
-})
-```
-
-### ModalService
-
-```typescript
-class ModalService {
-  open<T>(component: ComponentType<T>, options?: ModalOptions): void;
-  close(): void;
-}
-
-interface ModalOptions {
-  closeOnBackdropClick?: boolean;
-  closeOnEscape?: boolean;
-  width?: number;
-  height?: number;
-  data?: any; // Données injectées via CHR_MODAL_DATA
-}
-```
-
-## 🎨 Thèmes et personnalisation
-
-### Variables CSS disponibles
-
-Les composants utilisent un système de variables CSS pour les couleurs. Vous pouvez les personnaliser en redéfinissant ces variables :
-
-```css
-:root {
-  --primary-color: #your-color;
-  --primary-contrast-color: #your-contrast-color;
-  --secondary-color: #your-secondary;
-  --secondary-contrast-color: #your-secondary-contrast;
-  --tertiary-color: #your-tertiary;
-  --tertiary-contrast-color: #your-tertiary-contrast;
-  --warn-color: #your-warn;
-  --warn-contrast-color: #your-warn-contrast;
-  --error-color: #your-error;
-  --error-contrast-color: #your-error-contrast;
-  --neutral-color: #your-neutral;
-  --text-color: #your-text;
-  --text-neutral-color: #your-text-neutral;
-}
-```
-
-### Classes CSS disponibles
-
-La bibliothèque fournit des classes utilitaires pour les couleurs :
-
-```css
-/* Arrière-plans */
-.bg-primary, .bg-secondary, .bg-tertiary, .bg-warn, .bg-error, .bg-neutral
-.bg-primary-contrast, .bg-secondary-contrast, .bg-tertiary-contrast, .bg-warn-contrast, .bg-error-contrast
-
-/* Texte */
-.text-primary, .text-secondary, .text-tertiary, .text-warn, .text-error, .text-neutral
-.text-primary-contrast, .text-secondary-contrast, .text-tertiary-contrast, .text-warn-contrast, .text-error-contrast
-
-/* Bordures */
-.border-primary, .border-secondary, .border-tertiary, .border-warn, .border-error
-.border-primary-contrast, .border-secondary-contrast, .border-tertiary-contrast, .border-warn-contrast, .border-error-contrast;
-```
-
-### Personnalisation avancée avec ::ng-deep
-
-Pour modifier les styles des composants compilés, utilisez `::ng-deep` :
-
-```scss
-// Dans votre composant .scss
-::ng-deep .chr-button {
-  border-radius: 8px;
-  font-weight: 600;
-}
-
-::ng-deep .chr-form .form-field {
-  margin-bottom: 16px;
-}
-
-::ng-deep .chr-modal .modal-backdrop {
-  background-color: rgba(0, 0, 0, 0.8);
-}
-```
-
-### Exemple de thème personnalisé
-
-```css
-/* Thème sombre personnalisé */
-:root {
-  --primary-color: #3b82f6;
-  --primary-contrast-color: #ffffff;
-  --secondary-color: #6b7280;
-  --secondary-contrast-color: #ffffff;
-  --tertiary-color: #f3f4f6;
-  --tertiary-contrast-color: #1f2937;
-  --warn-color: #f59e0b;
-  --warn-contrast-color: #ffffff;
-  --error-color: #ef4444;
-  --error-contrast-color: #ffffff;
-  --neutral-color: #e5e7eb;
-  --text-color: #1f2937;
-  --text-neutral-color: #6b7280;
-}
-```
-
-## 📦 Intégrations
-
-### Dépendances automatiques
-
-- **Angular Material** - Composants Material Design
-- **ngx-pagination** - Pagination avancée
-- **chrv-pipes** - Pipes utilitaires
-- **@microsoft/signalr** - Communication temps réel
-- **ngx-mask** - Masques de saisie
-
-### Interceptors et providers
-
-```typescript
-// Configuration automatique des interceptors
-import {
-  SpinnerInterceptor,
-  XsrfInterceptor,
-  xsrfProvider
-} from 'chrv-components';
-
-@NgModule({
-  providers: [
-    xsrfProvider,
-    { provide: HTTP_INTERCEPTORS, useClass: SpinnerInterceptor, multi: true },
-    { provide: HTTP_INTERCEPTORS, useClass: XsrfInterceptor, multi: true }
-  ]
-})
-```
-
-## 📝 Notes
-
-- Compatible Angular 16+
-- Composants standalone prêts pour le tree-shaking
-- Types TypeScript complets
-- Intégration Tailwind CSS native
-- Support des signaux Angular modernes
-
-## 📄 Licence
-
-MIT © CHRV Components
+# 🎨 CHRV Components
+
+<div align="center">
+
+![npm version](https://img.shields.io/npm/v/chrv-components?style=for-the-badge)
+![Angular](https://img.shields.io/badge/Angular-16+-red?style=for-the-badge&logo=angular)
+![TypeScript](https://img.shields.io/badge/TypeScript-5.0+-blue?style=for-the-badge&logo=typescript)
+![Tailwind](https://img.shields.io/badge/Tailwind-3.0+-38bdf8?style=for-the-badge&logo=tailwindcss)
+
+**Bibliothèque complète de composants Angular avec Tailwind CSS**
+
+[📚 Documentation](#-documentation) • [🚀 Installation](#-installation) • [💡 Exemples](#-exemples) • [🛠️ API](#️-api)
+
+</div>
+
+## ✨ Composants disponibles
+
+### 🪟 Système de Modal
+
+- **ChrModalComponent** - Modal de base avec backdrop et animations
+- **ModalService** - Service pour gérer les modals avec injection de tokens
+
+### 📝 Formulaires et saisie
+
+- **ChrFormComponent** - Formulaire dynamique avec sections et contrôles
+- **ChrBaseInputComponent** - Input de base avec validation
+- **ChrColorInputComponent** - Sélecteur de couleur
+- **ChrDateInputComponent** - Input de date
+- **ChrDatetimeInputComponent** - Input de date et heure
+- **ChrFileInputComponent** - Upload de fichiers
+- **ChrNiceFileInputComponent** - Upload de fichiers avec interface améliorée
+- **ChrTextareaInputComponent** - Zone de texte multiligne
+- **ChrToggleInputComponent** - Bouton toggle on/off
+- **ChrSearchSelectComponent** - Sélection avec recherche
+- **ChrTagSelectComponent** - Sélection multiple avec tags
+- **ChrCheckboxComponent** - Case à cocher stylisée
+
+### 📊 Affichage de données
+
+- **ChrDataTable** - Table de données avec fonctionnalités avancées
+- **ChrTableComponent** - Table avec tri et fonctionnalités
+- **ChrPaginatorComponent** - Pagination avec gestion des cookies
+
+### 🎯 Interface utilisateur
+
+- **ChrButtonComponent** - Bouton avec icônes et couleurs personnalisables
+- **ChrDropdownComponent** - Menu déroulant avec animation et état vide/ouvert
+- **ChrContextMenuComponent** - Menu contextuel
+- **ChrSpinnerComponent** - Indicateur de chargement
+- **ChrToastComponent** - Notifications toast
+- **ChrInlineSvgComponent** - Affichage SVG inline
+
+### 🧭 Navigation
+
+- **ChrBreadcrumbComponent** - Fil d'Ariane de navigation
+- **TabComponent** - Onglet individuel
+- **TabGroupComponent** - Groupe d'onglets
+- **CarouselComponent** - Carrousel d'images/contenu
+
+### 🎛️ Directives
+
+- **TabInputOnlyHandlerDirective** - Gestion navigation par Tab
+- **TabToEnterHandlerDirective** - Conversion Tab vers Enter
+- **AutofocusDirective** - Focus automatique
+- **ChrContextMenuDirective** - Directive pour menus contextuels
+
+### 🛠️ Services
+
+- **ModalService** - Gestion des modals avec tokens
+- **DialogService** - Service de dialogue
+- **DataService** - Service de données
+- **LiveUpdateService** - Mises à jour en temps réel
+- **LoaderService** - Gestion des états de chargement
+- **ToastService** - Service de notifications
+- **CookieService** - Gestion des cookies
+- **FilesService** - Gestion des fichiers
+
+## 🚀 Installation
+
+```bash
+# Installation avec toutes les dépendances
+npm install chrv-components
+
+# Les dépendances suivantes sont automatiquement incluses :
+# - @angular/material
+# - ngx-pagination
+# - chrv-pipes
+# - @microsoft/signalr
+```
+
+## ⚙️ Configuration
+
+### Import dans votre module Angular
+
+```typescript
+import { NgModule } from "@angular/core";
+import { ChrButtonComponent, ChrFormComponent, ChrTableComponent, ModalService } from "chrv-components";
+
+@NgModule({
+  imports: [ChrButtonComponent, ChrFormComponent, ChrTableComponent],
+  providers: [ModalService],
+  // ...
+})
+export class AppModule {}
+```
+
+### Import dans un composant standalone
+
+```typescript
+import { Component } from "@angular/core";
+import { ChrButtonComponent, ChrFormComponent } from "chrv-components";
+
+@Component({
+  selector: "app-example",
+  standalone: true,
+  imports: [ChrButtonComponent, ChrFormComponent],
+  template: `...`,
+})
+export class ExampleComponent {}
+```
+
+## 💡 Exemples d'utilisation
+
+### 🎯 ChrButtonComponent
+
+Bouton personnalisable avec icônes et couleurs :
+
+```html
+<!-- Bouton simple -->
+<app-chr-button [display]="'Enregistrer'" [color]="'primary'" [click]="saveData"> </app-chr-button>
+
+<!-- Bouton avec icône -->
+<app-chr-button [display]="'Supprimer'" [icon]="'delete'" [color]="'warn'" [click]="deleteItem"> </app-chr-button>
+
+<!-- Bouton plat -->
+<app-chr-button [display]="'Annuler'" [flat]="true" [click]="cancel"> </app-chr-button>
+```
+
+### 📝 ChrFormComponent
+
+Formulaire dynamique basé sur l'interface IControl :
+
+**Option 1 : Avec sections**
+
+```html
+<app-chr-form [sections]="formSections"></app-chr-form>
+```
+
+```typescript
+export class FormExampleComponent {
+  formSections: IFormSection[] = [
+    {
+      title: "Informations personnelles",
+      controls: [
+        { name: "firstName", type: "text", label: "Prénom" },
+        { name: "lastName", type: "text", label: "Nom" },
+        { name: "email", type: "text", label: "Email" },
+        { name: "birthDate", type: "date", label: "Date de naissance" },
+      ],
+    },
+  ];
+}
+```
+
+**Option 2 : Avec contrôles directement**
+
+```html
+<app-chr-form [controls]="formControls"></app-chr-form>
+```
+
+```typescript
+export class FormExampleComponent {
+  formControls: IControl[] = [
+    { name: "firstName", type: "text", label: "Prénom" },
+    { name: "lastName", type: "text", label: "Nom" },
+    { name: "email", type: "text", label: "Email" },
+    { name: "birthDate", type: "date", label: "Date de naissance" },
+  ];
+}
+```
+
+### ChrPaginatorComponent
+
+Pagination avec gestion automatique :
+
+```html
+<app-chr-paginator [id]="'users-pagination'" [page]="currentPage" [pageSize]="itemsPerPage" [allowSizeChange]="true" (pageChange)="onPageChange($event)" (pageSizeChange)="onPageSizeChange($event)"> </app-chr-paginator>
+```
+
+```typescript
+export class PaginationExampleComponent {
+  currentPage = 1;
+  itemsPerPage = 20;
+
+  onPageChange(page: number) {
+    this.currentPage = page;
+  }
+
+  onPageSizeChange(size: number) {
+    this.itemsPerPage = size;
+  }
+}
+```
+
+### 🪟 ModalService
+
+Service pour gérer les modals avec injection de données :
+
+```typescript
+import { Component, inject } from "@angular/core";
+import { ModalService, CHR_MODAL_DATA, CHR_MODAL_REF } from "chrv-components";
+
+// Composant de modal
+@Component({
+  template: `
+    <div class="modal-content">
+      <h2>{{ data.title }}</h2>
+      <p>{{ data.message }}</p>
+      <button (click)="close()">Fermer</button>
+    </div>
+  `,
+})
+export class MyModalComponent {
+  data = inject(CHR_MODAL_DATA);
+  modalRef = inject(CHR_MODAL_REF);
+
+  close() {
+    this.modalRef.close();
+  }
+}
+
+// Utilisation du service
+export class ParentComponent {
+  private modalService = inject(ModalService);
+
+  openModal() {
+    this.modalService.open(MyModalComponent, {
+      data: {
+        title: "Confirmation",
+        message: "Êtes-vous sûr de vouloir continuer ?",
+      },
+    });
+  }
+}
+```
+
+### 🏷️ ChrTagSelectComponent
+
+Sélection multiple avec tags :
+
+```html
+<chr-tag-select [data]="availableData" [display]="displayFunction" [placeholder]="'Sélectionner des éléments...'" [acceptText]="true"> </chr-tag-select>
+```
+
+```typescript
+export class TagSelectExampleComponent {
+  availableData = [
+    { id: 1, name: "Option 1" },
+    { id: 2, name: "Option 2" },
+    { id: 3, name: "Option 3" },
+  ];
+
+  displayFunction = (item: any) => item.name;
+}
+```
+
+### 🔄 ChrSpinnerComponent
+
+Indicateur de chargement automatique :
+
+```html
+<!-- Spinner simple (contrôlé par LoaderService) -->
+<app-chr-spinner></app-chr-spinner>
+```
+
+```typescript
+export class SpinnerExampleComponent {
+  private loaderService = inject(LoaderService);
+
+  showSpinner() {
+    this.loaderService.show();
+    // Simulation d'une tâche
+    setTimeout(() => {
+      this.loaderService.hide();
+    }, 2000);
+  }
+}
+```
+
+## 🛠️ API
+
+### ChrButtonComponent
+
+```typescript
+@Component({
+  inputs: {
+    display: string;           // Texte du bouton
+    icon: string;             // Icône Material
+    click: Function;          // Fonction onClick
+    color: Color;             // Couleur du bouton
+    textColor: Color;         // Couleur du texte
+    flat: boolean;            // Style plat
+  }
+})
+```
+
+### ChrSearchbarComponent
+
+```typescript
+@Component({
+  inputs: {
+    model: string | null;     // Valeur actuelle
+    placeholder: string | null; // Texte d'aide
+    label: string | null;     // Label du champ
+  },
+  outputs: {
+    modelChange: string;      // Changement de valeur
+  }
+})
+```
+
+### ChrFormComponent
+
+```typescript
+@Component({
+  inputs: {
+    sections: IFormSection[];  // Sections avec contrôles groupés
+    controls: IControl[];      // Contrôles directs (utiliser l'un OU l'autre)
+  }
+})
+```
+
+**Interface IControl :**
+
+```typescript
+interface IControl {
+  name: string; // Nom unique du contrôle
+  type: InputType; // Type d'input
+  label?: string; // Label affiché
+  value?: any; // Valeur par défaut
+  validations?: IControlValidation[]; // Validations
+  data?: any[]; // Données pour select/options
+  // ... autres propriétés
+}
+```
+
+**Interface IFormSection :**
+
+```typescript
+interface IFormSection {
+  title?: string; // Titre de la section
+  controls: IControl[]; // Contrôles de la section
+}
+```
+
+### ChrSearchbarComponent
+
+```typescript
+@Component({
+  inputs: {
+    model: string | null;     // Valeur actuelle
+    placeholder: string | null; // Texte d'aide
+    label: string | null;     // Label du champ
+  },
+  outputs: {
+    modelChange: string;      // Changement de valeur
+  }
+})
+```
+
+### ChrPaginatorComponent
+
+```typescript
+@Component({
+  inputs: {
+    page: number;             // Page actuelle
+    pageSize: number;         // Nombre d'éléments par page
+    id: string;              // ID unique du paginateur
+    allowSizeChange: boolean | string; // Permet de changer la taille
+  },
+  outputs: {
+    pageChange: number;       // Changement de page
+    pageSizeChange: number;   // Changement de taille
+  }
+})
+```
+
+### ChrTagSelectComponent
+
+```typescript
+@Component({
+  inputs: {
+    placeholder: string;        // Texte d'aide dans l'input
+    data: any[] | null;        // Données pour l'autocomplete
+    display: (entry: any) => string; // Fonction d'affichage
+    filters: IInputSearchFilter[] | null; // Filtres de recherche
+    editCallback: Function;     // Callback de modification
+    addCallback: Function;      // Callback d'ajout
+    removeCallback: Function;   // Callback de suppression
+    acceptText: boolean | null; // Accepte le texte libre
+  }
+})
+```
+
+### ModalService
+
+```typescript
+class ModalService {
+  open<T>(component: ComponentType<T>, options?: ModalOptions): void;
+  close(): void;
+}
+
+interface ModalOptions {
+  closeOnBackdropClick?: boolean;
+  closeOnEscape?: boolean;
+  width?: number;
+  height?: number;
+  data?: any; // Données injectées via CHR_MODAL_DATA
+}
+```
+
+## 🎨 Thèmes et personnalisation
+
+### Variables CSS disponibles
+
+Les composants utilisent un système de variables CSS pour les couleurs. Vous pouvez les personnaliser en redéfinissant ces variables :
+
+```css
+:root {
+  --primary-color: #your-color;
+  --primary-contrast-color: #your-contrast-color;
+  --secondary-color: #your-secondary;
+  --secondary-contrast-color: #your-secondary-contrast;
+  --tertiary-color: #your-tertiary;
+  --tertiary-contrast-color: #your-tertiary-contrast;
+  --warn-color: #your-warn;
+  --warn-contrast-color: #your-warn-contrast;
+  --error-color: #your-error;
+  --error-contrast-color: #your-error-contrast;
+  --neutral-color: #your-neutral;
+  --text-color: #your-text;
+  --text-neutral-color: #your-text-neutral;
+}
+```
+
+### Classes CSS disponibles
+
+La bibliothèque fournit des classes utilitaires pour les couleurs :
+
+```css
+/* Arrière-plans */
+.bg-primary, .bg-secondary, .bg-tertiary, .bg-warn, .bg-error, .bg-neutral
+.bg-primary-contrast, .bg-secondary-contrast, .bg-tertiary-contrast, .bg-warn-contrast, .bg-error-contrast
+
+/* Texte */
+.text-primary, .text-secondary, .text-tertiary, .text-warn, .text-error, .text-neutral
+.text-primary-contrast, .text-secondary-contrast, .text-tertiary-contrast, .text-warn-contrast, .text-error-contrast
+
+/* Bordures */
+.border-primary, .border-secondary, .border-tertiary, .border-warn, .border-error
+.border-primary-contrast, .border-secondary-contrast, .border-tertiary-contrast, .border-warn-contrast, .border-error-contrast;
+```
+
+### Personnalisation avancée avec ::ng-deep
+
+Pour modifier les styles des composants compilés, utilisez `::ng-deep` :
+
+```scss
+// Dans votre composant .scss
+::ng-deep .chr-button {
+  border-radius: 8px;
+  font-weight: 600;
+}
+
+::ng-deep .chr-form .form-field {
+  margin-bottom: 16px;
+}
+
+::ng-deep .chr-modal .modal-backdrop {
+  background-color: rgba(0, 0, 0, 0.8);
+}
+```
+
+### Exemple de thème personnalisé
+
+```css
+/* Thème sombre personnalisé */
+:root {
+  --primary-color: #3b82f6;
+  --primary-contrast-color: #ffffff;
+  --secondary-color: #6b7280;
+  --secondary-contrast-color: #ffffff;
+  --tertiary-color: #f3f4f6;
+  --tertiary-contrast-color: #1f2937;
+  --warn-color: #f59e0b;
+  --warn-contrast-color: #ffffff;
+  --error-color: #ef4444;
+  --error-contrast-color: #ffffff;
+  --neutral-color: #e5e7eb;
+  --text-color: #1f2937;
+  --text-neutral-color: #6b7280;
+}
+```
+
+## 📦 Intégrations
+
+### Dépendances automatiques
+
+- **Angular Material** - Composants Material Design
+- **ngx-pagination** - Pagination avancée
+- **chrv-pipes** - Pipes utilitaires
+- **@microsoft/signalr** - Communication temps réel
+- **ngx-mask** - Masques de saisie
+
+### Interceptors et providers
+
+```typescript
+// Configuration automatique des interceptors
+import {
+  SpinnerInterceptor,
+  XsrfInterceptor,
+  xsrfProvider
+} from 'chrv-components';
+
+@NgModule({
+  providers: [
+    xsrfProvider,
+    { provide: HTTP_INTERCEPTORS, useClass: SpinnerInterceptor, multi: true },
+    { provide: HTTP_INTERCEPTORS, useClass: XsrfInterceptor, multi: true }
+  ]
+})
+```
+
+## 📝 Notes
+
+- Compatible Angular 16+
+- Composants standalone prêts pour le tree-shaking
+- Types TypeScript complets
+- Intégration Tailwind CSS native
+- Support des signaux Angular modernes
+
+## 📄 Licence
+
+MIT © CHRV Components