chrv-components 1.11.4 → 1.11.6

package/README.md

@@ -83,7 +83,6 @@ npm install chrv-components
 # - ngx-pagination
 # - chrv-pipes
 # - @microsoft/signalr
-# - ngx-mask
 ```
 
 ## ⚙️ Configuration
@@ -106,12 +105,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 {}
@@ -177,31 +176,27 @@ export class FormExampleComponent {
 }
 ```
 
-### 🔍 ChrSearchbarComponent
+### ChrPaginatorComponent
 
-Barre de recherche réactive :
+Pagination avec gestion automatique :
 
 ```html
-<app-chr-searchbar [model]="searchTerm" [placeholder]="'Rechercher...'" [label]="'Recherche'" (modelChange)="onSearchChange($event)"> </app-chr-searchbar>
+<app-chr-paginator [id]="'users-pagination'" [page]="currentPage" [pageSize]="itemsPerPage" [allowSizeChange]="true" (pageChange)="onPageChange($event)" (pageSizeChange)="onPageSizeChange($event)"> </app-chr-paginator>
 ```
 
 ```typescript
-export class SearchExampleComponent {
-  searchTerm = "";
+export class PaginationExampleComponent {
+  currentPage = 1;
+  itemsPerPage = 20;
 
-  onSearchChange(term: string) {
-    this.searchTerm = term;
-    // Logique de recherche
+  onPageChange(page: number) {
+    this.currentPage = page;
   }
-}
-```
-
-### 📊 ChrPaginatorComponent
 
-Pagination avec gestion automatique :
-
-```html
-<app-chr-paginator [id]="'users-pagination'" [maxSize]="5" [directionLinks]="true" [autoHide]="true"> </app-chr-paginator>
+  onPageSizeChange(size: number) {
+    this.itemsPerPage = size;
+  }
+}
 ```
 
 ### 🪟 ModalService
@@ -251,19 +246,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
@@ -332,6 +350,55 @@ interface IFormSection {
 }
 ```
 
+### 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
@@ -469,15 +536,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