@kksdev/ds-angular 1.1.0 → 1.2.0

package/fesm2022/kksdev-ds-angular.mjs

@@ -7225,6 +7225,313 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                     ], 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"] }] } });
 
+class DsAvatar {
+    /** URL de l'image avatar */
+    src = input(undefined, ...(ngDevMode ? [{ debugName: "src" }] : []));
+    /** Texte alternatif pour l'image */
+    alt = input('', ...(ngDevMode ? [{ debugName: "alt" }] : []));
+    /** Nom complet pour générer les initiales */
+    name = input('', ...(ngDevMode ? [{ debugName: "name" }] : []));
+    /** Initiales personnalisées (priorité sur name) */
+    initials = input(undefined, ...(ngDevMode ? [{ debugName: "initials" }] : []));
+    /** Forme de l'avatar */
+    shape = input('circle', ...(ngDevMode ? [{ debugName: "shape" }] : []));
+    /** Taille de l'avatar */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    /** Générer automatiquement une couleur de fond à partir des initiales */
+    autoColor = input(false, ...(ngDevMode ? [{ debugName: "autoColor" }] : []));
+    /** État interne pour l'erreur de chargement d'image */
+    imageError = signal(false, ...(ngDevMode ? [{ debugName: "imageError" }] : []));
+    /** Indique si l'image doit être affichée */
+    showImage = computed(() => !!this.src() && !this.imageError(), ...(ngDevMode ? [{ debugName: "showImage" }] : []));
+    /** Initiales à afficher (générées ou fournies) */
+    displayInitials = computed(() => {
+        const customInitials = this.initials();
+        if (customInitials) {
+            return customInitials.substring(0, 2).toUpperCase();
+        }
+        const name = this.name();
+        if (!name)
+            return '';
+        const parts = name.trim().split(/\s+/);
+        if (parts.length === 1) {
+            return parts[0].substring(0, 2).toUpperCase();
+        }
+        return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+    }, ...(ngDevMode ? [{ debugName: "displayInitials" }] : []));
+    /** Classes CSS du conteneur */
+    containerClasses = computed(() => ({
+        'ds-avatar': true,
+        [`ds-avatar--${this.shape()}`]: true,
+        [`ds-avatar--${this.size()}`]: true,
+        'ds-avatar--has-image': this.showImage(),
+        'ds-avatar--initials': !this.showImage(),
+    }), ...(ngDevMode ? [{ debugName: "containerClasses" }] : []));
+    /** Couleur de fond auto-générée */
+    generatedBgColor = computed(() => {
+        if (!this.autoColor())
+            return null;
+        const initials = this.displayInitials();
+        if (!initials)
+            return null;
+        // Algorithme de hash simple vers couleur HSL
+        let hash = 0;
+        for (let i = 0; i < initials.length; i++) {
+            hash = initials.charCodeAt(i) + ((hash << 5) - hash);
+        }
+        const hue = Math.abs(hash % 360);
+        return `hsl(${hue}, 65%, 45%)`;
+    }, ...(ngDevMode ? [{ debugName: "generatedBgColor" }] : []));
+    /** Label ARIA pour l'accessibilité */
+    ariaLabel = computed(() => {
+        const alt = this.alt();
+        if (alt)
+            return alt;
+        const name = this.name();
+        if (name)
+            return `Avatar de ${name}`;
+        return 'Avatar';
+    }, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    /** Gestionnaire d'erreur de chargement d'image */
+    onImageError() {
+        this.imageError.set(true);
+    }
+    /** Gestionnaire de chargement réussi d'image */
+    onImageLoad() {
+        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"] }] });
+}
+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"] }]
+        }], 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 {
+    /** Liste des items du menu */
+    items = input.required(...(ngDevMode ? [{ debugName: "items" }] : []));
+    /** Taille du menu */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    /** Événement déclencheur */
+    trigger = input('click', ...(ngDevMode ? [{ debugName: "trigger" }] : []));
+    /** Fermer le menu après sélection */
+    closeOnSelect = input(true, ...(ngDevMode ? [{ debugName: "closeOnSelect" }] : []));
+    /** Label ARIA pour l'accessibilité */
+    ariaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    /** Événement émis lors de la sélection d'un item */
+    itemSelected = output();
+    /** Événement émis à l'ouverture du menu */
+    opened = output();
+    /** Événement émis à la fermeture du menu */
+    closed = output();
+    triggerElement;
+    menuItemsRef;
+    /** État interne d'ouverture */
+    menuOpen = signal(false, ...(ngDevMode ? [{ debugName: "menuOpen" }] : []));
+    /** Index de l'item actif pour la navigation clavier */
+    internalActiveIndex = signal(-1, ...(ngDevMode ? [{ debugName: "internalActiveIndex" }] : []));
+    /** Exposition en lecture seule de l'index actif */
+    activeIndex = computed(() => this.internalActiveIndex(), ...(ngDevMode ? [{ debugName: "activeIndex" }] : []));
+    /** État d'ouverture du menu (lecture seule) */
+    isOpen = computed(() => this.menuOpen(), ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+    /** Positions pour l'overlay CDK */
+    overlayPositions = DROPDOWN_POSITIONS;
+    /** Classes CSS du panel menu */
+    menuClasses = computed(() => ({
+        'ds-menu__panel': true,
+        [`ds-menu__panel--${this.size()}`]: true,
+    }), ...(ngDevMode ? [{ debugName: "menuClasses" }] : []));
+    /** ID de l'item actif pour aria-activedescendant */
+    activeDescendantId = computed(() => {
+        const items = this.items();
+        const index = this.internalActiveIndex();
+        if (index < 0 || index >= items.length)
+            return undefined;
+        return `menu-item-${items[index].id}`;
+    }, ...(ngDevMode ? [{ debugName: "activeDescendantId" }] : []));
+    /** Ouvre le menu */
+    open() {
+        if (this.isOpen())
+            return;
+        this.menuOpen.set(true);
+        this.internalActiveIndex.set(this.findFirstEnabledIndex());
+        this.opened.emit();
+        queueMicrotask(() => this.focusActiveItem());
+    }
+    /** Ferme le menu */
+    close(refocusTrigger = true) {
+        if (!this.isOpen())
+            return;
+        this.menuOpen.set(false);
+        this.internalActiveIndex.set(-1);
+        if (refocusTrigger) {
+            this.triggerElement?.nativeElement?.focus();
+        }
+        this.closed.emit();
+    }
+    /** Bascule l'état du menu */
+    toggle() {
+        this.isOpen() ? this.close() : this.open();
+    }
+    /** Sélectionne un item */
+    selectItem(item) {
+        if (item.disabled)
+            return;
+        this.itemSelected.emit(item);
+        if (this.closeOnSelect()) {
+            this.close();
+        }
+    }
+    /** Gestionnaire de clic sur le trigger */
+    onTriggerClick(event) {
+        if (this.trigger() === 'click') {
+            event.preventDefault();
+            this.toggle();
+        }
+    }
+    /** Gestionnaire de clic droit sur le trigger */
+    onTriggerContextMenu(event) {
+        if (this.trigger() === 'contextmenu') {
+            event.preventDefault();
+            this.open();
+        }
+    }
+    /** Gestionnaire de clavier sur le trigger */
+    onTriggerKeydown(event) {
+        switch (event.key) {
+            case 'ArrowDown':
+            case 'Enter':
+            case ' ':
+                event.preventDefault();
+                this.open();
+                break;
+            case 'Escape':
+                if (this.isOpen()) {
+                    event.preventDefault();
+                    this.close();
+                }
+                break;
+        }
+    }
+    /** Gestionnaire de clavier dans le menu */
+    onMenuKeydown(event) {
+        if (!this.isOpen())
+            return;
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                this.moveToNextEnabled(1);
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                this.moveToNextEnabled(-1);
+                break;
+            case 'Home':
+                event.preventDefault();
+                this.setActiveIndex(this.findFirstEnabledIndex());
+                break;
+            case 'End':
+                event.preventDefault();
+                this.setActiveIndex(this.findLastEnabledIndex());
+                break;
+            case 'Enter':
+            case ' ':
+                event.preventDefault();
+                this.selectActiveItem();
+                break;
+            case 'Escape':
+                event.preventDefault();
+                this.close();
+                break;
+            case 'Tab':
+                this.close(false);
+                break;
+        }
+    }
+    /** Met à jour l'index actif au survol */
+    onItemMouseEnter(index) {
+        if (!this.isOpen())
+            return;
+        const item = this.items()[index];
+        if (!item?.disabled) {
+            this.internalActiveIndex.set(index);
+        }
+    }
+    /** Gestionnaire de clic sur le backdrop */
+    onBackdropClick() {
+        this.close();
+    }
+    ngOnDestroy() {
+        this.close(false);
+    }
+    /** Trouve l'index du premier item activable */
+    findFirstEnabledIndex() {
+        return this.items().findIndex(item => !item.disabled);
+    }
+    /** Trouve l'index du dernier item activable */
+    findLastEnabledIndex() {
+        const items = this.items();
+        for (let i = items.length - 1; i >= 0; i--) {
+            if (!items[i].disabled)
+                return i;
+        }
+        return -1;
+    }
+    /** Navigue vers le prochain item activable */
+    moveToNextEnabled(direction) {
+        const items = this.items();
+        if (!items.length)
+            return;
+        let index = this.internalActiveIndex();
+        const startIndex = index;
+        do {
+            index += direction;
+            if (index < 0)
+                index = items.length - 1;
+            if (index >= items.length)
+                index = 0;
+            if (!items[index].disabled) {
+                this.setActiveIndex(index);
+                return;
+            }
+        } while (index !== startIndex);
+    }
+    /** Définit l'index actif et focus l'élément */
+    setActiveIndex(index) {
+        this.internalActiveIndex.set(index);
+        this.focusActiveItem();
+    }
+    /** Focus l'item actif */
+    focusActiveItem() {
+        const items = this.menuItemsRef?.toArray();
+        const index = this.internalActiveIndex();
+        if (items && index >= 0 && index < items.length) {
+            items[index].nativeElement.focus();
+        }
+    }
+    /** Sélectionne l'item actuellement actif */
+    selectActiveItem() {
+        const items = this.items();
+        const index = this.internalActiveIndex();
+        if (index >= 0 && index < items.length) {
+            this.selectItem(items[index]);
+        }
+    }
+    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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsMenu, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-menu', standalone: true, imports: [CommonModule, FaIconComponent, CdkConnectedOverlay, CdkOverlayOrigin], 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"] }]
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], trigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "trigger", required: false }] }], closeOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnSelect", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], itemSelected: [{ type: i0.Output, args: ["itemSelected"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], triggerElement: [{
+                type: ViewChild,
+                args: ['menuTrigger', { read: ElementRef }]
+            }], menuItemsRef: [{
+                type: ViewChildren,
+                args: ['menuItemRef']
+            }] } });
+
 /*
  * Components barrel export
  */
@@ -7796,5 +8103,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, DsBadge, DsBreadcrumb, DsButton, DsCard, DsCheckbox, DsCombobox, DsContainer, DsDatePicker, DsDivider, DsDropdown, DsI18nService, DsInputField, DsInputTextarea, 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, 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 };
 //# sourceMappingURL=kksdev-ds-angular.mjs.map