ps-helix 2.0.4 → 2.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
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.5"
|
|
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.5
|
|
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
|
@@ -66,11 +66,11 @@ class PshAlertComponent {
|
|
|
66
66
|
this.closed.emit();
|
|
67
67
|
}
|
|
68
68
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: PshAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
69
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", 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: { closed: "closed" }, ngImport: i0, template: "<div\r\n class=\"alert\"\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{--alert-animation-duration: var(--animation-duration-fast);--alert-animation-distance: var(--animation-distance-sm);--alert-icon-size: var(--icon-size-md);--alert-icon-size-sm: var(--icon-size-sm);--alert-icon-size-lg: var(--icon-size-lg);--alert-dismiss-hover-bg: rgba(0, 0, 0, .1);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:var(--border-width-1) solid transparent;animation:slideIn var(--alert-animation-duration) var(--animation-easing-default)}.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:var(--alert-icon-size);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:var(--alert-icon-size-sm)}.alert.large{padding:var(--spacing-lg) var(--spacing-xl);font-size:var(--font-size-lg)}.alert.large i{font-size:var(--alert-icon-size-lg)}.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:var(--alert-dismiss-hover-bg)}@keyframes slideIn{0%{opacity:0;transform:translateY(calc(-1 * var(--alert-animation-distance)))}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
69
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", 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: { closed: "closed" }, ngImport: i0, template: "<div\r\n class=\"alert\"\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{--alert-animation-duration: var(--animation-duration-fast);--alert-animation-distance: var(--animation-distance-sm);--alert-icon-size: var(--icon-size-md);--alert-icon-size-sm: var(--icon-size-sm);--alert-icon-size-lg: var(--icon-size-lg);--alert-dismiss-hover-bg: rgba(0, 0, 0, .1);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:var(--border-width-1) solid transparent;animation:slideIn var(--alert-animation-duration) var(--animation-easing-default)}.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:var(--alert-icon-size);flex-shrink:0}.alert-message{color:inherit;font-size:var(--font-size-base);line-height:var(--line-height-relaxed);word-break:break-word;overflow-wrap:break-word}.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:var(--alert-icon-size-sm)}.alert.large{padding:var(--spacing-lg) var(--spacing-xl);font-size:var(--font-size-lg)}.alert.large i{font-size:var(--alert-icon-size-lg)}.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:var(--alert-dismiss-hover-bg)}@keyframes slideIn{0%{opacity:0;transform:translateY(calc(-1 * var(--alert-animation-distance)))}to{opacity:1;transform:translateY(0)}}@media (max-width: 768px){.alert{padding:var(--spacing-sm) var(--spacing-md);gap:var(--spacing-sm)}.alert-content{gap:var(--spacing-sm)}.alert-message{font-size:var(--font-size-sm);word-break:break-word;overflow-wrap:break-word}.alert i{font-size:var(--icon-size-sm)}.alert.large{padding:var(--spacing-md) var(--spacing-lg)}.alert.large i{font-size:var(--icon-size-md)}}@media (max-width: 400px){.alert{padding:var(--spacing-xs) var(--spacing-sm);gap:var(--spacing-xs)}.alert-content{gap:var(--spacing-xs)}.alert-message{font-size:var(--font-size-xs)}.alert i{font-size:var(--icon-size-xs)}.alert.small{padding:var(--spacing-2xs) var(--spacing-xs)}.alert.medium{padding:var(--spacing-xs) var(--spacing-sm)}.alert.large{padding:var(--spacing-sm) var(--spacing-md)}.alert.large i{font-size:var(--icon-size-sm)}.alert-dismiss{padding:var(--spacing-2xs)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
70
70
|
}
|
|
71
71
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: PshAlertComponent, decorators: [{
|
|
72
72
|
type: Component,
|
|
73
|
-
args: [{ selector: 'psh-alert', imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n class=\"alert\"\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{--alert-animation-duration: var(--animation-duration-fast);--alert-animation-distance: var(--animation-distance-sm);--alert-icon-size: var(--icon-size-md);--alert-icon-size-sm: var(--icon-size-sm);--alert-icon-size-lg: var(--icon-size-lg);--alert-dismiss-hover-bg: rgba(0, 0, 0, .1);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:var(--border-width-1) solid transparent;animation:slideIn var(--alert-animation-duration) var(--animation-easing-default)}.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:var(--alert-icon-size);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:var(--alert-icon-size-sm)}.alert.large{padding:var(--spacing-lg) var(--spacing-xl);font-size:var(--font-size-lg)}.alert.large i{font-size:var(--alert-icon-size-lg)}.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:var(--alert-dismiss-hover-bg)}@keyframes slideIn{0%{opacity:0;transform:translateY(calc(-1 * var(--alert-animation-distance)))}to{opacity:1;transform:translateY(0)}}\n"] }]
|
|
73
|
+
args: [{ selector: 'psh-alert', imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n class=\"alert\"\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{--alert-animation-duration: var(--animation-duration-fast);--alert-animation-distance: var(--animation-distance-sm);--alert-icon-size: var(--icon-size-md);--alert-icon-size-sm: var(--icon-size-sm);--alert-icon-size-lg: var(--icon-size-lg);--alert-dismiss-hover-bg: rgba(0, 0, 0, .1);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:var(--border-width-1) solid transparent;animation:slideIn var(--alert-animation-duration) var(--animation-easing-default)}.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:var(--alert-icon-size);flex-shrink:0}.alert-message{color:inherit;font-size:var(--font-size-base);line-height:var(--line-height-relaxed);word-break:break-word;overflow-wrap:break-word}.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:var(--alert-icon-size-sm)}.alert.large{padding:var(--spacing-lg) var(--spacing-xl);font-size:var(--font-size-lg)}.alert.large i{font-size:var(--alert-icon-size-lg)}.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:var(--alert-dismiss-hover-bg)}@keyframes slideIn{0%{opacity:0;transform:translateY(calc(-1 * var(--alert-animation-distance)))}to{opacity:1;transform:translateY(0)}}@media (max-width: 768px){.alert{padding:var(--spacing-sm) var(--spacing-md);gap:var(--spacing-sm)}.alert-content{gap:var(--spacing-sm)}.alert-message{font-size:var(--font-size-sm);word-break:break-word;overflow-wrap:break-word}.alert i{font-size:var(--icon-size-sm)}.alert.large{padding:var(--spacing-md) var(--spacing-lg)}.alert.large i{font-size:var(--icon-size-md)}}@media (max-width: 400px){.alert{padding:var(--spacing-xs) var(--spacing-sm);gap:var(--spacing-xs)}.alert-content{gap:var(--spacing-xs)}.alert-message{font-size:var(--font-size-xs)}.alert i{font-size:var(--icon-size-xs)}.alert.small{padding:var(--spacing-2xs) var(--spacing-xs)}.alert.medium{padding:var(--spacing-xs) var(--spacing-sm)}.alert.large{padding:var(--spacing-sm) var(--spacing-md)}.alert.large i{font-size:var(--icon-size-sm)}.alert-dismiss{padding:var(--spacing-2xs)}}\n"] }]
|
|
74
74
|
}], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], iconPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconPosition", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], dismissLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissLabel", required: false }] }], ariaLive: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLive", required: false }] }], content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
|
|
75
75
|
|
|
76
76
|
// Default configuration
|