ps-helix 4.0.0 → 4.0.1

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, ChangeDetectorRef, DestroyRef, forwardRef, Injectable, Renderer2, contentChild, EventEmitter, Output, Input, contentChildren, afterNextRender } from '@angular/core';
+import { input, output, computed, ChangeDetectionStrategy, Component, model, inject, ElementRef, signal, PLATFORM_ID, ViewEncapsulation, InjectionToken, viewChild, effect, ChangeDetectorRef, DestroyRef, Injectable, Renderer2, contentChild, EventEmitter, Output, Input, contentChildren, afterNextRender } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule, isPlatformBrowser, NgTemplateOutlet } from '@angular/common';
 import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
@@ -955,9 +955,9 @@ let checkboxIdCounter = 0;
 class PshCheckboxComponent {
     constructor() {
         this.config = inject(CHECKBOX_CONFIG);
-        this.uniqueId = `checkbox-${++checkboxIdCounter}`;
         this.checkboxInput = viewChild('checkboxInput', ...(ngDevMode ? [{ debugName: "checkboxInput" }] : []));
-        this.onChange = (value) => { };
+        this.uniqueId = `psh-cb-${++checkboxIdCounter}`;
+        this.onChange = (_) => { };
         this.onTouched = () => { };
         this.checked = model(this.config.checked ?? false, ...(ngDevMode ? [{ debugName: "checked" }] : []));
         this.disabled = model(this.config.disabled ?? false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
@@ -965,46 +965,44 @@ class PshCheckboxComponent {
         this.touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : []));
         this.required = input(this.config.required ?? false, ...(ngDevMode ? [{ debugName: "required" }] : []));
         this.label = input(this.config.label ?? '', ...(ngDevMode ? [{ debugName: "label" }] : []));
-        this.error = input('', ...(ngDevMode ? [{ debugName: "error" }] : []));
-        this.success = input('', ...(ngDevMode ? [{ debugName: "success" }] : []));
-        this.ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : []));
+        this.error = input(this.config.error, ...(ngDevMode ? [{ debugName: "error" }] : []));
+        this.success = input(this.config.success, ...(ngDevMode ? [{ debugName: "success" }] : []));
+        this.ariaLabel = input(this.config.ariaLabel, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
         this.size = input(this.config.size ?? 'medium', ...(ngDevMode ? [{ debugName: "size" }] : []));
         this.labelPosition = input(this.config.labelPosition ?? 'right', ...(ngDevMode ? [{ debugName: "labelPosition" }] : []));
         this.ariaChecked = computed(() => this.indeterminate() ? 'mixed' : (this.checked() ? 'true' : 'false'), ...(ngDevMode ? [{ debugName: "ariaChecked" }] : []));
-        this.computedAriaLabel = computed(() => this.ariaLabel(), ...(ngDevMode ? [{ debugName: "computedAriaLabel" }] : []));
-        this.errorMessageId = computed(() => this.error() ? `${this.uniqueId}-error` : undefined, ...(ngDevMode ? [{ debugName: "errorMessageId" }] : []));
-        this.successMessageId = computed(() => this.success() ? `${this.uniqueId}-success` : undefined, ...(ngDevMode ? [{ debugName: "successMessageId" }] : []));
+        this.computedAriaLabel = computed(() => this.ariaLabel() || this.label() || undefined, ...(ngDevMode ? [{ debugName: "computedAriaLabel" }] : []));
         this.ariaDescribedBy = computed(() => {
             const ids = [];
-            if (this.errorMessageId())
-                ids.push(this.errorMessageId());
-            if (this.successMessageId())
-                ids.push(this.successMessageId());
+            if (this.error())
+                ids.push(`${this.uniqueId}-error`);
+            if (this.success())
+                ids.push(`${this.uniqueId}-success`);
             return ids.length > 0 ? ids.join(' ') : undefined;
         }, ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : []));
-        this.state = computed(() => this.getState(), ...(ngDevMode ? [{ debugName: "state" }] : []));
+        this.state = computed(() => {
+            if (this.disabled())
+                return 'disabled';
+            if (this.indeterminate())
+                return 'indeterminate';
+            if (this.error())
+                return 'error';
+            if (this.success())
+                return 'success';
+            return this.checked() ? 'checked' : 'unchecked';
+        }, ...(ngDevMode ? [{ debugName: "state" }] : []));
         effect(() => {
             if (!this.label() && !this.ariaLabel()) {
-                console.warn('[psh-checkbox] No accessible label provided. Please use label input or ariaLabel input.');
+                console.warn('[psh-checkbox] Label manquant pour l\'accessibilité.');
             }
-        }, { allowSignalWrites: false });
-    }
-    getState() {
-        if (this.disabled())
-            return 'disabled';
-        if (this.indeterminate())
-            return 'indeterminate';
-        if (this.error())
-            return 'error';
-        if (this.success())
-            return 'success';
-        return this.checked() ? 'checked' : 'unchecked';
+        });
     }
     toggle() {
         if (!this.disabled()) {
-            this.checked.update(v => !v);
+            const newValue = !this.checked();
+            this.checked.set(newValue);
             this.indeterminate.set(false);
-            this.onChange(this.checked());
+            this.onChange(newValue);
             this.onTouched();
             this.touched.set(true);
         }
@@ -1012,49 +1010,26 @@ class PshCheckboxComponent {
     handleKeydown(event) {
         if (this.disabled())
             return;
-        if (event.key === ' ' || event.key === 'Spacebar') {
-            event.preventDefault();
-            this.toggle();
-        }
-        else if (event.key === 'Enter') {
+        if (event.key === ' ' || event.key === 'Spacebar' || event.key === 'Enter') {
             event.preventDefault();
             this.toggle();
         }
     }
-    writeValue(value) {
-        this.checked.set(value ?? false);
-    }
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
-    }
-    setDisabledState(isDisabled) {
-        this.disabled.set(isDisabled);
-    }
-    focus() {
-        const el = this.checkboxInput();
-        if (el?.nativeElement) {
-            el.nativeElement.focus();
-        }
-    }
-    blur() {
-        const el = this.checkboxInput();
-        if (el?.nativeElement) {
-            el.nativeElement.blur();
-        }
-    }
+    writeValue(value) { this.checked.set(!!value); }
+    registerOnChange(fn) { this.onChange = fn; }
+    registerOnTouched(fn) { this.onTouched = fn; }
+    setDisabledState(isDisabled) { this.disabled.set(isDisabled); }
+    focus() { this.checkboxInput()?.nativeElement.focus(); }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PshCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: PshCheckboxComponent, isStandalone: true, selector: "psh-checkbox", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, success: { classPropertyName: "success", publicName: "success", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", disabled: "disabledChange", indeterminate: "indeterminateChange", touched: "touchedChange" }, host: { properties: { "class.checkbox-disabled": "disabled()", "class.checkbox-error": "!!error()", "class.checkbox-success": "!!success()", "class.checkbox-small": "size() === \"small\"", "class.checkbox-large": "size() === \"large\"", "attr.data-state": "state()" } }, providers: [{
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: PshCheckboxComponent, isStandalone: true, selector: "psh-checkbox", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, success: { classPropertyName: "success", publicName: "success", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", disabled: "disabledChange", indeterminate: "indeterminateChange", touched: "touchedChange" }, host: { properties: { "class.checkbox-disabled": "disabled()", "class.checkbox-error": "!!error()", "class.checkbox-success": "!!success()", "class.checkbox-small": "size() === \"small\"", "class.checkbox-large": "size() === \"large\"", "class.checkbox-checked": "checked() && !indeterminate()", "class.checkbox-indeterminate": "indeterminate()", "attr.data-state": "state()", "attr.aria-checked": "ariaChecked()" } }, providers: [{
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: PshCheckboxComponent,
                 multi: true
-            }], viewQueries: [{ propertyName: "checkboxInput", first: true, predicate: ["checkboxInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"checkbox-container\">\n  <label class=\"checkbox-label\" [class.label-left]=\"labelPosition() === 'left'\">\n    <input\n      #checkboxInput\n      type=\"checkbox\"\n      class=\"checkbox-input\"\n      [checked]=\"checked()\"\n      [disabled]=\"disabled()\"\n      [required]=\"required()\"\n      [attr.aria-label]=\"computedAriaLabel()\"\n      [attr.aria-required]=\"required() || null\"\n      [attr.aria-invalid]=\"error() ? 'true' : null\"\n      [attr.aria-checked]=\"ariaChecked()\"\n      [attr.aria-describedby]=\"ariaDescribedBy()\"\n      (change)=\"toggle()\"\n      (keydown)=\"handleKeydown($event)\"\n    />\n    <span \n      class=\"checkbox-control\"\n      [class.error]=\"!!error()\"\n      [class.success]=\"!!success()\"\n      [class.indeterminate]=\"indeterminate()\"\n    >\n      @if (checked() && !indeterminate()) {\n        <i class=\"ph ph-check\" aria-hidden=\"true\"></i>\n      }\n      @if (indeterminate()) {\n        <i class=\"ph ph-minus\" aria-hidden=\"true\"></i>\n      }\n    </span>\n    <span class=\"checkbox-text\">\n      @if (label()) {\n        {{ label() }}\n      } @else {\n        <ng-content></ng-content>\n      }\n    </span>\n  </label>\n\n  @if (error()) {\n    <div [id]=\"errorMessageId()\" class=\"checkbox-error\" role=\"alert\">\n      {{ error() }}\n    </div>\n  }\n\n  @if (success()) {\n    <div [id]=\"successMessageId()\" class=\"checkbox-success\" role=\"status\">\n      {{ success() }}\n    </div>\n  }\n</div>", styles: [".checkbox-container{display:inline-flex;flex-direction:column;gap:var(--spacing-xs)}.checkbox-label{display:inline-flex;align-items:center;gap:var(--spacing-sm);cursor:pointer;-webkit-user-select:none;user-select:none;color:var(--text-color)}.checkbox-label.label-left{flex-direction:row-reverse;justify-content:space-between}.checkbox-input{position:absolute;opacity:0;width:0;height:0}.checkbox-control{display:flex;align-items:center;justify-content:center;width:var(--size-4-5);height:var(--size-4-5);min-width:var(--size-4-5);min-height:var(--size-4-5);border:var(--border-width-2) solid var(--surface-border);border-radius:var(--border-radius);background:var(--surface-card);transition:background-color var(--animation-duration-fast) var(--animation-easing-default),border-color var(--animation-duration-fast) var(--animation-easing-default);color:var(--primary-color-text);position:relative;flex-shrink:0}.checkbox-input:checked+.checkbox-control{background:var(--primary-color);border-color:var(--primary-color)}.checkbox-input:focus-visible+.checkbox-control{outline:var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);outline-offset:var(--focus-outline-offset)}.checkbox-control i{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(0);font-size:var(--font-size-xs);opacity:0;transition:opacity var(--animation-duration-fast) var(--animation-easing-default),transform var(--animation-duration-fast) var(--animation-easing-default)}.checkbox-input:checked+.checkbox-control i,.checkbox-control.indeterminate i{opacity:1;transform:translate(-50%,-50%) scale(1.1)}.checkbox-control.indeterminate{background:var(--primary-color);border-color:var(--primary-color)}:host(.checkbox-disabled) .checkbox-label{opacity:var(--opacity-disabled);cursor:not-allowed}:host(.checkbox-error) .checkbox-control{border-color:var(--danger-color)}:host(.checkbox-error) .checkbox-input:checked+.checkbox-control{background:var(--danger-color);border-color:var(--danger-color)}:host(.checkbox-success) .checkbox-control{border-color:var(--success-color)}:host(.checkbox-success) .checkbox-input:checked+.checkbox-control{background:var(--success-color);border-color:var(--success-color)}.checkbox-error{font-size:var(--font-size-sm);color:var(--danger-color)}.checkbox-success{font-size:var(--font-size-sm);color:var(--success-color)}:host(.checkbox-small) .checkbox-control{width:var(--size-4);height:var(--size-4);min-width:var(--size-4);min-height:var(--size-4)}:host(.checkbox-small) .checkbox-text{font-size:var(--font-size-sm)}:host(.checkbox-large) .checkbox-control{width:var(--size-5-5);height:var(--size-5-5);min-width:var(--size-5-5);min-height:var(--size-5-5)}:host(.checkbox-large) .checkbox-text{font-size:var(--font-size-lg)}.checkbox-text{color:var(--text-color)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+            }], viewQueries: [{ propertyName: "checkboxInput", first: true, predicate: ["checkboxInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"checkbox-container\">\n  <label class=\"checkbox-label\" [class.label-left]=\"labelPosition() === 'left'\">\n    <input\n      #checkboxInput\n      type=\"checkbox\"\n      class=\"checkbox-input\"\n      [checked]=\"checked()\"\n      [disabled]=\"disabled()\"\n      [required]=\"required()\"\n      [attr.aria-label]=\"computedAriaLabel()\"\n      [attr.aria-checked]=\"ariaChecked()\"\n      [attr.aria-describedby]=\"ariaDescribedBy()\"\n      (change)=\"toggle()\"\n      (keydown)=\"handleKeydown($event)\"\n    />\n    \n    <span class=\"checkbox-control\">\n      @if (checked() && !indeterminate()) {\n        <i class=\"ph ph-check\" aria-hidden=\"true\"></i>\n      }\n      @if (indeterminate()) {\n        <i class=\"ph ph-minus\" aria-hidden=\"true\"></i>\n      }\n    </span>\n\n    <span class=\"checkbox-text\">\n      @if (label()) {\n        {{ label() }}\n      } @else {\n        <ng-content></ng-content>\n      }\n    </span>\n  </label>\n\n  @if (error()) {\n    <div [id]=\"uniqueId + '-error'\" class=\"checkbox-message error\" role=\"alert\">\n      {{ error() }}\n    </div>\n  }\n  @if (success()) {\n    <div [id]=\"uniqueId + '-success'\" class=\"checkbox-message success\" role=\"status\">\n      {{ success() }}\n    </div>\n  }\n</div>", styles: [":host{display:inline-flex;flex-direction:column;gap:.5rem}.checkbox-container{display:flex;flex-direction:column}.checkbox-label{display:inline-flex;align-items:center;gap:.75rem;cursor:pointer;-webkit-user-select:none;user-select:none;color:var(--text-color)}.checkbox-label.label-left{flex-direction:row-reverse;justify-content:space-between}.checkbox-input{position:absolute;opacity:0;width:0;height:0}.checkbox-control{display:flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;border:.125rem solid var(--surface-border);border-radius:var(--border-radius);background:var(--surface-card);transition:all var(--animation-duration-fast) var(--animation-easing-default);color:#fff;position:relative;flex-shrink:0}:host.checkbox-checked .checkbox-control,:host.checkbox-indeterminate .checkbox-control{background:var(--primary-color);border-color:var(--primary-color)}.checkbox-input:focus-visible+.checkbox-control{outline:.125rem solid var(--focus-outline-color);outline-offset:.125rem}.checkbox-control i{font-size:.875rem;line-height:1}:host.checkbox-small .checkbox-control{width:1rem;height:1rem}:host.checkbox-large .checkbox-control{width:1.5rem;height:1.5rem}:host.checkbox-error .checkbox-control{border-color:var(--danger-color)}:host.checkbox-error.checkbox-checked .checkbox-control{background:var(--danger-color)}:host.checkbox-success .checkbox-control{border-color:var(--success-color)}:host.checkbox-success.checkbox-checked .checkbox-control{background:var(--success-color)}:host.checkbox-disabled{opacity:var(--opacity-disabled);cursor:not-allowed}:host.checkbox-disabled .checkbox-label{cursor:not-allowed}.checkbox-message{font-size:.875rem;margin-top:.125rem}.checkbox-message.error{color:var(--danger-color)}.checkbox-message.success{color:var(--success-color)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PshCheckboxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'psh-checkbox', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, providers: [{
+            args: [{ selector: 'psh-checkbox', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, providers: [{
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: PshCheckboxComponent,
                             multi: true
@@ -1064,8 +1039,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                         '[class.checkbox-success]': '!!success()',
                         '[class.checkbox-small]': 'size() === "small"',
                         '[class.checkbox-large]': 'size() === "large"',
-                        '[attr.data-state]': 'state()'
-                    }, template: "<div class=\"checkbox-container\">\n  <label class=\"checkbox-label\" [class.label-left]=\"labelPosition() === 'left'\">\n    <input\n      #checkboxInput\n      type=\"checkbox\"\n      class=\"checkbox-input\"\n      [checked]=\"checked()\"\n      [disabled]=\"disabled()\"\n      [required]=\"required()\"\n      [attr.aria-label]=\"computedAriaLabel()\"\n      [attr.aria-required]=\"required() || null\"\n      [attr.aria-invalid]=\"error() ? 'true' : null\"\n      [attr.aria-checked]=\"ariaChecked()\"\n      [attr.aria-describedby]=\"ariaDescribedBy()\"\n      (change)=\"toggle()\"\n      (keydown)=\"handleKeydown($event)\"\n    />\n    <span \n      class=\"checkbox-control\"\n      [class.error]=\"!!error()\"\n      [class.success]=\"!!success()\"\n      [class.indeterminate]=\"indeterminate()\"\n    >\n      @if (checked() && !indeterminate()) {\n        <i class=\"ph ph-check\" aria-hidden=\"true\"></i>\n      }\n      @if (indeterminate()) {\n        <i class=\"ph ph-minus\" aria-hidden=\"true\"></i>\n      }\n    </span>\n    <span class=\"checkbox-text\">\n      @if (label()) {\n        {{ label() }}\n      } @else {\n        <ng-content></ng-content>\n      }\n    </span>\n  </label>\n\n  @if (error()) {\n    <div [id]=\"errorMessageId()\" class=\"checkbox-error\" role=\"alert\">\n      {{ error() }}\n    </div>\n  }\n\n  @if (success()) {\n    <div [id]=\"successMessageId()\" class=\"checkbox-success\" role=\"status\">\n      {{ success() }}\n    </div>\n  }\n</div>", styles: [".checkbox-container{display:inline-flex;flex-direction:column;gap:var(--spacing-xs)}.checkbox-label{display:inline-flex;align-items:center;gap:var(--spacing-sm);cursor:pointer;-webkit-user-select:none;user-select:none;color:var(--text-color)}.checkbox-label.label-left{flex-direction:row-reverse;justify-content:space-between}.checkbox-input{position:absolute;opacity:0;width:0;height:0}.checkbox-control{display:flex;align-items:center;justify-content:center;width:var(--size-4-5);height:var(--size-4-5);min-width:var(--size-4-5);min-height:var(--size-4-5);border:var(--border-width-2) solid var(--surface-border);border-radius:var(--border-radius);background:var(--surface-card);transition:background-color var(--animation-duration-fast) var(--animation-easing-default),border-color var(--animation-duration-fast) var(--animation-easing-default);color:var(--primary-color-text);position:relative;flex-shrink:0}.checkbox-input:checked+.checkbox-control{background:var(--primary-color);border-color:var(--primary-color)}.checkbox-input:focus-visible+.checkbox-control{outline:var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);outline-offset:var(--focus-outline-offset)}.checkbox-control i{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(0);font-size:var(--font-size-xs);opacity:0;transition:opacity var(--animation-duration-fast) var(--animation-easing-default),transform var(--animation-duration-fast) var(--animation-easing-default)}.checkbox-input:checked+.checkbox-control i,.checkbox-control.indeterminate i{opacity:1;transform:translate(-50%,-50%) scale(1.1)}.checkbox-control.indeterminate{background:var(--primary-color);border-color:var(--primary-color)}:host(.checkbox-disabled) .checkbox-label{opacity:var(--opacity-disabled);cursor:not-allowed}:host(.checkbox-error) .checkbox-control{border-color:var(--danger-color)}:host(.checkbox-error) .checkbox-input:checked+.checkbox-control{background:var(--danger-color);border-color:var(--danger-color)}:host(.checkbox-success) .checkbox-control{border-color:var(--success-color)}:host(.checkbox-success) .checkbox-input:checked+.checkbox-control{background:var(--success-color);border-color:var(--success-color)}.checkbox-error{font-size:var(--font-size-sm);color:var(--danger-color)}.checkbox-success{font-size:var(--font-size-sm);color:var(--success-color)}:host(.checkbox-small) .checkbox-control{width:var(--size-4);height:var(--size-4);min-width:var(--size-4);min-height:var(--size-4)}:host(.checkbox-small) .checkbox-text{font-size:var(--font-size-sm)}:host(.checkbox-large) .checkbox-control{width:var(--size-5-5);height:var(--size-5-5);min-width:var(--size-5-5);min-height:var(--size-5-5)}:host(.checkbox-large) .checkbox-text{font-size:var(--font-size-lg)}.checkbox-text{color:var(--text-color)}\n"] }]
+                        '[class.checkbox-checked]': 'checked() && !indeterminate()',
+                        '[class.checkbox-indeterminate]': 'indeterminate()',
+                        '[attr.data-state]': 'state()',
+                        '[attr.aria-checked]': 'ariaChecked()'
+                    }, template: "<div class=\"checkbox-container\">\n  <label class=\"checkbox-label\" [class.label-left]=\"labelPosition() === 'left'\">\n    <input\n      #checkboxInput\n      type=\"checkbox\"\n      class=\"checkbox-input\"\n      [checked]=\"checked()\"\n      [disabled]=\"disabled()\"\n      [required]=\"required()\"\n      [attr.aria-label]=\"computedAriaLabel()\"\n      [attr.aria-checked]=\"ariaChecked()\"\n      [attr.aria-describedby]=\"ariaDescribedBy()\"\n      (change)=\"toggle()\"\n      (keydown)=\"handleKeydown($event)\"\n    />\n    \n    <span class=\"checkbox-control\">\n      @if (checked() && !indeterminate()) {\n        <i class=\"ph ph-check\" aria-hidden=\"true\"></i>\n      }\n      @if (indeterminate()) {\n        <i class=\"ph ph-minus\" aria-hidden=\"true\"></i>\n      }\n    </span>\n\n    <span class=\"checkbox-text\">\n      @if (label()) {\n        {{ label() }}\n      } @else {\n        <ng-content></ng-content>\n      }\n    </span>\n  </label>\n\n  @if (error()) {\n    <div [id]=\"uniqueId + '-error'\" class=\"checkbox-message error\" role=\"alert\">\n      {{ error() }}\n    </div>\n  }\n  @if (success()) {\n    <div [id]=\"uniqueId + '-success'\" class=\"checkbox-message success\" role=\"status\">\n      {{ success() }}\n    </div>\n  }\n</div>", styles: [":host{display:inline-flex;flex-direction:column;gap:.5rem}.checkbox-container{display:flex;flex-direction:column}.checkbox-label{display:inline-flex;align-items:center;gap:.75rem;cursor:pointer;-webkit-user-select:none;user-select:none;color:var(--text-color)}.checkbox-label.label-left{flex-direction:row-reverse;justify-content:space-between}.checkbox-input{position:absolute;opacity:0;width:0;height:0}.checkbox-control{display:flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;border:.125rem solid var(--surface-border);border-radius:var(--border-radius);background:var(--surface-card);transition:all var(--animation-duration-fast) var(--animation-easing-default);color:#fff;position:relative;flex-shrink:0}:host.checkbox-checked .checkbox-control,:host.checkbox-indeterminate .checkbox-control{background:var(--primary-color);border-color:var(--primary-color)}.checkbox-input:focus-visible+.checkbox-control{outline:.125rem solid var(--focus-outline-color);outline-offset:.125rem}.checkbox-control i{font-size:.875rem;line-height:1}:host.checkbox-small .checkbox-control{width:1rem;height:1rem}:host.checkbox-large .checkbox-control{width:1.5rem;height:1.5rem}:host.checkbox-error .checkbox-control{border-color:var(--danger-color)}:host.checkbox-error.checkbox-checked .checkbox-control{background:var(--danger-color)}:host.checkbox-success .checkbox-control{border-color:var(--success-color)}:host.checkbox-success.checkbox-checked .checkbox-control{background:var(--success-color)}:host.checkbox-disabled{opacity:var(--opacity-disabled);cursor:not-allowed}:host.checkbox-disabled .checkbox-label{cursor:not-allowed}.checkbox-message{font-size:.875rem;margin-top:.125rem}.checkbox-message.error{color:var(--danger-color)}.checkbox-message.success{color:var(--success-color)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { checkboxInput: [{ type: i0.ViewChild, args: ['checkboxInput', { isSignal: true }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }, { type: i0.Output, args: ["indeterminateChange"] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], success: [{ type: i0.Input, args: [{ isSignal: true, alias: "success", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], labelPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPosition", required: false }] }] } });
 
 class PshCollapseComponent {
@@ -1452,34 +1430,25 @@ class PshInputComponent {
             }
             return this.type();
         }, ...(ngDevMode ? [{ debugName: "effectiveType" }] : []));
