@kksdev/ds-angular 1.2.5 → 1.4.0

package/index.d.ts

@@ -4084,6 +4084,10 @@ interface DateRange {
     start: Date | null;
     end: Date | null;
 }
+interface DatePreset {
+    label: string;
+    getValue: () => DateRange;
+}
 /**
  * DsDatePicker - Composant de sélection de date
  *
@@ -4122,6 +4126,12 @@ declare class DsDatePicker implements ControlValueAccessor, OnInit {
     readonly prevMonthLabel: _angular_core.InputSignal<string>;
     /** Label bouton mois suivant */
     readonly nextMonthLabel: _angular_core.InputSignal<string>;
+    /** Presets pour le mode range */
+    readonly presets: _angular_core.InputSignal<DatePreset[]>;
+    /** Afficher les presets */
+    readonly showPresets: _angular_core.InputSignal<boolean>;
+    /** Activer le preview au survol en mode range */
+    readonly showRangePreview: _angular_core.InputSignal<boolean>;
     /** Événement de changement de date (mode single) */
     readonly dateChange: _angular_core.OutputEmitterRef<Date | null>;
     /** Événement de changement de range */
@@ -4142,6 +4152,7 @@ declare class DsDatePicker implements ControlValueAccessor, OnInit {
     readonly rangeEnd: _angular_core.WritableSignal<Date | null>;
     readonly showMonthPicker: _angular_core.WritableSignal<boolean>;
     readonly showYearPicker: _angular_core.WritableSignal<boolean>;
+    readonly hoveredDate: _angular_core.WritableSignal<Date | null>;
     /** Callbacks CVA */
     private onChange;
     private onTouched;
@@ -4164,6 +4175,12 @@ declare class DsDatePicker implements ControlValueAccessor, OnInit {
     private isRangeStartDate;
     private isRangeEndDate;
     private isDateInRange;
+    private isDateInPreviewRange;
+    onDayMouseEnter(date: Date | null): void;
+    onDayMouseLeave(): void;
+    selectPreset(preset: DatePreset): void;
+    /** Presets effectifs (utilise les presets fournis ou les défauts) */
+    readonly effectivePresets: _angular_core.Signal<DatePreset[]>;
     private isDateDisabled;
     private isSameDay;
     private formatDateForAria;
@@ -4172,7 +4189,7 @@ declare class DsDatePicker implements ControlValueAccessor, OnInit {
     registerOnTouched(fn: () => void): void;
     setDisabledState(isDisabled: boolean): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsDatePicker, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsDatePicker, "ds-date-picker", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; "showTodayButton": { "alias": "showTodayButton"; "required": false; "isSignal": true; }; "showClearButton": { "alias": "showClearButton"; "required": false; "isSignal": true; }; "todayLabel": { "alias": "todayLabel"; "required": false; "isSignal": true; }; "clearLabel": { "alias": "clearLabel"; "required": false; "isSignal": true; }; "prevMonthLabel": { "alias": "prevMonthLabel"; "required": false; "isSignal": true; }; "nextMonthLabel": { "alias": "nextMonthLabel"; "required": false; "isSignal": true; }; }, { "dateChange": "dateChange"; "rangeChange": "rangeChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsDatePicker, "ds-date-picker", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; "showTodayButton": { "alias": "showTodayButton"; "required": false; "isSignal": true; }; "showClearButton": { "alias": "showClearButton"; "required": false; "isSignal": true; }; "todayLabel": { "alias": "todayLabel"; "required": false; "isSignal": true; }; "clearLabel": { "alias": "clearLabel"; "required": false; "isSignal": true; }; "prevMonthLabel": { "alias": "prevMonthLabel"; "required": false; "isSignal": true; }; "nextMonthLabel": { "alias": "nextMonthLabel"; "required": false; "isSignal": true; }; "presets": { "alias": "presets"; "required": false; "isSignal": true; }; "showPresets": { "alias": "showPresets"; "required": false; "isSignal": true; }; "showRangePreview": { "alias": "showRangePreview"; "required": false; "isSignal": true; }; }, { "dateChange": "dateChange"; "rangeChange": "rangeChange"; }, never, never, true, never>;
 }
 interface CalendarDay {
     date: Date;
@@ -4183,6 +4200,7 @@ interface CalendarDay {
     isRangeStart: boolean;
     isRangeEnd: boolean;
     isInRange: boolean;
+    isInPreviewRange: boolean;
     isDisabled: boolean;
     ariaLabel: string;
 }
@@ -4316,6 +4334,860 @@ declare class DsMenu implements OnDestroy {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMenu, "ds-menu", never, { "items": { "alias": "items"; "required": true; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "trigger": { "alias": "trigger"; "required": false; "isSignal": true; }; "closeOnSelect": { "alias": "closeOnSelect"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "itemSelected": "itemSelected"; "opened": "opened"; "closed": "closed"; }, never, ["[dsMenuTrigger]"], true, never>;
 }
 
+type ChipVariant = 'filled' | 'outlined';
+type ChipSize = 'sm' | 'md' | 'lg';
+type ChipColor = 'default' | 'primary' | 'success' | 'warning' | 'error';
+/**
+ * Design System Chip component
+ *
+ * @example
+ * ```html
+ * <ds-chip label="Tag" />
+ * <ds-chip label="Removable" [removable]="true" (removed)="onRemove()" />
+ * <ds-chip label="Clickable" [clickable]="true" (clicked)="onClick()" />
+ * <ds-chip label="With icon" icon="fas-star" />
+ * ```
+ */
+declare class DsChip {
+    readonly label: _angular_core.InputSignal<string>;
+    readonly variant: _angular_core.InputSignal<ChipVariant>;
+    readonly size: _angular_core.InputSignal<ChipSize>;
+    readonly color: _angular_core.InputSignal<ChipColor>;
+    readonly removable: _angular_core.InputSignal<boolean>;
+    readonly clickable: _angular_core.InputSignal<boolean>;
+    readonly selected: _angular_core.InputSignal<boolean>;
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    readonly icon: _angular_core.InputSignal<string>;
+    readonly avatar: _angular_core.InputSignal<string>;
+    readonly removed: _angular_core.OutputEmitterRef<void>;
+    readonly clicked: _angular_core.OutputEmitterRef<void>;
+    readonly selectedChange: _angular_core.OutputEmitterRef<boolean>;
+    readonly isSelected: _angular_core.WritableSignal<boolean>;
+    readonly closeIcon: IconDefinition;
+    readonly chipClasses: _angular_core.Signal<string>;
+    readonly role: _angular_core.Signal<"button" | null>;
+    readonly tabindex: _angular_core.Signal<0 | -1 | null>;
+    readonly ariaSelected: _angular_core.Signal<boolean | null>;
+    readonly ariaDisabled: _angular_core.Signal<true | null>;
+    /**
+     * Handle chip click
+     */
+    handleClick(event: MouseEvent): void;
+    /**
+     * Handle remove button click
+     */
+    handleRemove(event: MouseEvent): void;
+    /**
+     * Handle keyboard events
+     */
+    handleKeyDown(event: KeyboardEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsChip, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsChip, "ds-chip", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "removable": { "alias": "removable"; "required": false; "isSignal": true; }; "clickable": { "alias": "clickable"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "avatar": { "alias": "avatar"; "required": false; "isSignal": true; }; }, { "removed": "removed"; "clicked": "clicked"; "selectedChange": "selectedChange"; }, never, never, true, never>;
+}
+
+type SliderSize = 'sm' | 'md' | 'lg';
+type SliderValue = number | [number, number];
+type SliderOrientation = 'horizontal' | 'vertical';
+declare class DsSlider implements ControlValueAccessor {
+    min: _angular_core.InputSignal<number>;
+    max: _angular_core.InputSignal<number>;
+    step: _angular_core.InputSignal<number>;
+    disabled: _angular_core.InputSignal<boolean>;
+    size: _angular_core.InputSignal<SliderSize>;
+    range: _angular_core.InputSignal<boolean>;
+    orientation: _angular_core.InputSignal<SliderOrientation>;
+    showLabels: _angular_core.InputSignal<boolean>;
+    showTicks: _angular_core.InputSignal<boolean>;
+    tickInterval: _angular_core.InputSignal<number | undefined>;
+    formatLabel: _angular_core.InputSignal<((value: number) => string) | undefined>;
+    valueChange: _angular_core.OutputEmitterRef<SliderValue>;
+    trackElement?: ElementRef<HTMLDivElement>;
+    thumb1Element?: ElementRef<HTMLDivElement>;
+    thumb2Element?: ElementRef<HTMLDivElement>;
+    private readonly disabledState;
+    readonly internalValue: _angular_core.WritableSignal<SliderValue>;
+    readonly dragging: _angular_core.WritableSignal<number | null>;
+    readonly focusedThumb: _angular_core.WritableSignal<number>;
+    constructor();
+    readonly isDisabled: _angular_core.Signal<boolean>;
+    readonly isRange: _angular_core.Signal<boolean>;
+    readonly isVertical: _angular_core.Signal<boolean>;
+    readonly containerClasses: _angular_core.Signal<string>;
+    readonly value1: _angular_core.Signal<number>;
+    readonly value2: _angular_core.Signal<number>;
+    readonly percentage1: _angular_core.Signal<number>;
+    readonly percentage2: _angular_core.Signal<number>;
+    readonly thumb1Style: _angular_core.Signal<{
+        bottom: string;
+        left?: undefined;
+    } | {
+        left: string;
+        bottom?: undefined;
+    }>;
+    readonly thumb2Style: _angular_core.Signal<{
+        bottom?: undefined;
+        left?: undefined;
+    } | {
+        bottom: string;
+        left?: undefined;
+    } | {
+        left: string;
+        bottom?: undefined;
+    }>;
+    readonly fillStyle: _angular_core.Signal<{
+        bottom: string;
+        height: string;
+        left?: undefined;
+        width?: undefined;
+    } | {
+        left: string;
+        width: string;
+        bottom?: undefined;
+        height?: undefined;
+    }>;
+    readonly ticks: _angular_core.Signal<number[]>;
+    readonly label1: _angular_core.Signal<string>;
+    readonly label2: _angular_core.Signal<string>;
+    private onChange;
+    private onTouched;
+    writeValue(value: SliderValue | null): void;
+    registerOnChange(fn: (value: SliderValue) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    private valueToPercentage;
+    private percentageToValue;
+    private clampValue;
+    private emitValue;
+    onKeyDown(event: KeyboardEvent, thumbIndex: number): void;
+    onTrackClick(event: MouseEvent): void;
+    onThumbMouseDown(event: MouseEvent, thumbIndex: number): void;
+    private onMouseMove;
+    onThumbFocus(thumbIndex: number): void;
+    onThumbBlur(): void;
+    getTickPosition(value: number): number;
+    getTickLabel(value: number): string;
+    getAriaValueText(thumbIndex: number): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsSlider, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsSlider, "ds-slider", never, { "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "range": { "alias": "range"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "showLabels": { "alias": "showLabels"; "required": false; "isSignal": true; }; "showTicks": { "alias": "showTicks"; "required": false; "isSignal": true; }; "tickInterval": { "alias": "tickInterval"; "required": false; "isSignal": true; }; "formatLabel": { "alias": "formatLabel"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
+}
+
+/**
+ * Tailles disponibles pour le composant file upload.
+ */
+type FileUploadSize = 'sm' | 'md' | 'lg';
+/**
+ * Représente un fichier avec son état de chargement.
+ */
+interface UploadFile {
+    file: File;
+    preview?: string;
+    progress: number;
+    error?: string;
+}
+/**
+ * # DsFileUpload
+ *
+ * Composant de téléchargement de fichiers avec support drag & drop,
+ * validation, preview et barre de progression.
+ *
+ * ## Usage
+ *
+ * ```html
+ * <!-- Upload simple -->
+ * <ds-file-upload
+ *   [accept]="'image/*'"
+ *   [maxFileSize]="5242880"
+ *   (filesChange)="onFilesChange($event)">
+ * </ds-file-upload>
+ *
+ * <!-- Upload multiple avec preview -->
+ * <ds-file-upload
+ *   [multiple]="true"
+ *   [showPreview]="true"
+ *   [maxFiles]="5"
+ *   size="lg">
+ * </ds-file-upload>
+ * ```
+ *
+ * ## Accessibilité
+ *
+ * - Input natif avec label accessible
+ * - Drag & drop avec feedback ARIA
+ * - Messages d'erreur associés via aria-describedby
+ *
+ * @component
+ */
+declare class DsFileUpload implements ControlValueAccessor {
+    /**
+     * Types de fichiers acceptés (ex: 'image/*,.pdf').
+     * @default '*'
+     */
+    accept: _angular_core.InputSignal<string>;
+    /**
+     * Taille maximale d'un fichier en bytes.
+     * @default 10485760 (10 MB)
+     */
+    maxFileSize: _angular_core.InputSignal<number>;
+    /**
+     * Nombre maximum de fichiers.
+     * @default 1
+     */
+    maxFiles: _angular_core.InputSignal<number>;
+    /**
+     * Permet la sélection multiple de fichiers.
+     * @default false
+     */
+    multiple: _angular_core.InputSignal<boolean>;
+    /**
+     * Désactive le composant.
+     * @default false
+     */
+    disabled: _angular_core.InputSignal<boolean>;
+    /**
+     * Taille du composant.
+     * @default 'md'
+     */
+    size: _angular_core.InputSignal<FileUploadSize>;
+    /**
+     * Affiche une preview pour les images.
+     * @default true
+     */
+    showPreview: _angular_core.InputSignal<boolean>;
+    /**
+     * Label personnalisé pour le bouton.
+     */
+    label: _angular_core.InputSignal<string>;
+    /**
+     * Texte d'aide pour le drag & drop.
+     */
+    dragHelpText: _angular_core.InputSignal<string>;
+    /**
+     * Événement émis lors du changement de fichiers.
+     */
+    filesChange: _angular_core.OutputEmitterRef<File[]>;
+    /**
+     * Événement émis lors de la suppression d'un fichier.
+     */
+    fileRemoved: _angular_core.OutputEmitterRef<File>;
+    /**
+     * Événement émis lors de la progression de l'upload.
+     */
+    uploadProgress: _angular_core.OutputEmitterRef<{
+        file: File;
+        progress: number;
+    }>;
+    readonly faCloudArrowUp: _fortawesome_fontawesome_common_types.IconDefinition;
+    readonly faXmark: _fortawesome_fontawesome_common_types.IconDefinition;
+    readonly faFile: _fortawesome_fontawesome_common_types.IconDefinition;
+    readonly faFileImage: _fortawesome_fontawesome_common_types.IconDefinition;
+    readonly faFilePdf: _fortawesome_fontawesome_common_types.IconDefinition;
+    readonly faFileWord: _fortawesome_fontawesome_common_types.IconDefinition;
+    readonly faFileExcel: _fortawesome_fontawesome_common_types.IconDefinition;
+    readonly fileInput: _angular_core.Signal<ElementRef<HTMLInputElement> | undefined>;
+    readonly files: _angular_core.WritableSignal<UploadFile[]>;
+    readonly isDragging: _angular_core.WritableSignal<boolean>;
+    readonly errorMessage: _angular_core.WritableSignal<string>;
+    private onChange;
+    private onTouched;
+    /**
+     * Classes CSS calculées pour le conteneur (public pour tests).
+     */
+    readonly containerClasses: _angular_core.Signal<string[]>;
+    /**
+     * Nombre de fichiers actuellement sélectionnés (public pour tests).
+     */
+    readonly fileCount: _angular_core.Signal<number>;
+    /**
+     * Vérifie si la limite de fichiers est atteinte (public pour tests).
+     */
+    readonly isMaxFilesReached: _angular_core.Signal<boolean>;
+    /**
+     * Ouvre le sélecteur de fichiers.
+     */
+    openFileSelector(): void;
+    /**
+     * Gère la sélection de fichiers via l'input.
+     */
+    onFileSelect(event: Event): void;
+    /**
+     * Gère le début du drag.
+     */
+    onDragEnter(event: DragEvent): void;
+    /**
+     * Gère le survol pendant le drag.
+     */
+    onDragOver(event: DragEvent): void;
+    /**
+     * Gère la sortie du drag.
+     */
+    onDragLeave(event: DragEvent): void;
+    /**
+     * Gère le drop des fichiers.
+     */
+    onDrop(event: DragEvent): void;
+    /**
+     * Traite les fichiers sélectionnés ou déposés.
+     */
+    private handleFiles;
+    /**
+     * Valide un fichier (taille, type).
+     */
+    private validateFile;
+    /**
+     * Génère une preview pour les images.
+     */
+    private generatePreview;
+    /**
+     * Simule l'upload avec progression (pour démonstration).
+     * Dans une vraie application, remplacer par un vrai upload HTTP.
+     */
+    private simulateUpload;
+    /**
+     * Retire un fichier de la liste.
+     */
+    removeFile(uploadFile: UploadFile): void;
+    /**
+     * Notifie le changement de valeur.
+     */
+    private notifyChange;
+    /**
+     * Retourne l'icône appropriée pour le type de fichier (public pour tests).
+     */
+    getFileIcon(file: File): _fortawesome_fontawesome_common_types.IconDefinition;
+    /**
+     * Formate la taille du fichier en MB ou KB (public pour tests).
+     */
+    formatFileSize(bytes: number): string;
+    writeValue(value: File[] | null): void;
+    registerOnChange(fn: (value: File[] | null) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsFileUpload, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsFileUpload, "ds-file-upload", never, { "accept": { "alias": "accept"; "required": false; "isSignal": true; }; "maxFileSize": { "alias": "maxFileSize"; "required": false; "isSignal": true; }; "maxFiles": { "alias": "maxFiles"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "showPreview": { "alias": "showPreview"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "dragHelpText": { "alias": "dragHelpText"; "required": false; "isSignal": true; }; }, { "filesChange": "filesChange"; "fileRemoved": "fileRemoved"; "uploadProgress": "uploadProgress"; }, never, never, true, never>;
+}
+
+/**
+ * Tailles disponibles pour le composant Empty.
+ */
+type EmptySize = 'sm' | 'md' | 'lg';
+/**
+ * # DsEmpty
+ *
+ * Composant d'état vide standardisé permettant d'afficher un message
+ * lorsqu'aucune donnée n'est disponible, avec une illustration optionnelle.
+ *
+ * ## Usage
+ *
+ * ```html
+ * <ds-empty
+ *   title="Aucun résultat"
+ *   description="Essayez de modifier vos filtres"
+ *   [icon]="faSearch">
+ *   <button ds-button (click)="resetFilters()">Réinitialiser</button>
+ * </ds-empty>
+ * ```
+ *
+ * ## Accessibilité
+ *
+ * - Utilise `role="region"` avec `aria-label` descriptif
+ * - Icônes décoratives avec `aria-hidden="true"`
+ * - Support des actions via content projection
+ *
+ * @component
+ */
+declare class DsEmpty {
+    /**
+     * Titre principal de l'état vide.
+     * @default 'Aucune donnée'
+     */
+    title: _angular_core.InputSignal<string>;
+    /**
+     * Description complémentaire optionnelle.
+     */
+    description: _angular_core.InputSignal<string>;
+    /**
+     * Icône FontAwesome à afficher.
+     * @default faInbox
+     */
+    icon: _angular_core.InputSignal<IconDefinition>;
+    /**
+     * URL d'une image personnalisée (illustration ou SVG).
+     * Si fournie, prend le pas sur l'icône FontAwesome.
+     */
+    imageUrl: _angular_core.InputSignal<string>;
+    /**
+     * Taille du composant (affecte l'icône et les espacements).
+     * @default 'md'
+     */
+    size: _angular_core.InputSignal<EmptySize>;
+    /**
+     * Classes CSS calculées pour le conteneur.
+     */
+    readonly containerClasses: _angular_core.Signal<string>;
+    /**
+     * Classes CSS calculées pour l'icône.
+     */
+    readonly iconClasses: _angular_core.Signal<string>;
+    /**
+     * Classes CSS calculées pour l'image.
+     */
+    readonly imageClasses: _angular_core.Signal<string>;
+    /**
+     * Détermine si une image doit être affichée.
+     */
+    readonly hasImage: _angular_core.Signal<boolean>;
+    /**
+     * Détermine si une description est fournie.
+     */
+    readonly hasDescription: _angular_core.Signal<boolean>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsEmpty, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsEmpty, "ds-empty", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "imageUrl": { "alias": "imageUrl"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+/**
+ * Tailles disponibles pour le composant Rating.
+ */
+type RatingSize = 'sm' | 'md' | 'lg';
+/**
+ * # DsRating
+ *
+ * Composant de notation par étoiles permettant d'afficher et de saisir
+ * une note sur une échelle configurable (par défaut 0-5).
+ *
+ * ## Usage
+ *
+ * ```html
+ * <ds-rating
+ *   [(value)]="rating"
+ *   [max]="5"
+ *   [allowHalf]="true"
+ *   (ratingChange)="handleRatingChange($event)" />
+ * ```
+ *
+ * ## Intégration formulaires
+ *
+ * ```html
+ * <form [formGroup]="form">
+ *   <ds-rating formControlName="rating" />
+ * </form>
+ * ```
+ *
+ * ## Accessibilité
+ *
+ * - Navigation clavier : ArrowLeft/Right pour changer la note
+ * - Attributs ARIA : role, aria-label, aria-valuenow/valuemin/valuemax
+ * - Focus visible sur les étoiles
+ *
+ * @component
+ */
+declare class DsRating implements ControlValueAccessor {
+    /**
+     * Valeur actuelle de la notation (0 à max).
+     * @default 0
+     */
+    value: _angular_core.InputSignal<number>;
+    /**
+     * Valeur maximale de la notation.
+     * @default 5
+     */
+    max: _angular_core.InputSignal<number>;
+    /**
+     * Taille du composant (affecte la taille des étoiles).
+     * @default 'md'
+     */
+    size: _angular_core.InputSignal<RatingSize>;
+    /**
+     * Permet la saisie de demi-étoiles (notes 0.5, 1.5, etc.).
+     * @default false
+     */
+    allowHalf: _angular_core.InputSignal<boolean>;
+    /**
+     * Mode lecture seule (affichage uniquement).
+     * @default false
+     */
+    readonly: _angular_core.InputSignal<boolean>;
+    /**
+     * État désactivé (pas d'interaction).
+     * @default false
+     */
+    disabled: _angular_core.InputSignal<boolean>;
+    /**
+     * Émis lorsque la notation change.
+     */
+    ratingChange: _angular_core.OutputEmitterRef<number>;
+    /**
+     * État interne de la valeur (ControlValueAccessor).
+     */
+    readonly internalValue: _angular_core.WritableSignal<number>;
+    /**
+     * État de survol (pour aperçu avant clic).
+     */
+    readonly hoverValue: _angular_core.WritableSignal<number | null>;
+    /**
+     * Callbacks ControlValueAccessor.
+     */
+    private onChange;
+    private onTouched;
+    /**
+     * Icônes FontAwesome pour les étoiles.
+     */
+    protected readonly faStar: _fortawesome_fontawesome_common_types.IconDefinition;
+    protected readonly faStarHalf: _fortawesome_fontawesome_common_types.IconDefinition;
+    /**
+     * Tableau des indices d'étoiles pour le rendu.
+     */
+    readonly stars: _angular_core.Signal<number[]>;
+    /**
+     * Valeur affichée (avec prise en compte du survol).
+     */
+    readonly displayValue: _angular_core.Signal<number>;
+    /**
+     * Classes CSS calculées pour le conteneur.
+     */
+    readonly containerClasses: _angular_core.Signal<string>;
+    /**
+     * Détermine le type d'icône à afficher pour une étoile donnée.
+     * - 'full' : étoile pleine
+     * - 'half' : demi-étoile
+     * - 'empty' : étoile vide
+     */
+    getStarType(index: number): 'full' | 'half' | 'empty';
+    /**
+     * Gère le clic sur une étoile.
+     */
+    handleStarClick(index: number, event: MouseEvent): void;
+    /**
+     * Gère le survol d'une étoile.
+     */
+    handleStarHover(index: number, event: MouseEvent): void;
+    /**
+     * Réinitialise le survol.
+     */
+    handleMouseLeave(): void;
+    /**
+     * Navigation clavier (ArrowLeft/Right).
+     */
+    handleKeyDown(event: KeyboardEvent): void;
+    /**
+     * Met à jour la valeur interne et notifie les changements.
+     */
+    private updateValue;
+    writeValue(value: number): void;
+    registerOnChange(fn: (value: number) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsRating, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsRating, "ds-rating", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "allowHalf": { "alias": "allowHalf"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "ratingChange": "ratingChange"; }, never, never, true, never>;
+}
+
+/**
+ * Position du drawer (gauche ou droite).
+ */
+type DrawerPosition = 'left' | 'right';
+/**
+ * Tailles disponibles pour le drawer.
+ */
+type DrawerSize = 'sm' | 'md' | 'lg' | 'full';
+/**
+ * # DsDrawer
+ *
+ * Composant de panneau latéral overlay avec animation slide-in/out.
+ * Utilise CDK Overlay pour le backdrop et le focus trap.
+ *
+ * ## Usage
+ *
+ * ```html
+ * <ds-drawer
+ *   [(visible)]="isDrawerOpen"
+ *   position="right"
+ *   size="md"
+ *   title="Détails"
+ *   [closable]="true"
+ *   (closed)="onDrawerClose()">
+ *   <!-- Header -->
+ *   <ng-template #header>
+ *     <h3>Mon en-tête personnalisé</h3>
+ *   </ng-template>
+ *
+ *   <!-- Body -->
+ *   <p>Contenu du drawer</p>
+ *
+ *   <!-- Footer -->
+ *   <ng-template #footer>
+ *     <button>Annuler</button>
+ *     <button>Valider</button>
+ *   </ng-template>
+ * </ds-drawer>
+ * ```
+ *
+ * ## Accessibilité
+ *
+ * - Focus trap : le focus reste dans le drawer
+ * - Navigation clavier : Escape pour fermer
+ * - Attributs ARIA : role, aria-labelledby, aria-modal
+ *
+ * @component
+ */
+declare class DsDrawer implements AfterViewInit, OnDestroy {
+    /**
+     * Visibilité du drawer.
+     * @default false
+     */
+    visible: _angular_core.InputSignal<boolean>;
+    /**
+     * Position du drawer (left/right).
+     * @default 'right'
+     */
+    position: _angular_core.InputSignal<DrawerPosition>;
+    /**
+     * Taille du drawer.
+     * @default 'md'
+     */
+    size: _angular_core.InputSignal<DrawerSize>;
+    /**
+     * Titre affiché dans le header (optionnel).
+     */
+    title: _angular_core.InputSignal<string>;
+    /**
+     * Affiche le bouton de fermeture.
+     * @default true
+     */
+    closable: _angular_core.InputSignal<boolean>;
+    /**
+     * Ferme le drawer au clic sur le backdrop.
+     * @default true
+     */
+    maskClosable: _angular_core.InputSignal<boolean>;
+    /**
+     * Émis lorsque la visibilité change.
+     */
+    visibleChange: _angular_core.OutputEmitterRef<boolean>;
+    /**
+     * Émis lorsque le drawer est fermé.
+     */
+    closed: _angular_core.OutputEmitterRef<void>;
+    /**
+     * Référence au conteneur du drawer.
+     */
+    drawerContainer?: ElementRef<HTMLElement>;
+    /**
+     * État interne de visibilité pour gérer l'animation.
+     */
+    protected isOpen: _angular_core.WritableSignal<boolean>;
+    protected isAnimating: _angular_core.WritableSignal<boolean>;
+    /**
+     * Indique si la vue est prête.
+     */
+    private viewReady;
+    /**
+     * Focus trap pour confiner la navigation clavier.
+     */
+    private focusTrap;
+    /**
+     * Services injectés.
+     */
+    private readonly documentRef;
+    private readonly focusTrapFactory;
+    /**
+     * Icône de fermeture.
+     */
+    protected readonly closeIcon: _fortawesome_fontawesome_common_types.IconDefinition;
+    /**
+     * ID unique pour l'accessibilité.
+     */
+    private readonly drawerId;
+    readonly drawerTitleId: string;
+    /**
+     * Classes CSS calculées pour le conteneur.
+     */
+    readonly containerClasses: _angular_core.Signal<string>;
+    /**
+     * Classes CSS calculées pour le backdrop.
+     */
+    readonly backdropClasses: _angular_core.Signal<string>;
+    constructor();
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    /**
+     * Ouvre le drawer avec animation.
+     */
+    private openDrawer;
+    /**
+     * Ferme le drawer avec animation.
+     */
+    private closeDrawer;
+    /**
+     * Gère la fermeture du drawer.
+     */
+    handleClose(): void;
+    /**
+     * Gère le clic sur le backdrop.
+     */
+    handleBackdropClick(): void;
+    /**
+     * Gère la touche Escape.
+     */
+    handleKeyDown(event: KeyboardEvent): void;
+    /**
+     * Attache le focus trap.
+     */
+    private attachFocusTrap;
+    /**
+     * Détache le focus trap.
+     */
+    private detachFocusTrap;
+    /**
+     * Place le focus sur le premier élément focusable.
+     */
+    private focusInitialElement;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsDrawer, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsDrawer, "ds-drawer", never, { "visible": { "alias": "visible"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "closable": { "alias": "closable"; "required": false; "isSignal": true; }; "maskClosable": { "alias": "maskClosable"; "required": false; "isSignal": true; }; }, { "visibleChange": "visibleChange"; "closed": "closed"; }, never, ["[drawer-header]", "*", "[drawer-footer]"], true, never>;
+}
+
+type TimePickerSize = 'sm' | 'md' | 'lg';
+type TimeFormat = '12h' | '24h';
+interface TimeValue {
+    hours: number;
+    minutes: number;
+    seconds?: number;
+}
+/**
+ * DsTimePicker - Composant de sélection d'heure
+ *
+ * @description
+ * Sélecteur d'heure avec dropdown scrollable, support 12h/24h,
+ * et intégration formulaires via ControlValueAccessor.
+ *
+ * @example
+ * ```html
+ * <ds-time-picker
+ *   [format]="'24h'"
+ *   [showSeconds]="true"
+ *   (timeChange)="onTimeChange($event)">
+ * </ds-time-picker>
+ * ```
+ */
+declare class DsTimePicker implements ControlValueAccessor {
+    private overlay;
+    readonly value: _angular_core.InputSignal<string>;
+    readonly format: _angular_core.InputSignal<TimeFormat>;
+    readonly showSeconds: _angular_core.InputSignal<boolean>;
+    readonly minuteStep: _angular_core.InputSignal<number>;
+    readonly hourStep: _angular_core.InputSignal<number>;
+    readonly size: _angular_core.InputSignal<TimePickerSize>;
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    readonly readonly: _angular_core.InputSignal<boolean>;
+    readonly placeholder: _angular_core.InputSignal<string>;
+    readonly minTime: _angular_core.InputSignal<string | null>;
+    readonly maxTime: _angular_core.InputSignal<string | null>;
+    readonly timeChange: _angular_core.OutputEmitterRef<string>;
+    readonly clockIcon: _fortawesome_fontawesome_common_types.IconDefinition;
+    readonly upIcon: _fortawesome_fontawesome_common_types.IconDefinition;
+    readonly downIcon: _fortawesome_fontawesome_common_types.IconDefinition;
+    readonly isOpen: _angular_core.WritableSignal<boolean>;
+    readonly internalValue: _angular_core.WritableSignal<string>;
+    readonly isFocused: _angular_core.WritableSignal<boolean>;
+    private overlayRef;
+    readonly containerClasses: _angular_core.Signal<string>;
+    readonly displayValue: _angular_core.Signal<string>;
+    readonly isDisabled: _angular_core.Signal<boolean>;
+    private onChange;
+    private onTouched;
+    constructor(overlay: Overlay);
+    writeValue(value: string): void;
+    registerOnChange(fn: (value: string) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    toggle(): void;
+    open(): void;
+    close(): void;
+    onFocus(): void;
+    onBlur(): void;
+    onTimeSelected(timeString: string): void;
+    private updateValue;
+    private createOverlay;
+    private destroyOverlay;
+    private parseTime;
+    private formatTimeForDisplay;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsTimePicker, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsTimePicker, "ds-time-picker", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "format": { "alias": "format"; "required": false; "isSignal": true; }; "showSeconds": { "alias": "showSeconds"; "required": false; "isSignal": true; }; "minuteStep": { "alias": "minuteStep"; "required": false; "isSignal": true; }; "hourStep": { "alias": "hourStep"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "minTime": { "alias": "minTime"; "required": false; "isSignal": true; }; "maxTime": { "alias": "maxTime"; "required": false; "isSignal": true; }; }, { "timeChange": "timeChange"; }, never, never, true, never>;
+}
+
+type TreeSize = 'sm' | 'md' | 'lg';
+interface TreeNode {
+    id: string | number;
+    label: string;
+    children?: TreeNode[];
+    icon?: string;
+    disabled?: boolean;
+    expanded?: boolean;
+    checked?: boolean;
+    data?: any;
+}
+interface TreeNodeSelectEvent {
+    node: TreeNode;
+    selected: boolean;
+}
+interface TreeNodeExpandEvent {
+    node: TreeNode;
+    expanded: boolean;
+}
+interface TreeNodeCheckEvent {
+    node: TreeNode;
+    checked: boolean;
+}
+/**
+ * DsTree - Composant d'affichage hiérarchique
+ *
+ * @description
+ * Arbre hiérarchique avec support de sélection, checkbox,
+ * expand/collapse, et navigation clavier.
+ *
+ * @example
+ * ```html
+ * <ds-tree
+ *   [data]="treeData"
+ *   [selectable]="true"
+ *   (nodeSelect)="onNodeSelect($event)">
+ * </ds-tree>
+ * ```
+ */
+declare class DsTree {
+    readonly data: _angular_core.InputSignal<TreeNode[]>;
+    readonly selectable: _angular_core.InputSignal<boolean>;
+    readonly checkable: _angular_core.InputSignal<boolean>;
+    readonly expandAll: _angular_core.InputSignal<boolean>;
+    readonly showIcon: _angular_core.InputSignal<boolean>;
+    readonly showLine: _angular_core.InputSignal<boolean>;
+    readonly draggable: _angular_core.InputSignal<boolean>;
+    readonly virtualScroll: _angular_core.InputSignal<boolean>;
+    readonly size: _angular_core.InputSignal<TreeSize>;
+    readonly loadChildren: _angular_core.InputSignal<((node: TreeNode) => Promise<TreeNode[]>) | null>;
+    readonly nodeSelect: _angular_core.OutputEmitterRef<TreeNodeSelectEvent>;
+    readonly nodeExpand: _angular_core.OutputEmitterRef<TreeNodeExpandEvent>;
+    readonly nodeCheck: _angular_core.OutputEmitterRef<TreeNodeCheckEvent>;
+    readonly selectedNodeId: _angular_core.WritableSignal<string | number | null>;
+    readonly expandedNodeIds: _angular_core.WritableSignal<Set<string | number>>;
+    readonly checkedNodeIds: _angular_core.WritableSignal<Set<string | number>>;
+    readonly containerClasses: _angular_core.Signal<string>;
+    readonly processedData: _angular_core.Signal<TreeNode[]>;
+    constructor();
+    onNodeClick(node: TreeNode): void;
+    onNodeToggle(node: TreeNode): void;
+    onNodeCheck(node: TreeNode, checked: boolean): void;
+    isSelected(nodeId: string | number): boolean;
+    isExpanded(nodeId: string | number): boolean;
+    isChecked(nodeId: string | number): boolean;
+    getIndeterminateState(node: TreeNode): boolean;
+    private toggleExpand;
+    private setNodeChecked;
+    private updateChildrenChecked;
+    private expandAllNodes;
+    private initializeExpandedState;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsTree, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsTree, "ds-tree", never, { "data": { "alias": "data"; "required": false; "isSignal": true; }; "selectable": { "alias": "selectable"; "required": false; "isSignal": true; }; "checkable": { "alias": "checkable"; "required": false; "isSignal": true; }; "expandAll": { "alias": "expandAll"; "required": false; "isSignal": true; }; "showIcon": { "alias": "showIcon"; "required": false; "isSignal": true; }; "showLine": { "alias": "showLine"; "required": false; "isSignal": true; }; "draggable": { "alias": "draggable"; "required": false; "isSignal": true; }; "virtualScroll": { "alias": "virtualScroll"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "loadChildren": { "alias": "loadChildren"; "required": false; "isSignal": true; }; }, { "nodeSelect": "nodeSelect"; "nodeExpand": "nodeExpand"; "nodeCheck": "nodeCheck"; }, never, never, true, never>;
+}
+
 /**
  * Positions standard pour dropdowns (menus déroulants, select, etc.)
  *
@@ -4684,5 +5556,5 @@ declare class DsI18nService {
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<DsI18nService>;
 }
 
-export { AUTOCOMPLETE_POSITIONS, BUTTON_APPEARANCE_OPTIONS, BUTTON_SIZE_OPTIONS, BUTTON_VARIANT_OPTIONS, DROPDOWN_POSITIONS, DsAccordion, DsAlert, DsAvatar, DsBadge, DsBreadcrumb, DsButton, DsCard, DsCheckbox, DsCombobox, DsContainer, DsDatePicker, DsDivider, DsDropdown, DsI18nService, DsInputField, DsInputTextarea, DsMenu, DsModalComponent, DsPagination, DsPopover, DsPopoverComponent, DsProgressBar, DsRadioGroup, DsSearchInput, DsSelect, DsSkeleton, DsStepper, DsTable, DsTabs, DsToastComponent, DsToastContainerComponent, DsToastService, DsToggle, DsTooltip, DsTooltipComponent, IconRegistryService, POPOVER_POSITIONS, PrimitiveBadge, PrimitiveButton, PrimitiveCheckbox, PrimitiveInput, PrimitiveRadio, PrimitiveTextarea, PrimitiveToggle, TOOLTIP_POSITIONS, buildButtonArgTypes, buildButtonArgs, createSizeRender, createVariantRender };
-export type { AccordionChangeEvent, AccordionItem, AccordionSize, AccordionVariant, AlertSize, AlertType, AvatarShape, AvatarSize, BadgeAppearance, BadgeShape, BadgeSize, BadgeType, BadgeVariant, BreadcrumbItem, ButtonAppearance, ButtonSize, ButtonType, ButtonVariant, CardSize, CardVariant, CheckboxSize, CheckboxState, ContainerGutter, ContainerMaxWidth, DatePickerMode, DatePickerSize, DateRange, DividerLabelPosition, DividerOrientation, DividerSize, DividerVariant, DropdownItem, DropdownItemDTO, DsComboboxOption, DsComboboxSize, DsSelectOption, DsSelectSize, DsTableColumn, DsTableSize, DsTableVariant, I18nLabels, InputAppearance, InputSize, InputState, InputType, MenuItem, MenuSize, MenuTrigger, PageChangeEvent, PageSizeOption, PaginationSize, PopoverTrigger, ProgressBarMode, ProgressBarSize, ProgressBarVariant, RadioGroupLayout, RadioOption, RadioSize, SearchInputSize, SkeletonSize, SkeletonVariant, SortDirection, SortEvent, Step, StepChangeEvent, StepState, StepperOrientation, StepperSize, SupportedLocale, TabItem, TableState, TextareaAppearance, TextareaResize, TextareaSize, TextareaState, ToastInstance, ToastOptions, ToastPosition, ToastType, ToggleSize };
+export { AUTOCOMPLETE_POSITIONS, BUTTON_APPEARANCE_OPTIONS, BUTTON_SIZE_OPTIONS, BUTTON_VARIANT_OPTIONS, DROPDOWN_POSITIONS, DsAccordion, DsAlert, DsAvatar, DsBadge, DsBreadcrumb, DsButton, DsCard, DsCheckbox, DsChip, DsCombobox, DsContainer, DsDatePicker, DsDivider, DsDrawer, DsDropdown, DsEmpty, DsFileUpload, DsI18nService, DsInputField, DsInputTextarea, DsMenu, DsModalComponent, DsPagination, DsPopover, DsPopoverComponent, DsProgressBar, DsRadioGroup, DsRating, DsSearchInput, DsSelect, DsSkeleton, DsSlider, DsStepper, DsTable, DsTabs, DsTimePicker, DsToastComponent, DsToastContainerComponent, DsToastService, DsToggle, DsTooltip, DsTooltipComponent, DsTree, IconRegistryService, POPOVER_POSITIONS, PrimitiveBadge, PrimitiveButton, PrimitiveCheckbox, PrimitiveInput, PrimitiveRadio, PrimitiveTextarea, PrimitiveToggle, TOOLTIP_POSITIONS, buildButtonArgTypes, buildButtonArgs, createSizeRender, createVariantRender };
+export type { AccordionChangeEvent, AccordionItem, AccordionSize, AccordionVariant, AlertSize, AlertType, AvatarShape, AvatarSize, BadgeAppearance, BadgeShape, BadgeSize, BadgeType, BadgeVariant, BreadcrumbItem, ButtonAppearance, ButtonSize, ButtonType, ButtonVariant, CardSize, CardVariant, CheckboxSize, CheckboxState, ChipColor, ChipSize, ChipVariant, ContainerGutter, ContainerMaxWidth, DatePickerMode, DatePickerSize, DateRange, DividerLabelPosition, DividerOrientation, DividerSize, DividerVariant, DrawerPosition, DrawerSize, DropdownItem, DropdownItemDTO, DsComboboxOption, DsComboboxSize, DsSelectOption, DsSelectSize, DsTableColumn, DsTableSize, DsTableVariant, EmptySize, FileUploadSize, I18nLabels, InputAppearance, InputSize, InputState, InputType, MenuItem, MenuSize, MenuTrigger, PageChangeEvent, PageSizeOption, PaginationSize, PopoverTrigger, ProgressBarMode, ProgressBarSize, ProgressBarVariant, RadioGroupLayout, RadioOption, RadioSize, RatingSize, SearchInputSize, SkeletonSize, SkeletonVariant, SliderOrientation, SliderSize, SliderValue, SortDirection, SortEvent, Step, StepChangeEvent, StepState, StepperOrientation, StepperSize, SupportedLocale, TabItem, TableState, TextareaAppearance, TextareaResize, TextareaSize, TextareaState, TimeFormat, TimePickerSize, TimeValue, ToastInstance, ToastOptions, ToastPosition, ToastType, ToggleSize, TreeNode, TreeNodeCheckEvent, TreeNodeExpandEvent, TreeNodeSelectEvent, TreeSize, UploadFile };