ps-helix 4.0.1 → 4.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +3 -3
- package/fesm2022/ps-helix.mjs +11 -7
- package/fesm2022/ps-helix.mjs.map +1 -1
- package/package.json +1 -1
- package/types/ps-helix.d.ts +3 -1
package/README.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
A comprehensive Angular component library built with Angular 21+ featuring modern design patterns, accessibility-first development, and optimal developer experience.
|
|
4
4
|
|
|
5
|
-
[](https://www.npmjs.com/package/ps-helix)
|
|
6
6
|
[](https://opensource.org/licenses/MIT)
|
|
7
7
|
[](https://angular.dev/)
|
|
8
8
|
[](https://www.typescriptlang.org/)
|
|
@@ -106,7 +106,7 @@ After installation, verify that ps-helix is in your `package.json`:
|
|
|
106
106
|
```json
|
|
107
107
|
{
|
|
108
108
|
"dependencies": {
|
|
109
|
-
"ps-helix": "^4.0.
|
|
109
|
+
"ps-helix": "^4.0.2"
|
|
110
110
|
}
|
|
111
111
|
}
|
|
112
112
|
```
|
|
@@ -1182,7 +1182,7 @@ Copyright (c) 2025 PACK Solutions
|
|
|
1182
1182
|
|
|
1183
1183
|
---
|
|
1184
1184
|
|
|
1185
|
-
**Version**: 4.0.
|
|
1185
|
+
**Version**: 4.0.2
|
|
1186
1186
|
**Built with**: Angular 21.0.3, TypeScript 5.9.0, Phosphor Icons 2.0.3
|
|
1187
1187
|
**Author**: Fabrice PEREZ | Product Designer at PACK Solutions
|
|
1188
1188
|
**Last Updated**: January 2026
|
package/fesm2022/ps-helix.mjs
CHANGED
|
@@ -341,6 +341,8 @@ class PshCardComponent {
|
|
|
341
341
|
this.showActionsDivider = input(true, ...(ngDevMode ? [{ debugName: "showActionsDivider" }] : []));
|
|
342
342
|
/** Alignement des actions dans la zone card-actions */
|
|
343
343
|
this.actionsAlignment = input('right', ...(ngDevMode ? [{ debugName: "actionsAlignment" }] : []));
|
|
344
|
+
/** Activer/désactiver le padding du body */
|
|
345
|
+
this.bodyPadding = input(true, ...(ngDevMode ? [{ debugName: "bodyPadding" }] : []));
|
|
344
346
|
/** Classes CSS additionnelles */
|
|
345
347
|
this.cssClass = input('', ...(ngDevMode ? [{ debugName: "cssClass" }] : []));
|
|
346
348
|
/** Styles inline personnalisés */
|
|
@@ -433,12 +435,14 @@ class PshCardComponent {
|
|
|
433
435
|
}
|
|
434
436
|
}
|
|
435
437
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PshCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
436
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: PshCardComponent, isStandalone: true, selector: "psh-card", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, hoverable: { classPropertyName: "hoverable", publicName: "hoverable", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, colorVariant: { classPropertyName: "colorVariant", publicName: "colorVariant", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, showHeaderDivider: { classPropertyName: "showHeaderDivider", publicName: "showHeaderDivider", isSignal: true, isRequired: false, transformFunction: null }, showFooterDivider: { classPropertyName: "showFooterDivider", publicName: "showFooterDivider", isSignal: true, isRequired: false, transformFunction: null }, showActionsDivider: { classPropertyName: "showActionsDivider", publicName: "showActionsDivider", isSignal: true, isRequired: false, transformFunction: null }, actionsAlignment: { classPropertyName: "actionsAlignment", publicName: "actionsAlignment", isSignal: true, isRequired: false, transformFunction: null }, cssClass: { classPropertyName: "cssClass", publicName: "cssClass", isSignal: true, isRequired: false, transformFunction: null }, customStyle: { classPropertyName: "customStyle", publicName: "customStyle", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { variant: "variantChange", hoverable: "hoverableChange", interactive: "interactiveChange", clicked: "clicked" }, ngImport: i0, template: "<div\n [class]=\"computedClasses()\"\n [style]=\"computedStyles()\"\n (click)=\"handleClick($event)\"\n (keydown)=\"handleKeydown($event)\"\n role=\"article\"\n [attr.tabindex]=\"interactive() && !disabled() ? 0 : null\"\n [attr.aria-disabled]=\"disabled() ? 'true' : null\"\n [attr.aria-busy]=\"loading() ? 'true' : null\"\n>\n <!-- Header avec titre et description int\u00E9gr\u00E9s -->\n @if (hasHeader()) {\n <div class=\"card-header\" [class.has-divider]=\"showHeaderDivider()\">\n <!-- Slot pour ic\u00F4ne/avatar avant le titre -->\n <ng-content select=\"[card-header-icon]\"></ng-content>\n\n <!-- Zone de titre et description -->\n @if (title() || description()) {\n <div class=\"card-header-content\">\n @if (title()) {\n <h3 class=\"card-title\">{{ title() }}</h3>\n }\n @if (description()) {\n <p class=\"card-description\">{{ description() }}</p>\n }\n </div>\n }\n\n <!-- Slot pour contenu personnalis\u00E9 du header -->\n <ng-content select=\"[card-header-content]\"></ng-content>\n\n <!-- Slot pour badge/tag ou actions secondaires -->\n <ng-content select=\"[card-header-extra]\"></ng-content>\n </div>\n }\n\n <!-- Body avec contenu principal -->\n <div class=\"card-body\">\n <!-- \u00C9tat de chargement -->\n @if (loading()) {\n <div class=\"card-loading\">\n <div class=\"skeleton-line\"></div>\n <div class=\"skeleton-line\"></div>\n <div class=\"skeleton-line short\"></div>\n </div>\n } @else {\n <!-- Contenu principal (slot par d\u00E9faut) -->\n <ng-content></ng-content>\n }\n </div>\n\n <!-- Footer optionnel pour m\u00E9tadonn\u00E9es -->\n <div class=\"card-footer\" [class.has-divider]=\"showFooterDivider()\">\n <ng-content select=\"[card-footer]\"></ng-content>\n </div>\n\n <!-- Actions -->\n <div class=\"card-actions\" [class]=\"actionsClasses()\" [class.has-divider]=\"showActionsDivider()\">\n <ng-content select=\"[card-actions]\"></ng-content>\n </div>\n</div>\n", styles: [".card{background:var(--surface-card);border-radius:var(--border-radius-lg, .75rem);overflow:hidden;transition:all .2s ease;width:100%;display:flex;flex-direction:column;position:relative}.card.variant-elevated{box-shadow:0 1px 3px #0000001a,0 1px 2px #0000000f}.card.variant-elevated.hoverable:hover{box-shadow:0 4px 6px #0000001a,0 2px 4px #0000000f}.card.variant-outlined{border:1px solid var(--surface-border)}.card.variant-default{background:var(--surface-section)}.card.color-info{border-left:4px solid var(--blue-500)}.card.color-info .card-header{background:rgba(var(--blue-500-rgb, 59, 130, 246),.05)}.card.color-success{border-left:4px solid var(--green-500)}.card.color-success .card-header{background:rgba(var(--green-500-rgb, 34, 197, 94),.05)}.card.color-warning{border-left:4px solid var(--orange-500)}.card.color-warning .card-header{background:rgba(var(--orange-500-rgb, 249, 115, 22),.05)}.card.color-danger{border-left:4px solid var(--red-500)}.card.color-danger .card-header{background:rgba(var(--red-500-rgb, 239, 68, 68),.05)}.card.density-compact{--card-header-padding: var(--size-3) var(--size-4);--card-body-padding: var(--size-4);--card-footer-padding: var(--size-3) var(--size-4);--card-actions-padding: var(--size-3) var(--size-4);--card-header-gap: var(--spacing-sm);--card-body-gap: var(--size-3)}.card.density-normal{--card-header-padding: var(--size-4) var(--size-5);--card-body-padding: var(--size-6);--card-footer-padding: var(--size-4) var(--size-5);--card-actions-padding: var(--size-4) var(--size-5);--card-header-gap: var(--size-3);--card-body-gap: var(--size-4)}.card.density-spacious{--card-header-padding: var(--size-6) var(--size-7);--card-body-padding: var(--size-8);--card-footer-padding: var(--size-5) var(--size-7);--card-actions-padding: var(--size-5) var(--size-7);--card-header-gap: var(--size-4);--card-body-gap: var(--size-5)}.card-header{padding:var(--card-header-padding);display:flex;align-items:flex-start;gap:var(--card-header-gap);background:var(--surface-ground);position:relative}.card-header.has-divider{border-bottom:1px solid var(--surface-border)}.card-header-content{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--spacing-xs)}.card-title{font-size:var(--font-size-lg, 1.125rem);font-weight:600;line-height:1.4;color:var(--text-color);margin:0;overflow:hidden;text-overflow:ellipsis}.card-description{font-size:var(--font-size-sm, .875rem);line-height:1.5;color:var(--text-color-secondary);margin:0}[card-header-icon]{flex-shrink:0;display:flex;align-items:center;justify-content:center}[card-header-content]{flex:1;min-width:0}[card-header-extra]{flex-shrink:0;display:flex;align-items:center;gap:var(--spacing-sm)}.card-body{padding:var(--card-body-padding);flex:1;display:flex;flex-direction:column;gap:var(--card-body-gap);color:var(--text-color);line-height:1.6;overflow:hidden}.card-body>*{margin:0}.card-body img{max-width:100%;height:auto;border-radius:var(--border-radius)}.card-body table{width:100%;max-width:100%;overflow-x:auto;display:block}.card-body pre{max-width:100%;overflow-x:auto;padding:var(--spacing-sm);background:var(--surface-ground);border-radius:var(--border-radius);font-size:var(--font-size-sm)}.card-body video,.card-body iframe{max-width:100%;height:auto}.card-footer{padding:var(--card-footer-padding);background:var(--surface-ground);display:flex;align-items:center;gap:var(--size-4);flex-wrap:wrap;font-size:var(--font-size-sm, .875rem);color:var(--text-color-secondary)}.card-footer:empty{display:none}.card-footer.has-divider{border-top:1px solid var(--surface-border)}.card-actions{padding:var(--card-actions-padding);background:var(--surface-ground);display:flex;align-items:center;gap:var(--spacing-md);justify-content:flex-end}.card-actions>*{flex-shrink:0;display:flex;gap:var(--spacing-sm)}.card-actions:empty{display:none}.card-actions.has-divider{border-top:1px solid var(--surface-border)}.card-actions.actions-align-left{justify-content:flex-start}.card-actions.actions-align-center{justify-content:center}.card-actions.actions-align-right{justify-content:flex-end}.card-actions.actions-align-space-between{justify-content:space-between}.card-actions.mobile-full-width-buttons{flex-direction:column;gap:var(--spacing-sm)}.card-actions.mobile-full-width-buttons>*{display:flex;flex-direction:column;width:100%;gap:var(--spacing-sm)}.card.hoverable:hover{transform:translateY(-2px)}.card.interactive{cursor:pointer;-webkit-user-select:none;user-select:none}.card.interactive:focus{outline:none;box-shadow:0 0 0 3px rgba(var(--primary-500-rgb, 59, 130, 246),.2)}.card.interactive:focus:not(:focus-visible){box-shadow:none}.card.interactive:active{transform:translateY(0)}.card.disabled{opacity:.6;pointer-events:none;cursor:not-allowed}.card.loading{pointer-events:none}.card-loading{display:flex;flex-direction:column;gap:var(--size-3);animation:pulse 1.5s ease-in-out infinite}.skeleton-line{height:var(--size-4);background:linear-gradient(90deg,var(--surface-border) 25%,var(--surface-hover) 50%,var(--surface-border) 75%);background-size:200% 100%;animation:shimmer 1.5s ease-in-out infinite;border-radius:var(--spacing-xs)}.skeleton-line.short{width:60%}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}@media(max-width:1024px){.card.density-spacious{--card-header-padding: var(--size-5) var(--size-6);--card-body-padding: var(--size-7);--card-footer-padding: var(--size-4-5) var(--size-6);--card-actions-padding: var(--size-4-5) var(--size-6)}}@media(max-width:768px){.card.density-compact{--card-header-padding: var(--size-2-5) var(--size-3);--card-body-padding: var(--size-3);--card-footer-padding: var(--size-2-5) var(--size-3);--card-actions-padding: var(--size-2-5) var(--size-3)}.card.density-normal{--card-header-padding: var(--size-3) var(--size-4);--card-body-padding: var(--size-4);--card-footer-padding: var(--size-3) var(--size-4);--card-actions-padding: var(--size-3) var(--size-4)}.card.density-spacious{--card-header-padding: var(--size-4) var(--size-5);--card-body-padding: var(--size-5);--card-footer-padding: var(--size-4) var(--size-5);--card-actions-padding: var(--size-4) var(--size-5)}.card-title{font-size:clamp(.9375rem,2vw,1rem)}.card-description{font-size:var(--font-size-xs)}.card-footer{font-size:var(--font-size-xs);gap:var(--size-3)}}@media(max-width:640px){.card-actions{flex-direction:column;gap:var(--spacing-md)}.card-actions>*{flex-direction:column;width:100%}}@media(max-width:480px){.card.density-compact{--card-header-padding: var(--spacing-sm) var(--size-3);--card-body-padding: var(--size-3);--card-footer-padding: var(--spacing-sm) var(--size-3);--card-actions-padding: var(--spacing-sm) var(--size-3)}.card.density-normal{--card-header-padding: var(--size-2-5) var(--size-3);--card-body-padding: var(--size-3);--card-footer-padding: var(--size-2-5) var(--size-3);--card-actions-padding: var(--size-2-5) var(--size-3)}.card.density-spacious{--card-header-padding: var(--size-3) var(--size-4);--card-body-padding: var(--size-4);--card-footer-padding: var(--size-3) var(--size-4);--card-actions-padding: var(--size-3) var(--size-4)}.card-header{flex-wrap:wrap;gap:var(--spacing-xs)}.card-title{font-size:clamp(.875rem,3vw,.9375rem);line-height:1.3}.card-description{font-size:var(--font-size-xs);line-height:1.4}[card-header-icon],[card-header-extra]{width:100%;justify-content:flex-start}.card-footer{flex-direction:column;align-items:flex-start;gap:var(--spacing-sm)}.card-actions{flex-direction:column;gap:var(--spacing-sm)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
438
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: PshCardComponent, isStandalone: true, selector: "psh-card", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, hoverable: { classPropertyName: "hoverable", publicName: "hoverable", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, colorVariant: { classPropertyName: "colorVariant", publicName: "colorVariant", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, showHeaderDivider: { classPropertyName: "showHeaderDivider", publicName: "showHeaderDivider", isSignal: true, isRequired: false, transformFunction: null }, showFooterDivider: { classPropertyName: "showFooterDivider", publicName: "showFooterDivider", isSignal: true, isRequired: false, transformFunction: null }, showActionsDivider: { classPropertyName: "showActionsDivider", publicName: "showActionsDivider", isSignal: true, isRequired: false, transformFunction: null }, actionsAlignment: { classPropertyName: "actionsAlignment", publicName: "actionsAlignment", isSignal: true, isRequired: false, transformFunction: null }, 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
439
|
}
|
|
438
440
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PshCardComponent, decorators: [{
|
|
439
441
|
type: Component,
|
|
440
|
-
args: [{ selector: 'psh-card', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None,
|
|
441
|
-
|
|
442
|
+
args: [{ selector: 'psh-card', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
443
|
+
style: 'display: block;',
|
|
444
|
+
}, 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"] }]
|
|
445
|
+
}], ctorParameters: () => [], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }, { type: i0.Output, args: ["variantChange"] }], hoverable: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoverable", required: false }] }, { type: i0.Output, args: ["hoverableChange"] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }, { type: i0.Output, args: ["interactiveChange"] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], colorVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorVariant", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], showHeaderDivider: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHeaderDivider", required: false }] }], showFooterDivider: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFooterDivider", required: false }] }], showActionsDivider: [{ type: i0.Input, args: [{ isSignal: true, alias: "showActionsDivider", required: false }] }], actionsAlignment: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionsAlignment", required: false }] }], bodyPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "bodyPadding", required: false }] }], cssClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "cssClass", required: false }] }], customStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "customStyle", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
|
|
442
446
|
|
|
443
447
|
const TAG_CONFIG = new InjectionToken('TAG_CONFIG', {
|
|
444
448
|
factory: () => ({
|
|
@@ -1563,7 +1567,7 @@ class PshInputComponent {
|
|
|
1563
1567
|
useExisting: PshInputComponent,
|
|
1564
1568
|
multi: true
|
|
1565
1569
|
}
|
|
1566
|
-
], ngImport: i0, template: "<div class=\"input-container\">\n @if (showLabel()) {\n <label \n class=\"input-label\" \n [for]=\"inputId\" \n (click)=\"focusSelect()\" \n [class.required]=\"required()\"\n >\n <ng-content select=\"[input-label]\"></ng-content>\n @if (!hasLabelContent()) {\n {{ label() }}\n }\n </label>\n }\n\n <div class=\"input-wrapper\">\n @if (iconStart()) {\n <i class=\"ph ph-{{ iconStart() }}\" aria-hidden=\"true\"></i>\n }\n\n <input\n [id]=\"inputId\"\n [type]=\"effectiveType()\"\n [attr.placeholder]=\"placeholder()\"\n [attr.aria-label]=\"computedAriaLabel()\"\n [attr.aria-invalid]=\"!!error()\"\n [attr.aria-required]=\"required()\"\n [attr.aria-describedby]=\"error() ? 'error-message' : success() ? 'success-message' : hint() ? 'hint-message' : null\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly()\"\n [required]=\"required()\"\n [value]=\"value()\"\n (input)=\"handleInput($event)\"\n (keydown)=\"handleKeydown($event)\"\n (focus)=\"handleFocus()\"\n (blur)=\"handleBlur()\"\n [attr.data-state]=\"state()\"\n />\n\n @if (iconEnd()) {\n <i class=\"ph ph-{{ iconEnd() }}\" aria-hidden=\"true\"></i>\n }\n\n @if (type() === 'password') {\n <button\n type=\"button\"\n class=\"password-toggle\"\n (click)=\"togglePasswordVisibility()\"\n [attr.aria-label]=\"passwordToggleLabel()\"\n [disabled]=\"disabled() || readonly()\"\n >\n <i \n [class]=\"'ph ph-' + (passwordVisible() ? 'eye-slash' : 'eye')\"\n aria-hidden=\"true\"\n ></i>\n </button>\n }\n\n @if (loading()) {\n <div class=\"input-loader\" aria-hidden=\"true\">\n <div class=\"loader\"></div>\n </div>\n }\n\n @if (showSuggestions()) {\n <div class=\"suggestions-list\" role=\"listbox\">\n @for (suggestion of filteredSuggestions(); track suggestion; let i = $index) {\n <div \n class=\"suggestion-item\"\n [class.focused]=\"i === focusedSuggestionIndex()\"\n role=\"option\"\n [attr.aria-selected]=\"i === focusedSuggestionIndex()\"\n (click)=\"handleSuggestionClick(suggestion)\"\n (mouseenter)=\"focusedSuggestionIndex.set(i)\"\n >\n {{ suggestion }}\n </div>\n }\n </div>\n }\n </div>\n\n @if (error()) {\n <div id=\"error-message\" class=\"input-error\" role=\"alert\">\n <ng-content select=\"[input-error]\">\n {{ error() }}\n </ng-content>\n </div>\n }\n\n @if (success()) {\n <div id=\"success-message\" class=\"input-success\" role=\"status\">\n <ng-content select=\"[input-success]\">\n {{ success() }}\n </ng-content>\n </div>\n }\n\n @if (hint()) {\n <div id=\"hint-message\" class=\"input-hint\">\n <ng-content select=\"[input-hint]\">\n {{ hint() }}\n </ng-content>\n </div>\n }\n</div>", styles: [":host{display:block;width:100%;max-width:18.75rem;transition:all var(--animation-duration-default) var(--animation-easing-default)}:host.full-width{max-width:none}.input-container{position:relative;width:100%}.input-label{display:block;color:var(--text-color);font-size:.875rem;font-weight:500;margin-bottom:.25rem;width:100%;cursor:pointer}.input-label.required:after{content:\"*\";color:var(--danger-color);margin-left:.125rem}.input-wrapper{position:relative;display:flex;align-items:center;width:100%}input{width:100%;height:2.5rem;padding:0 1rem;font-family:inherit;font-size:1rem;color:var(--text-color);background:var(--surface-0);border:.0625rem solid var(--surface-border);border-radius:var(--border-radius);transition:all var(--animation-duration-default) var(--animation-easing-default)}input:hover:not(:disabled):not(:focus){border-color:var(--primary-color)}input::placeholder{color:var(--text-color-tertiary);opacity:1}input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 .125rem var(--focus-ring-color)}:host.outlined input{background:transparent;border:.125rem solid var(--surface-border)}:host.filled input{background:var(--surface-ground);border:.0625rem solid transparent}:host.filled input:hover:not(:disabled):not(:focus){background:var(--surface-hover)}:host.filled input:focus{background:var(--surface-0)}:host.error input{border-color:var(--danger-color)}:host.error input:focus{box-shadow:0 0 0 .125rem var(--focus-ring-error)}:host.success input{border-color:var(--success-color)}:host.success input:focus{box-shadow:0 0 0 .125rem var(--focus-ring-success)}:host.disabled input{background:var(--surface-ground);cursor:not-allowed;opacity:var(--opacity-disabled)}:host.readonly input{background:var(--surface-ground);cursor:default}:host.small input{height:2rem;font-size:.875rem}:host.large input{height:3rem;font-size:1.125rem}:host.has-start-icon input{padding-left:2.75rem}:host.has-end-icon input{padding-right:2.75rem}.input-wrapper i{position:absolute;top:50%;transform:translateY(-50%);font-size:1.25rem;color:var(--text-color-secondary);pointer-events:none;z-index:2}.input-wrapper i:first-of-type{left:1rem}.input-wrapper i:last-of-type{right:1rem}.password-toggle{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);background:transparent;border:none;color:var(--text-color-secondary);cursor:pointer;padding
|
|
1570
|
+
], ngImport: i0, template: "<div class=\"input-container\">\n @if (showLabel()) {\n <label \n class=\"input-label\" \n [for]=\"inputId\" \n (click)=\"focusSelect()\" \n [class.required]=\"required()\"\n >\n <ng-content select=\"[input-label]\"></ng-content>\n @if (!hasLabelContent()) {\n {{ label() }}\n }\n </label>\n }\n\n <div class=\"input-wrapper\">\n @if (iconStart()) {\n <i class=\"ph ph-{{ iconStart() }}\" aria-hidden=\"true\"></i>\n }\n\n <input\n [id]=\"inputId\"\n [type]=\"effectiveType()\"\n [attr.placeholder]=\"placeholder()\"\n [attr.aria-label]=\"computedAriaLabel()\"\n [attr.aria-invalid]=\"!!error()\"\n [attr.aria-required]=\"required()\"\n [attr.aria-describedby]=\"error() ? 'error-message' : success() ? 'success-message' : hint() ? 'hint-message' : null\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly()\"\n [required]=\"required()\"\n [value]=\"value()\"\n (input)=\"handleInput($event)\"\n (keydown)=\"handleKeydown($event)\"\n (focus)=\"handleFocus()\"\n (blur)=\"handleBlur()\"\n [attr.data-state]=\"state()\"\n />\n\n @if (iconEnd()) {\n <i class=\"ph ph-{{ iconEnd() }}\" aria-hidden=\"true\"></i>\n }\n\n @if (type() === 'password') {\n <button\n type=\"button\"\n class=\"password-toggle\"\n (click)=\"togglePasswordVisibility()\"\n [attr.aria-label]=\"passwordToggleLabel()\"\n [disabled]=\"disabled() || readonly()\"\n >\n <i \n [class]=\"'ph ph-' + (passwordVisible() ? 'eye-slash' : 'eye')\"\n aria-hidden=\"true\"\n ></i>\n </button>\n }\n\n @if (loading()) {\n <div class=\"input-loader\" aria-hidden=\"true\">\n <div class=\"loader\"></div>\n </div>\n }\n\n @if (showSuggestions()) {\n <div class=\"suggestions-list\" role=\"listbox\">\n @for (suggestion of filteredSuggestions(); track suggestion; let i = $index) {\n <div \n class=\"suggestion-item\"\n [class.focused]=\"i === focusedSuggestionIndex()\"\n role=\"option\"\n [attr.aria-selected]=\"i === focusedSuggestionIndex()\"\n (click)=\"handleSuggestionClick(suggestion)\"\n (mouseenter)=\"focusedSuggestionIndex.set(i)\"\n >\n {{ suggestion }}\n </div>\n }\n </div>\n }\n </div>\n\n @if (error()) {\n <div id=\"error-message\" class=\"input-error\" role=\"alert\">\n <ng-content select=\"[input-error]\">\n {{ error() }}\n </ng-content>\n </div>\n }\n\n @if (success()) {\n <div id=\"success-message\" class=\"input-success\" role=\"status\">\n <ng-content select=\"[input-success]\">\n {{ success() }}\n </ng-content>\n </div>\n }\n\n @if (hint()) {\n <div id=\"hint-message\" class=\"input-hint\">\n <ng-content select=\"[input-hint]\">\n {{ hint() }}\n </ng-content>\n </div>\n }\n</div>", styles: [":host{display:block;width:100%;max-width:18.75rem;transition:all var(--animation-duration-default) var(--animation-easing-default)}:host.full-width{max-width:none}.input-container{position:relative;width:100%}.input-label{display:block;color:var(--text-color);font-size:.875rem;font-weight:500;margin-bottom:.25rem;width:100%;cursor:pointer}.input-label.required:after{content:\"*\";color:var(--danger-color);margin-left:.125rem}.input-wrapper{position:relative;display:flex;align-items:center;width:100%}input{width:100%;height:2.5rem;padding:0 1rem;font-family:inherit;font-size:1rem;color:var(--text-color);background:var(--surface-0);border:.0625rem solid var(--surface-border);border-radius:var(--border-radius);transition:all var(--animation-duration-default) var(--animation-easing-default)}input:hover:not(:disabled):not(:focus){border-color:var(--primary-color)}input::placeholder{color:var(--text-color-tertiary);opacity:1}input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 .125rem var(--focus-ring-color)}:host.outlined input{background:transparent;border:.125rem solid var(--surface-border)}:host.filled input{background:var(--surface-ground);border:.0625rem solid transparent}:host.filled input:hover:not(:disabled):not(:focus){background:var(--surface-hover)}:host.filled input:focus{background:var(--surface-0)}:host.error input{border-color:var(--danger-color)}:host.error input:focus{box-shadow:0 0 0 .125rem var(--focus-ring-error)}:host.success input{border-color:var(--success-color)}:host.success input:focus{box-shadow:0 0 0 .125rem var(--focus-ring-success)}:host.disabled input{background:var(--surface-ground);cursor:not-allowed;opacity:var(--opacity-disabled)}:host.readonly input{background:var(--surface-ground);cursor:default}:host.small input{height:2rem;font-size:.875rem}:host.large input{height:3rem;font-size:1.125rem}:host.has-start-icon input{padding-left:2.75rem}:host.has-end-icon input{padding-right:2.75rem}.input-wrapper i{position:absolute;top:50%;transform:translateY(-50%);font-size:1.25rem;color:var(--text-color-secondary);pointer-events:none;z-index:2}.input-wrapper i:first-of-type{padding-left:1rem}.input-wrapper i:last-of-type{padding-right:1rem}.password-toggle{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);width:2rem;height:2rem;background:transparent;border:none;color:var(--text-color-secondary);cursor:pointer;padding:0;border-radius:var(--border-radius);display:flex;align-items:center;justify-content:center;transition:all .2s ease;z-index:3}.password-toggle:hover:not(:disabled){background:var(--surface-hover);color:var(--text-color)}.password-toggle i{position:static;transform:none;pointer-events:auto}.input-loader{position:absolute;right:1rem;top:50%;transform:translateY(-50%);z-index:3}.loader{width:1rem;height:1rem;border:.125rem solid var(--surface-border);border-top-color:var(--primary-color);border-radius:50%;animation:spin .8s linear infinite}.suggestions-list{position:absolute;top:100%;left:0;right:0;background:var(--surface-0);border:.0625rem solid var(--surface-border);border-radius:var(--border-radius);box-shadow:var(--shadow-lg);z-index:var(--z-index-dropdown);max-height:12.5rem;overflow-y:auto;margin-top:.25rem}.suggestion-item{padding:.5rem 1rem;cursor:pointer;color:var(--text-color)}.suggestion-item:hover,.suggestion-item.focused{background:var(--surface-hover);color:var(--primary-color)}.input-error,.input-success,.input-hint{font-size:.875rem;margin-top:.25rem}.input-error{color:var(--danger-color)}.input-success{color:var(--success-color)}.input-hint{color:var(--text-color-secondary)}@keyframes spin{to{transform:translateY(-50%) rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1567
1571
|
}
|
|
1568
1572
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PshInputComponent, decorators: [{
|
|
1569
1573
|
type: Component,
|
|
@@ -1587,7 +1591,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
|
|
|
1587
1591
|
'[class.has-end-icon]': '!!iconEnd() || type() === "password"',
|
|
1588
1592
|
'[class.outlined]': 'variant() === "outlined"',
|
|
1589
1593
|
'[class.filled]': 'variant() === "filled"',
|
|
1590
|
-
}, template: "<div class=\"input-container\">\n @if (showLabel()) {\n <label \n class=\"input-label\" \n [for]=\"inputId\" \n (click)=\"focusSelect()\" \n [class.required]=\"required()\"\n >\n <ng-content select=\"[input-label]\"></ng-content>\n @if (!hasLabelContent()) {\n {{ label() }}\n }\n </label>\n }\n\n <div class=\"input-wrapper\">\n @if (iconStart()) {\n <i class=\"ph ph-{{ iconStart() }}\" aria-hidden=\"true\"></i>\n }\n\n <input\n [id]=\"inputId\"\n [type]=\"effectiveType()\"\n [attr.placeholder]=\"placeholder()\"\n [attr.aria-label]=\"computedAriaLabel()\"\n [attr.aria-invalid]=\"!!error()\"\n [attr.aria-required]=\"required()\"\n [attr.aria-describedby]=\"error() ? 'error-message' : success() ? 'success-message' : hint() ? 'hint-message' : null\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly()\"\n [required]=\"required()\"\n [value]=\"value()\"\n (input)=\"handleInput($event)\"\n (keydown)=\"handleKeydown($event)\"\n (focus)=\"handleFocus()\"\n (blur)=\"handleBlur()\"\n [attr.data-state]=\"state()\"\n />\n\n @if (iconEnd()) {\n <i class=\"ph ph-{{ iconEnd() }}\" aria-hidden=\"true\"></i>\n }\n\n @if (type() === 'password') {\n <button\n type=\"button\"\n class=\"password-toggle\"\n (click)=\"togglePasswordVisibility()\"\n [attr.aria-label]=\"passwordToggleLabel()\"\n [disabled]=\"disabled() || readonly()\"\n >\n <i \n [class]=\"'ph ph-' + (passwordVisible() ? 'eye-slash' : 'eye')\"\n aria-hidden=\"true\"\n ></i>\n </button>\n }\n\n @if (loading()) {\n <div class=\"input-loader\" aria-hidden=\"true\">\n <div class=\"loader\"></div>\n </div>\n }\n\n @if (showSuggestions()) {\n <div class=\"suggestions-list\" role=\"listbox\">\n @for (suggestion of filteredSuggestions(); track suggestion; let i = $index) {\n <div \n class=\"suggestion-item\"\n [class.focused]=\"i === focusedSuggestionIndex()\"\n role=\"option\"\n [attr.aria-selected]=\"i === focusedSuggestionIndex()\"\n (click)=\"handleSuggestionClick(suggestion)\"\n (mouseenter)=\"focusedSuggestionIndex.set(i)\"\n >\n {{ suggestion }}\n </div>\n }\n </div>\n }\n </div>\n\n @if (error()) {\n <div id=\"error-message\" class=\"input-error\" role=\"alert\">\n <ng-content select=\"[input-error]\">\n {{ error() }}\n </ng-content>\n </div>\n }\n\n @if (success()) {\n <div id=\"success-message\" class=\"input-success\" role=\"status\">\n <ng-content select=\"[input-success]\">\n {{ success() }}\n </ng-content>\n </div>\n }\n\n @if (hint()) {\n <div id=\"hint-message\" class=\"input-hint\">\n <ng-content select=\"[input-hint]\">\n {{ hint() }}\n </ng-content>\n </div>\n }\n</div>", styles: [":host{display:block;width:100%;max-width:18.75rem;transition:all var(--animation-duration-default) var(--animation-easing-default)}:host.full-width{max-width:none}.input-container{position:relative;width:100%}.input-label{display:block;color:var(--text-color);font-size:.875rem;font-weight:500;margin-bottom:.25rem;width:100%;cursor:pointer}.input-label.required:after{content:\"*\";color:var(--danger-color);margin-left:.125rem}.input-wrapper{position:relative;display:flex;align-items:center;width:100%}input{width:100%;height:2.5rem;padding:0 1rem;font-family:inherit;font-size:1rem;color:var(--text-color);background:var(--surface-0);border:.0625rem solid var(--surface-border);border-radius:var(--border-radius);transition:all var(--animation-duration-default) var(--animation-easing-default)}input:hover:not(:disabled):not(:focus){border-color:var(--primary-color)}input::placeholder{color:var(--text-color-tertiary);opacity:1}input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 .125rem var(--focus-ring-color)}:host.outlined input{background:transparent;border:.125rem solid var(--surface-border)}:host.filled input{background:var(--surface-ground);border:.0625rem solid transparent}:host.filled input:hover:not(:disabled):not(:focus){background:var(--surface-hover)}:host.filled input:focus{background:var(--surface-0)}:host.error input{border-color:var(--danger-color)}:host.error input:focus{box-shadow:0 0 0 .125rem var(--focus-ring-error)}:host.success input{border-color:var(--success-color)}:host.success input:focus{box-shadow:0 0 0 .125rem var(--focus-ring-success)}:host.disabled input{background:var(--surface-ground);cursor:not-allowed;opacity:var(--opacity-disabled)}:host.readonly input{background:var(--surface-ground);cursor:default}:host.small input{height:2rem;font-size:.875rem}:host.large input{height:3rem;font-size:1.125rem}:host.has-start-icon input{padding-left:2.75rem}:host.has-end-icon input{padding-right:2.75rem}.input-wrapper i{position:absolute;top:50%;transform:translateY(-50%);font-size:1.25rem;color:var(--text-color-secondary);pointer-events:none;z-index:2}.input-wrapper i:first-of-type{left:1rem}.input-wrapper i:last-of-type{right:1rem}.password-toggle{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);background:transparent;border:none;color:var(--text-color-secondary);cursor:pointer;padding
|
|
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 }\n\n @if (success()) {\n <div id=\"success-message\" class=\"input-success\" role=\"status\">\n <ng-content select=\"[input-success]\">\n {{ success() }}\n </ng-content>\n </div>\n }\n\n @if (hint()) {\n <div id=\"hint-message\" class=\"input-hint\">\n <ng-content select=\"[input-hint]\">\n {{ hint() }}\n </ng-content>\n </div>\n }\n</div>", styles: [":host{display:block;width:100%;max-width:18.75rem;transition:all var(--animation-duration-default) var(--animation-easing-default)}:host.full-width{max-width:none}.input-container{position:relative;width:100%}.input-label{display:block;color:var(--text-color);font-size:.875rem;font-weight:500;margin-bottom:.25rem;width:100%;cursor:pointer}.input-label.required:after{content:\"*\";color:var(--danger-color);margin-left:.125rem}.input-wrapper{position:relative;display:flex;align-items:center;width:100%}input{width:100%;height:2.5rem;padding:0 1rem;font-family:inherit;font-size:1rem;color:var(--text-color);background:var(--surface-0);border:.0625rem solid var(--surface-border);border-radius:var(--border-radius);transition:all var(--animation-duration-default) var(--animation-easing-default)}input:hover:not(:disabled):not(:focus){border-color:var(--primary-color)}input::placeholder{color:var(--text-color-tertiary);opacity:1}input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 .125rem var(--focus-ring-color)}:host.outlined input{background:transparent;border:.125rem solid var(--surface-border)}:host.filled input{background:var(--surface-ground);border:.0625rem solid transparent}:host.filled input:hover:not(:disabled):not(:focus){background:var(--surface-hover)}:host.filled input:focus{background:var(--surface-0)}:host.error input{border-color:var(--danger-color)}:host.error input:focus{box-shadow:0 0 0 .125rem var(--focus-ring-error)}:host.success input{border-color:var(--success-color)}:host.success input:focus{box-shadow:0 0 0 .125rem var(--focus-ring-success)}:host.disabled input{background:var(--surface-ground);cursor:not-allowed;opacity:var(--opacity-disabled)}:host.readonly input{background:var(--surface-ground);cursor:default}:host.small input{height:2rem;font-size:.875rem}:host.large input{height:3rem;font-size:1.125rem}:host.has-start-icon input{padding-left:2.75rem}:host.has-end-icon input{padding-right:2.75rem}.input-wrapper i{position:absolute;top:50%;transform:translateY(-50%);font-size:1.25rem;color:var(--text-color-secondary);pointer-events:none;z-index:2}.input-wrapper i:first-of-type{padding-left:1rem}.input-wrapper i:last-of-type{padding-right:1rem}.password-toggle{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);width:2rem;height:2rem;background:transparent;border:none;color:var(--text-color-secondary);cursor:pointer;padding:0;border-radius:var(--border-radius);display:flex;align-items:center;justify-content:center;transition:all .2s ease;z-index:3}.password-toggle:hover:not(:disabled){background:var(--surface-hover);color:var(--text-color)}.password-toggle i{position:static;transform:none;pointer-events:auto}.input-loader{position:absolute;right:1rem;top:50%;transform:translateY(-50%);z-index:3}.loader{width:1rem;height:1rem;border:.125rem solid var(--surface-border);border-top-color:var(--primary-color);border-radius:50%;animation:spin .8s linear infinite}.suggestions-list{position:absolute;top:100%;left:0;right:0;background:var(--surface-0);border:.0625rem solid var(--surface-border);border-radius:var(--border-radius);box-shadow:var(--shadow-lg);z-index:var(--z-index-dropdown);max-height:12.5rem;overflow-y:auto;margin-top:.25rem}.suggestion-item{padding:.5rem 1rem;cursor:pointer;color:var(--text-color)}.suggestion-item:hover,.suggestion-item.focused{background:var(--surface-hover);color:var(--primary-color)}.input-error,.input-success,.input-hint{font-size:.875rem;margin-top:.25rem}.input-error{color:var(--danger-color)}.input-success{color:var(--success-color)}.input-hint{color:var(--text-color-secondary)}@keyframes spin{to{transform:translateY(-50%) rotate(360deg)}}\n"] }]
|
|
1591
1595
|
}], 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"] }] } });
|
|
1592
1596
|
|
|
1593
1597
|
const TOOLTIP_CONFIG = new InjectionToken('TOOLTIP_CONFIG', {
|
|
@@ -3000,7 +3004,7 @@ class PshSelectComponent {
|
|
|
3000
3004
|
useExisting: PshSelectComponent,
|
|
3001
3005
|
multi: true
|
|
3002
3006
|
}
|
|
3003
|
-
], ngImport: i0, template: "<div class=\"select-container\">\n @if (label()) {\n <label class=\"select-label\" [attr.for]=\"selectId\" (click)=\"focusSelect()\">\n {{ label() }}\n @if (required()) { <span class=\"required-mark\">*</span> }\n </label>\n }\n\n <div class=\"select-trigger\" [id]=\"selectId\" (click)=\"toggle()\" tabindex=\"0\">\n <div class=\"select-value\">\n <span [class.placeholder]=\"!hasValue()\">\n {{ selectedLabel() }}\n </span>\n </div>\n \n <div class=\"select-actions\">\n @if (clearable() && hasValue() && !disabled()) {\n <button class=\"select-clear\" (click)=\"clear($event)\">\n <i class=\"ph ph-x\"></i>\n </button>\n }\n @if (loading()) {\n <div class=\"select-loader-trigger\"></div>\n } @else {\n <i class=\"ph ph-caret-down select-arrow\"></i>\n }\n </div>\n </div>\n\n @if (isOpen()) {\n <div class=\"select-dropdown\">\n @if (searchable()) {\n <div class=\"select-search\">\n <i class=\"ph ph-magnifying-glass select-search-icon\"></i>\n <input type=\"text\"\n [placeholder]=\"searchConfig().placeholder\"\n [value]=\"searchTerm()\"\n (input)=\"onSearch($event)\"\n (click)=\"$event.stopPropagation()\">\n </div>\n }\n <div class=\"select-options\" (scroll)=\"onScroll($event)\">\n @for (item of filteredOptions(); track getOptionKey(item)) {\n @if (isOptionGroup(item)) {\n <div class=\"select-group\">\n <div class=\"select-group-label\">{{ item.label }}</div>\n @for (opt of item.options; track opt.label) {\n <div class=\"select-option\" \n [class.selected]=\"isSelected(opt)\"\n (click)=\"select(opt)\">\n {{ opt.label }}\n </div>\n }\n </div>\n } @else {\n <div class=\"select-option\" \n [class.selected]=\"isSelected(item)\"\n (click)=\"select(item)\">\n {{ item.label }}\n </div>\n }\n } @empty {\n <div class=\"select-no-results\">Aucun r\u00E9sultat</div>\n }\n </div>\n </div>\n }\n</div>", styles: [":host{display:block;width:100%;max-width:18.75rem}:host.select-full-width{max-width:none}.select-container{position:relative;width:100%}.select-label{display:block;color:var(--text-color);font-size:.875rem;font-weight:500;margin-bottom:.25rem;cursor:pointer}.select-trigger{display:flex;align-items:center;justify-content:space-between;width:100%;height:2.5rem;padding:0 1rem;background:var(--surface-card);border:.0625rem solid var(--surface-border);border-radius:var(--border-radius);cursor:pointer;box-sizing:border-box}.select-trigger:focus{border-color:var(--primary-color);outline:none}.select-actions{display:flex;align-items:center;gap:.5rem}.select-clear{background:none;border:none;cursor:pointer;padding:0;color:var(--text-color-secondary);display:flex}.select-clear:hover{color:var(--danger-color)}.select-loader-trigger{width:1rem;height:1rem;border:2px solid var(--surface-border);border-top-color:var(--primary-color);border-radius:50%;animation:spin .8s linear infinite}.select-arrow{transition:transform .2s;font-size:1rem;color:var(--text-color-secondary)}:host[aria-expanded=true] .select-arrow{transform:rotate(180deg)}.select-dropdown{position:absolute;top:calc(100% + .25rem);left:0;right:0;z-index:1000;background:var(--surface-card);border:.0625rem solid var(--surface-border);border-radius:var(--border-radius);box-shadow:var(--shadow-lg)}.select-search{position:relative;padding:.5rem;border-bottom:.0625rem solid var(--surface-border)}.select-search-icon{position:absolute;left:1.25rem;top:50%;transform:translateY(-50%);color:var(--text-color-secondary);font-size:.875rem;pointer-events:none}.select-search input{width:100%;height:2rem;padding:0 .75rem 0 2rem;background:var(--surface-ground);border:.0625rem solid var(--surface-border);border-radius:var(--border-radius);color:var(--text-color);font-size:.875rem;outline:none;box-sizing:border-box;transition:border-color .15s}.select-search input::placeholder{color:var(--text-color-secondary)}.select-search input:focus{border-color:var(--primary-color)}.select-options{max-height:15rem;overflow-y:auto}.select-group-label{padding:.5rem 1rem;font-size:.75rem;font-weight:600;color:var(--text-color-secondary);background:var(--surface-ground)}.select-option{padding:.625rem 1rem;cursor:pointer}.select-option:hover{background:var(--surface-hover)}.select-option.selected{background:rgba(var(--primary-color-rgb),.1);color:var(--primary-color);font-weight:500}:host.select-small .select-trigger{height:2rem;font-size:.875rem}:host.select-large .select-trigger{height:3rem;font-size:1.125rem}@keyframes spin{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3007
|
+
], ngImport: i0, template: "<div class=\"select-container\">\n\n @if (label()) {\n\n <label class=\"select-label\" [attr.for]=\"selectId\" (click)=\"focusSelect()\">\n\n {{ label() }}\n\n @if (required()) { <span class=\"required-mark\">*</span> }\n\n </label>\n\n }\n\n\n\n <div class=\"select-trigger\" [id]=\"selectId\" (click)=\"toggle()\" tabindex=\"0\">\n\n <div class=\"select-value\">\n\n <span [class.placeholder]=\"!hasValue()\">\n\n {{ selectedLabel() }}\n\n </span>\n\n </div>\n\n \n\n <div class=\"select-actions\">\n\n @if (clearable() && hasValue() && !disabled()) {\n\n <button class=\"select-clear\" (click)=\"clear($event)\">\n\n <i class=\"ph ph-x\"></i>\n\n </button>\n\n }\n\n @if (loading()) {\n\n <div class=\"select-loader-trigger\"></div>\n\n } @else {\n\n <i class=\"ph ph-caret-down select-arrow\"></i>\n\n }\n\n </div>\n\n </div>\n\n\n\n @if (isOpen()) {\n\n <div class=\"select-dropdown\">\n\n @if (searchable()) {\n\n <div class=\"select-search\">\n\n <i class=\"ph ph-magnifying-glass select-search-icon\"></i>\n\n <input type=\"text\"\n\n [placeholder]=\"searchConfig().placeholder\"\n\n [value]=\"searchTerm()\"\n\n (input)=\"onSearch($event)\"\n\n (click)=\"$event.stopPropagation()\">\n\n </div>\n\n }\n\n <div class=\"select-options\" (scroll)=\"onScroll($event)\">\n\n @for (item of filteredOptions(); track getOptionKey(item)) {\n\n @if (isOptionGroup(item)) {\n\n <div class=\"select-group\">\n\n <div class=\"select-group-label\">{{ item.label }}</div>\n\n @for (opt of item.options; track opt.label) {\n\n <div class=\"select-option\" \n\n [class.selected]=\"isSelected(opt)\"\n\n (click)=\"select(opt)\">\n\n {{ opt.label }}\n\n </div>\n\n }\n\n </div>\n\n } @else {\n\n <div class=\"select-option\" \n\n [class.selected]=\"isSelected(item)\"\n\n (click)=\"select(item)\">\n\n {{ item.label }}\n\n </div>\n\n }\n\n } @empty {\n\n <div class=\"select-no-results\">Aucun r\u00E9sultat</div>\n\n }\n\n </div>\n\n </div>\n\n }\n\n</div>", styles: [":host{display:block;width:100%;max-width:18.75rem}:host.select-full-width{max-width:none}.select-container{position:relative;width:100%}.select-label{display:block;color:var(--text-color);font-size:.875rem;font-weight:500;margin-bottom:.25rem;cursor:pointer}.select-trigger{display:flex;align-items:center;justify-content:space-between;width:100%;height:2.5rem;padding:0 1rem;background:var(--surface-card);border:.0625rem solid var(--surface-border);border-radius:var(--border-radius);cursor:pointer;box-sizing:border-box}.select-trigger:focus{border-color:var(--primary-color);outline:none}.select-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.select-actions{display:flex;align-items:center;gap:.5rem;flex-shrink:0}.select-clear{background:none;border:none;cursor:pointer;padding:0;color:var(--text-color-secondary);display:flex}.select-clear:hover{color:var(--danger-color)}.select-loader-trigger{width:1rem;height:1rem;border:2px solid var(--surface-border);border-top-color:var(--primary-color);border-radius:50%;animation:spin .8s linear infinite}.select-arrow{transition:transform .2s;font-size:1rem;color:var(--text-color-secondary)}:host[aria-expanded=true] .select-arrow{transform:rotate(180deg)}.select-dropdown{position:absolute;top:calc(100% + .25rem);left:0;right:0;z-index:1000;background:var(--surface-card);border:.0625rem solid var(--surface-border);border-radius:var(--border-radius);box-shadow:var(--shadow-lg)}.select-search{position:relative;padding:.5rem;border-bottom:.0625rem solid var(--surface-border)}.select-search-icon{position:absolute;left:1.25rem;top:50%;transform:translateY(-50%);color:var(--text-color-secondary);font-size:.875rem;pointer-events:none}.select-search input{width:100%;height:2rem;padding:0 .75rem 0 2rem;background:var(--surface-ground);border:.0625rem solid var(--surface-border);border-radius:var(--border-radius);color:var(--text-color);font-size:.875rem;outline:none;box-sizing:border-box;transition:border-color .15s}.select-search input::placeholder{color:var(--text-color-secondary)}.select-search input:focus{border-color:var(--primary-color)}.select-options{max-height:15rem;overflow-y:auto}.select-group-label{padding:.5rem 1rem;font-size:.75rem;font-weight:600;color:var(--text-color-secondary);background:var(--surface-ground)}.select-option{padding:.625rem 1rem;cursor:pointer}.select-option:hover{background:var(--surface-hover)}.select-option.selected{background:rgba(var(--primary-color-rgb),.1);color:var(--primary-color);font-weight:500}:host.select-small .select-trigger{text-overflow:ellipsis;height:2rem;font-size:.875rem}:host.select-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 }); }
|
|
3004
3008
|
}
|
|
3005
3009
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PshSelectComponent, decorators: [{
|
|
3006
3010
|
type: Component,
|
|
@@ -3019,7 +3023,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
|
|
|
3019
3023
|
'[class.select-loading]': 'loading()',
|
|
3020
3024
|
'[attr.aria-expanded]': 'isOpen().toString()',
|
|
3021
3025
|
'[attr.data-state]': 'state()'
|
|
3022
|
-
}, template: "<div class=\"select-container\">\n @if (label()) {\n <label class=\"select-label\" [attr.for]=\"selectId\" (click)=\"focusSelect()\">\n {{ label() }}\n @if (required()) { <span class=\"required-mark\">*</span> }\n </label>\n }\n\n <div class=\"select-trigger\" [id]=\"selectId\" (click)=\"toggle()\" tabindex=\"0\">\n <div class=\"select-value\">\n <span [class.placeholder]=\"!hasValue()\">\n {{ selectedLabel() }}\n </span>\n </div>\n \n <div class=\"select-actions\">\n @if (clearable() && hasValue() && !disabled()) {\n <button class=\"select-clear\" (click)=\"clear($event)\">\n <i class=\"ph ph-x\"></i>\n </button>\n }\n @if (loading()) {\n <div class=\"select-loader-trigger\"></div>\n } @else {\n <i class=\"ph ph-caret-down select-arrow\"></i>\n }\n </div>\n </div>\n\n @if (isOpen()) {\n <div class=\"select-dropdown\">\n @if (searchable()) {\n <div class=\"select-search\">\n <i class=\"ph ph-magnifying-glass select-search-icon\"></i>\n <input type=\"text\"\n [placeholder]=\"searchConfig().placeholder\"\n [value]=\"searchTerm()\"\n (input)=\"onSearch($event)\"\n (click)=\"$event.stopPropagation()\">\n </div>\n }\n <div class=\"select-options\" (scroll)=\"onScroll($event)\">\n @for (item of filteredOptions(); track getOptionKey(item)) {\n @if (isOptionGroup(item)) {\n <div class=\"select-group\">\n <div class=\"select-group-label\">{{ item.label }}</div>\n @for (opt of item.options; track opt.label) {\n <div class=\"select-option\" \n [class.selected]=\"isSelected(opt)\"\n (click)=\"select(opt)\">\n {{ opt.label }}\n </div>\n }\n </div>\n } @else {\n <div class=\"select-option\" \n [class.selected]=\"isSelected(item)\"\n (click)=\"select(item)\">\n {{ item.label }}\n </div>\n }\n } @empty {\n <div class=\"select-no-results\">Aucun r\u00E9sultat</div>\n }\n </div>\n </div>\n }\n</div>", styles: [":host{display:block;width:100%;max-width:18.75rem}:host.select-full-width{max-width:none}.select-container{position:relative;width:100%}.select-label{display:block;color:var(--text-color);font-size:.875rem;font-weight:500;margin-bottom:.25rem;cursor:pointer}.select-trigger{display:flex;align-items:center;justify-content:space-between;width:100%;height:2.5rem;padding:0 1rem;background:var(--surface-card);border:.0625rem solid var(--surface-border);border-radius:var(--border-radius);cursor:pointer;box-sizing:border-box}.select-trigger:focus{border-color:var(--primary-color);outline:none}.select-actions{display:flex;align-items:center;gap:.5rem}.select-clear{background:none;border:none;cursor:pointer;padding:0;color:var(--text-color-secondary);display:flex}.select-clear:hover{color:var(--danger-color)}.select-loader-trigger{width:1rem;height:1rem;border:2px solid var(--surface-border);border-top-color:var(--primary-color);border-radius:50%;animation:spin .8s linear infinite}.select-arrow{transition:transform .2s;font-size:1rem;color:var(--text-color-secondary)}:host[aria-expanded=true] .select-arrow{transform:rotate(180deg)}.select-dropdown{position:absolute;top:calc(100% + .25rem);left:0;right:0;z-index:1000;background:var(--surface-card);border:.0625rem solid var(--surface-border);border-radius:var(--border-radius);box-shadow:var(--shadow-lg)}.select-search{position:relative;padding:.5rem;border-bottom:.0625rem solid var(--surface-border)}.select-search-icon{position:absolute;left:1.25rem;top:50%;transform:translateY(-50%);color:var(--text-color-secondary);font-size:.875rem;pointer-events:none}.select-search input{width:100%;height:2rem;padding:0 .75rem 0 2rem;background:var(--surface-ground);border:.0625rem solid var(--surface-border);border-radius:var(--border-radius);color:var(--text-color);font-size:.875rem;outline:none;box-sizing:border-box;transition:border-color .15s}.select-search input::placeholder{color:var(--text-color-secondary)}.select-search input:focus{border-color:var(--primary-color)}.select-options{max-height:15rem;overflow-y:auto}.select-group-label{padding:.5rem 1rem;font-size:.75rem;font-weight:600;color:var(--text-color-secondary);background:var(--surface-ground)}.select-option{padding:.625rem 1rem;cursor:pointer}.select-option:hover{background:var(--surface-hover)}.select-option.selected{background:rgba(var(--primary-color-rgb),.1);color:var(--primary-color);font-weight:500}:host.select-small .select-trigger{height:2rem;font-size:.875rem}:host.select-large .select-trigger{height:3rem;font-size:1.125rem}@keyframes spin{to{transform:rotate(360deg)}}\n"] }]
|
|
3026
|
+
}, template: "<div class=\"select-container\">\n\n @if (label()) {\n\n <label class=\"select-label\" [attr.for]=\"selectId\" (click)=\"focusSelect()\">\n\n {{ label() }}\n\n @if (required()) { <span class=\"required-mark\">*</span> }\n\n </label>\n\n }\n\n\n\n <div class=\"select-trigger\" [id]=\"selectId\" (click)=\"toggle()\" tabindex=\"0\">\n\n <div class=\"select-value\">\n\n <span [class.placeholder]=\"!hasValue()\">\n\n {{ selectedLabel() }}\n\n </span>\n\n </div>\n\n \n\n <div class=\"select-actions\">\n\n @if (clearable() && hasValue() && !disabled()) {\n\n <button class=\"select-clear\" (click)=\"clear($event)\">\n\n <i class=\"ph ph-x\"></i>\n\n </button>\n\n }\n\n @if (loading()) {\n\n <div class=\"select-loader-trigger\"></div>\n\n } @else {\n\n <i class=\"ph ph-caret-down select-arrow\"></i>\n\n }\n\n </div>\n\n </div>\n\n\n\n @if (isOpen()) {\n\n <div class=\"select-dropdown\">\n\n @if (searchable()) {\n\n <div class=\"select-search\">\n\n <i class=\"ph ph-magnifying-glass select-search-icon\"></i>\n\n <input type=\"text\"\n\n [placeholder]=\"searchConfig().placeholder\"\n\n [value]=\"searchTerm()\"\n\n (input)=\"onSearch($event)\"\n\n (click)=\"$event.stopPropagation()\">\n\n </div>\n\n }\n\n <div class=\"select-options\" (scroll)=\"onScroll($event)\">\n\n @for (item of filteredOptions(); track getOptionKey(item)) {\n\n @if (isOptionGroup(item)) {\n\n <div class=\"select-group\">\n\n <div class=\"select-group-label\">{{ item.label }}</div>\n\n @for (opt of item.options; track opt.label) {\n\n <div class=\"select-option\" \n\n [class.selected]=\"isSelected(opt)\"\n\n (click)=\"select(opt)\">\n\n {{ opt.label }}\n\n </div>\n\n }\n\n </div>\n\n } @else {\n\n <div class=\"select-option\" \n\n [class.selected]=\"isSelected(item)\"\n\n (click)=\"select(item)\">\n\n {{ item.label }}\n\n </div>\n\n }\n\n } @empty {\n\n <div class=\"select-no-results\">Aucun r\u00E9sultat</div>\n\n }\n\n </div>\n\n </div>\n\n }\n\n</div>", styles: [":host{display:block;width:100%;max-width:18.75rem}:host.select-full-width{max-width:none}.select-container{position:relative;width:100%}.select-label{display:block;color:var(--text-color);font-size:.875rem;font-weight:500;margin-bottom:.25rem;cursor:pointer}.select-trigger{display:flex;align-items:center;justify-content:space-between;width:100%;height:2.5rem;padding:0 1rem;background:var(--surface-card);border:.0625rem solid var(--surface-border);border-radius:var(--border-radius);cursor:pointer;box-sizing:border-box}.select-trigger:focus{border-color:var(--primary-color);outline:none}.select-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.select-actions{display:flex;align-items:center;gap:.5rem;flex-shrink:0}.select-clear{background:none;border:none;cursor:pointer;padding:0;color:var(--text-color-secondary);display:flex}.select-clear:hover{color:var(--danger-color)}.select-loader-trigger{width:1rem;height:1rem;border:2px solid var(--surface-border);border-top-color:var(--primary-color);border-radius:50%;animation:spin .8s linear infinite}.select-arrow{transition:transform .2s;font-size:1rem;color:var(--text-color-secondary)}:host[aria-expanded=true] .select-arrow{transform:rotate(180deg)}.select-dropdown{position:absolute;top:calc(100% + .25rem);left:0;right:0;z-index:1000;background:var(--surface-card);border:.0625rem solid var(--surface-border);border-radius:var(--border-radius);box-shadow:var(--shadow-lg)}.select-search{position:relative;padding:.5rem;border-bottom:.0625rem solid var(--surface-border)}.select-search-icon{position:absolute;left:1.25rem;top:50%;transform:translateY(-50%);color:var(--text-color-secondary);font-size:.875rem;pointer-events:none}.select-search input{width:100%;height:2rem;padding:0 .75rem 0 2rem;background:var(--surface-ground);border:.0625rem solid var(--surface-border);border-radius:var(--border-radius);color:var(--text-color);font-size:.875rem;outline:none;box-sizing:border-box;transition:border-color .15s}.select-search input::placeholder{color:var(--text-color-secondary)}.select-search input:focus{border-color:var(--primary-color)}.select-options{max-height:15rem;overflow-y:auto}.select-group-label{padding:.5rem 1rem;font-size:.75rem;font-weight:600;color:var(--text-color-secondary);background:var(--surface-ground)}.select-option{padding:.625rem 1rem;cursor:pointer}.select-option:hover{background:var(--surface-hover)}.select-option.selected{background:rgba(var(--primary-color-rgb),.1);color:var(--primary-color);font-weight:500}:host.select-small .select-trigger{text-overflow:ellipsis;height:2rem;font-size:.875rem}:host.select-large .select-trigger{text-overflow:ellipsis;height:3rem;font-size:1.125rem}@keyframes spin{to{transform:rotate(360deg)}}\n"] }]
|
|
3023
3027
|
}], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], multiplePlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiplePlaceholder", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], searchConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchConfig", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], searched: [{ type: i0.Output, args: ["searched"] }], scrollEnd: [{ type: i0.Output, args: ["scrollEnd"] }] } });
|
|
3024
3028
|
|
|
3025
3029
|
const SIDEBAR_CONFIG = new InjectionToken('SIDEBAR_CONFIG', {
|