-        this.computedAriaLabel = computed(() => {
-            return this.ariaLabel() || this.label() || this.placeholder();
-        }, ...(ngDevMode ? [{ debugName: "computedAriaLabel" }] : []));
-        this.passwordToggleLabel = computed(() => {
-            return this.passwordVisible() ? INPUT_LABELS.hidePassword : INPUT_LABELS.showPassword;
-        }, ...(ngDevMode ? [{ debugName: "passwordToggleLabel" }] : []));
+        this.computedAriaLabel = computed(() => this.ariaLabel() || this.label() || this.placeholder(), ...(ngDevMode ? [{ debugName: "computedAriaLabel" }] : []));
+        this.passwordToggleLabel = computed(() => this.passwordVisible() ? INPUT_LABELS.hidePassword : INPUT_LABELS.showPassword, ...(ngDevMode ? [{ debugName: "passwordToggleLabel" }] : []));
         this.state = computed(() => this.getState(), ...(ngDevMode ? [{ debugName: "state" }] : []));
         this.onChange = (_) => { };
         this.onTouched = () => { };
         this.destroyRef.onDestroy(() => {
-            if (this.blurTimeoutId !== null) {
-                clearTimeout(this.blurTimeoutId);
-            }
-            if (this.debounceTimeoutId !== null) {
-                clearTimeout(this.debounceTimeoutId);
-            }
+            if (this.blurTimeoutId)
+                window.clearTimeout(this.blurTimeoutId);
+            if (this.debounceTimeoutId)
+                window.clearTimeout(this.debounceTimeoutId);
         });
     }
     writeValue(value) {
-        this.value.set(value ?? '');
+        const safeValue = typeof value === 'string' ? value : '';
+        this.value.set(safeValue);
         this.cdr.markForCheck();
     }
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
-    }
+    registerOnChange(fn) { this.onChange = fn; }
+    registerOnTouched(fn) { this.onTouched = fn; }
     setDisabledState(isDisabled) {
         this.disabled.set(isDisabled);
     }
