@kksdev/ds-angular 1.7.1 → 1.8.0

package/fesm2022/kksdev-ds-angular.mjs

@@ -9595,7 +9595,7 @@ class DsTimePickerPanelComponent {
             const val = this.value();
             const fmt = this.format();
             this.parseAndSetValue(val, fmt);
-        }, { allowSignalWrites: true });
+        });
     }
     ngAfterViewInit() {
         this.initialized = true;
@@ -10494,10 +10494,12 @@ class DsTreeNodeComponent {
     }, ...(ngDevMode ? [{ debugName: "isIndeterminate" }] : []));
     nodeIcon = computed(() => {
         const node = this.node();
-        // Custom icon
+        // Custom icon with optional expanded variant
         if (node.icon) {
-            // TODO: support custom icons
-            return this.fileIcon;
+            if (this.hasChildren() && this.isExpanded() && node.expandedIcon) {
+                return node.expandedIcon;
+            }
+            return node.icon;
         }
         // Default folder/file icons
         if (this.hasChildren()) {
@@ -12023,11 +12025,11 @@ class DsCalendar {
         effect(() => {
             const value = this.value();
             this.displayDate.set(new Date(value));
-        }, { allowSignalWrites: true });
+        });
         // Synchroniser currentMode avec mode
         effect(() => {
             this.currentMode.set(this.mode());
-        }, { allowSignalWrites: true });
+        });
     }
     // =========================================================================
     // MÉTHODES PUBLIQUES
