ps-helix 4.0.5 → 4.0.6

package/README.md

@@ -2,7 +2,7 @@
 
 A comprehensive Angular component library built with Angular 21+ featuring modern design patterns, accessibility-first development, and optimal developer experience.
 
-[![npm version](https://img.shields.io/badge/npm-4.0.5-blue.svg)](https://www.npmjs.com/package/ps-helix)
+[![npm version](https://img.shields.io/badge/npm-4.0.6-blue.svg)](https://www.npmjs.com/package/ps-helix)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 [![Angular](https://img.shields.io/badge/Angular-21.0.3-red.svg)](https://angular.dev/)
 [![TypeScript](https://img.shields.io/badge/TypeScript-5.9.0-blue.svg)](https://www.typescriptlang.org/)
@@ -106,7 +106,7 @@ After installation, verify that ps-helix is in your `package.json`:
 ```json
 {
   "dependencies": {
-    "ps-helix": "^4.0.5"
+    "ps-helix": "^4.0.6"
   }
 }
 ```
@@ -1182,7 +1182,7 @@ Copyright (c) 2025 PACK Solutions
 
 ---
 
-**Version**: 4.0.5
+**Version**: 4.0.6
 **Built with**: Angular 21.0.3, TypeScript 5.9.0, Phosphor Icons 2.0.3
 **Author**: Fabrice PEREZ | Product Designer at PACK Solutions
 **Last Updated**: January 2026

package/fesm2022/ps-helix.mjs

@@ -3304,7 +3304,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                 }]
         }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], completed: [{ type: i0.Input, args: [{ isSignal: true, alias: "completed", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], warning: [{ type: i0.Input, args: [{ isSignal: true, alias: "warning", required: false }] }], success: [{ type: i0.Input, args: [{ isSignal: true, alias: "success", required: false }] }] } });
 
-const DEFAULT_ARIA_LABELS = {
+const DEFAULT_ARIA_LABELS$1 = {
     step: 'Étape',
     completed: 'Étape complétée',
     active: 'Étape active',
@@ -3315,7 +3315,7 @@ const STEPPER_CONFIG = new InjectionToken('STEPPER_CONFIG', {
     factory: () => ({
         variant: 'default',
         linear: true,
-        ariaLabels: DEFAULT_ARIA_LABELS
+        ariaLabels: DEFAULT_ARIA_LABELS$1
     })
 });
 class PshStepperComponent {
@@ -3341,7 +3341,7 @@ class PshStepperComponent {
             warning: step.warning(),
             success: step.success()
         })), ...(ngDevMode ? [{ debugName: "steps" }] : []));
-        this.effectiveAriaLabels = computed(() => this.ariaLabels() ?? this.config.ariaLabels ?? DEFAULT_ARIA_LABELS, ...(ngDevMode ? [{ debugName: "effectiveAriaLabels" }] : []));
+        this.effectiveAriaLabels = computed(() => this.ariaLabels() ?? this.config.ariaLabels ?? DEFAULT_ARIA_LABELS$1, ...(ngDevMode ? [{ debugName: "effectiveAriaLabels" }] : []));
         this.isFirstStep = computed(() => this.activeStep() === 0, ...(ngDevMode ? [{ debugName: "isFirstStep" }] : []));
         this.isLastStep = computed(() => this.activeStep() === this.steps().length - 1, ...(ngDevMode ? [{ debugName: "isLastStep" }] : []));
         this.progress = computed(() => this.steps().length > 0
@@ -3511,6 +3511,252 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                     }, template: "<div class=\"stepper-header\" role=\"tablist\">\n  @for (step of steps(); track $index; let i = $index) {\n    <div\n      class=\"step-header\"\n      [class.active]=\"i === activeStep()\"\n      [class.completed]=\"step.completed\"\n      [class.disabled]=\"step.disabled\"\n      [class.error]=\"!!step.error\"\n      [class.warning]=\"!!step.warning\"\n      [class.success]=\"!!step.success\"\n    >\n      <div\n        class=\"step-indicator\"\n        role=\"tab\"\n        tabindex=\"0\"\n        [attr.id]=\"'step-' + i\"\n        [attr.aria-selected]=\"i === activeStep()\"\n        [attr.aria-disabled]=\"step.disabled\"\n        [attr.aria-label]=\"getStepAriaLabel(step, i)\"\n        [attr.aria-current]=\"i === activeStep() ? 'step' : null\"\n        [attr.aria-describedby]=\"getStepDescribedBy(step, i)\"\n        [attr.aria-busy]=\"step.loading\"\n        (click)=\"handleStepClick(i)\"\n        (keydown)=\"handleKeydown($event, i)\"\n      >\n        @if (step.loading && variant() === 'progress') {\n          <i class=\"ph ph-circle-notch spinner\" aria-hidden=\"true\"></i>\n        } @else if (step.completed) {\n          <i class=\"ph ph-check\" aria-hidden=\"true\"></i>\n        } @else if (variant() === 'numbered') {\n          {{ i + 1 }}\n        } @else if (step.icon) {\n          <i class=\"ph ph-{{ step.icon }}\" aria-hidden=\"true\"></i>\n        } @else {\n          <span class=\"step-dot\"></span>\n        }\n      </div>\n\n      <div class=\"step-label\">\n        <span class=\"step-title\">{{ step.title }}</span>\n        @if (step.subtitle) {\n          <span class=\"step-subtitle\">{{ step.subtitle }}</span>\n        }\n        @if (step.error) {\n          <span class=\"step-error\" [id]=\"'error-' + i\" role=\"alert\" aria-live=\"polite\">{{ step.error }}</span>\n        }\n        @if (step.warning) {\n          <span class=\"step-warning\" [id]=\"'warning-' + i\" role=\"status\" aria-live=\"polite\">{{ step.warning }}</span>\n        }\n        @if (step.success) {\n          <span class=\"step-success\" [id]=\"'success-' + i\" role=\"status\" aria-live=\"polite\">{{ step.success }}</span>\n        }\n      </div>\n\n      @if (i < steps().length - 1) {\n        <div class=\"step-connector\" aria-hidden=\"true\">\n          <span class=\"connector-line\"></span>\n        </div>\n      }\n    </div>\n  }\n</div>\n\n<div class=\"stepper-content\">\n  <ng-content />\n</div>\n", styles: [".stepper-container{display:flex;flex-direction:column;width:100%;container-type:inline-size}.stepper-header{display:flex;flex-direction:row}.step-header{display:flex;flex-direction:row;align-items:center;flex:1;min-width:0;position:relative}.step-indicator{display:flex;align-items:center;justify-content:center;width:var(--size-8);height:var(--size-8);position:relative;z-index:1;border-radius:var(--radius-full);background:var(--surface-card);border:var(--border-width-2) solid var(--surface-border);color:var(--text-color-secondary);transition:all var(--animation-duration-normal) var(--animation-easing-smooth);cursor:pointer;flex-shrink:0}.step-indicator:focus-visible{outline:var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);outline-offset:var(--focus-outline-offset)}.step-header.active .step-indicator{background:var(--primary-gradient);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:var(--opacity-disabled)}.step-header.error .step-indicator{background:color-mix(in srgb,var(--danger-color) 10%,transparent);border-color:var(--danger-color);color:var(--danger-color)}.step-header.warning .step-indicator{background:color-mix(in srgb,var(--warning-color) 10%,transparent);border-color:var(--warning-color);color:var(--warning-color)}.step-header.success:not(.completed):not(.active) .step-indicator{background:var(--surface-card);border-color:var(--success-color);border-width:var(--border-width-3);color:var(--success-color);box-shadow:0 0 0 2px color-mix(in srgb,var(--success-color) 15%,transparent)}.step-label{display:flex;flex-direction:column;margin:0 var(--spacing-md);min-width:0}.step-title{color:var(--text-color);font-weight:var(--font-weight-medium);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-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-connector{flex:1;padding:0 var(--spacing-sm);display:flex;align-items:center}.connector-line{height:var(--border-width-2);background:var(--surface-border);width:100%;transition:background var(--animation-duration-normal) var(--animation-easing-smooth)}.step-header.completed .connector-line{background:var(--success-color)}.numbered .step-indicator{font-weight:var(--font-weight-semibold);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 var(--animation-duration-default) var(--animation-easing-smooth)}.progress .step-header.active .step-indicator:after{transform:scaleX(1)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.spinner{animation:spin 1s linear infinite}@media(prefers-reduced-motion:reduce){.spinner{animation:spin 2s linear infinite}}.stepper-content{flex:1;min-width:0}psh-step{display:block;animation:fadeIn var(--animation-duration-default) var(--animation-easing-smooth)}@keyframes fadeIn{0%{opacity:0;transform:translateY(var(--animation-distance-sm))}to{opacity:1;transform:translateY(0)}}@container (max-width: 768px){.stepper-header{gap:var(--spacing-xs)}.step-label{margin:0 var(--spacing-sm)}.step-title{white-space:normal;word-break:break-word;max-width:120px}.step-subtitle{white-space:normal;word-break:break-word;font-size:var(--font-size-xs)}.step-connector{padding:0 var(--spacing-xs)}}@container (max-width: 640px){.stepper-header{flex-wrap:wrap;gap:var(--spacing-md)}.step-header{flex-direction:column;align-items:center;text-align:center;gap:var(--spacing-xs);flex:0 0 auto;min-width:80px}.step-label{margin:var(--spacing-xs) 0 0 0;align-items:center}.step-title,.step-subtitle{white-space:normal;text-align:center;font-size:var(--font-size-sm);max-width:none}.step-connector{display:none}.step-indicator{width:var(--size-10);height:var(--size-10)}}@container (max-width: 480px){.step-indicator{width:var(--size-8);height:var(--size-8);font-size:var(--font-size-sm)}.step-title{font-size:var(--font-size-sm);max-width:100px}.step-subtitle{font-size:var(--font-size-xs);display:none}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { activeStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeStep", required: false }] }, { type: i0.Output, args: ["activeStepChange"] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], linear: [{ type: i0.Input, args: [{ isSignal: true, alias: "linear", required: false }] }], ariaLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabels", required: false }] }], beforeStepChange: [{ type: i0.Input, args: [{ isSignal: true, alias: "beforeStepChange", required: false }] }], stepChange: [{ type: i0.Output, args: ["stepChange"] }], completed: [{ type: i0.Output, args: ["completed"] }], navigationError: [{ type: i0.Output, args: ["navigationError"] }], stepComponents: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => PshStepComponent), { isSignal: true }] }] } });
 
