@unifylib/ui-lib 1.1.46 → 1.1.48
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/base-model/button-action-settings.mjs +2 -1
- package/esm2022/lib/components/activity-report-form/activity-report-form.component.mjs +2 -2
- package/esm2022/lib/components/advanced-filter/field-filter/field-filter.component.mjs +3 -3
- package/esm2022/lib/components/audit-log-details-dialog/audit-log-details-dialog.component.mjs +2 -2
- package/esm2022/lib/components/base-form/base-form.component.mjs +2 -2
- package/esm2022/lib/components/base-form-canvas/base-form-canvas.component.mjs +24 -3
- package/esm2022/lib/components/base-input-dialog/base-input-dialog.component.mjs +2 -2
- package/esm2022/lib/components/base-table/base-table.component.mjs +4 -3
- package/esm2022/lib/components/button-actions/button-actions.component.mjs +35 -4
- package/esm2022/lib/components/editable-base-table/editable-base-table.component.mjs +2 -2
- package/esm2022/lib/components/item-line-editor/item-line-editor.component.mjs +2 -2
- package/esm2022/lib/components/report-form/report-form.component.mjs +2 -2
- package/esm2022/lib/components/section-form-canvas/section-form-canvas.component.mjs +2 -2
- package/fesm2022/iq-ui-lib.mjs +71 -17
- package/fesm2022/iq-ui-lib.mjs.map +1 -1
- package/fesm2022/unifylib-ui-lib.mjs +71 -17
- package/fesm2022/unifylib-ui-lib.mjs.map +1 -1
- package/lib/base-model/button-action-settings.d.ts +1 -0
- package/lib/components/base-form-canvas/base-form-canvas.component.d.ts +4 -2
- package/lib/components/button-actions/button-actions.component.d.ts +4 -2
- package/package.json +1 -1
|
@@ -214,7 +214,36 @@ class ButtonActionsComponent {
|
|
|
214
214
|
}
|
|
215
215
|
ngOnInit() {
|
|
216
216
|
}
|
|
217
|
-
|
|
217
|
+
resolveActionHref(action) {
|
|
218
|
+
if (this.disabled) {
|
|
219
|
+
return null;
|
|
220
|
+
}
|
|
221
|
+
if (action.showCommentDialog) {
|
|
222
|
+
return null;
|
|
223
|
+
}
|
|
224
|
+
const linkHref = action.linkHref;
|
|
225
|
+
if (linkHref == null || linkHref === '') {
|
|
226
|
+
return null;
|
|
227
|
+
}
|
|
228
|
+
if (typeof linkHref === 'function') {
|
|
229
|
+
if (this.row === undefined || this.row === null) {
|
|
230
|
+
return null;
|
|
231
|
+
}
|
|
232
|
+
const resolved = linkHref(this.row);
|
|
233
|
+
const s = resolved != null ? String(resolved).trim() : '';
|
|
234
|
+
return s.length > 0 ? s : null;
|
|
235
|
+
}
|
|
236
|
+
const s = String(linkHref).trim();
|
|
237
|
+
return s.length > 0 ? s : null;
|
|
238
|
+
}
|
|
239
|
+
getClickedAction(action, event) {
|
|
240
|
+
const href = this.resolveActionHref(action);
|
|
241
|
+
if (href && event) {
|
|
242
|
+
if (event.ctrlKey || event.metaKey || event.button === 1) {
|
|
243
|
+
return;
|
|
244
|
+
}
|
|
245
|
+
event.preventDefault();
|
|
246
|
+
}
|
|
218
247
|
if (action.showCommentDialog === true) {
|
|
219
248
|
const dialogRef = this.dialog.open(ActionCommentComponent, {
|
|
220
249
|
data: { label: action.label, isTermination: action.commentRequired, external: false,
|
|
@@ -236,7 +265,7 @@ class ButtonActionsComponent {
|
|
|
236
265
|
}
|
|
237
266
|
}
|
|
238
267
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ButtonActionsComponent, deps: [{ token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
239
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ButtonActionsComponent, isStandalone: true, selector: "app-button-actions", inputs: { actions: "actions", disabled: "disabled", buttonsAction: "buttonsAction", listAction: "listAction" }, outputs: { clickedButton: "clickedButton" }, ngImport: i0, template: "<ng-container *ngIf=\"buttonsAction; else list_Action\">\r\n <div class=\"action-buttons-container\" *ngIf=\"(actions?.length ? actions : listAction)?.length > 0\">\r\n <
|
|
268
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ButtonActionsComponent, isStandalone: true, selector: "app-button-actions", inputs: { actions: "actions", disabled: "disabled", buttonsAction: "buttonsAction", listAction: "listAction", row: "row" }, outputs: { clickedButton: "clickedButton" }, ngImport: i0, template: "<ng-container *ngIf=\"buttonsAction; else list_Action\">\r\n <div class=\"action-buttons-container\" *ngIf=\"(actions?.length ? actions : listAction)?.length > 0\">\r\n <ng-container *ngFor=\"let action of (actions?.length ? actions : listAction); let i = index\">\r\n <a\r\n *ngIf=\"resolveActionHref(action) as href\"\r\n class=\"action-button\"\r\n [href]=\"href\"\r\n (click)=\"getClickedAction(action, $event)\"\r\n [attr.id]=\"action.id || ('actions-btn-' + action.label)\"\r\n [title]=\"action.label | translate\"\r\n >\r\n <mat-icon *ngIf=\"action.icon?.length\" class=\"action-icon\">{{ action.icon }}</mat-icon>\r\n </a>\r\n <button\r\n *ngIf=\"!resolveActionHref(action)\"\r\n type=\"button\"\r\n class=\"action-button\"\r\n (click)=\"getClickedAction(action)\"\r\n [disabled]=\"disabled\"\r\n [attr.id]=\"action.id || ('actions-btn-' + action.label)\"\r\n [title]=\"action.label | translate\"\r\n >\r\n <mat-icon *ngIf=\"action.icon?.length\" class=\"action-icon\">{{ action.icon }}</mat-icon>\r\n </button>\r\n </ng-container>\r\n </div>\r\n</ng-container>\r\n\r\n<ng-template #list_Action>\r\n <div *ngIf=\"listAction?.length > 0\">\r\n <button type=\"button\" mat-icon-button [matMenuTriggerFor]=\"menu\" (click)=\"$event.stopPropagation()\" style=\"justify-content: center; color: grey\" id=\"actions-menu-trigger\">\r\n <mat-icon>more_vert</mat-icon>\r\n </button>\r\n <mat-menu #menu=\"matMenu\">\r\n <ng-container *ngFor=\"let list_Action of listAction\">\r\n <a\r\n *ngIf=\"resolveActionHref(list_Action) as href\"\r\n mat-menu-item\r\n [href]=\"href\"\r\n (click)=\"getClickedAction(list_Action, $event)\"\r\n [attr.id]=\"list_Action.id || ('actions-menu-item-' + list_Action.label)\"\r\n >\r\n <span>{{ list_Action.label | translate }}</span>\r\n </a>\r\n <button\r\n *ngIf=\"!resolveActionHref(list_Action)\"\r\n type=\"button\"\r\n mat-menu-item\r\n (click)=\"getClickedAction(list_Action)\"\r\n [attr.id]=\"list_Action.id || ('actions-menu-item-' + list_Action.label)\"\r\n >\r\n <span>{{ list_Action.label | translate }}</span>\r\n </button>\r\n </ng-container>\r\n </mat-menu>\r\n </div>\r\n</ng-template>\r\n", styles: [".svgColor{fill:transparent!important;stroke:var(--accent-color)!important}.action-buttons-container{display:flex;flex-direction:row;gap:16px;align-items:center;padding:0}.action-button{display:flex;align-items:center;justify-content:center;height:28px;min-width:24px;background:#fff;border:1px solid #a5c4d2;border-radius:9999px;cursor:pointer;padding:0 16px;transition:all .2s ease;box-sizing:border-box;text-decoration:none;color:inherit;outline:none}.action-button:hover:not(:disabled){border-color:#8ba8b8;background:#f8fafb}.action-button:active:not(:disabled){transform:scale(.98);background:#f0f4f6}.action-button:disabled{opacity:.5;cursor:not-allowed}.action-icon{width:18px;height:18px;font-size:18px;color:#1a365d;display:flex;align-items:center;justify-content:center}.action-icon ::ng-deep svg{fill:#1a365d;stroke:#1a365d;width:18px;height:18px}.flex-row{display:flex;flex-direction:row}.flex-column{display:flex;flex-direction:column}.align-start{justify-content:flex-start;align-items:flex-start}.align-center{justify-content:center;align-items:center}.align-end{justify-content:flex-end;align-items:flex-end}.gap-0{gap:0}.gap-5{gap:5px}.gap-10{gap:10px}.padding-horizontal-10{padding-left:10px;padding-right:10px}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] }); }
|
|
240
269
|
}
|
|
241
270
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ButtonActionsComponent, decorators: [{
|
|
242
271
|
type: Component,
|
|
@@ -250,7 +279,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
250
279
|
NgClass,
|
|
251
280
|
NgForOf,
|
|
252
281
|
TranslateModule
|
|
253
|
-
], template: "<ng-container *ngIf=\"buttonsAction; else list_Action\">\r\n <div class=\"action-buttons-container\" *ngIf=\"(actions?.length ? actions : listAction)?.length > 0\">\r\n <
|
|
282
|
+
], template: "<ng-container *ngIf=\"buttonsAction; else list_Action\">\r\n <div class=\"action-buttons-container\" *ngIf=\"(actions?.length ? actions : listAction)?.length > 0\">\r\n <ng-container *ngFor=\"let action of (actions?.length ? actions : listAction); let i = index\">\r\n <a\r\n *ngIf=\"resolveActionHref(action) as href\"\r\n class=\"action-button\"\r\n [href]=\"href\"\r\n (click)=\"getClickedAction(action, $event)\"\r\n [attr.id]=\"action.id || ('actions-btn-' + action.label)\"\r\n [title]=\"action.label | translate\"\r\n >\r\n <mat-icon *ngIf=\"action.icon?.length\" class=\"action-icon\">{{ action.icon }}</mat-icon>\r\n </a>\r\n <button\r\n *ngIf=\"!resolveActionHref(action)\"\r\n type=\"button\"\r\n class=\"action-button\"\r\n (click)=\"getClickedAction(action)\"\r\n [disabled]=\"disabled\"\r\n [attr.id]=\"action.id || ('actions-btn-' + action.label)\"\r\n [title]=\"action.label | translate\"\r\n >\r\n <mat-icon *ngIf=\"action.icon?.length\" class=\"action-icon\">{{ action.icon }}</mat-icon>\r\n </button>\r\n </ng-container>\r\n </div>\r\n</ng-container>\r\n\r\n<ng-template #list_Action>\r\n <div *ngIf=\"listAction?.length > 0\">\r\n <button type=\"button\" mat-icon-button [matMenuTriggerFor]=\"menu\" (click)=\"$event.stopPropagation()\" style=\"justify-content: center; color: grey\" id=\"actions-menu-trigger\">\r\n <mat-icon>more_vert</mat-icon>\r\n </button>\r\n <mat-menu #menu=\"matMenu\">\r\n <ng-container *ngFor=\"let list_Action of listAction\">\r\n <a\r\n *ngIf=\"resolveActionHref(list_Action) as href\"\r\n mat-menu-item\r\n [href]=\"href\"\r\n (click)=\"getClickedAction(list_Action, $event)\"\r\n [attr.id]=\"list_Action.id || ('actions-menu-item-' + list_Action.label)\"\r\n >\r\n <span>{{ list_Action.label | translate }}</span>\r\n </a>\r\n <button\r\n *ngIf=\"!resolveActionHref(list_Action)\"\r\n type=\"button\"\r\n mat-menu-item\r\n (click)=\"getClickedAction(list_Action)\"\r\n [attr.id]=\"list_Action.id || ('actions-menu-item-' + list_Action.label)\"\r\n >\r\n <span>{{ list_Action.label | translate }}</span>\r\n </button>\r\n </ng-container>\r\n </mat-menu>\r\n </div>\r\n</ng-template>\r\n", styles: [".svgColor{fill:transparent!important;stroke:var(--accent-color)!important}.action-buttons-container{display:flex;flex-direction:row;gap:16px;align-items:center;padding:0}.action-button{display:flex;align-items:center;justify-content:center;height:28px;min-width:24px;background:#fff;border:1px solid #a5c4d2;border-radius:9999px;cursor:pointer;padding:0 16px;transition:all .2s ease;box-sizing:border-box;text-decoration:none;color:inherit;outline:none}.action-button:hover:not(:disabled){border-color:#8ba8b8;background:#f8fafb}.action-button:active:not(:disabled){transform:scale(.98);background:#f0f4f6}.action-button:disabled{opacity:.5;cursor:not-allowed}.action-icon{width:18px;height:18px;font-size:18px;color:#1a365d;display:flex;align-items:center;justify-content:center}.action-icon ::ng-deep svg{fill:#1a365d;stroke:#1a365d;width:18px;height:18px}.flex-row{display:flex;flex-direction:row}.flex-column{display:flex;flex-direction:column}.align-start{justify-content:flex-start;align-items:flex-start}.align-center{justify-content:center;align-items:center}.align-end{justify-content:flex-end;align-items:flex-end}.gap-0{gap:0}.gap-5{gap:5px}.gap-10{gap:10px}.padding-horizontal-10{padding-left:10px;padding-right:10px}\n"] }]
|
|
254
283
|
}], ctorParameters: () => [{ type: i1.MatDialog }], propDecorators: { actions: [{
|
|
255
284
|
type: Input
|
|
256
285
|
}], disabled: [{
|
|
@@ -261,6 +290,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
261
290
|
type: Input
|
|
262
291
|
}], listAction: [{
|
|
263
292
|
type: Input
|
|
293
|
+
}], row: [{
|
|
294
|
+
type: Input
|
|
264
295
|
}] } });
|
|
265
296
|
|
|
266
297
|
class ButtonActionSettings {
|
|
@@ -276,6 +307,7 @@ class ButtonActionSettings {
|
|
|
276
307
|
this.comment = buttonActionSettings.comment;
|
|
277
308
|
this.shareExternal = buttonActionSettings.shareExternal;
|
|
278
309
|
this.commentRequired = buttonActionSettings.commentRequired || false;
|
|
310
|
+
this.linkHref = buttonActionSettings.linkHref;
|
|
279
311
|
}
|
|
280
312
|
}
|
|
281
313
|
|
|
@@ -1975,6 +2007,7 @@ class BaseFormCanvasComponent {
|
|
|
1975
2007
|
// When true, emit formUpdated on every value change. Default is false to avoid
|
|
1976
2008
|
// noisy emissions for all consumers. Item-line-editor will enable this explicitly.
|
|
1977
2009
|
this.emitOnValueChanges = false;
|
|
2010
|
+
this.filterResetNonce = 0;
|
|
1978
2011
|
this.item = {};
|
|
1979
2012
|
this._defaults = {};
|
|
1980
2013
|
this.attachmentEmitter = new EventEmitter();
|
|
@@ -2042,7 +2075,8 @@ class BaseFormCanvasComponent {
|
|
|
2042
2075
|
this.defaults[fieldName] = this.formParam.get(fieldName).value;
|
|
2043
2076
|
}
|
|
2044
2077
|
}
|
|
2045
|
-
ngOnChanges(
|
|
2078
|
+
ngOnChanges(changes) {
|
|
2079
|
+
const { item, errors, fields, filterResetNonce } = changes;
|
|
2046
2080
|
errors?.currentValue?.forEach((msg) => {
|
|
2047
2081
|
this.formParam.get(msg.fieldName)?.setErrors({ serverError: msg.message });
|
|
2048
2082
|
});
|
|
@@ -2052,6 +2086,11 @@ class BaseFormCanvasComponent {
|
|
|
2052
2086
|
if (fields?.currentValue && !fields.isFirstChange()) {
|
|
2053
2087
|
this.buildForm();
|
|
2054
2088
|
}
|
|
2089
|
+
if (filterResetNonce &&
|
|
2090
|
+
!filterResetNonce.isFirstChange() &&
|
|
2091
|
+
filterResetNonce.currentValue !== filterResetNonce.previousValue) {
|
|
2092
|
+
this.resetFilterFormValues();
|
|
2093
|
+
}
|
|
2055
2094
|
}
|
|
2056
2095
|
showField(item, field) {
|
|
2057
2096
|
return (item.id || (!item.id && !field.updateOnly)) && field.visible;
|
|
@@ -2102,6 +2141,18 @@ class BaseFormCanvasComponent {
|
|
|
2102
2141
|
}
|
|
2103
2142
|
this.formParam.patchValue(patchValues, { emitEvent: false });
|
|
2104
2143
|
}
|
|
2144
|
+
resetFilterFormValues() {
|
|
2145
|
+
if (!this.formParam || !this.fields?.length) {
|
|
2146
|
+
return;
|
|
2147
|
+
}
|
|
2148
|
+
const empty = {};
|
|
2149
|
+
for (const field of this.fields) {
|
|
2150
|
+
if (field.type !== 'spacer') {
|
|
2151
|
+
empty[field.property] = null;
|
|
2152
|
+
}
|
|
2153
|
+
}
|
|
2154
|
+
this.formParam.patchValue(empty, { emitEvent: true });
|
|
2155
|
+
}
|
|
2105
2156
|
labelKey(column) {
|
|
2106
2157
|
const configuredKey = column.label ? column.label : column.property;
|
|
2107
2158
|
return configuredKey.startsWith(this.pageInfo.labelsSection) ? `${configuredKey}` : `${this.pageInfo.labelsSection}.${configuredKey}`;
|
|
@@ -2414,7 +2465,7 @@ class BaseFormCanvasComponent {
|
|
|
2414
2465
|
}
|
|
2415
2466
|
}
|
|
2416
2467
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BaseFormCanvasComponent, deps: [{ token: i2.TranslateService }, { token: i3$1.ActivatedRoute }, { token: BackendService }, { token: i4.FormBuilder }, { token: i5.LiveAnnouncer }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2417
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: BaseFormCanvasComponent, isStandalone: true, selector: "app-base-form-canvas", inputs: { pageInfo: { classPropertyName: "pageInfo", publicName: "pageInfo", isSignal: false, isRequired: false, transformFunction: null }, currency: { classPropertyName: "currency", publicName: "currency", isSignal: false, isRequired: false, transformFunction: null }, fields: { classPropertyName: "fields", publicName: "fields", isSignal: false, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: false, isRequired: false, transformFunction: null }, workflowEditableFields: { classPropertyName: "workflowEditableFields", publicName: "workflowEditableFields", isSignal: false, isRequired: false, transformFunction: null }, isWorkflowEditableManaged: { classPropertyName: "isWorkflowEditableManaged", publicName: "isWorkflowEditableManaged", isSignal: false, isRequired: false, transformFunction: null }, supportingAttributes: { classPropertyName: "supportingAttributes", publicName: "supportingAttributes", isSignal: false, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: false, isRequired: false, transformFunction: null }, emitOnValueChanges: { classPropertyName: "emitOnValueChanges", publicName: "emitOnValueChanges", isSignal: false, isRequired: false, transformFunction: null }, item: { classPropertyName: "item", publicName: "item", isSignal: false, isRequired: false, transformFunction: null }, equationSuggestedFields: { classPropertyName: "equationSuggestedFields", publicName: "equationSuggestedFields", isSignal: false, isRequired: false, transformFunction: null }, currentEquationValue: { classPropertyName: "currentEquationValue", publicName: "currentEquationValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { attachmentEmitter: "attachmentEmitter", actionEmitter: "actionEmitter", formUpdated: "formUpdated", hyperTextEvent: "hyperTextEvent", currentEquationValue: "currentEquationValueChange" }, providers: [
|
|
2468
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: BaseFormCanvasComponent, isStandalone: true, selector: "app-base-form-canvas", inputs: { pageInfo: { classPropertyName: "pageInfo", publicName: "pageInfo", isSignal: false, isRequired: false, transformFunction: null }, currency: { classPropertyName: "currency", publicName: "currency", isSignal: false, isRequired: false, transformFunction: null }, fields: { classPropertyName: "fields", publicName: "fields", isSignal: false, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: false, isRequired: false, transformFunction: null }, workflowEditableFields: { classPropertyName: "workflowEditableFields", publicName: "workflowEditableFields", isSignal: false, isRequired: false, transformFunction: null }, isWorkflowEditableManaged: { classPropertyName: "isWorkflowEditableManaged", publicName: "isWorkflowEditableManaged", isSignal: false, isRequired: false, transformFunction: null }, supportingAttributes: { classPropertyName: "supportingAttributes", publicName: "supportingAttributes", isSignal: false, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: false, isRequired: false, transformFunction: null }, emitOnValueChanges: { classPropertyName: "emitOnValueChanges", publicName: "emitOnValueChanges", isSignal: false, isRequired: false, transformFunction: null }, filterResetNonce: { classPropertyName: "filterResetNonce", publicName: "filterResetNonce", isSignal: false, isRequired: false, transformFunction: null }, item: { classPropertyName: "item", publicName: "item", isSignal: false, isRequired: false, transformFunction: null }, equationSuggestedFields: { classPropertyName: "equationSuggestedFields", publicName: "equationSuggestedFields", isSignal: false, isRequired: false, transformFunction: null }, currentEquationValue: { classPropertyName: "currentEquationValue", publicName: "currentEquationValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { attachmentEmitter: "attachmentEmitter", actionEmitter: "actionEmitter", formUpdated: "formUpdated", hyperTextEvent: "hyperTextEvent", currentEquationValue: "currentEquationValueChange" }, providers: [
|
|
2418
2469
|
{
|
|
2419
2470
|
provide: DateAdapter,
|
|
2420
2471
|
useClass: MomentDateAdapter,
|
|
@@ -2503,6 +2554,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
2503
2554
|
type: Input
|
|
2504
2555
|
}], emitOnValueChanges: [{
|
|
2505
2556
|
type: Input
|
|
2557
|
+
}], filterResetNonce: [{
|
|
2558
|
+
type: Input
|
|
2506
2559
|
}], item: [{
|
|
2507
2560
|
type: Input
|
|
2508
2561
|
}], attachmentEmitter: [{
|
|
@@ -2536,13 +2589,13 @@ class FieldFilterComponent {
|
|
|
2536
2589
|
});
|
|
2537
2590
|
}
|
|
2538
2591
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FieldFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2539
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FieldFilterComponent, isStandalone: true, selector: "app-field-filter", inputs: { filter: "filter", pageInfo: "pageInfo", filterFields: "filterFields", item: "item", editable: "editable", filterResetNonce: "filterResetNonce" }, outputs: { selectedValue: "selectedValue", filterFieldInformation: "filterFieldInformation" }, ngImport: i0, template: "\r\n<app-base-form-canvas\r\n [pageInfo]=\"pageInfo\"\r\n [fields]=\"filterFields\"\r\n [editable]=\"editable\"\r\n (formUpdated)=\"formChanges($event)\"\r\n>\r\n</app-base-form-canvas>\r\n", styles: [""], dependencies: [{ 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"] }] }); }
|
|
2592
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FieldFilterComponent, isStandalone: true, selector: "app-field-filter", inputs: { filter: "filter", pageInfo: "pageInfo", filterFields: "filterFields", item: "item", editable: "editable", filterResetNonce: "filterResetNonce" }, outputs: { selectedValue: "selectedValue", filterFieldInformation: "filterFieldInformation" }, ngImport: i0, template: "\r\n<app-base-form-canvas\r\n [pageInfo]=\"pageInfo\"\r\n [fields]=\"filterFields\"\r\n [editable]=\"editable\"\r\n [filterResetNonce]=\"filterResetNonce\"\r\n (formUpdated)=\"formChanges($event)\"\r\n>\r\n</app-base-form-canvas>\r\n", styles: [""], dependencies: [{ kind: "component", type: BaseFormCanvasComponent, selector: "app-base-form-canvas", inputs: ["pageInfo", "currency", "fields", "errors", "workflowEditableFields", "isWorkflowEditableManaged", "supportingAttributes", "editable", "emitOnValueChanges", "filterResetNonce", "item", "equationSuggestedFields", "currentEquationValue"], outputs: ["attachmentEmitter", "actionEmitter", "formUpdated", "hyperTextEvent", "currentEquationValueChange"] }] }); }
|
|
2540
2593
|
}
|
|
2541
2594
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FieldFilterComponent, decorators: [{
|
|
2542
2595
|
type: Component,
|
|
2543
2596
|
args: [{ selector: 'app-field-filter', standalone: true, imports: [
|
|
2544
2597
|
BaseFormCanvasComponent
|
|
2545
|
-
], template: "\r\n<app-base-form-canvas\r\n [pageInfo]=\"pageInfo\"\r\n [fields]=\"filterFields\"\r\n [editable]=\"editable\"\r\n (formUpdated)=\"formChanges($event)\"\r\n>\r\n</app-base-form-canvas>\r\n" }]
|
|
2598
|
+
], template: "\r\n<app-base-form-canvas\r\n [pageInfo]=\"pageInfo\"\r\n [fields]=\"filterFields\"\r\n [editable]=\"editable\"\r\n [filterResetNonce]=\"filterResetNonce\"\r\n (formUpdated)=\"formChanges($event)\"\r\n>\r\n</app-base-form-canvas>\r\n" }]
|
|
2546
2599
|
}], ctorParameters: () => [], propDecorators: { filter: [{
|
|
2547
2600
|
type: Input
|
|
2548
2601
|
}], pageInfo: [{
|
|
@@ -3295,6 +3348,7 @@ class BaseTableComponent extends BaseUtils {
|
|
|
3295
3348
|
if ($event) {
|
|
3296
3349
|
this.pendingFilters = [];
|
|
3297
3350
|
this.advancedAppliedFilter = [];
|
|
3351
|
+
this.searchStr = '';
|
|
3298
3352
|
this.loadData();
|
|
3299
3353
|
}
|
|
3300
3354
|
}
|
|
@@ -3342,7 +3396,7 @@ class BaseTableComponent extends BaseUtils {
|
|
|
3342
3396
|
return super.labelKeyByValue(column, row);
|
|
3343
3397
|
}
|
|
3344
3398
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BaseTableComponent, deps: [{ token: BackendService }, { token: i2.TranslateService }, { token: ShareDataService }, { token: 'securityManager' }, { token: i3$1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3345
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: BaseTableComponent, isStandalone: true, selector: "app-base-table", inputs: { filterFields: "filterFields", noDataFoundSvgPath: "noDataFoundSvgPath", noDataFoundTitle: "noDataFoundTitle", noDataFoundSubtitle: "noDataFoundSubtitle", noResultSvgPath: "noResultSvgPath", noResultTitle: "noResultTitle", noResultSubtitle: "noResultSubtitle", pageInfo: "pageInfo", enablePagination: "enablePagination", mobilePageSize: "mobilePageSize", mobileLoadMoreIncrement: "mobileLoadMoreIncrement", data: "data", listAction: "listAction", extraActions: "extraActions", buttonsDisplayMode: "buttonsDisplayMode", columns: "columns", filters: "filters", pathParam: "pathParam", extraButton: "extraButton", enforceRefresh: "enforceRefresh", isPending: "isPending", trigger: "trigger", reportRequest: "reportRequest", separateEndpointData: "separateEndpointData", manageablePages: "manageablePages", totalPagesCount: "totalPagesCount", currentPageIndex: "currentPageIndex", customizedData: "customizedData" }, outputs: { buttonClicked: "buttonClicked", pageChange: "pageChange", userAction: "userAction", hyperLinkAction: "hyperLinkAction", extraAction: "extraAction", selectedColumn: "selectedColumn", listActionClicked: "listActionClicked", showDialog: "showDialog", clickRoutePage: "clickRoutePage" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"flex-column baseTable\">\r\n <div class=\"flex-row flex-100\" >\r\n <div class=\"flex-column align-start flex-100\" style=\"width: 100%;\">\r\n <app-title-bar\r\n [pageTitle]=\"pageInfo.hideTitle ? '' : pageInfo.labelsSection+'.list_title'\"\r\n [subTitle]=\"(pageInfo.hideTitle || pageInfo.hideSubtitle) ? '' : pageInfo.labelsSection+'.subtitle'\"\r\n [titleMode]=\"''\"\r\n [pageInfo]=\"pageInfo\"\r\n [newAction]=\"showAddNew()\"\r\n [showExtractButton]=\"!pageInfo.hideExtractButton\"\r\n [draftSupported]=\"pageInfo.draftSupported\"\r\n [isPending]=\"isPending\"\r\n [onViewModeChange]=\"switchViewMode.bind(this)\"\r\n [buttons]=\"extraActions\"\r\n [buttonsDisplayMode]=\"buttonsDisplayMode\"\r\n (newActionClicked)=\"onAddNewAction($event)\"\r\n (extractReport)=\"extractReport($event)\"\r\n (viewModeChanged)=\"onViewModeChangedReceived($event)\"\r\n (buttonClicked)=\"buttonClicked.emit($event)\"\r\n [totalElements]=\"pageInfo.hideTitle ? undefined : totalElements\">\r\n </app-title-bar>\r\n </div>\r\n </div>\r\n\r\n <div class=\"filter-row\" *ngIf=\"!pageInfo.hideAdvancedFilter\">\r\n <app-filter-builder\r\n *ngIf=\"!pageInfo.hideAdvancedFilter\"\r\n [pageInfo]=\"pageInfo\"\r\n [columns]=\"columns\"\r\n [filterFields]=\"filterFields\"\r\n [pendingFilters]=\"pendingFilters\"\r\n [showExportButton]=\"!pageInfo.hideExtractButton\"\r\n (filterInformation)=\"storePendingFilters($event)\"\r\n (isEmpty)=\"handleFilterEmpty($event)\"\r\n (applyFilter)=\"applyPendingFilters()\"\r\n (sortByClicked)=\"handleSortClick($event)\"\r\n (exportClicked)=\"extractReport($event)\">\r\n </app-filter-builder>\r\n\r\n <div class=\"button-group\" *ngIf=\"!pageInfo.hideExtractButton\">\r\n <button *ngIf=\"!pageInfo.hideExtractButton\"\r\n mat-flat-button\r\n [matMenuTriggerFor]=\"exportMenu\"\r\n class=\"btn-export\"\r\n >\r\n <div class=\"button-text\">\r\n <mat-icon>file_export</mat-icon>\r\n <span>{{ 'export' | translate }}</span>\r\n <mat-icon class=\"arrow-icon\">keyboard_arrow_down</mat-icon>\r\n </div>\r\n </button>\r\n\r\n <mat-menu #exportMenu=\"matMenu\">\r\n <button mat-menu-item (click)=\"extractReport('pdf')\">PDF</button>\r\n <button mat-menu-item (click)=\"extractReport('xlsx')\">Excel</button>\r\n <button mat-menu-item (click)=\"extractReport('csv')\">CSV</button>\r\n </mat-menu>\r\n\r\n </div>\r\n </div>\r\n\r\n\r\n <div class=\"flex-row flex-100 baseTable__detailsColumn\">\r\n <div class=\"flex-100\">\r\n <div class=\"flex-row flex-100 mainTable\">\r\n <div class=\"table-container\">\r\n <div class=\"table-header\" [attr.data-sort]=\"sortState\">\r\n <div *ngFor=\"let columnProp of visibleColumnsArray; let i = index\"\r\n class=\"table-header-cell\"\r\n [class.sortable]=\"getColumn(columnProp)?.enableSorting\"\r\n [class.first-cell]=\"i === 0\"\r\n [class.last-cell]=\"i === visibleColumnsArray.length - 1\"\r\n [class.actions-cell]=\"i === visibleColumnsArray.length - 1 && columnProp === 'actions'\"\r\n [class.has-width]=\"getColumn(columnProp)?.width\"\r\n [ngStyle]=\"getColumn(columnProp)?.width ? {'width': getColumn(columnProp)?.width + '%', 'flex-basis': getColumn(columnProp)?.width + '%'} : {}\"\r\n (click)=\"getColumn(columnProp)?.enableSorting && handleSortClick(columnProp)\">\r\n <div class=\"table-header-content\">\r\n <span class=\"table-header-label\">{{ labelKey(getColumn(columnProp)) | translate }}</span>\r\n <ng-container *ngIf=\"getColumn(columnProp)?.enableSorting\">\r\n <mat-icon *ngIf=\"getSortDirection(columnProp) === 'asc'\"\r\n class=\"sort-icon sort-asc\">arrow_drop_up</mat-icon>\r\n <mat-icon *ngIf=\"getSortDirection(columnProp) === 'desc'\"\r\n class=\"sort-icon sort-desc\">arrow_drop_down</mat-icon>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"table-body\">\r\n <div *ngFor=\"let row of dataSource.data; let rowIndex = index\"\r\n class=\"table-row\"\r\n [attr.id]=\"'table-row-' + (row?.id || row?.key || '')\"\r\n [ngClass]=\"{\r\n 'table-row--highlight': selectedRowIndex == row.id || (pageInfo.groupByProperty && pageInfo.groupByValue?.includes(row[pageInfo.groupByProperty])),\r\n 'table-row--dark-highlight': isDarkHighlight(row)\r\n }\"\r\n (auxclick)=\"openNewTab(row)\"\r\n (click)=\"$event.stopPropagation(); onSelectItem(row)\">\r\n <div *ngFor=\"let columnProp of visibleColumnsArray; let i = index\"\r\n class=\"table-cell\"\r\n [class.first-cell]=\"i === 0\"\r\n [class.last-cell]=\"i === visibleColumnsArray.length - 1\"\r\n [class.actions-cell]=\"i === visibleColumnsArray.length - 1 && columnProp === 'actions'\"\r\n [class.has-width]=\"getColumn(columnProp)?.width\"\r\n [ngStyle]=\"getColumn(columnProp)?.width ? {'width': getColumn(columnProp)?.width + '%', 'flex-basis': getColumn(columnProp)?.width + '%'} : {}\">\r\n <ng-container [ngSwitch]=\"getColumn(columnProp)?.type\">\r\n <ng-container *ngSwitchCase=\"'workflowStatus'\">\r\n <button mat-button class=\"wfStatus {{ getStatusDescription(row)}}\" [attr.id]=\"'table-btn-wf-'+columnProp+'-'+(row.id || row.key || '')\">{{ getStatusDescription(row) }}</button>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'hyper-text'\">\r\n <mat-label (click)=\"hyperLinkClicked(columnProp, row)\" [ngClass]=\"{'hyper-link': shouldRenderAsHyperLink(row)}\">\r\n {{ extractFieldName(row, columnProp) }}\r\n </mat-label>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'button'\">\r\n <button *ngIf=\"shouldShowButton(row)\" mat-button class=\"primary\" (click)=\"$event.stopPropagation(); actionButtonClicked(columnProp, row)\" [attr.id]=\"'table-btn-action-'+columnProp\">\r\n {{ labelKey(getColumn(columnProp)) + '_title' | translate }}\r\n </button>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'icon'\">\r\n <mat-icon [ngClass]=\"{\r\n 'mainTable__td__icon-green': row[columnProp] === 'pass',\r\n 'mainTable__td__icon-orange': row[columnProp] === 'warning',\r\n 'mainTable__td__icon-red': row[columnProp] === 'error'\r\n }\">\r\n {{ getIcon(row[columnProp]) }}\r\n </mat-icon>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'checkbox'\">\r\n <mat-checkbox class=\"primary\" [checked]=\"row[columnProp]\" (click)=\"$event.stopPropagation();actionCheckedClicked(columnProp,row)\"></mat-checkbox>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'stateType'\">\r\n <button mat-button class=\"stateType {{ row[columnProp]}}\" [attr.id]=\"'table-btn-state-'+columnProp\">{{ labelKeyByValue(getColumn(columnProp), row) | translate}}</button>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'date'\">\r\n {{ extractFieldName(row, columnProp) | date:'dd/MM/yyyy' }}\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'croppedText'\">\r\n {{ getCroppedText(row[columnProp], row[getColumn(columnProp)?.width]) }}\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'download'\">\r\n <mat-icon class=\"mainTable__td__icon-blue\">system_update_alt</mat-icon>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'onOff'\">\r\n <mat-icon *ngIf=\"row[columnProp] === null\" class=\"mainTable__td__icon-darkorange\">flag</mat-icon>\r\n <mat-icon *ngIf=\"row[columnProp] === false\" class=\"mainTable__td__icon-red\">flag</mat-icon>\r\n <mat-icon *ngIf=\"row[columnProp] === true\" class=\"mainTable__td__icon-green\">flag</mat-icon>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'status'\">\r\n <span *ngIf=\"row[columnProp] === null || row[columnProp] === false\">\r\n {{ pageInfo.labelsSection + '.' + getColumn(columnProp)?.label + 'InActive' | translate }}\r\n </span>\r\n <span *ngIf=\"row[columnProp] === true\">\r\n {{ pageInfo.labelsSection + '.' + getColumn(columnProp)?.label + 'Active' | translate }}\r\n </span>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'info'\">\r\n <button mat-icon-button (click)=\"$event.stopPropagation();emitEvent(row)\" [attr.id]=\"'table-btn-info-'+row.id\">\r\n <mat-icon>info</mat-icon>\r\n </button>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'netAmount'\">\r\n <div class=\"mainTable__td__currency\" style=\"display:inline-block;\">{{ row[getColumn(columnProp)?.currency] }}</div>\r\n <span class=\"mainTable__td__property\" style=\"display:inline-block; margin-left:6px; margin-right:6px;\">\r\n {{ extractFieldName(row, columnProp) | currency:'':'' }}</span>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'localDateTime'\">\r\n {{ extractFieldName(row, columnProp) | date : extractFormat(getColumn(columnProp)) }}\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'bigdecimal'\">\r\n <small><sup class=\"mainTable__td__currency\">{{row[getColumn(columnProp)?.currency]}}</sup></small>\r\n {{ extractFieldName(row, columnProp) | number : (getColumn(columnProp)?.digitInfo || '1.3-5') }}\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'listAction'\">\r\n <app-button-actions\r\n [buttonsAction]=\"getColumn(columnProp)?.viewType === 'buttonsAction'\"\r\n [listAction]=\"listAction\"\r\n [actions]=\"listAction\"\r\n (clickedButton)=\"actionListClicked($event,row)\">\r\n </app-button-actions>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchDefault>\r\n <ng-container *ngIf=\"getColumn(columnProp)?.translate; else noTranslate\">\r\n <span (click)=\"emitRoutePage(row)\">\r\n {{ pageInfo.labelsSection + \".\" + extractFieldName(row, columnProp) | translate }}\r\n </span>\r\n </ng-container>\r\n <ng-template #noTranslate>\r\n <span (click)=\"emitRoutePage(row)\" [innerHtml]='extractFieldName(row, columnProp)'></span>\r\n </ng-template>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Mobile Card View -->\r\n <div class=\"mobile-cards-container\">\r\n <div *ngFor=\"let row of dataSource.data; let rowIndex = index\"\r\n class=\"mobile-card\"\r\n [attr.id]=\"'mobile-card-' + (row?.id || row?.key || '')\"\r\n [ngClass]=\"{\r\n 'mobile-card--highlight': selectedRowIndex == row.id || (pageInfo.groupByProperty && pageInfo.groupByValue?.includes(row[pageInfo.groupByProperty])),\r\n 'mobile-card--dark-highlight': isDarkHighlight(row)\r\n }\"\r\n (auxclick)=\"openNewTab(row)\"\r\n (click)=\"$event.stopPropagation(); onSelectItem(row)\">\r\n \r\n <!-- Mobile Card Header: ID/Name and Status -->\r\n <div class=\"mobile-card__header\">\r\n <div class=\"mobile-card__header-id\">\r\n <span class=\"mobile-card__id-text\">{{ extractFieldName(row, getMobileCardIdColumn()?.property || 'id') }}</span>\r\n </div>\r\n <div class=\"mobile-card__header-status\" *ngIf=\"getMobileCardStatusColumn()\">\r\n <button mat-button class=\"stateType {{ row[getMobileCardStatusColumn()?.property]}}\" \r\n [attr.id]=\"'mobile-btn-state-'+getMobileCardStatusColumn()?.property\">\r\n {{ labelKeyByValue(getMobileCardStatusColumn(), row) | translate}}\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <!-- Divider -->\r\n <div class=\"mobile-card__divider\"></div>\r\n\r\n <!-- Mobile Card Body: Other columns -->\r\n <div class=\"mobile-card__body\">\r\n <div *ngFor=\"let column of getMobileCardColumns()\" class=\"mobile-card__row\">\r\n <div class=\"mobile-card__row-label\">\r\n <span>{{ labelKey(column) | translate }} :</span>\r\n </div>\r\n <div class=\"mobile-card__row-value\">\r\n <ng-container [ngSwitch]=\"column.type\">\r\n <ng-container *ngSwitchCase=\"'stateType'\">\r\n <button mat-button class=\"stateType {{ row[column.property]}}\" \r\n [attr.id]=\"'mobile-btn-state-'+column.property\">\r\n {{ labelKeyByValue(column, row) | translate}}\r\n </button>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'date'\">\r\n {{ extractFieldName(row, column.property) | date:'dd/MM/yyyy' }}\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'netAmount'\">\r\n <span class=\"mobile-card__amount-currency\">{{ row[column.currency] }}</span>\r\n <span class=\"mobile-card__amount-value\">{{ extractFieldName(row, column.property) | currency:'':'' }}</span>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'localDateTime'\">\r\n {{ extractFieldName(row, column.property) | date : extractFormat(column) }}\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'bigdecimal'\">\r\n <small><sup class=\"mainTable__td__currency\">{{row[column.currency]}}</sup></small>\r\n {{ extractFieldName(row, column.property) | number : (column.digitInfo || '1.3-5') }}\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchDefault>\r\n <ng-container *ngIf=\"column.translate; else noTranslate\">\r\n <span>{{ pageInfo.labelsSection + \".\" + extractFieldName(row, column.property) | translate }}</span>\r\n </ng-container>\r\n <ng-template #noTranslate>\r\n <span [innerHtml]='extractFieldName(row, column.property)'></span>\r\n </ng-template>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Mobile Card Actions -->\r\n <div class=\"mobile-card__actions\" *ngIf=\"listAction && listAction.length > 0\">\r\n <app-button-actions\r\n [buttonsAction]=\"true\"\r\n [listAction]=\"listAction\"\r\n [actions]=\"listAction\"\r\n (clickedButton)=\"actionListClicked($event,row)\">\r\n </app-button-actions>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"noDataFound\" class=\"dataNotFound flex-column\">\r\n <img *ngIf=\"getDisplaySvgPath()\" [src]=\"getDisplaySvgPath()\" class=\"dataNotFound__icon\" alt=\"No data found\" />\r\n <span class=\"dataNotFound__title\">{{ getDisplayTitle() | translate}}</span>\r\n <span class=\"dataNotFound__subtitle\">{{ getDisplaySubtitle() | translate}}</span>\r\n </div>\r\n\r\n\r\n <div *ngIf=\"(dataSource.data?.length > 0 || customizedData) && !pageInfo.hidePagination\" class=\"main-pagination flex-row\">\r\n <ng-container *ngIf=\"enablePagination\">\r\n <div class=\"flex-column flex-100\">\r\n <app-paginator\r\n [currentPage]=\"pageIndex\"\r\n [totalItems]=\"totalElements\"\r\n [pageSize]=\"pageSize\"\r\n [pageSizeOptions]=\"[5, 10, 25, 50]\"\r\n [mobileLoadMoreIncrement]=\"mobileLoadMoreIncrement\"\r\n [displayedItems]=\"mobileDisplayedItems || dataSource.data.length\"\r\n (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"\r\n (loadMore)=\"onLoadMore($event)\">\r\n </app-paginator>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [":host{display:block;width:100%;max-width:100%;box-sizing:border-box}.baseTable{width:100%!important;max-width:100%!important;box-sizing:border-box}.flex-row{display:flex;flex-direction:row}.flex-column{display:flex;flex-direction:column;width:100%;max-width:100%;box-sizing:border-box}.flex-100{flex:1 1 100%}.flex-49{flex:0 0 49%}.flex-50{flex:0 0 50%}.align-start{justify-content:flex-start;align-items:flex-start}.align-center{justify-content:center;align-items:center}.align-end{justify-content:flex-end;align-items:flex-end}.gap-0{gap:0}.gap-5{gap:5px}.gap-10{gap:10px}.dataNotFound{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;text-align:center;margin-top:80px}.dataNotFound__icon{height:auto;width:auto;max-width:200px;max-height:200px;margin-bottom:8px;object-fit:contain}.dataNotFound__title{color:#6a6a6a;font-size:20px;font-weight:700;margin-bottom:4px}.dataNotFound__subtitle{color:#6a6a6a;font-size:20px;font-weight:400}@media (max-width: 960px){.flex-column-sm{flex-direction:column}.align-center-sm{justify-content:center;align-items:flex-start}}.filter-row{display:flex!important;flex-direction:row!important;align-items:center!important;width:100%!important;max-width:100%!important;gap:16px!important;box-sizing:border-box;margin-top:20px;margin-bottom:16px;padding:0;flex-wrap:nowrap!important;min-width:0!important;min-height:48px!important;overflow:visible!important}.filter-row app-filter-builder{flex:1 1 auto!important;min-width:0!important;max-width:none!important;width:auto!important;flex-shrink:1!important;display:flex!important;align-items:center!important;overflow:visible!important}.button-group{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-end;gap:8px!important;flex-shrink:0!important;flex-grow:0!important;flex-basis:auto!important;height:46px!important;white-space:nowrap!important;z-index:1!important}.mainTable{margin-top:0!important}.btn-apply-filter{background:#fff!important;border:1px solid #3e627b!important;border-radius:8px!important;height:46px!important;min-width:120px!important;padding:0 16px!important;box-shadow:none!important}.btn-apply-filter .button-text{display:flex;align-items:center;justify-content:center;gap:4px;width:100%}.btn-apply-filter mat-icon{font-size:24px;width:24px;height:30px;color:#0d4261}.btn-apply-filter span{font-family:Lusail,sans-serif;font-weight:500;font-size:16px;line-height:1.2;color:#0d4261;white-space:nowrap}.btn-apply-filter:hover{background:#fafafa!important}.btn-export{background:#fff!important;border:1px solid #0d4261!important;border-radius:8px!important;height:46px!important;min-width:109px!important;padding:0 16px!important;box-shadow:none!important;margin-bottom:7px!important}.btn-export .button-text{display:flex;align-items:center;justify-content:center;gap:4px;width:100%}.btn-export mat-icon{font-size:24px;width:24px;height:30px;color:#0d4261}.btn-export .arrow-icon{font-size:16px;width:16px;height:16px;margin-left:0}.btn-export span{font-family:Lusail,sans-serif;font-weight:500;font-size:16px;line-height:1.2;color:#0d4261;white-space:nowrap}.btn-export:hover{background:#fafafa!important}.arrow-icon{font-size:16px;width:16px;height:16px}@media (max-width: 1024px){.button-group{width:auto}}@media (max-width: 768px){.filter-row{flex-direction:column;align-items:stretch}.button-group{display:none!important}.btn-export{width:100%}}.table-container{width:100%;overflow:hidden;background:#f7f7f7;box-sizing:border-box;display:flex;flex-direction:column}.table-header{display:flex;align-items:center;background:#f7f7f7;border:1px solid #f0eeee;max-height:48px;height:48px;margin-bottom:16px;border-radius:8px;overflow:hidden;width:100%;box-sizing:border-box;min-width:0}.table-header-cell{display:flex;align-items:center;max-height:48px;height:48px;padding:8px 16px;flex:1;min-width:100px;position:sticky;top:0;background:none;z-index:10;box-sizing:border-box}.table-header-cell.has-width{flex:0 0 auto!important;min-width:0!important;max-width:none!important}.table-header-cell:last-child{border-right:none}.table-header-cell.first-cell{border-top-left-radius:8px;border-bottom-left-radius:8px}.table-header-cell.last-cell{border-top-right-radius:8px;border-bottom-right-radius:8px}.table-header-cell.actions-cell{justify-content:center;text-align:center}.table-header-cell.actions-cell .table-header-content{justify-content:center}.table-header-cell.sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.table-header-cell.sortable:hover{background:#fafafa}.table-header-content{display:flex;align-items:center;gap:8px;width:100%}.table-header-label{font-family:Lusail,sans-serif;font-weight:500;font-size:16px;line-height:1.2;color:#0d4261;white-space:nowrap}.sort-icon{font-size:18px;width:18px;height:18px;color:#5c5c5c;display:flex;align-items:center;justify-content:center;transition:color .2s}.sort-icon.sort-asc,.sort-icon.sort-desc{color:#0d4261}.table-body{display:flex;flex-direction:column;gap:8px;background:#f7f7f7}.table-row{display:flex;align-items:center;min-height:48px;background:#fff;border-bottom:1px solid #f0eeee;cursor:pointer;transition:background-color .2s;border-radius:8px;overflow:hidden;width:100%;box-sizing:border-box;min-width:0}.table-row:hover{background:#fafafa}.table-row--highlight{background:#f0f8ff}.table-row--dark-highlight{background:#e8f4f8}.table-row .table-cell.first-cell{border-top-left-radius:8px;border-bottom-left-radius:8px}.table-row .table-cell.last-cell{border-top-right-radius:8px;border-bottom-right-radius:8px}.table-cell{display:flex;align-items:center;min-height:48px;max-height:48px;padding:8px 16px;flex:1;min-width:100px;font-family:Lusail,sans-serif;font-weight:400;font-size:16px;line-height:1.2;color:#000;box-sizing:border-box}.table-cell.has-width{flex:0 0 auto!important;min-width:0!important;max-width:none!important}.table-cell:last-child{border-right:none}.table-cell.actions-cell{justify-content:center;text-align:center}.mobile-cards-container{display:none;flex-direction:column;gap:12px;width:100%;box-sizing:border-box}.mobile-card{background:#fff;border:1px solid #f0eeee;border-radius:8px;padding:12px 20px;display:flex;flex-direction:column;gap:4px;cursor:pointer;transition:background-color .2s;box-sizing:border-box;width:100%}.mobile-card:hover{background:#fafafa}.mobile-card--highlight{background:#f0f8ff}.mobile-card--dark-highlight{background:#e8f4f8}.mobile-card__header{display:flex;align-items:center;justify-content:space-between;height:48px;width:100%;box-sizing:border-box}.mobile-card__header-id{display:flex;flex-direction:column;justify-content:center;flex:1}.mobile-card__id-text{font-family:Lusail,sans-serif;font-weight:700;font-size:14px;line-height:1.2;color:#222;text-align:left;white-space:nowrap}.mobile-card__header-status{display:flex;align-items:center;justify-content:flex-end;flex-shrink:0}.mobile-card__divider{height:.347px;width:100%;background:#f0eeee;margin:0;flex-shrink:0}.mobile-card__body{display:flex;flex-direction:column;gap:0;width:100%;box-sizing:border-box}.mobile-card__row{display:flex;align-items:center;justify-content:space-between;height:40px;width:100%;overflow:hidden;box-sizing:border-box}.mobile-card__row-label{display:flex;flex-direction:column;justify-content:center;flex-shrink:0}.mobile-card__row-label span{font-family:Lusail,sans-serif;font-weight:400;font-size:14px;line-height:1.2;color:#222;white-space:nowrap}.mobile-card__row-value{display:flex;flex-direction:column;justify-content:center;flex-shrink:0;text-align:right}.mobile-card__row-value span{font-family:Lusail,sans-serif;font-weight:400;font-size:14px;line-height:1.2;color:#222;white-space:nowrap}.mobile-card__amount-currency{font-family:Lusail,sans-serif;font-weight:400;font-size:14px;line-height:1.2;color:#222;display:inline-block}.mobile-card__amount-value{font-family:Lusail,sans-serif;font-weight:700;font-size:14px;line-height:1.2;color:#222;display:inline-block;margin-left:6px;margin-right:6px}.mobile-card__actions{border-top:1px solid #f0eeee;padding-top:8px;margin-top:4px;display:flex;align-items:center;justify-content:center;min-height:48px;max-height:48px;width:100%;box-sizing:border-box}@media (max-width: 768px){.table-container{display:none}.mobile-cards-container{display:flex}}@media (min-width: 769px){.mobile-cards-container{display:none}.table-container{display:flex}}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5$1.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i5$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "ngmodule", type: NgxPaginationModule }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ButtonActionsComponent, selector: "app-button-actions", inputs: ["actions", "disabled", "buttonsAction", "listAction"], outputs: ["clickedButton"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: TitleBarComponent, selector: "app-title-bar", inputs: ["pageTitle", "showExtractButton", "totalElements", "titleMode", "pageInfo", "subTitle", "statusDesc", "newAction", "extraButton", "showDetails", "showImport", "showButton", "extraData", "titleCorporateAdmin", "hideBackButton", "buttons", "buttonsDisplayMode", "draftSupported", "isPending", "onViewModeChange"], outputs: ["newActionClicked", "extraButtonClicked", "extractReport", "buttonClicked", "viewModeChanged"] }, { kind: "component", type: PaginatorComponent, selector: "app-paginator", inputs: ["currentPage", "totalItems", "pageSize", "pageSizeOptions", "mobileLoadMoreIncrement", "displayedItems"], outputs: ["pageChange", "pageSizeChange", "loadMore"] }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: FilterBuilderComponent, selector: "app-filter-builder", inputs: ["columns", "isChecked", "filterFields", "pageInfo", "pendingFilters", "showExportButton"], outputs: ["filterInformation", "isEmpty", "applyFilter", "sortByClicked", "exportClicked"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }], animations: [] }); }
|
|
3399
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: BaseTableComponent, isStandalone: true, selector: "app-base-table", inputs: { filterFields: "filterFields", noDataFoundSvgPath: "noDataFoundSvgPath", noDataFoundTitle: "noDataFoundTitle", noDataFoundSubtitle: "noDataFoundSubtitle", noResultSvgPath: "noResultSvgPath", noResultTitle: "noResultTitle", noResultSubtitle: "noResultSubtitle", pageInfo: "pageInfo", enablePagination: "enablePagination", mobilePageSize: "mobilePageSize", mobileLoadMoreIncrement: "mobileLoadMoreIncrement", data: "data", listAction: "listAction", extraActions: "extraActions", buttonsDisplayMode: "buttonsDisplayMode", columns: "columns", filters: "filters", pathParam: "pathParam", extraButton: "extraButton", enforceRefresh: "enforceRefresh", isPending: "isPending", trigger: "trigger", reportRequest: "reportRequest", separateEndpointData: "separateEndpointData", manageablePages: "manageablePages", totalPagesCount: "totalPagesCount", currentPageIndex: "currentPageIndex", customizedData: "customizedData" }, outputs: { buttonClicked: "buttonClicked", pageChange: "pageChange", userAction: "userAction", hyperLinkAction: "hyperLinkAction", extraAction: "extraAction", selectedColumn: "selectedColumn", listActionClicked: "listActionClicked", showDialog: "showDialog", clickRoutePage: "clickRoutePage" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"flex-column baseTable\">\r\n <div class=\"flex-row flex-100\" >\r\n <div class=\"flex-column align-start flex-100\" style=\"width: 100%;\">\r\n <app-title-bar\r\n [pageTitle]=\"pageInfo.hideTitle ? '' : pageInfo.labelsSection+'.list_title'\"\r\n [subTitle]=\"(pageInfo.hideTitle || pageInfo.hideSubtitle) ? '' : pageInfo.labelsSection+'.subtitle'\"\r\n [titleMode]=\"''\"\r\n [pageInfo]=\"pageInfo\"\r\n [newAction]=\"showAddNew()\"\r\n [showExtractButton]=\"!pageInfo.hideExtractButton\"\r\n [draftSupported]=\"pageInfo.draftSupported\"\r\n [isPending]=\"isPending\"\r\n [onViewModeChange]=\"switchViewMode.bind(this)\"\r\n [buttons]=\"extraActions\"\r\n [buttonsDisplayMode]=\"buttonsDisplayMode\"\r\n (newActionClicked)=\"onAddNewAction($event)\"\r\n (extractReport)=\"extractReport($event)\"\r\n (viewModeChanged)=\"onViewModeChangedReceived($event)\"\r\n (buttonClicked)=\"buttonClicked.emit($event)\"\r\n [totalElements]=\"pageInfo.hideTitle ? undefined : totalElements\">\r\n </app-title-bar>\r\n </div>\r\n </div>\r\n\r\n <div class=\"filter-row\" *ngIf=\"!pageInfo.hideAdvancedFilter\">\r\n <app-filter-builder\r\n *ngIf=\"!pageInfo.hideAdvancedFilter\"\r\n [pageInfo]=\"pageInfo\"\r\n [columns]=\"columns\"\r\n [filterFields]=\"filterFields\"\r\n [pendingFilters]=\"pendingFilters\"\r\n [showExportButton]=\"!pageInfo.hideExtractButton\"\r\n (filterInformation)=\"storePendingFilters($event)\"\r\n (isEmpty)=\"handleFilterEmpty($event)\"\r\n (applyFilter)=\"applyPendingFilters()\"\r\n (sortByClicked)=\"handleSortClick($event)\"\r\n (exportClicked)=\"extractReport($event)\">\r\n </app-filter-builder>\r\n\r\n <div class=\"button-group\" *ngIf=\"!pageInfo.hideExtractButton\">\r\n <button *ngIf=\"!pageInfo.hideExtractButton\"\r\n mat-flat-button\r\n [matMenuTriggerFor]=\"exportMenu\"\r\n class=\"btn-export\"\r\n >\r\n <div class=\"button-text\">\r\n <mat-icon>file_export</mat-icon>\r\n <span>{{ 'export' | translate }}</span>\r\n <mat-icon class=\"arrow-icon\">keyboard_arrow_down</mat-icon>\r\n </div>\r\n </button>\r\n\r\n <mat-menu #exportMenu=\"matMenu\">\r\n <button mat-menu-item (click)=\"extractReport('pdf')\">PDF</button>\r\n <button mat-menu-item (click)=\"extractReport('xlsx')\">Excel</button>\r\n <button mat-menu-item (click)=\"extractReport('csv')\">CSV</button>\r\n </mat-menu>\r\n\r\n </div>\r\n </div>\r\n\r\n\r\n <div class=\"flex-row flex-100 baseTable__detailsColumn\">\r\n <div class=\"flex-100\">\r\n <div class=\"flex-row flex-100 mainTable\">\r\n <div class=\"table-container\">\r\n <div class=\"table-header\" [attr.data-sort]=\"sortState\">\r\n <div *ngFor=\"let columnProp of visibleColumnsArray; let i = index\"\r\n class=\"table-header-cell\"\r\n [class.sortable]=\"getColumn(columnProp)?.enableSorting\"\r\n [class.first-cell]=\"i === 0\"\r\n [class.last-cell]=\"i === visibleColumnsArray.length - 1\"\r\n [class.actions-cell]=\"i === visibleColumnsArray.length - 1 && columnProp === 'actions'\"\r\n [class.has-width]=\"getColumn(columnProp)?.width\"\r\n [ngStyle]=\"getColumn(columnProp)?.width ? {'width': getColumn(columnProp)?.width + '%', 'flex-basis': getColumn(columnProp)?.width + '%'} : {}\"\r\n (click)=\"getColumn(columnProp)?.enableSorting && handleSortClick(columnProp)\">\r\n <div class=\"table-header-content\">\r\n <span class=\"table-header-label\">{{ labelKey(getColumn(columnProp)) | translate }}</span>\r\n <ng-container *ngIf=\"getColumn(columnProp)?.enableSorting\">\r\n <mat-icon *ngIf=\"getSortDirection(columnProp) === 'asc'\"\r\n class=\"sort-icon sort-asc\">arrow_drop_up</mat-icon>\r\n <mat-icon *ngIf=\"getSortDirection(columnProp) === 'desc'\"\r\n class=\"sort-icon sort-desc\">arrow_drop_down</mat-icon>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"table-body\">\r\n <div *ngFor=\"let row of dataSource.data; let rowIndex = index\"\r\n class=\"table-row\"\r\n [attr.id]=\"'table-row-' + (row?.id || row?.key || '')\"\r\n [ngClass]=\"{\r\n 'table-row--highlight': selectedRowIndex == row.id || (pageInfo.groupByProperty && pageInfo.groupByValue?.includes(row[pageInfo.groupByProperty])),\r\n 'table-row--dark-highlight': isDarkHighlight(row)\r\n }\"\r\n (auxclick)=\"openNewTab(row)\"\r\n (click)=\"$event.stopPropagation(); onSelectItem(row)\">\r\n <div *ngFor=\"let columnProp of visibleColumnsArray; let i = index\"\r\n class=\"table-cell\"\r\n [class.first-cell]=\"i === 0\"\r\n [class.last-cell]=\"i === visibleColumnsArray.length - 1\"\r\n [class.actions-cell]=\"i === visibleColumnsArray.length - 1 && columnProp === 'actions'\"\r\n [class.has-width]=\"getColumn(columnProp)?.width\"\r\n [ngStyle]=\"getColumn(columnProp)?.width ? {'width': getColumn(columnProp)?.width + '%', 'flex-basis': getColumn(columnProp)?.width + '%'} : {}\">\r\n <ng-container [ngSwitch]=\"getColumn(columnProp)?.type\">\r\n <ng-container *ngSwitchCase=\"'workflowStatus'\">\r\n <button mat-button class=\"wfStatus {{ getStatusDescription(row)}}\" [attr.id]=\"'table-btn-wf-'+columnProp+'-'+(row.id || row.key || '')\">{{ getStatusDescription(row) }}</button>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'hyper-text'\">\r\n <mat-label (click)=\"hyperLinkClicked(columnProp, row)\" [ngClass]=\"{'hyper-link': shouldRenderAsHyperLink(row)}\">\r\n {{ extractFieldName(row, columnProp) }}\r\n </mat-label>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'button'\">\r\n <button *ngIf=\"shouldShowButton(row)\" mat-button class=\"primary\" (click)=\"$event.stopPropagation(); actionButtonClicked(columnProp, row)\" [attr.id]=\"'table-btn-action-'+columnProp\">\r\n {{ labelKey(getColumn(columnProp)) + '_title' | translate }}\r\n </button>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'icon'\">\r\n <mat-icon [ngClass]=\"{\r\n 'mainTable__td__icon-green': row[columnProp] === 'pass',\r\n 'mainTable__td__icon-orange': row[columnProp] === 'warning',\r\n 'mainTable__td__icon-red': row[columnProp] === 'error'\r\n }\">\r\n {{ getIcon(row[columnProp]) }}\r\n </mat-icon>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'checkbox'\">\r\n <mat-checkbox class=\"primary\" [checked]=\"row[columnProp]\" (click)=\"$event.stopPropagation();actionCheckedClicked(columnProp,row)\"></mat-checkbox>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'stateType'\">\r\n <button mat-button class=\"stateType {{ row[columnProp]}}\" [attr.id]=\"'table-btn-state-'+columnProp\">{{ labelKeyByValue(getColumn(columnProp), row) | translate}}</button>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'date'\">\r\n {{ extractFieldName(row, columnProp) | date:'dd/MM/yyyy' }}\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'croppedText'\">\r\n {{ getCroppedText(row[columnProp], row[getColumn(columnProp)?.width]) }}\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'download'\">\r\n <mat-icon class=\"mainTable__td__icon-blue\">system_update_alt</mat-icon>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'onOff'\">\r\n <mat-icon *ngIf=\"row[columnProp] === null\" class=\"mainTable__td__icon-darkorange\">flag</mat-icon>\r\n <mat-icon *ngIf=\"row[columnProp] === false\" class=\"mainTable__td__icon-red\">flag</mat-icon>\r\n <mat-icon *ngIf=\"row[columnProp] === true\" class=\"mainTable__td__icon-green\">flag</mat-icon>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'status'\">\r\n <span *ngIf=\"row[columnProp] === null || row[columnProp] === false\">\r\n {{ pageInfo.labelsSection + '.' + getColumn(columnProp)?.label + 'InActive' | translate }}\r\n </span>\r\n <span *ngIf=\"row[columnProp] === true\">\r\n {{ pageInfo.labelsSection + '.' + getColumn(columnProp)?.label + 'Active' | translate }}\r\n </span>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'info'\">\r\n <button mat-icon-button (click)=\"$event.stopPropagation();emitEvent(row)\" [attr.id]=\"'table-btn-info-'+row.id\">\r\n <mat-icon>info</mat-icon>\r\n </button>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'netAmount'\">\r\n <div class=\"mainTable__td__currency\" style=\"display:inline-block;\">{{ row[getColumn(columnProp)?.currency] }}</div>\r\n <span class=\"mainTable__td__property\" style=\"display:inline-block; margin-left:6px; margin-right:6px;\">\r\n {{ extractFieldName(row, columnProp) | currency:'':'' }}</span>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'localDateTime'\">\r\n {{ extractFieldName(row, columnProp) | date : extractFormat(getColumn(columnProp)) }}\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'bigdecimal'\">\r\n <small><sup class=\"mainTable__td__currency\">{{row[getColumn(columnProp)?.currency]}}</sup></small>\r\n {{ extractFieldName(row, columnProp) | number : (getColumn(columnProp)?.digitInfo || '1.3-5') }}\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'listAction'\">\r\n <app-button-actions\r\n [row]=\"row\"\r\n [buttonsAction]=\"getColumn(columnProp)?.viewType === 'buttonsAction'\"\r\n [listAction]=\"listAction\"\r\n [actions]=\"listAction\"\r\n (clickedButton)=\"actionListClicked($event,row)\">\r\n </app-button-actions>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchDefault>\r\n <ng-container *ngIf=\"getColumn(columnProp)?.translate; else noTranslate\">\r\n <span (click)=\"emitRoutePage(row)\">\r\n {{ pageInfo.labelsSection + \".\" + extractFieldName(row, columnProp) | translate }}\r\n </span>\r\n </ng-container>\r\n <ng-template #noTranslate>\r\n <span (click)=\"emitRoutePage(row)\" [innerHtml]='extractFieldName(row, columnProp)'></span>\r\n </ng-template>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Mobile Card View -->\r\n <div class=\"mobile-cards-container\">\r\n <div *ngFor=\"let row of dataSource.data; let rowIndex = index\"\r\n class=\"mobile-card\"\r\n [attr.id]=\"'mobile-card-' + (row?.id || row?.key || '')\"\r\n [ngClass]=\"{\r\n 'mobile-card--highlight': selectedRowIndex == row.id || (pageInfo.groupByProperty && pageInfo.groupByValue?.includes(row[pageInfo.groupByProperty])),\r\n 'mobile-card--dark-highlight': isDarkHighlight(row)\r\n }\"\r\n (auxclick)=\"openNewTab(row)\"\r\n (click)=\"$event.stopPropagation(); onSelectItem(row)\">\r\n \r\n <!-- Mobile Card Header: ID/Name and Status -->\r\n <div class=\"mobile-card__header\">\r\n <div class=\"mobile-card__header-id\">\r\n <span class=\"mobile-card__id-text\">{{ extractFieldName(row, getMobileCardIdColumn()?.property || 'id') }}</span>\r\n </div>\r\n <div class=\"mobile-card__header-status\" *ngIf=\"getMobileCardStatusColumn()\">\r\n <button mat-button class=\"stateType {{ row[getMobileCardStatusColumn()?.property]}}\" \r\n [attr.id]=\"'mobile-btn-state-'+getMobileCardStatusColumn()?.property\">\r\n {{ labelKeyByValue(getMobileCardStatusColumn(), row) | translate}}\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <!-- Divider -->\r\n <div class=\"mobile-card__divider\"></div>\r\n\r\n <!-- Mobile Card Body: Other columns -->\r\n <div class=\"mobile-card__body\">\r\n <div *ngFor=\"let column of getMobileCardColumns()\" class=\"mobile-card__row\">\r\n <div class=\"mobile-card__row-label\">\r\n <span>{{ labelKey(column) | translate }} :</span>\r\n </div>\r\n <div class=\"mobile-card__row-value\">\r\n <ng-container [ngSwitch]=\"column.type\">\r\n <ng-container *ngSwitchCase=\"'stateType'\">\r\n <button mat-button class=\"stateType {{ row[column.property]}}\" \r\n [attr.id]=\"'mobile-btn-state-'+column.property\">\r\n {{ labelKeyByValue(column, row) | translate}}\r\n </button>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'date'\">\r\n {{ extractFieldName(row, column.property) | date:'dd/MM/yyyy' }}\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'netAmount'\">\r\n <span class=\"mobile-card__amount-currency\">{{ row[column.currency] }}</span>\r\n <span class=\"mobile-card__amount-value\">{{ extractFieldName(row, column.property) | currency:'':'' }}</span>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'localDateTime'\">\r\n {{ extractFieldName(row, column.property) | date : extractFormat(column) }}\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'bigdecimal'\">\r\n <small><sup class=\"mainTable__td__currency\">{{row[column.currency]}}</sup></small>\r\n {{ extractFieldName(row, column.property) | number : (column.digitInfo || '1.3-5') }}\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchDefault>\r\n <ng-container *ngIf=\"column.translate; else noTranslate\">\r\n <span>{{ pageInfo.labelsSection + \".\" + extractFieldName(row, column.property) | translate }}</span>\r\n </ng-container>\r\n <ng-template #noTranslate>\r\n <span [innerHtml]='extractFieldName(row, column.property)'></span>\r\n </ng-template>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Mobile Card Actions -->\r\n <div class=\"mobile-card__actions\" *ngIf=\"listAction && listAction.length > 0\">\r\n <app-button-actions\r\n [row]=\"row\"\r\n [buttonsAction]=\"true\"\r\n [listAction]=\"listAction\"\r\n [actions]=\"listAction\"\r\n (clickedButton)=\"actionListClicked($event,row)\">\r\n </app-button-actions>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"noDataFound\" class=\"dataNotFound flex-column\">\r\n <img *ngIf=\"getDisplaySvgPath()\" [src]=\"getDisplaySvgPath()\" class=\"dataNotFound__icon\" alt=\"No data found\" />\r\n <span class=\"dataNotFound__title\">{{ getDisplayTitle() | translate}}</span>\r\n <span class=\"dataNotFound__subtitle\">{{ getDisplaySubtitle() | translate}}</span>\r\n </div>\r\n\r\n\r\n <div *ngIf=\"(dataSource.data?.length > 0 || customizedData) && !pageInfo.hidePagination\" class=\"main-pagination flex-row\">\r\n <ng-container *ngIf=\"enablePagination\">\r\n <div class=\"flex-column flex-100\">\r\n <app-paginator\r\n [currentPage]=\"pageIndex\"\r\n [totalItems]=\"totalElements\"\r\n [pageSize]=\"pageSize\"\r\n [pageSizeOptions]=\"[5, 10, 25, 50]\"\r\n [mobileLoadMoreIncrement]=\"mobileLoadMoreIncrement\"\r\n [displayedItems]=\"mobileDisplayedItems || dataSource.data.length\"\r\n (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"\r\n (loadMore)=\"onLoadMore($event)\">\r\n </app-paginator>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [":host{display:block;width:100%;max-width:100%;box-sizing:border-box}.baseTable{width:100%!important;max-width:100%!important;box-sizing:border-box}.flex-row{display:flex;flex-direction:row}.flex-column{display:flex;flex-direction:column;width:100%;max-width:100%;box-sizing:border-box}.flex-100{flex:1 1 100%}.flex-49{flex:0 0 49%}.flex-50{flex:0 0 50%}.align-start{justify-content:flex-start;align-items:flex-start}.align-center{justify-content:center;align-items:center}.align-end{justify-content:flex-end;align-items:flex-end}.gap-0{gap:0}.gap-5{gap:5px}.gap-10{gap:10px}.dataNotFound{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;text-align:center;margin-top:80px}.dataNotFound__icon{height:auto;width:auto;max-width:200px;max-height:200px;margin-bottom:8px;object-fit:contain}.dataNotFound__title{color:#6a6a6a;font-size:20px;font-weight:700;margin-bottom:4px}.dataNotFound__subtitle{color:#6a6a6a;font-size:20px;font-weight:400}@media (max-width: 960px){.flex-column-sm{flex-direction:column}.align-center-sm{justify-content:center;align-items:flex-start}}.filter-row{display:flex!important;flex-direction:row!important;align-items:center!important;width:100%!important;max-width:100%!important;gap:16px!important;box-sizing:border-box;margin-top:20px;margin-bottom:16px;padding:0;flex-wrap:nowrap!important;min-width:0!important;min-height:48px!important;overflow:visible!important}.filter-row app-filter-builder{flex:1 1 auto!important;min-width:0!important;max-width:none!important;width:auto!important;flex-shrink:1!important;display:flex!important;align-items:center!important;overflow:visible!important}.button-group{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-end;gap:8px!important;flex-shrink:0!important;flex-grow:0!important;flex-basis:auto!important;height:46px!important;white-space:nowrap!important;z-index:1!important}.mainTable{margin-top:0!important}.btn-apply-filter{background:#fff!important;border:1px solid #3e627b!important;border-radius:8px!important;height:46px!important;min-width:120px!important;padding:0 16px!important;box-shadow:none!important}.btn-apply-filter .button-text{display:flex;align-items:center;justify-content:center;gap:4px;width:100%}.btn-apply-filter mat-icon{font-size:24px;width:24px;height:30px;color:#0d4261}.btn-apply-filter span{font-family:Lusail,sans-serif;font-weight:500;font-size:16px;line-height:1.2;color:#0d4261;white-space:nowrap}.btn-apply-filter:hover{background:#fafafa!important}.btn-export{background:#fff!important;border:1px solid #0d4261!important;border-radius:8px!important;height:46px!important;min-width:109px!important;padding:0 16px!important;box-shadow:none!important;margin-bottom:7px!important}.btn-export .button-text{display:flex;align-items:center;justify-content:center;gap:4px;width:100%}.btn-export mat-icon{font-size:24px;width:24px;height:30px;color:#0d4261}.btn-export .arrow-icon{font-size:16px;width:16px;height:16px;margin-left:0}.btn-export span{font-family:Lusail,sans-serif;font-weight:500;font-size:16px;line-height:1.2;color:#0d4261;white-space:nowrap}.btn-export:hover{background:#fafafa!important}.arrow-icon{font-size:16px;width:16px;height:16px}@media (max-width: 1024px){.button-group{width:auto}}@media (max-width: 768px){.filter-row{flex-direction:column;align-items:stretch}.button-group{display:none!important}.btn-export{width:100%}}.table-container{width:100%;overflow:hidden;background:#f7f7f7;box-sizing:border-box;display:flex;flex-direction:column}.table-header{display:flex;align-items:center;background:#f7f7f7;border:1px solid #f0eeee;max-height:48px;height:48px;margin-bottom:16px;border-radius:8px;overflow:hidden;width:100%;box-sizing:border-box;min-width:0}.table-header-cell{display:flex;align-items:center;max-height:48px;height:48px;padding:8px 16px;flex:1;min-width:100px;position:sticky;top:0;background:none;z-index:10;box-sizing:border-box}.table-header-cell.has-width{flex:0 0 auto!important;min-width:0!important;max-width:none!important}.table-header-cell:last-child{border-right:none}.table-header-cell.first-cell{border-top-left-radius:8px;border-bottom-left-radius:8px}.table-header-cell.last-cell{border-top-right-radius:8px;border-bottom-right-radius:8px}.table-header-cell.actions-cell{justify-content:center;text-align:center}.table-header-cell.actions-cell .table-header-content{justify-content:center}.table-header-cell.sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.table-header-cell.sortable:hover{background:#fafafa}.table-header-content{display:flex;align-items:center;gap:8px;width:100%}.table-header-label{font-family:Lusail,sans-serif;font-weight:500;font-size:16px;line-height:1.2;color:#0d4261;white-space:nowrap}.sort-icon{font-size:18px;width:18px;height:18px;color:#5c5c5c;display:flex;align-items:center;justify-content:center;transition:color .2s}.sort-icon.sort-asc,.sort-icon.sort-desc{color:#0d4261}.table-body{display:flex;flex-direction:column;gap:8px;background:#f7f7f7}.table-row{display:flex;align-items:center;min-height:48px;background:#fff;border-bottom:1px solid #f0eeee;cursor:pointer;transition:background-color .2s;border-radius:8px;overflow:hidden;width:100%;box-sizing:border-box;min-width:0}.table-row:hover{background:#fafafa}.table-row--highlight{background:#f0f8ff}.table-row--dark-highlight{background:#e8f4f8}.table-row .table-cell.first-cell{border-top-left-radius:8px;border-bottom-left-radius:8px}.table-row .table-cell.last-cell{border-top-right-radius:8px;border-bottom-right-radius:8px}.table-cell{display:flex;align-items:center;min-height:48px;max-height:48px;padding:8px 16px;flex:1;min-width:100px;font-family:Lusail,sans-serif;font-weight:400;font-size:16px;line-height:1.2;color:#000;box-sizing:border-box}.table-cell.has-width{flex:0 0 auto!important;min-width:0!important;max-width:none!important}.table-cell:last-child{border-right:none}.table-cell.actions-cell{justify-content:center;text-align:center}.mobile-cards-container{display:none;flex-direction:column;gap:12px;width:100%;box-sizing:border-box}.mobile-card{background:#fff;border:1px solid #f0eeee;border-radius:8px;padding:12px 20px;display:flex;flex-direction:column;gap:4px;cursor:pointer;transition:background-color .2s;box-sizing:border-box;width:100%}.mobile-card:hover{background:#fafafa}.mobile-card--highlight{background:#f0f8ff}.mobile-card--dark-highlight{background:#e8f4f8}.mobile-card__header{display:flex;align-items:center;justify-content:space-between;height:48px;width:100%;box-sizing:border-box}.mobile-card__header-id{display:flex;flex-direction:column;justify-content:center;flex:1}.mobile-card__id-text{font-family:Lusail,sans-serif;font-weight:700;font-size:14px;line-height:1.2;color:#222;text-align:left;white-space:nowrap}.mobile-card__header-status{display:flex;align-items:center;justify-content:flex-end;flex-shrink:0}.mobile-card__divider{height:.347px;width:100%;background:#f0eeee;margin:0;flex-shrink:0}.mobile-card__body{display:flex;flex-direction:column;gap:0;width:100%;box-sizing:border-box}.mobile-card__row{display:flex;align-items:center;justify-content:space-between;height:40px;width:100%;overflow:hidden;box-sizing:border-box}.mobile-card__row-label{display:flex;flex-direction:column;justify-content:center;flex-shrink:0}.mobile-card__row-label span{font-family:Lusail,sans-serif;font-weight:400;font-size:14px;line-height:1.2;color:#222;white-space:nowrap}.mobile-card__row-value{display:flex;flex-direction:column;justify-content:center;flex-shrink:0;text-align:right}.mobile-card__row-value span{font-family:Lusail,sans-serif;font-weight:400;font-size:14px;line-height:1.2;color:#222;white-space:nowrap}.mobile-card__amount-currency{font-family:Lusail,sans-serif;font-weight:400;font-size:14px;line-height:1.2;color:#222;display:inline-block}.mobile-card__amount-value{font-family:Lusail,sans-serif;font-weight:700;font-size:14px;line-height:1.2;color:#222;display:inline-block;margin-left:6px;margin-right:6px}.mobile-card__actions{border-top:1px solid #f0eeee;padding-top:8px;margin-top:4px;display:flex;align-items:center;justify-content:center;min-height:48px;max-height:48px;width:100%;box-sizing:border-box}@media (max-width: 768px){.table-container{display:none}.mobile-cards-container{display:flex}}@media (min-width: 769px){.mobile-cards-container{display:none}.table-container{display:flex}}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5$1.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i5$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "ngmodule", type: NgxPaginationModule }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ButtonActionsComponent, selector: "app-button-actions", inputs: ["actions", "disabled", "buttonsAction", "listAction", "row"], outputs: ["clickedButton"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: TitleBarComponent, selector: "app-title-bar", inputs: ["pageTitle", "showExtractButton", "totalElements", "titleMode", "pageInfo", "subTitle", "statusDesc", "newAction", "extraButton", "showDetails", "showImport", "showButton", "extraData", "titleCorporateAdmin", "hideBackButton", "buttons", "buttonsDisplayMode", "draftSupported", "isPending", "onViewModeChange"], outputs: ["newActionClicked", "extraButtonClicked", "extractReport", "buttonClicked", "viewModeChanged"] }, { kind: "component", type: PaginatorComponent, selector: "app-paginator", inputs: ["currentPage", "totalItems", "pageSize", "pageSizeOptions", "mobileLoadMoreIncrement", "displayedItems"], outputs: ["pageChange", "pageSizeChange", "loadMore"] }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: FilterBuilderComponent, selector: "app-filter-builder", inputs: ["columns", "isChecked", "filterFields", "pageInfo", "pendingFilters", "showExportButton"], outputs: ["filterInformation", "isEmpty", "applyFilter", "sortByClicked", "exportClicked"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }], animations: [] }); }
|
|
3346
3400
|
}
|
|
3347
3401
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BaseTableComponent, decorators: [{
|
|
3348
3402
|
type: Component,
|
|
@@ -3373,7 +3427,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
3373
3427
|
MatMenuTrigger,
|
|
3374
3428
|
MatMenu,
|
|
3375
3429
|
MatMenuItem,
|
|
3376
|
-
], template: "<div class=\"flex-column baseTable\">\r\n <div class=\"flex-row flex-100\" >\r\n <div class=\"flex-column align-start flex-100\" style=\"width: 100%;\">\r\n <app-title-bar\r\n [pageTitle]=\"pageInfo.hideTitle ? '' : pageInfo.labelsSection+'.list_title'\"\r\n [subTitle]=\"(pageInfo.hideTitle || pageInfo.hideSubtitle) ? '' : pageInfo.labelsSection+'.subtitle'\"\r\n [titleMode]=\"''\"\r\n [pageInfo]=\"pageInfo\"\r\n [newAction]=\"showAddNew()\"\r\n [showExtractButton]=\"!pageInfo.hideExtractButton\"\r\n [draftSupported]=\"pageInfo.draftSupported\"\r\n [isPending]=\"isPending\"\r\n [onViewModeChange]=\"switchViewMode.bind(this)\"\r\n [buttons]=\"extraActions\"\r\n [buttonsDisplayMode]=\"buttonsDisplayMode\"\r\n (newActionClicked)=\"onAddNewAction($event)\"\r\n (extractReport)=\"extractReport($event)\"\r\n (viewModeChanged)=\"onViewModeChangedReceived($event)\"\r\n (buttonClicked)=\"buttonClicked.emit($event)\"\r\n [totalElements]=\"pageInfo.hideTitle ? undefined : totalElements\">\r\n </app-title-bar>\r\n </div>\r\n </div>\r\n\r\n <div class=\"filter-row\" *ngIf=\"!pageInfo.hideAdvancedFilter\">\r\n <app-filter-builder\r\n *ngIf=\"!pageInfo.hideAdvancedFilter\"\r\n [pageInfo]=\"pageInfo\"\r\n [columns]=\"columns\"\r\n [filterFields]=\"filterFields\"\r\n [pendingFilters]=\"pendingFilters\"\r\n [showExportButton]=\"!pageInfo.hideExtractButton\"\r\n (filterInformation)=\"storePendingFilters($event)\"\r\n (isEmpty)=\"handleFilterEmpty($event)\"\r\n (applyFilter)=\"applyPendingFilters()\"\r\n (sortByClicked)=\"handleSortClick($event)\"\r\n (exportClicked)=\"extractReport($event)\">\r\n </app-filter-builder>\r\n\r\n <div class=\"button-group\" *ngIf=\"!pageInfo.hideExtractButton\">\r\n <button *ngIf=\"!pageInfo.hideExtractButton\"\r\n mat-flat-button\r\n [matMenuTriggerFor]=\"exportMenu\"\r\n class=\"btn-export\"\r\n >\r\n <div class=\"button-text\">\r\n <mat-icon>file_export</mat-icon>\r\n <span>{{ 'export' | translate }}</span>\r\n <mat-icon class=\"arrow-icon\">keyboard_arrow_down</mat-icon>\r\n </div>\r\n </button>\r\n\r\n <mat-menu #exportMenu=\"matMenu\">\r\n <button mat-menu-item (click)=\"extractReport('pdf')\">PDF</button>\r\n <button mat-menu-item (click)=\"extractReport('xlsx')\">Excel</button>\r\n <button mat-menu-item (click)=\"extractReport('csv')\">CSV</button>\r\n </mat-menu>\r\n\r\n </div>\r\n </div>\r\n\r\n\r\n <div class=\"flex-row flex-100 baseTable__detailsColumn\">\r\n <div class=\"flex-100\">\r\n <div class=\"flex-row flex-100 mainTable\">\r\n <div class=\"table-container\">\r\n <div class=\"table-header\" [attr.data-sort]=\"sortState\">\r\n <div *ngFor=\"let columnProp of visibleColumnsArray; let i = index\"\r\n class=\"table-header-cell\"\r\n [class.sortable]=\"getColumn(columnProp)?.enableSorting\"\r\n [class.first-cell]=\"i === 0\"\r\n [class.last-cell]=\"i === visibleColumnsArray.length - 1\"\r\n [class.actions-cell]=\"i === visibleColumnsArray.length - 1 && columnProp === 'actions'\"\r\n [class.has-width]=\"getColumn(columnProp)?.width\"\r\n [ngStyle]=\"getColumn(columnProp)?.width ? {'width': getColumn(columnProp)?.width + '%', 'flex-basis': getColumn(columnProp)?.width + '%'} : {}\"\r\n (click)=\"getColumn(columnProp)?.enableSorting && handleSortClick(columnProp)\">\r\n <div class=\"table-header-content\">\r\n <span class=\"table-header-label\">{{ labelKey(getColumn(columnProp)) | translate }}</span>\r\n <ng-container *ngIf=\"getColumn(columnProp)?.enableSorting\">\r\n <mat-icon *ngIf=\"getSortDirection(columnProp) === 'asc'\"\r\n class=\"sort-icon sort-asc\">arrow_drop_up</mat-icon>\r\n <mat-icon *ngIf=\"getSortDirection(columnProp) === 'desc'\"\r\n class=\"sort-icon sort-desc\">arrow_drop_down</mat-icon>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"table-body\">\r\n <div *ngFor=\"let row of dataSource.data; let rowIndex = index\"\r\n class=\"table-row\"\r\n [attr.id]=\"'table-row-' + (row?.id || row?.key || '')\"\r\n [ngClass]=\"{\r\n 'table-row--highlight': selectedRowIndex == row.id || (pageInfo.groupByProperty && pageInfo.groupByValue?.includes(row[pageInfo.groupByProperty])),\r\n 'table-row--dark-highlight': isDarkHighlight(row)\r\n }\"\r\n (auxclick)=\"openNewTab(row)\"\r\n (click)=\"$event.stopPropagation(); onSelectItem(row)\">\r\n <div *ngFor=\"let columnProp of visibleColumnsArray; let i = index\"\r\n class=\"table-cell\"\r\n [class.first-cell]=\"i === 0\"\r\n [class.last-cell]=\"i === visibleColumnsArray.length - 1\"\r\n [class.actions-cell]=\"i === visibleColumnsArray.length - 1 && columnProp === 'actions'\"\r\n [class.has-width]=\"getColumn(columnProp)?.width\"\r\n [ngStyle]=\"getColumn(columnProp)?.width ? {'width': getColumn(columnProp)?.width + '%', 'flex-basis': getColumn(columnProp)?.width + '%'} : {}\">\r\n <ng-container [ngSwitch]=\"getColumn(columnProp)?.type\">\r\n <ng-container *ngSwitchCase=\"'workflowStatus'\">\r\n <button mat-button class=\"wfStatus {{ getStatusDescription(row)}}\" [attr.id]=\"'table-btn-wf-'+columnProp+'-'+(row.id || row.key || '')\">{{ getStatusDescription(row) }}</button>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'hyper-text'\">\r\n <mat-label (click)=\"hyperLinkClicked(columnProp, row)\" [ngClass]=\"{'hyper-link': shouldRenderAsHyperLink(row)}\">\r\n {{ extractFieldName(row, columnProp) }}\r\n </mat-label>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'button'\">\r\n <button *ngIf=\"shouldShowButton(row)\" mat-button class=\"primary\" (click)=\"$event.stopPropagation(); actionButtonClicked(columnProp, row)\" [attr.id]=\"'table-btn-action-'+columnProp\">\r\n {{ labelKey(getColumn(columnProp)) + '_title' | translate }}\r\n </button>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'icon'\">\r\n <mat-icon [ngClass]=\"{\r\n 'mainTable__td__icon-green': row[columnProp] === 'pass',\r\n 'mainTable__td__icon-orange': row[columnProp] === 'warning',\r\n 'mainTable__td__icon-red': row[columnProp] === 'error'\r\n }\">\r\n {{ getIcon(row[columnProp]) }}\r\n </mat-icon>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'checkbox'\">\r\n <mat-checkbox class=\"primary\" [checked]=\"row[columnProp]\" (click)=\"$event.stopPropagation();actionCheckedClicked(columnProp,row)\"></mat-checkbox>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'stateType'\">\r\n <button mat-button class=\"stateType {{ row[columnProp]}}\" [attr.id]=\"'table-btn-state-'+columnProp\">{{ labelKeyByValue(getColumn(columnProp), row) | translate}}</button>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'date'\">\r\n {{ extractFieldName(row, columnProp) | date:'dd/MM/yyyy' }}\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'croppedText'\">\r\n {{ getCroppedText(row[columnProp], row[getColumn(columnProp)?.width]) }}\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'download'\">\r\n <mat-icon class=\"mainTable__td__icon-blue\">system_update_alt</mat-icon>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'onOff'\">\r\n <mat-icon *ngIf=\"row[columnProp] === null\" class=\"mainTable__td__icon-darkorange\">flag</mat-icon>\r\n <mat-icon *ngIf=\"row[columnProp] === false\" class=\"mainTable__td__icon-red\">flag</mat-icon>\r\n <mat-icon *ngIf=\"row[columnProp] === true\" class=\"mainTable__td__icon-green\">flag</mat-icon>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'status'\">\r\n <span *ngIf=\"row[columnProp] === null || row[columnProp] === false\">\r\n {{ pageInfo.labelsSection + '.' + getColumn(columnProp)?.label + 'InActive' | translate }}\r\n </span>\r\n <span *ngIf=\"row[columnProp] === true\">\r\n {{ pageInfo.labelsSection + '.' + getColumn(columnProp)?.label + 'Active' | translate }}\r\n </span>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'info'\">\r\n <button mat-icon-button (click)=\"$event.stopPropagation();emitEvent(row)\" [attr.id]=\"'table-btn-info-'+row.id\">\r\n <mat-icon>info</mat-icon>\r\n </button>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'netAmount'\">\r\n <div class=\"mainTable__td__currency\" style=\"display:inline-block;\">{{ row[getColumn(columnProp)?.currency] }}</div>\r\n <span class=\"mainTable__td__property\" style=\"display:inline-block; margin-left:6px; margin-right:6px;\">\r\n {{ extractFieldName(row, columnProp) | currency:'':'' }}</span>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'localDateTime'\">\r\n {{ extractFieldName(row, columnProp) | date : extractFormat(getColumn(columnProp)) }}\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'bigdecimal'\">\r\n <small><sup class=\"mainTable__td__currency\">{{row[getColumn(columnProp)?.currency]}}</sup></small>\r\n {{ extractFieldName(row, columnProp) | number : (getColumn(columnProp)?.digitInfo || '1.3-5') }}\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'listAction'\">\r\n <app-button-actions\r\n [buttonsAction]=\"getColumn(columnProp)?.viewType === 'buttonsAction'\"\r\n [listAction]=\"listAction\"\r\n [actions]=\"listAction\"\r\n (clickedButton)=\"actionListClicked($event,row)\">\r\n </app-button-actions>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchDefault>\r\n <ng-container *ngIf=\"getColumn(columnProp)?.translate; else noTranslate\">\r\n <span (click)=\"emitRoutePage(row)\">\r\n {{ pageInfo.labelsSection + \".\" + extractFieldName(row, columnProp) | translate }}\r\n </span>\r\n </ng-container>\r\n <ng-template #noTranslate>\r\n <span (click)=\"emitRoutePage(row)\" [innerHtml]='extractFieldName(row, columnProp)'></span>\r\n </ng-template>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Mobile Card View -->\r\n <div class=\"mobile-cards-container\">\r\n <div *ngFor=\"let row of dataSource.data; let rowIndex = index\"\r\n class=\"mobile-card\"\r\n [attr.id]=\"'mobile-card-' + (row?.id || row?.key || '')\"\r\n [ngClass]=\"{\r\n 'mobile-card--highlight': selectedRowIndex == row.id || (pageInfo.groupByProperty && pageInfo.groupByValue?.includes(row[pageInfo.groupByProperty])),\r\n 'mobile-card--dark-highlight': isDarkHighlight(row)\r\n }\"\r\n (auxclick)=\"openNewTab(row)\"\r\n (click)=\"$event.stopPropagation(); onSelectItem(row)\">\r\n \r\n <!-- Mobile Card Header: ID/Name and Status -->\r\n <div class=\"mobile-card__header\">\r\n <div class=\"mobile-card__header-id\">\r\n <span class=\"mobile-card__id-text\">{{ extractFieldName(row, getMobileCardIdColumn()?.property || 'id') }}</span>\r\n </div>\r\n <div class=\"mobile-card__header-status\" *ngIf=\"getMobileCardStatusColumn()\">\r\n <button mat-button class=\"stateType {{ row[getMobileCardStatusColumn()?.property]}}\" \r\n [attr.id]=\"'mobile-btn-state-'+getMobileCardStatusColumn()?.property\">\r\n {{ labelKeyByValue(getMobileCardStatusColumn(), row) | translate}}\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <!-- Divider -->\r\n <div class=\"mobile-card__divider\"></div>\r\n\r\n <!-- Mobile Card Body: Other columns -->\r\n <div class=\"mobile-card__body\">\r\n <div *ngFor=\"let column of getMobileCardColumns()\" class=\"mobile-card__row\">\r\n <div class=\"mobile-card__row-label\">\r\n <span>{{ labelKey(column) | translate }} :</span>\r\n </div>\r\n <div class=\"mobile-card__row-value\">\r\n <ng-container [ngSwitch]=\"column.type\">\r\n <ng-container *ngSwitchCase=\"'stateType'\">\r\n <button mat-button class=\"stateType {{ row[column.property]}}\" \r\n [attr.id]=\"'mobile-btn-state-'+column.property\">\r\n {{ labelKeyByValue(column, row) | translate}}\r\n </button>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'date'\">\r\n {{ extractFieldName(row, column.property) | date:'dd/MM/yyyy' }}\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'netAmount'\">\r\n <span class=\"mobile-card__amount-currency\">{{ row[column.currency] }}</span>\r\n <span class=\"mobile-card__amount-value\">{{ extractFieldName(row, column.property) | currency:'':'' }}</span>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'localDateTime'\">\r\n {{ extractFieldName(row, column.property) | date : extractFormat(column) }}\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'bigdecimal'\">\r\n <small><sup class=\"mainTable__td__currency\">{{row[column.currency]}}</sup></small>\r\n {{ extractFieldName(row, column.property) | number : (column.digitInfo || '1.3-5') }}\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchDefault>\r\n <ng-container *ngIf=\"column.translate; else noTranslate\">\r\n <span>{{ pageInfo.labelsSection + \".\" + extractFieldName(row, column.property) | translate }}</span>\r\n </ng-container>\r\n <ng-template #noTranslate>\r\n <span [innerHtml]='extractFieldName(row, column.property)'></span>\r\n </ng-template>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Mobile Card Actions -->\r\n <div class=\"mobile-card__actions\" *ngIf=\"listAction && listAction.length > 0\">\r\n <app-button-actions\r\n [buttonsAction]=\"true\"\r\n [listAction]=\"listAction\"\r\n [actions]=\"listAction\"\r\n (clickedButton)=\"actionListClicked($event,row)\">\r\n </app-button-actions>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"noDataFound\" class=\"dataNotFound flex-column\">\r\n <img *ngIf=\"getDisplaySvgPath()\" [src]=\"getDisplaySvgPath()\" class=\"dataNotFound__icon\" alt=\"No data found\" />\r\n <span class=\"dataNotFound__title\">{{ getDisplayTitle() | translate}}</span>\r\n <span class=\"dataNotFound__subtitle\">{{ getDisplaySubtitle() | translate}}</span>\r\n </div>\r\n\r\n\r\n <div *ngIf=\"(dataSource.data?.length > 0 || customizedData) && !pageInfo.hidePagination\" class=\"main-pagination flex-row\">\r\n <ng-container *ngIf=\"enablePagination\">\r\n <div class=\"flex-column flex-100\">\r\n <app-paginator\r\n [currentPage]=\"pageIndex\"\r\n [totalItems]=\"totalElements\"\r\n [pageSize]=\"pageSize\"\r\n [pageSizeOptions]=\"[5, 10, 25, 50]\"\r\n [mobileLoadMoreIncrement]=\"mobileLoadMoreIncrement\"\r\n [displayedItems]=\"mobileDisplayedItems || dataSource.data.length\"\r\n (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"\r\n (loadMore)=\"onLoadMore($event)\">\r\n </app-paginator>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [":host{display:block;width:100%;max-width:100%;box-sizing:border-box}.baseTable{width:100%!important;max-width:100%!important;box-sizing:border-box}.flex-row{display:flex;flex-direction:row}.flex-column{display:flex;flex-direction:column;width:100%;max-width:100%;box-sizing:border-box}.flex-100{flex:1 1 100%}.flex-49{flex:0 0 49%}.flex-50{flex:0 0 50%}.align-start{justify-content:flex-start;align-items:flex-start}.align-center{justify-content:center;align-items:center}.align-end{justify-content:flex-end;align-items:flex-end}.gap-0{gap:0}.gap-5{gap:5px}.gap-10{gap:10px}.dataNotFound{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;text-align:center;margin-top:80px}.dataNotFound__icon{height:auto;width:auto;max-width:200px;max-height:200px;margin-bottom:8px;object-fit:contain}.dataNotFound__title{color:#6a6a6a;font-size:20px;font-weight:700;margin-bottom:4px}.dataNotFound__subtitle{color:#6a6a6a;font-size:20px;font-weight:400}@media (max-width: 960px){.flex-column-sm{flex-direction:column}.align-center-sm{justify-content:center;align-items:flex-start}}.filter-row{display:flex!important;flex-direction:row!important;align-items:center!important;width:100%!important;max-width:100%!important;gap:16px!important;box-sizing:border-box;margin-top:20px;margin-bottom:16px;padding:0;flex-wrap:nowrap!important;min-width:0!important;min-height:48px!important;overflow:visible!important}.filter-row app-filter-builder{flex:1 1 auto!important;min-width:0!important;max-width:none!important;width:auto!important;flex-shrink:1!important;display:flex!important;align-items:center!important;overflow:visible!important}.button-group{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-end;gap:8px!important;flex-shrink:0!important;flex-grow:0!important;flex-basis:auto!important;height:46px!important;white-space:nowrap!important;z-index:1!important}.mainTable{margin-top:0!important}.btn-apply-filter{background:#fff!important;border:1px solid #3e627b!important;border-radius:8px!important;height:46px!important;min-width:120px!important;padding:0 16px!important;box-shadow:none!important}.btn-apply-filter .button-text{display:flex;align-items:center;justify-content:center;gap:4px;width:100%}.btn-apply-filter mat-icon{font-size:24px;width:24px;height:30px;color:#0d4261}.btn-apply-filter span{font-family:Lusail,sans-serif;font-weight:500;font-size:16px;line-height:1.2;color:#0d4261;white-space:nowrap}.btn-apply-filter:hover{background:#fafafa!important}.btn-export{background:#fff!important;border:1px solid #0d4261!important;border-radius:8px!important;height:46px!important;min-width:109px!important;padding:0 16px!important;box-shadow:none!important;margin-bottom:7px!important}.btn-export .button-text{display:flex;align-items:center;justify-content:center;gap:4px;width:100%}.btn-export mat-icon{font-size:24px;width:24px;height:30px;color:#0d4261}.btn-export .arrow-icon{font-size:16px;width:16px;height:16px;margin-left:0}.btn-export span{font-family:Lusail,sans-serif;font-weight:500;font-size:16px;line-height:1.2;color:#0d4261;white-space:nowrap}.btn-export:hover{background:#fafafa!important}.arrow-icon{font-size:16px;width:16px;height:16px}@media (max-width: 1024px){.button-group{width:auto}}@media (max-width: 768px){.filter-row{flex-direction:column;align-items:stretch}.button-group{display:none!important}.btn-export{width:100%}}.table-container{width:100%;overflow:hidden;background:#f7f7f7;box-sizing:border-box;display:flex;flex-direction:column}.table-header{display:flex;align-items:center;background:#f7f7f7;border:1px solid #f0eeee;max-height:48px;height:48px;margin-bottom:16px;border-radius:8px;overflow:hidden;width:100%;box-sizing:border-box;min-width:0}.table-header-cell{display:flex;align-items:center;max-height:48px;height:48px;padding:8px 16px;flex:1;min-width:100px;position:sticky;top:0;background:none;z-index:10;box-sizing:border-box}.table-header-cell.has-width{flex:0 0 auto!important;min-width:0!important;max-width:none!important}.table-header-cell:last-child{border-right:none}.table-header-cell.first-cell{border-top-left-radius:8px;border-bottom-left-radius:8px}.table-header-cell.last-cell{border-top-right-radius:8px;border-bottom-right-radius:8px}.table-header-cell.actions-cell{justify-content:center;text-align:center}.table-header-cell.actions-cell .table-header-content{justify-content:center}.table-header-cell.sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.table-header-cell.sortable:hover{background:#fafafa}.table-header-content{display:flex;align-items:center;gap:8px;width:100%}.table-header-label{font-family:Lusail,sans-serif;font-weight:500;font-size:16px;line-height:1.2;color:#0d4261;white-space:nowrap}.sort-icon{font-size:18px;width:18px;height:18px;color:#5c5c5c;display:flex;align-items:center;justify-content:center;transition:color .2s}.sort-icon.sort-asc,.sort-icon.sort-desc{color:#0d4261}.table-body{display:flex;flex-direction:column;gap:8px;background:#f7f7f7}.table-row{display:flex;align-items:center;min-height:48px;background:#fff;border-bottom:1px solid #f0eeee;cursor:pointer;transition:background-color .2s;border-radius:8px;overflow:hidden;width:100%;box-sizing:border-box;min-width:0}.table-row:hover{background:#fafafa}.table-row--highlight{background:#f0f8ff}.table-row--dark-highlight{background:#e8f4f8}.table-row .table-cell.first-cell{border-top-left-radius:8px;border-bottom-left-radius:8px}.table-row .table-cell.last-cell{border-top-right-radius:8px;border-bottom-right-radius:8px}.table-cell{display:flex;align-items:center;min-height:48px;max-height:48px;padding:8px 16px;flex:1;min-width:100px;font-family:Lusail,sans-serif;font-weight:400;font-size:16px;line-height:1.2;color:#000;box-sizing:border-box}.table-cell.has-width{flex:0 0 auto!important;min-width:0!important;max-width:none!important}.table-cell:last-child{border-right:none}.table-cell.actions-cell{justify-content:center;text-align:center}.mobile-cards-container{display:none;flex-direction:column;gap:12px;width:100%;box-sizing:border-box}.mobile-card{background:#fff;border:1px solid #f0eeee;border-radius:8px;padding:12px 20px;display:flex;flex-direction:column;gap:4px;cursor:pointer;transition:background-color .2s;box-sizing:border-box;width:100%}.mobile-card:hover{background:#fafafa}.mobile-card--highlight{background:#f0f8ff}.mobile-card--dark-highlight{background:#e8f4f8}.mobile-card__header{display:flex;align-items:center;justify-content:space-between;height:48px;width:100%;box-sizing:border-box}.mobile-card__header-id{display:flex;flex-direction:column;justify-content:center;flex:1}.mobile-card__id-text{font-family:Lusail,sans-serif;font-weight:700;font-size:14px;line-height:1.2;color:#222;text-align:left;white-space:nowrap}.mobile-card__header-status{display:flex;align-items:center;justify-content:flex-end;flex-shrink:0}.mobile-card__divider{height:.347px;width:100%;background:#f0eeee;margin:0;flex-shrink:0}.mobile-card__body{display:flex;flex-direction:column;gap:0;width:100%;box-sizing:border-box}.mobile-card__row{display:flex;align-items:center;justify-content:space-between;height:40px;width:100%;overflow:hidden;box-sizing:border-box}.mobile-card__row-label{display:flex;flex-direction:column;justify-content:center;flex-shrink:0}.mobile-card__row-label span{font-family:Lusail,sans-serif;font-weight:400;font-size:14px;line-height:1.2;color:#222;white-space:nowrap}.mobile-card__row-value{display:flex;flex-direction:column;justify-content:center;flex-shrink:0;text-align:right}.mobile-card__row-value span{font-family:Lusail,sans-serif;font-weight:400;font-size:14px;line-height:1.2;color:#222;white-space:nowrap}.mobile-card__amount-currency{font-family:Lusail,sans-serif;font-weight:400;font-size:14px;line-height:1.2;color:#222;display:inline-block}.mobile-card__amount-value{font-family:Lusail,sans-serif;font-weight:700;font-size:14px;line-height:1.2;color:#222;display:inline-block;margin-left:6px;margin-right:6px}.mobile-card__actions{border-top:1px solid #f0eeee;padding-top:8px;margin-top:4px;display:flex;align-items:center;justify-content:center;min-height:48px;max-height:48px;width:100%;box-sizing:border-box}@media (max-width: 768px){.table-container{display:none}.mobile-cards-container{display:flex}}@media (min-width: 769px){.mobile-cards-container{display:none}.table-container{display:flex}}\n"] }]
|
|
3430
|
+
], template: "<div class=\"flex-column baseTable\">\r\n <div class=\"flex-row flex-100\" >\r\n <div class=\"flex-column align-start flex-100\" style=\"width: 100%;\">\r\n <app-title-bar\r\n [pageTitle]=\"pageInfo.hideTitle ? '' : pageInfo.labelsSection+'.list_title'\"\r\n [subTitle]=\"(pageInfo.hideTitle || pageInfo.hideSubtitle) ? '' : pageInfo.labelsSection+'.subtitle'\"\r\n [titleMode]=\"''\"\r\n [pageInfo]=\"pageInfo\"\r\n [newAction]=\"showAddNew()\"\r\n [showExtractButton]=\"!pageInfo.hideExtractButton\"\r\n [draftSupported]=\"pageInfo.draftSupported\"\r\n [isPending]=\"isPending\"\r\n [onViewModeChange]=\"switchViewMode.bind(this)\"\r\n [buttons]=\"extraActions\"\r\n [buttonsDisplayMode]=\"buttonsDisplayMode\"\r\n (newActionClicked)=\"onAddNewAction($event)\"\r\n (extractReport)=\"extractReport($event)\"\r\n (viewModeChanged)=\"onViewModeChangedReceived($event)\"\r\n (buttonClicked)=\"buttonClicked.emit($event)\"\r\n [totalElements]=\"pageInfo.hideTitle ? undefined : totalElements\">\r\n </app-title-bar>\r\n </div>\r\n </div>\r\n\r\n <div class=\"filter-row\" *ngIf=\"!pageInfo.hideAdvancedFilter\">\r\n <app-filter-builder\r\n *ngIf=\"!pageInfo.hideAdvancedFilter\"\r\n [pageInfo]=\"pageInfo\"\r\n [columns]=\"columns\"\r\n [filterFields]=\"filterFields\"\r\n [pendingFilters]=\"pendingFilters\"\r\n [showExportButton]=\"!pageInfo.hideExtractButton\"\r\n (filterInformation)=\"storePendingFilters($event)\"\r\n (isEmpty)=\"handleFilterEmpty($event)\"\r\n (applyFilter)=\"applyPendingFilters()\"\r\n (sortByClicked)=\"handleSortClick($event)\"\r\n (exportClicked)=\"extractReport($event)\">\r\n </app-filter-builder>\r\n\r\n <div class=\"button-group\" *ngIf=\"!pageInfo.hideExtractButton\">\r\n <button *ngIf=\"!pageInfo.hideExtractButton\"\r\n mat-flat-button\r\n [matMenuTriggerFor]=\"exportMenu\"\r\n class=\"btn-export\"\r\n >\r\n <div class=\"button-text\">\r\n <mat-icon>file_export</mat-icon>\r\n <span>{{ 'export' | translate }}</span>\r\n <mat-icon class=\"arrow-icon\">keyboard_arrow_down</mat-icon>\r\n </div>\r\n </button>\r\n\r\n <mat-menu #exportMenu=\"matMenu\">\r\n <button mat-menu-item (click)=\"extractReport('pdf')\">PDF</button>\r\n <button mat-menu-item (click)=\"extractReport('xlsx')\">Excel</button>\r\n <button mat-menu-item (click)=\"extractReport('csv')\">CSV</button>\r\n </mat-menu>\r\n\r\n </div>\r\n </div>\r\n\r\n\r\n <div class=\"flex-row flex-100 baseTable__detailsColumn\">\r\n <div class=\"flex-100\">\r\n <div class=\"flex-row flex-100 mainTable\">\r\n <div class=\"table-container\">\r\n <div class=\"table-header\" [attr.data-sort]=\"sortState\">\r\n <div *ngFor=\"let columnProp of visibleColumnsArray; let i = index\"\r\n class=\"table-header-cell\"\r\n [class.sortable]=\"getColumn(columnProp)?.enableSorting\"\r\n [class.first-cell]=\"i === 0\"\r\n [class.last-cell]=\"i === visibleColumnsArray.length - 1\"\r\n [class.actions-cell]=\"i === visibleColumnsArray.length - 1 && columnProp === 'actions'\"\r\n [class.has-width]=\"getColumn(columnProp)?.width\"\r\n [ngStyle]=\"getColumn(columnProp)?.width ? {'width': getColumn(columnProp)?.width + '%', 'flex-basis': getColumn(columnProp)?.width + '%'} : {}\"\r\n (click)=\"getColumn(columnProp)?.enableSorting && handleSortClick(columnProp)\">\r\n <div class=\"table-header-content\">\r\n <span class=\"table-header-label\">{{ labelKey(getColumn(columnProp)) | translate }}</span>\r\n <ng-container *ngIf=\"getColumn(columnProp)?.enableSorting\">\r\n <mat-icon *ngIf=\"getSortDirection(columnProp) === 'asc'\"\r\n class=\"sort-icon sort-asc\">arrow_drop_up</mat-icon>\r\n <mat-icon *ngIf=\"getSortDirection(columnProp) === 'desc'\"\r\n class=\"sort-icon sort-desc\">arrow_drop_down</mat-icon>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"table-body\">\r\n <div *ngFor=\"let row of dataSource.data; let rowIndex = index\"\r\n class=\"table-row\"\r\n [attr.id]=\"'table-row-' + (row?.id || row?.key || '')\"\r\n [ngClass]=\"{\r\n 'table-row--highlight': selectedRowIndex == row.id || (pageInfo.groupByProperty && pageInfo.groupByValue?.includes(row[pageInfo.groupByProperty])),\r\n 'table-row--dark-highlight': isDarkHighlight(row)\r\n }\"\r\n (auxclick)=\"openNewTab(row)\"\r\n (click)=\"$event.stopPropagation(); onSelectItem(row)\">\r\n <div *ngFor=\"let columnProp of visibleColumnsArray; let i = index\"\r\n class=\"table-cell\"\r\n [class.first-cell]=\"i === 0\"\r\n [class.last-cell]=\"i === visibleColumnsArray.length - 1\"\r\n [class.actions-cell]=\"i === visibleColumnsArray.length - 1 && columnProp === 'actions'\"\r\n [class.has-width]=\"getColumn(columnProp)?.width\"\r\n [ngStyle]=\"getColumn(columnProp)?.width ? {'width': getColumn(columnProp)?.width + '%', 'flex-basis': getColumn(columnProp)?.width + '%'} : {}\">\r\n <ng-container [ngSwitch]=\"getColumn(columnProp)?.type\">\r\n <ng-container *ngSwitchCase=\"'workflowStatus'\">\r\n <button mat-button class=\"wfStatus {{ getStatusDescription(row)}}\" [attr.id]=\"'table-btn-wf-'+columnProp+'-'+(row.id || row.key || '')\">{{ getStatusDescription(row) }}</button>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'hyper-text'\">\r\n <mat-label (click)=\"hyperLinkClicked(columnProp, row)\" [ngClass]=\"{'hyper-link': shouldRenderAsHyperLink(row)}\">\r\n {{ extractFieldName(row, columnProp) }}\r\n </mat-label>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'button'\">\r\n <button *ngIf=\"shouldShowButton(row)\" mat-button class=\"primary\" (click)=\"$event.stopPropagation(); actionButtonClicked(columnProp, row)\" [attr.id]=\"'table-btn-action-'+columnProp\">\r\n {{ labelKey(getColumn(columnProp)) + '_title' | translate }}\r\n </button>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'icon'\">\r\n <mat-icon [ngClass]=\"{\r\n 'mainTable__td__icon-green': row[columnProp] === 'pass',\r\n 'mainTable__td__icon-orange': row[columnProp] === 'warning',\r\n 'mainTable__td__icon-red': row[columnProp] === 'error'\r\n }\">\r\n {{ getIcon(row[columnProp]) }}\r\n </mat-icon>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'checkbox'\">\r\n <mat-checkbox class=\"primary\" [checked]=\"row[columnProp]\" (click)=\"$event.stopPropagation();actionCheckedClicked(columnProp,row)\"></mat-checkbox>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'stateType'\">\r\n <button mat-button class=\"stateType {{ row[columnProp]}}\" [attr.id]=\"'table-btn-state-'+columnProp\">{{ labelKeyByValue(getColumn(columnProp), row) | translate}}</button>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'date'\">\r\n {{ extractFieldName(row, columnProp) | date:'dd/MM/yyyy' }}\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'croppedText'\">\r\n {{ getCroppedText(row[columnProp], row[getColumn(columnProp)?.width]) }}\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'download'\">\r\n <mat-icon class=\"mainTable__td__icon-blue\">system_update_alt</mat-icon>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'onOff'\">\r\n <mat-icon *ngIf=\"row[columnProp] === null\" class=\"mainTable__td__icon-darkorange\">flag</mat-icon>\r\n <mat-icon *ngIf=\"row[columnProp] === false\" class=\"mainTable__td__icon-red\">flag</mat-icon>\r\n <mat-icon *ngIf=\"row[columnProp] === true\" class=\"mainTable__td__icon-green\">flag</mat-icon>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'status'\">\r\n <span *ngIf=\"row[columnProp] === null || row[columnProp] === false\">\r\n {{ pageInfo.labelsSection + '.' + getColumn(columnProp)?.label + 'InActive' | translate }}\r\n </span>\r\n <span *ngIf=\"row[columnProp] === true\">\r\n {{ pageInfo.labelsSection + '.' + getColumn(columnProp)?.label + 'Active' | translate }}\r\n </span>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'info'\">\r\n <button mat-icon-button (click)=\"$event.stopPropagation();emitEvent(row)\" [attr.id]=\"'table-btn-info-'+row.id\">\r\n <mat-icon>info</mat-icon>\r\n </button>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'netAmount'\">\r\n <div class=\"mainTable__td__currency\" style=\"display:inline-block;\">{{ row[getColumn(columnProp)?.currency] }}</div>\r\n <span class=\"mainTable__td__property\" style=\"display:inline-block; margin-left:6px; margin-right:6px;\">\r\n {{ extractFieldName(row, columnProp) | currency:'':'' }}</span>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'localDateTime'\">\r\n {{ extractFieldName(row, columnProp) | date : extractFormat(getColumn(columnProp)) }}\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'bigdecimal'\">\r\n <small><sup class=\"mainTable__td__currency\">{{row[getColumn(columnProp)?.currency]}}</sup></small>\r\n {{ extractFieldName(row, columnProp) | number : (getColumn(columnProp)?.digitInfo || '1.3-5') }}\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'listAction'\">\r\n <app-button-actions\r\n [row]=\"row\"\r\n [buttonsAction]=\"getColumn(columnProp)?.viewType === 'buttonsAction'\"\r\n [listAction]=\"listAction\"\r\n [actions]=\"listAction\"\r\n (clickedButton)=\"actionListClicked($event,row)\">\r\n </app-button-actions>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchDefault>\r\n <ng-container *ngIf=\"getColumn(columnProp)?.translate; else noTranslate\">\r\n <span (click)=\"emitRoutePage(row)\">\r\n {{ pageInfo.labelsSection + \".\" + extractFieldName(row, columnProp) | translate }}\r\n </span>\r\n </ng-container>\r\n <ng-template #noTranslate>\r\n <span (click)=\"emitRoutePage(row)\" [innerHtml]='extractFieldName(row, columnProp)'></span>\r\n </ng-template>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Mobile Card View -->\r\n <div class=\"mobile-cards-container\">\r\n <div *ngFor=\"let row of dataSource.data; let rowIndex = index\"\r\n class=\"mobile-card\"\r\n [attr.id]=\"'mobile-card-' + (row?.id || row?.key || '')\"\r\n [ngClass]=\"{\r\n 'mobile-card--highlight': selectedRowIndex == row.id || (pageInfo.groupByProperty && pageInfo.groupByValue?.includes(row[pageInfo.groupByProperty])),\r\n 'mobile-card--dark-highlight': isDarkHighlight(row)\r\n }\"\r\n (auxclick)=\"openNewTab(row)\"\r\n (click)=\"$event.stopPropagation(); onSelectItem(row)\">\r\n \r\n <!-- Mobile Card Header: ID/Name and Status -->\r\n <div class=\"mobile-card__header\">\r\n <div class=\"mobile-card__header-id\">\r\n <span class=\"mobile-card__id-text\">{{ extractFieldName(row, getMobileCardIdColumn()?.property || 'id') }}</span>\r\n </div>\r\n <div class=\"mobile-card__header-status\" *ngIf=\"getMobileCardStatusColumn()\">\r\n <button mat-button class=\"stateType {{ row[getMobileCardStatusColumn()?.property]}}\" \r\n [attr.id]=\"'mobile-btn-state-'+getMobileCardStatusColumn()?.property\">\r\n {{ labelKeyByValue(getMobileCardStatusColumn(), row) | translate}}\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <!-- Divider -->\r\n <div class=\"mobile-card__divider\"></div>\r\n\r\n <!-- Mobile Card Body: Other columns -->\r\n <div class=\"mobile-card__body\">\r\n <div *ngFor=\"let column of getMobileCardColumns()\" class=\"mobile-card__row\">\r\n <div class=\"mobile-card__row-label\">\r\n <span>{{ labelKey(column) | translate }} :</span>\r\n </div>\r\n <div class=\"mobile-card__row-value\">\r\n <ng-container [ngSwitch]=\"column.type\">\r\n <ng-container *ngSwitchCase=\"'stateType'\">\r\n <button mat-button class=\"stateType {{ row[column.property]}}\" \r\n [attr.id]=\"'mobile-btn-state-'+column.property\">\r\n {{ labelKeyByValue(column, row) | translate}}\r\n </button>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'date'\">\r\n {{ extractFieldName(row, column.property) | date:'dd/MM/yyyy' }}\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'netAmount'\">\r\n <span class=\"mobile-card__amount-currency\">{{ row[column.currency] }}</span>\r\n <span class=\"mobile-card__amount-value\">{{ extractFieldName(row, column.property) | currency:'':'' }}</span>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'localDateTime'\">\r\n {{ extractFieldName(row, column.property) | date : extractFormat(column) }}\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'bigdecimal'\">\r\n <small><sup class=\"mainTable__td__currency\">{{row[column.currency]}}</sup></small>\r\n {{ extractFieldName(row, column.property) | number : (column.digitInfo || '1.3-5') }}\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchDefault>\r\n <ng-container *ngIf=\"column.translate; else noTranslate\">\r\n <span>{{ pageInfo.labelsSection + \".\" + extractFieldName(row, column.property) | translate }}</span>\r\n </ng-container>\r\n <ng-template #noTranslate>\r\n <span [innerHtml]='extractFieldName(row, column.property)'></span>\r\n </ng-template>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Mobile Card Actions -->\r\n <div class=\"mobile-card__actions\" *ngIf=\"listAction && listAction.length > 0\">\r\n <app-button-actions\r\n [row]=\"row\"\r\n [buttonsAction]=\"true\"\r\n [listAction]=\"listAction\"\r\n [actions]=\"listAction\"\r\n (clickedButton)=\"actionListClicked($event,row)\">\r\n </app-button-actions>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"noDataFound\" class=\"dataNotFound flex-column\">\r\n <img *ngIf=\"getDisplaySvgPath()\" [src]=\"getDisplaySvgPath()\" class=\"dataNotFound__icon\" alt=\"No data found\" />\r\n <span class=\"dataNotFound__title\">{{ getDisplayTitle() | translate}}</span>\r\n <span class=\"dataNotFound__subtitle\">{{ getDisplaySubtitle() | translate}}</span>\r\n </div>\r\n\r\n\r\n <div *ngIf=\"(dataSource.data?.length > 0 || customizedData) && !pageInfo.hidePagination\" class=\"main-pagination flex-row\">\r\n <ng-container *ngIf=\"enablePagination\">\r\n <div class=\"flex-column flex-100\">\r\n <app-paginator\r\n [currentPage]=\"pageIndex\"\r\n [totalItems]=\"totalElements\"\r\n [pageSize]=\"pageSize\"\r\n [pageSizeOptions]=\"[5, 10, 25, 50]\"\r\n [mobileLoadMoreIncrement]=\"mobileLoadMoreIncrement\"\r\n [displayedItems]=\"mobileDisplayedItems || dataSource.data.length\"\r\n (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"\r\n (loadMore)=\"onLoadMore($event)\">\r\n </app-paginator>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [":host{display:block;width:100%;max-width:100%;box-sizing:border-box}.baseTable{width:100%!important;max-width:100%!important;box-sizing:border-box}.flex-row{display:flex;flex-direction:row}.flex-column{display:flex;flex-direction:column;width:100%;max-width:100%;box-sizing:border-box}.flex-100{flex:1 1 100%}.flex-49{flex:0 0 49%}.flex-50{flex:0 0 50%}.align-start{justify-content:flex-start;align-items:flex-start}.align-center{justify-content:center;align-items:center}.align-end{justify-content:flex-end;align-items:flex-end}.gap-0{gap:0}.gap-5{gap:5px}.gap-10{gap:10px}.dataNotFound{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;text-align:center;margin-top:80px}.dataNotFound__icon{height:auto;width:auto;max-width:200px;max-height:200px;margin-bottom:8px;object-fit:contain}.dataNotFound__title{color:#6a6a6a;font-size:20px;font-weight:700;margin-bottom:4px}.dataNotFound__subtitle{color:#6a6a6a;font-size:20px;font-weight:400}@media (max-width: 960px){.flex-column-sm{flex-direction:column}.align-center-sm{justify-content:center;align-items:flex-start}}.filter-row{display:flex!important;flex-direction:row!important;align-items:center!important;width:100%!important;max-width:100%!important;gap:16px!important;box-sizing:border-box;margin-top:20px;margin-bottom:16px;padding:0;flex-wrap:nowrap!important;min-width:0!important;min-height:48px!important;overflow:visible!important}.filter-row app-filter-builder{flex:1 1 auto!important;min-width:0!important;max-width:none!important;width:auto!important;flex-shrink:1!important;display:flex!important;align-items:center!important;overflow:visible!important}.button-group{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-end;gap:8px!important;flex-shrink:0!important;flex-grow:0!important;flex-basis:auto!important;height:46px!important;white-space:nowrap!important;z-index:1!important}.mainTable{margin-top:0!important}.btn-apply-filter{background:#fff!important;border:1px solid #3e627b!important;border-radius:8px!important;height:46px!important;min-width:120px!important;padding:0 16px!important;box-shadow:none!important}.btn-apply-filter .button-text{display:flex;align-items:center;justify-content:center;gap:4px;width:100%}.btn-apply-filter mat-icon{font-size:24px;width:24px;height:30px;color:#0d4261}.btn-apply-filter span{font-family:Lusail,sans-serif;font-weight:500;font-size:16px;line-height:1.2;color:#0d4261;white-space:nowrap}.btn-apply-filter:hover{background:#fafafa!important}.btn-export{background:#fff!important;border:1px solid #0d4261!important;border-radius:8px!important;height:46px!important;min-width:109px!important;padding:0 16px!important;box-shadow:none!important;margin-bottom:7px!important}.btn-export .button-text{display:flex;align-items:center;justify-content:center;gap:4px;width:100%}.btn-export mat-icon{font-size:24px;width:24px;height:30px;color:#0d4261}.btn-export .arrow-icon{font-size:16px;width:16px;height:16px;margin-left:0}.btn-export span{font-family:Lusail,sans-serif;font-weight:500;font-size:16px;line-height:1.2;color:#0d4261;white-space:nowrap}.btn-export:hover{background:#fafafa!important}.arrow-icon{font-size:16px;width:16px;height:16px}@media (max-width: 1024px){.button-group{width:auto}}@media (max-width: 768px){.filter-row{flex-direction:column;align-items:stretch}.button-group{display:none!important}.btn-export{width:100%}}.table-container{width:100%;overflow:hidden;background:#f7f7f7;box-sizing:border-box;display:flex;flex-direction:column}.table-header{display:flex;align-items:center;background:#f7f7f7;border:1px solid #f0eeee;max-height:48px;height:48px;margin-bottom:16px;border-radius:8px;overflow:hidden;width:100%;box-sizing:border-box;min-width:0}.table-header-cell{display:flex;align-items:center;max-height:48px;height:48px;padding:8px 16px;flex:1;min-width:100px;position:sticky;top:0;background:none;z-index:10;box-sizing:border-box}.table-header-cell.has-width{flex:0 0 auto!important;min-width:0!important;max-width:none!important}.table-header-cell:last-child{border-right:none}.table-header-cell.first-cell{border-top-left-radius:8px;border-bottom-left-radius:8px}.table-header-cell.last-cell{border-top-right-radius:8px;border-bottom-right-radius:8px}.table-header-cell.actions-cell{justify-content:center;text-align:center}.table-header-cell.actions-cell .table-header-content{justify-content:center}.table-header-cell.sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.table-header-cell.sortable:hover{background:#fafafa}.table-header-content{display:flex;align-items:center;gap:8px;width:100%}.table-header-label{font-family:Lusail,sans-serif;font-weight:500;font-size:16px;line-height:1.2;color:#0d4261;white-space:nowrap}.sort-icon{font-size:18px;width:18px;height:18px;color:#5c5c5c;display:flex;align-items:center;justify-content:center;transition:color .2s}.sort-icon.sort-asc,.sort-icon.sort-desc{color:#0d4261}.table-body{display:flex;flex-direction:column;gap:8px;background:#f7f7f7}.table-row{display:flex;align-items:center;min-height:48px;background:#fff;border-bottom:1px solid #f0eeee;cursor:pointer;transition:background-color .2s;border-radius:8px;overflow:hidden;width:100%;box-sizing:border-box;min-width:0}.table-row:hover{background:#fafafa}.table-row--highlight{background:#f0f8ff}.table-row--dark-highlight{background:#e8f4f8}.table-row .table-cell.first-cell{border-top-left-radius:8px;border-bottom-left-radius:8px}.table-row .table-cell.last-cell{border-top-right-radius:8px;border-bottom-right-radius:8px}.table-cell{display:flex;align-items:center;min-height:48px;max-height:48px;padding:8px 16px;flex:1;min-width:100px;font-family:Lusail,sans-serif;font-weight:400;font-size:16px;line-height:1.2;color:#000;box-sizing:border-box}.table-cell.has-width{flex:0 0 auto!important;min-width:0!important;max-width:none!important}.table-cell:last-child{border-right:none}.table-cell.actions-cell{justify-content:center;text-align:center}.mobile-cards-container{display:none;flex-direction:column;gap:12px;width:100%;box-sizing:border-box}.mobile-card{background:#fff;border:1px solid #f0eeee;border-radius:8px;padding:12px 20px;display:flex;flex-direction:column;gap:4px;cursor:pointer;transition:background-color .2s;box-sizing:border-box;width:100%}.mobile-card:hover{background:#fafafa}.mobile-card--highlight{background:#f0f8ff}.mobile-card--dark-highlight{background:#e8f4f8}.mobile-card__header{display:flex;align-items:center;justify-content:space-between;height:48px;width:100%;box-sizing:border-box}.mobile-card__header-id{display:flex;flex-direction:column;justify-content:center;flex:1}.mobile-card__id-text{font-family:Lusail,sans-serif;font-weight:700;font-size:14px;line-height:1.2;color:#222;text-align:left;white-space:nowrap}.mobile-card__header-status{display:flex;align-items:center;justify-content:flex-end;flex-shrink:0}.mobile-card__divider{height:.347px;width:100%;background:#f0eeee;margin:0;flex-shrink:0}.mobile-card__body{display:flex;flex-direction:column;gap:0;width:100%;box-sizing:border-box}.mobile-card__row{display:flex;align-items:center;justify-content:space-between;height:40px;width:100%;overflow:hidden;box-sizing:border-box}.mobile-card__row-label{display:flex;flex-direction:column;justify-content:center;flex-shrink:0}.mobile-card__row-label span{font-family:Lusail,sans-serif;font-weight:400;font-size:14px;line-height:1.2;color:#222;white-space:nowrap}.mobile-card__row-value{display:flex;flex-direction:column;justify-content:center;flex-shrink:0;text-align:right}.mobile-card__row-value span{font-family:Lusail,sans-serif;font-weight:400;font-size:14px;line-height:1.2;color:#222;white-space:nowrap}.mobile-card__amount-currency{font-family:Lusail,sans-serif;font-weight:400;font-size:14px;line-height:1.2;color:#222;display:inline-block}.mobile-card__amount-value{font-family:Lusail,sans-serif;font-weight:700;font-size:14px;line-height:1.2;color:#222;display:inline-block;margin-left:6px;margin-right:6px}.mobile-card__actions{border-top:1px solid #f0eeee;padding-top:8px;margin-top:4px;display:flex;align-items:center;justify-content:center;min-height:48px;max-height:48px;width:100%;box-sizing:border-box}@media (max-width: 768px){.table-container{display:none}.mobile-cards-container{display:flex}}@media (min-width: 769px){.mobile-cards-container{display:none}.table-container{display:flex}}\n"] }]
|
|
3377
3431
|
}], ctorParameters: () => [{ type: BackendService }, { type: i2.TranslateService }, { type: ShareDataService }, { type: undefined, decorators: [{
|
|
3378
3432
|
type: Inject,
|
|
3379
3433
|
args: ['securityManager']
|
|
@@ -4020,7 +4074,7 @@ class EditableBaseTableComponent extends BaseUtils {
|
|
|
4020
4074
|
// deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS],
|
|
4021
4075
|
// },
|
|
4022
4076
|
// { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS },
|
|
4023
|
-
], viewQueries: [{ propertyName: "uploaderComponent", first: true, predicate: ["uploader"], descendants: true }, { propertyName: "fileUpload", first: true, predicate: ["fileUpload"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"baseTable flex-column\">\r\n <div class=\"left-align\">\r\n <app-attachment-uploader #uploader\r\n *ngIf=\"isBulkItemsSupported\"\r\n (fileSelected)=\"handleFileUpload($event)\">\r\n </app-attachment-uploader>\r\n </div>\r\n\r\n <div class=\"flex-row full-width\">\r\n <div class=\"flex-half flex-column align-center-start\">\r\n <app-title-bar [pageTitle]=\"pageInfo.hideTitle ? '' : pageInfo.labelsSection+'.list_title'\"\r\n [titleMode]=\"''\"\r\n [newAction]=\"false\"\r\n [showExtractButton]=\"!pageInfo.hideExtractButton\">\r\n </app-title-bar>\r\n <span class=\"font-small\">{{ 'totalCountItem' | translate }} : {{ this.totalElements }}</span>\r\n </div>\r\n <div class=\"flex-half flex-column align-start-end\">\r\n <mat-chip-listbox #box aria-label=\"Color selection\" [multiple]=\"false\" [value]=\"isPending ? 'PENDING' : 'COMPLETED'\" (click)=\"$event.stopPropagation()\" (change)=\"onChipSelectionChange($event, box)\" *ngIf=\"pageInfo.draftSupported\">\r\n <mat-chip-option [selected]=\"!isPending\" [color]=\"'accent'\" value=\"COMPLETED\" (click)=\"$event.stopPropagation()\">\r\n {{ 'finished' | translate }}\r\n </mat-chip-option>\r\n <mat-chip-option [selected]=\"isPending\" [color]=\"'accent'\" value=\"PENDING\" (click)=\"$event.stopPropagation()\">\r\n {{ 'todo' | translate }}\r\n </mat-chip-option>\r\n </mat-chip-listbox>\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"showSearch()\">\r\n <div class=\"flex-row full-width\">\r\n <div class=\"flex-80 flex-column align-start-end\">\r\n <app-base-form-canvas class=\"flex-fill\"\r\n [pageInfo]=\"pageInfo\"\r\n [fields]=\"searchFormFields\"\r\n [editable]=\"true\"\r\n (formUpdated)=\"updateSearchForm($event)\">\r\n </app-base-form-canvas>\r\n </div>\r\n <div class=\"flex-15 flex-column align-start-end\">\r\n <div class=\"flex-row align-center-center gap-8 full-width\">\r\n <button mat-button color=\"primary\" type=\"button\" (click)=\"doSearch()\" id=\"editable-search-btn\">\r\n <mat-icon>search</mat-icon>\r\n {{ 'search' | translate }}\r\n </button>\r\n <button mat-button color=\"primary\" type=\"button\" (click)=\"clearSearch()\" id=\"editable-clear-search-btn\">\r\n <mat-icon>clear</mat-icon>\r\n {{ 'clear' | translate }}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"flex-row full-width baseTable__detailsColumn\">\r\n <div class=\"flex-full\">\r\n <ng-container *ngIf=\"isLoaded\">\r\n <div class=\"flex-row mainTable gap-0 align-start-start\">\r\n <form [formGroup]=\"formParam\" class=\"flex-fill\">\r\n <table [dataSource]=\"dataFormArray.controls\" class=\"flex-fill\" mat-table matSort>\r\n <ng-container *ngFor=\"let column of this.fields; let i = index\">\r\n <ng-container matColumnDef=\"{{column.property}}\">\r\n <ng-container [ngSwitch]=\"column.type\">\r\n <ng-container *ngSwitchCase=\"'equation-builder'\">\r\n <th *matHeaderCellDef class=\"mainTable__th\" mat-header-cell>{{ labelKey(column) | translate }}\r\n </th>\r\n <td *matCellDef=\"let element\" class=\"mainTable__td\"\r\n [ngClass]=\"['mainTable__td__text-secondary__td']\" mat-cell>\r\n <lib-equation-builder\r\n [form]=\"element\"\r\n [field]=\"column\"\r\n [readOnly]=\"column.readonly\"\r\n [isPending]=\"isPending\"\r\n (valueChanged)=\"handleEquationChange($event, element, column)\">\r\n </lib-equation-builder>\r\n </td>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'lookup'\">\r\n <th *matHeaderCellDef class=\"mainTable__th\" mat-header-cell>{{ labelKey(column) | translate }}\r\n </th>\r\n <td *matCellDef=\"let element\" class=\"mainTable__td\"\r\n [ngClass]=\"['mainTable__td__text-secondary__td']\"\r\n mat-cell>\r\n <app-auto-complete\r\n [form]=\"element\"\r\n [field]=\"column\"\r\n [defaultValue]=\"element.get(column.property)?.value\"\r\n (selectedValue)=\"patchLookupValue($event, column.property)\">\r\n </app-auto-complete>\r\n </td>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'list'\">\r\n <th *matHeaderCellDef class=\"mainTable__th\" mat-header-cell>{{ labelKey(column) | translate }}</th>\r\n <td *matCellDef=\"let element\" class=\"mainTable__td\"\r\n [ngClass]=\"['mainTable__td__text-secondary__td']\"\r\n mat-cell>\r\n <mat-label>{{element}}</mat-label>\r\n <mat-select\r\n formControlName=\"{{column.property}}\"\r\n [attr.aria-label]=\"column.label! | translate\"\r\n [multiple]=\"false\"\r\n [(value)]=\"element[column.property]\">\r\n <ng-container>\r\n <mat-option\r\n *ngFor=\"let item of column.listOptions\"\r\n [value]=\"item\">\r\n {{ getOptionValue(item) }}\r\n </mat-option>\r\n </ng-container>\r\n </mat-select>\r\n </td>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'stateType'\">\r\n <th *matHeaderCellDef class=\"mainTable__th\" mat-header-cell>\r\n {{ 'action' | translate }}\r\n </th>\r\n <td *matCellDef=\"let element\" class=\"mainTable__td mainTable__td__text-secondary__td\" mat-cell>\r\n <div class=\"flex-column\">\r\n <div class=\"flex-row full-width\">\r\n <div class=\"flex-third flex-column align-center-center\">\r\n <button mat-button class=\"btn-none-background-primary\"\r\n color=\"primary\"\r\n [disabled]=\"disabledSaveButton(element)\"\r\n (click)=\"fieldButtonEvent(column,element,SAVE)\"\r\n [attr.id]=\"'editable-save-' + (element.value?.id || '')\">\r\n {{ getPositiveWfActionKey(element.value.stateType) | translate }}\r\n </button>\r\n </div>\r\n <div class=\"flex-third flex-column align-center-center\">\r\n <button *ngIf=\"isPending\" mat-button class=\"btn-none-background-primary\"\r\n color=\"accent\"\r\n (click)=\"fieldButtonEvent(column,element,REJECT)\"\r\n [attr.id]=\"'editable-reject-' + (element.value?.id || '')\">\r\n {{ getNegativeWfActionKey(element.value.stateType) | translate }}\r\n </button>\r\n </div>\r\n <div class=\"flex-third flex-column align-center-center\"></div>\r\n </div>\r\n </div>\r\n </td>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'year'\">\r\n <th *matHeaderCellDef class=\"mainTable__th\" mat-header-cell>{{ labelKey(column) | translate }}\r\n </th>\r\n <td *matCellDef=\"let element\" class=\"mainTable__td\"\r\n [ngClass]=\"['mainTable__td__text-secondary__td']\"\r\n mat-cell>\r\n <mat-form-field class=\"flex-auto fx-flex-fill\" appearance=\"outline\">\r\n <mat-label>{{ labelKey(column) | translate }}</mat-label>\r\n <input matInput\r\n [disabled]=\"column.readonly\"\r\n [readonly]=\"column.readonly\"\r\n [matDatepicker]=\"picker\"\r\n [formControl]=\"getField(element, column)\"\r\n [required]=\"column.required\"\r\n [attr.aria-required]=\"column.required\"\r\n [attr.aria-labelledby]=\"'label-' + column.property\"\r\n [attr.aria-describedby]=\"'error-' + column.property\">\r\n <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n <mat-datepicker #picker startView=\"multi-year\"\r\n (yearSelected)=\"setMonthAndYear($event, picker, element,column)\"\r\n panelClass=\"example-month-picker\"></mat-datepicker>\r\n\r\n </mat-form-field>\r\n <!-- <mat-form-field class=\"flex-auto\" appearance=\"outline\" fxFlexFill>-->\r\n <!-- <input matInput [formControl]=\"getField(element, column)\">-->\r\n <!-- </mat-form-field>-->\r\n </td>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'number'\">\r\n <th *matHeaderCellDef class=\"mainTable__th\" mat-header-cell>\r\n {{ labelKey(column) | translate }}\r\n </th>\r\n <td *matCellDef=\"let element\" class=\"mainTable__td\"\r\n [ngClass]=\"['mainTable__td__text-secondary__td']\"\r\n mat-cell>\r\n <mat-form-field class=\"flex-auto fx-flex-fill\" appearance=\"outline\">\r\n <!-- Visually hidden label just to trigger the floating label and asterisk -->\r\n <mat-label>\r\n </mat-label>\r\n\r\n <input matInput\r\n type=\"number\"\r\n [formControl]=\"getField(element, column)\"\r\n [required]=\"column.required\"\r\n [readonly]=\"column.readonly\"\r\n [attr.aria-required]=\"column.required\"\r\n [attr.aria-labelledby]=\"'label-' + column.property\"\r\n [attr.aria-describedby]=\"'error-' + column.property\">\r\n </mat-form-field>\r\n </td>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'status'\">\r\n <th *matHeaderCellDef class=\"mainTable__th\" mat-header-cell>\r\n {{ labelKey(column) | translate }}\r\n </th>\r\n <td *matCellDef=\"let element\" class=\"mainTable__td\"\r\n [ngClass]=\"['mainTable__td__text-secondary__td']\"\r\n mat-cell>\r\n <mat-checkbox\r\n style=\"padding-bottom: 14px; padding-top: 14px;\"\r\n [formControl]=\"getField(element, column)\"\r\n [required]=\"column.required\"\r\n [attr.aria-required]=\"column.required\"\r\n [attr.aria-labelledby]=\"'label-' + column.property\"\r\n [attr.aria-describedby]=\"'error-' + column.property\"\r\n [style.pointer-events]=\"column.readonly ? 'none' : 'auto'\"\r\n [style.opacity]=\"column.readonly ? 0.7 : 1\"\r\n (click)=\"column.readonly ? $event.preventDefault() : null\">\r\n </mat-checkbox>\r\n </td>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'text'\">\r\n <th *matHeaderCellDef class=\"mainTable__th\" mat-header-cell>\r\n {{ labelKey(column) | translate }}\r\n </th>\r\n <td *matCellDef=\"let element\" class=\"mainTable__td\"\r\n [ngClass]=\"['mainTable__td__text-secondary__td']\"\r\n mat-cell>\r\n <mat-form-field class=\"flex-auto fx-flex-fill\" appearance=\"outline\">\r\n <mat-label>\r\n {{ labelKey(column) | translate }}\r\n </mat-label>\r\n <input matInput\r\n type=\"text\"\r\n [formControl]=\"getField(element, column)\"\r\n [required]=\"column.required\"\r\n [readonly]=\"column.readonly\"\r\n [attr.aria-required]=\"column.required\"\r\n [attr.aria-labelledby]=\"'label-' + column.property\"\r\n [attr.aria-describedby]=\"'error-' + column.property\">\r\n </mat-form-field>\r\n </td>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'date'\">\r\n <th *matHeaderCellDef class=\"mainTable__th\" mat-header-cell>\r\n {{ labelKey(column) | translate }}\r\n </th>\r\n <td *matCellDef=\"let element\" class=\"mainTable__td\"\r\n [ngClass]=\"['mainTable__td__text-secondary__td']\"\r\n mat-cell>\r\n <mat-form-field class=\"flex-auto fx-flex-fill\" appearance=\"outline\">\r\n <input matInput\r\n [matDatepicker]=\"xpicker\"\r\n [formControl]=\"getField(element, column)\"\r\n [required]=\"column.required\"\r\n [readonly]=\"column.readonly\"\r\n [disabled]=\"column.readonly\"\r\n [attr.aria-required]=\"column.required\"\r\n [attr.aria-labelledby]=\"'label-' + column.property\"\r\n [attr.aria-describedby]=\"'error-' + column.property\">\r\n <mat-datepicker-toggle\r\n matSuffix\r\n [for]=\"xpicker\"\r\n [disabled]=\"column.readonly\">\r\n </mat-datepicker-toggle>\r\n <mat-datepicker #xpicker></mat-datepicker>\r\n </mat-form-field>\r\n </td>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchDefault>\r\n <th *matHeaderCellDef class=\"mainTable__th\" mat-header-cell>{{ labelKey(column) | translate }}\r\n </th>\r\n <td *matCellDef=\"let element\" class=\"mainTable__td\"\r\n [ngClass]=\"['mainTable__td__text-secondary__td']\"\r\n mat-cell>\r\n <mat-form-field class=\"flex-auto fx-flex-fill\" appearance=\"outline\">\r\n <input matInput\r\n [readonly]=\"column.readonly\"\r\n [attr.aria-required]=\"column.required\"\r\n [formControl]=\"getField(element, column)\">\r\n </mat-form-field>\r\n </td>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n <tr *matHeaderRowDef=\"visibleColumns\" mat-header-row></tr>\r\n <tr (click)=\"onSelectItem(row)\" (auxclick)=\"openNewTab(row)\"\r\n *matRowDef=\"let row; columns: visibleColumns | paginate:config\"\r\n [attr.id]=\"'editable-row-' + (row?.value?.id || row?.value?.key || '')\"\r\n mat-row></tr>\r\n </table>\r\n </form>\r\n </div>\r\n\r\n <div *ngIf=\"noDataFound && !pageInfo.lazyLoadData\" class=\"flex-row dataNotFound\">\r\n <div class=\"flex-column flex-full\">\r\n <span class=\"dataNotFound__details\">\r\n <mat-icon class=\"dataNotFound__details__icon\">info</mat-icon>\r\n <span>{{ 'dataNotFound' | translate }}</span>\r\n </span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"flex-row mainTable\" *ngIf=\"!selectedFileFromUploader\">\r\n <div>\r\n <button *ngIf=\"!isPending && pageInfo.hasAddButton\" mat-button color=\"primary\" type=\"button\"\r\n (click)=\"addNewItem()\" id=\"editable-add-item-btn\">\r\n <mat-icon>add_box</mat-icon>\r\n {{ translationKey | translate }}\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"flex-row flex-wrap align-center-center main-pagination\" *ngIf=\"totalElements > 0\">\r\n <div class=\"flex-column flex-full\">\r\n <app-paginator [currentPage]=\"pageIndex\" [totalItems]=\"totalElements\" [pageSize]=\"pageSize\"\r\n [pageSizeOptions]=\"[5, 10, 25, 50]\" (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></app-paginator>\r\n </div>\r\n <div class=\"flex-column flex-full countItem hide-gt-xs\">\r\n <span class=\"countItem__totalElement\">{{ 'totalCountItem' | translate }} : {{ this.totalElements }}</span>\r\n </div>\r\n <div class=\"flex-column flex-2\"></div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"isBulkItemsSupported\" class=\"flex-row gap-10 align-start-start mainTable\">\r\n <div>\r\n <button mat-flat-button color=\"primary\" type=\"button\" (click)=\"addBulkItems()\" [disabled]=\"shouldDisableBulkAdd()\" id=\"editable-bulk-add-btn\">\r\n <mat-icon>add_box</mat-icon>\r\n {{ 'addAll' | translate }}\r\n </button>\r\n </div>\r\n <div>\r\n <button mat-flat-button color=\"warn\" type=\"button\" [disabled]=\"!hasDataToClear()\" (click)=\"clearBulkItems()\" id=\"editable-bulk-clear-btn\">\r\n <mat-icon>delete</mat-icon>\r\n {{ 'clearAll' | translate }}\r\n </button>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".baseTable{padding:20px}.example-month-picker .mat-calendar-period-button{pointer-events:none}.example-month-picker .mat-calendar-arrow{display:none}.responsive-top-gap{margin-top:20px}@media (max-width: 959px){.responsive-top-gap{margin-top:1px}.baseTable{padding:20px;margin-inline:8px;width:max-content}}.flex-row{display:flex;flex-direction:row}.flex-column{display:flex;flex-direction:column}.flex-half{flex:0 0 50%}.flex-80{flex:0 0 80%}.flex-15{flex:0 0 15%}.flex-2{flex:0 0 2%}.flex-full{flex:0 0 100%}.align-start-start{justify-content:flex-start;align-items:flex-start}.align-start-end{justify-content:flex-end;align-items:flex-start}.align-center-start{justify-content:flex-start;align-items:center}.align-center-center{justify-content:center;align-items:center}.align-end-start{justify-content:flex-start;align-items:flex-end}.align-end-end{justify-content:flex-end;align-items:flex-end}.gap-8{gap:8px}.gap-10{gap:10px}.gap-0{gap:0px}@media (max-width: 959px){.flex-column.lt-md{flex-direction:column}.flex-row.lt-md{flex-direction:row}.flex-full.lt-md{flex:0 0 100%}.align-center-center.lt-md{justify-content:center;align-items:center}}@media (max-width: 599px){.flex-hide.gt-xs{display:none!important}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i7.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5$1.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "ngmodule", type: NgxPaginationModule }, { kind: "pipe", type: i9$1.PaginatePipe, name: "paginate" }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: AutoCompleteComponent, selector: "app-auto-complete", inputs: ["field", "form", "defaultValue", "readonly", "supportingAttributes"], outputs: ["selectedValue"] }, { kind: "component", type: MatFormField$2, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: MatLabel$1, selector: "mat-label" }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "component", type: TitleBarComponent, selector: "app-title-bar", inputs: ["pageTitle", "showExtractButton", "totalElements", "titleMode", "pageInfo", "subTitle", "statusDesc", "newAction", "extraButton", "showDetails", "showImport", "showButton", "extraData", "titleCorporateAdmin", "hideBackButton", "buttons", "buttonsDisplayMode", "draftSupported", "isPending", "onViewModeChange"], outputs: ["newActionClicked", "extraButtonClicked", "extractReport", "buttonClicked", "viewModeChanged"] }, { kind: "component", type: PaginatorComponent, selector: "app-paginator", inputs: ["currentPage", "totalItems", "pageSize", "pageSizeOptions", "mobileLoadMoreIncrement", "displayedItems"], outputs: ["pageChange", "pageSizeChange", "loadMore"] }, { kind: "component", type: AttachmentUploaderComponent, selector: "app-attachment-uploader", inputs: ["acceptedTypes"], outputs: ["fileSelected"] }, { kind: "component", type: EquationBuilderComponent, selector: "lib-equation-builder", inputs: ["form", "field", "isPending", "readOnly"], outputs: ["valueChanged"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { 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: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }], animations: [] }); }
|
|
4077
|
+
], viewQueries: [{ propertyName: "uploaderComponent", first: true, predicate: ["uploader"], descendants: true }, { propertyName: "fileUpload", first: true, predicate: ["fileUpload"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"baseTable flex-column\">\r\n <div class=\"left-align\">\r\n <app-attachment-uploader #uploader\r\n *ngIf=\"isBulkItemsSupported\"\r\n (fileSelected)=\"handleFileUpload($event)\">\r\n </app-attachment-uploader>\r\n </div>\r\n\r\n <div class=\"flex-row full-width\">\r\n <div class=\"flex-half flex-column align-center-start\">\r\n <app-title-bar [pageTitle]=\"pageInfo.hideTitle ? '' : pageInfo.labelsSection+'.list_title'\"\r\n [titleMode]=\"''\"\r\n [newAction]=\"false\"\r\n [showExtractButton]=\"!pageInfo.hideExtractButton\">\r\n </app-title-bar>\r\n <span class=\"font-small\">{{ 'totalCountItem' | translate }} : {{ this.totalElements }}</span>\r\n </div>\r\n <div class=\"flex-half flex-column align-start-end\">\r\n <mat-chip-listbox #box aria-label=\"Color selection\" [multiple]=\"false\" [value]=\"isPending ? 'PENDING' : 'COMPLETED'\" (click)=\"$event.stopPropagation()\" (change)=\"onChipSelectionChange($event, box)\" *ngIf=\"pageInfo.draftSupported\">\r\n <mat-chip-option [selected]=\"!isPending\" [color]=\"'accent'\" value=\"COMPLETED\" (click)=\"$event.stopPropagation()\">\r\n {{ 'finished' | translate }}\r\n </mat-chip-option>\r\n <mat-chip-option [selected]=\"isPending\" [color]=\"'accent'\" value=\"PENDING\" (click)=\"$event.stopPropagation()\">\r\n {{ 'todo' | translate }}\r\n </mat-chip-option>\r\n </mat-chip-listbox>\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"showSearch()\">\r\n <div class=\"flex-row full-width\">\r\n <div class=\"flex-80 flex-column align-start-end\">\r\n <app-base-form-canvas class=\"flex-fill\"\r\n [pageInfo]=\"pageInfo\"\r\n [fields]=\"searchFormFields\"\r\n [editable]=\"true\"\r\n (formUpdated)=\"updateSearchForm($event)\">\r\n </app-base-form-canvas>\r\n </div>\r\n <div class=\"flex-15 flex-column align-start-end\">\r\n <div class=\"flex-row align-center-center gap-8 full-width\">\r\n <button mat-button color=\"primary\" type=\"button\" (click)=\"doSearch()\" id=\"editable-search-btn\">\r\n <mat-icon>search</mat-icon>\r\n {{ 'search' | translate }}\r\n </button>\r\n <button mat-button color=\"primary\" type=\"button\" (click)=\"clearSearch()\" id=\"editable-clear-search-btn\">\r\n <mat-icon>clear</mat-icon>\r\n {{ 'clear' | translate }}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"flex-row full-width baseTable__detailsColumn\">\r\n <div class=\"flex-full\">\r\n <ng-container *ngIf=\"isLoaded\">\r\n <div class=\"flex-row mainTable gap-0 align-start-start\">\r\n <form [formGroup]=\"formParam\" class=\"flex-fill\">\r\n <table [dataSource]=\"dataFormArray.controls\" class=\"flex-fill\" mat-table matSort>\r\n <ng-container *ngFor=\"let column of this.fields; let i = index\">\r\n <ng-container matColumnDef=\"{{column.property}}\">\r\n <ng-container [ngSwitch]=\"column.type\">\r\n <ng-container *ngSwitchCase=\"'equation-builder'\">\r\n <th *matHeaderCellDef class=\"mainTable__th\" mat-header-cell>{{ labelKey(column) | translate }}\r\n </th>\r\n <td *matCellDef=\"let element\" class=\"mainTable__td\"\r\n [ngClass]=\"['mainTable__td__text-secondary__td']\" mat-cell>\r\n <lib-equation-builder\r\n [form]=\"element\"\r\n [field]=\"column\"\r\n [readOnly]=\"column.readonly\"\r\n [isPending]=\"isPending\"\r\n (valueChanged)=\"handleEquationChange($event, element, column)\">\r\n </lib-equation-builder>\r\n </td>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'lookup'\">\r\n <th *matHeaderCellDef class=\"mainTable__th\" mat-header-cell>{{ labelKey(column) | translate }}\r\n </th>\r\n <td *matCellDef=\"let element\" class=\"mainTable__td\"\r\n [ngClass]=\"['mainTable__td__text-secondary__td']\"\r\n mat-cell>\r\n <app-auto-complete\r\n [form]=\"element\"\r\n [field]=\"column\"\r\n [defaultValue]=\"element.get(column.property)?.value\"\r\n (selectedValue)=\"patchLookupValue($event, column.property)\">\r\n </app-auto-complete>\r\n </td>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'list'\">\r\n <th *matHeaderCellDef class=\"mainTable__th\" mat-header-cell>{{ labelKey(column) | translate }}</th>\r\n <td *matCellDef=\"let element\" class=\"mainTable__td\"\r\n [ngClass]=\"['mainTable__td__text-secondary__td']\"\r\n mat-cell>\r\n <mat-label>{{element}}</mat-label>\r\n <mat-select\r\n formControlName=\"{{column.property}}\"\r\n [attr.aria-label]=\"column.label! | translate\"\r\n [multiple]=\"false\"\r\n [(value)]=\"element[column.property]\">\r\n <ng-container>\r\n <mat-option\r\n *ngFor=\"let item of column.listOptions\"\r\n [value]=\"item\">\r\n {{ getOptionValue(item) }}\r\n </mat-option>\r\n </ng-container>\r\n </mat-select>\r\n </td>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'stateType'\">\r\n <th *matHeaderCellDef class=\"mainTable__th\" mat-header-cell>\r\n {{ 'action' | translate }}\r\n </th>\r\n <td *matCellDef=\"let element\" class=\"mainTable__td mainTable__td__text-secondary__td\" mat-cell>\r\n <div class=\"flex-column\">\r\n <div class=\"flex-row full-width\">\r\n <div class=\"flex-third flex-column align-center-center\">\r\n <button mat-button class=\"btn-none-background-primary\"\r\n color=\"primary\"\r\n [disabled]=\"disabledSaveButton(element)\"\r\n (click)=\"fieldButtonEvent(column,element,SAVE)\"\r\n [attr.id]=\"'editable-save-' + (element.value?.id || '')\">\r\n {{ getPositiveWfActionKey(element.value.stateType) | translate }}\r\n </button>\r\n </div>\r\n <div class=\"flex-third flex-column align-center-center\">\r\n <button *ngIf=\"isPending\" mat-button class=\"btn-none-background-primary\"\r\n color=\"accent\"\r\n (click)=\"fieldButtonEvent(column,element,REJECT)\"\r\n [attr.id]=\"'editable-reject-' + (element.value?.id || '')\">\r\n {{ getNegativeWfActionKey(element.value.stateType) | translate }}\r\n </button>\r\n </div>\r\n <div class=\"flex-third flex-column align-center-center\"></div>\r\n </div>\r\n </div>\r\n </td>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'year'\">\r\n <th *matHeaderCellDef class=\"mainTable__th\" mat-header-cell>{{ labelKey(column) | translate }}\r\n </th>\r\n <td *matCellDef=\"let element\" class=\"mainTable__td\"\r\n [ngClass]=\"['mainTable__td__text-secondary__td']\"\r\n mat-cell>\r\n <mat-form-field class=\"flex-auto fx-flex-fill\" appearance=\"outline\">\r\n <mat-label>{{ labelKey(column) | translate }}</mat-label>\r\n <input matInput\r\n [disabled]=\"column.readonly\"\r\n [readonly]=\"column.readonly\"\r\n [matDatepicker]=\"picker\"\r\n [formControl]=\"getField(element, column)\"\r\n [required]=\"column.required\"\r\n [attr.aria-required]=\"column.required\"\r\n [attr.aria-labelledby]=\"'label-' + column.property\"\r\n [attr.aria-describedby]=\"'error-' + column.property\">\r\n <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n <mat-datepicker #picker startView=\"multi-year\"\r\n (yearSelected)=\"setMonthAndYear($event, picker, element,column)\"\r\n panelClass=\"example-month-picker\"></mat-datepicker>\r\n\r\n </mat-form-field>\r\n <!-- <mat-form-field class=\"flex-auto\" appearance=\"outline\" fxFlexFill>-->\r\n <!-- <input matInput [formControl]=\"getField(element, column)\">-->\r\n <!-- </mat-form-field>-->\r\n </td>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'number'\">\r\n <th *matHeaderCellDef class=\"mainTable__th\" mat-header-cell>\r\n {{ labelKey(column) | translate }}\r\n </th>\r\n <td *matCellDef=\"let element\" class=\"mainTable__td\"\r\n [ngClass]=\"['mainTable__td__text-secondary__td']\"\r\n mat-cell>\r\n <mat-form-field class=\"flex-auto fx-flex-fill\" appearance=\"outline\">\r\n <!-- Visually hidden label just to trigger the floating label and asterisk -->\r\n <mat-label>\r\n </mat-label>\r\n\r\n <input matInput\r\n type=\"number\"\r\n [formControl]=\"getField(element, column)\"\r\n [required]=\"column.required\"\r\n [readonly]=\"column.readonly\"\r\n [attr.aria-required]=\"column.required\"\r\n [attr.aria-labelledby]=\"'label-' + column.property\"\r\n [attr.aria-describedby]=\"'error-' + column.property\">\r\n </mat-form-field>\r\n </td>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'status'\">\r\n <th *matHeaderCellDef class=\"mainTable__th\" mat-header-cell>\r\n {{ labelKey(column) | translate }}\r\n </th>\r\n <td *matCellDef=\"let element\" class=\"mainTable__td\"\r\n [ngClass]=\"['mainTable__td__text-secondary__td']\"\r\n mat-cell>\r\n <mat-checkbox\r\n style=\"padding-bottom: 14px; padding-top: 14px;\"\r\n [formControl]=\"getField(element, column)\"\r\n [required]=\"column.required\"\r\n [attr.aria-required]=\"column.required\"\r\n [attr.aria-labelledby]=\"'label-' + column.property\"\r\n [attr.aria-describedby]=\"'error-' + column.property\"\r\n [style.pointer-events]=\"column.readonly ? 'none' : 'auto'\"\r\n [style.opacity]=\"column.readonly ? 0.7 : 1\"\r\n (click)=\"column.readonly ? $event.preventDefault() : null\">\r\n </mat-checkbox>\r\n </td>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'text'\">\r\n <th *matHeaderCellDef class=\"mainTable__th\" mat-header-cell>\r\n {{ labelKey(column) | translate }}\r\n </th>\r\n <td *matCellDef=\"let element\" class=\"mainTable__td\"\r\n [ngClass]=\"['mainTable__td__text-secondary__td']\"\r\n mat-cell>\r\n <mat-form-field class=\"flex-auto fx-flex-fill\" appearance=\"outline\">\r\n <mat-label>\r\n {{ labelKey(column) | translate }}\r\n </mat-label>\r\n <input matInput\r\n type=\"text\"\r\n [formControl]=\"getField(element, column)\"\r\n [required]=\"column.required\"\r\n [readonly]=\"column.readonly\"\r\n [attr.aria-required]=\"column.required\"\r\n [attr.aria-labelledby]=\"'label-' + column.property\"\r\n [attr.aria-describedby]=\"'error-' + column.property\">\r\n </mat-form-field>\r\n </td>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'date'\">\r\n <th *matHeaderCellDef class=\"mainTable__th\" mat-header-cell>\r\n {{ labelKey(column) | translate }}\r\n </th>\r\n <td *matCellDef=\"let element\" class=\"mainTable__td\"\r\n [ngClass]=\"['mainTable__td__text-secondary__td']\"\r\n mat-cell>\r\n <mat-form-field class=\"flex-auto fx-flex-fill\" appearance=\"outline\">\r\n <input matInput\r\n [matDatepicker]=\"xpicker\"\r\n [formControl]=\"getField(element, column)\"\r\n [required]=\"column.required\"\r\n [readonly]=\"column.readonly\"\r\n [disabled]=\"column.readonly\"\r\n [attr.aria-required]=\"column.required\"\r\n [attr.aria-labelledby]=\"'label-' + column.property\"\r\n [attr.aria-describedby]=\"'error-' + column.property\">\r\n <mat-datepicker-toggle\r\n matSuffix\r\n [for]=\"xpicker\"\r\n [disabled]=\"column.readonly\">\r\n </mat-datepicker-toggle>\r\n <mat-datepicker #xpicker></mat-datepicker>\r\n </mat-form-field>\r\n </td>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchDefault>\r\n <th *matHeaderCellDef class=\"mainTable__th\" mat-header-cell>{{ labelKey(column) | translate }}\r\n </th>\r\n <td *matCellDef=\"let element\" class=\"mainTable__td\"\r\n [ngClass]=\"['mainTable__td__text-secondary__td']\"\r\n mat-cell>\r\n <mat-form-field class=\"flex-auto fx-flex-fill\" appearance=\"outline\">\r\n <input matInput\r\n [readonly]=\"column.readonly\"\r\n [attr.aria-required]=\"column.required\"\r\n [formControl]=\"getField(element, column)\">\r\n </mat-form-field>\r\n </td>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n <tr *matHeaderRowDef=\"visibleColumns\" mat-header-row></tr>\r\n <tr (click)=\"onSelectItem(row)\" (auxclick)=\"openNewTab(row)\"\r\n *matRowDef=\"let row; columns: visibleColumns | paginate:config\"\r\n [attr.id]=\"'editable-row-' + (row?.value?.id || row?.value?.key || '')\"\r\n mat-row></tr>\r\n </table>\r\n </form>\r\n </div>\r\n\r\n <div *ngIf=\"noDataFound && !pageInfo.lazyLoadData\" class=\"flex-row dataNotFound\">\r\n <div class=\"flex-column flex-full\">\r\n <span class=\"dataNotFound__details\">\r\n <mat-icon class=\"dataNotFound__details__icon\">info</mat-icon>\r\n <span>{{ 'dataNotFound' | translate }}</span>\r\n </span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"flex-row mainTable\" *ngIf=\"!selectedFileFromUploader\">\r\n <div>\r\n <button *ngIf=\"!isPending && pageInfo.hasAddButton\" mat-button color=\"primary\" type=\"button\"\r\n (click)=\"addNewItem()\" id=\"editable-add-item-btn\">\r\n <mat-icon>add_box</mat-icon>\r\n {{ translationKey | translate }}\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"flex-row flex-wrap align-center-center main-pagination\" *ngIf=\"totalElements > 0\">\r\n <div class=\"flex-column flex-full\">\r\n <app-paginator [currentPage]=\"pageIndex\" [totalItems]=\"totalElements\" [pageSize]=\"pageSize\"\r\n [pageSizeOptions]=\"[5, 10, 25, 50]\" (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></app-paginator>\r\n </div>\r\n <div class=\"flex-column flex-full countItem hide-gt-xs\">\r\n <span class=\"countItem__totalElement\">{{ 'totalCountItem' | translate }} : {{ this.totalElements }}</span>\r\n </div>\r\n <div class=\"flex-column flex-2\"></div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"isBulkItemsSupported\" class=\"flex-row gap-10 align-start-start mainTable\">\r\n <div>\r\n <button mat-flat-button color=\"primary\" type=\"button\" (click)=\"addBulkItems()\" [disabled]=\"shouldDisableBulkAdd()\" id=\"editable-bulk-add-btn\">\r\n <mat-icon>add_box</mat-icon>\r\n {{ 'addAll' | translate }}\r\n </button>\r\n </div>\r\n <div>\r\n <button mat-flat-button color=\"warn\" type=\"button\" [disabled]=\"!hasDataToClear()\" (click)=\"clearBulkItems()\" id=\"editable-bulk-clear-btn\">\r\n <mat-icon>delete</mat-icon>\r\n {{ 'clearAll' | translate }}\r\n </button>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".baseTable{padding:20px}.example-month-picker .mat-calendar-period-button{pointer-events:none}.example-month-picker .mat-calendar-arrow{display:none}.responsive-top-gap{margin-top:20px}@media (max-width: 959px){.responsive-top-gap{margin-top:1px}.baseTable{padding:20px;margin-inline:8px;width:max-content}}.flex-row{display:flex;flex-direction:row}.flex-column{display:flex;flex-direction:column}.flex-half{flex:0 0 50%}.flex-80{flex:0 0 80%}.flex-15{flex:0 0 15%}.flex-2{flex:0 0 2%}.flex-full{flex:0 0 100%}.align-start-start{justify-content:flex-start;align-items:flex-start}.align-start-end{justify-content:flex-end;align-items:flex-start}.align-center-start{justify-content:flex-start;align-items:center}.align-center-center{justify-content:center;align-items:center}.align-end-start{justify-content:flex-start;align-items:flex-end}.align-end-end{justify-content:flex-end;align-items:flex-end}.gap-8{gap:8px}.gap-10{gap:10px}.gap-0{gap:0px}@media (max-width: 959px){.flex-column.lt-md{flex-direction:column}.flex-row.lt-md{flex-direction:row}.flex-full.lt-md{flex:0 0 100%}.align-center-center.lt-md{justify-content:center;align-items:center}}@media (max-width: 599px){.flex-hide.gt-xs{display:none!important}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i7.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5$1.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "ngmodule", type: NgxPaginationModule }, { kind: "pipe", type: i9$1.PaginatePipe, name: "paginate" }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: AutoCompleteComponent, selector: "app-auto-complete", inputs: ["field", "form", "defaultValue", "readonly", "supportingAttributes"], outputs: ["selectedValue"] }, { kind: "component", type: MatFormField$2, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: MatLabel$1, selector: "mat-label" }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "component", type: TitleBarComponent, selector: "app-title-bar", inputs: ["pageTitle", "showExtractButton", "totalElements", "titleMode", "pageInfo", "subTitle", "statusDesc", "newAction", "extraButton", "showDetails", "showImport", "showButton", "extraData", "titleCorporateAdmin", "hideBackButton", "buttons", "buttonsDisplayMode", "draftSupported", "isPending", "onViewModeChange"], outputs: ["newActionClicked", "extraButtonClicked", "extractReport", "buttonClicked", "viewModeChanged"] }, { kind: "component", type: PaginatorComponent, selector: "app-paginator", inputs: ["currentPage", "totalItems", "pageSize", "pageSizeOptions", "mobileLoadMoreIncrement", "displayedItems"], outputs: ["pageChange", "pageSizeChange", "loadMore"] }, { kind: "component", type: AttachmentUploaderComponent, selector: "app-attachment-uploader", inputs: ["acceptedTypes"], outputs: ["fileSelected"] }, { kind: "component", type: EquationBuilderComponent, selector: "lib-equation-builder", inputs: ["form", "field", "isPending", "readOnly"], outputs: ["valueChanged"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: BaseFormCanvasComponent, selector: "app-base-form-canvas", inputs: ["pageInfo", "currency", "fields", "errors", "workflowEditableFields", "isWorkflowEditableManaged", "supportingAttributes", "editable", "emitOnValueChanges", "filterResetNonce", "item", "equationSuggestedFields", "currentEquationValue"], outputs: ["attachmentEmitter", "actionEmitter", "formUpdated", "hyperTextEvent", "currentEquationValueChange"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }], animations: [] }); }
|
|
4024
4078
|
}
|
|
4025
4079
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EditableBaseTableComponent, decorators: [{
|
|
4026
4080
|
type: Component,
|
|
@@ -4374,7 +4428,7 @@ class BaseFormComponent extends BaseUtils {
|
|
|
4374
4428
|
return (!this.isPending && element.stateType == 'PENDING') && this.pageInfo.draftSupported;
|
|
4375
4429
|
}
|
|
4376
4430
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BaseFormComponent, deps: [{ token: i1.MatDialog }, { token: i3$1.ActivatedRoute }, { token: i3$1.Router }, { token: i3.Directionality }, { token: i1$1.Location }, { token: 'securityManager' }, { token: BackendService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4377
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: BaseFormComponent, isStandalone: true, selector: "app-base-form", inputs: { pageInfo: "pageInfo", fields: "fields", errors: "errors", editable: "editable", itemId: "itemId", hideBackButton: "hideBackButton" }, outputs: { actionResultEmitter: "actionResultEmitter", formUpdated: "formUpdated", itemLoaded: "itemLoaded", extraAction: "extraAction", hyperTextEvent: "hyperTextEvent" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"page-container\">\r\n\r\n <div class=\"row full-width mt-2vh\">\r\n <div class=\"column full-width\">\r\n <app-title-bar\r\n [pageTitle]=\"getTitle()\"\r\n [newAction]=\"false\"\r\n [hideBackButton]=\"hideBackButton\">\r\n </app-title-bar>\r\n </div>\r\n </div>\r\n\r\n <app-base-form-canvas\r\n [pageInfo]=\"pageInfo\"\r\n [fields]=\"fields\"\r\n [editable]=\"editable\"\r\n [errors]=\"errors\"\r\n [item]=\"item\"\r\n (formUpdated)=\"updateForm($event)\">\r\n </app-base-form-canvas>\r\n\r\n <div class=\"row main-form-canvas mt-3vh\">\r\n <div class=\"column flex-49\">\r\n <div class=\"row row-center-start\">\r\n <button *ngIf=\"hasWfPositivePermission()\" color=\"primary\" mat-flat-button\r\n (click)=\"doSaveApproveAction()\"\r\n [disabled]=\"disabledSaveButton(item)\"\r\n class=\"action-button\"\r\n id=\"base-form-positive-btn\">\r\n {{ getPositiveWfActionKey(item?.stateType) | translate }}\r\n </button>\r\n <button *ngIf=\"hasWfNegativePermission()\" color=\"second\" mat-raised-button\r\n (click)=\"doCancelRejectAction()\"\r\n [disabled]=\"disabledSaveButton(item)\"\r\n class=\"action-button\"\r\n id=\"base-form-negative-btn\">\r\n {{ getNegativeWfActionKey(item?.stateType) | translate }}\r\n </button>\r\n <button *ngIf=\"pageInfo.hideExtractButton === false && itemId > 0 && editable\" color=\"primary\" mat-raised-button\r\n (click)=\"doExtraAction()\"\r\n class=\"action-button\"\r\n id=\"base-form-extra-btn\">\r\n {{ pageInfo.labelsSection + \".\" + \"EXTRA_BUTTON_NAME\" | translate }}\r\n </button>\r\n </div>\r\n </div>\r\n <div class=\"column flex-49\"></div>\r\n </div>\r\n\r\n\r\n <ng-container *ngIf=\"!pageInfo.hideAuditLog\">\r\n <div class=\"row main-form-canvas mt-4vh pb-5vh\">\r\n <div class=\"column flex-95\">\r\n <app-audit-log [pageInfo]=\"pageInfo\" [fields]=\"fields\"></app-audit-log>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n</div>\r\n", styles: [".page-container{display:flex;flex-direction:column;width:100%}.row{display:flex;flex-direction:row;gap:10px;width:100%;flex-wrap:wrap}.column{display:flex;flex-direction:column}.full-width{width:100%}.flex-49{flex:0 0 49%}.flex-95{flex:0 0 95%}.row-center-start{align-items:center;justify-content:flex-start}.mt-2vh{margin-top:2vh}.mt-3vh{margin-top:3vh}.mt-4vh{margin-top:4vh}.pb-5vh{padding-bottom:5vh}.action-button{font-weight:700;min-width:140px;max-width:200px;margin:0 10px}@media (max-width: 960px){.flex-49,.flex-95{flex:1 1 100%}}@media (max-width: 600px){.row{flex-direction:column;align-items:center}.action-button{width:100%;max-width:300px;margin:5px 0}}\n"], dependencies: [{ kind: "component", type: TitleBarComponent, selector: "app-title-bar", inputs: ["pageTitle", "showExtractButton", "totalElements", "titleMode", "pageInfo", "subTitle", "statusDesc", "newAction", "extraButton", "showDetails", "showImport", "showButton", "extraData", "titleCorporateAdmin", "hideBackButton", "buttons", "buttonsDisplayMode", "draftSupported", "isPending", "onViewModeChange"], outputs: ["newActionClicked", "extraButtonClicked", "extractReport", "buttonClicked", "viewModeChanged"] }, { 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: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5$1.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: AuditLogComponent, selector: "app-audit-log", inputs: ["pageInfo", "statusName", "module", "identifier", "fields", "showHiddenFields"] }] }); }
|
|
4431
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: BaseFormComponent, isStandalone: true, selector: "app-base-form", inputs: { pageInfo: "pageInfo", fields: "fields", errors: "errors", editable: "editable", itemId: "itemId", hideBackButton: "hideBackButton" }, outputs: { actionResultEmitter: "actionResultEmitter", formUpdated: "formUpdated", itemLoaded: "itemLoaded", extraAction: "extraAction", hyperTextEvent: "hyperTextEvent" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"page-container\">\r\n\r\n <div class=\"row full-width mt-2vh\">\r\n <div class=\"column full-width\">\r\n <app-title-bar\r\n [pageTitle]=\"getTitle()\"\r\n [newAction]=\"false\"\r\n [hideBackButton]=\"hideBackButton\">\r\n </app-title-bar>\r\n </div>\r\n </div>\r\n\r\n <app-base-form-canvas\r\n [pageInfo]=\"pageInfo\"\r\n [fields]=\"fields\"\r\n [editable]=\"editable\"\r\n [errors]=\"errors\"\r\n [item]=\"item\"\r\n (formUpdated)=\"updateForm($event)\">\r\n </app-base-form-canvas>\r\n\r\n <div class=\"row main-form-canvas mt-3vh\">\r\n <div class=\"column flex-49\">\r\n <div class=\"row row-center-start\">\r\n <button *ngIf=\"hasWfPositivePermission()\" color=\"primary\" mat-flat-button\r\n (click)=\"doSaveApproveAction()\"\r\n [disabled]=\"disabledSaveButton(item)\"\r\n class=\"action-button\"\r\n id=\"base-form-positive-btn\">\r\n {{ getPositiveWfActionKey(item?.stateType) | translate }}\r\n </button>\r\n <button *ngIf=\"hasWfNegativePermission()\" color=\"second\" mat-raised-button\r\n (click)=\"doCancelRejectAction()\"\r\n [disabled]=\"disabledSaveButton(item)\"\r\n class=\"action-button\"\r\n id=\"base-form-negative-btn\">\r\n {{ getNegativeWfActionKey(item?.stateType) | translate }}\r\n </button>\r\n <button *ngIf=\"pageInfo.hideExtractButton === false && itemId > 0 && editable\" color=\"primary\" mat-raised-button\r\n (click)=\"doExtraAction()\"\r\n class=\"action-button\"\r\n id=\"base-form-extra-btn\">\r\n {{ pageInfo.labelsSection + \".\" + \"EXTRA_BUTTON_NAME\" | translate }}\r\n </button>\r\n </div>\r\n </div>\r\n <div class=\"column flex-49\"></div>\r\n </div>\r\n\r\n\r\n <ng-container *ngIf=\"!pageInfo.hideAuditLog\">\r\n <div class=\"row main-form-canvas mt-4vh pb-5vh\">\r\n <div class=\"column flex-95\">\r\n <app-audit-log [pageInfo]=\"pageInfo\" [fields]=\"fields\"></app-audit-log>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n</div>\r\n", styles: [".page-container{display:flex;flex-direction:column;width:100%}.row{display:flex;flex-direction:row;gap:10px;width:100%;flex-wrap:wrap}.column{display:flex;flex-direction:column}.full-width{width:100%}.flex-49{flex:0 0 49%}.flex-95{flex:0 0 95%}.row-center-start{align-items:center;justify-content:flex-start}.mt-2vh{margin-top:2vh}.mt-3vh{margin-top:3vh}.mt-4vh{margin-top:4vh}.pb-5vh{padding-bottom:5vh}.action-button{font-weight:700;min-width:140px;max-width:200px;margin:0 10px}@media (max-width: 960px){.flex-49,.flex-95{flex:1 1 100%}}@media (max-width: 600px){.row{flex-direction:column;align-items:center}.action-button{width:100%;max-width:300px;margin:5px 0}}\n"], dependencies: [{ kind: "component", type: TitleBarComponent, selector: "app-title-bar", inputs: ["pageTitle", "showExtractButton", "totalElements", "titleMode", "pageInfo", "subTitle", "statusDesc", "newAction", "extraButton", "showDetails", "showImport", "showButton", "extraData", "titleCorporateAdmin", "hideBackButton", "buttons", "buttonsDisplayMode", "draftSupported", "isPending", "onViewModeChange"], outputs: ["newActionClicked", "extraButtonClicked", "extractReport", "buttonClicked", "viewModeChanged"] }, { kind: "component", type: BaseFormCanvasComponent, selector: "app-base-form-canvas", inputs: ["pageInfo", "currency", "fields", "errors", "workflowEditableFields", "isWorkflowEditableManaged", "supportingAttributes", "editable", "emitOnValueChanges", "filterResetNonce", "item", "equationSuggestedFields", "currentEquationValue"], outputs: ["attachmentEmitter", "actionEmitter", "formUpdated", "hyperTextEvent", "currentEquationValueChange"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5$1.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: AuditLogComponent, selector: "app-audit-log", inputs: ["pageInfo", "statusName", "module", "identifier", "fields", "showHiddenFields"] }] }); }
|
|
4378
4432
|
}
|
|
4379
4433
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BaseFormComponent, decorators: [{
|
|
4380
4434
|
type: Component,
|
|
@@ -4442,7 +4496,7 @@ class SectionFormCanvasComponent {
|
|
|
4442
4496
|
return this.buttons.filter(btn => btn.id !== 'download');
|
|
4443
4497
|
}
|
|
4444
4498
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SectionFormCanvasComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4445
|
-
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", subtitle: "subtitle", isTranslateTitle: "isTranslateTitle", isTranslateSubtitle: "isTranslateSubtitle", 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 <p class=\"card-subtitle\" *ngIf=\"subtitle\">\r\n <span *ngIf=\"isTranslateSubtitle\">{{ pageInfo.labelsSection + '.' + subtitle | translate }}</span>\r\n <span *ngIf=\"!isTranslateSubtitle\">{{ subtitle }}</span>\r\n </p>\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\" *ngIf=\"buttons && buttons.length > 0\">\r\n <div class=\"row flex-auto buttons-wrapper desktop-buttons\" [class.show-on-mobile]=\"!getDownloadButton()\">\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 \r\n <div class=\"mobile-buttons\" *ngIf=\"getDownloadButton()\">\r\n <button\r\n mat-flat-button\r\n type=\"button\"\r\n color=\"primary\"\r\n (click)=\"onButtonClick(getDownloadButton()!, key); $event.stopPropagation()\"\r\n class=\"btn-download-mobile\"\r\n [attr.id]=\"getDownloadButton()?.id\"\r\n >\r\n <mat-icon>{{ getDownloadButton()?.icon }}</mat-icon>\r\n </button>\r\n <button\r\n *ngIf=\"getMenuButtons().length > 0\"\r\n mat-stroked-button\r\n type=\"button\"\r\n [matMenuTriggerFor]=\"menu\"\r\n class=\"btn-menu-mobile\"\r\n >\r\n <mat-icon>more_vert</mat-icon>\r\n </button>\r\n <mat-menu #menu=\"matMenu\">\r\n <button\r\n mat-menu-item\r\n *ngFor=\"let btn of getMenuButtons()\"\r\n (click)=\"onButtonClick(btn, key); $event.stopPropagation()\"\r\n [attr.id]=\"btn.id\"\r\n >\r\n <mat-icon>{{ btn.icon }}</mat-icon>\r\n <span>{{ btn.label | translate }}</span>\r\n </button>\r\n </mat-menu>\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 <ng-content></ng-content>\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:10px 16px!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 .card-subtitle{margin:0;font-family:lusail-light,sans-serif;font-weight:300;font-size:16px;line-height:1.2;color:#888;width:fit-content}.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-bottom:20px;margin-top: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){.desktop-buttons{display:none!important}.desktop-buttons.show-on-mobile{display:flex!important}.mobile-buttons{display:flex;gap:12px;align-items:center;justify-content:flex-end}.btn-download-mobile{width:45px!important;height:44px!important;min-width:45px!important;padding:0!important;border-radius:8px!important;background:#0d4261!important;display:flex;align-items:center;justify-content:center}.btn-download-mobile mat-icon{color:#fff!important;font-size:24px!important;width:24px!important;height:28px!important;margin:0!important}.btn-download-mobile .mdc-button__label{padding:0!important}.btn-menu-mobile{width:44px!important;height:44px!important;min-width:44px!important;padding:0!important;border-radius:8px!important;border:1px solid #3e627b!important;background:#fff!important;display:flex;align-items:center;justify-content:center}.btn-menu-mobile mat-icon{color:#0d4261!important;font-size:24px!important;width:25px!important;height:24px!important;margin:0!important;rotate:90deg}.btn-menu-mobile .mdc-button__label{padding:0!important}}@media (min-width: 769px){.mobile-buttons{display:none!important}}@media (max-width: 600px){::ng-deep .main-form-canvas{display:block!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"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }] }); }
|
|
4499
|
+
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", subtitle: "subtitle", isTranslateTitle: "isTranslateTitle", isTranslateSubtitle: "isTranslateSubtitle", 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 <p class=\"card-subtitle\" *ngIf=\"subtitle\">\r\n <span *ngIf=\"isTranslateSubtitle\">{{ pageInfo.labelsSection + '.' + subtitle | translate }}</span>\r\n <span *ngIf=\"!isTranslateSubtitle\">{{ subtitle }}</span>\r\n </p>\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\" *ngIf=\"buttons && buttons.length > 0\">\r\n <div class=\"row flex-auto buttons-wrapper desktop-buttons\" [class.show-on-mobile]=\"!getDownloadButton()\">\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 \r\n <div class=\"mobile-buttons\" *ngIf=\"getDownloadButton()\">\r\n <button\r\n mat-flat-button\r\n type=\"button\"\r\n color=\"primary\"\r\n (click)=\"onButtonClick(getDownloadButton()!, key); $event.stopPropagation()\"\r\n class=\"btn-download-mobile\"\r\n [attr.id]=\"getDownloadButton()?.id\"\r\n >\r\n <mat-icon>{{ getDownloadButton()?.icon }}</mat-icon>\r\n </button>\r\n <button\r\n *ngIf=\"getMenuButtons().length > 0\"\r\n mat-stroked-button\r\n type=\"button\"\r\n [matMenuTriggerFor]=\"menu\"\r\n class=\"btn-menu-mobile\"\r\n >\r\n <mat-icon>more_vert</mat-icon>\r\n </button>\r\n <mat-menu #menu=\"matMenu\">\r\n <button\r\n mat-menu-item\r\n *ngFor=\"let btn of getMenuButtons()\"\r\n (click)=\"onButtonClick(btn, key); $event.stopPropagation()\"\r\n [attr.id]=\"btn.id\"\r\n >\r\n <mat-icon>{{ btn.icon }}</mat-icon>\r\n <span>{{ btn.label | translate }}</span>\r\n </button>\r\n </mat-menu>\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 <ng-content></ng-content>\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:10px 16px!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 .card-subtitle{margin:0;font-family:lusail-light,sans-serif;font-weight:300;font-size:16px;line-height:1.2;color:#888;width:fit-content}.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-bottom:20px;margin-top: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){.desktop-buttons{display:none!important}.desktop-buttons.show-on-mobile{display:flex!important}.mobile-buttons{display:flex;gap:12px;align-items:center;justify-content:flex-end}.btn-download-mobile{width:45px!important;height:44px!important;min-width:45px!important;padding:0!important;border-radius:8px!important;background:#0d4261!important;display:flex;align-items:center;justify-content:center}.btn-download-mobile mat-icon{color:#fff!important;font-size:24px!important;width:24px!important;height:28px!important;margin:0!important}.btn-download-mobile .mdc-button__label{padding:0!important}.btn-menu-mobile{width:44px!important;height:44px!important;min-width:44px!important;padding:0!important;border-radius:8px!important;border:1px solid #3e627b!important;background:#fff!important;display:flex;align-items:center;justify-content:center}.btn-menu-mobile mat-icon{color:#0d4261!important;font-size:24px!important;width:25px!important;height:24px!important;margin:0!important;rotate:90deg}.btn-menu-mobile .mdc-button__label{padding:0!important}}@media (min-width: 769px){.mobile-buttons{display:none!important}}@media (max-width: 600px){::ng-deep .main-form-canvas{display:block!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", "filterResetNonce", "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"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }] }); }
|
|
4446
4500
|
}
|
|
4447
4501
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SectionFormCanvasComponent, decorators: [{
|
|
4448
4502
|
type: Component,
|
|
@@ -4542,7 +4596,7 @@ class AuditLogDetailsDialogComponent {
|
|
|
4542
4596
|
return `${this.pageInfo.labelsSection}.${this.pageInfo.id}`;
|
|
4543
4597
|
}
|
|
4544
4598
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AuditLogDetailsDialogComponent, deps: [{ token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4545
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: AuditLogDetailsDialogComponent, isStandalone: true, selector: "app-audit-log-details-dialog", host: { listeners: { "window:keyup.esc": "onKeyUp()" } }, ngImport: i0, template: "<mat-dialog-content class=\"mat-typography overflow-hidden\">\r\n <div style=\"'padding': '10px 30px 10px 0'\">\r\n <h2 mat-dialog-title>{{ getTitle()| translate }}</h2>\r\n <app-base-form-canvas\r\n [pageInfo]=\"pageInfo\"\r\n [fields]=\"fields\"\r\n [editable]=\"false\"\r\n [item]=\"item\"\r\n ></app-base-form-canvas>\r\n\r\n <p>\r\n <span class=\"invoice-label\">{{ 'audit-log.reason_dialog' | translate }} :</span>\r\n <span class=\"invoice-label-text\">{{ comment }}</span>\r\n </p>\r\n <mat-divider style=\"width: 97%\"></mat-divider>\r\n <br>\r\n <button mat-stroked-button color='accent' style=\"margin: 5px\"\r\n (click)=\"cancel()\" id=\"acceptActionLabel\">\r\n {{ 'audit-log.close' | translate }}\r\n </button>\r\n <br>\r\n </div>\r\n</mat-dialog-content>\r\n", styles: [".m-0{margin:0!important}.w-100{width:100%}.form-style{min-height:12vh!important;height:auto!important}.text-red{color:red!important}.modal-footer{margin-top:5vh}.overflow-hidden{overflow:hidden}.pad-top{margin-top:-7px;display:block}.action-comment{display:flex;justify-content:space-between}.material-icons{color:#e22222}textarea#warn::placeholder{color:red}.invoice-label{color:var(--primary-color);margin:0;font-weight:700;padding-bottom:10px!important;padding-top:6px!important;border-bottom:none!important}.invoice-label-text{color:var(--accent-color);font-weight:400;word-wrap:break-word;white-space:pre-wrap;width:100%}\n"], dependencies: [{ kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: FormsModule }, { 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: 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: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }] }); }
|
|
4599
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: AuditLogDetailsDialogComponent, isStandalone: true, selector: "app-audit-log-details-dialog", host: { listeners: { "window:keyup.esc": "onKeyUp()" } }, ngImport: i0, template: "<mat-dialog-content class=\"mat-typography overflow-hidden\">\r\n <div style=\"'padding': '10px 30px 10px 0'\">\r\n <h2 mat-dialog-title>{{ getTitle()| translate }}</h2>\r\n <app-base-form-canvas\r\n [pageInfo]=\"pageInfo\"\r\n [fields]=\"fields\"\r\n [editable]=\"false\"\r\n [item]=\"item\"\r\n ></app-base-form-canvas>\r\n\r\n <p>\r\n <span class=\"invoice-label\">{{ 'audit-log.reason_dialog' | translate }} :</span>\r\n <span class=\"invoice-label-text\">{{ comment }}</span>\r\n </p>\r\n <mat-divider style=\"width: 97%\"></mat-divider>\r\n <br>\r\n <button mat-stroked-button color='accent' style=\"margin: 5px\"\r\n (click)=\"cancel()\" id=\"acceptActionLabel\">\r\n {{ 'audit-log.close' | translate }}\r\n </button>\r\n <br>\r\n </div>\r\n</mat-dialog-content>\r\n", styles: [".m-0{margin:0!important}.w-100{width:100%}.form-style{min-height:12vh!important;height:auto!important}.text-red{color:red!important}.modal-footer{margin-top:5vh}.overflow-hidden{overflow:hidden}.pad-top{margin-top:-7px;display:block}.action-comment{display:flex;justify-content:space-between}.material-icons{color:#e22222}textarea#warn::placeholder{color:red}.invoice-label{color:var(--primary-color);margin:0;font-weight:700;padding-bottom:10px!important;padding-top:6px!important;border-bottom:none!important}.invoice-label-text{color:var(--accent-color);font-weight:400;word-wrap:break-word;white-space:pre-wrap;width:100%}\n"], dependencies: [{ kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: FormsModule }, { 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: BaseFormCanvasComponent, selector: "app-base-form-canvas", inputs: ["pageInfo", "currency", "fields", "errors", "workflowEditableFields", "isWorkflowEditableManaged", "supportingAttributes", "editable", "emitOnValueChanges", "filterResetNonce", "item", "equationSuggestedFields", "currentEquationValue"], outputs: ["attachmentEmitter", "actionEmitter", "formUpdated", "hyperTextEvent", "currentEquationValueChange"] }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }] }); }
|
|
4546
4600
|
}
|
|
4547
4601
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AuditLogDetailsDialogComponent, decorators: [{
|
|
4548
4602
|
type: Component,
|
|
@@ -5076,7 +5130,7 @@ class ReportFormComponent {
|
|
|
5076
5130
|
return !groupByValues.some(v => value.includes(v) && value.length >= v.length);
|
|
5077
5131
|
}
|
|
5078
5132
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ReportFormComponent, deps: [{ token: i2.TranslateService }, { token: BackendService }, { token: i3$1.ActivatedRoute }, { token: i0.Injector }, { token: i3$1.Router }, { token: i3$1.ActivatedRoute }, { token: i3.Directionality }, { token: i1.MatDialog }, { token: i4.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5079
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ReportFormComponent, isStandalone: true, selector: "app-report-form", inputs: { showDetails: "showDetails", showExtractButton: "showExtractButton", columns: "columns", actionRequestCallback: "actionRequestCallback", enrichDrillDownReportRequest: "enrichDrillDownReportRequest", enrichHyperLinkReportRequest: "enrichHyperLinkReportRequest", enrichJuniorReportRequest: "enrichJuniorReportRequest" }, outputs: { userAction: "userAction" }, ngImport: i0, template: "<div class=\"column full-width\">\r\n\r\n <div class=\"row align-start-center\" style=\"margin-bottom: 10px;\">\r\n <app-title-bar [pageTitle]=\"getTitle()\" [newAction]=\"false\"></app-title-bar>\r\n\r\n <mat-icon\r\n *ngIf=\"pageInfo?.hasHint\"\r\n [matTooltip]=\"pageInfo.labelsSection + '.hint' | translate\"\r\n matTooltipPosition=\"right\"\r\n color=\"primary\"\r\n class=\"hint-icon\"\r\n matTooltipClass=\"custom-tooltip\">\r\n help_outline\r\n </mat-icon>\r\n </div>\r\n\r\n <app-base-form-canvas\r\n [pageInfo]=\"pageInfo\"\r\n [fields]=\"fields\"\r\n [editable]=\"isEditable\"\r\n [errors]=\"errors\"\r\n [item]=\"this.reportForm?.value || {}\"\r\n (formUpdated)=\"updateForm($event)\"\r\n ></app-base-form-canvas>\r\n\r\n <br><br>\r\n\r\n <div class=\"column\">\r\n <div class=\"row gap-10 responsive-row\">\r\n <button *ngIf=\"activeLevel === 1\" color=\"primary\" mat-flat-button (click)=\"doAction(x)\" [disabled]=\"!isValidForm()\" id=\"report-generate-btn\">\r\n {{ 'REPORTS.generate' | translate }}\r\n </button>\r\n\r\n <button mat-raised-button [matMenuTriggerFor]=\"menu\" [disabled]=\"getIsEmptyList()\" color=\"primary\" id=\"report-extract-trigger\">\r\n {{ 'extract' | translate }}\r\n <mat-icon class=\"expand_more actionButton__expand\">expand_more</mat-icon>\r\n </button>\r\n\r\n <button mat-flat-button (click)=\"clear()\" [disabled]=\"isFormEmpty() || activeLevel > 1\" id=\"report-clear-btn\">\r\n {{ 'REPORTS.clear' | translate }}\r\n </button>\r\n\r\n <button *ngIf=\"activeLevel === 1 && drillDownEnabled()\" color=\"warn\" mat-flat-button (click)=\"drillDown()\" id=\"report-drilldown-btn\">\r\n {{ drillDownLabel() | translate }}\r\n </button>\r\n\r\n <button *ngIf=\"activeLevel > 1 && backButtonEnabled\" color=\"warn\" mat-flat-button (click)=\"goUp()\" id=\"report-up-btn\">\r\n {{ 'REPORTS.up' | translate }}\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"activeLevel >= 1\" class=\"main-form-canvas row align-start-start responsive-table\" style=\"margin-top: 3vh;\">\r\n <div class=\"column full-width\">\r\n <app-base-table\r\n *ngIf=\"activeLevel === 1\"\r\n [pageInfo]=\"pageInfo\"\r\n [columns]=\"columnsDefinition\"\r\n [enforceRefresh]=\"reloadData\"\r\n id=\"parent\"\r\n [reportRequest]=\"reportRequest\"\r\n (userAction)=\"emitUserAction($event)\"\r\n (hyperLinkAction)=\"emitHyperLinkAction($event)\">\r\n </app-base-table>\r\n\r\n <app-base-table\r\n *ngIf=\"activeLevel === 2\"\r\n [pageInfo]=\"drillDownPageInfo\"\r\n [columns]=\"drillDownColumns\"\r\n id=\"child\"\r\n [reportRequest]=\"childReportRequest\"\r\n (userAction)=\"emitJuniorAction($event)\"\r\n (hyperLinkAction)=\"emitHyperLinkAction($event)\">\r\n </app-base-table>\r\n\r\n <app-base-table\r\n *ngIf=\"activeLevel === 3\"\r\n [pageInfo]=\"juniorPageInfo\"\r\n [columns]=\"juniorColumns\"\r\n id=\"junior\"\r\n [reportRequest]=\"juniorReportRequest\">\r\n </app-base-table>\r\n </div>\r\n </div>\r\n\r\n</div>\r\n\r\n<mat-menu #menu=\"matMenu\">\r\n <button type=\"button\" mat-menu-item *ngFor=\"let type of types\" (click)=\"extractReport(type)\" [attr.id]=\"'report-extract-item-' + type\">\r\n {{ type }}\r\n </button>\r\n</mat-menu>\r\n", styles: [".column{display:flex;flex-direction:column;width:100%}.row{display:flex;flex-direction:row;width:100%}.align-start-center{align-items:center;justify-content:flex-start}.align-start-start{align-items:flex-start;justify-content:flex-start}.gap-10>*+*{margin-left:10px}.full-width{width:100%}.hint-icon{cursor:pointer;margin-left:10px}.responsive-row{flex-wrap:wrap}@media (max-width: 960px){.responsive-row{flex-direction:column;align-items:flex-start}}@media (max-width: 600px){.responsive-table{justify-content:center}}\n"], dependencies: [{ kind: "component", type: TitleBarComponent, selector: "app-title-bar", inputs: ["pageTitle", "showExtractButton", "totalElements", "titleMode", "pageInfo", "subTitle", "statusDesc", "newAction", "extraButton", "showDetails", "showImport", "showButton", "extraData", "titleCorporateAdmin", "hideBackButton", "buttons", "buttonsDisplayMode", "draftSupported", "isPending", "onViewModeChange"], outputs: ["newActionClicked", "extraButtonClicked", "extractReport", "buttonClicked", "viewModeChanged"] }, { 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: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5$1.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "component", type: BaseTableComponent, selector: "app-base-table", inputs: ["filterFields", "noDataFoundSvgPath", "noDataFoundTitle", "noDataFoundSubtitle", "noResultSvgPath", "noResultTitle", "noResultSubtitle", "pageInfo", "enablePagination", "mobilePageSize", "mobileLoadMoreIncrement", "data", "listAction", "extraActions", "buttonsDisplayMode", "columns", "filters", "pathParam", "extraButton", "enforceRefresh", "isPending", "trigger", "reportRequest", "separateEndpointData", "manageablePages", "totalPagesCount", "currentPageIndex", "customizedData"], outputs: ["buttonClicked", "pageChange", "userAction", "hyperLinkAction", "extraAction", "selectedColumn", "listActionClicked", "showDialog", "clickRoutePage"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
|
|
5133
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ReportFormComponent, isStandalone: true, selector: "app-report-form", inputs: { showDetails: "showDetails", showExtractButton: "showExtractButton", columns: "columns", actionRequestCallback: "actionRequestCallback", enrichDrillDownReportRequest: "enrichDrillDownReportRequest", enrichHyperLinkReportRequest: "enrichHyperLinkReportRequest", enrichJuniorReportRequest: "enrichJuniorReportRequest" }, outputs: { userAction: "userAction" }, ngImport: i0, template: "<div class=\"column full-width\">\r\n\r\n <div class=\"row align-start-center\" style=\"margin-bottom: 10px;\">\r\n <app-title-bar [pageTitle]=\"getTitle()\" [newAction]=\"false\"></app-title-bar>\r\n\r\n <mat-icon\r\n *ngIf=\"pageInfo?.hasHint\"\r\n [matTooltip]=\"pageInfo.labelsSection + '.hint' | translate\"\r\n matTooltipPosition=\"right\"\r\n color=\"primary\"\r\n class=\"hint-icon\"\r\n matTooltipClass=\"custom-tooltip\">\r\n help_outline\r\n </mat-icon>\r\n </div>\r\n\r\n <app-base-form-canvas\r\n [pageInfo]=\"pageInfo\"\r\n [fields]=\"fields\"\r\n [editable]=\"isEditable\"\r\n [errors]=\"errors\"\r\n [item]=\"this.reportForm?.value || {}\"\r\n (formUpdated)=\"updateForm($event)\"\r\n ></app-base-form-canvas>\r\n\r\n <br><br>\r\n\r\n <div class=\"column\">\r\n <div class=\"row gap-10 responsive-row\">\r\n <button *ngIf=\"activeLevel === 1\" color=\"primary\" mat-flat-button (click)=\"doAction(x)\" [disabled]=\"!isValidForm()\" id=\"report-generate-btn\">\r\n {{ 'REPORTS.generate' | translate }}\r\n </button>\r\n\r\n <button mat-raised-button [matMenuTriggerFor]=\"menu\" [disabled]=\"getIsEmptyList()\" color=\"primary\" id=\"report-extract-trigger\">\r\n {{ 'extract' | translate }}\r\n <mat-icon class=\"expand_more actionButton__expand\">expand_more</mat-icon>\r\n </button>\r\n\r\n <button mat-flat-button (click)=\"clear()\" [disabled]=\"isFormEmpty() || activeLevel > 1\" id=\"report-clear-btn\">\r\n {{ 'REPORTS.clear' | translate }}\r\n </button>\r\n\r\n <button *ngIf=\"activeLevel === 1 && drillDownEnabled()\" color=\"warn\" mat-flat-button (click)=\"drillDown()\" id=\"report-drilldown-btn\">\r\n {{ drillDownLabel() | translate }}\r\n </button>\r\n\r\n <button *ngIf=\"activeLevel > 1 && backButtonEnabled\" color=\"warn\" mat-flat-button (click)=\"goUp()\" id=\"report-up-btn\">\r\n {{ 'REPORTS.up' | translate }}\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"activeLevel >= 1\" class=\"main-form-canvas row align-start-start responsive-table\" style=\"margin-top: 3vh;\">\r\n <div class=\"column full-width\">\r\n <app-base-table\r\n *ngIf=\"activeLevel === 1\"\r\n [pageInfo]=\"pageInfo\"\r\n [columns]=\"columnsDefinition\"\r\n [enforceRefresh]=\"reloadData\"\r\n id=\"parent\"\r\n [reportRequest]=\"reportRequest\"\r\n (userAction)=\"emitUserAction($event)\"\r\n (hyperLinkAction)=\"emitHyperLinkAction($event)\">\r\n </app-base-table>\r\n\r\n <app-base-table\r\n *ngIf=\"activeLevel === 2\"\r\n [pageInfo]=\"drillDownPageInfo\"\r\n [columns]=\"drillDownColumns\"\r\n id=\"child\"\r\n [reportRequest]=\"childReportRequest\"\r\n (userAction)=\"emitJuniorAction($event)\"\r\n (hyperLinkAction)=\"emitHyperLinkAction($event)\">\r\n </app-base-table>\r\n\r\n <app-base-table\r\n *ngIf=\"activeLevel === 3\"\r\n [pageInfo]=\"juniorPageInfo\"\r\n [columns]=\"juniorColumns\"\r\n id=\"junior\"\r\n [reportRequest]=\"juniorReportRequest\">\r\n </app-base-table>\r\n </div>\r\n </div>\r\n\r\n</div>\r\n\r\n<mat-menu #menu=\"matMenu\">\r\n <button type=\"button\" mat-menu-item *ngFor=\"let type of types\" (click)=\"extractReport(type)\" [attr.id]=\"'report-extract-item-' + type\">\r\n {{ type }}\r\n </button>\r\n</mat-menu>\r\n", styles: [".column{display:flex;flex-direction:column;width:100%}.row{display:flex;flex-direction:row;width:100%}.align-start-center{align-items:center;justify-content:flex-start}.align-start-start{align-items:flex-start;justify-content:flex-start}.gap-10>*+*{margin-left:10px}.full-width{width:100%}.hint-icon{cursor:pointer;margin-left:10px}.responsive-row{flex-wrap:wrap}@media (max-width: 960px){.responsive-row{flex-direction:column;align-items:flex-start}}@media (max-width: 600px){.responsive-table{justify-content:center}}\n"], dependencies: [{ kind: "component", type: TitleBarComponent, selector: "app-title-bar", inputs: ["pageTitle", "showExtractButton", "totalElements", "titleMode", "pageInfo", "subTitle", "statusDesc", "newAction", "extraButton", "showDetails", "showImport", "showButton", "extraData", "titleCorporateAdmin", "hideBackButton", "buttons", "buttonsDisplayMode", "draftSupported", "isPending", "onViewModeChange"], outputs: ["newActionClicked", "extraButtonClicked", "extractReport", "buttonClicked", "viewModeChanged"] }, { kind: "component", type: BaseFormCanvasComponent, selector: "app-base-form-canvas", inputs: ["pageInfo", "currency", "fields", "errors", "workflowEditableFields", "isWorkflowEditableManaged", "supportingAttributes", "editable", "emitOnValueChanges", "filterResetNonce", "item", "equationSuggestedFields", "currentEquationValue"], outputs: ["attachmentEmitter", "actionEmitter", "formUpdated", "hyperTextEvent", "currentEquationValueChange"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5$1.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "component", type: BaseTableComponent, selector: "app-base-table", inputs: ["filterFields", "noDataFoundSvgPath", "noDataFoundTitle", "noDataFoundSubtitle", "noResultSvgPath", "noResultTitle", "noResultSubtitle", "pageInfo", "enablePagination", "mobilePageSize", "mobileLoadMoreIncrement", "data", "listAction", "extraActions", "buttonsDisplayMode", "columns", "filters", "pathParam", "extraButton", "enforceRefresh", "isPending", "trigger", "reportRequest", "separateEndpointData", "manageablePages", "totalPagesCount", "currentPageIndex", "customizedData"], outputs: ["buttonClicked", "pageChange", "userAction", "hyperLinkAction", "extraAction", "selectedColumn", "listActionClicked", "showDialog", "clickRoutePage"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
|
|
5080
5134
|
}
|
|
5081
5135
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ReportFormComponent, decorators: [{
|
|
5082
5136
|
type: Component,
|
|
@@ -5536,7 +5590,7 @@ class ActivityReportFormComponent {
|
|
|
5536
5590
|
return !groupByValues.some(v => value.includes(v) && value.length >= v.length);
|
|
5537
5591
|
}
|
|
5538
5592
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ActivityReportFormComponent, deps: [{ token: i2.TranslateService }, { token: BackendService }, { token: i3$1.ActivatedRoute }, { token: i0.Injector }, { token: i3$1.Router }, { token: i3$1.ActivatedRoute }, { token: i1.MatDialog }, { token: i3.Directionality }, { token: i4.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5539
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ActivityReportFormComponent, isStandalone: true, selector: "app-report-form", inputs: { showDetails: "showDetails", showExtractButton: "showExtractButton", columns: "columns", actionRequestCallback: "actionRequestCallback", enrichDrillDownReportRequest: "enrichDrillDownReportRequest", enrichHyperLinkReportRequest: "enrichHyperLinkReportRequest", enrichJuniorReportRequest: "enrichJuniorReportRequest" }, outputs: { userAction: "userAction" }, ngImport: i0, template: "<div class=\"page-container\">\r\n\r\n <div class=\"row row-center-start mb-10px full-width\">\r\n <app-title-bar [pageTitle]=\"getTitle()\" [newAction]=\"false\"></app-title-bar>\r\n <mat-icon *ngIf=\"pageInfo?.hasHint\"\r\n [matTooltip]=\"pageInfo.labelsSection + '.hint' | translate\"\r\n matTooltipPosition=\"right\"\r\n color=\"primary\"\r\n class=\"help-icon\"\r\n matTooltipClass=\"custom-tooltip\">\r\n help_outline\r\n </mat-icon>\r\n </div>\r\n\r\n <app-base-form-canvas\r\n [pageInfo]=\"pageInfo\"\r\n [fields]=\"fields\"\r\n [editable]=\"isEditable\"\r\n [errors]=\"errors\"\r\n [item]=\"reportForm?.value || {}\"\r\n (formUpdated)=\"updateForm($event)\">\r\n </app-base-form-canvas>\r\n\r\n <div class=\"row main-form-canvas mt-3vh\">\r\n <div class=\"column flex-49\">\r\n <div class=\"row row-center-start\">\r\n <button *ngIf=\"activeLevel === 1\" color=\"primary\" mat-flat-button (click)=\"doAction(x)\"\r\n [disabled]=\"!isValidForm()\" class=\"action-button\" id=\"activity-generate-btn\">\r\n {{ 'REPORTS.generate' | translate }}\r\n </button>\r\n <button mat-raised-button [matMenuTriggerFor]=\"menu\" [disabled]=\"getIsEmptyList()\"\r\n color=\"primary\" class=\"btn-none-background-primary action-button\" id=\"activity-extract-trigger\">\r\n {{ 'extract' | translate }}\r\n <mat-icon class=\"expand_more actionButton__expand\">expand_more</mat-icon>\r\n </button>\r\n <button mat-flat-button (click)=\"clear()\"\r\n [disabled]=\"isFormEmpty() || activeLevel > 1\"\r\n class=\"action-button\" id=\"activity-clear-btn\">\r\n {{ 'REPORTS.clear' | translate }}\r\n </button>\r\n <button *ngIf=\"activeLevel === 1 && drillDownEnabled()\" color=\"warn\" mat-flat-button\r\n (click)=\"drillDown()\" class=\"action-button\" id=\"activity-drilldown-btn\">\r\n {{ drillDownLabel() | translate }}\r\n </button>\r\n <button *ngIf=\"activeLevel > 1 && !(isComparisonReport && activeLevel == 2)\" color=\"warn\"\r\n mat-flat-button (click)=\"goUp()\" class=\"action-button\" id=\"activity-up-btn\">\r\n {{ 'REPORTS.up' | translate }}\r\n </button>\r\n </div>\r\n </div>\r\n <div class=\"column flex-49\"></div>\r\n </div>\r\n\r\n <!-- Base tables -->\r\n <ng-container *ngIf=\"activeLevel === 1\">\r\n <div class=\"row main-form-canvas mt-3vh\">\r\n <div class=\"column flex-100\">\r\n <app-base-table [pageInfo]=\"pageInfo\" [columns]=\"columnsDefinition\" [enforceRefresh]=\"reloadData\"\r\n id=\"parent\" [reportRequest]=\"reportRequest\"\r\n (userAction)=\"emitUserAction($event)\"\r\n (hyperLinkAction)=\"emitHyperLinkAction($event)\">\r\n </app-base-table>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"activeLevel === 2\">\r\n <div class=\"row main-form-canvas mt-3vh\">\r\n <div class=\"column flex-100\">\r\n <app-base-table [pageInfo]=\"drillDownPageInfo\" [columns]=\"drillDownColumns\" id=\"child\"\r\n [reportRequest]=\"reportRequest\"\r\n (userAction)=\"emitUserAction($event)\"\r\n (hyperLinkAction)=\"emitHyperLinkAction($event)\">\r\n </app-base-table>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"activeLevel === 3\">\r\n <div class=\"row main-form-canvas mt-3vh\">\r\n <div class=\"column flex-100\">\r\n <app-base-table [pageInfo]=\"drillDownPageInfo\" [columns]=\"drillDownColumns\" id=\"junior\"\r\n [reportRequest]=\"reportRequest\"\r\n (userAction)=\"emitUserAction($event)\"\r\n (hyperLinkAction)=\"emitHyperLinkAction($event)\">\r\n </app-base-table>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"activeLevel === 4\">\r\n <div class=\"row main-form-canvas mt-3vh\">\r\n <div class=\"column flex-100\">\r\n <app-base-table [pageInfo]=\"drillDownPageInfo\" [columns]=\"drillDownColumns\"\r\n [reportRequest]=\"reportRequest\"\r\n (userAction)=\"emitUserAction($event)\"\r\n (hyperLinkAction)=\"emitHyperLinkAction($event)\">\r\n </app-base-table>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n</div>\r\n\r\n<!-- Menu -->\r\n<mat-menu #menu=\"matMenu\">\r\n <button type=\"button\" mat-menu-item *ngFor=\"let type of types\" (click)=\"extractReport(type)\" [attr.id]=\"'activity-extract-item-' + type\">\r\n {{ type }}\r\n </button>\r\n</mat-menu>\r\n", styles: [".page-container{display:flex;flex-direction:column;width:100%}.row{display:flex;flex-direction:row;gap:10px;flex-wrap:wrap;width:100%}.column{display:flex;flex-direction:column}.flex-49{flex:0 0 49%}.flex-100{flex:0 0 100%}.row-center-start{align-items:center;justify-content:flex-start}.mt-3vh{margin-top:3vh}.mb-10px{margin-bottom:10px}.action-button{font-weight:700;min-width:140px;max-width:200px;margin:0 10px}.help-icon{cursor:pointer;margin-left:10px}@media (max-width: 960px){.flex-49,.flex-100{flex:1 1 100%}}@media (max-width: 600px){.row{flex-direction:column;align-items:center}.action-button{width:100%;max-width:300px;margin:5px 0}.help-icon{margin-left:0;margin-top:5px}}\n"], dependencies: [{ kind: "component", type: TitleBarComponent, selector: "app-title-bar", inputs: ["pageTitle", "showExtractButton", "totalElements", "titleMode", "pageInfo", "subTitle", "statusDesc", "newAction", "extraButton", "showDetails", "showImport", "showButton", "extraData", "titleCorporateAdmin", "hideBackButton", "buttons", "buttonsDisplayMode", "draftSupported", "isPending", "onViewModeChange"], outputs: ["newActionClicked", "extraButtonClicked", "extractReport", "buttonClicked", "viewModeChanged"] }, { 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: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5$1.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "component", type: BaseTableComponent, selector: "app-base-table", inputs: ["filterFields", "noDataFoundSvgPath", "noDataFoundTitle", "noDataFoundSubtitle", "noResultSvgPath", "noResultTitle", "noResultSubtitle", "pageInfo", "enablePagination", "mobilePageSize", "mobileLoadMoreIncrement", "data", "listAction", "extraActions", "buttonsDisplayMode", "columns", "filters", "pathParam", "extraButton", "enforceRefresh", "isPending", "trigger", "reportRequest", "separateEndpointData", "manageablePages", "totalPagesCount", "currentPageIndex", "customizedData"], outputs: ["buttonClicked", "pageChange", "userAction", "hyperLinkAction", "extraAction", "selectedColumn", "listActionClicked", "showDialog", "clickRoutePage"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
|
|
5593
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ActivityReportFormComponent, isStandalone: true, selector: "app-report-form", inputs: { showDetails: "showDetails", showExtractButton: "showExtractButton", columns: "columns", actionRequestCallback: "actionRequestCallback", enrichDrillDownReportRequest: "enrichDrillDownReportRequest", enrichHyperLinkReportRequest: "enrichHyperLinkReportRequest", enrichJuniorReportRequest: "enrichJuniorReportRequest" }, outputs: { userAction: "userAction" }, ngImport: i0, template: "<div class=\"page-container\">\r\n\r\n <div class=\"row row-center-start mb-10px full-width\">\r\n <app-title-bar [pageTitle]=\"getTitle()\" [newAction]=\"false\"></app-title-bar>\r\n <mat-icon *ngIf=\"pageInfo?.hasHint\"\r\n [matTooltip]=\"pageInfo.labelsSection + '.hint' | translate\"\r\n matTooltipPosition=\"right\"\r\n color=\"primary\"\r\n class=\"help-icon\"\r\n matTooltipClass=\"custom-tooltip\">\r\n help_outline\r\n </mat-icon>\r\n </div>\r\n\r\n <app-base-form-canvas\r\n [pageInfo]=\"pageInfo\"\r\n [fields]=\"fields\"\r\n [editable]=\"isEditable\"\r\n [errors]=\"errors\"\r\n [item]=\"reportForm?.value || {}\"\r\n (formUpdated)=\"updateForm($event)\">\r\n </app-base-form-canvas>\r\n\r\n <div class=\"row main-form-canvas mt-3vh\">\r\n <div class=\"column flex-49\">\r\n <div class=\"row row-center-start\">\r\n <button *ngIf=\"activeLevel === 1\" color=\"primary\" mat-flat-button (click)=\"doAction(x)\"\r\n [disabled]=\"!isValidForm()\" class=\"action-button\" id=\"activity-generate-btn\">\r\n {{ 'REPORTS.generate' | translate }}\r\n </button>\r\n <button mat-raised-button [matMenuTriggerFor]=\"menu\" [disabled]=\"getIsEmptyList()\"\r\n color=\"primary\" class=\"btn-none-background-primary action-button\" id=\"activity-extract-trigger\">\r\n {{ 'extract' | translate }}\r\n <mat-icon class=\"expand_more actionButton__expand\">expand_more</mat-icon>\r\n </button>\r\n <button mat-flat-button (click)=\"clear()\"\r\n [disabled]=\"isFormEmpty() || activeLevel > 1\"\r\n class=\"action-button\" id=\"activity-clear-btn\">\r\n {{ 'REPORTS.clear' | translate }}\r\n </button>\r\n <button *ngIf=\"activeLevel === 1 && drillDownEnabled()\" color=\"warn\" mat-flat-button\r\n (click)=\"drillDown()\" class=\"action-button\" id=\"activity-drilldown-btn\">\r\n {{ drillDownLabel() | translate }}\r\n </button>\r\n <button *ngIf=\"activeLevel > 1 && !(isComparisonReport && activeLevel == 2)\" color=\"warn\"\r\n mat-flat-button (click)=\"goUp()\" class=\"action-button\" id=\"activity-up-btn\">\r\n {{ 'REPORTS.up' | translate }}\r\n </button>\r\n </div>\r\n </div>\r\n <div class=\"column flex-49\"></div>\r\n </div>\r\n\r\n <!-- Base tables -->\r\n <ng-container *ngIf=\"activeLevel === 1\">\r\n <div class=\"row main-form-canvas mt-3vh\">\r\n <div class=\"column flex-100\">\r\n <app-base-table [pageInfo]=\"pageInfo\" [columns]=\"columnsDefinition\" [enforceRefresh]=\"reloadData\"\r\n id=\"parent\" [reportRequest]=\"reportRequest\"\r\n (userAction)=\"emitUserAction($event)\"\r\n (hyperLinkAction)=\"emitHyperLinkAction($event)\">\r\n </app-base-table>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"activeLevel === 2\">\r\n <div class=\"row main-form-canvas mt-3vh\">\r\n <div class=\"column flex-100\">\r\n <app-base-table [pageInfo]=\"drillDownPageInfo\" [columns]=\"drillDownColumns\" id=\"child\"\r\n [reportRequest]=\"reportRequest\"\r\n (userAction)=\"emitUserAction($event)\"\r\n (hyperLinkAction)=\"emitHyperLinkAction($event)\">\r\n </app-base-table>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"activeLevel === 3\">\r\n <div class=\"row main-form-canvas mt-3vh\">\r\n <div class=\"column flex-100\">\r\n <app-base-table [pageInfo]=\"drillDownPageInfo\" [columns]=\"drillDownColumns\" id=\"junior\"\r\n [reportRequest]=\"reportRequest\"\r\n (userAction)=\"emitUserAction($event)\"\r\n (hyperLinkAction)=\"emitHyperLinkAction($event)\">\r\n </app-base-table>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"activeLevel === 4\">\r\n <div class=\"row main-form-canvas mt-3vh\">\r\n <div class=\"column flex-100\">\r\n <app-base-table [pageInfo]=\"drillDownPageInfo\" [columns]=\"drillDownColumns\"\r\n [reportRequest]=\"reportRequest\"\r\n (userAction)=\"emitUserAction($event)\"\r\n (hyperLinkAction)=\"emitHyperLinkAction($event)\">\r\n </app-base-table>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n</div>\r\n\r\n<!-- Menu -->\r\n<mat-menu #menu=\"matMenu\">\r\n <button type=\"button\" mat-menu-item *ngFor=\"let type of types\" (click)=\"extractReport(type)\" [attr.id]=\"'activity-extract-item-' + type\">\r\n {{ type }}\r\n </button>\r\n</mat-menu>\r\n", styles: [".page-container{display:flex;flex-direction:column;width:100%}.row{display:flex;flex-direction:row;gap:10px;flex-wrap:wrap;width:100%}.column{display:flex;flex-direction:column}.flex-49{flex:0 0 49%}.flex-100{flex:0 0 100%}.row-center-start{align-items:center;justify-content:flex-start}.mt-3vh{margin-top:3vh}.mb-10px{margin-bottom:10px}.action-button{font-weight:700;min-width:140px;max-width:200px;margin:0 10px}.help-icon{cursor:pointer;margin-left:10px}@media (max-width: 960px){.flex-49,.flex-100{flex:1 1 100%}}@media (max-width: 600px){.row{flex-direction:column;align-items:center}.action-button{width:100%;max-width:300px;margin:5px 0}.help-icon{margin-left:0;margin-top:5px}}\n"], dependencies: [{ kind: "component", type: TitleBarComponent, selector: "app-title-bar", inputs: ["pageTitle", "showExtractButton", "totalElements", "titleMode", "pageInfo", "subTitle", "statusDesc", "newAction", "extraButton", "showDetails", "showImport", "showButton", "extraData", "titleCorporateAdmin", "hideBackButton", "buttons", "buttonsDisplayMode", "draftSupported", "isPending", "onViewModeChange"], outputs: ["newActionClicked", "extraButtonClicked", "extractReport", "buttonClicked", "viewModeChanged"] }, { kind: "component", type: BaseFormCanvasComponent, selector: "app-base-form-canvas", inputs: ["pageInfo", "currency", "fields", "errors", "workflowEditableFields", "isWorkflowEditableManaged", "supportingAttributes", "editable", "emitOnValueChanges", "filterResetNonce", "item", "equationSuggestedFields", "currentEquationValue"], outputs: ["attachmentEmitter", "actionEmitter", "formUpdated", "hyperTextEvent", "currentEquationValueChange"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5$1.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "component", type: BaseTableComponent, selector: "app-base-table", inputs: ["filterFields", "noDataFoundSvgPath", "noDataFoundTitle", "noDataFoundSubtitle", "noResultSvgPath", "noResultTitle", "noResultSubtitle", "pageInfo", "enablePagination", "mobilePageSize", "mobileLoadMoreIncrement", "data", "listAction", "extraActions", "buttonsDisplayMode", "columns", "filters", "pathParam", "extraButton", "enforceRefresh", "isPending", "trigger", "reportRequest", "separateEndpointData", "manageablePages", "totalPagesCount", "currentPageIndex", "customizedData"], outputs: ["buttonClicked", "pageChange", "userAction", "hyperLinkAction", "extraAction", "selectedColumn", "listActionClicked", "showDialog", "clickRoutePage"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
|
|
5540
5594
|
}
|
|
5541
5595
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ActivityReportFormComponent, decorators: [{
|
|
5542
5596
|
type: Component,
|
|
@@ -5628,7 +5682,7 @@ class BaseInputDialogComponent extends BaseUtils {
|
|
|
5628
5682
|
this.dialogRef.close(null);
|
|
5629
5683
|
}
|
|
5630
5684
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BaseInputDialogComponent, deps: [{ token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5631
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: BaseInputDialogComponent, isStandalone: true, selector: "lib-base-input-dialog", usesInheritance: true, ngImport: i0, template: "<div class=\"container\">\r\n <div class=\"title-row\">\r\n <div class=\"full-column\">\r\n <app-title-bar [pageTitle]=\"getTitle()\"></app-title-bar>\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"isLoaded\">\r\n <app-base-form-canvas\r\n [pageInfo]=\"pageInfo\"\r\n [fields]=\"fieldsInfo\"\r\n [editable]=\"true\"\r\n [item]=\"default\"\r\n (formUpdated)=\"captureForm($event)\">\r\n </app-base-form-canvas>\r\n\r\n <div class=\"button-row\">\r\n <div class=\"half-column\"></div>\r\n <div class=\"half-column right-align\">\r\n <div class=\"button-group\">\r\n <ng-container>\r\n <button\r\n mat-stroked-button\r\n class=\"btn-none-background-primary\"\r\n type=\"button\"\r\n (click)=\"doCancel('cancel')\"\r\n id=\"base-input-cancel-btn\">\r\n Cancel\r\n </button>\r\n </ng-container>\r\n\r\n <ng-container>\r\n <button\r\n [ngClass]=\"saveDisabled() ? 'btn-none-background-primary' : 'btn-background-primary'\"\r\n [disabled]=\"saveDisabled()\"\r\n mat-stroked-button\r\n type=\"button\"\r\n (click)=\"doSave('save')\"\r\n id=\"base-input-save-btn\">\r\n Save\r\n </button>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n</div>\r\n", styles: [".container{display:flex;flex-direction:column;width:98%}.title-row{display:flex;flex-direction:row;justify-content:flex-start;align-items:flex-start;width:100%;margin:2vh 0}.full-column{flex:1 1 100%;display:flex;flex-direction:column}.button-row{display:flex;flex-direction:row;justify-content:flex-start;align-items:flex-start;width:100%;margin-top:2vh}.half-column{flex:0 0 49%;display:flex;flex-direction:column}.right-align{align-items:flex-end}.button-group{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;gap:10px;margin:1% 2%}@media (max-width: 768px){.button-row{flex-direction:column}.half-column{flex:1 1 100%}.right-align{align-items:center}.button-group{justify-content:center;flex-wrap:wrap}}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: MatInputModule }, { 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: "ngmodule", type: TranslateModule }, { kind: "component", type: TitleBarComponent, selector: "app-title-bar", inputs: ["pageTitle", "showExtractButton", "totalElements", "titleMode", "pageInfo", "subTitle", "statusDesc", "newAction", "extraButton", "showDetails", "showImport", "showButton", "extraData", "titleCorporateAdmin", "hideBackButton", "buttons", "buttonsDisplayMode", "draftSupported", "isPending", "onViewModeChange"], outputs: ["newActionClicked", "extraButtonClicked", "extractReport", "buttonClicked", "viewModeChanged"] }, { kind: "component", type: MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }] }); }
|
|
5685
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: BaseInputDialogComponent, isStandalone: true, selector: "lib-base-input-dialog", usesInheritance: true, ngImport: i0, template: "<div class=\"container\">\r\n <div class=\"title-row\">\r\n <div class=\"full-column\">\r\n <app-title-bar [pageTitle]=\"getTitle()\"></app-title-bar>\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"isLoaded\">\r\n <app-base-form-canvas\r\n [pageInfo]=\"pageInfo\"\r\n [fields]=\"fieldsInfo\"\r\n [editable]=\"true\"\r\n [item]=\"default\"\r\n (formUpdated)=\"captureForm($event)\">\r\n </app-base-form-canvas>\r\n\r\n <div class=\"button-row\">\r\n <div class=\"half-column\"></div>\r\n <div class=\"half-column right-align\">\r\n <div class=\"button-group\">\r\n <ng-container>\r\n <button\r\n mat-stroked-button\r\n class=\"btn-none-background-primary\"\r\n type=\"button\"\r\n (click)=\"doCancel('cancel')\"\r\n id=\"base-input-cancel-btn\">\r\n Cancel\r\n </button>\r\n </ng-container>\r\n\r\n <ng-container>\r\n <button\r\n [ngClass]=\"saveDisabled() ? 'btn-none-background-primary' : 'btn-background-primary'\"\r\n [disabled]=\"saveDisabled()\"\r\n mat-stroked-button\r\n type=\"button\"\r\n (click)=\"doSave('save')\"\r\n id=\"base-input-save-btn\">\r\n Save\r\n </button>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n</div>\r\n", styles: [".container{display:flex;flex-direction:column;width:98%}.title-row{display:flex;flex-direction:row;justify-content:flex-start;align-items:flex-start;width:100%;margin:2vh 0}.full-column{flex:1 1 100%;display:flex;flex-direction:column}.button-row{display:flex;flex-direction:row;justify-content:flex-start;align-items:flex-start;width:100%;margin-top:2vh}.half-column{flex:0 0 49%;display:flex;flex-direction:column}.right-align{align-items:flex-end}.button-group{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;gap:10px;margin:1% 2%}@media (max-width: 768px){.button-row{flex-direction:column}.half-column{flex:1 1 100%}.right-align{align-items:center}.button-group{justify-content:center;flex-wrap:wrap}}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "component", type: BaseFormCanvasComponent, selector: "app-base-form-canvas", inputs: ["pageInfo", "currency", "fields", "errors", "workflowEditableFields", "isWorkflowEditableManaged", "supportingAttributes", "editable", "emitOnValueChanges", "filterResetNonce", "item", "equationSuggestedFields", "currentEquationValue"], outputs: ["attachmentEmitter", "actionEmitter", "formUpdated", "hyperTextEvent", "currentEquationValueChange"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: TitleBarComponent, selector: "app-title-bar", inputs: ["pageTitle", "showExtractButton", "totalElements", "titleMode", "pageInfo", "subTitle", "statusDesc", "newAction", "extraButton", "showDetails", "showImport", "showButton", "extraData", "titleCorporateAdmin", "hideBackButton", "buttons", "buttonsDisplayMode", "draftSupported", "isPending", "onViewModeChange"], outputs: ["newActionClicked", "extraButtonClicked", "extractReport", "buttonClicked", "viewModeChanged"] }, { kind: "component", type: MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }] }); }
|
|
5632
5686
|
}
|
|
5633
5687
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BaseInputDialogComponent, decorators: [{
|
|
5634
5688
|
type: Component,
|
|
@@ -6131,7 +6185,7 @@ class ItemLineEditorComponent {
|
|
|
6131
6185
|
};
|
|
6132
6186
|
}
|
|
6133
6187
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ItemLineEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6134
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: ItemLineEditorComponent, isStandalone: true, selector: "app-item-line-editor", inputs: { noDataFoundIcon: "noDataFoundIcon", noDataFoundTitle: "noDataFoundTitle", noDataFoundSubtitle: "noDataFoundSubtitle", pageInfo: "pageInfo", columnHeaderWidths: "columnHeaderWidths", title: "title", subtitle: "subtitle", allowAdd: "allowAdd", allowDelete: "allowDelete", editable: "editable", currency: "currency", fields: "fields", items: "items" }, outputs: { itemsChange: "itemsChange", itemSaved: "itemSaved", itemDeleted: "itemDeleted", totalsChange: "totalsChange", editStateChange: "editStateChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"item-line-editor\">\r\n <div class=\"header-section\">\r\n <div class=\"header-content\">\r\n <div class=\"header-text\">\r\n <h3 class=\"title\">{{ title | translate }}</h3>\r\n <p class=\"subtitle\">{{ subtitle | translate }}</p>\r\n </div>\r\n </div>\r\n <div class=\"header-divider\"></div>\r\n </div>\r\n\r\n <div class=\"table-section\">\r\n @if (!noDataFound) {\r\n <div class=\"table-container\">\r\n <div class=\"table-header\" [ngStyle]=\"{ 'grid-template-columns': gridTemplate }\">\r\n <ng-container *ngFor=\"let f of headerFields; let idx = index\">\r\n <div class=\"header-cell\" [class.description-cell]=\"f.property === 'description'\">\r\n <span class=\"header-cell-text\">\r\n {{ labelOf(f) | translate }}\r\n <span *ngIf=\"f.required\" class=\"required-asterisk\">*</span>\r\n </span>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"table-body\">\r\n <div class=\"table-row-container\" *ngFor=\"let it of items; let i = index; trackBy: trackByIndex\">\r\n <div class=\"table-row\">\r\n <div class=\"row-inputs\" [attr.data-grid-columns]=\"gridTemplate\" [ngStyle]=\"{ '--grid-columns': gridTemplate }\">\r\n <app-base-form-canvas\r\n [pageInfo]=\"pageInfo\"\r\n [fields]=\"fields\"\r\n [editable]=\"editing[i]\"\r\n [emitOnValueChanges]=\"true\"\r\n [item]=\"it\"\r\n [currency]=\"currency\"\r\n (formUpdated)=\"onFormUpdated($event, i)\">\r\n </app-base-form-canvas>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row-actions\">\r\n <button *ngIf=\"editing[i]\" mat-stroked-button class=\"save-btn\" (click)=\"saveRow(i)\"\r\n [disabled]=\"!canSave(i)\">\r\n <div class=\"button-text\">\r\n <mat-icon>check</mat-icon>\r\n <span>{{ 'item-line.save' | translate }}</span>\r\n </div>\r\n </button>\r\n\r\n <button *ngIf=\"!editing[i] && editable\" mat-stroked-button class=\"edit-btn\"\r\n (click)=\"editRow(i)\">\r\n <div class=\"button-text\">\r\n <mat-icon>edit</mat-icon>\r\n <span>{{ 'item-line.edit' | translate }}</span>\r\n </div>\r\n </button>\r\n\r\n <button *ngIf=\"allowDelete && editable\" mat-stroked-button class=\"delete-btn\"\r\n (click)=\"deleteItem(i)\" type=\"button\">\r\n <div class=\"button-text\">\r\n <mat-icon>delete</mat-icon>\r\n <span>{{ 'item-line.delete' | translate }}</span>\r\n </div>\r\n </button>\r\n </div>\r\n\r\n <div class=\"row-divider\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n\r\n @if (noDataFound) {\r\n <div class=\"dataNotFound\">\r\n <mat-icon class=\"dataNotFound__icon\">{{ noDataFoundIcon }}</mat-icon>\r\n <span class=\"dataNotFound__title\">{{ noDataFoundTitle | translate }}</span>\r\n <span class=\"dataNotFound__subtitle\">{{ noDataFoundSubtitle | translate }}</span>\r\n </div>\r\n }\r\n\r\n <div class=\"add-item\" *ngIf=\"allowAdd && editable\">\r\n <button mat-stroked-button class=\"add-item-btn\" (click)=\"addNewItem()\"\r\n [disabled]=\"!canAddNew\">\r\n <div class=\"button-text\">\r\n <mat-icon>add_circle_outline</mat-icon>\r\n <span>{{ 'item-line.addNewItem' | translate }}</span>\r\n </div>\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <!-- Totals Box -->\r\n @if (!noDataFound) {\r\n <div class=\"totals-box\">\r\n <div class=\"total-row\">\r\n <span class=\"label\">{{ 'item-line.discount' | translate }}</span>\r\n <span class=\"value red\">{{ discountTotal | currency:currency }}</span>\r\n </div>\r\n\r\n <div class=\"total-row\">\r\n <span class=\"label\">{{ 'item-line.amount' | translate }}</span>\r\n <span class=\"value\">{{ subtotal | currency:currency }}</span>\r\n </div>\r\n\r\n <div class=\"totals-divider\"></div>\r\n\r\n <div class=\"total-row grand\">\r\n <span class=\"label\">{{ 'item-line.grandTotal' | translate }}</span>\r\n <span class=\"value green\">{{ grandTotal | currency:currency }}</span>\r\n </div>\r\n </div>\r\n }\r\n</div>", styles: [":host{display:block;width:100%}.item-line-editor{background:#fff;border:1px solid #f0eeee;border-radius:8px;padding:16px;display:flex;flex-direction:column;gap:20px;width:100%;max-width:100%;box-sizing:border-box}.header-section{display:flex;flex-direction:column;gap:20px}.header-content{display:flex;align-items:center;justify-content:space-between}.header-text{display:flex;flex-direction:column;line-height:1.2}.title{font-weight:700;font-size:24px;color:#000;margin:0}.subtitle{font-weight:300;font-size:16px;color:#888;margin:0}.header-divider{height:2px;background-color:#0d4261;width:100%}.table-section{display:flex;flex-direction:column;gap:20px}.table-container{display:flex;flex-direction:column;gap:24px}.table-header{display:grid;width:100%;border-top:1px solid #0d4261;border-bottom:1px solid #0d4261}.header-cell{display:flex;align-items:center;justify-content:flex-start;height:48px;padding:0 20px;background:#fff}.header-cell-text{font-weight:400;font-size:16px;color:#0d4261;line-height:1.2;display:flex;align-items:center;gap:4px}.required-asterisk{color:#ce3b3a;font-weight:500}.table-body{width:100%}.table-row-container{display:flex;flex-direction:column;gap:16px;width:100%}.table-row{width:100%}.row-inputs{width:100%;padding:0 20px}:host ::ng-deep .row-container{border-bottom:1px solid #f0eeee}@media (max-width: 768px){:host ::ng-deep .row-container{border-bottom:none!important}}:host ::ng-deep .row-container .field-column{min-height:70px;padding:16px 0;background:#fff}:host ::ng-deep .row-container .field-column .label-and-asterisk-container{display:none!important}:host ::ng-deep .row-container .field-column mat-form-field{width:100%;margin-bottom:0}:host ::ng-deep .row-container .field-column mat-form-field .mat-mdc-text-field-wrapper{background:transparent!important;padding:0!important}:host ::ng-deep .row-container .field-column mat-form-field .mat-mdc-text-field-wrapper .mdc-notched-outline{display:none!important}:host ::ng-deep .row-container .field-column mat-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex{padding:0!important;border:none!important}:host ::ng-deep .row-container .field-column mat-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix{padding:0!important;min-height:32px!important;width:100%!important;border:none!important;border-bottom:1px solid #b7b7b7!important}:host ::ng-deep .row-container .field-column mat-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix input{font-family:lusail,sans-serif!important;font-weight:400!important;font-size:16px!important;color:#000!important;padding:4px 0!important}:host ::ng-deep .row-container .field-column mat-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix input::placeholder{color:#888!important}:host ::ng-deep .row-container .field-column mat-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix input:disabled{color:#000!important}@media (max-width: 768px){:host ::ng-deep .row-container{border-bottom:none!important;flex-direction:row!important;flex-wrap:nowrap!important;gap:11px!important}:host ::ng-deep .row-container .field-column{flex:1 1 0!important;min-width:0!important;max-width:none!important}:host ::ng-deep .row-container .field-column .label-and-asterisk-container{display:flex!important;margin-bottom:8px}:host ::ng-deep .row-container .field-column .label-and-asterisk-container .custom-label{font-family:Lusail,sans-serif;font-weight:500;font-size:16px;line-height:1.2;color:#000;display:block}:host ::ng-deep .row-container .field-column .label-and-asterisk-container .required-asterisk{color:#ce3b3a;font-weight:500}:host ::ng-deep .row-container .field-column .label-and-asterisk-container .optional-text{color:#888;font-size:14px}.table-header{display:none}.row-inputs{padding:0}.totals-box{width:100%!important}}.row-actions{display:flex;flex-direction:row;align-items:center;justify-content:flex-end;gap:8px;width:100%;padding-top:8px}.row-divider{height:1px;background-color:#0d4261;width:100%;margin-top:8px;flex-shrink:0;min-height:1px;position:relative;z-index:1}.save-btn,.edit-btn{display:flex;align-items:center;justify-content:center;gap:4px;height:32px!important;min-width:114px!important;padding:0 12px!important;border-radius:9999px!important;border:1px solid #0d4261!important;background:#fff!important;cursor:pointer}.save-btn .button-text,.edit-btn .button-text{display:flex;align-items:center;gap:4px}.save-btn .button-text mat-icon,.edit-btn .button-text mat-icon{font-size:20px!important;width:20px!important;height:26px!important;color:#0d4261}.save-btn .button-text span,.edit-btn .button-text span{font-family:lusail,sans-serif;font-weight:400;font-size:16px;color:#0d4261;line-height:1}.save-btn:disabled,.edit-btn:disabled{opacity:.5;cursor:not-allowed}.delete-btn{display:flex;align-items:center;justify-content:center;gap:4px;height:32px!important;min-width:114px!important;padding:0 12px!important;border-radius:9999px!important;border:1px solid #ce3b3a!important;background:#fff!important;cursor:pointer}.delete-btn .button-text{display:flex;align-items:center;gap:4px}.delete-btn .button-text mat-icon{font-size:20px!important;width:20px!important;height:26px!important;color:#ce3b3a}.delete-btn .button-text span{font-family:lusail,sans-serif;font-weight:400;font-size:16px;color:#ce3b3a;line-height:1}.add-item{width:100%}.add-item-btn{display:flex;align-items:center;justify-content:center;gap:4px;height:44px!important;min-width:185px!important;padding:0 16px!important;border-radius:8px!important;border:1px solid #3e627b!important;background:#fff!important;cursor:pointer}.add-item-btn .button-text{display:flex;align-items:center;gap:4px}.add-item-btn .button-text mat-icon{font-size:24px!important;width:24px!important;height:30px!important;color:#0d4261}.add-item-btn .button-text span{font-weight:500;font-size:16px;color:#0d4261;line-height:1}.add-item-btn:disabled{opacity:.5;cursor:not-allowed}.totals-box{width:400px;max-width:100%}.total-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0}.total-row .label{font-weight:500;font-size:16px;color:#333}.total-row .value{font-weight:600;font-size:16px}.total-row.grand .label{font-weight:700}.total-row.grand .value{font-weight:700;font-size:18px}.totals-divider{height:1px;background-color:#e0e0e0;margin:8px 0}.red{color:#d9534f}.green{color:#0c7d5e}.dataNotFound{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}.dataNotFound__icon{color:#0d4261;font-size:48px;height:50px;width:48px;margin-bottom:16px}.dataNotFound__title{color:#6a6a6a;font-size:18px;font-weight:700;margin-bottom:8px}.dataNotFound__subtitle{color:#6a6a6a;font-size:16px;font-weight:400}.col{padding-left:4px;display:flex;align-items:center;gap:2px}.line-total{font-weight:600;font-size:14px}.divider{border-top:1px solid #e0e0e0;margin:10px 0}::ng-deep .btn-background-primary,::ng-deep .btn-none-background-primary{margin:8px 0!important}\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: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i1$1.CurrencyPipe, name: "currency" }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5$1.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] }); }
|
|
6188
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: ItemLineEditorComponent, isStandalone: true, selector: "app-item-line-editor", inputs: { noDataFoundIcon: "noDataFoundIcon", noDataFoundTitle: "noDataFoundTitle", noDataFoundSubtitle: "noDataFoundSubtitle", pageInfo: "pageInfo", columnHeaderWidths: "columnHeaderWidths", title: "title", subtitle: "subtitle", allowAdd: "allowAdd", allowDelete: "allowDelete", editable: "editable", currency: "currency", fields: "fields", items: "items" }, outputs: { itemsChange: "itemsChange", itemSaved: "itemSaved", itemDeleted: "itemDeleted", totalsChange: "totalsChange", editStateChange: "editStateChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"item-line-editor\">\r\n <div class=\"header-section\">\r\n <div class=\"header-content\">\r\n <div class=\"header-text\">\r\n <h3 class=\"title\">{{ title | translate }}</h3>\r\n <p class=\"subtitle\">{{ subtitle | translate }}</p>\r\n </div>\r\n </div>\r\n <div class=\"header-divider\"></div>\r\n </div>\r\n\r\n <div class=\"table-section\">\r\n @if (!noDataFound) {\r\n <div class=\"table-container\">\r\n <div class=\"table-header\" [ngStyle]=\"{ 'grid-template-columns': gridTemplate }\">\r\n <ng-container *ngFor=\"let f of headerFields; let idx = index\">\r\n <div class=\"header-cell\" [class.description-cell]=\"f.property === 'description'\">\r\n <span class=\"header-cell-text\">\r\n {{ labelOf(f) | translate }}\r\n <span *ngIf=\"f.required\" class=\"required-asterisk\">*</span>\r\n </span>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"table-body\">\r\n <div class=\"table-row-container\" *ngFor=\"let it of items; let i = index; trackBy: trackByIndex\">\r\n <div class=\"table-row\">\r\n <div class=\"row-inputs\" [attr.data-grid-columns]=\"gridTemplate\" [ngStyle]=\"{ '--grid-columns': gridTemplate }\">\r\n <app-base-form-canvas\r\n [pageInfo]=\"pageInfo\"\r\n [fields]=\"fields\"\r\n [editable]=\"editing[i]\"\r\n [emitOnValueChanges]=\"true\"\r\n [item]=\"it\"\r\n [currency]=\"currency\"\r\n (formUpdated)=\"onFormUpdated($event, i)\">\r\n </app-base-form-canvas>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row-actions\">\r\n <button *ngIf=\"editing[i]\" mat-stroked-button class=\"save-btn\" (click)=\"saveRow(i)\"\r\n [disabled]=\"!canSave(i)\">\r\n <div class=\"button-text\">\r\n <mat-icon>check</mat-icon>\r\n <span>{{ 'item-line.save' | translate }}</span>\r\n </div>\r\n </button>\r\n\r\n <button *ngIf=\"!editing[i] && editable\" mat-stroked-button class=\"edit-btn\"\r\n (click)=\"editRow(i)\">\r\n <div class=\"button-text\">\r\n <mat-icon>edit</mat-icon>\r\n <span>{{ 'item-line.edit' | translate }}</span>\r\n </div>\r\n </button>\r\n\r\n <button *ngIf=\"allowDelete && editable\" mat-stroked-button class=\"delete-btn\"\r\n (click)=\"deleteItem(i)\" type=\"button\">\r\n <div class=\"button-text\">\r\n <mat-icon>delete</mat-icon>\r\n <span>{{ 'item-line.delete' | translate }}</span>\r\n </div>\r\n </button>\r\n </div>\r\n\r\n <div class=\"row-divider\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n\r\n @if (noDataFound) {\r\n <div class=\"dataNotFound\">\r\n <mat-icon class=\"dataNotFound__icon\">{{ noDataFoundIcon }}</mat-icon>\r\n <span class=\"dataNotFound__title\">{{ noDataFoundTitle | translate }}</span>\r\n <span class=\"dataNotFound__subtitle\">{{ noDataFoundSubtitle | translate }}</span>\r\n </div>\r\n }\r\n\r\n <div class=\"add-item\" *ngIf=\"allowAdd && editable\">\r\n <button mat-stroked-button class=\"add-item-btn\" (click)=\"addNewItem()\"\r\n [disabled]=\"!canAddNew\">\r\n <div class=\"button-text\">\r\n <mat-icon>add_circle_outline</mat-icon>\r\n <span>{{ 'item-line.addNewItem' | translate }}</span>\r\n </div>\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <!-- Totals Box -->\r\n @if (!noDataFound) {\r\n <div class=\"totals-box\">\r\n <div class=\"total-row\">\r\n <span class=\"label\">{{ 'item-line.discount' | translate }}</span>\r\n <span class=\"value red\">{{ discountTotal | currency:currency }}</span>\r\n </div>\r\n\r\n <div class=\"total-row\">\r\n <span class=\"label\">{{ 'item-line.amount' | translate }}</span>\r\n <span class=\"value\">{{ subtotal | currency:currency }}</span>\r\n </div>\r\n\r\n <div class=\"totals-divider\"></div>\r\n\r\n <div class=\"total-row grand\">\r\n <span class=\"label\">{{ 'item-line.grandTotal' | translate }}</span>\r\n <span class=\"value green\">{{ grandTotal | currency:currency }}</span>\r\n </div>\r\n </div>\r\n }\r\n</div>", styles: [":host{display:block;width:100%}.item-line-editor{background:#fff;border:1px solid #f0eeee;border-radius:8px;padding:16px;display:flex;flex-direction:column;gap:20px;width:100%;max-width:100%;box-sizing:border-box}.header-section{display:flex;flex-direction:column;gap:20px}.header-content{display:flex;align-items:center;justify-content:space-between}.header-text{display:flex;flex-direction:column;line-height:1.2}.title{font-weight:700;font-size:24px;color:#000;margin:0}.subtitle{font-weight:300;font-size:16px;color:#888;margin:0}.header-divider{height:2px;background-color:#0d4261;width:100%}.table-section{display:flex;flex-direction:column;gap:20px}.table-container{display:flex;flex-direction:column;gap:24px}.table-header{display:grid;width:100%;border-top:1px solid #0d4261;border-bottom:1px solid #0d4261}.header-cell{display:flex;align-items:center;justify-content:flex-start;height:48px;padding:0 20px;background:#fff}.header-cell-text{font-weight:400;font-size:16px;color:#0d4261;line-height:1.2;display:flex;align-items:center;gap:4px}.required-asterisk{color:#ce3b3a;font-weight:500}.table-body{width:100%}.table-row-container{display:flex;flex-direction:column;gap:16px;width:100%}.table-row{width:100%}.row-inputs{width:100%;padding:0 20px}:host ::ng-deep .row-container{border-bottom:1px solid #f0eeee}@media (max-width: 768px){:host ::ng-deep .row-container{border-bottom:none!important}}:host ::ng-deep .row-container .field-column{min-height:70px;padding:16px 0;background:#fff}:host ::ng-deep .row-container .field-column .label-and-asterisk-container{display:none!important}:host ::ng-deep .row-container .field-column mat-form-field{width:100%;margin-bottom:0}:host ::ng-deep .row-container .field-column mat-form-field .mat-mdc-text-field-wrapper{background:transparent!important;padding:0!important}:host ::ng-deep .row-container .field-column mat-form-field .mat-mdc-text-field-wrapper .mdc-notched-outline{display:none!important}:host ::ng-deep .row-container .field-column mat-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex{padding:0!important;border:none!important}:host ::ng-deep .row-container .field-column mat-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix{padding:0!important;min-height:32px!important;width:100%!important;border:none!important;border-bottom:1px solid #b7b7b7!important}:host ::ng-deep .row-container .field-column mat-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix input{font-family:lusail,sans-serif!important;font-weight:400!important;font-size:16px!important;color:#000!important;padding:4px 0!important}:host ::ng-deep .row-container .field-column mat-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix input::placeholder{color:#888!important}:host ::ng-deep .row-container .field-column mat-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix input:disabled{color:#000!important}@media (max-width: 768px){:host ::ng-deep .row-container{border-bottom:none!important;flex-direction:row!important;flex-wrap:nowrap!important;gap:11px!important}:host ::ng-deep .row-container .field-column{flex:1 1 0!important;min-width:0!important;max-width:none!important}:host ::ng-deep .row-container .field-column .label-and-asterisk-container{display:flex!important;margin-bottom:8px}:host ::ng-deep .row-container .field-column .label-and-asterisk-container .custom-label{font-family:Lusail,sans-serif;font-weight:500;font-size:16px;line-height:1.2;color:#000;display:block}:host ::ng-deep .row-container .field-column .label-and-asterisk-container .required-asterisk{color:#ce3b3a;font-weight:500}:host ::ng-deep .row-container .field-column .label-and-asterisk-container .optional-text{color:#888;font-size:14px}.table-header{display:none}.row-inputs{padding:0}.totals-box{width:100%!important}}.row-actions{display:flex;flex-direction:row;align-items:center;justify-content:flex-end;gap:8px;width:100%;padding-top:8px}.row-divider{height:1px;background-color:#0d4261;width:100%;margin-top:8px;flex-shrink:0;min-height:1px;position:relative;z-index:1}.save-btn,.edit-btn{display:flex;align-items:center;justify-content:center;gap:4px;height:32px!important;min-width:114px!important;padding:0 12px!important;border-radius:9999px!important;border:1px solid #0d4261!important;background:#fff!important;cursor:pointer}.save-btn .button-text,.edit-btn .button-text{display:flex;align-items:center;gap:4px}.save-btn .button-text mat-icon,.edit-btn .button-text mat-icon{font-size:20px!important;width:20px!important;height:26px!important;color:#0d4261}.save-btn .button-text span,.edit-btn .button-text span{font-family:lusail,sans-serif;font-weight:400;font-size:16px;color:#0d4261;line-height:1}.save-btn:disabled,.edit-btn:disabled{opacity:.5;cursor:not-allowed}.delete-btn{display:flex;align-items:center;justify-content:center;gap:4px;height:32px!important;min-width:114px!important;padding:0 12px!important;border-radius:9999px!important;border:1px solid #ce3b3a!important;background:#fff!important;cursor:pointer}.delete-btn .button-text{display:flex;align-items:center;gap:4px}.delete-btn .button-text mat-icon{font-size:20px!important;width:20px!important;height:26px!important;color:#ce3b3a}.delete-btn .button-text span{font-family:lusail,sans-serif;font-weight:400;font-size:16px;color:#ce3b3a;line-height:1}.add-item{width:100%}.add-item-btn{display:flex;align-items:center;justify-content:center;gap:4px;height:44px!important;min-width:185px!important;padding:0 16px!important;border-radius:8px!important;border:1px solid #3e627b!important;background:#fff!important;cursor:pointer}.add-item-btn .button-text{display:flex;align-items:center;gap:4px}.add-item-btn .button-text mat-icon{font-size:24px!important;width:24px!important;height:30px!important;color:#0d4261}.add-item-btn .button-text span{font-weight:500;font-size:16px;color:#0d4261;line-height:1}.add-item-btn:disabled{opacity:.5;cursor:not-allowed}.totals-box{width:400px;max-width:100%}.total-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0}.total-row .label{font-weight:500;font-size:16px;color:#333}.total-row .value{font-weight:600;font-size:16px}.total-row.grand .label{font-weight:700}.total-row.grand .value{font-weight:700;font-size:18px}.totals-divider{height:1px;background-color:#e0e0e0;margin:8px 0}.red{color:#d9534f}.green{color:#0c7d5e}.dataNotFound{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}.dataNotFound__icon{color:#0d4261;font-size:48px;height:50px;width:48px;margin-bottom:16px}.dataNotFound__title{color:#6a6a6a;font-size:18px;font-weight:700;margin-bottom:8px}.dataNotFound__subtitle{color:#6a6a6a;font-size:16px;font-weight:400}.col{padding-left:4px;display:flex;align-items:center;gap:2px}.line-total{font-weight:600;font-size:14px}.divider{border-top:1px solid #e0e0e0;margin:10px 0}::ng-deep .btn-background-primary,::ng-deep .btn-none-background-primary{margin:8px 0!important}\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: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i1$1.CurrencyPipe, name: "currency" }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5$1.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: BaseFormCanvasComponent, selector: "app-base-form-canvas", inputs: ["pageInfo", "currency", "fields", "errors", "workflowEditableFields", "isWorkflowEditableManaged", "supportingAttributes", "editable", "emitOnValueChanges", "filterResetNonce", "item", "equationSuggestedFields", "currentEquationValue"], outputs: ["attachmentEmitter", "actionEmitter", "formUpdated", "hyperTextEvent", "currentEquationValueChange"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] }); }
|
|
6135
6189
|
}
|
|
6136
6190
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ItemLineEditorComponent, decorators: [{
|
|
6137
6191
|
type: Component,
|