@@ -14987,11 +14989,11 @@ class DsSidebar {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsSidebar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DsSidebar, isStandalone: true, selector: "ds-sidebar", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, responsiveBreakpoint: { classPropertyName: "responsiveBreakpoint", publicName: "responsiveBreakpoint", isSignal: true, isRequired: false, transformFunction: null }, autoCollapseOnMobile: { classPropertyName: "autoCollapseOnMobile", publicName: "autoCollapseOnMobile", isSignal: true, isRequired: false, transformFunction: null }, showTooltips: { classPropertyName: "showTooltips", publicName: "showTooltips", isSignal: true, isRequired: false, transformFunction: null }, collapsedTrigger: { classPropertyName: "collapsedTrigger", publicName: "collapsedTrigger", isSignal: true, isRequired: false, transformFunction: null }, initialActiveItemId: { classPropertyName: "initialActiveItemId", publicName: "initialActiveItemId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick", itemExpand: "itemExpand", modeChange: "modeChange", overlayOpened: "overlayOpened", overlayClosed: "overlayClosed" }, viewQueries: [{ propertyName: "sidebarContainer", first: true, predicate: ["sidebarContainer"], descendants: true }, { propertyName: "itemComponents", predicate: DsSidebarItemComponent, descendants: true }], ngImport: i0, template: "<!-- Backdrop (mode overlay) -->\n@if (internalMode() === 'overlay' && isOverlayOpen()) {\n  <div\n    class=\"ds-sidebar__backdrop\"\n    (click)=\"handleBackdropClick()\"\n    aria-hidden=\"true\">\n  </div>\n}\n\n<!-- Sidebar container -->\n<nav\n  #sidebarContainer\n  [class]=\"containerClasses()\"\n  [attr.aria-label]=\"ariaLabel()\"\n  role=\"navigation\"\n  (keydown)=\"handleKeyDown($event)\">\n\n  <!-- Header -->\n  <div class=\"ds-sidebar__header\">\n    <ng-content select=\"[sidebar-header]\"></ng-content>\n\n    <!-- Toggle button -->\n    @if (collapsible() && internalMode() !== 'overlay') {\n      <button\n        type=\"button\"\n        class=\"ds-sidebar__toggle-btn\"\n        [attr.aria-label]=\"internalMode() === 'collapsed' ? 'D\u00E9velopper la sidebar' : 'R\u00E9duire la sidebar'\"\n        [attr.aria-expanded]=\"internalMode() === 'full'\"\n        (click)=\"toggleMode()\">\n        <fa-icon [icon]=\"internalMode() === 'collapsed' ? expandIcon : collapseIcon\" />\n      </button>\n    }\n\n    <!-- Close button (overlay mode) -->\n    @if (internalMode() === 'overlay' && isOverlayOpen()) {\n      <button\n        type=\"button\"\n        class=\"ds-sidebar__close-btn\"\n        aria-label=\"Fermer le menu\"\n        (click)=\"closeOverlay()\">\n        <fa-icon [icon]=\"collapseIcon\" />\n      </button>\n    }\n  </div>\n\n  <!-- Body (items) -->\n  <div class=\"ds-sidebar__body\" role=\"menubar\" aria-orientation=\"vertical\">\n    @for (item of items(); track item.id) {\n      <ds-sidebar-item\n        [item]=\"item\"\n        [level]=\"0\"\n        [mode]=\"internalMode()\"\n        [showTooltip]=\"showTooltips()\"\n        [sidebarPosition]=\"position()\"\n        [collapsedTrigger]=\"collapsedTrigger()\"\n        [expandedItemIds]=\"expandedItemIds()\"\n        [activeItemId]=\"activeItemId()\"\n        (itemClick)=\"handleItemClick($event)\"\n        (itemToggle)=\"handleItemToggle($event)\"\n        (itemKeydown)=\"handleItemKeydown($event)\" />\n    }\n  </div>\n\n  <!-- Footer -->\n  <div class=\"ds-sidebar__footer\">\n    <ng-content select=\"[sidebar-footer]\"></ng-content>\n  </div>\n</nav>\n\n<!-- Bouton expand (mode collapsed uniquement) - \u00E0 l'ext\u00E9rieur du nav pour \u00E9viter overflow:hidden -->\n@if (collapsible() && internalMode() === 'collapsed') {\n  <button\n    type=\"button\"\n    class=\"ds-sidebar__expand-btn\"\n    [class.ds-sidebar__expand-btn--left]=\"position() === 'right'\"\n    aria-label=\"D\u00E9velopper la sidebar\"\n    (click)=\"toggleMode()\">\n    <fa-icon [icon]=\"expandIcon\" />\n  </button>\n}\n\n<!-- Trigger button (overlay mode, quand ferm\u00E9) -->\n@if (internalMode() === 'overlay' && !isOverlayOpen()) {\n  <button\n    type=\"button\"\n    class=\"ds-sidebar__trigger\"\n    [class.ds-sidebar__trigger--left]=\"position() === 'left'\"\n    [class.ds-sidebar__trigger--right]=\"position() === 'right'\"\n    aria-label=\"Ouvrir le menu\"\n    aria-haspopup=\"menu\"\n    [attr.aria-expanded]=\"isOverlayOpen()\"\n    (click)=\"openOverlay()\">\n    <fa-icon [icon]=\"menuIcon\" />\n  </button>\n}\n", styles: [":host{display:flex;position:relative;height:100%}.ds-sidebar__backdrop{position:fixed;inset:0;background:var(--sidebar-backdrop-bg, rgba(0, 0, 0, .5));z-index:var(--z-index-full, 9999);opacity:0;animation:fadeIn var(--sidebar-transition-duration, var(--duration-normal, .2s)) ease forwards}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.ds-sidebar{display:flex;flex-direction:column;height:100%;position:relative;overflow:hidden;background:var(--sidebar-bg, var(--surface-default, #ffffff));color:var(--sidebar-text, var(--text-default, #1f2937));transition:width var(--sidebar-transition-duration, var(--duration-normal, .2s)) ease,transform var(--sidebar-transition-duration, var(--duration-normal, .2s)) ease}.ds-sidebar--left{border-right:1px solid var(--sidebar-border, var(--border-default, #e5e7eb))}.ds-sidebar--right{border-left:1px solid var(--sidebar-border, var(--border-default, #e5e7eb))}.ds-sidebar--full{width:var(--sidebar-width-md, 240px)}.ds-sidebar--full.ds-sidebar--sm{width:var(--sidebar-width-sm, 200px)}.ds-sidebar--full.ds-sidebar--lg{width:var(--sidebar-width-lg, 280px)}.ds-sidebar--collapsed{width:var(--sidebar-width-collapsed, 64px)}.ds-sidebar--collapsed .ds-sidebar__header,.ds-sidebar--collapsed .ds-sidebar__footer{padding:var(--space-2, .5rem);justify-content:center}.ds-sidebar--collapsed .ds-sidebar__toggle-btn{display:none}.ds-sidebar--overlay{position:fixed;top:0;bottom:0;z-index:var(--z-index-full, 9999);box-shadow:var(--sidebar-shadow, var(--shadow-3, 0 10px 25px rgba(0, 0, 0, .1)));transform:translate(-100%)}.ds-sidebar--overlay.ds-sidebar--left{left:0}.ds-sidebar--overlay.ds-sidebar--right{right:0;transform:translate(100%)}.ds-sidebar--overlay.ds-sidebar--overlay-open{transform:translate(0)}.ds-sidebar--overlay{width:var(--sidebar-width-md, 240px)}.ds-sidebar--overlay.ds-sidebar--sm{width:var(--sidebar-width-sm, 200px)}.ds-sidebar--overlay.ds-sidebar--lg{width:var(--sidebar-width-lg, 280px)}.ds-sidebar__header{display:flex;align-items:center;justify-content:space-between;padding:var(--sidebar-header-padding, var(--space-4, 1rem));border-bottom:1px solid var(--sidebar-border, var(--border-default, #e5e7eb));flex-shrink:0;min-height:60px;position:relative;z-index:1}:host ::ng-deep .ds-sidebar__header img{max-height:32px;width:auto}:host ::ng-deep .ds-sidebar__header h1,:host ::ng-deep .ds-sidebar__header h2,:host ::ng-deep .ds-sidebar__header h3{margin:0;font-size:var(--font-size-lg, 1.125rem);font-weight:600}.ds-sidebar__header .ds-sidebar-logo{max-height:32px;width:auto}.ds-sidebar__header .ds-sidebar-title{margin:0;font-size:var(--font-size-lg, 1.125rem);font-weight:600}.ds-sidebar__toggle-btn,.ds-sidebar__close-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:none;border-radius:var(--sidebar-item-radius, var(--radius-1-5, 6px));background:transparent;color:var(--sidebar-text, var(--text-default, #1f2937));cursor:pointer;transition:background-color var(--duration-fast, .15s) ease,color var(--duration-fast, .15s) ease;flex-shrink:0}.ds-sidebar__toggle-btn:hover,.ds-sidebar__close-btn:hover{background:var(--sidebar-item-hover-bg, var(--gray-100, rgba(0, 0, 0, .05)))}.ds-sidebar__toggle-btn:focus-visible,.ds-sidebar__close-btn:focus-visible{outline:2px solid var(--color-primary, #3b82f6);outline-offset:2px}.ds-sidebar__body{flex:1;overflow-y:auto;overflow-x:hidden;padding:var(--sidebar-body-padding, var(--space-2, .5rem))}.ds-sidebar__body::-webkit-scrollbar{width:6px}.ds-sidebar__body::-webkit-scrollbar-track{background:transparent}.ds-sidebar__body::-webkit-scrollbar-thumb{background:var(--sidebar-scrollbar-thumb, var(--gray-300, #d1d5db));border-radius:3px}.ds-sidebar__body::-webkit-scrollbar-thumb:hover{background:var(--sidebar-scrollbar-thumb-hover, var(--gray-400, #9ca3af))}.ds-sidebar__footer{padding:var(--sidebar-footer-padding, var(--space-4, 1rem));border-top:1px solid var(--sidebar-border, var(--border-default, #e5e7eb));flex-shrink:0}.ds-sidebar__footer:empty{display:none}:host ::ng-deep .ds-sidebar__footer button{width:100%}.ds-sidebar__footer .ds-sidebar-footer-btn{width:100%}.ds-sidebar__trigger{position:fixed;top:var(--space-4, 1rem);z-index:var(--z-index-3, 998);display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:none;border-radius:var(--radius-2, 8px);background:var(--sidebar-bg, var(--surface-default, #ffffff));color:var(--sidebar-text, var(--text-default, #1f2937));box-shadow:var(--sidebar-trigger-shadow, var(--shadow-2, 0 4px 12px rgba(0, 0, 0, .1)));cursor:pointer;transition:background-color var(--duration-fast, .15s) ease,transform var(--duration-fast, .15s) ease}.ds-sidebar__trigger--left{left:var(--space-4, 1rem)}.ds-sidebar__trigger--right{right:var(--space-4, 1rem)}.ds-sidebar__trigger:hover{background:var(--sidebar-item-hover-bg, var(--gray-100, rgba(0, 0, 0, .05)))}.ds-sidebar__trigger:active{transform:scale(.95)}.ds-sidebar__trigger:focus-visible{outline:2px solid var(--color-primary, #3b82f6);outline-offset:2px}.ds-sidebar__expand-btn{position:absolute;top:50%;left:var(--sidebar-width-collapsed, 64px);transform:translateY(-50%) translate(-50%);display:flex;align-items:center;justify-content:center;width:24px;height:48px;padding:0;border:none;border-radius:0 var(--sidebar-item-radius, var(--radius-1-5, 6px)) var(--sidebar-item-radius, var(--radius-1-5, 6px)) 0;background:var(--sidebar-bg, var(--surface-default, #ffffff));color:var(--sidebar-text, var(--text-default, #1f2937));cursor:pointer;box-shadow:var(--shadow-2, 0 4px 12px rgba(0, 0, 0, .1));z-index:2;transition:background-color var(--duration-fast, .15s) ease}.ds-sidebar__expand-btn:hover{background:var(--sidebar-item-hover-bg, var(--gray-100, rgba(0, 0, 0, .05)))}.ds-sidebar__expand-btn:focus-visible{outline:2px solid var(--color-primary, #3b82f6);outline-offset:2px}.ds-sidebar__expand-btn--left{left:auto;right:var(--sidebar-width-collapsed, 64px);transform:translateY(-50%) translate(50%);border-radius:var(--sidebar-item-radius, var(--radius-1-5, 6px)) 0 0 var(--sidebar-item-radius, var(--radius-1-5, 6px))}:host-context(.theme-dark) .ds-sidebar{background:var(--sidebar-bg, var(--surface-default));color:var(--sidebar-text, var(--text-default))}:host-context(.theme-dark) .ds-sidebar__backdrop{background:var(--sidebar-backdrop-bg, rgba(0, 0, 0, .7))}:host-context(.theme-dark) .ds-sidebar__trigger,:host-context(.theme-dark) .ds-sidebar__expand-btn{background:var(--sidebar-bg, var(--surface-default));color:var(--sidebar-text, var(--text-default))}@keyframes slideInLeft{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes slideInRight{0%{transform:translate(100%)}to{transform:translate(0)}}@media print{.ds-sidebar,.ds-sidebar__backdrop,.ds-sidebar__trigger{display:none!important}}::ng-deep .ds-sidebar-popover-backdrop{background:transparent}::ng-deep .ds-sidebar-popover-panel{z-index:var(--z-index-3, 1000)}:host ::ng-deep .ds-sidebar--collapsed .ds-sidebar__header .ds-sidebar-logo-text,:host ::ng-deep .ds-sidebar--collapsed .ds-sidebar__header .logo-text{display:none}:host ::ng-deep .ds-sidebar--collapsed .ds-sidebar__header .ds-sidebar-logo-icon,:host ::ng-deep .ds-sidebar--collapsed .ds-sidebar__header .logo-icon{margin:0 auto}:host ::ng-deep .ds-sidebar--collapsed .ds-sidebar__header .sidebar-logo{padding:0;justify-content:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i1$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }, { kind: "component", type: DsSidebarItemComponent, selector: "ds-sidebar-item", inputs: ["item", "level", "mode", "showTooltip", "expandedItemIds", "activeItemId", "sidebarPosition", "collapsedTrigger"], outputs: ["itemClick", "itemToggle", "itemKeydown"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DsSidebar, isStandalone: true, selector: "ds-sidebar", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, responsiveBreakpoint: { classPropertyName: "responsiveBreakpoint", publicName: "responsiveBreakpoint", isSignal: true, isRequired: false, transformFunction: null }, autoCollapseOnMobile: { classPropertyName: "autoCollapseOnMobile", publicName: "autoCollapseOnMobile", isSignal: true, isRequired: false, transformFunction: null }, showTooltips: { classPropertyName: "showTooltips", publicName: "showTooltips", isSignal: true, isRequired: false, transformFunction: null }, collapsedTrigger: { classPropertyName: "collapsedTrigger", publicName: "collapsedTrigger", isSignal: true, isRequired: false, transformFunction: null }, initialActiveItemId: { classPropertyName: "initialActiveItemId", publicName: "initialActiveItemId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick", itemExpand: "itemExpand", modeChange: "modeChange", overlayOpened: "overlayOpened", overlayClosed: "overlayClosed" }, viewQueries: [{ propertyName: "sidebarContainer", first: true, predicate: ["sidebarContainer"], descendants: true }, { propertyName: "itemComponents", predicate: DsSidebarItemComponent, descendants: true }], ngImport: i0, template: "<!-- Backdrop (mode overlay) -->\n@if (internalMode() === 'overlay' && isOverlayOpen()) {\n  <div\n    class=\"ds-sidebar__backdrop\"\n    (click)=\"handleBackdropClick()\"\n    aria-hidden=\"true\">\n  </div>\n}\n\n<!-- Sidebar container -->\n<nav\n  #sidebarContainer\n  [class]=\"containerClasses()\"\n  [attr.aria-label]=\"ariaLabel()\"\n  role=\"navigation\"\n  (keydown)=\"handleKeyDown($event)\">\n\n  <!-- Header -->\n  <div class=\"ds-sidebar__header\">\n    <ng-content select=\"[sidebar-header]\"></ng-content>\n\n    <!-- Toggle button -->\n    @if (collapsible() && internalMode() !== 'overlay') {\n      <button\n        type=\"button\"\n        class=\"ds-sidebar__toggle-btn\"\n        [attr.aria-label]=\"internalMode() === 'collapsed' ? 'D\u00E9velopper la sidebar' : 'R\u00E9duire la sidebar'\"\n        [attr.aria-expanded]=\"internalMode() === 'full'\"\n        (click)=\"toggleMode()\">\n        <fa-icon [icon]=\"internalMode() === 'collapsed' ? expandIcon : collapseIcon\" />\n      </button>\n    }\n\n    <!-- Close button (overlay mode) -->\n    @if (internalMode() === 'overlay' && isOverlayOpen()) {\n      <button\n        type=\"button\"\n        class=\"ds-sidebar__close-btn\"\n        aria-label=\"Fermer le menu\"\n        (click)=\"closeOverlay()\">\n        <fa-icon [icon]=\"collapseIcon\" />\n      </button>\n    }\n  </div>\n\n  <!-- Body (items) -->\n  <div class=\"ds-sidebar__body\" role=\"menubar\" aria-orientation=\"vertical\">\n    @for (item of items(); track item.id) {\n      <ds-sidebar-item\n        [item]=\"item\"\n        [level]=\"0\"\n        [mode]=\"internalMode()\"\n        [showTooltip]=\"showTooltips()\"\n        [sidebarPosition]=\"position()\"\n        [collapsedTrigger]=\"collapsedTrigger()\"\n        [expandedItemIds]=\"expandedItemIds()\"\n        [activeItemId]=\"activeItemId()\"\n        (itemClick)=\"handleItemClick($event)\"\n        (itemToggle)=\"handleItemToggle($event)\"\n        (itemKeydown)=\"handleItemKeydown($event)\" />\n    }\n  </div>\n\n  <!-- Footer -->\n  <div class=\"ds-sidebar__footer\">\n    <ng-content select=\"[sidebar-footer]\"></ng-content>\n  </div>\n</nav>\n\n<!-- Bouton expand (mode collapsed uniquement) - \u00E0 l'ext\u00E9rieur du nav pour \u00E9viter overflow:hidden -->\n@if (collapsible() && internalMode() === 'collapsed') {\n  <button\n    type=\"button\"\n    class=\"ds-sidebar__expand-btn\"\n    [class.ds-sidebar__expand-btn--left]=\"position() === 'right'\"\n    aria-label=\"D\u00E9velopper la sidebar\"\n    (click)=\"toggleMode()\">\n    <fa-icon [icon]=\"expandIcon\" />\n  </button>\n}\n\n<!-- Trigger button (overlay mode, quand ferm\u00E9) -->\n@if (internalMode() === 'overlay' && !isOverlayOpen()) {\n  <button\n    type=\"button\"\n    class=\"ds-sidebar__trigger\"\n    [class.ds-sidebar__trigger--left]=\"position() === 'left'\"\n    [class.ds-sidebar__trigger--right]=\"position() === 'right'\"\n    aria-label=\"Ouvrir le menu\"\n    aria-haspopup=\"menu\"\n    [attr.aria-expanded]=\"isOverlayOpen()\"\n    (click)=\"openOverlay()\">\n    <fa-icon [icon]=\"menuIcon\" />\n  </button>\n}\n", styles: [":host{display:flex;position:relative;height:100%}.ds-sidebar__backdrop{position:fixed;inset:0;background:var(--sidebar-backdrop-bg, rgba(0, 0, 0, .5));z-index:var(--z-index-full, 9999);opacity:0;animation:fadeIn var(--sidebar-transition-duration, var(--duration-normal, .2s)) ease forwards}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.ds-sidebar{display:flex;flex-direction:column;height:100%;position:relative;overflow:hidden;background:var(--sidebar-bg, var(--surface-default, #ffffff));color:var(--sidebar-text, var(--text-default, #1f2937));transition:width var(--sidebar-transition-duration, var(--duration-normal, .2s)) ease,transform var(--sidebar-transition-duration, var(--duration-normal, .2s)) ease}.ds-sidebar--left{border-right:1px solid var(--sidebar-border, var(--border-default, #e5e7eb))}.ds-sidebar--right{border-left:1px solid var(--sidebar-border, var(--border-default, #e5e7eb))}.ds-sidebar--full{width:var(--sidebar-width-md, 240px)}.ds-sidebar--full.ds-sidebar--sm{width:var(--sidebar-width-sm, 200px)}.ds-sidebar--full.ds-sidebar--lg{width:var(--sidebar-width-lg, 280px)}.ds-sidebar--collapsed{width:var(--sidebar-width-collapsed, 64px)}.ds-sidebar--collapsed .ds-sidebar__header,.ds-sidebar--collapsed .ds-sidebar__footer{padding:var(--space-2, .5rem);justify-content:center}.ds-sidebar--collapsed .ds-sidebar__toggle-btn{display:none}.ds-sidebar--overlay{position:fixed;top:0;bottom:0;z-index:var(--z-index-full, 9999);box-shadow:var(--sidebar-shadow, var(--shadow-3, 0 10px 25px rgba(0, 0, 0, .1)));transform:translate(-100%);width:var(--sidebar-width-md, 240px)}.ds-sidebar--overlay.ds-sidebar--left{left:0}.ds-sidebar--overlay.ds-sidebar--right{right:0;transform:translate(100%)}.ds-sidebar--overlay.ds-sidebar--overlay-open{transform:translate(0)}.ds-sidebar--overlay.ds-sidebar--sm{width:var(--sidebar-width-sm, 200px)}.ds-sidebar--overlay.ds-sidebar--lg{width:var(--sidebar-width-lg, 280px)}.ds-sidebar__header{display:flex;align-items:center;justify-content:space-between;padding:var(--sidebar-header-padding, var(--space-4, 1rem));border-bottom:1px solid var(--sidebar-border, var(--border-default, #e5e7eb));flex-shrink:0;min-height:60px;position:relative;z-index:1}:host ::ng-deep .ds-sidebar__header img{max-height:32px;width:auto}:host ::ng-deep .ds-sidebar__header h1,:host ::ng-deep .ds-sidebar__header h2,:host ::ng-deep .ds-sidebar__header h3{margin:0;font-size:var(--font-size-lg, 1.125rem);font-weight:600}.ds-sidebar__header .ds-sidebar-logo{max-height:32px;width:auto}.ds-sidebar__header .ds-sidebar-title{margin:0;font-size:var(--font-size-lg, 1.125rem);font-weight:600}.ds-sidebar__toggle-btn,.ds-sidebar__close-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:none;border-radius:var(--sidebar-item-radius, var(--radius-1-5, 6px));background:transparent;color:var(--sidebar-text, var(--text-default, #1f2937));cursor:pointer;transition:background-color var(--duration-fast, .15s) ease,color var(--duration-fast, .15s) ease;flex-shrink:0}.ds-sidebar__toggle-btn:hover,.ds-sidebar__close-btn:hover{background:var(--sidebar-item-hover-bg, var(--gray-100, rgba(0, 0, 0, .05)))}.ds-sidebar__toggle-btn:focus-visible,.ds-sidebar__close-btn:focus-visible{outline:2px solid var(--color-primary, #3b82f6);outline-offset:2px}.ds-sidebar__body{flex:1;overflow-y:auto;overflow-x:hidden;padding:var(--sidebar-body-padding, var(--space-2, .5rem))}.ds-sidebar__body::-webkit-scrollbar{width:6px}.ds-sidebar__body::-webkit-scrollbar-track{background:transparent}.ds-sidebar__body::-webkit-scrollbar-thumb{background:var(--sidebar-scrollbar-thumb, var(--gray-300, #d1d5db));border-radius:3px}.ds-sidebar__body::-webkit-scrollbar-thumb:hover{background:var(--sidebar-scrollbar-thumb-hover, var(--gray-400, #9ca3af))}.ds-sidebar__footer{padding:var(--sidebar-footer-padding, var(--space-4, 1rem));border-top:1px solid var(--sidebar-border, var(--border-default, #e5e7eb));flex-shrink:0}.ds-sidebar__footer:empty{display:none}:host ::ng-deep .ds-sidebar__footer button{width:100%}.ds-sidebar__footer .ds-sidebar-footer-btn{width:100%}.ds-sidebar__trigger{position:fixed;top:var(--space-4, 1rem);z-index:var(--z-index-3, 998);display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:none;border-radius:var(--radius-2, 8px);background:var(--sidebar-bg, var(--surface-default, #ffffff));color:var(--sidebar-text, var(--text-default, #1f2937));box-shadow:var(--sidebar-trigger-shadow, var(--shadow-2, 0 4px 12px rgba(0, 0, 0, .1)));cursor:pointer;transition:background-color var(--duration-fast, .15s) ease,transform var(--duration-fast, .15s) ease}.ds-sidebar__trigger--left{left:var(--space-4, 1rem)}.ds-sidebar__trigger--right{right:var(--space-4, 1rem)}.ds-sidebar__trigger:hover{background:var(--sidebar-item-hover-bg, var(--gray-100, rgba(0, 0, 0, .05)))}.ds-sidebar__trigger:active{transform:scale(.95)}.ds-sidebar__trigger:focus-visible{outline:2px solid var(--color-primary, #3b82f6);outline-offset:2px}.ds-sidebar__expand-btn{position:absolute;top:50%;left:var(--sidebar-width-collapsed, 64px);transform:translateY(-50%) translate(-50%);display:flex;align-items:center;justify-content:center;width:24px;height:48px;padding:0;border:none;border-radius:0 var(--sidebar-item-radius, var(--radius-1-5, 6px)) var(--sidebar-item-radius, var(--radius-1-5, 6px)) 0;background:var(--sidebar-bg, var(--surface-default, #ffffff));color:var(--sidebar-text, var(--text-default, #1f2937));cursor:pointer;box-shadow:var(--shadow-2, 0 4px 12px rgba(0, 0, 0, .1));z-index:2;transition:background-color var(--duration-fast, .15s) ease}.ds-sidebar__expand-btn:hover{background:var(--sidebar-item-hover-bg, var(--gray-100, rgba(0, 0, 0, .05)))}.ds-sidebar__expand-btn:focus-visible{outline:2px solid var(--color-primary, #3b82f6);outline-offset:2px}.ds-sidebar__expand-btn--left{left:auto;right:var(--sidebar-width-collapsed, 64px);transform:translateY(-50%) translate(50%);border-radius:var(--sidebar-item-radius, var(--radius-1-5, 6px)) 0 0 var(--sidebar-item-radius, var(--radius-1-5, 6px))}:host-context(.theme-dark) .ds-sidebar{background:var(--sidebar-bg, var(--surface-default));color:var(--sidebar-text, var(--text-default))}:host-context(.theme-dark) .ds-sidebar__backdrop{background:var(--sidebar-backdrop-bg, rgba(0, 0, 0, .7))}:host-context(.theme-dark) .ds-sidebar__trigger,:host-context(.theme-dark) .ds-sidebar__expand-btn{background:var(--sidebar-bg, var(--surface-default));color:var(--sidebar-text, var(--text-default))}@keyframes slideInLeft{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes slideInRight{0%{transform:translate(100%)}to{transform:translate(0)}}@media print{.ds-sidebar,.ds-sidebar__backdrop,.ds-sidebar__trigger{display:none!important}}::ng-deep .ds-sidebar-popover-backdrop{background:transparent}::ng-deep .ds-sidebar-popover-panel{z-index:var(--z-index-3, 1000)}:host ::ng-deep .ds-sidebar--collapsed .ds-sidebar__header .ds-sidebar-logo-text,:host ::ng-deep .ds-sidebar--collapsed .ds-sidebar__header .logo-text{display:none}:host ::ng-deep .ds-sidebar--collapsed .ds-sidebar__header .ds-sidebar-logo-icon,:host ::ng-deep .ds-sidebar--collapsed .ds-sidebar__header .logo-icon{margin:0 auto}:host ::ng-deep .ds-sidebar--collapsed .ds-sidebar__header .sidebar-logo{padding:0;justify-content:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i1$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }, { kind: "component", type: DsSidebarItemComponent, selector: "ds-sidebar-item", inputs: ["item", "level", "mode", "showTooltip", "expandedItemIds", "activeItemId", "sidebarPosition", "collapsedTrigger"], outputs: ["itemClick", "itemToggle", "itemKeydown"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsSidebar, decorators: [{
             type: Component,
-            args: [{ selector: 'ds-sidebar', standalone: true, imports: [CommonModule, FontAwesomeModule, DsSidebarItemComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Backdrop (mode overlay) -->\n@if (internalMode() === 'overlay' && isOverlayOpen()) {\n  <div\n    class=\"ds-sidebar__backdrop\"\n    (click)=\"handleBackdropClick()\"\n    aria-hidden=\"true\">\n  </div>\n}\n\n<!-- Sidebar container -->\n<nav\n  #sidebarContainer\n  [class]=\"containerClasses()\"\n  [attr.aria-label]=\"ariaLabel()\"\n  role=\"navigation\"\n  (keydown)=\"handleKeyDown($event)\">\n\n  <!-- Header -->\n  <div class=\"ds-sidebar__header\">\n    <ng-content select=\"[sidebar-header]\"></ng-content>\n\n    <!-- Toggle button -->\n    @if (collapsible() && internalMode() !== 'overlay') {\n      <button\n        type=\"button\"\n        class=\"ds-sidebar__toggle-btn\"\n        [attr.aria-label]=\"internalMode() === 'collapsed' ? 'D\u00E9velopper la sidebar' : 'R\u00E9duire la sidebar'\"\n        [attr.aria-expanded]=\"internalMode() === 'full'\"\n        (click)=\"toggleMode()\">\n        <fa-icon [icon]=\"internalMode() === 'collapsed' ? expandIcon : collapseIcon\" />\n      </button>\n    }\n\n    <!-- Close button (overlay mode) -->\n    @if (internalMode() === 'overlay' && isOverlayOpen()) {\n      <button\n        type=\"button\"\n        class=\"ds-sidebar__close-btn\"\n        aria-label=\"Fermer le menu\"\n        (click)=\"closeOverlay()\">\n        <fa-icon [icon]=\"collapseIcon\" />\n      </button>\n    }\n  </div>\n\n  <!-- Body (items) -->\n  <div class=\"ds-sidebar__body\" role=\"menubar\" aria-orientation=\"vertical\">\n    @for (item of items(); track item.id) {\n      <ds-sidebar-item\n        [item]=\"item\"\n        [level]=\"0\"\n        [mode]=\"internalMode()\"\n        [showTooltip]=\"showTooltips()\"\n        [sidebarPosition]=\"position()\"\n        [collapsedTrigger]=\"collapsedTrigger()\"\n        [expandedItemIds]=\"expandedItemIds()\"\n        [activeItemId]=\"activeItemId()\"\n        (itemClick)=\"handleItemClick($event)\"\n        (itemToggle)=\"handleItemToggle($event)\"\n        (itemKeydown)=\"handleItemKeydown($event)\" />\n    }\n  </div>\n\n  <!-- Footer -->\n  <div class=\"ds-sidebar__footer\">\n    <ng-content select=\"[sidebar-footer]\"></ng-content>\n  </div>\n</nav>\n\n<!-- Bouton expand (mode collapsed uniquement) - \u00E0 l'ext\u00E9rieur du nav pour \u00E9viter overflow:hidden -->\n@if (collapsible() && internalMode() === 'collapsed') {\n  <button\n    type=\"button\"\n    class=\"ds-sidebar__expand-btn\"\n    [class.ds-sidebar__expand-btn--left]=\"position() === 'right'\"\n    aria-label=\"D\u00E9velopper la sidebar\"\n    (click)=\"toggleMode()\">\n    <fa-icon [icon]=\"expandIcon\" />\n  </button>\n}\n\n<!-- Trigger button (overlay mode, quand ferm\u00E9) -->\n@if (internalMode() === 'overlay' && !isOverlayOpen()) {\n  <button\n    type=\"button\"\n    class=\"ds-sidebar__trigger\"\n    [class.ds-sidebar__trigger--left]=\"position() === 'left'\"\n    [class.ds-sidebar__trigger--right]=\"position() === 'right'\"\n    aria-label=\"Ouvrir le menu\"\n    aria-haspopup=\"menu\"\n    [attr.aria-expanded]=\"isOverlayOpen()\"\n    (click)=\"openOverlay()\">\n    <fa-icon [icon]=\"menuIcon\" />\n  </button>\n}\n", styles: [":host{display:flex;position:relative;height:100%}.ds-sidebar__backdrop{position:fixed;inset:0;background:var(--sidebar-backdrop-bg, rgba(0, 0, 0, .5));z-index:var(--z-index-full, 9999);opacity:0;animation:fadeIn var(--sidebar-transition-duration, var(--duration-normal, .2s)) ease forwards}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.ds-sidebar{display:flex;flex-direction:column;height:100%;position:relative;overflow:hidden;background:var(--sidebar-bg, var(--surface-default, #ffffff));color:var(--sidebar-text, var(--text-default, #1f2937));transition:width var(--sidebar-transition-duration, var(--duration-normal, .2s)) ease,transform var(--sidebar-transition-duration, var(--duration-normal, .2s)) ease}.ds-sidebar--left{border-right:1px solid var(--sidebar-border, var(--border-default, #e5e7eb))}.ds-sidebar--right{border-left:1px solid var(--sidebar-border, var(--border-default, #e5e7eb))}.ds-sidebar--full{width:var(--sidebar-width-md, 240px)}.ds-sidebar--full.ds-sidebar--sm{width:var(--sidebar-width-sm, 200px)}.ds-sidebar--full.ds-sidebar--lg{width:var(--sidebar-width-lg, 280px)}.ds-sidebar--collapsed{width:var(--sidebar-width-collapsed, 64px)}.ds-sidebar--collapsed .ds-sidebar__header,.ds-sidebar--collapsed .ds-sidebar__footer{padding:var(--space-2, .5rem);justify-content:center}.ds-sidebar--collapsed .ds-sidebar__toggle-btn{display:none}.ds-sidebar--overlay{position:fixed;top:0;bottom:0;z-index:var(--z-index-full, 9999);box-shadow:var(--sidebar-shadow, var(--shadow-3, 0 10px 25px rgba(0, 0, 0, .1)));transform:translate(-100%)}.ds-sidebar--overlay.ds-sidebar--left{left:0}.ds-sidebar--overlay.ds-sidebar--right{right:0;transform:translate(100%)}.ds-sidebar--overlay.ds-sidebar--overlay-open{transform:translate(0)}.ds-sidebar--overlay{width:var(--sidebar-width-md, 240px)}.ds-sidebar--overlay.ds-sidebar--sm{width:var(--sidebar-width-sm, 200px)}.ds-sidebar--overlay.ds-sidebar--lg{width:var(--sidebar-width-lg, 280px)}.ds-sidebar__header{display:flex;align-items:center;justify-content:space-between;padding:var(--sidebar-header-padding, var(--space-4, 1rem));border-bottom:1px solid var(--sidebar-border, var(--border-default, #e5e7eb));flex-shrink:0;min-height:60px;position:relative;z-index:1}:host ::ng-deep .ds-sidebar__header img{max-height:32px;width:auto}:host ::ng-deep .ds-sidebar__header h1,:host ::ng-deep .ds-sidebar__header h2,:host ::ng-deep .ds-sidebar__header h3{margin:0;font-size:var(--font-size-lg, 1.125rem);font-weight:600}.ds-sidebar__header .ds-sidebar-logo{max-height:32px;width:auto}.ds-sidebar__header .ds-sidebar-title{margin:0;font-size:var(--font-size-lg, 1.125rem);font-weight:600}.ds-sidebar__toggle-btn,.ds-sidebar__close-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:none;border-radius:var(--sidebar-item-radius, var(--radius-1-5, 6px));background:transparent;color:var(--sidebar-text, var(--text-default, #1f2937));cursor:pointer;transition:background-color var(--duration-fast, .15s) ease,color var(--duration-fast, .15s) ease;flex-shrink:0}.ds-sidebar__toggle-btn:hover,.ds-sidebar__close-btn:hover{background:var(--sidebar-item-hover-bg, var(--gray-100, rgba(0, 0, 0, .05)))}.ds-sidebar__toggle-btn:focus-visible,.ds-sidebar__close-btn:focus-visible{outline:2px solid var(--color-primary, #3b82f6);outline-offset:2px}.ds-sidebar__body{flex:1;overflow-y:auto;overflow-x:hidden;padding:var(--sidebar-body-padding, var(--space-2, .5rem))}.ds-sidebar__body::-webkit-scrollbar{width:6px}.ds-sidebar__body::-webkit-scrollbar-track{background:transparent}.ds-sidebar__body::-webkit-scrollbar-thumb{background:var(--sidebar-scrollbar-thumb, var(--gray-300, #d1d5db));border-radius:3px}.ds-sidebar__body::-webkit-scrollbar-thumb:hover{background:var(--sidebar-scrollbar-thumb-hover, var(--gray-400, #9ca3af))}.ds-sidebar__footer{padding:var(--sidebar-footer-padding, var(--space-4, 1rem));border-top:1px solid var(--sidebar-border, var(--border-default, #e5e7eb));flex-shrink:0}.ds-sidebar__footer:empty{display:none}:host ::ng-deep .ds-sidebar__footer button{width:100%}.ds-sidebar__footer .ds-sidebar-footer-btn{width:100%}.ds-sidebar__trigger{position:fixed;top:var(--space-4, 1rem);z-index:var(--z-index-3, 998);display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:none;border-radius:var(--radius-2, 8px);background:var(--sidebar-bg, var(--surface-default, #ffffff));color:var(--sidebar-text, var(--text-default, #1f2937));box-shadow:var(--sidebar-trigger-shadow, var(--shadow-2, 0 4px 12px rgba(0, 0, 0, .1)));cursor:pointer;transition:background-color var(--duration-fast, .15s) ease,transform var(--duration-fast, .15s) ease}.ds-sidebar__trigger--left{left:var(--space-4, 1rem)}.ds-sidebar__trigger--right{right:var(--space-4, 1rem)}.ds-sidebar__trigger:hover{background:var(--sidebar-item-hover-bg, var(--gray-100, rgba(0, 0, 0, .05)))}.ds-sidebar__trigger:active{transform:scale(.95)}.ds-sidebar__trigger:focus-visible{outline:2px solid var(--color-primary, #3b82f6);outline-offset:2px}.ds-sidebar__expand-btn{position:absolute;top:50%;left:var(--sidebar-width-collapsed, 64px);transform:translateY(-50%) translate(-50%);display:flex;align-items:center;justify-content:center;width:24px;height:48px;padding:0;border:none;border-radius:0 var(--sidebar-item-radius, var(--radius-1-5, 6px)) var(--sidebar-item-radius, var(--radius-1-5, 6px)) 0;background:var(--sidebar-bg, var(--surface-default, #ffffff));color:var(--sidebar-text, var(--text-default, #1f2937));cursor:pointer;box-shadow:var(--shadow-2, 0 4px 12px rgba(0, 0, 0, .1));z-index:2;transition:background-color var(--duration-fast, .15s) ease}.ds-sidebar__expand-btn:hover{background:var(--sidebar-item-hover-bg, var(--gray-100, rgba(0, 0, 0, .05)))}.ds-sidebar__expand-btn:focus-visible{outline:2px solid var(--color-primary, #3b82f6);outline-offset:2px}.ds-sidebar__expand-btn--left{left:auto;right:var(--sidebar-width-collapsed, 64px);transform:translateY(-50%) translate(50%);border-radius:var(--sidebar-item-radius, var(--radius-1-5, 6px)) 0 0 var(--sidebar-item-radius, var(--radius-1-5, 6px))}:host-context(.theme-dark) .ds-sidebar{background:var(--sidebar-bg, var(--surface-default));color:var(--sidebar-text, var(--text-default))}:host-context(.theme-dark) .ds-sidebar__backdrop{background:var(--sidebar-backdrop-bg, rgba(0, 0, 0, .7))}:host-context(.theme-dark) .ds-sidebar__trigger,:host-context(.theme-dark) .ds-sidebar__expand-btn{background:var(--sidebar-bg, var(--surface-default));color:var(--sidebar-text, var(--text-default))}@keyframes slideInLeft{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes slideInRight{0%{transform:translate(100%)}to{transform:translate(0)}}@media print{.ds-sidebar,.ds-sidebar__backdrop,.ds-sidebar__trigger{display:none!important}}::ng-deep .ds-sidebar-popover-backdrop{background:transparent}::ng-deep .ds-sidebar-popover-panel{z-index:var(--z-index-3, 1000)}:host ::ng-deep .ds-sidebar--collapsed .ds-sidebar__header .ds-sidebar-logo-text,:host ::ng-deep .ds-sidebar--collapsed .ds-sidebar__header .logo-text{display:none}:host ::ng-deep .ds-sidebar--collapsed .ds-sidebar__header .ds-sidebar-logo-icon,:host ::ng-deep .ds-sidebar--collapsed .ds-sidebar__header .logo-icon{margin:0 auto}:host ::ng-deep .ds-sidebar--collapsed .ds-sidebar__header .sidebar-logo{padding:0;justify-content:center}\n"] }]
+            args: [{ selector: 'ds-sidebar', standalone: true, imports: [CommonModule, FontAwesomeModule, DsSidebarItemComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Backdrop (mode overlay) -->\n@if (internalMode() === 'overlay' && isOverlayOpen()) {\n  <div\n    class=\"ds-sidebar__backdrop\"\n    (click)=\"handleBackdropClick()\"\n    aria-hidden=\"true\">\n  </div>\n}\n\n<!-- Sidebar container -->\n<nav\n  #sidebarContainer\n  [class]=\"containerClasses()\"\n  [attr.aria-label]=\"ariaLabel()\"\n  role=\"navigation\"\n  (keydown)=\"handleKeyDown($event)\">\n\n  <!-- Header -->\n  <div class=\"ds-sidebar__header\">\n    <ng-content select=\"[sidebar-header]\"></ng-content>\n\n    <!-- Toggle button -->\n    @if (collapsible() && internalMode() !== 'overlay') {\n      <button\n        type=\"button\"\n        class=\"ds-sidebar__toggle-btn\"\n        [attr.aria-label]=\"internalMode() === 'collapsed' ? 'D\u00E9velopper la sidebar' : 'R\u00E9duire la sidebar'\"\n        [attr.aria-expanded]=\"internalMode() === 'full'\"\n        (click)=\"toggleMode()\">\n        <fa-icon [icon]=\"internalMode() === 'collapsed' ? expandIcon : collapseIcon\" />\n      </button>\n    }\n\n    <!-- Close button (overlay mode) -->\n    @if (internalMode() === 'overlay' && isOverlayOpen()) {\n      <button\n        type=\"button\"\n        class=\"ds-sidebar__close-btn\"\n        aria-label=\"Fermer le menu\"\n        (click)=\"closeOverlay()\">\n        <fa-icon [icon]=\"collapseIcon\" />\n      </button>\n    }\n  </div>\n\n  <!-- Body (items) -->\n  <div class=\"ds-sidebar__body\" role=\"menubar\" aria-orientation=\"vertical\">\n    @for (item of items(); track item.id) {\n      <ds-sidebar-item\n        [item]=\"item\"\n        [level]=\"0\"\n        [mode]=\"internalMode()\"\n        [showTooltip]=\"showTooltips()\"\n        [sidebarPosition]=\"position()\"\n        [collapsedTrigger]=\"collapsedTrigger()\"\n        [expandedItemIds]=\"expandedItemIds()\"\n        [activeItemId]=\"activeItemId()\"\n        (itemClick)=\"handleItemClick($event)\"\n        (itemToggle)=\"handleItemToggle($event)\"\n        (itemKeydown)=\"handleItemKeydown($event)\" />\n    }\n  </div>\n\n  <!-- Footer -->\n  <div class=\"ds-sidebar__footer\">\n    <ng-content select=\"[sidebar-footer]\"></ng-content>\n  </div>\n</nav>\n\n<!-- Bouton expand (mode collapsed uniquement) - \u00E0 l'ext\u00E9rieur du nav pour \u00E9viter overflow:hidden -->\n@if (collapsible() && internalMode() === 'collapsed') {\n  <button\n    type=\"button\"\n    class=\"ds-sidebar__expand-btn\"\n    [class.ds-sidebar__expand-btn--left]=\"position() === 'right'\"\n    aria-label=\"D\u00E9velopper la sidebar\"\n    (click)=\"toggleMode()\">\n    <fa-icon [icon]=\"expandIcon\" />\n  </button>\n}\n\n<!-- Trigger button (overlay mode, quand ferm\u00E9) -->\n@if (internalMode() === 'overlay' && !isOverlayOpen()) {\n  <button\n    type=\"button\"\n    class=\"ds-sidebar__trigger\"\n    [class.ds-sidebar__trigger--left]=\"position() === 'left'\"\n    [class.ds-sidebar__trigger--right]=\"position() === 'right'\"\n    aria-label=\"Ouvrir le menu\"\n    aria-haspopup=\"menu\"\n    [attr.aria-expanded]=\"isOverlayOpen()\"\n    (click)=\"openOverlay()\">\n    <fa-icon [icon]=\"menuIcon\" />\n  </button>\n}\n", styles: [":host{display:flex;position:relative;height:100%}.ds-sidebar__backdrop{position:fixed;inset:0;background:var(--sidebar-backdrop-bg, rgba(0, 0, 0, .5));z-index:var(--z-index-full, 9999);opacity:0;animation:fadeIn var(--sidebar-transition-duration, var(--duration-normal, .2s)) ease forwards}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.ds-sidebar{display:flex;flex-direction:column;height:100%;position:relative;overflow:hidden;background:var(--sidebar-bg, var(--surface-default, #ffffff));color:var(--sidebar-text, var(--text-default, #1f2937));transition:width var(--sidebar-transition-duration, var(--duration-normal, .2s)) ease,transform var(--sidebar-transition-duration, var(--duration-normal, .2s)) ease}.ds-sidebar--left{border-right:1px solid var(--sidebar-border, var(--border-default, #e5e7eb))}.ds-sidebar--right{border-left:1px solid var(--sidebar-border, var(--border-default, #e5e7eb))}.ds-sidebar--full{width:var(--sidebar-width-md, 240px)}.ds-sidebar--full.ds-sidebar--sm{width:var(--sidebar-width-sm, 200px)}.ds-sidebar--full.ds-sidebar--lg{width:var(--sidebar-width-lg, 280px)}.ds-sidebar--collapsed{width:var(--sidebar-width-collapsed, 64px)}.ds-sidebar--collapsed .ds-sidebar__header,.ds-sidebar--collapsed .ds-sidebar__footer{padding:var(--space-2, .5rem);justify-content:center}.ds-sidebar--collapsed .ds-sidebar__toggle-btn{display:none}.ds-sidebar--overlay{position:fixed;top:0;bottom:0;z-index:var(--z-index-full, 9999);box-shadow:var(--sidebar-shadow, var(--shadow-3, 0 10px 25px rgba(0, 0, 0, .1)));transform:translate(-100%);width:var(--sidebar-width-md, 240px)}.ds-sidebar--overlay.ds-sidebar--left{left:0}.ds-sidebar--overlay.ds-sidebar--right{right:0;transform:translate(100%)}.ds-sidebar--overlay.ds-sidebar--overlay-open{transform:translate(0)}.ds-sidebar--overlay.ds-sidebar--sm{width:var(--sidebar-width-sm, 200px)}.ds-sidebar--overlay.ds-sidebar--lg{width:var(--sidebar-width-lg, 280px)}.ds-sidebar__header{display:flex;align-items:center;justify-content:space-between;padding:var(--sidebar-header-padding, var(--space-4, 1rem));border-bottom:1px solid var(--sidebar-border, var(--border-default, #e5e7eb));flex-shrink:0;min-height:60px;position:relative;z-index:1}:host ::ng-deep .ds-sidebar__header img{max-height:32px;width:auto}:host ::ng-deep .ds-sidebar__header h1,:host ::ng-deep .ds-sidebar__header h2,:host ::ng-deep .ds-sidebar__header h3{margin:0;font-size:var(--font-size-lg, 1.125rem);font-weight:600}.ds-sidebar__header .ds-sidebar-logo{max-height:32px;width:auto}.ds-sidebar__header .ds-sidebar-title{margin:0;font-size:var(--font-size-lg, 1.125rem);font-weight:600}.ds-sidebar__toggle-btn,.ds-sidebar__close-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:none;border-radius:var(--sidebar-item-radius, var(--radius-1-5, 6px));background:transparent;color:var(--sidebar-text, var(--text-default, #1f2937));cursor:pointer;transition:background-color var(--duration-fast, .15s) ease,color var(--duration-fast, .15s) ease;flex-shrink:0}.ds-sidebar__toggle-btn:hover,.ds-sidebar__close-btn:hover{background:var(--sidebar-item-hover-bg, var(--gray-100, rgba(0, 0, 0, .05)))}.ds-sidebar__toggle-btn:focus-visible,.ds-sidebar__close-btn:focus-visible{outline:2px solid var(--color-primary, #3b82f6);outline-offset:2px}.ds-sidebar__body{flex:1;overflow-y:auto;overflow-x:hidden;padding:var(--sidebar-body-padding, var(--space-2, .5rem))}.ds-sidebar__body::-webkit-scrollbar{width:6px}.ds-sidebar__body::-webkit-scrollbar-track{background:transparent}.ds-sidebar__body::-webkit-scrollbar-thumb{background:var(--sidebar-scrollbar-thumb, var(--gray-300, #d1d5db));border-radius:3px}.ds-sidebar__body::-webkit-scrollbar-thumb:hover{background:var(--sidebar-scrollbar-thumb-hover, var(--gray-400, #9ca3af))}.ds-sidebar__footer{padding:var(--sidebar-footer-padding, var(--space-4, 1rem));border-top:1px solid var(--sidebar-border, var(--border-default, #e5e7eb));flex-shrink:0}.ds-sidebar__footer:empty{display:none}:host ::ng-deep .ds-sidebar__footer button{width:100%}.ds-sidebar__footer .ds-sidebar-footer-btn{width:100%}.ds-sidebar__trigger{position:fixed;top:var(--space-4, 1rem);z-index:var(--z-index-3, 998);display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:none;border-radius:var(--radius-2, 8px);background:var(--sidebar-bg, var(--surface-default, #ffffff));color:var(--sidebar-text, var(--text-default, #1f2937));box-shadow:var(--sidebar-trigger-shadow, var(--shadow-2, 0 4px 12px rgba(0, 0, 0, .1)));cursor:pointer;transition:background-color var(--duration-fast, .15s) ease,transform var(--duration-fast, .15s) ease}.ds-sidebar__trigger--left{left:var(--space-4, 1rem)}.ds-sidebar__trigger--right{right:var(--space-4, 1rem)}.ds-sidebar__trigger:hover{background:var(--sidebar-item-hover-bg, var(--gray-100, rgba(0, 0, 0, .05)))}.ds-sidebar__trigger:active{transform:scale(.95)}.ds-sidebar__trigger:focus-visible{outline:2px solid var(--color-primary, #3b82f6);outline-offset:2px}.ds-sidebar__expand-btn{position:absolute;top:50%;left:var(--sidebar-width-collapsed, 64px);transform:translateY(-50%) translate(-50%);display:flex;align-items:center;justify-content:center;width:24px;height:48px;padding:0;border:none;border-radius:0 var(--sidebar-item-radius, var(--radius-1-5, 6px)) var(--sidebar-item-radius, var(--radius-1-5, 6px)) 0;background:var(--sidebar-bg, var(--surface-default, #ffffff));color:var(--sidebar-text, var(--text-default, #1f2937));cursor:pointer;box-shadow:var(--shadow-2, 0 4px 12px rgba(0, 0, 0, .1));z-index:2;transition:background-color var(--duration-fast, .15s) ease}.ds-sidebar__expand-btn:hover{background:var(--sidebar-item-hover-bg, var(--gray-100, rgba(0, 0, 0, .05)))}.ds-sidebar__expand-btn:focus-visible{outline:2px solid var(--color-primary, #3b82f6);outline-offset:2px}.ds-sidebar__expand-btn--left{left:auto;right:var(--sidebar-width-collapsed, 64px);transform:translateY(-50%) translate(50%);border-radius:var(--sidebar-item-radius, var(--radius-1-5, 6px)) 0 0 var(--sidebar-item-radius, var(--radius-1-5, 6px))}:host-context(.theme-dark) .ds-sidebar{background:var(--sidebar-bg, var(--surface-default));color:var(--sidebar-text, var(--text-default))}:host-context(.theme-dark) .ds-sidebar__backdrop{background:var(--sidebar-backdrop-bg, rgba(0, 0, 0, .7))}:host-context(.theme-dark) .ds-sidebar__trigger,:host-context(.theme-dark) .ds-sidebar__expand-btn{background:var(--sidebar-bg, var(--surface-default));color:var(--sidebar-text, var(--text-default))}@keyframes slideInLeft{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes slideInRight{0%{transform:translate(100%)}to{transform:translate(0)}}@media print{.ds-sidebar,.ds-sidebar__backdrop,.ds-sidebar__trigger{display:none!important}}::ng-deep .ds-sidebar-popover-backdrop{background:transparent}::ng-deep .ds-sidebar-popover-panel{z-index:var(--z-index-3, 1000)}:host ::ng-deep .ds-sidebar--collapsed .ds-sidebar__header .ds-sidebar-logo-text,:host ::ng-deep .ds-sidebar--collapsed .ds-sidebar__header .logo-text{display:none}:host ::ng-deep .ds-sidebar--collapsed .ds-sidebar__header .ds-sidebar-logo-icon,:host ::ng-deep .ds-sidebar--collapsed .ds-sidebar__header .logo-icon{margin:0 auto}:host ::ng-deep .ds-sidebar--collapsed .ds-sidebar__header .sidebar-logo{padding:0;justify-content:center}\n"] }]
         }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], responsiveBreakpoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "responsiveBreakpoint", required: false }] }], autoCollapseOnMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoCollapseOnMobile", required: false }] }], showTooltips: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTooltips", required: false }] }], collapsedTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsedTrigger", required: false }] }], initialActiveItemId: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialActiveItemId", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], itemExpand: [{ type: i0.Output, args: ["itemExpand"] }], modeChange: [{ type: i0.Output, args: ["modeChange"] }], overlayOpened: [{ type: i0.Output, args: ["overlayOpened"] }], overlayClosed: [{ type: i0.Output, args: ["overlayClosed"] }], sidebarContainer: [{
                 type: ViewChild,
                 args: ['sidebarContainer']
@@ -15542,11 +15544,11 @@ class DsListItem {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsListItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DsListItem, isStandalone: true, selector: "ds-list-item", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, indicator: { classPropertyName: "indicator", publicName: "indicator", isSignal: true, isRequired: false, transformFunction: null }, indicatorColor: { classPropertyName: "indicatorColor", publicName: "indicatorColor", isSignal: true, isRequired: false, transformFunction: null }, checkable: { classPropertyName: "checkable", publicName: "checkable", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, completed: { classPropertyName: "completed", publicName: "completed", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checkedChange: "checkedChange", clicked: "clicked" }, ngImport: i0, template: "<div\n  [class]=\"itemClasses()\"\n  [attr.role]=\"role()\"\n  [attr.tabindex]=\"tabindex()\"\n  [attr.aria-disabled]=\"disabled() || null\"\n  [attr.aria-selected]=\"selected() || null\"\n  (click)=\"handleClick($event)\"\n  (keydown)=\"handleKeyDown($event)\"\n>\n  <!-- Indicateur de priorit\u00E9/statut -->\n  @if (showIndicator()) {\n    <span\n      class=\"ds-list-item__indicator\"\n      [class.ds-list-item__indicator--bar]=\"isBarIndicator()\"\n      [class.ds-list-item__indicator--dot]=\"isDotIndicator()\"\n      [style.--indicator-color]=\"resolveIndicatorColor()\"\n      aria-hidden=\"true\"\n    ></span>\n  }\n\n  <!-- Checkbox -->\n  @if (checkable()) {\n    <primitive-checkbox\n      class=\"ds-list-item__checkbox\"\n      [checked]=\"checked()\"\n      [indeterminate]=\"indeterminate()\"\n      [disabled]=\"disabled()\"\n      size=\"sm\"\n      (checkedChange)=\"handleCheckedChange($event)\"\n      (click)=\"$event.stopPropagation()\"\n    />\n  }\n\n  <!-- Contenu principal -->\n  <div class=\"ds-list-item__content\">\n    <span class=\"ds-list-item__title\">{{ title() }}</span>\n\n    @if (subtitle()) {\n      <span class=\"ds-list-item__subtitle\">{{ subtitle() }}</span>\n    }\n\n    <!-- Slot pour contenu additionnel inline (tags, badges) -->\n    <ng-content select=\"[inline]\" />\n  </div>\n\n  <!-- Zone de m\u00E9tadonn\u00E9es (time, duration, etc.) -->\n  <div class=\"ds-list-item__meta\">\n    <ng-content select=\"[meta]\" />\n  </div>\n\n  <!-- Actions (boutons, menus) - visibles au hover -->\n  <div class=\"ds-list-item__actions\">\n    <ng-content select=\"[actions]\" />\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block}.ds-list-item{display:flex;align-items:center;gap:var(--space-2, 8px);padding:0 var(--space-3, 12px);border-radius:var(--radius-1, 4px);cursor:default;transition:background-color .15s ease}.ds-list-item--sm{height:32px}.ds-list-item--sm .ds-list-item__title{font-size:var(--font-size-1, 12px)}.ds-list-item--sm .ds-list-item__subtitle{font-size:var(--font-size-0, 11px)}.ds-list-item--sm .ds-list-item__indicator--bar{height:14px}.ds-list-item--sm .ds-list-item__indicator--dot{width:6px;height:6px}.ds-list-item--md{height:40px}.ds-list-item--md .ds-list-item__title{font-size:var(--font-size-2, 14px)}.ds-list-item--md .ds-list-item__subtitle{font-size:var(--font-size-1, 12px)}.ds-list-item--md .ds-list-item__indicator--bar{height:18px}.ds-list-item--md .ds-list-item__indicator--dot{width:8px;height:8px}.ds-list-item--lg{height:48px}.ds-list-item--lg .ds-list-item__title{font-size:var(--font-size-3, 16px)}.ds-list-item--lg .ds-list-item__subtitle{font-size:var(--font-size-2, 14px)}.ds-list-item--lg .ds-list-item__indicator--bar{height:22px}.ds-list-item--lg .ds-list-item__indicator--dot{width:10px;height:10px}.ds-list-item--clickable{cursor:pointer}.ds-list-item--clickable:hover{background-color:var(--background-hover, rgba(255, 255, 255, .08))}.ds-list-item--clickable:focus-visible{outline:2px solid var(--color-primary, #3b82f6);outline-offset:-2px}.ds-list-item--clickable:active{background-color:var(--background-active, rgba(255, 255, 255, .12))}.ds-list-item--completed .ds-list-item__title{color:var(--text-muted, #9ca3af);text-decoration:line-through}.ds-list-item--completed .ds-list-item__subtitle{text-decoration:line-through}.ds-list-item--completed .ds-list-item__meta{opacity:.5}.ds-list-item--disabled{opacity:.5;pointer-events:none;cursor:not-allowed}.ds-list-item--selected{background-color:var(--background-selected, rgba(59, 130, 246, .1))}.ds-list-item--selected:hover{background-color:var(--background-selected-hover, rgba(59, 130, 246, .15))}.ds-list-item__indicator{flex-shrink:0;background-color:var(--indicator-color, var(--color-neutral, #6b7280))}.ds-list-item__indicator--bar{width:3px;border-radius:2px}.ds-list-item__indicator--dot{border-radius:50%}.ds-list-item__checkbox{flex-shrink:0}.ds-list-item__content{flex:1;display:flex;align-items:center;gap:var(--space-2, 8px);min-width:0}.ds-list-item__title{font-weight:var(--font-weight-normal, 400);color:var(--text-default, #f3f4f6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ds-list-item__subtitle{color:var(--text-muted, #9ca3af);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ds-list-item__meta{display:flex;align-items:center;gap:var(--space-2, 8px);flex-shrink:0;font-size:var(--font-size-1, 12px);color:var(--text-muted, #9ca3af)}.ds-list-item__actions{display:flex;align-items:center;gap:var(--space-1, 4px);flex-shrink:0;opacity:0;transition:opacity .15s ease}.ds-list-item:hover .ds-list-item__actions,.ds-list-item:focus-within .ds-list-item__actions{opacity:1}::ng-deep [inline]{flex-shrink:0}::ng-deep [meta]{display:inline-flex;align-items:center}::ng-deep [actions]{display:inline-flex;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: PrimitiveCheckbox, selector: "primitive-checkbox", inputs: ["checked", "indeterminate", "disabled", "size", "label", "checkboxId"], outputs: ["checkedChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DsListItem, isStandalone: true, selector: "ds-list-item", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, indicator: { classPropertyName: "indicator", publicName: "indicator", isSignal: true, isRequired: false, transformFunction: null }, indicatorColor: { classPropertyName: "indicatorColor", publicName: "indicatorColor", isSignal: true, isRequired: false, transformFunction: null }, checkable: { classPropertyName: "checkable", publicName: "checkable", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, completed: { classPropertyName: "completed", publicName: "completed", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checkedChange: "checkedChange", clicked: "clicked" }, ngImport: i0, template: "<div\n  [class]=\"itemClasses()\"\n  [attr.role]=\"role()\"\n  [attr.tabindex]=\"tabindex()\"\n  [attr.aria-disabled]=\"disabled() || null\"\n  [attr.aria-selected]=\"selected() || null\"\n  (click)=\"handleClick($event)\"\n  (keydown)=\"handleKeyDown($event)\"\n>\n  <!-- Indicateur de priorit\u00E9/statut (toute la hauteur) -->\n  @if (showIndicator()) {\n    <span\n      class=\"ds-list-item__indicator\"\n      [class.ds-list-item__indicator--bar]=\"isBarIndicator()\"\n      [class.ds-list-item__indicator--dot]=\"isDotIndicator()\"\n      [style.--indicator-color]=\"resolveIndicatorColor()\"\n      aria-hidden=\"true\"\n    ></span>\n  }\n\n  <!-- Wrapper des lignes -->\n  <div class=\"ds-list-item__wrapper\">\n    <!-- Ligne 1 : Checkbox + Titre + Meta + Actions -->\n    <div class=\"ds-list-item__row ds-list-item__row--primary\">\n      <!-- Checkbox -->\n      @if (checkable()) {\n        <primitive-checkbox\n          class=\"ds-list-item__checkbox\"\n          [checked]=\"checked()\"\n          [indeterminate]=\"indeterminate()\"\n          [disabled]=\"disabled()\"\n          size=\"sm\"\n          (checkedChange)=\"handleCheckedChange($event)\"\n          (click)=\"$event.stopPropagation()\"\n        />\n      }\n\n      <!-- Contenu principal -->\n      <div class=\"ds-list-item__content\">\n        <span class=\"ds-list-item__title\">{{ title() }}</span>\n\n        @if (subtitle()) {\n          <span class=\"ds-list-item__subtitle\">{{ subtitle() }}</span>\n        }\n\n        <!-- Slot pour contenu additionnel inline (tags, badges) -->\n        <ng-content select=\"[inline]\" />\n      </div>\n\n      <!-- Zone de m\u00E9tadonn\u00E9es (time, duration, etc.) -->\n      <div class=\"ds-list-item__meta\">\n        <ng-content select=\"[meta]\" />\n      </div>\n\n      <!-- Actions (boutons, menus) - visibles au hover -->\n      <div class=\"ds-list-item__actions\">\n        <ng-content select=\"[actions]\" />\n      </div>\n    </div>\n\n    <!-- Ligne 2 : Contenu secondaire (optionnel) -->\n    <div class=\"ds-list-item__row ds-list-item__row--secondary\">\n      <ng-content select=\"[secondary]\" />\n    </div>\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block}.ds-list-item{display:flex;align-items:stretch;gap:var(--space-2, 8px);padding:0 var(--space-3, 12px);border-radius:var(--radius-1, 4px);cursor:default;transition:background-color .15s ease}.ds-list-item__wrapper{flex:1;display:flex;flex-direction:column;justify-content:center;min-width:0;padding:var(--space-2, 8px) 0}.ds-list-item__row{display:flex;align-items:center;gap:var(--space-2, 8px)}.ds-list-item__row--primary{min-height:24px}.ds-list-item__row--secondary{padding-left:calc(16px + var(--space-2, 8px));padding-top:var(--space-1, 4px)}.ds-list-item__row--secondary:empty{display:none}.ds-list-item--sm .ds-list-item__wrapper{padding:var(--space-1, 4px) 0}.ds-list-item--sm .ds-list-item__row--primary{min-height:20px}.ds-list-item--sm .ds-list-item__title{font-size:var(--font-size-1, 12px)}.ds-list-item--sm .ds-list-item__subtitle{font-size:var(--font-size-0, 11px)}.ds-list-item--sm .ds-list-item__indicator--bar{width:3px;align-self:stretch}.ds-list-item--sm .ds-list-item__indicator--dot{width:6px;height:6px}.ds-list-item--sm .ds-list-item__row--secondary{padding-left:calc(14px + var(--space-1, 4px))}.ds-list-item--md .ds-list-item__row--primary{min-height:24px}.ds-list-item--md .ds-list-item__title{font-size:var(--font-size-2, 14px)}.ds-list-item--md .ds-list-item__subtitle{font-size:var(--font-size-1, 12px)}.ds-list-item--md .ds-list-item__indicator--bar{width:3px;align-self:stretch}.ds-list-item--md .ds-list-item__indicator--dot{width:8px;height:8px}.ds-list-item--lg .ds-list-item__wrapper{padding:var(--space-3, 12px) 0}.ds-list-item--lg .ds-list-item__row--primary{min-height:28px}.ds-list-item--lg .ds-list-item__title{font-size:var(--font-size-3, 16px)}.ds-list-item--lg .ds-list-item__subtitle{font-size:var(--font-size-2, 14px)}.ds-list-item--lg .ds-list-item__indicator--bar{width:4px;align-self:stretch}.ds-list-item--lg .ds-list-item__indicator--dot{width:10px;height:10px}.ds-list-item--lg .ds-list-item__row--secondary{padding-left:calc(18px + var(--space-2, 8px))}.ds-list-item--clickable{cursor:pointer}.ds-list-item--clickable:hover{background-color:var(--background-hover, rgba(255, 255, 255, .08))}.ds-list-item--clickable:focus-visible{outline:2px solid var(--color-primary, #3b82f6);outline-offset:-2px}.ds-list-item--clickable:active{background-color:var(--background-active, rgba(255, 255, 255, .12))}.ds-list-item--completed .ds-list-item__title{color:var(--text-muted, #9ca3af);text-decoration:line-through}.ds-list-item--completed .ds-list-item__subtitle{text-decoration:line-through}.ds-list-item--completed .ds-list-item__meta{opacity:.5}.ds-list-item--disabled{opacity:.5;pointer-events:none;cursor:not-allowed}.ds-list-item--selected{background-color:var(--background-selected, rgba(59, 130, 246, .1))}.ds-list-item--selected:hover{background-color:var(--background-selected-hover, rgba(59, 130, 246, .15))}.ds-list-item__indicator{flex-shrink:0;background-color:var(--indicator-color, var(--color-neutral, #6b7280))}.ds-list-item__indicator--bar{width:3px;border-radius:2px;align-self:stretch}.ds-list-item__indicator--dot{border-radius:50%;align-self:center}.ds-list-item__checkbox{flex-shrink:0}.ds-list-item__content{flex:1;display:flex;align-items:center;gap:var(--space-2, 8px);min-width:0}.ds-list-item__title{font-weight:var(--font-weight-normal, 400);color:var(--text-default, #f3f4f6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ds-list-item__subtitle{color:var(--text-muted, #9ca3af);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ds-list-item__meta{display:flex;align-items:center;gap:var(--space-2, 8px);flex-shrink:0;font-size:var(--font-size-1, 12px);color:var(--text-muted, #9ca3af)}.ds-list-item__actions{display:flex;align-items:center;gap:var(--space-1, 4px);flex-shrink:0;opacity:0;transition:opacity .15s ease}.ds-list-item:hover .ds-list-item__actions,.ds-list-item:focus-within .ds-list-item__actions{opacity:1}::ng-deep [inline]{flex-shrink:0}::ng-deep [meta]{display:inline-flex;align-items:center}::ng-deep [actions]{display:inline-flex;align-items:center}::ng-deep [secondary]{display:flex;align-items:center;gap:var(--space-1, 4px);flex-wrap:wrap}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: PrimitiveCheckbox, selector: "primitive-checkbox", inputs: ["checked", "indeterminate", "disabled", "size", "label", "checkboxId"], outputs: ["checkedChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsListItem, decorators: [{
             type: Component,
-            args: [{ selector: 'ds-list-item', standalone: true, imports: [CommonModule, PrimitiveCheckbox], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  [class]=\"itemClasses()\"\n  [attr.role]=\"role()\"\n  [attr.tabindex]=\"tabindex()\"\n  [attr.aria-disabled]=\"disabled() || null\"\n  [attr.aria-selected]=\"selected() || null\"\n  (click)=\"handleClick($event)\"\n  (keydown)=\"handleKeyDown($event)\"\n>\n  <!-- Indicateur de priorit\u00E9/statut -->\n  @if (showIndicator()) {\n    <span\n      class=\"ds-list-item__indicator\"\n      [class.ds-list-item__indicator--bar]=\"isBarIndicator()\"\n      [class.ds-list-item__indicator--dot]=\"isDotIndicator()\"\n      [style.--indicator-color]=\"resolveIndicatorColor()\"\n      aria-hidden=\"true\"\n    ></span>\n  }\n\n  <!-- Checkbox -->\n  @if (checkable()) {\n    <primitive-checkbox\n      class=\"ds-list-item__checkbox\"\n      [checked]=\"checked()\"\n      [indeterminate]=\"indeterminate()\"\n      [disabled]=\"disabled()\"\n      size=\"sm\"\n      (checkedChange)=\"handleCheckedChange($event)\"\n      (click)=\"$event.stopPropagation()\"\n    />\n  }\n\n  <!-- Contenu principal -->\n  <div class=\"ds-list-item__content\">\n    <span class=\"ds-list-item__title\">{{ title() }}</span>\n\n    @if (subtitle()) {\n      <span class=\"ds-list-item__subtitle\">{{ subtitle() }}</span>\n    }\n\n    <!-- Slot pour contenu additionnel inline (tags, badges) -->\n    <ng-content select=\"[inline]\" />\n  </div>\n\n  <!-- Zone de m\u00E9tadonn\u00E9es (time, duration, etc.) -->\n  <div class=\"ds-list-item__meta\">\n    <ng-content select=\"[meta]\" />\n  </div>\n\n  <!-- Actions (boutons, menus) - visibles au hover -->\n  <div class=\"ds-list-item__actions\">\n    <ng-content select=\"[actions]\" />\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block}.ds-list-item{display:flex;align-items:center;gap:var(--space-2, 8px);padding:0 var(--space-3, 12px);border-radius:var(--radius-1, 4px);cursor:default;transition:background-color .15s ease}.ds-list-item--sm{height:32px}.ds-list-item--sm .ds-list-item__title{font-size:var(--font-size-1, 12px)}.ds-list-item--sm .ds-list-item__subtitle{font-size:var(--font-size-0, 11px)}.ds-list-item--sm .ds-list-item__indicator--bar{height:14px}.ds-list-item--sm .ds-list-item__indicator--dot{width:6px;height:6px}.ds-list-item--md{height:40px}.ds-list-item--md .ds-list-item__title{font-size:var(--font-size-2, 14px)}.ds-list-item--md .ds-list-item__subtitle{font-size:var(--font-size-1, 12px)}.ds-list-item--md .ds-list-item__indicator--bar{height:18px}.ds-list-item--md .ds-list-item__indicator--dot{width:8px;height:8px}.ds-list-item--lg{height:48px}.ds-list-item--lg .ds-list-item__title{font-size:var(--font-size-3, 16px)}.ds-list-item--lg .ds-list-item__subtitle{font-size:var(--font-size-2, 14px)}.ds-list-item--lg .ds-list-item__indicator--bar{height:22px}.ds-list-item--lg .ds-list-item__indicator--dot{width:10px;height:10px}.ds-list-item--clickable{cursor:pointer}.ds-list-item--clickable:hover{background-color:var(--background-hover, rgba(255, 255, 255, .08))}.ds-list-item--clickable:focus-visible{outline:2px solid var(--color-primary, #3b82f6);outline-offset:-2px}.ds-list-item--clickable:active{background-color:var(--background-active, rgba(255, 255, 255, .12))}.ds-list-item--completed .ds-list-item__title{color:var(--text-muted, #9ca3af);text-decoration:line-through}.ds-list-item--completed .ds-list-item__subtitle{text-decoration:line-through}.ds-list-item--completed .ds-list-item__meta{opacity:.5}.ds-list-item--disabled{opacity:.5;pointer-events:none;cursor:not-allowed}.ds-list-item--selected{background-color:var(--background-selected, rgba(59, 130, 246, .1))}.ds-list-item--selected:hover{background-color:var(--background-selected-hover, rgba(59, 130, 246, .15))}.ds-list-item__indicator{flex-shrink:0;background-color:var(--indicator-color, var(--color-neutral, #6b7280))}.ds-list-item__indicator--bar{width:3px;border-radius:2px}.ds-list-item__indicator--dot{border-radius:50%}.ds-list-item__checkbox{flex-shrink:0}.ds-list-item__content{flex:1;display:flex;align-items:center;gap:var(--space-2, 8px);min-width:0}.ds-list-item__title{font-weight:var(--font-weight-normal, 400);color:var(--text-default, #f3f4f6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ds-list-item__subtitle{color:var(--text-muted, #9ca3af);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ds-list-item__meta{display:flex;align-items:center;gap:var(--space-2, 8px);flex-shrink:0;font-size:var(--font-size-1, 12px);color:var(--text-muted, #9ca3af)}.ds-list-item__actions{display:flex;align-items:center;gap:var(--space-1, 4px);flex-shrink:0;opacity:0;transition:opacity .15s ease}.ds-list-item:hover .ds-list-item__actions,.ds-list-item:focus-within .ds-list-item__actions{opacity:1}::ng-deep [inline]{flex-shrink:0}::ng-deep [meta]{display:inline-flex;align-items:center}::ng-deep [actions]{display:inline-flex;align-items:center}\n"] }]
+            args: [{ selector: 'ds-list-item', standalone: true, imports: [CommonModule, PrimitiveCheckbox], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  [class]=\"itemClasses()\"\n  [attr.role]=\"role()\"\n  [attr.tabindex]=\"tabindex()\"\n  [attr.aria-disabled]=\"disabled() || null\"\n  [attr.aria-selected]=\"selected() || null\"\n  (click)=\"handleClick($event)\"\n  (keydown)=\"handleKeyDown($event)\"\n>\n  <!-- Indicateur de priorit\u00E9/statut (toute la hauteur) -->\n  @if (showIndicator()) {\n    <span\n      class=\"ds-list-item__indicator\"\n      [class.ds-list-item__indicator--bar]=\"isBarIndicator()\"\n      [class.ds-list-item__indicator--dot]=\"isDotIndicator()\"\n      [style.--indicator-color]=\"resolveIndicatorColor()\"\n      aria-hidden=\"true\"\n    ></span>\n  }\n\n  <!-- Wrapper des lignes -->\n  <div class=\"ds-list-item__wrapper\">\n    <!-- Ligne 1 : Checkbox + Titre + Meta + Actions -->\n    <div class=\"ds-list-item__row ds-list-item__row--primary\">\n      <!-- Checkbox -->\n      @if (checkable()) {\n        <primitive-checkbox\n          class=\"ds-list-item__checkbox\"\n          [checked]=\"checked()\"\n          [indeterminate]=\"indeterminate()\"\n          [disabled]=\"disabled()\"\n          size=\"sm\"\n          (checkedChange)=\"handleCheckedChange($event)\"\n          (click)=\"$event.stopPropagation()\"\n        />\n      }\n\n      <!-- Contenu principal -->\n      <div class=\"ds-list-item__content\">\n        <span class=\"ds-list-item__title\">{{ title() }}</span>\n\n        @if (subtitle()) {\n          <span class=\"ds-list-item__subtitle\">{{ subtitle() }}</span>\n        }\n\n        <!-- Slot pour contenu additionnel inline (tags, badges) -->\n        <ng-content select=\"[inline]\" />\n      </div>\n\n      <!-- Zone de m\u00E9tadonn\u00E9es (time, duration, etc.) -->\n      <div class=\"ds-list-item__meta\">\n        <ng-content select=\"[meta]\" />\n      </div>\n\n      <!-- Actions (boutons, menus) - visibles au hover -->\n      <div class=\"ds-list-item__actions\">\n        <ng-content select=\"[actions]\" />\n      </div>\n    </div>\n\n    <!-- Ligne 2 : Contenu secondaire (optionnel) -->\n    <div class=\"ds-list-item__row ds-list-item__row--secondary\">\n      <ng-content select=\"[secondary]\" />\n    </div>\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block}.ds-list-item{display:flex;align-items:stretch;gap:var(--space-2, 8px);padding:0 var(--space-3, 12px);border-radius:var(--radius-1, 4px);cursor:default;transition:background-color .15s ease}.ds-list-item__wrapper{flex:1;display:flex;flex-direction:column;justify-content:center;min-width:0;padding:var(--space-2, 8px) 0}.ds-list-item__row{display:flex;align-items:center;gap:var(--space-2, 8px)}.ds-list-item__row--primary{min-height:24px}.ds-list-item__row--secondary{padding-left:calc(16px + var(--space-2, 8px));padding-top:var(--space-1, 4px)}.ds-list-item__row--secondary:empty{display:none}.ds-list-item--sm .ds-list-item__wrapper{padding:var(--space-1, 4px) 0}.ds-list-item--sm .ds-list-item__row--primary{min-height:20px}.ds-list-item--sm .ds-list-item__title{font-size:var(--font-size-1, 12px)}.ds-list-item--sm .ds-list-item__subtitle{font-size:var(--font-size-0, 11px)}.ds-list-item--sm .ds-list-item__indicator--bar{width:3px;align-self:stretch}.ds-list-item--sm .ds-list-item__indicator--dot{width:6px;height:6px}.ds-list-item--sm .ds-list-item__row--secondary{padding-left:calc(14px + var(--space-1, 4px))}.ds-list-item--md .ds-list-item__row--primary{min-height:24px}.ds-list-item--md .ds-list-item__title{font-size:var(--font-size-2, 14px)}.ds-list-item--md .ds-list-item__subtitle{font-size:var(--font-size-1, 12px)}.ds-list-item--md .ds-list-item__indicator--bar{width:3px;align-self:stretch}.ds-list-item--md .ds-list-item__indicator--dot{width:8px;height:8px}.ds-list-item--lg .ds-list-item__wrapper{padding:var(--space-3, 12px) 0}.ds-list-item--lg .ds-list-item__row--primary{min-height:28px}.ds-list-item--lg .ds-list-item__title{font-size:var(--font-size-3, 16px)}.ds-list-item--lg .ds-list-item__subtitle{font-size:var(--font-size-2, 14px)}.ds-list-item--lg .ds-list-item__indicator--bar{width:4px;align-self:stretch}.ds-list-item--lg .ds-list-item__indicator--dot{width:10px;height:10px}.ds-list-item--lg .ds-list-item__row--secondary{padding-left:calc(18px + var(--space-2, 8px))}.ds-list-item--clickable{cursor:pointer}.ds-list-item--clickable:hover{background-color:var(--background-hover, rgba(255, 255, 255, .08))}.ds-list-item--clickable:focus-visible{outline:2px solid var(--color-primary, #3b82f6);outline-offset:-2px}.ds-list-item--clickable:active{background-color:var(--background-active, rgba(255, 255, 255, .12))}.ds-list-item--completed .ds-list-item__title{color:var(--text-muted, #9ca3af);text-decoration:line-through}.ds-list-item--completed .ds-list-item__subtitle{text-decoration:line-through}.ds-list-item--completed .ds-list-item__meta{opacity:.5}.ds-list-item--disabled{opacity:.5;pointer-events:none;cursor:not-allowed}.ds-list-item--selected{background-color:var(--background-selected, rgba(59, 130, 246, .1))}.ds-list-item--selected:hover{background-color:var(--background-selected-hover, rgba(59, 130, 246, .15))}.ds-list-item__indicator{flex-shrink:0;background-color:var(--indicator-color, var(--color-neutral, #6b7280))}.ds-list-item__indicator--bar{width:3px;border-radius:2px;align-self:stretch}.ds-list-item__indicator--dot{border-radius:50%;align-self:center}.ds-list-item__checkbox{flex-shrink:0}.ds-list-item__content{flex:1;display:flex;align-items:center;gap:var(--space-2, 8px);min-width:0}.ds-list-item__title{font-weight:var(--font-weight-normal, 400);color:var(--text-default, #f3f4f6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ds-list-item__subtitle{color:var(--text-muted, #9ca3af);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ds-list-item__meta{display:flex;align-items:center;gap:var(--space-2, 8px);flex-shrink:0;font-size:var(--font-size-1, 12px);color:var(--text-muted, #9ca3af)}.ds-list-item__actions{display:flex;align-items:center;gap:var(--space-1, 4px);flex-shrink:0;opacity:0;transition:opacity .15s ease}.ds-list-item:hover .ds-list-item__actions,.ds-list-item:focus-within .ds-list-item__actions{opacity:1}::ng-deep [inline]{flex-shrink:0}::ng-deep [meta]{display:inline-flex;align-items:center}::ng-deep [actions]{display:inline-flex;align-items:center}::ng-deep [secondary]{display:flex;align-items:center;gap:var(--space-1, 4px);flex-wrap:wrap}\n"] }]
         }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], indicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "indicator", required: false }] }], indicatorColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "indicatorColor", required: false }] }], checkable: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkable", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], completed: [{ type: i0.Input, args: [{ isSignal: true, alias: "completed", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], clickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickable", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], checkedChange: [{ type: i0.Output, args: ["checkedChange"] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
 
 /**
@@ -15927,6 +15929,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
  */
@@ -16413,5 +17020,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, 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