@kksdev/ds-angular 1.3.0 → 1.4.0

package/fesm2022/kksdev-ds-angular.mjs

@@ -6,11 +6,11 @@ import * as i1$1 from '@fortawesome/angular-fontawesome';
 import { FaIconComponent, FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import * as i1$4 from '@angular/forms';
 import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { faInfoCircle, faTimesCircle, faExclamationTriangle, faCheckCircle, faTimes, faEye, faEyeSlash, faClose, faCircleInfo, faCircleXmark, faCircleExclamation, faCircleCheck, faChevronDown, faChevronLeft, faChevronRight, faAnglesLeft, faAnglesRight, faCheck, faSearch, faXmark, faSpinner, faCalendar, faCloudArrowUp, faFile, faFileImage, faFilePdf, faFileWord, faFileExcel } from '@fortawesome/free-solid-svg-icons';
+import { faInfoCircle, faTimesCircle, faExclamationTriangle, faCheckCircle, faTimes, faEye, faEyeSlash, faClose, faCircleInfo, faCircleXmark, faCircleExclamation, faCircleCheck, faChevronDown, faChevronLeft, faChevronRight, faAnglesLeft, faAnglesRight, faCheck, faSearch, faXmark, faSpinner, faCalendar, faCloudArrowUp, faFile, faFileImage, faFilePdf, faFileWord, faFileExcel, faInbox, faStar, faStarHalfStroke, faClock, faChevronUp, faFolder, faFolderOpen } from '@fortawesome/free-solid-svg-icons';
 import * as i1$2 from '@angular/router';
 import { RouterModule } from '@angular/router';
 import * as i1$3 from '@angular/cdk/overlay';
-import { CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
+import { CdkConnectedOverlay, CdkOverlayOrigin, OverlayModule } from '@angular/cdk/overlay';
 import { FocusTrapFactory } from '@angular/cdk/a11y';
 import { TemplatePortal, ComponentPortal } from '@angular/cdk/portal';
 import { Subject, debounceTime, distinctUntilChanged, takeUntil } from 'rxjs';
@@ -2349,11 +2349,11 @@ class DsAlert {
         this.closed.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsAlert, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DsAlert, isStandalone: true, selector: "ds-alert", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, ngImport: i0, template: "<div\n  [class]=\"alertClasses.join(' ')\"\n  role=\"alert\"\n  [attr.aria-hidden]=\"hidden() ? 'true' : null\"\n>\n  @if (showIcon()) {\n    <div class=\"ds-alert__icon\" aria-hidden=\"true\">\n      <fa-icon [icon]=\"currentIcon\"></fa-icon>\n    </div>\n  }\n\n  <div class=\"ds-alert__content\">\n    <ng-content></ng-content>\n  </div>\n\n  @if (closable()) {\n    <button\n      class=\"ds-alert__close\"\n      type=\"button\"\n      aria-label=\"Fermer l'alerte\"\n      (click)=\"handleClose()\"\n    >\n      <fa-icon [icon]=\"closeIcon\"></fa-icon>\n    </button>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";.ds-alert{display:flex;align-items:flex-start;gap:var(--alert-gap, var(--space-3));border-radius:var(--alert-radius, var(--radius-2));border-width:1px;border-style:solid;transition:all var(--duration-fast, .15s) ease}.ds-alert--success{background-color:var(--alert-success-bg, var(--bg-success));border-color:var(--alert-success-border, var(--success));color:var(--alert-success-text, var(--text-success))}.ds-alert--success .ds-alert__icon{color:var(--alert-success-icon, var(--success))}.ds-alert--warning{background-color:var(--alert-warning-bg, var(--bg-warning));border-color:var(--alert-warning-border, var(--warning));color:var(--alert-warning-text, var(--text-warning))}.ds-alert--warning .ds-alert__icon{color:var(--alert-warning-icon, var(--warning))}.ds-alert--error{background-color:var(--alert-error-bg, var(--bg-error));border-color:var(--alert-error-border, var(--error));color:var(--alert-error-text, var(--text-error))}.ds-alert--error .ds-alert__icon{color:var(--alert-error-icon, var(--error))}.ds-alert--info{background-color:var(--alert-info-bg, var(--bg-info));border-color:var(--alert-info-border, var(--info));color:var(--alert-info-text, var(--text-info))}.ds-alert--info .ds-alert__icon{color:var(--alert-info-icon, var(--info))}.ds-alert--sm{padding:var(--alert-padding-sm, var(--space-2));font-size:var(--alert-font-size-sm, var(--font-size-2))}.ds-alert--sm .ds-alert__icon{font-size:var(--alert-icon-size-sm, 16px)}.ds-alert--sm .ds-alert__close{width:20px;height:20px;font-size:12px}.ds-alert--md{padding:var(--alert-padding-md, var(--space-3));font-size:var(--alert-font-size-md, var(--font-size-3))}.ds-alert--md .ds-alert__icon{font-size:var(--alert-icon-size-md, 20px)}.ds-alert--md .ds-alert__close{width:24px;height:24px;font-size:14px}.ds-alert--lg{padding:var(--alert-padding-lg, var(--space-4));font-size:var(--alert-font-size-lg, var(--font-size-4))}.ds-alert--lg .ds-alert__icon{font-size:var(--alert-icon-size-lg, 24px)}.ds-alert--lg .ds-alert__close{width:28px;height:28px;font-size:16px}.ds-alert--hidden{display:none}.ds-alert__icon{flex-shrink:0;display:flex;align-items:center;justify-content:center;line-height:1}.ds-alert__content{flex:1;min-width:0}.ds-alert__content>:first-child{margin-top:0}.ds-alert__content>:last-child{margin-bottom:0}.ds-alert__close{flex-shrink:0;display:flex;align-items:center;justify-content:center;background:transparent;border:none;border-radius:var(--radius-1, 4px);cursor:pointer;transition:all var(--duration-fast, .15s) ease;color:currentColor;opacity:.7}.ds-alert__close:hover{opacity:1;background-color:var(--hover-bg, rgba(0, 0, 0, .05))}.ds-alert__close:active{transform:scale(.95)}.ds-alert__close:focus-visible{outline:2px solid currentColor;outline-offset:2px}\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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DsAlert, isStandalone: true, selector: "ds-alert", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, ngImport: i0, template: "<div\n  [class]=\"alertClasses.join(' ')\"\n  role=\"alert\"\n  [attr.aria-hidden]=\"hidden() ? 'true' : null\"\n>\n  @if (showIcon()) {\n    <div class=\"ds-alert__icon\" aria-hidden=\"true\">\n      <fa-icon [icon]=\"currentIcon\"></fa-icon>\n    </div>\n  }\n\n  <div class=\"ds-alert__content\">\n    <ng-content></ng-content>\n  </div>\n\n  @if (closable()) {\n    <button\n      class=\"ds-alert__close\"\n      type=\"button\"\n      aria-label=\"Fermer l'alerte\"\n      (click)=\"handleClose()\"\n    >\n      <fa-icon [icon]=\"closeIcon\"></fa-icon>\n    </button>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";.ds-alert{display:flex;align-items:flex-start;gap:var(--alert-gap, var(--space-3));border-radius:var(--alert-radius, var(--radius-2));border-width:1px;border-style:solid;transition:all var(--duration-fast, .15s) ease}.ds-alert--success{background-color:var(--alert-success-bg, var(--bg-success));border-color:var(--alert-success-border, var(--success));color:var(--alert-success-text, var(--text-success))}.ds-alert--success .ds-alert__icon{color:var(--alert-success-icon, var(--success))}.ds-alert--warning{background-color:var(--alert-warning-bg, var(--bg-warning));border-color:var(--alert-warning-border, var(--warning));color:var(--alert-warning-text, var(--text-warning))}.ds-alert--warning .ds-alert__icon{color:var(--alert-warning-icon, var(--warning))}.ds-alert--error{background-color:var(--alert-error-bg, var(--bg-error));border-color:var(--alert-error-border, var(--error));color:var(--alert-error-text, var(--text-error))}.ds-alert--error .ds-alert__icon{color:var(--alert-error-icon, var(--error))}.ds-alert--info{background-color:var(--alert-info-bg, var(--bg-info));border-color:var(--alert-info-border, var(--info));color:var(--alert-info-text, var(--text-info))}.ds-alert--info .ds-alert__icon{color:var(--alert-info-icon, var(--info))}.ds-alert--sm{padding:var(--alert-padding-sm, var(--space-2));font-size:var(--alert-font-size-sm, var(--font-size-2))}.ds-alert--sm .ds-alert__icon{font-size:var(--alert-icon-size-sm, 16px)}.ds-alert--sm .ds-alert__close{width:20px;height:20px;font-size:12px}.ds-alert--md{padding:var(--alert-padding-md, var(--space-3));font-size:var(--alert-font-size-md, var(--font-size-3))}.ds-alert--md .ds-alert__icon{font-size:var(--alert-icon-size-md, 20px)}.ds-alert--md .ds-alert__close{width:24px;height:24px;font-size:14px}.ds-alert--lg{padding:var(--alert-padding-lg, var(--space-4));font-size:var(--alert-font-size-lg, var(--font-size-4))}.ds-alert--lg .ds-alert__icon{font-size:var(--alert-icon-size-lg, 24px)}.ds-alert--lg .ds-alert__close{width:28px;height:28px;font-size:16px}.ds-alert--hidden{display:none}.ds-alert__icon{flex-shrink:0;display:flex;align-items:center;justify-content:center;line-height:1}.ds-alert__content{flex:1;min-width:0}.ds-alert__content>:first-child{margin-top:0}.ds-alert__content>:last-child{margin-bottom:0}.ds-alert__close{flex-shrink:0;display:flex;align-items:center;justify-content:center;background:transparent;border:none;border-radius:var(--radius-1, 4px);cursor:pointer;transition:all var(--duration-fast, .15s) ease;color:currentColor;opacity:.7}.ds-alert__close:hover{opacity:1;background-color:var(--hover-bg, rgba(var(--black-rgb), .05))}.ds-alert__close:active{transform:scale(.95)}.ds-alert__close:focus-visible{outline:2px solid currentColor;outline-offset:2px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i1$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsAlert, decorators: [{
             type: Component,
-            args: [{ selector: 'ds-alert', imports: [CommonModule, FontAwesomeModule], template: "<div\n  [class]=\"alertClasses.join(' ')\"\n  role=\"alert\"\n  [attr.aria-hidden]=\"hidden() ? 'true' : null\"\n>\n  @if (showIcon()) {\n    <div class=\"ds-alert__icon\" aria-hidden=\"true\">\n      <fa-icon [icon]=\"currentIcon\"></fa-icon>\n    </div>\n  }\n\n  <div class=\"ds-alert__content\">\n    <ng-content></ng-content>\n  </div>\n\n  @if (closable()) {\n    <button\n      class=\"ds-alert__close\"\n      type=\"button\"\n      aria-label=\"Fermer l'alerte\"\n      (click)=\"handleClose()\"\n    >\n      <fa-icon [icon]=\"closeIcon\"></fa-icon>\n    </button>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";.ds-alert{display:flex;align-items:flex-start;gap:var(--alert-gap, var(--space-3));border-radius:var(--alert-radius, var(--radius-2));border-width:1px;border-style:solid;transition:all var(--duration-fast, .15s) ease}.ds-alert--success{background-color:var(--alert-success-bg, var(--bg-success));border-color:var(--alert-success-border, var(--success));color:var(--alert-success-text, var(--text-success))}.ds-alert--success .ds-alert__icon{color:var(--alert-success-icon, var(--success))}.ds-alert--warning{background-color:var(--alert-warning-bg, var(--bg-warning));border-color:var(--alert-warning-border, var(--warning));color:var(--alert-warning-text, var(--text-warning))}.ds-alert--warning .ds-alert__icon{color:var(--alert-warning-icon, var(--warning))}.ds-alert--error{background-color:var(--alert-error-bg, var(--bg-error));border-color:var(--alert-error-border, var(--error));color:var(--alert-error-text, var(--text-error))}.ds-alert--error .ds-alert__icon{color:var(--alert-error-icon, var(--error))}.ds-alert--info{background-color:var(--alert-info-bg, var(--bg-info));border-color:var(--alert-info-border, var(--info));color:var(--alert-info-text, var(--text-info))}.ds-alert--info .ds-alert__icon{color:var(--alert-info-icon, var(--info))}.ds-alert--sm{padding:var(--alert-padding-sm, var(--space-2));font-size:var(--alert-font-size-sm, var(--font-size-2))}.ds-alert--sm .ds-alert__icon{font-size:var(--alert-icon-size-sm, 16px)}.ds-alert--sm .ds-alert__close{width:20px;height:20px;font-size:12px}.ds-alert--md{padding:var(--alert-padding-md, var(--space-3));font-size:var(--alert-font-size-md, var(--font-size-3))}.ds-alert--md .ds-alert__icon{font-size:var(--alert-icon-size-md, 20px)}.ds-alert--md .ds-alert__close{width:24px;height:24px;font-size:14px}.ds-alert--lg{padding:var(--alert-padding-lg, var(--space-4));font-size:var(--alert-font-size-lg, var(--font-size-4))}.ds-alert--lg .ds-alert__icon{font-size:var(--alert-icon-size-lg, 24px)}.ds-alert--lg .ds-alert__close{width:28px;height:28px;font-size:16px}.ds-alert--hidden{display:none}.ds-alert__icon{flex-shrink:0;display:flex;align-items:center;justify-content:center;line-height:1}.ds-alert__content{flex:1;min-width:0}.ds-alert__content>:first-child{margin-top:0}.ds-alert__content>:last-child{margin-bottom:0}.ds-alert__close{flex-shrink:0;display:flex;align-items:center;justify-content:center;background:transparent;border:none;border-radius:var(--radius-1, 4px);cursor:pointer;transition:all var(--duration-fast, .15s) ease;color:currentColor;opacity:.7}.ds-alert__close:hover{opacity:1;background-color:var(--hover-bg, rgba(0, 0, 0, .05))}.ds-alert__close:active{transform:scale(.95)}.ds-alert__close:focus-visible{outline:2px solid currentColor;outline-offset:2px}\n"] }]
+            args: [{ selector: 'ds-alert', imports: [CommonModule, FontAwesomeModule], template: "<div\n  [class]=\"alertClasses.join(' ')\"\n  role=\"alert\"\n  [attr.aria-hidden]=\"hidden() ? 'true' : null\"\n>\n  @if (showIcon()) {\n    <div class=\"ds-alert__icon\" aria-hidden=\"true\">\n      <fa-icon [icon]=\"currentIcon\"></fa-icon>\n    </div>\n  }\n\n  <div class=\"ds-alert__content\">\n    <ng-content></ng-content>\n  </div>\n\n  @if (closable()) {\n    <button\n      class=\"ds-alert__close\"\n      type=\"button\"\n      aria-label=\"Fermer l'alerte\"\n      (click)=\"handleClose()\"\n    >\n      <fa-icon [icon]=\"closeIcon\"></fa-icon>\n    </button>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";.ds-alert{display:flex;align-items:flex-start;gap:var(--alert-gap, var(--space-3));border-radius:var(--alert-radius, var(--radius-2));border-width:1px;border-style:solid;transition:all var(--duration-fast, .15s) ease}.ds-alert--success{background-color:var(--alert-success-bg, var(--bg-success));border-color:var(--alert-success-border, var(--success));color:var(--alert-success-text, var(--text-success))}.ds-alert--success .ds-alert__icon{color:var(--alert-success-icon, var(--success))}.ds-alert--warning{background-color:var(--alert-warning-bg, var(--bg-warning));border-color:var(--alert-warning-border, var(--warning));color:var(--alert-warning-text, var(--text-warning))}.ds-alert--warning .ds-alert__icon{color:var(--alert-warning-icon, var(--warning))}.ds-alert--error{background-color:var(--alert-error-bg, var(--bg-error));border-color:var(--alert-error-border, var(--error));color:var(--alert-error-text, var(--text-error))}.ds-alert--error .ds-alert__icon{color:var(--alert-error-icon, var(--error))}.ds-alert--info{background-color:var(--alert-info-bg, var(--bg-info));border-color:var(--alert-info-border, var(--info));color:var(--alert-info-text, var(--text-info))}.ds-alert--info .ds-alert__icon{color:var(--alert-info-icon, var(--info))}.ds-alert--sm{padding:var(--alert-padding-sm, var(--space-2));font-size:var(--alert-font-size-sm, var(--font-size-2))}.ds-alert--sm .ds-alert__icon{font-size:var(--alert-icon-size-sm, 16px)}.ds-alert--sm .ds-alert__close{width:20px;height:20px;font-size:12px}.ds-alert--md{padding:var(--alert-padding-md, var(--space-3));font-size:var(--alert-font-size-md, var(--font-size-3))}.ds-alert--md .ds-alert__icon{font-size:var(--alert-icon-size-md, 20px)}.ds-alert--md .ds-alert__close{width:24px;height:24px;font-size:14px}.ds-alert--lg{padding:var(--alert-padding-lg, var(--space-4));font-size:var(--alert-font-size-lg, var(--font-size-4))}.ds-alert--lg .ds-alert__icon{font-size:var(--alert-icon-size-lg, 24px)}.ds-alert--lg .ds-alert__close{width:28px;height:28px;font-size:16px}.ds-alert--hidden{display:none}.ds-alert__icon{flex-shrink:0;display:flex;align-items:center;justify-content:center;line-height:1}.ds-alert__content{flex:1;min-width:0}.ds-alert__content>:first-child{margin-top:0}.ds-alert__content>:last-child{margin-bottom:0}.ds-alert__close{flex-shrink:0;display:flex;align-items:center;justify-content:center;background:transparent;border:none;border-radius:var(--radius-1, 4px);cursor:pointer;transition:all var(--duration-fast, .15s) ease;color:currentColor;opacity:.7}.ds-alert__close:hover{opacity:1;background-color:var(--hover-bg, rgba(var(--black-rgb), .05))}.ds-alert__close:active{transform:scale(.95)}.ds-alert__close:focus-visible{outline:2px solid currentColor;outline-offset:2px}\n"] }]
         }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], hidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidden", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
 
 class DsBadge {
@@ -3767,7 +3767,7 @@ class DsModalComponent {
         body.classList.remove('modal-open');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DsModalComponent, isStandalone: true, selector: "ds-modal", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdrop: { classPropertyName: "closeOnBackdrop", publicName: "closeOnBackdrop", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "opened", closed: "closed" }, host: { listeners: { "document:keydown.escape": "handleEscape($event)" } }, queries: [{ propertyName: "projectedIcon", first: true, predicate: ["icon"], descendants: true }], viewQueries: [{ propertyName: "modalContainer", first: true, predicate: ["modalContainer"], descendants: true }, { propertyName: "closeButton", first: true, predicate: ["closeButton"], descendants: true, read: ElementRef }], ngImport: i0, template: "@if (shouldRenderOverlay()) {\n  <div class=\"overlay\" role=\"presentation\" (click)=\"onBackdropClick()\"></div>\n}\n@if (open()) {\n  <div #modalContainer\n       class=\"modal\"\n       role=\"dialog\"\n       aria-modal=\"true\"\n       [attr.aria-labelledby]=\"modalTitleId\"\n       [attr.aria-describedby]=\"modalDescId\"\n       [ngClass]=\"modalClasses()\"\n  >\n    <header class=\"modal-header\">\n      @if (showIcon()) {\n        <div class=\"modal-icon\">\n          <ng-content select=\"[icon]\"></ng-content>\n          @if (shouldRenderDefaultIcon() && resolvedIcon()) {\n            <fa-icon [icon]=\"resolvedIcon()!\"></fa-icon>\n          }\n        </div>\n      }\n      <h3 [id]=\"modalTitleId\">{{ title() }}</h3>\n      @if (closable()) {\n        <primitive-button\n          #closeButton\n          class=\"close-btn\"\n          variant=\"ghost\"\n          appearance=\"outline\"\n          size=\"sm\"\n          (clicked)=\"close()\"\n          aria-label=\"Fermer la fen\u00EAtre\"\n        >\u2715</primitive-button>\n      }\n    </header>\n    <div class=\"modal-content\" (scroll)=\"onScroll($event)\">\n      <section [id]=\"modalDescId\"><ng-content></ng-content></section>\n    </div>\n    <footer class=\"modal-footer\" [class.with-shadow]=\"isScrolled()\">\n      <ng-content select=\"[footer]\"></ng-content>\n    </footer>\n  </div>\n}\n", styles: [".overlay{position:fixed;inset:0;background:var(--modal-backdrop);-webkit-backdrop-filter:blur(var(--modal-overlay-blur));backdrop-filter:blur(var(--modal-overlay-blur));z-index:var(--modal-overlay-z-index)}.modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--modal-bg);color:var(--modal-text);padding:var(--modal-padding);border-radius:var(--modal-radius);box-shadow:var(--modal-shadow-depth);max-height:var(--modal-max-height);border:1px solid var(--modal-border-color);z-index:var(--modal-overlay-z-index);width:min(95vw,var(--modal-size-md));display:flex;flex-direction:column;overflow:hidden;animation:scaleIn .25s var(--easing-default)}.modal-sm{width:min(95vw,var(--modal-size-sm))}.modal-md{width:min(95vw,var(--modal-size-md))}.modal-lg{width:min(95vw,var(--modal-size-lg))}.modal-header{display:flex;align-items:center;gap:var(--modal-section-gap);position:relative;padding-bottom:var(--modal-section-gap);margin-bottom:var(--modal-section-gap);border-bottom:1px solid var(--modal-divider)}.modal-header h3{margin:0;font-size:var(--font-size-5);font-weight:var(--font-weight-semibold)}.modal-header .modal-icon{width:2.5rem;height:2.5rem;display:flex;align-items:center;justify-content:center;border-radius:50%;flex-shrink:0;background:var(--color-primary);color:var(--gray-50);animation:popIn .3s var(--easing-default)}.modal-header .close-btn{position:absolute;top:0;right:0}.modal-header .close-btn button{background:transparent;border:none;font-size:var(--font-size-4);cursor:pointer;color:var(--text-muted);padding:0;line-height:var(--line-height-tight);transition:color var(--duration-fast) var(--easing-default)}.modal-header .close-btn button:hover{color:var(--text-default)}.modal-success .modal-header h3{color:var(--modal-type-success-color)}.modal-warning .modal-header h3{color:var(--modal-type-warning-color)}.modal-error .modal-header h3{color:var(--modal-type-error-color)}.modal-info .modal-header h3{color:var(--modal-type-info-color)}.modal-success .modal-icon{background:var(--modal-type-success-color);color:var(--modal-type-success-contrast)}.modal-warning .modal-icon{background:var(--modal-type-warning-color);color:var(--modal-type-warning-contrast)}.modal-error .modal-icon{background:var(--modal-type-error-color);color:var(--modal-type-error-contrast)}.modal-info .modal-icon{background:var(--modal-type-info-color);color:var(--modal-type-info-contrast)}.modal-content{flex:1;overflow-y:auto;font-size:var(--font-size-2);display:flex;flex-direction:column;gap:var(--space-2);margin-bottom:var(--modal-section-gap)}.modal-footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-3);padding-top:var(--space-2);padding-bottom:var(--modal-footer-padding);padding-inline:0;border-top:1px solid var(--modal-divider);flex-wrap:wrap}@media (max-width: 480px){.modal-footer{flex-direction:column;align-items:stretch;justify-content:center}.modal-footer ds-button{width:100%}}.modal-footer.with-shadow{box-shadow:var(--modal-footer-shadow, inset 0 1px 0 var(--modal-divider))}@keyframes scaleIn{0%{opacity:0;transform:translate(-50%,-50%) scale(.95)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}@keyframes popIn{0%{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }, { kind: "component", type: PrimitiveButton, selector: "primitive-button", inputs: ["type", "variant", "size", "disabled", "iconStart", "iconEnd", "appearance", "block"], outputs: ["clicked"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DsModalComponent, isStandalone: true, selector: "ds-modal", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdrop: { classPropertyName: "closeOnBackdrop", publicName: "closeOnBackdrop", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "opened", closed: "closed" }, host: { listeners: { "document:keydown.escape": "handleEscape($event)" } }, queries: [{ propertyName: "projectedIcon", first: true, predicate: ["icon"], descendants: true }], viewQueries: [{ propertyName: "modalContainer", first: true, predicate: ["modalContainer"], descendants: true }, { propertyName: "closeButton", first: true, predicate: ["closeButton"], descendants: true, read: ElementRef }], ngImport: i0, template: "@if (shouldRenderOverlay()) {\n  <div class=\"overlay\" role=\"presentation\" (click)=\"onBackdropClick()\"></div>\n}\n@if (open()) {\n  <div #modalContainer\n       class=\"modal\"\n       role=\"dialog\"\n       aria-modal=\"true\"\n       [attr.aria-labelledby]=\"modalTitleId\"\n       [attr.aria-describedby]=\"modalDescId\"\n       [ngClass]=\"modalClasses()\"\n  >\n    <header class=\"modal-header\">\n      @if (showIcon()) {\n        <div class=\"modal-icon\">\n          <ng-content select=\"[icon]\"></ng-content>\n          @if (shouldRenderDefaultIcon() && resolvedIcon()) {\n            <fa-icon [icon]=\"resolvedIcon()!\"></fa-icon>\n          }\n        </div>\n      }\n      <h3 [id]=\"modalTitleId\">{{ title() }}</h3>\n      @if (closable()) {\n        <primitive-button\n          #closeButton\n          class=\"close-btn\"\n          variant=\"ghost\"\n          appearance=\"outline\"\n          size=\"sm\"\n          (clicked)=\"close()\"\n          aria-label=\"Fermer la fen\u00EAtre\"\n        >\u2715</primitive-button>\n      }\n    </header>\n    <div class=\"modal-content\" (scroll)=\"onScroll($event)\">\n      <section [id]=\"modalDescId\"><ng-content></ng-content></section>\n    </div>\n    <footer class=\"modal-footer\" [class.with-shadow]=\"isScrolled()\">\n      <ng-content select=\"[footer]\"></ng-content>\n    </footer>\n  </div>\n}\n", styles: [".overlay{position:fixed;inset:0;background:var(--modal-backdrop);-webkit-backdrop-filter:blur(var(--modal-overlay-blur));backdrop-filter:blur(var(--modal-overlay-blur));z-index:var(--modal-overlay-z-index)}.modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--modal-bg);color:var(--modal-text);padding:var(--modal-padding);border-radius:var(--modal-radius);box-shadow:var(--modal-shadow-depth);max-height:var(--modal-max-height);border:1px solid var(--modal-border-color);z-index:var(--modal-overlay-z-index);width:min(95vw,var(--modal-size-md));display:flex;flex-direction:column;overflow:hidden;animation:scaleIn .25s var(--easing-default)}.modal-sm{width:min(95vw,var(--modal-size-sm))}.modal-md{width:min(95vw,var(--modal-size-md))}.modal-lg{width:min(95vw,var(--modal-size-lg))}.modal-header{display:flex;align-items:center;gap:var(--modal-section-gap);position:relative;padding-bottom:var(--modal-section-gap);margin-bottom:var(--modal-section-gap);border-bottom:1px solid var(--modal-divider)}.modal-header h3{margin:0;font-size:var(--font-size-5);font-weight:var(--font-weight-semibold)}.modal-header .modal-icon{width:2.5rem;height:2.5rem;display:flex;align-items:center;justify-content:center;border-radius:50%;flex-shrink:0;background:var(--color-primary);color:var(--gray-50);animation:popIn .3s var(--easing-default)}.modal-header .close-btn{position:absolute;top:0;right:0}.modal-header .close-btn button{background:transparent;border:none;font-size:var(--font-size-4);cursor:pointer;color:var(--text-muted);padding:0;line-height:var(--line-height-tight);transition:color var(--duration-fast) var(--easing-default)}.modal-header .close-btn button:hover{color:var(--text-default)}.modal-success .modal-header h3{color:var(--modal-type-success-color)}.modal-warning .modal-header h3{color:var(--modal-type-warning-color)}.modal-error .modal-header h3{color:var(--modal-type-error-color)}.modal-info .modal-header h3{color:var(--modal-type-info-color)}.modal-success .modal-icon{background:var(--modal-type-success-color);color:var(--modal-type-success-contrast)}.modal-warning .modal-icon{background:var(--modal-type-warning-color);color:var(--modal-type-warning-contrast)}.modal-error .modal-icon{background:var(--modal-type-error-color);color:var(--modal-type-error-contrast)}.modal-info .modal-icon{background:var(--modal-type-info-color);color:var(--modal-type-info-contrast)}.modal-content{flex:1;overflow-y:auto;font-size:var(--font-size-2);display:flex;flex-direction:column;gap:var(--space-2);margin-bottom:var(--modal-section-gap)}.modal-footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-3);padding-top:var(--space-2);padding-bottom:var(--modal-footer-padding);padding-inline:0;border-top:1px solid var(--modal-divider);flex-wrap:wrap}@media (max-width: 576px){.modal-footer{flex-direction:column;align-items:stretch;justify-content:center}.modal-footer ds-button{width:100%}}.modal-footer.with-shadow{box-shadow:var(--modal-footer-shadow, inset 0 1px 0 var(--modal-divider))}@keyframes scaleIn{0%{opacity:0;transform:translate(-50%,-50%) scale(.95)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}@keyframes popIn{0%{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }, { kind: "component", type: PrimitiveButton, selector: "primitive-button", inputs: ["type", "variant", "size", "disabled", "iconStart", "iconEnd", "appearance", "block"], outputs: ["clicked"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsModalComponent, decorators: [{
             type: Component,
@@ -3775,7 +3775,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         NgClass,
                         FaIconComponent,
                         PrimitiveButton
-                    ], template: "@if (shouldRenderOverlay()) {\n  <div class=\"overlay\" role=\"presentation\" (click)=\"onBackdropClick()\"></div>\n}\n@if (open()) {\n  <div #modalContainer\n       class=\"modal\"\n       role=\"dialog\"\n       aria-modal=\"true\"\n       [attr.aria-labelledby]=\"modalTitleId\"\n       [attr.aria-describedby]=\"modalDescId\"\n       [ngClass]=\"modalClasses()\"\n  >\n    <header class=\"modal-header\">\n      @if (showIcon()) {\n        <div class=\"modal-icon\">\n          <ng-content select=\"[icon]\"></ng-content>\n          @if (shouldRenderDefaultIcon() && resolvedIcon()) {\n            <fa-icon [icon]=\"resolvedIcon()!\"></fa-icon>\n          }\n        </div>\n      }\n      <h3 [id]=\"modalTitleId\">{{ title() }}</h3>\n      @if (closable()) {\n        <primitive-button\n          #closeButton\n          class=\"close-btn\"\n          variant=\"ghost\"\n          appearance=\"outline\"\n          size=\"sm\"\n          (clicked)=\"close()\"\n          aria-label=\"Fermer la fen\u00EAtre\"\n        >\u2715</primitive-button>\n      }\n    </header>\n    <div class=\"modal-content\" (scroll)=\"onScroll($event)\">\n      <section [id]=\"modalDescId\"><ng-content></ng-content></section>\n    </div>\n    <footer class=\"modal-footer\" [class.with-shadow]=\"isScrolled()\">\n      <ng-content select=\"[footer]\"></ng-content>\n    </footer>\n  </div>\n}\n", styles: [".overlay{position:fixed;inset:0;background:var(--modal-backdrop);-webkit-backdrop-filter:blur(var(--modal-overlay-blur));backdrop-filter:blur(var(--modal-overlay-blur));z-index:var(--modal-overlay-z-index)}.modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--modal-bg);color:var(--modal-text);padding:var(--modal-padding);border-radius:var(--modal-radius);box-shadow:var(--modal-shadow-depth);max-height:var(--modal-max-height);border:1px solid var(--modal-border-color);z-index:var(--modal-overlay-z-index);width:min(95vw,var(--modal-size-md));display:flex;flex-direction:column;overflow:hidden;animation:scaleIn .25s var(--easing-default)}.modal-sm{width:min(95vw,var(--modal-size-sm))}.modal-md{width:min(95vw,var(--modal-size-md))}.modal-lg{width:min(95vw,var(--modal-size-lg))}.modal-header{display:flex;align-items:center;gap:var(--modal-section-gap);position:relative;padding-bottom:var(--modal-section-gap);margin-bottom:var(--modal-section-gap);border-bottom:1px solid var(--modal-divider)}.modal-header h3{margin:0;font-size:var(--font-size-5);font-weight:var(--font-weight-semibold)}.modal-header .modal-icon{width:2.5rem;height:2.5rem;display:flex;align-items:center;justify-content:center;border-radius:50%;flex-shrink:0;background:var(--color-primary);color:var(--gray-50);animation:popIn .3s var(--easing-default)}.modal-header .close-btn{position:absolute;top:0;right:0}.modal-header .close-btn button{background:transparent;border:none;font-size:var(--font-size-4);cursor:pointer;color:var(--text-muted);padding:0;line-height:var(--line-height-tight);transition:color var(--duration-fast) var(--easing-default)}.modal-header .close-btn button:hover{color:var(--text-default)}.modal-success .modal-header h3{color:var(--modal-type-success-color)}.modal-warning .modal-header h3{color:var(--modal-type-warning-color)}.modal-error .modal-header h3{color:var(--modal-type-error-color)}.modal-info .modal-header h3{color:var(--modal-type-info-color)}.modal-success .modal-icon{background:var(--modal-type-success-color);color:var(--modal-type-success-contrast)}.modal-warning .modal-icon{background:var(--modal-type-warning-color);color:var(--modal-type-warning-contrast)}.modal-error .modal-icon{background:var(--modal-type-error-color);color:var(--modal-type-error-contrast)}.modal-info .modal-icon{background:var(--modal-type-info-color);color:var(--modal-type-info-contrast)}.modal-content{flex:1;overflow-y:auto;font-size:var(--font-size-2);display:flex;flex-direction:column;gap:var(--space-2);margin-bottom:var(--modal-section-gap)}.modal-footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-3);padding-top:var(--space-2);padding-bottom:var(--modal-footer-padding);padding-inline:0;border-top:1px solid var(--modal-divider);flex-wrap:wrap}@media (max-width: 480px){.modal-footer{flex-direction:column;align-items:stretch;justify-content:center}.modal-footer ds-button{width:100%}}.modal-footer.with-shadow{box-shadow:var(--modal-footer-shadow, inset 0 1px 0 var(--modal-divider))}@keyframes scaleIn{0%{opacity:0;transform:translate(-50%,-50%) scale(.95)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}@keyframes popIn{0%{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}\n"] }]
+                    ], template: "@if (shouldRenderOverlay()) {\n  <div class=\"overlay\" role=\"presentation\" (click)=\"onBackdropClick()\"></div>\n}\n@if (open()) {\n  <div #modalContainer\n       class=\"modal\"\n       role=\"dialog\"\n       aria-modal=\"true\"\n       [attr.aria-labelledby]=\"modalTitleId\"\n       [attr.aria-describedby]=\"modalDescId\"\n       [ngClass]=\"modalClasses()\"\n  >\n    <header class=\"modal-header\">\n      @if (showIcon()) {\n        <div class=\"modal-icon\">\n          <ng-content select=\"[icon]\"></ng-content>\n          @if (shouldRenderDefaultIcon() && resolvedIcon()) {\n            <fa-icon [icon]=\"resolvedIcon()!\"></fa-icon>\n          }\n        </div>\n      }\n      <h3 [id]=\"modalTitleId\">{{ title() }}</h3>\n      @if (closable()) {\n        <primitive-button\n          #closeButton\n          class=\"close-btn\"\n          variant=\"ghost\"\n          appearance=\"outline\"\n          size=\"sm\"\n          (clicked)=\"close()\"\n          aria-label=\"Fermer la fen\u00EAtre\"\n        >\u2715</primitive-button>\n      }\n    </header>\n    <div class=\"modal-content\" (scroll)=\"onScroll($event)\">\n      <section [id]=\"modalDescId\"><ng-content></ng-content></section>\n    </div>\n    <footer class=\"modal-footer\" [class.with-shadow]=\"isScrolled()\">\n      <ng-content select=\"[footer]\"></ng-content>\n    </footer>\n  </div>\n}\n", styles: [".overlay{position:fixed;inset:0;background:var(--modal-backdrop);-webkit-backdrop-filter:blur(var(--modal-overlay-blur));backdrop-filter:blur(var(--modal-overlay-blur));z-index:var(--modal-overlay-z-index)}.modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--modal-bg);color:var(--modal-text);padding:var(--modal-padding);border-radius:var(--modal-radius);box-shadow:var(--modal-shadow-depth);max-height:var(--modal-max-height);border:1px solid var(--modal-border-color);z-index:var(--modal-overlay-z-index);width:min(95vw,var(--modal-size-md));display:flex;flex-direction:column;overflow:hidden;animation:scaleIn .25s var(--easing-default)}.modal-sm{width:min(95vw,var(--modal-size-sm))}.modal-md{width:min(95vw,var(--modal-size-md))}.modal-lg{width:min(95vw,var(--modal-size-lg))}.modal-header{display:flex;align-items:center;gap:var(--modal-section-gap);position:relative;padding-bottom:var(--modal-section-gap);margin-bottom:var(--modal-section-gap);border-bottom:1px solid var(--modal-divider)}.modal-header h3{margin:0;font-size:var(--font-size-5);font-weight:var(--font-weight-semibold)}.modal-header .modal-icon{width:2.5rem;height:2.5rem;display:flex;align-items:center;justify-content:center;border-radius:50%;flex-shrink:0;background:var(--color-primary);color:var(--gray-50);animation:popIn .3s var(--easing-default)}.modal-header .close-btn{position:absolute;top:0;right:0}.modal-header .close-btn button{background:transparent;border:none;font-size:var(--font-size-4);cursor:pointer;color:var(--text-muted);padding:0;line-height:var(--line-height-tight);transition:color var(--duration-fast) var(--easing-default)}.modal-header .close-btn button:hover{color:var(--text-default)}.modal-success .modal-header h3{color:var(--modal-type-success-color)}.modal-warning .modal-header h3{color:var(--modal-type-warning-color)}.modal-error .modal-header h3{color:var(--modal-type-error-color)}.modal-info .modal-header h3{color:var(--modal-type-info-color)}.modal-success .modal-icon{background:var(--modal-type-success-color);color:var(--modal-type-success-contrast)}.modal-warning .modal-icon{background:var(--modal-type-warning-color);color:var(--modal-type-warning-contrast)}.modal-error .modal-icon{background:var(--modal-type-error-color);color:var(--modal-type-error-contrast)}.modal-info .modal-icon{background:var(--modal-type-info-color);color:var(--modal-type-info-contrast)}.modal-content{flex:1;overflow-y:auto;font-size:var(--font-size-2);display:flex;flex-direction:column;gap:var(--space-2);margin-bottom:var(--modal-section-gap)}.modal-footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-3);padding-top:var(--space-2);padding-bottom:var(--modal-footer-padding);padding-inline:0;border-top:1px solid var(--modal-divider);flex-wrap:wrap}@media (max-width: 576px){.modal-footer{flex-direction:column;align-items:stretch;justify-content:center}.modal-footer ds-button{width:100%}}.modal-footer.with-shadow{box-shadow:var(--modal-footer-shadow, inset 0 1px 0 var(--modal-divider))}@keyframes scaleIn{0%{opacity:0;transform:translate(-50%,-50%) scale(.95)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}@keyframes popIn{0%{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], closeOnBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdrop", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], opened: [{
                 type: Output
             }], closed: [{
@@ -5771,7 +5771,7 @@ class DsSelect {
                 useExisting: forwardRef(() => DsSelect),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "selectTrigger", first: true, predicate: ["selectTrigger"], descendants: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], 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-select__label\" [attr.for]=\"name()\">\n      {{ label() }}\n      @if (required()) {\n        <span class=\"ds-select__required\">*</span>\n      }\n    </label>\n  }\n\n  <!-- Trigger -->\n  <button\n    #selectTrigger\n    type=\"button\"\n    [ngClass]=\"triggerClasses()\"\n    [disabled]=\"isDisabled()\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.aria-controls]=\"listboxId()\"\n    [attr.aria-label]=\"label() || placeholder()\"\n    (click)=\"toggle()\">\n    <span class=\"ds-select__value\">{{ displayValue() }}</span>\n\n    <span class=\"ds-select__icons\">\n      @if (clearable() && selectedOption()) {\n        <button\n          type=\"button\"\n          class=\"ds-select__clear\"\n          aria-label=\"Effacer la s\u00E9lection\"\n          (click)=\"clear($event)\">\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n            <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n            <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n          </svg>\n        </button>\n      }\n      <svg\n        class=\"ds-select__arrow\"\n        [class.ds-select__arrow--open]=\"isOpen()\"\n        width=\"16\"\n        height=\"16\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\">\n        <polyline points=\"6 9 12 15 18 9\"></polyline>\n      </svg>\n    </span>\n  </button>\n\n  <!-- Dropdown -->\n  @if (isOpen()) {\n    <div class=\"ds-select__dropdown\" role=\"presentation\">\n      <!-- Search -->\n      @if (searchable()) {\n        <div class=\"ds-select__search\">\n          <input\n            #searchInput\n            type=\"text\"\n            class=\"ds-select__search-input\"\n            placeholder=\"Rechercher...\"\n            [value]=\"searchQuery()\"\n            (input)=\"onSearchInput($event)\"\n            aria-label=\"Rechercher une option\" />\n        </div>\n      }\n\n      <!-- Options list -->\n      <ul\n        #listbox\n        [id]=\"listboxId()\"\n        class=\"ds-select__listbox\"\n        role=\"listbox\"\n        [attr.aria-label]=\"label() || 'Options'\">\n        @for (option of filteredOptions(); track option.value; let i = $index) {\n          <li\n            [id]=\"getOptionId(i)\"\n            class=\"ds-select__option\"\n            [class.ds-select__option--focused]=\"isOptionFocused(i)\"\n            [class.ds-select__option--selected]=\"isOptionSelected(option)\"\n            [class.ds-select__option--disabled]=\"option.disabled\"\n            role=\"option\"\n            [attr.aria-selected]=\"isOptionSelected(option)\"\n            [attr.aria-disabled]=\"option.disabled\"\n            (click)=\"selectOption(option)\">\n            <span class=\"ds-select__option-label\">{{ option.label }}</span>\n            @if (isOptionSelected(option)) {\n              <svg\n                class=\"ds-select__check\"\n                width=\"16\"\n                height=\"16\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"2\">\n                <polyline points=\"20 6 9 17 4 12\"></polyline>\n              </svg>\n            }\n          </li>\n        } @empty {\n          <li class=\"ds-select__empty\" role=\"option\" aria-disabled=\"true\">\n            Aucun r\u00E9sultat\n          </li>\n        }\n      </ul>\n    </div>\n  }\n\n  <!-- Helper / Error -->\n  @if (error()) {\n    <span class=\"ds-select__error\" role=\"alert\">{{ error() }}</span>\n  } @else if (helper()) {\n    <span class=\"ds-select__helper\">{{ helper() }}</span>\n  }\n</div>\n", styles: [".ds-select{position:relative;display:inline-flex;flex-direction:column;width:100%;font-family:var(--font-family-base)}.ds-select__label{display:block;margin-bottom:var(--space-1);font-size:var(--font-size-2);font-weight:var(--font-weight-medium);color:var(--text-default)}.ds-select__required{color:var(--error);margin-left:var(--space-1)}.ds-select__trigger{display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--select-padding-md, var(--space-2) var(--space-3));background-color:var(--select-bg, var(--background-main));border:1px solid var(--select-border, var(--border-color));border-radius:var(--select-radius, var(--radius-2));font-family:inherit;font-size:var(--select-font-size-md, var(--font-size-3));color:var(--select-text, var(--text-default));cursor:pointer;transition:border-color var(--duration-fast) ease,box-shadow var(--duration-fast) ease}.ds-select__trigger:hover:not(:disabled){border-color:var(--select-hover-border, var(--color-primary))}.ds-select__trigger:focus{outline:none;border-color:var(--select-focus-border, var(--color-primary));box-shadow:0 0 0 3px var(--select-focus-shadow, rgba(125, 75, 192, .2))}.ds-select__trigger:disabled{opacity:.5;cursor:not-allowed;background-color:var(--select-disabled-bg, var(--background-secondary))}.ds-select__trigger--placeholder{color:var(--select-placeholder, var(--text-muted))}.ds-select__value{flex:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ds-select__icons{display:flex;align-items:center;gap:var(--space-1);margin-left:var(--space-2);color:var(--text-muted)}.ds-select__clear{display:flex;align-items:center;justify-content:center;padding:0;background:none;border:none;color:var(--text-muted);cursor:pointer;border-radius:var(--radius-round);transition:color var(--duration-fast) ease}.ds-select__clear:hover{color:var(--error)}.ds-select__arrow{transition:transform var(--duration-fast) ease}.ds-select__arrow--open{transform:rotate(180deg)}.ds-select__dropdown{position:absolute;top:100%;left:0;right:0;z-index:var(--z-dropdown, 1000);margin-top:var(--space-1);background-color:var(--select-dropdown-bg, var(--surface-overlay));border:1px solid var(--select-dropdown-border, var(--border-color));border-radius:var(--select-radius, var(--radius-2));box-shadow:var(--select-dropdown-shadow, var(--shadow-2));overflow:hidden}.ds-select__search{padding:var(--space-2);border-bottom:1px solid var(--border-color)}.ds-select__search-input{width:100%;padding:var(--space-2);border:1px solid var(--border-color);border-radius:var(--radius-1);font-family:inherit;font-size:var(--font-size-2);background-color:var(--background-main);color:var(--text-default)}.ds-select__search-input:focus{outline:none;border-color:var(--color-primary)}.ds-select__search-input::placeholder{color:var(--text-muted)}.ds-select__listbox{list-style:none;margin:0;padding:var(--space-1) 0;max-height:var(--select-max-height, 200px);overflow-y:auto}.ds-select__option{display:flex;align-items:center;justify-content:space-between;padding:var(--space-2) var(--space-3);cursor:pointer;transition:background-color var(--duration-fast) ease}.ds-select__option:hover:not(.ds-select__option--disabled){background-color:var(--select-option-hover-bg, var(--surface-hover))}.ds-select__option--focused{background-color:var(--select-option-hover-bg, var(--surface-hover))}.ds-select__option--selected{background-color:var(--select-option-selected-bg, color-mix(in oklab, var(--color-primary) 10%, transparent));color:var(--select-option-selected-text, var(--color-primary));font-weight:var(--font-weight-medium)}.ds-select__option--disabled{opacity:.5;cursor:not-allowed}.ds-select__option-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ds-select__check{flex-shrink:0;color:var(--color-primary)}.ds-select__empty{padding:var(--space-4);text-align:center;color:var(--text-muted);font-style:italic}.ds-select__helper,.ds-select__error{margin-top:var(--space-1);font-size:var(--font-size-1)}.ds-select__helper{color:var(--text-muted)}.ds-select__error{color:var(--error)}.ds-select--sm .ds-select__trigger{padding:var(--select-padding-sm, var(--space-1) var(--space-2));font-size:var(--select-font-size-sm, var(--font-size-2))}.ds-select--sm .ds-select__option{padding:var(--space-1) var(--space-2);font-size:var(--font-size-2)}.ds-select--lg .ds-select__trigger{padding:var(--select-padding-lg, var(--space-3) var(--space-4));font-size:var(--select-font-size-lg, var(--font-size-4))}.ds-select--lg .ds-select__option{padding:var(--space-3) var(--space-4);font-size:var(--font-size-4)}.ds-select--error .ds-select__trigger{border-color:var(--error)}.ds-select--error .ds-select__trigger:focus{box-shadow:0 0 0 3px #f4433633}.ds-select--disabled .ds-select__label{opacity:.5}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+        ], viewQueries: [{ propertyName: "selectTrigger", first: true, predicate: ["selectTrigger"], descendants: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], 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-select__label\" [attr.for]=\"name()\">\n      {{ label() }}\n      @if (required()) {\n        <span class=\"ds-select__required\">*</span>\n      }\n    </label>\n  }\n\n  <!-- Trigger -->\n  <button\n    #selectTrigger\n    type=\"button\"\n    [ngClass]=\"triggerClasses()\"\n    [disabled]=\"isDisabled()\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.aria-controls]=\"listboxId()\"\n    [attr.aria-label]=\"label() || placeholder()\"\n    (click)=\"toggle()\">\n    <span class=\"ds-select__value\">{{ displayValue() }}</span>\n\n    <span class=\"ds-select__icons\">\n      @if (clearable() && selectedOption()) {\n        <button\n          type=\"button\"\n          class=\"ds-select__clear\"\n          aria-label=\"Effacer la s\u00E9lection\"\n          (click)=\"clear($event)\">\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n            <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n            <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n          </svg>\n        </button>\n      }\n      <svg\n        class=\"ds-select__arrow\"\n        [class.ds-select__arrow--open]=\"isOpen()\"\n        width=\"16\"\n        height=\"16\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\">\n        <polyline points=\"6 9 12 15 18 9\"></polyline>\n      </svg>\n    </span>\n  </button>\n\n  <!-- Dropdown -->\n  @if (isOpen()) {\n    <div class=\"ds-select__dropdown\" role=\"presentation\">\n      <!-- Search -->\n      @if (searchable()) {\n        <div class=\"ds-select__search\">\n          <input\n            #searchInput\n            type=\"text\"\n            class=\"ds-select__search-input\"\n            placeholder=\"Rechercher...\"\n            [value]=\"searchQuery()\"\n            (input)=\"onSearchInput($event)\"\n            aria-label=\"Rechercher une option\" />\n        </div>\n      }\n\n      <!-- Options list -->\n      <ul\n        #listbox\n        [id]=\"listboxId()\"\n        class=\"ds-select__listbox\"\n        role=\"listbox\"\n        [attr.aria-label]=\"label() || 'Options'\">\n        @for (option of filteredOptions(); track option.value; let i = $index) {\n          <li\n            [id]=\"getOptionId(i)\"\n            class=\"ds-select__option\"\n            [class.ds-select__option--focused]=\"isOptionFocused(i)\"\n            [class.ds-select__option--selected]=\"isOptionSelected(option)\"\n            [class.ds-select__option--disabled]=\"option.disabled\"\n            role=\"option\"\n            [attr.aria-selected]=\"isOptionSelected(option)\"\n            [attr.aria-disabled]=\"option.disabled\"\n            (click)=\"selectOption(option)\">\n            <span class=\"ds-select__option-label\">{{ option.label }}</span>\n            @if (isOptionSelected(option)) {\n              <svg\n                class=\"ds-select__check\"\n                width=\"16\"\n                height=\"16\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"2\">\n                <polyline points=\"20 6 9 17 4 12\"></polyline>\n              </svg>\n            }\n          </li>\n        } @empty {\n          <li class=\"ds-select__empty\" role=\"option\" aria-disabled=\"true\">\n            Aucun r\u00E9sultat\n          </li>\n        }\n      </ul>\n    </div>\n  }\n\n  <!-- Helper / Error -->\n  @if (error()) {\n    <span class=\"ds-select__error\" role=\"alert\">{{ error() }}</span>\n  } @else if (helper()) {\n    <span class=\"ds-select__helper\">{{ helper() }}</span>\n  }\n</div>\n", styles: [".ds-select{position:relative;display:inline-flex;flex-direction:column;width:100%;font-family:var(--font-family-base)}.ds-select__label{display:block;margin-bottom:var(--space-1);font-size:var(--font-size-2);font-weight:var(--font-weight-medium);color:var(--text-default)}.ds-select__required{color:var(--error);margin-left:var(--space-1)}.ds-select__trigger{display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--select-padding-md, var(--space-2) var(--space-3));background-color:var(--select-bg, var(--background-main));border:1px solid var(--select-border, var(--border-color));border-radius:var(--select-radius, var(--radius-2));font-family:inherit;font-size:var(--select-font-size-md, var(--font-size-3));color:var(--select-text, var(--text-default));cursor:pointer;transition:border-color var(--duration-fast) ease,box-shadow var(--duration-fast) ease}.ds-select__trigger:hover:not(:disabled){border-color:var(--select-hover-border, var(--color-primary))}.ds-select__trigger:focus{outline:none;border-color:var(--select-focus-border, var(--color-primary));box-shadow:0 0 0 3px var(--select-focus-shadow, rgba(var(--color-primary-rgb), .2))}.ds-select__trigger:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.ds-select__trigger:disabled{opacity:.5;cursor:not-allowed;background-color:var(--select-disabled-bg, var(--background-secondary))}.ds-select__trigger--placeholder{color:var(--select-placeholder, var(--text-muted))}.ds-select__value{flex:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ds-select__icons{display:flex;align-items:center;gap:var(--space-1);margin-left:var(--space-2);color:var(--text-muted)}.ds-select__clear{display:flex;align-items:center;justify-content:center;padding:0;background:none;border:none;color:var(--text-muted);cursor:pointer;border-radius:var(--radius-round);transition:color var(--duration-fast) ease}.ds-select__clear:hover{color:var(--error)}.ds-select__arrow{transition:transform var(--duration-fast) ease}.ds-select__arrow--open{transform:rotate(180deg)}.ds-select__dropdown{position:absolute;top:100%;left:0;right:0;z-index:var(--z-dropdown, 1000);margin-top:var(--space-1);background-color:var(--select-dropdown-bg, var(--surface-overlay));border:1px solid var(--select-dropdown-border, var(--border-color));border-radius:var(--select-radius, var(--radius-2));box-shadow:var(--select-dropdown-shadow, var(--shadow-2));overflow:hidden}.ds-select__search{padding:var(--space-2);border-bottom:1px solid var(--border-color)}.ds-select__search-input{width:100%;padding:var(--space-2);border:1px solid var(--border-color);border-radius:var(--radius-1);font-family:inherit;font-size:var(--font-size-2);background-color:var(--background-main);color:var(--text-default)}.ds-select__search-input:focus{outline:none;border-color:var(--color-primary)}.ds-select__search-input::placeholder{color:var(--text-muted)}.ds-select__listbox{list-style:none;margin:0;padding:var(--space-1) 0;max-height:var(--select-max-height, 200px);overflow-y:auto}.ds-select__option{display:flex;align-items:center;justify-content:space-between;padding:var(--space-2) var(--space-3);cursor:pointer;transition:background-color var(--duration-fast) ease}.ds-select__option:hover:not(.ds-select__option--disabled){background-color:var(--select-option-hover-bg, var(--surface-hover))}.ds-select__option--focused{background-color:var(--select-option-hover-bg, var(--surface-hover))}.ds-select__option--selected{background-color:var(--select-option-selected-bg, color-mix(in oklab, var(--color-primary) 10%, transparent));color:var(--select-option-selected-text, var(--color-primary));font-weight:var(--font-weight-medium)}.ds-select__option--disabled{opacity:.5;cursor:not-allowed}.ds-select__option-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ds-select__check{flex-shrink:0;color:var(--color-primary)}.ds-select__empty{padding:var(--space-4);text-align:center;color:var(--text-muted);font-style:italic}.ds-select__helper,.ds-select__error{margin-top:var(--space-1);font-size:var(--font-size-1)}.ds-select__helper{color:var(--text-muted)}.ds-select__error{color:var(--error)}.ds-select--sm .ds-select__trigger{padding:var(--select-padding-sm, var(--space-1) var(--space-2));font-size:var(--select-font-size-sm, var(--font-size-2))}.ds-select--sm .ds-select__option{padding:var(--space-1) var(--space-2);font-size:var(--font-size-2)}.ds-select--lg .ds-select__trigger{padding:var(--select-padding-lg, var(--space-3) var(--space-4));font-size:var(--select-font-size-lg, var(--font-size-4))}.ds-select--lg .ds-select__option{padding:var(--space-3) var(--space-4);font-size:var(--font-size-4)}.ds-select--error .ds-select__trigger{border-color:var(--error)}.ds-select--error .ds-select__trigger:focus{box-shadow:0 0 0 3px rgba(var(--error-rgb),.2)}.ds-select--disabled .ds-select__label{opacity:.5}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsSelect, decorators: [{
             type: Component,
@@ -5781,7 +5781,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                             useExisting: forwardRef(() => DsSelect),
                             multi: true,
                         },
-                    ], template: "<div [ngClass]=\"containerClasses()\">\n  <!-- Label -->\n  @if (label()) {\n    <label class=\"ds-select__label\" [attr.for]=\"name()\">\n      {{ label() }}\n      @if (required()) {\n        <span class=\"ds-select__required\">*</span>\n      }\n    </label>\n  }\n\n  <!-- Trigger -->\n  <button\n    #selectTrigger\n    type=\"button\"\n    [ngClass]=\"triggerClasses()\"\n    [disabled]=\"isDisabled()\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.aria-controls]=\"listboxId()\"\n    [attr.aria-label]=\"label() || placeholder()\"\n    (click)=\"toggle()\">\n    <span class=\"ds-select__value\">{{ displayValue() }}</span>\n\n    <span class=\"ds-select__icons\">\n      @if (clearable() && selectedOption()) {\n        <button\n          type=\"button\"\n          class=\"ds-select__clear\"\n          aria-label=\"Effacer la s\u00E9lection\"\n          (click)=\"clear($event)\">\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n            <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n            <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n          </svg>\n        </button>\n      }\n      <svg\n        class=\"ds-select__arrow\"\n        [class.ds-select__arrow--open]=\"isOpen()\"\n        width=\"16\"\n        height=\"16\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\">\n        <polyline points=\"6 9 12 15 18 9\"></polyline>\n      </svg>\n    </span>\n  </button>\n\n  <!-- Dropdown -->\n  @if (isOpen()) {\n    <div class=\"ds-select__dropdown\" role=\"presentation\">\n      <!-- Search -->\n      @if (searchable()) {\n        <div class=\"ds-select__search\">\n          <input\n            #searchInput\n            type=\"text\"\n            class=\"ds-select__search-input\"\n            placeholder=\"Rechercher...\"\n            [value]=\"searchQuery()\"\n            (input)=\"onSearchInput($event)\"\n            aria-label=\"Rechercher une option\" />\n        </div>\n      }\n\n      <!-- Options list -->\n      <ul\n        #listbox\n        [id]=\"listboxId()\"\n        class=\"ds-select__listbox\"\n        role=\"listbox\"\n        [attr.aria-label]=\"label() || 'Options'\">\n        @for (option of filteredOptions(); track option.value; let i = $index) {\n          <li\n            [id]=\"getOptionId(i)\"\n            class=\"ds-select__option\"\n            [class.ds-select__option--focused]=\"isOptionFocused(i)\"\n            [class.ds-select__option--selected]=\"isOptionSelected(option)\"\n            [class.ds-select__option--disabled]=\"option.disabled\"\n            role=\"option\"\n            [attr.aria-selected]=\"isOptionSelected(option)\"\n            [attr.aria-disabled]=\"option.disabled\"\n            (click)=\"selectOption(option)\">\n            <span class=\"ds-select__option-label\">{{ option.label }}</span>\n            @if (isOptionSelected(option)) {\n              <svg\n                class=\"ds-select__check\"\n                width=\"16\"\n                height=\"16\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"2\">\n                <polyline points=\"20 6 9 17 4 12\"></polyline>\n              </svg>\n            }\n          </li>\n        } @empty {\n          <li class=\"ds-select__empty\" role=\"option\" aria-disabled=\"true\">\n            Aucun r\u00E9sultat\n          </li>\n        }\n      </ul>\n    </div>\n  }\n\n  <!-- Helper / Error -->\n  @if (error()) {\n    <span class=\"ds-select__error\" role=\"alert\">{{ error() }}</span>\n  } @else if (helper()) {\n    <span class=\"ds-select__helper\">{{ helper() }}</span>\n  }\n</div>\n", styles: [".ds-select{position:relative;display:inline-flex;flex-direction:column;width:100%;font-family:var(--font-family-base)}.ds-select__label{display:block;margin-bottom:var(--space-1);font-size:var(--font-size-2);font-weight:var(--font-weight-medium);color:var(--text-default)}.ds-select__required{color:var(--error);margin-left:var(--space-1)}.ds-select__trigger{display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--select-padding-md, var(--space-2) var(--space-3));background-color:var(--select-bg, var(--background-main));border:1px solid var(--select-border, var(--border-color));border-radius:var(--select-radius, var(--radius-2));font-family:inherit;font-size:var(--select-font-size-md, var(--font-size-3));color:var(--select-text, var(--text-default));cursor:pointer;transition:border-color var(--duration-fast) ease,box-shadow var(--duration-fast) ease}.ds-select__trigger:hover:not(:disabled){border-color:var(--select-hover-border, var(--color-primary))}.ds-select__trigger:focus{outline:none;border-color:var(--select-focus-border, var(--color-primary));box-shadow:0 0 0 3px var(--select-focus-shadow, rgba(125, 75, 192, .2))}.ds-select__trigger:disabled{opacity:.5;cursor:not-allowed;background-color:var(--select-disabled-bg, var(--background-secondary))}.ds-select__trigger--placeholder{color:var(--select-placeholder, var(--text-muted))}.ds-select__value{flex:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ds-select__icons{display:flex;align-items:center;gap:var(--space-1);margin-left:var(--space-2);color:var(--text-muted)}.ds-select__clear{display:flex;align-items:center;justify-content:center;padding:0;background:none;border:none;color:var(--text-muted);cursor:pointer;border-radius:var(--radius-round);transition:color var(--duration-fast) ease}.ds-select__clear:hover{color:var(--error)}.ds-select__arrow{transition:transform var(--duration-fast) ease}.ds-select__arrow--open{transform:rotate(180deg)}.ds-select__dropdown{position:absolute;top:100%;left:0;right:0;z-index:var(--z-dropdown, 1000);margin-top:var(--space-1);background-color:var(--select-dropdown-bg, var(--surface-overlay));border:1px solid var(--select-dropdown-border, var(--border-color));border-radius:var(--select-radius, var(--radius-2));box-shadow:var(--select-dropdown-shadow, var(--shadow-2));overflow:hidden}.ds-select__search{padding:var(--space-2);border-bottom:1px solid var(--border-color)}.ds-select__search-input{width:100%;padding:var(--space-2);border:1px solid var(--border-color);border-radius:var(--radius-1);font-family:inherit;font-size:var(--font-size-2);background-color:var(--background-main);color:var(--text-default)}.ds-select__search-input:focus{outline:none;border-color:var(--color-primary)}.ds-select__search-input::placeholder{color:var(--text-muted)}.ds-select__listbox{list-style:none;margin:0;padding:var(--space-1) 0;max-height:var(--select-max-height, 200px);overflow-y:auto}.ds-select__option{display:flex;align-items:center;justify-content:space-between;padding:var(--space-2) var(--space-3);cursor:pointer;transition:background-color var(--duration-fast) ease}.ds-select__option:hover:not(.ds-select__option--disabled){background-color:var(--select-option-hover-bg, var(--surface-hover))}.ds-select__option--focused{background-color:var(--select-option-hover-bg, var(--surface-hover))}.ds-select__option--selected{background-color:var(--select-option-selected-bg, color-mix(in oklab, var(--color-primary) 10%, transparent));color:var(--select-option-selected-text, var(--color-primary));font-weight:var(--font-weight-medium)}.ds-select__option--disabled{opacity:.5;cursor:not-allowed}.ds-select__option-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ds-select__check{flex-shrink:0;color:var(--color-primary)}.ds-select__empty{padding:var(--space-4);text-align:center;color:var(--text-muted);font-style:italic}.ds-select__helper,.ds-select__error{margin-top:var(--space-1);font-size:var(--font-size-1)}.ds-select__helper{color:var(--text-muted)}.ds-select__error{color:var(--error)}.ds-select--sm .ds-select__trigger{padding:var(--select-padding-sm, var(--space-1) var(--space-2));font-size:var(--select-font-size-sm, var(--font-size-2))}.ds-select--sm .ds-select__option{padding:var(--space-1) var(--space-2);font-size:var(--font-size-2)}.ds-select--lg .ds-select__trigger{padding:var(--select-padding-lg, var(--space-3) var(--space-4));font-size:var(--select-font-size-lg, var(--font-size-4))}.ds-select--lg .ds-select__option{padding:var(--space-3) var(--space-4);font-size:var(--font-size-4)}.ds-select--error .ds-select__trigger{border-color:var(--error)}.ds-select--error .ds-select__trigger:focus{box-shadow:0 0 0 3px #f4433633}.ds-select--disabled .ds-select__label{opacity:.5}\n"] }]
+                    ], template: "<div [ngClass]=\"containerClasses()\">\n  <!-- Label -->\n  @if (label()) {\n    <label class=\"ds-select__label\" [attr.for]=\"name()\">\n      {{ label() }}\n      @if (required()) {\n        <span class=\"ds-select__required\">*</span>\n      }\n    </label>\n  }\n\n  <!-- Trigger -->\n  <button\n    #selectTrigger\n    type=\"button\"\n    [ngClass]=\"triggerClasses()\"\n    [disabled]=\"isDisabled()\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.aria-controls]=\"listboxId()\"\n    [attr.aria-label]=\"label() || placeholder()\"\n    (click)=\"toggle()\">\n    <span class=\"ds-select__value\">{{ displayValue() }}</span>\n\n    <span class=\"ds-select__icons\">\n      @if (clearable() && selectedOption()) {\n        <button\n          type=\"button\"\n          class=\"ds-select__clear\"\n          aria-label=\"Effacer la s\u00E9lection\"\n          (click)=\"clear($event)\">\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n            <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n            <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n          </svg>\n        </button>\n      }\n      <svg\n        class=\"ds-select__arrow\"\n        [class.ds-select__arrow--open]=\"isOpen()\"\n        width=\"16\"\n        height=\"16\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\">\n        <polyline points=\"6 9 12 15 18 9\"></polyline>\n      </svg>\n    </span>\n  </button>\n\n  <!-- Dropdown -->\n  @if (isOpen()) {\n    <div class=\"ds-select__dropdown\" role=\"presentation\">\n      <!-- Search -->\n      @if (searchable()) {\n        <div class=\"ds-select__search\">\n          <input\n            #searchInput\n            type=\"text\"\n            class=\"ds-select__search-input\"\n            placeholder=\"Rechercher...\"\n            [value]=\"searchQuery()\"\n            (input)=\"onSearchInput($event)\"\n            aria-label=\"Rechercher une option\" />\n        </div>\n      }\n\n      <!-- Options list -->\n      <ul\n        #listbox\n        [id]=\"listboxId()\"\n        class=\"ds-select__listbox\"\n        role=\"listbox\"\n        [attr.aria-label]=\"label() || 'Options'\">\n        @for (option of filteredOptions(); track option.value; let i = $index) {\n          <li\n            [id]=\"getOptionId(i)\"\n            class=\"ds-select__option\"\n            [class.ds-select__option--focused]=\"isOptionFocused(i)\"\n            [class.ds-select__option--selected]=\"isOptionSelected(option)\"\n            [class.ds-select__option--disabled]=\"option.disabled\"\n            role=\"option\"\n            [attr.aria-selected]=\"isOptionSelected(option)\"\n            [attr.aria-disabled]=\"option.disabled\"\n            (click)=\"selectOption(option)\">\n            <span class=\"ds-select__option-label\">{{ option.label }}</span>\n            @if (isOptionSelected(option)) {\n              <svg\n                class=\"ds-select__check\"\n                width=\"16\"\n                height=\"16\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"2\">\n                <polyline points=\"20 6 9 17 4 12\"></polyline>\n              </svg>\n            }\n          </li>\n        } @empty {\n          <li class=\"ds-select__empty\" role=\"option\" aria-disabled=\"true\">\n            Aucun r\u00E9sultat\n          </li>\n        }\n      </ul>\n    </div>\n  }\n\n  <!-- Helper / Error -->\n  @if (error()) {\n    <span class=\"ds-select__error\" role=\"alert\">{{ error() }}</span>\n  } @else if (helper()) {\n    <span class=\"ds-select__helper\">{{ helper() }}</span>\n  }\n</div>\n", styles: [".ds-select{position:relative;display:inline-flex;flex-direction:column;width:100%;font-family:var(--font-family-base)}.ds-select__label{display:block;margin-bottom:var(--space-1);font-size:var(--font-size-2);font-weight:var(--font-weight-medium);color:var(--text-default)}.ds-select__required{color:var(--error);margin-left:var(--space-1)}.ds-select__trigger{display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--select-padding-md, var(--space-2) var(--space-3));background-color:var(--select-bg, var(--background-main));border:1px solid var(--select-border, var(--border-color));border-radius:var(--select-radius, var(--radius-2));font-family:inherit;font-size:var(--select-font-size-md, var(--font-size-3));color:var(--select-text, var(--text-default));cursor:pointer;transition:border-color var(--duration-fast) ease,box-shadow var(--duration-fast) ease}.ds-select__trigger:hover:not(:disabled){border-color:var(--select-hover-border, var(--color-primary))}.ds-select__trigger:focus{outline:none;border-color:var(--select-focus-border, var(--color-primary));box-shadow:0 0 0 3px var(--select-focus-shadow, rgba(var(--color-primary-rgb), .2))}.ds-select__trigger:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.ds-select__trigger:disabled{opacity:.5;cursor:not-allowed;background-color:var(--select-disabled-bg, var(--background-secondary))}.ds-select__trigger--placeholder{color:var(--select-placeholder, var(--text-muted))}.ds-select__value{flex:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ds-select__icons{display:flex;align-items:center;gap:var(--space-1);margin-left:var(--space-2);color:var(--text-muted)}.ds-select__clear{display:flex;align-items:center;justify-content:center;padding:0;background:none;border:none;color:var(--text-muted);cursor:pointer;border-radius:var(--radius-round);transition:color var(--duration-fast) ease}.ds-select__clear:hover{color:var(--error)}.ds-select__arrow{transition:transform var(--duration-fast) ease}.ds-select__arrow--open{transform:rotate(180deg)}.ds-select__dropdown{position:absolute;top:100%;left:0;right:0;z-index:var(--z-dropdown, 1000);margin-top:var(--space-1);background-color:var(--select-dropdown-bg, var(--surface-overlay));border:1px solid var(--select-dropdown-border, var(--border-color));border-radius:var(--select-radius, var(--radius-2));box-shadow:var(--select-dropdown-shadow, var(--shadow-2));overflow:hidden}.ds-select__search{padding:var(--space-2);border-bottom:1px solid var(--border-color)}.ds-select__search-input{width:100%;padding:var(--space-2);border:1px solid var(--border-color);border-radius:var(--radius-1);font-family:inherit;font-size:var(--font-size-2);background-color:var(--background-main);color:var(--text-default)}.ds-select__search-input:focus{outline:none;border-color:var(--color-primary)}.ds-select__search-input::placeholder{color:var(--text-muted)}.ds-select__listbox{list-style:none;margin:0;padding:var(--space-1) 0;max-height:var(--select-max-height, 200px);overflow-y:auto}.ds-select__option{display:flex;align-items:center;justify-content:space-between;padding:var(--space-2) var(--space-3);cursor:pointer;transition:background-color var(--duration-fast) ease}.ds-select__option:hover:not(.ds-select__option--disabled){background-color:var(--select-option-hover-bg, var(--surface-hover))}.ds-select__option--focused{background-color:var(--select-option-hover-bg, var(--surface-hover))}.ds-select__option--selected{background-color:var(--select-option-selected-bg, color-mix(in oklab, var(--color-primary) 10%, transparent));color:var(--select-option-selected-text, var(--color-primary));font-weight:var(--font-weight-medium)}.ds-select__option--disabled{opacity:.5;cursor:not-allowed}.ds-select__option-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ds-select__check{flex-shrink:0;color:var(--color-primary)}.ds-select__empty{padding:var(--space-4);text-align:center;color:var(--text-muted);font-style:italic}.ds-select__helper,.ds-select__error{margin-top:var(--space-1);font-size:var(--font-size-1)}.ds-select__helper{color:var(--text-muted)}.ds-select__error{color:var(--error)}.ds-select--sm .ds-select__trigger{padding:var(--select-padding-sm, var(--space-1) var(--space-2));font-size:var(--select-font-size-sm, var(--font-size-2))}.ds-select--sm .ds-select__option{padding:var(--space-1) var(--space-2);font-size:var(--font-size-2)}.ds-select--lg .ds-select__trigger{padding:var(--select-padding-lg, var(--space-3) var(--space-4));font-size:var(--select-font-size-lg, var(--font-size-4))}.ds-select--lg .ds-select__option{padding:var(--space-3) var(--space-4);font-size:var(--font-size-4)}.ds-select--error .ds-select__trigger{border-color:var(--error)}.ds-select--error .ds-select__trigger:focus{box-shadow:0 0 0 3px rgba(var(--error-rgb),.2)}.ds-select--disabled .ds-select__label{opacity:.5}\n"] }]
         }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], helper: [{ type: i0.Input, args: [{ isSignal: true, alias: "helper", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], selectTrigger: [{
                 type: ViewChild,
                 args: ['selectTrigger']
@@ -6240,7 +6240,7 @@ class DsCombobox {
                 useExisting: forwardRef(() => DsCombobox),
                 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-combobox__label\" [attr.for]=\"inputId()\">\n      {{ label() }}\n      @if (required()) {\n        <span class=\"ds-combobox__required\">*</span>\n      }\n    </label>\n  }\n\n  <!-- Input wrapper -->\n  <div class=\"ds-combobox__input-wrapper\">\n    <input\n      #inputElement\n      type=\"text\"\n      [id]=\"inputId()\"\n      [ngClass]=\"inputClasses()\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [value]=\"inputValue()\"\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)=\"onInput($event)\" />\n\n    <span class=\"ds-combobox__icons\">\n      @if (clearable() && inputValue()) {\n        <button\n          type=\"button\"\n          class=\"ds-combobox__clear\"\n          aria-label=\"Effacer\"\n          tabindex=\"-1\"\n          (mousedown)=\"clear($event)\">\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n            <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n            <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n          </svg>\n        </button>\n      }\n      <span class=\"ds-combobox__arrow\" [class.ds-combobox__arrow--open]=\"isOpen()\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n          <polyline points=\"6 9 12 15 18 9\"></polyline>\n        </svg>\n      </span>\n    </span>\n  </div>\n\n  <!-- Dropdown -->\n  @if (shouldShowDropdown()) {\n    <div class=\"ds-combobox__dropdown\" role=\"presentation\">\n      @if (loading()) {\n        <div class=\"ds-combobox__loading\">\n          <span class=\"ds-combobox__loading-spinner\"></span>\n          <span>{{ loadingText() }}</span>\n        </div>\n      } @else {\n        <ul\n          #listbox\n          [id]=\"listboxId()\"\n          class=\"ds-combobox__listbox\"\n          role=\"listbox\"\n          [attr.aria-label]=\"label() || 'Options'\">\n          @for (option of filteredOptions(); track option.value; let i = $index) {\n            <li\n              [id]=\"getOptionId(i)\"\n              class=\"ds-combobox__option\"\n              [class.ds-combobox__option--focused]=\"isOptionFocused(i)\"\n              [class.ds-combobox__option--selected]=\"isOptionSelected(option)\"\n              [class.ds-combobox__option--disabled]=\"option.disabled\"\n              role=\"option\"\n              [attr.aria-selected]=\"isOptionSelected(option)\"\n              [attr.aria-disabled]=\"option.disabled\"\n              (mousedown)=\"selectOption(option)\">\n              <span class=\"ds-combobox__option-content\">\n                <span class=\"ds-combobox__option-label\">{{ option.label }}</span>\n                @if (option.description) {\n                  <span class=\"ds-combobox__option-description\">{{ option.description }}</span>\n                }\n              </span>\n              @if (isOptionSelected(option)) {\n                <svg\n                  class=\"ds-combobox__check\"\n                  width=\"16\"\n                  height=\"16\"\n                  viewBox=\"0 0 24 24\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"2\">\n                  <polyline points=\"20 6 9 17 4 12\"></polyline>\n                </svg>\n              }\n            </li>\n          } @empty {\n            <li class=\"ds-combobox__empty\" role=\"option\" aria-disabled=\"true\">\n              {{ noResultsText() }}\n            </li>\n          }\n        </ul>\n      }\n    </div>\n  }\n\n  <!-- Helper / Error -->\n  @if (error()) {\n    <span class=\"ds-combobox__error\" role=\"alert\">{{ error() }}</span>\n  } @else if (helper()) {\n    <span class=\"ds-combobox__helper\">{{ helper() }}</span>\n  }\n</div>\n", styles: [".ds-combobox{position:relative;display:inline-flex;flex-direction:column;width:100%;font-family:var(--font-family-base)}.ds-combobox__label{display:block;margin-bottom:var(--space-1);font-size:var(--font-size-2);font-weight:var(--font-weight-medium);color:var(--text-default)}.ds-combobox__required{color:var(--error);margin-left:var(--space-1)}.ds-combobox__input-wrapper{position:relative;display:flex;align-items:center}.ds-combobox__input{width:100%;padding:var(--combobox-padding-md, var(--space-2) var(--space-3));padding-right:var(--space-10);background-color:var(--combobox-bg, var(--background-main));border:1px solid var(--combobox-border, var(--border-color));border-radius:var(--combobox-radius, var(--radius-2));font-family:inherit;font-size:var(--combobox-font-size-md, var(--font-size-3));color:var(--combobox-text, var(--text-default));transition:border-color var(--duration-fast) ease,box-shadow var(--duration-fast) ease}.ds-combobox__input::placeholder{color:var(--combobox-placeholder, var(--text-muted))}.ds-combobox__input:hover:not(:disabled){border-color:var(--combobox-hover-border, var(--color-primary))}.ds-combobox__input:focus{outline:none;border-color:var(--combobox-focus-border, var(--color-primary));box-shadow:0 0 0 3px var(--combobox-focus-shadow, rgba(125, 75, 192, .2))}.ds-combobox__input:disabled{opacity:.5;cursor:not-allowed;background-color:var(--combobox-disabled-bg, var(--background-secondary))}.ds-combobox__icons{position:absolute;right:var(--space-2);display:flex;align-items:center;gap:var(--space-1);color:var(--text-muted);pointer-events:none}.ds-combobox__clear{display:flex;align-items:center;justify-content:center;padding:var(--space-1);background:none;border:none;color:var(--text-muted);cursor:pointer;border-radius:var(--radius-round);transition:color var(--duration-fast) ease;pointer-events:auto}.ds-combobox__clear:hover{color:var(--error)}.ds-combobox__arrow{display:flex;align-items:center;transition:transform var(--duration-fast) ease}.ds-combobox__arrow--open{transform:rotate(180deg)}.ds-combobox__dropdown{position:absolute;top:100%;left:0;right:0;z-index:var(--z-dropdown, 1000);margin-top:var(--space-1);background-color:var(--combobox-dropdown-bg, var(--surface-overlay));border:1px solid var(--combobox-dropdown-border, var(--border-color));border-radius:var(--combobox-radius, var(--radius-2));box-shadow:var(--combobox-dropdown-shadow, var(--shadow-2));overflow:hidden}.ds-combobox__loading{display:flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-4);color:var(--text-muted);font-style:italic}.ds-combobox__loading-spinner{width:16px;height:16px;border:2px solid var(--border-color);border-top-color:var(--color-primary);border-radius:50%;animation:ds-combobox-spin .8s linear infinite}.ds-combobox__listbox{list-style:none;margin:0;padding:var(--space-1) 0;max-height:var(--combobox-max-height, 250px);overflow-y:auto}.ds-combobox__option{display:flex;align-items:flex-start;justify-content:space-between;padding:var(--space-2) var(--space-3);cursor:pointer;transition:background-color var(--duration-fast) ease}.ds-combobox__option:hover:not(.ds-combobox__option--disabled){background-color:var(--combobox-option-hover-bg, var(--surface-hover))}.ds-combobox__option--focused{background-color:var(--combobox-option-hover-bg, var(--surface-hover))}.ds-combobox__option--selected{background-color:var(--combobox-option-selected-bg, color-mix(in oklab, var(--color-primary) 10%, transparent));color:var(--combobox-option-selected-text, var(--color-primary))}.ds-combobox__option--disabled{opacity:.5;cursor:not-allowed}.ds-combobox__option-content{display:flex;flex-direction:column;flex:1;min-width:0}.ds-combobox__option-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ds-combobox__option-description{font-size:var(--font-size-1);color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:var(--space-1)}.ds-combobox__check{flex-shrink:0;color:var(--color-primary);margin-left:var(--space-2);margin-top:var(--space-1)}.ds-combobox__empty{padding:var(--space-4);text-align:center;color:var(--text-muted);font-style:italic}.ds-combobox__helper,.ds-combobox__error{margin-top:var(--space-1);font-size:var(--font-size-1)}.ds-combobox__helper{color:var(--text-muted)}.ds-combobox__error{color:var(--error)}.ds-combobox--sm .ds-combobox__input{padding:var(--combobox-padding-sm, var(--space-1) var(--space-2));padding-right:var(--space-8);font-size:var(--combobox-font-size-sm, var(--font-size-2))}.ds-combobox--sm .ds-combobox__option{padding:var(--space-1) var(--space-2);font-size:var(--font-size-2)}.ds-combobox--lg .ds-combobox__input{padding:var(--combobox-padding-lg, var(--space-3) var(--space-4));padding-right:var(--space-12);font-size:var(--combobox-font-size-lg, var(--font-size-4))}.ds-combobox--lg .ds-combobox__option{padding:var(--space-3) var(--space-4);font-size:var(--font-size-4)}.ds-combobox--error .ds-combobox__input{border-color:var(--error)}.ds-combobox--error .ds-combobox__input:focus{box-shadow:0 0 0 3px #f4433633}.ds-combobox--disabled .ds-combobox__label{opacity:.5}@keyframes ds-combobox-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+        ], 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-combobox__label\" [attr.for]=\"inputId()\">\n      {{ label() }}\n      @if (required()) {\n        <span class=\"ds-combobox__required\">*</span>\n      }\n    </label>\n  }\n\n  <!-- Input wrapper -->\n  <div class=\"ds-combobox__input-wrapper\">\n    <input\n      #inputElement\n      type=\"text\"\n      [id]=\"inputId()\"\n      [ngClass]=\"inputClasses()\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [value]=\"inputValue()\"\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)=\"onInput($event)\" />\n\n    <span class=\"ds-combobox__icons\">\n      @if (clearable() && inputValue()) {\n        <button\n          type=\"button\"\n          class=\"ds-combobox__clear\"\n          aria-label=\"Effacer\"\n          tabindex=\"-1\"\n          (mousedown)=\"clear($event)\">\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n            <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n            <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n          </svg>\n        </button>\n      }\n      <span class=\"ds-combobox__arrow\" [class.ds-combobox__arrow--open]=\"isOpen()\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n          <polyline points=\"6 9 12 15 18 9\"></polyline>\n        </svg>\n      </span>\n    </span>\n  </div>\n\n  <!-- Dropdown -->\n  @if (shouldShowDropdown()) {\n    <div class=\"ds-combobox__dropdown\" role=\"presentation\">\n      @if (loading()) {\n        <div class=\"ds-combobox__loading\">\n          <span class=\"ds-combobox__loading-spinner\"></span>\n          <span>{{ loadingText() }}</span>\n        </div>\n      } @else {\n        <ul\n          #listbox\n          [id]=\"listboxId()\"\n          class=\"ds-combobox__listbox\"\n          role=\"listbox\"\n          [attr.aria-label]=\"label() || 'Options'\">\n          @for (option of filteredOptions(); track option.value; let i = $index) {\n            <li\n              [id]=\"getOptionId(i)\"\n              class=\"ds-combobox__option\"\n              [class.ds-combobox__option--focused]=\"isOptionFocused(i)\"\n              [class.ds-combobox__option--selected]=\"isOptionSelected(option)\"\n              [class.ds-combobox__option--disabled]=\"option.disabled\"\n              role=\"option\"\n              [attr.aria-selected]=\"isOptionSelected(option)\"\n              [attr.aria-disabled]=\"option.disabled\"\n              (mousedown)=\"selectOption(option)\">\n              <span class=\"ds-combobox__option-content\">\n                <span class=\"ds-combobox__option-label\">{{ option.label }}</span>\n                @if (option.description) {\n                  <span class=\"ds-combobox__option-description\">{{ option.description }}</span>\n                }\n              </span>\n              @if (isOptionSelected(option)) {\n                <svg\n                  class=\"ds-combobox__check\"\n                  width=\"16\"\n                  height=\"16\"\n                  viewBox=\"0 0 24 24\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"2\">\n                  <polyline points=\"20 6 9 17 4 12\"></polyline>\n                </svg>\n              }\n            </li>\n          } @empty {\n            <li class=\"ds-combobox__empty\" role=\"option\" aria-disabled=\"true\">\n              {{ noResultsText() }}\n            </li>\n          }\n        </ul>\n      }\n    </div>\n  }\n\n  <!-- Helper / Error -->\n  @if (error()) {\n    <span class=\"ds-combobox__error\" role=\"alert\">{{ error() }}</span>\n  } @else if (helper()) {\n    <span class=\"ds-combobox__helper\">{{ helper() }}</span>\n  }\n</div>\n", styles: [".ds-combobox{position:relative;display:inline-flex;flex-direction:column;width:100%;font-family:var(--font-family-base)}.ds-combobox__label{display:block;margin-bottom:var(--space-1);font-size:var(--font-size-2);font-weight:var(--font-weight-medium);color:var(--text-default)}.ds-combobox__required{color:var(--error);margin-left:var(--space-1)}.ds-combobox__input-wrapper{position:relative;display:flex;align-items:center}.ds-combobox__input{width:100%;padding:var(--combobox-padding-md, var(--space-2) var(--space-3));padding-right:var(--space-10);background-color:var(--combobox-bg, var(--background-main));border:1px solid var(--combobox-border, var(--border-color));border-radius:var(--combobox-radius, var(--radius-2));font-family:inherit;font-size:var(--combobox-font-size-md, var(--font-size-3));color:var(--combobox-text, var(--text-default));transition:border-color var(--duration-fast) ease,box-shadow var(--duration-fast) ease}.ds-combobox__input::placeholder{color:var(--combobox-placeholder, var(--text-muted))}.ds-combobox__input:hover:not(:disabled){border-color:var(--combobox-hover-border, var(--color-primary))}.ds-combobox__input:focus{outline:none;border-color:var(--combobox-focus-border, var(--color-primary));box-shadow:0 0 0 3px var(--combobox-focus-shadow, rgba(var(--color-primary-rgb), .2))}.ds-combobox__input:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.ds-combobox__input:disabled{opacity:.5;cursor:not-allowed;background-color:var(--combobox-disabled-bg, var(--background-secondary))}.ds-combobox__icons{position:absolute;right:var(--space-2);display:flex;align-items:center;gap:var(--space-1);color:var(--text-muted);pointer-events:none}.ds-combobox__clear{display:flex;align-items:center;justify-content:center;padding:var(--space-1);background:none;border:none;color:var(--text-muted);cursor:pointer;border-radius:var(--radius-round);transition:color var(--duration-fast) ease;pointer-events:auto}.ds-combobox__clear:hover{color:var(--error)}.ds-combobox__arrow{display:flex;align-items:center;transition:transform var(--duration-fast) ease}.ds-combobox__arrow--open{transform:rotate(180deg)}.ds-combobox__dropdown{position:absolute;top:100%;left:0;right:0;z-index:var(--z-dropdown, 1000);margin-top:var(--space-1);background-color:var(--combobox-dropdown-bg, var(--surface-overlay));border:1px solid var(--combobox-dropdown-border, var(--border-color));border-radius:var(--combobox-radius, var(--radius-2));box-shadow:var(--combobox-dropdown-shadow, var(--shadow-2));overflow:hidden}.ds-combobox__loading{display:flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-4);color:var(--text-muted);font-style:italic}.ds-combobox__loading-spinner{width:16px;height:16px;border:2px solid var(--border-color);border-top-color:var(--color-primary);border-radius:50%;animation:ds-combobox-spin .8s linear infinite}.ds-combobox__listbox{list-style:none;margin:0;padding:var(--space-1) 0;max-height:var(--combobox-max-height, 250px);overflow-y:auto}.ds-combobox__option{display:flex;align-items:flex-start;justify-content:space-between;padding:var(--space-2) var(--space-3);cursor:pointer;transition:background-color var(--duration-fast) ease}.ds-combobox__option:hover:not(.ds-combobox__option--disabled){background-color:var(--combobox-option-hover-bg, var(--surface-hover))}.ds-combobox__option--focused{background-color:var(--combobox-option-hover-bg, var(--surface-hover))}.ds-combobox__option--selected{background-color:var(--combobox-option-selected-bg, color-mix(in oklab, var(--color-primary) 10%, transparent));color:var(--combobox-option-selected-text, var(--color-primary))}.ds-combobox__option--disabled{opacity:.5;cursor:not-allowed}.ds-combobox__option-content{display:flex;flex-direction:column;flex:1;min-width:0}.ds-combobox__option-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ds-combobox__option-description{font-size:var(--font-size-1);color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:var(--space-1)}.ds-combobox__check{flex-shrink:0;color:var(--color-primary);margin-left:var(--space-2);margin-top:var(--space-1)}.ds-combobox__empty{padding:var(--space-4);text-align:center;color:var(--text-muted);font-style:italic}.ds-combobox__helper,.ds-combobox__error{margin-top:var(--space-1);font-size:var(--font-size-1)}.ds-combobox__helper{color:var(--text-muted)}.ds-combobox__error{color:var(--error)}.ds-combobox--sm .ds-combobox__input{padding:var(--combobox-padding-sm, var(--space-1) var(--space-2));padding-right:var(--space-8);font-size:var(--combobox-font-size-sm, var(--font-size-2))}.ds-combobox--sm .ds-combobox__option{padding:var(--space-1) var(--space-2);font-size:var(--font-size-2)}.ds-combobox--lg .ds-combobox__input{padding:var(--combobox-padding-lg, var(--space-3) var(--space-4));padding-right:var(--space-12);font-size:var(--combobox-font-size-lg, var(--font-size-4))}.ds-combobox--lg .ds-combobox__option{padding:var(--space-3) var(--space-4);font-size:var(--font-size-4)}.ds-combobox--error .ds-combobox__input{border-color:var(--error)}.ds-combobox--error .ds-combobox__input:focus{box-shadow:0 0 0 3px rgba(var(--error-rgb),.2)}.ds-combobox--disabled .ds-combobox__label{opacity:.5}@keyframes ds-combobox-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsCombobox, decorators: [{
             type: Component,
@@ -6250,7 +6250,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                             useExisting: forwardRef(() => DsCombobox),
                             multi: true,
                         },
-                    ], template: "<div [ngClass]=\"containerClasses()\">\n  <!-- Label -->\n  @if (label()) {\n    <label class=\"ds-combobox__label\" [attr.for]=\"inputId()\">\n      {{ label() }}\n      @if (required()) {\n        <span class=\"ds-combobox__required\">*</span>\n      }\n    </label>\n  }\n\n  <!-- Input wrapper -->\n  <div class=\"ds-combobox__input-wrapper\">\n    <input\n      #inputElement\n      type=\"text\"\n      [id]=\"inputId()\"\n      [ngClass]=\"inputClasses()\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [value]=\"inputValue()\"\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)=\"onInput($event)\" />\n\n    <span class=\"ds-combobox__icons\">\n      @if (clearable() && inputValue()) {\n        <button\n          type=\"button\"\n          class=\"ds-combobox__clear\"\n          aria-label=\"Effacer\"\n          tabindex=\"-1\"\n          (mousedown)=\"clear($event)\">\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n            <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n            <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n          </svg>\n        </button>\n      }\n      <span class=\"ds-combobox__arrow\" [class.ds-combobox__arrow--open]=\"isOpen()\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n          <polyline points=\"6 9 12 15 18 9\"></polyline>\n        </svg>\n      </span>\n    </span>\n  </div>\n\n  <!-- Dropdown -->\n  @if (shouldShowDropdown()) {\n    <div class=\"ds-combobox__dropdown\" role=\"presentation\">\n      @if (loading()) {\n        <div class=\"ds-combobox__loading\">\n          <span class=\"ds-combobox__loading-spinner\"></span>\n          <span>{{ loadingText() }}</span>\n        </div>\n      } @else {\n        <ul\n          #listbox\n          [id]=\"listboxId()\"\n          class=\"ds-combobox__listbox\"\n          role=\"listbox\"\n          [attr.aria-label]=\"label() || 'Options'\">\n          @for (option of filteredOptions(); track option.value; let i = $index) {\n            <li\n              [id]=\"getOptionId(i)\"\n              class=\"ds-combobox__option\"\n              [class.ds-combobox__option--focused]=\"isOptionFocused(i)\"\n              [class.ds-combobox__option--selected]=\"isOptionSelected(option)\"\n              [class.ds-combobox__option--disabled]=\"option.disabled\"\n              role=\"option\"\n              [attr.aria-selected]=\"isOptionSelected(option)\"\n              [attr.aria-disabled]=\"option.disabled\"\n              (mousedown)=\"selectOption(option)\">\n              <span class=\"ds-combobox__option-content\">\n                <span class=\"ds-combobox__option-label\">{{ option.label }}</span>\n                @if (option.description) {\n                  <span class=\"ds-combobox__option-description\">{{ option.description }}</span>\n                }\n              </span>\n              @if (isOptionSelected(option)) {\n                <svg\n                  class=\"ds-combobox__check\"\n                  width=\"16\"\n                  height=\"16\"\n                  viewBox=\"0 0 24 24\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"2\">\n                  <polyline points=\"20 6 9 17 4 12\"></polyline>\n                </svg>\n              }\n            </li>\n          } @empty {\n            <li class=\"ds-combobox__empty\" role=\"option\" aria-disabled=\"true\">\n              {{ noResultsText() }}\n            </li>\n          }\n        </ul>\n      }\n    </div>\n  }\n\n  <!-- Helper / Error -->\n  @if (error()) {\n    <span class=\"ds-combobox__error\" role=\"alert\">{{ error() }}</span>\n  } @else if (helper()) {\n    <span class=\"ds-combobox__helper\">{{ helper() }}</span>\n  }\n</div>\n", styles: [".ds-combobox{position:relative;display:inline-flex;flex-direction:column;width:100%;font-family:var(--font-family-base)}.ds-combobox__label{display:block;margin-bottom:var(--space-1);font-size:var(--font-size-2);font-weight:var(--font-weight-medium);color:var(--text-default)}.ds-combobox__required{color:var(--error);margin-left:var(--space-1)}.ds-combobox__input-wrapper{position:relative;display:flex;align-items:center}.ds-combobox__input{width:100%;padding:var(--combobox-padding-md, var(--space-2) var(--space-3));padding-right:var(--space-10);background-color:var(--combobox-bg, var(--background-main));border:1px solid var(--combobox-border, var(--border-color));border-radius:var(--combobox-radius, var(--radius-2));font-family:inherit;font-size:var(--combobox-font-size-md, var(--font-size-3));color:var(--combobox-text, var(--text-default));transition:border-color var(--duration-fast) ease,box-shadow var(--duration-fast) ease}.ds-combobox__input::placeholder{color:var(--combobox-placeholder, var(--text-muted))}.ds-combobox__input:hover:not(:disabled){border-color:var(--combobox-hover-border, var(--color-primary))}.ds-combobox__input:focus{outline:none;border-color:var(--combobox-focus-border, var(--color-primary));box-shadow:0 0 0 3px var(--combobox-focus-shadow, rgba(125, 75, 192, .2))}.ds-combobox__input:disabled{opacity:.5;cursor:not-allowed;background-color:var(--combobox-disabled-bg, var(--background-secondary))}.ds-combobox__icons{position:absolute;right:var(--space-2);display:flex;align-items:center;gap:var(--space-1);color:var(--text-muted);pointer-events:none}.ds-combobox__clear{display:flex;align-items:center;justify-content:center;padding:var(--space-1);background:none;border:none;color:var(--text-muted);cursor:pointer;border-radius:var(--radius-round);transition:color var(--duration-fast) ease;pointer-events:auto}.ds-combobox__clear:hover{color:var(--error)}.ds-combobox__arrow{display:flex;align-items:center;transition:transform var(--duration-fast) ease}.ds-combobox__arrow--open{transform:rotate(180deg)}.ds-combobox__dropdown{position:absolute;top:100%;left:0;right:0;z-index:var(--z-dropdown, 1000);margin-top:var(--space-1);background-color:var(--combobox-dropdown-bg, var(--surface-overlay));border:1px solid var(--combobox-dropdown-border, var(--border-color));border-radius:var(--combobox-radius, var(--radius-2));box-shadow:var(--combobox-dropdown-shadow, var(--shadow-2));overflow:hidden}.ds-combobox__loading{display:flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-4);color:var(--text-muted);font-style:italic}.ds-combobox__loading-spinner{width:16px;height:16px;border:2px solid var(--border-color);border-top-color:var(--color-primary);border-radius:50%;animation:ds-combobox-spin .8s linear infinite}.ds-combobox__listbox{list-style:none;margin:0;padding:var(--space-1) 0;max-height:var(--combobox-max-height, 250px);overflow-y:auto}.ds-combobox__option{display:flex;align-items:flex-start;justify-content:space-between;padding:var(--space-2) var(--space-3);cursor:pointer;transition:background-color var(--duration-fast) ease}.ds-combobox__option:hover:not(.ds-combobox__option--disabled){background-color:var(--combobox-option-hover-bg, var(--surface-hover))}.ds-combobox__option--focused{background-color:var(--combobox-option-hover-bg, var(--surface-hover))}.ds-combobox__option--selected{background-color:var(--combobox-option-selected-bg, color-mix(in oklab, var(--color-primary) 10%, transparent));color:var(--combobox-option-selected-text, var(--color-primary))}.ds-combobox__option--disabled{opacity:.5;cursor:not-allowed}.ds-combobox__option-content{display:flex;flex-direction:column;flex:1;min-width:0}.ds-combobox__option-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ds-combobox__option-description{font-size:var(--font-size-1);color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:var(--space-1)}.ds-combobox__check{flex-shrink:0;color:var(--color-primary);margin-left:var(--space-2);margin-top:var(--space-1)}.ds-combobox__empty{padding:var(--space-4);text-align:center;color:var(--text-muted);font-style:italic}.ds-combobox__helper,.ds-combobox__error{margin-top:var(--space-1);font-size:var(--font-size-1)}.ds-combobox__helper{color:var(--text-muted)}.ds-combobox__error{color:var(--error)}.ds-combobox--sm .ds-combobox__input{padding:var(--combobox-padding-sm, var(--space-1) var(--space-2));padding-right:var(--space-8);font-size:var(--combobox-font-size-sm, var(--font-size-2))}.ds-combobox--sm .ds-combobox__option{padding:var(--space-1) var(--space-2);font-size:var(--font-size-2)}.ds-combobox--lg .ds-combobox__input{padding:var(--combobox-padding-lg, var(--space-3) var(--space-4));padding-right:var(--space-12);font-size:var(--combobox-font-size-lg, var(--font-size-4))}.ds-combobox--lg .ds-combobox__option{padding:var(--space-3) var(--space-4);font-size:var(--font-size-4)}.ds-combobox--error .ds-combobox__input{border-color:var(--error)}.ds-combobox--error .ds-combobox__input:focus{box-shadow:0 0 0 3px #f4433633}.ds-combobox--disabled .ds-combobox__label{opacity:.5}@keyframes ds-combobox-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
+                    ], template: "<div [ngClass]=\"containerClasses()\">\n  <!-- Label -->\n  @if (label()) {\n    <label class=\"ds-combobox__label\" [attr.for]=\"inputId()\">\n      {{ label() }}\n      @if (required()) {\n        <span class=\"ds-combobox__required\">*</span>\n      }\n    </label>\n  }\n\n  <!-- Input wrapper -->\n  <div class=\"ds-combobox__input-wrapper\">\n    <input\n      #inputElement\n      type=\"text\"\n      [id]=\"inputId()\"\n      [ngClass]=\"inputClasses()\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [value]=\"inputValue()\"\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)=\"onInput($event)\" />\n\n    <span class=\"ds-combobox__icons\">\n      @if (clearable() && inputValue()) {\n        <button\n          type=\"button\"\n          class=\"ds-combobox__clear\"\n          aria-label=\"Effacer\"\n          tabindex=\"-1\"\n          (mousedown)=\"clear($event)\">\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n            <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n            <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n          </svg>\n        </button>\n      }\n      <span class=\"ds-combobox__arrow\" [class.ds-combobox__arrow--open]=\"isOpen()\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n          <polyline points=\"6 9 12 15 18 9\"></polyline>\n        </svg>\n      </span>\n    </span>\n  </div>\n\n  <!-- Dropdown -->\n  @if (shouldShowDropdown()) {\n    <div class=\"ds-combobox__dropdown\" role=\"presentation\">\n      @if (loading()) {\n        <div class=\"ds-combobox__loading\">\n          <span class=\"ds-combobox__loading-spinner\"></span>\n          <span>{{ loadingText() }}</span>\n        </div>\n      } @else {\n        <ul\n          #listbox\n          [id]=\"listboxId()\"\n          class=\"ds-combobox__listbox\"\n          role=\"listbox\"\n          [attr.aria-label]=\"label() || 'Options'\">\n          @for (option of filteredOptions(); track option.value; let i = $index) {\n            <li\n              [id]=\"getOptionId(i)\"\n              class=\"ds-combobox__option\"\n              [class.ds-combobox__option--focused]=\"isOptionFocused(i)\"\n              [class.ds-combobox__option--selected]=\"isOptionSelected(option)\"\n              [class.ds-combobox__option--disabled]=\"option.disabled\"\n              role=\"option\"\n              [attr.aria-selected]=\"isOptionSelected(option)\"\n              [attr.aria-disabled]=\"option.disabled\"\n              (mousedown)=\"selectOption(option)\">\n              <span class=\"ds-combobox__option-content\">\n                <span class=\"ds-combobox__option-label\">{{ option.label }}</span>\n                @if (option.description) {\n                  <span class=\"ds-combobox__option-description\">{{ option.description }}</span>\n                }\n              </span>\n              @if (isOptionSelected(option)) {\n                <svg\n                  class=\"ds-combobox__check\"\n                  width=\"16\"\n                  height=\"16\"\n                  viewBox=\"0 0 24 24\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"2\">\n                  <polyline points=\"20 6 9 17 4 12\"></polyline>\n                </svg>\n              }\n            </li>\n          } @empty {\n            <li class=\"ds-combobox__empty\" role=\"option\" aria-disabled=\"true\">\n              {{ noResultsText() }}\n            </li>\n          }\n        </ul>\n      }\n    </div>\n  }\n\n  <!-- Helper / Error -->\n  @if (error()) {\n    <span class=\"ds-combobox__error\" role=\"alert\">{{ error() }}</span>\n  } @else if (helper()) {\n    <span class=\"ds-combobox__helper\">{{ helper() }}</span>\n  }\n</div>\n", styles: [".ds-combobox{position:relative;display:inline-flex;flex-direction:column;width:100%;font-family:var(--font-family-base)}.ds-combobox__label{display:block;margin-bottom:var(--space-1);font-size:var(--font-size-2);font-weight:var(--font-weight-medium);color:var(--text-default)}.ds-combobox__required{color:var(--error);margin-left:var(--space-1)}.ds-combobox__input-wrapper{position:relative;display:flex;align-items:center}.ds-combobox__input{width:100%;padding:var(--combobox-padding-md, var(--space-2) var(--space-3));padding-right:var(--space-10);background-color:var(--combobox-bg, var(--background-main));border:1px solid var(--combobox-border, var(--border-color));border-radius:var(--combobox-radius, var(--radius-2));font-family:inherit;font-size:var(--combobox-font-size-md, var(--font-size-3));color:var(--combobox-text, var(--text-default));transition:border-color var(--duration-fast) ease,box-shadow var(--duration-fast) ease}.ds-combobox__input::placeholder{color:var(--combobox-placeholder, var(--text-muted))}.ds-combobox__input:hover:not(:disabled){border-color:var(--combobox-hover-border, var(--color-primary))}.ds-combobox__input:focus{outline:none;border-color:var(--combobox-focus-border, var(--color-primary));box-shadow:0 0 0 3px var(--combobox-focus-shadow, rgba(var(--color-primary-rgb), .2))}.ds-combobox__input:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.ds-combobox__input:disabled{opacity:.5;cursor:not-allowed;background-color:var(--combobox-disabled-bg, var(--background-secondary))}.ds-combobox__icons{position:absolute;right:var(--space-2);display:flex;align-items:center;gap:var(--space-1);color:var(--text-muted);pointer-events:none}.ds-combobox__clear{display:flex;align-items:center;justify-content:center;padding:var(--space-1);background:none;border:none;color:var(--text-muted);cursor:pointer;border-radius:var(--radius-round);transition:color var(--duration-fast) ease;pointer-events:auto}.ds-combobox__clear:hover{color:var(--error)}.ds-combobox__arrow{display:flex;align-items:center;transition:transform var(--duration-fast) ease}.ds-combobox__arrow--open{transform:rotate(180deg)}.ds-combobox__dropdown{position:absolute;top:100%;left:0;right:0;z-index:var(--z-dropdown, 1000);margin-top:var(--space-1);background-color:var(--combobox-dropdown-bg, var(--surface-overlay));border:1px solid var(--combobox-dropdown-border, var(--border-color));border-radius:var(--combobox-radius, var(--radius-2));box-shadow:var(--combobox-dropdown-shadow, var(--shadow-2));overflow:hidden}.ds-combobox__loading{display:flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-4);color:var(--text-muted);font-style:italic}.ds-combobox__loading-spinner{width:16px;height:16px;border:2px solid var(--border-color);border-top-color:var(--color-primary);border-radius:50%;animation:ds-combobox-spin .8s linear infinite}.ds-combobox__listbox{list-style:none;margin:0;padding:var(--space-1) 0;max-height:var(--combobox-max-height, 250px);overflow-y:auto}.ds-combobox__option{display:flex;align-items:flex-start;justify-content:space-between;padding:var(--space-2) var(--space-3);cursor:pointer;transition:background-color var(--duration-fast) ease}.ds-combobox__option:hover:not(.ds-combobox__option--disabled){background-color:var(--combobox-option-hover-bg, var(--surface-hover))}.ds-combobox__option--focused{background-color:var(--combobox-option-hover-bg, var(--surface-hover))}.ds-combobox__option--selected{background-color:var(--combobox-option-selected-bg, color-mix(in oklab, var(--color-primary) 10%, transparent));color:var(--combobox-option-selected-text, var(--color-primary))}.ds-combobox__option--disabled{opacity:.5;cursor:not-allowed}.ds-combobox__option-content{display:flex;flex-direction:column;flex:1;min-width:0}.ds-combobox__option-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ds-combobox__option-description{font-size:var(--font-size-1);color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:var(--space-1)}.ds-combobox__check{flex-shrink:0;color:var(--color-primary);margin-left:var(--space-2);margin-top:var(--space-1)}.ds-combobox__empty{padding:var(--space-4);text-align:center;color:var(--text-muted);font-style:italic}.ds-combobox__helper,.ds-combobox__error{margin-top:var(--space-1);font-size:var(--font-size-1)}.ds-combobox__helper{color:var(--text-muted)}.ds-combobox__error{color:var(--error)}.ds-combobox--sm .ds-combobox__input{padding:var(--combobox-padding-sm, var(--space-1) var(--space-2));padding-right:var(--space-8);font-size:var(--combobox-font-size-sm, var(--font-size-2))}.ds-combobox--sm .ds-combobox__option{padding:var(--space-1) var(--space-2);font-size:var(--font-size-2)}.ds-combobox--lg .ds-combobox__input{padding:var(--combobox-padding-lg, var(--space-3) var(--space-4));padding-right:var(--space-12);font-size:var(--combobox-font-size-lg, var(--font-size-4))}.ds-combobox--lg .ds-combobox__option{padding:var(--space-3) var(--space-4);font-size:var(--font-size-4)}.ds-combobox--error .ds-combobox__input{border-color:var(--error)}.ds-combobox--error .ds-combobox__input:focus{box-shadow:0 0 0 3px rgba(var(--error-rgb),.2)}.ds-combobox--disabled .ds-combobox__label{opacity:.5}@keyframes ds-combobox-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
         }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], helper: [{ type: i0.Input, args: [{ isSignal: true, alias: "helper", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], allowCustom: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowCustom", required: false }] }], minChars: [{ type: i0.Input, args: [{ isSignal: true, alias: "minChars", required: false }] }], maxResults: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxResults", required: false }] }], noResultsText: [{ type: i0.Input, args: [{ isSignal: true, alias: "noResultsText", required: false }] }], loadingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingText", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], inputChange: [{ type: i0.Output, args: ["inputChange"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], inputElement: [{
                 type: ViewChild,
                 args: ['inputElement']
@@ -8119,7 +8119,7 @@ class DsSlider {
                 useExisting: forwardRef(() => DsSlider),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "trackElement", first: true, predicate: ["track"], descendants: true }, { propertyName: "thumb1Element", first: true, predicate: ["thumb1"], descendants: true }, { propertyName: "thumb2Element", first: true, predicate: ["thumb2"], descendants: true }], ngImport: i0, template: "<div [class]=\"containerClasses()\">\n  <!-- Min label -->\n  @if (showLabels()) {\n    <span class=\"ds-slider__label ds-slider__label--min\">\n      {{ getTickLabel(min()) }}\n    </span>\n  }\n\n  <!-- Track container -->\n  <div class=\"ds-slider__track-container\">\n    <!-- Track background -->\n    <div\n      #track\n      class=\"ds-slider__track\"\n      (click)=\"onTrackClick($event)\"\n      role=\"presentation\">\n      <!-- Fill -->\n      <div\n        class=\"ds-slider__fill\"\n        [ngStyle]=\"fillStyle()\">\n      </div>\n\n      <!-- Ticks -->\n      @if (showTicks()) {\n        <div class=\"ds-slider__ticks\">\n          @for (tick of ticks(); track tick) {\n            <div\n              class=\"ds-slider__tick\"\n              [ngStyle]=\"isVertical() ? { bottom: getTickPosition(tick) + '%' } : { left: getTickPosition(tick) + '%' }\">\n            </div>\n          }\n        </div>\n      }\n\n      <!-- Thumb 1 (always present) -->\n      <div\n        #thumb1\n        class=\"ds-slider__thumb\"\n        [class.ds-slider__thumb--active]=\"focusedThumb() === 0 || dragging() === 0\"\n        [ngStyle]=\"thumb1Style()\"\n        [attr.role]=\"'slider'\"\n        [attr.aria-valuemin]=\"min()\"\n        [attr.aria-valuemax]=\"isRange() ? value2() : max()\"\n        [attr.aria-valuenow]=\"value1()\"\n        [attr.aria-valuetext]=\"getAriaValueText(0)\"\n        [attr.aria-orientation]=\"orientation()\"\n        [attr.aria-disabled]=\"isDisabled()\"\n        [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n        (keydown)=\"onKeyDown($event, 0)\"\n        (mousedown)=\"onThumbMouseDown($event, 0)\"\n        (focus)=\"onThumbFocus(0)\"\n        (blur)=\"onThumbBlur()\">\n        @if (showLabels()) {\n          <span class=\"ds-slider__thumb-label\">{{ label1() }}</span>\n        }\n      </div>\n\n      <!-- Thumb 2 (only for range mode) -->\n      @if (isRange()) {\n        <div\n          #thumb2\n          class=\"ds-slider__thumb\"\n          [class.ds-slider__thumb--active]=\"focusedThumb() === 1 || dragging() === 1\"\n          [ngStyle]=\"thumb2Style()\"\n          [attr.role]=\"'slider'\"\n          [attr.aria-valuemin]=\"value1()\"\n          [attr.aria-valuemax]=\"max()\"\n          [attr.aria-valuenow]=\"value2()\"\n          [attr.aria-valuetext]=\"getAriaValueText(1)\"\n          [attr.aria-orientation]=\"orientation()\"\n          [attr.aria-disabled]=\"isDisabled()\"\n          [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n          (keydown)=\"onKeyDown($event, 1)\"\n          (mousedown)=\"onThumbMouseDown($event, 1)\"\n          (focus)=\"onThumbFocus(1)\"\n          (blur)=\"onThumbBlur()\">\n          @if (showLabels()) {\n            <span class=\"ds-slider__thumb-label\">{{ label2() }}</span>\n          }\n        </div>\n      }\n    </div>\n  </div>\n\n  <!-- Max label -->\n  @if (showLabels()) {\n    <span class=\"ds-slider__label ds-slider__label--max\">\n      {{ getTickLabel(max()) }}\n    </span>\n  }\n</div>\n", styles: [".ds-slider{display:flex;align-items:center;gap:var(--slider-label-gap, var(--space-3, .75rem));-webkit-user-select:none;user-select:none}.ds-slider__label{flex-shrink:0;font-size:var(--slider-label-font-size, var(--font-size-2, .875rem));color:var(--slider-label-color, var(--gray-700, #374151));font-weight:500}.ds-slider__label--min{order:1}.ds-slider__label--max{order:3}.ds-slider__track-container{flex:1;order:2;position:relative;display:flex;align-items:center}.ds-slider__track{position:relative;width:100%;height:var(--slider-track-height-md, 6px);background-color:var(--slider-track-bg, var(--gray-200, #e5e7eb));border-radius:var(--slider-track-radius, var(--radius-full, 9999px));cursor:pointer}.ds-slider__fill{position:absolute;background-color:var(--slider-fill-bg, var(--color-primary, #3b82f6));border-radius:var(--slider-track-radius, var(--radius-full, 9999px));height:100%;transition:all .15s ease;pointer-events:none}.ds-slider__ticks{position:absolute;width:100%;height:100%;pointer-events:none}.ds-slider__tick{position:absolute;width:var(--slider-tick-size, 2px);height:var(--slider-tick-size, 2px);background-color:var(--slider-tick-color, var(--gray-400, #9ca3af));border-radius:50%;transform:translate(-50%,-50%);top:50%}.ds-slider__thumb{position:absolute;width:var(--slider-thumb-size-md, 20px);height:var(--slider-thumb-size-md, 20px);background-color:var(--slider-thumb-bg, var(--white, #ffffff));border:var(--slider-thumb-border-width, 2px) solid var(--slider-thumb-border-color, var(--color-primary, #3b82f6));border-radius:50%;box-shadow:var(--slider-thumb-shadow, 0 1px 3px rgba(0, 0, 0, .1));cursor:grab;transform:translate(-50%,-50%);top:50%;transition:transform .15s ease,box-shadow .15s ease;outline:none}.ds-slider__thumb:hover:not([aria-disabled=true]){transform:translate(-50%,-50%) scale(1.1);box-shadow:var(--slider-thumb-shadow-hover, 0 2px 8px rgba(0, 0, 0, .15))}.ds-slider__thumb:focus-visible{box-shadow:var(--slider-thumb-shadow-focus, 0 0 0 3px rgba(59, 130, 246, .3))}.ds-slider__thumb--active{cursor:grabbing;transform:translate(-50%,-50%) scale(1.15);box-shadow:var(--slider-thumb-shadow-active, 0 0 0 4px rgba(59, 130, 246, .2))}.ds-slider__thumb[aria-disabled=true]{cursor:not-allowed;opacity:.5}.ds-slider__thumb-label{position:absolute;top:-32px;left:50%;transform:translate(-50%);background-color:var(--slider-thumb-label-bg, var(--gray-900, #111827));color:var(--slider-thumb-label-color, var(--white, #ffffff));font-size:var(--font-size-1, .75rem);padding:var(--space-1, .25rem) var(--space-2, .5rem);border-radius:var(--radius-1, .25rem);white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .15s ease}.ds-slider__thumb:hover .ds-slider__thumb-label,.ds-slider__thumb:focus .ds-slider__thumb-label,.ds-slider__thumb--active .ds-slider__thumb-label{opacity:1}.ds-slider--sm .ds-slider__track{height:var(--slider-track-height-sm, 4px)}.ds-slider--sm .ds-slider__thumb{width:var(--slider-thumb-size-sm, 16px);height:var(--slider-thumb-size-sm, 16px)}.ds-slider--sm .ds-slider__label{font-size:var(--font-size-1, .75rem)}.ds-slider--lg .ds-slider__track{height:var(--slider-track-height-lg, 8px)}.ds-slider--lg .ds-slider__thumb{width:var(--slider-thumb-size-lg, 24px);height:var(--slider-thumb-size-lg, 24px)}.ds-slider--lg .ds-slider__label{font-size:var(--font-size-3, 1rem)}.ds-slider--disabled{opacity:.6;pointer-events:none}.ds-slider--disabled .ds-slider__track{cursor:not-allowed}.ds-slider--vertical{flex-direction:column;height:200px;width:auto}.ds-slider--vertical .ds-slider__label--min{order:3}.ds-slider--vertical .ds-slider__label--max{order:1}.ds-slider--vertical .ds-slider__track-container{flex:1;width:auto;height:100%;display:flex;justify-content:center}.ds-slider--vertical .ds-slider__track{width:var(--slider-track-height-md, 6px);height:100%}.ds-slider--vertical .ds-slider__fill{width:100%;height:auto}.ds-slider--vertical .ds-slider__thumb{left:50%;top:auto;transform:translate(-50%,50%)}.ds-slider--vertical .ds-slider__thumb:hover:not([aria-disabled=true]){transform:translate(-50%,50%) scale(1.1)}.ds-slider--vertical .ds-slider__thumb--active{transform:translate(-50%,50%) scale(1.15)}.ds-slider--vertical .ds-slider__thumb-label{top:50%;left:32px;transform:translateY(-50%)}.ds-slider--vertical .ds-slider__tick{left:50%;top:auto;transform:translate(-50%,50%)}.ds-slider--vertical.ds-slider--sm .ds-slider__track{width:var(--slider-track-height-sm, 4px)}.ds-slider--vertical.ds-slider--lg .ds-slider__track{width:var(--slider-track-height-lg, 8px)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+        ], viewQueries: [{ propertyName: "trackElement", first: true, predicate: ["track"], descendants: true }, { propertyName: "thumb1Element", first: true, predicate: ["thumb1"], descendants: true }, { propertyName: "thumb2Element", first: true, predicate: ["thumb2"], descendants: true }], ngImport: i0, template: "<div [class]=\"containerClasses()\">\n  <!-- Min label -->\n  @if (showLabels()) {\n    <span class=\"ds-slider__label ds-slider__label--min\">\n      {{ getTickLabel(min()) }}\n    </span>\n  }\n\n  <!-- Track container -->\n  <div class=\"ds-slider__track-container\">\n    <!-- Track background -->\n    <div\n      #track\n      class=\"ds-slider__track\"\n      (click)=\"onTrackClick($event)\"\n      role=\"presentation\">\n      <!-- Fill -->\n      <div\n        class=\"ds-slider__fill\"\n        [ngStyle]=\"fillStyle()\">\n      </div>\n\n      <!-- Ticks -->\n      @if (showTicks()) {\n        <div class=\"ds-slider__ticks\">\n          @for (tick of ticks(); track tick) {\n            <div\n              class=\"ds-slider__tick\"\n              [ngStyle]=\"isVertical() ? { bottom: getTickPosition(tick) + '%' } : { left: getTickPosition(tick) + '%' }\">\n            </div>\n          }\n        </div>\n      }\n\n      <!-- Thumb 1 (always present) -->\n      <div\n        #thumb1\n        class=\"ds-slider__thumb\"\n        [class.ds-slider__thumb--active]=\"focusedThumb() === 0 || dragging() === 0\"\n        [ngStyle]=\"thumb1Style()\"\n        [attr.role]=\"'slider'\"\n        [attr.aria-valuemin]=\"min()\"\n        [attr.aria-valuemax]=\"isRange() ? value2() : max()\"\n        [attr.aria-valuenow]=\"value1()\"\n        [attr.aria-valuetext]=\"getAriaValueText(0)\"\n        [attr.aria-orientation]=\"orientation()\"\n        [attr.aria-disabled]=\"isDisabled()\"\n        [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n        (keydown)=\"onKeyDown($event, 0)\"\n        (mousedown)=\"onThumbMouseDown($event, 0)\"\n        (focus)=\"onThumbFocus(0)\"\n        (blur)=\"onThumbBlur()\">\n        @if (showLabels()) {\n          <span class=\"ds-slider__thumb-label\">{{ label1() }}</span>\n        }\n      </div>\n\n      <!-- Thumb 2 (only for range mode) -->\n      @if (isRange()) {\n        <div\n          #thumb2\n          class=\"ds-slider__thumb\"\n          [class.ds-slider__thumb--active]=\"focusedThumb() === 1 || dragging() === 1\"\n          [ngStyle]=\"thumb2Style()\"\n          [attr.role]=\"'slider'\"\n          [attr.aria-valuemin]=\"value1()\"\n          [attr.aria-valuemax]=\"max()\"\n          [attr.aria-valuenow]=\"value2()\"\n          [attr.aria-valuetext]=\"getAriaValueText(1)\"\n          [attr.aria-orientation]=\"orientation()\"\n          [attr.aria-disabled]=\"isDisabled()\"\n          [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n          (keydown)=\"onKeyDown($event, 1)\"\n          (mousedown)=\"onThumbMouseDown($event, 1)\"\n          (focus)=\"onThumbFocus(1)\"\n          (blur)=\"onThumbBlur()\">\n          @if (showLabels()) {\n            <span class=\"ds-slider__thumb-label\">{{ label2() }}</span>\n          }\n        </div>\n      }\n    </div>\n  </div>\n\n  <!-- Max label -->\n  @if (showLabels()) {\n    <span class=\"ds-slider__label ds-slider__label--max\">\n      {{ getTickLabel(max()) }}\n    </span>\n  }\n</div>\n", styles: [".ds-slider{display:flex;align-items:center;gap:var(--slider-label-gap, var(--space-3, .75rem));-webkit-user-select:none;user-select:none}.ds-slider__label{flex-shrink:0;font-size:var(--slider-label-font-size, var(--font-size-2, .875rem));color:var(--slider-label-color, var(--gray-700, #374151));font-weight:500}.ds-slider__label--min{order:1}.ds-slider__label--max{order:3}.ds-slider__track-container{flex:1;order:2;position:relative;display:flex;align-items:center}.ds-slider__track{position:relative;width:100%;height:var(--slider-track-height-md, 6px);background-color:var(--slider-track-bg, var(--gray-200, #e5e7eb));border-radius:var(--slider-track-radius, var(--radius-full, 9999px));cursor:pointer}.ds-slider__fill{position:absolute;background-color:var(--slider-fill-bg, var(--color-primary, #3b82f6));border-radius:var(--slider-track-radius, var(--radius-full, 9999px));height:100%;transition:all .15s ease;pointer-events:none}.ds-slider__ticks{position:absolute;width:100%;height:100%;pointer-events:none}.ds-slider__tick{position:absolute;width:var(--slider-tick-size, 2px);height:var(--slider-tick-size, 2px);background-color:var(--slider-tick-color, var(--gray-400, #9ca3af));border-radius:50%;transform:translate(-50%,-50%);top:50%}.ds-slider__thumb{position:absolute;width:var(--slider-thumb-size-md, 20px);height:var(--slider-thumb-size-md, 20px);background-color:var(--slider-thumb-bg, var(--white, #ffffff));border:var(--slider-thumb-border-width, 2px) solid var(--slider-thumb-border-color, var(--color-primary, #3b82f6));border-radius:50%;box-shadow:var(--slider-thumb-shadow, 0 1px 3px rgba(var(--black-rgb), .1));cursor:grab;transform:translate(-50%,-50%);top:50%;transition:transform .15s ease,box-shadow .15s ease;outline:none}.ds-slider__thumb:hover:not([aria-disabled=true]){transform:translate(-50%,-50%) scale(1.1);box-shadow:var(--slider-thumb-shadow-hover, 0 2px 8px rgba(var(--black-rgb), .15))}.ds-slider__thumb:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;box-shadow:var(--slider-thumb-shadow-focus, 0 0 0 3px rgba(var(--color-primary-rgb), .3))}.ds-slider__thumb--active{cursor:grabbing;transform:translate(-50%,-50%) scale(1.15);box-shadow:var(--slider-thumb-shadow-active, 0 0 0 4px rgba(var(--color-primary-rgb), .2))}.ds-slider__thumb[aria-disabled=true]{cursor:not-allowed;opacity:.5}.ds-slider__thumb-label{position:absolute;top:-32px;left:50%;transform:translate(-50%);background-color:var(--slider-thumb-label-bg, var(--gray-900, #111827));color:var(--slider-thumb-label-color, var(--white, #ffffff));font-size:var(--font-size-1, .75rem);padding:var(--space-1, .25rem) var(--space-2, .5rem);border-radius:var(--radius-1, .25rem);white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .15s ease}.ds-slider__thumb:hover .ds-slider__thumb-label,.ds-slider__thumb:focus .ds-slider__thumb-label,.ds-slider__thumb--active .ds-slider__thumb-label{opacity:1}.ds-slider--sm .ds-slider__track{height:var(--slider-track-height-sm, 4px)}.ds-slider--sm .ds-slider__thumb{width:var(--slider-thumb-size-sm, 16px);height:var(--slider-thumb-size-sm, 16px)}.ds-slider--sm .ds-slider__label{font-size:var(--font-size-1, .75rem)}.ds-slider--lg .ds-slider__track{height:var(--slider-track-height-lg, 8px)}.ds-slider--lg .ds-slider__thumb{width:var(--slider-thumb-size-lg, 24px);height:var(--slider-thumb-size-lg, 24px)}.ds-slider--lg .ds-slider__label{font-size:var(--font-size-3, 1rem)}.ds-slider--disabled{opacity:.6;pointer-events:none}.ds-slider--disabled .ds-slider__track{cursor:not-allowed}.ds-slider--vertical{flex-direction:column;height:200px;width:auto}.ds-slider--vertical .ds-slider__label--min{order:3}.ds-slider--vertical .ds-slider__label--max{order:1}.ds-slider--vertical .ds-slider__track-container{flex:1;width:auto;height:100%;display:flex;justify-content:center}.ds-slider--vertical .ds-slider__track{width:var(--slider-track-height-md, 6px);height:100%}.ds-slider--vertical .ds-slider__fill{width:100%;height:auto}.ds-slider--vertical .ds-slider__thumb{left:50%;top:auto;transform:translate(-50%,50%)}.ds-slider--vertical .ds-slider__thumb:hover:not([aria-disabled=true]){transform:translate(-50%,50%) scale(1.1)}.ds-slider--vertical .ds-slider__thumb--active{transform:translate(-50%,50%) scale(1.15)}.ds-slider--vertical .ds-slider__thumb-label{top:50%;left:32px;transform:translateY(-50%)}.ds-slider--vertical .ds-slider__tick{left:50%;top:auto;transform:translate(-50%,50%)}.ds-slider--vertical.ds-slider--sm .ds-slider__track{width:var(--slider-track-height-sm, 4px)}.ds-slider--vertical.ds-slider--lg .ds-slider__track{width:var(--slider-track-height-lg, 8px)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsSlider, decorators: [{
             type: Component,
@@ -8129,7 +8129,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                             useExisting: forwardRef(() => DsSlider),
                             multi: true,
                         },
-                    ], template: "<div [class]=\"containerClasses()\">\n  <!-- Min label -->\n  @if (showLabels()) {\n    <span class=\"ds-slider__label ds-slider__label--min\">\n      {{ getTickLabel(min()) }}\n    </span>\n  }\n\n  <!-- Track container -->\n  <div class=\"ds-slider__track-container\">\n    <!-- Track background -->\n    <div\n      #track\n      class=\"ds-slider__track\"\n      (click)=\"onTrackClick($event)\"\n      role=\"presentation\">\n      <!-- Fill -->\n      <div\n        class=\"ds-slider__fill\"\n        [ngStyle]=\"fillStyle()\">\n      </div>\n\n      <!-- Ticks -->\n      @if (showTicks()) {\n        <div class=\"ds-slider__ticks\">\n          @for (tick of ticks(); track tick) {\n            <div\n              class=\"ds-slider__tick\"\n              [ngStyle]=\"isVertical() ? { bottom: getTickPosition(tick) + '%' } : { left: getTickPosition(tick) + '%' }\">\n            </div>\n          }\n        </div>\n      }\n\n      <!-- Thumb 1 (always present) -->\n      <div\n        #thumb1\n        class=\"ds-slider__thumb\"\n        [class.ds-slider__thumb--active]=\"focusedThumb() === 0 || dragging() === 0\"\n        [ngStyle]=\"thumb1Style()\"\n        [attr.role]=\"'slider'\"\n        [attr.aria-valuemin]=\"min()\"\n        [attr.aria-valuemax]=\"isRange() ? value2() : max()\"\n        [attr.aria-valuenow]=\"value1()\"\n        [attr.aria-valuetext]=\"getAriaValueText(0)\"\n        [attr.aria-orientation]=\"orientation()\"\n        [attr.aria-disabled]=\"isDisabled()\"\n        [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n        (keydown)=\"onKeyDown($event, 0)\"\n        (mousedown)=\"onThumbMouseDown($event, 0)\"\n        (focus)=\"onThumbFocus(0)\"\n        (blur)=\"onThumbBlur()\">\n        @if (showLabels()) {\n          <span class=\"ds-slider__thumb-label\">{{ label1() }}</span>\n        }\n      </div>\n\n      <!-- Thumb 2 (only for range mode) -->\n      @if (isRange()) {\n        <div\n          #thumb2\n          class=\"ds-slider__thumb\"\n          [class.ds-slider__thumb--active]=\"focusedThumb() === 1 || dragging() === 1\"\n          [ngStyle]=\"thumb2Style()\"\n          [attr.role]=\"'slider'\"\n          [attr.aria-valuemin]=\"value1()\"\n          [attr.aria-valuemax]=\"max()\"\n          [attr.aria-valuenow]=\"value2()\"\n          [attr.aria-valuetext]=\"getAriaValueText(1)\"\n          [attr.aria-orientation]=\"orientation()\"\n          [attr.aria-disabled]=\"isDisabled()\"\n          [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n          (keydown)=\"onKeyDown($event, 1)\"\n          (mousedown)=\"onThumbMouseDown($event, 1)\"\n          (focus)=\"onThumbFocus(1)\"\n          (blur)=\"onThumbBlur()\">\n          @if (showLabels()) {\n            <span class=\"ds-slider__thumb-label\">{{ label2() }}</span>\n          }\n        </div>\n      }\n    </div>\n  </div>\n\n  <!-- Max label -->\n  @if (showLabels()) {\n    <span class=\"ds-slider__label ds-slider__label--max\">\n      {{ getTickLabel(max()) }}\n    </span>\n  }\n</div>\n", styles: [".ds-slider{display:flex;align-items:center;gap:var(--slider-label-gap, var(--space-3, .75rem));-webkit-user-select:none;user-select:none}.ds-slider__label{flex-shrink:0;font-size:var(--slider-label-font-size, var(--font-size-2, .875rem));color:var(--slider-label-color, var(--gray-700, #374151));font-weight:500}.ds-slider__label--min{order:1}.ds-slider__label--max{order:3}.ds-slider__track-container{flex:1;order:2;position:relative;display:flex;align-items:center}.ds-slider__track{position:relative;width:100%;height:var(--slider-track-height-md, 6px);background-color:var(--slider-track-bg, var(--gray-200, #e5e7eb));border-radius:var(--slider-track-radius, var(--radius-full, 9999px));cursor:pointer}.ds-slider__fill{position:absolute;background-color:var(--slider-fill-bg, var(--color-primary, #3b82f6));border-radius:var(--slider-track-radius, var(--radius-full, 9999px));height:100%;transition:all .15s ease;pointer-events:none}.ds-slider__ticks{position:absolute;width:100%;height:100%;pointer-events:none}.ds-slider__tick{position:absolute;width:var(--slider-tick-size, 2px);height:var(--slider-tick-size, 2px);background-color:var(--slider-tick-color, var(--gray-400, #9ca3af));border-radius:50%;transform:translate(-50%,-50%);top:50%}.ds-slider__thumb{position:absolute;width:var(--slider-thumb-size-md, 20px);height:var(--slider-thumb-size-md, 20px);background-color:var(--slider-thumb-bg, var(--white, #ffffff));border:var(--slider-thumb-border-width, 2px) solid var(--slider-thumb-border-color, var(--color-primary, #3b82f6));border-radius:50%;box-shadow:var(--slider-thumb-shadow, 0 1px 3px rgba(0, 0, 0, .1));cursor:grab;transform:translate(-50%,-50%);top:50%;transition:transform .15s ease,box-shadow .15s ease;outline:none}.ds-slider__thumb:hover:not([aria-disabled=true]){transform:translate(-50%,-50%) scale(1.1);box-shadow:var(--slider-thumb-shadow-hover, 0 2px 8px rgba(0, 0, 0, .15))}.ds-slider__thumb:focus-visible{box-shadow:var(--slider-thumb-shadow-focus, 0 0 0 3px rgba(59, 130, 246, .3))}.ds-slider__thumb--active{cursor:grabbing;transform:translate(-50%,-50%) scale(1.15);box-shadow:var(--slider-thumb-shadow-active, 0 0 0 4px rgba(59, 130, 246, .2))}.ds-slider__thumb[aria-disabled=true]{cursor:not-allowed;opacity:.5}.ds-slider__thumb-label{position:absolute;top:-32px;left:50%;transform:translate(-50%);background-color:var(--slider-thumb-label-bg, var(--gray-900, #111827));color:var(--slider-thumb-label-color, var(--white, #ffffff));font-size:var(--font-size-1, .75rem);padding:var(--space-1, .25rem) var(--space-2, .5rem);border-radius:var(--radius-1, .25rem);white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .15s ease}.ds-slider__thumb:hover .ds-slider__thumb-label,.ds-slider__thumb:focus .ds-slider__thumb-label,.ds-slider__thumb--active .ds-slider__thumb-label{opacity:1}.ds-slider--sm .ds-slider__track{height:var(--slider-track-height-sm, 4px)}.ds-slider--sm .ds-slider__thumb{width:var(--slider-thumb-size-sm, 16px);height:var(--slider-thumb-size-sm, 16px)}.ds-slider--sm .ds-slider__label{font-size:var(--font-size-1, .75rem)}.ds-slider--lg .ds-slider__track{height:var(--slider-track-height-lg, 8px)}.ds-slider--lg .ds-slider__thumb{width:var(--slider-thumb-size-lg, 24px);height:var(--slider-thumb-size-lg, 24px)}.ds-slider--lg .ds-slider__label{font-size:var(--font-size-3, 1rem)}.ds-slider--disabled{opacity:.6;pointer-events:none}.ds-slider--disabled .ds-slider__track{cursor:not-allowed}.ds-slider--vertical{flex-direction:column;height:200px;width:auto}.ds-slider--vertical .ds-slider__label--min{order:3}.ds-slider--vertical .ds-slider__label--max{order:1}.ds-slider--vertical .ds-slider__track-container{flex:1;width:auto;height:100%;display:flex;justify-content:center}.ds-slider--vertical .ds-slider__track{width:var(--slider-track-height-md, 6px);height:100%}.ds-slider--vertical .ds-slider__fill{width:100%;height:auto}.ds-slider--vertical .ds-slider__thumb{left:50%;top:auto;transform:translate(-50%,50%)}.ds-slider--vertical .ds-slider__thumb:hover:not([aria-disabled=true]){transform:translate(-50%,50%) scale(1.1)}.ds-slider--vertical .ds-slider__thumb--active{transform:translate(-50%,50%) scale(1.15)}.ds-slider--vertical .ds-slider__thumb-label{top:50%;left:32px;transform:translateY(-50%)}.ds-slider--vertical .ds-slider__tick{left:50%;top:auto;transform:translate(-50%,50%)}.ds-slider--vertical.ds-slider--sm .ds-slider__track{width:var(--slider-track-height-sm, 4px)}.ds-slider--vertical.ds-slider--lg .ds-slider__track{width:var(--slider-track-height-lg, 8px)}\n"] }]
+                    ], template: "<div [class]=\"containerClasses()\">\n  <!-- Min label -->\n  @if (showLabels()) {\n    <span class=\"ds-slider__label ds-slider__label--min\">\n      {{ getTickLabel(min()) }}\n    </span>\n  }\n\n  <!-- Track container -->\n  <div class=\"ds-slider__track-container\">\n    <!-- Track background -->\n    <div\n      #track\n      class=\"ds-slider__track\"\n      (click)=\"onTrackClick($event)\"\n      role=\"presentation\">\n      <!-- Fill -->\n      <div\n        class=\"ds-slider__fill\"\n        [ngStyle]=\"fillStyle()\">\n      </div>\n\n      <!-- Ticks -->\n      @if (showTicks()) {\n        <div class=\"ds-slider__ticks\">\n          @for (tick of ticks(); track tick) {\n            <div\n              class=\"ds-slider__tick\"\n              [ngStyle]=\"isVertical() ? { bottom: getTickPosition(tick) + '%' } : { left: getTickPosition(tick) + '%' }\">\n            </div>\n          }\n        </div>\n      }\n\n      <!-- Thumb 1 (always present) -->\n      <div\n        #thumb1\n        class=\"ds-slider__thumb\"\n        [class.ds-slider__thumb--active]=\"focusedThumb() === 0 || dragging() === 0\"\n        [ngStyle]=\"thumb1Style()\"\n        [attr.role]=\"'slider'\"\n        [attr.aria-valuemin]=\"min()\"\n        [attr.aria-valuemax]=\"isRange() ? value2() : max()\"\n        [attr.aria-valuenow]=\"value1()\"\n        [attr.aria-valuetext]=\"getAriaValueText(0)\"\n        [attr.aria-orientation]=\"orientation()\"\n        [attr.aria-disabled]=\"isDisabled()\"\n        [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n        (keydown)=\"onKeyDown($event, 0)\"\n        (mousedown)=\"onThumbMouseDown($event, 0)\"\n        (focus)=\"onThumbFocus(0)\"\n        (blur)=\"onThumbBlur()\">\n        @if (showLabels()) {\n          <span class=\"ds-slider__thumb-label\">{{ label1() }}</span>\n        }\n      </div>\n\n      <!-- Thumb 2 (only for range mode) -->\n      @if (isRange()) {\n        <div\n          #thumb2\n          class=\"ds-slider__thumb\"\n          [class.ds-slider__thumb--active]=\"focusedThumb() === 1 || dragging() === 1\"\n          [ngStyle]=\"thumb2Style()\"\n          [attr.role]=\"'slider'\"\n          [attr.aria-valuemin]=\"value1()\"\n          [attr.aria-valuemax]=\"max()\"\n          [attr.aria-valuenow]=\"value2()\"\n          [attr.aria-valuetext]=\"getAriaValueText(1)\"\n          [attr.aria-orientation]=\"orientation()\"\n          [attr.aria-disabled]=\"isDisabled()\"\n          [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n          (keydown)=\"onKeyDown($event, 1)\"\n          (mousedown)=\"onThumbMouseDown($event, 1)\"\n          (focus)=\"onThumbFocus(1)\"\n          (blur)=\"onThumbBlur()\">\n          @if (showLabels()) {\n            <span class=\"ds-slider__thumb-label\">{{ label2() }}</span>\n          }\n        </div>\n      }\n    </div>\n  </div>\n\n  <!-- Max label -->\n  @if (showLabels()) {\n    <span class=\"ds-slider__label ds-slider__label--max\">\n      {{ getTickLabel(max()) }}\n    </span>\n  }\n</div>\n", styles: [".ds-slider{display:flex;align-items:center;gap:var(--slider-label-gap, var(--space-3, .75rem));-webkit-user-select:none;user-select:none}.ds-slider__label{flex-shrink:0;font-size:var(--slider-label-font-size, var(--font-size-2, .875rem));color:var(--slider-label-color, var(--gray-700, #374151));font-weight:500}.ds-slider__label--min{order:1}.ds-slider__label--max{order:3}.ds-slider__track-container{flex:1;order:2;position:relative;display:flex;align-items:center}.ds-slider__track{position:relative;width:100%;height:var(--slider-track-height-md, 6px);background-color:var(--slider-track-bg, var(--gray-200, #e5e7eb));border-radius:var(--slider-track-radius, var(--radius-full, 9999px));cursor:pointer}.ds-slider__fill{position:absolute;background-color:var(--slider-fill-bg, var(--color-primary, #3b82f6));border-radius:var(--slider-track-radius, var(--radius-full, 9999px));height:100%;transition:all .15s ease;pointer-events:none}.ds-slider__ticks{position:absolute;width:100%;height:100%;pointer-events:none}.ds-slider__tick{position:absolute;width:var(--slider-tick-size, 2px);height:var(--slider-tick-size, 2px);background-color:var(--slider-tick-color, var(--gray-400, #9ca3af));border-radius:50%;transform:translate(-50%,-50%);top:50%}.ds-slider__thumb{position:absolute;width:var(--slider-thumb-size-md, 20px);height:var(--slider-thumb-size-md, 20px);background-color:var(--slider-thumb-bg, var(--white, #ffffff));border:var(--slider-thumb-border-width, 2px) solid var(--slider-thumb-border-color, var(--color-primary, #3b82f6));border-radius:50%;box-shadow:var(--slider-thumb-shadow, 0 1px 3px rgba(var(--black-rgb), .1));cursor:grab;transform:translate(-50%,-50%);top:50%;transition:transform .15s ease,box-shadow .15s ease;outline:none}.ds-slider__thumb:hover:not([aria-disabled=true]){transform:translate(-50%,-50%) scale(1.1);box-shadow:var(--slider-thumb-shadow-hover, 0 2px 8px rgba(var(--black-rgb), .15))}.ds-slider__thumb:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;box-shadow:var(--slider-thumb-shadow-focus, 0 0 0 3px rgba(var(--color-primary-rgb), .3))}.ds-slider__thumb--active{cursor:grabbing;transform:translate(-50%,-50%) scale(1.15);box-shadow:var(--slider-thumb-shadow-active, 0 0 0 4px rgba(var(--color-primary-rgb), .2))}.ds-slider__thumb[aria-disabled=true]{cursor:not-allowed;opacity:.5}.ds-slider__thumb-label{position:absolute;top:-32px;left:50%;transform:translate(-50%);background-color:var(--slider-thumb-label-bg, var(--gray-900, #111827));color:var(--slider-thumb-label-color, var(--white, #ffffff));font-size:var(--font-size-1, .75rem);padding:var(--space-1, .25rem) var(--space-2, .5rem);border-radius:var(--radius-1, .25rem);white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .15s ease}.ds-slider__thumb:hover .ds-slider__thumb-label,.ds-slider__thumb:focus .ds-slider__thumb-label,.ds-slider__thumb--active .ds-slider__thumb-label{opacity:1}.ds-slider--sm .ds-slider__track{height:var(--slider-track-height-sm, 4px)}.ds-slider--sm .ds-slider__thumb{width:var(--slider-thumb-size-sm, 16px);height:var(--slider-thumb-size-sm, 16px)}.ds-slider--sm .ds-slider__label{font-size:var(--font-size-1, .75rem)}.ds-slider--lg .ds-slider__track{height:var(--slider-track-height-lg, 8px)}.ds-slider--lg .ds-slider__thumb{width:var(--slider-thumb-size-lg, 24px);height:var(--slider-thumb-size-lg, 24px)}.ds-slider--lg .ds-slider__label{font-size:var(--font-size-3, 1rem)}.ds-slider--disabled{opacity:.6;pointer-events:none}.ds-slider--disabled .ds-slider__track{cursor:not-allowed}.ds-slider--vertical{flex-direction:column;height:200px;width:auto}.ds-slider--vertical .ds-slider__label--min{order:3}.ds-slider--vertical .ds-slider__label--max{order:1}.ds-slider--vertical .ds-slider__track-container{flex:1;width:auto;height:100%;display:flex;justify-content:center}.ds-slider--vertical .ds-slider__track{width:var(--slider-track-height-md, 6px);height:100%}.ds-slider--vertical .ds-slider__fill{width:100%;height:auto}.ds-slider--vertical .ds-slider__thumb{left:50%;top:auto;transform:translate(-50%,50%)}.ds-slider--vertical .ds-slider__thumb:hover:not([aria-disabled=true]){transform:translate(-50%,50%) scale(1.1)}.ds-slider--vertical .ds-slider__thumb--active{transform:translate(-50%,50%) scale(1.15)}.ds-slider--vertical .ds-slider__thumb-label{top:50%;left:32px;transform:translateY(-50%)}.ds-slider--vertical .ds-slider__tick{left:50%;top:auto;transform:translate(-50%,50%)}.ds-slider--vertical.ds-slider--sm .ds-slider__track{width:var(--slider-track-height-sm, 4px)}.ds-slider--vertical.ds-slider--lg .ds-slider__track{width:var(--slider-track-height-lg, 8px)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], range: [{ type: i0.Input, args: [{ isSignal: true, alias: "range", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], showLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabels", required: false }] }], showTicks: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTicks", required: false }] }], tickInterval: [{ type: i0.Input, args: [{ isSignal: true, alias: "tickInterval", required: false }] }], formatLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatLabel", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], trackElement: [{
                 type: ViewChild,
                 args: ['track', { static: false }]
@@ -8556,6 +8556,1613 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                     ], template: "<div\n  [ngClass]=\"containerClasses()\"\n  (dragenter)=\"onDragEnter($event)\"\n  (dragover)=\"onDragOver($event)\"\n  (dragleave)=\"onDragLeave($event)\"\n  (drop)=\"onDrop($event)\"\n>\n  <!-- Zone de drop -->\n  <div\n    class=\"ds-file-upload__dropzone\"\n    [class.ds-file-upload__dropzone--active]=\"isDragging()\"\n    (click)=\"openFileSelector()\"\n    [attr.tabindex]=\"disabled() ? null : 0\"\n    [attr.aria-label]=\"label()\"\n    role=\"button\"\n  >\n    <input\n      #fileInput\n      type=\"file\"\n      class=\"ds-file-upload__input\"\n      [accept]=\"accept()\"\n      [multiple]=\"multiple()\"\n      [disabled]=\"disabled() || isMaxFilesReached()\"\n      (change)=\"onFileSelect($event)\"\n      aria-hidden=\"true\"\n      tabindex=\"-1\"\n    />\n\n    <!-- Ic\u00F4ne et texte -->\n    <div class=\"ds-file-upload__icon\">\n      <fa-icon [icon]=\"faCloudArrowUp\" size=\"2x\"></fa-icon>\n    </div>\n    <div class=\"ds-file-upload__text\">\n      <span class=\"ds-file-upload__label\">{{ label() }}</span>\n      @if (!disabled() && !isMaxFilesReached()) {\n        <span class=\"ds-file-upload__help\">{{ dragHelpText() }}</span>\n      }\n      @if (isMaxFilesReached()) {\n        <span class=\"ds-file-upload__limit\">Limite atteinte ({{ maxFiles() }} fichier{{ maxFiles() > 1 ? 's' : '' }})</span>\n      }\n    </div>\n\n    <!-- Message d'erreur global -->\n    @if (errorMessage()) {\n      <div class=\"ds-file-upload__error\" role=\"alert\">\n        {{ errorMessage() }}\n      </div>\n    }\n\n    <!-- Indications -->\n    @if (!errorMessage() && accept() !== '*') {\n      <div class=\"ds-file-upload__hint\">\n        Types accept\u00E9s : {{ accept() }}\n      </div>\n    }\n    @if (!errorMessage() && maxFileSize()) {\n      <div class=\"ds-file-upload__hint\">\n        Taille max : {{ formatFileSize(maxFileSize()) }}\n      </div>\n    }\n  </div>\n\n  <!-- Liste des fichiers -->\n  @if (fileCount() > 0) {\n    <div class=\"ds-file-upload__files\">\n      @for (uploadFile of files(); track uploadFile.file.name) {\n        <div class=\"ds-file-upload__file\">\n          <!-- Preview image -->\n          @if (showPreview() && uploadFile.preview) {\n            <div class=\"ds-file-upload__preview\">\n              <img [src]=\"uploadFile.preview\" [alt]=\"uploadFile.file.name\" />\n            </div>\n          } @else {\n            <div class=\"ds-file-upload__file-icon\">\n              <fa-icon [icon]=\"getFileIcon(uploadFile.file)\"></fa-icon>\n            </div>\n          }\n\n          <!-- Infos fichier -->\n          <div class=\"ds-file-upload__file-info\">\n            <div class=\"ds-file-upload__file-name\" [title]=\"uploadFile.file.name\">\n              {{ uploadFile.file.name }}\n            </div>\n            <div class=\"ds-file-upload__file-size\">\n              {{ formatFileSize(uploadFile.file.size) }}\n            </div>\n\n            <!-- Barre de progression -->\n            @if (uploadFile.progress < 100) {\n              <ds-progress-bar\n                [value]=\"uploadFile.progress\"\n                size=\"sm\"\n                variant=\"default\"\n                [showLabel]=\"true\"\n              ></ds-progress-bar>\n            }\n\n            <!-- Message d'erreur fichier -->\n            @if (uploadFile.error) {\n              <div class=\"ds-file-upload__file-error\" role=\"alert\">\n                {{ uploadFile.error }}\n              </div>\n            }\n          </div>\n\n          <!-- Bouton supprimer -->\n          <button\n            type=\"button\"\n            class=\"ds-file-upload__remove\"\n            (click)=\"removeFile(uploadFile)\"\n            [disabled]=\"disabled()\"\n            [attr.aria-label]=\"'Supprimer ' + uploadFile.file.name\"\n          >\n            <fa-icon [icon]=\"faXmark\"></fa-icon>\n          </button>\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [".ds-file-upload{display:block;font-family:var(--font-family-base)}.ds-file-upload__dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-8);border:2px dashed var(--file-upload-border, var(--gray-300));border-radius:var(--file-upload-radius, var(--radius-2));background:var(--file-upload-bg, var(--white));cursor:pointer;transition:all .2s ease;position:relative;min-height:200px}.ds-file-upload__dropzone:hover:not(.ds-file-upload--disabled .ds-file-upload__dropzone){border-color:var(--file-upload-border-hover, var(--color-primary));background:var(--file-upload-bg-hover, var(--gray-50))}.ds-file-upload__dropzone:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.ds-file-upload__dropzone--active{border-color:var(--file-upload-border-active, var(--color-primary));background:var(--file-upload-bg-active, var(--blue-50))}.ds-file-upload__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.ds-file-upload__icon{color:var(--file-upload-icon-color, var(--gray-400));margin-bottom:var(--space-3);transition:color .2s ease}.ds-file-upload__dropzone:hover .ds-file-upload__icon{color:var(--file-upload-icon-color-hover, var(--color-primary))}.ds-file-upload__dropzone--active .ds-file-upload__icon{color:var(--file-upload-icon-color-active, var(--color-primary));transform:scale(1.1)}.ds-file-upload__text{text-align:center;color:var(--file-upload-text-color, var(--gray-700))}.ds-file-upload__label{display:block;font-size:var(--font-size-base, var(--font-size-3));font-weight:500;margin-bottom:var(--space-1);color:var(--file-upload-label-color, var(--gray-900))}.ds-file-upload__help{display:block;font-size:var(--font-size-sm, var(--font-size-2));color:var(--file-upload-help-color, var(--gray-500))}.ds-file-upload__limit{display:block;font-size:var(--font-size-sm, var(--font-size-2));color:var(--warning);font-weight:500}.ds-file-upload__error{margin-top:var(--space-2);padding:var(--space-2) var(--space-3);background:var(--error-bg, var(--red-50));color:var(--error);border-radius:var(--radius-1);font-size:var(--font-size-sm, var(--font-size-2));text-align:center}.ds-file-upload__hint{margin-top:var(--space-1);font-size:var(--font-size-xs, var(--font-size-1));color:var(--file-upload-hint-color, var(--gray-500));text-align:center}.ds-file-upload__files{margin-top:var(--space-4);display:flex;flex-direction:column;gap:var(--space-3)}.ds-file-upload__file{display:flex;align-items:flex-start;gap:var(--space-3);padding:var(--space-3);border:1px solid var(--file-upload-file-border, var(--gray-200));border-radius:var(--radius-2);background:var(--file-upload-file-bg, var(--white));transition:all .2s ease}.ds-file-upload__file:hover{background:var(--file-upload-file-bg-hover, var(--gray-50))}.ds-file-upload__preview{flex-shrink:0;width:60px;height:60px;border-radius:var(--radius-1);overflow:hidden;border:1px solid var(--gray-200)}.ds-file-upload__preview img{width:100%;height:100%;object-fit:cover}.ds-file-upload__file-icon{flex-shrink:0;width:60px;height:60px;display:flex;align-items:center;justify-content:center;background:var(--gray-50);border-radius:var(--radius-1);color:var(--gray-400);font-size:var(--font-size-5)}.ds-file-upload__file-info{flex:1;min-width:0}.ds-file-upload__file-name{font-size:var(--font-size-sm, var(--font-size-2));font-weight:500;color:var(--gray-900);margin-bottom:var(--space-1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ds-file-upload__file-size{font-size:var(--font-size-xs, var(--font-size-1));color:var(--gray-500);margin-bottom:var(--space-2)}.ds-file-upload__file-error{margin-top:var(--space-2);padding:var(--space-1) var(--space-2);background:var(--error-bg, var(--red-50));color:var(--error);border-radius:var(--radius-1);font-size:var(--font-size-xs, var(--font-size-1))}.ds-file-upload__remove{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:none;background:transparent;color:var(--gray-400);border-radius:var(--radius-1);cursor:pointer;transition:all .2s ease}.ds-file-upload__remove:hover:not(:disabled){background:var(--gray-100);color:var(--error)}.ds-file-upload__remove:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.ds-file-upload__remove:disabled{opacity:.5;cursor:not-allowed}.ds-file-upload--sm .ds-file-upload__dropzone{min-height:150px;padding:var(--space-6)}.ds-file-upload--sm .ds-file-upload__label{font-size:var(--font-size-sm, var(--font-size-2))}.ds-file-upload--sm .ds-file-upload__preview,.ds-file-upload--sm .ds-file-upload__file-icon{width:48px;height:48px}.ds-file-upload--lg .ds-file-upload__dropzone{min-height:250px;padding:var(--space-10)}.ds-file-upload--lg .ds-file-upload__label{font-size:var(--font-size-lg, var(--font-size-4))}.ds-file-upload--lg .ds-file-upload__preview,.ds-file-upload--lg .ds-file-upload__file-icon{width:80px;height:80px}.ds-file-upload--disabled{opacity:.6;cursor:not-allowed}.ds-file-upload--disabled .ds-file-upload__dropzone{cursor:not-allowed;pointer-events:none}.ds-file-upload--error .ds-file-upload__dropzone{border-color:var(--error)}\n"] }]
         }], propDecorators: { accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], maxFileSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFileSize", required: false }] }], maxFiles: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFiles", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], showPreview: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPreview", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], dragHelpText: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragHelpText", required: false }] }], filesChange: [{ type: i0.Output, args: ["filesChange"] }], fileRemoved: [{ type: i0.Output, args: ["fileRemoved"] }], uploadProgress: [{ type: i0.Output, args: ["uploadProgress"] }], fileInput: [{ type: i0.ViewChild, args: ['fileInput', { isSignal: true }] }] } });
 
