🎨 CHRV Components

Bibliothèque complète de composants Angular avec Tailwind CSS

📚 Documentation • 🚀 Installation • 💡 Exemples • 🛠️ API

✨ 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

# 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

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

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 :

<!-- 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

<app-chr-form [sections]="formSections"></app-chr-form>

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

<app-chr-form [controls]="formControls"></app-chr-form>

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 :

<app-chr-paginator [id]="'users-pagination'" [page]="currentPage" [pageSize]="itemsPerPage" [allowSizeChange]="true" (pageChange)="onPageChange($event)" (pageSizeChange)="onPageSizeChange($event)"> </app-chr-paginator>

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 :

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 :

<app-chr-tag-select [data]="availableData" [display]="displayFunction" [placeholder]="'Sélectionner des éléments...'" [acceptText]="true"> </app-chr-tag-select>

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 :

<!-- Spinner simple (contrôlé par LoaderService) -->
<app-chr-spinner></app-chr-spinner>

export class SpinnerExampleComponent {
  private loaderService = inject(LoaderService);

  showSpinner() {
    this.loaderService.show();
    // Simulation d'une tâche
    setTimeout(() => {
      this.loaderService.hide();
    }, 2000);
  }
}

🛠️ API

ChrButtonComponent

@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

@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

@Component({
  inputs: {
    sections: IFormSection[];  // Sections avec contrôles groupés
    controls: IControl[];      // Contrôles directs (utiliser l'un OU l'autre)
  }
})

Interface IControl :

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 :

interface IFormSection {
  title?: string; // Titre de la section
  controls: IControl[]; // Contrôles de la section
}

ChrSearchbarComponent

@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

@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

@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

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 :

: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 :

/* 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 :

// 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é

/* 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

// 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