chrv-components 1.11.3 → 1.11.5

package/README.md

@@ -37,24 +37,23 @@
 
 ### 📊 Affichage de données
 
-- **ChrDataTableComponent** - Nouvelle version de table
+- **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
-- **ChrButtonNewComponent** - Nouvelle version du bouton
 - **ChrSpinnerComponent** - Indicateur de chargement
 - **ChrToastComponent** - Notifications toast
-- **ChrSeparatorComponent** - Séparateur visuel
 - **ChrInlineSvgComponent** - Affichage SVG inline
 
 ### 🧭 Navigation
 
 - **ChrBreadcrumbComponent** - Fil d'Ariane de navigation
-- **ChrTabComponent** - Onglet individuel
-- **ChrTabGroupComponent** - Groupe d'onglets
-- **ChrCarouselComponent** - Carrousel d'images/contenu
+- **TabComponent** - Onglet individuel
+- **TabGroupComponent** - Groupe d'onglets
+- **CarouselComponent** - Carrousel d'images/contenu
 
 ### 🎛️ Directives
 
@@ -107,12 +106,12 @@ export class AppModule {}
 
 ```typescript
 import { Component } from "@angular/core";
-import { ChrButtonComponent, ChrSearchbarComponent } from "chrv-components";
+import { ChrButtonComponent, ChrFormComponent } from "chrv-components";
 
 @Component({
   selector: "app-example",
   standalone: true,
-  imports: [ChrButtonComponent, ChrSearchbarComponent],
+  imports: [ChrButtonComponent, ChrFormComponent],
   template: `...`,
 })
 export class ExampleComponent {}
@@ -137,54 +136,68 @@ Bouton personnalisable avec icônes et couleurs :
 
 ### 📝 ChrFormComponent
 
-Formulaire dynamique avec sections et contrôles :
+Formulaire dynamique basé sur l'interface IControl :
+
+**Option 1 : Avec sections**
 
 ```html
-<app-chr-form [sections]="formSections" [controls]="formControls"> </app-chr-form>
+<app-chr-form [sections]="formSections"></app-chr-form>
 ```
 
 ```typescript
 export class FormExampleComponent {
-  formSections = [
+  formSections: IFormSection[] = [
     {
       title: "Informations personnelles",
-      controls: ["name", "email", "birthDate"],
+      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" },
+      ],
     },
   ];
-
-  formControls = {
-    name: { type: "text", label: "Nom", required: true },
-    email: { type: "email", label: "Email", required: true },
-    birthDate: { type: "date", label: "Date de naissance" },
-  };
 }
 ```
 
-### 🔍 ChrSearchbarComponent
-
-Barre de recherche réactive :
+**Option 2 : Avec contrôles directement**
 
 ```html
-<app-chr-searchbar [model]="searchTerm" [placeholder]="'Rechercher...'" [label]="'Recherche'" (modelChange)="onSearchChange($event)"> </app-chr-searchbar>
+<app-chr-form [controls]="formControls"></app-chr-form>
 ```
 
 ```typescript
-export class SearchExampleComponent {
-  searchTerm = "";
-
-  onSearchChange(term: string) {
-    this.searchTerm = term;
-    // Logique de recherche
-  }
+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
+### ChrPaginatorComponent
 
 Pagination avec gestion automatique :
 
 ```html
-<app-chr-paginator [id]="'users-pagination'" [maxSize]="5" [directionLinks]="true" [autoHide]="true"> </app-chr-paginator>
+<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
@@ -193,7 +206,7 @@ Service pour gérer les modals avec injection de données :
 
 ```typescript
 import { Component, inject } from "@angular/core";
-import { ModalService, MODAL_DATA, MODAL_REF } from "chrv-components";
+import { ModalService, CHR_MODAL_DATA, CHR_MODAL_REF } from "chrv-components";
 
 // Composant de modal
 @Component({
@@ -206,8 +219,8 @@ import { ModalService, MODAL_DATA, MODAL_REF } from "chrv-components";
   `,
 })
 export class MyModalComponent {
-  data = inject(MODAL_DATA);
-  modalRef = inject(MODAL_REF);
+  data = inject(CHR_MODAL_DATA);
+  modalRef = inject(CHR_MODAL_REF);
 
   close() {
     this.modalRef.close();
@@ -220,8 +233,10 @@ export class ParentComponent {
 
   openModal() {
     this.modalService.open(MyModalComponent, {
-      title: "Confirmation",
-      message: "Êtes-vous sûr de vouloir continuer ?",
+      data: {
+        title: "Confirmation",
+        message: "Êtes-vous sûr de vouloir continuer ?",
+      },
     });
   }
 }
@@ -232,19 +247,42 @@ export class ParentComponent {
 Sélection multiple avec tags :
 
 ```html
-<app-chr-tag-select [options]="availableOptions" [selected]="selectedValues" (selectionChange)="onSelectionChange($event)"> </app-chr-tag-select>
+<app-chr-tag-select [data]="availableData" [display]="displayFunction" [placeholder]="'Sélectionner des éléments...'" [acceptText]="true"> </app-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 :
+Indicateur de chargement automatique :
 
 ```html
-<!-- Spinner simple -->
+<!-- Spinner simple (contrôlé par LoaderService) -->
 <app-chr-spinner></app-chr-spinner>
+```
 
-<!-- Spinner avec message -->
-<app-chr-spinner [message]="'Chargement en cours...'"></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
@@ -284,8 +322,80 @@ Indicateur de chargement :
 ```typescript
 @Component({
   inputs: {
-    sections: FormSection[];  // Sections du formulaire
-    controls: FormControls;   // Configuration des contrôles
+    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
   }
 })
 ```
@@ -294,18 +404,101 @@ Indicateur de chargement :
 
 ```typescript
 class ModalService {
-  open<T>(component: ComponentType<T>, data?: any): void;
+  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;
+}
 ```
 
-## 🎨 Thèmes et styles
+### 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` :
 
-Les composants utilisent Tailwind CSS et Angular Material. Vous pouvez personnaliser :
+```scss
+// Dans votre composant .scss
+::ng-deep .chr-button {
+  border-radius: 8px;
+  font-weight: 600;
+}
+
+::ng-deep .chr-form .form-field {
+  margin-bottom: 16px;
+}
 
-- **Couleurs** : Via les tokens de couleur (primary, secondary, warn, etc.)
-- **Tailles** : Classes Tailwind CSS
-- **Animations** : Animations Angular intégrées
+::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
 
@@ -344,15 +537,6 @@ import {
 - Intégration Tailwind CSS native
 - Support des signaux Angular modernes
 
-## 🤝 Contribution
-
-Les contributions sont les bienvenues ! Merci de respecter les conventions :
-
-1. Utiliser les signaux Angular (`input()`, `output()`)
-2. Préfixer les composants avec `chr-`
-3. Documenter les APIs publiques
-4. Tester les nouvelles fonctionnalités
-
 ## 📄 Licence
 
 MIT © CHRV Components

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chrv-components",
-  "version": "1.11.3",
+  "version": "1.11.5",
   "peerDependencies": {
     "@angular/common": ">=17.0.0",
     "@angular/core": ">=17.0.0",