@unifylib/ui-lib 1.1.64 → 1.2.1
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/cli/generators/dashboard.js +147 -0
- package/cli/generators/form-screen.js +95 -0
- package/cli/generators/line-editor.js +110 -0
- package/cli/generators/permission-matrix.js +115 -0
- package/cli/generators/section-form.js +103 -0
- package/cli/generators/table-screen.js +181 -0
- package/cli/index.js +185 -0
- package/cli/utils.js +228 -0
- package/esm2022/lib/base-model/audit-log-entry.mjs +1 -1
- package/esm2022/lib/base-model/field-info.mjs +2 -1
- package/esm2022/lib/components/action-comment/action-comment.component.mjs +6 -5
- package/esm2022/lib/components/advanced-filter/filter-builder/filter-builder.component.mjs +8 -3
- package/esm2022/lib/components/audit-log-list/audit-log.component.mjs +58 -22
- package/esm2022/lib/components/auto-complete/auto-complete.component.mjs +11 -3
- package/esm2022/lib/components/base-form/base-form.component.mjs +1 -1
- package/esm2022/lib/components/base-form-canvas/base-form-canvas.component.mjs +72 -4
- package/esm2022/lib/components/base-table/base-table.component.mjs +81 -24
- package/esm2022/lib/components/button-actions/button-actions.component.mjs +3 -3
- package/esm2022/lib/components/editable-base-table/editable-base-table.component.mjs +3 -3
- package/esm2022/lib/components/equation-builder/equation-builder.component.mjs +9 -4
- package/esm2022/lib/components/multi-auto-complete/multi-auto-complete.component.mjs +20 -4
- package/esm2022/lib/components/paginator/paginator.component.mjs +26 -6
- package/esm2022/lib/components/permission-matrix/permission-matrix.component.mjs +46 -4
- package/esm2022/lib/components/report-details-dialog/report-details-dialog.component.mjs +3 -3
- package/esm2022/lib/components/report-form/report-form.component.mjs +3 -3
- package/esm2022/lib/components/search-bar/search-bar.component.mjs +5 -4
- package/esm2022/lib/components/section-form-canvas/section-form-canvas.component.mjs +11 -3
- package/esm2022/lib/components/shared/attachment-uploader/attachment-uploader.component.mjs +5 -3
- package/esm2022/lib/components/snackbar-static/snackbar-static.component.mjs +3 -3
- package/esm2022/lib/components/title-bar/title-bar.component.mjs +3 -3
- package/esm2022/lib/utils/base-utils.mjs +6 -3
- package/fesm2022/iq-ui-lib.mjs +375 -108
- package/fesm2022/iq-ui-lib.mjs.map +1 -1
- package/fesm2022/unifylib-ui-lib.mjs +375 -108
- package/fesm2022/unifylib-ui-lib.mjs.map +1 -1
- package/lib/base-model/audit-log-entry.d.ts +1 -0
- package/lib/base-model/field-info.d.ts +1 -0
- package/lib/components/advanced-filter/filter-builder/filter-builder.component.d.ts +2 -0
- package/lib/components/audit-log-list/audit-log.component.d.ts +6 -2
- package/lib/components/auto-complete/auto-complete.component.d.ts +2 -1
- package/lib/components/base-form-canvas/base-form-canvas.component.d.ts +5 -0
- package/lib/components/base-table/base-table.component.d.ts +11 -3
- package/lib/components/multi-auto-complete/multi-auto-complete.component.d.ts +3 -1
- package/lib/components/paginator/paginator.component.d.ts +6 -1
- package/lib/components/permission-matrix/permission-matrix.component.d.ts +5 -1
- package/lib/components/section-form-canvas/section-form-canvas.component.d.ts +3 -1
- package/lib/components/shared/attachment-uploader/attachment-uploader.component.d.ts +2 -1
- package/package.json +4 -1
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Component, Inject, Input, HostListener, EventEmitter, Output, Injectable, signal, ViewChild, forwardRef, Directive, model, computed,
|
|
2
|
+
import { Component, Inject, Input, HostListener, EventEmitter, Output, Injectable, signal, ViewChild, forwardRef, Directive, model, computed, inject, effect } from '@angular/core';
|
|
3
3
|
import * as i1$1 from '@angular/common';
|
|
4
4
|
import { CommonModule, NgForOf, NgIf, NgClass, AsyncPipe, NgSwitch, NgTemplateOutlet, KeyValuePipe, NgSwitchCase, DatePipe, CurrencyPipe, NgStyle, formatDate, NgSwitchDefault, DecimalPipe } from '@angular/common';
|
|
5
5
|
import * as i1 from '@angular/material/dialog';
|
|
6
6
|
import { MAT_DIALOG_DATA, MatDialogTitle, MatDialogContent, MatDialogActions } from '@angular/material/dialog';
|
|
7
7
|
import * as i2 from '@ngx-translate/core';
|
|
8
8
|
import { TranslateModule, TranslateService } from '@ngx-translate/core';
|
|
9
|
-
import * as
|
|
9
|
+
import * as i7 from '@angular/material/button';
|
|
10
10
|
import { MatButton, MatIconButton, MatButtonModule } from '@angular/material/button';
|
|
11
|
-
import * as
|
|
11
|
+
import * as i3$2 from '@angular/material/icon';
|
|
12
12
|
import { MatIcon, MatIconModule } from '@angular/material/icon';
|
|
13
13
|
import { MatCell, MatCellDef, MatHeaderCell, MatHeaderCellDef, MatTableDataSource, MatColumnDef, MatTable, MatRow, MatRowDef, MatHeaderRow, MatHeaderRowDef } from '@angular/material/table';
|
|
14
|
-
import * as i7 from '@angular/material/sort';
|
|
14
|
+
import * as i7$1 from '@angular/material/sort';
|
|
15
15
|
import { MatSortModule } from '@angular/material/sort';
|
|
16
16
|
import * as i9$1 from 'ngx-pagination';
|
|
17
17
|
import { NgxPaginationModule } from 'ngx-pagination';
|
|
@@ -29,7 +29,9 @@ import { MatMenuTrigger, MatMenu, MatMenuItem } from '@angular/material/menu';
|
|
|
29
29
|
import * as i4 from '@angular/material/chips';
|
|
30
30
|
import { MatChipListbox, MatChipOption, MatChip, MatChipsModule, MatChipInput, MatChipGrid, MatChipRow, MatChipRemove } from '@angular/material/chips';
|
|
31
31
|
import * as i3$1 from '@angular/cdk/bidi';
|
|
32
|
-
import * as
|
|
32
|
+
import * as i2$1 from '@angular/cdk/a11y';
|
|
33
|
+
import { LiveAnnouncer } from '@angular/cdk/a11y';
|
|
34
|
+
import * as i3$4 from '@angular/material/checkbox';
|
|
33
35
|
import { MatCheckbox, MatCheckboxModule } from '@angular/material/checkbox';
|
|
34
36
|
import { ENTER, COMMA, SEMICOLON } from '@angular/cdk/keycodes';
|
|
35
37
|
import { MatDatepickerInput, MatDatepicker, MatDatepickerToggle, MatDateRangeInput } from '@angular/material/datepicker';
|
|
@@ -44,11 +46,11 @@ import { BehaviorSubject, Subject, of, map, takeUntil } from 'rxjs';
|
|
|
44
46
|
import * as i1$2 from '@angular/common/http';
|
|
45
47
|
import { HttpHeaders, HttpParams } from '@angular/common/http';
|
|
46
48
|
import { distinctUntilChanged, catchError } from 'rxjs/operators';
|
|
47
|
-
import * as i3$
|
|
49
|
+
import * as i3$3 from '@angular/router';
|
|
48
50
|
import { MatTooltip } from '@angular/material/tooltip';
|
|
49
51
|
import moment from 'moment/moment';
|
|
50
52
|
import { MomentDateAdapter, MAT_MOMENT_DATE_ADAPTER_OPTIONS } from '@angular/material-moment-adapter';
|
|
51
|
-
import * as
|
|
53
|
+
import * as i4$2 from '@angular/cdk/layout';
|
|
52
54
|
import { MatExpansionPanelTitle, MatExpansionPanel, MatExpansionPanelHeader, MatExpansionPanelDescription } from '@angular/material/expansion';
|
|
53
55
|
import moment$1 from 'moment';
|
|
54
56
|
import { cloneDeep } from 'lodash';
|
|
@@ -146,7 +148,7 @@ class ActionCommentComponent {
|
|
|
146
148
|
this.signingRequired = this.data.signingRequired;
|
|
147
149
|
this.tokenReference = this.data.tokenReference;
|
|
148
150
|
this.warningMsg = this.data.warningMsg || false;
|
|
149
|
-
this.itemName = this.data.
|
|
151
|
+
this.itemName = this.data.itemName;
|
|
150
152
|
this.titleKey = this.data.titleKey;
|
|
151
153
|
this.subtitleKey = this.data.subtitleKey;
|
|
152
154
|
this.reasonLabelKey = this.data.reasonLabelKey;
|
|
@@ -177,13 +179,14 @@ class ActionCommentComponent {
|
|
|
177
179
|
this.dialogRef.close();
|
|
178
180
|
}
|
|
179
181
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ActionCommentComponent, deps: [{ token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i2.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
180
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ActionCommentComponent, isStandalone: true, selector: "app-action-comment", host: { listeners: { "window:keyup.esc": "onKeyUp()" } }, ngImport: i0, template: "<div class=\"dialog-container\" [dir]=\"currentDirection\">\r\n\r\n <div class=\"desktop-view\">\r\n <h2 mat-dialog-title class=\"dialog-title\">\r\n {{ titleKey | translate}} {{itemName}}\r\n </h2>\r\n\r\n <p class=\"dialog-subtitle\">\r\n {{ subtitleKey | translate }}\r\n </p>\r\n\r\n <p class=\"textarea-label\">\r\n {{ reasonLabelKey | translate }}\r\n </p>\r\n\r\n <mat-dialog-content class=\"content-section\">\r\n\r\n <ng-container *ngIf=\"data?.options?.length; else textMode\">\r\n\r\n <mat-form-field appearance=\"outline\" class=\"w-100\">\r\n <mat-select\r\n [(ngModel)]=\"comment\"\r\n [placeholder]=\"placeholderKey | translate\">\r\n\r\n <mat-option *ngFor=\"let item of data.options\" [value]=\"item\">\r\n {{ data.translate ? (item | translate) : item }}\r\n </mat-option>\r\n\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <mat-form-field\r\n *ngIf=\"comment === 'OTHER'\"\r\n appearance=\"outline\"\r\n class=\"w-100\">\r\n <textarea\r\n matInput\r\n [(ngModel)]=\"otherComment\"\r\n [placeholder]=\"placeholderKey | translate\"\r\n cdkTextareaAutosize\r\n cdkAutosizeMinRows=\"4\"\r\n maxlength=\"1000\"\r\n cdkAutosizeMaxRows=\"5\">\r\n </textarea>\r\n </mat-form-field>\r\n\r\n </ng-container>\r\n\r\n <ng-template #textMode>\r\n <mat-form-field appearance=\"outline\" class=\"w-100\">\r\n <textarea\r\n matInput\r\n [(ngModel)]=\"comment\"\r\n [placeholder]=\"placeholderKey | translate\"\r\n cdkTextareaAutosize\r\n cdkAutosizeMinRows=\"4\"\r\n maxlength=\"1000\"\r\n cdkAutosizeMaxRows=\"5\">\r\n </textarea>\r\n </mat-form-field>\r\n </ng-template>\r\n\r\n <div class=\"info-box\">\r\n <mat-icon>info</mat-icon>\r\n <span class=\"info-text\">\r\n {{ warningKey | translate }}\r\n </span>\r\n </div>\r\n\r\n </mat-dialog-content>\r\n\r\n <mat-dialog-actions align=\"end\" class=\"footer-actions\">\r\n <button mat-stroked-button class=\"btn-none-background-primary cancel-btn\" (click)=\"cancel()\">\r\n {{ cancelKey | translate }}\r\n </button>\r\n\r\n <button\r\n mat-flat-button\r\n class=\"btn-background-primary warn-btn\"\r\n (click)=\"commentAndClose()\"\r\n [disabled]=\"!comment || (comment === 'OTHER' && !otherComment)\">\r\n {{ actionKey | translate }}\r\n </button>\r\n </mat-dialog-actions>\r\n </div>\r\n\r\n <div class=\"mobile-view\">\r\n <div class=\"modal-header\">\r\n <div class=\"handle\"></div>\r\n <div class=\"header-content\">\r\n <p class=\"modal-title\">{{ titleKey | translate }}</p>\r\n <button class=\"close-button\" (click)=\"cancel()\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"modal-body\">\r\n\r\n <div class=\"textarea-label-mobile\">\r\n {{ reasonLabelKey | translate }} {{ itemName }}\r\n </div>\r\n\r\n <ng-container *ngIf=\"data?.options?.length; else mobileText\">\r\n\r\n <mat-form-field appearance=\"outline\" class=\"textarea-field-mobile\">\r\n <mat-select\r\n [(ngModel)]=\"comment\"\r\n class=\"textarea-mobile\">\r\n\r\n <mat-option *ngFor=\"let item of data.options\" [value]=\"item\">\r\n {{ data.translate ? ( item | translate) : item }}\r\n </mat-option>\r\n\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <mat-form-field\r\n *ngIf=\"comment === 'OTHER'\"\r\n appearance=\"outline\"\r\n class=\"textarea-field-mobile\">\r\n <textarea\r\n matInput\r\n [(ngModel)]=\"otherComment\"\r\n [placeholder]=\"placeholderKey | translate\"\r\n cdkTextareaAutosize\r\n cdkAutosizeMinRows=\"4\"\r\n cdkAutosizeMaxRows=\"5\"\r\n maxlength=\"1000\"\r\n class=\"textarea-mobile\">\r\n </textarea>\r\n </mat-form-field>\r\n\r\n </ng-container>\r\n\r\n <ng-template #mobileText>\r\n <mat-form-field appearance=\"outline\" class=\"textarea-field-mobile\">\r\n <textarea\r\n matInput\r\n [(ngModel)]=\"comment\"\r\n [placeholder]=\"placeholderKey | translate\"\r\n cdkTextareaAutosize\r\n cdkAutosizeMinRows=\"4\"\r\n cdkAutosizeMaxRows=\"5\"\r\n maxlength=\"1000\"\r\n class=\"textarea-mobile\">\r\n </textarea>\r\n </mat-form-field>\r\n </ng-template>\r\n\r\n <div class=\"info-box-mobile\">\r\n <mat-icon class=\"info-icon-mobile\">info</mat-icon>\r\n <span class=\"info-text-mobile\">\r\n {{ warningKey | translate }}\r\n </span>\r\n </div>\r\n\r\n </div>\r\n\r\n <div class=\"modal-actions-mobile\">\r\n <div class=\"actions-buttons-container\">\r\n <button mat-stroked-button class=\"btn-cancel-mobile\" (click)=\"cancel()\">\r\n {{ cancelKey | translate }}\r\n </button>\r\n <button\r\n mat-flat-button\r\n class=\"btn-action-mobile\"\r\n (click)=\"commentAndClose()\"\r\n [disabled]=\"!comment || (comment === 'OTHER' && !otherComment)\">\r\n {{ actionKey | translate }}\r\n </button>\r\n </div>\r\n <div class=\"home-indicator\"></div>\r\n </div>\r\n </div>\r\n\r\n</div>\r\n", styles: [".dialog-container{position:relative}.desktop-view{display:block}.mobile-view{display:none}.dialog-title{font-size:20px;font-weight:600;padding:0 16px}.dialog-subtitle{color:#666;padding:0 20px}.textarea-label{font-weight:600;padding:5px 20px;margin:0;color:#000}.info-text{color:#888;font-family:Lusail,sans-serif;font-size:16px;font-style:normal;font-weight:400;line-height:120%}.info-box{display:flex;font-size:12px}.info-box mat-icon{font-size:18px;color:var(--primary-color-3nd)}.footer-actions{margin-top:0}.cancel-btn{width:121px!important}.warn-btn{width:171px!important}.content-section{padding:0 20px}.mobile-view{display:flex;flex-direction:column;gap:8px;background:#fff;padding:16px 24px;min-height:356px;box-sizing:border-box}.modal-header{display:flex;flex-direction:column;gap:8px;width:100%}.handle{width:36px;height:4px;background:#b7b7b7;border-radius:2px;margin:0 auto;flex-shrink:0}.header-content{display:flex;align-items:center;justify-content:space-between;width:100%;position:relative}.modal-title{font-family:Lusail,sans-serif;font-weight:500;font-size:14px;line-height:1.2;color:#161616;text-align:center;position:absolute;left:50%;transform:translate(-50%);margin:0;width:200px}.close-button{background:#f0eeee;border:none;border-radius:9999px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:8px;margin-left:auto;flex-shrink:0}.close-button mat-icon{font-size:20px;width:20px;height:20px;color:#000;overflow:visible}.close-button:hover{background:#e0e0e0}.modal-body{display:flex;flex-direction:column;gap:8px;width:100%;flex:1;min-height:0}.textarea-label-mobile{font-family:Lusail,sans-serif;font-weight:500;font-size:16px;line-height:1.2;color:#000;height:24px;max-height:24px;margin:0;padding:0}.textarea-field-mobile{width:100%;margin:0!important}:host ::ng-deep .textarea-field-mobile .mat-mdc-form-field-infix{min-height:107px;padding:16px!important}:host ::ng-deep .textarea-field-mobile .mat-mdc-form-field-outline{border:1px solid #b7b7b7!important;border-radius:8px!important}:host ::ng-deep .textarea-field-mobile textarea{font-family:Lusail,sans-serif;font-weight:300;font-size:16px;line-height:1.2;color:#888;resize:both}:host ::ng-deep .textarea-field-mobile textarea::placeholder{color:#888;font-weight:300;font-size:16px;line-height:1.2}.info-box-mobile{display:flex;gap:8px;align-items:flex-end;width:100%}.info-box-mobile .info-icon-mobile{font-size:18px;width:18px;height:20px;color:#b54708;flex-shrink:0;margin-top:2px}.info-box-mobile .info-text-mobile{font-family:Lusail,sans-serif;font-weight:300;font-size:16px;line-height:1;color:#5c5c5c;flex:1}.modal-actions-mobile{display:flex;flex-direction:column;gap:0;align-items:center;justify-content:center;width:100%;min-height:68px;position:relative}.actions-buttons-container{display:flex;gap:8px;align-items:center;justify-content:center;width:100%;margin-bottom:0;flex-shrink:0}.modal-actions-mobile>.actions-buttons-container>button{margin:0!important}.btn-cancel-mobile{width:160px!important;height:44px!important;border:1px solid #3e627b!important;border-radius:8px!important;background:#fff!important;font-family:Lusail,sans-serif;font-weight:500;font-size:16px;line-height:1.2;color:#0d4261!important}.btn-action-mobile{flex:1 1 0!important;min-width:0!important;height:44px!important;border-radius:8px!important;background:#0d4261!important;font-family:Lusail,sans-serif;font-weight:500;font-size:16px;line-height:1.2;color:#fff!important}.home-indicator{width:134px;height:5px;background:#161616;border-radius:100px;position:absolute;bottom:0;left:50%;transform:translate(-50%)}@media (max-width: 768px){.desktop-view{display:none!important}.mobile-view{display:flex!important}}:host ::ng-deep .mat-mdc-dialog-container{padding:0!important}@media (max-width: 768px){:host ::ng-deep .mat-mdc-dialog-container{max-width:100vw!important;width:100vw!important;margin:0!important;position:fixed!important;inset:auto 0 0!important;border-radius:0!important;max-height:90vh!important}:host ::ng-deep .cdk-overlay-backdrop{background-color:#00000080!important}}@media (min-width: 769px){.desktop-view{display:block!important}.mobile-view{display:none!important}}@media (max-width: 600px){::ng-deep cdk-global-overlay-wrapper{align-items:flex-end!important}}\n"], dependencies: [{ kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { 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: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { 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: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
|
182
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ActionCommentComponent, isStandalone: true, selector: "app-action-comment", host: { listeners: { "window:keyup.esc": "onKeyUp()" } }, ngImport: i0, template: "<div class=\"dialog-container\" [dir]=\"currentDirection\">\r\n\r\n <div class=\"desktop-view\">\r\n <h2 mat-dialog-title class=\"dialog-title\">\r\n {{ titleKey | translate}} {{itemName}}\r\n </h2>\r\n\r\n <p class=\"dialog-subtitle\">\r\n {{ subtitleKey | translate }}\r\n </p>\r\n\r\n <mat-dialog-content class=\"content-section\">\r\n\r\n <ng-container *ngIf=\"data?.options?.length; else textMode\">\r\n\r\n <mat-form-field appearance=\"outline\" class=\"w-100\">\r\n <mat-select\r\n [(ngModel)]=\"comment\"\r\n [placeholder]=\"placeholderKey | translate\">\r\n\r\n <mat-option *ngFor=\"let item of data.options\" [value]=\"item\">\r\n {{ data.translate ? (item | translate) : item }}\r\n </mat-option>\r\n\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <mat-form-field\r\n *ngIf=\"comment === 'OTHER'\"\r\n appearance=\"outline\"\r\n class=\"w-100\">\r\n <textarea\r\n matInput\r\n [(ngModel)]=\"otherComment\"\r\n [placeholder]=\"placeholderKey | translate\"\r\n cdkTextareaAutosize\r\n cdkAutosizeMinRows=\"4\"\r\n maxlength=\"1000\"\r\n cdkAutosizeMaxRows=\"5\">\r\n </textarea>\r\n </mat-form-field>\r\n\r\n </ng-container>\r\n\r\n <ng-template #textMode>\r\n <mat-form-field appearance=\"outline\" class=\"w-100\">\r\n <mat-label>{{ reasonLabelKey | translate }}</mat-label>\r\n <textarea\r\n matInput\r\n [(ngModel)]=\"comment\"\r\n [placeholder]=\"placeholderKey | translate\"\r\n cdkTextareaAutosize\r\n cdkAutosizeMinRows=\"4\"\r\n maxlength=\"1000\"\r\n cdkAutosizeMaxRows=\"5\">\r\n </textarea>\r\n </mat-form-field>\r\n </ng-template>\r\n\r\n <div class=\"info-box\">\r\n <mat-icon>info</mat-icon>\r\n <span class=\"info-text\">\r\n {{ warningKey | translate }}\r\n </span>\r\n </div>\r\n\r\n </mat-dialog-content>\r\n\r\n <mat-dialog-actions align=\"end\" class=\"footer-actions\">\r\n <button mat-stroked-button class=\"btn-none-background-primary cancel-btn\" (click)=\"cancel()\">\r\n {{ cancelKey | translate }}\r\n </button>\r\n\r\n <button\r\n mat-flat-button\r\n class=\"btn-background-primary warn-btn\"\r\n (click)=\"commentAndClose()\"\r\n [disabled]=\"!comment || (comment === 'OTHER' && !otherComment)\">\r\n {{ actionKey | translate }}\r\n </button>\r\n </mat-dialog-actions>\r\n </div>\r\n\r\n <div class=\"mobile-view\">\r\n <div class=\"modal-header\">\r\n <div class=\"handle\"></div>\r\n <div class=\"header-content\">\r\n <p class=\"modal-title\">{{ titleKey | translate }}</p>\r\n <button class=\"close-button\" (click)=\"cancel()\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"modal-body\">\r\n\r\n <ng-container *ngIf=\"data?.options?.length; else mobileText\">\r\n\r\n <mat-form-field appearance=\"outline\" class=\"textarea-field-mobile\">\r\n <mat-select\r\n [(ngModel)]=\"comment\"\r\n [placeholder]=\"placeholderKey | translate\"\r\n class=\"textarea-mobile\">\r\n\r\n <mat-option *ngFor=\"let item of data.options\" [value]=\"item\">\r\n {{ data.translate ? ( item | translate) : item }}\r\n </mat-option>\r\n\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <mat-form-field\r\n *ngIf=\"comment === 'OTHER'\"\r\n appearance=\"outline\"\r\n class=\"textarea-field-mobile\">\r\n <mat-label>{{ placeholderKey | translate }}</mat-label>\r\n <textarea\r\n matInput\r\n [(ngModel)]=\"otherComment\"\r\n [placeholder]=\"placeholderKey | translate\"\r\n cdkTextareaAutosize\r\n cdkAutosizeMinRows=\"4\"\r\n cdkAutosizeMaxRows=\"5\"\r\n maxlength=\"1000\"\r\n class=\"textarea-mobile\">\r\n </textarea>\r\n </mat-form-field>\r\n\r\n </ng-container>\r\n\r\n <ng-template #mobileText>\r\n <mat-form-field appearance=\"outline\" class=\"textarea-field-mobile\">\r\n <mat-label>{{ reasonLabelKey | translate }} {{ itemName }}</mat-label>\r\n <textarea\r\n matInput\r\n [(ngModel)]=\"comment\"\r\n [placeholder]=\"placeholderKey | translate\"\r\n cdkTextareaAutosize\r\n cdkAutosizeMinRows=\"4\"\r\n cdkAutosizeMaxRows=\"5\"\r\n maxlength=\"1000\"\r\n class=\"textarea-mobile\">\r\n </textarea>\r\n </mat-form-field>\r\n </ng-template>\r\n\r\n <div class=\"info-box-mobile\">\r\n <mat-icon class=\"info-icon-mobile\">info</mat-icon>\r\n <span class=\"info-text-mobile\">\r\n {{ warningKey | translate }}\r\n </span>\r\n </div>\r\n\r\n </div>\r\n\r\n <div class=\"modal-actions-mobile\">\r\n <div class=\"actions-buttons-container\">\r\n <button mat-stroked-button class=\"btn-cancel-mobile\" (click)=\"cancel()\">\r\n {{ cancelKey | translate }}\r\n </button>\r\n <button\r\n mat-flat-button\r\n class=\"btn-action-mobile\"\r\n (click)=\"commentAndClose()\"\r\n [disabled]=\"!comment || (comment === 'OTHER' && !otherComment)\">\r\n {{ actionKey | translate }}\r\n </button>\r\n </div>\r\n <div class=\"home-indicator\"></div>\r\n </div>\r\n </div>\r\n\r\n</div>\r\n", styles: [".dialog-container{position:relative}.desktop-view{display:block}.mobile-view{display:none}.dialog-title{font-size:20px;font-weight:600;padding:0 16px}.dialog-subtitle{color:#666;padding:0 20px}.textarea-label{font-weight:600;padding:5px 20px;margin:0;color:#000}.info-text{color:#888;font-family:Lusail,sans-serif;font-size:16px;font-style:normal;font-weight:400;line-height:120%}.info-box{display:flex;font-size:12px}.info-box mat-icon{font-size:18px;color:var(--primary-color-3nd)}.footer-actions{margin-top:0}.cancel-btn{width:121px!important}.warn-btn{width:171px!important}.content-section{padding:0 20px}.mobile-view{display:flex;flex-direction:column;gap:8px;background:#fff;padding:16px 24px;min-height:356px;box-sizing:border-box}.modal-header{display:flex;flex-direction:column;gap:8px;width:100%}.handle{width:36px;height:4px;background:#b7b7b7;border-radius:2px;margin:0 auto;flex-shrink:0}.header-content{display:flex;align-items:center;justify-content:space-between;width:100%;position:relative}.modal-title{font-family:Lusail,sans-serif;font-weight:500;font-size:14px;line-height:1.2;color:#161616;text-align:center;position:absolute;left:50%;transform:translate(-50%);margin:0;width:200px}.close-button{background:#f0eeee;border:none;border-radius:9999px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:8px;margin-left:auto;flex-shrink:0}.close-button mat-icon{font-size:20px;width:20px;height:20px;color:#000;overflow:visible}.close-button:hover{background:#e0e0e0}.modal-body{display:flex;flex-direction:column;gap:8px;width:100%;flex:1;min-height:0}.textarea-label-mobile{font-family:Lusail,sans-serif;font-weight:500;font-size:16px;line-height:1.2;color:#000;height:24px;max-height:24px;margin:0;padding:0}.textarea-field-mobile{width:100%;margin:0!important}:host ::ng-deep .textarea-field-mobile .mat-mdc-form-field-infix{min-height:107px;padding:16px!important}:host ::ng-deep .textarea-field-mobile .mat-mdc-form-field-outline{border:1px solid #b7b7b7!important;border-radius:8px!important}:host ::ng-deep .textarea-field-mobile textarea{font-family:Lusail,sans-serif;font-weight:300;font-size:16px;line-height:1.2;color:#888;resize:both}:host ::ng-deep .textarea-field-mobile textarea::placeholder{color:#888;font-weight:300;font-size:16px;line-height:1.2}.info-box-mobile{display:flex;gap:8px;align-items:flex-end;width:100%}.info-box-mobile .info-icon-mobile{font-size:18px;width:18px;height:20px;color:#b54708;flex-shrink:0;margin-top:2px}.info-box-mobile .info-text-mobile{font-family:Lusail,sans-serif;font-weight:300;font-size:16px;line-height:1;color:#5c5c5c;flex:1}.modal-actions-mobile{display:flex;flex-direction:column;gap:0;align-items:center;justify-content:center;width:100%;min-height:68px;position:relative}.actions-buttons-container{display:flex;gap:8px;align-items:center;justify-content:center;width:100%;margin-bottom:0;flex-shrink:0}.modal-actions-mobile>.actions-buttons-container>button{margin:0!important}.btn-cancel-mobile{flex:.5!important;height:44px!important;border:1px solid #3e627b!important;border-radius:8px!important;background:#fff!important;font-family:Lusail,sans-serif;font-weight:500;font-size:16px;line-height:1.2;color:#0d4261!important}.btn-action-mobile{flex:1 1 0!important;min-width:0!important;height:44px!important;border-radius:8px!important;background:#0d4261!important;font-family:Lusail,sans-serif;font-weight:500;font-size:16px;line-height:1.2;color:#fff!important}.home-indicator{width:134px;height:5px;background:#161616;border-radius:100px;position:absolute;bottom:0;left:50%;transform:translate(-50%)}@media (max-width: 768px){.desktop-view{display:none!important}.mobile-view{display:flex!important}}:host ::ng-deep .mat-mdc-dialog-container{padding:0!important}@media (max-width: 768px){:host ::ng-deep .mat-mdc-dialog-container{max-width:100vw!important;width:100vw!important;margin:0!important;position:fixed!important;inset:auto 0 0!important;border-radius:0!important;max-height:90vh!important}:host ::ng-deep .cdk-overlay-backdrop{background-color:#00000080!important}}@media (min-width: 769px){.desktop-view{display:block!important}.mobile-view{display:none!important}}@media (max-width: 600px){::ng-deep cdk-global-overlay-wrapper{align-items:flex-end!important}}\n"], dependencies: [{ kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { 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: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { 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: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
|
181
183
|
}
|
|
182
184
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ActionCommentComponent, decorators: [{
|
|
183
185
|
type: Component,
|
|
184
186
|
args: [{ selector: 'app-action-comment', standalone: true, imports: [
|
|
185
187
|
MatDialogTitle,
|
|
186
188
|
MatFormField,
|
|
189
|
+
MatLabel,
|
|
187
190
|
MatDialogContent,
|
|
188
191
|
FormsModule,
|
|
189
192
|
CdkTextareaAutosize,
|
|
@@ -196,7 +199,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
196
199
|
MatSelect,
|
|
197
200
|
NgForOf,
|
|
198
201
|
NgIf
|
|
199
|
-
], template: "<div class=\"dialog-container\" [dir]=\"currentDirection\">\r\n\r\n <div class=\"desktop-view\">\r\n <h2 mat-dialog-title class=\"dialog-title\">\r\n {{ titleKey | translate}} {{itemName}}\r\n </h2>\r\n\r\n <p class=\"dialog-subtitle\">\r\n {{ subtitleKey | translate }}\r\n </p>\r\n\r\n <p class=\"textarea-label\">\r\n {{ reasonLabelKey | translate }}\r\n </p>\r\n\r\n <mat-dialog-content class=\"content-section\">\r\n\r\n <ng-container *ngIf=\"data?.options?.length; else textMode\">\r\n\r\n <mat-form-field appearance=\"outline\" class=\"w-100\">\r\n <mat-select\r\n [(ngModel)]=\"comment\"\r\n [placeholder]=\"placeholderKey | translate\">\r\n\r\n <mat-option *ngFor=\"let item of data.options\" [value]=\"item\">\r\n {{ data.translate ? (item | translate) : item }}\r\n </mat-option>\r\n\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <mat-form-field\r\n *ngIf=\"comment === 'OTHER'\"\r\n appearance=\"outline\"\r\n class=\"w-100\">\r\n <textarea\r\n matInput\r\n [(ngModel)]=\"otherComment\"\r\n [placeholder]=\"placeholderKey | translate\"\r\n cdkTextareaAutosize\r\n cdkAutosizeMinRows=\"4\"\r\n maxlength=\"1000\"\r\n cdkAutosizeMaxRows=\"5\">\r\n </textarea>\r\n </mat-form-field>\r\n\r\n </ng-container>\r\n\r\n <ng-template #textMode>\r\n <mat-form-field appearance=\"outline\" class=\"w-100\">\r\n <textarea\r\n matInput\r\n [(ngModel)]=\"comment\"\r\n [placeholder]=\"placeholderKey | translate\"\r\n cdkTextareaAutosize\r\n cdkAutosizeMinRows=\"4\"\r\n maxlength=\"1000\"\r\n cdkAutosizeMaxRows=\"5\">\r\n </textarea>\r\n </mat-form-field>\r\n </ng-template>\r\n\r\n <div class=\"info-box\">\r\n <mat-icon>info</mat-icon>\r\n <span class=\"info-text\">\r\n {{ warningKey | translate }}\r\n </span>\r\n </div>\r\n\r\n </mat-dialog-content>\r\n\r\n <mat-dialog-actions align=\"end\" class=\"footer-actions\">\r\n <button mat-stroked-button class=\"btn-none-background-primary cancel-btn\" (click)=\"cancel()\">\r\n {{ cancelKey | translate }}\r\n </button>\r\n\r\n <button\r\n mat-flat-button\r\n class=\"btn-background-primary warn-btn\"\r\n (click)=\"commentAndClose()\"\r\n [disabled]=\"!comment || (comment === 'OTHER' && !otherComment)\">\r\n {{ actionKey | translate }}\r\n </button>\r\n </mat-dialog-actions>\r\n </div>\r\n\r\n <div class=\"mobile-view\">\r\n <div class=\"modal-header\">\r\n <div class=\"handle\"></div>\r\n <div class=\"header-content\">\r\n <p class=\"modal-title\">{{ titleKey | translate }}</p>\r\n <button class=\"close-button\" (click)=\"cancel()\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"modal-body\">\r\n\r\n <div class=\"textarea-label-mobile\">\r\n {{ reasonLabelKey | translate }} {{ itemName }}\r\n </div>\r\n\r\n <ng-container *ngIf=\"data?.options?.length; else mobileText\">\r\n\r\n <mat-form-field appearance=\"outline\" class=\"textarea-field-mobile\">\r\n <mat-select\r\n [(ngModel)]=\"comment\"\r\n class=\"textarea-mobile\">\r\n\r\n <mat-option *ngFor=\"let item of data.options\" [value]=\"item\">\r\n {{ data.translate ? ( item | translate) : item }}\r\n </mat-option>\r\n\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <mat-form-field\r\n *ngIf=\"comment === 'OTHER'\"\r\n appearance=\"outline\"\r\n class=\"textarea-field-mobile\">\r\n <textarea\r\n matInput\r\n [(ngModel)]=\"otherComment\"\r\n [placeholder]=\"placeholderKey | translate\"\r\n cdkTextareaAutosize\r\n cdkAutosizeMinRows=\"4\"\r\n cdkAutosizeMaxRows=\"5\"\r\n maxlength=\"1000\"\r\n class=\"textarea-mobile\">\r\n </textarea>\r\n </mat-form-field>\r\n\r\n </ng-container>\r\n\r\n <ng-template #mobileText>\r\n <mat-form-field appearance=\"outline\" class=\"textarea-field-mobile\">\r\n <textarea\r\n matInput\r\n [(ngModel)]=\"comment\"\r\n [placeholder]=\"placeholderKey | translate\"\r\n cdkTextareaAutosize\r\n cdkAutosizeMinRows=\"4\"\r\n cdkAutosizeMaxRows=\"5\"\r\n maxlength=\"1000\"\r\n class=\"textarea-mobile\">\r\n </textarea>\r\n </mat-form-field>\r\n </ng-template>\r\n\r\n <div class=\"info-box-mobile\">\r\n <mat-icon class=\"info-icon-mobile\">info</mat-icon>\r\n <span class=\"info-text-mobile\">\r\n {{ warningKey | translate }}\r\n </span>\r\n </div>\r\n\r\n </div>\r\n\r\n <div class=\"modal-actions-mobile\">\r\n <div class=\"actions-buttons-container\">\r\n <button mat-stroked-button class=\"btn-cancel-mobile\" (click)=\"cancel()\">\r\n {{ cancelKey | translate }}\r\n </button>\r\n <button\r\n mat-flat-button\r\n class=\"btn-action-mobile\"\r\n (click)=\"commentAndClose()\"\r\n [disabled]=\"!comment || (comment === 'OTHER' && !otherComment)\">\r\n {{ actionKey | translate }}\r\n </button>\r\n </div>\r\n <div class=\"home-indicator\"></div>\r\n </div>\r\n </div>\r\n\r\n</div>\r\n", styles: [".dialog-container{position:relative}.desktop-view{display:block}.mobile-view{display:none}.dialog-title{font-size:20px;font-weight:600;padding:0 16px}.dialog-subtitle{color:#666;padding:0 20px}.textarea-label{font-weight:600;padding:5px 20px;margin:0;color:#000}.info-text{color:#888;font-family:Lusail,sans-serif;font-size:16px;font-style:normal;font-weight:400;line-height:120%}.info-box{display:flex;font-size:12px}.info-box mat-icon{font-size:18px;color:var(--primary-color-3nd)}.footer-actions{margin-top:0}.cancel-btn{width:121px!important}.warn-btn{width:171px!important}.content-section{padding:0 20px}.mobile-view{display:flex;flex-direction:column;gap:8px;background:#fff;padding:16px 24px;min-height:356px;box-sizing:border-box}.modal-header{display:flex;flex-direction:column;gap:8px;width:100%}.handle{width:36px;height:4px;background:#b7b7b7;border-radius:2px;margin:0 auto;flex-shrink:0}.header-content{display:flex;align-items:center;justify-content:space-between;width:100%;position:relative}.modal-title{font-family:Lusail,sans-serif;font-weight:500;font-size:14px;line-height:1.2;color:#161616;text-align:center;position:absolute;left:50%;transform:translate(-50%);margin:0;width:200px}.close-button{background:#f0eeee;border:none;border-radius:9999px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:8px;margin-left:auto;flex-shrink:0}.close-button mat-icon{font-size:20px;width:20px;height:20px;color:#000;overflow:visible}.close-button:hover{background:#e0e0e0}.modal-body{display:flex;flex-direction:column;gap:8px;width:100%;flex:1;min-height:0}.textarea-label-mobile{font-family:Lusail,sans-serif;font-weight:500;font-size:16px;line-height:1.2;color:#000;height:24px;max-height:24px;margin:0;padding:0}.textarea-field-mobile{width:100%;margin:0!important}:host ::ng-deep .textarea-field-mobile .mat-mdc-form-field-infix{min-height:107px;padding:16px!important}:host ::ng-deep .textarea-field-mobile .mat-mdc-form-field-outline{border:1px solid #b7b7b7!important;border-radius:8px!important}:host ::ng-deep .textarea-field-mobile textarea{font-family:Lusail,sans-serif;font-weight:300;font-size:16px;line-height:1.2;color:#888;resize:both}:host ::ng-deep .textarea-field-mobile textarea::placeholder{color:#888;font-weight:300;font-size:16px;line-height:1.2}.info-box-mobile{display:flex;gap:8px;align-items:flex-end;width:100%}.info-box-mobile .info-icon-mobile{font-size:18px;width:18px;height:20px;color:#b54708;flex-shrink:0;margin-top:2px}.info-box-mobile .info-text-mobile{font-family:Lusail,sans-serif;font-weight:300;font-size:16px;line-height:1;color:#5c5c5c;flex:1}.modal-actions-mobile{display:flex;flex-direction:column;gap:0;align-items:center;justify-content:center;width:100%;min-height:68px;position:relative}.actions-buttons-container{display:flex;gap:8px;align-items:center;justify-content:center;width:100%;margin-bottom:0;flex-shrink:0}.modal-actions-mobile>.actions-buttons-container>button{margin:0!important}.btn-cancel-mobile{width:160px!important;height:44px!important;border:1px solid #3e627b!important;border-radius:8px!important;background:#fff!important;font-family:Lusail,sans-serif;font-weight:500;font-size:16px;line-height:1.2;color:#0d4261!important}.btn-action-mobile{flex:1 1 0!important;min-width:0!important;height:44px!important;border-radius:8px!important;background:#0d4261!important;font-family:Lusail,sans-serif;font-weight:500;font-size:16px;line-height:1.2;color:#fff!important}.home-indicator{width:134px;height:5px;background:#161616;border-radius:100px;position:absolute;bottom:0;left:50%;transform:translate(-50%)}@media (max-width: 768px){.desktop-view{display:none!important}.mobile-view{display:flex!important}}:host ::ng-deep .mat-mdc-dialog-container{padding:0!important}@media (max-width: 768px){:host ::ng-deep .mat-mdc-dialog-container{max-width:100vw!important;width:100vw!important;margin:0!important;position:fixed!important;inset:auto 0 0!important;border-radius:0!important;max-height:90vh!important}:host ::ng-deep .cdk-overlay-backdrop{background-color:#00000080!important}}@media (min-width: 769px){.desktop-view{display:block!important}.mobile-view{display:none!important}}@media (max-width: 600px){::ng-deep cdk-global-overlay-wrapper{align-items:flex-end!important}}\n"] }]
|
|
202
|
+
], template: "<div class=\"dialog-container\" [dir]=\"currentDirection\">\r\n\r\n <div class=\"desktop-view\">\r\n <h2 mat-dialog-title class=\"dialog-title\">\r\n {{ titleKey | translate}} {{itemName}}\r\n </h2>\r\n\r\n <p class=\"dialog-subtitle\">\r\n {{ subtitleKey | translate }}\r\n </p>\r\n\r\n <mat-dialog-content class=\"content-section\">\r\n\r\n <ng-container *ngIf=\"data?.options?.length; else textMode\">\r\n\r\n <mat-form-field appearance=\"outline\" class=\"w-100\">\r\n <mat-select\r\n [(ngModel)]=\"comment\"\r\n [placeholder]=\"placeholderKey | translate\">\r\n\r\n <mat-option *ngFor=\"let item of data.options\" [value]=\"item\">\r\n {{ data.translate ? (item | translate) : item }}\r\n </mat-option>\r\n\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <mat-form-field\r\n *ngIf=\"comment === 'OTHER'\"\r\n appearance=\"outline\"\r\n class=\"w-100\">\r\n <textarea\r\n matInput\r\n [(ngModel)]=\"otherComment\"\r\n [placeholder]=\"placeholderKey | translate\"\r\n cdkTextareaAutosize\r\n cdkAutosizeMinRows=\"4\"\r\n maxlength=\"1000\"\r\n cdkAutosizeMaxRows=\"5\">\r\n </textarea>\r\n </mat-form-field>\r\n\r\n </ng-container>\r\n\r\n <ng-template #textMode>\r\n <mat-form-field appearance=\"outline\" class=\"w-100\">\r\n <mat-label>{{ reasonLabelKey | translate }}</mat-label>\r\n <textarea\r\n matInput\r\n [(ngModel)]=\"comment\"\r\n [placeholder]=\"placeholderKey | translate\"\r\n cdkTextareaAutosize\r\n cdkAutosizeMinRows=\"4\"\r\n maxlength=\"1000\"\r\n cdkAutosizeMaxRows=\"5\">\r\n </textarea>\r\n </mat-form-field>\r\n </ng-template>\r\n\r\n <div class=\"info-box\">\r\n <mat-icon>info</mat-icon>\r\n <span class=\"info-text\">\r\n {{ warningKey | translate }}\r\n </span>\r\n </div>\r\n\r\n </mat-dialog-content>\r\n\r\n <mat-dialog-actions align=\"end\" class=\"footer-actions\">\r\n <button mat-stroked-button class=\"btn-none-background-primary cancel-btn\" (click)=\"cancel()\">\r\n {{ cancelKey | translate }}\r\n </button>\r\n\r\n <button\r\n mat-flat-button\r\n class=\"btn-background-primary warn-btn\"\r\n (click)=\"commentAndClose()\"\r\n [disabled]=\"!comment || (comment === 'OTHER' && !otherComment)\">\r\n {{ actionKey | translate }}\r\n </button>\r\n </mat-dialog-actions>\r\n </div>\r\n\r\n <div class=\"mobile-view\">\r\n <div class=\"modal-header\">\r\n <div class=\"handle\"></div>\r\n <div class=\"header-content\">\r\n <p class=\"modal-title\">{{ titleKey | translate }}</p>\r\n <button class=\"close-button\" (click)=\"cancel()\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"modal-body\">\r\n\r\n <ng-container *ngIf=\"data?.options?.length; else mobileText\">\r\n\r\n <mat-form-field appearance=\"outline\" class=\"textarea-field-mobile\">\r\n <mat-select\r\n [(ngModel)]=\"comment\"\r\n [placeholder]=\"placeholderKey | translate\"\r\n class=\"textarea-mobile\">\r\n\r\n <mat-option *ngFor=\"let item of data.options\" [value]=\"item\">\r\n {{ data.translate ? ( item | translate) : item }}\r\n </mat-option>\r\n\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <mat-form-field\r\n *ngIf=\"comment === 'OTHER'\"\r\n appearance=\"outline\"\r\n class=\"textarea-field-mobile\">\r\n <mat-label>{{ placeholderKey | translate }}</mat-label>\r\n <textarea\r\n matInput\r\n [(ngModel)]=\"otherComment\"\r\n [placeholder]=\"placeholderKey | translate\"\r\n cdkTextareaAutosize\r\n cdkAutosizeMinRows=\"4\"\r\n cdkAutosizeMaxRows=\"5\"\r\n maxlength=\"1000\"\r\n class=\"textarea-mobile\">\r\n </textarea>\r\n </mat-form-field>\r\n\r\n </ng-container>\r\n\r\n <ng-template #mobileText>\r\n <mat-form-field appearance=\"outline\" class=\"textarea-field-mobile\">\r\n <mat-label>{{ reasonLabelKey | translate }} {{ itemName }}</mat-label>\r\n <textarea\r\n matInput\r\n [(ngModel)]=\"comment\"\r\n [placeholder]=\"placeholderKey | translate\"\r\n cdkTextareaAutosize\r\n cdkAutosizeMinRows=\"4\"\r\n cdkAutosizeMaxRows=\"5\"\r\n maxlength=\"1000\"\r\n class=\"textarea-mobile\">\r\n </textarea>\r\n </mat-form-field>\r\n </ng-template>\r\n\r\n <div class=\"info-box-mobile\">\r\n <mat-icon class=\"info-icon-mobile\">info</mat-icon>\r\n <span class=\"info-text-mobile\">\r\n {{ warningKey | translate }}\r\n </span>\r\n </div>\r\n\r\n </div>\r\n\r\n <div class=\"modal-actions-mobile\">\r\n <div class=\"actions-buttons-container\">\r\n <button mat-stroked-button class=\"btn-cancel-mobile\" (click)=\"cancel()\">\r\n {{ cancelKey | translate }}\r\n </button>\r\n <button\r\n mat-flat-button\r\n class=\"btn-action-mobile\"\r\n (click)=\"commentAndClose()\"\r\n [disabled]=\"!comment || (comment === 'OTHER' && !otherComment)\">\r\n {{ actionKey | translate }}\r\n </button>\r\n </div>\r\n <div class=\"home-indicator\"></div>\r\n </div>\r\n </div>\r\n\r\n</div>\r\n", styles: [".dialog-container{position:relative}.desktop-view{display:block}.mobile-view{display:none}.dialog-title{font-size:20px;font-weight:600;padding:0 16px}.dialog-subtitle{color:#666;padding:0 20px}.textarea-label{font-weight:600;padding:5px 20px;margin:0;color:#000}.info-text{color:#888;font-family:Lusail,sans-serif;font-size:16px;font-style:normal;font-weight:400;line-height:120%}.info-box{display:flex;font-size:12px}.info-box mat-icon{font-size:18px;color:var(--primary-color-3nd)}.footer-actions{margin-top:0}.cancel-btn{width:121px!important}.warn-btn{width:171px!important}.content-section{padding:0 20px}.mobile-view{display:flex;flex-direction:column;gap:8px;background:#fff;padding:16px 24px;min-height:356px;box-sizing:border-box}.modal-header{display:flex;flex-direction:column;gap:8px;width:100%}.handle{width:36px;height:4px;background:#b7b7b7;border-radius:2px;margin:0 auto;flex-shrink:0}.header-content{display:flex;align-items:center;justify-content:space-between;width:100%;position:relative}.modal-title{font-family:Lusail,sans-serif;font-weight:500;font-size:14px;line-height:1.2;color:#161616;text-align:center;position:absolute;left:50%;transform:translate(-50%);margin:0;width:200px}.close-button{background:#f0eeee;border:none;border-radius:9999px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:8px;margin-left:auto;flex-shrink:0}.close-button mat-icon{font-size:20px;width:20px;height:20px;color:#000;overflow:visible}.close-button:hover{background:#e0e0e0}.modal-body{display:flex;flex-direction:column;gap:8px;width:100%;flex:1;min-height:0}.textarea-label-mobile{font-family:Lusail,sans-serif;font-weight:500;font-size:16px;line-height:1.2;color:#000;height:24px;max-height:24px;margin:0;padding:0}.textarea-field-mobile{width:100%;margin:0!important}:host ::ng-deep .textarea-field-mobile .mat-mdc-form-field-infix{min-height:107px;padding:16px!important}:host ::ng-deep .textarea-field-mobile .mat-mdc-form-field-outline{border:1px solid #b7b7b7!important;border-radius:8px!important}:host ::ng-deep .textarea-field-mobile textarea{font-family:Lusail,sans-serif;font-weight:300;font-size:16px;line-height:1.2;color:#888;resize:both}:host ::ng-deep .textarea-field-mobile textarea::placeholder{color:#888;font-weight:300;font-size:16px;line-height:1.2}.info-box-mobile{display:flex;gap:8px;align-items:flex-end;width:100%}.info-box-mobile .info-icon-mobile{font-size:18px;width:18px;height:20px;color:#b54708;flex-shrink:0;margin-top:2px}.info-box-mobile .info-text-mobile{font-family:Lusail,sans-serif;font-weight:300;font-size:16px;line-height:1;color:#5c5c5c;flex:1}.modal-actions-mobile{display:flex;flex-direction:column;gap:0;align-items:center;justify-content:center;width:100%;min-height:68px;position:relative}.actions-buttons-container{display:flex;gap:8px;align-items:center;justify-content:center;width:100%;margin-bottom:0;flex-shrink:0}.modal-actions-mobile>.actions-buttons-container>button{margin:0!important}.btn-cancel-mobile{flex:.5!important;height:44px!important;border:1px solid #3e627b!important;border-radius:8px!important;background:#fff!important;font-family:Lusail,sans-serif;font-weight:500;font-size:16px;line-height:1.2;color:#0d4261!important}.btn-action-mobile{flex:1 1 0!important;min-width:0!important;height:44px!important;border-radius:8px!important;background:#0d4261!important;font-family:Lusail,sans-serif;font-weight:500;font-size:16px;line-height:1.2;color:#fff!important}.home-indicator{width:134px;height:5px;background:#161616;border-radius:100px;position:absolute;bottom:0;left:50%;transform:translate(-50%)}@media (max-width: 768px){.desktop-view{display:none!important}.mobile-view{display:flex!important}}:host ::ng-deep .mat-mdc-dialog-container{padding:0!important}@media (max-width: 768px){:host ::ng-deep .mat-mdc-dialog-container{max-width:100vw!important;width:100vw!important;margin:0!important;position:fixed!important;inset:auto 0 0!important;border-radius:0!important;max-height:90vh!important}:host ::ng-deep .cdk-overlay-backdrop{background-color:#00000080!important}}@media (min-width: 769px){.desktop-view{display:block!important}.mobile-view{display:none!important}}@media (max-width: 600px){::ng-deep cdk-global-overlay-wrapper{align-items:flex-end!important}}\n"] }]
|
|
200
203
|
}], ctorParameters: () => [{ type: i1.MatDialogRef }, { type: undefined, decorators: [{
|
|
201
204
|
type: Inject,
|
|
202
205
|
args: [MAT_DIALOG_DATA]
|
|
@@ -267,7 +270,7 @@ class ButtonActionsComponent {
|
|
|
267
270
|
}
|
|
268
271
|
}
|
|
269
272
|
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 }); }
|
|
270
|
-
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
|
|
273
|
+
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\r\n type=\"button\"\r\n mat-icon-button\r\n [matMenuTriggerFor]=\"menu\"\r\n (click)=\"$event.stopPropagation()\"\r\n style=\"justify-content: center; color: grey\"\r\n id=\"actions-menu-trigger\"\r\n [attr.aria-label]=\"'BASE_TABLE.moreActions' | translate\"\r\n [attr.aria-haspopup]=\"true\">\r\n <mat-icon aria-hidden=\"true\">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" }] }); }
|
|
271
274
|
}
|
|
272
275
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ButtonActionsComponent, decorators: [{
|
|
273
276
|
type: Component,
|
|
@@ -281,7 +284,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
281
284
|
NgClass,
|
|
282
285
|
NgForOf,
|
|
283
286
|
TranslateModule
|
|
284
|
-
], 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
|
|
287
|
+
], 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\r\n type=\"button\"\r\n mat-icon-button\r\n [matMenuTriggerFor]=\"menu\"\r\n (click)=\"$event.stopPropagation()\"\r\n style=\"justify-content: center; color: grey\"\r\n id=\"actions-menu-trigger\"\r\n [attr.aria-label]=\"'BASE_TABLE.moreActions' | translate\"\r\n [attr.aria-haspopup]=\"true\">\r\n <mat-icon aria-hidden=\"true\">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"] }]
|
|
285
288
|
}], ctorParameters: () => [{ type: i1.MatDialog }], propDecorators: { actions: [{
|
|
286
289
|
type: Input
|
|
287
290
|
}], disabled: [{
|
|
@@ -376,6 +379,7 @@ class FieldInfo {
|
|
|
376
379
|
this.maxLength = fieldInfo.maxLength ?? 1000;
|
|
377
380
|
this.emptyReadonlyPlaceholderKey = fieldInfo.emptyReadonlyPlaceholderKey;
|
|
378
381
|
this.readonlyDateDisplay = fieldInfo.readonlyDateDisplay;
|
|
382
|
+
this.allowNegative = fieldInfo.allowNegative ?? false;
|
|
379
383
|
}
|
|
380
384
|
}
|
|
381
385
|
|
|
@@ -546,9 +550,12 @@ function buildFormFields(fields, item) {
|
|
|
546
550
|
? []
|
|
547
551
|
: '';
|
|
548
552
|
const extractedValue = item ? extractFieldName(item, field.property) : undefined;
|
|
549
|
-
|
|
553
|
+
let validators = field.required
|
|
550
554
|
? [...(field.validators || []), Validators.required]
|
|
551
|
-
: field.validators || [];
|
|
555
|
+
: [...(field.validators || [])];
|
|
556
|
+
if (field.type === 'number' && !field.allowNegative) {
|
|
557
|
+
validators = [...validators, Validators.min(0)];
|
|
558
|
+
}
|
|
552
559
|
fieldsControls[field.property] = extractedValue !== undefined && extractedValue !== null
|
|
553
560
|
? [extractedValue, validators]
|
|
554
561
|
: [emptyValue, validators];
|
|
@@ -720,7 +727,7 @@ class TitleBarComponent {
|
|
|
720
727
|
this.onViewModeChanged(value === 'PENDING');
|
|
721
728
|
}
|
|
722
729
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TitleBarComponent, deps: [{ token: i1$1.Location }, { token: i3$1.Directionality }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
723
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TitleBarComponent, isStandalone: true, selector: "app-title-bar", inputs: { pageTitle: "pageTitle", showExtractButton: "showExtractButton", totalElements: "totalElements", titleMode: "titleMode", pageInfo: "pageInfo", subTitle: "subTitle", statusDesc: "statusDesc", newAction: "newAction", extraButton: "extraButton", showDetails: "showDetails", showImport: "showImport", showButton: "showButton", extraData: "extraData", titleCorporateAdmin: "titleCorporateAdmin", hideBackButton: "hideBackButton", buttons: "buttons", buttonsDisplayMode: "buttonsDisplayMode", draftSupported: "draftSupported", isPending: "isPending", onViewModeChange: "onViewModeChange" }, outputs: { newActionClicked: "newActionClicked", extraButtonClicked: "extraButtonClicked", extractReport: "extractReport", buttonClicked: "buttonClicked", viewModeChanged: "viewModeChanged" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"row mainTitleBar gap-20 default-align\">\r\n\r\n <div class=\"column flex-auto textTitle\" >\r\n <h2 *ngIf=\"!pageInfo.hideTitle\" style=\"margin: 0;\">\r\n <span class=\"textTitle__titleMode\">{{ titleMode | translate }}</span>\r\n {{ listTitle | translate }}\r\n <span *ngIf=\"titleCorporateAdmin && isRoot\">({{ titleCorporateAdmin }})</span>\r\n {{ extraData }}\r\n </h2>\r\n <span *ngIf=\"subTitle\" class=\"textTitle__subTitle\">{{ subTitle | translate }}</span>\r\n <div *ngIf=\"pageInfo.draftSupported\" class=\"chips-container\">\r\n <mat-chip-listbox #box aria-label=\"Color selection\" [multiple]=\"false\" [value]=\"currentIsPending ? 'PENDING' : 'COMPLETED'\" (click)=\"$event.stopPropagation()\" (change)=\"onChipSelectionChange($event, box)\">\r\n <mat-chip-option [selected]=\"!currentIsPending\" [color]=\"'accent'\" value=\"COMPLETED\" (click)=\"$event.stopPropagation()\">\r\n <mat-icon *ngIf=\"!currentIsPending\" style=\"font-size: 14px; width: 14px; height: 14px; margin-right: 4px;\">check</mat-icon>\r\n {{'finished' | translate}}\r\n </mat-chip-option>\r\n <mat-chip-option [selected]=\"currentIsPending\" [color]=\"'accent'\" value=\"PENDING\" (click)=\"$event.stopPropagation()\">\r\n <mat-icon *ngIf=\"currentIsPending\" style=\"font-size: 14px; width: 14px; height: 14px; margin-right: 4px;\">check</mat-icon>\r\n {{'todo' | translate}}\r\n </mat-chip-option>\r\n </mat-chip-listbox>\r\n </div>\r\n </div>\r\n\r\n <div class=\"column end-items gap-20\">\r\n <button type=\"button\" mat-flat-button color=\"primary\" style=\"width: 100px\" *ngIf=\"!hideBackButton\" (click)=\"goBack()\" id=\"title-bar-back-btn\">\r\n <mat-icon color=\"second\">{{ backIcon }}</mat-icon>\r\n <span style=\"font-weight: bold\">{{ 'back' | translate }}</span>\r\n </button>\r\n\r\n <div class=\"row flex-auto gap-20 buttons-wrapper\">\r\n <ng-container *ngIf=\"buttonsDisplayMode === 'dropdown'\">\r\n <button\r\n type=\"button\"\r\n *ngIf=\"buttons && buttons.length > 0\"\r\n mat-flat-button\r\n [matMenuTriggerFor]=\"actionMenu\"\r\n class=\"title-bar-action-button\"\r\n [attr.id]=\"'title-bar-action-button'\">\r\n <div class=\"button-content\">\r\n <mat-icon class=\"button-icon\">{{ buttons[0].icon }}</mat-icon>\r\n <span class=\"button-label\">{{ buttons[0].label | translate }}</span>\r\n <mat-icon class=\"button-arrow\">keyboard_arrow_down</mat-icon>\r\n </div>\r\n </button>\r\n <mat-menu #actionMenu=\"matMenu\" class=\"title-bar-action-menu\">\r\n <ng-container *ngFor=\"let btn of buttons\">\r\n <a\r\n *ngIf=\"resolveButtonHref(btn) as href\"\r\n mat-menu-item\r\n [href]=\"href\"\r\n (click)=\"onButtonClick(btn, $event)\"\r\n [attr.id]=\"btn.id || ('title-bar-menu-btn-' + (btn.action || btn.label || btn.key))\">\r\n <mat-icon>{{ btn.icon }}</mat-icon>\r\n <span>{{ btn.label | translate }}</span>\r\n </a>\r\n <button\r\n *ngIf=\"!resolveButtonHref(btn)\"\r\n type=\"button\"\r\n mat-menu-item\r\n (click)=\"onButtonClick(btn)\"\r\n [attr.id]=\"btn.id || ('title-bar-menu-btn-' + (btn.action || btn.label || btn.key))\">\r\n <mat-icon>{{ btn.icon }}</mat-icon>\r\n <span>{{ btn.label | translate }}</span>\r\n </button>\r\n </ng-container>\r\n </mat-menu>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"buttonsDisplayMode === 'list'\">\r\n <ng-container *ngFor=\"let btn of buttons\">\r\n <a\r\n *ngIf=\"resolveButtonHref(btn) as href\"\r\n mat-flat-button\r\n color=\"primary\"\r\n class=\"title-bar-list-button\"\r\n [href]=\"href\"\r\n (click)=\"onButtonClick(btn, $event)\"\r\n [attr.id]=\"btn.id || ('title-bar-list-btn-' + (btn.action || btn.label || btn.key))\">\r\n <mat-icon>{{ btn.icon }}</mat-icon>\r\n <span>{{ btn.label | translate }}</span>\r\n </a>\r\n <button\r\n *ngIf=\"!resolveButtonHref(btn)\"\r\n type=\"button\"\r\n mat-flat-button\r\n color=\"primary\"\r\n class=\"title-bar-list-button\"\r\n (click)=\"onButtonClick(btn)\"\r\n [attr.id]=\"btn.id || ('title-bar-list-btn-' + (btn.action || btn.label || btn.key))\">\r\n <mat-icon>{{ btn.icon }}</mat-icon>\r\n <span>{{ btn.label | translate }}</span>\r\n </button>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: ["", ":host{display:block;width:100%}.mainTitleBar{display:flex;width:100%;gap:20px;align-items:center;justify-content:flex-start}.mainTitleBar.row{flex-direction:row;margin-left:0!important;margin-right:0!important;padding-bottom:20px;border-bottom:1px solid #F0EEEE}.mainTitleBar.column{flex-direction:column}.mainTitleBar .textTitle{flex:1 1 0;display:flex;flex-direction:column;width:auto;gap:12px}.mainTitleBar .textTitle h2{margin:0;padding:0;line-height:1.2}.mainTitleBar .textTitle__titleMode{font-weight:200;color:gray}.mainTitleBar .textTitle__subTitle{color:#888;font-size:16px;font-weight:300;font-style:normal}.mainTitleBar .textTitle .chips-container{margin-top:0}.mainTitleBar .end-items{display:flex;flex-direction:row;align-items:center;gap:20px}.mainTitleBar .buttons-wrapper{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex-direction:row;text-align-last:end;margin-left:0!important;margin-right:0!important}.mainTitleBar .buttons-wrapper .action-btn{width:210px!important}.mainTitleBar .title-bar-action-button{background:#0d4261!important;color:#fff!important;border-radius:8px!important;height:44px!important;padding:8px 12px!important;min-width:209px!important;box-shadow:none!important}.mainTitleBar .title-bar-action-button:hover{background:#0a3550!important}.mainTitleBar .title-bar-action-button .button-content{display:flex;align-items:center;justify-content:center;gap:8px;width:100%}.mainTitleBar .title-bar-action-button .button-icon{font-size:14px;width:14px;height:14px;color:#fff}.mainTitleBar .title-bar-action-button .button-label{font-weight:500;font-size:16px;line-height:1.2;color:#fff;white-space:nowrap;height:16px}.mainTitleBar .title-bar-action-button .button-arrow{font-size:14px;width:14px;height:14px;color:#fff;margin-left:auto}.mainTitleBar .actionButton{width:100%}.mainTitleBar .actionButton__expand{font-size:20px!important;color:var(--accent-color);margin-top:5px}.mainTitleBar .title-bar-list-button{background:#0d4261!important;color:#fff!important;border-radius:8px!important;height:44px!important;padding:8px 16px!important;min-width:auto!important;box-shadow:none!important;display:flex!important;align-items:center!important;gap:8px!important;font-weight:500!important;font-size:16px!important;line-height:1.2!important;white-space:nowrap!important;text-decoration:none!important;box-sizing:border-box!important;outline:none!important;cursor:pointer!important}.mainTitleBar .title-bar-list-button:hover{background:#0a3550!important}.mainTitleBar .title-bar-list-button mat-icon{font-size:20px!important;width:20px!important;height:28px!important;color:#fff!important;margin:0!important}.mainTitleBar .title-bar-list-button span{color:#fff!important}.mainTitleBar mat-chip-listbox{display:flex;flex-direction:row;gap:8px;align-items:center}.mainTitleBar mat-chip-listbox mat-chip-option{height:32px!important;min-height:32px!important;border-radius:8px!important;font-size:16px!important;line-height:1.2!important;font-weight:400!important;border:none!important;box-shadow:none!important;transition:all .2s ease;font-family:Lusail,sans-serif!important;padding:0!important}.mainTitleBar mat-chip-listbox mat-chip-option.mdc-evolution-chip--selected,.mainTitleBar mat-chip-listbox mat-chip-option[selected=true],.mainTitleBar mat-chip-listbox mat-chip-option[aria-selected=true]{background:#0d4261!important;color:#fff!important;font-weight:500!important}.mainTitleBar mat-chip-listbox mat-chip-option.mdc-evolution-chip--selected .mdc-evolution-chip__text-label,.mainTitleBar mat-chip-listbox mat-chip-option[selected=true] .mdc-evolution-chip__text-label,.mainTitleBar mat-chip-listbox mat-chip-option[aria-selected=true] .mdc-evolution-chip__text-label{color:#fff!important;font-weight:500!important;padding-left:4px!important}.mainTitleBar mat-chip-listbox mat-chip-option.mdc-evolution-chip--selected mat-icon,.mainTitleBar mat-chip-listbox mat-chip-option[selected=true] mat-icon,.mainTitleBar mat-chip-listbox mat-chip-option[aria-selected=true] mat-icon{color:#fff!important}.mainTitleBar mat-chip-listbox mat-chip-option:not(.mdc-evolution-chip--selected):not([selected=true]):not([aria-selected=true]){background:#e9e9e9!important;color:#000!important;font-weight:400!important}.mainTitleBar mat-chip-listbox mat-chip-option:not(.mdc-evolution-chip--selected):not([selected=true]):not([aria-selected=true]) .mdc-evolution-chip__text-label{color:#000!important;font-weight:400!important}.mainTitleBar mat-chip-listbox mat-chip-option .mdc-evolution-chip__action{padding:8px 12px!important;min-height:32px!important;display:flex!important;align-items:center!important;gap:4px!important}.mainTitleBar mat-chip-listbox mat-chip-option .mdc-evolution-chip__text-label{padding:0!important;font-size:16px!important;line-height:1.2!important;font-family:Lusail,sans-serif!important}.mainTitleBar mat-chip-listbox mat-chip-option mat-icon{font-size:14px!important;width:14px!important;height:14px!important;margin-right:4px!important}.mainTitleBar mat-chip-listbox mat-chip-option ::ng-deep .mdc-evolution-chip__graphic,.mainTitleBar mat-chip-listbox mat-chip-option ::ng-deep .mdc-evolution-chip__checkmark{display:none!important}.mainTitleBar mat-chip-listbox mat-chip-option ::ng-deep .mdc-evolution-chip__action--primary{padding:10px!important}.mainTitleBar mat-chip-listbox mat-chip-option:hover{opacity:.9}.row{display:flex;flex-direction:row;width:100%}.column{display:flex;flex-direction:column;width:auto}.fx-flex-fill{width:100%;height:100%;flex:1 1 auto}.flex-auto{flex:1 1 auto;display:flex;flex-direction:column}.end-items{align-items:flex-end}.gap-20{gap:20px}@media (max-width: 960px){.mainTitleBar.row.default-align{justify-content:flex-end}}@media (max-width: 768px){.mainTitleBar.row,.mainTitleBar.column{flex-direction:column;align-items:flex-start;gap:20px}.end-items{align-items:flex-start}}@media (max-width: 600px){.gap-20{gap:10px}}\n"], dependencies: [{ 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: "component", type: MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { 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: 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: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { 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"] }] }); }
|
|
730
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TitleBarComponent, isStandalone: true, selector: "app-title-bar", inputs: { pageTitle: "pageTitle", showExtractButton: "showExtractButton", totalElements: "totalElements", titleMode: "titleMode", pageInfo: "pageInfo", subTitle: "subTitle", statusDesc: "statusDesc", newAction: "newAction", extraButton: "extraButton", showDetails: "showDetails", showImport: "showImport", showButton: "showButton", extraData: "extraData", titleCorporateAdmin: "titleCorporateAdmin", hideBackButton: "hideBackButton", buttons: "buttons", buttonsDisplayMode: "buttonsDisplayMode", draftSupported: "draftSupported", isPending: "isPending", onViewModeChange: "onViewModeChange" }, outputs: { newActionClicked: "newActionClicked", extraButtonClicked: "extraButtonClicked", extractReport: "extractReport", buttonClicked: "buttonClicked", viewModeChanged: "viewModeChanged" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"row mainTitleBar gap-20 default-align\">\r\n\r\n <div class=\"column flex-auto textTitle\" >\r\n <h2 *ngIf=\"!pageInfo.hideTitle\" style=\"margin: 0;\">\r\n <span class=\"textTitle__titleMode\">{{ titleMode | translate }}</span>\r\n {{ listTitle | translate }}\r\n <span *ngIf=\"titleCorporateAdmin && isRoot\">({{ titleCorporateAdmin }})</span>\r\n {{ extraData }}\r\n </h2>\r\n <span *ngIf=\"subTitle\" class=\"textTitle__subTitle\">{{ subTitle | translate }}</span>\r\n <div *ngIf=\"pageInfo.draftSupported\" class=\"chips-container\">\r\n <mat-chip-listbox #box [attr.aria-label]=\"'BASE_TABLE.documentStatus' | translate\" [multiple]=\"false\" [value]=\"currentIsPending ? 'PENDING' : 'COMPLETED'\" (click)=\"$event.stopPropagation()\" (change)=\"onChipSelectionChange($event, box)\">\r\n <mat-chip-option [selected]=\"!currentIsPending\" [color]=\"'accent'\" value=\"COMPLETED\" (click)=\"$event.stopPropagation()\">\r\n <mat-icon *ngIf=\"!currentIsPending\" style=\"font-size: 14px; width: 14px; height: 14px; margin-right: 4px;\">check</mat-icon>\r\n {{'finished' | translate}}\r\n </mat-chip-option>\r\n <mat-chip-option [selected]=\"currentIsPending\" [color]=\"'accent'\" value=\"PENDING\" (click)=\"$event.stopPropagation()\">\r\n <mat-icon *ngIf=\"currentIsPending\" style=\"font-size: 14px; width: 14px; height: 14px; margin-right: 4px;\">check</mat-icon>\r\n {{'todo' | translate}}\r\n </mat-chip-option>\r\n </mat-chip-listbox>\r\n </div>\r\n </div>\r\n\r\n <div class=\"column end-items gap-20\">\r\n <button type=\"button\" mat-flat-button color=\"primary\" style=\"width: 100px\" *ngIf=\"!hideBackButton\" (click)=\"goBack()\" id=\"title-bar-back-btn\">\r\n <mat-icon color=\"second\">{{ backIcon }}</mat-icon>\r\n <span style=\"font-weight: bold\">{{ 'back' | translate }}</span>\r\n </button>\r\n\r\n <div class=\"row flex-auto gap-20 buttons-wrapper\">\r\n <ng-container *ngIf=\"buttonsDisplayMode === 'dropdown'\">\r\n <button\r\n type=\"button\"\r\n *ngIf=\"buttons && buttons.length > 0\"\r\n mat-flat-button\r\n [matMenuTriggerFor]=\"actionMenu\"\r\n class=\"title-bar-action-button\"\r\n [attr.id]=\"'title-bar-action-button'\">\r\n <div class=\"button-content\">\r\n <mat-icon class=\"button-icon\">{{ buttons[0].icon }}</mat-icon>\r\n <span class=\"button-label\">{{ buttons[0].label | translate }}</span>\r\n <mat-icon class=\"button-arrow\">keyboard_arrow_down</mat-icon>\r\n </div>\r\n </button>\r\n <mat-menu #actionMenu=\"matMenu\" class=\"title-bar-action-menu\">\r\n <ng-container *ngFor=\"let btn of buttons\">\r\n <a\r\n *ngIf=\"resolveButtonHref(btn) as href\"\r\n mat-menu-item\r\n [href]=\"href\"\r\n (click)=\"onButtonClick(btn, $event)\"\r\n [attr.id]=\"btn.id || ('title-bar-menu-btn-' + (btn.action || btn.label || btn.key))\">\r\n <mat-icon>{{ btn.icon }}</mat-icon>\r\n <span>{{ btn.label | translate }}</span>\r\n </a>\r\n <button\r\n *ngIf=\"!resolveButtonHref(btn)\"\r\n type=\"button\"\r\n mat-menu-item\r\n (click)=\"onButtonClick(btn)\"\r\n [attr.id]=\"btn.id || ('title-bar-menu-btn-' + (btn.action || btn.label || btn.key))\">\r\n <mat-icon>{{ btn.icon }}</mat-icon>\r\n <span>{{ btn.label | translate }}</span>\r\n </button>\r\n </ng-container>\r\n </mat-menu>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"buttonsDisplayMode === 'list'\">\r\n <ng-container *ngFor=\"let btn of buttons\">\r\n <a\r\n *ngIf=\"resolveButtonHref(btn) as href\"\r\n mat-flat-button\r\n color=\"primary\"\r\n class=\"title-bar-list-button\"\r\n [href]=\"href\"\r\n (click)=\"onButtonClick(btn, $event)\"\r\n [attr.id]=\"btn.id || ('title-bar-list-btn-' + (btn.action || btn.label || btn.key))\">\r\n <mat-icon>{{ btn.icon }}</mat-icon>\r\n <span>{{ btn.label | translate }}</span>\r\n </a>\r\n <button\r\n *ngIf=\"!resolveButtonHref(btn)\"\r\n type=\"button\"\r\n mat-flat-button\r\n color=\"primary\"\r\n class=\"title-bar-list-button\"\r\n (click)=\"onButtonClick(btn)\"\r\n [attr.id]=\"btn.id || ('title-bar-list-btn-' + (btn.action || btn.label || btn.key))\">\r\n <mat-icon>{{ btn.icon }}</mat-icon>\r\n <span>{{ btn.label | translate }}</span>\r\n </button>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: ["", ":host{display:block;width:100%}.mainTitleBar{display:flex;width:100%;gap:20px;align-items:center;justify-content:flex-start}.mainTitleBar.row{flex-direction:row;margin-left:0!important;margin-right:0!important;padding-bottom:20px;border-bottom:1px solid #F0EEEE}.mainTitleBar.column{flex-direction:column}.mainTitleBar .textTitle{flex:1 1 0;display:flex;flex-direction:column;width:auto;gap:12px}.mainTitleBar .textTitle h2{margin:0;padding:0;line-height:1.2}.mainTitleBar .textTitle__titleMode{font-weight:200;color:gray}.mainTitleBar .textTitle__subTitle{color:#888;font-size:16px;font-weight:300;font-style:normal}.mainTitleBar .textTitle .chips-container{margin-top:0}.mainTitleBar .end-items{display:flex;flex-direction:row;align-items:center;gap:20px}.mainTitleBar .buttons-wrapper{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex-direction:row;text-align-last:end;margin-left:0!important;margin-right:0!important}.mainTitleBar .buttons-wrapper .action-btn{width:210px!important}.mainTitleBar .title-bar-action-button{background:#0d4261!important;color:#fff!important;border-radius:8px!important;height:44px!important;padding:8px 12px!important;min-width:209px!important;box-shadow:none!important}.mainTitleBar .title-bar-action-button:focus-visible{outline:3px solid #fff!important;outline-offset:3px!important;position:relative;z-index:1}.mainTitleBar .title-bar-action-button:hover{background:#0a3550!important}.mainTitleBar .title-bar-action-button .button-content{display:flex;align-items:center;justify-content:center;gap:8px;width:100%}.mainTitleBar .title-bar-action-button .button-icon{font-size:14px;width:14px;height:14px;color:#fff}.mainTitleBar .title-bar-action-button .button-label{font-weight:500;font-size:16px;line-height:1.2;color:#fff;white-space:nowrap;height:16px}.mainTitleBar .title-bar-action-button .button-arrow{font-size:14px;width:14px;height:14px;color:#fff;margin-left:auto}.mainTitleBar .actionButton{width:100%}.mainTitleBar .actionButton__expand{font-size:20px!important;color:var(--accent-color);margin-top:5px}.mainTitleBar .title-bar-list-button{background:#0d4261!important;color:#fff!important;border-radius:8px!important;height:44px!important;padding:8px 16px!important;min-width:auto!important;box-shadow:none!important;display:flex!important;align-items:center!important;gap:8px!important;font-weight:500!important;font-size:16px!important;line-height:1.2!important;white-space:nowrap!important;text-decoration:none!important;box-sizing:border-box!important;cursor:pointer!important}.mainTitleBar .title-bar-list-button:focus-visible{outline:3px solid #0d4261!important;outline-offset:3px!important;position:relative;z-index:1}.mainTitleBar .title-bar-list-button:hover{background:#0a3550!important}.mainTitleBar .title-bar-list-button mat-icon{font-size:20px!important;width:20px!important;height:28px!important;color:#fff!important;margin:0!important}.mainTitleBar .title-bar-list-button span{color:#fff!important}.mainTitleBar mat-chip-listbox{display:flex;flex-direction:row;gap:8px;align-items:center}.mainTitleBar mat-chip-listbox mat-chip-option{height:32px!important;min-height:32px!important;border-radius:8px!important;font-size:16px!important;line-height:1.2!important;font-weight:400!important;border:none!important;box-shadow:none!important;transition:all .2s ease;font-family:Lusail,sans-serif!important;padding:0!important}.mainTitleBar mat-chip-listbox mat-chip-option.mdc-evolution-chip--selected,.mainTitleBar mat-chip-listbox mat-chip-option[selected=true],.mainTitleBar mat-chip-listbox mat-chip-option[aria-selected=true]{background:#0d4261!important;color:#fff!important;font-weight:500!important}.mainTitleBar mat-chip-listbox mat-chip-option.mdc-evolution-chip--selected .mdc-evolution-chip__text-label,.mainTitleBar mat-chip-listbox mat-chip-option[selected=true] .mdc-evolution-chip__text-label,.mainTitleBar mat-chip-listbox mat-chip-option[aria-selected=true] .mdc-evolution-chip__text-label{color:#fff!important;font-weight:500!important;padding-left:4px!important}.mainTitleBar mat-chip-listbox mat-chip-option.mdc-evolution-chip--selected mat-icon,.mainTitleBar mat-chip-listbox mat-chip-option[selected=true] mat-icon,.mainTitleBar mat-chip-listbox mat-chip-option[aria-selected=true] mat-icon{color:#fff!important}.mainTitleBar mat-chip-listbox mat-chip-option:not(.mdc-evolution-chip--selected):not([selected=true]):not([aria-selected=true]){background:#e9e9e9!important;color:#000!important;font-weight:400!important}.mainTitleBar mat-chip-listbox mat-chip-option:not(.mdc-evolution-chip--selected):not([selected=true]):not([aria-selected=true]) .mdc-evolution-chip__text-label{color:#000!important;font-weight:400!important}.mainTitleBar mat-chip-listbox mat-chip-option .mdc-evolution-chip__action{padding:8px 12px!important;min-height:32px!important;display:flex!important;align-items:center!important;gap:4px!important}.mainTitleBar mat-chip-listbox mat-chip-option .mdc-evolution-chip__text-label{padding:0!important;font-size:16px!important;line-height:1.2!important;font-family:Lusail,sans-serif!important}.mainTitleBar mat-chip-listbox mat-chip-option mat-icon{font-size:14px!important;width:14px!important;height:14px!important;margin-right:4px!important}.mainTitleBar mat-chip-listbox mat-chip-option ::ng-deep .mdc-evolution-chip__graphic,.mainTitleBar mat-chip-listbox mat-chip-option ::ng-deep .mdc-evolution-chip__checkmark{display:none!important}.mainTitleBar mat-chip-listbox mat-chip-option ::ng-deep .mdc-evolution-chip__action--primary{padding:10px!important}.mainTitleBar mat-chip-listbox mat-chip-option:hover{opacity:.9}.row{display:flex;flex-direction:row;width:100%}.column{display:flex;flex-direction:column;width:auto}.fx-flex-fill{width:100%;height:100%;flex:1 1 auto}.flex-auto{flex:1 1 auto;display:flex;flex-direction:column}.end-items{align-items:flex-end}.gap-20{gap:20px}@media (max-width: 960px){.mainTitleBar.row.default-align{justify-content:flex-end}}@media (max-width: 768px){.mainTitleBar.row,.mainTitleBar.column{flex-direction:column;align-items:flex-start;gap:20px}.end-items{align-items:flex-start}}@media (max-width: 600px){.gap-20{gap:10px}}:host-context(html.high-contrast) .mainTitleBar .title-bar-list-button.mat-mdc-button-base,:host-context(html.high-contrast) .mainTitleBar a.title-bar-list-button,:host-context(html.high-contrast) .mainTitleBar button.title-bar-list-button{--mdc-filled-button-container-color: #000 !important;--mdc-filled-button-label-text-color: #fff !important;--mat-filled-button-state-layer-color: #fff !important;--mdc-filled-button-hover-state-layer-color: #fff !important;--mdc-filled-button-focus-state-layer-color: #fff !important;--mdc-filled-button-pressed-state-layer-color: #fff !important;background-color:#000!important;background:#000!important;color:#fff!important;border:2px solid #000!important;text-decoration:none!important}:host-context(html.high-contrast) .mainTitleBar .title-bar-list-button.mat-mdc-button-base:hover,:host-context(html.high-contrast) .mainTitleBar a.title-bar-list-button:hover,:host-context(html.high-contrast) .mainTitleBar button.title-bar-list-button:hover{background-color:#000!important;background:#000!important}:host-context(html.high-contrast) .mainTitleBar .title-bar-list-button.mat-mdc-button-base mat-icon,:host-context(html.high-contrast) .mainTitleBar .title-bar-list-button.mat-mdc-button-base .mat-icon,:host-context(html.high-contrast) .mainTitleBar a.title-bar-list-button mat-icon,:host-context(html.high-contrast) .mainTitleBar a.title-bar-list-button .mat-icon,:host-context(html.high-contrast) .mainTitleBar button.title-bar-list-button mat-icon,:host-context(html.high-contrast) .mainTitleBar button.title-bar-list-button .mat-icon{color:#fff!important}:host-context(html.high-contrast) .mainTitleBar .title-bar-list-button.mat-mdc-button-base span,:host-context(html.high-contrast) .mainTitleBar a.title-bar-list-button span,:host-context(html.high-contrast) .mainTitleBar button.title-bar-list-button span{color:#fff!important}:host-context(html.high-contrast) .mainTitleBar .title-bar-list-button.mat-mdc-button-base .mdc-button__label,:host-context(html.high-contrast) .mainTitleBar a.title-bar-list-button .mdc-button__label,:host-context(html.high-contrast) .mainTitleBar button.title-bar-list-button .mdc-button__label{color:#fff!important}:host-context(html.high-contrast) .mainTitleBar .title-bar-action-button.mat-mdc-button-base,:host-context(html.high-contrast) .mainTitleBar button.title-bar-action-button{--mdc-filled-button-container-color: #000 !important;--mdc-filled-button-label-text-color: #fff !important;--mat-filled-button-state-layer-color: #fff !important;--mdc-filled-button-hover-state-layer-color: #fff !important;--mdc-filled-button-focus-state-layer-color: #fff !important;--mdc-filled-button-pressed-state-layer-color: #fff !important;background-color:#000!important;background:#000!important;color:#fff!important;border:2px solid #000!important}:host-context(html.high-contrast) .mainTitleBar .title-bar-action-button.mat-mdc-button-base:hover,:host-context(html.high-contrast) .mainTitleBar button.title-bar-action-button:hover{background-color:#000!important;background:#000!important}:host-context(html.high-contrast) .mainTitleBar .title-bar-action-button.mat-mdc-button-base .button-icon,:host-context(html.high-contrast) .mainTitleBar .title-bar-action-button.mat-mdc-button-base .button-label,:host-context(html.high-contrast) .mainTitleBar .title-bar-action-button.mat-mdc-button-base .button-arrow,:host-context(html.high-contrast) .mainTitleBar button.title-bar-action-button .button-icon,:host-context(html.high-contrast) .mainTitleBar button.title-bar-action-button .button-label,:host-context(html.high-contrast) .mainTitleBar button.title-bar-action-button .button-arrow{color:#fff!important}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$2.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: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { 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: 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: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { 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"] }] }); }
|
|
724
731
|
}
|
|
725
732
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TitleBarComponent, decorators: [{
|
|
726
733
|
type: Component,
|
|
@@ -735,7 +742,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
735
742
|
TranslateModule,
|
|
736
743
|
MatChipListbox,
|
|
737
744
|
MatChipOption,
|
|
738
|
-
], template: "<div class=\"row mainTitleBar gap-20 default-align\">\r\n\r\n <div class=\"column flex-auto textTitle\" >\r\n <h2 *ngIf=\"!pageInfo.hideTitle\" style=\"margin: 0;\">\r\n <span class=\"textTitle__titleMode\">{{ titleMode | translate }}</span>\r\n {{ listTitle | translate }}\r\n <span *ngIf=\"titleCorporateAdmin && isRoot\">({{ titleCorporateAdmin }})</span>\r\n {{ extraData }}\r\n </h2>\r\n <span *ngIf=\"subTitle\" class=\"textTitle__subTitle\">{{ subTitle | translate }}</span>\r\n <div *ngIf=\"pageInfo.draftSupported\" class=\"chips-container\">\r\n <mat-chip-listbox #box aria-label=\"Color selection\" [multiple]=\"false\" [value]=\"currentIsPending ? 'PENDING' : 'COMPLETED'\" (click)=\"$event.stopPropagation()\" (change)=\"onChipSelectionChange($event, box)\">\r\n <mat-chip-option [selected]=\"!currentIsPending\" [color]=\"'accent'\" value=\"COMPLETED\" (click)=\"$event.stopPropagation()\">\r\n <mat-icon *ngIf=\"!currentIsPending\" style=\"font-size: 14px; width: 14px; height: 14px; margin-right: 4px;\">check</mat-icon>\r\n {{'finished' | translate}}\r\n </mat-chip-option>\r\n <mat-chip-option [selected]=\"currentIsPending\" [color]=\"'accent'\" value=\"PENDING\" (click)=\"$event.stopPropagation()\">\r\n <mat-icon *ngIf=\"currentIsPending\" style=\"font-size: 14px; width: 14px; height: 14px; margin-right: 4px;\">check</mat-icon>\r\n {{'todo' | translate}}\r\n </mat-chip-option>\r\n </mat-chip-listbox>\r\n </div>\r\n </div>\r\n\r\n <div class=\"column end-items gap-20\">\r\n <button type=\"button\" mat-flat-button color=\"primary\" style=\"width: 100px\" *ngIf=\"!hideBackButton\" (click)=\"goBack()\" id=\"title-bar-back-btn\">\r\n <mat-icon color=\"second\">{{ backIcon }}</mat-icon>\r\n <span style=\"font-weight: bold\">{{ 'back' | translate }}</span>\r\n </button>\r\n\r\n <div class=\"row flex-auto gap-20 buttons-wrapper\">\r\n <ng-container *ngIf=\"buttonsDisplayMode === 'dropdown'\">\r\n <button\r\n type=\"button\"\r\n *ngIf=\"buttons && buttons.length > 0\"\r\n mat-flat-button\r\n [matMenuTriggerFor]=\"actionMenu\"\r\n class=\"title-bar-action-button\"\r\n [attr.id]=\"'title-bar-action-button'\">\r\n <div class=\"button-content\">\r\n <mat-icon class=\"button-icon\">{{ buttons[0].icon }}</mat-icon>\r\n <span class=\"button-label\">{{ buttons[0].label | translate }}</span>\r\n <mat-icon class=\"button-arrow\">keyboard_arrow_down</mat-icon>\r\n </div>\r\n </button>\r\n <mat-menu #actionMenu=\"matMenu\" class=\"title-bar-action-menu\">\r\n <ng-container *ngFor=\"let btn of buttons\">\r\n <a\r\n *ngIf=\"resolveButtonHref(btn) as href\"\r\n mat-menu-item\r\n [href]=\"href\"\r\n (click)=\"onButtonClick(btn, $event)\"\r\n [attr.id]=\"btn.id || ('title-bar-menu-btn-' + (btn.action || btn.label || btn.key))\">\r\n <mat-icon>{{ btn.icon }}</mat-icon>\r\n <span>{{ btn.label | translate }}</span>\r\n </a>\r\n <button\r\n *ngIf=\"!resolveButtonHref(btn)\"\r\n type=\"button\"\r\n mat-menu-item\r\n (click)=\"onButtonClick(btn)\"\r\n [attr.id]=\"btn.id || ('title-bar-menu-btn-' + (btn.action || btn.label || btn.key))\">\r\n <mat-icon>{{ btn.icon }}</mat-icon>\r\n <span>{{ btn.label | translate }}</span>\r\n </button>\r\n </ng-container>\r\n </mat-menu>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"buttonsDisplayMode === 'list'\">\r\n <ng-container *ngFor=\"let btn of buttons\">\r\n <a\r\n *ngIf=\"resolveButtonHref(btn) as href\"\r\n mat-flat-button\r\n color=\"primary\"\r\n class=\"title-bar-list-button\"\r\n [href]=\"href\"\r\n (click)=\"onButtonClick(btn, $event)\"\r\n [attr.id]=\"btn.id || ('title-bar-list-btn-' + (btn.action || btn.label || btn.key))\">\r\n <mat-icon>{{ btn.icon }}</mat-icon>\r\n <span>{{ btn.label | translate }}</span>\r\n </a>\r\n <button\r\n *ngIf=\"!resolveButtonHref(btn)\"\r\n type=\"button\"\r\n mat-flat-button\r\n color=\"primary\"\r\n class=\"title-bar-list-button\"\r\n (click)=\"onButtonClick(btn)\"\r\n [attr.id]=\"btn.id || ('title-bar-list-btn-' + (btn.action || btn.label || btn.key))\">\r\n <mat-icon>{{ btn.icon }}</mat-icon>\r\n <span>{{ btn.label | translate }}</span>\r\n </button>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [":host{display:block;width:100%}.mainTitleBar{display:flex;width:100%;gap:20px;align-items:center;justify-content:flex-start}.mainTitleBar.row{flex-direction:row;margin-left:0!important;margin-right:0!important;padding-bottom:20px;border-bottom:1px solid #F0EEEE}.mainTitleBar.column{flex-direction:column}.mainTitleBar .textTitle{flex:1 1 0;display:flex;flex-direction:column;width:auto;gap:12px}.mainTitleBar .textTitle h2{margin:0;padding:0;line-height:1.2}.mainTitleBar .textTitle__titleMode{font-weight:200;color:gray}.mainTitleBar .textTitle__subTitle{color:#888;font-size:16px;font-weight:300;font-style:normal}.mainTitleBar .textTitle .chips-container{margin-top:0}.mainTitleBar .end-items{display:flex;flex-direction:row;align-items:center;gap:20px}.mainTitleBar .buttons-wrapper{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex-direction:row;text-align-last:end;margin-left:0!important;margin-right:0!important}.mainTitleBar .buttons-wrapper .action-btn{width:210px!important}.mainTitleBar .title-bar-action-button{background:#0d4261!important;color:#fff!important;border-radius:8px!important;height:44px!important;padding:8px 12px!important;min-width:209px!important;box-shadow:none!important}.mainTitleBar .title-bar-action-button:hover{background:#0a3550!important}.mainTitleBar .title-bar-action-button .button-content{display:flex;align-items:center;justify-content:center;gap:8px;width:100%}.mainTitleBar .title-bar-action-button .button-icon{font-size:14px;width:14px;height:14px;color:#fff}.mainTitleBar .title-bar-action-button .button-label{font-weight:500;font-size:16px;line-height:1.2;color:#fff;white-space:nowrap;height:16px}.mainTitleBar .title-bar-action-button .button-arrow{font-size:14px;width:14px;height:14px;color:#fff;margin-left:auto}.mainTitleBar .actionButton{width:100%}.mainTitleBar .actionButton__expand{font-size:20px!important;color:var(--accent-color);margin-top:5px}.mainTitleBar .title-bar-list-button{background:#0d4261!important;color:#fff!important;border-radius:8px!important;height:44px!important;padding:8px 16px!important;min-width:auto!important;box-shadow:none!important;display:flex!important;align-items:center!important;gap:8px!important;font-weight:500!important;font-size:16px!important;line-height:1.2!important;white-space:nowrap!important;text-decoration:none!important;box-sizing:border-box!important;outline:none!important;cursor:pointer!important}.mainTitleBar .title-bar-list-button:hover{background:#0a3550!important}.mainTitleBar .title-bar-list-button mat-icon{font-size:20px!important;width:20px!important;height:28px!important;color:#fff!important;margin:0!important}.mainTitleBar .title-bar-list-button span{color:#fff!important}.mainTitleBar mat-chip-listbox{display:flex;flex-direction:row;gap:8px;align-items:center}.mainTitleBar mat-chip-listbox mat-chip-option{height:32px!important;min-height:32px!important;border-radius:8px!important;font-size:16px!important;line-height:1.2!important;font-weight:400!important;border:none!important;box-shadow:none!important;transition:all .2s ease;font-family:Lusail,sans-serif!important;padding:0!important}.mainTitleBar mat-chip-listbox mat-chip-option.mdc-evolution-chip--selected,.mainTitleBar mat-chip-listbox mat-chip-option[selected=true],.mainTitleBar mat-chip-listbox mat-chip-option[aria-selected=true]{background:#0d4261!important;color:#fff!important;font-weight:500!important}.mainTitleBar mat-chip-listbox mat-chip-option.mdc-evolution-chip--selected .mdc-evolution-chip__text-label,.mainTitleBar mat-chip-listbox mat-chip-option[selected=true] .mdc-evolution-chip__text-label,.mainTitleBar mat-chip-listbox mat-chip-option[aria-selected=true] .mdc-evolution-chip__text-label{color:#fff!important;font-weight:500!important;padding-left:4px!important}.mainTitleBar mat-chip-listbox mat-chip-option.mdc-evolution-chip--selected mat-icon,.mainTitleBar mat-chip-listbox mat-chip-option[selected=true] mat-icon,.mainTitleBar mat-chip-listbox mat-chip-option[aria-selected=true] mat-icon{color:#fff!important}.mainTitleBar mat-chip-listbox mat-chip-option:not(.mdc-evolution-chip--selected):not([selected=true]):not([aria-selected=true]){background:#e9e9e9!important;color:#000!important;font-weight:400!important}.mainTitleBar mat-chip-listbox mat-chip-option:not(.mdc-evolution-chip--selected):not([selected=true]):not([aria-selected=true]) .mdc-evolution-chip__text-label{color:#000!important;font-weight:400!important}.mainTitleBar mat-chip-listbox mat-chip-option .mdc-evolution-chip__action{padding:8px 12px!important;min-height:32px!important;display:flex!important;align-items:center!important;gap:4px!important}.mainTitleBar mat-chip-listbox mat-chip-option .mdc-evolution-chip__text-label{padding:0!important;font-size:16px!important;line-height:1.2!important;font-family:Lusail,sans-serif!important}.mainTitleBar mat-chip-listbox mat-chip-option mat-icon{font-size:14px!important;width:14px!important;height:14px!important;margin-right:4px!important}.mainTitleBar mat-chip-listbox mat-chip-option ::ng-deep .mdc-evolution-chip__graphic,.mainTitleBar mat-chip-listbox mat-chip-option ::ng-deep .mdc-evolution-chip__checkmark{display:none!important}.mainTitleBar mat-chip-listbox mat-chip-option ::ng-deep .mdc-evolution-chip__action--primary{padding:10px!important}.mainTitleBar mat-chip-listbox mat-chip-option:hover{opacity:.9}.row{display:flex;flex-direction:row;width:100%}.column{display:flex;flex-direction:column;width:auto}.fx-flex-fill{width:100%;height:100%;flex:1 1 auto}.flex-auto{flex:1 1 auto;display:flex;flex-direction:column}.end-items{align-items:flex-end}.gap-20{gap:20px}@media (max-width: 960px){.mainTitleBar.row.default-align{justify-content:flex-end}}@media (max-width: 768px){.mainTitleBar.row,.mainTitleBar.column{flex-direction:column;align-items:flex-start;gap:20px}.end-items{align-items:flex-start}}@media (max-width: 600px){.gap-20{gap:10px}}\n"] }]
|
|
745
|
+
], template: "<div class=\"row mainTitleBar gap-20 default-align\">\r\n\r\n <div class=\"column flex-auto textTitle\" >\r\n <h2 *ngIf=\"!pageInfo.hideTitle\" style=\"margin: 0;\">\r\n <span class=\"textTitle__titleMode\">{{ titleMode | translate }}</span>\r\n {{ listTitle | translate }}\r\n <span *ngIf=\"titleCorporateAdmin && isRoot\">({{ titleCorporateAdmin }})</span>\r\n {{ extraData }}\r\n </h2>\r\n <span *ngIf=\"subTitle\" class=\"textTitle__subTitle\">{{ subTitle | translate }}</span>\r\n <div *ngIf=\"pageInfo.draftSupported\" class=\"chips-container\">\r\n <mat-chip-listbox #box [attr.aria-label]=\"'BASE_TABLE.documentStatus' | translate\" [multiple]=\"false\" [value]=\"currentIsPending ? 'PENDING' : 'COMPLETED'\" (click)=\"$event.stopPropagation()\" (change)=\"onChipSelectionChange($event, box)\">\r\n <mat-chip-option [selected]=\"!currentIsPending\" [color]=\"'accent'\" value=\"COMPLETED\" (click)=\"$event.stopPropagation()\">\r\n <mat-icon *ngIf=\"!currentIsPending\" style=\"font-size: 14px; width: 14px; height: 14px; margin-right: 4px;\">check</mat-icon>\r\n {{'finished' | translate}}\r\n </mat-chip-option>\r\n <mat-chip-option [selected]=\"currentIsPending\" [color]=\"'accent'\" value=\"PENDING\" (click)=\"$event.stopPropagation()\">\r\n <mat-icon *ngIf=\"currentIsPending\" style=\"font-size: 14px; width: 14px; height: 14px; margin-right: 4px;\">check</mat-icon>\r\n {{'todo' | translate}}\r\n </mat-chip-option>\r\n </mat-chip-listbox>\r\n </div>\r\n </div>\r\n\r\n <div class=\"column end-items gap-20\">\r\n <button type=\"button\" mat-flat-button color=\"primary\" style=\"width: 100px\" *ngIf=\"!hideBackButton\" (click)=\"goBack()\" id=\"title-bar-back-btn\">\r\n <mat-icon color=\"second\">{{ backIcon }}</mat-icon>\r\n <span style=\"font-weight: bold\">{{ 'back' | translate }}</span>\r\n </button>\r\n\r\n <div class=\"row flex-auto gap-20 buttons-wrapper\">\r\n <ng-container *ngIf=\"buttonsDisplayMode === 'dropdown'\">\r\n <button\r\n type=\"button\"\r\n *ngIf=\"buttons && buttons.length > 0\"\r\n mat-flat-button\r\n [matMenuTriggerFor]=\"actionMenu\"\r\n class=\"title-bar-action-button\"\r\n [attr.id]=\"'title-bar-action-button'\">\r\n <div class=\"button-content\">\r\n <mat-icon class=\"button-icon\">{{ buttons[0].icon }}</mat-icon>\r\n <span class=\"button-label\">{{ buttons[0].label | translate }}</span>\r\n <mat-icon class=\"button-arrow\">keyboard_arrow_down</mat-icon>\r\n </div>\r\n </button>\r\n <mat-menu #actionMenu=\"matMenu\" class=\"title-bar-action-menu\">\r\n <ng-container *ngFor=\"let btn of buttons\">\r\n <a\r\n *ngIf=\"resolveButtonHref(btn) as href\"\r\n mat-menu-item\r\n [href]=\"href\"\r\n (click)=\"onButtonClick(btn, $event)\"\r\n [attr.id]=\"btn.id || ('title-bar-menu-btn-' + (btn.action || btn.label || btn.key))\">\r\n <mat-icon>{{ btn.icon }}</mat-icon>\r\n <span>{{ btn.label | translate }}</span>\r\n </a>\r\n <button\r\n *ngIf=\"!resolveButtonHref(btn)\"\r\n type=\"button\"\r\n mat-menu-item\r\n (click)=\"onButtonClick(btn)\"\r\n [attr.id]=\"btn.id || ('title-bar-menu-btn-' + (btn.action || btn.label || btn.key))\">\r\n <mat-icon>{{ btn.icon }}</mat-icon>\r\n <span>{{ btn.label | translate }}</span>\r\n </button>\r\n </ng-container>\r\n </mat-menu>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"buttonsDisplayMode === 'list'\">\r\n <ng-container *ngFor=\"let btn of buttons\">\r\n <a\r\n *ngIf=\"resolveButtonHref(btn) as href\"\r\n mat-flat-button\r\n color=\"primary\"\r\n class=\"title-bar-list-button\"\r\n [href]=\"href\"\r\n (click)=\"onButtonClick(btn, $event)\"\r\n [attr.id]=\"btn.id || ('title-bar-list-btn-' + (btn.action || btn.label || btn.key))\">\r\n <mat-icon>{{ btn.icon }}</mat-icon>\r\n <span>{{ btn.label | translate }}</span>\r\n </a>\r\n <button\r\n *ngIf=\"!resolveButtonHref(btn)\"\r\n type=\"button\"\r\n mat-flat-button\r\n color=\"primary\"\r\n class=\"title-bar-list-button\"\r\n (click)=\"onButtonClick(btn)\"\r\n [attr.id]=\"btn.id || ('title-bar-list-btn-' + (btn.action || btn.label || btn.key))\">\r\n <mat-icon>{{ btn.icon }}</mat-icon>\r\n <span>{{ btn.label | translate }}</span>\r\n </button>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [":host{display:block;width:100%}.mainTitleBar{display:flex;width:100%;gap:20px;align-items:center;justify-content:flex-start}.mainTitleBar.row{flex-direction:row;margin-left:0!important;margin-right:0!important;padding-bottom:20px;border-bottom:1px solid #F0EEEE}.mainTitleBar.column{flex-direction:column}.mainTitleBar .textTitle{flex:1 1 0;display:flex;flex-direction:column;width:auto;gap:12px}.mainTitleBar .textTitle h2{margin:0;padding:0;line-height:1.2}.mainTitleBar .textTitle__titleMode{font-weight:200;color:gray}.mainTitleBar .textTitle__subTitle{color:#888;font-size:16px;font-weight:300;font-style:normal}.mainTitleBar .textTitle .chips-container{margin-top:0}.mainTitleBar .end-items{display:flex;flex-direction:row;align-items:center;gap:20px}.mainTitleBar .buttons-wrapper{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex-direction:row;text-align-last:end;margin-left:0!important;margin-right:0!important}.mainTitleBar .buttons-wrapper .action-btn{width:210px!important}.mainTitleBar .title-bar-action-button{background:#0d4261!important;color:#fff!important;border-radius:8px!important;height:44px!important;padding:8px 12px!important;min-width:209px!important;box-shadow:none!important}.mainTitleBar .title-bar-action-button:focus-visible{outline:3px solid #fff!important;outline-offset:3px!important;position:relative;z-index:1}.mainTitleBar .title-bar-action-button:hover{background:#0a3550!important}.mainTitleBar .title-bar-action-button .button-content{display:flex;align-items:center;justify-content:center;gap:8px;width:100%}.mainTitleBar .title-bar-action-button .button-icon{font-size:14px;width:14px;height:14px;color:#fff}.mainTitleBar .title-bar-action-button .button-label{font-weight:500;font-size:16px;line-height:1.2;color:#fff;white-space:nowrap;height:16px}.mainTitleBar .title-bar-action-button .button-arrow{font-size:14px;width:14px;height:14px;color:#fff;margin-left:auto}.mainTitleBar .actionButton{width:100%}.mainTitleBar .actionButton__expand{font-size:20px!important;color:var(--accent-color);margin-top:5px}.mainTitleBar .title-bar-list-button{background:#0d4261!important;color:#fff!important;border-radius:8px!important;height:44px!important;padding:8px 16px!important;min-width:auto!important;box-shadow:none!important;display:flex!important;align-items:center!important;gap:8px!important;font-weight:500!important;font-size:16px!important;line-height:1.2!important;white-space:nowrap!important;text-decoration:none!important;box-sizing:border-box!important;cursor:pointer!important}.mainTitleBar .title-bar-list-button:focus-visible{outline:3px solid #0d4261!important;outline-offset:3px!important;position:relative;z-index:1}.mainTitleBar .title-bar-list-button:hover{background:#0a3550!important}.mainTitleBar .title-bar-list-button mat-icon{font-size:20px!important;width:20px!important;height:28px!important;color:#fff!important;margin:0!important}.mainTitleBar .title-bar-list-button span{color:#fff!important}.mainTitleBar mat-chip-listbox{display:flex;flex-direction:row;gap:8px;align-items:center}.mainTitleBar mat-chip-listbox mat-chip-option{height:32px!important;min-height:32px!important;border-radius:8px!important;font-size:16px!important;line-height:1.2!important;font-weight:400!important;border:none!important;box-shadow:none!important;transition:all .2s ease;font-family:Lusail,sans-serif!important;padding:0!important}.mainTitleBar mat-chip-listbox mat-chip-option.mdc-evolution-chip--selected,.mainTitleBar mat-chip-listbox mat-chip-option[selected=true],.mainTitleBar mat-chip-listbox mat-chip-option[aria-selected=true]{background:#0d4261!important;color:#fff!important;font-weight:500!important}.mainTitleBar mat-chip-listbox mat-chip-option.mdc-evolution-chip--selected .mdc-evolution-chip__text-label,.mainTitleBar mat-chip-listbox mat-chip-option[selected=true] .mdc-evolution-chip__text-label,.mainTitleBar mat-chip-listbox mat-chip-option[aria-selected=true] .mdc-evolution-chip__text-label{color:#fff!important;font-weight:500!important;padding-left:4px!important}.mainTitleBar mat-chip-listbox mat-chip-option.mdc-evolution-chip--selected mat-icon,.mainTitleBar mat-chip-listbox mat-chip-option[selected=true] mat-icon,.mainTitleBar mat-chip-listbox mat-chip-option[aria-selected=true] mat-icon{color:#fff!important}.mainTitleBar mat-chip-listbox mat-chip-option:not(.mdc-evolution-chip--selected):not([selected=true]):not([aria-selected=true]){background:#e9e9e9!important;color:#000!important;font-weight:400!important}.mainTitleBar mat-chip-listbox mat-chip-option:not(.mdc-evolution-chip--selected):not([selected=true]):not([aria-selected=true]) .mdc-evolution-chip__text-label{color:#000!important;font-weight:400!important}.mainTitleBar mat-chip-listbox mat-chip-option .mdc-evolution-chip__action{padding:8px 12px!important;min-height:32px!important;display:flex!important;align-items:center!important;gap:4px!important}.mainTitleBar mat-chip-listbox mat-chip-option .mdc-evolution-chip__text-label{padding:0!important;font-size:16px!important;line-height:1.2!important;font-family:Lusail,sans-serif!important}.mainTitleBar mat-chip-listbox mat-chip-option mat-icon{font-size:14px!important;width:14px!important;height:14px!important;margin-right:4px!important}.mainTitleBar mat-chip-listbox mat-chip-option ::ng-deep .mdc-evolution-chip__graphic,.mainTitleBar mat-chip-listbox mat-chip-option ::ng-deep .mdc-evolution-chip__checkmark{display:none!important}.mainTitleBar mat-chip-listbox mat-chip-option ::ng-deep .mdc-evolution-chip__action--primary{padding:10px!important}.mainTitleBar mat-chip-listbox mat-chip-option:hover{opacity:.9}.row{display:flex;flex-direction:row;width:100%}.column{display:flex;flex-direction:column;width:auto}.fx-flex-fill{width:100%;height:100%;flex:1 1 auto}.flex-auto{flex:1 1 auto;display:flex;flex-direction:column}.end-items{align-items:flex-end}.gap-20{gap:20px}@media (max-width: 960px){.mainTitleBar.row.default-align{justify-content:flex-end}}@media (max-width: 768px){.mainTitleBar.row,.mainTitleBar.column{flex-direction:column;align-items:flex-start;gap:20px}.end-items{align-items:flex-start}}@media (max-width: 600px){.gap-20{gap:10px}}:host-context(html.high-contrast) .mainTitleBar .title-bar-list-button.mat-mdc-button-base,:host-context(html.high-contrast) .mainTitleBar a.title-bar-list-button,:host-context(html.high-contrast) .mainTitleBar button.title-bar-list-button{--mdc-filled-button-container-color: #000 !important;--mdc-filled-button-label-text-color: #fff !important;--mat-filled-button-state-layer-color: #fff !important;--mdc-filled-button-hover-state-layer-color: #fff !important;--mdc-filled-button-focus-state-layer-color: #fff !important;--mdc-filled-button-pressed-state-layer-color: #fff !important;background-color:#000!important;background:#000!important;color:#fff!important;border:2px solid #000!important;text-decoration:none!important}:host-context(html.high-contrast) .mainTitleBar .title-bar-list-button.mat-mdc-button-base:hover,:host-context(html.high-contrast) .mainTitleBar a.title-bar-list-button:hover,:host-context(html.high-contrast) .mainTitleBar button.title-bar-list-button:hover{background-color:#000!important;background:#000!important}:host-context(html.high-contrast) .mainTitleBar .title-bar-list-button.mat-mdc-button-base mat-icon,:host-context(html.high-contrast) .mainTitleBar .title-bar-list-button.mat-mdc-button-base .mat-icon,:host-context(html.high-contrast) .mainTitleBar a.title-bar-list-button mat-icon,:host-context(html.high-contrast) .mainTitleBar a.title-bar-list-button .mat-icon,:host-context(html.high-contrast) .mainTitleBar button.title-bar-list-button mat-icon,:host-context(html.high-contrast) .mainTitleBar button.title-bar-list-button .mat-icon{color:#fff!important}:host-context(html.high-contrast) .mainTitleBar .title-bar-list-button.mat-mdc-button-base span,:host-context(html.high-contrast) .mainTitleBar a.title-bar-list-button span,:host-context(html.high-contrast) .mainTitleBar button.title-bar-list-button span{color:#fff!important}:host-context(html.high-contrast) .mainTitleBar .title-bar-list-button.mat-mdc-button-base .mdc-button__label,:host-context(html.high-contrast) .mainTitleBar a.title-bar-list-button .mdc-button__label,:host-context(html.high-contrast) .mainTitleBar button.title-bar-list-button .mdc-button__label{color:#fff!important}:host-context(html.high-contrast) .mainTitleBar .title-bar-action-button.mat-mdc-button-base,:host-context(html.high-contrast) .mainTitleBar button.title-bar-action-button{--mdc-filled-button-container-color: #000 !important;--mdc-filled-button-label-text-color: #fff !important;--mat-filled-button-state-layer-color: #fff !important;--mdc-filled-button-hover-state-layer-color: #fff !important;--mdc-filled-button-focus-state-layer-color: #fff !important;--mdc-filled-button-pressed-state-layer-color: #fff !important;background-color:#000!important;background:#000!important;color:#fff!important;border:2px solid #000!important}:host-context(html.high-contrast) .mainTitleBar .title-bar-action-button.mat-mdc-button-base:hover,:host-context(html.high-contrast) .mainTitleBar button.title-bar-action-button:hover{background-color:#000!important;background:#000!important}:host-context(html.high-contrast) .mainTitleBar .title-bar-action-button.mat-mdc-button-base .button-icon,:host-context(html.high-contrast) .mainTitleBar .title-bar-action-button.mat-mdc-button-base .button-label,:host-context(html.high-contrast) .mainTitleBar .title-bar-action-button.mat-mdc-button-base .button-arrow,:host-context(html.high-contrast) .mainTitleBar button.title-bar-action-button .button-icon,:host-context(html.high-contrast) .mainTitleBar button.title-bar-action-button .button-label,:host-context(html.high-contrast) .mainTitleBar button.title-bar-action-button .button-arrow{color:#fff!important}\n"] }]
|
|
739
746
|
}], ctorParameters: () => [{ type: i1$1.Location }, { type: i3$1.Directionality }], propDecorators: { pageTitle: [{
|
|
740
747
|
type: Input
|
|
741
748
|
}], showExtractButton: [{
|
|
@@ -789,8 +796,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
789
796
|
}] } });
|
|
790
797
|
|
|
791
798
|
class PaginatorComponent {
|
|
792
|
-
constructor(directionality) {
|
|
799
|
+
constructor(directionality, liveAnnouncer, translate) {
|
|
793
800
|
this.directionality = directionality;
|
|
801
|
+
this.liveAnnouncer = liveAnnouncer;
|
|
802
|
+
this.translate = translate;
|
|
794
803
|
this.currentPage = 1;
|
|
795
804
|
this.totalItems = 0;
|
|
796
805
|
this.pageSize = 10;
|
|
@@ -837,8 +846,12 @@ class PaginatorComponent {
|
|
|
837
846
|
}
|
|
838
847
|
goToPage(page) {
|
|
839
848
|
if (page >= 1 && page <= this.totalPages) {
|
|
849
|
+
const previous = this.currentPage;
|
|
840
850
|
this.currentPage = page;
|
|
841
851
|
this.pageChange.emit(this.currentPage);
|
|
852
|
+
if (previous !== this.currentPage) {
|
|
853
|
+
queueMicrotask(() => this.announcePagination());
|
|
854
|
+
}
|
|
842
855
|
}
|
|
843
856
|
}
|
|
844
857
|
nextPage() {
|
|
@@ -856,6 +869,17 @@ class PaginatorComponent {
|
|
|
856
869
|
this.currentPage = 1;
|
|
857
870
|
this.pageSizeChange.emit(this.pageSize);
|
|
858
871
|
this.pageChange.emit(this.currentPage);
|
|
872
|
+
queueMicrotask(() => this.announcePagination());
|
|
873
|
+
}
|
|
874
|
+
announcePagination() {
|
|
875
|
+
const message = this.translate.instant('BASE_TABLE.paginationStatus', {
|
|
876
|
+
current: this.currentPage,
|
|
877
|
+
total: this.totalPages,
|
|
878
|
+
start: this.startIndex,
|
|
879
|
+
end: this.endIndex,
|
|
880
|
+
items: this.totalItems,
|
|
881
|
+
});
|
|
882
|
+
void this.liveAnnouncer.announce(message, 'polite');
|
|
859
883
|
}
|
|
860
884
|
getPageNumbers() {
|
|
861
885
|
const TOTAL = this.totalPages;
|
|
@@ -905,6 +929,7 @@ class PaginatorComponent {
|
|
|
905
929
|
onLoadMore() {
|
|
906
930
|
if (this.canLoadMore) {
|
|
907
931
|
this.loadMore.emit(this.mobileLoadMoreIncrement);
|
|
932
|
+
queueMicrotask(() => this.announcePagination());
|
|
908
933
|
}
|
|
909
934
|
}
|
|
910
935
|
get canLoadMore() {
|
|
@@ -916,13 +941,13 @@ class PaginatorComponent {
|
|
|
916
941
|
get totalPageNumbers() {
|
|
917
942
|
return Math.ceil(this.totalItems / this.mobileLoadMoreIncrement);
|
|
918
943
|
}
|
|
919
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PaginatorComponent, deps: [{ token: i3$1.Directionality }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
920
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: PaginatorComponent, isStandalone: true, selector: "app-paginator", inputs: { currentPage: "currentPage", totalItems: "totalItems", pageSize: "pageSize", pageSizeOptions: "pageSizeOptions", mobileLoadMoreIncrement: "mobileLoadMoreIncrement", displayedItems: "displayedItems" }, outputs: { pageChange: "pageChange", pageSizeChange: "pageSizeChange", loadMore: "loadMore" }, usesOnChanges: true, ngImport: i0, template: "<!-- Desktop Pagination -->\r\n<div class=\"paginator-container paginator-desktop\" [dir]=\"currentDirection\" [class.rtl]=\"currentDirection === 'rtl'\">\r\n <button\r\n class=\"paginator-button paginator-nav-button\"\r\n [class.disabled]=\"currentPage === 1\"\r\n [disabled]=\"currentPage === 1\"\r\n (click)=\"previousPage()\"\r\n type=\"button\">\r\n <mat-icon class=\"paginator-icon paginator-icon-left\">chevron_left</mat-icon>\r\n </button>\r\n\r\n <ng-container *ngFor=\"let page of getPageNumbers()\">\r\n <button\r\n *ngIf=\"!isEllipsis(page)\"\r\n class=\"paginator-button paginator-page-button\"\r\n [class.active]=\"isActive(page)\"\r\n [disabled]=\"isActive(page)\"\r\n (click)=\"goToPage(+page)\"\r\n type=\"button\">\r\n <span class=\"paginator-page-number\">{{ page }}</span>\r\n </button>\r\n <div *ngIf=\"isEllipsis(page)\" class=\"paginator-button paginator-ellipsis\">\r\n <span class=\"paginator-ellipsis-text\">...</span>\r\n </div>\r\n </ng-container>\r\n\r\n <button\r\n class=\"paginator-button paginator-nav-button\"\r\n [class.disabled]=\"currentPage === totalPages\"\r\n [disabled]=\"currentPage === totalPages\"\r\n (click)=\"nextPage()\"\r\n type=\"button\">\r\n <mat-icon class=\"paginator-icon paginator-icon-right\">chevron_right</mat-icon>\r\n </button>\r\n</div>\r\n\r\n<!-- Mobile \"Load More\" Pagination -->\r\n<div class=\"paginator-mobile\">\r\n <button\r\n class=\"paginator-load-more-button\"\r\n [disabled]=\"!canLoadMore\"\r\n (click)=\"onLoadMore()\"\r\n type=\"button\">\r\n <span class=\"paginator-load-more-text\">Load More</span>\r\n </button>\r\n <p class=\"paginator-page-indicator\">{{ currentPageNumber }} of {{ totalPageNumbers }}</p>\r\n</div>", styles: [".paginator-container{display:flex;align-items:center;justify-content:flex-end;gap:8px;width:100%;margin-top:16px}.paginator-container.rtl .paginator-icon,.paginator-container[dir=rtl] .paginator-icon{transform:rotate(180deg)}.paginator-button{width:32px;height:32px;border-radius:8px;border:1px solid #f0eeee;background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;box-sizing:border-box;transition:all .2s;font-family:Lusail,sans-serif;font-size:14px;line-height:1.2;color:#888;font-weight:300}.paginator-button:hover:not(.disabled):not(.active){background:#fafafa}.paginator-button.disabled{cursor:not-allowed;opacity:.5}.paginator-page-button{font-weight:300}.paginator-page-button.active{border-color:#0d4261;background:#fff;color:#0d4261;font-weight:500;cursor:default}.paginator-page-number{font-family:Lusail,sans-serif;font-size:14px;line-height:1.2;font-weight:inherit;color:inherit;height:14px}.paginator-ellipsis{border:1px solid #f0eeee;background:#fff;cursor:default;color:#888}.paginator-ellipsis-text{font-family:Lusail,sans-serif;font-size:14px;line-height:1.2;font-weight:300;color:#888}.paginator-nav-button{border:1px solid #f0eeee;background:#fff}.paginator-icon{font-size:16px;width:16px;height:16px;color:#000;display:flex;align-items:center;justify-content:center}.paginator-button.disabled .paginator-icon{opacity:.5}.paginator-mobile{display:none;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:100%}.paginator-load-more-button{background:#fff;border:1px solid #f0eeee;border-radius:8px;height:39px;padding:8px 16px 4px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;width:100%;max-width:100%;box-sizing:border-box;font-family:Lusail,sans-serif;font-weight:400;font-size:14px;line-height:1.2;color:#000;margin-top:12px}.paginator-load-more-button:hover:not(:disabled){background:#fafafa}.paginator-load-more-button:disabled{cursor:not-allowed;opacity:.5}.paginator-load-more-text{font-family:Lusail,sans-serif;font-weight:400;font-size:14px;line-height:1.2;color:#000;text-align:center}.paginator-page-indicator{font-family:Lusail,sans-serif;font-weight:300;font-size:14px;line-height:1.2;color:#888;text-align:center;margin:0;width:auto}@media (max-width: 768px){.paginator-desktop{display:none}.paginator-mobile{display:flex}}@media (min-width: 769px){.paginator-desktop{display:flex}.paginator-mobile{display:none}}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type:
|
|
944
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PaginatorComponent, deps: [{ token: i3$1.Directionality }, { token: i2$1.LiveAnnouncer }, { token: i2.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
945
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: PaginatorComponent, isStandalone: true, selector: "app-paginator", inputs: { currentPage: "currentPage", totalItems: "totalItems", pageSize: "pageSize", pageSizeOptions: "pageSizeOptions", mobileLoadMoreIncrement: "mobileLoadMoreIncrement", displayedItems: "displayedItems" }, outputs: { pageChange: "pageChange", pageSizeChange: "pageSizeChange", loadMore: "loadMore" }, usesOnChanges: true, ngImport: i0, template: "<!-- Desktop Pagination -->\r\n<div class=\"paginator-container paginator-desktop\" [dir]=\"currentDirection\" [class.rtl]=\"currentDirection === 'rtl'\">\r\n <button\r\n class=\"paginator-button paginator-nav-button\"\r\n [class.disabled]=\"currentPage === 1\"\r\n [disabled]=\"currentPage === 1\"\r\n (click)=\"previousPage()\"\r\n type=\"button\">\r\n <mat-icon class=\"paginator-icon paginator-icon-left\">chevron_left</mat-icon>\r\n </button>\r\n\r\n <ng-container *ngFor=\"let page of getPageNumbers()\">\r\n <button\r\n *ngIf=\"!isEllipsis(page)\"\r\n class=\"paginator-button paginator-page-button\"\r\n [class.active]=\"isActive(page)\"\r\n [disabled]=\"isActive(page)\"\r\n (click)=\"goToPage(+page)\"\r\n type=\"button\">\r\n <span class=\"paginator-page-number\">{{ page }}</span>\r\n </button>\r\n <div *ngIf=\"isEllipsis(page)\" class=\"paginator-button paginator-ellipsis\">\r\n <span class=\"paginator-ellipsis-text\">...</span>\r\n </div>\r\n </ng-container>\r\n\r\n <button\r\n class=\"paginator-button paginator-nav-button\"\r\n [class.disabled]=\"currentPage === totalPages\"\r\n [disabled]=\"currentPage === totalPages\"\r\n (click)=\"nextPage()\"\r\n type=\"button\">\r\n <mat-icon class=\"paginator-icon paginator-icon-right\">chevron_right</mat-icon>\r\n </button>\r\n</div>\r\n\r\n<!-- Mobile \"Load More\" Pagination -->\r\n<div class=\"paginator-mobile\">\r\n <button\r\n class=\"paginator-load-more-button\"\r\n [disabled]=\"!canLoadMore\"\r\n (click)=\"onLoadMore()\"\r\n type=\"button\">\r\n <span class=\"paginator-load-more-text\">Load More</span>\r\n </button>\r\n <p class=\"paginator-page-indicator\">{{ currentPageNumber }} of {{ totalPageNumbers }}</p>\r\n</div>", styles: [".paginator-container{display:flex;align-items:center;justify-content:flex-end;gap:8px;width:100%;margin-top:16px}.paginator-container.rtl .paginator-icon,.paginator-container[dir=rtl] .paginator-icon{transform:rotate(180deg)}.paginator-button{width:32px;height:32px;border-radius:8px;border:1px solid #f0eeee;background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;box-sizing:border-box;transition:all .2s;font-family:Lusail,sans-serif;font-size:14px;line-height:1.2;color:#888;font-weight:300}.paginator-button:hover:not(.disabled):not(.active){background:#fafafa}.paginator-button.disabled{cursor:not-allowed;opacity:.5}.paginator-page-button{font-weight:300}.paginator-page-button.active{border-color:#0d4261;background:#fff;color:#0d4261;font-weight:500;cursor:default}.paginator-page-number{font-family:Lusail,sans-serif;font-size:14px;line-height:1.2;font-weight:inherit;color:inherit;height:14px}.paginator-ellipsis{border:1px solid #f0eeee;background:#fff;cursor:default;color:#888}.paginator-ellipsis-text{font-family:Lusail,sans-serif;font-size:14px;line-height:1.2;font-weight:300;color:#888}.paginator-nav-button{border:1px solid #f0eeee;background:#fff}.paginator-icon{font-size:16px;width:16px;height:16px;color:#000;display:flex;align-items:center;justify-content:center}.paginator-button.disabled .paginator-icon{opacity:.5}.paginator-mobile{display:none;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:100%}.paginator-load-more-button{background:#fff;border:1px solid #f0eeee;border-radius:8px;height:39px;padding:8px 16px 4px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;width:100%;max-width:100%;box-sizing:border-box;font-family:Lusail,sans-serif;font-weight:400;font-size:14px;line-height:1.2;color:#000;margin-top:12px}.paginator-load-more-button:hover:not(:disabled){background:#fafafa}.paginator-load-more-button:disabled{cursor:not-allowed;opacity:.5}.paginator-load-more-text{font-family:Lusail,sans-serif;font-weight:400;font-size:14px;line-height:1.2;color:#000;text-align:center}.paginator-page-indicator{font-family:Lusail,sans-serif;font-weight:300;font-size:14px;line-height:1.2;color:#888;text-align:center;margin:0;width:auto}@media (max-width: 768px){.paginator-desktop{display:none}.paginator-mobile{display:flex}}@media (min-width: 769px){.paginator-desktop{display:flex}.paginator-mobile{display:none}}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3$1.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
|
|
921
946
|
}
|
|
922
947
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PaginatorComponent, decorators: [{
|
|
923
948
|
type: Component,
|
|
924
949
|
args: [{ selector: 'app-paginator', standalone: true, imports: [MatIconModule, MatButtonModule, NgIf, NgForOf], template: "<!-- Desktop Pagination -->\r\n<div class=\"paginator-container paginator-desktop\" [dir]=\"currentDirection\" [class.rtl]=\"currentDirection === 'rtl'\">\r\n <button\r\n class=\"paginator-button paginator-nav-button\"\r\n [class.disabled]=\"currentPage === 1\"\r\n [disabled]=\"currentPage === 1\"\r\n (click)=\"previousPage()\"\r\n type=\"button\">\r\n <mat-icon class=\"paginator-icon paginator-icon-left\">chevron_left</mat-icon>\r\n </button>\r\n\r\n <ng-container *ngFor=\"let page of getPageNumbers()\">\r\n <button\r\n *ngIf=\"!isEllipsis(page)\"\r\n class=\"paginator-button paginator-page-button\"\r\n [class.active]=\"isActive(page)\"\r\n [disabled]=\"isActive(page)\"\r\n (click)=\"goToPage(+page)\"\r\n type=\"button\">\r\n <span class=\"paginator-page-number\">{{ page }}</span>\r\n </button>\r\n <div *ngIf=\"isEllipsis(page)\" class=\"paginator-button paginator-ellipsis\">\r\n <span class=\"paginator-ellipsis-text\">...</span>\r\n </div>\r\n </ng-container>\r\n\r\n <button\r\n class=\"paginator-button paginator-nav-button\"\r\n [class.disabled]=\"currentPage === totalPages\"\r\n [disabled]=\"currentPage === totalPages\"\r\n (click)=\"nextPage()\"\r\n type=\"button\">\r\n <mat-icon class=\"paginator-icon paginator-icon-right\">chevron_right</mat-icon>\r\n </button>\r\n</div>\r\n\r\n<!-- Mobile \"Load More\" Pagination -->\r\n<div class=\"paginator-mobile\">\r\n <button\r\n class=\"paginator-load-more-button\"\r\n [disabled]=\"!canLoadMore\"\r\n (click)=\"onLoadMore()\"\r\n type=\"button\">\r\n <span class=\"paginator-load-more-text\">Load More</span>\r\n </button>\r\n <p class=\"paginator-page-indicator\">{{ currentPageNumber }} of {{ totalPageNumbers }}</p>\r\n</div>", styles: [".paginator-container{display:flex;align-items:center;justify-content:flex-end;gap:8px;width:100%;margin-top:16px}.paginator-container.rtl .paginator-icon,.paginator-container[dir=rtl] .paginator-icon{transform:rotate(180deg)}.paginator-button{width:32px;height:32px;border-radius:8px;border:1px solid #f0eeee;background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;box-sizing:border-box;transition:all .2s;font-family:Lusail,sans-serif;font-size:14px;line-height:1.2;color:#888;font-weight:300}.paginator-button:hover:not(.disabled):not(.active){background:#fafafa}.paginator-button.disabled{cursor:not-allowed;opacity:.5}.paginator-page-button{font-weight:300}.paginator-page-button.active{border-color:#0d4261;background:#fff;color:#0d4261;font-weight:500;cursor:default}.paginator-page-number{font-family:Lusail,sans-serif;font-size:14px;line-height:1.2;font-weight:inherit;color:inherit;height:14px}.paginator-ellipsis{border:1px solid #f0eeee;background:#fff;cursor:default;color:#888}.paginator-ellipsis-text{font-family:Lusail,sans-serif;font-size:14px;line-height:1.2;font-weight:300;color:#888}.paginator-nav-button{border:1px solid #f0eeee;background:#fff}.paginator-icon{font-size:16px;width:16px;height:16px;color:#000;display:flex;align-items:center;justify-content:center}.paginator-button.disabled .paginator-icon{opacity:.5}.paginator-mobile{display:none;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:100%}.paginator-load-more-button{background:#fff;border:1px solid #f0eeee;border-radius:8px;height:39px;padding:8px 16px 4px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;width:100%;max-width:100%;box-sizing:border-box;font-family:Lusail,sans-serif;font-weight:400;font-size:14px;line-height:1.2;color:#000;margin-top:12px}.paginator-load-more-button:hover:not(:disabled){background:#fafafa}.paginator-load-more-button:disabled{cursor:not-allowed;opacity:.5}.paginator-load-more-text{font-family:Lusail,sans-serif;font-weight:400;font-size:14px;line-height:1.2;color:#000;text-align:center}.paginator-page-indicator{font-family:Lusail,sans-serif;font-weight:300;font-size:14px;line-height:1.2;color:#888;text-align:center;margin:0;width:auto}@media (max-width: 768px){.paginator-desktop{display:none}.paginator-mobile{display:flex}}@media (min-width: 769px){.paginator-desktop{display:flex}.paginator-mobile{display:none}}\n"] }]
|
|
925
|
-
}], ctorParameters: () => [{ type: i3$1.Directionality }], propDecorators: { currentPage: [{
|
|
950
|
+
}], ctorParameters: () => [{ type: i3$1.Directionality }, { type: i2$1.LiveAnnouncer }, { type: i2.TranslateService }], propDecorators: { currentPage: [{
|
|
926
951
|
type: Input
|
|
927
952
|
}], totalItems: [{
|
|
928
953
|
type: Input
|
|
@@ -1247,7 +1272,7 @@ class BackendService {
|
|
|
1247
1272
|
});
|
|
1248
1273
|
return dialogRef.afterClosed();
|
|
1249
1274
|
}
|
|
1250
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BackendService, deps: [{ token: i1$2.HttpClient }, { token: TopPanel }, { token: i2.TranslateService }, { token: i3$
|
|
1275
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BackendService, deps: [{ token: i1$2.HttpClient }, { token: TopPanel }, { token: i2.TranslateService }, { token: i3$3.ActivatedRoute }, { token: i1.MatDialog }, { token: 'config' }, { token: 'secretsManager' }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1251
1276
|
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BackendService, providedIn: 'root' }); }
|
|
1252
1277
|
}
|
|
1253
1278
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BackendService, decorators: [{
|
|
@@ -1255,7 +1280,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
1255
1280
|
args: [{
|
|
1256
1281
|
providedIn: 'root'
|
|
1257
1282
|
}]
|
|
1258
|
-
}], ctorParameters: () => [{ type: i1$2.HttpClient }, { type: TopPanel }, { type: i2.TranslateService }, { type: i3$
|
|
1283
|
+
}], ctorParameters: () => [{ type: i1$2.HttpClient }, { type: TopPanel }, { type: i2.TranslateService }, { type: i3$3.ActivatedRoute }, { type: i1.MatDialog }, { type: undefined, decorators: [{
|
|
1259
1284
|
type: Inject,
|
|
1260
1285
|
args: ['config']
|
|
1261
1286
|
}] }, { type: undefined, decorators: [{
|
|
@@ -1476,6 +1501,14 @@ class MultiAutoCompleteComponent {
|
|
|
1476
1501
|
this.form.get(this.field.property).patchValue(this.selectedItems, { emitEvent: true });
|
|
1477
1502
|
}
|
|
1478
1503
|
}
|
|
1504
|
+
get matErrorDescribedBy() {
|
|
1505
|
+
const control = this.form?.get(this.field?.property);
|
|
1506
|
+
if (!control || !this.field?.property) {
|
|
1507
|
+
return null;
|
|
1508
|
+
}
|
|
1509
|
+
const visible = (control.value || control.value === 0) && control.status === 'INVALID';
|
|
1510
|
+
return visible ? `error-${this.field.property}` : null;
|
|
1511
|
+
}
|
|
1479
1512
|
getLabel() {
|
|
1480
1513
|
return this.translateService.instant(this.field.label);
|
|
1481
1514
|
}
|
|
@@ -1486,11 +1519,15 @@ class MultiAutoCompleteComponent {
|
|
|
1486
1519
|
event.preventDefault();
|
|
1487
1520
|
}
|
|
1488
1521
|
}
|
|
1522
|
+
openLookupPanel(autocompleteTrigger) {
|
|
1523
|
+
this.filterLookupItems('', autocompleteTrigger);
|
|
1524
|
+
autocompleteTrigger.openPanel();
|
|
1525
|
+
}
|
|
1489
1526
|
getId() {
|
|
1490
1527
|
return this.field.property;
|
|
1491
1528
|
}
|
|
1492
1529
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MultiAutoCompleteComponent, deps: [{ token: BackendService }, { token: i2.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1493
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: MultiAutoCompleteComponent, isStandalone: true, selector: "app-multi-auto-complete", inputs: { field: "field", form: "form", defaultValue: "defaultValue", pathParam: "pathParam", readonly: "readonly" }, outputs: { selectedValue: "selectedValue" }, viewQueries: [{ propertyName: "itemInput", first: true, predicate: ["itemInput"], descendants: true }, { propertyName: "matACTrigger", first: true, predicate: ["autocompleteTrigger"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"this.field\" class=\"main-multi-auto\">\r\n <div class=\"matField\"
|
|
1530
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: MultiAutoCompleteComponent, isStandalone: true, selector: "app-multi-auto-complete", inputs: { field: "field", form: "form", defaultValue: "defaultValue", pathParam: "pathParam", readonly: "readonly" }, outputs: { selectedValue: "selectedValue" }, viewQueries: [{ propertyName: "itemInput", first: true, predicate: ["itemInput"], descendants: true }, { propertyName: "matACTrigger", first: true, predicate: ["autocompleteTrigger"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"this.field\" class=\"main-multi-auto\">\r\n <div class=\"matField\">\r\n <mat-form-field class=\"full-width\" appearance=\"outline\" floatLabel=\"always\">\r\n <mat-label>{{ getLabel() }}</mat-label>\r\n <mat-chip-listbox #chipList [selectable]=\"true\">\r\n <mat-chip\r\n *ngFor=\"let item of selectedItems\"\r\n [removable]=\"true\"\r\n (removed)=\"remove(item)\">\r\n {{ itemNameByLag(item) }}\r\n <mat-icon matChipRemove>cancel</mat-icon>\r\n </mat-chip>\r\n <input class=\"chip-input\" type=\"text\"\r\n [id]=\"getId()\" #itemInput\r\n [formControl]=\"multiControl\"\r\n [matAutocomplete]=\"auto\" matInput\r\n [readonly]=\"readonly\"\r\n [required]=\"isRequired\"\r\n (keydown)=\"onKeydown($event, autocompleteTrigger)\"\r\n [disabled]=\"field.readonly\"\r\n #autocompleteTrigger=\"matAutocompleteTrigger\"\r\n [attr.aria-describedby]=\"matErrorDescribedBy\"\r\n >\r\n </mat-chip-listbox>\r\n\r\n <button\r\n type=\"button\"\r\n mat-icon-button\r\n class=\"arrow_drop_down_autocomplete\"\r\n [attr.aria-label]=\"'BASE_TABLE.openLookupOptions' | translate\"\r\n (click)=\"openLookupPanel(autocompleteTrigger)\">\r\n <mat-icon aria-hidden=\"true\">arrow_drop_down</mat-icon>\r\n </button>\r\n <mat-autocomplete #auto=\"matAutocomplete\" autoActiveFirstOption [displayWith]=\"displayFn\"\r\n (optionSelected)=\"selected($event.option.value)\">\r\n <ng-container *ngIf=\"!field.readonly\">\r\n <mat-option *ngFor=\"let item of lookupItems$ | async\" [value]=\"item\"\r\n [disabled]=\"field.readonly || isSelected(item)\">\r\n {{ itemNameByLag(item) }}\r\n </mat-option>\r\n </ng-container>\r\n </mat-autocomplete>\r\n <ng-content select=\"mat-error\"></ng-content>\r\n </mat-form-field>\r\n </div>\r\n</ng-container>\r\n", styles: [":is() .matField{margin-bottom:24px!important}:is() .matField .mat-form-field-wrapper{padding:0!important;margin-bottom:0!important}.full-width{width:100%}.chip-input{flex:1 1 auto}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled", "tabIndex"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i4.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "directive", type: i4.MatChipRemove, selector: "[matChipRemove]" }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { 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: MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: MatOption$1, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] }); }
|
|
1494
1531
|
}
|
|
1495
1532
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MultiAutoCompleteComponent, decorators: [{
|
|
1496
1533
|
type: Component,
|
|
@@ -1511,8 +1548,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
1511
1548
|
NgIf,
|
|
1512
1549
|
MatChipGrid,
|
|
1513
1550
|
MatChipListbox,
|
|
1514
|
-
MatLabel
|
|
1515
|
-
|
|
1551
|
+
MatLabel,
|
|
1552
|
+
MatIconButton,
|
|
1553
|
+
TranslateModule,
|
|
1554
|
+
], template: "<ng-container *ngIf=\"this.field\" class=\"main-multi-auto\">\r\n <div class=\"matField\">\r\n <mat-form-field class=\"full-width\" appearance=\"outline\" floatLabel=\"always\">\r\n <mat-label>{{ getLabel() }}</mat-label>\r\n <mat-chip-listbox #chipList [selectable]=\"true\">\r\n <mat-chip\r\n *ngFor=\"let item of selectedItems\"\r\n [removable]=\"true\"\r\n (removed)=\"remove(item)\">\r\n {{ itemNameByLag(item) }}\r\n <mat-icon matChipRemove>cancel</mat-icon>\r\n </mat-chip>\r\n <input class=\"chip-input\" type=\"text\"\r\n [id]=\"getId()\" #itemInput\r\n [formControl]=\"multiControl\"\r\n [matAutocomplete]=\"auto\" matInput\r\n [readonly]=\"readonly\"\r\n [required]=\"isRequired\"\r\n (keydown)=\"onKeydown($event, autocompleteTrigger)\"\r\n [disabled]=\"field.readonly\"\r\n #autocompleteTrigger=\"matAutocompleteTrigger\"\r\n [attr.aria-describedby]=\"matErrorDescribedBy\"\r\n >\r\n </mat-chip-listbox>\r\n\r\n <button\r\n type=\"button\"\r\n mat-icon-button\r\n class=\"arrow_drop_down_autocomplete\"\r\n [attr.aria-label]=\"'BASE_TABLE.openLookupOptions' | translate\"\r\n (click)=\"openLookupPanel(autocompleteTrigger)\">\r\n <mat-icon aria-hidden=\"true\">arrow_drop_down</mat-icon>\r\n </button>\r\n <mat-autocomplete #auto=\"matAutocomplete\" autoActiveFirstOption [displayWith]=\"displayFn\"\r\n (optionSelected)=\"selected($event.option.value)\">\r\n <ng-container *ngIf=\"!field.readonly\">\r\n <mat-option *ngFor=\"let item of lookupItems$ | async\" [value]=\"item\"\r\n [disabled]=\"field.readonly || isSelected(item)\">\r\n {{ itemNameByLag(item) }}\r\n </mat-option>\r\n </ng-container>\r\n </mat-autocomplete>\r\n <ng-content select=\"mat-error\"></ng-content>\r\n </mat-form-field>\r\n </div>\r\n</ng-container>\r\n", styles: [":is() .matField{margin-bottom:24px!important}:is() .matField .mat-form-field-wrapper{padding:0!important;margin-bottom:0!important}.full-width{width:100%}.chip-input{flex:1 1 auto}\n"] }]
|
|
1516
1555
|
}], ctorParameters: () => [{ type: BackendService }, { type: i2.TranslateService }], propDecorators: { itemInput: [{
|
|
1517
1556
|
type: ViewChild,
|
|
1518
1557
|
args: ['itemInput']
|
|
@@ -1743,6 +1782,14 @@ class AutoCompleteComponent {
|
|
|
1743
1782
|
this.myControl.patchValue(defaultValue, { emitEvent: true });
|
|
1744
1783
|
}
|
|
1745
1784
|
}
|
|
1785
|
+
get matErrorDescribedBy() {
|
|
1786
|
+
const control = this.form?.get(this.field?.property);
|
|
1787
|
+
if (!control || !this.field?.property) {
|
|
1788
|
+
return null;
|
|
1789
|
+
}
|
|
1790
|
+
const visible = (control.value || control.value === 0) && control.status === 'INVALID';
|
|
1791
|
+
return visible ? `error-${this.field.property}` : null;
|
|
1792
|
+
}
|
|
1746
1793
|
getId() {
|
|
1747
1794
|
return this.field.property;
|
|
1748
1795
|
}
|
|
@@ -1763,7 +1810,7 @@ class AutoCompleteComponent {
|
|
|
1763
1810
|
}
|
|
1764
1811
|
}
|
|
1765
1812
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AutoCompleteComponent, deps: [{ token: BackendService }, { token: i2.TranslateService }, { token: 'secretsManager' }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1766
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: AutoCompleteComponent, isStandalone: true, selector: "app-auto-complete", inputs: { field: "field", form: "form", defaultValue: "defaultValue", readonly: "readonly", supportingAttributes: "supportingAttributes" }, outputs: { selectedValue: "selectedValue" }, viewQueries: [{ propertyName: "matACTrigger", first: true, predicate: ["autocompleteTrigger"], descendants: true }, { propertyName: "autocompleteTrigger", first: true, predicate: MatAutocompleteTrigger, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"field\" class=\"main-auto-complete\">\r\n <div class=\"mat-field-wrapper\" [formGroup]=\"form\">\r\n\r\n <div class=\"label-and-asterisk-container\">\r\n <span class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n <span *ngIf=\"!field.required\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n </div>\r\n\r\n <mat-form-field class=\"autocomplete-field\" appearance=\"outline\">\r\n <input type=\"text\"\r\n [placeholder]=\"'search_placeholder' | translate\"\r\n [id]=\"getId()\"\r\n [formControl]=\"myControl\"\r\n (keydown)=\"onKeydown($event, autocompleteTrigger)\"\r\n [matAutocomplete]=\"auto\"\r\n (click)=\"autocompleteTrigger.openPanel(); filterLookupItems('', autocompleteTrigger); $event.stopPropagation()\"\r\n matInput\r\n [required]=\"isRequired\"\r\n #autocompleteTrigger=\"matAutocompleteTrigger\"\r\n [readonly]=\"readonly\"\r\n >\r\n\r\n <button mat-button matSuffix\r\n color=\"primary\"\r\n class=\"autocomplete-button\"\r\n (click)=\"autocompleteTrigger.openPanel(); filterLookupItems('', autocompleteTrigger); $event.stopPropagation()\"\r\n [attr.id]=\"'autocomplete-trigger-' + field.property\">\r\n <mat-icon>arrow_drop_down</mat-icon>\r\n </button>\r\n\r\n <mat-autocomplete #auto=\"matAutocomplete\" autoActiveFirstOption [displayWith]=\"displayFn.bind(this)\"\r\n (optionSelected)=\"itemSelected($event.option.value)\"\r\n (closed)=\"closed()\">\r\n <ng-container *ngIf=\"!field.readonly\">\r\n <mat-option *ngIf=\"items.length > 1 && lookupItems$\" [value]=\"null\">{{ \"none\" | translate }}</mat-option>\r\n <mat-option *ngFor=\"let item of lookupItems$ | async\" [value]=\"item\" [ngClass]=\"_allowSelection(item)\">\r\n {{ itemNameByLag(item) }}\r\n </mat-option>\r\n </ng-container>\r\n </mat-autocomplete>\r\n </mat-form-field>\r\n\r\n </div>\r\n</ng-container>\r\n", styles: [".main-auto-complete,.mat-field-wrapper{display:flex;flex-direction:column;width:100%}.label-and-asterisk-container{display:flex;align-items:center;gap:4px;margin-bottom:4px}.custom-label{font-weight:500}.required-asterisk{color:red}.optional-text{color:#9b9b9b;font-size:14px;font-weight:400}.autocomplete-field{width:100%;display:flex;align-items:center}.autocomplete-button{margin-left:4px}@media (max-width: 600px){.main-auto-complete,.mat-field-wrapper,.autocomplete-field{flex-direction:column;width:100%}.autocomplete-button{margin-left:0;margin-top:4px}}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4$1.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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: MatOption$1, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }] }); }
|
|
1813
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: AutoCompleteComponent, isStandalone: true, selector: "app-auto-complete", inputs: { field: "field", form: "form", defaultValue: "defaultValue", readonly: "readonly", supportingAttributes: "supportingAttributes" }, outputs: { selectedValue: "selectedValue" }, viewQueries: [{ propertyName: "matACTrigger", first: true, predicate: ["autocompleteTrigger"], descendants: true }, { propertyName: "autocompleteTrigger", first: true, predicate: MatAutocompleteTrigger, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"field\" class=\"main-auto-complete\">\r\n <div class=\"mat-field-wrapper\" [formGroup]=\"form\">\r\n\r\n <div class=\"label-and-asterisk-container\">\r\n <span class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n <span *ngIf=\"!field.required\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n </div>\r\n\r\n <mat-form-field class=\"autocomplete-field\" appearance=\"outline\">\r\n <input type=\"text\"\r\n [placeholder]=\"'search_placeholder' | translate\"\r\n [id]=\"getId()\"\r\n [formControl]=\"myControl\"\r\n (keydown)=\"onKeydown($event, autocompleteTrigger)\"\r\n [matAutocomplete]=\"auto\"\r\n (click)=\"autocompleteTrigger.openPanel(); filterLookupItems('', autocompleteTrigger); $event.stopPropagation()\"\r\n matInput\r\n [required]=\"isRequired\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-describedby]=\"matErrorDescribedBy\"\r\n #autocompleteTrigger=\"matAutocompleteTrigger\"\r\n [readonly]=\"readonly\"\r\n >\r\n\r\n <button mat-button matSuffix\r\n color=\"primary\"\r\n class=\"autocomplete-button\"\r\n (click)=\"autocompleteTrigger.openPanel(); filterLookupItems('', autocompleteTrigger); $event.stopPropagation()\"\r\n [attr.id]=\"'autocomplete-trigger-' + field.property\">\r\n <mat-icon>arrow_drop_down</mat-icon>\r\n </button>\r\n\r\n <mat-autocomplete #auto=\"matAutocomplete\" autoActiveFirstOption [displayWith]=\"displayFn.bind(this)\"\r\n (optionSelected)=\"itemSelected($event.option.value)\"\r\n (closed)=\"closed()\">\r\n <ng-container *ngIf=\"!field.readonly\">\r\n <mat-option *ngIf=\"items.length > 1 && lookupItems$\" [value]=\"null\">{{ \"none\" | translate }}</mat-option>\r\n <mat-option *ngFor=\"let item of lookupItems$ | async\" [value]=\"item\" [ngClass]=\"_allowSelection(item)\">\r\n {{ itemNameByLag(item) }}\r\n </mat-option>\r\n </ng-container>\r\n </mat-autocomplete>\r\n <ng-content select=\"mat-error\"></ng-content>\r\n </mat-form-field>\r\n\r\n </div>\r\n</ng-container>\r\n", styles: [".main-auto-complete,.mat-field-wrapper{display:flex;flex-direction:column;width:100%}.label-and-asterisk-container{display:flex;align-items:center;gap:4px;margin-bottom:4px}.custom-label{font-weight:500}.required-asterisk{color:red}.optional-text{color:#9b9b9b;font-size:14px;font-weight:400}.autocomplete-field{width:100%;display:flex;align-items:center}.autocomplete-button{margin-left:4px}:host ::ng-deep .autocomplete-field .mat-mdc-form-field-icon-suffix{height:36px!important}:host ::ng-deep .autocomplete-field .mat-mdc-form-field-icon-suffix .autocomplete-button.mat-mdc-button{min-height:36px!important;height:36px!important;--mdc-text-button-container-height: 36px;line-height:36px}:host ::ng-deep .autocomplete-field .mat-mdc-form-field-icon-suffix .autocomplete-button .mat-mdc-button-touch-target{height:36px!important}@media (max-width: 600px){.main-auto-complete,.mat-field-wrapper,.autocomplete-field{flex-direction:column;width:100%}.autocomplete-button{margin-left:0;margin-top:4px}}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4$1.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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: MatOption$1, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }] }); }
|
|
1767
1814
|
}
|
|
1768
1815
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AutoCompleteComponent, decorators: [{
|
|
1769
1816
|
type: Component,
|
|
@@ -1782,7 +1829,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
1782
1829
|
NgForOf,
|
|
1783
1830
|
MatIconButton,
|
|
1784
1831
|
MatButton,
|
|
1785
|
-
], template: "<ng-container *ngIf=\"field\" class=\"main-auto-complete\">\r\n <div class=\"mat-field-wrapper\" [formGroup]=\"form\">\r\n\r\n <div class=\"label-and-asterisk-container\">\r\n <span class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n <span *ngIf=\"!field.required\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n </div>\r\n\r\n <mat-form-field class=\"autocomplete-field\" appearance=\"outline\">\r\n <input type=\"text\"\r\n [placeholder]=\"'search_placeholder' | translate\"\r\n [id]=\"getId()\"\r\n [formControl]=\"myControl\"\r\n (keydown)=\"onKeydown($event, autocompleteTrigger)\"\r\n [matAutocomplete]=\"auto\"\r\n (click)=\"autocompleteTrigger.openPanel(); filterLookupItems('', autocompleteTrigger); $event.stopPropagation()\"\r\n matInput\r\n [required]=\"isRequired\"\r\n #autocompleteTrigger=\"matAutocompleteTrigger\"\r\n [readonly]=\"readonly\"\r\n >\r\n\r\n <button mat-button matSuffix\r\n color=\"primary\"\r\n class=\"autocomplete-button\"\r\n (click)=\"autocompleteTrigger.openPanel(); filterLookupItems('', autocompleteTrigger); $event.stopPropagation()\"\r\n [attr.id]=\"'autocomplete-trigger-' + field.property\">\r\n <mat-icon>arrow_drop_down</mat-icon>\r\n </button>\r\n\r\n <mat-autocomplete #auto=\"matAutocomplete\" autoActiveFirstOption [displayWith]=\"displayFn.bind(this)\"\r\n (optionSelected)=\"itemSelected($event.option.value)\"\r\n (closed)=\"closed()\">\r\n <ng-container *ngIf=\"!field.readonly\">\r\n <mat-option *ngIf=\"items.length > 1 && lookupItems$\" [value]=\"null\">{{ \"none\" | translate }}</mat-option>\r\n <mat-option *ngFor=\"let item of lookupItems$ | async\" [value]=\"item\" [ngClass]=\"_allowSelection(item)\">\r\n {{ itemNameByLag(item) }}\r\n </mat-option>\r\n </ng-container>\r\n </mat-autocomplete>\r\n </mat-form-field>\r\n\r\n </div>\r\n</ng-container>\r\n", styles: [".main-auto-complete,.mat-field-wrapper{display:flex;flex-direction:column;width:100%}.label-and-asterisk-container{display:flex;align-items:center;gap:4px;margin-bottom:4px}.custom-label{font-weight:500}.required-asterisk{color:red}.optional-text{color:#9b9b9b;font-size:14px;font-weight:400}.autocomplete-field{width:100%;display:flex;align-items:center}.autocomplete-button{margin-left:4px}@media (max-width: 600px){.main-auto-complete,.mat-field-wrapper,.autocomplete-field{flex-direction:column;width:100%}.autocomplete-button{margin-left:0;margin-top:4px}}\n"] }]
|
|
1832
|
+
], template: "<ng-container *ngIf=\"field\" class=\"main-auto-complete\">\r\n <div class=\"mat-field-wrapper\" [formGroup]=\"form\">\r\n\r\n <div class=\"label-and-asterisk-container\">\r\n <span class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n <span *ngIf=\"!field.required\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n </div>\r\n\r\n <mat-form-field class=\"autocomplete-field\" appearance=\"outline\">\r\n <input type=\"text\"\r\n [placeholder]=\"'search_placeholder' | translate\"\r\n [id]=\"getId()\"\r\n [formControl]=\"myControl\"\r\n (keydown)=\"onKeydown($event, autocompleteTrigger)\"\r\n [matAutocomplete]=\"auto\"\r\n (click)=\"autocompleteTrigger.openPanel(); filterLookupItems('', autocompleteTrigger); $event.stopPropagation()\"\r\n matInput\r\n [required]=\"isRequired\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-describedby]=\"matErrorDescribedBy\"\r\n #autocompleteTrigger=\"matAutocompleteTrigger\"\r\n [readonly]=\"readonly\"\r\n >\r\n\r\n <button mat-button matSuffix\r\n color=\"primary\"\r\n class=\"autocomplete-button\"\r\n (click)=\"autocompleteTrigger.openPanel(); filterLookupItems('', autocompleteTrigger); $event.stopPropagation()\"\r\n [attr.id]=\"'autocomplete-trigger-' + field.property\">\r\n <mat-icon>arrow_drop_down</mat-icon>\r\n </button>\r\n\r\n <mat-autocomplete #auto=\"matAutocomplete\" autoActiveFirstOption [displayWith]=\"displayFn.bind(this)\"\r\n (optionSelected)=\"itemSelected($event.option.value)\"\r\n (closed)=\"closed()\">\r\n <ng-container *ngIf=\"!field.readonly\">\r\n <mat-option *ngIf=\"items.length > 1 && lookupItems$\" [value]=\"null\">{{ \"none\" | translate }}</mat-option>\r\n <mat-option *ngFor=\"let item of lookupItems$ | async\" [value]=\"item\" [ngClass]=\"_allowSelection(item)\">\r\n {{ itemNameByLag(item) }}\r\n </mat-option>\r\n </ng-container>\r\n </mat-autocomplete>\r\n <ng-content select=\"mat-error\"></ng-content>\r\n </mat-form-field>\r\n\r\n </div>\r\n</ng-container>\r\n", styles: [".main-auto-complete,.mat-field-wrapper{display:flex;flex-direction:column;width:100%}.label-and-asterisk-container{display:flex;align-items:center;gap:4px;margin-bottom:4px}.custom-label{font-weight:500}.required-asterisk{color:red}.optional-text{color:#9b9b9b;font-size:14px;font-weight:400}.autocomplete-field{width:100%;display:flex;align-items:center}.autocomplete-button{margin-left:4px}:host ::ng-deep .autocomplete-field .mat-mdc-form-field-icon-suffix{height:36px!important}:host ::ng-deep .autocomplete-field .mat-mdc-form-field-icon-suffix .autocomplete-button.mat-mdc-button{min-height:36px!important;height:36px!important;--mdc-text-button-container-height: 36px;line-height:36px}:host ::ng-deep .autocomplete-field .mat-mdc-form-field-icon-suffix .autocomplete-button .mat-mdc-button-touch-target{height:36px!important}@media (max-width: 600px){.main-auto-complete,.mat-field-wrapper,.autocomplete-field{flex-direction:column;width:100%}.autocomplete-button{margin-left:0;margin-top:4px}}\n"] }]
|
|
1786
1833
|
}], ctorParameters: () => [{ type: BackendService }, { type: i2.TranslateService }, { type: undefined, decorators: [{
|
|
1787
1834
|
type: Inject,
|
|
1788
1835
|
args: ['secretsManager']
|
|
@@ -1849,7 +1896,7 @@ class AttachmentUploaderComponent {
|
|
|
1849
1896
|
}
|
|
1850
1897
|
}
|
|
1851
1898
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AttachmentUploaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1852
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: AttachmentUploaderComponent, isStandalone: true, selector: "app-attachment-uploader", inputs: { acceptedTypes: "acceptedTypes" }, outputs: { fileSelected: "fileSelected" }, viewQueries: [{ propertyName: "fileUpload", first: true, predicate: ["fileUpload"], descendants: true }], ngImport: i0, template: "<div class=\"attachment-uploader\"\r\n [class.drag-over]=\"isDragOver\"\r\n (dragover)=\"onDragOver($event)\"\r\n (dragleave)=\"onDragLeave($event)\"\r\n (drop)=\"onDrop($event)\">\r\n <div class=\"upload-content\">\r\n <div class=\"upload-icon\">\r\n <mat-icon>upload_file</mat-icon>\r\n </div>\r\n\r\n <p class=\"main-text\">{{ 'attachmentUploader.dragAndDrop' | translate }}</p>\r\n\r\n <p class=\"info-text\">{{ 'attachmentUploader.fileInfo' | translate }}</p>\r\n\r\n <button mat-stroked-button\r\n class=\"browse-button\"\r\n (click)=\"triggerAttachmentUpload()\">\r\n {{ 'attachmentUploader.browseFiles' | translate }}\r\n </button>\r\n </div>\r\n\r\n <div *ngIf=\"selectedFile\" class=\"selected-file\">\r\n <div class=\"file-info\">\r\n <mat-icon class=\"file-icon\">description</mat-icon>\r\n <span class=\"file-name\">{{ selectedFile.name }}</span>\r\n </div>\r\n <button mat-icon-button\r\n class=\"clear-button\"\r\n (click)=\"clearFile()\"\r\n matTooltip=\"{{ 'attachmentUploader.removeFile' | translate }}\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </div>\r\n\r\n <input #fileUpload
|
|
1899
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: AttachmentUploaderComponent, isStandalone: true, selector: "app-attachment-uploader", inputs: { acceptedTypes: "acceptedTypes", ariaDescribedBy: "ariaDescribedBy" }, outputs: { fileSelected: "fileSelected" }, viewQueries: [{ propertyName: "fileUpload", first: true, predicate: ["fileUpload"], descendants: true }], ngImport: i0, template: "<div class=\"attachment-uploader\"\r\n [class.drag-over]=\"isDragOver\"\r\n [attr.aria-describedby]=\"ariaDescribedBy || null\"\r\n (dragover)=\"onDragOver($event)\"\r\n (dragleave)=\"onDragLeave($event)\"\r\n (drop)=\"onDrop($event)\">\r\n <div class=\"upload-content\">\r\n <div class=\"upload-icon\">\r\n <mat-icon>upload_file</mat-icon>\r\n </div>\r\n\r\n <p class=\"main-text\">{{ 'attachmentUploader.dragAndDrop' | translate }}</p>\r\n\r\n <p class=\"info-text\">{{ 'attachmentUploader.fileInfo' | translate }}</p>\r\n\r\n <button mat-stroked-button\r\n type=\"button\"\r\n class=\"browse-button\"\r\n [attr.aria-describedby]=\"ariaDescribedBy || null\"\r\n (click)=\"triggerAttachmentUpload()\">\r\n {{ 'attachmentUploader.browseFiles' | translate }}\r\n </button>\r\n </div>\r\n\r\n <div *ngIf=\"selectedFile\" class=\"selected-file\">\r\n <div class=\"file-info\">\r\n <mat-icon class=\"file-icon\">description</mat-icon>\r\n <span class=\"file-name\">{{ selectedFile.name }}</span>\r\n </div>\r\n <button mat-icon-button\r\n type=\"button\"\r\n class=\"clear-button\"\r\n (click)=\"clearFile()\"\r\n [attr.aria-label]=\"'attachmentUploader.removeFile' | translate\"\r\n matTooltip=\"{{ 'attachmentUploader.removeFile' | translate }}\">\r\n <mat-icon aria-hidden=\"true\">close</mat-icon>\r\n </button>\r\n </div>\r\n\r\n <input #fileUpload\r\n type=\"file\"\r\n class=\"hidden-input\"\r\n [accept]=\"acceptedTypes\"\r\n [attr.aria-describedby]=\"ariaDescribedBy || null\"\r\n (change)=\"uploadFileToServer()\" />\r\n</div>\r\n", styles: [".attachment-uploader{background-color:var(--background-color);border:1px dashed #b7b7b7;border-radius:8px;position:relative;width:100%;transition:all .3s ease;cursor:pointer}.attachment-uploader.drag-over{border-color:var(--primary-color-3nd);background-color:var(--selected-hover)}.upload-content{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:24px;min-height:200px}.upload-icon{display:flex;align-items:center;justify-content:center;margin-bottom:8px}.upload-icon mat-icon{font-size:48px;width:48px;height:48px;color:#888}.main-text{font-family:Lusail,sans-serif;font-size:16px;font-weight:500;line-height:1.2;color:#000;margin:0;text-align:center}.info-text{font-family:Lusail,sans-serif;font-size:14px;font-weight:300;line-height:1.2;color:#888;margin:0;text-align:center}.browse-button{margin-top:8px;border:1px solid var(--primary-color-3nd);border-radius:8px;background-color:var(--background-color);color:var(--primary-color-3nd);font-family:Lusail,sans-serif;font-size:16px;font-weight:500;padding:8px 16px;transition:all .2s ease}.browse-button:hover{background-color:var(--selected-hover)}.selected-file{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background-color:var(--background-color);border-top:1px solid #e0e0e0;border-radius:0 0 8px 8px}.file-info{display:flex;align-items:center;gap:8px;flex:1;min-width:0}.file-icon{color:#888;font-size:24px;width:24px;height:24px;flex-shrink:0}.file-name{font-family:Lusail,sans-serif;font-size:14px;font-weight:400;color:#000;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.clear-button{background-color:transparent;border:none;color:#d32f2f;transition:color .2s ease;padding:4px;flex-shrink:0}.clear-button:hover{color:#b71c1c;background-color:transparent}.clear-button mat-icon{font-size:20px;width:20px;height:20px}.hidden-input{display:none}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }] }); }
|
|
1853
1900
|
}
|
|
1854
1901
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AttachmentUploaderComponent, decorators: [{
|
|
1855
1902
|
type: Component,
|
|
@@ -1860,7 +1907,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
1860
1907
|
NgIf,
|
|
1861
1908
|
MatTooltip,
|
|
1862
1909
|
MatIconButton,
|
|
1863
|
-
], template: "<div class=\"attachment-uploader\"\r\n [class.drag-over]=\"isDragOver\"\r\n (dragover)=\"onDragOver($event)\"\r\n (dragleave)=\"onDragLeave($event)\"\r\n (drop)=\"onDrop($event)\">\r\n <div class=\"upload-content\">\r\n <div class=\"upload-icon\">\r\n <mat-icon>upload_file</mat-icon>\r\n </div>\r\n\r\n <p class=\"main-text\">{{ 'attachmentUploader.dragAndDrop' | translate }}</p>\r\n\r\n <p class=\"info-text\">{{ 'attachmentUploader.fileInfo' | translate }}</p>\r\n\r\n <button mat-stroked-button\r\n class=\"browse-button\"\r\n (click)=\"triggerAttachmentUpload()\">\r\n {{ 'attachmentUploader.browseFiles' | translate }}\r\n </button>\r\n </div>\r\n\r\n <div *ngIf=\"selectedFile\" class=\"selected-file\">\r\n <div class=\"file-info\">\r\n <mat-icon class=\"file-icon\">description</mat-icon>\r\n <span class=\"file-name\">{{ selectedFile.name }}</span>\r\n </div>\r\n <button mat-icon-button\r\n class=\"clear-button\"\r\n (click)=\"clearFile()\"\r\n matTooltip=\"{{ 'attachmentUploader.removeFile' | translate }}\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </div>\r\n\r\n <input #fileUpload
|
|
1910
|
+
], template: "<div class=\"attachment-uploader\"\r\n [class.drag-over]=\"isDragOver\"\r\n [attr.aria-describedby]=\"ariaDescribedBy || null\"\r\n (dragover)=\"onDragOver($event)\"\r\n (dragleave)=\"onDragLeave($event)\"\r\n (drop)=\"onDrop($event)\">\r\n <div class=\"upload-content\">\r\n <div class=\"upload-icon\">\r\n <mat-icon>upload_file</mat-icon>\r\n </div>\r\n\r\n <p class=\"main-text\">{{ 'attachmentUploader.dragAndDrop' | translate }}</p>\r\n\r\n <p class=\"info-text\">{{ 'attachmentUploader.fileInfo' | translate }}</p>\r\n\r\n <button mat-stroked-button\r\n type=\"button\"\r\n class=\"browse-button\"\r\n [attr.aria-describedby]=\"ariaDescribedBy || null\"\r\n (click)=\"triggerAttachmentUpload()\">\r\n {{ 'attachmentUploader.browseFiles' | translate }}\r\n </button>\r\n </div>\r\n\r\n <div *ngIf=\"selectedFile\" class=\"selected-file\">\r\n <div class=\"file-info\">\r\n <mat-icon class=\"file-icon\">description</mat-icon>\r\n <span class=\"file-name\">{{ selectedFile.name }}</span>\r\n </div>\r\n <button mat-icon-button\r\n type=\"button\"\r\n class=\"clear-button\"\r\n (click)=\"clearFile()\"\r\n [attr.aria-label]=\"'attachmentUploader.removeFile' | translate\"\r\n matTooltip=\"{{ 'attachmentUploader.removeFile' | translate }}\">\r\n <mat-icon aria-hidden=\"true\">close</mat-icon>\r\n </button>\r\n </div>\r\n\r\n <input #fileUpload\r\n type=\"file\"\r\n class=\"hidden-input\"\r\n [accept]=\"acceptedTypes\"\r\n [attr.aria-describedby]=\"ariaDescribedBy || null\"\r\n (change)=\"uploadFileToServer()\" />\r\n</div>\r\n", styles: [".attachment-uploader{background-color:var(--background-color);border:1px dashed #b7b7b7;border-radius:8px;position:relative;width:100%;transition:all .3s ease;cursor:pointer}.attachment-uploader.drag-over{border-color:var(--primary-color-3nd);background-color:var(--selected-hover)}.upload-content{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:24px;min-height:200px}.upload-icon{display:flex;align-items:center;justify-content:center;margin-bottom:8px}.upload-icon mat-icon{font-size:48px;width:48px;height:48px;color:#888}.main-text{font-family:Lusail,sans-serif;font-size:16px;font-weight:500;line-height:1.2;color:#000;margin:0;text-align:center}.info-text{font-family:Lusail,sans-serif;font-size:14px;font-weight:300;line-height:1.2;color:#888;margin:0;text-align:center}.browse-button{margin-top:8px;border:1px solid var(--primary-color-3nd);border-radius:8px;background-color:var(--background-color);color:var(--primary-color-3nd);font-family:Lusail,sans-serif;font-size:16px;font-weight:500;padding:8px 16px;transition:all .2s ease}.browse-button:hover{background-color:var(--selected-hover)}.selected-file{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background-color:var(--background-color);border-top:1px solid #e0e0e0;border-radius:0 0 8px 8px}.file-info{display:flex;align-items:center;gap:8px;flex:1;min-width:0}.file-icon{color:#888;font-size:24px;width:24px;height:24px;flex-shrink:0}.file-name{font-family:Lusail,sans-serif;font-size:14px;font-weight:400;color:#000;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.clear-button{background-color:transparent;border:none;color:#d32f2f;transition:color .2s ease;padding:4px;flex-shrink:0}.clear-button:hover{color:#b71c1c;background-color:transparent}.clear-button mat-icon{font-size:20px;width:20px;height:20px}.hidden-input{display:none}\n"] }]
|
|
1864
1911
|
}], propDecorators: { fileUpload: [{
|
|
1865
1912
|
type: ViewChild,
|
|
1866
1913
|
args: ['fileUpload']
|
|
@@ -1868,6 +1915,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
1868
1915
|
type: Output
|
|
1869
1916
|
}], acceptedTypes: [{
|
|
1870
1917
|
type: Input
|
|
1918
|
+
}], ariaDescribedBy: [{
|
|
1919
|
+
type: Input
|
|
1871
1920
|
}] } });
|
|
1872
1921
|
|
|
1873
1922
|
class DecimalOnlyDirective {
|
|
@@ -2222,6 +2271,14 @@ class BaseFormCanvasComponent {
|
|
|
2222
2271
|
const configuredKey = column.placeholder ? column.placeholder : column.property;
|
|
2223
2272
|
return configuredKey.startsWith(this.pageInfo.labelsSection) ? `${configuredKey}` : `${this.pageInfo.labelsSection}.${configuredKey}`;
|
|
2224
2273
|
}
|
|
2274
|
+
blockNegativeNumberKeydown(event, field) {
|
|
2275
|
+
if (field.allowNegative) {
|
|
2276
|
+
return;
|
|
2277
|
+
}
|
|
2278
|
+
if (event.key === '-' || event.code === 'Minus' || event.code === 'NumpadSubtract') {
|
|
2279
|
+
event.preventDefault();
|
|
2280
|
+
}
|
|
2281
|
+
}
|
|
2225
2282
|
getErrors(prop) {
|
|
2226
2283
|
const control = this.formParam?.get([prop]);
|
|
2227
2284
|
if (!control || control.disabled)
|
|
@@ -2237,11 +2294,19 @@ class BaseFormCanvasComponent {
|
|
|
2237
2294
|
}
|
|
2238
2295
|
const field = this.fields.find(f => f.property === prop);
|
|
2239
2296
|
if (!field?.validationMessages) {
|
|
2297
|
+
if (field?.type === 'phone-number' && control.touched && control.dirty && !control.value) {
|
|
2298
|
+
const prefix = this.pageInfo.labelsSection + ".";
|
|
2299
|
+
return prefix + 'INVALID_PHONE_NUMBER';
|
|
2300
|
+
}
|
|
2240
2301
|
if (control.value && control.status !== 'VALID' && this.getFirstErrorKey) {
|
|
2241
2302
|
return this.getFirstErrorKey(prop);
|
|
2242
2303
|
}
|
|
2243
2304
|
return '';
|
|
2244
2305
|
}
|
|
2306
|
+
if (field?.type === 'phone-number' && control.touched && control.dirty && !control.value) {
|
|
2307
|
+
const prefix = this.pageInfo.labelsSection + ".";
|
|
2308
|
+
return prefix + (field.validationMessages?.validatePhoneNumber || 'INVALID_PHONE_NUMBER');
|
|
2309
|
+
}
|
|
2245
2310
|
if (control.invalid) {
|
|
2246
2311
|
const errors = control.errors || {};
|
|
2247
2312
|
const prefix = this.pageInfo.labelsSection + ".";
|
|
@@ -2259,6 +2324,8 @@ class BaseFormCanvasComponent {
|
|
|
2259
2324
|
return prefix + (field.validationMessages?.decimalMax || 'DECIMAL_MAX');
|
|
2260
2325
|
if (errors['pattern'])
|
|
2261
2326
|
return prefix + (field.validationMessages?.pattern || 'INVALID_FORMAT');
|
|
2327
|
+
if (errors['validatePhoneNumber'])
|
|
2328
|
+
return prefix + (field.validationMessages?.validatePhoneNumber || 'INVALID_PHONE_NUMBER');
|
|
2262
2329
|
if (errors['invalidMathExpression'])
|
|
2263
2330
|
return prefix + 'INVALID_MATH';
|
|
2264
2331
|
if (errors['dateRangeInvalid'])
|
|
@@ -2301,6 +2368,10 @@ class BaseFormCanvasComponent {
|
|
|
2301
2368
|
}
|
|
2302
2369
|
showError(prop) {
|
|
2303
2370
|
const CONTROL = this.formParam?.get([prop]);
|
|
2371
|
+
const field = this.fields.find(f => f.property === prop);
|
|
2372
|
+
if (field?.type === 'phone-number') {
|
|
2373
|
+
return CONTROL?.touched && CONTROL?.dirty && !CONTROL?.value;
|
|
2374
|
+
}
|
|
2304
2375
|
return (CONTROL?.value || CONTROL?.value === 0) && CONTROL?.status === 'INVALID';
|
|
2305
2376
|
}
|
|
2306
2377
|
clearFieldValue(prop) {
|
|
@@ -2381,6 +2452,51 @@ class BaseFormCanvasComponent {
|
|
|
2381
2452
|
getReadonlyDateFormat(field) {
|
|
2382
2453
|
return field.readonlyDateDisplay === 'datetime' ? 'dd/MM/yyyy HH:mm' : 'dd/MM/yyyy';
|
|
2383
2454
|
}
|
|
2455
|
+
onMultiStateMenuInnerKeydown(event, field) {
|
|
2456
|
+
if (!(event instanceof KeyboardEvent)) {
|
|
2457
|
+
return;
|
|
2458
|
+
}
|
|
2459
|
+
if (!this.isMultiStateMenuActivateKey(event)) {
|
|
2460
|
+
return;
|
|
2461
|
+
}
|
|
2462
|
+
const row = this.findMultiStateRowFromKeyboardEvent(event);
|
|
2463
|
+
if (!row) {
|
|
2464
|
+
return;
|
|
2465
|
+
}
|
|
2466
|
+
const code = row.getAttribute('data-multi-state-code');
|
|
2467
|
+
if (!code) {
|
|
2468
|
+
return;
|
|
2469
|
+
}
|
|
2470
|
+
event.preventDefault();
|
|
2471
|
+
event.stopPropagation();
|
|
2472
|
+
const next = !this.isMultiStateSelected(field.property, code);
|
|
2473
|
+
this.toggleMultiStateFilter(field.property, code, next);
|
|
2474
|
+
}
|
|
2475
|
+
isMultiStateMenuActivateKey(event) {
|
|
2476
|
+
return (event.key === 'Enter' ||
|
|
2477
|
+
event.key === ' ' ||
|
|
2478
|
+
event.key === 'Spacebar' ||
|
|
2479
|
+
event.code === 'Space' ||
|
|
2480
|
+
event.code === 'NumpadEnter');
|
|
2481
|
+
}
|
|
2482
|
+
findMultiStateRowFromKeyboardEvent(event) {
|
|
2483
|
+
const path = typeof event.composedPath === 'function' ? event.composedPath() : [];
|
|
2484
|
+
const fromPath = path.find((n) => n instanceof HTMLElement && n.classList.contains('multi-state-filter__row'));
|
|
2485
|
+
if (fromPath) {
|
|
2486
|
+
return fromPath;
|
|
2487
|
+
}
|
|
2488
|
+
const t = event.target;
|
|
2489
|
+
return t instanceof HTMLElement ? t.closest('.multi-state-filter__row') : null;
|
|
2490
|
+
}
|
|
2491
|
+
onMultiStateRowClick(event, property, code) {
|
|
2492
|
+
event.stopPropagation();
|
|
2493
|
+
const target = event.target;
|
|
2494
|
+
if (target?.closest('mat-checkbox')) {
|
|
2495
|
+
return;
|
|
2496
|
+
}
|
|
2497
|
+
const next = !this.isMultiStateSelected(property, code);
|
|
2498
|
+
this.toggleMultiStateFilter(property, code, next);
|
|
2499
|
+
}
|
|
2384
2500
|
toggleMultiStateFilter(property, code, checked) {
|
|
2385
2501
|
const ctrl = this.formParam.get(property);
|
|
2386
2502
|
if (!ctrl) {
|
|
@@ -2612,7 +2728,7 @@ class BaseFormCanvasComponent {
|
|
|
2612
2728
|
}
|
|
2613
2729
|
}
|
|
2614
2730
|
}
|
|
2615
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BaseFormCanvasComponent, deps: [{ token: i2.TranslateService }, { token: i3$
|
|
2731
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BaseFormCanvasComponent, deps: [{ token: i2.TranslateService }, { token: i3$3.ActivatedRoute }, { token: BackendService }, { token: i3.FormBuilder }, { token: i2$1.LiveAnnouncer }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2616
2732
|
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: [
|
|
2617
2733
|
{
|
|
2618
2734
|
provide: DateAdapter,
|
|
@@ -2621,7 +2737,7 @@ class BaseFormCanvasComponent {
|
|
|
2621
2737
|
},
|
|
2622
2738
|
{ provide: MAT_DATE_FORMATS, useValue: DD_MM_YYYY_Format },
|
|
2623
2739
|
{ provide: MAT_DATE_LOCALE, useValue: 'en-GB' }
|
|
2624
|
-
], viewQueries: [{ propertyName: "fieldsInput", first: true, predicate: ["EquationValueInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"main-form-canvas\">\r\n <div class=\"form-wrapper\">\r\n <ng-container *ngIf=\"defaults\">\r\n <ng-container *ngIf=\"editable; else readonlyView\" class=\"form-container\">\r\n <form [formGroup]=\"formParam\" class=\"form-content\">\r\n <div class=\"form-row\">\r\n <div class=\"form-column\">\r\n <ng-container *ngFor=\"let row of screenFields | keyvalue\">\r\n <div class=\"row-container\">\r\n <ng-container *ngFor=\"let field of row.value\">\r\n <div class=\"field-column\" [style.flex]=\"field.fieldSize ? ('0 0 ' + field.fieldSize + '%') : '1 1 0'\">\r\n <ng-container [ngSwitch]=\"field.type\">\r\n <ng-container *ngSwitchCase=\"'date'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n </div>\r\n\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput\r\n [matDatepicker]=\"picker\"\r\n [min]=\"minDate\"\r\n [value]=\"formParam.get(field.property)?.value\"\r\n (dateChange)=\"formParam.get(field.property).setValue($event.value)\"\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [readonly]=\"field.readonly\"\r\n formControlName=\"{{field.property}}\"\r\n [required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-describedby]=\"'error-' + field.property\">\r\n\r\n <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n\r\n <mat-datepicker #picker\r\n [startView]=\"getView(field)\"\r\n (yearSelected)=\"setMonthAndYear($event, picker, field)\"\r\n panelClass=\"example-month-picker\">\r\n </mat-datepicker>\r\n\r\n <mat-error *ngIf=\"showError(field.property)\" aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'phone-number'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container class=\"custom-ngx-mat-intl-tel-input\" *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <div class=\"phone-input-wrapper\">\r\n <ngx-mat-intl-tel-input\r\n formControlName=\"{{ field.property }}\"\r\n [inputPlaceholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [preferredCountries]=\"['qa']\"\r\n [enablePlaceholder]=\"true\"\r\n [enableSearch]=\"true\"\r\n [onlyCountries]=\"getCountryCodeList()\"\r\n [required]=\"field.required\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-describedby]=\"'error-' + field.property\">\r\n </ngx-mat-intl-tel-input>\r\n </div>\r\n\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n\r\n <ng-container *ngSwitchCase=\"'iban-text'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"textReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <input class=\"app-input\"\r\n formControlName=\"{{ field.property }}\"\r\n matInput\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [readonly]=\"field.readonly\"\r\n [required]=\"field.required\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-describedby]=\"'error-' + field.property\">\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'password'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput\r\n class=\"app-input\"\r\n formControlName=\"{{ field.property }}\"\r\n [type]=\"hide && !field.disabled ? 'password' : 'text'\"\r\n [readonly]=\"field.readonly\"\r\n [required]=\"field.required\"\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-describedby]=\"'error-' + field.property\">\r\n <!-- <mat-icon matSuffix-->\r\n <!-- (click)=\"hide = !hide\">-->\r\n <!-- {{ hide ? 'visibility_off' : 'visibility' }}-->\r\n <!-- </mat-icon>-->\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'text'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"textReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <mat-icon *ngIf=\"field.showSearchIcon\" matPrefix>search</mat-icon>\r\n <input class=\"app-input\"\r\n formControlName=\"{{ field.property }}\"\r\n matInput\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [readonly]=\"field.readonly\"\r\n [required]=\"field.required\"\r\n (keyup)=\"fixArabicNumbers($event.target)\"\r\n [attr.aria-required]=\"field.required\"\r\n [maxDigits]=\"field.maxLength\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-describedby]=\"'error-' + field.property\">\r\n <span\r\n *ngIf=\"field.showSearchIcon && !field.readonly && (formParam?.get([field.property])?.value ?? '') !== ''\"\r\n matSuffix\r\n class=\"clear-icon-suffix\">\r\n <button\r\n mat-icon-button\r\n type=\"button\"\r\n class=\"clear-icon-button\"\r\n (click)=\"clearFieldValue(field.property)\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </span>\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'multi-state-checkbox'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"multi-state-filter\" [formGroup]=\"formParam\">\r\n <button\r\n type=\"button\"\r\n class=\"multi-state-filter__trigger\"\r\n [matMenuTriggerFor]=\"statusMultiMenu\"\r\n [attr.aria-haspopup]=\"true\"\r\n [attr.aria-expanded]=\"false\"\r\n [attr.aria-label]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : (field.label | translate)\">\r\n <span\r\n class=\"multi-state-filter__trigger-text\"\r\n [class.multi-state-filter__trigger-text--placeholder]=\"isMultiStateEmpty(field.property)\">\r\n {{\r\n getMultiStateFilterTriggerLabel(field)\r\n || (field.placeholder\r\n ? (labelKeyPlaceHolder(field) | translate)\r\n : ('FILTER-BUILDER.selectStatus' | translate))\r\n }}\r\n </span>\r\n <mat-icon class=\"multi-state-filter__chevron\" aria-hidden=\"true\">keyboard_arrow_down</mat-icon>\r\n </button>\r\n <mat-menu #statusMultiMenu=\"matMenu\" class=\"multi-state-filter__menu-panel\" [hasBackdrop]=\"true\">\r\n <div class=\"multi-state-filter__menu-inner\" (click)=\"$event.stopPropagation()\">\r\n <div\r\n *ngFor=\"let code of field.listOptions || []\"\r\n class=\"multi-state-filter__row\">\r\n <mat-checkbox\r\n (click)=\"$event.stopPropagation()\"\r\n [checked]=\"isMultiStateSelected(field.property, code)\"\r\n (change)=\"toggleMultiStateFilter(field.property, code, $event.checked)\">\r\n </mat-checkbox>\r\n <span\r\n class=\"multi-state-filter__pill stateType\"\r\n [ngClass]=\"code\">\r\n {{ statusOptionLabelKey(field, code) | translate }}\r\n </span>\r\n </div>\r\n </div>\r\n </mat-menu>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'chip-list'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n\r\n <mat-chip-grid [attr.aria-labelledby]=\"'label-' + field.property\"\r\n formControlName=\"{{ field.property }}\">\r\n <mat-chip-row\r\n *ngFor=\"let mail of splittedChips(formParam, field.property); let idx = index\"\r\n [removable]=\"removable\"\r\n (removed)=\"removeChipsItem(formParam, field.property, idx)\">\r\n {{ mail }}\r\n <mat-icon matChipRemove *ngIf=\"removable\">cancel</mat-icon>\r\n </mat-chip-row>\r\n\r\n <input [attr.aria-labelledby]=\"'label-' + field.property\" [matChipInputFor]=\"null\"\r\n [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\r\n [matChipInputAddOnBlur]=\"addOnBlur\"\r\n (matChipInputTokenEnd)=\"addEmailToChips($event, formParam, field.property)\">\r\n </mat-chip-grid>\r\n <mat-error id=\"error-{{ field.property }}\" *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'amount'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"amountReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <input class=\"app-input\"\r\n formControlName=\"{{ field.property }}\"\r\n matInput\r\n type=\"number\"\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [readonly]=\"field.readonly\"\r\n [required]=\"field.required\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-describedby]=\"'error-' + field.property\">\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'sequence'\">\r\n <ng-container\r\n *ngIf=\"referenceAttributeTrue(field.property, 'autoGenerated'); else noSequence\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <input class=\"app-input\"\r\n formControlName=\"{{ field.property }}\"\r\n matInput\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [readonly]=\"true\"\r\n [disabled]=\"true\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\">\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-template #noSequence>\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <input class=\"app-input\"\r\n formControlName=\"{{ field.property }}\"\r\n matInput\r\n [readonly]=\"false\"\r\n [disabled]=\"false\"\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [required]=\"field.required\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-describedby]=\"'error-' + field.property\">\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n </ng-template>\r\n\r\n <ng-container *ngSwitchCase=\"'textarea'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"textareaReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <textarea cdkFocusInitial\r\n formControlName=\"{{ field.property }}\"\r\n matInput\r\n cdkTextareaAutosize\r\n cdkAutosizeMinRows=\"3\"\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-describedby]=\"'error-' + field.property\"\r\n [readonly]=\"field.readonly\"\r\n [required]=\"field.required\"></textarea>\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'number'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"numberReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <input class=\"app-input\"\r\n formControlName=\"{{ field.property }}\"\r\n matInput\r\n type=\"number\"\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [maxDigits]=\"field.maxLength\"\r\n [attr.aria-describedby]=\"'error-' + field.property\"\r\n [required]=\"field.readonly ? false : field.required\"\r\n [readonly]=\"field.readonly\"\r\n [pattern]=\"field.pattern\">\r\n <mat-error id=\"error-{{ field.property }}\" *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'bigdecimal'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"numberReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <input\r\n matInput\r\n type=\"text\"\r\n inputmode=\"numeric\"\r\n formControlName=\"{{ field.property }}\"\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n numbersOnly [maxDecimals]=\"field.maxDecimals\"\r\n [maxDigits]=\"field.maxLength\"\r\n [pattern]=\"field.pattern\"\r\n [attr.aria-describedby]=\"'error-' + field.property\"\r\n [required]=\"field.readonly ? false : field.required\"\r\n [readonly]=\"field.readonly\">\r\n <mat-error id=\"error-{{ field.property }}\" *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'time'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"timeReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <input\r\n matInput\r\n class=\"app-input\"\r\n formControlName=\"{{ field.property }}\"\r\n type=\"time\"\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [readonly]=\"field.readonly\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-describedby]=\"'error-' + field.property\"\r\n [required]=\"field.required\">\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'checkbox'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"checkboxReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <mat-checkbox\r\n appearance=\"outline\"\r\n style=\"padding-bottom: 14px; padding-top: 14px;\"\r\n [disabled]=\"field.readonly\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n formControlName=\"{{ field.property }}\">\r\n {{ field.label! | translate }}\r\n <mat-error *ngIf=\"showError(field.property)\" aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-checkbox>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'toggle'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"toggleReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n </div>\r\n <mat-slide-toggle\r\n [disabled]=\"field.readonly\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-describedby]=\"'error-' + field.property\"\r\n formControlName=\"{{ field.property }}\">\r\n </mat-slide-toggle>\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'color-picker'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <div fxLayout=\"row\" fxLayoutAlign=\"center\">\r\n <h4 style=\"margin-right: 10px\">{{ field.label! | translate }}</h4>\r\n <input\r\n ejs-colorpicker\r\n type=\"color\"\r\n id=\"colorpicker\"\r\n formControlName=\"{{ field.property }}\"\r\n [attr.aria-label]=\"field.label! | translate\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n />\r\n </div>\r\n <mat-error *ngIf=\"showError(field.property)\" aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </ng-container>\r\n </ng-container>\r\n\r\n\r\n <ng-container *ngSwitchCase=\"'radio-button'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"radioButtonReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <mat-radio-group\r\n formControlName=\"{{field.property}}\"\r\n class=\"app-radio\"\r\n [attr.aria-label]=\"field.label! | translate\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\">\r\n <div class=\"field-row\">\r\n <div class=\"field-label\">\r\n <span class=\"custom-label\">{{ field.label! | translate }}</span>\r\n </div>\r\n <div class=\"field-input\">\r\n <div class=\"radio-group-custom\">\r\n <mat-radio-button\r\n *ngFor=\"let option of field.listOptions\"\r\n [value]=\"option\"\r\n [attr.aria-labelledby]=\"option\">\r\n {{ option | translate }}\r\n </mat-radio-button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <mat-error\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-radio-group>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'list'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"listReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\" style=\"width: 100%\">\r\n <mat-select\r\n formControlName=\"{{field.property}}\"\r\n [attr.aria-label]=\"field.label! | translate\"\r\n [attr.aria-required]=\"field.required\"\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [disabled]=\"field.readonly\"\r\n [multiple]=\"field.multi || false\"\r\n [required]=\"field.readonly ? false : field.required\"\r\n [(value)]=\"field.defaultListOption\">\r\n <ng-container *ngIf=\"field.translate; else lookup_no_translation\">\r\n <mat-option\r\n *ngFor=\"let item of field.listOptions; let i = index\"\r\n [value]=\"item\">\r\n {{ friendlyName(field.label, field.property, item) | translate }}\r\n </mat-option>\r\n </ng-container>\r\n <ng-template #lookup_no_translation>\r\n <mat-option\r\n *ngFor=\"let item of field.listOptions\"\r\n [value]=\"item\">\r\n {{ getOptionValue(item) }}\r\n </mat-option>\r\n </ng-template>\r\n </mat-select>\r\n <mat-error\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'attachment'\" [formGroup]=\"formParam\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n </div>\r\n <app-attachment-uploader\r\n [acceptedTypes]=\"getAcceptedFileTypes(field)\"\r\n (fileSelected)=\"onAttachmentFileSelected($event, field)\"\r\n style=\"margin-top: 5px\">\r\n </app-attachment-uploader>\r\n </ng-container>\r\n <mat-error class=\"iq-error\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'lookup'\" [formGroup]=\"formParam\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"lookupReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <app-auto-complete\r\n [form]=\"formParam\"\r\n [field]=\"field\"\r\n [supportingAttributes]=\"supportingAttributes\"\r\n [defaultValue]=\"this.formParam.get(field.property)?.value\"\r\n (selectedValue)=\"patchLookupValue($event, field.property)\">\r\n <mat-error\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </app-auto-complete>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'currency'\" [formGroup]=\"formParam\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"currencyReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <!-- Uncomment and use the currency control when ready -->\r\n <!-- <app-currency\r\n [form]=\"formParam\"\r\n [field]=\"field\"\r\n [defaultValue]=\"this.formParam.get(field.property)?.value\"\r\n (selectedValue)=\"patchCurrencyValue($event, field.property)\">\r\n </app-currency> -->\r\n <mat-error\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'multi-select'\" [formGroup]=\"formParam\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"multiSelectReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <app-multi-auto-complete\r\n [form]=\"formParam\"\r\n [field]=\"field\"\r\n [defaultValue]=\"getMultiValue(field)\"\r\n (selectedValue)=\"patchMultiSelectValue($event, field.property)\">\r\n <mat-error\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </app-multi-auto-complete>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n\r\n <ng-container *ngSwitchCase=\"'rich-text'\" [formGroup]=\"formParam\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <!-- Uncomment and use the rich text editor when ready -->\r\n <!-- <ckeditor\r\n [editor]=\"Editor\"\r\n [disabled]=\"field.readonly\"\r\n formControlName=\"{{field.property}}\">\r\n </ckeditor> -->\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'divider'\">\r\n <mat-divider></mat-divider>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'hyper-text'\">\r\n <div>\r\n <mat-label\r\n (click)=\"getHyperTextEvent()\"\r\n class=\"hyper-link\">\r\n {{ field.label! | translate }}\r\n </mat-label>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'section-title'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <div class=\"hrdivider-mid\">\r\n <span>{{ field.label | translate }}</span>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'equation-builder'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"textReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <input class=\"app-input\" dir=\"ltr\"\r\n formControlName=\"{{ field.property }}\"\r\n matInput\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [readonly]=\"field.readonly\"\r\n [required]=\"field.required\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-describedby]=\"'error-' + field.property\">\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n <!-- <ng-container *ngSwitchCase=\"'equation-builder'\" [formGroup]=\"formParam\">-->\r\n <!-- <ng-container *ngIf=\"showField(defaults, field)\">-->\r\n <!-- <ng-container *ngIf=\"!workflowEditableField(field)\">-->\r\n <!-- <ng-container-->\r\n <!-- [ngTemplateOutlet]=\"dateReadonly\"-->\r\n <!-- [ngTemplateOutletContext]=\"{ field: field }\">-->\r\n <!-- </ng-container>-->\r\n <!-- </ng-container>-->\r\n <!-- <ng-container *ngIf=\"workflowEditableField(field)\">-->\r\n <!-- <div style=\"display: flex; width: 350%\">-->\r\n <!-- <mat-label>{{ field.label! | translate }}</mat-label>-->\r\n <!-- <mat-form-field style=\"width: 400%\" appearance=\"outline\">-->\r\n <!-- <mat-chip-grid #chipGrid>-->\r\n <!-- <ng-container *ngFor=\"let equationValue of equationValues(); let i = index\">-->\r\n <!-- <mat-chip-row (removed)=\"remove(equationValue, i)\">-->\r\n <!-- {{ equationValue }}-->\r\n <!-- <button-->\r\n <!-- matChipRemove-->\r\n <!-- [attr.aria-label]=\"'remove ' + equationValue\">-->\r\n <!-- <mat-icon>cancel</mat-icon>-->\r\n <!-- </button>-->\r\n <!-- </mat-chip-row>-->\r\n <!-- </ng-container>-->\r\n <!-- </mat-chip-grid>-->\r\n <!-- <input-->\r\n <!-- [(ngModel)]=\"currentEquationValue\"-->\r\n <!-- [matChipInputFor]=\"chipGrid\"-->\r\n <!-- [matAutocomplete]=\"auto\"-->\r\n <!-- [ngModelOptions]=\"{ standalone: true }\"-->\r\n <!-- [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"-->\r\n <!-- (matChipInputTokenEnd)=\"add($event)\"-->\r\n <!-- aria-label=\"Add equation value\" />-->\r\n <!-- <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"selected($event)\">-->\r\n <!-- <ng-container *ngFor=\"let filteredField of (equationFilteredFields() | async)\">-->\r\n <!-- <mat-option [value]=\"filteredField\">{{ filteredField }}</mat-option>-->\r\n <!-- </ng-container>-->\r\n <!-- </mat-autocomplete>-->\r\n <!-- </mat-form-field>-->\r\n <!-- </div>-->\r\n <!-- <mat-error class=\"iq-error\" *ngIf=\"showError(field.property)\" aria-live=\"assertive\">-->\r\n <!-- {{ getErrors(field.property) | translate }}-->\r\n <!-- </mat-error>-->\r\n <!-- </ng-container>-->\r\n <!-- </ng-container>-->\r\n <!-- </ng-container>-->\r\n\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </form>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n\r\n</div>\r\n<ng-template #dateReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) | date: getReadonlyDateFormat(field) }}</span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #timeReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">{{ formatTimeToDate(defaults[field.property]) | date: 'shortTime' }}</span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #phoneNumberReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #textReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\" *ngIf=\"!field.advancedFilter\"></label>\r\n <ng-container *ngIf=\"isReadonlyTextValueEmpty(defaults, field) && field.emptyReadonlyPlaceholderKey; else textReadonlyHasValue\">\r\n <span class=\"readonly-value readonly-value--empty\">{{ field.emptyReadonlyPlaceholderKey | translate }}</span>\r\n </ng-container>\r\n <ng-template #textReadonlyHasValue>\r\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\r\n </ng-template>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #textareaReadonly let-field=\"field\">\r\n <ng-container *ngIf=\"field.textFormat === 'json'; else normalText\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <div class=\"readonly-value json-viewer\">\r\n <ngx-json-viewer [json]=\"extractJsonFieldName(defaults, field.property)\" [expanded]=\"true\"></ngx-json-viewer>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-template #normalText>\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\r\n </div>\r\n </ng-template>\r\n</ng-template>\r\n\r\n<ng-template #numberReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #currencyReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #radioButtonReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">{{ translateLable(defaults[field.property]) }}</span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #richTextReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\" [innerHtml]=\"extractFieldName(defaults, field.property)\"></span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #checkboxReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">\r\n <mat-icon color=\"warn\" *ngIf=\"extractFieldName(defaults, field.property); else showNo\">done</mat-icon>\r\n <ng-template #showNo>\r\n <mat-icon color=\"warn\">close</mat-icon>\r\n </ng-template>\r\n </span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #toggleReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">\r\n <mat-icon color=\"warn\" *ngIf=\"extractFieldName(defaults, field.property); else showNo\">done</mat-icon>\r\n <ng-template #showNo>\r\n <mat-icon color=\"warn\">close</mat-icon>\r\n </ng-template>\r\n </span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #listReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\" *ngIf=\"field.translate; else noTranslate\">\r\n {{ listShowValue(defaults, field) | translate }}\r\n </span>\r\n <ng-template #noTranslate>\r\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\r\n </ng-template>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #sequenceReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #lookupReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">\r\n {{ extractFieldName(defaults, field.property)?.[translateService.getDefaultLang() === 'en' ? 'englishName' : 'arabicName'] }}\r\n </span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #amountReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">\r\n {{ extractFieldName(defaults, field.property) | currency: currency }}\r\n </span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #multiSelectReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <mat-chip-grid class=\"readonly-value chipList\">\r\n <mat-chip *ngFor=\"let filedProp of showMultiSelectValuesAsReadonly(field)\">\r\n {{ filedProp }}\r\n </mat-chip>\r\n </mat-chip-grid>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #chipListReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHTML]=\"field.label | translate\"></label>\r\n <mat-chip-listbox class=\"readonly-value chipList\">\r\n <mat-chip-option *ngFor=\"let loc of splitReadonly(extractFieldName(defaults, field.property))\"\r\n [selectable]=\"true\"\r\n color=\"warn\"\r\n [removable]=\"false\">\r\n {{ loc }}\r\n </mat-chip-option>\r\n </mat-chip-listbox>\r\n </div>\r\n</ng-template>\r\n\r\n\r\n<ng-template #readonlyView>\r\n <div class=\"row-wrapper\">\r\n <div class=\"column-wrapper\">\r\n <ng-container *ngFor=\"let row of screenFields | keyvalue\">\r\n <div class=\"row-container\">\r\n <ng-container *ngFor=\"let field of row.value\">\r\n <div class=\"field-column readonly-item\" [style.flex]=\"field.fieldSize ? ('0 0 ' + field.fieldSize + '%') : '1 1 0'\">\r\n\r\n <ng-container [ngSwitch]=\"field.type\">\r\n\r\n <ng-container *ngSwitchCase=\"'date'\">\r\n <ng-container [ngTemplateOutlet]=\"dateReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'time'\">\r\n <ng-container [ngTemplateOutlet]=\"timeReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'phone-number'\">\r\n <ng-container [ngTemplateOutlet]=\"phoneNumberReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'text'\">\r\n <ng-container [ngTemplateOutlet]=\"textReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'textarea'\">\r\n <ng-container [ngTemplateOutlet]=\"textareaReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'number'\">\r\n <ng-container [ngTemplateOutlet]=\"numberReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'currency'\">\r\n <ng-container [ngTemplateOutlet]=\"currencyReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'radio-button'\">\r\n <ng-container [ngTemplateOutlet]=\"radioButtonReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'checkbox'\">\r\n <ng-container [ngTemplateOutlet]=\"checkboxReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'toggle'\">\r\n <ng-container [ngTemplateOutlet]=\"toggleReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'status'\">\r\n <ng-container [ngTemplateOutlet]=\"checkboxReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'lookup'\">\r\n <ng-container [ngTemplateOutlet]=\"lookupReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'amount'\">\r\n <ng-container [ngTemplateOutlet]=\"amountReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'multi-select'\">\r\n <ng-container [ngTemplateOutlet]=\"multiSelectReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'chip-list'\">\r\n <ng-container [ngTemplateOutlet]=\"chipListReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'sequence'\">\r\n <ng-container [ngTemplateOutlet]=\"sequenceReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'list'\">\r\n <ng-container [ngTemplateOutlet]=\"listReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'multi-state-checkbox'\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" *ngIf=\"!field.hideLabel\" [innerHtml]=\"field.label | translate\"></label>\r\n <span class=\"readonly-value\">{{ getMultiStateReadonlySummary(field, defaults) }}</span>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'iban-text'\">\r\n <p class=\"label\">\r\n <span [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></span>\r\n <span> : </span>\r\n <span class=\"value\" [innerHtml]=\"extractFieldName(defaults, field.property)\"></span>\r\n </p>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'section-title'\">\r\n <div class=\"hrdivider-mid\">\r\n <span>{{ field.label | translate }}</span>\r\n </div>\r\n </ng-container>\r\n\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n\r\n", styles: [".main-form-canvas{display:flex;flex-direction:row;gap:10px;align-items:flex-start;justify-content:flex-start;width:100%;flex-wrap:wrap}.form-wrapper{display:flex;flex-direction:column;flex:1}.form-container{display:flex;flex-direction:column;width:100%}.row-container{display:flex;flex-direction:row;gap:20px;flex-wrap:wrap;width:100%}.field-column{display:flex;flex-direction:column;flex:1}.label-and-asterisk-container{display:flex;align-items:center;gap:4px}.optional-text{color:#9b9b9b;font-size:11px;font-weight:400;line-height:1.4}.full-width{width:100%}.readonly-item{display:flex;flex-direction:column;align-items:flex-start;gap:2px;font-size:14px;padding:4px 0;width:100%}.readonly-item .readonly-label{font-weight:500;color:#9b9b9b;font-size:14px}.readonly-item .readonly-value{font-weight:500;color:#222;word-break:break-word;font-size:14px}.readonly-item .readonly-value--empty{font-style:italic;font-weight:500;color:#6b7280}.readonly-item .json-viewer{width:100%}.readonly-item .chipList{display:flex;flex-wrap:wrap;gap:4px}.readonly-item mat-icon{font-size:18px;vertical-align:middle}.row-wrapper{display:flex;flex-direction:row;gap:20px;width:100%;flex-wrap:wrap}.column-wrapper{display:flex;flex-direction:column;width:100%;align-items:flex-start}.row-container{display:flex;flex-direction:row;gap:20px;width:100%;flex-wrap:wrap}.field-column{display:flex;flex-direction:column;min-width:50px!important}.field-row{display:flex;flex-direction:row;gap:10px;width:100%;align-items:flex-start}.field-label{flex:0 0 40%;display:flex;flex-direction:column;justify-content:center}.field-input{flex:0 0 60%;display:flex;flex-direction:column}.radio-group-custom{display:flex;flex-direction:row;flex-wrap:wrap;gap:10px}.clear-icon-button{width:40px!important;height:40px!important;min-width:40px!important;padding:8px!important;margin:0!important;margin-inline-start:4px!important;display:flex!important;align-items:center!important;justify-content:center!important;cursor:pointer!important}.clear-icon-button mat-icon{width:24px!important;height:24px!important;font-size:24px!important;line-height:24px!important;margin-top:0!important}.clear-icon-suffix{display:flex!important;align-items:center!important;align-content:center!important;height:100%!important}@media (max-width: 600px){.main-form-canvas{flex-direction:column}.row-container{flex-direction:column;gap:10px}.field-column{width:100%;flex:1 1 100%!important}.column-wrapper{align-items:center}.field-row{flex-direction:column}.field-label,.field-input{flex:1 1 100%}.radio-group-custom{flex-direction:column;gap:5px}}.custom-ngx-mat-intl-tel-input[readonly] input,.custom-ngx-mat-intl-tel-input.ngx-mat-intl-tel-input input[disabled]{pointer-events:none!important;background-color:#f5f5f5!important;color:#444!important}.custom-ngx-mat-intl-tel-input .iti__flag-container,.custom-ngx-mat-intl-tel-input .iti__selected-flag{pointer-events:none!important;opacity:.6}.custom-ngx-mat-intl-tel-input{pointer-events:none!important}@media (max-width: 960px){.row-wrapper,.row-container{flex-direction:column}.row-container{gap:15px}.field-column{flex:1 1 100%!important}}.multi-state-filter{display:flex;flex-direction:column;align-items:flex-start}.multi-state-filter__trigger{display:flex;align-items:center;justify-content:space-between;gap:4px;min-height:44px;padding:0 16px;margin:0;border:1px solid #b7b7b7;border-radius:8px;background:#fff;cursor:pointer;font-family:inherit;font-size:16px;font-weight:300;line-height:1.2;color:#000;box-sizing:border-box;width:100%}.multi-state-filter__trigger:focus-visible{outline:2px solid #0d4261;outline-offset:2px}.multi-state-filter__trigger-text{flex:1 1 auto;text-align:left;color:#000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}.multi-state-filter__trigger-text--placeholder{color:#888}.multi-state-filter__chevron{flex-shrink:0;width:24px;height:24px;font-size:24px;color:#0d4261}::ng-deep .multi-state-filter__menu-panel{max-width:320px;min-width:250px}.multi-state-filter__menu-inner{padding:4px 0}.multi-state-filter__row{display:flex;align-items:center;gap:8px;min-height:28px;max-height:34px;padding:4px 8px;box-sizing:border-box}.multi-state-filter__pill{display:inline-flex;align-items:center;justify-content:center;min-height:24px;padding:0 16px;font-size:14px;font-weight:400;line-height:1.2;white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.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: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i6.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3$1.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4$1.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: "directive", type: i9.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "directive", type: MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "component", type: MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled", "tabIndex"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { 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: MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "component", type: MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { 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$2, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { 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: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "ngmodule", type: NgxJsonViewerModule }, { kind: "component", type: i10.NgxJsonViewerComponent, selector: "ngx-json-viewer", inputs: ["json", "expanded", "depth", "_currentDepth"] }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "component", type: NgxMatIntlTelInputComponent, selector: "ngx-mat-intl-tel-input", inputs: ["preferredCountries", "enablePlaceholder", "inputPlaceholder", "cssClass", "name", "onlyCountries", "errorStateMatcher", "enableSearch", "searchPlaceholder", "describedBy", "format", "placeholder", "required", "disabled"], outputs: ["countryChanged"] }, { kind: "component", type: MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "component", type: MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { 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: MultiAutoCompleteComponent, selector: "app-multi-auto-complete", inputs: ["field", "form", "defaultValue", "pathParam", "readonly"], outputs: ["selectedValue"] }, { kind: "component", type: AutoCompleteComponent, selector: "app-auto-complete", inputs: ["field", "form", "defaultValue", "readonly", "supportingAttributes"], outputs: ["selectedValue"] }, { kind: "directive", type: MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: AttachmentUploaderComponent, selector: "app-attachment-uploader", inputs: ["acceptedTypes"], outputs: ["fileSelected"] }, { kind: "directive", type: DecimalOnlyDirective, selector: "[numbersOnly]", inputs: ["maxDecimals"] }, { kind: "directive", type: MaxDigitsDirective, selector: "[maxDigits]", inputs: ["maxDigits"] }] }); }
|
|
2740
|
+
], viewQueries: [{ propertyName: "fieldsInput", first: true, predicate: ["EquationValueInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"main-form-canvas\">\r\n <div class=\"form-wrapper\">\r\n <ng-container *ngIf=\"defaults\">\r\n <ng-container *ngIf=\"editable; else readonlyView\" class=\"form-container\">\r\n <form [formGroup]=\"formParam\" class=\"form-content\">\r\n <div class=\"form-row\">\r\n <div class=\"form-column\">\r\n <ng-container *ngFor=\"let row of screenFields | keyvalue\">\r\n <div class=\"row-container\">\r\n <ng-container *ngFor=\"let field of row.value\">\r\n <div class=\"field-column\" [style.flex]=\"field.fieldSize ? ('0 0 ' + field.fieldSize + '%') : '1 1 0'\">\r\n <ng-container [ngSwitch]=\"field.type\">\r\n <ng-container *ngSwitchCase=\"'date'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n </div>\r\n\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput\r\n [matDatepicker]=\"picker\"\r\n [min]=\"minDate\"\r\n (dateChange)=\"formParam.get(field.property).setValue($event.value)\"\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [readonly]=\"field.readonly\"\r\n [attr.tabindex]=\"field.readonly ? -1 : null\"\r\n formControlName=\"{{field.property}}\"\r\n [required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\r\n\r\n <mat-datepicker-toggle *ngIf=\"!field.readonly\" matSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n\r\n <mat-datepicker #picker\r\n [startView]=\"getView(field)\"\r\n (yearSelected)=\"setMonthAndYear($event, picker, field)\"\r\n panelClass=\"example-month-picker\">\r\n </mat-datepicker>\r\n\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'phone-number'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container class=\"custom-ngx-mat-intl-tel-input\" *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <div class=\"phone-input-wrapper\">\r\n <ngx-mat-intl-tel-input\r\n formControlName=\"{{ field.property }}\"\r\n [inputPlaceholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [preferredCountries]=\"['qa']\"\r\n [enablePlaceholder]=\"true\"\r\n [enableSearch]=\"true\"\r\n [onlyCountries]=\"getCountryCodeList()\"\r\n [required]=\"field.required\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\r\n </ngx-mat-intl-tel-input>\r\n </div>\r\n\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n\r\n <ng-container *ngSwitchCase=\"'iban-text'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"textReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <input class=\"app-input\"\r\n formControlName=\"{{ field.property }}\"\r\n matInput\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [readonly]=\"field.readonly\"\r\n [attr.tabindex]=\"field.readonly ? -1 : null\"\r\n [required]=\"field.required\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'password'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput\r\n class=\"app-input\"\r\n formControlName=\"{{ field.property }}\"\r\n [type]=\"hide && !field.disabled ? 'password' : 'text'\"\r\n [readonly]=\"field.readonly\"\r\n [attr.tabindex]=\"field.readonly ? -1 : null\"\r\n [required]=\"field.required\"\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\r\n <!-- <mat-icon matSuffix-->\r\n <!-- (click)=\"hide = !hide\">-->\r\n <!-- {{ hide ? 'visibility_off' : 'visibility' }}-->\r\n <!-- </mat-icon>-->\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'text'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"textReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <mat-icon *ngIf=\"field.showSearchIcon\" matPrefix>search</mat-icon>\r\n <input class=\"app-input\"\r\n formControlName=\"{{ field.property }}\"\r\n matInput\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [readonly]=\"field.readonly\"\r\n [attr.tabindex]=\"field.readonly ? -1 : null\"\r\n [required]=\"field.required\"\r\n (keyup)=\"fixArabicNumbers($event.target)\"\r\n [attr.aria-required]=\"field.required\"\r\n [maxDigits]=\"field.maxLength\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\r\n <span\r\n *ngIf=\"field.showSearchIcon && !field.readonly && (formParam?.get([field.property])?.value ?? '') !== ''\"\r\n matSuffix\r\n class=\"clear-icon-suffix\">\r\n <button\r\n mat-icon-button\r\n type=\"button\"\r\n class=\"clear-icon-button\"\r\n [attr.aria-label]=\"'BASE_TABLE.clearField' | translate\"\r\n (click)=\"clearFieldValue(field.property)\">\r\n <mat-icon aria-hidden=\"true\">close</mat-icon>\r\n </button>\r\n </span>\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'multi-state-checkbox'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"multi-state-filter\" [formGroup]=\"formParam\">\r\n <button\r\n type=\"button\"\r\n class=\"multi-state-filter__trigger\"\r\n [matMenuTriggerFor]=\"statusMultiMenu\"\r\n [attr.aria-haspopup]=\"true\"\r\n [attr.aria-expanded]=\"false\"\r\n [attr.aria-label]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : (field.label | translate)\">\r\n <span\r\n class=\"multi-state-filter__trigger-text\"\r\n [class.multi-state-filter__trigger-text--placeholder]=\"isMultiStateEmpty(field.property)\">\r\n {{\r\n getMultiStateFilterTriggerLabel(field)\r\n || (field.placeholder\r\n ? (labelKeyPlaceHolder(field) | translate)\r\n : ('FILTER-BUILDER.selectStatus' | translate))\r\n }}\r\n </span>\r\n <mat-icon class=\"multi-state-filter__chevron\" aria-hidden=\"true\">keyboard_arrow_down</mat-icon>\r\n </button>\r\n <mat-menu #statusMultiMenu=\"matMenu\" class=\"multi-state-filter__menu-panel\" [hasBackdrop]=\"true\">\r\n <div\r\n class=\"multi-state-filter__menu-inner\"\r\n (click)=\"$event.stopPropagation()\"\r\n (keydown)=\"onMultiStateMenuInnerKeydown($event, field)\">\r\n <div\r\n *ngFor=\"let code of field.listOptions || []\"\r\n mat-menu-item\r\n class=\"multi-state-filter__row\"\r\n [attr.data-multi-state-code]=\"code\"\r\n (click)=\"onMultiStateRowClick($event, field.property, code)\">\r\n <mat-checkbox\r\n tabindex=\"-1\"\r\n (click)=\"$event.stopPropagation()\"\r\n [checked]=\"isMultiStateSelected(field.property, code)\"\r\n (change)=\"toggleMultiStateFilter(field.property, code, $event.checked)\">\r\n </mat-checkbox>\r\n <span\r\n class=\"multi-state-filter__pill stateType\"\r\n [ngClass]=\"code\">\r\n {{ statusOptionLabelKey(field, code) | translate }}\r\n </span>\r\n </div>\r\n </div>\r\n </mat-menu>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'chip-list'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n\r\n <mat-chip-grid [attr.aria-labelledby]=\"'label-' + field.property\"\r\n formControlName=\"{{ field.property }}\">\r\n <mat-chip-row\r\n *ngFor=\"let mail of splittedChips(formParam, field.property); let idx = index\"\r\n [removable]=\"removable\"\r\n (removed)=\"removeChipsItem(formParam, field.property, idx)\">\r\n {{ mail }}\r\n <mat-icon matChipRemove *ngIf=\"removable\">cancel</mat-icon>\r\n </mat-chip-row>\r\n\r\n <input [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\r\n [matChipInputFor]=\"null\"\r\n [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\r\n [matChipInputAddOnBlur]=\"addOnBlur\"\r\n (matChipInputTokenEnd)=\"addEmailToChips($event, formParam, field.property)\">\r\n </mat-chip-grid>\r\n <mat-error id=\"error-{{ field.property }}\" *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'amount'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"amountReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <input class=\"app-input\"\r\n formControlName=\"{{ field.property }}\"\r\n matInput\r\n type=\"number\"\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [readonly]=\"field.readonly\"\r\n [attr.tabindex]=\"field.readonly ? -1 : null\"\r\n [required]=\"field.required\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'sequence'\">\r\n <ng-container\r\n *ngIf=\"referenceAttributeTrue(field.property, 'autoGenerated'); else noSequence\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <input class=\"app-input\"\r\n formControlName=\"{{ field.property }}\"\r\n matInput\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [readonly]=\"true\"\r\n [disabled]=\"true\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\">\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-template #noSequence>\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <input class=\"app-input\"\r\n formControlName=\"{{ field.property }}\"\r\n matInput\r\n [readonly]=\"false\"\r\n [disabled]=\"false\"\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [required]=\"field.required\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n </ng-template>\r\n\r\n <ng-container *ngSwitchCase=\"'textarea'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"textareaReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <textarea cdkFocusInitial\r\n formControlName=\"{{ field.property }}\"\r\n matInput\r\n cdkTextareaAutosize\r\n cdkAutosizeMinRows=\"3\"\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-required]=\"field.required\"\r\n [maxDigits]=\"field.maxLength\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\r\n [readonly]=\"field.readonly\"\r\n [attr.tabindex]=\"field.readonly ? -1 : null\"\r\n [required]=\"field.required\"></textarea>\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'number'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"numberReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <input class=\"app-input\"\r\n formControlName=\"{{ field.property }}\"\r\n matInput\r\n type=\"number\"\r\n [attr.min]=\"field.allowNegative ? null : 0\"\r\n (keydown)=\"blockNegativeNumberKeydown($event, field)\"\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [maxDigits]=\"field.maxLength\"\r\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\r\n [required]=\"field.readonly ? false : field.required\"\r\n [readonly]=\"field.readonly\"\r\n [attr.tabindex]=\"field.readonly ? -1 : null\"\r\n [pattern]=\"field.pattern\">\r\n <mat-error id=\"error-{{ field.property }}\" *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'bigdecimal'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"numberReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <input\r\n matInput\r\n type=\"text\"\r\n inputmode=\"numeric\"\r\n formControlName=\"{{ field.property }}\"\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n numbersOnly [maxDecimals]=\"field.maxDecimals\"\r\n [maxDigits]=\"field.maxLength\"\r\n [pattern]=\"field.pattern\"\r\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\r\n [required]=\"field.readonly ? false : field.required\"\r\n [readonly]=\"field.readonly\"\r\n [attr.tabindex]=\"field.readonly ? -1 : null\">\r\n <mat-error id=\"error-{{ field.property }}\" *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'time'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"timeReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <input\r\n matInput\r\n class=\"app-input\"\r\n formControlName=\"{{ field.property }}\"\r\n type=\"time\"\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [readonly]=\"field.readonly\"\r\n [attr.tabindex]=\"field.readonly ? -1 : null\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\r\n [required]=\"field.required\">\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'checkbox'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"checkboxReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <mat-checkbox\r\n appearance=\"outline\"\r\n style=\"padding-bottom: 14px; padding-top: 14px;\"\r\n [disabled]=\"field.readonly\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\r\n formControlName=\"{{ field.property }}\">\r\n {{ field.label! | translate }}\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-checkbox>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'toggle'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"toggleReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n </div>\r\n <mat-slide-toggle\r\n [disabled]=\"field.readonly\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\r\n formControlName=\"{{ field.property }}\">\r\n </mat-slide-toggle>\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'color-picker'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <div fxLayout=\"row\" fxLayoutAlign=\"center\">\r\n <h4 style=\"margin-right: 10px\">{{ field.label! | translate }}</h4>\r\n <input\r\n ejs-colorpicker\r\n type=\"color\"\r\n id=\"colorpicker\"\r\n formControlName=\"{{ field.property }}\"\r\n [attr.aria-label]=\"field.label! | translate\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\r\n />\r\n </div>\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </ng-container>\r\n </ng-container>\r\n\r\n\r\n <ng-container *ngSwitchCase=\"'radio-button'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"radioButtonReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <mat-radio-group\r\n formControlName=\"{{field.property}}\"\r\n class=\"app-radio\"\r\n [attr.aria-label]=\"field.label! | translate\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\r\n <div class=\"field-row\">\r\n <div class=\"field-label\">\r\n <span class=\"custom-label\">{{ field.label! | translate }}</span>\r\n </div>\r\n <div class=\"field-input\">\r\n <div class=\"radio-group-custom\">\r\n <mat-radio-button\r\n *ngFor=\"let option of field.listOptions\"\r\n [value]=\"option\"\r\n [attr.aria-labelledby]=\"option\">\r\n {{ option | translate }}\r\n </mat-radio-button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-radio-group>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'list'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"listReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\" style=\"width: 100%\">\r\n <mat-select\r\n formControlName=\"{{field.property}}\"\r\n [attr.aria-label]=\"field.label! | translate\"\r\n [attr.aria-required]=\"field.required\"\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\r\n [disabled]=\"field.readonly\"\r\n [multiple]=\"field.multi || false\"\r\n [required]=\"field.readonly ? false : field.required\"\r\n [(value)]=\"field.defaultListOption\">\r\n <ng-container *ngIf=\"field.translate; else lookup_no_translation\">\r\n <mat-option\r\n *ngFor=\"let item of field.listOptions; let i = index\"\r\n [value]=\"item\">\r\n {{ friendlyName(field.label, field.property, item) | translate }}\r\n </mat-option>\r\n </ng-container>\r\n <ng-template #lookup_no_translation>\r\n <mat-option\r\n *ngFor=\"let item of field.listOptions\"\r\n [value]=\"item\">\r\n {{ getOptionValue(item) }}\r\n </mat-option>\r\n </ng-template>\r\n </mat-select>\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'attachment'\" [formGroup]=\"formParam\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n </div>\r\n <app-attachment-uploader\r\n [acceptedTypes]=\"getAcceptedFileTypes(field)\"\r\n [ariaDescribedBy]=\"showError(field.property) ? 'error-' + field.property : null\"\r\n (fileSelected)=\"onAttachmentFileSelected($event, field)\"\r\n style=\"margin-top: 5px\">\r\n </app-attachment-uploader>\r\n </ng-container>\r\n <mat-error class=\"iq-error\"\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'lookup'\" [formGroup]=\"formParam\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"lookupReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <app-auto-complete\r\n [form]=\"formParam\"\r\n [field]=\"field\"\r\n [supportingAttributes]=\"supportingAttributes\"\r\n [defaultValue]=\"this.formParam.get(field.property)?.value\"\r\n (selectedValue)=\"patchLookupValue($event, field.property)\">\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </app-auto-complete>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'currency'\" [formGroup]=\"formParam\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"currencyReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <!-- Uncomment and use the currency control when ready -->\r\n <!-- <app-currency\r\n [form]=\"formParam\"\r\n [field]=\"field\"\r\n [defaultValue]=\"this.formParam.get(field.property)?.value\"\r\n (selectedValue)=\"patchCurrencyValue($event, field.property)\">\r\n </app-currency> -->\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'multi-select'\" [formGroup]=\"formParam\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"multiSelectReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <app-multi-auto-complete\r\n [form]=\"formParam\"\r\n [field]=\"field\"\r\n [defaultValue]=\"getMultiValue(field)\"\r\n (selectedValue)=\"patchMultiSelectValue($event, field.property)\">\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </app-multi-auto-complete>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n\r\n <ng-container *ngSwitchCase=\"'rich-text'\" [formGroup]=\"formParam\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <!-- Uncomment and use the rich text editor when ready -->\r\n <!-- <ckeditor\r\n [editor]=\"Editor\"\r\n [disabled]=\"field.readonly\"\r\n formControlName=\"{{field.property}}\">\r\n </ckeditor> -->\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'divider'\">\r\n <mat-divider></mat-divider>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'hyper-text'\">\r\n <div>\r\n <mat-label\r\n (click)=\"getHyperTextEvent()\"\r\n class=\"hyper-link\">\r\n {{ field.label! | translate }}\r\n </mat-label>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'section-title'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <div class=\"hrdivider-mid\">\r\n <span>{{ field.label | translate }}</span>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'equation-builder'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"textReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <input class=\"app-input\" dir=\"ltr\"\r\n formControlName=\"{{ field.property }}\"\r\n matInput\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [readonly]=\"field.readonly\"\r\n [attr.tabindex]=\"field.readonly ? -1 : null\"\r\n [required]=\"field.required\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n <!-- <ng-container *ngSwitchCase=\"'equation-builder'\" [formGroup]=\"formParam\">-->\r\n <!-- <ng-container *ngIf=\"showField(defaults, field)\">-->\r\n <!-- <ng-container *ngIf=\"!workflowEditableField(field)\">-->\r\n <!-- <ng-container-->\r\n <!-- [ngTemplateOutlet]=\"dateReadonly\"-->\r\n <!-- [ngTemplateOutletContext]=\"{ field: field }\">-->\r\n <!-- </ng-container>-->\r\n <!-- </ng-container>-->\r\n <!-- <ng-container *ngIf=\"workflowEditableField(field)\">-->\r\n <!-- <div style=\"display: flex; width: 350%\">-->\r\n <!-- <mat-label>{{ field.label! | translate }}</mat-label>-->\r\n <!-- <mat-form-field style=\"width: 400%\" appearance=\"outline\">-->\r\n <!-- <mat-chip-grid #chipGrid>-->\r\n <!-- <ng-container *ngFor=\"let equationValue of equationValues(); let i = index\">-->\r\n <!-- <mat-chip-row (removed)=\"remove(equationValue, i)\">-->\r\n <!-- {{ equationValue }}-->\r\n <!-- <button-->\r\n <!-- matChipRemove-->\r\n <!-- [attr.aria-label]=\"'remove ' + equationValue\">-->\r\n <!-- <mat-icon>cancel</mat-icon>-->\r\n <!-- </button>-->\r\n <!-- </mat-chip-row>-->\r\n <!-- </ng-container>-->\r\n <!-- </mat-chip-grid>-->\r\n <!-- <input-->\r\n <!-- [(ngModel)]=\"currentEquationValue\"-->\r\n <!-- [matChipInputFor]=\"chipGrid\"-->\r\n <!-- [matAutocomplete]=\"auto\"-->\r\n <!-- [ngModelOptions]=\"{ standalone: true }\"-->\r\n <!-- [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"-->\r\n <!-- (matChipInputTokenEnd)=\"add($event)\"-->\r\n <!-- aria-label=\"Add equation value\" />-->\r\n <!-- <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"selected($event)\">-->\r\n <!-- <ng-container *ngFor=\"let filteredField of (equationFilteredFields() | async)\">-->\r\n <!-- <mat-option [value]=\"filteredField\">{{ filteredField }}</mat-option>-->\r\n <!-- </ng-container>-->\r\n <!-- </mat-autocomplete>-->\r\n <!-- </mat-form-field>-->\r\n <!-- </div>-->\r\n <!-- <mat-error class=\"iq-error\" *ngIf=\"showError(field.property)\" aria-live=\"assertive\">-->\r\n <!-- {{ getErrors(field.property) | translate }}-->\r\n <!-- </mat-error>-->\r\n <!-- </ng-container>-->\r\n <!-- </ng-container>-->\r\n <!-- </ng-container>-->\r\n\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </form>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n\r\n</div>\r\n<ng-template #dateReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) | date: getReadonlyDateFormat(field) }}</span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #timeReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">{{ formatTimeToDate(defaults[field.property]) | date: 'shortTime' }}</span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #phoneNumberReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #textReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\" *ngIf=\"!field.advancedFilter\"></label>\r\n <ng-container *ngIf=\"isReadonlyTextValueEmpty(defaults, field) && field.emptyReadonlyPlaceholderKey; else textReadonlyHasValue\">\r\n <span class=\"readonly-value readonly-value--empty\">{{ field.emptyReadonlyPlaceholderKey | translate }}</span>\r\n </ng-container>\r\n <ng-template #textReadonlyHasValue>\r\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\r\n </ng-template>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #textareaReadonly let-field=\"field\">\r\n <ng-container *ngIf=\"field.textFormat === 'json'; else normalText\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <div class=\"readonly-value json-viewer\">\r\n <ngx-json-viewer [json]=\"extractJsonFieldName(defaults, field.property)\" [expanded]=\"true\"></ngx-json-viewer>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-template #normalText>\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\r\n </div>\r\n </ng-template>\r\n</ng-template>\r\n\r\n<ng-template #numberReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #currencyReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #radioButtonReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">{{ translateLable(defaults[field.property]) }}</span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #richTextReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\" [innerHtml]=\"extractFieldName(defaults, field.property)\"></span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #checkboxReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">\r\n <mat-icon color=\"warn\" *ngIf=\"extractFieldName(defaults, field.property); else showNo\">done</mat-icon>\r\n <ng-template #showNo>\r\n <mat-icon color=\"warn\">close</mat-icon>\r\n </ng-template>\r\n </span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #toggleReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">\r\n <mat-icon color=\"warn\" *ngIf=\"extractFieldName(defaults, field.property); else showNo\">done</mat-icon>\r\n <ng-template #showNo>\r\n <mat-icon color=\"warn\">close</mat-icon>\r\n </ng-template>\r\n </span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #listReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\" *ngIf=\"field.translate; else noTranslate\">\r\n {{ listShowValue(defaults, field) | translate }}\r\n </span>\r\n <ng-template #noTranslate>\r\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\r\n </ng-template>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #sequenceReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #lookupReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">\r\n {{ extractFieldName(defaults, field.property)?.[translateService.getDefaultLang() === 'en' ? 'englishName' : 'arabicName'] }}\r\n </span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #amountReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">\r\n {{ extractFieldName(defaults, field.property) | currency: currency }}\r\n </span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #multiSelectReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <mat-chip-grid class=\"readonly-value chipList\">\r\n <mat-chip *ngFor=\"let filedProp of showMultiSelectValuesAsReadonly(field)\">\r\n {{ filedProp }}\r\n </mat-chip>\r\n </mat-chip-grid>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #chipListReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHTML]=\"field.label | translate\"></label>\r\n <mat-chip-listbox class=\"readonly-value chipList\">\r\n <mat-chip-option *ngFor=\"let loc of splitReadonly(extractFieldName(defaults, field.property))\"\r\n [selectable]=\"true\"\r\n color=\"warn\"\r\n [removable]=\"false\">\r\n {{ loc }}\r\n </mat-chip-option>\r\n </mat-chip-listbox>\r\n </div>\r\n</ng-template>\r\n\r\n\r\n<ng-template #readonlyView>\r\n <div class=\"row-wrapper\">\r\n <div class=\"column-wrapper\">\r\n <ng-container *ngFor=\"let row of screenFields | keyvalue\">\r\n <div class=\"row-container\">\r\n <ng-container *ngFor=\"let field of row.value\">\r\n <div class=\"field-column readonly-item\" [style.flex]=\"field.fieldSize ? ('0 0 ' + field.fieldSize + '%') : '1 1 0'\">\r\n\r\n <ng-container [ngSwitch]=\"field.type\">\r\n\r\n <ng-container *ngSwitchCase=\"'date'\">\r\n <ng-container [ngTemplateOutlet]=\"dateReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'time'\">\r\n <ng-container [ngTemplateOutlet]=\"timeReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'phone-number'\">\r\n <ng-container [ngTemplateOutlet]=\"phoneNumberReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'text'\">\r\n <ng-container [ngTemplateOutlet]=\"textReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'textarea'\">\r\n <ng-container [ngTemplateOutlet]=\"textareaReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'number'\">\r\n <ng-container [ngTemplateOutlet]=\"numberReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'currency'\">\r\n <ng-container [ngTemplateOutlet]=\"currencyReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'radio-button'\">\r\n <ng-container [ngTemplateOutlet]=\"radioButtonReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'checkbox'\">\r\n <ng-container [ngTemplateOutlet]=\"checkboxReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'toggle'\">\r\n <ng-container [ngTemplateOutlet]=\"toggleReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'status'\">\r\n <ng-container [ngTemplateOutlet]=\"checkboxReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'lookup'\">\r\n <ng-container [ngTemplateOutlet]=\"lookupReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'amount'\">\r\n <ng-container [ngTemplateOutlet]=\"amountReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'multi-select'\">\r\n <ng-container [ngTemplateOutlet]=\"multiSelectReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'chip-list'\">\r\n <ng-container [ngTemplateOutlet]=\"chipListReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'sequence'\">\r\n <ng-container [ngTemplateOutlet]=\"sequenceReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'list'\">\r\n <ng-container [ngTemplateOutlet]=\"listReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'multi-state-checkbox'\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" *ngIf=\"!field.hideLabel\" [innerHtml]=\"field.label | translate\"></label>\r\n <span class=\"readonly-value\">{{ getMultiStateReadonlySummary(field, defaults) }}</span>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'iban-text'\">\r\n <p class=\"label\">\r\n <span [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></span>\r\n <span> : </span>\r\n <span class=\"value\" [innerHtml]=\"extractFieldName(defaults, field.property)\"></span>\r\n </p>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'section-title'\">\r\n <div class=\"hrdivider-mid\">\r\n <span>{{ field.label | translate }}</span>\r\n </div>\r\n </ng-container>\r\n\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n\r\n", styles: [".main-form-canvas{display:flex;flex-direction:row;gap:10px;align-items:flex-start;justify-content:flex-start;width:100%;flex-wrap:wrap}.form-wrapper{display:flex;flex-direction:column;flex:1}.form-container{display:flex;flex-direction:column;width:100%}.row-container{display:flex;flex-direction:row;gap:20px;flex-wrap:wrap;width:100%}.field-column{display:flex;flex-direction:column;flex:1}.label-and-asterisk-container{display:flex;align-items:center;gap:4px}.optional-text{color:#9b9b9b;font-size:11px;font-weight:400;line-height:1.4}.full-width{width:100%}.readonly-item{display:flex;flex-direction:column;align-items:flex-start;gap:2px;font-size:14px;padding:4px 0;width:100%}.readonly-item .readonly-label{font-weight:500;color:#9b9b9b;font-size:14px}.readonly-item .readonly-value{font-weight:500;color:#222;word-break:break-word;font-size:14px}.readonly-item .readonly-value--empty{font-style:italic;font-weight:500;color:#6b7280}.readonly-item .json-viewer{width:100%}.readonly-item .chipList{display:flex;flex-wrap:wrap;gap:4px}.readonly-item mat-icon{font-size:18px;vertical-align:middle}.row-wrapper{display:flex;flex-direction:row;gap:20px;width:100%;flex-wrap:wrap}.column-wrapper{display:flex;flex-direction:column;width:100%;align-items:flex-start}.row-container{display:flex;flex-direction:row;gap:20px;width:100%;flex-wrap:wrap}.field-column{display:flex;flex-direction:column;min-width:50px!important}.field-row{display:flex;flex-direction:row;gap:10px;width:100%;align-items:flex-start}.field-label{flex:0 0 40%;display:flex;flex-direction:column;justify-content:center}.field-input{flex:0 0 60%;display:flex;flex-direction:column}.radio-group-custom{display:flex;flex-direction:row;flex-wrap:wrap;gap:10px}.clear-icon-button{width:40px!important;height:40px!important;min-width:40px!important;padding:8px!important;margin:0!important;margin-inline-start:4px!important;display:flex!important;align-items:center!important;justify-content:center!important;cursor:pointer!important}.clear-icon-button mat-icon{width:24px!important;height:24px!important;font-size:24px!important;line-height:24px!important;margin-top:0!important}.clear-icon-suffix{display:flex!important;align-items:center!important;align-content:center!important;height:100%!important}@media (max-width: 600px){.main-form-canvas{flex-direction:column}.row-container{flex-direction:column;gap:10px}.field-column{width:100%;flex:1 1 100%!important}.column-wrapper{align-items:center}.field-row{flex-direction:column}.field-label,.field-input{flex:1 1 100%}.radio-group-custom{flex-direction:column;gap:5px}}.custom-ngx-mat-intl-tel-input[readonly] input,.custom-ngx-mat-intl-tel-input.ngx-mat-intl-tel-input input[disabled]{pointer-events:none!important;background-color:#f5f5f5!important;color:#444!important}.custom-ngx-mat-intl-tel-input .iti__flag-container,.custom-ngx-mat-intl-tel-input .iti__selected-flag{pointer-events:none!important;opacity:.6}.custom-ngx-mat-intl-tel-input{pointer-events:none!important}::ng-deep .mat-datepicker-content-container mat-calendar.example-month-picker~.mat-datepicker-close-button{display:none!important}@media (max-width: 960px){.row-wrapper,.row-container{flex-direction:column}.row-container{gap:15px}.field-column{flex:1 1 100%!important}}.multi-state-filter{display:flex;flex-direction:column;align-items:flex-start}.multi-state-filter__trigger{display:flex;align-items:center;justify-content:space-between;gap:4px;min-height:45px;padding:0 16px;margin:0;border:1px solid #b7b7b7;border-radius:8px;background:#fff;cursor:pointer;font-family:inherit;font-size:16px;font-weight:300;line-height:1.2;color:#000;box-sizing:border-box;width:100%}.multi-state-filter__trigger:focus-visible{outline:2px solid #0d4261;outline-offset:2px}.multi-state-filter__trigger-text{flex:1 1 auto;text-align:left;color:#000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}.multi-state-filter__trigger-text--placeholder{color:#888}.multi-state-filter__chevron{flex-shrink:0;width:24px;height:24px;font-size:24px;color:#0d4261}::ng-deep .multi-state-filter__menu-panel{max-width:320px;min-width:250px}.multi-state-filter__menu-inner{padding:4px 0}.multi-state-filter__row{display:flex;align-items:center;gap:8px;min-height:28px;max-height:34px;padding:4px 8px;box-sizing:border-box}.multi-state-filter__pill{display:inline-flex;align-items:center;justify-content:center;min-height:24px;padding:0 16px;font-size:14px;font-weight:400;line-height:1.2;white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.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: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i6.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3$1.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4$1.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: "directive", type: i9.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "directive", type: MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "component", type: MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled", "tabIndex"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { 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: MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "component", type: MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { 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$2, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { 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: 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: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "ngmodule", type: NgxJsonViewerModule }, { kind: "component", type: i10.NgxJsonViewerComponent, selector: "ngx-json-viewer", inputs: ["json", "expanded", "depth", "_currentDepth"] }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "component", type: NgxMatIntlTelInputComponent, selector: "ngx-mat-intl-tel-input", inputs: ["preferredCountries", "enablePlaceholder", "inputPlaceholder", "cssClass", "name", "onlyCountries", "errorStateMatcher", "enableSearch", "searchPlaceholder", "describedBy", "format", "placeholder", "required", "disabled"], outputs: ["countryChanged"] }, { kind: "component", type: MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "component", type: MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { 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: MultiAutoCompleteComponent, selector: "app-multi-auto-complete", inputs: ["field", "form", "defaultValue", "pathParam", "readonly"], outputs: ["selectedValue"] }, { kind: "component", type: AutoCompleteComponent, selector: "app-auto-complete", inputs: ["field", "form", "defaultValue", "readonly", "supportingAttributes"], outputs: ["selectedValue"] }, { kind: "directive", type: MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: AttachmentUploaderComponent, selector: "app-attachment-uploader", inputs: ["acceptedTypes", "ariaDescribedBy"], outputs: ["fileSelected"] }, { kind: "directive", type: DecimalOnlyDirective, selector: "[numbersOnly]", inputs: ["maxDecimals"] }, { kind: "directive", type: MaxDigitsDirective, selector: "[maxDigits]", inputs: ["maxDigits"] }] }); }
|
|
2625
2741
|
}
|
|
2626
2742
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BaseFormCanvasComponent, decorators: [{
|
|
2627
2743
|
type: Component,
|
|
@@ -2656,6 +2772,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
2656
2772
|
MatSelect,
|
|
2657
2773
|
MatOption$2,
|
|
2658
2774
|
MatMenu,
|
|
2775
|
+
MatMenuItem,
|
|
2659
2776
|
MatMenuTrigger,
|
|
2660
2777
|
MatDivider,
|
|
2661
2778
|
DatePipe,
|
|
@@ -2688,8 +2805,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
2688
2805
|
},
|
|
2689
2806
|
{ provide: MAT_DATE_FORMATS, useValue: DD_MM_YYYY_Format },
|
|
2690
2807
|
{ provide: MAT_DATE_LOCALE, useValue: 'en-GB' }
|
|
2691
|
-
], template: "<div class=\"main-form-canvas\">\r\n <div class=\"form-wrapper\">\r\n <ng-container *ngIf=\"defaults\">\r\n <ng-container *ngIf=\"editable; else readonlyView\" class=\"form-container\">\r\n <form [formGroup]=\"formParam\" class=\"form-content\">\r\n <div class=\"form-row\">\r\n <div class=\"form-column\">\r\n <ng-container *ngFor=\"let row of screenFields | keyvalue\">\r\n <div class=\"row-container\">\r\n <ng-container *ngFor=\"let field of row.value\">\r\n <div class=\"field-column\" [style.flex]=\"field.fieldSize ? ('0 0 ' + field.fieldSize + '%') : '1 1 0'\">\r\n <ng-container [ngSwitch]=\"field.type\">\r\n <ng-container *ngSwitchCase=\"'date'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n </div>\r\n\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput\r\n [matDatepicker]=\"picker\"\r\n [min]=\"minDate\"\r\n [value]=\"formParam.get(field.property)?.value\"\r\n (dateChange)=\"formParam.get(field.property).setValue($event.value)\"\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [readonly]=\"field.readonly\"\r\n formControlName=\"{{field.property}}\"\r\n [required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-describedby]=\"'error-' + field.property\">\r\n\r\n <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n\r\n <mat-datepicker #picker\r\n [startView]=\"getView(field)\"\r\n (yearSelected)=\"setMonthAndYear($event, picker, field)\"\r\n panelClass=\"example-month-picker\">\r\n </mat-datepicker>\r\n\r\n <mat-error *ngIf=\"showError(field.property)\" aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'phone-number'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container class=\"custom-ngx-mat-intl-tel-input\" *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <div class=\"phone-input-wrapper\">\r\n <ngx-mat-intl-tel-input\r\n formControlName=\"{{ field.property }}\"\r\n [inputPlaceholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [preferredCountries]=\"['qa']\"\r\n [enablePlaceholder]=\"true\"\r\n [enableSearch]=\"true\"\r\n [onlyCountries]=\"getCountryCodeList()\"\r\n [required]=\"field.required\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-describedby]=\"'error-' + field.property\">\r\n </ngx-mat-intl-tel-input>\r\n </div>\r\n\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n\r\n <ng-container *ngSwitchCase=\"'iban-text'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"textReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <input class=\"app-input\"\r\n formControlName=\"{{ field.property }}\"\r\n matInput\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [readonly]=\"field.readonly\"\r\n [required]=\"field.required\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-describedby]=\"'error-' + field.property\">\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'password'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput\r\n class=\"app-input\"\r\n formControlName=\"{{ field.property }}\"\r\n [type]=\"hide && !field.disabled ? 'password' : 'text'\"\r\n [readonly]=\"field.readonly\"\r\n [required]=\"field.required\"\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-describedby]=\"'error-' + field.property\">\r\n <!-- <mat-icon matSuffix-->\r\n <!-- (click)=\"hide = !hide\">-->\r\n <!-- {{ hide ? 'visibility_off' : 'visibility' }}-->\r\n <!-- </mat-icon>-->\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'text'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"textReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <mat-icon *ngIf=\"field.showSearchIcon\" matPrefix>search</mat-icon>\r\n <input class=\"app-input\"\r\n formControlName=\"{{ field.property }}\"\r\n matInput\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [readonly]=\"field.readonly\"\r\n [required]=\"field.required\"\r\n (keyup)=\"fixArabicNumbers($event.target)\"\r\n [attr.aria-required]=\"field.required\"\r\n [maxDigits]=\"field.maxLength\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-describedby]=\"'error-' + field.property\">\r\n <span\r\n *ngIf=\"field.showSearchIcon && !field.readonly && (formParam?.get([field.property])?.value ?? '') !== ''\"\r\n matSuffix\r\n class=\"clear-icon-suffix\">\r\n <button\r\n mat-icon-button\r\n type=\"button\"\r\n class=\"clear-icon-button\"\r\n (click)=\"clearFieldValue(field.property)\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </span>\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'multi-state-checkbox'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"multi-state-filter\" [formGroup]=\"formParam\">\r\n <button\r\n type=\"button\"\r\n class=\"multi-state-filter__trigger\"\r\n [matMenuTriggerFor]=\"statusMultiMenu\"\r\n [attr.aria-haspopup]=\"true\"\r\n [attr.aria-expanded]=\"false\"\r\n [attr.aria-label]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : (field.label | translate)\">\r\n <span\r\n class=\"multi-state-filter__trigger-text\"\r\n [class.multi-state-filter__trigger-text--placeholder]=\"isMultiStateEmpty(field.property)\">\r\n {{\r\n getMultiStateFilterTriggerLabel(field)\r\n || (field.placeholder\r\n ? (labelKeyPlaceHolder(field) | translate)\r\n : ('FILTER-BUILDER.selectStatus' | translate))\r\n }}\r\n </span>\r\n <mat-icon class=\"multi-state-filter__chevron\" aria-hidden=\"true\">keyboard_arrow_down</mat-icon>\r\n </button>\r\n <mat-menu #statusMultiMenu=\"matMenu\" class=\"multi-state-filter__menu-panel\" [hasBackdrop]=\"true\">\r\n <div class=\"multi-state-filter__menu-inner\" (click)=\"$event.stopPropagation()\">\r\n <div\r\n *ngFor=\"let code of field.listOptions || []\"\r\n class=\"multi-state-filter__row\">\r\n <mat-checkbox\r\n (click)=\"$event.stopPropagation()\"\r\n [checked]=\"isMultiStateSelected(field.property, code)\"\r\n (change)=\"toggleMultiStateFilter(field.property, code, $event.checked)\">\r\n </mat-checkbox>\r\n <span\r\n class=\"multi-state-filter__pill stateType\"\r\n [ngClass]=\"code\">\r\n {{ statusOptionLabelKey(field, code) | translate }}\r\n </span>\r\n </div>\r\n </div>\r\n </mat-menu>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'chip-list'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n\r\n <mat-chip-grid [attr.aria-labelledby]=\"'label-' + field.property\"\r\n formControlName=\"{{ field.property }}\">\r\n <mat-chip-row\r\n *ngFor=\"let mail of splittedChips(formParam, field.property); let idx = index\"\r\n [removable]=\"removable\"\r\n (removed)=\"removeChipsItem(formParam, field.property, idx)\">\r\n {{ mail }}\r\n <mat-icon matChipRemove *ngIf=\"removable\">cancel</mat-icon>\r\n </mat-chip-row>\r\n\r\n <input [attr.aria-labelledby]=\"'label-' + field.property\" [matChipInputFor]=\"null\"\r\n [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\r\n [matChipInputAddOnBlur]=\"addOnBlur\"\r\n (matChipInputTokenEnd)=\"addEmailToChips($event, formParam, field.property)\">\r\n </mat-chip-grid>\r\n <mat-error id=\"error-{{ field.property }}\" *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'amount'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"amountReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <input class=\"app-input\"\r\n formControlName=\"{{ field.property }}\"\r\n matInput\r\n type=\"number\"\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [readonly]=\"field.readonly\"\r\n [required]=\"field.required\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-describedby]=\"'error-' + field.property\">\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'sequence'\">\r\n <ng-container\r\n *ngIf=\"referenceAttributeTrue(field.property, 'autoGenerated'); else noSequence\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <input class=\"app-input\"\r\n formControlName=\"{{ field.property }}\"\r\n matInput\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [readonly]=\"true\"\r\n [disabled]=\"true\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\">\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-template #noSequence>\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <input class=\"app-input\"\r\n formControlName=\"{{ field.property }}\"\r\n matInput\r\n [readonly]=\"false\"\r\n [disabled]=\"false\"\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [required]=\"field.required\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-describedby]=\"'error-' + field.property\">\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n </ng-template>\r\n\r\n <ng-container *ngSwitchCase=\"'textarea'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"textareaReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <textarea cdkFocusInitial\r\n formControlName=\"{{ field.property }}\"\r\n matInput\r\n cdkTextareaAutosize\r\n cdkAutosizeMinRows=\"3\"\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-describedby]=\"'error-' + field.property\"\r\n [readonly]=\"field.readonly\"\r\n [required]=\"field.required\"></textarea>\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'number'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"numberReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <input class=\"app-input\"\r\n formControlName=\"{{ field.property }}\"\r\n matInput\r\n type=\"number\"\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [maxDigits]=\"field.maxLength\"\r\n [attr.aria-describedby]=\"'error-' + field.property\"\r\n [required]=\"field.readonly ? false : field.required\"\r\n [readonly]=\"field.readonly\"\r\n [pattern]=\"field.pattern\">\r\n <mat-error id=\"error-{{ field.property }}\" *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'bigdecimal'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"numberReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <input\r\n matInput\r\n type=\"text\"\r\n inputmode=\"numeric\"\r\n formControlName=\"{{ field.property }}\"\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n numbersOnly [maxDecimals]=\"field.maxDecimals\"\r\n [maxDigits]=\"field.maxLength\"\r\n [pattern]=\"field.pattern\"\r\n [attr.aria-describedby]=\"'error-' + field.property\"\r\n [required]=\"field.readonly ? false : field.required\"\r\n [readonly]=\"field.readonly\">\r\n <mat-error id=\"error-{{ field.property }}\" *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'time'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"timeReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <input\r\n matInput\r\n class=\"app-input\"\r\n formControlName=\"{{ field.property }}\"\r\n type=\"time\"\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [readonly]=\"field.readonly\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-describedby]=\"'error-' + field.property\"\r\n [required]=\"field.required\">\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'checkbox'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"checkboxReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <mat-checkbox\r\n appearance=\"outline\"\r\n style=\"padding-bottom: 14px; padding-top: 14px;\"\r\n [disabled]=\"field.readonly\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n formControlName=\"{{ field.property }}\">\r\n {{ field.label! | translate }}\r\n <mat-error *ngIf=\"showError(field.property)\" aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-checkbox>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'toggle'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"toggleReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n </div>\r\n <mat-slide-toggle\r\n [disabled]=\"field.readonly\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-describedby]=\"'error-' + field.property\"\r\n formControlName=\"{{ field.property }}\">\r\n </mat-slide-toggle>\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'color-picker'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <div fxLayout=\"row\" fxLayoutAlign=\"center\">\r\n <h4 style=\"margin-right: 10px\">{{ field.label! | translate }}</h4>\r\n <input\r\n ejs-colorpicker\r\n type=\"color\"\r\n id=\"colorpicker\"\r\n formControlName=\"{{ field.property }}\"\r\n [attr.aria-label]=\"field.label! | translate\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n />\r\n </div>\r\n <mat-error *ngIf=\"showError(field.property)\" aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </ng-container>\r\n </ng-container>\r\n\r\n\r\n <ng-container *ngSwitchCase=\"'radio-button'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"radioButtonReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <mat-radio-group\r\n formControlName=\"{{field.property}}\"\r\n class=\"app-radio\"\r\n [attr.aria-label]=\"field.label! | translate\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\">\r\n <div class=\"field-row\">\r\n <div class=\"field-label\">\r\n <span class=\"custom-label\">{{ field.label! | translate }}</span>\r\n </div>\r\n <div class=\"field-input\">\r\n <div class=\"radio-group-custom\">\r\n <mat-radio-button\r\n *ngFor=\"let option of field.listOptions\"\r\n [value]=\"option\"\r\n [attr.aria-labelledby]=\"option\">\r\n {{ option | translate }}\r\n </mat-radio-button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <mat-error\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-radio-group>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'list'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"listReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\" style=\"width: 100%\">\r\n <mat-select\r\n formControlName=\"{{field.property}}\"\r\n [attr.aria-label]=\"field.label! | translate\"\r\n [attr.aria-required]=\"field.required\"\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [disabled]=\"field.readonly\"\r\n [multiple]=\"field.multi || false\"\r\n [required]=\"field.readonly ? false : field.required\"\r\n [(value)]=\"field.defaultListOption\">\r\n <ng-container *ngIf=\"field.translate; else lookup_no_translation\">\r\n <mat-option\r\n *ngFor=\"let item of field.listOptions; let i = index\"\r\n [value]=\"item\">\r\n {{ friendlyName(field.label, field.property, item) | translate }}\r\n </mat-option>\r\n </ng-container>\r\n <ng-template #lookup_no_translation>\r\n <mat-option\r\n *ngFor=\"let item of field.listOptions\"\r\n [value]=\"item\">\r\n {{ getOptionValue(item) }}\r\n </mat-option>\r\n </ng-template>\r\n </mat-select>\r\n <mat-error\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'attachment'\" [formGroup]=\"formParam\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n </div>\r\n <app-attachment-uploader\r\n [acceptedTypes]=\"getAcceptedFileTypes(field)\"\r\n (fileSelected)=\"onAttachmentFileSelected($event, field)\"\r\n style=\"margin-top: 5px\">\r\n </app-attachment-uploader>\r\n </ng-container>\r\n <mat-error class=\"iq-error\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'lookup'\" [formGroup]=\"formParam\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"lookupReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <app-auto-complete\r\n [form]=\"formParam\"\r\n [field]=\"field\"\r\n [supportingAttributes]=\"supportingAttributes\"\r\n [defaultValue]=\"this.formParam.get(field.property)?.value\"\r\n (selectedValue)=\"patchLookupValue($event, field.property)\">\r\n <mat-error\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </app-auto-complete>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'currency'\" [formGroup]=\"formParam\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"currencyReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <!-- Uncomment and use the currency control when ready -->\r\n <!-- <app-currency\r\n [form]=\"formParam\"\r\n [field]=\"field\"\r\n [defaultValue]=\"this.formParam.get(field.property)?.value\"\r\n (selectedValue)=\"patchCurrencyValue($event, field.property)\">\r\n </app-currency> -->\r\n <mat-error\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'multi-select'\" [formGroup]=\"formParam\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"multiSelectReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <app-multi-auto-complete\r\n [form]=\"formParam\"\r\n [field]=\"field\"\r\n [defaultValue]=\"getMultiValue(field)\"\r\n (selectedValue)=\"patchMultiSelectValue($event, field.property)\">\r\n <mat-error\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </app-multi-auto-complete>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n\r\n <ng-container *ngSwitchCase=\"'rich-text'\" [formGroup]=\"formParam\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <!-- Uncomment and use the rich text editor when ready -->\r\n <!-- <ckeditor\r\n [editor]=\"Editor\"\r\n [disabled]=\"field.readonly\"\r\n formControlName=\"{{field.property}}\">\r\n </ckeditor> -->\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'divider'\">\r\n <mat-divider></mat-divider>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'hyper-text'\">\r\n <div>\r\n <mat-label\r\n (click)=\"getHyperTextEvent()\"\r\n class=\"hyper-link\">\r\n {{ field.label! | translate }}\r\n </mat-label>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'section-title'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <div class=\"hrdivider-mid\">\r\n <span>{{ field.label | translate }}</span>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'equation-builder'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"textReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <input class=\"app-input\" dir=\"ltr\"\r\n formControlName=\"{{ field.property }}\"\r\n matInput\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [readonly]=\"field.readonly\"\r\n [required]=\"field.required\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-describedby]=\"'error-' + field.property\">\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n <!-- <ng-container *ngSwitchCase=\"'equation-builder'\" [formGroup]=\"formParam\">-->\r\n <!-- <ng-container *ngIf=\"showField(defaults, field)\">-->\r\n <!-- <ng-container *ngIf=\"!workflowEditableField(field)\">-->\r\n <!-- <ng-container-->\r\n <!-- [ngTemplateOutlet]=\"dateReadonly\"-->\r\n <!-- [ngTemplateOutletContext]=\"{ field: field }\">-->\r\n <!-- </ng-container>-->\r\n <!-- </ng-container>-->\r\n <!-- <ng-container *ngIf=\"workflowEditableField(field)\">-->\r\n <!-- <div style=\"display: flex; width: 350%\">-->\r\n <!-- <mat-label>{{ field.label! | translate }}</mat-label>-->\r\n <!-- <mat-form-field style=\"width: 400%\" appearance=\"outline\">-->\r\n <!-- <mat-chip-grid #chipGrid>-->\r\n <!-- <ng-container *ngFor=\"let equationValue of equationValues(); let i = index\">-->\r\n <!-- <mat-chip-row (removed)=\"remove(equationValue, i)\">-->\r\n <!-- {{ equationValue }}-->\r\n <!-- <button-->\r\n <!-- matChipRemove-->\r\n <!-- [attr.aria-label]=\"'remove ' + equationValue\">-->\r\n <!-- <mat-icon>cancel</mat-icon>-->\r\n <!-- </button>-->\r\n <!-- </mat-chip-row>-->\r\n <!-- </ng-container>-->\r\n <!-- </mat-chip-grid>-->\r\n <!-- <input-->\r\n <!-- [(ngModel)]=\"currentEquationValue\"-->\r\n <!-- [matChipInputFor]=\"chipGrid\"-->\r\n <!-- [matAutocomplete]=\"auto\"-->\r\n <!-- [ngModelOptions]=\"{ standalone: true }\"-->\r\n <!-- [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"-->\r\n <!-- (matChipInputTokenEnd)=\"add($event)\"-->\r\n <!-- aria-label=\"Add equation value\" />-->\r\n <!-- <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"selected($event)\">-->\r\n <!-- <ng-container *ngFor=\"let filteredField of (equationFilteredFields() | async)\">-->\r\n <!-- <mat-option [value]=\"filteredField\">{{ filteredField }}</mat-option>-->\r\n <!-- </ng-container>-->\r\n <!-- </mat-autocomplete>-->\r\n <!-- </mat-form-field>-->\r\n <!-- </div>-->\r\n <!-- <mat-error class=\"iq-error\" *ngIf=\"showError(field.property)\" aria-live=\"assertive\">-->\r\n <!-- {{ getErrors(field.property) | translate }}-->\r\n <!-- </mat-error>-->\r\n <!-- </ng-container>-->\r\n <!-- </ng-container>-->\r\n <!-- </ng-container>-->\r\n\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </form>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n\r\n</div>\r\n<ng-template #dateReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) | date: getReadonlyDateFormat(field) }}</span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #timeReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">{{ formatTimeToDate(defaults[field.property]) | date: 'shortTime' }}</span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #phoneNumberReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #textReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\" *ngIf=\"!field.advancedFilter\"></label>\r\n <ng-container *ngIf=\"isReadonlyTextValueEmpty(defaults, field) && field.emptyReadonlyPlaceholderKey; else textReadonlyHasValue\">\r\n <span class=\"readonly-value readonly-value--empty\">{{ field.emptyReadonlyPlaceholderKey | translate }}</span>\r\n </ng-container>\r\n <ng-template #textReadonlyHasValue>\r\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\r\n </ng-template>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #textareaReadonly let-field=\"field\">\r\n <ng-container *ngIf=\"field.textFormat === 'json'; else normalText\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <div class=\"readonly-value json-viewer\">\r\n <ngx-json-viewer [json]=\"extractJsonFieldName(defaults, field.property)\" [expanded]=\"true\"></ngx-json-viewer>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-template #normalText>\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\r\n </div>\r\n </ng-template>\r\n</ng-template>\r\n\r\n<ng-template #numberReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #currencyReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #radioButtonReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">{{ translateLable(defaults[field.property]) }}</span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #richTextReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\" [innerHtml]=\"extractFieldName(defaults, field.property)\"></span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #checkboxReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">\r\n <mat-icon color=\"warn\" *ngIf=\"extractFieldName(defaults, field.property); else showNo\">done</mat-icon>\r\n <ng-template #showNo>\r\n <mat-icon color=\"warn\">close</mat-icon>\r\n </ng-template>\r\n </span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #toggleReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">\r\n <mat-icon color=\"warn\" *ngIf=\"extractFieldName(defaults, field.property); else showNo\">done</mat-icon>\r\n <ng-template #showNo>\r\n <mat-icon color=\"warn\">close</mat-icon>\r\n </ng-template>\r\n </span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #listReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\" *ngIf=\"field.translate; else noTranslate\">\r\n {{ listShowValue(defaults, field) | translate }}\r\n </span>\r\n <ng-template #noTranslate>\r\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\r\n </ng-template>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #sequenceReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #lookupReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">\r\n {{ extractFieldName(defaults, field.property)?.[translateService.getDefaultLang() === 'en' ? 'englishName' : 'arabicName'] }}\r\n </span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #amountReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">\r\n {{ extractFieldName(defaults, field.property) | currency: currency }}\r\n </span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #multiSelectReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <mat-chip-grid class=\"readonly-value chipList\">\r\n <mat-chip *ngFor=\"let filedProp of showMultiSelectValuesAsReadonly(field)\">\r\n {{ filedProp }}\r\n </mat-chip>\r\n </mat-chip-grid>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #chipListReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHTML]=\"field.label | translate\"></label>\r\n <mat-chip-listbox class=\"readonly-value chipList\">\r\n <mat-chip-option *ngFor=\"let loc of splitReadonly(extractFieldName(defaults, field.property))\"\r\n [selectable]=\"true\"\r\n color=\"warn\"\r\n [removable]=\"false\">\r\n {{ loc }}\r\n </mat-chip-option>\r\n </mat-chip-listbox>\r\n </div>\r\n</ng-template>\r\n\r\n\r\n<ng-template #readonlyView>\r\n <div class=\"row-wrapper\">\r\n <div class=\"column-wrapper\">\r\n <ng-container *ngFor=\"let row of screenFields | keyvalue\">\r\n <div class=\"row-container\">\r\n <ng-container *ngFor=\"let field of row.value\">\r\n <div class=\"field-column readonly-item\" [style.flex]=\"field.fieldSize ? ('0 0 ' + field.fieldSize + '%') : '1 1 0'\">\r\n\r\n <ng-container [ngSwitch]=\"field.type\">\r\n\r\n <ng-container *ngSwitchCase=\"'date'\">\r\n <ng-container [ngTemplateOutlet]=\"dateReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'time'\">\r\n <ng-container [ngTemplateOutlet]=\"timeReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'phone-number'\">\r\n <ng-container [ngTemplateOutlet]=\"phoneNumberReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'text'\">\r\n <ng-container [ngTemplateOutlet]=\"textReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'textarea'\">\r\n <ng-container [ngTemplateOutlet]=\"textareaReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'number'\">\r\n <ng-container [ngTemplateOutlet]=\"numberReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'currency'\">\r\n <ng-container [ngTemplateOutlet]=\"currencyReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'radio-button'\">\r\n <ng-container [ngTemplateOutlet]=\"radioButtonReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'checkbox'\">\r\n <ng-container [ngTemplateOutlet]=\"checkboxReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'toggle'\">\r\n <ng-container [ngTemplateOutlet]=\"toggleReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'status'\">\r\n <ng-container [ngTemplateOutlet]=\"checkboxReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'lookup'\">\r\n <ng-container [ngTemplateOutlet]=\"lookupReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'amount'\">\r\n <ng-container [ngTemplateOutlet]=\"amountReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'multi-select'\">\r\n <ng-container [ngTemplateOutlet]=\"multiSelectReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'chip-list'\">\r\n <ng-container [ngTemplateOutlet]=\"chipListReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'sequence'\">\r\n <ng-container [ngTemplateOutlet]=\"sequenceReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'list'\">\r\n <ng-container [ngTemplateOutlet]=\"listReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'multi-state-checkbox'\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" *ngIf=\"!field.hideLabel\" [innerHtml]=\"field.label | translate\"></label>\r\n <span class=\"readonly-value\">{{ getMultiStateReadonlySummary(field, defaults) }}</span>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'iban-text'\">\r\n <p class=\"label\">\r\n <span [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></span>\r\n <span> : </span>\r\n <span class=\"value\" [innerHtml]=\"extractFieldName(defaults, field.property)\"></span>\r\n </p>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'section-title'\">\r\n <div class=\"hrdivider-mid\">\r\n <span>{{ field.label | translate }}</span>\r\n </div>\r\n </ng-container>\r\n\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n\r\n", styles: [".main-form-canvas{display:flex;flex-direction:row;gap:10px;align-items:flex-start;justify-content:flex-start;width:100%;flex-wrap:wrap}.form-wrapper{display:flex;flex-direction:column;flex:1}.form-container{display:flex;flex-direction:column;width:100%}.row-container{display:flex;flex-direction:row;gap:20px;flex-wrap:wrap;width:100%}.field-column{display:flex;flex-direction:column;flex:1}.label-and-asterisk-container{display:flex;align-items:center;gap:4px}.optional-text{color:#9b9b9b;font-size:11px;font-weight:400;line-height:1.4}.full-width{width:100%}.readonly-item{display:flex;flex-direction:column;align-items:flex-start;gap:2px;font-size:14px;padding:4px 0;width:100%}.readonly-item .readonly-label{font-weight:500;color:#9b9b9b;font-size:14px}.readonly-item .readonly-value{font-weight:500;color:#222;word-break:break-word;font-size:14px}.readonly-item .readonly-value--empty{font-style:italic;font-weight:500;color:#6b7280}.readonly-item .json-viewer{width:100%}.readonly-item .chipList{display:flex;flex-wrap:wrap;gap:4px}.readonly-item mat-icon{font-size:18px;vertical-align:middle}.row-wrapper{display:flex;flex-direction:row;gap:20px;width:100%;flex-wrap:wrap}.column-wrapper{display:flex;flex-direction:column;width:100%;align-items:flex-start}.row-container{display:flex;flex-direction:row;gap:20px;width:100%;flex-wrap:wrap}.field-column{display:flex;flex-direction:column;min-width:50px!important}.field-row{display:flex;flex-direction:row;gap:10px;width:100%;align-items:flex-start}.field-label{flex:0 0 40%;display:flex;flex-direction:column;justify-content:center}.field-input{flex:0 0 60%;display:flex;flex-direction:column}.radio-group-custom{display:flex;flex-direction:row;flex-wrap:wrap;gap:10px}.clear-icon-button{width:40px!important;height:40px!important;min-width:40px!important;padding:8px!important;margin:0!important;margin-inline-start:4px!important;display:flex!important;align-items:center!important;justify-content:center!important;cursor:pointer!important}.clear-icon-button mat-icon{width:24px!important;height:24px!important;font-size:24px!important;line-height:24px!important;margin-top:0!important}.clear-icon-suffix{display:flex!important;align-items:center!important;align-content:center!important;height:100%!important}@media (max-width: 600px){.main-form-canvas{flex-direction:column}.row-container{flex-direction:column;gap:10px}.field-column{width:100%;flex:1 1 100%!important}.column-wrapper{align-items:center}.field-row{flex-direction:column}.field-label,.field-input{flex:1 1 100%}.radio-group-custom{flex-direction:column;gap:5px}}.custom-ngx-mat-intl-tel-input[readonly] input,.custom-ngx-mat-intl-tel-input.ngx-mat-intl-tel-input input[disabled]{pointer-events:none!important;background-color:#f5f5f5!important;color:#444!important}.custom-ngx-mat-intl-tel-input .iti__flag-container,.custom-ngx-mat-intl-tel-input .iti__selected-flag{pointer-events:none!important;opacity:.6}.custom-ngx-mat-intl-tel-input{pointer-events:none!important}@media (max-width: 960px){.row-wrapper,.row-container{flex-direction:column}.row-container{gap:15px}.field-column{flex:1 1 100%!important}}.multi-state-filter{display:flex;flex-direction:column;align-items:flex-start}.multi-state-filter__trigger{display:flex;align-items:center;justify-content:space-between;gap:4px;min-height:44px;padding:0 16px;margin:0;border:1px solid #b7b7b7;border-radius:8px;background:#fff;cursor:pointer;font-family:inherit;font-size:16px;font-weight:300;line-height:1.2;color:#000;box-sizing:border-box;width:100%}.multi-state-filter__trigger:focus-visible{outline:2px solid #0d4261;outline-offset:2px}.multi-state-filter__trigger-text{flex:1 1 auto;text-align:left;color:#000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}.multi-state-filter__trigger-text--placeholder{color:#888}.multi-state-filter__chevron{flex-shrink:0;width:24px;height:24px;font-size:24px;color:#0d4261}::ng-deep .multi-state-filter__menu-panel{max-width:320px;min-width:250px}.multi-state-filter__menu-inner{padding:4px 0}.multi-state-filter__row{display:flex;align-items:center;gap:8px;min-height:28px;max-height:34px;padding:4px 8px;box-sizing:border-box}.multi-state-filter__pill{display:inline-flex;align-items:center;justify-content:center;min-height:24px;padding:0 16px;font-size:14px;font-weight:400;line-height:1.2;white-space:nowrap}\n"] }]
|
|
2692
|
-
}], ctorParameters: () => [{ type: i2.TranslateService }, { type: i3$
|
|
2808
|
+
], template: "<div class=\"main-form-canvas\">\r\n <div class=\"form-wrapper\">\r\n <ng-container *ngIf=\"defaults\">\r\n <ng-container *ngIf=\"editable; else readonlyView\" class=\"form-container\">\r\n <form [formGroup]=\"formParam\" class=\"form-content\">\r\n <div class=\"form-row\">\r\n <div class=\"form-column\">\r\n <ng-container *ngFor=\"let row of screenFields | keyvalue\">\r\n <div class=\"row-container\">\r\n <ng-container *ngFor=\"let field of row.value\">\r\n <div class=\"field-column\" [style.flex]=\"field.fieldSize ? ('0 0 ' + field.fieldSize + '%') : '1 1 0'\">\r\n <ng-container [ngSwitch]=\"field.type\">\r\n <ng-container *ngSwitchCase=\"'date'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n </div>\r\n\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput\r\n [matDatepicker]=\"picker\"\r\n [min]=\"minDate\"\r\n (dateChange)=\"formParam.get(field.property).setValue($event.value)\"\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [readonly]=\"field.readonly\"\r\n [attr.tabindex]=\"field.readonly ? -1 : null\"\r\n formControlName=\"{{field.property}}\"\r\n [required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\r\n\r\n <mat-datepicker-toggle *ngIf=\"!field.readonly\" matSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n\r\n <mat-datepicker #picker\r\n [startView]=\"getView(field)\"\r\n (yearSelected)=\"setMonthAndYear($event, picker, field)\"\r\n panelClass=\"example-month-picker\">\r\n </mat-datepicker>\r\n\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'phone-number'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container class=\"custom-ngx-mat-intl-tel-input\" *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <div class=\"phone-input-wrapper\">\r\n <ngx-mat-intl-tel-input\r\n formControlName=\"{{ field.property }}\"\r\n [inputPlaceholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [preferredCountries]=\"['qa']\"\r\n [enablePlaceholder]=\"true\"\r\n [enableSearch]=\"true\"\r\n [onlyCountries]=\"getCountryCodeList()\"\r\n [required]=\"field.required\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\r\n </ngx-mat-intl-tel-input>\r\n </div>\r\n\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n\r\n <ng-container *ngSwitchCase=\"'iban-text'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"textReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <input class=\"app-input\"\r\n formControlName=\"{{ field.property }}\"\r\n matInput\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [readonly]=\"field.readonly\"\r\n [attr.tabindex]=\"field.readonly ? -1 : null\"\r\n [required]=\"field.required\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'password'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput\r\n class=\"app-input\"\r\n formControlName=\"{{ field.property }}\"\r\n [type]=\"hide && !field.disabled ? 'password' : 'text'\"\r\n [readonly]=\"field.readonly\"\r\n [attr.tabindex]=\"field.readonly ? -1 : null\"\r\n [required]=\"field.required\"\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\r\n <!-- <mat-icon matSuffix-->\r\n <!-- (click)=\"hide = !hide\">-->\r\n <!-- {{ hide ? 'visibility_off' : 'visibility' }}-->\r\n <!-- </mat-icon>-->\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'text'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"textReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <mat-icon *ngIf=\"field.showSearchIcon\" matPrefix>search</mat-icon>\r\n <input class=\"app-input\"\r\n formControlName=\"{{ field.property }}\"\r\n matInput\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [readonly]=\"field.readonly\"\r\n [attr.tabindex]=\"field.readonly ? -1 : null\"\r\n [required]=\"field.required\"\r\n (keyup)=\"fixArabicNumbers($event.target)\"\r\n [attr.aria-required]=\"field.required\"\r\n [maxDigits]=\"field.maxLength\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\r\n <span\r\n *ngIf=\"field.showSearchIcon && !field.readonly && (formParam?.get([field.property])?.value ?? '') !== ''\"\r\n matSuffix\r\n class=\"clear-icon-suffix\">\r\n <button\r\n mat-icon-button\r\n type=\"button\"\r\n class=\"clear-icon-button\"\r\n [attr.aria-label]=\"'BASE_TABLE.clearField' | translate\"\r\n (click)=\"clearFieldValue(field.property)\">\r\n <mat-icon aria-hidden=\"true\">close</mat-icon>\r\n </button>\r\n </span>\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'multi-state-checkbox'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"multi-state-filter\" [formGroup]=\"formParam\">\r\n <button\r\n type=\"button\"\r\n class=\"multi-state-filter__trigger\"\r\n [matMenuTriggerFor]=\"statusMultiMenu\"\r\n [attr.aria-haspopup]=\"true\"\r\n [attr.aria-expanded]=\"false\"\r\n [attr.aria-label]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : (field.label | translate)\">\r\n <span\r\n class=\"multi-state-filter__trigger-text\"\r\n [class.multi-state-filter__trigger-text--placeholder]=\"isMultiStateEmpty(field.property)\">\r\n {{\r\n getMultiStateFilterTriggerLabel(field)\r\n || (field.placeholder\r\n ? (labelKeyPlaceHolder(field) | translate)\r\n : ('FILTER-BUILDER.selectStatus' | translate))\r\n }}\r\n </span>\r\n <mat-icon class=\"multi-state-filter__chevron\" aria-hidden=\"true\">keyboard_arrow_down</mat-icon>\r\n </button>\r\n <mat-menu #statusMultiMenu=\"matMenu\" class=\"multi-state-filter__menu-panel\" [hasBackdrop]=\"true\">\r\n <div\r\n class=\"multi-state-filter__menu-inner\"\r\n (click)=\"$event.stopPropagation()\"\r\n (keydown)=\"onMultiStateMenuInnerKeydown($event, field)\">\r\n <div\r\n *ngFor=\"let code of field.listOptions || []\"\r\n mat-menu-item\r\n class=\"multi-state-filter__row\"\r\n [attr.data-multi-state-code]=\"code\"\r\n (click)=\"onMultiStateRowClick($event, field.property, code)\">\r\n <mat-checkbox\r\n tabindex=\"-1\"\r\n (click)=\"$event.stopPropagation()\"\r\n [checked]=\"isMultiStateSelected(field.property, code)\"\r\n (change)=\"toggleMultiStateFilter(field.property, code, $event.checked)\">\r\n </mat-checkbox>\r\n <span\r\n class=\"multi-state-filter__pill stateType\"\r\n [ngClass]=\"code\">\r\n {{ statusOptionLabelKey(field, code) | translate }}\r\n </span>\r\n </div>\r\n </div>\r\n </mat-menu>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'chip-list'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n\r\n <mat-chip-grid [attr.aria-labelledby]=\"'label-' + field.property\"\r\n formControlName=\"{{ field.property }}\">\r\n <mat-chip-row\r\n *ngFor=\"let mail of splittedChips(formParam, field.property); let idx = index\"\r\n [removable]=\"removable\"\r\n (removed)=\"removeChipsItem(formParam, field.property, idx)\">\r\n {{ mail }}\r\n <mat-icon matChipRemove *ngIf=\"removable\">cancel</mat-icon>\r\n </mat-chip-row>\r\n\r\n <input [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\r\n [matChipInputFor]=\"null\"\r\n [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\r\n [matChipInputAddOnBlur]=\"addOnBlur\"\r\n (matChipInputTokenEnd)=\"addEmailToChips($event, formParam, field.property)\">\r\n </mat-chip-grid>\r\n <mat-error id=\"error-{{ field.property }}\" *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'amount'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"amountReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <input class=\"app-input\"\r\n formControlName=\"{{ field.property }}\"\r\n matInput\r\n type=\"number\"\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [readonly]=\"field.readonly\"\r\n [attr.tabindex]=\"field.readonly ? -1 : null\"\r\n [required]=\"field.required\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'sequence'\">\r\n <ng-container\r\n *ngIf=\"referenceAttributeTrue(field.property, 'autoGenerated'); else noSequence\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <input class=\"app-input\"\r\n formControlName=\"{{ field.property }}\"\r\n matInput\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [readonly]=\"true\"\r\n [disabled]=\"true\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\">\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-template #noSequence>\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <input class=\"app-input\"\r\n formControlName=\"{{ field.property }}\"\r\n matInput\r\n [readonly]=\"false\"\r\n [disabled]=\"false\"\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [required]=\"field.required\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n </ng-template>\r\n\r\n <ng-container *ngSwitchCase=\"'textarea'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"textareaReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <textarea cdkFocusInitial\r\n formControlName=\"{{ field.property }}\"\r\n matInput\r\n cdkTextareaAutosize\r\n cdkAutosizeMinRows=\"3\"\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-required]=\"field.required\"\r\n [maxDigits]=\"field.maxLength\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\r\n [readonly]=\"field.readonly\"\r\n [attr.tabindex]=\"field.readonly ? -1 : null\"\r\n [required]=\"field.required\"></textarea>\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'number'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"numberReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <input class=\"app-input\"\r\n formControlName=\"{{ field.property }}\"\r\n matInput\r\n type=\"number\"\r\n [attr.min]=\"field.allowNegative ? null : 0\"\r\n (keydown)=\"blockNegativeNumberKeydown($event, field)\"\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [maxDigits]=\"field.maxLength\"\r\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\r\n [required]=\"field.readonly ? false : field.required\"\r\n [readonly]=\"field.readonly\"\r\n [attr.tabindex]=\"field.readonly ? -1 : null\"\r\n [pattern]=\"field.pattern\">\r\n <mat-error id=\"error-{{ field.property }}\" *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'bigdecimal'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"numberReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <input\r\n matInput\r\n type=\"text\"\r\n inputmode=\"numeric\"\r\n formControlName=\"{{ field.property }}\"\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n numbersOnly [maxDecimals]=\"field.maxDecimals\"\r\n [maxDigits]=\"field.maxLength\"\r\n [pattern]=\"field.pattern\"\r\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\r\n [required]=\"field.readonly ? false : field.required\"\r\n [readonly]=\"field.readonly\"\r\n [attr.tabindex]=\"field.readonly ? -1 : null\">\r\n <mat-error id=\"error-{{ field.property }}\" *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'time'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"timeReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <input\r\n matInput\r\n class=\"app-input\"\r\n formControlName=\"{{ field.property }}\"\r\n type=\"time\"\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [readonly]=\"field.readonly\"\r\n [attr.tabindex]=\"field.readonly ? -1 : null\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\r\n [required]=\"field.required\">\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'checkbox'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"checkboxReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <mat-checkbox\r\n appearance=\"outline\"\r\n style=\"padding-bottom: 14px; padding-top: 14px;\"\r\n [disabled]=\"field.readonly\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\r\n formControlName=\"{{ field.property }}\">\r\n {{ field.label! | translate }}\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-checkbox>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'toggle'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"toggleReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n </div>\r\n <mat-slide-toggle\r\n [disabled]=\"field.readonly\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\r\n formControlName=\"{{ field.property }}\">\r\n </mat-slide-toggle>\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'color-picker'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <div fxLayout=\"row\" fxLayoutAlign=\"center\">\r\n <h4 style=\"margin-right: 10px\">{{ field.label! | translate }}</h4>\r\n <input\r\n ejs-colorpicker\r\n type=\"color\"\r\n id=\"colorpicker\"\r\n formControlName=\"{{ field.property }}\"\r\n [attr.aria-label]=\"field.label! | translate\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\r\n />\r\n </div>\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </ng-container>\r\n </ng-container>\r\n\r\n\r\n <ng-container *ngSwitchCase=\"'radio-button'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"radioButtonReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <mat-radio-group\r\n formControlName=\"{{field.property}}\"\r\n class=\"app-radio\"\r\n [attr.aria-label]=\"field.label! | translate\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\r\n <div class=\"field-row\">\r\n <div class=\"field-label\">\r\n <span class=\"custom-label\">{{ field.label! | translate }}</span>\r\n </div>\r\n <div class=\"field-input\">\r\n <div class=\"radio-group-custom\">\r\n <mat-radio-button\r\n *ngFor=\"let option of field.listOptions\"\r\n [value]=\"option\"\r\n [attr.aria-labelledby]=\"option\">\r\n {{ option | translate }}\r\n </mat-radio-button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-radio-group>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'list'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"listReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\" style=\"width: 100%\">\r\n <mat-select\r\n formControlName=\"{{field.property}}\"\r\n [attr.aria-label]=\"field.label! | translate\"\r\n [attr.aria-required]=\"field.required\"\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\r\n [disabled]=\"field.readonly\"\r\n [multiple]=\"field.multi || false\"\r\n [required]=\"field.readonly ? false : field.required\"\r\n [(value)]=\"field.defaultListOption\">\r\n <ng-container *ngIf=\"field.translate; else lookup_no_translation\">\r\n <mat-option\r\n *ngFor=\"let item of field.listOptions; let i = index\"\r\n [value]=\"item\">\r\n {{ friendlyName(field.label, field.property, item) | translate }}\r\n </mat-option>\r\n </ng-container>\r\n <ng-template #lookup_no_translation>\r\n <mat-option\r\n *ngFor=\"let item of field.listOptions\"\r\n [value]=\"item\">\r\n {{ getOptionValue(item) }}\r\n </mat-option>\r\n </ng-template>\r\n </mat-select>\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'attachment'\" [formGroup]=\"formParam\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n </div>\r\n <app-attachment-uploader\r\n [acceptedTypes]=\"getAcceptedFileTypes(field)\"\r\n [ariaDescribedBy]=\"showError(field.property) ? 'error-' + field.property : null\"\r\n (fileSelected)=\"onAttachmentFileSelected($event, field)\"\r\n style=\"margin-top: 5px\">\r\n </app-attachment-uploader>\r\n </ng-container>\r\n <mat-error class=\"iq-error\"\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'lookup'\" [formGroup]=\"formParam\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"lookupReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <app-auto-complete\r\n [form]=\"formParam\"\r\n [field]=\"field\"\r\n [supportingAttributes]=\"supportingAttributes\"\r\n [defaultValue]=\"this.formParam.get(field.property)?.value\"\r\n (selectedValue)=\"patchLookupValue($event, field.property)\">\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </app-auto-complete>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'currency'\" [formGroup]=\"formParam\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"currencyReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <!-- Uncomment and use the currency control when ready -->\r\n <!-- <app-currency\r\n [form]=\"formParam\"\r\n [field]=\"field\"\r\n [defaultValue]=\"this.formParam.get(field.property)?.value\"\r\n (selectedValue)=\"patchCurrencyValue($event, field.property)\">\r\n </app-currency> -->\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'multi-select'\" [formGroup]=\"formParam\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"multiSelectReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <app-multi-auto-complete\r\n [form]=\"formParam\"\r\n [field]=\"field\"\r\n [defaultValue]=\"getMultiValue(field)\"\r\n (selectedValue)=\"patchMultiSelectValue($event, field.property)\">\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </app-multi-auto-complete>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n\r\n <ng-container *ngSwitchCase=\"'rich-text'\" [formGroup]=\"formParam\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <!-- Uncomment and use the rich text editor when ready -->\r\n <!-- <ckeditor\r\n [editor]=\"Editor\"\r\n [disabled]=\"field.readonly\"\r\n formControlName=\"{{field.property}}\">\r\n </ckeditor> -->\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'divider'\">\r\n <mat-divider></mat-divider>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'hyper-text'\">\r\n <div>\r\n <mat-label\r\n (click)=\"getHyperTextEvent()\"\r\n class=\"hyper-link\">\r\n {{ field.label! | translate }}\r\n </mat-label>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'section-title'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <div class=\"hrdivider-mid\">\r\n <span>{{ field.label | translate }}</span>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'equation-builder'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"textReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <input class=\"app-input\" dir=\"ltr\"\r\n formControlName=\"{{ field.property }}\"\r\n matInput\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [readonly]=\"field.readonly\"\r\n [attr.tabindex]=\"field.readonly ? -1 : null\"\r\n [required]=\"field.required\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n <!-- <ng-container *ngSwitchCase=\"'equation-builder'\" [formGroup]=\"formParam\">-->\r\n <!-- <ng-container *ngIf=\"showField(defaults, field)\">-->\r\n <!-- <ng-container *ngIf=\"!workflowEditableField(field)\">-->\r\n <!-- <ng-container-->\r\n <!-- [ngTemplateOutlet]=\"dateReadonly\"-->\r\n <!-- [ngTemplateOutletContext]=\"{ field: field }\">-->\r\n <!-- </ng-container>-->\r\n <!-- </ng-container>-->\r\n <!-- <ng-container *ngIf=\"workflowEditableField(field)\">-->\r\n <!-- <div style=\"display: flex; width: 350%\">-->\r\n <!-- <mat-label>{{ field.label! | translate }}</mat-label>-->\r\n <!-- <mat-form-field style=\"width: 400%\" appearance=\"outline\">-->\r\n <!-- <mat-chip-grid #chipGrid>-->\r\n <!-- <ng-container *ngFor=\"let equationValue of equationValues(); let i = index\">-->\r\n <!-- <mat-chip-row (removed)=\"remove(equationValue, i)\">-->\r\n <!-- {{ equationValue }}-->\r\n <!-- <button-->\r\n <!-- matChipRemove-->\r\n <!-- [attr.aria-label]=\"'remove ' + equationValue\">-->\r\n <!-- <mat-icon>cancel</mat-icon>-->\r\n <!-- </button>-->\r\n <!-- </mat-chip-row>-->\r\n <!-- </ng-container>-->\r\n <!-- </mat-chip-grid>-->\r\n <!-- <input-->\r\n <!-- [(ngModel)]=\"currentEquationValue\"-->\r\n <!-- [matChipInputFor]=\"chipGrid\"-->\r\n <!-- [matAutocomplete]=\"auto\"-->\r\n <!-- [ngModelOptions]=\"{ standalone: true }\"-->\r\n <!-- [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"-->\r\n <!-- (matChipInputTokenEnd)=\"add($event)\"-->\r\n <!-- aria-label=\"Add equation value\" />-->\r\n <!-- <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"selected($event)\">-->\r\n <!-- <ng-container *ngFor=\"let filteredField of (equationFilteredFields() | async)\">-->\r\n <!-- <mat-option [value]=\"filteredField\">{{ filteredField }}</mat-option>-->\r\n <!-- </ng-container>-->\r\n <!-- </mat-autocomplete>-->\r\n <!-- </mat-form-field>-->\r\n <!-- </div>-->\r\n <!-- <mat-error class=\"iq-error\" *ngIf=\"showError(field.property)\" aria-live=\"assertive\">-->\r\n <!-- {{ getErrors(field.property) | translate }}-->\r\n <!-- </mat-error>-->\r\n <!-- </ng-container>-->\r\n <!-- </ng-container>-->\r\n <!-- </ng-container>-->\r\n\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </form>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n\r\n</div>\r\n<ng-template #dateReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) | date: getReadonlyDateFormat(field) }}</span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #timeReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">{{ formatTimeToDate(defaults[field.property]) | date: 'shortTime' }}</span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #phoneNumberReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #textReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\" *ngIf=\"!field.advancedFilter\"></label>\r\n <ng-container *ngIf=\"isReadonlyTextValueEmpty(defaults, field) && field.emptyReadonlyPlaceholderKey; else textReadonlyHasValue\">\r\n <span class=\"readonly-value readonly-value--empty\">{{ field.emptyReadonlyPlaceholderKey | translate }}</span>\r\n </ng-container>\r\n <ng-template #textReadonlyHasValue>\r\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\r\n </ng-template>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #textareaReadonly let-field=\"field\">\r\n <ng-container *ngIf=\"field.textFormat === 'json'; else normalText\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <div class=\"readonly-value json-viewer\">\r\n <ngx-json-viewer [json]=\"extractJsonFieldName(defaults, field.property)\" [expanded]=\"true\"></ngx-json-viewer>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-template #normalText>\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\r\n </div>\r\n </ng-template>\r\n</ng-template>\r\n\r\n<ng-template #numberReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #currencyReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #radioButtonReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">{{ translateLable(defaults[field.property]) }}</span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #richTextReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\" [innerHtml]=\"extractFieldName(defaults, field.property)\"></span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #checkboxReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">\r\n <mat-icon color=\"warn\" *ngIf=\"extractFieldName(defaults, field.property); else showNo\">done</mat-icon>\r\n <ng-template #showNo>\r\n <mat-icon color=\"warn\">close</mat-icon>\r\n </ng-template>\r\n </span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #toggleReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">\r\n <mat-icon color=\"warn\" *ngIf=\"extractFieldName(defaults, field.property); else showNo\">done</mat-icon>\r\n <ng-template #showNo>\r\n <mat-icon color=\"warn\">close</mat-icon>\r\n </ng-template>\r\n </span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #listReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\" *ngIf=\"field.translate; else noTranslate\">\r\n {{ listShowValue(defaults, field) | translate }}\r\n </span>\r\n <ng-template #noTranslate>\r\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\r\n </ng-template>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #sequenceReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #lookupReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">\r\n {{ extractFieldName(defaults, field.property)?.[translateService.getDefaultLang() === 'en' ? 'englishName' : 'arabicName'] }}\r\n </span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #amountReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">\r\n {{ extractFieldName(defaults, field.property) | currency: currency }}\r\n </span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #multiSelectReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <mat-chip-grid class=\"readonly-value chipList\">\r\n <mat-chip *ngFor=\"let filedProp of showMultiSelectValuesAsReadonly(field)\">\r\n {{ filedProp }}\r\n </mat-chip>\r\n </mat-chip-grid>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #chipListReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHTML]=\"field.label | translate\"></label>\r\n <mat-chip-listbox class=\"readonly-value chipList\">\r\n <mat-chip-option *ngFor=\"let loc of splitReadonly(extractFieldName(defaults, field.property))\"\r\n [selectable]=\"true\"\r\n color=\"warn\"\r\n [removable]=\"false\">\r\n {{ loc }}\r\n </mat-chip-option>\r\n </mat-chip-listbox>\r\n </div>\r\n</ng-template>\r\n\r\n\r\n<ng-template #readonlyView>\r\n <div class=\"row-wrapper\">\r\n <div class=\"column-wrapper\">\r\n <ng-container *ngFor=\"let row of screenFields | keyvalue\">\r\n <div class=\"row-container\">\r\n <ng-container *ngFor=\"let field of row.value\">\r\n <div class=\"field-column readonly-item\" [style.flex]=\"field.fieldSize ? ('0 0 ' + field.fieldSize + '%') : '1 1 0'\">\r\n\r\n <ng-container [ngSwitch]=\"field.type\">\r\n\r\n <ng-container *ngSwitchCase=\"'date'\">\r\n <ng-container [ngTemplateOutlet]=\"dateReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'time'\">\r\n <ng-container [ngTemplateOutlet]=\"timeReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'phone-number'\">\r\n <ng-container [ngTemplateOutlet]=\"phoneNumberReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'text'\">\r\n <ng-container [ngTemplateOutlet]=\"textReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'textarea'\">\r\n <ng-container [ngTemplateOutlet]=\"textareaReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'number'\">\r\n <ng-container [ngTemplateOutlet]=\"numberReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'currency'\">\r\n <ng-container [ngTemplateOutlet]=\"currencyReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'radio-button'\">\r\n <ng-container [ngTemplateOutlet]=\"radioButtonReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'checkbox'\">\r\n <ng-container [ngTemplateOutlet]=\"checkboxReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'toggle'\">\r\n <ng-container [ngTemplateOutlet]=\"toggleReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'status'\">\r\n <ng-container [ngTemplateOutlet]=\"checkboxReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'lookup'\">\r\n <ng-container [ngTemplateOutlet]=\"lookupReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'amount'\">\r\n <ng-container [ngTemplateOutlet]=\"amountReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'multi-select'\">\r\n <ng-container [ngTemplateOutlet]=\"multiSelectReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'chip-list'\">\r\n <ng-container [ngTemplateOutlet]=\"chipListReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'sequence'\">\r\n <ng-container [ngTemplateOutlet]=\"sequenceReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'list'\">\r\n <ng-container [ngTemplateOutlet]=\"listReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'multi-state-checkbox'\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" *ngIf=\"!field.hideLabel\" [innerHtml]=\"field.label | translate\"></label>\r\n <span class=\"readonly-value\">{{ getMultiStateReadonlySummary(field, defaults) }}</span>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'iban-text'\">\r\n <p class=\"label\">\r\n <span [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></span>\r\n <span> : </span>\r\n <span class=\"value\" [innerHtml]=\"extractFieldName(defaults, field.property)\"></span>\r\n </p>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'section-title'\">\r\n <div class=\"hrdivider-mid\">\r\n <span>{{ field.label | translate }}</span>\r\n </div>\r\n </ng-container>\r\n\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n\r\n", styles: [".main-form-canvas{display:flex;flex-direction:row;gap:10px;align-items:flex-start;justify-content:flex-start;width:100%;flex-wrap:wrap}.form-wrapper{display:flex;flex-direction:column;flex:1}.form-container{display:flex;flex-direction:column;width:100%}.row-container{display:flex;flex-direction:row;gap:20px;flex-wrap:wrap;width:100%}.field-column{display:flex;flex-direction:column;flex:1}.label-and-asterisk-container{display:flex;align-items:center;gap:4px}.optional-text{color:#9b9b9b;font-size:11px;font-weight:400;line-height:1.4}.full-width{width:100%}.readonly-item{display:flex;flex-direction:column;align-items:flex-start;gap:2px;font-size:14px;padding:4px 0;width:100%}.readonly-item .readonly-label{font-weight:500;color:#9b9b9b;font-size:14px}.readonly-item .readonly-value{font-weight:500;color:#222;word-break:break-word;font-size:14px}.readonly-item .readonly-value--empty{font-style:italic;font-weight:500;color:#6b7280}.readonly-item .json-viewer{width:100%}.readonly-item .chipList{display:flex;flex-wrap:wrap;gap:4px}.readonly-item mat-icon{font-size:18px;vertical-align:middle}.row-wrapper{display:flex;flex-direction:row;gap:20px;width:100%;flex-wrap:wrap}.column-wrapper{display:flex;flex-direction:column;width:100%;align-items:flex-start}.row-container{display:flex;flex-direction:row;gap:20px;width:100%;flex-wrap:wrap}.field-column{display:flex;flex-direction:column;min-width:50px!important}.field-row{display:flex;flex-direction:row;gap:10px;width:100%;align-items:flex-start}.field-label{flex:0 0 40%;display:flex;flex-direction:column;justify-content:center}.field-input{flex:0 0 60%;display:flex;flex-direction:column}.radio-group-custom{display:flex;flex-direction:row;flex-wrap:wrap;gap:10px}.clear-icon-button{width:40px!important;height:40px!important;min-width:40px!important;padding:8px!important;margin:0!important;margin-inline-start:4px!important;display:flex!important;align-items:center!important;justify-content:center!important;cursor:pointer!important}.clear-icon-button mat-icon{width:24px!important;height:24px!important;font-size:24px!important;line-height:24px!important;margin-top:0!important}.clear-icon-suffix{display:flex!important;align-items:center!important;align-content:center!important;height:100%!important}@media (max-width: 600px){.main-form-canvas{flex-direction:column}.row-container{flex-direction:column;gap:10px}.field-column{width:100%;flex:1 1 100%!important}.column-wrapper{align-items:center}.field-row{flex-direction:column}.field-label,.field-input{flex:1 1 100%}.radio-group-custom{flex-direction:column;gap:5px}}.custom-ngx-mat-intl-tel-input[readonly] input,.custom-ngx-mat-intl-tel-input.ngx-mat-intl-tel-input input[disabled]{pointer-events:none!important;background-color:#f5f5f5!important;color:#444!important}.custom-ngx-mat-intl-tel-input .iti__flag-container,.custom-ngx-mat-intl-tel-input .iti__selected-flag{pointer-events:none!important;opacity:.6}.custom-ngx-mat-intl-tel-input{pointer-events:none!important}::ng-deep .mat-datepicker-content-container mat-calendar.example-month-picker~.mat-datepicker-close-button{display:none!important}@media (max-width: 960px){.row-wrapper,.row-container{flex-direction:column}.row-container{gap:15px}.field-column{flex:1 1 100%!important}}.multi-state-filter{display:flex;flex-direction:column;align-items:flex-start}.multi-state-filter__trigger{display:flex;align-items:center;justify-content:space-between;gap:4px;min-height:45px;padding:0 16px;margin:0;border:1px solid #b7b7b7;border-radius:8px;background:#fff;cursor:pointer;font-family:inherit;font-size:16px;font-weight:300;line-height:1.2;color:#000;box-sizing:border-box;width:100%}.multi-state-filter__trigger:focus-visible{outline:2px solid #0d4261;outline-offset:2px}.multi-state-filter__trigger-text{flex:1 1 auto;text-align:left;color:#000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}.multi-state-filter__trigger-text--placeholder{color:#888}.multi-state-filter__chevron{flex-shrink:0;width:24px;height:24px;font-size:24px;color:#0d4261}::ng-deep .multi-state-filter__menu-panel{max-width:320px;min-width:250px}.multi-state-filter__menu-inner{padding:4px 0}.multi-state-filter__row{display:flex;align-items:center;gap:8px;min-height:28px;max-height:34px;padding:4px 8px;box-sizing:border-box}.multi-state-filter__pill{display:inline-flex;align-items:center;justify-content:center;min-height:24px;padding:0 16px;font-size:14px;font-weight:400;line-height:1.2;white-space:nowrap}\n"] }]
|
|
2809
|
+
}], ctorParameters: () => [{ type: i2.TranslateService }, { type: i3$3.ActivatedRoute }, { type: BackendService }, { type: i3.FormBuilder }, { type: i2$1.LiveAnnouncer }], propDecorators: { pageInfo: [{
|
|
2693
2810
|
type: Input
|
|
2694
2811
|
}], currency: [{
|
|
2695
2812
|
type: Input
|
|
@@ -2769,6 +2886,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
2769
2886
|
|
|
2770
2887
|
class FilterBuilderComponent {
|
|
2771
2888
|
constructor() {
|
|
2889
|
+
this.liveAnnouncer = inject(LiveAnnouncer);
|
|
2890
|
+
this.translate = inject(TranslateService);
|
|
2772
2891
|
this.pendingFilters = [];
|
|
2773
2892
|
this.showExportButton = false;
|
|
2774
2893
|
this.filters = [];
|
|
@@ -2871,6 +2990,8 @@ class FilterBuilderComponent {
|
|
|
2871
2990
|
setTimeout(() => {
|
|
2872
2991
|
this.doSearch();
|
|
2873
2992
|
this.applyFilter.emit();
|
|
2993
|
+
const msg = this.translate.instant('BASE_TABLE.filterApplied');
|
|
2994
|
+
void this.liveAnnouncer.announce(msg, 'polite');
|
|
2874
2995
|
}, 0);
|
|
2875
2996
|
}
|
|
2876
2997
|
scheduleAutoApply() {
|
|
@@ -3032,7 +3153,7 @@ class FilterBuilderComponent {
|
|
|
3032
3153
|
return options.length === 0 || !options.every((code) => selected.includes(code));
|
|
3033
3154
|
}
|
|
3034
3155
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FilterBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3035
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FilterBuilderComponent, isStandalone: true, selector: "app-filter-builder", inputs: { columns: "columns", isChecked: "isChecked", filterFields: "filterFields", pageInfo: "pageInfo", pendingFilters: "pendingFilters", showExportButton: "showExportButton" }, outputs: { filterInformation: "filterInformation", isEmpty: "isEmpty", applyFilter: "applyFilter", sortByClicked: "sortByClicked", exportClicked: "exportClicked" }, host: { listeners: { "keydown": "onKeyDown($event)" } }, ngImport: i0, template: "<div class=\"main-filter-builder\">\r\n\r\n <!-- Desktop View -->\r\n <div class=\"filterForm desktop-view\">\r\n <div class=\"filterForm__row\">\r\n <div class=\"filterForm__col\">\r\n <app-field-filter\r\n [editable]=\"isEditable()\"\r\n [filter]=\"filter\"\r\n [pageInfo]=\"pageInfo\"\r\n *ngIf=\"isEditable()\"\r\n [filterFields]=\"filterFields\"\r\n [filterResetNonce]=\"filterResetNonce\"\r\n (filterFieldInformation)=\"formChanges($event)\"\r\n class=\"filterForm__filed-filter\"\r\n >\r\n </app-field-filter>\r\n </div>\r\n <div class=\"button-group\">\r\n <button\r\n mat-flat-button\r\n class=\"btn-apply-filter\"\r\n type=\"button\"\r\n (click)=\"onClearFilters()\">\r\n <div class=\"button-text\">\r\n <mat-icon>clear_all</mat-icon>\r\n <span>{{ 'FILTER-BUILDER.clearFilters' | translate }}</span>\r\n </div>\r\n </button>\r\n <button\r\n mat-flat-button\r\n class=\"btn-apply-filter\"\r\n type=\"button\"\r\n (click)=\"onApplyFilter()\">\r\n <div class=\"button-text\">\r\n <mat-icon>filter_list</mat-icon>\r\n <span>{{ 'FILTER-BUILDER.applyFilter' | translate }}</span>\r\n </div>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Mobile View -->\r\n <div class=\"mobile-view\">\r\n <!-- Mobile Row 1: Search Field and Export Button -->\r\n <div class=\"mobile-search-row\">\r\n <div class=\"mobile-search-field\">\r\n <app-field-filter\r\n [editable]=\"isEditable()\"\r\n [filter]=\"filter\"\r\n [pageInfo]=\"pageInfo\"\r\n *ngIf=\"isEditable()\"\r\n [filterFields]=\"filterFields\"\r\n [filterResetNonce]=\"filterResetNonce\"\r\n (filterFieldInformation)=\"formChanges($event)\"\r\n class=\"mobile-field-filter\"\r\n >\r\n </app-field-filter>\r\n </div>\r\n <button\r\n *ngIf=\"showExportButton\"\r\n mat-flat-button\r\n class=\"btn-export-mobile\"\r\n [matMenuTriggerFor]=\"exportMenu\">\r\n <div class=\"button-content\">\r\n <mat-icon>file_export</mat-icon>\r\n <mat-icon class=\"arrow-icon\">keyboard_arrow_down</mat-icon>\r\n </div>\r\n </button>\r\n <mat-menu #exportMenu=\"matMenu\">\r\n <button mat-menu-item (click)=\"onExportClick('pdf')\">PDF</button>\r\n <button mat-menu-item (click)=\"onExportClick('xlsx')\">Excel</button>\r\n <button mat-menu-item (click)=\"onExportClick('csv')\">CSV</button>\r\n </mat-menu>\r\n </div>\r\n\r\n <!-- Mobile Row 2: Filter By and Sort By Buttons -->\r\n <div class=\"mobile-filter-row\">\r\n <button\r\n mat-flat-button\r\n class=\"btn-filter-by btn-filter-by--icon-only\"\r\n type=\"button\"\r\n (click)=\"onClearFilters()\"\r\n [attr.aria-label]=\"'FILTER-BUILDER.clearFilters' | translate\">\r\n <div class=\"button-content\">\r\n <mat-icon>delete_sweep</mat-icon>\r\n </div>\r\n </button>\r\n <button\r\n mat-flat-button\r\n class=\"btn-filter-by\"\r\n type=\"button\"\r\n (click)=\"onApplyFilter()\">\r\n <div class=\"button-content\">\r\n <mat-icon>filter_list</mat-icon>\r\n <span>{{ 'FILTER-BUILDER.applyFilter' | translate }}</span>\r\n </div>\r\n </button>\r\n <button\r\n mat-flat-button\r\n class=\"btn-sort-by\"\r\n type=\"button\"\r\n [matMenuTriggerFor]=\"sortMenu\">\r\n <div class=\"button-content\">\r\n <mat-icon>unfold_more</mat-icon>\r\n <span>{{ 'FILTER-BUILDER.sortBy' | translate }}</span>\r\n <mat-icon class=\"arrow-icon\">keyboard_arrow_down</mat-icon>\r\n </div>\r\n </button>\r\n <mat-menu #sortMenu=\"matMenu\">\r\n <button\r\n *ngFor=\"let column of getSortableColumns()\"\r\n mat-menu-item\r\n (click)=\"onSortByClick(column.property)\">\r\n {{ labelKey(column) | translate }}\r\n </button>\r\n <button\r\n *ngIf=\"getSortableColumns().length === 0\"\r\n mat-menu-item\r\n disabled>\r\n {{ 'FILTER-BUILDER.noSortableColumns' | translate }}\r\n </button>\r\n </mat-menu>\r\n </div>\r\n </div>\r\n\r\n<!-- <div *ngIf=\"checkIsEmpty()\" class=\"line-top\">-->\r\n<!-- <mat-divider></mat-divider>-->\r\n<!-- </div>-->\r\n\r\n<!-- <div class=\"line-bottom\">-->\r\n<!-- <mat-divider></mat-divider>-->\r\n<!-- </div>-->\r\n\r\n<!-- <div class=\"action\">-->\r\n<!-- <button class=\"btn-none-background-primary action__clear\" mat-button (click)=\"deleteAll()\">-->\r\n<!-- {{'FILTER-BUILDER.clearAllFilters' | translate}}-->\r\n<!-- </button>-->\r\n<!-- <button class=\"btn-background-primary\" mat-button (click)=\"doSearch()\">-->\r\n<!-- {{'FILTER-BUILDER.search' | translate}}-->\r\n<!-- </button>-->\r\n<!-- </div>-->\r\n</div>\r\n", styles: [".main-filter-builder{width:100%;max-width:100%;box-sizing:border-box;flex:1 1 auto;min-width:0;display:flex;align-items:center;overflow:visible;min-height:48px;margin-bottom:7px}.main-filter-builder .filterForm{display:flex;width:100%;max-width:100%;box-sizing:border-box;align-items:center}.main-filter-builder .filterForm__row{display:flex;align-items:center;gap:16px;margin:0;flex-wrap:nowrap;width:100%;max-width:100%;box-sizing:border-box;min-width:0}.main-filter-builder .filterForm__col{flex:1 1 auto;min-width:0;max-width:none;width:auto}.main-filter-builder .filterForm__filed-filter{margin:0!important}.main-filter-builder .filterForm__filed-filter ::ng-deep .main-form-canvas{display:flex!important;flex-direction:row!important;align-items:center!important;margin-top:0!important;width:100%!important;flex-wrap:nowrap!important;gap:16px!important}.main-filter-builder .filterForm__filed-filter ::ng-deep .form-wrapper{display:flex!important;flex-direction:row!important;align-items:center!important;flex:1 1 auto!important;width:100%!important;min-width:0!important}.main-filter-builder .filterForm__filed-filter ::ng-deep .form-content{width:100%!important;display:flex!important;flex-direction:row!important;align-items:center!important}.main-filter-builder .filterForm__filed-filter ::ng-deep .form-row{display:flex!important;gap:16px;align-items:center;flex-wrap:nowrap;width:100%!important}.main-filter-builder .filterForm__filed-filter ::ng-deep .form-column{flex:0 0 auto;width:100%}.main-filter-builder .filterForm__filed-filter ::ng-deep .row-container{display:flex;gap:16px;align-items:center;flex-wrap:nowrap;width:auto}.main-filter-builder .filterForm__filed-filter ::ng-deep .field-column{flex:0 0 auto;width:auto}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field{width:auto!important;margin:0!important;overflow:visible!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-mdc-form-field-infix{min-height:44px!important;padding:0 16px!important;display:flex!important;align-items:center!important;border-top:none!important;overflow:visible!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-mdc-form-field-input-control{height:44px!important;font-weight:300!important;font-size:16px!important;line-height:1.2!important;color:#000!important;overflow:visible!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-mdc-form-field-outline{border:1px solid #b7b7b7!important;border-radius:8px!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-mdc-form-field-icon-prefix{padding-right:4px!important;display:flex!important;align-items:center!important;justify-content:center!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-mdc-form-field-icon-prefix mat-icon{font-size:24px!important;width:10px!important;height:28px!important;color:#0d4261!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-mdc-form-field-icon-suffix{padding-left:4px!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-mdc-form-field-icon-suffix mat-icon{font-size:24px!important;width:24px!important;height:24px!important;color:#0d4261!important;margin-top:6px}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field input::placeholder{color:#888!important;font-weight:300!important;font-size:16px!important;line-height:1.2!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-mdc-select{font-weight:300!important;font-size:16px!important;line-height:1.2!important;color:#888!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-datepicker-toggle .mat-icon-button{width:24px!important;height:24px!important;padding:0!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-datepicker-toggle .mat-icon-button mat-icon{font-size:24px!important;width:24px!important;height:24px!important;color:#0d4261}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{height:0!important;min-height:0!important;margin:0!important;padding:0!important}.main-filter-builder .filterForm .action-filter{flex:0 0 auto}.main-filter-builder .filterForm .action-filter .edit-design{margin:auto}.main-filter-builder .filterForm .action-filter .edit-design__add-button{background:#fff!important;color:var(--primary-color)!important;height:48px;width:48px;border-radius:5px;border:#D9D9D9 solid 1px;margin:30px 0 0}.main-filter-builder .filterForm .action-filter .edit-design__add-button__add-button-text{margin:0 5px}.main-filter-builder .line-top mat-divider{width:98%;margin:0 auto 10px}.main-filter-builder .advanced-button{display:flex;flex-wrap:wrap;gap:8px}.main-filter-builder .advanced-button .view{background:#e3fbff!important;border:1px solid #00ABC8!important;border-radius:6px!important;margin:10px 0;padding:6px 8px;height:32px;margin-top:0!important;display:flex;align-items:center;gap:6px}.main-filter-builder .advanced-button .view__filed{margin-top:-3px;display:inline-block;color:#1c355e;font-weight:400;font-size:14px;line-height:16px;font-style:normal;text-align:center!important}.main-filter-builder .advanced-button .view__close{margin-left:6px}.main-filter-builder .advanced-button .view__close__icon{color:#1c355e;font-size:14px;cursor:pointer;display:inline-block}.main-filter-builder .line-bottom mat-divider{width:98%;margin:0 auto 10px}.main-filter-builder .action{justify-content:end;padding:5px 10px 10px}.main-filter-builder .action__clear{border:none!important;margin:0 5px}@media (max-width: 599.98px){.main-filter-builder .filterForm__row{flex-wrap:wrap}.main-filter-builder .filterForm .action-filter .edit-design__add-button{width:100%;height:45px;margin:5px 5px 10px}}@media (min-width: 600px){.main-filter-builder .add-text-responsive{display:none}}.main-filter-builder .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;min-width:0!important;max-width:none!important}.main-filter-builder .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}.main-filter-builder .btn-apply-filter .button-text{display:flex;align-items:center;justify-content:center;gap:4px;width:100%}.main-filter-builder .btn-apply-filter mat-icon{font-size:24px;width:24px;height:30px;color:#0d4261}.main-filter-builder .btn-apply-filter span{font-family:Lusail,sans-serif;font-weight:500;font-size:16px;line-height:1.2;color:#0d4261;white-space:nowrap}.main-filter-builder .btn-apply-filter:hover{background:#fafafa!important}.main-filter-builder .mobile-view{display:none;flex-direction:column;gap:8px;width:100%;box-sizing:border-box}.main-filter-builder .mobile-filter-row{display:flex;align-items:center;gap:8px;width:100%;box-sizing:border-box}.main-filter-builder .btn-filter-by,.main-filter-builder .btn-sort-by{background:#fff!important;border:1px solid #3e627b!important;border-radius:8px!important;height:40px!important;flex:1 1 0!important;min-width:0!important;padding:0 16px!important;box-shadow:none!important;display:flex!important;align-items:center!important;justify-content:center!important;cursor:pointer!important}.main-filter-builder .btn-filter-by .button-content,.main-filter-builder .btn-sort-by .button-content{display:flex;align-items:center;justify-content:center;gap:4px;width:100%}.main-filter-builder .btn-filter-by mat-icon,.main-filter-builder .btn-sort-by mat-icon{font-size:24px;width:24px;height:28px;color:#0d4261}.main-filter-builder .btn-filter-by span,.main-filter-builder .btn-sort-by span{font-family:Lusail,sans-serif;font-weight:500;font-size:16px;line-height:1;color:#0d4261;white-space:nowrap}.main-filter-builder .btn-filter-by:hover,.main-filter-builder .btn-sort-by:hover{background:#fafafa!important}.main-filter-builder .btn-sort-by{border:1px solid #0d4261!important}.main-filter-builder .btn-sort-by .sort-icons{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;height:24px;width:24px;flex-shrink:0}.main-filter-builder .btn-sort-by .sort-icons .sort-arrow-up,.main-filter-builder .btn-sort-by .sort-icons .sort-arrow-down{font-size:16px;width:16px;height:8px;line-height:8px;margin:0;color:#0d4261}.main-filter-builder .btn-sort-by .sort-icons .sort-arrow-up{margin-bottom:-2px}.main-filter-builder .btn-sort-by .sort-icons .sort-arrow-down{margin-top:-2px}.main-filter-builder .btn-sort-by .arrow-icon{font-size:16px;width:16px;height:16px;margin-left:auto}.main-filter-builder .btn-filter-by.btn-filter-by--icon-only{flex:0 0 44px!important;min-width:44px!important;max-width:48px!important;padding:0 6px!important}.main-filter-builder .mobile-search-row{display:flex;align-items:flex-start;gap:8px;width:100%;box-sizing:border-box}.main-filter-builder .mobile-search-field{flex:1;min-width:0;width:100%;max-width:none}.main-filter-builder .btn-export-mobile{background:transparent!important;border:none!important;border-radius:8px!important;height:40px!important;width:60px!important;padding:0!important;box-shadow:none!important;display:flex!important;align-items:center!important;justify-content:center!important;cursor:pointer!important;flex-shrink:0!important}.main-filter-builder .btn-export-mobile .button-content{display:flex;align-items:center;justify-content:center;gap:4px;width:100%}.main-filter-builder .btn-export-mobile mat-icon{font-size:24px;width:24px;height:24px;color:#0d4261}.main-filter-builder .btn-export-mobile .arrow-icon{font-size:16px;width:16px;height:16px}.main-filter-builder .btn-export-mobile:hover{background:#fafafa!important}.main-filter-builder .mobile-field-filter{margin:0!important;width:100%!important}.main-filter-builder .mobile-field-filter ::ng-deep .main-form-canvas{display:flex!important;flex-direction:row!important;align-items:center!important;margin-top:0!important;width:100%!important;flex-wrap:nowrap!important;gap:0!important}.main-filter-builder .mobile-field-filter ::ng-deep .form-wrapper{display:flex!important;flex-direction:row!important;align-items:center!important;flex:1 1 auto!important;width:100%!important;min-width:0!important}.main-filter-builder .mobile-field-filter ::ng-deep .form-content{width:100%!important;align-items:center!important}.main-filter-builder .mobile-field-filter ::ng-deep .field-column:has(.multi-state-filter){display:none!important}.main-filter-builder .mobile-field-filter ::ng-deep mat-form-field{width:100%!important;margin:0!important;overflow:visible!important}.main-filter-builder .mobile-field-filter ::ng-deep mat-form-field .mat-mdc-form-field-infix{min-height:40px!important;padding:0 16px!important;display:flex!important;align-items:center!important;border-top:none!important;overflow:visible!important}.main-filter-builder .mobile-field-filter ::ng-deep mat-form-field .mat-mdc-form-field-input-control{height:40px!important;font-weight:300!important;font-size:16px!important;line-height:1.2!important;color:#000!important;overflow:visible!important}.main-filter-builder .mobile-field-filter ::ng-deep mat-form-field .mat-mdc-form-field-outline{border:1px solid #b7b7b7!important;border-radius:8px!important}.main-filter-builder .mobile-field-filter ::ng-deep mat-form-field .mat-mdc-form-field-icon-prefix{padding-right:4px!important;display:flex!important;align-items:center!important;justify-content:center!important}.main-filter-builder .mobile-field-filter ::ng-deep mat-form-field .mat-mdc-form-field-icon-prefix mat-icon{font-size:24px!important;width:24px!important;height:24px!important;color:#0d4261!important}.main-filter-builder .mobile-field-filter ::ng-deep mat-form-field input::placeholder{color:#888!important;font-weight:300!important;font-size:16px!important;line-height:1.2!important}@media (max-width: 768px){.main-filter-builder .desktop-view{display:none!important}.main-filter-builder .mobile-view{display:flex!important}.main-filter-builder .mobile-field-filter ::ng-deep .field-column:has(mat-select),.main-filter-builder .mobile-field-filter ::ng-deep .field-column:has(.multi-state-filter){display:none!important}.main-filter-builder .mobile-field-filter ::ng-deep .field-column mat-form-field:has(mat-select){display:none!important}.main-filter-builder .mobile-field-filter ::ng-deep mat-form-field:has(mat-select){display:none!important}}@media (min-width: 769px){.main-filter-builder .desktop-view{display:flex!important}.main-filter-builder .mobile-view{display:none!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: "component", type: FieldFilterComponent, selector: "app-field-filter", inputs: ["filter", "pageInfo", "filterFields", "item", "editable", "filterResetNonce"], outputs: ["selectedValue", "filterFieldInformation"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { 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: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }] }); }
|
|
3156
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FilterBuilderComponent, isStandalone: true, selector: "app-filter-builder", inputs: { columns: "columns", isChecked: "isChecked", filterFields: "filterFields", pageInfo: "pageInfo", pendingFilters: "pendingFilters", showExportButton: "showExportButton" }, outputs: { filterInformation: "filterInformation", isEmpty: "isEmpty", applyFilter: "applyFilter", sortByClicked: "sortByClicked", exportClicked: "exportClicked" }, host: { listeners: { "keydown": "onKeyDown($event)" } }, ngImport: i0, template: "<div class=\"main-filter-builder\">\r\n\r\n <!-- Desktop View -->\r\n <div class=\"filterForm desktop-view\">\r\n <div class=\"filterForm__row\">\r\n <div class=\"filterForm__col\">\r\n <app-field-filter\r\n [editable]=\"isEditable()\"\r\n [filter]=\"filter\"\r\n [pageInfo]=\"pageInfo\"\r\n *ngIf=\"isEditable()\"\r\n [filterFields]=\"filterFields\"\r\n [filterResetNonce]=\"filterResetNonce\"\r\n (filterFieldInformation)=\"formChanges($event)\"\r\n class=\"filterForm__filed-filter\"\r\n >\r\n </app-field-filter>\r\n </div>\r\n <div class=\"button-group\">\r\n <button\r\n mat-flat-button\r\n class=\"btn-apply-filter\"\r\n type=\"button\"\r\n (click)=\"onClearFilters()\">\r\n <div class=\"button-text\">\r\n <mat-icon>clear_all</mat-icon>\r\n <span>{{ 'FILTER-BUILDER.clearFilters' | translate }}</span>\r\n </div>\r\n </button>\r\n <button\r\n mat-flat-button\r\n class=\"btn-apply-filter\"\r\n type=\"button\"\r\n (click)=\"onApplyFilter()\">\r\n <div class=\"button-text\">\r\n <mat-icon>filter_list</mat-icon>\r\n <span>{{ 'FILTER-BUILDER.applyFilter' | translate }}</span>\r\n </div>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Mobile View -->\r\n <div class=\"mobile-view\">\r\n <!-- Mobile Row 1: Search Field and Export Button -->\r\n <div class=\"mobile-search-row\">\r\n <div class=\"mobile-search-field\">\r\n <app-field-filter\r\n [editable]=\"isEditable()\"\r\n [filter]=\"filter\"\r\n [pageInfo]=\"pageInfo\"\r\n *ngIf=\"isEditable()\"\r\n [filterFields]=\"filterFields\"\r\n [filterResetNonce]=\"filterResetNonce\"\r\n (filterFieldInformation)=\"formChanges($event)\"\r\n class=\"mobile-field-filter\"\r\n >\r\n </app-field-filter>\r\n </div>\r\n <button\r\n *ngIf=\"showExportButton\"\r\n mat-flat-button\r\n class=\"btn-export-mobile\"\r\n [matMenuTriggerFor]=\"exportMenu\">\r\n <div class=\"button-content\">\r\n <mat-icon>file_export</mat-icon>\r\n <mat-icon class=\"arrow-icon\">keyboard_arrow_down</mat-icon>\r\n </div>\r\n </button>\r\n <mat-menu #exportMenu=\"matMenu\">\r\n <button mat-menu-item (click)=\"onExportClick('pdf')\">PDF</button>\r\n <button mat-menu-item (click)=\"onExportClick('xlsx')\">Excel</button>\r\n <button mat-menu-item (click)=\"onExportClick('csv')\">CSV</button>\r\n </mat-menu>\r\n </div>\r\n\r\n <!-- Mobile Row 2: Filter By and Sort By Buttons -->\r\n <div class=\"mobile-filter-row\">\r\n <button\r\n mat-flat-button\r\n class=\"btn-filter-by btn-filter-by--icon-only\"\r\n type=\"button\"\r\n (click)=\"onClearFilters()\"\r\n [attr.aria-label]=\"'FILTER-BUILDER.clearFilters' | translate\">\r\n <div class=\"button-content\">\r\n <mat-icon>delete_sweep</mat-icon>\r\n </div>\r\n </button>\r\n <button\r\n mat-flat-button\r\n class=\"btn-filter-by\"\r\n type=\"button\"\r\n (click)=\"onApplyFilter()\">\r\n <div class=\"button-content\">\r\n <mat-icon>filter_list</mat-icon>\r\n <span>{{ 'FILTER-BUILDER.applyFilter' | translate }}</span>\r\n </div>\r\n </button>\r\n <button\r\n mat-flat-button\r\n class=\"btn-sort-by\"\r\n type=\"button\"\r\n [matMenuTriggerFor]=\"sortMenu\">\r\n <div class=\"button-content\">\r\n <mat-icon>unfold_more</mat-icon>\r\n <span>{{ 'FILTER-BUILDER.sortBy' | translate }}</span>\r\n <mat-icon class=\"arrow-icon\">keyboard_arrow_down</mat-icon>\r\n </div>\r\n </button>\r\n <mat-menu #sortMenu=\"matMenu\">\r\n <button\r\n *ngFor=\"let column of getSortableColumns()\"\r\n mat-menu-item\r\n (click)=\"onSortByClick(column.property)\">\r\n {{ labelKey(column) | translate }}\r\n </button>\r\n <button\r\n *ngIf=\"getSortableColumns().length === 0\"\r\n mat-menu-item\r\n disabled>\r\n {{ 'FILTER-BUILDER.noSortableColumns' | translate }}\r\n </button>\r\n </mat-menu>\r\n </div>\r\n </div>\r\n\r\n<!-- <div *ngIf=\"checkIsEmpty()\" class=\"line-top\">-->\r\n<!-- <mat-divider></mat-divider>-->\r\n<!-- </div>-->\r\n\r\n<!-- <div class=\"line-bottom\">-->\r\n<!-- <mat-divider></mat-divider>-->\r\n<!-- </div>-->\r\n\r\n<!-- <div class=\"action\">-->\r\n<!-- <button class=\"btn-none-background-primary action__clear\" mat-button (click)=\"deleteAll()\">-->\r\n<!-- {{'FILTER-BUILDER.clearAllFilters' | translate}}-->\r\n<!-- </button>-->\r\n<!-- <button class=\"btn-background-primary\" mat-button (click)=\"doSearch()\">-->\r\n<!-- {{'FILTER-BUILDER.search' | translate}}-->\r\n<!-- </button>-->\r\n<!-- </div>-->\r\n</div>\r\n", styles: [".main-filter-builder{width:100%;max-width:100%;box-sizing:border-box;flex:1 1 auto;min-width:0;display:flex;align-items:center;overflow:visible;min-height:48px;margin-bottom:7px}.main-filter-builder .filterForm{display:flex;width:100%;max-width:100%;box-sizing:border-box;align-items:center}.main-filter-builder .filterForm__row{display:flex;align-items:center;gap:16px;margin:0;flex-wrap:nowrap;width:100%;max-width:100%;box-sizing:border-box;min-width:0}.main-filter-builder .filterForm__col{flex:1 1 auto;min-width:0;max-width:none;width:auto}.main-filter-builder .filterForm__filed-filter{margin:0!important}.main-filter-builder .filterForm__filed-filter ::ng-deep .main-form-canvas{display:flex!important;flex-direction:row!important;align-items:center!important;margin-top:0!important;width:100%!important;flex-wrap:nowrap!important;gap:16px!important}.main-filter-builder .filterForm__filed-filter ::ng-deep .form-wrapper{display:flex!important;flex-direction:row!important;align-items:center!important;flex:1 1 auto!important;width:100%!important;min-width:0!important}.main-filter-builder .filterForm__filed-filter ::ng-deep .form-content{width:100%!important;display:flex!important;flex-direction:row!important;align-items:center!important}.main-filter-builder .filterForm__filed-filter ::ng-deep .form-row{display:flex!important;gap:16px;align-items:center;flex-wrap:nowrap;width:100%!important}.main-filter-builder .filterForm__filed-filter ::ng-deep .form-column{flex:0 0 auto;width:100%}.main-filter-builder .filterForm__filed-filter ::ng-deep .row-container{display:flex;gap:16px;align-items:center;flex-wrap:nowrap;width:auto}.main-filter-builder .filterForm__filed-filter ::ng-deep .field-column{flex:0 0 auto;width:auto}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field{width:auto!important;margin:0!important;overflow:visible!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-mdc-form-field-infix{min-height:44px!important;padding:0 16px!important;display:flex!important;align-items:center!important;border-top:none!important;overflow:visible!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-mdc-form-field-input-control{height:44px!important;font-weight:300!important;font-size:16px!important;line-height:1.2!important;color:#000!important;overflow:visible!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-mdc-form-field-outline{border:1px solid #b7b7b7!important;border-radius:8px!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-mdc-form-field-icon-prefix{padding-right:4px!important;display:flex!important;align-items:center!important;justify-content:center!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-mdc-form-field-icon-prefix mat-icon{font-size:24px!important;width:10px!important;height:28px!important;color:#0d4261!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-mdc-form-field-icon-suffix{padding-left:4px!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-mdc-form-field-icon-suffix mat-icon{font-size:24px!important;width:24px!important;height:24px!important;color:#0d4261!important;margin-top:6px}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field input::placeholder{color:#888!important;font-weight:300!important;font-size:16px!important;line-height:1.2!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-mdc-select{font-weight:300!important;font-size:16px!important;line-height:1.2!important;color:#888!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-datepicker-toggle .mat-icon-button{width:24px!important;height:24px!important;padding:0!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-datepicker-toggle .mat-icon-button mat-icon{font-size:24px!important;width:24px!important;height:24px!important;color:#0d4261}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{height:0!important;min-height:0!important;margin:0!important;padding:0!important}.main-filter-builder .filterForm .action-filter{flex:0 0 auto}.main-filter-builder .filterForm .action-filter .edit-design{margin:auto}.main-filter-builder .filterForm .action-filter .edit-design__add-button{background:#fff!important;color:var(--primary-color)!important;height:48px;width:48px;border-radius:5px;border:#D9D9D9 solid 1px;margin:30px 0 0}.main-filter-builder .filterForm .action-filter .edit-design__add-button__add-button-text{margin:0 5px}.main-filter-builder .line-top mat-divider{width:98%;margin:0 auto 10px}.main-filter-builder .advanced-button{display:flex;flex-wrap:wrap;gap:8px}.main-filter-builder .advanced-button .view{background:#e3fbff!important;border:1px solid #00ABC8!important;border-radius:6px!important;margin:10px 0;padding:6px 8px;height:32px;margin-top:0!important;display:flex;align-items:center;gap:6px}.main-filter-builder .advanced-button .view__filed{margin-top:-3px;display:inline-block;color:#1c355e;font-weight:400;font-size:14px;line-height:16px;font-style:normal;text-align:center!important}.main-filter-builder .advanced-button .view__close{margin-left:6px}.main-filter-builder .advanced-button .view__close__icon{color:#1c355e;font-size:14px;cursor:pointer;display:inline-block}.main-filter-builder .line-bottom mat-divider{width:98%;margin:0 auto 10px}.main-filter-builder .action{justify-content:end;padding:5px 10px 10px}.main-filter-builder .action__clear{border:none!important;margin:0 5px}@media (max-width: 599.98px){.main-filter-builder .filterForm__row{flex-wrap:wrap}.main-filter-builder .filterForm .action-filter .edit-design__add-button{width:100%;height:45px;margin:5px 5px 10px}}@media (min-width: 600px){.main-filter-builder .add-text-responsive{display:none}}.main-filter-builder .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;min-width:0!important;max-width:none!important}.main-filter-builder .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}.main-filter-builder .btn-apply-filter .button-text{display:flex;align-items:center;justify-content:center;gap:4px;width:100%}.main-filter-builder .btn-apply-filter mat-icon{font-size:24px;width:24px;height:30px;color:#0d4261}.main-filter-builder .btn-apply-filter span{font-family:Lusail,sans-serif;font-weight:500;font-size:16px;line-height:1.2;color:#0d4261;white-space:nowrap}.main-filter-builder .btn-apply-filter:hover{background:#fafafa!important}.main-filter-builder .mobile-view{display:none;flex-direction:column;gap:8px;width:100%;box-sizing:border-box}.main-filter-builder .mobile-filter-row{display:flex;align-items:center;gap:8px;width:100%;box-sizing:border-box}.main-filter-builder .btn-filter-by,.main-filter-builder .btn-sort-by{background:#fff!important;border:1px solid #3e627b!important;border-radius:8px!important;height:40px!important;flex:1 1 0!important;min-width:0!important;padding:0 16px!important;box-shadow:none!important;display:flex!important;align-items:center!important;justify-content:center!important;cursor:pointer!important}.main-filter-builder .btn-filter-by .button-content,.main-filter-builder .btn-sort-by .button-content{display:flex;align-items:center;justify-content:center;gap:4px;width:100%}.main-filter-builder .btn-filter-by mat-icon,.main-filter-builder .btn-sort-by mat-icon{font-size:24px;width:24px;height:28px;color:#0d4261}.main-filter-builder .btn-filter-by span,.main-filter-builder .btn-sort-by span{font-family:Lusail,sans-serif;font-weight:500;font-size:16px;line-height:1;color:#0d4261;white-space:nowrap}.main-filter-builder .btn-filter-by:hover,.main-filter-builder .btn-sort-by:hover{background:#fafafa!important}.main-filter-builder .btn-sort-by{border:1px solid #0d4261!important}.main-filter-builder .btn-sort-by .sort-icons{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;height:24px;width:24px;flex-shrink:0}.main-filter-builder .btn-sort-by .sort-icons .sort-arrow-up,.main-filter-builder .btn-sort-by .sort-icons .sort-arrow-down{font-size:16px;width:16px;height:8px;line-height:8px;margin:0;color:#0d4261}.main-filter-builder .btn-sort-by .sort-icons .sort-arrow-up{margin-bottom:-2px}.main-filter-builder .btn-sort-by .sort-icons .sort-arrow-down{margin-top:-2px}.main-filter-builder .btn-sort-by .arrow-icon{font-size:16px;width:16px;height:16px;margin-left:auto}.main-filter-builder .btn-filter-by.btn-filter-by--icon-only{flex:0 0 44px!important;min-width:44px!important;max-width:48px!important;padding:0 6px!important}.main-filter-builder .mobile-search-row{display:flex;align-items:flex-start;gap:8px;width:100%;box-sizing:border-box}.main-filter-builder .mobile-search-field{flex:1;min-width:0;width:100%;max-width:none}.main-filter-builder .btn-export-mobile{background:transparent!important;border:none!important;border-radius:8px!important;height:40px!important;width:60px!important;padding:0!important;box-shadow:none!important;display:flex!important;align-items:center!important;justify-content:center!important;cursor:pointer!important;flex-shrink:0!important}.main-filter-builder .btn-export-mobile .button-content{display:flex;align-items:center;justify-content:center;gap:4px;width:100%}.main-filter-builder .btn-export-mobile mat-icon{font-size:24px;width:24px;height:24px;color:#0d4261}.main-filter-builder .btn-export-mobile .arrow-icon{font-size:16px;width:16px;height:16px}.main-filter-builder .btn-export-mobile:hover{background:#fafafa!important}.main-filter-builder .mobile-field-filter{margin:0!important;width:100%!important}.main-filter-builder .mobile-field-filter ::ng-deep .main-form-canvas{display:flex!important;flex-direction:row!important;align-items:center!important;margin-top:0!important;width:100%!important;flex-wrap:nowrap!important;gap:0!important}.main-filter-builder .mobile-field-filter ::ng-deep .form-wrapper{display:flex!important;flex-direction:row!important;align-items:center!important;flex:1 1 auto!important;width:100%!important;min-width:0!important}.main-filter-builder .mobile-field-filter ::ng-deep .form-content{width:100%!important;align-items:center!important}.main-filter-builder .mobile-field-filter ::ng-deep .field-column:has(.multi-state-filter){display:none!important}.main-filter-builder .mobile-field-filter ::ng-deep mat-form-field{width:100%!important;margin:0!important;overflow:visible!important}.main-filter-builder .mobile-field-filter ::ng-deep mat-form-field .mat-mdc-form-field-infix{min-height:40px!important;padding:0 16px!important;display:flex!important;align-items:center!important;border-top:none!important;overflow:visible!important}.main-filter-builder .mobile-field-filter ::ng-deep mat-form-field .mat-mdc-form-field-input-control{height:40px!important;font-weight:300!important;font-size:16px!important;line-height:1.2!important;color:#000!important;overflow:visible!important}.main-filter-builder .mobile-field-filter ::ng-deep mat-form-field .mat-mdc-form-field-outline{border:1px solid #b7b7b7!important;border-radius:8px!important}.main-filter-builder .mobile-field-filter ::ng-deep mat-form-field .mat-mdc-form-field-icon-prefix{padding-right:4px!important;display:flex!important;align-items:center!important;justify-content:center!important}.main-filter-builder .mobile-field-filter ::ng-deep mat-form-field .mat-mdc-form-field-icon-prefix mat-icon{font-size:24px!important;width:24px!important;height:24px!important;color:#0d4261!important}.main-filter-builder .mobile-field-filter ::ng-deep mat-form-field input::placeholder{color:#888!important;font-weight:300!important;font-size:16px!important;line-height:1.2!important}@media (max-width: 768px){.main-filter-builder .desktop-view{display:none!important}.main-filter-builder .mobile-view{display:flex!important}.main-filter-builder .mobile-field-filter ::ng-deep .field-column:has(mat-select),.main-filter-builder .mobile-field-filter ::ng-deep .field-column:has(.multi-state-filter){display:none!important}.main-filter-builder .mobile-field-filter ::ng-deep .field-column mat-form-field:has(mat-select){display:none!important}.main-filter-builder .mobile-field-filter ::ng-deep mat-form-field:has(mat-select){display:none!important}}@media (min-width: 769px){.main-filter-builder .desktop-view{display:flex!important}.main-filter-builder .mobile-view{display:none!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: "component", type: FieldFilterComponent, selector: "app-field-filter", inputs: ["filter", "pageInfo", "filterFields", "item", "editable", "filterResetNonce"], outputs: ["selectedValue", "filterFieldInformation"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i7.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }] }); }
|
|
3036
3157
|
}
|
|
3037
3158
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FilterBuilderComponent, decorators: [{
|
|
3038
3159
|
type: Component,
|
|
@@ -3075,13 +3196,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
3075
3196
|
}] } });
|
|
3076
3197
|
|
|
3077
3198
|
class BaseTableComponent extends BaseUtils {
|
|
3078
|
-
constructor(backendService, translateService, shareDataService, securityManager, router) {
|
|
3199
|
+
constructor(backendService, translateService, shareDataService, breakpointObserver, securityManager, router, liveAnnouncer) {
|
|
3079
3200
|
super();
|
|
3080
3201
|
this.backendService = backendService;
|
|
3081
3202
|
this.translateService = translateService;
|
|
3082
3203
|
this.shareDataService = shareDataService;
|
|
3204
|
+
this.breakpointObserver = breakpointObserver;
|
|
3083
3205
|
this.securityManager = securityManager;
|
|
3084
3206
|
this.router = router;
|
|
3207
|
+
this.liveAnnouncer = liveAnnouncer;
|
|
3085
3208
|
this.types = ["pdf", "csv", "xlsx"];
|
|
3086
3209
|
this.collection = { count: 60, data: [] };
|
|
3087
3210
|
this.config = {
|
|
@@ -3148,7 +3271,6 @@ class BaseTableComponent extends BaseUtils {
|
|
|
3148
3271
|
this.dataSource = new MatTableDataSource();
|
|
3149
3272
|
this.columns = [];
|
|
3150
3273
|
this.filterRequest = new FilterRequest();
|
|
3151
|
-
this.initializeMobilePageSize();
|
|
3152
3274
|
effect(() => {
|
|
3153
3275
|
if (this.pageInfo.lazyLoadData !== true || this.enforceRefresh === true) {
|
|
3154
3276
|
this.loadData();
|
|
@@ -3166,19 +3288,19 @@ class BaseTableComponent extends BaseUtils {
|
|
|
3166
3288
|
this.pagesCount = this.totalPagesCount;
|
|
3167
3289
|
this.pageIndex = this.currentPageIndex;
|
|
3168
3290
|
}
|
|
3169
|
-
this.initializeMobilePageSize();
|
|
3170
3291
|
this.mobileDisplayedItems = this.pageSize;
|
|
3171
|
-
|
|
3172
|
-
|
|
3173
|
-
|
|
3174
|
-
|
|
3175
|
-
|
|
3176
|
-
|
|
3177
|
-
this.pageSize = this.mobilePageSize;
|
|
3178
|
-
if (this.reportRequest?.filterRequest) {
|
|
3179
|
-
this.reportRequest.filterRequest.pageSize = this.mobilePageSize;
|
|
3292
|
+
this.breakpointObserver
|
|
3293
|
+
.observe(['(max-width: 768px)'])
|
|
3294
|
+
.subscribe(result => {
|
|
3295
|
+
if (result.matches) {
|
|
3296
|
+
this.pageSize = 2;
|
|
3297
|
+
this.loadData();
|
|
3180
3298
|
}
|
|
3181
|
-
|
|
3299
|
+
else {
|
|
3300
|
+
this.pageSize = 10;
|
|
3301
|
+
this.loadData();
|
|
3302
|
+
}
|
|
3303
|
+
});
|
|
3182
3304
|
}
|
|
3183
3305
|
onPageChange(event) {
|
|
3184
3306
|
this.pageIndex = event;
|
|
@@ -3233,6 +3355,29 @@ class BaseTableComponent extends BaseUtils {
|
|
|
3233
3355
|
direction: NEW_DIRECTION
|
|
3234
3356
|
});
|
|
3235
3357
|
}
|
|
3358
|
+
onSortHeaderKeydown(event, columnProp) {
|
|
3359
|
+
if (!this.getColumn(columnProp)?.enableSorting) {
|
|
3360
|
+
return;
|
|
3361
|
+
}
|
|
3362
|
+
if (event.key === 'Enter' || event.key === ' ') {
|
|
3363
|
+
event.preventDefault();
|
|
3364
|
+
this.handleSortClick(columnProp);
|
|
3365
|
+
}
|
|
3366
|
+
}
|
|
3367
|
+
/** aria-sort on sortable column headers (WCAG table semantics). */
|
|
3368
|
+
getColumnAriaSort(columnProp) {
|
|
3369
|
+
if (!this.getColumn(columnProp)?.enableSorting) {
|
|
3370
|
+
return null;
|
|
3371
|
+
}
|
|
3372
|
+
const d = this.getSortDirection(columnProp);
|
|
3373
|
+
if (d === 'asc') {
|
|
3374
|
+
return 'ascending';
|
|
3375
|
+
}
|
|
3376
|
+
if (d === 'desc') {
|
|
3377
|
+
return 'descending';
|
|
3378
|
+
}
|
|
3379
|
+
return 'none';
|
|
3380
|
+
}
|
|
3236
3381
|
getNext(pageIndex) {
|
|
3237
3382
|
this.reportRequest.filterRequest.pageIndex = pageIndex;
|
|
3238
3383
|
this.reportRequest.filterRequest.pageSize = this.pageSize;
|
|
@@ -3257,7 +3402,7 @@ class BaseTableComponent extends BaseUtils {
|
|
|
3257
3402
|
loadData(skipMobileReset = false) {
|
|
3258
3403
|
clearTimeout(this.timer);
|
|
3259
3404
|
if (!skipMobileReset) {
|
|
3260
|
-
this.initializeMobilePageSize();
|
|
3405
|
+
// this.initializeMobilePageSize();
|
|
3261
3406
|
}
|
|
3262
3407
|
if (!this.reportRequest.filterRequest) {
|
|
3263
3408
|
this.reportRequest.filterRequest = new FilterRequest(this.pageSize || this.pageInfo.pageSize);
|
|
@@ -3270,6 +3415,7 @@ class BaseTableComponent extends BaseUtils {
|
|
|
3270
3415
|
this.reportRequest.filterRequest.pageSize = this.pageSize;
|
|
3271
3416
|
if (this.separateEndpointData || !this.pageInfo.apiUri || this.pageInfo.apiUri.length === 0) {
|
|
3272
3417
|
this.dataSource.data = this.separateEndpointData;
|
|
3418
|
+
queueMicrotask(() => this.announceTableResults());
|
|
3273
3419
|
}
|
|
3274
3420
|
else if (this.reportRequest == undefined) {
|
|
3275
3421
|
return;
|
|
@@ -3297,11 +3443,21 @@ class BaseTableComponent extends BaseUtils {
|
|
|
3297
3443
|
this.config.totalItems = responseEnvelope.totalSize || 0;
|
|
3298
3444
|
this.config.currentPage = this.pageIndex + 1;
|
|
3299
3445
|
this.mobileDisplayedItems = this.dataSource.data.length;
|
|
3446
|
+
queueMicrotask(() => this.announceTableResults());
|
|
3300
3447
|
}
|
|
3301
3448
|
});
|
|
3302
3449
|
}, 300);
|
|
3303
3450
|
}
|
|
3304
3451
|
}
|
|
3452
|
+
announceTableResults() {
|
|
3453
|
+
const visible = this.dataSource?.data?.length ?? 0;
|
|
3454
|
+
const total = this.totalElements ?? visible;
|
|
3455
|
+
const message = this.translateService.instant('BASE_TABLE.resultsAnnouncement', {
|
|
3456
|
+
visible,
|
|
3457
|
+
total,
|
|
3458
|
+
});
|
|
3459
|
+
void this.liveAnnouncer.announce(message, 'polite');
|
|
3460
|
+
}
|
|
3305
3461
|
getStatusDescription(element) {
|
|
3306
3462
|
return this.backendService.getStatusDescription(element, this.usedWorkflow);
|
|
3307
3463
|
}
|
|
@@ -3313,6 +3469,7 @@ class BaseTableComponent extends BaseUtils {
|
|
|
3313
3469
|
this.dataSource.data = changes["customizedData"].currentValue?.data || []; // Update data source with new data
|
|
3314
3470
|
this.pagesCount = this.totalPagesCount;
|
|
3315
3471
|
this.pageIndex = this.currentPageIndex;
|
|
3472
|
+
queueMicrotask(() => this.announceTableResults());
|
|
3316
3473
|
}
|
|
3317
3474
|
if (changes["enforceRefresh"] && !changes["enforceRefresh"].isFirstChange()) {
|
|
3318
3475
|
this.loadData();
|
|
@@ -3466,6 +3623,27 @@ class BaseTableComponent extends BaseUtils {
|
|
|
3466
3623
|
default: return 'help';
|
|
3467
3624
|
}
|
|
3468
3625
|
}
|
|
3626
|
+
getIconAriaLabelKey(status) {
|
|
3627
|
+
switch (status) {
|
|
3628
|
+
case 'pass':
|
|
3629
|
+
return 'BASE_TABLE.statusIconPass';
|
|
3630
|
+
case 'warning':
|
|
3631
|
+
return 'BASE_TABLE.statusIconWarning';
|
|
3632
|
+
case 'error':
|
|
3633
|
+
return 'BASE_TABLE.statusIconError';
|
|
3634
|
+
default:
|
|
3635
|
+
return 'BASE_TABLE.statusIconUnknown';
|
|
3636
|
+
}
|
|
3637
|
+
}
|
|
3638
|
+
getOnOffFlagAriaLabelKey(value) {
|
|
3639
|
+
if (value === true) {
|
|
3640
|
+
return 'BASE_TABLE.statusFlagActive';
|
|
3641
|
+
}
|
|
3642
|
+
if (value === false) {
|
|
3643
|
+
return 'BASE_TABLE.statusFlagInactive';
|
|
3644
|
+
}
|
|
3645
|
+
return 'BASE_TABLE.statusFlagPending';
|
|
3646
|
+
}
|
|
3469
3647
|
actionCheckedClicked(property, element) {
|
|
3470
3648
|
element[property] = !element[property];
|
|
3471
3649
|
this.actionButtonClicked(property, element);
|
|
@@ -3580,8 +3758,8 @@ class BaseTableComponent extends BaseUtils {
|
|
|
3580
3758
|
return '';
|
|
3581
3759
|
return super.labelKeyByValue(column, row);
|
|
3582
3760
|
}
|
|
3583
|
-
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$
|
|
3584
|
-
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)\" [innerText]='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 [innerText]='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;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:none;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}}:host ::ng-deep button.mat-mdc-button.stateType,:host ::ng-deep button.mdc-button.stateType{white-space:normal!important;height:auto!important;min-height:28px!important;max-width:100%!important;align-items:center!important;justify-content:center!important;cursor:default!important}:host ::ng-deep button.mat-mdc-button.stateType .mdc-button__label,:host ::ng-deep button.mdc-button.stateType .mdc-button__label{white-space:normal!important;display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:2!important;line-clamp:2!important;overflow:hidden!important;word-break:break-word!important;line-height:1.25!important;max-width:100%!important;text-align:center!important}\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: [] }); }
|
|
3761
|
+
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: i4$2.BreakpointObserver }, { token: 'securityManager' }, { token: i3$3.Router }, { token: i2$1.LiveAnnouncer }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3762
|
+
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 type=\"button\"\r\n [matMenuTriggerFor]=\"exportMenu\"\r\n class=\"btn-export\"\r\n [attr.aria-label]=\"'export' | translate\"\r\n [attr.aria-haspopup]=\"true\"\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\r\n class=\"table-container\"\r\n role=\"table\"\r\n [attr.aria-label]=\"\r\n pageInfo.labelsSection && !pageInfo.hideTitle\r\n ? (pageInfo.labelsSection + '.list_title' | translate)\r\n : null\r\n \">\r\n <div class=\"table-header\" [attr.data-sort]=\"sortState\" role=\"row\">\r\n <div *ngFor=\"let columnProp of visibleColumnsArray; let i = index\"\r\n class=\"table-header-cell\"\r\n role=\"columnheader\"\r\n [attr.aria-sort]=\"getColumnAriaSort(columnProp)\"\r\n [attr.tabindex]=\"getColumn(columnProp)?.enableSorting ? 0 : null\"\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 (keydown)=\"onSortHeaderKeydown($event, 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\" role=\"rowgroup\">\r\n <div *ngFor=\"let row of dataSource.data; let rowIndex = index\"\r\n class=\"table-row\"\r\n role=\"row\"\r\n [attr.tabindex]=\"-1\"\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 role=\"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 type=\"button\" class=\"wfStatus {{ getStatusDescription(row)}}\" [attr.id]=\"'table-btn-wf-'+columnProp+'-'+(row.id || row.key || '')\" [attr.tabindex]=\"-1\">{{ getStatusDescription(row) }}</button>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'hyper-text'\">\r\n <span\r\n *ngIf=\"shouldRenderAsHyperLink(row); else plainHyperText\"\r\n class=\"mat-mdc-form-field-label hyper-link\"\r\n [attr.tabindex]=\"-1\"\r\n (click)=\"hyperLinkClicked(columnProp, row)\">\r\n {{ extractFieldName(row, columnProp) }}\r\n </span>\r\n <ng-template #plainHyperText>\r\n <span class=\"mat-mdc-form-field-label\">{{ extractFieldName(row, columnProp) }}</span>\r\n </ng-template>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'button'\">\r\n <button *ngIf=\"shouldShowButton(row)\" mat-button type=\"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 [attr.aria-label]=\"getIconAriaLabelKey(row[columnProp]) | translate\">\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\" [tabIndex]=\"-1\" [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 type=\"button\" class=\"stateType {{ row[columnProp]}}\" [attr.id]=\"'table-btn-state-'+columnProp\" [attr.tabindex]=\"-1\">{{ 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\"\r\n [attr.aria-label]=\"'BASE_TABLE.downloadAction' | translate\">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\"\r\n [attr.aria-label]=\"getOnOffFlagAriaLabelKey(null) | translate\">flag</mat-icon>\r\n <mat-icon *ngIf=\"row[columnProp] === false\" class=\"mainTable__td__icon-red\"\r\n [attr.aria-label]=\"getOnOffFlagAriaLabelKey(false) | translate\">flag</mat-icon>\r\n <mat-icon *ngIf=\"row[columnProp] === true\" class=\"mainTable__td__icon-green\"\r\n [attr.aria-label]=\"getOnOffFlagAriaLabelKey(true) | translate\">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\r\n mat-icon-button\r\n type=\"button\"\r\n [attr.tabindex]=\"-1\"\r\n [attr.aria-label]=\"'BASE_TABLE.rowDetails' | translate\"\r\n (click)=\"$event.stopPropagation();emitEvent(row)\"\r\n [attr.id]=\"'table-btn-info-'+row.id\">\r\n <mat-icon aria-hidden=\"true\">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\r\n [attr.tabindex]=\"-1\"\r\n (click)=\"$event.stopPropagation(); 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\r\n [attr.tabindex]=\"-1\"\r\n (click)=\"$event.stopPropagation(); emitRoutePage(row)\"\r\n [innerText]='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 [innerText]='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:auto;min-height:280px;text-align:center;margin-top:0;padding:40px 0}.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;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:none;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}}:host ::ng-deep button.mat-mdc-button.stateType,:host ::ng-deep button.mdc-button.stateType{white-space:normal!important;height:auto!important;min-height:28px!important;max-width:100%!important;align-items:center!important;justify-content:center!important;cursor:default!important}:host ::ng-deep button.mat-mdc-button.stateType .mdc-button__label,:host ::ng-deep button.mdc-button.stateType .mdc-button__label{white-space:normal!important;display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:2!important;line-clamp:2!important;overflow:hidden!important;word-break:break-word!important;line-height:1.25!important;max-width:100%!important;text-align:center!important}@media (max-width: 450px){.mobile-card__header{flex-direction:column;justify-content:flex-start;height:auto;width:100%;box-sizing:border-box;gap:8px}}\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: i7.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i7.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: "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: [] }); }
|
|
3585
3763
|
}
|
|
3586
3764
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BaseTableComponent, decorators: [{
|
|
3587
3765
|
type: Component,
|
|
@@ -3603,7 +3781,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
3603
3781
|
NgForOf,
|
|
3604
3782
|
MatButton,
|
|
3605
3783
|
ButtonActionsComponent,
|
|
3606
|
-
MatLabel,
|
|
3607
3784
|
TitleBarComponent,
|
|
3608
3785
|
PaginatorComponent,
|
|
3609
3786
|
DecimalPipe,
|
|
@@ -3612,11 +3789,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
3612
3789
|
MatMenuTrigger,
|
|
3613
3790
|
MatMenu,
|
|
3614
3791
|
MatMenuItem,
|
|
3615
|
-
], 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)\" [innerText]='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 [innerText]='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;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:none;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}}:host ::ng-deep button.mat-mdc-button.stateType,:host ::ng-deep button.mdc-button.stateType{white-space:normal!important;height:auto!important;min-height:28px!important;max-width:100%!important;align-items:center!important;justify-content:center!important;cursor:default!important}:host ::ng-deep button.mat-mdc-button.stateType .mdc-button__label,:host ::ng-deep button.mdc-button.stateType .mdc-button__label{white-space:normal!important;display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:2!important;line-clamp:2!important;overflow:hidden!important;word-break:break-word!important;line-height:1.25!important;max-width:100%!important;text-align:center!important}\n"] }]
|
|
3616
|
-
}], ctorParameters: () => [{ type: BackendService }, { type: i2.TranslateService }, { type: ShareDataService }, { type: undefined, decorators: [{
|
|
3792
|
+
], 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 type=\"button\"\r\n [matMenuTriggerFor]=\"exportMenu\"\r\n class=\"btn-export\"\r\n [attr.aria-label]=\"'export' | translate\"\r\n [attr.aria-haspopup]=\"true\"\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\r\n class=\"table-container\"\r\n role=\"table\"\r\n [attr.aria-label]=\"\r\n pageInfo.labelsSection && !pageInfo.hideTitle\r\n ? (pageInfo.labelsSection + '.list_title' | translate)\r\n : null\r\n \">\r\n <div class=\"table-header\" [attr.data-sort]=\"sortState\" role=\"row\">\r\n <div *ngFor=\"let columnProp of visibleColumnsArray; let i = index\"\r\n class=\"table-header-cell\"\r\n role=\"columnheader\"\r\n [attr.aria-sort]=\"getColumnAriaSort(columnProp)\"\r\n [attr.tabindex]=\"getColumn(columnProp)?.enableSorting ? 0 : null\"\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 (keydown)=\"onSortHeaderKeydown($event, 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\" role=\"rowgroup\">\r\n <div *ngFor=\"let row of dataSource.data; let rowIndex = index\"\r\n class=\"table-row\"\r\n role=\"row\"\r\n [attr.tabindex]=\"-1\"\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 role=\"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 type=\"button\" class=\"wfStatus {{ getStatusDescription(row)}}\" [attr.id]=\"'table-btn-wf-'+columnProp+'-'+(row.id || row.key || '')\" [attr.tabindex]=\"-1\">{{ getStatusDescription(row) }}</button>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'hyper-text'\">\r\n <span\r\n *ngIf=\"shouldRenderAsHyperLink(row); else plainHyperText\"\r\n class=\"mat-mdc-form-field-label hyper-link\"\r\n [attr.tabindex]=\"-1\"\r\n (click)=\"hyperLinkClicked(columnProp, row)\">\r\n {{ extractFieldName(row, columnProp) }}\r\n </span>\r\n <ng-template #plainHyperText>\r\n <span class=\"mat-mdc-form-field-label\">{{ extractFieldName(row, columnProp) }}</span>\r\n </ng-template>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'button'\">\r\n <button *ngIf=\"shouldShowButton(row)\" mat-button type=\"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 [attr.aria-label]=\"getIconAriaLabelKey(row[columnProp]) | translate\">\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\" [tabIndex]=\"-1\" [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 type=\"button\" class=\"stateType {{ row[columnProp]}}\" [attr.id]=\"'table-btn-state-'+columnProp\" [attr.tabindex]=\"-1\">{{ 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\"\r\n [attr.aria-label]=\"'BASE_TABLE.downloadAction' | translate\">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\"\r\n [attr.aria-label]=\"getOnOffFlagAriaLabelKey(null) | translate\">flag</mat-icon>\r\n <mat-icon *ngIf=\"row[columnProp] === false\" class=\"mainTable__td__icon-red\"\r\n [attr.aria-label]=\"getOnOffFlagAriaLabelKey(false) | translate\">flag</mat-icon>\r\n <mat-icon *ngIf=\"row[columnProp] === true\" class=\"mainTable__td__icon-green\"\r\n [attr.aria-label]=\"getOnOffFlagAriaLabelKey(true) | translate\">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\r\n mat-icon-button\r\n type=\"button\"\r\n [attr.tabindex]=\"-1\"\r\n [attr.aria-label]=\"'BASE_TABLE.rowDetails' | translate\"\r\n (click)=\"$event.stopPropagation();emitEvent(row)\"\r\n [attr.id]=\"'table-btn-info-'+row.id\">\r\n <mat-icon aria-hidden=\"true\">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\r\n [attr.tabindex]=\"-1\"\r\n (click)=\"$event.stopPropagation(); 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\r\n [attr.tabindex]=\"-1\"\r\n (click)=\"$event.stopPropagation(); emitRoutePage(row)\"\r\n [innerText]='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 [innerText]='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:auto;min-height:280px;text-align:center;margin-top:0;padding:40px 0}.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;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:none;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}}:host ::ng-deep button.mat-mdc-button.stateType,:host ::ng-deep button.mdc-button.stateType{white-space:normal!important;height:auto!important;min-height:28px!important;max-width:100%!important;align-items:center!important;justify-content:center!important;cursor:default!important}:host ::ng-deep button.mat-mdc-button.stateType .mdc-button__label,:host ::ng-deep button.mdc-button.stateType .mdc-button__label{white-space:normal!important;display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:2!important;line-clamp:2!important;overflow:hidden!important;word-break:break-word!important;line-height:1.25!important;max-width:100%!important;text-align:center!important}@media (max-width: 450px){.mobile-card__header{flex-direction:column;justify-content:flex-start;height:auto;width:100%;box-sizing:border-box;gap:8px}}\n"] }]
|
|
3793
|
+
}], ctorParameters: () => [{ type: BackendService }, { type: i2.TranslateService }, { type: ShareDataService }, { type: i4$2.BreakpointObserver }, { type: undefined, decorators: [{
|
|
3617
3794
|
type: Inject,
|
|
3618
3795
|
args: ['securityManager']
|
|
3619
|
-
}] }, { type: i3$
|
|
3796
|
+
}] }, { type: i3$3.Router }, { type: i2$1.LiveAnnouncer }], propDecorators: { filterFields: [{
|
|
3620
3797
|
type: Input
|
|
3621
3798
|
}], noDataFoundSvgPath: [{
|
|
3622
3799
|
type: Input
|
|
@@ -3702,7 +3879,8 @@ class AuditLogComponent {
|
|
|
3702
3879
|
this.auditLogEntries = [];
|
|
3703
3880
|
this.fields = [];
|
|
3704
3881
|
this.showHiddenFields = [];
|
|
3705
|
-
this.
|
|
3882
|
+
this.nameField = 'name';
|
|
3883
|
+
this.auditRecordId = null;
|
|
3706
3884
|
this.currentDirection = 'ltr';
|
|
3707
3885
|
}
|
|
3708
3886
|
ngOnInit() {
|
|
@@ -3712,25 +3890,43 @@ class AuditLogComponent {
|
|
|
3712
3890
|
});
|
|
3713
3891
|
this.loadItem();
|
|
3714
3892
|
}
|
|
3893
|
+
resolveStateRecord() {
|
|
3894
|
+
const s = history.state;
|
|
3895
|
+
if (!s) {
|
|
3896
|
+
return null;
|
|
3897
|
+
}
|
|
3898
|
+
const candidate = s['raw'] ??
|
|
3899
|
+
s['entityData'] ??
|
|
3900
|
+
s['userData'] ??
|
|
3901
|
+
s['entity'] ??
|
|
3902
|
+
s['data'];
|
|
3903
|
+
return candidate ?? null;
|
|
3904
|
+
}
|
|
3715
3905
|
loadItem() {
|
|
3716
|
-
const state =
|
|
3717
|
-
|
|
3718
|
-
|
|
3906
|
+
const state = this.resolveStateRecord();
|
|
3907
|
+
const id = state?.['id'];
|
|
3908
|
+
if (id !== undefined && id !== null && id !== '') {
|
|
3909
|
+
const num = Number(id);
|
|
3910
|
+
this.auditRecordId = !Number.isNaN(num) && num > 0 ? num : String(id);
|
|
3719
3911
|
}
|
|
3720
|
-
|
|
3721
|
-
|
|
3722
|
-
|
|
3723
|
-
|
|
3724
|
-
|
|
3725
|
-
filterRequest.filters.push(new Filter({
|
|
3726
|
-
key: 0,
|
|
3727
|
-
fieldType: 'Long',
|
|
3728
|
-
fieldName: 'id',
|
|
3729
|
-
valueObject: this.itemId,
|
|
3730
|
-
filterType: 'FILED_FILTER',
|
|
3731
|
-
operator: 'EQUALS'
|
|
3732
|
-
}));
|
|
3912
|
+
else {
|
|
3913
|
+
this.auditRecordId = null;
|
|
3914
|
+
}
|
|
3915
|
+
if (this.auditRecordId === null) {
|
|
3916
|
+
return;
|
|
3733
3917
|
}
|
|
3918
|
+
const filterRequest = new FilterRequest();
|
|
3919
|
+
filterRequest.filters = [];
|
|
3920
|
+
filterRequest.sortDirection = "DESC";
|
|
3921
|
+
filterRequest.pageSize = 1000;
|
|
3922
|
+
filterRequest.filters.push(new Filter({
|
|
3923
|
+
key: 0,
|
|
3924
|
+
fieldType: 'Long',
|
|
3925
|
+
fieldName: 'id',
|
|
3926
|
+
valueObject: this.auditRecordId,
|
|
3927
|
+
filterType: 'FILED_FILTER',
|
|
3928
|
+
operator: 'EQUALS'
|
|
3929
|
+
}));
|
|
3734
3930
|
this.backendService.getItemAuditLog(filterRequest, this.pageInfo.apiUri).subscribe({
|
|
3735
3931
|
next: (resp) => {
|
|
3736
3932
|
if (resp?.body?.length > 0) {
|
|
@@ -3741,8 +3937,24 @@ class AuditLogComponent {
|
|
|
3741
3937
|
},
|
|
3742
3938
|
});
|
|
3743
3939
|
}
|
|
3744
|
-
|
|
3745
|
-
|
|
3940
|
+
getSubjectName(entry) {
|
|
3941
|
+
const subject = entry?.subject;
|
|
3942
|
+
if (subject == null || !this.nameField) {
|
|
3943
|
+
return '';
|
|
3944
|
+
}
|
|
3945
|
+
const value = this.resolveFieldPath(subject, this.nameField);
|
|
3946
|
+
return value != null && value !== '' ? String(value) : '';
|
|
3947
|
+
}
|
|
3948
|
+
resolveFieldPath(obj, path) {
|
|
3949
|
+
return path.split('.').reduce((current, key) => {
|
|
3950
|
+
if (current == null || typeof current !== 'object') {
|
|
3951
|
+
return undefined;
|
|
3952
|
+
}
|
|
3953
|
+
return current[key];
|
|
3954
|
+
}, obj);
|
|
3955
|
+
}
|
|
3956
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AuditLogComponent, deps: [{ token: i1.MatDialog }, { token: i3$3.ActivatedRoute }, { token: i3$1.Directionality }, { token: 'securityManager' }, { token: BackendService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3957
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: AuditLogComponent, isStandalone: true, selector: "app-audit-log", inputs: { pageInfo: "pageInfo", statusName: "statusName", module: "module", identifier: "identifier", fields: "fields", showHiddenFields: "showHiddenFields", nameField: "nameField" }, providers: [DatePipe], ngImport: i0, template: "<div *ngIf=\"auditRecordId !== null && this.auditLogEntries.length > 0\">\n\n<mat-expansion-panel class=\"location-card\"\n #panel=\"matExpansionPanel\"\n [expanded]=\"true\"\n [hideToggle]=\"true\"\n (opened)=\" panel.open() \"\n (closed)=\" panel.open()\">\n <mat-expansion-panel-header class=\"card-header\" >\n <mat-panel-title>\n <div class=\"title-container\">\n <h3 class=\"card-title\">\n {{ 'audit-log.title' | translate }}\n </h3>\n </div>\n </mat-panel-title>\n\n </mat-expansion-panel-header>\n <div class=\"panel-body\">\n <hr class=\"divider\"/>\n <div class=\"timeline-container\">\n <div *ngFor=\"let auditLog of auditLogEntries; let i = index\" class=\"timeline-item\">\n <div class=\"timeline-marker\">\n <div class=\"timeline-circle\"></div>\n <div *ngIf=\"i !== auditLogEntries.length - 1\" class=\"timeline-line\"></div>\n </div>\n\n <div class=\"timeline-content\">\n <div class=\"log-main-text\">\n <span class=\"actor-name\">{{ auditLog.createdByDisplayName || auditLog.createdBy || ('system' | translate) }}</span>\n <span class=\"action-text action-highlight\">{{\n 'audit-log.action_' +\n auditLog?.action +\n '_' +\n module\n | translate\n }}</span>\n <ng-container *ngIf=\"getSubjectName(auditLog)\">\n <span class=\"action-text\">{{ 'audit-log.for_' + module | translate }}</span>\n <span class=\"actor-name\">{{ getSubjectName(auditLog) }}</span>\n </ng-container>\n </div>\n <div class=\"log-timestamp\">{{ auditLog.createdOn | date: 'dd MMM, yyyy HH:mm a' }}</div>\n </div>\n </div>\n </div>\n\n\n </div>\n</mat-expansion-panel>\n\n</div>\n", styles: [".audit-log-header{font-family:sans-serif;color:#333;margin-bottom:8px;padding-left:10px}.timeline-container{padding:20px;background-color:#fff}.timeline-item{display:flex;margin-bottom:15px;position:relative}.timeline-marker{display:flex;flex-direction:column;align-items:center;margin-right:20px;width:20px;justify-content:center}.timeline-marker .timeline-line{width:1px;background-color:#d1d1d1;flex-grow:1;position:absolute;top:0;height:calc(100% + 80px)}.timeline-circle{width:14px;height:14px;border-radius:50%;border:2px solid #345a7d;background:#fff;z-index:2}.timeline-content{flex-grow:1;background:#fff;border:1px solid #f0f0f0;border-radius:8px;padding:15px 20px;box-shadow:0 2px 4px #0000000d;cursor:pointer;transition:background .2s}.log-main-text{font-size:14px;margin-bottom:0;color:#333;display:flex;flex-wrap:wrap;align-items:baseline;gap:.35em}.log-main-text .actor-name,.log-main-text .target-name{font-weight:800;color:#002c44}.log-main-text .action-text{color:#333}.log-main-text .action-highlight{font-weight:600;color:#002c44}.log-timestamp{font-size:12px;color:#888;margin-top:8px}.log-timestamp-inline{display:inline;font-size:14px;color:#555;font-weight:500}.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: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatButtonModule }, { 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: "pipe", type: DatePipe, name: "date" }, { kind: "directive", type: MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "component", type: MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }] }); }
|
|
3746
3958
|
}
|
|
3747
3959
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AuditLogComponent, decorators: [{
|
|
3748
3960
|
type: Component,
|
|
@@ -3757,8 +3969,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
3757
3969
|
MatExpansionPanelTitle,
|
|
3758
3970
|
MatExpansionPanel,
|
|
3759
3971
|
MatExpansionPanelHeader
|
|
3760
|
-
], providers: [DatePipe], template: "<div *ngIf=\"
|
|
3761
|
-
}], ctorParameters: () => [{ type: i1.MatDialog }, { type: i3$
|
|
3972
|
+
], providers: [DatePipe], template: "<div *ngIf=\"auditRecordId !== null && this.auditLogEntries.length > 0\">\n\n<mat-expansion-panel class=\"location-card\"\n #panel=\"matExpansionPanel\"\n [expanded]=\"true\"\n [hideToggle]=\"true\"\n (opened)=\" panel.open() \"\n (closed)=\" panel.open()\">\n <mat-expansion-panel-header class=\"card-header\" >\n <mat-panel-title>\n <div class=\"title-container\">\n <h3 class=\"card-title\">\n {{ 'audit-log.title' | translate }}\n </h3>\n </div>\n </mat-panel-title>\n\n </mat-expansion-panel-header>\n <div class=\"panel-body\">\n <hr class=\"divider\"/>\n <div class=\"timeline-container\">\n <div *ngFor=\"let auditLog of auditLogEntries; let i = index\" class=\"timeline-item\">\n <div class=\"timeline-marker\">\n <div class=\"timeline-circle\"></div>\n <div *ngIf=\"i !== auditLogEntries.length - 1\" class=\"timeline-line\"></div>\n </div>\n\n <div class=\"timeline-content\">\n <div class=\"log-main-text\">\n <span class=\"actor-name\">{{ auditLog.createdByDisplayName || auditLog.createdBy || ('system' | translate) }}</span>\n <span class=\"action-text action-highlight\">{{\n 'audit-log.action_' +\n auditLog?.action +\n '_' +\n module\n | translate\n }}</span>\n <ng-container *ngIf=\"getSubjectName(auditLog)\">\n <span class=\"action-text\">{{ 'audit-log.for_' + module | translate }}</span>\n <span class=\"actor-name\">{{ getSubjectName(auditLog) }}</span>\n </ng-container>\n </div>\n <div class=\"log-timestamp\">{{ auditLog.createdOn | date: 'dd MMM, yyyy HH:mm a' }}</div>\n </div>\n </div>\n </div>\n\n\n </div>\n</mat-expansion-panel>\n\n</div>\n", styles: [".audit-log-header{font-family:sans-serif;color:#333;margin-bottom:8px;padding-left:10px}.timeline-container{padding:20px;background-color:#fff}.timeline-item{display:flex;margin-bottom:15px;position:relative}.timeline-marker{display:flex;flex-direction:column;align-items:center;margin-right:20px;width:20px;justify-content:center}.timeline-marker .timeline-line{width:1px;background-color:#d1d1d1;flex-grow:1;position:absolute;top:0;height:calc(100% + 80px)}.timeline-circle{width:14px;height:14px;border-radius:50%;border:2px solid #345a7d;background:#fff;z-index:2}.timeline-content{flex-grow:1;background:#fff;border:1px solid #f0f0f0;border-radius:8px;padding:15px 20px;box-shadow:0 2px 4px #0000000d;cursor:pointer;transition:background .2s}.log-main-text{font-size:14px;margin-bottom:0;color:#333;display:flex;flex-wrap:wrap;align-items:baseline;gap:.35em}.log-main-text .actor-name,.log-main-text .target-name{font-weight:800;color:#002c44}.log-main-text .action-text{color:#333}.log-main-text .action-highlight{font-weight:600;color:#002c44}.log-timestamp{font-size:12px;color:#888;margin-top:8px}.log-timestamp-inline{display:inline;font-size:14px;color:#555;font-weight:500}.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"] }]
|
|
3973
|
+
}], ctorParameters: () => [{ type: i1.MatDialog }, { type: i3$3.ActivatedRoute }, { type: i3$1.Directionality }, { type: undefined, decorators: [{
|
|
3762
3974
|
type: Inject,
|
|
3763
3975
|
args: ['securityManager']
|
|
3764
3976
|
}] }, { type: BackendService }], propDecorators: { pageInfo: [{
|
|
@@ -3773,6 +3985,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
3773
3985
|
type: Input
|
|
3774
3986
|
}], showHiddenFields: [{
|
|
3775
3987
|
type: Input
|
|
3988
|
+
}], nameField: [{
|
|
3989
|
+
type: Input
|
|
3776
3990
|
}] } });
|
|
3777
3991
|
|
|
3778
3992
|
class EquationBuilderComponent {
|
|
@@ -3852,7 +4066,7 @@ class EquationBuilderComponent {
|
|
|
3852
4066
|
this.emitChange();
|
|
3853
4067
|
}
|
|
3854
4068
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EquationBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3855
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: EquationBuilderComponent, isStandalone: true, selector: "lib-equation-builder", inputs: { form: "form", field: "field", isPending: "isPending", readOnly: "readOnly" }, outputs: { valueChanged: "valueChanged" }, ngImport: i0, template: "<div class=\"flex-row gap-10 fill align-start-center\">\r\n <ng-container *ngFor=\"let item of items; let i = index\">\r\n <div class=\"flex-row align-start-center gap-5\">\r\n <ng-container [ngSwitch]=\"item.type\">\r\n <ng-container *ngSwitchCase=\"'lookup'\">\r\n <app-auto-complete\r\n class=\"flex-full\"\r\n [field]=\"field\"\r\n [form]=\"form\"\r\n [defaultValue]=\"item.value\"\r\n (selectedValue)=\"onLookupChange(i, $event)\">\r\n </app-auto-complete>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'dropdown'\">\r\n <mat-form-field class=\"flex-none\" appearance=\"outline\" style=\"width: 100px\">\r\n <mat-select [disabled]=\"readOnly\" [value]=\"item.value\" (selectionChange)=\"onDropdownChange(i, $event.value)\">\r\n <mat-option *ngFor=\"let opt of operators\" [value]=\"opt.value\">\r\n {{ opt.label }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <button
|
|
4069
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: EquationBuilderComponent, isStandalone: true, selector: "lib-equation-builder", inputs: { form: "form", field: "field", isPending: "isPending", readOnly: "readOnly" }, outputs: { valueChanged: "valueChanged" }, ngImport: i0, template: "<div class=\"flex-row gap-10 fill align-start-center\">\r\n <ng-container *ngFor=\"let item of items; let i = index\">\r\n <div class=\"flex-row align-start-center gap-5\">\r\n <ng-container [ngSwitch]=\"item.type\">\r\n <ng-container *ngSwitchCase=\"'lookup'\">\r\n <app-auto-complete\r\n class=\"flex-full\"\r\n [field]=\"field\"\r\n [form]=\"form\"\r\n [defaultValue]=\"item.value\"\r\n (selectedValue)=\"onLookupChange(i, $event)\">\r\n </app-auto-complete>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'dropdown'\">\r\n <mat-form-field class=\"flex-none\" appearance=\"outline\" style=\"width: 100px\">\r\n <mat-label>{{ 'BASE_TABLE.equationOperator' | translate }}</mat-label>\r\n <mat-select [disabled]=\"readOnly\" [value]=\"item.value\" (selectionChange)=\"onDropdownChange(i, $event.value)\">\r\n <mat-option *ngFor=\"let opt of operators\" [value]=\"opt.value\">\r\n {{ opt.label }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <button\r\n [disabled]=\"isPending\"\r\n mat-icon-button\r\n type=\"button\"\r\n color=\"warn\"\r\n (click)=\"onClearAll()\"\r\n *ngIf=\"items.length > 0\"\r\n id=\"equation-clear-all-btn\"\r\n [attr.aria-label]=\"'BASE_TABLE.clearEquation' | translate\">\r\n <mat-icon aria-hidden=\"true\">delete</mat-icon>\r\n </button>\r\n</div>\r\n", styles: [".flex-row{display:flex;flex-direction:row}.flex-column{display:flex;flex-direction:column}.flex-full{flex:1 1 auto}.flex-none{flex:0 0 auto}.fill{width:100%}.align-start-center{align-items:center;justify-content:flex-start}.align-center-center{align-items:center;justify-content:center}.gap-5{gap:5px}.gap-10{gap:10px}\n"], dependencies: [{ kind: "component", type: AutoCompleteComponent, selector: "app-auto-complete", inputs: ["field", "form", "defaultValue", "readonly", "supportingAttributes"], outputs: ["selectedValue"] }, { 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$2, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: MatFormField$1, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] }); }
|
|
3856
4070
|
}
|
|
3857
4071
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EquationBuilderComponent, decorators: [{
|
|
3858
4072
|
type: Component,
|
|
@@ -3861,13 +4075,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
3861
4075
|
MatSelect,
|
|
3862
4076
|
MatOption$2,
|
|
3863
4077
|
MatFormField$1,
|
|
4078
|
+
MatLabel,
|
|
3864
4079
|
NgSwitch,
|
|
3865
4080
|
NgForOf,
|
|
3866
4081
|
NgSwitchCase,
|
|
3867
4082
|
MatIcon,
|
|
3868
4083
|
MatIconButton,
|
|
3869
|
-
NgIf
|
|
3870
|
-
|
|
4084
|
+
NgIf,
|
|
4085
|
+
TranslateModule,
|
|
4086
|
+
], template: "<div class=\"flex-row gap-10 fill align-start-center\">\r\n <ng-container *ngFor=\"let item of items; let i = index\">\r\n <div class=\"flex-row align-start-center gap-5\">\r\n <ng-container [ngSwitch]=\"item.type\">\r\n <ng-container *ngSwitchCase=\"'lookup'\">\r\n <app-auto-complete\r\n class=\"flex-full\"\r\n [field]=\"field\"\r\n [form]=\"form\"\r\n [defaultValue]=\"item.value\"\r\n (selectedValue)=\"onLookupChange(i, $event)\">\r\n </app-auto-complete>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'dropdown'\">\r\n <mat-form-field class=\"flex-none\" appearance=\"outline\" style=\"width: 100px\">\r\n <mat-label>{{ 'BASE_TABLE.equationOperator' | translate }}</mat-label>\r\n <mat-select [disabled]=\"readOnly\" [value]=\"item.value\" (selectionChange)=\"onDropdownChange(i, $event.value)\">\r\n <mat-option *ngFor=\"let opt of operators\" [value]=\"opt.value\">\r\n {{ opt.label }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <button\r\n [disabled]=\"isPending\"\r\n mat-icon-button\r\n type=\"button\"\r\n color=\"warn\"\r\n (click)=\"onClearAll()\"\r\n *ngIf=\"items.length > 0\"\r\n id=\"equation-clear-all-btn\"\r\n [attr.aria-label]=\"'BASE_TABLE.clearEquation' | translate\">\r\n <mat-icon aria-hidden=\"true\">delete</mat-icon>\r\n </button>\r\n</div>\r\n", styles: [".flex-row{display:flex;flex-direction:row}.flex-column{display:flex;flex-direction:column}.flex-full{flex:1 1 auto}.flex-none{flex:0 0 auto}.fill{width:100%}.align-start-center{align-items:center;justify-content:flex-start}.align-center-center{align-items:center;justify-content:center}.gap-5{gap:5px}.gap-10{gap:10px}\n"] }]
|
|
3871
4087
|
}], propDecorators: { form: [{
|
|
3872
4088
|
type: Input
|
|
3873
4089
|
}], field: [{
|
|
@@ -4249,7 +4465,7 @@ class EditableBaseTableComponent extends BaseUtils {
|
|
|
4249
4465
|
validSearchData() {
|
|
4250
4466
|
return !this.searchForm.valid || true;
|
|
4251
4467
|
}
|
|
4252
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EditableBaseTableComponent, deps: [{ token: BackendService }, { token: i3$
|
|
4468
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EditableBaseTableComponent, deps: [{ token: BackendService }, { token: i3$3.Router }, { token: i3.FormBuilder }, { token: i1.MatDialog }, { token: i3$1.Directionality }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4253
4469
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: EditableBaseTableComponent, isStandalone: true, selector: "app-editable-base-table", inputs: { filterRequest: "filterRequest", superDataElements: "superDataElements", pageInfo: "pageInfo", enforceRefresh: "enforceRefresh", isPending: "isPending", isBulkItemsSupported: "isBulkItemsSupported", fields: "fields", searchFormFields: "searchFormFields", translationKey: "translationKey", actionRequestCallback: "actionRequestCallback" }, outputs: { formUpdated: "formUpdated", saveActionEmitter: "saveActionEmitter", saveAttachmentEmitter: "saveAttachmentEmitter" }, providers: [
|
|
4254
4470
|
// `MomentDateAdapter` can be automatically provided by importing `MomentDateModule` in your
|
|
4255
4471
|
// application's root module. We provide it at the component level here, due to limitations of
|
|
@@ -4260,7 +4476,7 @@ class EditableBaseTableComponent extends BaseUtils {
|
|
|
4260
4476
|
// deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS],
|
|
4261
4477
|
// },
|
|
4262
4478
|
// { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS },
|
|
4263
|
-
], 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 [min]=\"minDate\"\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 [min]=\"minDate\"\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: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.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: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.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: [] }); }
|
|
4479
|
+
], 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 [attr.aria-label]=\"'BASE_TABLE.documentStatus' | translate\" [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 [min]=\"minDate\"\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 [min]=\"minDate\"\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$1.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: i7.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: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.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: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.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", "ariaDescribedBy"], 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: [] }); }
|
|
4264
4480
|
}
|
|
4265
4481
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EditableBaseTableComponent, decorators: [{
|
|
4266
4482
|
type: Component,
|
|
@@ -4316,8 +4532,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
4316
4532
|
// deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS],
|
|
4317
4533
|
// },
|
|
4318
4534
|
// { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS },
|
|
4319
|
-
], 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 [min]=\"minDate\"\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 [min]=\"minDate\"\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"] }]
|
|
4320
|
-
}], ctorParameters: () => [{ type: BackendService }, { type: i3$
|
|
4535
|
+
], 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 [attr.aria-label]=\"'BASE_TABLE.documentStatus' | translate\" [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 [min]=\"minDate\"\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 [min]=\"minDate\"\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"] }]
|
|
4536
|
+
}], ctorParameters: () => [{ type: BackendService }, { type: i3$3.Router }, { type: i3.FormBuilder }, { type: i1.MatDialog }, { type: i3$1.Directionality }], propDecorators: { filterRequest: [{
|
|
4321
4537
|
type: Input
|
|
4322
4538
|
}], superDataElements: [{
|
|
4323
4539
|
type: Input
|
|
@@ -4379,7 +4595,7 @@ class SharedListComponent {
|
|
|
4379
4595
|
this.readyToLoad = true;
|
|
4380
4596
|
});
|
|
4381
4597
|
}
|
|
4382
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SharedListComponent, deps: [{ token: i3$
|
|
4598
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SharedListComponent, deps: [{ token: i3$3.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4383
4599
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: SharedListComponent, isStandalone: true, selector: "app-shared-list", ngImport: i0, template: "<ng-container *ngIf=\"readyToLoad\">\r\n @if (editableTable) {\r\n <app-editable-base-table [filterRequest]=\"filterRequest\" [pageInfo]=\"pageInfo\"\r\n [fields]=\"fields\"\r\n [isPending]=\"isPending\"\r\n ></app-editable-base-table>\r\n\r\n } @else {\r\n\r\n <app-base-table [filters]=\"filters\" [pageInfo]=\"pageInfo\"\r\n [columns]=\"columnsDefinition\"\r\n [listAction]=\"listAction\"\r\n [isPending]=\"isPending\"\r\n ></app-base-table>\r\n\r\n }\r\n</ng-container>\r\n", styles: [""], dependencies: [{ 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: "component", type: EditableBaseTableComponent, selector: "app-editable-base-table", inputs: ["filterRequest", "superDataElements", "pageInfo", "enforceRefresh", "isPending", "isBulkItemsSupported", "fields", "searchFormFields", "translationKey", "actionRequestCallback"], outputs: ["formUpdated", "saveActionEmitter", "saveAttachmentEmitter"] }] }); }
|
|
4384
4600
|
}
|
|
4385
4601
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SharedListComponent, decorators: [{
|
|
@@ -4389,7 +4605,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
4389
4605
|
NgIf,
|
|
4390
4606
|
EditableBaseTableComponent
|
|
4391
4607
|
], template: "<ng-container *ngIf=\"readyToLoad\">\r\n @if (editableTable) {\r\n <app-editable-base-table [filterRequest]=\"filterRequest\" [pageInfo]=\"pageInfo\"\r\n [fields]=\"fields\"\r\n [isPending]=\"isPending\"\r\n ></app-editable-base-table>\r\n\r\n } @else {\r\n\r\n <app-base-table [filters]=\"filters\" [pageInfo]=\"pageInfo\"\r\n [columns]=\"columnsDefinition\"\r\n [listAction]=\"listAction\"\r\n [isPending]=\"isPending\"\r\n ></app-base-table>\r\n\r\n }\r\n</ng-container>\r\n" }]
|
|
4392
|
-
}], ctorParameters: () => [{ type: i3$
|
|
4608
|
+
}], ctorParameters: () => [{ type: i3$3.ActivatedRoute }] });
|
|
4393
4609
|
|
|
4394
4610
|
class BaseFormComponent extends BaseUtils {
|
|
4395
4611
|
constructor(dialog, activatedRoute, router, directionality, location, securityManager, backendService) {
|
|
@@ -4613,8 +4829,8 @@ class BaseFormComponent extends BaseUtils {
|
|
|
4613
4829
|
disabledSaveButton(element) {
|
|
4614
4830
|
return (!this.isPending && element.stateType == 'PENDING') && this.pageInfo.draftSupported;
|
|
4615
4831
|
}
|
|
4616
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BaseFormComponent, deps: [{ token: i1.MatDialog }, { token: i3$
|
|
4617
|
-
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:
|
|
4832
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BaseFormComponent, deps: [{ token: i1.MatDialog }, { token: i3$3.ActivatedRoute }, { token: i3$3.Router }, { token: i3$1.Directionality }, { token: i1$1.Location }, { token: 'securityManager' }, { token: BackendService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4833
|
+
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: i7.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", "nameField"] }] }); }
|
|
4618
4834
|
}
|
|
4619
4835
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BaseFormComponent, decorators: [{
|
|
4620
4836
|
type: Component,
|
|
@@ -4628,7 +4844,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
4628
4844
|
MatButton,
|
|
4629
4845
|
AuditLogComponent
|
|
4630
4846
|
], 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"] }]
|
|
4631
|
-
}], ctorParameters: () => [{ type: i1.MatDialog }, { type: i3$
|
|
4847
|
+
}], ctorParameters: () => [{ type: i1.MatDialog }, { type: i3$3.ActivatedRoute }, { type: i3$3.Router }, { type: i3$1.Directionality }, { type: i1$1.Location }, { type: undefined, decorators: [{
|
|
4632
4848
|
type: Inject,
|
|
4633
4849
|
args: ['securityManager']
|
|
4634
4850
|
}] }, { type: BackendService }], propDecorators: { pageInfo: [{
|
|
@@ -4661,6 +4877,7 @@ class SectionFormCanvasComponent {
|
|
|
4661
4877
|
this.hideToggle = true;
|
|
4662
4878
|
this.isExpanded = true;
|
|
4663
4879
|
this.alwaysOpen = true;
|
|
4880
|
+
this.expansionHeaderTabIndex = -1;
|
|
4664
4881
|
this.actionEdit = new EventEmitter();
|
|
4665
4882
|
this.formEdit = new EventEmitter();
|
|
4666
4883
|
this.buttons = [];
|
|
@@ -4672,6 +4889,11 @@ class SectionFormCanvasComponent {
|
|
|
4672
4889
|
toggleExpand() {
|
|
4673
4890
|
this.isExpanded = !this.isExpanded;
|
|
4674
4891
|
}
|
|
4892
|
+
onPanelHeaderChildKeydown(event) {
|
|
4893
|
+
if (event.key === 'Enter' || event.key === ' ') {
|
|
4894
|
+
event.stopPropagation();
|
|
4895
|
+
}
|
|
4896
|
+
}
|
|
4675
4897
|
onButtonClick(btn, sectionKey) {
|
|
4676
4898
|
this.buttonClicked.emit({ ...btn, sectionKey: sectionKey });
|
|
4677
4899
|
}
|
|
@@ -4682,7 +4904,7 @@ class SectionFormCanvasComponent {
|
|
|
4682
4904
|
return this.buttons.filter(btn => btn.id !== 'download');
|
|
4683
4905
|
}
|
|
4684
4906
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SectionFormCanvasComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4685
|
-
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;cursor:default}.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"] }] }); }
|
|
4907
|
+
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", expansionHeaderTabIndex: "expansionHeaderTabIndex", 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\r\n class=\"card-header\"\r\n (click)=\"toggleExpand()\"\r\n [tabIndex]=\"expansionHeaderTabIndex\">\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\r\n mat-button\r\n *ngIf=\"itemStatus\"\r\n type=\"button\"\r\n class=\"stateType\"\r\n [ngClass]=\"itemStatus\"\r\n (keydown)=\"onPanelHeaderChildKeydown($event)\">\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 (keydown)=\"onPanelHeaderChildKeydown($event)\"\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 (keydown)=\"onPanelHeaderChildKeydown($event)\"\r\n class=\"btn-download-mobile\"\r\n [attr.id]=\"getDownloadButton()?.id\"\r\n [attr.aria-label]=\"'BASE_TABLE.downloadAction' | translate\"\r\n >\r\n <mat-icon aria-hidden=\"true\">{{ 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 (keydown)=\"onPanelHeaderChildKeydown($event)\"\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}@media (max-width: 450px){.location-card .mat-expansion-panel-header ::ng-deep .mat-content{flex-direction:column!important;align-items:stretch;gap:12px}.location-card .panel-description{justify-content:flex-start!important;width:100%}.location-card .buttons-wrapper{justify-content:flex-start;width:100%}}.location-card .panel-body{padding:20px 15px;padding-top:0!important}.location-card .panel-body ::ng-deep app-base-form-canvas .main-form-canvas{margin-top:20px!important}.location-card .panel-description{justify-content:end!important;margin:0!important}.location-card .card-header{display:flex;justify-content:space-between;align-items:center;padding:16px!important;cursor:default}.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"] }] }); }
|
|
4686
4908
|
}
|
|
4687
4909
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SectionFormCanvasComponent, decorators: [{
|
|
4688
4910
|
type: Component,
|
|
@@ -4702,7 +4924,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
4702
4924
|
MatMenu,
|
|
4703
4925
|
MatMenuTrigger,
|
|
4704
4926
|
MatMenuItem
|
|
4705
|
-
], 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
|
|
4927
|
+
], 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\r\n class=\"card-header\"\r\n (click)=\"toggleExpand()\"\r\n [tabIndex]=\"expansionHeaderTabIndex\">\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\r\n mat-button\r\n *ngIf=\"itemStatus\"\r\n type=\"button\"\r\n class=\"stateType\"\r\n [ngClass]=\"itemStatus\"\r\n (keydown)=\"onPanelHeaderChildKeydown($event)\">\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 (keydown)=\"onPanelHeaderChildKeydown($event)\"\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 (keydown)=\"onPanelHeaderChildKeydown($event)\"\r\n class=\"btn-download-mobile\"\r\n [attr.id]=\"getDownloadButton()?.id\"\r\n [attr.aria-label]=\"'BASE_TABLE.downloadAction' | translate\"\r\n >\r\n <mat-icon aria-hidden=\"true\">{{ 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 (keydown)=\"onPanelHeaderChildKeydown($event)\"\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}@media (max-width: 450px){.location-card .mat-expansion-panel-header ::ng-deep .mat-content{flex-direction:column!important;align-items:stretch;gap:12px}.location-card .panel-description{justify-content:flex-start!important;width:100%}.location-card .buttons-wrapper{justify-content:flex-start;width:100%}}.location-card .panel-body{padding:20px 15px;padding-top:0!important}.location-card .panel-body ::ng-deep app-base-form-canvas .main-form-canvas{margin-top:20px!important}.location-card .panel-description{justify-content:end!important;margin:0!important}.location-card .card-header{display:flex;justify-content:space-between;align-items:center;padding:16px!important;cursor:default}.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"] }]
|
|
4706
4928
|
}], propDecorators: { pageInfo: [{
|
|
4707
4929
|
type: Input
|
|
4708
4930
|
}], fields: [{
|
|
@@ -4731,6 +4953,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
4731
4953
|
type: Input
|
|
4732
4954
|
}], alwaysOpen: [{
|
|
4733
4955
|
type: Input
|
|
4956
|
+
}], expansionHeaderTabIndex: [{
|
|
4957
|
+
type: Input
|
|
4734
4958
|
}], actionEdit: [{
|
|
4735
4959
|
type: Output
|
|
4736
4960
|
}], formEdit: [{
|
|
@@ -4870,7 +5094,7 @@ class ReportDetailsDialogComponent {
|
|
|
4870
5094
|
return `${mainLine}${directorateLine}`;
|
|
4871
5095
|
}
|
|
4872
5096
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ReportDetailsDialogComponent, deps: [{ token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i2.TranslateService }, { token: BackendService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4873
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ReportDetailsDialogComponent, isStandalone: true, selector: "app-audit-log-details-dialog", host: { listeners: { "window:keyup.esc": "onKeyUp()", "document:click": "onBackdropClick($event)" } }, ngImport: i0, template: "<mat-dialog-content style=\"max-height: 70vh; overflow: auto; position: relative;\">\r\n <button
|
|
5097
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ReportDetailsDialogComponent, isStandalone: true, selector: "app-audit-log-details-dialog", host: { listeners: { "window:keyup.esc": "onKeyUp()", "document:click": "onBackdropClick($event)" } }, ngImport: i0, template: "<mat-dialog-content style=\"max-height: 70vh; overflow: auto; position: relative;\">\r\n <button\r\n mat-icon-button\r\n type=\"button\"\r\n class=\"close-button\"\r\n (click)=\"cancel()\"\r\n [attr.dir]=\"dialogDirection\"\r\n id=\"report-details-close-btn\"\r\n [attr.aria-label]=\"'BASE_TABLE.closeDialog' | translate\">\r\n <mat-icon aria-hidden=\"true\">close</mat-icon>\r\n </button>\r\n\r\n <h1 mat-dialog-title [innerHTML]=\"getTitle()\"></h1>\r\n\r\n <app-base-table\r\n [pageInfo]=\"pageInfo\"\r\n [columns]=\"columns\"\r\n id=\"junior\"\r\n [enforceRefresh]=\"true\"\r\n [reportRequest]=\"reportRequest\">\r\n </app-base-table>\r\n</mat-dialog-content>\r\n\r\n", styles: ["::ng-deep .mat-dialog-actions{justify-content:flex-end!important}.close-button{position:absolute;right:8px;top:8px;z-index:10;background-color:#fff;border-radius:50%}:host-context([dir=\"rtl\"]) .close-button{right:auto;left:8px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
|
|
4874
5098
|
}
|
|
4875
5099
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ReportDetailsDialogComponent, decorators: [{
|
|
4876
5100
|
type: Component,
|
|
@@ -4882,7 +5106,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
4882
5106
|
MatDialogTitle,
|
|
4883
5107
|
MatIconButton,
|
|
4884
5108
|
MatIcon
|
|
4885
|
-
], template: "<mat-dialog-content style=\"max-height: 70vh; overflow: auto; position: relative;\">\r\n <button
|
|
5109
|
+
], template: "<mat-dialog-content style=\"max-height: 70vh; overflow: auto; position: relative;\">\r\n <button\r\n mat-icon-button\r\n type=\"button\"\r\n class=\"close-button\"\r\n (click)=\"cancel()\"\r\n [attr.dir]=\"dialogDirection\"\r\n id=\"report-details-close-btn\"\r\n [attr.aria-label]=\"'BASE_TABLE.closeDialog' | translate\">\r\n <mat-icon aria-hidden=\"true\">close</mat-icon>\r\n </button>\r\n\r\n <h1 mat-dialog-title [innerHTML]=\"getTitle()\"></h1>\r\n\r\n <app-base-table\r\n [pageInfo]=\"pageInfo\"\r\n [columns]=\"columns\"\r\n id=\"junior\"\r\n [enforceRefresh]=\"true\"\r\n [reportRequest]=\"reportRequest\">\r\n </app-base-table>\r\n</mat-dialog-content>\r\n\r\n", styles: ["::ng-deep .mat-dialog-actions{justify-content:flex-end!important}.close-button{position:absolute;right:8px;top:8px;z-index:10;background-color:#fff;border-radius:50%}:host-context([dir=\"rtl\"]) .close-button{right:auto;left:8px}\n"] }]
|
|
4886
5110
|
}], ctorParameters: () => [{ type: i1.MatDialogRef }, { type: undefined, decorators: [{
|
|
4887
5111
|
type: Inject,
|
|
4888
5112
|
args: [MAT_DIALOG_DATA]
|
|
@@ -5315,8 +5539,8 @@ class ReportFormComponent {
|
|
|
5315
5539
|
const value = item[groupByProp].toString();
|
|
5316
5540
|
return !groupByValues.some(v => value.includes(v) && value.length >= v.length);
|
|
5317
5541
|
}
|
|
5318
|
-
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$
|
|
5319
|
-
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:
|
|
5542
|
+
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$3.ActivatedRoute }, { token: i0.Injector }, { token: i3$3.Router }, { token: i3$3.ActivatedRoute }, { token: i3$1.Directionality }, { token: i1.MatDialog }, { token: i3.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5543
|
+
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 role=\"img\"\r\n [attr.aria-label]=\"(pageInfo.labelsSection + '.hint') | translate\"\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: i7.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: i3$2.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"] }] }); }
|
|
5320
5544
|
}
|
|
5321
5545
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ReportFormComponent, decorators: [{
|
|
5322
5546
|
type: Component,
|
|
@@ -5334,8 +5558,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
5334
5558
|
MatIconModule,
|
|
5335
5559
|
MatButton,
|
|
5336
5560
|
MatTooltip
|
|
5337
|
-
], 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"] }]
|
|
5338
|
-
}], ctorParameters: () => [{ type: i2.TranslateService }, { type: BackendService }, { type: i3$
|
|
5561
|
+
], 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 role=\"img\"\r\n [attr.aria-label]=\"(pageInfo.labelsSection + '.hint') | translate\"\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"] }]
|
|
5562
|
+
}], ctorParameters: () => [{ type: i2.TranslateService }, { type: BackendService }, { type: i3$3.ActivatedRoute }, { type: i0.Injector }, { type: i3$3.Router }, { type: i3$3.ActivatedRoute }, { type: i3$1.Directionality }, { type: i1.MatDialog }, { type: i3.FormBuilder }], propDecorators: { showDetails: [{
|
|
5339
5563
|
type: Input
|
|
5340
5564
|
}], showExtractButton: [{
|
|
5341
5565
|
type: Input
|
|
@@ -5775,8 +5999,8 @@ class ActivityReportFormComponent {
|
|
|
5775
5999
|
const value = item[groupByProp].toString();
|
|
5776
6000
|
return !groupByValues.some(v => value.includes(v) && value.length >= v.length);
|
|
5777
6001
|
}
|
|
5778
|
-
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$
|
|
5779
|
-
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:
|
|
6002
|
+
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$3.ActivatedRoute }, { token: i0.Injector }, { token: i3$3.Router }, { token: i3$3.ActivatedRoute }, { token: i1.MatDialog }, { token: i3$1.Directionality }, { token: i3.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6003
|
+
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: i7.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: i3$2.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"] }] }); }
|
|
5780
6004
|
}
|
|
5781
6005
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ActivityReportFormComponent, decorators: [{
|
|
5782
6006
|
type: Component,
|
|
@@ -5795,7 +6019,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
5795
6019
|
MatButton,
|
|
5796
6020
|
MatTooltip
|
|
5797
6021
|
], 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"] }]
|
|
5798
|
-
}], ctorParameters: () => [{ type: i2.TranslateService }, { type: BackendService }, { type: i3$
|
|
6022
|
+
}], ctorParameters: () => [{ type: i2.TranslateService }, { type: BackendService }, { type: i3$3.ActivatedRoute }, { type: i0.Injector }, { type: i3$3.Router }, { type: i3$3.ActivatedRoute }, { type: i1.MatDialog }, { type: i3$1.Directionality }, { type: i3.FormBuilder }], propDecorators: { showDetails: [{
|
|
5799
6023
|
type: Input
|
|
5800
6024
|
}], showExtractButton: [{
|
|
5801
6025
|
type: Input
|
|
@@ -5918,12 +6142,13 @@ class SearchBarComponent {
|
|
|
5918
6142
|
return this.columns.filter((column) => ['text', 'date', 'localDateTime'].includes(column.type));
|
|
5919
6143
|
}
|
|
5920
6144
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SearchBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5921
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SearchBarComponent, isStandalone: true, selector: "ag-search-bar", inputs: { columns: "columns", defaultSortKey: "defaultSortKey" }, outputs: { searchTriggered: "searchTriggered" }, ngImport: i0, template: "<div class=\"mainSearchBar\">\r\n <div class=\"search row align-start-center gap-16\">\r\n\r\n <mat-form-field appearance=\"outline\" class=\"search__field flex-50\">\r\n <input\r\n matInput\r\n class=\"search__input\"\r\n
|
|
6145
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SearchBarComponent, isStandalone: true, selector: "ag-search-bar", inputs: { columns: "columns", defaultSortKey: "defaultSortKey" }, outputs: { searchTriggered: "searchTriggered" }, ngImport: i0, template: "<div class=\"mainSearchBar\">\r\n <div class=\"search row align-start-center gap-16\">\r\n\r\n <mat-form-field appearance=\"outline\" class=\"search__field flex-50\">\r\n <mat-label>{{ 'BASE_TABLE.searchQuery' | translate }}</mat-label>\r\n <input\r\n matInput\r\n class=\"search__input\"\r\n (keydown.enter)=\"onSearch()\"\r\n [(ngModel)]=\"searchValue\" />\r\n </mat-form-field>\r\n\r\n <mat-form-field appearance=\"outline\" class=\"search__field flex-15\">\r\n <mat-label>{{ 'BASE_TABLE.searchMatchType' | translate }}</mat-label>\r\n <mat-select class=\"search__toggle\" [(ngModel)]=\"searchType\">\r\n <mat-option value=\"exact\">Exact</mat-option>\r\n <mat-option value=\"like\">Like</mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <mat-form-field appearance=\"outline\" class=\"search__field flex-15\">\r\n <mat-label>{{ 'BASE_TABLE.sortByColumn' | translate }}</mat-label>\r\n <mat-select class=\"search__toggle\" [(ngModel)]=\"selectedSortKey\">\r\n <mat-option *ngFor=\"let col of getColumns()\" [value]=\"col.property\">\r\n {{ labelKey(col) | translate }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <mat-form-field appearance=\"outline\" class=\"search__field flex-10\">\r\n <mat-label>{{ 'BASE_TABLE.sortDirection' | translate }}</mat-label>\r\n <mat-select class=\"search__toggle\" [(ngModel)]=\"selectedSortType\">\r\n <mat-option value=\"ASC\">ASC</mat-option>\r\n <mat-option value=\"DESC\">DESC</mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <div class=\"search__button row align-center-center\">\r\n <button\r\n type=\"button\"\r\n class=\"icon-design\"\r\n mat-icon-button\r\n (click)=\"onSearch()\"\r\n [attr.aria-label]=\"'BASE_TABLE.runSearch' | translate\">\r\n <mat-icon class=\"icon-search\" color=\"primary\" aria-hidden=\"true\">search</mat-icon>\r\n </button>\r\n </div>\r\n\r\n </div>\r\n</div>\r\n", styles: ["::ng-deep .search__button{display:flex;align-items:center;justify-content:center;height:56px;margin-top:-6px}.row{display:flex;flex-direction:row;width:100%}.column{display:flex;flex-direction:column;width:100%}.align-start-center{align-items:center;justify-content:flex-start}.align-center-center{align-items:center;justify-content:center}.gap-16>*+*{margin-left:16px}.flex-50{flex:0 0 50%}.flex-15{flex:0 0 15%}.flex-10{flex:0 0 10%}.search{width:100%;padding:0 16px;margin-bottom:16px}.search__button{margin-bottom:6px}.icon-search{height:30px;width:30px;font-size:30px;margin-bottom:15px;cursor:pointer}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { 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$2, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] }); }
|
|
5922
6146
|
}
|
|
5923
6147
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SearchBarComponent, decorators: [{
|
|
5924
6148
|
type: Component,
|
|
5925
6149
|
args: [{ selector: 'ag-search-bar', standalone: true, imports: [
|
|
5926
6150
|
MatFormField,
|
|
6151
|
+
MatLabel,
|
|
5927
6152
|
MatSelect,
|
|
5928
6153
|
MatOption$2,
|
|
5929
6154
|
FormsModule,
|
|
@@ -5932,7 +6157,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
5932
6157
|
MatIconButton,
|
|
5933
6158
|
NgForOf,
|
|
5934
6159
|
TranslateModule
|
|
5935
|
-
], template: "<div class=\"mainSearchBar\">\r\n <div class=\"search row align-start-center gap-16\">\r\n\r\n <mat-form-field appearance=\"outline\" class=\"search__field flex-50\">\r\n <input\r\n matInput\r\n class=\"search__input\"\r\n
|
|
6160
|
+
], template: "<div class=\"mainSearchBar\">\r\n <div class=\"search row align-start-center gap-16\">\r\n\r\n <mat-form-field appearance=\"outline\" class=\"search__field flex-50\">\r\n <mat-label>{{ 'BASE_TABLE.searchQuery' | translate }}</mat-label>\r\n <input\r\n matInput\r\n class=\"search__input\"\r\n (keydown.enter)=\"onSearch()\"\r\n [(ngModel)]=\"searchValue\" />\r\n </mat-form-field>\r\n\r\n <mat-form-field appearance=\"outline\" class=\"search__field flex-15\">\r\n <mat-label>{{ 'BASE_TABLE.searchMatchType' | translate }}</mat-label>\r\n <mat-select class=\"search__toggle\" [(ngModel)]=\"searchType\">\r\n <mat-option value=\"exact\">Exact</mat-option>\r\n <mat-option value=\"like\">Like</mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <mat-form-field appearance=\"outline\" class=\"search__field flex-15\">\r\n <mat-label>{{ 'BASE_TABLE.sortByColumn' | translate }}</mat-label>\r\n <mat-select class=\"search__toggle\" [(ngModel)]=\"selectedSortKey\">\r\n <mat-option *ngFor=\"let col of getColumns()\" [value]=\"col.property\">\r\n {{ labelKey(col) | translate }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <mat-form-field appearance=\"outline\" class=\"search__field flex-10\">\r\n <mat-label>{{ 'BASE_TABLE.sortDirection' | translate }}</mat-label>\r\n <mat-select class=\"search__toggle\" [(ngModel)]=\"selectedSortType\">\r\n <mat-option value=\"ASC\">ASC</mat-option>\r\n <mat-option value=\"DESC\">DESC</mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <div class=\"search__button row align-center-center\">\r\n <button\r\n type=\"button\"\r\n class=\"icon-design\"\r\n mat-icon-button\r\n (click)=\"onSearch()\"\r\n [attr.aria-label]=\"'BASE_TABLE.runSearch' | translate\">\r\n <mat-icon class=\"icon-search\" color=\"primary\" aria-hidden=\"true\">search</mat-icon>\r\n </button>\r\n </div>\r\n\r\n </div>\r\n</div>\r\n", styles: ["::ng-deep .search__button{display:flex;align-items:center;justify-content:center;height:56px;margin-top:-6px}.row{display:flex;flex-direction:row;width:100%}.column{display:flex;flex-direction:column;width:100%}.align-start-center{align-items:center;justify-content:flex-start}.align-center-center{align-items:center;justify-content:center}.gap-16>*+*{margin-left:16px}.flex-50{flex:0 0 50%}.flex-15{flex:0 0 15%}.flex-10{flex:0 0 10%}.search{width:100%;padding:0 16px;margin-bottom:16px}.search__button{margin-bottom:6px}.icon-search{height:30px;width:30px;font-size:30px;margin-bottom:15px;cursor:pointer}\n"] }]
|
|
5936
6161
|
}], propDecorators: { columns: [{
|
|
5937
6162
|
type: Input
|
|
5938
6163
|
}], defaultSortKey: [{
|
|
@@ -5954,11 +6179,11 @@ class SnackbarStaticComponent {
|
|
|
5954
6179
|
this.actionBtn.emit();
|
|
5955
6180
|
}
|
|
5956
6181
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SnackbarStaticComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5957
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SnackbarStaticComponent, isStandalone: true, selector: "app-snackbar-static", inputs: { messageKey: "messageKey", titleKey: "titleKey", params: "params", paramsTitle: "paramsTitle", type: "type", width: "width", textBtn: "textBtn" }, outputs: { actionBtn: "actionBtn" }, ngImport: i0, template: "<div class=\"snackbar snackbar-{{type}}\" [ngStyle]=\"{'width': width == 'auto' ? 'auto' : width}\">\r\n <div class=\"sub-snackbar\">\r\n <mat-icon *ngIf=\"type === 'error'\">error</mat-icon>\r\n <mat-icon *ngIf=\"type === 'success'\">check_box</mat-icon>\r\n <mat-icon *ngIf=\"type === 'warning'\">warning</mat-icon>\r\n <mat-icon *ngIf=\"type === 'info'\">info</mat-icon>\r\n <mat-icon *ngIf=\"type === 'help'\">help</mat-icon>\r\n\r\n <div class=\"text-content\">\r\n <div class=\"title\">{{ titleKey | translate : paramsTitle }}</div>\r\n <div class=\"subtitle\">{{ messageKey | translate: params }}</div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"action\" *ngIf=\"textBtn\">\r\n <button mat-stroked-button class=\"btn-none-background-primary action-btn\" (click)=\"submit()\" id=\"snackbar-action-btn\">\r\n {{ textBtn | translate}}\r\n </button>\r\n </div>\r\n</div>\r\n", styles: [".snackbar{position:relative;width:auto;max-width:100%;box-sizing:border-box;background:#fff;border:1.5px solid #1c8c7a;border-radius:10px;padding:12px 20px;display:flex;flex-direction:column;color:#1c8c7a;box-shadow:0 2px 4px #00000014;overflow:hidden;word-break:break-word;overflow-wrap:anywhere;--snackbar-icon-size: clamp(16px, 2.4vw, 20px);--snackbar-title-size: clamp(14px, 2.6vw, 16px);--snackbar-subtitle-size: clamp(12px, 2.3vw, 14px)}.snackbar .sub-snackbar{display:flex;gap:10px;align-items:start}.snackbar .sub-snackbar mat-icon{font-size:var(--snackbar-icon-size);line-height:1;width:1em;height:1em;flex:0 0 auto}.snackbar .sub-snackbar .text-content{display:flex;flex-direction:column;line-height:24px}.snackbar .sub-snackbar .text-content .title{font-weight:400;color:inherit;font-family:lusail-regular,sans-serif;font-size:var(--snackbar-title-size)}.snackbar .sub-snackbar .text-content .subtitle{font-weight:400;color:#888;font-family:lusail-light,sans-serif;font-size:var(--snackbar-subtitle-size);margin-top:3px!important}.snackbar .action{display:flex;justify-content:flex-end}.snackbar .action .action-btn{font-size:var(--snackbar-title-size);font-weight:400;border-radius:8px;min-height:
|
|
6182
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SnackbarStaticComponent, isStandalone: true, selector: "app-snackbar-static", inputs: { messageKey: "messageKey", titleKey: "titleKey", params: "params", paramsTitle: "paramsTitle", type: "type", width: "width", textBtn: "textBtn" }, outputs: { actionBtn: "actionBtn" }, ngImport: i0, template: "<div class=\"snackbar snackbar-{{type}}\" [ngStyle]=\"{'width': width == 'auto' ? 'auto' : width}\">\r\n <div class=\"sub-snackbar\">\r\n <mat-icon *ngIf=\"type === 'error'\">error</mat-icon>\r\n <mat-icon *ngIf=\"type === 'success'\">check_box</mat-icon>\r\n <mat-icon *ngIf=\"type === 'warning'\">warning</mat-icon>\r\n <mat-icon *ngIf=\"type === 'info'\">info</mat-icon>\r\n <mat-icon *ngIf=\"type === 'help'\">help</mat-icon>\r\n\r\n <div class=\"text-content\">\r\n <div class=\"title\">{{ titleKey | translate : paramsTitle }}</div>\r\n <div class=\"subtitle\">{{ messageKey | translate: params }}</div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"action\" *ngIf=\"textBtn\">\r\n <button mat-stroked-button class=\"btn-none-background-primary action-btn\" (click)=\"submit()\" id=\"snackbar-action-btn\">\r\n {{ textBtn | translate}}\r\n </button>\r\n </div>\r\n</div>\r\n", styles: [".snackbar{position:relative;width:auto;max-width:100%;box-sizing:border-box;background:#fff;border:1.5px solid #1c8c7a;border-radius:10px;padding:12px 20px;display:flex;flex-direction:column;color:#1c8c7a;box-shadow:0 2px 4px #00000014;overflow:hidden;word-break:break-word;overflow-wrap:anywhere;--snackbar-icon-size: clamp(16px, 2.4vw, 20px);--snackbar-title-size: clamp(14px, 2.6vw, 16px);--snackbar-subtitle-size: clamp(12px, 2.3vw, 14px)}.snackbar .sub-snackbar{display:flex;gap:10px;align-items:start}.snackbar .sub-snackbar mat-icon{font-size:var(--snackbar-icon-size);line-height:1;width:1em;height:1em;flex:0 0 auto}.snackbar .sub-snackbar .text-content{display:flex;flex-direction:column;line-height:24px}.snackbar .sub-snackbar .text-content .title{font-weight:400;color:inherit;font-family:lusail-regular,sans-serif;font-size:var(--snackbar-title-size)}.snackbar .sub-snackbar .text-content .subtitle{font-weight:400;color:#888;font-family:lusail-light,sans-serif;font-size:var(--snackbar-subtitle-size);margin-top:3px!important}.snackbar .action{display:flex;justify-content:flex-end}.snackbar .action .action-btn{font-size:var(--snackbar-title-size);font-weight:400;border-radius:8px;min-height:44px!important;margin:0!important;min-width:fit-content;max-width:100%}.snackbar .action .action-btn mat-icon{font-size:var(--snackbar-icon-size)}.snackbar-success{border-color:#0d7d6a;color:#0d7d6a}.snackbar-error{border-color:#a42b2b;color:#a42b2b}.snackbar-warning{border-color:#b54708;color:#b54708}.snackbar-info{border-color:#0d47a1;color:#0d47a1}.snackbar-help{border-color:var(--primary-color-3nd);color:var(--primary-color-3nd)}@media (max-width: 600px){.snackbar{padding:10px 14px;--snackbar-icon-size: clamp(16px, 3.6vw, 18px);--snackbar-title-size: clamp(14px, 3.8vw, 15px);--snackbar-subtitle-size: clamp(12px, 3.4vw, 13px)}.snackbar .sub-snackbar{gap:8px}.snackbar .sub-snackbar .text-content{line-height:22px}.snackbar .action{margin-top:8px}.snackbar .action .action-btn{width:100%;font-size:var(--snackbar-title-size)}}@media (max-width: 360px){.snackbar{padding:8px 10px;border-radius:8px;--snackbar-icon-size: clamp(14px, 4.5vw, 16px);--snackbar-title-size: clamp(13px, 4.6vw, 14px);--snackbar-subtitle-size: clamp(11px, 4.2vw, 12px)}}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "component", type: MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
|
|
5958
6183
|
}
|
|
5959
6184
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SnackbarStaticComponent, decorators: [{
|
|
5960
6185
|
type: Component,
|
|
5961
|
-
args: [{ selector: 'app-snackbar-static', standalone: true, imports: [MatIcon, NgIf, TranslateModule, MatIconButton, MatButton, NgStyle], template: "<div class=\"snackbar snackbar-{{type}}\" [ngStyle]=\"{'width': width == 'auto' ? 'auto' : width}\">\r\n <div class=\"sub-snackbar\">\r\n <mat-icon *ngIf=\"type === 'error'\">error</mat-icon>\r\n <mat-icon *ngIf=\"type === 'success'\">check_box</mat-icon>\r\n <mat-icon *ngIf=\"type === 'warning'\">warning</mat-icon>\r\n <mat-icon *ngIf=\"type === 'info'\">info</mat-icon>\r\n <mat-icon *ngIf=\"type === 'help'\">help</mat-icon>\r\n\r\n <div class=\"text-content\">\r\n <div class=\"title\">{{ titleKey | translate : paramsTitle }}</div>\r\n <div class=\"subtitle\">{{ messageKey | translate: params }}</div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"action\" *ngIf=\"textBtn\">\r\n <button mat-stroked-button class=\"btn-none-background-primary action-btn\" (click)=\"submit()\" id=\"snackbar-action-btn\">\r\n {{ textBtn | translate}}\r\n </button>\r\n </div>\r\n</div>\r\n", styles: [".snackbar{position:relative;width:auto;max-width:100%;box-sizing:border-box;background:#fff;border:1.5px solid #1c8c7a;border-radius:10px;padding:12px 20px;display:flex;flex-direction:column;color:#1c8c7a;box-shadow:0 2px 4px #00000014;overflow:hidden;word-break:break-word;overflow-wrap:anywhere;--snackbar-icon-size: clamp(16px, 2.4vw, 20px);--snackbar-title-size: clamp(14px, 2.6vw, 16px);--snackbar-subtitle-size: clamp(12px, 2.3vw, 14px)}.snackbar .sub-snackbar{display:flex;gap:10px;align-items:start}.snackbar .sub-snackbar mat-icon{font-size:var(--snackbar-icon-size);line-height:1;width:1em;height:1em;flex:0 0 auto}.snackbar .sub-snackbar .text-content{display:flex;flex-direction:column;line-height:24px}.snackbar .sub-snackbar .text-content .title{font-weight:400;color:inherit;font-family:lusail-regular,sans-serif;font-size:var(--snackbar-title-size)}.snackbar .sub-snackbar .text-content .subtitle{font-weight:400;color:#888;font-family:lusail-light,sans-serif;font-size:var(--snackbar-subtitle-size);margin-top:3px!important}.snackbar .action{display:flex;justify-content:flex-end}.snackbar .action .action-btn{font-size:var(--snackbar-title-size);font-weight:400;border-radius:8px;min-height:
|
|
6186
|
+
args: [{ selector: 'app-snackbar-static', standalone: true, imports: [MatIcon, NgIf, TranslateModule, MatIconButton, MatButton, NgStyle], template: "<div class=\"snackbar snackbar-{{type}}\" [ngStyle]=\"{'width': width == 'auto' ? 'auto' : width}\">\r\n <div class=\"sub-snackbar\">\r\n <mat-icon *ngIf=\"type === 'error'\">error</mat-icon>\r\n <mat-icon *ngIf=\"type === 'success'\">check_box</mat-icon>\r\n <mat-icon *ngIf=\"type === 'warning'\">warning</mat-icon>\r\n <mat-icon *ngIf=\"type === 'info'\">info</mat-icon>\r\n <mat-icon *ngIf=\"type === 'help'\">help</mat-icon>\r\n\r\n <div class=\"text-content\">\r\n <div class=\"title\">{{ titleKey | translate : paramsTitle }}</div>\r\n <div class=\"subtitle\">{{ messageKey | translate: params }}</div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"action\" *ngIf=\"textBtn\">\r\n <button mat-stroked-button class=\"btn-none-background-primary action-btn\" (click)=\"submit()\" id=\"snackbar-action-btn\">\r\n {{ textBtn | translate}}\r\n </button>\r\n </div>\r\n</div>\r\n", styles: [".snackbar{position:relative;width:auto;max-width:100%;box-sizing:border-box;background:#fff;border:1.5px solid #1c8c7a;border-radius:10px;padding:12px 20px;display:flex;flex-direction:column;color:#1c8c7a;box-shadow:0 2px 4px #00000014;overflow:hidden;word-break:break-word;overflow-wrap:anywhere;--snackbar-icon-size: clamp(16px, 2.4vw, 20px);--snackbar-title-size: clamp(14px, 2.6vw, 16px);--snackbar-subtitle-size: clamp(12px, 2.3vw, 14px)}.snackbar .sub-snackbar{display:flex;gap:10px;align-items:start}.snackbar .sub-snackbar mat-icon{font-size:var(--snackbar-icon-size);line-height:1;width:1em;height:1em;flex:0 0 auto}.snackbar .sub-snackbar .text-content{display:flex;flex-direction:column;line-height:24px}.snackbar .sub-snackbar .text-content .title{font-weight:400;color:inherit;font-family:lusail-regular,sans-serif;font-size:var(--snackbar-title-size)}.snackbar .sub-snackbar .text-content .subtitle{font-weight:400;color:#888;font-family:lusail-light,sans-serif;font-size:var(--snackbar-subtitle-size);margin-top:3px!important}.snackbar .action{display:flex;justify-content:flex-end}.snackbar .action .action-btn{font-size:var(--snackbar-title-size);font-weight:400;border-radius:8px;min-height:44px!important;margin:0!important;min-width:fit-content;max-width:100%}.snackbar .action .action-btn mat-icon{font-size:var(--snackbar-icon-size)}.snackbar-success{border-color:#0d7d6a;color:#0d7d6a}.snackbar-error{border-color:#a42b2b;color:#a42b2b}.snackbar-warning{border-color:#b54708;color:#b54708}.snackbar-info{border-color:#0d47a1;color:#0d47a1}.snackbar-help{border-color:var(--primary-color-3nd);color:var(--primary-color-3nd)}@media (max-width: 600px){.snackbar{padding:10px 14px;--snackbar-icon-size: clamp(16px, 3.6vw, 18px);--snackbar-title-size: clamp(14px, 3.8vw, 15px);--snackbar-subtitle-size: clamp(12px, 3.4vw, 13px)}.snackbar .sub-snackbar{gap:8px}.snackbar .sub-snackbar .text-content{line-height:22px}.snackbar .action{margin-top:8px}.snackbar .action .action-btn{width:100%;font-size:var(--snackbar-title-size)}}@media (max-width: 360px){.snackbar{padding:8px 10px;border-radius:8px;--snackbar-icon-size: clamp(14px, 4.5vw, 16px);--snackbar-title-size: clamp(13px, 4.6vw, 14px);--snackbar-subtitle-size: clamp(11px, 4.2vw, 12px)}}\n"] }]
|
|
5962
6187
|
}], propDecorators: { messageKey: [{
|
|
5963
6188
|
type: Input
|
|
5964
6189
|
}], titleKey: [{
|
|
@@ -6006,7 +6231,7 @@ class ActionButtonComponent {
|
|
|
6006
6231
|
this.buttonClick.emit();
|
|
6007
6232
|
}
|
|
6008
6233
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ActionButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6009
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ActionButtonComponent, isStandalone: true, selector: "lib-action-button", inputs: { buttonText: "buttonText", buttonTextKey: "buttonTextKey", buttonGradient: "buttonGradient", id: "id" }, outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: "<button\r\n class=\"action-button\"\r\n (click)=\"onButtonClick()\"\r\n [style.background]=\"buttonGradient\"\r\n [attr.id]=\"id || (buttonTextKey ? ('action-button-' + buttonTextKey) : 'action-button')\"\r\n type=\"button\">\r\n <span class=\"button-texts\">\r\n <span *ngIf=\"buttonTextKey\">{{ buttonTextKey | translate }}</span>\r\n <span *ngIf=\"!buttonTextKey\">{{ buttonText }}</span>\r\n </span>\r\n <mat-icon class=\"arrow-icon\" [class.arrow-rtl]=\"isArabic\">arrow_forward</mat-icon>\r\n</button>\r\n", styles: [".action-button{display:flex;align-items:center;justify-content:center;gap:16px;height:62px;border-radius:16px;border:none;position:relative;overflow:hidden;cursor:pointer;width:100%;padding:0;background-size:cover;background-position:center;margin-top:15px}.action-button .button-texts{font-family:lusail-medium,sans-serif!important;font-weight:500!important;font-size:24px!important;line-height:1.2!important;color:#2e2e2e!important;white-space:nowrap;position:relative;z-index:1}.action-button .arrow-icon{font-size:24px!important;width:24px;height:30px;color:#2e2e2e;position:relative;z-index:1}.action-button .arrow-icon.arrow-rtl{transform:rotate(180deg)}.action-button:hover{opacity:.9}@media (max-width: 1579px){.action-button{height:56px;gap:12px;margin-top:12px;border-radius:14px}.action-button .button-texts{font-size:20px!important}.action-button .arrow-icon{font-size:20px!important;width:20px;height:26px}}@media (max-width: 1199px){.action-button{height:48px;gap:10px;margin-top:10px;border-radius:12px}.action-button .button-texts{font-size:18px!important}.action-button .arrow-icon{font-size:18px!important;width:18px;height:24px}}@media (max-width: 991px){.action-button .button-texts{white-space:normal;text-align:center}}@media (max-width: 768px){.action-button{height:40px;gap:8px;margin-top:8px;border-radius:12px}.action-button .button-texts{font-size:16px!important}.action-button .arrow-icon{font-size:18px!important;width:18px;height:22px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type:
|
|
6234
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ActionButtonComponent, isStandalone: true, selector: "lib-action-button", inputs: { buttonText: "buttonText", buttonTextKey: "buttonTextKey", buttonGradient: "buttonGradient", id: "id" }, outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: "<button\r\n class=\"action-button\"\r\n (click)=\"onButtonClick()\"\r\n [style.background]=\"buttonGradient\"\r\n [attr.id]=\"id || (buttonTextKey ? ('action-button-' + buttonTextKey) : 'action-button')\"\r\n type=\"button\">\r\n <span class=\"button-texts\">\r\n <span *ngIf=\"buttonTextKey\">{{ buttonTextKey | translate }}</span>\r\n <span *ngIf=\"!buttonTextKey\">{{ buttonText }}</span>\r\n </span>\r\n <mat-icon class=\"arrow-icon\" [class.arrow-rtl]=\"isArabic\">arrow_forward</mat-icon>\r\n</button>\r\n", styles: [".action-button{display:flex;align-items:center;justify-content:center;gap:16px;height:62px;border-radius:16px;border:none;position:relative;overflow:hidden;cursor:pointer;width:100%;padding:0;background-size:cover;background-position:center;margin-top:15px}.action-button .button-texts{font-family:lusail-medium,sans-serif!important;font-weight:500!important;font-size:24px!important;line-height:1.2!important;color:#2e2e2e!important;white-space:nowrap;position:relative;z-index:1}.action-button .arrow-icon{font-size:24px!important;width:24px;height:30px;color:#2e2e2e;position:relative;z-index:1}.action-button .arrow-icon.arrow-rtl{transform:rotate(180deg)}.action-button:hover{opacity:.9}@media (max-width: 1579px){.action-button{height:56px;gap:12px;margin-top:12px;border-radius:14px}.action-button .button-texts{font-size:20px!important}.action-button .arrow-icon{font-size:20px!important;width:20px;height:26px}}@media (max-width: 1199px){.action-button{height:48px;gap:10px;margin-top:10px;border-radius:12px}.action-button .button-texts{font-size:18px!important}.action-button .arrow-icon{font-size:18px!important;width:18px;height:24px}}@media (max-width: 991px){.action-button .button-texts{white-space:normal;text-align:center}}@media (max-width: 768px){.action-button{height:40px;gap:8px;margin-top:8px;border-radius:12px}.action-button .button-texts{font-size:16px!important}.action-button .arrow-icon{font-size:18px!important;width:18px;height:22px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] }); }
|
|
6010
6235
|
}
|
|
6011
6236
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ActionButtonComponent, decorators: [{
|
|
6012
6237
|
type: Component,
|
|
@@ -6047,7 +6272,7 @@ class ActionCardComponent {
|
|
|
6047
6272
|
this.buttonClick.emit();
|
|
6048
6273
|
}
|
|
6049
6274
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ActionCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6050
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ActionCardComponent, isStandalone: true, selector: "lib-action-card", inputs: { icon: "icon", iconSvg: "iconSvg", title: "title", description: "description", buttonText: "buttonText", buttonTextKey: "buttonTextKey", titleKey: "titleKey", descriptionKey: "descriptionKey", iconColor: "iconColor", borderColor: "borderColor", borderLeftColor: "borderLeftColor", borderRightColor: "borderRightColor", borderBottomColor: "borderBottomColor", topBorderColor: "topBorderColor", topBorderGradient: "topBorderGradient", buttonGradient: "buttonGradient", decorativeIconColor: "decorativeIconColor", featureCheckIconColor: "featureCheckIconColor", variant: "variant", iconSize: "iconSize", features: "features", featuresHeading: "featuresHeading", featuresHeadingKey: "featuresHeadingKey", showDivider: "showDivider", topBorderHeight: "topBorderHeight" }, outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: "<div class=\"action-card\" \r\n [class.extended-variant]=\"variant === 'extended'\"\r\n [style.--top-border-gradient]=\"topBorderGradient || buttonGradient\" \r\n [style.--top-border-height]=\"topBorderHeight + 'px'\"\r\n [style.border-right-color]=\"borderRightColor || borderColor\" \r\n [style.border-bottom-color]=\"borderBottomColor || borderColor\" \r\n [style.border-left-color]=\"borderLeftColor || borderColor\">\r\n <div class=\"card-content\" [class.extended-content]=\"variant === 'extended'\">\r\n <div class=\"main-content\" [class.extended-main]=\"variant === 'extended'\">\r\n <div class=\"header-section\" [class.extended-header]=\"variant === 'extended'\">\r\n <div class=\"header-top-wrapper\" *ngIf=\"variant === 'default'\">\r\n <div class=\"icon-wrapper\" \r\n [style.color]=\"iconColor\"\r\n [style.width.px]=\"iconSize\"\r\n [style.height.px]=\"iconSize\">\r\n <img *ngIf=\"iconSvg\" [src]=\"iconSvg\" alt=\"\" class=\"icon-svg\" [style.width.px]=\"iconSize\" [style.height.px]=\"iconSize\" />\r\n <mat-icon *ngIf=\"!iconSvg && icon\" [style.font-size.px]=\"iconSize\" [style.width.px]=\"iconSize\" [style.height.px]=\"iconSize\">{{ icon }}</mat-icon>\r\n </div>\r\n <div class=\"header-top\">\r\n <h2 class=\"card-title\">\r\n <span *ngIf=\"titleKey\">{{ titleKey | translate }}</span>\r\n <span *ngIf=\"!titleKey\">{{ title }}</span>\r\n </h2>\r\n </div>\r\n </div>\r\n <div class=\"icon-wrapper\" \r\n *ngIf=\"variant === 'extended'\"\r\n [style.color]=\"iconColor\"\r\n [style.width.px]=\"iconSize\"\r\n [style.height.px]=\"iconSize\">\r\n <img *ngIf=\"iconSvg\" [src]=\"iconSvg\" alt=\"\" class=\"icon-svg\" [style.width.px]=\"iconSize\" [style.height.px]=\"iconSize\" />\r\n <mat-icon *ngIf=\"!iconSvg && icon\" [style.font-size.px]=\"iconSize\" [style.width.px]=\"iconSize\" [style.height.px]=\"iconSize\">{{ icon }}</mat-icon>\r\n </div>\r\n <div class=\"title-description-wrapper\" *ngIf=\"variant === 'extended'\">\r\n <h2 class=\"card-title\">\r\n <span *ngIf=\"titleKey\">{{ titleKey | translate }}</span>\r\n <span *ngIf=\"!titleKey\">{{ title }}</span>\r\n </h2>\r\n <p class=\"card-description\">\r\n <span *ngIf=\"descriptionKey\">{{ descriptionKey | translate }}</span>\r\n <span *ngIf=\"!descriptionKey\">{{ description }}</span>\r\n </p>\r\n </div>\r\n <p class=\"card-description\" *ngIf=\"variant === 'default'\">\r\n <span *ngIf=\"descriptionKey\">{{ descriptionKey | translate }}</span>\r\n <span *ngIf=\"!descriptionKey\">{{ description }}</span>\r\n </p>\r\n </div>\r\n <lib-action-button\r\n [buttonText]=\"buttonText\"\r\n [buttonTextKey]=\"buttonTextKey\"\r\n [buttonGradient]=\"buttonGradient\"\r\n (buttonClick)=\"onButtonClick()\">\r\n </lib-action-button>\r\n <div class=\"features-divider\" *ngIf=\"showDivider && features && features.length > 0\"></div>\r\n \r\n <div class=\"features-section\" *ngIf=\"features && features.length > 0\">\r\n <h3 class=\"features-heading\" *ngIf=\"featuresHeading || featuresHeadingKey\">\r\n <span *ngIf=\"featuresHeadingKey\">{{ featuresHeadingKey | translate }}</span>\r\n <span *ngIf=\"!featuresHeadingKey\">{{ featuresHeading }}</span>\r\n </h3>\r\n <div class=\"feature-item\" *ngFor=\"let feature of features\">\r\n <mat-icon class=\"feature-check-icon\" [style.color]=\"featureCheckIconColor || iconColor\">check_circle</mat-icon>\r\n <span class=\"feature-text\">\r\n <span *ngIf=\"feature.textKey\">{{ feature.textKey | translate }}</span>\r\n <span *ngIf=\"!feature.textKey\">{{ feature.text }}</span>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"decorative-icon-wrapper\" *ngIf=\"variant === 'default' && (icon || iconSvg)\">\r\n <div class=\"decorative-icon\">\r\n <img *ngIf=\"iconSvg\" [src]=\"iconSvg\" alt=\"\" class=\"decorative-icon-svg\" [style.filter]=\"'opacity(0.3)'\" />\r\n <mat-icon *ngIf=\"!iconSvg && icon\" [style.color]=\"decorativeIconColor\">{{ icon }}</mat-icon>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".action-card{background-color:var(--grayscale-surface-default, #ffffff);border-right:1px solid;border-bottom:1px solid;border-left:1px solid;border-radius:16px;width:100%;height:100%;min-height:247px;position:relative;overflow:hidden}.action-card:before{content:\"\";position:absolute;top:0;left:0;right:0;height:var(--top-border-height, 12px);background:var(--top-border-gradient, var(--button-gradient, linear-gradient(90deg, #E4C9D0 0%, #8A1538 100%)));border-radius:16px 16px 0 0;z-index:1}.action-card.extended-variant{min-height:572px}.card-content{display:flex;gap:8px;align-items:flex-start;padding:16px 20px;height:100%;position:relative;overflow:hidden;box-sizing:border-box}.card-content.extended-content{padding:20px;gap:0}.main-content{flex:1 1 0;display:flex;flex-direction:column;gap:64px;min-width:0;min-height:0}.main-content.extended-main{gap:24px}.header-section{display:flex;flex-direction:column;gap:12px;width:100%;height:83px}.header-section.extended-header{height:auto;gap:20px}.header-top-wrapper{display:flex;flex-direction:row;gap:12px;align-items:flex-start;width:100%}.header-top{display:flex;gap:8px;align-items:flex-start;flex:1}.title-description-wrapper{display:flex;flex-direction:column;gap:16px;width:100%}.icon-wrapper{flex-shrink:0;width:40px;height:40px;display:flex;align-items:center;justify-content:center;overflow:hidden}.icon-wrapper mat-icon{font-size:40px;width:40px;height:40px}.icon-wrapper .icon-svg{width:40px;height:40px;object-fit:contain}.card-title{font-family:lusail-bold,sans-serif;font-weight:700;font-size:24px!important;line-height:1.2;color:#222;margin:0;height:40px;display:flex;align-items:flex-end;justify-content:flex-start;flex:1}.extended-variant .card-title{color:#000;height:auto}.card-description{font-family:lusail-regular,sans-serif;font-weight:400;font-size:20px!important;line-height:1.2;color:#888;margin:0;height:40px;display:flex;align-items:center}.extended-variant .card-description{font-family:lusail-light,sans-serif;font-weight:300;height:100px}.decorative-icon-wrapper{position:relative;width:153px;height:211px;flex-shrink:0}.decorative-icon{position:absolute;left:0;top:43px;width:144px;height:152px;opacity:.3;display:flex;align-items:center;justify-content:center;pointer-events:none;overflow:hidden}.decorative-icon mat-icon{font-size:152px;width:144px;height:152px}.decorative-icon .decorative-icon-svg{width:144px;height:152px;object-fit:contain}.features-divider{width:100%;height:1px;background-color:#e9e9e9;margin:0}.features-section{display:flex;flex-direction:column;gap:24px;width:100%}.features-section .feature-item:not(:last-child){margin-bottom:0}.features-heading{font-family:lusail-bold,sans-serif;font-weight:700;font-size:20px!important;line-height:1.2;color:#2e2e2e;margin:0;padding:0}.feature-item{display:flex;gap:20px;align-items:center;width:100%;padding:0;margin:0}.feature-check-icon{font-size:24px!important;width:24px;height:24px;flex-shrink:0}.feature-text{font-family:lusail-light,sans-serif;font-weight:300;font-size:20px!important;line-height:1.2;color:#2e2e2e;flex:1}@media (max-width: 1579px){.card-title{font-size:22px!important}.card-description,.features-heading,.feature-text{font-size:18px!important}.decorative-icon-wrapper{width:130px;height:190px}.decorative-icon{top:38px;width:128px;height:136px}.decorative-icon mat-icon{font-size:136px;width:128px;height:136px}.decorative-icon .decorative-icon-svg{width:128px;height:136px}}@media (max-width: 1199px){.main-content{gap:48px}.main-content.extended-main{gap:20px}.card-title{font-size:20px!important}.card-description{font-size:16px!important}.header-section{height:auto;min-height:72px}}@media (max-width: 768px){.action-card{min-height:221px;border-radius:16px}.action-card.extended-variant{min-height:221px}.card-content,.card-content.extended-content{padding:16px 20px;gap:8px}.main-content,.main-content.extended-main{gap:64px}.header-section,.header-section.extended-header{height:83px;gap:12px}.header-top-wrapper{gap:8px}.icon-wrapper{width:32px;height:32px}.icon-wrapper mat-icon{font-size:32px;width:32px;height:32px}.icon-wrapper .icon-svg{width:32px;height:32px}.card-description{font-size:16px!important;height:auto;line-height:1.2}.title-description-wrapper{gap:12px}.decorative-icon-wrapper{display:none}.features-section{gap:16px}.features-heading{font-size:18px!important}.feature-item{gap:12px}.feature-check-icon{font-size:20px!important;width:20px;height:20px}.feature-text{font-size:16px!important}::ng-deep .solution-cards-row{flex-direction:column!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: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "component", type: ActionButtonComponent, selector: "lib-action-button", inputs: ["buttonText", "buttonTextKey", "buttonGradient", "id"], outputs: ["buttonClick"] }] }); }
|
|
6275
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ActionCardComponent, isStandalone: true, selector: "lib-action-card", inputs: { icon: "icon", iconSvg: "iconSvg", title: "title", description: "description", buttonText: "buttonText", buttonTextKey: "buttonTextKey", titleKey: "titleKey", descriptionKey: "descriptionKey", iconColor: "iconColor", borderColor: "borderColor", borderLeftColor: "borderLeftColor", borderRightColor: "borderRightColor", borderBottomColor: "borderBottomColor", topBorderColor: "topBorderColor", topBorderGradient: "topBorderGradient", buttonGradient: "buttonGradient", decorativeIconColor: "decorativeIconColor", featureCheckIconColor: "featureCheckIconColor", variant: "variant", iconSize: "iconSize", features: "features", featuresHeading: "featuresHeading", featuresHeadingKey: "featuresHeadingKey", showDivider: "showDivider", topBorderHeight: "topBorderHeight" }, outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: "<div class=\"action-card\" \r\n [class.extended-variant]=\"variant === 'extended'\"\r\n [style.--top-border-gradient]=\"topBorderGradient || buttonGradient\" \r\n [style.--top-border-height]=\"topBorderHeight + 'px'\"\r\n [style.border-right-color]=\"borderRightColor || borderColor\" \r\n [style.border-bottom-color]=\"borderBottomColor || borderColor\" \r\n [style.border-left-color]=\"borderLeftColor || borderColor\">\r\n <div class=\"card-content\" [class.extended-content]=\"variant === 'extended'\">\r\n <div class=\"main-content\" [class.extended-main]=\"variant === 'extended'\">\r\n <div class=\"header-section\" [class.extended-header]=\"variant === 'extended'\">\r\n <div class=\"header-top-wrapper\" *ngIf=\"variant === 'default'\">\r\n <div class=\"icon-wrapper\" \r\n [style.color]=\"iconColor\"\r\n [style.width.px]=\"iconSize\"\r\n [style.height.px]=\"iconSize\">\r\n <img *ngIf=\"iconSvg\" [src]=\"iconSvg\" alt=\"\" class=\"icon-svg\" [style.width.px]=\"iconSize\" [style.height.px]=\"iconSize\" />\r\n <mat-icon *ngIf=\"!iconSvg && icon\" [style.font-size.px]=\"iconSize\" [style.width.px]=\"iconSize\" [style.height.px]=\"iconSize\">{{ icon }}</mat-icon>\r\n </div>\r\n <div class=\"header-top\">\r\n <h2 class=\"card-title\">\r\n <span *ngIf=\"titleKey\">{{ titleKey | translate }}</span>\r\n <span *ngIf=\"!titleKey\">{{ title }}</span>\r\n </h2>\r\n </div>\r\n </div>\r\n <div class=\"icon-wrapper\" \r\n *ngIf=\"variant === 'extended'\"\r\n [style.color]=\"iconColor\"\r\n [style.width.px]=\"iconSize\"\r\n [style.height.px]=\"iconSize\">\r\n <img *ngIf=\"iconSvg\" [src]=\"iconSvg\" alt=\"\" class=\"icon-svg\" [style.width.px]=\"iconSize\" [style.height.px]=\"iconSize\" />\r\n <mat-icon *ngIf=\"!iconSvg && icon\" [style.font-size.px]=\"iconSize\" [style.width.px]=\"iconSize\" [style.height.px]=\"iconSize\">{{ icon }}</mat-icon>\r\n </div>\r\n <div class=\"title-description-wrapper\" *ngIf=\"variant === 'extended'\">\r\n <h2 class=\"card-title\">\r\n <span *ngIf=\"titleKey\">{{ titleKey | translate }}</span>\r\n <span *ngIf=\"!titleKey\">{{ title }}</span>\r\n </h2>\r\n <p class=\"card-description\">\r\n <span *ngIf=\"descriptionKey\">{{ descriptionKey | translate }}</span>\r\n <span *ngIf=\"!descriptionKey\">{{ description }}</span>\r\n </p>\r\n </div>\r\n <p class=\"card-description\" *ngIf=\"variant === 'default'\">\r\n <span *ngIf=\"descriptionKey\">{{ descriptionKey | translate }}</span>\r\n <span *ngIf=\"!descriptionKey\">{{ description }}</span>\r\n </p>\r\n </div>\r\n <lib-action-button\r\n [buttonText]=\"buttonText\"\r\n [buttonTextKey]=\"buttonTextKey\"\r\n [buttonGradient]=\"buttonGradient\"\r\n (buttonClick)=\"onButtonClick()\">\r\n </lib-action-button>\r\n <div class=\"features-divider\" *ngIf=\"showDivider && features && features.length > 0\"></div>\r\n \r\n <div class=\"features-section\" *ngIf=\"features && features.length > 0\">\r\n <h3 class=\"features-heading\" *ngIf=\"featuresHeading || featuresHeadingKey\">\r\n <span *ngIf=\"featuresHeadingKey\">{{ featuresHeadingKey | translate }}</span>\r\n <span *ngIf=\"!featuresHeadingKey\">{{ featuresHeading }}</span>\r\n </h3>\r\n <div class=\"feature-item\" *ngFor=\"let feature of features\">\r\n <mat-icon class=\"feature-check-icon\" [style.color]=\"featureCheckIconColor || iconColor\">check_circle</mat-icon>\r\n <span class=\"feature-text\">\r\n <span *ngIf=\"feature.textKey\">{{ feature.textKey | translate }}</span>\r\n <span *ngIf=\"!feature.textKey\">{{ feature.text }}</span>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"decorative-icon-wrapper\" *ngIf=\"variant === 'default' && (icon || iconSvg)\">\r\n <div class=\"decorative-icon\">\r\n <img *ngIf=\"iconSvg\" [src]=\"iconSvg\" alt=\"\" class=\"decorative-icon-svg\" [style.filter]=\"'opacity(0.3)'\" />\r\n <mat-icon *ngIf=\"!iconSvg && icon\" [style.color]=\"decorativeIconColor\">{{ icon }}</mat-icon>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".action-card{background-color:var(--grayscale-surface-default, #ffffff);border-right:1px solid;border-bottom:1px solid;border-left:1px solid;border-radius:16px;width:100%;height:100%;min-height:247px;position:relative;overflow:hidden}.action-card:before{content:\"\";position:absolute;top:0;left:0;right:0;height:var(--top-border-height, 12px);background:var(--top-border-gradient, var(--button-gradient, linear-gradient(90deg, #E4C9D0 0%, #8A1538 100%)));border-radius:16px 16px 0 0;z-index:1}.action-card.extended-variant{min-height:572px}.card-content{display:flex;gap:8px;align-items:flex-start;padding:16px 20px;height:100%;position:relative;overflow:hidden;box-sizing:border-box}.card-content.extended-content{padding:20px;gap:0}.main-content{flex:1 1 0;display:flex;flex-direction:column;gap:64px;min-width:0;min-height:0}.main-content.extended-main{gap:24px}.header-section{display:flex;flex-direction:column;gap:12px;width:100%;height:83px}.header-section.extended-header{height:auto;gap:20px}.header-top-wrapper{display:flex;flex-direction:row;gap:12px;align-items:flex-start;width:100%}.header-top{display:flex;gap:8px;align-items:flex-start;flex:1}.title-description-wrapper{display:flex;flex-direction:column;gap:16px;width:100%}.icon-wrapper{flex-shrink:0;width:40px;height:40px;display:flex;align-items:center;justify-content:center;overflow:hidden}.icon-wrapper mat-icon{font-size:40px;width:40px;height:40px}.icon-wrapper .icon-svg{width:40px;height:40px;object-fit:contain}.card-title{font-family:lusail-bold,sans-serif;font-weight:700;font-size:24px!important;line-height:1.2;color:#222;margin:0;height:40px;display:flex;align-items:flex-end;justify-content:flex-start;flex:1}.extended-variant .card-title{color:#000;height:auto}.card-description{font-family:lusail-regular,sans-serif;font-weight:400;font-size:20px!important;line-height:1.2;color:#888;margin:0;height:40px;display:flex;align-items:center}.extended-variant .card-description{font-family:lusail-light,sans-serif;font-weight:300;height:100px}.decorative-icon-wrapper{position:relative;width:153px;height:211px;flex-shrink:0}.decorative-icon{position:absolute;left:0;top:43px;width:144px;height:152px;opacity:.3;display:flex;align-items:center;justify-content:center;pointer-events:none;overflow:hidden}.decorative-icon mat-icon{font-size:152px;width:144px;height:152px}.decorative-icon .decorative-icon-svg{width:144px;height:152px;object-fit:contain}.features-divider{width:100%;height:1px;background-color:#e9e9e9;margin:0}.features-section{display:flex;flex-direction:column;gap:24px;width:100%}.features-section .feature-item:not(:last-child){margin-bottom:0}.features-heading{font-family:lusail-bold,sans-serif;font-weight:700;font-size:20px!important;line-height:1.2;color:#2e2e2e;margin:0;padding:0}.feature-item{display:flex;gap:20px;align-items:center;width:100%;padding:0;margin:0}.feature-check-icon{font-size:24px!important;width:24px;height:24px;flex-shrink:0}.feature-text{font-family:lusail-light,sans-serif;font-weight:300;font-size:20px!important;line-height:1.2;color:#2e2e2e;flex:1}@media (max-width: 1579px){.card-title{font-size:22px!important}.card-description,.features-heading,.feature-text{font-size:18px!important}.decorative-icon-wrapper{width:130px;height:190px}.decorative-icon{top:38px;width:128px;height:136px}.decorative-icon mat-icon{font-size:136px;width:128px;height:136px}.decorative-icon .decorative-icon-svg{width:128px;height:136px}}@media (max-width: 1199px){.main-content{gap:48px}.main-content.extended-main{gap:20px}.card-title{font-size:20px!important}.card-description{font-size:16px!important}.header-section{height:auto;min-height:72px}}@media (max-width: 768px){.action-card{min-height:221px;border-radius:16px}.action-card.extended-variant{min-height:221px}.card-content,.card-content.extended-content{padding:16px 20px;gap:8px}.main-content,.main-content.extended-main{gap:64px}.header-section,.header-section.extended-header{height:83px;gap:12px}.header-top-wrapper{gap:8px}.icon-wrapper{width:32px;height:32px}.icon-wrapper mat-icon{font-size:32px;width:32px;height:32px}.icon-wrapper .icon-svg{width:32px;height:32px}.card-description{font-size:16px!important;height:auto;line-height:1.2}.title-description-wrapper{gap:12px}.decorative-icon-wrapper{display:none}.features-section{gap:16px}.features-heading{font-size:18px!important}.feature-item{gap:12px}.feature-check-icon{font-size:20px!important;width:20px;height:20px}.feature-text{font-size:16px!important}::ng-deep .solution-cards-row{flex-direction:column!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: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "component", type: ActionButtonComponent, selector: "lib-action-button", inputs: ["buttonText", "buttonTextKey", "buttonGradient", "id"], outputs: ["buttonClick"] }] }); }
|
|
6051
6276
|
}
|
|
6052
6277
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ActionCardComponent, decorators: [{
|
|
6053
6278
|
type: Component,
|
|
@@ -6371,7 +6596,7 @@ class ItemLineEditorComponent {
|
|
|
6371
6596
|
};
|
|
6372
6597
|
}
|
|
6373
6598
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ItemLineEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6374
|
-
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" }] }); }
|
|
6599
|
+
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: i7.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: i3$2.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" }] }); }
|
|
6375
6600
|
}
|
|
6376
6601
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ItemLineEditorComponent, decorators: [{
|
|
6377
6602
|
type: Component,
|
|
@@ -6434,6 +6659,7 @@ class PermissionMatrixComponent {
|
|
|
6434
6659
|
this.expandAllLabelKey = 'GROUPS.expandAll';
|
|
6435
6660
|
this.collapseAllLabelKey = 'GROUPS.collapseAll';
|
|
6436
6661
|
this.readonly = false;
|
|
6662
|
+
this.autoLockView = false;
|
|
6437
6663
|
this.itemsChange = new EventEmitter();
|
|
6438
6664
|
this.permissionChange = new EventEmitter();
|
|
6439
6665
|
}
|
|
@@ -6472,6 +6698,9 @@ class PermissionMatrixComponent {
|
|
|
6472
6698
|
item.permissions[perm.key] = newValue;
|
|
6473
6699
|
}
|
|
6474
6700
|
});
|
|
6701
|
+
if (this.autoLockView) {
|
|
6702
|
+
this.syncViewPermission(item);
|
|
6703
|
+
}
|
|
6475
6704
|
this.emitItemsChange();
|
|
6476
6705
|
}
|
|
6477
6706
|
isPermissionSelected(item, permission) {
|
|
@@ -6480,9 +6709,19 @@ class PermissionMatrixComponent {
|
|
|
6480
6709
|
}
|
|
6481
6710
|
return item.permissions[permission.key];
|
|
6482
6711
|
}
|
|
6712
|
+
isPermissionDisabled(item, permission) {
|
|
6713
|
+
if (this.readonly) {
|
|
6714
|
+
return true;
|
|
6715
|
+
}
|
|
6716
|
+
if (this.autoLockView && permission.key === 'view') {
|
|
6717
|
+
return this.hasNonViewPermission(item);
|
|
6718
|
+
}
|
|
6719
|
+
return false;
|
|
6720
|
+
}
|
|
6483
6721
|
togglePermission(item, permission) {
|
|
6484
|
-
if (this.
|
|
6722
|
+
if (this.isPermissionDisabled(item, permission)) {
|
|
6485
6723
|
return;
|
|
6724
|
+
}
|
|
6486
6725
|
const currentValue = this.isPermissionSelected(item, permission);
|
|
6487
6726
|
const newValue = !currentValue;
|
|
6488
6727
|
if (permission.combinedKeys) {
|
|
@@ -6493,6 +6732,9 @@ class PermissionMatrixComponent {
|
|
|
6493
6732
|
else {
|
|
6494
6733
|
item.permissions[permission.key] = newValue;
|
|
6495
6734
|
}
|
|
6735
|
+
if (this.autoLockView) {
|
|
6736
|
+
this.syncViewPermission(item);
|
|
6737
|
+
}
|
|
6496
6738
|
this.permissionChange.emit({
|
|
6497
6739
|
item,
|
|
6498
6740
|
permissionKey: permission.key,
|
|
@@ -6500,7 +6742,30 @@ class PermissionMatrixComponent {
|
|
|
6500
6742
|
});
|
|
6501
6743
|
this.emitItemsChange();
|
|
6502
6744
|
}
|
|
6745
|
+
hasNonViewPermission(item) {
|
|
6746
|
+
return this.permissions.some(perm => {
|
|
6747
|
+
if (perm.key === 'view') {
|
|
6748
|
+
return false;
|
|
6749
|
+
}
|
|
6750
|
+
if (perm.combinedKeys) {
|
|
6751
|
+
return perm.combinedKeys.some(key => item.permissions[key]);
|
|
6752
|
+
}
|
|
6753
|
+
return !!item.permissions[perm.key];
|
|
6754
|
+
});
|
|
6755
|
+
}
|
|
6756
|
+
syncViewPermission(item) {
|
|
6757
|
+
const viewKey = this.permissions.find(p => p.key === 'view' && !p.combinedKeys)?.key;
|
|
6758
|
+
if (!viewKey) {
|
|
6759
|
+
return;
|
|
6760
|
+
}
|
|
6761
|
+
if (this.hasNonViewPermission(item)) {
|
|
6762
|
+
item.permissions[viewKey] = true;
|
|
6763
|
+
}
|
|
6764
|
+
}
|
|
6503
6765
|
emitItemsChange() {
|
|
6766
|
+
if (this.autoLockView) {
|
|
6767
|
+
this.items.forEach(item => this.syncViewPermission(item));
|
|
6768
|
+
}
|
|
6504
6769
|
this.itemsChange.emit([...this.items]);
|
|
6505
6770
|
}
|
|
6506
6771
|
trackByItem(index, item) {
|
|
@@ -6510,7 +6775,7 @@ class PermissionMatrixComponent {
|
|
|
6510
6775
|
return permission.key;
|
|
6511
6776
|
}
|
|
6512
6777
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PermissionMatrixComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6513
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: PermissionMatrixComponent, isStandalone: true, selector: "lib-permission-matrix", inputs: { items: "items", permissions: "permissions", titleKey: "titleKey", selectAllLabelKey: "selectAllLabelKey", expandAllLabelKey: "expandAllLabelKey", collapseAllLabelKey: "collapseAllLabelKey", readonly: "readonly" }, outputs: { itemsChange: "itemsChange", permissionChange: "permissionChange" }, ngImport: i0, template: "<div class=\"permission-matrix-card\">\r\n <div class=\"matrix-header\">\r\n <h3 class=\"matrix-title\">{{ titleKey | translate }}</h3>\r\n <button\r\n class=\"expand-all-btn\"\r\n type=\"button\"\r\n (click)=\"expandAllGroups()\"\r\n [attr.aria-label]=\"(areAllExpanded() ? collapseAllLabelKey : expandAllLabelKey) | translate\">\r\n <mat-icon class=\"expand-icon\" [class.rotated]=\"areAllExpanded()\">unfold_more</mat-icon>\r\n <span>{{ (areAllExpanded() ? collapseAllLabelKey : expandAllLabelKey) | translate }}</span>\r\n </button>\r\n </div>\r\n\r\n <div class=\"matrix-divider\"></div>\r\n\r\n <div class=\"matrix-accordion-list\">\r\n <div\r\n *ngFor=\"let item of items; trackBy: trackByItem\"\r\n class=\"matrix-accordion-item\"\r\n [class.expanded]=\"item.expanded\">\r\n\r\n <!-- Accordion Header -->\r\n <div\r\n class=\"accordion-header\"\r\n (click)=\"toggleGroup(item)\"\r\n role=\"button\"\r\n tabindex=\"0\"\r\n [attr.aria-expanded]=\"item.expanded\"\r\n (keydown.enter)=\"toggleGroup(item)\"\r\n (keydown.space)=\"toggleGroup(item); $event.preventDefault()\">\r\n <div class=\"accordion-content\">\r\n <h4 class=\"accordion-title\">{{ item.title }}</h4>\r\n <p *ngIf=\"item.description\" class=\"accordion-description\">{{ item.description }}</p>\r\n </div>\r\n <mat-icon class=\"accordion-icon\" [class.rotated]=\"item.expanded\">keyboard_arrow_down</mat-icon>\r\n </div>\r\n\r\n <!-- Accordion Body -->\r\n <ng-container *ngIf=\"item.expanded\">\r\n <div class=\"accordion-divider\"></div>\r\n <div class=\"accordion-body\">\r\n <!-- Permission Header Row -->\r\n <div class=\"permission-header-row\">\r\n <span class=\"permission-group-label\">{{ item.title }}</span>\r\n <div class=\"permission-separator\"></div>\r\n <div class=\"select-all-container\" (click)=\"$event.stopPropagation()\">\r\n <span class=\"select-all-label\">{{ selectAllLabelKey | translate }}</span>\r\n <mat-checkbox\r\n [checked]=\"isAllPermissionsSelected(item)\"\r\n [disabled]=\"readonly\"\r\n (change)=\"toggleSelectAll(item)\"\r\n color=\"primary\"\r\n class=\"select-all-checkbox\">\r\n </mat-checkbox>\r\n </div>\r\n </div>\r\n\r\n <!-- Permissions Row -->\r\n <div class=\"permissions-row\" (click)=\"$event.stopPropagation()\">\r\n <div\r\n *ngFor=\"let permission of permissions; trackBy: trackByPermission\"\r\n class=\"permission-item\">\r\n <mat-checkbox\r\n [checked]=\"isPermissionSelected(item, permission)\"\r\n [disabled]=\"
|
|
6778
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: PermissionMatrixComponent, isStandalone: true, selector: "lib-permission-matrix", inputs: { items: "items", permissions: "permissions", titleKey: "titleKey", selectAllLabelKey: "selectAllLabelKey", expandAllLabelKey: "expandAllLabelKey", collapseAllLabelKey: "collapseAllLabelKey", readonly: "readonly", autoLockView: "autoLockView" }, outputs: { itemsChange: "itemsChange", permissionChange: "permissionChange" }, ngImport: i0, template: "<div class=\"permission-matrix-card\">\r\n <div class=\"matrix-header\">\r\n <h3 class=\"matrix-title\">{{ titleKey | translate }}</h3>\r\n <button\r\n class=\"expand-all-btn\"\r\n type=\"button\"\r\n (click)=\"expandAllGroups()\"\r\n [attr.aria-label]=\"(areAllExpanded() ? collapseAllLabelKey : expandAllLabelKey) | translate\">\r\n <mat-icon class=\"expand-icon\" [class.rotated]=\"areAllExpanded()\">unfold_more</mat-icon>\r\n <span>{{ (areAllExpanded() ? collapseAllLabelKey : expandAllLabelKey) | translate }}</span>\r\n </button>\r\n </div>\r\n\r\n <div class=\"matrix-divider\"></div>\r\n\r\n <div class=\"matrix-accordion-list\">\r\n <div\r\n *ngFor=\"let item of items; trackBy: trackByItem\"\r\n class=\"matrix-accordion-item\"\r\n [class.expanded]=\"item.expanded\">\r\n\r\n <!-- Accordion Header -->\r\n <div\r\n class=\"accordion-header\"\r\n (click)=\"toggleGroup(item)\"\r\n role=\"button\"\r\n tabindex=\"0\"\r\n [attr.aria-expanded]=\"item.expanded\"\r\n (keydown.enter)=\"toggleGroup(item)\"\r\n (keydown.space)=\"toggleGroup(item); $event.preventDefault()\">\r\n <div class=\"accordion-content\">\r\n <h4 class=\"accordion-title\">{{ item.title }}</h4>\r\n <p *ngIf=\"item.description\" class=\"accordion-description\">{{ item.description }}</p>\r\n </div>\r\n <mat-icon class=\"accordion-icon\" [class.rotated]=\"item.expanded\">keyboard_arrow_down</mat-icon>\r\n </div>\r\n\r\n <!-- Accordion Body -->\r\n <ng-container *ngIf=\"item.expanded\">\r\n <div class=\"accordion-divider\"></div>\r\n <div class=\"accordion-body\">\r\n <!-- Permission Header Row -->\r\n <div class=\"permission-header-row\">\r\n <span class=\"permission-group-label\">{{ item.title }}</span>\r\n <div class=\"permission-separator\"></div>\r\n <div class=\"select-all-container\" (click)=\"$event.stopPropagation()\">\r\n <span class=\"select-all-label\">{{ selectAllLabelKey | translate }}</span>\r\n <mat-checkbox\r\n [checked]=\"isAllPermissionsSelected(item)\"\r\n [disabled]=\"readonly\"\r\n (change)=\"toggleSelectAll(item)\"\r\n color=\"primary\"\r\n class=\"select-all-checkbox\">\r\n </mat-checkbox>\r\n </div>\r\n </div>\r\n\r\n <!-- Permissions Row -->\r\n <div class=\"permissions-row\" (click)=\"$event.stopPropagation()\">\r\n <div\r\n *ngFor=\"let permission of permissions; trackBy: trackByPermission\"\r\n class=\"permission-item\">\r\n <mat-checkbox\r\n [checked]=\"isPermissionSelected(item, permission)\"\r\n [disabled]=\"isPermissionDisabled(item, permission)\"\r\n (change)=\"togglePermission(item, permission)\"\r\n color=\"primary\">\r\n </mat-checkbox>\r\n <span class=\"permission-label\">{{ permission.labelKey | translate }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</div>", styles: [".permission-matrix-card{background:#fff;border:1px solid #f0eeee;border-radius:8px;padding:16px;display:flex;flex-direction:column;gap:20px}.matrix-header{display:flex;align-items:center;justify-content:space-between;min-height:27px}.matrix-title{font-family:lusail-bold,sans-serif;font-weight:700;font-size:24px;line-height:1.2;color:#000;margin:0}.expand-all-btn{display:flex;align-items:center;gap:4px;background:transparent;border:none;cursor:pointer;padding:0;font-family:lusail-regular,sans-serif;font-weight:400;font-size:20px;line-height:1.2;color:#000;transition:all .2s ease}.expand-all-btn:hover{color:#0d4261}.expand-all-btn:focus-visible{outline:2px solid #0d4261;outline-offset:2px;border-radius:4px}.expand-icon{font-size:24px;width:24px;height:24px;color:#000;transition:transform .3s ease}.expand-icon.rotated{transform:rotate(180deg)}.matrix-divider{height:2px;background-color:#0d4261;width:100%}.matrix-accordion-list{display:flex;flex-direction:column;gap:0}.matrix-accordion-item{background:#fff;border:1px solid #f0eeee;border-radius:8px;padding:16px;margin-bottom:0;transition:all .2s ease}.matrix-accordion-item:not(:last-child){margin-bottom:20px}.accordion-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;width:100%}.accordion-header:focus-visible{outline:2px solid #0d4261;outline-offset:2px;border-radius:4px}.accordion-content{flex:1;display:flex;flex-direction:column;gap:0}.accordion-title{font-family:lusail-bold,sans-serif;font-weight:700;font-size:20px;line-height:1.2;color:#000;margin:0 0 4px}.accordion-description{font-family:lusail-light,sans-serif;font-weight:300;font-size:16px;line-height:1.2;color:#888;margin:0}.accordion-icon{font-size:24px;width:24px;height:24px;color:#222;transition:transform .3s ease;flex-shrink:0}.accordion-icon.rotated{transform:rotate(180deg)}.accordion-divider{margin-top:16px;height:1px;background-color:#f0eeee;width:calc(100% + 32px);margin-left:-16px;margin-right:-16px;border:none}.accordion-body{padding-top:16px;display:flex;flex-direction:column;gap:12px;margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px}.permission-header-row{display:flex;align-items:center;gap:4px;width:100%}.permission-group-label{font-family:lusail-regular,sans-serif;font-weight:400;font-size:16px;line-height:1.2;color:#5c5c5c;flex-shrink:0}.permission-separator{flex:1;height:1px;background-color:#f0eeee;margin:0 4px}.select-all-container{display:flex;align-items:center;gap:4px;flex-shrink:0;flex-direction:row-reverse}.select-all-label{font-family:lusail-regular,sans-serif;font-weight:400;font-size:20px;line-height:1.2;color:#000}.select-all-checkbox{flex-shrink:0}.permissions-row{display:flex;gap:20px;align-items:center;flex-wrap:wrap}.permission-item{display:flex;align-items:center;gap:4px;min-height:19px}.permission-label{font-family:lusail-medium,sans-serif;font-weight:500;font-size:16px;line-height:1.2;color:#222;white-space:nowrap}::ng-deep .select-all-checkbox .mdc-checkbox__background,::ng-deep .permission-item .mdc-checkbox__background{border-color:#b7b7b7!important;border-radius:4px!important}::ng-deep .select-all-checkbox.mat-mdc-checkbox-checked .mdc-checkbox__background,::ng-deep .permission-item.mat-mdc-checkbox-checked .mdc-checkbox__background{background-color:#0d4261!important;border-color:#0d4261!important}::ng-deep .mdc-checkbox__checkmark{color:#fff!important}::ng-deep .mdc-checkbox{display:inline-block;position:relative;flex:0 0 18px;box-sizing:content-box;width:18px;height:28px!important;line-height:0;white-space:nowrap;cursor:pointer;vertical-align:bottom;padding:calc((var(--mdc-checkbox-state-layer-size) - 25px) / 2)!important;margin:calc((var(--mdc-checkbox-state-layer-size) - var(--mdc-checkbox-state-layer-size)) / 2)}:host-context([dir=rtl]) .matrix-header{direction:rtl}:host-context([dir=rtl]) .accordion-header{direction:rtl}:host-context([dir=rtl]) .select-all-container{flex-direction:row}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i3$4.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: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] }); }
|
|
6514
6779
|
}
|
|
6515
6780
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PermissionMatrixComponent, decorators: [{
|
|
6516
6781
|
type: Component,
|
|
@@ -6519,7 +6784,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
6519
6784
|
MatIconModule,
|
|
6520
6785
|
MatCheckboxModule,
|
|
6521
6786
|
TranslateModule
|
|
6522
|
-
], template: "<div class=\"permission-matrix-card\">\r\n <div class=\"matrix-header\">\r\n <h3 class=\"matrix-title\">{{ titleKey | translate }}</h3>\r\n <button\r\n class=\"expand-all-btn\"\r\n type=\"button\"\r\n (click)=\"expandAllGroups()\"\r\n [attr.aria-label]=\"(areAllExpanded() ? collapseAllLabelKey : expandAllLabelKey) | translate\">\r\n <mat-icon class=\"expand-icon\" [class.rotated]=\"areAllExpanded()\">unfold_more</mat-icon>\r\n <span>{{ (areAllExpanded() ? collapseAllLabelKey : expandAllLabelKey) | translate }}</span>\r\n </button>\r\n </div>\r\n\r\n <div class=\"matrix-divider\"></div>\r\n\r\n <div class=\"matrix-accordion-list\">\r\n <div\r\n *ngFor=\"let item of items; trackBy: trackByItem\"\r\n class=\"matrix-accordion-item\"\r\n [class.expanded]=\"item.expanded\">\r\n\r\n <!-- Accordion Header -->\r\n <div\r\n class=\"accordion-header\"\r\n (click)=\"toggleGroup(item)\"\r\n role=\"button\"\r\n tabindex=\"0\"\r\n [attr.aria-expanded]=\"item.expanded\"\r\n (keydown.enter)=\"toggleGroup(item)\"\r\n (keydown.space)=\"toggleGroup(item); $event.preventDefault()\">\r\n <div class=\"accordion-content\">\r\n <h4 class=\"accordion-title\">{{ item.title }}</h4>\r\n <p *ngIf=\"item.description\" class=\"accordion-description\">{{ item.description }}</p>\r\n </div>\r\n <mat-icon class=\"accordion-icon\" [class.rotated]=\"item.expanded\">keyboard_arrow_down</mat-icon>\r\n </div>\r\n\r\n <!-- Accordion Body -->\r\n <ng-container *ngIf=\"item.expanded\">\r\n <div class=\"accordion-divider\"></div>\r\n <div class=\"accordion-body\">\r\n <!-- Permission Header Row -->\r\n <div class=\"permission-header-row\">\r\n <span class=\"permission-group-label\">{{ item.title }}</span>\r\n <div class=\"permission-separator\"></div>\r\n <div class=\"select-all-container\" (click)=\"$event.stopPropagation()\">\r\n <span class=\"select-all-label\">{{ selectAllLabelKey | translate }}</span>\r\n <mat-checkbox\r\n [checked]=\"isAllPermissionsSelected(item)\"\r\n [disabled]=\"readonly\"\r\n (change)=\"toggleSelectAll(item)\"\r\n color=\"primary\"\r\n class=\"select-all-checkbox\">\r\n </mat-checkbox>\r\n </div>\r\n </div>\r\n\r\n <!-- Permissions Row -->\r\n <div class=\"permissions-row\" (click)=\"$event.stopPropagation()\">\r\n <div\r\n *ngFor=\"let permission of permissions; trackBy: trackByPermission\"\r\n class=\"permission-item\">\r\n <mat-checkbox\r\n [checked]=\"isPermissionSelected(item, permission)\"\r\n [disabled]=\"
|
|
6787
|
+
], template: "<div class=\"permission-matrix-card\">\r\n <div class=\"matrix-header\">\r\n <h3 class=\"matrix-title\">{{ titleKey | translate }}</h3>\r\n <button\r\n class=\"expand-all-btn\"\r\n type=\"button\"\r\n (click)=\"expandAllGroups()\"\r\n [attr.aria-label]=\"(areAllExpanded() ? collapseAllLabelKey : expandAllLabelKey) | translate\">\r\n <mat-icon class=\"expand-icon\" [class.rotated]=\"areAllExpanded()\">unfold_more</mat-icon>\r\n <span>{{ (areAllExpanded() ? collapseAllLabelKey : expandAllLabelKey) | translate }}</span>\r\n </button>\r\n </div>\r\n\r\n <div class=\"matrix-divider\"></div>\r\n\r\n <div class=\"matrix-accordion-list\">\r\n <div\r\n *ngFor=\"let item of items; trackBy: trackByItem\"\r\n class=\"matrix-accordion-item\"\r\n [class.expanded]=\"item.expanded\">\r\n\r\n <!-- Accordion Header -->\r\n <div\r\n class=\"accordion-header\"\r\n (click)=\"toggleGroup(item)\"\r\n role=\"button\"\r\n tabindex=\"0\"\r\n [attr.aria-expanded]=\"item.expanded\"\r\n (keydown.enter)=\"toggleGroup(item)\"\r\n (keydown.space)=\"toggleGroup(item); $event.preventDefault()\">\r\n <div class=\"accordion-content\">\r\n <h4 class=\"accordion-title\">{{ item.title }}</h4>\r\n <p *ngIf=\"item.description\" class=\"accordion-description\">{{ item.description }}</p>\r\n </div>\r\n <mat-icon class=\"accordion-icon\" [class.rotated]=\"item.expanded\">keyboard_arrow_down</mat-icon>\r\n </div>\r\n\r\n <!-- Accordion Body -->\r\n <ng-container *ngIf=\"item.expanded\">\r\n <div class=\"accordion-divider\"></div>\r\n <div class=\"accordion-body\">\r\n <!-- Permission Header Row -->\r\n <div class=\"permission-header-row\">\r\n <span class=\"permission-group-label\">{{ item.title }}</span>\r\n <div class=\"permission-separator\"></div>\r\n <div class=\"select-all-container\" (click)=\"$event.stopPropagation()\">\r\n <span class=\"select-all-label\">{{ selectAllLabelKey | translate }}</span>\r\n <mat-checkbox\r\n [checked]=\"isAllPermissionsSelected(item)\"\r\n [disabled]=\"readonly\"\r\n (change)=\"toggleSelectAll(item)\"\r\n color=\"primary\"\r\n class=\"select-all-checkbox\">\r\n </mat-checkbox>\r\n </div>\r\n </div>\r\n\r\n <!-- Permissions Row -->\r\n <div class=\"permissions-row\" (click)=\"$event.stopPropagation()\">\r\n <div\r\n *ngFor=\"let permission of permissions; trackBy: trackByPermission\"\r\n class=\"permission-item\">\r\n <mat-checkbox\r\n [checked]=\"isPermissionSelected(item, permission)\"\r\n [disabled]=\"isPermissionDisabled(item, permission)\"\r\n (change)=\"togglePermission(item, permission)\"\r\n color=\"primary\">\r\n </mat-checkbox>\r\n <span class=\"permission-label\">{{ permission.labelKey | translate }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</div>", styles: [".permission-matrix-card{background:#fff;border:1px solid #f0eeee;border-radius:8px;padding:16px;display:flex;flex-direction:column;gap:20px}.matrix-header{display:flex;align-items:center;justify-content:space-between;min-height:27px}.matrix-title{font-family:lusail-bold,sans-serif;font-weight:700;font-size:24px;line-height:1.2;color:#000;margin:0}.expand-all-btn{display:flex;align-items:center;gap:4px;background:transparent;border:none;cursor:pointer;padding:0;font-family:lusail-regular,sans-serif;font-weight:400;font-size:20px;line-height:1.2;color:#000;transition:all .2s ease}.expand-all-btn:hover{color:#0d4261}.expand-all-btn:focus-visible{outline:2px solid #0d4261;outline-offset:2px;border-radius:4px}.expand-icon{font-size:24px;width:24px;height:24px;color:#000;transition:transform .3s ease}.expand-icon.rotated{transform:rotate(180deg)}.matrix-divider{height:2px;background-color:#0d4261;width:100%}.matrix-accordion-list{display:flex;flex-direction:column;gap:0}.matrix-accordion-item{background:#fff;border:1px solid #f0eeee;border-radius:8px;padding:16px;margin-bottom:0;transition:all .2s ease}.matrix-accordion-item:not(:last-child){margin-bottom:20px}.accordion-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;width:100%}.accordion-header:focus-visible{outline:2px solid #0d4261;outline-offset:2px;border-radius:4px}.accordion-content{flex:1;display:flex;flex-direction:column;gap:0}.accordion-title{font-family:lusail-bold,sans-serif;font-weight:700;font-size:20px;line-height:1.2;color:#000;margin:0 0 4px}.accordion-description{font-family:lusail-light,sans-serif;font-weight:300;font-size:16px;line-height:1.2;color:#888;margin:0}.accordion-icon{font-size:24px;width:24px;height:24px;color:#222;transition:transform .3s ease;flex-shrink:0}.accordion-icon.rotated{transform:rotate(180deg)}.accordion-divider{margin-top:16px;height:1px;background-color:#f0eeee;width:calc(100% + 32px);margin-left:-16px;margin-right:-16px;border:none}.accordion-body{padding-top:16px;display:flex;flex-direction:column;gap:12px;margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px}.permission-header-row{display:flex;align-items:center;gap:4px;width:100%}.permission-group-label{font-family:lusail-regular,sans-serif;font-weight:400;font-size:16px;line-height:1.2;color:#5c5c5c;flex-shrink:0}.permission-separator{flex:1;height:1px;background-color:#f0eeee;margin:0 4px}.select-all-container{display:flex;align-items:center;gap:4px;flex-shrink:0;flex-direction:row-reverse}.select-all-label{font-family:lusail-regular,sans-serif;font-weight:400;font-size:20px;line-height:1.2;color:#000}.select-all-checkbox{flex-shrink:0}.permissions-row{display:flex;gap:20px;align-items:center;flex-wrap:wrap}.permission-item{display:flex;align-items:center;gap:4px;min-height:19px}.permission-label{font-family:lusail-medium,sans-serif;font-weight:500;font-size:16px;line-height:1.2;color:#222;white-space:nowrap}::ng-deep .select-all-checkbox .mdc-checkbox__background,::ng-deep .permission-item .mdc-checkbox__background{border-color:#b7b7b7!important;border-radius:4px!important}::ng-deep .select-all-checkbox.mat-mdc-checkbox-checked .mdc-checkbox__background,::ng-deep .permission-item.mat-mdc-checkbox-checked .mdc-checkbox__background{background-color:#0d4261!important;border-color:#0d4261!important}::ng-deep .mdc-checkbox__checkmark{color:#fff!important}::ng-deep .mdc-checkbox{display:inline-block;position:relative;flex:0 0 18px;box-sizing:content-box;width:18px;height:28px!important;line-height:0;white-space:nowrap;cursor:pointer;vertical-align:bottom;padding:calc((var(--mdc-checkbox-state-layer-size) - 25px) / 2)!important;margin:calc((var(--mdc-checkbox-state-layer-size) - var(--mdc-checkbox-state-layer-size)) / 2)}:host-context([dir=rtl]) .matrix-header{direction:rtl}:host-context([dir=rtl]) .accordion-header{direction:rtl}:host-context([dir=rtl]) .select-all-container{flex-direction:row}\n"] }]
|
|
6523
6788
|
}], propDecorators: { items: [{
|
|
6524
6789
|
type: Input
|
|
6525
6790
|
}], permissions: [{
|
|
@@ -6534,6 +6799,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
6534
6799
|
type: Input
|
|
6535
6800
|
}], readonly: [{
|
|
6536
6801
|
type: Input
|
|
6802
|
+
}], autoLockView: [{
|
|
6803
|
+
type: Input
|
|
6537
6804
|
}], itemsChange: [{
|
|
6538
6805
|
type: Output
|
|
6539
6806
|
}], permissionChange: [{
|