# 🎨 CHRV Components
**Bibliothèque complète de composants Angular avec Tailwind CSS**
[📚 Documentation](#-documentation) • [🚀 Installation](#-installation) • [💡 Exemples](#-exemples) • [🛠️ API](#️-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
```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
```
## ⚙️ 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, 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 :
```html
```
### 📝 ChrFormComponent
Formulaire dynamique basé sur l'interface IControl :
**Option 1 : Avec sections**
```html
```
```typescript
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**
```html
```
```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" },
];
}
```
### ChrPaginatorComponent
Pagination avec gestion automatique :
```html
```
```typescript
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 :
```typescript
import { Component, inject } from "@angular/core";
import { ModalService, CHR_MODAL_DATA, CHR_MODAL_REF } from "chrv-components";
// Composant de modal
@Component({
template: `
{{ data.title }}
{{ data.message }}
`,
})
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 :
```html
```
```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 automatique :
```html
```
```typescript
export class SpinnerExampleComponent {
private loaderService = inject(LoaderService);
showSpinner() {
this.loaderService.show();
// Simulation d'une tâche
setTimeout(() => {
this.loaderService.hide();
}, 2000);
}
}
```
## 🛠️ 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: 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
}
})
```
### ModalService
```typescript
class ModalService {
open(component: ComponentType, 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;
```
### 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;
}
::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
### 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
## 📄 Licence
MIT © CHRV Components