@kksdev/ds-angular 1.4.0 → 1.6.0

package/fesm2022/kksdev-ds-angular.mjs

@@ -1,12 +1,12 @@
 import * as i0 from '@angular/core';
-import { input, Component, output, HostBinding, model, signal, computed, forwardRef, effect, ElementRef, ViewChildren, ViewChild, EventEmitter, inject, HostListener, ContentChild, Output, Directive, DestroyRef, Injectable, ChangeDetectionStrategy, viewChild } from '@angular/core';
+import { input, Component, output, HostBinding, model, signal, computed, forwardRef, effect, ElementRef, ViewChildren, ViewChild, EventEmitter, inject, HostListener, ContentChild, Output, Directive, DestroyRef, Injectable, ChangeDetectionStrategy, viewChild, ViewEncapsulation } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule, DOCUMENT, NgClass } from '@angular/common';
 import * as i1$1 from '@fortawesome/angular-fontawesome';
 import { FaIconComponent, FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import * as i1$4 from '@angular/forms';
 import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { faInfoCircle, faTimesCircle, faExclamationTriangle, faCheckCircle, faTimes, faEye, faEyeSlash, faClose, faCircleInfo, faCircleXmark, faCircleExclamation, faCircleCheck, faChevronDown, faChevronLeft, faChevronRight, faAnglesLeft, faAnglesRight, faCheck, faSearch, faXmark, faSpinner, faCalendar, faCloudArrowUp, faFile, faFileImage, faFilePdf, faFileWord, faFileExcel, faInbox, faStar, faStarHalfStroke, faClock, faChevronUp, faFolder, faFolderOpen } from '@fortawesome/free-solid-svg-icons';
+import { faInfoCircle, faTimesCircle, faExclamationTriangle, faCheckCircle, faTimes, faEye, faEyeSlash, faClose, faCircleInfo, faCircleXmark, faCircleExclamation, faCircleCheck, faChevronDown, faChevronLeft, faChevronRight, faAnglesLeft, faAnglesRight, faCheck, faSearch, faXmark, faSpinner, faCalendar, faCloudArrowUp, faFile, faFileImage, faFilePdf, faFileWord, faFileExcel, faInbox, faStar, faStarHalfStroke, faClock, faChevronUp, faFolder, faFolderOpen, faCircle, faCircleHalfStroke, faTriangleExclamation, faMinus, faPlus, faEyeDropper } from '@fortawesome/free-solid-svg-icons';
 import * as i1$2 from '@angular/router';
 import { RouterModule } from '@angular/router';
 import * as i1$3 from '@angular/cdk/overlay';
@@ -10163,6 +10163,2738 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
             args: [{ selector: 'ds-tree', standalone: true, imports: [CommonModule, DsTreeNodeComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"containerClasses()\" role=\"tree\">\n  @if (processedData().length === 0) {\n    <div class=\"ds-tree__empty\">\n      <p>No data available</p>\n    </div>\n  } @else {\n    @for (node of processedData(); track node.id) {\n      <ds-tree-node\n        [node]=\"node\"\n        [level]=\"0\"\n        [selectable]=\"selectable()\"\n        [checkable]=\"checkable()\"\n        [showIcon]=\"showIcon()\"\n        [selectedNodeId]=\"selectedNodeId()\"\n        [expandedNodeIds]=\"expandedNodeIds()\"\n        [checkedNodeIds]=\"checkedNodeIds()\"\n        [getIndeterminateState]=\"getIndeterminateState.bind(this)\"\n        (nodeClick)=\"onNodeClick($event)\"\n        (nodeToggle)=\"onNodeToggle($event)\"\n        (nodeCheck)=\"onNodeCheck($event.node, $event.checked)\">\n      </ds-tree-node>\n    }\n  }\n</div>\n", styles: [".ds-tree{display:block;width:100%;background-color:var(--tree-bg, var(--white));border:1px solid var(--tree-border, var(--gray-300));border-radius:var(--radius-2);padding:var(--space-2);max-height:400px;overflow-y:auto}.ds-tree__empty{display:flex;align-items:center;justify-content:center;padding:var(--space-8);color:var(--text-muted, var(--gray-500));font-size:var(--font-size-sm)}.ds-tree--sm{font-size:var(--font-size-sm);padding:var(--space-1)}.ds-tree--lg{font-size:var(--font-size-lg);padding:var(--space-3)}.ds-tree::-webkit-scrollbar{width:8px}.ds-tree::-webkit-scrollbar-track{background:var(--gray-100);border-radius:var(--radius-1)}.ds-tree::-webkit-scrollbar-thumb{background:var(--gray-400);border-radius:var(--radius-1)}.ds-tree::-webkit-scrollbar-thumb:hover{background:var(--gray-500)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], checkable: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkable", required: false }] }], expandAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandAll", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], showLine: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLine", required: false }] }], draggable: [{ type: i0.Input, args: [{ isSignal: true, alias: "draggable", required: false }] }], virtualScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScroll", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], loadChildren: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadChildren", required: false }] }], nodeSelect: [{ type: i0.Output, args: ["nodeSelect"] }], nodeExpand: [{ type: i0.Output, args: ["nodeExpand"] }], nodeCheck: [{ type: i0.Output, args: ["nodeCheck"] }] } });
 
