ps-helix 6.0.0 → 6.0.2

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, ViewContainerRef, ChangeDetectorRef, ViewChild, Injector, afterNextRender, HostListener, Renderer2, contentChild, linkedSignal, EventEmitter, Output, Input, 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';
@@ -1516,6 +1516,112 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
                 }]
         }], ctorParameters: () => [], propDecorators: { pshClickOutside: [{ type: i0.Output, args: ["pshClickOutside"] }] } });
 
+/**
+ * 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),
+            positionByPlacement: (anchor, placement, gap) => this.positionByPlacement(panel, anchor, placement, 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`;
+        }
+    }
+    positionByPlacement(panel, anchor, placement, gap) {
+        const view = this.document.defaultView;
+        if (!view)
+            return;
+        const rect = anchor.getBoundingClientRect();
+        const [side, align] = placement.split('-');
+        const style = panel.style;
+        style.position = 'fixed';
+        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`;
+        }
+        // Content-sized menu: anchor the start/end edge to the trigger.
+        if (align === 'end') {
+            style.left = `${Math.max(0, rect.right - panel.offsetWidth)}px`;
+        }
+        else {
+            style.left = `${rect.left}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 PshDropdownComponent {
     getState() {
         if (this.disabled())
@@ -1528,7 +1634,14 @@ class PshDropdownComponent {
         this.elementRef = inject(ElementRef);
         this.isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
         this.overlayPosition = inject(PshOverlayPositionService);
-        this.injector = inject(Injector);
+        this.portal = inject(PshPortalService);
+        this.viewContainer = inject(ViewContainerRef);
+        // The menu is teleported to a body-level overlay layer on open so it escapes
+        // any ancestor overflow / stacking context (a modal body, a scrollable card…).
+        this.menuTpl = viewChild('menuTpl', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "menuTpl" }] : /* istanbul ignore next */ []));
+        this.portalRef = null;
+        this.repositionHandler = () => this.reposition();
         // Regular inputs
         this.appearance = input('filled', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
@@ -1584,33 +1697,54 @@ class PshDropdownComponent {
         ...(ngDevMode ? [{ debugName: "computedAriaLabel" }] : /* istanbul ignore next */ []));
         this.state = computed(() => this.getState(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
-        // Close on outside click via the shared click-outside primitive.
+        // Close on outside click. Clicks inside the menu are stopped at the menu
+        // (stopPropagation); as a safety net for the teleported panel we also ignore
+        // clicks whose target is inside it here.
         const clickOutside = inject(PshClickOutsideDirective);
-        const sub = clickOutside.pshClickOutside.subscribe(() => this.close());
-        inject(DestroyRef).onDestroy(() => sub.unsubscribe());
-        // Keep resolvedPlacement mirroring the input while closed; flip against the
-        // viewport (after the menu has rendered) when opened.
-        effect(() => {
-            if (this.isOpen()) {
-                afterNextRender(() => this.reposition(), { injector: this.injector });
-            }
-            else {
-                this.resolvedPlacement.set(this.placement());
-            }
+        const sub = clickOutside.pshClickOutside.subscribe(event => {
+            const target = event.target;
+            if (target && this.portalRef?.panel.contains(target))
+                return;
+            this.close();
+        });
+        inject(DestroyRef).onDestroy(() => {
+            sub.unsubscribe();
+            this.closePanel();
         });
     }
+    openPanel() {
+        if (!this.isBrowser || this.portalRef)
+            return;
+        const tpl = this.menuTpl();
+        if (!tpl)
+            return;
+        this.portalRef = this.portal.attach(tpl, this.viewContainer);
+        this.reposition();
+        const view = this.elementRef.nativeElement.ownerDocument.defaultView;
+        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.resolvedPlacement.set(this.placement());
+    }
     reposition() {
-        if (!this.isBrowser || !this.isOpen())
+        if (!this.portalRef)
             return;
         const host = this.elementRef.nativeElement;
         const trigger = host.querySelector('.dropdown-trigger');
-        const menu = host.querySelector('.dropdown-menu');
         if (!trigger)
             return;
-        this.resolvedPlacement.set(this.overlayPosition.flipPlacement(trigger, this.placement(), {
-            overlayHeight: menu?.offsetHeight ?? 0,
-            overlayWidth: menu?.offsetWidth ?? 0,
-        }));
+        const placement = this.overlayPosition.flipPlacement(trigger, this.placement(), {
+            overlayHeight: this.portalRef.panel.offsetHeight,
+            overlayWidth: this.portalRef.panel.offsetWidth,
+        });
+        this.resolvedPlacement.set(placement);
+        this.portalRef.positionByPlacement(trigger, placement, 4);
     }
     toggleDropdown() {
         if (!this.disabled()) {
@@ -1619,9 +1753,11 @@ class PshDropdownComponent {
             if (this.isOpen()) {
                 this.focusedItemIndex.set(0);
                 this.opened.emit();
+                this.openPanel();
             }
             else {
                 this.focusedItemIndex.set(-1);
+                this.closePanel();
                 this.closed.emit();
             }
         }
@@ -1637,6 +1773,7 @@ class PshDropdownComponent {
         if (this.isOpen()) {
             this.isOpenSignal.set(false);
             this.focusedItemIndex.set(-1);
+            this.closePanel();
             this.closed.emit();
         }
     }
@@ -1771,17 +1908,17 @@ class PshDropdownComponent {
     }
     focusItemAtIndex(index) {
         setTimeout(() => {
-            const item = this.elementRef.nativeElement.querySelector(`[data-dropdown-item-index="${index}"]`);
+            const item = this.portalRef?.panel.querySelector(`[data-dropdown-item-index="${index}"]`);
             item?.focus();
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: PshDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: PshDropdownComponent, isStandalone: true, selector: "psh-dropdown", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null }, iconOnlyText: { classPropertyName: "iconOnlyText", publicName: "iconOnlyText", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", selected: "selected", opened: "opened", closed: "closed" }, hostDirectives: [{ directive: PshClickOutsideDirective }], ngImport: i0, template: "<div\r\n  class=\"dropdown-container\"\r\n  [class]=\"size()\"\r\n  [class.open]=\"isOpen()\"\r\n  [class.disabled]=\"disabled()\"\r\n  [class.icon-only]=\"isIconOnly()\"\r\n  [attr.data-state]=\"state()\"\r\n>\r\n  <button\r\n    class=\"dropdown-trigger\"\r\n    [class]=\"appearance()\"\r\n    [class.primary]=\"variant() === 'primary'\"\r\n    [class.secondary]=\"variant() === 'secondary'\"\r\n    [class.success]=\"variant() === 'success'\"\r\n    [class.warning]=\"variant() === 'warning'\"\r\n    [class.danger]=\"variant() === 'danger'\"\r\n    (click)=\"toggleDropdown()\"\r\n    (keydown)=\"handleTriggerKeyDown($event)\"\r\n    [attr.aria-expanded]=\"isOpen()\"\r\n    [attr.aria-disabled]=\"disabled()\"\r\n    [attr.aria-label]=\"computedAriaLabel()\"\r\n    [attr.aria-haspopup]=\"'menu'\"\r\n    type=\"button\"\r\n    [disabled]=\"disabled()\"\r\n  >\r\n    <span class=\"trigger-content\">\r\n      @if (isIconOnly()) {\r\n        <i class=\"ph ph-{{ icon() }}\" aria-hidden=\"true\"></i>\r\n      } @else {\r\n        @if (icon()) {\r\n          <i class=\"ph ph-{{ icon() }}\" aria-hidden=\"true\"></i>\r\n        }\r\n        <ng-content select=\"[dropdown-trigger]\">\r\n          @if (label()) {\r\n            {{ label() }}\r\n          }\r\n        </ng-content>\r\n        <i\r\n          class=\"ph ph-caret-down trigger-arrow\"\r\n          [class.open]=\"isOpen()\"\r\n          aria-hidden=\"true\"\r\n        ></i>\r\n      }\r\n    </span>\r\n  </button>\r\n\r\n  @if (isOpen()) {\r\n    <!-- stopPropagation only (keeps clicks inside the menu from closing it); not a user interaction. -->\r\n    <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\r\n    <div\r\n      class=\"dropdown-menu\"\r\n      [class]=\"resolvedPlacement()\"\r\n      role=\"menu\"\r\n      (click)=\"$event.stopPropagation()\"\r\n    >\r\n      <ng-content select=\"[dropdown-menu]\">\r\n        @for (item of items(); track item.value; let i = $index) {\r\n          <button\r\n            type=\"button\"\r\n            class=\"dropdown-item\"\r\n            [class.disabled]=\"item.disabled\"\r\n            [class.active]=\"selectedItem() === item\"\r\n            [attr.data-dropdown-item-index]=\"i\"\r\n            (click)=\"selectItem(item)\"\r\n            (keydown)=\"handleItemKeyDown($event, item, i)\"\r\n            role=\"menuitem\"\r\n            [attr.aria-disabled]=\"item.disabled\"\r\n            [disabled]=\"item.disabled\"\r\n            [attr.tabindex]=\"item.disabled ? -1 : 0\"\r\n          >\r\n            @if (item.icon) {\r\n              <i class=\"ph ph-{{ item.icon }}\" aria-hidden=\"true\"></i>\r\n            }\r\n            <span class=\"item-label\">{{ item.content }}</span>\r\n          </button>\r\n        }\r\n      </ng-content>\r\n    </div>\r\n  }\r\n</div>", styles: [".dropdown-container{position:relative;display:inline-block}.dropdown-trigger{display:inline-flex;align-items:center;justify-content:center;height:var(--height-input-md);padding:0 var(--spacing-lg);border:none;border-radius:var(--border-radius);font-weight:var(--font-weight-medium);font-size:var(--font-size-base);font-family:var(--font-family);line-height:var(--line-height-normal);cursor:pointer;transition:all var(--animation-duration-fast) var(--animation-easing-smooth);min-width:7.5rem;background:transparent;position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.trigger-content{display:flex;align-items:center;gap:var(--spacing-sm);position:relative;z-index:1;line-height:1}.trigger-arrow{transition:transform var(--animation-duration-fast) var(--animation-easing-smooth);margin-left:var(--spacing-sm)}.trigger-arrow.open{transform:rotate(180deg)}.dropdown-trigger.primary{color:var(--primary-color)}.dropdown-trigger.secondary{color:var(--secondary-color)}.dropdown-trigger.success{color:var(--success-color)}.dropdown-trigger.warning{color:var(--warning-color)}.dropdown-trigger.danger{color:var(--danger-color)}.dropdown-trigger.filled{background-color:currentColor}.dropdown-trigger.filled.primary{background:var(--primary-gradient);color:var(--text-on-primary)}.dropdown-trigger.filled.primary .trigger-content{color:var(--text-on-primary)}.dropdown-trigger.filled.secondary .trigger-content{color:var(--text-on-secondary)}.dropdown-trigger.filled.success .trigger-content{color:var(--text-on-success)}.dropdown-trigger.filled.warning .trigger-content{color:var(--text-on-warning)}.dropdown-trigger.filled.danger .trigger-content{color:var(--text-on-danger)}.dropdown-trigger.filled.primary:hover:not(.disabled){background:var(--primary-gradient-hover)}.dropdown-trigger.filled.secondary:hover:not(.disabled){background-color:var(--secondary-color-light)}.dropdown-trigger.filled.success:hover:not(.disabled){background-color:var(--green-400)}.dropdown-trigger.filled.warning:hover:not(.disabled){background-color:var(--orange-400)}.dropdown-trigger.filled.danger:hover:not(.disabled){background-color:var(--red-400)}.dropdown-trigger.outline{background:transparent;border:var(--border-width-2) solid currentColor}.dropdown-trigger.outline .trigger-content{color:inherit}.dropdown-trigger.outline:hover:not(.disabled){background:currentColor}.dropdown-trigger.outline.primary:hover:not(.disabled) .trigger-content{color:var(--text-on-primary)}.dropdown-trigger.outline.secondary:hover:not(.disabled) .trigger-content{color:var(--text-on-secondary)}.dropdown-trigger.outline.success:hover:not(.disabled) .trigger-content{color:var(--text-on-success)}.dropdown-trigger.outline.warning:hover:not(.disabled) .trigger-content{color:var(--text-on-warning)}.dropdown-trigger.outline.danger:hover:not(.disabled) .trigger-content{color:var(--text-on-danger)}.dropdown-trigger.text{background:transparent}.dropdown-trigger.text:hover:not(.disabled){background:var(--surface-hover)}.dropdown-container.small .dropdown-trigger{height:var(--height-input-sm);padding:0 var(--spacing-md);font-size:var(--font-size-sm);min-width:6rem}.dropdown-container.large .dropdown-trigger{height:var(--height-input-lg);padding:0 var(--spacing-lg);font-size:var(--font-size-lg);min-width:8.75rem}.dropdown-container.icon-only .dropdown-trigger{min-width:0;width:var(--height-input-md);padding:0}.dropdown-container.icon-only.small .dropdown-trigger{width:var(--height-input-sm);padding:0;min-width:0}.dropdown-container.icon-only.large .dropdown-trigger{width:var(--height-input-lg);padding:0;min-width:0}.dropdown-container.icon-only .trigger-content{gap:0;justify-content:center}.dropdown-container.icon-only .trigger-content i{margin:0}.dropdown-menu{position:absolute;min-width:12.5rem;background:var(--surface-card);border:var(--border-width-1) solid var(--surface-border);border-radius:var(--border-radius);box-shadow:var(--shadow-lg);z-index:var(--z-index-dropdown);margin-top:var(--spacing-xs);animation:fadeIn var(--animation-duration-fast) var(--animation-easing-smooth);overflow:hidden}.dropdown-menu ::ng-deep [dropdown-menu]{background:transparent;padding:0;margin:0}.dropdown-menu ::ng-deep .dropdown-item{display:flex;align-items:center;gap:var(--spacing-sm);width:100%;padding:var(--spacing-sm) var(--spacing-md);border:none;background:transparent;color:var(--text-color);font-family:var(--font-family);font-size:var(--font-size-base);text-align:left;cursor:pointer;transition:all var(--animation-duration-fast) var(--animation-easing-smooth)}.dropdown-menu ::ng-deep .dropdown-item:hover:not(.disabled){background:var(--surface-hover)}.dropdown-menu ::ng-deep .dropdown-item.active{color:var(--primary-color);background:rgba(var(--primary-color-rgb),.1)}.dropdown-menu ::ng-deep .dropdown-item.disabled{opacity:.6;cursor:not-allowed}.dropdown-menu ::ng-deep .dropdown-item i{font-size:var(--icon-size-md);color:inherit}.dropdown-menu.bottom-start{top:100%;left:0}.dropdown-menu.bottom-end{top:100%;right:0}.dropdown-menu.top-start{bottom:100%;left:0}.dropdown-menu.top-end{bottom:100%;right:0}.dropdown-item{display:flex;align-items:center;gap:var(--spacing-sm);width:100%;padding:var(--spacing-sm) var(--spacing-md);border:none;background:transparent;color:var(--text-color);font-family:var(--font-family);font-size:var(--font-size-base);text-align:left;cursor:pointer;transition:all var(--animation-duration-fast) var(--animation-easing-smooth)}.dropdown-item:hover:not(.disabled){background:var(--surface-hover)}.dropdown-item.active{color:var(--primary-color);background:rgba(var(--primary-color-rgb),.1)}.dropdown-item.disabled{opacity:.6;cursor:not-allowed}.item-check{margin-left:auto;color:var(--primary-color)}.dropdown-trigger:focus-visible{outline:none;box-shadow:0 0 0 var(--focus-ring-width) var(--focus-ring-color)}.dropdown-trigger:active:not(.disabled){transform:translateY(.0625rem)}.dropdown-container.disabled{opacity:.6;cursor:not-allowed}.dropdown-container.disabled .dropdown-trigger{pointer-events:none}@keyframes fadeIn{0%{opacity:0;transform:translateY(calc(-1 * var(--animation-distance-sm)))}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: PshDropdownComponent, isStandalone: true, selector: "psh-dropdown", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null }, iconOnlyText: { classPropertyName: "iconOnlyText", publicName: "iconOnlyText", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", selected: "selected", opened: "opened", closed: "closed" }, viewQueries: [{ propertyName: "menuTpl", first: true, predicate: ["menuTpl"], descendants: true, isSignal: true }], hostDirectives: [{ directive: PshClickOutsideDirective }], ngImport: i0, template: "<div\r\n  class=\"dropdown-container\"\r\n  [class]=\"size()\"\r\n  [class.open]=\"isOpen()\"\r\n  [class.disabled]=\"disabled()\"\r\n  [class.icon-only]=\"isIconOnly()\"\r\n  [attr.data-state]=\"state()\"\r\n>\r\n  <button\r\n    class=\"dropdown-trigger\"\r\n    [class]=\"appearance()\"\r\n    [class.primary]=\"variant() === 'primary'\"\r\n    [class.secondary]=\"variant() === 'secondary'\"\r\n    [class.success]=\"variant() === 'success'\"\r\n    [class.warning]=\"variant() === 'warning'\"\r\n    [class.danger]=\"variant() === 'danger'\"\r\n    (click)=\"toggleDropdown()\"\r\n    (keydown)=\"handleTriggerKeyDown($event)\"\r\n    [attr.aria-expanded]=\"isOpen()\"\r\n    [attr.aria-disabled]=\"disabled()\"\r\n    [attr.aria-label]=\"computedAriaLabel()\"\r\n    [attr.aria-haspopup]=\"'menu'\"\r\n    type=\"button\"\r\n    [disabled]=\"disabled()\"\r\n  >\r\n    <span class=\"trigger-content\">\r\n      @if (isIconOnly()) {\r\n        <i class=\"ph ph-{{ icon() }}\" aria-hidden=\"true\"></i>\r\n      } @else {\r\n        @if (icon()) {\r\n          <i class=\"ph ph-{{ icon() }}\" aria-hidden=\"true\"></i>\r\n        }\r\n        <ng-content select=\"[dropdown-trigger]\">\r\n          @if (label()) {\r\n            {{ label() }}\r\n          }\r\n        </ng-content>\r\n        <i\r\n          class=\"ph ph-caret-down trigger-arrow\"\r\n          [class.open]=\"isOpen()\"\r\n          aria-hidden=\"true\"\r\n        ></i>\r\n      }\r\n    </span>\r\n  </button>\r\n\r\n  <ng-template #menuTpl>\r\n    <!-- stopPropagation only (keeps clicks inside the menu from closing it); not a user interaction. -->\r\n    <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\r\n    <div\r\n      class=\"dropdown-menu\"\r\n      [class]=\"resolvedPlacement()\"\r\n      role=\"menu\"\r\n      (click)=\"$event.stopPropagation()\"\r\n    >\r\n      <ng-content select=\"[dropdown-menu]\">\r\n        @for (item of items(); track item.value; let i = $index) {\r\n          <button\r\n            type=\"button\"\r\n            class=\"dropdown-item\"\r\n            [class.disabled]=\"item.disabled\"\r\n            [class.active]=\"selectedItem() === item\"\r\n            [attr.data-dropdown-item-index]=\"i\"\r\n            (click)=\"selectItem(item)\"\r\n            (keydown)=\"handleItemKeyDown($event, item, i)\"\r\n            role=\"menuitem\"\r\n            [attr.aria-disabled]=\"item.disabled\"\r\n            [disabled]=\"item.disabled\"\r\n            [attr.tabindex]=\"item.disabled ? -1 : 0\"\r\n          >\r\n            @if (item.icon) {\r\n              <i class=\"ph ph-{{ item.icon }}\" aria-hidden=\"true\"></i>\r\n            }\r\n            <span class=\"item-label\">{{ item.content }}</span>\r\n          </button>\r\n        }\r\n      </ng-content>\r\n    </div>\r\n  </ng-template>\r\n</div>", styles: [".dropdown-container{position:relative;display:inline-block}.dropdown-trigger{display:inline-flex;align-items:center;justify-content:center;height:var(--height-input-md);padding:0 var(--spacing-lg);border:none;border-radius:var(--border-radius);font-weight:var(--font-weight-medium);font-size:var(--font-size-base);font-family:var(--font-family);line-height:var(--line-height-normal);cursor:pointer;transition:all var(--animation-duration-fast) var(--animation-easing-smooth);min-width:7.5rem;background:transparent;position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.trigger-content{display:flex;align-items:center;gap:var(--spacing-sm);position:relative;z-index:1;line-height:1}.trigger-arrow{transition:transform var(--animation-duration-fast) var(--animation-easing-smooth);margin-left:var(--spacing-sm)}.trigger-arrow.open{transform:rotate(180deg)}.dropdown-trigger.primary{color:var(--primary-color)}.dropdown-trigger.secondary{color:var(--secondary-color)}.dropdown-trigger.success{color:var(--success-color)}.dropdown-trigger.warning{color:var(--warning-color)}.dropdown-trigger.danger{color:var(--danger-color)}.dropdown-trigger.filled{background-color:currentColor}.dropdown-trigger.filled.primary{background:var(--primary-gradient);color:var(--text-on-primary)}.dropdown-trigger.filled.primary .trigger-content{color:var(--text-on-primary)}.dropdown-trigger.filled.secondary .trigger-content{color:var(--text-on-secondary)}.dropdown-trigger.filled.success .trigger-content{color:var(--text-on-success)}.dropdown-trigger.filled.warning .trigger-content{color:var(--text-on-warning)}.dropdown-trigger.filled.danger .trigger-content{color:var(--text-on-danger)}.dropdown-trigger.filled.primary:hover:not(.disabled){background:var(--primary-gradient-hover)}.dropdown-trigger.filled.secondary:hover:not(.disabled){background-color:var(--secondary-color-light)}.dropdown-trigger.filled.success:hover:not(.disabled){background-color:var(--green-400)}.dropdown-trigger.filled.warning:hover:not(.disabled){background-color:var(--orange-400)}.dropdown-trigger.filled.danger:hover:not(.disabled){background-color:var(--red-400)}.dropdown-trigger.outline{background:transparent;border:var(--border-width-2) solid currentColor}.dropdown-trigger.outline .trigger-content{color:inherit}.dropdown-trigger.outline:hover:not(.disabled){background:currentColor}.dropdown-trigger.outline.primary:hover:not(.disabled) .trigger-content{color:var(--text-on-primary)}.dropdown-trigger.outline.secondary:hover:not(.disabled) .trigger-content{color:var(--text-on-secondary)}.dropdown-trigger.outline.success:hover:not(.disabled) .trigger-content{color:var(--text-on-success)}.dropdown-trigger.outline.warning:hover:not(.disabled) .trigger-content{color:var(--text-on-warning)}.dropdown-trigger.outline.danger:hover:not(.disabled) .trigger-content{color:var(--text-on-danger)}.dropdown-trigger.text{background:transparent}.dropdown-trigger.text:hover:not(.disabled){background:var(--surface-hover)}.dropdown-container.small .dropdown-trigger{height:var(--height-input-sm);padding:0 var(--spacing-md);font-size:var(--font-size-sm);min-width:6rem}.dropdown-container.large .dropdown-trigger{height:var(--height-input-lg);padding:0 var(--spacing-lg);font-size:var(--font-size-lg);min-width:8.75rem}.dropdown-container.icon-only .dropdown-trigger{min-width:0;width:var(--height-input-md);padding:0}.dropdown-container.icon-only.small .dropdown-trigger{width:var(--height-input-sm);padding:0;min-width:0}.dropdown-container.icon-only.large .dropdown-trigger{width:var(--height-input-lg);padding:0;min-width:0}.dropdown-container.icon-only .trigger-content{gap:0;justify-content:center}.dropdown-container.icon-only .trigger-content i{margin:0}.dropdown-menu{min-width:12.5rem;background:var(--surface-card);border:var(--border-width-1) solid var(--surface-border);border-radius:var(--border-radius);box-shadow:var(--shadow-lg);pointer-events:auto;animation:fadeIn var(--animation-duration-fast) var(--animation-easing-smooth);overflow:hidden}.dropdown-menu ::ng-deep [dropdown-menu]{background:transparent;padding:0;margin:0}.dropdown-menu ::ng-deep .dropdown-item{display:flex;align-items:center;gap:var(--spacing-sm);width:100%;padding:var(--spacing-sm) var(--spacing-md);border:none;background:transparent;color:var(--text-color);font-family:var(--font-family);font-size:var(--font-size-base);text-align:left;cursor:pointer;transition:all var(--animation-duration-fast) var(--animation-easing-smooth)}.dropdown-menu ::ng-deep .dropdown-item:hover:not(.disabled){background:var(--surface-hover)}.dropdown-menu ::ng-deep .dropdown-item.active{color:var(--primary-color);background:rgba(var(--primary-color-rgb),.1)}.dropdown-menu ::ng-deep .dropdown-item.disabled{opacity:.6;cursor:not-allowed}.dropdown-menu ::ng-deep .dropdown-item i{font-size:var(--icon-size-md);color:inherit}.dropdown-item{display:flex;align-items:center;gap:var(--spacing-sm);width:100%;padding:var(--spacing-sm) var(--spacing-md);border:none;background:transparent;color:var(--text-color);font-family:var(--font-family);font-size:var(--font-size-base);text-align:left;cursor:pointer;transition:all var(--animation-duration-fast) var(--animation-easing-smooth)}.dropdown-item:hover:not(.disabled){background:var(--surface-hover)}.dropdown-item.active{color:var(--primary-color);background:rgba(var(--primary-color-rgb),.1)}.dropdown-item.disabled{opacity:.6;cursor:not-allowed}.item-check{margin-left:auto;color:var(--primary-color)}.dropdown-trigger:focus-visible{outline:none;box-shadow:0 0 0 var(--focus-ring-width) var(--focus-ring-color)}.dropdown-trigger:active:not(.disabled){transform:translateY(.0625rem)}.dropdown-container.disabled{opacity:.6;cursor:not-allowed}.dropdown-container.disabled .dropdown-trigger{pointer-events:none}@keyframes fadeIn{0%{opacity:0;transform:translateY(calc(-1 * var(--animation-distance-sm)))}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: PshDropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'psh-dropdown', imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [PshClickOutsideDirective], template: "<div\r\n  class=\"dropdown-container\"\r\n  [class]=\"size()\"\r\n  [class.open]=\"isOpen()\"\r\n  [class.disabled]=\"disabled()\"\r\n  [class.icon-only]=\"isIconOnly()\"\r\n  [attr.data-state]=\"state()\"\r\n>\r\n  <button\r\n    class=\"dropdown-trigger\"\r\n    [class]=\"appearance()\"\r\n    [class.primary]=\"variant() === 'primary'\"\r\n    [class.secondary]=\"variant() === 'secondary'\"\r\n    [class.success]=\"variant() === 'success'\"\r\n    [class.warning]=\"variant() === 'warning'\"\r\n    [class.danger]=\"variant() === 'danger'\"\r\n    (click)=\"toggleDropdown()\"\r\n    (keydown)=\"handleTriggerKeyDown($event)\"\r\n    [attr.aria-expanded]=\"isOpen()\"\r\n    [attr.aria-disabled]=\"disabled()\"\r\n    [attr.aria-label]=\"computedAriaLabel()\"\r\n    [attr.aria-haspopup]=\"'menu'\"\r\n    type=\"button\"\r\n    [disabled]=\"disabled()\"\r\n  >\r\n    <span class=\"trigger-content\">\r\n      @if (isIconOnly()) {\r\n        <i class=\"ph ph-{{ icon() }}\" aria-hidden=\"true\"></i>\r\n      } @else {\r\n        @if (icon()) {\r\n          <i class=\"ph ph-{{ icon() }}\" aria-hidden=\"true\"></i>\r\n        }\r\n        <ng-content select=\"[dropdown-trigger]\">\r\n          @if (label()) {\r\n            {{ label() }}\r\n          }\r\n        </ng-content>\r\n        <i\r\n          class=\"ph ph-caret-down trigger-arrow\"\r\n          [class.open]=\"isOpen()\"\r\n          aria-hidden=\"true\"\r\n        ></i>\r\n      }\r\n    </span>\r\n  </button>\r\n\r\n  @if (isOpen()) {\r\n    <!-- stopPropagation only (keeps clicks inside the menu from closing it); not a user interaction. -->\r\n    <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\r\n    <div\r\n      class=\"dropdown-menu\"\r\n      [class]=\"resolvedPlacement()\"\r\n      role=\"menu\"\r\n      (click)=\"$event.stopPropagation()\"\r\n    >\r\n      <ng-content select=\"[dropdown-menu]\">\r\n        @for (item of items(); track item.value; let i = $index) {\r\n          <button\r\n            type=\"button\"\r\n            class=\"dropdown-item\"\r\n            [class.disabled]=\"item.disabled\"\r\n            [class.active]=\"selectedItem() === item\"\r\n            [attr.data-dropdown-item-index]=\"i\"\r\n            (click)=\"selectItem(item)\"\r\n            (keydown)=\"handleItemKeyDown($event, item, i)\"\r\n            role=\"menuitem\"\r\n            [attr.aria-disabled]=\"item.disabled\"\r\n            [disabled]=\"item.disabled\"\r\n            [attr.tabindex]=\"item.disabled ? -1 : 0\"\r\n          >\r\n            @if (item.icon) {\r\n              <i class=\"ph ph-{{ item.icon }}\" aria-hidden=\"true\"></i>\r\n            }\r\n            <span class=\"item-label\">{{ item.content }}</span>\r\n          </button>\r\n        }\r\n      </ng-content>\r\n    </div>\r\n  }\r\n</div>", styles: [".dropdown-container{position:relative;display:inline-block}.dropdown-trigger{display:inline-flex;align-items:center;justify-content:center;height:var(--height-input-md);padding:0 var(--spacing-lg);border:none;border-radius:var(--border-radius);font-weight:var(--font-weight-medium);font-size:var(--font-size-base);font-family:var(--font-family);line-height:var(--line-height-normal);cursor:pointer;transition:all var(--animation-duration-fast) var(--animation-easing-smooth);min-width:7.5rem;background:transparent;position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.trigger-content{display:flex;align-items:center;gap:var(--spacing-sm);position:relative;z-index:1;line-height:1}.trigger-arrow{transition:transform var(--animation-duration-fast) var(--animation-easing-smooth);margin-left:var(--spacing-sm)}.trigger-arrow.open{transform:rotate(180deg)}.dropdown-trigger.primary{color:var(--primary-color)}.dropdown-trigger.secondary{color:var(--secondary-color)}.dropdown-trigger.success{color:var(--success-color)}.dropdown-trigger.warning{color:var(--warning-color)}.dropdown-trigger.danger{color:var(--danger-color)}.dropdown-trigger.filled{background-color:currentColor}.dropdown-trigger.filled.primary{background:var(--primary-gradient);color:var(--text-on-primary)}.dropdown-trigger.filled.primary .trigger-content{color:var(--text-on-primary)}.dropdown-trigger.filled.secondary .trigger-content{color:var(--text-on-secondary)}.dropdown-trigger.filled.success .trigger-content{color:var(--text-on-success)}.dropdown-trigger.filled.warning .trigger-content{color:var(--text-on-warning)}.dropdown-trigger.filled.danger .trigger-content{color:var(--text-on-danger)}.dropdown-trigger.filled.primary:hover:not(.disabled){background:var(--primary-gradient-hover)}.dropdown-trigger.filled.secondary:hover:not(.disabled){background-color:var(--secondary-color-light)}.dropdown-trigger.filled.success:hover:not(.disabled){background-color:var(--green-400)}.dropdown-trigger.filled.warning:hover:not(.disabled){background-color:var(--orange-400)}.dropdown-trigger.filled.danger:hover:not(.disabled){background-color:var(--red-400)}.dropdown-trigger.outline{background:transparent;border:var(--border-width-2) solid currentColor}.dropdown-trigger.outline .trigger-content{color:inherit}.dropdown-trigger.outline:hover:not(.disabled){background:currentColor}.dropdown-trigger.outline.primary:hover:not(.disabled) .trigger-content{color:var(--text-on-primary)}.dropdown-trigger.outline.secondary:hover:not(.disabled) .trigger-content{color:var(--text-on-secondary)}.dropdown-trigger.outline.success:hover:not(.disabled) .trigger-content{color:var(--text-on-success)}.dropdown-trigger.outline.warning:hover:not(.disabled) .trigger-content{color:var(--text-on-warning)}.dropdown-trigger.outline.danger:hover:not(.disabled) .trigger-content{color:var(--text-on-danger)}.dropdown-trigger.text{background:transparent}.dropdown-trigger.text:hover:not(.disabled){background:var(--surface-hover)}.dropdown-container.small .dropdown-trigger{height:var(--height-input-sm);padding:0 var(--spacing-md);font-size:var(--font-size-sm);min-width:6rem}.dropdown-container.large .dropdown-trigger{height:var(--height-input-lg);padding:0 var(--spacing-lg);font-size:var(--font-size-lg);min-width:8.75rem}.dropdown-container.icon-only .dropdown-trigger{min-width:0;width:var(--height-input-md);padding:0}.dropdown-container.icon-only.small .dropdown-trigger{width:var(--height-input-sm);padding:0;min-width:0}.dropdown-container.icon-only.large .dropdown-trigger{width:var(--height-input-lg);padding:0;min-width:0}.dropdown-container.icon-only .trigger-content{gap:0;justify-content:center}.dropdown-container.icon-only .trigger-content i{margin:0}.dropdown-menu{position:absolute;min-width:12.5rem;background:var(--surface-card);border:var(--border-width-1) solid var(--surface-border);border-radius:var(--border-radius);box-shadow:var(--shadow-lg);z-index:var(--z-index-dropdown);margin-top:var(--spacing-xs);animation:fadeIn var(--animation-duration-fast) var(--animation-easing-smooth);overflow:hidden}.dropdown-menu ::ng-deep [dropdown-menu]{background:transparent;padding:0;margin:0}.dropdown-menu ::ng-deep .dropdown-item{display:flex;align-items:center;gap:var(--spacing-sm);width:100%;padding:var(--spacing-sm) var(--spacing-md);border:none;background:transparent;color:var(--text-color);font-family:var(--font-family);font-size:var(--font-size-base);text-align:left;cursor:pointer;transition:all var(--animation-duration-fast) var(--animation-easing-smooth)}.dropdown-menu ::ng-deep .dropdown-item:hover:not(.disabled){background:var(--surface-hover)}.dropdown-menu ::ng-deep .dropdown-item.active{color:var(--primary-color);background:rgba(var(--primary-color-rgb),.1)}.dropdown-menu ::ng-deep .dropdown-item.disabled{opacity:.6;cursor:not-allowed}.dropdown-menu ::ng-deep .dropdown-item i{font-size:var(--icon-size-md);color:inherit}.dropdown-menu.bottom-start{top:100%;left:0}.dropdown-menu.bottom-end{top:100%;right:0}.dropdown-menu.top-start{bottom:100%;left:0}.dropdown-menu.top-end{bottom:100%;right:0}.dropdown-item{display:flex;align-items:center;gap:var(--spacing-sm);width:100%;padding:var(--spacing-sm) var(--spacing-md);border:none;background:transparent;color:var(--text-color);font-family:var(--font-family);font-size:var(--font-size-base);text-align:left;cursor:pointer;transition:all var(--animation-duration-fast) var(--animation-easing-smooth)}.dropdown-item:hover:not(.disabled){background:var(--surface-hover)}.dropdown-item.active{color:var(--primary-color);background:rgba(var(--primary-color-rgb),.1)}.dropdown-item.disabled{opacity:.6;cursor:not-allowed}.item-check{margin-left:auto;color:var(--primary-color)}.dropdown-trigger:focus-visible{outline:none;box-shadow:0 0 0 var(--focus-ring-width) var(--focus-ring-color)}.dropdown-trigger:active:not(.disabled){transform:translateY(.0625rem)}.dropdown-container.disabled{opacity:.6;cursor:not-allowed}.dropdown-container.disabled .dropdown-trigger{pointer-events:none}@keyframes fadeIn{0%{opacity:0;transform:translateY(calc(-1 * var(--animation-distance-sm)))}to{opacity:1;transform:translateY(0)}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], iconOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOnly", required: false }] }], iconOnlyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOnlyText", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], selected: [{ type: i0.Output, args: ["selected"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
+            args: [{ selector: 'psh-dropdown', imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [PshClickOutsideDirective], template: "<div\r\n  class=\"dropdown-container\"\r\n  [class]=\"size()\"\r\n  [class.open]=\"isOpen()\"\r\n  [class.disabled]=\"disabled()\"\r\n  [class.icon-only]=\"isIconOnly()\"\r\n  [attr.data-state]=\"state()\"\r\n>\r\n  <button\r\n    class=\"dropdown-trigger\"\r\n    [class]=\"appearance()\"\r\n    [class.primary]=\"variant() === 'primary'\"\r\n    [class.secondary]=\"variant() === 'secondary'\"\r\n    [class.success]=\"variant() === 'success'\"\r\n    [class.warning]=\"variant() === 'warning'\"\r\n    [class.danger]=\"variant() === 'danger'\"\r\n    (click)=\"toggleDropdown()\"\r\n    (keydown)=\"handleTriggerKeyDown($event)\"\r\n    [attr.aria-expanded]=\"isOpen()\"\r\n    [attr.aria-disabled]=\"disabled()\"\r\n    [attr.aria-label]=\"computedAriaLabel()\"\r\n    [attr.aria-haspopup]=\"'menu'\"\r\n    type=\"button\"\r\n    [disabled]=\"disabled()\"\r\n  >\r\n    <span class=\"trigger-content\">\r\n      @if (isIconOnly()) {\r\n        <i class=\"ph ph-{{ icon() }}\" aria-hidden=\"true\"></i>\r\n      } @else {\r\n        @if (icon()) {\r\n          <i class=\"ph ph-{{ icon() }}\" aria-hidden=\"true\"></i>\r\n        }\r\n        <ng-content select=\"[dropdown-trigger]\">\r\n          @if (label()) {\r\n            {{ label() }}\r\n          }\r\n        </ng-content>\r\n        <i\r\n          class=\"ph ph-caret-down trigger-arrow\"\r\n          [class.open]=\"isOpen()\"\r\n          aria-hidden=\"true\"\r\n        ></i>\r\n      }\r\n    </span>\r\n  </button>\r\n\r\n  <ng-template #menuTpl>\r\n    <!-- stopPropagation only (keeps clicks inside the menu from closing it); not a user interaction. -->\r\n    <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\r\n    <div\r\n      class=\"dropdown-menu\"\r\n      [class]=\"resolvedPlacement()\"\r\n      role=\"menu\"\r\n      (click)=\"$event.stopPropagation()\"\r\n    >\r\n      <ng-content select=\"[dropdown-menu]\">\r\n        @for (item of items(); track item.value; let i = $index) {\r\n          <button\r\n            type=\"button\"\r\n            class=\"dropdown-item\"\r\n            [class.disabled]=\"item.disabled\"\r\n            [class.active]=\"selectedItem() === item\"\r\n            [attr.data-dropdown-item-index]=\"i\"\r\n            (click)=\"selectItem(item)\"\r\n            (keydown)=\"handleItemKeyDown($event, item, i)\"\r\n            role=\"menuitem\"\r\n            [attr.aria-disabled]=\"item.disabled\"\r\n            [disabled]=\"item.disabled\"\r\n            [attr.tabindex]=\"item.disabled ? -1 : 0\"\r\n          >\r\n            @if (item.icon) {\r\n              <i class=\"ph ph-{{ item.icon }}\" aria-hidden=\"true\"></i>\r\n            }\r\n            <span class=\"item-label\">{{ item.content }}</span>\r\n          </button>\r\n        }\r\n      </ng-content>\r\n    </div>\r\n  </ng-template>\r\n</div>", styles: [".dropdown-container{position:relative;display:inline-block}.dropdown-trigger{display:inline-flex;align-items:center;justify-content:center;height:var(--height-input-md);padding:0 var(--spacing-lg);border:none;border-radius:var(--border-radius);font-weight:var(--font-weight-medium);font-size:var(--font-size-base);font-family:var(--font-family);line-height:var(--line-height-normal);cursor:pointer;transition:all var(--animation-duration-fast) var(--animation-easing-smooth);min-width:7.5rem;background:transparent;position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.trigger-content{display:flex;align-items:center;gap:var(--spacing-sm);position:relative;z-index:1;line-height:1}.trigger-arrow{transition:transform var(--animation-duration-fast) var(--animation-easing-smooth);margin-left:var(--spacing-sm)}.trigger-arrow.open{transform:rotate(180deg)}.dropdown-trigger.primary{color:var(--primary-color)}.dropdown-trigger.secondary{color:var(--secondary-color)}.dropdown-trigger.success{color:var(--success-color)}.dropdown-trigger.warning{color:var(--warning-color)}.dropdown-trigger.danger{color:var(--danger-color)}.dropdown-trigger.filled{background-color:currentColor}.dropdown-trigger.filled.primary{background:var(--primary-gradient);color:var(--text-on-primary)}.dropdown-trigger.filled.primary .trigger-content{color:var(--text-on-primary)}.dropdown-trigger.filled.secondary .trigger-content{color:var(--text-on-secondary)}.dropdown-trigger.filled.success .trigger-content{color:var(--text-on-success)}.dropdown-trigger.filled.warning .trigger-content{color:var(--text-on-warning)}.dropdown-trigger.filled.danger .trigger-content{color:var(--text-on-danger)}.dropdown-trigger.filled.primary:hover:not(.disabled){background:var(--primary-gradient-hover)}.dropdown-trigger.filled.secondary:hover:not(.disabled){background-color:var(--secondary-color-light)}.dropdown-trigger.filled.success:hover:not(.disabled){background-color:var(--green-400)}.dropdown-trigger.filled.warning:hover:not(.disabled){background-color:var(--orange-400)}.dropdown-trigger.filled.danger:hover:not(.disabled){background-color:var(--red-400)}.dropdown-trigger.outline{background:transparent;border:var(--border-width-2) solid currentColor}.dropdown-trigger.outline .trigger-content{color:inherit}.dropdown-trigger.outline:hover:not(.disabled){background:currentColor}.dropdown-trigger.outline.primary:hover:not(.disabled) .trigger-content{color:var(--text-on-primary)}.dropdown-trigger.outline.secondary:hover:not(.disabled) .trigger-content{color:var(--text-on-secondary)}.dropdown-trigger.outline.success:hover:not(.disabled) .trigger-content{color:var(--text-on-success)}.dropdown-trigger.outline.warning:hover:not(.disabled) .trigger-content{color:var(--text-on-warning)}.dropdown-trigger.outline.danger:hover:not(.disabled) .trigger-content{color:var(--text-on-danger)}.dropdown-trigger.text{background:transparent}.dropdown-trigger.text:hover:not(.disabled){background:var(--surface-hover)}.dropdown-container.small .dropdown-trigger{height:var(--height-input-sm);padding:0 var(--spacing-md);font-size:var(--font-size-sm);min-width:6rem}.dropdown-container.large .dropdown-trigger{height:var(--height-input-lg);padding:0 var(--spacing-lg);font-size:var(--font-size-lg);min-width:8.75rem}.dropdown-container.icon-only .dropdown-trigger{min-width:0;width:var(--height-input-md);padding:0}.dropdown-container.icon-only.small .dropdown-trigger{width:var(--height-input-sm);padding:0;min-width:0}.dropdown-container.icon-only.large .dropdown-trigger{width:var(--height-input-lg);padding:0;min-width:0}.dropdown-container.icon-only .trigger-content{gap:0;justify-content:center}.dropdown-container.icon-only .trigger-content i{margin:0}.dropdown-menu{min-width:12.5rem;background:var(--surface-card);border:var(--border-width-1) solid var(--surface-border);border-radius:var(--border-radius);box-shadow:var(--shadow-lg);pointer-events:auto;animation:fadeIn var(--animation-duration-fast) var(--animation-easing-smooth);overflow:hidden}.dropdown-menu ::ng-deep [dropdown-menu]{background:transparent;padding:0;margin:0}.dropdown-menu ::ng-deep .dropdown-item{display:flex;align-items:center;gap:var(--spacing-sm);width:100%;padding:var(--spacing-sm) var(--spacing-md);border:none;background:transparent;color:var(--text-color);font-family:var(--font-family);font-size:var(--font-size-base);text-align:left;cursor:pointer;transition:all var(--animation-duration-fast) var(--animation-easing-smooth)}.dropdown-menu ::ng-deep .dropdown-item:hover:not(.disabled){background:var(--surface-hover)}.dropdown-menu ::ng-deep .dropdown-item.active{color:var(--primary-color);background:rgba(var(--primary-color-rgb),.1)}.dropdown-menu ::ng-deep .dropdown-item.disabled{opacity:.6;cursor:not-allowed}.dropdown-menu ::ng-deep .dropdown-item i{font-size:var(--icon-size-md);color:inherit}.dropdown-item{display:flex;align-items:center;gap:var(--spacing-sm);width:100%;padding:var(--spacing-sm) var(--spacing-md);border:none;background:transparent;color:var(--text-color);font-family:var(--font-family);font-size:var(--font-size-base);text-align:left;cursor:pointer;transition:all var(--animation-duration-fast) var(--animation-easing-smooth)}.dropdown-item:hover:not(.disabled){background:var(--surface-hover)}.dropdown-item.active{color:var(--primary-color);background:rgba(var(--primary-color-rgb),.1)}.dropdown-item.disabled{opacity:.6;cursor:not-allowed}.item-check{margin-left:auto;color:var(--primary-color)}.dropdown-trigger:focus-visible{outline:none;box-shadow:0 0 0 var(--focus-ring-width) var(--focus-ring-color)}.dropdown-trigger:active:not(.disabled){transform:translateY(.0625rem)}.dropdown-container.disabled{opacity:.6;cursor:not-allowed}.dropdown-container.disabled .dropdown-trigger{pointer-events:none}@keyframes fadeIn{0%{opacity:0;transform:translateY(calc(-1 * var(--animation-distance-sm)))}to{opacity:1;transform:translateY(0)}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { menuTpl: [{ type: i0.ViewChild, args: ['menuTpl', { isSignal: true }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], iconOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOnly", required: false }] }], iconOnlyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOnlyText", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], selected: [{ type: i0.Output, args: ["selected"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
 
 const INPUT_LABELS = {
     showPassword: 'Afficher le mot de passe',
@@ -1809,6 +1946,16 @@ class PshInputComponent {
         this.elementRef = inject(ElementRef);
         this.cdr = inject(ChangeDetectorRef);
         this.destroyRef = inject(DestroyRef);
+        this.portal = inject(PshPortalService);
+        this.viewContainer = inject(ViewContainerRef);
+        this.overlayPosition = inject(PshOverlayPositionService);
+        // The autocomplete suggestions are teleported to a body-level overlay layer so
+        // they escape any ancestor overflow / stacking context (a modal body, a
+        // scrollable card…) instead of being clipped.
+        this.suggestionsTpl = viewChild('suggestionsTpl', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "suggestionsTpl" }] : /* istanbul ignore next */ []));
+        this.portalRef = null;
+        this.repositionHandler = () => this.reposition();
         this.inputId = `psh-input-${PshInputComponent.nextId++}`;
         this.value = model('', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
@@ -1898,7 +2045,49 @@ class PshInputComponent {
                 clearTimeout(this.blurTimeoutId);
             if (this.debounceTimeoutId)
                 clearTimeout(this.debounceTimeoutId);
+            this.closePanel();
+        });
+    }
+    /** Attaches / detaches / repositions the teleported suggestions panel to match visibility. */
+    syncPanel() {
+        if (this.showSuggestions()) {
+            if (this.portalRef)
+                this.reposition();
+            else
+                this.openPanel();
+        }
+        else if (this.portalRef) {
+            this.closePanel();
+        }
+    }
+    openPanel() {
+        const tpl = this.suggestionsTpl();
+        if (!tpl || this.portalRef)
+            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;
+    }
+    reposition() {
+        if (!this.portalRef)
+            return;
+        const anchor = this.elementRef.nativeElement.querySelector('.input-wrapper');
+        if (!anchor)
+            return;
+        const side = this.overlayPosition.flipSide(anchor, 'bottom', {
+            overlayHeight: this.portalRef.panel.offsetHeight,
         });
+        this.portalRef.position(anchor, side, 4);
     }
     writeValue(value) {
         const safeValue = typeof value === 'string' ? value : '';
@@ -1936,6 +2125,7 @@ class PshInputComponent {
         this.blurTimeoutId = setTimeout(() => {
             this.suggestionsVisible.set(false);
             this.focusedSuggestionIndex.set(-1);
+            this.syncPanel();
             this.blurTimeoutId = null;
         }, 200);
     }
@@ -1966,6 +2156,7 @@ class PshInputComponent {
                 event.preventDefault();
                 this.suggestionsVisible.set(false);
                 this.focusedSuggestionIndex.set(-1);
+                this.syncPanel();
                 break;
         }
     }
@@ -1975,6 +2166,7 @@ class PshInputComponent {
         this.suggestionSelect.emit(suggestion);
         this.suggestionsVisible.set(false);
         this.focusedSuggestionIndex.set(-1);
+        this.syncPanel();
     }
     togglePasswordVisibility() {
         this.passwordVisibleSignal.update(v => !v);
@@ -2009,12 +2201,14 @@ class PshInputComponent {
             }
             this.filteredSuggestionsSignal.set(results);
             this.suggestionsVisible.set(results.length > 0);
+            this.syncPanel();
         }
         catch (error) {
             // Fail gracefully (hide stale suggestions) but surface the error so a
             // failing provider is not silently swallowed during development.
             this.filteredSuggestionsSignal.set([]);
             this.suggestionsVisible.set(false);
+            this.syncPanel();
             console.error('[psh-input] Suggestion provider failed:', error);
         }
     }
@@ -2025,7 +2219,7 @@ class PshInputComponent {
                 useExisting: PshInputComponent,
                 multi: true
             }
-        ], ngImport: i0, template: "<div class=\"input-container\">\r\n  @if (showLabel()) {\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\r\n      class=\"input-label\"\r\n      [for]=\"inputId\"\r\n      (click)=\"focusSelect()\"\r\n      [class.required]=\"required()\"\r\n    >\r\n      <ng-content select=\"[input-label]\"></ng-content>\r\n      @if (!hasLabelContent()) {\r\n        {{ label() }}\r\n      }\r\n    </label>\r\n  }\r\n\r\n  <div class=\"input-wrapper\">\r\n    @if (iconStart()) {\r\n      <i class=\"ph ph-{{ iconStart() }}\" aria-hidden=\"true\"></i>\r\n    }\r\n\r\n    <input\r\n      [id]=\"inputId\"\r\n      [type]=\"effectiveType()\"\r\n      [attr.placeholder]=\"placeholder()\"\r\n      [attr.aria-label]=\"computedAriaLabel()\"\r\n      [attr.aria-invalid]=\"!!error()\"\r\n      [attr.aria-required]=\"required()\"\r\n      [attr.aria-describedby]=\"error() ? 'error-message' : success() ? 'success-message' : hint() ? 'hint-message' : null\"\r\n      [disabled]=\"disabled()\"\r\n      [readonly]=\"readonly()\"\r\n      [required]=\"required()\"\r\n      [value]=\"value()\"\r\n      (input)=\"handleInput($event)\"\r\n      (keydown)=\"handleKeydown($event)\"\r\n      (focus)=\"handleFocus()\"\r\n      (blur)=\"handleBlur()\"\r\n      [attr.data-state]=\"state()\"\r\n    />\r\n\r\n    @if (iconEnd()) {\r\n      <i class=\"ph ph-{{ iconEnd() }}\" aria-hidden=\"true\"></i>\r\n    }\r\n\r\n    @if (type() === 'password') {\r\n      <button\r\n        type=\"button\"\r\n        class=\"password-toggle\"\r\n        (click)=\"togglePasswordVisibility()\"\r\n        [attr.aria-label]=\"passwordToggleLabel()\"\r\n        [disabled]=\"disabled() || readonly()\"\r\n      >\r\n        <i \r\n          [class]=\"'ph ph-' + (passwordVisible() ? 'eye-slash' : 'eye')\"\r\n          aria-hidden=\"true\"\r\n        ></i>\r\n      </button>\r\n    }\r\n\r\n    @if (loading()) {\r\n      <div class=\"input-loader\" aria-hidden=\"true\">\r\n        <div class=\"loader\"></div>\r\n      </div>\r\n    }\r\n\r\n    @if (showSuggestions()) {\r\n      <div class=\"suggestions-list\" role=\"listbox\">\r\n        @for (suggestion of filteredSuggestions(); track suggestion; let i = $index) {\r\n          <!-- option in a listbox: keyboard is handled by the input (arrow keys + focusedSuggestionIndex). -->\r\n          <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\r\n          <div\r\n            class=\"suggestion-item\"\r\n            [class.focused]=\"i === focusedSuggestionIndex()\"\r\n            role=\"option\"\r\n            [attr.aria-selected]=\"i === focusedSuggestionIndex()\"\r\n            (click)=\"handleSuggestionClick(suggestion)\"\r\n            (mouseenter)=\"focusedSuggestionIndex.set(i)\"\r\n          >\r\n            {{ suggestion }}\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  @if (error()) {\r\n    <div id=\"error-message\" class=\"input-error\" role=\"alert\">\r\n      <ng-content select=\"[input-error]\">\r\n        {{ error() }}\r\n      </ng-content>\r\n    </div>\r\n  } @else if (success()) {\r\n    <div id=\"success-message\" class=\"input-success\" role=\"status\">\r\n      <ng-content select=\"[input-success]\">\r\n        {{ success() }}\r\n      </ng-content>\r\n    </div>\r\n  } @else if (hint()) {\r\n    <div id=\"hint-message\" class=\"input-hint\">\r\n      <ng-content select=\"[input-hint]\">\r\n        {{ hint() }}\r\n      </ng-content>\r\n    </div>\r\n  }\r\n</div>", styles: [":host{display:block;width:100%;max-width:18.75rem;transition:all var(--animation-duration-default) var(--animation-easing-default)}:host.full-width{max-width:none}.input-container{position:relative;width:100%;display:flex;flex-direction:column;gap:var(--form-field-gap)}.input-label{display:block;color:var(--text-color);font-size:.875rem;font-weight:500;width:100%;cursor:pointer}.input-label.required:after{content:\"*\";color:var(--danger-color);margin-left:.125rem}.input-wrapper{position:relative;display:flex;align-items:center;width:100%}input{width:100%;height:2.5rem;padding:0 1rem;font-family:inherit;font-size:1rem;color:var(--text-color);background:var(--surface-0);border:.125rem solid var(--surface-border);border-radius:var(--border-radius);transition:all var(--animation-duration-default) var(--animation-easing-default)}input:hover:not(:disabled):not(:focus){border-color:var(--primary-color)}input::placeholder{color:var(--text-color-tertiary);opacity:1}input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 .125rem var(--focus-ring-color)}:host.outlined input{background:transparent}:host.filled input{background:var(--surface-ground);border:.125rem solid var(--surface-border)}:host.filled input:hover:not(:disabled):not(:focus){background:var(--surface-hover)}:host.filled input:focus{background:var(--surface-0)}:host.error input{border-color:var(--danger-color)}:host.error input:focus{box-shadow:0 0 0 .125rem var(--focus-ring-error)}:host.success input{border-color:var(--success-color)}:host.success input:focus{box-shadow:0 0 0 .125rem var(--focus-ring-success)}:host.disabled input{background:var(--surface-ground);cursor:not-allowed;opacity:var(--opacity-disabled)}:host.readonly input{background:var(--surface-ground);cursor:default}:host.small input{height:2rem;font-size:.875rem}:host.large input{height:3rem;font-size:1.125rem}:host.has-start-icon input{padding-left:2.75rem}:host.has-end-icon input{padding-right:2.75rem}.input-wrapper i{position:absolute;top:50%;transform:translateY(-50%);font-size:1.25rem;color:var(--text-color-secondary);pointer-events:none;z-index:2}.input-wrapper i:first-of-type{padding-left:1rem}.input-wrapper i:last-of-type{padding-right:1rem}.password-toggle{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);width:2rem;height:2rem;background:transparent;border:none;color:var(--text-color-secondary);cursor:pointer;padding:0;border-radius:var(--border-radius);display:flex;align-items:center;justify-content:center;transition:all .2s ease;z-index:3}.password-toggle:hover:not(:disabled){background:var(--surface-hover);color:var(--text-color)}.password-toggle i{position:static;transform:none;pointer-events:auto}.input-loader{position:absolute;right:1rem;top:50%;transform:translateY(-50%);z-index:3}.loader{width:1rem;height:1rem;border:.125rem solid var(--surface-border);border-top-color:var(--primary-color);border-radius:50%;animation:spin .8s linear infinite}.suggestions-list{position:absolute;top:100%;left:0;right:0;background:var(--surface-0);border:.0625rem solid var(--surface-border);border-radius:var(--border-radius);box-shadow:var(--shadow-lg);z-index:var(--z-index-dropdown);max-height:12.5rem;overflow-y:auto;margin-top:.25rem}.suggestion-item{padding:.5rem 1rem;cursor:pointer;color:var(--text-color)}.suggestion-item:hover,.suggestion-item.focused{background:var(--surface-hover);color:var(--primary-color)}.input-error,.input-success,.input-hint{font-size:.875rem}.input-error{color:var(--danger-color)}.input-success{color:var(--success-color)}.input-hint{color:var(--text-color-secondary)}@keyframes spin{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "suggestionsTpl", first: true, predicate: ["suggestionsTpl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"input-container\">\r\n  @if (showLabel()) {\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\r\n      class=\"input-label\"\r\n      [for]=\"inputId\"\r\n      (click)=\"focusSelect()\"\r\n      [class.required]=\"required()\"\r\n    >\r\n      <ng-content select=\"[input-label]\"></ng-content>\r\n      @if (!hasLabelContent()) {\r\n        {{ label() }}\r\n      }\r\n    </label>\r\n  }\r\n\r\n  <div class=\"input-wrapper\">\r\n    @if (iconStart()) {\r\n      <i class=\"ph ph-{{ iconStart() }}\" aria-hidden=\"true\"></i>\r\n    }\r\n\r\n    <input\r\n      [id]=\"inputId\"\r\n      [type]=\"effectiveType()\"\r\n      [attr.placeholder]=\"placeholder()\"\r\n      [attr.aria-label]=\"computedAriaLabel()\"\r\n      [attr.aria-invalid]=\"!!error()\"\r\n      [attr.aria-required]=\"required()\"\r\n      [attr.aria-describedby]=\"error() ? 'error-message' : success() ? 'success-message' : hint() ? 'hint-message' : null\"\r\n      [disabled]=\"disabled()\"\r\n      [readonly]=\"readonly()\"\r\n      [required]=\"required()\"\r\n      [value]=\"value()\"\r\n      (input)=\"handleInput($event)\"\r\n      (keydown)=\"handleKeydown($event)\"\r\n      (focus)=\"handleFocus()\"\r\n      (blur)=\"handleBlur()\"\r\n      [attr.data-state]=\"state()\"\r\n    />\r\n\r\n    @if (iconEnd()) {\r\n      <i class=\"ph ph-{{ iconEnd() }}\" aria-hidden=\"true\"></i>\r\n    }\r\n\r\n    @if (type() === 'password') {\r\n      <button\r\n        type=\"button\"\r\n        class=\"password-toggle\"\r\n        (click)=\"togglePasswordVisibility()\"\r\n        [attr.aria-label]=\"passwordToggleLabel()\"\r\n        [disabled]=\"disabled() || readonly()\"\r\n      >\r\n        <i \r\n          [class]=\"'ph ph-' + (passwordVisible() ? 'eye-slash' : 'eye')\"\r\n          aria-hidden=\"true\"\r\n        ></i>\r\n      </button>\r\n    }\r\n\r\n    @if (loading()) {\r\n      <div class=\"input-loader\" aria-hidden=\"true\">\r\n        <div class=\"loader\"></div>\r\n      </div>\r\n    }\r\n\r\n    <ng-template #suggestionsTpl>\r\n      <div class=\"suggestions-list\" role=\"listbox\">\r\n        @for (suggestion of filteredSuggestions(); track suggestion; let i = $index) {\r\n          <!-- option in a listbox: keyboard is handled by the input (arrow keys + focusedSuggestionIndex). -->\r\n          <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\r\n          <div\r\n            class=\"suggestion-item\"\r\n            [class.focused]=\"i === focusedSuggestionIndex()\"\r\n            role=\"option\"\r\n            [attr.aria-selected]=\"i === focusedSuggestionIndex()\"\r\n            (click)=\"handleSuggestionClick(suggestion)\"\r\n            (mouseenter)=\"focusedSuggestionIndex.set(i)\"\r\n          >\r\n            {{ suggestion }}\r\n          </div>\r\n        }\r\n      </div>\r\n    </ng-template>\r\n  </div>\r\n\r\n  @if (error()) {\r\n    <div id=\"error-message\" class=\"input-error\" role=\"alert\">\r\n      <ng-content select=\"[input-error]\">\r\n        {{ error() }}\r\n      </ng-content>\r\n    </div>\r\n  } @else if (success()) {\r\n    <div id=\"success-message\" class=\"input-success\" role=\"status\">\r\n      <ng-content select=\"[input-success]\">\r\n        {{ success() }}\r\n      </ng-content>\r\n    </div>\r\n  } @else if (hint()) {\r\n    <div id=\"hint-message\" class=\"input-hint\">\r\n      <ng-content select=\"[input-hint]\">\r\n        {{ hint() }}\r\n      </ng-content>\r\n    </div>\r\n  }\r\n</div>", styles: [":host{display:block;width:100%;max-width:18.75rem;transition:all var(--animation-duration-default) var(--animation-easing-default)}:host.full-width{max-width:none}.input-container{position:relative;width:100%;display:flex;flex-direction:column;gap:var(--form-field-gap)}.input-label{display:block;color:var(--text-color);font-size:.875rem;font-weight:500;width:100%;cursor:pointer}.input-label.required:after{content:\"*\";color:var(--danger-color);margin-left:.125rem}.input-wrapper{position:relative;display:flex;align-items:center;width:100%}input{width:100%;height:2.5rem;padding:0 1rem;font-family:inherit;font-size:1rem;color:var(--text-color);background:var(--surface-0);border:.125rem solid var(--surface-border);border-radius:var(--border-radius);transition:all var(--animation-duration-default) var(--animation-easing-default)}input:hover:not(:disabled):not(:focus){border-color:var(--primary-color)}input::placeholder{color:var(--text-color-tertiary);opacity:1}input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 .125rem var(--focus-ring-color)}:host.outlined input{background:transparent}:host.filled input{background:var(--surface-ground);border:.125rem solid var(--surface-border)}:host.filled input:hover:not(:disabled):not(:focus){background:var(--surface-hover)}:host.filled input:focus{background:var(--surface-0)}:host.error input{border-color:var(--danger-color)}:host.error input:focus{box-shadow:0 0 0 .125rem var(--focus-ring-error)}:host.success input{border-color:var(--success-color)}:host.success input:focus{box-shadow:0 0 0 .125rem var(--focus-ring-success)}:host.disabled input{background:var(--surface-ground);cursor:not-allowed;opacity:var(--opacity-disabled)}:host.readonly input{background:var(--surface-ground);cursor:default}:host.small input{height:2rem;font-size:.875rem}:host.large input{height:3rem;font-size:1.125rem}:host.has-start-icon input{padding-left:2.75rem}:host.has-end-icon input{padding-right:2.75rem}.input-wrapper i{position:absolute;top:50%;transform:translateY(-50%);font-size:1.25rem;color:var(--text-color-secondary);pointer-events:none;z-index:2}.input-wrapper i:first-of-type{padding-left:1rem}.input-wrapper i:last-of-type{padding-right:1rem}.password-toggle{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);width:2rem;height:2rem;background:transparent;border:none;color:var(--text-color-secondary);cursor:pointer;padding:0;border-radius:var(--border-radius);display:flex;align-items:center;justify-content:center;transition:all .2s ease;z-index:3}.password-toggle:hover:not(:disabled){background:var(--surface-hover);color:var(--text-color)}.password-toggle i{position:static;transform:none;pointer-events:auto}.input-loader{position:absolute;right:1rem;top:50%;transform:translateY(-50%);z-index:3}.loader{width:1rem;height:1rem;border:.125rem solid var(--surface-border);border-top-color:var(--primary-color);border-radius:50%;animation:spin .8s linear infinite}.suggestions-list{pointer-events:auto;background:var(--surface-0);border:.0625rem solid var(--surface-border);border-radius:var(--border-radius);box-shadow:var(--shadow-lg);overflow-y:auto}.suggestion-item{padding:.5rem 1rem;cursor:pointer;color:var(--text-color)}.suggestion-item:hover,.suggestion-item.focused{background:var(--surface-hover);color:var(--primary-color)}.input-error,.input-success,.input-hint{font-size:.875rem}.input-error{color:var(--danger-color)}.input-success{color:var(--success-color)}.input-hint{color:var(--text-color-secondary)}@keyframes spin{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: PshInputComponent, decorators: [{
             type: Component,
@@ -2049,8 +2243,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
                         '[class.has-end-icon]': '!!iconEnd() || type() === "password"',
                         '[class.outlined]': 'variant() === "outlined"',
                         '[class.filled]': 'variant() === "filled"',
-                    }, template: "<div class=\"input-container\">\r\n  @if (showLabel()) {\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\r\n      class=\"input-label\"\r\n      [for]=\"inputId\"\r\n      (click)=\"focusSelect()\"\r\n      [class.required]=\"required()\"\r\n    >\r\n      <ng-content select=\"[input-label]\"></ng-content>\r\n      @if (!hasLabelContent()) {\r\n        {{ label() }}\r\n      }\r\n    </label>\r\n  }\r\n\r\n  <div class=\"input-wrapper\">\r\n    @if (iconStart()) {\r\n      <i class=\"ph ph-{{ iconStart() }}\" aria-hidden=\"true\"></i>\r\n    }\r\n\r\n    <input\r\n      [id]=\"inputId\"\r\n      [type]=\"effectiveType()\"\r\n      [attr.placeholder]=\"placeholder()\"\r\n      [attr.aria-label]=\"computedAriaLabel()\"\r\n      [attr.aria-invalid]=\"!!error()\"\r\n      [attr.aria-required]=\"required()\"\r\n      [attr.aria-describedby]=\"error() ? 'error-message' : success() ? 'success-message' : hint() ? 'hint-message' : null\"\r\n      [disabled]=\"disabled()\"\r\n      [readonly]=\"readonly()\"\r\n      [required]=\"required()\"\r\n      [value]=\"value()\"\r\n      (input)=\"handleInput($event)\"\r\n      (keydown)=\"handleKeydown($event)\"\r\n      (focus)=\"handleFocus()\"\r\n      (blur)=\"handleBlur()\"\r\n      [attr.data-state]=\"state()\"\r\n    />\r\n\r\n    @if (iconEnd()) {\r\n      <i class=\"ph ph-{{ iconEnd() }}\" aria-hidden=\"true\"></i>\r\n    }\r\n\r\n    @if (type() === 'password') {\r\n      <button\r\n        type=\"button\"\r\n        class=\"password-toggle\"\r\n        (click)=\"togglePasswordVisibility()\"\r\n        [attr.aria-label]=\"passwordToggleLabel()\"\r\n        [disabled]=\"disabled() || readonly()\"\r\n      >\r\n        <i \r\n          [class]=\"'ph ph-' + (passwordVisible() ? 'eye-slash' : 'eye')\"\r\n          aria-hidden=\"true\"\r\n        ></i>\r\n      </button>\r\n    }\r\n\r\n    @if (loading()) {\r\n      <div class=\"input-loader\" aria-hidden=\"true\">\r\n        <div class=\"loader\"></div>\r\n      </div>\r\n    }\r\n\r\n    @if (showSuggestions()) {\r\n      <div class=\"suggestions-list\" role=\"listbox\">\r\n        @for (suggestion of filteredSuggestions(); track suggestion; let i = $index) {\r\n          <!-- option in a listbox: keyboard is handled by the input (arrow keys + focusedSuggestionIndex). -->\r\n          <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\r\n          <div\r\n            class=\"suggestion-item\"\r\n            [class.focused]=\"i === focusedSuggestionIndex()\"\r\n            role=\"option\"\r\n            [attr.aria-selected]=\"i === focusedSuggestionIndex()\"\r\n            (click)=\"handleSuggestionClick(suggestion)\"\r\n            (mouseenter)=\"focusedSuggestionIndex.set(i)\"\r\n          >\r\n            {{ suggestion }}\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  @if (error()) {\r\n    <div id=\"error-message\" class=\"input-error\" role=\"alert\">\r\n      <ng-content select=\"[input-error]\">\r\n        {{ error() }}\r\n      </ng-content>\r\n    </div>\r\n  } @else if (success()) {\r\n    <div id=\"success-message\" class=\"input-success\" role=\"status\">\r\n      <ng-content select=\"[input-success]\">\r\n        {{ success() }}\r\n      </ng-content>\r\n    </div>\r\n  } @else if (hint()) {\r\n    <div id=\"hint-message\" class=\"input-hint\">\r\n      <ng-content select=\"[input-hint]\">\r\n        {{ hint() }}\r\n      </ng-content>\r\n    </div>\r\n  }\r\n</div>", styles: [":host{display:block;width:100%;max-width:18.75rem;transition:all var(--animation-duration-default) var(--animation-easing-default)}:host.full-width{max-width:none}.input-container{position:relative;width:100%;display:flex;flex-direction:column;gap:var(--form-field-gap)}.input-label{display:block;color:var(--text-color);font-size:.875rem;font-weight:500;width:100%;cursor:pointer}.input-label.required:after{content:\"*\";color:var(--danger-color);margin-left:.125rem}.input-wrapper{position:relative;display:flex;align-items:center;width:100%}input{width:100%;height:2.5rem;padding:0 1rem;font-family:inherit;font-size:1rem;color:var(--text-color);background:var(--surface-0);border:.125rem solid var(--surface-border);border-radius:var(--border-radius);transition:all var(--animation-duration-default) var(--animation-easing-default)}input:hover:not(:disabled):not(:focus){border-color:var(--primary-color)}input::placeholder{color:var(--text-color-tertiary);opacity:1}input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 .125rem var(--focus-ring-color)}:host.outlined input{background:transparent}:host.filled input{background:var(--surface-ground);border:.125rem solid var(--surface-border)}:host.filled input:hover:not(:disabled):not(:focus){background:var(--surface-hover)}:host.filled input:focus{background:var(--surface-0)}:host.error input{border-color:var(--danger-color)}:host.error input:focus{box-shadow:0 0 0 .125rem var(--focus-ring-error)}:host.success input{border-color:var(--success-color)}:host.success input:focus{box-shadow:0 0 0 .125rem var(--focus-ring-success)}:host.disabled input{background:var(--surface-ground);cursor:not-allowed;opacity:var(--opacity-disabled)}:host.readonly input{background:var(--surface-ground);cursor:default}:host.small input{height:2rem;font-size:.875rem}:host.large input{height:3rem;font-size:1.125rem}:host.has-start-icon input{padding-left:2.75rem}:host.has-end-icon input{padding-right:2.75rem}.input-wrapper i{position:absolute;top:50%;transform:translateY(-50%);font-size:1.25rem;color:var(--text-color-secondary);pointer-events:none;z-index:2}.input-wrapper i:first-of-type{padding-left:1rem}.input-wrapper i:last-of-type{padding-right:1rem}.password-toggle{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);width:2rem;height:2rem;background:transparent;border:none;color:var(--text-color-secondary);cursor:pointer;padding:0;border-radius:var(--border-radius);display:flex;align-items:center;justify-content:center;transition:all .2s ease;z-index:3}.password-toggle:hover:not(:disabled){background:var(--surface-hover);color:var(--text-color)}.password-toggle i{position:static;transform:none;pointer-events:auto}.input-loader{position:absolute;right:1rem;top:50%;transform:translateY(-50%);z-index:3}.loader{width:1rem;height:1rem;border:.125rem solid var(--surface-border);border-top-color:var(--primary-color);border-radius:50%;animation:spin .8s linear infinite}.suggestions-list{position:absolute;top:100%;left:0;right:0;background:var(--surface-0);border:.0625rem solid var(--surface-border);border-radius:var(--border-radius);box-shadow:var(--shadow-lg);z-index:var(--z-index-dropdown);max-height:12.5rem;overflow-y:auto;margin-top:.25rem}.suggestion-item{padding:.5rem 1rem;cursor:pointer;color:var(--text-color)}.suggestion-item:hover,.suggestion-item.focused{background:var(--surface-hover);color:var(--primary-color)}.input-error,.input-success,.input-hint{font-size:.875rem}.input-error{color:var(--danger-color)}.input-success{color:var(--success-color)}.input-hint{color:var(--text-color-secondary)}@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"] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }, { type: i0.Output, args: ["readonlyChange"] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }, { type: i0.Output, args: ["loadingChange"] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], showLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabel", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], iconStart: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconStart", required: false }] }], iconEnd: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconEnd", 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 }] }], suggestions: [{ type: i0.Input, args: [{ isSignal: true, alias: "suggestions", required: false }] }], autocompleteConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocompleteConfig", required: false }] }], inputFocus: [{ type: i0.Output, args: ["inputFocus"] }], inputBlur: [{ type: i0.Output, args: ["inputBlur"] }], suggestionSelect: [{ type: i0.Output, args: ["suggestionSelect"] }] } });
+                    }, template: "<div class=\"input-container\">\r\n  @if (showLabel()) {\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\r\n      class=\"input-label\"\r\n      [for]=\"inputId\"\r\n      (click)=\"focusSelect()\"\r\n      [class.required]=\"required()\"\r\n    >\r\n      <ng-content select=\"[input-label]\"></ng-content>\r\n      @if (!hasLabelContent()) {\r\n        {{ label() }}\r\n      }\r\n    </label>\r\n  }\r\n\r\n  <div class=\"input-wrapper\">\r\n    @if (iconStart()) {\r\n      <i class=\"ph ph-{{ iconStart() }}\" aria-hidden=\"true\"></i>\r\n    }\r\n\r\n    <input\r\n      [id]=\"inputId\"\r\n      [type]=\"effectiveType()\"\r\n      [attr.placeholder]=\"placeholder()\"\r\n      [attr.aria-label]=\"computedAriaLabel()\"\r\n      [attr.aria-invalid]=\"!!error()\"\r\n      [attr.aria-required]=\"required()\"\r\n      [attr.aria-describedby]=\"error() ? 'error-message' : success() ? 'success-message' : hint() ? 'hint-message' : null\"\r\n      [disabled]=\"disabled()\"\r\n      [readonly]=\"readonly()\"\r\n      [required]=\"required()\"\r\n      [value]=\"value()\"\r\n      (input)=\"handleInput($event)\"\r\n      (keydown)=\"handleKeydown($event)\"\r\n      (focus)=\"handleFocus()\"\r\n      (blur)=\"handleBlur()\"\r\n      [attr.data-state]=\"state()\"\r\n    />\r\n\r\n    @if (iconEnd()) {\r\n      <i class=\"ph ph-{{ iconEnd() }}\" aria-hidden=\"true\"></i>\r\n    }\r\n\r\n    @if (type() === 'password') {\r\n      <button\r\n        type=\"button\"\r\n        class=\"password-toggle\"\r\n        (click)=\"togglePasswordVisibility()\"\r\n        [attr.aria-label]=\"passwordToggleLabel()\"\r\n        [disabled]=\"disabled() || readonly()\"\r\n      >\r\n        <i \r\n          [class]=\"'ph ph-' + (passwordVisible() ? 'eye-slash' : 'eye')\"\r\n          aria-hidden=\"true\"\r\n        ></i>\r\n      </button>\r\n    }\r\n\r\n    @if (loading()) {\r\n      <div class=\"input-loader\" aria-hidden=\"true\">\r\n        <div class=\"loader\"></div>\r\n      </div>\r\n    }\r\n\r\n    <ng-template #suggestionsTpl>\r\n      <div class=\"suggestions-list\" role=\"listbox\">\r\n        @for (suggestion of filteredSuggestions(); track suggestion; let i = $index) {\r\n          <!-- option in a listbox: keyboard is handled by the input (arrow keys + focusedSuggestionIndex). -->\r\n          <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\r\n          <div\r\n            class=\"suggestion-item\"\r\n            [class.focused]=\"i === focusedSuggestionIndex()\"\r\n            role=\"option\"\r\n            [attr.aria-selected]=\"i === focusedSuggestionIndex()\"\r\n            (click)=\"handleSuggestionClick(suggestion)\"\r\n            (mouseenter)=\"focusedSuggestionIndex.set(i)\"\r\n          >\r\n            {{ suggestion }}\r\n          </div>\r\n        }\r\n      </div>\r\n    </ng-template>\r\n  </div>\r\n\r\n  @if (error()) {\r\n    <div id=\"error-message\" class=\"input-error\" role=\"alert\">\r\n      <ng-content select=\"[input-error]\">\r\n        {{ error() }}\r\n      </ng-content>\r\n    </div>\r\n  } @else if (success()) {\r\n    <div id=\"success-message\" class=\"input-success\" role=\"status\">\r\n      <ng-content select=\"[input-success]\">\r\n        {{ success() }}\r\n      </ng-content>\r\n    </div>\r\n  } @else if (hint()) {\r\n    <div id=\"hint-message\" class=\"input-hint\">\r\n      <ng-content select=\"[input-hint]\">\r\n        {{ hint() }}\r\n      </ng-content>\r\n    </div>\r\n  }\r\n</div>", styles: [":host{display:block;width:100%;max-width:18.75rem;transition:all var(--animation-duration-default) var(--animation-easing-default)}:host.full-width{max-width:none}.input-container{position:relative;width:100%;display:flex;flex-direction:column;gap:var(--form-field-gap)}.input-label{display:block;color:var(--text-color);font-size:.875rem;font-weight:500;width:100%;cursor:pointer}.input-label.required:after{content:\"*\";color:var(--danger-color);margin-left:.125rem}.input-wrapper{position:relative;display:flex;align-items:center;width:100%}input{width:100%;height:2.5rem;padding:0 1rem;font-family:inherit;font-size:1rem;color:var(--text-color);background:var(--surface-0);border:.125rem solid var(--surface-border);border-radius:var(--border-radius);transition:all var(--animation-duration-default) var(--animation-easing-default)}input:hover:not(:disabled):not(:focus){border-color:var(--primary-color)}input::placeholder{color:var(--text-color-tertiary);opacity:1}input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 .125rem var(--focus-ring-color)}:host.outlined input{background:transparent}:host.filled input{background:var(--surface-ground);border:.125rem solid var(--surface-border)}:host.filled input:hover:not(:disabled):not(:focus){background:var(--surface-hover)}:host.filled input:focus{background:var(--surface-0)}:host.error input{border-color:var(--danger-color)}:host.error input:focus{box-shadow:0 0 0 .125rem var(--focus-ring-error)}:host.success input{border-color:var(--success-color)}:host.success input:focus{box-shadow:0 0 0 .125rem var(--focus-ring-success)}:host.disabled input{background:var(--surface-ground);cursor:not-allowed;opacity:var(--opacity-disabled)}:host.readonly input{background:var(--surface-ground);cursor:default}:host.small input{height:2rem;font-size:.875rem}:host.large input{height:3rem;font-size:1.125rem}:host.has-start-icon input{padding-left:2.75rem}:host.has-end-icon input{padding-right:2.75rem}.input-wrapper i{position:absolute;top:50%;transform:translateY(-50%);font-size:1.25rem;color:var(--text-color-secondary);pointer-events:none;z-index:2}.input-wrapper i:first-of-type{padding-left:1rem}.input-wrapper i:last-of-type{padding-right:1rem}.password-toggle{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);width:2rem;height:2rem;background:transparent;border:none;color:var(--text-color-secondary);cursor:pointer;padding:0;border-radius:var(--border-radius);display:flex;align-items:center;justify-content:center;transition:all .2s ease;z-index:3}.password-toggle:hover:not(:disabled){background:var(--surface-hover);color:var(--text-color)}.password-toggle i{position:static;transform:none;pointer-events:auto}.input-loader{position:absolute;right:1rem;top:50%;transform:translateY(-50%);z-index:3}.loader{width:1rem;height:1rem;border:.125rem solid var(--surface-border);border-top-color:var(--primary-color);border-radius:50%;animation:spin .8s linear infinite}.suggestions-list{pointer-events:auto;background:var(--surface-0);border:.0625rem solid var(--surface-border);border-radius:var(--border-radius);box-shadow:var(--shadow-lg);overflow-y:auto}.suggestion-item{padding:.5rem 1rem;cursor:pointer;color:var(--text-color)}.suggestion-item:hover,.suggestion-item.focused{background:var(--surface-hover);color:var(--primary-color)}.input-error,.input-success,.input-hint{font-size:.875rem}.input-error{color:var(--danger-color)}.input-success{color:var(--success-color)}.input-hint{color:var(--text-color-secondary)}@keyframes spin{to{transform:rotate(360deg)}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { suggestionsTpl: [{ type: i0.ViewChild, args: ['suggestionsTpl', { 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"] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }, { type: i0.Output, args: ["readonlyChange"] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }, { type: i0.Output, args: ["loadingChange"] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], showLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabel", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], iconStart: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconStart", required: false }] }], iconEnd: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconEnd", 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 }] }], suggestions: [{ type: i0.Input, args: [{ isSignal: true, alias: "suggestions", required: false }] }], autocompleteConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocompleteConfig", required: false }] }], inputFocus: [{ type: i0.Output, args: ["inputFocus"] }], inputBlur: [{ type: i0.Output, args: ["inputBlur"] }], suggestionSelect: [{ type: i0.Output, args: ["suggestionSelect"] }] } });
 
 const TEXTAREA_LABELS = {
     characterCountSuffix: 'caractères',
@@ -3734,7 +3928,14 @@ class PshSelectComponent {
         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 +4089,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 +4157,7 @@ class PshSelectComponent {
         else {
             this.isOpenSignal.set(true);
             this.opened.emit();
+            this.openPanel();
         }
     }
     close() {
@@ -3940,6 +4166,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 +4327,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 +4349,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 +6380,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