ps-helix 3.0.9 → 4.0.1
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 +44 -35
- package/fesm2022/ps-helix.mjs +363 -750
- package/fesm2022/ps-helix.mjs.map +1 -1
- package/package.json +3 -3
- package/{index.d.ts → types/ps-helix.d.ts} +83 -126
package/fesm2022/ps-helix.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { input, output, computed, ChangeDetectionStrategy, Component, model, inject, ElementRef, signal, PLATFORM_ID, ViewEncapsulation, InjectionToken, viewChild,
|
|
2
|
+
import { input, output, computed, ChangeDetectionStrategy, Component, model, inject, ElementRef, signal, PLATFORM_ID, ViewEncapsulation, InjectionToken, viewChild, effect, ChangeDetectorRef, DestroyRef, Injectable, Renderer2, contentChild, EventEmitter, Output, Input, contentChildren, afterNextRender } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/common';
|
|
4
4
|
import { CommonModule, isPlatformBrowser, NgTemplateOutlet } from '@angular/common';
|
|
5
5
|
import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
|
|
@@ -57,12 +57,12 @@ class PshAlertComponent {
|
|
|
57
57
|
handleClose() {
|
|
58
58
|
this.closed.emit();
|
|
59
59
|
}
|
|
60
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
61
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
60
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PshAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
61
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", 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: "
|
|
63
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PshAlertComponent, decorators: [{
|
|
64
64
|
type: Component,
|
|
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
|
|
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"] }] } });
|
|
67
67
|
|
|
68
68
|
// Default configuration
|
|
@@ -104,10 +104,10 @@ class PshAvatarComponent {
|
|
|
104
104
|
}, ...(ngDevMode ? [{ debugName: "statusColor" }] : []));
|
|
105
105
|
this.state = computed(() => this.status() || 'default', ...(ngDevMode ? [{ debugName: "state" }] : []));
|
|
106
106
|
}
|
|
107
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
108
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
107
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PshAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
108
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", 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: "
|
|
110
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", 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 }] }] } });
|
|
@@ -198,10 +198,10 @@ class PshBadgeComponent {
|
|
|
198
198
|
onBadgeClick() {
|
|
199
199
|
this.badgeClick.emit();
|
|
200
200
|
}
|
|
201
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
202
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
201
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PshBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
202
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", 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: "
|
|
204
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", 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"] }] } });
|
|
@@ -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: "
|
|
280
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
279
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PshButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
280
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", 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: "
|
|
282
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", 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()',
|
|
@@ -432,12 +432,12 @@ class PshCardComponent {
|
|
|
432
432
|
}
|
|
433
433
|
}
|
|
434
434
|
}
|
|
435
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
436
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", 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 }, 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" }, 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\">\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>*{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 }); }
|
|
435
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PshCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
436
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", 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 }, 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" }, 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\">\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>*{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
437
|
}
|
|
438
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
438
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PshCardComponent, decorators: [{
|
|
439
439
|
type: Component,
|
|
440
|
-
args: [{ selector: 'psh-card', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, 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\">\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>*{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
|
|
440
|
+
args: [{ selector: 'psh-card', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, 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\">\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>*{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"] }]
|
|
441
441
|
}], ctorParameters: () => [], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }, { type: i0.Output, args: ["variantChange"] }], hoverable: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoverable", required: false }] }, { type: i0.Output, args: ["hoverableChange"] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }, { type: i0.Output, args: ["interactiveChange"] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], colorVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorVariant", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], showHeaderDivider: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHeaderDivider", required: false }] }], showFooterDivider: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFooterDivider", required: false }] }], showActionsDivider: [{ type: i0.Input, args: [{ isSignal: true, alias: "showActionsDivider", required: false }] }], actionsAlignment: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionsAlignment", required: false }] }], cssClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "cssClass", required: false }] }], customStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "customStyle", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
|
|
442
442
|
|
|
443
443
|
const TAG_CONFIG = new InjectionToken('TAG_CONFIG', {
|
|
@@ -510,10 +510,10 @@ class PshTagComponent {
|
|
|
510
510
|
this.closed.emit();
|
|
511
511
|
}
|
|
512
512
|
}
|
|
513
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
514
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
513
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PshTagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
514
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", 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 }); }
|
|
515
515
|
}
|
|
516
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
516
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PshTagComponent, decorators: [{
|
|
517
517
|
type: Component,
|
|
518
518
|
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"] }]
|
|
519
519
|
}], 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"] }] } });
|
|
@@ -654,12 +654,12 @@ class PshStatCardComponent {
|
|
|
654
654
|
}
|
|
655
655
|
}
|
|
656
656
|
}
|
|
657
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
658
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
657
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PshStatCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
658
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", 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 }); }
|
|
659
659
|
}
|
|
660
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
660
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PshStatCardComponent, decorators: [{
|
|
661
661
|
type: Component,
|
|
662
|
-
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
|
|
662
|
+
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"] }]
|
|
663
663
|
}], 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"] }] } });
|
|
664
664
|
|
|
665
665
|
/**
|
|
@@ -762,12 +762,12 @@ class PshHorizontalCardComponent {
|
|
|
762
762
|
}
|
|
763
763
|
}
|
|
764
764
|
}
|
|
765
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
766
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
765
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PshHorizontalCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
766
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", 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 }); }
|
|
767
767
|
}
|
|
768
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
768
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PshHorizontalCardComponent, decorators: [{
|
|
769
769
|
type: Component,
|
|
770
|
-
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
|
|
770
|
+
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"] }]
|
|
771
771
|
}], 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"] }] } });
|
|
772
772
|
|
|
773
773
|
/**
|
|
@@ -930,14 +930,14 @@ class PshInfoCardComponent {
|
|
|
930
930
|
}
|
|
931
931
|
}
|
|
932
932
|
}
|
|
933
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
934
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", 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 }); }
|
|
933
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PshInfoCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
934
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", 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 }); }
|
|
935
935
|
}
|
|
936
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
936
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PshInfoCardComponent, decorators: [{
|
|
937
937
|
type: Component,
|
|
938
938
|
args: [{ selector: 'psh-info-card', imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
939
939
|
style: 'display: block; height: 100%;'
|
|
940
|
-
}, 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
|
|
940
|
+
}, 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"] }]
|
|
941
941
|
}], ctorParameters: () => [], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], cssClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "cssClass", required: false }] }], customStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "customStyle", 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 }] }], clicked: [{ type: i0.Output, args: ["clicked"] }], autoFullWidthOnMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoFullWidthOnMobile", required: false }] }] } });
|
|
942
942
|
|
|
943
943
|
const CHECKBOX_CONFIG = new InjectionToken('CHECKBOX_CONFIG', {
|
|
@@ -953,116 +953,83 @@ const CHECKBOX_CONFIG = new InjectionToken('CHECKBOX_CONFIG', {
|
|
|
953
953
|
});
|
|
954
954
|
let checkboxIdCounter = 0;
|
|
955
955
|
class PshCheckboxComponent {
|
|
956
|
-
set checkedInput(v) { this.checked.set(v); }
|
|
957
|
-
set disabledInput(v) { this.disabled.set(v); }
|
|
958
|
-
set indeterminateInput(v) { this.indeterminate.set(v); }
|
|
959
956
|
constructor() {
|
|
960
957
|
this.config = inject(CHECKBOX_CONFIG);
|
|
961
|
-
this.uniqueId = `checkbox-${++checkboxIdCounter}`;
|
|
962
958
|
this.checkboxInput = viewChild('checkboxInput', ...(ngDevMode ? [{ debugName: "checkboxInput" }] : []));
|
|
963
|
-
this.
|
|
959
|
+
this.uniqueId = `psh-cb-${++checkboxIdCounter}`;
|
|
960
|
+
this.onChange = (_) => { };
|
|
964
961
|
this.onTouched = () => { };
|
|
965
|
-
|
|
966
|
-
|
|
967
|
-
this.
|
|
968
|
-
this.
|
|
969
|
-
this.indeterminate = signal(this.config.indeterminate ?? false, ...(ngDevMode ? [{ debugName: "indeterminate" }] : []));
|
|
962
|
+
this.checked = model(this.config.checked ?? false, ...(ngDevMode ? [{ debugName: "checked" }] : []));
|
|
963
|
+
this.disabled = model(this.config.disabled ?? false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
964
|
+
this.indeterminate = model(this.config.indeterminate ?? false, ...(ngDevMode ? [{ debugName: "indeterminate" }] : []));
|
|
965
|
+
this.touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : []));
|
|
970
966
|
this.required = input(this.config.required ?? false, ...(ngDevMode ? [{ debugName: "required" }] : []));
|
|
971
|
-
// Outputs — EventEmitter to decouple from signal writes.
|
|
972
|
-
this.checkedChange = new EventEmitter();
|
|
973
|
-
this.disabledChange = new EventEmitter();
|
|
974
|
-
this.indeterminateChange = new EventEmitter();
|
|
975
967
|
this.label = input(this.config.label ?? '', ...(ngDevMode ? [{ debugName: "label" }] : []));
|
|
976
|
-
this.error = input(
|
|
977
|
-
this.success = input(
|
|
978
|
-
this.ariaLabel = input(...(ngDevMode ? [
|
|
968
|
+
this.error = input(this.config.error, ...(ngDevMode ? [{ debugName: "error" }] : []));
|
|
969
|
+
this.success = input(this.config.success, ...(ngDevMode ? [{ debugName: "success" }] : []));
|
|
970
|
+
this.ariaLabel = input(this.config.ariaLabel, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
|
|
979
971
|
this.size = input(this.config.size ?? 'medium', ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
980
972
|
this.labelPosition = input(this.config.labelPosition ?? 'right', ...(ngDevMode ? [{ debugName: "labelPosition" }] : []));
|
|
981
973
|
this.ariaChecked = computed(() => this.indeterminate() ? 'mixed' : (this.checked() ? 'true' : 'false'), ...(ngDevMode ? [{ debugName: "ariaChecked" }] : []));
|
|
982
|
-
this.computedAriaLabel = computed(() => this.ariaLabel(), ...(ngDevMode ? [{ debugName: "computedAriaLabel" }] : []));
|
|
983
|
-
this.errorMessageId = computed(() => this.error() ? `${this.uniqueId}-error` : undefined, ...(ngDevMode ? [{ debugName: "errorMessageId" }] : []));
|
|
984
|
-
this.successMessageId = computed(() => this.success() ? `${this.uniqueId}-success` : undefined, ...(ngDevMode ? [{ debugName: "successMessageId" }] : []));
|
|
974
|
+
this.computedAriaLabel = computed(() => this.ariaLabel() || this.label() || undefined, ...(ngDevMode ? [{ debugName: "computedAriaLabel" }] : []));
|
|
985
975
|
this.ariaDescribedBy = computed(() => {
|
|
986
976
|
const ids = [];
|
|
987
|
-
if (this.
|
|
988
|
-
ids.push(this.
|
|
989
|
-
if (this.
|
|
990
|
-
ids.push(this.
|
|
977
|
+
if (this.error())
|
|
978
|
+
ids.push(`${this.uniqueId}-error`);
|
|
979
|
+
if (this.success())
|
|
980
|
+
ids.push(`${this.uniqueId}-success`);
|
|
991
981
|
return ids.length > 0 ? ids.join(' ') : undefined;
|
|
992
982
|
}, ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : []));
|
|
993
|
-
this.state = computed(() =>
|
|
983
|
+
this.state = computed(() => {
|
|
984
|
+
if (this.disabled())
|
|
985
|
+
return 'disabled';
|
|
986
|
+
if (this.indeterminate())
|
|
987
|
+
return 'indeterminate';
|
|
988
|
+
if (this.error())
|
|
989
|
+
return 'error';
|
|
990
|
+
if (this.success())
|
|
991
|
+
return 'success';
|
|
992
|
+
return this.checked() ? 'checked' : 'unchecked';
|
|
993
|
+
}, ...(ngDevMode ? [{ debugName: "state" }] : []));
|
|
994
994
|
effect(() => {
|
|
995
995
|
if (!this.label() && !this.ariaLabel()) {
|
|
996
|
-
console.warn('[psh-checkbox]
|
|
996
|
+
console.warn('[psh-checkbox] Label manquant pour l\'accessibilité.');
|
|
997
997
|
}
|
|
998
|
-
}
|
|
999
|
-
}
|
|
1000
|
-
getState() {
|
|
1001
|
-
if (this.disabled())
|
|
1002
|
-
return 'disabled';
|
|
1003
|
-
if (this.indeterminate())
|
|
1004
|
-
return 'indeterminate';
|
|
1005
|
-
if (this.error())
|
|
1006
|
-
return 'error';
|
|
1007
|
-
if (this.success())
|
|
1008
|
-
return 'success';
|
|
1009
|
-
return this.checked() ? 'checked' : 'unchecked';
|
|
998
|
+
});
|
|
1010
999
|
}
|
|
1011
1000
|
toggle() {
|
|
1012
1001
|
if (!this.disabled()) {
|
|
1013
|
-
this.checked
|
|
1002
|
+
const newValue = !this.checked();
|
|
1003
|
+
this.checked.set(newValue);
|
|
1014
1004
|
this.indeterminate.set(false);
|
|
1015
|
-
this.onChange(
|
|
1016
|
-
this.checkedChange.emit(this.checked());
|
|
1005
|
+
this.onChange(newValue);
|
|
1017
1006
|
this.onTouched();
|
|
1007
|
+
this.touched.set(true);
|
|
1018
1008
|
}
|
|
1019
1009
|
}
|
|
1020
1010
|
handleKeydown(event) {
|
|
1021
1011
|
if (this.disabled())
|
|
1022
1012
|
return;
|
|
1023
|
-
if (event.key === ' ' || event.key === 'Spacebar') {
|
|
1013
|
+
if (event.key === ' ' || event.key === 'Spacebar' || event.key === 'Enter') {
|
|
1024
1014
|
event.preventDefault();
|
|
1025
1015
|
this.toggle();
|
|
1026
1016
|
}
|
|
1027
|
-
else if (event.key === 'Enter') {
|
|
1028
|
-
event.preventDefault();
|
|
1029
|
-
this.toggle();
|
|
1030
|
-
}
|
|
1031
|
-
}
|
|
1032
|
-
writeValue(value) {
|
|
1033
|
-
this.checked.set(value ?? false);
|
|
1034
|
-
}
|
|
1035
|
-
registerOnChange(fn) {
|
|
1036
|
-
this.onChange = fn;
|
|
1037
|
-
}
|
|
1038
|
-
registerOnTouched(fn) {
|
|
1039
|
-
this.onTouched = fn;
|
|
1040
|
-
}
|
|
1041
|
-
setDisabledState(isDisabled) {
|
|
1042
|
-
this.disabled.set(isDisabled);
|
|
1043
|
-
}
|
|
1044
|
-
focus() {
|
|
1045
|
-
const input = this.checkboxInput();
|
|
1046
|
-
if (input?.nativeElement) {
|
|
1047
|
-
input.nativeElement.focus();
|
|
1048
|
-
}
|
|
1049
|
-
}
|
|
1050
|
-
blur() {
|
|
1051
|
-
const input = this.checkboxInput();
|
|
1052
|
-
if (input?.nativeElement) {
|
|
1053
|
-
input.nativeElement.blur();
|
|
1054
|
-
}
|
|
1055
1017
|
}
|
|
1056
|
-
|
|
1057
|
-
|
|
1018
|
+
writeValue(value) { this.checked.set(!!value); }
|
|
1019
|
+
registerOnChange(fn) { this.onChange = fn; }
|
|
1020
|
+
registerOnTouched(fn) { this.onTouched = fn; }
|
|
1021
|
+
setDisabledState(isDisabled) { this.disabled.set(isDisabled); }
|
|
1022
|
+
focus() { this.checkboxInput()?.nativeElement.focus(); }
|
|
1023
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PshCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1024
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", 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: [{
|
|
1058
1025
|
provide: NG_VALUE_ACCESSOR,
|
|
1059
1026
|
useExisting: PshCheckboxComponent,
|
|
1060
1027
|
multi: true
|
|
1061
|
-
}], 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-
|
|
1028
|
+
}], 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 }); }
|
|
1062
1029
|
}
|
|
1063
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1030
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PshCheckboxComponent, decorators: [{
|
|
1064
1031
|
type: Component,
|
|
1065
|
-
args: [{ selector: 'psh-checkbox', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, providers: [{
|
|
1032
|
+
args: [{ selector: 'psh-checkbox', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, providers: [{
|
|
1066
1033
|
provide: NG_VALUE_ACCESSOR,
|
|
1067
1034
|
useExisting: PshCheckboxComponent,
|
|
1068
1035
|
multi: true
|
|
@@ -1072,59 +1039,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
1072
1039
|
'[class.checkbox-success]': '!!success()',
|
|
1073
1040
|
'[class.checkbox-small]': 'size() === "small"',
|
|
1074
1041
|
'[class.checkbox-large]': 'size() === "large"',
|
|
1075
|
-
'[
|
|
1076
|
-
|
|
1077
|
-
|
|
1078
|
-
|
|
1079
|
-
|
|
1080
|
-
|
|
1081
|
-
type: Input,
|
|
1082
|
-
args: ['disabled']
|
|
1083
|
-
}], indeterminateInput: [{
|
|
1084
|
-
type: Input,
|
|
1085
|
-
args: ['indeterminate']
|
|
1086
|
-
}], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], checkedChange: [{
|
|
1087
|
-
type: Output
|
|
1088
|
-
}], disabledChange: [{
|
|
1089
|
-
type: Output
|
|
1090
|
-
}], indeterminateChange: [{
|
|
1091
|
-
type: Output
|
|
1092
|
-
}], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], success: [{ type: i0.Input, args: [{ isSignal: true, alias: "success", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], labelPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPosition", required: false }] }] } });
|
|
1042
|
+
'[class.checkbox-checked]': 'checked() && !indeterminate()',
|
|
1043
|
+
'[class.checkbox-indeterminate]': 'indeterminate()',
|
|
1044
|
+
'[attr.data-state]': 'state()',
|
|
1045
|
+
'[attr.aria-checked]': 'ariaChecked()'
|
|
1046
|
+
}, 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"] }]
|
|
1047
|
+
}], ctorParameters: () => [], propDecorators: { checkboxInput: [{ type: i0.ViewChild, args: ['checkboxInput', { isSignal: true }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }, { type: i0.Output, args: ["indeterminateChange"] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], success: [{ type: i0.Input, args: [{ isSignal: true, alias: "success", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], labelPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPosition", required: false }] }] } });
|
|
1093
1048
|
|
|
1094
1049
|
class PshCollapseComponent {
|
|
1095
1050
|
constructor() {
|
|
1096
1051
|
this.expanded = model(false, ...(ngDevMode ? [{ debugName: "expanded" }] : []));
|
|
1097
1052
|
this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
1098
|
-
this.variant = input('default', ...(ngDevMode ?
|
|
1099
|
-
|
|
1100
|
-
|
|
1101
|
-
|
|
1102
|
-
}
|
|
1103
|
-
return value;
|
|
1104
|
-
} }] : [{
|
|
1105
|
-
transform: (value) => {
|
|
1106
|
-
if (!['default', 'outline'].includes(value)) {
|
|
1107
|
-
console.warn(`[psh-collapse] Invalid variant "${value}", falling back to "default"`);
|
|
1108
|
-
return 'default';
|
|
1109
|
-
}
|
|
1110
|
-
return value;
|
|
1053
|
+
this.variant = input('default', { ...(ngDevMode ? { debugName: "variant" } : {}), transform: (value) => {
|
|
1054
|
+
if (!['default', 'outline'].includes(value)) {
|
|
1055
|
+
console.warn(`[psh-collapse] Invalid variant "${value}", falling back to "default"`);
|
|
1056
|
+
return 'default';
|
|
1111
1057
|
}
|
|
1112
|
-
|
|
1113
|
-
|
|
1114
|
-
|
|
1115
|
-
|
|
1116
|
-
|
|
1117
|
-
|
|
1118
|
-
return value;
|
|
1119
|
-
} }] : [{
|
|
1120
|
-
transform: (value) => {
|
|
1121
|
-
if (!['small', 'medium', 'large'].includes(value)) {
|
|
1122
|
-
console.warn(`[psh-collapse] Invalid size "${value}", falling back to "medium"`);
|
|
1123
|
-
return 'medium';
|
|
1124
|
-
}
|
|
1125
|
-
return value;
|
|
1058
|
+
return value;
|
|
1059
|
+
} });
|
|
1060
|
+
this.size = input('medium', { ...(ngDevMode ? { debugName: "size" } : {}), transform: (value) => {
|
|
1061
|
+
if (!['small', 'medium', 'large'].includes(value)) {
|
|
1062
|
+
console.warn(`[psh-collapse] Invalid size "${value}", falling back to "medium"`);
|
|
1063
|
+
return 'medium';
|
|
1126
1064
|
}
|
|
1127
|
-
|
|
1065
|
+
return value;
|
|
1066
|
+
} });
|
|
1128
1067
|
this.icon = input('caret-down', ...(ngDevMode ? [{ debugName: "icon" }] : []));
|
|
1129
1068
|
this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
|
|
1130
1069
|
this.maxHeight = input('1000px', ...(ngDevMode ? [{ debugName: "maxHeight" }] : []));
|
|
@@ -1189,10 +1128,10 @@ class PshCollapseComponent {
|
|
|
1189
1128
|
break;
|
|
1190
1129
|
}
|
|
1191
1130
|
}
|
|
1192
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1193
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
1131
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PshCollapseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1132
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.5", 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 }); }
|
|
1194
1133
|
}
|
|
1195
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1134
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PshCollapseComponent, decorators: [{
|
|
1196
1135
|
type: Component,
|
|
1197
1136
|
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"] }]
|
|
1198
1137
|
}], 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"] }] } });
|
|
@@ -1412,10 +1351,10 @@ class PshDropdownComponent {
|
|
|
1412
1351
|
document.removeEventListener('click', this.clickOutsideHandler);
|
|
1413
1352
|
}
|
|
1414
1353
|
}
|
|
1415
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1416
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1354
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PshDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1355
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", 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 }); }
|
|
1417
1356
|
}
|
|
1418
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1357
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PshDropdownComponent, decorators: [{
|
|
1419
1358
|
type: Component,
|
|
1420
1359
|
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"] }]
|
|
1421
1360
|
}], 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"] }] } });
|
|
@@ -1427,8 +1366,6 @@ const INPUT_LABELS = {
|
|
|
1427
1366
|
|
|
1428
1367
|
class PshInputComponent {
|
|
1429
1368
|
static { this.nextId = 0; }
|
|
1430
|
-
set valueInput(v) { this.value.set(v ?? ''); }
|
|
1431
|
-
set disabledInput(v) { this.disabled.set(v); }
|
|
1432
1369
|
getState() {
|
|
1433
1370
|
if (this.disabled())
|
|
1434
1371
|
return 'disabled';
|
|
@@ -1449,18 +1386,14 @@ class PshInputComponent {
|
|
|
1449
1386
|
this.cdr = inject(ChangeDetectorRef);
|
|
1450
1387
|
this.destroyRef = inject(DestroyRef);
|
|
1451
1388
|
this.inputId = `psh-input-${PshInputComponent.nextId++}`;
|
|
1452
|
-
|
|
1453
|
-
|
|
1454
|
-
this.value = signal('', ...(ngDevMode ? [{ debugName: "value" }] : []));
|
|
1455
|
-
this.disabled = signal(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
1456
|
-
// Non-CVA model inputs (two-way bindable, not written by CVA methods)
|
|
1389
|
+
this.value = model('', ...(ngDevMode ? [{ debugName: "value" }] : []));
|
|
1390
|
+
this.disabled = model(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
1457
1391
|
this.readonly = model(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
|
|
1458
1392
|
this.loading = model(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
|
|
1459
|
-
|
|
1393
|
+
this.touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : []));
|
|
1460
1394
|
this.variant = input('outlined', ...(ngDevMode ? [{ debugName: "variant" }] : []));
|
|
1461
1395
|
this.size = input('medium', ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
1462
1396
|
this.fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : []));
|
|
1463
|
-
// Regular inputs
|
|
1464
1397
|
this.required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : []));
|
|
1465
1398
|
this.showLabel = input(true, ...(ngDevMode ? [{ debugName: "showLabel" }] : []));
|
|
1466
1399
|
this.type = input('text', ...(ngDevMode ? [{ debugName: "type" }] : []));
|
|
@@ -1477,7 +1410,6 @@ class PshInputComponent {
|
|
|
1477
1410
|
minLength: 1,
|
|
1478
1411
|
debounceTime: 300
|
|
1479
1412
|
}, ...(ngDevMode ? [{ debugName: "autocompleteConfig" }] : []));
|
|
1480
|
-
// State
|
|
1481
1413
|
this.suggestionsVisible = signal(false, ...(ngDevMode ? [{ debugName: "suggestionsVisible" }] : []));
|
|
1482
1414
|
this.focusedSignal = signal(false, ...(ngDevMode ? [{ debugName: "focusedSignal" }] : []));
|
|
1483
1415
|
this.filteredSuggestionsSignal = signal([], ...(ngDevMode ? [{ debugName: "filteredSuggestionsSignal" }] : []));
|
|
@@ -1485,13 +1417,9 @@ class PshInputComponent {
|
|
|
1485
1417
|
this.passwordVisibleSignal = signal(false, ...(ngDevMode ? [{ debugName: "passwordVisibleSignal" }] : []));
|
|
1486
1418
|
this.blurTimeoutId = null;
|
|
1487
1419
|
this.debounceTimeoutId = null;
|
|
1488
|
-
// Outputs — valueChange/disabledChange use EventEmitter to decouple from signal writes.
|
|
1489
|
-
this.valueChange = new EventEmitter();
|
|
1490
|
-
this.disabledChange = new EventEmitter();
|
|
1491
1420
|
this.inputFocus = output();
|
|
1492
1421
|
this.inputBlur = output();
|
|
1493
1422
|
this.suggestionSelect = output();
|
|
1494
|
-
// Computed values
|
|
1495
1423
|
this.showSuggestions = computed(() => this.suggestionsVisible() && this.filteredSuggestions().length > 0, ...(ngDevMode ? [{ debugName: "showSuggestions" }] : []));
|
|
1496
1424
|
this.filteredSuggestions = computed(() => this.filteredSuggestionsSignal(), ...(ngDevMode ? [{ debugName: "filteredSuggestions" }] : []));
|
|
1497
1425
|
this.focused = computed(() => this.focusedSignal(), ...(ngDevMode ? [{ debugName: "focused" }] : []));
|
|
@@ -1502,62 +1430,51 @@ class PshInputComponent {
|
|
|
1502
1430
|
}
|
|
1503
1431
|
return this.type();
|
|
1504
1432
|
}, ...(ngDevMode ? [{ debugName: "effectiveType" }] : []));
|
|
1505
|
-
this.computedAriaLabel = computed(() => {
|
|
1506
|
-
|
|
1507
|
-
}, ...(ngDevMode ? [{ debugName: "computedAriaLabel" }] : []));
|
|
1508
|
-
this.passwordToggleLabel = computed(() => {
|
|
1509
|
-
return this.passwordVisible() ? INPUT_LABELS.hidePassword : INPUT_LABELS.showPassword;
|
|
1510
|
-
}, ...(ngDevMode ? [{ debugName: "passwordToggleLabel" }] : []));
|
|
1433
|
+
this.computedAriaLabel = computed(() => this.ariaLabel() || this.label() || this.placeholder(), ...(ngDevMode ? [{ debugName: "computedAriaLabel" }] : []));
|
|
1434
|
+
this.passwordToggleLabel = computed(() => this.passwordVisible() ? INPUT_LABELS.hidePassword : INPUT_LABELS.showPassword, ...(ngDevMode ? [{ debugName: "passwordToggleLabel" }] : []));
|
|
1511
1435
|
this.state = computed(() => this.getState(), ...(ngDevMode ? [{ debugName: "state" }] : []));
|
|
1512
|
-
// ControlValueAccessor implementation
|
|
1513
1436
|
this.onChange = (_) => { };
|
|
1514
1437
|
this.onTouched = () => { };
|
|
1515
1438
|
this.destroyRef.onDestroy(() => {
|
|
1516
|
-
if (this.blurTimeoutId
|
|
1517
|
-
clearTimeout(this.blurTimeoutId);
|
|
1518
|
-
|
|
1519
|
-
|
|
1520
|
-
clearTimeout(this.debounceTimeoutId);
|
|
1521
|
-
}
|
|
1439
|
+
if (this.blurTimeoutId)
|
|
1440
|
+
window.clearTimeout(this.blurTimeoutId);
|
|
1441
|
+
if (this.debounceTimeoutId)
|
|
1442
|
+
window.clearTimeout(this.debounceTimeoutId);
|
|
1522
1443
|
});
|
|
1523
1444
|
}
|
|
1524
1445
|
writeValue(value) {
|
|
1525
|
-
|
|
1446
|
+
const safeValue = typeof value === 'string' ? value : '';
|
|
1447
|
+
this.value.set(safeValue);
|
|
1526
1448
|
this.cdr.markForCheck();
|
|
1527
1449
|
}
|
|
1528
|
-
registerOnChange(fn) {
|
|
1529
|
-
|
|
1530
|
-
}
|
|
1531
|
-
registerOnTouched(fn) {
|
|
1532
|
-
this.onTouched = fn;
|
|
1533
|
-
}
|
|
1450
|
+
registerOnChange(fn) { this.onChange = fn; }
|
|
1451
|
+
registerOnTouched(fn) { this.onTouched = fn; }
|
|
1534
1452
|
setDisabledState(isDisabled) {
|
|
1535
1453
|
this.disabled.set(isDisabled);
|
|
1536
1454
|
}
|
|
1537
|
-
// Event handlers
|
|
1538
1455
|
handleInput(event) {
|
|
1539
|
-
const
|
|
1540
|
-
this.value.set(
|
|
1541
|
-
this.
|
|
1542
|
-
this.onChange(value);
|
|
1456
|
+
const val = event.target.value;
|
|
1457
|
+
this.value.set(val);
|
|
1458
|
+
this.onChange(val);
|
|
1543
1459
|
if (this.suggestions()) {
|
|
1544
|
-
this.debouncedUpdateSuggestions(
|
|
1460
|
+
this.debouncedUpdateSuggestions(val);
|
|
1545
1461
|
}
|
|
1546
1462
|
}
|
|
1547
1463
|
handleFocus() {
|
|
1548
1464
|
this.focusedSignal.set(true);
|
|
1549
1465
|
this.inputFocus.emit();
|
|
1550
|
-
|
|
1551
|
-
|
|
1466
|
+
const val = this.value();
|
|
1467
|
+
if (this.suggestions() && val.length >= this.autocompleteConfig().minLength) {
|
|
1468
|
+
this.updateSuggestions(val);
|
|
1552
1469
|
}
|
|
1553
1470
|
}
|
|
1554
1471
|
handleBlur() {
|
|
1555
1472
|
this.focusedSignal.set(false);
|
|
1556
1473
|
this.inputBlur.emit();
|
|
1557
1474
|
this.onTouched();
|
|
1558
|
-
|
|
1559
|
-
|
|
1560
|
-
|
|
1475
|
+
this.touched.set(true);
|
|
1476
|
+
if (this.blurTimeoutId)
|
|
1477
|
+
window.clearTimeout(this.blurTimeoutId);
|
|
1561
1478
|
this.blurTimeoutId = window.setTimeout(() => {
|
|
1562
1479
|
this.suggestionsVisible.set(false);
|
|
1563
1480
|
this.focusedSuggestionIndex.set(-1);
|
|
@@ -1572,18 +1489,18 @@ class PshInputComponent {
|
|
|
1572
1489
|
switch (event.key) {
|
|
1573
1490
|
case 'ArrowDown':
|
|
1574
1491
|
event.preventDefault();
|
|
1575
|
-
this.focusedSuggestionIndex.update(i => i < suggestions.length - 1 ? i + 1 : 0);
|
|
1492
|
+
this.focusedSuggestionIndex.update(i => (i < suggestions.length - 1 ? i + 1 : 0));
|
|
1576
1493
|
break;
|
|
1577
1494
|
case 'ArrowUp':
|
|
1578
1495
|
event.preventDefault();
|
|
1579
|
-
this.focusedSuggestionIndex.update(i => i > 0 ? i - 1 : suggestions.length - 1);
|
|
1496
|
+
this.focusedSuggestionIndex.update(i => (i > 0 ? i - 1 : suggestions.length - 1));
|
|
1580
1497
|
break;
|
|
1581
1498
|
case 'Enter':
|
|
1582
|
-
event.preventDefault();
|
|
1583
1499
|
if (currentIndex >= 0 && currentIndex < suggestions.length) {
|
|
1584
|
-
|
|
1585
|
-
|
|
1586
|
-
|
|
1500
|
+
event.preventDefault();
|
|
1501
|
+
const selected = suggestions[currentIndex];
|
|
1502
|
+
if (selected !== undefined) {
|
|
1503
|
+
this.handleSuggestionClick(selected);
|
|
1587
1504
|
}
|
|
1588
1505
|
}
|
|
1589
1506
|
break;
|
|
@@ -1595,13 +1512,11 @@ class PshInputComponent {
|
|
|
1595
1512
|
}
|
|
1596
1513
|
}
|
|
1597
1514
|
handleSuggestionClick(suggestion) {
|
|
1598
|
-
|
|
1599
|
-
|
|
1600
|
-
|
|
1601
|
-
|
|
1602
|
-
|
|
1603
|
-
this.suggestionsVisible.set(false);
|
|
1604
|
-
}
|
|
1515
|
+
this.value.set(suggestion);
|
|
1516
|
+
this.onChange(suggestion);
|
|
1517
|
+
this.suggestionSelect.emit(suggestion);
|
|
1518
|
+
this.suggestionsVisible.set(false);
|
|
1519
|
+
this.focusedSuggestionIndex.set(-1);
|
|
1605
1520
|
}
|
|
1606
1521
|
togglePasswordVisibility() {
|
|
1607
1522
|
this.passwordVisibleSignal.update(v => !v);
|
|
@@ -1609,72 +1524,71 @@ class PshInputComponent {
|
|
|
1609
1524
|
hasLabelContent() {
|
|
1610
1525
|
return !!this.elementRef.nativeElement.querySelector('[input-label]');
|
|
1611
1526
|
}
|
|
1527
|
+
focus() {
|
|
1528
|
+
const inputEl = this.elementRef.nativeElement.querySelector('input');
|
|
1529
|
+
inputEl?.focus();
|
|
1530
|
+
}
|
|
1612
1531
|
focusSelect() {
|
|
1613
|
-
|
|
1614
|
-
if (input) {
|
|
1615
|
-
input.focus();
|
|
1616
|
-
}
|
|
1532
|
+
this.focus();
|
|
1617
1533
|
}
|
|
1618
1534
|
debouncedUpdateSuggestions(value) {
|
|
1619
|
-
if (this.debounceTimeoutId
|
|
1620
|
-
clearTimeout(this.debounceTimeoutId);
|
|
1621
|
-
}
|
|
1622
|
-
const debounceTime = this.autocompleteConfig().debounceTime;
|
|
1535
|
+
if (this.debounceTimeoutId)
|
|
1536
|
+
window.clearTimeout(this.debounceTimeoutId);
|
|
1623
1537
|
this.debounceTimeoutId = window.setTimeout(() => {
|
|
1624
1538
|
this.updateSuggestions(value);
|
|
1625
1539
|
this.debounceTimeoutId = null;
|
|
1626
|
-
}, debounceTime);
|
|
1540
|
+
}, this.autocompleteConfig().debounceTime);
|
|
1627
1541
|
}
|
|
1628
1542
|
async updateSuggestions(value) {
|
|
1629
|
-
const
|
|
1630
|
-
|
|
1631
|
-
|
|
1632
|
-
|
|
1633
|
-
|
|
1634
|
-
this.filteredSuggestionsSignal.set(results);
|
|
1635
|
-
this.suggestionsVisible.set(true);
|
|
1636
|
-
}
|
|
1543
|
+
const provider = this.suggestions();
|
|
1544
|
+
try {
|
|
1545
|
+
let results = [];
|
|
1546
|
+
if (typeof provider === 'function') {
|
|
1547
|
+
results = await provider(value);
|
|
1637
1548
|
}
|
|
1638
|
-
|
|
1639
|
-
|
|
1640
|
-
this.filteredSuggestionsSignal.set([]);
|
|
1549
|
+
else if (Array.isArray(provider)) {
|
|
1550
|
+
results = provider.filter(s => s.toLowerCase().includes(value.toLowerCase()));
|
|
1641
1551
|
}
|
|
1552
|
+
this.filteredSuggestionsSignal.set(results);
|
|
1553
|
+
this.suggestionsVisible.set(results.length > 0);
|
|
1642
1554
|
}
|
|
1643
|
-
|
|
1644
|
-
|
|
1645
|
-
this.filteredSuggestionsSignal.set(filtered);
|
|
1646
|
-
this.suggestionsVisible.set(true);
|
|
1555
|
+
catch (error) {
|
|
1556
|
+
this.filteredSuggestionsSignal.set([]);
|
|
1647
1557
|
}
|
|
1648
1558
|
}
|
|
1649
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1650
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1559
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PshInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1560
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", 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: [
|
|
1651
1561
|
{
|
|
1652
1562
|
provide: NG_VALUE_ACCESSOR,
|
|
1653
|
-
useExisting:
|
|
1563
|
+
useExisting: PshInputComponent,
|
|
1654
1564
|
multi: true
|
|
1655
1565
|
}
|
|
1656
|
-
], ngImport: i0, template: "<div
|
|
1566
|
+
], 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{left:1rem}.input-wrapper i:last-of-type{right:1rem}.password-toggle{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);background:transparent;border:none;color:var(--text-color-secondary);cursor:pointer;padding:.25rem;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 }); }
|
|
1657
1567
|
}
|
|
1658
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1568
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PshInputComponent, decorators: [{
|
|
1659
1569
|
type: Component,
|
|
1660
1570
|
args: [{ selector: 'psh-input', imports: [CommonModule], providers: [
|
|
1661
1571
|
{
|
|
1662
1572
|
provide: NG_VALUE_ACCESSOR,
|
|
1663
|
-
useExisting:
|
|
1573
|
+
useExisting: PshInputComponent,
|
|
1664
1574
|
multi: true
|
|
1665
1575
|
}
|
|
1666
|
-
], changeDetection: ChangeDetectionStrategy.OnPush,
|
|
1667
|
-
|
|
1668
|
-
|
|
1669
|
-
|
|
1670
|
-
|
|
1671
|
-
|
|
1672
|
-
|
|
1673
|
-
|
|
1674
|
-
|
|
1675
|
-
|
|
1676
|
-
|
|
1677
|
-
|
|
1576
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
1577
|
+
'[class.full-width]': 'fullWidth()',
|
|
1578
|
+
'[class.small]': 'size() === "small"',
|
|
1579
|
+
'[class.large]': 'size() === "large"',
|
|
1580
|
+
'[class.error]': '!!error()',
|
|
1581
|
+
'[class.success]': '!!success()',
|
|
1582
|
+
'[class.disabled]': 'disabled()',
|
|
1583
|
+
'[class.readonly]': 'readonly()',
|
|
1584
|
+
'[class.loading]': 'loading()',
|
|
1585
|
+
'[class.focused]': 'focused()',
|
|
1586
|
+
'[class.has-start-icon]': '!!iconStart()',
|
|
1587
|
+
'[class.has-end-icon]': '!!iconEnd() || type() === "password"',
|
|
1588
|
+
'[class.outlined]': 'variant() === "outlined"',
|
|
1589
|
+
'[class.filled]': 'variant() === "filled"',
|
|
1590
|
+
}, 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{left:1rem}.input-wrapper i:last-of-type{right:1rem}.password-toggle{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);background:transparent;border:none;color:var(--text-color-secondary);cursor:pointer;padding:.25rem;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"] }]
|
|
1591
|
+
}], 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"] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }, { type: i0.Output, args: ["readonlyChange"] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }, { type: i0.Output, args: ["loadingChange"] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], showLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabel", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], iconStart: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconStart", required: false }] }], iconEnd: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconEnd", 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 }] }], suggestions: [{ type: i0.Input, args: [{ isSignal: true, alias: "suggestions", required: false }] }], autocompleteConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocompleteConfig", required: false }] }], inputFocus: [{ type: i0.Output, args: ["inputFocus"] }], inputBlur: [{ type: i0.Output, args: ["inputBlur"] }], suggestionSelect: [{ type: i0.Output, args: ["suggestionSelect"] }] } });
|
|
1678
1592
|
|
|
1679
1593
|
const TOOLTIP_CONFIG = new InjectionToken('TOOLTIP_CONFIG', {
|
|
1680
1594
|
factory: () => ({
|
|
@@ -1827,10 +1741,10 @@ class PshTooltipComponent {
|
|
|
1827
1741
|
generateUniqueId() {
|
|
1828
1742
|
return `psh-tooltip-${Math.random().toString(36).substr(2, 9)}`;
|
|
1829
1743
|
}
|
|
1830
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1831
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1744
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PshTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1745
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", 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 }); }
|
|
1832
1746
|
}
|
|
1833
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1747
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PshTooltipComponent, decorators: [{
|
|
1834
1748
|
type: Component,
|
|
1835
1749
|
args: [{ selector: 'psh-tooltip', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
1836
1750
|
'(mouseenter)': 'show()',
|
|
@@ -2033,12 +1947,12 @@ class PshMenuComponent {
|
|
|
2033
1947
|
}
|
|
2034
1948
|
}
|
|
2035
1949
|
}
|
|
2036
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2037
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", 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 }); }
|
|
1950
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PshMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1951
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", 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 }); }
|
|
2038
1952
|
}
|
|
2039
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1953
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PshMenuComponent, decorators: [{
|
|
2040
1954
|
type: Component,
|
|
2041
|
-
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"] }]
|
|
1955
|
+
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"] }]
|
|
2042
1956
|
}], 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"] }] } });
|
|
2043
1957
|
|
|
2044
1958
|
/**
|
|
@@ -2127,10 +2041,10 @@ class ModalService {
|
|
|
2127
2041
|
isRegistered(id) {
|
|
2128
2042
|
return this.modalsSignal().has(id);
|
|
2129
2043
|
}
|
|
2130
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2131
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
2044
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
2045
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ModalService, providedIn: 'root' }); }
|
|
2132
2046
|
}
|
|
2133
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2047
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ModalService, decorators: [{
|
|
2134
2048
|
type: Injectable,
|
|
2135
2049
|
args: [{
|
|
2136
2050
|
providedIn: 'root'
|
|
@@ -2499,12 +2413,12 @@ class PshModalComponent {
|
|
|
2499
2413
|
this.modalService.unregister(this.modalId);
|
|
2500
2414
|
this.detachModalFromBody();
|
|
2501
2415
|
}
|
|
2502
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2503
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
2416
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PshModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2417
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", 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 }); }
|
|
2504
2418
|
}
|
|
2505
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2419
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PshModalComponent, decorators: [{
|
|
2506
2420
|
type: Component,
|
|
2507
|
-
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
|
|
2421
|
+
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"] }]
|
|
2508
2422
|
}], 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 }] }] } });
|
|
2509
2423
|
|
|
2510
2424
|
const PAGINATION_CONFIG = new InjectionToken('PAGINATION_CONFIG', {
|
|
@@ -2526,36 +2440,20 @@ class PshPaginationComponent {
|
|
|
2526
2440
|
this.currentPage = model(1, ...(ngDevMode ? [{ debugName: "currentPage" }] : []));
|
|
2527
2441
|
this.totalPages = model(1, ...(ngDevMode ? [{ debugName: "totalPages" }] : []));
|
|
2528
2442
|
this.itemsPerPage = model(10, ...(ngDevMode ? [{ debugName: "itemsPerPage" }] : []));
|
|
2529
|
-
this.size = input(this.config.size ?? 'medium', ...(ngDevMode ?
|
|
2530
|
-
|
|
2531
|
-
|
|
2532
|
-
|
|
2533
|
-
}
|
|
2534
|
-
return value;
|
|
2535
|
-
} }] : [{
|
|
2536
|
-
transform: (value) => {
|
|
2537
|
-
if (!['small', 'medium', 'large'].includes(value)) {
|
|
2538
|
-
console.warn(`[psh-pagination] Invalid size "${value}", falling back to "medium"`);
|
|
2539
|
-
return 'medium';
|
|
2540
|
-
}
|
|
2541
|
-
return value;
|
|
2443
|
+
this.size = input(this.config.size ?? 'medium', { ...(ngDevMode ? { debugName: "size" } : {}), transform: (value) => {
|
|
2444
|
+
if (!['small', 'medium', 'large'].includes(value)) {
|
|
2445
|
+
console.warn(`[psh-pagination] Invalid size "${value}", falling back to "medium"`);
|
|
2446
|
+
return 'medium';
|
|
2542
2447
|
}
|
|
2543
|
-
|
|
2544
|
-
|
|
2545
|
-
|
|
2546
|
-
|
|
2547
|
-
|
|
2548
|
-
|
|
2549
|
-
return value;
|
|
2550
|
-
} }] : [{
|
|
2551
|
-
transform: (value) => {
|
|
2552
|
-
if (!['default', 'outline'].includes(value)) {
|
|
2553
|
-
console.warn(`[psh-pagination] Invalid variant "${value}", falling back to "default"`);
|
|
2554
|
-
return 'default';
|
|
2555
|
-
}
|
|
2556
|
-
return value;
|
|
2448
|
+
return value;
|
|
2449
|
+
} });
|
|
2450
|
+
this.variant = input(this.config.variant ?? 'default', { ...(ngDevMode ? { debugName: "variant" } : {}), transform: (value) => {
|
|
2451
|
+
if (!['default', 'outline'].includes(value)) {
|
|
2452
|
+
console.warn(`[psh-pagination] Invalid variant "${value}", falling back to "default"`);
|
|
2453
|
+
return 'default';
|
|
2557
2454
|
}
|
|
2558
|
-
|
|
2455
|
+
return value;
|
|
2456
|
+
} });
|
|
2559
2457
|
this.showFirstLast = input(this.config.showFirstLast ?? true, ...(ngDevMode ? [{ debugName: "showFirstLast" }] : []));
|
|
2560
2458
|
this.showPrevNext = input(this.config.showPrevNext ?? true, ...(ngDevMode ? [{ debugName: "showPrevNext" }] : []));
|
|
2561
2459
|
this.maxVisiblePages = input(this.config.maxVisiblePages ?? 5, ...(ngDevMode ? [{ debugName: "maxVisiblePages" }] : []));
|
|
@@ -2684,12 +2582,12 @@ class PshPaginationComponent {
|
|
|
2684
2582
|
break;
|
|
2685
2583
|
}
|
|
2686
2584
|
}
|
|
2687
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2688
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", 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 }); }
|
|
2585
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PshPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2586
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", 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 }); }
|
|
2689
2587
|
}
|
|
2690
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2588
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PshPaginationComponent, decorators: [{
|
|
2691
2589
|
type: Component,
|
|
2692
|
-
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
|
|
2590
|
+
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"] }]
|
|
2693
2591
|
}], 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"] }] } });
|
|
2694
2592
|
|
|
2695
2593
|
const PROGRESSBAR_CONFIG = new InjectionToken('PROGRESSBAR_CONFIG', {
|
|
@@ -2770,10 +2668,10 @@ class PshProgressbarComponent {
|
|
|
2770
2668
|
}
|
|
2771
2669
|
});
|
|
2772
2670
|
}
|
|
2773
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2774
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
2671
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PshProgressbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2672
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", 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 }); }
|
|
2775
2673
|
}
|
|
2776
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2674
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PshProgressbarComponent, decorators: [{
|
|
2777
2675
|
type: Component,
|
|
2778
2676
|
args: [{ selector: 'psh-progressbar', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
2779
2677
|
class: 'progressbar-container',
|
|
@@ -2911,10 +2809,10 @@ class PshRadioComponent {
|
|
|
2911
2809
|
// Navigate to previous radio in group
|
|
2912
2810
|
// Implementation requires radio group context
|
|
2913
2811
|
}
|
|
2914
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2915
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
2812
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PshRadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2813
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", 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 }); }
|
|
2916
2814
|
}
|
|
2917
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2815
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PshRadioComponent, decorators: [{
|
|
2918
2816
|
type: Component,
|
|
2919
2817
|
args: [{ selector: 'psh-radio', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
2920
2818
|
'[class.radio-disabled]': 'disabled()',
|
|
@@ -2937,19 +2835,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
2937
2835
|
}], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
|
|
2938
2836
|
|
|
2939
2837
|
class PshSelectComponent {
|
|
2940
|
-
set valueInput(v) { this.value.set(v); }
|
|
2941
|
-
set disabledInput(v) { this.disabled.set(v); }
|
|
2942
2838
|
constructor() {
|
|
2943
2839
|
this.elementRef = inject(ElementRef);
|
|
2944
2840
|
this.cdr = inject(ChangeDetectorRef);
|
|
2945
2841
|
this.destroyRef = inject(DestroyRef);
|
|
2946
|
-
|
|
2947
|
-
this.
|
|
2948
|
-
|
|
2949
|
-
|
|
2950
|
-
//
|
|
2951
|
-
this.value = signal(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
|
|
2952
|
-
this.disabled = signal(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
2842
|
+
this.selectId = `psh-sel-${Math.random().toString(36).substring(2, 11)}`;
|
|
2843
|
+
this.value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
|
|
2844
|
+
this.disabled = model(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
2845
|
+
this.touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : []));
|
|
2846
|
+
// Rétablissement de l'API complète pour la démo
|
|
2953
2847
|
this.size = input('medium', ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
2954
2848
|
this.searchable = input(false, ...(ngDevMode ? [{ debugName: "searchable" }] : []));
|
|
2955
2849
|
this.multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple" }] : []));
|
|
@@ -2957,52 +2851,39 @@ class PshSelectComponent {
|
|
|
2957
2851
|
this.loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
|
|
2958
2852
|
this.fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : []));
|
|
2959
2853
|
this.required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : []));
|
|
2960
|
-
// Regular inputs
|
|
2961
2854
|
this.options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
|
|
2962
|
-
this.label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
|
|
2963
|
-
this.ariaLabel = input(null, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : [])); // Added dedicated ariaLabel property
|
|
2855
|
+
this.label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
|
|
2964
2856
|
this.placeholder = input('Sélectionner une option', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
|
|
2965
2857
|
this.multiplePlaceholder = input('Sélectionner des options', ...(ngDevMode ? [{ debugName: "multiplePlaceholder" }] : []));
|
|
2966
|
-
this.error = input(
|
|
2967
|
-
this.success = input('', ...(ngDevMode ? [{ debugName: "success" }] : []));
|
|
2968
|
-
this.hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : []));
|
|
2969
|
-
this.maxSelections = input(undefined, ...(ngDevMode ? [{ debugName: "maxSelections" }] : []));
|
|
2970
|
-
this.minSelections = input(undefined, ...(ngDevMode ? [{ debugName: "minSelections" }] : []));
|
|
2858
|
+
this.error = input(undefined, ...(ngDevMode ? [{ debugName: "error" }] : []));
|
|
2971
2859
|
this.compareWith = input((a, b) => a === b, ...(ngDevMode ? [{ debugName: "compareWith" }] : []));
|
|
2972
2860
|
this.searchConfig = input({
|
|
2973
2861
|
debounceTime: 300,
|
|
2974
2862
|
placeholder: 'Rechercher...',
|
|
2975
2863
|
minLength: 1
|
|
2976
2864
|
}, ...(ngDevMode ? [{ debugName: "searchConfig" }] : []));
|
|
2977
|
-
// State
|
|
2978
2865
|
this.isOpenSignal = signal(false, ...(ngDevMode ? [{ debugName: "isOpenSignal" }] : []));
|
|
2979
2866
|
this.searchTermSignal = signal('', ...(ngDevMode ? [{ debugName: "searchTermSignal" }] : []));
|
|
2980
|
-
this.selectedLabelSignal = signal('', ...(ngDevMode ? [{ debugName: "selectedLabelSignal" }] : []));
|
|
2981
|
-
this.focusedOptionIndex = signal(-1, ...(ngDevMode ? [{ debugName: "focusedOptionIndex" }] : []));
|
|
2982
|
-
this.hasLabelContentSignal = signal(false, ...(ngDevMode ? [{ debugName: "hasLabelContentSignal" }] : []));
|
|
2983
2867
|
this.initializedSignal = signal(false, ...(ngDevMode ? [{ debugName: "initializedSignal" }] : []));
|
|
2984
|
-
this.activeDescendantId = signal(null, ...(ngDevMode ? [{ debugName: "activeDescendantId" }] : []));
|
|
2985
|
-
// Outputs — valueChange/disabledChange use EventEmitter to decouple from signal writes.
|
|
2986
|
-
// output() auto-subscribes to model signals; EventEmitter does not.
|
|
2987
|
-
this.valueChange = new EventEmitter();
|
|
2988
|
-
this.disabledChange = new EventEmitter();
|
|
2989
2868
|
this.opened = output();
|
|
2990
2869
|
this.closed = output();
|
|
2870
|
+
this.searched = output(); // Émet une string, pas un Event
|
|
2991
2871
|
this.scrollEnd = output();
|
|
2992
|
-
this.searched = output();
|
|
2993
|
-
// Computed values
|
|
2994
2872
|
this.isOpen = computed(() => this.isOpenSignal(), ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
|
|
2995
2873
|
this.searchTerm = computed(() => this.searchTermSignal(), ...(ngDevMode ? [{ debugName: "searchTerm" }] : []));
|
|
2996
|
-
this.
|
|
2997
|
-
this.activeDescendant = computed(() => this.activeDescendantId(), ...(ngDevMode ? [{ debugName: "activeDescendant" }] : []));
|
|
2998
|
-
this.computedAriaLabel = computed(() => {
|
|
2999
|
-
return this.ariaLabel() || this.label() || this.placeholder();
|
|
3000
|
-
}, ...(ngDevMode ? [{ debugName: "computedAriaLabel" }] : []));
|
|
2874
|
+
this.state = computed(() => this.disabled() ? 'disabled' : this.error() ? 'error' : 'default', ...(ngDevMode ? [{ debugName: "state" }] : []));
|
|
3001
2875
|
this.selectedLabel = computed(() => {
|
|
3002
|
-
|
|
2876
|
+
const currentValue = this.value();
|
|
2877
|
+
const currentOptions = this.flattenOptions(this.options());
|
|
2878
|
+
if (!this.initializedSignal() || (currentValue === null || currentValue === undefined)) {
|
|
3003
2879
|
return this.multiple() ? this.multiplePlaceholder() : this.placeholder();
|
|
3004
2880
|
}
|
|
3005
|
-
|
|
2881
|
+
if (this.multiple() && Array.isArray(currentValue)) {
|
|
2882
|
+
const selected = currentOptions.filter(opt => currentValue.some(v => this.compareWith()(v, opt.value)));
|
|
2883
|
+
return selected.length > 0 ? selected.map(o => o.label).join(', ') : this.multiplePlaceholder();
|
|
2884
|
+
}
|
|
2885
|
+
const selected = currentOptions.find(opt => this.compareWith()(opt.value, currentValue));
|
|
2886
|
+
return selected ? selected.label : this.placeholder();
|
|
3006
2887
|
}, ...(ngDevMode ? [{ debugName: "selectedLabel" }] : []));
|
|
3007
2888
|
this.filteredOptions = computed(() => {
|
|
3008
2889
|
const term = this.searchTermSignal().toLowerCase();
|
|
@@ -3011,356 +2892,117 @@ class PshSelectComponent {
|
|
|
3011
2892
|
return opts;
|
|
3012
2893
|
return opts.map(opt => {
|
|
3013
2894
|
if (this.isOptionGroup(opt)) {
|
|
3014
|
-
const
|
|
3015
|
-
|
|
3016
|
-
return filteredOptions.length > 0 ? { ...opt, options: filteredOptions } : null;
|
|
2895
|
+
const filtered = opt.options.filter(o => o.label.toLowerCase().includes(term));
|
|
2896
|
+
return filtered.length > 0 ? { ...opt, options: filtered } : null;
|
|
3017
2897
|
}
|
|
3018
|
-
return opt.label.toLowerCase().includes(term)
|
|
3019
|
-
opt.description?.toLowerCase().includes(term)
|
|
3020
|
-
? opt
|
|
3021
|
-
: null;
|
|
2898
|
+
return opt.label.toLowerCase().includes(term) ? opt : null;
|
|
3022
2899
|
}).filter((opt) => opt !== null);
|
|
3023
2900
|
}, ...(ngDevMode ? [{ debugName: "filteredOptions" }] : []));
|
|
3024
|
-
// ControlValueAccessor implementation
|
|
3025
2901
|
this.onChange = (_) => { };
|
|
3026
2902
|
this.onTouched = () => { };
|
|
3027
2903
|
const clickHandler = (event) => {
|
|
3028
|
-
if (this.isOpen()) {
|
|
3029
|
-
|
|
3030
|
-
if (!this.elementRef.nativeElement.contains(target)) {
|
|
3031
|
-
this.close();
|
|
3032
|
-
}
|
|
2904
|
+
if (this.isOpen() && !this.elementRef.nativeElement.contains(event.target)) {
|
|
2905
|
+
this.close();
|
|
3033
2906
|
}
|
|
3034
2907
|
};
|
|
3035
2908
|
document.addEventListener('click', clickHandler);
|
|
3036
|
-
this.destroyRef.onDestroy(() =>
|
|
3037
|
-
document.removeEventListener('click', clickHandler);
|
|
3038
|
-
});
|
|
2909
|
+
this.destroyRef.onDestroy(() => document.removeEventListener('click', clickHandler));
|
|
3039
2910
|
}
|
|
3040
2911
|
ngAfterContentInit() {
|
|
3041
|
-
|
|
3042
|
-
const hasLabel = !!this.elementRef.nativeElement.querySelector('[select-label]');
|
|
3043
|
-
this.hasLabelContentSignal.set(hasLabel);
|
|
3044
|
-
this.initializedSignal.set(true);
|
|
3045
|
-
this.cdr.markForCheck();
|
|
3046
|
-
});
|
|
3047
|
-
}
|
|
3048
|
-
// Keyboard navigation
|
|
3049
|
-
handleKeyDown(event) {
|
|
3050
|
-
if (this.disabled() || this.loading())
|
|
3051
|
-
return;
|
|
3052
|
-
switch (event.key) {
|
|
3053
|
-
case 'Enter':
|
|
3054
|
-
case ' ':
|
|
3055
|
-
event.preventDefault();
|
|
3056
|
-
if (!this.isOpen()) {
|
|
3057
|
-
this.toggle();
|
|
3058
|
-
}
|
|
3059
|
-
else if (this.focusedOptionIndex() >= 0) {
|
|
3060
|
-
const options = this.flattenOptions(this.filteredOptions());
|
|
3061
|
-
const option = options[this.focusedOptionIndex()];
|
|
3062
|
-
if (option)
|
|
3063
|
-
this.select(option);
|
|
3064
|
-
}
|
|
3065
|
-
break;
|
|
3066
|
-
case 'ArrowDown':
|
|
3067
|
-
event.preventDefault();
|
|
3068
|
-
if (!this.isOpen()) {
|
|
3069
|
-
this.toggle();
|
|
3070
|
-
}
|
|
3071
|
-
else {
|
|
3072
|
-
this.focusNextOption();
|
|
3073
|
-
}
|
|
3074
|
-
break;
|
|
3075
|
-
case 'ArrowUp':
|
|
3076
|
-
event.preventDefault();
|
|
3077
|
-
if (this.isOpen()) {
|
|
3078
|
-
this.focusPreviousOption();
|
|
3079
|
-
}
|
|
3080
|
-
break;
|
|
3081
|
-
case 'Escape':
|
|
3082
|
-
if (this.isOpen()) {
|
|
3083
|
-
event.preventDefault();
|
|
3084
|
-
this.close();
|
|
3085
|
-
}
|
|
3086
|
-
break;
|
|
3087
|
-
case 'Tab':
|
|
3088
|
-
if (this.isOpen()) {
|
|
3089
|
-
this.close();
|
|
3090
|
-
}
|
|
3091
|
-
break;
|
|
3092
|
-
case 'Home':
|
|
3093
|
-
if (this.isOpen()) {
|
|
3094
|
-
event.preventDefault();
|
|
3095
|
-
this.focusFirstOption();
|
|
3096
|
-
}
|
|
3097
|
-
break;
|
|
3098
|
-
case 'End':
|
|
3099
|
-
if (this.isOpen()) {
|
|
3100
|
-
event.preventDefault();
|
|
3101
|
-
this.focusLastOption();
|
|
3102
|
-
}
|
|
3103
|
-
break;
|
|
3104
|
-
}
|
|
3105
|
-
}
|
|
3106
|
-
handleOptionKeyDown(event, option) {
|
|
3107
|
-
switch (event.key) {
|
|
3108
|
-
case 'Enter':
|
|
3109
|
-
case ' ':
|
|
3110
|
-
event.preventDefault();
|
|
3111
|
-
this.select(option);
|
|
3112
|
-
break;
|
|
3113
|
-
case 'Escape':
|
|
3114
|
-
event.preventDefault();
|
|
3115
|
-
this.close();
|
|
3116
|
-
break;
|
|
3117
|
-
}
|
|
3118
|
-
}
|
|
3119
|
-
focusNextOption() {
|
|
3120
|
-
const options = this.flattenOptions(this.filteredOptions());
|
|
3121
|
-
if (options.length === 0)
|
|
3122
|
-
return;
|
|
3123
|
-
const currentIndex = this.focusedOptionIndex();
|
|
3124
|
-
const nextIndex = currentIndex < options.length - 1 ? currentIndex + 1 : 0;
|
|
3125
|
-
this.focusedOptionIndex.set(nextIndex);
|
|
3126
|
-
const nextOption = options[nextIndex];
|
|
3127
|
-
if (nextOption) {
|
|
3128
|
-
this.updateActiveDescendant(nextOption);
|
|
3129
|
-
}
|
|
3130
|
-
this.scrollOptionIntoView();
|
|
3131
|
-
}
|
|
3132
|
-
focusPreviousOption() {
|
|
3133
|
-
const options = this.flattenOptions(this.filteredOptions());
|
|
3134
|
-
if (options.length === 0)
|
|
3135
|
-
return;
|
|
3136
|
-
const currentIndex = this.focusedOptionIndex();
|
|
3137
|
-
const previousIndex = currentIndex > 0 ? currentIndex - 1 : options.length - 1;
|
|
3138
|
-
this.focusedOptionIndex.set(previousIndex);
|
|
3139
|
-
const prevOption = options[previousIndex];
|
|
3140
|
-
if (prevOption) {
|
|
3141
|
-
this.updateActiveDescendant(prevOption);
|
|
3142
|
-
}
|
|
3143
|
-
this.scrollOptionIntoView();
|
|
3144
|
-
}
|
|
3145
|
-
focusFirstOption() {
|
|
3146
|
-
const options = this.flattenOptions(this.filteredOptions());
|
|
3147
|
-
if (options.length === 0)
|
|
3148
|
-
return;
|
|
3149
|
-
this.focusedOptionIndex.set(0);
|
|
3150
|
-
const firstOption = options[0];
|
|
3151
|
-
if (firstOption) {
|
|
3152
|
-
this.updateActiveDescendant(firstOption);
|
|
3153
|
-
}
|
|
3154
|
-
this.scrollOptionIntoView();
|
|
3155
|
-
}
|
|
3156
|
-
focusLastOption() {
|
|
3157
|
-
const options = this.flattenOptions(this.filteredOptions());
|
|
3158
|
-
if (options.length === 0)
|
|
3159
|
-
return;
|
|
3160
|
-
const lastIndex = options.length - 1;
|
|
3161
|
-
this.focusedOptionIndex.set(lastIndex);
|
|
3162
|
-
const lastOption = options[lastIndex];
|
|
3163
|
-
if (lastOption) {
|
|
3164
|
-
this.updateActiveDescendant(lastOption);
|
|
3165
|
-
}
|
|
3166
|
-
this.scrollOptionIntoView();
|
|
3167
|
-
}
|
|
3168
|
-
scrollOptionIntoView() {
|
|
3169
|
-
requestAnimationFrame(() => {
|
|
3170
|
-
const activeId = this.activeDescendantId();
|
|
3171
|
-
if (activeId) {
|
|
3172
|
-
const option = this.elementRef.nativeElement.querySelector(`#${activeId}`);
|
|
3173
|
-
if (option) {
|
|
3174
|
-
option.scrollIntoView({ block: 'nearest' });
|
|
3175
|
-
}
|
|
3176
|
-
}
|
|
3177
|
-
});
|
|
3178
|
-
}
|
|
3179
|
-
updateActiveDescendant(option) {
|
|
3180
|
-
const optionId = `${this.selectId}-option-${String(option.value)}`;
|
|
3181
|
-
this.activeDescendantId.set(optionId);
|
|
3182
|
-
this.cdr.markForCheck();
|
|
3183
|
-
}
|
|
3184
|
-
isFocused(option) {
|
|
3185
|
-
const activeId = this.activeDescendantId();
|
|
3186
|
-
if (!activeId)
|
|
3187
|
-
return false;
|
|
3188
|
-
const optionId = `${this.selectId}-option-${String(option.value)}`;
|
|
3189
|
-
return activeId === optionId;
|
|
2912
|
+
this.initializedSignal.set(true);
|
|
3190
2913
|
}
|
|
3191
2914
|
writeValue(value) {
|
|
3192
|
-
this.initializedSignal.set(true);
|
|
3193
2915
|
this.value.set(value);
|
|
3194
|
-
this.
|
|
2916
|
+
this.initializedSignal.set(true);
|
|
3195
2917
|
this.cdr.markForCheck();
|
|
3196
2918
|
}
|
|
3197
|
-
registerOnChange(fn) {
|
|
3198
|
-
|
|
3199
|
-
}
|
|
3200
|
-
|
|
3201
|
-
this.
|
|
3202
|
-
|
|
3203
|
-
|
|
3204
|
-
this.
|
|
3205
|
-
}
|
|
3206
|
-
// Helper method to check if an option is a group
|
|
3207
|
-
isOptionGroup(option) {
|
|
3208
|
-
return 'options' in option;
|
|
3209
|
-
}
|
|
3210
|
-
// Get unique key for tracking
|
|
3211
|
-
getOptionKey(option) {
|
|
3212
|
-
return this.isOptionGroup(option) ? `group-${option.label}` : `option-${String(option.value)}`;
|
|
3213
|
-
}
|
|
3214
|
-
// Check if there is a selected value
|
|
3215
|
-
hasValue() {
|
|
3216
|
-
const currentValue = this.value();
|
|
3217
|
-
if (this.multiple()) {
|
|
3218
|
-
return Array.isArray(currentValue) && currentValue.length > 0;
|
|
3219
|
-
}
|
|
3220
|
-
return currentValue !== null && currentValue !== undefined;
|
|
2919
|
+
registerOnChange(fn) { this.onChange = fn; }
|
|
2920
|
+
registerOnTouched(fn) { this.onTouched = fn; }
|
|
2921
|
+
setDisabledState(isDisabled) { this.disabled.set(isDisabled); }
|
|
2922
|
+
toggle() {
|
|
2923
|
+
if (this.disabled() || this.loading())
|
|
2924
|
+
return;
|
|
2925
|
+
this.isOpenSignal.update(v => !v);
|
|
2926
|
+
this.isOpen() ? this.opened.emit() : this.closed.emit();
|
|
3221
2927
|
}
|
|
3222
|
-
|
|
3223
|
-
|
|
3224
|
-
|
|
3225
|
-
if (trigger) {
|
|
3226
|
-
trigger.focus();
|
|
3227
|
-
}
|
|
2928
|
+
close() {
|
|
2929
|
+
this.isOpenSignal.set(false);
|
|
2930
|
+
this.searchTermSignal.set('');
|
|
3228
2931
|
}
|
|
3229
|
-
// Selection methods
|
|
3230
2932
|
select(option) {
|
|
3231
|
-
if (
|
|
3232
|
-
|
|
3233
|
-
|
|
3234
|
-
|
|
3235
|
-
|
|
3236
|
-
|
|
3237
|
-
|
|
3238
|
-
if (index === -1) {
|
|
3239
|
-
const maxSelections = this.maxSelections();
|
|
3240
|
-
if (!maxSelections || values.length < maxSelections) {
|
|
3241
|
-
values.push(option.value);
|
|
3242
|
-
changed = true;
|
|
3243
|
-
}
|
|
3244
|
-
}
|
|
3245
|
-
else {
|
|
3246
|
-
const minSelections = this.minSelections();
|
|
3247
|
-
if (!minSelections || values.length > minSelections) {
|
|
3248
|
-
values.splice(index, 1);
|
|
3249
|
-
changed = true;
|
|
3250
|
-
}
|
|
3251
|
-
}
|
|
3252
|
-
if (changed) {
|
|
3253
|
-
this.value.set(values);
|
|
3254
|
-
this.onChange(values);
|
|
3255
|
-
this.valueChange.emit(values);
|
|
3256
|
-
this.updateSelectedLabel();
|
|
3257
|
-
}
|
|
3258
|
-
}
|
|
3259
|
-
else {
|
|
3260
|
-
this.value.set(option.value);
|
|
3261
|
-
this.onChange(option.value);
|
|
3262
|
-
this.valueChange.emit(option.value);
|
|
3263
|
-
this.updateSelectedLabel();
|
|
3264
|
-
this.close();
|
|
3265
|
-
}
|
|
3266
|
-
this.onTouched();
|
|
3267
|
-
}
|
|
3268
|
-
}
|
|
3269
|
-
isSelected(option) {
|
|
3270
|
-
const currentValue = this.value();
|
|
3271
|
-
if (this.multiple() && Array.isArray(currentValue)) {
|
|
3272
|
-
return currentValue.some(v => this.compareWith()(v, option.value));
|
|
3273
|
-
}
|
|
3274
|
-
return currentValue !== null && this.compareWith()(currentValue, option.value);
|
|
3275
|
-
}
|
|
3276
|
-
toggle() {
|
|
3277
|
-
if (!this.disabled() && !this.loading()) {
|
|
3278
|
-
const newValue = !this.isOpenSignal();
|
|
3279
|
-
this.isOpenSignal.set(newValue);
|
|
3280
|
-
if (newValue) {
|
|
3281
|
-
this.opened.emit();
|
|
2933
|
+
if (this.disabled() || option.disabled)
|
|
2934
|
+
return;
|
|
2935
|
+
if (this.multiple()) {
|
|
2936
|
+
const current = Array.isArray(this.value()) ? [...this.value()] : [];
|
|
2937
|
+
const index = current.findIndex(v => this.compareWith()(v, option.value));
|
|
2938
|
+
if (index === -1) {
|
|
2939
|
+
current.push(option.value);
|
|
3282
2940
|
}
|
|
3283
2941
|
else {
|
|
3284
|
-
|
|
3285
|
-
this.closed.emit();
|
|
2942
|
+
current.splice(index, 1);
|
|
3286
2943
|
}
|
|
2944
|
+
this.value.set(current);
|
|
2945
|
+
this.onChange(current);
|
|
3287
2946
|
}
|
|
3288
|
-
|
|
3289
|
-
|
|
3290
|
-
|
|
3291
|
-
this.
|
|
3292
|
-
this.focusedOptionIndex.set(-1);
|
|
3293
|
-
this.activeDescendantId.set(null);
|
|
3294
|
-
this.searchTermSignal.set('');
|
|
3295
|
-
this.closed.emit();
|
|
2947
|
+
else {
|
|
2948
|
+
this.value.set(option.value);
|
|
2949
|
+
this.onChange(option.value);
|
|
2950
|
+
this.close();
|
|
3296
2951
|
}
|
|
2952
|
+
this.onTouched();
|
|
2953
|
+
this.touched.set(true);
|
|
3297
2954
|
}
|
|
3298
2955
|
clear(event) {
|
|
3299
2956
|
event.stopPropagation();
|
|
3300
|
-
|
|
3301
|
-
|
|
3302
|
-
this.value.set(newValue);
|
|
3303
|
-
this.onChange(newValue);
|
|
3304
|
-
this.valueChange.emit(newValue);
|
|
3305
|
-
this.updateSelectedLabel();
|
|
3306
|
-
this.onTouched();
|
|
3307
|
-
}
|
|
2957
|
+
this.value.set(this.multiple() ? [] : null);
|
|
2958
|
+
this.onChange(this.value());
|
|
3308
2959
|
}
|
|
3309
2960
|
onSearch(event) {
|
|
3310
2961
|
const term = event.target.value;
|
|
3311
2962
|
this.searchTermSignal.set(term);
|
|
3312
|
-
|
|
3313
|
-
this.searched.emit(term);
|
|
3314
|
-
}
|
|
2963
|
+
this.searched.emit(term);
|
|
3315
2964
|
}
|
|
3316
2965
|
onScroll(event) {
|
|
3317
|
-
const
|
|
3318
|
-
if (
|
|
2966
|
+
const el = event.target;
|
|
2967
|
+
if (el.scrollHeight - el.scrollTop === el.clientHeight) {
|
|
3319
2968
|
this.scrollEnd.emit();
|
|
3320
2969
|
}
|
|
3321
2970
|
}
|
|
3322
|
-
|
|
3323
|
-
|
|
3324
|
-
|
|
3325
|
-
|
|
3326
|
-
|
|
3327
|
-
|
|
3328
|
-
|
|
3329
|
-
|
|
3330
|
-
|
|
3331
|
-
|
|
3332
|
-
this.selectedLabelSignal.set('');
|
|
3333
|
-
}
|
|
3334
|
-
}
|
|
3335
|
-
else {
|
|
3336
|
-
const selected = currentOptions.find(opt => currentValue !== null && this.compareWith()(opt.value, currentValue));
|
|
3337
|
-
if (selected) {
|
|
3338
|
-
this.selectedLabelSignal.set(selected.label);
|
|
3339
|
-
}
|
|
3340
|
-
else {
|
|
3341
|
-
this.selectedLabelSignal.set('');
|
|
3342
|
-
}
|
|
2971
|
+
isOptionGroup(item) {
|
|
2972
|
+
return 'options' in item;
|
|
2973
|
+
}
|
|
2974
|
+
getOptionKey(item) {
|
|
2975
|
+
return this.isOptionGroup(item) ? `g-${item.label}` : `o-${item.label}`;
|
|
2976
|
+
}
|
|
2977
|
+
isSelected(option) {
|
|
2978
|
+
const val = this.value();
|
|
2979
|
+
if (this.multiple() && Array.isArray(val)) {
|
|
2980
|
+
return val.some(v => this.compareWith()(v, option.value));
|
|
3343
2981
|
}
|
|
3344
|
-
this.
|
|
2982
|
+
return val !== null && this.compareWith()(val, option.value);
|
|
2983
|
+
}
|
|
2984
|
+
hasValue() {
|
|
2985
|
+
const val = this.value();
|
|
2986
|
+
if (this.multiple())
|
|
2987
|
+
return Array.isArray(val) && val.length > 0;
|
|
2988
|
+
return val !== null && val !== undefined;
|
|
3345
2989
|
}
|
|
3346
2990
|
flattenOptions(options) {
|
|
3347
|
-
return options.reduce((acc, opt) =>
|
|
3348
|
-
|
|
3349
|
-
|
|
3350
|
-
|
|
3351
|
-
return [...acc, opt];
|
|
3352
|
-
}, []);
|
|
2991
|
+
return options.reduce((acc, opt) => this.isOptionGroup(opt) ? [...acc, ...opt.options] : [...acc, opt], []);
|
|
2992
|
+
}
|
|
2993
|
+
focusSelect() {
|
|
2994
|
+
this.elementRef.nativeElement.querySelector('.select-trigger')?.focus();
|
|
3353
2995
|
}
|
|
3354
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3355
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
2996
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PshSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2997
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", 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 }, 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.select-full-width": "fullWidth()", "class.select-small": "size() === \"small\"", "class.select-large": "size() === \"large\"", "class.select-error": "!!error()", "class.select-disabled": "disabled()", "class.select-loading": "loading()", "attr.aria-expanded": "isOpen().toString()", "attr.data-state": "state()" } }, providers: [
|
|
3356
2998
|
{
|
|
3357
2999
|
provide: NG_VALUE_ACCESSOR,
|
|
3358
3000
|
useExisting: PshSelectComponent,
|
|
3359
3001
|
multi: true
|
|
3360
3002
|
}
|
|
3361
|
-
], ngImport: i0, template: "<div class=\"select-container\">\n <!-- Label slot -->\n @if (label() || hasLabelContent()) {\n <label class=\"select-label\" [for]=\"selectId\" (click)=\"focusSelect()\" [class.required]=\"!!required()\">\n <ng-content select=\"[select-label]\" />\n @if (!hasLabelContent()) {\n {{ label() }}\n }\n </label>\n }\n\n <div class=\"select-trigger-wrapper\">\n <div\n class=\"select-trigger\"\n [id]=\"selectId\"\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n [attr.aria-controls]=\"selectId + '-listbox'\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-disabled]=\"disabled()\"\n [attr.aria-busy]=\"loading() ? 'true' : null\"\n [attr.aria-required]=\"required() ? 'true' : 'false'\"\n [attr.aria-invalid]=\"!!error()\"\n [attr.aria-label]=\"computedAriaLabel()\"\n [attr.aria-describedby]=\"error() ? 'error-message' : success() ? 'success-message' : hint() ? 'hint-message' : null\"\n [attr.aria-activedescendant]=\"activeDescendant()\"\n [attr.tabindex]=\"disabled() || loading() ? -1 : 0\"\n (click)=\"toggle()\"\n (keydown)=\"handleKeyDown($event)\"\n >\n <div class=\"select-value\">\n <span [class.placeholder]=\"!hasValue()\">{{ selectedLabel() }}</span>\n </div>\n\n <div class=\"select-actions\">\n @if (clearable() && hasValue() && !loading()) {\n <button\n type=\"button\"\n class=\"select-clear\"\n (click)=\"clear($event)\"\n [attr.aria-label]=\"'Effacer la s\u00E9lection'\"\n [tabindex]=\"disabled() ? -1 : 0\"\n >\n <i class=\"ph ph-x\" aria-hidden=\"true\"></i>\n </button>\n }\n @if (loading()) {\n <div class=\"select-loader-trigger\" aria-hidden=\"true\"></div>\n } @else {\n <i\n class=\"ph ph-caret-down select-arrow\"\n [class.open]=\"isOpen()\"\n aria-hidden=\"true\"\n ></i>\n }\n </div>\n </div>\n\n @if (isOpen()) {\n <div\n class=\"select-dropdown\"\n role=\"listbox\"\n [id]=\"selectId + '-listbox'\"\n [attr.aria-multiselectable]=\"multiple()\"\n >\n @if (searchable()) {\n <div class=\"select-search\">\n <input\n type=\"text\"\n [placeholder]=\"searchConfig().placeholder\"\n [value]=\"searchTerm()\"\n (input)=\"onSearch($event)\"\n (click)=\"$event.stopPropagation()\"\n [attr.aria-label]=\"searchConfig().placeholder\"\n />\n </div>\n }\n\n <div class=\"select-options\" (scroll)=\"onScroll($event)\">\n @if (loading()) {\n <div class=\"select-loading\">\n <div class=\"select-loader\"></div>\n </div>\n } @else if (filteredOptions().length === 0) {\n <div class=\"select-no-results\">\n Aucun r\u00E9sultat\n </div>\n } @else {\n @for (option of filteredOptions(); track getOptionKey(option)) {\n @if (isOptionGroup(option)) {\n <div class=\"select-group\">\n <div class=\"select-group-label\">{{ option.label }}</div>\n @for (groupOption of option.options; track getOptionKey(groupOption)) {\n <div\n class=\"select-option\"\n role=\"option\"\n [class.selected]=\"isSelected(groupOption)\"\n [class.focused]=\"isFocused(groupOption)\"\n [class.disabled]=\"option.disabled || groupOption.disabled\"\n [attr.aria-selected]=\"isSelected(groupOption)\"\n [attr.aria-disabled]=\"(option.disabled || groupOption.disabled) || null\"\n [attr.id]=\"selectId + '-option-' + groupOption.value\"\n [attr.tabindex]=\"option.disabled || groupOption.disabled ? -1 : 0\"\n (click)=\"!option.disabled && select(groupOption)\"\n (keydown)=\"handleOptionKeyDown($event, groupOption)\"\n >\n @if (multiple()) {\n <div class=\"select-checkbox\">\n <i class=\"ph ph-check\" aria-hidden=\"true\"></i>\n </div>\n }\n @if (groupOption.icon) {\n <i class=\"ph ph-{{ groupOption.icon }}\" aria-hidden=\"true\"></i>\n }\n <div class=\"option-content\">\n <div class=\"option-label\">{{ groupOption.label }}</div>\n @if (groupOption.description) {\n <div class=\"option-description\">{{ groupOption.description }}</div>\n }\n </div>\n </div>\n }\n </div>\n } @else {\n <div\n class=\"select-option\"\n role=\"option\"\n [class.selected]=\"isSelected(option)\"\n [class.focused]=\"isFocused(option)\"\n [class.disabled]=\"option.disabled\"\n [attr.aria-selected]=\"isSelected(option)\"\n [attr.aria-disabled]=\"option.disabled || null\"\n [attr.id]=\"selectId + '-option-' + option.value\"\n [attr.tabindex]=\"option.disabled ? -1 : 0\"\n (click)=\"select(option)\"\n (keydown)=\"handleOptionKeyDown($event, option)\"\n >\n @if (multiple()) {\n <div class=\"select-checkbox\">\n <i class=\"ph ph-check\" aria-hidden=\"true\"></i>\n </div>\n }\n @if (option.icon) {\n <i class=\"ph ph-{{ option.icon }}\" aria-hidden=\"true\"></i>\n }\n <div class=\"option-content\">\n <div class=\"option-label\">{{ option.label }}</div>\n @if (option.description) {\n <div class=\"option-description\">{{ option.description }}</div>\n }\n </div>\n </div>\n }\n }\n }\n </div>\n </div>\n }\n </div>\n\n <!-- Error message slot -->\n @if (error()) {\n <div id=\"error-message\" class=\"select-error\" role=\"alert\">\n <ng-content select=\"[select-error]\">\n {{ error() }}\n </ng-content>\n </div>\n }\n\n <!-- Success message slot -->\n @if (success()) {\n <div id=\"success-message\" class=\"select-success\" role=\"status\">\n <ng-content select=\"[select-success]\">\n {{ success() }}\n </ng-content>\n </div>\n }\n\n <!-- Hint message slot -->\n @if (hint()) {\n <div id=\"hint-message\" class=\"select-hint\">\n <ng-content select=\"[select-hint]\">\n {{ hint() }}\n </ng-content>\n </div>\n }\n</div>", styles: [":host{display:block;width:100%;max-width:var(--select-max-width)}:host(.full-width){max-width:none}.select-container{width:100%}.select-trigger-wrapper{position:relative;width:100%}.select-label{display:block;color:var(--text-color);font-size:var(--font-size-sm);font-weight:500;margin-bottom:var(--spacing-xs);width:100%;cursor:pointer}.select-label.required:after{content:\"*\";color:var(--danger-color);margin-left:var(--spacing-xxs)}.select-trigger{display:flex;align-items:center;width:100%;min-width:12rem;height:var(--height-input-md);padding:0 var(--spacing-md);background:var(--surface-card);border:var(--border-width-1) solid var(--surface-border);border-radius:var(--border-radius);cursor:pointer;transition:all var(--animation-duration-normal) var(--animation-easing-default);outline:none}.select-trigger:hover{border-color:var(--primary-color)}:host(.disabled) .select-trigger:hover,:host(.loading) .select-trigger:hover{border-color:var(--surface-border)}.select-trigger:focus-visible{border-color:var(--primary-color);box-shadow:0 0 0 .125rem rgba(var(--primary-color-rgb),.2)}.select-value{display:flex;align-items:center;gap:var(--spacing-xs);flex:1;min-width:0;margin-right:var(--spacing-sm)}.select-value span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text-color)}.select-value span.placeholder{color:var(--text-color-secondary)}.select-actions{display:flex;align-items:center;gap:var(--spacing-sm);flex-shrink:0}.select-arrow{transition:transform var(--animation-duration-normal) var(--animation-easing-default);font-size:var(--icon-size-sm);color:var(--text-color-secondary);flex-shrink:0}.select-arrow.open{transform:rotate(180deg)}.select-clear{display:flex;align-items:center;justify-content:center;width:var(--size-5);height:var(--size-5);padding:0;background:transparent;border:none;border-radius:50%;color:var(--text-color-secondary);cursor:pointer;transition:all var(--animation-duration-normal) var(--animation-easing-default);flex-shrink:0}.select-clear:hover{background:rgba(var(--danger-color-rgb),.1);color:var(--danger-color)}.select-dropdown{position:absolute;top:calc(100% + var(--spacing-xs));left:0;width:100%;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:1000;animation:fadeIn var(--animation-duration-normal) var(--animation-easing-default)}.select-search{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm);border-bottom:var(--border-width-1) solid var(--surface-border)}.select-search input{width:100%;padding:var(--spacing-xs) var(--spacing-sm);border:var(--border-width-1) solid var(--surface-border);border-radius:var(--border-radius);background:var(--surface-ground)}.select-search input:focus{outline:none;border-color:var(--primary-color)}.select-options{max-height:var(--dropdown-max-height);overflow-y:auto}.select-group{padding:var(--spacing-xs) 0}.select-group-label{padding:var(--spacing-xs) var(--spacing-md);color:var(--text-color-secondary);font-weight:500;font-size:var(--font-size-sm)}.select-option{display:flex;align-items:center;gap:var(--spacing-md);padding:var(--spacing-sm) var(--spacing-md);cursor:pointer;transition:all var(--animation-duration-normal) var(--animation-easing-default)}.select-option:hover:not(.disabled){background:var(--surface-hover)}.select-option.focused:not(.disabled){background:var(--surface-hover);outline:2px solid var(--primary-color);outline-offset:-2px}.select-option.selected{background:rgba(var(--primary-color-rgb),.1);color:var(--primary-color)}.select-option.selected.focused{background:rgba(var(--primary-color-rgb),.15);outline:2px solid var(--primary-color);outline-offset:-2px}.select-option.disabled{opacity:.6;cursor:not-allowed}.select-option i{font-size:var(--icon-size-md);color:var(--text-color-secondary);flex-shrink:0}.select-option.selected i{color:var(--primary-color)}.option-content{flex:1;min-width:0}.option-label{color:inherit;font-size:var(--font-size-base)}.option-description{color:var(--text-color-secondary);font-size:var(--font-size-sm);margin-top:var(--spacing-xs)}.select-checkbox{display:flex;align-items:center;justify-content:center;width:var(--select-checkbox-size);height:var(--select-checkbox-size);border:var(--border-width-2) solid var(--surface-border);border-radius:var(--border-radius);transition:all var(--animation-duration-normal) var(--animation-easing-default)}.selected .select-checkbox{background:var(--primary-gradient);border-color:var(--primary-color);color:var(--primary-color-text)}.select-no-results{padding:var(--spacing-md);text-align:center;color:var(--text-color-secondary)}.select-loading{padding:var(--spacing-md);text-align:center}.select-loader{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 var(--animation-duration-slow) linear infinite;margin:0 auto}.select-loader-trigger{width:var(--icon-size-sm);height:var(--icon-size-sm);border:var(--border-width-2) solid var(--surface-border);border-top-color:var(--primary-color);border-radius:50%;animation:spin var(--animation-duration-slow) linear infinite;flex-shrink:0}.select-error{margin-top:var(--spacing-xs);color:var(--danger-color);font-size:var(--font-size-sm)}.select-success{margin-top:var(--spacing-xs);color:var(--success-color);font-size:var(--font-size-sm)}.select-hint{font-size:var(--font-size-sm);color:var(--text-color-secondary);margin-top:var(--spacing-xs)}.virtual-scroll{position:relative;overflow:hidden}:host(.disabled) .select-trigger{background:var(--surface-ground);cursor:not-allowed;opacity:.6}:host(.loading) .select-trigger{cursor:wait;opacity:.7}:host(.error) .select-trigger{border-color:var(--danger-color)}:host(.success) .select-trigger{border-color:var(--success-color)}:host(.small) .select-trigger{height:var(--height-input-sm);font-size:var(--font-size-sm);padding:0 var(--spacing-sm)}:host(.small) .select-arrow{font-size:var(--icon-size-xs)}:host(.small) .select-value{margin-right:var(--spacing-xs)}:host(.small) .select-actions{gap:var(--spacing-xs)}:host(.small) .select-dropdown{font-size:var(--font-size-sm)}:host(.small) .select-search{padding:var(--spacing-xs)}:host(.small) .select-search input{padding:var(--spacing-xxs) var(--spacing-xs);font-size:var(--font-size-sm)}:host(.small) .select-option{padding:var(--spacing-xs) var(--spacing-sm);gap:var(--spacing-sm)}:host(.small) .select-option i{font-size:var(--icon-size-sm)}:host(.small) .option-label{font-size:var(--font-size-sm)}:host(.small) .option-description{font-size:var(--font-size-xs);margin-top:var(--spacing-xxs)}:host(.small) .select-group-label{padding:var(--spacing-xxs) var(--spacing-sm);font-size:var(--font-size-xs)}:host(.small) .select-checkbox{width:calc(var(--select-checkbox-size) * .85);height:calc(var(--select-checkbox-size) * .85)}:host(.large) .select-trigger{height:var(--height-input-lg);font-size:var(--font-size-lg);padding:0 var(--spacing-lg)}:host(.large) .select-arrow{font-size:var(--icon-size-md)}:host(.large) .select-value{margin-right:var(--spacing-md)}:host(.large) .select-actions{gap:var(--spacing-md)}:host(.large) .select-dropdown{font-size:var(--font-size-lg)}:host(.large) .select-search{padding:var(--spacing-md)}:host(.large) .select-search input{padding:var(--spacing-sm) var(--spacing-md);font-size:var(--font-size-lg)}:host(.large) .select-option{padding:var(--spacing-md) var(--spacing-lg);gap:var(--spacing-lg)}:host(.large) .select-option i{font-size:var(--icon-size-lg)}:host(.large) .option-label{font-size:var(--font-size-lg)}:host(.large) .option-description{font-size:var(--font-size-base);margin-top:var(--spacing-xs)}:host(.large) .select-group-label{padding:var(--spacing-sm) var(--spacing-lg);font-size:var(--font-size-base)}:host(.large) .select-checkbox{width:calc(var(--select-checkbox-size) * 1.15);height:calc(var(--select-checkbox-size) * 1.15)}@media (max-width: 36em){:host{max-width:none}}@keyframes fadeIn{0%{opacity:0;transform:translateY(calc(-1 * var(--spacing-sm)))}to{opacity:1;transform:translateY(0)}}@keyframes spin{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3003
|
+
], ngImport: i0, template: "<div class=\"select-container\">\n @if (label()) {\n <label class=\"select-label\" [attr.for]=\"selectId\" (click)=\"focusSelect()\">\n {{ label() }}\n @if (required()) { <span class=\"required-mark\">*</span> }\n </label>\n }\n\n <div class=\"select-trigger\" [id]=\"selectId\" (click)=\"toggle()\" tabindex=\"0\">\n <div class=\"select-value\">\n <span [class.placeholder]=\"!hasValue()\">\n {{ selectedLabel() }}\n </span>\n </div>\n \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\" (scroll)=\"onScroll($event)\">\n @for (item of filteredOptions(); track getOptionKey(item)) {\n @if (isOptionGroup(item)) {\n <div class=\"select-group\">\n <div class=\"select-group-label\">{{ item.label }}</div>\n @for (opt of item.options; track opt.label) {\n <div class=\"select-option\" \n [class.selected]=\"isSelected(opt)\"\n (click)=\"select(opt)\">\n {{ opt.label }}\n </div>\n }\n </div>\n } @else {\n <div class=\"select-option\" \n [class.selected]=\"isSelected(item)\"\n (click)=\"select(item)\">\n {{ item.label }}\n </div>\n }\n } @empty {\n <div class=\"select-no-results\">Aucun r\u00E9sultat</div>\n }\n </div>\n </div>\n }\n</div>", styles: [":host{display:block;width:100%;max-width:18.75rem}:host.select-full-width{max-width:none}.select-container{position:relative;width:100%}.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}.select-actions{display:flex;align-items:center;gap:.5rem}.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}.select-option:hover{background:var(--surface-hover)}.select-option.selected{background:rgba(var(--primary-color-rgb),.1);color:var(--primary-color);font-weight:500}:host.select-small .select-trigger{height:2rem;font-size:.875rem}:host.select-large .select-trigger{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 }); }
|
|
3362
3004
|
}
|
|
3363
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3005
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PshSelectComponent, decorators: [{
|
|
3364
3006
|
type: Component,
|
|
3365
3007
|
args: [{ selector: 'psh-select', imports: [CommonModule, FormsModule], providers: [
|
|
3366
3008
|
{
|
|
@@ -3369,25 +3011,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
3369
3011
|
multi: true
|
|
3370
3012
|
}
|
|
3371
3013
|
], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
3372
|
-
'[class.full-width]': 'fullWidth()',
|
|
3373
|
-
'[class.small]': 'size() === "small"',
|
|
3374
|
-
'[class.large]': 'size() === "large"',
|
|
3375
|
-
'[class.error]': '!!error()',
|
|
3376
|
-
'[class.
|
|
3377
|
-
'[class.
|
|
3378
|
-
'[
|
|
3379
|
-
}, template: "<div class=\"select-container\">\n <!-- Label slot -->\n @if (label() || hasLabelContent()) {\n <label class=\"select-label\" [for]=\"selectId\" (click)=\"focusSelect()\" [class.required]=\"!!required()\">\n <ng-content select=\"[select-label]\" />\n @if (!hasLabelContent()) {\n {{ label() }}\n }\n </label>\n }\n\n <div class=\"select-trigger-wrapper\">\n <div\n class=\"select-trigger\"\n [id]=\"selectId\"\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n [attr.aria-controls]=\"selectId + '-listbox'\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-disabled]=\"disabled()\"\n [attr.aria-busy]=\"loading() ? 'true' : null\"\n [attr.aria-required]=\"required() ? 'true' : 'false'\"\n [attr.aria-invalid]=\"!!error()\"\n [attr.aria-label]=\"computedAriaLabel()\"\n [attr.aria-describedby]=\"error() ? 'error-message' : success() ? 'success-message' : hint() ? 'hint-message' : null\"\n [attr.aria-activedescendant]=\"activeDescendant()\"\n [attr.tabindex]=\"disabled() || loading() ? -1 : 0\"\n (click)=\"toggle()\"\n (keydown)=\"handleKeyDown($event)\"\n >\n <div class=\"select-value\">\n <span [class.placeholder]=\"!hasValue()\">{{ selectedLabel() }}</span>\n </div>\n\n <div class=\"select-actions\">\n @if (clearable() && hasValue() && !loading()) {\n <button\n type=\"button\"\n class=\"select-clear\"\n (click)=\"clear($event)\"\n [attr.aria-label]=\"'Effacer la s\u00E9lection'\"\n [tabindex]=\"disabled() ? -1 : 0\"\n >\n <i class=\"ph ph-x\" aria-hidden=\"true\"></i>\n </button>\n }\n @if (loading()) {\n <div class=\"select-loader-trigger\" aria-hidden=\"true\"></div>\n } @else {\n <i\n class=\"ph ph-caret-down select-arrow\"\n [class.open]=\"isOpen()\"\n aria-hidden=\"true\"\n ></i>\n }\n </div>\n </div>\n\n @if (isOpen()) {\n <div\n class=\"select-dropdown\"\n role=\"listbox\"\n [id]=\"selectId + '-listbox'\"\n [attr.aria-multiselectable]=\"multiple()\"\n >\n @if (searchable()) {\n <div class=\"select-search\">\n <input\n type=\"text\"\n [placeholder]=\"searchConfig().placeholder\"\n [value]=\"searchTerm()\"\n (input)=\"onSearch($event)\"\n (click)=\"$event.stopPropagation()\"\n [attr.aria-label]=\"searchConfig().placeholder\"\n />\n </div>\n }\n\n <div class=\"select-options\" (scroll)=\"onScroll($event)\">\n @if (loading()) {\n <div class=\"select-loading\">\n <div class=\"select-loader\"></div>\n </div>\n } @else if (filteredOptions().length === 0) {\n <div class=\"select-no-results\">\n Aucun r\u00E9sultat\n </div>\n } @else {\n @for (option of filteredOptions(); track getOptionKey(option)) {\n @if (isOptionGroup(option)) {\n <div class=\"select-group\">\n <div class=\"select-group-label\">{{ option.label }}</div>\n @for (groupOption of option.options; track getOptionKey(groupOption)) {\n <div\n class=\"select-option\"\n role=\"option\"\n [class.selected]=\"isSelected(groupOption)\"\n [class.focused]=\"isFocused(groupOption)\"\n [class.disabled]=\"option.disabled || groupOption.disabled\"\n [attr.aria-selected]=\"isSelected(groupOption)\"\n [attr.aria-disabled]=\"(option.disabled || groupOption.disabled) || null\"\n [attr.id]=\"selectId + '-option-' + groupOption.value\"\n [attr.tabindex]=\"option.disabled || groupOption.disabled ? -1 : 0\"\n (click)=\"!option.disabled && select(groupOption)\"\n (keydown)=\"handleOptionKeyDown($event, groupOption)\"\n >\n @if (multiple()) {\n <div class=\"select-checkbox\">\n <i class=\"ph ph-check\" aria-hidden=\"true\"></i>\n </div>\n }\n @if (groupOption.icon) {\n <i class=\"ph ph-{{ groupOption.icon }}\" aria-hidden=\"true\"></i>\n }\n <div class=\"option-content\">\n <div class=\"option-label\">{{ groupOption.label }}</div>\n @if (groupOption.description) {\n <div class=\"option-description\">{{ groupOption.description }}</div>\n }\n </div>\n </div>\n }\n </div>\n } @else {\n <div\n class=\"select-option\"\n role=\"option\"\n [class.selected]=\"isSelected(option)\"\n [class.focused]=\"isFocused(option)\"\n [class.disabled]=\"option.disabled\"\n [attr.aria-selected]=\"isSelected(option)\"\n [attr.aria-disabled]=\"option.disabled || null\"\n [attr.id]=\"selectId + '-option-' + option.value\"\n [attr.tabindex]=\"option.disabled ? -1 : 0\"\n (click)=\"select(option)\"\n (keydown)=\"handleOptionKeyDown($event, option)\"\n >\n @if (multiple()) {\n <div class=\"select-checkbox\">\n <i class=\"ph ph-check\" aria-hidden=\"true\"></i>\n </div>\n }\n @if (option.icon) {\n <i class=\"ph ph-{{ option.icon }}\" aria-hidden=\"true\"></i>\n }\n <div class=\"option-content\">\n <div class=\"option-label\">{{ option.label }}</div>\n @if (option.description) {\n <div class=\"option-description\">{{ option.description }}</div>\n }\n </div>\n </div>\n }\n }\n }\n </div>\n </div>\n }\n </div>\n\n <!-- Error message slot -->\n @if (error()) {\n <div id=\"error-message\" class=\"select-error\" role=\"alert\">\n <ng-content select=\"[select-error]\">\n {{ error() }}\n </ng-content>\n </div>\n }\n\n <!-- Success message slot -->\n @if (success()) {\n <div id=\"success-message\" class=\"select-success\" role=\"status\">\n <ng-content select=\"[select-success]\">\n {{ success() }}\n </ng-content>\n </div>\n }\n\n <!-- Hint message slot -->\n @if (hint()) {\n <div id=\"hint-message\" class=\"select-hint\">\n <ng-content select=\"[select-hint]\">\n {{ hint() }}\n </ng-content>\n </div>\n }\n</div>", styles: [":host{display:block;width:100%;max-width:var(--select-max-width)}:host(.full-width){max-width:none}.select-container{width:100%}.select-trigger-wrapper{position:relative;width:100%}.select-label{display:block;color:var(--text-color);font-size:var(--font-size-sm);font-weight:500;margin-bottom:var(--spacing-xs);width:100%;cursor:pointer}.select-label.required:after{content:\"*\";color:var(--danger-color);margin-left:var(--spacing-xxs)}.select-trigger{display:flex;align-items:center;width:100%;min-width:12rem;height:var(--height-input-md);padding:0 var(--spacing-md);background:var(--surface-card);border:var(--border-width-1) solid var(--surface-border);border-radius:var(--border-radius);cursor:pointer;transition:all var(--animation-duration-normal) var(--animation-easing-default);outline:none}.select-trigger:hover{border-color:var(--primary-color)}:host(.disabled) .select-trigger:hover,:host(.loading) .select-trigger:hover{border-color:var(--surface-border)}.select-trigger:focus-visible{border-color:var(--primary-color);box-shadow:0 0 0 .125rem rgba(var(--primary-color-rgb),.2)}.select-value{display:flex;align-items:center;gap:var(--spacing-xs);flex:1;min-width:0;margin-right:var(--spacing-sm)}.select-value span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text-color)}.select-value span.placeholder{color:var(--text-color-secondary)}.select-actions{display:flex;align-items:center;gap:var(--spacing-sm);flex-shrink:0}.select-arrow{transition:transform var(--animation-duration-normal) var(--animation-easing-default);font-size:var(--icon-size-sm);color:var(--text-color-secondary);flex-shrink:0}.select-arrow.open{transform:rotate(180deg)}.select-clear{display:flex;align-items:center;justify-content:center;width:var(--size-5);height:var(--size-5);padding:0;background:transparent;border:none;border-radius:50%;color:var(--text-color-secondary);cursor:pointer;transition:all var(--animation-duration-normal) var(--animation-easing-default);flex-shrink:0}.select-clear:hover{background:rgba(var(--danger-color-rgb),.1);color:var(--danger-color)}.select-dropdown{position:absolute;top:calc(100% + var(--spacing-xs));left:0;width:100%;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:1000;animation:fadeIn var(--animation-duration-normal) var(--animation-easing-default)}.select-search{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm);border-bottom:var(--border-width-1) solid var(--surface-border)}.select-search input{width:100%;padding:var(--spacing-xs) var(--spacing-sm);border:var(--border-width-1) solid var(--surface-border);border-radius:var(--border-radius);background:var(--surface-ground)}.select-search input:focus{outline:none;border-color:var(--primary-color)}.select-options{max-height:var(--dropdown-max-height);overflow-y:auto}.select-group{padding:var(--spacing-xs) 0}.select-group-label{padding:var(--spacing-xs) var(--spacing-md);color:var(--text-color-secondary);font-weight:500;font-size:var(--font-size-sm)}.select-option{display:flex;align-items:center;gap:var(--spacing-md);padding:var(--spacing-sm) var(--spacing-md);cursor:pointer;transition:all var(--animation-duration-normal) var(--animation-easing-default)}.select-option:hover:not(.disabled){background:var(--surface-hover)}.select-option.focused:not(.disabled){background:var(--surface-hover);outline:2px solid var(--primary-color);outline-offset:-2px}.select-option.selected{background:rgba(var(--primary-color-rgb),.1);color:var(--primary-color)}.select-option.selected.focused{background:rgba(var(--primary-color-rgb),.15);outline:2px solid var(--primary-color);outline-offset:-2px}.select-option.disabled{opacity:.6;cursor:not-allowed}.select-option i{font-size:var(--icon-size-md);color:var(--text-color-secondary);flex-shrink:0}.select-option.selected i{color:var(--primary-color)}.option-content{flex:1;min-width:0}.option-label{color:inherit;font-size:var(--font-size-base)}.option-description{color:var(--text-color-secondary);font-size:var(--font-size-sm);margin-top:var(--spacing-xs)}.select-checkbox{display:flex;align-items:center;justify-content:center;width:var(--select-checkbox-size);height:var(--select-checkbox-size);border:var(--border-width-2) solid var(--surface-border);border-radius:var(--border-radius);transition:all var(--animation-duration-normal) var(--animation-easing-default)}.selected .select-checkbox{background:var(--primary-gradient);border-color:var(--primary-color);color:var(--primary-color-text)}.select-no-results{padding:var(--spacing-md);text-align:center;color:var(--text-color-secondary)}.select-loading{padding:var(--spacing-md);text-align:center}.select-loader{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 var(--animation-duration-slow) linear infinite;margin:0 auto}.select-loader-trigger{width:var(--icon-size-sm);height:var(--icon-size-sm);border:var(--border-width-2) solid var(--surface-border);border-top-color:var(--primary-color);border-radius:50%;animation:spin var(--animation-duration-slow) linear infinite;flex-shrink:0}.select-error{margin-top:var(--spacing-xs);color:var(--danger-color);font-size:var(--font-size-sm)}.select-success{margin-top:var(--spacing-xs);color:var(--success-color);font-size:var(--font-size-sm)}.select-hint{font-size:var(--font-size-sm);color:var(--text-color-secondary);margin-top:var(--spacing-xs)}.virtual-scroll{position:relative;overflow:hidden}:host(.disabled) .select-trigger{background:var(--surface-ground);cursor:not-allowed;opacity:.6}:host(.loading) .select-trigger{cursor:wait;opacity:.7}:host(.error) .select-trigger{border-color:var(--danger-color)}:host(.success) .select-trigger{border-color:var(--success-color)}:host(.small) .select-trigger{height:var(--height-input-sm);font-size:var(--font-size-sm);padding:0 var(--spacing-sm)}:host(.small) .select-arrow{font-size:var(--icon-size-xs)}:host(.small) .select-value{margin-right:var(--spacing-xs)}:host(.small) .select-actions{gap:var(--spacing-xs)}:host(.small) .select-dropdown{font-size:var(--font-size-sm)}:host(.small) .select-search{padding:var(--spacing-xs)}:host(.small) .select-search input{padding:var(--spacing-xxs) var(--spacing-xs);font-size:var(--font-size-sm)}:host(.small) .select-option{padding:var(--spacing-xs) var(--spacing-sm);gap:var(--spacing-sm)}:host(.small) .select-option i{font-size:var(--icon-size-sm)}:host(.small) .option-label{font-size:var(--font-size-sm)}:host(.small) .option-description{font-size:var(--font-size-xs);margin-top:var(--spacing-xxs)}:host(.small) .select-group-label{padding:var(--spacing-xxs) var(--spacing-sm);font-size:var(--font-size-xs)}:host(.small) .select-checkbox{width:calc(var(--select-checkbox-size) * .85);height:calc(var(--select-checkbox-size) * .85)}:host(.large) .select-trigger{height:var(--height-input-lg);font-size:var(--font-size-lg);padding:0 var(--spacing-lg)}:host(.large) .select-arrow{font-size:var(--icon-size-md)}:host(.large) .select-value{margin-right:var(--spacing-md)}:host(.large) .select-actions{gap:var(--spacing-md)}:host(.large) .select-dropdown{font-size:var(--font-size-lg)}:host(.large) .select-search{padding:var(--spacing-md)}:host(.large) .select-search input{padding:var(--spacing-sm) var(--spacing-md);font-size:var(--font-size-lg)}:host(.large) .select-option{padding:var(--spacing-md) var(--spacing-lg);gap:var(--spacing-lg)}:host(.large) .select-option i{font-size:var(--icon-size-lg)}:host(.large) .option-label{font-size:var(--font-size-lg)}:host(.large) .option-description{font-size:var(--font-size-base);margin-top:var(--spacing-xs)}:host(.large) .select-group-label{padding:var(--spacing-sm) var(--spacing-lg);font-size:var(--font-size-base)}:host(.large) .select-checkbox{width:calc(var(--select-checkbox-size) * 1.15);height:calc(var(--select-checkbox-size) * 1.15)}@media (max-width: 36em){:host{max-width:none}}@keyframes fadeIn{0%{opacity:0;transform:translateY(calc(-1 * var(--spacing-sm)))}to{opacity:1;transform:translateY(0)}}@keyframes spin{to{transform:rotate(360deg)}}\n"] }]
|
|
3380
|
-
|
|
3381
|
-
|
|
3382
|
-
args: ['value']
|
|
3383
|
-
}], disabledInput: [{
|
|
3384
|
-
type: Input,
|
|
3385
|
-
args: ['disabled']
|
|
3386
|
-
}], 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 }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", 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 }] }], 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 }] }], valueChange: [{
|
|
3387
|
-
type: Output
|
|
3388
|
-
}], disabledChange: [{
|
|
3389
|
-
type: Output
|
|
3390
|
-
}], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], scrollEnd: [{ type: i0.Output, args: ["scrollEnd"] }], searched: [{ type: i0.Output, args: ["searched"] }] } });
|
|
3014
|
+
'[class.select-full-width]': 'fullWidth()',
|
|
3015
|
+
'[class.select-small]': 'size() === "small"',
|
|
3016
|
+
'[class.select-large]': 'size() === "large"',
|
|
3017
|
+
'[class.select-error]': '!!error()',
|
|
3018
|
+
'[class.select-disabled]': 'disabled()',
|
|
3019
|
+
'[class.select-loading]': 'loading()',
|
|
3020
|
+
'[attr.aria-expanded]': 'isOpen().toString()',
|
|
3021
|
+
'[attr.data-state]': 'state()'
|
|
3022
|
+
}, template: "<div class=\"select-container\">\n @if (label()) {\n <label class=\"select-label\" [attr.for]=\"selectId\" (click)=\"focusSelect()\">\n {{ label() }}\n @if (required()) { <span class=\"required-mark\">*</span> }\n </label>\n }\n\n <div class=\"select-trigger\" [id]=\"selectId\" (click)=\"toggle()\" tabindex=\"0\">\n <div class=\"select-value\">\n <span [class.placeholder]=\"!hasValue()\">\n {{ selectedLabel() }}\n </span>\n </div>\n \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\" (scroll)=\"onScroll($event)\">\n @for (item of filteredOptions(); track getOptionKey(item)) {\n @if (isOptionGroup(item)) {\n <div class=\"select-group\">\n <div class=\"select-group-label\">{{ item.label }}</div>\n @for (opt of item.options; track opt.label) {\n <div class=\"select-option\" \n [class.selected]=\"isSelected(opt)\"\n (click)=\"select(opt)\">\n {{ opt.label }}\n </div>\n }\n </div>\n } @else {\n <div class=\"select-option\" \n [class.selected]=\"isSelected(item)\"\n (click)=\"select(item)\">\n {{ item.label }}\n </div>\n }\n } @empty {\n <div class=\"select-no-results\">Aucun r\u00E9sultat</div>\n }\n </div>\n </div>\n }\n</div>", styles: [":host{display:block;width:100%;max-width:18.75rem}:host.select-full-width{max-width:none}.select-container{position:relative;width:100%}.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}.select-actions{display:flex;align-items:center;gap:.5rem}.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}.select-option:hover{background:var(--surface-hover)}.select-option.selected{background:rgba(var(--primary-color-rgb),.1);color:var(--primary-color);font-weight:500}:host.select-small .select-trigger{height:2rem;font-size:.875rem}:host.select-large .select-trigger{height:3rem;font-size:1.125rem}@keyframes spin{to{transform:rotate(360deg)}}\n"] }]
|
|
3023
|
+
}], 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"] }] } });
|
|
3391
3024
|
|
|
3392
3025
|
const SIDEBAR_CONFIG = new InjectionToken('SIDEBAR_CONFIG', {
|
|
3393
3026
|
factory: () => ({
|
|
@@ -3566,10 +3199,10 @@ class PshSidebarComponent {
|
|
|
3566
3199
|
this.removeEventListeners();
|
|
3567
3200
|
this.focusedElementBeforeOpen = null;
|
|
3568
3201
|
}
|
|
3569
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3570
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
3202
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PshSidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3203
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", 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 }); }
|
|
3571
3204
|
}
|
|
3572
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3205
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PshSidebarComponent, decorators: [{
|
|
3573
3206
|
type: Component,
|
|
3574
3207
|
args: [{ selector: 'psh-sidebar', imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
3575
3208
|
'role': 'complementary',
|
|
@@ -3607,10 +3240,10 @@ class PshSpinLoaderComponent {
|
|
|
3607
3240
|
}
|
|
3608
3241
|
});
|
|
3609
3242
|
}
|
|
3610
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3611
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
3243
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PshSpinLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3244
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", 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 }); }
|
|
3612
3245
|
}
|
|
3613
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3246
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PshSpinLoaderComponent, decorators: [{
|
|
3614
3247
|
type: Component,
|
|
3615
3248
|
args: [{ selector: 'psh-spinloader', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
3616
3249
|
'role': 'status',
|
|
@@ -3646,10 +3279,10 @@ class PshStepComponent {
|
|
|
3646
3279
|
setActive(value) {
|
|
3647
3280
|
this._isActive.set(value);
|
|
3648
3281
|
}
|
|
3649
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3650
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
3282
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PshStepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3283
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.5", 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 }); }
|
|
3651
3284
|
}
|
|
3652
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3285
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PshStepComponent, decorators: [{
|
|
3653
3286
|
type: Component,
|
|
3654
3287
|
args: [{
|
|
3655
3288
|
selector: 'psh-step',
|
|
@@ -3860,10 +3493,10 @@ class PshStepperComponent {
|
|
|
3860
3493
|
break;
|
|
3861
3494
|
}
|
|
3862
3495
|
}
|
|
3863
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3864
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
3496
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PshStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3497
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: PshStepperComponent, isStandalone: true, selector: "psh-stepper", inputs: { activeStep: { classPropertyName: "activeStep", publicName: "activeStep", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null }, ariaLabels: { classPropertyName: "ariaLabels", publicName: "ariaLabels", isSignal: true, isRequired: false, transformFunction: null }, beforeStepChange: { classPropertyName: "beforeStepChange", publicName: "beforeStepChange", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeStep: "activeStepChange", stepChange: "stepChange", completed: "completed", navigationError: "navigationError" }, host: { properties: { "class.stepper-container": "true", "class.numbered": "variant() === \"numbered\"", "class.progress": "variant() === \"progress\"", "attr.role": "\"region\"", "attr.aria-label": "\"Navigation par \u00E9tapes\"" } }, queries: [{ propertyName: "stepComponents", predicate: PshStepComponent, isSignal: true }], ngImport: i0, template: "<div class=\"stepper-header\" role=\"tablist\">\n @for (step of steps(); track $index; let i = $index) {\n <div\n class=\"step-header\"\n [class.active]=\"i === activeStep()\"\n [class.completed]=\"step.completed\"\n [class.disabled]=\"step.disabled\"\n [class.error]=\"!!step.error\"\n [class.warning]=\"!!step.warning\"\n [class.success]=\"!!step.success\"\n >\n <div\n class=\"step-indicator\"\n role=\"tab\"\n tabindex=\"0\"\n [attr.id]=\"'step-' + i\"\n [attr.aria-selected]=\"i === activeStep()\"\n [attr.aria-disabled]=\"step.disabled\"\n [attr.aria-label]=\"getStepAriaLabel(step, i)\"\n [attr.aria-current]=\"i === activeStep() ? 'step' : null\"\n [attr.aria-describedby]=\"getStepDescribedBy(step, i)\"\n [attr.aria-busy]=\"step.loading\"\n (click)=\"handleStepClick(i)\"\n (keydown)=\"handleKeydown($event, i)\"\n >\n @if (step.loading && variant() === 'progress') {\n <i class=\"ph ph-circle-notch spinner\" aria-hidden=\"true\"></i>\n } @else if (step.completed) {\n <i class=\"ph ph-check\" aria-hidden=\"true\"></i>\n } @else if (variant() === 'numbered') {\n {{ i + 1 }}\n } @else if (step.icon) {\n <i class=\"ph ph-{{ step.icon }}\" aria-hidden=\"true\"></i>\n } @else {\n <span class=\"step-dot\"></span>\n }\n </div>\n\n <div class=\"step-label\">\n <span class=\"step-title\">{{ step.title }}</span>\n @if (step.subtitle) {\n <span class=\"step-subtitle\">{{ step.subtitle }}</span>\n }\n @if (step.error) {\n <span class=\"step-error\" [id]=\"'error-' + i\" role=\"alert\" aria-live=\"polite\">{{ step.error }}</span>\n }\n @if (step.warning) {\n <span class=\"step-warning\" [id]=\"'warning-' + i\" role=\"status\" aria-live=\"polite\">{{ step.warning }}</span>\n }\n @if (step.success) {\n <span class=\"step-success\" [id]=\"'success-' + i\" role=\"status\" aria-live=\"polite\">{{ step.success }}</span>\n }\n </div>\n\n @if (i < steps().length - 1) {\n <div class=\"step-connector\" aria-hidden=\"true\">\n <span class=\"connector-line\"></span>\n </div>\n }\n </div>\n }\n</div>\n\n<div class=\"stepper-content\">\n <ng-content />\n</div>\n", styles: [".stepper-container{display:flex;flex-direction:column;width:100%;container-type:inline-size}.stepper-header{display:flex;flex-direction:row;margin-bottom:var(--spacing-xl)}.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 }); }
|
|
3865
3498
|
}
|
|
3866
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3499
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PshStepperComponent, decorators: [{
|
|
3867
3500
|
type: Component,
|
|
3868
3501
|
args: [{ selector: 'psh-stepper', changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
3869
3502
|
'[class.stepper-container]': 'true',
|
|
@@ -3871,7 +3504,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
3871
3504
|
'[class.progress]': 'variant() === "progress"',
|
|
3872
3505
|
'[attr.role]': '"region"',
|
|
3873
3506
|
'[attr.aria-label]': '"Navigation par étapes"'
|
|
3874
|
-
}, 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;margin-bottom:var(--spacing-xl)}.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
|
|
3507
|
+
}, 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;margin-bottom:var(--spacing-xl)}.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"] }]
|
|
3875
3508
|
}], ctorParameters: () => [], propDecorators: { activeStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeStep", required: false }] }, { type: i0.Output, args: ["activeStepChange"] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], linear: [{ type: i0.Input, args: [{ isSignal: true, alias: "linear", required: false }] }], ariaLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabels", required: false }] }], beforeStepChange: [{ type: i0.Input, args: [{ isSignal: true, alias: "beforeStepChange", required: false }] }], stepChange: [{ type: i0.Output, args: ["stepChange"] }], completed: [{ type: i0.Output, args: ["completed"] }], navigationError: [{ type: i0.Output, args: ["navigationError"] }], stepComponents: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => PshStepComponent), { isSignal: true }] }] } });
|
|
3876
3509
|
|
|
3877
3510
|
const SWITCH_CONFIG = new InjectionToken('SWITCH_CONFIG', {
|
|
@@ -3890,23 +3523,17 @@ class PshSwitchComponent {
|
|
|
3890
3523
|
this.switchInput = viewChild('switchInput', ...(ngDevMode ? [{ debugName: "switchInput" }] : []));
|
|
3891
3524
|
this.onChange = (value) => { };
|
|
3892
3525
|
this.onTouched = () => { };
|
|
3893
|
-
|
|
3894
|
-
|
|
3895
|
-
this.
|
|
3896
|
-
this.disabled = signal(this.config.disabled ?? false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
3897
|
-
// Outputs — EventEmitter to decouple from signal writes.
|
|
3898
|
-
this.checkedChange = new EventEmitter();
|
|
3899
|
-
this.disabledChange = new EventEmitter();
|
|
3900
|
-
// Configuration inputs (not CVA-managed, not written internally)
|
|
3526
|
+
this.checked = model(this.config.checked ?? false, ...(ngDevMode ? [{ debugName: "checked" }] : []));
|
|
3527
|
+
this.disabled = model(this.config.disabled ?? false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
3528
|
+
this.touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : []));
|
|
3901
3529
|
this.required = input(this.config.required ?? false, ...(ngDevMode ? [{ debugName: "required" }] : []));
|
|
3902
3530
|
this.size = input(this.config.size ?? 'medium', ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
3903
3531
|
this.labelPosition = input(this.config.labelPosition ?? 'right', ...(ngDevMode ? [{ debugName: "labelPosition" }] : []));
|
|
3904
|
-
// Regular inputs
|
|
3905
3532
|
this.label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
|
|
3906
3533
|
this.error = input('', ...(ngDevMode ? [{ debugName: "error" }] : []));
|
|
3907
3534
|
this.success = input('', ...(ngDevMode ? [{ debugName: "success" }] : []));
|
|
3908
3535
|
this.ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : []));
|
|
3909
|
-
this.name = input(...(ngDevMode ? [
|
|
3536
|
+
this.name = input('', ...(ngDevMode ? [{ debugName: "name" }] : []));
|
|
3910
3537
|
this.id = input(this.uniqueId, ...(ngDevMode ? [{ debugName: "id" }] : []));
|
|
3911
3538
|
this.computedAriaLabel = computed(() => {
|
|
3912
3539
|
const customLabel = this.ariaLabel();
|
|
@@ -3924,17 +3551,14 @@ class PshSwitchComponent {
|
|
|
3924
3551
|
return ids.length > 0 ? ids.join(' ') : null;
|
|
3925
3552
|
}, ...(ngDevMode ? [{ debugName: "describedBy" }] : []));
|
|
3926
3553
|
}
|
|
3927
|
-
set checkedInput(v) { this.checked.set(v); }
|
|
3928
|
-
set disabledInput(v) { this.disabled.set(v); }
|
|
3929
3554
|
toggle() {
|
|
3930
3555
|
if (!this.disabled()) {
|
|
3931
3556
|
this.checked.update(v => !v);
|
|
3932
3557
|
this.onChange(this.checked());
|
|
3933
|
-
this.checkedChange.emit(this.checked());
|
|
3934
3558
|
this.onTouched();
|
|
3559
|
+
this.touched.set(true);
|
|
3935
3560
|
}
|
|
3936
3561
|
}
|
|
3937
|
-
// ControlValueAccessor implementation
|
|
3938
3562
|
writeValue(value) {
|
|
3939
3563
|
this.checked.set(value ?? false);
|
|
3940
3564
|
}
|
|
@@ -3947,27 +3571,26 @@ class PshSwitchComponent {
|
|
|
3947
3571
|
setDisabledState(isDisabled) {
|
|
3948
3572
|
this.disabled.set(isDisabled);
|
|
3949
3573
|
}
|
|
3950
|
-
// Méthodes publiques pour contrôle programmatique
|
|
3951
3574
|
focus() {
|
|
3952
|
-
const
|
|
3953
|
-
if (
|
|
3954
|
-
|
|
3575
|
+
const el = this.switchInput();
|
|
3576
|
+
if (el?.nativeElement) {
|
|
3577
|
+
el.nativeElement.focus();
|
|
3955
3578
|
}
|
|
3956
3579
|
}
|
|
3957
3580
|
blur() {
|
|
3958
|
-
const
|
|
3959
|
-
if (
|
|
3960
|
-
|
|
3581
|
+
const el = this.switchInput();
|
|
3582
|
+
if (el?.nativeElement) {
|
|
3583
|
+
el.nativeElement.blur();
|
|
3961
3584
|
}
|
|
3962
3585
|
}
|
|
3963
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3964
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
3586
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PshSwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3587
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", 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: [{
|
|
3965
3588
|
provide: NG_VALUE_ACCESSOR,
|
|
3966
3589
|
useExisting: PshSwitchComponent,
|
|
3967
3590
|
multi: true
|
|
3968
|
-
}], 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
|
|
3591
|
+
}], 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 }); }
|
|
3969
3592
|
}
|
|
3970
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3593
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PshSwitchComponent, decorators: [{
|
|
3971
3594
|
type: Component,
|
|
3972
3595
|
args: [{ selector: 'psh-switch', changeDetection: ChangeDetectionStrategy.OnPush, providers: [{
|
|
3973
3596
|
provide: NG_VALUE_ACCESSOR,
|
|
@@ -3978,18 +3601,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
3978
3601
|
'[class.switch-disabled]': 'disabled()',
|
|
3979
3602
|
'[class.switch-error]': '!!error()',
|
|
3980
3603
|
'[class.switch-success]': '!!success()'
|
|
3981
|
-
}, 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
|
|
3982
|
-
}], propDecorators: { switchInput: [{ type: i0.ViewChild, args: ['switchInput', { isSignal: true }] }],
|
|
3983
|
-
type: Input,
|
|
3984
|
-
args: ['checked']
|
|
3985
|
-
}], disabledInput: [{
|
|
3986
|
-
type: Input,
|
|
3987
|
-
args: ['disabled']
|
|
3988
|
-
}], checkedChange: [{
|
|
3989
|
-
type: Output
|
|
3990
|
-
}], disabledChange: [{
|
|
3991
|
-
type: Output
|
|
3992
|
-
}], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], labelPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPosition", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], success: [{ type: i0.Input, args: [{ isSignal: true, alias: "success", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }] } });
|
|
3604
|
+
}, 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"] }]
|
|
3605
|
+
}], propDecorators: { switchInput: [{ type: i0.ViewChild, args: ['switchInput', { isSignal: true }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], 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"] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], labelPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPosition", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], success: [{ type: i0.Input, args: [{ isSignal: true, alias: "success", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }] } });
|
|
3993
3606
|
|
|
3994
3607
|
/**
|
|
3995
3608
|
* Token d'injection pour la configuration globale de la barre d'onglets
|
|
@@ -4033,17 +3646,17 @@ class PshTabBarComponent {
|
|
|
4033
3646
|
previousIndex
|
|
4034
3647
|
});
|
|
4035
3648
|
}
|
|
4036
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4037
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
3649
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PshTabBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3650
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", 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 }); }
|
|
4038
3651
|
}
|
|
4039
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3652
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PshTabBarComponent, decorators: [{
|
|
4040
3653
|
type: Component,
|
|
4041
3654
|
args: [{ selector: 'psh-tab-bar', changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
4042
3655
|
'[class.top]': 'position() === "top"',
|
|
4043
3656
|
'[class.animated]': 'animated()',
|
|
4044
3657
|
'role': 'tablist',
|
|
4045
3658
|
'[attr.aria-label]': '"Navigation par onglets"'
|
|
4046
|
-
}, 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
|
|
3659
|
+
}, 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"] }]
|
|
4047
3660
|
}], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }, { type: i0.Output, args: ["positionChange"] }], animated: [{ type: i0.Input, args: [{ isSignal: true, alias: "animated", required: false }] }, { type: i0.Output, args: ["animatedChange"] }], activeIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeIndex", required: false }] }, { type: i0.Output, args: ["activeIndexChange"] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], tabChange: [{ type: i0.Output, args: ["tabChange"] }] } });
|
|
4048
3661
|
|
|
4049
3662
|
const TABLE_CONFIG = new InjectionToken('TABLE_CONFIG', {
|
|
@@ -4181,15 +3794,15 @@ class PshTableComponent {
|
|
|
4181
3794
|
getCellValue(row, column) {
|
|
4182
3795
|
return this.getNestedValue(row, column.path || column.key);
|
|
4183
3796
|
}
|
|
4184
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4185
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
3797
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PshTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3798
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", 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 } }, outputs: { sortChange: "sortChange", globalSearchChange: "globalSearchChange", rowClick: "rowClick" }, 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\">\n <input\n type=\"text\"\n [attr.placeholder]=\"globalSearchPlaceholder()\"\n [value]=\"searchTerm()\"\n (input)=\"handleGlobalSearch($event)\"\n [attr.aria-label]=\"globalSearchPlaceholder()\"\n />\n <i class=\"ph ph-magnifying-glass\" aria-hidden=\"true\"></i>\n </div>\n }\n\n <table role=\"table\">\n <thead>\n <tr>\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]=\"columns().length\">\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]=\"columns().length\">\n {{ computedEmptyMessage() }}\n </td>\n </tr>\n } @else {\n @for (row of filteredData(); track row.id) {\n <tr (click)=\"handleRowClick(row)\">\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 }\n </tbody>\n </table>\n</div>", 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{position:relative;margin-bottom:var(--spacing-md)}.global-search input{width:100%;padding:var(--spacing-sm) var(--spacing-lg);padding-left:calc(var(--spacing-xl) + var(--spacing-xs));border:var(--border-width-1) solid var(--surface-border);border-radius:var(--border-radius);background:var(--surface-card);color:var(--text-color);font-size:var(--font-size-base);transition:all var(--animation-duration-normal) var(--animation-easing-default)}.global-search input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 var(--focus-outline-width) var(--focus-ring-color)}.global-search i{position:absolute;left:var(--spacing-md);top:50%;transform:translateY(-50%);color:var(--text-color-secondary);font-size:var(--icon-size-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}@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)}.global-search input{padding:var(--spacing-xs) var(--spacing-md);padding-left:calc(var(--spacing-lg) + 4px);font-size:var(--font-size-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)}.global-search input{padding:var(--spacing-xs);padding-left:var(--spacing-md);font-size:var(--font-size-xs)}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4186
3799
|
}
|
|
4187
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3800
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PshTableComponent, decorators: [{
|
|
4188
3801
|
type: Component,
|
|
4189
3802
|
args: [{ selector: 'psh-table', imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
4190
3803
|
'class': 'psh-table',
|
|
4191
3804
|
'[class.full-width]': 'fullWidth()'
|
|
4192
|
-
}, 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\">\n <input\n type=\"text\"\n [attr.placeholder]=\"globalSearchPlaceholder()\"\n [value]=\"searchTerm()\"\n (input)=\"handleGlobalSearch($event)\"\n [attr.aria-label]=\"globalSearchPlaceholder()\"\n />\n <i class=\"ph ph-magnifying-glass\" aria-hidden=\"true\"></i>\n </div>\n }\n\n <table role=\"table\">\n <thead>\n <tr>\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]=\"columns().length\">\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]=\"columns().length\">\n {{ computedEmptyMessage() }}\n </td>\n </tr>\n } @else {\n @for (row of filteredData(); track row.id) {\n <tr (click)=\"handleRowClick(row)\">\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 }\n </tbody>\n </table>\n</div>", 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{position:relative;margin-bottom:var(--spacing-md)}.global-search input{width:100%;padding:var(--spacing-sm) var(--spacing-lg);padding-left:calc(var(--spacing-xl) + var(--spacing-xs));border:var(--border-width-1) solid var(--surface-border);border-radius:var(--border-radius);background:var(--surface-card);color:var(--text-color);font-size:var(--font-size-base);transition:all var(--animation-duration-normal) var(--animation-easing-default)}.global-search input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 var(--focus-outline-width) var(--focus-ring-color)}.global-search i{position:absolute;left:var(--spacing-md);top:50%;transform:translateY(-50%);color:var(--text-color-secondary);font-size:var(--icon-size-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}@media
|
|
3805
|
+
}, 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\">\n <input\n type=\"text\"\n [attr.placeholder]=\"globalSearchPlaceholder()\"\n [value]=\"searchTerm()\"\n (input)=\"handleGlobalSearch($event)\"\n [attr.aria-label]=\"globalSearchPlaceholder()\"\n />\n <i class=\"ph ph-magnifying-glass\" aria-hidden=\"true\"></i>\n </div>\n }\n\n <table role=\"table\">\n <thead>\n <tr>\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]=\"columns().length\">\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]=\"columns().length\">\n {{ computedEmptyMessage() }}\n </td>\n </tr>\n } @else {\n @for (row of filteredData(); track row.id) {\n <tr (click)=\"handleRowClick(row)\">\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 }\n </tbody>\n </table>\n</div>", 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{position:relative;margin-bottom:var(--spacing-md)}.global-search input{width:100%;padding:var(--spacing-sm) var(--spacing-lg);padding-left:calc(var(--spacing-xl) + var(--spacing-xs));border:var(--border-width-1) solid var(--surface-border);border-radius:var(--border-radius);background:var(--surface-card);color:var(--text-color);font-size:var(--font-size-base);transition:all var(--animation-duration-normal) var(--animation-easing-default)}.global-search input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 var(--focus-outline-width) var(--focus-ring-color)}.global-search i{position:absolute;left:var(--spacing-md);top:50%;transform:translateY(-50%);color:var(--text-color-secondary);font-size:var(--icon-size-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}@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)}.global-search input{padding:var(--spacing-xs) var(--spacing-md);padding-left:calc(var(--spacing-lg) + 4px);font-size:var(--font-size-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)}.global-search input{padding:var(--spacing-xs);padding-left:var(--spacing-md);font-size:var(--font-size-xs)}}\n"] }]
|
|
4193
3806
|
}], 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"] }] } });
|
|
4194
3807
|
|
|
4195
3808
|
class PshTabComponent {
|
|
@@ -4218,10 +3831,10 @@ class PshTabComponent {
|
|
|
4218
3831
|
ariaLabel: this.ariaLabel()
|
|
4219
3832
|
};
|
|
4220
3833
|
}
|
|
4221
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4222
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
3834
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PshTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3835
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.5", 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 }); }
|
|
4223
3836
|
}
|
|
4224
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3837
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PshTabComponent, decorators: [{
|
|
4225
3838
|
type: Component,
|
|
4226
3839
|
args: [{
|
|
4227
3840
|
selector: 'psh-tab',
|
|
@@ -4374,10 +3987,10 @@ class PshTabsComponent {
|
|
|
4374
3987
|
getTabComponent(index) {
|
|
4375
3988
|
return this.tabComponents()[index];
|
|
4376
3989
|
}
|
|
4377
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4378
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
3990
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PshTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3991
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", 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 }); }
|
|
4379
3992
|
}
|
|
4380
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3993
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PshTabsComponent, decorators: [{
|
|
4381
3994
|
type: Component,
|
|
4382
3995
|
args: [{ selector: 'psh-tabs', changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
4383
3996
|
'[class]': 'hostClasses()',
|
|
@@ -4444,10 +4057,10 @@ class PshToastService {
|
|
|
4444
4057
|
setPosition(position) {
|
|
4445
4058
|
this._position.set(position);
|
|
4446
4059
|
}
|
|
4447
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4448
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
4060
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PshToastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
4061
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PshToastService, providedIn: 'root' }); }
|
|
4449
4062
|
}
|
|
4450
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4063
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PshToastService, decorators: [{
|
|
4451
4064
|
type: Injectable,
|
|
4452
4065
|
args: [{
|
|
4453
4066
|
providedIn: 'root'
|
|
@@ -4551,14 +4164,14 @@ class PshToastComponent {
|
|
|
4551
4164
|
this.timeoutMap.clear();
|
|
4552
4165
|
this.scheduledToastIds.clear();
|
|
4553
4166
|
}
|
|
4554
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4555
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
4167
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PshToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4168
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", 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 }); }
|
|
4556
4169
|
}
|
|
4557
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4170
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PshToastComponent, decorators: [{
|
|
4558
4171
|
type: Component,
|
|
4559
4172
|
args: [{ selector: 'psh-toast', changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
4560
4173
|
'(document:keydown.escape)': 'handleEscapeKey()'
|
|
4561
|
-
}, 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
|
|
4174
|
+
}, 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"] }]
|
|
4562
4175
|
}], ctorParameters: () => [] });
|
|
4563
4176
|
|
|
4564
4177
|
// Clé pour le stockage localStorage
|
|
@@ -4814,10 +4427,10 @@ class ThemeService {
|
|
|
4814
4427
|
console.warn('Unable to save theme to localStorage:', error);
|
|
4815
4428
|
}
|
|
4816
4429
|
}
|
|
4817
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4818
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
4430
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
4431
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ThemeService, providedIn: 'root' }); }
|
|
4819
4432
|
}
|
|
4820
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4433
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ThemeService, decorators: [{
|
|
4821
4434
|
type: Injectable,
|
|
4822
4435
|
args: [{
|
|
4823
4436
|
providedIn: 'root'
|
|
@@ -4847,10 +4460,10 @@ class NgxTranslateProvider {
|
|
|
4847
4460
|
onLangChange() {
|
|
4848
4461
|
return this.translateService.onLangChange.pipe(map(event => event.lang));
|
|
4849
4462
|
}
|
|
4850
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4851
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
4463
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NgxTranslateProvider, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
4464
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NgxTranslateProvider }); }
|
|
4852
4465
|
}
|
|
4853
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4466
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NgxTranslateProvider, decorators: [{
|
|
4854
4467
|
type: Injectable
|
|
4855
4468
|
}] });
|
|
4856
4469
|
const TRANSLATION_PROVIDER = new InjectionToken('TRANSLATION_PROVIDER', {
|
|
@@ -4871,10 +4484,10 @@ class ScrollService {
|
|
|
4871
4484
|
window.scrollTo(0, 0);
|
|
4872
4485
|
});
|
|
4873
4486
|
}
|
|
4874
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4875
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
4487
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScrollService, deps: [{ token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
4488
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScrollService, providedIn: 'root' }); }
|
|
4876
4489
|
}
|
|
4877
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4490
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScrollService, decorators: [{
|
|
4878
4491
|
type: Injectable,
|
|
4879
4492
|
args: [{
|
|
4880
4493
|
providedIn: 'root'
|