ps-helix 4.0.4 → 4.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +3 -3
- package/fesm2022/ps-helix.mjs +2 -2
- package/fesm2022/ps-helix.mjs.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
A comprehensive Angular component library built with Angular 21+ featuring modern design patterns, accessibility-first development, and optimal developer experience.
|
|
4
4
|
|
|
5
|
-
[](https://www.npmjs.com/package/ps-helix)
|
|
6
6
|
[](https://opensource.org/licenses/MIT)
|
|
7
7
|
[](https://angular.dev/)
|
|
8
8
|
[](https://www.typescriptlang.org/)
|
|
@@ -106,7 +106,7 @@ After installation, verify that ps-helix is in your `package.json`:
|
|
|
106
106
|
```json
|
|
107
107
|
{
|
|
108
108
|
"dependencies": {
|
|
109
|
-
"ps-helix": "^4.0.
|
|
109
|
+
"ps-helix": "^4.0.5"
|
|
110
110
|
}
|
|
111
111
|
}
|
|
112
112
|
```
|
|
@@ -1182,7 +1182,7 @@ Copyright (c) 2025 PACK Solutions
|
|
|
1182
1182
|
|
|
1183
1183
|
---
|
|
1184
1184
|
|
|
1185
|
-
**Version**: 4.0.
|
|
1185
|
+
**Version**: 4.0.5
|
|
1186
1186
|
**Built with**: Angular 21.0.3, TypeScript 5.9.0, Phosphor Icons 2.0.3
|
|
1187
1187
|
**Author**: Fabrice PEREZ | Product Designer at PACK Solutions
|
|
1188
1188
|
**Last Updated**: January 2026
|
package/fesm2022/ps-helix.mjs
CHANGED
|
@@ -3498,7 +3498,7 @@ class PshStepperComponent {
|
|
|
3498
3498
|
}
|
|
3499
3499
|
}
|
|
3500
3500
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PshStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3501
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: PshStepperComponent, isStandalone: true, selector: "psh-stepper", inputs: { activeStep: { classPropertyName: "activeStep", publicName: "activeStep", 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 }, beforeStepChange: { classPropertyName: "beforeStepChange", publicName: "beforeStepChange", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeStep: "activeStepChange", stepChange: "stepChange", completed: "completed", navigationError: "navigationError" }, host: { properties: { "class.stepper-container": "true", "class.numbered": "variant() === \"numbered\"", "class.progress": "variant() === \"progress\"", "attr.role": "\"region\"", "attr.aria-label": "\"Navigation par \u00E9tapes\"" } }, queries: [{ propertyName: "stepComponents", predicate: PshStepComponent, isSignal: true }], ngImport: i0, 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
|
|
3501
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: PshStepperComponent, isStandalone: true, selector: "psh-stepper", inputs: { activeStep: { classPropertyName: "activeStep", publicName: "activeStep", 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 }, beforeStepChange: { classPropertyName: "beforeStepChange", publicName: "beforeStepChange", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeStep: "activeStepChange", stepChange: "stepChange", completed: "completed", navigationError: "navigationError" }, host: { properties: { "class.stepper-container": "true", "class.numbered": "variant() === \"numbered\"", "class.progress": "variant() === \"progress\"", "attr.role": "\"region\"", "attr.aria-label": "\"Navigation par \u00E9tapes\"" } }, queries: [{ propertyName: "stepComponents", predicate: PshStepComponent, isSignal: true }], ngImport: i0, 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"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3502
3502
|
}
|
|
3503
3503
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PshStepperComponent, decorators: [{
|
|
3504
3504
|
type: Component,
|
|
@@ -3508,7 +3508,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
|
|
|
3508
3508
|
'[class.progress]': 'variant() === "progress"',
|
|
3509
3509
|
'[attr.role]': '"region"',
|
|
3510
3510
|
'[attr.aria-label]': '"Navigation par étapes"'
|
|
3511
|
-
}, 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
|
|
3511
|
+
}, 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"] }]
|
|
3512
3512
|
}], 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 }] }] } });
|
|
3513
3513
|
|
|
3514
3514
|
const SWITCH_CONFIG = new InjectionToken('SWITCH_CONFIG', {
|