@kksdev/ds-angular 1.2.4 → 1.3.0

package/fesm2022/kksdev-ds-angular.mjs

@@ -2,14 +2,14 @@ import * as i0 from '@angular/core';
 import { input, Component, output, HostBinding, model, signal, computed, forwardRef, effect, ElementRef, ViewChildren, ViewChild, EventEmitter, inject, HostListener, ContentChild, Output, Directive, DestroyRef, Injectable, ChangeDetectionStrategy, viewChild } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule, DOCUMENT, NgClass } from '@angular/common';
-import * as i2 from '@fortawesome/angular-fontawesome';
+import * as i1$1 from '@fortawesome/angular-fontawesome';
 import { FaIconComponent, FontAwesomeModule } from '@fortawesome/angular-fontawesome';
-import * as i1$3 from '@angular/forms';
+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 } from '@fortawesome/free-solid-svg-icons';
-import * as i1$1 from '@angular/router';
+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 * as i1$2 from '@angular/router';
 import { RouterModule } from '@angular/router';
-import * as i1$2 from '@angular/cdk/overlay';
+import * as i1$3 from '@angular/cdk/overlay';
 import { CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
 import { FocusTrapFactory } from '@angular/cdk/a11y';
 import { TemplatePortal, ComponentPortal } from '@angular/cdk/portal';
@@ -250,7 +250,7 @@ class PrimitiveBadge {
         return this.customStyles();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: PrimitiveBadge, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: PrimitiveBadge, isStandalone: true, selector: "primitive-badge", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, iconStart: { classPropertyName: "iconStart", publicName: "iconStart", isSignal: true, isRequired: false, transformFunction: null }, iconEnd: { classPropertyName: "iconEnd", publicName: "iconEnd", isSignal: true, isRequired: false, transformFunction: null }, customStyles: { classPropertyName: "customStyles", publicName: "customStyles", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<span [ngClass]=\"badgeClasses\" [ngStyle]=\"styleOverrides\" [attr.data-type]=\"type()\">\n  @if (iconStart()) {\n    <fa-icon [icon]=\"iconStart()!\" class=\"icon-start\" />\n  }\n  <ng-content></ng-content>\n  @if (iconEnd()) {\n    <fa-icon [icon]=\"iconEnd()!\" class=\"icon-end\" />\n  }\n</span>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex}span{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-1);min-height:var(--badge-height);padding:var(--badge-padding-vertical-md) var(--badge-padding-horizontal-md);font-weight:var(--font-weight-medium);font-size:var(--badge-font-size-md);line-height:var(--line-height-tight);border-radius:var(--badge-radius);white-space:nowrap;border:1px solid transparent;background-color:var(--badge-bg);color:var(--badge-text);border-color:var(--badge-border-color, transparent);transition:background-color var(--duration-fast) var(--easing-out),color var(--duration-fast) var(--easing-out),border-color var(--duration-fast) var(--easing-out)}span.outline{background-color:transparent;color:var(--badge-outline-text-color, var(--badge-border-color, var(--badge-bg)));border-color:var(--badge-border-color, var(--badge-bg))}span.primary{--badge-bg: var(--badge-primary-bg);--badge-text: var(--badge-primary-text);--badge-border-color: var(--badge-primary-bg)}span.secondary{--badge-bg: var(--badge-secondary-bg);--badge-text: var(--badge-secondary-text);--badge-border-color: var(--badge-secondary-bg)}span.success{--badge-bg: var(--badge-success-bg);--badge-text: var(--badge-success-text);--badge-border-color: var(--badge-success-bg)}span.warning{--badge-bg: var(--badge-warning-bg);--badge-text: var(--badge-warning-text);--badge-border-color: var(--badge-warning-bg);--badge-outline-text-color: var(--badge-warning-outline-text, var(--badge-warning-bg))}span.error{--badge-bg: var(--badge-error-bg);--badge-text: var(--badge-error-text);--badge-border-color: var(--badge-error-bg)}span.info{--badge-bg: var(--badge-info-bg);--badge-text: var(--badge-info-text);--badge-border-color: var(--badge-info-bg)}span.neutral{--badge-bg: var(--badge-neutral-bg);--badge-text: var(--badge-neutral-text);--badge-border-color: var(--badge-neutral-bg)}span.accent{--badge-bg: var(--badge-accent-bg);--badge-text: var(--badge-accent-text);--badge-border-color: var(--badge-accent-bg)}span.sm{font-size:var(--badge-font-size-sm);padding:var(--badge-padding-vertical-sm) var(--badge-padding-horizontal-sm)}span.md{font-size:var(--badge-font-size-md);padding:var(--badge-padding-vertical-md) var(--badge-padding-horizontal-md)}span.lg{font-size:var(--badge-font-size-lg);padding:var(--badge-padding-vertical-lg) var(--badge-padding-horizontal-lg)}span.rounded{border-radius:var(--badge-radius)}span.pill{border-radius:var(--badge-pill-radius)}.icon-start,.icon-end{font-size:var(--icon-size-sm)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: PrimitiveBadge, isStandalone: true, selector: "primitive-badge", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, iconStart: { classPropertyName: "iconStart", publicName: "iconStart", isSignal: true, isRequired: false, transformFunction: null }, iconEnd: { classPropertyName: "iconEnd", publicName: "iconEnd", isSignal: true, isRequired: false, transformFunction: null }, customStyles: { classPropertyName: "customStyles", publicName: "customStyles", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<span [ngClass]=\"badgeClasses\" [ngStyle]=\"styleOverrides\" [attr.data-type]=\"type()\">\n  @if (iconStart()) {\n    <fa-icon [icon]=\"iconStart()!\" class=\"icon-start\" />\n  }\n  <ng-content></ng-content>\n  @if (iconEnd()) {\n    <fa-icon [icon]=\"iconEnd()!\" class=\"icon-end\" />\n  }\n</span>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex}span{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-1);min-height:var(--badge-height);padding:var(--badge-padding-vertical-md) var(--badge-padding-horizontal-md);font-weight:var(--font-weight-medium);font-size:var(--badge-font-size-md);line-height:var(--line-height-tight);border-radius:var(--badge-radius);white-space:nowrap;border:1px solid transparent;background-color:var(--badge-bg);color:var(--badge-text);border-color:var(--badge-border-color, transparent);transition:background-color var(--duration-fast) var(--easing-out),color var(--duration-fast) var(--easing-out),border-color var(--duration-fast) var(--easing-out)}span.outline{background-color:transparent;color:var(--badge-outline-text-color, var(--badge-border-color, var(--badge-bg)));border-color:var(--badge-border-color, var(--badge-bg))}span.primary{--badge-bg: var(--badge-primary-bg);--badge-text: var(--badge-primary-text);--badge-border-color: var(--badge-primary-bg)}span.secondary{--badge-bg: var(--badge-secondary-bg);--badge-text: var(--badge-secondary-text);--badge-border-color: var(--badge-secondary-bg)}span.success{--badge-bg: var(--badge-success-bg);--badge-text: var(--badge-success-text);--badge-border-color: var(--badge-success-bg)}span.warning{--badge-bg: var(--badge-warning-bg);--badge-text: var(--badge-warning-text);--badge-border-color: var(--badge-warning-bg);--badge-outline-text-color: var(--badge-warning-outline-text, var(--badge-warning-bg))}span.error{--badge-bg: var(--badge-error-bg);--badge-text: var(--badge-error-text);--badge-border-color: var(--badge-error-bg)}span.info{--badge-bg: var(--badge-info-bg);--badge-text: var(--badge-info-text);--badge-border-color: var(--badge-info-bg)}span.neutral{--badge-bg: var(--badge-neutral-bg);--badge-text: var(--badge-neutral-text);--badge-border-color: var(--badge-neutral-bg)}span.accent{--badge-bg: var(--badge-accent-bg);--badge-text: var(--badge-accent-text);--badge-border-color: var(--badge-accent-bg)}span.sm{font-size:var(--badge-font-size-sm);padding:var(--badge-padding-vertical-sm) var(--badge-padding-horizontal-sm)}span.md{font-size:var(--badge-font-size-md);padding:var(--badge-padding-vertical-md) var(--badge-padding-horizontal-md)}span.lg{font-size:var(--badge-font-size-lg);padding:var(--badge-padding-vertical-lg) var(--badge-padding-horizontal-lg)}span.rounded{border-radius:var(--badge-radius)}span.pill{border-radius:var(--badge-pill-radius)}.icon-start,.icon-end{font-size:var(--icon-size-sm)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: PrimitiveBadge, decorators: [{
             type: Component,
@@ -505,7 +505,7 @@ class PrimitiveButton {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: PrimitiveButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: PrimitiveButton, isStandalone: true, selector: "primitive-button", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", 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 }, iconStart: { classPropertyName: "iconStart", publicName: "iconStart", isSignal: true, isRequired: false, transformFunction: null }, iconEnd: { classPropertyName: "iconEnd", publicName: "iconEnd", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, block: { classPropertyName: "block", publicName: "block", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { properties: { "class.block": "this.hostBlock" } }, ngImport: i0, template: "<button\n  [type]=\"type()\"\n  [class]=\"buttonClasses\"\n  [disabled]=\"disabled()\"\n  (click)=\"handleClick()\">\n  @if (iconStart()) {\n    <fa-icon [icon]=\"iconStart()!\" class=\"icon-start\" />\n  }\n  <ng-content></ng-content>\n  @if (iconEnd()) {\n    <fa-icon [icon]=\"iconEnd()!\" class=\"icon-end\" />\n  }\n</button>\n", styles: [":host{display:inline-flex}:host.block{display:flex;width:100%}:host.block button,button.block{width:100%}button{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--btn-padding-vertical-md) var(--btn-padding-horizontal-md);border:1px solid transparent;border-radius:var(--btn-radius);font-weight:var(--font-weight-medium);font-size:var(--btn-font-size-md);cursor:pointer;transition:all var(--duration-fast) var(--easing-default)}button.primary{background-color:var(--btn-primary-bg);color:var(--btn-primary-text);border-color:var(--btn-primary-border)}button.primary:hover:not(:disabled){background-color:var(--btn-primary-hover-bg);color:var(--btn-primary-hover-text)}button.secondary{background-color:var(--btn-secondary-bg);color:var(--btn-secondary-text);border-color:var(--btn-secondary-border)}button.secondary:hover:not(:disabled){background-color:var(--btn-secondary-hover-bg);color:var(--btn-secondary-hover-text)}button.ghost{background-color:var(--btn-ghost-bg);color:var(--btn-ghost-text);border-color:var(--btn-ghost-border)}button.ghost:hover:not(:disabled){background-color:var(--btn-ghost-hover-bg);color:var(--btn-ghost-hover-text)}button.success{background-color:var(--btn-success-bg);color:var(--btn-success-text);border-color:var(--btn-success-border)}button.success:hover:not(:disabled){background-color:var(--btn-success-hover-bg);color:var(--btn-success-hover-text)}button.warning{background-color:var(--btn-warning-bg);color:var(--btn-warning-text);border-color:var(--btn-warning-border)}button.warning:hover:not(:disabled){background-color:var(--btn-warning-hover-bg);color:var(--btn-warning-hover-text)}button.error{background-color:var(--btn-error-bg);color:var(--btn-error-text);border-color:var(--btn-error-border)}button.error:hover:not(:disabled){background-color:var(--btn-error-hover-bg);color:var(--btn-error-hover-text)}button.info{background-color:var(--btn-info-bg);color:var(--btn-info-text);border-color:var(--btn-info-border)}button.info:hover:not(:disabled){background-color:var(--btn-info-hover-bg);color:var(--btn-info-hover-text)}button.outline{background-color:transparent;border:1px solid currentColor}button.outline.primary{color:var(--btn-primary-bg);border-color:var(--btn-primary-bg)}button.outline.primary:hover:not(:disabled){background-color:color-mix(in srgb,var(--btn-primary-bg) 15%,transparent)}button.outline.secondary{color:var(--btn-secondary-bg);border-color:var(--btn-secondary-bg)}button.outline.secondary:hover:not(:disabled){background-color:color-mix(in srgb,var(--btn-secondary-bg) 15%,transparent)}button.outline.ghost{color:var(--btn-ghost-text);border-color:transparent}button.outline.ghost:hover:not(:disabled){background-color:color-mix(in srgb,var(--btn-ghost-bg) 15%,transparent);border-color:var(--btn-ghost-hover-bg)}button.outline.success{color:var(--btn-success-bg);border-color:var(--btn-success-bg)}button.outline.success:hover:not(:disabled){background-color:color-mix(in srgb,var(--btn-success-bg) 15%,transparent)}button.outline.warning{color:var(--btn-warning-bg);border-color:var(--btn-warning-bg)}button.outline.warning:hover:not(:disabled){background-color:color-mix(in srgb,var(--btn-warning-bg) 15%,transparent)}button.outline.error{color:var(--btn-error-bg);border-color:var(--btn-error-bg)}button.outline.error:hover:not(:disabled){background-color:color-mix(in srgb,var(--btn-error-bg) 15%,transparent)}button.outline.info{color:var(--btn-info-bg);border-color:var(--btn-info-bg)}button.outline.info:hover:not(:disabled){background-color:color-mix(in srgb,var(--btn-info-bg) 15%,transparent)}button.sm{font-size:var(--btn-font-size-sm);padding:var(--btn-padding-vertical-sm) var(--btn-padding-horizontal-sm)}button.md{font-size:var(--btn-font-size-md);padding:var(--btn-padding-vertical-md) var(--btn-padding-horizontal-md)}button.lg{font-size:var(--btn-font-size-lg);padding:var(--btn-padding-vertical-lg) var(--btn-padding-horizontal-lg)}button:disabled{opacity:.6;cursor:not-allowed}.icon-start{margin-right:var(--space-1)}.icon-end{margin-left:var(--space-1)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: PrimitiveButton, isStandalone: true, selector: "primitive-button", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", 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 }, iconStart: { classPropertyName: "iconStart", publicName: "iconStart", isSignal: true, isRequired: false, transformFunction: null }, iconEnd: { classPropertyName: "iconEnd", publicName: "iconEnd", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, block: { classPropertyName: "block", publicName: "block", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { properties: { "class.block": "this.hostBlock" } }, ngImport: i0, template: "<button\n  [type]=\"type()\"\n  [class]=\"buttonClasses\"\n  [disabled]=\"disabled()\"\n  (click)=\"handleClick()\">\n  @if (iconStart()) {\n    <fa-icon [icon]=\"iconStart()!\" class=\"icon-start\" />\n  }\n  <ng-content></ng-content>\n  @if (iconEnd()) {\n    <fa-icon [icon]=\"iconEnd()!\" class=\"icon-end\" />\n  }\n</button>\n", styles: [":host{display:inline-flex}:host.block{display:flex;width:100%}:host.block button,button.block{width:100%}button{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--btn-padding-vertical-md) var(--btn-padding-horizontal-md);border:1px solid transparent;border-radius:var(--btn-radius);font-weight:var(--font-weight-medium);font-size:var(--btn-font-size-md);cursor:pointer;transition:all var(--duration-fast) var(--easing-default)}button.primary{background-color:var(--btn-primary-bg);color:var(--btn-primary-text);border-color:var(--btn-primary-border)}button.primary:hover:not(:disabled){background-color:var(--btn-primary-hover-bg);color:var(--btn-primary-hover-text)}button.secondary{background-color:var(--btn-secondary-bg);color:var(--btn-secondary-text);border-color:var(--btn-secondary-border)}button.secondary:hover:not(:disabled){background-color:var(--btn-secondary-hover-bg);color:var(--btn-secondary-hover-text)}button.ghost{background-color:var(--btn-ghost-bg);color:var(--btn-ghost-text);border-color:var(--btn-ghost-border)}button.ghost:hover:not(:disabled){background-color:var(--btn-ghost-hover-bg);color:var(--btn-ghost-hover-text)}button.success{background-color:var(--btn-success-bg);color:var(--btn-success-text);border-color:var(--btn-success-border)}button.success:hover:not(:disabled){background-color:var(--btn-success-hover-bg);color:var(--btn-success-hover-text)}button.warning{background-color:var(--btn-warning-bg);color:var(--btn-warning-text);border-color:var(--btn-warning-border)}button.warning:hover:not(:disabled){background-color:var(--btn-warning-hover-bg);color:var(--btn-warning-hover-text)}button.error{background-color:var(--btn-error-bg);color:var(--btn-error-text);border-color:var(--btn-error-border)}button.error:hover:not(:disabled){background-color:var(--btn-error-hover-bg);color:var(--btn-error-hover-text)}button.info{background-color:var(--btn-info-bg);color:var(--btn-info-text);border-color:var(--btn-info-border)}button.info:hover:not(:disabled){background-color:var(--btn-info-hover-bg);color:var(--btn-info-hover-text)}button.outline{background-color:transparent;border:1px solid currentColor}button.outline.primary{color:var(--btn-primary-bg);border-color:var(--btn-primary-bg)}button.outline.primary:hover:not(:disabled){background-color:color-mix(in srgb,var(--btn-primary-bg) 15%,transparent)}button.outline.secondary{color:var(--btn-secondary-bg);border-color:var(--btn-secondary-bg)}button.outline.secondary:hover:not(:disabled){background-color:color-mix(in srgb,var(--btn-secondary-bg) 15%,transparent)}button.outline.ghost{color:var(--btn-ghost-text);border-color:transparent}button.outline.ghost:hover:not(:disabled){background-color:color-mix(in srgb,var(--btn-ghost-bg) 15%,transparent);border-color:var(--btn-ghost-hover-bg)}button.outline.success{color:var(--btn-success-bg);border-color:var(--btn-success-bg)}button.outline.success:hover:not(:disabled){background-color:color-mix(in srgb,var(--btn-success-bg) 15%,transparent)}button.outline.warning{color:var(--btn-warning-bg);border-color:var(--btn-warning-bg)}button.outline.warning:hover:not(:disabled){background-color:color-mix(in srgb,var(--btn-warning-bg) 15%,transparent)}button.outline.error{color:var(--btn-error-bg);border-color:var(--btn-error-bg)}button.outline.error:hover:not(:disabled){background-color:color-mix(in srgb,var(--btn-error-bg) 15%,transparent)}button.outline.info{color:var(--btn-info-bg);border-color:var(--btn-info-bg)}button.outline.info:hover:not(:disabled){background-color:color-mix(in srgb,var(--btn-info-bg) 15%,transparent)}button.sm{font-size:var(--btn-font-size-sm);padding:var(--btn-padding-vertical-sm) var(--btn-padding-horizontal-sm)}button.md{font-size:var(--btn-font-size-md);padding:var(--btn-padding-vertical-md) var(--btn-padding-horizontal-md)}button.lg{font-size:var(--btn-font-size-lg);padding:var(--btn-padding-vertical-lg) var(--btn-padding-horizontal-lg)}button:disabled{opacity:.6;cursor:not-allowed}.icon-start{margin-right:var(--space-1)}.icon-end{margin-left:var(--space-1)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: PrimitiveButton, decorators: [{
             type: Component,
@@ -1239,7 +1239,7 @@ class PrimitiveInput {
         this.inputFocused.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: PrimitiveInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: PrimitiveInput, isStandalone: true, selector: "primitive-input", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, iconStart: { classPropertyName: "iconStart", publicName: "iconStart", isSignal: true, isRequired: false, transformFunction: null }, iconEnd: { classPropertyName: "iconEnd", publicName: "iconEnd", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", inputChanged: "inputChanged", inputBlurred: "inputBlurred", inputFocused: "inputFocused" }, ngImport: i0, template: "<div class=\"input-wrapper\" [class]=\"wrapperClasses\">\n  @if (iconStart()) {\n    <fa-icon [icon]=\"iconStart()!\" class=\"icon-start\" />\n  }\n  <input\n    [attr.id]=\"id()\"\n    [attr.name]=\"name()\"\n    [attr.autocomplete]=\"autocomplete()\"\n    [attr.maxLength]=\"maxlength()\"\n    [type]=\"type()\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly()\"\n    [required]=\"required()\"\n    [value]=\"value()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-describedby]=\"ariaDescribedBy()\"\n    [attr.aria-invalid]=\"state() === 'error' ? 'true' : 'false'\"\n    [attr.aria-readonly]=\"readonly() ? 'true' : 'false'\"\n    [attr.aria-disabled]=\"disabled() ? 'true' : 'false'\"\n    [attr.aria-required]=\"required() ? 'true' : 'false'\"\n    (input)=\"handleInput($event)\"\n    (blur)=\"handleBlur()\"\n    (focus)=\"handleFocus()\"\n  />\n  @if (iconEnd()) {\n    <fa-icon [icon]=\"iconEnd()!\" class=\"icon-end\" />\n  }\n</div>\n", styles: [":host{display:inline-flex}.input-wrapper{position:relative;display:inline-flex;align-items:center;gap:var(--space-2);width:100%;padding:0 var(--input-padding-horizontal-md);background-color:var(--input-bg);border:1px solid var(--input-border);border-radius:var(--input-radius);transition:all var(--duration-fast) var(--easing-default)}.input-wrapper:hover:not(.disabled){border-color:var(--input-hover-border)}.input-wrapper:focus-within{border-color:var(--input-focus-border);box-shadow:var(--input-focus-shadow)}.input-wrapper.disabled{cursor:not-allowed;opacity:.8}.input-wrapper.readonly{background-color:var(--input-disabled-bg)}input{flex:1;height:var(--input-height-md);padding:0;border:none;background:transparent;font-size:var(--input-font-size-md);font-weight:var(--font-weight-normal);color:var(--input-text);outline:none}input::placeholder{color:var(--input-placeholder)}input:disabled{cursor:not-allowed;opacity:.6}input:read-only{color:var(--input-placeholder);cursor:default}.input-wrapper.outline{background:transparent;border-width:2px}.input-wrapper.ghost{background:transparent;border:none;border-bottom:1px solid var(--input-border);border-radius:0}.input-wrapper.ghost:focus-within{border-bottom-color:var(--input-focus-border);box-shadow:none}.input-wrapper.sm{padding:0 var(--input-padding-horizontal-sm)}.input-wrapper.sm input{height:var(--input-height-sm);font-size:var(--input-font-size-sm)}.input-wrapper.md{padding:0 var(--input-padding-horizontal-md)}.input-wrapper.md input{height:var(--input-height-md);font-size:var(--input-font-size-md)}.input-wrapper.lg{padding:0 var(--input-padding-horizontal-lg)}.input-wrapper.lg input{height:var(--input-height-lg);font-size:var(--input-font-size-lg)}.input-wrapper.success{border-color:var(--input-success-border)}.input-wrapper.warning{border-color:var(--input-warning-border)}.input-wrapper.error{border-color:var(--input-error-border)}.input-wrapper.ghost.success{border-bottom-color:var(--input-success-border)}.input-wrapper.ghost.warning{border-bottom-color:var(--input-warning-border)}.input-wrapper.ghost.error{border-bottom-color:var(--input-error-border)}.icon-start,.icon-end{color:var(--input-icon);font-size:var(--input-icon-size-md)}.input-wrapper.sm .icon-start,.input-wrapper.sm .icon-end{font-size:var(--input-icon-size-sm)}.input-wrapper.lg .icon-start,.input-wrapper.lg .icon-end{font-size:var(--input-icon-size-lg)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: PrimitiveInput, isStandalone: true, selector: "primitive-input", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, iconStart: { classPropertyName: "iconStart", publicName: "iconStart", isSignal: true, isRequired: false, transformFunction: null }, iconEnd: { classPropertyName: "iconEnd", publicName: "iconEnd", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", inputChanged: "inputChanged", inputBlurred: "inputBlurred", inputFocused: "inputFocused" }, ngImport: i0, template: "<div class=\"input-wrapper\" [class]=\"wrapperClasses\">\n  @if (iconStart()) {\n    <fa-icon [icon]=\"iconStart()!\" class=\"icon-start\" />\n  }\n  <input\n    [attr.id]=\"id()\"\n    [attr.name]=\"name()\"\n    [attr.autocomplete]=\"autocomplete()\"\n    [attr.maxLength]=\"maxlength()\"\n    [type]=\"type()\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly()\"\n    [required]=\"required()\"\n    [value]=\"value()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-describedby]=\"ariaDescribedBy()\"\n    [attr.aria-invalid]=\"state() === 'error' ? 'true' : 'false'\"\n    [attr.aria-readonly]=\"readonly() ? 'true' : 'false'\"\n    [attr.aria-disabled]=\"disabled() ? 'true' : 'false'\"\n    [attr.aria-required]=\"required() ? 'true' : 'false'\"\n    (input)=\"handleInput($event)\"\n    (blur)=\"handleBlur()\"\n    (focus)=\"handleFocus()\"\n  />\n  @if (iconEnd()) {\n    <fa-icon [icon]=\"iconEnd()!\" class=\"icon-end\" />\n  }\n</div>\n", styles: [":host{display:inline-flex}.input-wrapper{position:relative;display:inline-flex;align-items:center;gap:var(--space-2);width:100%;padding:0 var(--input-padding-horizontal-md);background-color:var(--input-bg);border:1px solid var(--input-border);border-radius:var(--input-radius);transition:all var(--duration-fast) var(--easing-default)}.input-wrapper:hover:not(.disabled){border-color:var(--input-hover-border)}.input-wrapper:focus-within{border-color:var(--input-focus-border);box-shadow:var(--input-focus-shadow)}.input-wrapper.disabled{cursor:not-allowed;opacity:.8}.input-wrapper.readonly{background-color:var(--input-disabled-bg)}input{flex:1;height:var(--input-height-md);padding:0;border:none;background:transparent;font-size:var(--input-font-size-md);font-weight:var(--font-weight-normal);color:var(--input-text);outline:none}input::placeholder{color:var(--input-placeholder)}input:disabled{cursor:not-allowed;opacity:.6}input:read-only{color:var(--input-placeholder);cursor:default}.input-wrapper.outline{background:transparent;border-width:2px}.input-wrapper.ghost{background:transparent;border:none;border-bottom:1px solid var(--input-border);border-radius:0}.input-wrapper.ghost:focus-within{border-bottom-color:var(--input-focus-border);box-shadow:none}.input-wrapper.sm{padding:0 var(--input-padding-horizontal-sm)}.input-wrapper.sm input{height:var(--input-height-sm);font-size:var(--input-font-size-sm)}.input-wrapper.md{padding:0 var(--input-padding-horizontal-md)}.input-wrapper.md input{height:var(--input-height-md);font-size:var(--input-font-size-md)}.input-wrapper.lg{padding:0 var(--input-padding-horizontal-lg)}.input-wrapper.lg input{height:var(--input-height-lg);font-size:var(--input-font-size-lg)}.input-wrapper.success{border-color:var(--input-success-border)}.input-wrapper.warning{border-color:var(--input-warning-border)}.input-wrapper.error{border-color:var(--input-error-border)}.input-wrapper.ghost.success{border-bottom-color:var(--input-success-border)}.input-wrapper.ghost.warning{border-bottom-color:var(--input-warning-border)}.input-wrapper.ghost.error{border-bottom-color:var(--input-error-border)}.icon-start,.icon-end{color:var(--input-icon);font-size:var(--input-icon-size-md)}.input-wrapper.sm .icon-start,.input-wrapper.sm .icon-end{font-size:var(--input-icon-size-sm)}.input-wrapper.lg .icon-start,.input-wrapper.lg .icon-end{font-size:var(--input-icon-size-lg)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: PrimitiveInput, decorators: [{
             type: Component,
@@ -1986,7 +1986,7 @@ class PrimitiveTextarea {
         this.inputFocused.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: PrimitiveTextarea, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: PrimitiveTextarea, isStandalone: true, selector: "primitive-textarea", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, resize: { classPropertyName: "resize", publicName: "resize", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, cols: { classPropertyName: "cols", publicName: "cols", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, iconStart: { classPropertyName: "iconStart", publicName: "iconStart", isSignal: true, isRequired: false, transformFunction: null }, iconEnd: { classPropertyName: "iconEnd", publicName: "iconEnd", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", inputChanged: "inputChanged", inputBlurred: "inputBlurred", inputFocused: "inputFocused" }, ngImport: i0, template: "<div class=\"textarea-wrapper\" [class]=\"wrapperClasses\">\n  @if (iconStart()) {\n    <fa-icon [icon]=\"iconStart()!\" class=\"icon-start\" />\n  }\n  <textarea\n    [id]=\"id()\"\n    [name]=\"name()\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly()\"\n    [required]=\"required()\"\n    [attr.rows]=\"rows()\"\n    [attr.cols]=\"cols()\"\n    [attr.maxLength]=\"maxlength()\"\n    [value]=\"value()\"\n    (input)=\"handleInput($event)\"\n    (blur)=\"handleBlur()\"\n    (focus)=\"handleFocus()\"\n    [style.resize]=\"resize()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-invalid]=\"state() === 'error' ? 'true' : 'false'\"\n    [attr.aria-readonly]=\"readonly() ? 'true' : 'false'\"\n    [attr.aria-disabled]=\"disabled() ? 'true' : 'false'\"\n    [attr.aria-required]=\"required() ? 'true' : 'false'\"\n    [attr.aria-describedby]=\"ariaDescribedBy()\"\n  ></textarea>\n  @if (iconEnd()) {\n    <fa-icon [icon]=\"iconEnd()!\" class=\"icon-end\" />\n  }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;width:100%}.textarea-wrapper{position:relative;display:inline-flex;align-items:flex-start;gap:var(--space-2);width:100%;padding:var(--space-2) var(--input-padding-horizontal-md);background-color:var(--input-bg);border:1px solid var(--input-border);border-radius:var(--input-radius);transition:all var(--duration-fast) var(--easing-default)}.textarea-wrapper:hover:not(.disabled):not(.readonly){border-color:var(--input-hover-border)}.textarea-wrapper:focus-within{border-color:var(--input-focus-border);box-shadow:var(--input-focus-shadow)}.textarea-wrapper.disabled{cursor:not-allowed;opacity:.85}.textarea-wrapper.readonly{background-color:var(--input-disabled-bg)}.textarea-wrapper.readonly textarea{color:var(--input-placeholder)}.textarea-wrapper.disabled textarea{color:var(--input-disabled-text)}textarea{flex:1;width:100%;min-height:var(--input-height-lg);border:none;background:transparent;font-size:var(--input-font-size-md);font-weight:var(--font-weight-normal);color:var(--input-text);line-height:var(--line-height-normal);resize:none;outline:none;padding:0}textarea::placeholder{color:var(--input-placeholder)}textarea:disabled{cursor:not-allowed;opacity:.6}.textarea-wrapper.outline{background:transparent;border-width:2px}.textarea-wrapper.ghost{background:transparent;border:none;border-bottom:1px solid var(--input-border);border-radius:0;padding-right:0;padding-left:0}.textarea-wrapper.ghost:focus-within{border-bottom-color:var(--input-focus-border);box-shadow:none}.textarea-wrapper.sm{padding:var(--space-1) var(--input-padding-horizontal-sm)}.textarea-wrapper.sm textarea{min-height:var(--input-height-sm);font-size:var(--input-font-size-sm)}.textarea-wrapper.md{padding:var(--space-2) var(--input-padding-horizontal-md)}.textarea-wrapper.md textarea{min-height:var(--input-height-md);font-size:var(--input-font-size-md)}.textarea-wrapper.lg{padding:var(--space-3) var(--input-padding-horizontal-lg)}.textarea-wrapper.lg textarea{min-height:var(--input-height-lg);font-size:var(--input-font-size-lg)}.textarea-wrapper.success{border-color:var(--input-success-border)}.textarea-wrapper.warning{border-color:var(--input-warning-border)}.textarea-wrapper.error{border-color:var(--input-error-border)}.textarea-wrapper.ghost.success{border-bottom-color:var(--input-success-border)}.textarea-wrapper.ghost.warning{border-bottom-color:var(--input-warning-border)}.textarea-wrapper.ghost.error{border-bottom-color:var(--input-error-border)}.icon-start,.icon-end{color:var(--input-icon);font-size:var(--input-icon-size-md);margin-top:var(--space-1)}.textarea-wrapper.sm .icon-start,.textarea-wrapper.sm .icon-end{font-size:var(--input-icon-size-sm)}.textarea-wrapper.lg .icon-start,.textarea-wrapper.lg .icon-end{font-size:var(--input-icon-size-lg)}.textarea-wrapper.has-icon-start textarea{margin-left:var(--space-1)}.textarea-wrapper.has-icon-end textarea{margin-right:var(--space-1)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: PrimitiveTextarea, isStandalone: true, selector: "primitive-textarea", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, resize: { classPropertyName: "resize", publicName: "resize", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, cols: { classPropertyName: "cols", publicName: "cols", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, iconStart: { classPropertyName: "iconStart", publicName: "iconStart", isSignal: true, isRequired: false, transformFunction: null }, iconEnd: { classPropertyName: "iconEnd", publicName: "iconEnd", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", inputChanged: "inputChanged", inputBlurred: "inputBlurred", inputFocused: "inputFocused" }, ngImport: i0, template: "<div class=\"textarea-wrapper\" [class]=\"wrapperClasses\">\n  @if (iconStart()) {\n    <fa-icon [icon]=\"iconStart()!\" class=\"icon-start\" />\n  }\n  <textarea\n    [id]=\"id()\"\n    [name]=\"name()\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly()\"\n    [required]=\"required()\"\n    [attr.rows]=\"rows()\"\n    [attr.cols]=\"cols()\"\n    [attr.maxLength]=\"maxlength()\"\n    [value]=\"value()\"\n    (input)=\"handleInput($event)\"\n    (blur)=\"handleBlur()\"\n    (focus)=\"handleFocus()\"\n    [style.resize]=\"resize()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-invalid]=\"state() === 'error' ? 'true' : 'false'\"\n    [attr.aria-readonly]=\"readonly() ? 'true' : 'false'\"\n    [attr.aria-disabled]=\"disabled() ? 'true' : 'false'\"\n    [attr.aria-required]=\"required() ? 'true' : 'false'\"\n    [attr.aria-describedby]=\"ariaDescribedBy()\"\n  ></textarea>\n  @if (iconEnd()) {\n    <fa-icon [icon]=\"iconEnd()!\" class=\"icon-end\" />\n  }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;width:100%}.textarea-wrapper{position:relative;display:inline-flex;align-items:flex-start;gap:var(--space-2);width:100%;padding:var(--space-2) var(--input-padding-horizontal-md);background-color:var(--input-bg);border:1px solid var(--input-border);border-radius:var(--input-radius);transition:all var(--duration-fast) var(--easing-default)}.textarea-wrapper:hover:not(.disabled):not(.readonly){border-color:var(--input-hover-border)}.textarea-wrapper:focus-within{border-color:var(--input-focus-border);box-shadow:var(--input-focus-shadow)}.textarea-wrapper.disabled{cursor:not-allowed;opacity:.85}.textarea-wrapper.readonly{background-color:var(--input-disabled-bg)}.textarea-wrapper.readonly textarea{color:var(--input-placeholder)}.textarea-wrapper.disabled textarea{color:var(--input-disabled-text)}textarea{flex:1;width:100%;min-height:var(--input-height-lg);border:none;background:transparent;font-size:var(--input-font-size-md);font-weight:var(--font-weight-normal);color:var(--input-text);line-height:var(--line-height-normal);resize:none;outline:none;padding:0}textarea::placeholder{color:var(--input-placeholder)}textarea:disabled{cursor:not-allowed;opacity:.6}.textarea-wrapper.outline{background:transparent;border-width:2px}.textarea-wrapper.ghost{background:transparent;border:none;border-bottom:1px solid var(--input-border);border-radius:0;padding-right:0;padding-left:0}.textarea-wrapper.ghost:focus-within{border-bottom-color:var(--input-focus-border);box-shadow:none}.textarea-wrapper.sm{padding:var(--space-1) var(--input-padding-horizontal-sm)}.textarea-wrapper.sm textarea{min-height:var(--input-height-sm);font-size:var(--input-font-size-sm)}.textarea-wrapper.md{padding:var(--space-2) var(--input-padding-horizontal-md)}.textarea-wrapper.md textarea{min-height:var(--input-height-md);font-size:var(--input-font-size-md)}.textarea-wrapper.lg{padding:var(--space-3) var(--input-padding-horizontal-lg)}.textarea-wrapper.lg textarea{min-height:var(--input-height-lg);font-size:var(--input-font-size-lg)}.textarea-wrapper.success{border-color:var(--input-success-border)}.textarea-wrapper.warning{border-color:var(--input-warning-border)}.textarea-wrapper.error{border-color:var(--input-error-border)}.textarea-wrapper.ghost.success{border-bottom-color:var(--input-success-border)}.textarea-wrapper.ghost.warning{border-bottom-color:var(--input-warning-border)}.textarea-wrapper.ghost.error{border-bottom-color:var(--input-error-border)}.icon-start,.icon-end{color:var(--input-icon);font-size:var(--input-icon-size-md);margin-top:var(--space-1)}.textarea-wrapper.sm .icon-start,.textarea-wrapper.sm .icon-end{font-size:var(--input-icon-size-sm)}.textarea-wrapper.lg .icon-start,.textarea-wrapper.lg .icon-end{font-size:var(--input-icon-size-lg)}.textarea-wrapper.has-icon-start textarea{margin-left:var(--space-1)}.textarea-wrapper.has-icon-end textarea{margin-right:var(--space-1)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: PrimitiveTextarea, decorators: [{
             type: Component,
@@ -2349,7 +2349,7 @@ 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: i2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }] });
+    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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsAlert, decorators: [{
             type: Component,
@@ -2447,7 +2447,7 @@ class DsBreadcrumb {
         return index;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsBreadcrumb, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DsBreadcrumb, isStandalone: true, selector: "ds-breadcrumb", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null }, maxItems: { classPropertyName: "maxItems", publicName: "maxItems", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClicked: "itemClicked" }, ngImport: i0, template: "<nav class=\"ds-breadcrumb\" aria-label=\"Breadcrumb\">\n  <ol class=\"ds-breadcrumb__list\">\n    @for (item of visibleItems; track trackByIndex($index)) {\n      <li class=\"ds-breadcrumb__item\" [class.ds-breadcrumb__item--active]=\"isLastItem($index)\">\n        @if (item.href && !item.disabled && !isLastItem($index)) {\n          <a\n            [routerLink]=\"item.href\"\n            class=\"ds-breadcrumb__link\"\n            (click)=\"onItemClick(item, $event)\"\n            [attr.aria-current]=\"isLastItem($index) ? 'page' : null\"\n          >\n            {{ item.label }}\n          </a>\n        } @else {\n          <span\n            class=\"ds-breadcrumb__text\"\n            [class.ds-breadcrumb__text--disabled]=\"item.disabled\"\n            [attr.aria-current]=\"isLastItem($index) ? 'page' : null\"\n          >\n            {{ item.label }}\n          </span>\n        }\n\n        @if (!isLastItem($index)) {\n          <span class=\"ds-breadcrumb__separator\" aria-hidden=\"true\">{{ separator() }}</span>\n        }\n      </li>\n    }\n  </ol>\n</nav>\n", styles: [".ds-breadcrumb{font-size:var(--breadcrumb-font-size)}.ds-breadcrumb__list{display:flex;align-items:center;flex-wrap:wrap;gap:var(--breadcrumb-spacing);list-style:none;padding:0;margin:0}.ds-breadcrumb__item{display:flex;align-items:center;gap:var(--breadcrumb-spacing)}.ds-breadcrumb__item--active .ds-breadcrumb__text{color:var(--breadcrumb-active);font-weight:var(--font-weight-medium)}.ds-breadcrumb__link{color:var(--breadcrumb-link);text-decoration:none;padding:var(--breadcrumb-item-padding);border-radius:var(--radius-1);transition:color var(--transition-default)}.ds-breadcrumb__link:hover{color:var(--breadcrumb-link-hover)}.ds-breadcrumb__link:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.ds-breadcrumb__text{padding:var(--breadcrumb-item-padding);color:var(--breadcrumb-active)}.ds-breadcrumb__text--disabled{color:var(--text-disabled);cursor:default}.ds-breadcrumb__separator{color:var(--breadcrumb-separator-color);-webkit-user-select:none;user-select:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DsBreadcrumb, isStandalone: true, selector: "ds-breadcrumb", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null }, maxItems: { classPropertyName: "maxItems", publicName: "maxItems", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClicked: "itemClicked" }, ngImport: i0, template: "<nav class=\"ds-breadcrumb\" aria-label=\"Breadcrumb\">\n  <ol class=\"ds-breadcrumb__list\">\n    @for (item of visibleItems; track trackByIndex($index)) {\n      <li class=\"ds-breadcrumb__item\" [class.ds-breadcrumb__item--active]=\"isLastItem($index)\">\n        @if (item.href && !item.disabled && !isLastItem($index)) {\n          <a\n            [routerLink]=\"item.href\"\n            class=\"ds-breadcrumb__link\"\n            (click)=\"onItemClick(item, $event)\"\n            [attr.aria-current]=\"isLastItem($index) ? 'page' : null\"\n          >\n            {{ item.label }}\n          </a>\n        } @else {\n          <span\n            class=\"ds-breadcrumb__text\"\n            [class.ds-breadcrumb__text--disabled]=\"item.disabled\"\n            [attr.aria-current]=\"isLastItem($index) ? 'page' : null\"\n          >\n            {{ item.label }}\n          </span>\n        }\n\n        @if (!isLastItem($index)) {\n          <span class=\"ds-breadcrumb__separator\" aria-hidden=\"true\">{{ separator() }}</span>\n        }\n      </li>\n    }\n  </ol>\n</nav>\n", styles: [".ds-breadcrumb{font-size:var(--breadcrumb-font-size)}.ds-breadcrumb__list{display:flex;align-items:center;flex-wrap:wrap;gap:var(--breadcrumb-spacing);list-style:none;padding:0;margin:0}.ds-breadcrumb__item{display:flex;align-items:center;gap:var(--breadcrumb-spacing)}.ds-breadcrumb__item--active .ds-breadcrumb__text{color:var(--breadcrumb-active);font-weight:var(--font-weight-medium)}.ds-breadcrumb__link{color:var(--breadcrumb-link);text-decoration:none;padding:var(--breadcrumb-item-padding);border-radius:var(--radius-1);transition:color var(--transition-default)}.ds-breadcrumb__link:hover{color:var(--breadcrumb-link-hover)}.ds-breadcrumb__link:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.ds-breadcrumb__text{padding:var(--breadcrumb-item-padding);color:var(--breadcrumb-active)}.ds-breadcrumb__text--disabled{color:var(--text-disabled);cursor:default}.ds-breadcrumb__separator{color:var(--breadcrumb-separator-color);-webkit-user-select:none;user-select:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsBreadcrumb, decorators: [{
             type: Component,
@@ -3279,7 +3279,7 @@ class DsDropdown {
                 useExisting: forwardRef(() => DsDropdown),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "triggerButton", first: true, predicate: ["triggerButton"], descendants: true, read: ElementRef }, { propertyName: "menuItems", predicate: ["menuItemRef"], descendants: true }], ngImport: i0, template: "<primitive-button\n  #triggerOrigin=\"cdkOverlayOrigin\"\n  #triggerButton\n  cdkOverlayOrigin\n  [attr.id]=\"id()\"\n  [type]=\"buttonType()\"\n  [variant]=\"type()\"\n  [appearance]=\"variant()\"\n  [size]=\"size()\"\n  [block]=\"block()\"\n  [disabled]=\"isDisabled()\"\n  [iconStart]=\"effectiveStartIcon()\"\n  [iconEnd]=\"effectiveEndIcon()\"\n  [attr.aria-haspopup]=\"'menu'\"\n  [attr.aria-expanded]=\"isMenuOpen()\"\n  [attr.aria-controls]=\"isMenuOpen() ? id() + '-menu' : null\"\n  [attr.aria-label]=\"ariaLabel() ?? null\"\n  [attr.aria-labelledby]=\"ariaLabelledBy() ?? null\"\n  (clicked)=\"toggleMenu()\"\n  (keydown)=\"onTriggerKeydown($event)\"\n>\n  @if (loading()) {\n    <span class=\"spinner\" aria-hidden=\"true\"></span>\n  } @else {\n    <ng-content></ng-content>\n  }\n</primitive-button>\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"triggerOrigin\"\n  [cdkConnectedOverlayOpen]=\"isMenuOpen()\"\n  [cdkConnectedOverlayPositions]=\"overlayPositions\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  [cdkConnectedOverlayBackdropClass]=\"'menu-overlay'\"\n  [cdkConnectedOverlayPanelClass]=\"overlayPanelClasses()\"\n  (backdropClick)=\"closeMenu()\"\n  (detach)=\"onOverlayDetach()\"\n>\n  <div\n    class=\"menu-sort-and-group\"\n    role=\"menu\"\n    [attr.id]=\"id() + '-menu'\"\n    [attr.aria-activedescendant]=\"activeDescendantId()\"\n  >\n    @for (item of dropdownItems(); track item.code; let index = $index) {\n      <button\n        #menuItemRef\n        type=\"button\"\n        class=\"menu-item-content\"\n        [class.active]=\"isItemActive(item.code)\"\n        [attr.id]=\"id() + '-option-' + item.code\"\n        [attr.aria-checked]=\"isItemActive(item.code)\"\n        [attr.data-index]=\"index\"\n        role=\"menuitemradio\"\n        (click)=\"setSelectedItem(item.code)\"\n        (keydown)=\"onMenuKeydown($event, index)\"\n        (mouseenter)=\"onMenuMouseEnter(index)\"\n      >\n        @if (item.startIcon) {\n          <fa-icon\n            [icon]=\"item.startIcon\"\n            [style.color]=\"item.iconColor || null\">\n          </fa-icon>\n        }\n        <span>{{ item.label }}</span>\n        @if (isItemActive(item.code) && item.endIcon) {\n          <fa-icon\n            [icon]=\"item.endIcon\"\n            [style.color]=\"item.iconColor || null\">\n          </fa-icon>\n        }\n      </button>\n    }\n  </div>\n</ng-template>\n", styles: [":host{display:inline-flex}.menu-sort-and-group{background:var(--dropdown-bg);border:1px solid var(--dropdown-border-color);border-radius:var(--dropdown-radius);box-shadow:var(--dropdown-shadow);padding:var(--dropdown-padding);min-width:var(--dropdown-min-width)}.menu-item-content{display:flex;align-items:center;width:100%;gap:var(--dropdown-gap);padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);border-radius:var(--dropdown-item-radius);border:none;cursor:pointer;color:var(--dropdown-item-color);background:transparent;transition:background-color var(--duration-fast) var(--easing-default),color var(--duration-fast) var(--easing-default)}.menu-item-content fa-icon{flex-shrink:0}.menu-item-content span{flex:1;text-align:left}.menu-item-content.active{background:var(--dropdown-item-active-bg);color:var(--dropdown-item-active-color);font-weight:var(--font-weight-semibold)}.menu-item-content:not(.active):hover{background:var(--dropdown-item-hover-bg);color:var(--dropdown-item-hover-color)}.menu-item-content:focus-visible{outline:2px solid var(--focus-color);outline-offset:2px}.menu-item-content:active{opacity:.9}.menu-overlay{background:var(--dropdown-backdrop)}.spinner{border:2px solid var(--spinner-border);border-top-color:var(--spinner-border-active);border-radius:50%;width:1em;height:1em;animation:spin .6s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: PrimitiveButton, selector: "primitive-button", inputs: ["type", "variant", "size", "disabled", "iconStart", "iconEnd", "appearance", "block"], outputs: ["clicked"] }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }] });
+        ], viewQueries: [{ propertyName: "triggerButton", first: true, predicate: ["triggerButton"], descendants: true, read: ElementRef }, { propertyName: "menuItems", predicate: ["menuItemRef"], descendants: true }], ngImport: i0, template: "<primitive-button\n  #triggerOrigin=\"cdkOverlayOrigin\"\n  #triggerButton\n  cdkOverlayOrigin\n  [attr.id]=\"id()\"\n  [type]=\"buttonType()\"\n  [variant]=\"type()\"\n  [appearance]=\"variant()\"\n  [size]=\"size()\"\n  [block]=\"block()\"\n  [disabled]=\"isDisabled()\"\n  [iconStart]=\"effectiveStartIcon()\"\n  [iconEnd]=\"effectiveEndIcon()\"\n  [attr.aria-haspopup]=\"'menu'\"\n  [attr.aria-expanded]=\"isMenuOpen()\"\n  [attr.aria-controls]=\"isMenuOpen() ? id() + '-menu' : null\"\n  [attr.aria-label]=\"ariaLabel() ?? null\"\n  [attr.aria-labelledby]=\"ariaLabelledBy() ?? null\"\n  (clicked)=\"toggleMenu()\"\n  (keydown)=\"onTriggerKeydown($event)\"\n>\n  @if (loading()) {\n    <span class=\"spinner\" aria-hidden=\"true\"></span>\n  } @else {\n    <ng-content></ng-content>\n  }\n</primitive-button>\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"triggerOrigin\"\n  [cdkConnectedOverlayOpen]=\"isMenuOpen()\"\n  [cdkConnectedOverlayPositions]=\"overlayPositions\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  [cdkConnectedOverlayBackdropClass]=\"'menu-overlay'\"\n  [cdkConnectedOverlayPanelClass]=\"overlayPanelClasses()\"\n  (backdropClick)=\"closeMenu()\"\n  (detach)=\"onOverlayDetach()\"\n>\n  <div\n    class=\"menu-sort-and-group\"\n    role=\"menu\"\n    [attr.id]=\"id() + '-menu'\"\n    [attr.aria-activedescendant]=\"activeDescendantId()\"\n  >\n    @for (item of dropdownItems(); track item.code; let index = $index) {\n      <button\n        #menuItemRef\n        type=\"button\"\n        class=\"menu-item-content\"\n        [class.active]=\"isItemActive(item.code)\"\n        [attr.id]=\"id() + '-option-' + item.code\"\n        [attr.aria-checked]=\"isItemActive(item.code)\"\n        [attr.data-index]=\"index\"\n        role=\"menuitemradio\"\n        (click)=\"setSelectedItem(item.code)\"\n        (keydown)=\"onMenuKeydown($event, index)\"\n        (mouseenter)=\"onMenuMouseEnter(index)\"\n      >\n        @if (item.startIcon) {\n          <fa-icon\n            [icon]=\"item.startIcon\"\n            [style.color]=\"item.iconColor || null\">\n          </fa-icon>\n        }\n        <span>{{ item.label }}</span>\n        @if (isItemActive(item.code) && item.endIcon) {\n          <fa-icon\n            [icon]=\"item.endIcon\"\n            [style.color]=\"item.iconColor || null\">\n          </fa-icon>\n        }\n      </button>\n    }\n  </div>\n</ng-template>\n", styles: [":host{display:inline-flex}.menu-sort-and-group{background:var(--dropdown-bg);border:1px solid var(--dropdown-border-color);border-radius:var(--dropdown-radius);box-shadow:var(--dropdown-shadow);padding:var(--dropdown-padding);min-width:var(--dropdown-min-width)}.menu-item-content{display:flex;align-items:center;width:100%;gap:var(--dropdown-gap);padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);border-radius:var(--dropdown-item-radius);border:none;cursor:pointer;color:var(--dropdown-item-color);background:transparent;transition:background-color var(--duration-fast) var(--easing-default),color var(--duration-fast) var(--easing-default)}.menu-item-content fa-icon{flex-shrink:0}.menu-item-content span{flex:1;text-align:left}.menu-item-content.active{background:var(--dropdown-item-active-bg);color:var(--dropdown-item-active-color);font-weight:var(--font-weight-semibold)}.menu-item-content:not(.active):hover{background:var(--dropdown-item-hover-bg);color:var(--dropdown-item-hover-color)}.menu-item-content:focus-visible{outline:2px solid var(--focus-color);outline-offset:2px}.menu-item-content:active{opacity:.9}.menu-overlay{background:var(--dropdown-backdrop)}.spinner{border:2px solid var(--spinner-border);border-top-color:var(--spinner-border-active);border-radius:50%;width:1em;height:1em;animation:spin .6s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: PrimitiveButton, selector: "primitive-button", inputs: ["type", "variant", "size", "disabled", "iconStart", "iconEnd", "appearance", "block"], outputs: ["clicked"] }, { 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: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsDropdown, decorators: [{
             type: Component,
@@ -3427,7 +3427,7 @@ class DsInputField {
                 useExisting: forwardRef(() => DsInputField),
                 multi: true,
             },
-        ], ngImport: i0, template: "<div\n  class=\"ds-input-field\"\n  [ngClass]=\"[\n    variant(),\n    inputState(),\n    isDisabled() ? 'is-disabled' : '',\n    readonly() ? 'is-readonly' : ''\n  ]\">\n  @if (label()) {\n    <label [for]=\"id()\" [attr.data-state]=\"inputState()\">\n      {{ label() }}\n      @if (required()) {\n        <span class=\"required\">*</span>\n      }\n    </label>\n  }\n\n  <div class=\"input-container\">\n    <primitive-input\n      [id]=\"id()\"\n      [name]=\"name()\"\n      [autocomplete]=\"autocomplete()\"\n      [ariaLabel]=\"ariaLabel()\"\n      [ariaDescribedBy]=\"ariaDescribedBy()\"\n      [maxlength]=\"maxlength()\"\n      [placeholder]=\"placeholder()\"\n      [type]=\"actualType()\"\n      [disabled]=\"isDisabled()\"\n      [readonly]=\"readonly()\"\n      [required]=\"required()\"\n      [state]=\"inputState()\"\n      [size]=\"size()\"\n      [appearance]=\"variant()\"\n      [iconStart]=\"iconStart()\"\n      [iconEnd]=\"iconEnd()\"\n      [value]=\"internalValue()\"\n      (valueChange)=\"onPrimitiveValueChange($event)\"\n      (inputBlurred)=\"onInputBlur()\"\n    >\n    </primitive-input>\n\n    @if (showClearButton()) {\n      <button\n        type=\"button\"\n        class=\"icon-btn clear\"\n        (click)=\"clearValue()\"\n        aria-label=\"Clear input\">\n        <fa-icon [icon]=\"faClose\" />\n      </button>\n    }\n\n    @if (showTogglePassword()) {\n      <button\n        type=\"button\"\n        class=\"icon-btn toggle\"\n        (click)=\"togglePasswordVisibility()\"\n        [attr.aria-label]=\"passwordVisible() ? 'Hide password' : 'Show password'\">\n        <fa-icon [icon]=\"passwordVisible() ? faEyeSlash : faEye\" />\n      </button>\n    }\n  </div>\n\n  @if (error()) {\n    <p class=\"error\" [id]=\"errorId()\" role=\"alert\">\n      {{ error() }}\n    </p>\n  }\n\n  @if (!error() && helper()) {\n    <p class=\"helper\" [id]=\"helperId()\">\n      {{ helper() }}\n    </p>\n  }\n\n  @if (maxlength()) {\n    <p class=\"counter\" [id]=\"counterId()\">\n      {{ characterCount() }}/{{ maxlength() }}\n    </p>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%}.ds-input-field{display:flex;flex-direction:column;gap:var(--space-1);width:100%}.ds-input-field.error label{color:var(--input-error-border, var(--error))}.ds-input-field.success label{color:var(--input-success-border, var(--success))}.ds-input-field.warning label{color:var(--input-warning-border, var(--warning))}.ds-input-field.is-disabled label,.ds-input-field.is-readonly label{color:var(--text-muted)}label{display:block;font-weight:var(--font-weight-medium);font-size:var(--input-label-font-size, var(--font-size-2));color:var(--input-label-color, var(--text-default));margin-bottom:var(--space-1)}label .required{color:var(--input-error-border, var(--error));margin-left:var(--space-1)}.input-container{position:relative;display:flex;align-items:center;width:100%}.input-container primitive-input{flex:1}.icon-btn{position:absolute;right:var(--space-2);display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:none;background:transparent;color:var(--input-icon, var(--text-muted));cursor:pointer;border-radius:var(--radius-1);transition:all var(--duration-fast) var(--easing-default)}.icon-btn:hover{background:var(--surface-hover);color:var(--text-default)}.icon-btn:active{transform:scale(.95)}.icon-btn fa-icon{font-size:var(--icon-size-md)}.ds-input-field.is-disabled .icon-btn,.ds-input-field.is-readonly .icon-btn{cursor:not-allowed;opacity:.4;pointer-events:none}.icon-btn.clear{right:calc(var(--space-2) + 40px)}.icon-btn.toggle{right:var(--space-2)}.helper{font-size:var(--font-size-1);color:var(--text-muted);margin:0}.ds-input-field.success .helper{color:var(--input-success-border, var(--success))}.ds-input-field.warning .helper{color:var(--input-warning-border, var(--warning))}.error{font-size:var(--font-size-1);color:var(--input-error-border, var(--error));margin:0}.counter{font-size:var(--font-size-1);color:var(--text-muted);text-align:right;margin:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }, { kind: "component", type: PrimitiveInput, selector: "primitive-input", inputs: ["id", "name", "autocomplete", "placeholder", "type", "disabled", "readonly", "required", "maxlength", "state", "size", "appearance", "iconStart", "iconEnd", "ariaLabel", "ariaDescribedBy", "value"], outputs: ["valueChange", "inputChanged", "inputBlurred", "inputFocused"] }] });
+        ], ngImport: i0, template: "<div\n  class=\"ds-input-field\"\n  [ngClass]=\"[\n    variant(),\n    inputState(),\n    isDisabled() ? 'is-disabled' : '',\n    readonly() ? 'is-readonly' : ''\n  ]\">\n  @if (label()) {\n    <label [for]=\"id()\" [attr.data-state]=\"inputState()\">\n      {{ label() }}\n      @if (required()) {\n        <span class=\"required\">*</span>\n      }\n    </label>\n  }\n\n  <div class=\"input-container\">\n    <primitive-input\n      [id]=\"id()\"\n      [name]=\"name()\"\n      [autocomplete]=\"autocomplete()\"\n      [ariaLabel]=\"ariaLabel()\"\n      [ariaDescribedBy]=\"ariaDescribedBy()\"\n      [maxlength]=\"maxlength()\"\n      [placeholder]=\"placeholder()\"\n      [type]=\"actualType()\"\n      [disabled]=\"isDisabled()\"\n      [readonly]=\"readonly()\"\n      [required]=\"required()\"\n      [state]=\"inputState()\"\n      [size]=\"size()\"\n      [appearance]=\"variant()\"\n      [iconStart]=\"iconStart()\"\n      [iconEnd]=\"iconEnd()\"\n      [value]=\"internalValue()\"\n      (valueChange)=\"onPrimitiveValueChange($event)\"\n      (inputBlurred)=\"onInputBlur()\"\n    >\n    </primitive-input>\n\n    @if (showClearButton()) {\n      <button\n        type=\"button\"\n        class=\"icon-btn clear\"\n        (click)=\"clearValue()\"\n        aria-label=\"Clear input\">\n        <fa-icon [icon]=\"faClose\" />\n      </button>\n    }\n\n    @if (showTogglePassword()) {\n      <button\n        type=\"button\"\n        class=\"icon-btn toggle\"\n        (click)=\"togglePasswordVisibility()\"\n        [attr.aria-label]=\"passwordVisible() ? 'Hide password' : 'Show password'\">\n        <fa-icon [icon]=\"passwordVisible() ? faEyeSlash : faEye\" />\n      </button>\n    }\n  </div>\n\n  @if (error()) {\n    <p class=\"error\" [id]=\"errorId()\" role=\"alert\">\n      {{ error() }}\n    </p>\n  }\n\n  @if (!error() && helper()) {\n    <p class=\"helper\" [id]=\"helperId()\">\n      {{ helper() }}\n    </p>\n  }\n\n  @if (maxlength()) {\n    <p class=\"counter\" [id]=\"counterId()\">\n      {{ characterCount() }}/{{ maxlength() }}\n    </p>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%}.ds-input-field{display:flex;flex-direction:column;gap:var(--space-1);width:100%}.ds-input-field.error label{color:var(--input-error-border, var(--error))}.ds-input-field.success label{color:var(--input-success-border, var(--success))}.ds-input-field.warning label{color:var(--input-warning-border, var(--warning))}.ds-input-field.is-disabled label,.ds-input-field.is-readonly label{color:var(--text-muted)}label{display:block;font-weight:var(--font-weight-medium);font-size:var(--input-label-font-size, var(--font-size-2));color:var(--input-label-color, var(--text-default));margin-bottom:var(--space-1)}label .required{color:var(--input-error-border, var(--error));margin-left:var(--space-1)}.input-container{position:relative;display:flex;align-items:center;width:100%}.input-container primitive-input{flex:1}.icon-btn{position:absolute;right:var(--space-2);display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:none;background:transparent;color:var(--input-icon, var(--text-muted));cursor:pointer;border-radius:var(--radius-1);transition:all var(--duration-fast) var(--easing-default)}.icon-btn:hover{background:var(--surface-hover);color:var(--text-default)}.icon-btn:active{transform:scale(.95)}.icon-btn fa-icon{font-size:var(--icon-size-md)}.ds-input-field.is-disabled .icon-btn,.ds-input-field.is-readonly .icon-btn{cursor:not-allowed;opacity:.4;pointer-events:none}.icon-btn.clear{right:calc(var(--space-2) + 40px)}.icon-btn.toggle{right:var(--space-2)}.helper{font-size:var(--font-size-1);color:var(--text-muted);margin:0}.ds-input-field.success .helper{color:var(--input-success-border, var(--success))}.ds-input-field.warning .helper{color:var(--input-warning-border, var(--warning))}.error{font-size:var(--font-size-1);color:var(--input-error-border, var(--error));margin:0}.counter{font-size:var(--font-size-1);color:var(--text-muted);text-align:right;margin:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { 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: PrimitiveInput, selector: "primitive-input", inputs: ["id", "name", "autocomplete", "placeholder", "type", "disabled", "readonly", "required", "maxlength", "state", "size", "appearance", "iconStart", "iconEnd", "ariaLabel", "ariaDescribedBy", "value"], outputs: ["valueChange", "inputChanged", "inputBlurred", "inputFocused"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsInputField, decorators: [{
             type: Component,
@@ -3612,7 +3612,7 @@ class DsInputTextarea {
                 useExisting: forwardRef(() => DsInputTextarea),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "textareaHost", first: true, predicate: ["textareaHost"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div\n  class=\"ds-input-textarea\"\n  [ngClass]=\"[\n    variant(),\n    inputState(),\n    isDisabled() ? 'is-disabled' : '',\n    readonly() ? 'is-readonly' : ''\n  ]\">\n  @if (label()) {\n    <label [for]=\"id()\" [attr.data-state]=\"inputState()\">\n      {{ label() }}\n      @if (required()) {\n        <span class=\"required\">*</span>\n      }\n    </label>\n  }\n\n  <div class=\"textarea-container\">\n    <primitive-textarea\n      #textareaHost\n      [id]=\"id()\"\n      [name]=\"name()\"\n      [placeholder]=\"placeholder()\"\n      [rows]=\"rows()\"\n      [cols]=\"cols()\"\n      [maxlength]=\"maxlength()\"\n      [resize]=\"textareaResize()\"\n      [state]=\"inputState()\"\n      [size]=\"size()\"\n      [appearance]=\"variant()\"\n      [iconStart]=\"iconStart()\"\n      [iconEnd]=\"iconEnd()\"\n      [disabled]=\"isDisabled()\"\n      [readonly]=\"readonly()\"\n      [required]=\"required()\"\n      [ariaLabel]=\"ariaLabel()\"\n      [value]=\"internalValue()\"\n      [ariaDescribedBy]=\"ariaDescribedBy()\"\n      (valueChange)=\"onPrimitiveValueChange($event)\"\n      (inputBlurred)=\"onInputBlur()\"\n    >\n    </primitive-textarea>\n\n    @if (showClearButton()) {\n      <button\n        type=\"button\"\n        class=\"icon-btn clear\"\n        (click)=\"clearValue()\"\n        aria-label=\"Clear textarea\">\n        <fa-icon [icon]=\"faClose\" />\n      </button>\n    }\n  </div>\n\n  @if (error()) {\n    <p class=\"error\" [id]=\"arErrorId()\" role=\"alert\">{{ error() }}</p>\n  }\n\n  @if (!error() && helper()) {\n    <p class=\"helper\" [id]=\"arHelperId()\">{{ helper() }}</p>\n  }\n\n  @if (maxlength()) {\n    <p class=\"counter\" [id]=\"arCounterId()\">\n      {{ characterCount() }}/{{ maxlength() }}\n    </p>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%}.ds-input-textarea{display:flex;flex-direction:column;gap:var(--space-1);width:100%}.ds-input-textarea.error label{color:var(--input-error-border, var(--error))}.ds-input-textarea.success label{color:var(--input-success-border, var(--success))}.ds-input-textarea.warning label{color:var(--input-warning-border, var(--warning))}.ds-input-textarea.is-disabled label,.ds-input-textarea.is-readonly label{color:var(--text-muted)}label{display:block;font-weight:var(--font-weight-medium);font-size:var(--input-label-font-size, var(--font-size-2));color:var(--input-label-color, var(--text-default));margin-bottom:var(--space-1)}label .required{color:var(--input-error-border, var(--error));margin-left:var(--space-1)}.textarea-container{position:relative;display:flex;width:100%}.textarea-container primitive-textarea{flex:1}.icon-btn{position:absolute;top:var(--space-2);right:var(--space-2);display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:none;background:transparent;color:var(--input-icon, var(--text-muted));cursor:pointer;border-radius:var(--radius-1);transition:all var(--duration-fast) var(--easing-default)}.icon-btn:hover{background:var(--surface-hover);color:var(--text-default)}.icon-btn:active{transform:scale(.95)}.icon-btn fa-icon{font-size:var(--icon-size-md)}.ds-input-textarea.is-disabled .icon-btn,.ds-input-textarea.is-readonly .icon-btn{cursor:not-allowed;opacity:.4;pointer-events:none}.helper{font-size:var(--font-size-1);color:var(--text-muted);margin:0}.ds-input-textarea.success .helper{color:var(--input-success-border, var(--success))}.ds-input-textarea.warning .helper{color:var(--input-warning-border, var(--warning))}.error{font-size:var(--font-size-1);color:var(--input-error-border, var(--error));margin:0}.counter{font-size:var(--font-size-1);color:var(--text-muted);text-align:right;margin:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PrimitiveTextarea, selector: "primitive-textarea", inputs: ["id", "name", "placeholder", "disabled", "readonly", "required", "state", "size", "appearance", "resize", "rows", "cols", "maxlength", "iconStart", "iconEnd", "ariaLabel", "ariaDescribedBy", "value"], outputs: ["valueChange", "inputChanged", "inputBlurred", "inputFocused"] }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }] });
+        ], viewQueries: [{ propertyName: "textareaHost", first: true, predicate: ["textareaHost"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div\n  class=\"ds-input-textarea\"\n  [ngClass]=\"[\n    variant(),\n    inputState(),\n    isDisabled() ? 'is-disabled' : '',\n    readonly() ? 'is-readonly' : ''\n  ]\">\n  @if (label()) {\n    <label [for]=\"id()\" [attr.data-state]=\"inputState()\">\n      {{ label() }}\n      @if (required()) {\n        <span class=\"required\">*</span>\n      }\n    </label>\n  }\n\n  <div class=\"textarea-container\">\n    <primitive-textarea\n      #textareaHost\n      [id]=\"id()\"\n      [name]=\"name()\"\n      [placeholder]=\"placeholder()\"\n      [rows]=\"rows()\"\n      [cols]=\"cols()\"\n      [maxlength]=\"maxlength()\"\n      [resize]=\"textareaResize()\"\n      [state]=\"inputState()\"\n      [size]=\"size()\"\n      [appearance]=\"variant()\"\n      [iconStart]=\"iconStart()\"\n      [iconEnd]=\"iconEnd()\"\n      [disabled]=\"isDisabled()\"\n      [readonly]=\"readonly()\"\n      [required]=\"required()\"\n      [ariaLabel]=\"ariaLabel()\"\n      [value]=\"internalValue()\"\n      [ariaDescribedBy]=\"ariaDescribedBy()\"\n      (valueChange)=\"onPrimitiveValueChange($event)\"\n      (inputBlurred)=\"onInputBlur()\"\n    >\n    </primitive-textarea>\n\n    @if (showClearButton()) {\n      <button\n        type=\"button\"\n        class=\"icon-btn clear\"\n        (click)=\"clearValue()\"\n        aria-label=\"Clear textarea\">\n        <fa-icon [icon]=\"faClose\" />\n      </button>\n    }\n  </div>\n\n  @if (error()) {\n    <p class=\"error\" [id]=\"arErrorId()\" role=\"alert\">{{ error() }}</p>\n  }\n\n  @if (!error() && helper()) {\n    <p class=\"helper\" [id]=\"arHelperId()\">{{ helper() }}</p>\n  }\n\n  @if (maxlength()) {\n    <p class=\"counter\" [id]=\"arCounterId()\">\n      {{ characterCount() }}/{{ maxlength() }}\n    </p>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%}.ds-input-textarea{display:flex;flex-direction:column;gap:var(--space-1);width:100%}.ds-input-textarea.error label{color:var(--input-error-border, var(--error))}.ds-input-textarea.success label{color:var(--input-success-border, var(--success))}.ds-input-textarea.warning label{color:var(--input-warning-border, var(--warning))}.ds-input-textarea.is-disabled label,.ds-input-textarea.is-readonly label{color:var(--text-muted)}label{display:block;font-weight:var(--font-weight-medium);font-size:var(--input-label-font-size, var(--font-size-2));color:var(--input-label-color, var(--text-default));margin-bottom:var(--space-1)}label .required{color:var(--input-error-border, var(--error));margin-left:var(--space-1)}.textarea-container{position:relative;display:flex;width:100%}.textarea-container primitive-textarea{flex:1}.icon-btn{position:absolute;top:var(--space-2);right:var(--space-2);display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:none;background:transparent;color:var(--input-icon, var(--text-muted));cursor:pointer;border-radius:var(--radius-1);transition:all var(--duration-fast) var(--easing-default)}.icon-btn:hover{background:var(--surface-hover);color:var(--text-default)}.icon-btn:active{transform:scale(.95)}.icon-btn fa-icon{font-size:var(--icon-size-md)}.ds-input-textarea.is-disabled .icon-btn,.ds-input-textarea.is-readonly .icon-btn{cursor:not-allowed;opacity:.4;pointer-events:none}.helper{font-size:var(--font-size-1);color:var(--text-muted);margin:0}.ds-input-textarea.success .helper{color:var(--input-success-border, var(--success))}.ds-input-textarea.warning .helper{color:var(--input-warning-border, var(--warning))}.error{font-size:var(--font-size-1);color:var(--input-error-border, var(--error));margin:0}.counter{font-size:var(--font-size-1);color:var(--text-muted);text-align:right;margin:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PrimitiveTextarea, selector: "primitive-textarea", inputs: ["id", "name", "placeholder", "disabled", "readonly", "required", "state", "size", "appearance", "resize", "rows", "cols", "maxlength", "iconStart", "iconEnd", "ariaLabel", "ariaDescribedBy", "value"], outputs: ["valueChange", "inputChanged", "inputBlurred", "inputFocused"] }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsInputTextarea, decorators: [{
             type: Component,
@@ -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"] }, { 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: 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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsModalComponent, decorators: [{
             type: Component,
@@ -3942,7 +3942,7 @@ class DsPopover {
     ngOnDestroy() {
         this.close();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsPopover, deps: [{ token: i0.ElementRef }, { token: i1$2.Overlay }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsPopover, deps: [{ token: i0.ElementRef }, { token: i1$3.Overlay }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.15", type: DsPopover, isStandalone: true, selector: "[dsPopover]", inputs: { dsPopover: { classPropertyName: "dsPopover", publicName: "dsPopover", isSignal: true, isRequired: true, transformFunction: null }, dsPopoverTrigger: { classPropertyName: "dsPopoverTrigger", publicName: "dsPopoverTrigger", isSignal: true, isRequired: false, transformFunction: null }, dsPopoverCloseOnBackdrop: { classPropertyName: "dsPopoverCloseOnBackdrop", publicName: "dsPopoverCloseOnBackdrop", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick($event)", "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "document:keydown.escape": "onEscape()" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsPopover, decorators: [{
@@ -3951,7 +3951,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                     selector: '[dsPopover]',
                     standalone: true,
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$2.Overlay }, { type: i0.ViewContainerRef }], propDecorators: { dsPopover: [{ type: i0.Input, args: [{ isSignal: true, alias: "dsPopover", required: true }] }], dsPopoverTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "dsPopoverTrigger", required: false }] }], dsPopoverCloseOnBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "dsPopoverCloseOnBackdrop", required: false }] }], onClick: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$3.Overlay }, { type: i0.ViewContainerRef }], propDecorators: { dsPopover: [{ type: i0.Input, args: [{ isSignal: true, alias: "dsPopover", required: true }] }], dsPopoverTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "dsPopoverTrigger", required: false }] }], dsPopoverCloseOnBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "dsPopoverCloseOnBackdrop", required: false }] }], onClick: [{
                 type: HostListener,
                 args: ['click', ['$event']]
             }], onMouseEnter: [{
@@ -4478,7 +4478,7 @@ class DsToastComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DsToastComponent, isStandalone: true, selector: "ds-toast", inputs: { message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, duration: { classPropertyName: "duration", publicName: "duration", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, actionLabel: { classPropertyName: "actionLabel", publicName: "actionLabel", isSignal: true, isRequired: false, transformFunction: null }, pauseOnHover: { classPropertyName: "pauseOnHover", publicName: "pauseOnHover", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", action: "action" }, ngImport: i0, template: "<div class=\"toast\" [ngClass]=\"[type(), position()]\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\">\n  <fa-icon class=\"icon\" [icon]=\"currentIcon()\"></fa-icon>\n  <span class=\"message\">{{ message() }}</span>\n\n  @if (actionLabel()) {\n    <button class=\"action-btn\" type=\"button\" (click)=\"handleAction()\">\n      {{ actionLabel() }}\n    </button>\n  }\n\n  @if (closable()) {\n    <button class=\"close-btn\" (click)=\"close()\" aria-label=\"Close toast\">\n      <fa-icon [icon]=\"faClose\" />\n    </button>\n  }\n</div>\n", styles: [".toast{display:flex;align-items:flex-start;gap:var(--toast-gap);padding:var(--toast-padding);border-radius:var(--toast-radius-base);color:var(--toast-text);border:var(--toast-border-width) solid var(--toast-border);box-shadow:var(--toast-shadow-depth);background:var(--toast-bg, var(--background-secondary));animation:fadeInUp .3s var(--easing-default);min-width:260px}.toast.success{background:var(--toast-success-bg);color:var(--toast-success-text);border-left:4px solid var(--toast-success-border)}.toast.warning{background:var(--toast-warning-bg);color:var(--toast-warning-text);border-left:4px solid var(--toast-warning-border)}.toast.error{background:var(--toast-error-bg);color:var(--toast-error-text);border-left:4px solid var(--toast-error-border)}.toast.info{background:var(--toast-info-bg);color:var(--toast-info-text);border-left:4px solid var(--toast-info-border)}.toast .icon{font-size:var(--toast-icon-size)}.toast .message{flex:1;font-size:var(--font-size-2);line-height:var(--line-height-normal);margin:0}.toast .action-btn{background:transparent;border:none;color:var(--color-primary);font-weight:var(--font-weight-semibold);cursor:pointer;padding:0;margin-left:var(--space-2);text-decoration:underline}.toast .action-btn:hover{opacity:.85}.toast .close-btn{background:none;border:none;cursor:pointer;font-size:var(--icon-size-sm);margin-left:auto;color:var(--text-muted);transition:color var(--duration-fast) var(--easing-default)}.toast .close-btn:hover{color:var(--text-default)}@keyframes fadeInUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DsToastComponent, isStandalone: true, selector: "ds-toast", inputs: { message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, duration: { classPropertyName: "duration", publicName: "duration", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, actionLabel: { classPropertyName: "actionLabel", publicName: "actionLabel", isSignal: true, isRequired: false, transformFunction: null }, pauseOnHover: { classPropertyName: "pauseOnHover", publicName: "pauseOnHover", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", action: "action" }, ngImport: i0, template: "<div class=\"toast\" [ngClass]=\"[type(), position()]\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\">\n  <fa-icon class=\"icon\" [icon]=\"currentIcon()\"></fa-icon>\n  <span class=\"message\">{{ message() }}</span>\n\n  @if (actionLabel()) {\n    <button class=\"action-btn\" type=\"button\" (click)=\"handleAction()\">\n      {{ actionLabel() }}\n    </button>\n  }\n\n  @if (closable()) {\n    <button class=\"close-btn\" (click)=\"close()\" aria-label=\"Close toast\">\n      <fa-icon [icon]=\"faClose\" />\n    </button>\n  }\n</div>\n", styles: [".toast{display:flex;align-items:flex-start;gap:var(--toast-gap);padding:var(--toast-padding);border-radius:var(--toast-radius-base);color:var(--toast-text);border:var(--toast-border-width) solid var(--toast-border);box-shadow:var(--toast-shadow-depth);background:var(--toast-bg, var(--background-secondary));animation:fadeInUp .3s var(--easing-default);min-width:260px}.toast.success{background:var(--toast-success-bg);color:var(--toast-success-text);border-left:4px solid var(--toast-success-border)}.toast.warning{background:var(--toast-warning-bg);color:var(--toast-warning-text);border-left:4px solid var(--toast-warning-border)}.toast.error{background:var(--toast-error-bg);color:var(--toast-error-text);border-left:4px solid var(--toast-error-border)}.toast.info{background:var(--toast-info-bg);color:var(--toast-info-text);border-left:4px solid var(--toast-info-border)}.toast .icon{font-size:var(--toast-icon-size)}.toast .message{flex:1;font-size:var(--font-size-2);line-height:var(--line-height-normal);margin:0}.toast .action-btn{background:transparent;border:none;color:var(--color-primary);font-weight:var(--font-weight-semibold);cursor:pointer;padding:0;margin-left:var(--space-2);text-decoration:underline}.toast .action-btn:hover{opacity:.85}.toast .close-btn{background:none;border:none;cursor:pointer;font-size:var(--icon-size-sm);margin-left:auto;color:var(--text-muted);transition:color var(--duration-fast) var(--easing-default)}.toast .close-btn:hover{color:var(--text-default)}@keyframes fadeInUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsToastComponent, decorators: [{
             type: Component,
@@ -4812,7 +4812,7 @@ class DsTooltip {
         this.clearHideTimeout();
         this.hide();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsTooltip, deps: [{ token: i0.ElementRef }, { token: i1$2.Overlay }, { token: i0.ViewContainerRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsTooltip, deps: [{ token: i0.ElementRef }, { token: i1$3.Overlay }, { token: i0.ViewContainerRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.15", type: DsTooltip, isStandalone: true, selector: "[dsTooltip]", inputs: { dsTooltip: { classPropertyName: "dsTooltip", publicName: "dsTooltip", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "focus": "onFocus()", "blur": "onBlur()" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsTooltip, decorators: [{
@@ -4821,7 +4821,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                     selector: '[dsTooltip]',
                     standalone: true,
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$2.Overlay }, { type: i0.ViewContainerRef }, { type: i0.Injector }], propDecorators: { dsTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "dsTooltip", required: true }] }], onMouseEnter: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$3.Overlay }, { type: i0.ViewContainerRef }, { type: i0.Injector }], propDecorators: { dsTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "dsTooltip", required: true }] }], onMouseEnter: [{
                 type: HostListener,
                 args: ['mouseenter']
             }], onMouseLeave: [{
@@ -5034,7 +5034,7 @@ class DsAccordion {
         return `accordion-content-${item.id}`;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsAccordion, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DsAccordion, isStandalone: true, selector: "ds-accordion", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, expandedIds: { classPropertyName: "expandedIds", publicName: "expandedIds", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemChange: "itemChange" }, ngImport: i0, template: "<div [ngClass]=\"containerClasses()\">\n  @for (item of items(); track item.id; let i = $index) {\n    <div [ngClass]=\"getItemClasses(item)\">\n      <!-- Header -->\n      <button\n        type=\"button\"\n        class=\"ds-accordion__header\"\n        [id]=\"getHeaderId(item)\"\n        [attr.aria-expanded]=\"isExpanded(item.id)\"\n        [attr.aria-controls]=\"getContentId(item)\"\n        [disabled]=\"disabled() || item.disabled\"\n        (click)=\"toggleItem(item)\"\n        (keydown)=\"onKeydown($event, item, i)\">\n        <span class=\"ds-accordion__title\">{{ item.header }}</span>\n        <fa-icon\n          class=\"ds-accordion__icon\"\n          [icon]=\"faChevronDown\"\n          [class.ds-accordion__icon--rotated]=\"isExpanded(item.id)\"\n          aria-hidden=\"true\">\n        </fa-icon>\n      </button>\n\n      <!-- Contenu -->\n      <div\n        class=\"ds-accordion__content\"\n        [id]=\"getContentId(item)\"\n        role=\"region\"\n        [attr.aria-labelledby]=\"getHeaderId(item)\"\n        [attr.aria-hidden]=\"!isExpanded(item.id)\"\n        [class.ds-accordion__content--expanded]=\"isExpanded(item.id)\">\n        <div class=\"ds-accordion__body\">\n          {{ item.content }}\n        </div>\n      </div>\n    </div>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";.ds-accordion{font-family:var(--font-family-base)}.ds-accordion__item--disabled{opacity:.5;pointer-events:none}.ds-accordion__header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--accordion-header-padding-md, var(--space-4));background-color:var(--accordion-header-bg, var(--background-main));border:none;cursor:pointer;text-align:left;font-family:inherit;font-size:var(--accordion-header-font-size-md, var(--font-size-3));font-weight:var(--font-weight-medium);color:var(--accordion-header-text, var(--text-default));transition:background-color var(--duration-fast) ease}.ds-accordion__header:hover:not(:disabled){background-color:var(--accordion-header-hover-bg, var(--surface-hover))}.ds-accordion__header:focus{outline:none;box-shadow:inset 0 0 0 2px var(--accordion-focus-color, var(--color-primary))}.ds-accordion__header:disabled{cursor:not-allowed}.ds-accordion__title{flex:1}.ds-accordion__icon{flex-shrink:0;transition:transform var(--duration-normal) ease;color:var(--accordion-icon-color, var(--text-muted))}.ds-accordion__icon--rotated{transform:rotate(180deg)}.ds-accordion__content{max-height:0;overflow:hidden;transition:max-height var(--duration-normal) ease-out}.ds-accordion__content--expanded{max-height:var(--accordion-content-max-height)}.ds-accordion__body{padding:var(--accordion-body-padding-md, var(--space-4));color:var(--accordion-body-text, var(--text-muted));font-size:var(--accordion-body-font-size-md, var(--font-size-2));line-height:var(--line-height-relaxed)}.ds-accordion--default .ds-accordion__item{border-bottom:var(--accordion-border-width) solid var(--accordion-border-color, var(--border-color))}.ds-accordion--default .ds-accordion__item:last-child{border-bottom:none}.ds-accordion--bordered{border:var(--accordion-border-width) solid var(--accordion-border-color, var(--border-color));border-radius:var(--accordion-radius, var(--radius-2));overflow:hidden}.ds-accordion--bordered .ds-accordion__item{border-bottom:var(--accordion-border-width) solid var(--accordion-border-color, var(--border-color))}.ds-accordion--bordered .ds-accordion__item:last-child{border-bottom:none}.ds-accordion--separated .ds-accordion__item{margin-bottom:var(--accordion-item-gap, var(--space-2));border:var(--accordion-border-width) solid var(--accordion-border-color, var(--border-color));border-radius:var(--accordion-radius, var(--radius-2));overflow:hidden}.ds-accordion--separated .ds-accordion__item:last-child{margin-bottom:0}.ds-accordion--separated .ds-accordion__item--expanded{border-color:var(--accordion-expanded-border-color, var(--color-primary))}.ds-accordion--sm .ds-accordion__header{padding:var(--accordion-header-padding-sm, var(--space-2) var(--space-3));font-size:var(--accordion-header-font-size-sm, var(--font-size-2))}.ds-accordion--sm .ds-accordion__body{padding:var(--accordion-body-padding-sm, var(--space-2) var(--space-3));font-size:var(--accordion-body-font-size-sm, var(--font-size-1))}.ds-accordion--lg .ds-accordion__header{padding:var(--accordion-header-padding-lg, var(--space-5) var(--space-6));font-size:var(--accordion-header-font-size-lg, var(--font-size-4))}.ds-accordion--lg .ds-accordion__body{padding:var(--accordion-body-padding-lg, var(--space-5) var(--space-6));font-size:var(--accordion-body-font-size-lg, var(--font-size-3))}.ds-accordion--disabled{opacity:.5;pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DsAccordion, isStandalone: true, selector: "ds-accordion", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, expandedIds: { classPropertyName: "expandedIds", publicName: "expandedIds", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemChange: "itemChange" }, ngImport: i0, template: "<div [ngClass]=\"containerClasses()\">\n  @for (item of items(); track item.id; let i = $index) {\n    <div [ngClass]=\"getItemClasses(item)\">\n      <!-- Header -->\n      <button\n        type=\"button\"\n        class=\"ds-accordion__header\"\n        [id]=\"getHeaderId(item)\"\n        [attr.aria-expanded]=\"isExpanded(item.id)\"\n        [attr.aria-controls]=\"getContentId(item)\"\n        [disabled]=\"disabled() || item.disabled\"\n        (click)=\"toggleItem(item)\"\n        (keydown)=\"onKeydown($event, item, i)\">\n        <span class=\"ds-accordion__title\">{{ item.header }}</span>\n        <fa-icon\n          class=\"ds-accordion__icon\"\n          [icon]=\"faChevronDown\"\n          [class.ds-accordion__icon--rotated]=\"isExpanded(item.id)\"\n          aria-hidden=\"true\">\n        </fa-icon>\n      </button>\n\n      <!-- Contenu -->\n      <div\n        class=\"ds-accordion__content\"\n        [id]=\"getContentId(item)\"\n        role=\"region\"\n        [attr.aria-labelledby]=\"getHeaderId(item)\"\n        [attr.aria-hidden]=\"!isExpanded(item.id)\"\n        [class.ds-accordion__content--expanded]=\"isExpanded(item.id)\">\n        <div class=\"ds-accordion__body\">\n          {{ item.content }}\n        </div>\n      </div>\n    </div>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";.ds-accordion{font-family:var(--font-family-base)}.ds-accordion__item--disabled{opacity:.5;pointer-events:none}.ds-accordion__header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--accordion-header-padding-md, var(--space-4));background-color:var(--accordion-header-bg, var(--background-main));border:none;cursor:pointer;text-align:left;font-family:inherit;font-size:var(--accordion-header-font-size-md, var(--font-size-3));font-weight:var(--font-weight-medium);color:var(--accordion-header-text, var(--text-default));transition:background-color var(--duration-fast) ease}.ds-accordion__header:hover:not(:disabled){background-color:var(--accordion-header-hover-bg, var(--surface-hover))}.ds-accordion__header:focus{outline:none;box-shadow:inset 0 0 0 2px var(--accordion-focus-color, var(--color-primary))}.ds-accordion__header:disabled{cursor:not-allowed}.ds-accordion__title{flex:1}.ds-accordion__icon{flex-shrink:0;transition:transform var(--duration-normal) ease;color:var(--accordion-icon-color, var(--text-muted))}.ds-accordion__icon--rotated{transform:rotate(180deg)}.ds-accordion__content{max-height:0;overflow:hidden;transition:max-height var(--duration-normal) ease-out}.ds-accordion__content--expanded{max-height:var(--accordion-content-max-height)}.ds-accordion__body{padding:var(--accordion-body-padding-md, var(--space-4));color:var(--accordion-body-text, var(--text-muted));font-size:var(--accordion-body-font-size-md, var(--font-size-2));line-height:var(--line-height-relaxed)}.ds-accordion--default .ds-accordion__item{border-bottom:var(--accordion-border-width) solid var(--accordion-border-color, var(--border-color))}.ds-accordion--default .ds-accordion__item:last-child{border-bottom:none}.ds-accordion--bordered{border:var(--accordion-border-width) solid var(--accordion-border-color, var(--border-color));border-radius:var(--accordion-radius, var(--radius-2));overflow:hidden}.ds-accordion--bordered .ds-accordion__item{border-bottom:var(--accordion-border-width) solid var(--accordion-border-color, var(--border-color))}.ds-accordion--bordered .ds-accordion__item:last-child{border-bottom:none}.ds-accordion--separated .ds-accordion__item{margin-bottom:var(--accordion-item-gap, var(--space-2));border:var(--accordion-border-width) solid var(--accordion-border-color, var(--border-color));border-radius:var(--accordion-radius, var(--radius-2));overflow:hidden}.ds-accordion--separated .ds-accordion__item:last-child{margin-bottom:0}.ds-accordion--separated .ds-accordion__item--expanded{border-color:var(--accordion-expanded-border-color, var(--color-primary))}.ds-accordion--sm .ds-accordion__header{padding:var(--accordion-header-padding-sm, var(--space-2) var(--space-3));font-size:var(--accordion-header-font-size-sm, var(--font-size-2))}.ds-accordion--sm .ds-accordion__body{padding:var(--accordion-body-padding-sm, var(--space-2) var(--space-3));font-size:var(--accordion-body-font-size-sm, var(--font-size-1))}.ds-accordion--lg .ds-accordion__header{padding:var(--accordion-header-padding-lg, var(--space-5) var(--space-6));font-size:var(--accordion-header-font-size-lg, var(--font-size-4))}.ds-accordion--lg .ds-accordion__body{padding:var(--accordion-body-padding-lg, var(--space-5) var(--space-6));font-size:var(--accordion-body-font-size-lg, var(--font-size-3))}.ds-accordion--disabled{opacity:.5;pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i1$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsAccordion, decorators: [{
             type: Component,
@@ -5300,7 +5300,7 @@ class DsPagination {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsPagination, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DsPagination, isStandalone: true, selector: "ds-pagination", inputs: { totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: true, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showFirstLast: { classPropertyName: "showFirstLast", publicName: "showFirstLast", isSignal: true, isRequired: false, transformFunction: null }, showPageSizeSelector: { classPropertyName: "showPageSizeSelector", publicName: "showPageSizeSelector", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, maxVisiblePages: { classPropertyName: "maxVisiblePages", publicName: "maxVisiblePages", isSignal: true, isRequired: false, transformFunction: null }, showInfo: { classPropertyName: "showInfo", publicName: "showInfo", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange", pageSizeChange: "pageSizeChange" }, ngImport: i0, template: "<nav\n  [ngClass]=\"containerClasses()\"\n  [attr.aria-label]=\"ariaLabel()\"\n  role=\"navigation\">\n\n  <!-- Info: X - Y sur Z -->\n  @if (showInfo()) {\n    <span class=\"ds-pagination__info\">\n      {{ startItem() }} - {{ endItem() }} sur {{ totalItems() }}\n    </span>\n  }\n\n  <!-- S\u00E9lecteur de taille de page -->\n  @if (showPageSizeSelector()) {\n    <div class=\"ds-pagination__size-selector\">\n      <label class=\"ds-pagination__size-label\" for=\"page-size\">\n        Par page:\n      </label>\n      <select\n        id=\"page-size\"\n        class=\"ds-pagination__size-select\"\n        [value]=\"pageSize()\"\n        [disabled]=\"disabled()\"\n        (change)=\"onPageSizeChange($event)\">\n        @for (option of pageSizeOptions(); track option) {\n          <option [value]=\"option\">{{ option }}</option>\n        }\n      </select>\n    </div>\n  }\n\n  <!-- Navigation -->\n  <div class=\"ds-pagination__nav\">\n    <!-- Premi\u00E8re page -->\n    @if (showFirstLast()) {\n      <button\n        type=\"button\"\n        class=\"ds-pagination__btn ds-pagination__btn--first\"\n        [disabled]=\"!canGoPrevious()\"\n        [attr.aria-label]=\"'Aller \u00E0 la premi\u00E8re page'\"\n        (click)=\"goToFirst()\">\n        <fa-icon [icon]=\"faAnglesLeft\" aria-hidden=\"true\"></fa-icon>\n      </button>\n    }\n\n    <!-- Page pr\u00E9c\u00E9dente -->\n    <button\n      type=\"button\"\n      class=\"ds-pagination__btn ds-pagination__btn--prev\"\n      [disabled]=\"!canGoPrevious()\"\n      [attr.aria-label]=\"'Aller \u00E0 la page pr\u00E9c\u00E9dente'\"\n      (click)=\"goToPrevious()\">\n      <fa-icon [icon]=\"faChevronLeft\" aria-hidden=\"true\"></fa-icon>\n    </button>\n\n    <!-- Ellipsis d\u00E9but -->\n    @if (showStartEllipsis()) {\n      <span class=\"ds-pagination__ellipsis\" aria-hidden=\"true\">...</span>\n    }\n\n    <!-- Pages -->\n    @for (page of visiblePages(); track page) {\n      <button\n        type=\"button\"\n        class=\"ds-pagination__btn ds-pagination__btn--page\"\n        [class.ds-pagination__btn--active]=\"page === normalizedCurrentPage()\"\n        [disabled]=\"disabled()\"\n        [attr.aria-label]=\"'Page ' + page\"\n        [attr.aria-current]=\"page === normalizedCurrentPage() ? 'page' : null\"\n        (click)=\"goToPage(page)\"\n        (keydown)=\"onPageKeydown($event, page)\">\n        {{ page }}\n      </button>\n    }\n\n    <!-- Ellipsis fin -->\n    @if (showEndEllipsis()) {\n      <span class=\"ds-pagination__ellipsis\" aria-hidden=\"true\">...</span>\n    }\n\n    <!-- Page suivante -->\n    <button\n      type=\"button\"\n      class=\"ds-pagination__btn ds-pagination__btn--next\"\n      [disabled]=\"!canGoNext()\"\n      [attr.aria-label]=\"'Aller \u00E0 la page suivante'\"\n      (click)=\"goToNext()\">\n      <fa-icon [icon]=\"faChevronRight\" aria-hidden=\"true\"></fa-icon>\n    </button>\n\n    <!-- Derni\u00E8re page -->\n    @if (showFirstLast()) {\n      <button\n        type=\"button\"\n        class=\"ds-pagination__btn ds-pagination__btn--last\"\n        [disabled]=\"!canGoNext()\"\n        [attr.aria-label]=\"'Aller \u00E0 la derni\u00E8re page'\"\n        (click)=\"goToLast()\">\n        <fa-icon [icon]=\"faAnglesRight\" aria-hidden=\"true\"></fa-icon>\n      </button>\n    }\n  </div>\n</nav>\n", styles: ["@charset \"UTF-8\";.ds-pagination{display:flex;align-items:center;gap:var(--pagination-gap-md, var(--space-4));font-family:var(--font-family-base)}.ds-pagination__info{color:var(--pagination-info-color, var(--text-muted));font-size:var(--pagination-font-size-md, var(--font-size-2));white-space:nowrap}.ds-pagination__size-selector{display:flex;align-items:center;gap:var(--space-2)}.ds-pagination__size-label{color:var(--pagination-info-color, var(--text-muted));font-size:var(--pagination-font-size-md, var(--font-size-2));white-space:nowrap}.ds-pagination__size-select{padding:var(--pagination-btn-padding-md, var(--space-1)) var(--space-2);border:1px solid var(--pagination-btn-border, var(--border-color));border-radius:var(--pagination-btn-radius, var(--radius-2));background-color:var(--pagination-btn-bg, var(--background-main));color:var(--pagination-btn-text, var(--text-default));font-size:var(--pagination-font-size-md, var(--font-size-2));cursor:pointer;transition:border-color var(--duration-fast) ease,box-shadow var(--duration-fast) ease}.ds-pagination__size-select:hover:not(:disabled){border-color:var(--pagination-btn-hover-border, var(--color-primary))}.ds-pagination__size-select:focus{outline:none;border-color:var(--pagination-btn-focus-border, var(--color-primary));box-shadow:var(--input-focus-shadow)}.ds-pagination__size-select:disabled{opacity:.5;cursor:not-allowed}.ds-pagination__nav{display:flex;align-items:center;gap:var(--pagination-gap-sm, var(--space-1))}.ds-pagination__btn{display:inline-flex;align-items:center;justify-content:center;min-width:var(--pagination-btn-size-md);height:var(--pagination-btn-size-md);padding:var(--pagination-btn-padding-md, var(--space-1)) var(--space-2);border:1px solid var(--pagination-btn-border, var(--border-color));border-radius:var(--pagination-btn-radius, var(--radius-2));background-color:var(--pagination-btn-bg, var(--background-main));color:var(--pagination-btn-text, var(--text-default));font-size:var(--pagination-font-size-md, var(--font-size-2));font-weight:var(--font-weight-medium);cursor:pointer;transition:all var(--duration-fast) ease}.ds-pagination__btn:hover:not(:disabled):not(.ds-pagination__btn--active){background-color:var(--pagination-btn-hover-bg, var(--surface-hover));border-color:var(--pagination-btn-hover-border, var(--color-primary))}.ds-pagination__btn:focus{outline:none;border-color:var(--pagination-btn-focus-border, var(--color-primary));box-shadow:var(--input-focus-shadow)}.ds-pagination__btn:disabled{opacity:.5;cursor:not-allowed}.ds-pagination__btn--active{background-color:var(--pagination-active-bg, var(--color-primary));border-color:var(--pagination-active-bg, var(--color-primary));color:var(--pagination-active-text, var(--gray-50))}.ds-pagination__btn--active:hover{background-color:var(--pagination-active-hover-bg, var(--btn-primary-hover-bg))}.ds-pagination__btn--first,.ds-pagination__btn--last,.ds-pagination__btn--prev,.ds-pagination__btn--next{min-width:var(--pagination-btn-size-md);padding:var(--pagination-btn-padding-md, var(--space-1))}.ds-pagination__ellipsis{display:inline-flex;align-items:center;justify-content:center;min-width:var(--pagination-btn-size-md);height:var(--pagination-btn-size-md);color:var(--pagination-info-color, var(--text-muted));font-size:var(--pagination-font-size-md, var(--font-size-2))}.ds-pagination--sm{gap:var(--pagination-gap-sm, var(--space-2))}.ds-pagination--sm .ds-pagination__info,.ds-pagination--sm .ds-pagination__size-label{font-size:var(--pagination-font-size-sm, var(--font-size-1))}.ds-pagination--sm .ds-pagination__btn{min-width:var(--pagination-btn-size-sm);height:var(--pagination-btn-size-sm);font-size:var(--pagination-font-size-sm, var(--font-size-1));padding:var(--pagination-btn-padding-sm, var(--space-1))}.ds-pagination--sm .ds-pagination__ellipsis{min-width:var(--pagination-btn-size-sm);height:var(--pagination-btn-size-sm);font-size:var(--pagination-font-size-sm, var(--font-size-1))}.ds-pagination--sm .ds-pagination__size-select{font-size:var(--pagination-font-size-sm, var(--font-size-1));padding:var(--pagination-btn-padding-sm, var(--space-1))}.ds-pagination--lg{gap:var(--pagination-gap-lg, var(--space-6))}.ds-pagination--lg .ds-pagination__info,.ds-pagination--lg .ds-pagination__size-label{font-size:var(--pagination-font-size-lg, var(--font-size-3))}.ds-pagination--lg .ds-pagination__btn{min-width:var(--pagination-btn-size-lg);height:var(--pagination-btn-size-lg);font-size:var(--pagination-font-size-lg, var(--font-size-3));padding:var(--pagination-btn-padding-lg, var(--space-2)) var(--space-3)}.ds-pagination--lg .ds-pagination__ellipsis{min-width:var(--pagination-btn-size-lg);height:var(--pagination-btn-size-lg);font-size:var(--pagination-font-size-lg, var(--font-size-3))}.ds-pagination--lg .ds-pagination__size-select{font-size:var(--pagination-font-size-lg, var(--font-size-3));padding:var(--pagination-btn-padding-lg, var(--space-2)) var(--space-3)}.ds-pagination--disabled{opacity:.5;pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DsPagination, isStandalone: true, selector: "ds-pagination", inputs: { totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: true, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showFirstLast: { classPropertyName: "showFirstLast", publicName: "showFirstLast", isSignal: true, isRequired: false, transformFunction: null }, showPageSizeSelector: { classPropertyName: "showPageSizeSelector", publicName: "showPageSizeSelector", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, maxVisiblePages: { classPropertyName: "maxVisiblePages", publicName: "maxVisiblePages", isSignal: true, isRequired: false, transformFunction: null }, showInfo: { classPropertyName: "showInfo", publicName: "showInfo", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange", pageSizeChange: "pageSizeChange" }, ngImport: i0, template: "<nav\n  [ngClass]=\"containerClasses()\"\n  [attr.aria-label]=\"ariaLabel()\"\n  role=\"navigation\">\n\n  <!-- Info: X - Y sur Z -->\n  @if (showInfo()) {\n    <span class=\"ds-pagination__info\">\n      {{ startItem() }} - {{ endItem() }} sur {{ totalItems() }}\n    </span>\n  }\n\n  <!-- S\u00E9lecteur de taille de page -->\n  @if (showPageSizeSelector()) {\n    <div class=\"ds-pagination__size-selector\">\n      <label class=\"ds-pagination__size-label\" for=\"page-size\">\n        Par page:\n      </label>\n      <select\n        id=\"page-size\"\n        class=\"ds-pagination__size-select\"\n        [value]=\"pageSize()\"\n        [disabled]=\"disabled()\"\n        (change)=\"onPageSizeChange($event)\">\n        @for (option of pageSizeOptions(); track option) {\n          <option [value]=\"option\">{{ option }}</option>\n        }\n      </select>\n    </div>\n  }\n\n  <!-- Navigation -->\n  <div class=\"ds-pagination__nav\">\n    <!-- Premi\u00E8re page -->\n    @if (showFirstLast()) {\n      <button\n        type=\"button\"\n        class=\"ds-pagination__btn ds-pagination__btn--first\"\n        [disabled]=\"!canGoPrevious()\"\n        [attr.aria-label]=\"'Aller \u00E0 la premi\u00E8re page'\"\n        (click)=\"goToFirst()\">\n        <fa-icon [icon]=\"faAnglesLeft\" aria-hidden=\"true\"></fa-icon>\n      </button>\n    }\n\n    <!-- Page pr\u00E9c\u00E9dente -->\n    <button\n      type=\"button\"\n      class=\"ds-pagination__btn ds-pagination__btn--prev\"\n      [disabled]=\"!canGoPrevious()\"\n      [attr.aria-label]=\"'Aller \u00E0 la page pr\u00E9c\u00E9dente'\"\n      (click)=\"goToPrevious()\">\n      <fa-icon [icon]=\"faChevronLeft\" aria-hidden=\"true\"></fa-icon>\n    </button>\n\n    <!-- Ellipsis d\u00E9but -->\n    @if (showStartEllipsis()) {\n      <span class=\"ds-pagination__ellipsis\" aria-hidden=\"true\">...</span>\n    }\n\n    <!-- Pages -->\n    @for (page of visiblePages(); track page) {\n      <button\n        type=\"button\"\n        class=\"ds-pagination__btn ds-pagination__btn--page\"\n        [class.ds-pagination__btn--active]=\"page === normalizedCurrentPage()\"\n        [disabled]=\"disabled()\"\n        [attr.aria-label]=\"'Page ' + page\"\n        [attr.aria-current]=\"page === normalizedCurrentPage() ? 'page' : null\"\n        (click)=\"goToPage(page)\"\n        (keydown)=\"onPageKeydown($event, page)\">\n        {{ page }}\n      </button>\n    }\n\n    <!-- Ellipsis fin -->\n    @if (showEndEllipsis()) {\n      <span class=\"ds-pagination__ellipsis\" aria-hidden=\"true\">...</span>\n    }\n\n    <!-- Page suivante -->\n    <button\n      type=\"button\"\n      class=\"ds-pagination__btn ds-pagination__btn--next\"\n      [disabled]=\"!canGoNext()\"\n      [attr.aria-label]=\"'Aller \u00E0 la page suivante'\"\n      (click)=\"goToNext()\">\n      <fa-icon [icon]=\"faChevronRight\" aria-hidden=\"true\"></fa-icon>\n    </button>\n\n    <!-- Derni\u00E8re page -->\n    @if (showFirstLast()) {\n      <button\n        type=\"button\"\n        class=\"ds-pagination__btn ds-pagination__btn--last\"\n        [disabled]=\"!canGoNext()\"\n        [attr.aria-label]=\"'Aller \u00E0 la derni\u00E8re page'\"\n        (click)=\"goToLast()\">\n        <fa-icon [icon]=\"faAnglesRight\" aria-hidden=\"true\"></fa-icon>\n      </button>\n    }\n  </div>\n</nav>\n", styles: ["@charset \"UTF-8\";.ds-pagination{display:flex;align-items:center;gap:var(--pagination-gap-md, var(--space-4));font-family:var(--font-family-base)}.ds-pagination__info{color:var(--pagination-info-color, var(--text-muted));font-size:var(--pagination-font-size-md, var(--font-size-2));white-space:nowrap}.ds-pagination__size-selector{display:flex;align-items:center;gap:var(--space-2)}.ds-pagination__size-label{color:var(--pagination-info-color, var(--text-muted));font-size:var(--pagination-font-size-md, var(--font-size-2));white-space:nowrap}.ds-pagination__size-select{padding:var(--pagination-btn-padding-md, var(--space-1)) var(--space-2);border:1px solid var(--pagination-btn-border, var(--border-color));border-radius:var(--pagination-btn-radius, var(--radius-2));background-color:var(--pagination-btn-bg, var(--background-main));color:var(--pagination-btn-text, var(--text-default));font-size:var(--pagination-font-size-md, var(--font-size-2));cursor:pointer;transition:border-color var(--duration-fast) ease,box-shadow var(--duration-fast) ease}.ds-pagination__size-select:hover:not(:disabled){border-color:var(--pagination-btn-hover-border, var(--color-primary))}.ds-pagination__size-select:focus{outline:none;border-color:var(--pagination-btn-focus-border, var(--color-primary));box-shadow:var(--input-focus-shadow)}.ds-pagination__size-select:disabled{opacity:.5;cursor:not-allowed}.ds-pagination__nav{display:flex;align-items:center;gap:var(--pagination-gap-sm, var(--space-1))}.ds-pagination__btn{display:inline-flex;align-items:center;justify-content:center;min-width:var(--pagination-btn-size-md);height:var(--pagination-btn-size-md);padding:var(--pagination-btn-padding-md, var(--space-1)) var(--space-2);border:1px solid var(--pagination-btn-border, var(--border-color));border-radius:var(--pagination-btn-radius, var(--radius-2));background-color:var(--pagination-btn-bg, var(--background-main));color:var(--pagination-btn-text, var(--text-default));font-size:var(--pagination-font-size-md, var(--font-size-2));font-weight:var(--font-weight-medium);cursor:pointer;transition:all var(--duration-fast) ease}.ds-pagination__btn:hover:not(:disabled):not(.ds-pagination__btn--active){background-color:var(--pagination-btn-hover-bg, var(--surface-hover));border-color:var(--pagination-btn-hover-border, var(--color-primary))}.ds-pagination__btn:focus{outline:none;border-color:var(--pagination-btn-focus-border, var(--color-primary));box-shadow:var(--input-focus-shadow)}.ds-pagination__btn:disabled{opacity:.5;cursor:not-allowed}.ds-pagination__btn--active{background-color:var(--pagination-active-bg, var(--color-primary));border-color:var(--pagination-active-bg, var(--color-primary));color:var(--pagination-active-text, var(--gray-50))}.ds-pagination__btn--active:hover{background-color:var(--pagination-active-hover-bg, var(--btn-primary-hover-bg))}.ds-pagination__btn--first,.ds-pagination__btn--last,.ds-pagination__btn--prev,.ds-pagination__btn--next{min-width:var(--pagination-btn-size-md);padding:var(--pagination-btn-padding-md, var(--space-1))}.ds-pagination__ellipsis{display:inline-flex;align-items:center;justify-content:center;min-width:var(--pagination-btn-size-md);height:var(--pagination-btn-size-md);color:var(--pagination-info-color, var(--text-muted));font-size:var(--pagination-font-size-md, var(--font-size-2))}.ds-pagination--sm{gap:var(--pagination-gap-sm, var(--space-2))}.ds-pagination--sm .ds-pagination__info,.ds-pagination--sm .ds-pagination__size-label{font-size:var(--pagination-font-size-sm, var(--font-size-1))}.ds-pagination--sm .ds-pagination__btn{min-width:var(--pagination-btn-size-sm);height:var(--pagination-btn-size-sm);font-size:var(--pagination-font-size-sm, var(--font-size-1));padding:var(--pagination-btn-padding-sm, var(--space-1))}.ds-pagination--sm .ds-pagination__ellipsis{min-width:var(--pagination-btn-size-sm);height:var(--pagination-btn-size-sm);font-size:var(--pagination-font-size-sm, var(--font-size-1))}.ds-pagination--sm .ds-pagination__size-select{font-size:var(--pagination-font-size-sm, var(--font-size-1));padding:var(--pagination-btn-padding-sm, var(--space-1))}.ds-pagination--lg{gap:var(--pagination-gap-lg, var(--space-6))}.ds-pagination--lg .ds-pagination__info,.ds-pagination--lg .ds-pagination__size-label{font-size:var(--pagination-font-size-lg, var(--font-size-3))}.ds-pagination--lg .ds-pagination__btn{min-width:var(--pagination-btn-size-lg);height:var(--pagination-btn-size-lg);font-size:var(--pagination-font-size-lg, var(--font-size-3));padding:var(--pagination-btn-padding-lg, var(--space-2)) var(--space-3)}.ds-pagination--lg .ds-pagination__ellipsis{min-width:var(--pagination-btn-size-lg);height:var(--pagination-btn-size-lg);font-size:var(--pagination-font-size-lg, var(--font-size-3))}.ds-pagination--lg .ds-pagination__size-select{font-size:var(--pagination-font-size-lg, var(--font-size-3));padding:var(--pagination-btn-padding-lg, var(--space-2)) var(--space-3)}.ds-pagination--disabled{opacity:.5;pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i1$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsPagination, decorators: [{
             type: Component,
@@ -5537,7 +5537,7 @@ class DsStepper {
         return `Étape ${index + 1}: ${step.label} - ${stateLabels[state]}`;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsStepper, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DsStepper, isStandalone: true, selector: "ds-stepper", inputs: { steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: true, transformFunction: null }, activeStep: { classPropertyName: "activeStep", publicName: "activeStep", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null }, showDescriptions: { classPropertyName: "showDescriptions", publicName: "showDescriptions", isSignal: true, isRequired: false, transformFunction: null }, showConnector: { classPropertyName: "showConnector", publicName: "showConnector", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { stepChange: "stepChange" }, ngImport: i0, template: "<div\n  [ngClass]=\"containerClasses()\"\n  role=\"tablist\"\n  [attr.aria-orientation]=\"orientation()\">\n\n  @for (step of steps(); track step.label; let i = $index; let last = $last) {\n    <!-- \u00C9tape -->\n    <div\n      [ngClass]=\"getStepClasses(step, i)\"\n      role=\"tab\"\n      [attr.aria-selected]=\"i === normalizedActiveStep()\"\n      [attr.aria-label]=\"getStepAriaLabel(step, i)\"\n      [attr.tabindex]=\"i === normalizedActiveStep() ? 0 : -1\"\n      (click)=\"goToStep(i)\"\n      (keydown)=\"onKeydown($event, i)\">\n\n      <!-- Indicateur -->\n      <div class=\"ds-stepper__indicator\">\n        @switch (getStepState(step, i)) {\n          @case ('completed') {\n            <fa-icon [icon]=\"faCheck\" aria-hidden=\"true\"></fa-icon>\n          }\n          @case ('error') {\n            <fa-icon [icon]=\"faExclamationTriangle\" aria-hidden=\"true\"></fa-icon>\n          }\n          @default {\n            <span class=\"ds-stepper__number\">{{ i + 1 }}</span>\n          }\n        }\n      </div>\n\n      <!-- Contenu -->\n      <div class=\"ds-stepper__content\">\n        <span class=\"ds-stepper__label\">\n          {{ step.label }}\n          @if (step.optional) {\n            <span class=\"ds-stepper__optional\">(Optionnel)</span>\n          }\n        </span>\n        @if (showDescriptions() && step.description) {\n          <span class=\"ds-stepper__description\">{{ step.description }}</span>\n        }\n      </div>\n    </div>\n\n    <!-- Connecteur -->\n    @if (showConnector() && !last) {\n      <div\n        class=\"ds-stepper__connector\"\n        [class.ds-stepper__connector--completed]=\"i < normalizedActiveStep()\"\n        aria-hidden=\"true\">\n      </div>\n    }\n  }\n</div>\n", styles: ["@charset \"UTF-8\";.ds-stepper{display:flex;font-family:var(--font-family-base)}.ds-stepper--horizontal{flex-direction:row;align-items:flex-start}.ds-stepper--horizontal .ds-stepper__step{flex-direction:column;align-items:center;text-align:center}.ds-stepper--horizontal .ds-stepper__connector{flex:1;height:var(--stepper-connector-width);min-width:var(--stepper-connector-min-length);margin-top:calc(var(--stepper-indicator-size-md) / 2);background-color:var(--stepper-connector-color, var(--border-color))}.ds-stepper--horizontal .ds-stepper__connector--completed{background-color:var(--stepper-completed-bg, var(--success))}.ds-stepper--horizontal .ds-stepper__content{margin-top:var(--stepper-gap-horizontal, var(--space-2))}.ds-stepper--vertical{flex-direction:column}.ds-stepper--vertical .ds-stepper__step{flex-direction:row;align-items:flex-start}.ds-stepper--vertical .ds-stepper__connector{width:var(--stepper-connector-width);min-height:var(--stepper-connector-min-length);margin-left:calc(var(--stepper-indicator-size-md) / 2);margin-top:var(--space-1);margin-bottom:var(--space-1);background-color:var(--stepper-connector-color, var(--border-color))}.ds-stepper--vertical .ds-stepper__connector--completed{background-color:var(--stepper-completed-bg, var(--success))}.ds-stepper--vertical .ds-stepper__content{margin-left:var(--stepper-gap-vertical, var(--space-3))}.ds-stepper--clickable .ds-stepper__step:not(.ds-stepper__step--disabled){cursor:pointer}.ds-stepper--clickable .ds-stepper__step:not(.ds-stepper__step--disabled):hover .ds-stepper__indicator{transform:scale(1.1)}.ds-stepper__step{display:flex;outline:none;transition:opacity var(--duration-fast) ease}.ds-stepper__step:focus-visible .ds-stepper__indicator{box-shadow:var(--input-focus-shadow)}.ds-stepper__step--pending .ds-stepper__indicator{background-color:var(--stepper-pending-bg, var(--background-secondary));color:var(--stepper-pending-text, var(--text-muted));border-color:var(--stepper-pending-border, var(--border-color))}.ds-stepper__step--pending .ds-stepper__label{color:var(--stepper-pending-text, var(--text-muted))}.ds-stepper__step--active .ds-stepper__indicator{background-color:var(--stepper-active-bg, var(--color-primary));color:var(--stepper-active-text, var(--gray-50));border-color:var(--stepper-active-bg, var(--color-primary))}.ds-stepper__step--active .ds-stepper__label{color:var(--text-default);font-weight:var(--font-weight-semibold)}.ds-stepper__step--completed .ds-stepper__indicator{background-color:var(--stepper-completed-bg, var(--success));color:var(--stepper-completed-text, var(--gray-50));border-color:var(--stepper-completed-bg, var(--success))}.ds-stepper__step--completed .ds-stepper__label{color:var(--text-default)}.ds-stepper__step--error .ds-stepper__indicator{background-color:var(--stepper-error-bg, var(--error));color:var(--stepper-error-text, var(--gray-50));border-color:var(--stepper-error-bg, var(--error))}.ds-stepper__step--error .ds-stepper__label{color:var(--stepper-error-bg, var(--error))}.ds-stepper__step--disabled{opacity:.5;cursor:not-allowed}.ds-stepper__indicator{display:flex;align-items:center;justify-content:center;width:var(--stepper-indicator-size-md);height:var(--stepper-indicator-size-md);border-radius:50%;border:var(--stepper-indicator-border-width) solid;font-weight:var(--font-weight-semibold);font-size:var(--stepper-indicator-font-size-md, var(--font-size-2));flex-shrink:0;transition:transform var(--duration-fast) ease,background-color var(--duration-fast) ease,border-color var(--duration-fast) ease}.ds-stepper__number{line-height:1}.ds-stepper__content{display:flex;flex-direction:column}.ds-stepper__label{font-size:var(--stepper-label-font-size-md, var(--font-size-2));font-weight:var(--font-weight-medium);color:var(--text-default);transition:color var(--duration-fast) ease}.ds-stepper__optional{font-size:var(--stepper-description-font-size-md, var(--font-size-1));font-weight:var(--font-weight-normal);color:var(--text-subtle);margin-left:var(--space-1)}.ds-stepper__description{font-size:var(--stepper-description-font-size-md, var(--font-size-1));color:var(--text-muted);margin-top:var(--space-1)}.ds-stepper__connector{transition:background-color var(--duration-normal) ease}.ds-stepper--sm .ds-stepper__indicator{width:var(--stepper-indicator-size-sm);height:var(--stepper-indicator-size-sm);font-size:var(--stepper-indicator-font-size-sm, var(--font-size-1))}.ds-stepper--sm .ds-stepper__label{font-size:var(--stepper-label-font-size-sm, var(--font-size-1))}.ds-stepper--sm .ds-stepper__description{font-size:var(--stepper-description-font-size-sm, var(--font-size-small))}.ds-stepper--sm.ds-stepper--horizontal .ds-stepper__connector{margin-top:calc(var(--stepper-indicator-size-sm) / 2)}.ds-stepper--sm.ds-stepper--vertical .ds-stepper__connector{margin-left:calc(var(--stepper-indicator-size-sm) / 2)}.ds-stepper--lg .ds-stepper__indicator{width:var(--stepper-indicator-size-lg);height:var(--stepper-indicator-size-lg);font-size:var(--stepper-indicator-font-size-lg, var(--font-size-3))}.ds-stepper--lg .ds-stepper__label{font-size:var(--stepper-label-font-size-lg, var(--font-size-3))}.ds-stepper--lg .ds-stepper__description{font-size:var(--stepper-description-font-size-lg, var(--font-size-2))}.ds-stepper--lg.ds-stepper--horizontal .ds-stepper__connector{margin-top:calc(var(--stepper-indicator-size-lg) / 2)}.ds-stepper--lg.ds-stepper--vertical .ds-stepper__connector{margin-left:calc(var(--stepper-indicator-size-lg) / 2)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DsStepper, isStandalone: true, selector: "ds-stepper", inputs: { steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: true, transformFunction: null }, activeStep: { classPropertyName: "activeStep", publicName: "activeStep", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null }, showDescriptions: { classPropertyName: "showDescriptions", publicName: "showDescriptions", isSignal: true, isRequired: false, transformFunction: null }, showConnector: { classPropertyName: "showConnector", publicName: "showConnector", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { stepChange: "stepChange" }, ngImport: i0, template: "<div\n  [ngClass]=\"containerClasses()\"\n  role=\"tablist\"\n  [attr.aria-orientation]=\"orientation()\">\n\n  @for (step of steps(); track step.label; let i = $index; let last = $last) {\n    <!-- \u00C9tape -->\n    <div\n      [ngClass]=\"getStepClasses(step, i)\"\n      role=\"tab\"\n      [attr.aria-selected]=\"i === normalizedActiveStep()\"\n      [attr.aria-label]=\"getStepAriaLabel(step, i)\"\n      [attr.tabindex]=\"i === normalizedActiveStep() ? 0 : -1\"\n      (click)=\"goToStep(i)\"\n      (keydown)=\"onKeydown($event, i)\">\n\n      <!-- Indicateur -->\n      <div class=\"ds-stepper__indicator\">\n        @switch (getStepState(step, i)) {\n          @case ('completed') {\n            <fa-icon [icon]=\"faCheck\" aria-hidden=\"true\"></fa-icon>\n          }\n          @case ('error') {\n            <fa-icon [icon]=\"faExclamationTriangle\" aria-hidden=\"true\"></fa-icon>\n          }\n          @default {\n            <span class=\"ds-stepper__number\">{{ i + 1 }}</span>\n          }\n        }\n      </div>\n\n      <!-- Contenu -->\n      <div class=\"ds-stepper__content\">\n        <span class=\"ds-stepper__label\">\n          {{ step.label }}\n          @if (step.optional) {\n            <span class=\"ds-stepper__optional\">(Optionnel)</span>\n          }\n        </span>\n        @if (showDescriptions() && step.description) {\n          <span class=\"ds-stepper__description\">{{ step.description }}</span>\n        }\n      </div>\n    </div>\n\n    <!-- Connecteur -->\n    @if (showConnector() && !last) {\n      <div\n        class=\"ds-stepper__connector\"\n        [class.ds-stepper__connector--completed]=\"i < normalizedActiveStep()\"\n        aria-hidden=\"true\">\n      </div>\n    }\n  }\n</div>\n", styles: ["@charset \"UTF-8\";.ds-stepper{display:flex;font-family:var(--font-family-base)}.ds-stepper--horizontal{flex-direction:row;align-items:flex-start}.ds-stepper--horizontal .ds-stepper__step{flex-direction:column;align-items:center;text-align:center}.ds-stepper--horizontal .ds-stepper__connector{flex:1;height:var(--stepper-connector-width);min-width:var(--stepper-connector-min-length);margin-top:calc(var(--stepper-indicator-size-md) / 2);background-color:var(--stepper-connector-color, var(--border-color))}.ds-stepper--horizontal .ds-stepper__connector--completed{background-color:var(--stepper-completed-bg, var(--success))}.ds-stepper--horizontal .ds-stepper__content{margin-top:var(--stepper-gap-horizontal, var(--space-2))}.ds-stepper--vertical{flex-direction:column}.ds-stepper--vertical .ds-stepper__step{flex-direction:row;align-items:flex-start}.ds-stepper--vertical .ds-stepper__connector{width:var(--stepper-connector-width);min-height:var(--stepper-connector-min-length);margin-left:calc(var(--stepper-indicator-size-md) / 2);margin-top:var(--space-1);margin-bottom:var(--space-1);background-color:var(--stepper-connector-color, var(--border-color))}.ds-stepper--vertical .ds-stepper__connector--completed{background-color:var(--stepper-completed-bg, var(--success))}.ds-stepper--vertical .ds-stepper__content{margin-left:var(--stepper-gap-vertical, var(--space-3))}.ds-stepper--clickable .ds-stepper__step:not(.ds-stepper__step--disabled){cursor:pointer}.ds-stepper--clickable .ds-stepper__step:not(.ds-stepper__step--disabled):hover .ds-stepper__indicator{transform:scale(1.1)}.ds-stepper__step{display:flex;outline:none;transition:opacity var(--duration-fast) ease}.ds-stepper__step:focus-visible .ds-stepper__indicator{box-shadow:var(--input-focus-shadow)}.ds-stepper__step--pending .ds-stepper__indicator{background-color:var(--stepper-pending-bg, var(--background-secondary));color:var(--stepper-pending-text, var(--text-muted));border-color:var(--stepper-pending-border, var(--border-color))}.ds-stepper__step--pending .ds-stepper__label{color:var(--stepper-pending-text, var(--text-muted))}.ds-stepper__step--active .ds-stepper__indicator{background-color:var(--stepper-active-bg, var(--color-primary));color:var(--stepper-active-text, var(--gray-50));border-color:var(--stepper-active-bg, var(--color-primary))}.ds-stepper__step--active .ds-stepper__label{color:var(--text-default);font-weight:var(--font-weight-semibold)}.ds-stepper__step--completed .ds-stepper__indicator{background-color:var(--stepper-completed-bg, var(--success));color:var(--stepper-completed-text, var(--gray-50));border-color:var(--stepper-completed-bg, var(--success))}.ds-stepper__step--completed .ds-stepper__label{color:var(--text-default)}.ds-stepper__step--error .ds-stepper__indicator{background-color:var(--stepper-error-bg, var(--error));color:var(--stepper-error-text, var(--gray-50));border-color:var(--stepper-error-bg, var(--error))}.ds-stepper__step--error .ds-stepper__label{color:var(--stepper-error-bg, var(--error))}.ds-stepper__step--disabled{opacity:.5;cursor:not-allowed}.ds-stepper__indicator{display:flex;align-items:center;justify-content:center;width:var(--stepper-indicator-size-md);height:var(--stepper-indicator-size-md);border-radius:50%;border:var(--stepper-indicator-border-width) solid;font-weight:var(--font-weight-semibold);font-size:var(--stepper-indicator-font-size-md, var(--font-size-2));flex-shrink:0;transition:transform var(--duration-fast) ease,background-color var(--duration-fast) ease,border-color var(--duration-fast) ease}.ds-stepper__number{line-height:1}.ds-stepper__content{display:flex;flex-direction:column}.ds-stepper__label{font-size:var(--stepper-label-font-size-md, var(--font-size-2));font-weight:var(--font-weight-medium);color:var(--text-default);transition:color var(--duration-fast) ease}.ds-stepper__optional{font-size:var(--stepper-description-font-size-md, var(--font-size-1));font-weight:var(--font-weight-normal);color:var(--text-subtle);margin-left:var(--space-1)}.ds-stepper__description{font-size:var(--stepper-description-font-size-md, var(--font-size-1));color:var(--text-muted);margin-top:var(--space-1)}.ds-stepper__connector{transition:background-color var(--duration-normal) ease}.ds-stepper--sm .ds-stepper__indicator{width:var(--stepper-indicator-size-sm);height:var(--stepper-indicator-size-sm);font-size:var(--stepper-indicator-font-size-sm, var(--font-size-1))}.ds-stepper--sm .ds-stepper__label{font-size:var(--stepper-label-font-size-sm, var(--font-size-1))}.ds-stepper--sm .ds-stepper__description{font-size:var(--stepper-description-font-size-sm, var(--font-size-small))}.ds-stepper--sm.ds-stepper--horizontal .ds-stepper__connector{margin-top:calc(var(--stepper-indicator-size-sm) / 2)}.ds-stepper--sm.ds-stepper--vertical .ds-stepper__connector{margin-left:calc(var(--stepper-indicator-size-sm) / 2)}.ds-stepper--lg .ds-stepper__indicator{width:var(--stepper-indicator-size-lg);height:var(--stepper-indicator-size-lg);font-size:var(--stepper-indicator-font-size-lg, var(--font-size-3))}.ds-stepper--lg .ds-stepper__label{font-size:var(--stepper-label-font-size-lg, var(--font-size-3))}.ds-stepper--lg .ds-stepper__description{font-size:var(--stepper-description-font-size-lg, var(--font-size-2))}.ds-stepper--lg.ds-stepper--horizontal .ds-stepper__connector{margin-top:calc(var(--stepper-indicator-size-lg) / 2)}.ds-stepper--lg.ds-stepper--vertical .ds-stepper__connector{margin-left:calc(var(--stepper-indicator-size-lg) / 2)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i1$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsStepper, decorators: [{
             type: Component,
@@ -6342,7 +6342,7 @@ class DsContainer {
     <div [class]="containerClasses()" [style]="containerStyle()">
       <ng-content />
     </div>
-  `, isInline: true, styles: [".ds-container{width:100%;max-width:var(--container-max-width, 960px);box-sizing:border-box}.ds-container--center{margin-left:auto;margin-right:auto}.ds-container--fluid{max-width:100%}.ds-container--sm{max-width:540px}.ds-container--md{max-width:720px}.ds-container--lg{max-width:960px}.ds-container--xl{max-width:1140px}.ds-container--2xl{max-width:1320px}.ds-container--gutter-none{padding-left:0;padding-right:0}.ds-container--gutter-sm{padding-left:var(--space-4, 1rem);padding-right:var(--space-4, 1rem)}.ds-container--gutter-md{padding-left:var(--space-6, 1.5rem);padding-right:var(--space-6, 1.5rem)}.ds-container--gutter-lg{padding-left:var(--space-8, 2rem);padding-right:var(--space-8, 2rem)}.ds-container--padding-y-none{padding-top:0;padding-bottom:0}.ds-container--padding-y-sm{padding-top:var(--space-4, 1rem);padding-bottom:var(--space-4, 1rem)}.ds-container--padding-y-md{padding-top:var(--space-6, 1.5rem);padding-bottom:var(--space-6, 1.5rem)}.ds-container--padding-y-lg{padding-top:var(--space-8, 2rem);padding-bottom:var(--space-8, 2rem)}@media (max-width: 575.98px){.ds-container--gutter-lg{padding-left:var(--space-4, 1rem);padding-right:var(--space-4, 1rem)}.ds-container--gutter-md{padding-left:var(--space-3, .75rem);padding-right:var(--space-3, .75rem)}}@media (min-width: 576px) and (max-width: 767.98px){.ds-container--gutter-lg{padding-left:var(--space-5, 1.25rem);padding-right:var(--space-5, 1.25rem)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".ds-container{width:100%;max-width:var(--ds-container-lg, 960px);box-sizing:border-box}.ds-container--center{margin-left:auto;margin-right:auto}.ds-container--fluid{max-width:100%}.ds-container--sm{max-width:var(--ds-container-sm, 540px)}.ds-container--md{max-width:var(--ds-container-md, 720px)}.ds-container--lg{max-width:var(--ds-container-lg, 960px)}.ds-container--xl{max-width:var(--ds-container-xl, 1140px)}.ds-container--2xl{max-width:var(--ds-container-2xl, 1320px)}.ds-container--gutter-none{padding-left:0;padding-right:0}.ds-container--gutter-sm{padding-left:var(--ds-container-gutter-sm, var(--space-4));padding-right:var(--ds-container-gutter-sm, var(--space-4))}.ds-container--gutter-md{padding-left:var(--ds-container-gutter-md, var(--space-6));padding-right:var(--ds-container-gutter-md, var(--space-6))}.ds-container--gutter-lg{padding-left:var(--ds-container-gutter-lg, var(--space-8));padding-right:var(--ds-container-gutter-lg, var(--space-8))}.ds-container--padding-y-none{padding-top:0;padding-bottom:0}.ds-container--padding-y-sm{padding-top:var(--space-4);padding-bottom:var(--space-4)}.ds-container--padding-y-md{padding-top:var(--space-6);padding-bottom:var(--space-6)}.ds-container--padding-y-lg{padding-top:var(--space-8);padding-bottom:var(--space-8)}@media (max-width: var(--breakpoint-sm, 575.98px)){.ds-container--gutter-lg{padding-left:var(--space-4);padding-right:var(--space-4)}.ds-container--gutter-md{padding-left:var(--space-3);padding-right:var(--space-3)}}@media (min-width: var(--breakpoint-sm, 576px)) and (max-width: var(--breakpoint-md, 767.98px)){.ds-container--gutter-lg{padding-left:var(--space-5);padding-right:var(--space-5)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsContainer, decorators: [{
             type: Component,
@@ -6350,7 +6350,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
     <div [class]="containerClasses()" [style]="containerStyle()">
       <ng-content />
     </div>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".ds-container{width:100%;max-width:var(--container-max-width, 960px);box-sizing:border-box}.ds-container--center{margin-left:auto;margin-right:auto}.ds-container--fluid{max-width:100%}.ds-container--sm{max-width:540px}.ds-container--md{max-width:720px}.ds-container--lg{max-width:960px}.ds-container--xl{max-width:1140px}.ds-container--2xl{max-width:1320px}.ds-container--gutter-none{padding-left:0;padding-right:0}.ds-container--gutter-sm{padding-left:var(--space-4, 1rem);padding-right:var(--space-4, 1rem)}.ds-container--gutter-md{padding-left:var(--space-6, 1.5rem);padding-right:var(--space-6, 1.5rem)}.ds-container--gutter-lg{padding-left:var(--space-8, 2rem);padding-right:var(--space-8, 2rem)}.ds-container--padding-y-none{padding-top:0;padding-bottom:0}.ds-container--padding-y-sm{padding-top:var(--space-4, 1rem);padding-bottom:var(--space-4, 1rem)}.ds-container--padding-y-md{padding-top:var(--space-6, 1.5rem);padding-bottom:var(--space-6, 1.5rem)}.ds-container--padding-y-lg{padding-top:var(--space-8, 2rem);padding-bottom:var(--space-8, 2rem)}@media (max-width: 575.98px){.ds-container--gutter-lg{padding-left:var(--space-4, 1rem);padding-right:var(--space-4, 1rem)}.ds-container--gutter-md{padding-left:var(--space-3, .75rem);padding-right:var(--space-3, .75rem)}}@media (min-width: 576px) and (max-width: 767.98px){.ds-container--gutter-lg{padding-left:var(--space-5, 1.25rem);padding-right:var(--space-5, 1.25rem)}}\n"] }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".ds-container{width:100%;max-width:var(--ds-container-lg, 960px);box-sizing:border-box}.ds-container--center{margin-left:auto;margin-right:auto}.ds-container--fluid{max-width:100%}.ds-container--sm{max-width:var(--ds-container-sm, 540px)}.ds-container--md{max-width:var(--ds-container-md, 720px)}.ds-container--lg{max-width:var(--ds-container-lg, 960px)}.ds-container--xl{max-width:var(--ds-container-xl, 1140px)}.ds-container--2xl{max-width:var(--ds-container-2xl, 1320px)}.ds-container--gutter-none{padding-left:0;padding-right:0}.ds-container--gutter-sm{padding-left:var(--ds-container-gutter-sm, var(--space-4));padding-right:var(--ds-container-gutter-sm, var(--space-4))}.ds-container--gutter-md{padding-left:var(--ds-container-gutter-md, var(--space-6));padding-right:var(--ds-container-gutter-md, var(--space-6))}.ds-container--gutter-lg{padding-left:var(--ds-container-gutter-lg, var(--space-8));padding-right:var(--ds-container-gutter-lg, var(--space-8))}.ds-container--padding-y-none{padding-top:0;padding-bottom:0}.ds-container--padding-y-sm{padding-top:var(--space-4);padding-bottom:var(--space-4)}.ds-container--padding-y-md{padding-top:var(--space-6);padding-bottom:var(--space-6)}.ds-container--padding-y-lg{padding-top:var(--space-8);padding-bottom:var(--space-8)}@media (max-width: var(--breakpoint-sm, 575.98px)){.ds-container--gutter-lg{padding-left:var(--space-4);padding-right:var(--space-4)}.ds-container--gutter-md{padding-left:var(--space-3);padding-right:var(--space-3)}}@media (min-width: var(--breakpoint-sm, 576px)) and (max-width: var(--breakpoint-md, 767.98px)){.ds-container--gutter-lg{padding-left:var(--space-5);padding-right:var(--space-5)}}\n"] }]
         }], propDecorators: { maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], center: [{ type: i0.Input, args: [{ isSignal: true, alias: "center", required: false }] }], gutter: [{ type: i0.Input, args: [{ isSignal: true, alias: "gutter", required: false }] }], paddingY: [{ type: i0.Input, args: [{ isSignal: true, alias: "paddingY", required: false }] }], customClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "customClass", required: false }] }] } });
 
 /**
@@ -6531,7 +6531,7 @@ class DsSearchInput {
         </button>
       }
     </div>
-  `, isInline: true, styles: [".ds-search-input{display:flex;align-items:center;position:relative;width:100%;background:var(--input-bg, var(--background-main, #fff));border:1px solid var(--input-border-color, var(--border-default, #d1d5db));border-radius:var(--input-border-radius, var(--radius-2, 6px));transition:border-color .2s ease,box-shadow .2s ease}.ds-search-input:focus-within{border-color:var(--input-focus-border, var(--color-primary, #3b82f6));box-shadow:0 0 0 3px var(--input-focus-shadow, rgba(59, 130, 246, .25))}.ds-search-input--sm{height:var(--input-height-sm, 32px)}.ds-search-input--sm .ds-search-input__input{font-size:var(--font-size-2, .875rem);padding:0 var(--space-2, .5rem)}.ds-search-input--sm .ds-search-input__icon{font-size:12px}.ds-search-input--sm .ds-search-input__icon--search{margin-left:var(--space-2, .5rem)}.ds-search-input--sm .ds-search-input__clear{margin-right:var(--space-1, .25rem);width:20px;height:20px}.ds-search-input--md{height:var(--input-height-md, 40px)}.ds-search-input--md .ds-search-input__input{font-size:var(--font-size-3, 1rem);padding:0 var(--space-3, .75rem)}.ds-search-input--md .ds-search-input__icon{font-size:14px}.ds-search-input--md .ds-search-input__icon--search{margin-left:var(--space-3, .75rem)}.ds-search-input--md .ds-search-input__clear{margin-right:var(--space-2, .5rem);width:24px;height:24px}.ds-search-input--lg{height:var(--input-height-lg, 48px)}.ds-search-input--lg .ds-search-input__input{font-size:var(--font-size-4, 1.125rem);padding:0 var(--space-4, 1rem)}.ds-search-input--lg .ds-search-input__icon{font-size:16px}.ds-search-input--lg .ds-search-input__icon--search{margin-left:var(--space-4, 1rem)}.ds-search-input--lg .ds-search-input__clear{margin-right:var(--space-3, .75rem);width:28px;height:28px}.ds-search-input--disabled{opacity:.6;cursor:not-allowed;background:var(--input-disabled-bg, var(--background-subtle, #f9fafb))}.ds-search-input--disabled .ds-search-input__input{cursor:not-allowed}.ds-search-input--loading .ds-search-input__icon--loading{color:var(--color-primary, #3b82f6)}.ds-search-input__icon{flex-shrink:0;color:var(--text-muted, #6b7280)}.ds-search-input__icon--search{pointer-events:none}.ds-search-input__icon--loading{margin-right:var(--space-2, .5rem)}.ds-search-input__icon--spin{animation:ds-search-spin 1s linear infinite}@keyframes ds-search-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.ds-search-input__input{flex:1;border:none;background:transparent;color:var(--text-default, #1f2937);outline:none;min-width:0}.ds-search-input__input::placeholder{color:var(--text-muted, #9ca3af)}.ds-search-input__input:disabled{color:var(--text-muted, #9ca3af)}.ds-search-input__clear{display:flex;align-items:center;justify-content:center;flex-shrink:0;border:none;background:transparent;color:var(--text-muted, #6b7280);cursor:pointer;border-radius:var(--radius-1, 4px);transition:background-color .15s ease,color .15s ease}.ds-search-input__clear:hover{background:var(--background-subtle, #f3f4f6);color:var(--text-default, #1f2937)}.ds-search-input__clear:focus-visible{outline:2px solid var(--color-primary, #3b82f6);outline-offset:1px}.ds-search-input__clear:active{background:var(--background-muted, #e5e7eb)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".ds-search-input{display:flex;align-items:center;position:relative;width:100%;background:var(--search-input-bg, var(--input-bg, var(--background-main)));border:1px solid var(--search-input-border, var(--input-border-color, var(--border-default)));border-radius:var(--search-input-radius, var(--radius-2));transition:border-color var(--duration-fast, .2s) ease,box-shadow var(--duration-fast, .2s) ease}.ds-search-input:focus-within{border-color:var(--search-input-focus-border, var(--input-focus-border, var(--color-primary)));box-shadow:var(--search-input-focus-shadow, var(--input-focus-shadow))}.ds-search-input--sm{height:var(--search-input-height-sm, 32px)}.ds-search-input--sm .ds-search-input__input{font-size:var(--search-input-font-size-sm, var(--font-size-2));padding:0 var(--search-input-padding-sm, var(--space-2))}.ds-search-input--sm .ds-search-input__icon{font-size:var(--search-input-icon-size-sm, 12px)}.ds-search-input--sm .ds-search-input__icon--search{margin-left:var(--search-input-padding-sm, var(--space-2))}.ds-search-input--sm .ds-search-input__clear{margin-right:var(--space-1);width:var(--search-input-clear-size-sm, 20px);height:var(--search-input-clear-size-sm, 20px)}.ds-search-input--md{height:var(--search-input-height-md, 40px)}.ds-search-input--md .ds-search-input__input{font-size:var(--search-input-font-size-md, var(--font-size-3));padding:0 var(--search-input-padding-md, var(--space-3))}.ds-search-input--md .ds-search-input__icon{font-size:var(--search-input-icon-size-md, 14px)}.ds-search-input--md .ds-search-input__icon--search{margin-left:var(--search-input-padding-md, var(--space-3))}.ds-search-input--md .ds-search-input__clear{margin-right:var(--space-2);width:var(--search-input-clear-size-md, 24px);height:var(--search-input-clear-size-md, 24px)}.ds-search-input--lg{height:var(--search-input-height-lg, 48px)}.ds-search-input--lg .ds-search-input__input{font-size:var(--search-input-font-size-lg, var(--font-size-4));padding:0 var(--search-input-padding-lg, var(--space-4))}.ds-search-input--lg .ds-search-input__icon{font-size:var(--search-input-icon-size-lg, 16px)}.ds-search-input--lg .ds-search-input__icon--search{margin-left:var(--search-input-padding-lg, var(--space-4))}.ds-search-input--lg .ds-search-input__clear{margin-right:var(--space-3);width:var(--search-input-clear-size-lg, 28px);height:var(--search-input-clear-size-lg, 28px)}.ds-search-input--disabled{opacity:.6;cursor:not-allowed;background:var(--search-input-disabled-bg, var(--input-disabled-bg, var(--bg-disabled)))}.ds-search-input--disabled .ds-search-input__input{cursor:not-allowed}.ds-search-input--loading .ds-search-input__icon--loading{color:var(--search-input-loading-color, var(--color-primary))}.ds-search-input__icon{flex-shrink:0;color:var(--search-input-icon-color, var(--text-muted))}.ds-search-input__icon--search{pointer-events:none}.ds-search-input__icon--loading{margin-right:var(--space-2)}.ds-search-input__icon--spin{animation:ds-search-spin 1s linear infinite}@keyframes ds-search-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.ds-search-input__input{flex:1;border:none;background:transparent;color:var(--search-input-text, var(--text-default));outline:none;min-width:0}.ds-search-input__input::placeholder{color:var(--search-input-placeholder, var(--text-muted))}.ds-search-input__input:disabled{color:var(--search-input-disabled-text, var(--text-disabled))}.ds-search-input__clear{display:flex;align-items:center;justify-content:center;flex-shrink:0;border:none;background:transparent;color:var(--search-input-clear-color, var(--text-muted));cursor:pointer;border-radius:var(--radius-1);transition:background-color var(--duration-fast, .15s) ease,color var(--duration-fast, .15s) ease}.ds-search-input__clear:hover{background:var(--search-input-clear-hover-bg, var(--surface-hover));color:var(--search-input-clear-hover-color, var(--text-default))}.ds-search-input__clear:focus-visible{outline:2px solid var(--color-primary);outline-offset:1px}.ds-search-input__clear:active{background:var(--search-input-clear-active-bg, var(--surface-raised))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: DsSearchInput, decorators: [{
             type: Component,
@@ -6579,9 +6579,58 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                             useExisting: forwardRef(() => DsSearchInput),
                             multi: true,
                         },
-                    ], styles: [".ds-search-input{display:flex;align-items:center;position:relative;width:100%;background:var(--input-bg, var(--background-main, #fff));border:1px solid var(--input-border-color, var(--border-default, #d1d5db));border-radius:var(--input-border-radius, var(--radius-2, 6px));transition:border-color .2s ease,box-shadow .2s ease}.ds-search-input:focus-within{border-color:var(--input-focus-border, var(--color-primary, #3b82f6));box-shadow:0 0 0 3px var(--input-focus-shadow, rgba(59, 130, 246, .25))}.ds-search-input--sm{height:var(--input-height-sm, 32px)}.ds-search-input--sm .ds-search-input__input{font-size:var(--font-size-2, .875rem);padding:0 var(--space-2, .5rem)}.ds-search-input--sm .ds-search-input__icon{font-size:12px}.ds-search-input--sm .ds-search-input__icon--search{margin-left:var(--space-2, .5rem)}.ds-search-input--sm .ds-search-input__clear{margin-right:var(--space-1, .25rem);width:20px;height:20px}.ds-search-input--md{height:var(--input-height-md, 40px)}.ds-search-input--md .ds-search-input__input{font-size:var(--font-size-3, 1rem);padding:0 var(--space-3, .75rem)}.ds-search-input--md .ds-search-input__icon{font-size:14px}.ds-search-input--md .ds-search-input__icon--search{margin-left:var(--space-3, .75rem)}.ds-search-input--md .ds-search-input__clear{margin-right:var(--space-2, .5rem);width:24px;height:24px}.ds-search-input--lg{height:var(--input-height-lg, 48px)}.ds-search-input--lg .ds-search-input__input{font-size:var(--font-size-4, 1.125rem);padding:0 var(--space-4, 1rem)}.ds-search-input--lg .ds-search-input__icon{font-size:16px}.ds-search-input--lg .ds-search-input__icon--search{margin-left:var(--space-4, 1rem)}.ds-search-input--lg .ds-search-input__clear{margin-right:var(--space-3, .75rem);width:28px;height:28px}.ds-search-input--disabled{opacity:.6;cursor:not-allowed;background:var(--input-disabled-bg, var(--background-subtle, #f9fafb))}.ds-search-input--disabled .ds-search-input__input{cursor:not-allowed}.ds-search-input--loading .ds-search-input__icon--loading{color:var(--color-primary, #3b82f6)}.ds-search-input__icon{flex-shrink:0;color:var(--text-muted, #6b7280)}.ds-search-input__icon--search{pointer-events:none}.ds-search-input__icon--loading{margin-right:var(--space-2, .5rem)}.ds-search-input__icon--spin{animation:ds-search-spin 1s linear infinite}@keyframes ds-search-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.ds-search-input__input{flex:1;border:none;background:transparent;color:var(--text-default, #1f2937);outline:none;min-width:0}.ds-search-input__input::placeholder{color:var(--text-muted, #9ca3af)}.ds-search-input__input:disabled{color:var(--text-muted, #9ca3af)}.ds-search-input__clear{display:flex;align-items:center;justify-content:center;flex-shrink:0;border:none;background:transparent;color:var(--text-muted, #6b7280);cursor:pointer;border-radius:var(--radius-1, 4px);transition:background-color .15s ease,color .15s ease}.ds-search-input__clear:hover{background:var(--background-subtle, #f3f4f6);color:var(--text-default, #1f2937)}.ds-search-input__clear:focus-visible{outline:2px solid var(--color-primary, #3b82f6);outline-offset:1px}.ds-search-input__clear:active{background:var(--background-muted, #e5e7eb)}\n"] }]
+                    ], styles: [".ds-search-input{display:flex;align-items:center;position:relative;width:100%;background:var(--search-input-bg, var(--input-bg, var(--background-main)));border:1px solid var(--search-input-border, var(--input-border-color, var(--border-default)));border-radius:var(--search-input-radius, var(--radius-2));transition:border-color var(--duration-fast, .2s) ease,box-shadow var(--duration-fast, .2s) ease}.ds-search-input:focus-within{border-color:var(--search-input-focus-border, var(--input-focus-border, var(--color-primary)));box-shadow:var(--search-input-focus-shadow, var(--input-focus-shadow))}.ds-search-input--sm{height:var(--search-input-height-sm, 32px)}.ds-search-input--sm .ds-search-input__input{font-size:var(--search-input-font-size-sm, var(--font-size-2));padding:0 var(--search-input-padding-sm, var(--space-2))}.ds-search-input--sm .ds-search-input__icon{font-size:var(--search-input-icon-size-sm, 12px)}.ds-search-input--sm .ds-search-input__icon--search{margin-left:var(--search-input-padding-sm, var(--space-2))}.ds-search-input--sm .ds-search-input__clear{margin-right:var(--space-1);width:var(--search-input-clear-size-sm, 20px);height:var(--search-input-clear-size-sm, 20px)}.ds-search-input--md{height:var(--search-input-height-md, 40px)}.ds-search-input--md .ds-search-input__input{font-size:var(--search-input-font-size-md, var(--font-size-3));padding:0 var(--search-input-padding-md, var(--space-3))}.ds-search-input--md .ds-search-input__icon{font-size:var(--search-input-icon-size-md, 14px)}.ds-search-input--md .ds-search-input__icon--search{margin-left:var(--search-input-padding-md, var(--space-3))}.ds-search-input--md .ds-search-input__clear{margin-right:var(--space-2);width:var(--search-input-clear-size-md, 24px);height:var(--search-input-clear-size-md, 24px)}.ds-search-input--lg{height:var(--search-input-height-lg, 48px)}.ds-search-input--lg .ds-search-input__input{font-size:var(--search-input-font-size-lg, var(--font-size-4));padding:0 var(--search-input-padding-lg, var(--space-4))}.ds-search-input--lg .ds-search-input__icon{font-size:var(--search-input-icon-size-lg, 16px)}.ds-search-input--lg .ds-search-input__icon--search{margin-left:var(--search-input-padding-lg, var(--space-4))}.ds-search-input--lg .ds-search-input__clear{margin-right:var(--space-3);width:var(--search-input-clear-size-lg, 28px);height:var(--search-input-clear-size-lg, 28px)}.ds-search-input--disabled{opacity:.6;cursor:not-allowed;background:var(--search-input-disabled-bg, var(--input-disabled-bg, var(--bg-disabled)))}.ds-search-input--disabled .ds-search-input__input{cursor:not-allowed}.ds-search-input--loading .ds-search-input__icon--loading{color:var(--search-input-loading-color, var(--color-primary))}.ds-search-input__icon{flex-shrink:0;color:var(--search-input-icon-color, var(--text-muted))}.ds-search-input__icon--search{pointer-events:none}.ds-search-input__icon--loading{margin-right:var(--space-2)}.ds-search-input__icon--spin{animation:ds-search-spin 1s linear infinite}@keyframes ds-search-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.ds-search-input__input{flex:1;border:none;background:transparent;color:var(--search-input-text, var(--text-default));outline:none;min-width:0}.ds-search-input__input::placeholder{color:var(--search-input-placeholder, var(--text-muted))}.ds-search-input__input:disabled{color:var(--search-input-disabled-text, var(--text-disabled))}.ds-search-input__clear{display:flex;align-items:center;justify-content:center;flex-shrink:0;border:none;background:transparent;color:var(--search-input-clear-color, var(--text-muted));cursor:pointer;border-radius:var(--radius-1);transition:background-color var(--duration-fast, .15s) ease,color var(--duration-fast, .15s) ease}.ds-search-input__clear:hover{background:var(--search-input-clear-hover-bg, var(--surface-hover));color:var(--search-input-clear-hover-color, var(--text-default))}.ds-search-input__clear:focus-visible{outline:2px solid var(--color-primary);outline-offset:1px}.ds-search-input__clear:active{background:var(--search-input-clear-active-bg, var(--surface-raised))}\n"] }]
         }], ctorParameters: () => [], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], debounceMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceMs", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], minChars: [{ type: i0.Input, args: [{ isSignal: true, alias: "minChars", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], search: [{ type: i0.Output, args: ["search"] }], searchImmediate: [{ type: i0.Output, args: ["searchImmediate"] }], cleared: [{ type: i0.Output, args: ["cleared"] }], inputRef: [{ type: i0.ViewChild, args: ['inputRef', { isSignal: true }] }] } });
 
+/** Presets prédéfinis pour le mode range */
+const DEFAULT_DATE_PRESETS = [
+    {
+        label: "Aujourd'hui",
+        getValue: () => {
+            const today = new Date();
+            today.setHours(0, 0, 0, 0);
+            return { start: today, end: today };
+        },
+    },
+    {
+        label: '7 derniers jours',
+        getValue: () => {
+            const end = new Date();
+            end.setHours(0, 0, 0, 0);
+            const start = new Date(end);
+            start.setDate(start.getDate() - 6);
+            return { start, end };
+        },
+    },
+    {
+        label: '30 derniers jours',
+        getValue: () => {
+            const end = new Date();
+            end.setHours(0, 0, 0, 0);
+            const start = new Date(end);
+            start.setDate(start.getDate() - 29);
+            return { start, end };
+        },
+    },
+    {
+        label: 'Ce mois',
+        getValue: () => {
+            const now = new Date();
+            const start = new Date(now.getFullYear(), now.getMonth(), 1);
+            const end = new Date(now.getFullYear(), now.getMonth() + 1, 0);
+            return { start, end };
+        },
+    },
+    {
+        label: 'Mois dernier',
+        getValue: () => {
+            const now = new Date();
+            const start = new Date(now.getFullYear(), now.getMonth() - 1, 1);
+            const end = new Date(now.getFullYear(), now.getMonth(), 0);
+            return { start, end };
+        },
+    },
+];
 /**
  * DsDatePicker - Composant de sélection de date
  *
@@ -6620,6 +6669,12 @@ class DsDatePicker {
     prevMonthLabel = input('Mois précédent', ...(ngDevMode ? [{ debugName: "prevMonthLabel" }] : []));
     /** Label bouton mois suivant */
     nextMonthLabel = input('Mois suivant', ...(ngDevMode ? [{ debugName: "nextMonthLabel" }] : []));
+    /** Presets pour le mode range */
+    presets = input([], ...(ngDevMode ? [{ debugName: "presets" }] : []));
+    /** Afficher les presets */
+    showPresets = input(false, ...(ngDevMode ? [{ debugName: "showPresets" }] : []));
+    /** Activer le preview au survol en mode range */
+    showRangePreview = input(true, ...(ngDevMode ? [{ debugName: "showRangePreview" }] : []));
     /** Événement de changement de date (mode single) */
     dateChange = output();
     /** Événement de changement de range */
@@ -6643,6 +6698,7 @@ class DsDatePicker {
     rangeEnd = signal(null, ...(ngDevMode ? [{ debugName: "rangeEnd" }] : []));
     showMonthPicker = signal(false, ...(ngDevMode ? [{ debugName: "showMonthPicker" }] : []));
     showYearPicker = signal(false, ...(ngDevMode ? [{ debugName: "showYearPicker" }] : []));
+    hoveredDate = signal(null, ...(ngDevMode ? [{ debugName: "hoveredDate" }] : []));
     /** Callbacks CVA */
     onChange = () => { };
     onTouched = () => { };
@@ -6693,6 +6749,7 @@ class DsDatePicker {
                 const isRangeStart = this.isRangeStartDate(date);
                 const isRangeEnd = this.isRangeEndDate(date);
                 const isInRange = this.isDateInRange(date);
+                const isInPreviewRange = this.isDateInPreviewRange(date);
                 const isDisabled = this.isDateDisabled(date);
                 week.push({
                     date,
@@ -6703,6 +6760,7 @@ class DsDatePicker {
                     isRangeStart,
                     isRangeEnd,
                     isInRange,
+                    isInPreviewRange,
                     isDisabled,
                     ariaLabel: this.formatDateForAria(date),
                 });
@@ -6872,6 +6930,44 @@ class DsDatePicker {
             return false;
         return date > start && date < end;
     }
+    isDateInPreviewRange(date) {
+        if (this.mode() !== 'range' || !this.showRangePreview())
+            return false;
+        const start = this.rangeStart();
+        const end = this.rangeEnd();
+        const hovered = this.hoveredDate();
+        // Seulement si on a un start mais pas de end, et on survole
+        if (!start || end || !hovered)
+            return false;
+        const minDate = start < hovered ? start : hovered;
+        const maxDate = start < hovered ? hovered : start;
+        return date > minDate && date < maxDate;
+    }
+    onDayMouseEnter(date) {
+        if (date && this.mode() === 'range' && this.showRangePreview() && this.rangeStart() && !this.rangeEnd()) {
+            this.hoveredDate.set(date);
+        }
+    }
+    onDayMouseLeave() {
+        this.hoveredDate.set(null);
+    }
+    selectPreset(preset) {
+        const range = preset.getValue();
+        this.rangeStart.set(range.start);
+        this.rangeEnd.set(range.end);
+        this.rangeChange.emit(range);
+        this.onChange(range);
+        // Naviguer vers le mois du début
+        if (range.start) {
+            this.currentMonth.set(range.start.getMonth());
+            this.currentYear.set(range.start.getFullYear());
+        }
+    }
+    /** Presets effectifs (utilise les presets fournis ou les défauts) */
+    effectivePresets = computed(() => {
+        const custom = this.presets();
+        return custom.length > 0 ? custom : DEFAULT_DATE_PRESETS;
+    }, ...(ngDevMode ? [{ debugName: "effectivePresets" }] : []));
     isDateDisabled(date) {
         const min = this.minDate();
         const max = this.maxDate();
@@ -6926,7 +7022,7 @@ class DsDatePicker {
         // Géré via l'input signal
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsDatePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DsDatePicker, isStandalone: true, selector: "ds-date-picker", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, showTodayButton: { classPropertyName: "showTodayButton", publicName: "showTodayButton", isSignal: true, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, todayLabel: { classPropertyName: "todayLabel", publicName: "todayLabel", isSignal: true, isRequired: false, transformFunction: null }, clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", isSignal: true, isRequired: false, transformFunction: null }, prevMonthLabel: { classPropertyName: "prevMonthLabel", publicName: "prevMonthLabel", isSignal: true, isRequired: false, transformFunction: null }, nextMonthLabel: { classPropertyName: "nextMonthLabel", publicName: "nextMonthLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dateChange: "dateChange", rangeChange: "rangeChange" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DsDatePicker, isStandalone: true, selector: "ds-date-picker", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, showTodayButton: { classPropertyName: "showTodayButton", publicName: "showTodayButton", isSignal: true, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, todayLabel: { classPropertyName: "todayLabel", publicName: "todayLabel", isSignal: true, isRequired: false, transformFunction: null }, clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", isSignal: true, isRequired: false, transformFunction: null }, prevMonthLabel: { classPropertyName: "prevMonthLabel", publicName: "prevMonthLabel", isSignal: true, isRequired: false, transformFunction: null }, nextMonthLabel: { classPropertyName: "nextMonthLabel", publicName: "nextMonthLabel", isSignal: true, isRequired: false, transformFunction: null }, presets: { classPropertyName: "presets", publicName: "presets", isSignal: true, isRequired: false, transformFunction: null }, showPresets: { classPropertyName: "showPresets", publicName: "showPresets", isSignal: true, isRequired: false, transformFunction: null }, showRangePreview: { classPropertyName: "showRangePreview", publicName: "showRangePreview", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dateChange: "dateChange", rangeChange: "rangeChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => DsDatePicker),
@@ -7032,13 +7128,16 @@ class DsDatePicker {
                     [class.ds-date-picker__day--range-start]="day.isRangeStart"
                     [class.ds-date-picker__day--range-end]="day.isRangeEnd"
                     [class.ds-date-picker__day--in-range]="day.isInRange"
+                    [class.ds-date-picker__day--in-preview]="day.isInPreviewRange"
                     [class.ds-date-picker__day--disabled]="day.isDisabled"
                     [disabled]="disabled() || day.isDisabled"
                     role="gridcell"
                     [attr.aria-selected]="day.isSelected"
                     [attr.aria-label]="day.ariaLabel"
                     (click)="selectDate(day.date)"
-                    (keydown)="onDayKeydown($event, day.date)">
+                    (keydown)="onDayKeydown($event, day.date)"
+                    (mouseenter)="onDayMouseEnter(day.date)"
+                    (mouseleave)="onDayMouseLeave()">
                     {{ day.dayNumber }}
                   </button>
                 }
@@ -7047,6 +7146,21 @@ class DsDatePicker {
           </div>
         </div>
 
+        <!-- Presets (mode range uniquement) -->
+        @if (showPresets() && mode() === 'range') {
+          <div class="ds-date-picker__presets">
+            @for (preset of effectivePresets(); track preset.label) {
+              <button
+                type="button"
+                class="ds-date-picker__preset"
+                [disabled]="disabled()"
+                (click)="selectPreset(preset)">
+                {{ preset.label }}
+              </button>
+            }
+          </div>
+        }
+
         <!-- Actions -->
         @if (showTodayButton() || showClearButton()) {
           <div class="ds-date-picker__actions">
@@ -7072,7 +7186,7 @@ class DsDatePicker {
         }
       }
     </div>
-  `, isInline: true, styles: [".ds-date-picker{display:inline-flex;flex-direction:column;background:var(--datepicker-bg, var(--background-main, #fff));border:1px solid var(--datepicker-border, var(--border-default, #d1d5db));border-radius:var(--datepicker-radius, var(--radius-2, 6px));box-shadow:var(--datepicker-shadow, var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, .1)));overflow:hidden;-webkit-user-select:none;user-select:none}.ds-date-picker--sm{width:260px;font-size:var(--font-size-2, .875rem)}.ds-date-picker--sm .ds-date-picker__header{padding:var(--space-2, .5rem)}.ds-date-picker--sm .ds-date-picker__nav{width:24px;height:24px}.ds-date-picker--sm .ds-date-picker__day{width:28px;height:28px}.ds-date-picker--sm .ds-date-picker__weekday{width:28px;height:24px}.ds-date-picker--md{width:300px;font-size:var(--font-size-3, 1rem)}.ds-date-picker--md .ds-date-picker__header{padding:var(--space-3, .75rem)}.ds-date-picker--md .ds-date-picker__nav{width:32px;height:32px}.ds-date-picker--md .ds-date-picker__day{width:36px;height:36px}.ds-date-picker--md .ds-date-picker__weekday{width:36px;height:28px}.ds-date-picker--lg{width:360px;font-size:var(--font-size-4, 1.125rem)}.ds-date-picker--lg .ds-date-picker__header{padding:var(--space-4, 1rem)}.ds-date-picker--lg .ds-date-picker__nav{width:40px;height:40px}.ds-date-picker--lg .ds-date-picker__day{width:44px;height:44px}.ds-date-picker--lg .ds-date-picker__weekday{width:44px;height:32px}.ds-date-picker--disabled{opacity:.6;pointer-events:none}.ds-date-picker__header{display:flex;align-items:center;justify-content:space-between;background:var(--datepicker-header-bg, var(--background-subtle, #f9fafb));border-bottom:1px solid var(--datepicker-border, var(--border-default, #d1d5db))}.ds-date-picker__title{display:flex;align-items:center;gap:var(--space-1, .25rem)}.ds-date-picker__month-btn,.ds-date-picker__year-btn{padding:var(--space-1, .25rem) var(--space-2, .5rem);background:transparent;border:none;border-radius:var(--radius-1, 4px);color:var(--text-default, #1f2937);font-weight:600;cursor:pointer;transition:background-color .15s ease}.ds-date-picker__month-btn:hover:not(:disabled),.ds-date-picker__year-btn:hover:not(:disabled){background:var(--background-muted, #e5e7eb)}.ds-date-picker__month-btn:focus-visible,.ds-date-picker__year-btn:focus-visible{outline:2px solid var(--color-primary, #3b82f6);outline-offset:1px}.ds-date-picker__month-btn:disabled,.ds-date-picker__year-btn:disabled{cursor:not-allowed;opacity:.5}.ds-date-picker__nav{display:flex;align-items:center;justify-content:center;background:transparent;border:none;border-radius:var(--radius-1, 4px);color:var(--text-muted, #6b7280);cursor:pointer;transition:background-color .15s ease,color .15s ease}.ds-date-picker__nav:hover:not(:disabled){background:var(--background-muted, #e5e7eb);color:var(--text-default, #1f2937)}.ds-date-picker__nav:focus-visible{outline:2px solid var(--color-primary, #3b82f6);outline-offset:1px}.ds-date-picker__nav:disabled{cursor:not-allowed;opacity:.5}.ds-date-picker__calendar{padding:var(--space-2, .5rem)}.ds-date-picker__weekdays{display:flex;margin-bottom:var(--space-1, .25rem)}.ds-date-picker__weekday{display:flex;align-items:center;justify-content:center;color:var(--text-muted, #6b7280);font-size:.75em;font-weight:500;text-transform:uppercase}.ds-date-picker__days{display:flex;flex-direction:column;gap:var(--space-1, .25rem)}.ds-date-picker__week{display:flex}.ds-date-picker__day{display:flex;align-items:center;justify-content:center;background:transparent;border:none;border-radius:var(--radius-1, 4px);color:var(--text-default, #1f2937);font-weight:400;cursor:pointer;transition:background-color .15s ease,color .15s ease}.ds-date-picker__day:hover:not(:disabled):not(.ds-date-picker__day--selected){background:var(--background-subtle, #f3f4f6)}.ds-date-picker__day:focus-visible{outline:2px solid var(--color-primary, #3b82f6);outline-offset:-2px;z-index:1}.ds-date-picker__day--other-month{color:var(--text-muted, #9ca3af)}.ds-date-picker__day--today{font-weight:600;border:1px solid var(--color-primary, #3b82f6)}.ds-date-picker__day--selected{background:var(--color-primary, #3b82f6);color:var(--color-primary-text, #fff);font-weight:600}.ds-date-picker__day--selected:hover:not(:disabled){background:var(--color-primary-hover, #2563eb)}.ds-date-picker__day--range-start{background:var(--color-primary, #3b82f6);color:var(--color-primary-text, #fff);border-radius:var(--radius-1, 4px) 0 0 var(--radius-1, 4px)}.ds-date-picker__day--range-end{background:var(--color-primary, #3b82f6);color:var(--color-primary-text, #fff);border-radius:0 var(--radius-1, 4px) var(--radius-1, 4px) 0}.ds-date-picker__day--in-range{background:var(--color-primary-subtle, rgba(59, 130, 246, .15));border-radius:0}.ds-date-picker__day--disabled{opacity:.4;cursor:not-allowed}.ds-date-picker__month-picker,.ds-date-picker__year-picker{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-2, .5rem);padding:var(--space-3, .75rem);max-height:240px;overflow-y:auto}.ds-date-picker__month-option,.ds-date-picker__year-option{padding:var(--space-2, .5rem);background:transparent;border:1px solid transparent;border-radius:var(--radius-1, 4px);color:var(--text-default, #1f2937);cursor:pointer;transition:background-color .15s ease,border-color .15s ease}.ds-date-picker__month-option:hover:not(:disabled),.ds-date-picker__year-option:hover:not(:disabled){background:var(--background-subtle, #f3f4f6);border-color:var(--border-default, #d1d5db)}.ds-date-picker__month-option:focus-visible,.ds-date-picker__year-option:focus-visible{outline:2px solid var(--color-primary, #3b82f6);outline-offset:1px}.ds-date-picker__month-option--selected,.ds-date-picker__year-option--selected{background:var(--color-primary, #3b82f6);color:var(--color-primary-text, #fff);border-color:var(--color-primary, #3b82f6)}.ds-date-picker__month-option--selected:hover:not(:disabled),.ds-date-picker__year-option--selected:hover:not(:disabled){background:var(--color-primary-hover, #2563eb);border-color:var(--color-primary-hover, #2563eb)}.ds-date-picker__month-option:disabled,.ds-date-picker__year-option:disabled{cursor:not-allowed;opacity:.5}.ds-date-picker__actions{display:flex;justify-content:center;gap:var(--space-2, .5rem);padding:var(--space-2, .5rem);border-top:1px solid var(--datepicker-border, var(--border-default, #d1d5db));background:var(--datepicker-footer-bg, var(--background-subtle, #f9fafb))}.ds-date-picker__action{padding:var(--space-1, .25rem) var(--space-3, .75rem);background:transparent;border:1px solid var(--border-default, #d1d5db);border-radius:var(--radius-1, 4px);color:var(--text-default, #1f2937);font-size:.875em;cursor:pointer;transition:background-color .15s ease,border-color .15s ease}.ds-date-picker__action:hover:not(:disabled){background:var(--background-muted, #e5e7eb);border-color:var(--border-hover, #9ca3af)}.ds-date-picker__action:focus-visible{outline:2px solid var(--color-primary, #3b82f6);outline-offset:1px}.ds-date-picker__action:disabled{cursor:not-allowed;opacity:.5}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".ds-date-picker{display:inline-flex;flex-direction:column;background:var(--datepicker-bg, var(--background-main));border:1px solid var(--datepicker-border, var(--border-default));border-radius:var(--datepicker-radius, var(--radius-2));box-shadow:var(--datepicker-shadow, var(--shadow-2));overflow:hidden;-webkit-user-select:none;user-select:none}.ds-date-picker--sm{width:var(--datepicker-width-sm, 260px);font-size:var(--datepicker-font-size-sm, var(--font-size-2))}.ds-date-picker--sm .ds-date-picker__header{padding:var(--datepicker-header-padding-sm, var(--space-2))}.ds-date-picker--sm .ds-date-picker__nav{width:var(--datepicker-nav-size-sm, 24px);height:var(--datepicker-nav-size-sm, 24px)}.ds-date-picker--sm .ds-date-picker__day{width:var(--datepicker-day-size-sm, 28px);height:var(--datepicker-day-size-sm, 28px)}.ds-date-picker--sm .ds-date-picker__weekday{width:var(--datepicker-day-size-sm, 28px);height:var(--datepicker-weekday-height-sm, 24px)}.ds-date-picker--md{width:var(--datepicker-width-md, 300px);font-size:var(--datepicker-font-size-md, var(--font-size-3))}.ds-date-picker--md .ds-date-picker__header{padding:var(--datepicker-header-padding-md, var(--space-3))}.ds-date-picker--md .ds-date-picker__nav{width:var(--datepicker-nav-size-md, 32px);height:var(--datepicker-nav-size-md, 32px)}.ds-date-picker--md .ds-date-picker__day{width:var(--datepicker-day-size-md, 36px);height:var(--datepicker-day-size-md, 36px)}.ds-date-picker--md .ds-date-picker__weekday{width:var(--datepicker-day-size-md, 36px);height:var(--datepicker-weekday-height-md, 28px)}.ds-date-picker--lg{width:var(--datepicker-width-lg, 360px);font-size:var(--datepicker-font-size-lg, var(--font-size-4))}.ds-date-picker--lg .ds-date-picker__header{padding:var(--datepicker-header-padding-lg, var(--space-4))}.ds-date-picker--lg .ds-date-picker__nav{width:var(--datepicker-nav-size-lg, 40px);height:var(--datepicker-nav-size-lg, 40px)}.ds-date-picker--lg .ds-date-picker__day{width:var(--datepicker-day-size-lg, 44px);height:var(--datepicker-day-size-lg, 44px)}.ds-date-picker--lg .ds-date-picker__weekday{width:var(--datepicker-day-size-lg, 44px);height:var(--datepicker-weekday-height-lg, 32px)}.ds-date-picker--disabled{opacity:.6;pointer-events:none}.ds-date-picker__header{display:flex;align-items:center;justify-content:space-between;background:var(--datepicker-header-bg, var(--surface-raised));border-bottom:1px solid var(--datepicker-border, var(--border-default))}.ds-date-picker__title{display:flex;align-items:center;gap:var(--space-1)}.ds-date-picker__month-btn,.ds-date-picker__year-btn{padding:var(--space-1) var(--space-2);background:transparent;border:none;border-radius:var(--radius-1);color:var(--datepicker-title-color, var(--text-default));font-weight:600;cursor:pointer;transition:background-color var(--duration-fast, .15s) ease}.ds-date-picker__month-btn:hover:not(:disabled),.ds-date-picker__year-btn:hover:not(:disabled){background:var(--datepicker-btn-hover-bg, var(--surface-hover))}.ds-date-picker__month-btn:focus-visible,.ds-date-picker__year-btn:focus-visible{outline:2px solid var(--color-primary);outline-offset:1px}.ds-date-picker__month-btn:disabled,.ds-date-picker__year-btn:disabled{cursor:not-allowed;opacity:.5}.ds-date-picker__nav{display:flex;align-items:center;justify-content:center;background:transparent;border:none;border-radius:var(--radius-1);color:var(--datepicker-nav-color, var(--text-muted));cursor:pointer;transition:background-color var(--duration-fast, .15s) ease,color var(--duration-fast, .15s) ease}.ds-date-picker__nav:hover:not(:disabled){background:var(--datepicker-btn-hover-bg, var(--surface-hover));color:var(--text-default)}.ds-date-picker__nav:focus-visible{outline:2px solid var(--color-primary);outline-offset:1px}.ds-date-picker__nav:disabled{cursor:not-allowed;opacity:.5}.ds-date-picker__calendar{padding:var(--datepicker-calendar-padding, var(--space-2))}.ds-date-picker__weekdays{display:flex;margin-bottom:var(--datepicker-calendar-gap, var(--space-1))}.ds-date-picker__weekday{display:flex;align-items:center;justify-content:center;color:var(--datepicker-weekday-color, var(--text-muted));font-size:.75em;font-weight:500;text-transform:uppercase}.ds-date-picker__days{display:flex;flex-direction:column;gap:var(--datepicker-calendar-gap, var(--space-1))}.ds-date-picker__week{display:flex}.ds-date-picker__day{display:flex;align-items:center;justify-content:center;background:transparent;border:none;border-radius:var(--radius-1);color:var(--datepicker-day-color, var(--text-default));font-weight:400;cursor:pointer;transition:background-color var(--duration-fast, .15s) ease,color var(--duration-fast, .15s) ease}.ds-date-picker__day:hover:not(:disabled):not(.ds-date-picker__day--selected){background:var(--datepicker-day-hover-bg, var(--surface-hover))}.ds-date-picker__day:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px;z-index:1}.ds-date-picker__day--other-month{color:var(--datepicker-day-other-color, var(--text-muted))}.ds-date-picker__day--today{font-weight:600;border:1px solid var(--datepicker-today-border, var(--color-primary))}.ds-date-picker__day--selected{background:var(--datepicker-selected-bg, var(--color-primary));color:var(--datepicker-selected-text, var(--gray-50));font-weight:600}.ds-date-picker__day--selected:hover:not(:disabled){background:var(--datepicker-selected-hover-bg, color-mix(in oklab, var(--color-primary) 85%, var(--background-main)))}.ds-date-picker__day--range-start{background:var(--datepicker-selected-bg, var(--color-primary));color:var(--datepicker-selected-text, var(--gray-50));border-radius:var(--radius-1) 0 0 var(--radius-1)}.ds-date-picker__day--range-end{background:var(--datepicker-selected-bg, var(--color-primary));color:var(--datepicker-selected-text, var(--gray-50));border-radius:0 var(--radius-1) var(--radius-1) 0}.ds-date-picker__day--in-range{background:var(--datepicker-range-bg, color-mix(in oklab, var(--color-primary) 15%, transparent));border-radius:0}.ds-date-picker__day--in-preview{background:var(--datepicker-preview-bg, color-mix(in oklab, var(--color-primary) 10%, transparent));border-radius:0}.ds-date-picker__day--disabled{opacity:.4;cursor:not-allowed}.ds-date-picker__month-picker,.ds-date-picker__year-picker{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-2);padding:var(--space-3);max-height:240px;overflow-y:auto}.ds-date-picker__month-option,.ds-date-picker__year-option{padding:var(--space-2);background:transparent;border:1px solid transparent;border-radius:var(--radius-1);color:var(--datepicker-option-color, var(--text-default));cursor:pointer;transition:background-color var(--duration-fast, .15s) ease,border-color var(--duration-fast, .15s) ease}.ds-date-picker__month-option:hover:not(:disabled),.ds-date-picker__year-option:hover:not(:disabled){background:var(--datepicker-option-hover-bg, var(--surface-hover));border-color:var(--border-default)}.ds-date-picker__month-option:focus-visible,.ds-date-picker__year-option:focus-visible{outline:2px solid var(--color-primary);outline-offset:1px}.ds-date-picker__month-option--selected,.ds-date-picker__year-option--selected{background:var(--datepicker-selected-bg, var(--color-primary));color:var(--datepicker-selected-text, var(--gray-50));border-color:var(--datepicker-selected-bg, var(--color-primary))}.ds-date-picker__month-option--selected:hover:not(:disabled),.ds-date-picker__year-option--selected:hover:not(:disabled){background:var(--datepicker-selected-hover-bg, color-mix(in oklab, var(--color-primary) 85%, var(--background-main)));border-color:var(--datepicker-selected-hover-bg, color-mix(in oklab, var(--color-primary) 85%, var(--background-main)))}.ds-date-picker__month-option:disabled,.ds-date-picker__year-option:disabled{cursor:not-allowed;opacity:.5}.ds-date-picker__actions{display:flex;justify-content:center;gap:var(--space-2);padding:var(--space-2);border-top:1px solid var(--datepicker-border, var(--border-default));background:var(--datepicker-footer-bg, var(--surface-raised))}.ds-date-picker__action{padding:var(--space-1) var(--space-3);background:transparent;border:1px solid var(--border-default);border-radius:var(--radius-1);color:var(--datepicker-action-color, var(--text-default));font-size:.875em;cursor:pointer;transition:background-color var(--duration-fast, .15s) ease,border-color var(--duration-fast, .15s) ease}.ds-date-picker__action:hover:not(:disabled){background:var(--datepicker-action-hover-bg, var(--surface-hover));border-color:var(--border-strong)}.ds-date-picker__action:focus-visible{outline:2px solid var(--color-primary);outline-offset:1px}.ds-date-picker__action:disabled{cursor:not-allowed;opacity:.5}.ds-date-picker__presets{display:flex;flex-wrap:wrap;gap:var(--space-1);padding:var(--space-2);border-top:1px solid var(--datepicker-border, var(--border-default));background:var(--datepicker-presets-bg, var(--surface-raised))}.ds-date-picker__preset{padding:var(--space-1) var(--space-2);background:var(--datepicker-preset-bg, transparent);border:1px solid var(--datepicker-preset-border, var(--border-default));border-radius:var(--radius-1);color:var(--datepicker-preset-color, var(--text-muted));font-size:.75em;font-weight:500;cursor:pointer;transition:background-color var(--duration-fast, .15s) ease,border-color var(--duration-fast, .15s) ease,color var(--duration-fast, .15s) ease}.ds-date-picker__preset:hover:not(:disabled){background:var(--datepicker-preset-hover-bg, var(--surface-hover));border-color:var(--color-primary);color:var(--text-default)}.ds-date-picker__preset:focus-visible{outline:2px solid var(--color-primary);outline-offset:1px}.ds-date-picker__preset:disabled{cursor:not-allowed;opacity:.5}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i1$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsDatePicker, decorators: [{
             type: Component,
@@ -7176,13 +7290,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                     [class.ds-date-picker__day--range-start]="day.isRangeStart"
                     [class.ds-date-picker__day--range-end]="day.isRangeEnd"
                     [class.ds-date-picker__day--in-range]="day.isInRange"
+                    [class.ds-date-picker__day--in-preview]="day.isInPreviewRange"
                     [class.ds-date-picker__day--disabled]="day.isDisabled"
                     [disabled]="disabled() || day.isDisabled"
                     role="gridcell"
                     [attr.aria-selected]="day.isSelected"
                     [attr.aria-label]="day.ariaLabel"
                     (click)="selectDate(day.date)"
-                    (keydown)="onDayKeydown($event, day.date)">
+                    (keydown)="onDayKeydown($event, day.date)"
+                    (mouseenter)="onDayMouseEnter(day.date)"
+                    (mouseleave)="onDayMouseLeave()">
                     {{ day.dayNumber }}
                   </button>
                 }
@@ -7191,6 +7308,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
           </div>
         </div>
 
+        <!-- Presets (mode range uniquement) -->
+        @if (showPresets() && mode() === 'range') {
+          <div class="ds-date-picker__presets">
+            @for (preset of effectivePresets(); track preset.label) {
+              <button
+                type="button"
+                class="ds-date-picker__preset"
+                [disabled]="disabled()"
+                (click)="selectPreset(preset)">
+                {{ preset.label }}
+              </button>
+            }
+          </div>
+        }
+
         <!-- Actions -->
         @if (showTodayButton() || showClearButton()) {
           <div class="ds-date-picker__actions">
@@ -7222,8 +7354,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                             useExisting: forwardRef(() => DsDatePicker),
                             multi: true,
                         },
-                    ], styles: [".ds-date-picker{display:inline-flex;flex-direction:column;background:var(--datepicker-bg, var(--background-main, #fff));border:1px solid var(--datepicker-border, var(--border-default, #d1d5db));border-radius:var(--datepicker-radius, var(--radius-2, 6px));box-shadow:var(--datepicker-shadow, var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, .1)));overflow:hidden;-webkit-user-select:none;user-select:none}.ds-date-picker--sm{width:260px;font-size:var(--font-size-2, .875rem)}.ds-date-picker--sm .ds-date-picker__header{padding:var(--space-2, .5rem)}.ds-date-picker--sm .ds-date-picker__nav{width:24px;height:24px}.ds-date-picker--sm .ds-date-picker__day{width:28px;height:28px}.ds-date-picker--sm .ds-date-picker__weekday{width:28px;height:24px}.ds-date-picker--md{width:300px;font-size:var(--font-size-3, 1rem)}.ds-date-picker--md .ds-date-picker__header{padding:var(--space-3, .75rem)}.ds-date-picker--md .ds-date-picker__nav{width:32px;height:32px}.ds-date-picker--md .ds-date-picker__day{width:36px;height:36px}.ds-date-picker--md .ds-date-picker__weekday{width:36px;height:28px}.ds-date-picker--lg{width:360px;font-size:var(--font-size-4, 1.125rem)}.ds-date-picker--lg .ds-date-picker__header{padding:var(--space-4, 1rem)}.ds-date-picker--lg .ds-date-picker__nav{width:40px;height:40px}.ds-date-picker--lg .ds-date-picker__day{width:44px;height:44px}.ds-date-picker--lg .ds-date-picker__weekday{width:44px;height:32px}.ds-date-picker--disabled{opacity:.6;pointer-events:none}.ds-date-picker__header{display:flex;align-items:center;justify-content:space-between;background:var(--datepicker-header-bg, var(--background-subtle, #f9fafb));border-bottom:1px solid var(--datepicker-border, var(--border-default, #d1d5db))}.ds-date-picker__title{display:flex;align-items:center;gap:var(--space-1, .25rem)}.ds-date-picker__month-btn,.ds-date-picker__year-btn{padding:var(--space-1, .25rem) var(--space-2, .5rem);background:transparent;border:none;border-radius:var(--radius-1, 4px);color:var(--text-default, #1f2937);font-weight:600;cursor:pointer;transition:background-color .15s ease}.ds-date-picker__month-btn:hover:not(:disabled),.ds-date-picker__year-btn:hover:not(:disabled){background:var(--background-muted, #e5e7eb)}.ds-date-picker__month-btn:focus-visible,.ds-date-picker__year-btn:focus-visible{outline:2px solid var(--color-primary, #3b82f6);outline-offset:1px}.ds-date-picker__month-btn:disabled,.ds-date-picker__year-btn:disabled{cursor:not-allowed;opacity:.5}.ds-date-picker__nav{display:flex;align-items:center;justify-content:center;background:transparent;border:none;border-radius:var(--radius-1, 4px);color:var(--text-muted, #6b7280);cursor:pointer;transition:background-color .15s ease,color .15s ease}.ds-date-picker__nav:hover:not(:disabled){background:var(--background-muted, #e5e7eb);color:var(--text-default, #1f2937)}.ds-date-picker__nav:focus-visible{outline:2px solid var(--color-primary, #3b82f6);outline-offset:1px}.ds-date-picker__nav:disabled{cursor:not-allowed;opacity:.5}.ds-date-picker__calendar{padding:var(--space-2, .5rem)}.ds-date-picker__weekdays{display:flex;margin-bottom:var(--space-1, .25rem)}.ds-date-picker__weekday{display:flex;align-items:center;justify-content:center;color:var(--text-muted, #6b7280);font-size:.75em;font-weight:500;text-transform:uppercase}.ds-date-picker__days{display:flex;flex-direction:column;gap:var(--space-1, .25rem)}.ds-date-picker__week{display:flex}.ds-date-picker__day{display:flex;align-items:center;justify-content:center;background:transparent;border:none;border-radius:var(--radius-1, 4px);color:var(--text-default, #1f2937);font-weight:400;cursor:pointer;transition:background-color .15s ease,color .15s ease}.ds-date-picker__day:hover:not(:disabled):not(.ds-date-picker__day--selected){background:var(--background-subtle, #f3f4f6)}.ds-date-picker__day:focus-visible{outline:2px solid var(--color-primary, #3b82f6);outline-offset:-2px;z-index:1}.ds-date-picker__day--other-month{color:var(--text-muted, #9ca3af)}.ds-date-picker__day--today{font-weight:600;border:1px solid var(--color-primary, #3b82f6)}.ds-date-picker__day--selected{background:var(--color-primary, #3b82f6);color:var(--color-primary-text, #fff);font-weight:600}.ds-date-picker__day--selected:hover:not(:disabled){background:var(--color-primary-hover, #2563eb)}.ds-date-picker__day--range-start{background:var(--color-primary, #3b82f6);color:var(--color-primary-text, #fff);border-radius:var(--radius-1, 4px) 0 0 var(--radius-1, 4px)}.ds-date-picker__day--range-end{background:var(--color-primary, #3b82f6);color:var(--color-primary-text, #fff);border-radius:0 var(--radius-1, 4px) var(--radius-1, 4px) 0}.ds-date-picker__day--in-range{background:var(--color-primary-subtle, rgba(59, 130, 246, .15));border-radius:0}.ds-date-picker__day--disabled{opacity:.4;cursor:not-allowed}.ds-date-picker__month-picker,.ds-date-picker__year-picker{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-2, .5rem);padding:var(--space-3, .75rem);max-height:240px;overflow-y:auto}.ds-date-picker__month-option,.ds-date-picker__year-option{padding:var(--space-2, .5rem);background:transparent;border:1px solid transparent;border-radius:var(--radius-1, 4px);color:var(--text-default, #1f2937);cursor:pointer;transition:background-color .15s ease,border-color .15s ease}.ds-date-picker__month-option:hover:not(:disabled),.ds-date-picker__year-option:hover:not(:disabled){background:var(--background-subtle, #f3f4f6);border-color:var(--border-default, #d1d5db)}.ds-date-picker__month-option:focus-visible,.ds-date-picker__year-option:focus-visible{outline:2px solid var(--color-primary, #3b82f6);outline-offset:1px}.ds-date-picker__month-option--selected,.ds-date-picker__year-option--selected{background:var(--color-primary, #3b82f6);color:var(--color-primary-text, #fff);border-color:var(--color-primary, #3b82f6)}.ds-date-picker__month-option--selected:hover:not(:disabled),.ds-date-picker__year-option--selected:hover:not(:disabled){background:var(--color-primary-hover, #2563eb);border-color:var(--color-primary-hover, #2563eb)}.ds-date-picker__month-option:disabled,.ds-date-picker__year-option:disabled{cursor:not-allowed;opacity:.5}.ds-date-picker__actions{display:flex;justify-content:center;gap:var(--space-2, .5rem);padding:var(--space-2, .5rem);border-top:1px solid var(--datepicker-border, var(--border-default, #d1d5db));background:var(--datepicker-footer-bg, var(--background-subtle, #f9fafb))}.ds-date-picker__action{padding:var(--space-1, .25rem) var(--space-3, .75rem);background:transparent;border:1px solid var(--border-default, #d1d5db);border-radius:var(--radius-1, 4px);color:var(--text-default, #1f2937);font-size:.875em;cursor:pointer;transition:background-color .15s ease,border-color .15s ease}.ds-date-picker__action:hover:not(:disabled){background:var(--background-muted, #e5e7eb);border-color:var(--border-hover, #9ca3af)}.ds-date-picker__action:focus-visible{outline:2px solid var(--color-primary, #3b82f6);outline-offset:1px}.ds-date-picker__action:disabled{cursor:not-allowed;opacity:.5}\n"] }]
-        }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], showTodayButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTodayButton", required: false }] }], showClearButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearButton", required: false }] }], todayLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "todayLabel", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }], prevMonthLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "prevMonthLabel", required: false }] }], nextMonthLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextMonthLabel", required: false }] }], dateChange: [{ type: i0.Output, args: ["dateChange"] }], rangeChange: [{ type: i0.Output, args: ["rangeChange"] }] } });
+                    ], styles: [".ds-date-picker{display:inline-flex;flex-direction:column;background:var(--datepicker-bg, var(--background-main));border:1px solid var(--datepicker-border, var(--border-default));border-radius:var(--datepicker-radius, var(--radius-2));box-shadow:var(--datepicker-shadow, var(--shadow-2));overflow:hidden;-webkit-user-select:none;user-select:none}.ds-date-picker--sm{width:var(--datepicker-width-sm, 260px);font-size:var(--datepicker-font-size-sm, var(--font-size-2))}.ds-date-picker--sm .ds-date-picker__header{padding:var(--datepicker-header-padding-sm, var(--space-2))}.ds-date-picker--sm .ds-date-picker__nav{width:var(--datepicker-nav-size-sm, 24px);height:var(--datepicker-nav-size-sm, 24px)}.ds-date-picker--sm .ds-date-picker__day{width:var(--datepicker-day-size-sm, 28px);height:var(--datepicker-day-size-sm, 28px)}.ds-date-picker--sm .ds-date-picker__weekday{width:var(--datepicker-day-size-sm, 28px);height:var(--datepicker-weekday-height-sm, 24px)}.ds-date-picker--md{width:var(--datepicker-width-md, 300px);font-size:var(--datepicker-font-size-md, var(--font-size-3))}.ds-date-picker--md .ds-date-picker__header{padding:var(--datepicker-header-padding-md, var(--space-3))}.ds-date-picker--md .ds-date-picker__nav{width:var(--datepicker-nav-size-md, 32px);height:var(--datepicker-nav-size-md, 32px)}.ds-date-picker--md .ds-date-picker__day{width:var(--datepicker-day-size-md, 36px);height:var(--datepicker-day-size-md, 36px)}.ds-date-picker--md .ds-date-picker__weekday{width:var(--datepicker-day-size-md, 36px);height:var(--datepicker-weekday-height-md, 28px)}.ds-date-picker--lg{width:var(--datepicker-width-lg, 360px);font-size:var(--datepicker-font-size-lg, var(--font-size-4))}.ds-date-picker--lg .ds-date-picker__header{padding:var(--datepicker-header-padding-lg, var(--space-4))}.ds-date-picker--lg .ds-date-picker__nav{width:var(--datepicker-nav-size-lg, 40px);height:var(--datepicker-nav-size-lg, 40px)}.ds-date-picker--lg .ds-date-picker__day{width:var(--datepicker-day-size-lg, 44px);height:var(--datepicker-day-size-lg, 44px)}.ds-date-picker--lg .ds-date-picker__weekday{width:var(--datepicker-day-size-lg, 44px);height:var(--datepicker-weekday-height-lg, 32px)}.ds-date-picker--disabled{opacity:.6;pointer-events:none}.ds-date-picker__header{display:flex;align-items:center;justify-content:space-between;background:var(--datepicker-header-bg, var(--surface-raised));border-bottom:1px solid var(--datepicker-border, var(--border-default))}.ds-date-picker__title{display:flex;align-items:center;gap:var(--space-1)}.ds-date-picker__month-btn,.ds-date-picker__year-btn{padding:var(--space-1) var(--space-2);background:transparent;border:none;border-radius:var(--radius-1);color:var(--datepicker-title-color, var(--text-default));font-weight:600;cursor:pointer;transition:background-color var(--duration-fast, .15s) ease}.ds-date-picker__month-btn:hover:not(:disabled),.ds-date-picker__year-btn:hover:not(:disabled){background:var(--datepicker-btn-hover-bg, var(--surface-hover))}.ds-date-picker__month-btn:focus-visible,.ds-date-picker__year-btn:focus-visible{outline:2px solid var(--color-primary);outline-offset:1px}.ds-date-picker__month-btn:disabled,.ds-date-picker__year-btn:disabled{cursor:not-allowed;opacity:.5}.ds-date-picker__nav{display:flex;align-items:center;justify-content:center;background:transparent;border:none;border-radius:var(--radius-1);color:var(--datepicker-nav-color, var(--text-muted));cursor:pointer;transition:background-color var(--duration-fast, .15s) ease,color var(--duration-fast, .15s) ease}.ds-date-picker__nav:hover:not(:disabled){background:var(--datepicker-btn-hover-bg, var(--surface-hover));color:var(--text-default)}.ds-date-picker__nav:focus-visible{outline:2px solid var(--color-primary);outline-offset:1px}.ds-date-picker__nav:disabled{cursor:not-allowed;opacity:.5}.ds-date-picker__calendar{padding:var(--datepicker-calendar-padding, var(--space-2))}.ds-date-picker__weekdays{display:flex;margin-bottom:var(--datepicker-calendar-gap, var(--space-1))}.ds-date-picker__weekday{display:flex;align-items:center;justify-content:center;color:var(--datepicker-weekday-color, var(--text-muted));font-size:.75em;font-weight:500;text-transform:uppercase}.ds-date-picker__days{display:flex;flex-direction:column;gap:var(--datepicker-calendar-gap, var(--space-1))}.ds-date-picker__week{display:flex}.ds-date-picker__day{display:flex;align-items:center;justify-content:center;background:transparent;border:none;border-radius:var(--radius-1);color:var(--datepicker-day-color, var(--text-default));font-weight:400;cursor:pointer;transition:background-color var(--duration-fast, .15s) ease,color var(--duration-fast, .15s) ease}.ds-date-picker__day:hover:not(:disabled):not(.ds-date-picker__day--selected){background:var(--datepicker-day-hover-bg, var(--surface-hover))}.ds-date-picker__day:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px;z-index:1}.ds-date-picker__day--other-month{color:var(--datepicker-day-other-color, var(--text-muted))}.ds-date-picker__day--today{font-weight:600;border:1px solid var(--datepicker-today-border, var(--color-primary))}.ds-date-picker__day--selected{background:var(--datepicker-selected-bg, var(--color-primary));color:var(--datepicker-selected-text, var(--gray-50));font-weight:600}.ds-date-picker__day--selected:hover:not(:disabled){background:var(--datepicker-selected-hover-bg, color-mix(in oklab, var(--color-primary) 85%, var(--background-main)))}.ds-date-picker__day--range-start{background:var(--datepicker-selected-bg, var(--color-primary));color:var(--datepicker-selected-text, var(--gray-50));border-radius:var(--radius-1) 0 0 var(--radius-1)}.ds-date-picker__day--range-end{background:var(--datepicker-selected-bg, var(--color-primary));color:var(--datepicker-selected-text, var(--gray-50));border-radius:0 var(--radius-1) var(--radius-1) 0}.ds-date-picker__day--in-range{background:var(--datepicker-range-bg, color-mix(in oklab, var(--color-primary) 15%, transparent));border-radius:0}.ds-date-picker__day--in-preview{background:var(--datepicker-preview-bg, color-mix(in oklab, var(--color-primary) 10%, transparent));border-radius:0}.ds-date-picker__day--disabled{opacity:.4;cursor:not-allowed}.ds-date-picker__month-picker,.ds-date-picker__year-picker{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-2);padding:var(--space-3);max-height:240px;overflow-y:auto}.ds-date-picker__month-option,.ds-date-picker__year-option{padding:var(--space-2);background:transparent;border:1px solid transparent;border-radius:var(--radius-1);color:var(--datepicker-option-color, var(--text-default));cursor:pointer;transition:background-color var(--duration-fast, .15s) ease,border-color var(--duration-fast, .15s) ease}.ds-date-picker__month-option:hover:not(:disabled),.ds-date-picker__year-option:hover:not(:disabled){background:var(--datepicker-option-hover-bg, var(--surface-hover));border-color:var(--border-default)}.ds-date-picker__month-option:focus-visible,.ds-date-picker__year-option:focus-visible{outline:2px solid var(--color-primary);outline-offset:1px}.ds-date-picker__month-option--selected,.ds-date-picker__year-option--selected{background:var(--datepicker-selected-bg, var(--color-primary));color:var(--datepicker-selected-text, var(--gray-50));border-color:var(--datepicker-selected-bg, var(--color-primary))}.ds-date-picker__month-option--selected:hover:not(:disabled),.ds-date-picker__year-option--selected:hover:not(:disabled){background:var(--datepicker-selected-hover-bg, color-mix(in oklab, var(--color-primary) 85%, var(--background-main)));border-color:var(--datepicker-selected-hover-bg, color-mix(in oklab, var(--color-primary) 85%, var(--background-main)))}.ds-date-picker__month-option:disabled,.ds-date-picker__year-option:disabled{cursor:not-allowed;opacity:.5}.ds-date-picker__actions{display:flex;justify-content:center;gap:var(--space-2);padding:var(--space-2);border-top:1px solid var(--datepicker-border, var(--border-default));background:var(--datepicker-footer-bg, var(--surface-raised))}.ds-date-picker__action{padding:var(--space-1) var(--space-3);background:transparent;border:1px solid var(--border-default);border-radius:var(--radius-1);color:var(--datepicker-action-color, var(--text-default));font-size:.875em;cursor:pointer;transition:background-color var(--duration-fast, .15s) ease,border-color var(--duration-fast, .15s) ease}.ds-date-picker__action:hover:not(:disabled){background:var(--datepicker-action-hover-bg, var(--surface-hover));border-color:var(--border-strong)}.ds-date-picker__action:focus-visible{outline:2px solid var(--color-primary);outline-offset:1px}.ds-date-picker__action:disabled{cursor:not-allowed;opacity:.5}.ds-date-picker__presets{display:flex;flex-wrap:wrap;gap:var(--space-1);padding:var(--space-2);border-top:1px solid var(--datepicker-border, var(--border-default));background:var(--datepicker-presets-bg, var(--surface-raised))}.ds-date-picker__preset{padding:var(--space-1) var(--space-2);background:var(--datepicker-preset-bg, transparent);border:1px solid var(--datepicker-preset-border, var(--border-default));border-radius:var(--radius-1);color:var(--datepicker-preset-color, var(--text-muted));font-size:.75em;font-weight:500;cursor:pointer;transition:background-color var(--duration-fast, .15s) ease,border-color var(--duration-fast, .15s) ease,color var(--duration-fast, .15s) ease}.ds-date-picker__preset:hover:not(:disabled){background:var(--datepicker-preset-hover-bg, var(--surface-hover));border-color:var(--color-primary);color:var(--text-default)}.ds-date-picker__preset:focus-visible{outline:2px solid var(--color-primary);outline-offset:1px}.ds-date-picker__preset:disabled{cursor:not-allowed;opacity:.5}\n"] }]
+        }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], showTodayButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTodayButton", required: false }] }], showClearButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearButton", required: false }] }], todayLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "todayLabel", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }], prevMonthLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "prevMonthLabel", required: false }] }], nextMonthLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextMonthLabel", required: false }] }], presets: [{ type: i0.Input, args: [{ isSignal: true, alias: "presets", required: false }] }], showPresets: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPresets", required: false }] }], showRangePreview: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRangePreview", required: false }] }], dateChange: [{ type: i0.Output, args: ["dateChange"] }], rangeChange: [{ type: i0.Output, args: ["rangeChange"] }] } });
 
 class DsAvatar {
     /** URL de l'image avatar */
@@ -7304,11 +7436,11 @@ class DsAvatar {
         this.imageError.set(false);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsAvatar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DsAvatar, isStandalone: true, selector: "ds-avatar", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, initials: { classPropertyName: "initials", publicName: "initials", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, autoColor: { classPropertyName: "autoColor", publicName: "autoColor", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  [ngClass]=\"containerClasses()\"\n  [style.background-color]=\"generatedBgColor()\"\n  [attr.role]=\"showImage() ? null : 'img'\"\n  [attr.aria-label]=\"showImage() ? null : ariaLabel()\"\n>\n  @if (showImage()) {\n    <img\n      [src]=\"src()\"\n      [alt]=\"ariaLabel()\"\n      class=\"ds-avatar__image\"\n      (error)=\"onImageError()\"\n      (load)=\"onImageLoad()\"\n    />\n  } @else {\n    <span class=\"ds-avatar__initials\" aria-hidden=\"true\">\n      {{ displayInitials() }}\n    </span>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:inline-block}.ds-avatar{display:flex;align-items:center;justify-content:center;overflow:hidden;background-color:var(--avatar-bg);color:var(--avatar-text);font-family:var(--font-family-base);font-weight:var(--font-weight-medium);-webkit-user-select:none;user-select:none}.ds-avatar--sm{width:var(--avatar-size-sm);height:var(--avatar-size-sm);font-size:var(--avatar-font-size-sm)}.ds-avatar--md{width:var(--avatar-size-md);height:var(--avatar-size-md);font-size:var(--avatar-font-size-md)}.ds-avatar--lg{width:var(--avatar-size-lg);height:var(--avatar-size-lg);font-size:var(--avatar-font-size-lg)}.ds-avatar--xl{width:var(--avatar-size-xl);height:var(--avatar-size-xl);font-size:var(--avatar-font-size-xl)}.ds-avatar--circle{border-radius:var(--avatar-radius-circle)}.ds-avatar--rounded{border-radius:var(--avatar-radius-rounded)}.ds-avatar--square{border-radius:var(--avatar-radius-square)}.ds-avatar--initials{background-color:var(--avatar-placeholder-bg);color:var(--avatar-placeholder-text)}.ds-avatar--has-image{background-color:transparent}.ds-avatar__image{width:100%;height:100%;object-fit:cover}.ds-avatar__initials{line-height:1;text-transform:uppercase;letter-spacing:var(--letter-spacing-tight)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DsAvatar, isStandalone: true, selector: "ds-avatar", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, initials: { classPropertyName: "initials", publicName: "initials", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, autoColor: { classPropertyName: "autoColor", publicName: "autoColor", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  [ngClass]=\"containerClasses()\"\n  [style.background-color]=\"generatedBgColor()\"\n  [attr.role]=\"showImage() ? null : 'img'\"\n  [attr.aria-label]=\"showImage() ? null : ariaLabel()\"\n>\n  @if (showImage()) {\n    <img\n      [src]=\"src()\"\n      [alt]=\"ariaLabel()\"\n      class=\"ds-avatar__image\"\n      (error)=\"onImageError()\"\n      (load)=\"onImageLoad()\"\n    />\n  } @else {\n    <span class=\"ds-avatar__initials\" aria-hidden=\"true\">\n      {{ displayInitials() }}\n    </span>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:inline-block}.ds-avatar{display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;background-color:var(--avatar-bg);color:var(--avatar-text);font-family:var(--font-family-base);font-weight:var(--font-weight-medium);-webkit-user-select:none;user-select:none;flex-shrink:0}.ds-avatar--sm{width:var(--avatar-size-sm);height:var(--avatar-size-sm);font-size:var(--avatar-font-size-sm)}.ds-avatar--md{width:var(--avatar-size-md);height:var(--avatar-size-md);font-size:var(--avatar-font-size-md)}.ds-avatar--lg{width:var(--avatar-size-lg);height:var(--avatar-size-lg);font-size:var(--avatar-font-size-lg)}.ds-avatar--xl{width:var(--avatar-size-xl);height:var(--avatar-size-xl);font-size:var(--avatar-font-size-xl)}.ds-avatar--circle{border-radius:var(--avatar-radius-circle)}.ds-avatar--rounded{border-radius:var(--avatar-radius-rounded)}.ds-avatar--square{border-radius:var(--avatar-radius-square)}.ds-avatar--initials{background-color:var(--avatar-placeholder-bg);color:var(--avatar-placeholder-text)}.ds-avatar--has-image{background-color:transparent}.ds-avatar__image{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}.ds-avatar__initials{line-height:1;text-transform:uppercase;letter-spacing:var(--letter-spacing-tight)}\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: DsAvatar, decorators: [{
             type: Component,
-            args: [{ selector: 'ds-avatar', standalone: true, imports: [CommonModule], template: "<div\n  [ngClass]=\"containerClasses()\"\n  [style.background-color]=\"generatedBgColor()\"\n  [attr.role]=\"showImage() ? null : 'img'\"\n  [attr.aria-label]=\"showImage() ? null : ariaLabel()\"\n>\n  @if (showImage()) {\n    <img\n      [src]=\"src()\"\n      [alt]=\"ariaLabel()\"\n      class=\"ds-avatar__image\"\n      (error)=\"onImageError()\"\n      (load)=\"onImageLoad()\"\n    />\n  } @else {\n    <span class=\"ds-avatar__initials\" aria-hidden=\"true\">\n      {{ displayInitials() }}\n    </span>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:inline-block}.ds-avatar{display:flex;align-items:center;justify-content:center;overflow:hidden;background-color:var(--avatar-bg);color:var(--avatar-text);font-family:var(--font-family-base);font-weight:var(--font-weight-medium);-webkit-user-select:none;user-select:none}.ds-avatar--sm{width:var(--avatar-size-sm);height:var(--avatar-size-sm);font-size:var(--avatar-font-size-sm)}.ds-avatar--md{width:var(--avatar-size-md);height:var(--avatar-size-md);font-size:var(--avatar-font-size-md)}.ds-avatar--lg{width:var(--avatar-size-lg);height:var(--avatar-size-lg);font-size:var(--avatar-font-size-lg)}.ds-avatar--xl{width:var(--avatar-size-xl);height:var(--avatar-size-xl);font-size:var(--avatar-font-size-xl)}.ds-avatar--circle{border-radius:var(--avatar-radius-circle)}.ds-avatar--rounded{border-radius:var(--avatar-radius-rounded)}.ds-avatar--square{border-radius:var(--avatar-radius-square)}.ds-avatar--initials{background-color:var(--avatar-placeholder-bg);color:var(--avatar-placeholder-text)}.ds-avatar--has-image{background-color:transparent}.ds-avatar__image{width:100%;height:100%;object-fit:cover}.ds-avatar__initials{line-height:1;text-transform:uppercase;letter-spacing:var(--letter-spacing-tight)}\n"] }]
+            args: [{ selector: 'ds-avatar', standalone: true, imports: [CommonModule], template: "<div\n  [ngClass]=\"containerClasses()\"\n  [style.background-color]=\"generatedBgColor()\"\n  [attr.role]=\"showImage() ? null : 'img'\"\n  [attr.aria-label]=\"showImage() ? null : ariaLabel()\"\n>\n  @if (showImage()) {\n    <img\n      [src]=\"src()\"\n      [alt]=\"ariaLabel()\"\n      class=\"ds-avatar__image\"\n      (error)=\"onImageError()\"\n      (load)=\"onImageLoad()\"\n    />\n  } @else {\n    <span class=\"ds-avatar__initials\" aria-hidden=\"true\">\n      {{ displayInitials() }}\n    </span>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:inline-block}.ds-avatar{display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;background-color:var(--avatar-bg);color:var(--avatar-text);font-family:var(--font-family-base);font-weight:var(--font-weight-medium);-webkit-user-select:none;user-select:none;flex-shrink:0}.ds-avatar--sm{width:var(--avatar-size-sm);height:var(--avatar-size-sm);font-size:var(--avatar-font-size-sm)}.ds-avatar--md{width:var(--avatar-size-md);height:var(--avatar-size-md);font-size:var(--avatar-font-size-md)}.ds-avatar--lg{width:var(--avatar-size-lg);height:var(--avatar-size-lg);font-size:var(--avatar-font-size-lg)}.ds-avatar--xl{width:var(--avatar-size-xl);height:var(--avatar-size-xl);font-size:var(--avatar-font-size-xl)}.ds-avatar--circle{border-radius:var(--avatar-radius-circle)}.ds-avatar--rounded{border-radius:var(--avatar-radius-rounded)}.ds-avatar--square{border-radius:var(--avatar-radius-square)}.ds-avatar--initials{background-color:var(--avatar-placeholder-bg);color:var(--avatar-placeholder-text)}.ds-avatar--has-image{background-color:transparent}.ds-avatar__image{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}.ds-avatar__initials{line-height:1;text-transform:uppercase;letter-spacing:var(--letter-spacing-tight)}\n"] }]
         }], propDecorators: { src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], alt: [{ type: i0.Input, args: [{ isSignal: true, alias: "alt", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], initials: [{ type: i0.Input, args: [{ isSignal: true, alias: "initials", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], autoColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoColor", required: false }] }] } });
 
 class DsMenu {
@@ -7522,7 +7654,7 @@ class DsMenu {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DsMenu, isStandalone: true, selector: "ds-menu", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelected: "itemSelected", opened: "opened", closed: "closed" }, viewQueries: [{ propertyName: "triggerElement", first: true, predicate: ["menuTrigger"], descendants: true, read: ElementRef }, { propertyName: "menuItemsRef", predicate: ["menuItemRef"], descendants: true }], ngImport: i0, template: "<div\n  #menuTrigger\n  cdkOverlayOrigin\n  #trigger=\"cdkOverlayOrigin\"\n  (click)=\"onTriggerClick($event)\"\n  (contextmenu)=\"onTriggerContextMenu($event)\"\n  (keydown)=\"onTriggerKeydown($event)\"\n  [attr.aria-haspopup]=\"'menu'\"\n  [attr.aria-expanded]=\"isOpen()\"\n  class=\"ds-menu__trigger\"\n>\n  <ng-content select=\"[dsMenuTrigger]\"></ng-content>\n</div>\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayPositions]=\"overlayPositions\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  [cdkConnectedOverlayBackdropClass]=\"'ds-menu-backdrop'\"\n  (backdropClick)=\"onBackdropClick()\"\n  (detach)=\"close(false)\"\n>\n  <div\n    [ngClass]=\"menuClasses()\"\n    role=\"menu\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-activedescendant]=\"activeDescendantId()\"\n    (keydown)=\"onMenuKeydown($event)\"\n  >\n    @for (item of items(); track item.id; let index = $index) {\n      @if (item.dividerBefore) {\n        <div class=\"ds-menu__divider\" role=\"separator\"></div>\n      }\n      <button\n        #menuItemRef\n        type=\"button\"\n        class=\"ds-menu__item\"\n        [class.ds-menu__item--disabled]=\"item.disabled\"\n        [class.ds-menu__item--active]=\"activeIndex() === index\"\n        [attr.id]=\"'menu-item-' + item.id\"\n        [attr.aria-disabled]=\"item.disabled || null\"\n        [disabled]=\"item.disabled\"\n        role=\"menuitem\"\n        (click)=\"selectItem(item)\"\n        (mouseenter)=\"onItemMouseEnter(index)\"\n      >\n        @if (item.icon) {\n          <fa-icon [icon]=\"item.icon\" class=\"ds-menu__item-icon\"></fa-icon>\n        }\n        <span class=\"ds-menu__item-label\">{{ item.label }}</span>\n      </button>\n    }\n  </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:inline-block}.ds-menu__trigger{display:inline-block;cursor:pointer}.ds-menu__panel{background:var(--menu-bg);border:1px solid var(--menu-border);border-radius:var(--menu-radius);box-shadow:var(--menu-shadow);padding:var(--menu-padding);min-width:var(--menu-min-width);max-width:var(--menu-max-width)}.ds-menu__panel--sm{--menu-item-height: var(--menu-item-height-sm);--menu-font-size: var(--menu-font-size-sm)}.ds-menu__panel--md{--menu-item-height: var(--menu-item-height-md);--menu-font-size: var(--menu-font-size-md)}.ds-menu__panel--lg{--menu-item-height: var(--menu-item-height-lg);--menu-font-size: var(--menu-font-size-lg)}.ds-menu__item{display:flex;align-items:center;width:100%;min-height:var(--menu-item-height);padding:var(--menu-item-padding-y) var(--menu-item-padding-x);gap:var(--menu-item-gap);border:none;border-radius:var(--menu-item-radius);background:transparent;color:var(--menu-item-text);font-size:var(--menu-font-size);font-family:var(--font-family-base);cursor:pointer;text-align:left;transition:background-color var(--duration-fast) var(--easing-default),color var(--duration-fast) var(--easing-default)}.ds-menu__item:hover:not(.ds-menu__item--disabled),.ds-menu__item--active:not(.ds-menu__item--disabled){background:var(--menu-item-hover-bg);color:var(--menu-item-hover-text)}.ds-menu__item:focus-visible{outline:2px solid var(--focus-color);outline-offset:-2px}.ds-menu__item--disabled{color:var(--menu-item-disabled-text);cursor:not-allowed}.ds-menu__item--disabled .ds-menu__item-icon{color:var(--menu-item-disabled-icon)}.ds-menu__item-icon{flex-shrink:0;color:var(--menu-item-icon);font-size:1em}.ds-menu__item-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ds-menu__divider{height:1px;margin:var(--menu-divider-margin) 0;background:var(--menu-divider)}::ng-deep .ds-menu-backdrop{background:var(--menu-backdrop)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.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"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DsMenu, isStandalone: true, selector: "ds-menu", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelected: "itemSelected", opened: "opened", closed: "closed" }, viewQueries: [{ propertyName: "triggerElement", first: true, predicate: ["menuTrigger"], descendants: true, read: ElementRef }, { propertyName: "menuItemsRef", predicate: ["menuItemRef"], descendants: true }], ngImport: i0, template: "<div\n  #menuTrigger\n  cdkOverlayOrigin\n  #trigger=\"cdkOverlayOrigin\"\n  (click)=\"onTriggerClick($event)\"\n  (contextmenu)=\"onTriggerContextMenu($event)\"\n  (keydown)=\"onTriggerKeydown($event)\"\n  [attr.aria-haspopup]=\"'menu'\"\n  [attr.aria-expanded]=\"isOpen()\"\n  class=\"ds-menu__trigger\"\n>\n  <ng-content select=\"[dsMenuTrigger]\"></ng-content>\n</div>\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayPositions]=\"overlayPositions\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  [cdkConnectedOverlayBackdropClass]=\"'ds-menu-backdrop'\"\n  (backdropClick)=\"onBackdropClick()\"\n  (detach)=\"close(false)\"\n>\n  <div\n    [ngClass]=\"menuClasses()\"\n    role=\"menu\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-activedescendant]=\"activeDescendantId()\"\n    (keydown)=\"onMenuKeydown($event)\"\n  >\n    @for (item of items(); track item.id; let index = $index) {\n      @if (item.dividerBefore) {\n        <div class=\"ds-menu__divider\" role=\"separator\"></div>\n      }\n      <button\n        #menuItemRef\n        type=\"button\"\n        class=\"ds-menu__item\"\n        [class.ds-menu__item--disabled]=\"item.disabled\"\n        [class.ds-menu__item--active]=\"activeIndex() === index\"\n        [attr.id]=\"'menu-item-' + item.id\"\n        [attr.aria-disabled]=\"item.disabled || null\"\n        [disabled]=\"item.disabled\"\n        role=\"menuitem\"\n        (click)=\"selectItem(item)\"\n        (mouseenter)=\"onItemMouseEnter(index)\"\n      >\n        @if (item.icon) {\n          <fa-icon [icon]=\"item.icon\" class=\"ds-menu__item-icon\"></fa-icon>\n        }\n        <span class=\"ds-menu__item-label\">{{ item.label }}</span>\n      </button>\n    }\n  </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:inline-block}.ds-menu__trigger{display:inline-block;cursor:pointer}.ds-menu__panel{background:var(--menu-bg);border:1px solid var(--menu-border);border-radius:var(--menu-radius);box-shadow:var(--menu-shadow);padding:var(--menu-padding);min-width:var(--menu-min-width);max-width:var(--menu-max-width)}.ds-menu__panel--sm{--menu-item-height: var(--menu-item-height-sm);--menu-font-size: var(--menu-font-size-sm)}.ds-menu__panel--md{--menu-item-height: var(--menu-item-height-md);--menu-font-size: var(--menu-font-size-md)}.ds-menu__panel--lg{--menu-item-height: var(--menu-item-height-lg);--menu-font-size: var(--menu-font-size-lg)}.ds-menu__item{display:flex;align-items:center;width:100%;min-height:var(--menu-item-height);padding:var(--menu-item-padding-y) var(--menu-item-padding-x);gap:var(--menu-item-gap);border:none;border-radius:var(--menu-item-radius);background:transparent;color:var(--menu-item-text);font-size:var(--menu-font-size);font-family:var(--font-family-base);cursor:pointer;text-align:left;transition:background-color var(--duration-fast) var(--easing-default),color var(--duration-fast) var(--easing-default)}.ds-menu__item:hover:not(.ds-menu__item--disabled),.ds-menu__item--active:not(.ds-menu__item--disabled){background:var(--menu-item-hover-bg);color:var(--menu-item-hover-text)}.ds-menu__item:focus-visible{outline:2px solid var(--focus-color);outline-offset:-2px}.ds-menu__item--disabled{color:var(--menu-item-disabled-text);cursor:not-allowed}.ds-menu__item--disabled .ds-menu__item-icon{color:var(--menu-item-disabled-icon)}.ds-menu__item-icon{flex-shrink:0;color:var(--menu-item-icon);font-size:1em}.ds-menu__item-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ds-menu__divider{height:1px;margin:var(--menu-divider-margin) 0;background:var(--menu-divider)}::ng-deep .ds-menu-backdrop{background:var(--menu-backdrop)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.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: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsMenu, decorators: [{
             type: Component,
@@ -7535,6 +7667,895 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                 args: ['menuItemRef']
             }] } });
 
+/**
+ * Design System Chip component
+ *
+ * @example
+ * ```html
+ * <ds-chip label="Tag" />
+ * <ds-chip label="Removable" [removable]="true" (removed)="onRemove()" />
+ * <ds-chip label="Clickable" [clickable]="true" (clicked)="onClick()" />
+ * <ds-chip label="With icon" icon="fas-star" />
+ * ```
+ */
+class DsChip {
+    // Inputs
+    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
+    variant = input('filled', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    color = input('default', ...(ngDevMode ? [{ debugName: "color" }] : []));
+    removable = input(false, ...(ngDevMode ? [{ debugName: "removable" }] : []));
+    clickable = input(false, ...(ngDevMode ? [{ debugName: "clickable" }] : []));
+    selected = input(false, ...(ngDevMode ? [{ debugName: "selected" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    icon = input('', ...(ngDevMode ? [{ debugName: "icon" }] : []));
+    avatar = input('', ...(ngDevMode ? [{ debugName: "avatar" }] : []));
+    // Outputs
+    removed = output();
+    clicked = output();
+    selectedChange = output();
+    // Internal state
+    isSelected = signal(false, ...(ngDevMode ? [{ debugName: "isSelected" }] : []));
+    // Icons
+    closeIcon = faXmark;
+    // Computed classes
+    chipClasses = computed(() => {
+        const classes = ['ds-chip'];
+        classes.push(`ds-chip--${this.variant()}`);
+        classes.push(`ds-chip--${this.size()}`);
+        classes.push(`ds-chip--${this.color()}`);
+        if (this.clickable() && !this.disabled()) {
+            classes.push('ds-chip--clickable');
+        }
+        if (this.selected()) {
+            classes.push('ds-chip--selected');
+        }
+        if (this.disabled()) {
+            classes.push('ds-chip--disabled');
+        }
+        return classes.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "chipClasses" }] : []));
+    // Computed role
+    role = computed(() => {
+        return this.clickable() ? 'button' : null;
+    }, ...(ngDevMode ? [{ debugName: "role" }] : []));
+    // Computed tabindex
+    tabindex = computed(() => {
+        if (this.disabled())
+            return -1;
+        if (this.clickable() || this.removable())
+            return 0;
+        return null;
+    }, ...(ngDevMode ? [{ debugName: "tabindex" }] : []));
+    // Computed aria-selected
+    ariaSelected = computed(() => {
+        return this.clickable() ? this.selected() : null;
+    }, ...(ngDevMode ? [{ debugName: "ariaSelected" }] : []));
+    // Computed aria-disabled
+    ariaDisabled = computed(() => {
+        return this.disabled() ? true : null;
+    }, ...(ngDevMode ? [{ debugName: "ariaDisabled" }] : []));
+    /**
+     * Handle chip click
+     */
+    handleClick(event) {
+        if (this.disabled()) {
+            event.stopPropagation();
+            event.preventDefault();
+            return;
+        }
+        if (this.clickable()) {
+            this.isSelected.set(!this.selected());
+            this.clicked.emit();
+            this.selectedChange.emit(!this.selected());
+        }
+    }
+    /**
+     * Handle remove button click
+     */
+    handleRemove(event) {
+        event.stopPropagation();
+        event.preventDefault();
+        if (this.disabled()) {
+            return;
+        }
+        this.removed.emit();
+    }
+    /**
+     * Handle keyboard events
+     */
+    handleKeyDown(event) {
+        if (this.disabled()) {
+            return;
+        }
+        // Handle Enter or Space for clickable chips
+        if (this.clickable() && (event.key === 'Enter' || event.key === ' ')) {
+            event.preventDefault();
+            this.handleClick(event);
+        }
+        // Handle Delete or Backspace for removable chips
+        if (this.removable() &&
+            (event.key === 'Delete' || event.key === 'Backspace')) {
+            event.preventDefault();
+            this.handleRemove(event);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsChip, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DsChip, isStandalone: true, selector: "ds-chip", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, avatar: { classPropertyName: "avatar", publicName: "avatar", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removed: "removed", clicked: "clicked", selectedChange: "selectedChange" }, ngImport: i0, template: "<div\n  [class]=\"chipClasses()\"\n  [attr.role]=\"role()\"\n  [attr.tabindex]=\"tabindex()\"\n  [attr.aria-selected]=\"ariaSelected()\"\n  [attr.aria-disabled]=\"ariaDisabled()\"\n  (click)=\"handleClick($event)\"\n  (keydown)=\"handleKeyDown($event)\"\n>\n  <!-- Avatar -->\n  @if (avatar()) {\n    <img\n      class=\"ds-chip__avatar\"\n      [src]=\"avatar()\"\n      [alt]=\"label()\"\n    />\n  }\n\n  <!-- Icon -->\n  @if (icon() && !avatar()) {\n    <fa-icon\n      class=\"ds-chip__icon\"\n      [icon]=\"['fas', icon()]\"\n      [fixedWidth]=\"true\"\n    />\n  }\n\n  <!-- Label -->\n  <span class=\"ds-chip__label\">{{ label() }}</span>\n\n  <!-- Remove button -->\n  @if (removable() && !disabled()) {\n    <button\n      type=\"button\"\n      class=\"ds-chip__remove\"\n      [attr.aria-label]=\"'Remove ' + label()\"\n      (click)=\"handleRemove($event)\"\n    >\n      <fa-icon\n        [icon]=\"closeIcon\"\n        [fixedWidth]=\"true\"\n      />\n    </button>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";.ds-chip{display:inline-flex;align-items:center;gap:var(--chip-gap, var(--space-2));padding:var(--chip-padding-y, var(--space-1)) var(--chip-padding-x, var(--space-3));border-radius:var(--chip-border-radius, var(--radius-pill));font-family:var(--font-family-base);font-size:var(--chip-font-size, var(--font-size-sm));font-weight:var(--chip-font-weight, 500);line-height:var(--chip-line-height, 1.5);transition:all var(--transition-fast);-webkit-user-select:none;user-select:none;outline:none;background-color:var(--chip-bg, var(--gray-200));color:var(--chip-text, var(--gray-800));border:1px solid var(--chip-border, transparent)}.ds-chip__avatar{width:var(--chip-avatar-size, 1.25rem);height:var(--chip-avatar-size, 1.25rem);border-radius:50%;object-fit:cover;flex-shrink:0}.ds-chip__icon{flex-shrink:0;font-size:var(--chip-icon-size, .875rem)}.ds-chip__label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ds-chip__remove{display:flex;align-items:center;justify-content:center;padding:0;margin:0;background:none;border:none;cursor:pointer;color:inherit;opacity:.6;transition:opacity var(--transition-fast);flex-shrink:0}.ds-chip__remove:hover{opacity:1}.ds-chip__remove:focus{outline:none;opacity:1}.ds-chip__remove fa-icon{font-size:var(--chip-remove-icon-size, .75rem)}.ds-chip--outlined{background-color:transparent;border-color:var(--chip-border, var(--gray-300))}.ds-chip--sm{padding:var(--chip-padding-y-sm, var(--space-0-5)) var(--chip-padding-x-sm, var(--space-2));font-size:var(--chip-font-size-sm, var(--font-size-xs));gap:var(--chip-gap-sm, var(--space-1))}.ds-chip--sm .ds-chip__avatar{width:var(--chip-avatar-size-sm, 1rem);height:var(--chip-avatar-size-sm, 1rem)}.ds-chip--sm .ds-chip__icon{font-size:var(--chip-icon-size-sm, .75rem)}.ds-chip--sm .ds-chip__remove fa-icon{font-size:var(--chip-remove-icon-size-sm, .625rem)}.ds-chip--lg{padding:var(--chip-padding-y-lg, var(--space-2)) var(--chip-padding-x-lg, var(--space-4));font-size:var(--chip-font-size-lg, var(--font-size-base));gap:var(--chip-gap-lg, var(--space-2))}.ds-chip--lg .ds-chip__avatar{width:var(--chip-avatar-size-lg, 1.5rem);height:var(--chip-avatar-size-lg, 1.5rem)}.ds-chip--lg .ds-chip__icon{font-size:var(--chip-icon-size-lg, 1rem)}.ds-chip--lg .ds-chip__remove fa-icon{font-size:var(--chip-remove-icon-size-lg, .875rem)}.ds-chip--primary{background-color:var(--chip-primary-bg, var(--color-primary));color:var(--chip-primary-text, var(--white));border-color:var(--chip-primary-border, transparent)}.ds-chip--primary.ds-chip--outlined{background-color:transparent;color:var(--chip-primary-bg, var(--color-primary));border-color:var(--chip-primary-bg, var(--color-primary))}.ds-chip--success{background-color:var(--chip-success-bg, var(--success-bg));color:var(--chip-success-text, var(--success));border-color:var(--chip-success-border, var(--success-border))}.ds-chip--success.ds-chip--outlined{background-color:transparent;color:var(--chip-success-text, var(--success));border-color:var(--chip-success-text, var(--success))}.ds-chip--warning{background-color:var(--chip-warning-bg, var(--warning-bg));color:var(--chip-warning-text, var(--warning));border-color:var(--chip-warning-border, var(--warning-border))}.ds-chip--warning.ds-chip--outlined{background-color:transparent;color:var(--chip-warning-text, var(--warning));border-color:var(--chip-warning-text, var(--warning))}.ds-chip--error{background-color:var(--chip-error-bg, var(--error-bg));color:var(--chip-error-text, var(--error));border-color:var(--chip-error-border, var(--error-border))}.ds-chip--error.ds-chip--outlined{background-color:transparent;color:var(--chip-error-text, var(--error));border-color:var(--chip-error-text, var(--error))}.ds-chip--clickable{cursor:pointer}.ds-chip--clickable:hover:not(.ds-chip--disabled){background-color:var(--chip-hover-bg, var(--gray-300))}.ds-chip--clickable:focus-visible{box-shadow:0 0 0 3px var(--chip-focus-ring, var(--focus-ring))}.ds-chip--clickable.ds-chip--outlined:hover:not(.ds-chip--disabled){background-color:var(--chip-hover-bg, var(--gray-50))}.ds-chip--clickable.ds-chip--primary:hover:not(.ds-chip--disabled){background-color:var(--chip-primary-hover-bg, var(--primary-600))}.ds-chip--clickable.ds-chip--primary.ds-chip--outlined:hover:not(.ds-chip--disabled){background-color:var(--chip-primary-hover-bg-outlined, var(--primary-50))}.ds-chip--clickable.ds-chip--success:hover:not(.ds-chip--disabled){background-color:var(--chip-success-hover-bg, var(--success-100))}.ds-chip--clickable.ds-chip--success.ds-chip--outlined:hover:not(.ds-chip--disabled){background-color:var(--chip-success-hover-bg-outlined, var(--success-50))}.ds-chip--clickable.ds-chip--warning:hover:not(.ds-chip--disabled){background-color:var(--chip-warning-hover-bg, var(--warning-100))}.ds-chip--clickable.ds-chip--warning.ds-chip--outlined:hover:not(.ds-chip--disabled){background-color:var(--chip-warning-hover-bg-outlined, var(--warning-50))}.ds-chip--clickable.ds-chip--error:hover:not(.ds-chip--disabled){background-color:var(--chip-error-hover-bg, var(--error-100))}.ds-chip--clickable.ds-chip--error.ds-chip--outlined:hover:not(.ds-chip--disabled){background-color:var(--chip-error-hover-bg-outlined, var(--error-50))}.ds-chip--selected{box-shadow:0 0 0 2px var(--chip-selected-ring, var(--color-primary))}.ds-chip--disabled{opacity:var(--chip-disabled-opacity, .5);cursor:not-allowed;pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i1$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsChip, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-chip', standalone: true, imports: [CommonModule, FontAwesomeModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  [class]=\"chipClasses()\"\n  [attr.role]=\"role()\"\n  [attr.tabindex]=\"tabindex()\"\n  [attr.aria-selected]=\"ariaSelected()\"\n  [attr.aria-disabled]=\"ariaDisabled()\"\n  (click)=\"handleClick($event)\"\n  (keydown)=\"handleKeyDown($event)\"\n>\n  <!-- Avatar -->\n  @if (avatar()) {\n    <img\n      class=\"ds-chip__avatar\"\n      [src]=\"avatar()\"\n      [alt]=\"label()\"\n    />\n  }\n\n  <!-- Icon -->\n  @if (icon() && !avatar()) {\n    <fa-icon\n      class=\"ds-chip__icon\"\n      [icon]=\"['fas', icon()]\"\n      [fixedWidth]=\"true\"\n    />\n  }\n\n  <!-- Label -->\n  <span class=\"ds-chip__label\">{{ label() }}</span>\n\n  <!-- Remove button -->\n  @if (removable() && !disabled()) {\n    <button\n      type=\"button\"\n      class=\"ds-chip__remove\"\n      [attr.aria-label]=\"'Remove ' + label()\"\n      (click)=\"handleRemove($event)\"\n    >\n      <fa-icon\n        [icon]=\"closeIcon\"\n        [fixedWidth]=\"true\"\n      />\n    </button>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";.ds-chip{display:inline-flex;align-items:center;gap:var(--chip-gap, var(--space-2));padding:var(--chip-padding-y, var(--space-1)) var(--chip-padding-x, var(--space-3));border-radius:var(--chip-border-radius, var(--radius-pill));font-family:var(--font-family-base);font-size:var(--chip-font-size, var(--font-size-sm));font-weight:var(--chip-font-weight, 500);line-height:var(--chip-line-height, 1.5);transition:all var(--transition-fast);-webkit-user-select:none;user-select:none;outline:none;background-color:var(--chip-bg, var(--gray-200));color:var(--chip-text, var(--gray-800));border:1px solid var(--chip-border, transparent)}.ds-chip__avatar{width:var(--chip-avatar-size, 1.25rem);height:var(--chip-avatar-size, 1.25rem);border-radius:50%;object-fit:cover;flex-shrink:0}.ds-chip__icon{flex-shrink:0;font-size:var(--chip-icon-size, .875rem)}.ds-chip__label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ds-chip__remove{display:flex;align-items:center;justify-content:center;padding:0;margin:0;background:none;border:none;cursor:pointer;color:inherit;opacity:.6;transition:opacity var(--transition-fast);flex-shrink:0}.ds-chip__remove:hover{opacity:1}.ds-chip__remove:focus{outline:none;opacity:1}.ds-chip__remove fa-icon{font-size:var(--chip-remove-icon-size, .75rem)}.ds-chip--outlined{background-color:transparent;border-color:var(--chip-border, var(--gray-300))}.ds-chip--sm{padding:var(--chip-padding-y-sm, var(--space-0-5)) var(--chip-padding-x-sm, var(--space-2));font-size:var(--chip-font-size-sm, var(--font-size-xs));gap:var(--chip-gap-sm, var(--space-1))}.ds-chip--sm .ds-chip__avatar{width:var(--chip-avatar-size-sm, 1rem);height:var(--chip-avatar-size-sm, 1rem)}.ds-chip--sm .ds-chip__icon{font-size:var(--chip-icon-size-sm, .75rem)}.ds-chip--sm .ds-chip__remove fa-icon{font-size:var(--chip-remove-icon-size-sm, .625rem)}.ds-chip--lg{padding:var(--chip-padding-y-lg, var(--space-2)) var(--chip-padding-x-lg, var(--space-4));font-size:var(--chip-font-size-lg, var(--font-size-base));gap:var(--chip-gap-lg, var(--space-2))}.ds-chip--lg .ds-chip__avatar{width:var(--chip-avatar-size-lg, 1.5rem);height:var(--chip-avatar-size-lg, 1.5rem)}.ds-chip--lg .ds-chip__icon{font-size:var(--chip-icon-size-lg, 1rem)}.ds-chip--lg .ds-chip__remove fa-icon{font-size:var(--chip-remove-icon-size-lg, .875rem)}.ds-chip--primary{background-color:var(--chip-primary-bg, var(--color-primary));color:var(--chip-primary-text, var(--white));border-color:var(--chip-primary-border, transparent)}.ds-chip--primary.ds-chip--outlined{background-color:transparent;color:var(--chip-primary-bg, var(--color-primary));border-color:var(--chip-primary-bg, var(--color-primary))}.ds-chip--success{background-color:var(--chip-success-bg, var(--success-bg));color:var(--chip-success-text, var(--success));border-color:var(--chip-success-border, var(--success-border))}.ds-chip--success.ds-chip--outlined{background-color:transparent;color:var(--chip-success-text, var(--success));border-color:var(--chip-success-text, var(--success))}.ds-chip--warning{background-color:var(--chip-warning-bg, var(--warning-bg));color:var(--chip-warning-text, var(--warning));border-color:var(--chip-warning-border, var(--warning-border))}.ds-chip--warning.ds-chip--outlined{background-color:transparent;color:var(--chip-warning-text, var(--warning));border-color:var(--chip-warning-text, var(--warning))}.ds-chip--error{background-color:var(--chip-error-bg, var(--error-bg));color:var(--chip-error-text, var(--error));border-color:var(--chip-error-border, var(--error-border))}.ds-chip--error.ds-chip--outlined{background-color:transparent;color:var(--chip-error-text, var(--error));border-color:var(--chip-error-text, var(--error))}.ds-chip--clickable{cursor:pointer}.ds-chip--clickable:hover:not(.ds-chip--disabled){background-color:var(--chip-hover-bg, var(--gray-300))}.ds-chip--clickable:focus-visible{box-shadow:0 0 0 3px var(--chip-focus-ring, var(--focus-ring))}.ds-chip--clickable.ds-chip--outlined:hover:not(.ds-chip--disabled){background-color:var(--chip-hover-bg, var(--gray-50))}.ds-chip--clickable.ds-chip--primary:hover:not(.ds-chip--disabled){background-color:var(--chip-primary-hover-bg, var(--primary-600))}.ds-chip--clickable.ds-chip--primary.ds-chip--outlined:hover:not(.ds-chip--disabled){background-color:var(--chip-primary-hover-bg-outlined, var(--primary-50))}.ds-chip--clickable.ds-chip--success:hover:not(.ds-chip--disabled){background-color:var(--chip-success-hover-bg, var(--success-100))}.ds-chip--clickable.ds-chip--success.ds-chip--outlined:hover:not(.ds-chip--disabled){background-color:var(--chip-success-hover-bg-outlined, var(--success-50))}.ds-chip--clickable.ds-chip--warning:hover:not(.ds-chip--disabled){background-color:var(--chip-warning-hover-bg, var(--warning-100))}.ds-chip--clickable.ds-chip--warning.ds-chip--outlined:hover:not(.ds-chip--disabled){background-color:var(--chip-warning-hover-bg-outlined, var(--warning-50))}.ds-chip--clickable.ds-chip--error:hover:not(.ds-chip--disabled){background-color:var(--chip-error-hover-bg, var(--error-100))}.ds-chip--clickable.ds-chip--error.ds-chip--outlined:hover:not(.ds-chip--disabled){background-color:var(--chip-error-hover-bg-outlined, var(--error-50))}.ds-chip--selected{box-shadow:0 0 0 2px var(--chip-selected-ring, var(--color-primary))}.ds-chip--disabled{opacity:var(--chip-disabled-opacity, .5);cursor:not-allowed;pointer-events:none}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], removable: [{ type: i0.Input, args: [{ isSignal: true, alias: "removable", required: false }] }], clickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickable", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], avatar: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatar", required: false }] }], removed: [{ type: i0.Output, args: ["removed"] }], clicked: [{ type: i0.Output, args: ["clicked"] }], selectedChange: [{ type: i0.Output, args: ["selectedChange"] }] } });
+
+class DsSlider {
+    // Config
+    min = input(0, ...(ngDevMode ? [{ debugName: "min" }] : []));
+    max = input(100, ...(ngDevMode ? [{ debugName: "max" }] : []));
+    step = input(1, ...(ngDevMode ? [{ debugName: "step" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    range = input(false, ...(ngDevMode ? [{ debugName: "range" }] : []));
+    orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : []));
+    // Display
+    showLabels = input(false, ...(ngDevMode ? [{ debugName: "showLabels" }] : []));
+    showTicks = input(false, ...(ngDevMode ? [{ debugName: "showTicks" }] : []));
+    tickInterval = input(undefined, ...(ngDevMode ? [{ debugName: "tickInterval" }] : []));
+    formatLabel = input(undefined, ...(ngDevMode ? [{ debugName: "formatLabel" }] : []));
+    // Events
+    valueChange = output();
+    // ViewChild
+    trackElement;
+    thumb1Element;
+    thumb2Element;
+    // Internal state
+    disabledState = signal(false, ...(ngDevMode ? [{ debugName: "disabledState" }] : []));
+    internalValue = signal(0, ...(ngDevMode ? [{ debugName: "internalValue" }] : []));
+    dragging = signal(null, ...(ngDevMode ? [{ debugName: "dragging" }] : [])); // null, 0 (first thumb), 1 (second thumb)
+    focusedThumb = signal(0, ...(ngDevMode ? [{ debugName: "focusedThumb" }] : [])); // 0 or 1
+    constructor() {
+        // Effect pour synchroniser la valeur initiale
+        effect(() => {
+            const currentValue = this.internalValue();
+            const isRange = this.range();
+            const minVal = this.min();
+            // Initialisation par défaut
+            if (typeof currentValue === 'number' && isRange) {
+                this.internalValue.set([minVal, currentValue]);
+            }
+            else if (Array.isArray(currentValue) && !isRange) {
+                this.internalValue.set(currentValue[0]);
+            }
+        });
+    }
+    isDisabled = computed(() => this.disabled() || this.disabledState(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
+    isRange = computed(() => this.range(), ...(ngDevMode ? [{ debugName: "isRange" }] : []));
+    isVertical = computed(() => this.orientation() === 'vertical', ...(ngDevMode ? [{ debugName: "isVertical" }] : []));
+    containerClasses = computed(() => {
+        const classes = ['ds-slider'];
+        classes.push(`ds-slider--${this.size()}`);
+        if (this.isDisabled())
+            classes.push('ds-slider--disabled');
+        if (this.isVertical())
+            classes.push('ds-slider--vertical');
+        return classes.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "containerClasses" }] : []));
+    value1 = computed(() => {
+        const val = this.internalValue();
+        return Array.isArray(val) ? val[0] : val;
+    }, ...(ngDevMode ? [{ debugName: "value1" }] : []));
+    value2 = computed(() => {
+        const val = this.internalValue();
+        return Array.isArray(val) ? val[1] : this.max();
+    }, ...(ngDevMode ? [{ debugName: "value2" }] : []));
+    percentage1 = computed(() => {
+        return this.valueToPercentage(this.value1());
+    }, ...(ngDevMode ? [{ debugName: "percentage1" }] : []));
+    percentage2 = computed(() => {
+        return this.valueToPercentage(this.value2());
+    }, ...(ngDevMode ? [{ debugName: "percentage2" }] : []));
+    thumb1Style = computed(() => {
+        if (this.isVertical()) {
+            return { bottom: `${this.percentage1()}%` };
+        }
+        return { left: `${this.percentage1()}%` };
+    }, ...(ngDevMode ? [{ debugName: "thumb1Style" }] : []));
+    thumb2Style = computed(() => {
+        if (!this.isRange())
+            return {};
+        if (this.isVertical()) {
+            return { bottom: `${this.percentage2()}%` };
+        }
+        return { left: `${this.percentage2()}%` };
+    }, ...(ngDevMode ? [{ debugName: "thumb2Style" }] : []));
+    fillStyle = computed(() => {
+        const p1 = this.percentage1();
+        const p2 = this.percentage2();
+        if (this.isVertical()) {
+            if (this.isRange()) {
+                return {
+                    bottom: `${p1}%`,
+                    height: `${p2 - p1}%`,
+                };
+            }
+            return {
+                bottom: '0%',
+                height: `${p1}%`,
+            };
+        }
+        if (this.isRange()) {
+            return {
+                left: `${p1}%`,
+                width: `${p2 - p1}%`,
+            };
+        }
+        return {
+            left: '0%',
+            width: `${p1}%`,
+        };
+    }, ...(ngDevMode ? [{ debugName: "fillStyle" }] : []));
+    ticks = computed(() => {
+        if (!this.showTicks())
+            return [];
+        const interval = this.tickInterval() ?? this.step();
+        const minVal = this.min();
+        const maxVal = this.max();
+        const ticks = [];
+        for (let val = minVal; val <= maxVal; val += interval) {
+            ticks.push(val);
+        }
+        return ticks;
+    }, ...(ngDevMode ? [{ debugName: "ticks" }] : []));
+    label1 = computed(() => {
+        const formatter = this.formatLabel();
+        const val = this.value1();
+        return formatter ? formatter(val) : val.toString();
+    }, ...(ngDevMode ? [{ debugName: "label1" }] : []));
+    label2 = computed(() => {
+        if (!this.isRange())
+            return '';
+        const formatter = this.formatLabel();
+        const val = this.value2();
+        return formatter ? formatter(val) : val.toString();
+    }, ...(ngDevMode ? [{ debugName: "label2" }] : []));
+    // ControlValueAccessor
+    onChange = () => { };
+    onTouched = () => { };
+    writeValue(value) {
+        if (value === null) {
+            this.internalValue.set(this.range() ? [this.min(), this.max()] : this.min());
+            return;
+        }
+        this.internalValue.set(value);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabledState.set(isDisabled);
+    }
+    // Helpers
+    valueToPercentage(value) {
+        const minVal = this.min();
+        const maxVal = this.max();
+        return ((value - minVal) / (maxVal - minVal)) * 100;
+    }
+    percentageToValue(percentage) {
+        const minVal = this.min();
+        const maxVal = this.max();
+        const stepVal = this.step();
+        const rawValue = minVal + (percentage / 100) * (maxVal - minVal);
+        const steppedValue = Math.round(rawValue / stepVal) * stepVal;
+        return Math.max(minVal, Math.min(maxVal, steppedValue));
+    }
+    clampValue(value) {
+        return Math.max(this.min(), Math.min(this.max(), value));
+    }
+    emitValue() {
+        const val = this.internalValue();
+        this.onChange(val);
+        this.valueChange.emit(val);
+    }
+    // Event handlers - Keyboard
+    onKeyDown(event, thumbIndex) {
+        if (this.isDisabled())
+            return;
+        const stepVal = this.step();
+        const minVal = this.min();
+        const maxVal = this.max();
+        let handled = true;
+        let newValue;
+        const currentValue = thumbIndex === 0 ? this.value1() : this.value2();
+        switch (event.key) {
+            case 'ArrowRight':
+            case 'ArrowUp':
+                newValue = currentValue + stepVal;
+                break;
+            case 'ArrowLeft':
+            case 'ArrowDown':
+                newValue = currentValue - stepVal;
+                break;
+            case 'Home':
+                newValue = minVal;
+                break;
+            case 'End':
+                newValue = maxVal;
+                break;
+            case 'PageUp':
+                newValue = currentValue + stepVal * 10;
+                break;
+            case 'PageDown':
+                newValue = currentValue - stepVal * 10;
+                break;
+            default:
+                handled = false;
+        }
+        if (!handled || newValue === undefined)
+            return;
+        event.preventDefault();
+        newValue = this.clampValue(newValue);
+        if (this.isRange()) {
+            const val = this.internalValue();
+            if (thumbIndex === 0) {
+                // Thumb 1: ne peut pas dépasser thumb 2
+                newValue = Math.min(newValue, val[1]);
+                this.internalValue.set([newValue, val[1]]);
+            }
+            else {
+                // Thumb 2: ne peut pas être inférieur à thumb 1
+                newValue = Math.max(newValue, val[0]);
+                this.internalValue.set([val[0], newValue]);
+            }
+        }
+        else {
+            this.internalValue.set(newValue);
+        }
+        this.emitValue();
+    }
+    // Event handlers - Mouse/Touch
+    onTrackClick(event) {
+        if (this.isDisabled() || !this.trackElement)
+            return;
+        const rect = this.trackElement.nativeElement.getBoundingClientRect();
+        let percentage;
+        if (this.isVertical()) {
+            percentage = ((rect.bottom - event.clientY) / rect.height) * 100;
+        }
+        else {
+            percentage = ((event.clientX - rect.left) / rect.width) * 100;
+        }
+        const newValue = this.percentageToValue(percentage);
+        if (this.isRange()) {
+            const val = this.internalValue();
+            // Détermine quel thumb est le plus proche
+            const dist1 = Math.abs(newValue - val[0]);
+            const dist2 = Math.abs(newValue - val[1]);
+            if (dist1 < dist2) {
+                this.internalValue.set([newValue, val[1]]);
+                this.focusedThumb.set(0);
+            }
+            else {
+                this.internalValue.set([val[0], newValue]);
+                this.focusedThumb.set(1);
+            }
+        }
+        else {
+            this.internalValue.set(newValue);
+        }
+        this.emitValue();
+        this.onTouched();
+    }
+    onThumbMouseDown(event, thumbIndex) {
+        if (this.isDisabled())
+            return;
+        event.preventDefault();
+        this.dragging.set(thumbIndex);
+        this.focusedThumb.set(thumbIndex);
+        const moveHandler = (e) => this.onMouseMove(e);
+        const upHandler = () => {
+            this.dragging.set(null);
+            this.onTouched();
+            document.removeEventListener('mousemove', moveHandler);
+            document.removeEventListener('mouseup', upHandler);
+        };
+        document.addEventListener('mousemove', moveHandler);
+        document.addEventListener('mouseup', upHandler);
+    }
+    onMouseMove(event) {
+        const thumbIndex = this.dragging();
+        if (thumbIndex === null || !this.trackElement)
+            return;
+        const rect = this.trackElement.nativeElement.getBoundingClientRect();
+        let percentage;
+        if (this.isVertical()) {
+            percentage = ((rect.bottom - event.clientY) / rect.height) * 100;
+        }
+        else {
+            percentage = ((event.clientX - rect.left) / rect.width) * 100;
+        }
+        const newValue = this.percentageToValue(percentage);
+        if (this.isRange()) {
+            const val = this.internalValue();
+            if (thumbIndex === 0) {
+                const clamped = Math.min(newValue, val[1]);
+                this.internalValue.set([clamped, val[1]]);
+            }
+            else {
+                const clamped = Math.max(newValue, val[0]);
+                this.internalValue.set([val[0], clamped]);
+            }
+        }
+        else {
+            this.internalValue.set(newValue);
+        }
+        this.emitValue();
+    }
+    onThumbFocus(thumbIndex) {
+        this.focusedThumb.set(thumbIndex);
+    }
+    onThumbBlur() {
+        this.onTouched();
+    }
+    getTickPosition(value) {
+        return this.valueToPercentage(value);
+    }
+    getTickLabel(value) {
+        const formatter = this.formatLabel();
+        return formatter ? formatter(value) : value.toString();
+    }
+    // ARIA helpers
+    getAriaValueText(thumbIndex) {
+        const val = thumbIndex === 0 ? this.value1() : this.value2();
+        const formatter = this.formatLabel();
+        return formatter ? formatter(val) : val.toString();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsSlider, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DsSlider, isStandalone: true, selector: "ds-slider", inputs: { min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, range: { classPropertyName: "range", publicName: "range", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, showLabels: { classPropertyName: "showLabels", publicName: "showLabels", isSignal: true, isRequired: false, transformFunction: null }, showTicks: { classPropertyName: "showTicks", publicName: "showTicks", isSignal: true, isRequired: false, transformFunction: null }, tickInterval: { classPropertyName: "tickInterval", publicName: "tickInterval", isSignal: true, isRequired: false, transformFunction: null }, formatLabel: { classPropertyName: "formatLabel", publicName: "formatLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsSlider, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-slider', imports: [CommonModule], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            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"] }]
+        }], 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 }]
+            }], thumb1Element: [{
+                type: ViewChild,
+                args: ['thumb1', { static: false }]
+            }], thumb2Element: [{
+                type: ViewChild,
+                args: ['thumb2', { static: false }]
+            }] } });
+
+/**
+ * # DsFileUpload
+ *
+ * Composant de téléchargement de fichiers avec support drag & drop,
+ * validation, preview et barre de progression.
+ *
+ * ## Usage
+ *
+ * ```html
+ * <!-- Upload simple -->
+ * <ds-file-upload
+ *   [accept]="'image/*'"
+ *   [maxFileSize]="5242880"
+ *   (filesChange)="onFilesChange($event)">
+ * </ds-file-upload>
+ *
+ * <!-- Upload multiple avec preview -->
+ * <ds-file-upload
+ *   [multiple]="true"
+ *   [showPreview]="true"
+ *   [maxFiles]="5"
+ *   size="lg">
+ * </ds-file-upload>
+ * ```
+ *
+ * ## Accessibilité
+ *
+ * - Input natif avec label accessible
+ * - Drag & drop avec feedback ARIA
+ * - Messages d'erreur associés via aria-describedby
+ *
+ * @component
+ */
+class DsFileUpload {
+    /**
+     * Types de fichiers acceptés (ex: 'image/*,.pdf').
+     * @default '*'
+     */
+    accept = input('*', ...(ngDevMode ? [{ debugName: "accept" }] : []));
+    /**
+     * Taille maximale d'un fichier en bytes.
+     * @default 10485760 (10 MB)
+     */
+    maxFileSize = input(10485760, ...(ngDevMode ? [{ debugName: "maxFileSize" }] : []));
+    /**
+     * Nombre maximum de fichiers.
+     * @default 1
+     */
+    maxFiles = input(1, ...(ngDevMode ? [{ debugName: "maxFiles" }] : []));
+    /**
+     * Permet la sélection multiple de fichiers.
+     * @default false
+     */
+    multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple" }] : []));
+    /**
+     * Désactive le composant.
+     * @default false
+     */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    /**
+     * Taille du composant.
+     * @default 'md'
+     */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    /**
+     * Affiche une preview pour les images.
+     * @default true
+     */
+    showPreview = input(true, ...(ngDevMode ? [{ debugName: "showPreview" }] : []));
+    /**
+     * Label personnalisé pour le bouton.
+     */
+    label = input('Choisir un fichier', ...(ngDevMode ? [{ debugName: "label" }] : []));
+    /**
+     * Texte d'aide pour le drag & drop.
+     */
+    dragHelpText = input('ou glisser-déposer ici', ...(ngDevMode ? [{ debugName: "dragHelpText" }] : []));
+    /**
+     * Événement émis lors du changement de fichiers.
+     */
+    filesChange = output();
+    /**
+     * Événement émis lors de la suppression d'un fichier.
+     */
+    fileRemoved = output();
+    /**
+     * Événement émis lors de la progression de l'upload.
+     */
+    uploadProgress = output();
+    // Icons (readonly for template access)
+    faCloudArrowUp = faCloudArrowUp;
+    faXmark = faXmark;
+    faFile = faFile;
+    faFileImage = faFileImage;
+    faFilePdf = faFilePdf;
+    faFileWord = faFileWord;
+    faFileExcel = faFileExcel;
+    // ViewChild pour l'input file
+    fileInput = viewChild('fileInput', ...(ngDevMode ? [{ debugName: "fileInput" }] : []));
+    // État interne
+    files = signal([], ...(ngDevMode ? [{ debugName: "files" }] : []));
+    isDragging = signal(false, ...(ngDevMode ? [{ debugName: "isDragging" }] : []));
+    errorMessage = signal('', ...(ngDevMode ? [{ debugName: "errorMessage" }] : []));
+    // ControlValueAccessor
+    onChange = () => { };
+    onTouched = () => { };
+    /**
+     * Classes CSS calculées pour le conteneur (public pour tests).
+     */
+    containerClasses = computed(() => {
+        return [
+            'ds-file-upload',
+            `ds-file-upload--${this.size()}`,
+            this.isDragging() ? 'ds-file-upload--dragging' : '',
+            this.disabled() ? 'ds-file-upload--disabled' : '',
+            this.errorMessage() ? 'ds-file-upload--error' : '',
+        ].filter(Boolean);
+    }, ...(ngDevMode ? [{ debugName: "containerClasses" }] : []));
+    /**
+     * Nombre de fichiers actuellement sélectionnés (public pour tests).
+     */
+    fileCount = computed(() => this.files().length, ...(ngDevMode ? [{ debugName: "fileCount" }] : []));
+    /**
+     * Vérifie si la limite de fichiers est atteinte (public pour tests).
+     */
+    isMaxFilesReached = computed(() => this.fileCount() >= this.maxFiles(), ...(ngDevMode ? [{ debugName: "isMaxFilesReached" }] : []));
+    /**
+     * Ouvre le sélecteur de fichiers.
+     */
+    openFileSelector() {
+        if (this.disabled() || this.isMaxFilesReached()) {
+            return;
+        }
+        this.fileInput()?.nativeElement.click();
+    }
+    /**
+     * Gère la sélection de fichiers via l'input.
+     */
+    onFileSelect(event) {
+        const input = event.target;
+        if (!input.files?.length) {
+            return;
+        }
+        this.handleFiles(Array.from(input.files));
+        input.value = ''; // Reset pour permettre la réutilisation
+    }
+    /**
+     * Gère le début du drag.
+     */
+    onDragEnter(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (!this.disabled() && !this.isMaxFilesReached()) {
+            this.isDragging.set(true);
+        }
+    }
+    /**
+     * Gère le survol pendant le drag.
+     */
+    onDragOver(event) {
+        event.preventDefault();
+        event.stopPropagation();
+    }
+    /**
+     * Gère la sortie du drag.
+     */
+    onDragLeave(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        const target = event.currentTarget;
+        const related = event.relatedTarget;
+        if (!target.contains(related)) {
+            this.isDragging.set(false);
+        }
+    }
+    /**
+     * Gère le drop des fichiers.
+     */
+    onDrop(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.isDragging.set(false);
+        if (this.disabled() || this.isMaxFilesReached()) {
+            return;
+        }
+        const files = event.dataTransfer?.files;
+        if (files?.length) {
+            this.handleFiles(Array.from(files));
+        }
+    }
+    /**
+     * Traite les fichiers sélectionnés ou déposés.
+     */
+    handleFiles(newFiles) {
+        this.errorMessage.set('');
+        // En mode single, on remplace toujours le fichier existant
+        if (!this.multiple()) {
+            // Mode single : remplacer le fichier existant
+            const filesToAdd = [newFiles[0]];
+            // Valider et ajouter le fichier
+            const validFiles = [];
+            for (const file of filesToAdd) {
+                const validation = this.validateFile(file);
+                if (validation.valid) {
+                    const uploadFile = {
+                        file,
+                        progress: 0,
+                    };
+                    // Générer preview pour les images
+                    if (this.showPreview() && file.type.startsWith('image/')) {
+                        this.generatePreview(file, uploadFile);
+                    }
+                    validFiles.push(uploadFile);
+                }
+                else {
+                    this.errorMessage.set(validation.error || 'Fichier invalide');
+                }
+            }
+            if (validFiles.length > 0) {
+                this.files.set(validFiles);
+                this.notifyChange();
+                this.simulateUpload(validFiles);
+            }
+            return;
+        }
+        // Mode multiple : vérifier la limite de fichiers
+        const currentCount = this.fileCount();
+        const maxFiles = this.maxFiles();
+        const availableSlots = maxFiles - currentCount;
+        if (availableSlots <= 0) {
+            this.errorMessage.set(`Limite de ${maxFiles} fichier(s) atteinte`);
+            return;
+        }
+        // Limiter le nombre de nouveaux fichiers
+        const filesToAdd = newFiles.slice(0, availableSlots);
+        // Valider et ajouter les fichiers
+        const validFiles = [];
+        for (const file of filesToAdd) {
+            const validation = this.validateFile(file);
+            if (validation.valid) {
+                const uploadFile = {
+                    file,
+                    progress: 0,
+                };
+                // Générer preview pour les images
+                if (this.showPreview() && file.type.startsWith('image/')) {
+                    this.generatePreview(file, uploadFile);
+                }
+                validFiles.push(uploadFile);
+            }
+            else {
+                this.errorMessage.set(validation.error || 'Fichier invalide');
+            }
+        }
+        if (validFiles.length > 0) {
+            // Mode multiple : ajouter aux fichiers existants
+            this.files.update((current) => [...current, ...validFiles]);
+            this.notifyChange();
+            this.simulateUpload(validFiles);
+        }
+    }
+    /**
+     * Valide un fichier (taille, type).
+     */
+    validateFile(file) {
+        // Vérifier la taille
+        if (file.size > this.maxFileSize()) {
+            const maxMB = (this.maxFileSize() / 1048576).toFixed(1);
+            return {
+                valid: false,
+                error: `Fichier trop volumineux (max ${maxMB} MB)`,
+            };
+        }
+        // Vérifier le type (si spécifié)
+        const accept = this.accept();
+        if (accept !== '*') {
+            const acceptedTypes = accept.split(',').map((t) => t.trim());
+            const isAccepted = acceptedTypes.some((type) => {
+                if (type.startsWith('.')) {
+                    return file.name.toLowerCase().endsWith(type.toLowerCase());
+                }
+                if (type.endsWith('/*')) {
+                    const category = type.split('/')[0];
+                    return file.type.startsWith(category + '/');
+                }
+                return file.type === type;
+            });
+            if (!isAccepted) {
+                return {
+                    valid: false,
+                    error: `Type de fichier non accepté`,
+                };
+            }
+        }
+        return { valid: true };
+    }
+    /**
+     * Génère une preview pour les images.
+     */
+    generatePreview(file, uploadFile) {
+        const reader = new FileReader();
+        reader.onload = (e) => {
+            uploadFile.preview = e.target?.result;
+            this.files.update((files) => [...files]); // Trigger change detection
+        };
+        reader.readAsDataURL(file);
+    }
+    /**
+     * Simule l'upload avec progression (pour démonstration).
+     * Dans une vraie application, remplacer par un vrai upload HTTP.
+     */
+    simulateUpload(uploadFiles) {
+        uploadFiles.forEach((uploadFile) => {
+            const interval = setInterval(() => {
+                uploadFile.progress += 10;
+                if (uploadFile.progress >= 100) {
+                    clearInterval(interval);
+                }
+                this.uploadProgress.emit({
+                    file: uploadFile.file,
+                    progress: uploadFile.progress,
+                });
+                this.files.update((files) => [...files]); // Trigger change detection
+            }, 100);
+        });
+    }
+    /**
+     * Retire un fichier de la liste.
+     */
+    removeFile(uploadFile) {
+        this.files.update((files) => files.filter((f) => f.file !== uploadFile.file));
+        this.fileRemoved.emit(uploadFile.file);
+        this.notifyChange();
+        this.errorMessage.set('');
+    }
+    /**
+     * Notifie le changement de valeur.
+     */
+    notifyChange() {
+        const fileList = this.files().map((uf) => uf.file);
+        this.filesChange.emit(fileList);
+        this.onChange(fileList.length > 0 ? fileList : null);
+    }
+    /**
+     * Retourne l'icône appropriée pour le type de fichier (public pour tests).
+     */
+    getFileIcon(file) {
+        if (file.type.startsWith('image/')) {
+            return this.faFileImage;
+        }
+        if (file.type === 'application/pdf') {
+            return this.faFilePdf;
+        }
+        if (file.type ===
+            'application/vnd.openxmlformats-officedocument.wordprocessingml.document' ||
+            file.type === 'application/msword') {
+            return this.faFileWord;
+        }
+        if (file.type ===
+            'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' ||
+            file.type === 'application/vnd.ms-excel') {
+            return this.faFileExcel;
+        }
+        return this.faFile;
+    }
+    /**
+     * Formate la taille du fichier en MB ou KB (public pour tests).
+     */
+    formatFileSize(bytes) {
+        if (bytes >= 1048576) {
+            return `${(bytes / 1048576).toFixed(1)} MB`;
+        }
+        return `${(bytes / 1024).toFixed(0)} KB`;
+    }
+    // ControlValueAccessor implementation
+    writeValue(value) {
+        if (!value) {
+            this.files.set([]);
+            return;
+        }
+        const uploadFiles = value.map((file) => ({
+            file,
+            progress: 100,
+        }));
+        this.files.set(uploadFiles);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        // Le disabled est géré via input signal
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsFileUpload, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DsFileUpload, isStandalone: true, selector: "ds-file-upload", inputs: { accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, maxFileSize: { classPropertyName: "maxFileSize", publicName: "maxFileSize", isSignal: true, isRequired: false, transformFunction: null }, maxFiles: { classPropertyName: "maxFiles", publicName: "maxFiles", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showPreview: { classPropertyName: "showPreview", publicName: "showPreview", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, dragHelpText: { classPropertyName: "dragHelpText", publicName: "dragHelpText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filesChange: "filesChange", fileRemoved: "fileRemoved", uploadProgress: "uploadProgress" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => DsFileUpload),
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }], ngImport: i0, 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"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.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: DsProgressBar, selector: "ds-progress-bar", inputs: ["value", "variant", "size", "mode", "showLabel", "ariaLabel"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsFileUpload, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-file-upload', imports: [CommonModule, FaIconComponent, DsProgressBar], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => DsFileUpload),
+                            multi: true,
+                        },
+                    ], 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 }] }] } });
+
 /*
  * Components barrel export
  */
@@ -7738,7 +8759,7 @@ class IconRegistryService {
     getIconGroups() {
         return Array.from(this.iconGroups.keys());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: IconRegistryService, deps: [{ token: i2.FaIconLibrary }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: IconRegistryService, deps: [{ token: i1$1.FaIconLibrary }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: IconRegistryService, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: IconRegistryService, decorators: [{
@@ -7746,7 +8767,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: () => [{ type: i2.FaIconLibrary }] });
+        }], ctorParameters: () => [{ type: i1$1.FaIconLibrary }] });
 
 /**
  * Labels par défaut en français.
@@ -8106,5 +9127,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, DsCombobox, DsContainer, DsDatePicker, DsDivider, DsDropdown, DsI18nService, DsInputField, DsInputTextarea, DsMenu, DsModalComponent, DsPagination, DsPopover, DsPopoverComponent, DsProgressBar, DsRadioGroup, DsSearchInput, DsSelect, DsSkeleton, DsStepper, DsTable, DsTabs, DsToastComponent, DsToastContainerComponent, DsToastService, DsToggle, DsTooltip, DsTooltipComponent, IconRegistryService, POPOVER_POSITIONS, PrimitiveBadge, PrimitiveButton, PrimitiveCheckbox, PrimitiveInput, PrimitiveRadio, PrimitiveTextarea, PrimitiveToggle, TOOLTIP_POSITIONS, buildButtonArgTypes, buildButtonArgs, createSizeRender, createVariantRender };
+export { 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 };
 //# sourceMappingURL=kksdev-ds-angular.mjs.map