@unifylib/ui-lib 1.1.13 → 1.1.14
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/esm2022/lib/components/action-confirmation/action-confirmation.component.mjs +19 -6
- package/esm2022/lib/components/section-form-canvas/section-form-canvas.component.mjs +3 -3
- package/fesm2022/iq-ui-lib.mjs +19 -8
- package/fesm2022/iq-ui-lib.mjs.map +1 -1
- package/fesm2022/unifylib-ui-lib.mjs +19 -8
- package/fesm2022/unifylib-ui-lib.mjs.map +1 -1
- package/lib/components/action-confirmation/action-confirmation.component.d.ts +9 -1
- package/package.json +1 -1
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Component, Inject, HostListener, EventEmitter,
|
|
2
|
+
import { Component, Inject, Input, HostListener, EventEmitter, Output, Injectable, signal, ViewChild, model, computed, effect, inject } from '@angular/core';
|
|
3
|
+
import * as i1$1 from '@angular/common';
|
|
4
|
+
import { CommonModule, NgIf, NgForOf, NgClass, AsyncPipe, NgSwitch, NgTemplateOutlet, KeyValuePipe, NgSwitchCase, DatePipe, CurrencyPipe, NgStyle, formatDate, NgSwitchDefault, DecimalPipe, JsonPipe, UpperCasePipe } from '@angular/common';
|
|
3
5
|
import * as i1 from '@angular/material/dialog';
|
|
4
6
|
import { MAT_DIALOG_DATA, MatDialogTitle, MatDialogContent, MatDialogActions } from '@angular/material/dialog';
|
|
5
7
|
import * as i2 from '@ngx-translate/core';
|
|
@@ -11,8 +13,6 @@ import { MatIcon, MatIconModule } from '@angular/material/icon';
|
|
|
11
13
|
import { MatCell, MatCellDef, MatHeaderCell, MatHeaderCellDef, MatTableDataSource, MatColumnDef, MatTable, MatRow, MatRowDef, MatHeaderRow, MatHeaderRowDef } from '@angular/material/table';
|
|
12
14
|
import * as i7$1 from '@angular/material/sort';
|
|
13
15
|
import { MatSortModule } from '@angular/material/sort';
|
|
14
|
-
import * as i1$1 from '@angular/common';
|
|
15
|
-
import { NgIf, NgForOf, NgClass, AsyncPipe, NgSwitch, NgTemplateOutlet, KeyValuePipe, NgSwitchCase, DatePipe, CurrencyPipe, NgStyle, formatDate, CommonModule, NgSwitchDefault, DecimalPipe, JsonPipe, UpperCasePipe } from '@angular/common';
|
|
16
16
|
import * as i9$1 from 'ngx-pagination';
|
|
17
17
|
import { NgxPaginationModule } from 'ngx-pagination';
|
|
18
18
|
import * as i6 from '@angular/material/form-field';
|
|
@@ -58,10 +58,14 @@ class ActionConfirmationComponent {
|
|
|
58
58
|
constructor(dialogRef, data) {
|
|
59
59
|
this.dialogRef = dialogRef;
|
|
60
60
|
this.data = data;
|
|
61
|
+
this.icon = { name: 'check_circle', color: '#0d7d6a' };
|
|
61
62
|
this.acceptActionLabel = '';
|
|
62
63
|
this.rejectActionLabel = '';
|
|
63
64
|
this.subMsg = '';
|
|
64
65
|
this.titleMsg = '';
|
|
66
|
+
this.listTitle = '';
|
|
67
|
+
this.listMessages = [];
|
|
68
|
+
this.extraWarningMsg = '';
|
|
65
69
|
this.currentDirection = 'ltr';
|
|
66
70
|
dialogRef.disableClose = true;
|
|
67
71
|
}
|
|
@@ -73,7 +77,11 @@ class ActionConfirmationComponent {
|
|
|
73
77
|
this.rejectActionLabel = this.data.rejectActionLabel || 'reject';
|
|
74
78
|
this.subMsg = this.data.warningMsg || '';
|
|
75
79
|
this.titleMsg = this.data.confirmMsg || '';
|
|
80
|
+
this.listTitle = this.data.listTitle || '';
|
|
81
|
+
this.listMessages = this.data.listMessages || [];
|
|
82
|
+
this.extraWarningMsg = this.data.extraWarningMsg || '';
|
|
76
83
|
this.currentDirection = this.data.direction;
|
|
84
|
+
this.icon = this.data.icon || { name: 'check_circle', color: '#0d7d6a' };
|
|
77
85
|
}
|
|
78
86
|
commentAndClose() {
|
|
79
87
|
this.dialogRef.close('accept');
|
|
@@ -83,20 +91,23 @@ class ActionConfirmationComponent {
|
|
|
83
91
|
this.dialogRef.close();
|
|
84
92
|
}
|
|
85
93
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ActionConfirmationComponent, deps: [{ token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
86
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ActionConfirmationComponent, isStandalone: true, selector: "app-action-confirmation", host: { listeners: { "window:keyup.esc": "onKeyUp()" } }, ngImport: i0, template: "<div class=\"confirm-dialog\" [dir]=\"currentDirection\">\r\n\r\n <div class=\"header-
|
|
94
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ActionConfirmationComponent, isStandalone: true, selector: "app-action-confirmation", inputs: { icon: "icon" }, host: { listeners: { "window:keyup.esc": "onKeyUp()" } }, ngImport: i0, template: "<div class=\"confirm-dialog\" [dir]=\"currentDirection\">\r\n\r\n <div class=\"header-section\">\r\n <div class=\"header-row\">\r\n <div class=\"icon-container\">\r\n <mat-icon class=\"check-icon\" [style.color]=\"icon.color\">{{ icon.name }}</mat-icon>\r\n </div>\r\n <button mat-icon-button class=\"close-btn\" (click)=\"cancel()\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </div>\r\n <div class=\"title-container\">\r\n <h2 class=\"title\">{{ titleMsg | translate }}</h2>\r\n </div>\r\n </div>\r\n\r\n <div class=\"message-container\">\r\n <p class=\"message\" *ngIf=\"subMsg\">\r\n {{ subMsg | translate }}\r\n </p>\r\n\r\n <div class=\"list-section\" *ngIf=\"listTitle || listMessages.length > 0\">\r\n <p class=\"list-title\" *ngIf=\"listTitle\"><strong>{{ listTitle | translate }}</strong></p>\r\n <ul class=\"list-messages\" *ngIf=\"listMessages.length > 0\">\r\n <li *ngFor=\"let message of listMessages\" class=\"list-item\">\r\n {{ message | translate }}\r\n </li>\r\n </ul>\r\n </div>\r\n\r\n <p class=\"extra-warning\" *ngIf=\"extraWarningMsg\">\r\n {{ extraWarningMsg | translate }}\r\n </p>\r\n </div>\r\n\r\n <div class=\"actions\">\r\n <button\r\n mat-stroked-button\r\n class=\"btn-cancel\"\r\n (click)=\"cancel()\"\r\n id=\"rejectActionLabel\">\r\n {{ rejectActionLabel | translate }}\r\n </button>\r\n\r\n <button\r\n mat-flat-button\r\n class=\"btn-confirm\"\r\n (click)=\"commentAndClose()\"\r\n id=\"acceptActionLabel\">\r\n {{ acceptActionLabel | translate }}\r\n </button>\r\n </div>\r\n\r\n</div>\r\n", styles: [".confirm-dialog{padding:24px;min-width:547px;box-sizing:border-box;background:#fff;border:1px solid #f0eeee;border-radius:8px;box-shadow:0 4px 8px -2px #1018281a,0 2px 4px -2px #1018280f;display:flex;flex-direction:column;gap:8px}.header-section{display:flex;flex-direction:column;gap:8px;width:100%}.header-row{display:flex;justify-content:space-between;align-items:flex-start;position:relative;width:100%;min-height:32px}.title-container{display:flex;align-items:flex-start;width:100%}.icon-container{width:32px;height:32px;background:#edfffa;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.check-icon{font-size:32px;width:32px;height:38px;line-height:32px}.title{margin:0;font-size:20px;font-weight:500;font-family:lusail-medium,sans-serif;color:#222;line-height:1.2}.close-btn{position:absolute;right:0;top:0;width:24px;height:24px;padding:0;flex-shrink:0;background:transparent!important;border:none!important}.close-btn mat-icon{font-size:24px;width:24px;height:24px;color:#222;line-height:24px}.message-container{padding:0 0 16px;width:100%}.message{margin:0;font-size:16px;font-weight:400;font-family:lusail-regular,sans-serif;color:#5c5c5c;line-height:1.2}.list-section{margin-top:8px}.list-title{margin:0 0 8px;font-size:16px;font-weight:400;font-family:lusail-regular,sans-serif;color:#5c5c5c;line-height:1.2}.list-messages{margin:0;padding-left:20px;list-style-type:disc}.list-item{margin:0 0 4px;font-size:16px;font-weight:400;font-family:lusail-regular,sans-serif;color:#5c5c5c;line-height:1.2}.list-item:last-child{margin-bottom:0}.extra-warning{margin:16px 0 0;font-size:16px;font-weight:400;font-family:lusail-regular,sans-serif;color:#5c5c5c;line-height:1.2}.actions{display:flex;justify-content:flex-end;gap:8px;align-items:center;width:100%}.btn-cancel{width:122px;height:32px;margin:0!important;background:#fff;border:1px solid #3E627B!important;border-radius:8px;color:#3e627b!important;font-size:16px;font-weight:500;font-family:lusail-medium,sans-serif;line-height:1.2;text-align:center;padding:0 16px;display:flex;align-items:center;justify-content:center}.btn-cancel:hover{background:#f5f5f5}.btn-confirm{height:32px;margin:0!important;background:#0d4261!important;border-radius:8px!important;color:#fff!important;font-size:16px;font-weight:500;font-family:lusail-medium,sans-serif;line-height:1.2;text-align:center;padding:0 16px;display:flex;align-items:center;justify-content:center;min-width:auto}.btn-confirm:hover{background:#082b41}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "component", type: MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
|
|
87
95
|
}
|
|
88
96
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ActionConfirmationComponent, decorators: [{
|
|
89
97
|
type: Component,
|
|
90
98
|
args: [{ selector: 'app-action-confirmation', standalone: true, imports: [
|
|
99
|
+
CommonModule,
|
|
91
100
|
TranslateModule,
|
|
92
101
|
MatButton,
|
|
93
102
|
MatIconButton,
|
|
94
103
|
MatIcon
|
|
95
|
-
], template: "<div class=\"confirm-dialog\" [dir]=\"currentDirection\">\r\n\r\n <div class=\"header-
|
|
104
|
+
], template: "<div class=\"confirm-dialog\" [dir]=\"currentDirection\">\r\n\r\n <div class=\"header-section\">\r\n <div class=\"header-row\">\r\n <div class=\"icon-container\">\r\n <mat-icon class=\"check-icon\" [style.color]=\"icon.color\">{{ icon.name }}</mat-icon>\r\n </div>\r\n <button mat-icon-button class=\"close-btn\" (click)=\"cancel()\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </div>\r\n <div class=\"title-container\">\r\n <h2 class=\"title\">{{ titleMsg | translate }}</h2>\r\n </div>\r\n </div>\r\n\r\n <div class=\"message-container\">\r\n <p class=\"message\" *ngIf=\"subMsg\">\r\n {{ subMsg | translate }}\r\n </p>\r\n\r\n <div class=\"list-section\" *ngIf=\"listTitle || listMessages.length > 0\">\r\n <p class=\"list-title\" *ngIf=\"listTitle\"><strong>{{ listTitle | translate }}</strong></p>\r\n <ul class=\"list-messages\" *ngIf=\"listMessages.length > 0\">\r\n <li *ngFor=\"let message of listMessages\" class=\"list-item\">\r\n {{ message | translate }}\r\n </li>\r\n </ul>\r\n </div>\r\n\r\n <p class=\"extra-warning\" *ngIf=\"extraWarningMsg\">\r\n {{ extraWarningMsg | translate }}\r\n </p>\r\n </div>\r\n\r\n <div class=\"actions\">\r\n <button\r\n mat-stroked-button\r\n class=\"btn-cancel\"\r\n (click)=\"cancel()\"\r\n id=\"rejectActionLabel\">\r\n {{ rejectActionLabel | translate }}\r\n </button>\r\n\r\n <button\r\n mat-flat-button\r\n class=\"btn-confirm\"\r\n (click)=\"commentAndClose()\"\r\n id=\"acceptActionLabel\">\r\n {{ acceptActionLabel | translate }}\r\n </button>\r\n </div>\r\n\r\n</div>\r\n", styles: [".confirm-dialog{padding:24px;min-width:547px;box-sizing:border-box;background:#fff;border:1px solid #f0eeee;border-radius:8px;box-shadow:0 4px 8px -2px #1018281a,0 2px 4px -2px #1018280f;display:flex;flex-direction:column;gap:8px}.header-section{display:flex;flex-direction:column;gap:8px;width:100%}.header-row{display:flex;justify-content:space-between;align-items:flex-start;position:relative;width:100%;min-height:32px}.title-container{display:flex;align-items:flex-start;width:100%}.icon-container{width:32px;height:32px;background:#edfffa;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.check-icon{font-size:32px;width:32px;height:38px;line-height:32px}.title{margin:0;font-size:20px;font-weight:500;font-family:lusail-medium,sans-serif;color:#222;line-height:1.2}.close-btn{position:absolute;right:0;top:0;width:24px;height:24px;padding:0;flex-shrink:0;background:transparent!important;border:none!important}.close-btn mat-icon{font-size:24px;width:24px;height:24px;color:#222;line-height:24px}.message-container{padding:0 0 16px;width:100%}.message{margin:0;font-size:16px;font-weight:400;font-family:lusail-regular,sans-serif;color:#5c5c5c;line-height:1.2}.list-section{margin-top:8px}.list-title{margin:0 0 8px;font-size:16px;font-weight:400;font-family:lusail-regular,sans-serif;color:#5c5c5c;line-height:1.2}.list-messages{margin:0;padding-left:20px;list-style-type:disc}.list-item{margin:0 0 4px;font-size:16px;font-weight:400;font-family:lusail-regular,sans-serif;color:#5c5c5c;line-height:1.2}.list-item:last-child{margin-bottom:0}.extra-warning{margin:16px 0 0;font-size:16px;font-weight:400;font-family:lusail-regular,sans-serif;color:#5c5c5c;line-height:1.2}.actions{display:flex;justify-content:flex-end;gap:8px;align-items:center;width:100%}.btn-cancel{width:122px;height:32px;margin:0!important;background:#fff;border:1px solid #3E627B!important;border-radius:8px;color:#3e627b!important;font-size:16px;font-weight:500;font-family:lusail-medium,sans-serif;line-height:1.2;text-align:center;padding:0 16px;display:flex;align-items:center;justify-content:center}.btn-cancel:hover{background:#f5f5f5}.btn-confirm{height:32px;margin:0!important;background:#0d4261!important;border-radius:8px!important;color:#fff!important;font-size:16px;font-weight:500;font-family:lusail-medium,sans-serif;line-height:1.2;text-align:center;padding:0 16px;display:flex;align-items:center;justify-content:center;min-width:auto}.btn-confirm:hover{background:#082b41}\n"] }]
|
|
96
105
|
}], ctorParameters: () => [{ type: i1.MatDialogRef }, { type: undefined, decorators: [{
|
|
97
106
|
type: Inject,
|
|
98
107
|
args: [MAT_DIALOG_DATA]
|
|
99
|
-
}] }], propDecorators: {
|
|
108
|
+
}] }], propDecorators: { icon: [{
|
|
109
|
+
type: Input
|
|
110
|
+
}], onKeyUp: [{
|
|
100
111
|
type: HostListener,
|
|
101
112
|
args: ['window:keyup.esc']
|
|
102
113
|
}] } });
|
|
@@ -4097,7 +4108,7 @@ class SectionFormCanvasComponent {
|
|
|
4097
4108
|
this.buttonClicked.emit({ ...btn, sectionKey: sectionKey });
|
|
4098
4109
|
}
|
|
4099
4110
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SectionFormCanvasComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4100
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SectionFormCanvasComponent, isStandalone: true, selector: "lib-section-form-canvas", inputs: { pageInfo: "pageInfo", fields: "fields", itemId: "itemId", editable: "editable", hideBackButton: "hideBackButton", item: "item", title: "title", isTranslateTitle: "isTranslateTitle", key: "key", hideToggle: "hideToggle", isExpanded: "isExpanded", alwaysOpen: "alwaysOpen", buttons: "buttons", itemStatus: "itemStatus" }, outputs: { actionEdit: "actionEdit", formEdit: "formEdit", buttonClicked: "buttonClicked" }, ngImport: i0, template: "<mat-expansion-panel class=\"location-card\"\r\n #panel=\"matExpansionPanel\"\r\n [expanded]=\"isExpanded\"\r\n [hideToggle]=\"hideToggle\"\r\n (opened)=\"alwaysOpen ? panel.open() : null\"\r\n (closed)=\"alwaysOpen ? panel.open() : null\">\r\n <mat-expansion-panel-header class=\"card-header\" (click)=\"toggleExpand()\">\r\n <mat-panel-title>\r\n <div class=\"title-container\">\r\n <h3 class=\"card-title\" *ngIf=\"isTranslateTitle\">\r\n {{ pageInfo.labelsSection + '.' + title | translate }}\r\n </h3>\r\n <h3 class=\"card-title\" *ngIf=\"!isTranslateTitle\">{{ title }}</h3>\r\n <button mat-button *ngIf=\"itemStatus\" class=\"stateType\" [ngClass]=\"itemStatus\">\r\n {{ pageInfo.labelsSection + '.' + itemStatus | translate }}\r\n </button>\r\n </div>\r\n </mat-panel-title>\r\n\r\n <mat-panel-description class=\"panel-description\">\r\n <div class=\"row flex-auto buttons-wrapper\">\r\n <button\r\n mat-flat-button\r\n *ngFor=\"let btn of buttons\"\r\n type=\"button\"\r\n [color]=\"btn.color || 'primary'\"\r\n (click)=\"onButtonClick(btn , key); $event.stopPropagation()\"\r\n class=\"btn-none-background-primary action\"\r\n [attr.id]=\"btn.id || ('section-btn-' + (btn.action || btn.label || btn.key))\"\r\n >\r\n <div class=\"button-text\">\r\n <mat-icon *ngIf=\"btn.icon\">{{ btn.icon }}</mat-icon>\r\n <span>{{ btn.label | translate }}</span>\r\n </div>\r\n </button>\r\n </div>\r\n </mat-panel-description>\r\n </mat-expansion-panel-header>\r\n <div class=\"panel-body\">\r\n <hr class=\"divider\"/>\r\n <app-base-form-canvas\r\n [pageInfo]=\"pageInfo\"\r\n [fields]=\"fields\"\r\n [editable]=\"editable\"\r\n [item]=\"item\"\r\n (formUpdated)=\"formUpdated($event)\"\r\n ></app-base-form-canvas>\r\n </div>\r\n</mat-expansion-panel>\r\n", styles: [".location-card{border:1px solid #dcdcdc;border-radius:8px;background:#fff;margin:18px auto;overflow:hidden}.location-card .mat-expansion-panel-header{padding:0 15px}.location-card .mat-expansion-panel-header ::ng-deep .mat-content{margin:0!important}.location-card .panel-body{padding:20px 15px;padding-top:0!important}.location-card .panel-body ::ng-deep app-base-form-canvas .main-form-canvas{margin-top:20px!important}.location-card .panel-description{justify-content:end!important;margin:0!important}.location-card .card-header{display:flex;justify-content:space-between;align-items:center;padding:16px 16px 20px!important}.location-card .card-header .title-container{display:flex;flex-direction:column;gap:8px;align-items:flex-start;justify-content:center}.location-card .card-header .card-title{margin:0;font-size:24px;font-weight:700;line-height:1.2;color:#000;width:fit-content;white-space:nowrap}.location-card .card-header .btn-edit{width:120px;min-height:32px!important;border-radius:9999px!important;font-size:16px!important}.location-card .card-header .expand-icon{color:#339dff;font-size:16px}.location-card .divider{border:none;border-top:2px solid var(--primary-color-3nd);margin:0}.flex-auto{flex:1 1 auto;display:flex;flex-direction:column}.row{display:flex;flex-direction:row;width:100%}.gap-20{gap:20px}.buttons-wrapper{display:flex;text-align-last:end;margin:0!important;gap:16px;justify-content:flex-end}.buttons-wrapper .action{min-height:44px!important;min-width:135px!important;width:auto!important}.button-text span{font-size:18px}.button-text mat-icon{font-size:18px!important}.btn-none-background-primary{margin:0!important}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: BaseFormCanvasComponent, selector: "app-base-form-canvas", inputs: ["pageInfo", "currency", "fields", "errors", "workflowEditableFields", "isWorkflowEditableManaged", "supportingAttributes", "editable", "emitOnValueChanges", "item", "equationSuggestedFields", "currentEquationValue"], outputs: ["attachmentEmitter", "actionEmitter", "formUpdated", "hyperTextEvent", "currentEquationValueChange"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "component", type: MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "directive", type: MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: MatExpansionPanelDescription, selector: "mat-panel-description" }, { kind: "component", type: MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
|
|
4111
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SectionFormCanvasComponent, isStandalone: true, selector: "lib-section-form-canvas", inputs: { pageInfo: "pageInfo", fields: "fields", itemId: "itemId", editable: "editable", hideBackButton: "hideBackButton", item: "item", title: "title", isTranslateTitle: "isTranslateTitle", key: "key", hideToggle: "hideToggle", isExpanded: "isExpanded", alwaysOpen: "alwaysOpen", buttons: "buttons", itemStatus: "itemStatus" }, outputs: { actionEdit: "actionEdit", formEdit: "formEdit", buttonClicked: "buttonClicked" }, ngImport: i0, template: "<mat-expansion-panel class=\"location-card\"\r\n #panel=\"matExpansionPanel\"\r\n [expanded]=\"isExpanded\"\r\n [hideToggle]=\"hideToggle\"\r\n (opened)=\"alwaysOpen ? panel.open() : null\"\r\n (closed)=\"alwaysOpen ? panel.open() : null\">\r\n <mat-expansion-panel-header class=\"card-header\" (click)=\"toggleExpand()\">\r\n <mat-panel-title>\r\n <div class=\"title-container\">\r\n <h3 class=\"card-title\" *ngIf=\"isTranslateTitle\">\r\n {{ pageInfo.labelsSection + '.' + title | translate }}\r\n </h3>\r\n <h3 class=\"card-title\" *ngIf=\"!isTranslateTitle\">{{ title }}</h3>\r\n <button mat-button *ngIf=\"itemStatus\" class=\"stateType\" [ngClass]=\"itemStatus\">\r\n {{ pageInfo.labelsSection + '.' + itemStatus | translate }}\r\n </button>\r\n </div>\r\n </mat-panel-title>\r\n\r\n <mat-panel-description class=\"panel-description\">\r\n <div class=\"row flex-auto buttons-wrapper\">\r\n <button\r\n mat-flat-button\r\n *ngFor=\"let btn of buttons\"\r\n type=\"button\"\r\n [color]=\"btn.color || 'primary'\"\r\n (click)=\"onButtonClick(btn , key); $event.stopPropagation()\"\r\n class=\"btn-none-background-primary action\"\r\n [attr.id]=\"btn.id || ('section-btn-' + (btn.action || btn.label || btn.key))\"\r\n >\r\n <div class=\"button-text\">\r\n <mat-icon *ngIf=\"btn.icon\">{{ btn.icon }}</mat-icon>\r\n <span>{{ btn.label | translate }}</span>\r\n </div>\r\n </button>\r\n </div>\r\n </mat-panel-description>\r\n </mat-expansion-panel-header>\r\n <div class=\"panel-body\">\r\n <hr class=\"divider\"/>\r\n <app-base-form-canvas\r\n [pageInfo]=\"pageInfo\"\r\n [fields]=\"fields\"\r\n [editable]=\"editable\"\r\n [item]=\"item\"\r\n (formUpdated)=\"formUpdated($event)\"\r\n ></app-base-form-canvas>\r\n </div>\r\n</mat-expansion-panel>\r\n", styles: [".location-card{border:1px solid #dcdcdc;border-radius:8px;background:#fff;margin:18px auto;overflow:hidden}.location-card .mat-expansion-panel-header{padding:0 15px}.location-card .mat-expansion-panel-header ::ng-deep .mat-content{margin:0!important}.location-card .panel-body{padding:20px 15px;padding-top:0!important}.location-card .panel-body ::ng-deep app-base-form-canvas .main-form-canvas{margin-top:20px!important}.location-card .panel-description{justify-content:end!important;margin:0!important}.location-card .card-header{display:flex;justify-content:space-between;align-items:center;padding:16px 16px 20px!important}.location-card .card-header .title-container{display:flex;flex-direction:column;gap:8px;align-items:flex-start;justify-content:center}.location-card .card-header .card-title{margin:0;font-size:24px;font-weight:700;line-height:1.2;color:#000;width:fit-content;white-space:nowrap}.location-card .card-header .btn-edit{width:120px;min-height:32px!important;border-radius:9999px!important;font-size:16px!important}.location-card .card-header .expand-icon{color:#339dff;font-size:16px}.location-card .divider{border:none;border-top:2px solid var(--primary-color-3nd);margin:0}.flex-auto{flex:1 1 auto;display:flex;flex-direction:column}.row{display:flex;flex-direction:row;width:100%}.gap-20{gap:20px}.buttons-wrapper{display:flex;text-align-last:end;margin:0!important;gap:16px;justify-content:flex-end}.buttons-wrapper .action{min-height:44px!important;min-width:135px!important;width:auto!important}.button-text span{font-size:18px}.button-text mat-icon{font-size:18px!important}.btn-none-background-primary{margin:0!important}@media (max-width: 768px){.buttons-wrapper .action{min-height:32px!important;min-width:20px!important;width:auto!important;padding:0 12px!important;border-radius:9999px!important}.buttons-wrapper .action .mat-icon{font-size:18px!important;width:18px!important;height:22px!important}}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: BaseFormCanvasComponent, selector: "app-base-form-canvas", inputs: ["pageInfo", "currency", "fields", "errors", "workflowEditableFields", "isWorkflowEditableManaged", "supportingAttributes", "editable", "emitOnValueChanges", "item", "equationSuggestedFields", "currentEquationValue"], outputs: ["attachmentEmitter", "actionEmitter", "formUpdated", "hyperTextEvent", "currentEquationValueChange"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "component", type: MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "directive", type: MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: MatExpansionPanelDescription, selector: "mat-panel-description" }, { kind: "component", type: MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
|
|
4101
4112
|
}
|
|
4102
4113
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SectionFormCanvasComponent, decorators: [{
|
|
4103
4114
|
type: Component,
|
|
@@ -4114,7 +4125,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
4114
4125
|
MatExpansionPanelDescription,
|
|
4115
4126
|
MatExpansionPanelHeader,
|
|
4116
4127
|
NgForOf
|
|
4117
|
-
], template: "<mat-expansion-panel class=\"location-card\"\r\n #panel=\"matExpansionPanel\"\r\n [expanded]=\"isExpanded\"\r\n [hideToggle]=\"hideToggle\"\r\n (opened)=\"alwaysOpen ? panel.open() : null\"\r\n (closed)=\"alwaysOpen ? panel.open() : null\">\r\n <mat-expansion-panel-header class=\"card-header\" (click)=\"toggleExpand()\">\r\n <mat-panel-title>\r\n <div class=\"title-container\">\r\n <h3 class=\"card-title\" *ngIf=\"isTranslateTitle\">\r\n {{ pageInfo.labelsSection + '.' + title | translate }}\r\n </h3>\r\n <h3 class=\"card-title\" *ngIf=\"!isTranslateTitle\">{{ title }}</h3>\r\n <button mat-button *ngIf=\"itemStatus\" class=\"stateType\" [ngClass]=\"itemStatus\">\r\n {{ pageInfo.labelsSection + '.' + itemStatus | translate }}\r\n </button>\r\n </div>\r\n </mat-panel-title>\r\n\r\n <mat-panel-description class=\"panel-description\">\r\n <div class=\"row flex-auto buttons-wrapper\">\r\n <button\r\n mat-flat-button\r\n *ngFor=\"let btn of buttons\"\r\n type=\"button\"\r\n [color]=\"btn.color || 'primary'\"\r\n (click)=\"onButtonClick(btn , key); $event.stopPropagation()\"\r\n class=\"btn-none-background-primary action\"\r\n [attr.id]=\"btn.id || ('section-btn-' + (btn.action || btn.label || btn.key))\"\r\n >\r\n <div class=\"button-text\">\r\n <mat-icon *ngIf=\"btn.icon\">{{ btn.icon }}</mat-icon>\r\n <span>{{ btn.label | translate }}</span>\r\n </div>\r\n </button>\r\n </div>\r\n </mat-panel-description>\r\n </mat-expansion-panel-header>\r\n <div class=\"panel-body\">\r\n <hr class=\"divider\"/>\r\n <app-base-form-canvas\r\n [pageInfo]=\"pageInfo\"\r\n [fields]=\"fields\"\r\n [editable]=\"editable\"\r\n [item]=\"item\"\r\n (formUpdated)=\"formUpdated($event)\"\r\n ></app-base-form-canvas>\r\n </div>\r\n</mat-expansion-panel>\r\n", styles: [".location-card{border:1px solid #dcdcdc;border-radius:8px;background:#fff;margin:18px auto;overflow:hidden}.location-card .mat-expansion-panel-header{padding:0 15px}.location-card .mat-expansion-panel-header ::ng-deep .mat-content{margin:0!important}.location-card .panel-body{padding:20px 15px;padding-top:0!important}.location-card .panel-body ::ng-deep app-base-form-canvas .main-form-canvas{margin-top:20px!important}.location-card .panel-description{justify-content:end!important;margin:0!important}.location-card .card-header{display:flex;justify-content:space-between;align-items:center;padding:16px 16px 20px!important}.location-card .card-header .title-container{display:flex;flex-direction:column;gap:8px;align-items:flex-start;justify-content:center}.location-card .card-header .card-title{margin:0;font-size:24px;font-weight:700;line-height:1.2;color:#000;width:fit-content;white-space:nowrap}.location-card .card-header .btn-edit{width:120px;min-height:32px!important;border-radius:9999px!important;font-size:16px!important}.location-card .card-header .expand-icon{color:#339dff;font-size:16px}.location-card .divider{border:none;border-top:2px solid var(--primary-color-3nd);margin:0}.flex-auto{flex:1 1 auto;display:flex;flex-direction:column}.row{display:flex;flex-direction:row;width:100%}.gap-20{gap:20px}.buttons-wrapper{display:flex;text-align-last:end;margin:0!important;gap:16px;justify-content:flex-end}.buttons-wrapper .action{min-height:44px!important;min-width:135px!important;width:auto!important}.button-text span{font-size:18px}.button-text mat-icon{font-size:18px!important}.btn-none-background-primary{margin:0!important}\n"] }]
|
|
4128
|
+
], template: "<mat-expansion-panel class=\"location-card\"\r\n #panel=\"matExpansionPanel\"\r\n [expanded]=\"isExpanded\"\r\n [hideToggle]=\"hideToggle\"\r\n (opened)=\"alwaysOpen ? panel.open() : null\"\r\n (closed)=\"alwaysOpen ? panel.open() : null\">\r\n <mat-expansion-panel-header class=\"card-header\" (click)=\"toggleExpand()\">\r\n <mat-panel-title>\r\n <div class=\"title-container\">\r\n <h3 class=\"card-title\" *ngIf=\"isTranslateTitle\">\r\n {{ pageInfo.labelsSection + '.' + title | translate }}\r\n </h3>\r\n <h3 class=\"card-title\" *ngIf=\"!isTranslateTitle\">{{ title }}</h3>\r\n <button mat-button *ngIf=\"itemStatus\" class=\"stateType\" [ngClass]=\"itemStatus\">\r\n {{ pageInfo.labelsSection + '.' + itemStatus | translate }}\r\n </button>\r\n </div>\r\n </mat-panel-title>\r\n\r\n <mat-panel-description class=\"panel-description\">\r\n <div class=\"row flex-auto buttons-wrapper\">\r\n <button\r\n mat-flat-button\r\n *ngFor=\"let btn of buttons\"\r\n type=\"button\"\r\n [color]=\"btn.color || 'primary'\"\r\n (click)=\"onButtonClick(btn , key); $event.stopPropagation()\"\r\n class=\"btn-none-background-primary action\"\r\n [attr.id]=\"btn.id || ('section-btn-' + (btn.action || btn.label || btn.key))\"\r\n >\r\n <div class=\"button-text\">\r\n <mat-icon *ngIf=\"btn.icon\">{{ btn.icon }}</mat-icon>\r\n <span>{{ btn.label | translate }}</span>\r\n </div>\r\n </button>\r\n </div>\r\n </mat-panel-description>\r\n </mat-expansion-panel-header>\r\n <div class=\"panel-body\">\r\n <hr class=\"divider\"/>\r\n <app-base-form-canvas\r\n [pageInfo]=\"pageInfo\"\r\n [fields]=\"fields\"\r\n [editable]=\"editable\"\r\n [item]=\"item\"\r\n (formUpdated)=\"formUpdated($event)\"\r\n ></app-base-form-canvas>\r\n </div>\r\n</mat-expansion-panel>\r\n", styles: [".location-card{border:1px solid #dcdcdc;border-radius:8px;background:#fff;margin:18px auto;overflow:hidden}.location-card .mat-expansion-panel-header{padding:0 15px}.location-card .mat-expansion-panel-header ::ng-deep .mat-content{margin:0!important}.location-card .panel-body{padding:20px 15px;padding-top:0!important}.location-card .panel-body ::ng-deep app-base-form-canvas .main-form-canvas{margin-top:20px!important}.location-card .panel-description{justify-content:end!important;margin:0!important}.location-card .card-header{display:flex;justify-content:space-between;align-items:center;padding:16px 16px 20px!important}.location-card .card-header .title-container{display:flex;flex-direction:column;gap:8px;align-items:flex-start;justify-content:center}.location-card .card-header .card-title{margin:0;font-size:24px;font-weight:700;line-height:1.2;color:#000;width:fit-content;white-space:nowrap}.location-card .card-header .btn-edit{width:120px;min-height:32px!important;border-radius:9999px!important;font-size:16px!important}.location-card .card-header .expand-icon{color:#339dff;font-size:16px}.location-card .divider{border:none;border-top:2px solid var(--primary-color-3nd);margin:0}.flex-auto{flex:1 1 auto;display:flex;flex-direction:column}.row{display:flex;flex-direction:row;width:100%}.gap-20{gap:20px}.buttons-wrapper{display:flex;text-align-last:end;margin:0!important;gap:16px;justify-content:flex-end}.buttons-wrapper .action{min-height:44px!important;min-width:135px!important;width:auto!important}.button-text span{font-size:18px}.button-text mat-icon{font-size:18px!important}.btn-none-background-primary{margin:0!important}@media (max-width: 768px){.buttons-wrapper .action{min-height:32px!important;min-width:20px!important;width:auto!important;padding:0 12px!important;border-radius:9999px!important}.buttons-wrapper .action .mat-icon{font-size:18px!important;width:18px!important;height:22px!important}}\n"] }]
|
|
4118
4129
|
}], propDecorators: { pageInfo: [{
|
|
4119
4130
|
type: Input
|
|
4120
4131
|
}], fields: [{
|