ps-helix 4.1.1 → 5.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +3 -3
- package/THEME.md +159 -156
- package/fesm2022/ps-helix.mjs +562 -324
- package/fesm2022/ps-helix.mjs.map +1 -1
- package/package.json +1 -1
- package/src/lib/styles/themes/dark.css +16 -16
- package/src/lib/styles/themes/light.css +16 -16
- package/src/lib/styles/tokens/spacing.tokens.css +4 -0
- package/types/ps-helix.d.ts +139 -23
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, effect, ChangeDetectorRef, DestroyRef, Injectable, Renderer2, contentChild, EventEmitter, Output, Input, contentChildren, afterNextRender } from '@angular/core';
|
|
2
|
+
import { input, output, computed, ChangeDetectionStrategy, Component, model, inject, ElementRef, signal, PLATFORM_ID, ViewEncapsulation, InjectionToken, viewChild, effect, ChangeDetectorRef, DestroyRef, ViewChild, 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,10 +57,10 @@ class PshAlertComponent {
|
|
|
57
57
|
handleClose() {
|
|
58
58
|
this.closed.emit();
|
|
59
59
|
}
|
|
60
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
61
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
60
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PshAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
61
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: PshAlertComponent, isStandalone: true, selector: "psh-alert", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, iconPosition: { classPropertyName: "iconPosition", publicName: "iconPosition", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, dismissLabel: { classPropertyName: "dismissLabel", publicName: "dismissLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLive: { classPropertyName: "ariaLive", publicName: "ariaLive", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, ngImport: i0, template: "<div\n class=\"alert\"\n [class.small]=\"size() === 'small'\"\n [class.large]=\"size() === 'large'\"\n [class]=\"type()\"\n [attr.role]=\"computedRole()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-live]=\"computedAriaLive()\"\n [attr.data-state]=\"state()\"\n>\n <div class=\"alert-content\" [class.icon-right]=\"iconPosition() === 'right'\">\n @if (showIcon()) {\n <i class=\"ph ph-{{ getIcon() }}\" aria-hidden=\"true\"></i>\n }\n <div class=\"alert-message\">\n <ng-content>{{ content() }}</ng-content>\n </div>\n </div>\n \n @if (closable()) {\n <button\n type=\"button\"\n class=\"alert-dismiss\"\n (click)=\"handleClose()\"\n [attr.aria-label]=\"dismissLabel()\"\n >\n <i class=\"ph ph-x\" aria-hidden=\"true\"></i>\n </button>\n }\n</div>", styles: [".alert{--alert-animation-duration: var(--animation-duration-fast);--alert-animation-distance: var(--animation-distance-sm);--alert-icon-size: var(--icon-size-md);--alert-icon-size-sm: var(--icon-size-sm);--alert-icon-size-lg: var(--icon-size-lg);--alert-dismiss-hover-bg: rgba(0, 0, 0, .1);display:flex;align-items:flex-start;justify-content:space-between;gap:var(--spacing-md);padding:var(--spacing-md) var(--spacing-lg);border-radius:var(--border-radius);border:var(--border-width-1) solid transparent;animation:slideIn var(--alert-animation-duration) var(--animation-easing-default)}.alert-content{display:flex;align-items:flex-start;flex-direction:row;gap:var(--spacing-md);flex:1}.alert-content.icon-right{flex-direction:row-reverse}.alert i{font-size:var(--alert-icon-size);flex-shrink:0}.alert-message{color:inherit;font-size:var(--font-size-base);line-height:var(--line-height-relaxed);word-break:break-word;overflow-wrap:break-word}.alert.info{background:var(--alert-info-bg);border-color:var(--alert-info-border-color);color:var(--alert-info-text-color)}.alert.success{background:rgba(var(--success-color-rgb),.1);border-color:var(--success-color);color:var(--success-color)}.alert.warning{background:rgba(var(--warning-color-rgb),.1);border-color:var(--warning-color);color:var(--warning-color)}.alert.danger{background:rgba(var(--danger-color-rgb),.1);border-color:var(--danger-color);color:var(--danger-color)}.alert.small{padding:var(--spacing-sm) var(--spacing-md);font-size:var(--font-size-sm)}.alert.small i{font-size:var(--alert-icon-size-sm)}.alert.large{padding:var(--spacing-lg) var(--spacing-xl);font-size:var(--font-size-lg)}.alert.large i{font-size:var(--alert-icon-size-lg)}.alert-dismiss{background:transparent;border:none;color:inherit;padding:var(--spacing-xs);cursor:pointer;opacity:.7;transition:opacity .2s ease;border-radius:var(--border-radius);display:flex;align-items:center;justify-content:center;z-index:2}.alert-dismiss:hover{opacity:1;background:var(--alert-dismiss-hover-bg)}@keyframes slideIn{0%{opacity:0;transform:translateY(calc(-1 * var(--alert-animation-distance)))}to{opacity:1;transform:translateY(0)}}@media(max-width:768px){.alert{padding:var(--spacing-sm) var(--spacing-md);gap:var(--spacing-sm)}.alert-content{gap:var(--spacing-sm)}.alert-message{font-size:var(--font-size-sm);word-break:break-word;overflow-wrap:break-word}.alert i{font-size:var(--icon-size-sm)}.alert.large{padding:var(--spacing-md) var(--spacing-lg)}.alert.large i{font-size:var(--icon-size-md)}}@media(max-width:400px){.alert{padding:var(--spacing-xs) var(--spacing-sm);gap:var(--spacing-xs)}.alert-content{gap:var(--spacing-xs)}.alert-message{font-size:var(--font-size-xs)}.alert i{font-size:var(--icon-size-xs)}.alert.small{padding:var(--spacing-2xs) var(--spacing-xs)}.alert.medium{padding:var(--spacing-xs) var(--spacing-sm)}.alert.large{padding:var(--spacing-sm) var(--spacing-md)}.alert.large i{font-size:var(--icon-size-sm)}.alert-dismiss{padding:var(--spacing-2xs)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
62
62
|
}
|
|
63
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
63
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PshAlertComponent, decorators: [{
|
|
64
64
|
type: Component,
|
|
65
65
|
args: [{ selector: 'psh-alert', imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"alert\"\n [class.small]=\"size() === 'small'\"\n [class.large]=\"size() === 'large'\"\n [class]=\"type()\"\n [attr.role]=\"computedRole()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-live]=\"computedAriaLive()\"\n [attr.data-state]=\"state()\"\n>\n <div class=\"alert-content\" [class.icon-right]=\"iconPosition() === 'right'\">\n @if (showIcon()) {\n <i class=\"ph ph-{{ getIcon() }}\" aria-hidden=\"true\"></i>\n }\n <div class=\"alert-message\">\n <ng-content>{{ content() }}</ng-content>\n </div>\n </div>\n \n @if (closable()) {\n <button\n type=\"button\"\n class=\"alert-dismiss\"\n (click)=\"handleClose()\"\n [attr.aria-label]=\"dismissLabel()\"\n >\n <i class=\"ph ph-x\" aria-hidden=\"true\"></i>\n </button>\n }\n</div>", styles: [".alert{--alert-animation-duration: var(--animation-duration-fast);--alert-animation-distance: var(--animation-distance-sm);--alert-icon-size: var(--icon-size-md);--alert-icon-size-sm: var(--icon-size-sm);--alert-icon-size-lg: var(--icon-size-lg);--alert-dismiss-hover-bg: rgba(0, 0, 0, .1);display:flex;align-items:flex-start;justify-content:space-between;gap:var(--spacing-md);padding:var(--spacing-md) var(--spacing-lg);border-radius:var(--border-radius);border:var(--border-width-1) solid transparent;animation:slideIn var(--alert-animation-duration) var(--animation-easing-default)}.alert-content{display:flex;align-items:flex-start;flex-direction:row;gap:var(--spacing-md);flex:1}.alert-content.icon-right{flex-direction:row-reverse}.alert i{font-size:var(--alert-icon-size);flex-shrink:0}.alert-message{color:inherit;font-size:var(--font-size-base);line-height:var(--line-height-relaxed);word-break:break-word;overflow-wrap:break-word}.alert.info{background:var(--alert-info-bg);border-color:var(--alert-info-border-color);color:var(--alert-info-text-color)}.alert.success{background:rgba(var(--success-color-rgb),.1);border-color:var(--success-color);color:var(--success-color)}.alert.warning{background:rgba(var(--warning-color-rgb),.1);border-color:var(--warning-color);color:var(--warning-color)}.alert.danger{background:rgba(var(--danger-color-rgb),.1);border-color:var(--danger-color);color:var(--danger-color)}.alert.small{padding:var(--spacing-sm) var(--spacing-md);font-size:var(--font-size-sm)}.alert.small i{font-size:var(--alert-icon-size-sm)}.alert.large{padding:var(--spacing-lg) var(--spacing-xl);font-size:var(--font-size-lg)}.alert.large i{font-size:var(--alert-icon-size-lg)}.alert-dismiss{background:transparent;border:none;color:inherit;padding:var(--spacing-xs);cursor:pointer;opacity:.7;transition:opacity .2s ease;border-radius:var(--border-radius);display:flex;align-items:center;justify-content:center;z-index:2}.alert-dismiss:hover{opacity:1;background:var(--alert-dismiss-hover-bg)}@keyframes slideIn{0%{opacity:0;transform:translateY(calc(-1 * var(--alert-animation-distance)))}to{opacity:1;transform:translateY(0)}}@media(max-width:768px){.alert{padding:var(--spacing-sm) var(--spacing-md);gap:var(--spacing-sm)}.alert-content{gap:var(--spacing-sm)}.alert-message{font-size:var(--font-size-sm);word-break:break-word;overflow-wrap:break-word}.alert i{font-size:var(--icon-size-sm)}.alert.large{padding:var(--spacing-md) var(--spacing-lg)}.alert.large i{font-size:var(--icon-size-md)}}@media(max-width:400px){.alert{padding:var(--spacing-xs) var(--spacing-sm);gap:var(--spacing-xs)}.alert-content{gap:var(--spacing-xs)}.alert-message{font-size:var(--font-size-xs)}.alert i{font-size:var(--icon-size-xs)}.alert.small{padding:var(--spacing-2xs) var(--spacing-xs)}.alert.medium{padding:var(--spacing-xs) var(--spacing-sm)}.alert.large{padding:var(--spacing-sm) var(--spacing-md)}.alert.large i{font-size:var(--icon-size-sm)}.alert-dismiss{padding:var(--spacing-2xs)}}\n"] }]
|
|
66
66
|
}], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], iconPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconPosition", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], dismissLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissLabel", required: false }] }], ariaLive: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLive", required: false }] }], content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
|
|
@@ -104,10 +104,10 @@ class PshAvatarComponent {
|
|
|
104
104
|
}, ...(ngDevMode ? [{ debugName: "statusColor" }] : /* istanbul ignore next */ []));
|
|
105
105
|
this.state = computed(() => this.status() || 'default', ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
|
|
106
106
|
}
|
|
107
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
108
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
107
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PshAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
108
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: PshAvatarComponent, isStandalone: true, selector: "psh-avatar", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, initials: { classPropertyName: "initials", publicName: "initials", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { size: "sizeChange", shape: "shapeChange", src: "srcChange", alt: "altChange" }, ngImport: i0, template: "<div \n class=\"avatar\"\n [class.circle]=\"shape() === 'circle'\"\n [class.square]=\"shape() === 'square'\"\n [class.small]=\"size() === 'small'\"\n [class.large]=\"size() === 'large'\"\n [class.xlarge]=\"size() === 'xlarge'\"\n role=\"img\"\n [attr.aria-label]=\"computedAriaLabel()\"\n [attr.data-state]=\"state()\"\n>\n @if (hasImage()) {\n <img [src]=\"src()\" [attr.alt]=\"alt()\" class=\"avatar-image\" />\n } @else if (hasInitials()) {\n <span class=\"avatar-initials\">{{ initials() }}</span>\n } @else if (hasIcon()) {\n <i class=\"ph ph-{{ icon() }}\" aria-hidden=\"true\"></i>\n }\n\n @if (status()) {\n <span \n class=\"avatar-status\"\n [class]=\"status()\"\n [style.background-color]=\"statusColor()\"\n [attr.aria-label]=\"status()\"\n ></span>\n }\n</div>", styles: [".avatar{--avatar-size-sm: var(--size-8);--avatar-size-md: var(--size-10);--avatar-size-lg: var(--size-12);--avatar-size-xl: var(--size-16);--avatar-icon-size-sm: var(--icon-size-sm);--avatar-icon-size-md: var(--icon-size-md);--avatar-icon-size-lg: var(--icon-size-lg);--avatar-icon-size-xl: var(--icon-size-xl);--avatar-status-size-sm: var(--size-2-5);--avatar-status-size-md: var(--size-3);--avatar-status-size-lg: var(--size-3-5);--avatar-status-size-xl: var(--size-4);--avatar-status-border: var(--border-width-2);--avatar-status-offset-sm: calc(-1 * var(--size-px));--avatar-status-offset-md: calc(-1 * var(--border-width-2));--avatar-status-offset-xl: calc(-1 * var(--size-1));position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--avatar-size-md);height:var(--avatar-size-md);background:var(--surface-ground);color:var(--text-color);font-weight:var(--font-weight-medium)}.avatar:not(:has(img)){background:rgba(var(--primary-color-rgb),.1);color:var(--primary-color);overflow:hidden}.avatar:not(:has(img)):before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(45deg,transparent,rgba(var(--primary-color-rgb),.05));z-index:1}.avatar i,.avatar-initials{position:relative;z-index:2}.avatar.circle{border-radius:50%}.avatar.square{border-radius:var(--border-radius)}.avatar.small{width:var(--avatar-size-sm);height:var(--avatar-size-sm);font-size:var(--font-size-sm)}.avatar.small i{font-size:var(--avatar-icon-size-sm)}.avatar.large{width:var(--avatar-size-lg);height:var(--avatar-size-lg);font-size:var(--font-size-lg)}.avatar.large i{font-size:var(--avatar-icon-size-lg)}.avatar.xlarge{width:var(--avatar-size-xl);height:var(--avatar-size-xl);font-size:var(--font-size-xl)}.avatar.xlarge i{font-size:var(--avatar-icon-size-xl)}.avatar-image{width:100%;height:100%;object-fit:cover;border-radius:inherit;overflow:hidden}.avatar-initials{line-height:1;text-transform:uppercase;border-radius:inherit}.avatar-status{position:absolute;bottom:var(--avatar-status-offset-md);right:var(--avatar-status-offset-md);width:var(--avatar-status-size-md);height:var(--avatar-status-size-md);border:var(--avatar-status-border) solid var(--surface-card);border-radius:var(--radius-full);z-index:3}.avatar.small .avatar-status{width:var(--avatar-status-size-sm);height:var(--avatar-status-size-sm);bottom:var(--avatar-status-offset-sm);right:var(--avatar-status-offset-sm)}.avatar.large .avatar-status{width:var(--avatar-status-size-lg);height:var(--avatar-status-size-lg);bottom:var(--avatar-status-offset-md);right:var(--avatar-status-offset-md)}.avatar.xlarge .avatar-status{width:var(--avatar-status-size-xl);height:var(--avatar-status-size-xl);bottom:var(--avatar-status-offset-xl);right:var(--avatar-status-offset-xl)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
109
109
|
}
|
|
110
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
110
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", 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: "21.2.
|
|
202
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
201
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PshBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
202
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: PshBadgeComponent, isStandalone: true, selector: "psh-badge", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, displayType: { classPropertyName: "displayType", publicName: "displayType", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, showZero: { classPropertyName: "showZero", publicName: "showZero", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, overlap: { classPropertyName: "overlap", publicName: "overlap", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, formatter: { classPropertyName: "formatter", publicName: "formatter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { badgeClick: "badgeClick", valueChange: "valueChange" }, ngImport: i0, template: "<div\n class=\"badge\"\n [class.primary]=\"variant() === 'primary'\"\n [class.secondary]=\"variant() === 'secondary'\"\n [class.success]=\"variant() === 'success'\"\n [class.warning]=\"variant() === 'warning'\"\n [class.danger]=\"variant() === 'danger'\"\n [class.info]=\"variant() === 'info'\"\n [class.disabled]=\"variant() === 'disabled'\"\n [class.dot]=\"displayType() === 'dot'\"\n [class.counter]=\"displayType() === 'counter'\"\n [class.overlap]=\"overlap()\"\n [class.small]=\"size() === 'small'\"\n [class.medium]=\"size() === 'medium'\"\n [class.large]=\"size() === 'large'\"\n [class.top-right]=\"position() === 'top-right'\"\n [class.top-left]=\"position() === 'top-left'\"\n [class.bottom-right]=\"position() === 'bottom-right'\"\n [class.bottom-left]=\"position() === 'bottom-left'\"\n [attr.role]=\"computedRole()\"\n [attr.aria-label]=\"computedAriaLabel()\"\n [attr.data-state]=\"state()\"\n (click)=\"onBadgeClick()\"\n>\n @if (displayType() === 'text') {\n <ng-content></ng-content>\n } @else if (displayType() === 'counter') {\n {{ displayValue() }}\n }\n</div>\n", styles: [".badge{--badge-width: var(--size-5);--badge-height: var(--size-5);--badge-width-sm: var(--size-4);--badge-height-sm: var(--size-4);--badge-width-lg: var(--size-6);--badge-height-lg: var(--size-6);--badge-dot-shadow: 0 0 0 var(--border-width-2);display:inline-flex;align-items:center;justify-content:center;min-width:var(--badge-width);min-height:var(--badge-height);padding:var(--spacing-xs);border-radius:var(--radius-base);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);line-height:1;white-space:nowrap;transition:all var(--animation-duration-fast) var(--animation-easing-default);min-width:max-content}.badge.primary{background:var(--primary-gradient);color:var(--text-on-primary)}.badge.secondary{background-color:var(--secondary-color);color:var(--text-on-secondary)}.badge.success{background-color:var(--success-color);color:var(--text-on-success)}.badge.warning{background-color:var(--warning-color);color:var(--text-on-warning)}.badge.danger{background-color:var(--danger-color);color:var(--text-on-danger)}.badge.info{background-color:var(--blue-500);color:var(--text-on-primary)}.badge.disabled{background-color:var(--surface-400);color:var(--surface-0);cursor:not-allowed;opacity:var(--opacity-disabled)}.badge.medium{min-width:var(--badge-width);min-height:var(--badge-height);font-size:var(--font-size-xs);padding:var(--spacing-xs)}.badge.small{min-width:var(--badge-width-sm);min-height:var(--badge-height-sm);font-size:var(--font-size-xs);padding:var(--spacing-xxs)}.badge.large{min-width:var(--badge-width-lg);min-height:var(--badge-height-lg);font-size:var(--font-size-sm);padding:var(--spacing-sm)}.badge.overlap{position:absolute;transform:translate(50%,-50%)}.badge.top-right{top:0;right:0}.badge.top-left{top:0;left:0;transform:translate(-50%,-50%)}.badge.bottom-right{bottom:0;right:0;transform:translate(50%,50%)}.badge.bottom-left{bottom:0;left:0;transform:translate(-50%,50%)}.badge.dot{border-radius:var(--radius-full);box-shadow:var(--badge-dot-shadow) var(--surface-card)}.badge.counter{min-width:var(--size-5);min-height:var(--size-5);padding:0 var(--spacing-xs)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
203
203
|
}
|
|
204
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
204
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", 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,15 +276,15 @@ class PshButtonComponent {
|
|
|
276
276
|
this.disabledClick.emit(event);
|
|
277
277
|
}
|
|
278
278
|
}
|
|
279
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
280
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
279
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PshButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
280
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", 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:before{content:\"\";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transition:left .5s ease;pointer-events:none;z-index:0}button:hover:not(.disabled):not(.loading):before{left:100%}@media(prefers-reduced-motion:reduce){button:before{transition:none}}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.text{background:transparent;padding:0 var(--spacing-lg);color:currentColor;border-radius:var(--border-radius)}button.text .button-content{color:inherit}button.text:hover:not(.disabled):not(.loading){background:var(--surface-hover)}button.text.icon-only{min-width:unset;width:var(--btn-height-md);padding:0}button.text.icon-only.small{width:var(--btn-height-sm)}button.text.icon-only.large{width:var(--btn-height-lg)}button.primary{color:var(--primary-color)}button.secondary{color:var(--secondary-color)}button.success{color:var(--success-color)}button.warning{color:var(--warning-color)}button.danger{color:var(--danger-color)}button:focus-visible{outline:none;box-shadow:0 0 0 .1875rem rgba(var(--primary-color-rgb),.2)}button:active:not(.disabled):not(.loading){transform:translateY(.0625rem)}button.disabled{opacity:.6;cursor:not-allowed;pointer-events:none}button.loading{cursor:wait;pointer-events:none}.loader{width:var(--icon-size-sm);height:var(--icon-size-sm);border:var(--border-width-2) solid currentColor;border-bottom-color:transparent;border-radius:50%;animation:rotate 1s linear infinite}button i{font-size:1.2em;display:flex;align-items:center;justify-content:center}button.small i{font-size:1.1em}button.large i{font-size:1.3em}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
281
281
|
}
|
|
282
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
282
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", 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()',
|
|
286
286
|
'(click)': 'onHostClick($event)',
|
|
287
|
-
}, 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.
|
|
287
|
+
}, 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:before{content:\"\";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transition:left .5s ease;pointer-events:none;z-index:0}button:hover:not(.disabled):not(.loading):before{left:100%}@media(prefers-reduced-motion:reduce){button:before{transition:none}}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.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"] }]
|
|
288
288
|
}], propDecorators: { appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }, { type: i0.Output, args: ["fullWidthChange"] }], iconPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconPosition", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], loadingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingText", required: false }] }], disabledText: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledText", required: false }] }], iconOnlyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOnlyText", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }], disabledClick: [{ type: i0.Output, args: ["disabledClick"] }] } });
|
|
289
289
|
|
|
290
290
|
/**
|
|
@@ -434,10 +434,10 @@ class PshCardComponent {
|
|
|
434
434
|
}
|
|
435
435
|
}
|
|
436
436
|
}
|
|
437
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
438
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", type: PshCardComponent, isStandalone: true, selector: "psh-card", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, hoverable: { classPropertyName: "hoverable", publicName: "hoverable", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, colorVariant: { classPropertyName: "colorVariant", publicName: "colorVariant", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, showHeaderDivider: { classPropertyName: "showHeaderDivider", publicName: "showHeaderDivider", isSignal: true, isRequired: false, transformFunction: null }, showFooterDivider: { classPropertyName: "showFooterDivider", publicName: "showFooterDivider", isSignal: true, isRequired: false, transformFunction: null }, showActionsDivider: { classPropertyName: "showActionsDivider", publicName: "showActionsDivider", isSignal: true, isRequired: false, transformFunction: null }, actionsAlignment: { classPropertyName: "actionsAlignment", publicName: "actionsAlignment", isSignal: true, isRequired: false, transformFunction: null }, bodyPadding: { classPropertyName: "bodyPadding", publicName: "bodyPadding", isSignal: true, isRequired: false, transformFunction: null }, cssClass: { classPropertyName: "cssClass", publicName: "cssClass", isSignal: true, isRequired: false, transformFunction: null }, customStyle: { classPropertyName: "customStyle", publicName: "customStyle", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { variant: "variantChange", hoverable: "hoverableChange", interactive: "interactiveChange", clicked: "clicked" }, host: { styleAttribute: "display: block;" }, ngImport: i0, template: "<div\n [class]=\"computedClasses()\"\n [style]=\"computedStyles()\"\n (click)=\"handleClick($event)\"\n (keydown)=\"handleKeydown($event)\"\n role=\"article\"\n [attr.tabindex]=\"interactive() && !disabled() ? 0 : null\"\n [attr.aria-disabled]=\"disabled() ? 'true' : null\"\n [attr.aria-busy]=\"loading() ? 'true' : null\"\n>\n <!-- Header avec titre et description int\u00E9gr\u00E9s -->\n @if (hasHeader()) {\n <div class=\"card-header\" [class.has-divider]=\"showHeaderDivider()\">\n <!-- Slot pour ic\u00F4ne/avatar avant le titre -->\n <ng-content select=\"[card-header-icon]\"></ng-content>\n\n <!-- Zone de titre et description -->\n @if (title() || description()) {\n <div class=\"card-header-content\">\n @if (title()) {\n <h3 class=\"card-title\">{{ title() }}</h3>\n }\n @if (description()) {\n <p class=\"card-description\">{{ description() }}</p>\n }\n </div>\n }\n\n <!-- Slot pour contenu personnalis\u00E9 du header -->\n <ng-content select=\"[card-header-content]\"></ng-content>\n\n <!-- Slot pour badge/tag ou actions secondaires -->\n <ng-content select=\"[card-header-extra]\"></ng-content>\n </div>\n }\n\n <!-- Body avec contenu principal -->\n <div class=\"card-body\" [class.no-padding]=\"!bodyPadding()\">\n <!-- \u00C9tat de chargement -->\n @if (loading()) {\n <div class=\"card-loading\">\n <div class=\"skeleton-line\"></div>\n <div class=\"skeleton-line\"></div>\n <div class=\"skeleton-line short\"></div>\n </div>\n } @else {\n <!-- Contenu principal (slot par d\u00E9faut) -->\n <ng-content></ng-content>\n }\n </div>\n\n <!-- Footer optionnel pour m\u00E9tadonn\u00E9es -->\n <div class=\"card-footer\" [class.has-divider]=\"showFooterDivider()\">\n <ng-content select=\"[card-footer]\"></ng-content>\n </div>\n\n <!-- Actions -->\n <div class=\"card-actions\" [class]=\"actionsClasses()\" [class.has-divider]=\"showActionsDivider()\">\n <ng-content select=\"[card-actions]\"></ng-content>\n </div>\n</div>\n", styles: [".card{background:var(--surface-card);border-radius:var(--border-radius-lg, .75rem);overflow:hidden;transition:all .2s ease;width:100%;display:flex;flex-direction:column;position:relative}.card.variant-elevated{box-shadow:0 1px 3px #0000001a,0 1px 2px #0000000f}.card.variant-elevated.hoverable:hover{box-shadow:0 4px 6px #0000001a,0 2px 4px #0000000f}.card.variant-outlined{border:1px solid var(--surface-border)}.card.variant-default{background:var(--surface-section)}.card.color-info{border-left:4px solid var(--blue-500)}.card.color-info .card-header{background:rgba(var(--blue-500-rgb, 59, 130, 246),.05)}.card.color-success{border-left:4px solid var(--green-500)}.card.color-success .card-header{background:rgba(var(--green-500-rgb, 34, 197, 94),.05)}.card.color-warning{border-left:4px solid var(--orange-500)}.card.color-warning .card-header{background:rgba(var(--orange-500-rgb, 249, 115, 22),.05)}.card.color-danger{border-left:4px solid var(--red-500)}.card.color-danger .card-header{background:rgba(var(--red-500-rgb, 239, 68, 68),.05)}.card.density-compact{--card-header-padding: var(--size-3) var(--size-4);--card-body-padding: var(--size-4);--card-footer-padding: var(--size-3) var(--size-4);--card-actions-padding: var(--size-3) var(--size-4);--card-header-gap: var(--spacing-sm);--card-body-gap: var(--size-3)}.card.density-normal{--card-header-padding: var(--size-4) var(--size-5);--card-body-padding: var(--size-6);--card-footer-padding: var(--size-4) var(--size-5);--card-actions-padding: var(--size-4) var(--size-5);--card-header-gap: var(--size-3);--card-body-gap: var(--size-4)}.card.density-spacious{--card-header-padding: var(--size-6) var(--size-7);--card-body-padding: var(--size-8);--card-footer-padding: var(--size-5) var(--size-7);--card-actions-padding: var(--size-5) var(--size-7);--card-header-gap: var(--size-4);--card-body-gap: var(--size-5)}.card-header{padding:var(--card-header-padding);display:flex;align-items:flex-start;gap:var(--card-header-gap);background:var(--surface-ground);position:relative}.card-header.has-divider{border-bottom:1px solid var(--surface-border)}.card-header-content{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--spacing-xs)}.card-title{font-size:var(--font-size-lg, 1.125rem);font-weight:600;line-height:1.4;color:var(--text-color);margin:0;overflow:hidden;text-overflow:ellipsis}.card-description{font-size:var(--font-size-sm, .875rem);line-height:1.5;color:var(--text-color-secondary);margin:0}[card-header-icon]{flex-shrink:0;display:flex;align-items:center;justify-content:center}[card-header-content]{flex:1;min-width:0}[card-header-extra]{flex-shrink:0;display:flex;align-items:center;gap:var(--spacing-sm)}.card-body{padding:var(--card-body-padding);flex:1;display:flex;flex-direction:column;gap:var(--card-body-gap);color:var(--text-color);line-height:1.6;overflow:hidden}.card-body.no-padding{padding:0}.card-body>*{margin:0}.card-body img{max-width:100%;height:auto;border-radius:var(--border-radius)}.card-body table{width:100%;max-width:100%;overflow-x:auto;display:block}.card-body pre{max-width:100%;overflow-x:auto;padding:var(--spacing-sm);background:var(--surface-ground);border-radius:var(--border-radius);font-size:var(--font-size-sm)}.card-body video,.card-body iframe{max-width:100%;height:auto}.card-footer{padding:var(--card-footer-padding);background:var(--surface-ground);display:flex;align-items:center;gap:var(--size-4);flex-wrap:wrap;font-size:var(--font-size-sm, .875rem);color:var(--text-color-secondary)}.card-footer:empty{display:none}.card-footer.has-divider{border-top:1px solid var(--surface-border)}.card-actions{padding:var(--card-actions-padding);background:var(--surface-ground);display:flex;align-items:center;gap:var(--spacing-md);justify-content:flex-end}.card-actions>*{flex-shrink:0;display:flex;gap:var(--spacing-sm)}.card-actions:empty{display:none}.card-actions.has-divider{border-top:1px solid var(--surface-border)}.card-actions.actions-align-left{justify-content:flex-start}.card-actions.actions-align-center{justify-content:center}.card-actions.actions-align-right{justify-content:flex-end}.card-actions.actions-align-space-between{justify-content:space-between}.card-actions.mobile-full-width-buttons{flex-direction:column;gap:var(--spacing-sm)}.card-actions.mobile-full-width-buttons>*{display:flex;flex-direction:column;width:100%;gap:var(--spacing-sm)}.card.hoverable:hover{transform:translateY(-2px)}.card.interactive{cursor:pointer;-webkit-user-select:none;user-select:none}.card.interactive:focus{outline:none;box-shadow:0 0 0 3px rgba(var(--primary-500-rgb, 59, 130, 246),.2)}.card.interactive:focus:not(:focus-visible){box-shadow:none}.card.interactive:active{transform:translateY(0)}.card.disabled{opacity:.6;pointer-events:none;cursor:not-allowed}.card.loading{pointer-events:none}.card-loading{display:flex;flex-direction:column;gap:var(--size-3);animation:pulse 1.5s ease-in-out infinite}.skeleton-line{height:var(--size-4);background:linear-gradient(90deg,var(--surface-border) 25%,var(--surface-hover) 50%,var(--surface-border) 75%);background-size:200% 100%;animation:shimmer 1.5s ease-in-out infinite;border-radius:var(--spacing-xs)}.skeleton-line.short{width:60%}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}@media(max-width:1024px){.card.density-spacious{--card-header-padding: var(--size-5) var(--size-6);--card-body-padding: var(--size-7);--card-footer-padding: var(--size-4-5) var(--size-6);--card-actions-padding: var(--size-4-5) var(--size-6)}}@media(max-width:768px){.card.density-compact{--card-header-padding: var(--size-2-5) var(--size-3);--card-body-padding: var(--size-3);--card-footer-padding: var(--size-2-5) var(--size-3);--card-actions-padding: var(--size-2-5) var(--size-3)}.card.density-normal{--card-header-padding: var(--size-3) var(--size-4);--card-body-padding: var(--size-4);--card-footer-padding: var(--size-3) var(--size-4);--card-actions-padding: var(--size-3) var(--size-4)}.card.density-spacious{--card-header-padding: var(--size-4) var(--size-5);--card-body-padding: var(--size-5);--card-footer-padding: var(--size-4) var(--size-5);--card-actions-padding: var(--size-4) var(--size-5)}.card-title{font-size:clamp(.9375rem,2vw,1rem)}.card-description{font-size:var(--font-size-xs)}.card-footer{font-size:var(--font-size-xs);gap:var(--size-3)}}@media(max-width:640px){.card-actions{flex-direction:column;gap:var(--spacing-md)}.card-actions>*{flex-direction:column;width:100%}}@media(max-width:480px){.card.density-compact{--card-header-padding: var(--spacing-sm) var(--size-3);--card-body-padding: var(--size-3);--card-footer-padding: var(--spacing-sm) var(--size-3);--card-actions-padding: var(--spacing-sm) var(--size-3)}.card.density-normal{--card-header-padding: var(--size-2-5) var(--size-3);--card-body-padding: var(--size-3);--card-footer-padding: var(--size-2-5) var(--size-3);--card-actions-padding: var(--size-2-5) var(--size-3)}.card.density-spacious{--card-header-padding: var(--size-3) var(--size-4);--card-body-padding: var(--size-4);--card-footer-padding: var(--size-3) var(--size-4);--card-actions-padding: var(--size-3) var(--size-4)}.card-header{flex-wrap:wrap;gap:var(--spacing-xs)}.card-title{font-size:clamp(.875rem,3vw,.9375rem);line-height:1.3}.card-description{font-size:var(--font-size-xs);line-height:1.4}[card-header-icon],[card-header-extra]{width:100%;justify-content:flex-start}.card-footer{flex-direction:column;align-items:flex-start;gap:var(--spacing-sm)}.card-actions{flex-direction:column;gap:var(--spacing-sm)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
437
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PshCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
438
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: PshCardComponent, isStandalone: true, selector: "psh-card", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, hoverable: { classPropertyName: "hoverable", publicName: "hoverable", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, colorVariant: { classPropertyName: "colorVariant", publicName: "colorVariant", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, showHeaderDivider: { classPropertyName: "showHeaderDivider", publicName: "showHeaderDivider", isSignal: true, isRequired: false, transformFunction: null }, showFooterDivider: { classPropertyName: "showFooterDivider", publicName: "showFooterDivider", isSignal: true, isRequired: false, transformFunction: null }, showActionsDivider: { classPropertyName: "showActionsDivider", publicName: "showActionsDivider", isSignal: true, isRequired: false, transformFunction: null }, actionsAlignment: { classPropertyName: "actionsAlignment", publicName: "actionsAlignment", isSignal: true, isRequired: false, transformFunction: null }, bodyPadding: { classPropertyName: "bodyPadding", publicName: "bodyPadding", isSignal: true, isRequired: false, transformFunction: null }, cssClass: { classPropertyName: "cssClass", publicName: "cssClass", isSignal: true, isRequired: false, transformFunction: null }, customStyle: { classPropertyName: "customStyle", publicName: "customStyle", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { variant: "variantChange", hoverable: "hoverableChange", interactive: "interactiveChange", clicked: "clicked" }, host: { styleAttribute: "display: block;" }, ngImport: i0, template: "<div\n [class]=\"computedClasses()\"\n [style]=\"computedStyles()\"\n (click)=\"handleClick($event)\"\n (keydown)=\"handleKeydown($event)\"\n role=\"article\"\n [attr.tabindex]=\"interactive() && !disabled() ? 0 : null\"\n [attr.aria-disabled]=\"disabled() ? 'true' : null\"\n [attr.aria-busy]=\"loading() ? 'true' : null\"\n>\n <!-- Header avec titre et description int\u00E9gr\u00E9s -->\n @if (hasHeader()) {\n <div class=\"card-header\" [class.has-divider]=\"showHeaderDivider()\">\n <!-- Slot pour ic\u00F4ne/avatar avant le titre -->\n <ng-content select=\"[card-header-icon]\"></ng-content>\n\n <!-- Zone de titre et description -->\n @if (title() || description()) {\n <div class=\"card-header-content\">\n @if (title()) {\n <h3 class=\"card-title\">{{ title() }}</h3>\n }\n @if (description()) {\n <p class=\"card-description\">{{ description() }}</p>\n }\n </div>\n }\n\n <!-- Slot pour contenu personnalis\u00E9 du header -->\n <ng-content select=\"[card-header-content]\"></ng-content>\n\n <!-- Slot pour badge/tag ou actions secondaires -->\n <ng-content select=\"[card-header-extra]\"></ng-content>\n </div>\n }\n\n <!-- Body avec contenu principal -->\n <div class=\"card-body\" [class.no-padding]=\"!bodyPadding()\">\n <!-- \u00C9tat de chargement -->\n @if (loading()) {\n <div class=\"card-loading\">\n <div class=\"skeleton-line\"></div>\n <div class=\"skeleton-line\"></div>\n <div class=\"skeleton-line short\"></div>\n </div>\n } @else {\n <!-- Contenu principal (slot par d\u00E9faut) -->\n <ng-content></ng-content>\n }\n </div>\n\n <!-- Footer optionnel pour m\u00E9tadonn\u00E9es -->\n <div class=\"card-footer\" [class.has-divider]=\"showFooterDivider()\">\n <ng-content select=\"[card-footer]\"></ng-content>\n </div>\n\n <!-- Actions -->\n <div class=\"card-actions\" [class]=\"actionsClasses()\" [class.has-divider]=\"showActionsDivider()\">\n <ng-content select=\"[card-actions]\"></ng-content>\n </div>\n</div>\n", styles: [".card{background:var(--surface-card);border-radius:var(--border-radius-lg, .75rem);overflow:hidden;transition:all .2s ease;width:100%;display:flex;flex-direction:column;position:relative}.card.variant-elevated{box-shadow:0 1px 3px #0000001a,0 1px 2px #0000000f}.card.variant-elevated.hoverable:hover{box-shadow:0 4px 6px #0000001a,0 2px 4px #0000000f}.card.variant-outlined{border:1px solid var(--surface-border)}.card.variant-default{background:var(--surface-section)}.card.color-info{border-left:4px solid var(--blue-500)}.card.color-info .card-header{background:rgba(var(--blue-500-rgb, 59, 130, 246),.05)}.card.color-success{border-left:4px solid var(--green-500)}.card.color-success .card-header{background:rgba(var(--green-500-rgb, 34, 197, 94),.05)}.card.color-warning{border-left:4px solid var(--orange-500)}.card.color-warning .card-header{background:rgba(var(--orange-500-rgb, 249, 115, 22),.05)}.card.color-danger{border-left:4px solid var(--red-500)}.card.color-danger .card-header{background:rgba(var(--red-500-rgb, 239, 68, 68),.05)}.card.density-compact{--card-header-padding: var(--size-3) var(--size-4);--card-body-padding: var(--size-4);--card-footer-padding: var(--size-3) var(--size-4);--card-actions-padding: var(--size-3) var(--size-4);--card-header-gap: var(--spacing-sm);--card-body-gap: var(--size-3)}.card.density-normal{--card-header-padding: var(--size-4) var(--size-5);--card-body-padding: var(--size-6);--card-footer-padding: var(--size-4) var(--size-5);--card-actions-padding: var(--size-4) var(--size-5);--card-header-gap: var(--size-3);--card-body-gap: var(--size-4)}.card.density-spacious{--card-header-padding: var(--size-6) var(--size-7);--card-body-padding: var(--size-8);--card-footer-padding: var(--size-5) var(--size-7);--card-actions-padding: var(--size-5) var(--size-7);--card-header-gap: var(--size-4);--card-body-gap: var(--size-5)}.card-header{padding:var(--card-header-padding);display:flex;align-items:flex-start;gap:var(--card-header-gap);background:var(--surface-ground);position:relative}.card-header.has-divider{border-bottom:1px solid var(--surface-border)}.card-header-content{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--spacing-xs)}.card-title{font-size:var(--font-size-lg, 1.125rem);font-weight:600;line-height:1.4;color:var(--text-color);margin:0;overflow:hidden;text-overflow:ellipsis}.card-description{font-size:var(--font-size-sm, .875rem);line-height:1.5;color:var(--text-color-secondary);margin:0}[card-header-icon]{flex-shrink:0;display:flex;align-items:center;justify-content:center}[card-header-content]{flex:1;min-width:0}[card-header-extra]{flex-shrink:0;display:flex;align-items:center;gap:var(--spacing-sm)}.card-body{padding:var(--card-body-padding);flex:1;display:flex;flex-direction:column;gap:var(--card-body-gap);color:var(--text-color);line-height:1.6;overflow:hidden}.card-body.no-padding{padding:0}.card-body>*{margin:0}.card-body img{max-width:100%;height:auto;border-radius:var(--border-radius)}.card-body table{width:100%;max-width:100%;overflow-x:auto;display:block}.card-body pre{max-width:100%;overflow-x:auto;padding:var(--spacing-sm);background:var(--surface-ground);border-radius:var(--border-radius);font-size:var(--font-size-sm)}.card-body video,.card-body iframe{max-width:100%;height:auto}.card-footer{padding:var(--card-footer-padding);background:var(--surface-ground);display:flex;align-items:center;gap:var(--size-4);flex-wrap:wrap;font-size:var(--font-size-sm, .875rem);color:var(--text-color-secondary)}.card-footer:empty{display:none}.card-footer.has-divider{border-top:1px solid var(--surface-border)}.card-actions{padding:var(--card-actions-padding);background:var(--surface-ground);display:flex;align-items:center;gap:var(--spacing-md);justify-content:flex-end}.card-actions>*{flex-shrink:0;display:flex;gap:var(--spacing-sm)}.card-actions:empty{display:none}.card-actions.has-divider{border-top:1px solid var(--surface-border)}.card-actions.actions-align-left{justify-content:flex-start}.card-actions.actions-align-center{justify-content:center}.card-actions.actions-align-right{justify-content:flex-end}.card-actions.actions-align-space-between{justify-content:space-between}.card-actions.mobile-full-width-buttons{flex-direction:column;gap:var(--spacing-sm)}.card-actions.mobile-full-width-buttons>*{display:flex;flex-direction:column;width:100%;gap:var(--spacing-sm)}.card.hoverable:hover{transform:translateY(-2px)}.card.interactive{cursor:pointer;-webkit-user-select:none;user-select:none}.card.interactive:focus{outline:none;box-shadow:0 0 0 3px rgba(var(--primary-500-rgb, 59, 130, 246),.2)}.card.interactive:focus:not(:focus-visible){box-shadow:none}.card.interactive:active{transform:translateY(0)}.card.disabled{opacity:.6;pointer-events:none;cursor:not-allowed}.card.loading{pointer-events:none}.card-loading{display:flex;flex-direction:column;gap:var(--size-3);animation:pulse 1.5s ease-in-out infinite}.skeleton-line{height:var(--size-4);background:linear-gradient(90deg,var(--surface-border) 25%,var(--surface-hover) 50%,var(--surface-border) 75%);background-size:200% 100%;animation:shimmer 1.5s ease-in-out infinite;border-radius:var(--spacing-xs)}.skeleton-line.short{width:60%}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}@media(max-width:1024px){.card.density-spacious{--card-header-padding: var(--size-5) var(--size-6);--card-body-padding: var(--size-7);--card-footer-padding: var(--size-4-5) var(--size-6);--card-actions-padding: var(--size-4-5) var(--size-6)}}@media(max-width:768px){.card.density-compact{--card-header-padding: var(--size-2-5) var(--size-3);--card-body-padding: var(--size-3);--card-footer-padding: var(--size-2-5) var(--size-3);--card-actions-padding: var(--size-2-5) var(--size-3)}.card.density-normal{--card-header-padding: var(--size-3) var(--size-4);--card-body-padding: var(--size-4);--card-footer-padding: var(--size-3) var(--size-4);--card-actions-padding: var(--size-3) var(--size-4)}.card.density-spacious{--card-header-padding: var(--size-4) var(--size-5);--card-body-padding: var(--size-5);--card-footer-padding: var(--size-4) var(--size-5);--card-actions-padding: var(--size-4) var(--size-5)}.card-title{font-size:clamp(.9375rem,2vw,1rem)}.card-description{font-size:var(--font-size-xs)}.card-footer{font-size:var(--font-size-xs);gap:var(--size-3)}}@media(max-width:640px){.card-actions{flex-direction:column;gap:var(--spacing-md)}.card-actions>*{flex-direction:column;width:100%}}@media(max-width:480px){.card.density-compact{--card-header-padding: var(--spacing-sm) var(--size-3);--card-body-padding: var(--size-3);--card-footer-padding: var(--spacing-sm) var(--size-3);--card-actions-padding: var(--spacing-sm) var(--size-3)}.card.density-normal{--card-header-padding: var(--size-2-5) var(--size-3);--card-body-padding: var(--size-3);--card-footer-padding: var(--size-2-5) var(--size-3);--card-actions-padding: var(--size-2-5) var(--size-3)}.card.density-spacious{--card-header-padding: var(--size-3) var(--size-4);--card-body-padding: var(--size-4);--card-footer-padding: var(--size-3) var(--size-4);--card-actions-padding: var(--size-3) var(--size-4)}.card-header{flex-wrap:wrap;gap:var(--spacing-xs)}.card-title{font-size:clamp(.875rem,3vw,.9375rem);line-height:1.3}.card-description{font-size:var(--font-size-xs);line-height:1.4}[card-header-icon],[card-header-extra]{width:100%;justify-content:flex-start}.card-footer{flex-direction:column;align-items:flex-start;gap:var(--spacing-sm)}.card-actions{flex-direction:column;gap:var(--spacing-sm)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
439
439
|
}
|
|
440
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
440
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PshCardComponent, decorators: [{
|
|
441
441
|
type: Component,
|
|
442
442
|
args: [{ selector: 'psh-card', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
443
443
|
style: 'display: block;',
|
|
@@ -514,10 +514,10 @@ class PshTagComponent {
|
|
|
514
514
|
this.closed.emit();
|
|
515
515
|
}
|
|
516
516
|
}
|
|
517
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
518
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
517
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PshTagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
518
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: PshTagComponent, isStandalone: true, selector: "psh-tag", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked", closed: "closed" }, ngImport: i0, template: "<div\n class=\"tag\"\n [class.primary]=\"variant() === 'primary'\"\n [class.secondary]=\"variant() === 'secondary'\"\n [class.success]=\"variant() === 'success'\"\n [class.warning]=\"variant() === 'warning'\"\n [class.danger]=\"variant() === 'danger'\"\n [class.small]=\"size() === 'small'\"\n [class.large]=\"size() === 'large'\"\n [class.disabled]=\"disabled()\"\n [attr.role]=\"computedRole()\"\n [attr.tabindex]=\"computedTabIndex()\"\n [attr.aria-label]=\"computedAriaLabel()\"\n [attr.aria-disabled]=\"disabled() || null\"\n [attr.data-state]=\"state()\"\n (click)=\"handleClick($event)\"\n (keydown)=\"handleKeydown($event)\"\n>\n @if (icon()) {\n <i class=\"ph ph-{{ icon() }}\" aria-hidden=\"true\"></i>\n }\n <span class=\"tag-content\">\n <ng-content>{{ content() }}</ng-content>\n </span>\n @if (closable()) {\n <button\n type=\"button\"\n class=\"tag-close\"\n (click)=\"handleClose($event)\"\n [attr.aria-label]=\"closeLabel()\"\n [disabled]=\"disabled()\"\n >\n <i class=\"ph ph-x\" aria-hidden=\"true\"></i>\n </button>\n }\n</div>", styles: [".tag{--tag-padding-y: var(--spacing-xs);--tag-padding-x: var(--spacing-sm);--tag-font-size: var(--font-size-sm);--tag-icon-size: var(--icon-size-sm);--tag-close-padding: var(--spacing-xxs);--tag-close-opacity: .7;--tag-close-opacity-hover: 1;--tag-close-hover-bg: rgba(0, 0, 0, .1);--tag-transition: all var(--animation-duration-normal) var(--animation-easing-default);display:inline-flex;align-items:center;gap:var(--spacing-xs);padding:var(--tag-padding-y) var(--tag-padding-x);border-radius:var(--border-radius);font-size:var(--tag-font-size);font-weight:var(--font-weight-medium);line-height:var(--line-height-tight);cursor:default;transition:var(--tag-transition);-webkit-user-select:none;user-select:none}.tag[role=button]{cursor:pointer}.tag[role=button]:focus-visible{outline:var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);outline-offset:var(--focus-outline-offset)}.tag i{font-size:var(--tag-icon-size)}.tag-content{display:inline-block;vertical-align:middle}.tag-close{display:inline-flex;align-items:center;justify-content:center;padding:var(--tag-close-padding);border:none;background:transparent;color:inherit;cursor:pointer;opacity:var(--tag-close-opacity);transition:opacity var(--animation-duration-normal) var(--animation-easing-default);border-radius:var(--border-radius);margin-left:var(--spacing-xs)}.tag-close:hover:not(:disabled){opacity:var(--tag-close-opacity-hover);background:var(--tag-close-hover-bg)}.tag-close:focus-visible{outline:none;box-shadow:0 0 0 var(--focus-ring-width) var(--focus-ring-color)}.tag.primary{background:var(--primary-gradient);color:var(--text-on-primary)}.tag.secondary{background:var(--secondary-color);color:var(--text-on-secondary)}.tag.success{background:var(--success-color);color:var(--text-on-success)}.tag.warning{background:var(--warning-color);color:var(--text-on-warning)}.tag.danger{background:var(--danger-color);color:var(--text-on-danger)}.tag.small{--tag-padding-y: calc(var(--spacing-xs) * .5);--tag-padding-x: var(--spacing-xs);--tag-font-size: var(--font-size-xs);--tag-icon-size: var(--icon-size-xs)}.tag.large{--tag-padding-y: var(--spacing-sm);--tag-padding-x: var(--spacing-md);--tag-font-size: var(--font-size-base);--tag-icon-size: var(--icon-size-md)}.tag.disabled{opacity:var(--opacity-disabled);cursor:not-allowed}.tag.disabled .tag-close{cursor:not-allowed}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
519
519
|
}
|
|
520
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
520
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PshTagComponent, decorators: [{
|
|
521
521
|
type: Component,
|
|
522
522
|
args: [{ selector: 'psh-tag', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"tag\"\n [class.primary]=\"variant() === 'primary'\"\n [class.secondary]=\"variant() === 'secondary'\"\n [class.success]=\"variant() === 'success'\"\n [class.warning]=\"variant() === 'warning'\"\n [class.danger]=\"variant() === 'danger'\"\n [class.small]=\"size() === 'small'\"\n [class.large]=\"size() === 'large'\"\n [class.disabled]=\"disabled()\"\n [attr.role]=\"computedRole()\"\n [attr.tabindex]=\"computedTabIndex()\"\n [attr.aria-label]=\"computedAriaLabel()\"\n [attr.aria-disabled]=\"disabled() || null\"\n [attr.data-state]=\"state()\"\n (click)=\"handleClick($event)\"\n (keydown)=\"handleKeydown($event)\"\n>\n @if (icon()) {\n <i class=\"ph ph-{{ icon() }}\" aria-hidden=\"true\"></i>\n }\n <span class=\"tag-content\">\n <ng-content>{{ content() }}</ng-content>\n </span>\n @if (closable()) {\n <button\n type=\"button\"\n class=\"tag-close\"\n (click)=\"handleClose($event)\"\n [attr.aria-label]=\"closeLabel()\"\n [disabled]=\"disabled()\"\n >\n <i class=\"ph ph-x\" aria-hidden=\"true\"></i>\n </button>\n }\n</div>", styles: [".tag{--tag-padding-y: var(--spacing-xs);--tag-padding-x: var(--spacing-sm);--tag-font-size: var(--font-size-sm);--tag-icon-size: var(--icon-size-sm);--tag-close-padding: var(--spacing-xxs);--tag-close-opacity: .7;--tag-close-opacity-hover: 1;--tag-close-hover-bg: rgba(0, 0, 0, .1);--tag-transition: all var(--animation-duration-normal) var(--animation-easing-default);display:inline-flex;align-items:center;gap:var(--spacing-xs);padding:var(--tag-padding-y) var(--tag-padding-x);border-radius:var(--border-radius);font-size:var(--tag-font-size);font-weight:var(--font-weight-medium);line-height:var(--line-height-tight);cursor:default;transition:var(--tag-transition);-webkit-user-select:none;user-select:none}.tag[role=button]{cursor:pointer}.tag[role=button]:focus-visible{outline:var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);outline-offset:var(--focus-outline-offset)}.tag i{font-size:var(--tag-icon-size)}.tag-content{display:inline-block;vertical-align:middle}.tag-close{display:inline-flex;align-items:center;justify-content:center;padding:var(--tag-close-padding);border:none;background:transparent;color:inherit;cursor:pointer;opacity:var(--tag-close-opacity);transition:opacity var(--animation-duration-normal) var(--animation-easing-default);border-radius:var(--border-radius);margin-left:var(--spacing-xs)}.tag-close:hover:not(:disabled){opacity:var(--tag-close-opacity-hover);background:var(--tag-close-hover-bg)}.tag-close:focus-visible{outline:none;box-shadow:0 0 0 var(--focus-ring-width) var(--focus-ring-color)}.tag.primary{background:var(--primary-gradient);color:var(--text-on-primary)}.tag.secondary{background:var(--secondary-color);color:var(--text-on-secondary)}.tag.success{background:var(--success-color);color:var(--text-on-success)}.tag.warning{background:var(--warning-color);color:var(--text-on-warning)}.tag.danger{background:var(--danger-color);color:var(--text-on-danger)}.tag.small{--tag-padding-y: calc(var(--spacing-xs) * .5);--tag-padding-x: var(--spacing-xs);--tag-font-size: var(--font-size-xs);--tag-icon-size: var(--icon-size-xs)}.tag.large{--tag-padding-y: var(--spacing-sm);--tag-padding-x: var(--spacing-md);--tag-font-size: var(--font-size-base);--tag-icon-size: var(--icon-size-md)}.tag.disabled{opacity:var(--opacity-disabled);cursor:not-allowed}.tag.disabled .tag-close{cursor:not-allowed}\n"] }]
|
|
523
523
|
}], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], closeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeLabel", required: false }] }], content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
|
|
@@ -658,10 +658,10 @@ class PshStatCardComponent {
|
|
|
658
658
|
}
|
|
659
659
|
}
|
|
660
660
|
}
|
|
661
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
662
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
661
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PshStatCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
662
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: PshStatCardComponent, isStandalone: true, selector: "psh-stat-card", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, tagVariant: { classPropertyName: "tagVariant", publicName: "tagVariant", isSignal: true, isRequired: false, transformFunction: null }, tagLabel: { classPropertyName: "tagLabel", publicName: "tagLabel", isSignal: true, isRequired: false, transformFunction: null }, iconBackground: { classPropertyName: "iconBackground", publicName: "iconBackground", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, hoverable: { classPropertyName: "hoverable", publicName: "hoverable", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, cssClass: { classPropertyName: "cssClass", publicName: "cssClass", isSignal: true, isRequired: false, transformFunction: null }, customStyle: { classPropertyName: "customStyle", publicName: "customStyle", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, rowDirection: { classPropertyName: "rowDirection", publicName: "rowDirection", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<div\n [class]=\"computedClasses()\"\n [ngStyle]=\"computedStyles()\"\n (click)=\"handleClick($event)\"\n (keydown)=\"handleKeydown($event)\"\n [attr.tabindex]=\"interactive() && !disabled() ? 0 : null\"\n [attr.aria-label]=\"computedAriaLabel()\"\n [attr.aria-disabled]=\"disabled() ? 'true' : null\"\n [attr.aria-busy]=\"loading() ? 'true' : null\"\n [attr.role]=\"interactive() ? 'button' : 'article'\"\n>\n @if (loading()) {\n <div class=\"stat-loading\">\n <div class=\"skeleton-circle\"></div>\n <div class=\"skeleton-content\">\n <div class=\"skeleton-line\"></div>\n <div class=\"skeleton-line short\"></div>\n </div>\n </div>\n } @else {\n @if (useRowDirection()) {\n <div class=\"stat-card-body\">\n @if (hasIcon()) {\n <div class=\"stat-icon\" [style]=\"iconStyle()\">\n <i class=\"ph ph-{{ displayIcon }}\" aria-hidden=\"true\"></i>\n </div>\n }\n\n <div class=\"stat-content\">\n <h3 class=\"stat-value\">{{ displayValue }}</h3>\n <p class=\"stat-description\">{{ displayDescription }}</p>\n\n @if (hasTag()) {\n <psh-tag [variant]=\"displayTagVariant!\">\n {{ displayTagLabel }}\n </psh-tag>\n }\n </div>\n </div>\n } @else {\n @if (hasIcon()) {\n <div class=\"stat-icon\" [style]=\"iconStyle()\">\n <i class=\"ph ph-{{ displayIcon }}\" aria-hidden=\"true\"></i>\n </div>\n }\n\n <div class=\"stat-content\">\n <h3 class=\"stat-value\">{{ displayValue }}</h3>\n <p class=\"stat-description\">{{ displayDescription }}</p>\n\n @if (hasTag()) {\n <psh-tag [variant]=\"displayTagVariant!\">\n {{ displayTagLabel }}\n </psh-tag>\n }\n </div>\n }\n }\n</div>\n", styles: [".stat-card{background:var(--surface-card);border-radius:var(--border-radius-lg, .75rem);overflow:hidden;transition:all .2s ease;width:100%;display:flex;position:relative;padding:var(--spacing-lg)}.stat-card.variant-elevated{box-shadow:0 2px 8px #00000014,0 1px 4px #0000000f}.stat-card.variant-elevated.hoverable:hover{box-shadow:0 4px 12px #0000001f,0 2px 6px #00000014}.stat-card.variant-outlined{border:2px solid var(--surface-border);box-shadow:none}.stat-card.variant-default{background:var(--surface-ground);box-shadow:none}.stat-card.stat-card--horizontal{flex-direction:row;align-items:center;gap:var(--spacing-md);min-height:var(--size-32)}.stat-card.stat-card--vertical{flex-direction:column;align-items:center;text-align:center;min-height:auto}.stat-card.stat-card--row{display:block}.stat-card.hoverable:hover{transform:translateY(-2px)}.stat-card.interactive{cursor:pointer;-webkit-user-select:none;user-select:none}.stat-card.interactive:focus{outline:none;box-shadow:0 0 0 3px rgba(var(--primary-500-rgb, 59, 130, 246),.2)}.stat-card.interactive:focus:not(:focus-visible){box-shadow:none}.stat-card.interactive:active{transform:translateY(0)}.stat-card.disabled{opacity:.6;pointer-events:none;cursor:not-allowed}.stat-card.loading{pointer-events:none}.stat-card-body{display:flex;flex-direction:row;align-items:center;width:100%;gap:var(--spacing-md)}.stat-icon{width:var(--size-16);min-width:var(--size-16);height:var(--size-16);display:flex;align-items:center;justify-content:center;border-radius:var(--radius-lg);background:var(--surface-200);flex-shrink:0}.stat-card--horizontal .stat-icon{margin:0}.stat-card--vertical .stat-icon{margin:0 auto var(--spacing-md) auto}.stat-card--row .stat-card-body .stat-icon{margin:0}.stat-icon i{font-size:var(--icon-size-xl);color:var(--surface-0)}.stat-card--horizontal .stat-content{flex:1;min-width:0}.stat-card--vertical .stat-content{width:100%;text-align:center}.stat-card--row .stat-card-body .stat-content{flex:1;min-width:0}.stat-content{display:flex;flex-direction:column;gap:var(--spacing-sm)}.stat-content psh-tag{margin-top:var(--spacing-xs)}.stat-value{font-size:var(--font-size-2xl);font-weight:var(--font-weight-semibold);color:var(--text-color);margin:0;line-height:var(--line-height-tight)}.stat-description{color:var(--text-color-secondary);margin:0;font-size:var(--font-size-sm);line-height:var(--line-height-relaxed)}.stat-loading{display:flex;align-items:center;gap:var(--spacing-md);width:100%;animation:pulse 1.5s ease-in-out infinite}.skeleton-circle{width:var(--size-16);height:var(--size-16);border-radius:var(--radius-lg);background:linear-gradient(90deg,var(--surface-border) 25%,var(--surface-hover) 50%,var(--surface-border) 75%);background-size:200% 100%;animation:shimmer 1.5s ease-in-out infinite;flex-shrink:0}.skeleton-content{flex:1;display:flex;flex-direction:column;gap:var(--spacing-xs)}.skeleton-line{height:var(--size-4);background:linear-gradient(90deg,var(--surface-border) 25%,var(--surface-hover) 50%,var(--surface-border) 75%);background-size:200% 100%;animation:shimmer 1.5s ease-in-out infinite;border-radius:var(--spacing-xs)}.skeleton-line.short{width:60%}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}@media(max-width:768px){.stat-card.stat-card--horizontal{min-height:var(--size-28)}.stat-card{padding:var(--spacing-md)}.stat-card.stat-card--horizontal{gap:var(--spacing-sm)}.stat-icon,.skeleton-circle{width:var(--size-14);min-width:var(--size-14);height:var(--size-14)}.stat-card-body{gap:var(--spacing-sm)}.stat-icon i{font-size:var(--icon-size-lg)}.stat-value{font-size:clamp(var(--font-size-lg),3vw + .5rem,var(--font-size-xl))}.stat-description{font-size:var(--font-size-xs)}}@media(max-width:480px){.stat-card.stat-card--horizontal:not(.stat-card--row){flex-direction:column;align-items:center;text-align:center;min-height:auto;gap:var(--spacing-md)}.stat-card.stat-card--row{padding:var(--spacing-md)}.stat-card--horizontal:not(.stat-card--row) .stat-icon{margin:0 auto var(--spacing-sm) auto}.stat-icon,.skeleton-circle{width:var(--size-12);min-width:var(--size-12);height:var(--size-12)}.stat-icon i{font-size:var(--icon-size-md)}.stat-card--horizontal:not(.stat-card--row) .stat-content{width:100%;text-align:center}.stat-value{font-size:clamp(var(--font-size-base),4vw,var(--font-size-lg))}.stat-description{font-size:var(--font-size-xs)}.stat-loading{flex-direction:column;align-items:center}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: PshTagComponent, selector: "psh-tag", inputs: ["variant", "size", "closable", "disabled", "interactive", "icon", "closeLabel", "content", "ariaLabel"], outputs: ["clicked", "closed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
663
663
|
}
|
|
664
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
664
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PshStatCardComponent, decorators: [{
|
|
665
665
|
type: Component,
|
|
666
666
|
args: [{ selector: 'psh-stat-card', imports: [CommonModule, PshTagComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n [class]=\"computedClasses()\"\n [ngStyle]=\"computedStyles()\"\n (click)=\"handleClick($event)\"\n (keydown)=\"handleKeydown($event)\"\n [attr.tabindex]=\"interactive() && !disabled() ? 0 : null\"\n [attr.aria-label]=\"computedAriaLabel()\"\n [attr.aria-disabled]=\"disabled() ? 'true' : null\"\n [attr.aria-busy]=\"loading() ? 'true' : null\"\n [attr.role]=\"interactive() ? 'button' : 'article'\"\n>\n @if (loading()) {\n <div class=\"stat-loading\">\n <div class=\"skeleton-circle\"></div>\n <div class=\"skeleton-content\">\n <div class=\"skeleton-line\"></div>\n <div class=\"skeleton-line short\"></div>\n </div>\n </div>\n } @else {\n @if (useRowDirection()) {\n <div class=\"stat-card-body\">\n @if (hasIcon()) {\n <div class=\"stat-icon\" [style]=\"iconStyle()\">\n <i class=\"ph ph-{{ displayIcon }}\" aria-hidden=\"true\"></i>\n </div>\n }\n\n <div class=\"stat-content\">\n <h3 class=\"stat-value\">{{ displayValue }}</h3>\n <p class=\"stat-description\">{{ displayDescription }}</p>\n\n @if (hasTag()) {\n <psh-tag [variant]=\"displayTagVariant!\">\n {{ displayTagLabel }}\n </psh-tag>\n }\n </div>\n </div>\n } @else {\n @if (hasIcon()) {\n <div class=\"stat-icon\" [style]=\"iconStyle()\">\n <i class=\"ph ph-{{ displayIcon }}\" aria-hidden=\"true\"></i>\n </div>\n }\n\n <div class=\"stat-content\">\n <h3 class=\"stat-value\">{{ displayValue }}</h3>\n <p class=\"stat-description\">{{ displayDescription }}</p>\n\n @if (hasTag()) {\n <psh-tag [variant]=\"displayTagVariant!\">\n {{ displayTagLabel }}\n </psh-tag>\n }\n </div>\n }\n }\n</div>\n", styles: [".stat-card{background:var(--surface-card);border-radius:var(--border-radius-lg, .75rem);overflow:hidden;transition:all .2s ease;width:100%;display:flex;position:relative;padding:var(--spacing-lg)}.stat-card.variant-elevated{box-shadow:0 2px 8px #00000014,0 1px 4px #0000000f}.stat-card.variant-elevated.hoverable:hover{box-shadow:0 4px 12px #0000001f,0 2px 6px #00000014}.stat-card.variant-outlined{border:2px solid var(--surface-border);box-shadow:none}.stat-card.variant-default{background:var(--surface-ground);box-shadow:none}.stat-card.stat-card--horizontal{flex-direction:row;align-items:center;gap:var(--spacing-md);min-height:var(--size-32)}.stat-card.stat-card--vertical{flex-direction:column;align-items:center;text-align:center;min-height:auto}.stat-card.stat-card--row{display:block}.stat-card.hoverable:hover{transform:translateY(-2px)}.stat-card.interactive{cursor:pointer;-webkit-user-select:none;user-select:none}.stat-card.interactive:focus{outline:none;box-shadow:0 0 0 3px rgba(var(--primary-500-rgb, 59, 130, 246),.2)}.stat-card.interactive:focus:not(:focus-visible){box-shadow:none}.stat-card.interactive:active{transform:translateY(0)}.stat-card.disabled{opacity:.6;pointer-events:none;cursor:not-allowed}.stat-card.loading{pointer-events:none}.stat-card-body{display:flex;flex-direction:row;align-items:center;width:100%;gap:var(--spacing-md)}.stat-icon{width:var(--size-16);min-width:var(--size-16);height:var(--size-16);display:flex;align-items:center;justify-content:center;border-radius:var(--radius-lg);background:var(--surface-200);flex-shrink:0}.stat-card--horizontal .stat-icon{margin:0}.stat-card--vertical .stat-icon{margin:0 auto var(--spacing-md) auto}.stat-card--row .stat-card-body .stat-icon{margin:0}.stat-icon i{font-size:var(--icon-size-xl);color:var(--surface-0)}.stat-card--horizontal .stat-content{flex:1;min-width:0}.stat-card--vertical .stat-content{width:100%;text-align:center}.stat-card--row .stat-card-body .stat-content{flex:1;min-width:0}.stat-content{display:flex;flex-direction:column;gap:var(--spacing-sm)}.stat-content psh-tag{margin-top:var(--spacing-xs)}.stat-value{font-size:var(--font-size-2xl);font-weight:var(--font-weight-semibold);color:var(--text-color);margin:0;line-height:var(--line-height-tight)}.stat-description{color:var(--text-color-secondary);margin:0;font-size:var(--font-size-sm);line-height:var(--line-height-relaxed)}.stat-loading{display:flex;align-items:center;gap:var(--spacing-md);width:100%;animation:pulse 1.5s ease-in-out infinite}.skeleton-circle{width:var(--size-16);height:var(--size-16);border-radius:var(--radius-lg);background:linear-gradient(90deg,var(--surface-border) 25%,var(--surface-hover) 50%,var(--surface-border) 75%);background-size:200% 100%;animation:shimmer 1.5s ease-in-out infinite;flex-shrink:0}.skeleton-content{flex:1;display:flex;flex-direction:column;gap:var(--spacing-xs)}.skeleton-line{height:var(--size-4);background:linear-gradient(90deg,var(--surface-border) 25%,var(--surface-hover) 50%,var(--surface-border) 75%);background-size:200% 100%;animation:shimmer 1.5s ease-in-out infinite;border-radius:var(--spacing-xs)}.skeleton-line.short{width:60%}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}@media(max-width:768px){.stat-card.stat-card--horizontal{min-height:var(--size-28)}.stat-card{padding:var(--spacing-md)}.stat-card.stat-card--horizontal{gap:var(--spacing-sm)}.stat-icon,.skeleton-circle{width:var(--size-14);min-width:var(--size-14);height:var(--size-14)}.stat-card-body{gap:var(--spacing-sm)}.stat-icon i{font-size:var(--icon-size-lg)}.stat-value{font-size:clamp(var(--font-size-lg),3vw + .5rem,var(--font-size-xl))}.stat-description{font-size:var(--font-size-xs)}}@media(max-width:480px){.stat-card.stat-card--horizontal:not(.stat-card--row){flex-direction:column;align-items:center;text-align:center;min-height:auto;gap:var(--spacing-md)}.stat-card.stat-card--row{padding:var(--spacing-md)}.stat-card--horizontal:not(.stat-card--row) .stat-icon{margin:0 auto var(--spacing-sm) auto}.stat-icon,.skeleton-circle{width:var(--size-12);min-width:var(--size-12);height:var(--size-12)}.stat-icon i{font-size:var(--icon-size-md)}.stat-card--horizontal:not(.stat-card--row) .stat-content{width:100%;text-align:center}.stat-value{font-size:clamp(var(--font-size-base),4vw,var(--font-size-lg))}.stat-description{font-size:var(--font-size-xs)}.stat-loading{flex-direction:column;align-items:center}}\n"] }]
|
|
667
667
|
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], tagVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "tagVariant", required: false }] }], tagLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "tagLabel", required: false }] }], iconBackground: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconBackground", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], hoverable: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoverable", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], cssClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "cssClass", required: false }] }], customStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "customStyle", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], rowDirection: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowDirection", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
|
|
@@ -766,10 +766,10 @@ class PshHorizontalCardComponent {
|
|
|
766
766
|
}
|
|
767
767
|
}
|
|
768
768
|
}
|
|
769
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
770
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
769
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PshHorizontalCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
770
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: PshHorizontalCardComponent, isStandalone: true, selector: "psh-horizontal-card", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, hoverable: { classPropertyName: "hoverable", publicName: "hoverable", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, cssClass: { classPropertyName: "cssClass", publicName: "cssClass", isSignal: true, isRequired: false, transformFunction: null }, customStyle: { classPropertyName: "customStyle", publicName: "customStyle", isSignal: true, isRequired: false, transformFunction: null }, sideWidth: { classPropertyName: "sideWidth", publicName: "sideWidth", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, sidePadding: { classPropertyName: "sidePadding", publicName: "sidePadding", isSignal: true, isRequired: false, transformFunction: null }, contentPadding: { classPropertyName: "contentPadding", publicName: "contentPadding", isSignal: true, isRequired: false, transformFunction: null }, mobileHeight: { classPropertyName: "mobileHeight", publicName: "mobileHeight", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<div\n [class]=\"computedClasses()\"\n [ngStyle]=\"computedStyles()\"\n (click)=\"handleClick($event)\"\n (keydown)=\"handleKeydown($event)\"\n role=\"article\"\n [attr.tabindex]=\"interactive() && !disabled() ? 0 : null\"\n [attr.aria-disabled]=\"disabled() ? 'true' : null\"\n [attr.aria-busy]=\"loading() ? 'true' : null\"\n>\n <!-- Contenu lat\u00E9ral -->\n <div class=\"horizontal-side\">\n @if (loading()) {\n <div class=\"horizontal-skeleton\"></div>\n } @else {\n <ng-content select=\"[horizontal-side]\"></ng-content>\n }\n </div>\n\n <!-- Contenu principal -->\n <div class=\"horizontal-content\">\n @if (loading()) {\n <div class=\"horizontal-loading\">\n <div class=\"skeleton-line\"></div>\n <div class=\"skeleton-line\"></div>\n <div class=\"skeleton-line short\"></div>\n </div>\n } @else {\n <!-- Header optionnel -->\n <ng-content select=\"[horizontal-header]\"></ng-content>\n\n <!-- Contenu principal -->\n <ng-content></ng-content>\n\n <!-- Actions optionnelles -->\n <ng-content select=\"[horizontal-actions]\"></ng-content>\n }\n </div>\n</div>", styles: [".horizontal-card{background:var(--surface-card);border-radius:var(--border-radius-lg, .75rem);overflow:hidden;transition:all .2s ease;width:100%;display:flex;flex-direction:row;align-items:stretch;gap:var(--horizontal-gap, var(--spacing-md));position:relative}.horizontal-card.variant-elevated{box-shadow:0 1px 3px #0000001a,0 1px 2px #0000000f}.horizontal-card.variant-elevated.hoverable:hover{box-shadow:0 4px 6px #0000001a,0 2px 4px #0000000f}.horizontal-card.variant-outlined{border:1px solid var(--surface-border)}.horizontal-card.variant-default{background:var(--surface-section)}.horizontal-card.hoverable:hover{transform:translateY(-2px)}.horizontal-card.interactive{cursor:pointer;-webkit-user-select:none;user-select:none}.horizontal-card.interactive:focus{outline:none;box-shadow:0 0 0 3px rgba(var(--primary-500-rgb, 59, 130, 246),.2)}.horizontal-card.interactive:focus:not(:focus-visible){box-shadow:none}.horizontal-card.interactive:active{transform:translateY(0)}.horizontal-card.disabled{opacity:.6;pointer-events:none;cursor:not-allowed}.horizontal-card.loading{pointer-events:none}.horizontal-side{display:flex;justify-content:center;background:var(--surface-ground);overflow:hidden;border:none;width:var(--horizontal-side-width, var(--size-48));flex-shrink:0;position:relative}.horizontal-side img{width:100%;height:100%;object-fit:cover;display:block}.horizontal-skeleton{width:100%;height:100%;background:linear-gradient(90deg,var(--surface-border) 25%,var(--surface-hover) 50%,var(--surface-border) 75%);background-size:200% 100%;animation:shimmer 1.5s ease-in-out infinite}.horizontal-content{flex:1;min-width:0;display:flex;flex-direction:column;padding:var(--horizontal-content-padding, var(--spacing-md));gap:var(--spacing-sm)}[horizontal-header]{margin:0;font-size:var(--font-size-lg, 1.125rem);font-weight:600;line-height:1.4;color:var(--text-color)}[horizontal-actions]{margin-top:auto;display:flex;gap:var(--spacing-sm);align-items:center}.horizontal-loading{display:flex;flex-direction:column;gap:var(--spacing-sm);animation:pulse 1.5s ease-in-out infinite}.skeleton-line{height:var(--size-4);background:linear-gradient(90deg,var(--surface-border) 25%,var(--surface-hover) 50%,var(--surface-border) 75%);background-size:200% 100%;animation:shimmer 1.5s ease-in-out infinite;border-radius:var(--spacing-xs)}.skeleton-line.short{width:60%}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}@media(max-width:48em){.horizontal-card{flex-direction:column}.horizontal-side{width:100%;height:var(--horizontal-mobile-height, var(--size-48));min-height:var(--size-44)}.horizontal-content{padding:var(--spacing-sm)}[horizontal-actions]{flex-wrap:wrap}}@media(max-width:30em){.horizontal-side{height:auto;min-height:var(--size-36);padding:var(--spacing-sm)}.horizontal-content{padding:var(--spacing-xs)}[horizontal-header]{font-size:var(--font-size-base, 1rem)}[horizontal-actions]{flex-direction:column}[horizontal-actions]>*{width:100%;display:flex}[horizontal-actions]>* button{width:100%;min-width:100%;flex:1}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
771
771
|
}
|
|
772
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
772
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PshHorizontalCardComponent, decorators: [{
|
|
773
773
|
type: Component,
|
|
774
774
|
args: [{ selector: 'psh-horizontal-card', imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n [class]=\"computedClasses()\"\n [ngStyle]=\"computedStyles()\"\n (click)=\"handleClick($event)\"\n (keydown)=\"handleKeydown($event)\"\n role=\"article\"\n [attr.tabindex]=\"interactive() && !disabled() ? 0 : null\"\n [attr.aria-disabled]=\"disabled() ? 'true' : null\"\n [attr.aria-busy]=\"loading() ? 'true' : null\"\n>\n <!-- Contenu lat\u00E9ral -->\n <div class=\"horizontal-side\">\n @if (loading()) {\n <div class=\"horizontal-skeleton\"></div>\n } @else {\n <ng-content select=\"[horizontal-side]\"></ng-content>\n }\n </div>\n\n <!-- Contenu principal -->\n <div class=\"horizontal-content\">\n @if (loading()) {\n <div class=\"horizontal-loading\">\n <div class=\"skeleton-line\"></div>\n <div class=\"skeleton-line\"></div>\n <div class=\"skeleton-line short\"></div>\n </div>\n } @else {\n <!-- Header optionnel -->\n <ng-content select=\"[horizontal-header]\"></ng-content>\n\n <!-- Contenu principal -->\n <ng-content></ng-content>\n\n <!-- Actions optionnelles -->\n <ng-content select=\"[horizontal-actions]\"></ng-content>\n }\n </div>\n</div>", styles: [".horizontal-card{background:var(--surface-card);border-radius:var(--border-radius-lg, .75rem);overflow:hidden;transition:all .2s ease;width:100%;display:flex;flex-direction:row;align-items:stretch;gap:var(--horizontal-gap, var(--spacing-md));position:relative}.horizontal-card.variant-elevated{box-shadow:0 1px 3px #0000001a,0 1px 2px #0000000f}.horizontal-card.variant-elevated.hoverable:hover{box-shadow:0 4px 6px #0000001a,0 2px 4px #0000000f}.horizontal-card.variant-outlined{border:1px solid var(--surface-border)}.horizontal-card.variant-default{background:var(--surface-section)}.horizontal-card.hoverable:hover{transform:translateY(-2px)}.horizontal-card.interactive{cursor:pointer;-webkit-user-select:none;user-select:none}.horizontal-card.interactive:focus{outline:none;box-shadow:0 0 0 3px rgba(var(--primary-500-rgb, 59, 130, 246),.2)}.horizontal-card.interactive:focus:not(:focus-visible){box-shadow:none}.horizontal-card.interactive:active{transform:translateY(0)}.horizontal-card.disabled{opacity:.6;pointer-events:none;cursor:not-allowed}.horizontal-card.loading{pointer-events:none}.horizontal-side{display:flex;justify-content:center;background:var(--surface-ground);overflow:hidden;border:none;width:var(--horizontal-side-width, var(--size-48));flex-shrink:0;position:relative}.horizontal-side img{width:100%;height:100%;object-fit:cover;display:block}.horizontal-skeleton{width:100%;height:100%;background:linear-gradient(90deg,var(--surface-border) 25%,var(--surface-hover) 50%,var(--surface-border) 75%);background-size:200% 100%;animation:shimmer 1.5s ease-in-out infinite}.horizontal-content{flex:1;min-width:0;display:flex;flex-direction:column;padding:var(--horizontal-content-padding, var(--spacing-md));gap:var(--spacing-sm)}[horizontal-header]{margin:0;font-size:var(--font-size-lg, 1.125rem);font-weight:600;line-height:1.4;color:var(--text-color)}[horizontal-actions]{margin-top:auto;display:flex;gap:var(--spacing-sm);align-items:center}.horizontal-loading{display:flex;flex-direction:column;gap:var(--spacing-sm);animation:pulse 1.5s ease-in-out infinite}.skeleton-line{height:var(--size-4);background:linear-gradient(90deg,var(--surface-border) 25%,var(--surface-hover) 50%,var(--surface-border) 75%);background-size:200% 100%;animation:shimmer 1.5s ease-in-out infinite;border-radius:var(--spacing-xs)}.skeleton-line.short{width:60%}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}@media(max-width:48em){.horizontal-card{flex-direction:column}.horizontal-side{width:100%;height:var(--horizontal-mobile-height, var(--size-48));min-height:var(--size-44)}.horizontal-content{padding:var(--spacing-sm)}[horizontal-actions]{flex-wrap:wrap}}@media(max-width:30em){.horizontal-side{height:auto;min-height:var(--size-36);padding:var(--spacing-sm)}.horizontal-content{padding:var(--spacing-xs)}[horizontal-header]{font-size:var(--font-size-base, 1rem)}[horizontal-actions]{flex-direction:column}[horizontal-actions]>*{width:100%;display:flex}[horizontal-actions]>* button{width:100%;min-width:100%;flex:1}}\n"] }]
|
|
775
775
|
}], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], hoverable: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoverable", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], cssClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "cssClass", required: false }] }], customStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "customStyle", required: false }] }], sideWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "sideWidth", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], sidePadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidePadding", required: false }] }], contentPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentPadding", required: false }] }], mobileHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileHeight", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
|
|
@@ -934,10 +934,10 @@ class PshInfoCardComponent {
|
|
|
934
934
|
}
|
|
935
935
|
}
|
|
936
936
|
}
|
|
937
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
938
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", type: PshInfoCardComponent, isStandalone: true, selector: "psh-info-card", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, cssClass: { classPropertyName: "cssClass", publicName: "cssClass", isSignal: true, isRequired: false, transformFunction: null }, customStyle: { classPropertyName: "customStyle", publicName: "customStyle", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, hoverable: { classPropertyName: "hoverable", publicName: "hoverable", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, autoFullWidthOnMobile: { classPropertyName: "autoFullWidthOnMobile", publicName: "autoFullWidthOnMobile", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { styleAttribute: "display: block; height: 100%;" }, ngImport: i0, template: "<div\n [class]=\"computedClasses()\"\n [ngStyle]=\"computedStyles()\"\n (click)=\"handleClick($event)\"\n (keydown)=\"handleKeydown($event)\"\n role=\"region\"\n [attr.tabindex]=\"interactive() && !disabled() ? 0 : null\"\n [attr.aria-label]=\"computedAriaLabel()\"\n [attr.aria-disabled]=\"disabled() ? 'true' : null\"\n [attr.aria-busy]=\"loading() ? 'true' : null\"\n>\n @if (title() || hasHeaderActions()) {\n <div class=\"info-card-header\">\n @if (title()) {\n <h3 class=\"info-card-title\">\n @if (icon()) {\n <i\n class=\"ph {{ titleIcon() }}\"\n aria-hidden=\"true\"\n [attr.data-icon]=\"icon()\"\n ></i>\n }\n {{ title() }}\n </h3>\n }\n <div class=\"info-card-header-actions\">\n <ng-content select=\"[card-header-actions]\"></ng-content>\n </div>\n </div>\n }\n\n <div class=\"info-card-body\">\n @if (loading()) {\n <div class=\"info-card-loading\">\n <div class=\"skeleton-line\"></div>\n <div class=\"skeleton-line\"></div>\n <div class=\"skeleton-line short\"></div>\n </div>\n } @else {\n <div\n class=\"info-card-content\"\n role=\"list\"\n >\n @if (shouldShowEmptyState()) {\n <div\n class=\"info-card-empty-state\"\n role=\"status\"\n aria-live=\"polite\"\n [attr.data-testid]=\"'info-card-empty-state'\"\n >\n {{ getEmptyStateMessage() }}\n </div>\n } @else {\n @for (item of data(); track $index) {\n <div\n class=\"info-card-row\"\n role=\"listitem\"\n [attr.data-index]=\"$index\"\n [class]=\"item.customClass || ''\"\n >\n <div\n class=\"info-card-label\"\n [style.width]=\"item.labelWidth || options().labelWidth\"\n [attr.data-label]=\"item.label\"\n >\n {{ item.label }}\n </div>\n <div\n class=\"info-card-value\"\n [style.width]=\"item.valueWidth || options().valueWidth\"\n [attr.data-value]=\"item.value\"\n [title]=\"item.value?.toString() || ''\"\n >\n {{ item.value ?? 'Non renseign\u00E9' }}\n </div>\n </div>\n }\n }\n </div>\n }\n </div>\n\n <div class=\"info-card-actions\" [class]=\"getActionsClasses()\">\n <ng-content select=\"[card-actions]\"></ng-content>\n </div>\n</div>\n", styles: [".info-card{background:var(--surface-card);border-radius:var(--border-radius-lg, .75rem);overflow:hidden;transition:all .2s ease;width:100%;height:100%;display:flex;flex-direction:column;position:relative}.info-card.variant-elevated{box-shadow:0 1px 3px #0000001a,0 1px 2px #0000000f}.info-card.variant-elevated.hoverable:hover{box-shadow:0 4px 6px #0000001a,0 2px 4px #0000000f}.info-card.variant-outlined{border:1px solid var(--surface-border)}.info-card.variant-default{background:var(--surface-section)}.info-card.hoverable:hover{transform:translateY(-2px)}.info-card.interactive{cursor:pointer;-webkit-user-select:none;user-select:none}.info-card.interactive:focus{outline:none;box-shadow:0 0 0 3px rgba(var(--primary-500-rgb, 59, 130, 246),.2)}.info-card.interactive:focus:not(:focus-visible){box-shadow:none}.info-card.interactive:active{transform:translateY(0)}.info-card.disabled{opacity:.6;pointer-events:none;cursor:not-allowed}.info-card.loading{pointer-events:none}.info-card-header{background:var(--surface-ground);border-bottom:var(--border-width-1) solid var(--surface-border);display:flex;align-items:center;justify-content:space-between;gap:var(--size-2)}.info-card-header-actions{display:flex;align-items:center;gap:var(--spacing-xs);padding-right:var(--size-2);flex-shrink:0}.info-card-header-actions:empty{display:none}.info-card-title{color:var(--primary-color);margin:0;font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);padding:var(--size-2) var(--size-4);display:flex;align-items:center;gap:var(--size-2);transition:all var(--animation-duration-fast) var(--animation-easing-default)}.info-card-title i{font-size:var(--icon-size-md);flex-shrink:0}.info-card-body{flex:1;display:flex;flex-direction:column}.info-card-content{padding:var(--size-2);min-height:var(--size-48);display:flex;flex-direction:column;transition:opacity var(--animation-duration-normal) var(--animation-easing-default)}.info-card-row{display:flex;align-items:center;padding:var(--size-1) 0;min-height:var(--size-8);animation:fadeIn var(--animation-duration-fast) var(--animation-easing-default);transition:background-color var(--animation-duration-fast) var(--animation-easing-default)}.info-card-row:hover{background-color:var(--surface-hover);border-radius:var(--radius-base)}.info-card-row:last-child{border-bottom:none}.info-card-label{font-weight:var(--font-weight-medium);color:var(--text-color-secondary);font-size:var(--font-size-sm);padding-right:var(--size-2);position:relative;min-width:0;flex:1;line-height:var(--line-height-normal)}.info-card-label:after{content:\"\";position:absolute;right:0;top:50%;width:var(--size-1);height:var(--border-width-1);background-color:var(--surface-border)}.info-card-value{font-weight:var(--font-weight-medium);color:var(--text-color);font-size:var(--font-size-sm);padding-left:var(--size-2);text-align:left;min-width:0;flex:2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:var(--line-height-normal)}.info-card-empty-state{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--text-color-secondary);font-style:italic;font-size:var(--font-size-sm);padding:var(--size-6);background:var(--surface-ground);border-radius:var(--radius-lg);margin:var(--size-2);border:var(--border-width-1) dashed var(--surface-border);animation:fadeIn var(--animation-duration-normal) var(--animation-easing-default)}.info-card-actions>*{padding:var(--size-3) var(--size-4);background:var(--surface-ground);border-top:var(--border-width-1) solid var(--surface-border);display:flex;gap:var(--spacing-sm);align-items:center;justify-content:flex-end}.info-card-actions:not(:has(*)){display:none}.info-card-actions.mobile-full-width-buttons>*{display:flex;flex-direction:column;width:100%;gap:var(--spacing-sm)}.info-card-loading{display:flex;flex-direction:column;gap:var(--spacing-sm);padding:var(--size-2);animation:pulse 1.5s ease-in-out infinite}.skeleton-line{height:var(--size-4);background:linear-gradient(90deg,var(--surface-border) 25%,var(--surface-hover) 50%,var(--surface-border) 75%);background-size:200% 100%;animation:shimmer 1.5s ease-in-out infinite;border-radius:var(--spacing-xs)}.skeleton-line.short{width:60%}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}@keyframes fadeIn{0%{opacity:0;transform:translateY(var(--size-1))}to{opacity:1;transform:translateY(0)}}@media(max-width:768px){.info-card-title{font-size:var(--font-size-sm);padding:var(--size-1-5) var(--size-3);gap:var(--size-1-5)}.info-card-title i{font-size:var(--icon-size-sm)}.info-card-header-actions{padding-right:var(--size-1-5)}.info-card-content{padding:var(--size-1-5);min-height:var(--size-36)}.info-card-row{min-height:var(--size-7);padding:var(--size-0-5) 0}.info-card-label,.info-card-value{font-size:var(--font-size-xs)}.info-card-empty-state{font-size:var(--font-size-xs);padding:var(--size-4);margin:var(--size-1-5)}.info-card-actions{padding:var(--size-2) var(--size-3)}}@media(max-width:480px){.info-card-header{flex-wrap:wrap;gap:var(--size-1)}.info-card-title{font-size:var(--font-size-xs);padding:var(--size-1) var(--size-2);gap:var(--size-1)}.info-card-title i{font-size:var(--icon-size-xs)}.info-card-header-actions{padding:0 var(--size-1) var(--size-1) var(--size-1)}.info-card-content{padding:var(--size-1);min-height:auto}.info-card-row{flex-direction:column;align-items:flex-start;gap:var(--size-0-5);padding:var(--size-1-5) 0;min-height:auto}.info-card-row:hover{background-color:transparent}.info-card-label{width:100%;padding-right:0;text-align:left;flex:none;font-weight:var(--font-weight-semibold);color:var(--text-color)}.info-card-label:after{display:none}.info-card-value{width:100%;padding-left:0;text-align:left;flex:none;font-weight:var(--font-weight-normal);white-space:normal}.info-card-empty-state{padding:var(--size-3);margin:var(--size-1)}.info-card-actions{padding:var(--size-1-5) var(--size-2);flex-direction:column;gap:var(--spacing-md)}.info-card-actions>*{width:100%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
937
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PshInfoCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
938
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: PshInfoCardComponent, isStandalone: true, selector: "psh-info-card", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, cssClass: { classPropertyName: "cssClass", publicName: "cssClass", isSignal: true, isRequired: false, transformFunction: null }, customStyle: { classPropertyName: "customStyle", publicName: "customStyle", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, hoverable: { classPropertyName: "hoverable", publicName: "hoverable", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, autoFullWidthOnMobile: { classPropertyName: "autoFullWidthOnMobile", publicName: "autoFullWidthOnMobile", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { styleAttribute: "display: block; height: 100%;" }, ngImport: i0, template: "<div\n [class]=\"computedClasses()\"\n [ngStyle]=\"computedStyles()\"\n (click)=\"handleClick($event)\"\n (keydown)=\"handleKeydown($event)\"\n role=\"region\"\n [attr.tabindex]=\"interactive() && !disabled() ? 0 : null\"\n [attr.aria-label]=\"computedAriaLabel()\"\n [attr.aria-disabled]=\"disabled() ? 'true' : null\"\n [attr.aria-busy]=\"loading() ? 'true' : null\"\n>\n @if (title() || hasHeaderActions()) {\n <div class=\"info-card-header\">\n @if (title()) {\n <h3 class=\"info-card-title\">\n @if (icon()) {\n <i\n class=\"ph {{ titleIcon() }}\"\n aria-hidden=\"true\"\n [attr.data-icon]=\"icon()\"\n ></i>\n }\n {{ title() }}\n </h3>\n }\n <div class=\"info-card-header-actions\">\n <ng-content select=\"[card-header-actions]\"></ng-content>\n </div>\n </div>\n }\n\n <div class=\"info-card-body\">\n @if (loading()) {\n <div class=\"info-card-loading\">\n <div class=\"skeleton-line\"></div>\n <div class=\"skeleton-line\"></div>\n <div class=\"skeleton-line short\"></div>\n </div>\n } @else {\n <div\n class=\"info-card-content\"\n role=\"list\"\n >\n @if (shouldShowEmptyState()) {\n <div\n class=\"info-card-empty-state\"\n role=\"status\"\n aria-live=\"polite\"\n [attr.data-testid]=\"'info-card-empty-state'\"\n >\n {{ getEmptyStateMessage() }}\n </div>\n } @else {\n @for (item of data(); track $index) {\n <div\n class=\"info-card-row\"\n role=\"listitem\"\n [attr.data-index]=\"$index\"\n [class]=\"item.customClass || ''\"\n >\n <div\n class=\"info-card-label\"\n [style.width]=\"item.labelWidth || options().labelWidth\"\n [attr.data-label]=\"item.label\"\n >\n {{ item.label }}\n </div>\n <div\n class=\"info-card-value\"\n [style.width]=\"item.valueWidth || options().valueWidth\"\n [attr.data-value]=\"item.value\"\n [title]=\"item.value?.toString() || ''\"\n >\n {{ item.value ?? 'Non renseign\u00E9' }}\n </div>\n </div>\n }\n }\n </div>\n }\n </div>\n\n <div class=\"info-card-actions\" [class]=\"getActionsClasses()\">\n <ng-content select=\"[card-actions]\"></ng-content>\n </div>\n</div>\n", styles: [".info-card{background:var(--surface-card);border-radius:var(--border-radius-lg, .75rem);overflow:hidden;transition:all .2s ease;width:100%;height:100%;display:flex;flex-direction:column;position:relative}.info-card.variant-elevated{box-shadow:0 1px 3px #0000001a,0 1px 2px #0000000f}.info-card.variant-elevated.hoverable:hover{box-shadow:0 4px 6px #0000001a,0 2px 4px #0000000f}.info-card.variant-outlined{border:1px solid var(--surface-border)}.info-card.variant-default{background:var(--surface-section)}.info-card.hoverable:hover{transform:translateY(-2px)}.info-card.interactive{cursor:pointer;-webkit-user-select:none;user-select:none}.info-card.interactive:focus{outline:none;box-shadow:0 0 0 3px rgba(var(--primary-500-rgb, 59, 130, 246),.2)}.info-card.interactive:focus:not(:focus-visible){box-shadow:none}.info-card.interactive:active{transform:translateY(0)}.info-card.disabled{opacity:.6;pointer-events:none;cursor:not-allowed}.info-card.loading{pointer-events:none}.info-card-header{background:var(--surface-ground);border-bottom:var(--border-width-1) solid var(--surface-border);display:flex;align-items:center;justify-content:space-between;gap:var(--size-2)}.info-card-header-actions{display:flex;align-items:center;gap:var(--spacing-xs);padding-right:var(--size-2);flex-shrink:0}.info-card-header-actions:empty{display:none}.info-card-title{color:var(--primary-color);margin:0;font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);padding:var(--size-2) var(--size-4);display:flex;align-items:center;gap:var(--size-2);transition:all var(--animation-duration-fast) var(--animation-easing-default)}.info-card-title i{font-size:var(--icon-size-md);flex-shrink:0}.info-card-body{flex:1;display:flex;flex-direction:column}.info-card-content{padding:var(--size-2);min-height:var(--size-48);display:flex;flex-direction:column;transition:opacity var(--animation-duration-normal) var(--animation-easing-default)}.info-card-row{display:flex;align-items:center;padding:var(--size-1) 0;min-height:var(--size-8);animation:fadeIn var(--animation-duration-fast) var(--animation-easing-default);transition:background-color var(--animation-duration-fast) var(--animation-easing-default)}.info-card-row:hover{background-color:var(--surface-hover);border-radius:var(--radius-base)}.info-card-row:last-child{border-bottom:none}.info-card-label{font-weight:var(--font-weight-medium);color:var(--text-color-secondary);font-size:var(--font-size-sm);padding-right:var(--size-2);position:relative;min-width:0;flex:1;line-height:var(--line-height-normal)}.info-card-label:after{content:\"\";position:absolute;right:0;top:50%;width:var(--size-1);height:var(--border-width-1);background-color:var(--surface-border)}.info-card-value{font-weight:var(--font-weight-medium);color:var(--text-color);font-size:var(--font-size-sm);padding-left:var(--size-2);text-align:left;min-width:0;flex:2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:var(--line-height-normal)}.info-card-empty-state{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--text-color-secondary);font-style:italic;font-size:var(--font-size-sm);padding:var(--size-6);background:var(--surface-ground);border-radius:var(--radius-lg);margin:var(--size-2);border:var(--border-width-1) dashed var(--surface-border);animation:fadeIn var(--animation-duration-normal) var(--animation-easing-default)}.info-card-actions>*{padding:var(--size-3) var(--size-4);background:var(--surface-ground);border-top:var(--border-width-1) solid var(--surface-border);display:flex;gap:var(--spacing-sm);align-items:center;justify-content:flex-end}.info-card-actions:not(:has(*)){display:none}.info-card-actions.mobile-full-width-buttons>*{display:flex;flex-direction:column;width:100%;gap:var(--spacing-sm)}.info-card-loading{display:flex;flex-direction:column;gap:var(--spacing-sm);padding:var(--size-2);animation:pulse 1.5s ease-in-out infinite}.skeleton-line{height:var(--size-4);background:linear-gradient(90deg,var(--surface-border) 25%,var(--surface-hover) 50%,var(--surface-border) 75%);background-size:200% 100%;animation:shimmer 1.5s ease-in-out infinite;border-radius:var(--spacing-xs)}.skeleton-line.short{width:60%}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}@keyframes fadeIn{0%{opacity:0;transform:translateY(var(--size-1))}to{opacity:1;transform:translateY(0)}}@media(max-width:768px){.info-card-title{font-size:var(--font-size-sm);padding:var(--size-1-5) var(--size-3);gap:var(--size-1-5)}.info-card-title i{font-size:var(--icon-size-sm)}.info-card-header-actions{padding-right:var(--size-1-5)}.info-card-content{padding:var(--size-1-5);min-height:var(--size-36)}.info-card-row{min-height:var(--size-7);padding:var(--size-0-5) 0}.info-card-label,.info-card-value{font-size:var(--font-size-xs)}.info-card-empty-state{font-size:var(--font-size-xs);padding:var(--size-4);margin:var(--size-1-5)}.info-card-actions{padding:var(--size-2) var(--size-3)}}@media(max-width:480px){.info-card-header{flex-wrap:wrap;gap:var(--size-1)}.info-card-title{font-size:var(--font-size-xs);padding:var(--size-1) var(--size-2);gap:var(--size-1)}.info-card-title i{font-size:var(--icon-size-xs)}.info-card-header-actions{padding:0 var(--size-1) var(--size-1) var(--size-1)}.info-card-content{padding:var(--size-1);min-height:auto}.info-card-row{flex-direction:column;align-items:flex-start;gap:var(--size-0-5);padding:var(--size-1-5) 0;min-height:auto}.info-card-row:hover{background-color:transparent}.info-card-label{width:100%;padding-right:0;text-align:left;flex:none;font-weight:var(--font-weight-semibold);color:var(--text-color)}.info-card-label:after{display:none}.info-card-value{width:100%;padding-left:0;text-align:left;flex:none;font-weight:var(--font-weight-normal);white-space:normal}.info-card-empty-state{padding:var(--size-3);margin:var(--size-1)}.info-card-actions{padding:var(--size-1-5) var(--size-2);flex-direction:column;gap:var(--spacing-md)}.info-card-actions>*{width:100%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
939
939
|
}
|
|
940
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
940
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PshInfoCardComponent, decorators: [{
|
|
941
941
|
type: Component,
|
|
942
942
|
args: [{ selector: 'psh-info-card', imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
943
943
|
style: 'display: block; height: 100%;'
|
|
@@ -1024,14 +1024,14 @@ class PshCheckboxComponent {
|
|
|
1024
1024
|
registerOnTouched(fn) { this.onTouched = fn; }
|
|
1025
1025
|
setDisabledState(isDisabled) { this.disabled.set(isDisabled); }
|
|
1026
1026
|
focus() { this.checkboxInput()?.nativeElement.focus(); }
|
|
1027
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1028
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
1027
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PshCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1028
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: PshCheckboxComponent, isStandalone: true, selector: "psh-checkbox", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, success: { classPropertyName: "success", publicName: "success", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", disabled: "disabledChange", indeterminate: "indeterminateChange", touched: "touchedChange" }, host: { properties: { "class.checkbox-disabled": "disabled()", "class.checkbox-error": "!!error()", "class.checkbox-success": "!!success()", "class.checkbox-small": "size() === \"small\"", "class.checkbox-large": "size() === \"large\"", "class.checkbox-checked": "checked() && !indeterminate()", "class.checkbox-indeterminate": "indeterminate()", "attr.data-state": "state()", "attr.aria-checked": "ariaChecked()" } }, providers: [{
|
|
1029
1029
|
provide: NG_VALUE_ACCESSOR,
|
|
1030
1030
|
useExisting: PshCheckboxComponent,
|
|
1031
1031
|
multi: true
|
|
1032
|
-
}], 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 }
|
|
1032
|
+
}], viewQueries: [{ propertyName: "checkboxInput", first: true, predicate: ["checkboxInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"checkbox-container\">\n <label class=\"checkbox-label\" [class.label-left]=\"labelPosition() === 'left'\">\n <input\n #checkboxInput\n type=\"checkbox\"\n class=\"checkbox-input\"\n [checked]=\"checked()\"\n [disabled]=\"disabled()\"\n [required]=\"required()\"\n [attr.aria-label]=\"computedAriaLabel()\"\n [attr.aria-checked]=\"ariaChecked()\"\n [attr.aria-describedby]=\"ariaDescribedBy()\"\n (change)=\"toggle()\"\n (keydown)=\"handleKeydown($event)\"\n />\n \n <span class=\"checkbox-control\">\n @if (checked() && !indeterminate()) {\n <i class=\"ph ph-check\" aria-hidden=\"true\"></i>\n }\n @if (indeterminate()) {\n <i class=\"ph ph-minus\" aria-hidden=\"true\"></i>\n }\n </span>\n\n <span class=\"checkbox-text\">\n @if (label()) {\n {{ label() }}\n } @else {\n <ng-content></ng-content>\n }\n </span>\n </label>\n\n @if (error()) {\n <div [id]=\"uniqueId + '-error'\" class=\"checkbox-message error\" role=\"alert\">\n {{ error() }}\n </div>\n } @else 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}.checkbox-container{display:flex;flex-direction:column;gap:var(--form-field-gap)}.checkbox-label{display:inline-flex;align-items:center;gap:var(--form-label-gap);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}.checkbox-message.error{color:var(--danger-color)}.checkbox-message.success{color:var(--success-color)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1033
1033
|
}
|
|
1034
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1034
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PshCheckboxComponent, decorators: [{
|
|
1035
1035
|
type: Component,
|
|
1036
1036
|
args: [{ selector: 'psh-checkbox', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, providers: [{
|
|
1037
1037
|
provide: NG_VALUE_ACCESSOR,
|
|
@@ -1047,7 +1047,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImpor
|
|
|
1047
1047
|
'[class.checkbox-indeterminate]': 'indeterminate()',
|
|
1048
1048
|
'[attr.data-state]': 'state()',
|
|
1049
1049
|
'[attr.aria-checked]': 'ariaChecked()'
|
|
1050
|
-
}, 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 }
|
|
1050
|
+
}, 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 } @else 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}.checkbox-container{display:flex;flex-direction:column;gap:var(--form-field-gap)}.checkbox-label{display:inline-flex;align-items:center;gap:var(--form-label-gap);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}.checkbox-message.error{color:var(--danger-color)}.checkbox-message.success{color:var(--success-color)}\n"] }]
|
|
1051
1051
|
}], 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 }] }] } });
|
|
1052
1052
|
|
|
1053
1053
|
class PshCollapseComponent {
|
|
@@ -1132,10 +1132,10 @@ class PshCollapseComponent {
|
|
|
1132
1132
|
break;
|
|
1133
1133
|
}
|
|
1134
1134
|
}
|
|
1135
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1136
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.
|
|
1135
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PshCollapseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1136
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: PshCollapseComponent, isStandalone: true, selector: "psh-collapse", inputs: { expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, disableAnimation: { classPropertyName: "disableAnimation", publicName: "disableAnimation", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expanded: "expandedChange", opened: "opened", closed: "closed", toggled: "toggled" }, ngImport: i0, template: "<div\n class=\"collapse\"\n [class.expanded]=\"expanded()\"\n [class.disabled]=\"disabled()\"\n [class.outline]=\"variant() === 'outline'\"\n [class.small]=\"size() === 'small'\"\n [class.large]=\"size() === 'large'\"\n [class.no-animation]=\"disableAnimation()\"\n [attr.data-state]=\"state()\"\n [style.--collapse-max-height]=\"maxHeight()\"\n>\n <button\n [id]=\"headerId()\"\n class=\"collapse-header\"\n (click)=\"toggle()\"\n (keydown)=\"onKeydown($event)\"\n [attr.aria-expanded]=\"expanded()\"\n [attr.aria-controls]=\"contentId()\"\n [disabled]=\"disabled()\"\n type=\"button\"\n >\n <span class=\"header-content\">\n <ng-content select=\"[collapse-header]\">\n <span>Section pliable</span>\n </ng-content>\n </span>\n <i\n class=\"ph ph-{{ icon() }}\"\n [class.expanded]=\"expanded()\"\n aria-hidden=\"true\"\n ></i>\n </button>\n\n <div\n [id]=\"contentId()\"\n class=\"collapse-content\"\n role=\"region\"\n [attr.aria-labelledby]=\"headerId()\"\n [attr.aria-hidden]=\"!expanded()\"\n >\n <div class=\"content-wrapper\">\n <ng-content></ng-content>\n </div>\n </div>\n</div>", styles: [".collapse{--collapse-transition-duration: .3s;--collapse-transition-timing: cubic-bezier(.4, 0, .2, 1);width:100%;border-radius:var(--border-radius, 8px);background:var(--surface-card, #fff);overflow:hidden}.collapse.no-animation{--collapse-transition-duration: 0s}.collapse.no-animation .collapse-content,.collapse.no-animation .content-wrapper,.collapse.no-animation .collapse-header i{transition:none}.collapse.outline{background:transparent;border:1px solid var(--surface-border, #e0e0e0)}.collapse-header{width:100%;display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-md, 12px) var(--spacing-lg, 16px);background:var(--surface-ground, #f5f5f5);border:none;cursor:pointer;color:var(--text-color, #333);font-family:inherit;font-size:var(--font-size-base, 14px);transition:background-color .2s ease;border-bottom:1px solid var(--surface-border, #e0e0e0);text-align:left}.collapse-header:hover:not(:disabled){background:var(--surface-hover, #ebebeb)}.collapse-header:focus-visible{outline:2px solid var(--primary-color, #0066cc);outline-offset:-2px;z-index:1}.collapse-header:disabled{cursor:not-allowed;opacity:var(--opacity-disabled, .6)}.header-content{font-weight:500;text-align:left}.collapse-header i{color:var(--primary-color, #0066cc);font-size:1.2rem;transition:transform var(--collapse-transition-duration) var(--collapse-transition-timing)}.collapse-header i.expanded{transform:rotate(180deg)}.collapse-content{max-height:0;overflow:hidden;transition:max-height var(--collapse-transition-duration) var(--collapse-transition-timing)}.collapse.expanded .collapse-content{max-height:var(--collapse-max-height);overflow:visible}.content-wrapper{padding:var(--spacing-lg, 16px);padding-top:var(--spacing-md, 12px);color:var(--text-color-secondary, #666);text-align:left;transform:translateY(-10px);opacity:0;transition:transform var(--collapse-transition-duration) var(--collapse-transition-timing),opacity var(--collapse-transition-duration) var(--collapse-transition-timing)}.collapse.expanded .content-wrapper{transform:translateY(0);opacity:1;max-height:var(--collapse-max-height);overflow-y:auto}.collapse.small .collapse-header{padding:var(--spacing-sm, 8px) var(--spacing-md, 12px);font-size:var(--font-size-sm, 12px)}.collapse.small .collapse-header i{font-size:1rem}.collapse.small .content-wrapper{padding:var(--spacing-md, 12px);padding-top:var(--spacing-sm, 8px)}.collapse.large .collapse-header{padding:var(--spacing-lg, 16px) var(--spacing-xl, 24px);font-size:var(--font-size-lg, 16px)}.collapse.large .collapse-header i{font-size:1.4rem}.collapse.large .content-wrapper{padding:var(--spacing-xl, 24px);padding-top:var(--spacing-lg, 16px)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1137
1137
|
}
|
|
1138
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1138
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PshCollapseComponent, decorators: [{
|
|
1139
1139
|
type: Component,
|
|
1140
1140
|
args: [{ selector: 'psh-collapse', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"collapse\"\n [class.expanded]=\"expanded()\"\n [class.disabled]=\"disabled()\"\n [class.outline]=\"variant() === 'outline'\"\n [class.small]=\"size() === 'small'\"\n [class.large]=\"size() === 'large'\"\n [class.no-animation]=\"disableAnimation()\"\n [attr.data-state]=\"state()\"\n [style.--collapse-max-height]=\"maxHeight()\"\n>\n <button\n [id]=\"headerId()\"\n class=\"collapse-header\"\n (click)=\"toggle()\"\n (keydown)=\"onKeydown($event)\"\n [attr.aria-expanded]=\"expanded()\"\n [attr.aria-controls]=\"contentId()\"\n [disabled]=\"disabled()\"\n type=\"button\"\n >\n <span class=\"header-content\">\n <ng-content select=\"[collapse-header]\">\n <span>Section pliable</span>\n </ng-content>\n </span>\n <i\n class=\"ph ph-{{ icon() }}\"\n [class.expanded]=\"expanded()\"\n aria-hidden=\"true\"\n ></i>\n </button>\n\n <div\n [id]=\"contentId()\"\n class=\"collapse-content\"\n role=\"region\"\n [attr.aria-labelledby]=\"headerId()\"\n [attr.aria-hidden]=\"!expanded()\"\n >\n <div class=\"content-wrapper\">\n <ng-content></ng-content>\n </div>\n </div>\n</div>", styles: [".collapse{--collapse-transition-duration: .3s;--collapse-transition-timing: cubic-bezier(.4, 0, .2, 1);width:100%;border-radius:var(--border-radius, 8px);background:var(--surface-card, #fff);overflow:hidden}.collapse.no-animation{--collapse-transition-duration: 0s}.collapse.no-animation .collapse-content,.collapse.no-animation .content-wrapper,.collapse.no-animation .collapse-header i{transition:none}.collapse.outline{background:transparent;border:1px solid var(--surface-border, #e0e0e0)}.collapse-header{width:100%;display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-md, 12px) var(--spacing-lg, 16px);background:var(--surface-ground, #f5f5f5);border:none;cursor:pointer;color:var(--text-color, #333);font-family:inherit;font-size:var(--font-size-base, 14px);transition:background-color .2s ease;border-bottom:1px solid var(--surface-border, #e0e0e0);text-align:left}.collapse-header:hover:not(:disabled){background:var(--surface-hover, #ebebeb)}.collapse-header:focus-visible{outline:2px solid var(--primary-color, #0066cc);outline-offset:-2px;z-index:1}.collapse-header:disabled{cursor:not-allowed;opacity:var(--opacity-disabled, .6)}.header-content{font-weight:500;text-align:left}.collapse-header i{color:var(--primary-color, #0066cc);font-size:1.2rem;transition:transform var(--collapse-transition-duration) var(--collapse-transition-timing)}.collapse-header i.expanded{transform:rotate(180deg)}.collapse-content{max-height:0;overflow:hidden;transition:max-height var(--collapse-transition-duration) var(--collapse-transition-timing)}.collapse.expanded .collapse-content{max-height:var(--collapse-max-height);overflow:visible}.content-wrapper{padding:var(--spacing-lg, 16px);padding-top:var(--spacing-md, 12px);color:var(--text-color-secondary, #666);text-align:left;transform:translateY(-10px);opacity:0;transition:transform var(--collapse-transition-duration) var(--collapse-transition-timing),opacity var(--collapse-transition-duration) var(--collapse-transition-timing)}.collapse.expanded .content-wrapper{transform:translateY(0);opacity:1;max-height:var(--collapse-max-height);overflow-y:auto}.collapse.small .collapse-header{padding:var(--spacing-sm, 8px) var(--spacing-md, 12px);font-size:var(--font-size-sm, 12px)}.collapse.small .collapse-header i{font-size:1rem}.collapse.small .content-wrapper{padding:var(--spacing-md, 12px);padding-top:var(--spacing-sm, 8px)}.collapse.large .collapse-header{padding:var(--spacing-lg, 16px) var(--spacing-xl, 24px);font-size:var(--font-size-lg, 16px)}.collapse.large .collapse-header i{font-size:1.4rem}.collapse.large .content-wrapper{padding:var(--spacing-xl, 24px);padding-top:var(--spacing-lg, 16px)}\n"] }]
|
|
1141
1141
|
}], propDecorators: { expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }, { type: i0.Output, args: ["expandedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], disableAnimation: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableAnimation", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], toggled: [{ type: i0.Output, args: ["toggled"] }] } });
|
|
@@ -1152,6 +1152,7 @@ class PshDropdownComponent {
|
|
|
1152
1152
|
this.elementRef = inject(ElementRef);
|
|
1153
1153
|
this.clickOutsideHandler = null;
|
|
1154
1154
|
// Regular inputs
|
|
1155
|
+
this.appearance = input('filled', ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
|
|
1155
1156
|
this.variant = input('primary', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
1156
1157
|
this.size = input('medium', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
1157
1158
|
this.placement = input('bottom-start', ...(ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []));
|
|
@@ -1159,6 +1160,8 @@ class PshDropdownComponent {
|
|
|
1159
1160
|
this.label = input('Dropdown Menu', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
1160
1161
|
this.icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
|
|
1161
1162
|
this.ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
1163
|
+
this.iconOnly = input(false, ...(ngDevMode ? [{ debugName: "iconOnly" }] : /* istanbul ignore next */ []));
|
|
1164
|
+
this.iconOnlyText = input(...(ngDevMode ? [undefined, { debugName: "iconOnlyText" }] : /* istanbul ignore next */ []));
|
|
1162
1165
|
// Model inputs
|
|
1163
1166
|
this.disabled = model(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
1164
1167
|
// State
|
|
@@ -1172,7 +1175,13 @@ class PshDropdownComponent {
|
|
|
1172
1175
|
// Computed values
|
|
1173
1176
|
this.isOpen = computed(() => this.isOpenSignal(), ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
|
|
1174
1177
|
this.selectedItem = computed(() => this.selectedItemSignal(), ...(ngDevMode ? [{ debugName: "selectedItem" }] : /* istanbul ignore next */ []));
|
|
1175
|
-
this.
|
|
1178
|
+
this.isIconOnly = computed(() => this.iconOnly() && !!this.icon(), ...(ngDevMode ? [{ debugName: "isIconOnly" }] : /* istanbul ignore next */ []));
|
|
1179
|
+
this.computedAriaLabel = computed(() => {
|
|
1180
|
+
if (this.isIconOnly()) {
|
|
1181
|
+
return this.iconOnlyText() || this.ariaLabel() || 'Toggle dropdown menu';
|
|
1182
|
+
}
|
|
1183
|
+
return this.ariaLabel() || 'Toggle dropdown menu';
|
|
1184
|
+
}, ...(ngDevMode ? [{ debugName: "computedAriaLabel" }] : /* istanbul ignore next */ []));
|
|
1176
1185
|
this.state = computed(() => this.getState(), ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
|
|
1177
1186
|
this.setupClickOutsideListener();
|
|
1178
1187
|
}
|
|
@@ -1355,13 +1364,13 @@ class PshDropdownComponent {
|
|
|
1355
1364
|
document.removeEventListener('click', this.clickOutsideHandler);
|
|
1356
1365
|
}
|
|
1357
1366
|
}
|
|
1358
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1359
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", type: PshDropdownComponent, isStandalone: true, selector: "psh-dropdown", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", selected: "selected", opened: "opened", closed: "closed" }, ngImport: i0, template: "<div\n class=\"dropdown-container\"\n [class]=\"size()\"\n [class.open]=\"isOpen()\"\n [class.disabled]=\"disabled()\"\n [attr.data-state]=\"state()\"\n>\n <button\n class=\"dropdown-trigger\"\n [class]=\"variant()\"\n (click)=\"toggleDropdown()\"\n (keydown)=\"handleTriggerKeyDown($event)\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-disabled]=\"disabled()\"\n [attr.aria-label]=\"computedAriaLabel()\"\n [attr.aria-haspopup]=\"'menu'\"\n type=\"button\"\n [disabled]=\"disabled()\"\n >\n <span class=\"trigger-content\">\n @if (icon()) {\n <i class=\"ph ph-{{ icon() }}\" aria-hidden=\"true\"></i>\n }\n <ng-content select=\"[dropdown-trigger]\">\n @if (label()) {\n {{ label() }}\n }\n </ng-content>\n <i \n class=\"ph ph-caret-down trigger-arrow\"\n [class.open]=\"isOpen()\"\n aria-hidden=\"true\"\n ></i>\n </span>\n </button>\n\n @if (isOpen()) {\n <div \n class=\"dropdown-menu\"\n [class]=\"placement()\"\n role=\"menu\"\n (click)=\"$event.stopPropagation()\"\n >\n <ng-content select=\"[dropdown-menu]\">\n @for (item of items(); track item.value; let i = $index) {\n <button\n type=\"button\"\n class=\"dropdown-item\"\n [class.disabled]=\"item.disabled\"\n [class.active]=\"selectedItem() === item\"\n [attr.data-dropdown-item-index]=\"i\"\n (click)=\"selectItem(item)\"\n (keydown)=\"handleItemKeyDown($event, item, i)\"\n role=\"menuitem\"\n [attr.aria-disabled]=\"item.disabled\"\n [disabled]=\"item.disabled\"\n [attr.tabindex]=\"item.disabled ? -1 : 0\"\n >\n @if (item.icon) {\n <i class=\"ph ph-{{ item.icon }}\" aria-hidden=\"true\"></i>\n }\n <span class=\"item-label\">{{ item.content }}</span>\n </button>\n }\n </ng-content>\n </div>\n }\n</div>", styles: [".dropdown-container{position:relative;display:inline-block}.dropdown-trigger{display:inline-flex;align-items:center;justify-content:center;height:var(--height-input-md);padding:0 var(--spacing-lg);border:none;border-radius:var(--border-radius);font-weight:var(--font-weight-medium);font-size:var(--font-size-base);font-family:var(--font-family);line-height:var(--line-height-normal);cursor:pointer;transition:all var(--animation-duration-fast) var(--animation-easing-smooth);min-width:7.5rem;background:transparent;position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.trigger-content{display:flex;align-items:center;gap:var(--spacing-sm);position:relative;z-index:1;line-height:1}.trigger-arrow{transition:transform var(--animation-duration-fast) var(--animation-easing-smooth);margin-left:var(--spacing-sm)}.trigger-arrow.open{transform:rotate(180deg)}.dropdown-trigger.primary{background:var(--primary-gradient);color:var(--primary-color-text)}.dropdown-trigger.primary:hover:not(.disabled){background:var(--primary-gradient-hover)}.dropdown-trigger.secondary{background:var(--secondary-color);color:var(--secondary-color-text)}.dropdown-trigger.secondary:hover:not(.disabled){background:var(--secondary-color-light)}.dropdown-trigger.outline{background:transparent;border:var(--border-width-2) solid var(--primary-color);color:var(--primary-color)}.dropdown-trigger.outline:hover:not(.disabled){background:var(--primary-color);border-color:var(--primary-color);color:var(--primary-color-text)}.dropdown-trigger.text{background:transparent;color:var(--primary-color)}.dropdown-trigger.text:hover:not(.disabled){background:var(--surface-hover)}.dropdown-container.small .dropdown-trigger{height:var(--height-input-sm);padding:0 var(--spacing-md);font-size:var(--font-size-sm);min-width:6rem}.dropdown-container.large .dropdown-trigger{height:var(--height-input-lg);padding:0 var(--spacing-lg);font-size:var(--font-size-lg);min-width:8.75rem}.dropdown-menu{position:absolute;min-width:12.5rem;background:var(--surface-card);border:var(--border-width-1) solid var(--surface-border);border-radius:var(--border-radius);box-shadow:var(--shadow-lg);z-index:var(--z-index-dropdown);margin-top:var(--spacing-xs);animation:fadeIn var(--animation-duration-fast) var(--animation-easing-smooth);overflow:hidden}.dropdown-menu ::ng-deep [dropdown-menu]{background:transparent;padding:0;margin:0}.dropdown-menu ::ng-deep .dropdown-item{display:flex;align-items:center;gap:var(--spacing-sm);width:100%;padding:var(--spacing-sm) var(--spacing-md);border:none;background:transparent;color:var(--text-color);font-family:var(--font-family);font-size:var(--font-size-base);text-align:left;cursor:pointer;transition:all var(--animation-duration-fast) var(--animation-easing-smooth)}.dropdown-menu ::ng-deep .dropdown-item:hover:not(.disabled){background:var(--surface-hover)}.dropdown-menu ::ng-deep .dropdown-item.active{color:var(--primary-color);background:rgba(var(--primary-color-rgb),.1)}.dropdown-menu ::ng-deep .dropdown-item.disabled{opacity:.6;cursor:not-allowed}.dropdown-menu ::ng-deep .dropdown-item i{font-size:var(--icon-size-md);color:inherit}.dropdown-menu.bottom-start{top:100%;left:0}.dropdown-menu.bottom-end{top:100%;right:0}.dropdown-menu.top-start{bottom:100%;left:0}.dropdown-menu.top-end{bottom:100%;right:0}.dropdown-item{display:flex;align-items:center;gap:var(--spacing-sm);width:100%;padding:var(--spacing-sm) var(--spacing-md);border:none;background:transparent;color:var(--text-color);font-family:var(--font-family);font-size:var(--font-size-base);text-align:left;cursor:pointer;transition:all var(--animation-duration-fast) var(--animation-easing-smooth)}.dropdown-item:hover:not(.disabled){background:var(--surface-hover)}.dropdown-item.active{color:var(--primary-color);background:rgba(var(--primary-color-rgb),.1)}.dropdown-item.disabled{opacity:.6;cursor:not-allowed}.item-check{margin-left:auto;color:var(--primary-color)}.dropdown-trigger:focus-visible{outline:none;box-shadow:0 0 0 var(--focus-ring-width) var(--focus-ring-color)}.dropdown-trigger:active:not(.disabled){transform:translateY(.0625rem)}.dropdown-container.disabled{opacity:.6;cursor:not-allowed}.dropdown-container.disabled .dropdown-trigger{pointer-events:none}@keyframes fadeIn{0%{opacity:0;transform:translateY(calc(-1 * var(--animation-distance-sm)))}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1367
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PshDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1368
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: PshDropdownComponent, isStandalone: true, selector: "psh-dropdown", 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 }, 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 }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null }, iconOnlyText: { classPropertyName: "iconOnlyText", publicName: "iconOnlyText", 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 [class.icon-only]=\"isIconOnly()\"\n [attr.data-state]=\"state()\"\n>\n <button\n class=\"dropdown-trigger\"\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 (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 (isIconOnly()) {\n <i class=\"ph ph-{{ icon() }}\" aria-hidden=\"true\"></i>\n } @else {\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 }\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{color:var(--primary-color)}.dropdown-trigger.secondary{color:var(--secondary-color)}.dropdown-trigger.success{color:var(--success-color)}.dropdown-trigger.warning{color:var(--warning-color)}.dropdown-trigger.danger{color:var(--danger-color)}.dropdown-trigger.filled{background-color:currentColor}.dropdown-trigger.filled.primary{background:var(--primary-gradient);color:var(--text-on-primary)}.dropdown-trigger.filled.primary .trigger-content{color:var(--text-on-primary)}.dropdown-trigger.filled.secondary .trigger-content{color:var(--text-on-secondary)}.dropdown-trigger.filled.success .trigger-content{color:var(--text-on-success)}.dropdown-trigger.filled.warning .trigger-content{color:var(--text-on-warning)}.dropdown-trigger.filled.danger .trigger-content{color:var(--text-on-danger)}.dropdown-trigger.filled.primary:hover:not(.disabled){background:var(--primary-gradient-hover)}.dropdown-trigger.filled.secondary:hover:not(.disabled){background-color:var(--secondary-color-light)}.dropdown-trigger.filled.success:hover:not(.disabled){background-color:var(--green-400)}.dropdown-trigger.filled.warning:hover:not(.disabled){background-color:var(--orange-400)}.dropdown-trigger.filled.danger:hover:not(.disabled){background-color:var(--red-400)}.dropdown-trigger.outline{background:transparent;border:var(--border-width-2) solid currentColor}.dropdown-trigger.outline .trigger-content{color:inherit}.dropdown-trigger.outline:hover:not(.disabled){background:currentColor}.dropdown-trigger.outline.primary:hover:not(.disabled) .trigger-content{color:var(--text-on-primary)}.dropdown-trigger.outline.secondary:hover:not(.disabled) .trigger-content{color:var(--text-on-secondary)}.dropdown-trigger.outline.success:hover:not(.disabled) .trigger-content{color:var(--text-on-success)}.dropdown-trigger.outline.warning:hover:not(.disabled) .trigger-content{color:var(--text-on-warning)}.dropdown-trigger.outline.danger:hover:not(.disabled) .trigger-content{color:var(--text-on-danger)}.dropdown-trigger.text{background:transparent}.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-container.icon-only .dropdown-trigger{min-width:0;width:var(--height-input-md);padding:0}.dropdown-container.icon-only.small .dropdown-trigger{width:var(--height-input-sm);padding:0;min-width:0}.dropdown-container.icon-only.large .dropdown-trigger{width:var(--height-input-lg);padding:0;min-width:0}.dropdown-container.icon-only .trigger-content{gap:0;justify-content:center}.dropdown-container.icon-only .trigger-content i{margin:0}.dropdown-menu{position:absolute;min-width:12.5rem;background:var(--surface-card);border:var(--border-width-1) solid var(--surface-border);border-radius:var(--border-radius);box-shadow:var(--shadow-lg);z-index:var(--z-index-dropdown);margin-top:var(--spacing-xs);animation:fadeIn var(--animation-duration-fast) var(--animation-easing-smooth);overflow:hidden}.dropdown-menu ::ng-deep [dropdown-menu]{background:transparent;padding:0;margin:0}.dropdown-menu ::ng-deep .dropdown-item{display:flex;align-items:center;gap:var(--spacing-sm);width:100%;padding:var(--spacing-sm) var(--spacing-md);border:none;background:transparent;color:var(--text-color);font-family:var(--font-family);font-size:var(--font-size-base);text-align:left;cursor:pointer;transition:all var(--animation-duration-fast) var(--animation-easing-smooth)}.dropdown-menu ::ng-deep .dropdown-item:hover:not(.disabled){background:var(--surface-hover)}.dropdown-menu ::ng-deep .dropdown-item.active{color:var(--primary-color);background:rgba(var(--primary-color-rgb),.1)}.dropdown-menu ::ng-deep .dropdown-item.disabled{opacity:.6;cursor:not-allowed}.dropdown-menu ::ng-deep .dropdown-item i{font-size:var(--icon-size-md);color:inherit}.dropdown-menu.bottom-start{top:100%;left:0}.dropdown-menu.bottom-end{top:100%;right:0}.dropdown-menu.top-start{bottom:100%;left:0}.dropdown-menu.top-end{bottom:100%;right:0}.dropdown-item{display:flex;align-items:center;gap:var(--spacing-sm);width:100%;padding:var(--spacing-sm) var(--spacing-md);border:none;background:transparent;color:var(--text-color);font-family:var(--font-family);font-size:var(--font-size-base);text-align:left;cursor:pointer;transition:all var(--animation-duration-fast) var(--animation-easing-smooth)}.dropdown-item:hover:not(.disabled){background:var(--surface-hover)}.dropdown-item.active{color:var(--primary-color);background:rgba(var(--primary-color-rgb),.1)}.dropdown-item.disabled{opacity:.6;cursor:not-allowed}.item-check{margin-left:auto;color:var(--primary-color)}.dropdown-trigger:focus-visible{outline:none;box-shadow:0 0 0 var(--focus-ring-width) var(--focus-ring-color)}.dropdown-trigger:active:not(.disabled){transform:translateY(.0625rem)}.dropdown-container.disabled{opacity:.6;cursor:not-allowed}.dropdown-container.disabled .dropdown-trigger{pointer-events:none}@keyframes fadeIn{0%{opacity:0;transform:translateY(calc(-1 * var(--animation-distance-sm)))}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1360
1369
|
}
|
|
1361
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1370
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PshDropdownComponent, decorators: [{
|
|
1362
1371
|
type: Component,
|
|
1363
|
-
args: [{ selector: 'psh-dropdown', imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"dropdown-container\"\n [class]=\"size()\"\n [class.open]=\"isOpen()\"\n [class.disabled]=\"disabled()\"\n [attr.data-state]=\"state()\"\n>\n <button\n class=\"dropdown-trigger\"\n [class]=\"variant()\"\n (click)=\"toggleDropdown()\"\n (keydown)=\"handleTriggerKeyDown($event)\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-disabled]=\"disabled()\"\n [attr.aria-label]=\"computedAriaLabel()\"\n [attr.aria-haspopup]=\"'menu'\"\n type=\"button\"\n [disabled]=\"disabled()\"\n >\n <span class=\"trigger-content\">\n @if (
|
|
1364
|
-
}], ctorParameters: () => [], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], selected: [{ type: i0.Output, args: ["selected"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
|
|
1372
|
+
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 [class.icon-only]=\"isIconOnly()\"\n [attr.data-state]=\"state()\"\n>\n <button\n class=\"dropdown-trigger\"\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 (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 (isIconOnly()) {\n <i class=\"ph ph-{{ icon() }}\" aria-hidden=\"true\"></i>\n } @else {\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 }\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{color:var(--primary-color)}.dropdown-trigger.secondary{color:var(--secondary-color)}.dropdown-trigger.success{color:var(--success-color)}.dropdown-trigger.warning{color:var(--warning-color)}.dropdown-trigger.danger{color:var(--danger-color)}.dropdown-trigger.filled{background-color:currentColor}.dropdown-trigger.filled.primary{background:var(--primary-gradient);color:var(--text-on-primary)}.dropdown-trigger.filled.primary .trigger-content{color:var(--text-on-primary)}.dropdown-trigger.filled.secondary .trigger-content{color:var(--text-on-secondary)}.dropdown-trigger.filled.success .trigger-content{color:var(--text-on-success)}.dropdown-trigger.filled.warning .trigger-content{color:var(--text-on-warning)}.dropdown-trigger.filled.danger .trigger-content{color:var(--text-on-danger)}.dropdown-trigger.filled.primary:hover:not(.disabled){background:var(--primary-gradient-hover)}.dropdown-trigger.filled.secondary:hover:not(.disabled){background-color:var(--secondary-color-light)}.dropdown-trigger.filled.success:hover:not(.disabled){background-color:var(--green-400)}.dropdown-trigger.filled.warning:hover:not(.disabled){background-color:var(--orange-400)}.dropdown-trigger.filled.danger:hover:not(.disabled){background-color:var(--red-400)}.dropdown-trigger.outline{background:transparent;border:var(--border-width-2) solid currentColor}.dropdown-trigger.outline .trigger-content{color:inherit}.dropdown-trigger.outline:hover:not(.disabled){background:currentColor}.dropdown-trigger.outline.primary:hover:not(.disabled) .trigger-content{color:var(--text-on-primary)}.dropdown-trigger.outline.secondary:hover:not(.disabled) .trigger-content{color:var(--text-on-secondary)}.dropdown-trigger.outline.success:hover:not(.disabled) .trigger-content{color:var(--text-on-success)}.dropdown-trigger.outline.warning:hover:not(.disabled) .trigger-content{color:var(--text-on-warning)}.dropdown-trigger.outline.danger:hover:not(.disabled) .trigger-content{color:var(--text-on-danger)}.dropdown-trigger.text{background:transparent}.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-container.icon-only .dropdown-trigger{min-width:0;width:var(--height-input-md);padding:0}.dropdown-container.icon-only.small .dropdown-trigger{width:var(--height-input-sm);padding:0;min-width:0}.dropdown-container.icon-only.large .dropdown-trigger{width:var(--height-input-lg);padding:0;min-width:0}.dropdown-container.icon-only .trigger-content{gap:0;justify-content:center}.dropdown-container.icon-only .trigger-content i{margin:0}.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"] }]
|
|
1373
|
+
}], ctorParameters: () => [], propDecorators: { appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], 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 }] }], iconOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOnly", required: false }] }], iconOnlyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOnlyText", 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"] }] } });
|
|
1365
1374
|
|
|
1366
1375
|
const INPUT_LABELS = {
|
|
1367
1376
|
showPassword: 'Afficher le mot de passe',
|
|
@@ -1560,16 +1569,16 @@ class PshInputComponent {
|
|
|
1560
1569
|
this.filteredSuggestionsSignal.set([]);
|
|
1561
1570
|
}
|
|
1562
1571
|
}
|
|
1563
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1564
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
1572
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PshInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1573
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: PshInputComponent, isStandalone: true, selector: "psh-input", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, iconStart: { classPropertyName: "iconStart", publicName: "iconStart", isSignal: true, isRequired: false, transformFunction: null }, iconEnd: { classPropertyName: "iconEnd", publicName: "iconEnd", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, success: { classPropertyName: "success", publicName: "success", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, suggestions: { classPropertyName: "suggestions", publicName: "suggestions", isSignal: true, isRequired: false, transformFunction: null }, autocompleteConfig: { classPropertyName: "autocompleteConfig", publicName: "autocompleteConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", disabled: "disabledChange", readonly: "readonlyChange", loading: "loadingChange", touched: "touchedChange", inputFocus: "inputFocus", inputBlur: "inputBlur", suggestionSelect: "suggestionSelect" }, host: { properties: { "class.full-width": "fullWidth()", "class.small": "size() === \"small\"", "class.large": "size() === \"large\"", "class.error": "!!error()", "class.success": "!!success()", "class.disabled": "disabled()", "class.readonly": "readonly()", "class.loading": "loading()", "class.focused": "focused()", "class.has-start-icon": "!!iconStart()", "class.has-end-icon": "!!iconEnd() || type() === \"password\"", "class.outlined": "variant() === \"outlined\"", "class.filled": "variant() === \"filled\"" } }, providers: [
|
|
1565
1574
|
{
|
|
1566
1575
|
provide: NG_VALUE_ACCESSOR,
|
|
1567
1576
|
useExisting: PshInputComponent,
|
|
1568
1577
|
multi: true
|
|
1569
1578
|
}
|
|
1570
|
-
], ngImport: i0, template: "<div class=\"input-container\">\n @if (showLabel()) {\n <label \n class=\"input-label\" \n [for]=\"inputId\" \n (click)=\"focusSelect()\" \n [class.required]=\"required()\"\n >\n <ng-content select=\"[input-label]\"></ng-content>\n @if (!hasLabelContent()) {\n {{ label() }}\n }\n </label>\n }\n\n <div class=\"input-wrapper\">\n @if (iconStart()) {\n <i class=\"ph ph-{{ iconStart() }}\" aria-hidden=\"true\"></i>\n }\n\n <input\n [id]=\"inputId\"\n [type]=\"effectiveType()\"\n [attr.placeholder]=\"placeholder()\"\n [attr.aria-label]=\"computedAriaLabel()\"\n [attr.aria-invalid]=\"!!error()\"\n [attr.aria-required]=\"required()\"\n [attr.aria-describedby]=\"error() ? 'error-message' : success() ? 'success-message' : hint() ? 'hint-message' : null\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly()\"\n [required]=\"required()\"\n [value]=\"value()\"\n (input)=\"handleInput($event)\"\n (keydown)=\"handleKeydown($event)\"\n (focus)=\"handleFocus()\"\n (blur)=\"handleBlur()\"\n [attr.data-state]=\"state()\"\n />\n\n @if (iconEnd()) {\n <i class=\"ph ph-{{ iconEnd() }}\" aria-hidden=\"true\"></i>\n }\n\n @if (type() === 'password') {\n <button\n type=\"button\"\n class=\"password-toggle\"\n (click)=\"togglePasswordVisibility()\"\n [attr.aria-label]=\"passwordToggleLabel()\"\n [disabled]=\"disabled() || readonly()\"\n >\n <i \n [class]=\"'ph ph-' + (passwordVisible() ? 'eye-slash' : 'eye')\"\n aria-hidden=\"true\"\n ></i>\n </button>\n }\n\n @if (loading()) {\n <div class=\"input-loader\" aria-hidden=\"true\">\n <div class=\"loader\"></div>\n </div>\n }\n\n @if (showSuggestions()) {\n <div class=\"suggestions-list\" role=\"listbox\">\n @for (suggestion of filteredSuggestions(); track suggestion; let i = $index) {\n <div \n class=\"suggestion-item\"\n [class.focused]=\"i === focusedSuggestionIndex()\"\n role=\"option\"\n [attr.aria-selected]=\"i === focusedSuggestionIndex()\"\n (click)=\"handleSuggestionClick(suggestion)\"\n (mouseenter)=\"focusedSuggestionIndex.set(i)\"\n >\n {{ suggestion }}\n </div>\n }\n </div>\n }\n </div>\n\n @if (error()) {\n <div id=\"error-message\" class=\"input-error\" role=\"alert\">\n <ng-content select=\"[input-error]\">\n {{ error() }}\n </ng-content>\n </div>\n }
|
|
1579
|
+
], 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 } @else 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 } @else 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%;display:flex;flex-direction:column;gap:var(--form-field-gap)}.input-label{display:block;color:var(--text-color);font-size:.875rem;font-weight:500;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:.125rem 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}:host.filled input{background:var(--surface-ground);border:.125rem solid var(--surface-border)}:host.filled input:hover:not(:disabled):not(:focus){background:var(--surface-hover)}:host.filled input:focus{background:var(--surface-0)}:host.error input{border-color:var(--danger-color)}:host.error input:focus{box-shadow:0 0 0 .125rem var(--focus-ring-error)}:host.success input{border-color:var(--success-color)}:host.success input:focus{box-shadow:0 0 0 .125rem var(--focus-ring-success)}:host.disabled input{background:var(--surface-ground);cursor:not-allowed;opacity:var(--opacity-disabled)}:host.readonly input{background:var(--surface-ground);cursor:default}:host.small input{height:2rem;font-size:.875rem}:host.large input{height:3rem;font-size:1.125rem}:host.has-start-icon input{padding-left:2.75rem}:host.has-end-icon input{padding-right:2.75rem}.input-wrapper i{position:absolute;top:50%;transform:translateY(-50%);font-size:1.25rem;color:var(--text-color-secondary);pointer-events:none;z-index:2}.input-wrapper i:first-of-type{padding-left:1rem}.input-wrapper i:last-of-type{padding-right:1rem}.password-toggle{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);width:2rem;height:2rem;background:transparent;border:none;color:var(--text-color-secondary);cursor:pointer;padding:0;border-radius:var(--border-radius);display:flex;align-items:center;justify-content:center;transition:all .2s ease;z-index:3}.password-toggle:hover:not(:disabled){background:var(--surface-hover);color:var(--text-color)}.password-toggle i{position:static;transform:none;pointer-events:auto}.input-loader{position:absolute;right:1rem;top:50%;transform:translateY(-50%);z-index:3}.loader{width:1rem;height:1rem;border:.125rem solid var(--surface-border);border-top-color:var(--primary-color);border-radius:50%;animation:spin .8s linear infinite}.suggestions-list{position:absolute;top:100%;left:0;right:0;background:var(--surface-0);border:.0625rem solid var(--surface-border);border-radius:var(--border-radius);box-shadow:var(--shadow-lg);z-index:var(--z-index-dropdown);max-height:12.5rem;overflow-y:auto;margin-top:.25rem}.suggestion-item{padding:.5rem 1rem;cursor:pointer;color:var(--text-color)}.suggestion-item:hover,.suggestion-item.focused{background:var(--surface-hover);color:var(--primary-color)}.input-error,.input-success,.input-hint{font-size:.875rem}.input-error{color:var(--danger-color)}.input-success{color:var(--success-color)}.input-hint{color:var(--text-color-secondary)}@keyframes spin{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1571
1580
|
}
|
|
1572
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1581
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PshInputComponent, decorators: [{
|
|
1573
1582
|
type: Component,
|
|
1574
1583
|
args: [{ selector: 'psh-input', imports: [CommonModule], providers: [
|
|
1575
1584
|
{
|
|
@@ -1591,9 +1600,181 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImpor
|
|
|
1591
1600
|
'[class.has-end-icon]': '!!iconEnd() || type() === "password"',
|
|
1592
1601
|
'[class.outlined]': 'variant() === "outlined"',
|
|
1593
1602
|
'[class.filled]': 'variant() === "filled"',
|
|
1594
|
-
}, 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 }
|
|
1603
|
+
}, 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 } @else 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 } @else 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%;display:flex;flex-direction:column;gap:var(--form-field-gap)}.input-label{display:block;color:var(--text-color);font-size:.875rem;font-weight:500;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:.125rem 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}:host.filled input{background:var(--surface-ground);border:.125rem solid var(--surface-border)}:host.filled input:hover:not(:disabled):not(:focus){background:var(--surface-hover)}:host.filled input:focus{background:var(--surface-0)}:host.error input{border-color:var(--danger-color)}:host.error input:focus{box-shadow:0 0 0 .125rem var(--focus-ring-error)}:host.success input{border-color:var(--success-color)}:host.success input:focus{box-shadow:0 0 0 .125rem var(--focus-ring-success)}:host.disabled input{background:var(--surface-ground);cursor:not-allowed;opacity:var(--opacity-disabled)}:host.readonly input{background:var(--surface-ground);cursor:default}:host.small input{height:2rem;font-size:.875rem}:host.large input{height:3rem;font-size:1.125rem}:host.has-start-icon input{padding-left:2.75rem}:host.has-end-icon input{padding-right:2.75rem}.input-wrapper i{position:absolute;top:50%;transform:translateY(-50%);font-size:1.25rem;color:var(--text-color-secondary);pointer-events:none;z-index:2}.input-wrapper i:first-of-type{padding-left:1rem}.input-wrapper i:last-of-type{padding-right:1rem}.password-toggle{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);width:2rem;height:2rem;background:transparent;border:none;color:var(--text-color-secondary);cursor:pointer;padding:0;border-radius:var(--border-radius);display:flex;align-items:center;justify-content:center;transition:all .2s ease;z-index:3}.password-toggle:hover:not(:disabled){background:var(--surface-hover);color:var(--text-color)}.password-toggle i{position:static;transform:none;pointer-events:auto}.input-loader{position:absolute;right:1rem;top:50%;transform:translateY(-50%);z-index:3}.loader{width:1rem;height:1rem;border:.125rem solid var(--surface-border);border-top-color:var(--primary-color);border-radius:50%;animation:spin .8s linear infinite}.suggestions-list{position:absolute;top:100%;left:0;right:0;background:var(--surface-0);border:.0625rem solid var(--surface-border);border-radius:var(--border-radius);box-shadow:var(--shadow-lg);z-index:var(--z-index-dropdown);max-height:12.5rem;overflow-y:auto;margin-top:.25rem}.suggestion-item{padding:.5rem 1rem;cursor:pointer;color:var(--text-color)}.suggestion-item:hover,.suggestion-item.focused{background:var(--surface-hover);color:var(--primary-color)}.input-error,.input-success,.input-hint{font-size:.875rem}.input-error{color:var(--danger-color)}.input-success{color:var(--success-color)}.input-hint{color:var(--text-color-secondary)}@keyframes spin{to{transform:rotate(360deg)}}\n"] }]
|
|
1595
1604
|
}], 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"] }] } });
|
|
1596
1605
|
|
|
1606
|
+
const TEXTAREA_LABELS = {
|
|
1607
|
+
characterCountSuffix: 'caractères',
|
|
1608
|
+
characterCountSeparator: '/',
|
|
1609
|
+
};
|
|
1610
|
+
|
|
1611
|
+
class PshTextareaComponent {
|
|
1612
|
+
static { this.nextId = 0; }
|
|
1613
|
+
constructor() {
|
|
1614
|
+
this.elementRef = inject((ElementRef));
|
|
1615
|
+
this.cdr = inject(ChangeDetectorRef);
|
|
1616
|
+
this.textareaId = `psh-textarea-${PshTextareaComponent.nextId++}`;
|
|
1617
|
+
this.value = model('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
1618
|
+
this.disabled = model(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
1619
|
+
this.readonly = model(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
|
|
1620
|
+
this.touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
|
|
1621
|
+
this.variant = input('outlined', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
1622
|
+
this.size = input('medium', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
1623
|
+
this.resize = input('vertical', ...(ngDevMode ? [{ debugName: "resize" }] : /* istanbul ignore next */ []));
|
|
1624
|
+
this.rows = input(4, ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
|
|
1625
|
+
this.maxLength = input(undefined, ...(ngDevMode ? [{ debugName: "maxLength" }] : /* istanbul ignore next */ []));
|
|
1626
|
+
this.autoSize = input(false, ...(ngDevMode ? [{ debugName: "autoSize" }] : /* istanbul ignore next */ []));
|
|
1627
|
+
this.showCharacterCount = input(false, ...(ngDevMode ? [{ debugName: "showCharacterCount" }] : /* istanbul ignore next */ []));
|
|
1628
|
+
this.fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : /* istanbul ignore next */ []));
|
|
1629
|
+
this.required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
|
|
1630
|
+
this.showLabel = input(true, ...(ngDevMode ? [{ debugName: "showLabel" }] : /* istanbul ignore next */ []));
|
|
1631
|
+
this.label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
1632
|
+
this.placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
1633
|
+
this.hint = input(null, ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
|
|
1634
|
+
this.error = input(null, ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
|
|
1635
|
+
this.success = input(null, ...(ngDevMode ? [{ debugName: "success" }] : /* istanbul ignore next */ []));
|
|
1636
|
+
this.ariaLabel = input(null, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
1637
|
+
this.focusedSignal = signal(false, ...(ngDevMode ? [{ debugName: "focusedSignal" }] : /* istanbul ignore next */ []));
|
|
1638
|
+
this.inputFocus = output();
|
|
1639
|
+
this.inputBlur = output();
|
|
1640
|
+
this.focused = computed(() => this.focusedSignal(), ...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
|
|
1641
|
+
this.effectiveResize = computed(() => this.autoSize() ? 'none' : this.resize(), ...(ngDevMode ? [{ debugName: "effectiveResize" }] : /* istanbul ignore next */ []));
|
|
1642
|
+
this.characterCount = computed(() => ({
|
|
1643
|
+
current: (this.value() ?? '').length,
|
|
1644
|
+
max: this.maxLength(),
|
|
1645
|
+
}), ...(ngDevMode ? [{ debugName: "characterCount" }] : /* istanbul ignore next */ []));
|
|
1646
|
+
this.isOverLimit = computed(() => {
|
|
1647
|
+
const max = this.maxLength();
|
|
1648
|
+
if (max === undefined)
|
|
1649
|
+
return false;
|
|
1650
|
+
return this.characterCount().current > max;
|
|
1651
|
+
}, ...(ngDevMode ? [{ debugName: "isOverLimit" }] : /* istanbul ignore next */ []));
|
|
1652
|
+
this.isAtLimit = computed(() => {
|
|
1653
|
+
const max = this.maxLength();
|
|
1654
|
+
if (max === undefined)
|
|
1655
|
+
return false;
|
|
1656
|
+
return this.characterCount().current >= max;
|
|
1657
|
+
}, ...(ngDevMode ? [{ debugName: "isAtLimit" }] : /* istanbul ignore next */ []));
|
|
1658
|
+
this.shouldShowCount = computed(() => this.showCharacterCount() || this.maxLength() !== undefined, ...(ngDevMode ? [{ debugName: "shouldShowCount" }] : /* istanbul ignore next */ []));
|
|
1659
|
+
this.hasError = computed(() => !!this.error() || this.isOverLimit(), ...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
|
|
1660
|
+
this.computedAriaLabel = computed(() => this.ariaLabel() || this.label() || this.placeholder() || null, ...(ngDevMode ? [{ debugName: "computedAriaLabel" }] : /* istanbul ignore next */ []));
|
|
1661
|
+
this.describedBy = computed(() => {
|
|
1662
|
+
if (this.error())
|
|
1663
|
+
return `${this.textareaId}-error`;
|
|
1664
|
+
if (this.success())
|
|
1665
|
+
return `${this.textareaId}-success`;
|
|
1666
|
+
if (this.hint())
|
|
1667
|
+
return `${this.textareaId}-hint`;
|
|
1668
|
+
return null;
|
|
1669
|
+
}, ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
|
|
1670
|
+
this.state = computed(() => {
|
|
1671
|
+
if (this.disabled())
|
|
1672
|
+
return 'disabled';
|
|
1673
|
+
if (this.readonly())
|
|
1674
|
+
return 'readonly';
|
|
1675
|
+
if (this.hasError())
|
|
1676
|
+
return 'error';
|
|
1677
|
+
if (this.success())
|
|
1678
|
+
return 'success';
|
|
1679
|
+
if (this.focused())
|
|
1680
|
+
return 'focused';
|
|
1681
|
+
return 'default';
|
|
1682
|
+
}, ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
|
|
1683
|
+
this.characterCountLabel = TEXTAREA_LABELS.characterCountSuffix;
|
|
1684
|
+
this.onChange = () => { };
|
|
1685
|
+
this.onTouched = () => { };
|
|
1686
|
+
effect(() => {
|
|
1687
|
+
this.value();
|
|
1688
|
+
this.autoSize();
|
|
1689
|
+
this.rows();
|
|
1690
|
+
if (this.autoSize()) {
|
|
1691
|
+
queueMicrotask(() => this.applyAutoSize());
|
|
1692
|
+
}
|
|
1693
|
+
});
|
|
1694
|
+
}
|
|
1695
|
+
writeValue(value) {
|
|
1696
|
+
const safeValue = typeof value === 'string' ? value : '';
|
|
1697
|
+
this.value.set(safeValue);
|
|
1698
|
+
this.cdr.markForCheck();
|
|
1699
|
+
if (this.autoSize()) {
|
|
1700
|
+
queueMicrotask(() => this.applyAutoSize());
|
|
1701
|
+
}
|
|
1702
|
+
}
|
|
1703
|
+
registerOnChange(fn) {
|
|
1704
|
+
this.onChange = fn;
|
|
1705
|
+
}
|
|
1706
|
+
registerOnTouched(fn) {
|
|
1707
|
+
this.onTouched = fn;
|
|
1708
|
+
}
|
|
1709
|
+
setDisabledState(isDisabled) {
|
|
1710
|
+
this.disabled.set(isDisabled);
|
|
1711
|
+
this.cdr.markForCheck();
|
|
1712
|
+
}
|
|
1713
|
+
handleInput(event) {
|
|
1714
|
+
const target = event.target;
|
|
1715
|
+
const newValue = target.value;
|
|
1716
|
+
this.value.set(newValue);
|
|
1717
|
+
this.onChange(newValue);
|
|
1718
|
+
}
|
|
1719
|
+
handleFocus() {
|
|
1720
|
+
this.focusedSignal.set(true);
|
|
1721
|
+
this.inputFocus.emit();
|
|
1722
|
+
}
|
|
1723
|
+
handleBlur() {
|
|
1724
|
+
this.focusedSignal.set(false);
|
|
1725
|
+
this.touched.set(true);
|
|
1726
|
+
this.onTouched();
|
|
1727
|
+
this.inputBlur.emit();
|
|
1728
|
+
}
|
|
1729
|
+
focus() {
|
|
1730
|
+
this.textareaRef?.nativeElement.focus();
|
|
1731
|
+
}
|
|
1732
|
+
applyAutoSize() {
|
|
1733
|
+
const el = this.textareaRef?.nativeElement;
|
|
1734
|
+
if (!el)
|
|
1735
|
+
return;
|
|
1736
|
+
el.style.height = 'auto';
|
|
1737
|
+
el.style.height = `${el.scrollHeight}px`;
|
|
1738
|
+
}
|
|
1739
|
+
hasLabelContent() {
|
|
1740
|
+
return !!this.elementRef.nativeElement.querySelector('[textarea-label]');
|
|
1741
|
+
}
|
|
1742
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PshTextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1743
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: PshTextareaComponent, isStandalone: true, selector: "psh-textarea", 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 }, 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 }, resize: { classPropertyName: "resize", publicName: "resize", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, autoSize: { classPropertyName: "autoSize", publicName: "autoSize", isSignal: true, isRequired: false, transformFunction: null }, showCharacterCount: { classPropertyName: "showCharacterCount", publicName: "showCharacterCount", 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 }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", 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 } }, outputs: { value: "valueChange", disabled: "disabledChange", readonly: "readonlyChange", touched: "touchedChange", inputFocus: "inputFocus", inputBlur: "inputBlur" }, host: { properties: { "class.full-width": "fullWidth()", "class.small": "size() === \"small\"", "class.large": "size() === \"large\"", "class.outlined": "variant() === \"outlined\"", "class.filled": "variant() === \"filled\"", "class.error": "hasError()", "class.success": "!!success() && !hasError()", "class.disabled": "disabled()", "class.readonly": "readonly()", "class.focused": "focused()", "class.auto-size": "autoSize()", "class.over-limit": "isOverLimit()" } }, providers: [
|
|
1744
|
+
{
|
|
1745
|
+
provide: NG_VALUE_ACCESSOR,
|
|
1746
|
+
useExisting: PshTextareaComponent,
|
|
1747
|
+
multi: true,
|
|
1748
|
+
},
|
|
1749
|
+
], viewQueries: [{ propertyName: "textareaRef", first: true, predicate: ["textareaRef"], descendants: true }], ngImport: i0, template: "<div class=\"textarea-container\">\n @if (showLabel()) {\n <label\n class=\"textarea-label\"\n [for]=\"textareaId\"\n (click)=\"focus()\"\n [class.required]=\"required()\"\n >\n <ng-content select=\"[textarea-label]\"></ng-content>\n @if (!hasLabelContent()) {\n {{ label() }}\n }\n </label>\n }\n\n <div class=\"textarea-wrapper\">\n <textarea\n #textareaRef\n [id]=\"textareaId\"\n [rows]=\"rows()\"\n [attr.placeholder]=\"placeholder()\"\n [attr.maxlength]=\"maxLength() ?? null\"\n [attr.aria-label]=\"computedAriaLabel()\"\n [attr.aria-invalid]=\"hasError()\"\n [attr.aria-required]=\"required()\"\n [attr.aria-describedby]=\"describedBy()\"\n [attr.data-state]=\"state()\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly()\"\n [required]=\"required()\"\n [value]=\"value()\"\n [style.resize]=\"effectiveResize()\"\n (input)=\"handleInput($event)\"\n (focus)=\"handleFocus()\"\n (blur)=\"handleBlur()\"\n ></textarea>\n </div>\n\n @if (error() || success() || hint() || shouldShowCount()) {\n <div class=\"textarea-footer\">\n <div class=\"textarea-messages\">\n @if (error()) {\n <div [id]=\"textareaId + '-error'\" class=\"textarea-error\" role=\"alert\">\n <ng-content select=\"[textarea-error]\">\n {{ error() }}\n </ng-content>\n </div>\n } @else if (success()) {\n <div [id]=\"textareaId + '-success'\" class=\"textarea-success\" role=\"status\">\n <ng-content select=\"[textarea-success]\">\n {{ success() }}\n </ng-content>\n </div>\n } @else if (hint()) {\n <div [id]=\"textareaId + '-hint'\" class=\"textarea-hint\">\n <ng-content select=\"[textarea-hint]\">\n {{ hint() }}\n </ng-content>\n </div>\n }\n </div>\n\n @if (shouldShowCount()) {\n <div\n class=\"textarea-count\"\n [class.at-limit]=\"isAtLimit() && !isOverLimit()\"\n [class.over-limit]=\"isOverLimit()\"\n aria-live=\"polite\"\n >\n {{ characterCount().current }}@if (maxLength() !== undefined) {\n <span>/{{ maxLength() }}</span>\n }\n </div>\n }\n </div>\n }\n</div>\n", styles: [":host{display:block;width:100%;max-width:32rem;transition:all var(--animation-duration-default) var(--animation-easing-default)}:host.full-width{max-width:none}.textarea-container{position:relative;width:100%;display:flex;flex-direction:column;gap:var(--form-field-gap)}.textarea-label{display:block;color:var(--text-color);font-size:.875rem;font-weight:500;width:100%;cursor:pointer}.textarea-label.required:after{content:\"*\";color:var(--danger-color);margin-left:.125rem}.textarea-wrapper{position:relative;display:flex;width:100%}textarea{width:100%;min-height:5rem;padding:.625rem 1rem;font-family:inherit;font-size:1rem;line-height:1.5;color:var(--text-color);background:var(--surface-0);border:.125rem solid var(--surface-border);border-radius:var(--border-radius);transition:border-color var(--animation-duration-default) var(--animation-easing-default),box-shadow var(--animation-duration-default) var(--animation-easing-default),background var(--animation-duration-default) var(--animation-easing-default)}textarea:hover:not(:disabled):not(:focus):not([readonly]){border-color:var(--primary-color)}textarea::placeholder{color:var(--text-color-tertiary);opacity:1}textarea:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 .125rem var(--focus-ring-color)}:host.outlined textarea{background:transparent}:host.filled textarea{background:var(--surface-ground);border:.125rem solid var(--surface-border)}:host.filled textarea:hover:not(:disabled):not(:focus):not([readonly]){background:var(--surface-hover)}:host.filled textarea:focus{background:var(--surface-0)}:host.error textarea{border-color:var(--danger-color)}:host.error textarea:focus{box-shadow:0 0 0 .125rem var(--focus-ring-error)}:host.success textarea{border-color:var(--success-color)}:host.success textarea:focus{box-shadow:0 0 0 .125rem var(--focus-ring-success)}:host.disabled textarea{background:var(--surface-ground);cursor:not-allowed;opacity:var(--opacity-disabled)}:host.readonly textarea{background:var(--surface-ground);cursor:default}:host.small textarea{font-size:.875rem;padding:.5rem .75rem;min-height:4rem}:host.large textarea{font-size:1.125rem;padding:.75rem 1.125rem;min-height:6rem}:host.auto-size textarea{overflow:hidden;resize:none}.textarea-footer{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem;width:100%}.textarea-messages{flex:1 1 auto;min-width:0}.textarea-error,.textarea-success,.textarea-hint{font-size:.875rem;line-height:1.4}.textarea-error{color:var(--danger-color)}.textarea-success{color:var(--success-color)}.textarea-hint{color:var(--text-color-secondary)}.textarea-count{flex:0 0 auto;font-size:.8125rem;color:var(--text-color-tertiary);font-variant-numeric:tabular-nums;white-space:nowrap}.textarea-count.at-limit{color:var(--warning-color);font-weight:500}.textarea-count.over-limit{color:var(--danger-color);font-weight:600}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1750
|
+
}
|
|
1751
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PshTextareaComponent, decorators: [{
|
|
1752
|
+
type: Component,
|
|
1753
|
+
args: [{ selector: 'psh-textarea', imports: [CommonModule], providers: [
|
|
1754
|
+
{
|
|
1755
|
+
provide: NG_VALUE_ACCESSOR,
|
|
1756
|
+
useExisting: PshTextareaComponent,
|
|
1757
|
+
multi: true,
|
|
1758
|
+
},
|
|
1759
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
1760
|
+
'[class.full-width]': 'fullWidth()',
|
|
1761
|
+
'[class.small]': 'size() === "small"',
|
|
1762
|
+
'[class.large]': 'size() === "large"',
|
|
1763
|
+
'[class.outlined]': 'variant() === "outlined"',
|
|
1764
|
+
'[class.filled]': 'variant() === "filled"',
|
|
1765
|
+
'[class.error]': 'hasError()',
|
|
1766
|
+
'[class.success]': '!!success() && !hasError()',
|
|
1767
|
+
'[class.disabled]': 'disabled()',
|
|
1768
|
+
'[class.readonly]': 'readonly()',
|
|
1769
|
+
'[class.focused]': 'focused()',
|
|
1770
|
+
'[class.auto-size]': 'autoSize()',
|
|
1771
|
+
'[class.over-limit]': 'isOverLimit()',
|
|
1772
|
+
}, template: "<div class=\"textarea-container\">\n @if (showLabel()) {\n <label\n class=\"textarea-label\"\n [for]=\"textareaId\"\n (click)=\"focus()\"\n [class.required]=\"required()\"\n >\n <ng-content select=\"[textarea-label]\"></ng-content>\n @if (!hasLabelContent()) {\n {{ label() }}\n }\n </label>\n }\n\n <div class=\"textarea-wrapper\">\n <textarea\n #textareaRef\n [id]=\"textareaId\"\n [rows]=\"rows()\"\n [attr.placeholder]=\"placeholder()\"\n [attr.maxlength]=\"maxLength() ?? null\"\n [attr.aria-label]=\"computedAriaLabel()\"\n [attr.aria-invalid]=\"hasError()\"\n [attr.aria-required]=\"required()\"\n [attr.aria-describedby]=\"describedBy()\"\n [attr.data-state]=\"state()\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly()\"\n [required]=\"required()\"\n [value]=\"value()\"\n [style.resize]=\"effectiveResize()\"\n (input)=\"handleInput($event)\"\n (focus)=\"handleFocus()\"\n (blur)=\"handleBlur()\"\n ></textarea>\n </div>\n\n @if (error() || success() || hint() || shouldShowCount()) {\n <div class=\"textarea-footer\">\n <div class=\"textarea-messages\">\n @if (error()) {\n <div [id]=\"textareaId + '-error'\" class=\"textarea-error\" role=\"alert\">\n <ng-content select=\"[textarea-error]\">\n {{ error() }}\n </ng-content>\n </div>\n } @else if (success()) {\n <div [id]=\"textareaId + '-success'\" class=\"textarea-success\" role=\"status\">\n <ng-content select=\"[textarea-success]\">\n {{ success() }}\n </ng-content>\n </div>\n } @else if (hint()) {\n <div [id]=\"textareaId + '-hint'\" class=\"textarea-hint\">\n <ng-content select=\"[textarea-hint]\">\n {{ hint() }}\n </ng-content>\n </div>\n }\n </div>\n\n @if (shouldShowCount()) {\n <div\n class=\"textarea-count\"\n [class.at-limit]=\"isAtLimit() && !isOverLimit()\"\n [class.over-limit]=\"isOverLimit()\"\n aria-live=\"polite\"\n >\n {{ characterCount().current }}@if (maxLength() !== undefined) {\n <span>/{{ maxLength() }}</span>\n }\n </div>\n }\n </div>\n }\n</div>\n", styles: [":host{display:block;width:100%;max-width:32rem;transition:all var(--animation-duration-default) var(--animation-easing-default)}:host.full-width{max-width:none}.textarea-container{position:relative;width:100%;display:flex;flex-direction:column;gap:var(--form-field-gap)}.textarea-label{display:block;color:var(--text-color);font-size:.875rem;font-weight:500;width:100%;cursor:pointer}.textarea-label.required:after{content:\"*\";color:var(--danger-color);margin-left:.125rem}.textarea-wrapper{position:relative;display:flex;width:100%}textarea{width:100%;min-height:5rem;padding:.625rem 1rem;font-family:inherit;font-size:1rem;line-height:1.5;color:var(--text-color);background:var(--surface-0);border:.125rem solid var(--surface-border);border-radius:var(--border-radius);transition:border-color var(--animation-duration-default) var(--animation-easing-default),box-shadow var(--animation-duration-default) var(--animation-easing-default),background var(--animation-duration-default) var(--animation-easing-default)}textarea:hover:not(:disabled):not(:focus):not([readonly]){border-color:var(--primary-color)}textarea::placeholder{color:var(--text-color-tertiary);opacity:1}textarea:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 .125rem var(--focus-ring-color)}:host.outlined textarea{background:transparent}:host.filled textarea{background:var(--surface-ground);border:.125rem solid var(--surface-border)}:host.filled textarea:hover:not(:disabled):not(:focus):not([readonly]){background:var(--surface-hover)}:host.filled textarea:focus{background:var(--surface-0)}:host.error textarea{border-color:var(--danger-color)}:host.error textarea:focus{box-shadow:0 0 0 .125rem var(--focus-ring-error)}:host.success textarea{border-color:var(--success-color)}:host.success textarea:focus{box-shadow:0 0 0 .125rem var(--focus-ring-success)}:host.disabled textarea{background:var(--surface-ground);cursor:not-allowed;opacity:var(--opacity-disabled)}:host.readonly textarea{background:var(--surface-ground);cursor:default}:host.small textarea{font-size:.875rem;padding:.5rem .75rem;min-height:4rem}:host.large textarea{font-size:1.125rem;padding:.75rem 1.125rem;min-height:6rem}:host.auto-size textarea{overflow:hidden;resize:none}.textarea-footer{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem;width:100%}.textarea-messages{flex:1 1 auto;min-width:0}.textarea-error,.textarea-success,.textarea-hint{font-size:.875rem;line-height:1.4}.textarea-error{color:var(--danger-color)}.textarea-success{color:var(--success-color)}.textarea-hint{color:var(--text-color-secondary)}.textarea-count{flex:0 0 auto;font-size:.8125rem;color:var(--text-color-tertiary);font-variant-numeric:tabular-nums;white-space:nowrap}.textarea-count.at-limit{color:var(--warning-color);font-weight:500}.textarea-count.over-limit{color:var(--danger-color);font-weight:600}\n"] }]
|
|
1773
|
+
}], 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"] }], 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 }] }], resize: [{ type: i0.Input, args: [{ isSignal: true, alias: "resize", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], autoSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoSize", required: false }] }], showCharacterCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCharacterCount", 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 }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", 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 }] }], inputFocus: [{ type: i0.Output, args: ["inputFocus"] }], inputBlur: [{ type: i0.Output, args: ["inputBlur"] }], textareaRef: [{
|
|
1774
|
+
type: ViewChild,
|
|
1775
|
+
args: ['textareaRef']
|
|
1776
|
+
}] } });
|
|
1777
|
+
|
|
1597
1778
|
const TOOLTIP_CONFIG = new InjectionToken('TOOLTIP_CONFIG', {
|
|
1598
1779
|
factory: () => ({
|
|
1599
1780
|
variant: 'dark',
|
|
@@ -1745,10 +1926,10 @@ class PshTooltipComponent {
|
|
|
1745
1926
|
generateUniqueId() {
|
|
1746
1927
|
return `psh-tooltip-${Math.random().toString(36).substr(2, 9)}`;
|
|
1747
1928
|
}
|
|
1748
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1749
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
1929
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PshTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1930
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: PshTooltipComponent, isStandalone: true, selector: "psh-tooltip", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, showDelay: { classPropertyName: "showDelay", publicName: "showDelay", isSignal: true, isRequired: false, transformFunction: null }, hideDelay: { classPropertyName: "hideDelay", publicName: "hideDelay", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, autoFlip: { classPropertyName: "autoFlip", publicName: "autoFlip", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { shown: "shown", hidden: "hidden" }, host: { listeners: { "mouseenter": "show()", "mouseleave": "hide()", "focusin": "show()", "focusout": "hide()", "keydown.escape": "hideImmediate()" }, properties: { "style.display": "\"inline-block\"", "style.position": "\"relative\"" } }, ngImport: i0, template: "<div\n class=\"tooltip-wrapper\"\n [attr.id]=\"triggerId()\"\n [attr.aria-describedby]=\"isVisible() ? tooltipId() : null\"\n>\n <ng-content></ng-content>\n\n @if (isVisible()) {\n <div\n [attr.id]=\"tooltipId()\"\n class=\"tooltip\"\n [class.top]=\"computedPosition() === 'top'\"\n [class.bottom]=\"computedPosition() === 'bottom'\"\n [class.left]=\"computedPosition() === 'left'\"\n [class.right]=\"computedPosition() === 'right'\"\n [class.light]=\"variant() === 'light'\"\n [class.dark]=\"variant() === 'dark'\"\n [style.max-width.px]=\"maxWidth()\"\n role=\"tooltip\"\n >\n {{ content() }}\n <div class=\"tooltip-arrow\"></div>\n </div>\n }\n</div>\n", styles: ["@keyframes tooltipFadeIn{0%{opacity:0;transform:translate(-50%) translateY(calc(-1 * var(--spacing-md)))}to{opacity:1;transform:translate(-50%) translateY(calc(-1 * var(--spacing-sm)))}}@keyframes tooltipFadeInBottom{0%{opacity:0;transform:translate(-50%) translateY(var(--spacing-md))}to{opacity:1;transform:translate(-50%) translateY(var(--spacing-sm))}}@keyframes tooltipFadeInLeft{0%{opacity:0;transform:translateY(-50%) translate(calc(-1 * var(--spacing-md)))}to{opacity:1;transform:translateY(-50%) translate(calc(-1 * var(--spacing-sm)))}}@keyframes tooltipFadeInRight{0%{opacity:0;transform:translateY(-50%) translate(var(--spacing-md))}to{opacity:1;transform:translateY(-50%) translate(var(--spacing-sm))}}.tooltip{position:absolute;padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--border-radius);font-size:var(--font-size-sm);line-height:var(--line-height-tight);white-space:normal;word-wrap:break-word;z-index:var(--z-index-tooltip)}.tooltip.dark{background:var(--surface-800);color:var(--surface-0);border:1px solid var(--surface-700)}.tooltip.light{background:var(--surface-card);color:var(--text-color);border:1px solid var(--surface-border);box-shadow:var(--shadow-sm)}.tooltip.top{bottom:100%;left:50%;transform:translate(-50%) translateY(calc(-1 * var(--spacing-sm)));animation:tooltipFadeIn var(--animation-duration-normal) var(--animation-easing-default)}.tooltip.bottom{top:100%;left:50%;transform:translate(-50%) translateY(var(--spacing-sm));animation:tooltipFadeInBottom var(--animation-duration-normal) var(--animation-easing-default)}.tooltip.left{right:100%;top:50%;transform:translateY(-50%) translate(calc(-1 * var(--spacing-sm)));animation:tooltipFadeInLeft var(--animation-duration-normal) var(--animation-easing-default)}.tooltip.right{left:100%;top:50%;transform:translateY(-50%) translate(var(--spacing-sm));animation:tooltipFadeInRight var(--animation-duration-normal) var(--animation-easing-default)}.tooltip-arrow{position:absolute;width:var(--spacing-sm);height:var(--spacing-sm);transform:rotate(45deg)}.tooltip.dark .tooltip-arrow{background:var(--surface-800);border:inherit}.tooltip.light .tooltip-arrow{background:var(--surface-card);border:inherit}.tooltip.top .tooltip-arrow{bottom:calc(-1 * var(--spacing-xs));left:50%;margin-left:calc(-1 * var(--spacing-xs));border-top:none;border-left:none}.tooltip.bottom .tooltip-arrow{top:calc(-1 * var(--spacing-xs));left:50%;margin-left:calc(-1 * var(--spacing-xs));border-bottom:none;border-right:none}.tooltip.left .tooltip-arrow{right:calc(-1 * var(--spacing-xs));top:50%;margin-top:calc(-1 * var(--spacing-xs));border-left:none;border-bottom:none}.tooltip.right .tooltip-arrow{left:calc(-1 * var(--spacing-xs));top:50%;margin-top:calc(-1 * var(--spacing-xs));border-right:none;border-top:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1750
1931
|
}
|
|
1751
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1932
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PshTooltipComponent, decorators: [{
|
|
1752
1933
|
type: Component,
|
|
1753
1934
|
args: [{ selector: 'psh-tooltip', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
1754
1935
|
'(mouseenter)': 'show()',
|
|
@@ -1951,10 +2132,10 @@ class PshMenuComponent {
|
|
|
1951
2132
|
}
|
|
1952
2133
|
}
|
|
1953
2134
|
}
|
|
1954
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1955
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", type: PshMenuComponent, isStandalone: true, selector: "psh-menu", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, ariaLabels: { classPropertyName: "ariaLabels", publicName: "ariaLabels", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, expandedItemIds: { classPropertyName: "expandedItemIds", publicName: "expandedItemIds", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange", expandedItemIds: "expandedItemIdsChange", itemClick: "itemClick", submenuToggle: "submenuToggle" }, ngImport: i0, template: "<nav \n class=\"menu\"\n [class.vertical]=\"mode() === 'vertical'\"\n [class.horizontal]=\"mode() === 'horizontal'\"\n [class.compact]=\"variant() === 'compact'\"\n [class.expanded]=\"variant() === 'expanded'\"\n [class.collapsed]=\"collapsed()\"\n role=\"navigation\"\n [attr.aria-label]=\"'Navigation menu'\"\n [attr.data-state]=\"state()\"\n>\n @if (collapsible()) {\n <button \n class=\"menu-collapse-button\"\n (click)=\"toggleCollapse()\"\n [attr.aria-expanded]=\"!collapsed()\"\n [attr.aria-label]=\"collapsed() ? ariaLabels()['expand'] : ariaLabels()['collapse']\"\n >\n <i class=\"ph ph-caret-left\" aria-hidden=\"true\"></i>\n </button>\n }\n\n <ul class=\"menu-list\" role=\"menubar\">\n @for (item of items(); track item.id; let i = $index) {\n @if (item.divider) {\n <li class=\"menu-divider\" role=\"separator\"></li>\n } @else {\n <li\n class=\"menu-item\"\n [class.has-children]=\"item.children?.length\"\n [class.expanded]=\"isExpanded(item)\"\n [class.disabled]=\"item.disabled\"\n role=\"none\"\n >\n @if (item.path) {\n @if (showTooltip()) {\n <psh-tooltip [content]=\"item.content\" position=\"right\" [showDelay]=\"100\" [hideDelay]=\"0\">\n <a\n class=\"menu-link\"\n [attr.href]=\"item.path\"\n [attr.data-menu-item-id]=\"item.id\"\n [class.active]=\"item.active\"\n [attr.aria-disabled]=\"item.disabled\"\n [attr.aria-expanded]=\"item.children?.length ? isExpanded(item) : null\"\n [attr.aria-label]=\"getAriaLabel(item)\"\n (click)=\"toggleItem(item, $event)\"\n (keydown)=\"handleKeyDown($event, item, i)\"\n role=\"menuitem\"\n [attr.tabindex]=\"item.disabled ? -1 : 0\"\n >\n @if (item.icon) {\n <i class=\"ph ph-{{ item.icon }}\" aria-hidden=\"true\"></i>\n }\n @if (item.badge) {\n <span class=\"menu-badge\" role=\"status\">{{ item.badge }}</span>\n }\n </a>\n </psh-tooltip>\n } @else {\n <a\n class=\"menu-link\"\n [attr.href]=\"item.path\"\n [attr.data-menu-item-id]=\"item.id\"\n [class.active]=\"item.active\"\n [attr.aria-disabled]=\"item.disabled\"\n [attr.aria-expanded]=\"item.children?.length ? isExpanded(item) : null\"\n [attr.aria-label]=\"getAriaLabel(item)\"\n (click)=\"toggleItem(item, $event)\"\n (keydown)=\"handleKeyDown($event, item, i)\"\n role=\"menuitem\"\n [attr.tabindex]=\"item.disabled ? -1 : 0\"\n >\n @if (item.icon) {\n <i class=\"ph ph-{{ item.icon }}\" aria-hidden=\"true\"></i>\n }\n <span class=\"menu-label\">{{ item.content }}</span>\n @if (item.badge) {\n <span class=\"menu-badge\" role=\"status\">{{ item.badge }}</span>\n }\n @if (item.children?.length) {\n <i\n class=\"ph ph-caret-down menu-arrow\"\n [class.expanded]=\"isExpanded(item)\"\n aria-hidden=\"true\"\n ></i>\n }\n </a>\n }\n } @else {\n @if (showTooltip()) {\n <psh-tooltip [content]=\"item.content\" position=\"right\" [showDelay]=\"100\" [hideDelay]=\"0\">\n <button\n type=\"button\"\n class=\"menu-link\"\n [attr.data-menu-item-id]=\"item.id\"\n [class.active]=\"item.active\"\n [attr.aria-disabled]=\"item.disabled\"\n [attr.aria-expanded]=\"item.children?.length ? isExpanded(item) : null\"\n [attr.aria-label]=\"getAriaLabel(item)\"\n (click)=\"toggleItem(item, $event)\"\n (keydown)=\"handleKeyDown($event, item, i)\"\n role=\"menuitem\"\n [attr.tabindex]=\"item.disabled ? -1 : 0\"\n [disabled]=\"item.disabled\"\n >\n @if (item.icon) {\n <i class=\"ph ph-{{ item.icon }}\" aria-hidden=\"true\"></i>\n }\n @if (item.badge) {\n <span class=\"menu-badge\" role=\"status\">{{ item.badge }}</span>\n }\n </button>\n </psh-tooltip>\n } @else {\n <button\n type=\"button\"\n class=\"menu-link\"\n [attr.data-menu-item-id]=\"item.id\"\n [class.active]=\"item.active\"\n [attr.aria-disabled]=\"item.disabled\"\n [attr.aria-expanded]=\"item.children?.length ? isExpanded(item) : null\"\n [attr.aria-label]=\"getAriaLabel(item)\"\n (click)=\"toggleItem(item, $event)\"\n (keydown)=\"handleKeyDown($event, item, i)\"\n role=\"menuitem\"\n [attr.tabindex]=\"item.disabled ? -1 : 0\"\n [disabled]=\"item.disabled\"\n >\n @if (item.icon) {\n <i class=\"ph ph-{{ item.icon }}\" aria-hidden=\"true\"></i>\n }\n <span class=\"menu-label\">{{ item.content }}</span>\n @if (item.badge) {\n <span class=\"menu-badge\" role=\"status\">{{ item.badge }}</span>\n }\n @if (item.children?.length) {\n <i\n class=\"ph ph-caret-down menu-arrow\"\n [class.expanded]=\"isExpanded(item)\"\n aria-hidden=\"true\"\n ></i>\n }\n </button>\n }\n }\n\n @if (item.children?.length) {\n <ul\n class=\"submenu\"\n role=\"menu\"\n [attr.aria-label]=\"item.content + ' submenu'\"\n >\n @for (child of item.children; track child.id) {\n <li class=\"menu-item\" role=\"none\">\n @if (child.path) {\n <a\n class=\"menu-link\"\n [attr.href]=\"child.path\"\n [attr.data-menu-item-id]=\"child.id\"\n [class.active]=\"child.active\"\n [attr.aria-disabled]=\"child.disabled\"\n [attr.aria-label]=\"getAriaLabel(child)\"\n (click)=\"toggleItem(child, $event)\"\n (keydown.enter)=\"toggleItem(child, $event)\"\n (keydown.space)=\"toggleItem(child, $event)\"\n role=\"menuitem\"\n [attr.tabindex]=\"child.disabled ? -1 : 0\"\n >\n @if (child.icon) {\n <i class=\"ph ph-{{ child.icon }}\" aria-hidden=\"true\"></i>\n }\n <span class=\"menu-label\">{{ child.content }}</span>\n @if (child.badge) {\n <span class=\"menu-badge\" role=\"status\">{{ child.badge }}</span>\n }\n </a>\n } @else {\n <button\n type=\"button\"\n class=\"menu-link\"\n [attr.data-menu-item-id]=\"child.id\"\n [class.active]=\"child.active\"\n [attr.aria-disabled]=\"child.disabled\"\n [attr.aria-label]=\"getAriaLabel(child)\"\n (click)=\"toggleItem(child, $event)\"\n (keydown.enter)=\"toggleItem(child, $event)\"\n (keydown.space)=\"toggleItem(child, $event)\"\n role=\"menuitem\"\n [attr.tabindex]=\"child.disabled ? -1 : 0\"\n [disabled]=\"child.disabled\"\n >\n @if (child.icon) {\n <i class=\"ph ph-{{ child.icon }}\" aria-hidden=\"true\"></i>\n }\n <span class=\"menu-label\">{{ child.content }}</span>\n @if (child.badge) {\n <span class=\"menu-badge\" role=\"status\">{{ child.badge }}</span>\n }\n </button>\n }\n </li>\n }\n </ul>\n }\n </li>\n }\n }\n </ul>\n</nav>", styles: [".menu{background:var(--surface-card);border-radius:var(--border-radius);transition:width .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:visible;width:100%;min-width:0}.menu.vertical{display:flex;flex-direction:column;min-width:0}.menu.horizontal{display:flex;flex-direction:row;align-items:center;padding:var(--spacing-sm);gap:var(--spacing-sm);overflow-x:auto}.menu.collapsed{width:64px;min-width:64px}.menu.compact .menu-link{padding:var(--spacing-xs) var(--spacing-sm);min-height:36px;gap:var(--spacing-xs)}.menu.compact .menu-link i{font-size:1rem}.menu.compact .menu-list{gap:2px}.menu.compact .submenu .menu-link{padding-left:calc(var(--spacing-sm) * 2);font-size:.9em}.menu.expanded .menu-link{padding:var(--spacing-md) var(--spacing-lg);min-height:52px;gap:var(--spacing-md)}.menu.expanded .menu-link i{font-size:1.4rem;width:1.4rem;height:1.4rem}.menu.expanded .menu-list{gap:var(--spacing-sm)}.menu.expanded .submenu .menu-link{padding-left:calc(var(--spacing-lg) * 2)}.menu-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--spacing-xs);width:100%;min-width:0}.horizontal .menu-list{flex-direction:row;flex-wrap:nowrap;gap:var(--spacing-sm)}.menu-item{position:relative;width:100%;min-width:0}.horizontal .menu-item{width:auto}.menu-link{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);color:var(--text-color);text-decoration:none;transition:all .2s ease;cursor:pointer;border-radius:var(--border-radius);min-height:44px;position:relative;width:100%;min-width:0;background:none;border:none;text-align:left;font:inherit}.menu-link:hover:not([aria-disabled=true]){background:var(--surface-hover);color:var(--primary-color);transform:translate(2px)}.menu-item.disabled .menu-link,.menu-link[aria-disabled=true]{opacity:.5;cursor:not-allowed;pointer-events:none}.menu-item.disabled .menu-link:hover{background:transparent;color:var(--text-color);transform:none}.menu-link.active{background:var(--primary-color);color:var(--primary-color-text)}.menu.collapsed .menu-link{padding:var(--spacing-sm);justify-content:center}.menu-arrow{margin-left:auto;transition:transform .3s cubic-bezier(.4,0,.2,1);font-size:1.1rem;color:var(--text-color-secondary);flex-shrink:0}.menu-arrow.expanded{transform:rotate(-180deg)}.menu.collapsed .menu-arrow{display:none}.submenu{overflow:hidden;max-height:0;transition:max-height .3s cubic-bezier(.4,0,.2,1);background:var(--surface-ground);border-radius:var(--border-radius);margin:0 var(--spacing-sm);width:auto;min-width:0}.menu-item.expanded>.submenu{max-height:1000px;margin-top:var(--spacing-xs);margin-bottom:var(--spacing-xs)}.menu.collapsed .submenu{display:none}.submenu .menu-link{padding-left:calc(var(--spacing-md) * 2);font-size:.95em}.submenu .menu-link:hover{transform:translate(4px)}.menu-badge{background:var(--primary-color);color:var(--primary-color-text);padding:2px var(--spacing-xs);border-radius:var(--border-radius);font-size:var(--font-size-xs);margin-left:auto;flex-shrink:0}.menu-divider{height:1px;background:var(--surface-border);margin:var(--spacing-sm) var(--spacing-md);opacity:.5}.menu-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .3s ease;min-width:0;flex:1}.menu.collapsed .menu-label{opacity:0;width:0}.menu.collapsed psh-tooltip{display:block;width:100%}.menu-link i{font-size:1.2rem;flex-shrink:0;width:1.2rem;height:1.2rem;display:flex;align-items:center;justify-content:center}.menu-collapse-button{position:absolute;top:var(--spacing-sm);right:calc(-1 * var(--spacing-lg));width:28px;height:28px;background:var(--surface-card);border:1px solid var(--surface-border);border-radius:var(--border-radius);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;color:var(--text-color-secondary);z-index:2;box-shadow:var(--shadow-sm)}.menu-collapse-button:hover{background:var(--surface-hover);color:var(--primary-color);transform:scale(1.05);box-shadow:var(--shadow-md)}.menu-collapse-button:focus{outline:none;box-shadow:0 0 0 2px rgba(var(--primary-color-rgb),.2)}.menu-collapse-button i{font-size:1rem;transition:transform .3s ease}.menu.collapsed .menu-collapse-button i{transform:rotate(180deg)}@media(max-width:768px){.menu.horizontal{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}.menu.horizontal::-webkit-scrollbar{display:none}.menu.vertical:not(.collapsed){min-width:200px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: PshTooltipComponent, selector: "psh-tooltip", inputs: ["variant", "position", "showDelay", "hideDelay", "maxWidth", "autoFlip", "content", "disabled", "id"], outputs: ["shown", "hidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2135
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PshMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2136
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: PshMenuComponent, isStandalone: true, selector: "psh-menu", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, ariaLabels: { classPropertyName: "ariaLabels", publicName: "ariaLabels", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, expandedItemIds: { classPropertyName: "expandedItemIds", publicName: "expandedItemIds", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange", expandedItemIds: "expandedItemIdsChange", itemClick: "itemClick", submenuToggle: "submenuToggle" }, ngImport: i0, template: "<nav \n class=\"menu\"\n [class.vertical]=\"mode() === 'vertical'\"\n [class.horizontal]=\"mode() === 'horizontal'\"\n [class.compact]=\"variant() === 'compact'\"\n [class.expanded]=\"variant() === 'expanded'\"\n [class.collapsed]=\"collapsed()\"\n role=\"navigation\"\n [attr.aria-label]=\"'Navigation menu'\"\n [attr.data-state]=\"state()\"\n>\n @if (collapsible()) {\n <button \n class=\"menu-collapse-button\"\n (click)=\"toggleCollapse()\"\n [attr.aria-expanded]=\"!collapsed()\"\n [attr.aria-label]=\"collapsed() ? ariaLabels()['expand'] : ariaLabels()['collapse']\"\n >\n <i class=\"ph ph-caret-left\" aria-hidden=\"true\"></i>\n </button>\n }\n\n <ul class=\"menu-list\" role=\"menubar\">\n @for (item of items(); track item.id; let i = $index) {\n @if (item.divider) {\n <li class=\"menu-divider\" role=\"separator\"></li>\n } @else {\n <li\n class=\"menu-item\"\n [class.has-children]=\"item.children?.length\"\n [class.expanded]=\"isExpanded(item)\"\n [class.disabled]=\"item.disabled\"\n role=\"none\"\n >\n @if (item.path) {\n @if (showTooltip()) {\n <psh-tooltip [content]=\"item.content\" position=\"right\" [showDelay]=\"100\" [hideDelay]=\"0\">\n <a\n class=\"menu-link\"\n [attr.href]=\"item.path\"\n [attr.data-menu-item-id]=\"item.id\"\n [class.active]=\"item.active\"\n [attr.aria-disabled]=\"item.disabled\"\n [attr.aria-expanded]=\"item.children?.length ? isExpanded(item) : null\"\n [attr.aria-label]=\"getAriaLabel(item)\"\n (click)=\"toggleItem(item, $event)\"\n (keydown)=\"handleKeyDown($event, item, i)\"\n role=\"menuitem\"\n [attr.tabindex]=\"item.disabled ? -1 : 0\"\n >\n @if (item.icon) {\n <i class=\"ph ph-{{ item.icon }}\" aria-hidden=\"true\"></i>\n }\n @if (item.badge) {\n <span class=\"menu-badge\" role=\"status\">{{ item.badge }}</span>\n }\n </a>\n </psh-tooltip>\n } @else {\n <a\n class=\"menu-link\"\n [attr.href]=\"item.path\"\n [attr.data-menu-item-id]=\"item.id\"\n [class.active]=\"item.active\"\n [attr.aria-disabled]=\"item.disabled\"\n [attr.aria-expanded]=\"item.children?.length ? isExpanded(item) : null\"\n [attr.aria-label]=\"getAriaLabel(item)\"\n (click)=\"toggleItem(item, $event)\"\n (keydown)=\"handleKeyDown($event, item, i)\"\n role=\"menuitem\"\n [attr.tabindex]=\"item.disabled ? -1 : 0\"\n >\n @if (item.icon) {\n <i class=\"ph ph-{{ item.icon }}\" aria-hidden=\"true\"></i>\n }\n <span class=\"menu-label\">{{ item.content }}</span>\n @if (item.badge) {\n <span class=\"menu-badge\" role=\"status\">{{ item.badge }}</span>\n }\n @if (item.children?.length) {\n <i\n class=\"ph ph-caret-down menu-arrow\"\n [class.expanded]=\"isExpanded(item)\"\n aria-hidden=\"true\"\n ></i>\n }\n </a>\n }\n } @else {\n @if (showTooltip()) {\n <psh-tooltip [content]=\"item.content\" position=\"right\" [showDelay]=\"100\" [hideDelay]=\"0\">\n <button\n type=\"button\"\n class=\"menu-link\"\n [attr.data-menu-item-id]=\"item.id\"\n [class.active]=\"item.active\"\n [attr.aria-disabled]=\"item.disabled\"\n [attr.aria-expanded]=\"item.children?.length ? isExpanded(item) : null\"\n [attr.aria-label]=\"getAriaLabel(item)\"\n (click)=\"toggleItem(item, $event)\"\n (keydown)=\"handleKeyDown($event, item, i)\"\n role=\"menuitem\"\n [attr.tabindex]=\"item.disabled ? -1 : 0\"\n [disabled]=\"item.disabled\"\n >\n @if (item.icon) {\n <i class=\"ph ph-{{ item.icon }}\" aria-hidden=\"true\"></i>\n }\n @if (item.badge) {\n <span class=\"menu-badge\" role=\"status\">{{ item.badge }}</span>\n }\n </button>\n </psh-tooltip>\n } @else {\n <button\n type=\"button\"\n class=\"menu-link\"\n [attr.data-menu-item-id]=\"item.id\"\n [class.active]=\"item.active\"\n [attr.aria-disabled]=\"item.disabled\"\n [attr.aria-expanded]=\"item.children?.length ? isExpanded(item) : null\"\n [attr.aria-label]=\"getAriaLabel(item)\"\n (click)=\"toggleItem(item, $event)\"\n (keydown)=\"handleKeyDown($event, item, i)\"\n role=\"menuitem\"\n [attr.tabindex]=\"item.disabled ? -1 : 0\"\n [disabled]=\"item.disabled\"\n >\n @if (item.icon) {\n <i class=\"ph ph-{{ item.icon }}\" aria-hidden=\"true\"></i>\n }\n <span class=\"menu-label\">{{ item.content }}</span>\n @if (item.badge) {\n <span class=\"menu-badge\" role=\"status\">{{ item.badge }}</span>\n }\n @if (item.children?.length) {\n <i\n class=\"ph ph-caret-down menu-arrow\"\n [class.expanded]=\"isExpanded(item)\"\n aria-hidden=\"true\"\n ></i>\n }\n </button>\n }\n }\n\n @if (item.children?.length) {\n <ul\n class=\"submenu\"\n role=\"menu\"\n [attr.aria-label]=\"item.content + ' submenu'\"\n >\n @for (child of item.children; track child.id) {\n <li class=\"menu-item\" role=\"none\">\n @if (child.path) {\n <a\n class=\"menu-link\"\n [attr.href]=\"child.path\"\n [attr.data-menu-item-id]=\"child.id\"\n [class.active]=\"child.active\"\n [attr.aria-disabled]=\"child.disabled\"\n [attr.aria-label]=\"getAriaLabel(child)\"\n (click)=\"toggleItem(child, $event)\"\n (keydown.enter)=\"toggleItem(child, $event)\"\n (keydown.space)=\"toggleItem(child, $event)\"\n role=\"menuitem\"\n [attr.tabindex]=\"child.disabled ? -1 : 0\"\n >\n @if (child.icon) {\n <i class=\"ph ph-{{ child.icon }}\" aria-hidden=\"true\"></i>\n }\n <span class=\"menu-label\">{{ child.content }}</span>\n @if (child.badge) {\n <span class=\"menu-badge\" role=\"status\">{{ child.badge }}</span>\n }\n </a>\n } @else {\n <button\n type=\"button\"\n class=\"menu-link\"\n [attr.data-menu-item-id]=\"child.id\"\n [class.active]=\"child.active\"\n [attr.aria-disabled]=\"child.disabled\"\n [attr.aria-label]=\"getAriaLabel(child)\"\n (click)=\"toggleItem(child, $event)\"\n (keydown.enter)=\"toggleItem(child, $event)\"\n (keydown.space)=\"toggleItem(child, $event)\"\n role=\"menuitem\"\n [attr.tabindex]=\"child.disabled ? -1 : 0\"\n [disabled]=\"child.disabled\"\n >\n @if (child.icon) {\n <i class=\"ph ph-{{ child.icon }}\" aria-hidden=\"true\"></i>\n }\n <span class=\"menu-label\">{{ child.content }}</span>\n @if (child.badge) {\n <span class=\"menu-badge\" role=\"status\">{{ child.badge }}</span>\n }\n </button>\n }\n </li>\n }\n </ul>\n }\n </li>\n }\n }\n </ul>\n</nav>", styles: [".menu{background:var(--surface-card);border-radius:var(--border-radius);transition:width .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:visible;width:100%;min-width:0}.menu.vertical{display:flex;flex-direction:column;min-width:0}.menu.horizontal{display:flex;flex-direction:row;align-items:center;padding:var(--spacing-sm);gap:var(--spacing-sm);overflow-x:auto}.menu.collapsed{width:64px;min-width:64px}.menu.compact .menu-link{padding:var(--spacing-xs) var(--spacing-sm);min-height:36px;gap:var(--spacing-xs)}.menu.compact .menu-link i{font-size:1rem}.menu.compact .menu-list{gap:2px}.menu.compact .submenu .menu-link{padding-left:calc(var(--spacing-sm) * 2);font-size:.9em}.menu.expanded .menu-link{padding:var(--spacing-md) var(--spacing-lg);min-height:52px;gap:var(--spacing-md)}.menu.expanded .menu-link i{font-size:1.4rem;width:1.4rem;height:1.4rem}.menu.expanded .menu-list{gap:var(--spacing-sm)}.menu.expanded .submenu .menu-link{padding-left:calc(var(--spacing-lg) * 2)}.menu-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--spacing-xs);width:100%;min-width:0}.horizontal .menu-list{flex-direction:row;flex-wrap:nowrap;gap:var(--spacing-sm)}.menu-item{position:relative;width:100%;min-width:0}.horizontal .menu-item{width:auto}.menu-link{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);color:var(--text-color);text-decoration:none;transition:all .2s ease;cursor:pointer;border-radius:var(--border-radius);min-height:44px;position:relative;width:100%;min-width:0;background:none;border:none;text-align:left;font:inherit}.menu-link:hover:not([aria-disabled=true]){background:var(--surface-hover);color:var(--primary-color);transform:translate(2px)}.menu-item.disabled .menu-link,.menu-link[aria-disabled=true]{opacity:.5;cursor:not-allowed;pointer-events:none}.menu-item.disabled .menu-link:hover{background:transparent;color:var(--text-color);transform:none}.menu-link.active{background:var(--primary-color);color:var(--primary-color-text)}.menu.collapsed .menu-link{padding:var(--spacing-sm);justify-content:center}.menu-arrow{margin-left:auto;transition:transform .3s cubic-bezier(.4,0,.2,1);font-size:1.1rem;color:var(--text-color-secondary);flex-shrink:0}.menu-arrow.expanded{transform:rotate(-180deg)}.menu.collapsed .menu-arrow{display:none}.submenu{overflow:hidden;max-height:0;transition:max-height .3s cubic-bezier(.4,0,.2,1);background:var(--surface-ground);border-radius:var(--border-radius);margin:0 var(--spacing-sm);width:auto;min-width:0}.menu-item.expanded>.submenu{max-height:1000px;margin-top:var(--spacing-xs);margin-bottom:var(--spacing-xs)}.menu.collapsed .submenu{display:none}.submenu .menu-link{padding-left:calc(var(--spacing-md) * 2);font-size:.95em}.submenu .menu-link:hover{transform:translate(4px)}.menu-badge{background:var(--primary-color);color:var(--primary-color-text);padding:2px var(--spacing-xs);border-radius:var(--border-radius);font-size:var(--font-size-xs);margin-left:auto;flex-shrink:0}.menu-divider{height:1px;background:var(--surface-border);margin:var(--spacing-sm) var(--spacing-md);opacity:.5}.menu-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .3s ease;min-width:0;flex:1}.menu.collapsed .menu-label{opacity:0;width:0}.menu.collapsed psh-tooltip{display:block;width:100%}.menu-link i{font-size:1.2rem;flex-shrink:0;width:1.2rem;height:1.2rem;display:flex;align-items:center;justify-content:center}.menu-collapse-button{position:absolute;top:var(--spacing-sm);right:calc(-1 * var(--spacing-lg));width:28px;height:28px;background:var(--surface-card);border:1px solid var(--surface-border);border-radius:var(--border-radius);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;color:var(--text-color-secondary);z-index:2;box-shadow:var(--shadow-sm)}.menu-collapse-button:hover{background:var(--surface-hover);color:var(--primary-color);transform:scale(1.05);box-shadow:var(--shadow-md)}.menu-collapse-button:focus{outline:none;box-shadow:0 0 0 2px rgba(var(--primary-color-rgb),.2)}.menu-collapse-button i{font-size:1rem;transition:transform .3s ease}.menu.collapsed .menu-collapse-button i{transform:rotate(180deg)}@media(max-width:768px){.menu.horizontal{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}.menu.horizontal::-webkit-scrollbar{display:none}.menu.vertical:not(.collapsed){min-width:200px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: PshTooltipComponent, selector: "psh-tooltip", inputs: ["variant", "position", "showDelay", "hideDelay", "maxWidth", "autoFlip", "content", "disabled", "id"], outputs: ["shown", "hidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1956
2137
|
}
|
|
1957
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
2138
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PshMenuComponent, decorators: [{
|
|
1958
2139
|
type: Component,
|
|
1959
2140
|
args: [{ selector: 'psh-menu', imports: [CommonModule, PshTooltipComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav \n class=\"menu\"\n [class.vertical]=\"mode() === 'vertical'\"\n [class.horizontal]=\"mode() === 'horizontal'\"\n [class.compact]=\"variant() === 'compact'\"\n [class.expanded]=\"variant() === 'expanded'\"\n [class.collapsed]=\"collapsed()\"\n role=\"navigation\"\n [attr.aria-label]=\"'Navigation menu'\"\n [attr.data-state]=\"state()\"\n>\n @if (collapsible()) {\n <button \n class=\"menu-collapse-button\"\n (click)=\"toggleCollapse()\"\n [attr.aria-expanded]=\"!collapsed()\"\n [attr.aria-label]=\"collapsed() ? ariaLabels()['expand'] : ariaLabels()['collapse']\"\n >\n <i class=\"ph ph-caret-left\" aria-hidden=\"true\"></i>\n </button>\n }\n\n <ul class=\"menu-list\" role=\"menubar\">\n @for (item of items(); track item.id; let i = $index) {\n @if (item.divider) {\n <li class=\"menu-divider\" role=\"separator\"></li>\n } @else {\n <li\n class=\"menu-item\"\n [class.has-children]=\"item.children?.length\"\n [class.expanded]=\"isExpanded(item)\"\n [class.disabled]=\"item.disabled\"\n role=\"none\"\n >\n @if (item.path) {\n @if (showTooltip()) {\n <psh-tooltip [content]=\"item.content\" position=\"right\" [showDelay]=\"100\" [hideDelay]=\"0\">\n <a\n class=\"menu-link\"\n [attr.href]=\"item.path\"\n [attr.data-menu-item-id]=\"item.id\"\n [class.active]=\"item.active\"\n [attr.aria-disabled]=\"item.disabled\"\n [attr.aria-expanded]=\"item.children?.length ? isExpanded(item) : null\"\n [attr.aria-label]=\"getAriaLabel(item)\"\n (click)=\"toggleItem(item, $event)\"\n (keydown)=\"handleKeyDown($event, item, i)\"\n role=\"menuitem\"\n [attr.tabindex]=\"item.disabled ? -1 : 0\"\n >\n @if (item.icon) {\n <i class=\"ph ph-{{ item.icon }}\" aria-hidden=\"true\"></i>\n }\n @if (item.badge) {\n <span class=\"menu-badge\" role=\"status\">{{ item.badge }}</span>\n }\n </a>\n </psh-tooltip>\n } @else {\n <a\n class=\"menu-link\"\n [attr.href]=\"item.path\"\n [attr.data-menu-item-id]=\"item.id\"\n [class.active]=\"item.active\"\n [attr.aria-disabled]=\"item.disabled\"\n [attr.aria-expanded]=\"item.children?.length ? isExpanded(item) : null\"\n [attr.aria-label]=\"getAriaLabel(item)\"\n (click)=\"toggleItem(item, $event)\"\n (keydown)=\"handleKeyDown($event, item, i)\"\n role=\"menuitem\"\n [attr.tabindex]=\"item.disabled ? -1 : 0\"\n >\n @if (item.icon) {\n <i class=\"ph ph-{{ item.icon }}\" aria-hidden=\"true\"></i>\n }\n <span class=\"menu-label\">{{ item.content }}</span>\n @if (item.badge) {\n <span class=\"menu-badge\" role=\"status\">{{ item.badge }}</span>\n }\n @if (item.children?.length) {\n <i\n class=\"ph ph-caret-down menu-arrow\"\n [class.expanded]=\"isExpanded(item)\"\n aria-hidden=\"true\"\n ></i>\n }\n </a>\n }\n } @else {\n @if (showTooltip()) {\n <psh-tooltip [content]=\"item.content\" position=\"right\" [showDelay]=\"100\" [hideDelay]=\"0\">\n <button\n type=\"button\"\n class=\"menu-link\"\n [attr.data-menu-item-id]=\"item.id\"\n [class.active]=\"item.active\"\n [attr.aria-disabled]=\"item.disabled\"\n [attr.aria-expanded]=\"item.children?.length ? isExpanded(item) : null\"\n [attr.aria-label]=\"getAriaLabel(item)\"\n (click)=\"toggleItem(item, $event)\"\n (keydown)=\"handleKeyDown($event, item, i)\"\n role=\"menuitem\"\n [attr.tabindex]=\"item.disabled ? -1 : 0\"\n [disabled]=\"item.disabled\"\n >\n @if (item.icon) {\n <i class=\"ph ph-{{ item.icon }}\" aria-hidden=\"true\"></i>\n }\n @if (item.badge) {\n <span class=\"menu-badge\" role=\"status\">{{ item.badge }}</span>\n }\n </button>\n </psh-tooltip>\n } @else {\n <button\n type=\"button\"\n class=\"menu-link\"\n [attr.data-menu-item-id]=\"item.id\"\n [class.active]=\"item.active\"\n [attr.aria-disabled]=\"item.disabled\"\n [attr.aria-expanded]=\"item.children?.length ? isExpanded(item) : null\"\n [attr.aria-label]=\"getAriaLabel(item)\"\n (click)=\"toggleItem(item, $event)\"\n (keydown)=\"handleKeyDown($event, item, i)\"\n role=\"menuitem\"\n [attr.tabindex]=\"item.disabled ? -1 : 0\"\n [disabled]=\"item.disabled\"\n >\n @if (item.icon) {\n <i class=\"ph ph-{{ item.icon }}\" aria-hidden=\"true\"></i>\n }\n <span class=\"menu-label\">{{ item.content }}</span>\n @if (item.badge) {\n <span class=\"menu-badge\" role=\"status\">{{ item.badge }}</span>\n }\n @if (item.children?.length) {\n <i\n class=\"ph ph-caret-down menu-arrow\"\n [class.expanded]=\"isExpanded(item)\"\n aria-hidden=\"true\"\n ></i>\n }\n </button>\n }\n }\n\n @if (item.children?.length) {\n <ul\n class=\"submenu\"\n role=\"menu\"\n [attr.aria-label]=\"item.content + ' submenu'\"\n >\n @for (child of item.children; track child.id) {\n <li class=\"menu-item\" role=\"none\">\n @if (child.path) {\n <a\n class=\"menu-link\"\n [attr.href]=\"child.path\"\n [attr.data-menu-item-id]=\"child.id\"\n [class.active]=\"child.active\"\n [attr.aria-disabled]=\"child.disabled\"\n [attr.aria-label]=\"getAriaLabel(child)\"\n (click)=\"toggleItem(child, $event)\"\n (keydown.enter)=\"toggleItem(child, $event)\"\n (keydown.space)=\"toggleItem(child, $event)\"\n role=\"menuitem\"\n [attr.tabindex]=\"child.disabled ? -1 : 0\"\n >\n @if (child.icon) {\n <i class=\"ph ph-{{ child.icon }}\" aria-hidden=\"true\"></i>\n }\n <span class=\"menu-label\">{{ child.content }}</span>\n @if (child.badge) {\n <span class=\"menu-badge\" role=\"status\">{{ child.badge }}</span>\n }\n </a>\n } @else {\n <button\n type=\"button\"\n class=\"menu-link\"\n [attr.data-menu-item-id]=\"child.id\"\n [class.active]=\"child.active\"\n [attr.aria-disabled]=\"child.disabled\"\n [attr.aria-label]=\"getAriaLabel(child)\"\n (click)=\"toggleItem(child, $event)\"\n (keydown.enter)=\"toggleItem(child, $event)\"\n (keydown.space)=\"toggleItem(child, $event)\"\n role=\"menuitem\"\n [attr.tabindex]=\"child.disabled ? -1 : 0\"\n [disabled]=\"child.disabled\"\n >\n @if (child.icon) {\n <i class=\"ph ph-{{ child.icon }}\" aria-hidden=\"true\"></i>\n }\n <span class=\"menu-label\">{{ child.content }}</span>\n @if (child.badge) {\n <span class=\"menu-badge\" role=\"status\">{{ child.badge }}</span>\n }\n </button>\n }\n </li>\n }\n </ul>\n }\n </li>\n }\n }\n </ul>\n</nav>", styles: [".menu{background:var(--surface-card);border-radius:var(--border-radius);transition:width .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:visible;width:100%;min-width:0}.menu.vertical{display:flex;flex-direction:column;min-width:0}.menu.horizontal{display:flex;flex-direction:row;align-items:center;padding:var(--spacing-sm);gap:var(--spacing-sm);overflow-x:auto}.menu.collapsed{width:64px;min-width:64px}.menu.compact .menu-link{padding:var(--spacing-xs) var(--spacing-sm);min-height:36px;gap:var(--spacing-xs)}.menu.compact .menu-link i{font-size:1rem}.menu.compact .menu-list{gap:2px}.menu.compact .submenu .menu-link{padding-left:calc(var(--spacing-sm) * 2);font-size:.9em}.menu.expanded .menu-link{padding:var(--spacing-md) var(--spacing-lg);min-height:52px;gap:var(--spacing-md)}.menu.expanded .menu-link i{font-size:1.4rem;width:1.4rem;height:1.4rem}.menu.expanded .menu-list{gap:var(--spacing-sm)}.menu.expanded .submenu .menu-link{padding-left:calc(var(--spacing-lg) * 2)}.menu-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--spacing-xs);width:100%;min-width:0}.horizontal .menu-list{flex-direction:row;flex-wrap:nowrap;gap:var(--spacing-sm)}.menu-item{position:relative;width:100%;min-width:0}.horizontal .menu-item{width:auto}.menu-link{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);color:var(--text-color);text-decoration:none;transition:all .2s ease;cursor:pointer;border-radius:var(--border-radius);min-height:44px;position:relative;width:100%;min-width:0;background:none;border:none;text-align:left;font:inherit}.menu-link:hover:not([aria-disabled=true]){background:var(--surface-hover);color:var(--primary-color);transform:translate(2px)}.menu-item.disabled .menu-link,.menu-link[aria-disabled=true]{opacity:.5;cursor:not-allowed;pointer-events:none}.menu-item.disabled .menu-link:hover{background:transparent;color:var(--text-color);transform:none}.menu-link.active{background:var(--primary-color);color:var(--primary-color-text)}.menu.collapsed .menu-link{padding:var(--spacing-sm);justify-content:center}.menu-arrow{margin-left:auto;transition:transform .3s cubic-bezier(.4,0,.2,1);font-size:1.1rem;color:var(--text-color-secondary);flex-shrink:0}.menu-arrow.expanded{transform:rotate(-180deg)}.menu.collapsed .menu-arrow{display:none}.submenu{overflow:hidden;max-height:0;transition:max-height .3s cubic-bezier(.4,0,.2,1);background:var(--surface-ground);border-radius:var(--border-radius);margin:0 var(--spacing-sm);width:auto;min-width:0}.menu-item.expanded>.submenu{max-height:1000px;margin-top:var(--spacing-xs);margin-bottom:var(--spacing-xs)}.menu.collapsed .submenu{display:none}.submenu .menu-link{padding-left:calc(var(--spacing-md) * 2);font-size:.95em}.submenu .menu-link:hover{transform:translate(4px)}.menu-badge{background:var(--primary-color);color:var(--primary-color-text);padding:2px var(--spacing-xs);border-radius:var(--border-radius);font-size:var(--font-size-xs);margin-left:auto;flex-shrink:0}.menu-divider{height:1px;background:var(--surface-border);margin:var(--spacing-sm) var(--spacing-md);opacity:.5}.menu-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .3s ease;min-width:0;flex:1}.menu.collapsed .menu-label{opacity:0;width:0}.menu.collapsed psh-tooltip{display:block;width:100%}.menu-link i{font-size:1.2rem;flex-shrink:0;width:1.2rem;height:1.2rem;display:flex;align-items:center;justify-content:center}.menu-collapse-button{position:absolute;top:var(--spacing-sm);right:calc(-1 * var(--spacing-lg));width:28px;height:28px;background:var(--surface-card);border:1px solid var(--surface-border);border-radius:var(--border-radius);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;color:var(--text-color-secondary);z-index:2;box-shadow:var(--shadow-sm)}.menu-collapse-button:hover{background:var(--surface-hover);color:var(--primary-color);transform:scale(1.05);box-shadow:var(--shadow-md)}.menu-collapse-button:focus{outline:none;box-shadow:0 0 0 2px rgba(var(--primary-color-rgb),.2)}.menu-collapse-button i{font-size:1rem;transition:transform .3s ease}.menu.collapsed .menu-collapse-button i{transform:rotate(180deg)}@media(max-width:768px){.menu.horizontal{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}.menu.horizontal::-webkit-scrollbar{display:none}.menu.vertical:not(.collapsed){min-width:200px}}\n"] }]
|
|
1960
2141
|
}], 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"] }] } });
|
|
@@ -2045,10 +2226,10 @@ class ModalService {
|
|
|
2045
2226
|
isRegistered(id) {
|
|
2046
2227
|
return this.modalsSignal().has(id);
|
|
2047
2228
|
}
|
|
2048
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
2049
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.
|
|
2229
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
2230
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ModalService, providedIn: 'root' }); }
|
|
2050
2231
|
}
|
|
2051
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
2232
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ModalService, decorators: [{
|
|
2052
2233
|
type: Injectable,
|
|
2053
2234
|
args: [{
|
|
2054
2235
|
providedIn: 'root'
|
|
@@ -2417,10 +2598,10 @@ class PshModalComponent {
|
|
|
2417
2598
|
this.modalService.unregister(this.modalId);
|
|
2418
2599
|
this.detachModalFromBody();
|
|
2419
2600
|
}
|
|
2420
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
2421
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
2601
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PshModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2602
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: PshModalComponent, isStandalone: true, selector: "psh-modal", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showClose: { classPropertyName: "showClose", publicName: "showClose", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdrop: { classPropertyName: "closeOnBackdrop", publicName: "closeOnBackdrop", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, preventScroll: { classPropertyName: "preventScroll", publicName: "preventScroll", isSignal: true, isRequired: false, transformFunction: null }, showFooter: { classPropertyName: "showFooter", publicName: "showFooter", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, dismissLabel: { classPropertyName: "dismissLabel", publicName: "dismissLabel", isSignal: true, isRequired: false, transformFunction: null }, confirmLabel: { classPropertyName: "confirmLabel", publicName: "confirmLabel", isSignal: true, isRequired: false, transformFunction: null }, cancelLabel: { classPropertyName: "cancelLabel", publicName: "cancelLabel", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, backdropClass: { classPropertyName: "backdropClass", publicName: "backdropClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", closed: "closed", confirmed: "confirmed" }, queries: [{ propertyName: "customFooter", first: true, predicate: ["modalFooter"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "modalBackdrop", first: true, predicate: ["modalBackdrop"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n #modalBackdrop\n [class]=\"'modal-backdrop ' + backdropClass()\"\n [class.open]=\"open()\"\n (click)=\"handleBackdropClick($event)\"\n role=\"dialog\"\n aria-modal=\"true\"\n [attr.aria-hidden]=\"!open()\"\n [attr.aria-labelledby]=\"modalDialogId() + '-title'\"\n [attr.aria-describedby]=\"modalDescriptionId()\"\n [attr.data-state]=\"state()\"\n>\n <div\n [class]=\"'modal-container ' + styleClass()\"\n [class.small]=\"size() === 'small'\"\n [class.medium]=\"size() === 'medium'\"\n [class.large]=\"size() === 'large'\"\n [attr.id]=\"modalDialogId()\"\n role=\"document\"\n >\n <div class=\"modal-content-wrapper\">\n <div class=\"modal-header\">\n <h2 class=\"modal-title\" [attr.id]=\"modalDialogId() + '-title'\">\n <ng-content select=\"[modal-title]\">{{ title() }}</ng-content>\n </h2>\n @if (showClose()) {\n <button\n type=\"button\"\n class=\"modal-close\"\n (click)=\"handleClose()\"\n [attr.aria-label]=\"dismissLabel()\"\n >\n <i class=\"ph ph-x\" aria-hidden=\"true\"></i>\n </button>\n }\n </div>\n\n <div class=\"modal-content\" [attr.id]=\"modalDescriptionId()\">\n <ng-content>\n <p>\n Modal content goes here. You can replace this with your own content.\n </p>\n </ng-content>\n </div>\n\n @if (showFooter() && !hasCustomFooter()) {\n <div class=\"modal-footer\">\n <psh-button\n appearance=\"outline\"\n variant=\"primary\"\n size=\"medium\"\n [fullWidth]=\"isMobileScreen()\"\n (clicked)=\"handleClose()\">\n {{ cancelLabel() }}\n </psh-button>\n <psh-button\n appearance=\"filled\"\n variant=\"primary\"\n size=\"medium\"\n [fullWidth]=\"isMobileScreen()\"\n (clicked)=\"handleConfirm()\">\n {{ confirmLabel() }}\n </psh-button>\n </div>\n } @if (showFooter() && hasCustomFooter()) {\n <div class=\"modal-footer\">\n <!--\n Note: When using a custom footer, buttons should also use [fullWidth]=\"isMobileScreen()\"\n to ensure proper responsive behavior on mobile devices.\n Example:\n <psh-button [fullWidth]=\"isMobileScreen()\" (clicked)=\"action()\">Custom Button</psh-button>\n -->\n <ng-content select=\"[modal-footer]\" #modalFooter></ng-content>\n </div>\n }\n </div>\n </div>\n</div>\n", styles: [":root{--modal-max-width-sm: 25rem;--modal-max-width-md: 37.5rem;--modal-max-width-lg: 50rem;--modal-backdrop-opacity: .6;--modal-backdrop-blur: 4px;--modal-animation-distance: 20px;--modal-animation-scale: .95}.modal-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(var(--surface-900-rgb),var(--modal-backdrop-opacity));-webkit-backdrop-filter:blur(var(--modal-backdrop-blur));backdrop-filter:blur(var(--modal-backdrop-blur));align-items:center;justify-content:center;z-index:var(--z-index-modal-backdrop);pointer-events:none;opacity:0;display:none;transition:opacity var(--animation-duration-default) var(--animation-easing-smooth)}.modal-backdrop.open{opacity:1;pointer-events:all;display:flex}.modal-content-wrapper{display:flex;flex-direction:column;max-height:90vh;min-height:0}.modal-container{background:var(--surface-card);border-radius:var(--border-radius-lg);box-shadow:var(--shadow-lg),0 0 0 1px rgba(var(--primary-color-rgb),.05);max-width:var(--modal-max-width-md);transform:translateY(var(--modal-animation-distance)) scale(var(--modal-animation-scale));transition:transform var(--animation-duration-default) var(--animation-easing-smooth),opacity var(--animation-duration-default) var(--animation-easing-smooth);border:1px solid var(--surface-border)}.modal-backdrop.open .modal-container{transform:translateY(0) scale(1)}.modal-container.small{width:50%;max-width:var(--modal-max-width-sm)}.modal-container.medium{width:70%;max-width:var(--modal-max-width-md)}.modal-container.large{width:90%;max-width:var(--modal-max-width-lg)}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-lg) var(--spacing-xl);border-bottom:1px solid var(--surface-border);background:var(--surface-ground);border-top-left-radius:var(--border-radius-lg);border-top-right-radius:var(--border-radius-lg)}.modal-title{font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold);color:var(--text-color);margin:0;display:flex;align-items:center;gap:var(--spacing-sm)}.modal-close{background:transparent;border:none;color:var(--text-color-secondary);padding:var(--spacing-sm);cursor:pointer;border-radius:var(--border-radius);display:flex;align-items:center;justify-content:center;transition:all var(--animation-duration-fast) var(--animation-easing-smooth);margin:var(--negative-spacing-sm)}.modal-close:hover{background:var(--surface-hover);color:var(--text-color);transform:scale(1.1)}.modal-close:focus-visible{outline:var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);outline-offset:var(--focus-outline-offset)}.modal-close i{font-size:var(--font-size-xl)}.modal-content{padding:var(--spacing-xl);overflow-y:auto;flex-grow:1;min-height:0;color:var(--text-color-secondary);line-height:var(--line-height-relaxed)}.modal-footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--spacing-md);padding:var(--spacing-lg) var(--spacing-xl);border-top:1px solid var(--surface-border);background:var(--surface-ground);border-bottom-left-radius:var(--border-radius-lg);border-bottom-right-radius:var(--border-radius-lg)}@media(max-width:768px){.modal-container{width:95%;margin:var(--spacing-md)}.modal-header{padding:var(--spacing-md) var(--spacing-lg)}.modal-title{font-size:var(--font-size-lg)}.modal-content{padding:var(--spacing-lg)}.modal-footer{padding:var(--spacing-md) var(--spacing-lg);flex-direction:column-reverse;gap:var(--spacing-sm)}}@media(max-width:480px){.modal-container{width:100%;max-height:100vh;margin:0;border-radius:0}.modal-header{padding:var(--spacing-sm) var(--spacing-md);border-top-left-radius:0;border-top-right-radius:0}.modal-title{font-size:var(--font-size-base)}.modal-content{padding:var(--spacing-md);flex:0 1 auto}.modal-footer{padding:var(--spacing-sm) var(--spacing-md);border-bottom-left-radius:0;border-bottom-right-radius:0}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: PshButtonComponent, selector: "psh-button", inputs: ["appearance", "variant", "size", "disabled", "loading", "fullWidth", "iconPosition", "icon", "ariaLabel", "loadingText", "disabledText", "iconOnlyText", "type"], outputs: ["fullWidthChange", "clicked", "disabledClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2422
2603
|
}
|
|
2423
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
2604
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PshModalComponent, decorators: [{
|
|
2424
2605
|
type: Component,
|
|
2425
2606
|
args: [{ selector: 'psh-modal', imports: [CommonModule, PshButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n #modalBackdrop\n [class]=\"'modal-backdrop ' + backdropClass()\"\n [class.open]=\"open()\"\n (click)=\"handleBackdropClick($event)\"\n role=\"dialog\"\n aria-modal=\"true\"\n [attr.aria-hidden]=\"!open()\"\n [attr.aria-labelledby]=\"modalDialogId() + '-title'\"\n [attr.aria-describedby]=\"modalDescriptionId()\"\n [attr.data-state]=\"state()\"\n>\n <div\n [class]=\"'modal-container ' + styleClass()\"\n [class.small]=\"size() === 'small'\"\n [class.medium]=\"size() === 'medium'\"\n [class.large]=\"size() === 'large'\"\n [attr.id]=\"modalDialogId()\"\n role=\"document\"\n >\n <div class=\"modal-content-wrapper\">\n <div class=\"modal-header\">\n <h2 class=\"modal-title\" [attr.id]=\"modalDialogId() + '-title'\">\n <ng-content select=\"[modal-title]\">{{ title() }}</ng-content>\n </h2>\n @if (showClose()) {\n <button\n type=\"button\"\n class=\"modal-close\"\n (click)=\"handleClose()\"\n [attr.aria-label]=\"dismissLabel()\"\n >\n <i class=\"ph ph-x\" aria-hidden=\"true\"></i>\n </button>\n }\n </div>\n\n <div class=\"modal-content\" [attr.id]=\"modalDescriptionId()\">\n <ng-content>\n <p>\n Modal content goes here. You can replace this with your own content.\n </p>\n </ng-content>\n </div>\n\n @if (showFooter() && !hasCustomFooter()) {\n <div class=\"modal-footer\">\n <psh-button\n appearance=\"outline\"\n variant=\"primary\"\n size=\"medium\"\n [fullWidth]=\"isMobileScreen()\"\n (clicked)=\"handleClose()\">\n {{ cancelLabel() }}\n </psh-button>\n <psh-button\n appearance=\"filled\"\n variant=\"primary\"\n size=\"medium\"\n [fullWidth]=\"isMobileScreen()\"\n (clicked)=\"handleConfirm()\">\n {{ confirmLabel() }}\n </psh-button>\n </div>\n } @if (showFooter() && hasCustomFooter()) {\n <div class=\"modal-footer\">\n <!--\n Note: When using a custom footer, buttons should also use [fullWidth]=\"isMobileScreen()\"\n to ensure proper responsive behavior on mobile devices.\n Example:\n <psh-button [fullWidth]=\"isMobileScreen()\" (clicked)=\"action()\">Custom Button</psh-button>\n -->\n <ng-content select=\"[modal-footer]\" #modalFooter></ng-content>\n </div>\n }\n </div>\n </div>\n</div>\n", styles: [":root{--modal-max-width-sm: 25rem;--modal-max-width-md: 37.5rem;--modal-max-width-lg: 50rem;--modal-backdrop-opacity: .6;--modal-backdrop-blur: 4px;--modal-animation-distance: 20px;--modal-animation-scale: .95}.modal-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(var(--surface-900-rgb),var(--modal-backdrop-opacity));-webkit-backdrop-filter:blur(var(--modal-backdrop-blur));backdrop-filter:blur(var(--modal-backdrop-blur));align-items:center;justify-content:center;z-index:var(--z-index-modal-backdrop);pointer-events:none;opacity:0;display:none;transition:opacity var(--animation-duration-default) var(--animation-easing-smooth)}.modal-backdrop.open{opacity:1;pointer-events:all;display:flex}.modal-content-wrapper{display:flex;flex-direction:column;max-height:90vh;min-height:0}.modal-container{background:var(--surface-card);border-radius:var(--border-radius-lg);box-shadow:var(--shadow-lg),0 0 0 1px rgba(var(--primary-color-rgb),.05);max-width:var(--modal-max-width-md);transform:translateY(var(--modal-animation-distance)) scale(var(--modal-animation-scale));transition:transform var(--animation-duration-default) var(--animation-easing-smooth),opacity var(--animation-duration-default) var(--animation-easing-smooth);border:1px solid var(--surface-border)}.modal-backdrop.open .modal-container{transform:translateY(0) scale(1)}.modal-container.small{width:50%;max-width:var(--modal-max-width-sm)}.modal-container.medium{width:70%;max-width:var(--modal-max-width-md)}.modal-container.large{width:90%;max-width:var(--modal-max-width-lg)}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-lg) var(--spacing-xl);border-bottom:1px solid var(--surface-border);background:var(--surface-ground);border-top-left-radius:var(--border-radius-lg);border-top-right-radius:var(--border-radius-lg)}.modal-title{font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold);color:var(--text-color);margin:0;display:flex;align-items:center;gap:var(--spacing-sm)}.modal-close{background:transparent;border:none;color:var(--text-color-secondary);padding:var(--spacing-sm);cursor:pointer;border-radius:var(--border-radius);display:flex;align-items:center;justify-content:center;transition:all var(--animation-duration-fast) var(--animation-easing-smooth);margin:var(--negative-spacing-sm)}.modal-close:hover{background:var(--surface-hover);color:var(--text-color);transform:scale(1.1)}.modal-close:focus-visible{outline:var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);outline-offset:var(--focus-outline-offset)}.modal-close i{font-size:var(--font-size-xl)}.modal-content{padding:var(--spacing-xl);overflow-y:auto;flex-grow:1;min-height:0;color:var(--text-color-secondary);line-height:var(--line-height-relaxed)}.modal-footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--spacing-md);padding:var(--spacing-lg) var(--spacing-xl);border-top:1px solid var(--surface-border);background:var(--surface-ground);border-bottom-left-radius:var(--border-radius-lg);border-bottom-right-radius:var(--border-radius-lg)}@media(max-width:768px){.modal-container{width:95%;margin:var(--spacing-md)}.modal-header{padding:var(--spacing-md) var(--spacing-lg)}.modal-title{font-size:var(--font-size-lg)}.modal-content{padding:var(--spacing-lg)}.modal-footer{padding:var(--spacing-md) var(--spacing-lg);flex-direction:column-reverse;gap:var(--spacing-sm)}}@media(max-width:480px){.modal-container{width:100%;max-height:100vh;margin:0;border-radius:0}.modal-header{padding:var(--spacing-sm) var(--spacing-md);border-top-left-radius:0;border-top-right-radius:0}.modal-title{font-size:var(--font-size-base)}.modal-content{padding:var(--spacing-md);flex:0 1 auto}.modal-footer{padding:var(--spacing-sm) var(--spacing-md);border-bottom-left-radius:0;border-bottom-right-radius:0}}\n"] }]
|
|
2426
2607
|
}], 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 }] }] } });
|
|
@@ -2586,10 +2767,10 @@ class PshPaginationComponent {
|
|
|
2586
2767
|
break;
|
|
2587
2768
|
}
|
|
2588
2769
|
}
|
|
2589
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
2590
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", type: PshPaginationComponent, isStandalone: true, selector: "psh-pagination", inputs: { currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: false, transformFunction: null }, totalPages: { classPropertyName: "totalPages", publicName: "totalPages", isSignal: true, isRequired: false, transformFunction: null }, itemsPerPage: { classPropertyName: "itemsPerPage", publicName: "itemsPerPage", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, showFirstLast: { classPropertyName: "showFirstLast", publicName: "showFirstLast", isSignal: true, isRequired: false, transformFunction: null }, showPrevNext: { classPropertyName: "showPrevNext", publicName: "showPrevNext", isSignal: true, isRequired: false, transformFunction: null }, maxVisiblePages: { classPropertyName: "maxVisiblePages", publicName: "maxVisiblePages", isSignal: true, isRequired: false, transformFunction: null }, showItemsPerPage: { classPropertyName: "showItemsPerPage", publicName: "showItemsPerPage", isSignal: true, isRequired: false, transformFunction: null }, itemsPerPageOptions: { classPropertyName: "itemsPerPageOptions", publicName: "itemsPerPageOptions", isSignal: true, isRequired: false, transformFunction: null }, firstLabel: { classPropertyName: "firstLabel", publicName: "firstLabel", isSignal: true, isRequired: false, transformFunction: null }, previousLabel: { classPropertyName: "previousLabel", publicName: "previousLabel", isSignal: true, isRequired: false, transformFunction: null }, nextLabel: { classPropertyName: "nextLabel", publicName: "nextLabel", isSignal: true, isRequired: false, transformFunction: null }, lastLabel: { classPropertyName: "lastLabel", publicName: "lastLabel", isSignal: true, isRequired: false, transformFunction: null }, pageLabel: { classPropertyName: "pageLabel", publicName: "pageLabel", isSignal: true, isRequired: false, transformFunction: null }, itemsLabel: { classPropertyName: "itemsLabel", publicName: "itemsLabel", isSignal: true, isRequired: false, transformFunction: null }, itemsPerPageLabel: { classPropertyName: "itemsPerPageLabel", publicName: "itemsPerPageLabel", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { currentPage: "currentPageChange", totalPages: "totalPagesChange", itemsPerPage: "itemsPerPageChange", pageChange: "pageChange", itemsPerPageChange: "itemsPerPageChange", navigationError: "navigationError" }, ngImport: i0, template: "<nav\n class=\"pagination\"\n [class.small]=\"size() === 'small'\"\n [class.large]=\"size() === 'large'\"\n [class.outline]=\"variant() === 'outline'\"\n role=\"navigation\"\n [attr.id]=\"navigationId()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.data-state]=\"state()\"\n (keydown)=\"onKeydown($event)\"\n>\n @if (showItemsPerPage()) {\n <div class=\"items-per-page\">\n <label [attr.for]=\"navigationId() + '-items-select'\" class=\"items-per-page-label\">\n {{ itemsPerPageLabel() }}\n </label>\n <select\n [attr.id]=\"navigationId() + '-items-select'\"\n [value]=\"itemsPerPage()\"\n (change)=\"onItemsPerPageChange($event)\"\n [attr.aria-label]=\"itemsPerPageLabel()\"\n >\n @for (option of itemsPerPageOptions(); track option) {\n <option [value]=\"option\">\n {{ option }} {{ itemsLabel() }}\n </option>\n }\n </select>\n </div>\n }\n\n @if (showFirstLast()) {\n <button\n class=\"page-button\"\n [class.disabled]=\"isFirstPage()\"\n (click)=\"goToFirstPage()\"\n [attr.aria-label]=\"firstLabel()\"\n [disabled]=\"isFirstPage()\"\n type=\"button\"\n >\n <i class=\"ph ph-caret-double-left\" aria-hidden=\"true\"></i>\n </button>\n }\n\n @if (showPrevNext()) {\n <button\n class=\"page-button\"\n [class.disabled]=\"!canGoPrevious()\"\n (click)=\"goToPreviousPage()\"\n [attr.aria-label]=\"previousLabel()\"\n [disabled]=\"!canGoPrevious()\"\n type=\"button\"\n >\n <i class=\"ph ph-caret-left\" aria-hidden=\"true\"></i>\n </button>\n }\n\n @for (page of pages(); track page) {\n <button\n class=\"page-button\"\n [class.active]=\"page === currentPage()\"\n (click)=\"goToPage(page)\"\n [attr.aria-current]=\"page === currentPage() ? 'page' : null\"\n [attr.aria-label]=\"pageLabel() + ' ' + page\"\n type=\"button\"\n >\n {{ page }}\n </button>\n }\n\n @if (showPrevNext()) {\n <button\n class=\"page-button\"\n [class.disabled]=\"!canGoNext()\"\n (click)=\"goToNextPage()\"\n [attr.aria-label]=\"nextLabel()\"\n [disabled]=\"!canGoNext()\"\n type=\"button\"\n >\n <i class=\"ph ph-caret-right\" aria-hidden=\"true\"></i>\n </button>\n }\n\n @if (showFirstLast()) {\n <button\n class=\"page-button\"\n [class.disabled]=\"isLastPage()\"\n (click)=\"goToLastPage()\"\n [attr.aria-label]=\"lastLabel()\"\n [disabled]=\"isLastPage()\"\n type=\"button\"\n >\n <i class=\"ph ph-caret-double-right\" aria-hidden=\"true\"></i>\n </button>\n }\n\n <div class=\"sr-only\" aria-live=\"polite\" aria-atomic=\"true\">\n {{ currentPageAnnouncement() }}\n </div>\n</nav>", styles: [".pagination{display:flex;align-items:center;flex-wrap:wrap;gap:var(--spacing-xs);padding:var(--spacing-sm);border-radius:var(--border-radius);background:var(--surface-card);width:100%;max-width:100%;overflow-x:auto;overflow-y:hidden}.pagination:focus-within{outline:var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);outline-offset:var(--focus-outline-offset)}.pagination.outline{background:transparent;border:var(--border-width-1) solid var(--surface-border)}.items-per-page{display:flex;align-items:center;gap:var(--spacing-xs);margin-right:var(--spacing-md);flex-shrink:0}.items-per-page-label{font-size:var(--font-size-sm);color:var(--text-color-secondary);white-space:nowrap;flex-shrink:0}.items-per-page select{padding:var(--spacing-xs) var(--spacing-sm);border:var(--border-width-1) solid var(--surface-border);border-radius:var(--border-radius);background:var(--surface-card);color:var(--text-color);font-family:inherit;font-size:var(--font-size-base);cursor:pointer;transition:all var(--animation-duration-fast) var(--animation-easing-default)}.items-per-page select:hover{border-color:var(--primary-color)}.items-per-page select:focus-visible{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 var(--focus-ring-width) var(--focus-ring-color)}.small .items-per-page select{padding:calc(var(--spacing-xs) * .75) var(--spacing-sm);font-size:var(--font-size-sm)}.large .items-per-page select{padding:var(--spacing-sm) var(--spacing-md);font-size:var(--font-size-lg)}.page-button{display:inline-flex;align-items:center;justify-content:center;min-width:var(--size-9);height:var(--size-9);padding:var(--spacing-xs);border:none;border-radius:var(--border-radius);background:var(--surface-ground);color:var(--text-color);font-family:inherit;font-size:var(--font-size-base);cursor:pointer;transition:all var(--animation-duration-fast) var(--animation-easing-default);flex-shrink:0}.page-button:focus-visible{outline:var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);outline-offset:var(--focus-outline-offset)}.page-button:hover:not(.disabled):not(.active){background:var(--surface-hover)}.page-button.active{background:var(--primary-gradient);color:var(--primary-color-text)}.page-button.disabled{opacity:var(--opacity-disabled);cursor:not-allowed}.page-button i{font-size:var(--icon-size-sm)}.pagination.outline .page-button{background:transparent;border:var(--border-width-1) solid var(--surface-border)}.pagination.outline .page-button:hover:not(.disabled):not(.active){background:var(--surface-hover);border-color:var(--primary-color)}.pagination.outline .page-button.active{background:var(--primary-gradient);color:var(--primary-color-text);border-color:var(--primary-color)}.pagination.small .page-button{min-width:var(--size-8);height:var(--size-8);font-size:var(--font-size-sm)}.pagination.small .page-button i{font-size:var(--icon-size-xs)}.pagination.large .page-button{min-width:var(--size-11);height:var(--size-11);font-size:var(--font-size-lg)}.pagination.large .page-button i{font-size:var(--icon-size-md)}@media(max-width:768px){.pagination{justify-content:center;gap:var(--spacing-2xs, 4px);padding:var(--spacing-sm)}.items-per-page{margin-right:0;margin-bottom:var(--spacing-sm);width:100%;justify-content:center;flex-wrap:wrap}.items-per-page-label{width:100%;text-align:center;margin-bottom:var(--spacing-xs)}.items-per-page select{width:auto;min-width:140px;max-width:180px}.page-button{min-width:var(--size-8);height:var(--size-8);font-size:var(--font-size-sm)}.page-button i{font-size:var(--icon-size-xs)}}@media(max-width:480px){.pagination{padding:var(--spacing-xs);gap:2px}.page-button{min-width:var(--size-7, 28px);height:var(--size-7, 28px);font-size:var(--font-size-xs);padding:2px}.page-button i{font-size:var(--icon-size-xs)}.items-per-page{margin-bottom:var(--spacing-xs)}.items-per-page-label{font-size:var(--font-size-xs)}.items-per-page select{font-size:var(--font-size-sm);padding:var(--spacing-xs)}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2770
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PshPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2771
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: PshPaginationComponent, isStandalone: true, selector: "psh-pagination", inputs: { currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: false, transformFunction: null }, totalPages: { classPropertyName: "totalPages", publicName: "totalPages", isSignal: true, isRequired: false, transformFunction: null }, itemsPerPage: { classPropertyName: "itemsPerPage", publicName: "itemsPerPage", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, showFirstLast: { classPropertyName: "showFirstLast", publicName: "showFirstLast", isSignal: true, isRequired: false, transformFunction: null }, showPrevNext: { classPropertyName: "showPrevNext", publicName: "showPrevNext", isSignal: true, isRequired: false, transformFunction: null }, maxVisiblePages: { classPropertyName: "maxVisiblePages", publicName: "maxVisiblePages", isSignal: true, isRequired: false, transformFunction: null }, showItemsPerPage: { classPropertyName: "showItemsPerPage", publicName: "showItemsPerPage", isSignal: true, isRequired: false, transformFunction: null }, itemsPerPageOptions: { classPropertyName: "itemsPerPageOptions", publicName: "itemsPerPageOptions", isSignal: true, isRequired: false, transformFunction: null }, firstLabel: { classPropertyName: "firstLabel", publicName: "firstLabel", isSignal: true, isRequired: false, transformFunction: null }, previousLabel: { classPropertyName: "previousLabel", publicName: "previousLabel", isSignal: true, isRequired: false, transformFunction: null }, nextLabel: { classPropertyName: "nextLabel", publicName: "nextLabel", isSignal: true, isRequired: false, transformFunction: null }, lastLabel: { classPropertyName: "lastLabel", publicName: "lastLabel", isSignal: true, isRequired: false, transformFunction: null }, pageLabel: { classPropertyName: "pageLabel", publicName: "pageLabel", isSignal: true, isRequired: false, transformFunction: null }, itemsLabel: { classPropertyName: "itemsLabel", publicName: "itemsLabel", isSignal: true, isRequired: false, transformFunction: null }, itemsPerPageLabel: { classPropertyName: "itemsPerPageLabel", publicName: "itemsPerPageLabel", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { currentPage: "currentPageChange", totalPages: "totalPagesChange", itemsPerPage: "itemsPerPageChange", pageChange: "pageChange", itemsPerPageChange: "itemsPerPageChange", navigationError: "navigationError" }, ngImport: i0, template: "<nav\n class=\"pagination\"\n [class.small]=\"size() === 'small'\"\n [class.large]=\"size() === 'large'\"\n [class.outline]=\"variant() === 'outline'\"\n role=\"navigation\"\n [attr.id]=\"navigationId()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.data-state]=\"state()\"\n (keydown)=\"onKeydown($event)\"\n>\n @if (showItemsPerPage()) {\n <div class=\"items-per-page\">\n <label [attr.for]=\"navigationId() + '-items-select'\" class=\"items-per-page-label\">\n {{ itemsPerPageLabel() }}\n </label>\n <select\n [attr.id]=\"navigationId() + '-items-select'\"\n [value]=\"itemsPerPage()\"\n (change)=\"onItemsPerPageChange($event)\"\n [attr.aria-label]=\"itemsPerPageLabel()\"\n >\n @for (option of itemsPerPageOptions(); track option) {\n <option [value]=\"option\">\n {{ option }} {{ itemsLabel() }}\n </option>\n }\n </select>\n </div>\n }\n\n @if (showFirstLast()) {\n <button\n class=\"page-button\"\n [class.disabled]=\"isFirstPage()\"\n (click)=\"goToFirstPage()\"\n [attr.aria-label]=\"firstLabel()\"\n [disabled]=\"isFirstPage()\"\n type=\"button\"\n >\n <i class=\"ph ph-caret-double-left\" aria-hidden=\"true\"></i>\n </button>\n }\n\n @if (showPrevNext()) {\n <button\n class=\"page-button\"\n [class.disabled]=\"!canGoPrevious()\"\n (click)=\"goToPreviousPage()\"\n [attr.aria-label]=\"previousLabel()\"\n [disabled]=\"!canGoPrevious()\"\n type=\"button\"\n >\n <i class=\"ph ph-caret-left\" aria-hidden=\"true\"></i>\n </button>\n }\n\n @for (page of pages(); track page) {\n <button\n class=\"page-button\"\n [class.active]=\"page === currentPage()\"\n (click)=\"goToPage(page)\"\n [attr.aria-current]=\"page === currentPage() ? 'page' : null\"\n [attr.aria-label]=\"pageLabel() + ' ' + page\"\n type=\"button\"\n >\n {{ page }}\n </button>\n }\n\n @if (showPrevNext()) {\n <button\n class=\"page-button\"\n [class.disabled]=\"!canGoNext()\"\n (click)=\"goToNextPage()\"\n [attr.aria-label]=\"nextLabel()\"\n [disabled]=\"!canGoNext()\"\n type=\"button\"\n >\n <i class=\"ph ph-caret-right\" aria-hidden=\"true\"></i>\n </button>\n }\n\n @if (showFirstLast()) {\n <button\n class=\"page-button\"\n [class.disabled]=\"isLastPage()\"\n (click)=\"goToLastPage()\"\n [attr.aria-label]=\"lastLabel()\"\n [disabled]=\"isLastPage()\"\n type=\"button\"\n >\n <i class=\"ph ph-caret-double-right\" aria-hidden=\"true\"></i>\n </button>\n }\n\n <div class=\"sr-only\" aria-live=\"polite\" aria-atomic=\"true\">\n {{ currentPageAnnouncement() }}\n </div>\n</nav>", styles: [".pagination{display:flex;align-items:center;flex-wrap:wrap;gap:var(--spacing-xs);padding:var(--spacing-sm);border-radius:var(--border-radius);background:var(--surface-card);width:100%;max-width:100%;overflow-x:auto;overflow-y:hidden}.pagination:focus-within{outline:var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);outline-offset:var(--focus-outline-offset)}.pagination.outline{background:transparent;border:var(--border-width-1) solid var(--surface-border)}.items-per-page{display:flex;align-items:center;gap:var(--spacing-xs);margin-right:var(--spacing-md);flex-shrink:0}.items-per-page-label{font-size:var(--font-size-sm);color:var(--text-color-secondary);white-space:nowrap;flex-shrink:0}.items-per-page select{padding:var(--spacing-xs) var(--spacing-sm);border:var(--border-width-1) solid var(--surface-border);border-radius:var(--border-radius);background:var(--surface-card);color:var(--text-color);font-family:inherit;font-size:var(--font-size-base);cursor:pointer;transition:all var(--animation-duration-fast) var(--animation-easing-default)}.items-per-page select:hover{border-color:var(--primary-color)}.items-per-page select:focus-visible{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 var(--focus-ring-width) var(--focus-ring-color)}.small .items-per-page select{padding:calc(var(--spacing-xs) * .75) var(--spacing-sm);font-size:var(--font-size-sm)}.large .items-per-page select{padding:var(--spacing-sm) var(--spacing-md);font-size:var(--font-size-lg)}.page-button{display:inline-flex;align-items:center;justify-content:center;min-width:var(--size-9);height:var(--size-9);padding:var(--spacing-xs);border:none;border-radius:var(--border-radius);background:var(--surface-ground);color:var(--text-color);font-family:inherit;font-size:var(--font-size-base);cursor:pointer;transition:all var(--animation-duration-fast) var(--animation-easing-default);flex-shrink:0}.page-button:focus-visible{outline:var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);outline-offset:var(--focus-outline-offset)}.page-button:hover:not(.disabled):not(.active){background:var(--surface-hover)}.page-button.active{background:var(--primary-gradient);color:var(--primary-color-text)}.page-button.disabled{opacity:var(--opacity-disabled);cursor:not-allowed}.page-button i{font-size:var(--icon-size-sm)}.pagination.outline .page-button{background:transparent;border:var(--border-width-1) solid var(--surface-border)}.pagination.outline .page-button:hover:not(.disabled):not(.active){background:var(--surface-hover);border-color:var(--primary-color)}.pagination.outline .page-button.active{background:var(--primary-gradient);color:var(--primary-color-text);border-color:var(--primary-color)}.pagination.small .page-button{min-width:var(--size-8);height:var(--size-8);font-size:var(--font-size-sm)}.pagination.small .page-button i{font-size:var(--icon-size-xs)}.pagination.large .page-button{min-width:var(--size-11);height:var(--size-11);font-size:var(--font-size-lg)}.pagination.large .page-button i{font-size:var(--icon-size-md)}@media(max-width:768px){.pagination{justify-content:center;gap:var(--spacing-2xs, 4px);padding:var(--spacing-sm)}.items-per-page{margin-right:0;margin-bottom:var(--spacing-sm);width:100%;justify-content:center;flex-wrap:wrap}.items-per-page-label{width:100%;text-align:center;margin-bottom:var(--spacing-xs)}.items-per-page select{width:auto;min-width:140px;max-width:180px}.page-button{min-width:var(--size-8);height:var(--size-8);font-size:var(--font-size-sm)}.page-button i{font-size:var(--icon-size-xs)}}@media(max-width:480px){.pagination{padding:var(--spacing-xs);gap:2px}.page-button{min-width:var(--size-7, 28px);height:var(--size-7, 28px);font-size:var(--font-size-xs);padding:2px}.page-button i{font-size:var(--icon-size-xs)}.items-per-page{margin-bottom:var(--spacing-xs)}.items-per-page-label{font-size:var(--font-size-xs)}.items-per-page select{font-size:var(--font-size-sm);padding:var(--spacing-xs)}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2591
2772
|
}
|
|
2592
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
2773
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PshPaginationComponent, decorators: [{
|
|
2593
2774
|
type: Component,
|
|
2594
2775
|
args: [{ selector: 'psh-pagination', imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav\n class=\"pagination\"\n [class.small]=\"size() === 'small'\"\n [class.large]=\"size() === 'large'\"\n [class.outline]=\"variant() === 'outline'\"\n role=\"navigation\"\n [attr.id]=\"navigationId()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.data-state]=\"state()\"\n (keydown)=\"onKeydown($event)\"\n>\n @if (showItemsPerPage()) {\n <div class=\"items-per-page\">\n <label [attr.for]=\"navigationId() + '-items-select'\" class=\"items-per-page-label\">\n {{ itemsPerPageLabel() }}\n </label>\n <select\n [attr.id]=\"navigationId() + '-items-select'\"\n [value]=\"itemsPerPage()\"\n (change)=\"onItemsPerPageChange($event)\"\n [attr.aria-label]=\"itemsPerPageLabel()\"\n >\n @for (option of itemsPerPageOptions(); track option) {\n <option [value]=\"option\">\n {{ option }} {{ itemsLabel() }}\n </option>\n }\n </select>\n </div>\n }\n\n @if (showFirstLast()) {\n <button\n class=\"page-button\"\n [class.disabled]=\"isFirstPage()\"\n (click)=\"goToFirstPage()\"\n [attr.aria-label]=\"firstLabel()\"\n [disabled]=\"isFirstPage()\"\n type=\"button\"\n >\n <i class=\"ph ph-caret-double-left\" aria-hidden=\"true\"></i>\n </button>\n }\n\n @if (showPrevNext()) {\n <button\n class=\"page-button\"\n [class.disabled]=\"!canGoPrevious()\"\n (click)=\"goToPreviousPage()\"\n [attr.aria-label]=\"previousLabel()\"\n [disabled]=\"!canGoPrevious()\"\n type=\"button\"\n >\n <i class=\"ph ph-caret-left\" aria-hidden=\"true\"></i>\n </button>\n }\n\n @for (page of pages(); track page) {\n <button\n class=\"page-button\"\n [class.active]=\"page === currentPage()\"\n (click)=\"goToPage(page)\"\n [attr.aria-current]=\"page === currentPage() ? 'page' : null\"\n [attr.aria-label]=\"pageLabel() + ' ' + page\"\n type=\"button\"\n >\n {{ page }}\n </button>\n }\n\n @if (showPrevNext()) {\n <button\n class=\"page-button\"\n [class.disabled]=\"!canGoNext()\"\n (click)=\"goToNextPage()\"\n [attr.aria-label]=\"nextLabel()\"\n [disabled]=\"!canGoNext()\"\n type=\"button\"\n >\n <i class=\"ph ph-caret-right\" aria-hidden=\"true\"></i>\n </button>\n }\n\n @if (showFirstLast()) {\n <button\n class=\"page-button\"\n [class.disabled]=\"isLastPage()\"\n (click)=\"goToLastPage()\"\n [attr.aria-label]=\"lastLabel()\"\n [disabled]=\"isLastPage()\"\n type=\"button\"\n >\n <i class=\"ph ph-caret-double-right\" aria-hidden=\"true\"></i>\n </button>\n }\n\n <div class=\"sr-only\" aria-live=\"polite\" aria-atomic=\"true\">\n {{ currentPageAnnouncement() }}\n </div>\n</nav>", styles: [".pagination{display:flex;align-items:center;flex-wrap:wrap;gap:var(--spacing-xs);padding:var(--spacing-sm);border-radius:var(--border-radius);background:var(--surface-card);width:100%;max-width:100%;overflow-x:auto;overflow-y:hidden}.pagination:focus-within{outline:var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);outline-offset:var(--focus-outline-offset)}.pagination.outline{background:transparent;border:var(--border-width-1) solid var(--surface-border)}.items-per-page{display:flex;align-items:center;gap:var(--spacing-xs);margin-right:var(--spacing-md);flex-shrink:0}.items-per-page-label{font-size:var(--font-size-sm);color:var(--text-color-secondary);white-space:nowrap;flex-shrink:0}.items-per-page select{padding:var(--spacing-xs) var(--spacing-sm);border:var(--border-width-1) solid var(--surface-border);border-radius:var(--border-radius);background:var(--surface-card);color:var(--text-color);font-family:inherit;font-size:var(--font-size-base);cursor:pointer;transition:all var(--animation-duration-fast) var(--animation-easing-default)}.items-per-page select:hover{border-color:var(--primary-color)}.items-per-page select:focus-visible{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 var(--focus-ring-width) var(--focus-ring-color)}.small .items-per-page select{padding:calc(var(--spacing-xs) * .75) var(--spacing-sm);font-size:var(--font-size-sm)}.large .items-per-page select{padding:var(--spacing-sm) var(--spacing-md);font-size:var(--font-size-lg)}.page-button{display:inline-flex;align-items:center;justify-content:center;min-width:var(--size-9);height:var(--size-9);padding:var(--spacing-xs);border:none;border-radius:var(--border-radius);background:var(--surface-ground);color:var(--text-color);font-family:inherit;font-size:var(--font-size-base);cursor:pointer;transition:all var(--animation-duration-fast) var(--animation-easing-default);flex-shrink:0}.page-button:focus-visible{outline:var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);outline-offset:var(--focus-outline-offset)}.page-button:hover:not(.disabled):not(.active){background:var(--surface-hover)}.page-button.active{background:var(--primary-gradient);color:var(--primary-color-text)}.page-button.disabled{opacity:var(--opacity-disabled);cursor:not-allowed}.page-button i{font-size:var(--icon-size-sm)}.pagination.outline .page-button{background:transparent;border:var(--border-width-1) solid var(--surface-border)}.pagination.outline .page-button:hover:not(.disabled):not(.active){background:var(--surface-hover);border-color:var(--primary-color)}.pagination.outline .page-button.active{background:var(--primary-gradient);color:var(--primary-color-text);border-color:var(--primary-color)}.pagination.small .page-button{min-width:var(--size-8);height:var(--size-8);font-size:var(--font-size-sm)}.pagination.small .page-button i{font-size:var(--icon-size-xs)}.pagination.large .page-button{min-width:var(--size-11);height:var(--size-11);font-size:var(--font-size-lg)}.pagination.large .page-button i{font-size:var(--icon-size-md)}@media(max-width:768px){.pagination{justify-content:center;gap:var(--spacing-2xs, 4px);padding:var(--spacing-sm)}.items-per-page{margin-right:0;margin-bottom:var(--spacing-sm);width:100%;justify-content:center;flex-wrap:wrap}.items-per-page-label{width:100%;text-align:center;margin-bottom:var(--spacing-xs)}.items-per-page select{width:auto;min-width:140px;max-width:180px}.page-button{min-width:var(--size-8);height:var(--size-8);font-size:var(--font-size-sm)}.page-button i{font-size:var(--icon-size-xs)}}@media(max-width:480px){.pagination{padding:var(--spacing-xs);gap:2px}.page-button{min-width:var(--size-7, 28px);height:var(--size-7, 28px);font-size:var(--font-size-xs);padding:2px}.page-button i{font-size:var(--icon-size-xs)}.items-per-page{margin-bottom:var(--spacing-xs)}.items-per-page-label{font-size:var(--font-size-xs)}.items-per-page select{font-size:var(--font-size-sm);padding:var(--spacing-xs)}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}\n"] }]
|
|
2595
2776
|
}], 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"] }] } });
|
|
@@ -2672,10 +2853,10 @@ class PshProgressbarComponent {
|
|
|
2672
2853
|
}
|
|
2673
2854
|
});
|
|
2674
2855
|
}
|
|
2675
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
2676
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
2856
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PshProgressbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2857
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: PshProgressbarComponent, isStandalone: true, selector: "psh-progressbar", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", max: "maxChange", completed: "completed", thresholdReached: "thresholdReached" }, host: { properties: { "class.small": "size() === \"small\"", "class.large": "size() === \"large\"", "class.label-bottom": "labelPosition() === \"bottom\"", "class.label-inline": "labelPosition() === \"inline\"", "attr.data-state": "mode()", "attr.aria-live": "\"polite\"" }, classAttribute: "progressbar-container" }, ngImport: i0, template: "@if (showLabel()) {\n <span class=\"progress-label\">{{ displayLabel() }}</span>\n}\n<div\n class=\"progressbar\"\n [class.striped]=\"isStriped()\"\n [class.animated]=\"isAnimated()\"\n [class.indeterminate]=\"isIndeterminate()\"\n role=\"progressbar\"\n [attr.aria-valuenow]=\"isIndeterminate() ? null : value()\"\n [attr.aria-valuemin]=\"0\"\n [attr.aria-valuemax]=\"max()\"\n [attr.aria-valuetext]=\"computedAriaValueText()\"\n>\n <div\n class=\"progress-track\"\n [class]=\"variant()\"\n [style.width.%]=\"percentage()\"\n ></div>\n</div>", styles: [":host{--progressbar-height-sm: var(--size-1);--progressbar-height-md: var(--size-2);--progressbar-height-lg: var(--size-3);--progressbar-stripe-opacity: .15;display:flex;flex-direction:column;gap:var(--spacing-xs)}:host.label-bottom{flex-direction:column-reverse}:host.label-inline{flex-direction:row;align-items:center;gap:var(--spacing-md)}.progressbar{position:relative;width:100%;height:var(--progressbar-height-md);background:var(--surface-ground);border-radius:var(--border-radius);overflow:hidden}.progress-track{height:100%;border-radius:var(--border-radius);transition:width var(--animation-duration-default) var(--animation-easing-smooth)}.progress-track.primary{background:var(--primary-gradient)}.progress-track.secondary{background:var(--secondary-color)}.progress-track.success{background:var(--success-color)}.progress-track.warning{background:var(--warning-color)}.progress-track.danger{background:var(--danger-color)}:host.small .progressbar{height:var(--progressbar-height-sm)}:host.large .progressbar{height:var(--progressbar-height-lg)}.progress-label{display:block;text-align:right;font-size:var(--font-size-sm);color:var(--text-color);font-weight:var(--font-weight-medium)}:host.small .progress-label{font-size:var(--font-size-xs)}:host.large .progress-label{font-size:var(--font-size-base)}:host.label-inline .progress-label{text-align:left;min-width:fit-content}.progressbar.striped .progress-track{background-image:linear-gradient(45deg,rgba(255,255,255,var(--progressbar-stripe-opacity)) 25%,transparent 25%,transparent 50%,rgba(255,255,255,var(--progressbar-stripe-opacity)) 50%,rgba(255,255,255,var(--progressbar-stripe-opacity)) 75%,transparent 75%,transparent);background-size:var(--size-4) var(--size-4)}.progressbar.animated .progress-track{animation:progress-animation var(--animation-duration-slow) linear infinite}.progressbar.indeterminate .progress-track{width:50%!important;animation:indeterminate 1.5s var(--animation-easing-in-out) infinite}@keyframes progress-animation{0%{background-position:var(--size-4) 0}to{background-position:0 0}}@keyframes indeterminate{0%{transform:translate(-100%)}to{transform:translate(200%)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2677
2858
|
}
|
|
2678
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
2859
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PshProgressbarComponent, decorators: [{
|
|
2679
2860
|
type: Component,
|
|
2680
2861
|
args: [{ selector: 'psh-progressbar', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
2681
2862
|
class: 'progressbar-container',
|
|
@@ -2813,10 +2994,10 @@ class PshRadioComponent {
|
|
|
2813
2994
|
// Navigate to previous radio in group
|
|
2814
2995
|
// Implementation requires radio group context
|
|
2815
2996
|
}
|
|
2816
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
2817
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
2997
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PshRadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2998
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", 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 } @else 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(--form-field-gap)}.radio-label{display:inline-flex;align-items:center;gap:var(--form-label-gap);cursor:pointer;-webkit-user-select:none;user-select:none;color:var(--text-color)}.radio-label.label-left{flex-direction:row-reverse;justify-content:space-between}.radio-input{position:absolute;opacity:0;width:0;height:0}.radio-control{display:flex;align-items:center;justify-content:center;width:var(--size-5);height:var(--size-5);min-width:var(--size-5);min-height:var(--size-5);border:var(--border-width-2) solid var(--surface-border);border-radius:var(--radius-full);background:var(--surface-card);transition:all var(--animation-duration-fast) var(--animation-easing-default);flex-shrink:0}.radio-dot{width:var(--size-2);height:var(--size-2);border-radius:var(--radius-full);background:var(--primary-color-text);opacity:0;transform:scale(.8);transition:all var(--animation-duration-fast) var(--animation-easing-default)}.radio-input:checked+.radio-control{background:var(--primary-color);border-color:var(--primary-color)}.radio-input:checked+.radio-control .radio-dot{opacity:1;transform:scale(1)}.radio-input:focus-visible+.radio-control{box-shadow:0 0 0 var(--focus-outline-width) var(--focus-ring-color)}:host(.radio-disabled) .radio-label{opacity:var(--opacity-disabled);cursor:not-allowed}:host(.radio-error) .radio-control{border-color:var(--danger-color)}:host(.radio-error) .radio-input:checked+.radio-control{background:var(--danger-color);border-color:var(--danger-color)}:host(.radio-success) .radio-control{border-color:var(--success-color)}:host(.radio-success) .radio-input:checked+.radio-control{background:var(--success-color);border-color:var(--success-color)}.radio-error{font-size:var(--font-size-sm);color:var(--danger-color)}.radio-success{font-size:var(--font-size-sm);color:var(--success-color)}:host(.radio-small) .radio-control{width:var(--size-4);height:var(--size-4);min-width:var(--size-4);min-height:var(--size-4)}:host(.radio-small) .radio-dot{width:var(--size-1-5);height:var(--size-1-5)}:host(.radio-small) .radio-text{font-size:var(--font-size-sm)}:host(.radio-large) .radio-control{width:var(--size-6);height:var(--size-6);min-width:var(--size-6);min-height:var(--size-6)}:host(.radio-large) .radio-dot{width:var(--size-3);height:var(--size-3)}:host(.radio-large) .radio-text{font-size:var(--font-size-lg)}.radio-text{color:var(--text-color)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2818
2999
|
}
|
|
2819
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
3000
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PshRadioComponent, decorators: [{
|
|
2820
3001
|
type: Component,
|
|
2821
3002
|
args: [{ selector: 'psh-radio', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
2822
3003
|
'[class.radio-disabled]': 'disabled()',
|
|
@@ -2825,7 +3006,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImpor
|
|
|
2825
3006
|
'[class.radio-small]': 'size() === "small"',
|
|
2826
3007
|
'[class.radio-large]': 'size() === "large"',
|
|
2827
3008
|
'[attr.data-state]': 'state()'
|
|
2828
|
-
}, 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 }
|
|
3009
|
+
}, 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 } @else 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(--form-field-gap)}.radio-label{display:inline-flex;align-items:center;gap:var(--form-label-gap);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"] }]
|
|
2829
3010
|
}], ctorParameters: () => [], propDecorators: { checkedInput: [{
|
|
2830
3011
|
type: Input,
|
|
2831
3012
|
args: ['checked']
|
|
@@ -3141,16 +3322,16 @@ class PshSelectComponent {
|
|
|
3141
3322
|
}
|
|
3142
3323
|
}
|
|
3143
3324
|
}
|
|
3144
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
3145
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
3325
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PshSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3326
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", 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 }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, multiplePlaceholder: { classPropertyName: "multiplePlaceholder", publicName: "multiplePlaceholder", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, success: { classPropertyName: "success", publicName: "success", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, maxSelections: { classPropertyName: "maxSelections", publicName: "maxSelections", isSignal: true, isRequired: false, transformFunction: null }, minSelections: { classPropertyName: "minSelections", publicName: "minSelections", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, searchConfig: { classPropertyName: "searchConfig", publicName: "searchConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", disabled: "disabledChange", touched: "touchedChange", opened: "opened", closed: "closed", searched: "searched", scrollEnd: "scrollEnd" }, host: { properties: { "class.full-width": "fullWidth()", "class.small": "size() === \"small\"", "class.large": "size() === \"large\"", "class.outlined": "variant() === \"outlined\"", "class.filled": "variant() === \"filled\"", "class.error": "!!error()", "class.success": "!!success()", "class.disabled": "disabled()", "class.loading": "loading()", "attr.aria-expanded": "isOpen().toString()", "attr.data-state": "state()" } }, providers: [
|
|
3146
3327
|
{
|
|
3147
3328
|
provide: NG_VALUE_ACCESSOR,
|
|
3148
3329
|
useExisting: PshSelectComponent,
|
|
3149
3330
|
multi: true
|
|
3150
3331
|
}
|
|
3151
|
-
], ngImport: i0, template: "<div class=\"select-container\">\n @if (label()) {\n <label class=\"select-label\" [attr.for]=\"selectId\" (click)=\"focusSelect()\" [class.required]=\"required()\">\n {{ label() }}\n @if (required()) { <span class=\"required-mark\">*</span> }\n </label>\n }\n\n <div class=\"select-trigger-wrapper\">\n <div class=\"select-trigger\"\n role=\"combobox\"\n [id]=\"selectId\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-controls]=\"selectId + '-listbox'\"\n [attr.aria-activedescendant]=\"activeDescendant()\"\n [attr.aria-label]=\"computedAriaLabel()\"\n [attr.aria-invalid]=\"!!error()\"\n [attr.aria-required]=\"required()\"\n [attr.aria-disabled]=\"disabled()\"\n [attr.aria-busy]=\"loading()\"\n [attr.aria-describedby]=\"describedBy()\"\n [attr.tabindex]=\"disabled() || loading() ? -1 : 0\"\n (keydown)=\"handleKeydown($event)\"\n (click)=\"toggle()\">\n <div class=\"select-value\">\n <span [class.placeholder]=\"!hasValue()\">\n {{ selectedLabel() }}\n </span>\n </div>\n <div class=\"select-actions\">\n @if (clearable() && hasValue() && !disabled()) {\n <button class=\"select-clear\" (click)=\"clear($event)\">\n <i class=\"ph ph-x\"></i>\n </button>\n }\n @if (loading()) {\n <div class=\"select-loader-trigger\"></div>\n } @else {\n <i class=\"ph ph-caret-down select-arrow\"></i>\n }\n </div>\n </div>\n\n @if (isOpen()) {\n <div class=\"select-dropdown\">\n @if (searchable()) {\n <div class=\"select-search\">\n <i class=\"ph ph-magnifying-glass select-search-icon\"></i>\n <input type=\"text\"\n [placeholder]=\"searchConfig().placeholder\"\n [value]=\"searchTerm()\"\n (input)=\"onSearch($event)\"\n (click)=\"$event.stopPropagation()\">\n </div>\n }\n <div class=\"select-options\"\n role=\"listbox\"\n [id]=\"selectId + '-listbox'\"\n [attr.aria-multiselectable]=\"multiple() || null\"\n (scroll)=\"onScroll($event)\">\n @for (item of filteredOptions(); track getOptionKey(item)) {\n @if (isOptionGroup(item)) {\n <div class=\"select-group\" role=\"group\" [attr.aria-label]=\"item.label\">\n <div class=\"select-group-label\">{{ item.label }}</div>\n @for (opt of item.options; track opt.label) {\n <div class=\"select-option\"\n role=\"option\"\n [id]=\"selectId + '-' + opt.value\"\n [attr.aria-selected]=\"isSelected(opt)\"\n [attr.aria-disabled]=\"(item.disabled || opt.disabled) ? true : null\"\n [attr.tabindex]=\"(item.disabled || opt.disabled) ? -1 : null\"\n [class.selected]=\"isSelected(opt)\"\n [class.disabled]=\"item.disabled || opt.disabled\"\n [class.focused]=\"getFlatIndex(opt) === focusedIndex()\"\n (click)=\"select(opt, !!item.disabled)\">\n @if (opt.icon) { <i [class]=\"'ph ph-' + opt.icon\" aria-hidden=\"true\"></i> }\n <div class=\"select-option-content\">\n <span class=\"select-option-label\">{{ opt.label }}</span>\n @if (opt.description) { <span class=\"select-option-description\">{{ opt.description }}</span> }\n </div>\n </div>\n }\n </div>\n } @else {\n <div class=\"select-option\"\n role=\"option\"\n [id]=\"selectId + '-' + item.value\"\n [attr.aria-selected]=\"isSelected(item)\"\n [attr.aria-disabled]=\"item.disabled ? true : null\"\n [attr.tabindex]=\"item.disabled ? -1 : null\"\n [class.selected]=\"isSelected(item)\"\n [class.disabled]=\"item.disabled\"\n [class.focused]=\"getFlatIndex(item) === focusedIndex()\"\n (click)=\"select(item)\">\n @if (item.icon) { <i [class]=\"'ph ph-' + item.icon\" aria-hidden=\"true\"></i> }\n <div class=\"select-option-content\">\n <span class=\"select-option-label\">{{ item.label }}</span>\n @if (item.description) { <span class=\"select-option-description\">{{ item.description }}</span> }\n </div>\n </div>\n }\n } @empty {\n <div class=\"select-no-results\">Aucun r\u00E9sultat</div>\n }\n </div>\n </div>\n }\n </div>\n\n @if (error()) {\n <div id=\"error-message\" class=\"select-error-message\" role=\"alert\">{{ error() }}</div>\n }
|
|
3332
|
+
], ngImport: i0, template: "<div class=\"select-container\">\n @if (label()) {\n <label class=\"select-label\" [attr.for]=\"selectId\" (click)=\"focusSelect()\" [class.required]=\"required()\">\n {{ label() }}\n @if (required()) { <span class=\"required-mark\">*</span> }\n </label>\n }\n\n <div class=\"select-trigger-wrapper\">\n <div class=\"select-trigger\"\n role=\"combobox\"\n [id]=\"selectId\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-controls]=\"selectId + '-listbox'\"\n [attr.aria-activedescendant]=\"activeDescendant()\"\n [attr.aria-label]=\"computedAriaLabel()\"\n [attr.aria-invalid]=\"!!error()\"\n [attr.aria-required]=\"required()\"\n [attr.aria-disabled]=\"disabled()\"\n [attr.aria-busy]=\"loading()\"\n [attr.aria-describedby]=\"describedBy()\"\n [attr.tabindex]=\"disabled() || loading() ? -1 : 0\"\n (keydown)=\"handleKeydown($event)\"\n (click)=\"toggle()\">\n <div class=\"select-value\">\n <span [class.placeholder]=\"!hasValue()\">\n {{ selectedLabel() }}\n </span>\n </div>\n <div class=\"select-actions\">\n @if (clearable() && hasValue() && !disabled()) {\n <button class=\"select-clear\" (click)=\"clear($event)\">\n <i class=\"ph ph-x\"></i>\n </button>\n }\n @if (loading()) {\n <div class=\"select-loader-trigger\"></div>\n } @else {\n <i class=\"ph ph-caret-down select-arrow\"></i>\n }\n </div>\n </div>\n\n @if (isOpen()) {\n <div class=\"select-dropdown\">\n @if (searchable()) {\n <div class=\"select-search\">\n <i class=\"ph ph-magnifying-glass select-search-icon\"></i>\n <input type=\"text\"\n [placeholder]=\"searchConfig().placeholder\"\n [value]=\"searchTerm()\"\n (input)=\"onSearch($event)\"\n (click)=\"$event.stopPropagation()\">\n </div>\n }\n <div class=\"select-options\"\n role=\"listbox\"\n [id]=\"selectId + '-listbox'\"\n [attr.aria-multiselectable]=\"multiple() || null\"\n (scroll)=\"onScroll($event)\">\n @for (item of filteredOptions(); track getOptionKey(item)) {\n @if (isOptionGroup(item)) {\n <div class=\"select-group\" role=\"group\" [attr.aria-label]=\"item.label\">\n <div class=\"select-group-label\">{{ item.label }}</div>\n @for (opt of item.options; track opt.label) {\n <div class=\"select-option\"\n role=\"option\"\n [id]=\"selectId + '-' + opt.value\"\n [attr.aria-selected]=\"isSelected(opt)\"\n [attr.aria-disabled]=\"(item.disabled || opt.disabled) ? true : null\"\n [attr.tabindex]=\"(item.disabled || opt.disabled) ? -1 : null\"\n [class.selected]=\"isSelected(opt)\"\n [class.disabled]=\"item.disabled || opt.disabled\"\n [class.focused]=\"getFlatIndex(opt) === focusedIndex()\"\n (click)=\"select(opt, !!item.disabled)\">\n @if (opt.icon) { <i [class]=\"'ph ph-' + opt.icon\" aria-hidden=\"true\"></i> }\n <div class=\"select-option-content\">\n <span class=\"select-option-label\">{{ opt.label }}</span>\n @if (opt.description) { <span class=\"select-option-description\">{{ opt.description }}</span> }\n </div>\n </div>\n }\n </div>\n } @else {\n <div class=\"select-option\"\n role=\"option\"\n [id]=\"selectId + '-' + item.value\"\n [attr.aria-selected]=\"isSelected(item)\"\n [attr.aria-disabled]=\"item.disabled ? true : null\"\n [attr.tabindex]=\"item.disabled ? -1 : null\"\n [class.selected]=\"isSelected(item)\"\n [class.disabled]=\"item.disabled\"\n [class.focused]=\"getFlatIndex(item) === focusedIndex()\"\n (click)=\"select(item)\">\n @if (item.icon) { <i [class]=\"'ph ph-' + item.icon\" aria-hidden=\"true\"></i> }\n <div class=\"select-option-content\">\n <span class=\"select-option-label\">{{ item.label }}</span>\n @if (item.description) { <span class=\"select-option-description\">{{ item.description }}</span> }\n </div>\n </div>\n }\n } @empty {\n <div class=\"select-no-results\">Aucun r\u00E9sultat</div>\n }\n </div>\n </div>\n }\n </div>\n\n @if (error()) {\n <div id=\"error-message\" class=\"select-error-message\" role=\"alert\">{{ error() }}</div>\n } @else if (success()) {\n <div id=\"success-message\" class=\"select-success-message\" role=\"status\">{{ success() }}</div>\n } @else if (hint()) {\n <div id=\"hint-message\" class=\"select-hint\">{{ hint() }}</div>\n }\n</div>\n", styles: [":host{display:block;width:100%;max-width:18.75rem}:host.full-width{max-width:none}.select-container{width:100%;display:flex;flex-direction:column;gap:var(--form-field-gap)}.select-trigger-wrapper{position:relative}.select-label{display:block;color:var(--text-color);font-size:.875rem;font-weight:500;cursor:pointer}.select-trigger{display:flex;align-items:center;justify-content:space-between;width:100%;height:2.5rem;padding:0 1rem;background:var(--surface-0);border:.125rem 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;box-shadow:0 0 0 .125rem var(--focus-ring-color)}:host.error .select-trigger{border-color:var(--danger-color)}:host.error .select-trigger:focus{box-shadow:0 0 0 .125rem var(--focus-ring-error)}:host.success .select-trigger{border-color:var(--success-color)}:host.success .select-trigger:focus{box-shadow:0 0 0 .125rem var(--focus-ring-success)}:host.disabled .select-trigger{background:var(--surface-ground);cursor:not-allowed;opacity:var(--opacity-disabled)}:host.filled .select-trigger{background:var(--surface-ground);border:.125rem solid var(--surface-border)}:host.filled .select-trigger:hover:not([disabled]):not(:focus){background:var(--surface-hover)}.select-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.select-actions{display:flex;align-items:center;gap:.5rem;flex-shrink:0}.select-clear{background:none;border:none;cursor:pointer;padding:0;color:var(--text-color-secondary);display:flex}.select-clear:hover{color:var(--danger-color)}.select-loader-trigger{width:1rem;height:1rem;border:2px solid var(--surface-border);border-top-color:var(--primary-color);border-radius:50%;animation:spin .8s linear infinite}.select-arrow{transition:transform .2s;font-size:1rem;color:var(--text-color-secondary)}:host[aria-expanded=true] .select-arrow{transform:rotate(180deg)}.select-dropdown{position:absolute;top:calc(100% + .25rem);left:0;right:0;z-index:1000;background:var(--surface-0);border:.125rem solid var(--surface-border);border-radius:var(--border-radius);box-shadow:var(--shadow-lg)}.select-search{position:relative;padding:.5rem;border-bottom:.0625rem solid var(--surface-border)}.select-search-icon{position:absolute;left:1.25rem;top:50%;transform:translateY(-50%);color:var(--text-color-secondary);font-size:.875rem;pointer-events:none}.select-search input{width:100%;height:2rem;padding:0 .75rem 0 2rem;background:var(--surface-ground);border:.0625rem solid var(--surface-border);border-radius:var(--border-radius);color:var(--text-color);font-size:.875rem;outline:none;box-sizing:border-box;transition:border-color .15s}.select-search input::placeholder{color:var(--text-color-secondary)}.select-search input:focus{border-color:var(--primary-color)}.select-options{max-height:15rem;overflow-y:auto}.select-group-label{padding:.5rem 1rem;font-size:.75rem;font-weight:600;color:var(--text-color-secondary);background:var(--surface-ground)}.select-option{padding:.625rem 1rem;cursor:pointer;display:flex;align-items:flex-start;gap:.5rem}.select-option:hover{background:var(--surface-hover)}.select-option.selected{background:rgba(var(--primary-color-rgb),.1);color:var(--primary-color);font-weight:500}.select-option.focused{background:var(--surface-hover)}.select-option.disabled{opacity:var(--opacity-disabled);cursor:not-allowed}.select-option i{flex-shrink:0;line-height:1.4}.select-option-content{flex:1;min-width:0;display:flex;flex-direction:column;gap:.125rem}.select-option-label{min-width:0}.select-option-description{font-size:.75rem;color:var(--text-color-secondary)}.select-error-message,.select-success-message,.select-hint{font-size:.875rem}.select-error-message{color:var(--danger-color)}.select-success-message{color:var(--success-color)}.select-hint{color:var(--text-color-secondary)}:host.small .select-trigger{text-overflow:ellipsis;height:2rem;font-size:.875rem}:host.large .select-trigger{text-overflow:ellipsis;height:3rem;font-size:1.125rem}@keyframes spin{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3152
3333
|
}
|
|
3153
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
3334
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PshSelectComponent, decorators: [{
|
|
3154
3335
|
type: Component,
|
|
3155
3336
|
args: [{ selector: 'psh-select', imports: [CommonModule, FormsModule], providers: [
|
|
3156
3337
|
{
|
|
@@ -3170,7 +3351,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImpor
|
|
|
3170
3351
|
'[class.loading]': 'loading()',
|
|
3171
3352
|
'[attr.aria-expanded]': 'isOpen().toString()',
|
|
3172
3353
|
'[attr.data-state]': 'state()'
|
|
3173
|
-
}, template: "<div class=\"select-container\">\n @if (label()) {\n <label class=\"select-label\" [attr.for]=\"selectId\" (click)=\"focusSelect()\" [class.required]=\"required()\">\n {{ label() }}\n @if (required()) { <span class=\"required-mark\">*</span> }\n </label>\n }\n\n <div class=\"select-trigger-wrapper\">\n <div class=\"select-trigger\"\n role=\"combobox\"\n [id]=\"selectId\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-controls]=\"selectId + '-listbox'\"\n [attr.aria-activedescendant]=\"activeDescendant()\"\n [attr.aria-label]=\"computedAriaLabel()\"\n [attr.aria-invalid]=\"!!error()\"\n [attr.aria-required]=\"required()\"\n [attr.aria-disabled]=\"disabled()\"\n [attr.aria-busy]=\"loading()\"\n [attr.aria-describedby]=\"describedBy()\"\n [attr.tabindex]=\"disabled() || loading() ? -1 : 0\"\n (keydown)=\"handleKeydown($event)\"\n (click)=\"toggle()\">\n <div class=\"select-value\">\n <span [class.placeholder]=\"!hasValue()\">\n {{ selectedLabel() }}\n </span>\n </div>\n <div class=\"select-actions\">\n @if (clearable() && hasValue() && !disabled()) {\n <button class=\"select-clear\" (click)=\"clear($event)\">\n <i class=\"ph ph-x\"></i>\n </button>\n }\n @if (loading()) {\n <div class=\"select-loader-trigger\"></div>\n } @else {\n <i class=\"ph ph-caret-down select-arrow\"></i>\n }\n </div>\n </div>\n\n @if (isOpen()) {\n <div class=\"select-dropdown\">\n @if (searchable()) {\n <div class=\"select-search\">\n <i class=\"ph ph-magnifying-glass select-search-icon\"></i>\n <input type=\"text\"\n [placeholder]=\"searchConfig().placeholder\"\n [value]=\"searchTerm()\"\n (input)=\"onSearch($event)\"\n (click)=\"$event.stopPropagation()\">\n </div>\n }\n <div class=\"select-options\"\n role=\"listbox\"\n [id]=\"selectId + '-listbox'\"\n [attr.aria-multiselectable]=\"multiple() || null\"\n (scroll)=\"onScroll($event)\">\n @for (item of filteredOptions(); track getOptionKey(item)) {\n @if (isOptionGroup(item)) {\n <div class=\"select-group\" role=\"group\" [attr.aria-label]=\"item.label\">\n <div class=\"select-group-label\">{{ item.label }}</div>\n @for (opt of item.options; track opt.label) {\n <div class=\"select-option\"\n role=\"option\"\n [id]=\"selectId + '-' + opt.value\"\n [attr.aria-selected]=\"isSelected(opt)\"\n [attr.aria-disabled]=\"(item.disabled || opt.disabled) ? true : null\"\n [attr.tabindex]=\"(item.disabled || opt.disabled) ? -1 : null\"\n [class.selected]=\"isSelected(opt)\"\n [class.disabled]=\"item.disabled || opt.disabled\"\n [class.focused]=\"getFlatIndex(opt) === focusedIndex()\"\n (click)=\"select(opt, !!item.disabled)\">\n @if (opt.icon) { <i [class]=\"'ph ph-' + opt.icon\" aria-hidden=\"true\"></i> }\n <div class=\"select-option-content\">\n <span class=\"select-option-label\">{{ opt.label }}</span>\n @if (opt.description) { <span class=\"select-option-description\">{{ opt.description }}</span> }\n </div>\n </div>\n }\n </div>\n } @else {\n <div class=\"select-option\"\n role=\"option\"\n [id]=\"selectId + '-' + item.value\"\n [attr.aria-selected]=\"isSelected(item)\"\n [attr.aria-disabled]=\"item.disabled ? true : null\"\n [attr.tabindex]=\"item.disabled ? -1 : null\"\n [class.selected]=\"isSelected(item)\"\n [class.disabled]=\"item.disabled\"\n [class.focused]=\"getFlatIndex(item) === focusedIndex()\"\n (click)=\"select(item)\">\n @if (item.icon) { <i [class]=\"'ph ph-' + item.icon\" aria-hidden=\"true\"></i> }\n <div class=\"select-option-content\">\n <span class=\"select-option-label\">{{ item.label }}</span>\n @if (item.description) { <span class=\"select-option-description\">{{ item.description }}</span> }\n </div>\n </div>\n }\n } @empty {\n <div class=\"select-no-results\">Aucun r\u00E9sultat</div>\n }\n </div>\n </div>\n }\n </div>\n\n @if (error()) {\n <div id=\"error-message\" class=\"select-error-message\" role=\"alert\">{{ error() }}</div>\n }
|
|
3354
|
+
}, template: "<div class=\"select-container\">\n @if (label()) {\n <label class=\"select-label\" [attr.for]=\"selectId\" (click)=\"focusSelect()\" [class.required]=\"required()\">\n {{ label() }}\n @if (required()) { <span class=\"required-mark\">*</span> }\n </label>\n }\n\n <div class=\"select-trigger-wrapper\">\n <div class=\"select-trigger\"\n role=\"combobox\"\n [id]=\"selectId\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-controls]=\"selectId + '-listbox'\"\n [attr.aria-activedescendant]=\"activeDescendant()\"\n [attr.aria-label]=\"computedAriaLabel()\"\n [attr.aria-invalid]=\"!!error()\"\n [attr.aria-required]=\"required()\"\n [attr.aria-disabled]=\"disabled()\"\n [attr.aria-busy]=\"loading()\"\n [attr.aria-describedby]=\"describedBy()\"\n [attr.tabindex]=\"disabled() || loading() ? -1 : 0\"\n (keydown)=\"handleKeydown($event)\"\n (click)=\"toggle()\">\n <div class=\"select-value\">\n <span [class.placeholder]=\"!hasValue()\">\n {{ selectedLabel() }}\n </span>\n </div>\n <div class=\"select-actions\">\n @if (clearable() && hasValue() && !disabled()) {\n <button class=\"select-clear\" (click)=\"clear($event)\">\n <i class=\"ph ph-x\"></i>\n </button>\n }\n @if (loading()) {\n <div class=\"select-loader-trigger\"></div>\n } @else {\n <i class=\"ph ph-caret-down select-arrow\"></i>\n }\n </div>\n </div>\n\n @if (isOpen()) {\n <div class=\"select-dropdown\">\n @if (searchable()) {\n <div class=\"select-search\">\n <i class=\"ph ph-magnifying-glass select-search-icon\"></i>\n <input type=\"text\"\n [placeholder]=\"searchConfig().placeholder\"\n [value]=\"searchTerm()\"\n (input)=\"onSearch($event)\"\n (click)=\"$event.stopPropagation()\">\n </div>\n }\n <div class=\"select-options\"\n role=\"listbox\"\n [id]=\"selectId + '-listbox'\"\n [attr.aria-multiselectable]=\"multiple() || null\"\n (scroll)=\"onScroll($event)\">\n @for (item of filteredOptions(); track getOptionKey(item)) {\n @if (isOptionGroup(item)) {\n <div class=\"select-group\" role=\"group\" [attr.aria-label]=\"item.label\">\n <div class=\"select-group-label\">{{ item.label }}</div>\n @for (opt of item.options; track opt.label) {\n <div class=\"select-option\"\n role=\"option\"\n [id]=\"selectId + '-' + opt.value\"\n [attr.aria-selected]=\"isSelected(opt)\"\n [attr.aria-disabled]=\"(item.disabled || opt.disabled) ? true : null\"\n [attr.tabindex]=\"(item.disabled || opt.disabled) ? -1 : null\"\n [class.selected]=\"isSelected(opt)\"\n [class.disabled]=\"item.disabled || opt.disabled\"\n [class.focused]=\"getFlatIndex(opt) === focusedIndex()\"\n (click)=\"select(opt, !!item.disabled)\">\n @if (opt.icon) { <i [class]=\"'ph ph-' + opt.icon\" aria-hidden=\"true\"></i> }\n <div class=\"select-option-content\">\n <span class=\"select-option-label\">{{ opt.label }}</span>\n @if (opt.description) { <span class=\"select-option-description\">{{ opt.description }}</span> }\n </div>\n </div>\n }\n </div>\n } @else {\n <div class=\"select-option\"\n role=\"option\"\n [id]=\"selectId + '-' + item.value\"\n [attr.aria-selected]=\"isSelected(item)\"\n [attr.aria-disabled]=\"item.disabled ? true : null\"\n [attr.tabindex]=\"item.disabled ? -1 : null\"\n [class.selected]=\"isSelected(item)\"\n [class.disabled]=\"item.disabled\"\n [class.focused]=\"getFlatIndex(item) === focusedIndex()\"\n (click)=\"select(item)\">\n @if (item.icon) { <i [class]=\"'ph ph-' + item.icon\" aria-hidden=\"true\"></i> }\n <div class=\"select-option-content\">\n <span class=\"select-option-label\">{{ item.label }}</span>\n @if (item.description) { <span class=\"select-option-description\">{{ item.description }}</span> }\n </div>\n </div>\n }\n } @empty {\n <div class=\"select-no-results\">Aucun r\u00E9sultat</div>\n }\n </div>\n </div>\n }\n </div>\n\n @if (error()) {\n <div id=\"error-message\" class=\"select-error-message\" role=\"alert\">{{ error() }}</div>\n } @else if (success()) {\n <div id=\"success-message\" class=\"select-success-message\" role=\"status\">{{ success() }}</div>\n } @else if (hint()) {\n <div id=\"hint-message\" class=\"select-hint\">{{ hint() }}</div>\n }\n</div>\n", styles: [":host{display:block;width:100%;max-width:18.75rem}:host.full-width{max-width:none}.select-container{width:100%;display:flex;flex-direction:column;gap:var(--form-field-gap)}.select-trigger-wrapper{position:relative}.select-label{display:block;color:var(--text-color);font-size:.875rem;font-weight:500;cursor:pointer}.select-trigger{display:flex;align-items:center;justify-content:space-between;width:100%;height:2.5rem;padding:0 1rem;background:var(--surface-0);border:.125rem 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;box-shadow:0 0 0 .125rem var(--focus-ring-color)}:host.error .select-trigger{border-color:var(--danger-color)}:host.error .select-trigger:focus{box-shadow:0 0 0 .125rem var(--focus-ring-error)}:host.success .select-trigger{border-color:var(--success-color)}:host.success .select-trigger:focus{box-shadow:0 0 0 .125rem var(--focus-ring-success)}:host.disabled .select-trigger{background:var(--surface-ground);cursor:not-allowed;opacity:var(--opacity-disabled)}:host.filled .select-trigger{background:var(--surface-ground);border:.125rem solid var(--surface-border)}:host.filled .select-trigger:hover:not([disabled]):not(:focus){background:var(--surface-hover)}.select-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.select-actions{display:flex;align-items:center;gap:.5rem;flex-shrink:0}.select-clear{background:none;border:none;cursor:pointer;padding:0;color:var(--text-color-secondary);display:flex}.select-clear:hover{color:var(--danger-color)}.select-loader-trigger{width:1rem;height:1rem;border:2px solid var(--surface-border);border-top-color:var(--primary-color);border-radius:50%;animation:spin .8s linear infinite}.select-arrow{transition:transform .2s;font-size:1rem;color:var(--text-color-secondary)}:host[aria-expanded=true] .select-arrow{transform:rotate(180deg)}.select-dropdown{position:absolute;top:calc(100% + .25rem);left:0;right:0;z-index:1000;background:var(--surface-0);border:.125rem solid var(--surface-border);border-radius:var(--border-radius);box-shadow:var(--shadow-lg)}.select-search{position:relative;padding:.5rem;border-bottom:.0625rem solid var(--surface-border)}.select-search-icon{position:absolute;left:1.25rem;top:50%;transform:translateY(-50%);color:var(--text-color-secondary);font-size:.875rem;pointer-events:none}.select-search input{width:100%;height:2rem;padding:0 .75rem 0 2rem;background:var(--surface-ground);border:.0625rem solid var(--surface-border);border-radius:var(--border-radius);color:var(--text-color);font-size:.875rem;outline:none;box-sizing:border-box;transition:border-color .15s}.select-search input::placeholder{color:var(--text-color-secondary)}.select-search input:focus{border-color:var(--primary-color)}.select-options{max-height:15rem;overflow-y:auto}.select-group-label{padding:.5rem 1rem;font-size:.75rem;font-weight:600;color:var(--text-color-secondary);background:var(--surface-ground)}.select-option{padding:.625rem 1rem;cursor:pointer;display:flex;align-items:flex-start;gap:.5rem}.select-option:hover{background:var(--surface-hover)}.select-option.selected{background:rgba(var(--primary-color-rgb),.1);color:var(--primary-color);font-weight:500}.select-option.focused{background:var(--surface-hover)}.select-option.disabled{opacity:var(--opacity-disabled);cursor:not-allowed}.select-option i{flex-shrink:0;line-height:1.4}.select-option-content{flex:1;min-width:0;display:flex;flex-direction:column;gap:.125rem}.select-option-label{min-width:0}.select-option-description{font-size:.75rem;color:var(--text-color-secondary)}.select-error-message,.select-success-message,.select-hint{font-size:.875rem}.select-error-message{color:var(--danger-color)}.select-success-message{color:var(--success-color)}.select-hint{color:var(--text-color-secondary)}:host.small .select-trigger{text-overflow:ellipsis;height:2rem;font-size:.875rem}:host.large .select-trigger{text-overflow:ellipsis;height:3rem;font-size:1.125rem}@keyframes spin{to{transform:rotate(360deg)}}\n"] }]
|
|
3174
3355
|
}], 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 }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], multiplePlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiplePlaceholder", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], success: [{ type: i0.Input, args: [{ isSignal: true, alias: "success", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], maxSelections: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSelections", required: false }] }], minSelections: [{ type: i0.Input, args: [{ isSignal: true, alias: "minSelections", required: false }] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], searchConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchConfig", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], searched: [{ type: i0.Output, args: ["searched"] }], scrollEnd: [{ type: i0.Output, args: ["scrollEnd"] }] } });
|
|
3175
3356
|
|
|
3176
3357
|
const SIDEBAR_CONFIG = new InjectionToken('SIDEBAR_CONFIG', {
|
|
@@ -3350,10 +3531,10 @@ class PshSidebarComponent {
|
|
|
3350
3531
|
this.removeEventListeners();
|
|
3351
3532
|
this.focusedElementBeforeOpen = null;
|
|
3352
3533
|
}
|
|
3353
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
3354
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
3534
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PshSidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3535
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", 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 }); }
|
|
3355
3536
|
}
|
|
3356
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
3537
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PshSidebarComponent, decorators: [{
|
|
3357
3538
|
type: Component,
|
|
3358
3539
|
args: [{ selector: 'psh-sidebar', imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
3359
3540
|
'role': 'complementary',
|
|
@@ -3391,10 +3572,10 @@ class PshSpinLoaderComponent {
|
|
|
3391
3572
|
}
|
|
3392
3573
|
});
|
|
3393
3574
|
}
|
|
3394
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
3395
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
3575
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PshSpinLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3576
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", 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 }); }
|
|
3396
3577
|
}
|
|
3397
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
3578
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PshSpinLoaderComponent, decorators: [{
|
|
3398
3579
|
type: Component,
|
|
3399
3580
|
args: [{ selector: 'psh-spinloader', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
3400
3581
|
'role': 'status',
|
|
@@ -3430,10 +3611,10 @@ class PshStepComponent {
|
|
|
3430
3611
|
setActive(value) {
|
|
3431
3612
|
this._isActive.set(value);
|
|
3432
3613
|
}
|
|
3433
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
3434
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.
|
|
3614
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PshStepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3615
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", 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 }); }
|
|
3435
3616
|
}
|
|
3436
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
3617
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PshStepComponent, decorators: [{
|
|
3437
3618
|
type: Component,
|
|
3438
3619
|
args: [{
|
|
3439
3620
|
selector: 'psh-step',
|
|
@@ -3644,10 +3825,10 @@ class PshStepperComponent {
|
|
|
3644
3825
|
break;
|
|
3645
3826
|
}
|
|
3646
3827
|
}
|
|
3647
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
3648
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
3828
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PshStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3829
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: PshStepperComponent, isStandalone: true, selector: "psh-stepper", inputs: { activeStep: { classPropertyName: "activeStep", publicName: "activeStep", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null }, ariaLabels: { classPropertyName: "ariaLabels", publicName: "ariaLabels", isSignal: true, isRequired: false, transformFunction: null }, beforeStepChange: { classPropertyName: "beforeStepChange", publicName: "beforeStepChange", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeStep: "activeStepChange", stepChange: "stepChange", completed: "completed", navigationError: "navigationError" }, host: { properties: { "class.stepper-container": "true", "class.numbered": "variant() === \"numbered\"", "class.progress": "variant() === \"progress\"", "attr.role": "\"region\"", "attr.aria-label": "\"Navigation par \u00E9tapes\"" } }, queries: [{ propertyName: "stepComponents", predicate: PshStepComponent, isSignal: true }], ngImport: i0, template: "<div class=\"stepper-header\" role=\"tablist\">\n @for (step of steps(); track $index; let i = $index) {\n <div\n class=\"step-header\"\n [class.active]=\"i === activeStep()\"\n [class.completed]=\"step.completed\"\n [class.disabled]=\"step.disabled\"\n [class.error]=\"!!step.error\"\n [class.warning]=\"!!step.warning\"\n [class.success]=\"!!step.success\"\n >\n <div\n class=\"step-indicator\"\n role=\"tab\"\n tabindex=\"0\"\n [attr.id]=\"'step-' + i\"\n [attr.aria-selected]=\"i === activeStep()\"\n [attr.aria-disabled]=\"step.disabled\"\n [attr.aria-label]=\"getStepAriaLabel(step, i)\"\n [attr.aria-current]=\"i === activeStep() ? 'step' : null\"\n [attr.aria-describedby]=\"getStepDescribedBy(step, i)\"\n [attr.aria-busy]=\"step.loading\"\n (click)=\"handleStepClick(i)\"\n (keydown)=\"handleKeydown($event, i)\"\n >\n @if (step.loading && variant() === 'progress') {\n <i class=\"ph ph-circle-notch spinner\" aria-hidden=\"true\"></i>\n } @else if (step.completed) {\n <i class=\"ph ph-check\" aria-hidden=\"true\"></i>\n } @else if (variant() === 'numbered') {\n {{ i + 1 }}\n } @else if (step.icon) {\n <i class=\"ph ph-{{ step.icon }}\" aria-hidden=\"true\"></i>\n } @else {\n <span class=\"step-dot\"></span>\n }\n </div>\n\n <div class=\"step-label\">\n <span class=\"step-title\">{{ step.title }}</span>\n @if (step.subtitle) {\n <span class=\"step-subtitle\">{{ step.subtitle }}</span>\n }\n @if (step.error) {\n <span class=\"step-error\" [id]=\"'error-' + i\" role=\"alert\" aria-live=\"polite\">{{ step.error }}</span>\n }\n @if (step.warning) {\n <span class=\"step-warning\" [id]=\"'warning-' + i\" role=\"status\" aria-live=\"polite\">{{ step.warning }}</span>\n }\n @if (step.success) {\n <span class=\"step-success\" [id]=\"'success-' + i\" role=\"status\" aria-live=\"polite\">{{ step.success }}</span>\n }\n </div>\n\n @if (i < steps().length - 1) {\n <div class=\"step-connector\" aria-hidden=\"true\">\n <span class=\"connector-line\"></span>\n </div>\n }\n </div>\n }\n</div>\n\n<div class=\"stepper-content\">\n <ng-content />\n</div>\n", styles: [".stepper-container{display:flex;flex-direction:column;width:100%;container-type:inline-size}.stepper-header{display:flex;flex-direction:row}.step-header{display:flex;flex-direction:row;align-items:center;flex:1;min-width:0;position:relative}.step-indicator{display:flex;align-items:center;justify-content:center;width:var(--size-8);height:var(--size-8);position:relative;z-index:1;border-radius:var(--radius-full);background:var(--surface-card);border:var(--border-width-2) solid var(--surface-border);color:var(--text-color-secondary);transition:all var(--animation-duration-normal) var(--animation-easing-smooth);cursor:pointer;flex-shrink:0}.step-indicator:focus-visible{outline:var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);outline-offset:var(--focus-outline-offset)}.step-header.active .step-indicator{background:var(--primary-gradient);border-color:var(--primary-color);color:var(--primary-color-text)}.step-header.completed .step-indicator{background:var(--success-color);border-color:var(--success-color);color:var(--success-color-text)}.step-header.disabled .step-indicator{cursor:not-allowed;opacity:var(--opacity-disabled)}.step-header.error .step-indicator{background:color-mix(in srgb,var(--danger-color) 10%,transparent);border-color:var(--danger-color);color:var(--danger-color)}.step-header.warning .step-indicator{background:color-mix(in srgb,var(--warning-color) 10%,transparent);border-color:var(--warning-color);color:var(--warning-color)}.step-header.success:not(.completed):not(.active) .step-indicator{background:var(--surface-card);border-color:var(--success-color);border-width:var(--border-width-3);color:var(--success-color);box-shadow:0 0 0 2px color-mix(in srgb,var(--success-color) 15%,transparent)}.step-label{display:flex;flex-direction:column;margin:0 var(--spacing-md);min-width:0}.step-title{color:var(--text-color);font-weight:var(--font-weight-medium);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.step-subtitle{color:var(--text-color-secondary);font-size:var(--font-size-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.step-success{color:var(--success-color);font-size:var(--font-size-sm);margin-top:var(--spacing-xs)}.step-error{color:var(--danger-color);font-size:var(--font-size-sm);margin-top:var(--spacing-xs)}.step-warning{color:var(--warning-color);font-size:var(--font-size-sm);margin-top:var(--spacing-xs)}.step-connector{flex:1;padding:0 var(--spacing-sm);display:flex;align-items:center}.connector-line{height:var(--border-width-2);background:var(--surface-border);width:100%;transition:background var(--animation-duration-normal) var(--animation-easing-smooth)}.step-header.completed .connector-line{background:var(--success-color)}.numbered .step-indicator{font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm)}.progress .step-indicator{position:relative;overflow:hidden}.progress .step-indicator:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background:var(--primary-color);transform:scaleX(0);transform-origin:left;transition:transform var(--animation-duration-default) var(--animation-easing-smooth)}.progress .step-header.active .step-indicator:after{transform:scaleX(1)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.spinner{animation:spin 1s linear infinite}@media(prefers-reduced-motion:reduce){.spinner{animation:spin 2s linear infinite}}.stepper-content{flex:1;min-width:0}psh-step{display:block;animation:fadeIn var(--animation-duration-default) var(--animation-easing-smooth)}@keyframes fadeIn{0%{opacity:0;transform:translateY(var(--animation-distance-sm))}to{opacity:1;transform:translateY(0)}}@container (max-width: 768px){.stepper-header{gap:var(--spacing-xs)}.step-label{margin:0 var(--spacing-sm)}.step-title{white-space:normal;word-break:break-word;max-width:120px}.step-subtitle{white-space:normal;word-break:break-word;font-size:var(--font-size-xs)}.step-connector{padding:0 var(--spacing-xs)}}@container (max-width: 640px){.stepper-header{flex-wrap:wrap;gap:var(--spacing-md)}.step-header{flex-direction:column;align-items:center;text-align:center;gap:var(--spacing-xs);flex:0 0 auto;min-width:80px}.step-label{margin:var(--spacing-xs) 0 0 0;align-items:center}.step-title,.step-subtitle{white-space:normal;text-align:center;font-size:var(--font-size-sm);max-width:none}.step-connector{display:none}.step-indicator{width:var(--size-10);height:var(--size-10)}}@container (max-width: 480px){.step-indicator{width:var(--size-8);height:var(--size-8);font-size:var(--font-size-sm)}.step-title{font-size:var(--font-size-sm);max-width:100px}.step-subtitle{font-size:var(--font-size-xs);display:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3649
3830
|
}
|
|
3650
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
3831
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PshStepperComponent, decorators: [{
|
|
3651
3832
|
type: Component,
|
|
3652
3833
|
args: [{ selector: 'psh-stepper', changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
3653
3834
|
'[class.stepper-container]': 'true',
|
|
@@ -3677,10 +3858,10 @@ class PshFlowStepComponent {
|
|
|
3677
3858
|
setActive(value) {
|
|
3678
3859
|
this._isActive.set(value);
|
|
3679
3860
|
}
|
|
3680
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
3681
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.
|
|
3861
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PshFlowStepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3862
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: PshFlowStepComponent, isStandalone: true, selector: "psh-flow-step", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, completed: { classPropertyName: "completed", publicName: "completed", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, warning: { classPropertyName: "warning", publicName: "warning", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.display": "\"none\"" } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3682
3863
|
}
|
|
3683
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
3864
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PshFlowStepComponent, decorators: [{
|
|
3684
3865
|
type: Component,
|
|
3685
3866
|
args: [{
|
|
3686
3867
|
selector: 'psh-flow-step',
|
|
@@ -3889,10 +4070,10 @@ class PshStateFlowIndicatorComponent {
|
|
|
3889
4070
|
break;
|
|
3890
4071
|
}
|
|
3891
4072
|
}
|
|
3892
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
3893
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
4073
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PshStateFlowIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4074
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: PshStateFlowIndicatorComponent, isStandalone: true, selector: "psh-state-flow-indicator", inputs: { activeStep: { classPropertyName: "activeStep", publicName: "activeStep", isSignal: true, isRequired: false, transformFunction: null }, linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, ariaLabels: { classPropertyName: "ariaLabels", publicName: "ariaLabels", isSignal: true, isRequired: false, transformFunction: null }, beforeStepChange: { classPropertyName: "beforeStepChange", publicName: "beforeStepChange", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeStep: "activeStepChange", stepChange: "stepChange", completed: "completed", navigationError: "navigationError" }, host: { properties: { "class.state-flow-indicator": "true", "class.size-small": "size() === \"small\"", "class.size-medium": "size() === \"medium\"", "class.size-large": "size() === \"large\"", "attr.role": "\"region\"", "attr.aria-label": "\"Indicateur de progression\"" } }, queries: [{ propertyName: "stepComponents", predicate: PshFlowStepComponent, isSignal: true }], ngImport: i0, template: "<div class=\"flow-track\" role=\"tablist\">\n @for (step of steps(); track $index; let i = $index) {\n <div\n class=\"flow-segment\"\n [class.active]=\"i === activeStep()\"\n [class.completed]=\"step.completed\"\n [class.disabled]=\"step.disabled || (!step.completed && i !== activeStep() && !canActivateStep(i))\"\n [class.error]=\"!!step.error\"\n [class.warning]=\"!!step.warning\"\n [class.loading]=\"step.loading\"\n [class.first]=\"i === 0\"\n [class.last]=\"i === steps().length - 1\"\n role=\"tab\"\n [attr.tabindex]=\"step.disabled ? -1 : 0\"\n [attr.id]=\"'flow-step-' + i\"\n [attr.aria-selected]=\"i === activeStep()\"\n [attr.aria-disabled]=\"step.disabled || (!step.completed && i !== activeStep() && !canActivateStep(i))\"\n [attr.aria-label]=\"getStepAriaLabel(step, i)\"\n [attr.aria-current]=\"i === activeStep() ? 'step' : null\"\n [attr.aria-busy]=\"step.loading\"\n (click)=\"handleStepClick(i)\"\n (keydown)=\"handleKeydown($event, i)\"\n >\n <span class=\"flow-segment-content\">\n @if (step.loading) {\n <i class=\"ph ph-circle-notch spinner\" aria-hidden=\"true\"></i>\n } @else if (step.error) {\n <i class=\"ph ph-x-circle\" aria-hidden=\"true\"></i>\n } @else if (step.warning) {\n <i class=\"ph ph-warning\" aria-hidden=\"true\"></i>\n } @else if (step.completed) {\n <i class=\"ph ph-check-circle\" aria-hidden=\"true\"></i>\n }\n <span class=\"flow-segment-title\">{{ step.title }}</span>\n </span>\n </div>\n }\n</div>\n", styles: [".state-flow-indicator{display:block;width:100%;container-type:inline-size}.flow-track{display:flex;flex-direction:row;width:100%}.flow-segment{flex:1;display:flex;align-items:center;justify-content:center;position:relative;background:var(--surface-200);color:var(--text-color-disabled);cursor:not-allowed;transition:background var(--animation-duration-normal) var(--animation-easing-smooth),color var(--animation-duration-normal) var(--animation-easing-smooth),opacity var(--animation-duration-normal) var(--animation-easing-smooth);clip-path:polygon(0 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,0 100%,14px 50%);margin-left:-2px;opacity:var(--opacity-disabled)}.flow-segment.first{clip-path:polygon(0 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,0 100%);margin-left:0;border-radius:var(--radius-lg) 0 0 var(--radius-lg)}.flow-segment.last{clip-path:polygon(0 0,100% 0,100% 100%,0 100%,14px 50%);border-radius:0 var(--radius-lg) var(--radius-lg) 0}.flow-segment.first.last{clip-path:none;border-radius:var(--radius-lg)}.flow-segment.active{background:var(--primary-gradient);color:var(--primary-color-text);cursor:default;opacity:1}.flow-segment.completed{background:var(--success-color);color:var(--success-color-text);cursor:pointer;opacity:1}.flow-segment.completed:hover{filter:brightness(1.1)}.flow-segment.warning{background:var(--warning-color);color:var(--warning-color-text);cursor:pointer;opacity:1}.flow-segment.warning:hover{filter:brightness(1.1)}.flow-segment.error{background:var(--danger-color);color:var(--danger-color-text);cursor:pointer;opacity:1}.flow-segment.error:hover{filter:brightness(1.1)}.flow-segment.loading{opacity:1;cursor:wait}.flow-segment.loading.active{background:var(--primary-gradient);color:var(--primary-color-text)}.flow-segment:focus-visible{outline:var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);outline-offset:var(--focus-outline-offset);z-index:1}.flow-segment-content{display:flex;align-items:center;gap:var(--spacing-xs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 var(--spacing-lg);pointer-events:none}.flow-segment-content i{flex-shrink:0;font-size:var(--icon-size-md)}.flow-segment-title{font-weight:var(--font-weight-medium);overflow:hidden;text-overflow:ellipsis}:host(.size-small) .flow-segment{height:var(--size-9)}:host(.size-small) .flow-segment-title{font-size:var(--font-size-sm)}:host(.size-small) .flow-segment-content i{font-size:var(--icon-size-sm)}:host(.size-small) .flow-segment-content{gap:var(--spacing-xxs);padding:0 var(--spacing-md)}:host(.size-medium) .flow-segment{height:var(--size-11)}:host(.size-medium) .flow-segment-title{font-size:var(--font-size-base)}:host(.size-large) .flow-segment{height:var(--size-14)}:host(.size-large) .flow-segment-title{font-size:var(--font-size-lg)}:host(.size-large) .flow-segment-content i{font-size:var(--icon-size-lg)}:host(.size-large) .flow-segment-content{gap:var(--spacing-sm);padding:0 var(--spacing-xl)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.spinner{animation:spin 1s linear infinite}@media(prefers-reduced-motion:reduce){.spinner{animation:spin 2s linear infinite}}@container (max-width: 640px){.flow-segment-content{padding:0 var(--spacing-md)}.flow-segment-title{font-size:var(--font-size-sm)}.flow-segment-content i{font-size:var(--icon-size-sm)}}@container (max-width: 480px){.flow-track{flex-direction:column;gap:var(--spacing-xxs)}.flow-segment{clip-path:none;margin-left:0;border-radius:var(--radius-md)}.flow-segment.first,.flow-segment.last{clip-path:none;border-radius:var(--radius-md)}.flow-segment-content{justify-content:center;padding:0 var(--spacing-sm)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3894
4075
|
}
|
|
3895
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
4076
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PshStateFlowIndicatorComponent, decorators: [{
|
|
3896
4077
|
type: Component,
|
|
3897
4078
|
args: [{ selector: 'psh-state-flow-indicator', changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
3898
4079
|
'[class.state-flow-indicator]': 'true',
|
|
@@ -3980,14 +4161,14 @@ class PshSwitchComponent {
|
|
|
3980
4161
|
el.nativeElement.blur();
|
|
3981
4162
|
}
|
|
3982
4163
|
}
|
|
3983
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
3984
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
4164
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PshSwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4165
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", 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: [{
|
|
3985
4166
|
provide: NG_VALUE_ACCESSOR,
|
|
3986
4167
|
useExisting: PshSwitchComponent,
|
|
3987
4168
|
multi: true
|
|
3988
|
-
}], 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 }
|
|
4169
|
+
}], 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 } @else 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(--form-field-gap)}.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(--form-label-gap)}.switch-label.label-left{flex-direction:row-reverse;justify-content:space-between;gap:var(--form-label-gap)}.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 }); }
|
|
3989
4170
|
}
|
|
3990
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
4171
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PshSwitchComponent, decorators: [{
|
|
3991
4172
|
type: Component,
|
|
3992
4173
|
args: [{ selector: 'psh-switch', changeDetection: ChangeDetectionStrategy.OnPush, providers: [{
|
|
3993
4174
|
provide: NG_VALUE_ACCESSOR,
|
|
@@ -3998,7 +4179,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImpor
|
|
|
3998
4179
|
'[class.switch-disabled]': 'disabled()',
|
|
3999
4180
|
'[class.switch-error]': '!!error()',
|
|
4000
4181
|
'[class.switch-success]': '!!success()'
|
|
4001
|
-
}, 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 }
|
|
4182
|
+
}, 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 } @else 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(--form-field-gap)}.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(--form-label-gap)}.switch-label.label-left{flex-direction:row-reverse;justify-content:space-between;gap:var(--form-label-gap)}.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"] }]
|
|
4002
4183
|
}], 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 }] }] } });
|
|
4003
4184
|
|
|
4004
4185
|
/**
|
|
@@ -4043,10 +4224,10 @@ class PshTabBarComponent {
|
|
|
4043
4224
|
previousIndex
|
|
4044
4225
|
});
|
|
4045
4226
|
}
|
|
4046
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
4047
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
4227
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PshTabBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4228
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", 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 }); }
|
|
4048
4229
|
}
|
|
4049
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
4230
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PshTabBarComponent, decorators: [{
|
|
4050
4231
|
type: Component,
|
|
4051
4232
|
args: [{ selector: 'psh-tab-bar', changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
4052
4233
|
'[class.top]': 'position() === "top"',
|
|
@@ -4232,10 +4413,10 @@ class PshTableComponent {
|
|
|
4232
4413
|
collapseAll() {
|
|
4233
4414
|
this.expandedRowIds.set(new Set());
|
|
4234
4415
|
}
|
|
4235
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
4236
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", type: PshTableComponent, isStandalone: true, selector: "psh-table", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: true, isRequired: false, transformFunction: null }, hoverable: { classPropertyName: "hoverable", publicName: "hoverable", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, globalSearch: { classPropertyName: "globalSearch", publicName: "globalSearch", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, noResultsMessage: { classPropertyName: "noResultsMessage", publicName: "noResultsMessage", isSignal: true, isRequired: false, transformFunction: null }, globalSearchPlaceholder: { classPropertyName: "globalSearchPlaceholder", publicName: "globalSearchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, tableLayout: { classPropertyName: "tableLayout", publicName: "tableLayout", isSignal: true, isRequired: false, transformFunction: null }, truncateText: { classPropertyName: "truncateText", publicName: "truncateText", isSignal: true, isRequired: false, transformFunction: null }, expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: true, isRequired: false, transformFunction: null }, singleExpand: { classPropertyName: "singleExpand", publicName: "singleExpand", isSignal: true, isRequired: false, transformFunction: null }, expandedRowTemplate: { classPropertyName: "expandedRowTemplate", publicName: "expandedRowTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortChange: "sortChange", globalSearchChange: "globalSearchChange", rowClick: "rowClick", rowExpand: "rowExpand", rowCollapse: "rowCollapse" }, host: { properties: { "class.full-width": "fullWidth()" }, classAttribute: "psh-table" }, ngImport: i0, template: "<div\n class=\"table-wrapper\"\n [class.striped]=\"striped()\"\n [class.hoverable]=\"hoverable()\"\n [class.bordered]=\"bordered()\"\n [class.small]=\"size() === 'small'\"\n [class.large]=\"size() === 'large'\"\n [class.outline]=\"variant() === 'outline'\"\n [class.table-fixed]=\"tableLayout() === 'fixed'\"\n [class.truncate]=\"truncateText()\"\n [attr.data-state]=\"state()\"\n>\n @if (globalSearch()) {\n <div class=\"global-search\" role=\"search\">\n <psh-input\n [placeholder]=\"globalSearchPlaceholder()\"\n [ariaLabel]=\"globalSearchPlaceholder()\"\n [size]=\"size()\"\n [fullWidth]=\"true\"\n [showLabel]=\"false\"\n iconStart=\"magnifying-glass\"\n type=\"search\"\n [(value)]=\"searchTermSignal\"\n (valueChange)=\"onSearchValueChange($event)\"\n />\n </div>\n }\n\n <table role=\"table\">\n <thead>\n <tr>\n @if (expandable()) {\n <th class=\"expand-header\" aria-label=\"Expand\"></th>\n }\n @for (column of columns(); track column.key) {\n <th\n [style.width]=\"column.width\"\n [attr.aria-sort]=\"column.sortable ? (currentSort()?.key === column.key ? (currentSort()?.direction === 'asc' ? 'ascending' : 'descending') : 'none') : null\"\n [class.sortable]=\"column.sortable\"\n (click)=\"handleSort(column)\"\n >\n <div class=\"th-content\">\n {{ column.label }}\n @if (column.sortable) {\n @if (currentSort()?.key === column.key) {\n <i\n [class]=\"'ph ' + (currentSort()?.direction === 'desc' ? 'ph-sort-descending' : 'ph-sort-ascending')\"\n [attr.aria-label]=\"'Sort ' + currentSort()?.direction\"\n aria-hidden=\"true\">\n </i>\n } @else {\n <i\n class=\"ph ph-arrows-down-up sort-icon-neutral\"\n aria-label=\"Sortable\"\n aria-hidden=\"true\">\n </i>\n }\n }\n </div>\n </th>\n }\n </tr>\n </thead>\n\n <tbody>\n @if (loading()) {\n <tr class=\"loading-row\">\n <td [attr.colspan]=\"totalColumns()\">\n <div class=\"loading-indicator\">\n <div class=\"spinner\"></div>\n </div>\n </td>\n </tr>\n } @else if (filteredData().length === 0) {\n <tr class=\"empty-row\">\n <td [attr.colspan]=\"totalColumns()\">\n {{ computedEmptyMessage() }}\n </td>\n </tr>\n } @else {\n @for (row of filteredData(); track row.id) {\n <tr (click)=\"handleRowClick(row)\" [class.expanded]=\"expandable() && isRowExpanded(row)\">\n @if (expandable()) {\n <td class=\"expand-cell\">\n @if (isRowExpandable(row)) {\n <button\n type=\"button\"\n class=\"expand-toggle\"\n [attr.aria-expanded]=\"isRowExpanded(row)\"\n [attr.aria-label]=\"isRowExpanded(row) ? 'Collapse row' : 'Expand row'\"\n (click)=\"toggleRow(row); $event.stopPropagation()\"\n >\n <i class=\"ph ph-caret-right\"></i>\n </button>\n }\n </td>\n }\n @for (column of columns(); track column.key) {\n <td>\n @if (column.template) {\n <ng-container\n [ngTemplateOutlet]=\"column.template\"\n [ngTemplateOutletContext]=\"{ $implicit: row, column: column }\"\n ></ng-container>\n } @else {\n {{ getCellValue(row, column) }}\n }\n </td>\n }\n </tr>\n\n @if (expandable() && isRowExpanded(row)) {\n @if (expandedRowTemplate()) {\n <tr class=\"expanded-content-row\">\n <td [attr.colspan]=\"totalColumns()\">\n <ng-container\n [ngTemplateOutlet]=\"expandedRowTemplate()!\"\n [ngTemplateOutletContext]=\"{ $implicit: row }\"\n ></ng-container>\n </td>\n </tr>\n } @else if (row.children?.length) {\n @for (child of row.children; track child.id) {\n <tr class=\"child-row\">\n @if (expandable()) {\n <td class=\"expand-cell\"></td>\n }\n @for (column of columns(); track column.key) {\n <td>\n @if (column.template) {\n <ng-container\n [ngTemplateOutlet]=\"column.template\"\n [ngTemplateOutletContext]=\"{ $implicit: child, column: column }\"\n ></ng-container>\n } @else {\n {{ getCellValue(child, column) }}\n }\n </td>\n }\n </tr>\n }\n }\n }\n }\n }\n </tbody>\n </table>\n</div>\n", styles: [":host{display:block}:host(.full-width){max-width:none;width:100%}.table-wrapper{width:100%;overflow-x:auto;background:var(--surface-card);border-radius:var(--border-radius)}.table-wrapper.outline{background:transparent;border:var(--border-width-1) solid var(--surface-border)}table{width:100%;border-collapse:collapse;text-align:left}th,td{padding:var(--spacing-md);color:var(--text-color);border-bottom:var(--border-width-1) solid var(--surface-border)}th{font-weight:600;color:var(--text-color);background:var(--surface-ground);white-space:nowrap;-webkit-user-select:none;user-select:none}th.sortable{cursor:pointer}th.sortable:hover{background:var(--surface-hover)}.th-content{display:flex;align-items:center;gap:var(--spacing-xs)}.th-content i{font-size:var(--font-size-base);color:var(--primary-color);display:inline-block;transition:color var(--animation-duration-fast) var(--animation-easing-default)}.th-content i.sort-icon-neutral{color:var(--text-color-secondary);opacity:.5}th.sortable:hover .sort-icon-neutral{opacity:1;color:var(--primary-color)}.table-wrapper.striped tr:nth-child(2n){background:var(--surface-ground)}.table-wrapper.hoverable tr:hover{background:var(--surface-hover)}.table-wrapper.bordered th,.table-wrapper.bordered td{border:var(--border-width-1) solid var(--surface-border)}.table-wrapper.small th,.table-wrapper.small td{padding:var(--spacing-sm);font-size:var(--font-size-sm)}.table-wrapper.large th,.table-wrapper.large td{padding:var(--spacing-lg);font-size:var(--font-size-lg)}.loading-row td,.empty-row td{text-align:center;padding:var(--spacing-xl);color:var(--text-color-secondary)}.loading-indicator{display:flex;justify-content:center;align-items:center}.spinner{width:var(--size-6);height:var(--size-6);border:var(--border-width-2) solid var(--surface-border);border-top-color:var(--primary-color);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.global-search{margin-bottom:var(--spacing-md)}.sort-button{background:transparent;border:none;padding:var(--spacing-xs);cursor:pointer;color:var(--primary-color);border-radius:var(--border-radius);transition:all var(--animation-duration-normal) var(--animation-easing-default)}.sort-button:hover{background:rgba(var(--primary-color-rgb),.1)}.sort-button:focus{outline:none;box-shadow:0 0 0 var(--focus-outline-width) var(--focus-ring-color)}.table-wrapper.table-fixed table{table-layout:fixed}.table-wrapper.truncate td{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:0}.table-wrapper.truncate th{overflow:hidden;text-overflow:ellipsis}.expand-header{width:48px;min-width:48px;max-width:48px;padding:0}.expand-cell{width:48px;min-width:48px;max-width:48px;text-align:center;padding:var(--spacing-xs);vertical-align:middle}.expand-toggle{display:inline-flex;align-items:center;justify-content:center;width:var(--size-8);height:var(--size-8);padding:0;background:transparent;border:none;border-radius:var(--border-radius-sm);cursor:pointer;color:var(--text-color-secondary);font-size:var(--font-size-base);transition:color var(--animation-duration-fast) var(--animation-easing-default)}.expand-toggle:hover{color:var(--primary-color);background:var(--surface-hover)}.expand-toggle:focus-visible{outline:var(--focus-outline-width) solid var(--focus-ring-color);outline-offset:2px}.expand-toggle i{display:inline-block;transition:transform var(--animation-duration-fast) var(--animation-easing-default)}.expand-toggle[aria-expanded=true] i{transform:rotate(90deg)}tr.expanded{border-bottom-color:transparent}.expanded-content-row td{background:var(--surface-ground);padding:var(--spacing-md) var(--spacing-lg);border-bottom:var(--border-width-1) solid var(--surface-border)}.child-row{background:var(--surface-ground)}.child-row td{font-size:.95em;color:var(--text-color-secondary)}.table-wrapper.striped .child-row,.table-wrapper.striped .expanded-content-row{background:var(--surface-ground)}.table-wrapper.hoverable .child-row:hover{background:var(--surface-hover)}@media(max-width:48em){.table-wrapper{font-size:var(--font-size-sm)}th,td{padding:var(--spacing-sm)}.global-search{margin-bottom:var(--spacing-sm)}}@media(max-width:30em){.table-wrapper{border-radius:0;margin:0 calc(-1 * var(--spacing-sm))}th,td{padding:var(--spacing-xs) var(--spacing-sm);font-size:var(--font-size-xs)}.th-content{gap:var(--spacing-xxs)}.th-content i{font-size:var(--font-size-sm)}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PshInputComponent, selector: "psh-input", inputs: ["value", "disabled", "readonly", "loading", "touched", "variant", "size", "fullWidth", "required", "showLabel", "type", "placeholder", "label", "ariaLabel", "iconStart", "iconEnd", "error", "success", "hint", "suggestions", "autocompleteConfig"], outputs: ["valueChange", "disabledChange", "readonlyChange", "loadingChange", "touchedChange", "inputFocus", "inputBlur", "suggestionSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4416
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PshTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4417
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: PshTableComponent, isStandalone: true, selector: "psh-table", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: true, isRequired: false, transformFunction: null }, hoverable: { classPropertyName: "hoverable", publicName: "hoverable", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, globalSearch: { classPropertyName: "globalSearch", publicName: "globalSearch", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, noResultsMessage: { classPropertyName: "noResultsMessage", publicName: "noResultsMessage", isSignal: true, isRequired: false, transformFunction: null }, globalSearchPlaceholder: { classPropertyName: "globalSearchPlaceholder", publicName: "globalSearchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, tableLayout: { classPropertyName: "tableLayout", publicName: "tableLayout", isSignal: true, isRequired: false, transformFunction: null }, truncateText: { classPropertyName: "truncateText", publicName: "truncateText", isSignal: true, isRequired: false, transformFunction: null }, expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: true, isRequired: false, transformFunction: null }, singleExpand: { classPropertyName: "singleExpand", publicName: "singleExpand", isSignal: true, isRequired: false, transformFunction: null }, expandedRowTemplate: { classPropertyName: "expandedRowTemplate", publicName: "expandedRowTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortChange: "sortChange", globalSearchChange: "globalSearchChange", rowClick: "rowClick", rowExpand: "rowExpand", rowCollapse: "rowCollapse" }, host: { properties: { "class.full-width": "fullWidth()" }, classAttribute: "psh-table" }, ngImport: i0, template: "<div\n class=\"table-wrapper\"\n [class.striped]=\"striped()\"\n [class.hoverable]=\"hoverable()\"\n [class.bordered]=\"bordered()\"\n [class.small]=\"size() === 'small'\"\n [class.large]=\"size() === 'large'\"\n [class.outline]=\"variant() === 'outline'\"\n [class.table-fixed]=\"tableLayout() === 'fixed'\"\n [class.truncate]=\"truncateText()\"\n [attr.data-state]=\"state()\"\n>\n @if (globalSearch()) {\n <div class=\"global-search\" role=\"search\">\n <psh-input\n [placeholder]=\"globalSearchPlaceholder()\"\n [ariaLabel]=\"globalSearchPlaceholder()\"\n [size]=\"size()\"\n [fullWidth]=\"true\"\n [showLabel]=\"false\"\n iconStart=\"magnifying-glass\"\n type=\"search\"\n [(value)]=\"searchTermSignal\"\n (valueChange)=\"onSearchValueChange($event)\"\n />\n </div>\n }\n\n <table role=\"table\">\n <thead>\n <tr>\n @if (expandable()) {\n <th class=\"expand-header\" aria-label=\"Expand\"></th>\n }\n @for (column of columns(); track column.key) {\n <th\n [style.width]=\"column.width\"\n [attr.aria-sort]=\"column.sortable ? (currentSort()?.key === column.key ? (currentSort()?.direction === 'asc' ? 'ascending' : 'descending') : 'none') : null\"\n [class.sortable]=\"column.sortable\"\n (click)=\"handleSort(column)\"\n >\n <div class=\"th-content\">\n {{ column.label }}\n @if (column.sortable) {\n @if (currentSort()?.key === column.key) {\n <i\n [class]=\"'ph ' + (currentSort()?.direction === 'desc' ? 'ph-sort-descending' : 'ph-sort-ascending')\"\n [attr.aria-label]=\"'Sort ' + currentSort()?.direction\"\n aria-hidden=\"true\">\n </i>\n } @else {\n <i\n class=\"ph ph-arrows-down-up sort-icon-neutral\"\n aria-label=\"Sortable\"\n aria-hidden=\"true\">\n </i>\n }\n }\n </div>\n </th>\n }\n </tr>\n </thead>\n\n <tbody>\n @if (loading()) {\n <tr class=\"loading-row\">\n <td [attr.colspan]=\"totalColumns()\">\n <div class=\"loading-indicator\">\n <div class=\"spinner\"></div>\n </div>\n </td>\n </tr>\n } @else if (filteredData().length === 0) {\n <tr class=\"empty-row\">\n <td [attr.colspan]=\"totalColumns()\">\n {{ computedEmptyMessage() }}\n </td>\n </tr>\n } @else {\n @for (row of filteredData(); track row.id) {\n <tr (click)=\"handleRowClick(row)\" [class.expanded]=\"expandable() && isRowExpanded(row)\">\n @if (expandable()) {\n <td class=\"expand-cell\">\n @if (isRowExpandable(row)) {\n <button\n type=\"button\"\n class=\"expand-toggle\"\n [attr.aria-expanded]=\"isRowExpanded(row)\"\n [attr.aria-label]=\"isRowExpanded(row) ? 'Collapse row' : 'Expand row'\"\n (click)=\"toggleRow(row); $event.stopPropagation()\"\n >\n <i class=\"ph ph-caret-right\"></i>\n </button>\n }\n </td>\n }\n @for (column of columns(); track column.key) {\n <td>\n @if (column.template) {\n <ng-container\n [ngTemplateOutlet]=\"column.template\"\n [ngTemplateOutletContext]=\"{ $implicit: row, column: column }\"\n ></ng-container>\n } @else {\n {{ getCellValue(row, column) }}\n }\n </td>\n }\n </tr>\n\n @if (expandable() && isRowExpanded(row)) {\n @if (expandedRowTemplate()) {\n <tr class=\"expanded-content-row\">\n <td [attr.colspan]=\"totalColumns()\">\n <ng-container\n [ngTemplateOutlet]=\"expandedRowTemplate()!\"\n [ngTemplateOutletContext]=\"{ $implicit: row }\"\n ></ng-container>\n </td>\n </tr>\n } @else if (row.children?.length) {\n @for (child of row.children; track child.id) {\n <tr class=\"child-row\">\n @if (expandable()) {\n <td class=\"expand-cell\"></td>\n }\n @for (column of columns(); track column.key) {\n <td>\n @if (column.template) {\n <ng-container\n [ngTemplateOutlet]=\"column.template\"\n [ngTemplateOutletContext]=\"{ $implicit: child, column: column }\"\n ></ng-container>\n } @else {\n {{ getCellValue(child, column) }}\n }\n </td>\n }\n </tr>\n }\n }\n }\n }\n }\n </tbody>\n </table>\n</div>\n", styles: [":host{display:block}:host(.full-width){max-width:none;width:100%}.table-wrapper{width:100%;overflow-x:auto;background:var(--surface-card);border-radius:var(--border-radius)}.table-wrapper.outline{background:transparent;border:var(--border-width-1) solid var(--surface-border)}table{width:100%;border-collapse:collapse;text-align:left}th,td{padding:var(--spacing-md);color:var(--text-color);border-bottom:var(--border-width-1) solid var(--surface-border)}th{font-weight:600;color:var(--text-color);background:var(--surface-ground);white-space:nowrap;-webkit-user-select:none;user-select:none}th.sortable{cursor:pointer}th.sortable:hover{background:var(--surface-hover)}.th-content{display:flex;align-items:center;gap:var(--spacing-xs)}.th-content i{font-size:var(--font-size-base);color:var(--primary-color);display:inline-block;transition:color var(--animation-duration-fast) var(--animation-easing-default)}.th-content i.sort-icon-neutral{color:var(--text-color-secondary);opacity:.5}th.sortable:hover .sort-icon-neutral{opacity:1;color:var(--primary-color)}.table-wrapper.striped tr:nth-child(2n){background:var(--surface-ground)}.table-wrapper.hoverable tr:hover{background:var(--surface-hover)}.table-wrapper.bordered th,.table-wrapper.bordered td{border:var(--border-width-1) solid var(--surface-border)}.table-wrapper.small th,.table-wrapper.small td{padding:var(--spacing-sm);font-size:var(--font-size-sm)}.table-wrapper.large th,.table-wrapper.large td{padding:var(--spacing-lg);font-size:var(--font-size-lg)}.loading-row td,.empty-row td{text-align:center;padding:var(--spacing-xl);color:var(--text-color-secondary)}.loading-indicator{display:flex;justify-content:center;align-items:center}.spinner{width:var(--size-6);height:var(--size-6);border:var(--border-width-2) solid var(--surface-border);border-top-color:var(--primary-color);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.global-search{margin-bottom:var(--spacing-md)}.sort-button{background:transparent;border:none;padding:var(--spacing-xs);cursor:pointer;color:var(--primary-color);border-radius:var(--border-radius);transition:all var(--animation-duration-normal) var(--animation-easing-default)}.sort-button:hover{background:rgba(var(--primary-color-rgb),.1)}.sort-button:focus{outline:none;box-shadow:0 0 0 var(--focus-outline-width) var(--focus-ring-color)}.table-wrapper.table-fixed table{table-layout:fixed}.table-wrapper.truncate td{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:0}.table-wrapper.truncate th{overflow:hidden;text-overflow:ellipsis}.expand-header{width:48px;min-width:48px;max-width:48px;padding:0}.expand-cell{width:48px;min-width:48px;max-width:48px;text-align:center;padding:var(--spacing-xs);vertical-align:middle}.expand-toggle{display:inline-flex;align-items:center;justify-content:center;width:var(--size-8);height:var(--size-8);padding:0;background:transparent;border:none;border-radius:var(--border-radius-sm);cursor:pointer;color:var(--text-color-secondary);font-size:var(--font-size-base);transition:color var(--animation-duration-fast) var(--animation-easing-default)}.expand-toggle:hover{color:var(--primary-color);background:var(--surface-hover)}.expand-toggle:focus-visible{outline:var(--focus-outline-width) solid var(--focus-ring-color);outline-offset:2px}.expand-toggle i{display:inline-block;transition:transform var(--animation-duration-fast) var(--animation-easing-default)}.expand-toggle[aria-expanded=true] i{transform:rotate(90deg)}tr.expanded{border-bottom-color:transparent}.expanded-content-row td{background:var(--surface-ground);padding:var(--spacing-md) var(--spacing-lg);border-bottom:var(--border-width-1) solid var(--surface-border)}.child-row{background:var(--surface-ground)}.child-row td{font-size:.95em;color:var(--text-color-secondary)}.table-wrapper.striped .child-row,.table-wrapper.striped .expanded-content-row{background:var(--surface-ground)}.table-wrapper.hoverable .child-row:hover{background:var(--surface-hover)}@media(max-width:48em){.table-wrapper{font-size:var(--font-size-sm)}th,td{padding:var(--spacing-sm)}.global-search{margin-bottom:var(--spacing-sm)}}@media(max-width:30em){.table-wrapper{border-radius:0;margin:0 calc(-1 * var(--spacing-sm))}th,td{padding:var(--spacing-xs) var(--spacing-sm);font-size:var(--font-size-xs)}.th-content{gap:var(--spacing-xxs)}.th-content i{font-size:var(--font-size-sm)}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PshInputComponent, selector: "psh-input", inputs: ["value", "disabled", "readonly", "loading", "touched", "variant", "size", "fullWidth", "required", "showLabel", "type", "placeholder", "label", "ariaLabel", "iconStart", "iconEnd", "error", "success", "hint", "suggestions", "autocompleteConfig"], outputs: ["valueChange", "disabledChange", "readonlyChange", "loadingChange", "touchedChange", "inputFocus", "inputBlur", "suggestionSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4237
4418
|
}
|
|
4238
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
4419
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PshTableComponent, decorators: [{
|
|
4239
4420
|
type: Component,
|
|
4240
4421
|
args: [{ selector: 'psh-table', imports: [NgTemplateOutlet, PshInputComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
4241
4422
|
'class': 'psh-table',
|
|
@@ -4269,10 +4450,10 @@ class PshTabComponent {
|
|
|
4269
4450
|
ariaLabel: this.ariaLabel()
|
|
4270
4451
|
};
|
|
4271
4452
|
}
|
|
4272
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
4273
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.
|
|
4453
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PshTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4454
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", 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 }); }
|
|
4274
4455
|
}
|
|
4275
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
4456
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PshTabComponent, decorators: [{
|
|
4276
4457
|
type: Component,
|
|
4277
4458
|
args: [{
|
|
4278
4459
|
selector: 'psh-tab',
|
|
@@ -4425,10 +4606,10 @@ class PshTabsComponent {
|
|
|
4425
4606
|
getTabComponent(index) {
|
|
4426
4607
|
return this.tabComponents()[index];
|
|
4427
4608
|
}
|
|
4428
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
4429
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
4609
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PshTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4610
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", 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 }); }
|
|
4430
4611
|
}
|
|
4431
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
4612
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PshTabsComponent, decorators: [{
|
|
4432
4613
|
type: Component,
|
|
4433
4614
|
args: [{ selector: 'psh-tabs', changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
4434
4615
|
'[class]': 'hostClasses()',
|
|
@@ -4495,10 +4676,10 @@ class PshToastService {
|
|
|
4495
4676
|
setPosition(position) {
|
|
4496
4677
|
this._position.set(position);
|
|
4497
4678
|
}
|
|
4498
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
4499
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.
|
|
4679
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PshToastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
4680
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PshToastService, providedIn: 'root' }); }
|
|
4500
4681
|
}
|
|
4501
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
4682
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PshToastService, decorators: [{
|
|
4502
4683
|
type: Injectable,
|
|
4503
4684
|
args: [{
|
|
4504
4685
|
providedIn: 'root'
|
|
@@ -4602,90 +4783,198 @@ class PshToastComponent {
|
|
|
4602
4783
|
this.timeoutMap.clear();
|
|
4603
4784
|
this.scheduledToastIds.clear();
|
|
4604
4785
|
}
|
|
4605
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
4606
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
4786
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PshToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4787
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", 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 }); }
|
|
4607
4788
|
}
|
|
4608
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
4789
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PshToastComponent, decorators: [{
|
|
4609
4790
|
type: Component,
|
|
4610
4791
|
args: [{ selector: 'psh-toast', changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
4611
4792
|
'(document:keydown.escape)': 'handleEscapeKey()'
|
|
4612
4793
|
}, 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"] }]
|
|
4613
4794
|
}], ctorParameters: () => [] });
|
|
4614
4795
|
|
|
4615
|
-
// Clé pour le stockage localStorage
|
|
4616
|
-
const THEME_STORAGE_KEY = 'helix-theme-preference';
|
|
4617
|
-
const INSURER_CONTEXT_SERVICE = new InjectionToken('INSURER_CONTEXT_SERVICE');
|
|
4618
|
-
const LIGHTEN_PERCENTAGES = {
|
|
4619
|
-
light: 20,
|
|
4620
|
-
lighter: 40
|
|
4621
|
-
};
|
|
4622
|
-
const DARKEN_PERCENTAGES = {
|
|
4623
|
-
dark: 20,
|
|
4624
|
-
darker: 40
|
|
4625
|
-
};
|
|
4626
|
-
/**
|
|
4627
|
-
* Convertit une couleur hexadécimale en RGB
|
|
4628
|
-
*/
|
|
4629
4796
|
function hexToRgb(hex) {
|
|
4630
|
-
|
|
4631
|
-
|
|
4632
|
-
|
|
4633
|
-
if (![3, 6].includes(hex.length)) {
|
|
4634
|
-
console.error(`Invalid hex color: ${hex}`);
|
|
4635
|
-
return null;
|
|
4797
|
+
let value = hex.replace(/^#/, '').trim();
|
|
4798
|
+
if (value.length === 3) {
|
|
4799
|
+
value = value.split('').map((char) => char + char).join('');
|
|
4636
4800
|
}
|
|
4637
|
-
|
|
4638
|
-
|
|
4639
|
-
hex = hex.split('').map(char => char + char).join('');
|
|
4801
|
+
if (value.length !== 6 || !/^[0-9a-fA-F]{6}$/.test(value)) {
|
|
4802
|
+
return null;
|
|
4640
4803
|
}
|
|
4641
|
-
|
|
4642
|
-
|
|
4643
|
-
|
|
4644
|
-
|
|
4645
|
-
|
|
4804
|
+
return {
|
|
4805
|
+
r: parseInt(value.substring(0, 2), 16),
|
|
4806
|
+
g: parseInt(value.substring(2, 4), 16),
|
|
4807
|
+
b: parseInt(value.substring(4, 6), 16),
|
|
4808
|
+
};
|
|
4646
4809
|
}
|
|
4647
|
-
|
|
4648
|
-
|
|
4649
|
-
|
|
4650
|
-
|
|
4651
|
-
|
|
4652
|
-
|
|
4653
|
-
const hex = Math.max(0, Math.min(255, Math.round(x))).toString(16);
|
|
4654
|
-
return hex.length === 1 ? '0' + hex : hex;
|
|
4655
|
-
})
|
|
4656
|
-
.join('');
|
|
4810
|
+
function rgbToHex({ r, g, b }) {
|
|
4811
|
+
const toHex = (channel) => {
|
|
4812
|
+
const clamped = Math.max(0, Math.min(255, Math.round(channel)));
|
|
4813
|
+
return clamped.toString(16).padStart(2, '0');
|
|
4814
|
+
};
|
|
4815
|
+
return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
|
|
4657
4816
|
}
|
|
4658
|
-
|
|
4659
|
-
|
|
4660
|
-
|
|
4661
|
-
|
|
4662
|
-
|
|
4663
|
-
|
|
4664
|
-
|
|
4665
|
-
const
|
|
4666
|
-
const
|
|
4667
|
-
|
|
4668
|
-
|
|
4669
|
-
|
|
4670
|
-
|
|
4817
|
+
function srgbToLinear(channel) {
|
|
4818
|
+
const normalized = channel / 255;
|
|
4819
|
+
return normalized <= 0.04045
|
|
4820
|
+
? normalized / 12.92
|
|
4821
|
+
: Math.pow((normalized + 0.055) / 1.055, 2.4);
|
|
4822
|
+
}
|
|
4823
|
+
function linearToSrgb(value) {
|
|
4824
|
+
const clamped = Math.max(0, Math.min(1, value));
|
|
4825
|
+
const scaled = clamped <= 0.0031308
|
|
4826
|
+
? 12.92 * clamped
|
|
4827
|
+
: 1.055 * Math.pow(clamped, 1 / 2.4) - 0.055;
|
|
4828
|
+
return scaled * 255;
|
|
4829
|
+
}
|
|
4830
|
+
function relativeLuminance(rgb) {
|
|
4831
|
+
const r = srgbToLinear(rgb.r);
|
|
4832
|
+
const g = srgbToLinear(rgb.g);
|
|
4833
|
+
const b = srgbToLinear(rgb.b);
|
|
4834
|
+
return 0.2126 * r + 0.7152 * g + 0.0722 * b;
|
|
4835
|
+
}
|
|
4836
|
+
function contrastRatio(a, b) {
|
|
4837
|
+
const la = relativeLuminance(a);
|
|
4838
|
+
const lb = relativeLuminance(b);
|
|
4839
|
+
const lighter = Math.max(la, lb);
|
|
4840
|
+
const darker = Math.min(la, lb);
|
|
4841
|
+
return (lighter + 0.05) / (darker + 0.05);
|
|
4842
|
+
}
|
|
4843
|
+
function bestTextColor(background) {
|
|
4844
|
+
const white = { r: 255, g: 255, b: 255 };
|
|
4845
|
+
const black = { r: 0, g: 0, b: 0 };
|
|
4846
|
+
return contrastRatio(background, white) >= contrastRatio(background, black)
|
|
4847
|
+
? '#FFFFFF'
|
|
4848
|
+
: '#000000';
|
|
4849
|
+
}
|
|
4850
|
+
function rgbToLinear(rgb) {
|
|
4851
|
+
return [srgbToLinear(rgb.r), srgbToLinear(rgb.g), srgbToLinear(rgb.b)];
|
|
4852
|
+
}
|
|
4853
|
+
function linearToRgb(lin) {
|
|
4854
|
+
return {
|
|
4855
|
+
r: linearToSrgb(lin[0]),
|
|
4856
|
+
g: linearToSrgb(lin[1]),
|
|
4857
|
+
b: linearToSrgb(lin[2]),
|
|
4858
|
+
};
|
|
4859
|
+
}
|
|
4860
|
+
function rgbToOklch(rgb) {
|
|
4861
|
+
const [r, g, b] = rgbToLinear(rgb);
|
|
4862
|
+
const l = 0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b;
|
|
4863
|
+
const m = 0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b;
|
|
4864
|
+
const s = 0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b;
|
|
4865
|
+
const l_ = Math.cbrt(l);
|
|
4866
|
+
const m_ = Math.cbrt(m);
|
|
4867
|
+
const s_ = Math.cbrt(s);
|
|
4868
|
+
const L = 0.2104542553 * l_ + 0.7936177850 * m_ - 0.0040720468 * s_;
|
|
4869
|
+
const a = 1.9779984951 * l_ - 2.4285922050 * m_ + 0.4505937099 * s_;
|
|
4870
|
+
const bLab = 0.0259040371 * l_ + 0.7827717662 * m_ - 0.8086757660 * s_;
|
|
4871
|
+
const C = Math.sqrt(a * a + bLab * bLab);
|
|
4872
|
+
let H = (Math.atan2(bLab, a) * 180) / Math.PI;
|
|
4873
|
+
if (H < 0)
|
|
4874
|
+
H += 360;
|
|
4875
|
+
return { l: L, c: C, h: H };
|
|
4876
|
+
}
|
|
4877
|
+
function oklchToRgb({ l, c, h }) {
|
|
4878
|
+
const hRad = (h * Math.PI) / 180;
|
|
4879
|
+
const a = c * Math.cos(hRad);
|
|
4880
|
+
const bLab = c * Math.sin(hRad);
|
|
4881
|
+
const l_ = l + 0.3963377774 * a + 0.2158037573 * bLab;
|
|
4882
|
+
const m_ = l - 0.1055613458 * a - 0.0638541728 * bLab;
|
|
4883
|
+
const s_ = l - 0.0894841775 * a - 1.2914855480 * bLab;
|
|
4884
|
+
const lCube = l_ ** 3;
|
|
4885
|
+
const mCube = m_ ** 3;
|
|
4886
|
+
const sCube = s_ ** 3;
|
|
4887
|
+
const r = 4.0767416621 * lCube - 3.3077115913 * mCube + 0.2309699292 * sCube;
|
|
4888
|
+
const g = -1.2684380046 * lCube + 2.6097574011 * mCube - 0.3413193965 * sCube;
|
|
4889
|
+
const b = -0.0041960863 * lCube - 0.7034186147 * mCube + 1.7076147010 * sCube;
|
|
4890
|
+
return linearToRgb([r, g, b]);
|
|
4891
|
+
}
|
|
4892
|
+
function withLightness(color, lightness) {
|
|
4893
|
+
const oklch = rgbToOklch(color);
|
|
4894
|
+
return oklchToRgb({ l: Math.max(0, Math.min(1, lightness)), c: oklch.c, h: oklch.h });
|
|
4895
|
+
}
|
|
4896
|
+
function shiftLightness(color, delta) {
|
|
4897
|
+
const oklch = rgbToOklch(color);
|
|
4898
|
+
return oklchToRgb({
|
|
4899
|
+
l: Math.max(0, Math.min(1, oklch.l + delta)),
|
|
4900
|
+
c: oklch.c,
|
|
4901
|
+
h: oklch.h,
|
|
4902
|
+
});
|
|
4903
|
+
}
|
|
4904
|
+
|
|
4905
|
+
const WCAG_AA_NORMAL = 4.5;
|
|
4906
|
+
const WCAG_AA_LARGE = 3;
|
|
4907
|
+
const WCAG_AAA_NORMAL = 7;
|
|
4908
|
+
const WCAG_AAA_LARGE = 4.5;
|
|
4909
|
+
function targetRatio(target) {
|
|
4910
|
+
return target === 'AAA' ? WCAG_AAA_NORMAL : WCAG_AA_NORMAL;
|
|
4671
4911
|
}
|
|
4672
4912
|
/**
|
|
4673
|
-
*
|
|
4913
|
+
* Adjusts a color in OKLCH lightness until the contrast ratio against the
|
|
4914
|
+
* background meets or exceeds the target. Direction is chosen based on the
|
|
4915
|
+
* background (darken on light backgrounds, lighten on dark backgrounds).
|
|
4916
|
+
* Hue and chroma are preserved as much as possible.
|
|
4674
4917
|
*/
|
|
4675
|
-
function
|
|
4676
|
-
|
|
4677
|
-
|
|
4678
|
-
|
|
4679
|
-
const
|
|
4680
|
-
const
|
|
4681
|
-
const
|
|
4682
|
-
|
|
4683
|
-
|
|
4684
|
-
|
|
4918
|
+
function ensureContrast(color, background, ratio) {
|
|
4919
|
+
if (contrastRatio(color, background) >= ratio) {
|
|
4920
|
+
return color;
|
|
4921
|
+
}
|
|
4922
|
+
const backgroundLuminance = relativeLuminance(background);
|
|
4923
|
+
const { c, h } = rgbToOklch(color);
|
|
4924
|
+
const goLighter = backgroundLuminance < 0.5;
|
|
4925
|
+
let low = 0;
|
|
4926
|
+
let high = 1;
|
|
4927
|
+
let best = color;
|
|
4928
|
+
let bestRatio = contrastRatio(color, background);
|
|
4929
|
+
for (let i = 0; i < 24; i++) {
|
|
4930
|
+
const mid = (low + high) / 2;
|
|
4931
|
+
const candidate = oklchToRgb({ l: mid, c, h });
|
|
4932
|
+
const candidateRatio = contrastRatio(candidate, background);
|
|
4933
|
+
if (candidateRatio >= ratio) {
|
|
4934
|
+
best = candidate;
|
|
4935
|
+
bestRatio = candidateRatio;
|
|
4936
|
+
if (goLighter) {
|
|
4937
|
+
high = mid;
|
|
4938
|
+
}
|
|
4939
|
+
else {
|
|
4940
|
+
low = mid;
|
|
4941
|
+
}
|
|
4942
|
+
}
|
|
4943
|
+
else {
|
|
4944
|
+
if (candidateRatio > bestRatio) {
|
|
4945
|
+
best = candidate;
|
|
4946
|
+
bestRatio = candidateRatio;
|
|
4947
|
+
}
|
|
4948
|
+
if (goLighter) {
|
|
4949
|
+
low = mid;
|
|
4950
|
+
}
|
|
4951
|
+
else {
|
|
4952
|
+
high = mid;
|
|
4953
|
+
}
|
|
4954
|
+
}
|
|
4955
|
+
}
|
|
4956
|
+
if (bestRatio < ratio) {
|
|
4957
|
+
const chromaReduced = oklchToRgb({
|
|
4958
|
+
l: goLighter ? 0.98 : 0.08,
|
|
4959
|
+
c: Math.min(c, 0.05),
|
|
4960
|
+
h,
|
|
4961
|
+
});
|
|
4962
|
+
if (contrastRatio(chromaReduced, background) > bestRatio) {
|
|
4963
|
+
return chromaReduced;
|
|
4964
|
+
}
|
|
4965
|
+
}
|
|
4966
|
+
return best;
|
|
4685
4967
|
}
|
|
4968
|
+
|
|
4969
|
+
const THEME_STORAGE_KEY = 'helix-theme-preference';
|
|
4970
|
+
const CUSTOMER_CONTEXT_SERVICE = new InjectionToken('CUSTOMER_CONTEXT_SERVICE');
|
|
4971
|
+
const PSH_THEME_OPTIONS = new InjectionToken('PSH_THEME_OPTIONS');
|
|
4972
|
+
const LIGHT_BACKGROUND = { r: 255, g: 255, b: 255 };
|
|
4973
|
+
const DARK_BACKGROUND = { r: 20, g: 20, b: 25 };
|
|
4686
4974
|
class ThemeService {
|
|
4687
4975
|
constructor() {
|
|
4688
|
-
this.
|
|
4976
|
+
this.customerContext = inject(CUSTOMER_CONTEXT_SERVICE, { optional: true });
|
|
4977
|
+
this.options = inject(PSH_THEME_OPTIONS, { optional: true });
|
|
4689
4978
|
this.isDarkThemeSignal = signal(false, ...(ngDevMode ? [{ debugName: "isDarkThemeSignal" }] : /* istanbul ignore next */ []));
|
|
4690
4979
|
this.themeNameSignal = signal('light', ...(ngDevMode ? [{ debugName: "themeNameSignal" }] : /* istanbul ignore next */ []));
|
|
4691
4980
|
this.lastChangeSignal = signal(new Date(), ...(ngDevMode ? [{ debugName: "lastChangeSignal" }] : /* istanbul ignore next */ []));
|
|
@@ -4694,26 +4983,17 @@ class ThemeService {
|
|
|
4694
4983
|
this.themeInfo = computed(() => ({
|
|
4695
4984
|
isDark: this.isDarkTheme(),
|
|
4696
4985
|
name: this.themeName(),
|
|
4697
|
-
lastChange: this.lastChangeSignal()
|
|
4986
|
+
lastChange: this.lastChangeSignal(),
|
|
4698
4987
|
}), ...(ngDevMode ? [{ debugName: "themeInfo" }] : /* istanbul ignore next */ []));
|
|
4699
|
-
// Initialiser le thème en fonction de la préférence stockée ou par défaut 'light'
|
|
4700
4988
|
this.initializeTheme();
|
|
4701
|
-
|
|
4702
|
-
// window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
|
4703
|
-
// this.setDarkTheme(e.matches);
|
|
4704
|
-
// });
|
|
4705
|
-
// Attendre que l'injection soit prête avant d'appliquer le thème
|
|
4706
|
-
setTimeout(() => {
|
|
4707
|
-
this.applyInsurerTheme();
|
|
4708
|
-
}, 0);
|
|
4989
|
+
setTimeout(() => this.applyCustomerTheme(), 0);
|
|
4709
4990
|
}
|
|
4710
4991
|
setDarkTheme(isDark) {
|
|
4711
4992
|
document.documentElement.setAttribute('data-theme', isDark ? 'dark' : 'light');
|
|
4712
4993
|
this.isDarkThemeSignal.set(isDark);
|
|
4713
4994
|
this.themeNameSignal.set(isDark ? 'dark' : 'light');
|
|
4714
4995
|
this.lastChangeSignal.set(new Date());
|
|
4715
|
-
|
|
4716
|
-
this.applyInsurerTheme();
|
|
4996
|
+
this.applyCustomerTheme();
|
|
4717
4997
|
}
|
|
4718
4998
|
toggleTheme() {
|
|
4719
4999
|
this.setDarkTheme(!this.isDarkThemeSignal());
|
|
@@ -4722,158 +5002,116 @@ class ThemeService {
|
|
|
4722
5002
|
this.themeNameSignal.set(name);
|
|
4723
5003
|
this.isDarkThemeSignal.set(name === 'dark');
|
|
4724
5004
|
this.lastChangeSignal.set(new Date());
|
|
4725
|
-
// Sauvegarder la préférence dans localStorage
|
|
4726
5005
|
this.saveThemePreference(name);
|
|
4727
|
-
|
|
4728
|
-
this.applyInsurerTheme();
|
|
5006
|
+
this.applyCustomerTheme();
|
|
4729
5007
|
}
|
|
4730
5008
|
/**
|
|
4731
|
-
*
|
|
4732
|
-
*
|
|
4733
|
-
*
|
|
5009
|
+
* Applies the customer brand colors to CSS variables, automatically
|
|
5010
|
+
* deriving variants in OKLCH and enforcing WCAG contrast against the
|
|
5011
|
+
* current theme background. If the provided color is not accessible
|
|
5012
|
+
* as a UI color, it is silently adjusted so UI components stay readable.
|
|
5013
|
+
* The original brand color is preserved in --customer-*-color-source
|
|
5014
|
+
* for purely decorative use (logos, marketing surfaces).
|
|
4734
5015
|
*/
|
|
4735
|
-
|
|
4736
|
-
|
|
4737
|
-
const primaryColor = this.insurerContext?.primaryColor();
|
|
4738
|
-
const secondaryColor = this.insurerContext?.secondaryColor();
|
|
4739
|
-
// Debug: afficher les couleurs utilisées
|
|
4740
|
-
console.log('Applying theme colors:', {
|
|
4741
|
-
primaryColor,
|
|
4742
|
-
secondaryColor,
|
|
4743
|
-
hasInsurerContext: !!this.insurerContext,
|
|
4744
|
-
currentTheme: this.themeName(),
|
|
4745
|
-
usingCssFallbacks: !primaryColor && !secondaryColor
|
|
4746
|
-
});
|
|
4747
|
-
// Si aucun contexte assureur, ne rien faire - les fallbacks CSS seront utilisés
|
|
4748
|
-
if (!this.insurerContext) {
|
|
4749
|
-
console.log('No InsurerContext service provided - using CSS theme fallback colors');
|
|
5016
|
+
applyCustomerTheme() {
|
|
5017
|
+
if (!this.customerContext) {
|
|
4750
5018
|
return;
|
|
4751
5019
|
}
|
|
4752
|
-
|
|
4753
|
-
|
|
4754
|
-
|
|
4755
|
-
|
|
4756
|
-
|
|
4757
|
-
|
|
4758
|
-
|
|
4759
|
-
|
|
4760
|
-
|
|
4761
|
-
|
|
4762
|
-
|
|
4763
|
-
|
|
4764
|
-
|
|
4765
|
-
|
|
4766
|
-
|
|
4767
|
-
|
|
4768
|
-
|
|
4769
|
-
|
|
4770
|
-
|
|
4771
|
-
|
|
4772
|
-
|
|
4773
|
-
|
|
4774
|
-
|
|
4775
|
-
|
|
4776
|
-
|
|
4777
|
-
|
|
4778
|
-
|
|
4779
|
-
|
|
4780
|
-
|
|
4781
|
-
|
|
4782
|
-
|
|
4783
|
-
|
|
4784
|
-
|
|
4785
|
-
|
|
4786
|
-
|
|
4787
|
-
text: primaryColorText
|
|
4788
|
-
});
|
|
4789
|
-
// Appliquer la couleur secondaire et ses variantes
|
|
4790
|
-
if (secondaryColor) {
|
|
4791
|
-
try {
|
|
4792
|
-
// Générer les variantes de couleurs secondaires
|
|
4793
|
-
const secondaryColorLight = lightenColor(secondaryColor, 20);
|
|
4794
|
-
const secondaryColorLighter = lightenColor(secondaryColor, 40);
|
|
4795
|
-
const secondaryColorDark = darkenColor(secondaryColor, 20);
|
|
4796
|
-
const secondaryColorDarker = darkenColor(secondaryColor, 40);
|
|
4797
|
-
// Convertir en RGB pour les besoins de transparence
|
|
4798
|
-
const rgb = hexToRgb(secondaryColor);
|
|
4799
|
-
const secondaryColorRgb = rgb ? `${rgb.r}, ${rgb.g}, ${rgb.b}` : null;
|
|
4800
|
-
// Déterminer si le texte sur cette couleur doit être clair ou foncé
|
|
4801
|
-
let secondaryColorText = '#FFFFFF'; // Par défaut blanc
|
|
4802
|
-
if (rgb) {
|
|
4803
|
-
const luminance = (0.299 * rgb.r + 0.587 * rgb.g + 0.114 * rgb.b) / 255;
|
|
4804
|
-
if (luminance > 0.5) {
|
|
4805
|
-
secondaryColorText = '#000000'; // Texte noir pour les couleurs claires
|
|
4806
|
-
}
|
|
4807
|
-
}
|
|
4808
|
-
// Appliquer toutes les variantes secondary
|
|
4809
|
-
document.documentElement.style.setProperty('--insurer-secondary-color', secondaryColor);
|
|
4810
|
-
document.documentElement.style.setProperty('--insurer-secondary-color-light', secondaryColorLight);
|
|
4811
|
-
document.documentElement.style.setProperty('--insurer-secondary-color-lighter', secondaryColorLighter);
|
|
4812
|
-
document.documentElement.style.setProperty('--insurer-secondary-color-dark', secondaryColorDark);
|
|
4813
|
-
document.documentElement.style.setProperty('--insurer-secondary-color-darker', secondaryColorDarker);
|
|
4814
|
-
document.documentElement.style.setProperty('--insurer-secondary-color-text', secondaryColorText);
|
|
4815
|
-
if (secondaryColorRgb) {
|
|
4816
|
-
document.documentElement.style.setProperty('--insurer-secondary-color-rgb', secondaryColorRgb);
|
|
4817
|
-
}
|
|
4818
|
-
console.log(`Applied secondary color variants:`, {
|
|
4819
|
-
base: secondaryColor,
|
|
4820
|
-
light: secondaryColorLight,
|
|
4821
|
-
lighter: secondaryColorLighter,
|
|
4822
|
-
dark: secondaryColorDark,
|
|
4823
|
-
darker: secondaryColorDarker,
|
|
4824
|
-
text: secondaryColorText
|
|
4825
|
-
});
|
|
4826
|
-
}
|
|
4827
|
-
catch (error) {
|
|
4828
|
-
console.error('Error applying insurer secondary color theme:', error);
|
|
4829
|
-
}
|
|
4830
|
-
}
|
|
4831
|
-
console.log('Theme application complete. Primary gradients will automatically update via CSS fallback system.');
|
|
4832
|
-
console.log('To see custom colors, provide INSURER_CONTEXT_SERVICE in your app config.');
|
|
4833
|
-
}
|
|
4834
|
-
catch (error) {
|
|
4835
|
-
console.error('Error applying insurer theme:', error);
|
|
5020
|
+
const primary = this.customerContext.primaryColor();
|
|
5021
|
+
const secondary = this.customerContext.secondaryColor();
|
|
5022
|
+
this.applyPalette('primary', primary);
|
|
5023
|
+
this.applyPalette('secondary', secondary);
|
|
5024
|
+
}
|
|
5025
|
+
applyPalette(kind, color) {
|
|
5026
|
+
if (!color)
|
|
5027
|
+
return;
|
|
5028
|
+
const source = hexToRgb(color);
|
|
5029
|
+
if (!source)
|
|
5030
|
+
return;
|
|
5031
|
+
const palette = this.derivePalette(source);
|
|
5032
|
+
const root = document.documentElement.style;
|
|
5033
|
+
const prefix = `--customer-${kind}-color`;
|
|
5034
|
+
root.setProperty(prefix, palette.base);
|
|
5035
|
+
root.setProperty(`${prefix}-source`, palette.source);
|
|
5036
|
+
root.setProperty(`${prefix}-light`, palette.light);
|
|
5037
|
+
root.setProperty(`${prefix}-lighter`, palette.lighter);
|
|
5038
|
+
root.setProperty(`${prefix}-dark`, palette.dark);
|
|
5039
|
+
root.setProperty(`${prefix}-darker`, palette.darker);
|
|
5040
|
+
root.setProperty(`${prefix}-text`, palette.text);
|
|
5041
|
+
root.setProperty(`${prefix}-rgb`, palette.rgb);
|
|
5042
|
+
}
|
|
5043
|
+
derivePalette(source) {
|
|
5044
|
+
const isDark = this.isDarkThemeSignal();
|
|
5045
|
+
const background = isDark ? DARK_BACKGROUND : LIGHT_BACKGROUND;
|
|
5046
|
+
const ratio = targetRatio(this.options?.targetContrast ?? 'AA');
|
|
5047
|
+
const accessible = ensureContrast(source, background, ratio);
|
|
5048
|
+
const { l, c, h } = rgbToOklch(accessible);
|
|
5049
|
+
const variants = isDark
|
|
5050
|
+
? {
|
|
5051
|
+
light: clampL(l + 0.06),
|
|
5052
|
+
lighter: clampL(l + 0.14),
|
|
5053
|
+
dark: clampL(l - 0.06),
|
|
5054
|
+
darker: clampL(l - 0.14),
|
|
4836
5055
|
}
|
|
4837
|
-
|
|
5056
|
+
: {
|
|
5057
|
+
light: clampL(l + 0.08),
|
|
5058
|
+
lighter: clampL(l + 0.18),
|
|
5059
|
+
dark: clampL(l - 0.08),
|
|
5060
|
+
darker: clampL(l - 0.16),
|
|
5061
|
+
};
|
|
5062
|
+
const lightColor = oklchToRgb({ l: variants.light, c, h });
|
|
5063
|
+
const lighterColor = oklchToRgb({ l: variants.lighter, c, h });
|
|
5064
|
+
const darkColor = this.ensureIfInteractive(oklchToRgb({ l: variants.dark, c, h }), background, Math.min(ratio, WCAG_AA_NORMAL));
|
|
5065
|
+
const darkerColor = this.ensureIfInteractive(oklchToRgb({ l: variants.darker, c, h }), background, Math.min(ratio, WCAG_AA_NORMAL));
|
|
5066
|
+
const text = bestTextColor(accessible);
|
|
5067
|
+
const rgb = `${Math.round(accessible.r)}, ${Math.round(accessible.g)}, ${Math.round(accessible.b)}`;
|
|
5068
|
+
return {
|
|
5069
|
+
base: rgbToHex(accessible),
|
|
5070
|
+
source: rgbToHex(source),
|
|
5071
|
+
light: rgbToHex(lightColor),
|
|
5072
|
+
lighter: rgbToHex(lighterColor),
|
|
5073
|
+
dark: rgbToHex(darkColor),
|
|
5074
|
+
darker: rgbToHex(darkerColor),
|
|
5075
|
+
text,
|
|
5076
|
+
rgb,
|
|
5077
|
+
};
|
|
5078
|
+
}
|
|
5079
|
+
ensureIfInteractive(color, background, ratio) {
|
|
5080
|
+
return contrastRatio(color, background) >= ratio
|
|
5081
|
+
? color
|
|
5082
|
+
: ensureContrast(color, background, ratio);
|
|
4838
5083
|
}
|
|
4839
|
-
/**
|
|
4840
|
-
* Initialise le thème au démarrage de l'application
|
|
4841
|
-
* Utilise la préférence stockée ou le thème par défaut 'light'
|
|
4842
|
-
*/
|
|
4843
5084
|
initializeTheme() {
|
|
4844
5085
|
let savedTheme = null;
|
|
4845
|
-
// Tentative de récupération du thème sauvegardé
|
|
4846
5086
|
try {
|
|
4847
5087
|
savedTheme = localStorage.getItem(THEME_STORAGE_KEY);
|
|
4848
5088
|
}
|
|
4849
|
-
catch
|
|
4850
|
-
|
|
5089
|
+
catch {
|
|
5090
|
+
savedTheme = null;
|
|
4851
5091
|
}
|
|
4852
|
-
|
|
4853
|
-
|
|
4854
|
-
const themeToApply = isValidTheme ? savedTheme : 'light';
|
|
4855
|
-
this.setDarkTheme(themeToApply === 'dark');
|
|
5092
|
+
const isValid = savedTheme === 'light' || savedTheme === 'dark';
|
|
5093
|
+
this.setDarkTheme((isValid ? savedTheme : 'light') === 'dark');
|
|
4856
5094
|
}
|
|
4857
|
-
/**
|
|
4858
|
-
* Sauvegarde la préférence de thème dans le localStorage
|
|
4859
|
-
*/
|
|
4860
5095
|
saveThemePreference(theme) {
|
|
4861
5096
|
try {
|
|
4862
5097
|
localStorage.setItem(THEME_STORAGE_KEY, theme);
|
|
4863
5098
|
}
|
|
4864
|
-
catch
|
|
4865
|
-
|
|
5099
|
+
catch {
|
|
5100
|
+
/* storage unavailable, preference not persisted */
|
|
4866
5101
|
}
|
|
4867
5102
|
}
|
|
4868
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
4869
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.
|
|
5103
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
5104
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ThemeService, providedIn: 'root' }); }
|
|
4870
5105
|
}
|
|
4871
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
5106
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ThemeService, decorators: [{
|
|
4872
5107
|
type: Injectable,
|
|
4873
5108
|
args: [{
|
|
4874
|
-
providedIn: 'root'
|
|
5109
|
+
providedIn: 'root',
|
|
4875
5110
|
}]
|
|
4876
5111
|
}], ctorParameters: () => [] });
|
|
5112
|
+
function clampL(value) {
|
|
5113
|
+
return Math.max(0, Math.min(1, value));
|
|
5114
|
+
}
|
|
4877
5115
|
|
|
4878
5116
|
class NgxTranslateProvider {
|
|
4879
5117
|
constructor() {
|
|
@@ -4898,10 +5136,10 @@ class NgxTranslateProvider {
|
|
|
4898
5136
|
onLangChange() {
|
|
4899
5137
|
return this.translateService.onLangChange.pipe(map(event => event.lang));
|
|
4900
5138
|
}
|
|
4901
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
4902
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.
|
|
5139
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NgxTranslateProvider, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
5140
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NgxTranslateProvider }); }
|
|
4903
5141
|
}
|
|
4904
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
5142
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NgxTranslateProvider, decorators: [{
|
|
4905
5143
|
type: Injectable
|
|
4906
5144
|
}] });
|
|
4907
5145
|
const TRANSLATION_PROVIDER = new InjectionToken('TRANSLATION_PROVIDER', {
|
|
@@ -4922,10 +5160,10 @@ class ScrollService {
|
|
|
4922
5160
|
window.scrollTo(0, 0);
|
|
4923
5161
|
});
|
|
4924
5162
|
}
|
|
4925
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
4926
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.
|
|
5163
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ScrollService, deps: [{ token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
5164
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ScrollService, providedIn: 'root' }); }
|
|
4927
5165
|
}
|
|
4928
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
5166
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ScrollService, decorators: [{
|
|
4929
5167
|
type: Injectable,
|
|
4930
5168
|
args: [{
|
|
4931
5169
|
providedIn: 'root'
|
|
@@ -4936,5 +5174,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImpor
|
|
|
4936
5174
|
* Generated bundle index. Do not edit.
|
|
4937
5175
|
*/
|
|
4938
5176
|
|
|
4939
|
-
export { CHECKBOX_CONFIG,
|
|
5177
|
+
export { CHECKBOX_CONFIG, CUSTOMER_CONTEXT_SERVICE, INPUT_LABELS, MODAL_CONFIG, ModalService, NgxTranslateProvider, PAGINATION_CONFIG, PROGRESSBAR_CONFIG, PSH_THEME_OPTIONS, PshAlertComponent, PshAvatarComponent, PshBadgeComponent, PshButtonComponent, PshCardComponent, PshCheckboxComponent, PshCollapseComponent, PshDropdownComponent, PshFlowStepComponent, PshHorizontalCardComponent, PshInfoCardComponent, PshInputComponent, PshMenuComponent, PshModalComponent, PshPaginationComponent, PshProgressbarComponent, PshRadioComponent, PshSelectComponent, PshSidebarComponent, PshSpinLoaderComponent, PshStatCardComponent, PshStateFlowIndicatorComponent, PshStepComponent, PshStepperComponent, PshSwitchComponent, PshTabBarComponent, PshTabComponent, PshTableComponent, PshTabsComponent, PshTagComponent, PshTextareaComponent, PshToastComponent, PshToastService, PshTooltipComponent, RADIO_CONFIG, RADIO_STYLES, SIDEBAR_CONFIG, SPINLOADER_CONFIG, STATE_FLOW_INDICATOR_CONFIG, STEPPER_CONFIG, SWITCH_CONFIG, ScrollService, TABLE_CONFIG, TABS_CONFIG, TAB_BAR_CONFIG, TAG_CONFIG, TEXTAREA_LABELS, TOAST_CONFIG, TOOLTIP_CONFIG, TRANSLATION_PROVIDER, ThemeService, ToastComponent, ToastService, provideTranslation };
|
|
4940
5178
|
//# sourceMappingURL=ps-helix.mjs.map
|