ps-helix 4.0.7 → 4.1.0
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 +841 -654
- package/fesm2022/ps-helix.mjs.map +1 -1
- package/package.json +1 -1
- package/types/ps-helix.d.ts +52 -13
package/fesm2022/ps-helix.mjs
CHANGED
|
@@ -30,37 +30,37 @@ const DEFAULT_CONFIG$2 = {
|
|
|
30
30
|
class PshAlertComponent {
|
|
31
31
|
constructor() {
|
|
32
32
|
// Inputs
|
|
33
|
-
this.type = input(DEFAULT_CONFIG$2.type, ...(ngDevMode ? [{ debugName: "type" }] : []));
|
|
34
|
-
this.iconPosition = input(DEFAULT_CONFIG$2.iconPosition, ...(ngDevMode ? [{ debugName: "iconPosition" }] : []));
|
|
35
|
-
this.closable = input(DEFAULT_CONFIG$2.closable, ...(ngDevMode ? [{ debugName: "closable" }] : []));
|
|
36
|
-
this.size = input(DEFAULT_CONFIG$2.size, ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
37
|
-
this.showIcon = input(DEFAULT_CONFIG$2.showIcon, ...(ngDevMode ? [{ debugName: "showIcon" }] : []));
|
|
38
|
-
this.role = input(...(ngDevMode ? [undefined, { debugName: "role" }] : []));
|
|
39
|
-
this.icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
|
|
40
|
-
this.ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : []));
|
|
41
|
-
this.dismissLabel = input(DEFAULT_LABELS.dismiss, ...(ngDevMode ? [{ debugName: "dismissLabel" }] : []));
|
|
42
|
-
this.ariaLive = input(...(ngDevMode ? [undefined, { debugName: "ariaLive" }] : []));
|
|
43
|
-
this.content = input('', ...(ngDevMode ? [{ debugName: "content" }] : []));
|
|
33
|
+
this.type = input(DEFAULT_CONFIG$2.type, ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
|
|
34
|
+
this.iconPosition = input(DEFAULT_CONFIG$2.iconPosition, ...(ngDevMode ? [{ debugName: "iconPosition" }] : /* istanbul ignore next */ []));
|
|
35
|
+
this.closable = input(DEFAULT_CONFIG$2.closable, ...(ngDevMode ? [{ debugName: "closable" }] : /* istanbul ignore next */ []));
|
|
36
|
+
this.size = input(DEFAULT_CONFIG$2.size, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
37
|
+
this.showIcon = input(DEFAULT_CONFIG$2.showIcon, ...(ngDevMode ? [{ debugName: "showIcon" }] : /* istanbul ignore next */ []));
|
|
38
|
+
this.role = input(...(ngDevMode ? [undefined, { debugName: "role" }] : /* istanbul ignore next */ []));
|
|
39
|
+
this.icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
|
|
40
|
+
this.ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
41
|
+
this.dismissLabel = input(DEFAULT_LABELS.dismiss, ...(ngDevMode ? [{ debugName: "dismissLabel" }] : /* istanbul ignore next */ []));
|
|
42
|
+
this.ariaLive = input(...(ngDevMode ? [undefined, { debugName: "ariaLive" }] : /* istanbul ignore next */ []));
|
|
43
|
+
this.content = input('', ...(ngDevMode ? [{ debugName: "content" }] : /* istanbul ignore next */ []));
|
|
44
44
|
// Outputs
|
|
45
45
|
this.closed = output();
|
|
46
46
|
// Computed values
|
|
47
|
-
this.defaultIcon = computed(() => DEFAULT_ICONS[this.type()] || 'info', ...(ngDevMode ? [{ debugName: "defaultIcon" }] : []));
|
|
48
|
-
this.getIcon = computed(() => this.icon() || this.defaultIcon(), ...(ngDevMode ? [{ debugName: "getIcon" }] : []));
|
|
49
|
-
this.computedAriaLive = computed(() => this.ariaLive() || (['warning', 'danger'].includes(this.type()) ? 'assertive' : 'polite'), ...(ngDevMode ? [{ debugName: "computedAriaLive" }] : []));
|
|
50
|
-
this.computedRole = computed(() => this.role() || (['warning', 'danger'].includes(this.type()) ? 'alert' : 'status'), ...(ngDevMode ? [{ debugName: "computedRole" }] : []));
|
|
47
|
+
this.defaultIcon = computed(() => DEFAULT_ICONS[this.type()] || 'info', ...(ngDevMode ? [{ debugName: "defaultIcon" }] : /* istanbul ignore next */ []));
|
|
48
|
+
this.getIcon = computed(() => this.icon() || this.defaultIcon(), ...(ngDevMode ? [{ debugName: "getIcon" }] : /* istanbul ignore next */ []));
|
|
49
|
+
this.computedAriaLive = computed(() => this.ariaLive() || (['warning', 'danger'].includes(this.type()) ? 'assertive' : 'polite'), ...(ngDevMode ? [{ debugName: "computedAriaLive" }] : /* istanbul ignore next */ []));
|
|
50
|
+
this.computedRole = computed(() => this.role() || (['warning', 'danger'].includes(this.type()) ? 'alert' : 'status'), ...(ngDevMode ? [{ debugName: "computedRole" }] : /* istanbul ignore next */ []));
|
|
51
51
|
this.state = computed(() => {
|
|
52
52
|
if (this.closable())
|
|
53
53
|
return 'closable';
|
|
54
54
|
return this.type();
|
|
55
|
-
}, ...(ngDevMode ? [{ debugName: "state" }] : []));
|
|
55
|
+
}, ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
|
|
56
56
|
}
|
|
57
57
|
handleClose() {
|
|
58
58
|
this.closed.emit();
|
|
59
59
|
}
|
|
60
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
61
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
60
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: PshAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
61
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", 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\n class=\"alert\"\n [class.small]=\"size() === 'small'\"\n [class.large]=\"size() === 'large'\"\n [class]=\"type()\"\n [attr.role]=\"computedRole()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-live]=\"computedAriaLive()\"\n [attr.data-state]=\"state()\"\n>\n <div class=\"alert-content\" [class.icon-right]=\"iconPosition() === 'right'\">\n @if (showIcon()) {\n <i class=\"ph ph-{{ getIcon() }}\" aria-hidden=\"true\"></i>\n }\n <div class=\"alert-message\">\n <ng-content>{{ content() }}</ng-content>\n </div>\n </div>\n \n @if (closable()) {\n <button\n type=\"button\"\n class=\"alert-dismiss\"\n (click)=\"handleClose()\"\n [attr.aria-label]=\"dismissLabel()\"\n >\n <i class=\"ph ph-x\" aria-hidden=\"true\"></i>\n </button>\n }\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 }); }
|
|
62
62
|
}
|
|
63
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
63
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: PshAlertComponent, decorators: [{
|
|
64
64
|
type: Component,
|
|
65
65
|
args: [{ selector: 'psh-alert', imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"alert\"\n [class.small]=\"size() === 'small'\"\n [class.large]=\"size() === 'large'\"\n [class]=\"type()\"\n [attr.role]=\"computedRole()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-live]=\"computedAriaLive()\"\n [attr.data-state]=\"state()\"\n>\n <div class=\"alert-content\" [class.icon-right]=\"iconPosition() === 'right'\">\n @if (showIcon()) {\n <i class=\"ph ph-{{ getIcon() }}\" aria-hidden=\"true\"></i>\n }\n <div class=\"alert-message\">\n <ng-content>{{ content() }}</ng-content>\n </div>\n </div>\n \n @if (closable()) {\n <button\n type=\"button\"\n class=\"alert-dismiss\"\n (click)=\"handleClose()\"\n [attr.aria-label]=\"dismissLabel()\"\n >\n <i class=\"ph ph-x\" aria-hidden=\"true\"></i>\n </button>\n }\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"] }]
|
|
66
66
|
}], 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"] }] } });
|
|
@@ -82,32 +82,32 @@ const DEFAULT_STATUS_COLORS = {
|
|
|
82
82
|
class PshAvatarComponent {
|
|
83
83
|
constructor() {
|
|
84
84
|
// Model inputs with defaults
|
|
85
|
-
this.size = model(DEFAULT_CONFIG$1.size, ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
86
|
-
this.shape = model(DEFAULT_CONFIG$1.shape, ...(ngDevMode ? [{ debugName: "shape" }] : []));
|
|
87
|
-
this.src = model(...(ngDevMode ? [undefined, { debugName: "src" }] : []));
|
|
88
|
-
this.alt = model(DEFAULT_CONFIG$1.alt, ...(ngDevMode ? [{ debugName: "alt" }] : []));
|
|
85
|
+
this.size = model(DEFAULT_CONFIG$1.size, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
86
|
+
this.shape = model(DEFAULT_CONFIG$1.shape, ...(ngDevMode ? [{ debugName: "shape" }] : /* istanbul ignore next */ []));
|
|
87
|
+
this.src = model(...(ngDevMode ? [undefined, { debugName: "src" }] : /* istanbul ignore next */ []));
|
|
88
|
+
this.alt = model(DEFAULT_CONFIG$1.alt, ...(ngDevMode ? [{ debugName: "alt" }] : /* istanbul ignore next */ []));
|
|
89
89
|
// Regular inputs
|
|
90
|
-
this.initials = input('', ...(ngDevMode ? [{ debugName: "initials" }] : []));
|
|
91
|
-
this.icon = input(DEFAULT_CONFIG$1.icon, ...(ngDevMode ? [{ debugName: "icon" }] : []));
|
|
92
|
-
this.status = input(...(ngDevMode ? [undefined, { debugName: "status" }] : []));
|
|
93
|
-
this.ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : []));
|
|
90
|
+
this.initials = input('', ...(ngDevMode ? [{ debugName: "initials" }] : /* istanbul ignore next */ []));
|
|
91
|
+
this.icon = input(DEFAULT_CONFIG$1.icon, ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
|
|
92
|
+
this.status = input(...(ngDevMode ? [undefined, { debugName: "status" }] : /* istanbul ignore next */ []));
|
|
93
|
+
this.ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
94
94
|
// Computed values
|
|
95
|
-
this.hasImage = computed(() => !!this.src(), ...(ngDevMode ? [{ debugName: "hasImage" }] : []));
|
|
96
|
-
this.hasInitials = computed(() => !!this.initials() && !this.hasImage(), ...(ngDevMode ? [{ debugName: "hasInitials" }] : []));
|
|
97
|
-
this.hasIcon = computed(() => !this.hasImage() && !this.hasInitials(), ...(ngDevMode ? [{ debugName: "hasIcon" }] : []));
|
|
98
|
-
this.computedAriaLabel = computed(() => this.ariaLabel() || this.alt(), ...(ngDevMode ? [{ debugName: "computedAriaLabel" }] : []));
|
|
95
|
+
this.hasImage = computed(() => !!this.src(), ...(ngDevMode ? [{ debugName: "hasImage" }] : /* istanbul ignore next */ []));
|
|
96
|
+
this.hasInitials = computed(() => !!this.initials() && !this.hasImage(), ...(ngDevMode ? [{ debugName: "hasInitials" }] : /* istanbul ignore next */ []));
|
|
97
|
+
this.hasIcon = computed(() => !this.hasImage() && !this.hasInitials(), ...(ngDevMode ? [{ debugName: "hasIcon" }] : /* istanbul ignore next */ []));
|
|
98
|
+
this.computedAriaLabel = computed(() => this.ariaLabel() || this.alt(), ...(ngDevMode ? [{ debugName: "computedAriaLabel" }] : /* istanbul ignore next */ []));
|
|
99
99
|
this.statusColor = computed(() => {
|
|
100
100
|
const currentStatus = this.status();
|
|
101
101
|
if (!currentStatus)
|
|
102
102
|
return undefined;
|
|
103
103
|
return DEFAULT_STATUS_COLORS[currentStatus];
|
|
104
|
-
}, ...(ngDevMode ? [{ debugName: "statusColor" }] : []));
|
|
105
|
-
this.state = computed(() => this.status() || 'default', ...(ngDevMode ? [{ debugName: "state" }] : []));
|
|
104
|
+
}, ...(ngDevMode ? [{ debugName: "statusColor" }] : /* istanbul ignore next */ []));
|
|
105
|
+
this.state = computed(() => this.status() || 'default', ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
|
|
106
106
|
}
|
|
107
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
108
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
107
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: PshAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
108
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", type: PshAvatarComponent, isStandalone: true, selector: "psh-avatar", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, initials: { classPropertyName: "initials", publicName: "initials", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { size: "sizeChange", shape: "shapeChange", src: "srcChange", alt: "altChange" }, ngImport: i0, template: "<div \n class=\"avatar\"\n [class.circle]=\"shape() === 'circle'\"\n [class.square]=\"shape() === 'square'\"\n [class.small]=\"size() === 'small'\"\n [class.large]=\"size() === 'large'\"\n [class.xlarge]=\"size() === 'xlarge'\"\n role=\"img\"\n [attr.aria-label]=\"computedAriaLabel()\"\n [attr.data-state]=\"state()\"\n>\n @if (hasImage()) {\n <img [src]=\"src()\" [attr.alt]=\"alt()\" class=\"avatar-image\" />\n } @else if (hasInitials()) {\n <span class=\"avatar-initials\">{{ initials() }}</span>\n } @else if (hasIcon()) {\n <i class=\"ph ph-{{ icon() }}\" aria-hidden=\"true\"></i>\n }\n\n @if (status()) {\n <span \n class=\"avatar-status\"\n [class]=\"status()\"\n [style.background-color]=\"statusColor()\"\n [attr.aria-label]=\"status()\"\n ></span>\n }\n</div>", styles: [".avatar{--avatar-size-sm: var(--size-8);--avatar-size-md: var(--size-10);--avatar-size-lg: var(--size-12);--avatar-size-xl: var(--size-16);--avatar-icon-size-sm: var(--icon-size-sm);--avatar-icon-size-md: var(--icon-size-md);--avatar-icon-size-lg: var(--icon-size-lg);--avatar-icon-size-xl: var(--icon-size-xl);--avatar-status-size-sm: var(--size-2-5);--avatar-status-size-md: var(--size-3);--avatar-status-size-lg: var(--size-3-5);--avatar-status-size-xl: var(--size-4);--avatar-status-border: var(--border-width-2);--avatar-status-offset-sm: calc(-1 * var(--size-px));--avatar-status-offset-md: calc(-1 * var(--border-width-2));--avatar-status-offset-xl: calc(-1 * var(--size-1));position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--avatar-size-md);height:var(--avatar-size-md);background:var(--surface-ground);color:var(--text-color);font-weight:var(--font-weight-medium)}.avatar:not(:has(img)){background:rgba(var(--primary-color-rgb),.1);color:var(--primary-color);overflow:hidden}.avatar:not(:has(img)):before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(45deg,transparent,rgba(var(--primary-color-rgb),.05));z-index:1}.avatar i,.avatar-initials{position:relative;z-index:2}.avatar.circle{border-radius:50%}.avatar.square{border-radius:var(--border-radius)}.avatar.small{width:var(--avatar-size-sm);height:var(--avatar-size-sm);font-size:var(--font-size-sm)}.avatar.small i{font-size:var(--avatar-icon-size-sm)}.avatar.large{width:var(--avatar-size-lg);height:var(--avatar-size-lg);font-size:var(--font-size-lg)}.avatar.large i{font-size:var(--avatar-icon-size-lg)}.avatar.xlarge{width:var(--avatar-size-xl);height:var(--avatar-size-xl);font-size:var(--font-size-xl)}.avatar.xlarge i{font-size:var(--avatar-icon-size-xl)}.avatar-image{width:100%;height:100%;object-fit:cover;border-radius:inherit;overflow:hidden}.avatar-initials{line-height:1;text-transform:uppercase;border-radius:inherit}.avatar-status{position:absolute;bottom:var(--avatar-status-offset-md);right:var(--avatar-status-offset-md);width:var(--avatar-status-size-md);height:var(--avatar-status-size-md);border:var(--avatar-status-border) solid var(--surface-card);border-radius:var(--radius-full);z-index:3}.avatar.small .avatar-status{width:var(--avatar-status-size-sm);height:var(--avatar-status-size-sm);bottom:var(--avatar-status-offset-sm);right:var(--avatar-status-offset-sm)}.avatar.large .avatar-status{width:var(--avatar-status-size-lg);height:var(--avatar-status-size-lg);bottom:var(--avatar-status-offset-md);right:var(--avatar-status-offset-md)}.avatar.xlarge .avatar-status{width:var(--avatar-status-size-xl);height:var(--avatar-status-size-xl);bottom:var(--avatar-status-offset-xl);right:var(--avatar-status-offset-xl)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
109
109
|
}
|
|
110
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
110
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: PshAvatarComponent, decorators: [{
|
|
111
111
|
type: Component,
|
|
112
112
|
args: [{ selector: 'psh-avatar', imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div \n class=\"avatar\"\n [class.circle]=\"shape() === 'circle'\"\n [class.square]=\"shape() === 'square'\"\n [class.small]=\"size() === 'small'\"\n [class.large]=\"size() === 'large'\"\n [class.xlarge]=\"size() === 'xlarge'\"\n role=\"img\"\n [attr.aria-label]=\"computedAriaLabel()\"\n [attr.data-state]=\"state()\"\n>\n @if (hasImage()) {\n <img [src]=\"src()\" [attr.alt]=\"alt()\" class=\"avatar-image\" />\n } @else if (hasInitials()) {\n <span class=\"avatar-initials\">{{ initials() }}</span>\n } @else if (hasIcon()) {\n <i class=\"ph ph-{{ icon() }}\" aria-hidden=\"true\"></i>\n }\n\n @if (status()) {\n <span \n class=\"avatar-status\"\n [class]=\"status()\"\n [style.background-color]=\"statusColor()\"\n [attr.aria-label]=\"status()\"\n ></span>\n }\n</div>", styles: [".avatar{--avatar-size-sm: var(--size-8);--avatar-size-md: var(--size-10);--avatar-size-lg: var(--size-12);--avatar-size-xl: var(--size-16);--avatar-icon-size-sm: var(--icon-size-sm);--avatar-icon-size-md: var(--icon-size-md);--avatar-icon-size-lg: var(--icon-size-lg);--avatar-icon-size-xl: var(--icon-size-xl);--avatar-status-size-sm: var(--size-2-5);--avatar-status-size-md: var(--size-3);--avatar-status-size-lg: var(--size-3-5);--avatar-status-size-xl: var(--size-4);--avatar-status-border: var(--border-width-2);--avatar-status-offset-sm: calc(-1 * var(--size-px));--avatar-status-offset-md: calc(-1 * var(--border-width-2));--avatar-status-offset-xl: calc(-1 * var(--size-1));position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--avatar-size-md);height:var(--avatar-size-md);background:var(--surface-ground);color:var(--text-color);font-weight:var(--font-weight-medium)}.avatar:not(:has(img)){background:rgba(var(--primary-color-rgb),.1);color:var(--primary-color);overflow:hidden}.avatar:not(:has(img)):before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(45deg,transparent,rgba(var(--primary-color-rgb),.05));z-index:1}.avatar i,.avatar-initials{position:relative;z-index:2}.avatar.circle{border-radius:50%}.avatar.square{border-radius:var(--border-radius)}.avatar.small{width:var(--avatar-size-sm);height:var(--avatar-size-sm);font-size:var(--font-size-sm)}.avatar.small i{font-size:var(--avatar-icon-size-sm)}.avatar.large{width:var(--avatar-size-lg);height:var(--avatar-size-lg);font-size:var(--font-size-lg)}.avatar.large i{font-size:var(--avatar-icon-size-lg)}.avatar.xlarge{width:var(--avatar-size-xl);height:var(--avatar-size-xl);font-size:var(--font-size-xl)}.avatar.xlarge i{font-size:var(--avatar-icon-size-xl)}.avatar-image{width:100%;height:100%;object-fit:cover;border-radius:inherit;overflow:hidden}.avatar-initials{line-height:1;text-transform:uppercase;border-radius:inherit}.avatar-status{position:absolute;bottom:var(--avatar-status-offset-md);right:var(--avatar-status-offset-md);width:var(--avatar-status-size-md);height:var(--avatar-status-size-md);border:var(--avatar-status-border) solid var(--surface-card);border-radius:var(--radius-full);z-index:3}.avatar.small .avatar-status{width:var(--avatar-status-size-sm);height:var(--avatar-status-size-sm);bottom:var(--avatar-status-offset-sm);right:var(--avatar-status-offset-sm)}.avatar.large .avatar-status{width:var(--avatar-status-size-lg);height:var(--avatar-status-size-lg);bottom:var(--avatar-status-offset-md);right:var(--avatar-status-offset-md)}.avatar.xlarge .avatar-status{width:var(--avatar-status-size-xl);height:var(--avatar-status-size-xl);bottom:var(--avatar-status-offset-xl);right:var(--avatar-status-offset-xl)}\n"] }]
|
|
113
113
|
}], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }, { type: i0.Output, args: ["sizeChange"] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }, { type: i0.Output, args: ["shapeChange"] }], src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }, { type: i0.Output, args: ["srcChange"] }], alt: [{ type: i0.Input, args: [{ isSignal: true, alias: "alt", required: false }] }, { type: i0.Output, args: ["altChange"] }], initials: [{ type: i0.Input, args: [{ isSignal: true, alias: "initials", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
|
|
@@ -122,21 +122,21 @@ const DEFAULT_CONFIG = {
|
|
|
122
122
|
};
|
|
123
123
|
class PshBadgeComponent {
|
|
124
124
|
constructor() {
|
|
125
|
-
this.variant = input(DEFAULT_CONFIG.variant, ...(ngDevMode ? [{ debugName: "variant" }] : []));
|
|
126
|
-
this.size = input(DEFAULT_CONFIG.size, ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
127
|
-
this.displayType = input(DEFAULT_CONFIG.displayType, ...(ngDevMode ? [{ debugName: "displayType" }] : []));
|
|
128
|
-
this.content = input('', ...(ngDevMode ? [{ debugName: "content" }] : []));
|
|
129
|
-
this.visible = input(true, ...(ngDevMode ? [{ debugName: "visible" }] : []));
|
|
130
|
-
this.value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
|
|
131
|
-
this.max = input(DEFAULT_CONFIG.max, ...(ngDevMode ? [{ debugName: "max" }] : []));
|
|
132
|
-
this.showZero = input(DEFAULT_CONFIG.showZero, ...(ngDevMode ? [{ debugName: "showZero" }] : []));
|
|
133
|
-
this.position = input(DEFAULT_CONFIG.position, ...(ngDevMode ? [{ debugName: "position" }] : []));
|
|
134
|
-
this.overlap = input(false, ...(ngDevMode ? [{ debugName: "overlap" }] : []));
|
|
135
|
-
this.ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : []));
|
|
136
|
-
this.formatter = input(...(ngDevMode ? [undefined, { debugName: "formatter" }] : []));
|
|
125
|
+
this.variant = input(DEFAULT_CONFIG.variant, ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
126
|
+
this.size = input(DEFAULT_CONFIG.size, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
127
|
+
this.displayType = input(DEFAULT_CONFIG.displayType, ...(ngDevMode ? [{ debugName: "displayType" }] : /* istanbul ignore next */ []));
|
|
128
|
+
this.content = input('', ...(ngDevMode ? [{ debugName: "content" }] : /* istanbul ignore next */ []));
|
|
129
|
+
this.visible = input(true, ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
|
|
130
|
+
this.value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
|
|
131
|
+
this.max = input(DEFAULT_CONFIG.max, ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
|
|
132
|
+
this.showZero = input(DEFAULT_CONFIG.showZero, ...(ngDevMode ? [{ debugName: "showZero" }] : /* istanbul ignore next */ []));
|
|
133
|
+
this.position = input(DEFAULT_CONFIG.position, ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
|
|
134
|
+
this.overlap = input(false, ...(ngDevMode ? [{ debugName: "overlap" }] : /* istanbul ignore next */ []));
|
|
135
|
+
this.ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
136
|
+
this.formatter = input(...(ngDevMode ? [undefined, { debugName: "formatter" }] : /* istanbul ignore next */ []));
|
|
137
137
|
this.badgeClick = output();
|
|
138
138
|
this.valueChange = output();
|
|
139
|
-
this.computedRole = computed(() => this.displayType() === 'counter' ? 'status' : 'img', ...(ngDevMode ? [{ debugName: "computedRole" }] : []));
|
|
139
|
+
this.computedRole = computed(() => this.displayType() === 'counter' ? 'status' : 'img', ...(ngDevMode ? [{ debugName: "computedRole" }] : /* istanbul ignore next */ []));
|
|
140
140
|
this.computedAriaLabel = computed(() => {
|
|
141
141
|
const customLabel = this.ariaLabel();
|
|
142
142
|
if (customLabel)
|
|
@@ -145,23 +145,23 @@ class PshBadgeComponent {
|
|
|
145
145
|
if (content)
|
|
146
146
|
return content;
|
|
147
147
|
return this.displayValue();
|
|
148
|
-
}, ...(ngDevMode ? [{ debugName: "computedAriaLabel" }] : []));
|
|
148
|
+
}, ...(ngDevMode ? [{ debugName: "computedAriaLabel" }] : /* istanbul ignore next */ []));
|
|
149
149
|
this.state = computed(() => {
|
|
150
150
|
if (!this.visible())
|
|
151
151
|
return 'hidden';
|
|
152
152
|
if (this.overlap())
|
|
153
153
|
return 'overlap';
|
|
154
154
|
return this.displayType();
|
|
155
|
-
}, ...(ngDevMode ? [{ debugName: "state" }] : []));
|
|
156
|
-
this.isDot = computed(() => this.displayType() === 'dot', ...(ngDevMode ? [{ debugName: "isDot" }] : []));
|
|
157
|
-
this.isCounter = computed(() => this.displayType() === 'counter', ...(ngDevMode ? [{ debugName: "isCounter" }] : []));
|
|
158
|
-
this.hasValue = computed(() => this.value() !== undefined, ...(ngDevMode ? [{ debugName: "hasValue" }] : []));
|
|
155
|
+
}, ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
|
|
156
|
+
this.isDot = computed(() => this.displayType() === 'dot', ...(ngDevMode ? [{ debugName: "isDot" }] : /* istanbul ignore next */ []));
|
|
157
|
+
this.isCounter = computed(() => this.displayType() === 'counter', ...(ngDevMode ? [{ debugName: "isCounter" }] : /* istanbul ignore next */ []));
|
|
158
|
+
this.hasValue = computed(() => this.value() !== undefined, ...(ngDevMode ? [{ debugName: "hasValue" }] : /* istanbul ignore next */ []));
|
|
159
159
|
this.shouldDisplay = computed(() => {
|
|
160
160
|
const currentValue = this.value();
|
|
161
161
|
if (typeof currentValue !== 'number')
|
|
162
162
|
return true;
|
|
163
163
|
return currentValue > 0 || this.showZero();
|
|
164
|
-
}, ...(ngDevMode ? [{ debugName: "shouldDisplay" }] : []));
|
|
164
|
+
}, ...(ngDevMode ? [{ debugName: "shouldDisplay" }] : /* istanbul ignore next */ []));
|
|
165
165
|
this.formattedCustomValue = computed(() => {
|
|
166
166
|
const formatter = this.formatter();
|
|
167
167
|
const currentValue = this.value();
|
|
@@ -169,7 +169,7 @@ class PshBadgeComponent {
|
|
|
169
169
|
return null;
|
|
170
170
|
}
|
|
171
171
|
return formatter(currentValue);
|
|
172
|
-
}, ...(ngDevMode ? [{ debugName: "formattedCustomValue" }] : []));
|
|
172
|
+
}, ...(ngDevMode ? [{ debugName: "formattedCustomValue" }] : /* istanbul ignore next */ []));
|
|
173
173
|
this.formattedNumericValue = computed(() => {
|
|
174
174
|
const currentValue = this.value();
|
|
175
175
|
if (typeof currentValue !== 'number') {
|
|
@@ -180,7 +180,7 @@ class PshBadgeComponent {
|
|
|
180
180
|
}
|
|
181
181
|
const maxValue = this.max();
|
|
182
182
|
return currentValue > maxValue ? `${maxValue}+` : `${currentValue}`;
|
|
183
|
-
}, ...(ngDevMode ? [{ debugName: "formattedNumericValue" }] : []));
|
|
183
|
+
}, ...(ngDevMode ? [{ debugName: "formattedNumericValue" }] : /* istanbul ignore next */ []));
|
|
184
184
|
this.displayValue = computed(() => {
|
|
185
185
|
if (this.isDot()) {
|
|
186
186
|
return '';
|
|
@@ -193,15 +193,15 @@ class PshBadgeComponent {
|
|
|
193
193
|
return customFormatted;
|
|
194
194
|
}
|
|
195
195
|
return this.formattedNumericValue();
|
|
196
|
-
}, ...(ngDevMode ? [{ debugName: "displayValue" }] : []));
|
|
196
|
+
}, ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
|
|
197
197
|
}
|
|
198
198
|
onBadgeClick() {
|
|
199
199
|
this.badgeClick.emit();
|
|
200
200
|
}
|
|
201
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
202
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
201
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: PshBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
202
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", type: PshBadgeComponent, isStandalone: true, selector: "psh-badge", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, displayType: { classPropertyName: "displayType", publicName: "displayType", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, showZero: { classPropertyName: "showZero", publicName: "showZero", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, overlap: { classPropertyName: "overlap", publicName: "overlap", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, formatter: { classPropertyName: "formatter", publicName: "formatter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { badgeClick: "badgeClick", valueChange: "valueChange" }, ngImport: i0, template: "<div\n class=\"badge\"\n [class.primary]=\"variant() === 'primary'\"\n [class.secondary]=\"variant() === 'secondary'\"\n [class.success]=\"variant() === 'success'\"\n [class.warning]=\"variant() === 'warning'\"\n [class.danger]=\"variant() === 'danger'\"\n [class.info]=\"variant() === 'info'\"\n [class.disabled]=\"variant() === 'disabled'\"\n [class.dot]=\"displayType() === 'dot'\"\n [class.counter]=\"displayType() === 'counter'\"\n [class.overlap]=\"overlap()\"\n [class.small]=\"size() === 'small'\"\n [class.medium]=\"size() === 'medium'\"\n [class.large]=\"size() === 'large'\"\n [class.top-right]=\"position() === 'top-right'\"\n [class.top-left]=\"position() === 'top-left'\"\n [class.bottom-right]=\"position() === 'bottom-right'\"\n [class.bottom-left]=\"position() === 'bottom-left'\"\n [attr.role]=\"computedRole()\"\n [attr.aria-label]=\"computedAriaLabel()\"\n [attr.data-state]=\"state()\"\n (click)=\"onBadgeClick()\"\n>\n @if (displayType() === 'text') {\n <ng-content></ng-content>\n } @else if (displayType() === 'counter') {\n {{ displayValue() }}\n }\n</div>\n", styles: [".badge{--badge-width: var(--size-5);--badge-height: var(--size-5);--badge-width-sm: var(--size-4);--badge-height-sm: var(--size-4);--badge-width-lg: var(--size-6);--badge-height-lg: var(--size-6);--badge-dot-shadow: 0 0 0 var(--border-width-2);display:inline-flex;align-items:center;justify-content:center;min-width:var(--badge-width);min-height:var(--badge-height);padding:var(--spacing-xs);border-radius:var(--radius-base);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);line-height:1;white-space:nowrap;transition:all var(--animation-duration-fast) var(--animation-easing-default);min-width:max-content}.badge.primary{background:var(--primary-gradient);color:var(--text-on-primary)}.badge.secondary{background-color:var(--secondary-color);color:var(--text-on-secondary)}.badge.success{background-color:var(--success-color);color:var(--text-on-success)}.badge.warning{background-color:var(--warning-color);color:var(--text-on-warning)}.badge.danger{background-color:var(--danger-color);color:var(--text-on-danger)}.badge.info{background-color:var(--blue-500);color:var(--text-on-primary)}.badge.disabled{background-color:var(--surface-400);color:var(--surface-0);cursor:not-allowed;opacity:var(--opacity-disabled)}.badge.medium{min-width:var(--badge-width);min-height:var(--badge-height);font-size:var(--font-size-xs);padding:var(--spacing-xs)}.badge.small{min-width:var(--badge-width-sm);min-height:var(--badge-height-sm);font-size:var(--font-size-xs);padding:var(--spacing-xxs)}.badge.large{min-width:var(--badge-width-lg);min-height:var(--badge-height-lg);font-size:var(--font-size-sm);padding:var(--spacing-sm)}.badge.overlap{position:absolute;transform:translate(50%,-50%)}.badge.top-right{top:0;right:0}.badge.top-left{top:0;left:0;transform:translate(-50%,-50%)}.badge.bottom-right{bottom:0;right:0;transform:translate(50%,50%)}.badge.bottom-left{bottom:0;left:0;transform:translate(-50%,50%)}.badge.dot{border-radius:var(--radius-full);box-shadow:var(--badge-dot-shadow) var(--surface-card)}.badge.counter{min-width:var(--size-5);min-height:var(--size-5);padding:0 var(--spacing-xs)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
203
203
|
}
|
|
204
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
204
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: PshBadgeComponent, decorators: [{
|
|
205
205
|
type: Component,
|
|
206
206
|
args: [{ selector: 'psh-badge', imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"badge\"\n [class.primary]=\"variant() === 'primary'\"\n [class.secondary]=\"variant() === 'secondary'\"\n [class.success]=\"variant() === 'success'\"\n [class.warning]=\"variant() === 'warning'\"\n [class.danger]=\"variant() === 'danger'\"\n [class.info]=\"variant() === 'info'\"\n [class.disabled]=\"variant() === 'disabled'\"\n [class.dot]=\"displayType() === 'dot'\"\n [class.counter]=\"displayType() === 'counter'\"\n [class.overlap]=\"overlap()\"\n [class.small]=\"size() === 'small'\"\n [class.medium]=\"size() === 'medium'\"\n [class.large]=\"size() === 'large'\"\n [class.top-right]=\"position() === 'top-right'\"\n [class.top-left]=\"position() === 'top-left'\"\n [class.bottom-right]=\"position() === 'bottom-right'\"\n [class.bottom-left]=\"position() === 'bottom-left'\"\n [attr.role]=\"computedRole()\"\n [attr.aria-label]=\"computedAriaLabel()\"\n [attr.data-state]=\"state()\"\n (click)=\"onBadgeClick()\"\n>\n @if (displayType() === 'text') {\n <ng-content></ng-content>\n } @else if (displayType() === 'counter') {\n {{ displayValue() }}\n }\n</div>\n", styles: [".badge{--badge-width: var(--size-5);--badge-height: var(--size-5);--badge-width-sm: var(--size-4);--badge-height-sm: var(--size-4);--badge-width-lg: var(--size-6);--badge-height-lg: var(--size-6);--badge-dot-shadow: 0 0 0 var(--border-width-2);display:inline-flex;align-items:center;justify-content:center;min-width:var(--badge-width);min-height:var(--badge-height);padding:var(--spacing-xs);border-radius:var(--radius-base);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);line-height:1;white-space:nowrap;transition:all var(--animation-duration-fast) var(--animation-easing-default);min-width:max-content}.badge.primary{background:var(--primary-gradient);color:var(--text-on-primary)}.badge.secondary{background-color:var(--secondary-color);color:var(--text-on-secondary)}.badge.success{background-color:var(--success-color);color:var(--text-on-success)}.badge.warning{background-color:var(--warning-color);color:var(--text-on-warning)}.badge.danger{background-color:var(--danger-color);color:var(--text-on-danger)}.badge.info{background-color:var(--blue-500);color:var(--text-on-primary)}.badge.disabled{background-color:var(--surface-400);color:var(--surface-0);cursor:not-allowed;opacity:var(--opacity-disabled)}.badge.medium{min-width:var(--badge-width);min-height:var(--badge-height);font-size:var(--font-size-xs);padding:var(--spacing-xs)}.badge.small{min-width:var(--badge-width-sm);min-height:var(--badge-height-sm);font-size:var(--font-size-xs);padding:var(--spacing-xxs)}.badge.large{min-width:var(--badge-width-lg);min-height:var(--badge-height-lg);font-size:var(--font-size-sm);padding:var(--spacing-sm)}.badge.overlap{position:absolute;transform:translate(50%,-50%)}.badge.top-right{top:0;right:0}.badge.top-left{top:0;left:0;transform:translate(-50%,-50%)}.badge.bottom-right{bottom:0;right:0;transform:translate(50%,50%)}.badge.bottom-left{bottom:0;left:0;transform:translate(-50%,50%)}.badge.dot{border-radius:var(--radius-full);box-shadow:var(--badge-dot-shadow) var(--surface-card)}.badge.counter{min-width:var(--size-5);min-height:var(--size-5);padding:0 var(--spacing-xs)}\n"] }]
|
|
207
207
|
}], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], displayType: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayType", required: false }] }], content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }], visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], showZero: [{ type: i0.Input, args: [{ isSignal: true, alias: "showZero", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], overlap: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlap", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], formatter: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatter", required: false }] }], badgeClick: [{ type: i0.Output, args: ["badgeClick"] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
|
|
@@ -209,20 +209,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
|
|
|
209
209
|
class PshButtonComponent {
|
|
210
210
|
constructor() {
|
|
211
211
|
this.elementRef = inject(ElementRef);
|
|
212
|
-
this.projectedText = signal(undefined, ...(ngDevMode ? [{ debugName: "projectedText" }] : []));
|
|
213
|
-
this.appearance = input('filled', ...(ngDevMode ? [{ debugName: "appearance" }] : []));
|
|
214
|
-
this.variant = input('primary', ...(ngDevMode ? [{ debugName: "variant" }] : []));
|
|
215
|
-
this.size = input('medium', ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
216
|
-
this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
217
|
-
this.loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
|
|
218
|
-
this.fullWidth = model(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : []));
|
|
219
|
-
this.iconPosition = input('left', ...(ngDevMode ? [{ debugName: "iconPosition" }] : []));
|
|
220
|
-
this.icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
|
|
221
|
-
this.ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : []));
|
|
222
|
-
this.loadingText = input('Loading...', ...(ngDevMode ? [{ debugName: "loadingText" }] : []));
|
|
223
|
-
this.disabledText = input('This action is currently unavailable', ...(ngDevMode ? [{ debugName: "disabledText" }] : []));
|
|
224
|
-
this.iconOnlyText = input(...(ngDevMode ? [undefined, { debugName: "iconOnlyText" }] : []));
|
|
225
|
-
this.type = input('button', ...(ngDevMode ? [{ debugName: "type" }] : []));
|
|
212
|
+
this.projectedText = signal(undefined, ...(ngDevMode ? [{ debugName: "projectedText" }] : /* istanbul ignore next */ []));
|
|
213
|
+
this.appearance = input('filled', ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
|
|
214
|
+
this.variant = input('primary', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
215
|
+
this.size = input('medium', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
216
|
+
this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
217
|
+
this.loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
|
|
218
|
+
this.fullWidth = model(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : /* istanbul ignore next */ []));
|
|
219
|
+
this.iconPosition = input('left', ...(ngDevMode ? [{ debugName: "iconPosition" }] : /* istanbul ignore next */ []));
|
|
220
|
+
this.icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
|
|
221
|
+
this.ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
222
|
+
this.loadingText = input('Loading...', ...(ngDevMode ? [{ debugName: "loadingText" }] : /* istanbul ignore next */ []));
|
|
223
|
+
this.disabledText = input('This action is currently unavailable', ...(ngDevMode ? [{ debugName: "disabledText" }] : /* istanbul ignore next */ []));
|
|
224
|
+
this.iconOnlyText = input(...(ngDevMode ? [undefined, { debugName: "iconOnlyText" }] : /* istanbul ignore next */ []));
|
|
225
|
+
this.type = input('button', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
|
|
226
226
|
this.clicked = output();
|
|
227
227
|
this.disabledClick = output();
|
|
228
228
|
this.computedAriaLabel = computed(() => {
|
|
@@ -239,14 +239,14 @@ class PshButtonComponent {
|
|
|
239
239
|
if (projected)
|
|
240
240
|
return projected;
|
|
241
241
|
return undefined;
|
|
242
|
-
}, ...(ngDevMode ? [{ debugName: "computedAriaLabel" }] : []));
|
|
242
|
+
}, ...(ngDevMode ? [{ debugName: "computedAriaLabel" }] : /* istanbul ignore next */ []));
|
|
243
243
|
this.state = computed(() => {
|
|
244
244
|
if (this.disabled())
|
|
245
245
|
return 'disabled';
|
|
246
246
|
if (this.loading())
|
|
247
247
|
return 'loading';
|
|
248
248
|
return 'default';
|
|
249
|
-
}, ...(ngDevMode ? [{ debugName: "state" }] : []));
|
|
249
|
+
}, ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
|
|
250
250
|
}
|
|
251
251
|
ngAfterContentChecked() {
|
|
252
252
|
const button = this.elementRef.nativeElement.querySelector('button');
|
|
@@ -276,10 +276,10 @@ class PshButtonComponent {
|
|
|
276
276
|
this.disabledClick.emit(event);
|
|
277
277
|
}
|
|
278
278
|
}
|
|
279
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
280
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
279
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: PshButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
280
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", type: PshButtonComponent, isStandalone: true, selector: "psh-button", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, iconPosition: { classPropertyName: "iconPosition", publicName: "iconPosition", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null }, disabledText: { classPropertyName: "disabledText", publicName: "disabledText", isSignal: true, isRequired: false, transformFunction: null }, iconOnlyText: { classPropertyName: "iconOnlyText", publicName: "iconOnlyText", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fullWidth: "fullWidthChange", clicked: "clicked", disabledClick: "disabledClick" }, host: { listeners: { "click": "onHostClick($event)" }, properties: { "class.full-width": "fullWidth()" } }, ngImport: i0, template: "<button\n [attr.data-state]=\"state()\"\n [attr.aria-label]=\"computedAriaLabel()\"\n [attr.aria-busy]=\"loading()\"\n [type]=\"type()\"\n [class]=\"appearance()\"\n [class.primary]=\"variant() === 'primary'\"\n [class.secondary]=\"variant() === 'secondary'\"\n [class.success]=\"variant() === 'success'\"\n [class.warning]=\"variant() === 'warning'\"\n [class.danger]=\"variant() === 'danger'\"\n [class.disabled]=\"disabled()\"\n [class.loading]=\"loading()\"\n [class.small]=\"size() === 'small'\"\n [class.medium]=\"size() === 'medium'\"\n [class.large]=\"size() === 'large'\"\n [class.icon-only]=\"iconPosition() === 'only'\"\n [disabled]=\"disabled() || loading()\"\n (click)=\"handleClick($event)\"\n>\n <span class=\"button-content\">\n @if (loading()) {\n <span class=\"loader\" aria-hidden=\"true\"></span>\n @if (iconPosition() !== 'only') {\n {{ loadingText() }}\n }\n }\n @if (!loading() && icon() && (iconPosition() === 'left' || iconPosition() === 'only')) {\n <i class=\"ph ph-{{ icon() }}\" aria-hidden=\"true\"></i>\n }\n @if (!loading() && iconPosition() !== 'only') {\n <ng-content></ng-content>\n }\n @if (!loading() && icon() && iconPosition() === 'right') {\n <i class=\"ph ph-{{ icon() }}\" aria-hidden=\"true\"></i>\n }\n </span>\n</button>", styles: ["button{--btn-height-sm: 2rem;--btn-height-md: 2.5rem;--btn-height-lg: 3rem;--btn-min-width-sm: 6rem;--btn-min-width-md: 7.5rem;--btn-min-width-lg: 8.75rem;--btn-min-width-icon-only: 2.5rem;--btn-font-weight: 500;--btn-transition: all .2s ease;display:inline-flex;align-items:center;justify-content:center;height:var(--btn-height-md);padding:0 var(--spacing-lg);border:none;font-weight:var(--btn-font-weight);font-family:inherit;cursor:pointer;transition:var(--btn-transition);min-width:var(--btn-min-width-md);position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--font-size-base);border-radius:var(--border-radius)}.button-content{display:flex;align-items:center;gap:var(--spacing-sm);position:relative;z-index:1;line-height:1}button.small{height:var(--btn-height-sm);font-size:var(--font-size-sm);padding:0 var(--spacing-md);min-width:var(--btn-min-width-sm)}button.medium{height:var(--btn-height-md);font-size:var(--font-size-base);padding:0 var(--spacing-lg);min-width:var(--btn-min-width-md)}button.large{height:var(--btn-height-lg);font-size:var(--font-size-lg);padding:0 var(--spacing-xl);min-width:var(--btn-min-width-lg)}button.icon-only{width:var(--btn-min-width-icon-only);padding:0;min-width:unset;aspect-ratio:1}button.icon-only.small{width:var(--btn-height-sm)}button.icon-only.medium{width:var(--btn-height-md)}button.icon-only.large{width:var(--btn-height-lg)}:host{display:inline-flex}:host.full-width{display:flex;width:100%}:host.full-width button{width:100%;min-width:100%;flex:1}:host([style*=\"width: 100%\"]),:host([style*=\"width:100%\"]){display:flex;width:100%}:host([style*=\"width: 100%\"]) button,:host([style*=\"width:100%\"]) button{width:100%;min-width:100%}.mobile-full-width-buttons :host{display:flex;width:100%}.mobile-full-width-buttons :host button{width:100%;min-width:100%;flex:1}button.filled{background-color:currentColor}button.filled.primary{background:var(--primary-gradient);color:var(--text-on-primary)}button.filled.primary .button-content{color:var(--text-on-primary)}button.filled.secondary .button-content{color:var(--text-on-secondary)}button.filled.success .button-content{color:var(--text-on-success)}button.filled.warning .button-content{color:var(--text-on-warning)}button.filled.danger .button-content{color:var(--text-on-danger)}button.filled:not(.primary):not(.secondary):not(.success):not(.warning):not(.danger) .button-content{color:var(--text-on-surface)}button.filled.primary:hover:not(.disabled):not(.loading){background:var(--primary-gradient-hover)}button.filled.secondary:hover:not(.disabled):not(.loading){background-color:var(--secondary-color-light)}button.filled.success:hover:not(.disabled):not(.loading){background-color:var(--green-400)}button.filled.warning:hover:not(.disabled):not(.loading){background-color:var(--orange-400)}button.filled.danger:hover:not(.disabled):not(.loading){background-color:var(--red-400)}button.outline{background:transparent;border:var(--border-width-2) solid currentColor;color:currentColor}button.outline .button-content{color:inherit}button.outline:hover:not(.disabled):not(.loading){background:currentColor}button.outline.primary:hover:not(.disabled):not(.loading) .button-content{color:var(--text-on-primary)}button.outline.secondary:hover:not(.disabled):not(.loading) .button-content{color:var(--text-on-secondary)}button.outline.success:hover:not(.disabled):not(.loading) .button-content{color:var(--text-on-success)}button.outline.warning:hover:not(.disabled):not(.loading) .button-content{color:var(--text-on-warning)}button.outline.danger:hover:not(.disabled):not(.loading) .button-content{color:var(--text-on-danger)}button.outline:not(.primary):not(.secondary):not(.success):not(.warning):not(.danger):hover:not(.disabled):not(.loading) .button-content{color:var(--text-on-surface)}button.rounded{border-radius:var(--radius-full);background-color:currentColor}button.rounded.primary{background:var(--primary-gradient);color:var(--text-on-primary)}button.rounded.primary .button-content{color:var(--text-on-primary)}button.rounded.secondary .button-content{color:var(--text-on-secondary)}button.rounded.success .button-content{color:var(--text-on-success)}button.rounded.warning .button-content{color:var(--text-on-warning)}button.rounded.danger .button-content{color:var(--text-on-danger)}button.rounded:not(.primary):not(.secondary):not(.success):not(.warning):not(.danger) .button-content{color:var(--text-on-surface)}button.rounded.primary:hover:not(.disabled):not(.loading){background:var(--primary-gradient-hover)}button.rounded.secondary:hover:not(.disabled):not(.loading){background-color:var(--secondary-color-light)}button.rounded.success:hover:not(.disabled):not(.loading){background-color:var(--green-400)}button.rounded.warning:hover:not(.disabled):not(.loading){background-color:var(--orange-400)}button.rounded.danger:hover:not(.disabled):not(.loading){background-color:var(--red-400)}button.text{background:transparent;padding:0 var(--spacing-lg);color:currentColor;border-radius:var(--border-radius)}button.text .button-content{color:inherit}button.text:hover:not(.disabled):not(.loading){background:var(--surface-hover)}button.text.icon-only{min-width:unset;width:var(--btn-height-md);padding:0}button.text.icon-only.small{width:var(--btn-height-sm)}button.text.icon-only.large{width:var(--btn-height-lg)}button.primary{color:var(--primary-color)}button.secondary{color:var(--secondary-color)}button.success{color:var(--success-color)}button.warning{color:var(--warning-color)}button.danger{color:var(--danger-color)}button:focus-visible{outline:none;box-shadow:0 0 0 .1875rem rgba(var(--primary-color-rgb),.2)}button:active:not(.disabled):not(.loading){transform:translateY(.0625rem)}button.disabled{opacity:.6;cursor:not-allowed;pointer-events:none}button.loading{cursor:wait;pointer-events:none}.loader{width:var(--icon-size-sm);height:var(--icon-size-sm);border:var(--border-width-2) solid currentColor;border-bottom-color:transparent;border-radius:50%;animation:rotate 1s linear infinite}button i{font-size:1.2em;display:flex;align-items:center;justify-content:center}button.small i{font-size:1.1em}button.large i{font-size:1.3em}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
281
281
|
}
|
|
282
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
282
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: PshButtonComponent, decorators: [{
|
|
283
283
|
type: Component,
|
|
284
284
|
args: [{ selector: 'psh-button', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
285
285
|
'[class.full-width]': 'fullWidth()',
|
|
@@ -316,41 +316,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
|
|
|
316
316
|
class PshCardComponent {
|
|
317
317
|
constructor() {
|
|
318
318
|
this.platformId = inject(PLATFORM_ID);
|
|
319
|
-
this.isMobile = signal(false, ...(ngDevMode ? [{ debugName: "isMobile" }] : []));
|
|
319
|
+
this.isMobile = signal(false, ...(ngDevMode ? [{ debugName: "isMobile" }] : /* istanbul ignore next */ []));
|
|
320
320
|
// Model inputs - propriétés modifiables
|
|
321
321
|
/** Variante visuelle de la carte (default, elevated, outlined) */
|
|
322
|
-
this.variant = model('default', ...(ngDevMode ? [{ debugName: "variant" }] : []));
|
|
322
|
+
this.variant = model('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
323
323
|
/** Effet de survol activé (animation translateY) */
|
|
324
|
-
this.hoverable = model(false, ...(ngDevMode ? [{ debugName: "hoverable" }] : []));
|
|
324
|
+
this.hoverable = model(false, ...(ngDevMode ? [{ debugName: "hoverable" }] : /* istanbul ignore next */ []));
|
|
325
325
|
/** Carte cliquable (ajoute cursor pointer et gestion du focus) */
|
|
326
|
-
this.interactive = model(false, ...(ngDevMode ? [{ debugName: "interactive" }] : []));
|
|
326
|
+
this.interactive = model(false, ...(ngDevMode ? [{ debugName: "interactive" }] : /* istanbul ignore next */ []));
|
|
327
327
|
// Regular inputs - propriétés en lecture seule
|
|
328
328
|
/** Titre principal de la carte */
|
|
329
|
-
this.title = input('', ...(ngDevMode ? [{ debugName: "title" }] : []));
|
|
329
|
+
this.title = input('', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
|
|
330
330
|
/** Description/sous-titre optionnel */
|
|
331
|
-
this.description = input('', ...(ngDevMode ? [{ debugName: "description" }] : []));
|
|
331
|
+
this.description = input('', ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
|
|
332
332
|
/** Variante de couleur pour cartes spéciales (info, success, warning, danger) */
|
|
333
|
-
this.colorVariant = input('default', ...(ngDevMode ? [{ debugName: "colorVariant" }] : []));
|
|
333
|
+
this.colorVariant = input('default', ...(ngDevMode ? [{ debugName: "colorVariant" }] : /* istanbul ignore next */ []));
|
|
334
334
|
/** Niveau de densité du spacing (compact, normal, spacious) */
|
|
335
|
-
this.density = input('normal', ...(ngDevMode ? [{ debugName: "density" }] : []));
|
|
335
|
+
this.density = input('normal', ...(ngDevMode ? [{ debugName: "density" }] : /* istanbul ignore next */ []));
|
|
336
336
|
/** Afficher le divider entre header et body */
|
|
337
|
-
this.showHeaderDivider = input(true, ...(ngDevMode ? [{ debugName: "showHeaderDivider" }] : []));
|
|
337
|
+
this.showHeaderDivider = input(true, ...(ngDevMode ? [{ debugName: "showHeaderDivider" }] : /* istanbul ignore next */ []));
|
|
338
338
|
/** Afficher le divider entre body et footer */
|
|
339
|
-
this.showFooterDivider = input(true, ...(ngDevMode ? [{ debugName: "showFooterDivider" }] : []));
|
|
339
|
+
this.showFooterDivider = input(true, ...(ngDevMode ? [{ debugName: "showFooterDivider" }] : /* istanbul ignore next */ []));
|
|
340
340
|
/** Afficher le divider entre footer et actions */
|
|
341
|
-
this.showActionsDivider = input(true, ...(ngDevMode ? [{ debugName: "showActionsDivider" }] : []));
|
|
341
|
+
this.showActionsDivider = input(true, ...(ngDevMode ? [{ debugName: "showActionsDivider" }] : /* istanbul ignore next */ []));
|
|
342
342
|
/** Alignement des actions dans la zone card-actions */
|
|
343
|
-
this.actionsAlignment = input('right', ...(ngDevMode ? [{ debugName: "actionsAlignment" }] : []));
|
|
343
|
+
this.actionsAlignment = input('right', ...(ngDevMode ? [{ debugName: "actionsAlignment" }] : /* istanbul ignore next */ []));
|
|
344
344
|
/** Activer/désactiver le padding du body */
|
|
345
|
-
this.bodyPadding = input(true, ...(ngDevMode ? [{ debugName: "bodyPadding" }] : []));
|
|
345
|
+
this.bodyPadding = input(true, ...(ngDevMode ? [{ debugName: "bodyPadding" }] : /* istanbul ignore next */ []));
|
|
346
346
|
/** Classes CSS additionnelles */
|
|
347
|
-
this.cssClass = input('', ...(ngDevMode ? [{ debugName: "cssClass" }] : []));
|
|
347
|
+
this.cssClass = input('', ...(ngDevMode ? [{ debugName: "cssClass" }] : /* istanbul ignore next */ []));
|
|
348
348
|
/** Styles inline personnalisés */
|
|
349
|
-
this.customStyle = input({}, ...(ngDevMode ? [{ debugName: "customStyle" }] : []));
|
|
349
|
+
this.customStyle = input({}, ...(ngDevMode ? [{ debugName: "customStyle" }] : /* istanbul ignore next */ []));
|
|
350
350
|
/** État de chargement - affiche un skeleton */
|
|
351
|
-
this.loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
|
|
351
|
+
this.loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
|
|
352
352
|
/** État désactivé - réduit l'opacité */
|
|
353
|
-
this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
353
|
+
this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
354
354
|
// Outputs
|
|
355
355
|
/** Émis lors du clic sur la carte (si interactive) */
|
|
356
356
|
this.clicked = output();
|
|
@@ -372,26 +372,26 @@ class PshCardComponent {
|
|
|
372
372
|
if (this.cssClass())
|
|
373
373
|
classes.push(this.cssClass());
|
|
374
374
|
return classes.join(' ');
|
|
375
|
-
}, ...(ngDevMode ? [{ debugName: "computedClasses" }] : []));
|
|
375
|
+
}, ...(ngDevMode ? [{ debugName: "computedClasses" }] : /* istanbul ignore next */ []));
|
|
376
376
|
/** Styles calculés */
|
|
377
377
|
this.computedStyles = computed(() => {
|
|
378
378
|
return { ...this.customStyle() };
|
|
379
|
-
}, ...(ngDevMode ? [{ debugName: "computedStyles" }] : []));
|
|
379
|
+
}, ...(ngDevMode ? [{ debugName: "computedStyles" }] : /* istanbul ignore next */ []));
|
|
380
380
|
/** Indique si le header doit être affiché */
|
|
381
381
|
this.hasHeader = computed(() => {
|
|
382
382
|
return !!(this.title() || this.description());
|
|
383
|
-
}, ...(ngDevMode ? [{ debugName: "hasHeader" }] : []));
|
|
383
|
+
}, ...(ngDevMode ? [{ debugName: "hasHeader" }] : /* istanbul ignore next */ []));
|
|
384
384
|
/** Classe d'alignement pour la zone d'actions */
|
|
385
385
|
this.actionsAlignmentClass = computed(() => {
|
|
386
386
|
return `actions-align-${this.actionsAlignment()}`;
|
|
387
|
-
}, ...(ngDevMode ? [{ debugName: "actionsAlignmentClass" }] : []));
|
|
387
|
+
}, ...(ngDevMode ? [{ debugName: "actionsAlignmentClass" }] : /* istanbul ignore next */ []));
|
|
388
388
|
this.actionsClasses = computed(() => {
|
|
389
389
|
const classes = [this.actionsAlignmentClass()];
|
|
390
390
|
if (this.isMobile()) {
|
|
391
391
|
classes.push('mobile-full-width-buttons');
|
|
392
392
|
}
|
|
393
393
|
return classes.join(' ');
|
|
394
|
-
}, ...(ngDevMode ? [{ debugName: "actionsClasses" }] : []));
|
|
394
|
+
}, ...(ngDevMode ? [{ debugName: "actionsClasses" }] : /* istanbul ignore next */ []));
|
|
395
395
|
if (isPlatformBrowser(this.platformId)) {
|
|
396
396
|
this.checkMobileViewport();
|
|
397
397
|
if (typeof window !== 'undefined') {
|
|
@@ -434,10 +434,10 @@ class PshCardComponent {
|
|
|
434
434
|
}
|
|
435
435
|
}
|
|
436
436
|
}
|
|
437
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
438
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: PshCardComponent, isStandalone: true, selector: "psh-card", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, hoverable: { classPropertyName: "hoverable", publicName: "hoverable", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, colorVariant: { classPropertyName: "colorVariant", publicName: "colorVariant", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, showHeaderDivider: { classPropertyName: "showHeaderDivider", publicName: "showHeaderDivider", isSignal: true, isRequired: false, transformFunction: null }, showFooterDivider: { classPropertyName: "showFooterDivider", publicName: "showFooterDivider", isSignal: true, isRequired: false, transformFunction: null }, showActionsDivider: { classPropertyName: "showActionsDivider", publicName: "showActionsDivider", isSignal: true, isRequired: false, transformFunction: null }, actionsAlignment: { classPropertyName: "actionsAlignment", publicName: "actionsAlignment", isSignal: true, isRequired: false, transformFunction: null }, bodyPadding: { classPropertyName: "bodyPadding", publicName: "bodyPadding", isSignal: true, isRequired: false, transformFunction: null }, cssClass: { classPropertyName: "cssClass", publicName: "cssClass", isSignal: true, isRequired: false, transformFunction: null }, customStyle: { classPropertyName: "customStyle", publicName: "customStyle", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { variant: "variantChange", hoverable: "hoverableChange", interactive: "interactiveChange", clicked: "clicked" }, host: { styleAttribute: "display: block;" }, ngImport: i0, template: "<div\n [class]=\"computedClasses()\"\n [style]=\"computedStyles()\"\n (click)=\"handleClick($event)\"\n (keydown)=\"handleKeydown($event)\"\n role=\"article\"\n [attr.tabindex]=\"interactive() && !disabled() ? 0 : null\"\n [attr.aria-disabled]=\"disabled() ? 'true' : null\"\n [attr.aria-busy]=\"loading() ? 'true' : null\"\n>\n <!-- Header avec titre et description int\u00E9gr\u00E9s -->\n @if (hasHeader()) {\n <div class=\"card-header\" [class.has-divider]=\"showHeaderDivider()\">\n <!-- Slot pour ic\u00F4ne/avatar avant le titre -->\n <ng-content select=\"[card-header-icon]\"></ng-content>\n\n <!-- Zone de titre et description -->\n @if (title() || description()) {\n <div class=\"card-header-content\">\n @if (title()) {\n <h3 class=\"card-title\">{{ title() }}</h3>\n }\n @if (description()) {\n <p class=\"card-description\">{{ description() }}</p>\n }\n </div>\n }\n\n <!-- Slot pour contenu personnalis\u00E9 du header -->\n <ng-content select=\"[card-header-content]\"></ng-content>\n\n <!-- Slot pour badge/tag ou actions secondaires -->\n <ng-content select=\"[card-header-extra]\"></ng-content>\n </div>\n }\n\n <!-- Body avec contenu principal -->\n <div class=\"card-body\" [class.no-padding]=\"!bodyPadding()\">\n <!-- \u00C9tat de chargement -->\n @if (loading()) {\n <div class=\"card-loading\">\n <div class=\"skeleton-line\"></div>\n <div class=\"skeleton-line\"></div>\n <div class=\"skeleton-line short\"></div>\n </div>\n } @else {\n <!-- Contenu principal (slot par d\u00E9faut) -->\n <ng-content></ng-content>\n }\n </div>\n\n <!-- Footer optionnel pour m\u00E9tadonn\u00E9es -->\n <div class=\"card-footer\" [class.has-divider]=\"showFooterDivider()\">\n <ng-content select=\"[card-footer]\"></ng-content>\n </div>\n\n <!-- Actions -->\n <div class=\"card-actions\" [class]=\"actionsClasses()\" [class.has-divider]=\"showActionsDivider()\">\n <ng-content select=\"[card-actions]\"></ng-content>\n </div>\n</div>\n", styles: [".card{background:var(--surface-card);border-radius:var(--border-radius-lg, .75rem);overflow:hidden;transition:all .2s ease;width:100%;display:flex;flex-direction:column;position:relative}.card.variant-elevated{box-shadow:0 1px 3px #0000001a,0 1px 2px #0000000f}.card.variant-elevated.hoverable:hover{box-shadow:0 4px 6px #0000001a,0 2px 4px #0000000f}.card.variant-outlined{border:1px solid var(--surface-border)}.card.variant-default{background:var(--surface-section)}.card.color-info{border-left:4px solid var(--blue-500)}.card.color-info .card-header{background:rgba(var(--blue-500-rgb, 59, 130, 246),.05)}.card.color-success{border-left:4px solid var(--green-500)}.card.color-success .card-header{background:rgba(var(--green-500-rgb, 34, 197, 94),.05)}.card.color-warning{border-left:4px solid var(--orange-500)}.card.color-warning .card-header{background:rgba(var(--orange-500-rgb, 249, 115, 22),.05)}.card.color-danger{border-left:4px solid var(--red-500)}.card.color-danger .card-header{background:rgba(var(--red-500-rgb, 239, 68, 68),.05)}.card.density-compact{--card-header-padding: var(--size-3) var(--size-4);--card-body-padding: var(--size-4);--card-footer-padding: var(--size-3) var(--size-4);--card-actions-padding: var(--size-3) var(--size-4);--card-header-gap: var(--spacing-sm);--card-body-gap: var(--size-3)}.card.density-normal{--card-header-padding: var(--size-4) var(--size-5);--card-body-padding: var(--size-6);--card-footer-padding: var(--size-4) var(--size-5);--card-actions-padding: var(--size-4) var(--size-5);--card-header-gap: var(--size-3);--card-body-gap: var(--size-4)}.card.density-spacious{--card-header-padding: var(--size-6) var(--size-7);--card-body-padding: var(--size-8);--card-footer-padding: var(--size-5) var(--size-7);--card-actions-padding: var(--size-5) var(--size-7);--card-header-gap: var(--size-4);--card-body-gap: var(--size-5)}.card-header{padding:var(--card-header-padding);display:flex;align-items:flex-start;gap:var(--card-header-gap);background:var(--surface-ground);position:relative}.card-header.has-divider{border-bottom:1px solid var(--surface-border)}.card-header-content{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--spacing-xs)}.card-title{font-size:var(--font-size-lg, 1.125rem);font-weight:600;line-height:1.4;color:var(--text-color);margin:0;overflow:hidden;text-overflow:ellipsis}.card-description{font-size:var(--font-size-sm, .875rem);line-height:1.5;color:var(--text-color-secondary);margin:0}[card-header-icon]{flex-shrink:0;display:flex;align-items:center;justify-content:center}[card-header-content]{flex:1;min-width:0}[card-header-extra]{flex-shrink:0;display:flex;align-items:center;gap:var(--spacing-sm)}.card-body{padding:var(--card-body-padding);flex:1;display:flex;flex-direction:column;gap:var(--card-body-gap);color:var(--text-color);line-height:1.6;overflow:hidden}.card-body.no-padding{padding:0}.card-body>*{margin:0}.card-body img{max-width:100%;height:auto;border-radius:var(--border-radius)}.card-body table{width:100%;max-width:100%;overflow-x:auto;display:block}.card-body pre{max-width:100%;overflow-x:auto;padding:var(--spacing-sm);background:var(--surface-ground);border-radius:var(--border-radius);font-size:var(--font-size-sm)}.card-body video,.card-body iframe{max-width:100%;height:auto}.card-footer{padding:var(--card-footer-padding);background:var(--surface-ground);display:flex;align-items:center;gap:var(--size-4);flex-wrap:wrap;font-size:var(--font-size-sm, .875rem);color:var(--text-color-secondary)}.card-footer:empty{display:none}.card-footer.has-divider{border-top:1px solid var(--surface-border)}.card-actions{padding:var(--card-actions-padding);background:var(--surface-ground);display:flex;align-items:center;gap:var(--spacing-md);justify-content:flex-end}.card-actions>*{flex-shrink:0;display:flex;gap:var(--spacing-sm)}.card-actions:empty{display:none}.card-actions.has-divider{border-top:1px solid var(--surface-border)}.card-actions.actions-align-left{justify-content:flex-start}.card-actions.actions-align-center{justify-content:center}.card-actions.actions-align-right{justify-content:flex-end}.card-actions.actions-align-space-between{justify-content:space-between}.card-actions.mobile-full-width-buttons{flex-direction:column;gap:var(--spacing-sm)}.card-actions.mobile-full-width-buttons>*{display:flex;flex-direction:column;width:100%;gap:var(--spacing-sm)}.card.hoverable:hover{transform:translateY(-2px)}.card.interactive{cursor:pointer;-webkit-user-select:none;user-select:none}.card.interactive:focus{outline:none;box-shadow:0 0 0 3px rgba(var(--primary-500-rgb, 59, 130, 246),.2)}.card.interactive:focus:not(:focus-visible){box-shadow:none}.card.interactive:active{transform:translateY(0)}.card.disabled{opacity:.6;pointer-events:none;cursor:not-allowed}.card.loading{pointer-events:none}.card-loading{display:flex;flex-direction:column;gap:var(--size-3);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:1024px){.card.density-spacious{--card-header-padding: var(--size-5) var(--size-6);--card-body-padding: var(--size-7);--card-footer-padding: var(--size-4-5) var(--size-6);--card-actions-padding: var(--size-4-5) var(--size-6)}}@media(max-width:768px){.card.density-compact{--card-header-padding: var(--size-2-5) var(--size-3);--card-body-padding: var(--size-3);--card-footer-padding: var(--size-2-5) var(--size-3);--card-actions-padding: var(--size-2-5) var(--size-3)}.card.density-normal{--card-header-padding: var(--size-3) var(--size-4);--card-body-padding: var(--size-4);--card-footer-padding: var(--size-3) var(--size-4);--card-actions-padding: var(--size-3) var(--size-4)}.card.density-spacious{--card-header-padding: var(--size-4) var(--size-5);--card-body-padding: var(--size-5);--card-footer-padding: var(--size-4) var(--size-5);--card-actions-padding: var(--size-4) var(--size-5)}.card-title{font-size:clamp(.9375rem,2vw,1rem)}.card-description{font-size:var(--font-size-xs)}.card-footer{font-size:var(--font-size-xs);gap:var(--size-3)}}@media(max-width:640px){.card-actions{flex-direction:column;gap:var(--spacing-md)}.card-actions>*{flex-direction:column;width:100%}}@media(max-width:480px){.card.density-compact{--card-header-padding: var(--spacing-sm) var(--size-3);--card-body-padding: var(--size-3);--card-footer-padding: var(--spacing-sm) var(--size-3);--card-actions-padding: var(--spacing-sm) var(--size-3)}.card.density-normal{--card-header-padding: var(--size-2-5) var(--size-3);--card-body-padding: var(--size-3);--card-footer-padding: var(--size-2-5) var(--size-3);--card-actions-padding: var(--size-2-5) var(--size-3)}.card.density-spacious{--card-header-padding: var(--size-3) var(--size-4);--card-body-padding: var(--size-4);--card-footer-padding: var(--size-3) var(--size-4);--card-actions-padding: var(--size-3) var(--size-4)}.card-header{flex-wrap:wrap;gap:var(--spacing-xs)}.card-title{font-size:clamp(.875rem,3vw,.9375rem);line-height:1.3}.card-description{font-size:var(--font-size-xs);line-height:1.4}[card-header-icon],[card-header-extra]{width:100%;justify-content:flex-start}.card-footer{flex-direction:column;align-items:flex-start;gap:var(--spacing-sm)}.card-actions{flex-direction:column;gap:var(--spacing-sm)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
437
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: PshCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
438
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", type: PshCardComponent, isStandalone: true, selector: "psh-card", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, hoverable: { classPropertyName: "hoverable", publicName: "hoverable", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, colorVariant: { classPropertyName: "colorVariant", publicName: "colorVariant", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, showHeaderDivider: { classPropertyName: "showHeaderDivider", publicName: "showHeaderDivider", isSignal: true, isRequired: false, transformFunction: null }, showFooterDivider: { classPropertyName: "showFooterDivider", publicName: "showFooterDivider", isSignal: true, isRequired: false, transformFunction: null }, showActionsDivider: { classPropertyName: "showActionsDivider", publicName: "showActionsDivider", isSignal: true, isRequired: false, transformFunction: null }, actionsAlignment: { classPropertyName: "actionsAlignment", publicName: "actionsAlignment", isSignal: true, isRequired: false, transformFunction: null }, bodyPadding: { classPropertyName: "bodyPadding", publicName: "bodyPadding", isSignal: true, isRequired: false, transformFunction: null }, cssClass: { classPropertyName: "cssClass", publicName: "cssClass", isSignal: true, isRequired: false, transformFunction: null }, customStyle: { classPropertyName: "customStyle", publicName: "customStyle", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { variant: "variantChange", hoverable: "hoverableChange", interactive: "interactiveChange", clicked: "clicked" }, host: { styleAttribute: "display: block;" }, ngImport: i0, template: "<div\n [class]=\"computedClasses()\"\n [style]=\"computedStyles()\"\n (click)=\"handleClick($event)\"\n (keydown)=\"handleKeydown($event)\"\n role=\"article\"\n [attr.tabindex]=\"interactive() && !disabled() ? 0 : null\"\n [attr.aria-disabled]=\"disabled() ? 'true' : null\"\n [attr.aria-busy]=\"loading() ? 'true' : null\"\n>\n <!-- Header avec titre et description int\u00E9gr\u00E9s -->\n @if (hasHeader()) {\n <div class=\"card-header\" [class.has-divider]=\"showHeaderDivider()\">\n <!-- Slot pour ic\u00F4ne/avatar avant le titre -->\n <ng-content select=\"[card-header-icon]\"></ng-content>\n\n <!-- Zone de titre et description -->\n @if (title() || description()) {\n <div class=\"card-header-content\">\n @if (title()) {\n <h3 class=\"card-title\">{{ title() }}</h3>\n }\n @if (description()) {\n <p class=\"card-description\">{{ description() }}</p>\n }\n </div>\n }\n\n <!-- Slot pour contenu personnalis\u00E9 du header -->\n <ng-content select=\"[card-header-content]\"></ng-content>\n\n <!-- Slot pour badge/tag ou actions secondaires -->\n <ng-content select=\"[card-header-extra]\"></ng-content>\n </div>\n }\n\n <!-- Body avec contenu principal -->\n <div class=\"card-body\" [class.no-padding]=\"!bodyPadding()\">\n <!-- \u00C9tat de chargement -->\n @if (loading()) {\n <div class=\"card-loading\">\n <div class=\"skeleton-line\"></div>\n <div class=\"skeleton-line\"></div>\n <div class=\"skeleton-line short\"></div>\n </div>\n } @else {\n <!-- Contenu principal (slot par d\u00E9faut) -->\n <ng-content></ng-content>\n }\n </div>\n\n <!-- Footer optionnel pour m\u00E9tadonn\u00E9es -->\n <div class=\"card-footer\" [class.has-divider]=\"showFooterDivider()\">\n <ng-content select=\"[card-footer]\"></ng-content>\n </div>\n\n <!-- Actions -->\n <div class=\"card-actions\" [class]=\"actionsClasses()\" [class.has-divider]=\"showActionsDivider()\">\n <ng-content select=\"[card-actions]\"></ng-content>\n </div>\n</div>\n", styles: [".card{background:var(--surface-card);border-radius:var(--border-radius-lg, .75rem);overflow:hidden;transition:all .2s ease;width:100%;display:flex;flex-direction:column;position:relative}.card.variant-elevated{box-shadow:0 1px 3px #0000001a,0 1px 2px #0000000f}.card.variant-elevated.hoverable:hover{box-shadow:0 4px 6px #0000001a,0 2px 4px #0000000f}.card.variant-outlined{border:1px solid var(--surface-border)}.card.variant-default{background:var(--surface-section)}.card.color-info{border-left:4px solid var(--blue-500)}.card.color-info .card-header{background:rgba(var(--blue-500-rgb, 59, 130, 246),.05)}.card.color-success{border-left:4px solid var(--green-500)}.card.color-success .card-header{background:rgba(var(--green-500-rgb, 34, 197, 94),.05)}.card.color-warning{border-left:4px solid var(--orange-500)}.card.color-warning .card-header{background:rgba(var(--orange-500-rgb, 249, 115, 22),.05)}.card.color-danger{border-left:4px solid var(--red-500)}.card.color-danger .card-header{background:rgba(var(--red-500-rgb, 239, 68, 68),.05)}.card.density-compact{--card-header-padding: var(--size-3) var(--size-4);--card-body-padding: var(--size-4);--card-footer-padding: var(--size-3) var(--size-4);--card-actions-padding: var(--size-3) var(--size-4);--card-header-gap: var(--spacing-sm);--card-body-gap: var(--size-3)}.card.density-normal{--card-header-padding: var(--size-4) var(--size-5);--card-body-padding: var(--size-6);--card-footer-padding: var(--size-4) var(--size-5);--card-actions-padding: var(--size-4) var(--size-5);--card-header-gap: var(--size-3);--card-body-gap: var(--size-4)}.card.density-spacious{--card-header-padding: var(--size-6) var(--size-7);--card-body-padding: var(--size-8);--card-footer-padding: var(--size-5) var(--size-7);--card-actions-padding: var(--size-5) var(--size-7);--card-header-gap: var(--size-4);--card-body-gap: var(--size-5)}.card-header{padding:var(--card-header-padding);display:flex;align-items:flex-start;gap:var(--card-header-gap);background:var(--surface-ground);position:relative}.card-header.has-divider{border-bottom:1px solid var(--surface-border)}.card-header-content{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--spacing-xs)}.card-title{font-size:var(--font-size-lg, 1.125rem);font-weight:600;line-height:1.4;color:var(--text-color);margin:0;overflow:hidden;text-overflow:ellipsis}.card-description{font-size:var(--font-size-sm, .875rem);line-height:1.5;color:var(--text-color-secondary);margin:0}[card-header-icon]{flex-shrink:0;display:flex;align-items:center;justify-content:center}[card-header-content]{flex:1;min-width:0}[card-header-extra]{flex-shrink:0;display:flex;align-items:center;gap:var(--spacing-sm)}.card-body{padding:var(--card-body-padding);flex:1;display:flex;flex-direction:column;gap:var(--card-body-gap);color:var(--text-color);line-height:1.6;overflow:hidden}.card-body.no-padding{padding:0}.card-body>*{margin:0}.card-body img{max-width:100%;height:auto;border-radius:var(--border-radius)}.card-body table{width:100%;max-width:100%;overflow-x:auto;display:block}.card-body pre{max-width:100%;overflow-x:auto;padding:var(--spacing-sm);background:var(--surface-ground);border-radius:var(--border-radius);font-size:var(--font-size-sm)}.card-body video,.card-body iframe{max-width:100%;height:auto}.card-footer{padding:var(--card-footer-padding);background:var(--surface-ground);display:flex;align-items:center;gap:var(--size-4);flex-wrap:wrap;font-size:var(--font-size-sm, .875rem);color:var(--text-color-secondary)}.card-footer:empty{display:none}.card-footer.has-divider{border-top:1px solid var(--surface-border)}.card-actions{padding:var(--card-actions-padding);background:var(--surface-ground);display:flex;align-items:center;gap:var(--spacing-md);justify-content:flex-end}.card-actions>*{flex-shrink:0;display:flex;gap:var(--spacing-sm)}.card-actions:empty{display:none}.card-actions.has-divider{border-top:1px solid var(--surface-border)}.card-actions.actions-align-left{justify-content:flex-start}.card-actions.actions-align-center{justify-content:center}.card-actions.actions-align-right{justify-content:flex-end}.card-actions.actions-align-space-between{justify-content:space-between}.card-actions.mobile-full-width-buttons{flex-direction:column;gap:var(--spacing-sm)}.card-actions.mobile-full-width-buttons>*{display:flex;flex-direction:column;width:100%;gap:var(--spacing-sm)}.card.hoverable:hover{transform:translateY(-2px)}.card.interactive{cursor:pointer;-webkit-user-select:none;user-select:none}.card.interactive:focus{outline:none;box-shadow:0 0 0 3px rgba(var(--primary-500-rgb, 59, 130, 246),.2)}.card.interactive:focus:not(:focus-visible){box-shadow:none}.card.interactive:active{transform:translateY(0)}.card.disabled{opacity:.6;pointer-events:none;cursor:not-allowed}.card.loading{pointer-events:none}.card-loading{display:flex;flex-direction:column;gap:var(--size-3);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:1024px){.card.density-spacious{--card-header-padding: var(--size-5) var(--size-6);--card-body-padding: var(--size-7);--card-footer-padding: var(--size-4-5) var(--size-6);--card-actions-padding: var(--size-4-5) var(--size-6)}}@media(max-width:768px){.card.density-compact{--card-header-padding: var(--size-2-5) var(--size-3);--card-body-padding: var(--size-3);--card-footer-padding: var(--size-2-5) var(--size-3);--card-actions-padding: var(--size-2-5) var(--size-3)}.card.density-normal{--card-header-padding: var(--size-3) var(--size-4);--card-body-padding: var(--size-4);--card-footer-padding: var(--size-3) var(--size-4);--card-actions-padding: var(--size-3) var(--size-4)}.card.density-spacious{--card-header-padding: var(--size-4) var(--size-5);--card-body-padding: var(--size-5);--card-footer-padding: var(--size-4) var(--size-5);--card-actions-padding: var(--size-4) var(--size-5)}.card-title{font-size:clamp(.9375rem,2vw,1rem)}.card-description{font-size:var(--font-size-xs)}.card-footer{font-size:var(--font-size-xs);gap:var(--size-3)}}@media(max-width:640px){.card-actions{flex-direction:column;gap:var(--spacing-md)}.card-actions>*{flex-direction:column;width:100%}}@media(max-width:480px){.card.density-compact{--card-header-padding: var(--spacing-sm) var(--size-3);--card-body-padding: var(--size-3);--card-footer-padding: var(--spacing-sm) var(--size-3);--card-actions-padding: var(--spacing-sm) var(--size-3)}.card.density-normal{--card-header-padding: var(--size-2-5) var(--size-3);--card-body-padding: var(--size-3);--card-footer-padding: var(--size-2-5) var(--size-3);--card-actions-padding: var(--size-2-5) var(--size-3)}.card.density-spacious{--card-header-padding: var(--size-3) var(--size-4);--card-body-padding: var(--size-4);--card-footer-padding: var(--size-3) var(--size-4);--card-actions-padding: var(--size-3) var(--size-4)}.card-header{flex-wrap:wrap;gap:var(--spacing-xs)}.card-title{font-size:clamp(.875rem,3vw,.9375rem);line-height:1.3}.card-description{font-size:var(--font-size-xs);line-height:1.4}[card-header-icon],[card-header-extra]{width:100%;justify-content:flex-start}.card-footer{flex-direction:column;align-items:flex-start;gap:var(--spacing-sm)}.card-actions{flex-direction:column;gap:var(--spacing-sm)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
439
439
|
}
|
|
440
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
440
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: PshCardComponent, decorators: [{
|
|
441
441
|
type: Component,
|
|
442
442
|
args: [{ selector: 'psh-card', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
443
443
|
style: 'display: block;',
|
|
@@ -458,16 +458,16 @@ class PshTagComponent {
|
|
|
458
458
|
constructor() {
|
|
459
459
|
this.config = inject(TAG_CONFIG);
|
|
460
460
|
this.elementRef = inject(ElementRef);
|
|
461
|
-
this.projectedText = signal('', ...(ngDevMode ? [{ debugName: "projectedText" }] : []));
|
|
462
|
-
this.variant = input(this.config.variant ?? 'primary', ...(ngDevMode ? [{ debugName: "variant" }] : []));
|
|
463
|
-
this.size = input(this.config.size ?? 'medium', ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
464
|
-
this.closable = input(this.config.closable ?? false, ...(ngDevMode ? [{ debugName: "closable" }] : []));
|
|
465
|
-
this.disabled = input(this.config.disabled ?? false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
466
|
-
this.interactive = input(this.config.interactive ?? false, ...(ngDevMode ? [{ debugName: "interactive" }] : []));
|
|
467
|
-
this.icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
|
|
468
|
-
this.closeLabel = input(this.config.closeLabel ?? 'Supprimer le tag', ...(ngDevMode ? [{ debugName: "closeLabel" }] : []));
|
|
469
|
-
this.content = input('Tag', ...(ngDevMode ? [{ debugName: "content" }] : []));
|
|
470
|
-
this.ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : []));
|
|
461
|
+
this.projectedText = signal('', ...(ngDevMode ? [{ debugName: "projectedText" }] : /* istanbul ignore next */ []));
|
|
462
|
+
this.variant = input(this.config.variant ?? 'primary', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
463
|
+
this.size = input(this.config.size ?? 'medium', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
464
|
+
this.closable = input(this.config.closable ?? false, ...(ngDevMode ? [{ debugName: "closable" }] : /* istanbul ignore next */ []));
|
|
465
|
+
this.disabled = input(this.config.disabled ?? false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
466
|
+
this.interactive = input(this.config.interactive ?? false, ...(ngDevMode ? [{ debugName: "interactive" }] : /* istanbul ignore next */ []));
|
|
467
|
+
this.icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
|
|
468
|
+
this.closeLabel = input(this.config.closeLabel ?? 'Supprimer le tag', ...(ngDevMode ? [{ debugName: "closeLabel" }] : /* istanbul ignore next */ []));
|
|
469
|
+
this.content = input('Tag', ...(ngDevMode ? [{ debugName: "content" }] : /* istanbul ignore next */ []));
|
|
470
|
+
this.ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
471
471
|
this.clicked = output();
|
|
472
472
|
this.closed = output();
|
|
473
473
|
this.computedAriaLabel = computed(() => {
|
|
@@ -481,10 +481,10 @@ class PshTagComponent {
|
|
|
481
481
|
if (projected)
|
|
482
482
|
return projected;
|
|
483
483
|
return 'Tag';
|
|
484
|
-
}, ...(ngDevMode ? [{ debugName: "computedAriaLabel" }] : []));
|
|
485
|
-
this.computedRole = computed(() => this.interactive() ? 'button' : 'status', ...(ngDevMode ? [{ debugName: "computedRole" }] : []));
|
|
486
|
-
this.computedTabIndex = computed(() => this.interactive() && !this.disabled() ? 0 : -1, ...(ngDevMode ? [{ debugName: "computedTabIndex" }] : []));
|
|
487
|
-
this.state = computed(() => this.disabled() ? 'disabled' : 'default', ...(ngDevMode ? [{ debugName: "state" }] : []));
|
|
484
|
+
}, ...(ngDevMode ? [{ debugName: "computedAriaLabel" }] : /* istanbul ignore next */ []));
|
|
485
|
+
this.computedRole = computed(() => this.interactive() ? 'button' : 'status', ...(ngDevMode ? [{ debugName: "computedRole" }] : /* istanbul ignore next */ []));
|
|
486
|
+
this.computedTabIndex = computed(() => this.interactive() && !this.disabled() ? 0 : -1, ...(ngDevMode ? [{ debugName: "computedTabIndex" }] : /* istanbul ignore next */ []));
|
|
487
|
+
this.state = computed(() => this.disabled() ? 'disabled' : 'default', ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
|
|
488
488
|
}
|
|
489
489
|
ngAfterContentChecked() {
|
|
490
490
|
const contentElement = this.elementRef.nativeElement.querySelector('.tag-content');
|
|
@@ -514,10 +514,10 @@ class PshTagComponent {
|
|
|
514
514
|
this.closed.emit();
|
|
515
515
|
}
|
|
516
516
|
}
|
|
517
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
518
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
517
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: PshTagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
518
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", type: PshTagComponent, isStandalone: true, selector: "psh-tag", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked", closed: "closed" }, ngImport: i0, template: "<div\n class=\"tag\"\n [class.primary]=\"variant() === 'primary'\"\n [class.secondary]=\"variant() === 'secondary'\"\n [class.success]=\"variant() === 'success'\"\n [class.warning]=\"variant() === 'warning'\"\n [class.danger]=\"variant() === 'danger'\"\n [class.small]=\"size() === 'small'\"\n [class.large]=\"size() === 'large'\"\n [class.disabled]=\"disabled()\"\n [attr.role]=\"computedRole()\"\n [attr.tabindex]=\"computedTabIndex()\"\n [attr.aria-label]=\"computedAriaLabel()\"\n [attr.aria-disabled]=\"disabled() || null\"\n [attr.data-state]=\"state()\"\n (click)=\"handleClick($event)\"\n (keydown)=\"handleKeydown($event)\"\n>\n @if (icon()) {\n <i class=\"ph ph-{{ icon() }}\" aria-hidden=\"true\"></i>\n }\n <span class=\"tag-content\">\n <ng-content>{{ content() }}</ng-content>\n </span>\n @if (closable()) {\n <button\n type=\"button\"\n class=\"tag-close\"\n (click)=\"handleClose($event)\"\n [attr.aria-label]=\"closeLabel()\"\n [disabled]=\"disabled()\"\n >\n <i class=\"ph ph-x\" aria-hidden=\"true\"></i>\n </button>\n }\n</div>", styles: [".tag{--tag-padding-y: var(--spacing-xs);--tag-padding-x: var(--spacing-sm);--tag-font-size: var(--font-size-sm);--tag-icon-size: var(--icon-size-sm);--tag-close-padding: var(--spacing-xxs);--tag-close-opacity: .7;--tag-close-opacity-hover: 1;--tag-close-hover-bg: rgba(0, 0, 0, .1);--tag-transition: all var(--animation-duration-normal) var(--animation-easing-default);display:inline-flex;align-items:center;gap:var(--spacing-xs);padding:var(--tag-padding-y) var(--tag-padding-x);border-radius:var(--border-radius);font-size:var(--tag-font-size);font-weight:var(--font-weight-medium);line-height:var(--line-height-tight);cursor:default;transition:var(--tag-transition);-webkit-user-select:none;user-select:none}.tag[role=button]{cursor:pointer}.tag[role=button]:focus-visible{outline:var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);outline-offset:var(--focus-outline-offset)}.tag i{font-size:var(--tag-icon-size)}.tag-content{display:inline-block;vertical-align:middle}.tag-close{display:inline-flex;align-items:center;justify-content:center;padding:var(--tag-close-padding);border:none;background:transparent;color:inherit;cursor:pointer;opacity:var(--tag-close-opacity);transition:opacity var(--animation-duration-normal) var(--animation-easing-default);border-radius:var(--border-radius);margin-left:var(--spacing-xs)}.tag-close:hover:not(:disabled){opacity:var(--tag-close-opacity-hover);background:var(--tag-close-hover-bg)}.tag-close:focus-visible{outline:none;box-shadow:0 0 0 var(--focus-ring-width) var(--focus-ring-color)}.tag.primary{background:var(--primary-gradient);color:var(--text-on-primary)}.tag.secondary{background:var(--secondary-color);color:var(--text-on-secondary)}.tag.success{background:var(--success-color);color:var(--text-on-success)}.tag.warning{background:var(--warning-color);color:var(--text-on-warning)}.tag.danger{background:var(--danger-color);color:var(--text-on-danger)}.tag.small{--tag-padding-y: calc(var(--spacing-xs) * .5);--tag-padding-x: var(--spacing-xs);--tag-font-size: var(--font-size-xs);--tag-icon-size: var(--icon-size-xs)}.tag.large{--tag-padding-y: var(--spacing-sm);--tag-padding-x: var(--spacing-md);--tag-font-size: var(--font-size-base);--tag-icon-size: var(--icon-size-md)}.tag.disabled{opacity:var(--opacity-disabled);cursor:not-allowed}.tag.disabled .tag-close{cursor:not-allowed}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
519
519
|
}
|
|
520
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
520
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: PshTagComponent, decorators: [{
|
|
521
521
|
type: Component,
|
|
522
522
|
args: [{ selector: 'psh-tag', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"tag\"\n [class.primary]=\"variant() === 'primary'\"\n [class.secondary]=\"variant() === 'secondary'\"\n [class.success]=\"variant() === 'success'\"\n [class.warning]=\"variant() === 'warning'\"\n [class.danger]=\"variant() === 'danger'\"\n [class.small]=\"size() === 'small'\"\n [class.large]=\"size() === 'large'\"\n [class.disabled]=\"disabled()\"\n [attr.role]=\"computedRole()\"\n [attr.tabindex]=\"computedTabIndex()\"\n [attr.aria-label]=\"computedAriaLabel()\"\n [attr.aria-disabled]=\"disabled() || null\"\n [attr.data-state]=\"state()\"\n (click)=\"handleClick($event)\"\n (keydown)=\"handleKeydown($event)\"\n>\n @if (icon()) {\n <i class=\"ph ph-{{ icon() }}\" aria-hidden=\"true\"></i>\n }\n <span class=\"tag-content\">\n <ng-content>{{ content() }}</ng-content>\n </span>\n @if (closable()) {\n <button\n type=\"button\"\n class=\"tag-close\"\n (click)=\"handleClose($event)\"\n [attr.aria-label]=\"closeLabel()\"\n [disabled]=\"disabled()\"\n >\n <i class=\"ph ph-x\" aria-hidden=\"true\"></i>\n </button>\n }\n</div>", styles: [".tag{--tag-padding-y: var(--spacing-xs);--tag-padding-x: var(--spacing-sm);--tag-font-size: var(--font-size-sm);--tag-icon-size: var(--icon-size-sm);--tag-close-padding: var(--spacing-xxs);--tag-close-opacity: .7;--tag-close-opacity-hover: 1;--tag-close-hover-bg: rgba(0, 0, 0, .1);--tag-transition: all var(--animation-duration-normal) var(--animation-easing-default);display:inline-flex;align-items:center;gap:var(--spacing-xs);padding:var(--tag-padding-y) var(--tag-padding-x);border-radius:var(--border-radius);font-size:var(--tag-font-size);font-weight:var(--font-weight-medium);line-height:var(--line-height-tight);cursor:default;transition:var(--tag-transition);-webkit-user-select:none;user-select:none}.tag[role=button]{cursor:pointer}.tag[role=button]:focus-visible{outline:var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);outline-offset:var(--focus-outline-offset)}.tag i{font-size:var(--tag-icon-size)}.tag-content{display:inline-block;vertical-align:middle}.tag-close{display:inline-flex;align-items:center;justify-content:center;padding:var(--tag-close-padding);border:none;background:transparent;color:inherit;cursor:pointer;opacity:var(--tag-close-opacity);transition:opacity var(--animation-duration-normal) var(--animation-easing-default);border-radius:var(--border-radius);margin-left:var(--spacing-xs)}.tag-close:hover:not(:disabled){opacity:var(--tag-close-opacity-hover);background:var(--tag-close-hover-bg)}.tag-close:focus-visible{outline:none;box-shadow:0 0 0 var(--focus-ring-width) var(--focus-ring-color)}.tag.primary{background:var(--primary-gradient);color:var(--text-on-primary)}.tag.secondary{background:var(--secondary-color);color:var(--text-on-secondary)}.tag.success{background:var(--success-color);color:var(--text-on-success)}.tag.warning{background:var(--warning-color);color:var(--text-on-warning)}.tag.danger{background:var(--danger-color);color:var(--text-on-danger)}.tag.small{--tag-padding-y: calc(var(--spacing-xs) * .5);--tag-padding-x: var(--spacing-xs);--tag-font-size: var(--font-size-xs);--tag-icon-size: var(--icon-size-xs)}.tag.large{--tag-padding-y: var(--spacing-sm);--tag-padding-x: var(--spacing-md);--tag-font-size: var(--font-size-base);--tag-icon-size: var(--icon-size-md)}.tag.disabled{opacity:var(--opacity-disabled);cursor:not-allowed}.tag.disabled .tag-close{cursor:not-allowed}\n"] }]
|
|
523
523
|
}], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], closeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeLabel", required: false }] }], content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
|
|
@@ -532,64 +532,64 @@ class PshStatCardComponent {
|
|
|
532
532
|
constructor() {
|
|
533
533
|
// Inputs principaux
|
|
534
534
|
/** Valeur principale de la statistique (nombre ou texte formaté) */
|
|
535
|
-
this.value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
|
|
535
|
+
this.value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
|
|
536
536
|
/** Description de la statistique */
|
|
537
|
-
this.description = input(...(ngDevMode ? [undefined, { debugName: "description" }] : []));
|
|
537
|
+
this.description = input(...(ngDevMode ? [undefined, { debugName: "description" }] : /* istanbul ignore next */ []));
|
|
538
538
|
/** Nom de l'icône Phosphor (sans le préfixe 'ph-') */
|
|
539
|
-
this.icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
|
|
539
|
+
this.icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
|
|
540
540
|
// Inputs optionnels
|
|
541
541
|
/** Variante du tag d'évolution (détermine la couleur) */
|
|
542
|
-
this.tagVariant = input(...(ngDevMode ? [undefined, { debugName: "tagVariant" }] : []));
|
|
542
|
+
this.tagVariant = input(...(ngDevMode ? [undefined, { debugName: "tagVariant" }] : /* istanbul ignore next */ []));
|
|
543
543
|
/** Label du tag d'évolution (ex: '+12.6%', '-8.1%') */
|
|
544
|
-
this.tagLabel = input(...(ngDevMode ? [undefined, { debugName: "tagLabel" }] : []));
|
|
544
|
+
this.tagLabel = input(...(ngDevMode ? [undefined, { debugName: "tagLabel" }] : /* istanbul ignore next */ []));
|
|
545
545
|
/** Couleur de fond personnalisée pour l'icône (CSS gradient ou couleur) */
|
|
546
|
-
this.iconBackground = input(...(ngDevMode ? [undefined, { debugName: "iconBackground" }] : []));
|
|
546
|
+
this.iconBackground = input(...(ngDevMode ? [undefined, { debugName: "iconBackground" }] : /* istanbul ignore next */ []));
|
|
547
547
|
/** Variante visuelle de la carte de base */
|
|
548
|
-
this.variant = input('elevated', ...(ngDevMode ? [{ debugName: "variant" }] : []));
|
|
548
|
+
this.variant = input('elevated', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
549
549
|
/** Carte cliquable avec feedback visuel */
|
|
550
|
-
this.interactive = input(false, ...(ngDevMode ? [{ debugName: "interactive" }] : []));
|
|
550
|
+
this.interactive = input(false, ...(ngDevMode ? [{ debugName: "interactive" }] : /* istanbul ignore next */ []));
|
|
551
551
|
/** Effet de survol */
|
|
552
|
-
this.hoverable = input(false, ...(ngDevMode ? [{ debugName: "hoverable" }] : []));
|
|
552
|
+
this.hoverable = input(false, ...(ngDevMode ? [{ debugName: "hoverable" }] : /* istanbul ignore next */ []));
|
|
553
553
|
/** État de chargement */
|
|
554
|
-
this.loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
|
|
554
|
+
this.loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
|
|
555
555
|
/** État désactivé */
|
|
556
|
-
this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
556
|
+
this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
557
557
|
/** Classes CSS additionnelles */
|
|
558
|
-
this.cssClass = input('', ...(ngDevMode ? [{ debugName: "cssClass" }] : []));
|
|
558
|
+
this.cssClass = input('', ...(ngDevMode ? [{ debugName: "cssClass" }] : /* istanbul ignore next */ []));
|
|
559
559
|
/** Styles inline personnalisés */
|
|
560
|
-
this.customStyle = input({}, ...(ngDevMode ? [{ debugName: "customStyle" }] : []));
|
|
560
|
+
this.customStyle = input({}, ...(ngDevMode ? [{ debugName: "customStyle" }] : /* istanbul ignore next */ []));
|
|
561
561
|
/** Label ARIA pour l'accessibilité */
|
|
562
|
-
this.ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : []));
|
|
562
|
+
this.ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
563
563
|
/** Disposition de la carte: 'horizontal' (icône à gauche) ou 'vertical' (icône en haut) */
|
|
564
|
-
this.layout = input('horizontal', ...(ngDevMode ? [{ debugName: "layout" }] : []));
|
|
564
|
+
this.layout = input('horizontal', ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
|
|
565
565
|
/** Active la direction row pour le card-body (icône et contenu côte à côte en flex-row) */
|
|
566
|
-
this.rowDirection = input(false, ...(ngDevMode ? [{ debugName: "rowDirection" }] : []));
|
|
566
|
+
this.rowDirection = input(false, ...(ngDevMode ? [{ debugName: "rowDirection" }] : /* istanbul ignore next */ []));
|
|
567
567
|
// Outputs
|
|
568
568
|
/** Émis lors du clic sur la carte */
|
|
569
569
|
this.clicked = output();
|
|
570
570
|
// Computed values
|
|
571
|
-
this.computedValue = computed(() => this.value() ?? '', ...(ngDevMode ? [{ debugName: "computedValue" }] : []));
|
|
572
|
-
this.computedDescription = computed(() => this.description() ?? '', ...(ngDevMode ? [{ debugName: "computedDescription" }] : []));
|
|
573
|
-
this.computedIcon = computed(() => this.icon() ?? '', ...(ngDevMode ? [{ debugName: "computedIcon" }] : []));
|
|
574
|
-
this.computedTagVariant = computed(() => this.tagVariant(), ...(ngDevMode ? [{ debugName: "computedTagVariant" }] : []));
|
|
575
|
-
this.computedTagLabel = computed(() => this.tagLabel(), ...(ngDevMode ? [{ debugName: "computedTagLabel" }] : []));
|
|
571
|
+
this.computedValue = computed(() => this.value() ?? '', ...(ngDevMode ? [{ debugName: "computedValue" }] : /* istanbul ignore next */ []));
|
|
572
|
+
this.computedDescription = computed(() => this.description() ?? '', ...(ngDevMode ? [{ debugName: "computedDescription" }] : /* istanbul ignore next */ []));
|
|
573
|
+
this.computedIcon = computed(() => this.icon() ?? '', ...(ngDevMode ? [{ debugName: "computedIcon" }] : /* istanbul ignore next */ []));
|
|
574
|
+
this.computedTagVariant = computed(() => this.tagVariant(), ...(ngDevMode ? [{ debugName: "computedTagVariant" }] : /* istanbul ignore next */ []));
|
|
575
|
+
this.computedTagLabel = computed(() => this.tagLabel(), ...(ngDevMode ? [{ debugName: "computedTagLabel" }] : /* istanbul ignore next */ []));
|
|
576
576
|
this.computedIconBackground = computed(() => {
|
|
577
577
|
const customBg = this.iconBackground();
|
|
578
578
|
if (customBg)
|
|
579
579
|
return customBg;
|
|
580
580
|
const variant = this.tagVariant();
|
|
581
581
|
return variant ? ICON_GRADIENT_DEFAULTS[variant] : null;
|
|
582
|
-
}, ...(ngDevMode ? [{ debugName: "computedIconBackground" }] : []));
|
|
582
|
+
}, ...(ngDevMode ? [{ debugName: "computedIconBackground" }] : /* istanbul ignore next */ []));
|
|
583
583
|
/** Style de l'icône avec couleur de fond personnalisée */
|
|
584
584
|
this.iconStyle = computed(() => {
|
|
585
585
|
const background = this.computedIconBackground();
|
|
586
586
|
return background ? { background } : null;
|
|
587
|
-
}, ...(ngDevMode ? [{ debugName: "iconStyle" }] : []));
|
|
587
|
+
}, ...(ngDevMode ? [{ debugName: "iconStyle" }] : /* istanbul ignore next */ []));
|
|
588
588
|
/** Vérifie si un tag doit être affiché */
|
|
589
|
-
this.hasTag = computed(() => !!(this.computedTagVariant() && this.computedTagLabel()), ...(ngDevMode ? [{ debugName: "hasTag" }] : []));
|
|
589
|
+
this.hasTag = computed(() => !!(this.computedTagVariant() && this.computedTagLabel()), ...(ngDevMode ? [{ debugName: "hasTag" }] : /* istanbul ignore next */ []));
|
|
590
590
|
/** Vérifie si une icône doit être affichée */
|
|
591
|
-
this.hasIcon = computed(() => !!this.computedIcon(), ...(ngDevMode ? [{ debugName: "hasIcon" }] : []));
|
|
592
|
-
this.useRowDirection = computed(() => this.rowDirection(), ...(ngDevMode ? [{ debugName: "useRowDirection" }] : []));
|
|
591
|
+
this.hasIcon = computed(() => !!this.computedIcon(), ...(ngDevMode ? [{ debugName: "hasIcon" }] : /* istanbul ignore next */ []));
|
|
592
|
+
this.useRowDirection = computed(() => this.rowDirection(), ...(ngDevMode ? [{ debugName: "useRowDirection" }] : /* istanbul ignore next */ []));
|
|
593
593
|
/** Label ARIA calculé */
|
|
594
594
|
this.computedAriaLabel = computed(() => {
|
|
595
595
|
const customLabel = this.ariaLabel();
|
|
@@ -601,7 +601,7 @@ class PshStatCardComponent {
|
|
|
601
601
|
return tag
|
|
602
602
|
? `${desc}: ${value}, ${tag}`
|
|
603
603
|
: `${desc}: ${value}`;
|
|
604
|
-
}, ...(ngDevMode ? [{ debugName: "computedAriaLabel" }] : []));
|
|
604
|
+
}, ...(ngDevMode ? [{ debugName: "computedAriaLabel" }] : /* istanbul ignore next */ []));
|
|
605
605
|
/** Classes CSS calculées */
|
|
606
606
|
this.computedClasses = computed(() => {
|
|
607
607
|
const classes = ['stat-card'];
|
|
@@ -627,11 +627,11 @@ class PshStatCardComponent {
|
|
|
627
627
|
if (this.cssClass())
|
|
628
628
|
classes.push(this.cssClass());
|
|
629
629
|
return classes.join(' ');
|
|
630
|
-
}, ...(ngDevMode ? [{ debugName: "computedClasses" }] : []));
|
|
630
|
+
}, ...(ngDevMode ? [{ debugName: "computedClasses" }] : /* istanbul ignore next */ []));
|
|
631
631
|
/** Styles calculés */
|
|
632
632
|
this.computedStyles = computed(() => {
|
|
633
633
|
return { ...this.customStyle() };
|
|
634
|
-
}, ...(ngDevMode ? [{ debugName: "computedStyles" }] : []));
|
|
634
|
+
}, ...(ngDevMode ? [{ debugName: "computedStyles" }] : /* istanbul ignore next */ []));
|
|
635
635
|
}
|
|
636
636
|
// Exposer les valeurs calculées pour le template
|
|
637
637
|
get displayValue() { return this.computedValue(); }
|
|
@@ -658,10 +658,10 @@ class PshStatCardComponent {
|
|
|
658
658
|
}
|
|
659
659
|
}
|
|
660
660
|
}
|
|
661
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
662
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
661
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: PshStatCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
662
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", type: PshStatCardComponent, isStandalone: true, selector: "psh-stat-card", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, tagVariant: { classPropertyName: "tagVariant", publicName: "tagVariant", isSignal: true, isRequired: false, transformFunction: null }, tagLabel: { classPropertyName: "tagLabel", publicName: "tagLabel", isSignal: true, isRequired: false, transformFunction: null }, iconBackground: { classPropertyName: "iconBackground", publicName: "iconBackground", isSignal: true, isRequired: false, transformFunction: null }, 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 }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, rowDirection: { classPropertyName: "rowDirection", publicName: "rowDirection", 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 [attr.tabindex]=\"interactive() && !disabled() ? 0 : null\"\n [attr.aria-label]=\"computedAriaLabel()\"\n [attr.aria-disabled]=\"disabled() ? 'true' : null\"\n [attr.aria-busy]=\"loading() ? 'true' : null\"\n [attr.role]=\"interactive() ? 'button' : 'article'\"\n>\n @if (loading()) {\n <div class=\"stat-loading\">\n <div class=\"skeleton-circle\"></div>\n <div class=\"skeleton-content\">\n <div class=\"skeleton-line\"></div>\n <div class=\"skeleton-line short\"></div>\n </div>\n </div>\n } @else {\n @if (useRowDirection()) {\n <div class=\"stat-card-body\">\n @if (hasIcon()) {\n <div class=\"stat-icon\" [style]=\"iconStyle()\">\n <i class=\"ph ph-{{ displayIcon }}\" aria-hidden=\"true\"></i>\n </div>\n }\n\n <div class=\"stat-content\">\n <h3 class=\"stat-value\">{{ displayValue }}</h3>\n <p class=\"stat-description\">{{ displayDescription }}</p>\n\n @if (hasTag()) {\n <psh-tag [variant]=\"displayTagVariant!\">\n {{ displayTagLabel }}\n </psh-tag>\n }\n </div>\n </div>\n } @else {\n @if (hasIcon()) {\n <div class=\"stat-icon\" [style]=\"iconStyle()\">\n <i class=\"ph ph-{{ displayIcon }}\" aria-hidden=\"true\"></i>\n </div>\n }\n\n <div class=\"stat-content\">\n <h3 class=\"stat-value\">{{ displayValue }}</h3>\n <p class=\"stat-description\">{{ displayDescription }}</p>\n\n @if (hasTag()) {\n <psh-tag [variant]=\"displayTagVariant!\">\n {{ displayTagLabel }}\n </psh-tag>\n }\n </div>\n }\n }\n</div>\n", styles: [".stat-card{background:var(--surface-card);border-radius:var(--border-radius-lg, .75rem);overflow:hidden;transition:all .2s ease;width:100%;display:flex;position:relative;padding:var(--spacing-lg)}.stat-card.variant-elevated{box-shadow:0 2px 8px #00000014,0 1px 4px #0000000f}.stat-card.variant-elevated.hoverable:hover{box-shadow:0 4px 12px #0000001f,0 2px 6px #00000014}.stat-card.variant-outlined{border:2px solid var(--surface-border);box-shadow:none}.stat-card.variant-default{background:var(--surface-ground);box-shadow:none}.stat-card.stat-card--horizontal{flex-direction:row;align-items:center;gap:var(--spacing-md);min-height:var(--size-32)}.stat-card.stat-card--vertical{flex-direction:column;align-items:center;text-align:center;min-height:auto}.stat-card.stat-card--row{display:block}.stat-card.hoverable:hover{transform:translateY(-2px)}.stat-card.interactive{cursor:pointer;-webkit-user-select:none;user-select:none}.stat-card.interactive:focus{outline:none;box-shadow:0 0 0 3px rgba(var(--primary-500-rgb, 59, 130, 246),.2)}.stat-card.interactive:focus:not(:focus-visible){box-shadow:none}.stat-card.interactive:active{transform:translateY(0)}.stat-card.disabled{opacity:.6;pointer-events:none;cursor:not-allowed}.stat-card.loading{pointer-events:none}.stat-card-body{display:flex;flex-direction:row;align-items:center;width:100%;gap:var(--spacing-md)}.stat-icon{width:var(--size-16);min-width:var(--size-16);height:var(--size-16);display:flex;align-items:center;justify-content:center;border-radius:var(--radius-lg);background:var(--surface-200);flex-shrink:0}.stat-card--horizontal .stat-icon{margin:0}.stat-card--vertical .stat-icon{margin:0 auto var(--spacing-md) auto}.stat-card--row .stat-card-body .stat-icon{margin:0}.stat-icon i{font-size:var(--icon-size-xl);color:var(--surface-0)}.stat-card--horizontal .stat-content{flex:1;min-width:0}.stat-card--vertical .stat-content{width:100%;text-align:center}.stat-card--row .stat-card-body .stat-content{flex:1;min-width:0}.stat-content{display:flex;flex-direction:column;gap:var(--spacing-sm)}.stat-content psh-tag{margin-top:var(--spacing-xs)}.stat-value{font-size:var(--font-size-2xl);font-weight:var(--font-weight-semibold);color:var(--text-color);margin:0;line-height:var(--line-height-tight)}.stat-description{color:var(--text-color-secondary);margin:0;font-size:var(--font-size-sm);line-height:var(--line-height-relaxed)}.stat-loading{display:flex;align-items:center;gap:var(--spacing-md);width:100%;animation:pulse 1.5s ease-in-out infinite}.skeleton-circle{width:var(--size-16);height:var(--size-16);border-radius:var(--radius-lg);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;flex-shrink:0}.skeleton-content{flex:1;display:flex;flex-direction:column;gap:var(--spacing-xs)}.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:768px){.stat-card.stat-card--horizontal{min-height:var(--size-28)}.stat-card{padding:var(--spacing-md)}.stat-card.stat-card--horizontal{gap:var(--spacing-sm)}.stat-icon,.skeleton-circle{width:var(--size-14);min-width:var(--size-14);height:var(--size-14)}.stat-card-body{gap:var(--spacing-sm)}.stat-icon i{font-size:var(--icon-size-lg)}.stat-value{font-size:clamp(var(--font-size-lg),3vw + .5rem,var(--font-size-xl))}.stat-description{font-size:var(--font-size-xs)}}@media(max-width:480px){.stat-card.stat-card--horizontal:not(.stat-card--row){flex-direction:column;align-items:center;text-align:center;min-height:auto;gap:var(--spacing-md)}.stat-card.stat-card--row{padding:var(--spacing-md)}.stat-card--horizontal:not(.stat-card--row) .stat-icon{margin:0 auto var(--spacing-sm) auto}.stat-icon,.skeleton-circle{width:var(--size-12);min-width:var(--size-12);height:var(--size-12)}.stat-icon i{font-size:var(--icon-size-md)}.stat-card--horizontal:not(.stat-card--row) .stat-content{width:100%;text-align:center}.stat-value{font-size:clamp(var(--font-size-base),4vw,var(--font-size-lg))}.stat-description{font-size:var(--font-size-xs)}.stat-loading{flex-direction:column;align-items:center}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: PshTagComponent, selector: "psh-tag", inputs: ["variant", "size", "closable", "disabled", "interactive", "icon", "closeLabel", "content", "ariaLabel"], outputs: ["clicked", "closed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
663
663
|
}
|
|
664
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
664
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: PshStatCardComponent, decorators: [{
|
|
665
665
|
type: Component,
|
|
666
666
|
args: [{ selector: 'psh-stat-card', imports: [CommonModule, PshTagComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n [class]=\"computedClasses()\"\n [ngStyle]=\"computedStyles()\"\n (click)=\"handleClick($event)\"\n (keydown)=\"handleKeydown($event)\"\n [attr.tabindex]=\"interactive() && !disabled() ? 0 : null\"\n [attr.aria-label]=\"computedAriaLabel()\"\n [attr.aria-disabled]=\"disabled() ? 'true' : null\"\n [attr.aria-busy]=\"loading() ? 'true' : null\"\n [attr.role]=\"interactive() ? 'button' : 'article'\"\n>\n @if (loading()) {\n <div class=\"stat-loading\">\n <div class=\"skeleton-circle\"></div>\n <div class=\"skeleton-content\">\n <div class=\"skeleton-line\"></div>\n <div class=\"skeleton-line short\"></div>\n </div>\n </div>\n } @else {\n @if (useRowDirection()) {\n <div class=\"stat-card-body\">\n @if (hasIcon()) {\n <div class=\"stat-icon\" [style]=\"iconStyle()\">\n <i class=\"ph ph-{{ displayIcon }}\" aria-hidden=\"true\"></i>\n </div>\n }\n\n <div class=\"stat-content\">\n <h3 class=\"stat-value\">{{ displayValue }}</h3>\n <p class=\"stat-description\">{{ displayDescription }}</p>\n\n @if (hasTag()) {\n <psh-tag [variant]=\"displayTagVariant!\">\n {{ displayTagLabel }}\n </psh-tag>\n }\n </div>\n </div>\n } @else {\n @if (hasIcon()) {\n <div class=\"stat-icon\" [style]=\"iconStyle()\">\n <i class=\"ph ph-{{ displayIcon }}\" aria-hidden=\"true\"></i>\n </div>\n }\n\n <div class=\"stat-content\">\n <h3 class=\"stat-value\">{{ displayValue }}</h3>\n <p class=\"stat-description\">{{ displayDescription }}</p>\n\n @if (hasTag()) {\n <psh-tag [variant]=\"displayTagVariant!\">\n {{ displayTagLabel }}\n </psh-tag>\n }\n </div>\n }\n }\n</div>\n", styles: [".stat-card{background:var(--surface-card);border-radius:var(--border-radius-lg, .75rem);overflow:hidden;transition:all .2s ease;width:100%;display:flex;position:relative;padding:var(--spacing-lg)}.stat-card.variant-elevated{box-shadow:0 2px 8px #00000014,0 1px 4px #0000000f}.stat-card.variant-elevated.hoverable:hover{box-shadow:0 4px 12px #0000001f,0 2px 6px #00000014}.stat-card.variant-outlined{border:2px solid var(--surface-border);box-shadow:none}.stat-card.variant-default{background:var(--surface-ground);box-shadow:none}.stat-card.stat-card--horizontal{flex-direction:row;align-items:center;gap:var(--spacing-md);min-height:var(--size-32)}.stat-card.stat-card--vertical{flex-direction:column;align-items:center;text-align:center;min-height:auto}.stat-card.stat-card--row{display:block}.stat-card.hoverable:hover{transform:translateY(-2px)}.stat-card.interactive{cursor:pointer;-webkit-user-select:none;user-select:none}.stat-card.interactive:focus{outline:none;box-shadow:0 0 0 3px rgba(var(--primary-500-rgb, 59, 130, 246),.2)}.stat-card.interactive:focus:not(:focus-visible){box-shadow:none}.stat-card.interactive:active{transform:translateY(0)}.stat-card.disabled{opacity:.6;pointer-events:none;cursor:not-allowed}.stat-card.loading{pointer-events:none}.stat-card-body{display:flex;flex-direction:row;align-items:center;width:100%;gap:var(--spacing-md)}.stat-icon{width:var(--size-16);min-width:var(--size-16);height:var(--size-16);display:flex;align-items:center;justify-content:center;border-radius:var(--radius-lg);background:var(--surface-200);flex-shrink:0}.stat-card--horizontal .stat-icon{margin:0}.stat-card--vertical .stat-icon{margin:0 auto var(--spacing-md) auto}.stat-card--row .stat-card-body .stat-icon{margin:0}.stat-icon i{font-size:var(--icon-size-xl);color:var(--surface-0)}.stat-card--horizontal .stat-content{flex:1;min-width:0}.stat-card--vertical .stat-content{width:100%;text-align:center}.stat-card--row .stat-card-body .stat-content{flex:1;min-width:0}.stat-content{display:flex;flex-direction:column;gap:var(--spacing-sm)}.stat-content psh-tag{margin-top:var(--spacing-xs)}.stat-value{font-size:var(--font-size-2xl);font-weight:var(--font-weight-semibold);color:var(--text-color);margin:0;line-height:var(--line-height-tight)}.stat-description{color:var(--text-color-secondary);margin:0;font-size:var(--font-size-sm);line-height:var(--line-height-relaxed)}.stat-loading{display:flex;align-items:center;gap:var(--spacing-md);width:100%;animation:pulse 1.5s ease-in-out infinite}.skeleton-circle{width:var(--size-16);height:var(--size-16);border-radius:var(--radius-lg);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;flex-shrink:0}.skeleton-content{flex:1;display:flex;flex-direction:column;gap:var(--spacing-xs)}.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:768px){.stat-card.stat-card--horizontal{min-height:var(--size-28)}.stat-card{padding:var(--spacing-md)}.stat-card.stat-card--horizontal{gap:var(--spacing-sm)}.stat-icon,.skeleton-circle{width:var(--size-14);min-width:var(--size-14);height:var(--size-14)}.stat-card-body{gap:var(--spacing-sm)}.stat-icon i{font-size:var(--icon-size-lg)}.stat-value{font-size:clamp(var(--font-size-lg),3vw + .5rem,var(--font-size-xl))}.stat-description{font-size:var(--font-size-xs)}}@media(max-width:480px){.stat-card.stat-card--horizontal:not(.stat-card--row){flex-direction:column;align-items:center;text-align:center;min-height:auto;gap:var(--spacing-md)}.stat-card.stat-card--row{padding:var(--spacing-md)}.stat-card--horizontal:not(.stat-card--row) .stat-icon{margin:0 auto var(--spacing-sm) auto}.stat-icon,.skeleton-circle{width:var(--size-12);min-width:var(--size-12);height:var(--size-12)}.stat-icon i{font-size:var(--icon-size-md)}.stat-card--horizontal:not(.stat-card--row) .stat-content{width:100%;text-align:center}.stat-value{font-size:clamp(var(--font-size-base),4vw,var(--font-size-lg))}.stat-description{font-size:var(--font-size-xs)}.stat-loading{flex-direction:column;align-items:center}}\n"] }]
|
|
667
667
|
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], tagVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "tagVariant", required: false }] }], tagLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "tagLabel", required: false }] }], iconBackground: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconBackground", required: false }] }], 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 }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], rowDirection: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowDirection", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
|
|
@@ -694,29 +694,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
|
|
|
694
694
|
class PshHorizontalCardComponent {
|
|
695
695
|
constructor() {
|
|
696
696
|
/** Variante de la carte de base */
|
|
697
|
-
this.variant = input('elevated', ...(ngDevMode ? [{ debugName: "variant" }] : []));
|
|
697
|
+
this.variant = input('elevated', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
698
698
|
/** Carte cliquable */
|
|
699
|
-
this.interactive = input(false, ...(ngDevMode ? [{ debugName: "interactive" }] : []));
|
|
699
|
+
this.interactive = input(false, ...(ngDevMode ? [{ debugName: "interactive" }] : /* istanbul ignore next */ []));
|
|
700
700
|
/** Effet de survol */
|
|
701
|
-
this.hoverable = input(false, ...(ngDevMode ? [{ debugName: "hoverable" }] : []));
|
|
701
|
+
this.hoverable = input(false, ...(ngDevMode ? [{ debugName: "hoverable" }] : /* istanbul ignore next */ []));
|
|
702
702
|
/** État de chargement */
|
|
703
|
-
this.loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
|
|
703
|
+
this.loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
|
|
704
704
|
/** État désactivé */
|
|
705
|
-
this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
705
|
+
this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
706
706
|
/** Classes CSS additionnelles */
|
|
707
|
-
this.cssClass = input('', ...(ngDevMode ? [{ debugName: "cssClass" }] : []));
|
|
707
|
+
this.cssClass = input('', ...(ngDevMode ? [{ debugName: "cssClass" }] : /* istanbul ignore next */ []));
|
|
708
708
|
/** Styles inline personnalisés */
|
|
709
|
-
this.customStyle = input({}, ...(ngDevMode ? [{ debugName: "customStyle" }] : []));
|
|
709
|
+
this.customStyle = input({}, ...(ngDevMode ? [{ debugName: "customStyle" }] : /* istanbul ignore next */ []));
|
|
710
710
|
/** Largeur du contenu latéral (utiliser les tokens de sizing comme var(--size-48)) */
|
|
711
|
-
this.sideWidth = input('var(--size-48)', ...(ngDevMode ? [{ debugName: "sideWidth" }] : []));
|
|
711
|
+
this.sideWidth = input('var(--size-48)', ...(ngDevMode ? [{ debugName: "sideWidth" }] : /* istanbul ignore next */ []));
|
|
712
712
|
/** Gap entre le contenu latéral et principal */
|
|
713
|
-
this.gap = input('var(--spacing-md)', ...(ngDevMode ? [{ debugName: "gap" }] : []));
|
|
713
|
+
this.gap = input('var(--spacing-md)', ...(ngDevMode ? [{ debugName: "gap" }] : /* istanbul ignore next */ []));
|
|
714
714
|
/** Padding du contenu latéral */
|
|
715
|
-
this.sidePadding = input('0', ...(ngDevMode ? [{ debugName: "sidePadding" }] : []));
|
|
715
|
+
this.sidePadding = input('0', ...(ngDevMode ? [{ debugName: "sidePadding" }] : /* istanbul ignore next */ []));
|
|
716
716
|
/** Padding du contenu principal */
|
|
717
|
-
this.contentPadding = input('var(--spacing-md)', ...(ngDevMode ? [{ debugName: "contentPadding" }] : []));
|
|
717
|
+
this.contentPadding = input('var(--spacing-md)', ...(ngDevMode ? [{ debugName: "contentPadding" }] : /* istanbul ignore next */ []));
|
|
718
718
|
/** Hauteur du contenu latéral sur mobile (utiliser les tokens de sizing) */
|
|
719
|
-
this.mobileHeight = input('var(--size-48)', ...(ngDevMode ? [{ debugName: "mobileHeight" }] : []));
|
|
719
|
+
this.mobileHeight = input('var(--size-48)', ...(ngDevMode ? [{ debugName: "mobileHeight" }] : /* istanbul ignore next */ []));
|
|
720
720
|
/** Émis lors du clic sur la carte */
|
|
721
721
|
this.clicked = output();
|
|
722
722
|
/** Classes CSS calculées selon les propriétés */
|
|
@@ -734,7 +734,7 @@ class PshHorizontalCardComponent {
|
|
|
734
734
|
if (this.cssClass())
|
|
735
735
|
classes.push(this.cssClass());
|
|
736
736
|
return classes.join(' ');
|
|
737
|
-
}, ...(ngDevMode ? [{ debugName: "computedClasses" }] : []));
|
|
737
|
+
}, ...(ngDevMode ? [{ debugName: "computedClasses" }] : /* istanbul ignore next */ []));
|
|
738
738
|
/** Styles calculés */
|
|
739
739
|
this.computedStyles = computed(() => {
|
|
740
740
|
return {
|
|
@@ -745,7 +745,7 @@ class PshHorizontalCardComponent {
|
|
|
745
745
|
'--horizontal-mobile-height': this.mobileHeight(),
|
|
746
746
|
...this.customStyle()
|
|
747
747
|
};
|
|
748
|
-
}, ...(ngDevMode ? [{ debugName: "computedStyles" }] : []));
|
|
748
|
+
}, ...(ngDevMode ? [{ debugName: "computedStyles" }] : /* istanbul ignore next */ []));
|
|
749
749
|
}
|
|
750
750
|
/**
|
|
751
751
|
* Gère le clic sur la carte
|
|
@@ -766,10 +766,10 @@ class PshHorizontalCardComponent {
|
|
|
766
766
|
}
|
|
767
767
|
}
|
|
768
768
|
}
|
|
769
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
770
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
769
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: PshHorizontalCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
770
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", 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 }); }
|
|
771
771
|
}
|
|
772
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
772
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: PshHorizontalCardComponent, decorators: [{
|
|
773
773
|
type: Component,
|
|
774
774
|
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"] }]
|
|
775
775
|
}], 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"] }] } });
|
|
@@ -799,64 +799,64 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
|
|
|
799
799
|
*/
|
|
800
800
|
class PshInfoCardComponent {
|
|
801
801
|
constructor() {
|
|
802
|
-
this.hasHeaderActions = signal(false, ...(ngDevMode ? [{ debugName: "hasHeaderActions" }] : []));
|
|
802
|
+
this.hasHeaderActions = signal(false, ...(ngDevMode ? [{ debugName: "hasHeaderActions" }] : /* istanbul ignore next */ []));
|
|
803
803
|
/** Title displayed in the card header */
|
|
804
|
-
this.title = input('', ...(ngDevMode ? [{ debugName: "title" }] : []));
|
|
804
|
+
this.title = input('', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
|
|
805
805
|
/** Array of label-value pairs to display */
|
|
806
|
-
this.data = input([], ...(ngDevMode ? [{ debugName: "data" }] : []));
|
|
806
|
+
this.data = input([], ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
|
|
807
807
|
/** Display options for the card */
|
|
808
808
|
this.options = input({
|
|
809
809
|
showEmptyState: true,
|
|
810
810
|
emptyStateMessage: 'Aucune information disponible',
|
|
811
811
|
labelWidth: undefined,
|
|
812
812
|
valueWidth: undefined
|
|
813
|
-
}, ...(ngDevMode ? [{ debugName: "options" }] : []));
|
|
813
|
+
}, ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
|
|
814
814
|
/** Base card variant style */
|
|
815
|
-
this.variant = input('outlined', ...(ngDevMode ? [{ debugName: "variant" }] : []));
|
|
815
|
+
this.variant = input('outlined', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
816
816
|
/** Icon to display in the header (Phosphor icon name without 'ph-' prefix) */
|
|
817
|
-
this.icon = input('circle-dashed', ...(ngDevMode ? [{ debugName: "icon" }] : []));
|
|
817
|
+
this.icon = input('circle-dashed', ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
|
|
818
818
|
/** Custom ARIA label for accessibility */
|
|
819
|
-
this.ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : []));
|
|
819
|
+
this.ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
820
820
|
/** Custom CSS classes */
|
|
821
|
-
this.cssClass = input('', ...(ngDevMode ? [{ debugName: "cssClass" }] : []));
|
|
821
|
+
this.cssClass = input('', ...(ngDevMode ? [{ debugName: "cssClass" }] : /* istanbul ignore next */ []));
|
|
822
822
|
/** Custom inline styles */
|
|
823
|
-
this.customStyle = input({}, ...(ngDevMode ? [{ debugName: "customStyle" }] : []));
|
|
823
|
+
this.customStyle = input({}, ...(ngDevMode ? [{ debugName: "customStyle" }] : /* istanbul ignore next */ []));
|
|
824
824
|
/** Whether the card should be interactive/clickable */
|
|
825
|
-
this.interactive = input(false, ...(ngDevMode ? [{ debugName: "interactive" }] : []));
|
|
825
|
+
this.interactive = input(false, ...(ngDevMode ? [{ debugName: "interactive" }] : /* istanbul ignore next */ []));
|
|
826
826
|
/** Whether to show hover effects */
|
|
827
|
-
this.hoverable = input(false, ...(ngDevMode ? [{ debugName: "hoverable" }] : []));
|
|
827
|
+
this.hoverable = input(false, ...(ngDevMode ? [{ debugName: "hoverable" }] : /* istanbul ignore next */ []));
|
|
828
828
|
/** Indicates if data is loading */
|
|
829
|
-
this.loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
|
|
829
|
+
this.loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
|
|
830
830
|
/** Whether the card is disabled */
|
|
831
|
-
this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
831
|
+
this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
832
832
|
/** Emitted when card is clicked */
|
|
833
833
|
this.clicked = output();
|
|
834
834
|
/** Whether to auto-enable full width buttons on mobile (default: true) */
|
|
835
|
-
this.autoFullWidthOnMobile = input(true, ...(ngDevMode ? [{ debugName: "autoFullWidthOnMobile" }] : []));
|
|
835
|
+
this.autoFullWidthOnMobile = input(true, ...(ngDevMode ? [{ debugName: "autoFullWidthOnMobile" }] : /* istanbul ignore next */ []));
|
|
836
836
|
/** Signal to track if viewport is mobile */
|
|
837
|
-
this.isMobile = signal(false, ...(ngDevMode ? [{ debugName: "isMobile" }] : []));
|
|
837
|
+
this.isMobile = signal(false, ...(ngDevMode ? [{ debugName: "isMobile" }] : /* istanbul ignore next */ []));
|
|
838
838
|
this.platformId = inject(PLATFORM_ID);
|
|
839
839
|
/** Determines if the empty state should be shown */
|
|
840
840
|
this.shouldShowEmptyState = computed(() => {
|
|
841
841
|
const opts = this.options();
|
|
842
842
|
const dataArray = this.data();
|
|
843
843
|
return opts.showEmptyState && (!dataArray || dataArray.length === 0);
|
|
844
|
-
}, ...(ngDevMode ? [{ debugName: "shouldShowEmptyState" }] : []));
|
|
844
|
+
}, ...(ngDevMode ? [{ debugName: "shouldShowEmptyState" }] : /* istanbul ignore next */ []));
|
|
845
845
|
/** Returns the empty state message to display */
|
|
846
846
|
this.getEmptyStateMessage = computed(() => {
|
|
847
847
|
return this.options().emptyStateMessage || 'Aucune information disponible';
|
|
848
|
-
}, ...(ngDevMode ? [{ debugName: "getEmptyStateMessage" }] : []));
|
|
848
|
+
}, ...(ngDevMode ? [{ debugName: "getEmptyStateMessage" }] : /* istanbul ignore next */ []));
|
|
849
849
|
/** Full icon class name for Phosphor icons */
|
|
850
850
|
this.titleIcon = computed(() => {
|
|
851
851
|
const iconName = this.icon();
|
|
852
852
|
return iconName ? `ph-${iconName}` : '';
|
|
853
|
-
}, ...(ngDevMode ? [{ debugName: "titleIcon" }] : []));
|
|
853
|
+
}, ...(ngDevMode ? [{ debugName: "titleIcon" }] : /* istanbul ignore next */ []));
|
|
854
854
|
/** Computed ARIA label for the component */
|
|
855
855
|
this.computedAriaLabel = computed(() => {
|
|
856
856
|
const customLabel = this.ariaLabel();
|
|
857
857
|
const titleText = this.title();
|
|
858
858
|
return customLabel || (titleText ? `Information card: ${titleText}` : 'Information card');
|
|
859
|
-
}, ...(ngDevMode ? [{ debugName: "computedAriaLabel" }] : []));
|
|
859
|
+
}, ...(ngDevMode ? [{ debugName: "computedAriaLabel" }] : /* istanbul ignore next */ []));
|
|
860
860
|
/** Computed CSS classes */
|
|
861
861
|
this.computedClasses = computed(() => {
|
|
862
862
|
const classes = ['info-card'];
|
|
@@ -872,11 +872,11 @@ class PshInfoCardComponent {
|
|
|
872
872
|
if (this.cssClass())
|
|
873
873
|
classes.push(this.cssClass());
|
|
874
874
|
return classes.join(' ');
|
|
875
|
-
}, ...(ngDevMode ? [{ debugName: "computedClasses" }] : []));
|
|
875
|
+
}, ...(ngDevMode ? [{ debugName: "computedClasses" }] : /* istanbul ignore next */ []));
|
|
876
876
|
/** Computed styles */
|
|
877
877
|
this.computedStyles = computed(() => {
|
|
878
878
|
return { ...this.customStyle() };
|
|
879
|
-
}, ...(ngDevMode ? [{ debugName: "computedStyles" }] : []));
|
|
879
|
+
}, ...(ngDevMode ? [{ debugName: "computedStyles" }] : /* istanbul ignore next */ []));
|
|
880
880
|
/** Gets CSS classes for card-actions based on mobile state */
|
|
881
881
|
this.getActionsClasses = computed(() => {
|
|
882
882
|
const classes = [];
|
|
@@ -884,7 +884,7 @@ class PshInfoCardComponent {
|
|
|
884
884
|
classes.push('mobile-full-width-buttons');
|
|
885
885
|
}
|
|
886
886
|
return classes.join(' ');
|
|
887
|
-
}, ...(ngDevMode ? [{ debugName: "getActionsClasses" }] : []));
|
|
887
|
+
}, ...(ngDevMode ? [{ debugName: "getActionsClasses" }] : /* istanbul ignore next */ []));
|
|
888
888
|
this.elementRef = inject(ElementRef);
|
|
889
889
|
if (isPlatformBrowser(this.platformId)) {
|
|
890
890
|
this.checkMobileViewport();
|
|
@@ -934,10 +934,10 @@ class PshInfoCardComponent {
|
|
|
934
934
|
}
|
|
935
935
|
}
|
|
936
936
|
}
|
|
937
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
938
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: PshInfoCardComponent, isStandalone: true, selector: "psh-info-card", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", 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 }, cssClass: { classPropertyName: "cssClass", publicName: "cssClass", isSignal: true, isRequired: false, transformFunction: null }, customStyle: { classPropertyName: "customStyle", publicName: "customStyle", 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 }, autoFullWidthOnMobile: { classPropertyName: "autoFullWidthOnMobile", publicName: "autoFullWidthOnMobile", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { styleAttribute: "display: block; height: 100%;" }, ngImport: i0, template: "<div\n [class]=\"computedClasses()\"\n [ngStyle]=\"computedStyles()\"\n (click)=\"handleClick($event)\"\n (keydown)=\"handleKeydown($event)\"\n role=\"region\"\n [attr.tabindex]=\"interactive() && !disabled() ? 0 : null\"\n [attr.aria-label]=\"computedAriaLabel()\"\n [attr.aria-disabled]=\"disabled() ? 'true' : null\"\n [attr.aria-busy]=\"loading() ? 'true' : null\"\n>\n @if (title() || hasHeaderActions()) {\n <div class=\"info-card-header\">\n @if (title()) {\n <h3 class=\"info-card-title\">\n @if (icon()) {\n <i\n class=\"ph {{ titleIcon() }}\"\n aria-hidden=\"true\"\n [attr.data-icon]=\"icon()\"\n ></i>\n }\n {{ title() }}\n </h3>\n }\n <div class=\"info-card-header-actions\">\n <ng-content select=\"[card-header-actions]\"></ng-content>\n </div>\n </div>\n }\n\n <div class=\"info-card-body\">\n @if (loading()) {\n <div class=\"info-card-loading\">\n <div class=\"skeleton-line\"></div>\n <div class=\"skeleton-line\"></div>\n <div class=\"skeleton-line short\"></div>\n </div>\n } @else {\n <div\n class=\"info-card-content\"\n role=\"list\"\n >\n @if (shouldShowEmptyState()) {\n <div\n class=\"info-card-empty-state\"\n role=\"status\"\n aria-live=\"polite\"\n [attr.data-testid]=\"'info-card-empty-state'\"\n >\n {{ getEmptyStateMessage() }}\n </div>\n } @else {\n @for (item of data(); track $index) {\n <div\n class=\"info-card-row\"\n role=\"listitem\"\n [attr.data-index]=\"$index\"\n [class]=\"item.customClass || ''\"\n >\n <div\n class=\"info-card-label\"\n [style.width]=\"item.labelWidth || options().labelWidth\"\n [attr.data-label]=\"item.label\"\n >\n {{ item.label }}\n </div>\n <div\n class=\"info-card-value\"\n [style.width]=\"item.valueWidth || options().valueWidth\"\n [attr.data-value]=\"item.value\"\n [title]=\"item.value?.toString() || ''\"\n >\n {{ item.value ?? 'Non renseign\u00E9' }}\n </div>\n </div>\n }\n }\n </div>\n }\n </div>\n\n <div class=\"info-card-actions\" [class]=\"getActionsClasses()\">\n <ng-content select=\"[card-actions]\"></ng-content>\n </div>\n</div>\n", styles: [".info-card{background:var(--surface-card);border-radius:var(--border-radius-lg, .75rem);overflow:hidden;transition:all .2s ease;width:100%;height:100%;display:flex;flex-direction:column;position:relative}.info-card.variant-elevated{box-shadow:0 1px 3px #0000001a,0 1px 2px #0000000f}.info-card.variant-elevated.hoverable:hover{box-shadow:0 4px 6px #0000001a,0 2px 4px #0000000f}.info-card.variant-outlined{border:1px solid var(--surface-border)}.info-card.variant-default{background:var(--surface-section)}.info-card.hoverable:hover{transform:translateY(-2px)}.info-card.interactive{cursor:pointer;-webkit-user-select:none;user-select:none}.info-card.interactive:focus{outline:none;box-shadow:0 0 0 3px rgba(var(--primary-500-rgb, 59, 130, 246),.2)}.info-card.interactive:focus:not(:focus-visible){box-shadow:none}.info-card.interactive:active{transform:translateY(0)}.info-card.disabled{opacity:.6;pointer-events:none;cursor:not-allowed}.info-card.loading{pointer-events:none}.info-card-header{background:var(--surface-ground);border-bottom:var(--border-width-1) solid var(--surface-border);display:flex;align-items:center;justify-content:space-between;gap:var(--size-2)}.info-card-header-actions{display:flex;align-items:center;gap:var(--spacing-xs);padding-right:var(--size-2);flex-shrink:0}.info-card-header-actions:empty{display:none}.info-card-title{color:var(--primary-color);margin:0;font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);padding:var(--size-2) var(--size-4);display:flex;align-items:center;gap:var(--size-2);transition:all var(--animation-duration-fast) var(--animation-easing-default)}.info-card-title i{font-size:var(--icon-size-md);flex-shrink:0}.info-card-body{flex:1;display:flex;flex-direction:column}.info-card-content{padding:var(--size-2);min-height:var(--size-48);display:flex;flex-direction:column;transition:opacity var(--animation-duration-normal) var(--animation-easing-default)}.info-card-row{display:flex;align-items:center;padding:var(--size-1) 0;min-height:var(--size-8);animation:fadeIn var(--animation-duration-fast) var(--animation-easing-default);transition:background-color var(--animation-duration-fast) var(--animation-easing-default)}.info-card-row:hover{background-color:var(--surface-hover);border-radius:var(--radius-base)}.info-card-row:last-child{border-bottom:none}.info-card-label{font-weight:var(--font-weight-medium);color:var(--text-color-secondary);font-size:var(--font-size-sm);padding-right:var(--size-2);position:relative;min-width:0;flex:1;line-height:var(--line-height-normal)}.info-card-label:after{content:\"\";position:absolute;right:0;top:50%;width:var(--size-1);height:var(--border-width-1);background-color:var(--surface-border)}.info-card-value{font-weight:var(--font-weight-medium);color:var(--text-color);font-size:var(--font-size-sm);padding-left:var(--size-2);text-align:left;min-width:0;flex:2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:var(--line-height-normal)}.info-card-empty-state{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--text-color-secondary);font-style:italic;font-size:var(--font-size-sm);padding:var(--size-6);background:var(--surface-ground);border-radius:var(--radius-lg);margin:var(--size-2);border:var(--border-width-1) dashed var(--surface-border);animation:fadeIn var(--animation-duration-normal) var(--animation-easing-default)}.info-card-actions>*{padding:var(--size-3) var(--size-4);background:var(--surface-ground);border-top:var(--border-width-1) solid var(--surface-border);display:flex;gap:var(--spacing-sm);align-items:center;justify-content:flex-end}.info-card-actions:not(:has(*)){display:none}.info-card-actions.mobile-full-width-buttons>*{display:flex;flex-direction:column;width:100%;gap:var(--spacing-sm)}.info-card-loading{display:flex;flex-direction:column;gap:var(--spacing-sm);padding:var(--size-2);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}}@keyframes fadeIn{0%{opacity:0;transform:translateY(var(--size-1))}to{opacity:1;transform:translateY(0)}}@media(max-width:768px){.info-card-title{font-size:var(--font-size-sm);padding:var(--size-1-5) var(--size-3);gap:var(--size-1-5)}.info-card-title i{font-size:var(--icon-size-sm)}.info-card-header-actions{padding-right:var(--size-1-5)}.info-card-content{padding:var(--size-1-5);min-height:var(--size-36)}.info-card-row{min-height:var(--size-7);padding:var(--size-0-5) 0}.info-card-label,.info-card-value{font-size:var(--font-size-xs)}.info-card-empty-state{font-size:var(--font-size-xs);padding:var(--size-4);margin:var(--size-1-5)}.info-card-actions{padding:var(--size-2) var(--size-3)}}@media(max-width:480px){.info-card-header{flex-wrap:wrap;gap:var(--size-1)}.info-card-title{font-size:var(--font-size-xs);padding:var(--size-1) var(--size-2);gap:var(--size-1)}.info-card-title i{font-size:var(--icon-size-xs)}.info-card-header-actions{padding:0 var(--size-1) var(--size-1) var(--size-1)}.info-card-content{padding:var(--size-1);min-height:auto}.info-card-row{flex-direction:column;align-items:flex-start;gap:var(--size-0-5);padding:var(--size-1-5) 0;min-height:auto}.info-card-row:hover{background-color:transparent}.info-card-label{width:100%;padding-right:0;text-align:left;flex:none;font-weight:var(--font-weight-semibold);color:var(--text-color)}.info-card-label:after{display:none}.info-card-value{width:100%;padding-left:0;text-align:left;flex:none;font-weight:var(--font-weight-normal);white-space:normal}.info-card-empty-state{padding:var(--size-3);margin:var(--size-1)}.info-card-actions{padding:var(--size-1-5) var(--size-2);flex-direction:column;gap:var(--spacing-md)}.info-card-actions>*{width:100%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
937
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: PshInfoCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
938
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", type: PshInfoCardComponent, isStandalone: true, selector: "psh-info-card", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", 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 }, cssClass: { classPropertyName: "cssClass", publicName: "cssClass", isSignal: true, isRequired: false, transformFunction: null }, customStyle: { classPropertyName: "customStyle", publicName: "customStyle", 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 }, autoFullWidthOnMobile: { classPropertyName: "autoFullWidthOnMobile", publicName: "autoFullWidthOnMobile", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { styleAttribute: "display: block; height: 100%;" }, ngImport: i0, template: "<div\n [class]=\"computedClasses()\"\n [ngStyle]=\"computedStyles()\"\n (click)=\"handleClick($event)\"\n (keydown)=\"handleKeydown($event)\"\n role=\"region\"\n [attr.tabindex]=\"interactive() && !disabled() ? 0 : null\"\n [attr.aria-label]=\"computedAriaLabel()\"\n [attr.aria-disabled]=\"disabled() ? 'true' : null\"\n [attr.aria-busy]=\"loading() ? 'true' : null\"\n>\n @if (title() || hasHeaderActions()) {\n <div class=\"info-card-header\">\n @if (title()) {\n <h3 class=\"info-card-title\">\n @if (icon()) {\n <i\n class=\"ph {{ titleIcon() }}\"\n aria-hidden=\"true\"\n [attr.data-icon]=\"icon()\"\n ></i>\n }\n {{ title() }}\n </h3>\n }\n <div class=\"info-card-header-actions\">\n <ng-content select=\"[card-header-actions]\"></ng-content>\n </div>\n </div>\n }\n\n <div class=\"info-card-body\">\n @if (loading()) {\n <div class=\"info-card-loading\">\n <div class=\"skeleton-line\"></div>\n <div class=\"skeleton-line\"></div>\n <div class=\"skeleton-line short\"></div>\n </div>\n } @else {\n <div\n class=\"info-card-content\"\n role=\"list\"\n >\n @if (shouldShowEmptyState()) {\n <div\n class=\"info-card-empty-state\"\n role=\"status\"\n aria-live=\"polite\"\n [attr.data-testid]=\"'info-card-empty-state'\"\n >\n {{ getEmptyStateMessage() }}\n </div>\n } @else {\n @for (item of data(); track $index) {\n <div\n class=\"info-card-row\"\n role=\"listitem\"\n [attr.data-index]=\"$index\"\n [class]=\"item.customClass || ''\"\n >\n <div\n class=\"info-card-label\"\n [style.width]=\"item.labelWidth || options().labelWidth\"\n [attr.data-label]=\"item.label\"\n >\n {{ item.label }}\n </div>\n <div\n class=\"info-card-value\"\n [style.width]=\"item.valueWidth || options().valueWidth\"\n [attr.data-value]=\"item.value\"\n [title]=\"item.value?.toString() || ''\"\n >\n {{ item.value ?? 'Non renseign\u00E9' }}\n </div>\n </div>\n }\n }\n </div>\n }\n </div>\n\n <div class=\"info-card-actions\" [class]=\"getActionsClasses()\">\n <ng-content select=\"[card-actions]\"></ng-content>\n </div>\n</div>\n", styles: [".info-card{background:var(--surface-card);border-radius:var(--border-radius-lg, .75rem);overflow:hidden;transition:all .2s ease;width:100%;height:100%;display:flex;flex-direction:column;position:relative}.info-card.variant-elevated{box-shadow:0 1px 3px #0000001a,0 1px 2px #0000000f}.info-card.variant-elevated.hoverable:hover{box-shadow:0 4px 6px #0000001a,0 2px 4px #0000000f}.info-card.variant-outlined{border:1px solid var(--surface-border)}.info-card.variant-default{background:var(--surface-section)}.info-card.hoverable:hover{transform:translateY(-2px)}.info-card.interactive{cursor:pointer;-webkit-user-select:none;user-select:none}.info-card.interactive:focus{outline:none;box-shadow:0 0 0 3px rgba(var(--primary-500-rgb, 59, 130, 246),.2)}.info-card.interactive:focus:not(:focus-visible){box-shadow:none}.info-card.interactive:active{transform:translateY(0)}.info-card.disabled{opacity:.6;pointer-events:none;cursor:not-allowed}.info-card.loading{pointer-events:none}.info-card-header{background:var(--surface-ground);border-bottom:var(--border-width-1) solid var(--surface-border);display:flex;align-items:center;justify-content:space-between;gap:var(--size-2)}.info-card-header-actions{display:flex;align-items:center;gap:var(--spacing-xs);padding-right:var(--size-2);flex-shrink:0}.info-card-header-actions:empty{display:none}.info-card-title{color:var(--primary-color);margin:0;font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);padding:var(--size-2) var(--size-4);display:flex;align-items:center;gap:var(--size-2);transition:all var(--animation-duration-fast) var(--animation-easing-default)}.info-card-title i{font-size:var(--icon-size-md);flex-shrink:0}.info-card-body{flex:1;display:flex;flex-direction:column}.info-card-content{padding:var(--size-2);min-height:var(--size-48);display:flex;flex-direction:column;transition:opacity var(--animation-duration-normal) var(--animation-easing-default)}.info-card-row{display:flex;align-items:center;padding:var(--size-1) 0;min-height:var(--size-8);animation:fadeIn var(--animation-duration-fast) var(--animation-easing-default);transition:background-color var(--animation-duration-fast) var(--animation-easing-default)}.info-card-row:hover{background-color:var(--surface-hover);border-radius:var(--radius-base)}.info-card-row:last-child{border-bottom:none}.info-card-label{font-weight:var(--font-weight-medium);color:var(--text-color-secondary);font-size:var(--font-size-sm);padding-right:var(--size-2);position:relative;min-width:0;flex:1;line-height:var(--line-height-normal)}.info-card-label:after{content:\"\";position:absolute;right:0;top:50%;width:var(--size-1);height:var(--border-width-1);background-color:var(--surface-border)}.info-card-value{font-weight:var(--font-weight-medium);color:var(--text-color);font-size:var(--font-size-sm);padding-left:var(--size-2);text-align:left;min-width:0;flex:2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:var(--line-height-normal)}.info-card-empty-state{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--text-color-secondary);font-style:italic;font-size:var(--font-size-sm);padding:var(--size-6);background:var(--surface-ground);border-radius:var(--radius-lg);margin:var(--size-2);border:var(--border-width-1) dashed var(--surface-border);animation:fadeIn var(--animation-duration-normal) var(--animation-easing-default)}.info-card-actions>*{padding:var(--size-3) var(--size-4);background:var(--surface-ground);border-top:var(--border-width-1) solid var(--surface-border);display:flex;gap:var(--spacing-sm);align-items:center;justify-content:flex-end}.info-card-actions:not(:has(*)){display:none}.info-card-actions.mobile-full-width-buttons>*{display:flex;flex-direction:column;width:100%;gap:var(--spacing-sm)}.info-card-loading{display:flex;flex-direction:column;gap:var(--spacing-sm);padding:var(--size-2);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}}@keyframes fadeIn{0%{opacity:0;transform:translateY(var(--size-1))}to{opacity:1;transform:translateY(0)}}@media(max-width:768px){.info-card-title{font-size:var(--font-size-sm);padding:var(--size-1-5) var(--size-3);gap:var(--size-1-5)}.info-card-title i{font-size:var(--icon-size-sm)}.info-card-header-actions{padding-right:var(--size-1-5)}.info-card-content{padding:var(--size-1-5);min-height:var(--size-36)}.info-card-row{min-height:var(--size-7);padding:var(--size-0-5) 0}.info-card-label,.info-card-value{font-size:var(--font-size-xs)}.info-card-empty-state{font-size:var(--font-size-xs);padding:var(--size-4);margin:var(--size-1-5)}.info-card-actions{padding:var(--size-2) var(--size-3)}}@media(max-width:480px){.info-card-header{flex-wrap:wrap;gap:var(--size-1)}.info-card-title{font-size:var(--font-size-xs);padding:var(--size-1) var(--size-2);gap:var(--size-1)}.info-card-title i{font-size:var(--icon-size-xs)}.info-card-header-actions{padding:0 var(--size-1) var(--size-1) var(--size-1)}.info-card-content{padding:var(--size-1);min-height:auto}.info-card-row{flex-direction:column;align-items:flex-start;gap:var(--size-0-5);padding:var(--size-1-5) 0;min-height:auto}.info-card-row:hover{background-color:transparent}.info-card-label{width:100%;padding-right:0;text-align:left;flex:none;font-weight:var(--font-weight-semibold);color:var(--text-color)}.info-card-label:after{display:none}.info-card-value{width:100%;padding-left:0;text-align:left;flex:none;font-weight:var(--font-weight-normal);white-space:normal}.info-card-empty-state{padding:var(--size-3);margin:var(--size-1)}.info-card-actions{padding:var(--size-1-5) var(--size-2);flex-direction:column;gap:var(--spacing-md)}.info-card-actions>*{width:100%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
939
939
|
}
|
|
940
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
940
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: PshInfoCardComponent, decorators: [{
|
|
941
941
|
type: Component,
|
|
942
942
|
args: [{ selector: 'psh-info-card', imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
943
943
|
style: 'display: block; height: 100%;'
|
|
@@ -959,23 +959,23 @@ let checkboxIdCounter = 0;
|
|
|
959
959
|
class PshCheckboxComponent {
|
|
960
960
|
constructor() {
|
|
961
961
|
this.config = inject(CHECKBOX_CONFIG);
|
|
962
|
-
this.checkboxInput = viewChild('checkboxInput', ...(ngDevMode ? [{ debugName: "checkboxInput" }] : []));
|
|
962
|
+
this.checkboxInput = viewChild('checkboxInput', ...(ngDevMode ? [{ debugName: "checkboxInput" }] : /* istanbul ignore next */ []));
|
|
963
963
|
this.uniqueId = `psh-cb-${++checkboxIdCounter}`;
|
|
964
964
|
this.onChange = (_) => { };
|
|
965
965
|
this.onTouched = () => { };
|
|
966
|
-
this.checked = model(this.config.checked ?? false, ...(ngDevMode ? [{ debugName: "checked" }] : []));
|
|
967
|
-
this.disabled = model(this.config.disabled ?? false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
968
|
-
this.indeterminate = model(this.config.indeterminate ?? false, ...(ngDevMode ? [{ debugName: "indeterminate" }] : []));
|
|
969
|
-
this.touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : []));
|
|
970
|
-
this.required = input(this.config.required ?? false, ...(ngDevMode ? [{ debugName: "required" }] : []));
|
|
971
|
-
this.label = input(this.config.label ?? '', ...(ngDevMode ? [{ debugName: "label" }] : []));
|
|
972
|
-
this.error = input(this.config.error, ...(ngDevMode ? [{ debugName: "error" }] : []));
|
|
973
|
-
this.success = input(this.config.success, ...(ngDevMode ? [{ debugName: "success" }] : []));
|
|
974
|
-
this.ariaLabel = input(this.config.ariaLabel, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
|
|
975
|
-
this.size = input(this.config.size ?? 'medium', ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
976
|
-
this.labelPosition = input(this.config.labelPosition ?? 'right', ...(ngDevMode ? [{ debugName: "labelPosition" }] : []));
|
|
977
|
-
this.ariaChecked = computed(() => this.indeterminate() ? 'mixed' : (this.checked() ? 'true' : 'false'), ...(ngDevMode ? [{ debugName: "ariaChecked" }] : []));
|
|
978
|
-
this.computedAriaLabel = computed(() => this.ariaLabel() || this.label() || undefined, ...(ngDevMode ? [{ debugName: "computedAriaLabel" }] : []));
|
|
966
|
+
this.checked = model(this.config.checked ?? false, ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
|
|
967
|
+
this.disabled = model(this.config.disabled ?? false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
968
|
+
this.indeterminate = model(this.config.indeterminate ?? false, ...(ngDevMode ? [{ debugName: "indeterminate" }] : /* istanbul ignore next */ []));
|
|
969
|
+
this.touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
|
|
970
|
+
this.required = input(this.config.required ?? false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
|
|
971
|
+
this.label = input(this.config.label ?? '', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
972
|
+
this.error = input(this.config.error, ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
|
|
973
|
+
this.success = input(this.config.success, ...(ngDevMode ? [{ debugName: "success" }] : /* istanbul ignore next */ []));
|
|
974
|
+
this.ariaLabel = input(this.config.ariaLabel, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
975
|
+
this.size = input(this.config.size ?? 'medium', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
976
|
+
this.labelPosition = input(this.config.labelPosition ?? 'right', ...(ngDevMode ? [{ debugName: "labelPosition" }] : /* istanbul ignore next */ []));
|
|
977
|
+
this.ariaChecked = computed(() => this.indeterminate() ? 'mixed' : (this.checked() ? 'true' : 'false'), ...(ngDevMode ? [{ debugName: "ariaChecked" }] : /* istanbul ignore next */ []));
|
|
978
|
+
this.computedAriaLabel = computed(() => this.ariaLabel() || this.label() || undefined, ...(ngDevMode ? [{ debugName: "computedAriaLabel" }] : /* istanbul ignore next */ []));
|
|
979
979
|
this.ariaDescribedBy = computed(() => {
|
|
980
980
|
const ids = [];
|
|
981
981
|
if (this.error())
|
|
@@ -983,7 +983,7 @@ class PshCheckboxComponent {
|
|
|
983
983
|
if (this.success())
|
|
984
984
|
ids.push(`${this.uniqueId}-success`);
|
|
985
985
|
return ids.length > 0 ? ids.join(' ') : undefined;
|
|
986
|
-
}, ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : []));
|
|
986
|
+
}, ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : /* istanbul ignore next */ []));
|
|
987
987
|
this.state = computed(() => {
|
|
988
988
|
if (this.disabled())
|
|
989
989
|
return 'disabled';
|
|
@@ -994,7 +994,7 @@ class PshCheckboxComponent {
|
|
|
994
994
|
if (this.success())
|
|
995
995
|
return 'success';
|
|
996
996
|
return this.checked() ? 'checked' : 'unchecked';
|
|
997
|
-
}, ...(ngDevMode ? [{ debugName: "state" }] : []));
|
|
997
|
+
}, ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
|
|
998
998
|
effect(() => {
|
|
999
999
|
if (!this.label() && !this.ariaLabel()) {
|
|
1000
1000
|
console.warn('[psh-checkbox] Label manquant pour l\'accessibilité.');
|
|
@@ -1024,14 +1024,14 @@ class PshCheckboxComponent {
|
|
|
1024
1024
|
registerOnTouched(fn) { this.onTouched = fn; }
|
|
1025
1025
|
setDisabledState(isDisabled) { this.disabled.set(isDisabled); }
|
|
1026
1026
|
focus() { this.checkboxInput()?.nativeElement.focus(); }
|
|
1027
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1028
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
1027
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: PshCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1028
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", type: PshCheckboxComponent, isStandalone: true, selector: "psh-checkbox", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, success: { classPropertyName: "success", publicName: "success", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", disabled: "disabledChange", indeterminate: "indeterminateChange", touched: "touchedChange" }, host: { properties: { "class.checkbox-disabled": "disabled()", "class.checkbox-error": "!!error()", "class.checkbox-success": "!!success()", "class.checkbox-small": "size() === \"small\"", "class.checkbox-large": "size() === \"large\"", "class.checkbox-checked": "checked() && !indeterminate()", "class.checkbox-indeterminate": "indeterminate()", "attr.data-state": "state()", "attr.aria-checked": "ariaChecked()" } }, providers: [{
|
|
1029
1029
|
provide: NG_VALUE_ACCESSOR,
|
|
1030
1030
|
useExisting: PshCheckboxComponent,
|
|
1031
1031
|
multi: true
|
|
1032
1032
|
}], viewQueries: [{ propertyName: "checkboxInput", first: true, predicate: ["checkboxInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"checkbox-container\">\n <label class=\"checkbox-label\" [class.label-left]=\"labelPosition() === 'left'\">\n <input\n #checkboxInput\n type=\"checkbox\"\n class=\"checkbox-input\"\n [checked]=\"checked()\"\n [disabled]=\"disabled()\"\n [required]=\"required()\"\n [attr.aria-label]=\"computedAriaLabel()\"\n [attr.aria-checked]=\"ariaChecked()\"\n [attr.aria-describedby]=\"ariaDescribedBy()\"\n (change)=\"toggle()\"\n (keydown)=\"handleKeydown($event)\"\n />\n \n <span class=\"checkbox-control\">\n @if (checked() && !indeterminate()) {\n <i class=\"ph ph-check\" aria-hidden=\"true\"></i>\n }\n @if (indeterminate()) {\n <i class=\"ph ph-minus\" aria-hidden=\"true\"></i>\n }\n </span>\n\n <span class=\"checkbox-text\">\n @if (label()) {\n {{ label() }}\n } @else {\n <ng-content></ng-content>\n }\n </span>\n </label>\n\n @if (error()) {\n <div [id]=\"uniqueId + '-error'\" class=\"checkbox-message error\" role=\"alert\">\n {{ error() }}\n </div>\n }\n @if (success()) {\n <div [id]=\"uniqueId + '-success'\" class=\"checkbox-message success\" role=\"status\">\n {{ success() }}\n </div>\n }\n</div>", styles: [":host{display:inline-flex;flex-direction:column;gap:.5rem}.checkbox-container{display:flex;flex-direction:column}.checkbox-label{display:inline-flex;align-items:center;gap:.75rem;cursor:pointer;-webkit-user-select:none;user-select:none;color:var(--text-color)}.checkbox-label.label-left{flex-direction:row-reverse;justify-content:space-between}.checkbox-input{position:absolute;opacity:0;width:0;height:0}.checkbox-control{display:flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;border:.125rem solid var(--surface-border);border-radius:var(--border-radius);background:var(--surface-card);transition:all var(--animation-duration-fast) var(--animation-easing-default);color:#fff;position:relative;flex-shrink:0}:host.checkbox-checked .checkbox-control,:host.checkbox-indeterminate .checkbox-control{background:var(--primary-color);border-color:var(--primary-color)}.checkbox-input:focus-visible+.checkbox-control{outline:.125rem solid var(--focus-outline-color);outline-offset:.125rem}.checkbox-control i{font-size:.875rem;line-height:1}:host.checkbox-small .checkbox-control{width:1rem;height:1rem}:host.checkbox-large .checkbox-control{width:1.5rem;height:1.5rem}:host.checkbox-error .checkbox-control{border-color:var(--danger-color)}:host.checkbox-error.checkbox-checked .checkbox-control{background:var(--danger-color)}:host.checkbox-success .checkbox-control{border-color:var(--success-color)}:host.checkbox-success.checkbox-checked .checkbox-control{background:var(--success-color)}:host.checkbox-disabled{opacity:var(--opacity-disabled);cursor:not-allowed}:host.checkbox-disabled .checkbox-label{cursor:not-allowed}.checkbox-message{font-size:.875rem;margin-top:.125rem}.checkbox-message.error{color:var(--danger-color)}.checkbox-message.success{color:var(--success-color)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1033
1033
|
}
|
|
1034
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1034
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: PshCheckboxComponent, decorators: [{
|
|
1035
1035
|
type: Component,
|
|
1036
1036
|
args: [{ selector: 'psh-checkbox', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, providers: [{
|
|
1037
1037
|
provide: NG_VALUE_ACCESSOR,
|
|
@@ -1052,26 +1052,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
|
|
|
1052
1052
|
|
|
1053
1053
|
class PshCollapseComponent {
|
|
1054
1054
|
constructor() {
|
|
1055
|
-
this.expanded = model(false, ...(ngDevMode ? [{ debugName: "expanded" }] : []));
|
|
1056
|
-
this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
1057
|
-
this.variant = input('default', { ...(ngDevMode ? { debugName: "variant" } : {}), transform: (value) => {
|
|
1055
|
+
this.expanded = model(false, ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
|
|
1056
|
+
this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
1057
|
+
this.variant = input('default', { ...(ngDevMode ? { debugName: "variant" } : /* istanbul ignore next */ {}), transform: (value) => {
|
|
1058
1058
|
if (!['default', 'outline'].includes(value)) {
|
|
1059
1059
|
console.warn(`[psh-collapse] Invalid variant "${value}", falling back to "default"`);
|
|
1060
1060
|
return 'default';
|
|
1061
1061
|
}
|
|
1062
1062
|
return value;
|
|
1063
1063
|
} });
|
|
1064
|
-
this.size = input('medium', { ...(ngDevMode ? { debugName: "size" } : {}), transform: (value) => {
|
|
1064
|
+
this.size = input('medium', { ...(ngDevMode ? { debugName: "size" } : /* istanbul ignore next */ {}), transform: (value) => {
|
|
1065
1065
|
if (!['small', 'medium', 'large'].includes(value)) {
|
|
1066
1066
|
console.warn(`[psh-collapse] Invalid size "${value}", falling back to "medium"`);
|
|
1067
1067
|
return 'medium';
|
|
1068
1068
|
}
|
|
1069
1069
|
return value;
|
|
1070
1070
|
} });
|
|
1071
|
-
this.icon = input('caret-down', ...(ngDevMode ? [{ debugName: "icon" }] : []));
|
|
1072
|
-
this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
|
|
1073
|
-
this.maxHeight = input('1000px', ...(ngDevMode ? [{ debugName: "maxHeight" }] : []));
|
|
1074
|
-
this.disableAnimation = input(false, ...(ngDevMode ? [{ debugName: "disableAnimation" }] : []));
|
|
1071
|
+
this.icon = input('caret-down', ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
|
|
1072
|
+
this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : /* istanbul ignore next */ []));
|
|
1073
|
+
this.maxHeight = input('1000px', ...(ngDevMode ? [{ debugName: "maxHeight" }] : /* istanbul ignore next */ []));
|
|
1074
|
+
this.disableAnimation = input(false, ...(ngDevMode ? [{ debugName: "disableAnimation" }] : /* istanbul ignore next */ []));
|
|
1075
1075
|
this.opened = output();
|
|
1076
1076
|
this.closed = output();
|
|
1077
1077
|
this.toggled = output();
|
|
@@ -1079,19 +1079,19 @@ class PshCollapseComponent {
|
|
|
1079
1079
|
this.headerId = computed(() => {
|
|
1080
1080
|
const customId = this.id();
|
|
1081
1081
|
return customId ? `${customId}-header` : `${this.uniqueId}-header`;
|
|
1082
|
-
}, ...(ngDevMode ? [{ debugName: "headerId" }] : []));
|
|
1082
|
+
}, ...(ngDevMode ? [{ debugName: "headerId" }] : /* istanbul ignore next */ []));
|
|
1083
1083
|
this.contentId = computed(() => {
|
|
1084
1084
|
const customId = this.id();
|
|
1085
1085
|
return customId ? `${customId}-content` : `${this.uniqueId}-content`;
|
|
1086
|
-
}, ...(ngDevMode ? [{ debugName: "contentId" }] : []));
|
|
1086
|
+
}, ...(ngDevMode ? [{ debugName: "contentId" }] : /* istanbul ignore next */ []));
|
|
1087
1087
|
this.state = computed(() => {
|
|
1088
1088
|
if (this.disabled())
|
|
1089
1089
|
return 'disabled';
|
|
1090
1090
|
return this.expanded() ? 'expanded' : 'collapsed';
|
|
1091
|
-
}, ...(ngDevMode ? [{ debugName: "state" }] : []));
|
|
1091
|
+
}, ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
|
|
1092
1092
|
this.animationClass = computed(() => {
|
|
1093
1093
|
return this.disableAnimation() ? 'no-animation' : '';
|
|
1094
|
-
}, ...(ngDevMode ? [{ debugName: "animationClass" }] : []));
|
|
1094
|
+
}, ...(ngDevMode ? [{ debugName: "animationClass" }] : /* istanbul ignore next */ []));
|
|
1095
1095
|
}
|
|
1096
1096
|
static { this.idCounter = 0; }
|
|
1097
1097
|
toggle() {
|
|
@@ -1132,10 +1132,10 @@ class PshCollapseComponent {
|
|
|
1132
1132
|
break;
|
|
1133
1133
|
}
|
|
1134
1134
|
}
|
|
1135
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1136
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.
|
|
1135
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: PshCollapseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1136
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.2", type: PshCollapseComponent, isStandalone: true, selector: "psh-collapse", inputs: { expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, disableAnimation: { classPropertyName: "disableAnimation", publicName: "disableAnimation", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expanded: "expandedChange", opened: "opened", closed: "closed", toggled: "toggled" }, ngImport: i0, template: "<div\n class=\"collapse\"\n [class.expanded]=\"expanded()\"\n [class.disabled]=\"disabled()\"\n [class.outline]=\"variant() === 'outline'\"\n [class.small]=\"size() === 'small'\"\n [class.large]=\"size() === 'large'\"\n [class.no-animation]=\"disableAnimation()\"\n [attr.data-state]=\"state()\"\n [style.--collapse-max-height]=\"maxHeight()\"\n>\n <button\n [id]=\"headerId()\"\n class=\"collapse-header\"\n (click)=\"toggle()\"\n (keydown)=\"onKeydown($event)\"\n [attr.aria-expanded]=\"expanded()\"\n [attr.aria-controls]=\"contentId()\"\n [disabled]=\"disabled()\"\n type=\"button\"\n >\n <span class=\"header-content\">\n <ng-content select=\"[collapse-header]\">\n <span>Section pliable</span>\n </ng-content>\n </span>\n <i\n class=\"ph ph-{{ icon() }}\"\n [class.expanded]=\"expanded()\"\n aria-hidden=\"true\"\n ></i>\n </button>\n\n <div\n [id]=\"contentId()\"\n class=\"collapse-content\"\n role=\"region\"\n [attr.aria-labelledby]=\"headerId()\"\n [attr.aria-hidden]=\"!expanded()\"\n >\n <div class=\"content-wrapper\">\n <ng-content></ng-content>\n </div>\n </div>\n</div>", styles: [".collapse{--collapse-transition-duration: .3s;--collapse-transition-timing: cubic-bezier(.4, 0, .2, 1);width:100%;border-radius:var(--border-radius, 8px);background:var(--surface-card, #fff);overflow:hidden}.collapse.no-animation{--collapse-transition-duration: 0s}.collapse.no-animation .collapse-content,.collapse.no-animation .content-wrapper,.collapse.no-animation .collapse-header i{transition:none}.collapse.outline{background:transparent;border:1px solid var(--surface-border, #e0e0e0)}.collapse-header{width:100%;display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-md, 12px) var(--spacing-lg, 16px);background:var(--surface-ground, #f5f5f5);border:none;cursor:pointer;color:var(--text-color, #333);font-family:inherit;font-size:var(--font-size-base, 14px);transition:background-color .2s ease;border-bottom:1px solid var(--surface-border, #e0e0e0);text-align:left}.collapse-header:hover:not(:disabled){background:var(--surface-hover, #ebebeb)}.collapse-header:focus-visible{outline:2px solid var(--primary-color, #0066cc);outline-offset:-2px;z-index:1}.collapse-header:disabled{cursor:not-allowed;opacity:var(--opacity-disabled, .6)}.header-content{font-weight:500;text-align:left}.collapse-header i{color:var(--primary-color, #0066cc);font-size:1.2rem;transition:transform var(--collapse-transition-duration) var(--collapse-transition-timing)}.collapse-header i.expanded{transform:rotate(180deg)}.collapse-content{max-height:0;overflow:hidden;transition:max-height var(--collapse-transition-duration) var(--collapse-transition-timing)}.collapse.expanded .collapse-content{max-height:var(--collapse-max-height);overflow:visible}.content-wrapper{padding:var(--spacing-lg, 16px);padding-top:var(--spacing-md, 12px);color:var(--text-color-secondary, #666);text-align:left;transform:translateY(-10px);opacity:0;transition:transform var(--collapse-transition-duration) var(--collapse-transition-timing),opacity var(--collapse-transition-duration) var(--collapse-transition-timing)}.collapse.expanded .content-wrapper{transform:translateY(0);opacity:1;max-height:var(--collapse-max-height);overflow-y:auto}.collapse.small .collapse-header{padding:var(--spacing-sm, 8px) var(--spacing-md, 12px);font-size:var(--font-size-sm, 12px)}.collapse.small .collapse-header i{font-size:1rem}.collapse.small .content-wrapper{padding:var(--spacing-md, 12px);padding-top:var(--spacing-sm, 8px)}.collapse.large .collapse-header{padding:var(--spacing-lg, 16px) var(--spacing-xl, 24px);font-size:var(--font-size-lg, 16px)}.collapse.large .collapse-header i{font-size:1.4rem}.collapse.large .content-wrapper{padding:var(--spacing-xl, 24px);padding-top:var(--spacing-lg, 16px)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1137
1137
|
}
|
|
1138
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1138
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: PshCollapseComponent, decorators: [{
|
|
1139
1139
|
type: Component,
|
|
1140
1140
|
args: [{ selector: 'psh-collapse', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"collapse\"\n [class.expanded]=\"expanded()\"\n [class.disabled]=\"disabled()\"\n [class.outline]=\"variant() === 'outline'\"\n [class.small]=\"size() === 'small'\"\n [class.large]=\"size() === 'large'\"\n [class.no-animation]=\"disableAnimation()\"\n [attr.data-state]=\"state()\"\n [style.--collapse-max-height]=\"maxHeight()\"\n>\n <button\n [id]=\"headerId()\"\n class=\"collapse-header\"\n (click)=\"toggle()\"\n (keydown)=\"onKeydown($event)\"\n [attr.aria-expanded]=\"expanded()\"\n [attr.aria-controls]=\"contentId()\"\n [disabled]=\"disabled()\"\n type=\"button\"\n >\n <span class=\"header-content\">\n <ng-content select=\"[collapse-header]\">\n <span>Section pliable</span>\n </ng-content>\n </span>\n <i\n class=\"ph ph-{{ icon() }}\"\n [class.expanded]=\"expanded()\"\n aria-hidden=\"true\"\n ></i>\n </button>\n\n <div\n [id]=\"contentId()\"\n class=\"collapse-content\"\n role=\"region\"\n [attr.aria-labelledby]=\"headerId()\"\n [attr.aria-hidden]=\"!expanded()\"\n >\n <div class=\"content-wrapper\">\n <ng-content></ng-content>\n </div>\n </div>\n</div>", styles: [".collapse{--collapse-transition-duration: .3s;--collapse-transition-timing: cubic-bezier(.4, 0, .2, 1);width:100%;border-radius:var(--border-radius, 8px);background:var(--surface-card, #fff);overflow:hidden}.collapse.no-animation{--collapse-transition-duration: 0s}.collapse.no-animation .collapse-content,.collapse.no-animation .content-wrapper,.collapse.no-animation .collapse-header i{transition:none}.collapse.outline{background:transparent;border:1px solid var(--surface-border, #e0e0e0)}.collapse-header{width:100%;display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-md, 12px) var(--spacing-lg, 16px);background:var(--surface-ground, #f5f5f5);border:none;cursor:pointer;color:var(--text-color, #333);font-family:inherit;font-size:var(--font-size-base, 14px);transition:background-color .2s ease;border-bottom:1px solid var(--surface-border, #e0e0e0);text-align:left}.collapse-header:hover:not(:disabled){background:var(--surface-hover, #ebebeb)}.collapse-header:focus-visible{outline:2px solid var(--primary-color, #0066cc);outline-offset:-2px;z-index:1}.collapse-header:disabled{cursor:not-allowed;opacity:var(--opacity-disabled, .6)}.header-content{font-weight:500;text-align:left}.collapse-header i{color:var(--primary-color, #0066cc);font-size:1.2rem;transition:transform var(--collapse-transition-duration) var(--collapse-transition-timing)}.collapse-header i.expanded{transform:rotate(180deg)}.collapse-content{max-height:0;overflow:hidden;transition:max-height var(--collapse-transition-duration) var(--collapse-transition-timing)}.collapse.expanded .collapse-content{max-height:var(--collapse-max-height);overflow:visible}.content-wrapper{padding:var(--spacing-lg, 16px);padding-top:var(--spacing-md, 12px);color:var(--text-color-secondary, #666);text-align:left;transform:translateY(-10px);opacity:0;transition:transform var(--collapse-transition-duration) var(--collapse-transition-timing),opacity var(--collapse-transition-duration) var(--collapse-transition-timing)}.collapse.expanded .content-wrapper{transform:translateY(0);opacity:1;max-height:var(--collapse-max-height);overflow-y:auto}.collapse.small .collapse-header{padding:var(--spacing-sm, 8px) var(--spacing-md, 12px);font-size:var(--font-size-sm, 12px)}.collapse.small .collapse-header i{font-size:1rem}.collapse.small .content-wrapper{padding:var(--spacing-md, 12px);padding-top:var(--spacing-sm, 8px)}.collapse.large .collapse-header{padding:var(--spacing-lg, 16px) var(--spacing-xl, 24px);font-size:var(--font-size-lg, 16px)}.collapse.large .collapse-header i{font-size:1.4rem}.collapse.large .content-wrapper{padding:var(--spacing-xl, 24px);padding-top:var(--spacing-lg, 16px)}\n"] }]
|
|
1141
1141
|
}], propDecorators: { expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }, { type: i0.Output, args: ["expandedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], disableAnimation: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableAnimation", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], toggled: [{ type: i0.Output, args: ["toggled"] }] } });
|
|
@@ -1152,28 +1152,28 @@ class PshDropdownComponent {
|
|
|
1152
1152
|
this.elementRef = inject(ElementRef);
|
|
1153
1153
|
this.clickOutsideHandler = null;
|
|
1154
1154
|
// Regular inputs
|
|
1155
|
-
this.variant = input('primary', ...(ngDevMode ? [{ debugName: "variant" }] : []));
|
|
1156
|
-
this.size = input('medium', ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
1157
|
-
this.placement = input('bottom-start', ...(ngDevMode ? [{ debugName: "placement" }] : []));
|
|
1158
|
-
this.items = input([], ...(ngDevMode ? [{ debugName: "items" }] : []));
|
|
1159
|
-
this.label = input('Dropdown Menu', ...(ngDevMode ? [{ debugName: "label" }] : []));
|
|
1160
|
-
this.icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
|
|
1161
|
-
this.ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : []));
|
|
1155
|
+
this.variant = input('primary', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
1156
|
+
this.size = input('medium', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
1157
|
+
this.placement = input('bottom-start', ...(ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []));
|
|
1158
|
+
this.items = input([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
|
|
1159
|
+
this.label = input('Dropdown Menu', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
1160
|
+
this.icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
|
|
1161
|
+
this.ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
1162
1162
|
// Model inputs
|
|
1163
|
-
this.disabled = model(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
1163
|
+
this.disabled = model(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
1164
1164
|
// State
|
|
1165
|
-
this.isOpenSignal = signal(false, ...(ngDevMode ? [{ debugName: "isOpenSignal" }] : []));
|
|
1166
|
-
this.selectedItemSignal = signal(null, ...(ngDevMode ? [{ debugName: "selectedItemSignal" }] : []));
|
|
1167
|
-
this.focusedItemIndex = signal(-1, ...(ngDevMode ? [{ debugName: "focusedItemIndex" }] : []));
|
|
1165
|
+
this.isOpenSignal = signal(false, ...(ngDevMode ? [{ debugName: "isOpenSignal" }] : /* istanbul ignore next */ []));
|
|
1166
|
+
this.selectedItemSignal = signal(null, ...(ngDevMode ? [{ debugName: "selectedItemSignal" }] : /* istanbul ignore next */ []));
|
|
1167
|
+
this.focusedItemIndex = signal(-1, ...(ngDevMode ? [{ debugName: "focusedItemIndex" }] : /* istanbul ignore next */ []));
|
|
1168
1168
|
// Outputs
|
|
1169
1169
|
this.selected = output();
|
|
1170
1170
|
this.opened = output();
|
|
1171
1171
|
this.closed = output();
|
|
1172
1172
|
// Computed values
|
|
1173
|
-
this.isOpen = computed(() => this.isOpenSignal(), ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
|
|
1174
|
-
this.selectedItem = computed(() => this.selectedItemSignal(), ...(ngDevMode ? [{ debugName: "selectedItem" }] : []));
|
|
1175
|
-
this.computedAriaLabel = computed(() => this.ariaLabel() || 'Toggle dropdown menu', ...(ngDevMode ? [{ debugName: "computedAriaLabel" }] : []));
|
|
1176
|
-
this.state = computed(() => this.getState(), ...(ngDevMode ? [{ debugName: "state" }] : []));
|
|
1173
|
+
this.isOpen = computed(() => this.isOpenSignal(), ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
|
|
1174
|
+
this.selectedItem = computed(() => this.selectedItemSignal(), ...(ngDevMode ? [{ debugName: "selectedItem" }] : /* istanbul ignore next */ []));
|
|
1175
|
+
this.computedAriaLabel = computed(() => this.ariaLabel() || 'Toggle dropdown menu', ...(ngDevMode ? [{ debugName: "computedAriaLabel" }] : /* istanbul ignore next */ []));
|
|
1176
|
+
this.state = computed(() => this.getState(), ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
|
|
1177
1177
|
this.setupClickOutsideListener();
|
|
1178
1178
|
}
|
|
1179
1179
|
setupClickOutsideListener() {
|
|
@@ -1355,10 +1355,10 @@ class PshDropdownComponent {
|
|
|
1355
1355
|
document.removeEventListener('click', this.clickOutsideHandler);
|
|
1356
1356
|
}
|
|
1357
1357
|
}
|
|
1358
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1359
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
1358
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: PshDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1359
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", type: PshDropdownComponent, isStandalone: true, selector: "psh-dropdown", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", selected: "selected", opened: "opened", closed: "closed" }, ngImport: i0, template: "<div\n class=\"dropdown-container\"\n [class]=\"size()\"\n [class.open]=\"isOpen()\"\n [class.disabled]=\"disabled()\"\n [attr.data-state]=\"state()\"\n>\n <button\n class=\"dropdown-trigger\"\n [class]=\"variant()\"\n (click)=\"toggleDropdown()\"\n (keydown)=\"handleTriggerKeyDown($event)\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-disabled]=\"disabled()\"\n [attr.aria-label]=\"computedAriaLabel()\"\n [attr.aria-haspopup]=\"'menu'\"\n type=\"button\"\n [disabled]=\"disabled()\"\n >\n <span class=\"trigger-content\">\n @if (icon()) {\n <i class=\"ph ph-{{ icon() }}\" aria-hidden=\"true\"></i>\n }\n <ng-content select=\"[dropdown-trigger]\">\n @if (label()) {\n {{ label() }}\n }\n </ng-content>\n <i \n class=\"ph ph-caret-down trigger-arrow\"\n [class.open]=\"isOpen()\"\n aria-hidden=\"true\"\n ></i>\n </span>\n </button>\n\n @if (isOpen()) {\n <div \n class=\"dropdown-menu\"\n [class]=\"placement()\"\n role=\"menu\"\n (click)=\"$event.stopPropagation()\"\n >\n <ng-content select=\"[dropdown-menu]\">\n @for (item of items(); track item.value; let i = $index) {\n <button\n type=\"button\"\n class=\"dropdown-item\"\n [class.disabled]=\"item.disabled\"\n [class.active]=\"selectedItem() === item\"\n [attr.data-dropdown-item-index]=\"i\"\n (click)=\"selectItem(item)\"\n (keydown)=\"handleItemKeyDown($event, item, i)\"\n role=\"menuitem\"\n [attr.aria-disabled]=\"item.disabled\"\n [disabled]=\"item.disabled\"\n [attr.tabindex]=\"item.disabled ? -1 : 0\"\n >\n @if (item.icon) {\n <i class=\"ph ph-{{ item.icon }}\" aria-hidden=\"true\"></i>\n }\n <span class=\"item-label\">{{ item.content }}</span>\n </button>\n }\n </ng-content>\n </div>\n }\n</div>", styles: [".dropdown-container{position:relative;display:inline-block}.dropdown-trigger{display:inline-flex;align-items:center;justify-content:center;height:var(--height-input-md);padding:0 var(--spacing-lg);border:none;border-radius:var(--border-radius);font-weight:var(--font-weight-medium);font-size:var(--font-size-base);font-family:var(--font-family);line-height:var(--line-height-normal);cursor:pointer;transition:all var(--animation-duration-fast) var(--animation-easing-smooth);min-width:7.5rem;background:transparent;position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.trigger-content{display:flex;align-items:center;gap:var(--spacing-sm);position:relative;z-index:1;line-height:1}.trigger-arrow{transition:transform var(--animation-duration-fast) var(--animation-easing-smooth);margin-left:var(--spacing-sm)}.trigger-arrow.open{transform:rotate(180deg)}.dropdown-trigger.primary{background:var(--primary-gradient);color:var(--primary-color-text)}.dropdown-trigger.primary:hover:not(.disabled){background:var(--primary-gradient-hover)}.dropdown-trigger.secondary{background:var(--secondary-color);color:var(--secondary-color-text)}.dropdown-trigger.secondary:hover:not(.disabled){background:var(--secondary-color-light)}.dropdown-trigger.outline{background:transparent;border:var(--border-width-2) solid var(--primary-color);color:var(--primary-color)}.dropdown-trigger.outline:hover:not(.disabled){background:var(--primary-color);border-color:var(--primary-color);color:var(--primary-color-text)}.dropdown-trigger.text{background:transparent;color:var(--primary-color)}.dropdown-trigger.text:hover:not(.disabled){background:var(--surface-hover)}.dropdown-container.small .dropdown-trigger{height:var(--height-input-sm);padding:0 var(--spacing-md);font-size:var(--font-size-sm);min-width:6rem}.dropdown-container.large .dropdown-trigger{height:var(--height-input-lg);padding:0 var(--spacing-lg);font-size:var(--font-size-lg);min-width:8.75rem}.dropdown-menu{position:absolute;min-width:12.5rem;background:var(--surface-card);border:var(--border-width-1) solid var(--surface-border);border-radius:var(--border-radius);box-shadow:var(--shadow-lg);z-index:var(--z-index-dropdown);margin-top:var(--spacing-xs);animation:fadeIn var(--animation-duration-fast) var(--animation-easing-smooth);overflow:hidden}.dropdown-menu ::ng-deep [dropdown-menu]{background:transparent;padding:0;margin:0}.dropdown-menu ::ng-deep .dropdown-item{display:flex;align-items:center;gap:var(--spacing-sm);width:100%;padding:var(--spacing-sm) var(--spacing-md);border:none;background:transparent;color:var(--text-color);font-family:var(--font-family);font-size:var(--font-size-base);text-align:left;cursor:pointer;transition:all var(--animation-duration-fast) var(--animation-easing-smooth)}.dropdown-menu ::ng-deep .dropdown-item:hover:not(.disabled){background:var(--surface-hover)}.dropdown-menu ::ng-deep .dropdown-item.active{color:var(--primary-color);background:rgba(var(--primary-color-rgb),.1)}.dropdown-menu ::ng-deep .dropdown-item.disabled{opacity:.6;cursor:not-allowed}.dropdown-menu ::ng-deep .dropdown-item i{font-size:var(--icon-size-md);color:inherit}.dropdown-menu.bottom-start{top:100%;left:0}.dropdown-menu.bottom-end{top:100%;right:0}.dropdown-menu.top-start{bottom:100%;left:0}.dropdown-menu.top-end{bottom:100%;right:0}.dropdown-item{display:flex;align-items:center;gap:var(--spacing-sm);width:100%;padding:var(--spacing-sm) var(--spacing-md);border:none;background:transparent;color:var(--text-color);font-family:var(--font-family);font-size:var(--font-size-base);text-align:left;cursor:pointer;transition:all var(--animation-duration-fast) var(--animation-easing-smooth)}.dropdown-item:hover:not(.disabled){background:var(--surface-hover)}.dropdown-item.active{color:var(--primary-color);background:rgba(var(--primary-color-rgb),.1)}.dropdown-item.disabled{opacity:.6;cursor:not-allowed}.item-check{margin-left:auto;color:var(--primary-color)}.dropdown-trigger:focus-visible{outline:none;box-shadow:0 0 0 var(--focus-ring-width) var(--focus-ring-color)}.dropdown-trigger:active:not(.disabled){transform:translateY(.0625rem)}.dropdown-container.disabled{opacity:.6;cursor:not-allowed}.dropdown-container.disabled .dropdown-trigger{pointer-events:none}@keyframes fadeIn{0%{opacity:0;transform:translateY(calc(-1 * var(--animation-distance-sm)))}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1360
1360
|
}
|
|
1361
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1361
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: PshDropdownComponent, decorators: [{
|
|
1362
1362
|
type: Component,
|
|
1363
1363
|
args: [{ selector: 'psh-dropdown', imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"dropdown-container\"\n [class]=\"size()\"\n [class.open]=\"isOpen()\"\n [class.disabled]=\"disabled()\"\n [attr.data-state]=\"state()\"\n>\n <button\n class=\"dropdown-trigger\"\n [class]=\"variant()\"\n (click)=\"toggleDropdown()\"\n (keydown)=\"handleTriggerKeyDown($event)\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-disabled]=\"disabled()\"\n [attr.aria-label]=\"computedAriaLabel()\"\n [attr.aria-haspopup]=\"'menu'\"\n type=\"button\"\n [disabled]=\"disabled()\"\n >\n <span class=\"trigger-content\">\n @if (icon()) {\n <i class=\"ph ph-{{ icon() }}\" aria-hidden=\"true\"></i>\n }\n <ng-content select=\"[dropdown-trigger]\">\n @if (label()) {\n {{ label() }}\n }\n </ng-content>\n <i \n class=\"ph ph-caret-down trigger-arrow\"\n [class.open]=\"isOpen()\"\n aria-hidden=\"true\"\n ></i>\n </span>\n </button>\n\n @if (isOpen()) {\n <div \n class=\"dropdown-menu\"\n [class]=\"placement()\"\n role=\"menu\"\n (click)=\"$event.stopPropagation()\"\n >\n <ng-content select=\"[dropdown-menu]\">\n @for (item of items(); track item.value; let i = $index) {\n <button\n type=\"button\"\n class=\"dropdown-item\"\n [class.disabled]=\"item.disabled\"\n [class.active]=\"selectedItem() === item\"\n [attr.data-dropdown-item-index]=\"i\"\n (click)=\"selectItem(item)\"\n (keydown)=\"handleItemKeyDown($event, item, i)\"\n role=\"menuitem\"\n [attr.aria-disabled]=\"item.disabled\"\n [disabled]=\"item.disabled\"\n [attr.tabindex]=\"item.disabled ? -1 : 0\"\n >\n @if (item.icon) {\n <i class=\"ph ph-{{ item.icon }}\" aria-hidden=\"true\"></i>\n }\n <span class=\"item-label\">{{ item.content }}</span>\n </button>\n }\n </ng-content>\n </div>\n }\n</div>", styles: [".dropdown-container{position:relative;display:inline-block}.dropdown-trigger{display:inline-flex;align-items:center;justify-content:center;height:var(--height-input-md);padding:0 var(--spacing-lg);border:none;border-radius:var(--border-radius);font-weight:var(--font-weight-medium);font-size:var(--font-size-base);font-family:var(--font-family);line-height:var(--line-height-normal);cursor:pointer;transition:all var(--animation-duration-fast) var(--animation-easing-smooth);min-width:7.5rem;background:transparent;position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.trigger-content{display:flex;align-items:center;gap:var(--spacing-sm);position:relative;z-index:1;line-height:1}.trigger-arrow{transition:transform var(--animation-duration-fast) var(--animation-easing-smooth);margin-left:var(--spacing-sm)}.trigger-arrow.open{transform:rotate(180deg)}.dropdown-trigger.primary{background:var(--primary-gradient);color:var(--primary-color-text)}.dropdown-trigger.primary:hover:not(.disabled){background:var(--primary-gradient-hover)}.dropdown-trigger.secondary{background:var(--secondary-color);color:var(--secondary-color-text)}.dropdown-trigger.secondary:hover:not(.disabled){background:var(--secondary-color-light)}.dropdown-trigger.outline{background:transparent;border:var(--border-width-2) solid var(--primary-color);color:var(--primary-color)}.dropdown-trigger.outline:hover:not(.disabled){background:var(--primary-color);border-color:var(--primary-color);color:var(--primary-color-text)}.dropdown-trigger.text{background:transparent;color:var(--primary-color)}.dropdown-trigger.text:hover:not(.disabled){background:var(--surface-hover)}.dropdown-container.small .dropdown-trigger{height:var(--height-input-sm);padding:0 var(--spacing-md);font-size:var(--font-size-sm);min-width:6rem}.dropdown-container.large .dropdown-trigger{height:var(--height-input-lg);padding:0 var(--spacing-lg);font-size:var(--font-size-lg);min-width:8.75rem}.dropdown-menu{position:absolute;min-width:12.5rem;background:var(--surface-card);border:var(--border-width-1) solid var(--surface-border);border-radius:var(--border-radius);box-shadow:var(--shadow-lg);z-index:var(--z-index-dropdown);margin-top:var(--spacing-xs);animation:fadeIn var(--animation-duration-fast) var(--animation-easing-smooth);overflow:hidden}.dropdown-menu ::ng-deep [dropdown-menu]{background:transparent;padding:0;margin:0}.dropdown-menu ::ng-deep .dropdown-item{display:flex;align-items:center;gap:var(--spacing-sm);width:100%;padding:var(--spacing-sm) var(--spacing-md);border:none;background:transparent;color:var(--text-color);font-family:var(--font-family);font-size:var(--font-size-base);text-align:left;cursor:pointer;transition:all var(--animation-duration-fast) var(--animation-easing-smooth)}.dropdown-menu ::ng-deep .dropdown-item:hover:not(.disabled){background:var(--surface-hover)}.dropdown-menu ::ng-deep .dropdown-item.active{color:var(--primary-color);background:rgba(var(--primary-color-rgb),.1)}.dropdown-menu ::ng-deep .dropdown-item.disabled{opacity:.6;cursor:not-allowed}.dropdown-menu ::ng-deep .dropdown-item i{font-size:var(--icon-size-md);color:inherit}.dropdown-menu.bottom-start{top:100%;left:0}.dropdown-menu.bottom-end{top:100%;right:0}.dropdown-menu.top-start{bottom:100%;left:0}.dropdown-menu.top-end{bottom:100%;right:0}.dropdown-item{display:flex;align-items:center;gap:var(--spacing-sm);width:100%;padding:var(--spacing-sm) var(--spacing-md);border:none;background:transparent;color:var(--text-color);font-family:var(--font-family);font-size:var(--font-size-base);text-align:left;cursor:pointer;transition:all var(--animation-duration-fast) var(--animation-easing-smooth)}.dropdown-item:hover:not(.disabled){background:var(--surface-hover)}.dropdown-item.active{color:var(--primary-color);background:rgba(var(--primary-color-rgb),.1)}.dropdown-item.disabled{opacity:.6;cursor:not-allowed}.item-check{margin-left:auto;color:var(--primary-color)}.dropdown-trigger:focus-visible{outline:none;box-shadow:0 0 0 var(--focus-ring-width) var(--focus-ring-color)}.dropdown-trigger:active:not(.disabled){transform:translateY(.0625rem)}.dropdown-container.disabled{opacity:.6;cursor:not-allowed}.dropdown-container.disabled .dropdown-trigger{pointer-events:none}@keyframes fadeIn{0%{opacity:0;transform:translateY(calc(-1 * var(--animation-distance-sm)))}to{opacity:1;transform:translateY(0)}}\n"] }]
|
|
1364
1364
|
}], ctorParameters: () => [], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], selected: [{ type: i0.Output, args: ["selected"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
|
|
@@ -1390,53 +1390,53 @@ class PshInputComponent {
|
|
|
1390
1390
|
this.cdr = inject(ChangeDetectorRef);
|
|
1391
1391
|
this.destroyRef = inject(DestroyRef);
|
|
1392
1392
|
this.inputId = `psh-input-${PshInputComponent.nextId++}`;
|
|
1393
|
-
this.value = model('', ...(ngDevMode ? [{ debugName: "value" }] : []));
|
|
1394
|
-
this.disabled = model(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
1395
|
-
this.readonly = model(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
|
|
1396
|
-
this.loading = model(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
|
|
1397
|
-
this.touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : []));
|
|
1398
|
-
this.variant = input('outlined', ...(ngDevMode ? [{ debugName: "variant" }] : []));
|
|
1399
|
-
this.size = input('medium', ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
1400
|
-
this.fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : []));
|
|
1401
|
-
this.required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : []));
|
|
1402
|
-
this.showLabel = input(true, ...(ngDevMode ? [{ debugName: "showLabel" }] : []));
|
|
1403
|
-
this.type = input('text', ...(ngDevMode ? [{ debugName: "type" }] : []));
|
|
1404
|
-
this.placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
|
|
1405
|
-
this.label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
|
|
1406
|
-
this.ariaLabel = input(null, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
|
|
1407
|
-
this.iconStart = input(...(ngDevMode ? [undefined, { debugName: "iconStart" }] : []));
|
|
1408
|
-
this.iconEnd = input(...(ngDevMode ? [undefined, { debugName: "iconEnd" }] : []));
|
|
1409
|
-
this.error = input(null, ...(ngDevMode ? [{ debugName: "error" }] : []));
|
|
1410
|
-
this.success = input(null, ...(ngDevMode ? [{ debugName: "success" }] : []));
|
|
1411
|
-
this.hint = input(null, ...(ngDevMode ? [{ debugName: "hint" }] : []));
|
|
1412
|
-
this.suggestions = input([], ...(ngDevMode ? [{ debugName: "suggestions" }] : []));
|
|
1393
|
+
this.value = model('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
1394
|
+
this.disabled = model(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
1395
|
+
this.readonly = model(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
|
|
1396
|
+
this.loading = model(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
|
|
1397
|
+
this.touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
|
|
1398
|
+
this.variant = input('outlined', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
1399
|
+
this.size = input('medium', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
1400
|
+
this.fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : /* istanbul ignore next */ []));
|
|
1401
|
+
this.required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
|
|
1402
|
+
this.showLabel = input(true, ...(ngDevMode ? [{ debugName: "showLabel" }] : /* istanbul ignore next */ []));
|
|
1403
|
+
this.type = input('text', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
|
|
1404
|
+
this.placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
1405
|
+
this.label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
1406
|
+
this.ariaLabel = input(null, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
1407
|
+
this.iconStart = input(...(ngDevMode ? [undefined, { debugName: "iconStart" }] : /* istanbul ignore next */ []));
|
|
1408
|
+
this.iconEnd = input(...(ngDevMode ? [undefined, { debugName: "iconEnd" }] : /* istanbul ignore next */ []));
|
|
1409
|
+
this.error = input(null, ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
|
|
1410
|
+
this.success = input(null, ...(ngDevMode ? [{ debugName: "success" }] : /* istanbul ignore next */ []));
|
|
1411
|
+
this.hint = input(null, ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
|
|
1412
|
+
this.suggestions = input([], ...(ngDevMode ? [{ debugName: "suggestions" }] : /* istanbul ignore next */ []));
|
|
1413
1413
|
this.autocompleteConfig = input({
|
|
1414
1414
|
minLength: 1,
|
|
1415
1415
|
debounceTime: 300
|
|
1416
|
-
}, ...(ngDevMode ? [{ debugName: "autocompleteConfig" }] : []));
|
|
1417
|
-
this.suggestionsVisible = signal(false, ...(ngDevMode ? [{ debugName: "suggestionsVisible" }] : []));
|
|
1418
|
-
this.focusedSignal = signal(false, ...(ngDevMode ? [{ debugName: "focusedSignal" }] : []));
|
|
1419
|
-
this.filteredSuggestionsSignal = signal([], ...(ngDevMode ? [{ debugName: "filteredSuggestionsSignal" }] : []));
|
|
1420
|
-
this.focusedSuggestionIndex = signal(-1, ...(ngDevMode ? [{ debugName: "focusedSuggestionIndex" }] : []));
|
|
1421
|
-
this.passwordVisibleSignal = signal(false, ...(ngDevMode ? [{ debugName: "passwordVisibleSignal" }] : []));
|
|
1416
|
+
}, ...(ngDevMode ? [{ debugName: "autocompleteConfig" }] : /* istanbul ignore next */ []));
|
|
1417
|
+
this.suggestionsVisible = signal(false, ...(ngDevMode ? [{ debugName: "suggestionsVisible" }] : /* istanbul ignore next */ []));
|
|
1418
|
+
this.focusedSignal = signal(false, ...(ngDevMode ? [{ debugName: "focusedSignal" }] : /* istanbul ignore next */ []));
|
|
1419
|
+
this.filteredSuggestionsSignal = signal([], ...(ngDevMode ? [{ debugName: "filteredSuggestionsSignal" }] : /* istanbul ignore next */ []));
|
|
1420
|
+
this.focusedSuggestionIndex = signal(-1, ...(ngDevMode ? [{ debugName: "focusedSuggestionIndex" }] : /* istanbul ignore next */ []));
|
|
1421
|
+
this.passwordVisibleSignal = signal(false, ...(ngDevMode ? [{ debugName: "passwordVisibleSignal" }] : /* istanbul ignore next */ []));
|
|
1422
1422
|
this.blurTimeoutId = null;
|
|
1423
1423
|
this.debounceTimeoutId = null;
|
|
1424
1424
|
this.inputFocus = output();
|
|
1425
1425
|
this.inputBlur = output();
|
|
1426
1426
|
this.suggestionSelect = output();
|
|
1427
|
-
this.showSuggestions = computed(() => this.suggestionsVisible() && this.filteredSuggestions().length > 0, ...(ngDevMode ? [{ debugName: "showSuggestions" }] : []));
|
|
1428
|
-
this.filteredSuggestions = computed(() => this.filteredSuggestionsSignal(), ...(ngDevMode ? [{ debugName: "filteredSuggestions" }] : []));
|
|
1429
|
-
this.focused = computed(() => this.focusedSignal(), ...(ngDevMode ? [{ debugName: "focused" }] : []));
|
|
1430
|
-
this.passwordVisible = computed(() => this.passwordVisibleSignal(), ...(ngDevMode ? [{ debugName: "passwordVisible" }] : []));
|
|
1427
|
+
this.showSuggestions = computed(() => this.suggestionsVisible() && this.filteredSuggestions().length > 0, ...(ngDevMode ? [{ debugName: "showSuggestions" }] : /* istanbul ignore next */ []));
|
|
1428
|
+
this.filteredSuggestions = computed(() => this.filteredSuggestionsSignal(), ...(ngDevMode ? [{ debugName: "filteredSuggestions" }] : /* istanbul ignore next */ []));
|
|
1429
|
+
this.focused = computed(() => this.focusedSignal(), ...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
|
|
1430
|
+
this.passwordVisible = computed(() => this.passwordVisibleSignal(), ...(ngDevMode ? [{ debugName: "passwordVisible" }] : /* istanbul ignore next */ []));
|
|
1431
1431
|
this.effectiveType = computed(() => {
|
|
1432
1432
|
if (this.type() === 'password') {
|
|
1433
1433
|
return this.passwordVisible() ? 'text' : 'password';
|
|
1434
1434
|
}
|
|
1435
1435
|
return this.type();
|
|
1436
|
-
}, ...(ngDevMode ? [{ debugName: "effectiveType" }] : []));
|
|
1437
|
-
this.computedAriaLabel = computed(() => this.ariaLabel() || this.label() || this.placeholder(), ...(ngDevMode ? [{ debugName: "computedAriaLabel" }] : []));
|
|
1438
|
-
this.passwordToggleLabel = computed(() => this.passwordVisible() ? INPUT_LABELS.hidePassword : INPUT_LABELS.showPassword, ...(ngDevMode ? [{ debugName: "passwordToggleLabel" }] : []));
|
|
1439
|
-
this.state = computed(() => this.getState(), ...(ngDevMode ? [{ debugName: "state" }] : []));
|
|
1436
|
+
}, ...(ngDevMode ? [{ debugName: "effectiveType" }] : /* istanbul ignore next */ []));
|
|
1437
|
+
this.computedAriaLabel = computed(() => this.ariaLabel() || this.label() || this.placeholder(), ...(ngDevMode ? [{ debugName: "computedAriaLabel" }] : /* istanbul ignore next */ []));
|
|
1438
|
+
this.passwordToggleLabel = computed(() => this.passwordVisible() ? INPUT_LABELS.hidePassword : INPUT_LABELS.showPassword, ...(ngDevMode ? [{ debugName: "passwordToggleLabel" }] : /* istanbul ignore next */ []));
|
|
1439
|
+
this.state = computed(() => this.getState(), ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
|
|
1440
1440
|
this.onChange = (_) => { };
|
|
1441
1441
|
this.onTouched = () => { };
|
|
1442
1442
|
this.destroyRef.onDestroy(() => {
|
|
@@ -1560,8 +1560,8 @@ class PshInputComponent {
|
|
|
1560
1560
|
this.filteredSuggestionsSignal.set([]);
|
|
1561
1561
|
}
|
|
1562
1562
|
}
|
|
1563
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1564
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
1563
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: PshInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1564
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", type: PshInputComponent, isStandalone: true, selector: "psh-input", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, iconStart: { classPropertyName: "iconStart", publicName: "iconStart", isSignal: true, isRequired: false, transformFunction: null }, iconEnd: { classPropertyName: "iconEnd", publicName: "iconEnd", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, success: { classPropertyName: "success", publicName: "success", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, suggestions: { classPropertyName: "suggestions", publicName: "suggestions", isSignal: true, isRequired: false, transformFunction: null }, autocompleteConfig: { classPropertyName: "autocompleteConfig", publicName: "autocompleteConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", disabled: "disabledChange", readonly: "readonlyChange", loading: "loadingChange", touched: "touchedChange", inputFocus: "inputFocus", inputBlur: "inputBlur", suggestionSelect: "suggestionSelect" }, host: { properties: { "class.full-width": "fullWidth()", "class.small": "size() === \"small\"", "class.large": "size() === \"large\"", "class.error": "!!error()", "class.success": "!!success()", "class.disabled": "disabled()", "class.readonly": "readonly()", "class.loading": "loading()", "class.focused": "focused()", "class.has-start-icon": "!!iconStart()", "class.has-end-icon": "!!iconEnd() || type() === \"password\"", "class.outlined": "variant() === \"outlined\"", "class.filled": "variant() === \"filled\"" } }, providers: [
|
|
1565
1565
|
{
|
|
1566
1566
|
provide: NG_VALUE_ACCESSOR,
|
|
1567
1567
|
useExisting: PshInputComponent,
|
|
@@ -1569,7 +1569,7 @@ class PshInputComponent {
|
|
|
1569
1569
|
}
|
|
1570
1570
|
], ngImport: i0, template: "<div class=\"input-container\">\n @if (showLabel()) {\n <label \n class=\"input-label\" \n [for]=\"inputId\" \n (click)=\"focusSelect()\" \n [class.required]=\"required()\"\n >\n <ng-content select=\"[input-label]\"></ng-content>\n @if (!hasLabelContent()) {\n {{ label() }}\n }\n </label>\n }\n\n <div class=\"input-wrapper\">\n @if (iconStart()) {\n <i class=\"ph ph-{{ iconStart() }}\" aria-hidden=\"true\"></i>\n }\n\n <input\n [id]=\"inputId\"\n [type]=\"effectiveType()\"\n [attr.placeholder]=\"placeholder()\"\n [attr.aria-label]=\"computedAriaLabel()\"\n [attr.aria-invalid]=\"!!error()\"\n [attr.aria-required]=\"required()\"\n [attr.aria-describedby]=\"error() ? 'error-message' : success() ? 'success-message' : hint() ? 'hint-message' : null\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly()\"\n [required]=\"required()\"\n [value]=\"value()\"\n (input)=\"handleInput($event)\"\n (keydown)=\"handleKeydown($event)\"\n (focus)=\"handleFocus()\"\n (blur)=\"handleBlur()\"\n [attr.data-state]=\"state()\"\n />\n\n @if (iconEnd()) {\n <i class=\"ph ph-{{ iconEnd() }}\" aria-hidden=\"true\"></i>\n }\n\n @if (type() === 'password') {\n <button\n type=\"button\"\n class=\"password-toggle\"\n (click)=\"togglePasswordVisibility()\"\n [attr.aria-label]=\"passwordToggleLabel()\"\n [disabled]=\"disabled() || readonly()\"\n >\n <i \n [class]=\"'ph ph-' + (passwordVisible() ? 'eye-slash' : 'eye')\"\n aria-hidden=\"true\"\n ></i>\n </button>\n }\n\n @if (loading()) {\n <div class=\"input-loader\" aria-hidden=\"true\">\n <div class=\"loader\"></div>\n </div>\n }\n\n @if (showSuggestions()) {\n <div class=\"suggestions-list\" role=\"listbox\">\n @for (suggestion of filteredSuggestions(); track suggestion; let i = $index) {\n <div \n class=\"suggestion-item\"\n [class.focused]=\"i === focusedSuggestionIndex()\"\n role=\"option\"\n [attr.aria-selected]=\"i === focusedSuggestionIndex()\"\n (click)=\"handleSuggestionClick(suggestion)\"\n (mouseenter)=\"focusedSuggestionIndex.set(i)\"\n >\n {{ suggestion }}\n </div>\n }\n </div>\n }\n </div>\n\n @if (error()) {\n <div id=\"error-message\" class=\"input-error\" role=\"alert\">\n <ng-content select=\"[input-error]\">\n {{ error() }}\n </ng-content>\n </div>\n }\n\n @if (success()) {\n <div id=\"success-message\" class=\"input-success\" role=\"status\">\n <ng-content select=\"[input-success]\">\n {{ success() }}\n </ng-content>\n </div>\n }\n\n @if (hint()) {\n <div id=\"hint-message\" class=\"input-hint\">\n <ng-content select=\"[input-hint]\">\n {{ hint() }}\n </ng-content>\n </div>\n }\n</div>", styles: [":host{display:block;width:100%;max-width:18.75rem;transition:all var(--animation-duration-default) var(--animation-easing-default)}:host.full-width{max-width:none}.input-container{position:relative;width:100%}.input-label{display:block;color:var(--text-color);font-size:.875rem;font-weight:500;margin-bottom:.25rem;width:100%;cursor:pointer}.input-label.required:after{content:\"*\";color:var(--danger-color);margin-left:.125rem}.input-wrapper{position:relative;display:flex;align-items:center;width:100%}input{width:100%;height:2.5rem;padding:0 1rem;font-family:inherit;font-size:1rem;color:var(--text-color);background:var(--surface-0);border:.0625rem solid var(--surface-border);border-radius:var(--border-radius);transition:all var(--animation-duration-default) var(--animation-easing-default)}input:hover:not(:disabled):not(:focus){border-color:var(--primary-color)}input::placeholder{color:var(--text-color-tertiary);opacity:1}input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 .125rem var(--focus-ring-color)}:host.outlined input{background:transparent;border:.125rem solid var(--surface-border)}:host.filled input{background:var(--surface-ground);border:.0625rem solid transparent}:host.filled input:hover:not(:disabled):not(:focus){background:var(--surface-hover)}:host.filled input:focus{background:var(--surface-0)}:host.error input{border-color:var(--danger-color)}:host.error input:focus{box-shadow:0 0 0 .125rem var(--focus-ring-error)}:host.success input{border-color:var(--success-color)}:host.success input:focus{box-shadow:0 0 0 .125rem var(--focus-ring-success)}:host.disabled input{background:var(--surface-ground);cursor:not-allowed;opacity:var(--opacity-disabled)}:host.readonly input{background:var(--surface-ground);cursor:default}:host.small input{height:2rem;font-size:.875rem}:host.large input{height:3rem;font-size:1.125rem}:host.has-start-icon input{padding-left:2.75rem}:host.has-end-icon input{padding-right:2.75rem}.input-wrapper i{position:absolute;top:50%;transform:translateY(-50%);font-size:1.25rem;color:var(--text-color-secondary);pointer-events:none;z-index:2}.input-wrapper i:first-of-type{padding-left:1rem}.input-wrapper i:last-of-type{padding-right:1rem}.password-toggle{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);width:2rem;height:2rem;background:transparent;border:none;color:var(--text-color-secondary);cursor:pointer;padding:0;border-radius:var(--border-radius);display:flex;align-items:center;justify-content:center;transition:all .2s ease;z-index:3}.password-toggle:hover:not(:disabled){background:var(--surface-hover);color:var(--text-color)}.password-toggle i{position:static;transform:none;pointer-events:auto}.input-loader{position:absolute;right:1rem;top:50%;transform:translateY(-50%);z-index:3}.loader{width:1rem;height:1rem;border:.125rem solid var(--surface-border);border-top-color:var(--primary-color);border-radius:50%;animation:spin .8s linear infinite}.suggestions-list{position:absolute;top:100%;left:0;right:0;background:var(--surface-0);border:.0625rem solid var(--surface-border);border-radius:var(--border-radius);box-shadow:var(--shadow-lg);z-index:var(--z-index-dropdown);max-height:12.5rem;overflow-y:auto;margin-top:.25rem}.suggestion-item{padding:.5rem 1rem;cursor:pointer;color:var(--text-color)}.suggestion-item:hover,.suggestion-item.focused{background:var(--surface-hover);color:var(--primary-color)}.input-error,.input-success,.input-hint{font-size:.875rem;margin-top:.25rem}.input-error{color:var(--danger-color)}.input-success{color:var(--success-color)}.input-hint{color:var(--text-color-secondary)}@keyframes spin{to{transform:translateY(-50%) rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1571
1571
|
}
|
|
1572
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1572
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: PshInputComponent, decorators: [{
|
|
1573
1573
|
type: Component,
|
|
1574
1574
|
args: [{ selector: 'psh-input', imports: [CommonModule], providers: [
|
|
1575
1575
|
{
|
|
@@ -1608,24 +1608,24 @@ class PshTooltipComponent {
|
|
|
1608
1608
|
constructor() {
|
|
1609
1609
|
this.config = inject(TOOLTIP_CONFIG);
|
|
1610
1610
|
this.elementRef = inject(ElementRef);
|
|
1611
|
-
this.variant = input(this.config.variant ?? 'dark', ...(ngDevMode ? [{ debugName: "variant" }] : []));
|
|
1612
|
-
this.position = input(this.config.position ?? 'top', ...(ngDevMode ? [{ debugName: "position" }] : []));
|
|
1613
|
-
this.showDelay = input(this.config.showDelay ?? 200, ...(ngDevMode ? [{ debugName: "showDelay" }] : []));
|
|
1614
|
-
this.hideDelay = input(this.config.hideDelay ?? 100, ...(ngDevMode ? [{ debugName: "hideDelay" }] : []));
|
|
1615
|
-
this.maxWidth = input(this.config.maxWidth ?? 200, ...(ngDevMode ? [{ debugName: "maxWidth" }] : []));
|
|
1616
|
-
this.autoFlip = input(this.config.autoFlip ?? true, ...(ngDevMode ? [{ debugName: "autoFlip" }] : []));
|
|
1617
|
-
this.content = input.required(...(ngDevMode ? [{ debugName: "content" }] : []));
|
|
1618
|
-
this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
1619
|
-
this.id = input(this.generateUniqueId(), ...(ngDevMode ? [{ debugName: "id" }] : []));
|
|
1611
|
+
this.variant = input(this.config.variant ?? 'dark', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
1612
|
+
this.position = input(this.config.position ?? 'top', ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
|
|
1613
|
+
this.showDelay = input(this.config.showDelay ?? 200, ...(ngDevMode ? [{ debugName: "showDelay" }] : /* istanbul ignore next */ []));
|
|
1614
|
+
this.hideDelay = input(this.config.hideDelay ?? 100, ...(ngDevMode ? [{ debugName: "hideDelay" }] : /* istanbul ignore next */ []));
|
|
1615
|
+
this.maxWidth = input(this.config.maxWidth ?? 200, ...(ngDevMode ? [{ debugName: "maxWidth" }] : /* istanbul ignore next */ []));
|
|
1616
|
+
this.autoFlip = input(this.config.autoFlip ?? true, ...(ngDevMode ? [{ debugName: "autoFlip" }] : /* istanbul ignore next */ []));
|
|
1617
|
+
this.content = input.required(...(ngDevMode ? [{ debugName: "content" }] : /* istanbul ignore next */ []));
|
|
1618
|
+
this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
1619
|
+
this.id = input(this.generateUniqueId(), ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
|
|
1620
1620
|
this.shown = output();
|
|
1621
1621
|
this.hidden = output();
|
|
1622
|
-
this.isVisible = signal(false, ...(ngDevMode ? [{ debugName: "isVisible" }] : []));
|
|
1623
|
-
this.computedPosition = signal('top', ...(ngDevMode ? [{ debugName: "computedPosition" }] : []));
|
|
1622
|
+
this.isVisible = signal(false, ...(ngDevMode ? [{ debugName: "isVisible" }] : /* istanbul ignore next */ []));
|
|
1623
|
+
this.computedPosition = signal('top', ...(ngDevMode ? [{ debugName: "computedPosition" }] : /* istanbul ignore next */ []));
|
|
1624
1624
|
this.showTimeout = null;
|
|
1625
1625
|
this.hideTimeout = null;
|
|
1626
1626
|
this.resizeObserver = null;
|
|
1627
|
-
this.tooltipId = computed(() => `${this.id()}-tooltip`, ...(ngDevMode ? [{ debugName: "tooltipId" }] : []));
|
|
1628
|
-
this.triggerId = computed(() => `${this.id()}-trigger`, ...(ngDevMode ? [{ debugName: "triggerId" }] : []));
|
|
1627
|
+
this.tooltipId = computed(() => `${this.id()}-tooltip`, ...(ngDevMode ? [{ debugName: "tooltipId" }] : /* istanbul ignore next */ []));
|
|
1628
|
+
this.triggerId = computed(() => `${this.id()}-trigger`, ...(ngDevMode ? [{ debugName: "triggerId" }] : /* istanbul ignore next */ []));
|
|
1629
1629
|
effect(() => {
|
|
1630
1630
|
if (this.isVisible()) {
|
|
1631
1631
|
this.shown.emit();
|
|
@@ -1745,10 +1745,10 @@ class PshTooltipComponent {
|
|
|
1745
1745
|
generateUniqueId() {
|
|
1746
1746
|
return `psh-tooltip-${Math.random().toString(36).substr(2, 9)}`;
|
|
1747
1747
|
}
|
|
1748
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1749
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
1748
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: PshTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1749
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", type: PshTooltipComponent, isStandalone: true, selector: "psh-tooltip", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, showDelay: { classPropertyName: "showDelay", publicName: "showDelay", isSignal: true, isRequired: false, transformFunction: null }, hideDelay: { classPropertyName: "hideDelay", publicName: "hideDelay", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, autoFlip: { classPropertyName: "autoFlip", publicName: "autoFlip", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { shown: "shown", hidden: "hidden" }, host: { listeners: { "mouseenter": "show()", "mouseleave": "hide()", "focusin": "show()", "focusout": "hide()", "keydown.escape": "hideImmediate()" }, properties: { "style.display": "\"inline-block\"", "style.position": "\"relative\"" } }, ngImport: i0, template: "<div\n class=\"tooltip-wrapper\"\n [attr.id]=\"triggerId()\"\n [attr.aria-describedby]=\"isVisible() ? tooltipId() : null\"\n>\n <ng-content></ng-content>\n\n @if (isVisible()) {\n <div\n [attr.id]=\"tooltipId()\"\n class=\"tooltip\"\n [class.top]=\"computedPosition() === 'top'\"\n [class.bottom]=\"computedPosition() === 'bottom'\"\n [class.left]=\"computedPosition() === 'left'\"\n [class.right]=\"computedPosition() === 'right'\"\n [class.light]=\"variant() === 'light'\"\n [class.dark]=\"variant() === 'dark'\"\n [style.max-width.px]=\"maxWidth()\"\n role=\"tooltip\"\n >\n {{ content() }}\n <div class=\"tooltip-arrow\"></div>\n </div>\n }\n</div>\n", styles: ["@keyframes tooltipFadeIn{0%{opacity:0;transform:translate(-50%) translateY(calc(-1 * var(--spacing-md)))}to{opacity:1;transform:translate(-50%) translateY(calc(-1 * var(--spacing-sm)))}}@keyframes tooltipFadeInBottom{0%{opacity:0;transform:translate(-50%) translateY(var(--spacing-md))}to{opacity:1;transform:translate(-50%) translateY(var(--spacing-sm))}}@keyframes tooltipFadeInLeft{0%{opacity:0;transform:translateY(-50%) translate(calc(-1 * var(--spacing-md)))}to{opacity:1;transform:translateY(-50%) translate(calc(-1 * var(--spacing-sm)))}}@keyframes tooltipFadeInRight{0%{opacity:0;transform:translateY(-50%) translate(var(--spacing-md))}to{opacity:1;transform:translateY(-50%) translate(var(--spacing-sm))}}.tooltip{position:absolute;padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--border-radius);font-size:var(--font-size-sm);line-height:var(--line-height-tight);white-space:normal;word-wrap:break-word;z-index:var(--z-index-tooltip)}.tooltip.dark{background:var(--surface-800);color:var(--surface-0);border:1px solid var(--surface-700)}.tooltip.light{background:var(--surface-card);color:var(--text-color);border:1px solid var(--surface-border);box-shadow:var(--shadow-sm)}.tooltip.top{bottom:100%;left:50%;transform:translate(-50%) translateY(calc(-1 * var(--spacing-sm)));animation:tooltipFadeIn var(--animation-duration-normal) var(--animation-easing-default)}.tooltip.bottom{top:100%;left:50%;transform:translate(-50%) translateY(var(--spacing-sm));animation:tooltipFadeInBottom var(--animation-duration-normal) var(--animation-easing-default)}.tooltip.left{right:100%;top:50%;transform:translateY(-50%) translate(calc(-1 * var(--spacing-sm)));animation:tooltipFadeInLeft var(--animation-duration-normal) var(--animation-easing-default)}.tooltip.right{left:100%;top:50%;transform:translateY(-50%) translate(var(--spacing-sm));animation:tooltipFadeInRight var(--animation-duration-normal) var(--animation-easing-default)}.tooltip-arrow{position:absolute;width:var(--spacing-sm);height:var(--spacing-sm);transform:rotate(45deg)}.tooltip.dark .tooltip-arrow{background:var(--surface-800);border:inherit}.tooltip.light .tooltip-arrow{background:var(--surface-card);border:inherit}.tooltip.top .tooltip-arrow{bottom:calc(-1 * var(--spacing-xs));left:50%;margin-left:calc(-1 * var(--spacing-xs));border-top:none;border-left:none}.tooltip.bottom .tooltip-arrow{top:calc(-1 * var(--spacing-xs));left:50%;margin-left:calc(-1 * var(--spacing-xs));border-bottom:none;border-right:none}.tooltip.left .tooltip-arrow{right:calc(-1 * var(--spacing-xs));top:50%;margin-top:calc(-1 * var(--spacing-xs));border-left:none;border-bottom:none}.tooltip.right .tooltip-arrow{left:calc(-1 * var(--spacing-xs));top:50%;margin-top:calc(-1 * var(--spacing-xs));border-right:none;border-top:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1750
1750
|
}
|
|
1751
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1751
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: PshTooltipComponent, decorators: [{
|
|
1752
1752
|
type: Component,
|
|
1753
1753
|
args: [{ selector: 'psh-tooltip', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
1754
1754
|
'(mouseenter)': 'show()',
|
|
@@ -1763,23 +1763,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
|
|
|
1763
1763
|
|
|
1764
1764
|
class PshMenuComponent {
|
|
1765
1765
|
constructor() {
|
|
1766
|
-
this.mode = input('vertical', ...(ngDevMode ? [{ debugName: "mode" }] : []));
|
|
1767
|
-
this.variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : []));
|
|
1768
|
-
this.collapsible = input(false, ...(ngDevMode ? [{ debugName: "collapsible" }] : []));
|
|
1766
|
+
this.mode = input('vertical', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
|
|
1767
|
+
this.variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
1768
|
+
this.collapsible = input(false, ...(ngDevMode ? [{ debugName: "collapsible" }] : /* istanbul ignore next */ []));
|
|
1769
1769
|
this.ariaLabels = input({
|
|
1770
1770
|
disabled: 'Disabled',
|
|
1771
1771
|
submenu: 'Submenu',
|
|
1772
1772
|
expand: 'Expand menu',
|
|
1773
1773
|
collapse: 'Collapse menu'
|
|
1774
|
-
}, ...(ngDevMode ? [{ debugName: "ariaLabels" }] : []));
|
|
1775
|
-
this.items = input([], ...(ngDevMode ? [{ debugName: "items" }] : []));
|
|
1776
|
-
this.collapsed = model(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : []));
|
|
1777
|
-
this.expandedItemIds = model([], ...(ngDevMode ? [{ debugName: "expandedItemIds" }] : []));
|
|
1774
|
+
}, ...(ngDevMode ? [{ debugName: "ariaLabels" }] : /* istanbul ignore next */ []));
|
|
1775
|
+
this.items = input([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
|
|
1776
|
+
this.collapsed = model(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
|
|
1777
|
+
this.expandedItemIds = model([], ...(ngDevMode ? [{ debugName: "expandedItemIds" }] : /* istanbul ignore next */ []));
|
|
1778
1778
|
this.itemClick = output();
|
|
1779
1779
|
this.submenuToggle = output();
|
|
1780
|
-
this.expandedItemsSet = computed(() => new Set(this.expandedItemIds()), ...(ngDevMode ? [{ debugName: "expandedItemsSet" }] : []));
|
|
1781
|
-
this.state = computed(() => this.getState(), ...(ngDevMode ? [{ debugName: "state" }] : []));
|
|
1782
|
-
this.showTooltip = computed(() => this.collapsed() && this.mode() === 'vertical', ...(ngDevMode ? [{ debugName: "showTooltip" }] : []));
|
|
1780
|
+
this.expandedItemsSet = computed(() => new Set(this.expandedItemIds()), ...(ngDevMode ? [{ debugName: "expandedItemsSet" }] : /* istanbul ignore next */ []));
|
|
1781
|
+
this.state = computed(() => this.getState(), ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
|
|
1782
|
+
this.showTooltip = computed(() => this.collapsed() && this.mode() === 'vertical', ...(ngDevMode ? [{ debugName: "showTooltip" }] : /* istanbul ignore next */ []));
|
|
1783
1783
|
effect(() => {
|
|
1784
1784
|
if (this.collapsed()) {
|
|
1785
1785
|
this.expandedItemIds.set([]);
|
|
@@ -1951,10 +1951,10 @@ class PshMenuComponent {
|
|
|
1951
1951
|
}
|
|
1952
1952
|
}
|
|
1953
1953
|
}
|
|
1954
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1955
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: PshMenuComponent, isStandalone: true, selector: "psh-menu", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, ariaLabels: { classPropertyName: "ariaLabels", publicName: "ariaLabels", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, expandedItemIds: { classPropertyName: "expandedItemIds", publicName: "expandedItemIds", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange", expandedItemIds: "expandedItemIdsChange", itemClick: "itemClick", submenuToggle: "submenuToggle" }, ngImport: i0, template: "<nav \n class=\"menu\"\n [class.vertical]=\"mode() === 'vertical'\"\n [class.horizontal]=\"mode() === 'horizontal'\"\n [class.compact]=\"variant() === 'compact'\"\n [class.expanded]=\"variant() === 'expanded'\"\n [class.collapsed]=\"collapsed()\"\n role=\"navigation\"\n [attr.aria-label]=\"'Navigation menu'\"\n [attr.data-state]=\"state()\"\n>\n @if (collapsible()) {\n <button \n class=\"menu-collapse-button\"\n (click)=\"toggleCollapse()\"\n [attr.aria-expanded]=\"!collapsed()\"\n [attr.aria-label]=\"collapsed() ? ariaLabels()['expand'] : ariaLabels()['collapse']\"\n >\n <i class=\"ph ph-caret-left\" aria-hidden=\"true\"></i>\n </button>\n }\n\n <ul class=\"menu-list\" role=\"menubar\">\n @for (item of items(); track item.id; let i = $index) {\n @if (item.divider) {\n <li class=\"menu-divider\" role=\"separator\"></li>\n } @else {\n <li\n class=\"menu-item\"\n [class.has-children]=\"item.children?.length\"\n [class.expanded]=\"isExpanded(item)\"\n [class.disabled]=\"item.disabled\"\n role=\"none\"\n >\n @if (item.path) {\n @if (showTooltip()) {\n <psh-tooltip [content]=\"item.content\" position=\"right\" [showDelay]=\"100\" [hideDelay]=\"0\">\n <a\n class=\"menu-link\"\n [attr.href]=\"item.path\"\n [attr.data-menu-item-id]=\"item.id\"\n [class.active]=\"item.active\"\n [attr.aria-disabled]=\"item.disabled\"\n [attr.aria-expanded]=\"item.children?.length ? isExpanded(item) : null\"\n [attr.aria-label]=\"getAriaLabel(item)\"\n (click)=\"toggleItem(item, $event)\"\n (keydown)=\"handleKeyDown($event, item, i)\"\n role=\"menuitem\"\n [attr.tabindex]=\"item.disabled ? -1 : 0\"\n >\n @if (item.icon) {\n <i class=\"ph ph-{{ item.icon }}\" aria-hidden=\"true\"></i>\n }\n @if (item.badge) {\n <span class=\"menu-badge\" role=\"status\">{{ item.badge }}</span>\n }\n </a>\n </psh-tooltip>\n } @else {\n <a\n class=\"menu-link\"\n [attr.href]=\"item.path\"\n [attr.data-menu-item-id]=\"item.id\"\n [class.active]=\"item.active\"\n [attr.aria-disabled]=\"item.disabled\"\n [attr.aria-expanded]=\"item.children?.length ? isExpanded(item) : null\"\n [attr.aria-label]=\"getAriaLabel(item)\"\n (click)=\"toggleItem(item, $event)\"\n (keydown)=\"handleKeyDown($event, item, i)\"\n role=\"menuitem\"\n [attr.tabindex]=\"item.disabled ? -1 : 0\"\n >\n @if (item.icon) {\n <i class=\"ph ph-{{ item.icon }}\" aria-hidden=\"true\"></i>\n }\n <span class=\"menu-label\">{{ item.content }}</span>\n @if (item.badge) {\n <span class=\"menu-badge\" role=\"status\">{{ item.badge }}</span>\n }\n @if (item.children?.length) {\n <i\n class=\"ph ph-caret-down menu-arrow\"\n [class.expanded]=\"isExpanded(item)\"\n aria-hidden=\"true\"\n ></i>\n }\n </a>\n }\n } @else {\n @if (showTooltip()) {\n <psh-tooltip [content]=\"item.content\" position=\"right\" [showDelay]=\"100\" [hideDelay]=\"0\">\n <button\n type=\"button\"\n class=\"menu-link\"\n [attr.data-menu-item-id]=\"item.id\"\n [class.active]=\"item.active\"\n [attr.aria-disabled]=\"item.disabled\"\n [attr.aria-expanded]=\"item.children?.length ? isExpanded(item) : null\"\n [attr.aria-label]=\"getAriaLabel(item)\"\n (click)=\"toggleItem(item, $event)\"\n (keydown)=\"handleKeyDown($event, item, i)\"\n role=\"menuitem\"\n [attr.tabindex]=\"item.disabled ? -1 : 0\"\n [disabled]=\"item.disabled\"\n >\n @if (item.icon) {\n <i class=\"ph ph-{{ item.icon }}\" aria-hidden=\"true\"></i>\n }\n @if (item.badge) {\n <span class=\"menu-badge\" role=\"status\">{{ item.badge }}</span>\n }\n </button>\n </psh-tooltip>\n } @else {\n <button\n type=\"button\"\n class=\"menu-link\"\n [attr.data-menu-item-id]=\"item.id\"\n [class.active]=\"item.active\"\n [attr.aria-disabled]=\"item.disabled\"\n [attr.aria-expanded]=\"item.children?.length ? isExpanded(item) : null\"\n [attr.aria-label]=\"getAriaLabel(item)\"\n (click)=\"toggleItem(item, $event)\"\n (keydown)=\"handleKeyDown($event, item, i)\"\n role=\"menuitem\"\n [attr.tabindex]=\"item.disabled ? -1 : 0\"\n [disabled]=\"item.disabled\"\n >\n @if (item.icon) {\n <i class=\"ph ph-{{ item.icon }}\" aria-hidden=\"true\"></i>\n }\n <span class=\"menu-label\">{{ item.content }}</span>\n @if (item.badge) {\n <span class=\"menu-badge\" role=\"status\">{{ item.badge }}</span>\n }\n @if (item.children?.length) {\n <i\n class=\"ph ph-caret-down menu-arrow\"\n [class.expanded]=\"isExpanded(item)\"\n aria-hidden=\"true\"\n ></i>\n }\n </button>\n }\n }\n\n @if (item.children?.length) {\n <ul\n class=\"submenu\"\n role=\"menu\"\n [attr.aria-label]=\"item.content + ' submenu'\"\n >\n @for (child of item.children; track child.id) {\n <li class=\"menu-item\" role=\"none\">\n @if (child.path) {\n <a\n class=\"menu-link\"\n [attr.href]=\"child.path\"\n [attr.data-menu-item-id]=\"child.id\"\n [class.active]=\"child.active\"\n [attr.aria-disabled]=\"child.disabled\"\n [attr.aria-label]=\"getAriaLabel(child)\"\n (click)=\"toggleItem(child, $event)\"\n (keydown.enter)=\"toggleItem(child, $event)\"\n (keydown.space)=\"toggleItem(child, $event)\"\n role=\"menuitem\"\n [attr.tabindex]=\"child.disabled ? -1 : 0\"\n >\n @if (child.icon) {\n <i class=\"ph ph-{{ child.icon }}\" aria-hidden=\"true\"></i>\n }\n <span class=\"menu-label\">{{ child.content }}</span>\n @if (child.badge) {\n <span class=\"menu-badge\" role=\"status\">{{ child.badge }}</span>\n }\n </a>\n } @else {\n <button\n type=\"button\"\n class=\"menu-link\"\n [attr.data-menu-item-id]=\"child.id\"\n [class.active]=\"child.active\"\n [attr.aria-disabled]=\"child.disabled\"\n [attr.aria-label]=\"getAriaLabel(child)\"\n (click)=\"toggleItem(child, $event)\"\n (keydown.enter)=\"toggleItem(child, $event)\"\n (keydown.space)=\"toggleItem(child, $event)\"\n role=\"menuitem\"\n [attr.tabindex]=\"child.disabled ? -1 : 0\"\n [disabled]=\"child.disabled\"\n >\n @if (child.icon) {\n <i class=\"ph ph-{{ child.icon }}\" aria-hidden=\"true\"></i>\n }\n <span class=\"menu-label\">{{ child.content }}</span>\n @if (child.badge) {\n <span class=\"menu-badge\" role=\"status\">{{ child.badge }}</span>\n }\n </button>\n }\n </li>\n }\n </ul>\n }\n </li>\n }\n }\n </ul>\n</nav>", styles: [".menu{background:var(--surface-card);border-radius:var(--border-radius);transition:width .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:visible;width:100%;min-width:0}.menu.vertical{display:flex;flex-direction:column;min-width:0}.menu.horizontal{display:flex;flex-direction:row;align-items:center;padding:var(--spacing-sm);gap:var(--spacing-sm);overflow-x:auto}.menu.collapsed{width:64px;min-width:64px}.menu.compact .menu-link{padding:var(--spacing-xs) var(--spacing-sm);min-height:36px;gap:var(--spacing-xs)}.menu.compact .menu-link i{font-size:1rem}.menu.compact .menu-list{gap:2px}.menu.compact .submenu .menu-link{padding-left:calc(var(--spacing-sm) * 2);font-size:.9em}.menu.expanded .menu-link{padding:var(--spacing-md) var(--spacing-lg);min-height:52px;gap:var(--spacing-md)}.menu.expanded .menu-link i{font-size:1.4rem;width:1.4rem;height:1.4rem}.menu.expanded .menu-list{gap:var(--spacing-sm)}.menu.expanded .submenu .menu-link{padding-left:calc(var(--spacing-lg) * 2)}.menu-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--spacing-xs);width:100%;min-width:0}.horizontal .menu-list{flex-direction:row;flex-wrap:nowrap;gap:var(--spacing-sm)}.menu-item{position:relative;width:100%;min-width:0}.horizontal .menu-item{width:auto}.menu-link{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);color:var(--text-color);text-decoration:none;transition:all .2s ease;cursor:pointer;border-radius:var(--border-radius);min-height:44px;position:relative;width:100%;min-width:0;background:none;border:none;text-align:left;font:inherit}.menu-link:hover:not([aria-disabled=true]){background:var(--surface-hover);color:var(--primary-color);transform:translate(2px)}.menu-item.disabled .menu-link,.menu-link[aria-disabled=true]{opacity:.5;cursor:not-allowed;pointer-events:none}.menu-item.disabled .menu-link:hover{background:transparent;color:var(--text-color);transform:none}.menu-link.active{background:var(--primary-color);color:var(--primary-color-text)}.menu.collapsed .menu-link{padding:var(--spacing-sm);justify-content:center}.menu-arrow{margin-left:auto;transition:transform .3s cubic-bezier(.4,0,.2,1);font-size:1.1rem;color:var(--text-color-secondary);flex-shrink:0}.menu-arrow.expanded{transform:rotate(-180deg)}.menu.collapsed .menu-arrow{display:none}.submenu{overflow:hidden;max-height:0;transition:max-height .3s cubic-bezier(.4,0,.2,1);background:var(--surface-ground);border-radius:var(--border-radius);margin:0 var(--spacing-sm);width:auto;min-width:0}.menu-item.expanded>.submenu{max-height:1000px;margin-top:var(--spacing-xs);margin-bottom:var(--spacing-xs)}.menu.collapsed .submenu{display:none}.submenu .menu-link{padding-left:calc(var(--spacing-md) * 2);font-size:.95em}.submenu .menu-link:hover{transform:translate(4px)}.menu-badge{background:var(--primary-color);color:var(--primary-color-text);padding:2px var(--spacing-xs);border-radius:var(--border-radius);font-size:var(--font-size-xs);margin-left:auto;flex-shrink:0}.menu-divider{height:1px;background:var(--surface-border);margin:var(--spacing-sm) var(--spacing-md);opacity:.5}.menu-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .3s ease;min-width:0;flex:1}.menu.collapsed .menu-label{opacity:0;width:0}.menu.collapsed psh-tooltip{display:block;width:100%}.menu-link i{font-size:1.2rem;flex-shrink:0;width:1.2rem;height:1.2rem;display:flex;align-items:center;justify-content:center}.menu-collapse-button{position:absolute;top:var(--spacing-sm);right:calc(-1 * var(--spacing-lg));width:28px;height:28px;background:var(--surface-card);border:1px solid var(--surface-border);border-radius:var(--border-radius);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;color:var(--text-color-secondary);z-index:2;box-shadow:var(--shadow-sm)}.menu-collapse-button:hover{background:var(--surface-hover);color:var(--primary-color);transform:scale(1.05);box-shadow:var(--shadow-md)}.menu-collapse-button:focus{outline:none;box-shadow:0 0 0 2px rgba(var(--primary-color-rgb),.2)}.menu-collapse-button i{font-size:1rem;transition:transform .3s ease}.menu.collapsed .menu-collapse-button i{transform:rotate(180deg)}@media(max-width:768px){.menu.horizontal{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}.menu.horizontal::-webkit-scrollbar{display:none}.menu.vertical:not(.collapsed){min-width:200px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: PshTooltipComponent, selector: "psh-tooltip", inputs: ["variant", "position", "showDelay", "hideDelay", "maxWidth", "autoFlip", "content", "disabled", "id"], outputs: ["shown", "hidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1954
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: PshMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1955
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", type: PshMenuComponent, isStandalone: true, selector: "psh-menu", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, ariaLabels: { classPropertyName: "ariaLabels", publicName: "ariaLabels", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, expandedItemIds: { classPropertyName: "expandedItemIds", publicName: "expandedItemIds", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange", expandedItemIds: "expandedItemIdsChange", itemClick: "itemClick", submenuToggle: "submenuToggle" }, ngImport: i0, template: "<nav \n class=\"menu\"\n [class.vertical]=\"mode() === 'vertical'\"\n [class.horizontal]=\"mode() === 'horizontal'\"\n [class.compact]=\"variant() === 'compact'\"\n [class.expanded]=\"variant() === 'expanded'\"\n [class.collapsed]=\"collapsed()\"\n role=\"navigation\"\n [attr.aria-label]=\"'Navigation menu'\"\n [attr.data-state]=\"state()\"\n>\n @if (collapsible()) {\n <button \n class=\"menu-collapse-button\"\n (click)=\"toggleCollapse()\"\n [attr.aria-expanded]=\"!collapsed()\"\n [attr.aria-label]=\"collapsed() ? ariaLabels()['expand'] : ariaLabels()['collapse']\"\n >\n <i class=\"ph ph-caret-left\" aria-hidden=\"true\"></i>\n </button>\n }\n\n <ul class=\"menu-list\" role=\"menubar\">\n @for (item of items(); track item.id; let i = $index) {\n @if (item.divider) {\n <li class=\"menu-divider\" role=\"separator\"></li>\n } @else {\n <li\n class=\"menu-item\"\n [class.has-children]=\"item.children?.length\"\n [class.expanded]=\"isExpanded(item)\"\n [class.disabled]=\"item.disabled\"\n role=\"none\"\n >\n @if (item.path) {\n @if (showTooltip()) {\n <psh-tooltip [content]=\"item.content\" position=\"right\" [showDelay]=\"100\" [hideDelay]=\"0\">\n <a\n class=\"menu-link\"\n [attr.href]=\"item.path\"\n [attr.data-menu-item-id]=\"item.id\"\n [class.active]=\"item.active\"\n [attr.aria-disabled]=\"item.disabled\"\n [attr.aria-expanded]=\"item.children?.length ? isExpanded(item) : null\"\n [attr.aria-label]=\"getAriaLabel(item)\"\n (click)=\"toggleItem(item, $event)\"\n (keydown)=\"handleKeyDown($event, item, i)\"\n role=\"menuitem\"\n [attr.tabindex]=\"item.disabled ? -1 : 0\"\n >\n @if (item.icon) {\n <i class=\"ph ph-{{ item.icon }}\" aria-hidden=\"true\"></i>\n }\n @if (item.badge) {\n <span class=\"menu-badge\" role=\"status\">{{ item.badge }}</span>\n }\n </a>\n </psh-tooltip>\n } @else {\n <a\n class=\"menu-link\"\n [attr.href]=\"item.path\"\n [attr.data-menu-item-id]=\"item.id\"\n [class.active]=\"item.active\"\n [attr.aria-disabled]=\"item.disabled\"\n [attr.aria-expanded]=\"item.children?.length ? isExpanded(item) : null\"\n [attr.aria-label]=\"getAriaLabel(item)\"\n (click)=\"toggleItem(item, $event)\"\n (keydown)=\"handleKeyDown($event, item, i)\"\n role=\"menuitem\"\n [attr.tabindex]=\"item.disabled ? -1 : 0\"\n >\n @if (item.icon) {\n <i class=\"ph ph-{{ item.icon }}\" aria-hidden=\"true\"></i>\n }\n <span class=\"menu-label\">{{ item.content }}</span>\n @if (item.badge) {\n <span class=\"menu-badge\" role=\"status\">{{ item.badge }}</span>\n }\n @if (item.children?.length) {\n <i\n class=\"ph ph-caret-down menu-arrow\"\n [class.expanded]=\"isExpanded(item)\"\n aria-hidden=\"true\"\n ></i>\n }\n </a>\n }\n } @else {\n @if (showTooltip()) {\n <psh-tooltip [content]=\"item.content\" position=\"right\" [showDelay]=\"100\" [hideDelay]=\"0\">\n <button\n type=\"button\"\n class=\"menu-link\"\n [attr.data-menu-item-id]=\"item.id\"\n [class.active]=\"item.active\"\n [attr.aria-disabled]=\"item.disabled\"\n [attr.aria-expanded]=\"item.children?.length ? isExpanded(item) : null\"\n [attr.aria-label]=\"getAriaLabel(item)\"\n (click)=\"toggleItem(item, $event)\"\n (keydown)=\"handleKeyDown($event, item, i)\"\n role=\"menuitem\"\n [attr.tabindex]=\"item.disabled ? -1 : 0\"\n [disabled]=\"item.disabled\"\n >\n @if (item.icon) {\n <i class=\"ph ph-{{ item.icon }}\" aria-hidden=\"true\"></i>\n }\n @if (item.badge) {\n <span class=\"menu-badge\" role=\"status\">{{ item.badge }}</span>\n }\n </button>\n </psh-tooltip>\n } @else {\n <button\n type=\"button\"\n class=\"menu-link\"\n [attr.data-menu-item-id]=\"item.id\"\n [class.active]=\"item.active\"\n [attr.aria-disabled]=\"item.disabled\"\n [attr.aria-expanded]=\"item.children?.length ? isExpanded(item) : null\"\n [attr.aria-label]=\"getAriaLabel(item)\"\n (click)=\"toggleItem(item, $event)\"\n (keydown)=\"handleKeyDown($event, item, i)\"\n role=\"menuitem\"\n [attr.tabindex]=\"item.disabled ? -1 : 0\"\n [disabled]=\"item.disabled\"\n >\n @if (item.icon) {\n <i class=\"ph ph-{{ item.icon }}\" aria-hidden=\"true\"></i>\n }\n <span class=\"menu-label\">{{ item.content }}</span>\n @if (item.badge) {\n <span class=\"menu-badge\" role=\"status\">{{ item.badge }}</span>\n }\n @if (item.children?.length) {\n <i\n class=\"ph ph-caret-down menu-arrow\"\n [class.expanded]=\"isExpanded(item)\"\n aria-hidden=\"true\"\n ></i>\n }\n </button>\n }\n }\n\n @if (item.children?.length) {\n <ul\n class=\"submenu\"\n role=\"menu\"\n [attr.aria-label]=\"item.content + ' submenu'\"\n >\n @for (child of item.children; track child.id) {\n <li class=\"menu-item\" role=\"none\">\n @if (child.path) {\n <a\n class=\"menu-link\"\n [attr.href]=\"child.path\"\n [attr.data-menu-item-id]=\"child.id\"\n [class.active]=\"child.active\"\n [attr.aria-disabled]=\"child.disabled\"\n [attr.aria-label]=\"getAriaLabel(child)\"\n (click)=\"toggleItem(child, $event)\"\n (keydown.enter)=\"toggleItem(child, $event)\"\n (keydown.space)=\"toggleItem(child, $event)\"\n role=\"menuitem\"\n [attr.tabindex]=\"child.disabled ? -1 : 0\"\n >\n @if (child.icon) {\n <i class=\"ph ph-{{ child.icon }}\" aria-hidden=\"true\"></i>\n }\n <span class=\"menu-label\">{{ child.content }}</span>\n @if (child.badge) {\n <span class=\"menu-badge\" role=\"status\">{{ child.badge }}</span>\n }\n </a>\n } @else {\n <button\n type=\"button\"\n class=\"menu-link\"\n [attr.data-menu-item-id]=\"child.id\"\n [class.active]=\"child.active\"\n [attr.aria-disabled]=\"child.disabled\"\n [attr.aria-label]=\"getAriaLabel(child)\"\n (click)=\"toggleItem(child, $event)\"\n (keydown.enter)=\"toggleItem(child, $event)\"\n (keydown.space)=\"toggleItem(child, $event)\"\n role=\"menuitem\"\n [attr.tabindex]=\"child.disabled ? -1 : 0\"\n [disabled]=\"child.disabled\"\n >\n @if (child.icon) {\n <i class=\"ph ph-{{ child.icon }}\" aria-hidden=\"true\"></i>\n }\n <span class=\"menu-label\">{{ child.content }}</span>\n @if (child.badge) {\n <span class=\"menu-badge\" role=\"status\">{{ child.badge }}</span>\n }\n </button>\n }\n </li>\n }\n </ul>\n }\n </li>\n }\n }\n </ul>\n</nav>", styles: [".menu{background:var(--surface-card);border-radius:var(--border-radius);transition:width .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:visible;width:100%;min-width:0}.menu.vertical{display:flex;flex-direction:column;min-width:0}.menu.horizontal{display:flex;flex-direction:row;align-items:center;padding:var(--spacing-sm);gap:var(--spacing-sm);overflow-x:auto}.menu.collapsed{width:64px;min-width:64px}.menu.compact .menu-link{padding:var(--spacing-xs) var(--spacing-sm);min-height:36px;gap:var(--spacing-xs)}.menu.compact .menu-link i{font-size:1rem}.menu.compact .menu-list{gap:2px}.menu.compact .submenu .menu-link{padding-left:calc(var(--spacing-sm) * 2);font-size:.9em}.menu.expanded .menu-link{padding:var(--spacing-md) var(--spacing-lg);min-height:52px;gap:var(--spacing-md)}.menu.expanded .menu-link i{font-size:1.4rem;width:1.4rem;height:1.4rem}.menu.expanded .menu-list{gap:var(--spacing-sm)}.menu.expanded .submenu .menu-link{padding-left:calc(var(--spacing-lg) * 2)}.menu-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--spacing-xs);width:100%;min-width:0}.horizontal .menu-list{flex-direction:row;flex-wrap:nowrap;gap:var(--spacing-sm)}.menu-item{position:relative;width:100%;min-width:0}.horizontal .menu-item{width:auto}.menu-link{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);color:var(--text-color);text-decoration:none;transition:all .2s ease;cursor:pointer;border-radius:var(--border-radius);min-height:44px;position:relative;width:100%;min-width:0;background:none;border:none;text-align:left;font:inherit}.menu-link:hover:not([aria-disabled=true]){background:var(--surface-hover);color:var(--primary-color);transform:translate(2px)}.menu-item.disabled .menu-link,.menu-link[aria-disabled=true]{opacity:.5;cursor:not-allowed;pointer-events:none}.menu-item.disabled .menu-link:hover{background:transparent;color:var(--text-color);transform:none}.menu-link.active{background:var(--primary-color);color:var(--primary-color-text)}.menu.collapsed .menu-link{padding:var(--spacing-sm);justify-content:center}.menu-arrow{margin-left:auto;transition:transform .3s cubic-bezier(.4,0,.2,1);font-size:1.1rem;color:var(--text-color-secondary);flex-shrink:0}.menu-arrow.expanded{transform:rotate(-180deg)}.menu.collapsed .menu-arrow{display:none}.submenu{overflow:hidden;max-height:0;transition:max-height .3s cubic-bezier(.4,0,.2,1);background:var(--surface-ground);border-radius:var(--border-radius);margin:0 var(--spacing-sm);width:auto;min-width:0}.menu-item.expanded>.submenu{max-height:1000px;margin-top:var(--spacing-xs);margin-bottom:var(--spacing-xs)}.menu.collapsed .submenu{display:none}.submenu .menu-link{padding-left:calc(var(--spacing-md) * 2);font-size:.95em}.submenu .menu-link:hover{transform:translate(4px)}.menu-badge{background:var(--primary-color);color:var(--primary-color-text);padding:2px var(--spacing-xs);border-radius:var(--border-radius);font-size:var(--font-size-xs);margin-left:auto;flex-shrink:0}.menu-divider{height:1px;background:var(--surface-border);margin:var(--spacing-sm) var(--spacing-md);opacity:.5}.menu-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .3s ease;min-width:0;flex:1}.menu.collapsed .menu-label{opacity:0;width:0}.menu.collapsed psh-tooltip{display:block;width:100%}.menu-link i{font-size:1.2rem;flex-shrink:0;width:1.2rem;height:1.2rem;display:flex;align-items:center;justify-content:center}.menu-collapse-button{position:absolute;top:var(--spacing-sm);right:calc(-1 * var(--spacing-lg));width:28px;height:28px;background:var(--surface-card);border:1px solid var(--surface-border);border-radius:var(--border-radius);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;color:var(--text-color-secondary);z-index:2;box-shadow:var(--shadow-sm)}.menu-collapse-button:hover{background:var(--surface-hover);color:var(--primary-color);transform:scale(1.05);box-shadow:var(--shadow-md)}.menu-collapse-button:focus{outline:none;box-shadow:0 0 0 2px rgba(var(--primary-color-rgb),.2)}.menu-collapse-button i{font-size:1rem;transition:transform .3s ease}.menu.collapsed .menu-collapse-button i{transform:rotate(180deg)}@media(max-width:768px){.menu.horizontal{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}.menu.horizontal::-webkit-scrollbar{display:none}.menu.vertical:not(.collapsed){min-width:200px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: PshTooltipComponent, selector: "psh-tooltip", inputs: ["variant", "position", "showDelay", "hideDelay", "maxWidth", "autoFlip", "content", "disabled", "id"], outputs: ["shown", "hidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1956
1956
|
}
|
|
1957
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1957
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: PshMenuComponent, decorators: [{
|
|
1958
1958
|
type: Component,
|
|
1959
1959
|
args: [{ selector: 'psh-menu', imports: [CommonModule, PshTooltipComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav \n class=\"menu\"\n [class.vertical]=\"mode() === 'vertical'\"\n [class.horizontal]=\"mode() === 'horizontal'\"\n [class.compact]=\"variant() === 'compact'\"\n [class.expanded]=\"variant() === 'expanded'\"\n [class.collapsed]=\"collapsed()\"\n role=\"navigation\"\n [attr.aria-label]=\"'Navigation menu'\"\n [attr.data-state]=\"state()\"\n>\n @if (collapsible()) {\n <button \n class=\"menu-collapse-button\"\n (click)=\"toggleCollapse()\"\n [attr.aria-expanded]=\"!collapsed()\"\n [attr.aria-label]=\"collapsed() ? ariaLabels()['expand'] : ariaLabels()['collapse']\"\n >\n <i class=\"ph ph-caret-left\" aria-hidden=\"true\"></i>\n </button>\n }\n\n <ul class=\"menu-list\" role=\"menubar\">\n @for (item of items(); track item.id; let i = $index) {\n @if (item.divider) {\n <li class=\"menu-divider\" role=\"separator\"></li>\n } @else {\n <li\n class=\"menu-item\"\n [class.has-children]=\"item.children?.length\"\n [class.expanded]=\"isExpanded(item)\"\n [class.disabled]=\"item.disabled\"\n role=\"none\"\n >\n @if (item.path) {\n @if (showTooltip()) {\n <psh-tooltip [content]=\"item.content\" position=\"right\" [showDelay]=\"100\" [hideDelay]=\"0\">\n <a\n class=\"menu-link\"\n [attr.href]=\"item.path\"\n [attr.data-menu-item-id]=\"item.id\"\n [class.active]=\"item.active\"\n [attr.aria-disabled]=\"item.disabled\"\n [attr.aria-expanded]=\"item.children?.length ? isExpanded(item) : null\"\n [attr.aria-label]=\"getAriaLabel(item)\"\n (click)=\"toggleItem(item, $event)\"\n (keydown)=\"handleKeyDown($event, item, i)\"\n role=\"menuitem\"\n [attr.tabindex]=\"item.disabled ? -1 : 0\"\n >\n @if (item.icon) {\n <i class=\"ph ph-{{ item.icon }}\" aria-hidden=\"true\"></i>\n }\n @if (item.badge) {\n <span class=\"menu-badge\" role=\"status\">{{ item.badge }}</span>\n }\n </a>\n </psh-tooltip>\n } @else {\n <a\n class=\"menu-link\"\n [attr.href]=\"item.path\"\n [attr.data-menu-item-id]=\"item.id\"\n [class.active]=\"item.active\"\n [attr.aria-disabled]=\"item.disabled\"\n [attr.aria-expanded]=\"item.children?.length ? isExpanded(item) : null\"\n [attr.aria-label]=\"getAriaLabel(item)\"\n (click)=\"toggleItem(item, $event)\"\n (keydown)=\"handleKeyDown($event, item, i)\"\n role=\"menuitem\"\n [attr.tabindex]=\"item.disabled ? -1 : 0\"\n >\n @if (item.icon) {\n <i class=\"ph ph-{{ item.icon }}\" aria-hidden=\"true\"></i>\n }\n <span class=\"menu-label\">{{ item.content }}</span>\n @if (item.badge) {\n <span class=\"menu-badge\" role=\"status\">{{ item.badge }}</span>\n }\n @if (item.children?.length) {\n <i\n class=\"ph ph-caret-down menu-arrow\"\n [class.expanded]=\"isExpanded(item)\"\n aria-hidden=\"true\"\n ></i>\n }\n </a>\n }\n } @else {\n @if (showTooltip()) {\n <psh-tooltip [content]=\"item.content\" position=\"right\" [showDelay]=\"100\" [hideDelay]=\"0\">\n <button\n type=\"button\"\n class=\"menu-link\"\n [attr.data-menu-item-id]=\"item.id\"\n [class.active]=\"item.active\"\n [attr.aria-disabled]=\"item.disabled\"\n [attr.aria-expanded]=\"item.children?.length ? isExpanded(item) : null\"\n [attr.aria-label]=\"getAriaLabel(item)\"\n (click)=\"toggleItem(item, $event)\"\n (keydown)=\"handleKeyDown($event, item, i)\"\n role=\"menuitem\"\n [attr.tabindex]=\"item.disabled ? -1 : 0\"\n [disabled]=\"item.disabled\"\n >\n @if (item.icon) {\n <i class=\"ph ph-{{ item.icon }}\" aria-hidden=\"true\"></i>\n }\n @if (item.badge) {\n <span class=\"menu-badge\" role=\"status\">{{ item.badge }}</span>\n }\n </button>\n </psh-tooltip>\n } @else {\n <button\n type=\"button\"\n class=\"menu-link\"\n [attr.data-menu-item-id]=\"item.id\"\n [class.active]=\"item.active\"\n [attr.aria-disabled]=\"item.disabled\"\n [attr.aria-expanded]=\"item.children?.length ? isExpanded(item) : null\"\n [attr.aria-label]=\"getAriaLabel(item)\"\n (click)=\"toggleItem(item, $event)\"\n (keydown)=\"handleKeyDown($event, item, i)\"\n role=\"menuitem\"\n [attr.tabindex]=\"item.disabled ? -1 : 0\"\n [disabled]=\"item.disabled\"\n >\n @if (item.icon) {\n <i class=\"ph ph-{{ item.icon }}\" aria-hidden=\"true\"></i>\n }\n <span class=\"menu-label\">{{ item.content }}</span>\n @if (item.badge) {\n <span class=\"menu-badge\" role=\"status\">{{ item.badge }}</span>\n }\n @if (item.children?.length) {\n <i\n class=\"ph ph-caret-down menu-arrow\"\n [class.expanded]=\"isExpanded(item)\"\n aria-hidden=\"true\"\n ></i>\n }\n </button>\n }\n }\n\n @if (item.children?.length) {\n <ul\n class=\"submenu\"\n role=\"menu\"\n [attr.aria-label]=\"item.content + ' submenu'\"\n >\n @for (child of item.children; track child.id) {\n <li class=\"menu-item\" role=\"none\">\n @if (child.path) {\n <a\n class=\"menu-link\"\n [attr.href]=\"child.path\"\n [attr.data-menu-item-id]=\"child.id\"\n [class.active]=\"child.active\"\n [attr.aria-disabled]=\"child.disabled\"\n [attr.aria-label]=\"getAriaLabel(child)\"\n (click)=\"toggleItem(child, $event)\"\n (keydown.enter)=\"toggleItem(child, $event)\"\n (keydown.space)=\"toggleItem(child, $event)\"\n role=\"menuitem\"\n [attr.tabindex]=\"child.disabled ? -1 : 0\"\n >\n @if (child.icon) {\n <i class=\"ph ph-{{ child.icon }}\" aria-hidden=\"true\"></i>\n }\n <span class=\"menu-label\">{{ child.content }}</span>\n @if (child.badge) {\n <span class=\"menu-badge\" role=\"status\">{{ child.badge }}</span>\n }\n </a>\n } @else {\n <button\n type=\"button\"\n class=\"menu-link\"\n [attr.data-menu-item-id]=\"child.id\"\n [class.active]=\"child.active\"\n [attr.aria-disabled]=\"child.disabled\"\n [attr.aria-label]=\"getAriaLabel(child)\"\n (click)=\"toggleItem(child, $event)\"\n (keydown.enter)=\"toggleItem(child, $event)\"\n (keydown.space)=\"toggleItem(child, $event)\"\n role=\"menuitem\"\n [attr.tabindex]=\"child.disabled ? -1 : 0\"\n [disabled]=\"child.disabled\"\n >\n @if (child.icon) {\n <i class=\"ph ph-{{ child.icon }}\" aria-hidden=\"true\"></i>\n }\n <span class=\"menu-label\">{{ child.content }}</span>\n @if (child.badge) {\n <span class=\"menu-badge\" role=\"status\">{{ child.badge }}</span>\n }\n </button>\n }\n </li>\n }\n </ul>\n }\n </li>\n }\n }\n </ul>\n</nav>", styles: [".menu{background:var(--surface-card);border-radius:var(--border-radius);transition:width .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:visible;width:100%;min-width:0}.menu.vertical{display:flex;flex-direction:column;min-width:0}.menu.horizontal{display:flex;flex-direction:row;align-items:center;padding:var(--spacing-sm);gap:var(--spacing-sm);overflow-x:auto}.menu.collapsed{width:64px;min-width:64px}.menu.compact .menu-link{padding:var(--spacing-xs) var(--spacing-sm);min-height:36px;gap:var(--spacing-xs)}.menu.compact .menu-link i{font-size:1rem}.menu.compact .menu-list{gap:2px}.menu.compact .submenu .menu-link{padding-left:calc(var(--spacing-sm) * 2);font-size:.9em}.menu.expanded .menu-link{padding:var(--spacing-md) var(--spacing-lg);min-height:52px;gap:var(--spacing-md)}.menu.expanded .menu-link i{font-size:1.4rem;width:1.4rem;height:1.4rem}.menu.expanded .menu-list{gap:var(--spacing-sm)}.menu.expanded .submenu .menu-link{padding-left:calc(var(--spacing-lg) * 2)}.menu-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--spacing-xs);width:100%;min-width:0}.horizontal .menu-list{flex-direction:row;flex-wrap:nowrap;gap:var(--spacing-sm)}.menu-item{position:relative;width:100%;min-width:0}.horizontal .menu-item{width:auto}.menu-link{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);color:var(--text-color);text-decoration:none;transition:all .2s ease;cursor:pointer;border-radius:var(--border-radius);min-height:44px;position:relative;width:100%;min-width:0;background:none;border:none;text-align:left;font:inherit}.menu-link:hover:not([aria-disabled=true]){background:var(--surface-hover);color:var(--primary-color);transform:translate(2px)}.menu-item.disabled .menu-link,.menu-link[aria-disabled=true]{opacity:.5;cursor:not-allowed;pointer-events:none}.menu-item.disabled .menu-link:hover{background:transparent;color:var(--text-color);transform:none}.menu-link.active{background:var(--primary-color);color:var(--primary-color-text)}.menu.collapsed .menu-link{padding:var(--spacing-sm);justify-content:center}.menu-arrow{margin-left:auto;transition:transform .3s cubic-bezier(.4,0,.2,1);font-size:1.1rem;color:var(--text-color-secondary);flex-shrink:0}.menu-arrow.expanded{transform:rotate(-180deg)}.menu.collapsed .menu-arrow{display:none}.submenu{overflow:hidden;max-height:0;transition:max-height .3s cubic-bezier(.4,0,.2,1);background:var(--surface-ground);border-radius:var(--border-radius);margin:0 var(--spacing-sm);width:auto;min-width:0}.menu-item.expanded>.submenu{max-height:1000px;margin-top:var(--spacing-xs);margin-bottom:var(--spacing-xs)}.menu.collapsed .submenu{display:none}.submenu .menu-link{padding-left:calc(var(--spacing-md) * 2);font-size:.95em}.submenu .menu-link:hover{transform:translate(4px)}.menu-badge{background:var(--primary-color);color:var(--primary-color-text);padding:2px var(--spacing-xs);border-radius:var(--border-radius);font-size:var(--font-size-xs);margin-left:auto;flex-shrink:0}.menu-divider{height:1px;background:var(--surface-border);margin:var(--spacing-sm) var(--spacing-md);opacity:.5}.menu-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .3s ease;min-width:0;flex:1}.menu.collapsed .menu-label{opacity:0;width:0}.menu.collapsed psh-tooltip{display:block;width:100%}.menu-link i{font-size:1.2rem;flex-shrink:0;width:1.2rem;height:1.2rem;display:flex;align-items:center;justify-content:center}.menu-collapse-button{position:absolute;top:var(--spacing-sm);right:calc(-1 * var(--spacing-lg));width:28px;height:28px;background:var(--surface-card);border:1px solid var(--surface-border);border-radius:var(--border-radius);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;color:var(--text-color-secondary);z-index:2;box-shadow:var(--shadow-sm)}.menu-collapse-button:hover{background:var(--surface-hover);color:var(--primary-color);transform:scale(1.05);box-shadow:var(--shadow-md)}.menu-collapse-button:focus{outline:none;box-shadow:0 0 0 2px rgba(var(--primary-color-rgb),.2)}.menu-collapse-button i{font-size:1rem;transition:transform .3s ease}.menu.collapsed .menu-collapse-button i{transform:rotate(180deg)}@media(max-width:768px){.menu.horizontal{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}.menu.horizontal::-webkit-scrollbar{display:none}.menu.vertical:not(.collapsed){min-width:200px}}\n"] }]
|
|
1960
1960
|
}], ctorParameters: () => [], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], ariaLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabels", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }, { type: i0.Output, args: ["collapsedChange"] }], expandedItemIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedItemIds", required: false }] }, { type: i0.Output, args: ["expandedItemIdsChange"] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], submenuToggle: [{ type: i0.Output, args: ["submenuToggle"] }] } });
|
|
@@ -1998,11 +1998,11 @@ const MODAL_CONFIG = new InjectionToken('MODAL_CONFIG', {
|
|
|
1998
1998
|
class ModalService {
|
|
1999
1999
|
constructor() {
|
|
2000
2000
|
this.config = inject(MODAL_CONFIG);
|
|
2001
|
-
this.modalsSignal = signal(new Set(), ...(ngDevMode ? [{ debugName: "modalsSignal" }] : []));
|
|
2001
|
+
this.modalsSignal = signal(new Set(), ...(ngDevMode ? [{ debugName: "modalsSignal" }] : /* istanbul ignore next */ []));
|
|
2002
2002
|
/**
|
|
2003
2003
|
* Computed signal exposing the number of active modals
|
|
2004
2004
|
*/
|
|
2005
|
-
this.activeModalsCount = computed(() => this.modalsSignal().size, ...(ngDevMode ? [{ debugName: "activeModalsCount" }] : []));
|
|
2005
|
+
this.activeModalsCount = computed(() => this.modalsSignal().size, ...(ngDevMode ? [{ debugName: "activeModalsCount" }] : /* istanbul ignore next */ []));
|
|
2006
2006
|
}
|
|
2007
2007
|
/**
|
|
2008
2008
|
* Returns the global modal configuration
|
|
@@ -2045,10 +2045,10 @@ class ModalService {
|
|
|
2045
2045
|
isRegistered(id) {
|
|
2046
2046
|
return this.modalsSignal().has(id);
|
|
2047
2047
|
}
|
|
2048
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
2049
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.
|
|
2048
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: ModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
2049
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: ModalService, providedIn: 'root' }); }
|
|
2050
2050
|
}
|
|
2051
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
2051
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: ModalService, decorators: [{
|
|
2052
2052
|
type: Injectable,
|
|
2053
2053
|
args: [{
|
|
2054
2054
|
providedIn: 'root'
|
|
@@ -2083,52 +2083,52 @@ class PshModalComponent {
|
|
|
2083
2083
|
this.modalId = this.modalService.generateId();
|
|
2084
2084
|
this.previousActiveElement = null;
|
|
2085
2085
|
this.isAttachedToBody = false;
|
|
2086
|
-
this.isMobileSignal = signal(false, ...(ngDevMode ? [{ debugName: "isMobileSignal" }] : []));
|
|
2086
|
+
this.isMobileSignal = signal(false, ...(ngDevMode ? [{ debugName: "isMobileSignal" }] : /* istanbul ignore next */ []));
|
|
2087
2087
|
this.mobileBreakpoint = 768;
|
|
2088
2088
|
/**
|
|
2089
2089
|
* Controls the visibility of the modal (two-way binding)
|
|
2090
2090
|
*/
|
|
2091
|
-
this.open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
|
|
2091
|
+
this.open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
|
|
2092
2092
|
/**
|
|
2093
2093
|
* Size of the modal dialog
|
|
2094
2094
|
*/
|
|
2095
|
-
this.size = input(this.config.size ?? 'medium', ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
2095
|
+
this.size = input(this.config.size ?? 'medium', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
2096
2096
|
/**
|
|
2097
2097
|
* Whether to show the close button in the header
|
|
2098
2098
|
*/
|
|
2099
|
-
this.showClose = input(this.config.showClose ?? true, ...(ngDevMode ? [{ debugName: "showClose" }] : []));
|
|
2099
|
+
this.showClose = input(this.config.showClose ?? true, ...(ngDevMode ? [{ debugName: "showClose" }] : /* istanbul ignore next */ []));
|
|
2100
2100
|
/**
|
|
2101
2101
|
* Whether clicking the backdrop closes the modal
|
|
2102
2102
|
*/
|
|
2103
|
-
this.closeOnBackdrop = input(this.config.closeOnBackdrop ?? true, ...(ngDevMode ? [{ debugName: "closeOnBackdrop" }] : []));
|
|
2103
|
+
this.closeOnBackdrop = input(this.config.closeOnBackdrop ?? true, ...(ngDevMode ? [{ debugName: "closeOnBackdrop" }] : /* istanbul ignore next */ []));
|
|
2104
2104
|
/**
|
|
2105
2105
|
* Whether pressing Escape closes the modal
|
|
2106
2106
|
*/
|
|
2107
|
-
this.closeOnEscape = input(this.config.closeOnEscape ?? true, ...(ngDevMode ? [{ debugName: "closeOnEscape" }] : []));
|
|
2107
|
+
this.closeOnEscape = input(this.config.closeOnEscape ?? true, ...(ngDevMode ? [{ debugName: "closeOnEscape" }] : /* istanbul ignore next */ []));
|
|
2108
2108
|
/**
|
|
2109
2109
|
* Whether to prevent scrolling of the page when modal is open
|
|
2110
2110
|
*/
|
|
2111
|
-
this.preventScroll = input(this.config.preventScroll ?? true, ...(ngDevMode ? [{ debugName: "preventScroll" }] : []));
|
|
2111
|
+
this.preventScroll = input(this.config.preventScroll ?? true, ...(ngDevMode ? [{ debugName: "preventScroll" }] : /* istanbul ignore next */ []));
|
|
2112
2112
|
/**
|
|
2113
2113
|
* Whether to show the default footer with action buttons
|
|
2114
2114
|
*/
|
|
2115
|
-
this.showFooter = input(this.config.showFooter ?? true, ...(ngDevMode ? [{ debugName: "showFooter" }] : []));
|
|
2115
|
+
this.showFooter = input(this.config.showFooter ?? true, ...(ngDevMode ? [{ debugName: "showFooter" }] : /* istanbul ignore next */ []));
|
|
2116
2116
|
/**
|
|
2117
2117
|
* Title displayed in the modal header
|
|
2118
2118
|
*/
|
|
2119
|
-
this.title = input('Modal Title', ...(ngDevMode ? [{ debugName: "title" }] : []));
|
|
2119
|
+
this.title = input('Modal Title', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
|
|
2120
2120
|
/**
|
|
2121
2121
|
* Accessible label for the close button
|
|
2122
2122
|
*/
|
|
2123
|
-
this.dismissLabel = input(this.config.dismissLabel ?? 'Close', ...(ngDevMode ? [{ debugName: "dismissLabel" }] : []));
|
|
2123
|
+
this.dismissLabel = input(this.config.dismissLabel ?? 'Close', ...(ngDevMode ? [{ debugName: "dismissLabel" }] : /* istanbul ignore next */ []));
|
|
2124
2124
|
/**
|
|
2125
2125
|
* Label for the confirm button in the default footer
|
|
2126
2126
|
*/
|
|
2127
|
-
this.confirmLabel = input(this.config.confirmLabel ?? 'Confirm', ...(ngDevMode ? [{ debugName: "confirmLabel" }] : []));
|
|
2127
|
+
this.confirmLabel = input(this.config.confirmLabel ?? 'Confirm', ...(ngDevMode ? [{ debugName: "confirmLabel" }] : /* istanbul ignore next */ []));
|
|
2128
2128
|
/**
|
|
2129
2129
|
* Label for the cancel button in the default footer
|
|
2130
2130
|
*/
|
|
2131
|
-
this.cancelLabel = input(this.config.cancelLabel ?? 'Cancel', ...(ngDevMode ? [{ debugName: "cancelLabel" }] : []));
|
|
2131
|
+
this.cancelLabel = input(this.config.cancelLabel ?? 'Cancel', ...(ngDevMode ? [{ debugName: "cancelLabel" }] : /* istanbul ignore next */ []));
|
|
2132
2132
|
/**
|
|
2133
2133
|
* Custom CSS class(es) to apply to the modal container
|
|
2134
2134
|
* Allows for custom styling without using deep selectors
|
|
@@ -2138,7 +2138,7 @@ class PshModalComponent {
|
|
|
2138
2138
|
* <psh-modal styleClass="my-custom-modal" />
|
|
2139
2139
|
* ```
|
|
2140
2140
|
*/
|
|
2141
|
-
this.styleClass = input('', ...(ngDevMode ? [{ debugName: "styleClass" }] : []));
|
|
2141
|
+
this.styleClass = input('', ...(ngDevMode ? [{ debugName: "styleClass" }] : /* istanbul ignore next */ []));
|
|
2142
2142
|
/**
|
|
2143
2143
|
* Custom CSS class(es) to apply to the modal backdrop
|
|
2144
2144
|
* Useful for stacked modals with different z-index or opacity
|
|
@@ -2148,7 +2148,7 @@ class PshModalComponent {
|
|
|
2148
2148
|
* <psh-modal backdropClass="higher-z-index" />
|
|
2149
2149
|
* ```
|
|
2150
2150
|
*/
|
|
2151
|
-
this.backdropClass = input('', ...(ngDevMode ? [{ debugName: "backdropClass" }] : []));
|
|
2151
|
+
this.backdropClass = input('', ...(ngDevMode ? [{ debugName: "backdropClass" }] : /* istanbul ignore next */ []));
|
|
2152
2152
|
/**
|
|
2153
2153
|
* Emitted when the modal is closed
|
|
2154
2154
|
*/
|
|
@@ -2160,11 +2160,11 @@ class PshModalComponent {
|
|
|
2160
2160
|
/**
|
|
2161
2161
|
* Content child for detecting custom footer projection
|
|
2162
2162
|
*/
|
|
2163
|
-
this.customFooter = contentChild('modalFooter', ...(ngDevMode ? [{ debugName: "customFooter" }] : []));
|
|
2163
|
+
this.customFooter = contentChild('modalFooter', ...(ngDevMode ? [{ debugName: "customFooter" }] : /* istanbul ignore next */ []));
|
|
2164
2164
|
/**
|
|
2165
2165
|
* View child reference to the modal backdrop element
|
|
2166
2166
|
*/
|
|
2167
|
-
this.modalBackdrop = viewChild('modalBackdrop', ...(ngDevMode ? [{ debugName: "modalBackdrop" }] : []));
|
|
2167
|
+
this.modalBackdrop = viewChild('modalBackdrop', ...(ngDevMode ? [{ debugName: "modalBackdrop" }] : /* istanbul ignore next */ []));
|
|
2168
2168
|
/**
|
|
2169
2169
|
* Keyboard event handler for Escape key
|
|
2170
2170
|
*/
|
|
@@ -2184,23 +2184,23 @@ class PshModalComponent {
|
|
|
2184
2184
|
/**
|
|
2185
2185
|
* Computed signal indicating if a custom footer is projected
|
|
2186
2186
|
*/
|
|
2187
|
-
this.hasCustomFooter = computed(() => !!this.customFooter(), ...(ngDevMode ? [{ debugName: "hasCustomFooter" }] : []));
|
|
2187
|
+
this.hasCustomFooter = computed(() => !!this.customFooter(), ...(ngDevMode ? [{ debugName: "hasCustomFooter" }] : /* istanbul ignore next */ []));
|
|
2188
2188
|
/**
|
|
2189
2189
|
* Computed signal for the modal state
|
|
2190
2190
|
*/
|
|
2191
|
-
this.state = computed(() => this.open() ? 'open' : 'closed', ...(ngDevMode ? [{ debugName: "state" }] : []));
|
|
2191
|
+
this.state = computed(() => this.open() ? 'open' : 'closed', ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
|
|
2192
2192
|
/**
|
|
2193
2193
|
* Computed signal for the modal dialog ID for accessibility
|
|
2194
2194
|
*/
|
|
2195
|
-
this.modalDialogId = computed(() => `${this.modalId}-dialog`, ...(ngDevMode ? [{ debugName: "modalDialogId" }] : []));
|
|
2195
|
+
this.modalDialogId = computed(() => `${this.modalId}-dialog`, ...(ngDevMode ? [{ debugName: "modalDialogId" }] : /* istanbul ignore next */ []));
|
|
2196
2196
|
/**
|
|
2197
2197
|
* Computed signal for the modal description ID for accessibility
|
|
2198
2198
|
*/
|
|
2199
|
-
this.modalDescriptionId = computed(() => `${this.modalId}-description`, ...(ngDevMode ? [{ debugName: "modalDescriptionId" }] : []));
|
|
2199
|
+
this.modalDescriptionId = computed(() => `${this.modalId}-description`, ...(ngDevMode ? [{ debugName: "modalDescriptionId" }] : /* istanbul ignore next */ []));
|
|
2200
2200
|
/**
|
|
2201
2201
|
* Computed signal indicating if the screen is mobile-sized
|
|
2202
2202
|
*/
|
|
2203
|
-
this.isMobileScreen = computed(() => this.isMobileSignal(), ...(ngDevMode ? [{ debugName: "isMobileScreen" }] : []));
|
|
2203
|
+
this.isMobileScreen = computed(() => this.isMobileSignal(), ...(ngDevMode ? [{ debugName: "isMobileScreen" }] : /* istanbul ignore next */ []));
|
|
2204
2204
|
effect(() => {
|
|
2205
2205
|
if (this.open()) {
|
|
2206
2206
|
this.onModalOpen();
|
|
@@ -2417,10 +2417,10 @@ class PshModalComponent {
|
|
|
2417
2417
|
this.modalService.unregister(this.modalId);
|
|
2418
2418
|
this.detachModalFromBody();
|
|
2419
2419
|
}
|
|
2420
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
2421
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
2420
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: PshModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2421
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", type: PshModalComponent, isStandalone: true, selector: "psh-modal", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showClose: { classPropertyName: "showClose", publicName: "showClose", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdrop: { classPropertyName: "closeOnBackdrop", publicName: "closeOnBackdrop", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, preventScroll: { classPropertyName: "preventScroll", publicName: "preventScroll", isSignal: true, isRequired: false, transformFunction: null }, showFooter: { classPropertyName: "showFooter", publicName: "showFooter", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, dismissLabel: { classPropertyName: "dismissLabel", publicName: "dismissLabel", isSignal: true, isRequired: false, transformFunction: null }, confirmLabel: { classPropertyName: "confirmLabel", publicName: "confirmLabel", isSignal: true, isRequired: false, transformFunction: null }, cancelLabel: { classPropertyName: "cancelLabel", publicName: "cancelLabel", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, backdropClass: { classPropertyName: "backdropClass", publicName: "backdropClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", closed: "closed", confirmed: "confirmed" }, queries: [{ propertyName: "customFooter", first: true, predicate: ["modalFooter"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "modalBackdrop", first: true, predicate: ["modalBackdrop"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n #modalBackdrop\n [class]=\"'modal-backdrop ' + backdropClass()\"\n [class.open]=\"open()\"\n (click)=\"handleBackdropClick($event)\"\n role=\"dialog\"\n aria-modal=\"true\"\n [attr.aria-hidden]=\"!open()\"\n [attr.aria-labelledby]=\"modalDialogId() + '-title'\"\n [attr.aria-describedby]=\"modalDescriptionId()\"\n [attr.data-state]=\"state()\"\n>\n <div\n [class]=\"'modal-container ' + styleClass()\"\n [class.small]=\"size() === 'small'\"\n [class.medium]=\"size() === 'medium'\"\n [class.large]=\"size() === 'large'\"\n [attr.id]=\"modalDialogId()\"\n role=\"document\"\n >\n <div class=\"modal-content-wrapper\">\n <div class=\"modal-header\">\n <h2 class=\"modal-title\" [attr.id]=\"modalDialogId() + '-title'\">\n <ng-content select=\"[modal-title]\">{{ title() }}</ng-content>\n </h2>\n @if (showClose()) {\n <button\n type=\"button\"\n class=\"modal-close\"\n (click)=\"handleClose()\"\n [attr.aria-label]=\"dismissLabel()\"\n >\n <i class=\"ph ph-x\" aria-hidden=\"true\"></i>\n </button>\n }\n </div>\n\n <div class=\"modal-content\" [attr.id]=\"modalDescriptionId()\">\n <ng-content>\n <p>\n Modal content goes here. You can replace this with your own content.\n </p>\n </ng-content>\n </div>\n\n @if (showFooter() && !hasCustomFooter()) {\n <div class=\"modal-footer\">\n <psh-button\n appearance=\"outline\"\n variant=\"primary\"\n size=\"medium\"\n [fullWidth]=\"isMobileScreen()\"\n (clicked)=\"handleClose()\">\n {{ cancelLabel() }}\n </psh-button>\n <psh-button\n appearance=\"filled\"\n variant=\"primary\"\n size=\"medium\"\n [fullWidth]=\"isMobileScreen()\"\n (clicked)=\"handleConfirm()\">\n {{ confirmLabel() }}\n </psh-button>\n </div>\n } @if (showFooter() && hasCustomFooter()) {\n <div class=\"modal-footer\">\n <!--\n Note: When using a custom footer, buttons should also use [fullWidth]=\"isMobileScreen()\"\n to ensure proper responsive behavior on mobile devices.\n Example:\n <psh-button [fullWidth]=\"isMobileScreen()\" (clicked)=\"action()\">Custom Button</psh-button>\n -->\n <ng-content select=\"[modal-footer]\" #modalFooter></ng-content>\n </div>\n }\n </div>\n </div>\n</div>\n", styles: [":root{--modal-max-width-sm: 25rem;--modal-max-width-md: 37.5rem;--modal-max-width-lg: 50rem;--modal-backdrop-opacity: .6;--modal-backdrop-blur: 4px;--modal-animation-distance: 20px;--modal-animation-scale: .95}.modal-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(var(--surface-900-rgb),var(--modal-backdrop-opacity));-webkit-backdrop-filter:blur(var(--modal-backdrop-blur));backdrop-filter:blur(var(--modal-backdrop-blur));align-items:center;justify-content:center;z-index:var(--z-index-modal-backdrop);pointer-events:none;opacity:0;display:none;transition:opacity var(--animation-duration-default) var(--animation-easing-smooth)}.modal-backdrop.open{opacity:1;pointer-events:all;display:flex}.modal-content-wrapper{display:flex;flex-direction:column;max-height:90vh;min-height:0}.modal-container{background:var(--surface-card);border-radius:var(--border-radius-lg);box-shadow:var(--shadow-lg),0 0 0 1px rgba(var(--primary-color-rgb),.05);max-width:var(--modal-max-width-md);transform:translateY(var(--modal-animation-distance)) scale(var(--modal-animation-scale));transition:transform var(--animation-duration-default) var(--animation-easing-smooth),opacity var(--animation-duration-default) var(--animation-easing-smooth);border:1px solid var(--surface-border)}.modal-backdrop.open .modal-container{transform:translateY(0) scale(1)}.modal-container.small{width:50%;max-width:var(--modal-max-width-sm)}.modal-container.medium{width:70%;max-width:var(--modal-max-width-md)}.modal-container.large{width:90%;max-width:var(--modal-max-width-lg)}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-lg) var(--spacing-xl);border-bottom:1px solid var(--surface-border);background:var(--surface-ground);border-top-left-radius:var(--border-radius-lg);border-top-right-radius:var(--border-radius-lg)}.modal-title{font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold);color:var(--text-color);margin:0;display:flex;align-items:center;gap:var(--spacing-sm)}.modal-close{background:transparent;border:none;color:var(--text-color-secondary);padding:var(--spacing-sm);cursor:pointer;border-radius:var(--border-radius);display:flex;align-items:center;justify-content:center;transition:all var(--animation-duration-fast) var(--animation-easing-smooth);margin:var(--negative-spacing-sm)}.modal-close:hover{background:var(--surface-hover);color:var(--text-color);transform:scale(1.1)}.modal-close:focus-visible{outline:var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);outline-offset:var(--focus-outline-offset)}.modal-close i{font-size:var(--font-size-xl)}.modal-content{padding:var(--spacing-xl);overflow-y:auto;flex-grow:1;min-height:0;color:var(--text-color-secondary);line-height:var(--line-height-relaxed)}.modal-footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--spacing-md);padding:var(--spacing-lg) var(--spacing-xl);border-top:1px solid var(--surface-border);background:var(--surface-ground);border-bottom-left-radius:var(--border-radius-lg);border-bottom-right-radius:var(--border-radius-lg)}@media(max-width:768px){.modal-container{width:95%;margin:var(--spacing-md)}.modal-header{padding:var(--spacing-md) var(--spacing-lg)}.modal-title{font-size:var(--font-size-lg)}.modal-content{padding:var(--spacing-lg)}.modal-footer{padding:var(--spacing-md) var(--spacing-lg);flex-direction:column-reverse;gap:var(--spacing-sm)}}@media(max-width:480px){.modal-container{width:100%;max-height:100vh;margin:0;border-radius:0}.modal-header{padding:var(--spacing-sm) var(--spacing-md);border-top-left-radius:0;border-top-right-radius:0}.modal-title{font-size:var(--font-size-base)}.modal-content{padding:var(--spacing-md);flex:0 1 auto}.modal-footer{padding:var(--spacing-sm) var(--spacing-md);border-bottom-left-radius:0;border-bottom-right-radius:0}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: PshButtonComponent, selector: "psh-button", inputs: ["appearance", "variant", "size", "disabled", "loading", "fullWidth", "iconPosition", "icon", "ariaLabel", "loadingText", "disabledText", "iconOnlyText", "type"], outputs: ["fullWidthChange", "clicked", "disabledClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2422
2422
|
}
|
|
2423
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
2423
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: PshModalComponent, decorators: [{
|
|
2424
2424
|
type: Component,
|
|
2425
2425
|
args: [{ selector: 'psh-modal', imports: [CommonModule, PshButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n #modalBackdrop\n [class]=\"'modal-backdrop ' + backdropClass()\"\n [class.open]=\"open()\"\n (click)=\"handleBackdropClick($event)\"\n role=\"dialog\"\n aria-modal=\"true\"\n [attr.aria-hidden]=\"!open()\"\n [attr.aria-labelledby]=\"modalDialogId() + '-title'\"\n [attr.aria-describedby]=\"modalDescriptionId()\"\n [attr.data-state]=\"state()\"\n>\n <div\n [class]=\"'modal-container ' + styleClass()\"\n [class.small]=\"size() === 'small'\"\n [class.medium]=\"size() === 'medium'\"\n [class.large]=\"size() === 'large'\"\n [attr.id]=\"modalDialogId()\"\n role=\"document\"\n >\n <div class=\"modal-content-wrapper\">\n <div class=\"modal-header\">\n <h2 class=\"modal-title\" [attr.id]=\"modalDialogId() + '-title'\">\n <ng-content select=\"[modal-title]\">{{ title() }}</ng-content>\n </h2>\n @if (showClose()) {\n <button\n type=\"button\"\n class=\"modal-close\"\n (click)=\"handleClose()\"\n [attr.aria-label]=\"dismissLabel()\"\n >\n <i class=\"ph ph-x\" aria-hidden=\"true\"></i>\n </button>\n }\n </div>\n\n <div class=\"modal-content\" [attr.id]=\"modalDescriptionId()\">\n <ng-content>\n <p>\n Modal content goes here. You can replace this with your own content.\n </p>\n </ng-content>\n </div>\n\n @if (showFooter() && !hasCustomFooter()) {\n <div class=\"modal-footer\">\n <psh-button\n appearance=\"outline\"\n variant=\"primary\"\n size=\"medium\"\n [fullWidth]=\"isMobileScreen()\"\n (clicked)=\"handleClose()\">\n {{ cancelLabel() }}\n </psh-button>\n <psh-button\n appearance=\"filled\"\n variant=\"primary\"\n size=\"medium\"\n [fullWidth]=\"isMobileScreen()\"\n (clicked)=\"handleConfirm()\">\n {{ confirmLabel() }}\n </psh-button>\n </div>\n } @if (showFooter() && hasCustomFooter()) {\n <div class=\"modal-footer\">\n <!--\n Note: When using a custom footer, buttons should also use [fullWidth]=\"isMobileScreen()\"\n to ensure proper responsive behavior on mobile devices.\n Example:\n <psh-button [fullWidth]=\"isMobileScreen()\" (clicked)=\"action()\">Custom Button</psh-button>\n -->\n <ng-content select=\"[modal-footer]\" #modalFooter></ng-content>\n </div>\n }\n </div>\n </div>\n</div>\n", styles: [":root{--modal-max-width-sm: 25rem;--modal-max-width-md: 37.5rem;--modal-max-width-lg: 50rem;--modal-backdrop-opacity: .6;--modal-backdrop-blur: 4px;--modal-animation-distance: 20px;--modal-animation-scale: .95}.modal-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(var(--surface-900-rgb),var(--modal-backdrop-opacity));-webkit-backdrop-filter:blur(var(--modal-backdrop-blur));backdrop-filter:blur(var(--modal-backdrop-blur));align-items:center;justify-content:center;z-index:var(--z-index-modal-backdrop);pointer-events:none;opacity:0;display:none;transition:opacity var(--animation-duration-default) var(--animation-easing-smooth)}.modal-backdrop.open{opacity:1;pointer-events:all;display:flex}.modal-content-wrapper{display:flex;flex-direction:column;max-height:90vh;min-height:0}.modal-container{background:var(--surface-card);border-radius:var(--border-radius-lg);box-shadow:var(--shadow-lg),0 0 0 1px rgba(var(--primary-color-rgb),.05);max-width:var(--modal-max-width-md);transform:translateY(var(--modal-animation-distance)) scale(var(--modal-animation-scale));transition:transform var(--animation-duration-default) var(--animation-easing-smooth),opacity var(--animation-duration-default) var(--animation-easing-smooth);border:1px solid var(--surface-border)}.modal-backdrop.open .modal-container{transform:translateY(0) scale(1)}.modal-container.small{width:50%;max-width:var(--modal-max-width-sm)}.modal-container.medium{width:70%;max-width:var(--modal-max-width-md)}.modal-container.large{width:90%;max-width:var(--modal-max-width-lg)}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-lg) var(--spacing-xl);border-bottom:1px solid var(--surface-border);background:var(--surface-ground);border-top-left-radius:var(--border-radius-lg);border-top-right-radius:var(--border-radius-lg)}.modal-title{font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold);color:var(--text-color);margin:0;display:flex;align-items:center;gap:var(--spacing-sm)}.modal-close{background:transparent;border:none;color:var(--text-color-secondary);padding:var(--spacing-sm);cursor:pointer;border-radius:var(--border-radius);display:flex;align-items:center;justify-content:center;transition:all var(--animation-duration-fast) var(--animation-easing-smooth);margin:var(--negative-spacing-sm)}.modal-close:hover{background:var(--surface-hover);color:var(--text-color);transform:scale(1.1)}.modal-close:focus-visible{outline:var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);outline-offset:var(--focus-outline-offset)}.modal-close i{font-size:var(--font-size-xl)}.modal-content{padding:var(--spacing-xl);overflow-y:auto;flex-grow:1;min-height:0;color:var(--text-color-secondary);line-height:var(--line-height-relaxed)}.modal-footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--spacing-md);padding:var(--spacing-lg) var(--spacing-xl);border-top:1px solid var(--surface-border);background:var(--surface-ground);border-bottom-left-radius:var(--border-radius-lg);border-bottom-right-radius:var(--border-radius-lg)}@media(max-width:768px){.modal-container{width:95%;margin:var(--spacing-md)}.modal-header{padding:var(--spacing-md) var(--spacing-lg)}.modal-title{font-size:var(--font-size-lg)}.modal-content{padding:var(--spacing-lg)}.modal-footer{padding:var(--spacing-md) var(--spacing-lg);flex-direction:column-reverse;gap:var(--spacing-sm)}}@media(max-width:480px){.modal-container{width:100%;max-height:100vh;margin:0;border-radius:0}.modal-header{padding:var(--spacing-sm) var(--spacing-md);border-top-left-radius:0;border-top-right-radius:0}.modal-title{font-size:var(--font-size-base)}.modal-content{padding:var(--spacing-md);flex:0 1 auto}.modal-footer{padding:var(--spacing-sm) var(--spacing-md);border-bottom-left-radius:0;border-bottom-right-radius:0}}\n"] }]
|
|
2426
2426
|
}], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], showClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClose", required: false }] }], closeOnBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdrop", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], preventScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "preventScroll", required: false }] }], showFooter: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFooter", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], dismissLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissLabel", required: false }] }], confirmLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirmLabel", required: false }] }], cancelLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelLabel", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], backdropClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "backdropClass", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], confirmed: [{ type: i0.Output, args: ["confirmed"] }], customFooter: [{ type: i0.ContentChild, args: ['modalFooter', { isSignal: true }] }], modalBackdrop: [{ type: i0.ViewChild, args: ['modalBackdrop', { isSignal: true }] }] } });
|
|
@@ -2441,44 +2441,44 @@ class PshPaginationComponent {
|
|
|
2441
2441
|
constructor() {
|
|
2442
2442
|
this.config = inject(PAGINATION_CONFIG);
|
|
2443
2443
|
this.uniqueId = `pagination-${++PshPaginationComponent.idCounter}`;
|
|
2444
|
-
this.currentPage = model(1, ...(ngDevMode ? [{ debugName: "currentPage" }] : []));
|
|
2445
|
-
this.totalPages = model(1, ...(ngDevMode ? [{ debugName: "totalPages" }] : []));
|
|
2446
|
-
this.itemsPerPage = model(10, ...(ngDevMode ? [{ debugName: "itemsPerPage" }] : []));
|
|
2447
|
-
this.size = input(this.config.size ?? 'medium', { ...(ngDevMode ? { debugName: "size" } : {}), transform: (value) => {
|
|
2444
|
+
this.currentPage = model(1, ...(ngDevMode ? [{ debugName: "currentPage" }] : /* istanbul ignore next */ []));
|
|
2445
|
+
this.totalPages = model(1, ...(ngDevMode ? [{ debugName: "totalPages" }] : /* istanbul ignore next */ []));
|
|
2446
|
+
this.itemsPerPage = model(10, ...(ngDevMode ? [{ debugName: "itemsPerPage" }] : /* istanbul ignore next */ []));
|
|
2447
|
+
this.size = input(this.config.size ?? 'medium', { ...(ngDevMode ? { debugName: "size" } : /* istanbul ignore next */ {}), transform: (value) => {
|
|
2448
2448
|
if (!['small', 'medium', 'large'].includes(value)) {
|
|
2449
2449
|
console.warn(`[psh-pagination] Invalid size "${value}", falling back to "medium"`);
|
|
2450
2450
|
return 'medium';
|
|
2451
2451
|
}
|
|
2452
2452
|
return value;
|
|
2453
2453
|
} });
|
|
2454
|
-
this.variant = input(this.config.variant ?? 'default', { ...(ngDevMode ? { debugName: "variant" } : {}), transform: (value) => {
|
|
2454
|
+
this.variant = input(this.config.variant ?? 'default', { ...(ngDevMode ? { debugName: "variant" } : /* istanbul ignore next */ {}), transform: (value) => {
|
|
2455
2455
|
if (!['default', 'outline'].includes(value)) {
|
|
2456
2456
|
console.warn(`[psh-pagination] Invalid variant "${value}", falling back to "default"`);
|
|
2457
2457
|
return 'default';
|
|
2458
2458
|
}
|
|
2459
2459
|
return value;
|
|
2460
2460
|
} });
|
|
2461
|
-
this.showFirstLast = input(this.config.showFirstLast ?? true, ...(ngDevMode ? [{ debugName: "showFirstLast" }] : []));
|
|
2462
|
-
this.showPrevNext = input(this.config.showPrevNext ?? true, ...(ngDevMode ? [{ debugName: "showPrevNext" }] : []));
|
|
2463
|
-
this.maxVisiblePages = input(this.config.maxVisiblePages ?? 5, ...(ngDevMode ? [{ debugName: "maxVisiblePages" }] : []));
|
|
2464
|
-
this.showItemsPerPage = input(this.config.showItemsPerPage ?? false, ...(ngDevMode ? [{ debugName: "showItemsPerPage" }] : []));
|
|
2465
|
-
this.itemsPerPageOptions = input([5, 10, 25, 50], ...(ngDevMode ? [{ debugName: "itemsPerPageOptions" }] : []));
|
|
2466
|
-
this.firstLabel = input('First', ...(ngDevMode ? [{ debugName: "firstLabel" }] : []));
|
|
2467
|
-
this.previousLabel = input('Previous', ...(ngDevMode ? [{ debugName: "previousLabel" }] : []));
|
|
2468
|
-
this.nextLabel = input('Next', ...(ngDevMode ? [{ debugName: "nextLabel" }] : []));
|
|
2469
|
-
this.lastLabel = input('Last', ...(ngDevMode ? [{ debugName: "lastLabel" }] : []));
|
|
2470
|
-
this.pageLabel = input('Page', ...(ngDevMode ? [{ debugName: "pageLabel" }] : []));
|
|
2471
|
-
this.itemsLabel = input('items', ...(ngDevMode ? [{ debugName: "itemsLabel" }] : []));
|
|
2472
|
-
this.itemsPerPageLabel = input('Items per page', ...(ngDevMode ? [{ debugName: "itemsPerPageLabel" }] : []));
|
|
2473
|
-
this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
|
|
2474
|
-
this.ariaLabel = input('Pagination navigation', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
|
|
2461
|
+
this.showFirstLast = input(this.config.showFirstLast ?? true, ...(ngDevMode ? [{ debugName: "showFirstLast" }] : /* istanbul ignore next */ []));
|
|
2462
|
+
this.showPrevNext = input(this.config.showPrevNext ?? true, ...(ngDevMode ? [{ debugName: "showPrevNext" }] : /* istanbul ignore next */ []));
|
|
2463
|
+
this.maxVisiblePages = input(this.config.maxVisiblePages ?? 5, ...(ngDevMode ? [{ debugName: "maxVisiblePages" }] : /* istanbul ignore next */ []));
|
|
2464
|
+
this.showItemsPerPage = input(this.config.showItemsPerPage ?? false, ...(ngDevMode ? [{ debugName: "showItemsPerPage" }] : /* istanbul ignore next */ []));
|
|
2465
|
+
this.itemsPerPageOptions = input([5, 10, 25, 50], ...(ngDevMode ? [{ debugName: "itemsPerPageOptions" }] : /* istanbul ignore next */ []));
|
|
2466
|
+
this.firstLabel = input('First', ...(ngDevMode ? [{ debugName: "firstLabel" }] : /* istanbul ignore next */ []));
|
|
2467
|
+
this.previousLabel = input('Previous', ...(ngDevMode ? [{ debugName: "previousLabel" }] : /* istanbul ignore next */ []));
|
|
2468
|
+
this.nextLabel = input('Next', ...(ngDevMode ? [{ debugName: "nextLabel" }] : /* istanbul ignore next */ []));
|
|
2469
|
+
this.lastLabel = input('Last', ...(ngDevMode ? [{ debugName: "lastLabel" }] : /* istanbul ignore next */ []));
|
|
2470
|
+
this.pageLabel = input('Page', ...(ngDevMode ? [{ debugName: "pageLabel" }] : /* istanbul ignore next */ []));
|
|
2471
|
+
this.itemsLabel = input('items', ...(ngDevMode ? [{ debugName: "itemsLabel" }] : /* istanbul ignore next */ []));
|
|
2472
|
+
this.itemsPerPageLabel = input('Items per page', ...(ngDevMode ? [{ debugName: "itemsPerPageLabel" }] : /* istanbul ignore next */ []));
|
|
2473
|
+
this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : /* istanbul ignore next */ []));
|
|
2474
|
+
this.ariaLabel = input('Pagination navigation', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
2475
2475
|
this.pageChange = output();
|
|
2476
2476
|
this.itemsPerPageChange = output();
|
|
2477
2477
|
this.navigationError = output();
|
|
2478
2478
|
this.navigationId = computed(() => {
|
|
2479
2479
|
const customId = this.id();
|
|
2480
2480
|
return customId || this.uniqueId;
|
|
2481
|
-
}, ...(ngDevMode ? [{ debugName: "navigationId" }] : []));
|
|
2481
|
+
}, ...(ngDevMode ? [{ debugName: "navigationId" }] : /* istanbul ignore next */ []));
|
|
2482
2482
|
this.pages = computed(() => {
|
|
2483
2483
|
const pages = [];
|
|
2484
2484
|
const halfVisible = Math.floor(this.maxVisiblePages() / 2);
|
|
@@ -2491,15 +2491,15 @@ class PshPaginationComponent {
|
|
|
2491
2491
|
pages.push(i);
|
|
2492
2492
|
}
|
|
2493
2493
|
return pages;
|
|
2494
|
-
}, ...(ngDevMode ? [{ debugName: "pages" }] : []));
|
|
2495
|
-
this.state = computed(() => this.getState(), ...(ngDevMode ? [{ debugName: "state" }] : []));
|
|
2496
|
-
this.canGoNext = computed(() => this.currentPage() < this.totalPages(), ...(ngDevMode ? [{ debugName: "canGoNext" }] : []));
|
|
2497
|
-
this.canGoPrevious = computed(() => this.currentPage() > 1, ...(ngDevMode ? [{ debugName: "canGoPrevious" }] : []));
|
|
2498
|
-
this.isFirstPage = computed(() => this.currentPage() === 1, ...(ngDevMode ? [{ debugName: "isFirstPage" }] : []));
|
|
2499
|
-
this.isLastPage = computed(() => this.currentPage() === this.totalPages(), ...(ngDevMode ? [{ debugName: "isLastPage" }] : []));
|
|
2494
|
+
}, ...(ngDevMode ? [{ debugName: "pages" }] : /* istanbul ignore next */ []));
|
|
2495
|
+
this.state = computed(() => this.getState(), ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
|
|
2496
|
+
this.canGoNext = computed(() => this.currentPage() < this.totalPages(), ...(ngDevMode ? [{ debugName: "canGoNext" }] : /* istanbul ignore next */ []));
|
|
2497
|
+
this.canGoPrevious = computed(() => this.currentPage() > 1, ...(ngDevMode ? [{ debugName: "canGoPrevious" }] : /* istanbul ignore next */ []));
|
|
2498
|
+
this.isFirstPage = computed(() => this.currentPage() === 1, ...(ngDevMode ? [{ debugName: "isFirstPage" }] : /* istanbul ignore next */ []));
|
|
2499
|
+
this.isLastPage = computed(() => this.currentPage() === this.totalPages(), ...(ngDevMode ? [{ debugName: "isLastPage" }] : /* istanbul ignore next */ []));
|
|
2500
2500
|
this.currentPageAnnouncement = computed(() => {
|
|
2501
2501
|
return `Page ${this.currentPage()} sur ${this.totalPages()}`;
|
|
2502
|
-
}, ...(ngDevMode ? [{ debugName: "currentPageAnnouncement" }] : []));
|
|
2502
|
+
}, ...(ngDevMode ? [{ debugName: "currentPageAnnouncement" }] : /* istanbul ignore next */ []));
|
|
2503
2503
|
effect(() => {
|
|
2504
2504
|
const total = this.totalPages();
|
|
2505
2505
|
if (total < 1 || !Number.isFinite(total)) {
|
|
@@ -2586,10 +2586,10 @@ class PshPaginationComponent {
|
|
|
2586
2586
|
break;
|
|
2587
2587
|
}
|
|
2588
2588
|
}
|
|
2589
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
2590
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: PshPaginationComponent, isStandalone: true, selector: "psh-pagination", inputs: { currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: false, transformFunction: null }, totalPages: { classPropertyName: "totalPages", publicName: "totalPages", isSignal: true, isRequired: false, transformFunction: null }, itemsPerPage: { classPropertyName: "itemsPerPage", publicName: "itemsPerPage", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, showFirstLast: { classPropertyName: "showFirstLast", publicName: "showFirstLast", isSignal: true, isRequired: false, transformFunction: null }, showPrevNext: { classPropertyName: "showPrevNext", publicName: "showPrevNext", isSignal: true, isRequired: false, transformFunction: null }, maxVisiblePages: { classPropertyName: "maxVisiblePages", publicName: "maxVisiblePages", isSignal: true, isRequired: false, transformFunction: null }, showItemsPerPage: { classPropertyName: "showItemsPerPage", publicName: "showItemsPerPage", isSignal: true, isRequired: false, transformFunction: null }, itemsPerPageOptions: { classPropertyName: "itemsPerPageOptions", publicName: "itemsPerPageOptions", isSignal: true, isRequired: false, transformFunction: null }, firstLabel: { classPropertyName: "firstLabel", publicName: "firstLabel", isSignal: true, isRequired: false, transformFunction: null }, previousLabel: { classPropertyName: "previousLabel", publicName: "previousLabel", isSignal: true, isRequired: false, transformFunction: null }, nextLabel: { classPropertyName: "nextLabel", publicName: "nextLabel", isSignal: true, isRequired: false, transformFunction: null }, lastLabel: { classPropertyName: "lastLabel", publicName: "lastLabel", isSignal: true, isRequired: false, transformFunction: null }, pageLabel: { classPropertyName: "pageLabel", publicName: "pageLabel", isSignal: true, isRequired: false, transformFunction: null }, itemsLabel: { classPropertyName: "itemsLabel", publicName: "itemsLabel", isSignal: true, isRequired: false, transformFunction: null }, itemsPerPageLabel: { classPropertyName: "itemsPerPageLabel", publicName: "itemsPerPageLabel", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { currentPage: "currentPageChange", totalPages: "totalPagesChange", itemsPerPage: "itemsPerPageChange", pageChange: "pageChange", itemsPerPageChange: "itemsPerPageChange", navigationError: "navigationError" }, ngImport: i0, template: "<nav\n class=\"pagination\"\n [class.small]=\"size() === 'small'\"\n [class.large]=\"size() === 'large'\"\n [class.outline]=\"variant() === 'outline'\"\n role=\"navigation\"\n [attr.id]=\"navigationId()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.data-state]=\"state()\"\n (keydown)=\"onKeydown($event)\"\n>\n @if (showItemsPerPage()) {\n <div class=\"items-per-page\">\n <label [attr.for]=\"navigationId() + '-items-select'\" class=\"items-per-page-label\">\n {{ itemsPerPageLabel() }}\n </label>\n <select\n [attr.id]=\"navigationId() + '-items-select'\"\n [value]=\"itemsPerPage()\"\n (change)=\"onItemsPerPageChange($event)\"\n [attr.aria-label]=\"itemsPerPageLabel()\"\n >\n @for (option of itemsPerPageOptions(); track option) {\n <option [value]=\"option\">\n {{ option }} {{ itemsLabel() }}\n </option>\n }\n </select>\n </div>\n }\n\n @if (showFirstLast()) {\n <button\n class=\"page-button\"\n [class.disabled]=\"isFirstPage()\"\n (click)=\"goToFirstPage()\"\n [attr.aria-label]=\"firstLabel()\"\n [disabled]=\"isFirstPage()\"\n type=\"button\"\n >\n <i class=\"ph ph-caret-double-left\" aria-hidden=\"true\"></i>\n </button>\n }\n\n @if (showPrevNext()) {\n <button\n class=\"page-button\"\n [class.disabled]=\"!canGoPrevious()\"\n (click)=\"goToPreviousPage()\"\n [attr.aria-label]=\"previousLabel()\"\n [disabled]=\"!canGoPrevious()\"\n type=\"button\"\n >\n <i class=\"ph ph-caret-left\" aria-hidden=\"true\"></i>\n </button>\n }\n\n @for (page of pages(); track page) {\n <button\n class=\"page-button\"\n [class.active]=\"page === currentPage()\"\n (click)=\"goToPage(page)\"\n [attr.aria-current]=\"page === currentPage() ? 'page' : null\"\n [attr.aria-label]=\"pageLabel() + ' ' + page\"\n type=\"button\"\n >\n {{ page }}\n </button>\n }\n\n @if (showPrevNext()) {\n <button\n class=\"page-button\"\n [class.disabled]=\"!canGoNext()\"\n (click)=\"goToNextPage()\"\n [attr.aria-label]=\"nextLabel()\"\n [disabled]=\"!canGoNext()\"\n type=\"button\"\n >\n <i class=\"ph ph-caret-right\" aria-hidden=\"true\"></i>\n </button>\n }\n\n @if (showFirstLast()) {\n <button\n class=\"page-button\"\n [class.disabled]=\"isLastPage()\"\n (click)=\"goToLastPage()\"\n [attr.aria-label]=\"lastLabel()\"\n [disabled]=\"isLastPage()\"\n type=\"button\"\n >\n <i class=\"ph ph-caret-double-right\" aria-hidden=\"true\"></i>\n </button>\n }\n\n <div class=\"sr-only\" aria-live=\"polite\" aria-atomic=\"true\">\n {{ currentPageAnnouncement() }}\n </div>\n</nav>", styles: [".pagination{display:flex;align-items:center;flex-wrap:wrap;gap:var(--spacing-xs);padding:var(--spacing-sm);border-radius:var(--border-radius);background:var(--surface-card);width:100%;max-width:100%;overflow-x:auto;overflow-y:hidden}.pagination:focus-within{outline:var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);outline-offset:var(--focus-outline-offset)}.pagination.outline{background:transparent;border:var(--border-width-1) solid var(--surface-border)}.items-per-page{display:flex;align-items:center;gap:var(--spacing-xs);margin-right:var(--spacing-md);flex-shrink:0}.items-per-page-label{font-size:var(--font-size-sm);color:var(--text-color-secondary);white-space:nowrap;flex-shrink:0}.items-per-page select{padding:var(--spacing-xs) var(--spacing-sm);border:var(--border-width-1) solid var(--surface-border);border-radius:var(--border-radius);background:var(--surface-card);color:var(--text-color);font-family:inherit;font-size:var(--font-size-base);cursor:pointer;transition:all var(--animation-duration-fast) var(--animation-easing-default)}.items-per-page select:hover{border-color:var(--primary-color)}.items-per-page select:focus-visible{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 var(--focus-ring-width) var(--focus-ring-color)}.small .items-per-page select{padding:calc(var(--spacing-xs) * .75) var(--spacing-sm);font-size:var(--font-size-sm)}.large .items-per-page select{padding:var(--spacing-sm) var(--spacing-md);font-size:var(--font-size-lg)}.page-button{display:inline-flex;align-items:center;justify-content:center;min-width:var(--size-9);height:var(--size-9);padding:var(--spacing-xs);border:none;border-radius:var(--border-radius);background:var(--surface-ground);color:var(--text-color);font-family:inherit;font-size:var(--font-size-base);cursor:pointer;transition:all var(--animation-duration-fast) var(--animation-easing-default);flex-shrink:0}.page-button:focus-visible{outline:var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);outline-offset:var(--focus-outline-offset)}.page-button:hover:not(.disabled):not(.active){background:var(--surface-hover)}.page-button.active{background:var(--primary-gradient);color:var(--primary-color-text)}.page-button.disabled{opacity:var(--opacity-disabled);cursor:not-allowed}.page-button i{font-size:var(--icon-size-sm)}.pagination.outline .page-button{background:transparent;border:var(--border-width-1) solid var(--surface-border)}.pagination.outline .page-button:hover:not(.disabled):not(.active){background:var(--surface-hover);border-color:var(--primary-color)}.pagination.outline .page-button.active{background:var(--primary-gradient);color:var(--primary-color-text);border-color:var(--primary-color)}.pagination.small .page-button{min-width:var(--size-8);height:var(--size-8);font-size:var(--font-size-sm)}.pagination.small .page-button i{font-size:var(--icon-size-xs)}.pagination.large .page-button{min-width:var(--size-11);height:var(--size-11);font-size:var(--font-size-lg)}.pagination.large .page-button i{font-size:var(--icon-size-md)}@media(max-width:768px){.pagination{justify-content:center;gap:var(--spacing-2xs, 4px);padding:var(--spacing-sm)}.items-per-page{margin-right:0;margin-bottom:var(--spacing-sm);width:100%;justify-content:center;flex-wrap:wrap}.items-per-page-label{width:100%;text-align:center;margin-bottom:var(--spacing-xs)}.items-per-page select{width:auto;min-width:140px;max-width:180px}.page-button{min-width:var(--size-8);height:var(--size-8);font-size:var(--font-size-sm)}.page-button i{font-size:var(--icon-size-xs)}}@media(max-width:480px){.pagination{padding:var(--spacing-xs);gap:2px}.page-button{min-width:var(--size-7, 28px);height:var(--size-7, 28px);font-size:var(--font-size-xs);padding:2px}.page-button i{font-size:var(--icon-size-xs)}.items-per-page{margin-bottom:var(--spacing-xs)}.items-per-page-label{font-size:var(--font-size-xs)}.items-per-page select{font-size:var(--font-size-sm);padding:var(--spacing-xs)}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2589
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: PshPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2590
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", type: PshPaginationComponent, isStandalone: true, selector: "psh-pagination", inputs: { currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: false, transformFunction: null }, totalPages: { classPropertyName: "totalPages", publicName: "totalPages", isSignal: true, isRequired: false, transformFunction: null }, itemsPerPage: { classPropertyName: "itemsPerPage", publicName: "itemsPerPage", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, showFirstLast: { classPropertyName: "showFirstLast", publicName: "showFirstLast", isSignal: true, isRequired: false, transformFunction: null }, showPrevNext: { classPropertyName: "showPrevNext", publicName: "showPrevNext", isSignal: true, isRequired: false, transformFunction: null }, maxVisiblePages: { classPropertyName: "maxVisiblePages", publicName: "maxVisiblePages", isSignal: true, isRequired: false, transformFunction: null }, showItemsPerPage: { classPropertyName: "showItemsPerPage", publicName: "showItemsPerPage", isSignal: true, isRequired: false, transformFunction: null }, itemsPerPageOptions: { classPropertyName: "itemsPerPageOptions", publicName: "itemsPerPageOptions", isSignal: true, isRequired: false, transformFunction: null }, firstLabel: { classPropertyName: "firstLabel", publicName: "firstLabel", isSignal: true, isRequired: false, transformFunction: null }, previousLabel: { classPropertyName: "previousLabel", publicName: "previousLabel", isSignal: true, isRequired: false, transformFunction: null }, nextLabel: { classPropertyName: "nextLabel", publicName: "nextLabel", isSignal: true, isRequired: false, transformFunction: null }, lastLabel: { classPropertyName: "lastLabel", publicName: "lastLabel", isSignal: true, isRequired: false, transformFunction: null }, pageLabel: { classPropertyName: "pageLabel", publicName: "pageLabel", isSignal: true, isRequired: false, transformFunction: null }, itemsLabel: { classPropertyName: "itemsLabel", publicName: "itemsLabel", isSignal: true, isRequired: false, transformFunction: null }, itemsPerPageLabel: { classPropertyName: "itemsPerPageLabel", publicName: "itemsPerPageLabel", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { currentPage: "currentPageChange", totalPages: "totalPagesChange", itemsPerPage: "itemsPerPageChange", pageChange: "pageChange", itemsPerPageChange: "itemsPerPageChange", navigationError: "navigationError" }, ngImport: i0, template: "<nav\n class=\"pagination\"\n [class.small]=\"size() === 'small'\"\n [class.large]=\"size() === 'large'\"\n [class.outline]=\"variant() === 'outline'\"\n role=\"navigation\"\n [attr.id]=\"navigationId()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.data-state]=\"state()\"\n (keydown)=\"onKeydown($event)\"\n>\n @if (showItemsPerPage()) {\n <div class=\"items-per-page\">\n <label [attr.for]=\"navigationId() + '-items-select'\" class=\"items-per-page-label\">\n {{ itemsPerPageLabel() }}\n </label>\n <select\n [attr.id]=\"navigationId() + '-items-select'\"\n [value]=\"itemsPerPage()\"\n (change)=\"onItemsPerPageChange($event)\"\n [attr.aria-label]=\"itemsPerPageLabel()\"\n >\n @for (option of itemsPerPageOptions(); track option) {\n <option [value]=\"option\">\n {{ option }} {{ itemsLabel() }}\n </option>\n }\n </select>\n </div>\n }\n\n @if (showFirstLast()) {\n <button\n class=\"page-button\"\n [class.disabled]=\"isFirstPage()\"\n (click)=\"goToFirstPage()\"\n [attr.aria-label]=\"firstLabel()\"\n [disabled]=\"isFirstPage()\"\n type=\"button\"\n >\n <i class=\"ph ph-caret-double-left\" aria-hidden=\"true\"></i>\n </button>\n }\n\n @if (showPrevNext()) {\n <button\n class=\"page-button\"\n [class.disabled]=\"!canGoPrevious()\"\n (click)=\"goToPreviousPage()\"\n [attr.aria-label]=\"previousLabel()\"\n [disabled]=\"!canGoPrevious()\"\n type=\"button\"\n >\n <i class=\"ph ph-caret-left\" aria-hidden=\"true\"></i>\n </button>\n }\n\n @for (page of pages(); track page) {\n <button\n class=\"page-button\"\n [class.active]=\"page === currentPage()\"\n (click)=\"goToPage(page)\"\n [attr.aria-current]=\"page === currentPage() ? 'page' : null\"\n [attr.aria-label]=\"pageLabel() + ' ' + page\"\n type=\"button\"\n >\n {{ page }}\n </button>\n }\n\n @if (showPrevNext()) {\n <button\n class=\"page-button\"\n [class.disabled]=\"!canGoNext()\"\n (click)=\"goToNextPage()\"\n [attr.aria-label]=\"nextLabel()\"\n [disabled]=\"!canGoNext()\"\n type=\"button\"\n >\n <i class=\"ph ph-caret-right\" aria-hidden=\"true\"></i>\n </button>\n }\n\n @if (showFirstLast()) {\n <button\n class=\"page-button\"\n [class.disabled]=\"isLastPage()\"\n (click)=\"goToLastPage()\"\n [attr.aria-label]=\"lastLabel()\"\n [disabled]=\"isLastPage()\"\n type=\"button\"\n >\n <i class=\"ph ph-caret-double-right\" aria-hidden=\"true\"></i>\n </button>\n }\n\n <div class=\"sr-only\" aria-live=\"polite\" aria-atomic=\"true\">\n {{ currentPageAnnouncement() }}\n </div>\n</nav>", styles: [".pagination{display:flex;align-items:center;flex-wrap:wrap;gap:var(--spacing-xs);padding:var(--spacing-sm);border-radius:var(--border-radius);background:var(--surface-card);width:100%;max-width:100%;overflow-x:auto;overflow-y:hidden}.pagination:focus-within{outline:var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);outline-offset:var(--focus-outline-offset)}.pagination.outline{background:transparent;border:var(--border-width-1) solid var(--surface-border)}.items-per-page{display:flex;align-items:center;gap:var(--spacing-xs);margin-right:var(--spacing-md);flex-shrink:0}.items-per-page-label{font-size:var(--font-size-sm);color:var(--text-color-secondary);white-space:nowrap;flex-shrink:0}.items-per-page select{padding:var(--spacing-xs) var(--spacing-sm);border:var(--border-width-1) solid var(--surface-border);border-radius:var(--border-radius);background:var(--surface-card);color:var(--text-color);font-family:inherit;font-size:var(--font-size-base);cursor:pointer;transition:all var(--animation-duration-fast) var(--animation-easing-default)}.items-per-page select:hover{border-color:var(--primary-color)}.items-per-page select:focus-visible{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 var(--focus-ring-width) var(--focus-ring-color)}.small .items-per-page select{padding:calc(var(--spacing-xs) * .75) var(--spacing-sm);font-size:var(--font-size-sm)}.large .items-per-page select{padding:var(--spacing-sm) var(--spacing-md);font-size:var(--font-size-lg)}.page-button{display:inline-flex;align-items:center;justify-content:center;min-width:var(--size-9);height:var(--size-9);padding:var(--spacing-xs);border:none;border-radius:var(--border-radius);background:var(--surface-ground);color:var(--text-color);font-family:inherit;font-size:var(--font-size-base);cursor:pointer;transition:all var(--animation-duration-fast) var(--animation-easing-default);flex-shrink:0}.page-button:focus-visible{outline:var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);outline-offset:var(--focus-outline-offset)}.page-button:hover:not(.disabled):not(.active){background:var(--surface-hover)}.page-button.active{background:var(--primary-gradient);color:var(--primary-color-text)}.page-button.disabled{opacity:var(--opacity-disabled);cursor:not-allowed}.page-button i{font-size:var(--icon-size-sm)}.pagination.outline .page-button{background:transparent;border:var(--border-width-1) solid var(--surface-border)}.pagination.outline .page-button:hover:not(.disabled):not(.active){background:var(--surface-hover);border-color:var(--primary-color)}.pagination.outline .page-button.active{background:var(--primary-gradient);color:var(--primary-color-text);border-color:var(--primary-color)}.pagination.small .page-button{min-width:var(--size-8);height:var(--size-8);font-size:var(--font-size-sm)}.pagination.small .page-button i{font-size:var(--icon-size-xs)}.pagination.large .page-button{min-width:var(--size-11);height:var(--size-11);font-size:var(--font-size-lg)}.pagination.large .page-button i{font-size:var(--icon-size-md)}@media(max-width:768px){.pagination{justify-content:center;gap:var(--spacing-2xs, 4px);padding:var(--spacing-sm)}.items-per-page{margin-right:0;margin-bottom:var(--spacing-sm);width:100%;justify-content:center;flex-wrap:wrap}.items-per-page-label{width:100%;text-align:center;margin-bottom:var(--spacing-xs)}.items-per-page select{width:auto;min-width:140px;max-width:180px}.page-button{min-width:var(--size-8);height:var(--size-8);font-size:var(--font-size-sm)}.page-button i{font-size:var(--icon-size-xs)}}@media(max-width:480px){.pagination{padding:var(--spacing-xs);gap:2px}.page-button{min-width:var(--size-7, 28px);height:var(--size-7, 28px);font-size:var(--font-size-xs);padding:2px}.page-button i{font-size:var(--icon-size-xs)}.items-per-page{margin-bottom:var(--spacing-xs)}.items-per-page-label{font-size:var(--font-size-xs)}.items-per-page select{font-size:var(--font-size-sm);padding:var(--spacing-xs)}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2591
2591
|
}
|
|
2592
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
2592
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: PshPaginationComponent, decorators: [{
|
|
2593
2593
|
type: Component,
|
|
2594
2594
|
args: [{ selector: 'psh-pagination', imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav\n class=\"pagination\"\n [class.small]=\"size() === 'small'\"\n [class.large]=\"size() === 'large'\"\n [class.outline]=\"variant() === 'outline'\"\n role=\"navigation\"\n [attr.id]=\"navigationId()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.data-state]=\"state()\"\n (keydown)=\"onKeydown($event)\"\n>\n @if (showItemsPerPage()) {\n <div class=\"items-per-page\">\n <label [attr.for]=\"navigationId() + '-items-select'\" class=\"items-per-page-label\">\n {{ itemsPerPageLabel() }}\n </label>\n <select\n [attr.id]=\"navigationId() + '-items-select'\"\n [value]=\"itemsPerPage()\"\n (change)=\"onItemsPerPageChange($event)\"\n [attr.aria-label]=\"itemsPerPageLabel()\"\n >\n @for (option of itemsPerPageOptions(); track option) {\n <option [value]=\"option\">\n {{ option }} {{ itemsLabel() }}\n </option>\n }\n </select>\n </div>\n }\n\n @if (showFirstLast()) {\n <button\n class=\"page-button\"\n [class.disabled]=\"isFirstPage()\"\n (click)=\"goToFirstPage()\"\n [attr.aria-label]=\"firstLabel()\"\n [disabled]=\"isFirstPage()\"\n type=\"button\"\n >\n <i class=\"ph ph-caret-double-left\" aria-hidden=\"true\"></i>\n </button>\n }\n\n @if (showPrevNext()) {\n <button\n class=\"page-button\"\n [class.disabled]=\"!canGoPrevious()\"\n (click)=\"goToPreviousPage()\"\n [attr.aria-label]=\"previousLabel()\"\n [disabled]=\"!canGoPrevious()\"\n type=\"button\"\n >\n <i class=\"ph ph-caret-left\" aria-hidden=\"true\"></i>\n </button>\n }\n\n @for (page of pages(); track page) {\n <button\n class=\"page-button\"\n [class.active]=\"page === currentPage()\"\n (click)=\"goToPage(page)\"\n [attr.aria-current]=\"page === currentPage() ? 'page' : null\"\n [attr.aria-label]=\"pageLabel() + ' ' + page\"\n type=\"button\"\n >\n {{ page }}\n </button>\n }\n\n @if (showPrevNext()) {\n <button\n class=\"page-button\"\n [class.disabled]=\"!canGoNext()\"\n (click)=\"goToNextPage()\"\n [attr.aria-label]=\"nextLabel()\"\n [disabled]=\"!canGoNext()\"\n type=\"button\"\n >\n <i class=\"ph ph-caret-right\" aria-hidden=\"true\"></i>\n </button>\n }\n\n @if (showFirstLast()) {\n <button\n class=\"page-button\"\n [class.disabled]=\"isLastPage()\"\n (click)=\"goToLastPage()\"\n [attr.aria-label]=\"lastLabel()\"\n [disabled]=\"isLastPage()\"\n type=\"button\"\n >\n <i class=\"ph ph-caret-double-right\" aria-hidden=\"true\"></i>\n </button>\n }\n\n <div class=\"sr-only\" aria-live=\"polite\" aria-atomic=\"true\">\n {{ currentPageAnnouncement() }}\n </div>\n</nav>", styles: [".pagination{display:flex;align-items:center;flex-wrap:wrap;gap:var(--spacing-xs);padding:var(--spacing-sm);border-radius:var(--border-radius);background:var(--surface-card);width:100%;max-width:100%;overflow-x:auto;overflow-y:hidden}.pagination:focus-within{outline:var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);outline-offset:var(--focus-outline-offset)}.pagination.outline{background:transparent;border:var(--border-width-1) solid var(--surface-border)}.items-per-page{display:flex;align-items:center;gap:var(--spacing-xs);margin-right:var(--spacing-md);flex-shrink:0}.items-per-page-label{font-size:var(--font-size-sm);color:var(--text-color-secondary);white-space:nowrap;flex-shrink:0}.items-per-page select{padding:var(--spacing-xs) var(--spacing-sm);border:var(--border-width-1) solid var(--surface-border);border-radius:var(--border-radius);background:var(--surface-card);color:var(--text-color);font-family:inherit;font-size:var(--font-size-base);cursor:pointer;transition:all var(--animation-duration-fast) var(--animation-easing-default)}.items-per-page select:hover{border-color:var(--primary-color)}.items-per-page select:focus-visible{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 var(--focus-ring-width) var(--focus-ring-color)}.small .items-per-page select{padding:calc(var(--spacing-xs) * .75) var(--spacing-sm);font-size:var(--font-size-sm)}.large .items-per-page select{padding:var(--spacing-sm) var(--spacing-md);font-size:var(--font-size-lg)}.page-button{display:inline-flex;align-items:center;justify-content:center;min-width:var(--size-9);height:var(--size-9);padding:var(--spacing-xs);border:none;border-radius:var(--border-radius);background:var(--surface-ground);color:var(--text-color);font-family:inherit;font-size:var(--font-size-base);cursor:pointer;transition:all var(--animation-duration-fast) var(--animation-easing-default);flex-shrink:0}.page-button:focus-visible{outline:var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);outline-offset:var(--focus-outline-offset)}.page-button:hover:not(.disabled):not(.active){background:var(--surface-hover)}.page-button.active{background:var(--primary-gradient);color:var(--primary-color-text)}.page-button.disabled{opacity:var(--opacity-disabled);cursor:not-allowed}.page-button i{font-size:var(--icon-size-sm)}.pagination.outline .page-button{background:transparent;border:var(--border-width-1) solid var(--surface-border)}.pagination.outline .page-button:hover:not(.disabled):not(.active){background:var(--surface-hover);border-color:var(--primary-color)}.pagination.outline .page-button.active{background:var(--primary-gradient);color:var(--primary-color-text);border-color:var(--primary-color)}.pagination.small .page-button{min-width:var(--size-8);height:var(--size-8);font-size:var(--font-size-sm)}.pagination.small .page-button i{font-size:var(--icon-size-xs)}.pagination.large .page-button{min-width:var(--size-11);height:var(--size-11);font-size:var(--font-size-lg)}.pagination.large .page-button i{font-size:var(--icon-size-md)}@media(max-width:768px){.pagination{justify-content:center;gap:var(--spacing-2xs, 4px);padding:var(--spacing-sm)}.items-per-page{margin-right:0;margin-bottom:var(--spacing-sm);width:100%;justify-content:center;flex-wrap:wrap}.items-per-page-label{width:100%;text-align:center;margin-bottom:var(--spacing-xs)}.items-per-page select{width:auto;min-width:140px;max-width:180px}.page-button{min-width:var(--size-8);height:var(--size-8);font-size:var(--font-size-sm)}.page-button i{font-size:var(--icon-size-xs)}}@media(max-width:480px){.pagination{padding:var(--spacing-xs);gap:2px}.page-button{min-width:var(--size-7, 28px);height:var(--size-7, 28px);font-size:var(--font-size-xs);padding:2px}.page-button i{font-size:var(--icon-size-xs)}.items-per-page{margin-bottom:var(--spacing-xs)}.items-per-page-label{font-size:var(--font-size-xs)}.items-per-page select{font-size:var(--font-size-sm);padding:var(--spacing-xs)}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}\n"] }]
|
|
2595
2595
|
}], ctorParameters: () => [], propDecorators: { currentPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPage", required: false }] }, { type: i0.Output, args: ["currentPageChange"] }], totalPages: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalPages", required: false }] }, { type: i0.Output, args: ["totalPagesChange"] }], itemsPerPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemsPerPage", required: false }] }, { type: i0.Output, args: ["itemsPerPageChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], showFirstLast: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFirstLast", required: false }] }], showPrevNext: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPrevNext", required: false }] }], maxVisiblePages: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxVisiblePages", required: false }] }], showItemsPerPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "showItemsPerPage", required: false }] }], itemsPerPageOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemsPerPageOptions", required: false }] }], firstLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstLabel", required: false }] }], previousLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousLabel", required: false }] }], nextLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextLabel", required: false }] }], lastLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "lastLabel", required: false }] }], pageLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageLabel", required: false }] }], itemsLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemsLabel", required: false }] }], itemsPerPageLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemsPerPageLabel", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], itemsPerPageChange: [{ type: i0.Output, args: ["itemsPerPageChange"] }], navigationError: [{ type: i0.Output, args: ["navigationError"] }] } });
|
|
@@ -2609,16 +2609,16 @@ class PshProgressbarComponent {
|
|
|
2609
2609
|
constructor() {
|
|
2610
2610
|
this.config = inject(PROGRESSBAR_CONFIG);
|
|
2611
2611
|
// Model inputs for two-way binding
|
|
2612
|
-
this.value = model(this.config.value ?? 0, ...(ngDevMode ? [{ debugName: "value" }] : []));
|
|
2613
|
-
this.max = model(this.config.max ?? 100, ...(ngDevMode ? [{ debugName: "max" }] : []));
|
|
2612
|
+
this.value = model(this.config.value ?? 0, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
2613
|
+
this.max = model(this.config.max ?? 100, ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
|
|
2614
2614
|
// Regular inputs
|
|
2615
|
-
this.variant = input(this.config.variant ?? 'primary', ...(ngDevMode ? [{ debugName: "variant" }] : []));
|
|
2616
|
-
this.size = input(this.config.size ?? 'medium', ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
2617
|
-
this.showLabel = input(this.config.showLabel ?? true, ...(ngDevMode ? [{ debugName: "showLabel" }] : []));
|
|
2618
|
-
this.mode = input(this.config.mode ?? 'default', ...(ngDevMode ? [{ debugName: "mode" }] : []));
|
|
2619
|
-
this.label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
|
|
2620
|
-
this.labelPosition = input(this.config.labelPosition ?? 'top', ...(ngDevMode ? [{ debugName: "labelPosition" }] : []));
|
|
2621
|
-
this.ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : []));
|
|
2615
|
+
this.variant = input(this.config.variant ?? 'primary', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
2616
|
+
this.size = input(this.config.size ?? 'medium', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
2617
|
+
this.showLabel = input(this.config.showLabel ?? true, ...(ngDevMode ? [{ debugName: "showLabel" }] : /* istanbul ignore next */ []));
|
|
2618
|
+
this.mode = input(this.config.mode ?? 'default', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
|
|
2619
|
+
this.label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
|
|
2620
|
+
this.labelPosition = input(this.config.labelPosition ?? 'top', ...(ngDevMode ? [{ debugName: "labelPosition" }] : /* istanbul ignore next */ []));
|
|
2621
|
+
this.ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
2622
2622
|
// Outputs
|
|
2623
2623
|
this.completed = output();
|
|
2624
2624
|
this.thresholdReached = output();
|
|
@@ -2629,10 +2629,10 @@ class PshProgressbarComponent {
|
|
|
2629
2629
|
if (maxVal <= 0)
|
|
2630
2630
|
return 0;
|
|
2631
2631
|
return Math.min(100, Math.max(0, (val / maxVal) * 100));
|
|
2632
|
-
}, ...(ngDevMode ? [{ debugName: "percentage" }] : []));
|
|
2633
|
-
this.isIndeterminate = computed(() => this.mode() === 'indeterminate', ...(ngDevMode ? [{ debugName: "isIndeterminate" }] : []));
|
|
2634
|
-
this.isStriped = computed(() => this.mode() === 'striped' || this.mode() === 'animated', ...(ngDevMode ? [{ debugName: "isStriped" }] : []));
|
|
2635
|
-
this.isAnimated = computed(() => this.mode() === 'animated', ...(ngDevMode ? [{ debugName: "isAnimated" }] : []));
|
|
2632
|
+
}, ...(ngDevMode ? [{ debugName: "percentage" }] : /* istanbul ignore next */ []));
|
|
2633
|
+
this.isIndeterminate = computed(() => this.mode() === 'indeterminate', ...(ngDevMode ? [{ debugName: "isIndeterminate" }] : /* istanbul ignore next */ []));
|
|
2634
|
+
this.isStriped = computed(() => this.mode() === 'striped' || this.mode() === 'animated', ...(ngDevMode ? [{ debugName: "isStriped" }] : /* istanbul ignore next */ []));
|
|
2635
|
+
this.isAnimated = computed(() => this.mode() === 'animated', ...(ngDevMode ? [{ debugName: "isAnimated" }] : /* istanbul ignore next */ []));
|
|
2636
2636
|
this.computedAriaValueText = computed(() => {
|
|
2637
2637
|
if (this.ariaLabel())
|
|
2638
2638
|
return this.ariaLabel();
|
|
@@ -2640,13 +2640,13 @@ class PshProgressbarComponent {
|
|
|
2640
2640
|
return this.label() || 'Loading...';
|
|
2641
2641
|
}
|
|
2642
2642
|
return `${Math.round(this.percentage())}%`;
|
|
2643
|
-
}, ...(ngDevMode ? [{ debugName: "computedAriaValueText" }] : []));
|
|
2643
|
+
}, ...(ngDevMode ? [{ debugName: "computedAriaValueText" }] : /* istanbul ignore next */ []));
|
|
2644
2644
|
this.displayLabel = computed(() => {
|
|
2645
2645
|
if (this.isIndeterminate()) {
|
|
2646
2646
|
return this.label() || 'Loading...';
|
|
2647
2647
|
}
|
|
2648
2648
|
return this.label() || `${Math.round(this.percentage())}%`;
|
|
2649
|
-
}, ...(ngDevMode ? [{ debugName: "displayLabel" }] : []));
|
|
2649
|
+
}, ...(ngDevMode ? [{ debugName: "displayLabel" }] : /* istanbul ignore next */ []));
|
|
2650
2650
|
let previousThreshold = -1;
|
|
2651
2651
|
let hasCompleted = false;
|
|
2652
2652
|
effect(() => {
|
|
@@ -2672,10 +2672,10 @@ class PshProgressbarComponent {
|
|
|
2672
2672
|
}
|
|
2673
2673
|
});
|
|
2674
2674
|
}
|
|
2675
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
2676
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
2675
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: PshProgressbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2676
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", type: PshProgressbarComponent, isStandalone: true, selector: "psh-progressbar", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", max: "maxChange", completed: "completed", thresholdReached: "thresholdReached" }, host: { properties: { "class.small": "size() === \"small\"", "class.large": "size() === \"large\"", "class.label-bottom": "labelPosition() === \"bottom\"", "class.label-inline": "labelPosition() === \"inline\"", "attr.data-state": "mode()", "attr.aria-live": "\"polite\"" }, classAttribute: "progressbar-container" }, ngImport: i0, template: "@if (showLabel()) {\n <span class=\"progress-label\">{{ displayLabel() }}</span>\n}\n<div\n class=\"progressbar\"\n [class.striped]=\"isStriped()\"\n [class.animated]=\"isAnimated()\"\n [class.indeterminate]=\"isIndeterminate()\"\n role=\"progressbar\"\n [attr.aria-valuenow]=\"isIndeterminate() ? null : value()\"\n [attr.aria-valuemin]=\"0\"\n [attr.aria-valuemax]=\"max()\"\n [attr.aria-valuetext]=\"computedAriaValueText()\"\n>\n <div\n class=\"progress-track\"\n [class]=\"variant()\"\n [style.width.%]=\"percentage()\"\n ></div>\n</div>", styles: [":host{--progressbar-height-sm: var(--size-1);--progressbar-height-md: var(--size-2);--progressbar-height-lg: var(--size-3);--progressbar-stripe-opacity: .15;display:flex;flex-direction:column;gap:var(--spacing-xs)}:host.label-bottom{flex-direction:column-reverse}:host.label-inline{flex-direction:row;align-items:center;gap:var(--spacing-md)}.progressbar{position:relative;width:100%;height:var(--progressbar-height-md);background:var(--surface-ground);border-radius:var(--border-radius);overflow:hidden}.progress-track{height:100%;border-radius:var(--border-radius);transition:width var(--animation-duration-default) var(--animation-easing-smooth)}.progress-track.primary{background:var(--primary-gradient)}.progress-track.secondary{background:var(--secondary-color)}.progress-track.success{background:var(--success-color)}.progress-track.warning{background:var(--warning-color)}.progress-track.danger{background:var(--danger-color)}:host.small .progressbar{height:var(--progressbar-height-sm)}:host.large .progressbar{height:var(--progressbar-height-lg)}.progress-label{display:block;text-align:right;font-size:var(--font-size-sm);color:var(--text-color);font-weight:var(--font-weight-medium)}:host.small .progress-label{font-size:var(--font-size-xs)}:host.large .progress-label{font-size:var(--font-size-base)}:host.label-inline .progress-label{text-align:left;min-width:fit-content}.progressbar.striped .progress-track{background-image:linear-gradient(45deg,rgba(255,255,255,var(--progressbar-stripe-opacity)) 25%,transparent 25%,transparent 50%,rgba(255,255,255,var(--progressbar-stripe-opacity)) 50%,rgba(255,255,255,var(--progressbar-stripe-opacity)) 75%,transparent 75%,transparent);background-size:var(--size-4) var(--size-4)}.progressbar.animated .progress-track{animation:progress-animation var(--animation-duration-slow) linear infinite}.progressbar.indeterminate .progress-track{width:50%!important;animation:indeterminate 1.5s var(--animation-easing-in-out) infinite}@keyframes progress-animation{0%{background-position:var(--size-4) 0}to{background-position:0 0}}@keyframes indeterminate{0%{transform:translate(-100%)}to{transform:translate(200%)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2677
2677
|
}
|
|
2678
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
2678
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: PshProgressbarComponent, decorators: [{
|
|
2679
2679
|
type: Component,
|
|
2680
2680
|
args: [{ selector: 'psh-progressbar', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
2681
2681
|
class: 'progressbar-container',
|
|
@@ -2714,28 +2714,28 @@ class PshRadioComponent {
|
|
|
2714
2714
|
// Plain signals + manual @Input/@Output to prevent auto-emission
|
|
2715
2715
|
// when parent sets [checked] or [disabled] via template binding.
|
|
2716
2716
|
// model() would auto-emit checkedChange/disabledChange on .set().
|
|
2717
|
-
this.checked = signal(this.config.checked ?? false, ...(ngDevMode ? [{ debugName: "checked" }] : []));
|
|
2718
|
-
this.disabled = signal(this.config.disabled ?? false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
2719
|
-
this.required = input(this.config.required ?? false, ...(ngDevMode ? [{ debugName: "required" }] : []));
|
|
2717
|
+
this.checked = signal(this.config.checked ?? false, ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
|
|
2718
|
+
this.disabled = signal(this.config.disabled ?? false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
2719
|
+
this.required = input(this.config.required ?? false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
|
|
2720
2720
|
// Regular inputs
|
|
2721
|
-
this.label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
|
|
2722
|
-
this.error = input('', ...(ngDevMode ? [{ debugName: "error" }] : []));
|
|
2723
|
-
this.success = input('', ...(ngDevMode ? [{ debugName: "success" }] : []));
|
|
2724
|
-
this.name = input('', ...(ngDevMode ? [{ debugName: "name" }] : []));
|
|
2725
|
-
this.value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
|
|
2726
|
-
this.ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : []));
|
|
2727
|
-
this.size = input(this.config.size ?? 'medium', ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
2728
|
-
this.labelPosition = input(this.config.labelPosition ?? 'right', ...(ngDevMode ? [{ debugName: "labelPosition" }] : []));
|
|
2721
|
+
this.label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
2722
|
+
this.error = input('', ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
|
|
2723
|
+
this.success = input('', ...(ngDevMode ? [{ debugName: "success" }] : /* istanbul ignore next */ []));
|
|
2724
|
+
this.name = input('', ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
|
|
2725
|
+
this.value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
|
|
2726
|
+
this.ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
2727
|
+
this.size = input(this.config.size ?? 'medium', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
2728
|
+
this.labelPosition = input(this.config.labelPosition ?? 'right', ...(ngDevMode ? [{ debugName: "labelPosition" }] : /* istanbul ignore next */ []));
|
|
2729
2729
|
// Content projection tracking
|
|
2730
|
-
this.radioText = contentChild('.radio-text', ...(ngDevMode ? [{ debugName: "radioText" }] : []));
|
|
2731
|
-
this.hasProjectedContent = signal(false, ...(ngDevMode ? [{ debugName: "hasProjectedContent" }] : []));
|
|
2730
|
+
this.radioText = contentChild('.radio-text', ...(ngDevMode ? [{ debugName: "radioText" }] : /* istanbul ignore next */ []));
|
|
2731
|
+
this.hasProjectedContent = signal(false, ...(ngDevMode ? [{ debugName: "hasProjectedContent" }] : /* istanbul ignore next */ []));
|
|
2732
2732
|
// Outputs — checkedChange/disabledChange use EventEmitter to decouple from signal writes.
|
|
2733
2733
|
this.checkedChange = new EventEmitter();
|
|
2734
2734
|
this.disabledChange = new EventEmitter();
|
|
2735
2735
|
this.valueChange = output();
|
|
2736
2736
|
// Computed values
|
|
2737
|
-
this.customStyles = computed(() => Object.assign({}, ...this.styles), ...(ngDevMode ? [{ debugName: "customStyles" }] : []));
|
|
2738
|
-
this.state = computed(() => this.getState(), ...(ngDevMode ? [{ debugName: "state" }] : []));
|
|
2737
|
+
this.customStyles = computed(() => Object.assign({}, ...this.styles), ...(ngDevMode ? [{ debugName: "customStyles" }] : /* istanbul ignore next */ []));
|
|
2738
|
+
this.state = computed(() => this.getState(), ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
|
|
2739
2739
|
this.computedAriaLabel = computed(() => {
|
|
2740
2740
|
const customLabel = this.ariaLabel();
|
|
2741
2741
|
if (customLabel)
|
|
@@ -2744,9 +2744,9 @@ class PshRadioComponent {
|
|
|
2744
2744
|
if (labelText)
|
|
2745
2745
|
return labelText;
|
|
2746
2746
|
return this.hasProjectedContent() ? undefined : 'Radio';
|
|
2747
|
-
}, ...(ngDevMode ? [{ debugName: "computedAriaLabel" }] : []));
|
|
2748
|
-
this.errorMessageId = computed(() => this.error() ? `${this.uniqueId}-error` : undefined, ...(ngDevMode ? [{ debugName: "errorMessageId" }] : []));
|
|
2749
|
-
this.successMessageId = computed(() => this.success() ? `${this.uniqueId}-success` : undefined, ...(ngDevMode ? [{ debugName: "successMessageId" }] : []));
|
|
2747
|
+
}, ...(ngDevMode ? [{ debugName: "computedAriaLabel" }] : /* istanbul ignore next */ []));
|
|
2748
|
+
this.errorMessageId = computed(() => this.error() ? `${this.uniqueId}-error` : undefined, ...(ngDevMode ? [{ debugName: "errorMessageId" }] : /* istanbul ignore next */ []));
|
|
2749
|
+
this.successMessageId = computed(() => this.success() ? `${this.uniqueId}-success` : undefined, ...(ngDevMode ? [{ debugName: "successMessageId" }] : /* istanbul ignore next */ []));
|
|
2750
2750
|
this.ariaDescribedBy = computed(() => {
|
|
2751
2751
|
const ids = [];
|
|
2752
2752
|
if (this.errorMessageId())
|
|
@@ -2754,7 +2754,7 @@ class PshRadioComponent {
|
|
|
2754
2754
|
if (this.successMessageId())
|
|
2755
2755
|
ids.push(this.successMessageId());
|
|
2756
2756
|
return ids.length > 0 ? ids.join(' ') : undefined;
|
|
2757
|
-
}, ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : []));
|
|
2757
|
+
}, ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : /* istanbul ignore next */ []));
|
|
2758
2758
|
effect(() => {
|
|
2759
2759
|
if (!this.label() && !this.ariaLabel() && !this.hasProjectedContent()) {
|
|
2760
2760
|
console.warn('[psh-radio] No accessible label provided. Please use label input, ariaLabel input, or projected content.');
|
|
@@ -2813,10 +2813,10 @@ class PshRadioComponent {
|
|
|
2813
2813
|
// Navigate to previous radio in group
|
|
2814
2814
|
// Implementation requires radio group context
|
|
2815
2815
|
}
|
|
2816
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
2817
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
2816
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: PshRadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2817
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", type: PshRadioComponent, isStandalone: true, selector: "psh-radio", inputs: { checkedInput: { classPropertyName: "checkedInput", publicName: "checked", isSignal: false, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, success: { classPropertyName: "success", publicName: "success", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checkedChange: "checkedChange", disabledChange: "disabledChange", valueChange: "valueChange" }, host: { properties: { "class.radio-disabled": "disabled()", "class.radio-error": "!!error()", "class.radio-success": "!!success()", "class.radio-small": "size() === \"small\"", "class.radio-large": "size() === \"large\"", "attr.data-state": "state()" } }, queries: [{ propertyName: "radioText", first: true, predicate: [".radio-text"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"radio-container\">\n <label class=\"radio-label\" [class.label-left]=\"labelPosition() === 'left'\">\n <input\n type=\"radio\"\n class=\"radio-input\"\n [checked]=\"checked()\"\n [disabled]=\"disabled()\"\n [required]=\"required()\"\n [name]=\"name()\"\n [value]=\"value()\"\n [attr.aria-label]=\"computedAriaLabel()\"\n [attr.aria-required]=\"required() || null\"\n [attr.aria-invalid]=\"error() ? 'true' : null\"\n [attr.aria-checked]=\"checked()\"\n [attr.aria-describedby]=\"ariaDescribedBy()\"\n (change)=\"handleChange()\"\n (keydown)=\"handleKeydown($event)\"\n />\n <span \n class=\"radio-control\"\n [class.error]=\"!!error()\"\n [class.success]=\"!!success()\"\n >\n <span class=\"radio-dot\"></span>\n </span>\n <span class=\"radio-text\">\n @if (label()) {\n {{ label() }}\n } @else {\n <ng-content>Radio</ng-content>\n }\n </span>\n </label>\n\n @if (error()) {\n <div [id]=\"errorMessageId()\" class=\"radio-error\" role=\"alert\">\n {{ error() }}\n </div>\n }\n\n @if (success()) {\n <div [id]=\"successMessageId()\" class=\"radio-success\" role=\"status\">\n {{ success() }}\n </div>\n }\n</div>", styles: [".radio-container{display:inline-flex;flex-direction:column;gap:var(--spacing-xs)}.radio-label{display:inline-flex;align-items:center;gap:var(--spacing-sm);cursor:pointer;-webkit-user-select:none;user-select:none;color:var(--text-color)}.radio-label.label-left{flex-direction:row-reverse;justify-content:space-between}.radio-input{position:absolute;opacity:0;width:0;height:0}.radio-control{display:flex;align-items:center;justify-content:center;width:var(--size-5);height:var(--size-5);min-width:var(--size-5);min-height:var(--size-5);border:var(--border-width-2) solid var(--surface-border);border-radius:var(--radius-full);background:var(--surface-card);transition:all var(--animation-duration-fast) var(--animation-easing-default);flex-shrink:0}.radio-dot{width:var(--size-2);height:var(--size-2);border-radius:var(--radius-full);background:var(--primary-color-text);opacity:0;transform:scale(.8);transition:all var(--animation-duration-fast) var(--animation-easing-default)}.radio-input:checked+.radio-control{background:var(--primary-color);border-color:var(--primary-color)}.radio-input:checked+.radio-control .radio-dot{opacity:1;transform:scale(1)}.radio-input:focus-visible+.radio-control{box-shadow:0 0 0 var(--focus-outline-width) var(--focus-ring-color)}:host(.radio-disabled) .radio-label{opacity:var(--opacity-disabled);cursor:not-allowed}:host(.radio-error) .radio-control{border-color:var(--danger-color)}:host(.radio-error) .radio-input:checked+.radio-control{background:var(--danger-color);border-color:var(--danger-color)}:host(.radio-success) .radio-control{border-color:var(--success-color)}:host(.radio-success) .radio-input:checked+.radio-control{background:var(--success-color);border-color:var(--success-color)}.radio-error{font-size:var(--font-size-sm);color:var(--danger-color)}.radio-success{font-size:var(--font-size-sm);color:var(--success-color)}:host(.radio-small) .radio-control{width:var(--size-4);height:var(--size-4);min-width:var(--size-4);min-height:var(--size-4)}:host(.radio-small) .radio-dot{width:var(--size-1-5);height:var(--size-1-5)}:host(.radio-small) .radio-text{font-size:var(--font-size-sm)}:host(.radio-large) .radio-control{width:var(--size-6);height:var(--size-6);min-width:var(--size-6);min-height:var(--size-6)}:host(.radio-large) .radio-dot{width:var(--size-3);height:var(--size-3)}:host(.radio-large) .radio-text{font-size:var(--font-size-lg)}.radio-text{color:var(--text-color)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2818
2818
|
}
|
|
2819
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
2819
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: PshRadioComponent, decorators: [{
|
|
2820
2820
|
type: Component,
|
|
2821
2821
|
args: [{ selector: 'psh-radio', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
2822
2822
|
'[class.radio-disabled]': 'disabled()',
|
|
@@ -2841,45 +2841,91 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
|
|
|
2841
2841
|
class PshSelectComponent {
|
|
2842
2842
|
constructor() {
|
|
2843
2843
|
this.elementRef = inject(ElementRef);
|
|
2844
|
-
this.cdr = inject(ChangeDetectorRef);
|
|
2845
2844
|
this.destroyRef = inject(DestroyRef);
|
|
2846
2845
|
this.selectId = `psh-sel-${Math.random().toString(36).substring(2, 11)}`;
|
|
2847
|
-
this.value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
|
|
2848
|
-
this.disabled = model(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
2849
|
-
this.touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : []));
|
|
2850
|
-
|
|
2851
|
-
this.
|
|
2852
|
-
this.
|
|
2853
|
-
this.
|
|
2854
|
-
this.
|
|
2855
|
-
this.
|
|
2856
|
-
this.
|
|
2857
|
-
this.
|
|
2858
|
-
this.
|
|
2859
|
-
this.
|
|
2860
|
-
this.
|
|
2861
|
-
this.
|
|
2862
|
-
this.
|
|
2863
|
-
this.
|
|
2846
|
+
this.value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
2847
|
+
this.disabled = model(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
2848
|
+
this.touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
|
|
2849
|
+
this.size = input('medium', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
2850
|
+
this.searchable = input(false, ...(ngDevMode ? [{ debugName: "searchable" }] : /* istanbul ignore next */ []));
|
|
2851
|
+
this.multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
|
|
2852
|
+
this.clearable = input(false, ...(ngDevMode ? [{ debugName: "clearable" }] : /* istanbul ignore next */ []));
|
|
2853
|
+
this.loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
|
|
2854
|
+
this.fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : /* istanbul ignore next */ []));
|
|
2855
|
+
this.required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
|
|
2856
|
+
this.options = input([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
|
|
2857
|
+
this.label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
2858
|
+
this.placeholder = input('Sélectionner une option', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
2859
|
+
this.multiplePlaceholder = input('Sélectionner des options', ...(ngDevMode ? [{ debugName: "multiplePlaceholder" }] : /* istanbul ignore next */ []));
|
|
2860
|
+
this.error = input(null, ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
|
|
2861
|
+
this.success = input(null, ...(ngDevMode ? [{ debugName: "success" }] : /* istanbul ignore next */ []));
|
|
2862
|
+
this.hint = input(null, ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
|
|
2863
|
+
this.ariaLabel = input(null, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
2864
|
+
this.maxSelections = input(undefined, ...(ngDevMode ? [{ debugName: "maxSelections" }] : /* istanbul ignore next */ []));
|
|
2865
|
+
this.minSelections = input(undefined, ...(ngDevMode ? [{ debugName: "minSelections" }] : /* istanbul ignore next */ []));
|
|
2866
|
+
this.compareWith = input((a, b) => a === b, ...(ngDevMode ? [{ debugName: "compareWith" }] : /* istanbul ignore next */ []));
|
|
2864
2867
|
this.searchConfig = input({
|
|
2865
2868
|
debounceTime: 300,
|
|
2866
2869
|
placeholder: 'Rechercher...',
|
|
2867
2870
|
minLength: 1
|
|
2868
|
-
}, ...(ngDevMode ? [{ debugName: "searchConfig" }] : []));
|
|
2869
|
-
this.isOpenSignal = signal(false, ...(ngDevMode ? [{ debugName: "isOpenSignal" }] : []));
|
|
2870
|
-
this.searchTermSignal = signal('', ...(ngDevMode ? [{ debugName: "searchTermSignal" }] : []));
|
|
2871
|
-
this.
|
|
2871
|
+
}, ...(ngDevMode ? [{ debugName: "searchConfig" }] : /* istanbul ignore next */ []));
|
|
2872
|
+
this.isOpenSignal = signal(false, ...(ngDevMode ? [{ debugName: "isOpenSignal" }] : /* istanbul ignore next */ []));
|
|
2873
|
+
this.searchTermSignal = signal('', ...(ngDevMode ? [{ debugName: "searchTermSignal" }] : /* istanbul ignore next */ []));
|
|
2874
|
+
this.focusedIndex = signal(-1, ...(ngDevMode ? [{ debugName: "focusedIndex" }] : /* istanbul ignore next */ []));
|
|
2872
2875
|
this.opened = output();
|
|
2873
2876
|
this.closed = output();
|
|
2874
|
-
this.searched = output();
|
|
2877
|
+
this.searched = output();
|
|
2875
2878
|
this.scrollEnd = output();
|
|
2876
|
-
this.isOpen = computed(() => this.isOpenSignal(), ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
|
|
2877
|
-
this.searchTerm = computed(() => this.searchTermSignal(), ...(ngDevMode ? [{ debugName: "searchTerm" }] : []));
|
|
2878
|
-
this.state = computed(() =>
|
|
2879
|
+
this.isOpen = computed(() => this.isOpenSignal(), ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
|
|
2880
|
+
this.searchTerm = computed(() => this.searchTermSignal(), ...(ngDevMode ? [{ debugName: "searchTerm" }] : /* istanbul ignore next */ []));
|
|
2881
|
+
this.state = computed(() => {
|
|
2882
|
+
if (this.disabled())
|
|
2883
|
+
return 'disabled';
|
|
2884
|
+
if (this.error())
|
|
2885
|
+
return 'error';
|
|
2886
|
+
if (this.success())
|
|
2887
|
+
return 'success';
|
|
2888
|
+
return 'default';
|
|
2889
|
+
}, ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
|
|
2890
|
+
this.computedAriaLabel = computed(() => this.ariaLabel() || this.label() || this.placeholder(), ...(ngDevMode ? [{ debugName: "computedAriaLabel" }] : /* istanbul ignore next */ []));
|
|
2891
|
+
this.describedBy = computed(() => {
|
|
2892
|
+
if (this.error())
|
|
2893
|
+
return 'error-message';
|
|
2894
|
+
if (this.success())
|
|
2895
|
+
return 'success-message';
|
|
2896
|
+
if (this.hint())
|
|
2897
|
+
return 'hint-message';
|
|
2898
|
+
return null;
|
|
2899
|
+
}, ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
|
|
2900
|
+
this.flatFilteredOptions = computed(() => {
|
|
2901
|
+
const opts = this.filteredOptions();
|
|
2902
|
+
const result = [];
|
|
2903
|
+
for (const item of opts) {
|
|
2904
|
+
if (this.isOptionGroup(item)) {
|
|
2905
|
+
for (const opt of item.options) {
|
|
2906
|
+
result.push({ option: opt, effectiveDisabled: !!(item.disabled || opt.disabled) });
|
|
2907
|
+
}
|
|
2908
|
+
}
|
|
2909
|
+
else {
|
|
2910
|
+
result.push({ option: item, effectiveDisabled: !!item.disabled });
|
|
2911
|
+
}
|
|
2912
|
+
}
|
|
2913
|
+
return result;
|
|
2914
|
+
}, ...(ngDevMode ? [{ debugName: "flatFilteredOptions" }] : /* istanbul ignore next */ []));
|
|
2915
|
+
this.activeDescendant = computed(() => {
|
|
2916
|
+
const idx = this.focusedIndex();
|
|
2917
|
+
const flat = this.flatFilteredOptions();
|
|
2918
|
+
if (idx < 0 || idx >= flat.length)
|
|
2919
|
+
return null;
|
|
2920
|
+
const item = flat[idx];
|
|
2921
|
+
if (!item)
|
|
2922
|
+
return null;
|
|
2923
|
+
return `${this.selectId}-${item.option.value}`;
|
|
2924
|
+
}, ...(ngDevMode ? [{ debugName: "activeDescendant" }] : /* istanbul ignore next */ []));
|
|
2879
2925
|
this.selectedLabel = computed(() => {
|
|
2880
2926
|
const currentValue = this.value();
|
|
2881
2927
|
const currentOptions = this.flattenOptions(this.options());
|
|
2882
|
-
if (
|
|
2928
|
+
if (currentValue === null || currentValue === undefined) {
|
|
2883
2929
|
return this.multiple() ? this.multiplePlaceholder() : this.placeholder();
|
|
2884
2930
|
}
|
|
2885
2931
|
if (this.multiple() && Array.isArray(currentValue)) {
|
|
@@ -2888,7 +2934,7 @@ class PshSelectComponent {
|
|
|
2888
2934
|
}
|
|
2889
2935
|
const selected = currentOptions.find(opt => this.compareWith()(opt.value, currentValue));
|
|
2890
2936
|
return selected ? selected.label : this.placeholder();
|
|
2891
|
-
}, ...(ngDevMode ? [{ debugName: "selectedLabel" }] : []));
|
|
2937
|
+
}, ...(ngDevMode ? [{ debugName: "selectedLabel" }] : /* istanbul ignore next */ []));
|
|
2892
2938
|
this.filteredOptions = computed(() => {
|
|
2893
2939
|
const term = this.searchTermSignal().toLowerCase();
|
|
2894
2940
|
const opts = this.options();
|
|
@@ -2896,12 +2942,18 @@ class PshSelectComponent {
|
|
|
2896
2942
|
return opts;
|
|
2897
2943
|
return opts.map(opt => {
|
|
2898
2944
|
if (this.isOptionGroup(opt)) {
|
|
2899
|
-
const filtered = opt.options.filter(o =>
|
|
2945
|
+
const filtered = opt.options.filter(o => {
|
|
2946
|
+
const matchesLabel = o.label.toLowerCase().includes(term);
|
|
2947
|
+
const matchesDesc = o.description ? o.description.toLowerCase().includes(term) : false;
|
|
2948
|
+
return matchesLabel || matchesDesc;
|
|
2949
|
+
});
|
|
2900
2950
|
return filtered.length > 0 ? { ...opt, options: filtered } : null;
|
|
2901
2951
|
}
|
|
2902
|
-
|
|
2952
|
+
const matchesLabel = opt.label.toLowerCase().includes(term);
|
|
2953
|
+
const matchesDesc = opt.description ? opt.description.toLowerCase().includes(term) : false;
|
|
2954
|
+
return (matchesLabel || matchesDesc) ? opt : null;
|
|
2903
2955
|
}).filter((opt) => opt !== null);
|
|
2904
|
-
}, ...(ngDevMode ? [{ debugName: "filteredOptions" }] : []));
|
|
2956
|
+
}, ...(ngDevMode ? [{ debugName: "filteredOptions" }] : /* istanbul ignore next */ []));
|
|
2905
2957
|
this.onChange = (_) => { };
|
|
2906
2958
|
this.onTouched = () => { };
|
|
2907
2959
|
const clickHandler = (event) => {
|
|
@@ -2912,13 +2964,8 @@ class PshSelectComponent {
|
|
|
2912
2964
|
document.addEventListener('click', clickHandler);
|
|
2913
2965
|
this.destroyRef.onDestroy(() => document.removeEventListener('click', clickHandler));
|
|
2914
2966
|
}
|
|
2915
|
-
ngAfterContentInit() {
|
|
2916
|
-
this.initializedSignal.set(true);
|
|
2917
|
-
}
|
|
2918
2967
|
writeValue(value) {
|
|
2919
2968
|
this.value.set(value);
|
|
2920
|
-
this.initializedSignal.set(true);
|
|
2921
|
-
this.cdr.markForCheck();
|
|
2922
2969
|
}
|
|
2923
2970
|
registerOnChange(fn) { this.onChange = fn; }
|
|
2924
2971
|
registerOnTouched(fn) { this.onTouched = fn; }
|
|
@@ -2926,23 +2973,38 @@ class PshSelectComponent {
|
|
|
2926
2973
|
toggle() {
|
|
2927
2974
|
if (this.disabled() || this.loading())
|
|
2928
2975
|
return;
|
|
2929
|
-
this.
|
|
2930
|
-
|
|
2976
|
+
if (this.isOpen()) {
|
|
2977
|
+
this.close();
|
|
2978
|
+
}
|
|
2979
|
+
else {
|
|
2980
|
+
this.isOpenSignal.set(true);
|
|
2981
|
+
this.opened.emit();
|
|
2982
|
+
}
|
|
2931
2983
|
}
|
|
2932
2984
|
close() {
|
|
2985
|
+
if (!this.isOpenSignal())
|
|
2986
|
+
return;
|
|
2933
2987
|
this.isOpenSignal.set(false);
|
|
2934
2988
|
this.searchTermSignal.set('');
|
|
2989
|
+
this.focusedIndex.set(-1);
|
|
2990
|
+
this.closed.emit();
|
|
2935
2991
|
}
|
|
2936
|
-
select(option) {
|
|
2937
|
-
if (this.disabled() || option.disabled)
|
|
2992
|
+
select(option, groupDisabled = false) {
|
|
2993
|
+
if (this.disabled() || option.disabled || groupDisabled)
|
|
2938
2994
|
return;
|
|
2939
2995
|
if (this.multiple()) {
|
|
2940
2996
|
const current = Array.isArray(this.value()) ? [...this.value()] : [];
|
|
2941
2997
|
const index = current.findIndex(v => this.compareWith()(v, option.value));
|
|
2942
2998
|
if (index === -1) {
|
|
2999
|
+
const max = this.maxSelections();
|
|
3000
|
+
if (max !== undefined && current.length >= max)
|
|
3001
|
+
return;
|
|
2943
3002
|
current.push(option.value);
|
|
2944
3003
|
}
|
|
2945
3004
|
else {
|
|
3005
|
+
const min = this.minSelections();
|
|
3006
|
+
if (min !== undefined && current.length <= min)
|
|
3007
|
+
return;
|
|
2946
3008
|
current.splice(index, 1);
|
|
2947
3009
|
}
|
|
2948
3010
|
this.value.set(current);
|
|
@@ -2958,7 +3020,8 @@ class PshSelectComponent {
|
|
|
2958
3020
|
}
|
|
2959
3021
|
clear(event) {
|
|
2960
3022
|
event.stopPropagation();
|
|
2961
|
-
|
|
3023
|
+
const newVal = (this.multiple() ? [] : null);
|
|
3024
|
+
this.value.set(newVal);
|
|
2962
3025
|
this.onChange(this.value());
|
|
2963
3026
|
}
|
|
2964
3027
|
onSearch(event) {
|
|
@@ -2972,6 +3035,51 @@ class PshSelectComponent {
|
|
|
2972
3035
|
this.scrollEnd.emit();
|
|
2973
3036
|
}
|
|
2974
3037
|
}
|
|
3038
|
+
handleKeydown(event) {
|
|
3039
|
+
switch (event.key) {
|
|
3040
|
+
case 'Enter':
|
|
3041
|
+
case ' ':
|
|
3042
|
+
event.preventDefault();
|
|
3043
|
+
if (!this.isOpen()) {
|
|
3044
|
+
this.toggle();
|
|
3045
|
+
}
|
|
3046
|
+
else if (this.focusedIndex() >= 0) {
|
|
3047
|
+
const flat = this.flatFilteredOptions();
|
|
3048
|
+
const item = flat[this.focusedIndex()];
|
|
3049
|
+
if (item && !item.effectiveDisabled) {
|
|
3050
|
+
this.select(item.option);
|
|
3051
|
+
}
|
|
3052
|
+
}
|
|
3053
|
+
break;
|
|
3054
|
+
case 'ArrowDown':
|
|
3055
|
+
event.preventDefault();
|
|
3056
|
+
if (!this.isOpen()) {
|
|
3057
|
+
this.toggle();
|
|
3058
|
+
}
|
|
3059
|
+
else {
|
|
3060
|
+
this.moveFocus(1);
|
|
3061
|
+
}
|
|
3062
|
+
break;
|
|
3063
|
+
case 'ArrowUp':
|
|
3064
|
+
event.preventDefault();
|
|
3065
|
+
this.moveFocus(-1);
|
|
3066
|
+
break;
|
|
3067
|
+
case 'Home':
|
|
3068
|
+
event.preventDefault();
|
|
3069
|
+
this.focusFirst();
|
|
3070
|
+
break;
|
|
3071
|
+
case 'End':
|
|
3072
|
+
event.preventDefault();
|
|
3073
|
+
this.focusLast();
|
|
3074
|
+
break;
|
|
3075
|
+
case 'Escape':
|
|
3076
|
+
this.close();
|
|
3077
|
+
break;
|
|
3078
|
+
case 'Tab':
|
|
3079
|
+
this.close();
|
|
3080
|
+
break;
|
|
3081
|
+
}
|
|
3082
|
+
}
|
|
2975
3083
|
isOptionGroup(item) {
|
|
2976
3084
|
return 'options' in item;
|
|
2977
3085
|
}
|
|
@@ -2991,22 +3099,57 @@ class PshSelectComponent {
|
|
|
2991
3099
|
return Array.isArray(val) && val.length > 0;
|
|
2992
3100
|
return val !== null && val !== undefined;
|
|
2993
3101
|
}
|
|
2994
|
-
|
|
2995
|
-
return
|
|
3102
|
+
getFlatIndex(option) {
|
|
3103
|
+
return this.flatFilteredOptions().findIndex(item => item.option === option);
|
|
2996
3104
|
}
|
|
2997
3105
|
focusSelect() {
|
|
2998
3106
|
this.elementRef.nativeElement.querySelector('.select-trigger')?.focus();
|
|
2999
3107
|
}
|
|
3000
|
-
|
|
3001
|
-
|
|
3108
|
+
flattenOptions(options) {
|
|
3109
|
+
return options.reduce((acc, opt) => this.isOptionGroup(opt) ? [...acc, ...opt.options] : [...acc, opt], []);
|
|
3110
|
+
}
|
|
3111
|
+
moveFocus(direction) {
|
|
3112
|
+
const flat = this.flatFilteredOptions();
|
|
3113
|
+
if (flat.length === 0)
|
|
3114
|
+
return;
|
|
3115
|
+
const current = this.focusedIndex();
|
|
3116
|
+
let next = current;
|
|
3117
|
+
for (let i = 0; i < flat.length; i++) {
|
|
3118
|
+
next = ((next + direction) % flat.length + flat.length) % flat.length;
|
|
3119
|
+
if (!flat[next].effectiveDisabled) {
|
|
3120
|
+
this.focusedIndex.set(next);
|
|
3121
|
+
return;
|
|
3122
|
+
}
|
|
3123
|
+
}
|
|
3124
|
+
}
|
|
3125
|
+
focusFirst() {
|
|
3126
|
+
const flat = this.flatFilteredOptions();
|
|
3127
|
+
for (let i = 0; i < flat.length; i++) {
|
|
3128
|
+
if (!flat[i].effectiveDisabled) {
|
|
3129
|
+
this.focusedIndex.set(i);
|
|
3130
|
+
return;
|
|
3131
|
+
}
|
|
3132
|
+
}
|
|
3133
|
+
}
|
|
3134
|
+
focusLast() {
|
|
3135
|
+
const flat = this.flatFilteredOptions();
|
|
3136
|
+
for (let i = flat.length - 1; i >= 0; i--) {
|
|
3137
|
+
if (!flat[i].effectiveDisabled) {
|
|
3138
|
+
this.focusedIndex.set(i);
|
|
3139
|
+
return;
|
|
3140
|
+
}
|
|
3141
|
+
}
|
|
3142
|
+
}
|
|
3143
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: PshSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3144
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", type: PshSelectComponent, isStandalone: true, selector: "psh-select", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, multiplePlaceholder: { classPropertyName: "multiplePlaceholder", publicName: "multiplePlaceholder", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, success: { classPropertyName: "success", publicName: "success", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, maxSelections: { classPropertyName: "maxSelections", publicName: "maxSelections", isSignal: true, isRequired: false, transformFunction: null }, minSelections: { classPropertyName: "minSelections", publicName: "minSelections", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, searchConfig: { classPropertyName: "searchConfig", publicName: "searchConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", disabled: "disabledChange", touched: "touchedChange", opened: "opened", closed: "closed", searched: "searched", scrollEnd: "scrollEnd" }, host: { properties: { "class.full-width": "fullWidth()", "class.small": "size() === \"small\"", "class.large": "size() === \"large\"", "class.error": "!!error()", "class.success": "!!success()", "class.disabled": "disabled()", "class.loading": "loading()", "attr.aria-expanded": "isOpen().toString()", "attr.data-state": "state()" } }, providers: [
|
|
3002
3145
|
{
|
|
3003
3146
|
provide: NG_VALUE_ACCESSOR,
|
|
3004
3147
|
useExisting: PshSelectComponent,
|
|
3005
3148
|
multi: true
|
|
3006
3149
|
}
|
|
3007
|
-
], ngImport: i0, template: "<div class=\"select-container\">\n
|
|
3150
|
+
], ngImport: i0, template: "<div class=\"select-container\">\n @if (label()) {\n <label class=\"select-label\" [attr.for]=\"selectId\" (click)=\"focusSelect()\" [class.required]=\"required()\">\n {{ label() }}\n @if (required()) { <span class=\"required-mark\">*</span> }\n </label>\n }\n\n <div class=\"select-trigger-wrapper\">\n <div class=\"select-trigger\"\n role=\"combobox\"\n [id]=\"selectId\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-controls]=\"selectId + '-listbox'\"\n [attr.aria-activedescendant]=\"activeDescendant()\"\n [attr.aria-label]=\"computedAriaLabel()\"\n [attr.aria-invalid]=\"!!error()\"\n [attr.aria-required]=\"required()\"\n [attr.aria-disabled]=\"disabled()\"\n [attr.aria-busy]=\"loading()\"\n [attr.aria-describedby]=\"describedBy()\"\n [attr.tabindex]=\"disabled() || loading() ? -1 : 0\"\n (keydown)=\"handleKeydown($event)\"\n (click)=\"toggle()\">\n <div class=\"select-value\">\n <span [class.placeholder]=\"!hasValue()\">\n {{ selectedLabel() }}\n </span>\n </div>\n <div class=\"select-actions\">\n @if (clearable() && hasValue() && !disabled()) {\n <button class=\"select-clear\" (click)=\"clear($event)\">\n <i class=\"ph ph-x\"></i>\n </button>\n }\n @if (loading()) {\n <div class=\"select-loader-trigger\"></div>\n } @else {\n <i class=\"ph ph-caret-down select-arrow\"></i>\n }\n </div>\n </div>\n\n @if (isOpen()) {\n <div class=\"select-dropdown\">\n @if (searchable()) {\n <div class=\"select-search\">\n <i class=\"ph ph-magnifying-glass select-search-icon\"></i>\n <input type=\"text\"\n [placeholder]=\"searchConfig().placeholder\"\n [value]=\"searchTerm()\"\n (input)=\"onSearch($event)\"\n (click)=\"$event.stopPropagation()\">\n </div>\n }\n <div class=\"select-options\"\n role=\"listbox\"\n [id]=\"selectId + '-listbox'\"\n [attr.aria-multiselectable]=\"multiple() || null\"\n (scroll)=\"onScroll($event)\">\n @for (item of filteredOptions(); track getOptionKey(item)) {\n @if (isOptionGroup(item)) {\n <div class=\"select-group\" role=\"group\" [attr.aria-label]=\"item.label\">\n <div class=\"select-group-label\">{{ item.label }}</div>\n @for (opt of item.options; track opt.label) {\n <div class=\"select-option\"\n role=\"option\"\n [id]=\"selectId + '-' + opt.value\"\n [attr.aria-selected]=\"isSelected(opt)\"\n [attr.aria-disabled]=\"(item.disabled || opt.disabled) ? true : null\"\n [attr.tabindex]=\"(item.disabled || opt.disabled) ? -1 : null\"\n [class.selected]=\"isSelected(opt)\"\n [class.disabled]=\"item.disabled || opt.disabled\"\n [class.focused]=\"getFlatIndex(opt) === focusedIndex()\"\n (click)=\"select(opt, !!item.disabled)\">\n @if (opt.icon) { <i [class]=\"'ph ph-' + opt.icon\" aria-hidden=\"true\"></i> }\n <div class=\"select-option-content\">\n <span class=\"select-option-label\">{{ opt.label }}</span>\n @if (opt.description) { <span class=\"select-option-description\">{{ opt.description }}</span> }\n </div>\n </div>\n }\n </div>\n } @else {\n <div class=\"select-option\"\n role=\"option\"\n [id]=\"selectId + '-' + item.value\"\n [attr.aria-selected]=\"isSelected(item)\"\n [attr.aria-disabled]=\"item.disabled ? true : null\"\n [attr.tabindex]=\"item.disabled ? -1 : null\"\n [class.selected]=\"isSelected(item)\"\n [class.disabled]=\"item.disabled\"\n [class.focused]=\"getFlatIndex(item) === focusedIndex()\"\n (click)=\"select(item)\">\n @if (item.icon) { <i [class]=\"'ph ph-' + item.icon\" aria-hidden=\"true\"></i> }\n <div class=\"select-option-content\">\n <span class=\"select-option-label\">{{ item.label }}</span>\n @if (item.description) { <span class=\"select-option-description\">{{ item.description }}</span> }\n </div>\n </div>\n }\n } @empty {\n <div class=\"select-no-results\">Aucun r\u00E9sultat</div>\n }\n </div>\n </div>\n }\n </div>\n\n @if (error()) {\n <div id=\"error-message\" class=\"select-error-message\" role=\"alert\">{{ error() }}</div>\n }\n @if (!error() && success()) {\n <div id=\"success-message\" class=\"select-success-message\" role=\"status\">{{ success() }}</div>\n }\n @if (!error() && !success() && hint()) {\n <div id=\"hint-message\" class=\"select-hint\">{{ hint() }}</div>\n }\n</div>\n", styles: [":host{display:block;width:100%;max-width:18.75rem}:host.full-width{max-width:none}.select-container{width:100%}.select-trigger-wrapper{position:relative}.select-label{display:block;color:var(--text-color);font-size:.875rem;font-weight:500;margin-bottom:.25rem;cursor:pointer}.select-trigger{display:flex;align-items:center;justify-content:space-between;width:100%;height:2.5rem;padding:0 1rem;background:var(--surface-card);border:.0625rem solid var(--surface-border);border-radius:var(--border-radius);cursor:pointer;box-sizing:border-box}.select-trigger:focus{border-color:var(--primary-color);outline:none}:host.error .select-trigger{border-color:var(--danger-color)}:host.error .select-trigger:focus{box-shadow:0 0 0 .125rem var(--focus-ring-error)}:host.success .select-trigger{border-color:var(--success-color)}:host.success .select-trigger:focus{box-shadow:0 0 0 .125rem var(--focus-ring-success)}:host.disabled .select-trigger{background:var(--surface-ground);cursor:not-allowed;opacity:var(--opacity-disabled)}.select-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.select-actions{display:flex;align-items:center;gap:.5rem;flex-shrink:0}.select-clear{background:none;border:none;cursor:pointer;padding:0;color:var(--text-color-secondary);display:flex}.select-clear:hover{color:var(--danger-color)}.select-loader-trigger{width:1rem;height:1rem;border:2px solid var(--surface-border);border-top-color:var(--primary-color);border-radius:50%;animation:spin .8s linear infinite}.select-arrow{transition:transform .2s;font-size:1rem;color:var(--text-color-secondary)}:host[aria-expanded=true] .select-arrow{transform:rotate(180deg)}.select-dropdown{position:absolute;top:calc(100% + .25rem);left:0;right:0;z-index:1000;background:var(--surface-card);border:.0625rem solid var(--surface-border);border-radius:var(--border-radius);box-shadow:var(--shadow-lg)}.select-search{position:relative;padding:.5rem;border-bottom:.0625rem solid var(--surface-border)}.select-search-icon{position:absolute;left:1.25rem;top:50%;transform:translateY(-50%);color:var(--text-color-secondary);font-size:.875rem;pointer-events:none}.select-search input{width:100%;height:2rem;padding:0 .75rem 0 2rem;background:var(--surface-ground);border:.0625rem solid var(--surface-border);border-radius:var(--border-radius);color:var(--text-color);font-size:.875rem;outline:none;box-sizing:border-box;transition:border-color .15s}.select-search input::placeholder{color:var(--text-color-secondary)}.select-search input:focus{border-color:var(--primary-color)}.select-options{max-height:15rem;overflow-y:auto}.select-group-label{padding:.5rem 1rem;font-size:.75rem;font-weight:600;color:var(--text-color-secondary);background:var(--surface-ground)}.select-option{padding:.625rem 1rem;cursor:pointer;display:flex;align-items:flex-start;gap:.5rem}.select-option:hover{background:var(--surface-hover)}.select-option.selected{background:rgba(var(--primary-color-rgb),.1);color:var(--primary-color);font-weight:500}.select-option.focused{background:var(--surface-hover)}.select-option.disabled{opacity:var(--opacity-disabled);cursor:not-allowed}.select-option i{flex-shrink:0;line-height:1.4}.select-option-content{flex:1;min-width:0;display:flex;flex-direction:column;gap:.125rem}.select-option-label{min-width:0}.select-option-description{font-size:.75rem;color:var(--text-color-secondary)}.select-error-message,.select-success-message,.select-hint{font-size:.875rem;margin-top:.25rem}.select-error-message{color:var(--danger-color)}.select-success-message{color:var(--success-color)}.select-hint{color:var(--text-color-secondary)}:host.small .select-trigger{text-overflow:ellipsis;height:2rem;font-size:.875rem}:host.large .select-trigger{text-overflow:ellipsis;height:3rem;font-size:1.125rem}@keyframes spin{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3008
3151
|
}
|
|
3009
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
3152
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: PshSelectComponent, decorators: [{
|
|
3010
3153
|
type: Component,
|
|
3011
3154
|
args: [{ selector: 'psh-select', imports: [CommonModule, FormsModule], providers: [
|
|
3012
3155
|
{
|
|
@@ -3015,16 +3158,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
|
|
|
3015
3158
|
multi: true
|
|
3016
3159
|
}
|
|
3017
3160
|
], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
3018
|
-
'[class.
|
|
3019
|
-
'[class.
|
|
3020
|
-
'[class.
|
|
3021
|
-
'[class.
|
|
3022
|
-
'[class.
|
|
3023
|
-
'[class.
|
|
3161
|
+
'[class.full-width]': 'fullWidth()',
|
|
3162
|
+
'[class.small]': 'size() === "small"',
|
|
3163
|
+
'[class.large]': 'size() === "large"',
|
|
3164
|
+
'[class.error]': '!!error()',
|
|
3165
|
+
'[class.success]': '!!success()',
|
|
3166
|
+
'[class.disabled]': 'disabled()',
|
|
3167
|
+
'[class.loading]': 'loading()',
|
|
3024
3168
|
'[attr.aria-expanded]': 'isOpen().toString()',
|
|
3025
3169
|
'[attr.data-state]': 'state()'
|
|
3026
|
-
}, template: "<div class=\"select-container\">\n
|
|
3027
|
-
}], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], multiplePlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiplePlaceholder", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], searchConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchConfig", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], searched: [{ type: i0.Output, args: ["searched"] }], scrollEnd: [{ type: i0.Output, args: ["scrollEnd"] }] } });
|
|
3170
|
+
}, template: "<div class=\"select-container\">\n @if (label()) {\n <label class=\"select-label\" [attr.for]=\"selectId\" (click)=\"focusSelect()\" [class.required]=\"required()\">\n {{ label() }}\n @if (required()) { <span class=\"required-mark\">*</span> }\n </label>\n }\n\n <div class=\"select-trigger-wrapper\">\n <div class=\"select-trigger\"\n role=\"combobox\"\n [id]=\"selectId\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-controls]=\"selectId + '-listbox'\"\n [attr.aria-activedescendant]=\"activeDescendant()\"\n [attr.aria-label]=\"computedAriaLabel()\"\n [attr.aria-invalid]=\"!!error()\"\n [attr.aria-required]=\"required()\"\n [attr.aria-disabled]=\"disabled()\"\n [attr.aria-busy]=\"loading()\"\n [attr.aria-describedby]=\"describedBy()\"\n [attr.tabindex]=\"disabled() || loading() ? -1 : 0\"\n (keydown)=\"handleKeydown($event)\"\n (click)=\"toggle()\">\n <div class=\"select-value\">\n <span [class.placeholder]=\"!hasValue()\">\n {{ selectedLabel() }}\n </span>\n </div>\n <div class=\"select-actions\">\n @if (clearable() && hasValue() && !disabled()) {\n <button class=\"select-clear\" (click)=\"clear($event)\">\n <i class=\"ph ph-x\"></i>\n </button>\n }\n @if (loading()) {\n <div class=\"select-loader-trigger\"></div>\n } @else {\n <i class=\"ph ph-caret-down select-arrow\"></i>\n }\n </div>\n </div>\n\n @if (isOpen()) {\n <div class=\"select-dropdown\">\n @if (searchable()) {\n <div class=\"select-search\">\n <i class=\"ph ph-magnifying-glass select-search-icon\"></i>\n <input type=\"text\"\n [placeholder]=\"searchConfig().placeholder\"\n [value]=\"searchTerm()\"\n (input)=\"onSearch($event)\"\n (click)=\"$event.stopPropagation()\">\n </div>\n }\n <div class=\"select-options\"\n role=\"listbox\"\n [id]=\"selectId + '-listbox'\"\n [attr.aria-multiselectable]=\"multiple() || null\"\n (scroll)=\"onScroll($event)\">\n @for (item of filteredOptions(); track getOptionKey(item)) {\n @if (isOptionGroup(item)) {\n <div class=\"select-group\" role=\"group\" [attr.aria-label]=\"item.label\">\n <div class=\"select-group-label\">{{ item.label }}</div>\n @for (opt of item.options; track opt.label) {\n <div class=\"select-option\"\n role=\"option\"\n [id]=\"selectId + '-' + opt.value\"\n [attr.aria-selected]=\"isSelected(opt)\"\n [attr.aria-disabled]=\"(item.disabled || opt.disabled) ? true : null\"\n [attr.tabindex]=\"(item.disabled || opt.disabled) ? -1 : null\"\n [class.selected]=\"isSelected(opt)\"\n [class.disabled]=\"item.disabled || opt.disabled\"\n [class.focused]=\"getFlatIndex(opt) === focusedIndex()\"\n (click)=\"select(opt, !!item.disabled)\">\n @if (opt.icon) { <i [class]=\"'ph ph-' + opt.icon\" aria-hidden=\"true\"></i> }\n <div class=\"select-option-content\">\n <span class=\"select-option-label\">{{ opt.label }}</span>\n @if (opt.description) { <span class=\"select-option-description\">{{ opt.description }}</span> }\n </div>\n </div>\n }\n </div>\n } @else {\n <div class=\"select-option\"\n role=\"option\"\n [id]=\"selectId + '-' + item.value\"\n [attr.aria-selected]=\"isSelected(item)\"\n [attr.aria-disabled]=\"item.disabled ? true : null\"\n [attr.tabindex]=\"item.disabled ? -1 : null\"\n [class.selected]=\"isSelected(item)\"\n [class.disabled]=\"item.disabled\"\n [class.focused]=\"getFlatIndex(item) === focusedIndex()\"\n (click)=\"select(item)\">\n @if (item.icon) { <i [class]=\"'ph ph-' + item.icon\" aria-hidden=\"true\"></i> }\n <div class=\"select-option-content\">\n <span class=\"select-option-label\">{{ item.label }}</span>\n @if (item.description) { <span class=\"select-option-description\">{{ item.description }}</span> }\n </div>\n </div>\n }\n } @empty {\n <div class=\"select-no-results\">Aucun r\u00E9sultat</div>\n }\n </div>\n </div>\n }\n </div>\n\n @if (error()) {\n <div id=\"error-message\" class=\"select-error-message\" role=\"alert\">{{ error() }}</div>\n }\n @if (!error() && success()) {\n <div id=\"success-message\" class=\"select-success-message\" role=\"status\">{{ success() }}</div>\n }\n @if (!error() && !success() && hint()) {\n <div id=\"hint-message\" class=\"select-hint\">{{ hint() }}</div>\n }\n</div>\n", styles: [":host{display:block;width:100%;max-width:18.75rem}:host.full-width{max-width:none}.select-container{width:100%}.select-trigger-wrapper{position:relative}.select-label{display:block;color:var(--text-color);font-size:.875rem;font-weight:500;margin-bottom:.25rem;cursor:pointer}.select-trigger{display:flex;align-items:center;justify-content:space-between;width:100%;height:2.5rem;padding:0 1rem;background:var(--surface-card);border:.0625rem solid var(--surface-border);border-radius:var(--border-radius);cursor:pointer;box-sizing:border-box}.select-trigger:focus{border-color:var(--primary-color);outline:none}:host.error .select-trigger{border-color:var(--danger-color)}:host.error .select-trigger:focus{box-shadow:0 0 0 .125rem var(--focus-ring-error)}:host.success .select-trigger{border-color:var(--success-color)}:host.success .select-trigger:focus{box-shadow:0 0 0 .125rem var(--focus-ring-success)}:host.disabled .select-trigger{background:var(--surface-ground);cursor:not-allowed;opacity:var(--opacity-disabled)}.select-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.select-actions{display:flex;align-items:center;gap:.5rem;flex-shrink:0}.select-clear{background:none;border:none;cursor:pointer;padding:0;color:var(--text-color-secondary);display:flex}.select-clear:hover{color:var(--danger-color)}.select-loader-trigger{width:1rem;height:1rem;border:2px solid var(--surface-border);border-top-color:var(--primary-color);border-radius:50%;animation:spin .8s linear infinite}.select-arrow{transition:transform .2s;font-size:1rem;color:var(--text-color-secondary)}:host[aria-expanded=true] .select-arrow{transform:rotate(180deg)}.select-dropdown{position:absolute;top:calc(100% + .25rem);left:0;right:0;z-index:1000;background:var(--surface-card);border:.0625rem solid var(--surface-border);border-radius:var(--border-radius);box-shadow:var(--shadow-lg)}.select-search{position:relative;padding:.5rem;border-bottom:.0625rem solid var(--surface-border)}.select-search-icon{position:absolute;left:1.25rem;top:50%;transform:translateY(-50%);color:var(--text-color-secondary);font-size:.875rem;pointer-events:none}.select-search input{width:100%;height:2rem;padding:0 .75rem 0 2rem;background:var(--surface-ground);border:.0625rem solid var(--surface-border);border-radius:var(--border-radius);color:var(--text-color);font-size:.875rem;outline:none;box-sizing:border-box;transition:border-color .15s}.select-search input::placeholder{color:var(--text-color-secondary)}.select-search input:focus{border-color:var(--primary-color)}.select-options{max-height:15rem;overflow-y:auto}.select-group-label{padding:.5rem 1rem;font-size:.75rem;font-weight:600;color:var(--text-color-secondary);background:var(--surface-ground)}.select-option{padding:.625rem 1rem;cursor:pointer;display:flex;align-items:flex-start;gap:.5rem}.select-option:hover{background:var(--surface-hover)}.select-option.selected{background:rgba(var(--primary-color-rgb),.1);color:var(--primary-color);font-weight:500}.select-option.focused{background:var(--surface-hover)}.select-option.disabled{opacity:var(--opacity-disabled);cursor:not-allowed}.select-option i{flex-shrink:0;line-height:1.4}.select-option-content{flex:1;min-width:0;display:flex;flex-direction:column;gap:.125rem}.select-option-label{min-width:0}.select-option-description{font-size:.75rem;color:var(--text-color-secondary)}.select-error-message,.select-success-message,.select-hint{font-size:.875rem;margin-top:.25rem}.select-error-message{color:var(--danger-color)}.select-success-message{color:var(--success-color)}.select-hint{color:var(--text-color-secondary)}:host.small .select-trigger{text-overflow:ellipsis;height:2rem;font-size:.875rem}:host.large .select-trigger{text-overflow:ellipsis;height:3rem;font-size:1.125rem}@keyframes spin{to{transform:rotate(360deg)}}\n"] }]
|
|
3171
|
+
}], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], multiplePlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiplePlaceholder", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], success: [{ type: i0.Input, args: [{ isSignal: true, alias: "success", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], maxSelections: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSelections", required: false }] }], minSelections: [{ type: i0.Input, args: [{ isSignal: true, alias: "minSelections", required: false }] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], searchConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchConfig", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], searched: [{ type: i0.Output, args: ["searched"] }], scrollEnd: [{ type: i0.Output, args: ["scrollEnd"] }] } });
|
|
3028
3172
|
|
|
3029
3173
|
const SIDEBAR_CONFIG = new InjectionToken('SIDEBAR_CONFIG', {
|
|
3030
3174
|
factory: () => ({
|
|
@@ -3053,24 +3197,24 @@ class PshSidebarComponent {
|
|
|
3053
3197
|
this.focusedElementBeforeOpen = null;
|
|
3054
3198
|
this.mediaQueryList = null;
|
|
3055
3199
|
this.mediaQueryHandler = null;
|
|
3056
|
-
this.open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
|
|
3057
|
-
this.mode = input(this.config.mode ?? 'fixed', ...(ngDevMode ? [{ debugName: "mode" }] : []));
|
|
3058
|
-
this.position = input(this.config.position ?? 'left', ...(ngDevMode ? [{ debugName: "position" }] : []));
|
|
3059
|
-
this.width = input(this.config.width ?? '250px', ...(ngDevMode ? [{ debugName: "width" }] : []));
|
|
3060
|
-
this.breakpoint = input(this.config.breakpoint ?? '768px', ...(ngDevMode ? [{ debugName: "breakpoint" }] : []));
|
|
3061
|
-
this.autoFocus = input(this.config.autoFocus ?? true, ...(ngDevMode ? [{ debugName: "autoFocus" }] : []));
|
|
3062
|
-
this.ariaLabel = input(this.config.ariaLabel ?? 'Sidebar navigation', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
|
|
3063
|
-
this.closeOnBackdrop = input(this.config.closeOnBackdrop ?? true, ...(ngDevMode ? [{ debugName: "closeOnBackdrop" }] : []));
|
|
3064
|
-
this.closeOnEscape = input(this.config.closeOnEscape ?? true, ...(ngDevMode ? [{ debugName: "closeOnEscape" }] : []));
|
|
3200
|
+
this.open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
|
|
3201
|
+
this.mode = input(this.config.mode ?? 'fixed', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
|
|
3202
|
+
this.position = input(this.config.position ?? 'left', ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
|
|
3203
|
+
this.width = input(this.config.width ?? '250px', ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
|
|
3204
|
+
this.breakpoint = input(this.config.breakpoint ?? '768px', ...(ngDevMode ? [{ debugName: "breakpoint" }] : /* istanbul ignore next */ []));
|
|
3205
|
+
this.autoFocus = input(this.config.autoFocus ?? true, ...(ngDevMode ? [{ debugName: "autoFocus" }] : /* istanbul ignore next */ []));
|
|
3206
|
+
this.ariaLabel = input(this.config.ariaLabel ?? 'Sidebar navigation', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
3207
|
+
this.closeOnBackdrop = input(this.config.closeOnBackdrop ?? true, ...(ngDevMode ? [{ debugName: "closeOnBackdrop" }] : /* istanbul ignore next */ []));
|
|
3208
|
+
this.closeOnEscape = input(this.config.closeOnEscape ?? true, ...(ngDevMode ? [{ debugName: "closeOnEscape" }] : /* istanbul ignore next */ []));
|
|
3065
3209
|
this.toggle = output();
|
|
3066
3210
|
this.opened = output();
|
|
3067
3211
|
this.closed = output();
|
|
3068
3212
|
this.transitionStart = output();
|
|
3069
|
-
this.mobileSignal = signal(false, ...(ngDevMode ? [{ debugName: "mobileSignal" }] : []));
|
|
3213
|
+
this.mobileSignal = signal(false, ...(ngDevMode ? [{ debugName: "mobileSignal" }] : /* istanbul ignore next */ []));
|
|
3070
3214
|
this.previousOpenState = null;
|
|
3071
|
-
this.isMobile = computed(() => this.mobileSignal(), ...(ngDevMode ? [{ debugName: "isMobile" }] : []));
|
|
3072
|
-
this.effectiveMode = computed(() => this.isMobile() ? 'overlay' : this.mode(), ...(ngDevMode ? [{ debugName: "effectiveMode" }] : []));
|
|
3073
|
-
this.state = computed(() => this.getState(), ...(ngDevMode ? [{ debugName: "state" }] : []));
|
|
3215
|
+
this.isMobile = computed(() => this.mobileSignal(), ...(ngDevMode ? [{ debugName: "isMobile" }] : /* istanbul ignore next */ []));
|
|
3216
|
+
this.effectiveMode = computed(() => this.isMobile() ? 'overlay' : this.mode(), ...(ngDevMode ? [{ debugName: "effectiveMode" }] : /* istanbul ignore next */ []));
|
|
3217
|
+
this.state = computed(() => this.getState(), ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
|
|
3074
3218
|
this.escapeHandler = (event) => {
|
|
3075
3219
|
if (event.key === 'Escape' && this.closeOnEscape() && this.effectiveMode() === 'overlay') {
|
|
3076
3220
|
this.closeSidebar();
|
|
@@ -3203,10 +3347,10 @@ class PshSidebarComponent {
|
|
|
3203
3347
|
this.removeEventListeners();
|
|
3204
3348
|
this.focusedElementBeforeOpen = null;
|
|
3205
3349
|
}
|
|
3206
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
3207
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
3350
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: PshSidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3351
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", type: PshSidebarComponent, isStandalone: true, selector: "psh-sidebar", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, breakpoint: { classPropertyName: "breakpoint", publicName: "breakpoint", isSignal: true, isRequired: false, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdrop: { classPropertyName: "closeOnBackdrop", publicName: "closeOnBackdrop", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", toggle: "toggle", opened: "opened", closed: "closed", transitionStart: "transitionStart" }, host: { attributes: { "role": "complementary" }, properties: { "attr.aria-label": "ariaLabel()", "attr.aria-hidden": "!open()", "attr.aria-expanded": "open()", "attr.aria-modal": "effectiveMode() === \"overlay\" && open()", "attr.data-state": "state()" } }, ngImport: i0, template: "<div\n class=\"sidebar\"\n [class.open]=\"open()\"\n [class.fixed]=\"effectiveMode() === 'fixed'\"\n [class.overlay]=\"effectiveMode() === 'overlay'\"\n [class.left]=\"position() === 'left'\"\n [class.right]=\"position() === 'right'\"\n [style.width]=\"width()\"\n [style.--sidebar-width]=\"width()\"\n>\n <div class=\"sidebar-content\">\n <ng-content></ng-content>\n </div>\n</div>\n\n@if (effectiveMode() === 'overlay' && open()) {\n <div\n class=\"sidebar-backdrop\"\n role=\"presentation\"\n (click)=\"handleBackdropClick()\"\n ></div>\n}", styles: [":host{display:contents}.sidebar{background:var(--surface-card);display:flex;flex-direction:column;transition:all var(--animation-duration-default) var(--animation-easing-smooth)}.sidebar.overlay.left{left:0}.sidebar.overlay.right{right:0}.sidebar.fixed{position:relative;width:var(--sidebar-width);border:var(--border-width-1) solid var(--surface-border);flex-shrink:0}.sidebar.fixed.left{border-right:var(--border-width-1) solid var(--surface-border);border-left:none}.sidebar.fixed.right{border-left:var(--border-width-1) solid var(--surface-border);border-right:none}.sidebar.overlay{position:fixed;top:0;height:100vh;z-index:var(--z-index-modal);box-shadow:var(--shadow-lg);transition:transform var(--animation-duration-default) var(--animation-easing-smooth)}.sidebar.overlay.left{transform:translate(-100%)}.sidebar.overlay.right{transform:translate(100%)}.sidebar.overlay.open{transform:translate(0)}.sidebar.fixed:not(.open){display:none}.sidebar-content{flex:1;overflow-y:auto;overflow-x:hidden;padding:var(--spacing-md);transition:all var(--animation-duration-default) var(--animation-easing-smooth);min-width:var(--sidebar-width);opacity:1;transform:translate(0)}.sidebar-backdrop{position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(var(--surface-900-rgb),.5);-webkit-backdrop-filter:blur(var(--size-1));backdrop-filter:blur(var(--size-1));z-index:var(--z-index-modal-backdrop);animation:fadeIn var(--animation-duration-default) var(--animation-easing-default)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.sidebar.overlay{max-width:100vw}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3208
3352
|
}
|
|
3209
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
3353
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: PshSidebarComponent, decorators: [{
|
|
3210
3354
|
type: Component,
|
|
3211
3355
|
args: [{ selector: 'psh-sidebar', imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
3212
3356
|
'role': 'complementary',
|
|
@@ -3228,13 +3372,13 @@ const SPINLOADER_CONFIG = new InjectionToken('SPINLOADER_CONFIG', {
|
|
|
3228
3372
|
class PshSpinLoaderComponent {
|
|
3229
3373
|
constructor() {
|
|
3230
3374
|
this.config = inject(SPINLOADER_CONFIG);
|
|
3231
|
-
this.variant = input(this.config.variant ?? 'circle', ...(ngDevMode ? [{ debugName: "variant" }] : []));
|
|
3232
|
-
this.size = input(this.config.size ?? 'medium', ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
3233
|
-
this.color = input(this.config.color ?? 'primary', ...(ngDevMode ? [{ debugName: "color" }] : []));
|
|
3234
|
-
this.label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
|
|
3235
|
-
this.ariaLabel = input('Chargement en cours', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
|
|
3236
|
-
this.ariaLive = input('polite', ...(ngDevMode ? [{ debugName: "ariaLive" }] : []));
|
|
3237
|
-
this.reduceMotion = signal(false, ...(ngDevMode ? [{ debugName: "reduceMotion" }] : []));
|
|
3375
|
+
this.variant = input(this.config.variant ?? 'circle', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
3376
|
+
this.size = input(this.config.size ?? 'medium', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
3377
|
+
this.color = input(this.config.color ?? 'primary', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
|
|
3378
|
+
this.label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
|
|
3379
|
+
this.ariaLabel = input('Chargement en cours', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
3380
|
+
this.ariaLive = input('polite', ...(ngDevMode ? [{ debugName: "ariaLive" }] : /* istanbul ignore next */ []));
|
|
3381
|
+
this.reduceMotion = signal(false, ...(ngDevMode ? [{ debugName: "reduceMotion" }] : /* istanbul ignore next */ []));
|
|
3238
3382
|
effect(() => {
|
|
3239
3383
|
if (typeof window !== 'undefined') {
|
|
3240
3384
|
const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
|
|
@@ -3244,10 +3388,10 @@ class PshSpinLoaderComponent {
|
|
|
3244
3388
|
}
|
|
3245
3389
|
});
|
|
3246
3390
|
}
|
|
3247
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
3248
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
3391
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: PshSpinLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3392
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", type: PshSpinLoaderComponent, isStandalone: true, selector: "psh-spinloader", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLive: { classPropertyName: "ariaLive", publicName: "ariaLive", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "status" }, properties: { "attr.aria-label": "ariaLabel()", "attr.aria-live": "ariaLive()", "attr.aria-busy": "true", "attr.data-state": "variant()", "class.small": "size() === \"small\"", "class.large": "size() === \"large\"", "class.reduce-motion": "reduceMotion()" } }, ngImport: i0, template: "@switch (variant()) {\n @case ('circle') {\n <div class=\"spinner-circle\" [class]=\"color()\"></div>\n }\n @case ('dots') {\n <div class=\"spinner-dots\" [class]=\"color()\">\n <div class=\"dot\"></div>\n <div class=\"dot\"></div>\n <div class=\"dot\"></div>\n </div>\n }\n @case ('pulse') {\n <div class=\"spinner-pulse\" [class]=\"color()\">\n <div class=\"pulse\"></div>\n <div class=\"pulse\"></div>\n <div class=\"pulse\"></div>\n </div>\n }\n}\n\n@if (label()) {\n <span class=\"spinner-label\">{{ label() }}</span>\n}\n", styles: [":host{--spinner-size-sm: var(--size-6);--spinner-size-md: var(--size-8);--spinner-size-lg: var(--size-12);--spinner-dot-size-sm: var(--size-1-5);--spinner-dot-size-md: var(--size-2);--spinner-dot-size-lg: var(--size-3);--spinner-pulse-width-sm: var(--size-1-5);--spinner-pulse-width-md: var(--size-2);--spinner-pulse-width-lg: var(--size-3);--spinner-pulse-height-sm: var(--size-6);--spinner-pulse-height-md: var(--size-8);--spinner-pulse-height-lg: var(--size-12);display:inline-flex;flex-direction:column;align-items:center;gap:var(--spacing-sm)}.spinner-circle{width:var(--spinner-size-md);height:var(--spinner-size-md);border:var(--border-width-2) solid var(--surface-border);border-radius:var(--radius-full);animation:spin 1s var(--animation-easing-default) infinite}.spinner-circle.primary{border-top-color:var(--primary-color)}.spinner-circle.secondary{border-top-color:var(--secondary-color)}.spinner-circle.success{border-top-color:var(--success-color)}.spinner-circle.warning{border-top-color:var(--warning-color)}.spinner-circle.danger{border-top-color:var(--danger-color)}.spinner-dots{display:flex;gap:var(--spacing-xs)}.spinner-dots .dot{width:var(--spinner-dot-size-md);height:var(--spinner-dot-size-md);border-radius:var(--radius-full);animation:bounce var(--animation-duration-slow) var(--animation-easing-in-out) infinite}.spinner-dots.primary .dot{background:var(--primary-color)}.spinner-dots.secondary .dot{background:var(--secondary-color)}.spinner-dots.success .dot{background:var(--success-color)}.spinner-dots.warning .dot{background:var(--warning-color)}.spinner-dots.danger .dot{background:var(--danger-color)}.spinner-dots .dot:nth-child(2){animation-delay:.1s}.spinner-dots .dot:nth-child(3){animation-delay:.2s}.spinner-pulse{display:flex;gap:var(--spacing-xs)}.spinner-pulse .pulse{width:var(--spinner-pulse-width-md);height:var(--spinner-pulse-height-md);animation:pulse .8s var(--animation-easing-in-out) infinite}.spinner-pulse.primary .pulse{background:var(--primary-color)}.spinner-pulse.secondary .pulse{background:var(--secondary-color)}.spinner-pulse.success .pulse{background:var(--success-color)}.spinner-pulse.warning .pulse{background:var(--warning-color)}.spinner-pulse.danger .pulse{background:var(--danger-color)}.spinner-pulse .pulse:nth-child(2){animation-delay:.1s}.spinner-pulse .pulse:nth-child(3){animation-delay:.2s}:host.small .spinner-circle{width:var(--spinner-size-sm);height:var(--spinner-size-sm);border-width:var(--border-width-1)}:host.small .spinner-dots .dot{width:var(--spinner-dot-size-sm);height:var(--spinner-dot-size-sm)}:host.small .spinner-pulse .pulse{width:var(--spinner-pulse-width-sm);height:var(--spinner-pulse-height-sm)}:host.large .spinner-circle{width:var(--spinner-size-lg);height:var(--spinner-size-lg);border-width:var(--border-width-4)}:host.large .spinner-dots .dot{width:var(--spinner-dot-size-lg);height:var(--spinner-dot-size-lg)}:host.large .spinner-pulse .pulse{width:var(--spinner-pulse-width-lg);height:var(--spinner-pulse-height-lg)}.spinner-label{color:var(--text-color-secondary);font-size:var(--font-size-sm)}:host.small .spinner-label{font-size:var(--font-size-xs)}:host.large .spinner-label{font-size:var(--font-size-base)}:host.reduce-motion .spinner-circle,:host.reduce-motion .spinner-dots .dot,:host.reduce-motion .spinner-pulse .pulse{animation-duration:2s}@keyframes spin{to{transform:rotate(360deg)}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(calc(-1 * var(--animation-distance-sm)))}}@keyframes pulse{0%,to{transform:scaleY(1)}50%{transform:scaleY(.4)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3249
3393
|
}
|
|
3250
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
3394
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: PshSpinLoaderComponent, decorators: [{
|
|
3251
3395
|
type: Component,
|
|
3252
3396
|
args: [{ selector: 'psh-spinloader', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
3253
3397
|
'role': 'status',
|
|
@@ -3263,17 +3407,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
|
|
|
3263
3407
|
|
|
3264
3408
|
class PshStepComponent {
|
|
3265
3409
|
constructor() {
|
|
3266
|
-
this.title = input.required(...(ngDevMode ? [{ debugName: "title" }] : []));
|
|
3267
|
-
this.subtitle = input(...(ngDevMode ? [undefined, { debugName: "subtitle" }] : []));
|
|
3268
|
-
this.icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
|
|
3269
|
-
this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
3270
|
-
this.completed = input(false, ...(ngDevMode ? [{ debugName: "completed" }] : []));
|
|
3271
|
-
this.loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
|
|
3272
|
-
this.error = input(...(ngDevMode ? [undefined, { debugName: "error" }] : []));
|
|
3273
|
-
this.warning = input(...(ngDevMode ? [undefined, { debugName: "warning" }] : []));
|
|
3274
|
-
this.success = input(...(ngDevMode ? [undefined, { debugName: "success" }] : []));
|
|
3275
|
-
this._index = signal(0, ...(ngDevMode ? [{ debugName: "_index" }] : []));
|
|
3276
|
-
this._isActive = signal(false, ...(ngDevMode ? [{ debugName: "_isActive" }] : []));
|
|
3410
|
+
this.title = input.required(...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
|
|
3411
|
+
this.subtitle = input(...(ngDevMode ? [undefined, { debugName: "subtitle" }] : /* istanbul ignore next */ []));
|
|
3412
|
+
this.icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
|
|
3413
|
+
this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
3414
|
+
this.completed = input(false, ...(ngDevMode ? [{ debugName: "completed" }] : /* istanbul ignore next */ []));
|
|
3415
|
+
this.loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
|
|
3416
|
+
this.error = input(...(ngDevMode ? [undefined, { debugName: "error" }] : /* istanbul ignore next */ []));
|
|
3417
|
+
this.warning = input(...(ngDevMode ? [undefined, { debugName: "warning" }] : /* istanbul ignore next */ []));
|
|
3418
|
+
this.success = input(...(ngDevMode ? [undefined, { debugName: "success" }] : /* istanbul ignore next */ []));
|
|
3419
|
+
this._index = signal(0, ...(ngDevMode ? [{ debugName: "_index" }] : /* istanbul ignore next */ []));
|
|
3420
|
+
this._isActive = signal(false, ...(ngDevMode ? [{ debugName: "_isActive" }] : /* istanbul ignore next */ []));
|
|
3277
3421
|
this.index = this._index.asReadonly();
|
|
3278
3422
|
this.isActive = this._isActive.asReadonly();
|
|
3279
3423
|
}
|
|
@@ -3283,10 +3427,10 @@ class PshStepComponent {
|
|
|
3283
3427
|
setActive(value) {
|
|
3284
3428
|
this._isActive.set(value);
|
|
3285
3429
|
}
|
|
3286
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
3287
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.
|
|
3430
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: PshStepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3431
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.2", type: PshStepComponent, isStandalone: true, selector: "psh-step", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, 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 }, success: { classPropertyName: "success", publicName: "success", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.step-content": "true", "class.active": "isActive()", "attr.role": "\"tabpanel\"", "attr.aria-labelledby": "\"step-\" + index()", "attr.id": "\"panel-\" + index()", "attr.tabindex": "isActive() ? 0 : -1", "style.display": "isActive() ? \"block\" : \"none\"" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3288
3432
|
}
|
|
3289
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
3433
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: PshStepComponent, decorators: [{
|
|
3290
3434
|
type: Component,
|
|
3291
3435
|
args: [{
|
|
3292
3436
|
selector: 'psh-step',
|
|
@@ -3321,15 +3465,15 @@ const STEPPER_CONFIG = new InjectionToken('STEPPER_CONFIG', {
|
|
|
3321
3465
|
class PshStepperComponent {
|
|
3322
3466
|
constructor() {
|
|
3323
3467
|
this.config = inject(STEPPER_CONFIG);
|
|
3324
|
-
this.activeStep = model(0, ...(ngDevMode ? [{ debugName: "activeStep" }] : []));
|
|
3325
|
-
this.variant = input(this.config.variant ?? 'default', ...(ngDevMode ? [{ debugName: "variant" }] : []));
|
|
3326
|
-
this.linear = input(this.config.linear ?? true, ...(ngDevMode ? [{ debugName: "linear" }] : []));
|
|
3327
|
-
this.ariaLabels = input(...(ngDevMode ? [undefined, { debugName: "ariaLabels" }] : []));
|
|
3328
|
-
this.beforeStepChange = input(...(ngDevMode ? [undefined, { debugName: "beforeStepChange" }] : []));
|
|
3468
|
+
this.activeStep = model(0, ...(ngDevMode ? [{ debugName: "activeStep" }] : /* istanbul ignore next */ []));
|
|
3469
|
+
this.variant = input(this.config.variant ?? 'default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
3470
|
+
this.linear = input(this.config.linear ?? true, ...(ngDevMode ? [{ debugName: "linear" }] : /* istanbul ignore next */ []));
|
|
3471
|
+
this.ariaLabels = input(...(ngDevMode ? [undefined, { debugName: "ariaLabels" }] : /* istanbul ignore next */ []));
|
|
3472
|
+
this.beforeStepChange = input(...(ngDevMode ? [undefined, { debugName: "beforeStepChange" }] : /* istanbul ignore next */ []));
|
|
3329
3473
|
this.stepChange = output();
|
|
3330
3474
|
this.completed = output();
|
|
3331
3475
|
this.navigationError = output();
|
|
3332
|
-
this.stepComponents = contentChildren(PshStepComponent, ...(ngDevMode ? [{ debugName: "stepComponents" }] : []));
|
|
3476
|
+
this.stepComponents = contentChildren(PshStepComponent, ...(ngDevMode ? [{ debugName: "stepComponents" }] : /* istanbul ignore next */ []));
|
|
3333
3477
|
this.steps = computed(() => this.stepComponents().map(step => ({
|
|
3334
3478
|
title: step.title(),
|
|
3335
3479
|
subtitle: step.subtitle(),
|
|
@@ -3340,14 +3484,14 @@ class PshStepperComponent {
|
|
|
3340
3484
|
error: step.error(),
|
|
3341
3485
|
warning: step.warning(),
|
|
3342
3486
|
success: step.success()
|
|
3343
|
-
})), ...(ngDevMode ? [{ debugName: "steps" }] : []));
|
|
3344
|
-
this.effectiveAriaLabels = computed(() => this.ariaLabels() ?? this.config.ariaLabels ?? DEFAULT_ARIA_LABELS$1, ...(ngDevMode ? [{ debugName: "effectiveAriaLabels" }] : []));
|
|
3345
|
-
this.isFirstStep = computed(() => this.activeStep() === 0, ...(ngDevMode ? [{ debugName: "isFirstStep" }] : []));
|
|
3346
|
-
this.isLastStep = computed(() => this.activeStep() === this.steps().length - 1, ...(ngDevMode ? [{ debugName: "isLastStep" }] : []));
|
|
3487
|
+
})), ...(ngDevMode ? [{ debugName: "steps" }] : /* istanbul ignore next */ []));
|
|
3488
|
+
this.effectiveAriaLabels = computed(() => this.ariaLabels() ?? this.config.ariaLabels ?? DEFAULT_ARIA_LABELS$1, ...(ngDevMode ? [{ debugName: "effectiveAriaLabels" }] : /* istanbul ignore next */ []));
|
|
3489
|
+
this.isFirstStep = computed(() => this.activeStep() === 0, ...(ngDevMode ? [{ debugName: "isFirstStep" }] : /* istanbul ignore next */ []));
|
|
3490
|
+
this.isLastStep = computed(() => this.activeStep() === this.steps().length - 1, ...(ngDevMode ? [{ debugName: "isLastStep" }] : /* istanbul ignore next */ []));
|
|
3347
3491
|
this.progress = computed(() => this.steps().length > 0
|
|
3348
3492
|
? ((this.activeStep() + 1) / this.steps().length) * 100
|
|
3349
|
-
: 0, ...(ngDevMode ? [{ debugName: "progress" }] : []));
|
|
3350
|
-
this.completedSteps = computed(() => this.steps().filter(step => step.completed).length, ...(ngDevMode ? [{ debugName: "completedSteps" }] : []));
|
|
3493
|
+
: 0, ...(ngDevMode ? [{ debugName: "progress" }] : /* istanbul ignore next */ []));
|
|
3494
|
+
this.completedSteps = computed(() => this.steps().filter(step => step.completed).length, ...(ngDevMode ? [{ debugName: "completedSteps" }] : /* istanbul ignore next */ []));
|
|
3351
3495
|
afterNextRender(() => {
|
|
3352
3496
|
this.syncStepStates();
|
|
3353
3497
|
});
|
|
@@ -3497,10 +3641,10 @@ class PshStepperComponent {
|
|
|
3497
3641
|
break;
|
|
3498
3642
|
}
|
|
3499
3643
|
}
|
|
3500
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
3501
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
3644
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: PshStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3645
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", 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
3646
|
}
|
|
3503
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
3647
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: PshStepperComponent, decorators: [{
|
|
3504
3648
|
type: Component,
|
|
3505
3649
|
args: [{ selector: 'psh-stepper', changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
3506
3650
|
'[class.stepper-container]': 'true',
|
|
@@ -3513,14 +3657,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
|
|
|
3513
3657
|
|
|
3514
3658
|
class PshFlowStepComponent {
|
|
3515
3659
|
constructor() {
|
|
3516
|
-
this.title = input.required(...(ngDevMode ? [{ debugName: "title" }] : []));
|
|
3517
|
-
this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
3518
|
-
this.completed = input(false, ...(ngDevMode ? [{ debugName: "completed" }] : []));
|
|
3519
|
-
this.loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
|
|
3520
|
-
this.error = input(...(ngDevMode ? [undefined, { debugName: "error" }] : []));
|
|
3521
|
-
this.warning = input(...(ngDevMode ? [undefined, { debugName: "warning" }] : []));
|
|
3522
|
-
this._index = signal(0, ...(ngDevMode ? [{ debugName: "_index" }] : []));
|
|
3523
|
-
this._isActive = signal(false, ...(ngDevMode ? [{ debugName: "_isActive" }] : []));
|
|
3660
|
+
this.title = input.required(...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
|
|
3661
|
+
this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
3662
|
+
this.completed = input(false, ...(ngDevMode ? [{ debugName: "completed" }] : /* istanbul ignore next */ []));
|
|
3663
|
+
this.loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
|
|
3664
|
+
this.error = input(...(ngDevMode ? [undefined, { debugName: "error" }] : /* istanbul ignore next */ []));
|
|
3665
|
+
this.warning = input(...(ngDevMode ? [undefined, { debugName: "warning" }] : /* istanbul ignore next */ []));
|
|
3666
|
+
this._index = signal(0, ...(ngDevMode ? [{ debugName: "_index" }] : /* istanbul ignore next */ []));
|
|
3667
|
+
this._isActive = signal(false, ...(ngDevMode ? [{ debugName: "_isActive" }] : /* istanbul ignore next */ []));
|
|
3524
3668
|
this.index = this._index.asReadonly();
|
|
3525
3669
|
this.isActive = this._isActive.asReadonly();
|
|
3526
3670
|
}
|
|
@@ -3530,10 +3674,10 @@ class PshFlowStepComponent {
|
|
|
3530
3674
|
setActive(value) {
|
|
3531
3675
|
this._isActive.set(value);
|
|
3532
3676
|
}
|
|
3533
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
3534
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.
|
|
3677
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: PshFlowStepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3678
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.2", 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 }); }
|
|
3535
3679
|
}
|
|
3536
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
3680
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: PshFlowStepComponent, decorators: [{
|
|
3537
3681
|
type: Component,
|
|
3538
3682
|
args: [{
|
|
3539
3683
|
selector: 'psh-flow-step',
|
|
@@ -3563,15 +3707,15 @@ const STATE_FLOW_INDICATOR_CONFIG = new InjectionToken('STATE_FLOW_INDICATOR_CON
|
|
|
3563
3707
|
class PshStateFlowIndicatorComponent {
|
|
3564
3708
|
constructor() {
|
|
3565
3709
|
this.config = inject(STATE_FLOW_INDICATOR_CONFIG);
|
|
3566
|
-
this.activeStep = model(0, ...(ngDevMode ? [{ debugName: "activeStep" }] : []));
|
|
3567
|
-
this.linear = input(this.config.linear ?? true, ...(ngDevMode ? [{ debugName: "linear" }] : []));
|
|
3568
|
-
this.size = input('medium', ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
3569
|
-
this.ariaLabels = input(...(ngDevMode ? [undefined, { debugName: "ariaLabels" }] : []));
|
|
3570
|
-
this.beforeStepChange = input(...(ngDevMode ? [undefined, { debugName: "beforeStepChange" }] : []));
|
|
3710
|
+
this.activeStep = model(0, ...(ngDevMode ? [{ debugName: "activeStep" }] : /* istanbul ignore next */ []));
|
|
3711
|
+
this.linear = input(this.config.linear ?? true, ...(ngDevMode ? [{ debugName: "linear" }] : /* istanbul ignore next */ []));
|
|
3712
|
+
this.size = input('medium', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
3713
|
+
this.ariaLabels = input(...(ngDevMode ? [undefined, { debugName: "ariaLabels" }] : /* istanbul ignore next */ []));
|
|
3714
|
+
this.beforeStepChange = input(...(ngDevMode ? [undefined, { debugName: "beforeStepChange" }] : /* istanbul ignore next */ []));
|
|
3571
3715
|
this.stepChange = output();
|
|
3572
3716
|
this.completed = output();
|
|
3573
3717
|
this.navigationError = output();
|
|
3574
|
-
this.stepComponents = contentChildren(PshFlowStepComponent, ...(ngDevMode ? [{ debugName: "stepComponents" }] : []));
|
|
3718
|
+
this.stepComponents = contentChildren(PshFlowStepComponent, ...(ngDevMode ? [{ debugName: "stepComponents" }] : /* istanbul ignore next */ []));
|
|
3575
3719
|
this.steps = computed(() => this.stepComponents().map(step => ({
|
|
3576
3720
|
title: step.title(),
|
|
3577
3721
|
disabled: step.disabled(),
|
|
@@ -3579,14 +3723,14 @@ class PshStateFlowIndicatorComponent {
|
|
|
3579
3723
|
loading: step.loading(),
|
|
3580
3724
|
error: step.error(),
|
|
3581
3725
|
warning: step.warning()
|
|
3582
|
-
})), ...(ngDevMode ? [{ debugName: "steps" }] : []));
|
|
3583
|
-
this.effectiveAriaLabels = computed(() => this.ariaLabels() ?? this.config.ariaLabels ?? DEFAULT_ARIA_LABELS, ...(ngDevMode ? [{ debugName: "effectiveAriaLabels" }] : []));
|
|
3584
|
-
this.isFirstStep = computed(() => this.activeStep() === 0, ...(ngDevMode ? [{ debugName: "isFirstStep" }] : []));
|
|
3585
|
-
this.isLastStep = computed(() => this.activeStep() === this.steps().length - 1, ...(ngDevMode ? [{ debugName: "isLastStep" }] : []));
|
|
3726
|
+
})), ...(ngDevMode ? [{ debugName: "steps" }] : /* istanbul ignore next */ []));
|
|
3727
|
+
this.effectiveAriaLabels = computed(() => this.ariaLabels() ?? this.config.ariaLabels ?? DEFAULT_ARIA_LABELS, ...(ngDevMode ? [{ debugName: "effectiveAriaLabels" }] : /* istanbul ignore next */ []));
|
|
3728
|
+
this.isFirstStep = computed(() => this.activeStep() === 0, ...(ngDevMode ? [{ debugName: "isFirstStep" }] : /* istanbul ignore next */ []));
|
|
3729
|
+
this.isLastStep = computed(() => this.activeStep() === this.steps().length - 1, ...(ngDevMode ? [{ debugName: "isLastStep" }] : /* istanbul ignore next */ []));
|
|
3586
3730
|
this.progress = computed(() => this.steps().length > 0
|
|
3587
3731
|
? ((this.activeStep() + 1) / this.steps().length) * 100
|
|
3588
|
-
: 0, ...(ngDevMode ? [{ debugName: "progress" }] : []));
|
|
3589
|
-
this.completedSteps = computed(() => this.steps().filter(step => step.completed).length, ...(ngDevMode ? [{ debugName: "completedSteps" }] : []));
|
|
3732
|
+
: 0, ...(ngDevMode ? [{ debugName: "progress" }] : /* istanbul ignore next */ []));
|
|
3733
|
+
this.completedSteps = computed(() => this.steps().filter(step => step.completed).length, ...(ngDevMode ? [{ debugName: "completedSteps" }] : /* istanbul ignore next */ []));
|
|
3590
3734
|
afterNextRender(() => {
|
|
3591
3735
|
this.syncStepStates();
|
|
3592
3736
|
});
|
|
@@ -3742,10 +3886,10 @@ class PshStateFlowIndicatorComponent {
|
|
|
3742
3886
|
break;
|
|
3743
3887
|
}
|
|
3744
3888
|
}
|
|
3745
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
3746
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
3889
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: PshStateFlowIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3890
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", 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 }); }
|
|
3747
3891
|
}
|
|
3748
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
3892
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: PshStateFlowIndicatorComponent, decorators: [{
|
|
3749
3893
|
type: Component,
|
|
3750
3894
|
args: [{ selector: 'psh-state-flow-indicator', changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
3751
3895
|
'[class.state-flow-indicator]': 'true',
|
|
@@ -3770,21 +3914,21 @@ class PshSwitchComponent {
|
|
|
3770
3914
|
constructor() {
|
|
3771
3915
|
this.config = inject(SWITCH_CONFIG);
|
|
3772
3916
|
this.uniqueId = `switch-${crypto.randomUUID()}`;
|
|
3773
|
-
this.switchInput = viewChild('switchInput', ...(ngDevMode ? [{ debugName: "switchInput" }] : []));
|
|
3917
|
+
this.switchInput = viewChild('switchInput', ...(ngDevMode ? [{ debugName: "switchInput" }] : /* istanbul ignore next */ []));
|
|
3774
3918
|
this.onChange = (value) => { };
|
|
3775
3919
|
this.onTouched = () => { };
|
|
3776
|
-
this.checked = model(this.config.checked ?? false, ...(ngDevMode ? [{ debugName: "checked" }] : []));
|
|
3777
|
-
this.disabled = model(this.config.disabled ?? false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
3778
|
-
this.touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : []));
|
|
3779
|
-
this.required = input(this.config.required ?? false, ...(ngDevMode ? [{ debugName: "required" }] : []));
|
|
3780
|
-
this.size = input(this.config.size ?? 'medium', ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
3781
|
-
this.labelPosition = input(this.config.labelPosition ?? 'right', ...(ngDevMode ? [{ debugName: "labelPosition" }] : []));
|
|
3782
|
-
this.label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
|
|
3783
|
-
this.error = input('', ...(ngDevMode ? [{ debugName: "error" }] : []));
|
|
3784
|
-
this.success = input('', ...(ngDevMode ? [{ debugName: "success" }] : []));
|
|
3785
|
-
this.ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : []));
|
|
3786
|
-
this.name = input('', ...(ngDevMode ? [{ debugName: "name" }] : []));
|
|
3787
|
-
this.id = input(this.uniqueId, ...(ngDevMode ? [{ debugName: "id" }] : []));
|
|
3920
|
+
this.checked = model(this.config.checked ?? false, ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
|
|
3921
|
+
this.disabled = model(this.config.disabled ?? false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
3922
|
+
this.touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
|
|
3923
|
+
this.required = input(this.config.required ?? false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
|
|
3924
|
+
this.size = input(this.config.size ?? 'medium', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
3925
|
+
this.labelPosition = input(this.config.labelPosition ?? 'right', ...(ngDevMode ? [{ debugName: "labelPosition" }] : /* istanbul ignore next */ []));
|
|
3926
|
+
this.label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
3927
|
+
this.error = input('', ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
|
|
3928
|
+
this.success = input('', ...(ngDevMode ? [{ debugName: "success" }] : /* istanbul ignore next */ []));
|
|
3929
|
+
this.ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
3930
|
+
this.name = input('', ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
|
|
3931
|
+
this.id = input(this.uniqueId, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
|
|
3788
3932
|
this.computedAriaLabel = computed(() => {
|
|
3789
3933
|
const customLabel = this.ariaLabel();
|
|
3790
3934
|
if (customLabel)
|
|
@@ -3793,13 +3937,13 @@ class PshSwitchComponent {
|
|
|
3793
3937
|
if (labelText)
|
|
3794
3938
|
return labelText;
|
|
3795
3939
|
return 'Switch';
|
|
3796
|
-
}, ...(ngDevMode ? [{ debugName: "computedAriaLabel" }] : []));
|
|
3797
|
-
this.errorId = computed(() => this.error() ? `${this.id()}-error` : null, ...(ngDevMode ? [{ debugName: "errorId" }] : []));
|
|
3798
|
-
this.successId = computed(() => this.success() ? `${this.id()}-success` : null, ...(ngDevMode ? [{ debugName: "successId" }] : []));
|
|
3940
|
+
}, ...(ngDevMode ? [{ debugName: "computedAriaLabel" }] : /* istanbul ignore next */ []));
|
|
3941
|
+
this.errorId = computed(() => this.error() ? `${this.id()}-error` : null, ...(ngDevMode ? [{ debugName: "errorId" }] : /* istanbul ignore next */ []));
|
|
3942
|
+
this.successId = computed(() => this.success() ? `${this.id()}-success` : null, ...(ngDevMode ? [{ debugName: "successId" }] : /* istanbul ignore next */ []));
|
|
3799
3943
|
this.describedBy = computed(() => {
|
|
3800
3944
|
const ids = [this.errorId(), this.successId()].filter(Boolean);
|
|
3801
3945
|
return ids.length > 0 ? ids.join(' ') : null;
|
|
3802
|
-
}, ...(ngDevMode ? [{ debugName: "describedBy" }] : []));
|
|
3946
|
+
}, ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
|
|
3803
3947
|
}
|
|
3804
3948
|
toggle() {
|
|
3805
3949
|
if (!this.disabled()) {
|
|
@@ -3833,14 +3977,14 @@ class PshSwitchComponent {
|
|
|
3833
3977
|
el.nativeElement.blur();
|
|
3834
3978
|
}
|
|
3835
3979
|
}
|
|
3836
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
3837
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
3980
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: PshSwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3981
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", type: PshSwitchComponent, isStandalone: true, selector: "psh-switch", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, success: { classPropertyName: "success", publicName: "success", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", disabled: "disabledChange", touched: "touchedChange" }, host: { properties: { "class.switch-wrapper": "true", "class.switch-disabled": "disabled()", "class.switch-error": "!!error()", "class.switch-success": "!!success()" } }, providers: [{
|
|
3838
3982
|
provide: NG_VALUE_ACCESSOR,
|
|
3839
3983
|
useExisting: PshSwitchComponent,
|
|
3840
3984
|
multi: true
|
|
3841
3985
|
}], viewQueries: [{ propertyName: "switchInput", first: true, predicate: ["switchInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n class=\"switch-container\"\n [class.small]=\"size() === 'small'\"\n [class.large]=\"size() === 'large'\"\n>\n <label class=\"switch-label\" [class]=\"labelPosition() === 'left' ? 'label-left' : 'label-right'\">\n <input\n #switchInput\n type=\"checkbox\"\n class=\"switch-input\"\n [id]=\"id()\"\n [name]=\"name() || id()\"\n [checked]=\"checked()\"\n [disabled]=\"disabled()\"\n [required]=\"required()\"\n [attr.aria-label]=\"computedAriaLabel()\"\n [attr.aria-required]=\"required()\"\n [attr.aria-invalid]=\"!!error()\"\n [attr.aria-checked]=\"checked()\"\n [attr.aria-describedby]=\"describedBy()\"\n (change)=\"toggle()\"\n />\n <span class=\"switch-control\">\n <span class=\"switch-thumb\"></span>\n </span>\n <span class=\"switch-text\">\n @if (label()) {\n {{ label() }}\n } @else {\n <ng-content>Switch</ng-content>\n }\n </span>\n </label>\n\n @if (error()) {\n <div [id]=\"errorId()!\" class=\"switch-error\" role=\"alert\" aria-live=\"polite\">\n {{ error() }}\n </div>\n }\n\n @if (success()) {\n <div [id]=\"successId()!\" class=\"switch-success\" role=\"status\" aria-live=\"polite\">\n {{ success() }}\n </div>\n }\n</div>", styles: [".switch-wrapper{display:inline-block}.switch-container{display:inline-flex;flex-direction:column;gap:var(--spacing-xs)}.switch-label{display:inline-flex;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none;color:var(--text-color);width:100%}.switch-label.label-right{flex-direction:row;gap:var(--spacing-sm)}.switch-label.label-left{flex-direction:row-reverse;justify-content:space-between;gap:var(--spacing-md)}.switch-input{position:absolute;opacity:0;width:0;height:0}.switch-control{position:relative;display:inline-block;width:var(--size-10);height:var(--size-5-5);background:var(--surface-border);border-radius:var(--radius-full);transition:background var(--animation-duration-fast) var(--animation-easing-default),border-color var(--animation-duration-fast) var(--animation-easing-default)}.switch-thumb{position:absolute;top:var(--size-0-5);left:var(--size-0-5);width:var(--size-4-5);height:var(--size-4-5);background:var(--surface-card);border-radius:var(--radius-full);transition:transform var(--animation-duration-fast) var(--animation-easing-default),left var(--animation-duration-fast) var(--animation-easing-default)}.switch-input:checked+.switch-control{background:var(--primary-color)}.switch-input:checked+.switch-control .switch-thumb{left:calc(100% - var(--size-4-5) - var(--size-0-5))}.switch-input:focus-visible+.switch-control{outline:var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);outline-offset:var(--focus-outline-offset);box-shadow:0 0 0 var(--focus-ring-width) var(--focus-ring-color)}.switch-wrapper.switch-disabled .switch-label{opacity:var(--opacity-disabled);cursor:not-allowed;pointer-events:none}.switch-wrapper.switch-error .switch-input:not(:checked)+.switch-control{background:color-mix(in srgb,var(--danger-color) 15%,var(--surface-border));border:var(--border-width-2) solid var(--danger-color)}.switch-wrapper.switch-error .switch-input:focus-visible+.switch-control{box-shadow:0 0 0 var(--focus-ring-width) var(--focus-ring-error)}.switch-wrapper.switch-success .switch-input:checked+.switch-control{background:var(--success-color)}.switch-wrapper.switch-success .switch-input:focus-visible+.switch-control{box-shadow:0 0 0 var(--focus-ring-width) var(--focus-ring-success)}.switch-error{font-size:var(--font-size-sm);color:var(--danger-color)}.switch-success{font-size:var(--font-size-sm);color:var(--success-color)}.switch-container.small .switch-control{width:var(--size-8-5);height:var(--size-5)}.switch-container.small .switch-thumb{width:var(--size-4);height:var(--size-4)}.switch-container.small .switch-input:checked+.switch-control .switch-thumb{left:calc(100% - var(--size-4) - var(--size-0-5))}.switch-container.large .switch-control{width:var(--size-12);height:var(--size-6-5)}.switch-container.large .switch-thumb{width:var(--size-5-5);height:var(--size-5-5)}.switch-container.large .switch-input:checked+.switch-control .switch-thumb{left:calc(100% - var(--size-5-5) - var(--size-0-5))}@media(prefers-reduced-motion:reduce){.switch-control,.switch-thumb{transition:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3842
3986
|
}
|
|
3843
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
3987
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: PshSwitchComponent, decorators: [{
|
|
3844
3988
|
type: Component,
|
|
3845
3989
|
args: [{ selector: 'psh-switch', changeDetection: ChangeDetectionStrategy.OnPush, providers: [{
|
|
3846
3990
|
provide: NG_VALUE_ACCESSOR,
|
|
@@ -3868,12 +4012,12 @@ class PshTabBarComponent {
|
|
|
3868
4012
|
constructor() {
|
|
3869
4013
|
this.config = inject(TAB_BAR_CONFIG);
|
|
3870
4014
|
// Model inputs with defaults from config
|
|
3871
|
-
this.disabled = model(this.config.disabled ?? false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
3872
|
-
this.position = model(this.config.position ?? 'bottom', ...(ngDevMode ? [{ debugName: "position" }] : []));
|
|
3873
|
-
this.animated = model(this.config.animated ?? true, ...(ngDevMode ? [{ debugName: "animated" }] : []));
|
|
3874
|
-
this.activeIndex = model(0, ...(ngDevMode ? [{ debugName: "activeIndex" }] : []));
|
|
4015
|
+
this.disabled = model(this.config.disabled ?? false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
4016
|
+
this.position = model(this.config.position ?? 'bottom', ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
|
|
4017
|
+
this.animated = model(this.config.animated ?? true, ...(ngDevMode ? [{ debugName: "animated" }] : /* istanbul ignore next */ []));
|
|
4018
|
+
this.activeIndex = model(0, ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
|
|
3875
4019
|
// Regular inputs
|
|
3876
|
-
this.items = input.required(...(ngDevMode ? [{ debugName: "items" }] : []));
|
|
4020
|
+
this.items = input.required(...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
|
|
3877
4021
|
// Outputs
|
|
3878
4022
|
this.tabChange = output();
|
|
3879
4023
|
}
|
|
@@ -3896,10 +4040,10 @@ class PshTabBarComponent {
|
|
|
3896
4040
|
previousIndex
|
|
3897
4041
|
});
|
|
3898
4042
|
}
|
|
3899
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
3900
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
4043
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: PshTabBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4044
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", type: PshTabBarComponent, isStandalone: true, selector: "psh-tab-bar", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, animated: { classPropertyName: "animated", publicName: "animated", isSignal: true, isRequired: false, transformFunction: null }, activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { disabled: "disabledChange", position: "positionChange", animated: "animatedChange", activeIndex: "activeIndexChange", tabChange: "tabChange" }, host: { attributes: { "role": "tablist" }, properties: { "class.top": "position() === \"top\"", "class.animated": "animated()", "attr.aria-label": "\"Navigation par onglets\"" } }, ngImport: i0, template: "<div class=\"tab-bar\">\n @for (item of items(); track item.id; let i = $index) {\n <button\n class=\"tab-item\"\n [class.active]=\"activeIndex() === i\"\n [class.disabled]=\"disabled() || item.disabled\"\n role=\"tab\"\n [attr.aria-selected]=\"activeIndex() === i\"\n [attr.aria-disabled]=\"disabled() || item.disabled\"\n [attr.aria-label]=\"item.label\"\n (click)=\"selectTab(i)\"\n >\n <i \n [class]=\"activeIndex() === i ? 'ph-fill ph-' + item.icon : 'ph ph-' + item.icon\"\n aria-hidden=\"true\"\n ></i>\n <span class=\"tab-label\">{{ item.label }}</span>\n @if (item.badge) {\n <span class=\"tab-badge\">{{ item.badge }}</span>\n }\n </button>\n }\n</div>", styles: [":host{display:block;position:sticky;bottom:0;left:0;right:0;z-index:var(--z-index-navigation);border-top:var(--border-width-1) solid var(--surface-border)}:host.top{top:0;bottom:auto;border-top:none;border-bottom:var(--border-width-1) solid var(--surface-border)}.tab-bar{display:flex;justify-content:space-around;align-items:center;min-height:var(--size-14);background:var(--surface-card);padding:var(--spacing-xs) var(--spacing-xxs)}.tab-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--spacing-xxs);flex:1 1 0;min-width:0;max-width:20%;height:100%;border:none;background:transparent;color:var(--text-color-secondary);font-family:inherit;font-size:var(--font-size-xs);cursor:pointer;transition:all var(--animation-duration-normal) var(--animation-easing-default);padding:var(--spacing-sm) var(--spacing-xs);position:relative}.tab-item i{font-size:var(--icon-size-lg);transition:transform var(--animation-duration-normal) var(--animation-easing-default)}.tab-item:hover:not(.disabled){color:var(--primary-color)}.tab-item.active{color:var(--primary-color)}.tab-item.active i{transform:translateY(calc(-1 * var(--spacing-xxs)))}.tab-label{font-size:var(--font-size-xs);font-weight:500}.tab-badge{position:absolute;top:var(--spacing-xs);right:calc(50% - var(--size-4));min-width:var(--size-4-5);height:var(--size-4-5);padding:0 var(--spacing-xs);background:var(--danger-color);color:var(--danger-color-text);border-radius:var(--border-radius-full);font-size:var(--font-size-xs);font-weight:500;display:flex;align-items:center;justify-content:center}.tab-item.disabled{opacity:var(--opacity-disabled);cursor:not-allowed}:host.animated .tab-item{transition:all var(--animation-duration-default) var(--animation-easing-default)}:host.animated .tab-item i{transition:transform var(--animation-duration-default) var(--animation-easing-default)}@media(max-width:640px){.tab-label{font-size:var(--font-size-xxs)}}@media(max-width:480px){.tab-label{display:none}.tab-item{padding:var(--spacing-sm) var(--spacing-xxs);gap:0}.tab-item i{font-size:var(--icon-size-md)}.tab-badge{right:calc(50% - var(--size-2));top:var(--spacing-xxs)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3901
4045
|
}
|
|
3902
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
4046
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: PshTabBarComponent, decorators: [{
|
|
3903
4047
|
type: Component,
|
|
3904
4048
|
args: [{ selector: 'psh-tab-bar', changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
3905
4049
|
'[class.top]': 'position() === "top"',
|
|
@@ -3923,46 +4067,54 @@ const TABLE_CONFIG = new InjectionToken('TABLE_CONFIG', {
|
|
|
3923
4067
|
globalSearchPlaceholder: 'Search in all columns...',
|
|
3924
4068
|
tableLayout: 'auto',
|
|
3925
4069
|
truncateText: false,
|
|
3926
|
-
fullWidth: false
|
|
4070
|
+
fullWidth: false,
|
|
4071
|
+
expandable: false,
|
|
4072
|
+
singleExpand: false
|
|
3927
4073
|
})
|
|
3928
4074
|
});
|
|
3929
4075
|
class PshTableComponent {
|
|
3930
4076
|
constructor() {
|
|
3931
4077
|
this.config = inject(TABLE_CONFIG);
|
|
3932
|
-
this.variant = input(this.config.variant ?? 'default', ...(ngDevMode ? [{ debugName: "variant" }] : []));
|
|
3933
|
-
this.size = input(this.config.size ?? 'medium', ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
3934
|
-
this.striped = input(this.config.striped ?? false, ...(ngDevMode ? [{ debugName: "striped" }] : []));
|
|
3935
|
-
this.hoverable = input(this.config.hoverable ?? false, ...(ngDevMode ? [{ debugName: "hoverable" }] : []));
|
|
3936
|
-
this.bordered = input(this.config.bordered ?? false, ...(ngDevMode ? [{ debugName: "bordered" }] : []));
|
|
3937
|
-
this.loading = input(this.config.loading ?? false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
|
|
3938
|
-
this.globalSearch = input(this.config.globalSearch ?? false, ...(ngDevMode ? [{ debugName: "globalSearch" }] : []));
|
|
3939
|
-
this.fullWidth = input(this.config.fullWidth ?? false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : []));
|
|
3940
|
-
this.columns = input([], ...(ngDevMode ? [{ debugName: "columns" }] : []));
|
|
3941
|
-
this.data = input([], ...(ngDevMode ? [{ debugName: "data" }] : []));
|
|
3942
|
-
this.emptyMessage = input(this.config.emptyMessage ?? 'No data available', ...(ngDevMode ? [{ debugName: "emptyMessage" }] : []));
|
|
3943
|
-
this.noResultsMessage = input(this.config.noResultsMessage ?? 'No results found', ...(ngDevMode ? [{ debugName: "noResultsMessage" }] : []));
|
|
3944
|
-
this.globalSearchPlaceholder = input(this.config.globalSearchPlaceholder ?? 'Search in all columns...', ...(ngDevMode ? [{ debugName: "globalSearchPlaceholder" }] : []));
|
|
3945
|
-
this.tableLayout = input(this.config.tableLayout ?? 'auto', ...(ngDevMode ? [{ debugName: "tableLayout" }] : []));
|
|
3946
|
-
this.truncateText = input(this.config.truncateText ?? false, ...(ngDevMode ? [{ debugName: "truncateText" }] : []));
|
|
4078
|
+
this.variant = input(this.config.variant ?? 'default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
4079
|
+
this.size = input(this.config.size ?? 'medium', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
4080
|
+
this.striped = input(this.config.striped ?? false, ...(ngDevMode ? [{ debugName: "striped" }] : /* istanbul ignore next */ []));
|
|
4081
|
+
this.hoverable = input(this.config.hoverable ?? false, ...(ngDevMode ? [{ debugName: "hoverable" }] : /* istanbul ignore next */ []));
|
|
4082
|
+
this.bordered = input(this.config.bordered ?? false, ...(ngDevMode ? [{ debugName: "bordered" }] : /* istanbul ignore next */ []));
|
|
4083
|
+
this.loading = input(this.config.loading ?? false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
|
|
4084
|
+
this.globalSearch = input(this.config.globalSearch ?? false, ...(ngDevMode ? [{ debugName: "globalSearch" }] : /* istanbul ignore next */ []));
|
|
4085
|
+
this.fullWidth = input(this.config.fullWidth ?? false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : /* istanbul ignore next */ []));
|
|
4086
|
+
this.columns = input([], ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
|
|
4087
|
+
this.data = input([], ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
|
|
4088
|
+
this.emptyMessage = input(this.config.emptyMessage ?? 'No data available', ...(ngDevMode ? [{ debugName: "emptyMessage" }] : /* istanbul ignore next */ []));
|
|
4089
|
+
this.noResultsMessage = input(this.config.noResultsMessage ?? 'No results found', ...(ngDevMode ? [{ debugName: "noResultsMessage" }] : /* istanbul ignore next */ []));
|
|
4090
|
+
this.globalSearchPlaceholder = input(this.config.globalSearchPlaceholder ?? 'Search in all columns...', ...(ngDevMode ? [{ debugName: "globalSearchPlaceholder" }] : /* istanbul ignore next */ []));
|
|
4091
|
+
this.tableLayout = input(this.config.tableLayout ?? 'auto', ...(ngDevMode ? [{ debugName: "tableLayout" }] : /* istanbul ignore next */ []));
|
|
4092
|
+
this.truncateText = input(this.config.truncateText ?? false, ...(ngDevMode ? [{ debugName: "truncateText" }] : /* istanbul ignore next */ []));
|
|
4093
|
+
this.expandable = input(this.config.expandable ?? false, ...(ngDevMode ? [{ debugName: "expandable" }] : /* istanbul ignore next */ []));
|
|
4094
|
+
this.singleExpand = input(this.config.singleExpand ?? false, ...(ngDevMode ? [{ debugName: "singleExpand" }] : /* istanbul ignore next */ []));
|
|
4095
|
+
this.expandedRowTemplate = input(...(ngDevMode ? [undefined, { debugName: "expandedRowTemplate" }] : /* istanbul ignore next */ []));
|
|
3947
4096
|
this.sortChange = output();
|
|
3948
4097
|
this.globalSearchChange = output();
|
|
3949
4098
|
this.rowClick = output();
|
|
3950
|
-
this.
|
|
3951
|
-
this.
|
|
3952
|
-
this.
|
|
3953
|
-
this.
|
|
4099
|
+
this.rowExpand = output();
|
|
4100
|
+
this.rowCollapse = output();
|
|
4101
|
+
this.currentSortSignal = signal(undefined, ...(ngDevMode ? [{ debugName: "currentSortSignal" }] : /* istanbul ignore next */ []));
|
|
4102
|
+
this.searchTermSignal = signal('', ...(ngDevMode ? [{ debugName: "searchTermSignal" }] : /* istanbul ignore next */ []));
|
|
4103
|
+
this.expandedRowIds = signal(new Set(), ...(ngDevMode ? [{ debugName: "expandedRowIds" }] : /* istanbul ignore next */ []));
|
|
4104
|
+
this.currentSort = computed(() => this.currentSortSignal(), ...(ngDevMode ? [{ debugName: "currentSort" }] : /* istanbul ignore next */ []));
|
|
4105
|
+
this.searchTerm = computed(() => this.searchTermSignal(), ...(ngDevMode ? [{ debugName: "searchTerm" }] : /* istanbul ignore next */ []));
|
|
3954
4106
|
this.computedEmptyMessage = computed(() => {
|
|
3955
4107
|
return this.searchTerm()
|
|
3956
4108
|
? `${this.noResultsMessage()} "${this.searchTerm()}"`
|
|
3957
4109
|
: this.emptyMessage();
|
|
3958
|
-
}, ...(ngDevMode ? [{ debugName: "computedEmptyMessage" }] : []));
|
|
4110
|
+
}, ...(ngDevMode ? [{ debugName: "computedEmptyMessage" }] : /* istanbul ignore next */ []));
|
|
3959
4111
|
this.state = computed(() => {
|
|
3960
4112
|
if (this.loading())
|
|
3961
4113
|
return 'loading';
|
|
3962
4114
|
if (this.filteredData().length === 0)
|
|
3963
4115
|
return 'empty';
|
|
3964
4116
|
return 'default';
|
|
3965
|
-
}, ...(ngDevMode ? [{ debugName: "state" }] : []));
|
|
4117
|
+
}, ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
|
|
3966
4118
|
this.filteredData = computed(() => {
|
|
3967
4119
|
let result = [...this.data()];
|
|
3968
4120
|
if (this.searchTerm()) {
|
|
@@ -3973,7 +4125,8 @@ class PshTableComponent {
|
|
|
3973
4125
|
result = this.sortData(result, sort);
|
|
3974
4126
|
}
|
|
3975
4127
|
return result;
|
|
3976
|
-
}, ...(ngDevMode ? [{ debugName: "filteredData" }] : []));
|
|
4128
|
+
}, ...(ngDevMode ? [{ debugName: "filteredData" }] : /* istanbul ignore next */ []));
|
|
4129
|
+
this.totalColumns = computed(() => this.columns().length + (this.expandable() ? 1 : 0), ...(ngDevMode ? [{ debugName: "totalColumns" }] : /* istanbul ignore next */ []));
|
|
3977
4130
|
}
|
|
3978
4131
|
/**
|
|
3979
4132
|
* Trie les données
|
|
@@ -4036,31 +4189,65 @@ class PshTableComponent {
|
|
|
4036
4189
|
handleRowClick(row) {
|
|
4037
4190
|
this.rowClick.emit({ id: row.id, row });
|
|
4038
4191
|
}
|
|
4039
|
-
/**
|
|
4040
|
-
* Récupère la valeur d'une cellule pour affichage
|
|
4041
|
-
*/
|
|
4042
4192
|
getCellValue(row, column) {
|
|
4043
4193
|
return this.getNestedValue(row, column.path || column.key);
|
|
4044
4194
|
}
|
|
4045
|
-
|
|
4046
|
-
|
|
4195
|
+
isRowExpandable(row) {
|
|
4196
|
+
return !!(row.children?.length || this.expandedRowTemplate());
|
|
4197
|
+
}
|
|
4198
|
+
isRowExpanded(row) {
|
|
4199
|
+
return this.expandedRowIds().has(row.id);
|
|
4200
|
+
}
|
|
4201
|
+
toggleRow(row) {
|
|
4202
|
+
if (!this.isRowExpandable(row))
|
|
4203
|
+
return;
|
|
4204
|
+
const ids = new Set(this.expandedRowIds());
|
|
4205
|
+
const wasExpanded = ids.has(row.id);
|
|
4206
|
+
if (this.singleExpand()) {
|
|
4207
|
+
ids.clear();
|
|
4208
|
+
}
|
|
4209
|
+
if (wasExpanded) {
|
|
4210
|
+
ids.delete(row.id);
|
|
4211
|
+
this.expandedRowIds.set(ids);
|
|
4212
|
+
this.rowCollapse.emit({ id: row.id, row, expanded: false });
|
|
4213
|
+
}
|
|
4214
|
+
else {
|
|
4215
|
+
ids.add(row.id);
|
|
4216
|
+
this.expandedRowIds.set(ids);
|
|
4217
|
+
this.rowExpand.emit({ id: row.id, row, expanded: true });
|
|
4218
|
+
}
|
|
4219
|
+
}
|
|
4220
|
+
expandAll() {
|
|
4221
|
+
const ids = new Set();
|
|
4222
|
+
for (const row of this.filteredData()) {
|
|
4223
|
+
if (this.isRowExpandable(row)) {
|
|
4224
|
+
ids.add(row.id);
|
|
4225
|
+
}
|
|
4226
|
+
}
|
|
4227
|
+
this.expandedRowIds.set(ids);
|
|
4228
|
+
}
|
|
4229
|
+
collapseAll() {
|
|
4230
|
+
this.expandedRowIds.set(new Set());
|
|
4231
|
+
}
|
|
4232
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: PshTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4233
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", type: PshTableComponent, isStandalone: true, selector: "psh-table", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: true, isRequired: false, transformFunction: null }, hoverable: { classPropertyName: "hoverable", publicName: "hoverable", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, globalSearch: { classPropertyName: "globalSearch", publicName: "globalSearch", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, noResultsMessage: { classPropertyName: "noResultsMessage", publicName: "noResultsMessage", isSignal: true, isRequired: false, transformFunction: null }, globalSearchPlaceholder: { classPropertyName: "globalSearchPlaceholder", publicName: "globalSearchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, tableLayout: { classPropertyName: "tableLayout", publicName: "tableLayout", isSignal: true, isRequired: false, transformFunction: null }, truncateText: { classPropertyName: "truncateText", publicName: "truncateText", isSignal: true, isRequired: false, transformFunction: null }, expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: true, isRequired: false, transformFunction: null }, singleExpand: { classPropertyName: "singleExpand", publicName: "singleExpand", isSignal: true, isRequired: false, transformFunction: null }, expandedRowTemplate: { classPropertyName: "expandedRowTemplate", publicName: "expandedRowTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortChange: "sortChange", globalSearchChange: "globalSearchChange", rowClick: "rowClick", rowExpand: "rowExpand", rowCollapse: "rowCollapse" }, host: { properties: { "class.full-width": "fullWidth()" }, classAttribute: "psh-table" }, ngImport: i0, template: "<div\n class=\"table-wrapper\"\n [class.striped]=\"striped()\"\n [class.hoverable]=\"hoverable()\"\n [class.bordered]=\"bordered()\"\n [class.small]=\"size() === 'small'\"\n [class.large]=\"size() === 'large'\"\n [class.outline]=\"variant() === 'outline'\"\n [class.table-fixed]=\"tableLayout() === 'fixed'\"\n [class.truncate]=\"truncateText()\"\n [attr.data-state]=\"state()\"\n>\n @if (globalSearch()) {\n <div class=\"global-search\" role=\"search\">\n <psh-input\n [placeholder]=\"globalSearchPlaceholder()\"\n [ariaLabel]=\"globalSearchPlaceholder()\"\n [size]=\"size()\"\n [fullWidth]=\"true\"\n [showLabel]=\"false\"\n iconStart=\"magnifying-glass\"\n type=\"search\"\n [(value)]=\"searchTermSignal\"\n (valueChange)=\"onSearchValueChange($event)\"\n />\n </div>\n }\n\n <table role=\"table\">\n <thead>\n <tr>\n @if (expandable()) {\n <th class=\"expand-header\" aria-label=\"Expand\"></th>\n }\n @for (column of columns(); track column.key) {\n <th\n [style.width]=\"column.width\"\n [attr.aria-sort]=\"column.sortable ? (currentSort()?.key === column.key ? (currentSort()?.direction === 'asc' ? 'ascending' : 'descending') : 'none') : null\"\n [class.sortable]=\"column.sortable\"\n (click)=\"handleSort(column)\"\n >\n <div class=\"th-content\">\n {{ column.label }}\n @if (column.sortable) {\n @if (currentSort()?.key === column.key) {\n <i\n [class]=\"'ph ' + (currentSort()?.direction === 'desc' ? 'ph-sort-descending' : 'ph-sort-ascending')\"\n [attr.aria-label]=\"'Sort ' + currentSort()?.direction\"\n aria-hidden=\"true\">\n </i>\n } @else {\n <i\n class=\"ph ph-arrows-down-up sort-icon-neutral\"\n aria-label=\"Sortable\"\n aria-hidden=\"true\">\n </i>\n }\n }\n </div>\n </th>\n }\n </tr>\n </thead>\n\n <tbody>\n @if (loading()) {\n <tr class=\"loading-row\">\n <td [attr.colspan]=\"totalColumns()\">\n <div class=\"loading-indicator\">\n <div class=\"spinner\"></div>\n </div>\n </td>\n </tr>\n } @else if (filteredData().length === 0) {\n <tr class=\"empty-row\">\n <td [attr.colspan]=\"totalColumns()\">\n {{ computedEmptyMessage() }}\n </td>\n </tr>\n } @else {\n @for (row of filteredData(); track row.id) {\n <tr (click)=\"handleRowClick(row)\" [class.expanded]=\"expandable() && isRowExpanded(row)\">\n @if (expandable()) {\n <td class=\"expand-cell\">\n @if (isRowExpandable(row)) {\n <button\n type=\"button\"\n class=\"expand-toggle\"\n [attr.aria-expanded]=\"isRowExpanded(row)\"\n [attr.aria-label]=\"isRowExpanded(row) ? 'Collapse row' : 'Expand row'\"\n (click)=\"toggleRow(row); $event.stopPropagation()\"\n >\n <i class=\"ph ph-caret-right\"></i>\n </button>\n }\n </td>\n }\n @for (column of columns(); track column.key) {\n <td>\n @if (column.template) {\n <ng-container\n [ngTemplateOutlet]=\"column.template\"\n [ngTemplateOutletContext]=\"{ $implicit: row, column: column }\"\n ></ng-container>\n } @else {\n {{ getCellValue(row, column) }}\n }\n </td>\n }\n </tr>\n\n @if (expandable() && isRowExpanded(row)) {\n @if (expandedRowTemplate()) {\n <tr class=\"expanded-content-row\">\n <td [attr.colspan]=\"totalColumns()\">\n <ng-container\n [ngTemplateOutlet]=\"expandedRowTemplate()!\"\n [ngTemplateOutletContext]=\"{ $implicit: row }\"\n ></ng-container>\n </td>\n </tr>\n } @else if (row.children?.length) {\n @for (child of row.children; track child.id) {\n <tr class=\"child-row\">\n @if (expandable()) {\n <td class=\"expand-cell\"></td>\n }\n @for (column of columns(); track column.key) {\n <td>\n @if (column.template) {\n <ng-container\n [ngTemplateOutlet]=\"column.template\"\n [ngTemplateOutletContext]=\"{ $implicit: child, column: column }\"\n ></ng-container>\n } @else {\n {{ getCellValue(child, column) }}\n }\n </td>\n }\n </tr>\n }\n }\n }\n }\n }\n </tbody>\n </table>\n</div>\n", styles: [":host{display:block}:host(.full-width){max-width:none;width:100%}.table-wrapper{width:100%;overflow-x:auto;background:var(--surface-card);border-radius:var(--border-radius)}.table-wrapper.outline{background:transparent;border:var(--border-width-1) solid var(--surface-border)}table{width:100%;border-collapse:collapse;text-align:left}th,td{padding:var(--spacing-md);color:var(--text-color);border-bottom:var(--border-width-1) solid var(--surface-border)}th{font-weight:600;color:var(--text-color);background:var(--surface-ground);white-space:nowrap;-webkit-user-select:none;user-select:none}th.sortable{cursor:pointer}th.sortable:hover{background:var(--surface-hover)}.th-content{display:flex;align-items:center;gap:var(--spacing-xs)}.th-content i{font-size:var(--font-size-base);color:var(--primary-color);display:inline-block;transition:color var(--animation-duration-fast) var(--animation-easing-default)}.th-content i.sort-icon-neutral{color:var(--text-color-secondary);opacity:.5}th.sortable:hover .sort-icon-neutral{opacity:1;color:var(--primary-color)}.table-wrapper.striped tr:nth-child(2n){background:var(--surface-ground)}.table-wrapper.hoverable tr:hover{background:var(--surface-hover)}.table-wrapper.bordered th,.table-wrapper.bordered td{border:var(--border-width-1) solid var(--surface-border)}.table-wrapper.small th,.table-wrapper.small td{padding:var(--spacing-sm);font-size:var(--font-size-sm)}.table-wrapper.large th,.table-wrapper.large td{padding:var(--spacing-lg);font-size:var(--font-size-lg)}.loading-row td,.empty-row td{text-align:center;padding:var(--spacing-xl);color:var(--text-color-secondary)}.loading-indicator{display:flex;justify-content:center;align-items:center}.spinner{width:var(--size-6);height:var(--size-6);border:var(--border-width-2) solid var(--surface-border);border-top-color:var(--primary-color);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.global-search{margin-bottom:var(--spacing-md)}.sort-button{background:transparent;border:none;padding:var(--spacing-xs);cursor:pointer;color:var(--primary-color);border-radius:var(--border-radius);transition:all var(--animation-duration-normal) var(--animation-easing-default)}.sort-button:hover{background:rgba(var(--primary-color-rgb),.1)}.sort-button:focus{outline:none;box-shadow:0 0 0 var(--focus-outline-width) var(--focus-ring-color)}.table-wrapper.table-fixed table{table-layout:fixed}.table-wrapper.truncate td{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:0}.table-wrapper.truncate th{overflow:hidden;text-overflow:ellipsis}.expand-header{width:48px;min-width:48px;max-width:48px;padding:0}.expand-cell{width:48px;min-width:48px;max-width:48px;text-align:center;padding:var(--spacing-xs);vertical-align:middle}.expand-toggle{display:inline-flex;align-items:center;justify-content:center;width:var(--size-8);height:var(--size-8);padding:0;background:transparent;border:none;border-radius:var(--border-radius-sm);cursor:pointer;color:var(--text-color-secondary);font-size:var(--font-size-base);transition:color var(--animation-duration-fast) var(--animation-easing-default)}.expand-toggle:hover{color:var(--primary-color);background:var(--surface-hover)}.expand-toggle:focus-visible{outline:var(--focus-outline-width) solid var(--focus-ring-color);outline-offset:2px}.expand-toggle i{display:inline-block;transition:transform var(--animation-duration-fast) var(--animation-easing-default)}.expand-toggle[aria-expanded=true] i{transform:rotate(90deg)}tr.expanded{border-bottom-color:transparent}.expanded-content-row td{background:var(--surface-ground);padding:var(--spacing-md) var(--spacing-lg);border-bottom:var(--border-width-1) solid var(--surface-border)}.child-row{background:var(--surface-ground)}.child-row td{font-size:.95em;color:var(--text-color-secondary)}.table-wrapper.striped .child-row,.table-wrapper.striped .expanded-content-row{background:var(--surface-ground)}.table-wrapper.hoverable .child-row:hover{background:var(--surface-hover)}@media(max-width:48em){.table-wrapper{font-size:var(--font-size-sm)}th,td{padding:var(--spacing-sm)}.global-search{margin-bottom:var(--spacing-sm)}}@media(max-width:30em){.table-wrapper{border-radius:0;margin:0 calc(-1 * var(--spacing-sm))}th,td{padding:var(--spacing-xs) var(--spacing-sm);font-size:var(--font-size-xs)}.th-content{gap:var(--spacing-xxs)}.th-content i{font-size:var(--font-size-sm)}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PshInputComponent, selector: "psh-input", inputs: ["value", "disabled", "readonly", "loading", "touched", "variant", "size", "fullWidth", "required", "showLabel", "type", "placeholder", "label", "ariaLabel", "iconStart", "iconEnd", "error", "success", "hint", "suggestions", "autocompleteConfig"], outputs: ["valueChange", "disabledChange", "readonlyChange", "loadingChange", "touchedChange", "inputFocus", "inputBlur", "suggestionSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4047
4234
|
}
|
|
4048
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
4235
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: PshTableComponent, decorators: [{
|
|
4049
4236
|
type: Component,
|
|
4050
4237
|
args: [{ selector: 'psh-table', imports: [NgTemplateOutlet, PshInputComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
4051
4238
|
'class': 'psh-table',
|
|
4052
4239
|
'[class.full-width]': 'fullWidth()'
|
|
4053
|
-
}, template: "<div\n class=\"table-wrapper\"\n [class.striped]=\"striped()\"\n [class.hoverable]=\"hoverable()\"\n [class.bordered]=\"bordered()\"\n [class.small]=\"size() === 'small'\"\n [class.large]=\"size() === 'large'\"\n [class.outline]=\"variant() === 'outline'\"\n [class.table-fixed]=\"tableLayout() === 'fixed'\"\n [class.truncate]=\"truncateText()\"\n [attr.data-state]=\"state()\"\n>\n @if (globalSearch()) {\n <div class=\"global-search\" role=\"search\">\n <psh-input\n [placeholder]=\"globalSearchPlaceholder()\"\n [ariaLabel]=\"globalSearchPlaceholder()\"\n [size]=\"size()\"\n [fullWidth]=\"true\"\n [showLabel]=\"false\"\n iconStart=\"magnifying-glass\"\n type=\"search\"\n [(value)]=\"searchTermSignal\"\n (valueChange)=\"onSearchValueChange($event)\"\n />\n </div>\n }\n\n <table role=\"table\">\n <thead>\n <tr>\n @for (column of columns(); track column.key) {\n <th
|
|
4054
|
-
}], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], striped: [{ type: i0.Input, args: [{ isSignal: true, alias: "striped", required: false }] }], hoverable: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoverable", required: false }] }], bordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "bordered", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], globalSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "globalSearch", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], noResultsMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "noResultsMessage", required: false }] }], globalSearchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "globalSearchPlaceholder", required: false }] }], tableLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableLayout", required: false }] }], truncateText: [{ type: i0.Input, args: [{ isSignal: true, alias: "truncateText", required: false }] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], globalSearchChange: [{ type: i0.Output, args: ["globalSearchChange"] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }] } });
|
|
4240
|
+
}, template: "<div\n class=\"table-wrapper\"\n [class.striped]=\"striped()\"\n [class.hoverable]=\"hoverable()\"\n [class.bordered]=\"bordered()\"\n [class.small]=\"size() === 'small'\"\n [class.large]=\"size() === 'large'\"\n [class.outline]=\"variant() === 'outline'\"\n [class.table-fixed]=\"tableLayout() === 'fixed'\"\n [class.truncate]=\"truncateText()\"\n [attr.data-state]=\"state()\"\n>\n @if (globalSearch()) {\n <div class=\"global-search\" role=\"search\">\n <psh-input\n [placeholder]=\"globalSearchPlaceholder()\"\n [ariaLabel]=\"globalSearchPlaceholder()\"\n [size]=\"size()\"\n [fullWidth]=\"true\"\n [showLabel]=\"false\"\n iconStart=\"magnifying-glass\"\n type=\"search\"\n [(value)]=\"searchTermSignal\"\n (valueChange)=\"onSearchValueChange($event)\"\n />\n </div>\n }\n\n <table role=\"table\">\n <thead>\n <tr>\n @if (expandable()) {\n <th class=\"expand-header\" aria-label=\"Expand\"></th>\n }\n @for (column of columns(); track column.key) {\n <th\n [style.width]=\"column.width\"\n [attr.aria-sort]=\"column.sortable ? (currentSort()?.key === column.key ? (currentSort()?.direction === 'asc' ? 'ascending' : 'descending') : 'none') : null\"\n [class.sortable]=\"column.sortable\"\n (click)=\"handleSort(column)\"\n >\n <div class=\"th-content\">\n {{ column.label }}\n @if (column.sortable) {\n @if (currentSort()?.key === column.key) {\n <i\n [class]=\"'ph ' + (currentSort()?.direction === 'desc' ? 'ph-sort-descending' : 'ph-sort-ascending')\"\n [attr.aria-label]=\"'Sort ' + currentSort()?.direction\"\n aria-hidden=\"true\">\n </i>\n } @else {\n <i\n class=\"ph ph-arrows-down-up sort-icon-neutral\"\n aria-label=\"Sortable\"\n aria-hidden=\"true\">\n </i>\n }\n }\n </div>\n </th>\n }\n </tr>\n </thead>\n\n <tbody>\n @if (loading()) {\n <tr class=\"loading-row\">\n <td [attr.colspan]=\"totalColumns()\">\n <div class=\"loading-indicator\">\n <div class=\"spinner\"></div>\n </div>\n </td>\n </tr>\n } @else if (filteredData().length === 0) {\n <tr class=\"empty-row\">\n <td [attr.colspan]=\"totalColumns()\">\n {{ computedEmptyMessage() }}\n </td>\n </tr>\n } @else {\n @for (row of filteredData(); track row.id) {\n <tr (click)=\"handleRowClick(row)\" [class.expanded]=\"expandable() && isRowExpanded(row)\">\n @if (expandable()) {\n <td class=\"expand-cell\">\n @if (isRowExpandable(row)) {\n <button\n type=\"button\"\n class=\"expand-toggle\"\n [attr.aria-expanded]=\"isRowExpanded(row)\"\n [attr.aria-label]=\"isRowExpanded(row) ? 'Collapse row' : 'Expand row'\"\n (click)=\"toggleRow(row); $event.stopPropagation()\"\n >\n <i class=\"ph ph-caret-right\"></i>\n </button>\n }\n </td>\n }\n @for (column of columns(); track column.key) {\n <td>\n @if (column.template) {\n <ng-container\n [ngTemplateOutlet]=\"column.template\"\n [ngTemplateOutletContext]=\"{ $implicit: row, column: column }\"\n ></ng-container>\n } @else {\n {{ getCellValue(row, column) }}\n }\n </td>\n }\n </tr>\n\n @if (expandable() && isRowExpanded(row)) {\n @if (expandedRowTemplate()) {\n <tr class=\"expanded-content-row\">\n <td [attr.colspan]=\"totalColumns()\">\n <ng-container\n [ngTemplateOutlet]=\"expandedRowTemplate()!\"\n [ngTemplateOutletContext]=\"{ $implicit: row }\"\n ></ng-container>\n </td>\n </tr>\n } @else if (row.children?.length) {\n @for (child of row.children; track child.id) {\n <tr class=\"child-row\">\n @if (expandable()) {\n <td class=\"expand-cell\"></td>\n }\n @for (column of columns(); track column.key) {\n <td>\n @if (column.template) {\n <ng-container\n [ngTemplateOutlet]=\"column.template\"\n [ngTemplateOutletContext]=\"{ $implicit: child, column: column }\"\n ></ng-container>\n } @else {\n {{ getCellValue(child, column) }}\n }\n </td>\n }\n </tr>\n }\n }\n }\n }\n }\n </tbody>\n </table>\n</div>\n", styles: [":host{display:block}:host(.full-width){max-width:none;width:100%}.table-wrapper{width:100%;overflow-x:auto;background:var(--surface-card);border-radius:var(--border-radius)}.table-wrapper.outline{background:transparent;border:var(--border-width-1) solid var(--surface-border)}table{width:100%;border-collapse:collapse;text-align:left}th,td{padding:var(--spacing-md);color:var(--text-color);border-bottom:var(--border-width-1) solid var(--surface-border)}th{font-weight:600;color:var(--text-color);background:var(--surface-ground);white-space:nowrap;-webkit-user-select:none;user-select:none}th.sortable{cursor:pointer}th.sortable:hover{background:var(--surface-hover)}.th-content{display:flex;align-items:center;gap:var(--spacing-xs)}.th-content i{font-size:var(--font-size-base);color:var(--primary-color);display:inline-block;transition:color var(--animation-duration-fast) var(--animation-easing-default)}.th-content i.sort-icon-neutral{color:var(--text-color-secondary);opacity:.5}th.sortable:hover .sort-icon-neutral{opacity:1;color:var(--primary-color)}.table-wrapper.striped tr:nth-child(2n){background:var(--surface-ground)}.table-wrapper.hoverable tr:hover{background:var(--surface-hover)}.table-wrapper.bordered th,.table-wrapper.bordered td{border:var(--border-width-1) solid var(--surface-border)}.table-wrapper.small th,.table-wrapper.small td{padding:var(--spacing-sm);font-size:var(--font-size-sm)}.table-wrapper.large th,.table-wrapper.large td{padding:var(--spacing-lg);font-size:var(--font-size-lg)}.loading-row td,.empty-row td{text-align:center;padding:var(--spacing-xl);color:var(--text-color-secondary)}.loading-indicator{display:flex;justify-content:center;align-items:center}.spinner{width:var(--size-6);height:var(--size-6);border:var(--border-width-2) solid var(--surface-border);border-top-color:var(--primary-color);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.global-search{margin-bottom:var(--spacing-md)}.sort-button{background:transparent;border:none;padding:var(--spacing-xs);cursor:pointer;color:var(--primary-color);border-radius:var(--border-radius);transition:all var(--animation-duration-normal) var(--animation-easing-default)}.sort-button:hover{background:rgba(var(--primary-color-rgb),.1)}.sort-button:focus{outline:none;box-shadow:0 0 0 var(--focus-outline-width) var(--focus-ring-color)}.table-wrapper.table-fixed table{table-layout:fixed}.table-wrapper.truncate td{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:0}.table-wrapper.truncate th{overflow:hidden;text-overflow:ellipsis}.expand-header{width:48px;min-width:48px;max-width:48px;padding:0}.expand-cell{width:48px;min-width:48px;max-width:48px;text-align:center;padding:var(--spacing-xs);vertical-align:middle}.expand-toggle{display:inline-flex;align-items:center;justify-content:center;width:var(--size-8);height:var(--size-8);padding:0;background:transparent;border:none;border-radius:var(--border-radius-sm);cursor:pointer;color:var(--text-color-secondary);font-size:var(--font-size-base);transition:color var(--animation-duration-fast) var(--animation-easing-default)}.expand-toggle:hover{color:var(--primary-color);background:var(--surface-hover)}.expand-toggle:focus-visible{outline:var(--focus-outline-width) solid var(--focus-ring-color);outline-offset:2px}.expand-toggle i{display:inline-block;transition:transform var(--animation-duration-fast) var(--animation-easing-default)}.expand-toggle[aria-expanded=true] i{transform:rotate(90deg)}tr.expanded{border-bottom-color:transparent}.expanded-content-row td{background:var(--surface-ground);padding:var(--spacing-md) var(--spacing-lg);border-bottom:var(--border-width-1) solid var(--surface-border)}.child-row{background:var(--surface-ground)}.child-row td{font-size:.95em;color:var(--text-color-secondary)}.table-wrapper.striped .child-row,.table-wrapper.striped .expanded-content-row{background:var(--surface-ground)}.table-wrapper.hoverable .child-row:hover{background:var(--surface-hover)}@media(max-width:48em){.table-wrapper{font-size:var(--font-size-sm)}th,td{padding:var(--spacing-sm)}.global-search{margin-bottom:var(--spacing-sm)}}@media(max-width:30em){.table-wrapper{border-radius:0;margin:0 calc(-1 * var(--spacing-sm))}th,td{padding:var(--spacing-xs) var(--spacing-sm);font-size:var(--font-size-xs)}.th-content{gap:var(--spacing-xxs)}.th-content i{font-size:var(--font-size-sm)}}\n"] }]
|
|
4241
|
+
}], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], striped: [{ type: i0.Input, args: [{ isSignal: true, alias: "striped", required: false }] }], hoverable: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoverable", required: false }] }], bordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "bordered", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], globalSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "globalSearch", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], noResultsMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "noResultsMessage", required: false }] }], globalSearchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "globalSearchPlaceholder", required: false }] }], tableLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableLayout", required: false }] }], truncateText: [{ type: i0.Input, args: [{ isSignal: true, alias: "truncateText", required: false }] }], expandable: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandable", required: false }] }], singleExpand: [{ type: i0.Input, args: [{ isSignal: true, alias: "singleExpand", required: false }] }], expandedRowTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedRowTemplate", required: false }] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], globalSearchChange: [{ type: i0.Output, args: ["globalSearchChange"] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], rowExpand: [{ type: i0.Output, args: ["rowExpand"] }], rowCollapse: [{ type: i0.Output, args: ["rowCollapse"] }] } });
|
|
4055
4242
|
|
|
4056
4243
|
class PshTabComponent {
|
|
4057
4244
|
constructor() {
|
|
4058
|
-
this.header = input.required(...(ngDevMode ? [{ debugName: "header" }] : []));
|
|
4059
|
-
this.icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
|
|
4060
|
-
this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
4061
|
-
this.ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : []));
|
|
4062
|
-
this._index = signal(0, ...(ngDevMode ? [{ debugName: "_index" }] : []));
|
|
4063
|
-
this._isActive = signal(false, ...(ngDevMode ? [{ debugName: "_isActive" }] : []));
|
|
4245
|
+
this.header = input.required(...(ngDevMode ? [{ debugName: "header" }] : /* istanbul ignore next */ []));
|
|
4246
|
+
this.icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
|
|
4247
|
+
this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
4248
|
+
this.ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
4249
|
+
this._index = signal(0, ...(ngDevMode ? [{ debugName: "_index" }] : /* istanbul ignore next */ []));
|
|
4250
|
+
this._isActive = signal(false, ...(ngDevMode ? [{ debugName: "_isActive" }] : /* istanbul ignore next */ []));
|
|
4064
4251
|
this.index = this._index.asReadonly();
|
|
4065
4252
|
this.isActive = this._isActive.asReadonly();
|
|
4066
4253
|
}
|
|
@@ -4079,10 +4266,10 @@ class PshTabComponent {
|
|
|
4079
4266
|
ariaLabel: this.ariaLabel()
|
|
4080
4267
|
};
|
|
4081
4268
|
}
|
|
4082
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
4083
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.
|
|
4269
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: PshTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4270
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.2", type: PshTabComponent, isStandalone: true, selector: "psh-tab", inputs: { header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.tab-panel": "true", "class.active": "isActive()", "attr.role": "\"tabpanel\"", "attr.aria-labelledby": "\"tab-\" + index()", "attr.id": "\"panel-\" + index()", "attr.tabindex": "isActive() ? 0 : -1" } }, ngImport: i0, template: '<ng-content />', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4084
4271
|
}
|
|
4085
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
4272
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: PshTabComponent, decorators: [{
|
|
4086
4273
|
type: Component,
|
|
4087
4274
|
args: [{
|
|
4088
4275
|
selector: 'psh-tab',
|
|
@@ -4110,22 +4297,22 @@ const TABS_CONFIG = new InjectionToken('TABS_CONFIG', {
|
|
|
4110
4297
|
class PshTabsComponent {
|
|
4111
4298
|
constructor() {
|
|
4112
4299
|
this.config = inject(TABS_CONFIG);
|
|
4113
|
-
this.variant = input(this.config.variant ?? 'default', ...(ngDevMode ? [{ debugName: "variant" }] : []));
|
|
4114
|
-
this.size = input(this.config.size ?? 'medium', ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
4115
|
-
this.animated = input(this.config.animated ?? true, ...(ngDevMode ? [{ debugName: "animated" }] : []));
|
|
4116
|
-
this.tabs = input([], ...(ngDevMode ? [{ debugName: "tabs" }] : []));
|
|
4117
|
-
this.ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : []));
|
|
4118
|
-
this.ariaOrientation = input('horizontal', ...(ngDevMode ? [{ debugName: "ariaOrientation" }] : []));
|
|
4119
|
-
this.activeIndex = model(this.config.activeIndex ?? 0, ...(ngDevMode ? [{ debugName: "activeIndex" }] : []));
|
|
4120
|
-
this.tabComponents = contentChildren(PshTabComponent, ...(ngDevMode ? [{ debugName: "tabComponents" }] : []));
|
|
4300
|
+
this.variant = input(this.config.variant ?? 'default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
4301
|
+
this.size = input(this.config.size ?? 'medium', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
4302
|
+
this.animated = input(this.config.animated ?? true, ...(ngDevMode ? [{ debugName: "animated" }] : /* istanbul ignore next */ []));
|
|
4303
|
+
this.tabs = input([], ...(ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []));
|
|
4304
|
+
this.ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
4305
|
+
this.ariaOrientation = input('horizontal', ...(ngDevMode ? [{ debugName: "ariaOrientation" }] : /* istanbul ignore next */ []));
|
|
4306
|
+
this.activeIndex = model(this.config.activeIndex ?? 0, ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
|
|
4307
|
+
this.tabComponents = contentChildren(PshTabComponent, ...(ngDevMode ? [{ debugName: "tabComponents" }] : /* istanbul ignore next */ []));
|
|
4121
4308
|
this.tabsToDisplay = computed(() => {
|
|
4122
4309
|
const components = this.tabComponents();
|
|
4123
4310
|
if (components.length > 0) {
|
|
4124
4311
|
return components.map(c => c.toTabData());
|
|
4125
4312
|
}
|
|
4126
4313
|
return this.tabs();
|
|
4127
|
-
}, ...(ngDevMode ? [{ debugName: "tabsToDisplay" }] : []));
|
|
4128
|
-
this.hasContentProjection = computed(() => this.tabComponents().length > 0, ...(ngDevMode ? [{ debugName: "hasContentProjection" }] : []));
|
|
4314
|
+
}, ...(ngDevMode ? [{ debugName: "tabsToDisplay" }] : /* istanbul ignore next */ []));
|
|
4315
|
+
this.hasContentProjection = computed(() => this.tabComponents().length > 0, ...(ngDevMode ? [{ debugName: "hasContentProjection" }] : /* istanbul ignore next */ []));
|
|
4129
4316
|
this.activeIndexChange = output();
|
|
4130
4317
|
this.tabChange = output();
|
|
4131
4318
|
this.hostClasses = computed(() => {
|
|
@@ -4138,7 +4325,7 @@ class PshTabsComponent {
|
|
|
4138
4325
|
if (this.animated())
|
|
4139
4326
|
classes.push('tabs-animated');
|
|
4140
4327
|
return classes.join(' ');
|
|
4141
|
-
}, ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
|
|
4328
|
+
}, ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
|
|
4142
4329
|
effect(() => {
|
|
4143
4330
|
const tabs = this.tabComponents();
|
|
4144
4331
|
const currentIndex = this.activeIndex();
|
|
@@ -4235,10 +4422,10 @@ class PshTabsComponent {
|
|
|
4235
4422
|
getTabComponent(index) {
|
|
4236
4423
|
return this.tabComponents()[index];
|
|
4237
4424
|
}
|
|
4238
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
4239
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
4425
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: PshTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4426
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", type: PshTabsComponent, isStandalone: true, selector: "psh-tabs", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, animated: { classPropertyName: "animated", publicName: "animated", isSignal: true, isRequired: false, transformFunction: null }, tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaOrientation: { classPropertyName: "ariaOrientation", publicName: "ariaOrientation", isSignal: true, isRequired: false, transformFunction: null }, activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeIndex: "activeIndexChange", activeIndexChange: "activeIndexChange", tabChange: "tabChange" }, host: { attributes: { "role": "region" }, properties: { "class": "hostClasses()", "attr.aria-label": "ariaLabel() || \"Navigation par onglets\"" } }, queries: [{ propertyName: "tabComponents", predicate: PshTabComponent, isSignal: true }], ngImport: i0, template: "<div\n class=\"tabs-container\"\n [class.animated]=\"animated()\"\n role=\"tablist\"\n [attr.aria-orientation]=\"ariaOrientation()\"\n>\n <div class=\"tabs-header\" [class]=\"variant()\">\n @for (tab of tabsToDisplay(); track $index; let i = $index) {\n <button\n class=\"tab-button\"\n role=\"tab\"\n [class.active]=\"i === activeIndex()\"\n [attr.aria-selected]=\"i === activeIndex()\"\n [attr.aria-disabled]=\"tab.disabled || null\"\n [attr.aria-controls]=\"'panel-' + i\"\n [attr.aria-label]=\"tab.ariaLabel || tab.header\"\n [attr.id]=\"'tab-' + i\"\n [tabindex]=\"i === activeIndex() ? 0 : -1\"\n [disabled]=\"tab.disabled\"\n (click)=\"$event.preventDefault(); selectTab(i)\"\n (keydown)=\"handleKeyDown($event, i)\"\n >\n @if (tab.icon) {\n <i class=\"ph ph-{{ tab.icon }}\" aria-hidden=\"true\"></i>\n }\n {{ tab.header }}\n </button>\n }\n </div>\n\n <div class=\"tabs-content\">\n @if (hasContentProjection()) {\n <ng-content />\n } @else {\n @for (tab of tabsToDisplay(); track $index; let i = $index) {\n <div\n class=\"tab-panel\"\n role=\"tabpanel\"\n [class.active]=\"i === activeIndex()\"\n [attr.aria-labelledby]=\"'tab-' + i\"\n [attr.id]=\"'panel-' + i\"\n [attr.tabindex]=\"i === activeIndex() ? 0 : -1\"\n [attr.hidden]=\"i !== activeIndex() || null\"\n >\n {{ tab.content }}\n </div>\n }\n }\n </div>\n</div>\n", styles: [".tabs-wrapper,.tabs-container{display:flex;flex-direction:column;width:100%}.tabs-header{display:flex;gap:var(--spacing-xs);margin-bottom:var(--spacing-lg);border-bottom:var(--border-width-1) solid var(--surface-border);position:relative;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:thin}.tabs-header.pills{border-bottom:none;background:var(--surface-ground);padding:var(--spacing-xs);border-radius:var(--border-radius)}.tabs-header.underline{gap:var(--spacing-lg)}.tab-button{display:inline-flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);border:none;background:transparent;color:var(--text-color-secondary);font-family:inherit;font-size:var(--font-size-base);font-weight:var(--font-weight-normal);line-height:var(--line-height-normal);cursor:pointer;transition:all var(--animation-duration-normal) var(--animation-easing-smooth);position:relative;white-space:nowrap;flex-shrink:0}.tab-button:focus{outline:none;box-shadow:0 0 0 var(--focus-ring-width) var(--focus-ring-color)}.tab-button:focus-visible{outline:var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);outline-offset:var(--focus-outline-offset)}.tab-button:focus:not(:focus-visible){box-shadow:none;outline:none}.tab-button:disabled,.tab-button[aria-disabled=true]{opacity:var(--opacity-disabled);cursor:not-allowed;pointer-events:none}.default .tab-button{border-radius:var(--border-radius)}.default .tab-button:hover:not(:disabled):not([aria-disabled=true]):not(.active){background:var(--surface-hover);color:var(--text-color)}.default .tab-button.active{background:var(--primary-color);color:var(--primary-color-text);font-weight:var(--font-weight-medium)}.pills .tab-button{border-radius:var(--border-radius)}.pills .tab-button:hover:not(:disabled):not([aria-disabled=true]):not(.active){background:var(--surface-card);color:var(--text-color)}.pills .tab-button.active{background:var(--primary-color);color:var(--primary-color-text);font-weight:var(--font-weight-medium)}.underline .tab-button{padding-left:0;padding-right:0;padding-bottom:var(--spacing-sm);margin-bottom:calc(-1 * var(--border-width-1));border-bottom:var(--border-width-2) solid transparent}.underline .tab-button:hover:not(:disabled):not([aria-disabled=true]):not(.active){color:var(--text-color)}.underline .tab-button.active{color:var(--primary-color);font-weight:var(--font-weight-medium);border-bottom-color:var(--primary-color)}.tab-panel,psh-tab{display:none}.tab-panel:focus,psh-tab:focus{outline:none}.tab-panel.active,psh-tab.active{display:block}.tabs-animated .tab-panel.active,.tabs-animated psh-tab.active{animation:fadeIn var(--animation-duration-normal) var(--animation-easing-out)}:host(.tabs-small) .tab-button{padding:var(--spacing-xs) var(--spacing-sm);font-size:var(--font-size-sm);gap:var(--spacing-xs)}:host(.tabs-small) .tab-button i{font-size:var(--icon-size-sm)}:host(.tabs-large) .tab-button{padding:var(--spacing-md) var(--spacing-lg);font-size:var(--font-size-lg);gap:var(--spacing-md)}:host(.tabs-large) .tab-button i{font-size:var(--icon-size-lg)}.tab-button i{font-size:var(--icon-size-md);flex-shrink:0}@keyframes fadeIn{0%{opacity:0;transform:translateY(var(--spacing-xs))}to{opacity:1;transform:translateY(0)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4240
4427
|
}
|
|
4241
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
4428
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: PshTabsComponent, decorators: [{
|
|
4242
4429
|
type: Component,
|
|
4243
4430
|
args: [{ selector: 'psh-tabs', changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
4244
4431
|
'[class]': 'hostClasses()',
|
|
@@ -4260,8 +4447,8 @@ const TOAST_CONFIG = new InjectionToken('TOAST_CONFIG', {
|
|
|
4260
4447
|
|
|
4261
4448
|
class PshToastService {
|
|
4262
4449
|
constructor() {
|
|
4263
|
-
this._toasts = signal([], ...(ngDevMode ? [{ debugName: "_toasts" }] : []));
|
|
4264
|
-
this._position = signal('top-right', ...(ngDevMode ? [{ debugName: "_position" }] : []));
|
|
4450
|
+
this._toasts = signal([], ...(ngDevMode ? [{ debugName: "_toasts" }] : /* istanbul ignore next */ []));
|
|
4451
|
+
this._position = signal('top-right', ...(ngDevMode ? [{ debugName: "_position" }] : /* istanbul ignore next */ []));
|
|
4265
4452
|
this.config = inject(TOAST_CONFIG);
|
|
4266
4453
|
this.toasts = this._toasts.asReadonly();
|
|
4267
4454
|
this.position = this._position.asReadonly();
|
|
@@ -4305,10 +4492,10 @@ class PshToastService {
|
|
|
4305
4492
|
setPosition(position) {
|
|
4306
4493
|
this._position.set(position);
|
|
4307
4494
|
}
|
|
4308
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
4309
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.
|
|
4495
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: PshToastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
4496
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: PshToastService, providedIn: 'root' }); }
|
|
4310
4497
|
}
|
|
4311
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
4498
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: PshToastService, decorators: [{
|
|
4312
4499
|
type: Injectable,
|
|
4313
4500
|
args: [{
|
|
4314
4501
|
providedIn: 'root'
|
|
@@ -4412,10 +4599,10 @@ class PshToastComponent {
|
|
|
4412
4599
|
this.timeoutMap.clear();
|
|
4413
4600
|
this.scheduledToastIds.clear();
|
|
4414
4601
|
}
|
|
4415
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
4416
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
4602
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: PshToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4603
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", type: PshToastComponent, isStandalone: true, selector: "psh-toast", host: { listeners: { "document:keydown.escape": "handleEscapeKey()" } }, ngImport: i0, template: "<div\n class=\"toast-container\"\n [class]=\"position()\"\n role=\"region\"\n aria-label=\"Notifications\"\n>\n @for (toast of toasts(); track toast.id) {\n <div\n class=\"toast-item\"\n [class]=\"toast.type\"\n role=\"alert\"\n aria-live=\"polite\"\n aria-atomic=\"true\"\n [style.--progress-duration]=\"toast.duration + 'ms'\"\n (mouseenter)=\"handleMouseEnter(toast.id!)\"\n (mouseleave)=\"handleMouseLeave(toast.id!)\"\n >\n @if (config.showIcon !== false) {\n <i\n class=\"ph ph-{{ toast.icon || getDefaultIcon(toast.type) }} toast-icon\"\n aria-hidden=\"true\"\n ></i>\n }\n <div class=\"toast-content\">\n {{ toast.message }}\n </div>\n @if (shouldShowCloseButton(toast)) {\n <button\n type=\"button\"\n class=\"toast-close\"\n (click)=\"handleDismiss(toast.id)\"\n [attr.aria-label]=\"getCloseButtonAriaLabel(toast)\"\n >\n <i class=\"ph ph-x\" aria-hidden=\"true\"></i>\n </button>\n }\n </div>\n }\n</div>\n", styles: [".toast-container{--toast-min-width: 18.75rem;--toast-max-width: 31.25rem;--toast-progress-height: 3px;--toast-icon-size: 1.5rem;position:fixed;display:flex;flex-direction:column;gap:var(--spacing-sm);padding:var(--spacing-md);z-index:var(--z-index-toast);pointer-events:none;max-width:100%}.toast-item{min-width:var(--toast-min-width);max-width:var(--toast-max-width);padding:var(--spacing-md);background:var(--surface-0);border-radius:var(--border-radius-lg);box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:var(--spacing-md);animation:slideIn var(--animation-duration-default) var(--animation-easing-default);position:relative;overflow:hidden;pointer-events:all;border:1px solid var(--surface-border);width:100%}@media(prefers-reduced-motion:reduce){.toast-item{animation:fadeIn var(--animation-duration-fast) var(--animation-easing-default)}}.toast-item:after{content:\"\";position:absolute;bottom:0;left:0;height:var(--toast-progress-height);background:currentColor;opacity:.2;animation:progress var(--progress-duration) linear forwards}@media(prefers-reduced-motion:reduce){.toast-item:after{animation:none}}.toast-item.info{background:var(--surface-0);border-color:var(--primary-color);color:var(--primary-color);box-shadow:0 4px 12px rgba(var(--primary-color-rgb),.1)}.toast-item.success{background:var(--surface-0);border-color:var(--success-color);color:var(--success-color);box-shadow:0 4px 12px rgba(var(--success-color-rgb),.1)}.toast-item.warning{background:var(--surface-0);border-color:var(--warning-color);color:var(--warning-color);box-shadow:0 4px 12px rgba(var(--warning-color-rgb),.1)}.toast-item.danger{background:var(--surface-0);border-color:var(--danger-color);color:var(--danger-color);box-shadow:0 4px 12px rgba(var(--danger-color-rgb),.1)}.toast-icon{font-size:var(--toast-icon-size);flex-shrink:0;display:flex;align-items:center;justify-content:center}.toast-content{flex:1;color:inherit;font-size:var(--font-size-base);line-height:var(--line-height-relaxed);font-weight:500;margin:0;padding-right:var(--spacing-md);overflow:hidden;text-overflow:ellipsis}.toast-close{background:transparent;border:none;color:currentColor;padding:var(--spacing-xs);cursor:pointer;opacity:.7;transition:all var(--animation-duration-normal) var(--animation-easing-default);border-radius:var(--border-radius);display:flex;align-items:center;justify-content:center;margin:calc(var(--spacing-xs) * -1);flex-shrink:0;width:var(--spacing-2xl);height:var(--spacing-2xl)}.toast-close:hover{opacity:1;background:var(--surface-hover)}.toast-close:focus{outline:none;box-shadow:0 0 0 var(--focus-outline-width) var(--focus-ring-color)}.toast-close i{font-size:1.1rem}.top-right{top:0;right:0}.top-left{top:0;left:0}.bottom-right{bottom:0;right:0}.bottom-left{bottom:0;left:0}@keyframes slideIn{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes progress{0%{width:100%}to{width:0%}}@media(max-width:576px){.toast-container{padding:var(--spacing-sm);width:100%;left:0!important;right:0!important}.toast-item{min-width:0;margin:0 var(--spacing-sm);max-width:calc(100vw - var(--spacing-md))}.toast-content{font-size:var(--font-size-sm);padding-right:var(--spacing-sm)}.toast-close{width:var(--spacing-xl);height:var(--spacing-xl)}.toast-close i{font-size:1rem}}@media(max-width:480px){.toast-container{padding:var(--spacing-xs)}.toast-item{margin:0 var(--spacing-xs);padding:var(--spacing-sm)}.toast-icon{font-size:1.25rem}.toast-content{font-size:var(--font-size-xs)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4417
4604
|
}
|
|
4418
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
4605
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: PshToastComponent, decorators: [{
|
|
4419
4606
|
type: Component,
|
|
4420
4607
|
args: [{ selector: 'psh-toast', changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
4421
4608
|
'(document:keydown.escape)': 'handleEscapeKey()'
|
|
@@ -4496,16 +4683,16 @@ function darkenColor(hex, percent) {
|
|
|
4496
4683
|
class ThemeService {
|
|
4497
4684
|
constructor() {
|
|
4498
4685
|
this.insurerContext = inject(INSURER_CONTEXT_SERVICE, { optional: true });
|
|
4499
|
-
this.isDarkThemeSignal = signal(false, ...(ngDevMode ? [{ debugName: "isDarkThemeSignal" }] : []));
|
|
4500
|
-
this.themeNameSignal = signal('light', ...(ngDevMode ? [{ debugName: "themeNameSignal" }] : []));
|
|
4501
|
-
this.lastChangeSignal = signal(new Date(), ...(ngDevMode ? [{ debugName: "lastChangeSignal" }] : []));
|
|
4502
|
-
this.isDarkTheme = computed(() => this.isDarkThemeSignal(), ...(ngDevMode ? [{ debugName: "isDarkTheme" }] : []));
|
|
4503
|
-
this.themeName = computed(() => this.themeNameSignal(), ...(ngDevMode ? [{ debugName: "themeName" }] : []));
|
|
4686
|
+
this.isDarkThemeSignal = signal(false, ...(ngDevMode ? [{ debugName: "isDarkThemeSignal" }] : /* istanbul ignore next */ []));
|
|
4687
|
+
this.themeNameSignal = signal('light', ...(ngDevMode ? [{ debugName: "themeNameSignal" }] : /* istanbul ignore next */ []));
|
|
4688
|
+
this.lastChangeSignal = signal(new Date(), ...(ngDevMode ? [{ debugName: "lastChangeSignal" }] : /* istanbul ignore next */ []));
|
|
4689
|
+
this.isDarkTheme = computed(() => this.isDarkThemeSignal(), ...(ngDevMode ? [{ debugName: "isDarkTheme" }] : /* istanbul ignore next */ []));
|
|
4690
|
+
this.themeName = computed(() => this.themeNameSignal(), ...(ngDevMode ? [{ debugName: "themeName" }] : /* istanbul ignore next */ []));
|
|
4504
4691
|
this.themeInfo = computed(() => ({
|
|
4505
4692
|
isDark: this.isDarkTheme(),
|
|
4506
4693
|
name: this.themeName(),
|
|
4507
4694
|
lastChange: this.lastChangeSignal()
|
|
4508
|
-
}), ...(ngDevMode ? [{ debugName: "themeInfo" }] : []));
|
|
4695
|
+
}), ...(ngDevMode ? [{ debugName: "themeInfo" }] : /* istanbul ignore next */ []));
|
|
4509
4696
|
// Initialiser le thème en fonction de la préférence stockée ou par défaut 'light'
|
|
4510
4697
|
this.initializeTheme();
|
|
4511
4698
|
// Listen for system theme changes (commented out to keep user control)
|
|
@@ -4675,10 +4862,10 @@ class ThemeService {
|
|
|
4675
4862
|
console.warn('Unable to save theme to localStorage:', error);
|
|
4676
4863
|
}
|
|
4677
4864
|
}
|
|
4678
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
4679
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.
|
|
4865
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: ThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
4866
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: ThemeService, providedIn: 'root' }); }
|
|
4680
4867
|
}
|
|
4681
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
4868
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: ThemeService, decorators: [{
|
|
4682
4869
|
type: Injectable,
|
|
4683
4870
|
args: [{
|
|
4684
4871
|
providedIn: 'root'
|
|
@@ -4708,10 +4895,10 @@ class NgxTranslateProvider {
|
|
|
4708
4895
|
onLangChange() {
|
|
4709
4896
|
return this.translateService.onLangChange.pipe(map(event => event.lang));
|
|
4710
4897
|
}
|
|
4711
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
4712
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.
|
|
4898
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: NgxTranslateProvider, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
4899
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: NgxTranslateProvider }); }
|
|
4713
4900
|
}
|
|
4714
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
4901
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: NgxTranslateProvider, decorators: [{
|
|
4715
4902
|
type: Injectable
|
|
4716
4903
|
}] });
|
|
4717
4904
|
const TRANSLATION_PROVIDER = new InjectionToken('TRANSLATION_PROVIDER', {
|
|
@@ -4732,10 +4919,10 @@ class ScrollService {
|
|
|
4732
4919
|
window.scrollTo(0, 0);
|
|
4733
4920
|
});
|
|
4734
4921
|
}
|
|
4735
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
4736
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.
|
|
4922
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: ScrollService, deps: [{ token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
4923
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: ScrollService, providedIn: 'root' }); }
|
|
4737
4924
|
}
|
|
4738
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
4925
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: ScrollService, decorators: [{
|
|
4739
4926
|
type: Injectable,
|
|
4740
4927
|
args: [{
|
|
4741
4928
|
providedIn: 'root'
|