@@ -1494,8 +1463,9 @@ class PshInputComponent {
     handleFocus() {
         this.focusedSignal.set(true);
         this.inputFocus.emit();
-        if (this.suggestions() && this.value().length >= this.autocompleteConfig().minLength) {
-            this.updateSuggestions(this.value());
+        const val = this.value();
+        if (this.suggestions() && val.length >= this.autocompleteConfig().minLength) {
+            this.updateSuggestions(val);
         }
     }
     handleBlur() {
@@ -1503,9 +1473,8 @@ class PshInputComponent {
         this.inputBlur.emit();
         this.onTouched();
         this.touched.set(true);
-        if (this.blurTimeoutId !== null) {
-            clearTimeout(this.blurTimeoutId);
-        }
+        if (this.blurTimeoutId)
+            window.clearTimeout(this.blurTimeoutId);
         this.blurTimeoutId = window.setTimeout(() => {
             this.suggestionsVisible.set(false);
             this.focusedSuggestionIndex.set(-1);
@@ -1520,18 +1489,18 @@ class PshInputComponent {
         switch (event.key) {
             case 'ArrowDown':
                 event.preventDefault();
-                this.focusedSuggestionIndex.update(i => i < suggestions.length - 1 ? i + 1 : 0);
+                this.focusedSuggestionIndex.update(i => (i < suggestions.length - 1 ? i + 1 : 0));
                 break;
             case 'ArrowUp':
                 event.preventDefault();
-                this.focusedSuggestionIndex.update(i => i > 0 ? i - 1 : suggestions.length - 1);
+                this.focusedSuggestionIndex.update(i => (i > 0 ? i - 1 : suggestions.length - 1));
                 break;
             case 'Enter':
-                event.preventDefault();
                 if (currentIndex >= 0 && currentIndex < suggestions.length) {
-                    const selectedSuggestion = suggestions[currentIndex];
-                    if (selectedSuggestion) {
-                        this.handleSuggestionClick(selectedSuggestion);
+                    event.preventDefault();
+                    const selected = suggestions[currentIndex];
+                    if (selected !== undefined) {
+                        this.handleSuggestionClick(selected);
                     }
                 }
                 break;
@@ -1543,12 +1512,11 @@ class PshInputComponent {
         }
     }
     handleSuggestionClick(suggestion) {
-        if (suggestion) {
-            this.value.set(suggestion);
-            this.onChange(suggestion);
-            this.suggestionSelect.emit(suggestion);
-            this.suggestionsVisible.set(false);
-        }
+        this.value.set(suggestion);
+        this.onChange(suggestion);
+        this.suggestionSelect.emit(suggestion);
+        this.suggestionsVisible.set(false);
+        this.focusedSuggestionIndex.set(-1);
     }
     togglePasswordVisibility() {
         this.passwordVisibleSignal.update(v => !v);
@@ -1558,62 +1526,68 @@ class PshInputComponent {
     }
     focus() {
         const inputEl = this.elementRef.nativeElement.querySelector('input');
-        if (inputEl) {
-            inputEl.focus();
-        }
+        inputEl?.focus();
     }
     focusSelect() {
         this.focus();
     }
     debouncedUpdateSuggestions(value) {
-        if (this.debounceTimeoutId !== null) {
-            clearTimeout(this.debounceTimeoutId);
-        }
-        const debounceTime = this.autocompleteConfig().debounceTime;
+        if (this.debounceTimeoutId)
+            window.clearTimeout(this.debounceTimeoutId);
         this.debounceTimeoutId = window.setTimeout(() => {
             this.updateSuggestions(value);
             this.debounceTimeoutId = null;
-        }, debounceTime);
+        }, this.autocompleteConfig().debounceTime);
     }
     async updateSuggestions(value) {
-        const suggestionsValue = this.suggestions();
-        if (typeof suggestionsValue === 'function') {
-            try {
-                const results = await suggestionsValue(value);
-                if (Array.isArray(results)) {
-                    this.filteredSuggestionsSignal.set(results);
-                    this.suggestionsVisible.set(true);
-                }
+        const provider = this.suggestions();
+        try {
+            let results = [];
+            if (typeof provider === 'function') {
+                results = await provider(value);
             }
-            catch (error) {
-                console.error('Error fetching suggestions:', error);
-                this.filteredSuggestionsSignal.set([]);
+            else if (Array.isArray(provider)) {
+                results = provider.filter(s => s.toLowerCase().includes(value.toLowerCase()));
             }
+            this.filteredSuggestionsSignal.set(results);
+            this.suggestionsVisible.set(results.length > 0);
         }
-        else if (Array.isArray(suggestionsValue)) {
-            const filtered = suggestionsValue.filter(suggestion => suggestion.toLowerCase().includes(value.toLowerCase()));
-            this.filteredSuggestionsSignal.set(filtered);
-            this.suggestionsVisible.set(true);
+        catch (error) {
+            this.filteredSuggestionsSignal.set([]);
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PshInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: PshInputComponent, isStandalone: true, selector: "psh-input", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", 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 }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, iconStart: { classPropertyName: "iconStart", publicName: "iconStart", isSignal: true, isRequired: false, transformFunction: null }, iconEnd: { classPropertyName: "iconEnd", publicName: "iconEnd", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, success: { classPropertyName: "success", publicName: "success", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, suggestions: { classPropertyName: "suggestions", publicName: "suggestions", isSignal: true, isRequired: false, transformFunction: null }, autocompleteConfig: { classPropertyName: "autocompleteConfig", publicName: "autocompleteConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", disabled: "disabledChange", readonly: "readonlyChange", loading: "loadingChange", touched: "touchedChange", inputFocus: "inputFocus", inputBlur: "inputBlur", suggestionSelect: "suggestionSelect" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: PshInputComponent, isStandalone: true, selector: "psh-input", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", 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 }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, iconStart: { classPropertyName: "iconStart", publicName: "iconStart", isSignal: true, isRequired: false, transformFunction: null }, iconEnd: { classPropertyName: "iconEnd", publicName: "iconEnd", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, success: { classPropertyName: "success", publicName: "success", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, suggestions: { classPropertyName: "suggestions", publicName: "suggestions", isSignal: true, isRequired: false, transformFunction: null }, autocompleteConfig: { classPropertyName: "autocompleteConfig", publicName: "autocompleteConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", disabled: "disabledChange", readonly: "readonlyChange", loading: "loadingChange", touched: "touchedChange", inputFocus: "inputFocus", inputBlur: "inputBlur", suggestionSelect: "suggestionSelect" }, host: { properties: { "class.full-width": "fullWidth()", "class.small": "size() === \"small\"", "class.large": "size() === \"large\"", "class.error": "!!error()", "class.success": "!!success()", "class.disabled": "disabled()", "class.readonly": "readonly()", "class.loading": "loading()", "class.focused": "focused()", "class.has-start-icon": "!!iconStart()", "class.has-end-icon": "!!iconEnd() || type() === \"password\"", "class.outlined": "variant() === \"outlined\"", "class.filled": "variant() === \"filled\"" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => PshInputComponent),
+                useExisting: PshInputComponent,
                 multi: true
             }
-        ], ngImport: i0, template: "<div \n  class=\"input-container\"\n  [class.full-width]=\"fullWidth()\"\n  [class.small]=\"size() === 'small'\"\n  [class.large]=\"size() === 'large'\"\n  [class.error]=\"!!error()\"\n  [class.success]=\"!!success()\"\n  [class.disabled]=\"disabled()\"\n  [class.readonly]=\"readonly()\"\n  [class.loading]=\"loading()\"\n  [class.focused]=\"focused()\"\n  [class.has-start-icon]=\"!!iconStart()\"\n  [class.has-end-icon]=\"!!iconEnd() || type() === 'password'\"\n  [class.outlined]=\"variant() === 'outlined'\"\n  [class.filled]=\"variant() === 'filled'\"\n>\n  <!-- Label slot -->\n  @if (showLabel()) {\n    <label class=\"input-label\" [for]=\"inputId\" (click)=\"focusSelect()\" [class.required]=\"required()\">\n      <ng-content select=\"[input-label]\"></ng-content>\n      @if (!hasLabelContent()) {\n        {{ label() }}\n      }\n    </label>\n  }\n\n  <div class=\"input-wrapper\">\n    @if (iconStart()) {\n      <i class=\"ph ph-{{ iconStart() }}\" aria-hidden=\"true\"></i>\n    }\n\n    <input\n      [id]=\"inputId\"\n      [type]=\"effectiveType()\"\n      [attr.placeholder]=\"placeholder()\"\n      [attr.aria-label]=\"computedAriaLabel()\"\n      [attr.aria-invalid]=\"!!error()\"\n      [attr.aria-required]=\"required()\"\n      [attr.aria-describedby]=\"error() ? 'error-message' : success() ? 'success-message' : hint() ? 'hint-message' : null\"\n      [disabled]=\"disabled()\"\n      [readonly]=\"readonly()\"\n      [required]=\"required()\"\n      [value]=\"value()\"\n      (input)=\"handleInput($event)\"\n      (keydown)=\"handleKeydown($event)\"\n      (focus)=\"handleFocus()\"\n      (blur)=\"handleBlur()\"\n      [attr.data-state]=\"state()\"\n    />\n\n    @if (iconEnd()) {\n      <i class=\"ph ph-{{ iconEnd() }}\" aria-hidden=\"true\"></i>\n    }\n\n    @if (type() === 'password') {\n      <button\n        type=\"button\"\n        class=\"password-toggle\"\n        (click)=\"togglePasswordVisibility()\"\n        [attr.aria-label]=\"passwordToggleLabel()\"\n        [disabled]=\"disabled() || readonly()\"\n      >\n        <i \n          [class]=\"'ph ph-' + (passwordVisible() ? 'eye-slash' : 'eye')\"\n          aria-hidden=\"true\"\n        ></i>\n      </button>\n    }\n\n    @if (loading()) {\n      <div class=\"input-loader\" aria-hidden=\"true\">\n        <div class=\"loader\"></div>\n      </div>\n    }\n\n    @if (showSuggestions()) {\n      <div class=\"suggestions-list\" role=\"listbox\">\n        @for (suggestion of filteredSuggestions(); track suggestion; let i = $index) {\n          <div \n            class=\"suggestion-item\"\n            [class.focused]=\"i === focusedSuggestionIndex()\"\n            role=\"option\"\n            [attr.aria-selected]=\"i === focusedSuggestionIndex()\"\n            (click)=\"handleSuggestionClick(suggestion)\"\n            (mouseenter)=\"focusedSuggestionIndex.set(i)\"\n          >\n            {{ suggestion }}\n          </div>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- Error message slot -->\n  @if (error()) {\n    <div id=\"error-message\" class=\"input-error\" role=\"alert\">\n      <ng-content select=\"[input-error]\">\n        {{ error() }}\n      </ng-content>\n    </div>\n  }\n\n  <!-- Success message slot -->\n  @if (success()) {\n    <div id=\"success-message\" class=\"input-success\" role=\"status\">\n      <ng-content select=\"[input-success]\">\n        {{ success() }}\n      </ng-content>\n    </div>\n  }\n\n  <!-- Hint message slot -->\n  @if (hint()) {\n    <div id=\"hint-message\" class=\"input-hint\">\n      <ng-content select=\"[input-hint]\">\n        {{ hint() }}\n      </ng-content>\n    </div>\n  }\n</div>", styles: [".input-container{position:relative;width:100%;max-width:300px}.input-container.full-width{max-width:none}.input-label{display:block;color:var(--text-color);font-size:var(--font-size-sm);font-weight:500;margin-bottom:var(--spacing-xs);width:100%;cursor:pointer}.input-label.required:after{content:\"*\";color:var(--danger-color);margin-left:var(--spacing-xxs)}.input-wrapper{position:relative;display:flex;align-items:center;width:100%}input{width:100%;height:var(--height-input-md);padding:0 var(--spacing-md);font-family:inherit;font-size:var(--font-size-base);color:var(--text-color);background:var(--surface-0);border:var(--border-width-1) 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 var(--focus-ring-width) var(--focus-ring-color)}.input-container.outlined input{background:transparent;border:var(--border-width-2) solid var(--surface-border)}.input-container.outlined input:hover:not(:disabled):not(:focus){border-color:var(--primary-color)}.input-container.outlined input:focus{border-color:var(--primary-color);box-shadow:0 0 0 var(--focus-ring-width) var(--focus-ring-color)}.input-container.filled input{background:var(--surface-ground);border:var(--border-width-1) solid transparent}.input-container.filled input:hover:not(:disabled):not(:focus){background:var(--surface-hover)}.input-container.filled input:focus{background:var(--surface-0);border-color:var(--primary-color);box-shadow:0 0 0 var(--focus-ring-width) var(--focus-ring-color)}.input-container.error input{border-color:var(--danger-color)}.input-container.error input:focus{box-shadow:0 0 0 var(--focus-ring-width) var(--focus-ring-error)}.input-container.success input{border-color:var(--success-color)}.input-container.success input:focus{box-shadow:0 0 0 var(--focus-ring-width) var(--focus-ring-success)}.input-container.disabled input{background:var(--surface-ground);cursor:not-allowed;opacity:var(--opacity-disabled)}.input-container.readonly input{background:var(--surface-ground);cursor:default}.input-container.has-start-icon input{padding-left:calc(var(--spacing-md) * 2 + 1rem)}.input-container.has-end-icon input{padding-right:calc(var(--spacing-md) * 2 + 1rem)}.input-wrapper i{position:absolute;font-size:var(--icon-size-md);color:var(--text-color-secondary);pointer-events:none}.input-wrapper i:first-child{left:var(--spacing-md)}.input-wrapper i:last-child{right:var(--spacing-md)}.password-toggle{position:absolute;right:var(--spacing-md);background:transparent;border:none;color:var(--text-color-secondary);cursor:pointer;padding:var(--spacing-xs);border-radius:var(--border-radius);display:flex;align-items:center;justify-content:center;transition:all .2s ease}.password-toggle:hover{background:var(--surface-hover);color:var(--text-color)}.password-toggle:focus{outline:none;box-shadow:0 0 0 var(--focus-ring-width) var(--focus-ring-color)}.password-toggle i{font-size:var(--icon-size-md);position:static;pointer-events:auto}.input-container.small input{height:var(--height-input-sm);padding:0 var(--spacing-md);font-size:var(--font-size-sm)}.input-container.large input{height:var(--height-input-lg);padding:0 var(--spacing-lg);font-size:var(--font-size-lg)}.input-error,.input-success,.input-hint{font-size:var(--font-size-sm);margin-top:var(--spacing-xs)}.input-error{color:var(--danger-color);display:flex;align-items:center;gap:var(--spacing-xs)}.input-error i{font-size:var(--icon-size-sm)}.input-success{color:var(--success-color)}.input-hint{color:var(--text-color-secondary)}.input-loader{position:absolute;right:var(--spacing-md);display:flex;align-items:center;justify-content:center}.loader{width:var(--icon-size-sm);height:var(--icon-size-sm);border:var(--border-width-2) 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:var(--border-width-1) solid var(--surface-border);border-radius:var(--border-radius);box-shadow:var(--shadow-lg);z-index:var(--z-index-dropdown);max-height:var(--size-48);overflow-y:auto;margin-top:var(--spacing-xs)}.suggestion-item{padding:var(--spacing-sm) var(--spacing-md);cursor:pointer;transition:all var(--animation-duration-default) var(--animation-easing-default);color:var(--text-color)}.suggestion-item:hover,.suggestion-item.focused{background:var(--surface-hover);color:var(--primary-color)}@keyframes spin{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], ngImport: i0, template: "<div class=\"input-container\">\n  @if (showLabel()) {\n    <label \n      class=\"input-label\" \n      [for]=\"inputId\" \n      (click)=\"focusSelect()\" \n      [class.required]=\"required()\"\n    >\n      <ng-content select=\"[input-label]\"></ng-content>\n      @if (!hasLabelContent()) {\n        {{ label() }}\n      }\n    </label>\n  }\n\n  <div class=\"input-wrapper\">\n    @if (iconStart()) {\n      <i class=\"ph ph-{{ iconStart() }}\" aria-hidden=\"true\"></i>\n    }\n\n    <input\n      [id]=\"inputId\"\n      [type]=\"effectiveType()\"\n      [attr.placeholder]=\"placeholder()\"\n      [attr.aria-label]=\"computedAriaLabel()\"\n      [attr.aria-invalid]=\"!!error()\"\n      [attr.aria-required]=\"required()\"\n      [attr.aria-describedby]=\"error() ? 'error-message' : success() ? 'success-message' : hint() ? 'hint-message' : null\"\n      [disabled]=\"disabled()\"\n      [readonly]=\"readonly()\"\n      [required]=\"required()\"\n      [value]=\"value()\"\n      (input)=\"handleInput($event)\"\n      (keydown)=\"handleKeydown($event)\"\n      (focus)=\"handleFocus()\"\n      (blur)=\"handleBlur()\"\n      [attr.data-state]=\"state()\"\n    />\n\n    @if (iconEnd()) {\n      <i class=\"ph ph-{{ iconEnd() }}\" aria-hidden=\"true\"></i>\n    }\n\n    @if (type() === 'password') {\n      <button\n        type=\"button\"\n        class=\"password-toggle\"\n        (click)=\"togglePasswordVisibility()\"\n        [attr.aria-label]=\"passwordToggleLabel()\"\n        [disabled]=\"disabled() || readonly()\"\n      >\n        <i \n          [class]=\"'ph ph-' + (passwordVisible() ? 'eye-slash' : 'eye')\"\n          aria-hidden=\"true\"\n        ></i>\n      </button>\n    }\n\n    @if (loading()) {\n      <div class=\"input-loader\" aria-hidden=\"true\">\n        <div class=\"loader\"></div>\n      </div>\n    }\n\n    @if (showSuggestions()) {\n      <div class=\"suggestions-list\" role=\"listbox\">\n        @for (suggestion of filteredSuggestions(); track suggestion; let i = $index) {\n          <div \n            class=\"suggestion-item\"\n            [class.focused]=\"i === focusedSuggestionIndex()\"\n            role=\"option\"\n            [attr.aria-selected]=\"i === focusedSuggestionIndex()\"\n            (click)=\"handleSuggestionClick(suggestion)\"\n            (mouseenter)=\"focusedSuggestionIndex.set(i)\"\n          >\n            {{ suggestion }}\n          </div>\n        }\n      </div>\n    }\n  </div>\n\n  @if (error()) {\n    <div id=\"error-message\" class=\"input-error\" role=\"alert\">\n      <ng-content select=\"[input-error]\">\n        {{ error() }}\n      </ng-content>\n    </div>\n  }\n\n  @if (success()) {\n    <div id=\"success-message\" class=\"input-success\" role=\"status\">\n      <ng-content select=\"[input-success]\">\n        {{ success() }}\n      </ng-content>\n    </div>\n  }\n\n  @if (hint()) {\n    <div id=\"hint-message\" class=\"input-hint\">\n      <ng-content select=\"[input-hint]\">\n        {{ hint() }}\n      </ng-content>\n    </div>\n  }\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%}.input-label{display:block;color:var(--text-color);font-size:.875rem;font-weight:500;margin-bottom:.25rem;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:.0625rem 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;border:.125rem solid var(--surface-border)}:host.filled input{background:var(--surface-ground);border:.0625rem solid transparent}: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{left:1rem}.input-wrapper i:last-of-type{right:1rem}.password-toggle{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);background:transparent;border:none;color:var(--text-color-secondary);cursor:pointer;padding:.25rem;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;margin-top:.25rem}.input-error{color:var(--danger-color)}.input-success{color:var(--success-color)}.input-hint{color:var(--text-color-secondary)}@keyframes spin{to{transform:translateY(-50%) rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PshInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'psh-input', imports: [CommonModule], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => PshInputComponent),
+                            useExisting: PshInputComponent,
                             multi: true
                         }
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div \n  class=\"input-container\"\n  [class.full-width]=\"fullWidth()\"\n  [class.small]=\"size() === 'small'\"\n  [class.large]=\"size() === 'large'\"\n  [class.error]=\"!!error()\"\n  [class.success]=\"!!success()\"\n  [class.disabled]=\"disabled()\"\n  [class.readonly]=\"readonly()\"\n  [class.loading]=\"loading()\"\n  [class.focused]=\"focused()\"\n  [class.has-start-icon]=\"!!iconStart()\"\n  [class.has-end-icon]=\"!!iconEnd() || type() === 'password'\"\n  [class.outlined]=\"variant() === 'outlined'\"\n  [class.filled]=\"variant() === 'filled'\"\n>\n  <!-- Label slot -->\n  @if (showLabel()) {\n    <label class=\"input-label\" [for]=\"inputId\" (click)=\"focusSelect()\" [class.required]=\"required()\">\n      <ng-content select=\"[input-label]\"></ng-content>\n      @if (!hasLabelContent()) {\n        {{ label() }}\n      }\n    </label>\n  }\n\n  <div class=\"input-wrapper\">\n    @if (iconStart()) {\n      <i class=\"ph ph-{{ iconStart() }}\" aria-hidden=\"true\"></i>\n    }\n\n    <input\n      [id]=\"inputId\"\n      [type]=\"effectiveType()\"\n      [attr.placeholder]=\"placeholder()\"\n      [attr.aria-label]=\"computedAriaLabel()\"\n      [attr.aria-invalid]=\"!!error()\"\n      [attr.aria-required]=\"required()\"\n      [attr.aria-describedby]=\"error() ? 'error-message' : success() ? 'success-message' : hint() ? 'hint-message' : null\"\n      [disabled]=\"disabled()\"\n      [readonly]=\"readonly()\"\n      [required]=\"required()\"\n      [value]=\"value()\"\n      (input)=\"handleInput($event)\"\n      (keydown)=\"handleKeydown($event)\"\n      (focus)=\"handleFocus()\"\n      (blur)=\"handleBlur()\"\n      [attr.data-state]=\"state()\"\n    />\n\n    @if (iconEnd()) {\n      <i class=\"ph ph-{{ iconEnd() }}\" aria-hidden=\"true\"></i>\n    }\n\n    @if (type() === 'password') {\n      <button\n        type=\"button\"\n        class=\"password-toggle\"\n        (click)=\"togglePasswordVisibility()\"\n        [attr.aria-label]=\"passwordToggleLabel()\"\n        [disabled]=\"disabled() || readonly()\"\n      >\n        <i \n          [class]=\"'ph ph-' + (passwordVisible() ? 'eye-slash' : 'eye')\"\n          aria-hidden=\"true\"\n        ></i>\n      </button>\n    }\n\n    @if (loading()) {\n      <div class=\"input-loader\" aria-hidden=\"true\">\n        <div class=\"loader\"></div>\n      </div>\n    }\n\n    @if (showSuggestions()) {\n      <div class=\"suggestions-list\" role=\"listbox\">\n        @for (suggestion of filteredSuggestions(); track suggestion; let i = $index) {\n          <div \n            class=\"suggestion-item\"\n            [class.focused]=\"i === focusedSuggestionIndex()\"\n            role=\"option\"\n            [attr.aria-selected]=\"i === focusedSuggestionIndex()\"\n            (click)=\"handleSuggestionClick(suggestion)\"\n            (mouseenter)=\"focusedSuggestionIndex.set(i)\"\n          >\n            {{ suggestion }}\n          </div>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- Error message slot -->\n  @if (error()) {\n    <div id=\"error-message\" class=\"input-error\" role=\"alert\">\n      <ng-content select=\"[input-error]\">\n        {{ error() }}\n      </ng-content>\n    </div>\n  }\n\n  <!-- Success message slot -->\n  @if (success()) {\n    <div id=\"success-message\" class=\"input-success\" role=\"status\">\n      <ng-content select=\"[input-success]\">\n        {{ success() }}\n      </ng-content>\n    </div>\n  }\n\n  <!-- Hint message slot -->\n  @if (hint()) {\n    <div id=\"hint-message\" class=\"input-hint\">\n      <ng-content select=\"[input-hint]\">\n        {{ hint() }}\n      </ng-content>\n    </div>\n  }\n</div>", styles: [".input-container{position:relative;width:100%;max-width:300px}.input-container.full-width{max-width:none}.input-label{display:block;color:var(--text-color);font-size:var(--font-size-sm);font-weight:500;margin-bottom:var(--spacing-xs);width:100%;cursor:pointer}.input-label.required:after{content:\"*\";color:var(--danger-color);margin-left:var(--spacing-xxs)}.input-wrapper{position:relative;display:flex;align-items:center;width:100%}input{width:100%;height:var(--height-input-md);padding:0 var(--spacing-md);font-family:inherit;font-size:var(--font-size-base);color:var(--text-color);background:var(--surface-0);border:var(--border-width-1) 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 var(--focus-ring-width) var(--focus-ring-color)}.input-container.outlined input{background:transparent;border:var(--border-width-2) solid var(--surface-border)}.input-container.outlined input:hover:not(:disabled):not(:focus){border-color:var(--primary-color)}.input-container.outlined input:focus{border-color:var(--primary-color);box-shadow:0 0 0 var(--focus-ring-width) var(--focus-ring-color)}.input-container.filled input{background:var(--surface-ground);border:var(--border-width-1) solid transparent}.input-container.filled input:hover:not(:disabled):not(:focus){background:var(--surface-hover)}.input-container.filled input:focus{background:var(--surface-0);border-color:var(--primary-color);box-shadow:0 0 0 var(--focus-ring-width) var(--focus-ring-color)}.input-container.error input{border-color:var(--danger-color)}.input-container.error input:focus{box-shadow:0 0 0 var(--focus-ring-width) var(--focus-ring-error)}.input-container.success input{border-color:var(--success-color)}.input-container.success input:focus{box-shadow:0 0 0 var(--focus-ring-width) var(--focus-ring-success)}.input-container.disabled input{background:var(--surface-ground);cursor:not-allowed;opacity:var(--opacity-disabled)}.input-container.readonly input{background:var(--surface-ground);cursor:default}.input-container.has-start-icon input{padding-left:calc(var(--spacing-md) * 2 + 1rem)}.input-container.has-end-icon input{padding-right:calc(var(--spacing-md) * 2 + 1rem)}.input-wrapper i{position:absolute;font-size:var(--icon-size-md);color:var(--text-color-secondary);pointer-events:none}.input-wrapper i:first-child{left:var(--spacing-md)}.input-wrapper i:last-child{right:var(--spacing-md)}.password-toggle{position:absolute;right:var(--spacing-md);background:transparent;border:none;color:var(--text-color-secondary);cursor:pointer;padding:var(--spacing-xs);border-radius:var(--border-radius);display:flex;align-items:center;justify-content:center;transition:all .2s ease}.password-toggle:hover{background:var(--surface-hover);color:var(--text-color)}.password-toggle:focus{outline:none;box-shadow:0 0 0 var(--focus-ring-width) var(--focus-ring-color)}.password-toggle i{font-size:var(--icon-size-md);position:static;pointer-events:auto}.input-container.small input{height:var(--height-input-sm);padding:0 var(--spacing-md);font-size:var(--font-size-sm)}.input-container.large input{height:var(--height-input-lg);padding:0 var(--spacing-lg);font-size:var(--font-size-lg)}.input-error,.input-success,.input-hint{font-size:var(--font-size-sm);margin-top:var(--spacing-xs)}.input-error{color:var(--danger-color);display:flex;align-items:center;gap:var(--spacing-xs)}.input-error i{font-size:var(--icon-size-sm)}.input-success{color:var(--success-color)}.input-hint{color:var(--text-color-secondary)}.input-loader{position:absolute;right:var(--spacing-md);display:flex;align-items:center;justify-content:center}.loader{width:var(--icon-size-sm);height:var(--icon-size-sm);border:var(--border-width-2) 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:var(--border-width-1) solid var(--surface-border);border-radius:var(--border-radius);box-shadow:var(--shadow-lg);z-index:var(--z-index-dropdown);max-height:var(--size-48);overflow-y:auto;margin-top:var(--spacing-xs)}.suggestion-item{padding:var(--spacing-sm) var(--spacing-md);cursor:pointer;transition:all var(--animation-duration-default) var(--animation-easing-default);color:var(--text-color)}.suggestion-item:hover,.suggestion-item.focused{background:var(--surface-hover);color:var(--primary-color)}@keyframes spin{to{transform:rotate(360deg)}}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class.full-width]': 'fullWidth()',
+                        '[class.small]': 'size() === "small"',
+                        '[class.large]': 'size() === "large"',
+                        '[class.error]': '!!error()',
+                        '[class.success]': '!!success()',
+                        '[class.disabled]': 'disabled()',
+                        '[class.readonly]': 'readonly()',
+                        '[class.loading]': 'loading()',
+                        '[class.focused]': 'focused()',
+                        '[class.has-start-icon]': '!!iconStart()',
+                        '[class.has-end-icon]': '!!iconEnd() || type() === "password"',
+                        '[class.outlined]': 'variant() === "outlined"',
+                        '[class.filled]': 'variant() === "filled"',
+                    }, template: "<div class=\"input-container\">\n  @if (showLabel()) {\n    <label \n      class=\"input-label\" \n      [for]=\"inputId\" \n      (click)=\"focusSelect()\" \n      [class.required]=\"required()\"\n    >\n      <ng-content select=\"[input-label]\"></ng-content>\n      @if (!hasLabelContent()) {\n        {{ label() }}\n      }\n    </label>\n  }\n\n  <div class=\"input-wrapper\">\n    @if (iconStart()) {\n      <i class=\"ph ph-{{ iconStart() }}\" aria-hidden=\"true\"></i>\n    }\n\n    <input\n      [id]=\"inputId\"\n      [type]=\"effectiveType()\"\n      [attr.placeholder]=\"placeholder()\"\n      [attr.aria-label]=\"computedAriaLabel()\"\n      [attr.aria-invalid]=\"!!error()\"\n      [attr.aria-required]=\"required()\"\n      [attr.aria-describedby]=\"error() ? 'error-message' : success() ? 'success-message' : hint() ? 'hint-message' : null\"\n      [disabled]=\"disabled()\"\n      [readonly]=\"readonly()\"\n      [required]=\"required()\"\n      [value]=\"value()\"\n      (input)=\"handleInput($event)\"\n      (keydown)=\"handleKeydown($event)\"\n      (focus)=\"handleFocus()\"\n      (blur)=\"handleBlur()\"\n      [attr.data-state]=\"state()\"\n    />\n\n    @if (iconEnd()) {\n      <i class=\"ph ph-{{ iconEnd() }}\" aria-hidden=\"true\"></i>\n    }\n\n    @if (type() === 'password') {\n      <button\n        type=\"button\"\n        class=\"password-toggle\"\n        (click)=\"togglePasswordVisibility()\"\n        [attr.aria-label]=\"passwordToggleLabel()\"\n        [disabled]=\"disabled() || readonly()\"\n      >\n        <i \n          [class]=\"'ph ph-' + (passwordVisible() ? 'eye-slash' : 'eye')\"\n          aria-hidden=\"true\"\n        ></i>\n      </button>\n    }\n\n    @if (loading()) {\n      <div class=\"input-loader\" aria-hidden=\"true\">\n        <div class=\"loader\"></div>\n      </div>\n    }\n\n    @if (showSuggestions()) {\n      <div class=\"suggestions-list\" role=\"listbox\">\n        @for (suggestion of filteredSuggestions(); track suggestion; let i = $index) {\n          <div \n            class=\"suggestion-item\"\n            [class.focused]=\"i === focusedSuggestionIndex()\"\n            role=\"option\"\n            [attr.aria-selected]=\"i === focusedSuggestionIndex()\"\n            (click)=\"handleSuggestionClick(suggestion)\"\n            (mouseenter)=\"focusedSuggestionIndex.set(i)\"\n          >\n            {{ suggestion }}\n          </div>\n        }\n      </div>\n    }\n  </div>\n\n  @if (error()) {\n    <div id=\"error-message\" class=\"input-error\" role=\"alert\">\n      <ng-content select=\"[input-error]\">\n        {{ error() }}\n      </ng-content>\n    </div>\n  }\n\n  @if (success()) {\n    <div id=\"success-message\" class=\"input-success\" role=\"status\">\n      <ng-content select=\"[input-success]\">\n        {{ success() }}\n      </ng-content>\n    </div>\n  }\n\n  @if (hint()) {\n    <div id=\"hint-message\" class=\"input-hint\">\n      <ng-content select=\"[input-hint]\">\n        {{ hint() }}\n      </ng-content>\n    </div>\n  }\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%}.input-label{display:block;color:var(--text-color);font-size:.875rem;font-weight:500;margin-bottom:.25rem;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:.0625rem 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;border:.125rem solid var(--surface-border)}:host.filled input{background:var(--surface-ground);border:.0625rem solid transparent}: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{left:1rem}.input-wrapper i:last-of-type{right:1rem}.password-toggle{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);background:transparent;border:none;color:var(--text-color-secondary);cursor:pointer;padding:.25rem;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;margin-top:.25rem}.input-error{color:var(--danger-color)}.input-success{color:var(--success-color)}.input-hint{color:var(--text-color-secondary)}@keyframes spin{to{transform:translateY(-50%) 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"] }] } });
 
 const TOOLTIP_CONFIG = new InjectionToken('TOOLTIP_CONFIG', {
@@ -2865,10 +2839,11 @@ class PshSelectComponent {
         this.elementRef = inject(ElementRef);
         this.cdr = inject(ChangeDetectorRef);
         this.destroyRef = inject(DestroyRef);
-        this.selectId = `select-${Math.random().toString(36).substring(2, 11)}`;
+        this.selectId = `psh-sel-${Math.random().toString(36).substring(2, 11)}`;
         this.value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
         this.disabled = model(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
         this.touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : []));
+        // Rétablissement de l'API complète pour la démo
         this.size = input('medium', ...(ngDevMode ? [{ debugName: "size" }] : []));
         this.searchable = input(false, ...(ngDevMode ? [{ debugName: "searchable" }] : []));
         this.multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple" }] : []));
@@ -2878,14 +2853,9 @@ class PshSelectComponent {
         this.required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : []));
         this.options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
         this.label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
-        this.ariaLabel = input(null, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
         this.placeholder = input('Sélectionner une option', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
         this.multiplePlaceholder = input('Sélectionner des options', ...(ngDevMode ? [{ debugName: "multiplePlaceholder" }] : []));
-        this.error = input('', ...(ngDevMode ? [{ debugName: "error" }] : []));
-        this.success = input('', ...(ngDevMode ? [{ debugName: "success" }] : []));
-        this.hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : []));
-        this.maxSelections = input(undefined, ...(ngDevMode ? [{ debugName: "maxSelections" }] : []));
-        this.minSelections = input(undefined, ...(ngDevMode ? [{ debugName: "minSelections" }] : []));
+        this.error = input(undefined, ...(ngDevMode ? [{ debugName: "error" }] : []));
         this.compareWith = input((a, b) => a === b, ...(ngDevMode ? [{ debugName: "compareWith" }] : []));
         this.searchConfig = input({
             debounceTime: 300,
@@ -2894,27 +2864,26 @@ class PshSelectComponent {
         }, ...(ngDevMode ? [{ debugName: "searchConfig" }] : []));
         this.isOpenSignal = signal(false, ...(ngDevMode ? [{ debugName: "isOpenSignal" }] : []));
         this.searchTermSignal = signal('', ...(ngDevMode ? [{ debugName: "searchTermSignal" }] : []));
-        this.selectedLabelSignal = signal('', ...(ngDevMode ? [{ debugName: "selectedLabelSignal" }] : []));
-        this.focusedOptionIndex = signal(-1, ...(ngDevMode ? [{ debugName: "focusedOptionIndex" }] : []));
-        this.hasLabelContentSignal = signal(false, ...(ngDevMode ? [{ debugName: "hasLabelContentSignal" }] : []));
         this.initializedSignal = signal(false, ...(ngDevMode ? [{ debugName: "initializedSignal" }] : []));
-        this.activeDescendantId = signal(null, ...(ngDevMode ? [{ debugName: "activeDescendantId" }] : []));
         this.opened = output();
         this.closed = output();
+        this.searched = output(); // Émet une string, pas un Event
         this.scrollEnd = output();
-        this.searched = output();
         this.isOpen = computed(() => this.isOpenSignal(), ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
         this.searchTerm = computed(() => this.searchTermSignal(), ...(ngDevMode ? [{ debugName: "searchTerm" }] : []));
-        this.hasLabelContent = computed(() => this.hasLabelContentSignal(), ...(ngDevMode ? [{ debugName: "hasLabelContent" }] : []));
-        this.activeDescendant = computed(() => this.activeDescendantId(), ...(ngDevMode ? [{ debugName: "activeDescendant" }] : []));
-        this.computedAriaLabel = computed(() => {
-            return this.ariaLabel() || this.label() || this.placeholder();
-        }, ...(ngDevMode ? [{ debugName: "computedAriaLabel" }] : []));
+        this.state = computed(() => this.disabled() ? 'disabled' : this.error() ? 'error' : 'default', ...(ngDevMode ? [{ debugName: "state" }] : []));
         this.selectedLabel = computed(() => {
-            if (!this.initializedSignal() || !this.hasValue()) {
+            const currentValue = this.value();
+            const currentOptions = this.flattenOptions(this.options());
+            if (!this.initializedSignal() || (currentValue === null || currentValue === undefined)) {
                 return this.multiple() ? this.multiplePlaceholder() : this.placeholder();
             }
-            return this.selectedLabelSignal() || (this.multiple() ? this.multiplePlaceholder() : this.placeholder());
+            if (this.multiple() && Array.isArray(currentValue)) {
+                const selected = currentOptions.filter(opt => currentValue.some(v => this.compareWith()(v, opt.value)));
+                return selected.length > 0 ? selected.map(o => o.label).join(', ') : this.multiplePlaceholder();
+            }
+            const selected = currentOptions.find(opt => this.compareWith()(opt.value, currentValue));
+            return selected ? selected.label : this.placeholder();
         }, ...(ngDevMode ? [{ debugName: "selectedLabel" }] : []));
         this.filteredOptions = computed(() => {
             const term = this.searchTermSignal().toLowerCase();
@@ -2923,349 +2892,115 @@ class PshSelectComponent {
                 return opts;
             return opts.map(opt => {
                 if (this.isOptionGroup(opt)) {
-                    const filteredOptions = opt.options.filter(o => o.label.toLowerCase().includes(term) ||
-                        o.description?.toLowerCase().includes(term));
-                    return filteredOptions.length > 0 ? { ...opt, options: filteredOptions } : null;
+                    const filtered = opt.options.filter(o => o.label.toLowerCase().includes(term));
+                    return filtered.length > 0 ? { ...opt, options: filtered } : null;
                 }
-                return opt.label.toLowerCase().includes(term) ||
-                    opt.description?.toLowerCase().includes(term)
-                    ? opt
-                    : null;
+                return opt.label.toLowerCase().includes(term) ? opt : null;
             }).filter((opt) => opt !== null);
         }, ...(ngDevMode ? [{ debugName: "filteredOptions" }] : []));
         this.onChange = (_) => { };
         this.onTouched = () => { };
         const clickHandler = (event) => {
-            if (this.isOpen()) {
-                const target = event.target;
-                if (!this.elementRef.nativeElement.contains(target)) {
-                    this.close();
-                }
+            if (this.isOpen() && !this.elementRef.nativeElement.contains(event.target)) {
+                this.close();
             }
         };
         document.addEventListener('click', clickHandler);
-        this.destroyRef.onDestroy(() => {
-            document.removeEventListener('click', clickHandler);
-        });
+        this.destroyRef.onDestroy(() => document.removeEventListener('click', clickHandler));
     }
     ngAfterContentInit() {
-        Promise.resolve().then(() => {
-            const hasLabel = !!this.elementRef.nativeElement.querySelector('[select-label]');
-            this.hasLabelContentSignal.set(hasLabel);
-            this.initializedSignal.set(true);
-            this.cdr.markForCheck();
-        });
-    }
-    handleKeyDown(event) {
-        if (this.disabled() || this.loading())
-            return;
-        switch (event.key) {
-            case 'Enter':
-            case ' ':
-                event.preventDefault();
-                if (!this.isOpen()) {
-                    this.toggle();
-                }
-                else if (this.focusedOptionIndex() >= 0) {
-                    const options = this.flattenOptions(this.filteredOptions());
-                    const option = options[this.focusedOptionIndex()];
-                    if (option)
-                        this.select(option);
-                }
-                break;
-            case 'ArrowDown':
-                event.preventDefault();
-                if (!this.isOpen()) {
-                    this.toggle();
-                }
-                else {
-                    this.focusNextOption();
-                }
-                break;
-            case 'ArrowUp':
-                event.preventDefault();
-                if (this.isOpen()) {
-                    this.focusPreviousOption();
-                }
-                break;
-            case 'Escape':
-                if (this.isOpen()) {
-                    event.preventDefault();
-                    this.close();
-                }
-                break;
-            case 'Tab':
-                if (this.isOpen()) {
-                    this.close();
-                }
-                break;
-            case 'Home':
-                if (this.isOpen()) {
-                    event.preventDefault();
-                    this.focusFirstOption();
-                }
-                break;
-            case 'End':
-                if (this.isOpen()) {
-                    event.preventDefault();
-                    this.focusLastOption();
-                }
-                break;
-        }
-    }
-    handleOptionKeyDown(event, option) {
-        switch (event.key) {
-            case 'Enter':
-            case ' ':
-                event.preventDefault();
-                this.select(option);
-                break;
-            case 'Escape':
-                event.preventDefault();
-                this.close();
-                break;
-        }
-    }
-    focusNextOption() {
-        const options = this.flattenOptions(this.filteredOptions());
-        if (options.length === 0)
-            return;
-        const currentIndex = this.focusedOptionIndex();
-        const nextIndex = currentIndex < options.length - 1 ? currentIndex + 1 : 0;
-        this.focusedOptionIndex.set(nextIndex);
-        const nextOption = options[nextIndex];
-        if (nextOption) {
-            this.updateActiveDescendant(nextOption);
-        }
-        this.scrollOptionIntoView();
-    }
-    focusPreviousOption() {
-        const options = this.flattenOptions(this.filteredOptions());
-        if (options.length === 0)
-            return;
-        const currentIndex = this.focusedOptionIndex();
-        const previousIndex = currentIndex > 0 ? currentIndex - 1 : options.length - 1;
-        this.focusedOptionIndex.set(previousIndex);
-        const prevOption = options[previousIndex];
-        if (prevOption) {
-            this.updateActiveDescendant(prevOption);
-        }
-        this.scrollOptionIntoView();
-    }
-    focusFirstOption() {
-        const options = this.flattenOptions(this.filteredOptions());
-        if (options.length === 0)
-            return;
-        this.focusedOptionIndex.set(0);
-        const firstOption = options[0];
-        if (firstOption) {
-            this.updateActiveDescendant(firstOption);
-        }
-        this.scrollOptionIntoView();
-    }
-    focusLastOption() {
-        const options = this.flattenOptions(this.filteredOptions());
-        if (options.length === 0)
-            return;
-        const lastIndex = options.length - 1;
-        this.focusedOptionIndex.set(lastIndex);
-        const lastOption = options[lastIndex];
-        if (lastOption) {
-            this.updateActiveDescendant(lastOption);
-        }
-        this.scrollOptionIntoView();
-    }
-    scrollOptionIntoView() {
-        requestAnimationFrame(() => {
-            const activeId = this.activeDescendantId();
-            if (activeId) {
-                const option = this.elementRef.nativeElement.querySelector(`#${activeId}`);
-                if (option) {
-                    option.scrollIntoView({ block: 'nearest' });
-                }
-            }
-        });
-    }
-    updateActiveDescendant(option) {
-        const optionId = `${this.selectId}-option-${String(option.value)}`;
-        this.activeDescendantId.set(optionId);
-        this.cdr.markForCheck();
-    }
-    isFocused(option) {
-        const activeId = this.activeDescendantId();
-        if (!activeId)
-            return false;
-        const optionId = `${this.selectId}-option-${String(option.value)}`;
-        return activeId === optionId;
+        this.initializedSignal.set(true);
     }
     writeValue(value) {
-        this.initializedSignal.set(true);
         this.value.set(value);
-        this.updateSelectedLabel();
+        this.initializedSignal.set(true);
         this.cdr.markForCheck();
     }
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
-    }
-    setDisabledState(isDisabled) {
-        this.disabled.set(isDisabled);
-    }
-    isOptionGroup(option) {
-        return 'options' in option;
-    }
-    getOptionKey(option) {
-        return this.isOptionGroup(option) ? `group-${option.label}` : `option-${String(option.value)}`;
-    }
-    hasValue() {
-        const currentValue = this.value();
-        if (this.multiple()) {
-            return Array.isArray(currentValue) && currentValue.length > 0;
-        }
-        return currentValue !== null && currentValue !== undefined;
-    }
-    focus() {
-        const trigger = this.elementRef.nativeElement.querySelector('.select-trigger');
-        if (trigger) {
-            trigger.focus();
-        }
+    registerOnChange(fn) { this.onChange = fn; }
+    registerOnTouched(fn) { this.onTouched = fn; }
+    setDisabledState(isDisabled) { this.disabled.set(isDisabled); }
+    toggle() {
+        if (this.disabled() || this.loading())
+            return;
+        this.isOpenSignal.update(v => !v);
+        this.isOpen() ? this.opened.emit() : this.closed.emit();
     }
-    focusSelect() {
-        this.focus();
+    close() {
+        this.isOpenSignal.set(false);
+        this.searchTermSignal.set('');
     }
     select(option) {
-        if (!this.disabled() && !option.disabled) {
-            this.activeDescendantId.set(null);
-            if (this.multiple()) {
-                const currentValue = this.value();
-                const values = Array.isArray(currentValue) ? [...currentValue] : [];
-                const index = values.findIndex(v => this.compareWith()(v, option.value));
-                let changed = false;
-                if (index === -1) {
-                    const maxSelections = this.maxSelections();
-                    if (!maxSelections || values.length < maxSelections) {
-                        values.push(option.value);
-                        changed = true;
-                    }
-                }
-                else {
-                    const minSelections = this.minSelections();
-                    if (!minSelections || values.length > minSelections) {
-                        values.splice(index, 1);
-                        changed = true;
-                    }
-                }
-                if (changed) {
-                    this.value.set(values);
-                    this.onChange(values);
-                    this.updateSelectedLabel();
-                }
-            }
-            else {
-                this.value.set(option.value);
-                this.onChange(option.value);
-                this.updateSelectedLabel();
-                this.close();
-            }
-            this.onTouched();
-            this.touched.set(true);
-        }
-    }
-    isSelected(option) {
-        const currentValue = this.value();
-        if (this.multiple() && Array.isArray(currentValue)) {
-            return currentValue.some(v => this.compareWith()(v, option.value));
-        }
-        return currentValue !== null && this.compareWith()(currentValue, option.value);
-    }
-    toggle() {
-        if (!this.disabled() && !this.loading()) {
-            const newValue = !this.isOpenSignal();
-            this.isOpenSignal.set(newValue);
-            if (newValue) {
-                this.opened.emit();
+        if (this.disabled() || option.disabled)
+            return;
+        if (this.multiple()) {
+            const current = Array.isArray(this.value()) ? [...this.value()] : [];
+            const index = current.findIndex(v => this.compareWith()(v, option.value));
+            if (index === -1) {
+                current.push(option.value);
             }
             else {
-                this.activeDescendantId.set(null);
-                this.closed.emit();
+                current.splice(index, 1);
             }
+            this.value.set(current);
+            this.onChange(current);
         }
-    }
-    close() {
-        if (this.isOpenSignal()) {
-            this.isOpenSignal.set(false);
-            this.focusedOptionIndex.set(-1);
-            this.activeDescendantId.set(null);
-            this.searchTermSignal.set('');
-            this.closed.emit();
+        else {
+            this.value.set(option.value);
+            this.onChange(option.value);
+            this.close();
         }
+        this.onTouched();
+        this.touched.set(true);
     }
     clear(event) {
         event.stopPropagation();
-        if (!this.disabled() && !this.loading()) {
-            const newValue = this.multiple() ? [] : null;
-            this.value.set(newValue);
-            this.onChange(newValue);
-            this.updateSelectedLabel();
-            this.onTouched();
-            this.touched.set(true);
-        }
+        this.value.set(this.multiple() ? [] : null);
+        this.onChange(this.value());
     }
     onSearch(event) {
         const term = event.target.value;
         this.searchTermSignal.set(term);
-        if (term.length >= (this.searchConfig().minLength ?? 1)) {
-            this.searched.emit(term);
-        }
+        this.searched.emit(term);
     }
     onScroll(event) {
-        const element = event.target;
-        if (element.scrollHeight - element.scrollTop === element.clientHeight) {
+        const el = event.target;
+        if (el.scrollHeight - el.scrollTop === el.clientHeight) {
             this.scrollEnd.emit();
         }
     }
-    updateSelectedLabel() {
-        const currentValue = this.value();
-        const currentOptions = this.flattenOptions(this.options());
-        if (this.multiple() && Array.isArray(currentValue)) {
-            const selected = currentOptions.filter(opt => currentValue.some(v => this.compareWith()(v, opt.value)));
-            if (selected.length > 0) {
-                const labels = selected.map(opt => opt.label);
-                this.selectedLabelSignal.set(labels.join(', '));
-            }
-            else {
-                this.selectedLabelSignal.set('');
-            }
-        }
-        else {
-            const selected = currentOptions.find(opt => currentValue !== null && this.compareWith()(opt.value, currentValue));
-            if (selected) {
-                this.selectedLabelSignal.set(selected.label);
-            }
-            else {
-                this.selectedLabelSignal.set('');
-            }
+    isOptionGroup(item) {
+        return 'options' in item;
+    }
+    getOptionKey(item) {
+        return this.isOptionGroup(item) ? `g-${item.label}` : `o-${item.label}`;
+    }
+    isSelected(option) {
+        const val = this.value();
+        if (this.multiple() && Array.isArray(val)) {
+            return val.some(v => this.compareWith()(v, option.value));
         }
-        this.cdr.markForCheck();
+        return val !== null && this.compareWith()(val, option.value);
+    }
+    hasValue() {
+        const val = this.value();
+        if (this.multiple())
+            return Array.isArray(val) && val.length > 0;
+        return val !== null && val !== undefined;
     }
     flattenOptions(options) {
-        return options.reduce((acc, opt) => {
-            if (this.isOptionGroup(opt)) {
-                return [...acc, ...opt.options];
-            }
-            return [...acc, opt];
-        }, []);
+        return options.reduce((acc, opt) => this.isOptionGroup(opt) ? [...acc, ...opt.options] : [...acc, opt], []);
+    }
+    focusSelect() {
+        this.elementRef.nativeElement.querySelector('.select-trigger')?.focus();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PshSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: PshSelectComponent, isStandalone: true, selector: "psh-select", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, multiplePlaceholder: { classPropertyName: "multiplePlaceholder", publicName: "multiplePlaceholder", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, success: { classPropertyName: "success", publicName: "success", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, maxSelections: { classPropertyName: "maxSelections", publicName: "maxSelections", isSignal: true, isRequired: false, transformFunction: null }, minSelections: { classPropertyName: "minSelections", publicName: "minSelections", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, searchConfig: { classPropertyName: "searchConfig", publicName: "searchConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", disabled: "disabledChange", touched: "touchedChange", opened: "opened", closed: "closed", scrollEnd: "scrollEnd", searched: "searched" }, host: { properties: { "class.full-width": "fullWidth()", "class.small": "size() === \"small\"", "class.large": "size() === \"large\"", "class.error": "!!error()", "class.success": "!!success()", "class.disabled": "disabled()", "class.loading": "loading()" } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: PshSelectComponent, isStandalone: true, selector: "psh-select", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, multiplePlaceholder: { classPropertyName: "multiplePlaceholder", publicName: "multiplePlaceholder", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, searchConfig: { classPropertyName: "searchConfig", publicName: "searchConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", disabled: "disabledChange", touched: "touchedChange", opened: "opened", closed: "closed", searched: "searched", scrollEnd: "scrollEnd" }, host: { properties: { "class.select-full-width": "fullWidth()", "class.select-small": "size() === \"small\"", "class.select-large": "size() === \"large\"", "class.select-error": "!!error()", "class.select-disabled": "disabled()", "class.select-loading": "loading()", "attr.aria-expanded": "isOpen().toString()", "attr.data-state": "state()" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: PshSelectComponent,
                 multi: true
             }
-        ], ngImport: i0, template: "<div class=\"select-container\">\n  <!-- Label slot -->\n  @if (label() || hasLabelContent()) {\n    <label class=\"select-label\" [for]=\"selectId\" (click)=\"focusSelect()\" [class.required]=\"!!required()\">\n      <ng-content select=\"[select-label]\" />\n      @if (!hasLabelContent()) {\n        {{ label() }}\n      }\n    </label>\n  }\n\n  <div class=\"select-trigger-wrapper\">\n    <div\n      class=\"select-trigger\"\n      [id]=\"selectId\"\n      role=\"combobox\"\n      aria-haspopup=\"listbox\"\n      [attr.aria-controls]=\"selectId + '-listbox'\"\n      [attr.aria-expanded]=\"isOpen()\"\n      [attr.aria-disabled]=\"disabled()\"\n      [attr.aria-busy]=\"loading() ? 'true' : null\"\n      [attr.aria-required]=\"required() ? 'true' : 'false'\"\n      [attr.aria-invalid]=\"!!error()\"\n      [attr.aria-label]=\"computedAriaLabel()\"\n      [attr.aria-describedby]=\"error() ? 'error-message' : success() ? 'success-message' : hint() ? 'hint-message' : null\"\n      [attr.aria-activedescendant]=\"activeDescendant()\"\n      [attr.tabindex]=\"disabled() || loading() ? -1 : 0\"\n      (click)=\"toggle()\"\n      (keydown)=\"handleKeyDown($event)\"\n    >\n      <div class=\"select-value\">\n        <span [class.placeholder]=\"!hasValue()\">{{ selectedLabel() }}</span>\n      </div>\n\n      <div class=\"select-actions\">\n        @if (clearable() && hasValue() && !loading()) {\n          <button\n            type=\"button\"\n            class=\"select-clear\"\n            (click)=\"clear($event)\"\n            [attr.aria-label]=\"'Effacer la s\u00E9lection'\"\n            [tabindex]=\"disabled() ? -1 : 0\"\n          >\n            <i class=\"ph ph-x\" aria-hidden=\"true\"></i>\n          </button>\n        }\n        @if (loading()) {\n          <div class=\"select-loader-trigger\" aria-hidden=\"true\"></div>\n        } @else {\n          <i\n            class=\"ph ph-caret-down select-arrow\"\n            [class.open]=\"isOpen()\"\n            aria-hidden=\"true\"\n          ></i>\n        }\n      </div>\n    </div>\n\n    @if (isOpen()) {\n      <div\n        class=\"select-dropdown\"\n        role=\"listbox\"\n        [id]=\"selectId + '-listbox'\"\n        [attr.aria-multiselectable]=\"multiple()\"\n      >\n        @if (searchable()) {\n          <div class=\"select-search\">\n            <input\n              type=\"text\"\n              [placeholder]=\"searchConfig().placeholder\"\n              [value]=\"searchTerm()\"\n              (input)=\"onSearch($event)\"\n              (click)=\"$event.stopPropagation()\"\n              [attr.aria-label]=\"searchConfig().placeholder\"\n            />\n          </div>\n        }\n\n        <div class=\"select-options\" (scroll)=\"onScroll($event)\">\n          @if (loading()) {\n            <div class=\"select-loading\">\n              <div class=\"select-loader\"></div>\n            </div>\n          } @else if (filteredOptions().length === 0) {\n            <div class=\"select-no-results\">\n              Aucun r\u00E9sultat\n            </div>\n          } @else {\n            @for (option of filteredOptions(); track getOptionKey(option)) {\n              @if (isOptionGroup(option)) {\n                <div class=\"select-group\">\n                  <div class=\"select-group-label\">{{ option.label }}</div>\n                  @for (groupOption of option.options; track getOptionKey(groupOption)) {\n                    <div\n                      class=\"select-option\"\n                      role=\"option\"\n                      [class.selected]=\"isSelected(groupOption)\"\n                      [class.focused]=\"isFocused(groupOption)\"\n                      [class.disabled]=\"option.disabled || groupOption.disabled\"\n                      [attr.aria-selected]=\"isSelected(groupOption)\"\n                      [attr.aria-disabled]=\"(option.disabled || groupOption.disabled) || null\"\n                      [attr.id]=\"selectId + '-option-' + groupOption.value\"\n                      [attr.tabindex]=\"option.disabled || groupOption.disabled ? -1 : 0\"\n                      (click)=\"!option.disabled && select(groupOption)\"\n                      (keydown)=\"handleOptionKeyDown($event, groupOption)\"\n                    >\n                      @if (multiple()) {\n                        <div class=\"select-checkbox\">\n                          <i class=\"ph ph-check\" aria-hidden=\"true\"></i>\n                        </div>\n                      }\n                      @if (groupOption.icon) {\n                        <i class=\"ph ph-{{ groupOption.icon }}\" aria-hidden=\"true\"></i>\n                      }\n                      <div class=\"option-content\">\n                        <div class=\"option-label\">{{ groupOption.label }}</div>\n                        @if (groupOption.description) {\n                          <div class=\"option-description\">{{ groupOption.description }}</div>\n                        }\n                      </div>\n                    </div>\n                  }\n                </div>\n              } @else {\n                <div\n                  class=\"select-option\"\n                  role=\"option\"\n                  [class.selected]=\"isSelected(option)\"\n                  [class.focused]=\"isFocused(option)\"\n                  [class.disabled]=\"option.disabled\"\n                  [attr.aria-selected]=\"isSelected(option)\"\n                  [attr.aria-disabled]=\"option.disabled || null\"\n                  [attr.id]=\"selectId + '-option-' + option.value\"\n                  [attr.tabindex]=\"option.disabled ? -1 : 0\"\n                  (click)=\"select(option)\"\n                  (keydown)=\"handleOptionKeyDown($event, option)\"\n                >\n                  @if (multiple()) {\n                    <div class=\"select-checkbox\">\n                      <i class=\"ph ph-check\" aria-hidden=\"true\"></i>\n                    </div>\n                  }\n                  @if (option.icon) {\n                    <i class=\"ph ph-{{ option.icon }}\" aria-hidden=\"true\"></i>\n                  }\n                  <div class=\"option-content\">\n                    <div class=\"option-label\">{{ option.label }}</div>\n                    @if (option.description) {\n                      <div class=\"option-description\">{{ option.description }}</div>\n                    }\n                  </div>\n                </div>\n              }\n            }\n          }\n        </div>\n      </div>\n    }\n  </div>\n\n  <!-- Error message slot -->\n  @if (error()) {\n    <div id=\"error-message\" class=\"select-error\" role=\"alert\">\n      <ng-content select=\"[select-error]\">\n        {{ error() }}\n      </ng-content>\n    </div>\n  }\n\n  <!-- Success message slot -->\n  @if (success()) {\n    <div id=\"success-message\" class=\"select-success\" role=\"status\">\n      <ng-content select=\"[select-success]\">\n        {{ success() }}\n      </ng-content>\n    </div>\n  }\n\n  <!-- Hint message slot -->\n  @if (hint()) {\n    <div id=\"hint-message\" class=\"select-hint\">\n      <ng-content select=\"[select-hint]\">\n        {{ hint() }}\n      </ng-content>\n    </div>\n  }\n</div>", styles: [":host{display:block;width:100%;max-width:var(--select-max-width)}:host(.full-width){max-width:none}.select-container{width:100%}.select-trigger-wrapper{position:relative;width:100%}.select-label{display:block;color:var(--text-color);font-size:var(--font-size-sm);font-weight:500;margin-bottom:var(--spacing-xs);width:100%;cursor:pointer}.select-label.required:after{content:\"*\";color:var(--danger-color);margin-left:var(--spacing-xxs)}.select-trigger{display:flex;align-items:center;width:100%;min-width:12rem;height:var(--height-input-md);padding:0 var(--spacing-md);background:var(--surface-card);border:var(--border-width-1) solid var(--surface-border);border-radius:var(--border-radius);cursor:pointer;transition:all var(--animation-duration-normal) var(--animation-easing-default);outline:none}.select-trigger:hover{border-color:var(--primary-color)}:host(.disabled) .select-trigger:hover,:host(.loading) .select-trigger:hover{border-color:var(--surface-border)}.select-trigger:focus-visible{border-color:var(--primary-color);box-shadow:0 0 0 .125rem rgba(var(--primary-color-rgb),.2)}.select-value{display:flex;align-items:center;gap:var(--spacing-xs);flex:1;min-width:0;margin-right:var(--spacing-sm)}.select-value span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text-color)}.select-value span.placeholder{color:var(--text-color-secondary)}.select-actions{display:flex;align-items:center;gap:var(--spacing-sm);flex-shrink:0}.select-arrow{transition:transform var(--animation-duration-normal) var(--animation-easing-default);font-size:var(--icon-size-sm);color:var(--text-color-secondary);flex-shrink:0}.select-arrow.open{transform:rotate(180deg)}.select-clear{display:flex;align-items:center;justify-content:center;width:var(--size-5);height:var(--size-5);padding:0;background:transparent;border:none;border-radius:50%;color:var(--text-color-secondary);cursor:pointer;transition:all var(--animation-duration-normal) var(--animation-easing-default);flex-shrink:0}.select-clear:hover{background:rgba(var(--danger-color-rgb),.1);color:var(--danger-color)}.select-dropdown{position:absolute;top:calc(100% + var(--spacing-xs));left:0;width:100%;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:1000;animation:fadeIn var(--animation-duration-normal) var(--animation-easing-default)}.select-search{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm);border-bottom:var(--border-width-1) solid var(--surface-border)}.select-search input{width:100%;padding:var(--spacing-xs) var(--spacing-sm);border:var(--border-width-1) solid var(--surface-border);border-radius:var(--border-radius);background:var(--surface-ground)}.select-search input:focus{outline:none;border-color:var(--primary-color)}.select-options{max-height:var(--dropdown-max-height);overflow-y:auto}.select-group{padding:var(--spacing-xs) 0}.select-group-label{padding:var(--spacing-xs) var(--spacing-md);color:var(--text-color-secondary);font-weight:500;font-size:var(--font-size-sm)}.select-option{display:flex;align-items:center;gap:var(--spacing-md);padding:var(--spacing-sm) var(--spacing-md);cursor:pointer;transition:all var(--animation-duration-normal) var(--animation-easing-default)}.select-option:hover:not(.disabled){background:var(--surface-hover)}.select-option.focused:not(.disabled){background:var(--surface-hover);outline:2px solid var(--primary-color);outline-offset:-2px}.select-option.selected{background:rgba(var(--primary-color-rgb),.1);color:var(--primary-color)}.select-option.selected.focused{background:rgba(var(--primary-color-rgb),.15);outline:2px solid var(--primary-color);outline-offset:-2px}.select-option.disabled{opacity:.6;cursor:not-allowed}.select-option i{font-size:var(--icon-size-md);color:var(--text-color-secondary);flex-shrink:0}.select-option.selected i{color:var(--primary-color)}.option-content{flex:1;min-width:0}.option-label{color:inherit;font-size:var(--font-size-base)}.option-description{color:var(--text-color-secondary);font-size:var(--font-size-sm);margin-top:var(--spacing-xs)}.select-checkbox{display:flex;align-items:center;justify-content:center;width:var(--select-checkbox-size);height:var(--select-checkbox-size);border:var(--border-width-2) solid var(--surface-border);border-radius:var(--border-radius);transition:all var(--animation-duration-normal) var(--animation-easing-default)}.selected .select-checkbox{background:var(--primary-gradient);border-color:var(--primary-color);color:var(--primary-color-text)}.select-no-results{padding:var(--spacing-md);text-align:center;color:var(--text-color-secondary)}.select-loading{padding:var(--spacing-md);text-align:center}.select-loader{width:var(--size-6);height:var(--size-6);border:var(--border-width-2) solid var(--surface-border);border-top-color:var(--primary-color);border-radius:50%;animation:spin var(--animation-duration-slow) linear infinite;margin:0 auto}.select-loader-trigger{width:var(--icon-size-sm);height:var(--icon-size-sm);border:var(--border-width-2) solid var(--surface-border);border-top-color:var(--primary-color);border-radius:50%;animation:spin var(--animation-duration-slow) linear infinite;flex-shrink:0}.select-error{margin-top:var(--spacing-xs);color:var(--danger-color);font-size:var(--font-size-sm)}.select-success{margin-top:var(--spacing-xs);color:var(--success-color);font-size:var(--font-size-sm)}.select-hint{font-size:var(--font-size-sm);color:var(--text-color-secondary);margin-top:var(--spacing-xs)}.virtual-scroll{position:relative;overflow:hidden}:host(.disabled) .select-trigger{background:var(--surface-ground);cursor:not-allowed;opacity:.6}:host(.loading) .select-trigger{cursor:wait;opacity:.7}:host(.error) .select-trigger{border-color:var(--danger-color)}:host(.success) .select-trigger{border-color:var(--success-color)}:host(.small) .select-trigger{height:var(--height-input-sm);font-size:var(--font-size-sm);padding:0 var(--spacing-sm)}:host(.small) .select-arrow{font-size:var(--icon-size-xs)}:host(.small) .select-value{margin-right:var(--spacing-xs)}:host(.small) .select-actions{gap:var(--spacing-xs)}:host(.small) .select-dropdown{font-size:var(--font-size-sm)}:host(.small) .select-search{padding:var(--spacing-xs)}:host(.small) .select-search input{padding:var(--spacing-xxs) var(--spacing-xs);font-size:var(--font-size-sm)}:host(.small) .select-option{padding:var(--spacing-xs) var(--spacing-sm);gap:var(--spacing-sm)}:host(.small) .select-option i{font-size:var(--icon-size-sm)}:host(.small) .option-label{font-size:var(--font-size-sm)}:host(.small) .option-description{font-size:var(--font-size-xs);margin-top:var(--spacing-xxs)}:host(.small) .select-group-label{padding:var(--spacing-xxs) var(--spacing-sm);font-size:var(--font-size-xs)}:host(.small) .select-checkbox{width:calc(var(--select-checkbox-size) * .85);height:calc(var(--select-checkbox-size) * .85)}:host(.large) .select-trigger{height:var(--height-input-lg);font-size:var(--font-size-lg);padding:0 var(--spacing-lg)}:host(.large) .select-arrow{font-size:var(--icon-size-md)}:host(.large) .select-value{margin-right:var(--spacing-md)}:host(.large) .select-actions{gap:var(--spacing-md)}:host(.large) .select-dropdown{font-size:var(--font-size-lg)}:host(.large) .select-search{padding:var(--spacing-md)}:host(.large) .select-search input{padding:var(--spacing-sm) var(--spacing-md);font-size:var(--font-size-lg)}:host(.large) .select-option{padding:var(--spacing-md) var(--spacing-lg);gap:var(--spacing-lg)}:host(.large) .select-option i{font-size:var(--icon-size-lg)}:host(.large) .option-label{font-size:var(--font-size-lg)}:host(.large) .option-description{font-size:var(--font-size-base);margin-top:var(--spacing-xs)}:host(.large) .select-group-label{padding:var(--spacing-sm) var(--spacing-lg);font-size:var(--font-size-base)}:host(.large) .select-checkbox{width:calc(var(--select-checkbox-size) * 1.15);height:calc(var(--select-checkbox-size) * 1.15)}@media(max-width:36em){:host{max-width:none}}@keyframes fadeIn{0%{opacity:0;transform:translateY(calc(-1 * var(--spacing-sm)))}to{opacity:1;transform:translateY(0)}}@keyframes spin{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], ngImport: i0, template: "<div class=\"select-container\">\n  @if (label()) {\n    <label class=\"select-label\" [attr.for]=\"selectId\" (click)=\"focusSelect()\">\n      {{ label() }}\n      @if (required()) { <span class=\"required-mark\">*</span> }\n    </label>\n  }\n\n  <div class=\"select-trigger\" [id]=\"selectId\" (click)=\"toggle()\" tabindex=\"0\">\n    <div class=\"select-value\">\n      <span [class.placeholder]=\"!hasValue()\">\n        {{ selectedLabel() }}\n      </span>\n    </div>\n    \n    <div class=\"select-actions\">\n      @if (clearable() && hasValue() && !disabled()) {\n        <button class=\"select-clear\" (click)=\"clear($event)\">\n          <i class=\"ph ph-x\"></i>\n        </button>\n      }\n      @if (loading()) {\n        <div class=\"select-loader-trigger\"></div>\n      } @else {\n        <i class=\"ph ph-caret-down select-arrow\"></i>\n      }\n    </div>\n  </div>\n\n  @if (isOpen()) {\n    <div class=\"select-dropdown\">\n      @if (searchable()) {\n        <div class=\"select-search\">\n          <i class=\"ph ph-magnifying-glass select-search-icon\"></i>\n          <input type=\"text\"\n                 [placeholder]=\"searchConfig().placeholder\"\n                 [value]=\"searchTerm()\"\n                 (input)=\"onSearch($event)\"\n                 (click)=\"$event.stopPropagation()\">\n        </div>\n      }\n      <div class=\"select-options\" (scroll)=\"onScroll($event)\">\n        @for (item of filteredOptions(); track getOptionKey(item)) {\n          @if (isOptionGroup(item)) {\n            <div class=\"select-group\">\n              <div class=\"select-group-label\">{{ item.label }}</div>\n              @for (opt of item.options; track opt.label) {\n                <div class=\"select-option\" \n                     [class.selected]=\"isSelected(opt)\"\n                     (click)=\"select(opt)\">\n                  {{ opt.label }}\n                </div>\n              }\n            </div>\n          } @else {\n            <div class=\"select-option\" \n                 [class.selected]=\"isSelected(item)\"\n                 (click)=\"select(item)\">\n              {{ item.label }}\n            </div>\n          }\n        } @empty {\n          <div class=\"select-no-results\">Aucun r\u00E9sultat</div>\n        }\n      </div>\n    </div>\n  }\n</div>", styles: [":host{display:block;width:100%;max-width:18.75rem}:host.select-full-width{max-width:none}.select-container{position:relative;width:100%}.select-label{display:block;color:var(--text-color);font-size:.875rem;font-weight:500;margin-bottom:.25rem;cursor:pointer}.select-trigger{display:flex;align-items:center;justify-content:space-between;width:100%;height:2.5rem;padding:0 1rem;background:var(--surface-card);border:.0625rem 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}.select-actions{display:flex;align-items:center;gap:.5rem}.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{position:absolute;top:calc(100% + .25rem);left:0;right:0;z-index:1000;background:var(--surface-card);border:.0625rem 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}.select-option:hover{background:var(--surface-hover)}.select-option.selected{background:rgba(var(--primary-color-rgb),.1);color:var(--primary-color);font-weight:500}:host.select-small .select-trigger{height:2rem;font-size:.875rem}:host.select-large .select-trigger{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: "21.1.5", ngImport: i0, type: PshSelectComponent, decorators: [{
             type: Component,
@@ -3276,15 +3011,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                             multi: true
                         }
                     ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        '[class.full-width]': 'fullWidth()',
-                        '[class.small]': 'size() === "small"',
-                        '[class.large]': 'size() === "large"',
-                        '[class.error]': '!!error()',
-                        '[class.success]': '!!success()',
-                        '[class.disabled]': 'disabled()',
-                        '[class.loading]': 'loading()',
-                    }, template: "<div class=\"select-container\">\n  <!-- Label slot -->\n  @if (label() || hasLabelContent()) {\n    <label class=\"select-label\" [for]=\"selectId\" (click)=\"focusSelect()\" [class.required]=\"!!required()\">\n      <ng-content select=\"[select-label]\" />\n      @if (!hasLabelContent()) {\n        {{ label() }}\n      }\n    </label>\n  }\n\n  <div class=\"select-trigger-wrapper\">\n    <div\n      class=\"select-trigger\"\n      [id]=\"selectId\"\n      role=\"combobox\"\n      aria-haspopup=\"listbox\"\n      [attr.aria-controls]=\"selectId + '-listbox'\"\n      [attr.aria-expanded]=\"isOpen()\"\n      [attr.aria-disabled]=\"disabled()\"\n      [attr.aria-busy]=\"loading() ? 'true' : null\"\n      [attr.aria-required]=\"required() ? 'true' : 'false'\"\n      [attr.aria-invalid]=\"!!error()\"\n      [attr.aria-label]=\"computedAriaLabel()\"\n      [attr.aria-describedby]=\"error() ? 'error-message' : success() ? 'success-message' : hint() ? 'hint-message' : null\"\n      [attr.aria-activedescendant]=\"activeDescendant()\"\n      [attr.tabindex]=\"disabled() || loading() ? -1 : 0\"\n      (click)=\"toggle()\"\n      (keydown)=\"handleKeyDown($event)\"\n    >\n      <div class=\"select-value\">\n        <span [class.placeholder]=\"!hasValue()\">{{ selectedLabel() }}</span>\n      </div>\n\n      <div class=\"select-actions\">\n        @if (clearable() && hasValue() && !loading()) {\n          <button\n            type=\"button\"\n            class=\"select-clear\"\n            (click)=\"clear($event)\"\n            [attr.aria-label]=\"'Effacer la s\u00E9lection'\"\n            [tabindex]=\"disabled() ? -1 : 0\"\n          >\n            <i class=\"ph ph-x\" aria-hidden=\"true\"></i>\n          </button>\n        }\n        @if (loading()) {\n          <div class=\"select-loader-trigger\" aria-hidden=\"true\"></div>\n        } @else {\n          <i\n            class=\"ph ph-caret-down select-arrow\"\n            [class.open]=\"isOpen()\"\n            aria-hidden=\"true\"\n          ></i>\n        }\n      </div>\n    </div>\n\n    @if (isOpen()) {\n      <div\n        class=\"select-dropdown\"\n        role=\"listbox\"\n        [id]=\"selectId + '-listbox'\"\n        [attr.aria-multiselectable]=\"multiple()\"\n      >\n        @if (searchable()) {\n          <div class=\"select-search\">\n            <input\n              type=\"text\"\n              [placeholder]=\"searchConfig().placeholder\"\n              [value]=\"searchTerm()\"\n              (input)=\"onSearch($event)\"\n              (click)=\"$event.stopPropagation()\"\n              [attr.aria-label]=\"searchConfig().placeholder\"\n            />\n          </div>\n        }\n\n        <div class=\"select-options\" (scroll)=\"onScroll($event)\">\n          @if (loading()) {\n            <div class=\"select-loading\">\n              <div class=\"select-loader\"></div>\n            </div>\n          } @else if (filteredOptions().length === 0) {\n            <div class=\"select-no-results\">\n              Aucun r\u00E9sultat\n            </div>\n          } @else {\n            @for (option of filteredOptions(); track getOptionKey(option)) {\n              @if (isOptionGroup(option)) {\n                <div class=\"select-group\">\n                  <div class=\"select-group-label\">{{ option.label }}</div>\n                  @for (groupOption of option.options; track getOptionKey(groupOption)) {\n                    <div\n                      class=\"select-option\"\n                      role=\"option\"\n                      [class.selected]=\"isSelected(groupOption)\"\n                      [class.focused]=\"isFocused(groupOption)\"\n                      [class.disabled]=\"option.disabled || groupOption.disabled\"\n                      [attr.aria-selected]=\"isSelected(groupOption)\"\n                      [attr.aria-disabled]=\"(option.disabled || groupOption.disabled) || null\"\n                      [attr.id]=\"selectId + '-option-' + groupOption.value\"\n                      [attr.tabindex]=\"option.disabled || groupOption.disabled ? -1 : 0\"\n                      (click)=\"!option.disabled && select(groupOption)\"\n                      (keydown)=\"handleOptionKeyDown($event, groupOption)\"\n                    >\n                      @if (multiple()) {\n                        <div class=\"select-checkbox\">\n                          <i class=\"ph ph-check\" aria-hidden=\"true\"></i>\n                        </div>\n                      }\n                      @if (groupOption.icon) {\n                        <i class=\"ph ph-{{ groupOption.icon }}\" aria-hidden=\"true\"></i>\n                      }\n                      <div class=\"option-content\">\n                        <div class=\"option-label\">{{ groupOption.label }}</div>\n                        @if (groupOption.description) {\n                          <div class=\"option-description\">{{ groupOption.description }}</div>\n                        }\n                      </div>\n                    </div>\n                  }\n                </div>\n              } @else {\n                <div\n                  class=\"select-option\"\n                  role=\"option\"\n                  [class.selected]=\"isSelected(option)\"\n                  [class.focused]=\"isFocused(option)\"\n                  [class.disabled]=\"option.disabled\"\n                  [attr.aria-selected]=\"isSelected(option)\"\n                  [attr.aria-disabled]=\"option.disabled || null\"\n                  [attr.id]=\"selectId + '-option-' + option.value\"\n                  [attr.tabindex]=\"option.disabled ? -1 : 0\"\n                  (click)=\"select(option)\"\n                  (keydown)=\"handleOptionKeyDown($event, option)\"\n                >\n                  @if (multiple()) {\n                    <div class=\"select-checkbox\">\n                      <i class=\"ph ph-check\" aria-hidden=\"true\"></i>\n                    </div>\n                  }\n                  @if (option.icon) {\n                    <i class=\"ph ph-{{ option.icon }}\" aria-hidden=\"true\"></i>\n                  }\n                  <div class=\"option-content\">\n                    <div class=\"option-label\">{{ option.label }}</div>\n                    @if (option.description) {\n                      <div class=\"option-description\">{{ option.description }}</div>\n                    }\n                  </div>\n                </div>\n              }\n            }\n          }\n        </div>\n      </div>\n    }\n  </div>\n\n  <!-- Error message slot -->\n  @if (error()) {\n    <div id=\"error-message\" class=\"select-error\" role=\"alert\">\n      <ng-content select=\"[select-error]\">\n        {{ error() }}\n      </ng-content>\n    </div>\n  }\n\n  <!-- Success message slot -->\n  @if (success()) {\n    <div id=\"success-message\" class=\"select-success\" role=\"status\">\n      <ng-content select=\"[select-success]\">\n        {{ success() }}\n      </ng-content>\n    </div>\n  }\n\n  <!-- Hint message slot -->\n  @if (hint()) {\n    <div id=\"hint-message\" class=\"select-hint\">\n      <ng-content select=\"[select-hint]\">\n        {{ hint() }}\n      </ng-content>\n    </div>\n  }\n</div>", styles: [":host{display:block;width:100%;max-width:var(--select-max-width)}:host(.full-width){max-width:none}.select-container{width:100%}.select-trigger-wrapper{position:relative;width:100%}.select-label{display:block;color:var(--text-color);font-size:var(--font-size-sm);font-weight:500;margin-bottom:var(--spacing-xs);width:100%;cursor:pointer}.select-label.required:after{content:\"*\";color:var(--danger-color);margin-left:var(--spacing-xxs)}.select-trigger{display:flex;align-items:center;width:100%;min-width:12rem;height:var(--height-input-md);padding:0 var(--spacing-md);background:var(--surface-card);border:var(--border-width-1) solid var(--surface-border);border-radius:var(--border-radius);cursor:pointer;transition:all var(--animation-duration-normal) var(--animation-easing-default);outline:none}.select-trigger:hover{border-color:var(--primary-color)}:host(.disabled) .select-trigger:hover,:host(.loading) .select-trigger:hover{border-color:var(--surface-border)}.select-trigger:focus-visible{border-color:var(--primary-color);box-shadow:0 0 0 .125rem rgba(var(--primary-color-rgb),.2)}.select-value{display:flex;align-items:center;gap:var(--spacing-xs);flex:1;min-width:0;margin-right:var(--spacing-sm)}.select-value span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text-color)}.select-value span.placeholder{color:var(--text-color-secondary)}.select-actions{display:flex;align-items:center;gap:var(--spacing-sm);flex-shrink:0}.select-arrow{transition:transform var(--animation-duration-normal) var(--animation-easing-default);font-size:var(--icon-size-sm);color:var(--text-color-secondary);flex-shrink:0}.select-arrow.open{transform:rotate(180deg)}.select-clear{display:flex;align-items:center;justify-content:center;width:var(--size-5);height:var(--size-5);padding:0;background:transparent;border:none;border-radius:50%;color:var(--text-color-secondary);cursor:pointer;transition:all var(--animation-duration-normal) var(--animation-easing-default);flex-shrink:0}.select-clear:hover{background:rgba(var(--danger-color-rgb),.1);color:var(--danger-color)}.select-dropdown{position:absolute;top:calc(100% + var(--spacing-xs));left:0;width:100%;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:1000;animation:fadeIn var(--animation-duration-normal) var(--animation-easing-default)}.select-search{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm);border-bottom:var(--border-width-1) solid var(--surface-border)}.select-search input{width:100%;padding:var(--spacing-xs) var(--spacing-sm);border:var(--border-width-1) solid var(--surface-border);border-radius:var(--border-radius);background:var(--surface-ground)}.select-search input:focus{outline:none;border-color:var(--primary-color)}.select-options{max-height:var(--dropdown-max-height);overflow-y:auto}.select-group{padding:var(--spacing-xs) 0}.select-group-label{padding:var(--spacing-xs) var(--spacing-md);color:var(--text-color-secondary);font-weight:500;font-size:var(--font-size-sm)}.select-option{display:flex;align-items:center;gap:var(--spacing-md);padding:var(--spacing-sm) var(--spacing-md);cursor:pointer;transition:all var(--animation-duration-normal) var(--animation-easing-default)}.select-option:hover:not(.disabled){background:var(--surface-hover)}.select-option.focused:not(.disabled){background:var(--surface-hover);outline:2px solid var(--primary-color);outline-offset:-2px}.select-option.selected{background:rgba(var(--primary-color-rgb),.1);color:var(--primary-color)}.select-option.selected.focused{background:rgba(var(--primary-color-rgb),.15);outline:2px solid var(--primary-color);outline-offset:-2px}.select-option.disabled{opacity:.6;cursor:not-allowed}.select-option i{font-size:var(--icon-size-md);color:var(--text-color-secondary);flex-shrink:0}.select-option.selected i{color:var(--primary-color)}.option-content{flex:1;min-width:0}.option-label{color:inherit;font-size:var(--font-size-base)}.option-description{color:var(--text-color-secondary);font-size:var(--font-size-sm);margin-top:var(--spacing-xs)}.select-checkbox{display:flex;align-items:center;justify-content:center;width:var(--select-checkbox-size);height:var(--select-checkbox-size);border:var(--border-width-2) solid var(--surface-border);border-radius:var(--border-radius);transition:all var(--animation-duration-normal) var(--animation-easing-default)}.selected .select-checkbox{background:var(--primary-gradient);border-color:var(--primary-color);color:var(--primary-color-text)}.select-no-results{padding:var(--spacing-md);text-align:center;color:var(--text-color-secondary)}.select-loading{padding:var(--spacing-md);text-align:center}.select-loader{width:var(--size-6);height:var(--size-6);border:var(--border-width-2) solid var(--surface-border);border-top-color:var(--primary-color);border-radius:50%;animation:spin var(--animation-duration-slow) linear infinite;margin:0 auto}.select-loader-trigger{width:var(--icon-size-sm);height:var(--icon-size-sm);border:var(--border-width-2) solid var(--surface-border);border-top-color:var(--primary-color);border-radius:50%;animation:spin var(--animation-duration-slow) linear infinite;flex-shrink:0}.select-error{margin-top:var(--spacing-xs);color:var(--danger-color);font-size:var(--font-size-sm)}.select-success{margin-top:var(--spacing-xs);color:var(--success-color);font-size:var(--font-size-sm)}.select-hint{font-size:var(--font-size-sm);color:var(--text-color-secondary);margin-top:var(--spacing-xs)}.virtual-scroll{position:relative;overflow:hidden}:host(.disabled) .select-trigger{background:var(--surface-ground);cursor:not-allowed;opacity:.6}:host(.loading) .select-trigger{cursor:wait;opacity:.7}:host(.error) .select-trigger{border-color:var(--danger-color)}:host(.success) .select-trigger{border-color:var(--success-color)}:host(.small) .select-trigger{height:var(--height-input-sm);font-size:var(--font-size-sm);padding:0 var(--spacing-sm)}:host(.small) .select-arrow{font-size:var(--icon-size-xs)}:host(.small) .select-value{margin-right:var(--spacing-xs)}:host(.small) .select-actions{gap:var(--spacing-xs)}:host(.small) .select-dropdown{font-size:var(--font-size-sm)}:host(.small) .select-search{padding:var(--spacing-xs)}:host(.small) .select-search input{padding:var(--spacing-xxs) var(--spacing-xs);font-size:var(--font-size-sm)}:host(.small) .select-option{padding:var(--spacing-xs) var(--spacing-sm);gap:var(--spacing-sm)}:host(.small) .select-option i{font-size:var(--icon-size-sm)}:host(.small) .option-label{font-size:var(--font-size-sm)}:host(.small) .option-description{font-size:var(--font-size-xs);margin-top:var(--spacing-xxs)}:host(.small) .select-group-label{padding:var(--spacing-xxs) var(--spacing-sm);font-size:var(--font-size-xs)}:host(.small) .select-checkbox{width:calc(var(--select-checkbox-size) * .85);height:calc(var(--select-checkbox-size) * .85)}:host(.large) .select-trigger{height:var(--height-input-lg);font-size:var(--font-size-lg);padding:0 var(--spacing-lg)}:host(.large) .select-arrow{font-size:var(--icon-size-md)}:host(.large) .select-value{margin-right:var(--spacing-md)}:host(.large) .select-actions{gap:var(--spacing-md)}:host(.large) .select-dropdown{font-size:var(--font-size-lg)}:host(.large) .select-search{padding:var(--spacing-md)}:host(.large) .select-search input{padding:var(--spacing-sm) var(--spacing-md);font-size:var(--font-size-lg)}:host(.large) .select-option{padding:var(--spacing-md) var(--spacing-lg);gap:var(--spacing-lg)}:host(.large) .select-option i{font-size:var(--icon-size-lg)}:host(.large) .option-label{font-size:var(--font-size-lg)}:host(.large) .option-description{font-size:var(--font-size-base);margin-top:var(--spacing-xs)}:host(.large) .select-group-label{padding:var(--spacing-sm) var(--spacing-lg);font-size:var(--font-size-base)}:host(.large) .select-checkbox{width:calc(var(--select-checkbox-size) * 1.15);height:calc(var(--select-checkbox-size) * 1.15)}@media(max-width:36em){:host{max-width:none}}@keyframes fadeIn{0%{opacity:0;transform:translateY(calc(-1 * var(--spacing-sm)))}to{opacity:1;transform:translateY(0)}}@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 }] }], 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 }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", 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 }] }], 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"] }], scrollEnd: [{ type: i0.Output, args: ["scrollEnd"] }], searched: [{ type: i0.Output, args: ["searched"] }] } });
+                        '[class.select-full-width]': 'fullWidth()',
+                        '[class.select-small]': 'size() === "small"',
+                        '[class.select-large]': 'size() === "large"',
+                        '[class.select-error]': '!!error()',
+                        '[class.select-disabled]': 'disabled()',
+                        '[class.select-loading]': 'loading()',
+                        '[attr.aria-expanded]': 'isOpen().toString()',
+                        '[attr.data-state]': 'state()'
+                    }, template: "<div class=\"select-container\">\n  @if (label()) {\n    <label class=\"select-label\" [attr.for]=\"selectId\" (click)=\"focusSelect()\">\n      {{ label() }}\n      @if (required()) { <span class=\"required-mark\">*</span> }\n    </label>\n  }\n\n  <div class=\"select-trigger\" [id]=\"selectId\" (click)=\"toggle()\" tabindex=\"0\">\n    <div class=\"select-value\">\n      <span [class.placeholder]=\"!hasValue()\">\n        {{ selectedLabel() }}\n      </span>\n    </div>\n    \n    <div class=\"select-actions\">\n      @if (clearable() && hasValue() && !disabled()) {\n        <button class=\"select-clear\" (click)=\"clear($event)\">\n          <i class=\"ph ph-x\"></i>\n        </button>\n      }\n      @if (loading()) {\n        <div class=\"select-loader-trigger\"></div>\n      } @else {\n        <i class=\"ph ph-caret-down select-arrow\"></i>\n      }\n    </div>\n  </div>\n\n  @if (isOpen()) {\n    <div class=\"select-dropdown\">\n      @if (searchable()) {\n        <div class=\"select-search\">\n          <i class=\"ph ph-magnifying-glass select-search-icon\"></i>\n          <input type=\"text\"\n                 [placeholder]=\"searchConfig().placeholder\"\n                 [value]=\"searchTerm()\"\n                 (input)=\"onSearch($event)\"\n                 (click)=\"$event.stopPropagation()\">\n        </div>\n      }\n      <div class=\"select-options\" (scroll)=\"onScroll($event)\">\n        @for (item of filteredOptions(); track getOptionKey(item)) {\n          @if (isOptionGroup(item)) {\n            <div class=\"select-group\">\n              <div class=\"select-group-label\">{{ item.label }}</div>\n              @for (opt of item.options; track opt.label) {\n                <div class=\"select-option\" \n                     [class.selected]=\"isSelected(opt)\"\n                     (click)=\"select(opt)\">\n                  {{ opt.label }}\n                </div>\n              }\n            </div>\n          } @else {\n            <div class=\"select-option\" \n                 [class.selected]=\"isSelected(item)\"\n                 (click)=\"select(item)\">\n              {{ item.label }}\n            </div>\n          }\n        } @empty {\n          <div class=\"select-no-results\">Aucun r\u00E9sultat</div>\n        }\n      </div>\n    </div>\n  }\n</div>", styles: [":host{display:block;width:100%;max-width:18.75rem}:host.select-full-width{max-width:none}.select-container{position:relative;width:100%}.select-label{display:block;color:var(--text-color);font-size:.875rem;font-weight:500;margin-bottom:.25rem;cursor:pointer}.select-trigger{display:flex;align-items:center;justify-content:space-between;width:100%;height:2.5rem;padding:0 1rem;background:var(--surface-card);border:.0625rem 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}.select-actions{display:flex;align-items:center;gap:.5rem}.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{position:absolute;top:calc(100% + .25rem);left:0;right:0;z-index:1000;background:var(--surface-card);border:.0625rem 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}.select-option:hover{background:var(--surface-hover)}.select-option.selected{background:rgba(var(--primary-color-rgb),.1);color:var(--primary-color);font-weight:500}:host.select-small .select-trigger{height:2rem;font-size:.875rem}:host.select-large .select-trigger{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 }] }], 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 }] }], 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: () => ({