@kksdev/ds-angular 1.7.2 → 1.8.1

package/fesm2022/kksdev-ds-angular.mjs

@@ -1,7 +1,7 @@
 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, Input, ViewEncapsulation } from '@angular/core';
+import { input, Component, output, HostBinding, model, signal, computed, forwardRef, effect, ElementRef, ViewChildren, ViewChild, EventEmitter, inject, HostListener, ContentChild, Output, Directive, DestroyRef, Injectable, contentChildren, ChangeDetectionStrategy, viewChild, Input, ViewEncapsulation } from '@angular/core';
 import * as i1 from '@angular/common';
-import { CommonModule, DOCUMENT, NgClass } from '@angular/common';
+import { CommonModule, DOCUMENT, NgClass, NgTemplateOutlet } 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';
@@ -5215,6 +5215,82 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                 args: ['blur']
             }] } });
 
+let accordionItemIdCounter = 0;
+/**
+ * # DsAccordionItem
+ *
+ * Composant enfant pour le mode template-driven de DsAccordion.
+ * Permet d'injecter du contenu Angular riche (composants, HTML, etc.).
+ *
+ * ## Usage
+ *
+ * ```html
+ * <ds-accordion [multiple]="true">
+ *   <ds-accordion-item header="Section 1" [badge]="items.length">
+ *     <div>Contenu riche ici</div>
+ *     <my-component />
+ *   </ds-accordion-item>
+ * </ds-accordion>
+ * ```
+ *
+ * @component
+ */
+class DsAccordionItem {
+    /**
+     * Texte du header.
+     */
+    header = input('', ...(ngDevMode ? [{ debugName: "header" }] : []));
+    /**
+     * Badge optionnel affiché à côté du header (ex: compteur).
+     */
+    badge = input(undefined, ...(ngDevMode ? [{ debugName: "badge" }] : []));
+    /**
+     * ID unique de l'item. Auto-généré si non fourni.
+     */
+    id = input(`accordion-item-${++accordionItemIdCounter}`, ...(ngDevMode ? [{ debugName: "id" }] : []));
+    /**
+     * Désactiver cet item.
+     * @default false
+     */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    /**
+     * Template du contenu projeté.
+     * @internal
+     */
+    contentTemplate;
+    /**
+     * État d'expansion (contrôlé par le parent DsAccordion).
+     * @internal
+     */
+    _expanded = signal(false, ...(ngDevMode ? [{ debugName: "_expanded" }] : []));
+    /**
+     * Index dans la liste (injecté par le parent).
+     * @internal
+     */
+    _index = signal(0, ...(ngDevMode ? [{ debugName: "_index" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsAccordionItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.15", type: DsAccordionItem, isStandalone: true, selector: "ds-accordion-item", inputs: { header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "contentTemplate", first: true, predicate: ["contentTemplate"], descendants: true, static: true }], ngImport: i0, template: `
+    <ng-template #contentTemplate>
+      <ng-content />
+    </ng-template>
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsAccordionItem, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ds-accordion-item',
+                    standalone: true,
+                    template: `
+    <ng-template #contentTemplate>
+      <ng-content />
+    </ng-template>
+  `,
+                }]
+        }], propDecorators: { header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], contentTemplate: [{
+                type: ViewChild,
+                args: ['contentTemplate', { static: true }]
+            }] } });
+
 /**
  * # DsAccordion
  *
@@ -5242,9 +5318,11 @@ class DsAccordion {
     // Icône FontAwesome
     faChevronDown = faChevronDown;
     /**
-     * Liste des items de l'accordion.
+     * Liste des items de l'accordion (mode data-driven).
+     * Laisser vide pour utiliser le mode template-driven avec <ds-accordion-item>.
+     * @default []
      */
-    items = input.required(...(ngDevMode ? [{ debugName: "items" }] : []));
+    items = input([], ...(ngDevMode ? [{ debugName: "items" }] : []));
     /**
      * Permettre l'expansion de plusieurs items simultanément.
      * @default false
@@ -5274,6 +5352,19 @@ class DsAccordion {
      * Événement émis lors du changement d'état d'un item.
      */
     itemChange = output();
+    /**
+     * Items enfants en mode template-driven.
+     * @internal
+     */
+    accordionItems = contentChildren(DsAccordionItem, ...(ngDevMode ? [{ debugName: "accordionItems" }] : []));
+    /**
+     * Mode de fonctionnement (auto-détecté).
+     * - 'data' : si [items] est fourni et non vide
+     * - 'template' : si des <ds-accordion-item> enfants sont présents
+     */
+    mode = computed(() => {
+        return this.items().length > 0 ? 'data' : 'template';
+    }, ...(ngDevMode ? [{ debugName: "mode" }] : []));
     /**
      * État interne des items ouverts.
      */
