ps-helix 6.0.0 → 6.0.1

package/README.md

@@ -2,7 +2,7 @@
 
 A comprehensive Angular component library built with Angular 22+ featuring modern design patterns, accessibility-first development, and optimal developer experience.
 
-[![npm version](https://img.shields.io/badge/npm-6.0.0-blue.svg)](https://www.npmjs.com/package/ps-helix)
+[![npm version](https://img.shields.io/badge/npm-6.0.1-blue.svg)](https://www.npmjs.com/package/ps-helix)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 [![Angular](https://img.shields.io/badge/Angular-22.0.0-red.svg)](https://angular.dev/)
 [![TypeScript](https://img.shields.io/badge/TypeScript-6.0.0-blue.svg)](https://www.typescriptlang.org/)
@@ -59,11 +59,11 @@ Helix is a production-ready design system that provides:
 
 Before installing Helix, ensure your development environment meets these requirements:
 
-- **Node.js**: 18.x or higher
-- **npm**: 9.x or higher
+- **Node.js**: 22.22.3 or higher (or 24.15+)
+- **npm**: 10.x or higher
 - **Angular**: 22.0.0 or higher
 - **Angular CLI**: 22.0.0 or higher
-- **TypeScript**: 5.9.0 or higher
+- **TypeScript**: 6.0.0 or higher
 
 ### Required Peer Dependencies
 
@@ -106,7 +106,7 @@ After installation, verify that ps-helix is in your `package.json`:
 ```json
 {
   "dependencies": {
-    "ps-helix": "^6.0.0"
+    "ps-helix": "^6.0.1"
   }
 }
 ```
@@ -1182,7 +1182,7 @@ Copyright (c) 2025 PACK Solutions
 
 ---
 
-**Version**: 6.0.0
+**Version**: 6.0.1
 **Built with**: Angular 22.0.0, TypeScript 6.0.0, Phosphor Icons 2.0.3
 **Author**: Fabrice PEREZ | Product Designer at PACK Solutions
 **Last Updated**: January 2026

package/fesm2022/ps-helix.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, output, computed, ChangeDetectionStrategy, Component, model, inject, ElementRef, signal, PLATFORM_ID, ViewEncapsulation, InjectionToken, viewChild, effect, Injectable, DestroyRef, Directive, Injector, afterNextRender, ChangeDetectorRef, ViewChild, HostListener, Renderer2, contentChild, linkedSignal, EventEmitter, Output, Input, contentChildren } from '@angular/core';
+import { input, output, computed, ChangeDetectionStrategy, Component, model, inject, ElementRef, signal, PLATFORM_ID, ViewEncapsulation, InjectionToken, viewChild, effect, Injectable, DestroyRef, Directive, Injector, afterNextRender, ChangeDetectorRef, ViewChild, HostListener, Renderer2, contentChild, linkedSignal, EventEmitter, Output, Input, ViewContainerRef, contentChildren } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule, DOCUMENT, isPlatformBrowser, NgTemplateOutlet } from '@angular/common';
 import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
@@ -3729,12 +3729,99 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
                 type: Output
             }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
 
+/**
+ * Teleports a `TemplateRef` into a single body-level overlay layer so popover
+ * panels (select / dropdown / menu…) escape any ancestor `overflow`, `transform`
+ * or stacking context and can layer above modals.
+ *
+ * A lightweight, CDK-free "manual portal": the embedded view is created from the
+ * consumer's `ViewContainerRef` (so it stays in that component's change-detection
+ * tree and keeps its bindings reactive), then its root nodes are moved into the
+ * shared `.psh-overlay-layer`. The layer is `position: fixed; inset: 0;
+ * pointer-events: none` at `z-index: var(--z-index-overlay)`; panels re-enable
+ * pointer events. The layer is created lazily and removed once empty.
+ */
+class PshPortalService {
+    constructor() {
+        this.document = inject(DOCUMENT);
+        this.layer = null;
+        this.count = 0;
+    }
+    /** Teleports `tpl` into the overlay layer and returns a handle to control it. */
+    attach(tpl, vcr) {
+        const layer = this.ensureLayer();
+        const viewRef = vcr.createEmbeddedView(tpl);
+        viewRef.detectChanges();
+        const nodes = viewRef.rootNodes;
+        const panel = (nodes.find((n) => n instanceof HTMLElement) ??
+            nodes[0]);
+        nodes.forEach(node => layer.appendChild(node));
+        this.count++;
+        return {
+            panel,
+            position: (anchor, side, gap) => this.position(panel, anchor, side, gap),
+            detach: () => this.detach(viewRef),
+        };
+    }
+    position(panel, anchor, side, gap) {
+        const view = this.document.defaultView;
+        if (!view)
+            return;
+        const rect = anchor.getBoundingClientRect();
+        const style = panel.style;
+        style.position = 'fixed';
+        style.left = `${rect.left}px`;
+        style.width = `${rect.width}px`;
+        if (side === 'top') {
+            const height = panel.offsetHeight;
+            style.top = `${Math.max(gap, rect.top - height - gap)}px`;
+            style.maxHeight = `${Math.max(0, rect.top - gap * 2)}px`;
+        }
+        else {
+            style.top = `${rect.bottom + gap}px`;
+            style.maxHeight = `${Math.max(0, view.innerHeight - rect.bottom - gap * 2)}px`;
+        }
+    }
+    detach(viewRef) {
+        viewRef.destroy();
+        this.count = Math.max(0, this.count - 1);
+        if (this.count === 0 && this.layer) {
+            this.layer.remove();
+            this.layer = null;
+        }
+    }
+    ensureLayer() {
+        if (this.layer)
+            return this.layer;
+        const layer = this.document.createElement('div');
+        layer.className = 'psh-overlay-layer';
+        layer.style.cssText =
+            'position:fixed;inset:0;z-index:var(--z-index-overlay);pointer-events:none;';
+        this.document.body.appendChild(layer);
+        this.layer = layer;
+        return layer;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: PshPortalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: PshPortalService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: PshPortalService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
 class PshSelectComponent {
     constructor() {
         this.elementRef = inject(ElementRef);
         this.destroyRef = inject(DestroyRef);
         this.overlayPosition = inject(PshOverlayPositionService);
-        this.injector = inject(Injector);
+        this.portal = inject(PshPortalService);
+        this.viewContainer = inject(ViewContainerRef);
+        // The options panel, teleported to a body-level overlay layer on open so it
+        // escapes any ancestor overflow / stacking context (e.g. a modal body).
+        this.panelTpl = viewChild('panelTpl', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "panelTpl" }] : /* istanbul ignore next */ []));
+        this.portalRef = null;
+        this.repositionHandler = () => this.reposition();
         // Side the panel actually opens on, after viewport collision/flip.
         this.resolvedSide = signal('bottom', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "resolvedSide" }] : /* istanbul ignore next */ []));
@@ -3888,34 +3975,58 @@ class PshSelectComponent {
         ...(ngDevMode ? [{ debugName: "filteredOptions" }] : /* istanbul ignore next */ []));
         this.onChange = () => { };
         this.onTouched = () => { };
-        // Close on outside click via the shared click-outside primitive.
+        // Close on outside click via the shared click-outside primitive. The options
+        // panel is teleported to the body (outside the host), so a click inside it
+        // must NOT count as "outside" — otherwise selecting an option would close the
+        // panel before select() runs.
         const clickOutside = inject(PshClickOutsideDirective);
-        const sub = clickOutside.pshClickOutside.subscribe(() => {
-            if (this.isOpen())
-                this.close();
+        const sub = clickOutside.pshClickOutside.subscribe(event => {
+            if (!this.isOpen())
+                return;
+            const target = event.target;
+            if (target && this.portalRef?.panel.contains(target))
+                return;
+            this.close();
         });
-        this.destroyRef.onDestroy(() => sub.unsubscribe());
-        // Flip the options panel against the viewport on open; reset while closed.
-        effect(() => {
-            if (this.isOpen()) {
-                afterNextRender(() => this.reposition(), { injector: this.injector });
-            }
-            else {
-                this.resolvedSide.set('bottom');
-            }
+        this.destroyRef.onDestroy(() => {
+            sub.unsubscribe();
+            this.closePanel();
         });
     }
+    /** Teleports the options panel to the body-level overlay layer and positions it. */
+    openPanel() {
+        if (this.portalRef)
+            return;
+        const tpl = this.panelTpl();
+        if (!tpl)
+            return;
+        this.portalRef = this.portal.attach(tpl, this.viewContainer);
+        this.reposition();
+        const view = this.elementRef.nativeElement.ownerDocument.defaultView;
+        // Capture phase so inner (e.g. modal body) scrolls keep the panel aligned.
+        view?.addEventListener('scroll', this.repositionHandler, true);
+        view?.addEventListener('resize', this.repositionHandler);
+    }
+    closePanel() {
+        const view = this.elementRef.nativeElement.ownerDocument.defaultView;
+        view?.removeEventListener('scroll', this.repositionHandler, true);
+        view?.removeEventListener('resize', this.repositionHandler);
+        this.portalRef?.detach();
+        this.portalRef = null;
+        this.resolvedSide.set('bottom');
+    }
     reposition() {
-        if (!this.isOpen())
+        if (!this.portalRef)
             return;
         const host = this.elementRef.nativeElement;
         const trigger = host.querySelector('.select-trigger');
-        const panel = host.querySelector('.select-dropdown');
         if (!trigger)
             return;
-        this.resolvedSide.set(this.overlayPosition.flipSide(trigger, 'bottom', {
-            overlayHeight: panel?.offsetHeight ?? 0,
-        }));
+        const side = this.overlayPosition.flipSide(trigger, 'bottom', {
+            overlayHeight: this.portalRef.panel.offsetHeight,
+        });
+        this.resolvedSide.set(side);
+        this.portalRef.position(trigger, side, 8);
     }
     writeValue(value) {
         this.value.set(value);
@@ -3932,6 +4043,7 @@ class PshSelectComponent {
         else {
             this.isOpenSignal.set(true);
             this.opened.emit();
+            this.openPanel();
         }
     }
     close() {
@@ -3940,6 +4052,7 @@ class PshSelectComponent {
         this.isOpenSignal.set(false);
         this.searchTermSignal.set('');
         this.focusedIndex.set(-1);
+        this.closePanel();
         this.closed.emit();
     }
     select(option, groupDisabled = false) {
@@ -4100,7 +4213,7 @@ class PshSelectComponent {
                 useExisting: PshSelectComponent,
                 multi: true
             }
-        ], hostDirectives: [{ directive: PshClickOutsideDirective }], ngImport: i0, template: "<div class=\"select-container\">\r\n  @if (label()) {\r\n    <!-- label[for] delegates focus to its control natively; the click handler is a convenience. -->\r\n    <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\r\n    <label class=\"select-label\" [attr.for]=\"selectId\" (click)=\"focusSelect()\" [class.required]=\"required()\">\r\n      {{ label() }}\r\n      @if (required()) { <span class=\"required-mark\">*</span> }\r\n    </label>\r\n  }\r\n\r\n  <div class=\"select-trigger-wrapper\">\r\n  <div class=\"select-trigger\"\r\n       role=\"combobox\"\r\n       [id]=\"selectId\"\r\n       [attr.aria-expanded]=\"isOpen()\"\r\n       [attr.aria-haspopup]=\"'listbox'\"\r\n       [attr.aria-controls]=\"selectId + '-listbox'\"\r\n       [attr.aria-activedescendant]=\"activeDescendant()\"\r\n       [attr.aria-label]=\"computedAriaLabel()\"\r\n       [attr.aria-invalid]=\"!!error()\"\r\n       [attr.aria-required]=\"required()\"\r\n       [attr.aria-disabled]=\"disabled()\"\r\n       [attr.aria-busy]=\"loading()\"\r\n       [attr.aria-describedby]=\"describedBy()\"\r\n       [attr.tabindex]=\"disabled() || loading() ? -1 : 0\"\r\n       (keydown)=\"handleKeydown($event)\"\r\n       (click)=\"toggle()\">\r\n    <div class=\"select-value\">\r\n      <span [class.placeholder]=\"!hasValue()\">\r\n        {{ selectedLabel() }}\r\n      </span>\r\n    </div>\r\n    <div class=\"select-actions\">\r\n      @if (clearable() && hasValue() && !disabled()) {\r\n        <button class=\"select-clear\" (click)=\"clear($event)\">\r\n          <i class=\"ph ph-x\"></i>\r\n        </button>\r\n      }\r\n      @if (loading()) {\r\n        <div class=\"select-loader-trigger\"></div>\r\n      } @else {\r\n        <i class=\"ph ph-caret-down select-arrow\"></i>\r\n      }\r\n    </div>\r\n  </div>\r\n\r\n  @if (isOpen()) {\r\n    <div class=\"select-dropdown\" [class.open-top]=\"resolvedSide() === 'top'\">\r\n      @if (searchable()) {\r\n        <div class=\"select-search\">\r\n          <i class=\"ph ph-magnifying-glass select-search-icon\"></i>\r\n          <input type=\"text\"\r\n                 [placeholder]=\"searchConfig().placeholder\"\r\n                 [value]=\"searchTerm()\"\r\n                 (input)=\"onSearch($event)\"\r\n                 (click)=\"$event.stopPropagation()\">\r\n        </div>\r\n      }\r\n      <div class=\"select-options\"\r\n           role=\"listbox\"\r\n           [id]=\"selectId + '-listbox'\"\r\n           [attr.aria-multiselectable]=\"multiple() || null\"\r\n           (scroll)=\"onScroll($event)\">\r\n        @for (item of filteredOptions(); track getOptionKey(item)) {\r\n          @if (isOptionGroup(item)) {\r\n            <div class=\"select-group\" role=\"group\" [attr.aria-label]=\"item.label\">\r\n              <div class=\"select-group-label\">{{ item.label }}</div>\r\n              @for (opt of item.options; track opt.label) {\r\n                <!-- option in a listbox: keyboard is handled at the widget level (arrows + aria-activedescendant). -->\r\n                <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -->\r\n                <div class=\"select-option\"\r\n                     role=\"option\"\r\n                     [id]=\"selectId + '-' + opt.value\"\r\n                     [attr.aria-selected]=\"isSelected(opt)\"\r\n                     [attr.aria-disabled]=\"(item.disabled || opt.disabled) ? true : null\"\r\n                     [attr.tabindex]=\"(item.disabled || opt.disabled) ? -1 : null\"\r\n                     [class.selected]=\"isSelected(opt)\"\r\n                     [class.disabled]=\"item.disabled || opt.disabled\"\r\n                     [class.focused]=\"getFlatIndex(opt) === focusedIndex()\"\r\n                     (click)=\"select(opt, !!item.disabled)\">\r\n                  @if (opt.icon) { <i [class]=\"'ph ph-' + opt.icon\" aria-hidden=\"true\"></i> }\r\n                  <div class=\"select-option-content\">\r\n                    <span class=\"select-option-label\">{{ opt.label }}</span>\r\n                    @if (opt.description) { <span class=\"select-option-description\">{{ opt.description }}</span> }\r\n                  </div>\r\n                </div>\r\n              }\r\n            </div>\r\n          } @else {\r\n            <!-- option in a listbox: keyboard is handled at the widget level (arrows + aria-activedescendant). -->\r\n            <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -->\r\n            <div class=\"select-option\"\r\n                 role=\"option\"\r\n                 [id]=\"selectId + '-' + item.value\"\r\n                 [attr.aria-selected]=\"isSelected(item)\"\r\n                 [attr.aria-disabled]=\"item.disabled ? true : null\"\r\n                 [attr.tabindex]=\"item.disabled ? -1 : null\"\r\n                 [class.selected]=\"isSelected(item)\"\r\n                 [class.disabled]=\"item.disabled\"\r\n                 [class.focused]=\"getFlatIndex(item) === focusedIndex()\"\r\n                 (click)=\"select(item)\">\r\n              @if (item.icon) { <i [class]=\"'ph ph-' + item.icon\" aria-hidden=\"true\"></i> }\r\n              <div class=\"select-option-content\">\r\n                <span class=\"select-option-label\">{{ item.label }}</span>\r\n                @if (item.description) { <span class=\"select-option-description\">{{ item.description }}</span> }\r\n              </div>\r\n            </div>\r\n          }\r\n        } @empty {\r\n          <div class=\"select-no-results\">Aucun r\u00E9sultat</div>\r\n        }\r\n      </div>\r\n    </div>\r\n  }\r\n  </div>\r\n\r\n  @if (error()) {\r\n    <div id=\"error-message\" class=\"select-error-message\" role=\"alert\">{{ error() }}</div>\r\n  } @else if (success()) {\r\n    <div id=\"success-message\" class=\"select-success-message\" role=\"status\">{{ success() }}</div>\r\n  } @else if (hint()) {\r\n    <div id=\"hint-message\" class=\"select-hint\">{{ hint() }}</div>\r\n  }\r\n</div>\r\n", styles: [":host{display:block;width:100%;max-width:18.75rem}:host.full-width{max-width:none}.select-container{width:100%;display:flex;flex-direction:column;gap:var(--form-field-gap)}.select-trigger-wrapper{position:relative}.select-label{display:block;color:var(--text-color);font-size:.875rem;font-weight:500;cursor:pointer}.select-trigger{display:flex;align-items:center;justify-content:space-between;width:100%;height:2.5rem;padding:0 1rem;background:var(--surface-0);border:.125rem solid var(--surface-border);border-radius:var(--border-radius);cursor:pointer;box-sizing:border-box}.select-trigger:focus{border-color:var(--primary-color);outline:none;box-shadow:0 0 0 .125rem var(--focus-ring-color)}:host.error .select-trigger{border-color:var(--danger-color)}:host.error .select-trigger:focus{box-shadow:0 0 0 .125rem var(--focus-ring-error)}:host.success .select-trigger{border-color:var(--success-color)}:host.success .select-trigger:focus{box-shadow:0 0 0 .125rem var(--focus-ring-success)}:host.disabled .select-trigger{background:var(--surface-ground);cursor:not-allowed;opacity:var(--opacity-disabled)}:host.filled .select-trigger{background:var(--surface-ground);border:.125rem solid var(--surface-border)}:host.filled .select-trigger:hover:not([disabled]):not(:focus){background:var(--surface-hover)}.select-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.select-actions{display:flex;align-items:center;gap:.5rem;flex-shrink:0}.select-clear{background:none;border:none;cursor:pointer;padding:0;color:var(--text-color-secondary);display:flex}.select-clear:hover{color:var(--danger-color)}.select-loader-trigger{width:1rem;height:1rem;border:2px solid var(--surface-border);border-top-color:var(--primary-color);border-radius:50%;animation:spin .8s linear infinite}.select-arrow{transition:transform .2s;font-size:1rem;color:var(--text-color-secondary)}:host[aria-expanded=true] .select-arrow{transform:rotate(180deg)}.select-dropdown.open-top{top:auto;bottom:calc(100% + .25rem)}.select-dropdown{position:absolute;top:calc(100% + .25rem);left:0;right:0;z-index:var(--z-index-dropdown);background:var(--surface-0);border:.125rem solid var(--surface-border);border-radius:var(--border-radius);box-shadow:var(--shadow-lg)}.select-search{position:relative;padding:.5rem;border-bottom:.0625rem solid var(--surface-border)}.select-search-icon{position:absolute;left:1.25rem;top:50%;transform:translateY(-50%);color:var(--text-color-secondary);font-size:.875rem;pointer-events:none}.select-search input{width:100%;height:2rem;padding:0 .75rem 0 2rem;background:var(--surface-ground);border:.0625rem solid var(--surface-border);border-radius:var(--border-radius);color:var(--text-color);font-size:.875rem;outline:none;box-sizing:border-box;transition:border-color .15s}.select-search input::placeholder{color:var(--text-color-secondary)}.select-search input:focus{border-color:var(--primary-color)}.select-options{max-height:15rem;overflow-y:auto}.select-group-label{padding:.5rem 1rem;font-size:.75rem;font-weight:600;color:var(--text-color-secondary);background:var(--surface-ground)}.select-option{padding:.625rem 1rem;cursor:pointer;display:flex;align-items:flex-start;gap:.5rem}.select-option:hover{background:var(--surface-hover)}.select-option.selected{background:rgba(var(--primary-color-rgb),.1);color:var(--primary-color);font-weight:500}.select-option.focused{background:var(--surface-hover)}.select-option.disabled{opacity:var(--opacity-disabled);cursor:not-allowed}.select-option i{flex-shrink:0;line-height:1.4}.select-option-content{flex:1;min-width:0;display:flex;flex-direction:column;gap:.125rem}.select-option-label{min-width:0}.select-option-description{font-size:.75rem;color:var(--text-color-secondary)}.select-error-message,.select-success-message,.select-hint{font-size:.875rem}.select-error-message{color:var(--danger-color)}.select-success-message{color:var(--success-color)}.select-hint{color:var(--text-color-secondary)}:host.small .select-trigger{text-overflow:ellipsis;height:2rem;font-size:.875rem}:host.large .select-trigger{text-overflow:ellipsis;height:3rem;font-size:1.125rem}@keyframes spin{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "panelTpl", first: true, predicate: ["panelTpl"], descendants: true, isSignal: true }], hostDirectives: [{ directive: PshClickOutsideDirective }], ngImport: i0, template: "<div class=\"select-container\">\r\n  @if (label()) {\r\n    <!-- label[for] delegates focus to its control natively; the click handler is a convenience. -->\r\n    <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\r\n    <label class=\"select-label\" [attr.for]=\"selectId\" (click)=\"focusSelect()\" [class.required]=\"required()\">\r\n      {{ label() }}\r\n      @if (required()) { <span class=\"required-mark\">*</span> }\r\n    </label>\r\n  }\r\n\r\n  <div class=\"select-trigger-wrapper\">\r\n  <div class=\"select-trigger\"\r\n       role=\"combobox\"\r\n       [id]=\"selectId\"\r\n       [attr.aria-expanded]=\"isOpen()\"\r\n       [attr.aria-haspopup]=\"'listbox'\"\r\n       [attr.aria-controls]=\"selectId + '-listbox'\"\r\n       [attr.aria-activedescendant]=\"activeDescendant()\"\r\n       [attr.aria-label]=\"computedAriaLabel()\"\r\n       [attr.aria-invalid]=\"!!error()\"\r\n       [attr.aria-required]=\"required()\"\r\n       [attr.aria-disabled]=\"disabled()\"\r\n       [attr.aria-busy]=\"loading()\"\r\n       [attr.aria-describedby]=\"describedBy()\"\r\n       [attr.tabindex]=\"disabled() || loading() ? -1 : 0\"\r\n       (keydown)=\"handleKeydown($event)\"\r\n       (click)=\"toggle()\">\r\n    <div class=\"select-value\">\r\n      <span [class.placeholder]=\"!hasValue()\">\r\n        {{ selectedLabel() }}\r\n      </span>\r\n    </div>\r\n    <div class=\"select-actions\">\r\n      @if (clearable() && hasValue() && !disabled()) {\r\n        <button class=\"select-clear\" (click)=\"clear($event)\">\r\n          <i class=\"ph ph-x\"></i>\r\n        </button>\r\n      }\r\n      @if (loading()) {\r\n        <div class=\"select-loader-trigger\"></div>\r\n      } @else {\r\n        <i class=\"ph ph-caret-down select-arrow\"></i>\r\n      }\r\n    </div>\r\n  </div>\r\n\r\n  <ng-template #panelTpl>\r\n    <div class=\"select-dropdown\" [class.open-top]=\"resolvedSide() === 'top'\">\r\n      @if (searchable()) {\r\n        <div class=\"select-search\">\r\n          <i class=\"ph ph-magnifying-glass select-search-icon\"></i>\r\n          <input type=\"text\"\r\n                 [placeholder]=\"searchConfig().placeholder\"\r\n                 [value]=\"searchTerm()\"\r\n                 (input)=\"onSearch($event)\"\r\n                 (click)=\"$event.stopPropagation()\">\r\n        </div>\r\n      }\r\n      <div class=\"select-options\"\r\n           role=\"listbox\"\r\n           [id]=\"selectId + '-listbox'\"\r\n           [attr.aria-multiselectable]=\"multiple() || null\"\r\n           (scroll)=\"onScroll($event)\">\r\n        @for (item of filteredOptions(); track getOptionKey(item)) {\r\n          @if (isOptionGroup(item)) {\r\n            <div class=\"select-group\" role=\"group\" [attr.aria-label]=\"item.label\">\r\n              <div class=\"select-group-label\">{{ item.label }}</div>\r\n              @for (opt of item.options; track opt.label) {\r\n                <!-- option in a listbox: keyboard is handled at the widget level (arrows + aria-activedescendant). -->\r\n                <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -->\r\n                <div class=\"select-option\"\r\n                     role=\"option\"\r\n                     [id]=\"selectId + '-' + opt.value\"\r\n                     [attr.aria-selected]=\"isSelected(opt)\"\r\n                     [attr.aria-disabled]=\"(item.disabled || opt.disabled) ? true : null\"\r\n                     [attr.tabindex]=\"(item.disabled || opt.disabled) ? -1 : null\"\r\n                     [class.selected]=\"isSelected(opt)\"\r\n                     [class.disabled]=\"item.disabled || opt.disabled\"\r\n                     [class.focused]=\"getFlatIndex(opt) === focusedIndex()\"\r\n                     (click)=\"select(opt, !!item.disabled)\">\r\n                  @if (opt.icon) { <i [class]=\"'ph ph-' + opt.icon\" aria-hidden=\"true\"></i> }\r\n                  <div class=\"select-option-content\">\r\n                    <span class=\"select-option-label\">{{ opt.label }}</span>\r\n                    @if (opt.description) { <span class=\"select-option-description\">{{ opt.description }}</span> }\r\n                  </div>\r\n                </div>\r\n              }\r\n            </div>\r\n          } @else {\r\n            <!-- option in a listbox: keyboard is handled at the widget level (arrows + aria-activedescendant). -->\r\n            <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -->\r\n            <div class=\"select-option\"\r\n                 role=\"option\"\r\n                 [id]=\"selectId + '-' + item.value\"\r\n                 [attr.aria-selected]=\"isSelected(item)\"\r\n                 [attr.aria-disabled]=\"item.disabled ? true : null\"\r\n                 [attr.tabindex]=\"item.disabled ? -1 : null\"\r\n                 [class.selected]=\"isSelected(item)\"\r\n                 [class.disabled]=\"item.disabled\"\r\n                 [class.focused]=\"getFlatIndex(item) === focusedIndex()\"\r\n                 (click)=\"select(item)\">\r\n              @if (item.icon) { <i [class]=\"'ph ph-' + item.icon\" aria-hidden=\"true\"></i> }\r\n              <div class=\"select-option-content\">\r\n                <span class=\"select-option-label\">{{ item.label }}</span>\r\n                @if (item.description) { <span class=\"select-option-description\">{{ item.description }}</span> }\r\n              </div>\r\n            </div>\r\n          }\r\n        } @empty {\r\n          <div class=\"select-no-results\">Aucun r\u00E9sultat</div>\r\n        }\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n  </div>\r\n\r\n  @if (error()) {\r\n    <div id=\"error-message\" class=\"select-error-message\" role=\"alert\">{{ error() }}</div>\r\n  } @else if (success()) {\r\n    <div id=\"success-message\" class=\"select-success-message\" role=\"status\">{{ success() }}</div>\r\n  } @else if (hint()) {\r\n    <div id=\"hint-message\" class=\"select-hint\">{{ hint() }}</div>\r\n  }\r\n</div>\r\n", styles: [":host{display:block;width:100%;max-width:18.75rem}:host.full-width{max-width:none}.select-container{width:100%;display:flex;flex-direction:column;gap:var(--form-field-gap)}.select-trigger-wrapper{position:relative}.select-label{display:block;color:var(--text-color);font-size:.875rem;font-weight:500;cursor:pointer}.select-trigger{display:flex;align-items:center;justify-content:space-between;width:100%;height:2.5rem;padding:0 1rem;background:var(--surface-0);border:.125rem solid var(--surface-border);border-radius:var(--border-radius);cursor:pointer;box-sizing:border-box}.select-trigger:focus{border-color:var(--primary-color);outline:none;box-shadow:0 0 0 .125rem var(--focus-ring-color)}:host.error .select-trigger{border-color:var(--danger-color)}:host.error .select-trigger:focus{box-shadow:0 0 0 .125rem var(--focus-ring-error)}:host.success .select-trigger{border-color:var(--success-color)}:host.success .select-trigger:focus{box-shadow:0 0 0 .125rem var(--focus-ring-success)}:host.disabled .select-trigger{background:var(--surface-ground);cursor:not-allowed;opacity:var(--opacity-disabled)}:host.filled .select-trigger{background:var(--surface-ground);border:.125rem solid var(--surface-border)}:host.filled .select-trigger:hover:not([disabled]):not(:focus){background:var(--surface-hover)}.select-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.select-actions{display:flex;align-items:center;gap:.5rem;flex-shrink:0}.select-clear{background:none;border:none;cursor:pointer;padding:0;color:var(--text-color-secondary);display:flex}.select-clear:hover{color:var(--danger-color)}.select-loader-trigger{width:1rem;height:1rem;border:2px solid var(--surface-border);border-top-color:var(--primary-color);border-radius:50%;animation:spin .8s linear infinite}.select-arrow{transition:transform .2s;font-size:1rem;color:var(--text-color-secondary)}:host[aria-expanded=true] .select-arrow{transform:rotate(180deg)}.select-dropdown{display:flex;flex-direction:column;overflow:hidden;pointer-events:auto;background:var(--surface-0);border:.125rem solid var(--surface-border);border-radius:var(--border-radius);box-shadow:var(--shadow-lg)}.select-search{position:relative;flex-shrink:0;padding:.5rem;border-bottom:.0625rem solid var(--surface-border)}.select-search-icon{position:absolute;left:1.25rem;top:50%;transform:translateY(-50%);color:var(--text-color-secondary);font-size:.875rem;pointer-events:none}.select-search input{width:100%;height:2rem;padding:0 .75rem 0 2rem;background:var(--surface-ground);border:.0625rem solid var(--surface-border);border-radius:var(--border-radius);color:var(--text-color);font-size:.875rem;outline:none;box-sizing:border-box;transition:border-color .15s}.select-search input::placeholder{color:var(--text-color-secondary)}.select-search input:focus{border-color:var(--primary-color)}.select-options{flex:0 1 auto;max-height:15rem;overflow-y:auto}.select-group-label{padding:.5rem 1rem;font-size:.75rem;font-weight:600;color:var(--text-color-secondary);background:var(--surface-ground)}.select-option{padding:.625rem 1rem;cursor:pointer;display:flex;align-items:flex-start;gap:.5rem}.select-option:hover{background:var(--surface-hover)}.select-option.selected{background:rgba(var(--primary-color-rgb),.1);color:var(--primary-color);font-weight:500}.select-option.focused{background:var(--surface-hover)}.select-option.disabled{opacity:var(--opacity-disabled);cursor:not-allowed}.select-option i{flex-shrink:0;line-height:1.4}.select-option-content{flex:1;min-width:0;display:flex;flex-direction:column;gap:.125rem}.select-option-label{min-width:0}.select-option-description{font-size:.75rem;color:var(--text-color-secondary)}.select-error-message,.select-success-message,.select-hint{font-size:.875rem}.select-error-message{color:var(--danger-color)}.select-success-message{color:var(--success-color)}.select-hint{color:var(--text-color-secondary)}:host.small .select-trigger{text-overflow:ellipsis;height:2rem;font-size:.875rem}:host.large .select-trigger{text-overflow:ellipsis;height:3rem;font-size:1.125rem}@keyframes spin{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: PshSelectComponent, decorators: [{
             type: Component,
@@ -4122,8 +4235,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
                         '[class.loading]': 'loading()',
                         '[attr.aria-expanded]': 'isOpen().toString()',
                         '[attr.data-state]': 'state()'
-                    }, template: "<div class=\"select-container\">\r\n  @if (label()) {\r\n    <!-- label[for] delegates focus to its control natively; the click handler is a convenience. -->\r\n    <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\r\n    <label class=\"select-label\" [attr.for]=\"selectId\" (click)=\"focusSelect()\" [class.required]=\"required()\">\r\n      {{ label() }}\r\n      @if (required()) { <span class=\"required-mark\">*</span> }\r\n    </label>\r\n  }\r\n\r\n  <div class=\"select-trigger-wrapper\">\r\n  <div class=\"select-trigger\"\r\n       role=\"combobox\"\r\n       [id]=\"selectId\"\r\n       [attr.aria-expanded]=\"isOpen()\"\r\n       [attr.aria-haspopup]=\"'listbox'\"\r\n       [attr.aria-controls]=\"selectId + '-listbox'\"\r\n       [attr.aria-activedescendant]=\"activeDescendant()\"\r\n       [attr.aria-label]=\"computedAriaLabel()\"\r\n       [attr.aria-invalid]=\"!!error()\"\r\n       [attr.aria-required]=\"required()\"\r\n       [attr.aria-disabled]=\"disabled()\"\r\n       [attr.aria-busy]=\"loading()\"\r\n       [attr.aria-describedby]=\"describedBy()\"\r\n       [attr.tabindex]=\"disabled() || loading() ? -1 : 0\"\r\n       (keydown)=\"handleKeydown($event)\"\r\n       (click)=\"toggle()\">\r\n    <div class=\"select-value\">\r\n      <span [class.placeholder]=\"!hasValue()\">\r\n        {{ selectedLabel() }}\r\n      </span>\r\n    </div>\r\n    <div class=\"select-actions\">\r\n      @if (clearable() && hasValue() && !disabled()) {\r\n        <button class=\"select-clear\" (click)=\"clear($event)\">\r\n          <i class=\"ph ph-x\"></i>\r\n        </button>\r\n      }\r\n      @if (loading()) {\r\n        <div class=\"select-loader-trigger\"></div>\r\n      } @else {\r\n        <i class=\"ph ph-caret-down select-arrow\"></i>\r\n      }\r\n    </div>\r\n  </div>\r\n\r\n  @if (isOpen()) {\r\n    <div class=\"select-dropdown\" [class.open-top]=\"resolvedSide() === 'top'\">\r\n      @if (searchable()) {\r\n        <div class=\"select-search\">\r\n          <i class=\"ph ph-magnifying-glass select-search-icon\"></i>\r\n          <input type=\"text\"\r\n                 [placeholder]=\"searchConfig().placeholder\"\r\n                 [value]=\"searchTerm()\"\r\n                 (input)=\"onSearch($event)\"\r\n                 (click)=\"$event.stopPropagation()\">\r\n        </div>\r\n      }\r\n      <div class=\"select-options\"\r\n           role=\"listbox\"\r\n           [id]=\"selectId + '-listbox'\"\r\n           [attr.aria-multiselectable]=\"multiple() || null\"\r\n           (scroll)=\"onScroll($event)\">\r\n        @for (item of filteredOptions(); track getOptionKey(item)) {\r\n          @if (isOptionGroup(item)) {\r\n            <div class=\"select-group\" role=\"group\" [attr.aria-label]=\"item.label\">\r\n              <div class=\"select-group-label\">{{ item.label }}</div>\r\n              @for (opt of item.options; track opt.label) {\r\n                <!-- option in a listbox: keyboard is handled at the widget level (arrows + aria-activedescendant). -->\r\n                <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -->\r\n                <div class=\"select-option\"\r\n                     role=\"option\"\r\n                     [id]=\"selectId + '-' + opt.value\"\r\n                     [attr.aria-selected]=\"isSelected(opt)\"\r\n                     [attr.aria-disabled]=\"(item.disabled || opt.disabled) ? true : null\"\r\n                     [attr.tabindex]=\"(item.disabled || opt.disabled) ? -1 : null\"\r\n                     [class.selected]=\"isSelected(opt)\"\r\n                     [class.disabled]=\"item.disabled || opt.disabled\"\r\n                     [class.focused]=\"getFlatIndex(opt) === focusedIndex()\"\r\n                     (click)=\"select(opt, !!item.disabled)\">\r\n                  @if (opt.icon) { <i [class]=\"'ph ph-' + opt.icon\" aria-hidden=\"true\"></i> }\r\n                  <div class=\"select-option-content\">\r\n                    <span class=\"select-option-label\">{{ opt.label }}</span>\r\n                    @if (opt.description) { <span class=\"select-option-description\">{{ opt.description }}</span> }\r\n                  </div>\r\n                </div>\r\n              }\r\n            </div>\r\n          } @else {\r\n            <!-- option in a listbox: keyboard is handled at the widget level (arrows + aria-activedescendant). -->\r\n            <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -->\r\n            <div class=\"select-option\"\r\n                 role=\"option\"\r\n                 [id]=\"selectId + '-' + item.value\"\r\n                 [attr.aria-selected]=\"isSelected(item)\"\r\n                 [attr.aria-disabled]=\"item.disabled ? true : null\"\r\n                 [attr.tabindex]=\"item.disabled ? -1 : null\"\r\n                 [class.selected]=\"isSelected(item)\"\r\n                 [class.disabled]=\"item.disabled\"\r\n                 [class.focused]=\"getFlatIndex(item) === focusedIndex()\"\r\n                 (click)=\"select(item)\">\r\n              @if (item.icon) { <i [class]=\"'ph ph-' + item.icon\" aria-hidden=\"true\"></i> }\r\n              <div class=\"select-option-content\">\r\n                <span class=\"select-option-label\">{{ item.label }}</span>\r\n                @if (item.description) { <span class=\"select-option-description\">{{ item.description }}</span> }\r\n              </div>\r\n            </div>\r\n          }\r\n        } @empty {\r\n          <div class=\"select-no-results\">Aucun r\u00E9sultat</div>\r\n        }\r\n      </div>\r\n    </div>\r\n  }\r\n  </div>\r\n\r\n  @if (error()) {\r\n    <div id=\"error-message\" class=\"select-error-message\" role=\"alert\">{{ error() }}</div>\r\n  } @else if (success()) {\r\n    <div id=\"success-message\" class=\"select-success-message\" role=\"status\">{{ success() }}</div>\r\n  } @else if (hint()) {\r\n    <div id=\"hint-message\" class=\"select-hint\">{{ hint() }}</div>\r\n  }\r\n</div>\r\n", styles: [":host{display:block;width:100%;max-width:18.75rem}:host.full-width{max-width:none}.select-container{width:100%;display:flex;flex-direction:column;gap:var(--form-field-gap)}.select-trigger-wrapper{position:relative}.select-label{display:block;color:var(--text-color);font-size:.875rem;font-weight:500;cursor:pointer}.select-trigger{display:flex;align-items:center;justify-content:space-between;width:100%;height:2.5rem;padding:0 1rem;background:var(--surface-0);border:.125rem solid var(--surface-border);border-radius:var(--border-radius);cursor:pointer;box-sizing:border-box}.select-trigger:focus{border-color:var(--primary-color);outline:none;box-shadow:0 0 0 .125rem var(--focus-ring-color)}:host.error .select-trigger{border-color:var(--danger-color)}:host.error .select-trigger:focus{box-shadow:0 0 0 .125rem var(--focus-ring-error)}:host.success .select-trigger{border-color:var(--success-color)}:host.success .select-trigger:focus{box-shadow:0 0 0 .125rem var(--focus-ring-success)}:host.disabled .select-trigger{background:var(--surface-ground);cursor:not-allowed;opacity:var(--opacity-disabled)}:host.filled .select-trigger{background:var(--surface-ground);border:.125rem solid var(--surface-border)}:host.filled .select-trigger:hover:not([disabled]):not(:focus){background:var(--surface-hover)}.select-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.select-actions{display:flex;align-items:center;gap:.5rem;flex-shrink:0}.select-clear{background:none;border:none;cursor:pointer;padding:0;color:var(--text-color-secondary);display:flex}.select-clear:hover{color:var(--danger-color)}.select-loader-trigger{width:1rem;height:1rem;border:2px solid var(--surface-border);border-top-color:var(--primary-color);border-radius:50%;animation:spin .8s linear infinite}.select-arrow{transition:transform .2s;font-size:1rem;color:var(--text-color-secondary)}:host[aria-expanded=true] .select-arrow{transform:rotate(180deg)}.select-dropdown.open-top{top:auto;bottom:calc(100% + .25rem)}.select-dropdown{position:absolute;top:calc(100% + .25rem);left:0;right:0;z-index:var(--z-index-dropdown);background:var(--surface-0);border:.125rem solid var(--surface-border);border-radius:var(--border-radius);box-shadow:var(--shadow-lg)}.select-search{position:relative;padding:.5rem;border-bottom:.0625rem solid var(--surface-border)}.select-search-icon{position:absolute;left:1.25rem;top:50%;transform:translateY(-50%);color:var(--text-color-secondary);font-size:.875rem;pointer-events:none}.select-search input{width:100%;height:2rem;padding:0 .75rem 0 2rem;background:var(--surface-ground);border:.0625rem solid var(--surface-border);border-radius:var(--border-radius);color:var(--text-color);font-size:.875rem;outline:none;box-sizing:border-box;transition:border-color .15s}.select-search input::placeholder{color:var(--text-color-secondary)}.select-search input:focus{border-color:var(--primary-color)}.select-options{max-height:15rem;overflow-y:auto}.select-group-label{padding:.5rem 1rem;font-size:.75rem;font-weight:600;color:var(--text-color-secondary);background:var(--surface-ground)}.select-option{padding:.625rem 1rem;cursor:pointer;display:flex;align-items:flex-start;gap:.5rem}.select-option:hover{background:var(--surface-hover)}.select-option.selected{background:rgba(var(--primary-color-rgb),.1);color:var(--primary-color);font-weight:500}.select-option.focused{background:var(--surface-hover)}.select-option.disabled{opacity:var(--opacity-disabled);cursor:not-allowed}.select-option i{flex-shrink:0;line-height:1.4}.select-option-content{flex:1;min-width:0;display:flex;flex-direction:column;gap:.125rem}.select-option-label{min-width:0}.select-option-description{font-size:.75rem;color:var(--text-color-secondary)}.select-error-message,.select-success-message,.select-hint{font-size:.875rem}.select-error-message{color:var(--danger-color)}.select-success-message{color:var(--success-color)}.select-hint{color:var(--text-color-secondary)}:host.small .select-trigger{text-overflow:ellipsis;height:2rem;font-size:.875rem}:host.large .select-trigger{text-overflow:ellipsis;height:3rem;font-size:1.125rem}@keyframes spin{to{transform:rotate(360deg)}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], multiplePlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiplePlaceholder", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], success: [{ type: i0.Input, args: [{ isSignal: true, alias: "success", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], maxSelections: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSelections", required: false }] }], minSelections: [{ type: i0.Input, args: [{ isSignal: true, alias: "minSelections", required: false }] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], searchConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchConfig", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], searched: [{ type: i0.Output, args: ["searched"] }], scrollEnd: [{ type: i0.Output, args: ["scrollEnd"] }] } });
+                    }, template: "<div class=\"select-container\">\r\n  @if (label()) {\r\n    <!-- label[for] delegates focus to its control natively; the click handler is a convenience. -->\r\n    <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\r\n    <label class=\"select-label\" [attr.for]=\"selectId\" (click)=\"focusSelect()\" [class.required]=\"required()\">\r\n      {{ label() }}\r\n      @if (required()) { <span class=\"required-mark\">*</span> }\r\n    </label>\r\n  }\r\n\r\n  <div class=\"select-trigger-wrapper\">\r\n  <div class=\"select-trigger\"\r\n       role=\"combobox\"\r\n       [id]=\"selectId\"\r\n       [attr.aria-expanded]=\"isOpen()\"\r\n       [attr.aria-haspopup]=\"'listbox'\"\r\n       [attr.aria-controls]=\"selectId + '-listbox'\"\r\n       [attr.aria-activedescendant]=\"activeDescendant()\"\r\n       [attr.aria-label]=\"computedAriaLabel()\"\r\n       [attr.aria-invalid]=\"!!error()\"\r\n       [attr.aria-required]=\"required()\"\r\n       [attr.aria-disabled]=\"disabled()\"\r\n       [attr.aria-busy]=\"loading()\"\r\n       [attr.aria-describedby]=\"describedBy()\"\r\n       [attr.tabindex]=\"disabled() || loading() ? -1 : 0\"\r\n       (keydown)=\"handleKeydown($event)\"\r\n       (click)=\"toggle()\">\r\n    <div class=\"select-value\">\r\n      <span [class.placeholder]=\"!hasValue()\">\r\n        {{ selectedLabel() }}\r\n      </span>\r\n    </div>\r\n    <div class=\"select-actions\">\r\n      @if (clearable() && hasValue() && !disabled()) {\r\n        <button class=\"select-clear\" (click)=\"clear($event)\">\r\n          <i class=\"ph ph-x\"></i>\r\n        </button>\r\n      }\r\n      @if (loading()) {\r\n        <div class=\"select-loader-trigger\"></div>\r\n      } @else {\r\n        <i class=\"ph ph-caret-down select-arrow\"></i>\r\n      }\r\n    </div>\r\n  </div>\r\n\r\n  <ng-template #panelTpl>\r\n    <div class=\"select-dropdown\" [class.open-top]=\"resolvedSide() === 'top'\">\r\n      @if (searchable()) {\r\n        <div class=\"select-search\">\r\n          <i class=\"ph ph-magnifying-glass select-search-icon\"></i>\r\n          <input type=\"text\"\r\n                 [placeholder]=\"searchConfig().placeholder\"\r\n                 [value]=\"searchTerm()\"\r\n                 (input)=\"onSearch($event)\"\r\n                 (click)=\"$event.stopPropagation()\">\r\n        </div>\r\n      }\r\n      <div class=\"select-options\"\r\n           role=\"listbox\"\r\n           [id]=\"selectId + '-listbox'\"\r\n           [attr.aria-multiselectable]=\"multiple() || null\"\r\n           (scroll)=\"onScroll($event)\">\r\n        @for (item of filteredOptions(); track getOptionKey(item)) {\r\n          @if (isOptionGroup(item)) {\r\n            <div class=\"select-group\" role=\"group\" [attr.aria-label]=\"item.label\">\r\n              <div class=\"select-group-label\">{{ item.label }}</div>\r\n              @for (opt of item.options; track opt.label) {\r\n                <!-- option in a listbox: keyboard is handled at the widget level (arrows + aria-activedescendant). -->\r\n                <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -->\r\n                <div class=\"select-option\"\r\n                     role=\"option\"\r\n                     [id]=\"selectId + '-' + opt.value\"\r\n                     [attr.aria-selected]=\"isSelected(opt)\"\r\n                     [attr.aria-disabled]=\"(item.disabled || opt.disabled) ? true : null\"\r\n                     [attr.tabindex]=\"(item.disabled || opt.disabled) ? -1 : null\"\r\n                     [class.selected]=\"isSelected(opt)\"\r\n                     [class.disabled]=\"item.disabled || opt.disabled\"\r\n                     [class.focused]=\"getFlatIndex(opt) === focusedIndex()\"\r\n                     (click)=\"select(opt, !!item.disabled)\">\r\n                  @if (opt.icon) { <i [class]=\"'ph ph-' + opt.icon\" aria-hidden=\"true\"></i> }\r\n                  <div class=\"select-option-content\">\r\n                    <span class=\"select-option-label\">{{ opt.label }}</span>\r\n                    @if (opt.description) { <span class=\"select-option-description\">{{ opt.description }}</span> }\r\n                  </div>\r\n                </div>\r\n              }\r\n            </div>\r\n          } @else {\r\n            <!-- option in a listbox: keyboard is handled at the widget level (arrows + aria-activedescendant). -->\r\n            <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -->\r\n            <div class=\"select-option\"\r\n                 role=\"option\"\r\n                 [id]=\"selectId + '-' + item.value\"\r\n                 [attr.aria-selected]=\"isSelected(item)\"\r\n                 [attr.aria-disabled]=\"item.disabled ? true : null\"\r\n                 [attr.tabindex]=\"item.disabled ? -1 : null\"\r\n                 [class.selected]=\"isSelected(item)\"\r\n                 [class.disabled]=\"item.disabled\"\r\n                 [class.focused]=\"getFlatIndex(item) === focusedIndex()\"\r\n                 (click)=\"select(item)\">\r\n              @if (item.icon) { <i [class]=\"'ph ph-' + item.icon\" aria-hidden=\"true\"></i> }\r\n              <div class=\"select-option-content\">\r\n                <span class=\"select-option-label\">{{ item.label }}</span>\r\n                @if (item.description) { <span class=\"select-option-description\">{{ item.description }}</span> }\r\n              </div>\r\n            </div>\r\n          }\r\n        } @empty {\r\n          <div class=\"select-no-results\">Aucun r\u00E9sultat</div>\r\n        }\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n  </div>\r\n\r\n  @if (error()) {\r\n    <div id=\"error-message\" class=\"select-error-message\" role=\"alert\">{{ error() }}</div>\r\n  } @else if (success()) {\r\n    <div id=\"success-message\" class=\"select-success-message\" role=\"status\">{{ success() }}</div>\r\n  } @else if (hint()) {\r\n    <div id=\"hint-message\" class=\"select-hint\">{{ hint() }}</div>\r\n  }\r\n</div>\r\n", styles: [":host{display:block;width:100%;max-width:18.75rem}:host.full-width{max-width:none}.select-container{width:100%;display:flex;flex-direction:column;gap:var(--form-field-gap)}.select-trigger-wrapper{position:relative}.select-label{display:block;color:var(--text-color);font-size:.875rem;font-weight:500;cursor:pointer}.select-trigger{display:flex;align-items:center;justify-content:space-between;width:100%;height:2.5rem;padding:0 1rem;background:var(--surface-0);border:.125rem solid var(--surface-border);border-radius:var(--border-radius);cursor:pointer;box-sizing:border-box}.select-trigger:focus{border-color:var(--primary-color);outline:none;box-shadow:0 0 0 .125rem var(--focus-ring-color)}:host.error .select-trigger{border-color:var(--danger-color)}:host.error .select-trigger:focus{box-shadow:0 0 0 .125rem var(--focus-ring-error)}:host.success .select-trigger{border-color:var(--success-color)}:host.success .select-trigger:focus{box-shadow:0 0 0 .125rem var(--focus-ring-success)}:host.disabled .select-trigger{background:var(--surface-ground);cursor:not-allowed;opacity:var(--opacity-disabled)}:host.filled .select-trigger{background:var(--surface-ground);border:.125rem solid var(--surface-border)}:host.filled .select-trigger:hover:not([disabled]):not(:focus){background:var(--surface-hover)}.select-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.select-actions{display:flex;align-items:center;gap:.5rem;flex-shrink:0}.select-clear{background:none;border:none;cursor:pointer;padding:0;color:var(--text-color-secondary);display:flex}.select-clear:hover{color:var(--danger-color)}.select-loader-trigger{width:1rem;height:1rem;border:2px solid var(--surface-border);border-top-color:var(--primary-color);border-radius:50%;animation:spin .8s linear infinite}.select-arrow{transition:transform .2s;font-size:1rem;color:var(--text-color-secondary)}:host[aria-expanded=true] .select-arrow{transform:rotate(180deg)}.select-dropdown{display:flex;flex-direction:column;overflow:hidden;pointer-events:auto;background:var(--surface-0);border:.125rem solid var(--surface-border);border-radius:var(--border-radius);box-shadow:var(--shadow-lg)}.select-search{position:relative;flex-shrink:0;padding:.5rem;border-bottom:.0625rem solid var(--surface-border)}.select-search-icon{position:absolute;left:1.25rem;top:50%;transform:translateY(-50%);color:var(--text-color-secondary);font-size:.875rem;pointer-events:none}.select-search input{width:100%;height:2rem;padding:0 .75rem 0 2rem;background:var(--surface-ground);border:.0625rem solid var(--surface-border);border-radius:var(--border-radius);color:var(--text-color);font-size:.875rem;outline:none;box-sizing:border-box;transition:border-color .15s}.select-search input::placeholder{color:var(--text-color-secondary)}.select-search input:focus{border-color:var(--primary-color)}.select-options{flex:0 1 auto;max-height:15rem;overflow-y:auto}.select-group-label{padding:.5rem 1rem;font-size:.75rem;font-weight:600;color:var(--text-color-secondary);background:var(--surface-ground)}.select-option{padding:.625rem 1rem;cursor:pointer;display:flex;align-items:flex-start;gap:.5rem}.select-option:hover{background:var(--surface-hover)}.select-option.selected{background:rgba(var(--primary-color-rgb),.1);color:var(--primary-color);font-weight:500}.select-option.focused{background:var(--surface-hover)}.select-option.disabled{opacity:var(--opacity-disabled);cursor:not-allowed}.select-option i{flex-shrink:0;line-height:1.4}.select-option-content{flex:1;min-width:0;display:flex;flex-direction:column;gap:.125rem}.select-option-label{min-width:0}.select-option-description{font-size:.75rem;color:var(--text-color-secondary)}.select-error-message,.select-success-message,.select-hint{font-size:.875rem}.select-error-message{color:var(--danger-color)}.select-success-message{color:var(--success-color)}.select-hint{color:var(--text-color-secondary)}:host.small .select-trigger{text-overflow:ellipsis;height:2rem;font-size:.875rem}:host.large .select-trigger{text-overflow:ellipsis;height:3rem;font-size:1.125rem}@keyframes spin{to{transform:rotate(360deg)}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { panelTpl: [{ type: i0.ViewChild, args: ['panelTpl', { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], multiplePlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiplePlaceholder", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], success: [{ type: i0.Input, args: [{ isSignal: true, alias: "success", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], maxSelections: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSelections", required: false }] }], minSelections: [{ type: i0.Input, args: [{ isSignal: true, alias: "minSelections", required: false }] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], searchConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchConfig", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], searched: [{ type: i0.Output, args: ["searched"] }], scrollEnd: [{ type: i0.Output, args: ["scrollEnd"] }] } });
 
 const SIDEBAR_CONFIG = new InjectionToken('SIDEBAR_CONFIG', {
     factory: () => ({
@@ -6153,5 +6266,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { CHECKBOX_CONFIG, CUSTOMER_CONTEXT_SERVICE, INPUT_LABELS, MODAL_CONFIG, ModalService, NgxTranslateProvider, PAGINATION_CONFIG, PROGRESSBAR_CONFIG, PSH_THEME_OPTIONS, PshAlertComponent, PshAvatarComponent, PshBadgeComponent, PshButtonComponent, PshCardComponent, PshCheckboxComponent, PshClickOutsideDirective, PshCollapseComponent, PshDropdownComponent, PshFlowStepComponent, PshFocusTrapDirective, PshHorizontalCardComponent, PshInfoCardComponent, PshInputComponent, PshLiveAnnouncerService, PshMenuComponent, PshModalComponent, PshOverlayPositionService, PshOverlayService, PshPaginationComponent, PshProgressbarComponent, PshRadioComponent, PshSelectComponent, PshSidebarComponent, PshSpinLoaderComponent, PshStatCardComponent, PshStateFlowIndicatorComponent, PshStepComponent, PshStepperComponent, PshSwitchComponent, PshTabBarComponent, PshTabComponent, PshTableComponent, PshTabsComponent, PshTagComponent, PshTextareaComponent, PshToastComponent, PshToastService, PshTooltipComponent, RADIO_CONFIG, RADIO_STYLES, SIDEBAR_CONFIG, SPINLOADER_CONFIG, STATE_FLOW_INDICATOR_CONFIG, STEPPER_CONFIG, SWITCH_CONFIG, ScrollService, TABLE_CONFIG, TABS_CONFIG, TAB_BAR_CONFIG, TAG_CONFIG, TEXTAREA_LABELS, TOAST_CONFIG, TOOLTIP_CONFIG, TRANSLATION_PROVIDER, ThemeService, ToastComponent, ToastService, provideTranslation };
+export { CHECKBOX_CONFIG, CUSTOMER_CONTEXT_SERVICE, INPUT_LABELS, MODAL_CONFIG, ModalService, NgxTranslateProvider, PAGINATION_CONFIG, PROGRESSBAR_CONFIG, PSH_THEME_OPTIONS, PshAlertComponent, PshAvatarComponent, PshBadgeComponent, PshButtonComponent, PshCardComponent, PshCheckboxComponent, PshClickOutsideDirective, PshCollapseComponent, PshDropdownComponent, PshFlowStepComponent, PshFocusTrapDirective, PshHorizontalCardComponent, PshInfoCardComponent, PshInputComponent, PshLiveAnnouncerService, PshMenuComponent, PshModalComponent, PshOverlayPositionService, PshOverlayService, PshPaginationComponent, PshPortalService, PshProgressbarComponent, PshRadioComponent, PshSelectComponent, PshSidebarComponent, PshSpinLoaderComponent, PshStatCardComponent, PshStateFlowIndicatorComponent, PshStepComponent, PshStepperComponent, PshSwitchComponent, PshTabBarComponent, PshTabComponent, PshTableComponent, PshTabsComponent, PshTagComponent, PshTextareaComponent, PshToastComponent, PshToastService, PshTooltipComponent, RADIO_CONFIG, RADIO_STYLES, SIDEBAR_CONFIG, SPINLOADER_CONFIG, STATE_FLOW_INDICATOR_CONFIG, STEPPER_CONFIG, SWITCH_CONFIG, ScrollService, TABLE_CONFIG, TABS_CONFIG, TAB_BAR_CONFIG, TAG_CONFIG, TEXTAREA_LABELS, TOAST_CONFIG, TOOLTIP_CONFIG, TRANSLATION_PROVIDER, ThemeService, ToastComponent, ToastService, provideTranslation };
 //# sourceMappingURL=ps-helix.mjs.map