ng-prime-tools 1.0.92 → 1.0.93
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.
|
@@ -3394,18 +3394,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
|
|
|
3394
3394
|
type: Input
|
|
3395
3395
|
}] } });
|
|
3396
3396
|
|
|
3397
|
+
// projects/ng-prime-tools/src/lib/components/pt-form-builder/pt-form-builder.component.ts
|
|
3397
3398
|
class PTFormBuilderComponent {
|
|
3398
|
-
constructor(fb) {
|
|
3399
|
+
constructor(fb, cdr) {
|
|
3399
3400
|
this.fb = fb;
|
|
3401
|
+
this.cdr = cdr;
|
|
3400
3402
|
this.mainGroup = { fields: [], groups: [] };
|
|
3401
3403
|
this.buttons = [];
|
|
3402
|
-
/**
|
|
3403
|
-
* Largeur des inputs/champs.
|
|
3404
|
-
*/
|
|
3405
3404
|
this.inputWidth = '100%';
|
|
3406
|
-
/**
|
|
3407
|
-
* Largeur globale du composant pt-form-builder.
|
|
3408
|
-
*/
|
|
3409
3405
|
this.formWidth = '100%';
|
|
3410
3406
|
this.language = 'en';
|
|
3411
3407
|
this.formSubmit = new EventEmitter();
|
|
@@ -3441,6 +3437,13 @@ class PTFormBuilderComponent {
|
|
|
3441
3437
|
ngOnDestroy() {
|
|
3442
3438
|
this.formValueChangesSub?.unsubscribe();
|
|
3443
3439
|
}
|
|
3440
|
+
isFieldHidden(field) {
|
|
3441
|
+
const hidden = field.hidden;
|
|
3442
|
+
if (typeof hidden === 'function') {
|
|
3443
|
+
return Boolean(hidden(this.form.getRawValue()));
|
|
3444
|
+
}
|
|
3445
|
+
return Boolean(hidden);
|
|
3446
|
+
}
|
|
3444
3447
|
rebuildForm() {
|
|
3445
3448
|
this.formValueChangesSub?.unsubscribe();
|
|
3446
3449
|
this.form = this.fb.group({});
|
|
@@ -3448,6 +3451,7 @@ class PTFormBuilderComponent {
|
|
|
3448
3451
|
this.formReady.emit(this.form);
|
|
3449
3452
|
this.formValueChangesSub = this.form.valueChanges.subscribe((value) => {
|
|
3450
3453
|
this.formChange.emit(value);
|
|
3454
|
+
this.cdr.markForCheck();
|
|
3451
3455
|
});
|
|
3452
3456
|
}
|
|
3453
3457
|
buildFormGroup(group) {
|
|
@@ -3456,7 +3460,7 @@ class PTFormBuilderComponent {
|
|
|
3456
3460
|
const anyField = field;
|
|
3457
3461
|
this.form.addControl(field.name, this.fb.control({
|
|
3458
3462
|
value: this.resolveInitialValue(field),
|
|
3459
|
-
disabled:
|
|
3463
|
+
disabled: Boolean(anyField.disabled),
|
|
3460
3464
|
}, validators));
|
|
3461
3465
|
});
|
|
3462
3466
|
(group?.groups ?? []).forEach((subGroup) => this.buildFormGroup(subGroup));
|
|
@@ -3513,7 +3517,7 @@ class PTFormBuilderComponent {
|
|
|
3513
3517
|
}
|
|
3514
3518
|
isInvalid(field) {
|
|
3515
3519
|
const control = this.form.get(field.name);
|
|
3516
|
-
return
|
|
3520
|
+
return Boolean(control && control.invalid && (control.touched || control.dirty));
|
|
3517
3521
|
}
|
|
3518
3522
|
getErrorMessage(field) {
|
|
3519
3523
|
const control = this.form.get(field.name);
|
|
@@ -3534,12 +3538,12 @@ class PTFormBuilderComponent {
|
|
|
3534
3538
|
`${field.label} ${this.errorMessages[lang].pattern}`);
|
|
3535
3539
|
}
|
|
3536
3540
|
if (control.hasError('minlength')) {
|
|
3537
|
-
const
|
|
3538
|
-
return `${field.label} ${this.errorMessages[lang].minlength} ${
|
|
3541
|
+
const requiredLength = control.getError('minlength')?.requiredLength;
|
|
3542
|
+
return `${field.label} ${this.errorMessages[lang].minlength} ${requiredLength} ${lang === 'fr' ? 'caractères' : 'characters'}`;
|
|
3539
3543
|
}
|
|
3540
3544
|
if (control.hasError('maxlength')) {
|
|
3541
|
-
const
|
|
3542
|
-
return `${field.label} ${this.errorMessages[lang].maxlength} ${
|
|
3545
|
+
const requiredLength = control.getError('maxlength')?.requiredLength;
|
|
3546
|
+
return `${field.label} ${this.errorMessages[lang].maxlength} ${requiredLength} ${lang === 'fr' ? 'caractères' : 'characters'}`;
|
|
3543
3547
|
}
|
|
3544
3548
|
return '';
|
|
3545
3549
|
}
|
|
@@ -3552,14 +3556,15 @@ class PTFormBuilderComponent {
|
|
|
3552
3556
|
onClear() {
|
|
3553
3557
|
this.form.reset();
|
|
3554
3558
|
this.formChange.emit(this.form.getRawValue());
|
|
3559
|
+
this.cdr.markForCheck();
|
|
3555
3560
|
}
|
|
3556
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTFormBuilderComponent, deps: [{ token: i2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3557
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTFormBuilderComponent, isStandalone: false, selector: "pt-form-builder", inputs: { mainGroup: "mainGroup", buttons: "buttons", title: "title", titleStyle: "titleStyle", inputWidth: "inputWidth", formWidth: "formWidth", language: "language" }, outputs: { formSubmit: "formSubmit", formReady: "formReady", formChange: "formChange" }, usesOnChanges: true, ngImport: i0, template: "<div\n class=\"pt-form-builder-wrapper\"\n [ngStyle]=\"{ width: formWidth, maxWidth: formWidth }\"\n>\n @if (title) {\n <div [ngStyle]=\"titleStyle\" class=\"form-title\">{{ title }}</div>\n }\n\n <form [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\">\n @for (field of mainGroup.fields; track field.name) {\n <pt-dynamic-form-field\n
|
|
3561
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTFormBuilderComponent, deps: [{ token: i2.FormBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3562
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTFormBuilderComponent, isStandalone: false, selector: "pt-form-builder", inputs: { mainGroup: "mainGroup", buttons: "buttons", title: "title", titleStyle: "titleStyle", inputWidth: "inputWidth", formWidth: "formWidth", language: "language" }, outputs: { formSubmit: "formSubmit", formReady: "formReady", formChange: "formChange" }, usesOnChanges: true, ngImport: i0, template: "<!-- projects/ng-prime-tools/src/lib/components/pt-form-builder/pt-form-builder.component.html -->\n\n<div\n class=\"pt-form-builder-wrapper\"\n [ngStyle]=\"{ width: formWidth, maxWidth: formWidth }\"\n>\n @if (title) {\n <div [ngStyle]=\"titleStyle\" class=\"form-title\">{{ title }}</div>\n }\n\n <form [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\">\n @for (field of mainGroup.fields; track field.name) {\n @if (!isFieldHidden(field)) {\n <pt-dynamic-form-field\n [field]=\"field\"\n [form]=\"form\"\n [inputWidth]=\"inputWidth\"\n ></pt-dynamic-form-field>\n }\n }\n\n @for (group of mainGroup.groups; track $index) {\n <div\n class=\"form-field-group\"\n [ngStyle]=\"{ width: group.width || '100%' }\"\n >\n @for (field of group.fields; track field.name) {\n @if (!isFieldHidden(field)) {\n <pt-dynamic-form-field\n [field]=\"field\"\n [form]=\"form\"\n [inputWidth]=\"inputWidth\"\n class=\"flex-item\"\n ></pt-dynamic-form-field>\n }\n }\n </div>\n }\n\n @if (buttons.length) {\n <div class=\"button-group\">\n @for (button of buttons; track button.text) {\n <button\n type=\"button\"\n pButton\n [label]=\"button.text\"\n [icon]=\"button.icon || ''\"\n [class]=\"button.color || ''\"\n [disabled]=\"button.disabled || false\"\n [ngStyle]=\"{\n color: button.fontColor || null,\n 'background-color': button.backgroundColor || null,\n 'border-color':\n button.borderColor || button.backgroundColor || null,\n }\"\n (click)=\"\n button.isSubmit\n ? onSubmit()\n : button.isClear\n ? onClear()\n : button.action\n ? button.action()\n : null\n \"\n ></button>\n }\n </div>\n }\n </form>\n</div>\n", styles: [".pt-form-builder-wrapper{width:100%;margin:0 auto;color:var(--pt-form-builder-text, inherit)}.form-title{text-align:center;margin-bottom:1rem;font-size:1.5rem;font-weight:700;color:var(--pt-form-builder-title, #333333)}.form-field{margin-bottom:1rem;color:var(--pt-form-builder-text, inherit)}.form-field label{display:block;margin-bottom:.5rem;font-weight:700;color:var(--pt-form-builder-label, #333333)}::ng-deep .p-inputtext,::ng-deep .p-inputtextarea,::ng-deep .p-calendar,::ng-deep .p-inputnumber,::ng-deep .p-multiselect,::ng-deep .p-dropdown{width:100%!important}::ng-deep .p-inputnumber,::ng-deep p-inputnumber{display:flex!important}.button-group{display:flex;gap:1rem;margin-top:1rem;justify-content:space-between}.button-group button{flex:1;display:flex;align-items:center;justify-content:center}.button-group button i{margin-right:.5rem}.button-group button.p-button-primary{background-color:var(--pt-form-builder-button-primary-bg, #007bff);color:var(--pt-form-builder-button-primary-text, #ffffff)}.button-group button.p-button-secondary{background-color:var(--pt-form-builder-button-secondary-bg, #6c757d);color:var(--pt-form-builder-button-secondary-text, #ffffff)}.button-group button.p-button-success{background-color:var(--pt-form-builder-button-success-bg, #28a745);color:var(--pt-form-builder-button-success-text, #ffffff)}.button-group button:hover{opacity:.9}.form-field-group{display:flex;gap:1rem}.form-field-group .flex-item{flex:1}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "pButtonPT", "pButtonUnstyled", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "component", type: PTDynamicFormFieldComponent, selector: "pt-dynamic-form-field", inputs: ["field", "form", "inputWidth"] }] }); }
|
|
3558
3563
|
}
|
|
3559
3564
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTFormBuilderComponent, decorators: [{
|
|
3560
3565
|
type: Component,
|
|
3561
|
-
args: [{ selector: 'pt-form-builder', standalone: false, template: "<div\n class=\"pt-form-builder-wrapper\"\n [ngStyle]=\"{ width: formWidth, maxWidth: formWidth }\"\n>\n @if (title) {\n <div [ngStyle]=\"titleStyle\" class=\"form-title\">{{ title }}</div>\n }\n\n <form [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\">\n @for (field of mainGroup.fields; track field.name) {\n <pt-dynamic-form-field\n
|
|
3562
|
-
}], ctorParameters: () => [{ type: i2.FormBuilder }], propDecorators: { mainGroup: [{
|
|
3566
|
+
args: [{ selector: 'pt-form-builder', standalone: false, template: "<!-- projects/ng-prime-tools/src/lib/components/pt-form-builder/pt-form-builder.component.html -->\n\n<div\n class=\"pt-form-builder-wrapper\"\n [ngStyle]=\"{ width: formWidth, maxWidth: formWidth }\"\n>\n @if (title) {\n <div [ngStyle]=\"titleStyle\" class=\"form-title\">{{ title }}</div>\n }\n\n <form [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\">\n @for (field of mainGroup.fields; track field.name) {\n @if (!isFieldHidden(field)) {\n <pt-dynamic-form-field\n [field]=\"field\"\n [form]=\"form\"\n [inputWidth]=\"inputWidth\"\n ></pt-dynamic-form-field>\n }\n }\n\n @for (group of mainGroup.groups; track $index) {\n <div\n class=\"form-field-group\"\n [ngStyle]=\"{ width: group.width || '100%' }\"\n >\n @for (field of group.fields; track field.name) {\n @if (!isFieldHidden(field)) {\n <pt-dynamic-form-field\n [field]=\"field\"\n [form]=\"form\"\n [inputWidth]=\"inputWidth\"\n class=\"flex-item\"\n ></pt-dynamic-form-field>\n }\n }\n </div>\n }\n\n @if (buttons.length) {\n <div class=\"button-group\">\n @for (button of buttons; track button.text) {\n <button\n type=\"button\"\n pButton\n [label]=\"button.text\"\n [icon]=\"button.icon || ''\"\n [class]=\"button.color || ''\"\n [disabled]=\"button.disabled || false\"\n [ngStyle]=\"{\n color: button.fontColor || null,\n 'background-color': button.backgroundColor || null,\n 'border-color':\n button.borderColor || button.backgroundColor || null,\n }\"\n (click)=\"\n button.isSubmit\n ? onSubmit()\n : button.isClear\n ? onClear()\n : button.action\n ? button.action()\n : null\n \"\n ></button>\n }\n </div>\n }\n </form>\n</div>\n", styles: [".pt-form-builder-wrapper{width:100%;margin:0 auto;color:var(--pt-form-builder-text, inherit)}.form-title{text-align:center;margin-bottom:1rem;font-size:1.5rem;font-weight:700;color:var(--pt-form-builder-title, #333333)}.form-field{margin-bottom:1rem;color:var(--pt-form-builder-text, inherit)}.form-field label{display:block;margin-bottom:.5rem;font-weight:700;color:var(--pt-form-builder-label, #333333)}::ng-deep .p-inputtext,::ng-deep .p-inputtextarea,::ng-deep .p-calendar,::ng-deep .p-inputnumber,::ng-deep .p-multiselect,::ng-deep .p-dropdown{width:100%!important}::ng-deep .p-inputnumber,::ng-deep p-inputnumber{display:flex!important}.button-group{display:flex;gap:1rem;margin-top:1rem;justify-content:space-between}.button-group button{flex:1;display:flex;align-items:center;justify-content:center}.button-group button i{margin-right:.5rem}.button-group button.p-button-primary{background-color:var(--pt-form-builder-button-primary-bg, #007bff);color:var(--pt-form-builder-button-primary-text, #ffffff)}.button-group button.p-button-secondary{background-color:var(--pt-form-builder-button-secondary-bg, #6c757d);color:var(--pt-form-builder-button-secondary-text, #ffffff)}.button-group button.p-button-success{background-color:var(--pt-form-builder-button-success-bg, #28a745);color:var(--pt-form-builder-button-success-text, #ffffff)}.button-group button:hover{opacity:.9}.form-field-group{display:flex;gap:1rem}.form-field-group .flex-item{flex:1}\n"] }]
|
|
3567
|
+
}], ctorParameters: () => [{ type: i2.FormBuilder }, { type: i0.ChangeDetectorRef }], propDecorators: { mainGroup: [{
|
|
3563
3568
|
type: Input
|
|
3564
3569
|
}], buttons: [{
|
|
3565
3570
|
type: Input
|
|
@@ -7561,21 +7566,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
|
|
|
7561
7566
|
}]
|
|
7562
7567
|
}] });
|
|
7563
7568
|
|
|
7569
|
+
// src/lib/components/pt-metric-panel/pt-metric-panel.component.ts
|
|
7564
7570
|
class PTMetricPanelComponent {
|
|
7565
7571
|
constructor(router) {
|
|
7566
7572
|
this.router = router;
|
|
7567
7573
|
this.cardConfig = this.getDefaultCardConfig();
|
|
7568
7574
|
}
|
|
7569
|
-
ngOnInit() { }
|
|
7570
7575
|
getDefaultCardConfig() {
|
|
7571
7576
|
return {
|
|
7572
7577
|
backgroundColor: '#fff',
|
|
7573
|
-
borderColor: '#
|
|
7578
|
+
borderColor: '#e7eaf0',
|
|
7574
7579
|
borderWidth: '1px',
|
|
7575
|
-
padding: '
|
|
7580
|
+
padding: '16px',
|
|
7576
7581
|
margin: '10px 0',
|
|
7577
|
-
borderRadius: '
|
|
7578
|
-
boxShadow: '0
|
|
7582
|
+
borderRadius: '18px',
|
|
7583
|
+
boxShadow: '0 8px 20px rgba(15, 23, 42, 0.06)',
|
|
7579
7584
|
};
|
|
7580
7585
|
}
|
|
7581
7586
|
getTitleText() {
|
|
@@ -7586,35 +7591,38 @@ class PTMetricPanelComponent {
|
|
|
7586
7591
|
getTitleStyles() {
|
|
7587
7592
|
if (typeof this.panelData.title === 'object') {
|
|
7588
7593
|
return {
|
|
7589
|
-
color: this.panelData.title.color || '#
|
|
7590
|
-
fontSize: this.panelData.title.fontSize || '1.
|
|
7594
|
+
color: this.panelData.title.color || '#2c1476',
|
|
7595
|
+
fontSize: this.panelData.title.fontSize || '1.15rem',
|
|
7591
7596
|
textAlign: this.panelData.title.position || 'left',
|
|
7592
7597
|
};
|
|
7593
7598
|
}
|
|
7594
7599
|
return {};
|
|
7595
7600
|
}
|
|
7596
7601
|
getIconClass(icon) {
|
|
7597
|
-
return icon
|
|
7602
|
+
return icon || '';
|
|
7598
7603
|
}
|
|
7599
7604
|
getIconStyles(icon) {
|
|
7600
|
-
if (typeof icon === 'object') {
|
|
7605
|
+
if (typeof icon === 'object' && icon !== null) {
|
|
7606
|
+
const iconStyle = icon;
|
|
7601
7607
|
return {
|
|
7602
|
-
color:
|
|
7603
|
-
fontSize:
|
|
7604
|
-
backgroundColor:
|
|
7605
|
-
borderRadius:
|
|
7606
|
-
padding: '
|
|
7607
|
-
display: 'inline-
|
|
7608
|
+
color: iconStyle.color || '#6734c9',
|
|
7609
|
+
fontSize: iconStyle.fontSize || '1.1rem',
|
|
7610
|
+
backgroundColor: iconStyle.backgroundColor || '#f0e7ff',
|
|
7611
|
+
borderRadius: iconStyle.shape === 'circular' ? '50%' : '12px',
|
|
7612
|
+
padding: '10px',
|
|
7613
|
+
display: 'inline-flex',
|
|
7614
|
+
alignItems: 'center',
|
|
7615
|
+
justifyContent: 'center',
|
|
7608
7616
|
};
|
|
7609
7617
|
}
|
|
7610
7618
|
return {};
|
|
7611
7619
|
}
|
|
7612
7620
|
getValueStyles(value) {
|
|
7613
|
-
if (
|
|
7621
|
+
if (this.isTitleStyle(value)) {
|
|
7614
7622
|
return {
|
|
7615
|
-
color: value.color || '#
|
|
7616
|
-
fontSize: value.fontSize || '
|
|
7617
|
-
fontWeight: value.fontWeight || '
|
|
7623
|
+
color: value.color || '#1f2937',
|
|
7624
|
+
fontSize: value.fontSize || '0.95rem',
|
|
7625
|
+
fontWeight: value.fontWeight || '700',
|
|
7618
7626
|
};
|
|
7619
7627
|
}
|
|
7620
7628
|
return {};
|
|
@@ -7623,11 +7631,11 @@ class PTMetricPanelComponent {
|
|
|
7623
7631
|
return typeof this.panelData.title === 'object';
|
|
7624
7632
|
}
|
|
7625
7633
|
getTitleIcon() {
|
|
7626
|
-
if (this.isTitleObject()) {
|
|
7627
|
-
|
|
7628
|
-
return typeof icon === 'string' ? icon : icon?.code;
|
|
7634
|
+
if (!this.isTitleObject()) {
|
|
7635
|
+
return undefined;
|
|
7629
7636
|
}
|
|
7630
|
-
|
|
7637
|
+
const icon = this.panelData.title.icon;
|
|
7638
|
+
return typeof icon === 'string' ? icon : icon?.code;
|
|
7631
7639
|
}
|
|
7632
7640
|
isTitleStyle(value) {
|
|
7633
7641
|
return typeof value === 'object' && value !== null && 'text' in value;
|
|
@@ -7638,11 +7646,11 @@ class PTMetricPanelComponent {
|
|
|
7638
7646
|
}
|
|
7639
7647
|
}
|
|
7640
7648
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTMetricPanelComponent, deps: [{ token: i1$2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7641
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTMetricPanelComponent, isStandalone: false, selector: "pt-metric-panel", inputs: { panelData: "panelData", cardConfig: "cardConfig" }, ngImport: i0, template: "<pt-card [config]=\"cardConfig\">\n
|
|
7649
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTMetricPanelComponent, isStandalone: false, selector: "pt-metric-panel", inputs: { panelData: "panelData", cardConfig: "cardConfig" }, ngImport: i0, template: "<!-- src/lib/components/pt-metric-panel/pt-metric-panel.component.html -->\n\n<pt-card [config]=\"cardConfig\">\n <div class=\"panel-header\" [ngStyle]=\"getTitleStyles()\">\n @if (getTitleIcon()) {\n <i class=\"panel-title-icon\" [ngClass]=\"getIconClass(getTitleIcon())\"></i>\n }\n\n <span class=\"panel-title-text\">{{ getTitleText() }}</span>\n </div>\n\n <div class=\"metric-list\">\n @for (item of panelData.indicators; track $index) {\n <div\n class=\"metric-item\"\n [class.metric-item-clickable]=\"!!item.url\"\n [pTooltip]=\"item.tooltip || ''\"\n tooltipPosition=\"top\"\n [tooltipDisabled]=\"!item.tooltip\"\n (click)=\"handleClick(item.url)\"\n >\n <div class=\"metric-left\">\n @if (item.icon) {\n <span class=\"metric-icon-wrapper\">\n <i\n [ngClass]=\"getIconClass(item.icon.code)\"\n [ngStyle]=\"getIconStyles(item.icon)\"\n ></i>\n </span>\n }\n\n <span class=\"metric-title\">\n {{ isTitleStyle(item.title) ? item.title.text : item.title }}\n </span>\n </div>\n\n <span class=\"metric-value\" [ngStyle]=\"getValueStyles(item.value)\">\n {{ isTitleStyle(item.value) ? item.value.text : item.value }}\n </span>\n </div>\n }\n </div>\n</pt-card>\n", styles: [":host{display:block}.panel-header{display:flex;align-items:center;gap:12px;margin-bottom:18px;font-weight:800;line-height:1.2}.panel-title-icon{display:inline-flex;align-items:center;justify-content:center;min-width:38px;min-height:38px;padding:10px;color:#6734c9;background:#f0e7ff;border-radius:12px;font-size:1.05rem}.panel-title-text{color:inherit}.metric-list{display:flex;flex-direction:column;gap:12px}.metric-item{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:68px;padding:12px 14px;background:#fff;border:1px solid #edf0f5;border-radius:14px;transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease}.metric-item:hover{border-color:#ddd2f8;box-shadow:0 5px 14px #4a209014}.metric-item-clickable{cursor:pointer}.metric-item-clickable:hover{transform:translateY(-1px)}.metric-left{display:flex;align-items:center;min-width:0;gap:12px}.metric-icon-wrapper{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}.metric-icon-wrapper i{display:inline-flex!important;align-items:center;justify-content:center;min-width:40px;min-height:40px;box-sizing:border-box}.metric-title{overflow:hidden;color:#344054;font-size:1rem;font-weight:700;line-height:1.3;text-overflow:ellipsis;white-space:nowrap}.metric-value{flex:0 0 auto;padding:7px 11px;color:#1f2937;background:#f8f9fc;border:1px solid #e8ebf1;border-radius:10px;font-size:.95rem;font-weight:800;line-height:1;text-align:right;white-space:nowrap}@media(max-width:576px){.metric-item{min-height:60px;padding:10px}.metric-title{font-size:.92rem}.metric-value{padding:6px 8px;font-size:.85rem}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: PTCardComponent, selector: "pt-card", inputs: ["config"] }, { kind: "directive", type: i12.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }] }); }
|
|
7642
7650
|
}
|
|
7643
7651
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTMetricPanelComponent, decorators: [{
|
|
7644
7652
|
type: Component,
|
|
7645
|
-
args: [{ selector: 'pt-metric-panel', standalone: false, template: "<pt-card [config]=\"cardConfig\">\n
|
|
7653
|
+
args: [{ selector: 'pt-metric-panel', standalone: false, template: "<!-- src/lib/components/pt-metric-panel/pt-metric-panel.component.html -->\n\n<pt-card [config]=\"cardConfig\">\n <div class=\"panel-header\" [ngStyle]=\"getTitleStyles()\">\n @if (getTitleIcon()) {\n <i class=\"panel-title-icon\" [ngClass]=\"getIconClass(getTitleIcon())\"></i>\n }\n\n <span class=\"panel-title-text\">{{ getTitleText() }}</span>\n </div>\n\n <div class=\"metric-list\">\n @for (item of panelData.indicators; track $index) {\n <div\n class=\"metric-item\"\n [class.metric-item-clickable]=\"!!item.url\"\n [pTooltip]=\"item.tooltip || ''\"\n tooltipPosition=\"top\"\n [tooltipDisabled]=\"!item.tooltip\"\n (click)=\"handleClick(item.url)\"\n >\n <div class=\"metric-left\">\n @if (item.icon) {\n <span class=\"metric-icon-wrapper\">\n <i\n [ngClass]=\"getIconClass(item.icon.code)\"\n [ngStyle]=\"getIconStyles(item.icon)\"\n ></i>\n </span>\n }\n\n <span class=\"metric-title\">\n {{ isTitleStyle(item.title) ? item.title.text : item.title }}\n </span>\n </div>\n\n <span class=\"metric-value\" [ngStyle]=\"getValueStyles(item.value)\">\n {{ isTitleStyle(item.value) ? item.value.text : item.value }}\n </span>\n </div>\n }\n </div>\n</pt-card>\n", styles: [":host{display:block}.panel-header{display:flex;align-items:center;gap:12px;margin-bottom:18px;font-weight:800;line-height:1.2}.panel-title-icon{display:inline-flex;align-items:center;justify-content:center;min-width:38px;min-height:38px;padding:10px;color:#6734c9;background:#f0e7ff;border-radius:12px;font-size:1.05rem}.panel-title-text{color:inherit}.metric-list{display:flex;flex-direction:column;gap:12px}.metric-item{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:68px;padding:12px 14px;background:#fff;border:1px solid #edf0f5;border-radius:14px;transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease}.metric-item:hover{border-color:#ddd2f8;box-shadow:0 5px 14px #4a209014}.metric-item-clickable{cursor:pointer}.metric-item-clickable:hover{transform:translateY(-1px)}.metric-left{display:flex;align-items:center;min-width:0;gap:12px}.metric-icon-wrapper{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}.metric-icon-wrapper i{display:inline-flex!important;align-items:center;justify-content:center;min-width:40px;min-height:40px;box-sizing:border-box}.metric-title{overflow:hidden;color:#344054;font-size:1rem;font-weight:700;line-height:1.3;text-overflow:ellipsis;white-space:nowrap}.metric-value{flex:0 0 auto;padding:7px 11px;color:#1f2937;background:#f8f9fc;border:1px solid #e8ebf1;border-radius:10px;font-size:.95rem;font-weight:800;line-height:1;text-align:right;white-space:nowrap}@media(max-width:576px){.metric-item{min-height:60px;padding:10px}.metric-title{font-size:.92rem}.metric-value{padding:6px 8px;font-size:.85rem}}\n"] }]
|
|
7646
7654
|
}], ctorParameters: () => [{ type: i1$2.Router }], propDecorators: { panelData: [{
|
|
7647
7655
|
type: Input
|
|
7648
7656
|
}], cardConfig: [{
|
|
@@ -7651,14 +7659,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
|
|
|
7651
7659
|
|
|
7652
7660
|
class PTMetricPanelModule {
|
|
7653
7661
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTMetricPanelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
7654
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.14", ngImport: i0, type: PTMetricPanelModule, declarations: [PTMetricPanelComponent], imports: [CommonModule, PTCardModule], exports: [PTMetricPanelComponent] }); }
|
|
7655
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTMetricPanelModule, imports: [CommonModule, PTCardModule] }); }
|
|
7662
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.14", ngImport: i0, type: PTMetricPanelModule, declarations: [PTMetricPanelComponent], imports: [CommonModule, PTCardModule, TooltipModule], exports: [PTMetricPanelComponent] }); }
|
|
7663
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTMetricPanelModule, imports: [CommonModule, PTCardModule, TooltipModule] }); }
|
|
7656
7664
|
}
|
|
7657
7665
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTMetricPanelModule, decorators: [{
|
|
7658
7666
|
type: NgModule,
|
|
7659
7667
|
args: [{
|
|
7660
7668
|
declarations: [PTMetricPanelComponent],
|
|
7661
|
-
imports: [CommonModule, PTCardModule],
|
|
7669
|
+
imports: [CommonModule, PTCardModule, TooltipModule],
|
|
7662
7670
|
exports: [PTMetricPanelComponent],
|
|
7663
7671
|
}]
|
|
7664
7672
|
}] });
|