+/**
+ * # DsPasswordStrength
+ *
+ * Composant indicateur de force de mot de passe avec affichage visuel
+ * (barres de progression) et optionnel des critères de validation.
+ *
+ * ## Usage
+ *
+ * ```html
+ * <ds-password-strength
+ *   [password]="userPassword"
+ *   [minLength]="8"
+ *   [showLabel]="true"
+ *   [showCriteria]="true"
+ *   (strengthChange)="handleStrengthChange($event)" />
+ * ```
+ *
+ * ## Calcul de la force
+ *
+ * - `none`: Champ vide
+ * - `weak`: Longueur < minLength OU uniquement lettres
+ * - `medium`: Longueur ≥ minLength ET (lettres+chiffres OU lettres+spéciaux)
+ * - `strong`: Longueur ≥ minLength ET majuscules + minuscules + chiffres + spéciaux
+ *
+ * ## Accessibilité
+ *
+ * - Attribut `role="status"` pour annoncer les changements
+ * - Label ARIA dynamique selon la force
+ * - Couleurs sémantiques (error/warning/success)
+ *
+ * @component
+ */
+class DsPasswordStrength {
+    /**
+     * Mot de passe à évaluer.
+     * @default ''
+     */
+    password = input('', ...(ngDevMode ? [{ debugName: "password" }] : []));
+    /**
+     * Longueur minimale requise.
+     * @default 8
+     */
+    minLength = input(8, ...(ngDevMode ? [{ debugName: "minLength" }] : []));
+    /**
+     * Afficher le label textuel (ex: "Faible", "Moyen", "Fort").
+     * @default true
+     */
+    showLabel = input(true, ...(ngDevMode ? [{ debugName: "showLabel" }] : []));
+    /**
+     * Afficher les critères détaillés de validation.
+     * @default false
+     */
+    showCriteria = input(false, ...(ngDevMode ? [{ debugName: "showCriteria" }] : []));
+    /**
+     * Taille du composant.
+     * @default 'md'
+     */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    /**
+     * Émis lorsque la force du mot de passe change.
+     */
+    strengthChange = output();
+    /**
+     * Icônes FontAwesome pour les critères.
+     */
+    faCheck = faCheck;
+    faTimes = faTimes;
+    /**
+     * Regex patterns pour la validation.
+     */
+    hasUpperCase = /[A-Z]/;
+    hasLowerCase = /[a-z]/;
+    hasNumber = /[0-9]/;
+    hasSpecialChar = /[^A-Za-z0-9]/;
+    /**
+     * Calcul de la force du mot de passe.
+     */
+    strength = computed(() => {
+        const pwd = this.password();
+        const minLen = this.minLength();
+        if (!pwd || pwd.length === 0) {
+            return 'none';
+        }
+        const hasUpper = this.hasUpperCase.test(pwd);
+        const hasLower = this.hasLowerCase.test(pwd);
+        const hasNum = this.hasNumber.test(pwd);
+        const hasSpecial = this.hasSpecialChar.test(pwd);
+        const lengthValid = pwd.length >= minLen;
+        // Weak: longueur insuffisante OU uniquement lettres
+        if (!lengthValid) {
+            return 'weak';
+        }
+        const hasLetters = hasUpper || hasLower;
+        const hasOnlyLetters = hasLetters && !hasNum && !hasSpecial;
+        if (hasOnlyLetters) {
+            return 'weak';
+        }
+        // Strong: toutes les catégories présentes
+        if (hasUpper && hasLower && hasNum && hasSpecial) {
+            return 'strong';
+        }
+        // Medium: au moins deux catégories
+        return 'medium';
+    }, ...(ngDevMode ? [{ debugName: "strength" }] : []));
+    /**
+     * Label textuel de la force (pour affichage).
+     */
+    strengthLabel = computed(() => {
+        const labels = {
+            none: '',
+            weak: 'Faible',
+            medium: 'Moyen',
+            strong: 'Fort',
+        };
+        return labels[this.strength()];
+    }, ...(ngDevMode ? [{ debugName: "strengthLabel" }] : []));
+    /**
+     * Label ARIA pour accessibilité.
+     */
+    ariaLabel = computed(() => {
+        const str = this.strength();
+        if (str === 'none') {
+            return 'Force du mot de passe : non définie';
+        }
+        return `Force du mot de passe : ${this.strengthLabel()}`;
+    }, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    /**
+     * Classes CSS calculées pour le conteneur.
+     */
+    containerClasses = computed(() => {
+        return [
+            'ds-password-strength',
+            `ds-password-strength--${this.size()}`,
+            `ds-password-strength--${this.strength()}`,
+        ].filter(Boolean).join(' ');
+    }, ...(ngDevMode ? [{ debugName: "containerClasses" }] : []));
+    /**
+     * Barres indicatrices (3 barres).
+     * Chaque barre est active selon la force.
+     */
+    bars = computed(() => {
+        const str = this.strength();
+        const barCount = 3;
+        const activeCount = {
+            none: 0,
+            weak: 1,
+            medium: 2,
+            strong: 3,
+        };
+        const count = activeCount[str];
+        return Array.from({ length: barCount }, (_, index) => ({
+            active: index < count,
+            level: str,
+        }));
+    }, ...(ngDevMode ? [{ debugName: "bars" }] : []));
+    /**
+     * Liste des critères de validation (pour affichage détaillé).
+     */
+    criteria = computed(() => {
+        const pwd = this.password();
+        const minLen = this.minLength();
+        return [
+            {
+                key: 'length',
+                label: `Au moins ${minLen} caractères`,
+                valid: pwd.length >= minLen,
+            },
+            {
+                key: 'uppercase',
+                label: 'Contient des majuscules',
+                valid: this.hasUpperCase.test(pwd),
+            },
+            {
+                key: 'lowercase',
+                label: 'Contient des minuscules',
+                valid: this.hasLowerCase.test(pwd),
+            },
+            {
+                key: 'number',
+                label: 'Contient des chiffres',
+                valid: this.hasNumber.test(pwd),
+            },
+            {
+                key: 'special',
+                label: 'Contient des caractères spéciaux',
+                valid: this.hasSpecialChar.test(pwd),
+            },
+        ];
+    }, ...(ngDevMode ? [{ debugName: "criteria" }] : []));
+    /**
+     * Constructeur : émet les changements de force via effect.
+     */
+    constructor() {
+        let previousStrength = 'none';
+        // Émettre strengthChange à chaque changement
+        effect(() => {
+            const currentStrength = this.strength();
+            if (currentStrength !== previousStrength) {
+                previousStrength = currentStrength;
+                this.strengthChange.emit(currentStrength);
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsPasswordStrength, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DsPasswordStrength, isStandalone: true, selector: "ds-password-strength", inputs: { password: { classPropertyName: "password", publicName: "password", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, showCriteria: { classPropertyName: "showCriteria", publicName: "showCriteria", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { strengthChange: "strengthChange" }, ngImport: i0, template: "<div [ngClass]=\"containerClasses()\" role=\"status\" [attr.aria-label]=\"ariaLabel()\">\n  <!-- Barres indicatrices (3 barres) -->\n  <div class=\"ds-password-strength__bars\">\n    @for (bar of bars(); track $index) {\n      <div\n        class=\"ds-password-strength__bar\"\n        [class.ds-password-strength__bar--active]=\"bar.active\"\n        [class.ds-password-strength__bar--weak]=\"bar.active && bar.level === 'weak'\"\n        [class.ds-password-strength__bar--medium]=\"bar.active && bar.level === 'medium'\"\n        [class.ds-password-strength__bar--strong]=\"bar.active && bar.level === 'strong'\">\n      </div>\n    }\n  </div>\n\n  <!-- Label optionnel -->\n  @if (showLabel() && strength() !== 'none') {\n    <span\n      class=\"ds-password-strength__label\"\n      [class]=\"'ds-password-strength__label--' + strength()\">\n      {{ strengthLabel() }}\n    </span>\n  }\n\n  <!-- Crit\u00E8res d\u00E9taill\u00E9s optionnels -->\n  @if (showCriteria()) {\n    <ul class=\"ds-password-strength__criteria\">\n      @for (criterion of criteria(); track criterion.key) {\n        <li\n          class=\"ds-password-strength__criterion\"\n          [class.ds-password-strength__criterion--valid]=\"criterion.valid\">\n          <fa-icon [icon]=\"criterion.valid ? faCheck : faTimes\" />\n          <span>{{ criterion.label }}</span>\n        </li>\n      }\n    </ul>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";.ds-password-strength{display:flex;flex-direction:column;gap:var(--password-strength-label-gap)}.ds-password-strength__bars{display:flex;gap:var(--password-strength-bar-gap);align-items:center}.ds-password-strength__bar{flex:1;height:var(--password-strength-bar-height-md);background-color:var(--password-strength-bg);border-radius:var(--password-strength-bar-radius);transition:background-color .3s ease}.ds-password-strength__bar--active.ds-password-strength__bar--weak{background-color:var(--password-strength-weak)}.ds-password-strength__bar--active.ds-password-strength__bar--medium{background-color:var(--password-strength-medium)}.ds-password-strength__bar--active.ds-password-strength__bar--strong{background-color:var(--password-strength-strong)}.ds-password-strength__label{font-size:var(--password-strength-label-font-size);color:var(--password-strength-text);font-weight:var(--font-weight-medium);text-align:right}.ds-password-strength__label--weak{color:var(--password-strength-weak)}.ds-password-strength__label--medium{color:var(--password-strength-medium)}.ds-password-strength__label--strong{color:var(--password-strength-strong)}.ds-password-strength__criteria{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-1)}.ds-password-strength__criterion{display:flex;align-items:center;gap:var(--space-2);font-size:var(--font-size-2);color:var(--password-strength-criterion-invalid);transition:color .2s ease}.ds-password-strength__criterion fa-icon{font-size:.875rem}.ds-password-strength__criterion--valid{color:var(--password-strength-criterion-valid)}.ds-password-strength--sm .ds-password-strength__bar{height:var(--password-strength-bar-height-sm)}.ds-password-strength--sm .ds-password-strength__label,.ds-password-strength--sm .ds-password-strength__criterion{font-size:var(--font-size-1)}.ds-password-strength--md .ds-password-strength__bar{height:var(--password-strength-bar-height-md)}.ds-password-strength--md .ds-password-strength__label{font-size:var(--password-strength-label-font-size)}.ds-password-strength--md .ds-password-strength__criterion{font-size:var(--font-size-2)}.ds-password-strength--lg .ds-password-strength__bar{height:var(--password-strength-bar-height-lg)}.ds-password-strength--lg .ds-password-strength__label,.ds-password-strength--lg .ds-password-strength__criterion{font-size:var(--font-size-3)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i1$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsPasswordStrength, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-password-strength', imports: [CommonModule, FontAwesomeModule], template: "<div [ngClass]=\"containerClasses()\" role=\"status\" [attr.aria-label]=\"ariaLabel()\">\n  <!-- Barres indicatrices (3 barres) -->\n  <div class=\"ds-password-strength__bars\">\n    @for (bar of bars(); track $index) {\n      <div\n        class=\"ds-password-strength__bar\"\n        [class.ds-password-strength__bar--active]=\"bar.active\"\n        [class.ds-password-strength__bar--weak]=\"bar.active && bar.level === 'weak'\"\n        [class.ds-password-strength__bar--medium]=\"bar.active && bar.level === 'medium'\"\n        [class.ds-password-strength__bar--strong]=\"bar.active && bar.level === 'strong'\">\n      </div>\n    }\n  </div>\n\n  <!-- Label optionnel -->\n  @if (showLabel() && strength() !== 'none') {\n    <span\n      class=\"ds-password-strength__label\"\n      [class]=\"'ds-password-strength__label--' + strength()\">\n      {{ strengthLabel() }}\n    </span>\n  }\n\n  <!-- Crit\u00E8res d\u00E9taill\u00E9s optionnels -->\n  @if (showCriteria()) {\n    <ul class=\"ds-password-strength__criteria\">\n      @for (criterion of criteria(); track criterion.key) {\n        <li\n          class=\"ds-password-strength__criterion\"\n          [class.ds-password-strength__criterion--valid]=\"criterion.valid\">\n          <fa-icon [icon]=\"criterion.valid ? faCheck : faTimes\" />\n          <span>{{ criterion.label }}</span>\n        </li>\n      }\n    </ul>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";.ds-password-strength{display:flex;flex-direction:column;gap:var(--password-strength-label-gap)}.ds-password-strength__bars{display:flex;gap:var(--password-strength-bar-gap);align-items:center}.ds-password-strength__bar{flex:1;height:var(--password-strength-bar-height-md);background-color:var(--password-strength-bg);border-radius:var(--password-strength-bar-radius);transition:background-color .3s ease}.ds-password-strength__bar--active.ds-password-strength__bar--weak{background-color:var(--password-strength-weak)}.ds-password-strength__bar--active.ds-password-strength__bar--medium{background-color:var(--password-strength-medium)}.ds-password-strength__bar--active.ds-password-strength__bar--strong{background-color:var(--password-strength-strong)}.ds-password-strength__label{font-size:var(--password-strength-label-font-size);color:var(--password-strength-text);font-weight:var(--font-weight-medium);text-align:right}.ds-password-strength__label--weak{color:var(--password-strength-weak)}.ds-password-strength__label--medium{color:var(--password-strength-medium)}.ds-password-strength__label--strong{color:var(--password-strength-strong)}.ds-password-strength__criteria{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-1)}.ds-password-strength__criterion{display:flex;align-items:center;gap:var(--space-2);font-size:var(--font-size-2);color:var(--password-strength-criterion-invalid);transition:color .2s ease}.ds-password-strength__criterion fa-icon{font-size:.875rem}.ds-password-strength__criterion--valid{color:var(--password-strength-criterion-valid)}.ds-password-strength--sm .ds-password-strength__bar{height:var(--password-strength-bar-height-sm)}.ds-password-strength--sm .ds-password-strength__label,.ds-password-strength--sm .ds-password-strength__criterion{font-size:var(--font-size-1)}.ds-password-strength--md .ds-password-strength__bar{height:var(--password-strength-bar-height-md)}.ds-password-strength--md .ds-password-strength__label{font-size:var(--password-strength-label-font-size)}.ds-password-strength--md .ds-password-strength__criterion{font-size:var(--font-size-2)}.ds-password-strength--lg .ds-password-strength__bar{height:var(--password-strength-bar-height-lg)}.ds-password-strength--lg .ds-password-strength__label,.ds-password-strength--lg .ds-password-strength__criterion{font-size:var(--font-size-3)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { password: [{ type: i0.Input, args: [{ isSignal: true, alias: "password", required: false }] }], minLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minLength", required: false }] }], showLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabel", required: false }] }], showCriteria: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCriteria", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], strengthChange: [{ type: i0.Output, args: ["strengthChange"] }] } });
+
+/**
+ * # DsTimeline
+ *
+ * Composant pour afficher une liste d'événements dans un ordre chronologique vertical.
+ *
+ * ## Usage
+ *
+ * ```html
+ * <ds-timeline
+ *   [items]="events"
+ *   mode="left"
+ *   size="md"
+ *   [pending]="false"
+ *   (itemClick)="onItemClick($event)">
+ * </ds-timeline>
+ * ```
+ *
+ * ## Modes
+ *
+ * - `left` : Contenu aligné à droite de la ligne
+ * - `right` : Contenu aligné à gauche de la ligne
+ * - `alternate` : Contenu alterné gauche/droite
+ *
+ * ## Accessibilité
+ *
+ * - Liste sémantique avec `role="list"` et `role="listitem"`
+ * - Dates et contenus avec attributs ARIA
+ * - Navigation clavier supportée
+ *
+ * @component
+ */
+class DsTimeline {
+    /**
+     * Liste des événements à afficher.
+     */
+    items = input.required(...(ngDevMode ? [{ debugName: "items" }] : []));
+    /**
+     * Mode d'affichage (position du contenu).
+     * @default 'left'
+     */
+    mode = input('left', ...(ngDevMode ? [{ debugName: "mode" }] : []));
+    /**
+     * Taille du composant.
+     * @default 'md'
+     */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    /**
+     * Affiche un indicateur "en cours" à la fin.
+     * @default false
+     */
+    pending = input(false, ...(ngDevMode ? [{ debugName: "pending" }] : []));
+    /**
+     * Texte de l'indicateur pending.
+     * @default 'En cours...'
+     */
+    pendingContent = input('En cours...', ...(ngDevMode ? [{ debugName: "pendingContent" }] : []));
+    /**
+     * Inverse l'ordre d'affichage (plus récent en haut).
+     * @default false
+     */
+    reverse = input(false, ...(ngDevMode ? [{ debugName: "reverse" }] : []));
+    /**
+     * Événement émis au clic sur un item.
+     */
+    itemClick = output();
+    /**
+     * Icônes par défaut.
+     */
+    defaultIcon = faCircle;
+    pendingIcon = faCircleHalfStroke;
+    /**
+     * Items triés (reverse si demandé).
+     */
+    sortedItems = computed(() => {
+        const items = [...this.items()];
+        return this.reverse() ? items.reverse() : items;
+    }, ...(ngDevMode ? [{ debugName: "sortedItems" }] : []));
+    /**
+     * Classes CSS du conteneur.
+     */
+    containerClasses = computed(() => {
+        return [
+            'ds-timeline',
+            `ds-timeline--${this.mode()}`,
+            `ds-timeline--${this.size()}`,
+        ].filter(Boolean);
+    }, ...(ngDevMode ? [{ debugName: "containerClasses" }] : []));
+    /**
+     * Classes CSS pour un item.
+     */
+    getItemClasses(item, index) {
+        const position = this.getItemPosition(index);
+        return [
+            'ds-timeline__item',
+            `ds-timeline__item--${position}`,
+            item.color ? `ds-timeline__item--${item.color}` : 'ds-timeline__item--default',
+        ].filter(Boolean);
+    }
+    /**
+     * Classes CSS pour le point d'un item.
+     */
+    getDotClasses(item) {
+        return [
+            'ds-timeline__dot',
+            item.icon ? 'ds-timeline__dot--with-icon' : '',
+            item.color ? `ds-timeline__dot--${item.color}` : 'ds-timeline__dot--default',
+        ].filter(Boolean);
+    }
+    /**
+     * Détermine la position d'un item en fonction du mode.
+     */
+    getItemPosition(index) {
+        const mode = this.mode();
+        if (mode === 'left')
+            return 'right'; // Contenu à droite de la ligne
+        if (mode === 'right')
+            return 'left'; // Contenu à gauche de la ligne
+        // Mode alternate : alterner selon l'index
+        return index % 2 === 0 ? 'right' : 'left';
+    }
+    /**
+     * Gère le clic sur un item.
+     */
+    handleItemClick(item, index) {
+        this.itemClick.emit({ item, index });
+    }
+    /**
+     * Gère la touche Enter/Space sur un item.
+     */
+    handleKeydown(event, item, index) {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.handleItemClick(item, index);
+        }
+    }
+    /**
+     * Icône à afficher pour un item.
+     */
+    getIcon(item) {
+        return item.icon || this.defaultIcon;
+    }
+    /**
+     * Vérifie si c'est le dernier item.
+     */
+    isLastItem(index) {
+        return index === this.sortedItems().length - 1;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsTimeline, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DsTimeline, isStandalone: true, selector: "ds-timeline", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, pending: { classPropertyName: "pending", publicName: "pending", isSignal: true, isRequired: false, transformFunction: null }, pendingContent: { classPropertyName: "pendingContent", publicName: "pendingContent", isSignal: true, isRequired: false, transformFunction: null }, reverse: { classPropertyName: "reverse", publicName: "reverse", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick" }, ngImport: i0, template: "<div [ngClass]=\"containerClasses()\" role=\"list\" aria-label=\"Timeline\">\n  @for (item of sortedItems(); track $index) {\n    <div\n      [ngClass]=\"getItemClasses(item, $index)\"\n      role=\"listitem\"\n      tabindex=\"0\"\n      (click)=\"handleItemClick(item, $index)\"\n      (keydown)=\"handleKeydown($event, item, $index)\"\n      [class.ds-timeline__item--last]=\"isLastItem($index) && !pending()\">\n\n      <!-- Point de la timeline -->\n      <div [ngClass]=\"getDotClasses(item)\" [attr.aria-label]=\"item.date || '\u00C9v\u00E9nement'\">\n        @if (item.icon) {\n          <fa-icon [icon]=\"getIcon(item)\" class=\"ds-timeline__icon\" aria-hidden=\"true\"></fa-icon>\n        }\n      </div>\n\n      <!-- Ligne de connexion -->\n      @if (!isLastItem($index) || pending()) {\n        <div class=\"ds-timeline__line\" aria-hidden=\"true\"></div>\n      }\n\n      <!-- Contenu -->\n      <div class=\"ds-timeline__content\">\n        @if (item.date) {\n          <div class=\"ds-timeline__date\">{{ item.date }}</div>\n        }\n        <div class=\"ds-timeline__text\">{{ item.content }}</div>\n      </div>\n    </div>\n  }\n\n  <!-- Indicateur pending -->\n  @if (pending()) {\n    <div\n      class=\"ds-timeline__item ds-timeline__item--pending ds-timeline__item--{{ getItemPosition(sortedItems().length) }}\"\n      role=\"listitem\">\n      <div class=\"ds-timeline__dot ds-timeline__dot--pending ds-timeline__dot--with-icon\">\n        <fa-icon [icon]=\"pendingIcon\" class=\"ds-timeline__icon ds-timeline__icon--pending\" aria-hidden=\"true\"></fa-icon>\n      </div>\n      <div class=\"ds-timeline__content\">\n        <div class=\"ds-timeline__text ds-timeline__text--pending\">{{ pendingContent() }}</div>\n      </div>\n    </div>\n  }\n</div>\n", styles: [".ds-timeline{display:flex;flex-direction:column;position:relative;width:100%}.ds-timeline__item{position:relative;display:grid;padding-bottom:var(--timeline-item-gap);cursor:pointer;transition:opacity .2s ease}.ds-timeline__item:focus{outline:2px solid var(--color-primary);outline-offset:2px;border-radius:var(--radius-1)}.ds-timeline__item:focus-visible{outline:2px solid var(--color-primary)}.ds-timeline__item--last{padding-bottom:0}.ds-timeline__item--pending{cursor:default;animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}.ds-timeline--left .ds-timeline__item{grid-template-columns:auto 1fr;grid-template-areas:\"dot content\" \"line content\"}.ds-timeline--right .ds-timeline__item{grid-template-columns:1fr auto;grid-template-areas:\"content dot\" \"content line\";text-align:right}.ds-timeline--right .ds-timeline__item .ds-timeline__content{padding-left:0;padding-right:var(--timeline-content-gap)}.ds-timeline--alternate .ds-timeline__item--left{grid-template-columns:1fr auto;grid-template-areas:\"content dot\" \"content line\";text-align:right}.ds-timeline--alternate .ds-timeline__item--left .ds-timeline__content{padding-left:0;padding-right:var(--timeline-content-gap)}.ds-timeline--alternate .ds-timeline__item--right{grid-template-columns:auto 1fr;grid-template-areas:\"dot content\" \"line content\"}.ds-timeline__dot{grid-area:dot;width:var(--timeline-dot-size);height:var(--timeline-dot-size);border-radius:50%;border:var(--timeline-dot-border-width) solid var(--timeline-dot-border-color);background:var(--timeline-dot-bg);display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;z-index:2;transition:all .3s ease}.ds-timeline__dot--default{background:var(--timeline-dot-bg-default);border-color:var(--timeline-dot-border-default)}.ds-timeline__dot--primary{background:var(--timeline-dot-bg-primary);border-color:var(--timeline-dot-border-primary)}.ds-timeline__dot--success{background:var(--timeline-dot-bg-success);border-color:var(--timeline-dot-border-success)}.ds-timeline__dot--warning{background:var(--timeline-dot-bg-warning);border-color:var(--timeline-dot-border-warning)}.ds-timeline__dot--error{background:var(--timeline-dot-bg-error);border-color:var(--timeline-dot-border-error)}.ds-timeline__dot--info{background:var(--timeline-dot-bg-info);border-color:var(--timeline-dot-border-info)}.ds-timeline__dot--pending{background:var(--timeline-dot-bg-pending);border-color:var(--timeline-dot-border-pending)}.ds-timeline__dot--with-icon{background:transparent;border:none}.ds-timeline__item:hover .ds-timeline__dot{transform:scale(1.1)}.ds-timeline__icon{font-size:var(--timeline-icon-size);color:var(--timeline-icon-color)}.ds-timeline__icon--pending{color:var(--timeline-icon-color-pending);animation:spin 2s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.ds-timeline__line{grid-area:line;width:var(--timeline-line-width);background:var(--timeline-line-color);justify-self:center;flex:1;min-height:var(--timeline-item-gap);margin-top:4px}.ds-timeline__content{grid-area:content;padding-left:var(--timeline-content-gap);display:flex;flex-direction:column;gap:var(--timeline-content-inner-gap);min-width:0}.ds-timeline__date{font-size:var(--timeline-date-font-size);color:var(--timeline-date-color);font-weight:500}.ds-timeline__text{font-size:var(--timeline-text-font-size);color:var(--timeline-text-color);line-height:1.5}.ds-timeline__text--pending{color:var(--timeline-text-color-pending);font-style:italic}.ds-timeline--sm{--timeline-dot-size: var(--timeline-dot-size-sm);--timeline-line-width: var(--timeline-line-width-sm);--timeline-item-gap: var(--timeline-item-gap-sm);--timeline-content-gap: var(--timeline-content-gap-sm);--timeline-content-inner-gap: var(--timeline-content-inner-gap-sm);--timeline-date-font-size: var(--timeline-date-font-size-sm);--timeline-text-font-size: var(--timeline-text-font-size-sm);--timeline-icon-size: var(--timeline-icon-size-sm)}.ds-timeline--md{--timeline-dot-size: var(--timeline-dot-size-md);--timeline-line-width: var(--timeline-line-width-md);--timeline-item-gap: var(--timeline-item-gap-md);--timeline-content-gap: var(--timeline-content-gap-md);--timeline-content-inner-gap: var(--timeline-content-inner-gap-md);--timeline-date-font-size: var(--timeline-date-font-size-md);--timeline-text-font-size: var(--timeline-text-font-size-md);--timeline-icon-size: var(--timeline-icon-size-md)}.ds-timeline--lg{--timeline-dot-size: var(--timeline-dot-size-lg);--timeline-line-width: var(--timeline-line-width-lg);--timeline-item-gap: var(--timeline-item-gap-lg);--timeline-content-gap: var(--timeline-content-gap-lg);--timeline-content-inner-gap: var(--timeline-content-inner-gap-lg);--timeline-date-font-size: var(--timeline-date-font-size-lg);--timeline-text-font-size: var(--timeline-text-font-size-lg);--timeline-icon-size: var(--timeline-icon-size-lg)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i1$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsTimeline, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-timeline', imports: [CommonModule, FontAwesomeModule], template: "<div [ngClass]=\"containerClasses()\" role=\"list\" aria-label=\"Timeline\">\n  @for (item of sortedItems(); track $index) {\n    <div\n      [ngClass]=\"getItemClasses(item, $index)\"\n      role=\"listitem\"\n      tabindex=\"0\"\n      (click)=\"handleItemClick(item, $index)\"\n      (keydown)=\"handleKeydown($event, item, $index)\"\n      [class.ds-timeline__item--last]=\"isLastItem($index) && !pending()\">\n\n      <!-- Point de la timeline -->\n      <div [ngClass]=\"getDotClasses(item)\" [attr.aria-label]=\"item.date || '\u00C9v\u00E9nement'\">\n        @if (item.icon) {\n          <fa-icon [icon]=\"getIcon(item)\" class=\"ds-timeline__icon\" aria-hidden=\"true\"></fa-icon>\n        }\n      </div>\n\n      <!-- Ligne de connexion -->\n      @if (!isLastItem($index) || pending()) {\n        <div class=\"ds-timeline__line\" aria-hidden=\"true\"></div>\n      }\n\n      <!-- Contenu -->\n      <div class=\"ds-timeline__content\">\n        @if (item.date) {\n          <div class=\"ds-timeline__date\">{{ item.date }}</div>\n        }\n        <div class=\"ds-timeline__text\">{{ item.content }}</div>\n      </div>\n    </div>\n  }\n\n  <!-- Indicateur pending -->\n  @if (pending()) {\n    <div\n      class=\"ds-timeline__item ds-timeline__item--pending ds-timeline__item--{{ getItemPosition(sortedItems().length) }}\"\n      role=\"listitem\">\n      <div class=\"ds-timeline__dot ds-timeline__dot--pending ds-timeline__dot--with-icon\">\n        <fa-icon [icon]=\"pendingIcon\" class=\"ds-timeline__icon ds-timeline__icon--pending\" aria-hidden=\"true\"></fa-icon>\n      </div>\n      <div class=\"ds-timeline__content\">\n        <div class=\"ds-timeline__text ds-timeline__text--pending\">{{ pendingContent() }}</div>\n      </div>\n    </div>\n  }\n</div>\n", styles: [".ds-timeline{display:flex;flex-direction:column;position:relative;width:100%}.ds-timeline__item{position:relative;display:grid;padding-bottom:var(--timeline-item-gap);cursor:pointer;transition:opacity .2s ease}.ds-timeline__item:focus{outline:2px solid var(--color-primary);outline-offset:2px;border-radius:var(--radius-1)}.ds-timeline__item:focus-visible{outline:2px solid var(--color-primary)}.ds-timeline__item--last{padding-bottom:0}.ds-timeline__item--pending{cursor:default;animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}.ds-timeline--left .ds-timeline__item{grid-template-columns:auto 1fr;grid-template-areas:\"dot content\" \"line content\"}.ds-timeline--right .ds-timeline__item{grid-template-columns:1fr auto;grid-template-areas:\"content dot\" \"content line\";text-align:right}.ds-timeline--right .ds-timeline__item .ds-timeline__content{padding-left:0;padding-right:var(--timeline-content-gap)}.ds-timeline--alternate .ds-timeline__item--left{grid-template-columns:1fr auto;grid-template-areas:\"content dot\" \"content line\";text-align:right}.ds-timeline--alternate .ds-timeline__item--left .ds-timeline__content{padding-left:0;padding-right:var(--timeline-content-gap)}.ds-timeline--alternate .ds-timeline__item--right{grid-template-columns:auto 1fr;grid-template-areas:\"dot content\" \"line content\"}.ds-timeline__dot{grid-area:dot;width:var(--timeline-dot-size);height:var(--timeline-dot-size);border-radius:50%;border:var(--timeline-dot-border-width) solid var(--timeline-dot-border-color);background:var(--timeline-dot-bg);display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;z-index:2;transition:all .3s ease}.ds-timeline__dot--default{background:var(--timeline-dot-bg-default);border-color:var(--timeline-dot-border-default)}.ds-timeline__dot--primary{background:var(--timeline-dot-bg-primary);border-color:var(--timeline-dot-border-primary)}.ds-timeline__dot--success{background:var(--timeline-dot-bg-success);border-color:var(--timeline-dot-border-success)}.ds-timeline__dot--warning{background:var(--timeline-dot-bg-warning);border-color:var(--timeline-dot-border-warning)}.ds-timeline__dot--error{background:var(--timeline-dot-bg-error);border-color:var(--timeline-dot-border-error)}.ds-timeline__dot--info{background:var(--timeline-dot-bg-info);border-color:var(--timeline-dot-border-info)}.ds-timeline__dot--pending{background:var(--timeline-dot-bg-pending);border-color:var(--timeline-dot-border-pending)}.ds-timeline__dot--with-icon{background:transparent;border:none}.ds-timeline__item:hover .ds-timeline__dot{transform:scale(1.1)}.ds-timeline__icon{font-size:var(--timeline-icon-size);color:var(--timeline-icon-color)}.ds-timeline__icon--pending{color:var(--timeline-icon-color-pending);animation:spin 2s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.ds-timeline__line{grid-area:line;width:var(--timeline-line-width);background:var(--timeline-line-color);justify-self:center;flex:1;min-height:var(--timeline-item-gap);margin-top:4px}.ds-timeline__content{grid-area:content;padding-left:var(--timeline-content-gap);display:flex;flex-direction:column;gap:var(--timeline-content-inner-gap);min-width:0}.ds-timeline__date{font-size:var(--timeline-date-font-size);color:var(--timeline-date-color);font-weight:500}.ds-timeline__text{font-size:var(--timeline-text-font-size);color:var(--timeline-text-color);line-height:1.5}.ds-timeline__text--pending{color:var(--timeline-text-color-pending);font-style:italic}.ds-timeline--sm{--timeline-dot-size: var(--timeline-dot-size-sm);--timeline-line-width: var(--timeline-line-width-sm);--timeline-item-gap: var(--timeline-item-gap-sm);--timeline-content-gap: var(--timeline-content-gap-sm);--timeline-content-inner-gap: var(--timeline-content-inner-gap-sm);--timeline-date-font-size: var(--timeline-date-font-size-sm);--timeline-text-font-size: var(--timeline-text-font-size-sm);--timeline-icon-size: var(--timeline-icon-size-sm)}.ds-timeline--md{--timeline-dot-size: var(--timeline-dot-size-md);--timeline-line-width: var(--timeline-line-width-md);--timeline-item-gap: var(--timeline-item-gap-md);--timeline-content-gap: var(--timeline-content-gap-md);--timeline-content-inner-gap: var(--timeline-content-inner-gap-md);--timeline-date-font-size: var(--timeline-date-font-size-md);--timeline-text-font-size: var(--timeline-text-font-size-md);--timeline-icon-size: var(--timeline-icon-size-md)}.ds-timeline--lg{--timeline-dot-size: var(--timeline-dot-size-lg);--timeline-line-width: var(--timeline-line-width-lg);--timeline-item-gap: var(--timeline-item-gap-lg);--timeline-content-gap: var(--timeline-content-gap-lg);--timeline-content-inner-gap: var(--timeline-content-inner-gap-lg);--timeline-date-font-size: var(--timeline-date-font-size-lg);--timeline-text-font-size: var(--timeline-text-font-size-lg);--timeline-icon-size: var(--timeline-icon-size-lg)}\n"] }]
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], pending: [{ type: i0.Input, args: [{ isSignal: true, alias: "pending", required: false }] }], pendingContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "pendingContent", required: false }] }], reverse: [{ type: i0.Input, args: [{ isSignal: true, alias: "reverse", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }] } });
+
+/**
+ * DS Transfer
+ *
+ * Composant permettant de transférer des items entre deux listes (source et cible).
+ * Inclut recherche, sélection multiple, et navigation clavier.
+ *
+ * @example
+ * <ds-transfer
+ *   [source]="sourceItems"
+ *   [target]="targetItems"
+ *   sourceTitle="Disponibles"
+ *   targetTitle="Sélectionnés"
+ *   [showSearch]="true"
+ *   (transferChange)="onTransfer($event)"
+ * />
+ */
+class DsTransfer {
+    // Inputs
+    source = input([], ...(ngDevMode ? [{ debugName: "source" }] : []));
+    target = input([], ...(ngDevMode ? [{ debugName: "target" }] : []));
+    sourceTitle = input('Source', ...(ngDevMode ? [{ debugName: "sourceTitle" }] : []));
+    targetTitle = input('Target', ...(ngDevMode ? [{ debugName: "targetTitle" }] : []));
+    showSearch = input(true, ...(ngDevMode ? [{ debugName: "showSearch" }] : []));
+    showSelectAll = input(true, ...(ngDevMode ? [{ debugName: "showSelectAll" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    // Outputs
+    transferChange = output();
+    // Internal state
+    sourceSelected = signal(new Set(), ...(ngDevMode ? [{ debugName: "sourceSelected" }] : []));
+    targetSelected = signal(new Set(), ...(ngDevMode ? [{ debugName: "targetSelected" }] : []));
+    sourceSearchQuery = signal('', ...(ngDevMode ? [{ debugName: "sourceSearchQuery" }] : []));
+    targetSearchQuery = signal('', ...(ngDevMode ? [{ debugName: "targetSearchQuery" }] : []));
+    // Computed
+    filteredSource = computed(() => {
+        const query = this.sourceSearchQuery().toLowerCase();
+        if (!query)
+            return this.source();
+        return this.source().filter(item => item.label.toLowerCase().includes(query) ||
+            item.description?.toLowerCase().includes(query));
+    }, ...(ngDevMode ? [{ debugName: "filteredSource" }] : []));
+    filteredTarget = computed(() => {
+        const query = this.targetSearchQuery().toLowerCase();
+        if (!query)
+            return this.target();
+        return this.target().filter(item => item.label.toLowerCase().includes(query) ||
+            item.description?.toLowerCase().includes(query));
+    }, ...(ngDevMode ? [{ debugName: "filteredTarget" }] : []));
+    sourceSelectableCount = computed(() => this.filteredSource().filter(item => !item.disabled).length, ...(ngDevMode ? [{ debugName: "sourceSelectableCount" }] : []));
+    targetSelectableCount = computed(() => this.filteredTarget().filter(item => !item.disabled).length, ...(ngDevMode ? [{ debugName: "targetSelectableCount" }] : []));
+    isAllSourceSelected = computed(() => {
+        const count = this.sourceSelectableCount();
+        return count > 0 && this.sourceSelected().size === count;
+    }, ...(ngDevMode ? [{ debugName: "isAllSourceSelected" }] : []));
+    isAllTargetSelected = computed(() => {
+        const count = this.targetSelectableCount();
+        return count > 0 && this.targetSelected().size === count;
+    }, ...(ngDevMode ? [{ debugName: "isAllTargetSelected" }] : []));
+    canTransferToTarget = computed(() => this.sourceSelected().size > 0 && !this.disabled(), ...(ngDevMode ? [{ debugName: "canTransferToTarget" }] : []));
+    canTransferToSource = computed(() => this.targetSelected().size > 0 && !this.disabled(), ...(ngDevMode ? [{ debugName: "canTransferToSource" }] : []));
+    containerClasses = computed(() => ({
+        'ds-transfer': true,
+        'ds-transfer--disabled': this.disabled(),
+        [`ds-transfer--${this.size()}`]: true,
+    }), ...(ngDevMode ? [{ debugName: "containerClasses" }] : []));
+    // Public methods
+    transferToTarget() {
+        if (!this.canTransferToTarget())
+            return;
+        const selectedKeys = Array.from(this.sourceSelected());
+        const itemsToTransfer = this.source().filter(item => selectedKeys.includes(item.key));
+        const newSource = this.source().filter(item => !selectedKeys.includes(item.key));
+        const newTarget = [...this.target(), ...itemsToTransfer];
+        this.sourceSelected.set(new Set());
+        this.emitChange(newSource, newTarget);
+    }
+    transferToSource() {
+        if (!this.canTransferToSource())
+            return;
+        const selectedKeys = Array.from(this.targetSelected());
+        const itemsToTransfer = this.target().filter(item => selectedKeys.includes(item.key));
+        const newTarget = this.target().filter(item => !selectedKeys.includes(item.key));
+        const newSource = [...this.source(), ...itemsToTransfer];
+        this.targetSelected.set(new Set());
+        this.emitChange(newSource, newTarget);
+    }
+    toggleSelectAll(direction) {
+        if (this.disabled())
+            return;
+        const isSource = direction === 'left';
+        const items = isSource ? this.filteredSource() : this.filteredTarget();
+        const selected = isSource ? this.sourceSelected() : this.targetSelected();
+        const isAllSelected = isSource ? this.isAllSourceSelected() : this.isAllTargetSelected();
+        const newSelected = new Set();
+        if (!isAllSelected) {
+            items.forEach(item => {
+                if (!item.disabled) {
+                    newSelected.add(item.key);
+                }
+            });
+        }
+        if (isSource) {
+            this.sourceSelected.set(newSelected);
+        }
+        else {
+            this.targetSelected.set(newSelected);
+        }
+    }
+    toggleItemSelection(item, direction) {
+        if (this.disabled() || item.disabled)
+            return;
+        const isSource = direction === 'left';
+        const selected = isSource ? this.sourceSelected() : this.targetSelected();
+        const newSelected = new Set(selected);
+        if (newSelected.has(item.key)) {
+            newSelected.delete(item.key);
+        }
+        else {
+            newSelected.add(item.key);
+        }
+        if (isSource) {
+            this.sourceSelected.set(newSelected);
+        }
+        else {
+            this.targetSelected.set(newSelected);
+        }
+    }
+    isItemSelected(item, direction) {
+        const selected = direction === 'left' ? this.sourceSelected() : this.targetSelected();
+        return selected.has(item.key);
+    }
+    onSearchInput(event, direction) {
+        const input = event.target;
+        const query = input.value;
+        if (direction === 'left') {
+            this.sourceSearchQuery.set(query);
+        }
+        else {
+            this.targetSearchQuery.set(query);
+        }
+    }
+    clearSearch(direction) {
+        if (direction === 'left') {
+            this.sourceSearchQuery.set('');
+        }
+        else {
+            this.targetSearchQuery.set('');
+        }
+    }
+    getSelectedCount(direction) {
+        return direction === 'left'
+            ? this.sourceSelected().size
+            : this.targetSelected().size;
+    }
+    getItemCount(direction) {
+        return direction === 'left'
+            ? this.filteredSource().length
+            : this.filteredTarget().length;
+    }
+    emitChange(source, target) {
+        this.transferChange.emit({ source, target });
+    }
+    // ARIA helpers
+    getListboxId(direction) {
+        return `ds-transfer-${direction}-listbox`;
+    }
+    getItemId(item, direction) {
+        return `ds-transfer-${direction}-item-${item.key}`;
+    }
+    sourceListboxLabel = computed(() => `${this.sourceTitle()} (${this.getSelectedCount('left')}/${this.getItemCount('left')} sélectionné(s))`, ...(ngDevMode ? [{ debugName: "sourceListboxLabel" }] : []));
+    targetListboxLabel = computed(() => `${this.targetTitle()} (${this.getSelectedCount('right')}/${this.getItemCount('right')} sélectionné(s))`, ...(ngDevMode ? [{ debugName: "targetListboxLabel" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsTransfer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DsTransfer, isStandalone: true, selector: "ds-transfer", inputs: { source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null }, sourceTitle: { classPropertyName: "sourceTitle", publicName: "sourceTitle", isSignal: true, isRequired: false, transformFunction: null }, targetTitle: { classPropertyName: "targetTitle", publicName: "targetTitle", isSignal: true, isRequired: false, transformFunction: null }, showSearch: { classPropertyName: "showSearch", publicName: "showSearch", isSignal: true, isRequired: false, transformFunction: null }, showSelectAll: { classPropertyName: "showSelectAll", publicName: "showSelectAll", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { transferChange: "transferChange" }, ngImport: i0, template: "<div [ngClass]=\"containerClasses()\" role=\"group\" aria-label=\"Transfer component\">\n  <!-- Source panel -->\n  <div class=\"ds-transfer__panel ds-transfer__panel--source\">\n    <!-- Header -->\n    <div class=\"ds-transfer__header\">\n      <div class=\"ds-transfer__title\">\n        <span>{{ sourceTitle() }}</span>\n        <span class=\"ds-transfer__count\">\n          {{ getSelectedCount('left') }} / {{ source().length }}\n        </span>\n      </div>\n      @if (showSelectAll()) {\n        <primitive-checkbox\n          [checked]=\"isAllSourceSelected()\"\n          [indeterminate]=\"sourceSelected().size > 0 && !isAllSourceSelected()\"\n          [disabled]=\"disabled() || sourceSelectableCount() === 0\"\n          (checkedChange)=\"toggleSelectAll('left')\"\n          size=\"sm\"\n          label=\"Tout s\u00E9lectionner\"\n          class=\"ds-transfer__select-all\"\n        />\n      }\n    </div>\n\n    <!-- Search -->\n    @if (showSearch()) {\n      <div class=\"ds-transfer__search\">\n        <input\n          type=\"text\"\n          class=\"ds-transfer__search-input\"\n          placeholder=\"Rechercher...\"\n          [value]=\"sourceSearchQuery()\"\n          (input)=\"onSearchInput($event, 'left')\"\n          [disabled]=\"disabled()\"\n          aria-label=\"Rechercher dans les items source\"\n        />\n        @if (sourceSearchQuery()) {\n          <button\n            type=\"button\"\n            class=\"ds-transfer__search-clear\"\n            (click)=\"clearSearch('left')\"\n            aria-label=\"Effacer la recherche\"\n          >\n            \u2715\n          </button>\n        }\n      </div>\n    }\n\n    <!-- List -->\n    <div\n      class=\"ds-transfer__list\"\n      role=\"listbox\"\n      [attr.aria-label]=\"sourceListboxLabel()\"\n      [attr.id]=\"getListboxId('left')\"\n      [attr.aria-multiselectable]=\"true\"\n    >\n      @if (filteredSource().length === 0) {\n        <div class=\"ds-transfer__empty\">\n          @if (sourceSearchQuery()) {\n            Aucun r\u00E9sultat\n          } @else {\n            Aucun item disponible\n          }\n        </div>\n      } @else {\n        @for (item of filteredSource(); track item.key) {\n          <div\n            class=\"ds-transfer__item\"\n            [class.ds-transfer__item--selected]=\"isItemSelected(item, 'left')\"\n            [class.ds-transfer__item--disabled]=\"item.disabled\"\n            role=\"option\"\n            [attr.aria-selected]=\"isItemSelected(item, 'left')\"\n            [attr.aria-disabled]=\"item.disabled\"\n            [attr.id]=\"getItemId(item, 'left')\"\n            (click)=\"toggleItemSelection(item, 'left')\"\n          >\n            <primitive-checkbox\n              [checked]=\"isItemSelected(item, 'left')\"\n              [disabled]=\"disabled() || (item.disabled ?? false)\"\n              (checkedChange)=\"toggleItemSelection(item, 'left')\"\n              size=\"sm\"\n            />\n            <div class=\"ds-transfer__item-content\">\n              <div class=\"ds-transfer__item-label\">{{ item.label }}</div>\n              @if (item.description) {\n                <div class=\"ds-transfer__item-description\">{{ item.description }}</div>\n              }\n            </div>\n          </div>\n        }\n      }\n    </div>\n  </div>\n\n  <!-- Transfer buttons -->\n  <div class=\"ds-transfer__actions\">\n    <ds-button\n      variant=\"secondary\"\n      size=\"sm\"\n      [disabled]=\"!canTransferToTarget()\"\n      (click)=\"transferToTarget()\"\n      aria-label=\"Transf\u00E9rer les items s\u00E9lectionn\u00E9s vers la droite\"\n    >\n      \u203A\n    </ds-button>\n    <ds-button\n      variant=\"secondary\"\n      size=\"sm\"\n      [disabled]=\"!canTransferToSource()\"\n      (click)=\"transferToSource()\"\n      aria-label=\"Transf\u00E9rer les items s\u00E9lectionn\u00E9s vers la gauche\"\n    >\n      \u2039\n    </ds-button>\n  </div>\n\n  <!-- Target panel -->\n  <div class=\"ds-transfer__panel ds-transfer__panel--target\">\n    <!-- Header -->\n    <div class=\"ds-transfer__header\">\n      <div class=\"ds-transfer__title\">\n        <span>{{ targetTitle() }}</span>\n        <span class=\"ds-transfer__count\">\n          {{ getSelectedCount('right') }} / {{ target().length }}\n        </span>\n      </div>\n      @if (showSelectAll()) {\n        <primitive-checkbox\n          [checked]=\"isAllTargetSelected()\"\n          [indeterminate]=\"targetSelected().size > 0 && !isAllTargetSelected()\"\n          [disabled]=\"disabled() || targetSelectableCount() === 0\"\n          (checkedChange)=\"toggleSelectAll('right')\"\n          size=\"sm\"\n          label=\"Tout s\u00E9lectionner\"\n          class=\"ds-transfer__select-all\"\n        />\n      }\n    </div>\n\n    <!-- Search -->\n    @if (showSearch()) {\n      <div class=\"ds-transfer__search\">\n        <input\n          type=\"text\"\n          class=\"ds-transfer__search-input\"\n          placeholder=\"Rechercher...\"\n          [value]=\"targetSearchQuery()\"\n          (input)=\"onSearchInput($event, 'right')\"\n          [disabled]=\"disabled()\"\n          aria-label=\"Rechercher dans les items cible\"\n        />\n        @if (targetSearchQuery()) {\n          <button\n            type=\"button\"\n            class=\"ds-transfer__search-clear\"\n            (click)=\"clearSearch('right')\"\n            aria-label=\"Effacer la recherche\"\n          >\n            \u2715\n          </button>\n        }\n      </div>\n    }\n\n    <!-- List -->\n    <div\n      class=\"ds-transfer__list\"\n      role=\"listbox\"\n      [attr.aria-label]=\"targetListboxLabel()\"\n      [attr.id]=\"getListboxId('right')\"\n      [attr.aria-multiselectable]=\"true\"\n    >\n      @if (filteredTarget().length === 0) {\n        <div class=\"ds-transfer__empty\">\n          @if (targetSearchQuery()) {\n            Aucun r\u00E9sultat\n          } @else {\n            Aucun item s\u00E9lectionn\u00E9\n          }\n        </div>\n      } @else {\n        @for (item of filteredTarget(); track item.key) {\n          <div\n            class=\"ds-transfer__item\"\n            [class.ds-transfer__item--selected]=\"isItemSelected(item, 'right')\"\n            [class.ds-transfer__item--disabled]=\"item.disabled\"\n            role=\"option\"\n            [attr.aria-selected]=\"isItemSelected(item, 'right')\"\n            [attr.aria-disabled]=\"item.disabled\"\n            [attr.id]=\"getItemId(item, 'right')\"\n            (click)=\"toggleItemSelection(item, 'right')\"\n          >\n            <primitive-checkbox\n              [checked]=\"isItemSelected(item, 'right')\"\n              [disabled]=\"disabled() || (item.disabled ?? false)\"\n              (checkedChange)=\"toggleItemSelection(item, 'right')\"\n              size=\"sm\"\n            />\n            <div class=\"ds-transfer__item-content\">\n              <div class=\"ds-transfer__item-label\">{{ item.label }}</div>\n              @if (item.description) {\n                <div class=\"ds-transfer__item-description\">{{ item.description }}</div>\n              }\n            </div>\n          </div>\n        }\n      }\n    </div>\n  </div>\n</div>\n", styles: [".ds-transfer{display:flex;align-items:center;gap:var(--transfer-gap, 1rem);width:100%}.ds-transfer__panel{flex:1;display:flex;flex-direction:column;border:1px solid var(--transfer-border-color, var(--gray-300));border-radius:var(--transfer-border-radius, var(--radius-2));background:var(--transfer-bg, var(--white));overflow:hidden}.ds-transfer__header{display:flex;align-items:center;justify-content:space-between;padding:var(--transfer-header-padding, .75rem 1rem);border-bottom:1px solid var(--transfer-header-border-color, var(--gray-200));background:var(--transfer-header-bg, var(--gray-50))}.ds-transfer__title{display:flex;align-items:center;gap:.5rem;font-weight:600;font-size:var(--transfer-title-font-size, var(--font-size-sm));color:var(--transfer-title-color, var(--text-default))}.ds-transfer__count{font-weight:400;font-size:var(--font-size-xs);color:var(--transfer-count-color, var(--text-light))}.ds-transfer__search{position:relative;padding:var(--transfer-search-padding, .75rem 1rem);border-bottom:1px solid var(--transfer-search-border-color, var(--gray-200))}.ds-transfer__search-input{width:100%;padding:var(--transfer-search-input-padding, .5rem 2rem .5rem .75rem);border:1px solid var(--transfer-search-input-border, var(--gray-300));border-radius:var(--transfer-search-input-radius, var(--radius-1));font-size:var(--font-size-sm);color:var(--transfer-search-input-text, var(--text-default));background:var(--transfer-search-input-bg, var(--white))}.ds-transfer__search-input::placeholder{color:var(--transfer-search-placeholder, var(--text-lighter))}.ds-transfer__search-input:focus{outline:none;border-color:var(--transfer-search-input-focus, var(--color-primary));box-shadow:0 0 0 3px var(--transfer-search-input-focus-shadow, rgba(59, 130, 246, .1))}.ds-transfer__search-input:disabled{opacity:.6;cursor:not-allowed;background:var(--transfer-search-input-disabled-bg, var(--gray-50))}.ds-transfer__search-clear{position:absolute;top:50%;right:1.5rem;transform:translateY(-50%);padding:.25rem;border:none;background:transparent;color:var(--transfer-search-clear-color, var(--text-lighter));cursor:pointer;font-size:1rem;line-height:1}.ds-transfer__search-clear:hover{color:var(--transfer-search-clear-hover, var(--text-default))}.ds-transfer__search-clear:focus{outline:2px solid var(--color-primary);outline-offset:2px}.ds-transfer__list{flex:1;overflow-y:auto;min-height:var(--transfer-list-min-height, 300px);max-height:var(--transfer-list-max-height, 400px)}.ds-transfer__empty{display:flex;align-items:center;justify-content:center;height:100%;padding:2rem;color:var(--transfer-empty-color, var(--text-lighter));font-size:var(--font-size-sm);text-align:center}.ds-transfer__item{display:flex;align-items:flex-start;gap:.75rem;padding:var(--transfer-item-padding, .75rem 1rem);border-bottom:1px solid var(--transfer-item-border, var(--gray-100));cursor:pointer;transition:background-color .2s}.ds-transfer__item:hover:not(.ds-transfer__item--disabled){background:var(--transfer-item-hover-bg, var(--gray-50))}.ds-transfer__item--selected{background:var(--transfer-item-selected-bg, var(--blue-50))}.ds-transfer__item--selected:hover:not(.ds-transfer__item--selected--disabled){background:var(--transfer-item-selected-hover-bg, var(--blue-100))}.ds-transfer__item--disabled{opacity:.5;cursor:not-allowed}.ds-transfer__item:last-child{border-bottom:none}.ds-transfer__item-content{flex:1;min-width:0}.ds-transfer__item-label{font-size:var(--transfer-item-font-size, var(--font-size-sm));font-weight:500;color:var(--transfer-item-label-color, var(--text-default));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ds-transfer__item-description{margin-top:.25rem;font-size:var(--font-size-xs);color:var(--transfer-item-description-color, var(--text-light));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ds-transfer__actions{display:flex;flex-direction:column;gap:var(--transfer-actions-gap, .5rem);align-self:center}.ds-transfer--sm .ds-transfer__header,.ds-transfer--sm .ds-transfer__search{padding:.5rem .75rem}.ds-transfer--sm .ds-transfer__search-input{padding:.375rem 1.5rem .375rem .5rem;font-size:var(--font-size-xs)}.ds-transfer--sm .ds-transfer__item{padding:.5rem .75rem}.ds-transfer--sm .ds-transfer__item-label{font-size:var(--font-size-xs)}.ds-transfer--sm .ds-transfer__list{min-height:200px;max-height:300px}.ds-transfer--lg .ds-transfer__header,.ds-transfer--lg .ds-transfer__search{padding:1rem 1.25rem}.ds-transfer--lg .ds-transfer__search-input{padding:.625rem 2.5rem .625rem 1rem;font-size:var(--font-size-base)}.ds-transfer--lg .ds-transfer__item{padding:1rem 1.25rem}.ds-transfer--lg .ds-transfer__item-label{font-size:var(--font-size-base)}.ds-transfer--lg .ds-transfer__list{min-height:400px;max-height:500px}.ds-transfer--disabled{opacity:.6;cursor:not-allowed}.ds-transfer--disabled .ds-transfer__panel,.ds-transfer--disabled .ds-transfer__item{pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: PrimitiveCheckbox, selector: "primitive-checkbox", inputs: ["checked", "indeterminate", "disabled", "size", "label", "checkboxId"], outputs: ["checkedChange"] }, { kind: "component", type: DsButton, selector: "ds-button", inputs: ["variant", "appearance", "size", "submit", "disabled", "iconStart", "iconEnd", "loading", "block"], outputs: ["clicked"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsTransfer, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-transfer', standalone: true, imports: [CommonModule, FormsModule, PrimitiveCheckbox, DsButton], template: "<div [ngClass]=\"containerClasses()\" role=\"group\" aria-label=\"Transfer component\">\n  <!-- Source panel -->\n  <div class=\"ds-transfer__panel ds-transfer__panel--source\">\n    <!-- Header -->\n    <div class=\"ds-transfer__header\">\n      <div class=\"ds-transfer__title\">\n        <span>{{ sourceTitle() }}</span>\n        <span class=\"ds-transfer__count\">\n          {{ getSelectedCount('left') }} / {{ source().length }}\n        </span>\n      </div>\n      @if (showSelectAll()) {\n        <primitive-checkbox\n          [checked]=\"isAllSourceSelected()\"\n          [indeterminate]=\"sourceSelected().size > 0 && !isAllSourceSelected()\"\n          [disabled]=\"disabled() || sourceSelectableCount() === 0\"\n          (checkedChange)=\"toggleSelectAll('left')\"\n          size=\"sm\"\n          label=\"Tout s\u00E9lectionner\"\n          class=\"ds-transfer__select-all\"\n        />\n      }\n    </div>\n\n    <!-- Search -->\n    @if (showSearch()) {\n      <div class=\"ds-transfer__search\">\n        <input\n          type=\"text\"\n          class=\"ds-transfer__search-input\"\n          placeholder=\"Rechercher...\"\n          [value]=\"sourceSearchQuery()\"\n          (input)=\"onSearchInput($event, 'left')\"\n          [disabled]=\"disabled()\"\n          aria-label=\"Rechercher dans les items source\"\n        />\n        @if (sourceSearchQuery()) {\n          <button\n            type=\"button\"\n            class=\"ds-transfer__search-clear\"\n            (click)=\"clearSearch('left')\"\n            aria-label=\"Effacer la recherche\"\n          >\n            \u2715\n          </button>\n        }\n      </div>\n    }\n\n    <!-- List -->\n    <div\n      class=\"ds-transfer__list\"\n      role=\"listbox\"\n      [attr.aria-label]=\"sourceListboxLabel()\"\n      [attr.id]=\"getListboxId('left')\"\n      [attr.aria-multiselectable]=\"true\"\n    >\n      @if (filteredSource().length === 0) {\n        <div class=\"ds-transfer__empty\">\n          @if (sourceSearchQuery()) {\n            Aucun r\u00E9sultat\n          } @else {\n            Aucun item disponible\n          }\n        </div>\n      } @else {\n        @for (item of filteredSource(); track item.key) {\n          <div\n            class=\"ds-transfer__item\"\n            [class.ds-transfer__item--selected]=\"isItemSelected(item, 'left')\"\n            [class.ds-transfer__item--disabled]=\"item.disabled\"\n            role=\"option\"\n            [attr.aria-selected]=\"isItemSelected(item, 'left')\"\n            [attr.aria-disabled]=\"item.disabled\"\n            [attr.id]=\"getItemId(item, 'left')\"\n            (click)=\"toggleItemSelection(item, 'left')\"\n          >\n            <primitive-checkbox\n              [checked]=\"isItemSelected(item, 'left')\"\n              [disabled]=\"disabled() || (item.disabled ?? false)\"\n              (checkedChange)=\"toggleItemSelection(item, 'left')\"\n              size=\"sm\"\n            />\n            <div class=\"ds-transfer__item-content\">\n              <div class=\"ds-transfer__item-label\">{{ item.label }}</div>\n              @if (item.description) {\n                <div class=\"ds-transfer__item-description\">{{ item.description }}</div>\n              }\n            </div>\n          </div>\n        }\n      }\n    </div>\n  </div>\n\n  <!-- Transfer buttons -->\n  <div class=\"ds-transfer__actions\">\n    <ds-button\n      variant=\"secondary\"\n      size=\"sm\"\n      [disabled]=\"!canTransferToTarget()\"\n      (click)=\"transferToTarget()\"\n      aria-label=\"Transf\u00E9rer les items s\u00E9lectionn\u00E9s vers la droite\"\n    >\n      \u203A\n    </ds-button>\n    <ds-button\n      variant=\"secondary\"\n      size=\"sm\"\n      [disabled]=\"!canTransferToSource()\"\n      (click)=\"transferToSource()\"\n      aria-label=\"Transf\u00E9rer les items s\u00E9lectionn\u00E9s vers la gauche\"\n    >\n      \u2039\n    </ds-button>\n  </div>\n\n  <!-- Target panel -->\n  <div class=\"ds-transfer__panel ds-transfer__panel--target\">\n    <!-- Header -->\n    <div class=\"ds-transfer__header\">\n      <div class=\"ds-transfer__title\">\n        <span>{{ targetTitle() }}</span>\n        <span class=\"ds-transfer__count\">\n          {{ getSelectedCount('right') }} / {{ target().length }}\n        </span>\n      </div>\n      @if (showSelectAll()) {\n        <primitive-checkbox\n          [checked]=\"isAllTargetSelected()\"\n          [indeterminate]=\"targetSelected().size > 0 && !isAllTargetSelected()\"\n          [disabled]=\"disabled() || targetSelectableCount() === 0\"\n          (checkedChange)=\"toggleSelectAll('right')\"\n          size=\"sm\"\n          label=\"Tout s\u00E9lectionner\"\n          class=\"ds-transfer__select-all\"\n        />\n      }\n    </div>\n\n    <!-- Search -->\n    @if (showSearch()) {\n      <div class=\"ds-transfer__search\">\n        <input\n          type=\"text\"\n          class=\"ds-transfer__search-input\"\n          placeholder=\"Rechercher...\"\n          [value]=\"targetSearchQuery()\"\n          (input)=\"onSearchInput($event, 'right')\"\n          [disabled]=\"disabled()\"\n          aria-label=\"Rechercher dans les items cible\"\n        />\n        @if (targetSearchQuery()) {\n          <button\n            type=\"button\"\n            class=\"ds-transfer__search-clear\"\n            (click)=\"clearSearch('right')\"\n            aria-label=\"Effacer la recherche\"\n          >\n            \u2715\n          </button>\n        }\n      </div>\n    }\n\n    <!-- List -->\n    <div\n      class=\"ds-transfer__list\"\n      role=\"listbox\"\n      [attr.aria-label]=\"targetListboxLabel()\"\n      [attr.id]=\"getListboxId('right')\"\n      [attr.aria-multiselectable]=\"true\"\n    >\n      @if (filteredTarget().length === 0) {\n        <div class=\"ds-transfer__empty\">\n          @if (targetSearchQuery()) {\n            Aucun r\u00E9sultat\n          } @else {\n            Aucun item s\u00E9lectionn\u00E9\n          }\n        </div>\n      } @else {\n        @for (item of filteredTarget(); track item.key) {\n          <div\n            class=\"ds-transfer__item\"\n            [class.ds-transfer__item--selected]=\"isItemSelected(item, 'right')\"\n            [class.ds-transfer__item--disabled]=\"item.disabled\"\n            role=\"option\"\n            [attr.aria-selected]=\"isItemSelected(item, 'right')\"\n            [attr.aria-disabled]=\"item.disabled\"\n            [attr.id]=\"getItemId(item, 'right')\"\n            (click)=\"toggleItemSelection(item, 'right')\"\n          >\n            <primitive-checkbox\n              [checked]=\"isItemSelected(item, 'right')\"\n              [disabled]=\"disabled() || (item.disabled ?? false)\"\n              (checkedChange)=\"toggleItemSelection(item, 'right')\"\n              size=\"sm\"\n            />\n            <div class=\"ds-transfer__item-content\">\n              <div class=\"ds-transfer__item-label\">{{ item.label }}</div>\n              @if (item.description) {\n                <div class=\"ds-transfer__item-description\">{{ item.description }}</div>\n              }\n            </div>\n          </div>\n        }\n      }\n    </div>\n  </div>\n</div>\n", styles: [".ds-transfer{display:flex;align-items:center;gap:var(--transfer-gap, 1rem);width:100%}.ds-transfer__panel{flex:1;display:flex;flex-direction:column;border:1px solid var(--transfer-border-color, var(--gray-300));border-radius:var(--transfer-border-radius, var(--radius-2));background:var(--transfer-bg, var(--white));overflow:hidden}.ds-transfer__header{display:flex;align-items:center;justify-content:space-between;padding:var(--transfer-header-padding, .75rem 1rem);border-bottom:1px solid var(--transfer-header-border-color, var(--gray-200));background:var(--transfer-header-bg, var(--gray-50))}.ds-transfer__title{display:flex;align-items:center;gap:.5rem;font-weight:600;font-size:var(--transfer-title-font-size, var(--font-size-sm));color:var(--transfer-title-color, var(--text-default))}.ds-transfer__count{font-weight:400;font-size:var(--font-size-xs);color:var(--transfer-count-color, var(--text-light))}.ds-transfer__search{position:relative;padding:var(--transfer-search-padding, .75rem 1rem);border-bottom:1px solid var(--transfer-search-border-color, var(--gray-200))}.ds-transfer__search-input{width:100%;padding:var(--transfer-search-input-padding, .5rem 2rem .5rem .75rem);border:1px solid var(--transfer-search-input-border, var(--gray-300));border-radius:var(--transfer-search-input-radius, var(--radius-1));font-size:var(--font-size-sm);color:var(--transfer-search-input-text, var(--text-default));background:var(--transfer-search-input-bg, var(--white))}.ds-transfer__search-input::placeholder{color:var(--transfer-search-placeholder, var(--text-lighter))}.ds-transfer__search-input:focus{outline:none;border-color:var(--transfer-search-input-focus, var(--color-primary));box-shadow:0 0 0 3px var(--transfer-search-input-focus-shadow, rgba(59, 130, 246, .1))}.ds-transfer__search-input:disabled{opacity:.6;cursor:not-allowed;background:var(--transfer-search-input-disabled-bg, var(--gray-50))}.ds-transfer__search-clear{position:absolute;top:50%;right:1.5rem;transform:translateY(-50%);padding:.25rem;border:none;background:transparent;color:var(--transfer-search-clear-color, var(--text-lighter));cursor:pointer;font-size:1rem;line-height:1}.ds-transfer__search-clear:hover{color:var(--transfer-search-clear-hover, var(--text-default))}.ds-transfer__search-clear:focus{outline:2px solid var(--color-primary);outline-offset:2px}.ds-transfer__list{flex:1;overflow-y:auto;min-height:var(--transfer-list-min-height, 300px);max-height:var(--transfer-list-max-height, 400px)}.ds-transfer__empty{display:flex;align-items:center;justify-content:center;height:100%;padding:2rem;color:var(--transfer-empty-color, var(--text-lighter));font-size:var(--font-size-sm);text-align:center}.ds-transfer__item{display:flex;align-items:flex-start;gap:.75rem;padding:var(--transfer-item-padding, .75rem 1rem);border-bottom:1px solid var(--transfer-item-border, var(--gray-100));cursor:pointer;transition:background-color .2s}.ds-transfer__item:hover:not(.ds-transfer__item--disabled){background:var(--transfer-item-hover-bg, var(--gray-50))}.ds-transfer__item--selected{background:var(--transfer-item-selected-bg, var(--blue-50))}.ds-transfer__item--selected:hover:not(.ds-transfer__item--selected--disabled){background:var(--transfer-item-selected-hover-bg, var(--blue-100))}.ds-transfer__item--disabled{opacity:.5;cursor:not-allowed}.ds-transfer__item:last-child{border-bottom:none}.ds-transfer__item-content{flex:1;min-width:0}.ds-transfer__item-label{font-size:var(--transfer-item-font-size, var(--font-size-sm));font-weight:500;color:var(--transfer-item-label-color, var(--text-default));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ds-transfer__item-description{margin-top:.25rem;font-size:var(--font-size-xs);color:var(--transfer-item-description-color, var(--text-light));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ds-transfer__actions{display:flex;flex-direction:column;gap:var(--transfer-actions-gap, .5rem);align-self:center}.ds-transfer--sm .ds-transfer__header,.ds-transfer--sm .ds-transfer__search{padding:.5rem .75rem}.ds-transfer--sm .ds-transfer__search-input{padding:.375rem 1.5rem .375rem .5rem;font-size:var(--font-size-xs)}.ds-transfer--sm .ds-transfer__item{padding:.5rem .75rem}.ds-transfer--sm .ds-transfer__item-label{font-size:var(--font-size-xs)}.ds-transfer--sm .ds-transfer__list{min-height:200px;max-height:300px}.ds-transfer--lg .ds-transfer__header,.ds-transfer--lg .ds-transfer__search{padding:1rem 1.25rem}.ds-transfer--lg .ds-transfer__search-input{padding:.625rem 2.5rem .625rem 1rem;font-size:var(--font-size-base)}.ds-transfer--lg .ds-transfer__item{padding:1rem 1.25rem}.ds-transfer--lg .ds-transfer__item-label{font-size:var(--font-size-base)}.ds-transfer--lg .ds-transfer__list{min-height:400px;max-height:500px}.ds-transfer--disabled{opacity:.6;cursor:not-allowed}.ds-transfer--disabled .ds-transfer__panel,.ds-transfer--disabled .ds-transfer__item{pointer-events:none}\n"] }]
+        }], propDecorators: { source: [{ type: i0.Input, args: [{ isSignal: true, alias: "source", required: false }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }], sourceTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "sourceTitle", required: false }] }], targetTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "targetTitle", required: false }] }], showSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSearch", required: false }] }], showSelectAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSelectAll", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], transferChange: [{ type: i0.Output, args: ["transferChange"] }] } });
+
+class DsCarousel {
+    // Config
+    slides = input([], ...(ngDevMode ? [{ debugName: "slides" }] : []));
+    autoplay = input(false, ...(ngDevMode ? [{ debugName: "autoplay" }] : []));
+    autoplaySpeed = input(3000, ...(ngDevMode ? [{ debugName: "autoplaySpeed" }] : []));
+    effect = input('slide', ...(ngDevMode ? [{ debugName: "effect" }] : []));
+    dots = input(true, ...(ngDevMode ? [{ debugName: "dots" }] : []));
+    dotsPosition = input('bottom', ...(ngDevMode ? [{ debugName: "dotsPosition" }] : []));
+    arrows = input(true, ...(ngDevMode ? [{ debugName: "arrows" }] : []));
+    infinite = input(true, ...(ngDevMode ? [{ debugName: "infinite" }] : []));
+    pauseOnHover = input(true, ...(ngDevMode ? [{ debugName: "pauseOnHover" }] : []));
+    activeIndex = input(0, ...(ngDevMode ? [{ debugName: "activeIndex" }] : []));
+    // Events
+    slideChange = output();
+    // ViewChild
+    trackElement;
+    slideElements;
+    // Icons
+    icons = {
+        left: faChevronLeft,
+        right: faChevronRight,
+    };
+    // Internal state
+    internalActiveIndex = signal(0, ...(ngDevMode ? [{ debugName: "internalActiveIndex" }] : []));
+    isPaused = signal(false, ...(ngDevMode ? [{ debugName: "isPaused" }] : []));
+    isTransitioning = signal(false, ...(ngDevMode ? [{ debugName: "isTransitioning" }] : []));
+    autoplayTimer = null;
+    startX = 0;
+    startY = 0;
+    isDragging = false;
+    constructor() {
+        // Sync external activeIndex with internal
+        effect(() => {
+            const extIndex = this.activeIndex();
+            const totalSlides = this.slides().length;
+            if (totalSlides > 0 && extIndex >= 0 && extIndex < totalSlides) {
+                this.internalActiveIndex.set(extIndex);
+            }
+        });
+        // Autoplay effect
+        effect(() => {
+            if (this.autoplay() && !this.isPaused()) {
+                this.startAutoplay();
+            }
+            else {
+                this.stopAutoplay();
+            }
+        });
+    }
+    ngAfterViewInit() {
+        // Initialiser l'index actif
+        const initialIndex = this.activeIndex();
+        if (initialIndex >= 0 && initialIndex < this.slides().length) {
+            this.internalActiveIndex.set(initialIndex);
+        }
+    }
+    ngOnDestroy() {
+        this.stopAutoplay();
+    }
+    containerClasses = computed(() => {
+        const classes = ['ds-carousel'];
+        classes.push(`ds-carousel--${this.effect()}`);
+        classes.push(`ds-carousel--dots-${this.dotsPosition()}`);
+        if (this.isTransitioning())
+            classes.push('ds-carousel--transitioning');
+        return classes.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "containerClasses" }] : []));
+    trackStyle = computed(() => {
+        if (this.effect() === 'slide') {
+            const offset = -this.internalActiveIndex() * 100;
+            return { transform: `translateX(${offset}%)` };
+        }
+        return {};
+    }, ...(ngDevMode ? [{ debugName: "trackStyle" }] : []));
+    slideClasses(index) {
+        const classes = ['ds-carousel__slide'];
+        const active = this.internalActiveIndex();
+        if (index === active) {
+            classes.push('ds-carousel__slide--active');
+        }
+        if (this.effect() === 'fade') {
+            classes.push('ds-carousel__slide--fade');
+        }
+        return classes.join(' ');
+    }
+    dotClasses(index) {
+        const classes = ['ds-carousel__dot'];
+        if (index === this.internalActiveIndex()) {
+            classes.push('ds-carousel__dot--active');
+        }
+        return classes.join(' ');
+    }
+    // Public methods
+    next() {
+        const totalSlides = this.slides().length;
+        if (totalSlides === 0)
+            return;
+        const currentIndex = this.internalActiveIndex();
+        let nextIndex = currentIndex + 1;
+        if (nextIndex >= totalSlides) {
+            nextIndex = this.infinite() ? 0 : currentIndex;
+        }
+        if (nextIndex !== currentIndex) {
+            this.goTo(nextIndex);
+        }
+    }
+    prev() {
+        const totalSlides = this.slides().length;
+        if (totalSlides === 0)
+            return;
+        const currentIndex = this.internalActiveIndex();
+        let prevIndex = currentIndex - 1;
+        if (prevIndex < 0) {
+            prevIndex = this.infinite() ? totalSlides - 1 : currentIndex;
+        }
+        if (prevIndex !== currentIndex) {
+            this.goTo(prevIndex);
+        }
+    }
+    goTo(index) {
+        const totalSlides = this.slides().length;
+        if (index < 0 || index >= totalSlides || index === this.internalActiveIndex()) {
+            return;
+        }
+        this.isTransitioning.set(true);
+        this.internalActiveIndex.set(index);
+        const slide = this.slides()[index];
+        this.slideChange.emit({ index, slide });
+        // Reset transitioning flag
+        setTimeout(() => {
+            this.isTransitioning.set(false);
+        }, 300);
+        // Reset autoplay
+        if (this.autoplay()) {
+            this.stopAutoplay();
+            this.startAutoplay();
+        }
+    }
+    pause() {
+        this.isPaused.set(true);
+        this.stopAutoplay();
+    }
+    play() {
+        this.isPaused.set(false);
+        if (this.autoplay()) {
+            this.startAutoplay();
+        }
+    }
+    onMouseEnter() {
+        if (this.pauseOnHover() && this.autoplay()) {
+            this.pause();
+        }
+    }
+    onMouseLeave() {
+        if (this.pauseOnHover() && this.autoplay()) {
+            this.play();
+        }
+    }
+    onKeydown(event) {
+        switch (event.key) {
+            case 'ArrowLeft':
+                event.preventDefault();
+                this.prev();
+                break;
+            case 'ArrowRight':
+                event.preventDefault();
+                this.next();
+                break;
+            case 'Home':
+                event.preventDefault();
+                this.goTo(0);
+                break;
+            case 'End':
+                event.preventDefault();
+                this.goTo(this.slides().length - 1);
+                break;
+        }
+    }
+    // Touch/swipe handlers
+    onTouchStart(event) {
+        this.startX = event.touches[0].clientX;
+        this.startY = event.touches[0].clientY;
+        this.isDragging = false;
+    }
+    onTouchMove(event) {
+        if (!this.isDragging) {
+            const deltaX = Math.abs(event.touches[0].clientX - this.startX);
+            const deltaY = Math.abs(event.touches[0].clientY - this.startY);
+            // Detect horizontal swipe
+            if (deltaX > deltaY && deltaX > 10) {
+                this.isDragging = true;
+            }
+        }
+    }
+    onTouchEnd(event) {
+        if (!this.isDragging)
+            return;
+        const endX = event.changedTouches[0].clientX;
+        const deltaX = endX - this.startX;
+        if (Math.abs(deltaX) > 50) {
+            if (deltaX > 0) {
+                this.prev();
+            }
+            else {
+                this.next();
+            }
+        }
+        this.isDragging = false;
+    }
+    startAutoplay() {
+        this.stopAutoplay();
+        this.autoplayTimer = setInterval(() => {
+            this.next();
+        }, this.autoplaySpeed());
+    }
+    stopAutoplay() {
+        if (this.autoplayTimer) {
+            clearInterval(this.autoplayTimer);
+            this.autoplayTimer = null;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsCarousel, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DsCarousel, isStandalone: true, selector: "ds-carousel", inputs: { slides: { classPropertyName: "slides", publicName: "slides", isSignal: true, isRequired: false, transformFunction: null }, autoplay: { classPropertyName: "autoplay", publicName: "autoplay", isSignal: true, isRequired: false, transformFunction: null }, autoplaySpeed: { classPropertyName: "autoplaySpeed", publicName: "autoplaySpeed", isSignal: true, isRequired: false, transformFunction: null }, effect: { classPropertyName: "effect", publicName: "effect", isSignal: true, isRequired: false, transformFunction: null }, dots: { classPropertyName: "dots", publicName: "dots", isSignal: true, isRequired: false, transformFunction: null }, dotsPosition: { classPropertyName: "dotsPosition", publicName: "dotsPosition", isSignal: true, isRequired: false, transformFunction: null }, arrows: { classPropertyName: "arrows", publicName: "arrows", isSignal: true, isRequired: false, transformFunction: null }, infinite: { classPropertyName: "infinite", publicName: "infinite", isSignal: true, isRequired: false, transformFunction: null }, pauseOnHover: { classPropertyName: "pauseOnHover", publicName: "pauseOnHover", isSignal: true, isRequired: false, transformFunction: null }, activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { slideChange: "slideChange" }, viewQueries: [{ propertyName: "trackElement", first: true, predicate: ["track"], descendants: true }, { propertyName: "slideElements", predicate: ["slideElement"], descendants: true }], ngImport: i0, template: "<div\n  [class]=\"containerClasses()\"\n  (mouseenter)=\"onMouseEnter()\"\n  (mouseleave)=\"onMouseLeave()\"\n  (keydown)=\"onKeydown($event)\"\n  (touchstart)=\"onTouchStart($event)\"\n  (touchmove)=\"onTouchMove($event)\"\n  (touchend)=\"onTouchEnd($event)\"\n  tabindex=\"0\"\n  role=\"region\"\n  aria-roledescription=\"carousel\"\n  [attr.aria-label]=\"'Carousel with ' + slides().length + ' slides'\"\n>\n  <!-- Arrows -->\n  @if (arrows() && slides().length > 1) {\n    <button\n      class=\"ds-carousel__arrow ds-carousel__arrow--left\"\n      (click)=\"prev()\"\n      [attr.aria-label]=\"'Previous slide'\"\n      type=\"button\"\n    >\n      <fa-icon [icon]=\"icons.left\" />\n    </button>\n\n    <button\n      class=\"ds-carousel__arrow ds-carousel__arrow--right\"\n      (click)=\"next()\"\n      [attr.aria-label]=\"'Next slide'\"\n      type=\"button\"\n    >\n      <fa-icon [icon]=\"icons.right\" />\n    </button>\n  }\n\n  <!-- Slides container -->\n  <div class=\"ds-carousel__container\">\n    <div\n      class=\"ds-carousel__track\"\n      #track\n      [ngStyle]=\"trackStyle()\"\n      role=\"list\"\n    >\n      @for (slide of slides(); track slide.id; let i = $index) {\n        <div\n          class=\"{{ slideClasses(i) }}\"\n          #slideElement\n          role=\"listitem\"\n          [attr.aria-hidden]=\"i !== internalActiveIndex()\"\n          [attr.aria-label]=\"'Slide ' + (i + 1) + ' of ' + slides().length\"\n        >\n          @if (slide.image) {\n            <img\n              [src]=\"slide.image\"\n              [alt]=\"slide.alt || slide.title || 'Slide ' + (i + 1)\"\n              class=\"ds-carousel__image\"\n            />\n          }\n\n          @if (slide.title || slide.description) {\n            <div class=\"ds-carousel__content\">\n              @if (slide.title) {\n                <h3 class=\"ds-carousel__title\">{{ slide.title }}</h3>\n              }\n              @if (slide.description) {\n                <p class=\"ds-carousel__description\">{{ slide.description }}</p>\n              }\n            </div>\n          }\n\n          <!-- Content projection for custom slides -->\n          <ng-content select=\"[carousel-slide]\" />\n        </div>\n      }\n    </div>\n  </div>\n\n  <!-- Dots -->\n  @if (dots() && slides().length > 1) {\n    <div\n      class=\"ds-carousel__dots\"\n      role=\"tablist\"\n      [attr.aria-label]=\"'Carousel navigation'\"\n    >\n      @for (slide of slides(); track slide.id; let i = $index) {\n        <button\n          type=\"button\"\n          [class]=\"dotClasses(i)\"\n          (click)=\"goTo(i)\"\n          role=\"tab\"\n          [attr.aria-selected]=\"i === internalActiveIndex()\"\n          [attr.aria-label]=\"'Go to slide ' + (i + 1)\"\n          [attr.aria-controls]=\"'carousel-slide-' + i\"\n        >\n          <span class=\"ds-carousel__dot-inner\"></span>\n        </button>\n      }\n    </div>\n  }\n</div>\n", styles: [".ds-carousel{position:relative;width:100%;overflow:hidden;background-color:var(--carousel-bg, var(--gray-50));border-radius:var(--carousel-radius, var(--radius-2));outline:none}.ds-carousel__container{position:relative;width:100%;height:400px;overflow:hidden}.ds-carousel__track{display:flex;height:100%;transition:transform .3s ease-in-out}.ds-carousel__slide{position:relative;flex:0 0 100%;width:100%;height:100%;display:flex;align-items:center;justify-content:center;opacity:1;transition:opacity .3s ease-in-out}.ds-carousel__slide--fade{position:absolute;top:0;left:0;opacity:0;transition:opacity .5s ease-in-out}.ds-carousel__slide--fade.ds-carousel__slide--active{opacity:1;z-index:1}.ds-carousel__image{width:100%;height:100%;object-fit:cover;display:block}.ds-carousel__content{position:absolute;bottom:0;left:0;right:0;padding:var(--carousel-content-padding, var(--space-6));background:var(--carousel-content-bg, linear-gradient(to top, rgba(0, 0, 0, .7), transparent));color:var(--carousel-content-text, var(--white))}.ds-carousel__title{margin:0 0 var(--space-2) 0;font-size:var(--carousel-title-size, var(--font-size-5));font-weight:var(--font-weight-bold, 700);line-height:1.2}.ds-carousel__description{margin:0;font-size:var(--carousel-description-size, var(--font-size-3));line-height:1.5;opacity:.95}.ds-carousel__arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:10;display:flex;align-items:center;justify-content:center;width:var(--carousel-arrow-size, 40px);height:var(--carousel-arrow-size, 40px);padding:0;background-color:var(--carousel-arrow-bg, rgba(255, 255, 255, .9));color:var(--carousel-arrow-color, var(--gray-800));border:none;border-radius:var(--carousel-arrow-radius, 50%);cursor:pointer;transition:all .2s ease;box-shadow:var(--carousel-arrow-shadow, var(--shadow-md))}.ds-carousel__arrow:hover{background-color:var(--carousel-arrow-bg-hover, var(--white));color:var(--carousel-arrow-color-hover, var(--color-primary));transform:translateY(-50%) scale(1.1)}.ds-carousel__arrow:active{transform:translateY(-50%) scale(.95)}.ds-carousel__arrow:focus-visible{outline:2px solid var(--carousel-arrow-focus, var(--color-primary));outline-offset:2px}.ds-carousel__arrow--left{left:var(--carousel-arrow-offset, var(--space-4))}.ds-carousel__arrow--right{right:var(--carousel-arrow-offset, var(--space-4))}.ds-carousel__arrow fa-icon{font-size:var(--carousel-arrow-icon-size, var(--font-size-4))}.ds-carousel__dots{position:absolute;z-index:10;display:flex;gap:var(--carousel-dots-gap, var(--space-2));padding:var(--carousel-dots-padding, var(--space-4))}.ds-carousel--dots-bottom .ds-carousel__dots{bottom:0;left:50%;transform:translate(-50%);flex-direction:row}.ds-carousel--dots-top .ds-carousel__dots{top:0;left:50%;transform:translate(-50%);flex-direction:row}.ds-carousel--dots-left .ds-carousel__dots{top:50%;left:0;transform:translateY(-50%);flex-direction:column}.ds-carousel--dots-right .ds-carousel__dots{top:50%;right:0;transform:translateY(-50%);flex-direction:column}.ds-carousel__dot{padding:0;border:none;background:transparent;cursor:pointer;transition:all .3s ease}.ds-carousel__dot:focus-visible{outline:2px solid var(--carousel-dot-focus, var(--color-primary));outline-offset:2px;border-radius:50%}.ds-carousel__dot-inner{display:block;width:var(--carousel-dot-size, 10px);height:var(--carousel-dot-size, 10px);background-color:var(--carousel-dot-bg, rgba(255, 255, 255, .5));border-radius:50%;transition:all .3s ease}.ds-carousel__dot--active .ds-carousel__dot-inner{background-color:var(--carousel-dot-bg-active, var(--white));width:var(--carousel-dot-size-active, 12px);height:var(--carousel-dot-size-active, 12px)}.ds-carousel__dot:hover .ds-carousel__dot-inner{background-color:var(--carousel-dot-bg-hover, rgba(255, 255, 255, .8));transform:scale(1.2)}.ds-carousel--fade .ds-carousel__track{position:relative}.ds-carousel--fade .ds-carousel__slide{position:absolute;top:0;left:0}.ds-carousel--transitioning{-webkit-user-select:none;user-select:none}@media (max-width: 768px){.ds-carousel__container{height:300px}.ds-carousel__content{padding:var(--space-4)}.ds-carousel__title{font-size:var(--font-size-4)}.ds-carousel__description{font-size:var(--font-size-2)}.ds-carousel__arrow{width:32px;height:32px}.ds-carousel__arrow fa-icon{font-size:var(--font-size-3)}.ds-carousel__arrow--left,.ds-carousel__arrow--right{--carousel-arrow-offset: var(--space-2)}}@media (max-width: 480px){.ds-carousel__container{height:250px}.ds-carousel__arrow{width:28px;height:28px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i1$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsCarousel, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-carousel', imports: [CommonModule, FontAwesomeModule], template: "<div\n  [class]=\"containerClasses()\"\n  (mouseenter)=\"onMouseEnter()\"\n  (mouseleave)=\"onMouseLeave()\"\n  (keydown)=\"onKeydown($event)\"\n  (touchstart)=\"onTouchStart($event)\"\n  (touchmove)=\"onTouchMove($event)\"\n  (touchend)=\"onTouchEnd($event)\"\n  tabindex=\"0\"\n  role=\"region\"\n  aria-roledescription=\"carousel\"\n  [attr.aria-label]=\"'Carousel with ' + slides().length + ' slides'\"\n>\n  <!-- Arrows -->\n  @if (arrows() && slides().length > 1) {\n    <button\n      class=\"ds-carousel__arrow ds-carousel__arrow--left\"\n      (click)=\"prev()\"\n      [attr.aria-label]=\"'Previous slide'\"\n      type=\"button\"\n    >\n      <fa-icon [icon]=\"icons.left\" />\n    </button>\n\n    <button\n      class=\"ds-carousel__arrow ds-carousel__arrow--right\"\n      (click)=\"next()\"\n      [attr.aria-label]=\"'Next slide'\"\n      type=\"button\"\n    >\n      <fa-icon [icon]=\"icons.right\" />\n    </button>\n  }\n\n  <!-- Slides container -->\n  <div class=\"ds-carousel__container\">\n    <div\n      class=\"ds-carousel__track\"\n      #track\n      [ngStyle]=\"trackStyle()\"\n      role=\"list\"\n    >\n      @for (slide of slides(); track slide.id; let i = $index) {\n        <div\n          class=\"{{ slideClasses(i) }}\"\n          #slideElement\n          role=\"listitem\"\n          [attr.aria-hidden]=\"i !== internalActiveIndex()\"\n          [attr.aria-label]=\"'Slide ' + (i + 1) + ' of ' + slides().length\"\n        >\n          @if (slide.image) {\n            <img\n              [src]=\"slide.image\"\n              [alt]=\"slide.alt || slide.title || 'Slide ' + (i + 1)\"\n              class=\"ds-carousel__image\"\n            />\n          }\n\n          @if (slide.title || slide.description) {\n            <div class=\"ds-carousel__content\">\n              @if (slide.title) {\n                <h3 class=\"ds-carousel__title\">{{ slide.title }}</h3>\n              }\n              @if (slide.description) {\n                <p class=\"ds-carousel__description\">{{ slide.description }}</p>\n              }\n            </div>\n          }\n\n          <!-- Content projection for custom slides -->\n          <ng-content select=\"[carousel-slide]\" />\n        </div>\n      }\n    </div>\n  </div>\n\n  <!-- Dots -->\n  @if (dots() && slides().length > 1) {\n    <div\n      class=\"ds-carousel__dots\"\n      role=\"tablist\"\n      [attr.aria-label]=\"'Carousel navigation'\"\n    >\n      @for (slide of slides(); track slide.id; let i = $index) {\n        <button\n          type=\"button\"\n          [class]=\"dotClasses(i)\"\n          (click)=\"goTo(i)\"\n          role=\"tab\"\n          [attr.aria-selected]=\"i === internalActiveIndex()\"\n          [attr.aria-label]=\"'Go to slide ' + (i + 1)\"\n          [attr.aria-controls]=\"'carousel-slide-' + i\"\n        >\n          <span class=\"ds-carousel__dot-inner\"></span>\n        </button>\n      }\n    </div>\n  }\n</div>\n", styles: [".ds-carousel{position:relative;width:100%;overflow:hidden;background-color:var(--carousel-bg, var(--gray-50));border-radius:var(--carousel-radius, var(--radius-2));outline:none}.ds-carousel__container{position:relative;width:100%;height:400px;overflow:hidden}.ds-carousel__track{display:flex;height:100%;transition:transform .3s ease-in-out}.ds-carousel__slide{position:relative;flex:0 0 100%;width:100%;height:100%;display:flex;align-items:center;justify-content:center;opacity:1;transition:opacity .3s ease-in-out}.ds-carousel__slide--fade{position:absolute;top:0;left:0;opacity:0;transition:opacity .5s ease-in-out}.ds-carousel__slide--fade.ds-carousel__slide--active{opacity:1;z-index:1}.ds-carousel__image{width:100%;height:100%;object-fit:cover;display:block}.ds-carousel__content{position:absolute;bottom:0;left:0;right:0;padding:var(--carousel-content-padding, var(--space-6));background:var(--carousel-content-bg, linear-gradient(to top, rgba(0, 0, 0, .7), transparent));color:var(--carousel-content-text, var(--white))}.ds-carousel__title{margin:0 0 var(--space-2) 0;font-size:var(--carousel-title-size, var(--font-size-5));font-weight:var(--font-weight-bold, 700);line-height:1.2}.ds-carousel__description{margin:0;font-size:var(--carousel-description-size, var(--font-size-3));line-height:1.5;opacity:.95}.ds-carousel__arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:10;display:flex;align-items:center;justify-content:center;width:var(--carousel-arrow-size, 40px);height:var(--carousel-arrow-size, 40px);padding:0;background-color:var(--carousel-arrow-bg, rgba(255, 255, 255, .9));color:var(--carousel-arrow-color, var(--gray-800));border:none;border-radius:var(--carousel-arrow-radius, 50%);cursor:pointer;transition:all .2s ease;box-shadow:var(--carousel-arrow-shadow, var(--shadow-md))}.ds-carousel__arrow:hover{background-color:var(--carousel-arrow-bg-hover, var(--white));color:var(--carousel-arrow-color-hover, var(--color-primary));transform:translateY(-50%) scale(1.1)}.ds-carousel__arrow:active{transform:translateY(-50%) scale(.95)}.ds-carousel__arrow:focus-visible{outline:2px solid var(--carousel-arrow-focus, var(--color-primary));outline-offset:2px}.ds-carousel__arrow--left{left:var(--carousel-arrow-offset, var(--space-4))}.ds-carousel__arrow--right{right:var(--carousel-arrow-offset, var(--space-4))}.ds-carousel__arrow fa-icon{font-size:var(--carousel-arrow-icon-size, var(--font-size-4))}.ds-carousel__dots{position:absolute;z-index:10;display:flex;gap:var(--carousel-dots-gap, var(--space-2));padding:var(--carousel-dots-padding, var(--space-4))}.ds-carousel--dots-bottom .ds-carousel__dots{bottom:0;left:50%;transform:translate(-50%);flex-direction:row}.ds-carousel--dots-top .ds-carousel__dots{top:0;left:50%;transform:translate(-50%);flex-direction:row}.ds-carousel--dots-left .ds-carousel__dots{top:50%;left:0;transform:translateY(-50%);flex-direction:column}.ds-carousel--dots-right .ds-carousel__dots{top:50%;right:0;transform:translateY(-50%);flex-direction:column}.ds-carousel__dot{padding:0;border:none;background:transparent;cursor:pointer;transition:all .3s ease}.ds-carousel__dot:focus-visible{outline:2px solid var(--carousel-dot-focus, var(--color-primary));outline-offset:2px;border-radius:50%}.ds-carousel__dot-inner{display:block;width:var(--carousel-dot-size, 10px);height:var(--carousel-dot-size, 10px);background-color:var(--carousel-dot-bg, rgba(255, 255, 255, .5));border-radius:50%;transition:all .3s ease}.ds-carousel__dot--active .ds-carousel__dot-inner{background-color:var(--carousel-dot-bg-active, var(--white));width:var(--carousel-dot-size-active, 12px);height:var(--carousel-dot-size-active, 12px)}.ds-carousel__dot:hover .ds-carousel__dot-inner{background-color:var(--carousel-dot-bg-hover, rgba(255, 255, 255, .8));transform:scale(1.2)}.ds-carousel--fade .ds-carousel__track{position:relative}.ds-carousel--fade .ds-carousel__slide{position:absolute;top:0;left:0}.ds-carousel--transitioning{-webkit-user-select:none;user-select:none}@media (max-width: 768px){.ds-carousel__container{height:300px}.ds-carousel__content{padding:var(--space-4)}.ds-carousel__title{font-size:var(--font-size-4)}.ds-carousel__description{font-size:var(--font-size-2)}.ds-carousel__arrow{width:32px;height:32px}.ds-carousel__arrow fa-icon{font-size:var(--font-size-3)}.ds-carousel__arrow--left,.ds-carousel__arrow--right{--carousel-arrow-offset: var(--space-2)}}@media (max-width: 480px){.ds-carousel__container{height:250px}.ds-carousel__arrow{width:28px;height:28px}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { slides: [{ type: i0.Input, args: [{ isSignal: true, alias: "slides", required: false }] }], autoplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoplay", required: false }] }], autoplaySpeed: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoplaySpeed", required: false }] }], effect: [{ type: i0.Input, args: [{ isSignal: true, alias: "effect", required: false }] }], dots: [{ type: i0.Input, args: [{ isSignal: true, alias: "dots", required: false }] }], dotsPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "dotsPosition", required: false }] }], arrows: [{ type: i0.Input, args: [{ isSignal: true, alias: "arrows", required: false }] }], infinite: [{ type: i0.Input, args: [{ isSignal: true, alias: "infinite", required: false }] }], pauseOnHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "pauseOnHover", required: false }] }], activeIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeIndex", required: false }] }], slideChange: [{ type: i0.Output, args: ["slideChange"] }], trackElement: [{
+                type: ViewChild,
+                args: ['track', { static: false }]
+            }], slideElements: [{
+                type: ViewChildren,
+                args: ['slideElement']
+            }] } });
+
+class DsNotificationService {
+    notifications = signal([], ...(ngDevMode ? [{ debugName: "notifications" }] : []));
+    nextId = 1;
+    notifications$ = this.notifications.asReadonly();
+    open(config) {
+        const id = config.id || `notification-${this.nextId++}`;
+        const notification = {
+            ...config,
+            id,
+            timestamp: Date.now(),
+            closable: config.closable ?? true,
+            duration: config.duration ?? 4500
+        };
+        // Set default icons based on type
+        if (!notification.icon && notification.type) {
+            notification.icon = this.getDefaultIcon(notification.type);
+        }
+        this.notifications.update(items => [...items, notification]);
+        // Auto-dismiss if duration > 0
+        if (notification.duration && notification.duration > 0) {
+            setTimeout(() => {
+                this.close(id);
+            }, notification.duration);
+        }
+        return id;
+    }
+    info(title, message, config) {
+        return this.open({
+            ...config,
+            title,
+            message,
+            type: 'info'
+        });
+    }
+    success(title, message, config) {
+        return this.open({
+            ...config,
+            title,
+            message,
+            type: 'success'
+        });
+    }
+    warning(title, message, config) {
+        return this.open({
+            ...config,
+            title,
+            message,
+            type: 'warning'
+        });
+    }
+    error(title, message, config) {
+        return this.open({
+            ...config,
+            title,
+            message,
+            type: 'error'
+        });
+    }
+    close(id) {
+        this.notifications.update(items => items.filter(item => item.id !== id));
+    }
+    closeAll() {
+        this.notifications.set([]);
+    }
+    getDefaultIcon(type) {
+        switch (type) {
+            case 'info':
+                return faCircleInfo;
+            case 'success':
+                return faCircleCheck;
+            case 'warning':
+                return faTriangleExclamation;
+            case 'error':
+                return faCircleXmark;
+            default:
+                return faCircleInfo;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsNotificationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsNotificationService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsNotificationService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class DsNotificationItemComponent {
+    notification = input.required(...(ngDevMode ? [{ debugName: "notification" }] : []));
+    closeClick = output();
+    actionClick = output();
+    closeIcon = faXmark;
+    notificationClasses = () => {
+        const classes = ['ds-notification'];
+        const notification = this.notification();
+        if (notification.type) {
+            classes.push(`ds-notification--${notification.type}`);
+        }
+        return classes;
+    };
+    onClose() {
+        this.closeClick.emit(this.notification().id);
+    }
+    onActionClick(index) {
+        const notification = this.notification();
+        if (notification.actions && notification.actions[index]) {
+            notification.actions[index].handler();
+            this.actionClick.emit({ id: notification.id, actionIndex: index });
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsNotificationItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DsNotificationItemComponent, isStandalone: true, selector: "ds-notification-item", inputs: { notification: { classPropertyName: "notification", publicName: "notification", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { closeClick: "closeClick", actionClick: "actionClick" }, ngImport: i0, template: "<div\n  [class]=\"notificationClasses().join(' ')\"\n  role=\"alert\"\n  [attr.aria-live]=\"notification().type === 'error' ? 'assertive' : 'polite'\"\n  [attr.aria-atomic]=\"true\"\n>\n  <div class=\"ds-notification__header\">\n    <div class=\"ds-notification__icon-title\">\n      @if (notification().icon) {\n        <fa-icon\n          [icon]=\"notification().icon\"\n          class=\"ds-notification__icon\"\n          [attr.aria-hidden]=\"true\"\n        />\n      }\n      <h4 class=\"ds-notification__title\">{{ notification().title }}</h4>\n    </div>\n    @if (notification().closable) {\n      <button\n        type=\"button\"\n        class=\"ds-notification__close\"\n        (click)=\"onClose()\"\n        [attr.aria-label]=\"'Fermer la notification'\"\n      >\n        <fa-icon [icon]=\"closeIcon\" />\n      </button>\n    }\n  </div>\n\n  <div class=\"ds-notification__body\">\n    <p class=\"ds-notification__message\">{{ notification().message }}</p>\n  </div>\n\n  @if (notification().actions && notification().actions!.length > 0) {\n    <div class=\"ds-notification__actions\">\n      @for (action of notification().actions!; track $index) {\n        <button\n          type=\"button\"\n          class=\"ds-notification__action ds-notification__action--{{ action.variant || 'secondary' }}\"\n          (click)=\"onActionClick($index)\"\n        >\n          {{ action.label }}\n        </button>\n      }\n    </div>\n  }\n</div>\n", styles: [".ds-notification-container{position:fixed;z-index:var(--notification-z-index, 1050);pointer-events:none;display:flex;flex-direction:column;gap:var(--notification-gap, var(--space-3, .75rem));max-width:var(--notification-max-width, 384px);width:100%}.ds-notification-container--topRight{top:var(--notification-offset-y, var(--space-6, 1.5rem));right:var(--notification-offset-x, var(--space-6, 1.5rem))}.ds-notification-container--topLeft{top:var(--notification-offset-y, var(--space-6, 1.5rem));left:var(--notification-offset-x, var(--space-6, 1.5rem))}.ds-notification-container--bottomRight{bottom:var(--notification-offset-y, var(--space-6, 1.5rem));right:var(--notification-offset-x, var(--space-6, 1.5rem))}.ds-notification-container--bottomLeft{bottom:var(--notification-offset-y, var(--space-6, 1.5rem));left:var(--notification-offset-x, var(--space-6, 1.5rem))}.ds-notification-wrapper{pointer-events:auto;animation:var(--notification-animation-in, slideInRight .3s ease-out)}@keyframes slideInRight{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes slideInLeft{0%{transform:translate(-100%);opacity:0}to{transform:translate(0);opacity:1}}.ds-notification{background:var(--notification-bg, var(--color-white, #ffffff));border:var(--notification-border-width, 1px) solid var(--notification-border-color, var(--gray-300, #d1d5db));border-radius:var(--notification-radius, var(--radius-2, .5rem));box-shadow:var(--notification-shadow, var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, .1)));padding:var(--notification-padding, var(--space-4, 1rem));display:flex;flex-direction:column;gap:var(--notification-gap-inner, var(--space-3, .75rem));width:100%}.ds-notification__header{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-2, .5rem)}.ds-notification__icon-title{display:flex;align-items:center;gap:var(--notification-icon-gap, var(--space-2, .5rem));flex:1}.ds-notification__icon{font-size:var(--notification-icon-size, 1.25rem);flex-shrink:0;color:var(--notification-icon-color, var(--gray-500, #6b7280))}.ds-notification__title{margin:0;font-size:var(--notification-title-size, var(--font-size-base, 1rem));font-weight:var(--notification-title-weight, 600);color:var(--notification-title-color, var(--gray-900, #111827));line-height:1.4}.ds-notification__close{background:transparent;border:none;padding:var(--space-1, .25rem);cursor:pointer;color:var(--notification-close-color, var(--gray-400, #9ca3af));line-height:1;transition:color .2s ease;flex-shrink:0}.ds-notification__close:hover{color:var(--notification-close-hover-color, var(--gray-600, #4b5563))}.ds-notification__close:focus-visible{outline:2px solid var(--color-primary, #3b82f6);outline-offset:2px;border-radius:var(--radius-1, .25rem)}.ds-notification__body{padding-left:calc(var(--notification-icon-size, 1.25rem) + var(--notification-icon-gap, var(--space-2, .5rem)))}.ds-notification__message{margin:0;font-size:var(--notification-message-size, var(--font-size-sm, .875rem));color:var(--notification-message-color, var(--gray-600, #4b5563));line-height:1.5}.ds-notification__actions{display:flex;gap:var(--space-2, .5rem);padding-left:calc(var(--notification-icon-size, 1.25rem) + var(--notification-icon-gap, var(--space-2, .5rem)))}.ds-notification__action{padding:var(--space-2, .5rem) var(--space-3, .75rem);font-size:var(--font-size-sm, .875rem);font-weight:500;border-radius:var(--radius-1, .25rem);cursor:pointer;transition:all .2s ease;border:1px solid transparent}.ds-notification__action--primary{background:var(--color-primary, #3b82f6);color:var(--color-white, #ffffff);border-color:var(--color-primary, #3b82f6)}.ds-notification__action--primary:hover{background:var(--primary-600, #2563eb);border-color:var(--primary-600, #2563eb)}.ds-notification__action--secondary{background:var(--gray-100, #f3f4f6);color:var(--gray-700, #374151);border-color:var(--gray-300, #d1d5db)}.ds-notification__action--secondary:hover{background:var(--gray-200, #e5e7eb)}.ds-notification__action--ghost{background:transparent;color:var(--color-primary, #3b82f6)}.ds-notification__action--ghost:hover{background:var(--primary-50, #eff6ff)}.ds-notification__action:focus-visible{outline:2px solid var(--color-primary, #3b82f6);outline-offset:2px}.ds-notification--info .ds-notification__icon{color:var(--notification-info-icon, var(--color-primary, #3b82f6))}.ds-notification--success .ds-notification__icon{color:var(--notification-success-icon, var(--success, #10b981))}.ds-notification--warning .ds-notification__icon{color:var(--notification-warning-icon, var(--warning, #f59e0b))}.ds-notification--error .ds-notification__icon{color:var(--notification-error-icon, var(--error, #ef4444))}.ds-notification-container--topLeft .ds-notification-wrapper,.ds-notification-container--bottomLeft .ds-notification-wrapper{animation:slideInLeft .3s ease-out}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i1$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsNotificationItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-notification-item', standalone: true, imports: [CommonModule, FontAwesomeModule], template: "<div\n  [class]=\"notificationClasses().join(' ')\"\n  role=\"alert\"\n  [attr.aria-live]=\"notification().type === 'error' ? 'assertive' : 'polite'\"\n  [attr.aria-atomic]=\"true\"\n>\n  <div class=\"ds-notification__header\">\n    <div class=\"ds-notification__icon-title\">\n      @if (notification().icon) {\n        <fa-icon\n          [icon]=\"notification().icon\"\n          class=\"ds-notification__icon\"\n          [attr.aria-hidden]=\"true\"\n        />\n      }\n      <h4 class=\"ds-notification__title\">{{ notification().title }}</h4>\n    </div>\n    @if (notification().closable) {\n      <button\n        type=\"button\"\n        class=\"ds-notification__close\"\n        (click)=\"onClose()\"\n        [attr.aria-label]=\"'Fermer la notification'\"\n      >\n        <fa-icon [icon]=\"closeIcon\" />\n      </button>\n    }\n  </div>\n\n  <div class=\"ds-notification__body\">\n    <p class=\"ds-notification__message\">{{ notification().message }}</p>\n  </div>\n\n  @if (notification().actions && notification().actions!.length > 0) {\n    <div class=\"ds-notification__actions\">\n      @for (action of notification().actions!; track $index) {\n        <button\n          type=\"button\"\n          class=\"ds-notification__action ds-notification__action--{{ action.variant || 'secondary' }}\"\n          (click)=\"onActionClick($index)\"\n        >\n          {{ action.label }}\n        </button>\n      }\n    </div>\n  }\n</div>\n", styles: [".ds-notification-container{position:fixed;z-index:var(--notification-z-index, 1050);pointer-events:none;display:flex;flex-direction:column;gap:var(--notification-gap, var(--space-3, .75rem));max-width:var(--notification-max-width, 384px);width:100%}.ds-notification-container--topRight{top:var(--notification-offset-y, var(--space-6, 1.5rem));right:var(--notification-offset-x, var(--space-6, 1.5rem))}.ds-notification-container--topLeft{top:var(--notification-offset-y, var(--space-6, 1.5rem));left:var(--notification-offset-x, var(--space-6, 1.5rem))}.ds-notification-container--bottomRight{bottom:var(--notification-offset-y, var(--space-6, 1.5rem));right:var(--notification-offset-x, var(--space-6, 1.5rem))}.ds-notification-container--bottomLeft{bottom:var(--notification-offset-y, var(--space-6, 1.5rem));left:var(--notification-offset-x, var(--space-6, 1.5rem))}.ds-notification-wrapper{pointer-events:auto;animation:var(--notification-animation-in, slideInRight .3s ease-out)}@keyframes slideInRight{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes slideInLeft{0%{transform:translate(-100%);opacity:0}to{transform:translate(0);opacity:1}}.ds-notification{background:var(--notification-bg, var(--color-white, #ffffff));border:var(--notification-border-width, 1px) solid var(--notification-border-color, var(--gray-300, #d1d5db));border-radius:var(--notification-radius, var(--radius-2, .5rem));box-shadow:var(--notification-shadow, var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, .1)));padding:var(--notification-padding, var(--space-4, 1rem));display:flex;flex-direction:column;gap:var(--notification-gap-inner, var(--space-3, .75rem));width:100%}.ds-notification__header{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-2, .5rem)}.ds-notification__icon-title{display:flex;align-items:center;gap:var(--notification-icon-gap, var(--space-2, .5rem));flex:1}.ds-notification__icon{font-size:var(--notification-icon-size, 1.25rem);flex-shrink:0;color:var(--notification-icon-color, var(--gray-500, #6b7280))}.ds-notification__title{margin:0;font-size:var(--notification-title-size, var(--font-size-base, 1rem));font-weight:var(--notification-title-weight, 600);color:var(--notification-title-color, var(--gray-900, #111827));line-height:1.4}.ds-notification__close{background:transparent;border:none;padding:var(--space-1, .25rem);cursor:pointer;color:var(--notification-close-color, var(--gray-400, #9ca3af));line-height:1;transition:color .2s ease;flex-shrink:0}.ds-notification__close:hover{color:var(--notification-close-hover-color, var(--gray-600, #4b5563))}.ds-notification__close:focus-visible{outline:2px solid var(--color-primary, #3b82f6);outline-offset:2px;border-radius:var(--radius-1, .25rem)}.ds-notification__body{padding-left:calc(var(--notification-icon-size, 1.25rem) + var(--notification-icon-gap, var(--space-2, .5rem)))}.ds-notification__message{margin:0;font-size:var(--notification-message-size, var(--font-size-sm, .875rem));color:var(--notification-message-color, var(--gray-600, #4b5563));line-height:1.5}.ds-notification__actions{display:flex;gap:var(--space-2, .5rem);padding-left:calc(var(--notification-icon-size, 1.25rem) + var(--notification-icon-gap, var(--space-2, .5rem)))}.ds-notification__action{padding:var(--space-2, .5rem) var(--space-3, .75rem);font-size:var(--font-size-sm, .875rem);font-weight:500;border-radius:var(--radius-1, .25rem);cursor:pointer;transition:all .2s ease;border:1px solid transparent}.ds-notification__action--primary{background:var(--color-primary, #3b82f6);color:var(--color-white, #ffffff);border-color:var(--color-primary, #3b82f6)}.ds-notification__action--primary:hover{background:var(--primary-600, #2563eb);border-color:var(--primary-600, #2563eb)}.ds-notification__action--secondary{background:var(--gray-100, #f3f4f6);color:var(--gray-700, #374151);border-color:var(--gray-300, #d1d5db)}.ds-notification__action--secondary:hover{background:var(--gray-200, #e5e7eb)}.ds-notification__action--ghost{background:transparent;color:var(--color-primary, #3b82f6)}.ds-notification__action--ghost:hover{background:var(--primary-50, #eff6ff)}.ds-notification__action:focus-visible{outline:2px solid var(--color-primary, #3b82f6);outline-offset:2px}.ds-notification--info .ds-notification__icon{color:var(--notification-info-icon, var(--color-primary, #3b82f6))}.ds-notification--success .ds-notification__icon{color:var(--notification-success-icon, var(--success, #10b981))}.ds-notification--warning .ds-notification__icon{color:var(--notification-warning-icon, var(--warning, #f59e0b))}.ds-notification--error .ds-notification__icon{color:var(--notification-error-icon, var(--error, #ef4444))}.ds-notification-container--topLeft .ds-notification-wrapper,.ds-notification-container--bottomLeft .ds-notification-wrapper{animation:slideInLeft .3s ease-out}\n"] }]
+        }], propDecorators: { notification: [{ type: i0.Input, args: [{ isSignal: true, alias: "notification", required: true }] }], closeClick: [{ type: i0.Output, args: ["closeClick"] }], actionClick: [{ type: i0.Output, args: ["actionClick"] }] } });
+
+class DsNotificationContainerComponent {
+    notificationService = inject(DsNotificationService);
+    placement = input('topRight', ...(ngDevMode ? [{ debugName: "placement" }] : []));
+    maxStack = input(5, ...(ngDevMode ? [{ debugName: "maxStack" }] : []));
+    notifications = this.notificationService.notifications$;
+    visibleNotifications = computed(() => {
+        const all = this.notifications();
+        const max = this.maxStack();
+        return all.slice(-max);
+    }, ...(ngDevMode ? [{ debugName: "visibleNotifications" }] : []));
+    containerClasses = computed(() => {
+        const classes = ['ds-notification-container'];
+        classes.push(`ds-notification-container--${this.placement()}`);
+        return classes.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "containerClasses" }] : []));
+    onClose(id) {
+        this.notificationService.close(id);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsNotificationContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DsNotificationContainerComponent, isStandalone: true, selector: "ds-notification-container", inputs: { placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, maxStack: { classPropertyName: "maxStack", publicName: "maxStack", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <div [class]="containerClasses()">
+      @for (notification of visibleNotifications(); track notification.id) {
+        <ds-notification-item
+          [notification]="notification"
+          (closeClick)="onClose($event)"
+          class="ds-notification-wrapper"
+        />
+      }
+    </div>
+  `, isInline: true, styles: [".ds-notification-container{position:fixed;z-index:var(--notification-z-index, 1050);pointer-events:none;display:flex;flex-direction:column;gap:var(--notification-gap, var(--space-3, .75rem));max-width:var(--notification-max-width, 384px);width:100%}.ds-notification-container--topRight{top:var(--notification-offset-y, var(--space-6, 1.5rem));right:var(--notification-offset-x, var(--space-6, 1.5rem))}.ds-notification-container--topLeft{top:var(--notification-offset-y, var(--space-6, 1.5rem));left:var(--notification-offset-x, var(--space-6, 1.5rem))}.ds-notification-container--bottomRight{bottom:var(--notification-offset-y, var(--space-6, 1.5rem));right:var(--notification-offset-x, var(--space-6, 1.5rem))}.ds-notification-container--bottomLeft{bottom:var(--notification-offset-y, var(--space-6, 1.5rem));left:var(--notification-offset-x, var(--space-6, 1.5rem))}.ds-notification-wrapper{pointer-events:auto;animation:var(--notification-animation-in, slideInRight .3s ease-out)}@keyframes slideInRight{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes slideInLeft{0%{transform:translate(-100%);opacity:0}to{transform:translate(0);opacity:1}}.ds-notification{background:var(--notification-bg, var(--color-white, #ffffff));border:var(--notification-border-width, 1px) solid var(--notification-border-color, var(--gray-300, #d1d5db));border-radius:var(--notification-radius, var(--radius-2, .5rem));box-shadow:var(--notification-shadow, var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, .1)));padding:var(--notification-padding, var(--space-4, 1rem));display:flex;flex-direction:column;gap:var(--notification-gap-inner, var(--space-3, .75rem));width:100%}.ds-notification__header{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-2, .5rem)}.ds-notification__icon-title{display:flex;align-items:center;gap:var(--notification-icon-gap, var(--space-2, .5rem));flex:1}.ds-notification__icon{font-size:var(--notification-icon-size, 1.25rem);flex-shrink:0;color:var(--notification-icon-color, var(--gray-500, #6b7280))}.ds-notification__title{margin:0;font-size:var(--notification-title-size, var(--font-size-base, 1rem));font-weight:var(--notification-title-weight, 600);color:var(--notification-title-color, var(--gray-900, #111827));line-height:1.4}.ds-notification__close{background:transparent;border:none;padding:var(--space-1, .25rem);cursor:pointer;color:var(--notification-close-color, var(--gray-400, #9ca3af));line-height:1;transition:color .2s ease;flex-shrink:0}.ds-notification__close:hover{color:var(--notification-close-hover-color, var(--gray-600, #4b5563))}.ds-notification__close:focus-visible{outline:2px solid var(--color-primary, #3b82f6);outline-offset:2px;border-radius:var(--radius-1, .25rem)}.ds-notification__body{padding-left:calc(var(--notification-icon-size, 1.25rem) + var(--notification-icon-gap, var(--space-2, .5rem)))}.ds-notification__message{margin:0;font-size:var(--notification-message-size, var(--font-size-sm, .875rem));color:var(--notification-message-color, var(--gray-600, #4b5563));line-height:1.5}.ds-notification__actions{display:flex;gap:var(--space-2, .5rem);padding-left:calc(var(--notification-icon-size, 1.25rem) + var(--notification-icon-gap, var(--space-2, .5rem)))}.ds-notification__action{padding:var(--space-2, .5rem) var(--space-3, .75rem);font-size:var(--font-size-sm, .875rem);font-weight:500;border-radius:var(--radius-1, .25rem);cursor:pointer;transition:all .2s ease;border:1px solid transparent}.ds-notification__action--primary{background:var(--color-primary, #3b82f6);color:var(--color-white, #ffffff);border-color:var(--color-primary, #3b82f6)}.ds-notification__action--primary:hover{background:var(--primary-600, #2563eb);border-color:var(--primary-600, #2563eb)}.ds-notification__action--secondary{background:var(--gray-100, #f3f4f6);color:var(--gray-700, #374151);border-color:var(--gray-300, #d1d5db)}.ds-notification__action--secondary:hover{background:var(--gray-200, #e5e7eb)}.ds-notification__action--ghost{background:transparent;color:var(--color-primary, #3b82f6)}.ds-notification__action--ghost:hover{background:var(--primary-50, #eff6ff)}.ds-notification__action:focus-visible{outline:2px solid var(--color-primary, #3b82f6);outline-offset:2px}.ds-notification--info .ds-notification__icon{color:var(--notification-info-icon, var(--color-primary, #3b82f6))}.ds-notification--success .ds-notification__icon{color:var(--notification-success-icon, var(--success, #10b981))}.ds-notification--warning .ds-notification__icon{color:var(--notification-warning-icon, var(--warning, #f59e0b))}.ds-notification--error .ds-notification__icon{color:var(--notification-error-icon, var(--error, #ef4444))}.ds-notification-container--topLeft .ds-notification-wrapper,.ds-notification-container--bottomLeft .ds-notification-wrapper{animation:slideInLeft .3s ease-out}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DsNotificationItemComponent, selector: "ds-notification-item", inputs: ["notification"], outputs: ["closeClick", "actionClick"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsNotificationContainerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-notification-container', standalone: true, imports: [CommonModule, DsNotificationItemComponent], template: `
+    <div [class]="containerClasses()">
+      @for (notification of visibleNotifications(); track notification.id) {
+        <ds-notification-item
+          [notification]="notification"
+          (closeClick)="onClose($event)"
+          class="ds-notification-wrapper"
+        />
+      }
+    </div>
+  `, styles: [".ds-notification-container{position:fixed;z-index:var(--notification-z-index, 1050);pointer-events:none;display:flex;flex-direction:column;gap:var(--notification-gap, var(--space-3, .75rem));max-width:var(--notification-max-width, 384px);width:100%}.ds-notification-container--topRight{top:var(--notification-offset-y, var(--space-6, 1.5rem));right:var(--notification-offset-x, var(--space-6, 1.5rem))}.ds-notification-container--topLeft{top:var(--notification-offset-y, var(--space-6, 1.5rem));left:var(--notification-offset-x, var(--space-6, 1.5rem))}.ds-notification-container--bottomRight{bottom:var(--notification-offset-y, var(--space-6, 1.5rem));right:var(--notification-offset-x, var(--space-6, 1.5rem))}.ds-notification-container--bottomLeft{bottom:var(--notification-offset-y, var(--space-6, 1.5rem));left:var(--notification-offset-x, var(--space-6, 1.5rem))}.ds-notification-wrapper{pointer-events:auto;animation:var(--notification-animation-in, slideInRight .3s ease-out)}@keyframes slideInRight{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes slideInLeft{0%{transform:translate(-100%);opacity:0}to{transform:translate(0);opacity:1}}.ds-notification{background:var(--notification-bg, var(--color-white, #ffffff));border:var(--notification-border-width, 1px) solid var(--notification-border-color, var(--gray-300, #d1d5db));border-radius:var(--notification-radius, var(--radius-2, .5rem));box-shadow:var(--notification-shadow, var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, .1)));padding:var(--notification-padding, var(--space-4, 1rem));display:flex;flex-direction:column;gap:var(--notification-gap-inner, var(--space-3, .75rem));width:100%}.ds-notification__header{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-2, .5rem)}.ds-notification__icon-title{display:flex;align-items:center;gap:var(--notification-icon-gap, var(--space-2, .5rem));flex:1}.ds-notification__icon{font-size:var(--notification-icon-size, 1.25rem);flex-shrink:0;color:var(--notification-icon-color, var(--gray-500, #6b7280))}.ds-notification__title{margin:0;font-size:var(--notification-title-size, var(--font-size-base, 1rem));font-weight:var(--notification-title-weight, 600);color:var(--notification-title-color, var(--gray-900, #111827));line-height:1.4}.ds-notification__close{background:transparent;border:none;padding:var(--space-1, .25rem);cursor:pointer;color:var(--notification-close-color, var(--gray-400, #9ca3af));line-height:1;transition:color .2s ease;flex-shrink:0}.ds-notification__close:hover{color:var(--notification-close-hover-color, var(--gray-600, #4b5563))}.ds-notification__close:focus-visible{outline:2px solid var(--color-primary, #3b82f6);outline-offset:2px;border-radius:var(--radius-1, .25rem)}.ds-notification__body{padding-left:calc(var(--notification-icon-size, 1.25rem) + var(--notification-icon-gap, var(--space-2, .5rem)))}.ds-notification__message{margin:0;font-size:var(--notification-message-size, var(--font-size-sm, .875rem));color:var(--notification-message-color, var(--gray-600, #4b5563));line-height:1.5}.ds-notification__actions{display:flex;gap:var(--space-2, .5rem);padding-left:calc(var(--notification-icon-size, 1.25rem) + var(--notification-icon-gap, var(--space-2, .5rem)))}.ds-notification__action{padding:var(--space-2, .5rem) var(--space-3, .75rem);font-size:var(--font-size-sm, .875rem);font-weight:500;border-radius:var(--radius-1, .25rem);cursor:pointer;transition:all .2s ease;border:1px solid transparent}.ds-notification__action--primary{background:var(--color-primary, #3b82f6);color:var(--color-white, #ffffff);border-color:var(--color-primary, #3b82f6)}.ds-notification__action--primary:hover{background:var(--primary-600, #2563eb);border-color:var(--primary-600, #2563eb)}.ds-notification__action--secondary{background:var(--gray-100, #f3f4f6);color:var(--gray-700, #374151);border-color:var(--gray-300, #d1d5db)}.ds-notification__action--secondary:hover{background:var(--gray-200, #e5e7eb)}.ds-notification__action--ghost{background:transparent;color:var(--color-primary, #3b82f6)}.ds-notification__action--ghost:hover{background:var(--primary-50, #eff6ff)}.ds-notification__action:focus-visible{outline:2px solid var(--color-primary, #3b82f6);outline-offset:2px}.ds-notification--info .ds-notification__icon{color:var(--notification-info-icon, var(--color-primary, #3b82f6))}.ds-notification--success .ds-notification__icon{color:var(--notification-success-icon, var(--success, #10b981))}.ds-notification--warning .ds-notification__icon{color:var(--notification-warning-icon, var(--warning, #f59e0b))}.ds-notification--error .ds-notification__icon{color:var(--notification-error-icon, var(--error, #ef4444))}.ds-notification-container--topLeft .ds-notification-wrapper,.ds-notification-container--bottomLeft .ds-notification-wrapper{animation:slideInLeft .3s ease-out}\n"] }]
+        }], propDecorators: { placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], maxStack: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxStack", required: false }] }] } });
+
+/**
+ * DsCalendar - Composant calendrier mensuel/annuel avec gestion d'événements
+ *
+ * @example
+ * ```html
+ * <ds-calendar
+ *   [value]="currentDate"
+ *   [events]="calendarEvents"
+ *   (dateSelect)="onDateSelect($event)"
+ *   (eventClick)="onEventClick($event)">
+ * </ds-calendar>
+ * ```
+ */
+class DsCalendar {
+    // =========================================================================
+    // INPUTS (Signals Angular 20)
+    // =========================================================================
+    /**
+     * Date courante affichée
+     */
+    value = input(new Date(), ...(ngDevMode ? [{ debugName: "value" }] : []));
+    /**
+     * Mode d'affichage (month ou year)
+     */
+    mode = input('month', ...(ngDevMode ? [{ debugName: "mode" }] : []));
+    /**
+     * Événements à afficher dans le calendrier
+     */
+    events = input([], ...(ngDevMode ? [{ debugName: "events" }] : []));
+    /**
+     * Taille du calendrier
+     */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    /**
+     * Locale pour les noms de jours et mois
+     */
+    locale = input('fr-FR', ...(ngDevMode ? [{ debugName: "locale" }] : []));
+    /**
+     * Premier jour de la semaine (0=dimanche, 1=lundi)
+     */
+    firstDayOfWeek = input(1, ...(ngDevMode ? [{ debugName: "firstDayOfWeek" }] : []));
+    /**
+     * Fonction pour désactiver certaines dates
+     */
+    disabledDate = input(undefined, ...(ngDevMode ? [{ debugName: "disabledDate" }] : []));
+    // =========================================================================
+    // OUTPUTS
+    // =========================================================================
+    /**
+     * Émis lors de la sélection d'une date
+     */
+    dateSelect = output();
+    /**
+     * Émis lors du changement de mois
+     */
+    monthChange = output();
+    /**
+     * Émis lors du changement de mode
+     */
+    modeChange = output();
+    /**
+     * Émis lors du clic sur un événement
+     */
+    eventClick = output();
+    // =========================================================================
+    // ÉTAT INTERNE
+    // =========================================================================
+    /**
+     * Date actuellement affichée (mois/année)
+     */
+    displayDate = signal(new Date(), ...(ngDevMode ? [{ debugName: "displayDate" }] : []));
+    /**
+     * Mode actuel (interne)
+     */
+    currentMode = signal('month', ...(ngDevMode ? [{ debugName: "currentMode" }] : []));
+    // =========================================================================
+    // ICÔNES FONTAWESOME
+    // =========================================================================
+    icons = {
+        chevronLeft: faChevronLeft,
+        chevronRight: faChevronRight,
+    };
+    // =========================================================================
+    // COMPUTED SIGNALS
+    // =========================================================================
+    /**
+     * Classes CSS de l'hôte
+     */
+    hostClasses = computed(() => {
+        const classes = ['ds-calendar'];
+        classes.push(`ds-calendar--${this.size()}`);
+        classes.push(`ds-calendar--${this.currentMode()}`);
+        return classes.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
+    /**
+     * Titre du calendrier (mois + année)
+     */
+    calendarTitle = computed(() => {
+        const date = this.displayDate();
+        const locale = this.locale();
+        if (this.currentMode() === 'year') {
+            return date.getFullYear().toString();
+        }
+        const monthName = date.toLocaleDateString(locale, { month: 'long' });
+        const year = date.getFullYear();
+        return `${monthName.charAt(0).toUpperCase() + monthName.slice(1)} ${year}`;
+    }, ...(ngDevMode ? [{ debugName: "calendarTitle" }] : []));
+    /**
+     * Noms des jours de la semaine
+     */
+    weekDays = computed(() => {
+        const locale = this.locale();
+        const firstDay = this.firstDayOfWeek();
+        const days = [];
+        // Générer les noms des jours à partir du premier jour de la semaine
+        for (let i = 0; i < 7; i++) {
+            const date = new Date(2024, 0, firstDay + i); // Année 2024 (lundi = 1er janvier)
+            const dayName = date.toLocaleDateString(locale, { weekday: 'short' });
+            days.push(dayName.charAt(0).toUpperCase() + dayName.slice(1));
+        }
+        return days;
+    }, ...(ngDevMode ? [{ debugName: "weekDays" }] : []));
+    /**
+     * Grille des jours du mois (6 semaines)
+     */
+    calendarGrid = computed(() => {
+        const date = this.displayDate();
+        const firstDay = this.firstDayOfWeek();
+        const events = this.events();
+        const disabledFn = this.disabledDate();
+        const today = new Date();
+        today.setHours(0, 0, 0, 0);
+        const year = date.getFullYear();
+        const month = date.getMonth();
+        // Premier jour du mois
+        const firstDayOfMonth = new Date(year, month, 1);
+        let startDay = firstDayOfMonth.getDay() - firstDay;
+        if (startDay < 0)
+            startDay += 7;
+        // Calculer la date de début de la grille (peut être dans le mois précédent)
+        const startDate = new Date(year, month, 1 - startDay);
+        const days = [];
+        // Générer 42 jours (6 semaines x 7 jours)
+        for (let i = 0; i < 42; i++) {
+            const currentDate = new Date(startDate);
+            currentDate.setDate(startDate.getDate() + i);
+            currentDate.setHours(0, 0, 0, 0);
+            const isCurrentMonth = currentDate.getMonth() === month;
+            const isToday = currentDate.getTime() === today.getTime();
+            const isDisabled = disabledFn ? disabledFn(currentDate) : false;
+            // Trouver les événements pour ce jour
+            const dayEvents = events.filter((event) => {
+                const eventDate = new Date(event.date);
+                eventDate.setHours(0, 0, 0, 0);
+                return eventDate.getTime() === currentDate.getTime();
+            });
+            days.push({
+                date: currentDate,
+                isCurrentMonth,
+                isToday,
+                isDisabled,
+                events: dayEvents,
+            });
+        }
+        return days;
+    }, ...(ngDevMode ? [{ debugName: "calendarGrid" }] : []));
+    /**
+     * Grille des mois (vue année)
+     */
+    monthGrid = computed(() => {
+        const date = this.displayDate();
+        const locale = this.locale();
+        const currentMonth = new Date().getMonth();
+        const currentYear = new Date().getFullYear();
+        const displayYear = date.getFullYear();
+        const months = [];
+        for (let i = 0; i < 12; i++) {
+            const monthDate = new Date(displayYear, i, 1);
+            const monthName = monthDate.toLocaleDateString(locale, { month: 'long' });
+            months.push({
+                monthIndex: i,
+                label: monthName.charAt(0).toUpperCase() + monthName.slice(1),
+                isCurrentMonth: i === currentMonth && displayYear === currentYear,
+            });
+        }
+        return months;
+    }, ...(ngDevMode ? [{ debugName: "monthGrid" }] : []));
+    // =========================================================================
+    // EFFECTS
+    // =========================================================================
+    constructor() {
+        // Synchroniser displayDate avec value au démarrage
+        effect(() => {
+            const value = this.value();
+            this.displayDate.set(new Date(value));
+        }, { allowSignalWrites: true });
+        // Synchroniser currentMode avec mode
+        effect(() => {
+            this.currentMode.set(this.mode());
+        }, { allowSignalWrites: true });
+    }
+    // =========================================================================
+    // MÉTHODES PUBLIQUES
+    // =========================================================================
+    /**
+     * Navigue vers le mois précédent
+     */
+    previousMonth() {
+        const current = this.displayDate();
+        const newDate = new Date(current.getFullYear(), current.getMonth() - 1, 1);
+        this.displayDate.set(newDate);
+        this.monthChange.emit(newDate);
+    }
+    /**
+     * Navigue vers le mois suivant
+     */
+    nextMonth() {
+        const current = this.displayDate();
+        const newDate = new Date(current.getFullYear(), current.getMonth() + 1, 1);
+        this.displayDate.set(newDate);
+        this.monthChange.emit(newDate);
+    }
+    /**
+     * Navigue vers l'année précédente
+     */
+    previousYear() {
+        const current = this.displayDate();
+        const newDate = new Date(current.getFullYear() - 1, current.getMonth(), 1);
+        this.displayDate.set(newDate);
+        this.monthChange.emit(newDate);
+    }
+    /**
+     * Navigue vers l'année suivante
+     */
+    nextYear() {
+        const current = this.displayDate();
+        const newDate = new Date(current.getFullYear() + 1, current.getMonth(), 1);
+        this.displayDate.set(newDate);
+        this.monthChange.emit(newDate);
+    }
+    /**
+     * Sélectionne une date
+     */
+    selectDate(day) {
+        if (day.isDisabled)
+            return;
+        this.dateSelect.emit(new Date(day.date));
+    }
+    /**
+     * Sélectionne un mois (en mode année)
+     */
+    selectMonth(month) {
+        const current = this.displayDate();
+        const newDate = new Date(current.getFullYear(), month.monthIndex, 1);
+        this.displayDate.set(newDate);
+        this.currentMode.set('month');
+        this.modeChange.emit('month');
+    }
+    /**
+     * Toggle entre mode mois et année
+     */
+    toggleMode() {
+        const newMode = this.currentMode() === 'month' ? 'year' : 'month';
+        this.currentMode.set(newMode);
+        this.modeChange.emit(newMode);
+    }
+    /**
+     * Gère le clic sur un événement
+     */
+    onEventClick(event, mouseEvent) {
+        mouseEvent.stopPropagation();
+        this.eventClick.emit(event);
+    }
+    /**
+     * Retourne les classes CSS d'un jour
+     */
+    getDayClasses(day) {
+        const classes = ['ds-calendar__day'];
+        if (!day.isCurrentMonth) {
+            classes.push('ds-calendar__day--other-month');
+        }
+        if (day.isToday) {
+            classes.push('ds-calendar__day--today');
+        }
+        if (day.isDisabled) {
+            classes.push('ds-calendar__day--disabled');
+        }
+        if (day.events.length > 0) {
+            classes.push('ds-calendar__day--has-events');
+        }
+        return classes.join(' ');
+    }
+    /**
+     * Retourne les classes CSS d'un mois
+     */
+    getMonthClasses(month) {
+        const classes = ['ds-calendar__month'];
+        if (month.isCurrentMonth) {
+            classes.push('ds-calendar__month--current');
+        }
+        return classes.join(' ');
+    }
+    /**
+     * Retourne les classes CSS d'un événement
+     */
+    getEventClasses(event) {
+        const classes = ['ds-calendar__event'];
+        if (event.type) {
+            classes.push(`ds-calendar__event--${event.type}`);
+        }
+        return classes.join(' ');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsCalendar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DsCalendar, isStandalone: true, selector: "ds-calendar", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, events: { classPropertyName: "events", publicName: "events", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, disabledDate: { classPropertyName: "disabledDate", publicName: "disabledDate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dateSelect: "dateSelect", monthChange: "monthChange", modeChange: "modeChange", eventClick: "eventClick" }, host: { properties: { "class": "hostClasses()" }, classAttribute: "ds-calendar" }, ngImport: i0, template: "<div class=\"ds-calendar__container\">\n  <!-- Header avec navigation et s\u00E9lecteur mode -->\n  <div class=\"ds-calendar__header\">\n    <div class=\"ds-calendar__nav\">\n      @if (currentMode() === 'month') {\n        <button\n          type=\"button\"\n          class=\"ds-calendar__nav-btn\"\n          (click)=\"previousMonth()\"\n          aria-label=\"Mois pr\u00E9c\u00E9dent\"\n        >\n          <fa-icon [icon]=\"icons.chevronLeft\"></fa-icon>\n        </button>\n      } @else {\n        <button\n          type=\"button\"\n          class=\"ds-calendar__nav-btn\"\n          (click)=\"previousYear()\"\n          aria-label=\"Ann\u00E9e pr\u00E9c\u00E9dente\"\n        >\n          <fa-icon [icon]=\"icons.chevronLeft\"></fa-icon>\n        </button>\n      }\n\n      <button\n        type=\"button\"\n        class=\"ds-calendar__title\"\n        (click)=\"toggleMode()\"\n        [attr.aria-label]=\"currentMode() === 'month' ? 'Voir l\\'ann\u00E9e' : 'Voir le mois'\"\n      >\n        {{ calendarTitle() }}\n      </button>\n\n      @if (currentMode() === 'month') {\n        <button\n          type=\"button\"\n          class=\"ds-calendar__nav-btn\"\n          (click)=\"nextMonth()\"\n          aria-label=\"Mois suivant\"\n        >\n          <fa-icon [icon]=\"icons.chevronRight\"></fa-icon>\n        </button>\n      } @else {\n        <button\n          type=\"button\"\n          class=\"ds-calendar__nav-btn\"\n          (click)=\"nextYear()\"\n          aria-label=\"Ann\u00E9e suivante\"\n        >\n          <fa-icon [icon]=\"icons.chevronRight\"></fa-icon>\n        </button>\n      }\n    </div>\n\n    <div class=\"ds-calendar__mode-selector\">\n      <button\n        type=\"button\"\n        class=\"ds-calendar__mode-btn\"\n        [class.ds-calendar__mode-btn--active]=\"currentMode() === 'month'\"\n        (click)=\"currentMode() === 'year' && toggleMode()\"\n      >\n        Mois\n      </button>\n      <button\n        type=\"button\"\n        class=\"ds-calendar__mode-btn\"\n        [class.ds-calendar__mode-btn--active]=\"currentMode() === 'year'\"\n        (click)=\"currentMode() === 'month' && toggleMode()\"\n      >\n        Ann\u00E9e\n      </button>\n    </div>\n  </div>\n\n  <!-- Vue mois -->\n  @if (currentMode() === 'month') {\n    <div class=\"ds-calendar__month-view\">\n      <!-- Noms des jours de la semaine -->\n      <div class=\"ds-calendar__weekdays\">\n        @for (day of weekDays(); track day) {\n          <div class=\"ds-calendar__weekday\">{{ day }}</div>\n        }\n      </div>\n\n      <!-- Grille des jours -->\n      <div class=\"ds-calendar__grid\">\n        @for (day of calendarGrid(); track day.date.getTime()) {\n          <button\n            type=\"button\"\n            [class]=\"getDayClasses(day)\"\n            [disabled]=\"day.isDisabled\"\n            (click)=\"selectDate(day)\"\n            [attr.aria-label]=\"day.date.toLocaleDateString(locale())\"\n            [attr.aria-current]=\"day.isToday ? 'date' : null\"\n          >\n            <span class=\"ds-calendar__day-number\">{{ day.date.getDate() }}</span>\n\n            @if (day.events.length > 0) {\n              <div class=\"ds-calendar__events\">\n                @for (event of day.events; track event.id) {\n                  <div\n                    [class]=\"getEventClasses(event)\"\n                    [title]=\"event.title\"\n                    (click)=\"onEventClick(event, $event)\"\n                    role=\"button\"\n                    [attr.aria-label]=\"event.title\"\n                  >\n                    <span class=\"ds-calendar__event-dot\"></span>\n                    @if (size() === 'lg') {\n                      <span class=\"ds-calendar__event-title\">{{ event.title }}</span>\n                    }\n                  </div>\n                }\n              </div>\n            }\n          </button>\n        }\n      </div>\n    </div>\n  }\n\n  <!-- Vue ann\u00E9e -->\n  @if (currentMode() === 'year') {\n    <div class=\"ds-calendar__year-view\">\n      <div class=\"ds-calendar__months-grid\">\n        @for (month of monthGrid(); track month.monthIndex) {\n          <button\n            type=\"button\"\n            [class]=\"getMonthClasses(month)\"\n            (click)=\"selectMonth(month)\"\n            [attr.aria-label]=\"month.label\"\n            [attr.aria-current]=\"month.isCurrentMonth ? 'true' : null\"\n          >\n            {{ month.label }}\n          </button>\n        }\n      </div>\n    </div>\n  }\n</div>\n", styles: [".ds-calendar{display:block;width:100%}.ds-calendar__container{background:var(--calendar-bg, var(--white));border:1px solid var(--calendar-border, var(--gray-200));border-radius:var(--calendar-radius, var(--radius-2));overflow:hidden}.ds-calendar__header{display:flex;align-items:center;justify-content:space-between;padding:var(--calendar-header-padding, var(--space-4));border-bottom:1px solid var(--calendar-border, var(--gray-200));background:var(--calendar-header-bg, var(--gray-50))}.ds-calendar__nav{display:flex;align-items:center;gap:var(--calendar-nav-gap, var(--space-2))}.ds-calendar__nav-btn{display:inline-flex;align-items:center;justify-content:center;width:var(--calendar-nav-btn-size, 32px);height:var(--calendar-nav-btn-size, 32px);padding:0;background:transparent;border:1px solid var(--calendar-nav-btn-border, var(--gray-300));border-radius:var(--calendar-nav-btn-radius, var(--radius-1));color:var(--calendar-nav-btn-color, var(--gray-700));font-size:var(--calendar-nav-btn-font-size, var(--font-size-3));cursor:pointer;transition:all .2s ease}.ds-calendar__nav-btn:hover:not(:disabled){background:var(--calendar-nav-btn-hover-bg, var(--gray-100));border-color:var(--calendar-nav-btn-hover-border, var(--gray-400));color:var(--calendar-nav-btn-hover-color, var(--gray-900))}.ds-calendar__nav-btn:active:not(:disabled){transform:scale(.95)}.ds-calendar__nav-btn:disabled{opacity:.5;cursor:not-allowed}.ds-calendar__title{padding:var(--calendar-title-padding, var(--space-2) var(--space-3));background:transparent;border:1px solid transparent;border-radius:var(--calendar-title-radius, var(--radius-1));color:var(--calendar-title-color, var(--gray-900));font-size:var(--calendar-title-font-size, var(--font-size-4));font-weight:var(--calendar-title-font-weight, 600);cursor:pointer;transition:all .2s ease}.ds-calendar__title:hover{background:var(--calendar-title-hover-bg, var(--gray-100));border-color:var(--calendar-title-hover-border, var(--gray-300))}.ds-calendar__mode-selector{display:flex;gap:var(--calendar-mode-gap, var(--space-1));background:var(--calendar-mode-bg, var(--white));border:1px solid var(--calendar-mode-border, var(--gray-300));border-radius:var(--calendar-mode-radius, var(--radius-1));padding:var(--calendar-mode-padding, 2px)}.ds-calendar__mode-btn{padding:var(--calendar-mode-btn-padding, var(--space-1) var(--space-3));background:transparent;border:none;border-radius:var(--calendar-mode-btn-radius, var(--radius-1));color:var(--calendar-mode-btn-color, var(--gray-700));font-size:var(--calendar-mode-btn-font-size, var(--font-size-2));cursor:pointer;transition:all .2s ease}.ds-calendar__mode-btn:hover{color:var(--calendar-mode-btn-hover-color, var(--gray-900))}.ds-calendar__mode-btn--active{background:var(--calendar-mode-btn-active-bg, var(--color-primary));color:var(--calendar-mode-btn-active-color, var(--white))}.ds-calendar__month-view{padding:var(--calendar-month-view-padding, var(--space-4))}.ds-calendar__weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--calendar-weekday-gap, var(--space-1));margin-bottom:var(--calendar-weekday-margin, var(--space-2))}.ds-calendar__weekday{text-align:center;color:var(--calendar-weekday-color, var(--gray-600));font-size:var(--calendar-weekday-font-size, var(--font-size-2));font-weight:var(--calendar-weekday-font-weight, 600);text-transform:uppercase;padding:var(--calendar-weekday-padding, var(--space-2) 0)}.ds-calendar__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--calendar-grid-gap, var(--space-1))}.ds-calendar__day{position:relative;aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:var(--calendar-day-padding, var(--space-2));background:var(--calendar-day-bg, transparent);border:1px solid var(--calendar-day-border, transparent);border-radius:var(--calendar-day-radius, var(--radius-1));color:var(--calendar-day-color, var(--gray-900));font-size:var(--calendar-day-font-size, var(--font-size-3));cursor:pointer;transition:all .2s ease}.ds-calendar__day:hover:not(:disabled){background:var(--calendar-day-hover-bg, var(--gray-100));border-color:var(--calendar-day-hover-border, var(--gray-300))}.ds-calendar__day--other-month{color:var(--calendar-day-other-month-color, var(--gray-400))}.ds-calendar__day--today{background:var(--calendar-day-today-bg, var(--blue-50));border-color:var(--calendar-day-today-border, var(--color-primary));color:var(--calendar-day-today-color, var(--color-primary));font-weight:600}.ds-calendar__day--disabled{opacity:.4;cursor:not-allowed;background:var(--calendar-day-disabled-bg, var(--gray-50))}.ds-calendar__day--has-events .ds-calendar__day-number{font-weight:600}.ds-calendar__day-number{line-height:1;margin-bottom:var(--calendar-day-number-margin, var(--space-1))}.ds-calendar__events{display:flex;flex-direction:column;gap:var(--calendar-events-gap, 2px);width:100%;margin-top:auto}.ds-calendar__event{display:flex;align-items:center;gap:var(--calendar-event-gap, var(--space-1));padding:var(--calendar-event-padding, 2px);border-radius:var(--calendar-event-radius, var(--radius-1));cursor:pointer;transition:all .2s ease}.ds-calendar__event:hover{transform:scale(1.05)}.ds-calendar__event-dot{width:var(--calendar-event-dot-size, 6px);height:var(--calendar-event-dot-size, 6px);border-radius:50%;background:var(--calendar-event-dot-color, var(--gray-500));flex-shrink:0}.ds-calendar__event-title{font-size:var(--calendar-event-title-font-size, var(--font-size-1));color:var(--calendar-event-title-color, var(--gray-700));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ds-calendar__event--success .ds-calendar__event-dot{background:var(--calendar-event-success-color, var(--success))}.ds-calendar__event--warning .ds-calendar__event-dot{background:var(--calendar-event-warning-color, var(--warning))}.ds-calendar__event--error .ds-calendar__event-dot{background:var(--calendar-event-error-color, var(--error))}.ds-calendar__year-view{padding:var(--calendar-year-view-padding, var(--space-4))}.ds-calendar__months-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--calendar-months-gap, var(--space-3))}.ds-calendar__month{padding:var(--calendar-month-padding, var(--space-4));background:var(--calendar-month-bg, transparent);border:1px solid var(--calendar-month-border, var(--gray-200));border-radius:var(--calendar-month-radius, var(--radius-2));color:var(--calendar-month-color, var(--gray-900));font-size:var(--calendar-month-font-size, var(--font-size-3));font-weight:500;cursor:pointer;transition:all .2s ease;text-align:center}.ds-calendar__month:hover{background:var(--calendar-month-hover-bg, var(--gray-50));border-color:var(--calendar-month-hover-border, var(--gray-300))}.ds-calendar__month--current{background:var(--calendar-month-current-bg, var(--blue-50));border-color:var(--calendar-month-current-border, var(--color-primary));color:var(--calendar-month-current-color, var(--color-primary));font-weight:600}.ds-calendar--sm .ds-calendar__header{padding:var(--calendar-header-padding-sm, var(--space-2))}.ds-calendar--sm .ds-calendar__title{font-size:var(--calendar-title-font-size-sm, var(--font-size-3))}.ds-calendar--sm .ds-calendar__weekday{font-size:var(--calendar-weekday-font-size-sm, var(--font-size-1))}.ds-calendar--sm .ds-calendar__day{padding:var(--calendar-day-padding-sm, var(--space-1));font-size:var(--calendar-day-font-size-sm, var(--font-size-2))}.ds-calendar--sm .ds-calendar__month{padding:var(--calendar-month-padding-sm, var(--space-2));font-size:var(--calendar-month-font-size-sm, var(--font-size-2))}.ds-calendar--lg .ds-calendar__header{padding:var(--calendar-header-padding-lg, var(--space-6))}.ds-calendar--lg .ds-calendar__title{font-size:var(--calendar-title-font-size-lg, var(--font-size-5))}.ds-calendar--lg .ds-calendar__weekday{font-size:var(--calendar-weekday-font-size-lg, var(--font-size-3))}.ds-calendar--lg .ds-calendar__day{padding:var(--calendar-day-padding-lg, var(--space-3));font-size:var(--calendar-day-font-size-lg, var(--font-size-4))}.ds-calendar--lg .ds-calendar__month{padding:var(--calendar-month-padding-lg, var(--space-6));font-size:var(--calendar-month-font-size-lg, var(--font-size-4))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i1$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsCalendar, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-calendar', standalone: true, imports: [CommonModule, FontAwesomeModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        class: 'ds-calendar',
+                        '[class]': 'hostClasses()',
+                    }, template: "<div class=\"ds-calendar__container\">\n  <!-- Header avec navigation et s\u00E9lecteur mode -->\n  <div class=\"ds-calendar__header\">\n    <div class=\"ds-calendar__nav\">\n      @if (currentMode() === 'month') {\n        <button\n          type=\"button\"\n          class=\"ds-calendar__nav-btn\"\n          (click)=\"previousMonth()\"\n          aria-label=\"Mois pr\u00E9c\u00E9dent\"\n        >\n          <fa-icon [icon]=\"icons.chevronLeft\"></fa-icon>\n        </button>\n      } @else {\n        <button\n          type=\"button\"\n          class=\"ds-calendar__nav-btn\"\n          (click)=\"previousYear()\"\n          aria-label=\"Ann\u00E9e pr\u00E9c\u00E9dente\"\n        >\n          <fa-icon [icon]=\"icons.chevronLeft\"></fa-icon>\n        </button>\n      }\n\n      <button\n        type=\"button\"\n        class=\"ds-calendar__title\"\n        (click)=\"toggleMode()\"\n        [attr.aria-label]=\"currentMode() === 'month' ? 'Voir l\\'ann\u00E9e' : 'Voir le mois'\"\n      >\n        {{ calendarTitle() }}\n      </button>\n\n      @if (currentMode() === 'month') {\n        <button\n          type=\"button\"\n          class=\"ds-calendar__nav-btn\"\n          (click)=\"nextMonth()\"\n          aria-label=\"Mois suivant\"\n        >\n          <fa-icon [icon]=\"icons.chevronRight\"></fa-icon>\n        </button>\n      } @else {\n        <button\n          type=\"button\"\n          class=\"ds-calendar__nav-btn\"\n          (click)=\"nextYear()\"\n          aria-label=\"Ann\u00E9e suivante\"\n        >\n          <fa-icon [icon]=\"icons.chevronRight\"></fa-icon>\n        </button>\n      }\n    </div>\n\n    <div class=\"ds-calendar__mode-selector\">\n      <button\n        type=\"button\"\n        class=\"ds-calendar__mode-btn\"\n        [class.ds-calendar__mode-btn--active]=\"currentMode() === 'month'\"\n        (click)=\"currentMode() === 'year' && toggleMode()\"\n      >\n        Mois\n      </button>\n      <button\n        type=\"button\"\n        class=\"ds-calendar__mode-btn\"\n        [class.ds-calendar__mode-btn--active]=\"currentMode() === 'year'\"\n        (click)=\"currentMode() === 'month' && toggleMode()\"\n      >\n        Ann\u00E9e\n      </button>\n    </div>\n  </div>\n\n  <!-- Vue mois -->\n  @if (currentMode() === 'month') {\n    <div class=\"ds-calendar__month-view\">\n      <!-- Noms des jours de la semaine -->\n      <div class=\"ds-calendar__weekdays\">\n        @for (day of weekDays(); track day) {\n          <div class=\"ds-calendar__weekday\">{{ day }}</div>\n        }\n      </div>\n\n      <!-- Grille des jours -->\n      <div class=\"ds-calendar__grid\">\n        @for (day of calendarGrid(); track day.date.getTime()) {\n          <button\n            type=\"button\"\n            [class]=\"getDayClasses(day)\"\n            [disabled]=\"day.isDisabled\"\n            (click)=\"selectDate(day)\"\n            [attr.aria-label]=\"day.date.toLocaleDateString(locale())\"\n            [attr.aria-current]=\"day.isToday ? 'date' : null\"\n          >\n            <span class=\"ds-calendar__day-number\">{{ day.date.getDate() }}</span>\n\n            @if (day.events.length > 0) {\n              <div class=\"ds-calendar__events\">\n                @for (event of day.events; track event.id) {\n                  <div\n                    [class]=\"getEventClasses(event)\"\n                    [title]=\"event.title\"\n                    (click)=\"onEventClick(event, $event)\"\n                    role=\"button\"\n                    [attr.aria-label]=\"event.title\"\n                  >\n                    <span class=\"ds-calendar__event-dot\"></span>\n                    @if (size() === 'lg') {\n                      <span class=\"ds-calendar__event-title\">{{ event.title }}</span>\n                    }\n                  </div>\n                }\n              </div>\n            }\n          </button>\n        }\n      </div>\n    </div>\n  }\n\n  <!-- Vue ann\u00E9e -->\n  @if (currentMode() === 'year') {\n    <div class=\"ds-calendar__year-view\">\n      <div class=\"ds-calendar__months-grid\">\n        @for (month of monthGrid(); track month.monthIndex) {\n          <button\n            type=\"button\"\n            [class]=\"getMonthClasses(month)\"\n            (click)=\"selectMonth(month)\"\n            [attr.aria-label]=\"month.label\"\n            [attr.aria-current]=\"month.isCurrentMonth ? 'true' : null\"\n          >\n            {{ month.label }}\n          </button>\n        }\n      </div>\n    </div>\n  }\n</div>\n", styles: [".ds-calendar{display:block;width:100%}.ds-calendar__container{background:var(--calendar-bg, var(--white));border:1px solid var(--calendar-border, var(--gray-200));border-radius:var(--calendar-radius, var(--radius-2));overflow:hidden}.ds-calendar__header{display:flex;align-items:center;justify-content:space-between;padding:var(--calendar-header-padding, var(--space-4));border-bottom:1px solid var(--calendar-border, var(--gray-200));background:var(--calendar-header-bg, var(--gray-50))}.ds-calendar__nav{display:flex;align-items:center;gap:var(--calendar-nav-gap, var(--space-2))}.ds-calendar__nav-btn{display:inline-flex;align-items:center;justify-content:center;width:var(--calendar-nav-btn-size, 32px);height:var(--calendar-nav-btn-size, 32px);padding:0;background:transparent;border:1px solid var(--calendar-nav-btn-border, var(--gray-300));border-radius:var(--calendar-nav-btn-radius, var(--radius-1));color:var(--calendar-nav-btn-color, var(--gray-700));font-size:var(--calendar-nav-btn-font-size, var(--font-size-3));cursor:pointer;transition:all .2s ease}.ds-calendar__nav-btn:hover:not(:disabled){background:var(--calendar-nav-btn-hover-bg, var(--gray-100));border-color:var(--calendar-nav-btn-hover-border, var(--gray-400));color:var(--calendar-nav-btn-hover-color, var(--gray-900))}.ds-calendar__nav-btn:active:not(:disabled){transform:scale(.95)}.ds-calendar__nav-btn:disabled{opacity:.5;cursor:not-allowed}.ds-calendar__title{padding:var(--calendar-title-padding, var(--space-2) var(--space-3));background:transparent;border:1px solid transparent;border-radius:var(--calendar-title-radius, var(--radius-1));color:var(--calendar-title-color, var(--gray-900));font-size:var(--calendar-title-font-size, var(--font-size-4));font-weight:var(--calendar-title-font-weight, 600);cursor:pointer;transition:all .2s ease}.ds-calendar__title:hover{background:var(--calendar-title-hover-bg, var(--gray-100));border-color:var(--calendar-title-hover-border, var(--gray-300))}.ds-calendar__mode-selector{display:flex;gap:var(--calendar-mode-gap, var(--space-1));background:var(--calendar-mode-bg, var(--white));border:1px solid var(--calendar-mode-border, var(--gray-300));border-radius:var(--calendar-mode-radius, var(--radius-1));padding:var(--calendar-mode-padding, 2px)}.ds-calendar__mode-btn{padding:var(--calendar-mode-btn-padding, var(--space-1) var(--space-3));background:transparent;border:none;border-radius:var(--calendar-mode-btn-radius, var(--radius-1));color:var(--calendar-mode-btn-color, var(--gray-700));font-size:var(--calendar-mode-btn-font-size, var(--font-size-2));cursor:pointer;transition:all .2s ease}.ds-calendar__mode-btn:hover{color:var(--calendar-mode-btn-hover-color, var(--gray-900))}.ds-calendar__mode-btn--active{background:var(--calendar-mode-btn-active-bg, var(--color-primary));color:var(--calendar-mode-btn-active-color, var(--white))}.ds-calendar__month-view{padding:var(--calendar-month-view-padding, var(--space-4))}.ds-calendar__weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--calendar-weekday-gap, var(--space-1));margin-bottom:var(--calendar-weekday-margin, var(--space-2))}.ds-calendar__weekday{text-align:center;color:var(--calendar-weekday-color, var(--gray-600));font-size:var(--calendar-weekday-font-size, var(--font-size-2));font-weight:var(--calendar-weekday-font-weight, 600);text-transform:uppercase;padding:var(--calendar-weekday-padding, var(--space-2) 0)}.ds-calendar__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--calendar-grid-gap, var(--space-1))}.ds-calendar__day{position:relative;aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:var(--calendar-day-padding, var(--space-2));background:var(--calendar-day-bg, transparent);border:1px solid var(--calendar-day-border, transparent);border-radius:var(--calendar-day-radius, var(--radius-1));color:var(--calendar-day-color, var(--gray-900));font-size:var(--calendar-day-font-size, var(--font-size-3));cursor:pointer;transition:all .2s ease}.ds-calendar__day:hover:not(:disabled){background:var(--calendar-day-hover-bg, var(--gray-100));border-color:var(--calendar-day-hover-border, var(--gray-300))}.ds-calendar__day--other-month{color:var(--calendar-day-other-month-color, var(--gray-400))}.ds-calendar__day--today{background:var(--calendar-day-today-bg, var(--blue-50));border-color:var(--calendar-day-today-border, var(--color-primary));color:var(--calendar-day-today-color, var(--color-primary));font-weight:600}.ds-calendar__day--disabled{opacity:.4;cursor:not-allowed;background:var(--calendar-day-disabled-bg, var(--gray-50))}.ds-calendar__day--has-events .ds-calendar__day-number{font-weight:600}.ds-calendar__day-number{line-height:1;margin-bottom:var(--calendar-day-number-margin, var(--space-1))}.ds-calendar__events{display:flex;flex-direction:column;gap:var(--calendar-events-gap, 2px);width:100%;margin-top:auto}.ds-calendar__event{display:flex;align-items:center;gap:var(--calendar-event-gap, var(--space-1));padding:var(--calendar-event-padding, 2px);border-radius:var(--calendar-event-radius, var(--radius-1));cursor:pointer;transition:all .2s ease}.ds-calendar__event:hover{transform:scale(1.05)}.ds-calendar__event-dot{width:var(--calendar-event-dot-size, 6px);height:var(--calendar-event-dot-size, 6px);border-radius:50%;background:var(--calendar-event-dot-color, var(--gray-500));flex-shrink:0}.ds-calendar__event-title{font-size:var(--calendar-event-title-font-size, var(--font-size-1));color:var(--calendar-event-title-color, var(--gray-700));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ds-calendar__event--success .ds-calendar__event-dot{background:var(--calendar-event-success-color, var(--success))}.ds-calendar__event--warning .ds-calendar__event-dot{background:var(--calendar-event-warning-color, var(--warning))}.ds-calendar__event--error .ds-calendar__event-dot{background:var(--calendar-event-error-color, var(--error))}.ds-calendar__year-view{padding:var(--calendar-year-view-padding, var(--space-4))}.ds-calendar__months-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--calendar-months-gap, var(--space-3))}.ds-calendar__month{padding:var(--calendar-month-padding, var(--space-4));background:var(--calendar-month-bg, transparent);border:1px solid var(--calendar-month-border, var(--gray-200));border-radius:var(--calendar-month-radius, var(--radius-2));color:var(--calendar-month-color, var(--gray-900));font-size:var(--calendar-month-font-size, var(--font-size-3));font-weight:500;cursor:pointer;transition:all .2s ease;text-align:center}.ds-calendar__month:hover{background:var(--calendar-month-hover-bg, var(--gray-50));border-color:var(--calendar-month-hover-border, var(--gray-300))}.ds-calendar__month--current{background:var(--calendar-month-current-bg, var(--blue-50));border-color:var(--calendar-month-current-border, var(--color-primary));color:var(--calendar-month-current-color, var(--color-primary));font-weight:600}.ds-calendar--sm .ds-calendar__header{padding:var(--calendar-header-padding-sm, var(--space-2))}.ds-calendar--sm .ds-calendar__title{font-size:var(--calendar-title-font-size-sm, var(--font-size-3))}.ds-calendar--sm .ds-calendar__weekday{font-size:var(--calendar-weekday-font-size-sm, var(--font-size-1))}.ds-calendar--sm .ds-calendar__day{padding:var(--calendar-day-padding-sm, var(--space-1));font-size:var(--calendar-day-font-size-sm, var(--font-size-2))}.ds-calendar--sm .ds-calendar__month{padding:var(--calendar-month-padding-sm, var(--space-2));font-size:var(--calendar-month-font-size-sm, var(--font-size-2))}.ds-calendar--lg .ds-calendar__header{padding:var(--calendar-header-padding-lg, var(--space-6))}.ds-calendar--lg .ds-calendar__title{font-size:var(--calendar-title-font-size-lg, var(--font-size-5))}.ds-calendar--lg .ds-calendar__weekday{font-size:var(--calendar-weekday-font-size-lg, var(--font-size-3))}.ds-calendar--lg .ds-calendar__day{padding:var(--calendar-day-padding-lg, var(--space-3));font-size:var(--calendar-day-font-size-lg, var(--font-size-4))}.ds-calendar--lg .ds-calendar__month{padding:var(--calendar-month-padding-lg, var(--space-6));font-size:var(--calendar-month-font-size-lg, var(--font-size-4))}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], events: [{ type: i0.Input, args: [{ isSignal: true, alias: "events", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], disabledDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledDate", required: false }] }], dateSelect: [{ type: i0.Output, args: ["dateSelect"] }], monthChange: [{ type: i0.Output, args: ["monthChange"] }], modeChange: [{ type: i0.Output, args: ["modeChange"] }], eventClick: [{ type: i0.Output, args: ["eventClick"] }] } });
+
+class DsInputNumber {
+    // Config
+    min = input(-Infinity, ...(ngDevMode ? [{ debugName: "min" }] : []));
+    max = input(Infinity, ...(ngDevMode ? [{ debugName: "max" }] : []));
+    step = input(1, ...(ngDevMode ? [{ debugName: "step" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    prefix = input(undefined, ...(ngDevMode ? [{ debugName: "prefix" }] : []));
+    suffix = input(undefined, ...(ngDevMode ? [{ debugName: "suffix" }] : []));
+    precision = input(0, ...(ngDevMode ? [{ debugName: "precision" }] : []));
+    controls = input(true, ...(ngDevMode ? [{ debugName: "controls" }] : []));
+    controlsPosition = input('both', ...(ngDevMode ? [{ debugName: "controlsPosition" }] : []));
+    // Accessibility
+    ariaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    id = input(crypto.randomUUID(), ...(ngDevMode ? [{ debugName: "id" }] : []));
+    name = input(undefined, ...(ngDevMode ? [{ debugName: "name" }] : []));
+    // Events
+    valueChange = output();
+    // ViewChild
+    inputElement;
+    // Icons
+    faMinus = faMinus;
+    faPlus = faPlus;
+    // Internal state
+    disabledState = signal(false, ...(ngDevMode ? [{ debugName: "disabledState" }] : []));
+    internalValue = signal(null, ...(ngDevMode ? [{ debugName: "internalValue" }] : []));
+    focused = signal(false, ...(ngDevMode ? [{ debugName: "focused" }] : []));
+    displayValue = signal('', ...(ngDevMode ? [{ debugName: "displayValue" }] : []));
+    constructor() {
+        // Effect pour formater l'affichage
+        effect(() => {
+            const val = this.internalValue();
+            if (val === null) {
+                this.displayValue.set('');
+                return;
+            }
+            const formatted = this.formatValue(val);
+            this.displayValue.set(formatted);
+        });
+    }
+    isDisabled = computed(() => this.disabled() || this.disabledState(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
+    isReadonly = computed(() => this.readonly(), ...(ngDevMode ? [{ debugName: "isReadonly" }] : []));
+    showControls = computed(() => this.controls() && !this.isDisabled() && !this.isReadonly(), ...(ngDevMode ? [{ debugName: "showControls" }] : []));
+    controlsOnRight = computed(() => this.controlsPosition() === 'right', ...(ngDevMode ? [{ debugName: "controlsOnRight" }] : []));
+    controlsOnBoth = computed(() => this.controlsPosition() === 'both', ...(ngDevMode ? [{ debugName: "controlsOnBoth" }] : []));
+    containerClasses = computed(() => {
+        const classes = ['ds-input-number'];
+        classes.push(`ds-input-number--${this.size()}`);
+        if (this.isDisabled())
+            classes.push('ds-input-number--disabled');
+        if (this.isReadonly())
+            classes.push('ds-input-number--readonly');
+        if (this.focused())
+            classes.push('ds-input-number--focused');
+        if (this.controlsOnRight())
+            classes.push('ds-input-number--controls-right');
+        if (this.controlsOnBoth())
+            classes.push('ds-input-number--controls-both');
+        if (this.prefix())
+            classes.push('ds-input-number--has-prefix');
+        if (this.suffix())
+            classes.push('ds-input-number--has-suffix');
+        return classes.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "containerClasses" }] : []));
+    canDecrement = computed(() => {
+        if (!this.showControls())
+            return false;
+        const val = this.internalValue();
+        if (val === null)
+            return true;
+        return val > this.min();
+    }, ...(ngDevMode ? [{ debugName: "canDecrement" }] : []));
+    canIncrement = computed(() => {
+        if (!this.showControls())
+            return false;
+        const val = this.internalValue();
+        if (val === null)
+            return true;
+        return val < this.max();
+    }, ...(ngDevMode ? [{ debugName: "canIncrement" }] : []));
+    // ControlValueAccessor
+    onChange = () => { };
+    onTouched = () => { };
+    writeValue(value) {
+        this.internalValue.set(value);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabledState.set(isDisabled);
+    }
+    // Helpers
+    formatValue(value) {
+        const prec = this.precision();
+        return prec > 0 ? value.toFixed(prec) : Math.floor(value).toString();
+    }
+    parseValue(input) {
+        if (input === '' || input === '-')
+            return null;
+        const parsed = parseFloat(input);
+        if (isNaN(parsed))
+            return null;
+        return parsed;
+    }
+    clampValue(value) {
+        return Math.max(this.min(), Math.min(this.max(), value));
+    }
+    roundToPrecision(value) {
+        const prec = this.precision();
+        if (prec === 0)
+            return Math.round(value);
+        const multiplier = Math.pow(10, prec);
+        return Math.round(value * multiplier) / multiplier;
+    }
+    emitValue(value) {
+        this.onChange(value);
+        if (value !== null) {
+            this.valueChange.emit(value);
+        }
+    }
+    // Event handlers
+    onInputChange(event) {
+        if (this.isDisabled() || this.isReadonly())
+            return;
+        const target = event.target;
+        const parsed = this.parseValue(target.value);
+        if (parsed === null) {
+            this.internalValue.set(null);
+            this.emitValue(null);
+            return;
+        }
+        const clamped = this.clampValue(parsed);
+        const rounded = this.roundToPrecision(clamped);
+        this.internalValue.set(rounded);
+        this.emitValue(rounded);
+    }
+    onInputBlur() {
+        this.focused.set(false);
+        this.onTouched();
+        // Formater la valeur au blur
+        const val = this.internalValue();
+        if (val !== null) {
+            const clamped = this.clampValue(val);
+            const rounded = this.roundToPrecision(clamped);
+            if (rounded !== val) {
+                this.internalValue.set(rounded);
+                this.emitValue(rounded);
+            }
+        }
+    }
+    onInputFocus() {
+        this.focused.set(true);
+    }
+    onKeyDown(event) {
+        if (this.isDisabled() || this.isReadonly())
+            return;
+        const stepVal = this.step();
+        let handled = false;
+        switch (event.key) {
+            case 'ArrowUp':
+                this.increment();
+                handled = true;
+                break;
+            case 'ArrowDown':
+                this.decrement();
+                handled = true;
+                break;
+            case 'Home':
+                this.setToMin();
+                handled = true;
+                break;
+            case 'End':
+                this.setToMax();
+                handled = true;
+                break;
+            case 'PageUp':
+                this.incrementBy(stepVal * 10);
+                handled = true;
+                break;
+            case 'PageDown':
+                this.decrementBy(stepVal * 10);
+                handled = true;
+                break;
+        }
+        if (handled) {
+            event.preventDefault();
+        }
+    }
+    increment() {
+        if (!this.canIncrement())
+            return;
+        this.incrementBy(this.step());
+    }
+    decrement() {
+        if (!this.canDecrement())
+            return;
+        this.decrementBy(this.step());
+    }
+    incrementBy(delta) {
+        const current = this.internalValue() ?? this.min();
+        const newValue = this.clampValue(this.roundToPrecision(current + delta));
+        this.internalValue.set(newValue);
+        this.emitValue(newValue);
+        this.inputElement?.nativeElement.focus();
+    }
+    decrementBy(delta) {
+        const current = this.internalValue() ?? this.max();
+        const newValue = this.clampValue(this.roundToPrecision(current - delta));
+        this.internalValue.set(newValue);
+        this.emitValue(newValue);
+        this.inputElement?.nativeElement.focus();
+    }
+    setToMin() {
+        const newValue = this.min();
+        this.internalValue.set(newValue);
+        this.emitValue(newValue);
+    }
+    setToMax() {
+        const newValue = this.max();
+        this.internalValue.set(newValue);
+        this.emitValue(newValue);
+    }
+    // ARIA helpers
+    ariaValueMin = computed(() => this.min(), ...(ngDevMode ? [{ debugName: "ariaValueMin" }] : []));
+    ariaValueMax = computed(() => this.max(), ...(ngDevMode ? [{ debugName: "ariaValueMax" }] : []));
+    ariaValueNow = computed(() => this.internalValue() ?? undefined, ...(ngDevMode ? [{ debugName: "ariaValueNow" }] : []));
+    ariaValueText = computed(() => {
+        const val = this.internalValue();
+        if (val === null)
+            return undefined;
+        const prefixStr = this.prefix() ?? '';
+        const suffixStr = this.suffix() ?? '';
+        return `${prefixStr}${this.formatValue(val)}${suffixStr}`;
+    }, ...(ngDevMode ? [{ debugName: "ariaValueText" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsInputNumber, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DsInputNumber, isStandalone: true, selector: "ds-input-number", inputs: { min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null }, precision: { classPropertyName: "precision", publicName: "precision", isSignal: true, isRequired: false, transformFunction: null }, controls: { classPropertyName: "controls", publicName: "controls", isSignal: true, isRequired: false, transformFunction: null }, controlsPosition: { classPropertyName: "controlsPosition", publicName: "controlsPosition", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => DsInputNumber),
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }], ngImport: i0, template: "<div [class]=\"containerClasses()\">\n  <!-- Bouton d\u00E9cr\u00E9mentation (position both) -->\n  @if (showControls() && controlsOnBoth()) {\n    <button\n      type=\"button\"\n      class=\"ds-input-number__btn ds-input-number__btn--decrement\"\n      [disabled]=\"!canDecrement()\"\n      (click)=\"decrement()\"\n      [attr.aria-label]=\"'Decrement value'\"\n      tabindex=\"-1\"\n    >\n      <fa-icon [icon]=\"faMinus\" />\n    </button>\n  }\n\n  <!-- Wrapper pour input + prefix/suffix -->\n  <div class=\"ds-input-number__input-wrapper\">\n    @if (prefix()) {\n      <span class=\"ds-input-number__prefix\">{{ prefix() }}</span>\n    }\n\n    <input\n      #inputElement\n      type=\"text\"\n      class=\"ds-input-number__input\"\n      [id]=\"id()\"\n      [name]=\"name()\"\n      [value]=\"displayValue()\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [readonly]=\"isReadonly()\"\n      [required]=\"required()\"\n      [attr.aria-label]=\"ariaLabel()\"\n      [attr.aria-valuemin]=\"ariaValueMin()\"\n      [attr.aria-valuemax]=\"ariaValueMax()\"\n      [attr.aria-valuenow]=\"ariaValueNow()\"\n      [attr.aria-valuetext]=\"ariaValueText()\"\n      role=\"spinbutton\"\n      (input)=\"onInputChange($event)\"\n      (blur)=\"onInputBlur()\"\n      (focus)=\"onInputFocus()\"\n      (keydown)=\"onKeyDown($event)\"\n    />\n\n    @if (suffix()) {\n      <span class=\"ds-input-number__suffix\">{{ suffix() }}</span>\n    }\n  </div>\n\n  <!-- Boutons position right -->\n  @if (showControls() && controlsOnRight()) {\n    <div class=\"ds-input-number__controls-right\">\n      <button\n        type=\"button\"\n        class=\"ds-input-number__btn ds-input-number__btn--increment-right\"\n        [disabled]=\"!canIncrement()\"\n        (click)=\"increment()\"\n        [attr.aria-label]=\"'Increment value'\"\n        tabindex=\"-1\"\n      >\n        <fa-icon [icon]=\"faPlus\" />\n      </button>\n      <button\n        type=\"button\"\n        class=\"ds-input-number__btn ds-input-number__btn--decrement-right\"\n        [disabled]=\"!canDecrement()\"\n        (click)=\"decrement()\"\n        [attr.aria-label]=\"'Decrement value'\"\n        tabindex=\"-1\"\n      >\n        <fa-icon [icon]=\"faMinus\" />\n      </button>\n    </div>\n  }\n\n  <!-- Bouton incr\u00E9mentation (position both) -->\n  @if (showControls() && controlsOnBoth()) {\n    <button\n      type=\"button\"\n      class=\"ds-input-number__btn ds-input-number__btn--increment\"\n      [disabled]=\"!canIncrement()\"\n      (click)=\"increment()\"\n      [attr.aria-label]=\"'Increment value'\"\n      tabindex=\"-1\"\n    >\n      <fa-icon [icon]=\"faPlus\" />\n    </button>\n  }\n</div>\n", styles: [".ds-input-number{display:inline-flex;align-items:stretch;position:relative;vertical-align:middle;width:100%;max-width:200px}.ds-input-number__input-wrapper{display:flex;align-items:center;flex:1;position:relative;background-color:var(--input-bg, var(--gray-50));border:1px solid var(--input-border-color, var(--gray-300));border-radius:var(--input-border-radius, var(--radius-2));transition:all .2s ease;overflow:hidden}.ds-input-number--focused .ds-input-number__input-wrapper{border-color:var(--input-focus-border, var(--color-primary));box-shadow:0 0 0 3px var(--input-focus-ring, rgba(37, 99, 235, .1))}.ds-input-number--disabled .ds-input-number__input-wrapper{background-color:var(--input-bg-disabled, var(--gray-100));border-color:var(--input-border-disabled, var(--gray-200));cursor:not-allowed}.ds-input-number--readonly .ds-input-number__input-wrapper{background-color:var(--input-bg-readonly, var(--gray-50));border-color:var(--input-border-color, var(--gray-300))}.ds-input-number__input{flex:1;border:none;outline:none;background:transparent;color:var(--input-text-color, var(--gray-900));font-family:inherit;text-align:center;padding:0 var(--space-2, .5rem)}.ds-input-number__input::placeholder{color:var(--input-placeholder, var(--gray-500))}.ds-input-number__input:disabled{cursor:not-allowed;color:var(--input-text-disabled, var(--gray-500))}.ds-input-number--readonly .ds-input-number__input{cursor:default}.ds-input-number__input::-webkit-outer-spin-button,.ds-input-number__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.ds-input-number__input[type=number]{-moz-appearance:textfield}.ds-input-number__prefix,.ds-input-number__suffix{display:inline-flex;align-items:center;color:var(--input-placeholder, var(--gray-500));font-size:inherit;padding:0 var(--space-2, .5rem);-webkit-user-select:none;user-select:none}.ds-input-number__prefix{padding-right:0}.ds-input-number__suffix{padding-left:0}.ds-input-number__btn{display:inline-flex;align-items:center;justify-content:center;border:none;outline:none;cursor:pointer;background-color:var(--input-number-btn-bg, var(--gray-100));color:var(--input-text-color, var(--gray-900));transition:all .15s ease;-webkit-user-select:none;user-select:none}.ds-input-number__btn:hover:not(:disabled){background-color:var(--input-number-btn-hover, var(--gray-200))}.ds-input-number__btn:active:not(:disabled){background-color:var(--input-number-btn-active, var(--gray-300))}.ds-input-number__btn:disabled{cursor:not-allowed;background-color:var(--input-number-btn-disabled, var(--gray-50));color:var(--input-text-disabled, var(--gray-400))}.ds-input-number__btn fa-icon{font-size:.875em}.ds-input-number--controls-both .ds-input-number__btn--decrement{border-right:1px solid var(--input-border-color, var(--gray-300));border-top-left-radius:var(--input-border-radius, var(--radius-2));border-bottom-left-radius:var(--input-border-radius, var(--radius-2))}.ds-input-number--controls-both .ds-input-number__btn--increment{border-left:1px solid var(--input-border-color, var(--gray-300));border-top-right-radius:var(--input-border-radius, var(--radius-2));border-bottom-right-radius:var(--input-border-radius, var(--radius-2))}.ds-input-number--controls-both .ds-input-number__input-wrapper{border-radius:0}.ds-input-number--controls-right .ds-input-number__controls-right{display:flex;flex-direction:column;border-left:1px solid var(--input-border-color, var(--gray-300))}.ds-input-number--controls-right .ds-input-number__btn--increment-right,.ds-input-number--controls-right .ds-input-number__btn--decrement-right{flex:1;width:var(--input-number-btn-size-md, 24px)}.ds-input-number--controls-right .ds-input-number__btn--increment-right{border-bottom:1px solid var(--input-border-color, var(--gray-300));border-top-right-radius:var(--input-border-radius, var(--radius-2))}.ds-input-number--controls-right .ds-input-number__btn--decrement-right{border-bottom-right-radius:var(--input-border-radius, var(--radius-2))}.ds-input-number--controls-right .ds-input-number__input-wrapper{border-top-right-radius:0;border-bottom-right-radius:0}.ds-input-number--sm{font-size:var(--font-size-sm, .875rem)}.ds-input-number--sm .ds-input-number__input-wrapper{height:var(--input-number-height-sm, 32px)}.ds-input-number--sm .ds-input-number__btn{width:var(--input-number-btn-size-sm, 28px);height:var(--input-number-btn-size-sm, 28px)}.ds-input-number--sm.ds-input-number--controls-right .ds-input-number__btn{width:var(--input-number-btn-size-sm, 20px);height:calc(var(--input-number-height-sm, 32px) / 2)}.ds-input-number--md{font-size:var(--font-size-base, 1rem)}.ds-input-number--md .ds-input-number__input-wrapper{height:var(--input-number-height-md, 40px)}.ds-input-number--md .ds-input-number__btn{width:var(--input-number-btn-size-md, 36px);height:var(--input-number-btn-size-md, 36px)}.ds-input-number--md.ds-input-number--controls-right .ds-input-number__btn{width:var(--input-number-btn-size-md, 24px);height:calc(var(--input-number-height-md, 40px) / 2)}.ds-input-number--lg{font-size:var(--font-size-lg, 1.125rem)}.ds-input-number--lg .ds-input-number__input-wrapper{height:var(--input-number-height-lg, 48px)}.ds-input-number--lg .ds-input-number__btn{width:var(--input-number-btn-size-lg, 44px);height:var(--input-number-btn-size-lg, 44px)}.ds-input-number--lg.ds-input-number--controls-right .ds-input-number__btn{width:var(--input-number-btn-size-lg, 28px);height:calc(var(--input-number-height-lg, 48px) / 2)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsInputNumber, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-input-number', imports: [CommonModule, FaIconComponent], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => DsInputNumber),
+                            multi: true,
+                        },
+                    ], template: "<div [class]=\"containerClasses()\">\n  <!-- Bouton d\u00E9cr\u00E9mentation (position both) -->\n  @if (showControls() && controlsOnBoth()) {\n    <button\n      type=\"button\"\n      class=\"ds-input-number__btn ds-input-number__btn--decrement\"\n      [disabled]=\"!canDecrement()\"\n      (click)=\"decrement()\"\n      [attr.aria-label]=\"'Decrement value'\"\n      tabindex=\"-1\"\n    >\n      <fa-icon [icon]=\"faMinus\" />\n    </button>\n  }\n\n  <!-- Wrapper pour input + prefix/suffix -->\n  <div class=\"ds-input-number__input-wrapper\">\n    @if (prefix()) {\n      <span class=\"ds-input-number__prefix\">{{ prefix() }}</span>\n    }\n\n    <input\n      #inputElement\n      type=\"text\"\n      class=\"ds-input-number__input\"\n      [id]=\"id()\"\n      [name]=\"name()\"\n      [value]=\"displayValue()\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [readonly]=\"isReadonly()\"\n      [required]=\"required()\"\n      [attr.aria-label]=\"ariaLabel()\"\n      [attr.aria-valuemin]=\"ariaValueMin()\"\n      [attr.aria-valuemax]=\"ariaValueMax()\"\n      [attr.aria-valuenow]=\"ariaValueNow()\"\n      [attr.aria-valuetext]=\"ariaValueText()\"\n      role=\"spinbutton\"\n      (input)=\"onInputChange($event)\"\n      (blur)=\"onInputBlur()\"\n      (focus)=\"onInputFocus()\"\n      (keydown)=\"onKeyDown($event)\"\n    />\n\n    @if (suffix()) {\n      <span class=\"ds-input-number__suffix\">{{ suffix() }}</span>\n    }\n  </div>\n\n  <!-- Boutons position right -->\n  @if (showControls() && controlsOnRight()) {\n    <div class=\"ds-input-number__controls-right\">\n      <button\n        type=\"button\"\n        class=\"ds-input-number__btn ds-input-number__btn--increment-right\"\n        [disabled]=\"!canIncrement()\"\n        (click)=\"increment()\"\n        [attr.aria-label]=\"'Increment value'\"\n        tabindex=\"-1\"\n      >\n        <fa-icon [icon]=\"faPlus\" />\n      </button>\n      <button\n        type=\"button\"\n        class=\"ds-input-number__btn ds-input-number__btn--decrement-right\"\n        [disabled]=\"!canDecrement()\"\n        (click)=\"decrement()\"\n        [attr.aria-label]=\"'Decrement value'\"\n        tabindex=\"-1\"\n      >\n        <fa-icon [icon]=\"faMinus\" />\n      </button>\n    </div>\n  }\n\n  <!-- Bouton incr\u00E9mentation (position both) -->\n  @if (showControls() && controlsOnBoth()) {\n    <button\n      type=\"button\"\n      class=\"ds-input-number__btn ds-input-number__btn--increment\"\n      [disabled]=\"!canIncrement()\"\n      (click)=\"increment()\"\n      [attr.aria-label]=\"'Increment value'\"\n      tabindex=\"-1\"\n    >\n      <fa-icon [icon]=\"faPlus\" />\n    </button>\n  }\n</div>\n", styles: [".ds-input-number{display:inline-flex;align-items:stretch;position:relative;vertical-align:middle;width:100%;max-width:200px}.ds-input-number__input-wrapper{display:flex;align-items:center;flex:1;position:relative;background-color:var(--input-bg, var(--gray-50));border:1px solid var(--input-border-color, var(--gray-300));border-radius:var(--input-border-radius, var(--radius-2));transition:all .2s ease;overflow:hidden}.ds-input-number--focused .ds-input-number__input-wrapper{border-color:var(--input-focus-border, var(--color-primary));box-shadow:0 0 0 3px var(--input-focus-ring, rgba(37, 99, 235, .1))}.ds-input-number--disabled .ds-input-number__input-wrapper{background-color:var(--input-bg-disabled, var(--gray-100));border-color:var(--input-border-disabled, var(--gray-200));cursor:not-allowed}.ds-input-number--readonly .ds-input-number__input-wrapper{background-color:var(--input-bg-readonly, var(--gray-50));border-color:var(--input-border-color, var(--gray-300))}.ds-input-number__input{flex:1;border:none;outline:none;background:transparent;color:var(--input-text-color, var(--gray-900));font-family:inherit;text-align:center;padding:0 var(--space-2, .5rem)}.ds-input-number__input::placeholder{color:var(--input-placeholder, var(--gray-500))}.ds-input-number__input:disabled{cursor:not-allowed;color:var(--input-text-disabled, var(--gray-500))}.ds-input-number--readonly .ds-input-number__input{cursor:default}.ds-input-number__input::-webkit-outer-spin-button,.ds-input-number__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.ds-input-number__input[type=number]{-moz-appearance:textfield}.ds-input-number__prefix,.ds-input-number__suffix{display:inline-flex;align-items:center;color:var(--input-placeholder, var(--gray-500));font-size:inherit;padding:0 var(--space-2, .5rem);-webkit-user-select:none;user-select:none}.ds-input-number__prefix{padding-right:0}.ds-input-number__suffix{padding-left:0}.ds-input-number__btn{display:inline-flex;align-items:center;justify-content:center;border:none;outline:none;cursor:pointer;background-color:var(--input-number-btn-bg, var(--gray-100));color:var(--input-text-color, var(--gray-900));transition:all .15s ease;-webkit-user-select:none;user-select:none}.ds-input-number__btn:hover:not(:disabled){background-color:var(--input-number-btn-hover, var(--gray-200))}.ds-input-number__btn:active:not(:disabled){background-color:var(--input-number-btn-active, var(--gray-300))}.ds-input-number__btn:disabled{cursor:not-allowed;background-color:var(--input-number-btn-disabled, var(--gray-50));color:var(--input-text-disabled, var(--gray-400))}.ds-input-number__btn fa-icon{font-size:.875em}.ds-input-number--controls-both .ds-input-number__btn--decrement{border-right:1px solid var(--input-border-color, var(--gray-300));border-top-left-radius:var(--input-border-radius, var(--radius-2));border-bottom-left-radius:var(--input-border-radius, var(--radius-2))}.ds-input-number--controls-both .ds-input-number__btn--increment{border-left:1px solid var(--input-border-color, var(--gray-300));border-top-right-radius:var(--input-border-radius, var(--radius-2));border-bottom-right-radius:var(--input-border-radius, var(--radius-2))}.ds-input-number--controls-both .ds-input-number__input-wrapper{border-radius:0}.ds-input-number--controls-right .ds-input-number__controls-right{display:flex;flex-direction:column;border-left:1px solid var(--input-border-color, var(--gray-300))}.ds-input-number--controls-right .ds-input-number__btn--increment-right,.ds-input-number--controls-right .ds-input-number__btn--decrement-right{flex:1;width:var(--input-number-btn-size-md, 24px)}.ds-input-number--controls-right .ds-input-number__btn--increment-right{border-bottom:1px solid var(--input-border-color, var(--gray-300));border-top-right-radius:var(--input-border-radius, var(--radius-2))}.ds-input-number--controls-right .ds-input-number__btn--decrement-right{border-bottom-right-radius:var(--input-border-radius, var(--radius-2))}.ds-input-number--controls-right .ds-input-number__input-wrapper{border-top-right-radius:0;border-bottom-right-radius:0}.ds-input-number--sm{font-size:var(--font-size-sm, .875rem)}.ds-input-number--sm .ds-input-number__input-wrapper{height:var(--input-number-height-sm, 32px)}.ds-input-number--sm .ds-input-number__btn{width:var(--input-number-btn-size-sm, 28px);height:var(--input-number-btn-size-sm, 28px)}.ds-input-number--sm.ds-input-number--controls-right .ds-input-number__btn{width:var(--input-number-btn-size-sm, 20px);height:calc(var(--input-number-height-sm, 32px) / 2)}.ds-input-number--md{font-size:var(--font-size-base, 1rem)}.ds-input-number--md .ds-input-number__input-wrapper{height:var(--input-number-height-md, 40px)}.ds-input-number--md .ds-input-number__btn{width:var(--input-number-btn-size-md, 36px);height:var(--input-number-btn-size-md, 36px)}.ds-input-number--md.ds-input-number--controls-right .ds-input-number__btn{width:var(--input-number-btn-size-md, 24px);height:calc(var(--input-number-height-md, 40px) / 2)}.ds-input-number--lg{font-size:var(--font-size-lg, 1.125rem)}.ds-input-number--lg .ds-input-number__input-wrapper{height:var(--input-number-height-lg, 48px)}.ds-input-number--lg .ds-input-number__btn{width:var(--input-number-btn-size-lg, 44px);height:var(--input-number-btn-size-lg, 44px)}.ds-input-number--lg.ds-input-number--controls-right .ds-input-number__btn{width:var(--input-number-btn-size-lg, 28px);height:calc(var(--input-number-height-lg, 48px) / 2)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }], precision: [{ type: i0.Input, args: [{ isSignal: true, alias: "precision", required: false }] }], controls: [{ type: i0.Input, args: [{ isSignal: true, alias: "controls", required: false }] }], controlsPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlsPosition", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], inputElement: [{
+                type: ViewChild,
+                args: ['inputElement', { static: false }]
+            }] } });
+
+/**
+ * DS Segmented Control
+ *
+ * Composant groupe de boutons mutuellement exclusifs visuellement connectés.
+ * Alternative stylisée aux boutons radio pour basculer entre vues, modes ou options.
+ *
+ * @example
+ * // Formulaire réactif
+ * <ds-segmented-control
+ *   formControlName="view"
+ *   [options]="viewOptions"
+ *   size="md"
+ *   fullWidth
+ * />
+ *
+ * @example
+ * // Template-driven
+ * <ds-segmented-control
+ *   [(ngModel)]="selectedView"
+ *   [options]="[
+ *     { value: 'list', label: 'Liste', icon: 'fas-list' },
+ *     { value: 'grid', label: 'Grille', icon: 'fas-grid' },
+ *     { value: 'map', label: 'Carte', icon: 'fas-map' }
+ *   ]"
+ *   color="neutral"
+ * />
+ */
+class DsSegmentedControl {
+    /**
+     * Liste des options du segmented control
+     */
+    options = input.required(...(ngDevMode ? [{ debugName: "options" }] : []));
+    /**
+     * Taille du segmented control (sm, md, lg)
+     */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    /**
+     * État désactivé global
+     */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    /**
+     * Prend toute la largeur du conteneur
+     */
+    fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : []));
+    /**
+     * Orientation (horizontal, vertical)
+     */
+    orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : []));
+    /**
+     * Couleur du segment actif (primary, neutral)
+     */
+    color = input('primary', ...(ngDevMode ? [{ debugName: "color" }] : []));
+    // Internal state
+    disabledState = signal(false, ...(ngDevMode ? [{ debugName: "disabledState" }] : []));
+    internalValue = signal(null, ...(ngDevMode ? [{ debugName: "internalValue" }] : []));
+    // Computed properties
+    isDisabled = computed(() => this.disabled() || this.disabledState(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
+    containerClasses = computed(() => ({
+        'ds-segmented-control': true,
+        [`ds-segmented-control--${this.size()}`]: true,
+        [`ds-segmented-control--${this.orientation()}`]: true,
+        [`ds-segmented-control--${this.color()}`]: true,
+        'ds-segmented-control--full-width': this.fullWidth(),
+        'ds-segmented-control--disabled': this.isDisabled(),
+    }), ...(ngDevMode ? [{ debugName: "containerClasses" }] : []));
+    activeIndex = computed(() => {
+        const value = this.internalValue();
+        if (!value)
+            return -1;
+        return this.options().findIndex((opt) => opt.value === value);
+    }, ...(ngDevMode ? [{ debugName: "activeIndex" }] : []));
+    /**
+     * Vérifie si une option est sélectionnée
+     */
+    isOptionSelected(option) {
+        return this.internalValue() === option.value;
+    }
+    /**
+     * Vérifie si une option est désactivée
+     */
+    isOptionDisabled(option) {
+        return this.isDisabled() || !!option.disabled;
+    }
+    /**
+     * Classes CSS pour un segment
+     */
+    getSegmentClasses(option) {
+        return {
+            'ds-segmented-control__segment': true,
+            'ds-segmented-control__segment--active': this.isOptionSelected(option),
+            'ds-segmented-control__segment--disabled': this.isOptionDisabled(option),
+        };
+    }
+    // ControlValueAccessor implementation
+    onChange = () => { };
+    onTouched = () => { };
+    writeValue(value) {
+        this.internalValue.set(value);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabledState.set(isDisabled);
+    }
+    // Event handlers
+    onSegmentClick(option) {
+        if (this.isOptionDisabled(option)) {
+            return;
+        }
+        this.internalValue.set(option.value);
+        this.onChange(option.value);
+        this.onTouched();
+    }
+    onKeydown(event) {
+        const target = event.target;
+        if (target.getAttribute('role') !== 'radio')
+            return;
+        const currentIndex = this.activeIndex();
+        const optionsArray = this.options();
+        const isHorizontal = this.orientation() === 'horizontal';
+        let nextIndex = currentIndex;
+        switch (event.key) {
+            case 'ArrowLeft':
+                if (!isHorizontal)
+                    return;
+                event.preventDefault();
+                nextIndex = this.findPreviousEnabledOption(currentIndex);
+                break;
+            case 'ArrowRight':
+                if (!isHorizontal)
+                    return;
+                event.preventDefault();
+                nextIndex = this.findNextEnabledOption(currentIndex);
+                break;
+            case 'ArrowUp':
+                if (isHorizontal)
+                    return;
+                event.preventDefault();
+                nextIndex = this.findPreviousEnabledOption(currentIndex);
+                break;
+            case 'ArrowDown':
+                if (isHorizontal)
+                    return;
+                event.preventDefault();
+                nextIndex = this.findNextEnabledOption(currentIndex);
+                break;
+            case 'Home':
+                event.preventDefault();
+                nextIndex = this.findNextEnabledOption(-1);
+                break;
+            case 'End':
+                event.preventDefault();
+                nextIndex = this.findPreviousEnabledOption(optionsArray.length);
+                break;
+            default:
+                return;
+        }
+        if (nextIndex !== currentIndex && nextIndex !== -1) {
+            this.onSegmentClick(optionsArray[nextIndex]);
+            this.focusSegment(nextIndex);
+        }
+    }
+    findNextEnabledOption(startIndex) {
+        const optionsArray = this.options();
+        for (let i = startIndex + 1; i < optionsArray.length; i++) {
+            if (!optionsArray[i].disabled)
+                return i;
+        }
+        return startIndex === -1 ? 0 : startIndex;
+    }
+    findPreviousEnabledOption(startIndex) {
+        const optionsArray = this.options();
+        for (let i = startIndex - 1; i >= 0; i--) {
+            if (!optionsArray[i].disabled)
+                return i;
+        }
+        return startIndex === optionsArray.length ? optionsArray.length - 1 : startIndex;
+    }
+    focusSegment(index) {
+        setTimeout(() => {
+            const segment = document.querySelector(`.ds-segmented-control__segment[data-index="${index}"]`);
+            segment?.focus();
+        }, 0);
+    }
+    // Track function for @for
+    trackByValue(_index, option) {
+        return option.value;
+    }
+    /**
+     * Parse l'icône depuis le format string vers le format FontAwesome
+     * @param iconName - Nom de l'icône (ex: 'fas-list', 'list', 'fa-solid fa-list')
+     * @returns Tuple [prefix, iconName] pour FontAwesome
+     */
+    parseIcon(iconName) {
+        // Format: 'fas-list' ou 'far-check'
+        if (iconName.includes('-')) {
+            const parts = iconName.split('-');
+            if (parts[0] === 'fas' || parts[0] === 'far' || parts[0] === 'fab') {
+                return [parts[0], parts.slice(1).join('-')];
+            }
+        }
+        // Par défaut, utiliser 'fas' comme préfixe
+        return ['fas', iconName];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsSegmentedControl, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DsSegmentedControl, isStandalone: true, selector: "ds-segmented-control", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keydown": "onKeydown($event)" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => DsSegmentedControl),
+                multi: true,
+            },
+        ], ngImport: i0, template: "<div\n  [ngClass]=\"containerClasses()\"\n  role=\"radiogroup\"\n  [attr.aria-disabled]=\"isDisabled()\"\n>\n  @for (option of options(); track trackByValue($index, option)) {\n    <button\n      type=\"button\"\n      role=\"radio\"\n      [ngClass]=\"getSegmentClasses(option)\"\n      [attr.data-index]=\"$index\"\n      [attr.aria-checked]=\"isOptionSelected(option)\"\n      [attr.aria-disabled]=\"isOptionDisabled(option)\"\n      [disabled]=\"isOptionDisabled(option)\"\n      [tabindex]=\"isOptionSelected(option) ? 0 : -1\"\n      (click)=\"onSegmentClick(option)\"\n    >\n      @if (option.icon) {\n        <fa-icon\n          class=\"ds-segmented-control__icon\"\n          [icon]=\"parseIcon(option.icon)\"\n        />\n      }\n      <span class=\"ds-segmented-control__label\">{{ option.label }}</span>\n    </button>\n  }\n</div>\n", styles: [".ds-segmented-control{display:inline-flex;background:var(--segmented-bg);border-radius:var(--segmented-border-radius);padding:var(--segmented-gap);gap:var(--segmented-gap);box-shadow:inset 0 0 0 1px var(--segmented-border-color)}.ds-segmented-control--horizontal{flex-direction:row}.ds-segmented-control--vertical{flex-direction:column}.ds-segmented-control--full-width{display:flex;width:100%}.ds-segmented-control--full-width .ds-segmented-control__segment{flex:1}.ds-segmented-control--disabled{opacity:.5;cursor:not-allowed}.ds-segmented-control--sm .ds-segmented-control__segment{height:var(--segmented-height-sm);padding:0 var(--segmented-padding-sm);font-size:var(--segmented-font-size-sm);border-radius:calc(var(--segmented-border-radius) - var(--segmented-gap))}.ds-segmented-control--sm .ds-segmented-control__icon{font-size:var(--segmented-icon-size-sm)}.ds-segmented-control--md .ds-segmented-control__segment{height:var(--segmented-height-md);padding:0 var(--segmented-padding-md);font-size:var(--segmented-font-size-md);border-radius:calc(var(--segmented-border-radius) - var(--segmented-gap))}.ds-segmented-control--md .ds-segmented-control__icon{font-size:var(--segmented-icon-size-md)}.ds-segmented-control--lg .ds-segmented-control__segment{height:var(--segmented-height-lg);padding:0 var(--segmented-padding-lg);font-size:var(--segmented-font-size-lg);border-radius:calc(var(--segmented-border-radius) - var(--segmented-gap))}.ds-segmented-control--lg .ds-segmented-control__icon{font-size:var(--segmented-icon-size-lg)}.ds-segmented-control__segment{display:inline-flex;align-items:center;justify-content:center;gap:var(--segmented-segment-gap);border:none;background:transparent;color:var(--segmented-text);font-weight:500;cursor:pointer;transition:all .2s ease;white-space:nowrap;-webkit-user-select:none;user-select:none}.ds-segmented-control__segment:hover:not(.ds-segmented-control__segment--disabled):not(.ds-segmented-control__segment--active){background:var(--segmented-hover-bg)}.ds-segmented-control__segment:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.ds-segmented-control__segment--active{background:var(--segmented-active-bg);color:var(--segmented-active-text);box-shadow:var(--segmented-active-shadow);font-weight:600}.ds-segmented-control__segment--disabled{cursor:not-allowed;opacity:.4}.ds-segmented-control__icon{display:inline-flex;flex-shrink:0}.ds-segmented-control__label{display:inline-flex}.ds-segmented-control--primary .ds-segmented-control__segment--active{background:var(--segmented-active-bg-primary);color:var(--segmented-active-text-primary)}.ds-segmented-control--neutral .ds-segmented-control__segment--active{background:var(--segmented-active-bg-neutral);color:var(--segmented-active-text-neutral)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i1$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsSegmentedControl, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-segmented-control', standalone: true, imports: [CommonModule, FontAwesomeModule], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => DsSegmentedControl),
+                            multi: true,
+                        },
+                    ], template: "<div\n  [ngClass]=\"containerClasses()\"\n  role=\"radiogroup\"\n  [attr.aria-disabled]=\"isDisabled()\"\n>\n  @for (option of options(); track trackByValue($index, option)) {\n    <button\n      type=\"button\"\n      role=\"radio\"\n      [ngClass]=\"getSegmentClasses(option)\"\n      [attr.data-index]=\"$index\"\n      [attr.aria-checked]=\"isOptionSelected(option)\"\n      [attr.aria-disabled]=\"isOptionDisabled(option)\"\n      [disabled]=\"isOptionDisabled(option)\"\n      [tabindex]=\"isOptionSelected(option) ? 0 : -1\"\n      (click)=\"onSegmentClick(option)\"\n    >\n      @if (option.icon) {\n        <fa-icon\n          class=\"ds-segmented-control__icon\"\n          [icon]=\"parseIcon(option.icon)\"\n        />\n      }\n      <span class=\"ds-segmented-control__label\">{{ option.label }}</span>\n    </button>\n  }\n</div>\n", styles: [".ds-segmented-control{display:inline-flex;background:var(--segmented-bg);border-radius:var(--segmented-border-radius);padding:var(--segmented-gap);gap:var(--segmented-gap);box-shadow:inset 0 0 0 1px var(--segmented-border-color)}.ds-segmented-control--horizontal{flex-direction:row}.ds-segmented-control--vertical{flex-direction:column}.ds-segmented-control--full-width{display:flex;width:100%}.ds-segmented-control--full-width .ds-segmented-control__segment{flex:1}.ds-segmented-control--disabled{opacity:.5;cursor:not-allowed}.ds-segmented-control--sm .ds-segmented-control__segment{height:var(--segmented-height-sm);padding:0 var(--segmented-padding-sm);font-size:var(--segmented-font-size-sm);border-radius:calc(var(--segmented-border-radius) - var(--segmented-gap))}.ds-segmented-control--sm .ds-segmented-control__icon{font-size:var(--segmented-icon-size-sm)}.ds-segmented-control--md .ds-segmented-control__segment{height:var(--segmented-height-md);padding:0 var(--segmented-padding-md);font-size:var(--segmented-font-size-md);border-radius:calc(var(--segmented-border-radius) - var(--segmented-gap))}.ds-segmented-control--md .ds-segmented-control__icon{font-size:var(--segmented-icon-size-md)}.ds-segmented-control--lg .ds-segmented-control__segment{height:var(--segmented-height-lg);padding:0 var(--segmented-padding-lg);font-size:var(--segmented-font-size-lg);border-radius:calc(var(--segmented-border-radius) - var(--segmented-gap))}.ds-segmented-control--lg .ds-segmented-control__icon{font-size:var(--segmented-icon-size-lg)}.ds-segmented-control__segment{display:inline-flex;align-items:center;justify-content:center;gap:var(--segmented-segment-gap);border:none;background:transparent;color:var(--segmented-text);font-weight:500;cursor:pointer;transition:all .2s ease;white-space:nowrap;-webkit-user-select:none;user-select:none}.ds-segmented-control__segment:hover:not(.ds-segmented-control__segment--disabled):not(.ds-segmented-control__segment--active){background:var(--segmented-hover-bg)}.ds-segmented-control__segment:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.ds-segmented-control__segment--active{background:var(--segmented-active-bg);color:var(--segmented-active-text);box-shadow:var(--segmented-active-shadow);font-weight:600}.ds-segmented-control__segment--disabled{cursor:not-allowed;opacity:.4}.ds-segmented-control__icon{display:inline-flex;flex-shrink:0}.ds-segmented-control__label{display:inline-flex}.ds-segmented-control--primary .ds-segmented-control__segment--active{background:var(--segmented-active-bg-primary);color:var(--segmented-active-text-primary)}.ds-segmented-control--neutral .ds-segmented-control__segment--active{background:var(--segmented-active-bg-neutral);color:var(--segmented-active-text-neutral)}\n"] }]
+        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], onKeydown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }] } });
+
+class DsColorPickerPanelComponent {
+    spectrumCanvas;
+    // Config (set by parent)
+    value = '';
+    showAlpha = false;
+    presetColors = [];
+    recentColors = [];
+    showRecentColors = false;
+    format = 'hex';
+    // Outputs
+    colorSelected = output();
+    closed = output();
+    // Icons
+    checkIcon = faCheck;
+    // State
+    hue = signal(0, ...(ngDevMode ? [{ debugName: "hue" }] : []));
+    saturation = signal(100, ...(ngDevMode ? [{ debugName: "saturation" }] : []));
+    lightness = signal(50, ...(ngDevMode ? [{ debugName: "lightness" }] : []));
+    alpha = signal(1, ...(ngDevMode ? [{ debugName: "alpha" }] : []));
+    cursorX = signal(null, ...(ngDevMode ? [{ debugName: "cursorX" }] : []));
+    cursorY = signal(null, ...(ngDevMode ? [{ debugName: "cursorY" }] : []));
+    isDragging = signal(false, ...(ngDevMode ? [{ debugName: "isDragging" }] : []));
+    // Computed
+    rgb = computed(() => this.hslToRGB(this.hue(), this.saturation(), this.lightness()), ...(ngDevMode ? [{ debugName: "rgb" }] : []));
+    hexValue = computed(() => {
+        const rgb = this.rgb();
+        const r = rgb.r.toString(16).padStart(2, '0');
+        const g = rgb.g.toString(16).padStart(2, '0');
+        const b = rgb.b.toString(16).padStart(2, '0');
+        return `#${r}${g}${b}`;
+    }, ...(ngDevMode ? [{ debugName: "hexValue" }] : []));
+    currentColor = computed(() => {
+        if (this.showAlpha && this.alpha() < 1) {
+            const rgb = this.rgb();
+            return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${this.alpha()})`;
+        }
+        return this.hexValue();
+    }, ...(ngDevMode ? [{ debugName: "currentColor" }] : []));
+    constructor() {
+        // Observer les changements de couleur
+        effect(() => {
+            const color = this.currentColor();
+            if (color !== this.value) {
+                this.colorSelected.emit(color);
+            }
+        });
+    }
+    ngAfterViewInit() {
+        this.initializeFromValue();
+        this.renderSpectrum();
+    }
+    initializeFromValue() {
+        if (!this.value) {
+            this.updateCursor();
+            return;
+        }
+        const rgb = this.parseColor(this.value);
+        if (rgb) {
+            const hsl = this.rgbToHSL(rgb.r, rgb.g, rgb.b);
+            this.hue.set(hsl.h);
+            this.saturation.set(hsl.s);
+            this.lightness.set(hsl.l);
+            if (rgb.a !== undefined) {
+                this.alpha.set(rgb.a);
+            }
+            this.updateCursor();
+        }
+    }
+    renderSpectrum() {
+        if (!this.spectrumCanvas)
+            return;
+        const canvas = this.spectrumCanvas.nativeElement;
+        const ctx = canvas.getContext('2d');
+        if (!ctx)
+            return;
+        const width = canvas.width;
+        const height = canvas.height;
+        // Gradient de saturation (horizontal)
+        const satGradient = ctx.createLinearGradient(0, 0, width, 0);
+        satGradient.addColorStop(0, 'white');
+        satGradient.addColorStop(1, `hsl(${this.hue()}, 100%, 50%)`);
+        ctx.fillStyle = satGradient;
+        ctx.fillRect(0, 0, width, height);
+        // Gradient de luminosité (vertical)
+        const lightGradient = ctx.createLinearGradient(0, 0, 0, height);
+        lightGradient.addColorStop(0, 'transparent');
+        lightGradient.addColorStop(1, 'black');
+        ctx.fillStyle = lightGradient;
+        ctx.fillRect(0, 0, width, height);
+    }
+    updateCursor() {
+        if (!this.spectrumCanvas)
+            return;
+        const canvas = this.spectrumCanvas.nativeElement;
+        const x = (this.saturation() / 100) * canvas.width;
+        const y = ((100 - this.lightness()) / 100) * canvas.height;
+        this.cursorX.set(x);
+        this.cursorY.set(y);
+    }
+    onHueChange(event) {
+        const target = event.target;
+        this.hue.set(parseInt(target.value, 10));
+        this.renderSpectrum();
+    }
+    onAlphaChange(event) {
+        const target = event.target;
+        this.alpha.set(parseInt(target.value, 10) / 100);
+    }
+    onSpectrumMouseDown(event) {
+        this.isDragging.set(true);
+        this.updateColorFromSpectrum(event);
+    }
+    onSpectrumMouseMove(event) {
+        if (this.isDragging()) {
+            this.updateColorFromSpectrum(event);
+        }
+    }
+    onSpectrumMouseUp() {
+        this.isDragging.set(false);
+    }
+    updateColorFromSpectrum(event) {
+        if (!this.spectrumCanvas)
+            return;
+        const canvas = this.spectrumCanvas.nativeElement;
+        const rect = canvas.getBoundingClientRect();
+        const x = Math.max(0, Math.min(event.clientX - rect.left, canvas.width));
+        const y = Math.max(0, Math.min(event.clientY - rect.top, canvas.height));
+        const saturation = (x / canvas.width) * 100;
+        const lightness = 100 - (y / canvas.height) * 100;
+        this.saturation.set(Math.round(saturation));
+        this.lightness.set(Math.round(lightness));
+        this.cursorX.set(x);
+        this.cursorY.set(y);
+    }
+    onHexInput(event) {
+        const target = event.target;
+        const hex = target.value;
+        if (!hex.startsWith('#')) {
+            target.value = '#' + hex;
+            return;
+        }
+        const rgb = this.parseColor(hex);
+        if (rgb) {
+            const hsl = this.rgbToHSL(rgb.r, rgb.g, rgb.b);
+            this.hue.set(hsl.h);
+            this.saturation.set(hsl.s);
+            this.lightness.set(hsl.l);
+            this.renderSpectrum();
+            this.updateCursor();
+        }
+    }
+    onRGBInput(channel, event) {
+        const target = event.target;
+        const value = parseInt(target.value, 10);
+        if (isNaN(value) || value < 0 || value > 255)
+            return;
+        const currentRGB = this.rgb();
+        const newRGB = { ...currentRGB, [channel]: value };
+        const hsl = this.rgbToHSL(newRGB.r, newRGB.g, newRGB.b);
+        this.hue.set(hsl.h);
+        this.saturation.set(hsl.s);
+        this.lightness.set(hsl.l);
+        this.renderSpectrum();
+        this.updateCursor();
+    }
+    onAlphaInputManual(event) {
+        const target = event.target;
+        const value = parseFloat(target.value);
+        if (isNaN(value) || value < 0 || value > 1)
+            return;
+        this.alpha.set(value);
+    }
+    selectPreset(color) {
+        const rgb = this.parseColor(color);
+        if (rgb) {
+            const hsl = this.rgbToHSL(rgb.r, rgb.g, rgb.b);
+            this.hue.set(hsl.h);
+            this.saturation.set(hsl.s);
+            this.lightness.set(hsl.l);
+            if (rgb.a !== undefined) {
+                this.alpha.set(rgb.a);
+            }
+            this.renderSpectrum();
+            this.updateCursor();
+        }
+    }
+    // === Conversions de couleurs ===
+    hslToRGB(h, s, l) {
+        h = h / 360;
+        s = s / 100;
+        l = l / 100;
+        let r, g, b;
+        if (s === 0) {
+            r = g = b = l;
+        }
+        else {
+            const hue2rgb = (p, q, t) => {
+                if (t < 0)
+                    t += 1;
+                if (t > 1)
+                    t -= 1;
+                if (t < 1 / 6)
+                    return p + (q - p) * 6 * t;
+                if (t < 1 / 2)
+                    return q;
+                if (t < 2 / 3)
+                    return p + (q - p) * (2 / 3 - t) * 6;
+                return p;
+            };
+            const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+            const p = 2 * l - q;
+            r = hue2rgb(p, q, h + 1 / 3);
+            g = hue2rgb(p, q, h);
+            b = hue2rgb(p, q, h - 1 / 3);
+        }
+        return {
+            r: Math.round(r * 255),
+            g: Math.round(g * 255),
+            b: Math.round(b * 255),
+        };
+    }
+    rgbToHSL(r, g, b) {
+        r /= 255;
+        g /= 255;
+        b /= 255;
+        const max = Math.max(r, g, b);
+        const min = Math.min(r, g, b);
+        let h = 0;
+        let s = 0;
+        const l = (max + min) / 2;
+        if (max !== min) {
+            const d = max - min;
+            s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+            switch (max) {
+                case r:
+                    h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+                    break;
+                case g:
+                    h = ((b - r) / d + 2) / 6;
+                    break;
+                case b:
+                    h = ((r - g) / d + 4) / 6;
+                    break;
+            }
+        }
+        return {
+            h: Math.round(h * 360),
+            s: Math.round(s * 100),
+            l: Math.round(l * 100),
+        };
+    }
+    parseColor(color) {
+        // Parse HEX
+        if (color.startsWith('#')) {
+            const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})?$/i.exec(color);
+            if (!result)
+                return null;
+            return {
+                r: parseInt(result[1], 16),
+                g: parseInt(result[2], 16),
+                b: parseInt(result[3], 16),
+                a: result[4] ? parseInt(result[4], 16) / 255 : undefined,
+            };
+        }
+        // Parse RGB/RGBA
+        if (color.startsWith('rgb')) {
+            const match = color.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/);
+            if (!match)
+                return null;
+            return {
+                r: parseInt(match[1], 10),
+                g: parseInt(match[2], 10),
+                b: parseInt(match[3], 10),
+                a: match[4] ? parseFloat(match[4]) : undefined,
+            };
+        }
+        return null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsColorPickerPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DsColorPickerPanelComponent, isStandalone: true, selector: "ds-color-picker-panel", outputs: { colorSelected: "colorSelected", closed: "closed" }, viewQueries: [{ propertyName: "spectrumCanvas", first: true, predicate: ["spectrumCanvas"], descendants: true }], ngImport: i0, template: `
+    <div class="ds-color-picker-panel" role="dialog" aria-label="Color picker">
+      <!-- Spectre de couleurs -->
+      <div class="ds-color-picker-panel__spectrum">
+        <canvas
+          #spectrumCanvas
+          class="ds-color-picker-panel__spectrum-canvas"
+          width="280"
+          height="180"
+          (mousedown)="onSpectrumMouseDown($event)"
+          (mousemove)="onSpectrumMouseMove($event)"
+          (mouseup)="onSpectrumMouseUp()"
+          (mouseleave)="onSpectrumMouseUp()">
+        </canvas>
+
+        <!-- Curseur de sélection -->
+        @if (cursorX() !== null && cursorY() !== null) {
+          <div
+            class="ds-color-picker-panel__cursor"
+            [style.left.px]="cursorX()"
+            [style.top.px]="cursorY()">
+          </div>
+        }
+      </div>
+
+      <!-- Slider de teinte -->
+      <div class="ds-color-picker-panel__hue-slider">
+        <input
+          type="range"
+          class="ds-color-picker-panel__slider"
+          min="0"
+          max="360"
+          step="1"
+          [value]="hue()"
+          (input)="onHueChange($event)"
+          aria-label="Hue" />
+      </div>
+
+      <!-- Slider alpha (optionnel) -->
+      @if (showAlpha) {
+        <div class="ds-color-picker-panel__alpha-slider">
+          <div class="ds-color-picker-panel__alpha-bg"></div>
+          <input
+            type="range"
+            class="ds-color-picker-panel__slider ds-color-picker-panel__slider--alpha"
+            min="0"
+            max="100"
+            step="1"
+            [value]="alpha() * 100"
+            (input)="onAlphaChange($event)"
+            aria-label="Alpha" />
+        </div>
+      }
+
+      <!-- Inputs manuels -->
+      <div class="ds-color-picker-panel__inputs">
+        @if (format === 'hex') {
+          <div class="ds-color-picker-panel__input-group">
+            <label class="ds-color-picker-panel__label">HEX</label>
+            <input
+              type="text"
+              class="ds-color-picker-panel__input"
+              [value]="hexValue()"
+              (input)="onHexInput($event)"
+              maxlength="7"
+              placeholder="#000000" />
+          </div>
+        }
+
+        @if (format === 'rgb') {
+          <div class="ds-color-picker-panel__input-group">
+            <label class="ds-color-picker-panel__label">R</label>
+            <input
+              type="number"
+              class="ds-color-picker-panel__input"
+              min="0"
+              max="255"
+              [value]="rgb().r"
+              (input)="onRGBInput('r', $event)" />
+          </div>
+          <div class="ds-color-picker-panel__input-group">
+            <label class="ds-color-picker-panel__label">G</label>
+            <input
+              type="number"
+              class="ds-color-picker-panel__input"
+              min="0"
+              max="255"
+              [value]="rgb().g"
+              (input)="onRGBInput('g', $event)" />
+          </div>
+          <div class="ds-color-picker-panel__input-group">
+            <label class="ds-color-picker-panel__label">B</label>
+            <input
+              type="number"
+              class="ds-color-picker-panel__input"
+              min="0"
+              max="255"
+              [value]="rgb().b"
+              (input)="onRGBInput('b', $event)" />
+          </div>
+          @if (showAlpha) {
+            <div class="ds-color-picker-panel__input-group">
+              <label class="ds-color-picker-panel__label">A</label>
+              <input
+                type="number"
+                class="ds-color-picker-panel__input"
+                min="0"
+                max="1"
+                step="0.01"
+                [value]="alpha()"
+                (input)="onAlphaInputManual($event)" />
+            </div>
+          }
+        }
+      </div>
+
+      <!-- Couleurs prédéfinies -->
+      @if (presetColors.length > 0) {
+        <div class="ds-color-picker-panel__presets">
+          <div class="ds-color-picker-panel__presets-label">Presets</div>
+          <div class="ds-color-picker-panel__presets-grid">
+            @for (color of presetColors; track color) {
+              <button
+                type="button"
+                class="ds-color-picker-panel__preset"
+                [style.background-color]="color"
+                [class.ds-color-picker-panel__preset--selected]="color === value"
+                (click)="selectPreset(color)"
+                [attr.aria-label]="'Select ' + color">
+                @if (color === value) {
+                  <fa-icon [icon]="checkIcon" class="ds-color-picker-panel__preset-check"></fa-icon>
+                }
+              </button>
+            }
+          </div>
+        </div>
+      }
+
+      <!-- Couleurs récentes -->
+      @if (showRecentColors && recentColors.length > 0) {
+        <div class="ds-color-picker-panel__recent">
+          <div class="ds-color-picker-panel__recent-label">Recent</div>
+          <div class="ds-color-picker-panel__recent-grid">
+            @for (color of recentColors; track color) {
+              <button
+                type="button"
+                class="ds-color-picker-panel__preset"
+                [style.background-color]="color"
+                [class.ds-color-picker-panel__preset--selected]="color === value"
+                (click)="selectPreset(color)"
+                [attr.aria-label]="'Select ' + color">
+                @if (color === value) {
+                  <fa-icon [icon]="checkIcon" class="ds-color-picker-panel__preset-check"></fa-icon>
+                }
+              </button>
+            }
+          </div>
+        </div>
+      }
+    </div>
+  `, isInline: true, styles: [".ds-color-picker-panel{position:relative;display:flex;flex-direction:column;gap:var(--space-3);width:300px;padding:var(--space-4);background:var(--colorpicker-panel-bg, var(--background-main));border:1px solid var(--colorpicker-panel-border, var(--border-default));border-radius:var(--colorpicker-panel-radius, var(--radius-2));box-shadow:var(--colorpicker-panel-shadow, var(--shadow-3))}.ds-color-picker-panel__spectrum{position:relative;width:100%;height:180px;border-radius:var(--radius-1);overflow:hidden;cursor:crosshair;border:1px solid var(--border-default)}.ds-color-picker-panel__spectrum-canvas{display:block;width:100%;height:100%}.ds-color-picker-panel__cursor{position:absolute;width:16px;height:16px;border:2px solid white;border-radius:50%;box-shadow:0 0 0 1px #0000004d,0 2px 4px #0003;transform:translate(-50%,-50%);pointer-events:none}.ds-color-picker-panel__hue-slider,.ds-color-picker-panel__alpha-slider{position:relative;width:100%;height:12px;border-radius:var(--radius-1);overflow:hidden}.ds-color-picker-panel__hue-slider{background:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.ds-color-picker-panel__alpha-slider .ds-color-picker-panel__alpha-bg{position:absolute;inset:0;background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:8px 8px;background-position:0 0,0 4px,4px -4px,-4px 0}.ds-color-picker-panel__slider{position:relative;width:100%;height:100%;-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer;z-index:1}.ds-color-picker-panel__slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border:2px solid white;border-radius:50%;background:transparent;box-shadow:0 0 0 1px #0000004d,0 2px 4px #0003;cursor:pointer}.ds-color-picker-panel__slider::-moz-range-thumb{width:16px;height:16px;border:2px solid white;border-radius:50%;background:transparent;box-shadow:0 0 0 1px #0000004d,0 2px 4px #0003;cursor:pointer}.ds-color-picker-panel__slider:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.ds-color-picker-panel__slider--alpha{background:linear-gradient(to right,transparent 0%,currentColor 100%)}.ds-color-picker-panel__inputs{display:flex;gap:var(--space-2)}.ds-color-picker-panel__input-group{display:flex;flex-direction:column;gap:var(--space-1);flex:1}.ds-color-picker-panel__label{font-size:var(--font-size-1);font-weight:600;color:var(--text-muted);text-transform:uppercase}.ds-color-picker-panel__input{width:100%;padding:var(--space-1) var(--space-2);background:var(--colorpicker-input-bg, var(--background-main));border:1px solid var(--colorpicker-input-border, var(--border-default));border-radius:var(--radius-1);color:var(--colorpicker-input-text, var(--text-default));font-size:var(--font-size-2);font-family:monospace;text-align:center;outline:none;transition:border-color var(--duration-fast, .15s) ease}.ds-color-picker-panel__input:focus{border-color:var(--color-primary)}.ds-color-picker-panel__input:hover:not(:focus){border-color:var(--border-strong)}.ds-color-picker-panel__input[type=number]{-moz-appearance:textfield}.ds-color-picker-panel__input[type=number]::-webkit-outer-spin-button,.ds-color-picker-panel__input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.ds-color-picker-panel__presets,.ds-color-picker-panel__recent{display:flex;flex-direction:column;gap:var(--space-2)}.ds-color-picker-panel__presets-label,.ds-color-picker-panel__recent-label{font-size:var(--font-size-2);font-weight:600;color:var(--text-muted)}.ds-color-picker-panel__presets-grid,.ds-color-picker-panel__recent-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:var(--space-2)}.ds-color-picker-panel__preset{position:relative;width:28px;height:28px;padding:0;background:currentColor;border:2px solid var(--colorpicker-preset-border, var(--border-default));border-radius:var(--radius-1);cursor:pointer;transition:transform var(--duration-fast, .15s) ease,border-color var(--duration-fast, .15s) ease;background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:8px 8px;background-position:0 0,0 4px,4px -4px,-4px 0}.ds-color-picker-panel__preset:after{content:\"\";position:absolute;inset:0;background-color:currentColor;border-radius:inherit}.ds-color-picker-panel__preset:hover:not(:disabled){transform:scale(1.1);border-color:var(--color-primary)}.ds-color-picker-panel__preset:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.ds-color-picker-panel__preset--selected{border-color:var(--color-primary);border-width:3px}.ds-color-picker-panel__preset-check{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5));font-size:var(--font-size-2);z-index:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i1$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsColorPickerPanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-color-picker-panel', standalone: true, imports: [CommonModule, FormsModule, FontAwesomeModule], template: `
+    <div class="ds-color-picker-panel" role="dialog" aria-label="Color picker">
+      <!-- Spectre de couleurs -->
+      <div class="ds-color-picker-panel__spectrum">
+        <canvas
+          #spectrumCanvas
+          class="ds-color-picker-panel__spectrum-canvas"
+          width="280"
+          height="180"
+          (mousedown)="onSpectrumMouseDown($event)"
+          (mousemove)="onSpectrumMouseMove($event)"
+          (mouseup)="onSpectrumMouseUp()"
+          (mouseleave)="onSpectrumMouseUp()">
+        </canvas>
+
+        <!-- Curseur de sélection -->
+        @if (cursorX() !== null && cursorY() !== null) {
+          <div
+            class="ds-color-picker-panel__cursor"
+            [style.left.px]="cursorX()"
+            [style.top.px]="cursorY()">
+          </div>
+        }
+      </div>
+
+      <!-- Slider de teinte -->
+      <div class="ds-color-picker-panel__hue-slider">
+        <input
+          type="range"
+          class="ds-color-picker-panel__slider"
+          min="0"
+          max="360"
+          step="1"
+          [value]="hue()"
+          (input)="onHueChange($event)"
+          aria-label="Hue" />
+      </div>
+
+      <!-- Slider alpha (optionnel) -->
+      @if (showAlpha) {
+        <div class="ds-color-picker-panel__alpha-slider">
+          <div class="ds-color-picker-panel__alpha-bg"></div>
+          <input
+            type="range"
+            class="ds-color-picker-panel__slider ds-color-picker-panel__slider--alpha"
+            min="0"
+            max="100"
+            step="1"
+            [value]="alpha() * 100"
+            (input)="onAlphaChange($event)"
+            aria-label="Alpha" />
+        </div>
+      }
+
+      <!-- Inputs manuels -->
+      <div class="ds-color-picker-panel__inputs">
+        @if (format === 'hex') {
+          <div class="ds-color-picker-panel__input-group">
+            <label class="ds-color-picker-panel__label">HEX</label>
+            <input
+              type="text"
+              class="ds-color-picker-panel__input"
+              [value]="hexValue()"
+              (input)="onHexInput($event)"
+              maxlength="7"
+              placeholder="#000000" />
+          </div>
+        }
+
+        @if (format === 'rgb') {
+          <div class="ds-color-picker-panel__input-group">
+            <label class="ds-color-picker-panel__label">R</label>
+            <input
+              type="number"
+              class="ds-color-picker-panel__input"
+              min="0"
+              max="255"
+              [value]="rgb().r"
+              (input)="onRGBInput('r', $event)" />
+          </div>
+          <div class="ds-color-picker-panel__input-group">
+            <label class="ds-color-picker-panel__label">G</label>
+            <input
+              type="number"
+              class="ds-color-picker-panel__input"
+              min="0"
+              max="255"
+              [value]="rgb().g"
+              (input)="onRGBInput('g', $event)" />
+          </div>
+          <div class="ds-color-picker-panel__input-group">
+            <label class="ds-color-picker-panel__label">B</label>
+            <input
+              type="number"
+              class="ds-color-picker-panel__input"
+              min="0"
+              max="255"
+              [value]="rgb().b"
+              (input)="onRGBInput('b', $event)" />
+          </div>
+          @if (showAlpha) {
+            <div class="ds-color-picker-panel__input-group">
+              <label class="ds-color-picker-panel__label">A</label>
+              <input
+                type="number"
+                class="ds-color-picker-panel__input"
+                min="0"
+                max="1"
+                step="0.01"
+                [value]="alpha()"
+                (input)="onAlphaInputManual($event)" />
+            </div>
+          }
+        }
+      </div>
+
+      <!-- Couleurs prédéfinies -->
+      @if (presetColors.length > 0) {
+        <div class="ds-color-picker-panel__presets">
+          <div class="ds-color-picker-panel__presets-label">Presets</div>
+          <div class="ds-color-picker-panel__presets-grid">
+            @for (color of presetColors; track color) {
+              <button
+                type="button"
+                class="ds-color-picker-panel__preset"
+                [style.background-color]="color"
+                [class.ds-color-picker-panel__preset--selected]="color === value"
+                (click)="selectPreset(color)"
+                [attr.aria-label]="'Select ' + color">
+                @if (color === value) {
+                  <fa-icon [icon]="checkIcon" class="ds-color-picker-panel__preset-check"></fa-icon>
+                }
+              </button>
+            }
+          </div>
+        </div>
+      }
+
+      <!-- Couleurs récentes -->
+      @if (showRecentColors && recentColors.length > 0) {
+        <div class="ds-color-picker-panel__recent">
+          <div class="ds-color-picker-panel__recent-label">Recent</div>
+          <div class="ds-color-picker-panel__recent-grid">
+            @for (color of recentColors; track color) {
+              <button
+                type="button"
+                class="ds-color-picker-panel__preset"
+                [style.background-color]="color"
+                [class.ds-color-picker-panel__preset--selected]="color === value"
+                (click)="selectPreset(color)"
+                [attr.aria-label]="'Select ' + color">
+                @if (color === value) {
+                  <fa-icon [icon]="checkIcon" class="ds-color-picker-panel__preset-check"></fa-icon>
+                }
+              </button>
+            }
+          </div>
+        </div>
+      }
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".ds-color-picker-panel{position:relative;display:flex;flex-direction:column;gap:var(--space-3);width:300px;padding:var(--space-4);background:var(--colorpicker-panel-bg, var(--background-main));border:1px solid var(--colorpicker-panel-border, var(--border-default));border-radius:var(--colorpicker-panel-radius, var(--radius-2));box-shadow:var(--colorpicker-panel-shadow, var(--shadow-3))}.ds-color-picker-panel__spectrum{position:relative;width:100%;height:180px;border-radius:var(--radius-1);overflow:hidden;cursor:crosshair;border:1px solid var(--border-default)}.ds-color-picker-panel__spectrum-canvas{display:block;width:100%;height:100%}.ds-color-picker-panel__cursor{position:absolute;width:16px;height:16px;border:2px solid white;border-radius:50%;box-shadow:0 0 0 1px #0000004d,0 2px 4px #0003;transform:translate(-50%,-50%);pointer-events:none}.ds-color-picker-panel__hue-slider,.ds-color-picker-panel__alpha-slider{position:relative;width:100%;height:12px;border-radius:var(--radius-1);overflow:hidden}.ds-color-picker-panel__hue-slider{background:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.ds-color-picker-panel__alpha-slider .ds-color-picker-panel__alpha-bg{position:absolute;inset:0;background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:8px 8px;background-position:0 0,0 4px,4px -4px,-4px 0}.ds-color-picker-panel__slider{position:relative;width:100%;height:100%;-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer;z-index:1}.ds-color-picker-panel__slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border:2px solid white;border-radius:50%;background:transparent;box-shadow:0 0 0 1px #0000004d,0 2px 4px #0003;cursor:pointer}.ds-color-picker-panel__slider::-moz-range-thumb{width:16px;height:16px;border:2px solid white;border-radius:50%;background:transparent;box-shadow:0 0 0 1px #0000004d,0 2px 4px #0003;cursor:pointer}.ds-color-picker-panel__slider:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.ds-color-picker-panel__slider--alpha{background:linear-gradient(to right,transparent 0%,currentColor 100%)}.ds-color-picker-panel__inputs{display:flex;gap:var(--space-2)}.ds-color-picker-panel__input-group{display:flex;flex-direction:column;gap:var(--space-1);flex:1}.ds-color-picker-panel__label{font-size:var(--font-size-1);font-weight:600;color:var(--text-muted);text-transform:uppercase}.ds-color-picker-panel__input{width:100%;padding:var(--space-1) var(--space-2);background:var(--colorpicker-input-bg, var(--background-main));border:1px solid var(--colorpicker-input-border, var(--border-default));border-radius:var(--radius-1);color:var(--colorpicker-input-text, var(--text-default));font-size:var(--font-size-2);font-family:monospace;text-align:center;outline:none;transition:border-color var(--duration-fast, .15s) ease}.ds-color-picker-panel__input:focus{border-color:var(--color-primary)}.ds-color-picker-panel__input:hover:not(:focus){border-color:var(--border-strong)}.ds-color-picker-panel__input[type=number]{-moz-appearance:textfield}.ds-color-picker-panel__input[type=number]::-webkit-outer-spin-button,.ds-color-picker-panel__input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.ds-color-picker-panel__presets,.ds-color-picker-panel__recent{display:flex;flex-direction:column;gap:var(--space-2)}.ds-color-picker-panel__presets-label,.ds-color-picker-panel__recent-label{font-size:var(--font-size-2);font-weight:600;color:var(--text-muted)}.ds-color-picker-panel__presets-grid,.ds-color-picker-panel__recent-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:var(--space-2)}.ds-color-picker-panel__preset{position:relative;width:28px;height:28px;padding:0;background:currentColor;border:2px solid var(--colorpicker-preset-border, var(--border-default));border-radius:var(--radius-1);cursor:pointer;transition:transform var(--duration-fast, .15s) ease,border-color var(--duration-fast, .15s) ease;background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:8px 8px;background-position:0 0,0 4px,4px -4px,-4px 0}.ds-color-picker-panel__preset:after{content:\"\";position:absolute;inset:0;background-color:currentColor;border-radius:inherit}.ds-color-picker-panel__preset:hover:not(:disabled){transform:scale(1.1);border-color:var(--color-primary)}.ds-color-picker-panel__preset:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.ds-color-picker-panel__preset--selected{border-color:var(--color-primary);border-width:3px}.ds-color-picker-panel__preset-check{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5));font-size:var(--font-size-2);z-index:1}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { spectrumCanvas: [{
+                type: ViewChild,
+                args: ['spectrumCanvas']
+            }], colorSelected: [{ type: i0.Output, args: ["colorSelected"] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
+
+/**
+ * DsColorPicker - Composant de sélection de couleur
+ *
+ * @description
+ * Sélecteur de couleur avec palette prédéfinie, spectre de couleurs,
+ * support RGB/HSL, alpha channel optionnel, et intégration formulaires.
+ *
+ * @example
+ * ```html
+ * <ds-color-picker
+ *   [value]="'#3b82f6'"
+ *   [showAlpha]="true"
+ *   (colorChange)="onColorChange($event)">
+ * </ds-color-picker>
+ * ```
+ */
+class DsColorPicker {
+    overlay;
+    elementRef;
+    // Inputs
+    value = input('', ...(ngDevMode ? [{ debugName: "value" }] : []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    showAlpha = input(false, ...(ngDevMode ? [{ debugName: "showAlpha" }] : []));
+    presetColors = input([], ...(ngDevMode ? [{ debugName: "presetColors" }] : []));
+    format = input('hex', ...(ngDevMode ? [{ debugName: "format" }] : []));
+    placeholder = input('Select color', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    allowClear = input(true, ...(ngDevMode ? [{ debugName: "allowClear" }] : []));
+    showRecentColors = input(true, ...(ngDevMode ? [{ debugName: "showRecentColors" }] : []));
+    maxRecentColors = input(8, ...(ngDevMode ? [{ debugName: "maxRecentColors" }] : []));
+    // Outputs
+    colorChange = output();
+    // Icons
+    pickerIcon = faEyeDropper;
+    clearIcon = faTimes;
+    checkIcon = faCheck;
+    // State
+    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+    internalValue = signal('', ...(ngDevMode ? [{ debugName: "internalValue" }] : []));
+    isFocused = signal(false, ...(ngDevMode ? [{ debugName: "isFocused" }] : []));
+    recentColors = signal([], ...(ngDevMode ? [{ debugName: "recentColors" }] : []));
+    // Overlay
+    overlayRef = null;
+    // Computed
+    containerClasses = computed(() => {
+        const classes = ['ds-color-picker'];
+        classes.push(`ds-color-picker--${this.size()}`);
+        if (this.disabled())
+            classes.push('ds-color-picker--disabled');
+        if (this.isFocused())
+            classes.push('ds-color-picker--focused');
+        if (this.isOpen())
+            classes.push('ds-color-picker--open');
+        return classes.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "containerClasses" }] : []));
+    displayValue = computed(() => {
+        const val = this.internalValue();
+        if (!val)
+            return '';
+        // Convertir selon le format demandé
+        const format = this.format();
+        if (format === 'hex') {
+            return this.toHex(val);
+        }
+        else if (format === 'rgb') {
+            return this.toRGB(val);
+        }
+        else if (format === 'hsl') {
+            return this.toHSL(val);
+        }
+        return val;
+    }, ...(ngDevMode ? [{ debugName: "displayValue" }] : []));
+    previewColor = computed(() => {
+        return this.internalValue() || 'transparent';
+    }, ...(ngDevMode ? [{ debugName: "previewColor" }] : []));
+    effectivePresets = computed(() => {
+        const custom = this.presetColors();
+        if (custom.length > 0)
+            return custom;
+        // Palette par défaut
+        return [
+            '#000000', '#ffffff', '#f87171', '#fb923c', '#fbbf24', '#facc15',
+            '#a3e635', '#4ade80', '#34d399', '#2dd4bf', '#22d3ee', '#38bdf8',
+            '#60a5fa', '#818cf8', '#a78bfa', '#c084fc', '#e879f9', '#f472b6',
+            '#fb7185', '#f43f5e', '#ef4444', '#dc2626', '#b91c1c', '#991b1b',
+        ];
+    }, ...(ngDevMode ? [{ debugName: "effectivePresets" }] : []));
+    // ControlValueAccessor
+    onChange = () => { };
+    onTouched = () => { };
+    constructor(overlay, elementRef) {
+        this.overlay = overlay;
+        this.elementRef = elementRef;
+        // Sync external value with internal
+        effect(() => {
+            const val = this.value();
+            if (val !== this.internalValue()) {
+                this.internalValue.set(val);
+            }
+        });
+        // Charger les couleurs récentes depuis localStorage
+        this.loadRecentColors();
+    }
+    writeValue(value) {
+        this.internalValue.set(value || '');
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        // Géré par input disabled
+    }
+    toggle() {
+        if (this.disabled())
+            return;
+        if (this.isOpen()) {
+            this.close();
+        }
+        else {
+            this.open();
+        }
+    }
+    open() {
+        if (this.disabled() || this.isOpen())
+            return;
+        this.isOpen.set(true);
+        this.createOverlay();
+    }
+    close() {
+        if (!this.isOpen())
+            return;
+        this.isOpen.set(false);
+        this.destroyOverlay();
+        this.onTouched();
+    }
+    onFocus() {
+        if (!this.disabled()) {
+            this.isFocused.set(true);
+        }
+    }
+    onBlur() {
+        this.isFocused.set(false);
+        if (!this.isOpen()) {
+            this.onTouched();
+        }
+    }
+    clear() {
+        if (this.disabled())
+            return;
+        this.updateValue('');
+    }
+    onColorSelected(color) {
+        this.updateValue(color);
+        this.addToRecentColors(color);
+    }
+    updateValue(value) {
+        this.internalValue.set(value);
+        this.onChange(value);
+        this.colorChange.emit(value);
+    }
+    createOverlay() {
+        if (this.overlayRef)
+            return;
+        const positionStrategy = this.overlay
+            .position()
+            .flexibleConnectedTo(this.elementRef.nativeElement.querySelector('.ds-color-picker__trigger'))
+            .withPositions([
+            {
+                originX: 'start',
+                originY: 'bottom',
+                overlayX: 'start',
+                overlayY: 'top',
+                offsetY: 8,
+            },
+            {
+                originX: 'start',
+                originY: 'top',
+                overlayX: 'start',
+                overlayY: 'bottom',
+                offsetY: -8,
+            },
+        ]);
+        this.overlayRef = this.overlay.create({
+            positionStrategy,
+            hasBackdrop: true,
+            backdropClass: 'cdk-overlay-transparent-backdrop',
+            scrollStrategy: this.overlay.scrollStrategies.reposition(),
+        });
+        const portal = new ComponentPortal(DsColorPickerPanelComponent);
+        const componentRef = this.overlayRef.attach(portal);
+        // Configuration du panel
+        componentRef.instance.value = this.internalValue();
+        componentRef.instance.showAlpha = this.showAlpha();
+        componentRef.instance.presetColors = this.effectivePresets();
+        componentRef.instance.recentColors = this.recentColors();
+        componentRef.instance.showRecentColors = this.showRecentColors();
+        componentRef.instance.format = this.format();
+        // Écouter les événements
+        componentRef.instance.colorSelected.subscribe((color) => {
+            this.onColorSelected(color);
+        });
+        componentRef.instance.closed.subscribe(() => {
+            this.close();
+        });
+        // Fermer au clic sur backdrop
+        this.overlayRef.backdropClick().subscribe(() => {
+            this.close();
+        });
+    }
+    destroyOverlay() {
+        if (this.overlayRef) {
+            this.overlayRef.dispose();
+            this.overlayRef = null;
+        }
+    }
+    addToRecentColors(color) {
+        if (!this.showRecentColors() || !color)
+            return;
+        const recent = this.recentColors();
+        const filtered = recent.filter(c => c !== color);
+        const updated = [color, ...filtered].slice(0, this.maxRecentColors());
+        this.recentColors.set(updated);
+        this.saveRecentColors(updated);
+    }
+    loadRecentColors() {
+        try {
+            const stored = localStorage.getItem('ds-color-picker-recent');
+            if (stored) {
+                const colors = JSON.parse(stored);
+                if (Array.isArray(colors)) {
+                    this.recentColors.set(colors.slice(0, this.maxRecentColors()));
+                }
+            }
+        }
+        catch (e) {
+            // Ignorer les erreurs de parsing
+        }
+    }
+    saveRecentColors(colors) {
+        try {
+            localStorage.setItem('ds-color-picker-recent', JSON.stringify(colors));
+        }
+        catch (e) {
+            // Ignorer les erreurs de stockage
+        }
+    }
+    // === Conversions de couleurs ===
+    toHex(color) {
+        if (color.startsWith('#'))
+            return color;
+        const rgb = this.parseRGB(color);
+        if (rgb) {
+            const r = rgb.r.toString(16).padStart(2, '0');
+            const g = rgb.g.toString(16).padStart(2, '0');
+            const b = rgb.b.toString(16).padStart(2, '0');
+            return `#${r}${g}${b}`;
+        }
+        return color;
+    }
+    toRGB(color) {
+        if (color.startsWith('rgb'))
+            return color;
+        const rgb = this.hexToRGB(color);
+        if (rgb) {
+            if (rgb.a !== undefined) {
+                return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${rgb.a})`;
+            }
+            return `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`;
+        }
+        return color;
+    }
+    toHSL(color) {
+        if (color.startsWith('hsl'))
+            return color;
+        const rgb = this.hexToRGB(color);
+        if (rgb) {
+            const hsl = this.rgbToHSL(rgb);
+            if (hsl.a !== undefined) {
+                return `hsla(${hsl.h}, ${hsl.s}%, ${hsl.l}%, ${hsl.a})`;
+            }
+            return `hsl(${hsl.h}, ${hsl.s}%, ${hsl.l}%)`;
+        }
+        return color;
+    }
+    hexToRGB(hex) {
+        const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})?$/i.exec(hex);
+        if (!result)
+            return null;
+        return {
+            r: parseInt(result[1], 16),
+            g: parseInt(result[2], 16),
+            b: parseInt(result[3], 16),
+            a: result[4] ? parseInt(result[4], 16) / 255 : undefined,
+        };
+    }
+    parseRGB(rgb) {
+        const match = rgb.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/);
+        if (!match)
+            return null;
+        return {
+            r: parseInt(match[1], 10),
+            g: parseInt(match[2], 10),
+            b: parseInt(match[3], 10),
+            a: match[4] ? parseFloat(match[4]) : undefined,
+        };
+    }
+    rgbToHSL(rgb) {
+        const r = rgb.r / 255;
+        const g = rgb.g / 255;
+        const b = rgb.b / 255;
+        const max = Math.max(r, g, b);
+        const min = Math.min(r, g, b);
+        let h = 0;
+        let s = 0;
+        const l = (max + min) / 2;
+        if (max !== min) {
+            const d = max - min;
+            s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+            switch (max) {
+                case r:
+                    h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+                    break;
+                case g:
+                    h = ((b - r) / d + 2) / 6;
+                    break;
+                case b:
+                    h = ((r - g) / d + 4) / 6;
+                    break;
+            }
+        }
+        return {
+            h: Math.round(h * 360),
+            s: Math.round(s * 100),
+            l: Math.round(l * 100),
+            a: rgb.a,
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsColorPicker, deps: [{ token: i1$3.Overlay }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DsColorPicker, isStandalone: true, selector: "ds-color-picker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, showAlpha: { classPropertyName: "showAlpha", publicName: "showAlpha", isSignal: true, isRequired: false, transformFunction: null }, presetColors: { classPropertyName: "presetColors", publicName: "presetColors", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, allowClear: { classPropertyName: "allowClear", publicName: "allowClear", isSignal: true, isRequired: false, transformFunction: null }, showRecentColors: { classPropertyName: "showRecentColors", publicName: "showRecentColors", isSignal: true, isRequired: false, transformFunction: null }, maxRecentColors: { classPropertyName: "maxRecentColors", publicName: "maxRecentColors", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { colorChange: "colorChange" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => DsColorPicker),
+                multi: true,
+            },
+        ], ngImport: i0, template: "<div [class]=\"containerClasses()\">\n  <div class=\"ds-color-picker__trigger\" (click)=\"toggle()\">\n    <!-- Preview de la couleur -->\n    <div\n      class=\"ds-color-picker__preview\"\n      [style.background-color]=\"previewColor()\"\n      [attr.aria-label]=\"'Color: ' + displayValue()\">\n    </div>\n\n    <!-- Input texte -->\n    <input\n      type=\"text\"\n      class=\"ds-color-picker__input\"\n      [value]=\"displayValue()\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"disabled()\"\n      readonly\n      (focus)=\"onFocus()\"\n      (blur)=\"onBlur()\"\n      [attr.aria-label]=\"placeholder()\" />\n\n    <!-- Actions -->\n    <div class=\"ds-color-picker__actions\">\n      @if (allowClear() && internalValue()) {\n        <button\n          type=\"button\"\n          class=\"ds-color-picker__action ds-color-picker__action--clear\"\n          [disabled]=\"disabled()\"\n          (click)=\"clear(); $event.stopPropagation()\"\n          [attr.aria-label]=\"'Clear color'\">\n          <fa-icon [icon]=\"clearIcon\" aria-hidden=\"true\"></fa-icon>\n        </button>\n      }\n\n      <button\n        type=\"button\"\n        class=\"ds-color-picker__action ds-color-picker__action--picker\"\n        [disabled]=\"disabled()\"\n        [attr.aria-label]=\"'Open color picker'\">\n        <fa-icon [icon]=\"pickerIcon\" aria-hidden=\"true\"></fa-icon>\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [".ds-color-picker{position:relative;display:inline-flex;width:100%}.ds-color-picker__trigger{position:relative;display:flex;align-items:center;gap:var(--colorpicker-gap, var(--space-2));width:100%;background:var(--colorpicker-bg, var(--background-main));border:1px solid var(--colorpicker-border, var(--border-default));border-radius:var(--colorpicker-radius, var(--radius-2));padding:var(--colorpicker-padding, var(--space-2));cursor:pointer;transition:border-color var(--duration-fast, .15s) ease,box-shadow var(--duration-fast, .15s) ease}.ds-color-picker__trigger:hover:not([disabled]){border-color:var(--colorpicker-border-hover, var(--border-strong))}.ds-color-picker__preview{flex-shrink:0;width:var(--colorpicker-preview-size, 28px);height:var(--colorpicker-preview-size, 28px);border:2px solid var(--colorpicker-preview-border, var(--border-default));border-radius:var(--radius-1);background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:8px 8px;background-position:0 0,0 4px,4px -4px,-4px 0;position:relative}.ds-color-picker__preview:after{content:\"\";position:absolute;inset:0;background-color:currentColor;border-radius:inherit}.ds-color-picker__input{flex:1;min-width:0;background:transparent;border:none;color:var(--colorpicker-text, var(--text-default));font-size:var(--colorpicker-font-size, var(--font-size-3));outline:none;cursor:pointer}.ds-color-picker__input::placeholder{color:var(--colorpicker-placeholder, var(--text-muted))}.ds-color-picker__input:disabled{cursor:not-allowed}.ds-color-picker__actions{display:flex;align-items:center;gap:var(--space-1)}.ds-color-picker__action{display:flex;align-items:center;justify-content:center;width:var(--colorpicker-action-size, 24px);height:var(--colorpicker-action-size, 24px);padding:0;background:transparent;border:none;border-radius:var(--radius-1);color:var(--colorpicker-icon, var(--text-muted));cursor:pointer;transition:background-color var(--duration-fast, .15s) ease,color var(--duration-fast, .15s) ease}.ds-color-picker__action:hover:not(:disabled){background:var(--colorpicker-action-hover-bg, var(--surface-hover));color:var(--text-default)}.ds-color-picker__action:focus-visible{outline:2px solid var(--color-primary);outline-offset:1px}.ds-color-picker__action:disabled{opacity:.5;cursor:not-allowed}.ds-color-picker__action--clear{color:var(--colorpicker-clear-icon, var(--text-muted))}.ds-color-picker__action--clear:hover:not(:disabled){color:var(--error)}.ds-color-picker--sm .ds-color-picker__trigger{padding:var(--colorpicker-padding-sm, var(--space-1) var(--space-2));height:var(--colorpicker-height-sm, 32px)}.ds-color-picker--sm .ds-color-picker__preview{width:var(--colorpicker-preview-size-sm, 20px);height:var(--colorpicker-preview-size-sm, 20px)}.ds-color-picker--sm .ds-color-picker__input{font-size:var(--colorpicker-font-size-sm, var(--font-size-2))}.ds-color-picker--sm .ds-color-picker__action{width:var(--colorpicker-action-size-sm, 20px);height:var(--colorpicker-action-size-sm, 20px);font-size:var(--font-size-2)}.ds-color-picker--md .ds-color-picker__trigger{padding:var(--colorpicker-padding-md, var(--space-2));height:var(--colorpicker-height-md, 40px)}.ds-color-picker--md .ds-color-picker__preview{width:var(--colorpicker-preview-size-md, 28px);height:var(--colorpicker-preview-size-md, 28px)}.ds-color-picker--md .ds-color-picker__input{font-size:var(--colorpicker-font-size-md, var(--font-size-3))}.ds-color-picker--md .ds-color-picker__action{width:var(--colorpicker-action-size-md, 24px);height:var(--colorpicker-action-size-md, 24px);font-size:var(--font-size-3)}.ds-color-picker--lg .ds-color-picker__trigger{padding:var(--colorpicker-padding-lg, var(--space-3));height:var(--colorpicker-height-lg, 48px)}.ds-color-picker--lg .ds-color-picker__preview{width:var(--colorpicker-preview-size-lg, 36px);height:var(--colorpicker-preview-size-lg, 36px)}.ds-color-picker--lg .ds-color-picker__input{font-size:var(--colorpicker-font-size-lg, var(--font-size-4))}.ds-color-picker--lg .ds-color-picker__action{width:var(--colorpicker-action-size-lg, 28px);height:var(--colorpicker-action-size-lg, 28px);font-size:var(--font-size-4)}.ds-color-picker--focused .ds-color-picker__trigger{border-color:var(--color-primary);box-shadow:0 0 0 3px var(--colorpicker-focus-shadow, rgba(59, 130, 246, .25))}.ds-color-picker--open .ds-color-picker__trigger{border-color:var(--color-primary)}.ds-color-picker--disabled{opacity:.6;pointer-events:none;cursor:not-allowed}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i1$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: OverlayModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsColorPicker, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-color-picker', standalone: true, imports: [CommonModule, FontAwesomeModule, FormsModule, OverlayModule], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => DsColorPicker),
+                            multi: true,
+                        },
+                    ], template: "<div [class]=\"containerClasses()\">\n  <div class=\"ds-color-picker__trigger\" (click)=\"toggle()\">\n    <!-- Preview de la couleur -->\n    <div\n      class=\"ds-color-picker__preview\"\n      [style.background-color]=\"previewColor()\"\n      [attr.aria-label]=\"'Color: ' + displayValue()\">\n    </div>\n\n    <!-- Input texte -->\n    <input\n      type=\"text\"\n      class=\"ds-color-picker__input\"\n      [value]=\"displayValue()\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"disabled()\"\n      readonly\n      (focus)=\"onFocus()\"\n      (blur)=\"onBlur()\"\n      [attr.aria-label]=\"placeholder()\" />\n\n    <!-- Actions -->\n    <div class=\"ds-color-picker__actions\">\n      @if (allowClear() && internalValue()) {\n        <button\n          type=\"button\"\n          class=\"ds-color-picker__action ds-color-picker__action--clear\"\n          [disabled]=\"disabled()\"\n          (click)=\"clear(); $event.stopPropagation()\"\n          [attr.aria-label]=\"'Clear color'\">\n          <fa-icon [icon]=\"clearIcon\" aria-hidden=\"true\"></fa-icon>\n        </button>\n      }\n\n      <button\n        type=\"button\"\n        class=\"ds-color-picker__action ds-color-picker__action--picker\"\n        [disabled]=\"disabled()\"\n        [attr.aria-label]=\"'Open color picker'\">\n        <fa-icon [icon]=\"pickerIcon\" aria-hidden=\"true\"></fa-icon>\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [".ds-color-picker{position:relative;display:inline-flex;width:100%}.ds-color-picker__trigger{position:relative;display:flex;align-items:center;gap:var(--colorpicker-gap, var(--space-2));width:100%;background:var(--colorpicker-bg, var(--background-main));border:1px solid var(--colorpicker-border, var(--border-default));border-radius:var(--colorpicker-radius, var(--radius-2));padding:var(--colorpicker-padding, var(--space-2));cursor:pointer;transition:border-color var(--duration-fast, .15s) ease,box-shadow var(--duration-fast, .15s) ease}.ds-color-picker__trigger:hover:not([disabled]){border-color:var(--colorpicker-border-hover, var(--border-strong))}.ds-color-picker__preview{flex-shrink:0;width:var(--colorpicker-preview-size, 28px);height:var(--colorpicker-preview-size, 28px);border:2px solid var(--colorpicker-preview-border, var(--border-default));border-radius:var(--radius-1);background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:8px 8px;background-position:0 0,0 4px,4px -4px,-4px 0;position:relative}.ds-color-picker__preview:after{content:\"\";position:absolute;inset:0;background-color:currentColor;border-radius:inherit}.ds-color-picker__input{flex:1;min-width:0;background:transparent;border:none;color:var(--colorpicker-text, var(--text-default));font-size:var(--colorpicker-font-size, var(--font-size-3));outline:none;cursor:pointer}.ds-color-picker__input::placeholder{color:var(--colorpicker-placeholder, var(--text-muted))}.ds-color-picker__input:disabled{cursor:not-allowed}.ds-color-picker__actions{display:flex;align-items:center;gap:var(--space-1)}.ds-color-picker__action{display:flex;align-items:center;justify-content:center;width:var(--colorpicker-action-size, 24px);height:var(--colorpicker-action-size, 24px);padding:0;background:transparent;border:none;border-radius:var(--radius-1);color:var(--colorpicker-icon, var(--text-muted));cursor:pointer;transition:background-color var(--duration-fast, .15s) ease,color var(--duration-fast, .15s) ease}.ds-color-picker__action:hover:not(:disabled){background:var(--colorpicker-action-hover-bg, var(--surface-hover));color:var(--text-default)}.ds-color-picker__action:focus-visible{outline:2px solid var(--color-primary);outline-offset:1px}.ds-color-picker__action:disabled{opacity:.5;cursor:not-allowed}.ds-color-picker__action--clear{color:var(--colorpicker-clear-icon, var(--text-muted))}.ds-color-picker__action--clear:hover:not(:disabled){color:var(--error)}.ds-color-picker--sm .ds-color-picker__trigger{padding:var(--colorpicker-padding-sm, var(--space-1) var(--space-2));height:var(--colorpicker-height-sm, 32px)}.ds-color-picker--sm .ds-color-picker__preview{width:var(--colorpicker-preview-size-sm, 20px);height:var(--colorpicker-preview-size-sm, 20px)}.ds-color-picker--sm .ds-color-picker__input{font-size:var(--colorpicker-font-size-sm, var(--font-size-2))}.ds-color-picker--sm .ds-color-picker__action{width:var(--colorpicker-action-size-sm, 20px);height:var(--colorpicker-action-size-sm, 20px);font-size:var(--font-size-2)}.ds-color-picker--md .ds-color-picker__trigger{padding:var(--colorpicker-padding-md, var(--space-2));height:var(--colorpicker-height-md, 40px)}.ds-color-picker--md .ds-color-picker__preview{width:var(--colorpicker-preview-size-md, 28px);height:var(--colorpicker-preview-size-md, 28px)}.ds-color-picker--md .ds-color-picker__input{font-size:var(--colorpicker-font-size-md, var(--font-size-3))}.ds-color-picker--md .ds-color-picker__action{width:var(--colorpicker-action-size-md, 24px);height:var(--colorpicker-action-size-md, 24px);font-size:var(--font-size-3)}.ds-color-picker--lg .ds-color-picker__trigger{padding:var(--colorpicker-padding-lg, var(--space-3));height:var(--colorpicker-height-lg, 48px)}.ds-color-picker--lg .ds-color-picker__preview{width:var(--colorpicker-preview-size-lg, 36px);height:var(--colorpicker-preview-size-lg, 36px)}.ds-color-picker--lg .ds-color-picker__input{font-size:var(--colorpicker-font-size-lg, var(--font-size-4))}.ds-color-picker--lg .ds-color-picker__action{width:var(--colorpicker-action-size-lg, 28px);height:var(--colorpicker-action-size-lg, 28px);font-size:var(--font-size-4)}.ds-color-picker--focused .ds-color-picker__trigger{border-color:var(--color-primary);box-shadow:0 0 0 3px var(--colorpicker-focus-shadow, rgba(59, 130, 246, .25))}.ds-color-picker--open .ds-color-picker__trigger{border-color:var(--color-primary)}.ds-color-picker--disabled{opacity:.6;pointer-events:none;cursor:not-allowed}\n"] }]
+        }], ctorParameters: () => [{ type: i1$3.Overlay }, { type: i0.ElementRef }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], showAlpha: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAlpha", required: false }] }], presetColors: [{ type: i0.Input, args: [{ isSignal: true, alias: "presetColors", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], allowClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowClear", required: false }] }], showRecentColors: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRecentColors", required: false }] }], maxRecentColors: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxRecentColors", required: false }] }], colorChange: [{ type: i0.Output, args: ["colorChange"] }] } });
+
 /*
  * Components barrel export
  */
@@ -10734,5 +13466,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-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 { AUTOCOMPLETE_POSITIONS, BUTTON_APPEARANCE_OPTIONS, BUTTON_SIZE_OPTIONS, BUTTON_VARIANT_OPTIONS, DROPDOWN_POSITIONS, DsAccordion, DsAlert, DsAvatar, DsBadge, DsBreadcrumb, DsButton, DsCalendar, DsCard, DsCarousel, DsCheckbox, DsChip, DsColorPicker, DsCombobox, DsContainer, DsDatePicker, DsDivider, DsDrawer, DsDropdown, DsEmpty, DsFileUpload, DsI18nService, DsInputField, DsInputNumber, DsInputTextarea, DsMenu, DsModalComponent, DsNotificationContainerComponent, DsNotificationItemComponent, DsNotificationService, DsPagination, DsPasswordStrength, DsPopover, DsPopoverComponent, DsProgressBar, DsRadioGroup, DsRating, DsSearchInput, DsSegmentedControl, DsSelect, DsSkeleton, DsSlider, DsStepper, DsTable, DsTabs, DsTimePicker, DsTimeline, DsToastComponent, DsToastContainerComponent, DsToastService, DsToggle, DsTooltip, DsTooltipComponent, DsTransfer, DsTree, IconRegistryService, POPOVER_POSITIONS, PrimitiveBadge, PrimitiveButton, PrimitiveCheckbox, PrimitiveInput, PrimitiveRadio, PrimitiveTextarea, PrimitiveToggle, TOOLTIP_POSITIONS, buildButtonArgTypes, buildButtonArgs, createSizeRender, createVariantRender };
 //# sourceMappingURL=kksdev-ds-angular.mjs.map