@@ -5413,13 +5504,103 @@ class DsAccordion {
     getContentId(item) {
         return `accordion-content-${item.id}`;
     }
+    // ==========================================
+    // Mode template-driven
+    // ==========================================
+    /**
+     * Initialiser les index des items enfants.
+     */
+    ngAfterContentInit() {
+        this.updateTemplateItemsIndex();
+    }
+    /**
+     * Mettre à jour les index des items template.
+     */
+    updateTemplateItemsIndex() {
+        this.accordionItems().forEach((item, index) => {
+            item._index.set(index);
+        });
+    }
+    /**
+     * Toggle un item en mode template-driven.
+     */
+    toggleTemplateItem(item) {
+        if (this.disabled() || item.disabled())
+            return;
+        const itemId = item.id();
+        const isCurrentlyExpanded = this.isExpanded(itemId);
+        if (isCurrentlyExpanded) {
+            this._expandedIds.update((set) => {
+                const newSet = new Set(set);
+                newSet.delete(itemId);
+                return newSet;
+            });
+        }
+        else {
+            if (!this.multiple()) {
+                this._expandedIds.set(new Set([itemId]));
+            }
+            else {
+                this._expandedIds.update((set) => {
+                    const newSet = new Set(set);
+                    newSet.add(itemId);
+                    return newSet;
+                });
+            }
+        }
+        item._expanded.set(!isCurrentlyExpanded);
+        this.itemChange.emit({
+            itemId,
+            expanded: !isCurrentlyExpanded,
+            expandedItems: Array.from(this._expandedIds()),
+        });
+    }
+    /**
+     * Gestion du clavier en mode template-driven.
+     */
+    onTemplateKeydown(event, item, index) {
+        const items = this.accordionItems();
+        switch (event.key) {
+            case 'Enter':
+            case ' ':
+                event.preventDefault();
+                this.toggleTemplateItem(item);
+                break;
+            case 'ArrowDown':
+                event.preventDefault();
+                this.focusItem(Math.min(index + 1, items.length - 1));
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                this.focusItem(Math.max(index - 1, 0));
+                break;
+            case 'Home':
+                event.preventDefault();
+                this.focusItem(0);
+                break;
+            case 'End':
+                event.preventDefault();
+                this.focusItem(items.length - 1);
+                break;
+        }
+    }
+    /**
+     * Classes CSS pour un item template-driven.
+     */
+    getTemplateItemClasses(item) {
+        return [
+            'ds-accordion__item',
+            this.isExpanded(item.id()) ? 'ds-accordion__item--expanded' : '',
+            item.disabled() ? 'ds-accordion__item--disabled' : '',
+        ].filter(Boolean);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsAccordion, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DsAccordion, isStandalone: true, selector: "ds-accordion", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, expandedIds: { classPropertyName: "expandedIds", publicName: "expandedIds", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemChange: "itemChange" }, ngImport: i0, template: "<div [ngClass]=\"containerClasses()\">\n  @for (item of items(); track item.id; let i = $index) {\n    <div [ngClass]=\"getItemClasses(item)\">\n      <!-- Header -->\n      <button\n        type=\"button\"\n        class=\"ds-accordion__header\"\n        [id]=\"getHeaderId(item)\"\n        [attr.aria-expanded]=\"isExpanded(item.id)\"\n        [attr.aria-controls]=\"getContentId(item)\"\n        [disabled]=\"disabled() || item.disabled\"\n        (click)=\"toggleItem(item)\"\n        (keydown)=\"onKeydown($event, item, i)\">\n        <span class=\"ds-accordion__title\">{{ item.header }}</span>\n        <fa-icon\n          class=\"ds-accordion__icon\"\n          [icon]=\"faChevronDown\"\n          [class.ds-accordion__icon--rotated]=\"isExpanded(item.id)\"\n          aria-hidden=\"true\">\n        </fa-icon>\n      </button>\n\n      <!-- Contenu -->\n      <div\n        class=\"ds-accordion__content\"\n        [id]=\"getContentId(item)\"\n        role=\"region\"\n        [attr.aria-labelledby]=\"getHeaderId(item)\"\n        [attr.aria-hidden]=\"!isExpanded(item.id)\"\n        [class.ds-accordion__content--expanded]=\"isExpanded(item.id)\">\n        <div class=\"ds-accordion__body\">\n          {{ item.content }}\n        </div>\n      </div>\n    </div>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";.ds-accordion{font-family:var(--font-family-base)}.ds-accordion__item--disabled{opacity:.5;pointer-events:none}.ds-accordion__header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--accordion-header-padding-md, var(--space-4));background-color:var(--accordion-header-bg, var(--background-main));border:none;cursor:pointer;text-align:left;font-family:inherit;font-size:var(--accordion-header-font-size-md, var(--font-size-3));font-weight:var(--font-weight-medium);color:var(--accordion-header-text, var(--text-default));border-radius:0;transition:background-color var(--duration-fast) var(--easing-default),color var(--duration-fast) var(--easing-default)}.ds-accordion__header:hover:not(:disabled){background-color:var(--accordion-header-hover-bg, var(--surface-hover))}.ds-accordion__header:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--accordion-focus-color, var(--color-primary))}.ds-accordion__header:active:not(:disabled){transform:scale(.995)}.ds-accordion__header:disabled{cursor:not-allowed}.ds-accordion__title{flex:1}.ds-accordion__icon{flex-shrink:0;transition:transform var(--duration-normal) var(--easing-default);color:var(--accordion-icon-color, var(--text-muted))}.ds-accordion__icon--rotated{transform:rotate(180deg)}.ds-accordion__content{max-height:0;overflow:hidden;transition:max-height var(--duration-normal) var(--easing-default)}.ds-accordion__content--expanded{max-height:var(--accordion-content-max-height)}.ds-accordion__body{padding:var(--accordion-body-padding-md, var(--space-4));color:var(--accordion-body-text, var(--text-muted));font-size:var(--accordion-body-font-size-md, var(--font-size-2));line-height:var(--line-height-relaxed)}.ds-accordion--default .ds-accordion__item{border-bottom:var(--accordion-border-width) solid var(--accordion-border-color, var(--border-color))}.ds-accordion--default .ds-accordion__item:last-child{border-bottom:none}.ds-accordion--bordered{border:var(--accordion-border-width) solid var(--accordion-border-color, var(--border-color));border-radius:var(--accordion-radius, var(--radius-2));overflow:hidden}.ds-accordion--bordered .ds-accordion__item{border-bottom:var(--accordion-border-width) solid var(--accordion-border-color, var(--border-color))}.ds-accordion--bordered .ds-accordion__item:last-child{border-bottom:none}.ds-accordion--separated .ds-accordion__item{margin-bottom:var(--accordion-item-gap, var(--space-2));border:var(--accordion-border-width) solid var(--accordion-border-color, var(--border-color));border-radius:var(--accordion-radius, var(--radius-2));overflow:hidden}.ds-accordion--separated .ds-accordion__item:last-child{margin-bottom:0}.ds-accordion--separated .ds-accordion__item--expanded{border-color:var(--accordion-expanded-border-color, var(--color-primary))}.ds-accordion--sm .ds-accordion__header{padding:var(--accordion-header-padding-sm, var(--space-2) var(--space-3));font-size:var(--accordion-header-font-size-sm, var(--font-size-2))}.ds-accordion--sm .ds-accordion__body{padding:var(--accordion-body-padding-sm, var(--space-2) var(--space-3));font-size:var(--accordion-body-font-size-sm, var(--font-size-1))}.ds-accordion--lg .ds-accordion__header{padding:var(--accordion-header-padding-lg, var(--space-5) var(--space-6));font-size:var(--accordion-header-font-size-lg, var(--font-size-4))}.ds-accordion--lg .ds-accordion__body{padding:var(--accordion-body-padding-lg, var(--space-5) var(--space-6));font-size:var(--accordion-body-font-size-lg, var(--font-size-3))}.ds-accordion--disabled{opacity:.5;pointer-events:none}\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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DsAccordion, isStandalone: true, selector: "ds-accordion", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, expandedIds: { classPropertyName: "expandedIds", publicName: "expandedIds", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemChange: "itemChange" }, queries: [{ propertyName: "accordionItems", predicate: DsAccordionItem, isSignal: true }], ngImport: i0, template: "<div [ngClass]=\"containerClasses()\">\n  <!-- Mode data-driven (r\u00E9trocompatible) -->\n  @if (mode() === 'data') {\n    @for (item of items(); track item.id; let i = $index) {\n      <div [ngClass]=\"getItemClasses(item)\">\n        <!-- Header -->\n        <button\n          type=\"button\"\n          class=\"ds-accordion__header\"\n          [id]=\"getHeaderId(item)\"\n          [attr.aria-expanded]=\"isExpanded(item.id)\"\n          [attr.aria-controls]=\"getContentId(item)\"\n          [disabled]=\"disabled() || item.disabled\"\n          (click)=\"toggleItem(item)\"\n          (keydown)=\"onKeydown($event, item, i)\">\n          <span class=\"ds-accordion__title\">{{ item.header }}</span>\n          <fa-icon\n            class=\"ds-accordion__icon\"\n            [icon]=\"faChevronDown\"\n            [class.ds-accordion__icon--rotated]=\"isExpanded(item.id)\"\n            aria-hidden=\"true\">\n          </fa-icon>\n        </button>\n\n        <!-- Contenu -->\n        <div\n          class=\"ds-accordion__content\"\n          [id]=\"getContentId(item)\"\n          role=\"region\"\n          [attr.aria-labelledby]=\"getHeaderId(item)\"\n          [attr.aria-hidden]=\"!isExpanded(item.id)\"\n          [class.ds-accordion__content--expanded]=\"isExpanded(item.id)\">\n          <div class=\"ds-accordion__body\">\n            {{ item.content }}\n          </div>\n        </div>\n      </div>\n    }\n  }\n\n  <!-- Mode template-driven (contenu riche) -->\n  @if (mode() === 'template') {\n    @for (item of accordionItems(); track item.id(); let i = $index) {\n      <div [ngClass]=\"getTemplateItemClasses(item)\">\n        <!-- Header -->\n        <button\n          type=\"button\"\n          class=\"ds-accordion__header\"\n          [id]=\"'accordion-header-' + item.id()\"\n          [attr.aria-expanded]=\"isExpanded(item.id())\"\n          [attr.aria-controls]=\"'accordion-content-' + item.id()\"\n          [disabled]=\"disabled() || item.disabled()\"\n          (click)=\"toggleTemplateItem(item)\"\n          (keydown)=\"onTemplateKeydown($event, item, i)\">\n          <span class=\"ds-accordion__title\">{{ item.header() }}</span>\n          @if (item.badge() !== undefined) {\n            <ds-badge class=\"ds-accordion__badge\" size=\"sm\" type=\"neutral\">\n              {{ item.badge() }}\n            </ds-badge>\n          }\n          <fa-icon\n            class=\"ds-accordion__icon\"\n            [icon]=\"faChevronDown\"\n            [class.ds-accordion__icon--rotated]=\"isExpanded(item.id())\"\n            aria-hidden=\"true\">\n          </fa-icon>\n        </button>\n\n        <!-- Contenu -->\n        <div\n          class=\"ds-accordion__content\"\n          [id]=\"'accordion-content-' + item.id()\"\n          role=\"region\"\n          [attr.aria-labelledby]=\"'accordion-header-' + item.id()\"\n          [attr.aria-hidden]=\"!isExpanded(item.id())\"\n          [class.ds-accordion__content--expanded]=\"isExpanded(item.id())\">\n          <div class=\"ds-accordion__body\">\n            <ng-container *ngTemplateOutlet=\"item.contentTemplate\" />\n          </div>\n        </div>\n      </div>\n    }\n  }\n</div>\n", styles: ["@charset \"UTF-8\";.ds-accordion{font-family:var(--font-family-base)}.ds-accordion__item--disabled{opacity:.5;pointer-events:none}.ds-accordion__header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--accordion-header-padding-md, var(--space-4));background-color:var(--accordion-header-bg, var(--background-main));border:none;cursor:pointer;text-align:left;font-family:inherit;font-size:var(--accordion-header-font-size-md, var(--font-size-3));font-weight:var(--font-weight-medium);color:var(--accordion-header-text, var(--text-default));border-radius:0;transition:background-color var(--duration-fast) var(--easing-default),color var(--duration-fast) var(--easing-default)}.ds-accordion__header:hover:not(:disabled){background-color:var(--accordion-header-hover-bg, var(--surface-hover))}.ds-accordion__header:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--accordion-focus-color, var(--color-primary))}.ds-accordion__header:active:not(:disabled){transform:scale(.995)}.ds-accordion__header:disabled{cursor:not-allowed}.ds-accordion__title{flex:1}.ds-accordion__icon{flex-shrink:0;transition:transform var(--duration-normal) var(--easing-default);color:var(--accordion-icon-color, var(--text-muted))}.ds-accordion__icon--rotated{transform:rotate(180deg)}.ds-accordion__badge{margin-left:var(--space-2);margin-right:var(--space-2);flex-shrink:0}.ds-accordion__content{max-height:0;overflow:hidden;transition:max-height var(--duration-normal) var(--easing-default)}.ds-accordion__content--expanded{max-height:var(--accordion-content-max-height)}.ds-accordion__body{padding:var(--accordion-body-padding-md, var(--space-4));color:var(--accordion-body-text, var(--text-muted));font-size:var(--accordion-body-font-size-md, var(--font-size-2));line-height:var(--line-height-relaxed)}.ds-accordion--default .ds-accordion__item{border-bottom:var(--accordion-border-width) solid var(--accordion-border-color, var(--border-color))}.ds-accordion--default .ds-accordion__item:last-child{border-bottom:none}.ds-accordion--bordered{border:var(--accordion-border-width) solid var(--accordion-border-color, var(--border-color));border-radius:var(--accordion-radius, var(--radius-2));overflow:hidden}.ds-accordion--bordered .ds-accordion__item{border-bottom:var(--accordion-border-width) solid var(--accordion-border-color, var(--border-color))}.ds-accordion--bordered .ds-accordion__item:last-child{border-bottom:none}.ds-accordion--separated .ds-accordion__item{margin-bottom:var(--accordion-item-gap, var(--space-2));border:var(--accordion-border-width) solid var(--accordion-border-color, var(--border-color));border-radius:var(--accordion-radius, var(--radius-2));overflow:hidden}.ds-accordion--separated .ds-accordion__item:last-child{margin-bottom:0}.ds-accordion--separated .ds-accordion__item--expanded{border-color:var(--accordion-expanded-border-color, var(--color-primary))}.ds-accordion--sm .ds-accordion__header{padding:var(--accordion-header-padding-sm, var(--space-2) var(--space-3));font-size:var(--accordion-header-font-size-sm, var(--font-size-2))}.ds-accordion--sm .ds-accordion__body{padding:var(--accordion-body-padding-sm, var(--space-2) var(--space-3));font-size:var(--accordion-body-font-size-sm, var(--font-size-1))}.ds-accordion--lg .ds-accordion__header{padding:var(--accordion-header-padding-lg, var(--space-5) var(--space-6));font-size:var(--accordion-header-font-size-lg, var(--font-size-4))}.ds-accordion--lg .ds-accordion__body{padding:var(--accordion-body-padding-lg, var(--space-5) var(--space-6));font-size:var(--accordion-body-font-size-lg, var(--font-size-3))}.ds-accordion--disabled{opacity:.5;pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: "component", type: DsBadge, selector: "ds-badge", inputs: ["type", "size", "iconStart", "iconEnd", "variant", "shape", "color"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsAccordion, decorators: [{
             type: Component,
-            args: [{ selector: 'ds-accordion', imports: [CommonModule, FontAwesomeModule], template: "<div [ngClass]=\"containerClasses()\">\n  @for (item of items(); track item.id; let i = $index) {\n    <div [ngClass]=\"getItemClasses(item)\">\n      <!-- Header -->\n      <button\n        type=\"button\"\n        class=\"ds-accordion__header\"\n        [id]=\"getHeaderId(item)\"\n        [attr.aria-expanded]=\"isExpanded(item.id)\"\n        [attr.aria-controls]=\"getContentId(item)\"\n        [disabled]=\"disabled() || item.disabled\"\n        (click)=\"toggleItem(item)\"\n        (keydown)=\"onKeydown($event, item, i)\">\n        <span class=\"ds-accordion__title\">{{ item.header }}</span>\n        <fa-icon\n          class=\"ds-accordion__icon\"\n          [icon]=\"faChevronDown\"\n          [class.ds-accordion__icon--rotated]=\"isExpanded(item.id)\"\n          aria-hidden=\"true\">\n        </fa-icon>\n      </button>\n\n      <!-- Contenu -->\n      <div\n        class=\"ds-accordion__content\"\n        [id]=\"getContentId(item)\"\n        role=\"region\"\n        [attr.aria-labelledby]=\"getHeaderId(item)\"\n        [attr.aria-hidden]=\"!isExpanded(item.id)\"\n        [class.ds-accordion__content--expanded]=\"isExpanded(item.id)\">\n        <div class=\"ds-accordion__body\">\n          {{ item.content }}\n        </div>\n      </div>\n    </div>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";.ds-accordion{font-family:var(--font-family-base)}.ds-accordion__item--disabled{opacity:.5;pointer-events:none}.ds-accordion__header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--accordion-header-padding-md, var(--space-4));background-color:var(--accordion-header-bg, var(--background-main));border:none;cursor:pointer;text-align:left;font-family:inherit;font-size:var(--accordion-header-font-size-md, var(--font-size-3));font-weight:var(--font-weight-medium);color:var(--accordion-header-text, var(--text-default));border-radius:0;transition:background-color var(--duration-fast) var(--easing-default),color var(--duration-fast) var(--easing-default)}.ds-accordion__header:hover:not(:disabled){background-color:var(--accordion-header-hover-bg, var(--surface-hover))}.ds-accordion__header:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--accordion-focus-color, var(--color-primary))}.ds-accordion__header:active:not(:disabled){transform:scale(.995)}.ds-accordion__header:disabled{cursor:not-allowed}.ds-accordion__title{flex:1}.ds-accordion__icon{flex-shrink:0;transition:transform var(--duration-normal) var(--easing-default);color:var(--accordion-icon-color, var(--text-muted))}.ds-accordion__icon--rotated{transform:rotate(180deg)}.ds-accordion__content{max-height:0;overflow:hidden;transition:max-height var(--duration-normal) var(--easing-default)}.ds-accordion__content--expanded{max-height:var(--accordion-content-max-height)}.ds-accordion__body{padding:var(--accordion-body-padding-md, var(--space-4));color:var(--accordion-body-text, var(--text-muted));font-size:var(--accordion-body-font-size-md, var(--font-size-2));line-height:var(--line-height-relaxed)}.ds-accordion--default .ds-accordion__item{border-bottom:var(--accordion-border-width) solid var(--accordion-border-color, var(--border-color))}.ds-accordion--default .ds-accordion__item:last-child{border-bottom:none}.ds-accordion--bordered{border:var(--accordion-border-width) solid var(--accordion-border-color, var(--border-color));border-radius:var(--accordion-radius, var(--radius-2));overflow:hidden}.ds-accordion--bordered .ds-accordion__item{border-bottom:var(--accordion-border-width) solid var(--accordion-border-color, var(--border-color))}.ds-accordion--bordered .ds-accordion__item:last-child{border-bottom:none}.ds-accordion--separated .ds-accordion__item{margin-bottom:var(--accordion-item-gap, var(--space-2));border:var(--accordion-border-width) solid var(--accordion-border-color, var(--border-color));border-radius:var(--accordion-radius, var(--radius-2));overflow:hidden}.ds-accordion--separated .ds-accordion__item:last-child{margin-bottom:0}.ds-accordion--separated .ds-accordion__item--expanded{border-color:var(--accordion-expanded-border-color, var(--color-primary))}.ds-accordion--sm .ds-accordion__header{padding:var(--accordion-header-padding-sm, var(--space-2) var(--space-3));font-size:var(--accordion-header-font-size-sm, var(--font-size-2))}.ds-accordion--sm .ds-accordion__body{padding:var(--accordion-body-padding-sm, var(--space-2) var(--space-3));font-size:var(--accordion-body-font-size-sm, var(--font-size-1))}.ds-accordion--lg .ds-accordion__header{padding:var(--accordion-header-padding-lg, var(--space-5) var(--space-6));font-size:var(--accordion-header-font-size-lg, var(--font-size-4))}.ds-accordion--lg .ds-accordion__body{padding:var(--accordion-body-padding-lg, var(--space-5) var(--space-6));font-size:var(--accordion-body-font-size-lg, var(--font-size-3))}.ds-accordion--disabled{opacity:.5;pointer-events:none}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], expandedIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedIds", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], itemChange: [{ type: i0.Output, args: ["itemChange"] }] } });
+            args: [{ selector: 'ds-accordion', imports: [CommonModule, FontAwesomeModule, NgTemplateOutlet, DsBadge], template: "<div [ngClass]=\"containerClasses()\">\n  <!-- Mode data-driven (r\u00E9trocompatible) -->\n  @if (mode() === 'data') {\n    @for (item of items(); track item.id; let i = $index) {\n      <div [ngClass]=\"getItemClasses(item)\">\n        <!-- Header -->\n        <button\n          type=\"button\"\n          class=\"ds-accordion__header\"\n          [id]=\"getHeaderId(item)\"\n          [attr.aria-expanded]=\"isExpanded(item.id)\"\n          [attr.aria-controls]=\"getContentId(item)\"\n          [disabled]=\"disabled() || item.disabled\"\n          (click)=\"toggleItem(item)\"\n          (keydown)=\"onKeydown($event, item, i)\">\n          <span class=\"ds-accordion__title\">{{ item.header }}</span>\n          <fa-icon\n            class=\"ds-accordion__icon\"\n            [icon]=\"faChevronDown\"\n            [class.ds-accordion__icon--rotated]=\"isExpanded(item.id)\"\n            aria-hidden=\"true\">\n          </fa-icon>\n        </button>\n\n        <!-- Contenu -->\n        <div\n          class=\"ds-accordion__content\"\n          [id]=\"getContentId(item)\"\n          role=\"region\"\n          [attr.aria-labelledby]=\"getHeaderId(item)\"\n          [attr.aria-hidden]=\"!isExpanded(item.id)\"\n          [class.ds-accordion__content--expanded]=\"isExpanded(item.id)\">\n          <div class=\"ds-accordion__body\">\n            {{ item.content }}\n          </div>\n        </div>\n      </div>\n    }\n  }\n\n  <!-- Mode template-driven (contenu riche) -->\n  @if (mode() === 'template') {\n    @for (item of accordionItems(); track item.id(); let i = $index) {\n      <div [ngClass]=\"getTemplateItemClasses(item)\">\n        <!-- Header -->\n        <button\n          type=\"button\"\n          class=\"ds-accordion__header\"\n          [id]=\"'accordion-header-' + item.id()\"\n          [attr.aria-expanded]=\"isExpanded(item.id())\"\n          [attr.aria-controls]=\"'accordion-content-' + item.id()\"\n          [disabled]=\"disabled() || item.disabled()\"\n          (click)=\"toggleTemplateItem(item)\"\n          (keydown)=\"onTemplateKeydown($event, item, i)\">\n          <span class=\"ds-accordion__title\">{{ item.header() }}</span>\n          @if (item.badge() !== undefined) {\n            <ds-badge class=\"ds-accordion__badge\" size=\"sm\" type=\"neutral\">\n              {{ item.badge() }}\n            </ds-badge>\n          }\n          <fa-icon\n            class=\"ds-accordion__icon\"\n            [icon]=\"faChevronDown\"\n            [class.ds-accordion__icon--rotated]=\"isExpanded(item.id())\"\n            aria-hidden=\"true\">\n          </fa-icon>\n        </button>\n\n        <!-- Contenu -->\n        <div\n          class=\"ds-accordion__content\"\n          [id]=\"'accordion-content-' + item.id()\"\n          role=\"region\"\n          [attr.aria-labelledby]=\"'accordion-header-' + item.id()\"\n          [attr.aria-hidden]=\"!isExpanded(item.id())\"\n          [class.ds-accordion__content--expanded]=\"isExpanded(item.id())\">\n          <div class=\"ds-accordion__body\">\n            <ng-container *ngTemplateOutlet=\"item.contentTemplate\" />\n          </div>\n        </div>\n      </div>\n    }\n  }\n</div>\n", styles: ["@charset \"UTF-8\";.ds-accordion{font-family:var(--font-family-base)}.ds-accordion__item--disabled{opacity:.5;pointer-events:none}.ds-accordion__header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--accordion-header-padding-md, var(--space-4));background-color:var(--accordion-header-bg, var(--background-main));border:none;cursor:pointer;text-align:left;font-family:inherit;font-size:var(--accordion-header-font-size-md, var(--font-size-3));font-weight:var(--font-weight-medium);color:var(--accordion-header-text, var(--text-default));border-radius:0;transition:background-color var(--duration-fast) var(--easing-default),color var(--duration-fast) var(--easing-default)}.ds-accordion__header:hover:not(:disabled){background-color:var(--accordion-header-hover-bg, var(--surface-hover))}.ds-accordion__header:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--accordion-focus-color, var(--color-primary))}.ds-accordion__header:active:not(:disabled){transform:scale(.995)}.ds-accordion__header:disabled{cursor:not-allowed}.ds-accordion__title{flex:1}.ds-accordion__icon{flex-shrink:0;transition:transform var(--duration-normal) var(--easing-default);color:var(--accordion-icon-color, var(--text-muted))}.ds-accordion__icon--rotated{transform:rotate(180deg)}.ds-accordion__badge{margin-left:var(--space-2);margin-right:var(--space-2);flex-shrink:0}.ds-accordion__content{max-height:0;overflow:hidden;transition:max-height var(--duration-normal) var(--easing-default)}.ds-accordion__content--expanded{max-height:var(--accordion-content-max-height)}.ds-accordion__body{padding:var(--accordion-body-padding-md, var(--space-4));color:var(--accordion-body-text, var(--text-muted));font-size:var(--accordion-body-font-size-md, var(--font-size-2));line-height:var(--line-height-relaxed)}.ds-accordion--default .ds-accordion__item{border-bottom:var(--accordion-border-width) solid var(--accordion-border-color, var(--border-color))}.ds-accordion--default .ds-accordion__item:last-child{border-bottom:none}.ds-accordion--bordered{border:var(--accordion-border-width) solid var(--accordion-border-color, var(--border-color));border-radius:var(--accordion-radius, var(--radius-2));overflow:hidden}.ds-accordion--bordered .ds-accordion__item{border-bottom:var(--accordion-border-width) solid var(--accordion-border-color, var(--border-color))}.ds-accordion--bordered .ds-accordion__item:last-child{border-bottom:none}.ds-accordion--separated .ds-accordion__item{margin-bottom:var(--accordion-item-gap, var(--space-2));border:var(--accordion-border-width) solid var(--accordion-border-color, var(--border-color));border-radius:var(--accordion-radius, var(--radius-2));overflow:hidden}.ds-accordion--separated .ds-accordion__item:last-child{margin-bottom:0}.ds-accordion--separated .ds-accordion__item--expanded{border-color:var(--accordion-expanded-border-color, var(--color-primary))}.ds-accordion--sm .ds-accordion__header{padding:var(--accordion-header-padding-sm, var(--space-2) var(--space-3));font-size:var(--accordion-header-font-size-sm, var(--font-size-2))}.ds-accordion--sm .ds-accordion__body{padding:var(--accordion-body-padding-sm, var(--space-2) var(--space-3));font-size:var(--accordion-body-font-size-sm, var(--font-size-1))}.ds-accordion--lg .ds-accordion__header{padding:var(--accordion-header-padding-lg, var(--space-5) var(--space-6));font-size:var(--accordion-header-font-size-lg, var(--font-size-4))}.ds-accordion--lg .ds-accordion__body{padding:var(--accordion-body-padding-lg, var(--space-5) var(--space-6));font-size:var(--accordion-body-font-size-lg, var(--font-size-3))}.ds-accordion--disabled{opacity:.5;pointer-events:none}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], expandedIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedIds", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], itemChange: [{ type: i0.Output, args: ["itemChange"] }], accordionItems: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DsAccordionItem), { isSignal: true }] }] } });
 
 /**
  * # DsPagination
@@ -15929,6 +16110,611 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
             args: [{ selector: 'ds-list-group', standalone: true, imports: [CommonModule, FontAwesomeModule, DsBadge], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"groupClasses()\">\n  <!-- Header du groupe -->\n  <div\n    class=\"ds-list-group__header\"\n    [attr.role]=\"isCollapsible() ? 'button' : null\"\n    [attr.tabindex]=\"isCollapsible() ? 0 : null\"\n    [attr.aria-expanded]=\"isCollapsible() ? isExpanded() : null\"\n    (click)=\"toggle()\"\n    (keydown)=\"handleKeyDown($event)\"\n  >\n    <!-- Chevron (collapsible uniquement) -->\n    @if (isCollapsible()) {\n      <fa-icon\n        [icon]=\"chevronIcon()\"\n        class=\"ds-list-group__chevron\"\n        [class.ds-list-group__chevron--expanded]=\"isExpanded()\"\n      />\n    }\n\n    <!-- Ic\u00F4ne personnalis\u00E9e -->\n    @if (icon()) {\n      <fa-icon [icon]=\"icon()!\" class=\"ds-list-group__icon\" />\n    }\n\n    <!-- Titre -->\n    <span class=\"ds-list-group__title\">{{ title() }}</span>\n\n    <!-- Sous-titre -->\n    @if (subtitle()) {\n      <span class=\"ds-list-group__subtitle\">{{ subtitle() }}</span>\n    }\n\n    <!-- Compteur (badge) -->\n    @if (showCount()) {\n      <ds-badge type=\"neutral\" size=\"sm\" class=\"ds-list-group__count\">\n        {{ count() }}\n      </ds-badge>\n    }\n  </div>\n\n  <!-- Contenu du groupe -->\n  @if (isExpanded()) {\n    <div\n      class=\"ds-list-group__content\"\n      role=\"group\"\n      [attr.aria-label]=\"title()\"\n    >\n      <ng-content />\n    </div>\n  }\n</div>\n", styles: [":host{display:block}.ds-list-group__header{display:flex;align-items:center;gap:var(--space-2, 8px);padding:var(--space-2, 8px) var(--space-3, 12px);font-size:var(--font-size-1, 12px);font-weight:var(--font-weight-semibold, 600);color:var(--text-muted, #9ca3af);text-transform:uppercase;letter-spacing:.05em;-webkit-user-select:none;user-select:none}.ds-list-group--collapsible .ds-list-group__header{cursor:pointer;border-radius:var(--radius-1, 4px);transition:background-color .15s ease}.ds-list-group--collapsible .ds-list-group__header:hover{background-color:var(--background-hover, rgba(255, 255, 255, .05))}.ds-list-group--collapsible .ds-list-group__header:focus-visible{outline:2px solid var(--color-primary, #3b82f6);outline-offset:-2px}.ds-list-group--sticky .ds-list-group__header{position:sticky;top:0;background:var(--background-main, #111827);z-index:10;border-bottom:1px solid var(--border-default, #374151)}.ds-list-group__chevron{font-size:10px;color:var(--text-muted, #9ca3af);transition:transform .2s ease;flex-shrink:0}.ds-list-group__chevron--expanded,.ds-list-group--collapsed .ds-list-group__chevron{transform:rotate(0)}.ds-list-group__icon{font-size:var(--font-size-2, 14px);color:var(--text-muted, #9ca3af);flex-shrink:0}.ds-list-group__title{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ds-list-group__subtitle{font-weight:var(--font-weight-normal, 400);color:var(--text-muted, #6b7280);text-transform:none;letter-spacing:normal}.ds-list-group__count{flex-shrink:0}.ds-list-group--collapsed .ds-list-group__content{display:none}\n"] }]
         }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], count: [{ type: i0.Input, args: [{ isSignal: true, alias: "count", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }], expandedChange: [{ type: i0.Output, args: ["expandedChange"] }], sticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "sticky", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }] } });
 
+/**
+ * Chip coloré pour afficher une entité sélectionnée dans ds-entity-picker
+ *
+ * @example
+ * ```html
+ * <ds-entity-chip
+ *   [option]="{ value: '1', label: 'Important', color: '#ef4444', emoji: '🏷️' }"
+ *   [removable]="true"
+ *   (removed)="onRemove()"
+ * />
+ * ```
+ */
+class DsEntityChip {
+    /** Option à afficher */
+    option = input.required(...(ngDevMode ? [{ debugName: "option" }] : []));
+    /** Taille du chip */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    /** Afficher le bouton de suppression */
+    removable = input(true, ...(ngDevMode ? [{ debugName: "removable" }] : []));
+    /** Chip désactivé */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    /** Événement de suppression */
+    removed = output();
+    /** Icône de fermeture */
+    closeIcon = faXmark;
+    /** Couleur du chip (depuis l'option ou fallback) */
+    chipColor = computed(() => {
+        return this.option().color || 'var(--gray-400)';
+    }, ...(ngDevMode ? [{ debugName: "chipColor" }] : []));
+    /** Couleur de fond (10% opacity) */
+    backgroundColor = computed(() => {
+        const color = this.option().color;
+        if (!color) {
+            return 'var(--gray-100)';
+        }
+        // Utilise color-mix pour créer une version transparente
+        return `color-mix(in srgb, ${color} 12%, transparent)`;
+    }, ...(ngDevMode ? [{ debugName: "backgroundColor" }] : []));
+    /** Gestion du clic sur le bouton supprimer */
+    handleRemove(event) {
+        event.stopPropagation();
+        event.preventDefault();
+        if (this.disabled()) {
+            return;
+        }
+        this.removed.emit(this.option());
+    }
+    /** Gestion du clavier */
+    handleKeyDown(event) {
+        if (this.disabled()) {
+            return;
+        }
+        if (this.removable() && (event.key === 'Delete' || event.key === 'Backspace')) {
+            event.preventDefault();
+            this.removed.emit(this.option());
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsEntityChip, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DsEntityChip, isStandalone: true, selector: "ds-entity-chip", inputs: { option: { classPropertyName: "option", publicName: "option", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removed: "removed" }, ngImport: i0, template: `
+    <div
+      class="ds-entity-chip"
+      [class.ds-entity-chip--sm]="size() === 'sm'"
+      [class.ds-entity-chip--md]="size() === 'md'"
+      [class.ds-entity-chip--lg]="size() === 'lg'"
+      [class.ds-entity-chip--disabled]="disabled()"
+      [style.--chip-color]="chipColor()"
+      [style.background-color]="backgroundColor()"
+      [style.border-color]="chipColor()"
+      [attr.tabindex]="disabled() ? -1 : 0"
+      (keydown)="handleKeyDown($event)"
+    >
+      @if (option().emoji) {
+        <span class="ds-entity-chip__emoji">{{ option().emoji }}</span>
+      } @else if (option().icon) {
+        <fa-icon
+          class="ds-entity-chip__icon"
+          [icon]="option().icon!"
+          [fixedWidth]="true"
+          [style.color]="chipColor()"
+        />
+      }
+
+      <span class="ds-entity-chip__label">{{ option().label }}</span>
+
+      @if (removable() && !disabled()) {
+        <button
+          type="button"
+          class="ds-entity-chip__remove"
+          [attr.aria-label]="'Supprimer ' + option().label"
+          (click)="handleRemove($event)"
+        >
+          <fa-icon [icon]="closeIcon" [fixedWidth]="true" />
+        </button>
+      }
+    </div>
+  `, isInline: true, styles: [".ds-entity-chip{display:inline-flex;align-items:center;gap:var(--space-1, .25rem);padding:var(--space-1, .25rem) var(--space-2, .5rem);border-radius:var(--radius-md, 6px);font-family:var(--font-family-base, sans-serif);font-size:var(--font-size-sm, .875rem);font-weight:500;line-height:1.4;border:1px solid var(--chip-color, var(--gray-300));background-color:color-mix(in srgb,var(--chip-color, var(--gray-300)) 10%,transparent);color:var(--text-default, #1a1a1a);transition:background-color var(--duration-fast, .15s) var(--easing-default, ease),transform var(--duration-fast, .15s) var(--easing-default, ease);-webkit-user-select:none;user-select:none;outline:none;max-width:200px}.ds-entity-chip:focus-visible{box-shadow:0 0 0 2px var(--background-main, #fff),0 0 0 4px var(--chip-color, var(--color-primary))}.ds-entity-chip__emoji{flex-shrink:0;font-size:1em}.ds-entity-chip__icon{flex-shrink:0;font-size:.875em}.ds-entity-chip__label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.ds-entity-chip__remove{display:flex;align-items:center;justify-content:center;padding:var(--space-0-5, .125rem);margin:0;margin-left:var(--space-1, .25rem);background:none;border:none;border-radius:var(--radius-sm, 4px);cursor:pointer;color:var(--chip-color, var(--gray-600));opacity:.7;transition:opacity var(--duration-fast, .15s) var(--easing-default, ease),background-color var(--duration-fast, .15s) var(--easing-default, ease),transform var(--duration-fast, .15s) var(--easing-default, ease);flex-shrink:0}.ds-entity-chip__remove:hover{opacity:1;background-color:color-mix(in srgb,var(--chip-color, var(--gray-300)) 20%,transparent)}.ds-entity-chip__remove:active{transform:scale(.9)}.ds-entity-chip__remove:focus-visible{outline:none;opacity:1;box-shadow:0 0 0 2px var(--chip-color, var(--color-primary))}.ds-entity-chip__remove fa-icon{font-size:.75rem}.ds-entity-chip--sm{padding:var(--space-0-5, .125rem) var(--space-1-5, .375rem);font-size:var(--font-size-xs, .75rem);gap:var(--space-0-5, .125rem);max-width:150px}.ds-entity-chip--sm .ds-entity-chip__remove{padding:.0625rem}.ds-entity-chip--sm .ds-entity-chip__remove fa-icon{font-size:.625rem}.ds-entity-chip--lg{padding:var(--space-1-5, .375rem) var(--space-3, .75rem);font-size:var(--font-size-base, 1rem);gap:var(--space-2, .5rem);max-width:250px}.ds-entity-chip--lg .ds-entity-chip__remove fa-icon{font-size:.875rem}.ds-entity-chip--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}\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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsEntityChip, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-entity-chip', standalone: true, imports: [CommonModule, FontAwesomeModule], template: `
+    <div
+      class="ds-entity-chip"
+      [class.ds-entity-chip--sm]="size() === 'sm'"
+      [class.ds-entity-chip--md]="size() === 'md'"
+      [class.ds-entity-chip--lg]="size() === 'lg'"
+      [class.ds-entity-chip--disabled]="disabled()"
+      [style.--chip-color]="chipColor()"
+      [style.background-color]="backgroundColor()"
+      [style.border-color]="chipColor()"
+      [attr.tabindex]="disabled() ? -1 : 0"
+      (keydown)="handleKeyDown($event)"
+    >
+      @if (option().emoji) {
+        <span class="ds-entity-chip__emoji">{{ option().emoji }}</span>
+      } @else if (option().icon) {
+        <fa-icon
+          class="ds-entity-chip__icon"
+          [icon]="option().icon!"
+          [fixedWidth]="true"
+          [style.color]="chipColor()"
+        />
+      }
+
+      <span class="ds-entity-chip__label">{{ option().label }}</span>
+
+      @if (removable() && !disabled()) {
+        <button
+          type="button"
+          class="ds-entity-chip__remove"
+          [attr.aria-label]="'Supprimer ' + option().label"
+          (click)="handleRemove($event)"
+        >
+          <fa-icon [icon]="closeIcon" [fixedWidth]="true" />
+        </button>
+      }
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".ds-entity-chip{display:inline-flex;align-items:center;gap:var(--space-1, .25rem);padding:var(--space-1, .25rem) var(--space-2, .5rem);border-radius:var(--radius-md, 6px);font-family:var(--font-family-base, sans-serif);font-size:var(--font-size-sm, .875rem);font-weight:500;line-height:1.4;border:1px solid var(--chip-color, var(--gray-300));background-color:color-mix(in srgb,var(--chip-color, var(--gray-300)) 10%,transparent);color:var(--text-default, #1a1a1a);transition:background-color var(--duration-fast, .15s) var(--easing-default, ease),transform var(--duration-fast, .15s) var(--easing-default, ease);-webkit-user-select:none;user-select:none;outline:none;max-width:200px}.ds-entity-chip:focus-visible{box-shadow:0 0 0 2px var(--background-main, #fff),0 0 0 4px var(--chip-color, var(--color-primary))}.ds-entity-chip__emoji{flex-shrink:0;font-size:1em}.ds-entity-chip__icon{flex-shrink:0;font-size:.875em}.ds-entity-chip__label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.ds-entity-chip__remove{display:flex;align-items:center;justify-content:center;padding:var(--space-0-5, .125rem);margin:0;margin-left:var(--space-1, .25rem);background:none;border:none;border-radius:var(--radius-sm, 4px);cursor:pointer;color:var(--chip-color, var(--gray-600));opacity:.7;transition:opacity var(--duration-fast, .15s) var(--easing-default, ease),background-color var(--duration-fast, .15s) var(--easing-default, ease),transform var(--duration-fast, .15s) var(--easing-default, ease);flex-shrink:0}.ds-entity-chip__remove:hover{opacity:1;background-color:color-mix(in srgb,var(--chip-color, var(--gray-300)) 20%,transparent)}.ds-entity-chip__remove:active{transform:scale(.9)}.ds-entity-chip__remove:focus-visible{outline:none;opacity:1;box-shadow:0 0 0 2px var(--chip-color, var(--color-primary))}.ds-entity-chip__remove fa-icon{font-size:.75rem}.ds-entity-chip--sm{padding:var(--space-0-5, .125rem) var(--space-1-5, .375rem);font-size:var(--font-size-xs, .75rem);gap:var(--space-0-5, .125rem);max-width:150px}.ds-entity-chip--sm .ds-entity-chip__remove{padding:.0625rem}.ds-entity-chip--sm .ds-entity-chip__remove fa-icon{font-size:.625rem}.ds-entity-chip--lg{padding:var(--space-1-5, .375rem) var(--space-3, .75rem);font-size:var(--font-size-base, 1rem);gap:var(--space-2, .5rem);max-width:250px}.ds-entity-chip--lg .ds-entity-chip__remove fa-icon{font-size:.875rem}.ds-entity-chip--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}\n"] }]
+        }], propDecorators: { option: [{ type: i0.Input, args: [{ isSignal: true, alias: "option", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], removable: [{ type: i0.Input, args: [{ isSignal: true, alias: "removable", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], removed: [{ type: i0.Output, args: ["removed"] }] } });
+
+/**
+ * Entity Picker - Sélecteur d'entités riches
+ *
+ * Permet la sélection d'entités avec icônes, couleurs, emojis.
+ * Supporte la sélection simple et multiple avec affichage en chips colorés.
+ *
+ * @example
+ * ```html
+ * <!-- Sélection simple -->
+ * <ds-entity-picker
+ *   [options]="tags"
+ *   [(ngModel)]="selectedTag"
+ *   placeholder="Choisir un tag"
+ * />
+ *
+ * <!-- Sélection multiple -->
+ * <ds-entity-picker
+ *   [options]="categories"
+ *   [multiple]="true"
+ *   [(ngModel)]="selectedCategories"
+ *   [allowCreate]="true"
+ *   (createRequested)="onCreateCategory($event)"
+ * />
+ * ```
+ */
+class DsEntityPicker {
+    // ─────────────────────────────────────────────────────────────────────────────
+    // Inputs
+    // ─────────────────────────────────────────────────────────────────────────────
+    /** Liste des options disponibles */
+    options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
+    /** Active la sélection multiple */
+    multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple" }] : []));
+    /** Permet la création d'options à la volée */
+    allowCreate = input(false, ...(ngDevMode ? [{ debugName: "allowCreate" }] : []));
+    /** Placeholder du champ de recherche */
+    placeholder = input('Rechercher...', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    /** Taille du composant */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    /** Mode d'affichage des sélections multiples */
+    displayMode = input('chip', ...(ngDevMode ? [{ debugName: "displayMode" }] : []));
+    /** Afficher le bouton clear */
+    clearable = input(true, ...(ngDevMode ? [{ debugName: "clearable" }] : []));
+    /** Nombre maximum de sélections (multi-select) */
+    maxSelections = input(undefined, ...(ngDevMode ? [{ debugName: "maxSelections" }] : []));
+    /** Label du champ */
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
+    /** Message d'erreur */
+    error = input('', ...(ngDevMode ? [{ debugName: "error" }] : []));
+    /** Texte d'aide */
+    helper = input('', ...(ngDevMode ? [{ debugName: "helper" }] : []));
+    /** Champ désactivé */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    /** Champ obligatoire */
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : []));
+    /** Caractères minimum avant filtrage */
+    minChars = input(0, ...(ngDevMode ? [{ debugName: "minChars" }] : []));
+    /** Texte si aucun résultat */
+    noResultsText = input('Aucun résultat', ...(ngDevMode ? [{ debugName: "noResultsText" }] : []));
+    /** Template du texte de création (utiliser {query} comme placeholder) */
+    createText = input('Créer "{query}"', ...(ngDevMode ? [{ debugName: "createText" }] : []));
+    /** Nom du champ (pour formulaires) */
+    name = input('', ...(ngDevMode ? [{ debugName: "name" }] : []));
+    // ─────────────────────────────────────────────────────────────────────────────
+    // Outputs
+    // ─────────────────────────────────────────────────────────────────────────────
+    /** Émis lors d'un changement de sélection */
+    selectionChange = output();
+    /** Émis lors d'une demande de création */
+    createRequested = output();
+    /** Émis lors d'un changement de recherche */
+    searchChange = output();
+    /** Émis à l'ouverture du panel */
+    opened = output();
+    /** Émis à la fermeture du panel */
+    closed = output();
+    // ─────────────────────────────────────────────────────────────────────────────
+    // Internal state
+    // ─────────────────────────────────────────────────────────────────────────────
+    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+    searchQuery = signal('', ...(ngDevMode ? [{ debugName: "searchQuery" }] : []));
+    focusedIndex = signal(-1, ...(ngDevMode ? [{ debugName: "focusedIndex" }] : []));
+    internalValue = signal(null, ...(ngDevMode ? [{ debugName: "internalValue" }] : []));
+    cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : []));
+    inputElement;
+    listbox;
+    onChange = () => { };
+    onTouched = () => { };
+    // Icons
+    iconPlus = faPlus;
+    iconChevron = faChevronDown;
+    iconClear = faXmark;
+    iconSearch = faSearch;
+    // CDK Overlay positions
+    overlayPositions = AUTOCOMPLETE_POSITIONS;
+    // ─────────────────────────────────────────────────────────────────────────────
+    // Computed
+    // ─────────────────────────────────────────────────────────────────────────────
+    isDisabled = computed(() => this.disabled() || this.cvaDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
+    /** Options sélectionnées (objets complets) */
+    selectedOptions = computed(() => {
+        const value = this.internalValue();
+        const opts = this.options();
+        if (value === null)
+            return [];
+        if (this.multiple()) {
+            const values = Array.isArray(value) ? value : [value];
+            return opts.filter(opt => values.includes(opt.value));
+        }
+        else {
+            const found = opts.find(opt => opt.value === value);
+            return found ? [found] : [];
+        }
+    }, ...(ngDevMode ? [{ debugName: "selectedOptions" }] : []));
+    /** Texte affiché dans l'input (mode single) */
+    displayValue = computed(() => {
+        if (this.multiple())
+            return '';
+        const selected = this.selectedOptions();
+        return selected.length > 0 ? selected[0].label : '';
+    }, ...(ngDevMode ? [{ debugName: "displayValue" }] : []));
+    /** Options filtrées selon la recherche */
+    filteredOptions = computed(() => {
+        const query = this.searchQuery().toLowerCase().trim();
+        const minLen = this.minChars();
+        const selected = this.selectedOptions().map(o => o.value);
+        if (query.length < minLen) {
+            // En multi-select, exclure les options déjà sélectionnées
+            if (this.multiple()) {
+                return this.options().filter(opt => !selected.includes(opt.value));
+            }
+            return this.options();
+        }
+        let results = this.options().filter(opt => {
+            const matchLabel = opt.label.toLowerCase().includes(query);
+            const matchDesc = opt.description?.toLowerCase().includes(query);
+            return matchLabel || matchDesc;
+        });
+        // En multi-select, exclure les options déjà sélectionnées
+        if (this.multiple()) {
+            results = results.filter(opt => !selected.includes(opt.value));
+        }
+        return results;
+    }, ...(ngDevMode ? [{ debugName: "filteredOptions" }] : []));
+    /** Peut créer une nouvelle option */
+    canCreate = computed(() => {
+        if (!this.allowCreate())
+            return false;
+        const query = this.searchQuery().trim();
+        if (!query)
+            return false;
+        // Vérifie si l'option n'existe pas déjà
+        const exists = this.options().some(opt => opt.label.toLowerCase() === query.toLowerCase());
+        return !exists;
+    }, ...(ngDevMode ? [{ debugName: "canCreate" }] : []));
+    /** Afficher le dropdown */
+    shouldShowDropdown = computed(() => {
+        return this.isOpen();
+    }, ...(ngDevMode ? [{ debugName: "shouldShowDropdown" }] : []));
+    /** Classes du container */
+    containerClasses = computed(() => ({
+        'ds-entity-picker': true,
+        'ds-entity-picker--open': this.isOpen(),
+        'ds-entity-picker--disabled': this.isDisabled(),
+        'ds-entity-picker--error': !!this.error(),
+        'ds-entity-picker--multiple': this.multiple(),
+        [`ds-entity-picker--${this.size()}`]: true,
+    }), ...(ngDevMode ? [{ debugName: "containerClasses" }] : []));
+    /** Classes de l'input */
+    inputClasses = computed(() => ({
+        'ds-entity-picker__input': true,
+        'ds-entity-picker__input--has-value': this.multiple()
+            ? this.selectedOptions().length > 0
+            : !!this.internalValue(),
+    }), ...(ngDevMode ? [{ debugName: "inputClasses" }] : []));
+    /** ID unique pour le listbox */
+    listboxId = computed(() => `${this.name() || 'entity-picker'}-listbox`, ...(ngDevMode ? [{ debugName: "listboxId" }] : []));
+    /** ID unique pour l'input */
+    inputId = computed(() => `${this.name() || 'entity-picker'}-input`, ...(ngDevMode ? [{ debugName: "inputId" }] : []));
+    /** Texte du compteur (mode count) */
+    countText = computed(() => {
+        const count = this.selectedOptions().length;
+        if (count === 0)
+            return '';
+        return `${count} sélectionné${count > 1 ? 's' : ''}`;
+    }, ...(ngDevMode ? [{ debugName: "countText" }] : []));
+    /** Limite de sélection atteinte */
+    maxReached = computed(() => {
+        const max = this.maxSelections();
+        if (max === undefined)
+            return false;
+        return this.selectedOptions().length >= max;
+    }, ...(ngDevMode ? [{ debugName: "maxReached" }] : []));
+    /** Texte formaté pour l'option de création */
+    formattedCreateText = computed(() => {
+        return this.createText().replace('{query}', this.searchQuery());
+    }, ...(ngDevMode ? [{ debugName: "formattedCreateText" }] : []));
+    // ─────────────────────────────────────────────────────────────────────────────
+    // ControlValueAccessor
+    // ─────────────────────────────────────────────────────────────────────────────
+    writeValue(value) {
+        this.internalValue.set(value);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.cvaDisabled.set(isDisabled);
+    }
+    // ─────────────────────────────────────────────────────────────────────────────
+    // Public methods
+    // ─────────────────────────────────────────────────────────────────────────────
+    onInputFocus() {
+        if (this.isDisabled())
+            return;
+        this.open();
+    }
+    onInputBlur() {
+        this.onTouched();
+        // Fermeture retardée pour permettre le clic sur une option
+        setTimeout(() => {
+            if (!this.isOpen())
+                return;
+            this.close();
+        }, 200);
+    }
+    onSearchInput(event) {
+        const input = event.target;
+        this.searchQuery.set(input.value);
+        this.searchChange.emit(input.value);
+        this.focusedIndex.set(0);
+        if (!this.isOpen() && input.value.length >= this.minChars()) {
+            this.open();
+        }
+    }
+    open() {
+        if (this.isDisabled() || this.isOpen())
+            return;
+        this.isOpen.set(true);
+        this.focusedIndex.set(0);
+        this.opened.emit();
+    }
+    close() {
+        if (!this.isOpen())
+            return;
+        this.isOpen.set(false);
+        this.searchQuery.set('');
+        this.focusedIndex.set(-1);
+        this.closed.emit();
+    }
+    selectOption(option) {
+        if (option.disabled || this.isDisabled())
+            return;
+        if (this.multiple()) {
+            // Mode multi-sélection
+            const current = this.internalValue() || [];
+            const newValues = [...current, option.value];
+            this.internalValue.set(newValues);
+            this.onChange(newValues);
+            // Émettre les options complètes
+            const selectedOpts = this.options().filter(o => newValues.includes(o.value));
+            this.selectionChange.emit(selectedOpts);
+            // Reset recherche mais garde le panel ouvert
+            this.searchQuery.set('');
+            this.inputElement?.nativeElement?.focus();
+        }
+        else {
+            // Mode sélection simple
+            this.internalValue.set(option.value);
+            this.onChange(option.value);
+            this.selectionChange.emit(option);
+            this.close();
+        }
+    }
+    removeOption(option) {
+        if (!this.multiple() || this.isDisabled())
+            return;
+        const current = this.internalValue() || [];
+        const newValues = current.filter(v => v !== option.value);
+        this.internalValue.set(newValues.length > 0 ? newValues : null);
+        this.onChange(newValues.length > 0 ? newValues : null);
+        const selectedOpts = this.options().filter(o => newValues.includes(o.value));
+        this.selectionChange.emit(selectedOpts.length > 0 ? selectedOpts : null);
+    }
+    clear(event) {
+        event?.stopPropagation();
+        event?.preventDefault();
+        if (this.isDisabled())
+            return;
+        this.internalValue.set(this.multiple() ? [] : null);
+        this.onChange(this.multiple() ? [] : null);
+        this.selectionChange.emit(null);
+        this.searchQuery.set('');
+        this.inputElement?.nativeElement?.focus();
+    }
+    requestCreate() {
+        if (!this.canCreate())
+            return;
+        const value = this.searchQuery().trim();
+        this.createRequested.emit(value);
+        this.searchQuery.set('');
+        this.close();
+    }
+    // ─────────────────────────────────────────────────────────────────────────────
+    // Keyboard navigation
+    // ─────────────────────────────────────────────────────────────────────────────
+    onKeyDown(event) {
+        if (this.isDisabled())
+            return;
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                if (!this.isOpen()) {
+                    this.open();
+                }
+                else {
+                    this.moveFocus(1);
+                }
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                if (this.isOpen()) {
+                    this.moveFocus(-1);
+                }
+                break;
+            case 'Enter':
+                if (this.isOpen()) {
+                    event.preventDefault();
+                    const idx = this.focusedIndex();
+                    const options = this.filteredOptions();
+                    if (idx >= 0 && options[idx] && !options[idx].disabled) {
+                        this.selectOption(options[idx]);
+                    }
+                    else if (this.canCreate()) {
+                        this.requestCreate();
+                    }
+                }
+                break;
+            case 'Escape':
+                if (this.isOpen()) {
+                    event.preventDefault();
+                    this.close();
+                }
+                break;
+            case 'Backspace':
+                // Supprimer le dernier chip si l'input est vide en mode multi
+                if (this.multiple() && !this.searchQuery()) {
+                    const selected = this.selectedOptions();
+                    if (selected.length > 0) {
+                        this.removeOption(selected[selected.length - 1]);
+                    }
+                }
+                break;
+            case 'Tab':
+                if (this.isOpen()) {
+                    this.close();
+                }
+                break;
+        }
+    }
+    // ─────────────────────────────────────────────────────────────────────────────
+    // Click outside
+    // ─────────────────────────────────────────────────────────────────────────────
+    onDocumentClick(event) {
+        const target = event.target;
+        if (!target.closest('.ds-entity-picker')) {
+            this.close();
+        }
+    }
+    // ─────────────────────────────────────────────────────────────────────────────
+    // Helpers
+    // ─────────────────────────────────────────────────────────────────────────────
+    moveFocus(delta) {
+        const options = this.filteredOptions();
+        const canCreateOpt = this.canCreate() ? 1 : 0;
+        const total = options.length + canCreateOpt;
+        if (total === 0)
+            return;
+        let newIndex = this.focusedIndex() + delta;
+        // Wrap around
+        if (newIndex < 0)
+            newIndex = total - 1;
+        if (newIndex >= total)
+            newIndex = 0;
+        // Skip disabled options
+        let attempts = 0;
+        while (newIndex < options.length && options[newIndex]?.disabled && attempts < total) {
+            newIndex += delta;
+            if (newIndex < 0)
+                newIndex = total - 1;
+            if (newIndex >= total)
+                newIndex = 0;
+            attempts++;
+        }
+        this.focusedIndex.set(newIndex);
+        this.scrollFocusedOptionIntoView();
+    }
+    scrollFocusedOptionIntoView() {
+        const index = this.focusedIndex();
+        if (index < 0)
+            return;
+        const optionId = this.getOptionId(index);
+        const optionElement = document.getElementById(optionId);
+        if (optionElement) {
+            optionElement.scrollIntoView({
+                block: 'nearest',
+                behavior: 'smooth',
+            });
+        }
+    }
+    isOptionFocused(index) {
+        return this.focusedIndex() === index;
+    }
+    isOptionSelected(option) {
+        const value = this.internalValue();
+        if (value === null)
+            return false;
+        if (this.multiple()) {
+            return value.includes(option.value);
+        }
+        return value === option.value;
+    }
+    getOptionId(index) {
+        return `${this.name() || 'entity-picker'}-option-${index}`;
+    }
+    isCreateFocused() {
+        return this.canCreate() && this.focusedIndex() === this.filteredOptions().length;
+    }
+    trackOption(_, option) {
+        return option.value;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsEntityPicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DsEntityPicker, isStandalone: true, selector: "ds-entity-picker", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, allowCreate: { classPropertyName: "allowCreate", publicName: "allowCreate", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, displayMode: { classPropertyName: "displayMode", publicName: "displayMode", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, maxSelections: { classPropertyName: "maxSelections", publicName: "maxSelections", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, helper: { classPropertyName: "helper", publicName: "helper", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, minChars: { classPropertyName: "minChars", publicName: "minChars", isSignal: true, isRequired: false, transformFunction: null }, noResultsText: { classPropertyName: "noResultsText", publicName: "noResultsText", isSignal: true, isRequired: false, transformFunction: null }, createText: { classPropertyName: "createText", publicName: "createText", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange", createRequested: "createRequested", searchChange: "searchChange", opened: "opened", closed: "closed" }, host: { listeners: { "keydown": "onKeyDown($event)", "document:click": "onDocumentClick($event)" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => DsEntityPicker),
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }, { propertyName: "listbox", first: true, predicate: ["listbox"], descendants: true }], ngImport: i0, template: "<div [ngClass]=\"containerClasses()\">\n  <!-- Label -->\n  @if (label()) {\n    <label class=\"ds-entity-picker__label\" [attr.for]=\"inputId()\">\n      {{ label() }}\n      @if (required()) {\n        <span class=\"ds-entity-picker__required\">*</span>\n      }\n    </label>\n  }\n\n  <!-- Input wrapper -->\n  <div class=\"ds-entity-picker__wrapper\"\n       #triggerOrigin=\"cdkOverlayOrigin\"\n       cdkOverlayOrigin>\n    <!-- Chips (mode multiple) -->\n    @if (multiple() && displayMode() === 'chip') {\n      <div class=\"ds-entity-picker__chips\">\n        @for (option of selectedOptions(); track option.value) {\n          <ds-entity-chip\n            [option]=\"option\"\n            [size]=\"size()\"\n            [removable]=\"!isDisabled()\"\n            [disabled]=\"isDisabled()\"\n            (removed)=\"removeOption($event)\"\n          />\n        }\n      </div>\n    }\n\n    <!-- Count badge (mode count) -->\n    @if (multiple() && displayMode() === 'count' && selectedOptions().length > 0) {\n      <span class=\"ds-entity-picker__count\">\n        {{ countText() }}\n      </span>\n    }\n\n    <!-- Input -->\n    <div class=\"ds-entity-picker__input-container\">\n      <input\n        #inputElement\n        type=\"text\"\n        [id]=\"inputId()\"\n        [ngClass]=\"inputClasses()\"\n        [placeholder]=\"multiple() ? placeholder() : (displayValue() || placeholder())\"\n        [disabled]=\"isDisabled()\"\n        [value]=\"multiple() ? searchQuery() : (searchQuery() || displayValue())\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-autocomplete]=\"'list'\"\n        [attr.aria-controls]=\"listboxId()\"\n        [attr.aria-activedescendant]=\"focusedIndex() >= 0 ? getOptionId(focusedIndex()) : null\"\n        role=\"combobox\"\n        autocomplete=\"off\"\n        (focus)=\"onInputFocus()\"\n        (blur)=\"onInputBlur()\"\n        (input)=\"onSearchInput($event)\"\n      />\n\n      <!-- Icons -->\n      <span class=\"ds-entity-picker__icons\">\n        @if (clearable() && (selectedOptions().length > 0 || searchQuery())) {\n          <button\n            type=\"button\"\n            class=\"ds-entity-picker__clear\"\n            aria-label=\"Effacer\"\n            tabindex=\"-1\"\n            (mousedown)=\"clear($event)\"\n          >\n            <fa-icon [icon]=\"iconClear\" />\n          </button>\n        }\n        <span class=\"ds-entity-picker__arrow\" [class.ds-entity-picker__arrow--open]=\"isOpen()\">\n          <fa-icon [icon]=\"iconChevron\" />\n        </span>\n      </span>\n    </div>\n  </div>\n\n  <!-- Dropdown (CDK Overlay) -->\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"triggerOrigin\"\n    [cdkConnectedOverlayOpen]=\"shouldShowDropdown()\"\n    [cdkConnectedOverlayPositions]=\"overlayPositions\"\n    [cdkConnectedOverlayWidth]=\"triggerOrigin.elementRef.nativeElement.offsetWidth\"\n    [cdkConnectedOverlayHasBackdrop]=\"false\"\n    [cdkConnectedOverlayPanelClass]=\"'ds-entity-picker-overlay'\">\n    <div class=\"ds-entity-picker__dropdown\" role=\"presentation\">\n      <ul\n        #listbox\n        [id]=\"listboxId()\"\n        class=\"ds-entity-picker__listbox\"\n        role=\"listbox\"\n        [attr.aria-label]=\"label() || 'Options'\"\n        [attr.aria-multiselectable]=\"multiple()\"\n      >\n        @for (option of filteredOptions(); track trackOption($index, option); let i = $index) {\n          <li\n            [id]=\"getOptionId(i)\"\n            class=\"ds-entity-picker__option\"\n            [class.ds-entity-picker__option--focused]=\"isOptionFocused(i)\"\n            [class.ds-entity-picker__option--selected]=\"isOptionSelected(option)\"\n            [class.ds-entity-picker__option--disabled]=\"option.disabled || maxReached()\"\n            [style.--option-color]=\"option.color || 'var(--gray-400)'\"\n            role=\"option\"\n            [attr.aria-selected]=\"isOptionSelected(option)\"\n            [attr.aria-disabled]=\"option.disabled || maxReached()\"\n            (mousedown)=\"selectOption(option)\"\n          >\n            <!-- Indicateur de couleur -->\n            @if (option.color) {\n              <span\n                class=\"ds-entity-picker__option-indicator\"\n                [style.background-color]=\"option.color\"\n              ></span>\n            }\n\n            <!-- Emoji ou ic\u00F4ne -->\n            @if (option.emoji) {\n              <span class=\"ds-entity-picker__option-emoji\">{{ option.emoji }}</span>\n            } @else if (option.icon) {\n              <fa-icon\n                class=\"ds-entity-picker__option-icon\"\n                [icon]=\"option.icon\"\n                [style.color]=\"option.color\"\n              />\n            }\n\n            <!-- Contenu texte -->\n            <span class=\"ds-entity-picker__option-content\">\n              <span class=\"ds-entity-picker__option-label\">{{ option.label }}</span>\n              @if (option.description) {\n                <span class=\"ds-entity-picker__option-description\">{{ option.description }}</span>\n              }\n            </span>\n\n            <!-- Check si s\u00E9lectionn\u00E9 -->\n            @if (isOptionSelected(option)) {\n              <svg\n                class=\"ds-entity-picker__check\"\n                width=\"16\"\n                height=\"16\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"2\"\n              >\n                <polyline points=\"20 6 9 17 4 12\"></polyline>\n              </svg>\n            }\n          </li>\n        } @empty {\n          @if (!canCreate()) {\n            <li class=\"ds-entity-picker__empty\" role=\"option\" aria-disabled=\"true\">\n              {{ noResultsText() }}\n            </li>\n          }\n        }\n\n        <!-- Option de cr\u00E9ation -->\n        @if (canCreate()) {\n          <li\n            class=\"ds-entity-picker__option ds-entity-picker__option--create\"\n            [class.ds-entity-picker__option--focused]=\"isCreateFocused()\"\n            role=\"option\"\n            (mousedown)=\"requestCreate()\"\n          >\n            <fa-icon class=\"ds-entity-picker__option-icon\" [icon]=\"iconPlus\" />\n            <span class=\"ds-entity-picker__option-content\">\n              <span class=\"ds-entity-picker__option-label\">\n                {{ formattedCreateText() }}\n              </span>\n            </span>\n          </li>\n        }\n      </ul>\n    </div>\n  </ng-template>\n\n  <!-- Helper / Error -->\n  @if (error()) {\n    <span class=\"ds-entity-picker__error\" role=\"alert\">{{ error() }}</span>\n  } @else if (helper()) {\n    <span class=\"ds-entity-picker__helper\">{{ helper() }}</span>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";.ds-entity-picker{display:flex;flex-direction:column;gap:var(--space-1, .25rem);position:relative;width:100%;font-family:var(--font-family-base, sans-serif)}.ds-entity-picker__label{display:block;font-size:var(--font-size-sm, .875rem);font-weight:500;color:var(--text-default, #1a1a1a);margin-bottom:var(--space-1, .25rem)}.ds-entity-picker__required{color:var(--error, #ef4444);margin-left:var(--space-0-5, .125rem)}.ds-entity-picker__wrapper{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1, .25rem);padding:var(--space-1-5, .375rem) var(--space-2, .5rem);min-height:var(--input-height-md, 40px);background-color:var(--input-bg, #fff);border:1px solid var(--input-border, #d1d5db);border-radius:var(--radius-md, 6px);transition:border-color var(--duration-fast, .15s) var(--easing-default, ease),box-shadow var(--duration-fast, .15s) var(--easing-default, ease);cursor:text}.ds-entity-picker__wrapper:hover:not(.ds-entity-picker--disabled .ds-entity-picker__wrapper){border-color:var(--input-border-hover, #9ca3af)}.ds-entity-picker--open .ds-entity-picker__wrapper,.ds-entity-picker__wrapper:focus-within{border-color:var(--color-primary, #6366f1);box-shadow:0 0 0 3px var(--primary-100, rgba(99, 102, 241, .1))}.ds-entity-picker--error .ds-entity-picker__wrapper{border-color:var(--error, #ef4444)}.ds-entity-picker--error .ds-entity-picker__wrapper:focus-within{box-shadow:0 0 0 3px var(--error-100, rgba(239, 68, 68, .1))}.ds-entity-picker--disabled .ds-entity-picker__wrapper{background-color:var(--input-bg-disabled, #f3f4f6);border-color:var(--input-border-disabled, #e5e7eb);cursor:not-allowed;opacity:.6}.ds-entity-picker__chips{display:flex;flex-wrap:wrap;gap:var(--space-1, .25rem);max-width:100%}.ds-entity-picker__count{display:inline-flex;align-items:center;padding:var(--space-0-5, .125rem) var(--space-2, .5rem);background-color:var(--primary-100, #eef2ff);color:var(--color-primary, #6366f1);font-size:var(--font-size-sm, .875rem);font-weight:500;border-radius:var(--radius-pill, 9999px)}.ds-entity-picker__input-container{display:flex;align-items:center;flex:1;min-width:120px;position:relative}.ds-entity-picker__input{flex:1;min-width:0;padding:var(--space-1, .25rem) 0;border:none;background:transparent;font-family:inherit;font-size:var(--font-size-base, 1rem);color:var(--text-default, #1a1a1a);outline:none}.ds-entity-picker__input::placeholder{color:var(--text-muted, #9ca3af)}.ds-entity-picker__input:disabled{cursor:not-allowed}.ds-entity-picker__icons{display:flex;align-items:center;gap:var(--space-1, .25rem);margin-left:var(--space-1, .25rem);flex-shrink:0}.ds-entity-picker__clear{display:flex;align-items:center;justify-content:center;padding:var(--space-1, .25rem);border:none;background:none;color:var(--text-muted, #9ca3af);cursor:pointer;border-radius:var(--radius-sm, 4px);transition:color var(--duration-fast, .15s) var(--easing-default, ease),background-color var(--duration-fast, .15s) var(--easing-default, ease)}.ds-entity-picker__clear:hover{color:var(--text-default, #1a1a1a);background-color:var(--gray-100, #f3f4f6)}.ds-entity-picker__arrow{display:flex;align-items:center;color:var(--text-muted, #9ca3af);transition:transform var(--duration-fast, .15s) var(--easing-default, ease)}.ds-entity-picker__arrow--open{transform:rotate(180deg)}.ds-entity-picker__dropdown{background-color:var(--dropdown-bg, #fff);border:1px solid var(--dropdown-border, #e5e7eb);border-radius:var(--radius-md, 6px);box-shadow:var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, .1));max-height:280px;overflow-y:auto;animation:slideDown .15s ease-out}@keyframes slideDown{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.ds-entity-picker__listbox{list-style:none;margin:0;padding:var(--space-1, .25rem)}.ds-entity-picker__option{display:flex;align-items:center;gap:var(--space-2, .5rem);padding:var(--space-2, .5rem) var(--space-3, .75rem);border-radius:var(--radius-sm, 4px);cursor:pointer;transition:background-color var(--duration-fast, .15s) var(--easing-default, ease)}.ds-entity-picker__option:hover:not(.ds-entity-picker__option--disabled){background-color:var(--gray-50, #f9fafb)}.ds-entity-picker__option--focused:not(.ds-entity-picker__option--disabled){background-color:var(--gray-100, #f3f4f6)}.ds-entity-picker__option--selected{background-color:var(--primary-50, #eef2ff)}.ds-entity-picker__option--selected:hover{background-color:var(--primary-100, #e0e7ff)}.ds-entity-picker__option--disabled{opacity:.5;cursor:not-allowed}.ds-entity-picker__option--create{border-top:1px solid var(--gray-200, #e5e7eb);margin-top:var(--space-1, .25rem);padding-top:var(--space-3, .75rem);color:var(--color-primary, #6366f1)}.ds-entity-picker__option--create .ds-entity-picker__option-icon{color:var(--color-primary, #6366f1)}.ds-entity-picker__option-indicator{width:4px;height:100%;min-height:24px;border-radius:var(--radius-pill, 9999px);flex-shrink:0;margin-right:var(--space-1, .25rem)}.ds-entity-picker__option-emoji{font-size:1.125rem;flex-shrink:0}.ds-entity-picker__option-icon{font-size:1rem;flex-shrink:0;color:var(--option-color, var(--gray-600))}.ds-entity-picker__option-content{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-0-5, .125rem)}.ds-entity-picker__option-label{font-size:var(--font-size-base, 1rem);color:var(--text-default, #1a1a1a);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ds-entity-picker__option-description{font-size:var(--font-size-sm, .875rem);color:var(--text-muted, #6b7280);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ds-entity-picker__check{flex-shrink:0;color:var(--color-primary, #6366f1)}.ds-entity-picker__empty{padding:var(--space-3, .75rem);text-align:center;color:var(--text-muted, #9ca3af);font-size:var(--font-size-sm, .875rem)}.ds-entity-picker__helper,.ds-entity-picker__error{font-size:var(--font-size-sm, .875rem);margin-top:var(--space-1, .25rem)}.ds-entity-picker__helper{color:var(--text-muted, #6b7280)}.ds-entity-picker__error{color:var(--error, #ef4444)}.ds-entity-picker--sm .ds-entity-picker__wrapper{min-height:var(--input-height-sm, 32px);padding:var(--space-1, .25rem) var(--space-1-5, .375rem)}.ds-entity-picker--sm .ds-entity-picker__input{font-size:var(--font-size-sm, .875rem)}.ds-entity-picker--sm .ds-entity-picker__option{padding:var(--space-1-5, .375rem) var(--space-2, .5rem)}.ds-entity-picker--sm .ds-entity-picker__option-label{font-size:var(--font-size-sm, .875rem)}.ds-entity-picker--sm .ds-entity-picker__option-description{font-size:var(--font-size-xs, .75rem)}.ds-entity-picker--lg .ds-entity-picker__wrapper{min-height:var(--input-height-lg, 48px);padding:var(--space-2, .5rem) var(--space-3, .75rem)}.ds-entity-picker--lg .ds-entity-picker__input{font-size:var(--font-size-lg, 1.125rem)}.ds-entity-picker--lg .ds-entity-picker__option{padding:var(--space-3, .75rem) var(--space-4, 1rem)}.ds-entity-picker--lg .ds-entity-picker__option-label{font-size:var(--font-size-lg, 1.125rem)}\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"] }, { kind: "component", type: DsEntityChip, selector: "ds-entity-chip", inputs: ["option", "size", "removable", "disabled"], outputs: ["removed"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsEntityPicker, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-entity-picker', standalone: true, imports: [CommonModule, FontAwesomeModule, DsEntityChip, CdkConnectedOverlay, CdkOverlayOrigin], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => DsEntityPicker),
+                            multi: true,
+                        },
+                    ], template: "<div [ngClass]=\"containerClasses()\">\n  <!-- Label -->\n  @if (label()) {\n    <label class=\"ds-entity-picker__label\" [attr.for]=\"inputId()\">\n      {{ label() }}\n      @if (required()) {\n        <span class=\"ds-entity-picker__required\">*</span>\n      }\n    </label>\n  }\n\n  <!-- Input wrapper -->\n  <div class=\"ds-entity-picker__wrapper\"\n       #triggerOrigin=\"cdkOverlayOrigin\"\n       cdkOverlayOrigin>\n    <!-- Chips (mode multiple) -->\n    @if (multiple() && displayMode() === 'chip') {\n      <div class=\"ds-entity-picker__chips\">\n        @for (option of selectedOptions(); track option.value) {\n          <ds-entity-chip\n            [option]=\"option\"\n            [size]=\"size()\"\n            [removable]=\"!isDisabled()\"\n            [disabled]=\"isDisabled()\"\n            (removed)=\"removeOption($event)\"\n          />\n        }\n      </div>\n    }\n\n    <!-- Count badge (mode count) -->\n    @if (multiple() && displayMode() === 'count' && selectedOptions().length > 0) {\n      <span class=\"ds-entity-picker__count\">\n        {{ countText() }}\n      </span>\n    }\n\n    <!-- Input -->\n    <div class=\"ds-entity-picker__input-container\">\n      <input\n        #inputElement\n        type=\"text\"\n        [id]=\"inputId()\"\n        [ngClass]=\"inputClasses()\"\n        [placeholder]=\"multiple() ? placeholder() : (displayValue() || placeholder())\"\n        [disabled]=\"isDisabled()\"\n        [value]=\"multiple() ? searchQuery() : (searchQuery() || displayValue())\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-autocomplete]=\"'list'\"\n        [attr.aria-controls]=\"listboxId()\"\n        [attr.aria-activedescendant]=\"focusedIndex() >= 0 ? getOptionId(focusedIndex()) : null\"\n        role=\"combobox\"\n        autocomplete=\"off\"\n        (focus)=\"onInputFocus()\"\n        (blur)=\"onInputBlur()\"\n        (input)=\"onSearchInput($event)\"\n      />\n\n      <!-- Icons -->\n      <span class=\"ds-entity-picker__icons\">\n        @if (clearable() && (selectedOptions().length > 0 || searchQuery())) {\n          <button\n            type=\"button\"\n            class=\"ds-entity-picker__clear\"\n            aria-label=\"Effacer\"\n            tabindex=\"-1\"\n            (mousedown)=\"clear($event)\"\n          >\n            <fa-icon [icon]=\"iconClear\" />\n          </button>\n        }\n        <span class=\"ds-entity-picker__arrow\" [class.ds-entity-picker__arrow--open]=\"isOpen()\">\n          <fa-icon [icon]=\"iconChevron\" />\n        </span>\n      </span>\n    </div>\n  </div>\n\n  <!-- Dropdown (CDK Overlay) -->\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"triggerOrigin\"\n    [cdkConnectedOverlayOpen]=\"shouldShowDropdown()\"\n    [cdkConnectedOverlayPositions]=\"overlayPositions\"\n    [cdkConnectedOverlayWidth]=\"triggerOrigin.elementRef.nativeElement.offsetWidth\"\n    [cdkConnectedOverlayHasBackdrop]=\"false\"\n    [cdkConnectedOverlayPanelClass]=\"'ds-entity-picker-overlay'\">\n    <div class=\"ds-entity-picker__dropdown\" role=\"presentation\">\n      <ul\n        #listbox\n        [id]=\"listboxId()\"\n        class=\"ds-entity-picker__listbox\"\n        role=\"listbox\"\n        [attr.aria-label]=\"label() || 'Options'\"\n        [attr.aria-multiselectable]=\"multiple()\"\n      >\n        @for (option of filteredOptions(); track trackOption($index, option); let i = $index) {\n          <li\n            [id]=\"getOptionId(i)\"\n            class=\"ds-entity-picker__option\"\n            [class.ds-entity-picker__option--focused]=\"isOptionFocused(i)\"\n            [class.ds-entity-picker__option--selected]=\"isOptionSelected(option)\"\n            [class.ds-entity-picker__option--disabled]=\"option.disabled || maxReached()\"\n            [style.--option-color]=\"option.color || 'var(--gray-400)'\"\n            role=\"option\"\n            [attr.aria-selected]=\"isOptionSelected(option)\"\n            [attr.aria-disabled]=\"option.disabled || maxReached()\"\n            (mousedown)=\"selectOption(option)\"\n          >\n            <!-- Indicateur de couleur -->\n            @if (option.color) {\n              <span\n                class=\"ds-entity-picker__option-indicator\"\n                [style.background-color]=\"option.color\"\n              ></span>\n            }\n\n            <!-- Emoji ou ic\u00F4ne -->\n            @if (option.emoji) {\n              <span class=\"ds-entity-picker__option-emoji\">{{ option.emoji }}</span>\n            } @else if (option.icon) {\n              <fa-icon\n                class=\"ds-entity-picker__option-icon\"\n                [icon]=\"option.icon\"\n                [style.color]=\"option.color\"\n              />\n            }\n\n            <!-- Contenu texte -->\n            <span class=\"ds-entity-picker__option-content\">\n              <span class=\"ds-entity-picker__option-label\">{{ option.label }}</span>\n              @if (option.description) {\n                <span class=\"ds-entity-picker__option-description\">{{ option.description }}</span>\n              }\n            </span>\n\n            <!-- Check si s\u00E9lectionn\u00E9 -->\n            @if (isOptionSelected(option)) {\n              <svg\n                class=\"ds-entity-picker__check\"\n                width=\"16\"\n                height=\"16\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"2\"\n              >\n                <polyline points=\"20 6 9 17 4 12\"></polyline>\n              </svg>\n            }\n          </li>\n        } @empty {\n          @if (!canCreate()) {\n            <li class=\"ds-entity-picker__empty\" role=\"option\" aria-disabled=\"true\">\n              {{ noResultsText() }}\n            </li>\n          }\n        }\n\n        <!-- Option de cr\u00E9ation -->\n        @if (canCreate()) {\n          <li\n            class=\"ds-entity-picker__option ds-entity-picker__option--create\"\n            [class.ds-entity-picker__option--focused]=\"isCreateFocused()\"\n            role=\"option\"\n            (mousedown)=\"requestCreate()\"\n          >\n            <fa-icon class=\"ds-entity-picker__option-icon\" [icon]=\"iconPlus\" />\n            <span class=\"ds-entity-picker__option-content\">\n              <span class=\"ds-entity-picker__option-label\">\n                {{ formattedCreateText() }}\n              </span>\n            </span>\n          </li>\n        }\n      </ul>\n    </div>\n  </ng-template>\n\n  <!-- Helper / Error -->\n  @if (error()) {\n    <span class=\"ds-entity-picker__error\" role=\"alert\">{{ error() }}</span>\n  } @else if (helper()) {\n    <span class=\"ds-entity-picker__helper\">{{ helper() }}</span>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";.ds-entity-picker{display:flex;flex-direction:column;gap:var(--space-1, .25rem);position:relative;width:100%;font-family:var(--font-family-base, sans-serif)}.ds-entity-picker__label{display:block;font-size:var(--font-size-sm, .875rem);font-weight:500;color:var(--text-default, #1a1a1a);margin-bottom:var(--space-1, .25rem)}.ds-entity-picker__required{color:var(--error, #ef4444);margin-left:var(--space-0-5, .125rem)}.ds-entity-picker__wrapper{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1, .25rem);padding:var(--space-1-5, .375rem) var(--space-2, .5rem);min-height:var(--input-height-md, 40px);background-color:var(--input-bg, #fff);border:1px solid var(--input-border, #d1d5db);border-radius:var(--radius-md, 6px);transition:border-color var(--duration-fast, .15s) var(--easing-default, ease),box-shadow var(--duration-fast, .15s) var(--easing-default, ease);cursor:text}.ds-entity-picker__wrapper:hover:not(.ds-entity-picker--disabled .ds-entity-picker__wrapper){border-color:var(--input-border-hover, #9ca3af)}.ds-entity-picker--open .ds-entity-picker__wrapper,.ds-entity-picker__wrapper:focus-within{border-color:var(--color-primary, #6366f1);box-shadow:0 0 0 3px var(--primary-100, rgba(99, 102, 241, .1))}.ds-entity-picker--error .ds-entity-picker__wrapper{border-color:var(--error, #ef4444)}.ds-entity-picker--error .ds-entity-picker__wrapper:focus-within{box-shadow:0 0 0 3px var(--error-100, rgba(239, 68, 68, .1))}.ds-entity-picker--disabled .ds-entity-picker__wrapper{background-color:var(--input-bg-disabled, #f3f4f6);border-color:var(--input-border-disabled, #e5e7eb);cursor:not-allowed;opacity:.6}.ds-entity-picker__chips{display:flex;flex-wrap:wrap;gap:var(--space-1, .25rem);max-width:100%}.ds-entity-picker__count{display:inline-flex;align-items:center;padding:var(--space-0-5, .125rem) var(--space-2, .5rem);background-color:var(--primary-100, #eef2ff);color:var(--color-primary, #6366f1);font-size:var(--font-size-sm, .875rem);font-weight:500;border-radius:var(--radius-pill, 9999px)}.ds-entity-picker__input-container{display:flex;align-items:center;flex:1;min-width:120px;position:relative}.ds-entity-picker__input{flex:1;min-width:0;padding:var(--space-1, .25rem) 0;border:none;background:transparent;font-family:inherit;font-size:var(--font-size-base, 1rem);color:var(--text-default, #1a1a1a);outline:none}.ds-entity-picker__input::placeholder{color:var(--text-muted, #9ca3af)}.ds-entity-picker__input:disabled{cursor:not-allowed}.ds-entity-picker__icons{display:flex;align-items:center;gap:var(--space-1, .25rem);margin-left:var(--space-1, .25rem);flex-shrink:0}.ds-entity-picker__clear{display:flex;align-items:center;justify-content:center;padding:var(--space-1, .25rem);border:none;background:none;color:var(--text-muted, #9ca3af);cursor:pointer;border-radius:var(--radius-sm, 4px);transition:color var(--duration-fast, .15s) var(--easing-default, ease),background-color var(--duration-fast, .15s) var(--easing-default, ease)}.ds-entity-picker__clear:hover{color:var(--text-default, #1a1a1a);background-color:var(--gray-100, #f3f4f6)}.ds-entity-picker__arrow{display:flex;align-items:center;color:var(--text-muted, #9ca3af);transition:transform var(--duration-fast, .15s) var(--easing-default, ease)}.ds-entity-picker__arrow--open{transform:rotate(180deg)}.ds-entity-picker__dropdown{background-color:var(--dropdown-bg, #fff);border:1px solid var(--dropdown-border, #e5e7eb);border-radius:var(--radius-md, 6px);box-shadow:var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, .1));max-height:280px;overflow-y:auto;animation:slideDown .15s ease-out}@keyframes slideDown{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.ds-entity-picker__listbox{list-style:none;margin:0;padding:var(--space-1, .25rem)}.ds-entity-picker__option{display:flex;align-items:center;gap:var(--space-2, .5rem);padding:var(--space-2, .5rem) var(--space-3, .75rem);border-radius:var(--radius-sm, 4px);cursor:pointer;transition:background-color var(--duration-fast, .15s) var(--easing-default, ease)}.ds-entity-picker__option:hover:not(.ds-entity-picker__option--disabled){background-color:var(--gray-50, #f9fafb)}.ds-entity-picker__option--focused:not(.ds-entity-picker__option--disabled){background-color:var(--gray-100, #f3f4f6)}.ds-entity-picker__option--selected{background-color:var(--primary-50, #eef2ff)}.ds-entity-picker__option--selected:hover{background-color:var(--primary-100, #e0e7ff)}.ds-entity-picker__option--disabled{opacity:.5;cursor:not-allowed}.ds-entity-picker__option--create{border-top:1px solid var(--gray-200, #e5e7eb);margin-top:var(--space-1, .25rem);padding-top:var(--space-3, .75rem);color:var(--color-primary, #6366f1)}.ds-entity-picker__option--create .ds-entity-picker__option-icon{color:var(--color-primary, #6366f1)}.ds-entity-picker__option-indicator{width:4px;height:100%;min-height:24px;border-radius:var(--radius-pill, 9999px);flex-shrink:0;margin-right:var(--space-1, .25rem)}.ds-entity-picker__option-emoji{font-size:1.125rem;flex-shrink:0}.ds-entity-picker__option-icon{font-size:1rem;flex-shrink:0;color:var(--option-color, var(--gray-600))}.ds-entity-picker__option-content{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-0-5, .125rem)}.ds-entity-picker__option-label{font-size:var(--font-size-base, 1rem);color:var(--text-default, #1a1a1a);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ds-entity-picker__option-description{font-size:var(--font-size-sm, .875rem);color:var(--text-muted, #6b7280);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ds-entity-picker__check{flex-shrink:0;color:var(--color-primary, #6366f1)}.ds-entity-picker__empty{padding:var(--space-3, .75rem);text-align:center;color:var(--text-muted, #9ca3af);font-size:var(--font-size-sm, .875rem)}.ds-entity-picker__helper,.ds-entity-picker__error{font-size:var(--font-size-sm, .875rem);margin-top:var(--space-1, .25rem)}.ds-entity-picker__helper{color:var(--text-muted, #6b7280)}.ds-entity-picker__error{color:var(--error, #ef4444)}.ds-entity-picker--sm .ds-entity-picker__wrapper{min-height:var(--input-height-sm, 32px);padding:var(--space-1, .25rem) var(--space-1-5, .375rem)}.ds-entity-picker--sm .ds-entity-picker__input{font-size:var(--font-size-sm, .875rem)}.ds-entity-picker--sm .ds-entity-picker__option{padding:var(--space-1-5, .375rem) var(--space-2, .5rem)}.ds-entity-picker--sm .ds-entity-picker__option-label{font-size:var(--font-size-sm, .875rem)}.ds-entity-picker--sm .ds-entity-picker__option-description{font-size:var(--font-size-xs, .75rem)}.ds-entity-picker--lg .ds-entity-picker__wrapper{min-height:var(--input-height-lg, 48px);padding:var(--space-2, .5rem) var(--space-3, .75rem)}.ds-entity-picker--lg .ds-entity-picker__input{font-size:var(--font-size-lg, 1.125rem)}.ds-entity-picker--lg .ds-entity-picker__option{padding:var(--space-3, .75rem) var(--space-4, 1rem)}.ds-entity-picker--lg .ds-entity-picker__option-label{font-size:var(--font-size-lg, 1.125rem)}\n"] }]
+        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], allowCreate: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowCreate", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], displayMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayMode", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], maxSelections: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSelections", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], helper: [{ type: i0.Input, args: [{ isSignal: true, alias: "helper", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], minChars: [{ type: i0.Input, args: [{ isSignal: true, alias: "minChars", required: false }] }], noResultsText: [{ type: i0.Input, args: [{ isSignal: true, alias: "noResultsText", required: false }] }], createText: [{ type: i0.Input, args: [{ isSignal: true, alias: "createText", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], createRequested: [{ type: i0.Output, args: ["createRequested"] }], searchChange: [{ type: i0.Output, args: ["searchChange"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], inputElement: [{
+                type: ViewChild,
+                args: ['inputElement']
+            }], listbox: [{
+                type: ViewChild,
+                args: ['listbox']
+            }], onKeyDown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }], onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }] } });
+
 /*
  * Components barrel export
  */