+class PshFlowStepComponent {
+    constructor() {
+        this.title = input.required(...(ngDevMode ? [{ debugName: "title" }] : []));
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+        this.completed = input(false, ...(ngDevMode ? [{ debugName: "completed" }] : []));
+        this.loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+        this.error = input(...(ngDevMode ? [undefined, { debugName: "error" }] : []));
+        this.warning = input(...(ngDevMode ? [undefined, { debugName: "warning" }] : []));
+        this._index = signal(0, ...(ngDevMode ? [{ debugName: "_index" }] : []));
+        this._isActive = signal(false, ...(ngDevMode ? [{ debugName: "_isActive" }] : []));
+        this.index = this._index.asReadonly();
+        this.isActive = this._isActive.asReadonly();
+    }
+    setIndex(value) {
+        this._index.set(value);
+    }
+    setActive(value) {
+        this._isActive.set(value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PshFlowStepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.5", type: PshFlowStepComponent, isStandalone: true, selector: "psh-flow-step", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, completed: { classPropertyName: "completed", publicName: "completed", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, warning: { classPropertyName: "warning", publicName: "warning", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.display": "\"none\"" } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PshFlowStepComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'psh-flow-step',
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[style.display]': '"none"'
+                    }
+                }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], completed: [{ type: i0.Input, args: [{ isSignal: true, alias: "completed", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], warning: [{ type: i0.Input, args: [{ isSignal: true, alias: "warning", required: false }] }] } });
+
+const DEFAULT_ARIA_LABELS = {
+    step: 'Étape',
+    completed: 'Étape complétée',
+    active: 'Étape active',
+    incomplete: 'Étape incomplète',
+    disabled: 'Étape désactivée',
+    warning: 'Étape avec avertissement',
+    error: 'Étape en erreur'
+};
+const STATE_FLOW_INDICATOR_CONFIG = new InjectionToken('STATE_FLOW_INDICATOR_CONFIG', {
+    factory: () => ({
+        linear: true,
+        ariaLabels: DEFAULT_ARIA_LABELS
+    })
+});
+class PshStateFlowIndicatorComponent {
+    constructor() {
+        this.config = inject(STATE_FLOW_INDICATOR_CONFIG);
+        this.activeStep = model(0, ...(ngDevMode ? [{ debugName: "activeStep" }] : []));
+        this.linear = input(this.config.linear ?? true, ...(ngDevMode ? [{ debugName: "linear" }] : []));
+        this.size = input('medium', ...(ngDevMode ? [{ debugName: "size" }] : []));
+        this.ariaLabels = input(...(ngDevMode ? [undefined, { debugName: "ariaLabels" }] : []));
+        this.beforeStepChange = input(...(ngDevMode ? [undefined, { debugName: "beforeStepChange" }] : []));
+        this.stepChange = output();
+        this.completed = output();
+        this.navigationError = output();
+        this.stepComponents = contentChildren(PshFlowStepComponent, ...(ngDevMode ? [{ debugName: "stepComponents" }] : []));
+        this.steps = computed(() => this.stepComponents().map(step => ({
+            title: step.title(),
+            disabled: step.disabled(),
+            completed: step.completed(),
+            loading: step.loading(),
+            error: step.error(),
+            warning: step.warning()
+        })), ...(ngDevMode ? [{ debugName: "steps" }] : []));
+        this.effectiveAriaLabels = computed(() => this.ariaLabels() ?? this.config.ariaLabels ?? DEFAULT_ARIA_LABELS, ...(ngDevMode ? [{ debugName: "effectiveAriaLabels" }] : []));
+        this.isFirstStep = computed(() => this.activeStep() === 0, ...(ngDevMode ? [{ debugName: "isFirstStep" }] : []));
+        this.isLastStep = computed(() => this.activeStep() === this.steps().length - 1, ...(ngDevMode ? [{ debugName: "isLastStep" }] : []));
+        this.progress = computed(() => this.steps().length > 0
+            ? ((this.activeStep() + 1) / this.steps().length) * 100
+            : 0, ...(ngDevMode ? [{ debugName: "progress" }] : []));
+        this.completedSteps = computed(() => this.steps().filter(step => step.completed).length, ...(ngDevMode ? [{ debugName: "completedSteps" }] : []));
+        afterNextRender(() => {
+            this.syncStepStates();
+        });
+        effect(() => {
+            this.syncStepStates();
+        });
+    }
+    syncStepStates() {
+        const components = this.stepComponents();
+        if (components.length === 0)
+            return;
+        const active = this.activeStep();
+        components.forEach((step, index) => {
+            step.setIndex(index);
+            step.setActive(index === active);
+        });
+    }
+    async next() {
+        if (this.canGoNext()) {
+            await this.goToStep(this.activeStep() + 1);
+        }
+    }
+    async previous() {
+        if (this.canGoPrevious()) {
+            await this.goToStep(this.activeStep() - 1);
+        }
+    }
+    async goToStep(index) {
+        if (index < 0 || index >= this.steps().length) {
+            const errorMsg = `Invalid step index: ${index}. Valid range: 0-${this.steps().length - 1}`;
+            this.navigationError.emit(errorMsg);
+            return;
+        }
+        if (index === this.activeStep()) {
+            return;
+        }
+        const beforeChange = this.beforeStepChange();
+        if (beforeChange) {
+            try {
+                const canChange = await Promise.resolve(beforeChange(this.activeStep(), index));
+                if (!canChange) {
+                    this.navigationError.emit(`Navigation from step ${this.activeStep()} to step ${index} was blocked by validation`);
+                    return;
+                }
+            }
+            catch (error) {
+                const errorMsg = error instanceof Error ? error.message : 'Unknown error in beforeStepChange';
+                this.navigationError.emit(errorMsg);
+                return;
+            }
+        }
+        if (!this.canActivateStep(index)) {
+            this.navigationError.emit(`Cannot activate step ${index}. Please complete previous steps first`);
+            return;
+        }
+        this.activeStep.set(index);
+        this.stepChange.emit(index);
+        const currentStep = this.steps()[index];
+        if (this.isLastStep() && currentStep?.completed) {
+            this.completed.emit();
+        }
+    }
+    canGoNext() {
+        const nextIndex = this.activeStep() + 1;
+        return nextIndex < this.steps().length && this.canActivateStep(nextIndex);
+    }
+    canGoPrevious() {
+        return this.activeStep() > 0;
+    }
+    canActivateStep(index) {
+        if (index < 0 || index >= this.steps().length) {
+            return false;
+        }
+        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(s => s.completed && !s.error);
+    }
+    isStepValid(index) {
+        const step = this.steps()[index];
+        return step ? !!step.completed && !step.error : false;
+    }
+    getStepAriaLabel(step, index) {
+        const labels = this.effectiveAriaLabels();
+        let status;
+        if (step.error) {
+            status = labels.error;
+        }
+        else if (step.warning) {
+            status = labels.warning;
+        }
+        else if (step.completed) {
+            status = labels.completed;
+        }
+        else if (index === this.activeStep()) {
+            status = labels.active;
+        }
+        else if (step.disabled) {
+            status = labels.disabled;
+        }
+        else {
+            status = labels.incomplete;
+        }
+        return `${labels.step} ${index + 1}: ${step.title} - ${status}`;
+    }
+    reset() {
+        this.activeStep.set(0);
+        this.stepChange.emit(0);
+    }
+    handleStepClick(index) {
+        const step = this.steps()[index];
+        if (step && !step.disabled && this.canActivateStep(index)) {
+            this.goToStep(index);
+        }
+    }
+    handleKeydown(event, index) {
+        switch (event.key) {
+            case 'Enter':
+            case ' ':
+                event.preventDefault();
+                this.handleStepClick(index);
+                break;
+            case 'ArrowRight':
+                event.preventDefault();
+                if (this.canGoNext()) {
+                    this.next();
+                }
+                break;
+            case 'ArrowLeft':
+                event.preventDefault();
+                if (this.canGoPrevious()) {
+                    this.previous();
+                }
+                break;
+            case 'Home':
+                event.preventDefault();
+                if (this.canActivateStep(0)) {
+                    this.goToStep(0);
+                }
+                break;
+            case 'End':
+                event.preventDefault();
+                const lastIndex = this.steps().length - 1;
+                if (this.canActivateStep(lastIndex)) {
+                    this.goToStep(lastIndex);
+                }
+                break;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PshStateFlowIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: PshStateFlowIndicatorComponent, isStandalone: true, selector: "psh-state-flow-indicator", inputs: { activeStep: { classPropertyName: "activeStep", publicName: "activeStep", isSignal: true, isRequired: false, transformFunction: null }, linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, ariaLabels: { classPropertyName: "ariaLabels", publicName: "ariaLabels", isSignal: true, isRequired: false, transformFunction: null }, beforeStepChange: { classPropertyName: "beforeStepChange", publicName: "beforeStepChange", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeStep: "activeStepChange", stepChange: "stepChange", completed: "completed", navigationError: "navigationError" }, host: { properties: { "class.state-flow-indicator": "true", "class.size-small": "size() === \"small\"", "class.size-medium": "size() === \"medium\"", "class.size-large": "size() === \"large\"", "attr.role": "\"region\"", "attr.aria-label": "\"Indicateur de progression\"" } }, queries: [{ propertyName: "stepComponents", predicate: PshFlowStepComponent, isSignal: true }], ngImport: i0, template: "<div class=\"flow-track\" role=\"tablist\">\n  @for (step of steps(); track $index; let i = $index) {\n    <div\n      class=\"flow-segment\"\n      [class.active]=\"i === activeStep()\"\n      [class.completed]=\"step.completed\"\n      [class.disabled]=\"step.disabled || (!step.completed && i !== activeStep() && !canActivateStep(i))\"\n      [class.error]=\"!!step.error\"\n      [class.warning]=\"!!step.warning\"\n      [class.loading]=\"step.loading\"\n      [class.first]=\"i === 0\"\n      [class.last]=\"i === steps().length - 1\"\n      role=\"tab\"\n      [attr.tabindex]=\"step.disabled ? -1 : 0\"\n      [attr.id]=\"'flow-step-' + i\"\n      [attr.aria-selected]=\"i === activeStep()\"\n      [attr.aria-disabled]=\"step.disabled || (!step.completed && i !== activeStep() && !canActivateStep(i))\"\n      [attr.aria-label]=\"getStepAriaLabel(step, i)\"\n      [attr.aria-current]=\"i === activeStep() ? 'step' : null\"\n      [attr.aria-busy]=\"step.loading\"\n      (click)=\"handleStepClick(i)\"\n      (keydown)=\"handleKeydown($event, i)\"\n    >\n      <span class=\"flow-segment-content\">\n        @if (step.loading) {\n          <i class=\"ph ph-circle-notch spinner\" aria-hidden=\"true\"></i>\n        } @else if (step.error) {\n          <i class=\"ph ph-x-circle\" aria-hidden=\"true\"></i>\n        } @else if (step.warning) {\n          <i class=\"ph ph-warning\" aria-hidden=\"true\"></i>\n        } @else if (step.completed) {\n          <i class=\"ph ph-check-circle\" aria-hidden=\"true\"></i>\n        }\n        <span class=\"flow-segment-title\">{{ step.title }}</span>\n      </span>\n    </div>\n  }\n</div>\n", styles: [".state-flow-indicator{display:block;width:100%;container-type:inline-size}.flow-track{display:flex;flex-direction:row;width:100%}.flow-segment{flex:1;display:flex;align-items:center;justify-content:center;position:relative;background:var(--surface-200);color:var(--text-color-disabled);cursor:not-allowed;transition:background var(--animation-duration-normal) var(--animation-easing-smooth),color var(--animation-duration-normal) var(--animation-easing-smooth),opacity var(--animation-duration-normal) var(--animation-easing-smooth);clip-path:polygon(0 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,0 100%,14px 50%);margin-left:-2px;opacity:var(--opacity-disabled)}.flow-segment.first{clip-path:polygon(0 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,0 100%);margin-left:0;border-radius:var(--radius-lg) 0 0 var(--radius-lg)}.flow-segment.last{clip-path:polygon(0 0,100% 0,100% 100%,0 100%,14px 50%);border-radius:0 var(--radius-lg) var(--radius-lg) 0}.flow-segment.first.last{clip-path:none;border-radius:var(--radius-lg)}.flow-segment.active{background:var(--primary-gradient);color:var(--primary-color-text);cursor:default;opacity:1}.flow-segment.completed{background:var(--success-color);color:var(--success-color-text);cursor:pointer;opacity:1}.flow-segment.completed:hover{filter:brightness(1.1)}.flow-segment.warning{background:var(--warning-color);color:var(--warning-color-text);cursor:pointer;opacity:1}.flow-segment.warning:hover{filter:brightness(1.1)}.flow-segment.error{background:var(--danger-color);color:var(--danger-color-text);cursor:pointer;opacity:1}.flow-segment.error:hover{filter:brightness(1.1)}.flow-segment.loading{opacity:1;cursor:wait}.flow-segment.loading.active{background:var(--primary-gradient);color:var(--primary-color-text)}.flow-segment:focus-visible{outline:var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);outline-offset:var(--focus-outline-offset);z-index:1}.flow-segment-content{display:flex;align-items:center;gap:var(--spacing-xs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 var(--spacing-lg);pointer-events:none}.flow-segment-content i{flex-shrink:0;font-size:var(--icon-size-md)}.flow-segment-title{font-weight:var(--font-weight-medium);overflow:hidden;text-overflow:ellipsis}:host(.size-small) .flow-segment{height:var(--size-9)}:host(.size-small) .flow-segment-title{font-size:var(--font-size-sm)}:host(.size-small) .flow-segment-content i{font-size:var(--icon-size-sm)}:host(.size-small) .flow-segment-content{gap:var(--spacing-xxs);padding:0 var(--spacing-md)}:host(.size-medium) .flow-segment{height:var(--size-11)}:host(.size-medium) .flow-segment-title{font-size:var(--font-size-base)}:host(.size-large) .flow-segment{height:var(--size-14)}:host(.size-large) .flow-segment-title{font-size:var(--font-size-lg)}:host(.size-large) .flow-segment-content i{font-size:var(--icon-size-lg)}:host(.size-large) .flow-segment-content{gap:var(--spacing-sm);padding:0 var(--spacing-xl)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.spinner{animation:spin 1s linear infinite}@media(prefers-reduced-motion:reduce){.spinner{animation:spin 2s linear infinite}}@container (max-width: 640px){.flow-segment-content{padding:0 var(--spacing-md)}.flow-segment-title{font-size:var(--font-size-sm)}.flow-segment-content i{font-size:var(--icon-size-sm)}}@container (max-width: 480px){.flow-track{flex-direction:column;gap:var(--spacing-xxs)}.flow-segment{clip-path:none;margin-left:0;border-radius:var(--radius-md)}.flow-segment.first,.flow-segment.last{clip-path:none;border-radius:var(--radius-md)}.flow-segment-content{justify-content:center;padding:0 var(--spacing-sm)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PshStateFlowIndicatorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'psh-state-flow-indicator', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class.state-flow-indicator]': 'true',
+                        '[class.size-small]': 'size() === "small"',
+                        '[class.size-medium]': 'size() === "medium"',
+                        '[class.size-large]': 'size() === "large"',
+                        '[attr.role]': '"region"',
+                        '[attr.aria-label]': '"Indicateur de progression"'
+                    }, template: "<div class=\"flow-track\" role=\"tablist\">\n  @for (step of steps(); track $index; let i = $index) {\n    <div\n      class=\"flow-segment\"\n      [class.active]=\"i === activeStep()\"\n      [class.completed]=\"step.completed\"\n      [class.disabled]=\"step.disabled || (!step.completed && i !== activeStep() && !canActivateStep(i))\"\n      [class.error]=\"!!step.error\"\n      [class.warning]=\"!!step.warning\"\n      [class.loading]=\"step.loading\"\n      [class.first]=\"i === 0\"\n      [class.last]=\"i === steps().length - 1\"\n      role=\"tab\"\n      [attr.tabindex]=\"step.disabled ? -1 : 0\"\n      [attr.id]=\"'flow-step-' + i\"\n      [attr.aria-selected]=\"i === activeStep()\"\n      [attr.aria-disabled]=\"step.disabled || (!step.completed && i !== activeStep() && !canActivateStep(i))\"\n      [attr.aria-label]=\"getStepAriaLabel(step, i)\"\n      [attr.aria-current]=\"i === activeStep() ? 'step' : null\"\n      [attr.aria-busy]=\"step.loading\"\n      (click)=\"handleStepClick(i)\"\n      (keydown)=\"handleKeydown($event, i)\"\n    >\n      <span class=\"flow-segment-content\">\n        @if (step.loading) {\n          <i class=\"ph ph-circle-notch spinner\" aria-hidden=\"true\"></i>\n        } @else if (step.error) {\n          <i class=\"ph ph-x-circle\" aria-hidden=\"true\"></i>\n        } @else if (step.warning) {\n          <i class=\"ph ph-warning\" aria-hidden=\"true\"></i>\n        } @else if (step.completed) {\n          <i class=\"ph ph-check-circle\" aria-hidden=\"true\"></i>\n        }\n        <span class=\"flow-segment-title\">{{ step.title }}</span>\n      </span>\n    </div>\n  }\n</div>\n", styles: [".state-flow-indicator{display:block;width:100%;container-type:inline-size}.flow-track{display:flex;flex-direction:row;width:100%}.flow-segment{flex:1;display:flex;align-items:center;justify-content:center;position:relative;background:var(--surface-200);color:var(--text-color-disabled);cursor:not-allowed;transition:background var(--animation-duration-normal) var(--animation-easing-smooth),color var(--animation-duration-normal) var(--animation-easing-smooth),opacity var(--animation-duration-normal) var(--animation-easing-smooth);clip-path:polygon(0 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,0 100%,14px 50%);margin-left:-2px;opacity:var(--opacity-disabled)}.flow-segment.first{clip-path:polygon(0 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,0 100%);margin-left:0;border-radius:var(--radius-lg) 0 0 var(--radius-lg)}.flow-segment.last{clip-path:polygon(0 0,100% 0,100% 100%,0 100%,14px 50%);border-radius:0 var(--radius-lg) var(--radius-lg) 0}.flow-segment.first.last{clip-path:none;border-radius:var(--radius-lg)}.flow-segment.active{background:var(--primary-gradient);color:var(--primary-color-text);cursor:default;opacity:1}.flow-segment.completed{background:var(--success-color);color:var(--success-color-text);cursor:pointer;opacity:1}.flow-segment.completed:hover{filter:brightness(1.1)}.flow-segment.warning{background:var(--warning-color);color:var(--warning-color-text);cursor:pointer;opacity:1}.flow-segment.warning:hover{filter:brightness(1.1)}.flow-segment.error{background:var(--danger-color);color:var(--danger-color-text);cursor:pointer;opacity:1}.flow-segment.error:hover{filter:brightness(1.1)}.flow-segment.loading{opacity:1;cursor:wait}.flow-segment.loading.active{background:var(--primary-gradient);color:var(--primary-color-text)}.flow-segment:focus-visible{outline:var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);outline-offset:var(--focus-outline-offset);z-index:1}.flow-segment-content{display:flex;align-items:center;gap:var(--spacing-xs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 var(--spacing-lg);pointer-events:none}.flow-segment-content i{flex-shrink:0;font-size:var(--icon-size-md)}.flow-segment-title{font-weight:var(--font-weight-medium);overflow:hidden;text-overflow:ellipsis}:host(.size-small) .flow-segment{height:var(--size-9)}:host(.size-small) .flow-segment-title{font-size:var(--font-size-sm)}:host(.size-small) .flow-segment-content i{font-size:var(--icon-size-sm)}:host(.size-small) .flow-segment-content{gap:var(--spacing-xxs);padding:0 var(--spacing-md)}:host(.size-medium) .flow-segment{height:var(--size-11)}:host(.size-medium) .flow-segment-title{font-size:var(--font-size-base)}:host(.size-large) .flow-segment{height:var(--size-14)}:host(.size-large) .flow-segment-title{font-size:var(--font-size-lg)}:host(.size-large) .flow-segment-content i{font-size:var(--icon-size-lg)}:host(.size-large) .flow-segment-content{gap:var(--spacing-sm);padding:0 var(--spacing-xl)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.spinner{animation:spin 1s linear infinite}@media(prefers-reduced-motion:reduce){.spinner{animation:spin 2s linear infinite}}@container (max-width: 640px){.flow-segment-content{padding:0 var(--spacing-md)}.flow-segment-title{font-size:var(--font-size-sm)}.flow-segment-content i{font-size:var(--icon-size-sm)}}@container (max-width: 480px){.flow-track{flex-direction:column;gap:var(--spacing-xxs)}.flow-segment{clip-path:none;margin-left:0;border-radius:var(--radius-md)}.flow-segment.first,.flow-segment.last{clip-path:none;border-radius:var(--radius-md)}.flow-segment-content{justify-content:center;padding:0 var(--spacing-sm)}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { activeStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeStep", required: false }] }, { type: i0.Output, args: ["activeStepChange"] }], linear: [{ type: i0.Input, args: [{ isSignal: true, alias: "linear", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], ariaLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabels", required: false }] }], beforeStepChange: [{ type: i0.Input, args: [{ isSignal: true, alias: "beforeStepChange", required: false }] }], stepChange: [{ type: i0.Output, args: ["stepChange"] }], completed: [{ type: i0.Output, args: ["completed"] }], navigationError: [{ type: i0.Output, args: ["navigationError"] }], stepComponents: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => PshFlowStepComponent), { isSignal: true }] }] } });
+
 const SWITCH_CONFIG = new InjectionToken('SWITCH_CONFIG', {
     factory: () => ({
         checked: false,
@@ -4500,5 +4746,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { CHECKBOX_CONFIG, INPUT_LABELS, INSURER_CONTEXT_SERVICE, MODAL_CONFIG, ModalService, NgxTranslateProvider, PAGINATION_CONFIG, PROGRESSBAR_CONFIG, PshAlertComponent, PshAvatarComponent, PshBadgeComponent, PshButtonComponent, PshCardComponent, PshCheckboxComponent, PshCollapseComponent, PshDropdownComponent, PshHorizontalCardComponent, PshInfoCardComponent, PshInputComponent, PshMenuComponent, PshModalComponent, PshPaginationComponent, PshProgressbarComponent, PshRadioComponent, PshSelectComponent, PshSidebarComponent, PshSpinLoaderComponent, PshStatCardComponent, PshStepComponent, PshStepperComponent, PshSwitchComponent, PshTabBarComponent, PshTabComponent, PshTableComponent, PshTabsComponent, PshTagComponent, PshToastComponent, PshToastService, PshTooltipComponent, RADIO_CONFIG, RADIO_STYLES, SIDEBAR_CONFIG, SPINLOADER_CONFIG, STEPPER_CONFIG, SWITCH_CONFIG, ScrollService, TABLE_CONFIG, TABS_CONFIG, TAB_BAR_CONFIG, TAG_CONFIG, TOAST_CONFIG, TOOLTIP_CONFIG, TRANSLATION_PROVIDER, ThemeService, ToastComponent, ToastService, provideTranslation };
+export { CHECKBOX_CONFIG, INPUT_LABELS, INSURER_CONTEXT_SERVICE, MODAL_CONFIG, ModalService, NgxTranslateProvider, PAGINATION_CONFIG, PROGRESSBAR_CONFIG, PshAlertComponent, PshAvatarComponent, PshBadgeComponent, PshButtonComponent, PshCardComponent, PshCheckboxComponent, PshCollapseComponent, PshDropdownComponent, PshFlowStepComponent, PshHorizontalCardComponent, PshInfoCardComponent, PshInputComponent, PshMenuComponent, PshModalComponent, PshPaginationComponent, PshProgressbarComponent, PshRadioComponent, PshSelectComponent, PshSidebarComponent, PshSpinLoaderComponent, PshStatCardComponent, PshStateFlowIndicatorComponent, PshStepComponent, PshStepperComponent, PshSwitchComponent, PshTabBarComponent, PshTabComponent, PshTableComponent, PshTabsComponent, PshTagComponent, PshToastComponent, PshToastService, PshTooltipComponent, RADIO_CONFIG, RADIO_STYLES, SIDEBAR_CONFIG, SPINLOADER_CONFIG, STATE_FLOW_INDICATOR_CONFIG, STEPPER_CONFIG, SWITCH_CONFIG, ScrollService, TABLE_CONFIG, TABS_CONFIG, TAB_BAR_CONFIG, TAG_CONFIG, TOAST_CONFIG, TOOLTIP_CONFIG, TRANSLATION_PROVIDER, ThemeService, ToastComponent, ToastService, provideTranslation };
 //# sourceMappingURL=ps-helix.mjs.map