chrv-components 1.11.3 → 1.11.4

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
 
@@ -137,26 +136,44 @@ 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" },
+      ],
     },
   ];
+}
+```
+
+**Option 2 : Avec contrôles directement**
+
+```html
+<app-chr-form [controls]="formControls"></app-chr-form>
+```
 
-  formControls = {
-    name: { type: "text", label: "Nom", required: true },
-    email: { type: "email", label: "Email", required: true },
-    birthDate: { type: "date", label: "Date de naissance" },
-  };
+```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" },
+  ];
 }
 ```
 
@@ -193,7 +210,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 +223,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 +237,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 ?",
+      },
     });
   }
 }
@@ -284,28 +303,134 @@ 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
+}
+```
+
 ### ModalService
 
 ```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;
+}
+```
+
+### 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;
 ```
 
-## 🎨 Thèmes et styles
+### 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;
+}
 
-Les composants utilisent Tailwind CSS et Angular Material. Vous pouvez personnaliser :
+::ng-deep .chr-modal .modal-backdrop {
+  background-color: rgba(0, 0, 0, 0.8);
+}
+```
 
-- **Couleurs** : Via les tokens de couleur (primary, secondary, warn, etc.)
-- **Tailles** : Classes Tailwind CSS
-- **Animations** : Animations Angular intégrées
+### 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
 

package/package.json

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