@@ -16415,5 +17201,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AUTOCOMPLETE_POSITIONS, DROPDOWN_POSITIONS, DROPDOWN_POSITIONS_RIGHT, DROPDOWN_POSITIONS_TOP, DsAccordion, DsAlert, DsAvatar, DsBadge, DsBreadcrumb, DsButton, DsCalendar, DsCard, DsCarousel, DsCheckbox, DsCheckboxList, DsChip, DsColorPicker, DsCombobox, DsContainer, DsDatePicker, DsDivider, DsDrawer, DsDropdown, DsEmpty, DsFileUpload, DsI18nService, DsInputField, DsInputNumber, DsInputTextarea, DsList, DsListGroup, DsListItem, DsMenu, DsModalComponent, DsNavList, DsNotificationContainerComponent, DsNotificationItemComponent, DsNotificationService, DsPagination, DsPasswordStrength, DsPopover, DsPopoverComponent, DsProgressBar, DsRadioGroup, DsRating, DsSearchInput, DsSegmentedControl, DsSelect, DsSidebar, DsSidebarFooterItemComponent, DsSidebarItemComponent, 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, SIDEBAR_POPOVER_POSITIONS_LEFT, SIDEBAR_POPOVER_POSITIONS_RIGHT, TOOLTIP_POSITIONS, generateId, generateShortId };
+export { AUTOCOMPLETE_POSITIONS, DROPDOWN_POSITIONS, DROPDOWN_POSITIONS_RIGHT, DROPDOWN_POSITIONS_TOP, DsAccordion, DsAccordionItem, DsAlert, DsAvatar, DsBadge, DsBreadcrumb, DsButton, DsCalendar, DsCard, DsCarousel, DsCheckbox, DsCheckboxList, DsChip, DsColorPicker, DsCombobox, DsContainer, DsDatePicker, DsDivider, DsDrawer, DsDropdown, DsEmpty, DsEntityChip, DsEntityPicker, DsFileUpload, DsI18nService, DsInputField, DsInputNumber, DsInputTextarea, DsList, DsListGroup, DsListItem, DsMenu, DsModalComponent, DsNavList, DsNotificationContainerComponent, DsNotificationItemComponent, DsNotificationService, DsPagination, DsPasswordStrength, DsPopover, DsPopoverComponent, DsProgressBar, DsRadioGroup, DsRating, DsSearchInput, DsSegmentedControl, DsSelect, DsSidebar, DsSidebarFooterItemComponent, DsSidebarItemComponent, 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, SIDEBAR_POPOVER_POSITIONS_LEFT, SIDEBAR_POPOVER_POSITIONS_RIGHT, TOOLTIP_POSITIONS, generateId, generateShortId };
 //# sourceMappingURL=kksdev-ds-angular.mjs.map