+/**
+ * # DsEmpty
+ *
+ * Composant d'état vide standardisé permettant d'afficher un message
+ * lorsqu'aucune donnée n'est disponible, avec une illustration optionnelle.
+ *
+ * ## Usage
+ *
+ * ```html
+ * <ds-empty
+ *   title="Aucun résultat"
+ *   description="Essayez de modifier vos filtres"
+ *   [icon]="faSearch">
+ *   <button ds-button (click)="resetFilters()">Réinitialiser</button>
+ * </ds-empty>
+ * ```
+ *
+ * ## Accessibilité
+ *
+ * - Utilise `role="region"` avec `aria-label` descriptif
+ * - Icônes décoratives avec `aria-hidden="true"`
+ * - Support des actions via content projection
+ *
+ * @component
+ */
+class DsEmpty {
+    /**
+     * Titre principal de l'état vide.
+     * @default 'Aucune donnée'
+     */
+    title = input('Aucune donnée', ...(ngDevMode ? [{ debugName: "title" }] : []));
+    /**
+     * Description complémentaire optionnelle.
+     */
+    description = input('', ...(ngDevMode ? [{ debugName: "description" }] : []));
+    /**
+     * Icône FontAwesome à afficher.
+     * @default faInbox
+     */
+    icon = input(faInbox, ...(ngDevMode ? [{ debugName: "icon" }] : []));
+    /**
+     * URL d'une image personnalisée (illustration ou SVG).
+     * Si fournie, prend le pas sur l'icône FontAwesome.
+     */
+    imageUrl = input('', ...(ngDevMode ? [{ debugName: "imageUrl" }] : []));
+    /**
+     * Taille du composant (affecte l'icône et les espacements).
+     * @default 'md'
+     */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    /**
+     * Classes CSS calculées pour le conteneur.
+     */
+    containerClasses = computed(() => {
+        return [
+            'ds-empty',
+            `ds-empty--${this.size()}`,
+        ].join(' ');
+    }, ...(ngDevMode ? [{ debugName: "containerClasses" }] : []));
+    /**
+     * Classes CSS calculées pour l'icône.
+     */
+    iconClasses = computed(() => {
+        const baseClass = 'ds-empty__icon';
+        return `${baseClass} ${baseClass}--${this.size()}`;
+    }, ...(ngDevMode ? [{ debugName: "iconClasses" }] : []));
+    /**
+     * Classes CSS calculées pour l'image.
+     */
+    imageClasses = computed(() => {
+        const baseClass = 'ds-empty__image';
+        return `${baseClass} ${baseClass}--${this.size()}`;
+    }, ...(ngDevMode ? [{ debugName: "imageClasses" }] : []));
+    /**
+     * Détermine si une image doit être affichée.
+     */
+    hasImage = computed(() => !!this.imageUrl(), ...(ngDevMode ? [{ debugName: "hasImage" }] : []));
+    /**
+     * Détermine si une description est fournie.
+     */
+    hasDescription = computed(() => !!this.description(), ...(ngDevMode ? [{ debugName: "hasDescription" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsEmpty, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DsEmpty, isStandalone: true, selector: "ds-empty", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, imageUrl: { classPropertyName: "imageUrl", publicName: "imageUrl", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  [class]=\"containerClasses()\"\n  role=\"region\"\n  [attr.aria-label]=\"'\u00C9tat vide : ' + title()\">\n\n  <!-- Image personnalis\u00E9e -->\n  @if (hasImage()) {\n    <div [class]=\"imageClasses()\">\n      <img\n        [src]=\"imageUrl()\"\n        [alt]=\"title()\"\n        class=\"ds-empty__image-element\" />\n    </div>\n  }\n\n  <!-- Ic\u00F4ne FontAwesome par d\u00E9faut -->\n  @if (!hasImage()) {\n    <div [class]=\"iconClasses()\">\n      <fa-icon\n        [icon]=\"icon()\"\n        aria-hidden=\"true\" />\n    </div>\n  }\n\n  <!-- Contenu texte -->\n  <div class=\"ds-empty__content\">\n    <h3 class=\"ds-empty__title\">{{ title() }}</h3>\n\n    @if (hasDescription()) {\n      <p class=\"ds-empty__description\">{{ description() }}</p>\n    }\n  </div>\n\n  <!-- Slot pour action button personnalis\u00E9 -->\n  <div class=\"ds-empty__actions\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".ds-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:var(--empty-padding, var(--space-8));color:var(--empty-text, var(--text-muted))}.ds-empty--sm{padding:var(--empty-padding-sm, var(--space-6))}.ds-empty--md{padding:var(--empty-padding-md, var(--space-8))}.ds-empty--lg{padding:var(--empty-padding-lg, var(--space-10))}.ds-empty__icon{display:flex;align-items:center;justify-content:center;margin-bottom:var(--empty-icon-margin, var(--space-4));color:var(--empty-icon-color, var(--text-disabled))}.ds-empty__icon--sm{font-size:var(--empty-icon-size-sm, 2.5rem)}.ds-empty__icon--md{font-size:var(--empty-icon-size-md, 3.5rem)}.ds-empty__icon--lg{font-size:var(--empty-icon-size-lg, 5rem)}.ds-empty__image{display:flex;align-items:center;justify-content:center;margin-bottom:var(--empty-image-margin, var(--space-4))}.ds-empty__image--sm{width:var(--empty-image-size-sm, 120px);height:var(--empty-image-size-sm, 120px)}.ds-empty__image--md{width:var(--empty-image-size-md, 180px);height:var(--empty-image-size-md, 180px)}.ds-empty__image--lg{width:var(--empty-image-size-lg, 240px);height:var(--empty-image-size-lg, 240px)}.ds-empty__image-element{width:100%;height:100%;object-fit:contain}.ds-empty__content{margin-bottom:var(--empty-content-margin, var(--space-4))}.ds-empty__title{margin:0 0 var(--space-2);font-size:var(--empty-title-font-size, var(--font-size-lg));font-weight:var(--empty-title-font-weight, 600);color:var(--empty-title-color, var(--text-default))}.ds-empty__description{margin:0;font-size:var(--empty-description-font-size, var(--font-size-sm));color:var(--empty-description-color, var(--text-muted));max-width:var(--empty-description-max-width, 400px)}.ds-empty__actions{display:flex;gap:var(--empty-actions-gap, var(--space-3));align-items:center;justify-content:center}.ds-empty__actions:empty{display: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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsEmpty, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-empty', imports: [CommonModule, FontAwesomeModule], template: "<div\n  [class]=\"containerClasses()\"\n  role=\"region\"\n  [attr.aria-label]=\"'\u00C9tat vide : ' + title()\">\n\n  <!-- Image personnalis\u00E9e -->\n  @if (hasImage()) {\n    <div [class]=\"imageClasses()\">\n      <img\n        [src]=\"imageUrl()\"\n        [alt]=\"title()\"\n        class=\"ds-empty__image-element\" />\n    </div>\n  }\n\n  <!-- Ic\u00F4ne FontAwesome par d\u00E9faut -->\n  @if (!hasImage()) {\n    <div [class]=\"iconClasses()\">\n      <fa-icon\n        [icon]=\"icon()\"\n        aria-hidden=\"true\" />\n    </div>\n  }\n\n  <!-- Contenu texte -->\n  <div class=\"ds-empty__content\">\n    <h3 class=\"ds-empty__title\">{{ title() }}</h3>\n\n    @if (hasDescription()) {\n      <p class=\"ds-empty__description\">{{ description() }}</p>\n    }\n  </div>\n\n  <!-- Slot pour action button personnalis\u00E9 -->\n  <div class=\"ds-empty__actions\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".ds-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:var(--empty-padding, var(--space-8));color:var(--empty-text, var(--text-muted))}.ds-empty--sm{padding:var(--empty-padding-sm, var(--space-6))}.ds-empty--md{padding:var(--empty-padding-md, var(--space-8))}.ds-empty--lg{padding:var(--empty-padding-lg, var(--space-10))}.ds-empty__icon{display:flex;align-items:center;justify-content:center;margin-bottom:var(--empty-icon-margin, var(--space-4));color:var(--empty-icon-color, var(--text-disabled))}.ds-empty__icon--sm{font-size:var(--empty-icon-size-sm, 2.5rem)}.ds-empty__icon--md{font-size:var(--empty-icon-size-md, 3.5rem)}.ds-empty__icon--lg{font-size:var(--empty-icon-size-lg, 5rem)}.ds-empty__image{display:flex;align-items:center;justify-content:center;margin-bottom:var(--empty-image-margin, var(--space-4))}.ds-empty__image--sm{width:var(--empty-image-size-sm, 120px);height:var(--empty-image-size-sm, 120px)}.ds-empty__image--md{width:var(--empty-image-size-md, 180px);height:var(--empty-image-size-md, 180px)}.ds-empty__image--lg{width:var(--empty-image-size-lg, 240px);height:var(--empty-image-size-lg, 240px)}.ds-empty__image-element{width:100%;height:100%;object-fit:contain}.ds-empty__content{margin-bottom:var(--empty-content-margin, var(--space-4))}.ds-empty__title{margin:0 0 var(--space-2);font-size:var(--empty-title-font-size, var(--font-size-lg));font-weight:var(--empty-title-font-weight, 600);color:var(--empty-title-color, var(--text-default))}.ds-empty__description{margin:0;font-size:var(--empty-description-font-size, var(--font-size-sm));color:var(--empty-description-color, var(--text-muted));max-width:var(--empty-description-max-width, 400px)}.ds-empty__actions{display:flex;gap:var(--empty-actions-gap, var(--space-3));align-items:center;justify-content:center}.ds-empty__actions:empty{display:none}\n"] }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], imageUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageUrl", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
+
+/**
+ * # DsRating
+ *
+ * Composant de notation par étoiles permettant d'afficher et de saisir
+ * une note sur une échelle configurable (par défaut 0-5).
+ *
+ * ## Usage
+ *
+ * ```html
+ * <ds-rating
+ *   [(value)]="rating"
+ *   [max]="5"
+ *   [allowHalf]="true"
+ *   (ratingChange)="handleRatingChange($event)" />
+ * ```
+ *
+ * ## Intégration formulaires
+ *
+ * ```html
+ * <form [formGroup]="form">
+ *   <ds-rating formControlName="rating" />
+ * </form>
+ * ```
+ *
+ * ## Accessibilité
+ *
+ * - Navigation clavier : ArrowLeft/Right pour changer la note
+ * - Attributs ARIA : role, aria-label, aria-valuenow/valuemin/valuemax
+ * - Focus visible sur les étoiles
+ *
+ * @component
+ */
+class DsRating {
+    /**
+     * Valeur actuelle de la notation (0 à max).
+     * @default 0
+     */
+    value = input(0, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    /**
+     * Valeur maximale de la notation.
+     * @default 5
+     */
+    max = input(5, ...(ngDevMode ? [{ debugName: "max" }] : []));
+    /**
+     * Taille du composant (affecte la taille des étoiles).
+     * @default 'md'
+     */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    /**
+     * Permet la saisie de demi-étoiles (notes 0.5, 1.5, etc.).
+     * @default false
+     */
+    allowHalf = input(false, ...(ngDevMode ? [{ debugName: "allowHalf" }] : []));
+    /**
+     * Mode lecture seule (affichage uniquement).
+     * @default false
+     */
+    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
+    /**
+     * État désactivé (pas d'interaction).
+     * @default false
+     */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    /**
+     * Émis lorsque la notation change.
+     */
+    ratingChange = output();
+    /**
+     * État interne de la valeur (ControlValueAccessor).
+     */
+    internalValue = signal(0, ...(ngDevMode ? [{ debugName: "internalValue" }] : []));
+    /**
+     * État de survol (pour aperçu avant clic).
+     */
+    hoverValue = signal(null, ...(ngDevMode ? [{ debugName: "hoverValue" }] : []));
+    /**
+     * Callbacks ControlValueAccessor.
+     */
+    onChange = () => { };
+    onTouched = () => { };
+    /**
+     * Icônes FontAwesome pour les étoiles.
+     */
+    faStar = faStar;
+    faStarHalf = faStarHalfStroke;
+    /**
+     * Tableau des indices d'étoiles pour le rendu.
+     */
+    stars = computed(() => {
+        return Array.from({ length: this.max() }, (_, i) => i + 1);
+    }, ...(ngDevMode ? [{ debugName: "stars" }] : []));
+    /**
+     * Valeur affichée (avec prise en compte du survol).
+     */
+    displayValue = computed(() => {
+        return this.hoverValue() ?? this.internalValue();
+    }, ...(ngDevMode ? [{ debugName: "displayValue" }] : []));
+    /**
+     * Classes CSS calculées pour le conteneur.
+     */
+    containerClasses = computed(() => {
+        return [
+            'ds-rating',
+            `ds-rating--${this.size()}`,
+            this.disabled() ? 'ds-rating--disabled' : '',
+            this.readonly() ? 'ds-rating--readonly' : '',
+        ].filter(Boolean).join(' ');
+    }, ...(ngDevMode ? [{ debugName: "containerClasses" }] : []));
+    /**
+     * Détermine le type d'icône à afficher pour une étoile donnée.
+     * - 'full' : étoile pleine
+     * - 'half' : demi-étoile
+     * - 'empty' : étoile vide
+     */
+    getStarType(index) {
+        const value = this.displayValue();
+        const diff = value - index;
+        if (diff >= 0)
+            return 'full';
+        if (this.allowHalf() && diff >= -0.5)
+            return 'half';
+        return 'empty';
+    }
+    /**
+     * Gère le clic sur une étoile.
+     */
+    handleStarClick(index, event) {
+        if (this.disabled() || this.readonly())
+            return;
+        let newValue = index;
+        // Détection du clic sur la moitié gauche ou droite
+        if (this.allowHalf()) {
+            const target = event.target;
+            const rect = target.getBoundingClientRect();
+            const clickX = event.clientX - rect.left;
+            const halfWidth = rect.width / 2;
+            if (clickX < halfWidth) {
+                newValue = index - 0.5;
+            }
+        }
+        this.updateValue(newValue);
+    }
+    /**
+     * Gère le survol d'une étoile.
+     */
+    handleStarHover(index, event) {
+        if (this.disabled() || this.readonly())
+            return;
+        let hoverVal = index;
+        if (this.allowHalf()) {
+            const target = event.target;
+            const rect = target.getBoundingClientRect();
+            const hoverX = event.clientX - rect.left;
+            const halfWidth = rect.width / 2;
+            if (hoverX < halfWidth) {
+                hoverVal = index - 0.5;
+            }
+        }
+        this.hoverValue.set(hoverVal);
+    }
+    /**
+     * Réinitialise le survol.
+     */
+    handleMouseLeave() {
+        this.hoverValue.set(null);
+    }
+    /**
+     * Navigation clavier (ArrowLeft/Right).
+     */
+    handleKeyDown(event) {
+        if (this.disabled() || this.readonly())
+            return;
+        const step = this.allowHalf() ? 0.5 : 1;
+        let newValue = this.internalValue();
+        if (event.key === 'ArrowRight' || event.key === 'ArrowUp') {
+            event.preventDefault();
+            newValue = Math.min(this.max(), newValue + step);
+            this.updateValue(newValue);
+        }
+        else if (event.key === 'ArrowLeft' || event.key === 'ArrowDown') {
+            event.preventDefault();
+            newValue = Math.max(0, newValue - step);
+            this.updateValue(newValue);
+        }
+        else if (event.key === 'Home') {
+            event.preventDefault();
+            this.updateValue(0);
+        }
+        else if (event.key === 'End') {
+            event.preventDefault();
+            this.updateValue(this.max());
+        }
+    }
+    /**
+     * Met à jour la valeur interne et notifie les changements.
+     */
+    updateValue(newValue) {
+        this.internalValue.set(newValue);
+        this.onChange(newValue);
+        this.onTouched();
+        this.ratingChange.emit(newValue);
+    }
+    // ============================================================================
+    // ControlValueAccessor
+    // ============================================================================
+    writeValue(value) {
+        this.internalValue.set(value ?? 0);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        // Le signal disabled est déjà géré via input()
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsRating, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DsRating, isStandalone: true, selector: "ds-rating", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, allowHalf: { classPropertyName: "allowHalf", publicName: "allowHalf", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ratingChange: "ratingChange" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => DsRating),
+                multi: true,
+            },
+        ], ngImport: i0, template: "<div\n  [class]=\"containerClasses()\"\n  role=\"slider\"\n  [attr.aria-label]=\"'Note : ' + displayValue() + ' sur ' + max()\"\n  [attr.aria-valuenow]=\"displayValue()\"\n  [attr.aria-valuemin]=\"0\"\n  [attr.aria-valuemax]=\"max()\"\n  [attr.aria-readonly]=\"readonly()\"\n  [attr.aria-disabled]=\"disabled()\"\n  [attr.tabindex]=\"disabled() || readonly() ? -1 : 0\"\n  (keydown)=\"handleKeyDown($event)\"\n  (mouseleave)=\"handleMouseLeave()\">\n\n  @for (starIndex of stars(); track starIndex) {\n    <span\n      class=\"ds-rating__star\"\n      [attr.data-index]=\"starIndex\"\n      (click)=\"handleStarClick(starIndex, $event)\"\n      (mousemove)=\"handleStarHover(starIndex, $event)\">\n\n      @switch (getStarType(starIndex)) {\n        @case ('full') {\n          <fa-icon [icon]=\"faStar\" class=\"ds-rating__icon ds-rating__icon--filled\" aria-hidden=\"true\" />\n        }\n        @case ('half') {\n          <fa-icon [icon]=\"faStarHalf\" class=\"ds-rating__icon ds-rating__icon--half\" aria-hidden=\"true\" />\n        }\n        @case ('empty') {\n          <fa-icon [icon]=\"faStar\" class=\"ds-rating__icon ds-rating__icon--empty\" aria-hidden=\"true\" />\n        }\n      }\n    </span>\n  }\n</div>\n", styles: [".ds-rating{display:inline-flex;align-items:center;gap:var(--rating-gap, var(--space-1));outline:none}.ds-rating--sm{gap:var(--rating-gap-sm, 2px)}.ds-rating--md{gap:var(--rating-gap-md, var(--space-1))}.ds-rating--lg{gap:var(--rating-gap-lg, var(--space-2))}.ds-rating--readonly{cursor:default}.ds-rating--disabled{opacity:var(--rating-disabled-opacity, .5);cursor:not-allowed;pointer-events:none}.ds-rating:focus-visible{outline:2px solid var(--rating-focus-color, var(--color-primary));outline-offset:2px;border-radius:var(--rating-focus-radius, var(--radius-1))}.ds-rating__star{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .15s ease}.ds-rating__star:hover{transform:scale(var(--rating-hover-scale, 1.1))}.ds-rating__star:active{transform:scale(var(--rating-active-scale, .95))}.ds-rating--readonly .ds-rating__star,.ds-rating--disabled .ds-rating__star{cursor:default}.ds-rating--readonly .ds-rating__star:hover,.ds-rating--disabled .ds-rating__star:hover{transform:none}.ds-rating__icon{transition:color .15s ease}.ds-rating--sm .ds-rating__icon{font-size:var(--rating-icon-size-sm, 16px)}.ds-rating--md .ds-rating__icon{font-size:var(--rating-icon-size-md, 20px)}.ds-rating--lg .ds-rating__icon{font-size:var(--rating-icon-size-lg, 28px)}.ds-rating__icon--filled,.ds-rating__icon--half{color:var(--rating-filled-color, var(--warning))}.ds-rating__icon--empty{color:var(--rating-empty-color, var(--border-color))}.ds-rating__star:hover .ds-rating__icon--empty{color:var(--rating-hover-color, color-mix(in oklab, var(--warning) 50%, transparent))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i1$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsRating, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-rating', imports: [CommonModule, FontAwesomeModule], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => DsRating),
+                            multi: true,
+                        },
+                    ], template: "<div\n  [class]=\"containerClasses()\"\n  role=\"slider\"\n  [attr.aria-label]=\"'Note : ' + displayValue() + ' sur ' + max()\"\n  [attr.aria-valuenow]=\"displayValue()\"\n  [attr.aria-valuemin]=\"0\"\n  [attr.aria-valuemax]=\"max()\"\n  [attr.aria-readonly]=\"readonly()\"\n  [attr.aria-disabled]=\"disabled()\"\n  [attr.tabindex]=\"disabled() || readonly() ? -1 : 0\"\n  (keydown)=\"handleKeyDown($event)\"\n  (mouseleave)=\"handleMouseLeave()\">\n\n  @for (starIndex of stars(); track starIndex) {\n    <span\n      class=\"ds-rating__star\"\n      [attr.data-index]=\"starIndex\"\n      (click)=\"handleStarClick(starIndex, $event)\"\n      (mousemove)=\"handleStarHover(starIndex, $event)\">\n\n      @switch (getStarType(starIndex)) {\n        @case ('full') {\n          <fa-icon [icon]=\"faStar\" class=\"ds-rating__icon ds-rating__icon--filled\" aria-hidden=\"true\" />\n        }\n        @case ('half') {\n          <fa-icon [icon]=\"faStarHalf\" class=\"ds-rating__icon ds-rating__icon--half\" aria-hidden=\"true\" />\n        }\n        @case ('empty') {\n          <fa-icon [icon]=\"faStar\" class=\"ds-rating__icon ds-rating__icon--empty\" aria-hidden=\"true\" />\n        }\n      }\n    </span>\n  }\n</div>\n", styles: [".ds-rating{display:inline-flex;align-items:center;gap:var(--rating-gap, var(--space-1));outline:none}.ds-rating--sm{gap:var(--rating-gap-sm, 2px)}.ds-rating--md{gap:var(--rating-gap-md, var(--space-1))}.ds-rating--lg{gap:var(--rating-gap-lg, var(--space-2))}.ds-rating--readonly{cursor:default}.ds-rating--disabled{opacity:var(--rating-disabled-opacity, .5);cursor:not-allowed;pointer-events:none}.ds-rating:focus-visible{outline:2px solid var(--rating-focus-color, var(--color-primary));outline-offset:2px;border-radius:var(--rating-focus-radius, var(--radius-1))}.ds-rating__star{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .15s ease}.ds-rating__star:hover{transform:scale(var(--rating-hover-scale, 1.1))}.ds-rating__star:active{transform:scale(var(--rating-active-scale, .95))}.ds-rating--readonly .ds-rating__star,.ds-rating--disabled .ds-rating__star{cursor:default}.ds-rating--readonly .ds-rating__star:hover,.ds-rating--disabled .ds-rating__star:hover{transform:none}.ds-rating__icon{transition:color .15s ease}.ds-rating--sm .ds-rating__icon{font-size:var(--rating-icon-size-sm, 16px)}.ds-rating--md .ds-rating__icon{font-size:var(--rating-icon-size-md, 20px)}.ds-rating--lg .ds-rating__icon{font-size:var(--rating-icon-size-lg, 28px)}.ds-rating__icon--filled,.ds-rating__icon--half{color:var(--rating-filled-color, var(--warning))}.ds-rating__icon--empty{color:var(--rating-empty-color, var(--border-color))}.ds-rating__star:hover .ds-rating__icon--empty{color:var(--rating-hover-color, color-mix(in oklab, var(--warning) 50%, transparent))}\n"] }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], allowHalf: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowHalf", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], ratingChange: [{ type: i0.Output, args: ["ratingChange"] }] } });
+
+/**
+ * # DsDrawer
+ *
+ * Composant de panneau latéral overlay avec animation slide-in/out.
+ * Utilise CDK Overlay pour le backdrop et le focus trap.
+ *
+ * ## Usage
+ *
+ * ```html
+ * <ds-drawer
+ *   [(visible)]="isDrawerOpen"
+ *   position="right"
+ *   size="md"
+ *   title="Détails"
+ *   [closable]="true"
+ *   (closed)="onDrawerClose()">
+ *   <!-- Header -->
+ *   <ng-template #header>
+ *     <h3>Mon en-tête personnalisé</h3>
+ *   </ng-template>
+ *
+ *   <!-- Body -->
+ *   <p>Contenu du drawer</p>
+ *
+ *   <!-- Footer -->
+ *   <ng-template #footer>
+ *     <button>Annuler</button>
+ *     <button>Valider</button>
+ *   </ng-template>
+ * </ds-drawer>
+ * ```
+ *
+ * ## Accessibilité
+ *
+ * - Focus trap : le focus reste dans le drawer
+ * - Navigation clavier : Escape pour fermer
+ * - Attributs ARIA : role, aria-labelledby, aria-modal
+ *
+ * @component
+ */
+class DsDrawer {
+    /**
+     * Visibilité du drawer.
+     * @default false
+     */
+    visible = input(false, ...(ngDevMode ? [{ debugName: "visible" }] : []));
+    /**
+     * Position du drawer (left/right).
+     * @default 'right'
+     */
+    position = input('right', ...(ngDevMode ? [{ debugName: "position" }] : []));
+    /**
+     * Taille du drawer.
+     * @default 'md'
+     */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    /**
+     * Titre affiché dans le header (optionnel).
+     */
+    title = input('', ...(ngDevMode ? [{ debugName: "title" }] : []));
+    /**
+     * Affiche le bouton de fermeture.
+     * @default true
+     */
+    closable = input(true, ...(ngDevMode ? [{ debugName: "closable" }] : []));
+    /**
+     * Ferme le drawer au clic sur le backdrop.
+     * @default true
+     */
+    maskClosable = input(true, ...(ngDevMode ? [{ debugName: "maskClosable" }] : []));
+    /**
+     * Émis lorsque la visibilité change.
+     */
+    visibleChange = output();
+    /**
+     * Émis lorsque le drawer est fermé.
+     */
+    closed = output();
+    /**
+     * Référence au conteneur du drawer.
+     */
+    drawerContainer;
+    /**
+     * État interne de visibilité pour gérer l'animation.
+     */
+    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+    isAnimating = signal(false, ...(ngDevMode ? [{ debugName: "isAnimating" }] : []));
+    /**
+     * Indique si la vue est prête.
+     */
+    viewReady = signal(false, ...(ngDevMode ? [{ debugName: "viewReady" }] : []));
+    /**
+     * Focus trap pour confiner la navigation clavier.
+     */
+    focusTrap = null;
+    /**
+     * Services injectés.
+     */
+    documentRef = inject(DOCUMENT);
+    focusTrapFactory = inject(FocusTrapFactory);
+    /**
+     * Icône de fermeture.
+     */
+    closeIcon = faTimes;
+    /**
+     * ID unique pour l'accessibilité.
+     */
+    drawerId = crypto.randomUUID();
+    drawerTitleId = `drawer-${this.drawerId}-title`;
+    /**
+     * Classes CSS calculées pour le conteneur.
+     */
+    containerClasses = computed(() => {
+        return [
+            'ds-drawer',
+            `ds-drawer--${this.position()}`,
+            `ds-drawer--${this.size()}`,
+            this.isOpen() ? 'ds-drawer--open' : '',
+        ].filter(Boolean).join(' ');
+    }, ...(ngDevMode ? [{ debugName: "containerClasses" }] : []));
+    /**
+     * Classes CSS calculées pour le backdrop.
+     */
+    backdropClasses = computed(() => {
+        return [
+            'ds-drawer__backdrop',
+            this.isOpen() ? 'ds-drawer__backdrop--visible' : '',
+        ].filter(Boolean).join(' ');
+    }, ...(ngDevMode ? [{ debugName: "backdropClasses" }] : []));
+    constructor() {
+        // Effet pour synchroniser l'état visible avec l'animation
+        effect(() => {
+            if (!this.viewReady())
+                return;
+            if (this.visible()) {
+                this.openDrawer();
+            }
+            else {
+                this.closeDrawer();
+            }
+        });
+    }
+    ngAfterViewInit() {
+        this.viewReady.set(true);
+    }
+    ngOnDestroy() {
+        this.detachFocusTrap();
+    }
+    /**
+     * Ouvre le drawer avec animation.
+     */
+    openDrawer() {
+        this.isAnimating.set(true);
+        this.isOpen.set(true);
+        // Empêche le scroll du body
+        this.documentRef.body.style.overflow = 'hidden';
+        // Attache le focus trap après l'animation
+        setTimeout(() => {
+            this.attachFocusTrap();
+            this.focusInitialElement();
+            this.isAnimating.set(false);
+        }, 300);
+    }
+    /**
+     * Ferme le drawer avec animation.
+     */
+    closeDrawer() {
+        this.isAnimating.set(true);
+        this.detachFocusTrap();
+        setTimeout(() => {
+            this.isOpen.set(false);
+            this.isAnimating.set(false);
+            // Restaure le scroll du body
+            this.documentRef.body.style.overflow = '';
+            this.closed.emit();
+        }, 300);
+    }
+    /**
+     * Gère la fermeture du drawer.
+     */
+    handleClose() {
+        if (!this.closable())
+            return;
+        this.visibleChange.emit(false);
+    }
+    /**
+     * Gère le clic sur le backdrop.
+     */
+    handleBackdropClick() {
+        if (!this.maskClosable())
+            return;
+        this.handleClose();
+    }
+    /**
+     * Gère la touche Escape.
+     */
+    handleKeyDown(event) {
+        if (event.key === 'Escape' && this.closable()) {
+            event.preventDefault();
+            this.handleClose();
+        }
+    }
+    /**
+     * Attache le focus trap.
+     */
+    attachFocusTrap() {
+        if (this.focusTrap || !this.drawerContainer)
+            return;
+        const element = this.drawerContainer.nativeElement;
+        this.focusTrap = this.focusTrapFactory.create(element);
+        this.focusTrap.attachAnchors();
+    }
+    /**
+     * Détache le focus trap.
+     */
+    detachFocusTrap() {
+        if (this.focusTrap) {
+            this.focusTrap.destroy();
+            this.focusTrap = null;
+        }
+    }
+    /**
+     * Place le focus sur le premier élément focusable.
+     */
+    focusInitialElement() {
+        if (!this.drawerContainer)
+            return;
+        const firstFocusable = this.drawerContainer.nativeElement.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+        if (firstFocusable) {
+            firstFocusable.focus();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsDrawer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DsDrawer, isStandalone: true, selector: "ds-drawer", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, maskClosable: { classPropertyName: "maskClosable", publicName: "maskClosable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visibleChange: "visibleChange", closed: "closed" }, viewQueries: [{ propertyName: "drawerContainer", first: true, predicate: ["drawerContainer"], descendants: true }], ngImport: i0, template: "<!-- Backdrop -->\n@if (isOpen()) {\n  <div\n    [class]=\"backdropClasses()\"\n    (click)=\"handleBackdropClick()\"\n    aria-hidden=\"true\">\n  </div>\n}\n\n<!-- Drawer Panel -->\n@if (isOpen()) {\n  <div\n    #drawerContainer\n    [class]=\"containerClasses()\"\n    role=\"dialog\"\n    [attr.aria-modal]=\"true\"\n    [attr.aria-labelledby]=\"title() ? drawerTitleId : null\"\n    (keydown)=\"handleKeyDown($event)\">\n\n    <!-- Header -->\n    <div class=\"ds-drawer__header\">\n      @if (title()) {\n        <h3 class=\"ds-drawer__title\" [id]=\"drawerTitleId\">{{ title() }}</h3>\n      }\n\n      <ng-content select=\"[drawer-header]\"></ng-content>\n\n      @if (closable()) {\n        <button\n          class=\"ds-drawer__close\"\n          type=\"button\"\n          aria-label=\"Fermer\"\n          (click)=\"handleClose()\">\n          <fa-icon [icon]=\"closeIcon\" aria-hidden=\"true\" />\n        </button>\n      }\n    </div>\n\n    <!-- Body -->\n    <div class=\"ds-drawer__body\">\n      <ng-content></ng-content>\n    </div>\n\n    <!-- Footer -->\n    <div class=\"ds-drawer__footer\">\n      <ng-content select=\"[drawer-footer]\"></ng-content>\n    </div>\n  </div>\n}\n", styles: [".ds-drawer__backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--drawer-backdrop, rgba(var(--black-rgb), .5));z-index:var(--drawer-backdrop-z-index, 1000);opacity:0;transition:opacity .3s ease-in-out}.ds-drawer__backdrop--visible{opacity:1}.ds-drawer{position:fixed;top:0;height:100%;background:var(--drawer-bg, var(--surface-default));box-shadow:var(--drawer-shadow, var(--shadow-3));z-index:var(--drawer-z-index, 1001);display:flex;flex-direction:column;overflow:hidden;transition:transform .3s ease-in-out}.ds-drawer--left{left:0;transform:translate(-100%)}.ds-drawer--left.ds-drawer--open{transform:translate(0)}.ds-drawer--right{right:0;transform:translate(100%)}.ds-drawer--right.ds-drawer--open{transform:translate(0)}.ds-drawer--sm{width:var(--drawer-width-sm, 320px)}.ds-drawer--md{width:var(--drawer-width-md, 480px)}.ds-drawer--lg{width:var(--drawer-width-lg, 640px)}.ds-drawer--full{width:100%}.ds-drawer__header{display:flex;align-items:center;justify-content:space-between;padding:var(--drawer-header-padding, var(--space-4));border-bottom:1px solid var(--drawer-border, var(--border-color));background:var(--drawer-header-bg, var(--surface-raised));flex-shrink:0}.ds-drawer__title{margin:0;font-size:var(--drawer-title-font-size, var(--font-size-lg));font-weight:var(--drawer-title-font-weight, 600);color:var(--drawer-title-color, var(--text-default));flex:1}.ds-drawer__close{display:inline-flex;align-items:center;justify-content:center;width:var(--drawer-close-size, 32px);height:var(--drawer-close-size, 32px);padding:0;background:transparent;border:none;border-radius:var(--drawer-close-radius, var(--radius-1));color:var(--drawer-close-color, var(--text-muted));cursor:pointer;transition:all .15s ease}.ds-drawer__close:hover{background:var(--drawer-close-hover-bg, var(--surface-hover));color:var(--drawer-close-hover-color, var(--text-default))}.ds-drawer__close:active{background:var(--drawer-close-active-bg, var(--surface-raised))}.ds-drawer__close:focus-visible{outline:2px solid var(--drawer-close-focus-color, var(--color-primary));outline-offset:2px}.ds-drawer__body{flex:1;overflow-y:auto;padding:var(--drawer-body-padding, var(--space-4));color:var(--drawer-body-color, var(--text-default))}.ds-drawer__footer{padding:var(--drawer-footer-padding, var(--space-4));border-top:1px solid var(--drawer-border, var(--border-color));background:var(--drawer-footer-bg, var(--surface-raised));flex-shrink:0}.ds-drawer__footer:empty{display: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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsDrawer, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-drawer', imports: [CommonModule, FontAwesomeModule], template: "<!-- Backdrop -->\n@if (isOpen()) {\n  <div\n    [class]=\"backdropClasses()\"\n    (click)=\"handleBackdropClick()\"\n    aria-hidden=\"true\">\n  </div>\n}\n\n<!-- Drawer Panel -->\n@if (isOpen()) {\n  <div\n    #drawerContainer\n    [class]=\"containerClasses()\"\n    role=\"dialog\"\n    [attr.aria-modal]=\"true\"\n    [attr.aria-labelledby]=\"title() ? drawerTitleId : null\"\n    (keydown)=\"handleKeyDown($event)\">\n\n    <!-- Header -->\n    <div class=\"ds-drawer__header\">\n      @if (title()) {\n        <h3 class=\"ds-drawer__title\" [id]=\"drawerTitleId\">{{ title() }}</h3>\n      }\n\n      <ng-content select=\"[drawer-header]\"></ng-content>\n\n      @if (closable()) {\n        <button\n          class=\"ds-drawer__close\"\n          type=\"button\"\n          aria-label=\"Fermer\"\n          (click)=\"handleClose()\">\n          <fa-icon [icon]=\"closeIcon\" aria-hidden=\"true\" />\n        </button>\n      }\n    </div>\n\n    <!-- Body -->\n    <div class=\"ds-drawer__body\">\n      <ng-content></ng-content>\n    </div>\n\n    <!-- Footer -->\n    <div class=\"ds-drawer__footer\">\n      <ng-content select=\"[drawer-footer]\"></ng-content>\n    </div>\n  </div>\n}\n", styles: [".ds-drawer__backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--drawer-backdrop, rgba(var(--black-rgb), .5));z-index:var(--drawer-backdrop-z-index, 1000);opacity:0;transition:opacity .3s ease-in-out}.ds-drawer__backdrop--visible{opacity:1}.ds-drawer{position:fixed;top:0;height:100%;background:var(--drawer-bg, var(--surface-default));box-shadow:var(--drawer-shadow, var(--shadow-3));z-index:var(--drawer-z-index, 1001);display:flex;flex-direction:column;overflow:hidden;transition:transform .3s ease-in-out}.ds-drawer--left{left:0;transform:translate(-100%)}.ds-drawer--left.ds-drawer--open{transform:translate(0)}.ds-drawer--right{right:0;transform:translate(100%)}.ds-drawer--right.ds-drawer--open{transform:translate(0)}.ds-drawer--sm{width:var(--drawer-width-sm, 320px)}.ds-drawer--md{width:var(--drawer-width-md, 480px)}.ds-drawer--lg{width:var(--drawer-width-lg, 640px)}.ds-drawer--full{width:100%}.ds-drawer__header{display:flex;align-items:center;justify-content:space-between;padding:var(--drawer-header-padding, var(--space-4));border-bottom:1px solid var(--drawer-border, var(--border-color));background:var(--drawer-header-bg, var(--surface-raised));flex-shrink:0}.ds-drawer__title{margin:0;font-size:var(--drawer-title-font-size, var(--font-size-lg));font-weight:var(--drawer-title-font-weight, 600);color:var(--drawer-title-color, var(--text-default));flex:1}.ds-drawer__close{display:inline-flex;align-items:center;justify-content:center;width:var(--drawer-close-size, 32px);height:var(--drawer-close-size, 32px);padding:0;background:transparent;border:none;border-radius:var(--drawer-close-radius, var(--radius-1));color:var(--drawer-close-color, var(--text-muted));cursor:pointer;transition:all .15s ease}.ds-drawer__close:hover{background:var(--drawer-close-hover-bg, var(--surface-hover));color:var(--drawer-close-hover-color, var(--text-default))}.ds-drawer__close:active{background:var(--drawer-close-active-bg, var(--surface-raised))}.ds-drawer__close:focus-visible{outline:2px solid var(--drawer-close-focus-color, var(--color-primary));outline-offset:2px}.ds-drawer__body{flex:1;overflow-y:auto;padding:var(--drawer-body-padding, var(--space-4));color:var(--drawer-body-color, var(--text-default))}.ds-drawer__footer{padding:var(--drawer-footer-padding, var(--space-4));border-top:1px solid var(--drawer-border, var(--border-color));background:var(--drawer-footer-bg, var(--surface-raised));flex-shrink:0}.ds-drawer__footer:empty{display:none}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], maskClosable: [{ type: i0.Input, args: [{ isSignal: true, alias: "maskClosable", required: false }] }], visibleChange: [{ type: i0.Output, args: ["visibleChange"] }], closed: [{ type: i0.Output, args: ["closed"] }], drawerContainer: [{
+                type: ViewChild,
+                args: ['drawerContainer']
+            }] } });
+
+class DsTimePickerPanelComponent {
+    hoursColumn;
+    minutesColumn;
+    secondsColumn;
+    // Config (set by parent)
+    value = '';
+    format = '24h';
+    showSeconds = false;
+    minuteStep = 1;
+    hourStep = 1;
+    minTime = null;
+    maxTime = null;
+    // Outputs
+    timeSelected = output();
+    // State
+    selectedHours = signal(0, ...(ngDevMode ? [{ debugName: "selectedHours" }] : []));
+    selectedMinutes = signal(0, ...(ngDevMode ? [{ debugName: "selectedMinutes" }] : []));
+    selectedSeconds = signal(0, ...(ngDevMode ? [{ debugName: "selectedSeconds" }] : []));
+    selectedPeriod = signal('AM', ...(ngDevMode ? [{ debugName: "selectedPeriod" }] : []));
+    // Computed
+    hoursOptions = computed(() => {
+        const options = [];
+        const max = this.format === '12h' ? 12 : 23;
+        const start = this.format === '12h' ? 1 : 0;
+        for (let i = start; i <= max; i += this.hourStep) {
+            options.push({
+                value: i,
+                label: i.toString().padStart(2, '0'),
+                disabled: this.isHourDisabled(i),
+            });
+        }
+        return options;
+    }, ...(ngDevMode ? [{ debugName: "hoursOptions" }] : []));
+    minutesOptions = computed(() => {
+        const options = [];
+        for (let i = 0; i < 60; i += this.minuteStep) {
+            options.push({
+                value: i,
+                label: i.toString().padStart(2, '0'),
+                disabled: this.isMinuteDisabled(i),
+            });
+        }
+        return options;
+    }, ...(ngDevMode ? [{ debugName: "minutesOptions" }] : []));
+    secondsOptions = computed(() => {
+        const options = [];
+        for (let i = 0; i < 60; i++) {
+            options.push({
+                value: i,
+                label: i.toString().padStart(2, '0'),
+                disabled: false,
+            });
+        }
+        return options;
+    }, ...(ngDevMode ? [{ debugName: "secondsOptions" }] : []));
+    constructor() {
+        // Parse initial value
+        effect(() => {
+            this.parseAndSetValue();
+        }, { allowSignalWrites: true });
+        // Emit when values change
+        effect(() => {
+            const hours = this.selectedHours();
+            const minutes = this.selectedMinutes();
+            const seconds = this.selectedSeconds();
+            const period = this.selectedPeriod();
+            this.emitTime(hours, minutes, seconds, period);
+        });
+    }
+    ngAfterViewInit() {
+        // Scroll to selected values
+        setTimeout(() => {
+            this.scrollToSelected();
+        }, 0);
+    }
+    selectHours(hours) {
+        this.selectedHours.set(hours);
+    }
+    selectMinutes(minutes) {
+        this.selectedMinutes.set(minutes);
+    }
+    selectSeconds(seconds) {
+        this.selectedSeconds.set(seconds);
+    }
+    selectPeriod(period) {
+        this.selectedPeriod.set(period);
+    }
+    onScroll(column, event) {
+        // Optional: could implement snap-to-value on scroll end
+    }
+    parseAndSetValue() {
+        if (!this.value) {
+            this.selectedHours.set(this.format === '12h' ? 12 : 0);
+            this.selectedMinutes.set(0);
+            this.selectedSeconds.set(0);
+            this.selectedPeriod.set('AM');
+            return;
+        }
+        const parts = this.value.split(':');
+        if (parts.length < 2)
+            return;
+        let hours = parseInt(parts[0], 10);
+        const minutes = parseInt(parts[1], 10);
+        const seconds = parts[2] ? parseInt(parts[2], 10) : 0;
+        if (this.format === '12h') {
+            const period = hours >= 12 ? 'PM' : 'AM';
+            hours = hours === 0 ? 12 : hours > 12 ? hours - 12 : hours;
+            this.selectedPeriod.set(period);
+        }
+        this.selectedHours.set(hours);
+        this.selectedMinutes.set(minutes);
+        this.selectedSeconds.set(seconds);
+    }
+    emitTime(hours, minutes, seconds, period) {
+        let finalHours = hours;
+        if (this.format === '12h') {
+            if (period === 'PM' && hours !== 12) {
+                finalHours = hours + 12;
+            }
+            else if (period === 'AM' && hours === 12) {
+                finalHours = 0;
+            }
+        }
+        const hoursStr = finalHours.toString().padStart(2, '0');
+        const minutesStr = minutes.toString().padStart(2, '0');
+        const secondsStr = seconds.toString().padStart(2, '0');
+        const timeString = this.showSeconds
+            ? `${hoursStr}:${minutesStr}:${secondsStr}`
+            : `${hoursStr}:${minutesStr}`;
+        this.timeSelected.emit(timeString);
+    }
+    isHourDisabled(hour) {
+        // TODO: implement minTime/maxTime validation
+        return false;
+    }
+    isMinuteDisabled(minute) {
+        // TODO: implement minTime/maxTime validation
+        return false;
+    }
+    scrollToSelected() {
+        this.scrollColumnToValue(this.hoursColumn, this.selectedHours());
+        this.scrollColumnToValue(this.minutesColumn, this.selectedMinutes());
+        if (this.showSeconds && this.secondsColumn) {
+            this.scrollColumnToValue(this.secondsColumn, this.selectedSeconds());
+        }
+    }
+    scrollColumnToValue(column, value) {
+        if (!column)
+            return;
+        const element = column.nativeElement;
+        const options = element.querySelectorAll('.ds-time-picker-panel__option');
+        const selectedOption = Array.from(options).find((option) => option.textContent?.trim() === value.toString().padStart(2, '0'));
+        if (selectedOption) {
+            const optionElement = selectedOption;
+            element.scrollTop = optionElement.offsetTop - element.offsetHeight / 2 + optionElement.offsetHeight / 2;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsTimePickerPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DsTimePickerPanelComponent, isStandalone: true, selector: "ds-time-picker-panel", outputs: { timeSelected: "timeSelected" }, viewQueries: [{ propertyName: "hoursColumn", first: true, predicate: ["hoursColumn"], descendants: true }, { propertyName: "minutesColumn", first: true, predicate: ["minutesColumn"], descendants: true }, { propertyName: "secondsColumn", first: true, predicate: ["secondsColumn"], descendants: true }], ngImport: i0, template: `
+    <div class="ds-time-picker-panel" role="dialog" aria-label="Time picker">
+      <div class="ds-time-picker-panel__columns">
+        <!-- Hours column -->
+        <div class="ds-time-picker-panel__column" role="listbox" aria-label="Hours">
+          <div
+            #hoursColumn
+            class="ds-time-picker-panel__column-scroll"
+            (scroll)="onScroll('hours', $event)">
+            @for (hour of hoursOptions(); track hour.value) {
+              <button
+                type="button"
+                class="ds-time-picker-panel__option"
+                [class.ds-time-picker-panel__option--selected]="hour.value === selectedHours()"
+                [class.ds-time-picker-panel__option--disabled]="hour.disabled"
+                [disabled]="hour.disabled"
+                [attr.role]="'option'"
+                [attr.aria-selected]="hour.value === selectedHours()"
+                (click)="selectHours(hour.value)">
+                {{ hour.label }}
+              </button>
+            }
+          </div>
+        </div>
+
+        <!-- Minutes column -->
+        <div class="ds-time-picker-panel__column" role="listbox" aria-label="Minutes">
+          <div
+            #minutesColumn
+            class="ds-time-picker-panel__column-scroll"
+            (scroll)="onScroll('minutes', $event)">
+            @for (minute of minutesOptions(); track minute.value) {
+              <button
+                type="button"
+                class="ds-time-picker-panel__option"
+                [class.ds-time-picker-panel__option--selected]="minute.value === selectedMinutes()"
+                [class.ds-time-picker-panel__option--disabled]="minute.disabled"
+                [disabled]="minute.disabled"
+                [attr.role]="'option'"
+                [attr.aria-selected]="minute.value === selectedMinutes()"
+                (click)="selectMinutes(minute.value)">
+                {{ minute.label }}
+              </button>
+            }
+          </div>
+        </div>
+
+        <!-- Seconds column (conditional) -->
+        @if (showSeconds) {
+          <div class="ds-time-picker-panel__column" role="listbox" aria-label="Seconds">
+            <div
+              #secondsColumn
+              class="ds-time-picker-panel__column-scroll"
+              (scroll)="onScroll('seconds', $event)">
+              @for (second of secondsOptions(); track second.value) {
+                <button
+                  type="button"
+                  class="ds-time-picker-panel__option"
+                  [class.ds-time-picker-panel__option--selected]="second.value === selectedSeconds()"
+                  [class.ds-time-picker-panel__option--disabled]="second.disabled"
+                  [disabled]="second.disabled"
+                  [attr.role]="'option'"
+                  [attr.aria-selected]="second.value === selectedSeconds()"
+                  (click)="selectSeconds(second.value)">
+                  {{ second.label }}
+                </button>
+              }
+            </div>
+          </div>
+        }
+
+        <!-- AM/PM column (12h format) -->
+        @if (format === '12h') {
+          <div class="ds-time-picker-panel__column ds-time-picker-panel__column--period" role="listbox" aria-label="Period">
+            <div class="ds-time-picker-panel__column-scroll">
+              <button
+                type="button"
+                class="ds-time-picker-panel__option"
+                [class.ds-time-picker-panel__option--selected]="selectedPeriod() === 'AM'"
+                [attr.role]="'option'"
+                [attr.aria-selected]="selectedPeriod() === 'AM'"
+                (click)="selectPeriod('AM')">
+                AM
+              </button>
+              <button
+                type="button"
+                class="ds-time-picker-panel__option"
+                [class.ds-time-picker-panel__option--selected]="selectedPeriod() === 'PM'"
+                [attr.role]="'option'"
+                [attr.aria-selected]="selectedPeriod() === 'PM'"
+                (click)="selectPeriod('PM')">
+                PM
+              </button>
+            </div>
+          </div>
+        }
+      </div>
+    </div>
+  `, isInline: true, styles: [".ds-time-picker-panel{background-color:var(--time-picker-panel-bg, var(--white));border:1px solid var(--time-picker-panel-border, var(--gray-300));border-radius:var(--radius-2);box-shadow:var(--shadow-lg);padding:var(--space-2);min-width:200px}.ds-time-picker-panel__columns{display:flex;gap:var(--space-2)}.ds-time-picker-panel__column{display:flex;flex-direction:column;flex:1;min-width:60px}.ds-time-picker-panel__column--period{min-width:50px}.ds-time-picker-panel__column-scroll{max-height:200px;overflow-y:auto;border:1px solid var(--time-picker-column-border, var(--gray-200));border-radius:var(--radius-1);background-color:var(--time-picker-column-bg, var(--white))}.ds-time-picker-panel__column-scroll::-webkit-scrollbar{width:6px}.ds-time-picker-panel__column-scroll::-webkit-scrollbar-track{background:var(--gray-100);border-radius:var(--radius-1)}.ds-time-picker-panel__column-scroll::-webkit-scrollbar-thumb{background:var(--gray-400);border-radius:var(--radius-1)}.ds-time-picker-panel__column-scroll::-webkit-scrollbar-thumb:hover{background:var(--gray-500)}.ds-time-picker-panel__option{display:flex;align-items:center;justify-content:center;padding:var(--space-2);background:transparent;border:none;cursor:pointer;font-size:var(--font-size-sm);color:var(--time-picker-option-text, var(--gray-900));transition:all .15s ease;outline:none}.ds-time-picker-panel__option:hover:not(.ds-time-picker-panel__option--disabled){background-color:var(--time-picker-option-hover, var(--gray-100))}.ds-time-picker-panel__option:focus-visible{background-color:var(--time-picker-option-focus, var(--gray-100));box-shadow:inset 0 0 0 2px var(--color-primary)}.ds-time-picker-panel__option--selected{background-color:var(--time-picker-option-selected-bg, var(--color-primary));color:var(--time-picker-option-selected-text, var(--white));font-weight:600}.ds-time-picker-panel__option--selected:hover{background-color:var(--time-picker-option-selected-hover, var(--primary-dark))}.ds-time-picker-panel__option--disabled{opacity:.4;cursor:not-allowed;pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsTimePickerPanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-time-picker-panel', standalone: true, imports: [CommonModule], template: `
+    <div class="ds-time-picker-panel" role="dialog" aria-label="Time picker">
+      <div class="ds-time-picker-panel__columns">
+        <!-- Hours column -->
+        <div class="ds-time-picker-panel__column" role="listbox" aria-label="Hours">
+          <div
+            #hoursColumn
+            class="ds-time-picker-panel__column-scroll"
+            (scroll)="onScroll('hours', $event)">
+            @for (hour of hoursOptions(); track hour.value) {
+              <button
+                type="button"
+                class="ds-time-picker-panel__option"
+                [class.ds-time-picker-panel__option--selected]="hour.value === selectedHours()"
+                [class.ds-time-picker-panel__option--disabled]="hour.disabled"
+                [disabled]="hour.disabled"
+                [attr.role]="'option'"
+                [attr.aria-selected]="hour.value === selectedHours()"
+                (click)="selectHours(hour.value)">
+                {{ hour.label }}
+              </button>
+            }
+          </div>
+        </div>
+
+        <!-- Minutes column -->
+        <div class="ds-time-picker-panel__column" role="listbox" aria-label="Minutes">
+          <div
+            #minutesColumn
+            class="ds-time-picker-panel__column-scroll"
+            (scroll)="onScroll('minutes', $event)">
+            @for (minute of minutesOptions(); track minute.value) {
+              <button
+                type="button"
+                class="ds-time-picker-panel__option"
+                [class.ds-time-picker-panel__option--selected]="minute.value === selectedMinutes()"
+                [class.ds-time-picker-panel__option--disabled]="minute.disabled"
+                [disabled]="minute.disabled"
+                [attr.role]="'option'"
+                [attr.aria-selected]="minute.value === selectedMinutes()"
+                (click)="selectMinutes(minute.value)">
+                {{ minute.label }}
+              </button>
+            }
+          </div>
+        </div>
+
+        <!-- Seconds column (conditional) -->
+        @if (showSeconds) {
+          <div class="ds-time-picker-panel__column" role="listbox" aria-label="Seconds">
+            <div
+              #secondsColumn
+              class="ds-time-picker-panel__column-scroll"
+              (scroll)="onScroll('seconds', $event)">
+              @for (second of secondsOptions(); track second.value) {
+                <button
+                  type="button"
+                  class="ds-time-picker-panel__option"
+                  [class.ds-time-picker-panel__option--selected]="second.value === selectedSeconds()"
+                  [class.ds-time-picker-panel__option--disabled]="second.disabled"
+                  [disabled]="second.disabled"
+                  [attr.role]="'option'"
+                  [attr.aria-selected]="second.value === selectedSeconds()"
+                  (click)="selectSeconds(second.value)">
+                  {{ second.label }}
+                </button>
+              }
+            </div>
+          </div>
+        }
+
+        <!-- AM/PM column (12h format) -->
+        @if (format === '12h') {
+          <div class="ds-time-picker-panel__column ds-time-picker-panel__column--period" role="listbox" aria-label="Period">
+            <div class="ds-time-picker-panel__column-scroll">
+              <button
+                type="button"
+                class="ds-time-picker-panel__option"
+                [class.ds-time-picker-panel__option--selected]="selectedPeriod() === 'AM'"
+                [attr.role]="'option'"
+                [attr.aria-selected]="selectedPeriod() === 'AM'"
+                (click)="selectPeriod('AM')">
+                AM
+              </button>
+              <button
+                type="button"
+                class="ds-time-picker-panel__option"
+                [class.ds-time-picker-panel__option--selected]="selectedPeriod() === 'PM'"
+                [attr.role]="'option'"
+                [attr.aria-selected]="selectedPeriod() === 'PM'"
+                (click)="selectPeriod('PM')">
+                PM
+              </button>
+            </div>
+          </div>
+        }
+      </div>
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".ds-time-picker-panel{background-color:var(--time-picker-panel-bg, var(--white));border:1px solid var(--time-picker-panel-border, var(--gray-300));border-radius:var(--radius-2);box-shadow:var(--shadow-lg);padding:var(--space-2);min-width:200px}.ds-time-picker-panel__columns{display:flex;gap:var(--space-2)}.ds-time-picker-panel__column{display:flex;flex-direction:column;flex:1;min-width:60px}.ds-time-picker-panel__column--period{min-width:50px}.ds-time-picker-panel__column-scroll{max-height:200px;overflow-y:auto;border:1px solid var(--time-picker-column-border, var(--gray-200));border-radius:var(--radius-1);background-color:var(--time-picker-column-bg, var(--white))}.ds-time-picker-panel__column-scroll::-webkit-scrollbar{width:6px}.ds-time-picker-panel__column-scroll::-webkit-scrollbar-track{background:var(--gray-100);border-radius:var(--radius-1)}.ds-time-picker-panel__column-scroll::-webkit-scrollbar-thumb{background:var(--gray-400);border-radius:var(--radius-1)}.ds-time-picker-panel__column-scroll::-webkit-scrollbar-thumb:hover{background:var(--gray-500)}.ds-time-picker-panel__option{display:flex;align-items:center;justify-content:center;padding:var(--space-2);background:transparent;border:none;cursor:pointer;font-size:var(--font-size-sm);color:var(--time-picker-option-text, var(--gray-900));transition:all .15s ease;outline:none}.ds-time-picker-panel__option:hover:not(.ds-time-picker-panel__option--disabled){background-color:var(--time-picker-option-hover, var(--gray-100))}.ds-time-picker-panel__option:focus-visible{background-color:var(--time-picker-option-focus, var(--gray-100));box-shadow:inset 0 0 0 2px var(--color-primary)}.ds-time-picker-panel__option--selected{background-color:var(--time-picker-option-selected-bg, var(--color-primary));color:var(--time-picker-option-selected-text, var(--white));font-weight:600}.ds-time-picker-panel__option--selected:hover{background-color:var(--time-picker-option-selected-hover, var(--primary-dark))}.ds-time-picker-panel__option--disabled{opacity:.4;cursor:not-allowed;pointer-events:none}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { hoursColumn: [{
+                type: ViewChild,
+                args: ['hoursColumn']
+            }], minutesColumn: [{
+                type: ViewChild,
+                args: ['minutesColumn']
+            }], secondsColumn: [{
+                type: ViewChild,
+                args: ['secondsColumn']
+            }], timeSelected: [{ type: i0.Output, args: ["timeSelected"] }] } });
+
+/**
+ * DsTimePicker - Composant de sélection d'heure
+ *
+ * @description
+ * Sélecteur d'heure avec dropdown scrollable, support 12h/24h,
+ * et intégration formulaires via ControlValueAccessor.
+ *
+ * @example
+ * ```html
+ * <ds-time-picker
+ *   [format]="'24h'"
+ *   [showSeconds]="true"
+ *   (timeChange)="onTimeChange($event)">
+ * </ds-time-picker>
+ * ```
+ */
+class DsTimePicker {
+    overlay;
+    // Inputs
+    value = input('', ...(ngDevMode ? [{ debugName: "value" }] : []));
+    format = input('24h', ...(ngDevMode ? [{ debugName: "format" }] : []));
+    showSeconds = input(false, ...(ngDevMode ? [{ debugName: "showSeconds" }] : []));
+    minuteStep = input(1, ...(ngDevMode ? [{ debugName: "minuteStep" }] : []));
+    hourStep = input(1, ...(ngDevMode ? [{ debugName: "hourStep" }] : []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
+    placeholder = input('Select time', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    minTime = input(null, ...(ngDevMode ? [{ debugName: "minTime" }] : []));
+    maxTime = input(null, ...(ngDevMode ? [{ debugName: "maxTime" }] : []));
+    // Outputs
+    timeChange = output();
+    // Icons
+    clockIcon = faClock;
+    upIcon = faChevronUp;
+    downIcon = faChevronDown;
+    // State
+    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+    internalValue = signal('', ...(ngDevMode ? [{ debugName: "internalValue" }] : []));
+    isFocused = signal(false, ...(ngDevMode ? [{ debugName: "isFocused" }] : []));
+    // Overlay
+    overlayRef = null;
+    // Computed
+    containerClasses = computed(() => {
+        const classes = ['ds-time-picker'];
+        classes.push(`ds-time-picker--${this.size()}`);
+        if (this.disabled())
+            classes.push('ds-time-picker--disabled');
+        if (this.readonly())
+            classes.push('ds-time-picker--readonly');
+        if (this.isFocused())
+            classes.push('ds-time-picker--focused');
+        if (this.isOpen())
+            classes.push('ds-time-picker--open');
+        return classes.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "containerClasses" }] : []));
+    displayValue = computed(() => {
+        const val = this.internalValue();
+        if (!val)
+            return '';
+        const time = this.parseTime(val);
+        if (!time)
+            return val;
+        return this.formatTimeForDisplay(time);
+    }, ...(ngDevMode ? [{ debugName: "displayValue" }] : []));
+    isDisabled = computed(() => this.disabled() || this.readonly(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
+    // ControlValueAccessor
+    onChange = () => { };
+    onTouched = () => { };
+    constructor(overlay) {
+        this.overlay = overlay;
+        // Sync external value with internal
+        effect(() => {
+            const val = this.value();
+            if (val !== this.internalValue()) {
+                this.internalValue.set(val);
+            }
+        });
+    }
+    writeValue(value) {
+        this.internalValue.set(value || '');
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        // Géré par input disabled
+    }
+    toggle() {
+        if (this.isDisabled())
+            return;
+        if (this.isOpen()) {
+            this.close();
+        }
+        else {
+            this.open();
+        }
+    }
+    open() {
+        if (this.isDisabled() || this.isOpen())
+            return;
+        this.isOpen.set(true);
+        this.createOverlay();
+    }
+    close() {
+        if (!this.isOpen())
+            return;
+        this.isOpen.set(false);
+        this.destroyOverlay();
+        this.onTouched();
+    }
+    onFocus() {
+        if (!this.disabled()) {
+            this.isFocused.set(true);
+        }
+    }
+    onBlur() {
+        this.isFocused.set(false);
+        if (!this.isOpen()) {
+            this.onTouched();
+        }
+    }
+    onTimeSelected(timeString) {
+        this.updateValue(timeString);
+        this.close();
+    }
+    updateValue(value) {
+        this.internalValue.set(value);
+        this.onChange(value);
+        this.timeChange.emit(value);
+    }
+    createOverlay() {
+        if (this.overlayRef)
+            return;
+        const positionStrategy = this.overlay
+            .position()
+            .flexibleConnectedTo(document.querySelector('.ds-time-picker__input'))
+            .withPositions([
+            {
+                originX: 'start',
+                originY: 'bottom',
+                overlayX: 'start',
+                overlayY: 'top',
+                offsetY: 4,
+            },
+            {
+                originX: 'start',
+                originY: 'top',
+                overlayX: 'start',
+                overlayY: 'bottom',
+                offsetY: -4,
+            },
+        ]);
+        this.overlayRef = this.overlay.create({
+            positionStrategy,
+            hasBackdrop: true,
+            backdropClass: 'cdk-overlay-transparent-backdrop',
+            scrollStrategy: this.overlay.scrollStrategies.reposition(),
+        });
+        const portal = new ComponentPortal(DsTimePickerPanelComponent);
+        const componentRef = this.overlayRef.attach(portal);
+        // Pass config to panel
+        componentRef.instance.value = this.internalValue();
+        componentRef.instance.format = this.format();
+        componentRef.instance.showSeconds = this.showSeconds();
+        componentRef.instance.minuteStep = this.minuteStep();
+        componentRef.instance.hourStep = this.hourStep();
+        componentRef.instance.minTime = this.minTime();
+        componentRef.instance.maxTime = this.maxTime();
+        componentRef.instance.timeSelected.subscribe((time) => {
+            this.onTimeSelected(time);
+        });
+        this.overlayRef.backdropClick().subscribe(() => this.close());
+    }
+    destroyOverlay() {
+        if (this.overlayRef) {
+            this.overlayRef.dispose();
+            this.overlayRef = null;
+        }
+    }
+    parseTime(timeString) {
+        if (!timeString)
+            return null;
+        const parts = timeString.split(':');
+        if (parts.length < 2)
+            return null;
+        const hours = parseInt(parts[0], 10);
+        const minutes = parseInt(parts[1], 10);
+        const seconds = parts[2] ? parseInt(parts[2], 10) : undefined;
+        if (isNaN(hours) || isNaN(minutes))
+            return null;
+        if (seconds !== undefined && isNaN(seconds))
+            return null;
+        return { hours, minutes, seconds };
+    }
+    formatTimeForDisplay(time) {
+        const { hours, minutes, seconds } = time;
+        if (this.format() === '12h') {
+            const period = hours >= 12 ? 'PM' : 'AM';
+            const displayHours = hours === 0 ? 12 : hours > 12 ? hours - 12 : hours;
+            const formattedMinutes = minutes.toString().padStart(2, '0');
+            if (this.showSeconds() && seconds !== undefined) {
+                const formattedSeconds = seconds.toString().padStart(2, '0');
+                return `${displayHours}:${formattedMinutes}:${formattedSeconds} ${period}`;
+            }
+            return `${displayHours}:${formattedMinutes} ${period}`;
+        }
+        else {
+            const formattedHours = hours.toString().padStart(2, '0');
+            const formattedMinutes = minutes.toString().padStart(2, '0');
+            if (this.showSeconds() && seconds !== undefined) {
+                const formattedSeconds = seconds.toString().padStart(2, '0');
+                return `${formattedHours}:${formattedMinutes}:${formattedSeconds}`;
+            }
+            return `${formattedHours}:${formattedMinutes}`;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsTimePicker, deps: [{ token: i1$3.Overlay }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DsTimePicker, isStandalone: true, selector: "ds-time-picker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, showSeconds: { classPropertyName: "showSeconds", publicName: "showSeconds", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null }, hourStep: { classPropertyName: "hourStep", publicName: "hourStep", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, minTime: { classPropertyName: "minTime", publicName: "minTime", isSignal: true, isRequired: false, transformFunction: null }, maxTime: { classPropertyName: "maxTime", publicName: "maxTime", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { timeChange: "timeChange" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => DsTimePicker),
+                multi: true,
+            },
+        ], ngImport: i0, template: "<div [class]=\"containerClasses()\">\n  <div class=\"ds-time-picker__wrapper\">\n    <div\n      class=\"ds-time-picker__input\"\n      [class.ds-time-picker__input--disabled]=\"disabled()\"\n      [class.ds-time-picker__input--readonly]=\"readonly()\"\n      [class.ds-time-picker__input--focused]=\"isFocused()\"\n      [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n      [attr.role]=\"'combobox'\"\n      [attr.aria-expanded]=\"isOpen()\"\n      [attr.aria-haspopup]=\"'dialog'\"\n      [attr.aria-label]=\"placeholder()\"\n      (click)=\"toggle()\"\n      (focus)=\"onFocus()\"\n      (blur)=\"onBlur()\"\n      (keydown.enter)=\"toggle()\"\n      (keydown.space)=\"toggle(); $event.preventDefault()\">\n\n      <fa-icon\n        class=\"ds-time-picker__icon\"\n        [icon]=\"clockIcon\"\n        aria-hidden=\"true\">\n      </fa-icon>\n\n      <span class=\"ds-time-picker__display\">\n        @if (displayValue(); as display) {\n          {{ display }}\n        } @else {\n          <span class=\"ds-time-picker__placeholder\">{{ placeholder() }}</span>\n        }\n      </span>\n    </div>\n  </div>\n</div>\n", styles: [".ds-time-picker{display:inline-block;position:relative}.ds-time-picker__wrapper{position:relative}.ds-time-picker__input{display:flex;align-items:center;gap:var(--space-2);padding:0 var(--input-padding-horizontal-md);height:var(--input-height-md);background-color:var(--input-bg, var(--white));border:1px solid var(--input-border-color, var(--gray-300));border-radius:var(--input-border-radius);cursor:pointer;transition:all .2s ease;outline:none}.ds-time-picker__input:hover:not(.ds-time-picker__input--disabled):not(.ds-time-picker__input--readonly){border-color:var(--input-border-hover, var(--gray-400))}.ds-time-picker__input--focused{border-color:var(--input-border-focus, var(--color-primary));box-shadow:var(--input-focus-shadow)}.ds-time-picker__input--disabled{opacity:.5;cursor:not-allowed;background-color:var(--input-bg-disabled, var(--gray-100))}.ds-time-picker__input--readonly{cursor:default;background-color:var(--input-bg-readonly, var(--gray-50))}.ds-time-picker__icon{color:var(--input-text-color, var(--gray-600));font-size:var(--input-icon-md);flex-shrink:0}.ds-time-picker__display{flex:1;color:var(--input-text-color, var(--gray-900));font-size:var(--input-font-size-md);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ds-time-picker__placeholder{color:var(--input-placeholder-color, var(--gray-500))}.ds-time-picker--sm .ds-time-picker__input{height:var(--input-height-sm);padding:0 var(--input-padding-horizontal-sm)}.ds-time-picker--sm .ds-time-picker__display{font-size:var(--input-font-size-sm)}.ds-time-picker--sm .ds-time-picker__icon{font-size:var(--input-icon-sm)}.ds-time-picker--lg .ds-time-picker__input{height:var(--input-height-lg);padding:0 var(--input-padding-horizontal-lg)}.ds-time-picker--lg .ds-time-picker__display{font-size:var(--input-font-size-lg)}.ds-time-picker--lg .ds-time-picker__icon{font-size:var(--input-icon-lg)}.ds-time-picker--disabled{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"] }, { kind: "ngmodule", type: OverlayModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsTimePicker, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-time-picker', standalone: true, imports: [CommonModule, FontAwesomeModule, OverlayModule], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => DsTimePicker),
+                            multi: true,
+                        },
+                    ], template: "<div [class]=\"containerClasses()\">\n  <div class=\"ds-time-picker__wrapper\">\n    <div\n      class=\"ds-time-picker__input\"\n      [class.ds-time-picker__input--disabled]=\"disabled()\"\n      [class.ds-time-picker__input--readonly]=\"readonly()\"\n      [class.ds-time-picker__input--focused]=\"isFocused()\"\n      [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n      [attr.role]=\"'combobox'\"\n      [attr.aria-expanded]=\"isOpen()\"\n      [attr.aria-haspopup]=\"'dialog'\"\n      [attr.aria-label]=\"placeholder()\"\n      (click)=\"toggle()\"\n      (focus)=\"onFocus()\"\n      (blur)=\"onBlur()\"\n      (keydown.enter)=\"toggle()\"\n      (keydown.space)=\"toggle(); $event.preventDefault()\">\n\n      <fa-icon\n        class=\"ds-time-picker__icon\"\n        [icon]=\"clockIcon\"\n        aria-hidden=\"true\">\n      </fa-icon>\n\n      <span class=\"ds-time-picker__display\">\n        @if (displayValue(); as display) {\n          {{ display }}\n        } @else {\n          <span class=\"ds-time-picker__placeholder\">{{ placeholder() }}</span>\n        }\n      </span>\n    </div>\n  </div>\n</div>\n", styles: [".ds-time-picker{display:inline-block;position:relative}.ds-time-picker__wrapper{position:relative}.ds-time-picker__input{display:flex;align-items:center;gap:var(--space-2);padding:0 var(--input-padding-horizontal-md);height:var(--input-height-md);background-color:var(--input-bg, var(--white));border:1px solid var(--input-border-color, var(--gray-300));border-radius:var(--input-border-radius);cursor:pointer;transition:all .2s ease;outline:none}.ds-time-picker__input:hover:not(.ds-time-picker__input--disabled):not(.ds-time-picker__input--readonly){border-color:var(--input-border-hover, var(--gray-400))}.ds-time-picker__input--focused{border-color:var(--input-border-focus, var(--color-primary));box-shadow:var(--input-focus-shadow)}.ds-time-picker__input--disabled{opacity:.5;cursor:not-allowed;background-color:var(--input-bg-disabled, var(--gray-100))}.ds-time-picker__input--readonly{cursor:default;background-color:var(--input-bg-readonly, var(--gray-50))}.ds-time-picker__icon{color:var(--input-text-color, var(--gray-600));font-size:var(--input-icon-md);flex-shrink:0}.ds-time-picker__display{flex:1;color:var(--input-text-color, var(--gray-900));font-size:var(--input-font-size-md);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ds-time-picker__placeholder{color:var(--input-placeholder-color, var(--gray-500))}.ds-time-picker--sm .ds-time-picker__input{height:var(--input-height-sm);padding:0 var(--input-padding-horizontal-sm)}.ds-time-picker--sm .ds-time-picker__display{font-size:var(--input-font-size-sm)}.ds-time-picker--sm .ds-time-picker__icon{font-size:var(--input-icon-sm)}.ds-time-picker--lg .ds-time-picker__input{height:var(--input-height-lg);padding:0 var(--input-padding-horizontal-lg)}.ds-time-picker--lg .ds-time-picker__display{font-size:var(--input-font-size-lg)}.ds-time-picker--lg .ds-time-picker__icon{font-size:var(--input-icon-lg)}.ds-time-picker--disabled{pointer-events:none}\n"] }]
+        }], ctorParameters: () => [{ type: i1$3.Overlay }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], showSeconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSeconds", required: false }] }], minuteStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteStep", required: false }] }], hourStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "hourStep", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], minTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "minTime", required: false }] }], maxTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxTime", required: false }] }], timeChange: [{ type: i0.Output, args: ["timeChange"] }] } });
+
+class DsTreeNodeComponent {
+    // Inputs
+    node = input.required(...(ngDevMode ? [{ debugName: "node" }] : []));
+    level = input(0, ...(ngDevMode ? [{ debugName: "level" }] : []));
+    selectable = input(true, ...(ngDevMode ? [{ debugName: "selectable" }] : []));
+    checkable = input(false, ...(ngDevMode ? [{ debugName: "checkable" }] : []));
+    showIcon = input(true, ...(ngDevMode ? [{ debugName: "showIcon" }] : []));
+    selectedNodeId = input(null, ...(ngDevMode ? [{ debugName: "selectedNodeId" }] : []));
+    expandedNodeIds = input(new Set(), ...(ngDevMode ? [{ debugName: "expandedNodeIds" }] : []));
+    checkedNodeIds = input(new Set(), ...(ngDevMode ? [{ debugName: "checkedNodeIds" }] : []));
+    getIndeterminateState = input(null, ...(ngDevMode ? [{ debugName: "getIndeterminateState" }] : []));
+    // Outputs
+    nodeClick = output();
+    nodeToggle = output();
+    nodeCheck = output();
+    // Icons
+    collapsedIcon = faChevronRight;
+    expandedIcon = faChevronDown;
+    folderIcon = faFolder;
+    folderOpenIcon = faFolderOpen;
+    fileIcon = faFile;
+    // Computed
+    hasChildren = computed(() => {
+        const children = this.node().children;
+        return !!children && children.length > 0;
+    }, ...(ngDevMode ? [{ debugName: "hasChildren" }] : []));
+    isExpanded = computed(() => {
+        return this.expandedNodeIds().has(this.node().id);
+    }, ...(ngDevMode ? [{ debugName: "isExpanded" }] : []));
+    isSelected = computed(() => {
+        return this.selectedNodeId() === this.node().id;
+    }, ...(ngDevMode ? [{ debugName: "isSelected" }] : []));
+    isChecked = computed(() => {
+        return this.checkedNodeIds().has(this.node().id);
+    }, ...(ngDevMode ? [{ debugName: "isChecked" }] : []));
+    isIndeterminate = computed(() => {
+        const fn = this.getIndeterminateState();
+        return fn ? fn(this.node()) : false;
+    }, ...(ngDevMode ? [{ debugName: "isIndeterminate" }] : []));
+    nodeIcon = computed(() => {
+        const node = this.node();
+        // Custom icon
+        if (node.icon) {
+            // TODO: support custom icons
+            return this.fileIcon;
+        }
+        // Default folder/file icons
+        if (this.hasChildren()) {
+            return this.isExpanded() ? this.folderOpenIcon : this.folderIcon;
+        }
+        return this.fileIcon;
+    }, ...(ngDevMode ? [{ debugName: "nodeIcon" }] : []));
+    handleClick(event) {
+        event.stopPropagation();
+        if (!this.node().disabled && this.selectable()) {
+            this.nodeClick.emit(this.node());
+        }
+    }
+    handleToggle(event) {
+        event.stopPropagation();
+        if (!this.node().disabled) {
+            this.nodeToggle.emit(this.node());
+        }
+    }
+    handleCheck(event) {
+        event.stopPropagation();
+        const checkbox = event.target;
+        if (!this.node().disabled) {
+            this.nodeCheck.emit({ node: this.node(), checked: checkbox.checked });
+        }
+    }
+    handleArrowRight(event) {
+        event.preventDefault();
+        if (this.hasChildren() && !this.isExpanded()) {
+            this.handleToggle(event);
+        }
+    }
+    handleArrowLeft(event) {
+        event.preventDefault();
+        if (this.hasChildren() && this.isExpanded()) {
+            this.handleToggle(event);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsTreeNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DsTreeNodeComponent, isStandalone: true, selector: "ds-tree-node", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null }, level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, checkable: { classPropertyName: "checkable", publicName: "checkable", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, selectedNodeId: { classPropertyName: "selectedNodeId", publicName: "selectedNodeId", isSignal: true, isRequired: false, transformFunction: null }, expandedNodeIds: { classPropertyName: "expandedNodeIds", publicName: "expandedNodeIds", isSignal: true, isRequired: false, transformFunction: null }, checkedNodeIds: { classPropertyName: "checkedNodeIds", publicName: "checkedNodeIds", isSignal: true, isRequired: false, transformFunction: null }, getIndeterminateState: { classPropertyName: "getIndeterminateState", publicName: "getIndeterminateState", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { nodeClick: "nodeClick", nodeToggle: "nodeToggle", nodeCheck: "nodeCheck" }, ngImport: i0, template: `
+    <div
+      class="ds-tree-node"
+      [class.ds-tree-node--selected]="isSelected()"
+      [class.ds-tree-node--disabled]="node().disabled"
+      [attr.role]="'treeitem'"
+      [attr.aria-selected]="isSelected()"
+      [attr.aria-expanded]="hasChildren() ? isExpanded() : null"
+      [attr.aria-disabled]="node().disabled"
+      [attr.tabindex]="node().disabled ? -1 : 0"
+      (click)="handleClick($event)"
+      (keydown.enter)="handleClick($event)"
+      (keydown.space)="handleClick($event); $event.preventDefault()"
+      (keydown.arrowRight)="handleArrowRight($event)"
+      (keydown.arrowLeft)="handleArrowLeft($event)">
+
+      <div class="ds-tree-node__content" [style.padding-left.px]="level() * 20">
+        <!-- Expand/collapse toggle -->
+        @if (hasChildren()) {
+          <button
+            type="button"
+            class="ds-tree-node__toggle"
+            [attr.aria-label]="isExpanded() ? 'Collapse' : 'Expand'"
+            (click)="handleToggle($event)">
+            <fa-icon
+              [icon]="isExpanded() ? expandedIcon : collapsedIcon"
+              aria-hidden="true">
+            </fa-icon>
+          </button>
+        } @else {
+          <span class="ds-tree-node__toggle-placeholder"></span>
+        }
+
+        <!-- Checkbox (if checkable) -->
+        @if (checkable()) {
+          <input
+            type="checkbox"
+            class="ds-tree-node__checkbox"
+            [checked]="isChecked()"
+            [indeterminate]="isIndeterminate()"
+            [disabled]="node().disabled"
+            (change)="handleCheck($event)"
+            (click)="$event.stopPropagation()">
+        }
+
+        <!-- Icon -->
+        @if (showIcon()) {
+          <fa-icon
+            class="ds-tree-node__icon"
+            [icon]="nodeIcon()"
+            aria-hidden="true">
+          </fa-icon>
+        }
+
+        <!-- Label -->
+        <span class="ds-tree-node__label">{{ node().label }}</span>
+      </div>
+    </div>
+
+    <!-- Children (recursive) -->
+    @if (hasChildren() && isExpanded()) {
+      <div class="ds-tree-node__children" role="group">
+        @for (child of node().children; track child.id) {
+          <ds-tree-node
+            [node]="child"
+            [level]="level() + 1"
+            [selectable]="selectable()"
+            [checkable]="checkable()"
+            [showIcon]="showIcon()"
+            [selectedNodeId]="selectedNodeId()"
+            [expandedNodeIds]="expandedNodeIds()"
+            [checkedNodeIds]="checkedNodeIds()"
+            [getIndeterminateState]="getIndeterminateState()"
+            (nodeClick)="nodeClick.emit($event)"
+            (nodeToggle)="nodeToggle.emit($event)"
+            (nodeCheck)="nodeCheck.emit($event)">
+          </ds-tree-node>
+        }
+      </div>
+    }
+  `, isInline: true, styles: [".ds-tree-node{display:block;cursor:pointer;outline:none}.ds-tree-node__content{display:flex;align-items:center;gap:var(--space-2);padding:var(--tree-node-padding, var(--space-1, .25rem) var(--space-2, .5rem));border-radius:var(--radius-1);transition:background-color .15s ease;-webkit-user-select:none;user-select:none}.ds-tree-node__content:hover:not(.ds-tree-node--disabled .ds-tree-node__content){background-color:var(--tree-node-hover-bg, var(--gray-100))}.ds-tree-node:focus-visible .ds-tree-node__content{box-shadow:0 0 0 2px var(--color-primary)}.ds-tree-node--selected .ds-tree-node__content{background-color:var(--tree-node-selected-bg, var(--blue-100));color:var(--tree-node-selected-text, var(--color-primary))}.ds-tree-node--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.ds-tree-node__toggle{display:flex;align-items:center;justify-content:center;width:20px;height:20px;background:transparent;border:none;cursor:pointer;padding:0;color:var(--tree-toggle-color, var(--gray-600));transition:transform .2s ease;outline:none}.ds-tree-node__toggle:hover{color:var(--tree-toggle-hover-color, var(--gray-900))}.ds-tree-node__toggle:focus-visible{box-shadow:0 0 0 2px var(--color-primary);border-radius:var(--radius-1)}.ds-tree-node__toggle fa-icon{font-size:12px}.ds-tree-node__toggle-placeholder{display:inline-block;width:20px;height:20px}.ds-tree-node__checkbox{margin:0;cursor:pointer}.ds-tree-node__checkbox:disabled{cursor:not-allowed}.ds-tree-node__icon{color:var(--tree-icon-color, var(--gray-600));font-size:var(--tree-icon-size, 16px);flex-shrink:0}.ds-tree-node__label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:var(--tree-label-font-size, var(--font-size-base))}.ds-tree-node__children{margin-left:0}\n"], dependencies: [{ kind: "component", type: DsTreeNodeComponent, selector: "ds-tree-node", inputs: ["node", "level", "selectable", "checkable", "showIcon", "selectedNodeId", "expandedNodeIds", "checkedNodeIds", "getIndeterminateState"], outputs: ["nodeClick", "nodeToggle", "nodeCheck"] }, { 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: DsTreeNodeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-tree-node', standalone: true, imports: [CommonModule, FontAwesomeModule, DsTreeNodeComponent], template: `
+    <div
+      class="ds-tree-node"
+      [class.ds-tree-node--selected]="isSelected()"
+      [class.ds-tree-node--disabled]="node().disabled"
+      [attr.role]="'treeitem'"
+      [attr.aria-selected]="isSelected()"
+      [attr.aria-expanded]="hasChildren() ? isExpanded() : null"
+      [attr.aria-disabled]="node().disabled"
+      [attr.tabindex]="node().disabled ? -1 : 0"
+      (click)="handleClick($event)"
+      (keydown.enter)="handleClick($event)"
+      (keydown.space)="handleClick($event); $event.preventDefault()"
+      (keydown.arrowRight)="handleArrowRight($event)"
+      (keydown.arrowLeft)="handleArrowLeft($event)">
+
+      <div class="ds-tree-node__content" [style.padding-left.px]="level() * 20">
+        <!-- Expand/collapse toggle -->
+        @if (hasChildren()) {
+          <button
+            type="button"
+            class="ds-tree-node__toggle"
+            [attr.aria-label]="isExpanded() ? 'Collapse' : 'Expand'"
+            (click)="handleToggle($event)">
+            <fa-icon
+              [icon]="isExpanded() ? expandedIcon : collapsedIcon"
+              aria-hidden="true">
+            </fa-icon>
+          </button>
+        } @else {
+          <span class="ds-tree-node__toggle-placeholder"></span>
+        }
+
+        <!-- Checkbox (if checkable) -->
+        @if (checkable()) {
+          <input
+            type="checkbox"
+            class="ds-tree-node__checkbox"
+            [checked]="isChecked()"
+            [indeterminate]="isIndeterminate()"
+            [disabled]="node().disabled"
+            (change)="handleCheck($event)"
+            (click)="$event.stopPropagation()">
+        }
+
+        <!-- Icon -->
+        @if (showIcon()) {
+          <fa-icon
+            class="ds-tree-node__icon"
+            [icon]="nodeIcon()"
+            aria-hidden="true">
+          </fa-icon>
+        }
+
+        <!-- Label -->
+        <span class="ds-tree-node__label">{{ node().label }}</span>
+      </div>
+    </div>
+
+    <!-- Children (recursive) -->
+    @if (hasChildren() && isExpanded()) {
+      <div class="ds-tree-node__children" role="group">
+        @for (child of node().children; track child.id) {
+          <ds-tree-node
+            [node]="child"
+            [level]="level() + 1"
+            [selectable]="selectable()"
+            [checkable]="checkable()"
+            [showIcon]="showIcon()"
+            [selectedNodeId]="selectedNodeId()"
+            [expandedNodeIds]="expandedNodeIds()"
+            [checkedNodeIds]="checkedNodeIds()"
+            [getIndeterminateState]="getIndeterminateState()"
+            (nodeClick)="nodeClick.emit($event)"
+            (nodeToggle)="nodeToggle.emit($event)"
+            (nodeCheck)="nodeCheck.emit($event)">
+          </ds-tree-node>
+        }
+      </div>
+    }
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".ds-tree-node{display:block;cursor:pointer;outline:none}.ds-tree-node__content{display:flex;align-items:center;gap:var(--space-2);padding:var(--tree-node-padding, var(--space-1, .25rem) var(--space-2, .5rem));border-radius:var(--radius-1);transition:background-color .15s ease;-webkit-user-select:none;user-select:none}.ds-tree-node__content:hover:not(.ds-tree-node--disabled .ds-tree-node__content){background-color:var(--tree-node-hover-bg, var(--gray-100))}.ds-tree-node:focus-visible .ds-tree-node__content{box-shadow:0 0 0 2px var(--color-primary)}.ds-tree-node--selected .ds-tree-node__content{background-color:var(--tree-node-selected-bg, var(--blue-100));color:var(--tree-node-selected-text, var(--color-primary))}.ds-tree-node--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.ds-tree-node__toggle{display:flex;align-items:center;justify-content:center;width:20px;height:20px;background:transparent;border:none;cursor:pointer;padding:0;color:var(--tree-toggle-color, var(--gray-600));transition:transform .2s ease;outline:none}.ds-tree-node__toggle:hover{color:var(--tree-toggle-hover-color, var(--gray-900))}.ds-tree-node__toggle:focus-visible{box-shadow:0 0 0 2px var(--color-primary);border-radius:var(--radius-1)}.ds-tree-node__toggle fa-icon{font-size:12px}.ds-tree-node__toggle-placeholder{display:inline-block;width:20px;height:20px}.ds-tree-node__checkbox{margin:0;cursor:pointer}.ds-tree-node__checkbox:disabled{cursor:not-allowed}.ds-tree-node__icon{color:var(--tree-icon-color, var(--gray-600));font-size:var(--tree-icon-size, 16px);flex-shrink:0}.ds-tree-node__label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:var(--tree-label-font-size, var(--font-size-base))}.ds-tree-node__children{margin-left:0}\n"] }]
+        }], propDecorators: { node: [{ type: i0.Input, args: [{ isSignal: true, alias: "node", required: true }] }], level: [{ type: i0.Input, args: [{ isSignal: true, alias: "level", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], checkable: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkable", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], selectedNodeId: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedNodeId", required: false }] }], expandedNodeIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedNodeIds", required: false }] }], checkedNodeIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkedNodeIds", required: false }] }], getIndeterminateState: [{ type: i0.Input, args: [{ isSignal: true, alias: "getIndeterminateState", required: false }] }], nodeClick: [{ type: i0.Output, args: ["nodeClick"] }], nodeToggle: [{ type: i0.Output, args: ["nodeToggle"] }], nodeCheck: [{ type: i0.Output, args: ["nodeCheck"] }] } });
+
+/**
+ * DsTree - Composant d'affichage hiérarchique
+ *
+ * @description
+ * Arbre hiérarchique avec support de sélection, checkbox,
+ * expand/collapse, et navigation clavier.
+ *
+ * @example
+ * ```html
+ * <ds-tree
+ *   [data]="treeData"
+ *   [selectable]="true"
+ *   (nodeSelect)="onNodeSelect($event)">
+ * </ds-tree>
+ * ```
+ */
+class DsTree {
+    // Inputs
+    data = input([], ...(ngDevMode ? [{ debugName: "data" }] : []));
+    selectable = input(true, ...(ngDevMode ? [{ debugName: "selectable" }] : []));
+    checkable = input(false, ...(ngDevMode ? [{ debugName: "checkable" }] : []));
+    expandAll = input(false, ...(ngDevMode ? [{ debugName: "expandAll" }] : []));
+    showIcon = input(true, ...(ngDevMode ? [{ debugName: "showIcon" }] : []));
+    showLine = input(false, ...(ngDevMode ? [{ debugName: "showLine" }] : []));
+    draggable = input(false, ...(ngDevMode ? [{ debugName: "draggable" }] : []));
+    virtualScroll = input(false, ...(ngDevMode ? [{ debugName: "virtualScroll" }] : []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    loadChildren = input(null, ...(ngDevMode ? [{ debugName: "loadChildren" }] : []));
+    // Outputs
+    nodeSelect = output();
+    nodeExpand = output();
+    nodeCheck = output();
+    // State
+    selectedNodeId = signal(null, ...(ngDevMode ? [{ debugName: "selectedNodeId" }] : []));
+    expandedNodeIds = signal(new Set(), ...(ngDevMode ? [{ debugName: "expandedNodeIds" }] : []));
+    checkedNodeIds = signal(new Set(), ...(ngDevMode ? [{ debugName: "checkedNodeIds" }] : []));
+    // Computed
+    containerClasses = computed(() => {
+        const classes = ['ds-tree'];
+        classes.push(`ds-tree--${this.size()}`);
+        if (this.showLine())
+            classes.push('ds-tree--with-lines');
+        if (this.checkable())
+            classes.push('ds-tree--checkable');
+        return classes.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "containerClasses" }] : []));
+    processedData = computed(() => {
+        const data = this.data();
+        if (this.expandAll()) {
+            this.expandAllNodes(data);
+        }
+        return data;
+    }, ...(ngDevMode ? [{ debugName: "processedData" }] : []));
+    constructor() {
+        // Initialize expanded state from data
+        this.initializeExpandedState();
+    }
+    onNodeClick(node) {
+        if (node.disabled || !this.selectable())
+            return;
+        this.selectedNodeId.set(node.id);
+        this.nodeSelect.emit({ node, selected: true });
+    }
+    onNodeToggle(node) {
+        if (node.disabled)
+            return;
+        const expanded = !this.isExpanded(node.id);
+        this.toggleExpand(node.id, expanded);
+        this.nodeExpand.emit({ node, expanded });
+        // Load children if lazy loading
+        if (expanded && this.loadChildren()) {
+            const loader = this.loadChildren();
+            if (loader) {
+                loader(node).then((children) => {
+                    node.children = children;
+                });
+            }
+        }
+    }
+    onNodeCheck(node, checked) {
+        if (node.disabled)
+            return;
+        this.setNodeChecked(node, checked);
+        this.nodeCheck.emit({ node, checked });
+    }
+    isSelected(nodeId) {
+        return this.selectedNodeId() === nodeId;
+    }
+    isExpanded(nodeId) {
+        return this.expandedNodeIds().has(nodeId);
+    }
+    isChecked(nodeId) {
+        return this.checkedNodeIds().has(nodeId);
+    }
+    getIndeterminateState(node) {
+        if (!node.children || node.children.length === 0)
+            return false;
+        const checkedChildren = node.children.filter((child) => this.isChecked(child.id));
+        return checkedChildren.length > 0 && checkedChildren.length < node.children.length;
+    }
+    toggleExpand(nodeId, expanded) {
+        const expandedIds = new Set(this.expandedNodeIds());
+        if (expanded) {
+            expandedIds.add(nodeId);
+        }
+        else {
+            expandedIds.delete(nodeId);
+        }
+        this.expandedNodeIds.set(expandedIds);
+    }
+    setNodeChecked(node, checked) {
+        const checkedIds = new Set(this.checkedNodeIds());
+        // Update current node
+        if (checked) {
+            checkedIds.add(node.id);
+        }
+        else {
+            checkedIds.delete(node.id);
+        }
+        // Update all children recursively
+        if (node.children) {
+            this.updateChildrenChecked(node.children, checked, checkedIds);
+        }
+        this.checkedNodeIds.set(checkedIds);
+    }
+    updateChildrenChecked(children, checked, checkedIds) {
+        children.forEach((child) => {
+            if (!child.disabled) {
+                if (checked) {
+                    checkedIds.add(child.id);
+                }
+                else {
+                    checkedIds.delete(child.id);
+                }
+                if (child.children) {
+                    this.updateChildrenChecked(child.children, checked, checkedIds);
+                }
+            }
+        });
+    }
+    expandAllNodes(nodes) {
+        const expandedIds = new Set(this.expandedNodeIds());
+        const expand = (items) => {
+            items.forEach((item) => {
+                if (item.children && item.children.length > 0) {
+                    expandedIds.add(item.id);
+                    expand(item.children);
+                }
+            });
+        };
+        expand(nodes);
+        this.expandedNodeIds.set(expandedIds);
+    }
+    initializeExpandedState() {
+        const data = this.data();
+        const expandedIds = new Set();
+        const findExpanded = (nodes) => {
+            nodes.forEach((node) => {
+                if (node.expanded) {
+                    expandedIds.add(node.id);
+                }
+                if (node.children) {
+                    findExpanded(node.children);
+                }
+            });
+        };
+        findExpanded(data);
+        this.expandedNodeIds.set(expandedIds);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsTree, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DsTree, isStandalone: true, selector: "ds-tree", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, checkable: { classPropertyName: "checkable", publicName: "checkable", isSignal: true, isRequired: false, transformFunction: null }, expandAll: { classPropertyName: "expandAll", publicName: "expandAll", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, showLine: { classPropertyName: "showLine", publicName: "showLine", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, loadChildren: { classPropertyName: "loadChildren", publicName: "loadChildren", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { nodeSelect: "nodeSelect", nodeExpand: "nodeExpand", nodeCheck: "nodeCheck" }, ngImport: i0, template: "<div [class]=\"containerClasses()\" role=\"tree\">\n  @if (processedData().length === 0) {\n    <div class=\"ds-tree__empty\">\n      <p>No data available</p>\n    </div>\n  } @else {\n    @for (node of processedData(); track node.id) {\n      <ds-tree-node\n        [node]=\"node\"\n        [level]=\"0\"\n        [selectable]=\"selectable()\"\n        [checkable]=\"checkable()\"\n        [showIcon]=\"showIcon()\"\n        [selectedNodeId]=\"selectedNodeId()\"\n        [expandedNodeIds]=\"expandedNodeIds()\"\n        [checkedNodeIds]=\"checkedNodeIds()\"\n        [getIndeterminateState]=\"getIndeterminateState.bind(this)\"\n        (nodeClick)=\"onNodeClick($event)\"\n        (nodeToggle)=\"onNodeToggle($event)\"\n        (nodeCheck)=\"onNodeCheck($event.node, $event.checked)\">\n      </ds-tree-node>\n    }\n  }\n</div>\n", styles: [".ds-tree{display:block;width:100%;background-color:var(--tree-bg, var(--white));border:1px solid var(--tree-border, var(--gray-300));border-radius:var(--radius-2);padding:var(--space-2);max-height:400px;overflow-y:auto}.ds-tree__empty{display:flex;align-items:center;justify-content:center;padding:var(--space-8);color:var(--text-muted, var(--gray-500));font-size:var(--font-size-sm)}.ds-tree--sm{font-size:var(--font-size-sm);padding:var(--space-1)}.ds-tree--lg{font-size:var(--font-size-lg);padding:var(--space-3)}.ds-tree::-webkit-scrollbar{width:8px}.ds-tree::-webkit-scrollbar-track{background:var(--gray-100);border-radius:var(--radius-1)}.ds-tree::-webkit-scrollbar-thumb{background:var(--gray-400);border-radius:var(--radius-1)}.ds-tree::-webkit-scrollbar-thumb:hover{background:var(--gray-500)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DsTreeNodeComponent, selector: "ds-tree-node", inputs: ["node", "level", "selectable", "checkable", "showIcon", "selectedNodeId", "expandedNodeIds", "checkedNodeIds", "getIndeterminateState"], outputs: ["nodeClick", "nodeToggle", "nodeCheck"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsTree, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-tree', standalone: true, imports: [CommonModule, DsTreeNodeComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"containerClasses()\" role=\"tree\">\n  @if (processedData().length === 0) {\n    <div class=\"ds-tree__empty\">\n      <p>No data available</p>\n    </div>\n  } @else {\n    @for (node of processedData(); track node.id) {\n      <ds-tree-node\n        [node]=\"node\"\n        [level]=\"0\"\n        [selectable]=\"selectable()\"\n        [checkable]=\"checkable()\"\n        [showIcon]=\"showIcon()\"\n        [selectedNodeId]=\"selectedNodeId()\"\n        [expandedNodeIds]=\"expandedNodeIds()\"\n        [checkedNodeIds]=\"checkedNodeIds()\"\n        [getIndeterminateState]=\"getIndeterminateState.bind(this)\"\n        (nodeClick)=\"onNodeClick($event)\"\n        (nodeToggle)=\"onNodeToggle($event)\"\n        (nodeCheck)=\"onNodeCheck($event.node, $event.checked)\">\n      </ds-tree-node>\n    }\n  }\n</div>\n", styles: [".ds-tree{display:block;width:100%;background-color:var(--tree-bg, var(--white));border:1px solid var(--tree-border, var(--gray-300));border-radius:var(--radius-2);padding:var(--space-2);max-height:400px;overflow-y:auto}.ds-tree__empty{display:flex;align-items:center;justify-content:center;padding:var(--space-8);color:var(--text-muted, var(--gray-500));font-size:var(--font-size-sm)}.ds-tree--sm{font-size:var(--font-size-sm);padding:var(--space-1)}.ds-tree--lg{font-size:var(--font-size-lg);padding:var(--space-3)}.ds-tree::-webkit-scrollbar{width:8px}.ds-tree::-webkit-scrollbar-track{background:var(--gray-100);border-radius:var(--radius-1)}.ds-tree::-webkit-scrollbar-thumb{background:var(--gray-400);border-radius:var(--radius-1)}.ds-tree::-webkit-scrollbar-thumb:hover{background:var(--gray-500)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], checkable: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkable", required: false }] }], expandAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandAll", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], showLine: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLine", required: false }] }], draggable: [{ type: i0.Input, args: [{ isSignal: true, alias: "draggable", required: false }] }], virtualScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScroll", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], loadChildren: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadChildren", required: false }] }], nodeSelect: [{ type: i0.Output, args: ["nodeSelect"] }], nodeExpand: [{ type: i0.Output, args: ["nodeExpand"] }], nodeCheck: [{ type: i0.Output, args: ["nodeCheck"] }] } });
+
 /*
  * Components barrel export
  */
