ps-helix 0.1.0

package/fesm2022/ps-helix.mjs

@@ -0,0 +1,3304 @@
+import * as i0 from '@angular/core';
+import { model, input, output, computed, Component, ChangeDetectionStrategy, inject, ElementRef, InjectionToken, signal, ChangeDetectorRef, forwardRef, Injectable, effect, ViewChild, HostListener } from '@angular/core';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i1$1 from '@angular/forms';
+import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
+import { TranslateService } from '@ngx-translate/core';
+import { Observable } from 'rxjs';
+import { map, filter } from 'rxjs/operators';
+import * as i1$2 from '@angular/router';
+import { NavigationEnd } from '@angular/router';
+
+// Default alert labels
+const DEFAULT_LABELS = {
+    dismiss: 'Dismiss alert'
+};
+// Default alert icons
+const DEFAULT_ICONS = {
+    info: 'info',
+    success: 'check-circle',
+    warning: 'warning',
+    danger: 'warning-octagon'
+};
+// Default alert configuration
+const DEFAULT_CONFIG$5 = {
+    type: 'info',
+    iconPosition: 'left',
+    closable: false,
+    size: 'medium',
+    showIcon: true,
+    role: 'alert'
+};
+class PshAlertComponent {
+    constructor() {
+        // Required model inputs
+        this.type = model(DEFAULT_CONFIG$5.type);
+        // Optional model inputs with defaults
+        this.iconPosition = model(DEFAULT_CONFIG$5.iconPosition);
+        this.closable = model(DEFAULT_CONFIG$5.closable);
+        this.size = model(DEFAULT_CONFIG$5.size);
+        this.showIcon = model(DEFAULT_CONFIG$5.showIcon);
+        this.role = model(DEFAULT_CONFIG$5.role);
+        // Regular inputs
+        this.icon = input();
+        this.ariaLabel = input();
+        this.dismissLabel = input(DEFAULT_LABELS.dismiss);
+        this.ariaLive = input();
+        this.content = input('');
+        // Outputs
+        this.closed = output();
+        // Computed values
+        this.defaultIcon = computed(() => DEFAULT_ICONS[this.type()] || 'info');
+        this.getIcon = computed(() => this.icon() || this.defaultIcon());
+        this.ariaDescribedBy = computed(() => {
+            const parts = [];
+            if (this.ariaLabel())
+                parts.push('alert-label');
+            return parts.length ? parts.join(' ') : undefined;
+        });
+        this.computedAriaLive = computed(() => this.ariaLive() || (['warning', 'danger'].includes(this.type()) ? 'assertive' : 'polite'));
+        this.computedRole = computed(() => this.role() || (['warning', 'danger'].includes(this.type()) ? 'alert' : 'status'));
+        this.state = computed(() => {
+            if (this.closable())
+                return 'closable';
+            return this.type();
+        });
+    }
+    handleClose() {
+        this.closed.emit();
+    }
+    // Static method to apply default configuration
+    static applyDefaults(component) {
+        component.type.set(DEFAULT_CONFIG$5.type);
+        component.iconPosition.set(DEFAULT_CONFIG$5.iconPosition);
+        component.closable.set(DEFAULT_CONFIG$5.closable);
+        component.size.set(DEFAULT_CONFIG$5.size);
+        component.showIcon.set(DEFAULT_CONFIG$5.showIcon);
+        component.role.set(DEFAULT_CONFIG$5.role);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: PshAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: PshAlertComponent, isStandalone: true, selector: "psh-alert", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, iconPosition: { classPropertyName: "iconPosition", publicName: "iconPosition", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, dismissLabel: { classPropertyName: "dismissLabel", publicName: "dismissLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLive: { classPropertyName: "ariaLive", publicName: "ariaLive", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { type: "typeChange", iconPosition: "iconPositionChange", closable: "closableChange", size: "sizeChange", showIcon: "showIconChange", role: "roleChange", closed: "closed" }, ngImport: i0, template: "<div\r\n  class=\"alert\"\r\n  [class.small]=\"size() === 'small'\"\r\n  [class.small]=\"size() === 'small'\"\r\n  [class.large]=\"size() === 'large'\"\r\n  [class]=\"type()\"\r\n  [attr.role]=\"computedRole()\"\r\n  [attr.aria-label]=\"ariaLabel()\"\r\n  [attr.aria-live]=\"computedAriaLive()\"\r\n  [attr.aria-describedby]=\"ariaDescribedBy()\"\r\n  [attr.data-state]=\"state()\"\r\n>\r\n  <div class=\"alert-content\" [class.icon-right]=\"iconPosition() === 'right'\">\r\n    @if (showIcon()) {\r\n      <i class=\"ph ph-{{ getIcon() }}\" aria-hidden=\"true\"></i>\r\n    }\r\n    <div class=\"alert-message\">\r\n      <ng-content>{{ content() }}</ng-content>\r\n    </div>\r\n  </div>\r\n  \r\n  @if (closable()) {\r\n    <button\r\n      type=\"button\"\r\n      class=\"alert-dismiss\"\r\n      (click)=\"handleClose()\"\r\n      [attr.aria-label]=\"dismissLabel()\"\r\n    >\r\n      <i class=\"ph ph-x\" aria-hidden=\"true\"></i>\r\n    </button>\r\n  }\r\n</div>", styles: [".alert{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--spacing-md);padding:var(--spacing-md) var(--spacing-lg);border-radius:var(--border-radius);border:1px solid transparent;animation:slideIn .2s ease}.alert-content{display:flex;align-items:flex-start;flex-direction:row;gap:var(--spacing-md);flex:1}.alert-content.icon-right{flex-direction:row-reverse}.alert i{font-size:1.25rem;flex-shrink:0}.alert-message{color:inherit;font-size:var(--font-size-base);line-height:var(--line-height-relaxed)}.alert.info{background:var(--alert-info-bg);border-color:var(--alert-info-border-color);color:var(--alert-info-text-color)}.alert.success{background:rgba(var(--success-color-rgb),.1);border-color:var(--success-color);color:var(--success-color)}.alert.warning{background:rgba(var(--warning-color-rgb),.1);border-color:var(--warning-color);color:var(--warning-color)}.alert.danger{background:rgba(var(--danger-color-rgb),.1);border-color:var(--danger-color);color:var(--danger-color)}.alert.small{padding:var(--spacing-sm) var(--spacing-md);font-size:var(--font-size-sm)}.alert.small i{font-size:1rem}.alert.large{padding:var(--spacing-lg) var(--spacing-xl);font-size:var(--font-size-lg)}.alert.large i{font-size:1.5rem}.alert-dismiss{background:transparent;border:none;color:inherit;padding:var(--spacing-xs);cursor:pointer;opacity:.7;transition:opacity .2s ease;border-radius:var(--border-radius);display:flex;align-items:center;justify-content:center;z-index:2}.alert-dismiss:hover{opacity:1;background:#0000001a}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: PshAlertComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'psh-alert', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  class=\"alert\"\r\n  [class.small]=\"size() === 'small'\"\r\n  [class.small]=\"size() === 'small'\"\r\n  [class.large]=\"size() === 'large'\"\r\n  [class]=\"type()\"\r\n  [attr.role]=\"computedRole()\"\r\n  [attr.aria-label]=\"ariaLabel()\"\r\n  [attr.aria-live]=\"computedAriaLive()\"\r\n  [attr.aria-describedby]=\"ariaDescribedBy()\"\r\n  [attr.data-state]=\"state()\"\r\n>\r\n  <div class=\"alert-content\" [class.icon-right]=\"iconPosition() === 'right'\">\r\n    @if (showIcon()) {\r\n      <i class=\"ph ph-{{ getIcon() }}\" aria-hidden=\"true\"></i>\r\n    }\r\n    <div class=\"alert-message\">\r\n      <ng-content>{{ content() }}</ng-content>\r\n    </div>\r\n  </div>\r\n  \r\n  @if (closable()) {\r\n    <button\r\n      type=\"button\"\r\n      class=\"alert-dismiss\"\r\n      (click)=\"handleClose()\"\r\n      [attr.aria-label]=\"dismissLabel()\"\r\n    >\r\n      <i class=\"ph ph-x\" aria-hidden=\"true\"></i>\r\n    </button>\r\n  }\r\n</div>", styles: [".alert{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--spacing-md);padding:var(--spacing-md) var(--spacing-lg);border-radius:var(--border-radius);border:1px solid transparent;animation:slideIn .2s ease}.alert-content{display:flex;align-items:flex-start;flex-direction:row;gap:var(--spacing-md);flex:1}.alert-content.icon-right{flex-direction:row-reverse}.alert i{font-size:1.25rem;flex-shrink:0}.alert-message{color:inherit;font-size:var(--font-size-base);line-height:var(--line-height-relaxed)}.alert.info{background:var(--alert-info-bg);border-color:var(--alert-info-border-color);color:var(--alert-info-text-color)}.alert.success{background:rgba(var(--success-color-rgb),.1);border-color:var(--success-color);color:var(--success-color)}.alert.warning{background:rgba(var(--warning-color-rgb),.1);border-color:var(--warning-color);color:var(--warning-color)}.alert.danger{background:rgba(var(--danger-color-rgb),.1);border-color:var(--danger-color);color:var(--danger-color)}.alert.small{padding:var(--spacing-sm) var(--spacing-md);font-size:var(--font-size-sm)}.alert.small i{font-size:1rem}.alert.large{padding:var(--spacing-lg) var(--spacing-xl);font-size:var(--font-size-lg)}.alert.large i{font-size:1.5rem}.alert-dismiss{background:transparent;border:none;color:inherit;padding:var(--spacing-xs);cursor:pointer;opacity:.7;transition:opacity .2s ease;border-radius:var(--border-radius);display:flex;align-items:center;justify-content:center;z-index:2}.alert-dismiss:hover{opacity:1;background:#0000001a}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}\n"] }]
+        }] });
+
+// Default configuration
+const DEFAULT_CONFIG$4 = {
+    size: 'medium',
+    shape: 'circle',
+    alt: 'User avatar',
+    icon: 'user'
+};
+// Default status colors
+const DEFAULT_STATUS_COLORS = {
+    online: 'var(--success-color)',
+    offline: 'var(--surface-400)',
+    away: 'var(--warning-color)',
+    busy: 'var(--danger-color)'
+};
+class PshAvatarComponent {
+    constructor() {
+        // Model inputs with defaults
+        this.size = model(DEFAULT_CONFIG$4.size);
+        this.shape = model(DEFAULT_CONFIG$4.shape);
+        this.src = model();
+        this.alt = model(DEFAULT_CONFIG$4.alt);
+        // Regular inputs
+        this.initials = input('');
+        this.icon = input(DEFAULT_CONFIG$4.icon);
+        this.status = input();
+        this.ariaLabel = input();
+        // Computed values
+        this.hasImage = computed(() => !!this.src());
+        this.hasInitials = computed(() => !!this.initials() && !this.hasImage());
+        this.hasIcon = computed(() => !this.hasImage() && !this.hasInitials());
+        this.computedAriaLabel = computed(() => this.ariaLabel() || this.alt());
+        this.statusColor = computed(() => {
+            const currentStatus = this.status();
+            if (!currentStatus)
+                return undefined;
+            return DEFAULT_STATUS_COLORS[currentStatus];
+        });
+        this.state = computed(() => this.status() || 'default');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: PshAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: PshAvatarComponent, isStandalone: true, selector: "psh-avatar", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, initials: { classPropertyName: "initials", publicName: "initials", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { size: "sizeChange", shape: "shapeChange", src: "srcChange", alt: "altChange" }, ngImport: i0, template: "<div \r\n  class=\"avatar\"\r\n  [class.circle]=\"shape() === 'circle'\"\r\n  [class.square]=\"shape() === 'square'\"\r\n  [class.small]=\"size() === 'small'\"\r\n  [class.large]=\"size() === 'large'\"\r\n  [class.xlarge]=\"size() === 'xlarge'\"\r\n  role=\"img\"\r\n  [attr.aria-label]=\"computedAriaLabel()\"\r\n  [attr.data-state]=\"state()\"\r\n>\r\n  @if (hasImage()) {\r\n    <img [src]=\"src()\" [attr.alt]=\"alt()\" class=\"avatar-image\" />\r\n  } @else if (hasInitials()) {\r\n    <span class=\"avatar-initials\">{{ initials() }}</span>\r\n  } @else if (hasIcon()) {\r\n    <i class=\"ph ph-{{ icon() }}\" aria-hidden=\"true\"></i>\r\n  }\r\n\r\n  @if (status()) {\r\n    <span \r\n      class=\"avatar-status\"\r\n      [class]=\"status()\"\r\n      [style.background-color]=\"statusColor()\"\r\n      [attr.aria-label]=\"status()\"\r\n    ></span>\r\n  }\r\n</div>", styles: [".avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;background:var(--surface-ground);color:var(--text-color);font-weight:500}.avatar:not(:has(img)){background:rgba(var(--primary-color-rgb),.1);color:var(--primary-color);overflow:hidden}.avatar:not(:has(img)):before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(45deg,transparent,rgba(var(--primary-color-rgb),.05));z-index:1}.avatar i,.avatar-initials{position:relative;z-index:2}.avatar.circle{border-radius:50%}.avatar.square{border-radius:var(--border-radius)}.avatar.small{width:32px;height:32px;font-size:var(--font-size-sm)}.avatar.small i{font-size:1rem}.avatar.large{width:48px;height:48px;font-size:var(--font-size-lg)}.avatar.large i{font-size:1.5rem}.avatar.xlarge{width:64px;height:64px;font-size:var(--font-size-xl)}.avatar.xlarge i{font-size:2rem}.avatar-image{width:100%;height:100%;object-fit:cover;border-radius:inherit;overflow:hidden}.avatar-initials{line-height:1;text-transform:uppercase;border-radius:inherit}.avatar-status{position:absolute;bottom:-2px;right:-2px;width:12px;height:12px;border:2px solid var(--surface-card);border-radius:50%;z-index:3}.avatar.small .avatar-status{width:10px;height:10px;bottom:-1px;right:-1px}.avatar.large .avatar-status{width:14px;height:14px;bottom:-2px;right:-2px}.avatar.xlarge .avatar-status{width:16px;height:16px;bottom:-3px;right:-3px}.avatar-status.online{background:var(--success-color)}.avatar-status.offline{background:var(--surface-400)}.avatar-status.away{background:var(--warning-color)}.avatar-status.busy{background:var(--danger-color)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: PshAvatarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'psh-avatar', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div \r\n  class=\"avatar\"\r\n  [class.circle]=\"shape() === 'circle'\"\r\n  [class.square]=\"shape() === 'square'\"\r\n  [class.small]=\"size() === 'small'\"\r\n  [class.large]=\"size() === 'large'\"\r\n  [class.xlarge]=\"size() === 'xlarge'\"\r\n  role=\"img\"\r\n  [attr.aria-label]=\"computedAriaLabel()\"\r\n  [attr.data-state]=\"state()\"\r\n>\r\n  @if (hasImage()) {\r\n    <img [src]=\"src()\" [attr.alt]=\"alt()\" class=\"avatar-image\" />\r\n  } @else if (hasInitials()) {\r\n    <span class=\"avatar-initials\">{{ initials() }}</span>\r\n  } @else if (hasIcon()) {\r\n    <i class=\"ph ph-{{ icon() }}\" aria-hidden=\"true\"></i>\r\n  }\r\n\r\n  @if (status()) {\r\n    <span \r\n      class=\"avatar-status\"\r\n      [class]=\"status()\"\r\n      [style.background-color]=\"statusColor()\"\r\n      [attr.aria-label]=\"status()\"\r\n    ></span>\r\n  }\r\n</div>", styles: [".avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;background:var(--surface-ground);color:var(--text-color);font-weight:500}.avatar:not(:has(img)){background:rgba(var(--primary-color-rgb),.1);color:var(--primary-color);overflow:hidden}.avatar:not(:has(img)):before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(45deg,transparent,rgba(var(--primary-color-rgb),.05));z-index:1}.avatar i,.avatar-initials{position:relative;z-index:2}.avatar.circle{border-radius:50%}.avatar.square{border-radius:var(--border-radius)}.avatar.small{width:32px;height:32px;font-size:var(--font-size-sm)}.avatar.small i{font-size:1rem}.avatar.large{width:48px;height:48px;font-size:var(--font-size-lg)}.avatar.large i{font-size:1.5rem}.avatar.xlarge{width:64px;height:64px;font-size:var(--font-size-xl)}.avatar.xlarge i{font-size:2rem}.avatar-image{width:100%;height:100%;object-fit:cover;border-radius:inherit;overflow:hidden}.avatar-initials{line-height:1;text-transform:uppercase;border-radius:inherit}.avatar-status{position:absolute;bottom:-2px;right:-2px;width:12px;height:12px;border:2px solid var(--surface-card);border-radius:50%;z-index:3}.avatar.small .avatar-status{width:10px;height:10px;bottom:-1px;right:-1px}.avatar.large .avatar-status{width:14px;height:14px;bottom:-2px;right:-2px}.avatar.xlarge .avatar-status{width:16px;height:16px;bottom:-3px;right:-3px}.avatar-status.online{background:var(--success-color)}.avatar-status.offline{background:var(--surface-400)}.avatar-status.away{background:var(--warning-color)}.avatar-status.busy{background:var(--danger-color)}\n"] }]
+        }] });
+
+// Default configuration
+const DEFAULT_CONFIG$3 = {
+    variant: 'primary',
+    size: 'medium',
+    displayType: 'text',
+    max: 99,
+    showZero: false,
+    position: 'top-right'
+};
+class PshBadgeComponent {
+    constructor() {
+        // Model inputs with defaults
+        this.variant = model(DEFAULT_CONFIG$3.variant);
+        this.size = model(DEFAULT_CONFIG$3.size);
+        this.displayType = model(DEFAULT_CONFIG$3.displayType);
+        this.content = model('');
+        this.visible = model(true);
+        this.value = model();
+        this.max = model(DEFAULT_CONFIG$3.max);
+        this.showZero = model(DEFAULT_CONFIG$3.showZero);
+        this.position = model(DEFAULT_CONFIG$3.position);
+        // Regular inputs
+        this.overlap = input(false);
+        this.ariaLabel = input();
+        this.formatter = input();
+        // Computed values
+        this.computedRole = computed(() => this.displayType() === 'counter' ? 'status' : 'img');
+        this.computedAriaLabel = computed(() => {
+            if (this.ariaLabel())
+                return this.ariaLabel();
+            if (this.content())
+                return this.content();
+            return this.computeDisplayValue();
+        });
+        this.state = computed(() => {
+            if (!this.visible())
+                return 'hidden';
+            if (this.overlap())
+                return 'overlap';
+            return this.displayType();
+        });
+        this.computeDisplayValue = computed(() => {
+            if (this.displayType() === 'dot') {
+                return '';
+            }
+            if (this.displayType() !== 'counter' || this.value() === undefined) {
+                return this.content();
+            }
+            const currentValue = this.value();
+            const currentFormatter = this.formatter();
+            if (currentFormatter && currentValue !== null && currentValue !== undefined) {
+                return currentFormatter(currentValue);
+            }
+            if (typeof currentValue === 'number') {
+                const numericValue = currentValue;
+                if (!this.shouldDisplayValue(numericValue))
+                    return this.content() || '';
+                return this.formatValue(numericValue);
+            }
+            return currentValue !== undefined ? String(currentValue) : this.content() || '';
+        });
+    }
+    shouldDisplayValue(value) {
+        return value > 0 || this.showZero();
+    }
+    formatValue(value) {
+        const max = this.max() ?? 99;
+        return value > max ? `${max}+` : `${value}`;
+    }
+    // Static method to apply default configuration
+    static applyDefaults(component) {
+        component.variant.set(DEFAULT_CONFIG$3.variant);
+        component.size.set(DEFAULT_CONFIG$3.size);
+        component.displayType.set(DEFAULT_CONFIG$3.displayType);
+        component.max.set(DEFAULT_CONFIG$3.max);
+        component.showZero.set(DEFAULT_CONFIG$3.showZero);
+        component.position.set(DEFAULT_CONFIG$3.position);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: PshBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: PshBadgeComponent, isStandalone: true, selector: "psh-badge", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, displayType: { classPropertyName: "displayType", publicName: "displayType", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, showZero: { classPropertyName: "showZero", publicName: "showZero", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, overlap: { classPropertyName: "overlap", publicName: "overlap", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, formatter: { classPropertyName: "formatter", publicName: "formatter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { variant: "variantChange", size: "sizeChange", displayType: "displayTypeChange", content: "contentChange", visible: "visibleChange", value: "valueChange", max: "maxChange", showZero: "showZeroChange", position: "positionChange" }, ngImport: i0, template: "<div \r\n  class=\"badge\"\r\n  [class.primary]=\"variant() === 'primary'\"\r\n  [class.secondary]=\"variant() === 'secondary'\"\r\n  [class.success]=\"variant() === 'success'\"\r\n  [class.warning]=\"variant() === 'warning'\"\r\n  [class.danger]=\"variant() === 'danger'\"\r\n  [class.dot]=\"displayType() === 'dot'\"\r\n  [class.counter]=\"displayType() === 'counter'\"\r\n  [class.overlap]=\"overlap()\"\r\n  [class.small]=\"size() === 'small'\"\r\n  [class.medium]=\"size() === 'medium'\"\r\n  [class.large]=\"size() === 'large'\"\r\n  [class.top-right]=\"position() === 'top-right'\"\r\n  [class.top-left]=\"position() === 'top-left'\"\r\n  [class.bottom-right]=\"position() === 'bottom-right'\"\r\n  [class.bottom-left]=\"position() === 'bottom-left'\"\r\n  [attr.role]=\"computedRole()\"\r\n  [attr.aria-label]=\"computedAriaLabel()\"\r\n  [attr.data-state]=\"state()\"\r\n>\r\n  @if (displayType() === 'text') {\r\n    <ng-content></ng-content>\r\n  } @else if (displayType() === 'counter') {\r\n    {{ computeDisplayValue() }}\r\n  }\r\n</div>", styles: [".badge{display:inline-flex;align-items:center;justify-content:center;min-width:var(--badge-width);min-height:var(--badge-height);padding:var(--spacing-xs);border-radius:var(--border-radius);font-size:var(--font-size-xs);font-weight:500;line-height:1;white-space:nowrap;transition:all .2s ease;min-width:max-content}.badge.primary{background-color:var(--primary-color);color:var(--primary-color-text)}.badge.secondary{background-color:var(--secondary-color);color:var(--secondary-color-text)}.badge.success{background-color:var(--success-color);color:var(--success-color-text)}.badge.warning{background-color:var(--warning-color);color:var(--warning-color-text)}.badge.danger{background-color:var(--danger-color);color:var(--danger-color-text)}.badge.disabled{background-color:var(--surface-400);color:var(--surface-0);cursor:not-allowed}.badge.medium{min-width:var(--badge-width);min-height:var(--badge-height);font-size:var(--font-size-xs);padding:var(--spacing-xs)}.badge.small{min-width:var(--badge-width-sm);min-height:var(--badge-height-sm);font-size:calc(var(--font-size-xs) * .85);padding:var(--spacing-xxs)}.badge.large{min-width:var(--badge-width-lg);min-height:var(--badge-height-lg);font-size:calc(var(--font-size-sm) * .95);padding:var(--spacing-sm)}.badge.overlap{position:absolute;transform:translate(50%,-50%)}.badge.top-right{top:0;right:0}.badge.top-left{top:0;left:0;transform:translate(-50%,-50%)}.badge.bottom-right{bottom:0;right:0;transform:translate(50%,50%)}.badge.bottom-left{bottom:0;left:0;transform:translate(-50%,50%)}.badge.dot{border-radius:var(--border-radius-full);box-shadow:var(--badge-dot-shadow) var(--surface-card)}.badge.counter{min-width:20px;min-height:20px;padding:0 var(--spacing-xs)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: PshBadgeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'psh-badge', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div \r\n  class=\"badge\"\r\n  [class.primary]=\"variant() === 'primary'\"\r\n  [class.secondary]=\"variant() === 'secondary'\"\r\n  [class.success]=\"variant() === 'success'\"\r\n  [class.warning]=\"variant() === 'warning'\"\r\n  [class.danger]=\"variant() === 'danger'\"\r\n  [class.dot]=\"displayType() === 'dot'\"\r\n  [class.counter]=\"displayType() === 'counter'\"\r\n  [class.overlap]=\"overlap()\"\r\n  [class.small]=\"size() === 'small'\"\r\n  [class.medium]=\"size() === 'medium'\"\r\n  [class.large]=\"size() === 'large'\"\r\n  [class.top-right]=\"position() === 'top-right'\"\r\n  [class.top-left]=\"position() === 'top-left'\"\r\n  [class.bottom-right]=\"position() === 'bottom-right'\"\r\n  [class.bottom-left]=\"position() === 'bottom-left'\"\r\n  [attr.role]=\"computedRole()\"\r\n  [attr.aria-label]=\"computedAriaLabel()\"\r\n  [attr.data-state]=\"state()\"\r\n>\r\n  @if (displayType() === 'text') {\r\n    <ng-content></ng-content>\r\n  } @else if (displayType() === 'counter') {\r\n    {{ computeDisplayValue() }}\r\n  }\r\n</div>", styles: [".badge{display:inline-flex;align-items:center;justify-content:center;min-width:var(--badge-width);min-height:var(--badge-height);padding:var(--spacing-xs);border-radius:var(--border-radius);font-size:var(--font-size-xs);font-weight:500;line-height:1;white-space:nowrap;transition:all .2s ease;min-width:max-content}.badge.primary{background-color:var(--primary-color);color:var(--primary-color-text)}.badge.secondary{background-color:var(--secondary-color);color:var(--secondary-color-text)}.badge.success{background-color:var(--success-color);color:var(--success-color-text)}.badge.warning{background-color:var(--warning-color);color:var(--warning-color-text)}.badge.danger{background-color:var(--danger-color);color:var(--danger-color-text)}.badge.disabled{background-color:var(--surface-400);color:var(--surface-0);cursor:not-allowed}.badge.medium{min-width:var(--badge-width);min-height:var(--badge-height);font-size:var(--font-size-xs);padding:var(--spacing-xs)}.badge.small{min-width:var(--badge-width-sm);min-height:var(--badge-height-sm);font-size:calc(var(--font-size-xs) * .85);padding:var(--spacing-xxs)}.badge.large{min-width:var(--badge-width-lg);min-height:var(--badge-height-lg);font-size:calc(var(--font-size-sm) * .95);padding:var(--spacing-sm)}.badge.overlap{position:absolute;transform:translate(50%,-50%)}.badge.top-right{top:0;right:0}.badge.top-left{top:0;left:0;transform:translate(-50%,-50%)}.badge.bottom-right{bottom:0;right:0;transform:translate(50%,50%)}.badge.bottom-left{bottom:0;left:0;transform:translate(-50%,50%)}.badge.dot{border-radius:var(--border-radius-full);box-shadow:var(--badge-dot-shadow) var(--surface-card)}.badge.counter{min-width:20px;min-height:20px;padding:0 var(--spacing-xs)}\n"] }]
+        }] });
+
+class PshButtonComponent {
+    constructor() {
+        this.elementRef = inject(ElementRef);
+        // Model inputs
+        this.appearance = model('filled');
+        this.variant = model('primary');
+        this.size = model('medium');
+        this.disabled = model(false);
+        this.loading = model(false);
+        this.fullWidth = model(false);
+        this.iconPosition = model('left');
+        // Regular inputs
+        this.icon = input();
+        this.ariaLabel = input();
+        this.loadingText = input('Loading...');
+        this.disabledText = input('This action is currently unavailable');
+        this.iconOnlyText = input();
+        this.type = input('button');
+        // Outputs
+        this.clicked = output();
+        // Computed values
+        this.computedAriaLabel = computed(() => {
+            if (this.ariaLabel())
+                return this.ariaLabel();
+            if (this.loading())
+                return this.loadingText();
+            if (this.disabled())
+                return this.disabledText();
+            if (this.iconPosition() === 'only') {
+                return this.iconOnlyText() || `${this.variant()} button`;
+            }
+            return '';
+        });
+        this.state = computed(() => {
+            if (this.disabled())
+                return 'disabled';
+            if (this.loading())
+                return 'loading';
+            return 'default';
+        });
+    }
+    hasContent() {
+        const content = this.elementRef.nativeElement
+            .querySelector('.button-content')
+            ?.textContent?.trim();
+        return !!content;
+    }
+    handleClick(event) {
+        if (!this.disabled() && !this.loading()) {
+            this.clicked.emit(event);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: PshButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: PshButtonComponent, isStandalone: true, selector: "psh-button", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", 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 }, iconPosition: { classPropertyName: "iconPosition", publicName: "iconPosition", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null }, disabledText: { classPropertyName: "disabledText", publicName: "disabledText", isSignal: true, isRequired: false, transformFunction: null }, iconOnlyText: { classPropertyName: "iconOnlyText", publicName: "iconOnlyText", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { appearance: "appearanceChange", variant: "variantChange", size: "sizeChange", disabled: "disabledChange", loading: "loadingChange", fullWidth: "fullWidthChange", iconPosition: "iconPositionChange", clicked: "clicked" }, ngImport: i0, template: "<button\r\n  [attr.data-state]=\"state()\"\r\n  [attr.aria-label]=\"computedAriaLabel()\"\r\n  [attr.aria-disabled]=\"disabled() || loading()\"\r\n  [attr.aria-busy]=\"loading()\"\r\n  role=\"button\"\r\n  [type]=\"type()\"\r\n  [class]=\"appearance()\"\r\n  [class.primary]=\"variant() === 'primary'\"\r\n  [class.secondary]=\"variant() === 'secondary'\"\r\n  [class.success]=\"variant() === 'success'\"\r\n  [class.warning]=\"variant() === 'warning'\"\r\n  [class.danger]=\"variant() === 'danger'\"\r\n  [class.disabled]=\"disabled()\"\r\n  [class.loading]=\"loading()\"\r\n  [class.full-width]=\"fullWidth()\"\r\n  [class.small]=\"size() === 'small'\"\r\n  [class.large]=\"size() === 'large'\"\r\n  [class.icon-only]=\"iconPosition() === 'only'\"\r\n  [attr.disabled]=\"disabled() || loading() ? '' : null\"\r\n  (click)=\"handleClick($event)\"\r\n>\r\n  <span class=\"button-content\">\r\n    @if (loading()) {\r\n      <span class=\"loader\" aria-hidden=\"true\"></span>\r\n      @if (iconPosition() !== 'only') {\r\n        {{ loadingText() }}\r\n      }\r\n    }\r\n    @if (!loading() && icon() && (iconPosition() === 'left' || iconPosition() === 'only')) {\r\n      <i class=\"ph ph-{{ icon() }}\" aria-hidden=\"true\"></i>\r\n    }\r\n    @if (!loading() && iconPosition() !== 'only') {\r\n      <ng-content></ng-content>\r\n      @if (!hasContent()) {\r\n        Button\r\n      }\r\n    }\r\n    @if (!loading() && icon() && iconPosition() === 'right') {\r\n      <i class=\"ph ph-{{ icon() }}\" aria-hidden=\"true\"></i>\r\n    }\r\n  </span>\r\n</button>", styles: ["button{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 var(--spacing-lg);border:none;font-weight:var(--button-font-weight);font-family:inherit;cursor:pointer;transition:var(--button-transition);min-width:var(--button-min-width-default);position:relative;overflow:hidden;font-size:var(--font-size-base);border-radius:var(--border-radius)}.button-content{display:flex;align-items:center;gap:var(--spacing-sm);position:relative;z-index:1;line-height:1}button.small{height:32px;font-size:var(--font-size-sm);padding:0 var(--spacing-md);min-width:var(--button-min-width-sm)}button.large{height:48px;font-size:var(--font-size-lg);padding:0 var(--spacing-lg);min-width:var(--button-min-width-lg)}button.icon-only{width:var(--button-min-width-icon-only);padding:0;min-width:unset;aspect-ratio:1}button.icon-only.small{width:var(--button-height-sm)}button.icon-only.medium{width:var(--button-height-md)}button.icon-only.large{width:var(--button-height-lg)}button.full-width{width:100%;min-width:100%}button.filled{background-color:currentColor}button.filled .button-content{color:var(--surface-card)}button.filled.primary:hover:not(.disabled):not(.loading){background-color:var(--primary-color-light)}button.filled.secondary:hover:not(.disabled):not(.loading){background-color:var(--secondary-color-light)}button.filled.success:hover:not(.disabled):not(.loading){background-color:var(--green-400)}button.filled.warning:hover:not(.disabled):not(.loading){background-color:var(--orange-400)}button.filled.danger:hover:not(.disabled):not(.loading){background-color:var(--red-400)}button.outline{background:transparent;border:2px solid currentColor;color:currentColor}button.outline .button-content{color:inherit}button.outline:hover:not(.disabled):not(.loading){background:currentColor}button.outline:hover:not(.disabled):not(.loading) .button-content{color:var(--surface-card)}button.rounded{border-radius:9999px;background-color:currentColor}button.rounded .button-content{color:var(--surface-card)}button.rounded.primary:hover:not(.disabled):not(.loading){background-color:var(--primary-color-light)}button.rounded.secondary:hover:not(.disabled):not(.loading){background-color:var(--secondary-color-light)}button.rounded.success:hover:not(.disabled):not(.loading){background-color:var(--green-400)}button.rounded.warning:hover:not(.disabled):not(.loading){background-color:var(--orange-400)}button.rounded.danger:hover:not(.disabled):not(.loading){background-color:var(--red-400)}button.text{background:transparent;padding:0 var(--spacing-lg);color:currentColor;border-radius:var(--border-radius)}button.text .button-content{color:inherit}button.text:hover:not(.disabled):not(.loading){background:var(--surface-hover)}button.text.icon-only{min-width:unset;width:40px;padding:0}button.text.icon-only.small{width:32px}button.text.icon-only.large{width:48px}button.primary{color:var(--primary-color)}button.secondary{color:var(--secondary-color)}button.success{color:var(--success-color)}button.warning{color:var(--warning-color)}button.danger{color:var(--danger-color)}button:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(var(--primary-color-rgb),.2)}button:active:not(.disabled):not(.loading){transform:translateY(1px)}button.disabled{opacity:.6;cursor:not-allowed;pointer-events:none}button.loading{cursor:wait;pointer-events:none}.loader{width:16px;height:16px;border:2px solid currentColor;border-bottom-color:transparent;border-radius:50%;animation:rotate 1s linear infinite}button i{font-size:1.2em;display:flex;align-items:center;justify-content:center}button.small i{font-size:1.1em}button.large i{font-size:1.3em}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: PshButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'psh-button', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\r\n  [attr.data-state]=\"state()\"\r\n  [attr.aria-label]=\"computedAriaLabel()\"\r\n  [attr.aria-disabled]=\"disabled() || loading()\"\r\n  [attr.aria-busy]=\"loading()\"\r\n  role=\"button\"\r\n  [type]=\"type()\"\r\n  [class]=\"appearance()\"\r\n  [class.primary]=\"variant() === 'primary'\"\r\n  [class.secondary]=\"variant() === 'secondary'\"\r\n  [class.success]=\"variant() === 'success'\"\r\n  [class.warning]=\"variant() === 'warning'\"\r\n  [class.danger]=\"variant() === 'danger'\"\r\n  [class.disabled]=\"disabled()\"\r\n  [class.loading]=\"loading()\"\r\n  [class.full-width]=\"fullWidth()\"\r\n  [class.small]=\"size() === 'small'\"\r\n  [class.large]=\"size() === 'large'\"\r\n  [class.icon-only]=\"iconPosition() === 'only'\"\r\n  [attr.disabled]=\"disabled() || loading() ? '' : null\"\r\n  (click)=\"handleClick($event)\"\r\n>\r\n  <span class=\"button-content\">\r\n    @if (loading()) {\r\n      <span class=\"loader\" aria-hidden=\"true\"></span>\r\n      @if (iconPosition() !== 'only') {\r\n        {{ loadingText() }}\r\n      }\r\n    }\r\n    @if (!loading() && icon() && (iconPosition() === 'left' || iconPosition() === 'only')) {\r\n      <i class=\"ph ph-{{ icon() }}\" aria-hidden=\"true\"></i>\r\n    }\r\n    @if (!loading() && iconPosition() !== 'only') {\r\n      <ng-content></ng-content>\r\n      @if (!hasContent()) {\r\n        Button\r\n      }\r\n    }\r\n    @if (!loading() && icon() && iconPosition() === 'right') {\r\n      <i class=\"ph ph-{{ icon() }}\" aria-hidden=\"true\"></i>\r\n    }\r\n  </span>\r\n</button>", styles: ["button{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 var(--spacing-lg);border:none;font-weight:var(--button-font-weight);font-family:inherit;cursor:pointer;transition:var(--button-transition);min-width:var(--button-min-width-default);position:relative;overflow:hidden;font-size:var(--font-size-base);border-radius:var(--border-radius)}.button-content{display:flex;align-items:center;gap:var(--spacing-sm);position:relative;z-index:1;line-height:1}button.small{height:32px;font-size:var(--font-size-sm);padding:0 var(--spacing-md);min-width:var(--button-min-width-sm)}button.large{height:48px;font-size:var(--font-size-lg);padding:0 var(--spacing-lg);min-width:var(--button-min-width-lg)}button.icon-only{width:var(--button-min-width-icon-only);padding:0;min-width:unset;aspect-ratio:1}button.icon-only.small{width:var(--button-height-sm)}button.icon-only.medium{width:var(--button-height-md)}button.icon-only.large{width:var(--button-height-lg)}button.full-width{width:100%;min-width:100%}button.filled{background-color:currentColor}button.filled .button-content{color:var(--surface-card)}button.filled.primary:hover:not(.disabled):not(.loading){background-color:var(--primary-color-light)}button.filled.secondary:hover:not(.disabled):not(.loading){background-color:var(--secondary-color-light)}button.filled.success:hover:not(.disabled):not(.loading){background-color:var(--green-400)}button.filled.warning:hover:not(.disabled):not(.loading){background-color:var(--orange-400)}button.filled.danger:hover:not(.disabled):not(.loading){background-color:var(--red-400)}button.outline{background:transparent;border:2px solid currentColor;color:currentColor}button.outline .button-content{color:inherit}button.outline:hover:not(.disabled):not(.loading){background:currentColor}button.outline:hover:not(.disabled):not(.loading) .button-content{color:var(--surface-card)}button.rounded{border-radius:9999px;background-color:currentColor}button.rounded .button-content{color:var(--surface-card)}button.rounded.primary:hover:not(.disabled):not(.loading){background-color:var(--primary-color-light)}button.rounded.secondary:hover:not(.disabled):not(.loading){background-color:var(--secondary-color-light)}button.rounded.success:hover:not(.disabled):not(.loading){background-color:var(--green-400)}button.rounded.warning:hover:not(.disabled):not(.loading){background-color:var(--orange-400)}button.rounded.danger:hover:not(.disabled):not(.loading){background-color:var(--red-400)}button.text{background:transparent;padding:0 var(--spacing-lg);color:currentColor;border-radius:var(--border-radius)}button.text .button-content{color:inherit}button.text:hover:not(.disabled):not(.loading){background:var(--surface-hover)}button.text.icon-only{min-width:unset;width:40px;padding:0}button.text.icon-only.small{width:32px}button.text.icon-only.large{width:48px}button.primary{color:var(--primary-color)}button.secondary{color:var(--secondary-color)}button.success{color:var(--success-color)}button.warning{color:var(--warning-color)}button.danger{color:var(--danger-color)}button:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(var(--primary-color-rgb),.2)}button:active:not(.disabled):not(.loading){transform:translateY(1px)}button.disabled{opacity:.6;cursor:not-allowed;pointer-events:none}button.loading{cursor:wait;pointer-events:none}.loader{width:16px;height:16px;border:2px solid currentColor;border-bottom-color:transparent;border-radius:50%;animation:rotate 1s linear infinite}button i{font-size:1.2em;display:flex;align-items:center;justify-content:center}button.small i{font-size:1.1em}button.large i{font-size:1.3em}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
+        }] });
+
+/**
+ * Composant carte métier - conteneur structuré pour contenu professionnel
+ *
+ * Ce composant fournit une structure de carte métier avec :
+ * - Header enrichi avec titre, description et slots pour icônes/badges
+ * - Body avec spacing généreux et bien défini
+ * - Footer optionnel pour métadonnées
+ * - Zone d'actions avec alignement configurable
+ * - Support de différentes densités et variantes de couleur
+ * - Dividers automatiques entre les sections
+ *
+ * @example
+ * <psh-card
+ *   title="Mon titre"
+ *   description="Ma description"
+ *   variant="elevated"
+ * >
+ *   <p>Contenu principal</p>
+ *   <div card-actions>
+ *     <psh-button>Action</psh-button>
+ *   </div>
+ * </psh-card>
+ */
+class PshCardComponent {
+    constructor() {
+        // Model inputs - propriétés modifiables
+        /** Variante visuelle de la carte (default, elevated, outlined) */
+        this.variant = model('default');
+        /** Effet de survol activé (animation translateY) */
+        this.hoverable = model(false);
+        /** Carte cliquable (ajoute cursor pointer et gestion du focus) */
+        this.interactive = model(false);
+        // Regular inputs - propriétés en lecture seule
+        /** Titre principal de la carte */
+        this.title = input('');
+        /** Description/sous-titre optionnel */
+        this.description = input('');
+        /** Variante de couleur pour cartes spéciales (info, success, warning, danger) */
+        this.colorVariant = input('default');
+        /** Niveau de densité du spacing (compact, normal, spacious) */
+        this.density = input('normal');
+        /** Alignement des actions (left, center, right, space-between) */
+        this.actionsAlignment = input('right');
+        /** Afficher le divider entre header et body */
+        this.showHeaderDivider = input(true);
+        /** Afficher le divider entre body et footer */
+        this.showFooterDivider = input(true);
+        /** Afficher le divider avant les actions */
+        this.showActionsDivider = input(true);
+        /** Classes CSS additionnelles */
+        this.cssClass = input('');
+        /** Styles inline personnalisés */
+        this.customStyle = input({});
+        /** État de chargement - affiche un skeleton */
+        this.loading = input(false);
+        /** État désactivé - réduit l'opacité */
+        this.disabled = input(false);
+        // Outputs
+        /** Émis lors du clic sur la carte (si interactive) */
+        this.clicked = output();
+        // Computed values
+        /** Classes CSS calculées selon les propriétés */
+        this.computedClasses = computed(() => {
+            const classes = ['card'];
+            classes.push(`variant-${this.variant()}`);
+            classes.push(`color-${this.colorVariant()}`);
+            classes.push(`density-${this.density()}`);
+            if (this.hoverable())
+                classes.push('hoverable');
+            if (this.interactive())
+                classes.push('interactive');
+            if (this.loading())
+                classes.push('loading');
+            if (this.disabled())
+                classes.push('disabled');
+            if (this.cssClass())
+                classes.push(this.cssClass());
+            return classes.join(' ');
+        });
+        /** Styles calculés */
+        this.computedStyles = computed(() => {
+            return { ...this.customStyle() };
+        });
+        /** Indique si le header doit être affiché */
+        this.hasHeader = computed(() => {
+            return !!(this.title() || this.description());
+        });
+        /** Classe d'alignement des actions */
+        this.actionsAlignmentClass = computed(() => {
+            return `actions-align-${this.actionsAlignment()}`;
+        });
+    }
+    /**
+     * Gère le clic sur la carte
+     * Émet l'événement clicked seulement si la carte est interactive
+     * et non désactivée
+     */
+    handleClick(event) {
+        if (this.interactive() && !this.disabled() && !this.loading()) {
+            this.clicked.emit(event);
+        }
+    }
+    /**
+     * Gère la navigation au clavier (Enter et Space)
+     * Permet d'activer la carte au clavier pour l'accessibilité
+     */
+    handleKeydown(event) {
+        if (this.interactive() && !this.disabled() && !this.loading()) {
+            if (event.key === 'Enter' || event.key === ' ') {
+                event.preventDefault();
+                this.clicked.emit(event);
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: PshCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: PshCardComponent, isStandalone: true, selector: "psh-card", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, hoverable: { classPropertyName: "hoverable", publicName: "hoverable", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, colorVariant: { classPropertyName: "colorVariant", publicName: "colorVariant", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, actionsAlignment: { classPropertyName: "actionsAlignment", publicName: "actionsAlignment", isSignal: true, isRequired: false, transformFunction: null }, showHeaderDivider: { classPropertyName: "showHeaderDivider", publicName: "showHeaderDivider", isSignal: true, isRequired: false, transformFunction: null }, showFooterDivider: { classPropertyName: "showFooterDivider", publicName: "showFooterDivider", isSignal: true, isRequired: false, transformFunction: null }, showActionsDivider: { classPropertyName: "showActionsDivider", publicName: "showActionsDivider", isSignal: true, isRequired: false, transformFunction: null }, cssClass: { classPropertyName: "cssClass", publicName: "cssClass", isSignal: true, isRequired: false, transformFunction: null }, customStyle: { classPropertyName: "customStyle", publicName: "customStyle", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { variant: "variantChange", hoverable: "hoverableChange", interactive: "interactiveChange", clicked: "clicked" }, ngImport: i0, template: "<div\n  [class]=\"computedClasses()\"\n  [ngStyle]=\"computedStyles()\"\n  (click)=\"handleClick($event)\"\n  (keydown)=\"handleKeydown($event)\"\n  role=\"article\"\n  [attr.tabindex]=\"interactive() && !disabled() ? 0 : null\"\n  [attr.aria-disabled]=\"disabled() ? 'true' : null\"\n  [attr.aria-busy]=\"loading() ? 'true' : null\"\n>\n  <!-- Header avec titre et description int\u00E9gr\u00E9s -->\n  @if (hasHeader() || true) {\n    <div class=\"card-header\" [class.has-divider]=\"showHeaderDivider()\">\n      <!-- Slot pour ic\u00F4ne/avatar avant le titre -->\n      <ng-content select=\"[card-header-icon]\"></ng-content>\n\n      <!-- Zone de titre et description -->\n      @if (title() || description()) {\n        <div class=\"card-header-content\">\n          @if (title()) {\n            <h3 class=\"card-title\">{{ title() }}</h3>\n          }\n          @if (description()) {\n            <p class=\"card-description\">{{ description() }}</p>\n          }\n        </div>\n      }\n\n      <!-- Slot pour contenu personnalis\u00E9 du header -->\n      <ng-content select=\"[card-header-content]\"></ng-content>\n\n      <!-- Slot pour badge/tag ou actions secondaires -->\n      <ng-content select=\"[card-header-extra]\"></ng-content>\n    </div>\n  }\n\n  <!-- Body avec contenu principal -->\n  <div class=\"card-body\">\n    <!-- \u00C9tat de chargement -->\n    @if (loading()) {\n      <div class=\"card-loading\">\n        <div class=\"skeleton-line\"></div>\n        <div class=\"skeleton-line\"></div>\n        <div class=\"skeleton-line short\"></div>\n      </div>\n    } @else {\n      <!-- Contenu principal (slot par d\u00E9faut) -->\n      <ng-content></ng-content>\n    }\n  </div>\n\n  <!-- Footer optionnel pour m\u00E9tadonn\u00E9es -->\n  <ng-content select=\"[card-footer]\"></ng-content>\n\n  <!-- Actions -->\n  <ng-content select=\"[card-actions]\"></ng-content>\n</div>\n", styles: [".card{background:var(--surface-card);border-radius:var(--border-radius-lg, 12px);overflow:hidden;transition:all .2s ease;width:100%;display:flex;flex-direction:column;position:relative}.card.variant-elevated{box-shadow:0 1px 3px #0000001a,0 1px 2px #0000000f}.card.variant-elevated.hoverable:hover{box-shadow:0 4px 6px #0000001a,0 2px 4px #0000000f}.card.variant-outlined{border:1px solid var(--surface-border)}.card.variant-default{background:var(--surface-section)}.card.color-info{border-left:4px solid var(--blue-500)}.card.color-info .card-header{background:rgba(var(--blue-500-rgb, 59, 130, 246),.05)}.card.color-success{border-left:4px solid var(--green-500)}.card.color-success .card-header{background:rgba(var(--green-500-rgb, 34, 197, 94),.05)}.card.color-warning{border-left:4px solid var(--orange-500)}.card.color-warning .card-header{background:rgba(var(--orange-500-rgb, 249, 115, 22),.05)}.card.color-danger{border-left:4px solid var(--red-500)}.card.color-danger .card-header{background:rgba(var(--red-500-rgb, 239, 68, 68),.05)}.card.density-compact{--card-header-padding: 12px 16px;--card-body-padding: 16px;--card-footer-padding: 12px 16px;--card-actions-padding: 12px 16px;--card-header-gap: 8px;--card-body-gap: 12px}.card.density-normal{--card-header-padding: 16px 20px;--card-body-padding: 24px;--card-footer-padding: 16px 20px;--card-actions-padding: 16px 20px;--card-header-gap: 12px;--card-body-gap: 16px}.card.density-spacious{--card-header-padding: 24px 28px;--card-body-padding: 32px;--card-footer-padding: 20px 28px;--card-actions-padding: 20px 28px;--card-header-gap: 16px;--card-body-gap: 20px}.card-header{padding:var(--card-header-padding);display:flex;align-items:flex-start;gap:var(--card-header-gap);background:var(--surface-ground);position:relative}.card-header.has-divider{border-bottom:1px solid var(--surface-border)}.card-header-content{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}.card-title{font-size:var(--font-size-lg, 1.125rem);font-weight:600;line-height:1.4;color:var(--text-color);margin:0;overflow:hidden;text-overflow:ellipsis}.card-description{font-size:var(--font-size-sm, .875rem);line-height:1.5;color:var(--text-color-secondary);margin:0}:host ::ng-deep [card-header-icon]{flex-shrink:0;display:flex;align-items:center;justify-content:center}:host ::ng-deep [card-header-content]{flex:1;min-width:0}:host ::ng-deep [card-header-extra]{flex-shrink:0;display:flex;align-items:center;gap:8px}.card-body{padding:var(--card-body-padding);flex:1;display:flex;flex-direction:column;gap:var(--card-body-gap);color:var(--text-color);line-height:1.6;overflow:hidden}.card-body>*{margin:0}:host ::ng-deep .card-body img{max-width:100%;height:auto;border-radius:var(--border-radius)}:host ::ng-deep .card-body table{width:100%;max-width:100%;overflow-x:auto;display:block}:host ::ng-deep .card-body pre{max-width:100%;overflow-x:auto;padding:var(--spacing-sm);background:var(--surface-ground);border-radius:var(--border-radius);font-size:var(--font-size-sm)}:host ::ng-deep .card-body video,:host ::ng-deep .card-body iframe{max-width:100%;height:auto}:host ::ng-deep [card-footer]{padding:var(--card-footer-padding);background:var(--surface-ground);border-top:1px solid var(--surface-border);display:flex;align-items:center;gap:16px;flex-wrap:wrap;font-size:var(--font-size-sm, .875rem);color:var(--text-color-secondary)}:host ::ng-deep [card-actions]{padding:var(--card-actions-padding);background:var(--surface-ground);border-top:1px solid var(--surface-border);display:flex;align-items:center;gap:12px;justify-content:flex-end}:host ::ng-deep [card-actions].actions-align-left{justify-content:flex-start}:host ::ng-deep [card-actions].actions-align-center{justify-content:center}:host ::ng-deep [card-actions].actions-align-right{justify-content:flex-end}:host ::ng-deep [card-actions].actions-align-space-between{justify-content:space-between}.card.hoverable:hover{transform:translateY(-2px)}.card.interactive{cursor:pointer;-webkit-user-select:none;user-select:none}.card.interactive:focus{outline:none;box-shadow:0 0 0 3px rgba(var(--primary-500-rgb, 59, 130, 246),.2)}.card.interactive:focus:not(:focus-visible){box-shadow:none}.card.interactive:active{transform:translateY(0)}.card.disabled{opacity:.6;pointer-events:none;cursor:not-allowed}.card.loading{pointer-events:none}.card-loading{display:flex;flex-direction:column;gap:12px;animation:pulse 1.5s ease-in-out infinite}.skeleton-line{height:16px;background:linear-gradient(90deg,var(--surface-border) 25%,var(--surface-hover) 50%,var(--surface-border) 75%);background-size:200% 100%;animation:shimmer 1.5s ease-in-out infinite;border-radius:4px}.skeleton-line.short{width:60%}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}@media (max-width: 1024px){.card.density-spacious{--card-header-padding: 20px 24px;--card-body-padding: 28px;--card-footer-padding: 18px 24px;--card-actions-padding: 18px 24px}}@media (max-width: 768px){.card.density-compact{--card-header-padding: 10px 12px;--card-body-padding: 12px;--card-footer-padding: 10px 12px;--card-actions-padding: 10px 12px}.card.density-normal{--card-header-padding: 12px 16px;--card-body-padding: 16px;--card-footer-padding: 12px 16px;--card-actions-padding: 12px 16px}.card.density-spacious{--card-header-padding: 16px 20px;--card-body-padding: 20px;--card-footer-padding: 16px 20px;--card-actions-padding: 16px 20px}.card-title{font-size:clamp(.9375rem,2vw,1rem)}.card-description{font-size:var(--font-size-xs)}:host ::ng-deep [card-actions]{flex-wrap:wrap;gap:8px}:host ::ng-deep [card-actions]>*{flex:1;min-width:120px}:host ::ng-deep [card-footer]{font-size:var(--font-size-xs);gap:12px}}@media (max-width: 480px){.card.density-compact{--card-header-padding: 8px 12px;--card-body-padding: 12px;--card-footer-padding: 8px 12px;--card-actions-padding: 8px 12px}.card.density-normal{--card-header-padding: 10px 12px;--card-body-padding: 12px;--card-footer-padding: 10px 12px;--card-actions-padding: 10px 12px}.card.density-spacious{--card-header-padding: 12px 16px;--card-body-padding: 16px;--card-footer-padding: 12px 16px;--card-actions-padding: 12px 16px}.card-header{flex-wrap:wrap;gap:var(--spacing-xs)}.card-title{font-size:clamp(.875rem,3vw,.9375rem);line-height:1.3}.card-description{font-size:var(--font-size-xs);line-height:1.4}:host ::ng-deep [card-header-icon]{width:100%;justify-content:flex-start}:host ::ng-deep [card-header-extra]{width:100%;justify-content:flex-start}:host ::ng-deep [card-footer]{flex-direction:column;align-items:flex-start;gap:8px}:host ::ng-deep [card-actions]{flex-direction:column;gap:8px}:host ::ng-deep [card-actions]>*{width:100%;min-width:0}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: PshCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'psh-card', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  [class]=\"computedClasses()\"\n  [ngStyle]=\"computedStyles()\"\n  (click)=\"handleClick($event)\"\n  (keydown)=\"handleKeydown($event)\"\n  role=\"article\"\n  [attr.tabindex]=\"interactive() && !disabled() ? 0 : null\"\n  [attr.aria-disabled]=\"disabled() ? 'true' : null\"\n  [attr.aria-busy]=\"loading() ? 'true' : null\"\n>\n  <!-- Header avec titre et description int\u00E9gr\u00E9s -->\n  @if (hasHeader() || true) {\n    <div class=\"card-header\" [class.has-divider]=\"showHeaderDivider()\">\n      <!-- Slot pour ic\u00F4ne/avatar avant le titre -->\n      <ng-content select=\"[card-header-icon]\"></ng-content>\n\n      <!-- Zone de titre et description -->\n      @if (title() || description()) {\n        <div class=\"card-header-content\">\n          @if (title()) {\n            <h3 class=\"card-title\">{{ title() }}</h3>\n          }\n          @if (description()) {\n            <p class=\"card-description\">{{ description() }}</p>\n          }\n        </div>\n      }\n\n      <!-- Slot pour contenu personnalis\u00E9 du header -->\n      <ng-content select=\"[card-header-content]\"></ng-content>\n\n      <!-- Slot pour badge/tag ou actions secondaires -->\n      <ng-content select=\"[card-header-extra]\"></ng-content>\n    </div>\n  }\n\n  <!-- Body avec contenu principal -->\n  <div class=\"card-body\">\n    <!-- \u00C9tat de chargement -->\n    @if (loading()) {\n      <div class=\"card-loading\">\n        <div class=\"skeleton-line\"></div>\n        <div class=\"skeleton-line\"></div>\n        <div class=\"skeleton-line short\"></div>\n      </div>\n    } @else {\n      <!-- Contenu principal (slot par d\u00E9faut) -->\n      <ng-content></ng-content>\n    }\n  </div>\n\n  <!-- Footer optionnel pour m\u00E9tadonn\u00E9es -->\n  <ng-content select=\"[card-footer]\"></ng-content>\n\n  <!-- Actions -->\n  <ng-content select=\"[card-actions]\"></ng-content>\n</div>\n", styles: [".card{background:var(--surface-card);border-radius:var(--border-radius-lg, 12px);overflow:hidden;transition:all .2s ease;width:100%;display:flex;flex-direction:column;position:relative}.card.variant-elevated{box-shadow:0 1px 3px #0000001a,0 1px 2px #0000000f}.card.variant-elevated.hoverable:hover{box-shadow:0 4px 6px #0000001a,0 2px 4px #0000000f}.card.variant-outlined{border:1px solid var(--surface-border)}.card.variant-default{background:var(--surface-section)}.card.color-info{border-left:4px solid var(--blue-500)}.card.color-info .card-header{background:rgba(var(--blue-500-rgb, 59, 130, 246),.05)}.card.color-success{border-left:4px solid var(--green-500)}.card.color-success .card-header{background:rgba(var(--green-500-rgb, 34, 197, 94),.05)}.card.color-warning{border-left:4px solid var(--orange-500)}.card.color-warning .card-header{background:rgba(var(--orange-500-rgb, 249, 115, 22),.05)}.card.color-danger{border-left:4px solid var(--red-500)}.card.color-danger .card-header{background:rgba(var(--red-500-rgb, 239, 68, 68),.05)}.card.density-compact{--card-header-padding: 12px 16px;--card-body-padding: 16px;--card-footer-padding: 12px 16px;--card-actions-padding: 12px 16px;--card-header-gap: 8px;--card-body-gap: 12px}.card.density-normal{--card-header-padding: 16px 20px;--card-body-padding: 24px;--card-footer-padding: 16px 20px;--card-actions-padding: 16px 20px;--card-header-gap: 12px;--card-body-gap: 16px}.card.density-spacious{--card-header-padding: 24px 28px;--card-body-padding: 32px;--card-footer-padding: 20px 28px;--card-actions-padding: 20px 28px;--card-header-gap: 16px;--card-body-gap: 20px}.card-header{padding:var(--card-header-padding);display:flex;align-items:flex-start;gap:var(--card-header-gap);background:var(--surface-ground);position:relative}.card-header.has-divider{border-bottom:1px solid var(--surface-border)}.card-header-content{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}.card-title{font-size:var(--font-size-lg, 1.125rem);font-weight:600;line-height:1.4;color:var(--text-color);margin:0;overflow:hidden;text-overflow:ellipsis}.card-description{font-size:var(--font-size-sm, .875rem);line-height:1.5;color:var(--text-color-secondary);margin:0}:host ::ng-deep [card-header-icon]{flex-shrink:0;display:flex;align-items:center;justify-content:center}:host ::ng-deep [card-header-content]{flex:1;min-width:0}:host ::ng-deep [card-header-extra]{flex-shrink:0;display:flex;align-items:center;gap:8px}.card-body{padding:var(--card-body-padding);flex:1;display:flex;flex-direction:column;gap:var(--card-body-gap);color:var(--text-color);line-height:1.6;overflow:hidden}.card-body>*{margin:0}:host ::ng-deep .card-body img{max-width:100%;height:auto;border-radius:var(--border-radius)}:host ::ng-deep .card-body table{width:100%;max-width:100%;overflow-x:auto;display:block}:host ::ng-deep .card-body pre{max-width:100%;overflow-x:auto;padding:var(--spacing-sm);background:var(--surface-ground);border-radius:var(--border-radius);font-size:var(--font-size-sm)}:host ::ng-deep .card-body video,:host ::ng-deep .card-body iframe{max-width:100%;height:auto}:host ::ng-deep [card-footer]{padding:var(--card-footer-padding);background:var(--surface-ground);border-top:1px solid var(--surface-border);display:flex;align-items:center;gap:16px;flex-wrap:wrap;font-size:var(--font-size-sm, .875rem);color:var(--text-color-secondary)}:host ::ng-deep [card-actions]{padding:var(--card-actions-padding);background:var(--surface-ground);border-top:1px solid var(--surface-border);display:flex;align-items:center;gap:12px;justify-content:flex-end}:host ::ng-deep [card-actions].actions-align-left{justify-content:flex-start}:host ::ng-deep [card-actions].actions-align-center{justify-content:center}:host ::ng-deep [card-actions].actions-align-right{justify-content:flex-end}:host ::ng-deep [card-actions].actions-align-space-between{justify-content:space-between}.card.hoverable:hover{transform:translateY(-2px)}.card.interactive{cursor:pointer;-webkit-user-select:none;user-select:none}.card.interactive:focus{outline:none;box-shadow:0 0 0 3px rgba(var(--primary-500-rgb, 59, 130, 246),.2)}.card.interactive:focus:not(:focus-visible){box-shadow:none}.card.interactive:active{transform:translateY(0)}.card.disabled{opacity:.6;pointer-events:none;cursor:not-allowed}.card.loading{pointer-events:none}.card-loading{display:flex;flex-direction:column;gap:12px;animation:pulse 1.5s ease-in-out infinite}.skeleton-line{height:16px;background:linear-gradient(90deg,var(--surface-border) 25%,var(--surface-hover) 50%,var(--surface-border) 75%);background-size:200% 100%;animation:shimmer 1.5s ease-in-out infinite;border-radius:4px}.skeleton-line.short{width:60%}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}@media (max-width: 1024px){.card.density-spacious{--card-header-padding: 20px 24px;--card-body-padding: 28px;--card-footer-padding: 18px 24px;--card-actions-padding: 18px 24px}}@media (max-width: 768px){.card.density-compact{--card-header-padding: 10px 12px;--card-body-padding: 12px;--card-footer-padding: 10px 12px;--card-actions-padding: 10px 12px}.card.density-normal{--card-header-padding: 12px 16px;--card-body-padding: 16px;--card-footer-padding: 12px 16px;--card-actions-padding: 12px 16px}.card.density-spacious{--card-header-padding: 16px 20px;--card-body-padding: 20px;--card-footer-padding: 16px 20px;--card-actions-padding: 16px 20px}.card-title{font-size:clamp(.9375rem,2vw,1rem)}.card-description{font-size:var(--font-size-xs)}:host ::ng-deep [card-actions]{flex-wrap:wrap;gap:8px}:host ::ng-deep [card-actions]>*{flex:1;min-width:120px}:host ::ng-deep [card-footer]{font-size:var(--font-size-xs);gap:12px}}@media (max-width: 480px){.card.density-compact{--card-header-padding: 8px 12px;--card-body-padding: 12px;--card-footer-padding: 8px 12px;--card-actions-padding: 8px 12px}.card.density-normal{--card-header-padding: 10px 12px;--card-body-padding: 12px;--card-footer-padding: 10px 12px;--card-actions-padding: 10px 12px}.card.density-spacious{--card-header-padding: 12px 16px;--card-body-padding: 16px;--card-footer-padding: 12px 16px;--card-actions-padding: 12px 16px}.card-header{flex-wrap:wrap;gap:var(--spacing-xs)}.card-title{font-size:clamp(.875rem,3vw,.9375rem);line-height:1.3}.card-description{font-size:var(--font-size-xs);line-height:1.4}:host ::ng-deep [card-header-icon]{width:100%;justify-content:flex-start}:host ::ng-deep [card-header-extra]{width:100%;justify-content:flex-start}:host ::ng-deep [card-footer]{flex-direction:column;align-items:flex-start;gap:8px}:host ::ng-deep [card-actions]{flex-direction:column;gap:8px}:host ::ng-deep [card-actions]>*{width:100%;min-width:0}}\n"] }]
+        }] });
+
+const TAG_CONFIG = new InjectionToken('TAG_CONFIG', {
+    factory: () => ({
+        variant: 'primary',
+        size: 'medium',
+        closable: false,
+        disabled: false,
+        closeLabel: 'Supprimer le tag',
+        ariaLabels: {
+            close: 'Supprimer le tag',
+            disabled: 'Tag désactivé',
+            status: 'État'
+        }
+    })
+});
+const TAG_STYLES = new InjectionToken('TAG_STYLES', {
+    factory: () => []
+});
+class PshTagComponent {
+    constructor() {
+        this.config = inject(TAG_CONFIG);
+        this.styles = inject(TAG_STYLES, { optional: true }) ?? [];
+        // Model inputs with defaults from config
+        this.variant = model(this.config.variant ?? 'primary');
+        this.size = model(this.config.size ?? 'medium');
+        this.closable = model(this.config.closable ?? false);
+        this.disabled = model(this.config.disabled ?? false);
+        // Regular inputs
+        this.icon = input();
+        this.closeLabel = input(this.config.closeLabel ?? 'Supprimer le tag');
+        this.content = input('Tag');
+        // Outputs
+        this.clicked = output();
+        this.closed = output();
+        // Computed values
+        this.customStyles = computed(() => Object.assign({}, ...this.styles));
+        this.state = computed(() => this.disabled() ? 'disabled' : 'default');
+    }
+    handleClick(event) {
+        if (!this.disabled()) {
+            this.clicked.emit(event);
+        }
+    }
+    handleClose(event) {
+        event.stopPropagation();
+        if (!this.disabled()) {
+            this.closed.emit();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: PshTagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: PshTagComponent, isStandalone: true, selector: "psh-tag", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { variant: "variantChange", size: "sizeChange", closable: "closableChange", disabled: "disabledChange", clicked: "clicked", closed: "closed" }, ngImport: i0, template: "<div \r\n  class=\"tag\"\r\n  [class.primary]=\"variant() === 'primary'\"\r\n  [class.secondary]=\"variant() === 'secondary'\"\r\n  [class.success]=\"variant() === 'success'\"\r\n  [class.warning]=\"variant() === 'warning'\"\r\n  [class.danger]=\"variant() === 'danger'\"\r\n  [class.small]=\"size() === 'small'\"\r\n  [class.large]=\"size() === 'large'\"\r\n  [class.disabled]=\"disabled()\"\r\n  [attr.aria-disabled]=\"disabled()\"\r\n  [attr.data-state]=\"state()\"\r\n  role=\"status\"\r\n  (click)=\"handleClick($event)\"\r\n>\r\n  @if (icon()) {\r\n    <i class=\"ph ph-{{ icon() }}\" aria-hidden=\"true\"></i>\r\n  }\r\n  <span class=\"tag-content\">\r\n    <ng-content>{{ content() }}</ng-content>\r\n  </span>\r\n  @if (closable()) {\r\n    <button\r\n      type=\"button\"\r\n      class=\"tag-close\"\r\n      (click)=\"handleClose($event)\"\r\n      [attr.aria-label]=\"closeLabel()\"\r\n      [disabled]=\"disabled()\"\r\n    >\r\n      <i class=\"ph ph-x\" aria-hidden=\"true\"></i>\r\n    </button>\r\n  }\r\n</div>", styles: [".tag{display:inline-flex;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--border-radius);font-size:var(--font-size-sm);font-weight:500;line-height:1;cursor:default;transition:all .2s ease;-webkit-user-select:none;user-select:none}.tag i{font-size:1rem}.tag-content{display:inline-block;vertical-align:middle}.tag-close{display:inline-flex;align-items:center;justify-content:center;padding:2px;border:none;background:transparent;color:inherit;cursor:pointer;opacity:.7;transition:opacity .2s ease;border-radius:var(--border-radius);margin-left:var(--spacing-xs)}.tag-close:hover{opacity:1;background:#0000001a}.tag-close:focus{outline:none;box-shadow:0 0 0 2px rgba(var(--primary-color-rgb),.2)}.tag.primary{background:var(--primary-color);color:var(--primary-color-text)}.tag.secondary{background:var(--secondary-color);color:var(--secondary-color-text)}.tag.success{background:var(--success-color);color:var(--success-color-text)}.tag.warning{background:var(--warning-color);color:var(--warning-color-text)}.tag.danger{background:var(--danger-color);color:var(--danger-color-text)}.tag.small{padding:calc(var(--spacing-xs) * .5) var(--spacing-xs);font-size:var(--font-size-xs)}.tag.small i{font-size:.875rem}.tag.large{padding:var(--spacing-sm) var(--spacing-md);font-size:var(--font-size-base)}.tag.large i{font-size:1.125rem}.tag.disabled{opacity:.6;cursor:not-allowed}.tag.disabled .tag-close{cursor:not-allowed}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: PshTagComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'psh-tag', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div \r\n  class=\"tag\"\r\n  [class.primary]=\"variant() === 'primary'\"\r\n  [class.secondary]=\"variant() === 'secondary'\"\r\n  [class.success]=\"variant() === 'success'\"\r\n  [class.warning]=\"variant() === 'warning'\"\r\n  [class.danger]=\"variant() === 'danger'\"\r\n  [class.small]=\"size() === 'small'\"\r\n  [class.large]=\"size() === 'large'\"\r\n  [class.disabled]=\"disabled()\"\r\n  [attr.aria-disabled]=\"disabled()\"\r\n  [attr.data-state]=\"state()\"\r\n  role=\"status\"\r\n  (click)=\"handleClick($event)\"\r\n>\r\n  @if (icon()) {\r\n    <i class=\"ph ph-{{ icon() }}\" aria-hidden=\"true\"></i>\r\n  }\r\n  <span class=\"tag-content\">\r\n    <ng-content>{{ content() }}</ng-content>\r\n  </span>\r\n  @if (closable()) {\r\n    <button\r\n      type=\"button\"\r\n      class=\"tag-close\"\r\n      (click)=\"handleClose($event)\"\r\n      [attr.aria-label]=\"closeLabel()\"\r\n      [disabled]=\"disabled()\"\r\n    >\r\n      <i class=\"ph ph-x\" aria-hidden=\"true\"></i>\r\n    </button>\r\n  }\r\n</div>", styles: [".tag{display:inline-flex;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--border-radius);font-size:var(--font-size-sm);font-weight:500;line-height:1;cursor:default;transition:all .2s ease;-webkit-user-select:none;user-select:none}.tag i{font-size:1rem}.tag-content{display:inline-block;vertical-align:middle}.tag-close{display:inline-flex;align-items:center;justify-content:center;padding:2px;border:none;background:transparent;color:inherit;cursor:pointer;opacity:.7;transition:opacity .2s ease;border-radius:var(--border-radius);margin-left:var(--spacing-xs)}.tag-close:hover{opacity:1;background:#0000001a}.tag-close:focus{outline:none;box-shadow:0 0 0 2px rgba(var(--primary-color-rgb),.2)}.tag.primary{background:var(--primary-color);color:var(--primary-color-text)}.tag.secondary{background:var(--secondary-color);color:var(--secondary-color-text)}.tag.success{background:var(--success-color);color:var(--success-color-text)}.tag.warning{background:var(--warning-color);color:var(--warning-color-text)}.tag.danger{background:var(--danger-color);color:var(--danger-color-text)}.tag.small{padding:calc(var(--spacing-xs) * .5) var(--spacing-xs);font-size:var(--font-size-xs)}.tag.small i{font-size:.875rem}.tag.large{padding:var(--spacing-sm) var(--spacing-md);font-size:var(--font-size-base)}.tag.large i{font-size:1.125rem}.tag.disabled{opacity:.6;cursor:not-allowed}.tag.disabled .tag-close{cursor:not-allowed}\n"] }]
+        }] });
+
+/**
+ * Composant carte de statistiques
+ *
+ * Composant spécialisé pour afficher des statistiques avec icône,
+ * valeur, description et tag d'évolution optionnel
+ */
+class PshStatCardComponent {
+    constructor() {
+        // Regular inputs
+        /** Données de la statistique */
+        this.data = input.required();
+        /** Variante de la carte de base */
+        this.cardVariant = input('default');
+        /** Carte cliquable */
+        this.interactive = input(false);
+        // Outputs
+        /** Émis lors du clic sur la carte */
+        this.clicked = output();
+        // Computed values
+        /** Style de l'icône avec couleur de fond personnalisée */
+        this.iconStyle = computed(() => {
+            const background = this.data().iconBackground;
+            return background ? { 'background': background } : {};
+        });
+        /** Vérifie si un tag doit être affiché */
+        this.hasTag = computed(() => {
+            const data = this.data();
+            return !!(data.tagVariant && data.tagLabel);
+        });
+    }
+    /**
+     * Gère le clic sur la carte
+     */
+    handleCardClick(event) {
+        this.clicked.emit(event);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: PshStatCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: PshStatCardComponent, isStandalone: true, selector: "psh-stat-card", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, cardVariant: { classPropertyName: "cardVariant", publicName: "cardVariant", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<psh-card \n  [variant]=\"cardVariant()\"\n  [interactive]=\"interactive()\"\n  [hoverable]=\"interactive()\"\n  (clicked)=\"handleCardClick($event)\"\n  class=\"stat-card\"\n>\n  <!-- Ic\u00F4ne \u00E0 gauche -->\n  <div card-side class=\"stat-icon\" [ngStyle]=\"iconStyle()\">\n    <i class=\"ph ph-{{ data().icon }}\" aria-hidden=\"true\"></i>\n  </div>\n  \n  <!-- Contenu principal -->\n  <div class=\"stat-content\">\n    <h3 class=\"stat-value\">{{ data().value }}</h3>\n    <p class=\"stat-description\">{{ data().description }}</p>\n    \n    <!-- Tag d'\u00E9volution si pr\u00E9sent -->\n    @if (hasTag()) {\n      <psh-tag [variant]=\"data().tagVariant!\">\n        {{ data().tagLabel }}\n      </psh-tag>\n    }\n  </div>\n</psh-card>", styles: [".stat-card{display:flex!important;flex-direction:row;align-items:center;min-height:120px}:host ::ng-deep [card-side].stat-icon{width:64px!important;min-width:64px!important;height:64px!important;display:flex!important;align-items:center;justify-content:center;border-radius:var(--border-radius);margin:var(--spacing-md);flex-shrink:0}:host ::ng-deep [card-side].stat-icon i{font-size:2rem;color:#fff}.stat-content{padding:var(--spacing-md);flex:1;min-width:0}.stat-value{font-size:var(--font-size-2xl);font-weight:600;color:var(--text-color);margin:0 0 var(--spacing-xs);line-height:1.1}.stat-description{color:var(--text-color-secondary);margin:0 0 var(--spacing-sm);font-size:var(--font-size-sm);line-height:var(--line-height-relaxed)}@media (max-width: 768px){.stat-card{min-height:100px}:host ::ng-deep [card-side].stat-icon{width:56px!important;min-width:56px!important;height:56px!important;margin:var(--spacing-sm)}:host ::ng-deep [card-side].stat-icon i{font-size:1.75rem}.stat-content{padding:var(--spacing-sm)}.stat-value{font-size:clamp(1.25rem,3vw + .5rem,1.5rem)}.stat-description{font-size:var(--font-size-xs)}}@media (max-width: 480px){.stat-card{flex-direction:column!important;align-items:center!important;text-align:center;min-height:auto;padding:var(--spacing-md)!important}:host ::ng-deep [card-side].stat-icon{width:56px!important;min-width:56px!important;height:56px!important;margin:0 auto var(--spacing-sm) auto}:host ::ng-deep [card-side].stat-icon i{font-size:1.75rem}.stat-content{padding:0;width:100%;text-align:center}.stat-value{font-size:clamp(1.125rem,4vw,1.375rem);margin-bottom:var(--spacing-xs)}.stat-description{font-size:var(--font-size-xs);margin-bottom:var(--spacing-xs)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: PshCardComponent, selector: "psh-card", inputs: ["variant", "hoverable", "interactive", "title", "description", "colorVariant", "density", "actionsAlignment", "showHeaderDivider", "showFooterDivider", "showActionsDivider", "cssClass", "customStyle", "loading", "disabled"], outputs: ["variantChange", "hoverableChange", "interactiveChange", "clicked"] }, { kind: "component", type: PshTagComponent, selector: "psh-tag", inputs: ["variant", "size", "closable", "disabled", "icon", "closeLabel", "content"], outputs: ["variantChange", "sizeChange", "closableChange", "disabledChange", "clicked", "closed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: PshStatCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'psh-stat-card', standalone: true, imports: [CommonModule, PshCardComponent, PshTagComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<psh-card \n  [variant]=\"cardVariant()\"\n  [interactive]=\"interactive()\"\n  [hoverable]=\"interactive()\"\n  (clicked)=\"handleCardClick($event)\"\n  class=\"stat-card\"\n>\n  <!-- Ic\u00F4ne \u00E0 gauche -->\n  <div card-side class=\"stat-icon\" [ngStyle]=\"iconStyle()\">\n    <i class=\"ph ph-{{ data().icon }}\" aria-hidden=\"true\"></i>\n  </div>\n  \n  <!-- Contenu principal -->\n  <div class=\"stat-content\">\n    <h3 class=\"stat-value\">{{ data().value }}</h3>\n    <p class=\"stat-description\">{{ data().description }}</p>\n    \n    <!-- Tag d'\u00E9volution si pr\u00E9sent -->\n    @if (hasTag()) {\n      <psh-tag [variant]=\"data().tagVariant!\">\n        {{ data().tagLabel }}\n      </psh-tag>\n    }\n  </div>\n</psh-card>", styles: [".stat-card{display:flex!important;flex-direction:row;align-items:center;min-height:120px}:host ::ng-deep [card-side].stat-icon{width:64px!important;min-width:64px!important;height:64px!important;display:flex!important;align-items:center;justify-content:center;border-radius:var(--border-radius);margin:var(--spacing-md);flex-shrink:0}:host ::ng-deep [card-side].stat-icon i{font-size:2rem;color:#fff}.stat-content{padding:var(--spacing-md);flex:1;min-width:0}.stat-value{font-size:var(--font-size-2xl);font-weight:600;color:var(--text-color);margin:0 0 var(--spacing-xs);line-height:1.1}.stat-description{color:var(--text-color-secondary);margin:0 0 var(--spacing-sm);font-size:var(--font-size-sm);line-height:var(--line-height-relaxed)}@media (max-width: 768px){.stat-card{min-height:100px}:host ::ng-deep [card-side].stat-icon{width:56px!important;min-width:56px!important;height:56px!important;margin:var(--spacing-sm)}:host ::ng-deep [card-side].stat-icon i{font-size:1.75rem}.stat-content{padding:var(--spacing-sm)}.stat-value{font-size:clamp(1.25rem,3vw + .5rem,1.5rem)}.stat-description{font-size:var(--font-size-xs)}}@media (max-width: 480px){.stat-card{flex-direction:column!important;align-items:center!important;text-align:center;min-height:auto;padding:var(--spacing-md)!important}:host ::ng-deep [card-side].stat-icon{width:56px!important;min-width:56px!important;height:56px!important;margin:0 auto var(--spacing-sm) auto}:host ::ng-deep [card-side].stat-icon i{font-size:1.75rem}.stat-content{padding:0;width:100%;text-align:center}.stat-value{font-size:clamp(1.125rem,4vw,1.375rem);margin-bottom:var(--spacing-xs)}.stat-description{font-size:var(--font-size-xs);margin-bottom:var(--spacing-xs)}}\n"] }]
+        }] });
+
+/**
+ * Composant carte horizontale
+ *
+ * Composant spécialisé qui compose psh-card pour créer
+ * une mise en page horizontale avec contenu latéral
+ */
+class PshHorizontalCardComponent {
+    constructor() {
+        // Model inputs
+        /** Variante de la carte de base */
+        this.variant = model('default');
+        /** Carte cliquable */
+        this.interactive = model(false);
+        /** Effet de survol */
+        this.hoverable = model(false);
+        // Regular inputs
+        /** Largeur du contenu latéral */
+        this.sideWidth = input('200px');
+        /** Gap entre le contenu latéral et principal */
+        this.gap = input('var(--spacing-md)');
+        /** Padding du contenu latéral */
+        this.sidePadding = input('0');
+        /** Padding du contenu principal */
+        this.contentPadding = input('var(--spacing-md)');
+        /** Hauteur du contenu latéral (pour mobile) */
+        this.mobileHeight = input('200px');
+        // Outputs
+        /** Émis lors du clic sur la carte */
+        this.clicked = output();
+    }
+    /**
+     * Gère le clic sur la carte
+     */
+    handleCardClick(event) {
+        this.clicked.emit(event);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: PshHorizontalCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.4", type: PshHorizontalCardComponent, isStandalone: true, selector: "psh-horizontal-card", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, hoverable: { classPropertyName: "hoverable", publicName: "hoverable", isSignal: true, isRequired: false, transformFunction: null }, sideWidth: { classPropertyName: "sideWidth", publicName: "sideWidth", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, sidePadding: { classPropertyName: "sidePadding", publicName: "sidePadding", isSignal: true, isRequired: false, transformFunction: null }, contentPadding: { classPropertyName: "contentPadding", publicName: "contentPadding", isSignal: true, isRequired: false, transformFunction: null }, mobileHeight: { classPropertyName: "mobileHeight", publicName: "mobileHeight", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { variant: "variantChange", interactive: "interactiveChange", hoverable: "hoverableChange", clicked: "clicked" }, ngImport: i0, template: "<psh-card \n  [variant]=\"variant()\"\n  [interactive]=\"interactive()\"\n  [hoverable]=\"hoverable()\"\n  (clicked)=\"handleCardClick($event)\"\n  class=\"horizontal-card\"\n  [customStyle]=\"{\n    'display': 'flex',\n    'flex-direction': 'row',\n    'align-items': 'stretch',\n    'gap': gap(),\n    '--horizontal-side-width': sideWidth(),\n    '--horizontal-side-padding': sidePadding(),\n    '--horizontal-content-padding': contentPadding(),\n    '--horizontal-mobile-height': mobileHeight()\n  }\"\n>\n  <!-- Contenu lat\u00E9ral -->\n  <div card-side class=\"horizontal-side\" [style.width]=\"sideWidth()\">\n    <ng-content select=\"[horizontal-side]\"></ng-content>\n  </div>\n  \n  <!-- Contenu principal -->\n  <div class=\"horizontal-content\">\n    <!-- Header optionnel -->\n    <ng-content select=\"[horizontal-header]\"></ng-content>\n    \n    <!-- Contenu principal -->\n    <ng-content></ng-content>\n    \n    <!-- Actions optionnelles -->\n    <ng-content select=\"[horizontal-actions]\"></ng-content>\n  </div>\n</psh-card>", styles: [".horizontal-card{overflow:hidden}::ng-content [horizontal-side]{display:flex!important;align-items:center;justify-content:center;background:var(--surface-ground);overflow:hidden;padding:var(--horizontal-side-padding)!important;border:none!important;width:var(--horizontal-side-width)}.horizontal-content{flex:1;min-width:0;display:flex;flex-direction:column;padding:var(--horizontal-content-padding)}::ng-content [horizontal-header]{margin-bottom:var(--spacing-sm)}::ng-content [horizontal-actions]{margin-top:auto;padding-top:var(--spacing-sm);display:flex;gap:var(--spacing-sm)}@media (max-width: 768px){.horizontal-card{flex-direction:column!important}.horizontal-card{--horizontal-side-width: 100%}::ng-content [horizontal-side]{width:100%!important;height:var(--horizontal-mobile-height);min-height:180px}.horizontal-content{padding:var(--spacing-sm)}::ng-content [horizontal-actions]{flex-wrap:wrap}}@media (max-width: 480px){::ng-content [horizontal-side]{height:auto;min-height:150px;padding:var(--spacing-sm)!important}.horizontal-content{padding:var(--spacing-xs)}::ng-content [horizontal-header]{margin-bottom:var(--spacing-xs)}::ng-content [horizontal-actions]{flex-direction:column;padding-top:var(--spacing-xs)}::ng-content [horizontal-actions]>*{width:100%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: PshCardComponent, selector: "psh-card", inputs: ["variant", "hoverable", "interactive", "title", "description", "colorVariant", "density", "actionsAlignment", "showHeaderDivider", "showFooterDivider", "showActionsDivider", "cssClass", "customStyle", "loading", "disabled"], outputs: ["variantChange", "hoverableChange", "interactiveChange", "clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: PshHorizontalCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'psh-horizontal-card', standalone: true, imports: [CommonModule, PshCardComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<psh-card \n  [variant]=\"variant()\"\n  [interactive]=\"interactive()\"\n  [hoverable]=\"hoverable()\"\n  (clicked)=\"handleCardClick($event)\"\n  class=\"horizontal-card\"\n  [customStyle]=\"{\n    'display': 'flex',\n    'flex-direction': 'row',\n    'align-items': 'stretch',\n    'gap': gap(),\n    '--horizontal-side-width': sideWidth(),\n    '--horizontal-side-padding': sidePadding(),\n    '--horizontal-content-padding': contentPadding(),\n    '--horizontal-mobile-height': mobileHeight()\n  }\"\n>\n  <!-- Contenu lat\u00E9ral -->\n  <div card-side class=\"horizontal-side\" [style.width]=\"sideWidth()\">\n    <ng-content select=\"[horizontal-side]\"></ng-content>\n  </div>\n  \n  <!-- Contenu principal -->\n  <div class=\"horizontal-content\">\n    <!-- Header optionnel -->\n    <ng-content select=\"[horizontal-header]\"></ng-content>\n    \n    <!-- Contenu principal -->\n    <ng-content></ng-content>\n    \n    <!-- Actions optionnelles -->\n    <ng-content select=\"[horizontal-actions]\"></ng-content>\n  </div>\n</psh-card>", styles: [".horizontal-card{overflow:hidden}::ng-content [horizontal-side]{display:flex!important;align-items:center;justify-content:center;background:var(--surface-ground);overflow:hidden;padding:var(--horizontal-side-padding)!important;border:none!important;width:var(--horizontal-side-width)}.horizontal-content{flex:1;min-width:0;display:flex;flex-direction:column;padding:var(--horizontal-content-padding)}::ng-content [horizontal-header]{margin-bottom:var(--spacing-sm)}::ng-content [horizontal-actions]{margin-top:auto;padding-top:var(--spacing-sm);display:flex;gap:var(--spacing-sm)}@media (max-width: 768px){.horizontal-card{flex-direction:column!important}.horizontal-card{--horizontal-side-width: 100%}::ng-content [horizontal-side]{width:100%!important;height:var(--horizontal-mobile-height);min-height:180px}.horizontal-content{padding:var(--spacing-sm)}::ng-content [horizontal-actions]{flex-wrap:wrap}}@media (max-width: 480px){::ng-content [horizontal-side]{height:auto;min-height:150px;padding:var(--spacing-sm)!important}.horizontal-content{padding:var(--spacing-xs)}::ng-content [horizontal-header]{margin-bottom:var(--spacing-xs)}::ng-content [horizontal-actions]{flex-direction:column;padding-top:var(--spacing-xs)}::ng-content [horizontal-actions]>*{width:100%}}\n"] }]
+        }] });
+
+/**
+ * Composant carte d'informations
+ *
+ * Composant spécialisé qui compose psh-card pour afficher
+ * des données structurées sous forme de paires label/valeur
+ */
+class PshInfoCardComponent {
+    constructor() {
+        // Regular inputs
+        /** Titre de la carte */
+        this.title = input('');
+        /** Données à afficher */
+        this.data = input([]);
+        /** Options d'affichage */
+        this.options = input({
+            showEmptyState: true,
+            emptyStateMessage: 'Aucune information disponible',
+            labelWidth: undefined,
+            valueWidth: undefined
+        });
+        // Model inputs
+        /** Variante de la carte de base */
+        this.cardVariant = model('outlined');
+        /** Icône du titre */
+        this.icon = input('circle-dashed');
+        // Computed values
+        /** Indique si l'état vide doit être affiché */
+        this.shouldShowEmptyState = computed(() => {
+            return this.options().showEmptyState && (!this.data() || this.data().length === 0);
+        });
+        /** Message d'état vide */
+        this.getEmptyStateMessage = computed(() => {
+            return this.options().emptyStateMessage || 'Aucune information disponible';
+        });
+        /** Classe CSS de l'icône de titre */
+        this.titleIcon = computed(() => {
+            return `ph-${this.icon()}`;
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: PshInfoCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: PshInfoCardComponent, isStandalone: true, selector: "psh-info-card", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, cardVariant: { classPropertyName: "cardVariant", publicName: "cardVariant", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cardVariant: "cardVariantChange" }, ngImport: i0, template: "<psh-card [variant]=\"cardVariant()\">\n  <!-- En-t\u00EAte avec titre et ic\u00F4ne -->\n  @if (title()) {\n    <div card-header>\n      <h3 class=\"info-card-title\">\n        <i class=\"ph {{ titleIcon() }}\" aria-hidden=\"true\"></i>\n        {{ title() }}\n      </h3>\n    </div>\n  }\n  \n  <!-- Contenu principal -->\n  <div class=\"info-card-content\">\n    @if (shouldShowEmptyState()) {\n      <div class=\"info-card-empty-state\">\n        {{ getEmptyStateMessage() }}\n      </div>\n    } @else {\n      @for (item of data(); track $index) {\n        <div class=\"info-card-row\">\n          <div \n            class=\"info-card-label\" \n            [style.width]=\"item.labelWidth || options().labelWidth\"\n          >\n            {{ item.label }}\n          </div>\n          <div \n            class=\"info-card-value\"\n            [style.width]=\"item.valueWidth || options().valueWidth\"\n          >\n            {{ item.value || 'Non renseign\u00E9' }}\n          </div>\n        </div>\n      }\n    }\n  </div>\n  \n  <!-- Actions (slot passthrough) -->\n  <ng-content select=\"[card-actions]\"></ng-content>\n</psh-card>", styles: [".info-card-title{color:var(--primary-color);margin:0;font-size:var(--font-size-base);font-weight:600;padding:var(--spacing-sm) var(--spacing-md);background-color:var(--surface-ground);display:flex;align-items:center;gap:var(--spacing-sm);border-bottom:1px solid var(--surface-border)}.info-card-title i{font-size:1.1rem}.info-card-content{padding:var(--spacing-sm);min-height:200px;display:flex;flex-direction:column}.info-card-row{display:flex;align-items:center;padding:var(--spacing-xs) 0;border-bottom:1px dotted var(--surface-border);min-height:32px}.info-card-row:last-child{border-bottom:none}.info-card-label{font-weight:500;color:var(--text-color-secondary);font-size:var(--font-size-sm);padding-right:var(--spacing-sm);position:relative;min-width:0;flex:1}.info-card-label:after{content:\"\";position:absolute;right:0;top:50%;width:4px;height:1px;background-color:var(--surface-border)}.info-card-value{font-weight:500;color:var(--text-color);font-size:var(--font-size-sm);padding-left:var(--spacing-sm);text-align:right;min-width:0;flex:2;overflow:hidden;text-overflow:ellipsis}.info-card-empty-state{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--text-color-secondary);font-style:italic;font-size:var(--font-size-sm);padding:var(--spacing-lg);background:rgba(var(--surface-ground),.5);border-radius:var(--border-radius);margin:var(--spacing-sm)}@media (max-width: 768px){.info-card-title{font-size:var(--font-size-sm);padding:var(--spacing-xs)}.info-card-content{padding:var(--spacing-xs);min-height:150px}.info-card-row{min-height:28px;padding:var(--spacing-xxs) 0}.info-card-label,.info-card-value{font-size:var(--font-size-xs)}.info-card-empty-state{font-size:var(--font-size-xs);padding:var(--spacing-sm);margin:var(--spacing-xs)}}@media (max-width: 480px){.info-card-title{font-size:var(--font-size-xs);padding:var(--spacing-xxs) var(--spacing-xs)}.info-card-content{padding:var(--spacing-xxs);min-height:auto}.info-card-row{flex-direction:column;align-items:flex-start;gap:var(--spacing-xxs);padding:var(--spacing-xs) 0;min-height:auto}.info-card-label{width:100%;padding-right:0;text-align:left;flex:none}.info-card-label:after{display:none}.info-card-value{width:100%;padding-left:0;text-align:left;flex:none;font-weight:600}.info-card-empty-state{padding:var(--spacing-xs);margin:var(--spacing-xxs)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: PshCardComponent, selector: "psh-card", inputs: ["variant", "hoverable", "interactive", "title", "description", "colorVariant", "density", "actionsAlignment", "showHeaderDivider", "showFooterDivider", "showActionsDivider", "cssClass", "customStyle", "loading", "disabled"], outputs: ["variantChange", "hoverableChange", "interactiveChange", "clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: PshInfoCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'psh-info-card', standalone: true, imports: [CommonModule, PshCardComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<psh-card [variant]=\"cardVariant()\">\n  <!-- En-t\u00EAte avec titre et ic\u00F4ne -->\n  @if (title()) {\n    <div card-header>\n      <h3 class=\"info-card-title\">\n        <i class=\"ph {{ titleIcon() }}\" aria-hidden=\"true\"></i>\n        {{ title() }}\n      </h3>\n    </div>\n  }\n  \n  <!-- Contenu principal -->\n  <div class=\"info-card-content\">\n    @if (shouldShowEmptyState()) {\n      <div class=\"info-card-empty-state\">\n        {{ getEmptyStateMessage() }}\n      </div>\n    } @else {\n      @for (item of data(); track $index) {\n        <div class=\"info-card-row\">\n          <div \n            class=\"info-card-label\" \n            [style.width]=\"item.labelWidth || options().labelWidth\"\n          >\n            {{ item.label }}\n          </div>\n          <div \n            class=\"info-card-value\"\n            [style.width]=\"item.valueWidth || options().valueWidth\"\n          >\n            {{ item.value || 'Non renseign\u00E9' }}\n          </div>\n        </div>\n      }\n    }\n  </div>\n  \n  <!-- Actions (slot passthrough) -->\n  <ng-content select=\"[card-actions]\"></ng-content>\n</psh-card>", styles: [".info-card-title{color:var(--primary-color);margin:0;font-size:var(--font-size-base);font-weight:600;padding:var(--spacing-sm) var(--spacing-md);background-color:var(--surface-ground);display:flex;align-items:center;gap:var(--spacing-sm);border-bottom:1px solid var(--surface-border)}.info-card-title i{font-size:1.1rem}.info-card-content{padding:var(--spacing-sm);min-height:200px;display:flex;flex-direction:column}.info-card-row{display:flex;align-items:center;padding:var(--spacing-xs) 0;border-bottom:1px dotted var(--surface-border);min-height:32px}.info-card-row:last-child{border-bottom:none}.info-card-label{font-weight:500;color:var(--text-color-secondary);font-size:var(--font-size-sm);padding-right:var(--spacing-sm);position:relative;min-width:0;flex:1}.info-card-label:after{content:\"\";position:absolute;right:0;top:50%;width:4px;height:1px;background-color:var(--surface-border)}.info-card-value{font-weight:500;color:var(--text-color);font-size:var(--font-size-sm);padding-left:var(--spacing-sm);text-align:right;min-width:0;flex:2;overflow:hidden;text-overflow:ellipsis}.info-card-empty-state{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--text-color-secondary);font-style:italic;font-size:var(--font-size-sm);padding:var(--spacing-lg);background:rgba(var(--surface-ground),.5);border-radius:var(--border-radius);margin:var(--spacing-sm)}@media (max-width: 768px){.info-card-title{font-size:var(--font-size-sm);padding:var(--spacing-xs)}.info-card-content{padding:var(--spacing-xs);min-height:150px}.info-card-row{min-height:28px;padding:var(--spacing-xxs) 0}.info-card-label,.info-card-value{font-size:var(--font-size-xs)}.info-card-empty-state{font-size:var(--font-size-xs);padding:var(--spacing-sm);margin:var(--spacing-xs)}}@media (max-width: 480px){.info-card-title{font-size:var(--font-size-xs);padding:var(--spacing-xxs) var(--spacing-xs)}.info-card-content{padding:var(--spacing-xxs);min-height:auto}.info-card-row{flex-direction:column;align-items:flex-start;gap:var(--spacing-xxs);padding:var(--spacing-xs) 0;min-height:auto}.info-card-label{width:100%;padding-right:0;text-align:left;flex:none}.info-card-label:after{display:none}.info-card-value{width:100%;padding-left:0;text-align:left;flex:none;font-weight:600}.info-card-empty-state{padding:var(--spacing-xs);margin:var(--spacing-xxs)}}\n"] }]
+        }] });
+
+// Default configuration
+const DEFAULT_CONFIG$2 = {
+    width: 400,
+    height: 400,
+    margin: 40,
+    tooltipFormat: 'percentage',
+    showLegend: true,
+    legendPosition: 'right',
+    interactive: true
+};
+// Default data
+const DEFAULT_DATA = [
+    { label: 'Segment 1', value: 30, index: 0, color: 'var(--primary-color)' },
+    { label: 'Segment 2', value: 25, index: 1, color: 'var(--secondary-color)' },
+    { label: 'Segment 3', value: 20, index: 2, color: 'var(--success-color)' },
+    { label: 'Segment 4', value: 15, index: 3, color: 'var(--warning-color)' }
+];
+class PshPieChartComponent {
+    constructor() {
+        // Model inputs with defaults
+        this.config = model(DEFAULT_CONFIG$2);
+        this.data = model(DEFAULT_DATA);
+        // State
+        this.hoveredIndex = model(null);
+        this.hiddenSegments = model(new Set());
+        this.tooltipWidthSignal = signal(160);
+        // Computed values
+        this.tooltipWidth = computed(() => this.tooltipWidthSignal());
+        this.center = computed(() => ({
+            x: this.config().width / 2,
+            y: this.config().height / 2,
+        }));
+        this.radius = computed(() => Math.min(this.config().width, this.config().height) / 2 - this.config().margin);
+        this.segments = computed(() => {
+            const visibleData = this.data().filter((item) => !this.hiddenSegments().has(item.index));
+            const total = visibleData.reduce((sum, item) => sum + item.value, 0);
+            if (total === 0) {
+                this.hiddenSegments.set(new Set());
+                return this.calculateSegments(this.data(), total);
+            }
+            return this.calculateSegments(visibleData, total);
+        });
+    }
+    calculateSegments(data, total) {
+        let startAngle = 0;
+        return data.map((item) => {
+            const percentage = (item.value / total) * 100;
+            const angle = (percentage / 100) * 2 * Math.PI;
+            const endAngle = startAngle + angle;
+            const segment = {
+                ...item,
+                startAngle,
+                endAngle,
+                percentage,
+                path: this.calculatePath(startAngle, endAngle),
+            };
+            startAngle = endAngle;
+            return segment;
+        });
+    }
+    calculatePath(startAngle, endAngle) {
+        const radius = this.radius();
+        const start = {
+            x: radius * Math.cos(startAngle),
+            y: radius * Math.sin(startAngle),
+        };
+        const end = {
+            x: radius * Math.cos(endAngle),
+            y: radius * Math.sin(endAngle),
+        };
+        const largeArcFlag = endAngle - startAngle <= Math.PI ? '0' : '1';
+        return `M 0 0 L ${start.x} ${start.y} A ${radius} ${radius} 0 ${largeArcFlag} 1 ${end.x} ${end.y} Z`;
+    }
+    getTooltipPosition(segment) {
+        const angle = (segment.startAngle + segment.endAngle) / 2;
+        const distance = this.radius() * 0.6;
+        return {
+            x: this.center().x + Math.cos(angle) * distance,
+            y: this.center().y + Math.sin(angle) * distance,
+        };
+    }
+    onSegmentHover(index) {
+        this.hoveredIndex.set(index);
+    }
+    onSegmentLeave() {
+        this.hoveredIndex.set(null);
+    }
+    getSegmentPercentage(index) {
+        const segment = this.segments().find((s) => s.index === index);
+        return segment?.percentage || 0;
+    }
+    toggleSegment(index) {
+        if (!this.config().interactive)
+            return;
+        const newHiddenSegments = new Set(this.hiddenSegments());
+        const totalSegments = this.data().length;
+        const currentlyHidden = newHiddenSegments.size;
+        if (newHiddenSegments.has(index)) {
+            newHiddenSegments.delete(index);
+        }
+        else {
+            if (currentlyHidden >= totalSegments - 1) {
+                return;
+            }
+            newHiddenSegments.add(index);
+        }
+        this.hiddenSegments.set(newHiddenSegments);
+    }
+    formatValue(value, percentage) {
+        switch (this.config().tooltipFormat) {
+            case 'value':
+                return value.toString();
+            case 'percentage':
+                return `${percentage.toFixed(1)}%`;
+            case 'both':
+                return `${value} (${percentage.toFixed(1)}%)`;
+            default:
+                return `${percentage.toFixed(1)}%`;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: PshPieChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: PshPieChartComponent, isStandalone: true, selector: "psh-pie-chart", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, hoveredIndex: { classPropertyName: "hoveredIndex", publicName: "hoveredIndex", isSignal: true, isRequired: false, transformFunction: null }, hiddenSegments: { classPropertyName: "hiddenSegments", publicName: "hiddenSegments", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { config: "configChange", data: "dataChange", hoveredIndex: "hoveredIndexChange", hiddenSegments: "hiddenSegmentsChange" }, ngImport: i0, template: "<div class=\"pie-container\" [class]=\"'legend-' + config().legendPosition\">\r\n  <div class=\"chart-section\">\r\n    <svg\r\n      [attr.width]=\"config().width\"\r\n      [attr.height]=\"config().height\"\r\n      [attr.aria-label]=\"'Pie Chart'\"\r\n      class=\"pie-chart\"\r\n      role=\"img\"\r\n      [attr.viewBox]=\"'0 0 ' + config().width + ' ' + config().height\"\r\n      preserveAspectRatio=\"xMidYMid meet\"\r\n    >\r\n      <g [attr.transform]=\"'translate(' + center().x + ',' + center().y + ')'\">\r\n        @for (segment of segments(); track segment.value) {\r\n          <path\r\n            [attr.d]=\"segment.path\"\r\n            [style.fill]=\"segment.color || 'var(--chart-primary-color)'\"\r\n            [class.hovered]=\"hoveredIndex() === segment.index\"\r\n            [style.opacity]=\"hiddenSegments().has(segment.index) ? 0.3 : 1\"\r\n            (mouseenter)=\"onSegmentHover(segment.index)\"\r\n            (mouseleave)=\"onSegmentLeave()\"\r\n            [attr.aria-label]=\"segment.label + ': ' + segment.percentage + '%'\"\r\n            role=\"graphics-symbol\"\r\n          />\r\n        }\r\n      </g>\r\n\r\n      @if (hoveredIndex() !== null) {\r\n        @for (segment of segments(); track segment.index) {\r\n          @if (hoveredIndex() === segment.index) {\r\n            <g \r\n              class=\"tooltip\" \r\n              [attr.transform]=\"'translate(' + getTooltipPosition(segment).x + ',' + getTooltipPosition(segment).y + ')'\"\r\n              [style.--tooltip-width]=\"tooltipWidth() + 'px'\"\r\n            >          \r\n              <rect\r\n                [attr.x]=\"-(tooltipWidth() / 2 + 5)\"\r\n                y=\"-30\"\r\n                [attr.width]=\"tooltipWidth() + 10\"\r\n                height=\"60\"\r\n                rx=\"4\"\r\n                class=\"tooltip-bg\"\r\n              />\r\n              <text \r\n                y=\"-10\"\r\n                class=\"tooltip-label\"\r\n                [attr.x]=\"0\"\r\n              >\r\n                {{ segment.label }}\r\n              </text>\r\n              <text y=\"15\" class=\"tooltip-value\">\r\n                {{ formatValue(segment.value, segment.percentage) }}\r\n              </text>\r\n            </g>\r\n          }\r\n        }\r\n      }\r\n    </svg>\r\n  </div>\r\n\r\n  @if (config().showLegend) {\r\n    <div class=\"pie-legend\">\r\n      @for (segment of data(); track segment.index) {\r\n        <div \r\n          class=\"legend-item\"\r\n          [class.hidden]=\"hiddenSegments().has(segment.index)\"\r\n          [class.hovered]=\"hoveredIndex() === segment.index\"\r\n          (mouseenter)=\"onSegmentHover(segment.index)\"\r\n          (mouseleave)=\"onSegmentLeave()\"\r\n          (click)=\"toggleSegment(segment.index)\"\r\n        >\r\n          <span \r\n            class=\"legend-color\"\r\n            [style.background-color]=\"segment.color || 'var(--chart-primary-color)'\"\r\n          ></span>\r\n          <span class=\"legend-label\">{{ segment.label }}</span>\r\n          <span class=\"legend-value\">\r\n            {{ getSegmentPercentage(segment.index).toFixed(1) }}%\r\n          </span>\r\n        </div>\r\n      }\r\n    </div>\r\n  }\r\n</div>", styles: [".pie-container{display:flex;align-items:center;gap:var(--spacing-lg);width:100%;margin:0 auto;padding:var(--spacing-md)}.pie-container.legend-right{flex-direction:row}.pie-container.legend-left{flex-direction:row-reverse}.pie-container.legend-top{flex-direction:column-reverse}.pie-container.legend-bottom{flex-direction:column}.chart-section{flex:1;display:flex;justify-content:center;align-items:center;min-width:300px;width:100%;position:relative;overflow:visible}.pie-chart{width:100%;max-width:400px;height:auto;margin:0 auto;overflow:visible}path{transition:all .3s ease;cursor:pointer;stroke:var(--surface-card);stroke-width:1}path:hover{transform:scale(1.02);filter:brightness(1.1);stroke-width:2}.tooltip{pointer-events:none;transition:transform .2s ease;z-index:10;max-width:var(--tooltip-max-width, 200px);width:var(--tooltip-width, auto);overflow:visible}.tooltip-bg{fill:var(--chart-tooltip-background);stroke:var(--surface-border);stroke-width:1;filter:drop-shadow(0 2px 4px rgba(0,0,0,.1))}.tooltip-label{fill:var(--chart-tooltip-text);font-size:var(--font-size-sm);font-family:var(--font-family);text-anchor:middle;font-weight:500}.tooltip-value{fill:var(--primary-color);font-size:var(--font-size-base);font-family:var(--font-family);text-anchor:middle;font-weight:600}.pie-legend{display:flex;flex-direction:column;gap:var(--spacing-xxs);flex-shrink:0;padding:var(--spacing-sm);background:var(--surface-ground);border-radius:var(--border-radius);align-self:stretch;min-width:200px}.legend-item{display:flex;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-xxs) var(--spacing-xs);border-radius:var(--border-radius);cursor:pointer;transition:all .2s ease;height:28px;min-width:160px}.legend-item:hover,.legend-item.hovered{background:var(--surface-hover)}.legend-item.hidden{opacity:.6}.legend-color{width:12px;height:12px;border-radius:var(--border-radius);transition:transform .2s ease;flex-shrink:0}.legend-item:hover .legend-color,.legend-item.hovered .legend-color{transform:scale(1.2)}.legend-label{flex:1;color:var(--text-color);font-size:var(--font-size-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.legend-value{color:var(--text-color);font-weight:500;flex-shrink:0}@media (max-width: 1024px){.pie-container{align-items:stretch;gap:var(--spacing-md)}.pie-container.legend-right,.pie-container.legend-left{flex-direction:column}.chart-section{min-width:0;max-width:100%}.pie-chart{max-width:350px}.pie-legend{width:100%;flex-wrap:wrap;justify-content:center}.legend-left .pie-legend,.legend-right .pie-legend{flex-direction:row;width:100%}.legend-item{width:calc(50% - var(--spacing-xs))}}@media (max-width: 480px){.pie-container{padding:var(--spacing-sm);gap:var(--spacing-sm)}.pie-chart{max-width:280px}.pie-legend{flex-direction:column;width:100%}.legend-item{width:100%;min-width:0}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: PshPieChartComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'psh-pie-chart', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"pie-container\" [class]=\"'legend-' + config().legendPosition\">\r\n  <div class=\"chart-section\">\r\n    <svg\r\n      [attr.width]=\"config().width\"\r\n      [attr.height]=\"config().height\"\r\n      [attr.aria-label]=\"'Pie Chart'\"\r\n      class=\"pie-chart\"\r\n      role=\"img\"\r\n      [attr.viewBox]=\"'0 0 ' + config().width + ' ' + config().height\"\r\n      preserveAspectRatio=\"xMidYMid meet\"\r\n    >\r\n      <g [attr.transform]=\"'translate(' + center().x + ',' + center().y + ')'\">\r\n        @for (segment of segments(); track segment.value) {\r\n          <path\r\n            [attr.d]=\"segment.path\"\r\n            [style.fill]=\"segment.color || 'var(--chart-primary-color)'\"\r\n            [class.hovered]=\"hoveredIndex() === segment.index\"\r\n            [style.opacity]=\"hiddenSegments().has(segment.index) ? 0.3 : 1\"\r\n            (mouseenter)=\"onSegmentHover(segment.index)\"\r\n            (mouseleave)=\"onSegmentLeave()\"\r\n            [attr.aria-label]=\"segment.label + ': ' + segment.percentage + '%'\"\r\n            role=\"graphics-symbol\"\r\n          />\r\n        }\r\n      </g>\r\n\r\n      @if (hoveredIndex() !== null) {\r\n        @for (segment of segments(); track segment.index) {\r\n          @if (hoveredIndex() === segment.index) {\r\n            <g \r\n              class=\"tooltip\" \r\n              [attr.transform]=\"'translate(' + getTooltipPosition(segment).x + ',' + getTooltipPosition(segment).y + ')'\"\r\n              [style.--tooltip-width]=\"tooltipWidth() + 'px'\"\r\n            >          \r\n              <rect\r\n                [attr.x]=\"-(tooltipWidth() / 2 + 5)\"\r\n                y=\"-30\"\r\n                [attr.width]=\"tooltipWidth() + 10\"\r\n                height=\"60\"\r\n                rx=\"4\"\r\n                class=\"tooltip-bg\"\r\n              />\r\n              <text \r\n                y=\"-10\"\r\n                class=\"tooltip-label\"\r\n                [attr.x]=\"0\"\r\n              >\r\n                {{ segment.label }}\r\n              </text>\r\n              <text y=\"15\" class=\"tooltip-value\">\r\n                {{ formatValue(segment.value, segment.percentage) }}\r\n              </text>\r\n            </g>\r\n          }\r\n        }\r\n      }\r\n    </svg>\r\n  </div>\r\n\r\n  @if (config().showLegend) {\r\n    <div class=\"pie-legend\">\r\n      @for (segment of data(); track segment.index) {\r\n        <div \r\n          class=\"legend-item\"\r\n          [class.hidden]=\"hiddenSegments().has(segment.index)\"\r\n          [class.hovered]=\"hoveredIndex() === segment.index\"\r\n          (mouseenter)=\"onSegmentHover(segment.index)\"\r\n          (mouseleave)=\"onSegmentLeave()\"\r\n          (click)=\"toggleSegment(segment.index)\"\r\n        >\r\n          <span \r\n            class=\"legend-color\"\r\n            [style.background-color]=\"segment.color || 'var(--chart-primary-color)'\"\r\n          ></span>\r\n          <span class=\"legend-label\">{{ segment.label }}</span>\r\n          <span class=\"legend-value\">\r\n            {{ getSegmentPercentage(segment.index).toFixed(1) }}%\r\n          </span>\r\n        </div>\r\n      }\r\n    </div>\r\n  }\r\n</div>", styles: [".pie-container{display:flex;align-items:center;gap:var(--spacing-lg);width:100%;margin:0 auto;padding:var(--spacing-md)}.pie-container.legend-right{flex-direction:row}.pie-container.legend-left{flex-direction:row-reverse}.pie-container.legend-top{flex-direction:column-reverse}.pie-container.legend-bottom{flex-direction:column}.chart-section{flex:1;display:flex;justify-content:center;align-items:center;min-width:300px;width:100%;position:relative;overflow:visible}.pie-chart{width:100%;max-width:400px;height:auto;margin:0 auto;overflow:visible}path{transition:all .3s ease;cursor:pointer;stroke:var(--surface-card);stroke-width:1}path:hover{transform:scale(1.02);filter:brightness(1.1);stroke-width:2}.tooltip{pointer-events:none;transition:transform .2s ease;z-index:10;max-width:var(--tooltip-max-width, 200px);width:var(--tooltip-width, auto);overflow:visible}.tooltip-bg{fill:var(--chart-tooltip-background);stroke:var(--surface-border);stroke-width:1;filter:drop-shadow(0 2px 4px rgba(0,0,0,.1))}.tooltip-label{fill:var(--chart-tooltip-text);font-size:var(--font-size-sm);font-family:var(--font-family);text-anchor:middle;font-weight:500}.tooltip-value{fill:var(--primary-color);font-size:var(--font-size-base);font-family:var(--font-family);text-anchor:middle;font-weight:600}.pie-legend{display:flex;flex-direction:column;gap:var(--spacing-xxs);flex-shrink:0;padding:var(--spacing-sm);background:var(--surface-ground);border-radius:var(--border-radius);align-self:stretch;min-width:200px}.legend-item{display:flex;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-xxs) var(--spacing-xs);border-radius:var(--border-radius);cursor:pointer;transition:all .2s ease;height:28px;min-width:160px}.legend-item:hover,.legend-item.hovered{background:var(--surface-hover)}.legend-item.hidden{opacity:.6}.legend-color{width:12px;height:12px;border-radius:var(--border-radius);transition:transform .2s ease;flex-shrink:0}.legend-item:hover .legend-color,.legend-item.hovered .legend-color{transform:scale(1.2)}.legend-label{flex:1;color:var(--text-color);font-size:var(--font-size-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.legend-value{color:var(--text-color);font-weight:500;flex-shrink:0}@media (max-width: 1024px){.pie-container{align-items:stretch;gap:var(--spacing-md)}.pie-container.legend-right,.pie-container.legend-left{flex-direction:column}.chart-section{min-width:0;max-width:100%}.pie-chart{max-width:350px}.pie-legend{width:100%;flex-wrap:wrap;justify-content:center}.legend-left .pie-legend,.legend-right .pie-legend{flex-direction:row;width:100%}.legend-item{width:calc(50% - var(--spacing-xs))}}@media (max-width: 480px){.pie-container{padding:var(--spacing-sm);gap:var(--spacing-sm)}.pie-chart{max-width:280px}.pie-legend{flex-direction:column;width:100%}.legend-item{width:100%;min-width:0}}\n"] }]
+        }] });
+
+// Default configuration
+const DEFAULT_CONFIG$1 = {
+    checked: false,
+    disabled: false,
+    required: false,
+    indeterminate: false,
+    size: 'medium',
+    labelPosition: 'right'
+};
+class PshCheckboxComponent {
+    constructor() {
+        this.elementRef = inject(ElementRef);
+        // Model inputs with defaults
+        this.checked = model(DEFAULT_CONFIG$1.checked);
+        this.disabled = model(DEFAULT_CONFIG$1.disabled);
+        this.required = model(DEFAULT_CONFIG$1.required);
+        this.indeterminate = model(DEFAULT_CONFIG$1.indeterminate);
+        this.size = model(DEFAULT_CONFIG$1.size);
+        this.labelPosition = model(DEFAULT_CONFIG$1.labelPosition);
+        // Regular inputs
+        this.label = input('');
+        this.error = input('');
+        this.success = input('');
+        // Outputs
+        this.checkedChange = output();
+        // Computed values
+        this.ariaChecked = computed(() => this.indeterminate() ? 'mixed' : this.checked());
+        this.state = computed(() => this.getState());
+    }
+    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';
+    }
+    hasContent() {
+        const content = this.elementRef.nativeElement
+            .querySelector('.checkbox-text')
+            ?.textContent?.trim();
+        return !!content || !!this.label();
+    }
+    toggle() {
+        if (!this.disabled()) {
+            const newValue = !this.checked();
+            this.checked.set(newValue);
+            this.indeterminate.set(false);
+            this.checkedChange.emit(newValue);
+        }
+    }
+    // Static method to apply default configuration
+    static applyDefaults(component) {
+        component.checked.set(DEFAULT_CONFIG$1.checked);
+        component.disabled.set(DEFAULT_CONFIG$1.disabled);
+        component.required.set(DEFAULT_CONFIG$1.required);
+        component.indeterminate.set(DEFAULT_CONFIG$1.indeterminate);
+        component.size.set(DEFAULT_CONFIG$1.size);
+        component.labelPosition.set(DEFAULT_CONFIG$1.labelPosition);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: PshCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", 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 }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", 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 }, 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 } }, outputs: { checked: "checkedChange", disabled: "disabledChange", required: "requiredChange", indeterminate: "indeterminateChange", size: "sizeChange", labelPosition: "labelPositionChange", checkedChange: "checkedChange" }, ngImport: i0, template: "<div \r\n  class=\"checkbox-container\"\r\n  [attr.aria-describedby]=\"error() ? 'error-message' : success() ? 'success-message' : null\"\r\n  [class.disabled]=\"disabled()\"\r\n  [class.error]=\"!!error()\"\r\n  [class.success]=\"!!success()\"\r\n  [class.small]=\"size() === 'small'\"\r\n  [class.large]=\"size() === 'large'\"\r\n  [attr.data-state]=\"state()\"\r\n>\r\n  <label class=\"checkbox-label\" [class.label-left]=\"labelPosition() === 'left'\">\r\n    <input\r\n      type=\"checkbox\"\r\n      class=\"checkbox-input\"\r\n      [checked]=\"checked()\"\r\n      [disabled]=\"disabled()\"\r\n      [required]=\"required()\"\r\n      [attr.aria-required]=\"required()\"\r\n      [attr.aria-invalid]=\"!!error()\"\r\n      [attr.aria-checked]=\"ariaChecked()\"\r\n      (change)=\"toggle()\"\r\n    />\r\n    <span \r\n      class=\"checkbox-control\"\r\n      [class.error]=\"!!error()\"\r\n      [class.success]=\"!!success()\"\r\n      [class.indeterminate]=\"indeterminate()\"\r\n    >\r\n      @if (checked() && !indeterminate()) {\r\n        <i class=\"ph ph-check\" aria-hidden=\"true\"></i>\r\n      }\r\n      @if (indeterminate()) {\r\n        <i class=\"ph ph-minus\" aria-hidden=\"true\"></i>\r\n      }\r\n    </span>\r\n    <span class=\"checkbox-text\">\r\n      @if (label()) {\r\n        {{ label() }}\r\n      } @else {\r\n        <ng-content>Checkbox</ng-content>\r\n      }\r\n    </span>\r\n  </label>\r\n\r\n  @if (error()) {\r\n    <div id=\"error-message\" class=\"checkbox-error\" role=\"alert\">\r\n      {{ error() }}\r\n    </div>\r\n  }\r\n\r\n  @if (success()) {\r\n    <div id=\"success-message\" class=\"checkbox-success\" role=\"status\">\r\n      {{ success() }}\r\n    </div>\r\n  }\r\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:18px;height:18px;min-width:18px;min-height:18px;border:2px solid var(--surface-border);border-radius:var(--border-radius);background:var(--surface-card);transition:all .2s ease;color:var(--primary-color-text);position:relative}.checkbox-input:checked+.checkbox-control{background:var(--primary-color);border-color:var(--primary-color)}.checkbox-input:focus+.checkbox-control{box-shadow:0 0 0 2px rgba(var(--primary-color-rgb),.2)}.checkbox-control i{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(0);font-size:.8rem;opacity:0;transition:all .2s ease}.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)}.checkbox-container.disabled .checkbox-label{opacity:.6;cursor:not-allowed}.checkbox-container.error .checkbox-control{border-color:var(--danger-color)}.checkbox-input:checked+.checkbox-control.error{background:var(--danger-color);border-color:var(--danger-color)}.checkbox-container.success .checkbox-control{border-color:var(--success-color)}.checkbox-input:checked+.checkbox-control.success{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)}.checkbox-container.small .checkbox-control{width:16px;height:16px;min-width:16px;min-height:16px}.checkbox-container.small .checkbox-text{font-size:var(--font-size-sm)}.checkbox-container.large .checkbox-control{width:22px;height:22px;min-width:22px;min-height:22px}.checkbox-container.large .checkbox-text{font-size:var(--font-size-lg)}.checkbox-text{color:var(--text-color)}.checkbox-control{flex-shrink:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: PshCheckboxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'psh-checkbox', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div \r\n  class=\"checkbox-container\"\r\n  [attr.aria-describedby]=\"error() ? 'error-message' : success() ? 'success-message' : null\"\r\n  [class.disabled]=\"disabled()\"\r\n  [class.error]=\"!!error()\"\r\n  [class.success]=\"!!success()\"\r\n  [class.small]=\"size() === 'small'\"\r\n  [class.large]=\"size() === 'large'\"\r\n  [attr.data-state]=\"state()\"\r\n>\r\n  <label class=\"checkbox-label\" [class.label-left]=\"labelPosition() === 'left'\">\r\n    <input\r\n      type=\"checkbox\"\r\n      class=\"checkbox-input\"\r\n      [checked]=\"checked()\"\r\n      [disabled]=\"disabled()\"\r\n      [required]=\"required()\"\r\n      [attr.aria-required]=\"required()\"\r\n      [attr.aria-invalid]=\"!!error()\"\r\n      [attr.aria-checked]=\"ariaChecked()\"\r\n      (change)=\"toggle()\"\r\n    />\r\n    <span \r\n      class=\"checkbox-control\"\r\n      [class.error]=\"!!error()\"\r\n      [class.success]=\"!!success()\"\r\n      [class.indeterminate]=\"indeterminate()\"\r\n    >\r\n      @if (checked() && !indeterminate()) {\r\n        <i class=\"ph ph-check\" aria-hidden=\"true\"></i>\r\n      }\r\n      @if (indeterminate()) {\r\n        <i class=\"ph ph-minus\" aria-hidden=\"true\"></i>\r\n      }\r\n    </span>\r\n    <span class=\"checkbox-text\">\r\n      @if (label()) {\r\n        {{ label() }}\r\n      } @else {\r\n        <ng-content>Checkbox</ng-content>\r\n      }\r\n    </span>\r\n  </label>\r\n\r\n  @if (error()) {\r\n    <div id=\"error-message\" class=\"checkbox-error\" role=\"alert\">\r\n      {{ error() }}\r\n    </div>\r\n  }\r\n\r\n  @if (success()) {\r\n    <div id=\"success-message\" class=\"checkbox-success\" role=\"status\">\r\n      {{ success() }}\r\n    </div>\r\n  }\r\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:18px;height:18px;min-width:18px;min-height:18px;border:2px solid var(--surface-border);border-radius:var(--border-radius);background:var(--surface-card);transition:all .2s ease;color:var(--primary-color-text);position:relative}.checkbox-input:checked+.checkbox-control{background:var(--primary-color);border-color:var(--primary-color)}.checkbox-input:focus+.checkbox-control{box-shadow:0 0 0 2px rgba(var(--primary-color-rgb),.2)}.checkbox-control i{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(0);font-size:.8rem;opacity:0;transition:all .2s ease}.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)}.checkbox-container.disabled .checkbox-label{opacity:.6;cursor:not-allowed}.checkbox-container.error .checkbox-control{border-color:var(--danger-color)}.checkbox-input:checked+.checkbox-control.error{background:var(--danger-color);border-color:var(--danger-color)}.checkbox-container.success .checkbox-control{border-color:var(--success-color)}.checkbox-input:checked+.checkbox-control.success{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)}.checkbox-container.small .checkbox-control{width:16px;height:16px;min-width:16px;min-height:16px}.checkbox-container.small .checkbox-text{font-size:var(--font-size-sm)}.checkbox-container.large .checkbox-control{width:22px;height:22px;min-width:22px;min-height:22px}.checkbox-container.large .checkbox-text{font-size:var(--font-size-lg)}.checkbox-text{color:var(--text-color)}.checkbox-control{flex-shrink:0}\n"] }]
+        }] });
+
+// Default configuration
+const DEFAULT_CONFIG = {
+    expanded: false,
+    disabled: false,
+    icon: 'caret-down',
+    variant: 'default',
+    size: 'medium'
+};
+class PshCollapseComponent {
+    constructor() {
+        // Model inputs with defaults
+        this.expanded = model(DEFAULT_CONFIG.expanded);
+        this.disabled = model(DEFAULT_CONFIG.disabled);
+        this.variant = model(DEFAULT_CONFIG.variant);
+        this.size = model(DEFAULT_CONFIG.size);
+        // Regular inputs
+        this.icon = input(DEFAULT_CONFIG.icon);
+        this.header = input('');
+        // Outputs
+        this.expandedChange = output();
+        this.state = computed(() => this.getState());
+    }
+    getState() {
+        if (this.disabled())
+            return 'disabled';
+        return this.expanded() ? 'expanded' : 'collapsed';
+    }
+    toggle() {
+        if (!this.disabled()) {
+            const newValue = !this.expanded();
+            this.expanded.set(newValue);
+            this.expandedChange.emit(newValue);
+        }
+    }
+    // Static method to apply default configuration
+    static applyDefaults(component) {
+        component.expanded.set(DEFAULT_CONFIG.expanded);
+        component.disabled.set(DEFAULT_CONFIG.disabled);
+        component.variant.set(DEFAULT_CONFIG.variant);
+        component.size.set(DEFAULT_CONFIG.size);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: PshCollapseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: PshCollapseComponent, isStandalone: true, selector: "psh-collapse", inputs: { expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", 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 }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expanded: "expandedChange", disabled: "disabledChange", variant: "variantChange", size: "sizeChange", expandedChange: "expandedChange" }, ngImport: i0, template: "<div \r\n  class=\"collapse\"\r\n  [class.expanded]=\"expanded()\"\r\n  [class.disabled]=\"disabled()\"\r\n  [class.outline]=\"variant() === 'outline'\"\r\n  [class.small]=\"size() === 'small'\"\r\n  [class.large]=\"size() === 'large'\"\r\n  [attr.data-state]=\"state()\"\r\n>\r\n  <button\r\n    class=\"collapse-header\"\r\n    (click)=\"toggle()\"\r\n    [attr.aria-expanded]=\"expanded()\"\r\n    [attr.aria-disabled]=\"disabled()\"\r\n    type=\"button\"\r\n  >\r\n    <span class=\"header-content\">\r\n      <ng-content select=\"[collapse-header]\">\r\n        @if (header()) {\r\n          {{ header() }}\r\n        } @else {\r\n          Section pliable\r\n        }\r\n      </ng-content>\r\n    </span>\r\n    <i \r\n      class=\"ph ph-{{ icon() }}\"\r\n      [class.expanded]=\"expanded()\"\r\n      aria-hidden=\"true\"\r\n    ></i>\r\n  </button>\r\n\r\n  <div \r\n    class=\"collapse-content\"\r\n    role=\"region\"\r\n    [attr.aria-hidden]=\"!expanded()\"\r\n  >\r\n    <div class=\"content-wrapper\">\r\n      <ng-content>\r\n        <p>Contenu de la section pliable</p>\r\n      </ng-content>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".collapse{width:100%;border-radius:var(--border-radius);background:var(--surface-card);overflow:hidden}.collapse.outline{background:transparent;border:1px solid var(--surface-border)}.collapse-header{width:100%;display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-md) var(--spacing-lg);background:var(--surface-ground);border:none;cursor:pointer;color:var(--text-color);font-family:inherit;font-size:var(--font-size-base);transition:background-color .2s ease;border-bottom:1px solid var(--surface-border);text-align:left}.collapse-header:hover{background:var(--surface-hover)}.header-content{font-weight:500;text-align:left}.collapse-header i{color:var(--primary-color);font-size:1.2rem;transition:transform .3s ease}.collapse-header i.expanded{transform:rotate(180deg)}.collapse-content{height:0;overflow:hidden;transition:all .3s cubic-bezier(.4,0,.2,1)}.collapse.expanded .collapse-content{height:auto}.content-wrapper{padding:var(--spacing-lg);padding-top:var(--spacing-md);color:var(--text-color-secondary);text-align:left;transform:translateY(-10px);opacity:0;transition:all .3s cubic-bezier(.4,0,.2,1)}.collapse.expanded .content-wrapper{transform:translateY(0);opacity:1}.collapse.small .collapse-header{padding:var(--spacing-sm) var(--spacing-md);font-size:var(--font-size-sm)}.collapse.small .collapse-header i{font-size:1rem}.collapse.small .content-wrapper{padding:var(--spacing-md);padding-top:var(--spacing-sm)}.collapse.large .collapse-header{padding:var(--spacing-lg) var(--spacing-xl);font-size:var(--font-size-lg)}.collapse.large .collapse-header i{font-size:1.4rem}.collapse.large .content-wrapper{padding:var(--spacing-xl);padding-top:var(--spacing-lg)}.collapse.disabled .collapse-header{cursor:not-allowed;opacity:.6;background:var(--surface-ground)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: PshCollapseComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'psh-collapse', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div \r\n  class=\"collapse\"\r\n  [class.expanded]=\"expanded()\"\r\n  [class.disabled]=\"disabled()\"\r\n  [class.outline]=\"variant() === 'outline'\"\r\n  [class.small]=\"size() === 'small'\"\r\n  [class.large]=\"size() === 'large'\"\r\n  [attr.data-state]=\"state()\"\r\n>\r\n  <button\r\n    class=\"collapse-header\"\r\n    (click)=\"toggle()\"\r\n    [attr.aria-expanded]=\"expanded()\"\r\n    [attr.aria-disabled]=\"disabled()\"\r\n    type=\"button\"\r\n  >\r\n    <span class=\"header-content\">\r\n      <ng-content select=\"[collapse-header]\">\r\n        @if (header()) {\r\n          {{ header() }}\r\n        } @else {\r\n          Section pliable\r\n        }\r\n      </ng-content>\r\n    </span>\r\n    <i \r\n      class=\"ph ph-{{ icon() }}\"\r\n      [class.expanded]=\"expanded()\"\r\n      aria-hidden=\"true\"\r\n    ></i>\r\n  </button>\r\n\r\n  <div \r\n    class=\"collapse-content\"\r\n    role=\"region\"\r\n    [attr.aria-hidden]=\"!expanded()\"\r\n  >\r\n    <div class=\"content-wrapper\">\r\n      <ng-content>\r\n        <p>Contenu de la section pliable</p>\r\n      </ng-content>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".collapse{width:100%;border-radius:var(--border-radius);background:var(--surface-card);overflow:hidden}.collapse.outline{background:transparent;border:1px solid var(--surface-border)}.collapse-header{width:100%;display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-md) var(--spacing-lg);background:var(--surface-ground);border:none;cursor:pointer;color:var(--text-color);font-family:inherit;font-size:var(--font-size-base);transition:background-color .2s ease;border-bottom:1px solid var(--surface-border);text-align:left}.collapse-header:hover{background:var(--surface-hover)}.header-content{font-weight:500;text-align:left}.collapse-header i{color:var(--primary-color);font-size:1.2rem;transition:transform .3s ease}.collapse-header i.expanded{transform:rotate(180deg)}.collapse-content{height:0;overflow:hidden;transition:all .3s cubic-bezier(.4,0,.2,1)}.collapse.expanded .collapse-content{height:auto}.content-wrapper{padding:var(--spacing-lg);padding-top:var(--spacing-md);color:var(--text-color-secondary);text-align:left;transform:translateY(-10px);opacity:0;transition:all .3s cubic-bezier(.4,0,.2,1)}.collapse.expanded .content-wrapper{transform:translateY(0);opacity:1}.collapse.small .collapse-header{padding:var(--spacing-sm) var(--spacing-md);font-size:var(--font-size-sm)}.collapse.small .collapse-header i{font-size:1rem}.collapse.small .content-wrapper{padding:var(--spacing-md);padding-top:var(--spacing-sm)}.collapse.large .collapse-header{padding:var(--spacing-lg) var(--spacing-xl);font-size:var(--font-size-lg)}.collapse.large .collapse-header i{font-size:1.4rem}.collapse.large .content-wrapper{padding:var(--spacing-xl);padding-top:var(--spacing-lg)}.collapse.disabled .collapse-header{cursor:not-allowed;opacity:.6;background:var(--surface-ground)}\n"] }]
+        }] });
+
+class PshDropdownComponent {
+    getState() {
+        if (this.disabled())
+            return 'disabled';
+        if (this.isOpen())
+            return 'open';
+        return 'closed';
+    }
+    constructor() {
+        this.elementRef = inject(ElementRef);
+        this.clickOutsideHandler = null;
+        // Model inputs
+        this.variant = model('primary');
+        this.placement = model('bottom-start');
+        this.disabled = model(false);
+        // Regular inputs
+        this.items = input([]);
+        this.label = input('Dropdown Menu');
+        this.icon = input();
+        this.ariaLabel = input();
+        // State
+        this.isOpenSignal = signal(false);
+        this.selectedItemSignal = signal(null);
+        // Outputs
+        this.selected = output();
+        this.opened = output();
+        this.closed = output();
+        // Computed values
+        this.isOpen = computed(() => this.isOpenSignal());
+        this.selectedItem = computed(() => this.selectedItemSignal());
+        this.computedAriaLabel = computed(() => this.ariaLabel() || 'Toggle dropdown menu');
+        this.state = computed(() => this.getState());
+        this.setupClickOutsideListener();
+    }
+    setupClickOutsideListener() {
+        this.clickOutsideHandler = (event) => {
+            if (this.isOpen()) {
+                const target = event.target;
+                if (!this.elementRef.nativeElement.contains(target)) {
+                    this.close();
+                }
+            }
+        };
+        document.addEventListener('click', this.clickOutsideHandler);
+    }
+    toggleDropdown() {
+        if (!this.disabled()) {
+            event?.stopPropagation();
+            this.isOpenSignal.update(v => !v);
+            if (this.isOpen()) {
+                this.opened.emit();
+            }
+            else {
+                this.closed.emit();
+            }
+        }
+    }
+    selectItem(item) {
+        if (!item.disabled) {
+            this.selectedItemSignal.set(item);
+            this.selected.emit(item);
+            this.close();
+        }
+    }
+    close() {
+        if (this.isOpen()) {
+            this.isOpenSignal.set(false);
+            this.closed.emit();
+        }
+    }
+    ngOnDestroy() {
+        if (this.clickOutsideHandler) {
+            document.removeEventListener('click', this.clickOutsideHandler);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: PshDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: PshDropdownComponent, isStandalone: true, selector: "psh-dropdown", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { variant: "variantChange", placement: "placementChange", disabled: "disabledChange", selected: "selected", opened: "opened", closed: "closed" }, ngImport: i0, template: "<div \r\n  class=\"dropdown-container\"\r\n  [class.open]=\"isOpen()\"\r\n  [class.disabled]=\"disabled()\"\r\n  [attr.data-state]=\"state()\"\r\n>\r\n  <button\r\n    class=\"dropdown-trigger\"\r\n    [class]=\"variant()\"\r\n    (click)=\"toggleDropdown()\"\r\n    [attr.aria-expanded]=\"isOpen()\"\r\n    [attr.aria-disabled]=\"disabled()\"\r\n    [attr.aria-label]=\"computedAriaLabel()\"\r\n    type=\"button\"\r\n  >\r\n    <span class=\"trigger-content\">\r\n      @if (icon()) {\r\n        <i class=\"ph ph-{{ icon() }}\" aria-hidden=\"true\"></i>\r\n      }\r\n      <ng-content select=\"[dropdown-trigger]\">\r\n        @if (label()) {\r\n          {{ label() }}\r\n        }\r\n      </ng-content>\r\n      <i \r\n        class=\"ph ph-caret-down trigger-arrow\"\r\n        [class.open]=\"isOpen()\"\r\n        aria-hidden=\"true\"\r\n      ></i>\r\n    </span>\r\n  </button>\r\n\r\n  @if (isOpen()) {\r\n    <div \r\n      class=\"dropdown-menu\"\r\n      [class]=\"placement()\"\r\n      role=\"menu\"\r\n      (click)=\"$event.stopPropagation()\"\r\n    >\r\n      <ng-content select=\"[dropdown-menu]\">\r\n        @for (item of items(); track item.value) {\r\n          <button\r\n            class=\"dropdown-item\"\r\n            [class.disabled]=\"item.disabled\"\r\n            [class.active]=\"selectedItem() === item\"\r\n            (click)=\"selectItem(item)\"\r\n            role=\"menuitem\"\r\n            [attr.aria-disabled]=\"item.disabled\"\r\n          >\r\n            @if (item.icon) {\r\n              <i class=\"ph ph-{{ item.icon }}\" aria-hidden=\"true\"></i>\r\n            }\r\n            <span class=\"item-label\">{{ item.content }}</span>\r\n          </button>\r\n        }\r\n      </ng-content>\r\n    </div>\r\n  }\r\n</div>", styles: [".dropdown-container{position:relative;display:inline-block}.dropdown-trigger{display:inline-flex;align-items:center;justify-content:center;padding:var(--button-padding);border:none;border-radius:var(--border-radius);font-weight:var(--button-font-weight);font-family:inherit;cursor:pointer;transition:var(--button-transition);min-width:120px;background:transparent}.trigger-content{display:flex;align-items:center;gap:var(--spacing-sm)}.trigger-arrow{transition:transform .2s ease;margin-left:var(--spacing-sm)}.trigger-arrow.open{transform:rotate(180deg)}.dropdown-trigger.primary{background:var(--primary-color);color:var(--primary-color-text)}.dropdown-trigger.primary:hover:not(.disabled){background:var(--primary-color-light)}.dropdown-trigger.secondary{background:var(--secondary-color);color:var(--secondary-color-text)}.dropdown-trigger.secondary:hover:not(.disabled){background:var(--secondary-color-light)}.dropdown-trigger.outline{background:transparent;border:2px solid var(--button-outline-border-color, var(--primary-color));color:var(--button-outline-text, var(--primary-color))}.dropdown-trigger.outline:hover:not(.disabled){background:var(--primary-color);border-color:var(--primary-color);color:var(--primary-color-text)}.dropdown-trigger.text{background:transparent;color:var(--button-text-color, var(--primary-color))}.dropdown-trigger.text:hover:not(.disabled){background:var(--button-text-hover-bg, rgba(var(--primary-color-rgb), .1))}.dropdown-container.small .dropdown-trigger{padding:calc(var(--spacing-sm) * .75) var(--spacing-md);font-size:var(--font-size-sm);min-width:100px}.dropdown-container.large .dropdown-trigger{padding:var(--spacing-md) var(--spacing-xl);font-size:var(--font-size-lg);min-width:140px}.dropdown-menu{position:absolute;min-width:200px;background:var(--surface-card);border:1px solid var(--surface-border);border-radius:var(--border-radius);box-shadow:var(--shadow-lg);z-index:1000;margin-top:var(--spacing-xs);animation:fadeIn .2s ease;overflow:hidden}.dropdown-menu ::ng-deep .dropdown-item{display:flex;align-items:center;gap:var(--spacing-sm);width:100%;padding:var(--spacing-sm) var(--spacing-md);border:none;background:transparent;color:var(--text-color);font-family:inherit;font-size:var(--font-size-base);text-align:left;cursor:pointer;transition:var(--button-transition)}.dropdown-menu ::ng-deep .dropdown-item:hover:not(.disabled){background:var(--surface-hover)}.dropdown-menu ::ng-deep .dropdown-item.active{color:var(--primary-color);background:rgba(var(--primary-color-rgb),.1)}.dropdown-menu ::ng-deep .dropdown-item.disabled{opacity:.5;cursor:not-allowed}.dropdown-menu ::ng-deep .dropdown-item i{font-size:1.2rem;color:inherit}.dropdown-menu ::ng-deep [dropdown-menu]{background:transparent;padding:0;margin:0}.dropdown-menu.bottom-start{top:100%;left:0}.dropdown-menu.bottom-end{top:100%;right:0}.dropdown-menu.top-start{bottom:100%;left:0}.dropdown-menu.top-end{bottom:100%;right:0}.dropdown-item{display:flex;align-items:center;gap:var(--spacing-sm);width:100%;padding:var(--spacing-sm) var(--spacing-md);border:none;background:transparent;color:var(--text-color);font-family:inherit;font-size:var(--font-size-base);text-align:left;cursor:pointer;transition:var(--button-transition)}.dropdown-item:hover:not(.disabled){background:var(--surface-hover)}.dropdown-item.active{color:var(--primary-color);background:rgba(var(--primary-color-rgb),.1)}.dropdown-item.disabled{opacity:.5;cursor:not-allowed}.item-check{margin-left:auto;color:var(--primary-color)}.dropdown-container.disabled{opacity:.6;cursor:not-allowed}.dropdown-container.disabled .dropdown-trigger{pointer-events:none}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: PshDropdownComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'psh-dropdown', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div \r\n  class=\"dropdown-container\"\r\n  [class.open]=\"isOpen()\"\r\n  [class.disabled]=\"disabled()\"\r\n  [attr.data-state]=\"state()\"\r\n>\r\n  <button\r\n    class=\"dropdown-trigger\"\r\n    [class]=\"variant()\"\r\n    (click)=\"toggleDropdown()\"\r\n    [attr.aria-expanded]=\"isOpen()\"\r\n    [attr.aria-disabled]=\"disabled()\"\r\n    [attr.aria-label]=\"computedAriaLabel()\"\r\n    type=\"button\"\r\n  >\r\n    <span class=\"trigger-content\">\r\n      @if (icon()) {\r\n        <i class=\"ph ph-{{ icon() }}\" aria-hidden=\"true\"></i>\r\n      }\r\n      <ng-content select=\"[dropdown-trigger]\">\r\n        @if (label()) {\r\n          {{ label() }}\r\n        }\r\n      </ng-content>\r\n      <i \r\n        class=\"ph ph-caret-down trigger-arrow\"\r\n        [class.open]=\"isOpen()\"\r\n        aria-hidden=\"true\"\r\n      ></i>\r\n    </span>\r\n  </button>\r\n\r\n  @if (isOpen()) {\r\n    <div \r\n      class=\"dropdown-menu\"\r\n      [class]=\"placement()\"\r\n      role=\"menu\"\r\n      (click)=\"$event.stopPropagation()\"\r\n    >\r\n      <ng-content select=\"[dropdown-menu]\">\r\n        @for (item of items(); track item.value) {\r\n          <button\r\n            class=\"dropdown-item\"\r\n            [class.disabled]=\"item.disabled\"\r\n            [class.active]=\"selectedItem() === item\"\r\n            (click)=\"selectItem(item)\"\r\n            role=\"menuitem\"\r\n            [attr.aria-disabled]=\"item.disabled\"\r\n          >\r\n            @if (item.icon) {\r\n              <i class=\"ph ph-{{ item.icon }}\" aria-hidden=\"true\"></i>\r\n            }\r\n            <span class=\"item-label\">{{ item.content }}</span>\r\n          </button>\r\n        }\r\n      </ng-content>\r\n    </div>\r\n  }\r\n</div>", styles: [".dropdown-container{position:relative;display:inline-block}.dropdown-trigger{display:inline-flex;align-items:center;justify-content:center;padding:var(--button-padding);border:none;border-radius:var(--border-radius);font-weight:var(--button-font-weight);font-family:inherit;cursor:pointer;transition:var(--button-transition);min-width:120px;background:transparent}.trigger-content{display:flex;align-items:center;gap:var(--spacing-sm)}.trigger-arrow{transition:transform .2s ease;margin-left:var(--spacing-sm)}.trigger-arrow.open{transform:rotate(180deg)}.dropdown-trigger.primary{background:var(--primary-color);color:var(--primary-color-text)}.dropdown-trigger.primary:hover:not(.disabled){background:var(--primary-color-light)}.dropdown-trigger.secondary{background:var(--secondary-color);color:var(--secondary-color-text)}.dropdown-trigger.secondary:hover:not(.disabled){background:var(--secondary-color-light)}.dropdown-trigger.outline{background:transparent;border:2px solid var(--button-outline-border-color, var(--primary-color));color:var(--button-outline-text, var(--primary-color))}.dropdown-trigger.outline:hover:not(.disabled){background:var(--primary-color);border-color:var(--primary-color);color:var(--primary-color-text)}.dropdown-trigger.text{background:transparent;color:var(--button-text-color, var(--primary-color))}.dropdown-trigger.text:hover:not(.disabled){background:var(--button-text-hover-bg, rgba(var(--primary-color-rgb), .1))}.dropdown-container.small .dropdown-trigger{padding:calc(var(--spacing-sm) * .75) var(--spacing-md);font-size:var(--font-size-sm);min-width:100px}.dropdown-container.large .dropdown-trigger{padding:var(--spacing-md) var(--spacing-xl);font-size:var(--font-size-lg);min-width:140px}.dropdown-menu{position:absolute;min-width:200px;background:var(--surface-card);border:1px solid var(--surface-border);border-radius:var(--border-radius);box-shadow:var(--shadow-lg);z-index:1000;margin-top:var(--spacing-xs);animation:fadeIn .2s ease;overflow:hidden}.dropdown-menu ::ng-deep .dropdown-item{display:flex;align-items:center;gap:var(--spacing-sm);width:100%;padding:var(--spacing-sm) var(--spacing-md);border:none;background:transparent;color:var(--text-color);font-family:inherit;font-size:var(--font-size-base);text-align:left;cursor:pointer;transition:var(--button-transition)}.dropdown-menu ::ng-deep .dropdown-item:hover:not(.disabled){background:var(--surface-hover)}.dropdown-menu ::ng-deep .dropdown-item.active{color:var(--primary-color);background:rgba(var(--primary-color-rgb),.1)}.dropdown-menu ::ng-deep .dropdown-item.disabled{opacity:.5;cursor:not-allowed}.dropdown-menu ::ng-deep .dropdown-item i{font-size:1.2rem;color:inherit}.dropdown-menu ::ng-deep [dropdown-menu]{background:transparent;padding:0;margin:0}.dropdown-menu.bottom-start{top:100%;left:0}.dropdown-menu.bottom-end{top:100%;right:0}.dropdown-menu.top-start{bottom:100%;left:0}.dropdown-menu.top-end{bottom:100%;right:0}.dropdown-item{display:flex;align-items:center;gap:var(--spacing-sm);width:100%;padding:var(--spacing-sm) var(--spacing-md);border:none;background:transparent;color:var(--text-color);font-family:inherit;font-size:var(--font-size-base);text-align:left;cursor:pointer;transition:var(--button-transition)}.dropdown-item:hover:not(.disabled){background:var(--surface-hover)}.dropdown-item.active{color:var(--primary-color);background:rgba(var(--primary-color-rgb),.1)}.dropdown-item.disabled{opacity:.5;cursor:not-allowed}.item-check{margin-left:auto;color:var(--primary-color)}.dropdown-container.disabled{opacity:.6;cursor:not-allowed}.dropdown-container.disabled .dropdown-trigger{pointer-events:none}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}\n"] }]
+        }], ctorParameters: () => [] });
+
+class PshInputComponent {
+    constructor() {
+        this.elementRef = inject(ElementRef);
+        this.cdr = inject(ChangeDetectorRef);
+        // Generate unique ID for the input
+        this.inputId = `input-${Math.random().toString(36).substring(2, 11)}`;
+        // Model inputs
+        this.value = model('');
+        this.disabled = model(false);
+        this.required = model(false);
+        this.readonly = model(false);
+        this.loading = model(false);
+        this.fullWidth = model(false);
+        this.variant = model('outlined');
+        this.size = model('medium');
+        this.showLabel = input(true);
+        // Regular inputs
+        this.type = input('text');
+        this.placeholder = input('');
+        this.label = input(''); // Ajout d'un input label spécifique
+        this.ariaLabel = input(null); // Ajout d'un input ariaLabel spécifique
+        this.iconStart = input();
+        this.iconEnd = input();
+        this.error = input(null);
+        this.success = input(null);
+        this.hint = input(null);
+        this.suggestions = input([]);
+        this.autocompleteConfig = input({
+            minLength: 1,
+            debounceTime: 300
+        });
+        // State
+        this.suggestionsVisible = signal(false);
+        this.focusedSignal = signal(false);
+        this.filteredSuggestionsSignal = signal([]);
+        this.focusedSuggestionIndex = signal(-1);
+        this.passwordVisibleSignal = signal(false);
+        // Outputs
+        this.valueChange = output();
+        this.inputFocus = output();
+        this.inputBlur = output();
+        this.suggestionSelect = output();
+        // Computed values
+        this.showSuggestions = computed(() => this.suggestionsVisible() && this.filteredSuggestions().length > 0);
+        this.filteredSuggestions = computed(() => this.filteredSuggestionsSignal());
+        this.focused = computed(() => this.focusedSignal());
+        this.passwordVisible = computed(() => this.passwordVisibleSignal());
+        this.effectiveType = computed(() => {
+            if (this.type() === 'password') {
+                return this.passwordVisible() ? 'text' : 'password';
+            }
+            return this.type();
+        });
+        // Computed aria-label pour l'accessibilité
+        this.computedAriaLabel = computed(() => {
+            return this.ariaLabel() || this.label() || this.placeholder();
+        });
+        this.state = computed(() => this.getState());
+        // ControlValueAccessor implementation
+        this.onChange = (_) => { };
+        this.onTouched = () => { };
+    }
+    getState() {
+        if (this.disabled())
+            return 'disabled';
+        if (this.readonly())
+            return 'readonly';
+        if (this.loading())
+            return 'loading';
+        if (this.error())
+            return 'error';
+        if (this.success())
+            return 'success';
+        if (this.focused())
+            return 'focused';
+        return 'default';
+    }
+    writeValue(value) {
+        this.value.set(value ?? '');
+        this.cdr.markForCheck();
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled.set(isDisabled);
+    }
+    // Event handlers
+    handleInput(event) {
+        const value = event.target.value;
+        this.value.set(value);
+        this.valueChange.emit(value);
+        this.onChange(value);
+        if (this.suggestions()) {
+            this.updateSuggestions(value);
+        }
+    }
+    handleFocus() {
+        this.focusedSignal.set(true);
+        this.inputFocus.emit();
+        this.onTouched();
+        if (this.suggestions() && this.value().length >= this.autocompleteConfig().minLength) {
+            this.updateSuggestions(this.value());
+        }
+    }
+    handleBlur() {
+        this.focusedSignal.set(false);
+        this.inputBlur.emit();
+        this.onTouched();
+        setTimeout(() => {
+            this.suggestionsVisible.set(false);
+            this.focusedSuggestionIndex.set(-1);
+        }, 200);
+    }
+    handleKeydown(event) {
+        if (!this.showSuggestions())
+            return;
+        const suggestions = this.filteredSuggestions();
+        const currentIndex = this.focusedSuggestionIndex();
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                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);
+                break;
+            case 'Enter':
+                event.preventDefault();
+                if (currentIndex >= 0 && currentIndex < suggestions.length) {
+                    const selectedSuggestion = suggestions[currentIndex];
+                    if (selectedSuggestion) {
+                        this.handleSuggestionClick(selectedSuggestion);
+                    }
+                }
+                break;
+            case 'Escape':
+                event.preventDefault();
+                this.suggestionsVisible.set(false);
+                this.focusedSuggestionIndex.set(-1);
+                break;
+        }
+    }
+    handleSuggestionClick(suggestion) {
+        if (suggestion) {
+            this.value.set(suggestion);
+            this.valueChange.emit(suggestion);
+            this.onChange(suggestion);
+            this.suggestionSelect.emit(suggestion);
+            this.suggestionsVisible.set(false);
+        }
+    }
+    togglePasswordVisibility() {
+        this.passwordVisibleSignal.update(v => !v);
+    }
+    hasLabelContent() {
+        return !!this.elementRef.nativeElement.querySelector('[input-label]');
+    }
+    hasSlotContent(slot) {
+        return !!this.elementRef.nativeElement.querySelector(`[${slot}]`);
+    }
+    focusSelect() {
+        const input = this.elementRef.nativeElement.querySelector('input');
+        if (input) {
+            input.focus();
+        }
+    }
+    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);
+                }
+            }
+            catch (error) {
+                console.error('Error fetching suggestions:', error);
+                this.filteredSuggestionsSignal.set([]);
+            }
+        }
+        else if (Array.isArray(suggestionsValue)) {
+            const filtered = suggestionsValue.filter(suggestion => suggestion.toLowerCase().includes(value.toLowerCase()));
+            this.filteredSuggestionsSignal.set(filtered);
+            this.suggestionsVisible.set(true);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: PshInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", 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 }, required: { classPropertyName: "required", publicName: "required", 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 }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", 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 }, 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", required: "requiredChange", readonly: "readonlyChange", loading: "loadingChange", fullWidth: "fullWidthChange", variant: "variantChange", size: "sizeChange", valueChange: "valueChange", inputFocus: "inputFocus", inputBlur: "inputBlur", suggestionSelect: "suggestionSelect" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => PshInputComponent),
+                multi: true
+            }
+        ], ngImport: i0, template: "<div \r\n  class=\"input-container\"\r\n  [class.full-width]=\"fullWidth()\"\r\n  [class.small]=\"size() === 'small'\"\r\n  [class.large]=\"size() === 'large'\"\r\n  [class.error]=\"!!error()\"\r\n  [class.success]=\"!!success()\"\r\n  [class.disabled]=\"disabled()\"\r\n  [class.readonly]=\"readonly()\"\r\n  [class.loading]=\"loading()\"\r\n  [class.focused]=\"focused()\"\r\n  [class.has-start-icon]=\"!!iconStart()\"\r\n  [class.has-end-icon]=\"!!iconEnd() || type() === 'password'\"\r\n  [class.outlined]=\"variant() === 'outlined'\"\r\n  [class.filled]=\"variant() === 'filled'\"\r\n>\r\n  <!-- Label slot -->\r\n  @if (showLabel()) {\r\n    <label class=\"input-label\" [for]=\"inputId\" (click)=\"focusSelect()\" [class.required]=\"required()\">\r\n      <ng-content select=\"[input-label]\"></ng-content>\r\n      @if (!hasLabelContent()) {\r\n        {{ label() }}\r\n      }\r\n    </label>\r\n  }\r\n\r\n  <div class=\"input-wrapper\">\r\n    @if (iconStart()) {\r\n      <i class=\"ph ph-{{ iconStart() }}\" aria-hidden=\"true\"></i>\r\n    }\r\n\r\n    <input\r\n      [id]=\"inputId\"\r\n      [type]=\"effectiveType()\"\r\n      [attr.placeholder]=\"placeholder()\"\r\n      [attr.aria-label]=\"computedAriaLabel()\"\r\n      [attr.aria-invalid]=\"!!error()\"\r\n      [attr.aria-required]=\"required()\"\r\n      [attr.aria-describedby]=\"error() ? 'error-message' : success() ? 'success-message' : hint() ? 'hint-message' : null\"\r\n      [disabled]=\"disabled()\"\r\n      [readonly]=\"readonly()\"\r\n      [required]=\"required()\"\r\n      [ngModel]=\"value()\"\r\n      (ngModelChange)=\"value.set($event)\"\r\n      (input)=\"handleInput($event)\"\r\n      (keydown)=\"handleKeydown($event)\"\r\n      (focus)=\"handleFocus()\"\r\n      (blur)=\"handleBlur()\"\r\n      [attr.data-state]=\"state()\"\r\n    />\r\n\r\n    @if (iconEnd()) {\r\n      <i class=\"ph ph-{{ iconEnd() }}\" aria-hidden=\"true\"></i>\r\n    }\r\n\r\n    @if (type() === 'password') {\r\n      <button\r\n        type=\"button\"\r\n        class=\"password-toggle\"\r\n        (click)=\"togglePasswordVisibility()\"\r\n        [attr.aria-label]=\"passwordVisible() ? 'Masquer le mot de passe' : 'Afficher le mot de passe'\"\r\n        [disabled]=\"disabled() || readonly()\"\r\n      >\r\n        <i \r\n          [class]=\"'ph ph-' + (passwordVisible() ? 'eye-slash' : 'eye')\"\r\n          aria-hidden=\"true\"\r\n        ></i>\r\n      </button>\r\n    }\r\n\r\n    @if (loading()) {\r\n      <div class=\"input-loader\" aria-hidden=\"true\">\r\n        <div class=\"loader\"></div>\r\n      </div>\r\n    }\r\n\r\n    @if (showSuggestions()) {\r\n      <div class=\"suggestions-list\" role=\"listbox\">\r\n        @for (suggestion of filteredSuggestions(); track suggestion; let i = $index) {\r\n          <div \r\n            class=\"suggestion-item\"\r\n            [class.focused]=\"i === focusedSuggestionIndex()\"\r\n            role=\"option\"\r\n            [attr.aria-selected]=\"i === focusedSuggestionIndex()\"\r\n            (click)=\"handleSuggestionClick(suggestion)\"\r\n            (mouseenter)=\"focusedSuggestionIndex.set(i)\"\r\n          >\r\n            {{ suggestion }}\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  <!-- Error message slot -->\r\n  @if (error()) {\r\n    <div id=\"error-message\" class=\"input-error\" role=\"alert\">\r\n      <ng-content select=\"[input-error]\">\r\n        {{ error() }}\r\n      </ng-content>\r\n    </div>\r\n  }\r\n\r\n  <!-- Success message slot -->\r\n  @if (success()) {\r\n    <div id=\"success-message\" class=\"input-success\" role=\"status\">\r\n      <ng-content select=\"[input-success]\">\r\n        {{ success() }}\r\n      </ng-content>\r\n    </div>\r\n  }\r\n\r\n  <!-- Hint message slot -->\r\n  @if (hint()) {\r\n    <div id=\"hint-message\" class=\"input-hint\">\r\n      <ng-content select=\"[input-hint]\">\r\n        {{ hint() }}\r\n      </ng-content>\r\n    </div>\r\n  }\r\n</div>", styles: [".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:40px;padding:0 var(--spacing-md);font-family:inherit;font-size:var(--font-size-base);color:var(--text-color);background:var(--surface-0);border:1px solid var(--surface-border);border-radius:var(--border-radius);transition:all .2s ease}input:hover:not(:disabled):not(:focus){border-color:var(--primary-color)}input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 2px rgba(var(--primary-color-rgb),.2)}.input-container.outlined input{background:transparent;border:2px 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 2px rgba(var(--primary-color-rgb),.2)}.input-container.filled input{background:var(--surface-ground);border:1px 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 2px rgba(var(--primary-color-rgb),.2)}.input-container.error input{border-color:var(--danger-color)}.input-container.error input:focus{box-shadow:0 0 0 2px rgba(var(--danger-color-rgb),.2)}.input-container.success input{border-color:var(--success-color)}.input-container.success input:focus{box-shadow:0 0 0 2px rgba(var(--success-color-rgb),.2)}.input-container.disabled input{background:var(--surface-ground);cursor:not-allowed;opacity:.6}.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:1.2rem;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 2px rgba(var(--primary-color-rgb),.2)}.password-toggle i{font-size:1.2rem;position:static;pointer-events:auto}.input-container.small input{height:32px;padding:0 var(--spacing-md);font-size:var(--font-size-sm)}.input-container.large input{height:48px;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:1rem}.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:16px;height:16px;border:2px 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:1px solid var(--surface-border);border-radius:var(--border-radius);box-shadow:var(--shadow-lg);z-index:1000;max-height:200px;overflow-y:auto;margin-top:var(--spacing-xs)}.suggestion-item{padding:var(--spacing-sm) var(--spacing-md);cursor:pointer;transition:all .2s ease;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 }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: PshInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'psh-input', standalone: true, imports: [CommonModule, FormsModule], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => PshInputComponent),
+                            multi: true
+                        }
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div \r\n  class=\"input-container\"\r\n  [class.full-width]=\"fullWidth()\"\r\n  [class.small]=\"size() === 'small'\"\r\n  [class.large]=\"size() === 'large'\"\r\n  [class.error]=\"!!error()\"\r\n  [class.success]=\"!!success()\"\r\n  [class.disabled]=\"disabled()\"\r\n  [class.readonly]=\"readonly()\"\r\n  [class.loading]=\"loading()\"\r\n  [class.focused]=\"focused()\"\r\n  [class.has-start-icon]=\"!!iconStart()\"\r\n  [class.has-end-icon]=\"!!iconEnd() || type() === 'password'\"\r\n  [class.outlined]=\"variant() === 'outlined'\"\r\n  [class.filled]=\"variant() === 'filled'\"\r\n>\r\n  <!-- Label slot -->\r\n  @if (showLabel()) {\r\n    <label class=\"input-label\" [for]=\"inputId\" (click)=\"focusSelect()\" [class.required]=\"required()\">\r\n      <ng-content select=\"[input-label]\"></ng-content>\r\n      @if (!hasLabelContent()) {\r\n        {{ label() }}\r\n      }\r\n    </label>\r\n  }\r\n\r\n  <div class=\"input-wrapper\">\r\n    @if (iconStart()) {\r\n      <i class=\"ph ph-{{ iconStart() }}\" aria-hidden=\"true\"></i>\r\n    }\r\n\r\n    <input\r\n      [id]=\"inputId\"\r\n      [type]=\"effectiveType()\"\r\n      [attr.placeholder]=\"placeholder()\"\r\n      [attr.aria-label]=\"computedAriaLabel()\"\r\n      [attr.aria-invalid]=\"!!error()\"\r\n      [attr.aria-required]=\"required()\"\r\n      [attr.aria-describedby]=\"error() ? 'error-message' : success() ? 'success-message' : hint() ? 'hint-message' : null\"\r\n      [disabled]=\"disabled()\"\r\n      [readonly]=\"readonly()\"\r\n      [required]=\"required()\"\r\n      [ngModel]=\"value()\"\r\n      (ngModelChange)=\"value.set($event)\"\r\n      (input)=\"handleInput($event)\"\r\n      (keydown)=\"handleKeydown($event)\"\r\n      (focus)=\"handleFocus()\"\r\n      (blur)=\"handleBlur()\"\r\n      [attr.data-state]=\"state()\"\r\n    />\r\n\r\n    @if (iconEnd()) {\r\n      <i class=\"ph ph-{{ iconEnd() }}\" aria-hidden=\"true\"></i>\r\n    }\r\n\r\n    @if (type() === 'password') {\r\n      <button\r\n        type=\"button\"\r\n        class=\"password-toggle\"\r\n        (click)=\"togglePasswordVisibility()\"\r\n        [attr.aria-label]=\"passwordVisible() ? 'Masquer le mot de passe' : 'Afficher le mot de passe'\"\r\n        [disabled]=\"disabled() || readonly()\"\r\n      >\r\n        <i \r\n          [class]=\"'ph ph-' + (passwordVisible() ? 'eye-slash' : 'eye')\"\r\n          aria-hidden=\"true\"\r\n        ></i>\r\n      </button>\r\n    }\r\n\r\n    @if (loading()) {\r\n      <div class=\"input-loader\" aria-hidden=\"true\">\r\n        <div class=\"loader\"></div>\r\n      </div>\r\n    }\r\n\r\n    @if (showSuggestions()) {\r\n      <div class=\"suggestions-list\" role=\"listbox\">\r\n        @for (suggestion of filteredSuggestions(); track suggestion; let i = $index) {\r\n          <div \r\n            class=\"suggestion-item\"\r\n            [class.focused]=\"i === focusedSuggestionIndex()\"\r\n            role=\"option\"\r\n            [attr.aria-selected]=\"i === focusedSuggestionIndex()\"\r\n            (click)=\"handleSuggestionClick(suggestion)\"\r\n            (mouseenter)=\"focusedSuggestionIndex.set(i)\"\r\n          >\r\n            {{ suggestion }}\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  <!-- Error message slot -->\r\n  @if (error()) {\r\n    <div id=\"error-message\" class=\"input-error\" role=\"alert\">\r\n      <ng-content select=\"[input-error]\">\r\n        {{ error() }}\r\n      </ng-content>\r\n    </div>\r\n  }\r\n\r\n  <!-- Success message slot -->\r\n  @if (success()) {\r\n    <div id=\"success-message\" class=\"input-success\" role=\"status\">\r\n      <ng-content select=\"[input-success]\">\r\n        {{ success() }}\r\n      </ng-content>\r\n    </div>\r\n  }\r\n\r\n  <!-- Hint message slot -->\r\n  @if (hint()) {\r\n    <div id=\"hint-message\" class=\"input-hint\">\r\n      <ng-content select=\"[input-hint]\">\r\n        {{ hint() }}\r\n      </ng-content>\r\n    </div>\r\n  }\r\n</div>", styles: [".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:40px;padding:0 var(--spacing-md);font-family:inherit;font-size:var(--font-size-base);color:var(--text-color);background:var(--surface-0);border:1px solid var(--surface-border);border-radius:var(--border-radius);transition:all .2s ease}input:hover:not(:disabled):not(:focus){border-color:var(--primary-color)}input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 2px rgba(var(--primary-color-rgb),.2)}.input-container.outlined input{background:transparent;border:2px 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 2px rgba(var(--primary-color-rgb),.2)}.input-container.filled input{background:var(--surface-ground);border:1px 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 2px rgba(var(--primary-color-rgb),.2)}.input-container.error input{border-color:var(--danger-color)}.input-container.error input:focus{box-shadow:0 0 0 2px rgba(var(--danger-color-rgb),.2)}.input-container.success input{border-color:var(--success-color)}.input-container.success input:focus{box-shadow:0 0 0 2px rgba(var(--success-color-rgb),.2)}.input-container.disabled input{background:var(--surface-ground);cursor:not-allowed;opacity:.6}.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:1.2rem;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 2px rgba(var(--primary-color-rgb),.2)}.password-toggle i{font-size:1.2rem;position:static;pointer-events:auto}.input-container.small input{height:32px;padding:0 var(--spacing-md);font-size:var(--font-size-sm)}.input-container.large input{height:48px;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:1rem}.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:16px;height:16px;border:2px 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:1px solid var(--surface-border);border-radius:var(--border-radius);box-shadow:var(--shadow-lg);z-index:1000;max-height:200px;overflow-y:auto;margin-top:var(--spacing-xs)}.suggestion-item{padding:var(--spacing-sm) var(--spacing-md);cursor:pointer;transition:all .2s ease;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"] }]
+        }] });
+
+class PshMenuComponent {
+    constructor() {
+        // Model inputs
+        this.mode = model('vertical');
+        this.variant = model('default');
+        this.collapsible = model(false);
+        this.collapsed = model(false);
+        this.ariaLabels = model({
+            disabled: 'Disabled',
+            submenu: 'Submenu',
+            expand: 'Expand menu',
+            collapse: 'Collapse menu'
+        });
+        // Regular inputs
+        this.items = input([
+            { id: 'home', content: 'Home', icon: 'house' },
+            {
+                id: 'settings',
+                content: 'Settings',
+                icon: 'gear',
+                children: [
+                    { id: 'profile', content: 'Profile' },
+                    { id: 'security', content: 'Security' }
+                ]
+            },
+            { id: 'divider1', divider: true, content: 'Divider' },
+            { id: 'help', content: 'Help', icon: 'question' }
+        ]);
+        // Outputs
+        this.itemClick = output();
+        this.collapsedChange = output();
+        // State
+        this.expandedItems = signal(new Set());
+        // Computed values
+        this.hasItems = computed(() => this.items().length > 0);
+        this.isHorizontal = computed(() => this.mode() === 'horizontal');
+        this.isCollapsed = computed(() => this.collapsed() && !this.isHorizontal());
+        this.state = computed(() => this.getState());
+    }
+    getState() {
+        if (this.collapsed())
+            return 'collapsed';
+        if (this.collapsible())
+            return 'collapsible';
+        return this.mode();
+    }
+    toggleItem(item) {
+        if (item.disabled)
+            return;
+        if (item.children?.length) {
+            const newExpanded = new Set(this.expandedItems());
+            if (newExpanded.has(item.id)) {
+                newExpanded.delete(item.id);
+            }
+            else if (!this.collapsed()) {
+                newExpanded.add(item.id);
+            }
+            this.expandedItems.set(newExpanded);
+        }
+        this.itemClick.emit(item);
+    }
+    isExpanded(item) {
+        return !this.collapsed() && this.expandedItems().has(item.id);
+    }
+    toggleCollapse() {
+        if (this.collapsible()) {
+            // Fermer tous les sous-menus lors du collapse
+            if (!this.collapsed()) {
+                this.expandedItems.set(new Set());
+            }
+            this.collapsed.update((v) => !v);
+            this.collapsedChange.emit(this.collapsed());
+        }
+    }
+    getAriaLabel(item) {
+        const base = item.content;
+        if (item.disabled) {
+            return `${base} (${this.ariaLabels()['disabled']})`;
+        }
+        if (item.children?.length) {
+            return `${base} (${this.ariaLabels()['submenu']})`;
+        }
+        return base;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: PshMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: PshMenuComponent, isStandalone: true, selector: "psh-menu", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, ariaLabels: { classPropertyName: "ariaLabels", publicName: "ariaLabels", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { mode: "modeChange", variant: "variantChange", collapsible: "collapsibleChange", collapsed: "collapsedChange", ariaLabels: "ariaLabelsChange", itemClick: "itemClick", collapsedChange: "collapsedChange" }, ngImport: i0, template: "<nav \r\n  class=\"menu\"\r\n  [class.vertical]=\"mode() === 'vertical'\"\r\n  [class.horizontal]=\"mode() === 'horizontal'\"\r\n  [class.compact]=\"variant() === 'compact'\"\r\n  [class.expanded]=\"variant() === 'expanded'\"\r\n  [class.collapsed]=\"collapsed()\"\r\n  role=\"navigation\"\r\n  [attr.aria-label]=\"'Navigation menu'\"\r\n  [attr.data-state]=\"state()\"\r\n>\r\n  @if (collapsible()) {\r\n    <button \r\n      class=\"menu-collapse-button\"\r\n      (click)=\"toggleCollapse()\"\r\n      [attr.aria-expanded]=\"!collapsed()\"\r\n      [attr.aria-label]=\"collapsed() ? ariaLabels()['expand'] : ariaLabels()['collapse']\"\r\n    >\r\n      <i class=\"ph ph-caret-left\" aria-hidden=\"true\"></i>\r\n    </button>\r\n  }\r\n\r\n  <ul class=\"menu-list\" role=\"menubar\">\r\n    @for (item of items(); track item.id) {\r\n      @if (item.divider) {\r\n        <li class=\"menu-divider\" role=\"separator\"></li>\r\n      } @else {\r\n        <li \r\n          class=\"menu-item\"\r\n          [class.has-children]=\"item.children?.length\"\r\n          [class.expanded]=\"isExpanded(item)\"\r\n          [class.disabled]=\"item.disabled\"\r\n          role=\"none\"\r\n        >\r\n          <a\r\n            class=\"menu-link\"\r\n            [attr.href]=\"item.path\"\r\n            [class.active]=\"item.active\"\r\n            [attr.aria-disabled]=\"item.disabled\"\r\n            [attr.aria-expanded]=\"item.children?.length ? isExpanded(item) : null\"\r\n            [attr.aria-label]=\"getAriaLabel(item)\"\r\n            (click)=\"toggleItem(item)\"\r\n            role=\"menuitem\"\r\n            [attr.tabindex]=\"item.disabled ? -1 : 0\"\r\n          >\r\n            @if (item.icon) {\r\n              <i class=\"ph ph-{{ item.icon }}\" aria-hidden=\"true\"></i>\r\n            }\r\n            \r\n            @if (!collapsed() || mode() === 'horizontal') {\r\n              <span class=\"menu-label\">{{ item.content }}</span>\r\n            }\r\n\r\n            @if (item.badge) {\r\n              <span class=\"menu-badge\" role=\"status\">{{ item.badge }}</span>\r\n            }\r\n\r\n            @if (item.children?.length) {\r\n              <i \r\n                class=\"ph ph-caret-down menu-arrow\"\r\n                [class.expanded]=\"isExpanded(item)\"\r\n                aria-hidden=\"true\"\r\n              ></i>\r\n            }\r\n          </a>\r\n\r\n          @if (item.children?.length) {\r\n            <ul \r\n              class=\"submenu\" \r\n              role=\"menu\" \r\n              [attr.aria-label]=\"item.content + ' submenu'\"\r\n            >\r\n              @for (child of item.children; track child.id) {\r\n                <li class=\"menu-item\" role=\"none\">\r\n                  <a\r\n                    class=\"menu-link\"\r\n                    [attr.href]=\"child.path\"\r\n                    [class.active]=\"child.active\"\r\n                    [attr.aria-disabled]=\"child.disabled\"\r\n                    [attr.aria-label]=\"getAriaLabel(child)\"\r\n                    (click)=\"toggleItem(child)\"\r\n                    role=\"menuitem\"\r\n                    [attr.tabindex]=\"child.disabled ? -1 : 0\"\r\n                  >\r\n                    @if (child.icon) {\r\n                      <i class=\"ph ph-{{ child.icon }}\" aria-hidden=\"true\"></i>\r\n                    }\r\n                    <span class=\"menu-label\">{{ child.content }}</span>\r\n                    @if (child.badge) {\r\n                      <span class=\"menu-badge\" role=\"status\">{{ child.badge }}</span>\r\n                    }\r\n                  </a>\r\n                </li>\r\n              }\r\n            </ul>\r\n          }\r\n        </li>\r\n      }\r\n    }\r\n  </ul>\r\n</nav>", styles: [".menu{background:var(--surface-card);border-radius:var(--border-radius);transition:width .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:visible;width:100%;min-width:0}.menu.vertical{display:flex;flex-direction:column;min-width:0}.menu.horizontal{display:flex;flex-direction:row;align-items:center;padding:var(--spacing-sm);gap:var(--spacing-sm);overflow-x:auto}.menu.collapsed{width:64px;min-width:64px}.menu-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--spacing-xs);width:100%;min-width:0}.horizontal .menu-list{flex-direction:row;flex-wrap:nowrap;gap:var(--spacing-sm)}.menu-item{position:relative;width:100%;min-width:0}.horizontal .menu-item{width:auto}.menu-link{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);color:var(--text-color);text-decoration:none;transition:all .2s ease;cursor:pointer;border-radius:var(--border-radius);min-height:44px;position:relative;width:100%;min-width:0}.menu-link:hover{background:var(--surface-hover);color:var(--primary-color);transform:translate(2px)}.menu-link.active{background:var(--primary-color);color:var(--primary-color-text)}.menu.collapsed .menu-link{padding:var(--spacing-sm);justify-content:center}.menu-arrow{margin-left:auto;transition:transform .3s cubic-bezier(.4,0,.2,1);font-size:1.1rem;color:var(--text-color-secondary);flex-shrink:0}.menu-arrow.expanded{transform:rotate(-180deg)}.menu.collapsed .menu-arrow{display:none}.submenu{overflow:hidden;max-height:0;transition:max-height .3s cubic-bezier(.4,0,.2,1);background:var(--surface-ground);border-radius:var(--border-radius);margin:0 var(--spacing-sm);width:auto;min-width:0}.menu-item.expanded>.submenu{max-height:1000px;margin-top:var(--spacing-xs);margin-bottom:var(--spacing-xs)}.menu.collapsed .submenu{display:none}.submenu .menu-link{padding-left:calc(var(--spacing-md) * 2);font-size:.95em}.submenu .menu-link:hover{transform:translate(4px)}.menu-badge{background:var(--primary-color);color:var(--primary-color-text);padding:2px var(--spacing-xs);border-radius:var(--border-radius);font-size:var(--font-size-xs);margin-left:auto;flex-shrink:0}.menu-divider{height:1px;background:var(--surface-border);margin:var(--spacing-sm) var(--spacing-md);opacity:.5}.menu-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .3s ease;min-width:0;flex:1}.menu.collapsed .menu-label{opacity:0;width:0}.menu-link i{font-size:1.2rem;flex-shrink:0;width:1.2rem;height:1.2rem;display:flex;align-items:center;justify-content:center}.menu-collapse-button{position:absolute;top:var(--spacing-sm);right:calc(-1 * var(--spacing-lg));width:28px;height:28px;background:var(--surface-card);border:1px solid var(--surface-border);border-radius:var(--border-radius);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;color:var(--text-color-secondary);z-index:2;box-shadow:var(--shadow-sm)}.menu-collapse-button:hover{background:var(--surface-hover);color:var(--primary-color);transform:scale(1.05);box-shadow:var(--shadow-md)}.menu-collapse-button:focus{outline:none;box-shadow:0 0 0 2px rgba(var(--primary-color-rgb),.2)}.menu-collapse-button i{font-size:1rem;transition:transform .3s ease}.menu.collapsed .menu-collapse-button i{transform:rotate(180deg)}@media (max-width: 768px){.menu.horizontal{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}.menu.horizontal::-webkit-scrollbar{display:none}.menu.vertical:not(.collapsed){min-width:200px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: PshMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'psh-menu', standalone: true, imports: [CommonModule], template: "<nav \r\n  class=\"menu\"\r\n  [class.vertical]=\"mode() === 'vertical'\"\r\n  [class.horizontal]=\"mode() === 'horizontal'\"\r\n  [class.compact]=\"variant() === 'compact'\"\r\n  [class.expanded]=\"variant() === 'expanded'\"\r\n  [class.collapsed]=\"collapsed()\"\r\n  role=\"navigation\"\r\n  [attr.aria-label]=\"'Navigation menu'\"\r\n  [attr.data-state]=\"state()\"\r\n>\r\n  @if (collapsible()) {\r\n    <button \r\n      class=\"menu-collapse-button\"\r\n      (click)=\"toggleCollapse()\"\r\n      [attr.aria-expanded]=\"!collapsed()\"\r\n      [attr.aria-label]=\"collapsed() ? ariaLabels()['expand'] : ariaLabels()['collapse']\"\r\n    >\r\n      <i class=\"ph ph-caret-left\" aria-hidden=\"true\"></i>\r\n    </button>\r\n  }\r\n\r\n  <ul class=\"menu-list\" role=\"menubar\">\r\n    @for (item of items(); track item.id) {\r\n      @if (item.divider) {\r\n        <li class=\"menu-divider\" role=\"separator\"></li>\r\n      } @else {\r\n        <li \r\n          class=\"menu-item\"\r\n          [class.has-children]=\"item.children?.length\"\r\n          [class.expanded]=\"isExpanded(item)\"\r\n          [class.disabled]=\"item.disabled\"\r\n          role=\"none\"\r\n        >\r\n          <a\r\n            class=\"menu-link\"\r\n            [attr.href]=\"item.path\"\r\n            [class.active]=\"item.active\"\r\n            [attr.aria-disabled]=\"item.disabled\"\r\n            [attr.aria-expanded]=\"item.children?.length ? isExpanded(item) : null\"\r\n            [attr.aria-label]=\"getAriaLabel(item)\"\r\n            (click)=\"toggleItem(item)\"\r\n            role=\"menuitem\"\r\n            [attr.tabindex]=\"item.disabled ? -1 : 0\"\r\n          >\r\n            @if (item.icon) {\r\n              <i class=\"ph ph-{{ item.icon }}\" aria-hidden=\"true\"></i>\r\n            }\r\n            \r\n            @if (!collapsed() || mode() === 'horizontal') {\r\n              <span class=\"menu-label\">{{ item.content }}</span>\r\n            }\r\n\r\n            @if (item.badge) {\r\n              <span class=\"menu-badge\" role=\"status\">{{ item.badge }}</span>\r\n            }\r\n\r\n            @if (item.children?.length) {\r\n              <i \r\n                class=\"ph ph-caret-down menu-arrow\"\r\n                [class.expanded]=\"isExpanded(item)\"\r\n                aria-hidden=\"true\"\r\n              ></i>\r\n            }\r\n          </a>\r\n\r\n          @if (item.children?.length) {\r\n            <ul \r\n              class=\"submenu\" \r\n              role=\"menu\" \r\n              [attr.aria-label]=\"item.content + ' submenu'\"\r\n            >\r\n              @for (child of item.children; track child.id) {\r\n                <li class=\"menu-item\" role=\"none\">\r\n                  <a\r\n                    class=\"menu-link\"\r\n                    [attr.href]=\"child.path\"\r\n                    [class.active]=\"child.active\"\r\n                    [attr.aria-disabled]=\"child.disabled\"\r\n                    [attr.aria-label]=\"getAriaLabel(child)\"\r\n                    (click)=\"toggleItem(child)\"\r\n                    role=\"menuitem\"\r\n                    [attr.tabindex]=\"child.disabled ? -1 : 0\"\r\n                  >\r\n                    @if (child.icon) {\r\n                      <i class=\"ph ph-{{ child.icon }}\" aria-hidden=\"true\"></i>\r\n                    }\r\n                    <span class=\"menu-label\">{{ child.content }}</span>\r\n                    @if (child.badge) {\r\n                      <span class=\"menu-badge\" role=\"status\">{{ child.badge }}</span>\r\n                    }\r\n                  </a>\r\n                </li>\r\n              }\r\n            </ul>\r\n          }\r\n        </li>\r\n      }\r\n    }\r\n  </ul>\r\n</nav>", styles: [".menu{background:var(--surface-card);border-radius:var(--border-radius);transition:width .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:visible;width:100%;min-width:0}.menu.vertical{display:flex;flex-direction:column;min-width:0}.menu.horizontal{display:flex;flex-direction:row;align-items:center;padding:var(--spacing-sm);gap:var(--spacing-sm);overflow-x:auto}.menu.collapsed{width:64px;min-width:64px}.menu-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--spacing-xs);width:100%;min-width:0}.horizontal .menu-list{flex-direction:row;flex-wrap:nowrap;gap:var(--spacing-sm)}.menu-item{position:relative;width:100%;min-width:0}.horizontal .menu-item{width:auto}.menu-link{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);color:var(--text-color);text-decoration:none;transition:all .2s ease;cursor:pointer;border-radius:var(--border-radius);min-height:44px;position:relative;width:100%;min-width:0}.menu-link:hover{background:var(--surface-hover);color:var(--primary-color);transform:translate(2px)}.menu-link.active{background:var(--primary-color);color:var(--primary-color-text)}.menu.collapsed .menu-link{padding:var(--spacing-sm);justify-content:center}.menu-arrow{margin-left:auto;transition:transform .3s cubic-bezier(.4,0,.2,1);font-size:1.1rem;color:var(--text-color-secondary);flex-shrink:0}.menu-arrow.expanded{transform:rotate(-180deg)}.menu.collapsed .menu-arrow{display:none}.submenu{overflow:hidden;max-height:0;transition:max-height .3s cubic-bezier(.4,0,.2,1);background:var(--surface-ground);border-radius:var(--border-radius);margin:0 var(--spacing-sm);width:auto;min-width:0}.menu-item.expanded>.submenu{max-height:1000px;margin-top:var(--spacing-xs);margin-bottom:var(--spacing-xs)}.menu.collapsed .submenu{display:none}.submenu .menu-link{padding-left:calc(var(--spacing-md) * 2);font-size:.95em}.submenu .menu-link:hover{transform:translate(4px)}.menu-badge{background:var(--primary-color);color:var(--primary-color-text);padding:2px var(--spacing-xs);border-radius:var(--border-radius);font-size:var(--font-size-xs);margin-left:auto;flex-shrink:0}.menu-divider{height:1px;background:var(--surface-border);margin:var(--spacing-sm) var(--spacing-md);opacity:.5}.menu-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .3s ease;min-width:0;flex:1}.menu.collapsed .menu-label{opacity:0;width:0}.menu-link i{font-size:1.2rem;flex-shrink:0;width:1.2rem;height:1.2rem;display:flex;align-items:center;justify-content:center}.menu-collapse-button{position:absolute;top:var(--spacing-sm);right:calc(-1 * var(--spacing-lg));width:28px;height:28px;background:var(--surface-card);border:1px solid var(--surface-border);border-radius:var(--border-radius);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;color:var(--text-color-secondary);z-index:2;box-shadow:var(--shadow-sm)}.menu-collapse-button:hover{background:var(--surface-hover);color:var(--primary-color);transform:scale(1.05);box-shadow:var(--shadow-md)}.menu-collapse-button:focus{outline:none;box-shadow:0 0 0 2px rgba(var(--primary-color-rgb),.2)}.menu-collapse-button i{font-size:1rem;transition:transform .3s ease}.menu.collapsed .menu-collapse-button i{transform:rotate(180deg)}@media (max-width: 768px){.menu.horizontal{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}.menu.horizontal::-webkit-scrollbar{display:none}.menu.vertical:not(.collapsed){min-width:200px}}\n"] }]
+        }] });
+
+/**
+ * Token d'injection pour la configuration globale des modales
+ */
+const MODAL_CONFIG = new InjectionToken('MODAL_CONFIG', {
+    factory: () => ({
+        size: 'medium',
+        showClose: true,
+        closeOnBackdrop: true,
+        closeOnEscape: true,
+        preventScroll: true,
+        showFooter: true,
+        dismissLabel: 'Close',
+        confirmLabel: 'Confirm',
+        cancelLabel: 'Cancel'
+    })
+});
+/**
+ * Service pour la gestion des modales
+ */
+class ModalService {
+    constructor() {
+        this.config = inject(MODAL_CONFIG);
+        this.modalsSignal = signal(new Set());
+    }
+    /**
+     * Récupère la configuration de la modale
+     */
+    getConfig() {
+        return this.config;
+    }
+    /**
+     * Génère un identifiant unique pour la modale
+     */
+    generateId() {
+        return `modal-${Math.random().toString(36).substring(2, 11)}`;
+    }
+    /**
+     * Ajoute une modale à la liste
+     */
+    register(id) {
+        this.modalsSignal.update(modals => {
+            modals.add(id);
+            return modals;
+        });
+    }
+    /**
+     * Supprime une modale de la liste
+     */
+    unregister(id) {
+        this.modalsSignal.update(modals => {
+            modals.delete(id);
+            return modals;
+        });
+    }
+    /**
+     * Vérifie si une modale est enregistrée
+     */
+    isRegistered(id) {
+        return this.modalsSignal().has(id);
+    }
+    /**
+     * Récupère le nombre de modales actives
+     */
+    getActiveModalsCount() {
+        return this.modalsSignal().size;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ModalService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ModalService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+class PshModalComponent {
+    getState() {
+        if (!this.open())
+            return 'closed';
+        return 'open';
+    }
+    constructor() {
+        this.config = inject(MODAL_CONFIG);
+        this.modalService = inject(ModalService);
+        this.modalId = this.modalService.generateId();
+        // Model inputs with defaults from config
+        this.open = model(false);
+        this.size = model(this.config.size ?? 'medium');
+        this.showClose = model(this.config.showClose ?? true);
+        this.closeOnBackdrop = model(this.config.closeOnBackdrop ?? true);
+        this.closeOnEscape = model(this.config.closeOnEscape ?? true);
+        this.preventScroll = model(this.config.preventScroll ?? true);
+        this.showFooter = model(this.config.showFooter ?? true);
+        // Regular inputs
+        this.title = input('Modal Title');
+        this.dismissLabel = input(this.config.dismissLabel ?? 'Close');
+        this.confirmLabel = input(this.config.confirmLabel ?? 'Confirm');
+        this.cancelLabel = input(this.config.cancelLabel ?? 'Cancel');
+        // Outputs
+        this.closed = output();
+        this.confirmed = output();
+        this.hasCustomFooterValue = false;
+        this.escapeHandler = (event) => {
+            if (this.closeOnEscape() && this.open() && event.key === 'Escape') {
+                this.handleClose();
+            }
+        };
+        // Computed values
+        this.hasCustomFooter = computed(() => this.hasCustomFooterValue);
+        this.state = computed(() => this.getState());
+        // Gérer les changements d'état
+        effect(() => {
+            if (this.open()) {
+                this.modalService.register(this.modalId);
+                this.setupScrollLock();
+                document.addEventListener('keydown', this.escapeHandler);
+            }
+            else {
+                this.modalService.unregister(this.modalId);
+                this.removeScrollLock();
+                document.removeEventListener('keydown', this.escapeHandler);
+            }
+        });
+    }
+    handleClose() {
+        this.open.set(false);
+        this.closed.emit();
+    }
+    handleConfirm() {
+        this.confirmed.emit();
+    }
+    handleBackdropClick(event) {
+        if (this.closeOnBackdrop() && event.target === event.currentTarget) {
+            this.handleClose();
+        }
+    }
+    setupScrollLock() {
+        if (this.preventScroll() && typeof window !== 'undefined') {
+            // Calculate scrollbar width only once when opening
+            if (!document.documentElement.style.getPropertyValue('--scrollbar-width')) {
+                const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+                document.documentElement.style.setProperty('--scrollbar-width', `${scrollbarWidth}px`);
+            }
+            document.body.classList.add('modal-open');
+        }
+    }
+    removeScrollLock() {
+        if (this.preventScroll() && typeof window !== 'undefined') {
+            document.body.classList.remove('modal-open');
+        }
+    }
+    ngOnDestroy() {
+        this.removeScrollLock();
+        document.removeEventListener('keydown', this.escapeHandler);
+        this.modalService.unregister(this.modalId);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: PshModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: PshModalComponent, isStandalone: true, selector: "psh-modal", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showClose: { classPropertyName: "showClose", publicName: "showClose", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdrop: { classPropertyName: "closeOnBackdrop", publicName: "closeOnBackdrop", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, preventScroll: { classPropertyName: "preventScroll", publicName: "preventScroll", isSignal: true, isRequired: false, transformFunction: null }, showFooter: { classPropertyName: "showFooter", publicName: "showFooter", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, dismissLabel: { classPropertyName: "dismissLabel", publicName: "dismissLabel", isSignal: true, isRequired: false, transformFunction: null }, confirmLabel: { classPropertyName: "confirmLabel", publicName: "confirmLabel", isSignal: true, isRequired: false, transformFunction: null }, cancelLabel: { classPropertyName: "cancelLabel", publicName: "cancelLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", size: "sizeChange", showClose: "showCloseChange", closeOnBackdrop: "closeOnBackdropChange", closeOnEscape: "closeOnEscapeChange", preventScroll: "preventScrollChange", showFooter: "showFooterChange", closed: "closed", confirmed: "confirmed" }, viewQueries: [{ propertyName: "modalContent", first: true, predicate: ["modalContent"], descendants: true }], ngImport: i0, template: "<div\n  class=\"modal-backdrop\"\n  [class.open]=\"open()\"\n  (click)=\"handleBackdropClick($event)\"\n  role=\"dialog\"\n  aria-modal=\"true\"\n  [attr.aria-hidden]=\"!open()\"\n  [attr.aria-labelledby]=\"title() ? 'modal-title' : undefined\"\n  [attr.data-state]=\"state()\"\n>\n  <div\n    class=\"modal-container\"\n    [class.small]=\"size() === 'small'\"\n    [class.large]=\"size() === 'large'\"\n    role=\"document\"\n  >\n    <div #modalContent class=\"modal-content-wrapper\">\n      <div class=\"modal-header\">\n        <h2 class=\"modal-title\" id=\"modal-title\">\n          <ng-content select=\"[modal-title]\">\n            @if (title()) {\n            {{ title() }}\n            } @else { Modal Title }\n          </ng-content>\n        </h2>\n        @if (showClose()) {\n        <button\n          class=\"modal-close\"\n          (click)=\"handleClose()\"\n          [attr.aria-label]=\"dismissLabel()\"\n        >\n          <i class=\"ph ph-x\" aria-hidden=\"true\"></i>\n        </button>\n        }\n      </div>\n\n      <div class=\"modal-content\">\n        <ng-content>\n          <p>\n            Modal content goes here. You can replace this with your own content.\n          </p>\n        </ng-content>\n      </div>\n\n      @if (showFooter() && !hasCustomFooter()) {\n      <div class=\"modal-footer\">\n        <psh-button appearance=\"outline\" variant=\"primary\" size=\"medium\" (clicked)=\"handleClose()\">\n          {{ cancelLabel() }}\n        </psh-button>\n        <psh-button appearance=\"filled\" variant=\"primary\" size=\"medium\" (clicked)=\"handleConfirm()\">\n          {{ confirmLabel() }}\n        </psh-button>\n      </div>\n      } @if (showFooter() && hasCustomFooter()) {\n      <div class=\"modal-footer\">\n        <ng-content select=\"[modal-footer]\" #modalFooter></ng-content>\n      </div>\n      }\n    </div>\n  </div>\n</div>", styles: [".modal-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(var(--surface-900-rgb),.6);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);align-items:center;justify-content:center;z-index:1000;pointer-events:none;opacity:0;display:none;transition:opacity .3s cubic-bezier(.4,0,.2,1)}.modal-backdrop.open{opacity:1;pointer-events:all;display:flex}.modal-content-wrapper{display:flex;flex-direction:column;max-height:90vh}.modal-container{background:var(--surface-card);border-radius:var(--border-radius-lg);box-shadow:var(--shadow-lg),0 0 0 1px rgba(var(--primary-color-rgb),.05);width:90%;max-width:var(--modal-max-width-md);transform:translateY(20px) scale(.95);transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .3s cubic-bezier(.4,0,.2,1);border:1px solid var(--surface-border)}.modal-backdrop.open .modal-container{transform:translateY(0) scale(1)}.modal-container.small{max-width:var(--modal-max-width-sm)}.modal-container.large{max-width:var(--modal-max-width-lg)}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-lg) var(--spacing-xl);border-bottom:1px solid var(--surface-border);background:var(--surface-ground);border-top-left-radius:var(--border-radius-lg);border-top-right-radius:var(--border-radius-lg)}.modal-title{font-size:var(--font-size-xl);font-weight:600;color:var(--text-color);margin:0;display:flex;align-items:center;gap:var(--spacing-sm)}.modal-close{background:transparent;border:none;color:var(--text-color-secondary);padding:var(--spacing-sm);cursor:pointer;border-radius:var(--border-radius);display:flex;align-items:center;justify-content:center;transition:all .2s cubic-bezier(.4,0,.2,1);margin:calc(var(--spacing-sm) * -1)}.modal-close:hover{background:var(--surface-hover);color:var(--text-color);transform:scale(1.1)}.modal-close i{font-size:1.25rem}.modal-content{padding:var(--spacing-xl);overflow-y:auto;flex-grow:1;min-height:0;color:var(--text-color-secondary);line-height:var(--line-height-relaxed)}.modal-footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--spacing-xl);padding:var(--spacing-lg) var(--spacing-xl);border-top:1px solid var(--surface-border);background:var(--surface-ground);border-bottom-left-radius:var(--border-radius-lg);border-bottom-right-radius:var(--border-radius-lg)}.modal-footer lib-button{min-width:140px;flex:0 0 auto}.modal-footer lib-button[variant=text]{min-width:auto;margin-right:auto;flex:0 0 auto}@media (max-width: 768px){.modal-container{width:95%;margin:var(--spacing-md)}.modal-header{padding:var(--spacing-md) var(--spacing-lg)}.modal-title{font-size:var(--font-size-lg)}.modal-content{padding:var(--spacing-lg)}.modal-footer{padding:var(--spacing-md) var(--spacing-lg);flex-direction:column-reverse;gap:var(--spacing-sm)}.modal-footer psh-button{width:100%;min-width:auto;margin-right:0!important}}@media (max-width: 480px){.modal-container{width:100%;height:100%;max-height:100vh;margin:0;border-radius:0}.modal-header{padding:var(--spacing-sm) var(--spacing-md)}.modal-title{font-size:var(--font-size-base)}.modal-content{padding:var(--spacing-md);flex:1}.modal-footer{padding:var(--spacing-sm) var(--spacing-md)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: PshButtonComponent, selector: "psh-button", inputs: ["appearance", "variant", "size", "disabled", "loading", "fullWidth", "iconPosition", "icon", "ariaLabel", "loadingText", "disabledText", "iconOnlyText", "type"], outputs: ["appearanceChange", "variantChange", "sizeChange", "disabledChange", "loadingChange", "fullWidthChange", "iconPositionChange", "clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: PshModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'psh-modal', standalone: true, imports: [CommonModule, PshButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"modal-backdrop\"\n  [class.open]=\"open()\"\n  (click)=\"handleBackdropClick($event)\"\n  role=\"dialog\"\n  aria-modal=\"true\"\n  [attr.aria-hidden]=\"!open()\"\n  [attr.aria-labelledby]=\"title() ? 'modal-title' : undefined\"\n  [attr.data-state]=\"state()\"\n>\n  <div\n    class=\"modal-container\"\n    [class.small]=\"size() === 'small'\"\n    [class.large]=\"size() === 'large'\"\n    role=\"document\"\n  >\n    <div #modalContent class=\"modal-content-wrapper\">\n      <div class=\"modal-header\">\n        <h2 class=\"modal-title\" id=\"modal-title\">\n          <ng-content select=\"[modal-title]\">\n            @if (title()) {\n            {{ title() }}\n            } @else { Modal Title }\n          </ng-content>\n        </h2>\n        @if (showClose()) {\n        <button\n          class=\"modal-close\"\n          (click)=\"handleClose()\"\n          [attr.aria-label]=\"dismissLabel()\"\n        >\n          <i class=\"ph ph-x\" aria-hidden=\"true\"></i>\n        </button>\n        }\n      </div>\n\n      <div class=\"modal-content\">\n        <ng-content>\n          <p>\n            Modal content goes here. You can replace this with your own content.\n          </p>\n        </ng-content>\n      </div>\n\n      @if (showFooter() && !hasCustomFooter()) {\n      <div class=\"modal-footer\">\n        <psh-button appearance=\"outline\" variant=\"primary\" size=\"medium\" (clicked)=\"handleClose()\">\n          {{ cancelLabel() }}\n        </psh-button>\n        <psh-button appearance=\"filled\" variant=\"primary\" size=\"medium\" (clicked)=\"handleConfirm()\">\n          {{ confirmLabel() }}\n        </psh-button>\n      </div>\n      } @if (showFooter() && hasCustomFooter()) {\n      <div class=\"modal-footer\">\n        <ng-content select=\"[modal-footer]\" #modalFooter></ng-content>\n      </div>\n      }\n    </div>\n  </div>\n</div>", styles: [".modal-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(var(--surface-900-rgb),.6);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);align-items:center;justify-content:center;z-index:1000;pointer-events:none;opacity:0;display:none;transition:opacity .3s cubic-bezier(.4,0,.2,1)}.modal-backdrop.open{opacity:1;pointer-events:all;display:flex}.modal-content-wrapper{display:flex;flex-direction:column;max-height:90vh}.modal-container{background:var(--surface-card);border-radius:var(--border-radius-lg);box-shadow:var(--shadow-lg),0 0 0 1px rgba(var(--primary-color-rgb),.05);width:90%;max-width:var(--modal-max-width-md);transform:translateY(20px) scale(.95);transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .3s cubic-bezier(.4,0,.2,1);border:1px solid var(--surface-border)}.modal-backdrop.open .modal-container{transform:translateY(0) scale(1)}.modal-container.small{max-width:var(--modal-max-width-sm)}.modal-container.large{max-width:var(--modal-max-width-lg)}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-lg) var(--spacing-xl);border-bottom:1px solid var(--surface-border);background:var(--surface-ground);border-top-left-radius:var(--border-radius-lg);border-top-right-radius:var(--border-radius-lg)}.modal-title{font-size:var(--font-size-xl);font-weight:600;color:var(--text-color);margin:0;display:flex;align-items:center;gap:var(--spacing-sm)}.modal-close{background:transparent;border:none;color:var(--text-color-secondary);padding:var(--spacing-sm);cursor:pointer;border-radius:var(--border-radius);display:flex;align-items:center;justify-content:center;transition:all .2s cubic-bezier(.4,0,.2,1);margin:calc(var(--spacing-sm) * -1)}.modal-close:hover{background:var(--surface-hover);color:var(--text-color);transform:scale(1.1)}.modal-close i{font-size:1.25rem}.modal-content{padding:var(--spacing-xl);overflow-y:auto;flex-grow:1;min-height:0;color:var(--text-color-secondary);line-height:var(--line-height-relaxed)}.modal-footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--spacing-xl);padding:var(--spacing-lg) var(--spacing-xl);border-top:1px solid var(--surface-border);background:var(--surface-ground);border-bottom-left-radius:var(--border-radius-lg);border-bottom-right-radius:var(--border-radius-lg)}.modal-footer lib-button{min-width:140px;flex:0 0 auto}.modal-footer lib-button[variant=text]{min-width:auto;margin-right:auto;flex:0 0 auto}@media (max-width: 768px){.modal-container{width:95%;margin:var(--spacing-md)}.modal-header{padding:var(--spacing-md) var(--spacing-lg)}.modal-title{font-size:var(--font-size-lg)}.modal-content{padding:var(--spacing-lg)}.modal-footer{padding:var(--spacing-md) var(--spacing-lg);flex-direction:column-reverse;gap:var(--spacing-sm)}.modal-footer psh-button{width:100%;min-width:auto;margin-right:0!important}}@media (max-width: 480px){.modal-container{width:100%;height:100%;max-height:100vh;margin:0;border-radius:0}.modal-header{padding:var(--spacing-sm) var(--spacing-md)}.modal-title{font-size:var(--font-size-base)}.modal-content{padding:var(--spacing-md);flex:1}.modal-footer{padding:var(--spacing-sm) var(--spacing-md)}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { modalContent: [{
+                type: ViewChild,
+                args: ['modalContent', { static: false }]
+            }] } });
+
+const PAGINATION_CONFIG = new InjectionToken('PAGINATION_CONFIG', {
+    factory: () => ({
+        size: 'medium',
+        variant: 'default',
+        showFirstLast: true,
+        showPrevNext: true,
+        maxVisiblePages: 5,
+        showItemsPerPage: false,
+        itemsPerPageOptions: [5, 10, 25, 50]
+    })
+});
+const PAGINATION_STYLES = new InjectionToken('PAGINATION_STYLES', {
+    factory: () => []
+});
+class PshPaginationComponent {
+    constructor() {
+        this.config = inject(PAGINATION_CONFIG);
+        this.styles = inject(PAGINATION_STYLES, { optional: true }) ?? [];
+        // Model inputs with defaults from config
+        this.currentPage = model(1);
+        this.totalPages = model(1);
+        this.size = model(this.config.size ?? 'medium');
+        this.variant = model(this.config.variant ?? 'default');
+        this.showFirstLast = model(this.config.showFirstLast ?? true);
+        this.showPrevNext = model(this.config.showPrevNext ?? true);
+        this.maxVisiblePages = model(this.config.maxVisiblePages ?? 5);
+        this.showItemsPerPage = model(this.config.showItemsPerPage ?? false);
+        // Regular inputs
+        this.itemsPerPage = input(10);
+        this.itemsPerPageOptions = input([5, 10, 25, 50]);
+        this.firstLabel = input('First');
+        this.previousLabel = input('Previous');
+        this.nextLabel = input('Next');
+        this.lastLabel = input('Last');
+        this.pageLabel = input('Page');
+        this.itemsLabel = input('items');
+        this.itemsPerPageLabel = input('Items per page');
+        // Outputs
+        this.pageChange = output();
+        this.itemsPerPageChange = output();
+        // Computed values
+        this.pages = computed(() => {
+            const pages = [];
+            const halfVisible = Math.floor(this.maxVisiblePages() / 2);
+            let start = Math.max(1, this.currentPage() - halfVisible);
+            let end = Math.min(this.totalPages(), start + this.maxVisiblePages() - 1);
+            if (end - start + 1 < this.maxVisiblePages()) {
+                start = Math.max(1, end - this.maxVisiblePages() + 1);
+            }
+            for (let i = start; i <= end; i++) {
+                pages.push(i);
+            }
+            return pages;
+        });
+        this.customStyles = computed(() => Object.assign({}, ...this.styles));
+        this.state = computed(() => this.getState());
+    }
+    getState() {
+        if (this.currentPage() === 1)
+            return 'first';
+        if (this.currentPage() === this.totalPages())
+            return 'last';
+        return 'default';
+    }
+    goToPage(page) {
+        if (page !== this.currentPage() && page >= 1 && page <= this.totalPages()) {
+            this.currentPage.set(page);
+            this.pageChange.emit(page);
+        }
+    }
+    onItemsPerPageChange(event) {
+        const value = parseInt(event.target.value);
+        this.itemsPerPageChange.emit(value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: PshPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: PshPaginationComponent, isStandalone: true, selector: "psh-pagination", inputs: { currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: false, transformFunction: null }, totalPages: { classPropertyName: "totalPages", publicName: "totalPages", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, showFirstLast: { classPropertyName: "showFirstLast", publicName: "showFirstLast", isSignal: true, isRequired: false, transformFunction: null }, showPrevNext: { classPropertyName: "showPrevNext", publicName: "showPrevNext", isSignal: true, isRequired: false, transformFunction: null }, maxVisiblePages: { classPropertyName: "maxVisiblePages", publicName: "maxVisiblePages", isSignal: true, isRequired: false, transformFunction: null }, showItemsPerPage: { classPropertyName: "showItemsPerPage", publicName: "showItemsPerPage", isSignal: true, isRequired: false, transformFunction: null }, itemsPerPage: { classPropertyName: "itemsPerPage", publicName: "itemsPerPage", isSignal: true, isRequired: false, transformFunction: null }, itemsPerPageOptions: { classPropertyName: "itemsPerPageOptions", publicName: "itemsPerPageOptions", isSignal: true, isRequired: false, transformFunction: null }, firstLabel: { classPropertyName: "firstLabel", publicName: "firstLabel", isSignal: true, isRequired: false, transformFunction: null }, previousLabel: { classPropertyName: "previousLabel", publicName: "previousLabel", isSignal: true, isRequired: false, transformFunction: null }, nextLabel: { classPropertyName: "nextLabel", publicName: "nextLabel", isSignal: true, isRequired: false, transformFunction: null }, lastLabel: { classPropertyName: "lastLabel", publicName: "lastLabel", isSignal: true, isRequired: false, transformFunction: null }, pageLabel: { classPropertyName: "pageLabel", publicName: "pageLabel", isSignal: true, isRequired: false, transformFunction: null }, itemsLabel: { classPropertyName: "itemsLabel", publicName: "itemsLabel", isSignal: true, isRequired: false, transformFunction: null }, itemsPerPageLabel: { classPropertyName: "itemsPerPageLabel", publicName: "itemsPerPageLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { currentPage: "currentPageChange", totalPages: "totalPagesChange", size: "sizeChange", variant: "variantChange", showFirstLast: "showFirstLastChange", showPrevNext: "showPrevNextChange", maxVisiblePages: "maxVisiblePagesChange", showItemsPerPage: "showItemsPerPageChange", pageChange: "pageChange", itemsPerPageChange: "itemsPerPageChange" }, ngImport: i0, template: "<nav \r\n  class=\"pagination\"\r\n  [class.small]=\"size() === 'small'\"\r\n  [class.large]=\"size() === 'large'\"\r\n  [class.outline]=\"variant() === 'outline'\"\r\n  role=\"navigation\"\r\n  [attr.aria-label]=\"'Pagination navigation'\"\r\n  [attr.data-state]=\"state()\"\r\n>\r\n  @if (showItemsPerPage()) {\r\n    <div class=\"items-per-page\">\r\n      <select\r\n        [value]=\"itemsPerPage()\"\r\n        (change)=\"onItemsPerPageChange($event)\"\r\n        [attr.aria-label]=\"itemsPerPageLabel()\"\r\n      >\r\n        @for (option of itemsPerPageOptions(); track option) {\r\n          <option [value]=\"option\">\r\n            {{ option }} {{ itemsLabel() }}\r\n          </option>\r\n        }\r\n      </select>\r\n    </div>\r\n  }\r\n\r\n  @if (showFirstLast()) {\r\n    <button\r\n      class=\"page-button\"\r\n      [class.disabled]=\"currentPage() === 1\"\r\n      (click)=\"goToPage(1)\"\r\n      [attr.aria-label]=\"firstLabel()\"\r\n      [disabled]=\"currentPage() === 1\"\r\n    >\r\n      <i class=\"ph ph-caret-double-left\" aria-hidden=\"true\"></i>\r\n    </button>\r\n  }\r\n\r\n  @if (showPrevNext()) {\r\n    <button\r\n      class=\"page-button\"\r\n      [class.disabled]=\"currentPage() === 1\"\r\n      (click)=\"goToPage(currentPage() - 1)\"\r\n      [attr.aria-label]=\"previousLabel()\"\r\n      [disabled]=\"currentPage() === 1\"\r\n    >\r\n      <i class=\"ph ph-caret-left\" aria-hidden=\"true\"></i>\r\n    </button>\r\n  }\r\n\r\n  @for (page of pages(); track page) {\r\n    <button\r\n      class=\"page-button\"\r\n      [class.active]=\"page === currentPage()\"\r\n      (click)=\"goToPage(page)\"\r\n      [attr.aria-current]=\"page === currentPage() ? 'page' : null\"\r\n      [attr.aria-label]=\"pageLabel() + ' ' + page\"\r\n    >\r\n      {{ page }}\r\n    </button>\r\n  }\r\n\r\n  @if (showPrevNext()) {\r\n    <button\r\n      class=\"page-button\"\r\n      [class.disabled]=\"currentPage() === totalPages()\"\r\n      (click)=\"goToPage(currentPage() + 1)\"\r\n      [attr.aria-label]=\"nextLabel()\"\r\n      [disabled]=\"currentPage() === totalPages()\"\r\n    >\r\n      <i class=\"ph ph-caret-right\" aria-hidden=\"true\"></i>\r\n    </button>\r\n  }\r\n\r\n  @if (showFirstLast()) {\r\n    <button\r\n      class=\"page-button\"\r\n      [class.disabled]=\"currentPage() === totalPages()\"\r\n      (click)=\"goToPage(totalPages())\"\r\n      [attr.aria-label]=\"lastLabel()\"\r\n      [disabled]=\"currentPage() === totalPages()\"\r\n    >\r\n      <i class=\"ph ph-caret-double-right\" aria-hidden=\"true\"></i>\r\n    </button>\r\n  }\r\n</nav>", styles: [".pagination{display:flex;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-sm);border-radius:var(--border-radius);background:var(--surface-card)}.pagination.outline{background:transparent;border:1px solid var(--surface-border)}.items-per-page{margin-right:var(--spacing-md)}.items-per-page select{padding:var(--spacing-xs) var(--spacing-sm);border:1px solid var(--surface-border);border-radius:var(--border-radius);background:var(--surface-card);color:var(--text-color);font-family:inherit;font-size:var(--font-size-base);cursor:pointer;transition:all .2s ease}.items-per-page select:hover{border-color:var(--primary-color)}.items-per-page select:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 2px rgba(var(--primary-color-rgb),.2)}.small .items-per-page select{padding:calc(var(--spacing-xs) * .75) var(--spacing-sm);font-size:var(--font-size-sm)}.large .items-per-page select{padding:var(--spacing-sm) var(--spacing-md);font-size:var(--font-size-lg)}.page-button{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:36px;padding:var(--spacing-xs);border:none;border-radius:var(--border-radius);background:var(--surface-ground);color:var(--text-color);font-family:inherit;font-size:var(--font-size-base);cursor:pointer;transition:all .2s ease}.pagination.outline .page-button{background:transparent;border:1px solid var(--surface-border)}.pagination.outline .page-button:hover:not(.disabled):not(.active){background:var(--surface-hover);border-color:var(--primary-color)}.pagination.outline .page-button.active{background:transparent;border-color:var(--primary-color);color:var(--primary-color)}.page-button:hover:not(.disabled):not(.active){background:var(--surface-hover)}.page-button.active{background:var(--primary-color);color:var(--primary-color-text)}.page-button.disabled{opacity:.6;cursor:not-allowed}.page-button i{font-size:1rem}.pagination.outline .page-button{background:transparent}.pagination.outline .page-button.active{background:var(--primary-color);color:var(--primary-color-text);border-color:var(--primary-color)}.pagination.small .page-button{min-width:32px;height:32px;font-size:var(--font-size-sm)}.pagination.small .page-button i{font-size:.875rem}.pagination.large .page-button{min-width:44px;height:44px;font-size:var(--font-size-lg)}.pagination.large .page-button i{font-size:1.125rem}@media (max-width: 768px){.pagination{flex-wrap:wrap;justify-content:center;gap:var(--spacing-xs);padding:var(--spacing-sm)}.items-per-page{margin-right:0;margin-bottom:var(--spacing-sm);width:100%;text-align:center}.items-per-page select{width:auto;min-width:120px}}@media (max-width: 480px){.pagination{padding:var(--spacing-xs)}.page-button{min-width:32px;height:32px;font-size:var(--font-size-sm)}.page-button i{font-size:.875rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: PshPaginationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'psh-pagination', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav \r\n  class=\"pagination\"\r\n  [class.small]=\"size() === 'small'\"\r\n  [class.large]=\"size() === 'large'\"\r\n  [class.outline]=\"variant() === 'outline'\"\r\n  role=\"navigation\"\r\n  [attr.aria-label]=\"'Pagination navigation'\"\r\n  [attr.data-state]=\"state()\"\r\n>\r\n  @if (showItemsPerPage()) {\r\n    <div class=\"items-per-page\">\r\n      <select\r\n        [value]=\"itemsPerPage()\"\r\n        (change)=\"onItemsPerPageChange($event)\"\r\n        [attr.aria-label]=\"itemsPerPageLabel()\"\r\n      >\r\n        @for (option of itemsPerPageOptions(); track option) {\r\n          <option [value]=\"option\">\r\n            {{ option }} {{ itemsLabel() }}\r\n          </option>\r\n        }\r\n      </select>\r\n    </div>\r\n  }\r\n\r\n  @if (showFirstLast()) {\r\n    <button\r\n      class=\"page-button\"\r\n      [class.disabled]=\"currentPage() === 1\"\r\n      (click)=\"goToPage(1)\"\r\n      [attr.aria-label]=\"firstLabel()\"\r\n      [disabled]=\"currentPage() === 1\"\r\n    >\r\n      <i class=\"ph ph-caret-double-left\" aria-hidden=\"true\"></i>\r\n    </button>\r\n  }\r\n\r\n  @if (showPrevNext()) {\r\n    <button\r\n      class=\"page-button\"\r\n      [class.disabled]=\"currentPage() === 1\"\r\n      (click)=\"goToPage(currentPage() - 1)\"\r\n      [attr.aria-label]=\"previousLabel()\"\r\n      [disabled]=\"currentPage() === 1\"\r\n    >\r\n      <i class=\"ph ph-caret-left\" aria-hidden=\"true\"></i>\r\n    </button>\r\n  }\r\n\r\n  @for (page of pages(); track page) {\r\n    <button\r\n      class=\"page-button\"\r\n      [class.active]=\"page === currentPage()\"\r\n      (click)=\"goToPage(page)\"\r\n      [attr.aria-current]=\"page === currentPage() ? 'page' : null\"\r\n      [attr.aria-label]=\"pageLabel() + ' ' + page\"\r\n    >\r\n      {{ page }}\r\n    </button>\r\n  }\r\n\r\n  @if (showPrevNext()) {\r\n    <button\r\n      class=\"page-button\"\r\n      [class.disabled]=\"currentPage() === totalPages()\"\r\n      (click)=\"goToPage(currentPage() + 1)\"\r\n      [attr.aria-label]=\"nextLabel()\"\r\n      [disabled]=\"currentPage() === totalPages()\"\r\n    >\r\n      <i class=\"ph ph-caret-right\" aria-hidden=\"true\"></i>\r\n    </button>\r\n  }\r\n\r\n  @if (showFirstLast()) {\r\n    <button\r\n      class=\"page-button\"\r\n      [class.disabled]=\"currentPage() === totalPages()\"\r\n      (click)=\"goToPage(totalPages())\"\r\n      [attr.aria-label]=\"lastLabel()\"\r\n      [disabled]=\"currentPage() === totalPages()\"\r\n    >\r\n      <i class=\"ph ph-caret-double-right\" aria-hidden=\"true\"></i>\r\n    </button>\r\n  }\r\n</nav>", styles: [".pagination{display:flex;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-sm);border-radius:var(--border-radius);background:var(--surface-card)}.pagination.outline{background:transparent;border:1px solid var(--surface-border)}.items-per-page{margin-right:var(--spacing-md)}.items-per-page select{padding:var(--spacing-xs) var(--spacing-sm);border:1px solid var(--surface-border);border-radius:var(--border-radius);background:var(--surface-card);color:var(--text-color);font-family:inherit;font-size:var(--font-size-base);cursor:pointer;transition:all .2s ease}.items-per-page select:hover{border-color:var(--primary-color)}.items-per-page select:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 2px rgba(var(--primary-color-rgb),.2)}.small .items-per-page select{padding:calc(var(--spacing-xs) * .75) var(--spacing-sm);font-size:var(--font-size-sm)}.large .items-per-page select{padding:var(--spacing-sm) var(--spacing-md);font-size:var(--font-size-lg)}.page-button{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:36px;padding:var(--spacing-xs);border:none;border-radius:var(--border-radius);background:var(--surface-ground);color:var(--text-color);font-family:inherit;font-size:var(--font-size-base);cursor:pointer;transition:all .2s ease}.pagination.outline .page-button{background:transparent;border:1px solid var(--surface-border)}.pagination.outline .page-button:hover:not(.disabled):not(.active){background:var(--surface-hover);border-color:var(--primary-color)}.pagination.outline .page-button.active{background:transparent;border-color:var(--primary-color);color:var(--primary-color)}.page-button:hover:not(.disabled):not(.active){background:var(--surface-hover)}.page-button.active{background:var(--primary-color);color:var(--primary-color-text)}.page-button.disabled{opacity:.6;cursor:not-allowed}.page-button i{font-size:1rem}.pagination.outline .page-button{background:transparent}.pagination.outline .page-button.active{background:var(--primary-color);color:var(--primary-color-text);border-color:var(--primary-color)}.pagination.small .page-button{min-width:32px;height:32px;font-size:var(--font-size-sm)}.pagination.small .page-button i{font-size:.875rem}.pagination.large .page-button{min-width:44px;height:44px;font-size:var(--font-size-lg)}.pagination.large .page-button i{font-size:1.125rem}@media (max-width: 768px){.pagination{flex-wrap:wrap;justify-content:center;gap:var(--spacing-xs);padding:var(--spacing-sm)}.items-per-page{margin-right:0;margin-bottom:var(--spacing-sm);width:100%;text-align:center}.items-per-page select{width:auto;min-width:120px}}@media (max-width: 480px){.pagination{padding:var(--spacing-xs)}.page-button{min-width:32px;height:32px;font-size:var(--font-size-sm)}.page-button i{font-size:.875rem}}\n"] }]
+        }] });
+
+const PROGRESSBAR_CONFIG = new InjectionToken('PROGRESSBAR_CONFIG', {
+    factory: () => ({
+        value: 0,
+        max: 100,
+        variant: 'primary',
+        size: 'medium',
+        showLabel: true,
+        indeterminate: false,
+        striped: false,
+        animated: false
+    })
+});
+class PshProgressbarComponent {
+    constructor() {
+        this.config = inject(PROGRESSBAR_CONFIG);
+        // Model inputs with defaults from config
+        this.value = model(this.config.value ?? 0);
+        this.max = model(this.config.max ?? 100);
+        this.variant = model(this.config.variant ?? 'primary');
+        this.size = model(this.config.size ?? 'medium');
+        this.showLabel = model(this.config.showLabel ?? true);
+        this.indeterminate = model(this.config.indeterminate ?? false);
+        this.striped = model(this.config.striped ?? false);
+        this.animated = model(this.config.animated ?? false);
+        // Regular inputs
+        this.label = input('Loading...');
+        // Computed values
+        this.percentage = computed(() => {
+            return Math.min(100, Math.max(0, (this.value() / this.max()) * 100));
+        });
+        this.computedAriaValueText = computed(() => {
+            if (this.indeterminate()) {
+                return this.label();
+            }
+            return `${this.percentage()}%`;
+        });
+        this.state = computed(() => this.getState());
+    }
+    getState() {
+        if (this.indeterminate())
+            return 'indeterminate';
+        if (this.animated())
+            return 'animated';
+        if (this.striped())
+            return 'striped';
+        return 'default';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: PshProgressbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: PshProgressbarComponent, isStandalone: true, selector: "psh-progressbar", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", 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 }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: true, isRequired: false, transformFunction: null }, animated: { classPropertyName: "animated", publicName: "animated", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", max: "maxChange", variant: "variantChange", size: "sizeChange", showLabel: "showLabelChange", indeterminate: "indeterminateChange", striped: "stripedChange", animated: "animatedChange" }, ngImport: i0, template: "<div \r\n  class=\"progressbar-container\"\r\n  [class.small]=\"size() === 'small'\"\r\n  [class.large]=\"size() === 'large'\"\r\n  [attr.data-state]=\"state()\"\r\n>\r\n  @if (showLabel() && !indeterminate()) {\r\n    <span class=\"progress-label\">{{ percentage() }}%</span>\r\n  }\r\n  <div \r\n    class=\"progressbar\"\r\n    [class.striped]=\"striped()\"\r\n    [class.animated]=\"animated()\"\r\n    [class.indeterminate]=\"indeterminate()\"\r\n    role=\"progressbar\"\r\n    [attr.aria-valuenow]=\"indeterminate() ? null : value()\"\r\n    [attr.aria-valuemin]=\"0\"\r\n    [attr.aria-valuemax]=\"max()\"\r\n    [attr.aria-valuetext]=\"computedAriaValueText()\"\r\n  >\r\n    <div \r\n      class=\"progress-track\"\r\n      [class]=\"variant()\"\r\n      [style.width.%]=\"indeterminate() ? 100 : percentage()\"\r\n    ></div>\r\n  </div>\r\n</div>", styles: [".progressbar-container{display:flex;flex-direction:column;gap:var(--spacing-xs)}.progressbar{position:relative;width:100%;height:8px;background:var(--surface-ground);border-radius:var(--border-radius);overflow:hidden}.progress-track{height:100%;border-radius:var(--border-radius);transition:width .3s ease}.progress-track.primary{background:var(--primary-color)}.progress-track.secondary{background:var(--secondary-color)}.progress-track.success{background:var(--success-color)}.progress-track.warning{background:var(--warning-color)}.progress-track.danger{background:var(--danger-color)}.progressbar-container.small .progressbar{height:4px}.progressbar-container.large .progressbar{height:12px}.progress-label{display:block;text-align:right;font-size:var(--font-size-sm);color:var(--text-color);font-weight:500}.progressbar-container.small .progress-label{font-size:var(--font-size-xs)}.progressbar-container.large .progress-label{font-size:var(--font-size-base)}.progressbar.striped .progress-track{background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-size:1rem 1rem}.progressbar.animated .progress-track{animation:progress-animation 1s linear infinite}.progressbar.indeterminate .progress-track{width:50%!important;animation:indeterminate 1.5s ease-in-out infinite}@keyframes progress-animation{0%{background-position:1rem 0}to{background-position:0 0}}@keyframes indeterminate{0%{transform:translate(-100%)}to{transform:translate(200%)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: PshProgressbarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'psh-progressbar', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div \r\n  class=\"progressbar-container\"\r\n  [class.small]=\"size() === 'small'\"\r\n  [class.large]=\"size() === 'large'\"\r\n  [attr.data-state]=\"state()\"\r\n>\r\n  @if (showLabel() && !indeterminate()) {\r\n    <span class=\"progress-label\">{{ percentage() }}%</span>\r\n  }\r\n  <div \r\n    class=\"progressbar\"\r\n    [class.striped]=\"striped()\"\r\n    [class.animated]=\"animated()\"\r\n    [class.indeterminate]=\"indeterminate()\"\r\n    role=\"progressbar\"\r\n    [attr.aria-valuenow]=\"indeterminate() ? null : value()\"\r\n    [attr.aria-valuemin]=\"0\"\r\n    [attr.aria-valuemax]=\"max()\"\r\n    [attr.aria-valuetext]=\"computedAriaValueText()\"\r\n  >\r\n    <div \r\n      class=\"progress-track\"\r\n      [class]=\"variant()\"\r\n      [style.width.%]=\"indeterminate() ? 100 : percentage()\"\r\n    ></div>\r\n  </div>\r\n</div>", styles: [".progressbar-container{display:flex;flex-direction:column;gap:var(--spacing-xs)}.progressbar{position:relative;width:100%;height:8px;background:var(--surface-ground);border-radius:var(--border-radius);overflow:hidden}.progress-track{height:100%;border-radius:var(--border-radius);transition:width .3s ease}.progress-track.primary{background:var(--primary-color)}.progress-track.secondary{background:var(--secondary-color)}.progress-track.success{background:var(--success-color)}.progress-track.warning{background:var(--warning-color)}.progress-track.danger{background:var(--danger-color)}.progressbar-container.small .progressbar{height:4px}.progressbar-container.large .progressbar{height:12px}.progress-label{display:block;text-align:right;font-size:var(--font-size-sm);color:var(--text-color);font-weight:500}.progressbar-container.small .progress-label{font-size:var(--font-size-xs)}.progressbar-container.large .progress-label{font-size:var(--font-size-base)}.progressbar.striped .progress-track{background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-size:1rem 1rem}.progressbar.animated .progress-track{animation:progress-animation 1s linear infinite}.progressbar.indeterminate .progress-track{width:50%!important;animation:indeterminate 1.5s ease-in-out infinite}@keyframes progress-animation{0%{background-position:1rem 0}to{background-position:0 0}}@keyframes indeterminate{0%{transform:translate(-100%)}to{transform:translate(200%)}}\n"] }]
+        }] });
+
+const RADIO_CONFIG = new InjectionToken('RADIO_CONFIG', {
+    factory: () => ({
+        checked: false,
+        disabled: false,
+        required: false,
+        size: 'medium',
+        labelPosition: 'right'
+    })
+});
+const RADIO_STYLES = new InjectionToken('RADIO_STYLES', {
+    factory: () => []
+});
+class PshRadioComponent {
+    constructor() {
+        this.config = inject(RADIO_CONFIG);
+        this.elementRef = inject(ElementRef);
+        this.styles = inject(RADIO_STYLES, { optional: true }) ?? [];
+        // Model inputs with defaults from config
+        this.checked = model(this.config.checked ?? false);
+        this.disabled = model(this.config.disabled ?? false);
+        this.required = model(this.config.required ?? false);
+        this.size = model(this.config.size ?? 'medium');
+        this.labelPosition = model(this.config.labelPosition ?? 'right');
+        // Regular inputs
+        this.label = input('');
+        this.error = input('');
+        this.success = input('');
+        this.name = input('');
+        this.value = input();
+        // Outputs
+        this.valueChange = output();
+        // Computed values
+        this.customStyles = computed(() => Object.assign({}, ...this.styles));
+        this.state = computed(() => this.getState());
+    }
+    getState() {
+        if (this.disabled())
+            return 'disabled';
+        if (this.error())
+            return 'error';
+        if (this.success())
+            return 'success';
+        return this.checked() ? 'checked' : 'unchecked';
+    }
+    hasContent() {
+        const content = this.elementRef.nativeElement
+            .querySelector('.radio-text')
+            ?.textContent?.trim();
+        return !!content || !!this.label();
+    }
+    handleChange() {
+        if (!this.disabled()) {
+            this.checked.set(true);
+            this.valueChange.emit(this.value());
+        }
+    }
+    /**
+     * Génère un identifiant unique pour les messages
+     */
+    generateMessageId(type, id) {
+        return `${type}-message-${id}`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: PshRadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: PshRadioComponent, isStandalone: true, selector: "psh-radio", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", 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 }, 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 }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", disabled: "disabledChange", required: "requiredChange", size: "sizeChange", labelPosition: "labelPositionChange", valueChange: "valueChange" }, ngImport: i0, template: "<div \r\n  class=\"radio-container\"\r\n  [attr.aria-describedby]=\"error() ? 'error-message' : success() ? 'success-message' : null\"\r\n  [class.disabled]=\"disabled()\"\r\n  [class.error]=\"!!error()\"\r\n  [class.success]=\"!!success()\"\r\n  [class.small]=\"size() === 'small'\"\r\n  [class.large]=\"size() === 'large'\"\r\n  [attr.data-state]=\"state()\"\r\n>\r\n  <label class=\"radio-label\" [class]=\"labelPosition() === 'left' ? 'label-left' : 'label-right'\">\r\n    <input\r\n      type=\"radio\"\r\n      class=\"radio-input\"\r\n      [checked]=\"checked()\"\r\n      [disabled]=\"disabled()\"\r\n      [required]=\"required()\"\r\n      [name]=\"name()\"\r\n      [value]=\"value()\"\r\n      [attr.aria-required]=\"required()\"\r\n      [attr.aria-invalid]=\"!!error()\"\r\n      [attr.aria-checked]=\"checked()\"\r\n      (change)=\"handleChange()\"\r\n    />\r\n    <span \r\n      class=\"radio-control\"\r\n      [class.error]=\"!!error()\"\r\n      [class.success]=\"!!success()\"\r\n    >\r\n      <span class=\"radio-dot\"></span>\r\n    </span>\r\n    <span class=\"radio-text\">\r\n      @if (label()) {\r\n        {{ label() }}\r\n      } @else {\r\n        <ng-content>Radio</ng-content>\r\n      }\r\n    </span>\r\n  </label>\r\n\r\n  @if (error()) {\r\n    <div id=\"error-message\" class=\"radio-error\" role=\"alert\">\r\n      {{ error() }}\r\n    </div>\r\n  }\r\n\r\n  @if (success()) {\r\n    <div id=\"success-message\" class=\"radio-success\" role=\"status\">\r\n      {{ success() }}\r\n    </div>\r\n  }\r\n</div>", styles: [".radio-container{display:inline-flex;flex-direction:column;gap:var(--spacing-xs)}.radio-label{display:inline-flex;align-items:center;gap:var(--spacing-sm);cursor:pointer;-webkit-user-select:none;user-select:none;color:var(--text-color)}.radio-label.label-left{flex-direction:row-reverse;justify-content:space-between}.radio-input{position:absolute;opacity:0;width:0;height:0}.radio-control{display:flex;align-items:center;justify-content:center;width:18px;height:18px;min-width:18px;min-height:18px;border:2px solid var(--surface-border);border-radius:50%;background:var(--surface-card);transition:all .2s ease;flex-shrink:0}.radio-dot{width:8px;height:8px;border-radius:50%;background:var(--primary-color-text);opacity:0;transform:scale(.8);transition:all .2s ease}.radio-input:checked+.radio-control{background:var(--primary-color);border-color:var(--primary-color)}.radio-input:checked+.radio-control .radio-dot{opacity:1;transform:scale(1)}.radio-input:focus+.radio-control{box-shadow:0 0 0 2px rgba(var(--primary-color-rgb),.2)}.radio-container.disabled .radio-label{opacity:.6;cursor:not-allowed}.radio-container.error .radio-control{border-color:var(--danger-color)}.radio-input:checked+.radio-control.error{background:var(--danger-color);border-color:var(--danger-color)}.radio-container.success .radio-control{border-color:var(--success-color)}.radio-input:checked+.radio-control.success{background:var(--success-color);border-color:var(--success-color)}.radio-error{font-size:var(--font-size-sm);color:var(--danger-color)}.radio-success{font-size:var(--font-size-sm);color:var(--success-color)}.radio-container.small .radio-control{width:16px;height:16px;min-width:16px;min-height:16px}.radio-container.small .radio-dot{width:6px;height:6px}.radio-container.small .radio-text{font-size:var(--font-size-sm)}.radio-container.large .radio-control{width:22px;height:22px;min-width:22px;min-height:22px}.radio-container.large .radio-dot{width:10px;height:10px}.radio-container.large .radio-text{font-size:var(--font-size-lg)}.radio-text{color:var(--text-color)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: PshRadioComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'psh-radio', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div \r\n  class=\"radio-container\"\r\n  [attr.aria-describedby]=\"error() ? 'error-message' : success() ? 'success-message' : null\"\r\n  [class.disabled]=\"disabled()\"\r\n  [class.error]=\"!!error()\"\r\n  [class.success]=\"!!success()\"\r\n  [class.small]=\"size() === 'small'\"\r\n  [class.large]=\"size() === 'large'\"\r\n  [attr.data-state]=\"state()\"\r\n>\r\n  <label class=\"radio-label\" [class]=\"labelPosition() === 'left' ? 'label-left' : 'label-right'\">\r\n    <input\r\n      type=\"radio\"\r\n      class=\"radio-input\"\r\n      [checked]=\"checked()\"\r\n      [disabled]=\"disabled()\"\r\n      [required]=\"required()\"\r\n      [name]=\"name()\"\r\n      [value]=\"value()\"\r\n      [attr.aria-required]=\"required()\"\r\n      [attr.aria-invalid]=\"!!error()\"\r\n      [attr.aria-checked]=\"checked()\"\r\n      (change)=\"handleChange()\"\r\n    />\r\n    <span \r\n      class=\"radio-control\"\r\n      [class.error]=\"!!error()\"\r\n      [class.success]=\"!!success()\"\r\n    >\r\n      <span class=\"radio-dot\"></span>\r\n    </span>\r\n    <span class=\"radio-text\">\r\n      @if (label()) {\r\n        {{ label() }}\r\n      } @else {\r\n        <ng-content>Radio</ng-content>\r\n      }\r\n    </span>\r\n  </label>\r\n\r\n  @if (error()) {\r\n    <div id=\"error-message\" class=\"radio-error\" role=\"alert\">\r\n      {{ error() }}\r\n    </div>\r\n  }\r\n\r\n  @if (success()) {\r\n    <div id=\"success-message\" class=\"radio-success\" role=\"status\">\r\n      {{ success() }}\r\n    </div>\r\n  }\r\n</div>", styles: [".radio-container{display:inline-flex;flex-direction:column;gap:var(--spacing-xs)}.radio-label{display:inline-flex;align-items:center;gap:var(--spacing-sm);cursor:pointer;-webkit-user-select:none;user-select:none;color:var(--text-color)}.radio-label.label-left{flex-direction:row-reverse;justify-content:space-between}.radio-input{position:absolute;opacity:0;width:0;height:0}.radio-control{display:flex;align-items:center;justify-content:center;width:18px;height:18px;min-width:18px;min-height:18px;border:2px solid var(--surface-border);border-radius:50%;background:var(--surface-card);transition:all .2s ease;flex-shrink:0}.radio-dot{width:8px;height:8px;border-radius:50%;background:var(--primary-color-text);opacity:0;transform:scale(.8);transition:all .2s ease}.radio-input:checked+.radio-control{background:var(--primary-color);border-color:var(--primary-color)}.radio-input:checked+.radio-control .radio-dot{opacity:1;transform:scale(1)}.radio-input:focus+.radio-control{box-shadow:0 0 0 2px rgba(var(--primary-color-rgb),.2)}.radio-container.disabled .radio-label{opacity:.6;cursor:not-allowed}.radio-container.error .radio-control{border-color:var(--danger-color)}.radio-input:checked+.radio-control.error{background:var(--danger-color);border-color:var(--danger-color)}.radio-container.success .radio-control{border-color:var(--success-color)}.radio-input:checked+.radio-control.success{background:var(--success-color);border-color:var(--success-color)}.radio-error{font-size:var(--font-size-sm);color:var(--danger-color)}.radio-success{font-size:var(--font-size-sm);color:var(--success-color)}.radio-container.small .radio-control{width:16px;height:16px;min-width:16px;min-height:16px}.radio-container.small .radio-dot{width:6px;height:6px}.radio-container.small .radio-text{font-size:var(--font-size-sm)}.radio-container.large .radio-control{width:22px;height:22px;min-width:22px;min-height:22px}.radio-container.large .radio-dot{width:10px;height:10px}.radio-container.large .radio-text{font-size:var(--font-size-lg)}.radio-text{color:var(--text-color)}\n"] }]
+        }] });
+
+class PshSelectComponent {
+    getState() {
+        if (this.disabled())
+            return 'disabled';
+        if (this.loading())
+            return 'loading';
+        if (this.error())
+            return 'error';
+        if (this.success())
+            return 'success';
+        if (this.isOpen())
+            return 'open';
+        return 'closed';
+    }
+    constructor() {
+        this.elementRef = inject(ElementRef);
+        this.cdr = inject(ChangeDetectorRef);
+        this.clickOutsideHandler = null;
+        // Unique ID for the select
+        this.selectId = `select-${Math.random().toString(36).substring(2, 11)}`;
+        // Model inputs
+        this.value = model(null);
+        this.disabled = model(false);
+        this.required = model('');
+        this.size = model('medium');
+        this.searchable = model(false);
+        this.multiple = model(false);
+        this.clearable = model(false);
+        this.loading = model(false);
+        this.fullWidth = model(false);
+        this.virtualScroll = model(false);
+        this.showLabel = input(true); // Moved back to input as it doesn't need two-way binding
+        // Regular inputs
+        this.options = input([]);
+        this.label = input(''); // Added dedicated label property
+        this.ariaLabel = input(null); // Added dedicated ariaLabel property
+        this.placeholder = input('Sélectionner une option');
+        this.multiplePlaceholder = input('Sélectionner des options');
+        this.error = input('');
+        this.success = input('');
+        this.hint = input('');
+        this.maxSelections = input(undefined);
+        this.minSelections = input(undefined);
+        this.compareWith = input((a, b) => a === b);
+        this.searchConfig = input({
+            debounceTime: 300,
+            placeholder: 'Rechercher...',
+            minLength: 1
+        });
+        this.virtualScrollConfig = input({
+            itemSize: 40,
+            buffer: 4
+        });
+        // State
+        this.isOpenSignal = signal(false);
+        this.searchTermSignal = signal('');
+        this.selectedLabelSignal = signal('');
+        this.focusedOptionIndex = signal(-1);
+        this.hasLabelContentSignal = signal(false);
+        this.initializedSignal = signal(false);
+        // Outputs
+        this.valueChange = output();
+        this.opened = output();
+        this.closed = output();
+        this.scrollEnd = output();
+        this.loadOptions = output();
+        this.searched = output();
+        // Computed values
+        this.isOpen = computed(() => this.isOpenSignal());
+        this.searchTerm = computed(() => this.searchTermSignal());
+        this.hasLabelContent = computed(() => this.hasLabelContentSignal());
+        // Computed aria-label pour l'accessibilité
+        this.computedAriaLabel = computed(() => {
+            return this.ariaLabel() || this.label() || this.placeholder();
+        });
+        this.state = computed(() => this.getState());
+        this.selectedLabel = computed(() => {
+            if (!this.initializedSignal() || !this.hasValue()) {
+                return this.multiple() ? this.multiplePlaceholder() : this.placeholder();
+            }
+            return this.selectedLabelSignal() || (this.multiple() ? this.multiplePlaceholder() : this.placeholder());
+        });
+        this.filteredOptions = computed(() => {
+            const term = this.searchTermSignal().toLowerCase();
+            const opts = this.options();
+            if (!term)
+                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;
+                }
+                return opt.label.toLowerCase().includes(term) ||
+                    opt.description?.toLowerCase().includes(term)
+                    ? opt
+                    : null;
+            }).filter((opt) => opt !== null);
+        });
+        // ControlValueAccessor implementation
+        this.onChange = (_) => { };
+        this.onTouched = () => { };
+        this.setupClickOutsideListener();
+    }
+    ngAfterContentInit() {
+        Promise.resolve().then(() => {
+            const hasLabel = !!this.elementRef.nativeElement.querySelector('[select-label]');
+            this.hasLabelContentSignal.set(hasLabel);
+            this.initializedSignal.set(true);
+            this.cdr.markForCheck();
+        });
+    }
+    setupClickOutsideListener() {
+        this.clickOutsideHandler = (event) => {
+            if (this.isOpen()) {
+                const target = event.target;
+                if (!this.elementRef.nativeElement.contains(target)) {
+                    this.close();
+                }
+            }
+        };
+        document.addEventListener('click', this.clickOutsideHandler);
+    }
+    // Keyboard navigation
+    handleKeyDown(event) {
+        if (this.disabled())
+            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;
+        }
+    }
+    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);
+        this.scrollOptionIntoView(nextIndex);
+    }
+    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);
+        this.scrollOptionIntoView(previousIndex);
+    }
+    scrollOptionIntoView(index) {
+        requestAnimationFrame(() => {
+            const option = this.elementRef.nativeElement.querySelector(`.select-option:nth-child(${index + 1})`);
+            if (option) {
+                option.scrollIntoView({ block: 'nearest' });
+            }
+        });
+    }
+    writeValue(value) {
+        this.initializedSignal.set(true);
+        this.value.set(value);
+        this.updateSelectedLabel();
+        this.cdr.markForCheck();
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled.set(isDisabled);
+    }
+    // Helper method to check if an option is a group
+    isOptionGroup(option) {
+        return 'options' in option;
+    }
+    // Get unique key for tracking
+    getOptionKey(option) {
+        return this.isOptionGroup(option) ? `group-${option.label}` : `option-${String(option.value)}`;
+    }
+    // Check if there is a selected value
+    hasValue() {
+        const currentValue = this.value();
+        if (this.multiple()) {
+            return Array.isArray(currentValue) && currentValue.length > 0;
+        }
+        return currentValue !== null && currentValue !== undefined;
+    }
+    // Focus methods
+    focusSelect() {
+        const trigger = this.elementRef.nativeElement.querySelector('.select-trigger');
+        if (trigger) {
+            trigger.focus();
+        }
+    }
+    // Selection methods
+    select(option) {
+        if (!this.disabled() && !option.disabled) {
+            if (this.multiple()) {
+                const currentValue = this.value();
+                const values = Array.isArray(currentValue) ? [...currentValue] : [];
+                const index = values.findIndex(v => this.compareWith()(v, option.value));
+                if (index === -1) {
+                    const maxSelections = this.maxSelections();
+                    if (!maxSelections || values.length < maxSelections) {
+                        values.push(option.value);
+                    }
+                }
+                else {
+                    const minSelections = this.minSelections();
+                    if (!minSelections || values.length > minSelections) {
+                        values.splice(index, 1);
+                    }
+                }
+                this.value.set(values);
+                this.onChange(values);
+            }
+            else {
+                this.value.set(option.value);
+                this.onChange(option.value);
+                this.close();
+            }
+            this.valueChange.emit(this.value());
+            this.updateSelectedLabel();
+            this.onTouched();
+        }
+    }
+    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);
+    }
+    // UI methods
+    toggle() {
+        if (!this.disabled()) {
+            event?.stopPropagation();
+            this.isOpenSignal.update(v => !v);
+            if (this.isOpenSignal()) {
+                this.opened.emit();
+            }
+            else {
+                this.closed.emit();
+            }
+        }
+    }
+    close() {
+        if (this.isOpenSignal()) {
+            this.isOpenSignal.set(false);
+            this.focusedOptionIndex.set(-1);
+            this.searchTermSignal.set('');
+            this.closed.emit();
+        }
+    }
+    clear(event) {
+        event.stopPropagation();
+        if (!this.disabled()) {
+            const newValue = this.multiple() ? [] : null;
+            this.value.set(newValue);
+            this.onChange(newValue);
+            this.valueChange.emit(newValue);
+            this.updateSelectedLabel();
+            this.onTouched();
+        }
+    }
+    onSearch(event) {
+        const term = event.target.value;
+        this.searchTermSignal.set(term);
+        if (term.length >= (this.searchConfig().minLength ?? 1)) {
+            this.searched.emit(term);
+        }
+    }
+    onScroll(event) {
+        const element = event.target;
+        if (element.scrollHeight - element.scrollTop === element.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('');
+            }
+        }
+        this.cdr.markForCheck();
+    }
+    flattenOptions(options) {
+        return options.reduce((acc, opt) => {
+            if (this.isOptionGroup(opt)) {
+                return [...acc, ...opt.options];
+            }
+            return [...acc, opt];
+        }, []);
+    }
+    ngOnDestroy() {
+        if (this.clickOutsideHandler) {
+            document.removeEventListener('click', this.clickOutsideHandler);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: PshSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", 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 }, required: { classPropertyName: "required", publicName: "required", 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 }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", 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 }, virtualScrollConfig: { classPropertyName: "virtualScrollConfig", publicName: "virtualScrollConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", disabled: "disabledChange", required: "requiredChange", size: "sizeChange", searchable: "searchableChange", multiple: "multipleChange", clearable: "clearableChange", loading: "loadingChange", fullWidth: "fullWidthChange", virtualScroll: "virtualScrollChange", valueChange: "valueChange", opened: "opened", closed: "closed", scrollEnd: "scrollEnd", loadOptions: "loadOptions", searched: "searched" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: PshSelectComponent,
+                multi: true
+            }
+        ], ngImport: i0, template: "<div \n  class=\"select-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>\n  <!-- Label slot -->\n  @if (showLabel()) {\n    <label class=\"select-label\" [for]=\"selectId\" (click)=\"focusSelect()\" [class.required]=\"!!required()\">\n      <ng-content select=\"[select-label]\"></ng-content>\n      @if (!hasLabelContent()) {\n        {{ label() }}\n      }\n    </label>\n  }\n\n  <div \n    class=\"select-trigger\"\n    [id]=\"selectId\"\n    role=\"combobox\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-disabled]=\"disabled()\"\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.tabindex]=\"disabled() ? -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()) {\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      <i \n        class=\"ph ph-caret-down select-arrow\"\n        [class.open]=\"isOpen()\"\n        aria-hidden=\"true\"\n      ></i>\n    </div>\n  </div>\n\n  @if (isOpen()) {\n    <div \n      class=\"select-dropdown\"\n      role=\"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.disabled]=\"option.disabled || groupOption.disabled\"\n                    [attr.aria-selected]=\"isSelected(groupOption)\"\n                    [attr.aria-disabled]=\"option.disabled || groupOption.disabled\"\n                    [attr.id]=\"selectId + '-option-' + groupOption.value\"\n                    [attr.tabindex]=\"option.disabled || groupOption.disabled ? -1 : 0\"\n                    (click)=\"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.disabled]=\"option.disabled\"\n                [attr.aria-selected]=\"isSelected(option)\"\n                [attr.aria-disabled]=\"option.disabled\"\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\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: [".select-container{position:relative;width:100%;max-width:300px}.select-container.full-width{max-width:none}.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%;height:40px;padding:0 var(--spacing-md);background:var(--surface-card);border:1px solid var(--surface-border);border-radius:var(--border-radius);cursor:pointer;transition:all .2s ease;outline:none}.select-trigger:hover:not(.disabled){border-color:var(--primary-color)}.select-trigger:focus-visible{border-color:var(--primary-color);box-shadow:0 0 0 2px 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 .2s ease;font-size:1rem;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:20px;height:20px;padding:0;background:transparent;border:none;border-radius:50%;color:var(--text-color-secondary);cursor:pointer;transition:all .2s ease;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:1px solid var(--surface-border);border-radius:var(--border-radius);box-shadow:var(--shadow-lg);z-index:1000;animation:fadeIn .2s ease}.select-search{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm);border-bottom:1px solid var(--surface-border)}.select-search input{width:100%;padding:var(--spacing-xs) var(--spacing-sm);border:1px 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:200px;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 .2s ease}.select-option:hover:not(.disabled){background:var(--surface-hover)}.select-option.selected{background:rgba(var(--primary-color-rgb),.1);color:var(--primary-color)}.select-option.disabled{opacity:.6;cursor:not-allowed}.select-option i{font-size:1.2rem;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:18px;height:18px;border:2px solid var(--surface-border);border-radius:var(--border-radius);transition:all .2s ease}.selected .select-checkbox{background:var(--primary-color);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:24px;height:24px;border:2px solid var(--surface-border);border-top-color:var(--primary-color);border-radius:50%;animation:spin .8s linear infinite;margin:0 auto}.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}.select-container.disabled .select-trigger{background:var(--surface-ground);cursor:not-allowed;opacity:.6}.select-container.error .select-trigger{border-color:var(--danger-color)}.select-container.success .select-trigger{border-color:var(--success-color)}.select-container.small .select-trigger{height:32px;font-size:var(--font-size-sm)}.select-container.large .select-trigger{height:48px;font-size:var(--font-size-lg)}@media (max-width: 576px){.select-container{max-width:none}}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: PshSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'psh-select', standalone: true, imports: [CommonModule, FormsModule], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: PshSelectComponent,
+                            multi: true
+                        }
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div \n  class=\"select-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>\n  <!-- Label slot -->\n  @if (showLabel()) {\n    <label class=\"select-label\" [for]=\"selectId\" (click)=\"focusSelect()\" [class.required]=\"!!required()\">\n      <ng-content select=\"[select-label]\"></ng-content>\n      @if (!hasLabelContent()) {\n        {{ label() }}\n      }\n    </label>\n  }\n\n  <div \n    class=\"select-trigger\"\n    [id]=\"selectId\"\n    role=\"combobox\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-disabled]=\"disabled()\"\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.tabindex]=\"disabled() ? -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()) {\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      <i \n        class=\"ph ph-caret-down select-arrow\"\n        [class.open]=\"isOpen()\"\n        aria-hidden=\"true\"\n      ></i>\n    </div>\n  </div>\n\n  @if (isOpen()) {\n    <div \n      class=\"select-dropdown\"\n      role=\"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.disabled]=\"option.disabled || groupOption.disabled\"\n                    [attr.aria-selected]=\"isSelected(groupOption)\"\n                    [attr.aria-disabled]=\"option.disabled || groupOption.disabled\"\n                    [attr.id]=\"selectId + '-option-' + groupOption.value\"\n                    [attr.tabindex]=\"option.disabled || groupOption.disabled ? -1 : 0\"\n                    (click)=\"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.disabled]=\"option.disabled\"\n                [attr.aria-selected]=\"isSelected(option)\"\n                [attr.aria-disabled]=\"option.disabled\"\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\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: [".select-container{position:relative;width:100%;max-width:300px}.select-container.full-width{max-width:none}.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%;height:40px;padding:0 var(--spacing-md);background:var(--surface-card);border:1px solid var(--surface-border);border-radius:var(--border-radius);cursor:pointer;transition:all .2s ease;outline:none}.select-trigger:hover:not(.disabled){border-color:var(--primary-color)}.select-trigger:focus-visible{border-color:var(--primary-color);box-shadow:0 0 0 2px 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 .2s ease;font-size:1rem;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:20px;height:20px;padding:0;background:transparent;border:none;border-radius:50%;color:var(--text-color-secondary);cursor:pointer;transition:all .2s ease;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:1px solid var(--surface-border);border-radius:var(--border-radius);box-shadow:var(--shadow-lg);z-index:1000;animation:fadeIn .2s ease}.select-search{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm);border-bottom:1px solid var(--surface-border)}.select-search input{width:100%;padding:var(--spacing-xs) var(--spacing-sm);border:1px 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:200px;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 .2s ease}.select-option:hover:not(.disabled){background:var(--surface-hover)}.select-option.selected{background:rgba(var(--primary-color-rgb),.1);color:var(--primary-color)}.select-option.disabled{opacity:.6;cursor:not-allowed}.select-option i{font-size:1.2rem;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:18px;height:18px;border:2px solid var(--surface-border);border-radius:var(--border-radius);transition:all .2s ease}.selected .select-checkbox{background:var(--primary-color);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:24px;height:24px;border:2px solid var(--surface-border);border-top-color:var(--primary-color);border-radius:50%;animation:spin .8s linear infinite;margin:0 auto}.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}.select-container.disabled .select-trigger{background:var(--surface-ground);cursor:not-allowed;opacity:.6}.select-container.error .select-trigger{border-color:var(--danger-color)}.select-container.success .select-trigger{border-color:var(--success-color)}.select-container.small .select-trigger{height:32px;font-size:var(--font-size-sm)}.select-container.large .select-trigger{height:48px;font-size:var(--font-size-lg)}@media (max-width: 576px){.select-container{max-width:none}}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes spin{to{transform:rotate(360deg)}}\n"] }]
+        }], ctorParameters: () => [] });
+
+const SIDEBAR_CONFIG = new InjectionToken('SIDEBAR_CONFIG', {
+    factory: () => ({
+        mode: 'fixed',
+        position: 'left',
+        width: '250px',
+        breakpoint: '768px'
+    })
+});
+class PshSidebarComponent {
+    getState() {
+        if (this.isMobile())
+            return 'mobile';
+        if (this.open())
+            return 'open';
+        return this.mode();
+    }
+    constructor() {
+        this.config = inject(SIDEBAR_CONFIG);
+        this.elementRef = inject(ElementRef);
+        this.isDestroyed = signal(false);
+        this.focusedElementBeforeOpen = null;
+        // Model inputs with defaults from config
+        this.open = model(false);
+        this.mode = model(this.config.mode ?? 'fixed');
+        this.position = model(this.config.position ?? 'left');
+        // Regular inputs
+        this.width = input(this.config.width ?? '250px');
+        this.breakpoint = input(this.config.breakpoint ?? '768px');
+        // Outputs
+        this.toggle = output();
+        // State
+        this.mobileSignal = signal(false);
+        this.overlayModeSignal = signal(false);
+        // Computed values
+        this.isMobile = computed(() => this.mobileSignal());
+        this.isOverlayMode = computed(() => this.overlayModeSignal());
+        this.effectiveMode = computed(() => this.isMobile() ? 'overlay' : this.mode());
+        this.state = computed(() => this.getState());
+        // Handle responsive behavior
+        effect(() => {
+            if (this.isDestroyed())
+                return;
+            const mediaQuery = window.matchMedia(`(max-width: ${this.breakpoint()})`);
+            const handleResize = (e) => {
+                this.mobileSignal.set(e.matches);
+                this.overlayModeSignal.set(e.matches || this.mode() === 'overlay');
+            };
+            // Initial check
+            handleResize(mediaQuery);
+            // Listen for changes
+            const listener = (e) => handleResize(e);
+            mediaQuery.addEventListener('change', listener);
+            return () => mediaQuery.removeEventListener('change', listener);
+        });
+        // Handle keyboard events
+        effect(() => {
+            if (this.isDestroyed())
+                return;
+            if (this.open()) {
+                const handleKeyDown = (event) => {
+                    if (event.key === 'Escape' && this.isOverlayMode()) {
+                        this.closeSidebar();
+                    }
+                    if (event.key === 'Tab') {
+                        this.trapFocus(event);
+                    }
+                };
+                document.addEventListener('keydown', handleKeyDown);
+                return () => document.removeEventListener('keydown', handleKeyDown);
+            }
+            return;
+        });
+        // Handle click outside
+        effect(() => {
+            if (this.isDestroyed())
+                return;
+            if (this.open() && this.isOverlayMode()) {
+                const handleClickOutside = (event) => {
+                    if (!this.elementRef.nativeElement.contains(event.target)) {
+                        this.closeSidebar();
+                    }
+                };
+                document.addEventListener('click', handleClickOutside);
+                return () => document.removeEventListener('click', handleClickOutside);
+            }
+            return;
+        });
+    }
+    toggleSidebar() {
+        if (this.isDestroyed())
+            return;
+        const newState = !this.open();
+        this.open.set(newState);
+        this.toggle.emit(newState);
+        if (newState) {
+            this.focusedElementBeforeOpen = document.activeElement;
+            requestAnimationFrame(() => {
+                const firstFocusable = this.elementRef.nativeElement.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+                if (firstFocusable) {
+                    firstFocusable.focus();
+                }
+            });
+        }
+        else {
+            if (this.focusedElementBeforeOpen) {
+                this.focusedElementBeforeOpen.focus();
+            }
+        }
+    }
+    closeSidebar() {
+        if (this.isDestroyed())
+            return;
+        if (this.open()) {
+            this.open.set(false);
+            this.toggle.emit(false);
+            if (this.focusedElementBeforeOpen) {
+                this.focusedElementBeforeOpen.focus();
+            }
+        }
+    }
+    trapFocus(event) {
+        const focusableElements = this.elementRef.nativeElement.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+        const firstFocusable = focusableElements[0];
+        const lastFocusable = focusableElements[focusableElements.length - 1];
+        if (event.shiftKey) {
+            if (document.activeElement === firstFocusable) {
+                event.preventDefault();
+                lastFocusable.focus();
+            }
+        }
+        else {
+            if (document.activeElement === lastFocusable) {
+                event.preventDefault();
+                firstFocusable.focus();
+            }
+        }
+    }
+    ngOnDestroy() {
+        this.isDestroyed.set(true);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: PshSidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: PshSidebarComponent, isStandalone: true, selector: "psh-sidebar", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, breakpoint: { classPropertyName: "breakpoint", publicName: "breakpoint", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", mode: "modeChange", position: "positionChange", toggle: "toggle" }, ngImport: i0, template: "<div \r\n  class=\"sidebar\"\r\n  [class.open]=\"open()\"\r\n  [class.fixed]=\"effectiveMode() === 'fixed'\"\r\n  [class.overlay]=\"effectiveMode() === 'overlay'\"\r\n  [class.collapsible]=\"effectiveMode() === 'collapsible'\"\r\n  [class.left]=\"position() === 'left'\"\r\n  [class.right]=\"position() === 'right'\"\r\n  [style.width]=\"width()\"\r\n  [style.--sidebar-width]=\"width()\"\r\n  role=\"complementary\"\r\n  [attr.aria-hidden]=\"!open()\"\r\n  [attr.aria-expanded]=\"open()\"\r\n  [attr.data-state]=\"state()\"\r\n>\r\n  <div class=\"sidebar-content\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n\r\n  @if (effectiveMode() === 'collapsible') {\r\n    <button\r\n      type=\"button\"\r\n      class=\"collapse-button\"\r\n      (click)=\"toggleSidebar()\"\r\n      [attr.aria-label]=\"open() ? 'R\u00E9duire le menu' : 'D\u00E9velopper le menu'\"\r\n    >\r\n      @if (position() === 'left') {\r\n        <i \r\n          class=\"ph\"\r\n          [class.ph-caret-right]=\"!open()\"\r\n          [class.ph-caret-left]=\"open()\"\r\n          aria-hidden=\"true\"\r\n        ></i>\r\n      } @else {\r\n        <i \r\n          class=\"ph\"\r\n          [class.ph-caret-left]=\"!open()\"\r\n          [class.ph-caret-right]=\"open()\"\r\n          aria-hidden=\"true\"\r\n        ></i>\r\n      }\r\n    </button>\r\n  }\r\n</div>\r\n\r\n@if (effectiveMode() === 'overlay' && open()) {\r\n  <div \r\n    class=\"sidebar-backdrop\"\r\n    role=\"presentation\"\r\n    (click)=\"closeSidebar()\"\r\n  ></div>\r\n}", styles: [":host{display:contents}.sidebar{position:fixed;top:0;height:100vh;background:var(--surface-card);display:flex;flex-direction:column;z-index:1000;transition:transform .3s cubic-bezier(.4,0,.2,1)}.sidebar.left{left:0;transform:translate(-100%)}.sidebar.right{right:0;transform:translate(100%)}.sidebar.fixed{position:relative;transform:none!important;height:100%;width:var(--sidebar-width);border:1px solid var(--surface-border)}.sidebar.fixed.left{border-right:1px solid var(--surface-border);border-left:none}.sidebar.fixed.right{border-left:1px solid var(--surface-border);border-right:none}.sidebar.overlay{box-shadow:var(--shadow-lg)}.sidebar.collapsible{position:relative;height:100%;width:var(--sidebar-width);transition:width .3s cubic-bezier(.4,0,.2,1)}.sidebar.collapsible.left{border-right:1px solid var(--surface-border)}.sidebar.collapsible.right{border-left:1px solid var(--surface-border)}.sidebar.collapsible:not(.open){width:64px}.sidebar.collapsible:not(.open) .sidebar-content{opacity:0}.sidebar.collapsible.left:not(.open) .sidebar-content{transform:translate(-10px)}.sidebar.collapsible.right:not(.open) .sidebar-content{transform:translate(10px)}.sidebar.open{transform:translate(0)}.sidebar-content{flex:1;overflow-y:auto;overflow-x:hidden;padding:var(--spacing-md);transition:all .3s cubic-bezier(.4,0,.2,1);min-width:var(--sidebar-width);opacity:1;transform:translate(0)}.collapse-button{position:absolute;top:50%;transform:translateY(-50%);width:24px;height:24px;background:var(--primary-color);color:var(--primary-color-text);border:none;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);z-index:2;box-shadow:var(--shadow-md)}.sidebar.left .collapse-button{right:-16px}.sidebar.right .collapse-button{left:-16px}.collapse-button:hover{transform:translateY(-50%) scale(1.15);background:var(--primary-color-light);box-shadow:var(--shadow-lg)}.collapse-button i{font-size:1rem;transition:transform .3s ease}.sidebar-backdrop{position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(var(--surface-900-rgb),.5);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:999;animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@media (max-width: 768px){.sidebar{width:min(var(--sidebar-width),100vw)!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: PshSidebarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'psh-sidebar', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div \r\n  class=\"sidebar\"\r\n  [class.open]=\"open()\"\r\n  [class.fixed]=\"effectiveMode() === 'fixed'\"\r\n  [class.overlay]=\"effectiveMode() === 'overlay'\"\r\n  [class.collapsible]=\"effectiveMode() === 'collapsible'\"\r\n  [class.left]=\"position() === 'left'\"\r\n  [class.right]=\"position() === 'right'\"\r\n  [style.width]=\"width()\"\r\n  [style.--sidebar-width]=\"width()\"\r\n  role=\"complementary\"\r\n  [attr.aria-hidden]=\"!open()\"\r\n  [attr.aria-expanded]=\"open()\"\r\n  [attr.data-state]=\"state()\"\r\n>\r\n  <div class=\"sidebar-content\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n\r\n  @if (effectiveMode() === 'collapsible') {\r\n    <button\r\n      type=\"button\"\r\n      class=\"collapse-button\"\r\n      (click)=\"toggleSidebar()\"\r\n      [attr.aria-label]=\"open() ? 'R\u00E9duire le menu' : 'D\u00E9velopper le menu'\"\r\n    >\r\n      @if (position() === 'left') {\r\n        <i \r\n          class=\"ph\"\r\n          [class.ph-caret-right]=\"!open()\"\r\n          [class.ph-caret-left]=\"open()\"\r\n          aria-hidden=\"true\"\r\n        ></i>\r\n      } @else {\r\n        <i \r\n          class=\"ph\"\r\n          [class.ph-caret-left]=\"!open()\"\r\n          [class.ph-caret-right]=\"open()\"\r\n          aria-hidden=\"true\"\r\n        ></i>\r\n      }\r\n    </button>\r\n  }\r\n</div>\r\n\r\n@if (effectiveMode() === 'overlay' && open()) {\r\n  <div \r\n    class=\"sidebar-backdrop\"\r\n    role=\"presentation\"\r\n    (click)=\"closeSidebar()\"\r\n  ></div>\r\n}", styles: [":host{display:contents}.sidebar{position:fixed;top:0;height:100vh;background:var(--surface-card);display:flex;flex-direction:column;z-index:1000;transition:transform .3s cubic-bezier(.4,0,.2,1)}.sidebar.left{left:0;transform:translate(-100%)}.sidebar.right{right:0;transform:translate(100%)}.sidebar.fixed{position:relative;transform:none!important;height:100%;width:var(--sidebar-width);border:1px solid var(--surface-border)}.sidebar.fixed.left{border-right:1px solid var(--surface-border);border-left:none}.sidebar.fixed.right{border-left:1px solid var(--surface-border);border-right:none}.sidebar.overlay{box-shadow:var(--shadow-lg)}.sidebar.collapsible{position:relative;height:100%;width:var(--sidebar-width);transition:width .3s cubic-bezier(.4,0,.2,1)}.sidebar.collapsible.left{border-right:1px solid var(--surface-border)}.sidebar.collapsible.right{border-left:1px solid var(--surface-border)}.sidebar.collapsible:not(.open){width:64px}.sidebar.collapsible:not(.open) .sidebar-content{opacity:0}.sidebar.collapsible.left:not(.open) .sidebar-content{transform:translate(-10px)}.sidebar.collapsible.right:not(.open) .sidebar-content{transform:translate(10px)}.sidebar.open{transform:translate(0)}.sidebar-content{flex:1;overflow-y:auto;overflow-x:hidden;padding:var(--spacing-md);transition:all .3s cubic-bezier(.4,0,.2,1);min-width:var(--sidebar-width);opacity:1;transform:translate(0)}.collapse-button{position:absolute;top:50%;transform:translateY(-50%);width:24px;height:24px;background:var(--primary-color);color:var(--primary-color-text);border:none;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);z-index:2;box-shadow:var(--shadow-md)}.sidebar.left .collapse-button{right:-16px}.sidebar.right .collapse-button{left:-16px}.collapse-button:hover{transform:translateY(-50%) scale(1.15);background:var(--primary-color-light);box-shadow:var(--shadow-lg)}.collapse-button i{font-size:1rem;transition:transform .3s ease}.sidebar-backdrop{position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(var(--surface-900-rgb),.5);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:999;animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@media (max-width: 768px){.sidebar{width:min(var(--sidebar-width),100vw)!important}}\n"] }]
+        }], ctorParameters: () => [] });
+
+const SPINLOADER_CONFIG = new InjectionToken('SPINLOADER_CONFIG', {
+    factory: () => ({
+        variant: 'circle',
+        size: 'medium',
+        color: 'primary'
+    })
+});
+const SPINLOADER_STYLES = new InjectionToken('SPINLOADER_STYLES', {
+    factory: () => []
+});
+class PshSpinLoaderComponent {
+    constructor() {
+        this.config = inject(SPINLOADER_CONFIG);
+        this.styles = inject(SPINLOADER_STYLES, { optional: true }) ?? [];
+        // Model inputs with defaults from config
+        this.variant = model(this.config.variant ?? 'circle');
+        this.size = model(this.config.size ?? 'medium');
+        this.color = model(this.config.color ?? 'primary');
+        // Computed values
+        this.customStyles = computed(() => Object.assign({}, ...this.styles));
+        // Helper methods
+        this.isSmall = computed(() => this.size() === 'small');
+        this.isLarge = computed(() => this.size() === 'large');
+        this.isCircle = computed(() => this.variant() === 'circle');
+        this.isDots = computed(() => this.variant() === 'dots');
+        this.isPulse = computed(() => this.variant() === 'pulse');
+        this.state = computed(() => this.variant());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: PshSpinLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: PshSpinLoaderComponent, isStandalone: true, selector: "psh-spinloader", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { variant: "variantChange", size: "sizeChange", color: "colorChange" }, ngImport: i0, template: "<div \r\n  class=\"spinloader\"\r\n  [class.small]=\"isSmall()\"\r\n  [class.large]=\"isLarge()\"\r\n  role=\"status\"\r\n  [attr.data-state]=\"state()\"\r\n>\r\n  @switch (variant()) {\r\n    @case ('circle') {\r\n      <div \r\n        class=\"spinner-circle\"\r\n        [class]=\"color()\"\r\n      ></div>\r\n    }\r\n    @case ('dots') {\r\n      <div class=\"spinner-dots\" [class]=\"color()\">\r\n        <div class=\"dot\"></div>\r\n        <div class=\"dot\"></div>\r\n        <div class=\"dot\"></div>\r\n      </div>\r\n    }\r\n    @case ('pulse') {\r\n      <div class=\"spinner-pulse\" [class]=\"color()\">\r\n        <div class=\"pulse\"></div>\r\n        <div class=\"pulse\"></div>\r\n        <div class=\"pulse\"></div>\r\n      </div>\r\n    }\r\n  }\r\n</div>", styles: [".spinloader{display:inline-flex;flex-direction:column;align-items:center;gap:var(--spacing-sm)}.spinner-circle{width:var(--spinner-size-md);height:var(--spinner-size-md);border:3px solid var(--surface-border);border-radius:50%;animation:spin 1s linear infinite}.spinner-circle.primary{border-top-color:var(--primary-color)}.spinner-circle.secondary{border-top-color:var(--secondary-color)}.spinner-circle.success{border-top-color:var(--success-color)}.spinner-circle.warning{border-top-color:var(--warning-color)}.spinner-circle.danger{border-top-color:var(--danger-color)}.spinner-dots{display:flex;gap:var(--spacing-xs)}.spinner-dots .dot{width:var(--spinner-dot-size-md);height:var(--spinner-dot-size-md);border-radius:50%;animation:bounce .5s ease-in-out infinite}.spinner-dots.primary .dot{background:var(--primary-color)}.spinner-dots.secondary .dot{background:var(--secondary-color)}.spinner-dots.success .dot{background:var(--success-color)}.spinner-dots.warning .dot{background:var(--warning-color)}.spinner-dots.danger .dot{background:var(--danger-color)}.spinner-dots .dot:nth-child(2){animation-delay:.1s}.spinner-dots .dot:nth-child(3){animation-delay:.2s}.spinner-pulse{display:flex;gap:var(--spacing-xs)}.spinner-pulse .pulse{width:var(--spinner-pulse-width-md);height:var(--spinner-pulse-height-md);animation:pulse .8s ease-in-out infinite}.spinner-pulse.primary .pulse{background:var(--primary-color)}.spinner-pulse.secondary .pulse{background:var(--secondary-color)}.spinner-pulse.success .pulse{background:var(--success-color)}.spinner-pulse.warning .pulse{background:var(--warning-color)}.spinner-pulse.danger .pulse{background:var(--danger-color)}.spinner-pulse .pulse:nth-child(2){animation-delay:.1s}.spinner-pulse .pulse:nth-child(3){animation-delay:.2s}.spinloader.small .spinner-circle{width:var(--spinner-size-sm);height:var(--spinner-size-sm);border-width:2px}.spinloader.small .spinner-dots .dot{width:var(--spinner-dot-size-sm);height:var(--spinner-dot-size-sm)}.spinloader.small .spinner-pulse .pulse{width:var(--spinner-pulse-width-sm);height:var(--spinner-pulse-height-sm)}.spinloader.large .spinner-circle{width:var(--spinner-size-lg);height:var(--spinner-size-lg);border-width:4px}.spinloader.large .spinner-dots .dot{width:var(--spinner-dot-size-lg);height:var(--spinner-dot-size-lg)}.spinloader.large .spinner-pulse .pulse{width:var(--spinner-pulse-width-lg);height:var(--spinner-pulse-height-lg)}.spinner-label{color:var(--text-color-secondary);font-size:var(--font-size-sm)}.small .spinner-label{font-size:var(--font-size-xs)}.large .spinner-label{font-size:var(--font-size-base)}@keyframes spin{to{transform:rotate(360deg)}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}@keyframes pulse{0%,to{transform:scaleY(1)}50%{transform:scaleY(.4)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: PshSpinLoaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'psh-spinloader', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div \r\n  class=\"spinloader\"\r\n  [class.small]=\"isSmall()\"\r\n  [class.large]=\"isLarge()\"\r\n  role=\"status\"\r\n  [attr.data-state]=\"state()\"\r\n>\r\n  @switch (variant()) {\r\n    @case ('circle') {\r\n      <div \r\n        class=\"spinner-circle\"\r\n        [class]=\"color()\"\r\n      ></div>\r\n    }\r\n    @case ('dots') {\r\n      <div class=\"spinner-dots\" [class]=\"color()\">\r\n        <div class=\"dot\"></div>\r\n        <div class=\"dot\"></div>\r\n        <div class=\"dot\"></div>\r\n      </div>\r\n    }\r\n    @case ('pulse') {\r\n      <div class=\"spinner-pulse\" [class]=\"color()\">\r\n        <div class=\"pulse\"></div>\r\n        <div class=\"pulse\"></div>\r\n        <div class=\"pulse\"></div>\r\n      </div>\r\n    }\r\n  }\r\n</div>", styles: [".spinloader{display:inline-flex;flex-direction:column;align-items:center;gap:var(--spacing-sm)}.spinner-circle{width:var(--spinner-size-md);height:var(--spinner-size-md);border:3px solid var(--surface-border);border-radius:50%;animation:spin 1s linear infinite}.spinner-circle.primary{border-top-color:var(--primary-color)}.spinner-circle.secondary{border-top-color:var(--secondary-color)}.spinner-circle.success{border-top-color:var(--success-color)}.spinner-circle.warning{border-top-color:var(--warning-color)}.spinner-circle.danger{border-top-color:var(--danger-color)}.spinner-dots{display:flex;gap:var(--spacing-xs)}.spinner-dots .dot{width:var(--spinner-dot-size-md);height:var(--spinner-dot-size-md);border-radius:50%;animation:bounce .5s ease-in-out infinite}.spinner-dots.primary .dot{background:var(--primary-color)}.spinner-dots.secondary .dot{background:var(--secondary-color)}.spinner-dots.success .dot{background:var(--success-color)}.spinner-dots.warning .dot{background:var(--warning-color)}.spinner-dots.danger .dot{background:var(--danger-color)}.spinner-dots .dot:nth-child(2){animation-delay:.1s}.spinner-dots .dot:nth-child(3){animation-delay:.2s}.spinner-pulse{display:flex;gap:var(--spacing-xs)}.spinner-pulse .pulse{width:var(--spinner-pulse-width-md);height:var(--spinner-pulse-height-md);animation:pulse .8s ease-in-out infinite}.spinner-pulse.primary .pulse{background:var(--primary-color)}.spinner-pulse.secondary .pulse{background:var(--secondary-color)}.spinner-pulse.success .pulse{background:var(--success-color)}.spinner-pulse.warning .pulse{background:var(--warning-color)}.spinner-pulse.danger .pulse{background:var(--danger-color)}.spinner-pulse .pulse:nth-child(2){animation-delay:.1s}.spinner-pulse .pulse:nth-child(3){animation-delay:.2s}.spinloader.small .spinner-circle{width:var(--spinner-size-sm);height:var(--spinner-size-sm);border-width:2px}.spinloader.small .spinner-dots .dot{width:var(--spinner-dot-size-sm);height:var(--spinner-dot-size-sm)}.spinloader.small .spinner-pulse .pulse{width:var(--spinner-pulse-width-sm);height:var(--spinner-pulse-height-sm)}.spinloader.large .spinner-circle{width:var(--spinner-size-lg);height:var(--spinner-size-lg);border-width:4px}.spinloader.large .spinner-dots .dot{width:var(--spinner-dot-size-lg);height:var(--spinner-dot-size-lg)}.spinloader.large .spinner-pulse .pulse{width:var(--spinner-pulse-width-lg);height:var(--spinner-pulse-height-lg)}.spinner-label{color:var(--text-color-secondary);font-size:var(--font-size-sm)}.small .spinner-label{font-size:var(--font-size-xs)}.large .spinner-label{font-size:var(--font-size-base)}@keyframes spin{to{transform:rotate(360deg)}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}@keyframes pulse{0%,to{transform:scaleY(1)}50%{transform:scaleY(.4)}}\n"] }]
+        }] });
+
+/**
+ * Token d'injection pour la configuration globale du stepper
+ */
+const STEPPER_CONFIG = new InjectionToken('STEPPER_CONFIG', {
+    factory: () => ({
+        orientation: 'horizontal',
+        variant: 'default',
+        linear: true,
+        ariaLabels: {
+            step: 'Étape',
+            completed: 'Étape complétée',
+            active: 'Étape active',
+            incomplete: 'Étape incomplète',
+            disabled: 'Étape désactivée'
+        }
+    })
+});
+/**
+ * Token d'injection pour les styles personnalisés
+ */
+const STEPPER_STYLES = new InjectionToken('STEPPER_STYLES', {
+    factory: () => []
+});
+class PshStepperComponent {
+    constructor() {
+        this.config = inject(STEPPER_CONFIG);
+        this.styles = inject(STEPPER_STYLES, { optional: true }) ?? [];
+        this.cdr = inject(ChangeDetectorRef);
+        this.observer = null;
+        this.elementRef = inject(ElementRef);
+        // État initial avec 3 étapes par défaut
+        this.defaultSteps = [
+            { title: 'Étape 1', subtitle: undefined, icon: 'user', disabled: false, completed: false },
+            { title: 'Étape 2', subtitle: undefined, icon: 'info', disabled: false, completed: false },
+            { title: 'Étape 3', subtitle: undefined, icon: 'check', disabled: false, completed: false }
+        ];
+        // Model inputs with defaults from config
+        this.activeStep = model(0);
+        this.orientation = model(this.config.orientation ?? 'horizontal');
+        this.variant = model(this.config.variant ?? 'default');
+        this.linear = model(this.config.linear ?? true);
+        // Regular inputs
+        this.ariaLabels = input({
+            step: 'Étape',
+            completed: 'Étape complétée',
+            active: 'Étape active',
+            incomplete: 'Étape incomplète',
+            disabled: 'Étape désactivée'
+        });
+        // Outputs
+        this.stepChange = output();
+        this.completed = output();
+        // State
+        this.stepsSignal = signal(this.defaultSteps);
+        this.steps = computed(() => this.stepsSignal());
+        // Computed values
+        this.customStyles = computed(() => Object.assign({}, ...this.styles));
+    }
+    ngAfterContentInit() {
+        // Observer les changements de contenu
+        this.observer = new MutationObserver(() => {
+            const steps = Array.from(this.elementRef.nativeElement.querySelectorAll('[stepContent]'));
+            // N'utiliser les étapes personnalisées que si elles existent
+            if (steps.length > 0) {
+                this.stepsSignal.set(steps.map((el, i) => ({
+                    title: el.getAttribute('data-title') || `Étape ${i + 1}`,
+                    subtitle: el.getAttribute('data-subtitle') || undefined,
+                    icon: el.getAttribute('data-icon') || undefined,
+                    disabled: el.hasAttribute('data-disabled'),
+                    completed: el.hasAttribute('data-completed'),
+                    error: el.getAttribute('data-error') || undefined,
+                    warning: el.getAttribute('data-warning') || undefined,
+                    success: el.getAttribute('data-success') || undefined
+                })));
+            }
+            this.cdr.markForCheck();
+        });
+        this.observer.observe(this.elementRef.nativeElement, {
+            childList: true,
+            subtree: true,
+            attributes: true,
+            attributeFilter: ['data-title', 'data-subtitle', 'data-icon', 'data-disabled', 'data-completed', 'data-error', 'data-warning', 'data-success']
+        });
+        // Initialiser les étapes
+        this.observer.takeRecords();
+    }
+    ngOnDestroy() {
+        if (this.observer) {
+            this.observer.disconnect();
+            this.observer = null;
+        }
+    }
+    // Navigation
+    next() {
+        if (this.canGoNext()) {
+            this.goToStep(this.activeStep() + 1);
+        }
+    }
+    previous() {
+        if (this.canGoPrevious()) {
+            this.goToStep(this.activeStep() - 1);
+        }
+    }
+    goToStep(index) {
+        if (this.canActivateStep(index) && index !== this.activeStep()) {
+            this.activeStep.set(index);
+            this.stepChange.emit(index);
+            this.cdr.markForCheck();
+        }
+    }
+    // Helpers
+    canGoNext() {
+        const nextIndex = this.activeStep() + 1;
+        return nextIndex < this.steps().length && this.canActivateStep(nextIndex);
+    }
+    canGoPrevious() {
+        return this.activeStep() > 0;
+    }
+    canActivateStep(index) {
+        if (!this.linear())
+            return true;
+        if (index === 0)
+            return true;
+        const step = this.steps()[index];
+        if (step?.disabled)
+            return false;
+        return this.steps()
+            .slice(0, index)
+            .every(step => step.completed && !step.error);
+    }
+    isStepValid(index) {
+        const step = this.steps()[index];
+        return step ? !!step.completed && !step.error : false;
+    }
+    getStepAriaLabel(step, index) {
+        const labels = this.ariaLabels();
+        const status = step.completed ? labels['completed'] :
+            index === this.activeStep() ? labels['active'] :
+                step.disabled ? labels['disabled'] :
+                    labels['incomplete'];
+        return `${labels['step']} ${index + 1}: ${step.title} - ${status}`;
+    }
+    // Tracking
+    trackByIndex(index) {
+        return index;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: PshStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: PshStepperComponent, isStandalone: true, selector: "psh-stepper", inputs: { activeStep: { classPropertyName: "activeStep", publicName: "activeStep", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null }, ariaLabels: { classPropertyName: "ariaLabels", publicName: "ariaLabels", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeStep: "activeStepChange", orientation: "orientationChange", variant: "variantChange", linear: "linearChange", stepChange: "stepChange", completed: "completed" }, ngImport: i0, template: "<div \r\n  class=\"stepper-container\"\r\n  [class.vertical]=\"orientation() === 'vertical'\"\r\n  [class.numbered]=\"variant() === 'numbered'\"\r\n  [class.progress]=\"variant() === 'progress'\"\r\n  [class.icon-top]=\"variant() === 'icon-top'\"\r\n>\r\n  <!-- Header -->\r\n  <div class=\"stepper-header\" role=\"tablist\">\r\n    @for (step of steps(); track $index; let i = $index) {\r\n      <div \r\n        class=\"step-header\"\r\n        [class.active]=\"i === activeStep()\"\r\n        [class.completed]=\"step.completed\"\r\n        [class.disabled]=\"step.disabled\"\r\n        [class.error]=\"!!step.error\"\r\n        [class.warning]=\"!!step.warning\"\r\n        [class.success]=\"!!step.success\"\r\n      >\r\n        <!-- Indicator -->\r\n        <div \r\n          class=\"step-indicator\"\r\n          role=\"tab\"\r\n          [attr.aria-selected]=\"i === activeStep()\"\r\n          [attr.aria-disabled]=\"step.disabled\"\r\n          [attr.aria-label]=\"getStepAriaLabel(step, i)\"\r\n          (click)=\"canActivateStep(i) && !step.disabled && goToStep(i)\"\r\n        >\r\n          @if (variant() === 'numbered') {\r\n            <span class=\"step-number\">{{ i + 1 }}</span>\r\n          } @else if (step.completed) {\r\n            <i class=\"ph ph-check\" aria-hidden=\"true\"></i>\r\n          } @else if (step.icon) {\r\n            <i class=\"ph ph-{{ step.icon }}\" aria-hidden=\"true\"></i>\r\n          } @else {\r\n            <span class=\"step-dot\"></span>\r\n          }\r\n        </div>\r\n\r\n        <!-- Label -->\r\n        <div class=\"step-label\">\r\n          <span class=\"step-title\">{{ step.title }}</span>\r\n          @if (step.subtitle) {\r\n            <span class=\"step-subtitle\">{{ step.subtitle }}</span>\r\n          }\r\n          @if (step.error) {\r\n            <span class=\"step-error\" [id]=\"'error-' + i\">{{ step.error }}</span>\r\n          }\r\n          @if (step.warning) {\r\n            <span class=\"step-warning\" [id]=\"'warning-' + i\">{{ step.warning }}</span>\r\n          }\r\n          @if (step.success) {\r\n            <span class=\"step-success\" [id]=\"'success-' + i\">{{ step.success }}</span>\r\n          }\r\n        </div>\r\n\r\n        <!-- Connector -->\r\n        @if (i < steps().length - 1) {\r\n          <div class=\"step-connector\">\r\n            <span class=\"connector-line\"></span>\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  <!-- Content -->\r\n  <div class=\"stepper-content\">\r\n    @for (step of steps(); track $index; let i = $index) {\r\n      <div \r\n        class=\"step-content\"\r\n        role=\"tabpanel\"\r\n        [class.active]=\"i === activeStep()\"\r\n        [attr.aria-labelledby]=\"'step-' + i\"\r\n        [attr.id]=\"'panel-' + i\"\r\n        [attr.tabindex]=\"i === activeStep() ? 0 : -1\"\r\n        [attr.hidden]=\"i !== activeStep()\"\r\n      >\r\n        @if (elementRef.nativeElement.querySelector('[stepContent]')) {\r\n          <ng-content select=\"[stepContent]\"></ng-content>\r\n        } @else {\r\n          <div class=\"default-content\">\r\n            <p>Contenu de l'\u00E9tape {{ i + 1 }}</p>\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n</div>", styles: [".stepper-container{display:flex;flex-direction:column;width:100%}.stepper-header{display:flex;margin-bottom:var(--spacing-xl)}.vertical .stepper-header{flex-direction:column;margin-right:var(--spacing-lg);margin-bottom:0;gap:var(--spacing-md);position:relative;padding-left:16px}.vertical .stepper-header:before{content:\"\";position:absolute;left:31px;top:0;bottom:0;width:2px;background:var(--surface-border);z-index:0}.step-header{display:flex;align-items:center;flex:1;min-width:0}.vertical .step-header{flex-direction:row;width:100%;min-height:64px;position:relative}.step-indicator{display:flex;align-items:center;justify-content:center;width:32px;height:32px;position:relative;z-index:1;border-radius:50%;background:var(--surface-card);border:2px solid var(--surface-border);color:var(--text-color-secondary);transition:all .2s ease;cursor:pointer;flex-shrink:0}.step-header.active .step-indicator{background:var(--primary-color);border-color:var(--primary-color);color:var(--primary-color-text)}.step-header.completed .step-indicator{background:var(--success-color);border-color:var(--success-color);color:var(--success-color-text)}.step-header.disabled .step-indicator{cursor:not-allowed;opacity:.6}.step-header.error .step-indicator{background:rgba(var(--danger-color-rgb),.1);border-color:var(--danger-color);color:var(--danger-color)}.step-header.warning .step-indicator{background:rgba(var(--warning-color-rgb),.1);border-color:var(--warning-color);color:var(--warning-color)}.step-header.success .step-indicator{background:rgba(var(--success-color-rgb),.1);border-color:var(--success-color);color:var(--success-color)}.step-success{color:var(--success-color);font-size:var(--font-size-sm);margin-top:var(--spacing-xs)}.step-error{color:var(--danger-color);font-size:var(--font-size-sm);margin-top:var(--spacing-xs)}.step-warning{color:var(--warning-color);font-size:var(--font-size-sm);margin-top:var(--spacing-xs)}.step-label{display:flex;flex-direction:column;margin:0 var(--spacing-md);min-width:0}.step-title{color:var(--text-color);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.step-subtitle{color:var(--text-color-secondary);font-size:var(--font-size-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.step-connector{flex:1;padding:0 var(--spacing-sm);display:flex;align-items:center}.connector-line{height:2px;background:var(--surface-border);width:100%}.step-header.completed .connector-line{background:var(--success-color)}.vertical .step-connector{width:2px;height:100%;display:none}.vertical .connector-line{width:2px;height:100%}.vertical .step-header.completed+.step-header:before{background:var(--success-color)}.vertical .step-label{margin-left:var(--spacing-lg);padding:var(--spacing-xs) 0}.vertical .stepper-content{margin-left:calc(32px + var(--spacing-lg));padding-left:var(--spacing-lg)}.vertical .step-content{padding:var(--spacing-md) 0}.vertical .step-header.active .step-indicator{transform:scale(1.1);box-shadow:0 0 0 4px rgba(var(--primary-color-rgb),.1)}.vertical .step-header.completed .step-indicator{transform:scale(1)}.vertical .step-header:last-child{padding-bottom:0}.numbered .step-number{font-weight:600;font-size:var(--font-size-sm)}.progress .step-indicator{position:relative;overflow:hidden}.progress .step-indicator:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background:var(--primary-color);transform:scaleX(0);transform-origin:left;transition:transform .3s ease}.progress .step-header.active .step-indicator:after{transform:scaleX(1)}.stepper-container.icon-top .stepper-header{display:flex;margin-bottom:var(--spacing-2xl);position:relative}.stepper-container.icon-top .step-header{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-md);flex:1 1 0;text-align:center;position:relative}.stepper-container.icon-top .step-indicator{width:48px;height:48px;position:relative;z-index:2}.stepper-container.icon-top .step-indicator i{font-size:1.5rem}.stepper-container.icon-top .step-label{margin:0;display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--spacing-xs);width:100%}.stepper-container.icon-top .step-title,.stepper-container.icon-top .step-subtitle{white-space:normal;text-align:center}.stepper-container.icon-top .step-connector{position:absolute;top:24px;left:calc(50% + 32px);right:calc(-50% + 32px);z-index:1}.stepper-container.icon-top .connector-line{height:2px;background:var(--surface-border);width:100%}.stepper-container.icon-top .step-header:last-child .step-connector{display:none}.stepper-container.icon-top .step-header.completed .connector-line{background:var(--success-color)}.stepper-content{flex:1;min-width:0}.step-content{display:none;animation:fadeIn .3s ease}.default-content{padding:var(--spacing-lg);color:var(--text-color-secondary);text-align:center;background:var(--surface-ground);border-radius:var(--border-radius)}.step-content.active{display:block}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: PshStepperComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'psh-stepper', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div \r\n  class=\"stepper-container\"\r\n  [class.vertical]=\"orientation() === 'vertical'\"\r\n  [class.numbered]=\"variant() === 'numbered'\"\r\n  [class.progress]=\"variant() === 'progress'\"\r\n  [class.icon-top]=\"variant() === 'icon-top'\"\r\n>\r\n  <!-- Header -->\r\n  <div class=\"stepper-header\" role=\"tablist\">\r\n    @for (step of steps(); track $index; let i = $index) {\r\n      <div \r\n        class=\"step-header\"\r\n        [class.active]=\"i === activeStep()\"\r\n        [class.completed]=\"step.completed\"\r\n        [class.disabled]=\"step.disabled\"\r\n        [class.error]=\"!!step.error\"\r\n        [class.warning]=\"!!step.warning\"\r\n        [class.success]=\"!!step.success\"\r\n      >\r\n        <!-- Indicator -->\r\n        <div \r\n          class=\"step-indicator\"\r\n          role=\"tab\"\r\n          [attr.aria-selected]=\"i === activeStep()\"\r\n          [attr.aria-disabled]=\"step.disabled\"\r\n          [attr.aria-label]=\"getStepAriaLabel(step, i)\"\r\n          (click)=\"canActivateStep(i) && !step.disabled && goToStep(i)\"\r\n        >\r\n          @if (variant() === 'numbered') {\r\n            <span class=\"step-number\">{{ i + 1 }}</span>\r\n          } @else if (step.completed) {\r\n            <i class=\"ph ph-check\" aria-hidden=\"true\"></i>\r\n          } @else if (step.icon) {\r\n            <i class=\"ph ph-{{ step.icon }}\" aria-hidden=\"true\"></i>\r\n          } @else {\r\n            <span class=\"step-dot\"></span>\r\n          }\r\n        </div>\r\n\r\n        <!-- Label -->\r\n        <div class=\"step-label\">\r\n          <span class=\"step-title\">{{ step.title }}</span>\r\n          @if (step.subtitle) {\r\n            <span class=\"step-subtitle\">{{ step.subtitle }}</span>\r\n          }\r\n          @if (step.error) {\r\n            <span class=\"step-error\" [id]=\"'error-' + i\">{{ step.error }}</span>\r\n          }\r\n          @if (step.warning) {\r\n            <span class=\"step-warning\" [id]=\"'warning-' + i\">{{ step.warning }}</span>\r\n          }\r\n          @if (step.success) {\r\n            <span class=\"step-success\" [id]=\"'success-' + i\">{{ step.success }}</span>\r\n          }\r\n        </div>\r\n\r\n        <!-- Connector -->\r\n        @if (i < steps().length - 1) {\r\n          <div class=\"step-connector\">\r\n            <span class=\"connector-line\"></span>\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  <!-- Content -->\r\n  <div class=\"stepper-content\">\r\n    @for (step of steps(); track $index; let i = $index) {\r\n      <div \r\n        class=\"step-content\"\r\n        role=\"tabpanel\"\r\n        [class.active]=\"i === activeStep()\"\r\n        [attr.aria-labelledby]=\"'step-' + i\"\r\n        [attr.id]=\"'panel-' + i\"\r\n        [attr.tabindex]=\"i === activeStep() ? 0 : -1\"\r\n        [attr.hidden]=\"i !== activeStep()\"\r\n      >\r\n        @if (elementRef.nativeElement.querySelector('[stepContent]')) {\r\n          <ng-content select=\"[stepContent]\"></ng-content>\r\n        } @else {\r\n          <div class=\"default-content\">\r\n            <p>Contenu de l'\u00E9tape {{ i + 1 }}</p>\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n</div>", styles: [".stepper-container{display:flex;flex-direction:column;width:100%}.stepper-header{display:flex;margin-bottom:var(--spacing-xl)}.vertical .stepper-header{flex-direction:column;margin-right:var(--spacing-lg);margin-bottom:0;gap:var(--spacing-md);position:relative;padding-left:16px}.vertical .stepper-header:before{content:\"\";position:absolute;left:31px;top:0;bottom:0;width:2px;background:var(--surface-border);z-index:0}.step-header{display:flex;align-items:center;flex:1;min-width:0}.vertical .step-header{flex-direction:row;width:100%;min-height:64px;position:relative}.step-indicator{display:flex;align-items:center;justify-content:center;width:32px;height:32px;position:relative;z-index:1;border-radius:50%;background:var(--surface-card);border:2px solid var(--surface-border);color:var(--text-color-secondary);transition:all .2s ease;cursor:pointer;flex-shrink:0}.step-header.active .step-indicator{background:var(--primary-color);border-color:var(--primary-color);color:var(--primary-color-text)}.step-header.completed .step-indicator{background:var(--success-color);border-color:var(--success-color);color:var(--success-color-text)}.step-header.disabled .step-indicator{cursor:not-allowed;opacity:.6}.step-header.error .step-indicator{background:rgba(var(--danger-color-rgb),.1);border-color:var(--danger-color);color:var(--danger-color)}.step-header.warning .step-indicator{background:rgba(var(--warning-color-rgb),.1);border-color:var(--warning-color);color:var(--warning-color)}.step-header.success .step-indicator{background:rgba(var(--success-color-rgb),.1);border-color:var(--success-color);color:var(--success-color)}.step-success{color:var(--success-color);font-size:var(--font-size-sm);margin-top:var(--spacing-xs)}.step-error{color:var(--danger-color);font-size:var(--font-size-sm);margin-top:var(--spacing-xs)}.step-warning{color:var(--warning-color);font-size:var(--font-size-sm);margin-top:var(--spacing-xs)}.step-label{display:flex;flex-direction:column;margin:0 var(--spacing-md);min-width:0}.step-title{color:var(--text-color);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.step-subtitle{color:var(--text-color-secondary);font-size:var(--font-size-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.step-connector{flex:1;padding:0 var(--spacing-sm);display:flex;align-items:center}.connector-line{height:2px;background:var(--surface-border);width:100%}.step-header.completed .connector-line{background:var(--success-color)}.vertical .step-connector{width:2px;height:100%;display:none}.vertical .connector-line{width:2px;height:100%}.vertical .step-header.completed+.step-header:before{background:var(--success-color)}.vertical .step-label{margin-left:var(--spacing-lg);padding:var(--spacing-xs) 0}.vertical .stepper-content{margin-left:calc(32px + var(--spacing-lg));padding-left:var(--spacing-lg)}.vertical .step-content{padding:var(--spacing-md) 0}.vertical .step-header.active .step-indicator{transform:scale(1.1);box-shadow:0 0 0 4px rgba(var(--primary-color-rgb),.1)}.vertical .step-header.completed .step-indicator{transform:scale(1)}.vertical .step-header:last-child{padding-bottom:0}.numbered .step-number{font-weight:600;font-size:var(--font-size-sm)}.progress .step-indicator{position:relative;overflow:hidden}.progress .step-indicator:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background:var(--primary-color);transform:scaleX(0);transform-origin:left;transition:transform .3s ease}.progress .step-header.active .step-indicator:after{transform:scaleX(1)}.stepper-container.icon-top .stepper-header{display:flex;margin-bottom:var(--spacing-2xl);position:relative}.stepper-container.icon-top .step-header{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-md);flex:1 1 0;text-align:center;position:relative}.stepper-container.icon-top .step-indicator{width:48px;height:48px;position:relative;z-index:2}.stepper-container.icon-top .step-indicator i{font-size:1.5rem}.stepper-container.icon-top .step-label{margin:0;display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--spacing-xs);width:100%}.stepper-container.icon-top .step-title,.stepper-container.icon-top .step-subtitle{white-space:normal;text-align:center}.stepper-container.icon-top .step-connector{position:absolute;top:24px;left:calc(50% + 32px);right:calc(-50% + 32px);z-index:1}.stepper-container.icon-top .connector-line{height:2px;background:var(--surface-border);width:100%}.stepper-container.icon-top .step-header:last-child .step-connector{display:none}.stepper-container.icon-top .step-header.completed .connector-line{background:var(--success-color)}.stepper-content{flex:1;min-width:0}.step-content{display:none;animation:fadeIn .3s ease}.default-content{padding:var(--spacing-lg);color:var(--text-color-secondary);text-align:center;background:var(--surface-ground);border-radius:var(--border-radius)}.step-content.active{display:block}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}\n"] }]
+        }] });
+
+/**
+ * Token d'injection pour la configuration globale des switches
+ */
+const SWITCH_CONFIG = new InjectionToken('SWITCH_CONFIG', {
+    factory: () => ({
+        checked: false,
+        disabled: false,
+        required: false,
+        size: 'medium',
+        labelPosition: 'right'
+    })
+});
+/**
+ * Token d'injection pour les styles personnalisés
+ */
+const SWITCH_STYLES = new InjectionToken('SWITCH_STYLES', {
+    factory: () => []
+});
+class PshSwitchComponent {
+    constructor() {
+        this.config = inject(SWITCH_CONFIG);
+        this.elementRef = inject(ElementRef);
+        this.styles = inject(SWITCH_STYLES, { optional: true }) ?? [];
+        // Model inputs with defaults from config
+        this.checked = model(this.config.checked ?? false);
+        this.disabled = model(this.config.disabled ?? false);
+        this.required = model(this.config.required ?? false);
+        this.size = model(this.config.size ?? 'medium');
+        this.labelPosition = model(this.config.labelPosition ?? 'right');
+        // Regular inputs
+        this.label = input('');
+        this.error = input('');
+        this.success = input('');
+        // Outputs
+        this.checkedChange = output();
+        // Computed values
+        this.customStyles = computed(() => Object.assign({}, ...this.styles));
+    }
+    hasContent() {
+        const content = this.elementRef.nativeElement
+            .querySelector('.switch-text')
+            ?.textContent?.trim();
+        return !!content || !!this.label();
+    }
+    toggle() {
+        if (!this.disabled()) {
+            this.checked.update(v => !v);
+            this.checkedChange.emit(this.checked());
+        }
+    }
+    /**
+     * Génère un identifiant unique pour les messages
+     */
+    generateMessageId(type, id) {
+        return `${type}-message-${id}`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: PshSwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: PshSwitchComponent, isStandalone: true, selector: "psh-switch", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", 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 }, 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 } }, outputs: { checked: "checkedChange", disabled: "disabledChange", required: "requiredChange", size: "sizeChange", labelPosition: "labelPositionChange", checkedChange: "checkedChange" }, ngImport: i0, template: "<div \r\n  class=\"switch-container\"\r\n  [attr.aria-describedby]=\"error() ? 'error-message' : success() ? 'success-message' : null\"\r\n  [class.disabled]=\"disabled()\"\r\n  [class.error]=\"!!error()\"\r\n  [class.success]=\"!!success()\"\r\n  [class.small]=\"size() === 'small'\"\r\n  [class.large]=\"size() === 'large'\"\r\n>\r\n  <label class=\"switch-label\" [class]=\"labelPosition() === 'left' ? 'label-left' : 'label-right'\">\r\n    <input\r\n      type=\"checkbox\"\r\n      class=\"switch-input\"\r\n      [checked]=\"checked()\"\r\n      [disabled]=\"disabled()\"\r\n      [required]=\"required()\"\r\n      [attr.aria-required]=\"required()\"\r\n      [attr.aria-invalid]=\"!!error()\"\r\n      [attr.aria-checked]=\"checked()\"\r\n      (change)=\"toggle()\"\r\n    />\r\n    <span class=\"switch-control\">\r\n      <span class=\"switch-thumb\"></span>\r\n    </span>\r\n    <span class=\"switch-text\">\r\n      @if (label()) {\r\n        {{ label() }}\r\n      } @else {\r\n        <ng-content>Switch</ng-content>\r\n      }\r\n    </span>\r\n  </label>\r\n\r\n  @if (error()) {\r\n    <div id=\"error-message\" class=\"switch-error\" role=\"alert\">\r\n      {{ error() }}\r\n    </div>\r\n  }\r\n\r\n  @if (success()) {\r\n    <div id=\"success-message\" class=\"switch-success\" role=\"status\">\r\n      {{ success() }}\r\n    </div>\r\n  }\r\n</div>", styles: [".switch-container{display:inline-flex;flex-direction:column;gap:var(--spacing-xs)}.switch-label{display:inline-flex;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none;color:var(--text-color);width:100%}.switch-label.label-right{flex-direction:row;gap:var(--spacing-sm)}.switch-label.label-left{flex-direction:row-reverse;justify-content:space-between;gap:var(--spacing-md)}.switch-input{position:absolute;opacity:0;width:0;height:0}.switch-control{position:relative;display:inline-block;width:40px;height:22px;background:var(--surface-border);border-radius:20px;transition:all .2s ease}.switch-thumb{position:absolute;top:2px;left:2px;width:18px;height:18px;background:var(--surface-card);border-radius:50%;transition:all .2s ease}.switch-input:checked+.switch-control{background:var(--primary-color)}.switch-input:checked+.switch-control .switch-thumb{left:calc(100% - 18px)}.switch-input:focus+.switch-control{box-shadow:0 0 0 2px rgba(var(--primary-color-rgb),.2)}.switch-container.disabled .switch-label{opacity:.6;cursor:not-allowed}.switch-container.error .switch-control{background:var(--danger-color)}.switch-container.success .switch-control{background:var(--success-color)}.switch-error{font-size:var(--font-size-sm);color:var(--danger-color)}.switch-success{font-size:var(--font-size-sm);color:var(--success-color)}.switch-container.small .switch-control{width:34px;height:20px}.switch-container.small .switch-thumb{width:16px;height:16px}.switch-container.small .switch-input:checked+.switch-control .switch-thumb{left:calc(100% - 16px)}.switch-container.large .switch-control{width:48px;height:26px}.switch-container.large .switch-thumb{width:22px;height:22px}.switch-container.large .switch-input:checked+.switch-control .switch-thumb{left:calc(100% - 22px)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: PshSwitchComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'psh-switch', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div \r\n  class=\"switch-container\"\r\n  [attr.aria-describedby]=\"error() ? 'error-message' : success() ? 'success-message' : null\"\r\n  [class.disabled]=\"disabled()\"\r\n  [class.error]=\"!!error()\"\r\n  [class.success]=\"!!success()\"\r\n  [class.small]=\"size() === 'small'\"\r\n  [class.large]=\"size() === 'large'\"\r\n>\r\n  <label class=\"switch-label\" [class]=\"labelPosition() === 'left' ? 'label-left' : 'label-right'\">\r\n    <input\r\n      type=\"checkbox\"\r\n      class=\"switch-input\"\r\n      [checked]=\"checked()\"\r\n      [disabled]=\"disabled()\"\r\n      [required]=\"required()\"\r\n      [attr.aria-required]=\"required()\"\r\n      [attr.aria-invalid]=\"!!error()\"\r\n      [attr.aria-checked]=\"checked()\"\r\n      (change)=\"toggle()\"\r\n    />\r\n    <span class=\"switch-control\">\r\n      <span class=\"switch-thumb\"></span>\r\n    </span>\r\n    <span class=\"switch-text\">\r\n      @if (label()) {\r\n        {{ label() }}\r\n      } @else {\r\n        <ng-content>Switch</ng-content>\r\n      }\r\n    </span>\r\n  </label>\r\n\r\n  @if (error()) {\r\n    <div id=\"error-message\" class=\"switch-error\" role=\"alert\">\r\n      {{ error() }}\r\n    </div>\r\n  }\r\n\r\n  @if (success()) {\r\n    <div id=\"success-message\" class=\"switch-success\" role=\"status\">\r\n      {{ success() }}\r\n    </div>\r\n  }\r\n</div>", styles: [".switch-container{display:inline-flex;flex-direction:column;gap:var(--spacing-xs)}.switch-label{display:inline-flex;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none;color:var(--text-color);width:100%}.switch-label.label-right{flex-direction:row;gap:var(--spacing-sm)}.switch-label.label-left{flex-direction:row-reverse;justify-content:space-between;gap:var(--spacing-md)}.switch-input{position:absolute;opacity:0;width:0;height:0}.switch-control{position:relative;display:inline-block;width:40px;height:22px;background:var(--surface-border);border-radius:20px;transition:all .2s ease}.switch-thumb{position:absolute;top:2px;left:2px;width:18px;height:18px;background:var(--surface-card);border-radius:50%;transition:all .2s ease}.switch-input:checked+.switch-control{background:var(--primary-color)}.switch-input:checked+.switch-control .switch-thumb{left:calc(100% - 18px)}.switch-input:focus+.switch-control{box-shadow:0 0 0 2px rgba(var(--primary-color-rgb),.2)}.switch-container.disabled .switch-label{opacity:.6;cursor:not-allowed}.switch-container.error .switch-control{background:var(--danger-color)}.switch-container.success .switch-control{background:var(--success-color)}.switch-error{font-size:var(--font-size-sm);color:var(--danger-color)}.switch-success{font-size:var(--font-size-sm);color:var(--success-color)}.switch-container.small .switch-control{width:34px;height:20px}.switch-container.small .switch-thumb{width:16px;height:16px}.switch-container.small .switch-input:checked+.switch-control .switch-thumb{left:calc(100% - 16px)}.switch-container.large .switch-control{width:48px;height:26px}.switch-container.large .switch-thumb{width:22px;height:22px}.switch-container.large .switch-input:checked+.switch-control .switch-thumb{left:calc(100% - 22px)}\n"] }]
+        }] });
+
+/**
+ * Token d'injection pour la configuration globale de la barre d'onglets
+ */
+const TAB_BAR_CONFIG = new InjectionToken('TAB_BAR_CONFIG', {
+    factory: () => ({
+        disabled: false,
+        position: 'bottom',
+        animated: true,
+        iconSize: 'medium'
+    })
+});
+/**
+ * Token d'injection pour les styles personnalisés
+ */
+const TAB_BAR_STYLES = new InjectionToken('TAB_BAR_STYLES', {
+    factory: () => []
+});
+class PshTabBarComponent {
+    constructor() {
+        this.config = inject(TAB_BAR_CONFIG);
+        this.styles = inject(TAB_BAR_STYLES, { optional: true }) ?? [];
+        // Default items
+        this.defaultItems = [
+            { id: 'home', label: 'Accueil', icon: 'house' },
+            { id: 'search', label: 'Rechercher', icon: 'magnifying-glass' },
+            { id: 'notifications', label: 'Notifications', icon: 'bell', badge: '3' },
+            { id: 'profile', label: 'Profil', icon: 'user' }
+        ];
+        // Model inputs with defaults from config
+        this.disabled = model(this.config.disabled ?? false);
+        this.position = model(this.config.position ?? 'bottom');
+        this.animated = model(this.config.animated ?? true);
+        this.iconSize = model(this.config.iconSize ?? 'medium');
+        this.activeIndex = model(0);
+        // Regular inputs
+        this.items = input(this.defaultItems);
+        // Outputs
+        this.activeIndexChange = output();
+        // Computed values
+        this.customStyles = computed(() => Object.assign({}, ...this.styles));
+    }
+    selectTab(index) {
+        if (!this.disabled() && this.activeIndex() !== index) {
+            this.activeIndex.set(index);
+            this.activeIndexChange.emit(index);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: PshTabBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: PshTabBarComponent, isStandalone: true, selector: "psh-tab-bar", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, animated: { classPropertyName: "animated", publicName: "animated", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null }, activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", position: "positionChange", animated: "animatedChange", iconSize: "iconSizeChange", activeIndex: "activeIndexChange", activeIndexChange: "activeIndexChange" }, ngImport: i0, template: "<nav \r\n  class=\"tab-bar\"\r\n  [class.top]=\"position() === 'top'\"\r\n  [class.animated]=\"animated()\"\r\n  [class.small]=\"iconSize() === 'small'\"\r\n  [class.large]=\"iconSize() === 'large'\"\r\n  role=\"tablist\"\r\n  [attr.aria-label]=\"'Navigation par onglets'\"\r\n>\r\n  @for (item of items(); track item.id; let i = $index) {\r\n    <button\r\n      class=\"tab-item\"\r\n      [class.active]=\"activeIndex() === i\"\r\n      [class.disabled]=\"disabled() || item.disabled\"\r\n      role=\"tab\"\r\n      [attr.aria-selected]=\"activeIndex() === i\"\r\n      [attr.aria-disabled]=\"disabled() || item.disabled\"\r\n      [attr.aria-label]=\"item.label\"\r\n      (click)=\"selectTab(i)\"\r\n    >\r\n      <i \r\n        [class]=\"activeIndex() === i ? 'ph-fill ph-' + item.icon : 'ph ph-' + item.icon\"\r\n        aria-hidden=\"true\"\r\n      ></i>\r\n      <span class=\"tab-label\">{{ item.label }}</span>\r\n      @if (item.badge) {\r\n        <span class=\"tab-badge\">{{ item.badge }}</span>\r\n      }\r\n    </button>\r\n  }\r\n</nav>", styles: [":host{display:contents}.tab-bar{display:flex;justify-content:space-around;align-items:center;position:absolute;bottom:0;left:0;right:0;height:64px;background:var(--surface-card);border-top:1px solid var(--surface-border);padding:var(--spacing-xs);z-index:1}.tab-bar.top{top:0;bottom:auto;border-top:none;border-bottom:1px solid var(--surface-border)}.tab-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--spacing-xs);flex:1;height:100%;border:none;background:transparent;color:var(--text-color-secondary);font-family:inherit;font-size:var(--font-size-xs);cursor:pointer;transition:all .2s ease;padding:var(--spacing-xs);position:relative}.tab-item i{font-size:1.5rem;transition:transform .2s ease}.tab-item:hover:not(.disabled){color:var(--primary-color)}.tab-item.active{color:var(--primary-color)}.tab-item.active i{transform:translateY(-2px)}.tab-label{font-size:var(--font-size-xs);font-weight:500}.tab-badge{position:absolute;top:4px;right:calc(50% - 16px);min-width:18px;height:18px;padding:0 var(--spacing-xs);background:var(--danger-color);color:var(--danger-color-text);border-radius:var(--border-radius-full);font-size:var(--font-size-xs);font-weight:500;display:flex;align-items:center;justify-content:center}.tab-bar.small{height:56px}.tab-bar.small .tab-item i{font-size:1.25rem}.tab-bar.large{height:72px}.tab-bar.large .tab-item i{font-size:1.75rem}.tab-item.disabled{opacity:.6;cursor:not-allowed}.tab-bar.animated .tab-item{transition:all .3s ease}.tab-bar.animated .tab-item i{transition:transform .3s ease}@media (max-width: 480px){.tab-label{display:none}.tab-item{padding:var(--spacing-xs) 0}.tab-badge{right:calc(50% - 8px)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: PshTabBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'psh-tab-bar', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav \r\n  class=\"tab-bar\"\r\n  [class.top]=\"position() === 'top'\"\r\n  [class.animated]=\"animated()\"\r\n  [class.small]=\"iconSize() === 'small'\"\r\n  [class.large]=\"iconSize() === 'large'\"\r\n  role=\"tablist\"\r\n  [attr.aria-label]=\"'Navigation par onglets'\"\r\n>\r\n  @for (item of items(); track item.id; let i = $index) {\r\n    <button\r\n      class=\"tab-item\"\r\n      [class.active]=\"activeIndex() === i\"\r\n      [class.disabled]=\"disabled() || item.disabled\"\r\n      role=\"tab\"\r\n      [attr.aria-selected]=\"activeIndex() === i\"\r\n      [attr.aria-disabled]=\"disabled() || item.disabled\"\r\n      [attr.aria-label]=\"item.label\"\r\n      (click)=\"selectTab(i)\"\r\n    >\r\n      <i \r\n        [class]=\"activeIndex() === i ? 'ph-fill ph-' + item.icon : 'ph ph-' + item.icon\"\r\n        aria-hidden=\"true\"\r\n      ></i>\r\n      <span class=\"tab-label\">{{ item.label }}</span>\r\n      @if (item.badge) {\r\n        <span class=\"tab-badge\">{{ item.badge }}</span>\r\n      }\r\n    </button>\r\n  }\r\n</nav>", styles: [":host{display:contents}.tab-bar{display:flex;justify-content:space-around;align-items:center;position:absolute;bottom:0;left:0;right:0;height:64px;background:var(--surface-card);border-top:1px solid var(--surface-border);padding:var(--spacing-xs);z-index:1}.tab-bar.top{top:0;bottom:auto;border-top:none;border-bottom:1px solid var(--surface-border)}.tab-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--spacing-xs);flex:1;height:100%;border:none;background:transparent;color:var(--text-color-secondary);font-family:inherit;font-size:var(--font-size-xs);cursor:pointer;transition:all .2s ease;padding:var(--spacing-xs);position:relative}.tab-item i{font-size:1.5rem;transition:transform .2s ease}.tab-item:hover:not(.disabled){color:var(--primary-color)}.tab-item.active{color:var(--primary-color)}.tab-item.active i{transform:translateY(-2px)}.tab-label{font-size:var(--font-size-xs);font-weight:500}.tab-badge{position:absolute;top:4px;right:calc(50% - 16px);min-width:18px;height:18px;padding:0 var(--spacing-xs);background:var(--danger-color);color:var(--danger-color-text);border-radius:var(--border-radius-full);font-size:var(--font-size-xs);font-weight:500;display:flex;align-items:center;justify-content:center}.tab-bar.small{height:56px}.tab-bar.small .tab-item i{font-size:1.25rem}.tab-bar.large{height:72px}.tab-bar.large .tab-item i{font-size:1.75rem}.tab-item.disabled{opacity:.6;cursor:not-allowed}.tab-bar.animated .tab-item{transition:all .3s ease}.tab-bar.animated .tab-item i{transition:transform .3s ease}@media (max-width: 480px){.tab-label{display:none}.tab-item{padding:var(--spacing-xs) 0}.tab-badge{right:calc(50% - 8px)}}\n"] }]
+        }] });
+
+const TABLE_CONFIG = new InjectionToken('TABLE_CONFIG', {
+    factory: () => ({
+        variant: 'default',
+        size: 'medium',
+        striped: false,
+        hoverable: false,
+        bordered: false,
+        loading: false,
+        emptyMessage: 'No data available',
+        noResultsMessage: 'No results found',
+        globalSearch: false,
+        globalSearchPlaceholder: 'Search in all columns...'
+    })
+});
+const TABLE_STYLES = new InjectionToken('TABLE_STYLES', {
+    factory: () => [{}]
+});
+class PshTableComponent {
+    constructor() {
+        this.config = inject(TABLE_CONFIG);
+        this.cdr = inject(ChangeDetectorRef);
+        this.styles = inject(TABLE_STYLES, { optional: true }) ?? [{}];
+        // Default data
+        this.defaultColumns = [
+            { key: 'id', label: 'ID', width: '80px', sortable: true },
+            { key: 'name', label: 'Name', sortable: true },
+            { key: 'email', label: 'Email', sortable: true }
+        ];
+        this.defaultData = [
+            { id: 1, name: 'John Doe', email: 'john@example.com' },
+            { id: 2, name: 'Jane Smith', email: 'jane@example.com' },
+            { id: 3, name: 'Bob Johnson', email: 'bob@example.com' }
+        ];
+        // Model inputs with defaults from config
+        this.variant = model(this.config.variant ?? 'default');
+        this.size = model(this.config.size ?? 'medium');
+        this.striped = model(this.config.striped ?? false);
+        this.hoverable = model(this.config.hoverable ?? false);
+        this.bordered = model(this.config.bordered ?? false);
+        this.loading = model(this.config.loading ?? false);
+        this.globalSearch = model(this.config.globalSearch ?? false);
+        // Regular inputs
+        this.columns = input([]);
+        this.data = input([]);
+        this.emptyMessage = input('No data available');
+        this.noResultsMessage = input('No results found');
+        this.globalSearchPlaceholder = input(this.config.globalSearchPlaceholder ?? 'Search in all columns...');
+        // Outputs
+        this.sortChange = output();
+        this.globalSearchChange = output();
+        this.rowClick = output();
+        // State
+        this.currentSortSignal = model();
+        this.searchTermSignal = model('');
+        // Computed values
+        this.computedEmptyMessage = computed(() => {
+            return this.searchTerm()
+                ? `${this.noResultsMessage()} "${this.searchTerm()}"`
+                : this.emptyMessage();
+        });
+        this.currentSort = computed(() => this.currentSortSignal());
+        this.searchTerm = computed(() => this.searchTermSignal());
+        this.state = computed(() => {
+            if (this.loading())
+                return 'loading';
+            if (this.filteredData().length === 0)
+                return 'empty';
+            return 'default';
+        });
+        this.filteredData = computed(() => {
+            let result = [...this.data()];
+            // Apply global search
+            if (this.searchTerm()) {
+                result = this.filterData(result, this.searchTerm());
+            }
+            // Apply sorting
+            const sort = this.currentSort();
+            if (sort) {
+                result = this.sortData(result, sort);
+            }
+            return result;
+        });
+        this.customStyles = computed(() => {
+            return Object.assign({}, ...this.styles);
+        });
+    }
+    /**
+     * Trie les données
+     */
+    sortData(data, sort) {
+        return [...data].sort((a, b) => {
+            const column = this.columns().find(col => col.key === sort.key);
+            // Utiliser la fonction de tri personnalisée si elle existe
+            if (column?.sortFn) {
+                return sort.direction === 'asc'
+                    ? column.sortFn(a, b)
+                    : column.sortFn(b, a);
+            }
+            // Sinon, utiliser le tri par défaut avec le chemin
+            const aValue = this.getNestedValue(a, column?.path || sort.key);
+            const bValue = this.getNestedValue(b, column?.path || sort.key);
+            if (sort.direction === 'asc') {
+                return aValue > bValue ? 1 : -1;
+            }
+            else {
+                return aValue < bValue ? 1 : -1;
+            }
+        });
+    }
+    /**
+     * Filtre les données
+     */
+    filterData(data, searchTerm) {
+        if (!searchTerm)
+            return data;
+        const term = searchTerm.toLowerCase();
+        return data.filter(row => {
+            return this.columns().some(column => {
+                const value = this.getNestedValue(row, column.path || column.key);
+                return value?.toString().toLowerCase().includes(term);
+            });
+        });
+    }
+    /**
+     * Récupère la valeur d'un objet imbriqué en utilisant un chemin
+     */
+    getNestedValue(obj, path) {
+        return path.split('.').reduce((acc, part) => acc?.[part], obj);
+    }
+    handleSort(column) {
+        if (!column.sortable)
+            return;
+        const direction = !this.currentSort() || this.currentSort()?.key !== column.key
+            ? 'asc'
+            : this.currentSort()?.direction === 'asc'
+                ? 'desc'
+                : 'asc';
+        const sort = { key: column.key, direction };
+        this.currentSortSignal.set(sort);
+        this.sortChange.emit(sort);
+        this.cdr.markForCheck();
+    }
+    handleGlobalSearch(event) {
+        const value = event.target.value;
+        this.searchTermSignal.set(value);
+        this.globalSearchChange.emit(value);
+        this.cdr.markForCheck();
+    }
+    handleRowClick(row) {
+        this.rowClick.emit({ id: row.id, row });
+    }
+    /**
+     * Applique la configuration par défaut
+     */
+    static applyDefaults(component) {
+        const config = inject(TABLE_CONFIG);
+        if (config.variant)
+            component.variant.set(config.variant);
+        if (config.size)
+            component.size.set(config.size);
+        if (config.striped !== undefined)
+            component.striped.set(config.striped);
+        if (config.hoverable !== undefined)
+            component.hoverable.set(config.hoverable);
+        if (config.bordered !== undefined)
+            component.bordered.set(config.bordered);
+        if (config.loading !== undefined)
+            component.loading.set(config.loading);
+        if (config.globalSearch !== undefined)
+            component.globalSearch.set(config.globalSearch);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: PshTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: PshTableComponent, isStandalone: true, selector: "psh-table", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: true, isRequired: false, transformFunction: null }, hoverable: { classPropertyName: "hoverable", publicName: "hoverable", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, globalSearch: { classPropertyName: "globalSearch", publicName: "globalSearch", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, noResultsMessage: { classPropertyName: "noResultsMessage", publicName: "noResultsMessage", isSignal: true, isRequired: false, transformFunction: null }, globalSearchPlaceholder: { classPropertyName: "globalSearchPlaceholder", publicName: "globalSearchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, currentSortSignal: { classPropertyName: "currentSortSignal", publicName: "currentSortSignal", isSignal: true, isRequired: false, transformFunction: null }, searchTermSignal: { classPropertyName: "searchTermSignal", publicName: "searchTermSignal", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { variant: "variantChange", size: "sizeChange", striped: "stripedChange", hoverable: "hoverableChange", bordered: "borderedChange", loading: "loadingChange", globalSearch: "globalSearchChange", sortChange: "sortChange", globalSearchChange: "globalSearchChange", rowClick: "rowClick", currentSortSignal: "currentSortSignalChange", searchTermSignal: "searchTermSignalChange" }, ngImport: i0, template: "<div \r\n  class=\"table-wrapper\"\r\n  [class.striped]=\"striped()\"\r\n  [class.hoverable]=\"hoverable()\"\r\n  [class.bordered]=\"bordered()\"\r\n  [class.small]=\"size() === 'small'\"\r\n  [class.large]=\"size() === 'large'\"\r\n  [class.outline]=\"variant() === 'outline'\"\r\n  [attr.data-state]=\"state()\"\r\n>\r\n  @if (globalSearch()) {\r\n    <div class=\"global-search\">\r\n      <input\r\n        type=\"text\"\r\n        [attr.placeholder]=\"globalSearchPlaceholder()\"\r\n        [value]=\"searchTerm()\"\r\n        (input)=\"handleGlobalSearch($event)\"\r\n        [attr.aria-label]=\"globalSearchPlaceholder()\"\r\n      />\r\n      <i class=\"ph ph-magnifying-glass\" aria-hidden=\"true\"></i>\r\n    </div>\r\n  }\r\n\r\n  <table role=\"table\">\r\n    <thead>\r\n      <tr>\r\n        @for (column of columns(); track column.key) {\r\n          <th \r\n            [style.width]=\"column.width\"\r\n            [attr.aria-sort]=\"column.sortable ? (currentSort()?.key === column.key ? currentSort()?.direction : 'none') : null\"\r\n            [class.sortable]=\"column.sortable\" \r\n            (click)=\"handleSort(column)\"\r\n          >\r\n            <div class=\"th-content\">\r\n              {{ column.label }}\r\n              @if (column.sortable) {\r\n                <i \r\n                  [class]=\"'ph ph-sort-' + (currentSort()?.key === column.key && currentSort()?.direction === 'desc' ? 'descending' : 'ascending')\"\r\n                  aria-hidden=\"true\">\r\n                </i>\r\n              }\r\n            </div>\r\n          </th>\r\n        }\r\n      </tr>\r\n    </thead>\r\n    \r\n    <tbody>\r\n      @if (loading()) {\r\n        <tr class=\"loading-row\">\r\n          <td [attr.colspan]=\"columns().length\">\r\n            <div class=\"loading-indicator\">\r\n              <div class=\"spinner\"></div>\r\n            </div>\r\n          </td>\r\n        </tr>\r\n      } @else if (filteredData().length === 0) {\r\n        <tr class=\"empty-row\">\r\n          <td [attr.colspan]=\"columns().length\">\r\n            {{ computedEmptyMessage() }}\r\n          </td>\r\n        </tr>\r\n      } @else {\r\n        @for (row of filteredData(); track row.id) {\r\n          <tr (click)=\"handleRowClick(row)\">\r\n            @for (column of columns(); track column.key) {\r\n              <td>\r\n                @if (column.template) {\r\n                  <ng-container \r\n                    [ngTemplateOutlet]=\"column.template\"\r\n                    [ngTemplateOutletContext]=\"{ $implicit: row }\"\r\n                  ></ng-container>\r\n                } @else {\r\n                  {{ row[column.key] }}\r\n                }\r\n              </td>\r\n            }\r\n          </tr>\r\n        }\r\n      }\r\n    </tbody>\r\n  </table>\r\n</div>", styles: [".table-wrapper{width:100%;overflow-x:auto;background:var(--surface-card);border-radius:var(--border-radius)}.table-wrapper.outline{background:transparent;border:1px solid var(--surface-border)}table{width:100%;border-collapse:collapse;text-align:left}th,td{padding:var(--spacing-md);color:var(--text-color);border-bottom:1px solid var(--surface-border)}th{font-weight:600;color:var(--text-color);background:var(--surface-ground);white-space:nowrap;-webkit-user-select:none;user-select:none}th.sortable{cursor:pointer}th.sortable:hover{background:var(--surface-hover)}.th-content{display:flex;align-items:center;gap:var(--spacing-xs)}.th-content i{font-size:1rem;color:var(--primary-color);display:inline-block}.th-content i.asc:before{content:\"\\f35d\"}.th-content i.desc:before{content:\"\\f35e\"}.table-wrapper.striped tr:nth-child(2n){background:var(--surface-ground)}.table-wrapper.hoverable tr:hover{background:var(--surface-hover)}.table-wrapper.bordered th,.table-wrapper.bordered td{border:1px solid var(--surface-border)}.table-wrapper.small th,.table-wrapper.small td{padding:var(--spacing-sm);font-size:var(--font-size-sm)}.table-wrapper.large th,.table-wrapper.large td{padding:var(--spacing-lg);font-size:var(--font-size-lg)}.loading-row td,.empty-row td{text-align:center;padding:var(--spacing-xl);color:var(--text-color-secondary)}.loading-indicator{display:flex;justify-content:center;align-items:center}.spinner{width:24px;height:24px;border:2px solid var(--surface-border);border-top-color:var(--primary-color);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.global-search{position:relative;margin-bottom:var(--spacing-md)}.global-search input{width:100%;padding:var(--spacing-sm) var(--spacing-lg);padding-left:calc(var(--spacing-xl) + 4px);border:1px solid var(--surface-border);border-radius:var(--border-radius);background:var(--surface-card);color:var(--text-color);font-size:var(--font-size-base);transition:all .2s ease}.global-search input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 2px rgba(var(--primary-color-rgb),.2)}.global-search i{position:absolute;left:var(--spacing-md);top:50%;transform:translateY(-50%);color:var(--text-color-secondary);font-size:1.2rem}.sort-button{background:transparent;border:none;padding:var(--spacing-xs);cursor:pointer;color:var(--primary-color);border-radius:var(--border-radius);transition:all .2s ease}.sort-button:hover{background:rgba(var(--primary-color-rgb),.1)}.sort-button:focus{outline:none;box-shadow:0 0 0 2px rgba(var(--primary-color-rgb),.2)}@media (max-width: 768px){.table-wrapper{font-size:var(--font-size-sm)}th,td{padding:var(--spacing-sm)}.global-search{margin-bottom:var(--spacing-sm)}.global-search input{padding:var(--spacing-xs) var(--spacing-md);padding-left:calc(var(--spacing-lg) + 4px);font-size:var(--font-size-sm)}}@media (max-width: 480px){.table-wrapper{border-radius:0;margin:0 calc(-1 * var(--spacing-sm))}th,td{padding:var(--spacing-xs) var(--spacing-sm);font-size:var(--font-size-xs)}.th-content{gap:var(--spacing-xxs)}.th-content i{font-size:.875rem}.global-search input{padding:var(--spacing-xs);padding-left:var(--spacing-md);font-size:var(--font-size-xs)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: PshTableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'psh-table', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div \r\n  class=\"table-wrapper\"\r\n  [class.striped]=\"striped()\"\r\n  [class.hoverable]=\"hoverable()\"\r\n  [class.bordered]=\"bordered()\"\r\n  [class.small]=\"size() === 'small'\"\r\n  [class.large]=\"size() === 'large'\"\r\n  [class.outline]=\"variant() === 'outline'\"\r\n  [attr.data-state]=\"state()\"\r\n>\r\n  @if (globalSearch()) {\r\n    <div class=\"global-search\">\r\n      <input\r\n        type=\"text\"\r\n        [attr.placeholder]=\"globalSearchPlaceholder()\"\r\n        [value]=\"searchTerm()\"\r\n        (input)=\"handleGlobalSearch($event)\"\r\n        [attr.aria-label]=\"globalSearchPlaceholder()\"\r\n      />\r\n      <i class=\"ph ph-magnifying-glass\" aria-hidden=\"true\"></i>\r\n    </div>\r\n  }\r\n\r\n  <table role=\"table\">\r\n    <thead>\r\n      <tr>\r\n        @for (column of columns(); track column.key) {\r\n          <th \r\n            [style.width]=\"column.width\"\r\n            [attr.aria-sort]=\"column.sortable ? (currentSort()?.key === column.key ? currentSort()?.direction : 'none') : null\"\r\n            [class.sortable]=\"column.sortable\" \r\n            (click)=\"handleSort(column)\"\r\n          >\r\n            <div class=\"th-content\">\r\n              {{ column.label }}\r\n              @if (column.sortable) {\r\n                <i \r\n                  [class]=\"'ph ph-sort-' + (currentSort()?.key === column.key && currentSort()?.direction === 'desc' ? 'descending' : 'ascending')\"\r\n                  aria-hidden=\"true\">\r\n                </i>\r\n              }\r\n            </div>\r\n          </th>\r\n        }\r\n      </tr>\r\n    </thead>\r\n    \r\n    <tbody>\r\n      @if (loading()) {\r\n        <tr class=\"loading-row\">\r\n          <td [attr.colspan]=\"columns().length\">\r\n            <div class=\"loading-indicator\">\r\n              <div class=\"spinner\"></div>\r\n            </div>\r\n          </td>\r\n        </tr>\r\n      } @else if (filteredData().length === 0) {\r\n        <tr class=\"empty-row\">\r\n          <td [attr.colspan]=\"columns().length\">\r\n            {{ computedEmptyMessage() }}\r\n          </td>\r\n        </tr>\r\n      } @else {\r\n        @for (row of filteredData(); track row.id) {\r\n          <tr (click)=\"handleRowClick(row)\">\r\n            @for (column of columns(); track column.key) {\r\n              <td>\r\n                @if (column.template) {\r\n                  <ng-container \r\n                    [ngTemplateOutlet]=\"column.template\"\r\n                    [ngTemplateOutletContext]=\"{ $implicit: row }\"\r\n                  ></ng-container>\r\n                } @else {\r\n                  {{ row[column.key] }}\r\n                }\r\n              </td>\r\n            }\r\n          </tr>\r\n        }\r\n      }\r\n    </tbody>\r\n  </table>\r\n</div>", styles: [".table-wrapper{width:100%;overflow-x:auto;background:var(--surface-card);border-radius:var(--border-radius)}.table-wrapper.outline{background:transparent;border:1px solid var(--surface-border)}table{width:100%;border-collapse:collapse;text-align:left}th,td{padding:var(--spacing-md);color:var(--text-color);border-bottom:1px solid var(--surface-border)}th{font-weight:600;color:var(--text-color);background:var(--surface-ground);white-space:nowrap;-webkit-user-select:none;user-select:none}th.sortable{cursor:pointer}th.sortable:hover{background:var(--surface-hover)}.th-content{display:flex;align-items:center;gap:var(--spacing-xs)}.th-content i{font-size:1rem;color:var(--primary-color);display:inline-block}.th-content i.asc:before{content:\"\\f35d\"}.th-content i.desc:before{content:\"\\f35e\"}.table-wrapper.striped tr:nth-child(2n){background:var(--surface-ground)}.table-wrapper.hoverable tr:hover{background:var(--surface-hover)}.table-wrapper.bordered th,.table-wrapper.bordered td{border:1px solid var(--surface-border)}.table-wrapper.small th,.table-wrapper.small td{padding:var(--spacing-sm);font-size:var(--font-size-sm)}.table-wrapper.large th,.table-wrapper.large td{padding:var(--spacing-lg);font-size:var(--font-size-lg)}.loading-row td,.empty-row td{text-align:center;padding:var(--spacing-xl);color:var(--text-color-secondary)}.loading-indicator{display:flex;justify-content:center;align-items:center}.spinner{width:24px;height:24px;border:2px solid var(--surface-border);border-top-color:var(--primary-color);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.global-search{position:relative;margin-bottom:var(--spacing-md)}.global-search input{width:100%;padding:var(--spacing-sm) var(--spacing-lg);padding-left:calc(var(--spacing-xl) + 4px);border:1px solid var(--surface-border);border-radius:var(--border-radius);background:var(--surface-card);color:var(--text-color);font-size:var(--font-size-base);transition:all .2s ease}.global-search input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 2px rgba(var(--primary-color-rgb),.2)}.global-search i{position:absolute;left:var(--spacing-md);top:50%;transform:translateY(-50%);color:var(--text-color-secondary);font-size:1.2rem}.sort-button{background:transparent;border:none;padding:var(--spacing-xs);cursor:pointer;color:var(--primary-color);border-radius:var(--border-radius);transition:all .2s ease}.sort-button:hover{background:rgba(var(--primary-color-rgb),.1)}.sort-button:focus{outline:none;box-shadow:0 0 0 2px rgba(var(--primary-color-rgb),.2)}@media (max-width: 768px){.table-wrapper{font-size:var(--font-size-sm)}th,td{padding:var(--spacing-sm)}.global-search{margin-bottom:var(--spacing-sm)}.global-search input{padding:var(--spacing-xs) var(--spacing-md);padding-left:calc(var(--spacing-lg) + 4px);font-size:var(--font-size-sm)}}@media (max-width: 480px){.table-wrapper{border-radius:0;margin:0 calc(-1 * var(--spacing-sm))}th,td{padding:var(--spacing-xs) var(--spacing-sm);font-size:var(--font-size-xs)}.th-content{gap:var(--spacing-xxs)}.th-content i{font-size:.875rem}.global-search input{padding:var(--spacing-xs);padding-left:var(--spacing-md);font-size:var(--font-size-xs)}}\n"] }]
+        }] });
+
+/**
+ * Token d'injection pour la configuration globale des onglets
+ */
+const TABS_CONFIG = new InjectionToken('TABS_CONFIG', {
+    factory: () => ({
+        variant: 'default',
+        size: 'medium',
+        activeIndex: 0,
+        animated: true,
+        ariaLabels: {
+            tab: 'Onglet',
+            tablist: 'Liste d\'onglets',
+            tabpanel: 'Panneau d\'onglet',
+            selected: 'Sélectionné',
+            unselected: 'Non sélectionné'
+        }
+    })
+});
+/**
+ * Token d'injection pour les styles personnalisés
+ */
+const TABS_STYLES = new InjectionToken('TABS_STYLES', {
+    factory: () => []
+});
+class PshTabsComponent {
+    constructor() {
+        this.config = inject(TABS_CONFIG);
+        this.styles = inject(TABS_STYLES, { optional: true }) ?? [];
+        this.cdr = inject(ChangeDetectorRef);
+        this.observer = null;
+        this.elementRef = inject(ElementRef);
+        // Default tabs
+        this.defaultTabs = [
+            { header: 'Onglet 1', content: 'Contenu de l\'onglet 1' },
+            { header: 'Onglet 2', content: 'Contenu de l\'onglet 2' },
+            { header: 'Onglet 3', content: 'Contenu de l\'onglet 3' }
+        ];
+        // Model inputs with defaults from config
+        this.variant = model(this.config.variant ?? 'default');
+        this.size = model(this.config.size ?? 'medium');
+        this.activeIndex = model(this.config.activeIndex ?? 0);
+        this.animated = model(this.config.animated ?? true);
+        // State
+        this.tabsSignal = signal(this.defaultTabs);
+        this.tabs = computed(() => this.tabsSignal());
+        // Outputs
+        this.activeIndexChange = output();
+        // Computed values
+        this.customStyles = computed(() => Object.assign({}, ...this.styles));
+    }
+    ngAfterContentInit() {
+        // Observer les changements de contenu
+        this.observer = new MutationObserver(() => {
+            const tabs = Array.from(this.elementRef.nativeElement.querySelectorAll('[tabContent]'));
+            // N'utiliser les onglets personnalisés que si ils existent
+            if (tabs.length > 0) {
+                this.tabsSignal.set(tabs.map((el, i) => ({
+                    header: el.getAttribute('data-header') || `Onglet ${i + 1}`,
+                    icon: el.getAttribute('data-icon') || undefined,
+                    content: el.innerHTML
+                })));
+            }
+            this.cdr.markForCheck();
+        });
+        this.observer.observe(this.elementRef.nativeElement, {
+            childList: true,
+            subtree: true,
+            attributes: true,
+            attributeFilter: ['data-header', 'data-icon']
+        });
+        // Initialiser les onglets
+        this.observer.takeRecords();
+    }
+    ngOnDestroy() {
+        if (this.observer) {
+            this.observer.disconnect();
+            this.observer = null;
+        }
+    }
+    handleKeyDown(event, index) {
+        switch (event.key) {
+            case 'ArrowLeft':
+                event.preventDefault();
+                this.selectTab(index > 0 ? index - 1 : this.tabs().length - 1);
+                break;
+            case 'ArrowRight':
+                event.preventDefault();
+                this.selectTab(index < this.tabs().length - 1 ? index + 1 : 0);
+                break;
+            case 'Home':
+                event.preventDefault();
+                this.selectTab(0);
+                break;
+            case 'End':
+                event.preventDefault();
+                this.selectTab(this.tabs().length - 1);
+                break;
+        }
+    }
+    selectTab(index) {
+        if (this.activeIndex() !== index) {
+            this.activeIndex.set(index);
+            this.activeIndexChange.emit(index);
+            this.cdr.markForCheck();
+        }
+    }
+    /**
+     * Applique la configuration par défaut
+     */
+    static applyDefaults(component) {
+        const config = inject(TABS_CONFIG);
+        if (config.variant)
+            component.variant.set(config.variant);
+        if (config.size)
+            component.size.set(config.size);
+        if (config.activeIndex !== undefined)
+            component.activeIndex.set(config.activeIndex);
+        if (config.animated !== undefined)
+            component.animated.set(config.animated);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: PshTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: PshTabsComponent, isStandalone: true, selector: "psh-tabs", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null }, animated: { classPropertyName: "animated", publicName: "animated", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { variant: "variantChange", size: "sizeChange", activeIndex: "activeIndexChange", animated: "animatedChange", activeIndexChange: "activeIndexChange" }, ngImport: i0, template: "<div \r\n  class=\"tabs-container\"\r\n  [class.small]=\"size() === 'small'\"\r\n  [class.large]=\"size() === 'large'\"\r\n  [class.animated]=\"animated()\"\r\n  role=\"tablist\"\r\n>\r\n  <div class=\"tabs-header\" [class]=\"variant()\">\r\n    @for (tab of tabs(); track $index; let i = $index) {\r\n      <button\r\n        class=\"tab-button\"\r\n        role=\"tab\"\r\n        [class.active]=\"i === activeIndex()\"\r\n        [attr.aria-selected]=\"i === activeIndex()\"\r\n        [attr.aria-controls]=\"'panel-' + i\"\r\n        [attr.id]=\"'tab-' + i\"\r\n        [tabindex]=\"i === activeIndex() ? 0 : -1\"\r\n        (click)=\"$event.preventDefault(); selectTab(i)\"\r\n        (keydown)=\"handleKeyDown($event, i)\"\r\n      >\r\n        @if (tab.icon) {\r\n          <i class=\"ph ph-{{ tab.icon }}\" aria-hidden=\"true\"></i>\r\n        }\r\n        {{ tab.header }}\r\n      </button>\r\n    }\r\n  </div>\r\n\r\n  <div class=\"tabs-content\">\r\n    @for (tab of tabs(); track $index; let i = $index) {\r\n      <div\r\n        class=\"tab-panel\"\r\n        role=\"tabpanel\"\r\n        [class.active]=\"i === activeIndex()\"\r\n        [attr.aria-labelledby]=\"'tab-' + i\"\r\n        [attr.id]=\"'panel-' + i\"\r\n        [attr.tabindex]=\"i === activeIndex() ? 0 : -1\"\r\n        [attr.hidden]=\"i !== activeIndex()\"\r\n      >\r\n        @if (elementRef.nativeElement.querySelector('[tabContent]')) {\r\n          <ng-content select=\"[tabContent]\"></ng-content>\r\n        } @else {\r\n          <div [innerHTML]=\"tab.content\"></div>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n</div>", styles: [".tabs-container{display:flex;flex-direction:column;width:100%}.tabs-header{display:flex;gap:var(--spacing-xs);margin-bottom:var(--spacing-lg);border-bottom:1px solid var(--surface-border);position:relative}.tabs-header.pills{border-bottom:none;background:var(--surface-ground);padding:var(--spacing-xs);border-radius:var(--border-radius)}.tabs-header.underline{gap:var(--spacing-lg)}.tab-button{display:inline-flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);border:none;background:transparent;color:var(--text-color-secondary);font-family:inherit;font-size:var(--font-size-base);cursor:pointer;transition:all .2s ease;position:relative;white-space:nowrap}.tab-button:focus{outline:none;box-shadow:0 0 0 2px rgba(var(--primary-color-rgb),.2)}.tab-button:focus:not(:focus-visible){box-shadow:none}.default .tab-button{border-radius:var(--border-radius)}.default .tab-button:hover{background:var(--surface-hover);color:var(--text-color)}.default .tab-button.active{background:var(--primary-color);color:var(--primary-color-text)}.pills .tab-button{border-radius:var(--border-radius)}.pills .tab-button:hover{background:var(--surface-card);color:var(--text-color)}.pills .tab-button.active{background:var(--primary-color);color:var(--primary-color-text)}.underline .tab-button{padding-left:0;padding-right:0;padding-bottom:calc(var(--spacing-sm) + 2px);margin-bottom:-1px}.underline .tab-button:hover{color:var(--text-color)}.underline .tab-button.active{color:var(--primary-color);font-weight:500}.underline .tab-button.active:after{content:\"\";position:absolute;bottom:-1px;left:0;width:100%;height:2px;background:var(--primary-color);border-radius:var(--border-radius) var(--border-radius) 0 0}.tab-panel{display:none;animation:fadeIn .2s ease}.tab-panel:focus{outline:none}.tab-panel.active{display:block}.tabs-container.small .tab-button{padding:calc(var(--spacing-sm) * .75) var(--spacing-md);font-size:var(--font-size-sm)}.tabs-container.large .tab-button{padding:var(--spacing-md) var(--spacing-lg);font-size:var(--font-size-lg)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: PshTabsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'psh-tabs', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div \r\n  class=\"tabs-container\"\r\n  [class.small]=\"size() === 'small'\"\r\n  [class.large]=\"size() === 'large'\"\r\n  [class.animated]=\"animated()\"\r\n  role=\"tablist\"\r\n>\r\n  <div class=\"tabs-header\" [class]=\"variant()\">\r\n    @for (tab of tabs(); track $index; let i = $index) {\r\n      <button\r\n        class=\"tab-button\"\r\n        role=\"tab\"\r\n        [class.active]=\"i === activeIndex()\"\r\n        [attr.aria-selected]=\"i === activeIndex()\"\r\n        [attr.aria-controls]=\"'panel-' + i\"\r\n        [attr.id]=\"'tab-' + i\"\r\n        [tabindex]=\"i === activeIndex() ? 0 : -1\"\r\n        (click)=\"$event.preventDefault(); selectTab(i)\"\r\n        (keydown)=\"handleKeyDown($event, i)\"\r\n      >\r\n        @if (tab.icon) {\r\n          <i class=\"ph ph-{{ tab.icon }}\" aria-hidden=\"true\"></i>\r\n        }\r\n        {{ tab.header }}\r\n      </button>\r\n    }\r\n  </div>\r\n\r\n  <div class=\"tabs-content\">\r\n    @for (tab of tabs(); track $index; let i = $index) {\r\n      <div\r\n        class=\"tab-panel\"\r\n        role=\"tabpanel\"\r\n        [class.active]=\"i === activeIndex()\"\r\n        [attr.aria-labelledby]=\"'tab-' + i\"\r\n        [attr.id]=\"'panel-' + i\"\r\n        [attr.tabindex]=\"i === activeIndex() ? 0 : -1\"\r\n        [attr.hidden]=\"i !== activeIndex()\"\r\n      >\r\n        @if (elementRef.nativeElement.querySelector('[tabContent]')) {\r\n          <ng-content select=\"[tabContent]\"></ng-content>\r\n        } @else {\r\n          <div [innerHTML]=\"tab.content\"></div>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n</div>", styles: [".tabs-container{display:flex;flex-direction:column;width:100%}.tabs-header{display:flex;gap:var(--spacing-xs);margin-bottom:var(--spacing-lg);border-bottom:1px solid var(--surface-border);position:relative}.tabs-header.pills{border-bottom:none;background:var(--surface-ground);padding:var(--spacing-xs);border-radius:var(--border-radius)}.tabs-header.underline{gap:var(--spacing-lg)}.tab-button{display:inline-flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);border:none;background:transparent;color:var(--text-color-secondary);font-family:inherit;font-size:var(--font-size-base);cursor:pointer;transition:all .2s ease;position:relative;white-space:nowrap}.tab-button:focus{outline:none;box-shadow:0 0 0 2px rgba(var(--primary-color-rgb),.2)}.tab-button:focus:not(:focus-visible){box-shadow:none}.default .tab-button{border-radius:var(--border-radius)}.default .tab-button:hover{background:var(--surface-hover);color:var(--text-color)}.default .tab-button.active{background:var(--primary-color);color:var(--primary-color-text)}.pills .tab-button{border-radius:var(--border-radius)}.pills .tab-button:hover{background:var(--surface-card);color:var(--text-color)}.pills .tab-button.active{background:var(--primary-color);color:var(--primary-color-text)}.underline .tab-button{padding-left:0;padding-right:0;padding-bottom:calc(var(--spacing-sm) + 2px);margin-bottom:-1px}.underline .tab-button:hover{color:var(--text-color)}.underline .tab-button.active{color:var(--primary-color);font-weight:500}.underline .tab-button.active:after{content:\"\";position:absolute;bottom:-1px;left:0;width:100%;height:2px;background:var(--primary-color);border-radius:var(--border-radius) var(--border-radius) 0 0}.tab-panel{display:none;animation:fadeIn .2s ease}.tab-panel:focus{outline:none}.tab-panel.active{display:block}.tabs-container.small .tab-button{padding:calc(var(--spacing-sm) * .75) var(--spacing-md);font-size:var(--font-size-sm)}.tabs-container.large .tab-button{padding:var(--spacing-md) var(--spacing-lg);font-size:var(--font-size-lg)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"] }]
+        }] });
+
+class ToastService {
+    constructor() {
+        this.toasts = signal([]);
+        this.positionSignal = signal('top-right');
+        this.config = inject(TOAST_CONFIG);
+        this.customStyles = inject(TOAST_STYLES, { optional: true }) ?? [];
+    }
+    /**
+     * Récupère la configuration du toast
+     */
+    getConfig() {
+        return this.config;
+    }
+    /**
+     * Récupère les styles personnalisés
+     */
+    getCustomStyles() {
+        return this.customStyles;
+    }
+    /**
+     * Récupère la position actuelle
+     */
+    getPosition() {
+        return this.positionSignal;
+    }
+    /**
+     * Récupère les toasts actifs
+     */
+    getToasts() {
+        return this.toasts;
+    }
+    /**
+     * Affiche un nouveau toast
+     */
+    show(toast) {
+        const id = Math.random().toString(36).substring(7);
+        const newToast = {
+            ...toast,
+            id,
+            type: toast.type || 'info',
+            duration: toast.duration ?? this.config.duration ?? 5000
+        };
+        // Limiter le nombre de toasts
+        const maxToasts = this.config.maxToasts ?? 5;
+        this.toasts.update(toasts => {
+            const currentToasts = [...toasts];
+            while (currentToasts.length >= maxToasts) {
+                currentToasts.shift();
+            }
+            return [...currentToasts, newToast];
+        });
+        // Auto-suppression si durée > 0
+        if (newToast.duration && newToast.duration > 0) {
+            setTimeout(() => this.remove(id), newToast.duration);
+        }
+        return id;
+    }
+    /**
+     * Supprime un toast
+     */
+    remove(id) {
+        this.toasts.update(toasts => toasts.filter(t => t.id !== id));
+    }
+    /**
+     * Change la position des toasts
+     */
+    setPosition(position) {
+        this.positionSignal.set(position);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ToastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ToastService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ToastService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+/**
+ * Token d'injection pour la configuration globale des toasts
+ */
+const TOAST_CONFIG = new InjectionToken('TOAST_CONFIG', {
+    factory: () => ({
+        position: 'top-right',
+        duration: 5000,
+        maxToasts: 5,
+        pauseOnHover: true,
+        showIcon: true,
+        showCloseButton: true
+    })
+});
+/**
+ * Token d'injection pour les styles personnalisés
+ */
+const TOAST_STYLES = new InjectionToken('TOAST_STYLES', {
+    factory: () => []
+});
+class ToastComponent {
+    constructor() {
+        this.toastService = inject(ToastService);
+        this.config = inject(TOAST_CONFIG);
+        this.styles = inject(TOAST_STYLES, { optional: true }) ?? [];
+        // Computed values
+        this.toasts = computed(() => this.toastService.getToasts()());
+        this.position = computed(() => this.toastService.getPosition()());
+        this.customStyles = computed(() => Object.assign({}, ...this.styles));
+    }
+    getPositionClass() {
+        return `${this.position()}`;
+    }
+    handleDismiss(id) {
+        if (id) {
+            this.toastService.remove(id);
+        }
+    }
+    getDefaultIcon(type) {
+        const icons = {
+            info: 'info',
+            success: 'check-circle',
+            warning: 'warning',
+            danger: 'warning-octagon'
+        };
+        return icons[type] || 'info';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: ToastComponent, isStandalone: true, selector: "psh-toast", ngImport: i0, template: "<div class=\"toast-container\" [class]=\"getPositionClass()\">\r\n  @for (toast of toasts(); track toast.id) {\r\n    <div \r\n      class=\"toast-item\"\r\n      [class]=\"toast.type\"\r\n      role=\"alert\"\r\n      aria-live=\"polite\"\r\n      [style.--progress-duration]=\"toast.duration + 'ms'\"\r\n    >\r\n      <i \r\n        class=\"ph ph-{{ toast.icon || getDefaultIcon(toast.type) }} toast-icon\"\r\n        aria-hidden=\"true\"\r\n      ></i>\r\n      <div class=\"toast-content\">\r\n        {{ toast.message }}\r\n      </div>\r\n      <button\r\n        type=\"button\"\r\n        class=\"toast-close\"\r\n        (click)=\"handleDismiss(toast.id)\"\r\n        aria-label=\"Fermer la notification\"\r\n      >\r\n        <i class=\"ph ph-x\" aria-hidden=\"true\"></i>\r\n      </button>\r\n    </div>\r\n  }\r\n</div>", styles: [".toast-container{position:fixed;display:flex;flex-direction:column;gap:var(--spacing-sm);padding:var(--spacing-md);z-index:9999;pointer-events:none;max-width:100%}.toast-item{min-width:var(--toast-min-width);max-width:var(--toast-max-width);padding:var(--spacing-md);background:var(--surface-0);border-radius:var(--border-radius-lg);box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:var(--spacing-md);animation:slideIn .3s ease;position:relative;overflow:hidden;pointer-events:all;border:1px solid var(--surface-border);width:100%}.toast-item:after{content:\"\";position:absolute;bottom:0;left:0;height:3px;background:currentColor;opacity:.2;animation:progress linear forwards}.toast-item.info{background:var(--surface-0);border-color:var(--primary-color);color:var(--primary-color);box-shadow:0 4px 12px rgba(var(--primary-color-rgb),.1)}.toast-item.success{background:var(--surface-0);border-color:var(--success-color);color:var(--success-color);box-shadow:0 4px 12px rgba(var(--success-color-rgb),.1)}.toast-item.warning{background:var(--surface-0);border-color:var(--warning-color);color:var(--warning-color);box-shadow:0 4px 12px rgba(var(--warning-color-rgb),.1)}.toast-item.danger{background:var(--surface-0);border-color:var(--danger-color);color:var(--danger-color);box-shadow:0 4px 12px rgba(var(--danger-color-rgb),.1)}.toast-icon{font-size:1.5rem;flex-shrink:0;display:flex;align-items:center;justify-content:center;width:24px;height:24px}.toast-content{flex:1;color:inherit;font-size:var(--font-size-base);line-height:var(--line-height-relaxed);font-weight:500;margin:0;padding-right:var(--spacing-md);overflow:hidden;text-overflow:ellipsis}.toast-close{background:transparent;border:none;color:currentColor;padding:var(--spacing-xs);cursor:pointer;opacity:.7;transition:all .2s ease;border-radius:var(--border-radius);display:flex;align-items:center;justify-content:center;margin:calc(var(--spacing-xs) * -1);flex-shrink:0;width:28px;height:28px}.toast-close:hover{opacity:1;background:#0000000d}.toast-close:focus{outline:none;box-shadow:0 0 0 2px rgba(var(--primary-color-rgb),.2)}.toast-close i{font-size:1.1rem}.top-right{top:0;right:0}.top-left{top:0;left:0}.bottom-right{bottom:0;right:0}.bottom-left{bottom:0;left:0}@keyframes slideIn{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}@keyframes progress{0%{width:100%}to{width:0%}}@media (max-width: 576px){.toast-container{padding:var(--spacing-sm);width:100%;left:0!important;right:0!important}.toast-item{min-width:0;margin:0 var(--spacing-sm);max-width:calc(100vw - var(--spacing-md))}.toast-content{font-size:var(--font-size-sm);padding-right:var(--spacing-sm)}.toast-close{width:24px;height:24px}.toast-close i{font-size:1rem}}@media (max-width: 480px){.toast-container{padding:var(--spacing-xs)}.toast-item{margin:0 var(--spacing-xs);padding:var(--spacing-sm)}.toast-icon{width:20px;height:20px;font-size:1.25rem}.toast-content{font-size:var(--font-size-xs)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ToastComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'psh-toast', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"toast-container\" [class]=\"getPositionClass()\">\r\n  @for (toast of toasts(); track toast.id) {\r\n    <div \r\n      class=\"toast-item\"\r\n      [class]=\"toast.type\"\r\n      role=\"alert\"\r\n      aria-live=\"polite\"\r\n      [style.--progress-duration]=\"toast.duration + 'ms'\"\r\n    >\r\n      <i \r\n        class=\"ph ph-{{ toast.icon || getDefaultIcon(toast.type) }} toast-icon\"\r\n        aria-hidden=\"true\"\r\n      ></i>\r\n      <div class=\"toast-content\">\r\n        {{ toast.message }}\r\n      </div>\r\n      <button\r\n        type=\"button\"\r\n        class=\"toast-close\"\r\n        (click)=\"handleDismiss(toast.id)\"\r\n        aria-label=\"Fermer la notification\"\r\n      >\r\n        <i class=\"ph ph-x\" aria-hidden=\"true\"></i>\r\n      </button>\r\n    </div>\r\n  }\r\n</div>", styles: [".toast-container{position:fixed;display:flex;flex-direction:column;gap:var(--spacing-sm);padding:var(--spacing-md);z-index:9999;pointer-events:none;max-width:100%}.toast-item{min-width:var(--toast-min-width);max-width:var(--toast-max-width);padding:var(--spacing-md);background:var(--surface-0);border-radius:var(--border-radius-lg);box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:var(--spacing-md);animation:slideIn .3s ease;position:relative;overflow:hidden;pointer-events:all;border:1px solid var(--surface-border);width:100%}.toast-item:after{content:\"\";position:absolute;bottom:0;left:0;height:3px;background:currentColor;opacity:.2;animation:progress linear forwards}.toast-item.info{background:var(--surface-0);border-color:var(--primary-color);color:var(--primary-color);box-shadow:0 4px 12px rgba(var(--primary-color-rgb),.1)}.toast-item.success{background:var(--surface-0);border-color:var(--success-color);color:var(--success-color);box-shadow:0 4px 12px rgba(var(--success-color-rgb),.1)}.toast-item.warning{background:var(--surface-0);border-color:var(--warning-color);color:var(--warning-color);box-shadow:0 4px 12px rgba(var(--warning-color-rgb),.1)}.toast-item.danger{background:var(--surface-0);border-color:var(--danger-color);color:var(--danger-color);box-shadow:0 4px 12px rgba(var(--danger-color-rgb),.1)}.toast-icon{font-size:1.5rem;flex-shrink:0;display:flex;align-items:center;justify-content:center;width:24px;height:24px}.toast-content{flex:1;color:inherit;font-size:var(--font-size-base);line-height:var(--line-height-relaxed);font-weight:500;margin:0;padding-right:var(--spacing-md);overflow:hidden;text-overflow:ellipsis}.toast-close{background:transparent;border:none;color:currentColor;padding:var(--spacing-xs);cursor:pointer;opacity:.7;transition:all .2s ease;border-radius:var(--border-radius);display:flex;align-items:center;justify-content:center;margin:calc(var(--spacing-xs) * -1);flex-shrink:0;width:28px;height:28px}.toast-close:hover{opacity:1;background:#0000000d}.toast-close:focus{outline:none;box-shadow:0 0 0 2px rgba(var(--primary-color-rgb),.2)}.toast-close i{font-size:1.1rem}.top-right{top:0;right:0}.top-left{top:0;left:0}.bottom-right{bottom:0;right:0}.bottom-left{bottom:0;left:0}@keyframes slideIn{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}@keyframes progress{0%{width:100%}to{width:0%}}@media (max-width: 576px){.toast-container{padding:var(--spacing-sm);width:100%;left:0!important;right:0!important}.toast-item{min-width:0;margin:0 var(--spacing-sm);max-width:calc(100vw - var(--spacing-md))}.toast-content{font-size:var(--font-size-sm);padding-right:var(--spacing-sm)}.toast-close{width:24px;height:24px}.toast-close i{font-size:1rem}}@media (max-width: 480px){.toast-container{padding:var(--spacing-xs)}.toast-item{margin:0 var(--spacing-xs);padding:var(--spacing-sm)}.toast-icon{width:20px;height:20px;font-size:1.25rem}.toast-content{font-size:var(--font-size-xs)}}\n"] }]
+        }] });
+
+/**
+ * Token d'injection pour la configuration globale des tooltips
+ */
+const TOOLTIP_CONFIG = new InjectionToken('TOOLTIP_CONFIG', {
+    factory: () => ({
+        variant: 'dark',
+        position: 'top',
+        showDelay: 200,
+        hideDelay: 100,
+        maxWidth: 200,
+        defaultContent: 'TOOLTIP.DEFAULT.CONTENT'
+    })
+});
+/**
+ * Token d'injection pour les styles personnalisés
+ */
+const TOOLTIP_STYLES = new InjectionToken('TOOLTIP_STYLES', {
+    factory: () => [{}]
+});
+class PshTooltipComponent {
+    constructor() {
+        this.config = inject(TOOLTIP_CONFIG);
+        this.cdr = inject(ChangeDetectorRef);
+        this.elementRef = inject(ElementRef);
+        this.styles = inject(TOOLTIP_STYLES, { optional: true }) ?? [];
+        // Model inputs with defaults from config
+        this.variant = model(this.config.variant ?? 'dark');
+        this.position = model(this.config.position ?? 'top');
+        this.showDelay = model(this.config.showDelay ?? 200);
+        this.hideDelay = model(this.config.hideDelay ?? 100);
+        this.maxWidth = model(this.config.maxWidth ?? 200);
+        // Regular inputs
+        this.content = input('Information contextuelle');
+        // State
+        this.isVisible = false;
+        this.showTimeout = null;
+        this.hideTimeout = null;
+        // Computed values
+        this.customStyles = computed(() => Object.assign({}, ...this.styles));
+    }
+    show() {
+        // Clear any existing hide timeout
+        if (this.hideTimeout) {
+            clearTimeout(this.hideTimeout);
+            this.hideTimeout = null;
+        }
+        // Only start show timeout if tooltip isn't already visible
+        if (!this.isVisible && !this.showTimeout) {
+            this.showTimeout = setTimeout(() => {
+                this.isVisible = true;
+                this.showTimeout = null;
+                this.cdr.markForCheck();
+            }, this.showDelay());
+        }
+    }
+    hide() {
+        // Clear any existing show timeout
+        if (this.showTimeout) {
+            clearTimeout(this.showTimeout);
+            this.showTimeout = null;
+        }
+        // Only start hide timeout if tooltip is visible
+        if (this.isVisible && !this.hideTimeout) {
+            this.hideTimeout = setTimeout(() => {
+                this.isVisible = false;
+                this.hideTimeout = null;
+                this.cdr.markForCheck();
+            }, this.hideDelay());
+        }
+    }
+    onFocusIn() {
+        this.show();
+    }
+    onFocusOut() {
+        this.hide();
+    }
+    ngOnDestroy() {
+        // Clean up any pending timeouts
+        if (this.showTimeout) {
+            clearTimeout(this.showTimeout);
+        }
+        if (this.hideTimeout) {
+            clearTimeout(this.hideTimeout);
+        }
+    }
+    /**
+     * Applique la configuration par défaut
+     */
+    static applyDefaults(component) {
+        const config = inject(TOOLTIP_CONFIG);
+        if (config.variant)
+            component.variant.set(config.variant);
+        if (config.position)
+            component.position.set(config.position);
+        if (config.showDelay !== undefined)
+            component.showDelay.set(config.showDelay);
+        if (config.hideDelay !== undefined)
+            component.hideDelay.set(config.hideDelay);
+        if (config.maxWidth !== undefined)
+            component.maxWidth.set(config.maxWidth);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: PshTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: PshTooltipComponent, isStandalone: true, selector: "psh-tooltip", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, showDelay: { classPropertyName: "showDelay", publicName: "showDelay", isSignal: true, isRequired: false, transformFunction: null }, hideDelay: { classPropertyName: "hideDelay", publicName: "hideDelay", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { variant: "variantChange", position: "positionChange", showDelay: "showDelayChange", hideDelay: "hideDelayChange", maxWidth: "maxWidthChange" }, host: { listeners: { "mouseenter": "show()", "mouseleave": "hide()" } }, ngImport: i0, template: "<div \r\n  class=\"tooltip-wrapper\"\r\n  (mouseenter)=\"show()\"\r\n  (mouseleave)=\"hide()\"\r\n  (focusin)=\"show()\"\r\n  (focusout)=\"hide()\"\r\n>\r\n  <ng-content></ng-content>\r\n  \r\n  @if (isVisible) {\r\n    <div \r\n      class=\"tooltip\"\r\n      [class]=\"position()\"\r\n      [class.light]=\"variant() === 'light'\"\r\n      [class.dark]=\"variant() === 'dark'\"\r\n      [style.max-width.px]=\"maxWidth()\"\r\n      role=\"tooltip\"\r\n    >\r\n      {{ content() }}\r\n      <div class=\"tooltip-arrow\"></div>\r\n    </div>\r\n  }\r\n</div>", styles: [".tooltip-wrapper{position:relative;display:inline-block}.tooltip{position:absolute;padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--border-radius);font-size:var(--font-size-sm);line-height:var(--line-height-tight);white-space:normal;word-wrap:break-word;z-index:1000;max-width:200px;animation:tooltipFadeIn .2s ease}.tooltip.dark{background:var(--surface-800);color:var(--surface-0);border:1px solid var(--surface-700)}.tooltip.light{background:var(--surface-card);color:var(--text-color);border:1px solid var(--surface-border);box-shadow:var(--shadow-sm)}.tooltip.top{bottom:100%;left:50%;transform:translate(-50%) translateY(-8px)}.tooltip.bottom{top:100%;left:50%;transform:translate(-50%) translateY(8px)}.tooltip.left{right:100%;top:50%;transform:translateY(-50%) translate(-8px)}.tooltip.right{left:100%;top:50%;transform:translateY(-50%) translate(8px)}.tooltip-arrow{position:absolute;width:8px;height:8px;transform:rotate(45deg)}.tooltip.dark .tooltip-arrow{background:var(--surface-800);border:inherit}.tooltip.light .tooltip-arrow{background:var(--surface-card);border:inherit}.tooltip.top .tooltip-arrow{bottom:-4px;left:50%;margin-left:-4px;border-top:none;border-left:none}.tooltip.bottom .tooltip-arrow{top:-4px;left:50%;margin-left:-4px;border-bottom:none;border-right:none}.tooltip.left .tooltip-arrow{right:-4px;top:50%;margin-top:-4px;border-left:none;border-bottom:none}.tooltip.right .tooltip-arrow{left:-4px;top:50%;margin-top:-4px;border-right:none;border-top:none}@keyframes tooltipFadeIn{0%{opacity:0}to{opacity:1}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: PshTooltipComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'psh-tooltip', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div \r\n  class=\"tooltip-wrapper\"\r\n  (mouseenter)=\"show()\"\r\n  (mouseleave)=\"hide()\"\r\n  (focusin)=\"show()\"\r\n  (focusout)=\"hide()\"\r\n>\r\n  <ng-content></ng-content>\r\n  \r\n  @if (isVisible) {\r\n    <div \r\n      class=\"tooltip\"\r\n      [class]=\"position()\"\r\n      [class.light]=\"variant() === 'light'\"\r\n      [class.dark]=\"variant() === 'dark'\"\r\n      [style.max-width.px]=\"maxWidth()\"\r\n      role=\"tooltip\"\r\n    >\r\n      {{ content() }}\r\n      <div class=\"tooltip-arrow\"></div>\r\n    </div>\r\n  }\r\n</div>", styles: [".tooltip-wrapper{position:relative;display:inline-block}.tooltip{position:absolute;padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--border-radius);font-size:var(--font-size-sm);line-height:var(--line-height-tight);white-space:normal;word-wrap:break-word;z-index:1000;max-width:200px;animation:tooltipFadeIn .2s ease}.tooltip.dark{background:var(--surface-800);color:var(--surface-0);border:1px solid var(--surface-700)}.tooltip.light{background:var(--surface-card);color:var(--text-color);border:1px solid var(--surface-border);box-shadow:var(--shadow-sm)}.tooltip.top{bottom:100%;left:50%;transform:translate(-50%) translateY(-8px)}.tooltip.bottom{top:100%;left:50%;transform:translate(-50%) translateY(8px)}.tooltip.left{right:100%;top:50%;transform:translateY(-50%) translate(-8px)}.tooltip.right{left:100%;top:50%;transform:translateY(-50%) translate(8px)}.tooltip-arrow{position:absolute;width:8px;height:8px;transform:rotate(45deg)}.tooltip.dark .tooltip-arrow{background:var(--surface-800);border:inherit}.tooltip.light .tooltip-arrow{background:var(--surface-card);border:inherit}.tooltip.top .tooltip-arrow{bottom:-4px;left:50%;margin-left:-4px;border-top:none;border-left:none}.tooltip.bottom .tooltip-arrow{top:-4px;left:50%;margin-left:-4px;border-bottom:none;border-right:none}.tooltip.left .tooltip-arrow{right:-4px;top:50%;margin-top:-4px;border-left:none;border-bottom:none}.tooltip.right .tooltip-arrow{left:-4px;top:50%;margin-top:-4px;border-right:none;border-top:none}@keyframes tooltipFadeIn{0%{opacity:0}to{opacity:1}}\n"] }]
+        }], propDecorators: { show: [{
+                type: HostListener,
+                args: ['mouseenter']
+            }], hide: [{
+                type: HostListener,
+                args: ['mouseleave']
+            }] } });
+
+// Clé pour le stockage localStorage
+const THEME_STORAGE_KEY = 'helix-theme-preference';
+const INSURER_CONTEXT_SERVICE = new InjectionToken('INSURER_CONTEXT_SERVICE');
+const DEFAULT_THEME_COLORS = {
+    primary: '#0F02C4',
+    secondary: '#7B3AEC'
+};
+/**
+ * Convertit une couleur hexadécimale en RGB
+ */
+function hexToRgb(hex) {
+    // Nettoyer le hex code (enlever le # si présent)
+    hex = hex.replace(/^#/, '');
+    // S'assurer que la longueur est correcte
+    if (![3, 6].includes(hex.length)) {
+        console.error(`Invalid hex color: ${hex}`);
+        return null;
+    }
+    // Si c'est un format court (3 chiffres), le convertir en format long (6 chiffres)
+    if (hex.length === 3) {
+        hex = hex.split('').map(char => char + char).join('');
+    }
+    // Extraire les composantes RGB
+    const r = parseInt(hex.substring(0, 2), 16);
+    const g = parseInt(hex.substring(2, 4), 16);
+    const b = parseInt(hex.substring(4, 6), 16);
+    return { r, g, b };
+}
+/**
+ * Convertit des valeurs RGB en couleur hexadécimale
+ */
+function rgbToHex(r, g, b) {
+    return '#' + [r, g, b]
+        .map(x => {
+        const hex = Math.max(0, Math.min(255, Math.round(x))).toString(16);
+        return hex.length === 1 ? '0' + hex : hex;
+    })
+        .join('');
+}
+/**
+ * Éclaircit une couleur hexadécimale d'un certain pourcentage
+ */
+function lightenColor(hex, percent) {
+    const rgb = hexToRgb(hex);
+    if (!rgb)
+        return hex;
+    const { r, g, b } = rgb;
+    const amount = percent / 100;
+    const newR = r + (255 - r) * amount;
+    const newG = g + (255 - g) * amount;
+    const newB = b + (255 - b) * amount;
+    return rgbToHex(newR, newG, newB);
+}
+/**
+ * Assombrit une couleur hexadécimale d'un certain pourcentage
+ */
+function darkenColor(hex, percent) {
+    const rgb = hexToRgb(hex);
+    if (!rgb)
+        return hex;
+    const { r, g, b } = rgb;
+    const amount = percent / 100;
+    const newR = r * (1 - amount);
+    const newG = g * (1 - amount);
+    const newB = b * (1 - amount);
+    return rgbToHex(newR, newG, newB);
+}
+class ThemeService {
+    constructor() {
+        this.insurerContext = inject(INSURER_CONTEXT_SERVICE, { optional: true });
+        this.isDarkThemeSignal = signal(false);
+        this.themeNameSignal = signal('light');
+        this.lastChangeSignal = signal(new Date());
+        this.isDarkTheme = computed(() => this.isDarkThemeSignal());
+        this.themeName = computed(() => this.themeNameSignal());
+        this.themeInfo = computed(() => ({
+            isDark: this.isDarkTheme(),
+            name: this.themeName(),
+            lastChange: this.lastChangeSignal()
+        }));
+        // Initialiser le thème en fonction de la préférence stockée ou par défaut 'light'
+        this.initializeTheme();
+        // Listen for system theme changes (commented out to keep user control)
+        // window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
+        //   this.setDarkTheme(e.matches);
+        // });
+        // Attendre que l'injection soit prête avant d'appliquer le thème
+        setTimeout(() => {
+            this.applyInsurerTheme();
+        }, 0);
+    }
+    setDarkTheme(isDark) {
+        document.documentElement.setAttribute('data-theme', isDark ? 'dark' : 'light');
+        this.isDarkThemeSignal.set(isDark);
+        this.themeNameSignal.set(isDark ? 'dark' : 'light');
+        this.lastChangeSignal.set(new Date());
+        // Réappliquer les couleurs de l'assureur après le changement de thème
+        this.applyInsurerTheme();
+    }
+    toggleTheme() {
+        this.setDarkTheme(!this.isDarkThemeSignal());
+    }
+    updateTheme(name) {
+        this.themeNameSignal.set(name);
+        this.isDarkThemeSignal.set(name === 'dark');
+        this.lastChangeSignal.set(new Date());
+        // Sauvegarder la préférence dans localStorage
+        this.saveThemePreference(name);
+        // Réappliquer les couleurs de l'assureur après le changement de thème
+        this.applyInsurerTheme();
+    }
+    /**
+     * Applique les couleurs de l'assureur aux variables CSS
+     */
+    applyInsurerTheme() {
+        // Debug: vérifier si le contexte assureur est disponible
+        if (!this.insurerContext) {
+            console.warn('InsurerContext service not available, using default theme colors');
+        }
+        // Utiliser les couleurs de l'assureur si disponibles, sinon les couleurs par défaut
+        const primaryColor = this.insurerContext?.primaryColor() || DEFAULT_THEME_COLORS.primary;
+        const secondaryColor = this.insurerContext?.secondaryColor() || DEFAULT_THEME_COLORS.secondary;
+        // Debug: afficher les couleurs utilisées
+        console.log('Applying theme colors:', {
+            primaryColor,
+            secondaryColor,
+            hasInsurerContext: !!this.insurerContext,
+            insurerPrimary: this.insurerContext?.primaryColor(),
+            insurerSecondary: this.insurerContext?.secondaryColor()
+        });
+        if (primaryColor) {
+            try {
+                // Générer les variantes de couleurs
+                const primaryColorLight = lightenColor(primaryColor, 20);
+                const primaryColorLighter = lightenColor(primaryColor, 40);
+                const primaryColorDark = darkenColor(primaryColor, 20);
+                const primaryColorDarker = darkenColor(primaryColor, 40);
+                // Convertir en RGB pour les besoins de transparence
+                const rgb = hexToRgb(primaryColor);
+                const primaryColorRgb = rgb ? `${rgb.r}, ${rgb.g}, ${rgb.b}` : null;
+                // Déterminer si le texte sur cette couleur doit être clair ou foncé
+                // Une formule simple: luminosité = 0.299*R + 0.587*G + 0.114*B
+                let primaryColorText = '#FFFFFF'; // Par défaut blanc
+                if (rgb) {
+                    const luminance = (0.299 * rgb.r + 0.587 * rgb.g + 0.114 * rgb.b) / 255;
+                    if (luminance > 0.5) {
+                        primaryColorText = '#000000'; // Texte noir pour les couleurs claires
+                    }
+                }
+                // Appliquer toutes les variantes
+                document.documentElement.style.setProperty('--insurer-primary-color', primaryColor);
+                document.documentElement.style.setProperty('--insurer-primary-color-light', primaryColorLight);
+                document.documentElement.style.setProperty('--insurer-primary-color-lighter', primaryColorLighter);
+                document.documentElement.style.setProperty('--insurer-primary-color-dark', primaryColorDark);
+                document.documentElement.style.setProperty('--insurer-primary-color-darker', primaryColorDarker);
+                document.documentElement.style.setProperty('--insurer-primary-color-text', primaryColorText);
+                if (primaryColorRgb) {
+                    document.documentElement.style.setProperty('--insurer-primary-color-rgb', primaryColorRgb);
+                }
+                console.log(`Applied insurer theme with primary color: ${primaryColor}`);
+                // Appliquer la couleur secondaire
+                if (secondaryColor) {
+                    try {
+                        // Générer les variantes de couleurs secondaires
+                        const secondaryColorLight = lightenColor(secondaryColor, 20);
+                        const secondaryColorLighter = lightenColor(secondaryColor, 40);
+                        const secondaryColorDark = darkenColor(secondaryColor, 20);
+                        const secondaryColorDarker = darkenColor(secondaryColor, 40);
+                        // Convertir en RGB pour les besoins de transparence
+                        const rgb = hexToRgb(secondaryColor);
+                        const secondaryColorRgb = rgb ? `${rgb.r}, ${rgb.g}, ${rgb.b}` : null;
+                        // Déterminer si le texte sur cette couleur doit être clair ou foncé
+                        let secondaryColorText = '#FFFFFF'; // Par défaut blanc
+                        if (rgb) {
+                            const luminance = (0.299 * rgb.r + 0.587 * rgb.g + 0.114 * rgb.b) / 255;
+                            if (luminance > 0.5) {
+                                secondaryColorText = '#000000'; // Texte noir pour les couleurs claires
+                            }
+                        }
+                        // Appliquer toutes les variantes
+                        document.documentElement.style.setProperty('--insurer-secondary-color', secondaryColor);
+                        document.documentElement.style.setProperty('--insurer-secondary-color-light', secondaryColorLight);
+                        document.documentElement.style.setProperty('--insurer-secondary-color-lighter', secondaryColorLighter);
+                        document.documentElement.style.setProperty('--insurer-secondary-color-dark', secondaryColorDark);
+                        document.documentElement.style.setProperty('--insurer-secondary-color-darker', secondaryColorDarker);
+                        document.documentElement.style.setProperty('--insurer-secondary-color-text', secondaryColorText);
+                        if (secondaryColorRgb) {
+                            document.documentElement.style.setProperty('--insurer-secondary-color-rgb', secondaryColorRgb);
+                        }
+                        console.log(`Applied insurer theme with secondary color: ${secondaryColor}`);
+                    }
+                    catch (error) {
+                        console.error('Error applying insurer secondary color theme:', error);
+                    }
+                }
+            }
+            catch (error) {
+                console.error('Error applying insurer theme:', error);
+            }
+        }
+    }
+    /**
+     * Initialise le thème au démarrage de l'application
+     * Utilise la préférence stockée ou le thème par défaut 'light'
+     */
+    initializeTheme() {
+        let savedTheme = null;
+        // Tentative de récupération du thème sauvegardé
+        try {
+            savedTheme = localStorage.getItem(THEME_STORAGE_KEY);
+        }
+        catch (error) {
+            console.warn('Unable to read theme from localStorage:', error);
+        }
+        // Valider et appliquer le thème
+        const isValidTheme = savedTheme === 'light' || savedTheme === 'dark';
+        const themeToApply = isValidTheme ? savedTheme : 'light';
+        this.setDarkTheme(themeToApply === 'dark');
+    }
+    /**
+     * Sauvegarde la préférence de thème dans le localStorage
+     */
+    saveThemePreference(theme) {
+        try {
+            localStorage.setItem(THEME_STORAGE_KEY, theme);
+        }
+        catch (error) {
+            console.warn('Unable to save theme to localStorage:', error);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ThemeService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ThemeService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
+class NgxTranslateProvider {
+    constructor() {
+        this.translateService = inject(TranslateService);
+    }
+    translate(key, params) {
+        if (!key)
+            return '';
+        return this.translateService.instant(key, params);
+    }
+    translateAsync(key, params) {
+        if (!key)
+            return new Observable(subscriber => subscriber.next(''));
+        return this.translateService.stream(key, params);
+    }
+    setLanguage(lang) {
+        this.translateService.use(lang);
+    }
+    getCurrentLanguage() {
+        return this.translateService.currentLang;
+    }
+    onLangChange() {
+        return this.translateService.onLangChange.pipe(map(event => event.lang));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NgxTranslateProvider, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NgxTranslateProvider }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NgxTranslateProvider, decorators: [{
+            type: Injectable
+        }] });
+const TRANSLATION_PROVIDER = new InjectionToken('TRANSLATION_PROVIDER', {
+    factory: () => new NgxTranslateProvider()
+});
+function provideTranslation(provider = NgxTranslateProvider) {
+    return { provide: TRANSLATION_PROVIDER, useClass: provider };
+}
+
+class ScrollService {
+    constructor(router) {
+        this.router = router;
+        // Subscribe to router events
+        this.router.events.pipe(
+        // Filter only NavigationEnd events
+        filter(event => event instanceof NavigationEnd)).subscribe(() => {
+            // Reset scroll position
+            window.scrollTo(0, 0);
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ScrollService, deps: [{ token: i1$2.Router }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ScrollService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ScrollService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i1$2.Router }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { INSURER_CONTEXT_SERVICE, MODAL_CONFIG, ModalService, NgxTranslateProvider, PAGINATION_CONFIG, PAGINATION_STYLES, PROGRESSBAR_CONFIG, PshAlertComponent, PshAvatarComponent, PshBadgeComponent, PshButtonComponent, PshCardComponent, PshCheckboxComponent, PshCollapseComponent, PshDropdownComponent, PshHorizontalCardComponent, PshInfoCardComponent, PshInputComponent, PshMenuComponent, PshModalComponent, PshPaginationComponent, PshPieChartComponent, PshProgressbarComponent, PshRadioComponent, PshSelectComponent, PshSidebarComponent, PshSpinLoaderComponent, PshStatCardComponent, PshStepperComponent, PshSwitchComponent, PshTabBarComponent, PshTableComponent, PshTabsComponent, PshTagComponent, PshTooltipComponent, RADIO_CONFIG, RADIO_STYLES, SIDEBAR_CONFIG, SPINLOADER_CONFIG, SPINLOADER_STYLES, STEPPER_CONFIG, STEPPER_STYLES, SWITCH_CONFIG, SWITCH_STYLES, ScrollService, TABLE_CONFIG, TABLE_STYLES, TABS_CONFIG, TABS_STYLES, TAB_BAR_CONFIG, TAB_BAR_STYLES, TAG_CONFIG, TAG_STYLES, TOAST_CONFIG, TOAST_STYLES, TOOLTIP_CONFIG, TOOLTIP_STYLES, TRANSLATION_PROVIDER, ThemeService, ToastComponent, ToastService, provideTranslation };
+//# sourceMappingURL=ps-helix.mjs.map