chrv-components 1.11.0 → 1.11.2

package/README.md

@@ -1,25 +1,358 @@
-# ChrComponents
+# 🎨 CHRV Components
 
-This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 15.1.0.
+<div align="center">
 
-## Code scaffolding
+![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)
 
-Run `ng generate component component-name --project chrv-components` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project chrv-components`.
+**Bibliothèque complète de composants Angular avec Tailwind CSS**
 
-> Note: Don't forget to add `--project chrv-components` or else it will be added to the default project in your `angular.json` file.
+[📚 Documentation](#-documentation) • [🚀 Installation](#-installation) • [💡 Exemples](#-exemples) • [🛠️ API](#️-api)
 
-## Build
+</div>
 
-Run `ng build chrv-components` to build the project. The build artifacts will be stored in the `dist/` directory.
+## ✨ Composants disponibles
 
-## Publishing
+### 🪟 Système de Modal
 
-After building your library with `ng build chrv-components`, go to the dist folder `cd dist/chrv-components` and run `npm publish`.
+- **ChrModalComponent** - Modal de base avec backdrop et animations
+- **ModalService** - Service pour gérer les modals avec injection de tokens
 
-## Running unit tests
+### 📝 Formulaires et saisie
 
-Run `ng test chrv-components` to execute the unit tests via [Karma](https://karma-runner.github.io).
+- **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
 
-## Further help
+### 📊 Affichage de données
 
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
+- **ChrDataTableComponent** - Nouvelle version de table
+- **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
+
+### 🎛️ Directives
+
+- **TabInputOnlyHandlerDirective** - Gestion navigation par Tab
+- **TabToEnterHandlerDirective** - Conversion Tab vers Enter
+- **AutofocusDirective** - Focus automatique
+
+### 🛠️ 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
+# - ngx-mask
+```
+
+## ⚙️ 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, ChrSearchbarComponent } from "chrv-components";
+
+@Component({
+  selector: "app-example",
+  standalone: true,
+  imports: [ChrButtonComponent, ChrSearchbarComponent],
+  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 avec sections et contrôles :
+
+```html
+<app-chr-form [sections]="formSections" [controls]="formControls"> </app-chr-form>
+```
+
+```typescript
+export class FormExampleComponent {
+  formSections = [
+    {
+      title: "Informations personnelles",
+      controls: ["name", "email", "birthDate"],
+    },
+  ];
+
+  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 :
+
+```html
+<app-chr-searchbar [model]="searchTerm" [placeholder]="'Rechercher...'" [label]="'Recherche'" (modelChange)="onSearchChange($event)"> </app-chr-searchbar>
+```
+
+```typescript
+export class SearchExampleComponent {
+  searchTerm = "";
+
+  onSearchChange(term: string) {
+    this.searchTerm = term;
+    // Logique de recherche
+  }
+}
+```
+
+### 📊 ChrPaginatorComponent
+
+Pagination avec gestion automatique :
+
+```html
+<app-chr-paginator [id]="'users-pagination'" [maxSize]="5" [directionLinks]="true" [autoHide]="true"> </app-chr-paginator>
+```
+
+### 🪟 ModalService
+
+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";
+
+// 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(MODAL_DATA);
+  modalRef = inject(MODAL_REF);
+
+  close() {
+    this.modalRef.close();
+  }
+}
+
+// Utilisation du service
+export class ParentComponent {
+  private modalService = inject(ModalService);
+
+  openModal() {
+    this.modalService.open(MyModalComponent, {
+      title: "Confirmation",
+      message: "Êtes-vous sûr de vouloir continuer ?",
+    });
+  }
+}
+```
+
+### 🏷️ ChrTagSelectComponent
+
+Sélection multiple avec tags :
+
+```html
+<app-chr-tag-select [options]="availableOptions" [selected]="selectedValues" (selectionChange)="onSelectionChange($event)"> </app-chr-tag-select>
+```
+
+### 🔄 ChrSpinnerComponent
+
+Indicateur de chargement :
+
+```html
+<!-- Spinner simple -->
+<app-chr-spinner></app-chr-spinner>
+
+<!-- Spinner avec message -->
+<app-chr-spinner [message]="'Chargement en cours...'"></app-chr-spinner>
+```
+
+## 🛠️ 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: FormSection[];  // Sections du formulaire
+    controls: FormControls;   // Configuration des contrôles
+  }
+})
+```
+
+### ModalService
+
+```typescript
+class ModalService {
+  open<T>(component: ComponentType<T>, data?: any): void;
+  close(): void;
+}
+```
+
+## 🎨 Thèmes et styles
+
+Les composants utilisent Tailwind CSS et Angular Material. Vous pouvez personnaliser :
+
+- **Couleurs** : Via les tokens de couleur (primary, secondary, warn, etc.)
+- **Tailles** : Classes Tailwind CSS
+- **Animations** : Animations Angular intégrées
+
+## 📦 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
+
+## 🤝 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