@@ -9127,5 +10734,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AUTOCOMPLETE_POSITIONS, BUTTON_APPEARANCE_OPTIONS, BUTTON_SIZE_OPTIONS, BUTTON_VARIANT_OPTIONS, DROPDOWN_POSITIONS, DsAccordion, DsAlert, DsAvatar, DsBadge, DsBreadcrumb, DsButton, DsCard, DsCheckbox, DsChip, DsCombobox, DsContainer, DsDatePicker, DsDivider, DsDropdown, DsFileUpload, DsI18nService, DsInputField, DsInputTextarea, DsMenu, DsModalComponent, DsPagination, DsPopover, DsPopoverComponent, DsProgressBar, DsRadioGroup, DsSearchInput, DsSelect, DsSkeleton, DsSlider, DsStepper, DsTable, DsTabs, DsToastComponent, DsToastContainerComponent, DsToastService, DsToggle, DsTooltip, DsTooltipComponent, IconRegistryService, POPOVER_POSITIONS, PrimitiveBadge, PrimitiveButton, PrimitiveCheckbox, PrimitiveInput, PrimitiveRadio, PrimitiveTextarea, PrimitiveToggle, TOOLTIP_POSITIONS, buildButtonArgTypes, buildButtonArgs, createSizeRender, createVariantRender };
+export { AUTOCOMPLETE_POSITIONS, BUTTON_APPEARANCE_OPTIONS, BUTTON_SIZE_OPTIONS, BUTTON_VARIANT_OPTIONS, DROPDOWN_POSITIONS, DsAccordion, DsAlert, DsAvatar, DsBadge, DsBreadcrumb, DsButton, DsCard, DsCheckbox, DsChip, DsCombobox, DsContainer, DsDatePicker, DsDivider, DsDrawer, DsDropdown, DsEmpty, DsFileUpload, DsI18nService, DsInputField, DsInputTextarea, DsMenu, DsModalComponent, DsPagination, DsPopover, DsPopoverComponent, DsProgressBar, DsRadioGroup, DsRating, DsSearchInput, DsSelect, DsSkeleton, DsSlider, DsStepper, DsTable, DsTabs, DsTimePicker, DsToastComponent, DsToastContainerComponent, DsToastService, DsToggle, DsTooltip, DsTooltipComponent, DsTree, IconRegistryService, POPOVER_POSITIONS, PrimitiveBadge, PrimitiveButton, PrimitiveCheckbox, PrimitiveInput, PrimitiveRadio, PrimitiveTextarea, PrimitiveToggle, TOOLTIP_POSITIONS, buildButtonArgTypes, buildButtonArgs, createSizeRender, createVariantRender };
 //# sourceMappingURL=kksdev-ds-angular.mjs.map