ps-helix 2.0.3 → 2.0.4
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 20+ 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": "^2.0.
|
|
109
|
+
"ps-helix": "^2.0.4"
|
|
110
110
|
}
|
|
111
111
|
}
|
|
112
112
|
```
|
|
@@ -1140,7 +1140,7 @@ Copyright (c) 2025 PACK Solutions
|
|
|
1140
1140
|
|
|
1141
1141
|
---
|
|
1142
1142
|
|
|
1143
|
-
**Version**: 2.0.
|
|
1143
|
+
**Version**: 2.0.4
|
|
1144
1144
|
**Built with**: Angular 20.0.0, TypeScript 5.8.0, Phosphor Icons 2.0.3
|
|
1145
1145
|
**Author**: Fabrice PEREZ | Product Designer at PACK Solutions
|
|
1146
1146
|
**Last Updated**: November 2025
|
package/fesm2022/ps-helix.mjs
CHANGED
|
@@ -772,11 +772,11 @@ class PshHorizontalCardComponent {
|
|
|
772
772
|
}
|
|
773
773
|
}
|
|
774
774
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: PshHorizontalCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
775
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", 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 }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", 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 }, 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: { 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 <!-- Contenu lat\u00E9ral -->\n <div class=\"horizontal-side\">\n @if (loading()) {\n <div class=\"horizontal-skeleton\"></div>\n } @else {\n <ng-content select=\"[horizontal-side]\"></ng-content>\n }\n </div>\n\n <!-- Contenu principal -->\n <div class=\"horizontal-content\">\n @if (loading()) {\n <div class=\"horizontal-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 <!-- 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 }\n </div>\n</div>", styles: [".horizontal-card{background:var(--surface-card);border-radius:var(--border-radius-lg, .75rem);overflow:hidden;transition:all .2s ease;width:100%;display:flex;flex-direction:row;align-items:stretch;gap:var(--horizontal-gap, var(--spacing-md));position:relative}.horizontal-card.variant-elevated{box-shadow:0 1px 3px #0000001a,0 1px 2px #0000000f}.horizontal-card.variant-elevated.hoverable:hover{box-shadow:0 4px 6px #0000001a,0 2px 4px #0000000f}.horizontal-card.variant-outlined{border:1px solid var(--surface-border)}.horizontal-card.variant-default{background:var(--surface-section)}.horizontal-card.hoverable:hover{transform:translateY(-2px)}.horizontal-card.interactive{cursor:pointer;-webkit-user-select:none;user-select:none}.horizontal-card.interactive:focus{outline:none;box-shadow:0 0 0 3px rgba(var(--primary-500-rgb, 59, 130, 246),.2)}.horizontal-card.interactive:focus:not(:focus-visible){box-shadow:none}.horizontal-card.interactive:active{transform:translateY(0)}.horizontal-card.disabled{opacity:.6;pointer-events:none;cursor:not-allowed}.horizontal-card.loading{pointer-events:none}.horizontal-side{display:flex;
|
|
775
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", 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 }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", 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 }, 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: { 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 <!-- Contenu lat\u00E9ral -->\n <div class=\"horizontal-side\">\n @if (loading()) {\n <div class=\"horizontal-skeleton\"></div>\n } @else {\n <ng-content select=\"[horizontal-side]\"></ng-content>\n }\n </div>\n\n <!-- Contenu principal -->\n <div class=\"horizontal-content\">\n @if (loading()) {\n <div class=\"horizontal-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 <!-- 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 }\n </div>\n</div>", styles: [".horizontal-card{background:var(--surface-card);border-radius:var(--border-radius-lg, .75rem);overflow:hidden;transition:all .2s ease;width:100%;display:flex;flex-direction:row;align-items:stretch;gap:var(--horizontal-gap, var(--spacing-md));position:relative}.horizontal-card.variant-elevated{box-shadow:0 1px 3px #0000001a,0 1px 2px #0000000f}.horizontal-card.variant-elevated.hoverable:hover{box-shadow:0 4px 6px #0000001a,0 2px 4px #0000000f}.horizontal-card.variant-outlined{border:1px solid var(--surface-border)}.horizontal-card.variant-default{background:var(--surface-section)}.horizontal-card.hoverable:hover{transform:translateY(-2px)}.horizontal-card.interactive{cursor:pointer;-webkit-user-select:none;user-select:none}.horizontal-card.interactive:focus{outline:none;box-shadow:0 0 0 3px rgba(var(--primary-500-rgb, 59, 130, 246),.2)}.horizontal-card.interactive:focus:not(:focus-visible){box-shadow:none}.horizontal-card.interactive:active{transform:translateY(0)}.horizontal-card.disabled{opacity:.6;pointer-events:none;cursor:not-allowed}.horizontal-card.loading{pointer-events:none}.horizontal-side{display:flex;justify-content:center;background:var(--surface-ground);overflow:hidden;border:none;width:var(--horizontal-side-width, var(--size-48));flex-shrink:0;position:relative}.horizontal-side img{width:100%;height:100%;object-fit:cover;display:block}.horizontal-skeleton{width:100%;height:100%;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}.horizontal-content{flex:1;min-width:0;display:flex;flex-direction:column;padding:var(--horizontal-content-padding, var(--spacing-md));gap:var(--spacing-sm)}[horizontal-header]{margin:0;font-size:var(--font-size-lg, 1.125rem);font-weight:600;line-height:1.4;color:var(--text-color)}[horizontal-actions]{margin-top:auto;display:flex;gap:var(--spacing-sm);align-items:center}.horizontal-loading{display:flex;flex-direction:column;gap:var(--spacing-sm);animation:pulse 1.5s ease-in-out infinite}.skeleton-line{height:var(--size-4);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:var(--spacing-xs)}.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: 48em){.horizontal-card{flex-direction:column}.horizontal-side{width:100%;height:var(--horizontal-mobile-height, var(--size-48));min-height:var(--size-44)}.horizontal-content{padding:var(--spacing-sm)}[horizontal-actions]{flex-wrap:wrap}}@media (max-width: 30em){.horizontal-side{height:auto;min-height:var(--size-36);padding:var(--spacing-sm)}.horizontal-content{padding:var(--spacing-xs)}[horizontal-header]{font-size:var(--font-size-base, 1rem)}[horizontal-actions]{flex-direction:column}[horizontal-actions]>*{width:100%;display:flex}[horizontal-actions]>* button{width:100%;min-width:100%;flex:1}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
776
776
|
}
|
|
777
777
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: PshHorizontalCardComponent, decorators: [{
|
|
778
778
|
type: Component,
|
|
779
|
-
args: [{ selector: 'psh-horizontal-card', imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, 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 <!-- Contenu lat\u00E9ral -->\n <div class=\"horizontal-side\">\n @if (loading()) {\n <div class=\"horizontal-skeleton\"></div>\n } @else {\n <ng-content select=\"[horizontal-side]\"></ng-content>\n }\n </div>\n\n <!-- Contenu principal -->\n <div class=\"horizontal-content\">\n @if (loading()) {\n <div class=\"horizontal-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 <!-- 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 }\n </div>\n</div>", styles: [".horizontal-card{background:var(--surface-card);border-radius:var(--border-radius-lg, .75rem);overflow:hidden;transition:all .2s ease;width:100%;display:flex;flex-direction:row;align-items:stretch;gap:var(--horizontal-gap, var(--spacing-md));position:relative}.horizontal-card.variant-elevated{box-shadow:0 1px 3px #0000001a,0 1px 2px #0000000f}.horizontal-card.variant-elevated.hoverable:hover{box-shadow:0 4px 6px #0000001a,0 2px 4px #0000000f}.horizontal-card.variant-outlined{border:1px solid var(--surface-border)}.horizontal-card.variant-default{background:var(--surface-section)}.horizontal-card.hoverable:hover{transform:translateY(-2px)}.horizontal-card.interactive{cursor:pointer;-webkit-user-select:none;user-select:none}.horizontal-card.interactive:focus{outline:none;box-shadow:0 0 0 3px rgba(var(--primary-500-rgb, 59, 130, 246),.2)}.horizontal-card.interactive:focus:not(:focus-visible){box-shadow:none}.horizontal-card.interactive:active{transform:translateY(0)}.horizontal-card.disabled{opacity:.6;pointer-events:none;cursor:not-allowed}.horizontal-card.loading{pointer-events:none}.horizontal-side{display:flex;
|
|
779
|
+
args: [{ selector: 'psh-horizontal-card', imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, 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 <!-- Contenu lat\u00E9ral -->\n <div class=\"horizontal-side\">\n @if (loading()) {\n <div class=\"horizontal-skeleton\"></div>\n } @else {\n <ng-content select=\"[horizontal-side]\"></ng-content>\n }\n </div>\n\n <!-- Contenu principal -->\n <div class=\"horizontal-content\">\n @if (loading()) {\n <div class=\"horizontal-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 <!-- 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 }\n </div>\n</div>", styles: [".horizontal-card{background:var(--surface-card);border-radius:var(--border-radius-lg, .75rem);overflow:hidden;transition:all .2s ease;width:100%;display:flex;flex-direction:row;align-items:stretch;gap:var(--horizontal-gap, var(--spacing-md));position:relative}.horizontal-card.variant-elevated{box-shadow:0 1px 3px #0000001a,0 1px 2px #0000000f}.horizontal-card.variant-elevated.hoverable:hover{box-shadow:0 4px 6px #0000001a,0 2px 4px #0000000f}.horizontal-card.variant-outlined{border:1px solid var(--surface-border)}.horizontal-card.variant-default{background:var(--surface-section)}.horizontal-card.hoverable:hover{transform:translateY(-2px)}.horizontal-card.interactive{cursor:pointer;-webkit-user-select:none;user-select:none}.horizontal-card.interactive:focus{outline:none;box-shadow:0 0 0 3px rgba(var(--primary-500-rgb, 59, 130, 246),.2)}.horizontal-card.interactive:focus:not(:focus-visible){box-shadow:none}.horizontal-card.interactive:active{transform:translateY(0)}.horizontal-card.disabled{opacity:.6;pointer-events:none;cursor:not-allowed}.horizontal-card.loading{pointer-events:none}.horizontal-side{display:flex;justify-content:center;background:var(--surface-ground);overflow:hidden;border:none;width:var(--horizontal-side-width, var(--size-48));flex-shrink:0;position:relative}.horizontal-side img{width:100%;height:100%;object-fit:cover;display:block}.horizontal-skeleton{width:100%;height:100%;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}.horizontal-content{flex:1;min-width:0;display:flex;flex-direction:column;padding:var(--horizontal-content-padding, var(--spacing-md));gap:var(--spacing-sm)}[horizontal-header]{margin:0;font-size:var(--font-size-lg, 1.125rem);font-weight:600;line-height:1.4;color:var(--text-color)}[horizontal-actions]{margin-top:auto;display:flex;gap:var(--spacing-sm);align-items:center}.horizontal-loading{display:flex;flex-direction:column;gap:var(--spacing-sm);animation:pulse 1.5s ease-in-out infinite}.skeleton-line{height:var(--size-4);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:var(--spacing-xs)}.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: 48em){.horizontal-card{flex-direction:column}.horizontal-side{width:100%;height:var(--horizontal-mobile-height, var(--size-48));min-height:var(--size-44)}.horizontal-content{padding:var(--spacing-sm)}[horizontal-actions]{flex-wrap:wrap}}@media (max-width: 30em){.horizontal-side{height:auto;min-height:var(--size-36);padding:var(--spacing-sm)}.horizontal-content{padding:var(--spacing-xs)}[horizontal-header]{font-size:var(--font-size-base, 1rem)}[horizontal-actions]{flex-direction:column}[horizontal-actions]>*{width:100%;display:flex}[horizontal-actions]>* button{width:100%;min-width:100%;flex:1}}\n"] }]
|
|
780
780
|
}], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], hoverable: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoverable", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], cssClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "cssClass", required: false }] }], customStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "customStyle", required: false }] }], sideWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "sideWidth", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], sidePadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidePadding", required: false }] }], contentPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentPadding", required: false }] }], mobileHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileHeight", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
|
|
781
781
|
|
|
782
782
|
/**
|