@unifylib/ui-lib 1.2.29 → 1.2.30

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.
Files changed (10) hide show
  1. package/esm2022/lib/components/action-confirmation/action-confirmation.component.mjs +3 -3
  2. package/esm2022/lib/components/advanced-filter/filter-builder/filter-builder.component.mjs +6 -3
  3. package/esm2022/lib/components/audit-log-list/audit-log.component.mjs +3 -3
  4. package/esm2022/lib/components/base-form-canvas/base-form-canvas.component.mjs +3 -3
  5. package/esm2022/lib/components/base-table/base-table.component.mjs +3 -3
  6. package/esm2022/lib/components/shared/action-card/action-card.component.mjs +3 -3
  7. package/fesm2022/iq-ui-lib.mjs +15 -12
  8. package/fesm2022/iq-ui-lib.mjs.map +1 -1
  9. package/lib/components/advanced-filter/filter-builder/filter-builder.component.d.ts +2 -1
  10. package/package.json +1 -1
package/fesm2022/iq-ui-lib.mjs CHANGED
@@ -94,7 +94,7 @@ class ActionConfirmationComponent {
94
94
  this.dialogRef.close();
95
95
  }
96
96
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ActionConfirmationComponent, deps: [{ token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
97
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: ActionConfirmationComponent, isStandalone: true, selector: "app-action-confirmation", inputs: { icon: "icon" }, host: { listeners: { "window:keyup.esc": "onKeyUp()" } }, ngImport: i0, template: "<div class=\"confirm-dialog\" [dir]=\"currentDirection\">\n\n <div class=\"header-section\">\n <div class=\"header-row\">\n <div class=\"icon-container\">\n <mat-icon class=\"check-icon\" [style.color]=\"icon.color\">{{ icon.name }}</mat-icon>\n </div>\n\n </div>\n <div class=\"title-container\">\n <h2 class=\"title\">{{ titleMsg | translate }}</h2>\n </div>\n </div>\n\n <div class=\"message-container\">\n <p class=\"message\" *ngIf=\"subMsg\">\n {{ subMsg | translate }}\n </p>\n\n <div class=\"list-section\" *ngIf=\"listTitle || listMessages.length > 0\">\n <p class=\"list-title\" *ngIf=\"listTitle\"><strong>{{ listTitle | translate }}</strong></p>\n <ul class=\"list-messages\" *ngIf=\"listMessages.length > 0\">\n @if (isListMessagesTranslatable) {\n <li *ngFor=\"let message of listMessages\" class=\"list-item\">\n {{ message | translate }}\n </li>\n }\n @else{\n <li *ngFor=\"let message of listMessages\" class=\"list-item\">\n {{ message }}\n </li>\n }\n </ul>\n </div>\n\n <p class=\"extra-warning\" *ngIf=\"extraWarningMsg\">\n {{ extraWarningMsg | translate }}\n </p>\n </div>\n\n <div class=\"actions\">\n <button\n mat-stroked-button\n class=\"btn-cancel\"\n (click)=\"cancel()\"\n id=\"rejectActionLabel\">\n {{ rejectActionLabel | translate }}\n </button>\n\n <button\n mat-flat-button\n class=\"btn-confirm\"\n (click)=\"commentAndClose()\"\n id=\"acceptActionLabel\">\n {{ acceptActionLabel | translate }}\n </button>\n </div>\n\n</div>\n", styles: [".confirm-dialog{padding:24px;min-width:547px;box-sizing:border-box;background:#fff;border:1px solid #f0eeee;border-radius:8px;box-shadow:0 4px 8px -2px #1018281a,0 2px 4px -2px #1018280f;display:flex;flex-direction:column;gap:8px}.header-section{display:flex;flex-direction:column;gap:8px;width:100%}.header-row{display:flex;justify-content:space-between;align-items:flex-start;position:relative;width:100%;min-height:32px}.title-container{display:flex;align-items:flex-start;width:100%}.icon-container{width:32px;height:32px;background:#edfffa;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.check-icon{font-size:32px;width:32px;height:38px;line-height:32px}.title{margin:0;font-size:20px;font-weight:500;font-family:lusail-medium,sans-serif;color:#222;line-height:1.2}.message-container{padding:0 0 16px;width:100%}.message{margin:0;font-size:16px;font-weight:400;font-family:lusail-regular,sans-serif;color:#5c5c5c;line-height:1.2}.list-section{margin-top:8px}.list-title{margin:0 0 8px;font-size:16px;font-weight:400;font-family:lusail-regular,sans-serif;color:#5c5c5c;line-height:1.2}.list-messages{margin:0;padding-left:20px;list-style-type:disc}.list-item{margin:0 0 4px;font-size:16px;font-weight:400;font-family:lusail-regular,sans-serif;color:#5c5c5c;line-height:1.2}.list-item:last-child{margin-bottom:0}.extra-warning{margin:16px 0 0;font-size:16px;font-weight:400;font-family:lusail-regular,sans-serif;color:#5c5c5c;line-height:1.2}.actions{display:flex;justify-content:flex-end;gap:8px;align-items:center;width:100%}.btn-cancel{width:122px;height:32px;margin:0!important;background:#fff;border:1px solid #3E627B!important;border-radius:8px;color:#3e627b!important;font-size:16px;font-weight:500;font-family:lusail-medium,sans-serif;line-height:1.2;text-align:center;padding:0 16px;display:flex;align-items:center;justify-content:center}.btn-cancel:hover{background:#f5f5f5}.btn-confirm{height:32px;margin:0!important;background:#0d4261!important;border-radius:8px!important;color:#fff!important;font-size:16px;font-weight:500;font-family:lusail-medium,sans-serif;line-height:1.2;text-align:center;padding:0 16px;display:flex;align-items:center;justify-content:center;min-width:auto}.btn-confirm:hover{background:#082b41}@media (max-width: 768px){.confirm-dialog{padding:16px;min-width:0;width:100%;max-width:100%;margin:0;border-radius:0}.header-section{gap:12px}.icon-container{width:28px;height:28px}.check-icon{font-size:28px;width:28px;height:28px}.title{font-size:18px}.message-container{padding:0 0 12px}.message,.list-title,.list-item{font-size:14px}.extra-warning{font-size:14px;margin-top:12px}.actions{flex-direction:column;gap:8px;width:100%}.btn-cancel,.btn-confirm{width:100%;height:44px;font-size:16px}}: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;max-height:90vh!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: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "component", type: MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
97
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: ActionConfirmationComponent, isStandalone: true, selector: "app-action-confirmation", inputs: { icon: "icon" }, host: { listeners: { "window:keyup.esc": "onKeyUp()" } }, ngImport: i0, template: "<div class=\"confirm-dialog\" [dir]=\"currentDirection\">\n\n <div class=\"header-section\">\n <div class=\"header-row\">\n <div class=\"icon-container\">\n <mat-icon class=\"check-icon\" [style.color]=\"icon.color\">{{ icon.name }}</mat-icon>\n </div>\n\n </div>\n <div class=\"title-container\">\n <h2 class=\"title\">{{ titleMsg | translate }}</h2>\n </div>\n </div>\n\n <div class=\"message-container\">\n <p class=\"message\" *ngIf=\"subMsg\">\n {{ subMsg | translate }}\n </p>\n\n <div class=\"list-section\" *ngIf=\"listTitle || listMessages.length > 0\">\n <p class=\"list-title\" *ngIf=\"listTitle\"><strong>{{ listTitle | translate }}</strong></p>\n <ul class=\"list-messages\" *ngIf=\"listMessages.length > 0\">\n @if (isListMessagesTranslatable) {\n <li *ngFor=\"let message of listMessages\" class=\"list-item\">\n {{ message | translate }}\n </li>\n }\n @else{\n <li *ngFor=\"let message of listMessages\" class=\"list-item\">\n {{ message }}\n </li>\n }\n </ul>\n </div>\n\n <p class=\"extra-warning\" *ngIf=\"extraWarningMsg\">\n {{ extraWarningMsg | translate }}\n </p>\n </div>\n\n <div class=\"actions\">\n <button\n mat-stroked-button\n class=\"btn-cancel\"\n (click)=\"cancel()\"\n id=\"rejectActionLabel\">\n {{ rejectActionLabel | translate }}\n </button>\n\n <button\n mat-flat-button\n class=\"btn-confirm\"\n (click)=\"commentAndClose()\"\n id=\"acceptActionLabel\">\n {{ acceptActionLabel | translate }}\n </button>\n </div>\n\n</div>\n", styles: [".confirm-dialog{padding:24px;min-width:547px;box-sizing:border-box;background:#fff;border:1px solid #f0eeee;border-radius:8px;box-shadow:0 4px 8px -2px #1018281a,0 2px 4px -2px #1018280f;display:flex;flex-direction:column;gap:8px}.header-section{display:flex;flex-direction:column;gap:8px;width:100%}.header-row{display:flex;justify-content:space-between;align-items:flex-start;position:relative;width:100%;min-height:32px}.title-container{display:flex;align-items:flex-start;width:100%}.icon-container{width:32px;height:32px;background:#edfffa;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.check-icon{font-size:32px;width:32px;height:38px;line-height:32px}.title{margin:0;font-size:20px;font-weight:500;font-family:lusail-medium,sans-serif;color:#222;line-height:1.2}.message-container{padding:0 0 16px;width:100%}.message{margin:0;font-size:16px;font-weight:400;font-family:lusail-regular,sans-serif;color:#5c5c5c;line-height:1.2}.list-section{margin-top:8px}.list-title{margin:0 0 8px;font-size:16px;font-weight:400;font-family:lusail-regular,sans-serif;color:#5c5c5c;line-height:1.2}.list-messages{margin:0;padding-left:20px;list-style-type:disc}.list-item{margin:0 0 4px;font-size:16px;font-weight:400;font-family:lusail-regular,sans-serif;color:#5c5c5c;line-height:1.2}.list-item:last-child{margin-bottom:0}.extra-warning{margin:16px 0 0;font-size:16px;font-weight:400;font-family:lusail-regular,sans-serif;color:#5c5c5c;line-height:1.2}.actions{display:flex;justify-content:flex-end;gap:8px;align-items:center;width:100%}.btn-cancel,.btn-confirm{box-sizing:border-box;width:122px;min-width:122px;height:40px!important;min-height:40px!important;margin:0!important;border-width:1px!important;border-style:solid!important;border-radius:8px!important;font-size:16px;font-weight:500;font-family:lusail-medium,sans-serif;line-height:1;text-align:center;padding:0 16px!important;display:inline-flex;align-items:center;justify-content:center}.btn-cancel{background:#fff!important;border-color:#3e627b!important;color:#3e627b!important}.btn-cancel:hover{background:#f5f5f5!important}.btn-confirm{background:#0d4261!important;border-color:#0d4261!important;color:#fff!important}.btn-confirm:hover{background:#082b41!important;border-color:#082b41!important}@media (max-width: 768px){.confirm-dialog{padding:16px;min-width:0;width:100%;max-width:100%;margin:0;border-radius:0}.header-section{gap:12px}.icon-container{width:28px;height:28px}.check-icon{font-size:28px;width:28px;height:28px}.title{font-size:18px}.message-container{padding:0 0 12px}.message,.list-title,.list-item{font-size:14px}.extra-warning{font-size:14px;margin-top:12px}.actions{flex-direction:column;gap:8px;width:100%}.btn-cancel,.btn-confirm{width:100%;height:44px;font-size:16px}}: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;max-height:90vh!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: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "component", type: MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
98
98
  }
99
99
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ActionConfirmationComponent, decorators: [{
100
100
  type: Component,
@@ -104,7 +104,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
104
104
  MatButton,
105
105
  MatIconButton,
106
106
  MatIcon
107
- ], template: "<div class=\"confirm-dialog\" [dir]=\"currentDirection\">\n\n <div class=\"header-section\">\n <div class=\"header-row\">\n <div class=\"icon-container\">\n <mat-icon class=\"check-icon\" [style.color]=\"icon.color\">{{ icon.name }}</mat-icon>\n </div>\n\n </div>\n <div class=\"title-container\">\n <h2 class=\"title\">{{ titleMsg | translate }}</h2>\n </div>\n </div>\n\n <div class=\"message-container\">\n <p class=\"message\" *ngIf=\"subMsg\">\n {{ subMsg | translate }}\n </p>\n\n <div class=\"list-section\" *ngIf=\"listTitle || listMessages.length > 0\">\n <p class=\"list-title\" *ngIf=\"listTitle\"><strong>{{ listTitle | translate }}</strong></p>\n <ul class=\"list-messages\" *ngIf=\"listMessages.length > 0\">\n @if (isListMessagesTranslatable) {\n <li *ngFor=\"let message of listMessages\" class=\"list-item\">\n {{ message | translate }}\n </li>\n }\n @else{\n <li *ngFor=\"let message of listMessages\" class=\"list-item\">\n {{ message }}\n </li>\n }\n </ul>\n </div>\n\n <p class=\"extra-warning\" *ngIf=\"extraWarningMsg\">\n {{ extraWarningMsg | translate }}\n </p>\n </div>\n\n <div class=\"actions\">\n <button\n mat-stroked-button\n class=\"btn-cancel\"\n (click)=\"cancel()\"\n id=\"rejectActionLabel\">\n {{ rejectActionLabel | translate }}\n </button>\n\n <button\n mat-flat-button\n class=\"btn-confirm\"\n (click)=\"commentAndClose()\"\n id=\"acceptActionLabel\">\n {{ acceptActionLabel | translate }}\n </button>\n </div>\n\n</div>\n", styles: [".confirm-dialog{padding:24px;min-width:547px;box-sizing:border-box;background:#fff;border:1px solid #f0eeee;border-radius:8px;box-shadow:0 4px 8px -2px #1018281a,0 2px 4px -2px #1018280f;display:flex;flex-direction:column;gap:8px}.header-section{display:flex;flex-direction:column;gap:8px;width:100%}.header-row{display:flex;justify-content:space-between;align-items:flex-start;position:relative;width:100%;min-height:32px}.title-container{display:flex;align-items:flex-start;width:100%}.icon-container{width:32px;height:32px;background:#edfffa;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.check-icon{font-size:32px;width:32px;height:38px;line-height:32px}.title{margin:0;font-size:20px;font-weight:500;font-family:lusail-medium,sans-serif;color:#222;line-height:1.2}.message-container{padding:0 0 16px;width:100%}.message{margin:0;font-size:16px;font-weight:400;font-family:lusail-regular,sans-serif;color:#5c5c5c;line-height:1.2}.list-section{margin-top:8px}.list-title{margin:0 0 8px;font-size:16px;font-weight:400;font-family:lusail-regular,sans-serif;color:#5c5c5c;line-height:1.2}.list-messages{margin:0;padding-left:20px;list-style-type:disc}.list-item{margin:0 0 4px;font-size:16px;font-weight:400;font-family:lusail-regular,sans-serif;color:#5c5c5c;line-height:1.2}.list-item:last-child{margin-bottom:0}.extra-warning{margin:16px 0 0;font-size:16px;font-weight:400;font-family:lusail-regular,sans-serif;color:#5c5c5c;line-height:1.2}.actions{display:flex;justify-content:flex-end;gap:8px;align-items:center;width:100%}.btn-cancel{width:122px;height:32px;margin:0!important;background:#fff;border:1px solid #3E627B!important;border-radius:8px;color:#3e627b!important;font-size:16px;font-weight:500;font-family:lusail-medium,sans-serif;line-height:1.2;text-align:center;padding:0 16px;display:flex;align-items:center;justify-content:center}.btn-cancel:hover{background:#f5f5f5}.btn-confirm{height:32px;margin:0!important;background:#0d4261!important;border-radius:8px!important;color:#fff!important;font-size:16px;font-weight:500;font-family:lusail-medium,sans-serif;line-height:1.2;text-align:center;padding:0 16px;display:flex;align-items:center;justify-content:center;min-width:auto}.btn-confirm:hover{background:#082b41}@media (max-width: 768px){.confirm-dialog{padding:16px;min-width:0;width:100%;max-width:100%;margin:0;border-radius:0}.header-section{gap:12px}.icon-container{width:28px;height:28px}.check-icon{font-size:28px;width:28px;height:28px}.title{font-size:18px}.message-container{padding:0 0 12px}.message,.list-title,.list-item{font-size:14px}.extra-warning{font-size:14px;margin-top:12px}.actions{flex-direction:column;gap:8px;width:100%}.btn-cancel,.btn-confirm{width:100%;height:44px;font-size:16px}}: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;max-height:90vh!important}}\n"] }]
107
+ ], template: "<div class=\"confirm-dialog\" [dir]=\"currentDirection\">\n\n <div class=\"header-section\">\n <div class=\"header-row\">\n <div class=\"icon-container\">\n <mat-icon class=\"check-icon\" [style.color]=\"icon.color\">{{ icon.name }}</mat-icon>\n </div>\n\n </div>\n <div class=\"title-container\">\n <h2 class=\"title\">{{ titleMsg | translate }}</h2>\n </div>\n </div>\n\n <div class=\"message-container\">\n <p class=\"message\" *ngIf=\"subMsg\">\n {{ subMsg | translate }}\n </p>\n\n <div class=\"list-section\" *ngIf=\"listTitle || listMessages.length > 0\">\n <p class=\"list-title\" *ngIf=\"listTitle\"><strong>{{ listTitle | translate }}</strong></p>\n <ul class=\"list-messages\" *ngIf=\"listMessages.length > 0\">\n @if (isListMessagesTranslatable) {\n <li *ngFor=\"let message of listMessages\" class=\"list-item\">\n {{ message | translate }}\n </li>\n }\n @else{\n <li *ngFor=\"let message of listMessages\" class=\"list-item\">\n {{ message }}\n </li>\n }\n </ul>\n </div>\n\n <p class=\"extra-warning\" *ngIf=\"extraWarningMsg\">\n {{ extraWarningMsg | translate }}\n </p>\n </div>\n\n <div class=\"actions\">\n <button\n mat-stroked-button\n class=\"btn-cancel\"\n (click)=\"cancel()\"\n id=\"rejectActionLabel\">\n {{ rejectActionLabel | translate }}\n </button>\n\n <button\n mat-flat-button\n class=\"btn-confirm\"\n (click)=\"commentAndClose()\"\n id=\"acceptActionLabel\">\n {{ acceptActionLabel | translate }}\n </button>\n </div>\n\n</div>\n", styles: [".confirm-dialog{padding:24px;min-width:547px;box-sizing:border-box;background:#fff;border:1px solid #f0eeee;border-radius:8px;box-shadow:0 4px 8px -2px #1018281a,0 2px 4px -2px #1018280f;display:flex;flex-direction:column;gap:8px}.header-section{display:flex;flex-direction:column;gap:8px;width:100%}.header-row{display:flex;justify-content:space-between;align-items:flex-start;position:relative;width:100%;min-height:32px}.title-container{display:flex;align-items:flex-start;width:100%}.icon-container{width:32px;height:32px;background:#edfffa;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.check-icon{font-size:32px;width:32px;height:38px;line-height:32px}.title{margin:0;font-size:20px;font-weight:500;font-family:lusail-medium,sans-serif;color:#222;line-height:1.2}.message-container{padding:0 0 16px;width:100%}.message{margin:0;font-size:16px;font-weight:400;font-family:lusail-regular,sans-serif;color:#5c5c5c;line-height:1.2}.list-section{margin-top:8px}.list-title{margin:0 0 8px;font-size:16px;font-weight:400;font-family:lusail-regular,sans-serif;color:#5c5c5c;line-height:1.2}.list-messages{margin:0;padding-left:20px;list-style-type:disc}.list-item{margin:0 0 4px;font-size:16px;font-weight:400;font-family:lusail-regular,sans-serif;color:#5c5c5c;line-height:1.2}.list-item:last-child{margin-bottom:0}.extra-warning{margin:16px 0 0;font-size:16px;font-weight:400;font-family:lusail-regular,sans-serif;color:#5c5c5c;line-height:1.2}.actions{display:flex;justify-content:flex-end;gap:8px;align-items:center;width:100%}.btn-cancel,.btn-confirm{box-sizing:border-box;width:122px;min-width:122px;height:40px!important;min-height:40px!important;margin:0!important;border-width:1px!important;border-style:solid!important;border-radius:8px!important;font-size:16px;font-weight:500;font-family:lusail-medium,sans-serif;line-height:1;text-align:center;padding:0 16px!important;display:inline-flex;align-items:center;justify-content:center}.btn-cancel{background:#fff!important;border-color:#3e627b!important;color:#3e627b!important}.btn-cancel:hover{background:#f5f5f5!important}.btn-confirm{background:#0d4261!important;border-color:#0d4261!important;color:#fff!important}.btn-confirm:hover{background:#082b41!important;border-color:#082b41!important}@media (max-width: 768px){.confirm-dialog{padding:16px;min-width:0;width:100%;max-width:100%;margin:0;border-radius:0}.header-section{gap:12px}.icon-container{width:28px;height:28px}.check-icon{font-size:28px;width:28px;height:28px}.title{font-size:18px}.message-container{padding:0 0 12px}.message,.list-title,.list-item{font-size:14px}.extra-warning{font-size:14px;margin-top:12px}.actions{flex-direction:column;gap:8px;width:100%}.btn-cancel,.btn-confirm{width:100%;height:44px;font-size:16px}}: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;max-height:90vh!important}}\n"] }]
108
108
  }], ctorParameters: () => [{ type: i1.MatDialogRef }, { type: undefined, decorators: [{
109
109
  type: Inject,
110
110
  args: [MAT_DIALOG_DATA]
@@ -2985,7 +2985,7 @@ class BaseFormCanvasComponent {
2985
2985
  },
2986
2986
  { provide: MAT_DATE_FORMATS, useValue: DD_MM_YYYY_Format },
2987
2987
  { provide: MAT_DATE_LOCALE, useValue: 'en-GB' }
2988
- ], viewQueries: [{ propertyName: "fieldsInput", first: true, predicate: ["EquationValueInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"main-form-canvas\">\n <div class=\"form-wrapper\">\n <ng-container *ngIf=\"defaults\">\n <ng-container *ngIf=\"editable; else readonlyView\" class=\"form-container\">\n <form [formGroup]=\"formParam\" class=\"form-content\">\n <div class=\"form-row\">\n <div class=\"form-column\">\n <ng-container *ngFor=\"let row of screenFields | keyvalue\">\n <div class=\"row-container\">\n <ng-container *ngFor=\"let field of row.value\">\n <div class=\"field-column\" [style.flex]=\"field.fieldSize ? ('0 0 ' + field.fieldSize + '%') : '1 1 0'\">\n <ng-container [ngSwitch]=\"field.type\">\n <ng-container *ngSwitchCase=\"'date'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\n </div>\n\n <mat-form-field appearance=\"outline\">\n <input matInput\n [matDatepicker]=\"picker\"\n [min]=\"minDate\"\n (dateChange)=\"formParam.get(field.property).setValue($event.value)\"\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\n [readonly]=\"field.readonly\"\n [attr.tabindex]=\"field.readonly ? -1 : null\"\n formControlName=\"{{field.property}}\"\n [required]=\"field.required\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\n\n <mat-datepicker-toggle *ngIf=\"!field.readonly\" matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n\n <mat-datepicker #picker\n [startView]=\"getView(field)\"\n (yearSelected)=\"setMonthAndYear($event, picker, field)\"\n panelClass=\"example-month-picker\">\n </mat-datepicker>\n\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'phone-number'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container class=\"custom-ngx-mat-intl-tel-input\" *ngIf=\"workflowEditableField(field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\n </div>\n <mat-form-field appearance=\"outline\">\n <div class=\"phone-input-wrapper\">\n <ngx-mat-intl-tel-input\n formControlName=\"{{ field.property }}\"\n [inputPlaceholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\n [preferredCountries]=\"['qa']\"\n [enablePlaceholder]=\"true\"\n [enableSearch]=\"true\"\n [onlyCountries]=\"getCountryCodeList()\"\n [required]=\"field.required\"\n [attr.aria-required]=\"field.required\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\n </ngx-mat-intl-tel-input>\n </div>\n\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n\n </ng-container>\n </ng-container>\n </ng-container>\n\n\n <ng-container *ngSwitchCase=\"'iban-text'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"textReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\n </div>\n <mat-form-field appearance=\"outline\">\n <input class=\"app-input\"\n formControlName=\"{{ field.property }}\"\n matInput\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\n [readonly]=\"field.readonly\"\n [attr.tabindex]=\"field.readonly ? -1 : null\"\n [required]=\"field.required\"\n [attr.aria-required]=\"field.required\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n\n\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'password'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\n </div>\n <mat-form-field appearance=\"outline\">\n <input matInput\n class=\"app-input\"\n formControlName=\"{{ field.property }}\"\n [type]=\"hide && !field.disabled ? 'password' : 'text'\"\n [readonly]=\"field.readonly\"\n [attr.tabindex]=\"field.readonly ? -1 : null\"\n [required]=\"field.required\"\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\n [attr.aria-required]=\"field.required\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\n <!-- <mat-icon matSuffix-->\n <!-- (click)=\"hide = !hide\">-->\n <!-- {{ hide ? 'visibility_off' : 'visibility' }}-->\n <!-- </mat-icon>-->\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'text'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"textReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\n </div>\n <mat-form-field appearance=\"outline\">\n <mat-icon *ngIf=\"field.showSearchIcon\" matPrefix>search</mat-icon>\n <input class=\"app-input\"\n formControlName=\"{{ field.property }}\"\n matInput\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\n [readonly]=\"field.readonly\"\n [attr.tabindex]=\"field.readonly ? -1 : null\"\n [required]=\"field.required\"\n (keyup)=\"fixArabicNumbers($event.target)\"\n [attr.aria-required]=\"field.required\"\n [maxDigits]=\"field.maxLength\"\n [phoneNumberOnly]=\"field.phoneNumberOnly\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\n <span\n *ngIf=\"field.showSearchIcon && !field.readonly && (formParam?.get([field.property])?.value ?? '') !== ''\"\n matSuffix\n class=\"clear-icon-suffix\">\n <button\n mat-icon-button\n type=\"button\"\n class=\"clear-icon-button\"\n [attr.aria-label]=\"'BASE_TABLE.clearField' | translate\"\n (click)=\"clearFieldValue(field.property)\">\n <mat-icon aria-hidden=\"true\">close</mat-icon>\n </button>\n </span>\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n\n\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'multi-state-checkbox'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <div class=\"multi-state-filter\" [formGroup]=\"formParam\">\n <button\n type=\"button\"\n class=\"multi-state-filter__trigger\"\n [matMenuTriggerFor]=\"statusMultiMenu\"\n [attr.aria-haspopup]=\"true\"\n [attr.aria-expanded]=\"false\"\n [attr.aria-label]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : (field.label | translate)\">\n <span\n class=\"multi-state-filter__trigger-text\"\n [class.multi-state-filter__trigger-text--placeholder]=\"isMultiStateEmpty(field.property)\">\n {{\n getMultiStateFilterTriggerLabel(field)\n || (field.placeholder\n ? (labelKeyPlaceHolder(field) | translate)\n : ('FILTER-BUILDER.selectStatus' | translate))\n }}\n </span>\n <mat-icon class=\"multi-state-filter__chevron\" aria-hidden=\"true\">keyboard_arrow_down</mat-icon>\n </button>\n <mat-menu #statusMultiMenu=\"matMenu\" class=\"multi-state-filter__menu-panel\" [hasBackdrop]=\"true\">\n <div\n class=\"multi-state-filter__menu-inner\"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"onMultiStateMenuInnerKeydown($event, field)\">\n <div\n *ngFor=\"let code of field.listOptions || []\"\n mat-menu-item\n class=\"multi-state-filter__row\"\n [attr.data-multi-state-code]=\"code\"\n (click)=\"onMultiStateRowClick($event, field.property, code)\">\n <mat-checkbox\n tabindex=\"-1\"\n (click)=\"$event.stopPropagation()\"\n [checked]=\"isMultiStateSelected(field.property, code)\"\n (change)=\"toggleMultiStateFilter(field.property, code, $event.checked)\">\n </mat-checkbox>\n <span\n class=\"multi-state-filter__pill stateType\"\n [ngClass]=\"code\">\n {{ statusOptionLabelKey(field, code) | translate }}\n </span>\n </div>\n </div>\n </mat-menu>\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'chip-list'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\n </div>\n <mat-form-field appearance=\"outline\">\n\n <mat-chip-grid [attr.aria-labelledby]=\"'label-' + field.property\"\n formControlName=\"{{ field.property }}\">\n <mat-chip-row\n *ngFor=\"let mail of splittedChips(formParam, field.property); let idx = index\"\n [removable]=\"removable\"\n (removed)=\"removeChipsItem(formParam, field.property, idx)\">\n {{ mail }}\n <mat-icon matChipRemove *ngIf=\"removable\">cancel</mat-icon>\n </mat-chip-row>\n\n <input [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\n [matChipInputFor]=\"null\"\n [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n [matChipInputAddOnBlur]=\"addOnBlur\"\n (matChipInputTokenEnd)=\"addEmailToChips($event, formParam, field.property)\">\n </mat-chip-grid>\n <mat-error id=\"error-{{ field.property }}\" *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n\n\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'amount'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"amountReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\n </div>\n <mat-form-field appearance=\"outline\">\n <input class=\"app-input\"\n formControlName=\"{{ field.property }}\"\n matInput\n type=\"number\"\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\n [readonly]=\"field.readonly\"\n [attr.tabindex]=\"field.readonly ? -1 : null\"\n [required]=\"field.required\"\n [attr.aria-required]=\"field.required\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n\n\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'sequence'\">\n <ng-container\n *ngIf=\"referenceAttributeTrue(field.property, 'autoGenerated'); else noSequence\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\n </div>\n <mat-form-field appearance=\"outline\">\n <input class=\"app-input\"\n formControlName=\"{{ field.property }}\"\n matInput\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\n [readonly]=\"true\"\n [disabled]=\"true\"\n [attr.aria-labelledby]=\"'label-' + field.property\">\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n\n </ng-container>\n </ng-container>\n\n <ng-template #noSequence>\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\n </div>\n <mat-form-field appearance=\"outline\">\n <input class=\"app-input\"\n formControlName=\"{{ field.property }}\"\n matInput\n [readonly]=\"false\"\n [disabled]=\"false\"\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\n [required]=\"field.required\"\n [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-required]=\"field.required\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n\n </ng-template>\n\n <ng-container *ngSwitchCase=\"'textarea'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"textareaReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\n </div>\n <mat-form-field appearance=\"outline\">\n <textarea cdkFocusInitial\n formControlName=\"{{ field.property }}\"\n matInput\n cdkTextareaAutosize\n cdkAutosizeMinRows=\"3\"\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\n [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-required]=\"field.required\"\n [maxDigits]=\"field.maxLength\"\n [attr.maxlength]=\"field.maxLength || null\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\n [readonly]=\"field.readonly\"\n [attr.tabindex]=\"field.readonly ? -1 : null\"\n [required]=\"field.required\"></textarea>\n <mat-hint *ngIf=\"field.maxLength\" align=\"end\">\n {{ getFieldCurrentLength(field.property) }}/{{ field.maxLength }}\n </mat-hint>\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'number'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"numberReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\n </div>\n <mat-form-field appearance=\"outline\">\n <input class=\"app-input\"\n formControlName=\"{{ field.property }}\"\n matInput\n type=\"number\"\n [attr.min]=\"field.allowNegative ? null : 0\"\n (keydown)=\"blockNegativeNumberKeydown($event, field)\"\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\n [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-required]=\"field.required\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [maxDigits]=\"field.maxLength\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\n [required]=\"field.readonly ? false : field.required\"\n [readonly]=\"field.readonly\"\n [attr.tabindex]=\"field.readonly ? -1 : null\"\n [pattern]=\"field.pattern\">\n <mat-error id=\"error-{{ field.property }}\" *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'bigdecimal'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"numberReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\n </div>\n <mat-form-field appearance=\"outline\">\n <input\n matInput\n type=\"text\"\n inputmode=\"numeric\"\n formControlName=\"{{ field.property }}\"\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\n [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-required]=\"field.required\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [numbersOnly]=\"true\" [maxDecimals]=\"field.maxDecimals\"\n [maxDigits]=\"field.maxLength\"\n [pattern]=\"field.pattern\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\n [required]=\"field.readonly ? false : field.required\"\n [readonly]=\"field.readonly\"\n [attr.tabindex]=\"field.readonly ? -1 : null\">\n <mat-error id=\"error-{{ field.property }}\" *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'time'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"timeReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\n </div>\n <mat-form-field appearance=\"outline\">\n <input\n #timeInput\n matInput\n class=\"app-input\"\n formControlName=\"{{ field.property }}\"\n type=\"time\"\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\n [readonly]=\"field.readonly\"\n [attr.tabindex]=\"field.readonly ? -1 : null\"\n [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-required]=\"field.required\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\n [required]=\"field.required\">\n <span *ngIf=\"!field.readonly\" matSuffix class=\"mat-datepicker-toggle time-picker-toggle\">\n <button\n type=\"button\"\n mat-icon-button\n class=\"time-picker-toggle-button\"\n [attr.aria-label]=\"field.label! | translate\"\n (click)=\"openTimePicker(timeInput); $event.stopPropagation()\">\n <mat-icon>schedule</mat-icon>\n </button>\n </span>\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'checkbox'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"checkboxReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <mat-checkbox\n appearance=\"outline\"\n style=\"padding-bottom: 14px; padding-top: 14px;\"\n [disabled]=\"field.readonly\"\n [attr.aria-required]=\"field.required\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\n formControlName=\"{{ field.property }}\">\n {{ field.label! | translate }}\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-checkbox>\n\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'toggle'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"toggleReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\n </div>\n <mat-slide-toggle\n [disabled]=\"field.readonly\"\n [attr.aria-required]=\"field.required\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\n formControlName=\"{{ field.property }}\">\n </mat-slide-toggle>\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'color-picker'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <div fxLayout=\"row\" fxLayoutAlign=\"center\">\n <h4 style=\"margin-right: 10px\">{{ field.label! | translate }}</h4>\n <input\n ejs-colorpicker\n type=\"color\"\n id=\"colorpicker\"\n formControlName=\"{{ field.property }}\"\n [attr.aria-label]=\"field.label! | translate\"\n [attr.aria-required]=\"field.required\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\n />\n </div>\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </ng-container>\n </ng-container>\n\n\n <ng-container *ngSwitchCase=\"'radio-button'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"radioButtonReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <mat-radio-group\n formControlName=\"{{field.property}}\"\n class=\"app-radio\"\n [attr.aria-label]=\"field.label! | translate\"\n [attr.aria-required]=\"field.required\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\n <div class=\"field-row\">\n <div class=\"field-label\">\n <span class=\"custom-label\">{{ field.label! | translate }}</span>\n </div>\n <div class=\"field-input\">\n <div class=\"radio-group-custom\">\n <mat-radio-button\n *ngFor=\"let option of field.listOptions\"\n [value]=\"option\"\n [attr.aria-labelledby]=\"option\">\n {{ option | translate }}\n </mat-radio-button>\n </div>\n </div>\n </div>\n\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-radio-group>\n\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'list'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"listReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\n </div>\n <mat-form-field appearance=\"outline\" class=\"list-field\" style=\"width: 100%\">\n <mat-select\n panelClass=\"base-form-list-panel\"\n formControlName=\"{{field.property}}\"\n [attr.aria-label]=\"field.label! | translate\"\n [attr.aria-required]=\"field.required\"\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\n [disabled]=\"field.readonly\"\n [multiple]=\"field.multi || false\"\n [required]=\"field.readonly ? false : field.required\"\n [(value)]=\"field.defaultListOption\">\n <ng-container *ngIf=\"field.translate; else lookup_no_translation\">\n <mat-option\n *ngFor=\"let item of field.listOptions; let i = index\"\n [value]=\"item\">\n {{ friendlyName(field.label, field.property, item) | translate }}\n </mat-option>\n </ng-container>\n <ng-template #lookup_no_translation>\n <mat-option\n *ngFor=\"let item of field.listOptions\"\n [value]=\"item\">\n {{ getOptionValue(item) }}\n </mat-option>\n </ng-template>\n </mat-select>\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'attachment'\" [formGroup]=\"formParam\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\n </div>\n <app-attachment-uploader\n [acceptedTypes]=\"getAcceptedFileTypes(field)\"\n [ariaDescribedBy]=\"showError(field.property) ? 'error-' + field.property : null\"\n (fileSelected)=\"onAttachmentFileSelected($event, field)\"\n style=\"margin-top: 5px\">\n </app-attachment-uploader>\n </ng-container>\n <mat-error class=\"iq-error\"\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'lookup'\" [formGroup]=\"formParam\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"lookupReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <app-auto-complete\n [form]=\"formParam\"\n [field]=\"field\"\n [supportingAttributes]=\"supportingAttributes\"\n [defaultValue]=\"this.formParam.get(field.property)?.value\"\n (selectedValue)=\"patchLookupValue($event, field.property)\">\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </app-auto-complete>\n\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'currency'\" [formGroup]=\"formParam\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"currencyReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <!-- Uncomment and use the currency control when ready -->\n <!-- <app-currency\n [form]=\"formParam\"\n [field]=\"field\"\n [defaultValue]=\"this.formParam.get(field.property)?.value\"\n (selectedValue)=\"patchCurrencyValue($event, field.property)\">\n </app-currency> -->\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'multi-select'\" [formGroup]=\"formParam\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"multiSelectReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <app-multi-auto-complete\n [form]=\"formParam\"\n [field]=\"field\"\n [labelsSection]=\"pageInfo.labelsSection\"\n [defaultValue]=\"getMultiValue(field)\"\n (selectedValue)=\"patchMultiSelectValue($event, field.property)\">\n </app-multi-auto-complete>\n\n </ng-container>\n </ng-container>\n </ng-container>\n\n\n <ng-container *ngSwitchCase=\"'rich-text'\" [formGroup]=\"formParam\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <!-- Uncomment and use the rich text editor when ready -->\n <!-- <ckeditor\n [editor]=\"Editor\"\n [disabled]=\"field.readonly\"\n formControlName=\"{{field.property}}\">\n </ckeditor> -->\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'divider'\">\n <mat-divider></mat-divider>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'hyper-text'\">\n <div>\n <mat-label\n (click)=\"getHyperTextEvent()\"\n class=\"hyper-link\">\n {{ field.label! | translate }}\n </mat-label>\n </div>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'section-title'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <div class=\"hrdivider-mid\">\n <span>{{ field.label | translate }}</span>\n </div>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'equation-builder'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"textReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\n </div>\n <mat-form-field appearance=\"outline\">\n <input class=\"app-input\" dir=\"ltr\"\n formControlName=\"{{ field.property }}\"\n matInput\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\n [readonly]=\"field.readonly\"\n [attr.tabindex]=\"field.readonly ? -1 : null\"\n [required]=\"field.required\"\n [attr.aria-required]=\"field.required\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n\n\n </ng-container>\n </ng-container>\n </ng-container>\n <!-- <ng-container *ngSwitchCase=\"'equation-builder'\" [formGroup]=\"formParam\">-->\n <!-- <ng-container *ngIf=\"showField(defaults, field)\">-->\n <!-- <ng-container *ngIf=\"!workflowEditableField(field)\">-->\n <!-- <ng-container-->\n <!-- [ngTemplateOutlet]=\"dateReadonly\"-->\n <!-- [ngTemplateOutletContext]=\"{ field: field }\">-->\n <!-- </ng-container>-->\n <!-- </ng-container>-->\n <!-- <ng-container *ngIf=\"workflowEditableField(field)\">-->\n <!-- <div style=\"display: flex; width: 350%\">-->\n <!-- <mat-label>{{ field.label! | translate }}</mat-label>-->\n <!-- <mat-form-field style=\"width: 400%\" appearance=\"outline\">-->\n <!-- <mat-chip-grid #chipGrid>-->\n <!-- <ng-container *ngFor=\"let equationValue of equationValues(); let i = index\">-->\n <!-- <mat-chip-row (removed)=\"remove(equationValue, i)\">-->\n <!-- {{ equationValue }}-->\n <!-- <button-->\n <!-- matChipRemove-->\n <!-- [attr.aria-label]=\"'remove ' + equationValue\">-->\n <!-- <mat-icon>cancel</mat-icon>-->\n <!-- </button>-->\n <!-- </mat-chip-row>-->\n <!-- </ng-container>-->\n <!-- </mat-chip-grid>-->\n <!-- <input-->\n <!-- [(ngModel)]=\"currentEquationValue\"-->\n <!-- [matChipInputFor]=\"chipGrid\"-->\n <!-- [matAutocomplete]=\"auto\"-->\n <!-- [ngModelOptions]=\"{ standalone: true }\"-->\n <!-- [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"-->\n <!-- (matChipInputTokenEnd)=\"add($event)\"-->\n <!-- aria-label=\"Add equation value\" />-->\n <!-- <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"selected($event)\">-->\n <!-- <ng-container *ngFor=\"let filteredField of (equationFilteredFields() | async)\">-->\n <!-- <mat-option [value]=\"filteredField\">{{ filteredField }}</mat-option>-->\n <!-- </ng-container>-->\n <!-- </mat-autocomplete>-->\n <!-- </mat-form-field>-->\n <!-- </div>-->\n <!-- <mat-error class=\"iq-error\" *ngIf=\"showError(field.property)\" aria-live=\"assertive\">-->\n <!-- {{ getErrors(field.property) | translate }}-->\n <!-- </mat-error>-->\n <!-- </ng-container>-->\n <!-- </ng-container>-->\n <!-- </ng-container>-->\n\n </ng-container>\n </div>\n </ng-container>\n </div>\n </ng-container>\n </div>\n </div>\n </form>\n </ng-container>\n </ng-container>\n </div>\n\n</div>\n<ng-template #dateReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <ng-container *ngIf=\"isReadonlyTextValueEmpty(defaults, field) && field.emptyReadonlyPlaceholderKey; else dateReadonlyHasValue\">\n <span class=\"readonly-value readonly-value--empty\">{{ field.emptyReadonlyPlaceholderKey | translate }}</span>\n </ng-container>\n <ng-template #dateReadonlyHasValue>\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) | date: getReadonlyDateFormat(field) }}</span>\n </ng-template>\n </div>\n</ng-template>\n\n<ng-template #timeReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <span class=\"readonly-value\">{{ formatTimeToDate(defaults[field.property]) | date: 'shortTime' }}</span>\n </div>\n</ng-template>\n\n<ng-template #phoneNumberReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\n </div>\n</ng-template>\n\n<ng-template #textReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\" *ngIf=\"!field.advancedFilter\"></label>\n <ng-container *ngIf=\"isReadonlyTextValueEmpty(defaults, field) && field.emptyReadonlyPlaceholderKey; else textReadonlyHasValue\">\n <span class=\"readonly-value readonly-value--empty\">{{ field.emptyReadonlyPlaceholderKey | translate }}</span>\n </ng-container>\n <ng-template #textReadonlyHasValue>\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\n </ng-template>\n </div>\n</ng-template>\n\n<ng-template #textareaReadonly let-field=\"field\">\n <ng-container *ngIf=\"field.textFormat === 'json'; else normalText\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <div class=\"readonly-value json-viewer\">\n <ngx-json-viewer [json]=\"extractJsonFieldName(defaults, field.property)\" [expanded]=\"true\"></ngx-json-viewer>\n </div>\n </div>\n </ng-container>\n <ng-template #normalText>\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\n </div>\n </ng-template>\n</ng-template>\n\n<ng-template #numberReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\n </div>\n</ng-template>\n\n<ng-template #currencyReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\n </div>\n</ng-template>\n\n<ng-template #radioButtonReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <span class=\"readonly-value\">{{ translateLable(defaults[field.property]) }}</span>\n </div>\n</ng-template>\n\n<ng-template #richTextReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <span class=\"readonly-value\" [innerHtml]=\"extractFieldName(defaults, field.property)\"></span>\n </div>\n</ng-template>\n\n<ng-template #checkboxReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <span class=\"readonly-value\">\n <mat-icon color=\"warn\" *ngIf=\"extractFieldName(defaults, field.property); else showNo\">done</mat-icon>\n <ng-template #showNo>\n <mat-icon color=\"warn\">close</mat-icon>\n </ng-template>\n </span>\n </div>\n</ng-template>\n\n<ng-template #toggleReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <span class=\"readonly-value\">\n <mat-icon color=\"warn\" *ngIf=\"extractFieldName(defaults, field.property); else showNo\">done</mat-icon>\n <ng-template #showNo>\n <mat-icon color=\"warn\">close</mat-icon>\n </ng-template>\n </span>\n </div>\n</ng-template>\n\n<ng-template #listReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <span class=\"readonly-value\" *ngIf=\"field.translate; else noTranslate\">\n {{ listShowValue(defaults, field) | translate }}\n </span>\n <ng-template #noTranslate>\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\n </ng-template>\n </div>\n</ng-template>\n\n<ng-template #sequenceReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\n </div>\n</ng-template>\n\n<ng-template #lookupReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <span class=\"readonly-value\">\n {{ extractFieldName(defaults, field.property)?.[translateService.getDefaultLang() === 'en' ? 'englishName' : 'arabicName'] }}\n </span>\n </div>\n</ng-template>\n\n<ng-template #amountReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <span class=\"readonly-value\">\n {{ extractFieldName(defaults, field.property) | currency: currency }}\n </span>\n </div>\n</ng-template>\n\n<ng-template #multiSelectReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <mat-chip-grid class=\"readonly-value chipList\">\n <mat-chip *ngFor=\"let filedProp of showMultiSelectValuesAsReadonly(field)\">\n {{ filedProp }}\n </mat-chip>\n </mat-chip-grid>\n </div>\n</ng-template>\n\n<ng-template #chipListReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHTML]=\"field.label | translate\"></label>\n <mat-chip-listbox class=\"readonly-value chipList\">\n <mat-chip-option *ngFor=\"let loc of splitReadonly(extractFieldName(defaults, field.property))\"\n [selectable]=\"true\"\n color=\"warn\"\n [removable]=\"false\">\n {{ loc }}\n </mat-chip-option>\n </mat-chip-listbox>\n </div>\n</ng-template>\n\n\n<ng-template #readonlyView>\n <div class=\"row-wrapper\">\n <div class=\"column-wrapper\">\n <ng-container *ngFor=\"let row of screenFields | keyvalue\">\n <div class=\"row-container\">\n <ng-container *ngFor=\"let field of row.value\">\n <div class=\"field-column readonly-item\" [style.flex]=\"field.fieldSize ? ('0 0 ' + field.fieldSize + '%') : '1 1 0'\">\n\n <ng-container [ngSwitch]=\"field.type\">\n\n <ng-container *ngSwitchCase=\"'attachment'\">\n <ng-container *ngIf=\"isAttachmentFieldEditable && showField(defaults, field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n </div>\n <app-attachment-uploader\n [acceptedTypes]=\"getAcceptedFileTypes(field)\"\n [ariaDescribedBy]=\"showError(field.property) ? 'error-' + field.property : null\"\n (fileSelected)=\"onAttachmentFileSelected($event, field)\"\n style=\"margin-top: 5px\">\n </app-attachment-uploader>\n <mat-error class=\"iq-error\"\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'date'\">\n <ng-container [ngTemplateOutlet]=\"dateReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'time'\">\n <ng-container [ngTemplateOutlet]=\"timeReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'phone-number'\">\n <ng-container [ngTemplateOutlet]=\"phoneNumberReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'text'\">\n <ng-container [ngTemplateOutlet]=\"textReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'textarea'\">\n <ng-container [ngTemplateOutlet]=\"textareaReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'number'\">\n <ng-container [ngTemplateOutlet]=\"numberReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'currency'\">\n <ng-container [ngTemplateOutlet]=\"currencyReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'radio-button'\">\n <ng-container [ngTemplateOutlet]=\"radioButtonReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'checkbox'\">\n <ng-container [ngTemplateOutlet]=\"checkboxReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'toggle'\">\n <ng-container [ngTemplateOutlet]=\"toggleReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'status'\">\n <ng-container [ngTemplateOutlet]=\"checkboxReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'lookup'\">\n <ng-container [ngTemplateOutlet]=\"lookupReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'amount'\">\n <ng-container [ngTemplateOutlet]=\"amountReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'multi-select'\">\n <ng-container [ngTemplateOutlet]=\"multiSelectReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'chip-list'\">\n <ng-container [ngTemplateOutlet]=\"chipListReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'sequence'\">\n <ng-container [ngTemplateOutlet]=\"sequenceReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'list'\">\n <ng-container [ngTemplateOutlet]=\"listReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'multi-state-checkbox'\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" *ngIf=\"!field.hideLabel\" [innerHtml]=\"field.label | translate\"></label>\n <span class=\"readonly-value\">{{ getMultiStateReadonlySummary(field, defaults) }}</span>\n </div>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'iban-text'\">\n <p class=\"label\">\n <span [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></span>\n <span> : </span>\n <span class=\"value\" [innerHtml]=\"extractFieldName(defaults, field.property)\"></span>\n </p>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'section-title'\">\n <div class=\"hrdivider-mid\">\n <span>{{ field.label | translate }}</span>\n </div>\n </ng-container>\n\n </ng-container>\n </div>\n </ng-container>\n </div>\n </ng-container>\n </div>\n </div>\n</ng-template>\n\n\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-label{font-weight:500;color:#9b9b9b;font-size:14px}.readonly-value{font-weight:500;color:#222;word-break:break-word;font-size:14px}.readonly-value--empty{font-style:italic;font-weight:500;color:#6b7280}.json-viewer{width:100%}.chipList{display:flex;flex-wrap:wrap;gap:4px}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}.time-picker-toggle .time-picker-toggle-button{--mdc-icon-button-state-layer-size: 40px;width:40px;height:40px;padding:0}.time-picker-toggle .mat-icon{width:20px;height:20px;font-size:20px}@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}:host ::ng-deep .mat-mdc-select-placeholder{color:#888!important}:host ::ng-deep .list-field .mat-mdc-text-field-wrapper{border-radius:8px;transition:border-color .16s ease}:host ::ng-deep .list-field .mdc-notched-outline__leading,:host ::ng-deep .list-field .mdc-notched-outline__notch,:host ::ng-deep .list-field .mdc-notched-outline__trailing{border-width:2px!important;border-color:#0d426147!important}:host ::ng-deep .list-field:hover .mdc-notched-outline__leading,:host ::ng-deep .list-field:hover .mdc-notched-outline__notch,:host ::ng-deep .list-field:hover .mdc-notched-outline__trailing,:host ::ng-deep .list-field.mat-focused .mdc-notched-outline__leading,:host ::ng-deep .list-field.mat-focused .mdc-notched-outline__notch,:host ::ng-deep .list-field.mat-focused .mdc-notched-outline__trailing{border-color:#0d42616b!important}::ng-deep .base-form-list-panel{padding:0!important;border:2px solid rgba(13,66,97,.18);border-radius:8px!important;overflow:hidden}::ng-deep .base-form-list-panel .mat-mdc-option{box-sizing:border-box;min-height:40px;margin:0;border:0;border-bottom:2px solid rgba(13,66,97,.14);border-radius:0;background-color:#fff;box-shadow:none;transition:background-color .16s ease,border-color .16s ease}::ng-deep .base-form-list-panel .mat-mdc-option:last-child{border-bottom:0}::ng-deep .base-form-list-panel .mat-mdc-option:hover,::ng-deep .base-form-list-panel .mat-mdc-option.mat-mdc-option-active,::ng-deep .base-form-list-panel .mat-mdc-option.mdc-list-item--selected{background-color:#0d42610f;border-color:#0d426138}.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.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { 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: "directive", type: PhoneNumberOnlyDirective, selector: "[phoneNumberOnly]", inputs: ["phoneNumberOnly"] }, { 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", "labelsSection"], 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", "numbersOnly", "numbersOnlyWithPlus"] }, { kind: "directive", type: MaxDigitsDirective, selector: "[maxDigits]", inputs: ["maxDigits"] }] }); }
2988
+ ], viewQueries: [{ propertyName: "fieldsInput", first: true, predicate: ["EquationValueInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"main-form-canvas\">\n <div class=\"form-wrapper\">\n <ng-container *ngIf=\"defaults\">\n <ng-container *ngIf=\"editable; else readonlyView\" class=\"form-container\">\n <form [formGroup]=\"formParam\" class=\"form-content\">\n <div class=\"form-row\">\n <div class=\"form-column\">\n <ng-container *ngFor=\"let row of screenFields | keyvalue\">\n <div class=\"row-container\">\n <ng-container *ngFor=\"let field of row.value\">\n <div class=\"field-column\" [style.flex]=\"field.fieldSize ? ('0 0 ' + field.fieldSize + '%') : '1 1 0'\">\n <ng-container [ngSwitch]=\"field.type\">\n <ng-container *ngSwitchCase=\"'date'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\n </div>\n\n <mat-form-field appearance=\"outline\">\n <input matInput\n [matDatepicker]=\"picker\"\n [min]=\"minDate\"\n (dateChange)=\"formParam.get(field.property).setValue($event.value)\"\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\n [readonly]=\"field.readonly\"\n [attr.tabindex]=\"field.readonly ? -1 : null\"\n formControlName=\"{{field.property}}\"\n [required]=\"field.required\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\n\n <mat-datepicker-toggle *ngIf=\"!field.readonly\" matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n\n <mat-datepicker #picker\n [startView]=\"getView(field)\"\n (yearSelected)=\"setMonthAndYear($event, picker, field)\"\n panelClass=\"example-month-picker\">\n </mat-datepicker>\n\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'phone-number'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container class=\"custom-ngx-mat-intl-tel-input\" *ngIf=\"workflowEditableField(field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\n </div>\n <mat-form-field appearance=\"outline\">\n <div class=\"phone-input-wrapper\">\n <ngx-mat-intl-tel-input\n formControlName=\"{{ field.property }}\"\n [inputPlaceholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\n [preferredCountries]=\"['qa']\"\n [enablePlaceholder]=\"true\"\n [enableSearch]=\"true\"\n [onlyCountries]=\"getCountryCodeList()\"\n [required]=\"field.required\"\n [attr.aria-required]=\"field.required\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\n </ngx-mat-intl-tel-input>\n </div>\n\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n\n </ng-container>\n </ng-container>\n </ng-container>\n\n\n <ng-container *ngSwitchCase=\"'iban-text'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"textReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\n </div>\n <mat-form-field appearance=\"outline\">\n <input class=\"app-input\"\n formControlName=\"{{ field.property }}\"\n matInput\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\n [readonly]=\"field.readonly\"\n [attr.tabindex]=\"field.readonly ? -1 : null\"\n [required]=\"field.required\"\n [attr.aria-required]=\"field.required\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n\n\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'password'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\n </div>\n <mat-form-field appearance=\"outline\">\n <input matInput\n class=\"app-input\"\n formControlName=\"{{ field.property }}\"\n [type]=\"hide && !field.disabled ? 'password' : 'text'\"\n [readonly]=\"field.readonly\"\n [attr.tabindex]=\"field.readonly ? -1 : null\"\n [required]=\"field.required\"\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\n [attr.aria-required]=\"field.required\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\n <!-- <mat-icon matSuffix-->\n <!-- (click)=\"hide = !hide\">-->\n <!-- {{ hide ? 'visibility_off' : 'visibility' }}-->\n <!-- </mat-icon>-->\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'text'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"textReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\n </div>\n <mat-form-field appearance=\"outline\">\n <mat-icon *ngIf=\"field.showSearchIcon\" matPrefix>search</mat-icon>\n <input class=\"app-input\"\n formControlName=\"{{ field.property }}\"\n matInput\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\n [readonly]=\"field.readonly\"\n [attr.tabindex]=\"field.readonly ? -1 : null\"\n [required]=\"field.required\"\n (keyup)=\"fixArabicNumbers($event.target)\"\n [attr.aria-required]=\"field.required\"\n [maxDigits]=\"field.maxLength\"\n [phoneNumberOnly]=\"field.phoneNumberOnly\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\n <span\n *ngIf=\"field.showSearchIcon && !field.readonly && (formParam?.get([field.property])?.value ?? '') !== ''\"\n matSuffix\n class=\"clear-icon-suffix\">\n <button\n mat-icon-button\n type=\"button\"\n class=\"clear-icon-button\"\n [attr.aria-label]=\"'BASE_TABLE.clearField' | translate\"\n (click)=\"clearFieldValue(field.property)\">\n <mat-icon aria-hidden=\"true\">close</mat-icon>\n </button>\n </span>\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n\n\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'multi-state-checkbox'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <div class=\"multi-state-filter\" [formGroup]=\"formParam\">\n <button\n type=\"button\"\n class=\"multi-state-filter__trigger\"\n [matMenuTriggerFor]=\"statusMultiMenu\"\n [attr.aria-haspopup]=\"true\"\n [attr.aria-expanded]=\"false\"\n [attr.aria-label]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : (field.label | translate)\">\n <span\n class=\"multi-state-filter__trigger-text\"\n [class.multi-state-filter__trigger-text--placeholder]=\"isMultiStateEmpty(field.property)\">\n {{\n getMultiStateFilterTriggerLabel(field)\n || (field.placeholder\n ? (labelKeyPlaceHolder(field) | translate)\n : ('FILTER-BUILDER.selectStatus' | translate))\n }}\n </span>\n <mat-icon class=\"multi-state-filter__chevron\" aria-hidden=\"true\">keyboard_arrow_down</mat-icon>\n </button>\n <mat-menu #statusMultiMenu=\"matMenu\" class=\"multi-state-filter__menu-panel\" [hasBackdrop]=\"true\">\n <div\n class=\"multi-state-filter__menu-inner\"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"onMultiStateMenuInnerKeydown($event, field)\">\n <div\n *ngFor=\"let code of field.listOptions || []\"\n mat-menu-item\n class=\"multi-state-filter__row\"\n [attr.data-multi-state-code]=\"code\"\n (click)=\"onMultiStateRowClick($event, field.property, code)\">\n <mat-checkbox\n tabindex=\"-1\"\n (click)=\"$event.stopPropagation()\"\n [checked]=\"isMultiStateSelected(field.property, code)\"\n (change)=\"toggleMultiStateFilter(field.property, code, $event.checked)\">\n </mat-checkbox>\n <span\n class=\"multi-state-filter__pill stateType\"\n [ngClass]=\"code\">\n {{ statusOptionLabelKey(field, code) | translate }}\n </span>\n </div>\n </div>\n </mat-menu>\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'chip-list'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\n </div>\n <mat-form-field appearance=\"outline\">\n\n <mat-chip-grid [attr.aria-labelledby]=\"'label-' + field.property\"\n formControlName=\"{{ field.property }}\">\n <mat-chip-row\n *ngFor=\"let mail of splittedChips(formParam, field.property); let idx = index\"\n [removable]=\"removable\"\n (removed)=\"removeChipsItem(formParam, field.property, idx)\">\n {{ mail }}\n <mat-icon matChipRemove *ngIf=\"removable\">cancel</mat-icon>\n </mat-chip-row>\n\n <input [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\n [matChipInputFor]=\"null\"\n [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n [matChipInputAddOnBlur]=\"addOnBlur\"\n (matChipInputTokenEnd)=\"addEmailToChips($event, formParam, field.property)\">\n </mat-chip-grid>\n <mat-error id=\"error-{{ field.property }}\" *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n\n\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'amount'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"amountReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\n </div>\n <mat-form-field appearance=\"outline\">\n <input class=\"app-input\"\n formControlName=\"{{ field.property }}\"\n matInput\n type=\"number\"\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\n [readonly]=\"field.readonly\"\n [attr.tabindex]=\"field.readonly ? -1 : null\"\n [required]=\"field.required\"\n [attr.aria-required]=\"field.required\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n\n\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'sequence'\">\n <ng-container\n *ngIf=\"referenceAttributeTrue(field.property, 'autoGenerated'); else noSequence\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\n </div>\n <mat-form-field appearance=\"outline\">\n <input class=\"app-input\"\n formControlName=\"{{ field.property }}\"\n matInput\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\n [readonly]=\"true\"\n [disabled]=\"true\"\n [attr.aria-labelledby]=\"'label-' + field.property\">\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n\n </ng-container>\n </ng-container>\n\n <ng-template #noSequence>\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\n </div>\n <mat-form-field appearance=\"outline\">\n <input class=\"app-input\"\n formControlName=\"{{ field.property }}\"\n matInput\n [readonly]=\"false\"\n [disabled]=\"false\"\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\n [required]=\"field.required\"\n [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-required]=\"field.required\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n\n </ng-template>\n\n <ng-container *ngSwitchCase=\"'textarea'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"textareaReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\n </div>\n <mat-form-field appearance=\"outline\">\n <textarea cdkFocusInitial\n formControlName=\"{{ field.property }}\"\n matInput\n cdkTextareaAutosize\n cdkAutosizeMinRows=\"3\"\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\n [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-required]=\"field.required\"\n [maxDigits]=\"field.maxLength\"\n [attr.maxlength]=\"field.maxLength || null\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\n [readonly]=\"field.readonly\"\n [attr.tabindex]=\"field.readonly ? -1 : null\"\n [required]=\"field.required\"></textarea>\n <mat-hint *ngIf=\"field.maxLength\" align=\"end\">\n {{ getFieldCurrentLength(field.property) }}/{{ field.maxLength }}\n </mat-hint>\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'number'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"numberReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\n </div>\n <mat-form-field appearance=\"outline\">\n <input class=\"app-input\"\n formControlName=\"{{ field.property }}\"\n matInput\n type=\"number\"\n [attr.min]=\"field.allowNegative ? null : 0\"\n (keydown)=\"blockNegativeNumberKeydown($event, field)\"\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\n [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-required]=\"field.required\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [maxDigits]=\"field.maxLength\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\n [required]=\"field.readonly ? false : field.required\"\n [readonly]=\"field.readonly\"\n [attr.tabindex]=\"field.readonly ? -1 : null\"\n [pattern]=\"field.pattern\">\n <mat-error id=\"error-{{ field.property }}\" *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'bigdecimal'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"numberReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\n </div>\n <mat-form-field appearance=\"outline\">\n <input\n matInput\n type=\"text\"\n inputmode=\"numeric\"\n formControlName=\"{{ field.property }}\"\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\n [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-required]=\"field.required\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [numbersOnly]=\"true\" [maxDecimals]=\"field.maxDecimals\"\n [maxDigits]=\"field.maxLength\"\n [pattern]=\"field.pattern\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\n [required]=\"field.readonly ? false : field.required\"\n [readonly]=\"field.readonly\"\n [attr.tabindex]=\"field.readonly ? -1 : null\">\n <mat-error id=\"error-{{ field.property }}\" *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'time'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"timeReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\n </div>\n <mat-form-field appearance=\"outline\">\n <input\n #timeInput\n matInput\n class=\"app-input\"\n formControlName=\"{{ field.property }}\"\n type=\"time\"\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\n [readonly]=\"field.readonly\"\n [attr.tabindex]=\"field.readonly ? -1 : null\"\n [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-required]=\"field.required\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\n [required]=\"field.required\">\n <span *ngIf=\"!field.readonly\" matSuffix class=\"mat-datepicker-toggle time-picker-toggle\">\n <button\n type=\"button\"\n mat-icon-button\n class=\"time-picker-toggle-button\"\n [attr.aria-label]=\"field.label! | translate\"\n (click)=\"openTimePicker(timeInput); $event.stopPropagation()\">\n <mat-icon>schedule</mat-icon>\n </button>\n </span>\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'checkbox'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"checkboxReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <mat-checkbox\n appearance=\"outline\"\n style=\"padding-bottom: 14px; padding-top: 14px;\"\n [disabled]=\"field.readonly\"\n [attr.aria-required]=\"field.required\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\n formControlName=\"{{ field.property }}\">\n {{ field.label! | translate }}\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-checkbox>\n\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'toggle'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"toggleReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\n </div>\n <mat-slide-toggle\n [disabled]=\"field.readonly\"\n [attr.aria-required]=\"field.required\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\n formControlName=\"{{ field.property }}\">\n </mat-slide-toggle>\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'color-picker'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <div fxLayout=\"row\" fxLayoutAlign=\"center\">\n <h4 style=\"margin-right: 10px\">{{ field.label! | translate }}</h4>\n <input\n ejs-colorpicker\n type=\"color\"\n id=\"colorpicker\"\n formControlName=\"{{ field.property }}\"\n [attr.aria-label]=\"field.label! | translate\"\n [attr.aria-required]=\"field.required\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\n />\n </div>\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </ng-container>\n </ng-container>\n\n\n <ng-container *ngSwitchCase=\"'radio-button'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"radioButtonReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <mat-radio-group\n formControlName=\"{{field.property}}\"\n class=\"app-radio\"\n [attr.aria-label]=\"field.label! | translate\"\n [attr.aria-required]=\"field.required\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\n <div class=\"field-row\">\n <div class=\"field-label\">\n <span class=\"custom-label\">{{ field.label! | translate }}</span>\n </div>\n <div class=\"field-input\">\n <div class=\"radio-group-custom\">\n <mat-radio-button\n *ngFor=\"let option of field.listOptions\"\n [value]=\"option\"\n [attr.aria-labelledby]=\"option\">\n {{ option | translate }}\n </mat-radio-button>\n </div>\n </div>\n </div>\n\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-radio-group>\n\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'list'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"listReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\n </div>\n <mat-form-field appearance=\"outline\" class=\"list-field\" style=\"width: 100%\">\n <mat-select\n panelClass=\"base-form-list-panel\"\n formControlName=\"{{field.property}}\"\n [attr.aria-label]=\"field.label! | translate\"\n [attr.aria-required]=\"field.required\"\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\n [disabled]=\"field.readonly\"\n [multiple]=\"field.multi || false\"\n [required]=\"field.readonly ? false : field.required\"\n [(value)]=\"field.defaultListOption\">\n <ng-container *ngIf=\"field.translate; else lookup_no_translation\">\n <mat-option\n *ngFor=\"let item of field.listOptions; let i = index\"\n [value]=\"item\">\n {{ friendlyName(field.label, field.property, item) | translate }}\n </mat-option>\n </ng-container>\n <ng-template #lookup_no_translation>\n <mat-option\n *ngFor=\"let item of field.listOptions\"\n [value]=\"item\">\n {{ getOptionValue(item) }}\n </mat-option>\n </ng-template>\n </mat-select>\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'attachment'\" [formGroup]=\"formParam\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\n </div>\n <app-attachment-uploader\n [acceptedTypes]=\"getAcceptedFileTypes(field)\"\n [ariaDescribedBy]=\"showError(field.property) ? 'error-' + field.property : null\"\n (fileSelected)=\"onAttachmentFileSelected($event, field)\"\n style=\"margin-top: 5px\">\n </app-attachment-uploader>\n </ng-container>\n <mat-error class=\"iq-error\"\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'lookup'\" [formGroup]=\"formParam\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"lookupReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <app-auto-complete\n [form]=\"formParam\"\n [field]=\"field\"\n [supportingAttributes]=\"supportingAttributes\"\n [defaultValue]=\"this.formParam.get(field.property)?.value\"\n (selectedValue)=\"patchLookupValue($event, field.property)\">\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </app-auto-complete>\n\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'currency'\" [formGroup]=\"formParam\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"currencyReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <!-- Uncomment and use the currency control when ready -->\n <!-- <app-currency\n [form]=\"formParam\"\n [field]=\"field\"\n [defaultValue]=\"this.formParam.get(field.property)?.value\"\n (selectedValue)=\"patchCurrencyValue($event, field.property)\">\n </app-currency> -->\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'multi-select'\" [formGroup]=\"formParam\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"multiSelectReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <app-multi-auto-complete\n [form]=\"formParam\"\n [field]=\"field\"\n [labelsSection]=\"pageInfo.labelsSection\"\n [defaultValue]=\"getMultiValue(field)\"\n (selectedValue)=\"patchMultiSelectValue($event, field.property)\">\n </app-multi-auto-complete>\n\n </ng-container>\n </ng-container>\n </ng-container>\n\n\n <ng-container *ngSwitchCase=\"'rich-text'\" [formGroup]=\"formParam\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <!-- Uncomment and use the rich text editor when ready -->\n <!-- <ckeditor\n [editor]=\"Editor\"\n [disabled]=\"field.readonly\"\n formControlName=\"{{field.property}}\">\n </ckeditor> -->\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'divider'\">\n <mat-divider></mat-divider>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'hyper-text'\">\n <div>\n <mat-label\n (click)=\"getHyperTextEvent()\"\n class=\"hyper-link\">\n {{ field.label! | translate }}\n </mat-label>\n </div>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'section-title'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <div class=\"hrdivider-mid\">\n <span>{{ field.label | translate }}</span>\n </div>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'equation-builder'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"textReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\n </div>\n <mat-form-field appearance=\"outline\">\n <input class=\"app-input\" dir=\"ltr\"\n formControlName=\"{{ field.property }}\"\n matInput\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\n [readonly]=\"field.readonly\"\n [attr.tabindex]=\"field.readonly ? -1 : null\"\n [required]=\"field.required\"\n [attr.aria-required]=\"field.required\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n\n\n </ng-container>\n </ng-container>\n </ng-container>\n <!-- <ng-container *ngSwitchCase=\"'equation-builder'\" [formGroup]=\"formParam\">-->\n <!-- <ng-container *ngIf=\"showField(defaults, field)\">-->\n <!-- <ng-container *ngIf=\"!workflowEditableField(field)\">-->\n <!-- <ng-container-->\n <!-- [ngTemplateOutlet]=\"dateReadonly\"-->\n <!-- [ngTemplateOutletContext]=\"{ field: field }\">-->\n <!-- </ng-container>-->\n <!-- </ng-container>-->\n <!-- <ng-container *ngIf=\"workflowEditableField(field)\">-->\n <!-- <div style=\"display: flex; width: 350%\">-->\n <!-- <mat-label>{{ field.label! | translate }}</mat-label>-->\n <!-- <mat-form-field style=\"width: 400%\" appearance=\"outline\">-->\n <!-- <mat-chip-grid #chipGrid>-->\n <!-- <ng-container *ngFor=\"let equationValue of equationValues(); let i = index\">-->\n <!-- <mat-chip-row (removed)=\"remove(equationValue, i)\">-->\n <!-- {{ equationValue }}-->\n <!-- <button-->\n <!-- matChipRemove-->\n <!-- [attr.aria-label]=\"'remove ' + equationValue\">-->\n <!-- <mat-icon>cancel</mat-icon>-->\n <!-- </button>-->\n <!-- </mat-chip-row>-->\n <!-- </ng-container>-->\n <!-- </mat-chip-grid>-->\n <!-- <input-->\n <!-- [(ngModel)]=\"currentEquationValue\"-->\n <!-- [matChipInputFor]=\"chipGrid\"-->\n <!-- [matAutocomplete]=\"auto\"-->\n <!-- [ngModelOptions]=\"{ standalone: true }\"-->\n <!-- [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"-->\n <!-- (matChipInputTokenEnd)=\"add($event)\"-->\n <!-- aria-label=\"Add equation value\" />-->\n <!-- <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"selected($event)\">-->\n <!-- <ng-container *ngFor=\"let filteredField of (equationFilteredFields() | async)\">-->\n <!-- <mat-option [value]=\"filteredField\">{{ filteredField }}</mat-option>-->\n <!-- </ng-container>-->\n <!-- </mat-autocomplete>-->\n <!-- </mat-form-field>-->\n <!-- </div>-->\n <!-- <mat-error class=\"iq-error\" *ngIf=\"showError(field.property)\" aria-live=\"assertive\">-->\n <!-- {{ getErrors(field.property) | translate }}-->\n <!-- </mat-error>-->\n <!-- </ng-container>-->\n <!-- </ng-container>-->\n <!-- </ng-container>-->\n\n </ng-container>\n </div>\n </ng-container>\n </div>\n </ng-container>\n </div>\n </div>\n </form>\n </ng-container>\n </ng-container>\n </div>\n\n</div>\n<ng-template #dateReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <ng-container *ngIf=\"isReadonlyTextValueEmpty(defaults, field) && field.emptyReadonlyPlaceholderKey; else dateReadonlyHasValue\">\n <span class=\"readonly-value readonly-value--empty\">{{ field.emptyReadonlyPlaceholderKey | translate }}</span>\n </ng-container>\n <ng-template #dateReadonlyHasValue>\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) | date: getReadonlyDateFormat(field) }}</span>\n </ng-template>\n </div>\n</ng-template>\n\n<ng-template #timeReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <span class=\"readonly-value\">{{ formatTimeToDate(defaults[field.property]) | date: 'shortTime' }}</span>\n </div>\n</ng-template>\n\n<ng-template #phoneNumberReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\n </div>\n</ng-template>\n\n<ng-template #textReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\" *ngIf=\"!field.advancedFilter\"></label>\n <ng-container *ngIf=\"isReadonlyTextValueEmpty(defaults, field) && field.emptyReadonlyPlaceholderKey; else textReadonlyHasValue\">\n <span class=\"readonly-value readonly-value--empty\">{{ field.emptyReadonlyPlaceholderKey | translate }}</span>\n </ng-container>\n <ng-template #textReadonlyHasValue>\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\n </ng-template>\n </div>\n</ng-template>\n\n<ng-template #textareaReadonly let-field=\"field\">\n <ng-container *ngIf=\"field.textFormat === 'json'; else normalText\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <div class=\"readonly-value json-viewer\">\n <ngx-json-viewer [json]=\"extractJsonFieldName(defaults, field.property)\" [expanded]=\"true\"></ngx-json-viewer>\n </div>\n </div>\n </ng-container>\n <ng-template #normalText>\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\n </div>\n </ng-template>\n</ng-template>\n\n<ng-template #numberReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\n </div>\n</ng-template>\n\n<ng-template #currencyReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\n </div>\n</ng-template>\n\n<ng-template #radioButtonReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <span class=\"readonly-value\">{{ translateLable(defaults[field.property]) }}</span>\n </div>\n</ng-template>\n\n<ng-template #richTextReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <span class=\"readonly-value\" [innerHtml]=\"extractFieldName(defaults, field.property)\"></span>\n </div>\n</ng-template>\n\n<ng-template #checkboxReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <span class=\"readonly-value\">\n <mat-icon color=\"warn\" *ngIf=\"extractFieldName(defaults, field.property); else showNo\">done</mat-icon>\n <ng-template #showNo>\n <mat-icon color=\"warn\">close</mat-icon>\n </ng-template>\n </span>\n </div>\n</ng-template>\n\n<ng-template #toggleReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <span class=\"readonly-value\">\n <mat-icon color=\"warn\" *ngIf=\"extractFieldName(defaults, field.property); else showNo\">done</mat-icon>\n <ng-template #showNo>\n <mat-icon color=\"warn\">close</mat-icon>\n </ng-template>\n </span>\n </div>\n</ng-template>\n\n<ng-template #listReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <span class=\"readonly-value\" *ngIf=\"field.translate; else noTranslate\">\n {{ listShowValue(defaults, field) | translate }}\n </span>\n <ng-template #noTranslate>\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\n </ng-template>\n </div>\n</ng-template>\n\n<ng-template #sequenceReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\n </div>\n</ng-template>\n\n<ng-template #lookupReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <span class=\"readonly-value\">\n {{ extractFieldName(defaults, field.property)?.[translateService.getDefaultLang() === 'en' ? 'englishName' : 'arabicName'] }}\n </span>\n </div>\n</ng-template>\n\n<ng-template #amountReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <span class=\"readonly-value\">\n {{ extractFieldName(defaults, field.property) | currency: currency }}\n </span>\n </div>\n</ng-template>\n\n<ng-template #multiSelectReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <mat-chip-grid class=\"readonly-value chipList\">\n <mat-chip *ngFor=\"let filedProp of showMultiSelectValuesAsReadonly(field)\">\n {{ filedProp }}\n </mat-chip>\n </mat-chip-grid>\n </div>\n</ng-template>\n\n<ng-template #chipListReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHTML]=\"field.label | translate\"></label>\n <mat-chip-listbox class=\"readonly-value chipList\">\n <mat-chip-option *ngFor=\"let loc of splitReadonly(extractFieldName(defaults, field.property))\"\n [selectable]=\"true\"\n color=\"warn\"\n [removable]=\"false\">\n {{ loc }}\n </mat-chip-option>\n </mat-chip-listbox>\n </div>\n</ng-template>\n\n\n<ng-template #readonlyView>\n <div class=\"row-wrapper\">\n <div class=\"column-wrapper\">\n <ng-container *ngFor=\"let row of screenFields | keyvalue\">\n <div class=\"row-container\">\n <ng-container *ngFor=\"let field of row.value\">\n <div class=\"field-column readonly-item\" [style.flex]=\"field.fieldSize ? ('0 0 ' + field.fieldSize + '%') : '1 1 0'\">\n\n <ng-container [ngSwitch]=\"field.type\">\n\n <ng-container *ngSwitchCase=\"'attachment'\">\n <ng-container *ngIf=\"isAttachmentFieldEditable && showField(defaults, field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n </div>\n <app-attachment-uploader\n [acceptedTypes]=\"getAcceptedFileTypes(field)\"\n [ariaDescribedBy]=\"showError(field.property) ? 'error-' + field.property : null\"\n (fileSelected)=\"onAttachmentFileSelected($event, field)\"\n style=\"margin-top: 5px\">\n </app-attachment-uploader>\n <mat-error class=\"iq-error\"\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'date'\">\n <ng-container [ngTemplateOutlet]=\"dateReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'time'\">\n <ng-container [ngTemplateOutlet]=\"timeReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'phone-number'\">\n <ng-container [ngTemplateOutlet]=\"phoneNumberReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'text'\">\n <ng-container [ngTemplateOutlet]=\"textReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'textarea'\">\n <ng-container [ngTemplateOutlet]=\"textareaReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'number'\">\n <ng-container [ngTemplateOutlet]=\"numberReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'currency'\">\n <ng-container [ngTemplateOutlet]=\"currencyReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'radio-button'\">\n <ng-container [ngTemplateOutlet]=\"radioButtonReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'checkbox'\">\n <ng-container [ngTemplateOutlet]=\"checkboxReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'toggle'\">\n <ng-container [ngTemplateOutlet]=\"toggleReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'status'\">\n <ng-container [ngTemplateOutlet]=\"checkboxReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'lookup'\">\n <ng-container [ngTemplateOutlet]=\"lookupReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'amount'\">\n <ng-container [ngTemplateOutlet]=\"amountReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'multi-select'\">\n <ng-container [ngTemplateOutlet]=\"multiSelectReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'chip-list'\">\n <ng-container [ngTemplateOutlet]=\"chipListReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'sequence'\">\n <ng-container [ngTemplateOutlet]=\"sequenceReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'list'\">\n <ng-container [ngTemplateOutlet]=\"listReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'multi-state-checkbox'\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" *ngIf=\"!field.hideLabel\" [innerHtml]=\"field.label | translate\"></label>\n <span class=\"readonly-value\">{{ getMultiStateReadonlySummary(field, defaults) }}</span>\n </div>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'iban-text'\">\n <p class=\"label\">\n <span [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></span>\n <span> : </span>\n <span class=\"value\" [innerHtml]=\"extractFieldName(defaults, field.property)\"></span>\n </p>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'section-title'\">\n <div class=\"hrdivider-mid\">\n <span>{{ field.label | translate }}</span>\n </div>\n </ng-container>\n\n </ng-container>\n </div>\n </ng-container>\n </div>\n </ng-container>\n </div>\n </div>\n</ng-template>\n\n\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-label{font-weight:500;color:#9b9b9b;font-size:14px}.readonly-value{font-weight:500;color:#222;word-break:break-word;font-size:14px}.readonly-value--empty{font-style:italic;font-weight:500;color:#6b7280}.json-viewer{width:100%}.chipList{display:flex;flex-wrap:wrap;gap:4px}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}.time-picker-toggle .time-picker-toggle-button{--mdc-icon-button-state-layer-size: 40px;width:40px;height:40px;padding:0}.time-picker-toggle .mat-icon{width:20px;height:20px;font-size:20px}@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}:host ::ng-deep .mat-mdc-select-placeholder{color:#888!important}:host ::ng-deep .list-field .mat-mdc-text-field-wrapper{border-radius:8px;transition:border-color .16s ease}:host ::ng-deep .list-field .mdc-notched-outline__leading,:host ::ng-deep .list-field .mdc-notched-outline__notch,:host ::ng-deep .list-field .mdc-notched-outline__trailing{border-width:2px!important;border-color:#0d426147!important}:host ::ng-deep .list-field:hover .mdc-notched-outline__leading,:host ::ng-deep .list-field:hover .mdc-notched-outline__notch,:host ::ng-deep .list-field:hover .mdc-notched-outline__trailing,:host ::ng-deep .list-field.mat-focused .mdc-notched-outline__leading,:host ::ng-deep .list-field.mat-focused .mdc-notched-outline__notch,:host ::ng-deep .list-field.mat-focused .mdc-notched-outline__trailing{border-color:#0d42616b!important}::ng-deep .base-form-list-panel{padding:0!important;border:2px solid rgba(13,66,97,.18);border-radius:8px!important;overflow:hidden}::ng-deep .base-form-list-panel .mat-mdc-option{box-sizing:border-box;min-height:40px;margin:0;border:0;border-bottom:2px solid rgba(13,66,97,.14);border-radius:0;background-color:#fff;box-shadow:none;transition:background-color .16s ease,border-color .16s ease}::ng-deep .base-form-list-panel .mat-mdc-option:last-child{border-bottom:0}::ng-deep .base-form-list-panel .mat-mdc-option:hover,::ng-deep .base-form-list-panel .mat-mdc-option.mat-mdc-option-active,::ng-deep .base-form-list-panel .mat-mdc-option.mdc-list-item--selected{background-color:#0d42610f;border-color:#0d426138}.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}textarea[readonly].mat-mdc-form-field-input-control.mat-mdc-input-element{field-sizing:content!important;height:auto!important;min-height:unset!important;max-height:none!important;line-height:1.4!important;overflow:hidden!important;white-space:pre-wrap!important;overflow-wrap:anywhere!important;resize:none!important}::ng-deep .mdc-text-field--outlined:has(textarea[readonly]) .mat-mdc-form-field-infix,::ng-deep .mat-mdc-form-field:has(textarea[readonly]) .mat-mdc-form-field-infix{height:auto!important;min-height:unset!important}\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.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { 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: "directive", type: PhoneNumberOnlyDirective, selector: "[phoneNumberOnly]", inputs: ["phoneNumberOnly"] }, { 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", "labelsSection"], 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", "numbersOnly", "numbersOnlyWithPlus"] }, { kind: "directive", type: MaxDigitsDirective, selector: "[maxDigits]", inputs: ["maxDigits"] }] }); }
2989
2989
  }
2990
2990
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BaseFormCanvasComponent, decorators: [{
2991
2991
  type: Component,
@@ -3054,7 +3054,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
3054
3054
  },
3055
3055
  { provide: MAT_DATE_FORMATS, useValue: DD_MM_YYYY_Format },
3056
3056
  { provide: MAT_DATE_LOCALE, useValue: 'en-GB' }
3057
- ], template: "<div class=\"main-form-canvas\">\n <div class=\"form-wrapper\">\n <ng-container *ngIf=\"defaults\">\n <ng-container *ngIf=\"editable; else readonlyView\" class=\"form-container\">\n <form [formGroup]=\"formParam\" class=\"form-content\">\n <div class=\"form-row\">\n <div class=\"form-column\">\n <ng-container *ngFor=\"let row of screenFields | keyvalue\">\n <div class=\"row-container\">\n <ng-container *ngFor=\"let field of row.value\">\n <div class=\"field-column\" [style.flex]=\"field.fieldSize ? ('0 0 ' + field.fieldSize + '%') : '1 1 0'\">\n <ng-container [ngSwitch]=\"field.type\">\n <ng-container *ngSwitchCase=\"'date'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\n </div>\n\n <mat-form-field appearance=\"outline\">\n <input matInput\n [matDatepicker]=\"picker\"\n [min]=\"minDate\"\n (dateChange)=\"formParam.get(field.property).setValue($event.value)\"\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\n [readonly]=\"field.readonly\"\n [attr.tabindex]=\"field.readonly ? -1 : null\"\n formControlName=\"{{field.property}}\"\n [required]=\"field.required\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\n\n <mat-datepicker-toggle *ngIf=\"!field.readonly\" matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n\n <mat-datepicker #picker\n [startView]=\"getView(field)\"\n (yearSelected)=\"setMonthAndYear($event, picker, field)\"\n panelClass=\"example-month-picker\">\n </mat-datepicker>\n\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'phone-number'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container class=\"custom-ngx-mat-intl-tel-input\" *ngIf=\"workflowEditableField(field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\n </div>\n <mat-form-field appearance=\"outline\">\n <div class=\"phone-input-wrapper\">\n <ngx-mat-intl-tel-input\n formControlName=\"{{ field.property }}\"\n [inputPlaceholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\n [preferredCountries]=\"['qa']\"\n [enablePlaceholder]=\"true\"\n [enableSearch]=\"true\"\n [onlyCountries]=\"getCountryCodeList()\"\n [required]=\"field.required\"\n [attr.aria-required]=\"field.required\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\n </ngx-mat-intl-tel-input>\n </div>\n\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n\n </ng-container>\n </ng-container>\n </ng-container>\n\n\n <ng-container *ngSwitchCase=\"'iban-text'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"textReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\n </div>\n <mat-form-field appearance=\"outline\">\n <input class=\"app-input\"\n formControlName=\"{{ field.property }}\"\n matInput\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\n [readonly]=\"field.readonly\"\n [attr.tabindex]=\"field.readonly ? -1 : null\"\n [required]=\"field.required\"\n [attr.aria-required]=\"field.required\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n\n\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'password'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\n </div>\n <mat-form-field appearance=\"outline\">\n <input matInput\n class=\"app-input\"\n formControlName=\"{{ field.property }}\"\n [type]=\"hide && !field.disabled ? 'password' : 'text'\"\n [readonly]=\"field.readonly\"\n [attr.tabindex]=\"field.readonly ? -1 : null\"\n [required]=\"field.required\"\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\n [attr.aria-required]=\"field.required\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\n <!-- <mat-icon matSuffix-->\n <!-- (click)=\"hide = !hide\">-->\n <!-- {{ hide ? 'visibility_off' : 'visibility' }}-->\n <!-- </mat-icon>-->\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'text'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"textReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\n </div>\n <mat-form-field appearance=\"outline\">\n <mat-icon *ngIf=\"field.showSearchIcon\" matPrefix>search</mat-icon>\n <input class=\"app-input\"\n formControlName=\"{{ field.property }}\"\n matInput\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\n [readonly]=\"field.readonly\"\n [attr.tabindex]=\"field.readonly ? -1 : null\"\n [required]=\"field.required\"\n (keyup)=\"fixArabicNumbers($event.target)\"\n [attr.aria-required]=\"field.required\"\n [maxDigits]=\"field.maxLength\"\n [phoneNumberOnly]=\"field.phoneNumberOnly\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\n <span\n *ngIf=\"field.showSearchIcon && !field.readonly && (formParam?.get([field.property])?.value ?? '') !== ''\"\n matSuffix\n class=\"clear-icon-suffix\">\n <button\n mat-icon-button\n type=\"button\"\n class=\"clear-icon-button\"\n [attr.aria-label]=\"'BASE_TABLE.clearField' | translate\"\n (click)=\"clearFieldValue(field.property)\">\n <mat-icon aria-hidden=\"true\">close</mat-icon>\n </button>\n </span>\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n\n\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'multi-state-checkbox'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <div class=\"multi-state-filter\" [formGroup]=\"formParam\">\n <button\n type=\"button\"\n class=\"multi-state-filter__trigger\"\n [matMenuTriggerFor]=\"statusMultiMenu\"\n [attr.aria-haspopup]=\"true\"\n [attr.aria-expanded]=\"false\"\n [attr.aria-label]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : (field.label | translate)\">\n <span\n class=\"multi-state-filter__trigger-text\"\n [class.multi-state-filter__trigger-text--placeholder]=\"isMultiStateEmpty(field.property)\">\n {{\n getMultiStateFilterTriggerLabel(field)\n || (field.placeholder\n ? (labelKeyPlaceHolder(field) | translate)\n : ('FILTER-BUILDER.selectStatus' | translate))\n }}\n </span>\n <mat-icon class=\"multi-state-filter__chevron\" aria-hidden=\"true\">keyboard_arrow_down</mat-icon>\n </button>\n <mat-menu #statusMultiMenu=\"matMenu\" class=\"multi-state-filter__menu-panel\" [hasBackdrop]=\"true\">\n <div\n class=\"multi-state-filter__menu-inner\"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"onMultiStateMenuInnerKeydown($event, field)\">\n <div\n *ngFor=\"let code of field.listOptions || []\"\n mat-menu-item\n class=\"multi-state-filter__row\"\n [attr.data-multi-state-code]=\"code\"\n (click)=\"onMultiStateRowClick($event, field.property, code)\">\n <mat-checkbox\n tabindex=\"-1\"\n (click)=\"$event.stopPropagation()\"\n [checked]=\"isMultiStateSelected(field.property, code)\"\n (change)=\"toggleMultiStateFilter(field.property, code, $event.checked)\">\n </mat-checkbox>\n <span\n class=\"multi-state-filter__pill stateType\"\n [ngClass]=\"code\">\n {{ statusOptionLabelKey(field, code) | translate }}\n </span>\n </div>\n </div>\n </mat-menu>\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'chip-list'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\n </div>\n <mat-form-field appearance=\"outline\">\n\n <mat-chip-grid [attr.aria-labelledby]=\"'label-' + field.property\"\n formControlName=\"{{ field.property }}\">\n <mat-chip-row\n *ngFor=\"let mail of splittedChips(formParam, field.property); let idx = index\"\n [removable]=\"removable\"\n (removed)=\"removeChipsItem(formParam, field.property, idx)\">\n {{ mail }}\n <mat-icon matChipRemove *ngIf=\"removable\">cancel</mat-icon>\n </mat-chip-row>\n\n <input [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\n [matChipInputFor]=\"null\"\n [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n [matChipInputAddOnBlur]=\"addOnBlur\"\n (matChipInputTokenEnd)=\"addEmailToChips($event, formParam, field.property)\">\n </mat-chip-grid>\n <mat-error id=\"error-{{ field.property }}\" *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n\n\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'amount'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"amountReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\n </div>\n <mat-form-field appearance=\"outline\">\n <input class=\"app-input\"\n formControlName=\"{{ field.property }}\"\n matInput\n type=\"number\"\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\n [readonly]=\"field.readonly\"\n [attr.tabindex]=\"field.readonly ? -1 : null\"\n [required]=\"field.required\"\n [attr.aria-required]=\"field.required\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n\n\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'sequence'\">\n <ng-container\n *ngIf=\"referenceAttributeTrue(field.property, 'autoGenerated'); else noSequence\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\n </div>\n <mat-form-field appearance=\"outline\">\n <input class=\"app-input\"\n formControlName=\"{{ field.property }}\"\n matInput\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\n [readonly]=\"true\"\n [disabled]=\"true\"\n [attr.aria-labelledby]=\"'label-' + field.property\">\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n\n </ng-container>\n </ng-container>\n\n <ng-template #noSequence>\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\n </div>\n <mat-form-field appearance=\"outline\">\n <input class=\"app-input\"\n formControlName=\"{{ field.property }}\"\n matInput\n [readonly]=\"false\"\n [disabled]=\"false\"\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\n [required]=\"field.required\"\n [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-required]=\"field.required\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n\n </ng-template>\n\n <ng-container *ngSwitchCase=\"'textarea'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"textareaReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\n </div>\n <mat-form-field appearance=\"outline\">\n <textarea cdkFocusInitial\n formControlName=\"{{ field.property }}\"\n matInput\n cdkTextareaAutosize\n cdkAutosizeMinRows=\"3\"\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\n [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-required]=\"field.required\"\n [maxDigits]=\"field.maxLength\"\n [attr.maxlength]=\"field.maxLength || null\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\n [readonly]=\"field.readonly\"\n [attr.tabindex]=\"field.readonly ? -1 : null\"\n [required]=\"field.required\"></textarea>\n <mat-hint *ngIf=\"field.maxLength\" align=\"end\">\n {{ getFieldCurrentLength(field.property) }}/{{ field.maxLength }}\n </mat-hint>\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'number'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"numberReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\n </div>\n <mat-form-field appearance=\"outline\">\n <input class=\"app-input\"\n formControlName=\"{{ field.property }}\"\n matInput\n type=\"number\"\n [attr.min]=\"field.allowNegative ? null : 0\"\n (keydown)=\"blockNegativeNumberKeydown($event, field)\"\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\n [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-required]=\"field.required\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [maxDigits]=\"field.maxLength\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\n [required]=\"field.readonly ? false : field.required\"\n [readonly]=\"field.readonly\"\n [attr.tabindex]=\"field.readonly ? -1 : null\"\n [pattern]=\"field.pattern\">\n <mat-error id=\"error-{{ field.property }}\" *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'bigdecimal'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"numberReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\n </div>\n <mat-form-field appearance=\"outline\">\n <input\n matInput\n type=\"text\"\n inputmode=\"numeric\"\n formControlName=\"{{ field.property }}\"\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\n [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-required]=\"field.required\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [numbersOnly]=\"true\" [maxDecimals]=\"field.maxDecimals\"\n [maxDigits]=\"field.maxLength\"\n [pattern]=\"field.pattern\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\n [required]=\"field.readonly ? false : field.required\"\n [readonly]=\"field.readonly\"\n [attr.tabindex]=\"field.readonly ? -1 : null\">\n <mat-error id=\"error-{{ field.property }}\" *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'time'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"timeReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\n </div>\n <mat-form-field appearance=\"outline\">\n <input\n #timeInput\n matInput\n class=\"app-input\"\n formControlName=\"{{ field.property }}\"\n type=\"time\"\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\n [readonly]=\"field.readonly\"\n [attr.tabindex]=\"field.readonly ? -1 : null\"\n [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-required]=\"field.required\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\n [required]=\"field.required\">\n <span *ngIf=\"!field.readonly\" matSuffix class=\"mat-datepicker-toggle time-picker-toggle\">\n <button\n type=\"button\"\n mat-icon-button\n class=\"time-picker-toggle-button\"\n [attr.aria-label]=\"field.label! | translate\"\n (click)=\"openTimePicker(timeInput); $event.stopPropagation()\">\n <mat-icon>schedule</mat-icon>\n </button>\n </span>\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'checkbox'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"checkboxReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <mat-checkbox\n appearance=\"outline\"\n style=\"padding-bottom: 14px; padding-top: 14px;\"\n [disabled]=\"field.readonly\"\n [attr.aria-required]=\"field.required\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\n formControlName=\"{{ field.property }}\">\n {{ field.label! | translate }}\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-checkbox>\n\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'toggle'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"toggleReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\n </div>\n <mat-slide-toggle\n [disabled]=\"field.readonly\"\n [attr.aria-required]=\"field.required\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\n formControlName=\"{{ field.property }}\">\n </mat-slide-toggle>\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'color-picker'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <div fxLayout=\"row\" fxLayoutAlign=\"center\">\n <h4 style=\"margin-right: 10px\">{{ field.label! | translate }}</h4>\n <input\n ejs-colorpicker\n type=\"color\"\n id=\"colorpicker\"\n formControlName=\"{{ field.property }}\"\n [attr.aria-label]=\"field.label! | translate\"\n [attr.aria-required]=\"field.required\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\n />\n </div>\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </ng-container>\n </ng-container>\n\n\n <ng-container *ngSwitchCase=\"'radio-button'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"radioButtonReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <mat-radio-group\n formControlName=\"{{field.property}}\"\n class=\"app-radio\"\n [attr.aria-label]=\"field.label! | translate\"\n [attr.aria-required]=\"field.required\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\n <div class=\"field-row\">\n <div class=\"field-label\">\n <span class=\"custom-label\">{{ field.label! | translate }}</span>\n </div>\n <div class=\"field-input\">\n <div class=\"radio-group-custom\">\n <mat-radio-button\n *ngFor=\"let option of field.listOptions\"\n [value]=\"option\"\n [attr.aria-labelledby]=\"option\">\n {{ option | translate }}\n </mat-radio-button>\n </div>\n </div>\n </div>\n\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-radio-group>\n\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'list'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"listReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\n </div>\n <mat-form-field appearance=\"outline\" class=\"list-field\" style=\"width: 100%\">\n <mat-select\n panelClass=\"base-form-list-panel\"\n formControlName=\"{{field.property}}\"\n [attr.aria-label]=\"field.label! | translate\"\n [attr.aria-required]=\"field.required\"\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\n [disabled]=\"field.readonly\"\n [multiple]=\"field.multi || false\"\n [required]=\"field.readonly ? false : field.required\"\n [(value)]=\"field.defaultListOption\">\n <ng-container *ngIf=\"field.translate; else lookup_no_translation\">\n <mat-option\n *ngFor=\"let item of field.listOptions; let i = index\"\n [value]=\"item\">\n {{ friendlyName(field.label, field.property, item) | translate }}\n </mat-option>\n </ng-container>\n <ng-template #lookup_no_translation>\n <mat-option\n *ngFor=\"let item of field.listOptions\"\n [value]=\"item\">\n {{ getOptionValue(item) }}\n </mat-option>\n </ng-template>\n </mat-select>\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'attachment'\" [formGroup]=\"formParam\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\n </div>\n <app-attachment-uploader\n [acceptedTypes]=\"getAcceptedFileTypes(field)\"\n [ariaDescribedBy]=\"showError(field.property) ? 'error-' + field.property : null\"\n (fileSelected)=\"onAttachmentFileSelected($event, field)\"\n style=\"margin-top: 5px\">\n </app-attachment-uploader>\n </ng-container>\n <mat-error class=\"iq-error\"\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'lookup'\" [formGroup]=\"formParam\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"lookupReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <app-auto-complete\n [form]=\"formParam\"\n [field]=\"field\"\n [supportingAttributes]=\"supportingAttributes\"\n [defaultValue]=\"this.formParam.get(field.property)?.value\"\n (selectedValue)=\"patchLookupValue($event, field.property)\">\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </app-auto-complete>\n\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'currency'\" [formGroup]=\"formParam\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"currencyReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <!-- Uncomment and use the currency control when ready -->\n <!-- <app-currency\n [form]=\"formParam\"\n [field]=\"field\"\n [defaultValue]=\"this.formParam.get(field.property)?.value\"\n (selectedValue)=\"patchCurrencyValue($event, field.property)\">\n </app-currency> -->\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'multi-select'\" [formGroup]=\"formParam\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"multiSelectReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <app-multi-auto-complete\n [form]=\"formParam\"\n [field]=\"field\"\n [labelsSection]=\"pageInfo.labelsSection\"\n [defaultValue]=\"getMultiValue(field)\"\n (selectedValue)=\"patchMultiSelectValue($event, field.property)\">\n </app-multi-auto-complete>\n\n </ng-container>\n </ng-container>\n </ng-container>\n\n\n <ng-container *ngSwitchCase=\"'rich-text'\" [formGroup]=\"formParam\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <!-- Uncomment and use the rich text editor when ready -->\n <!-- <ckeditor\n [editor]=\"Editor\"\n [disabled]=\"field.readonly\"\n formControlName=\"{{field.property}}\">\n </ckeditor> -->\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'divider'\">\n <mat-divider></mat-divider>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'hyper-text'\">\n <div>\n <mat-label\n (click)=\"getHyperTextEvent()\"\n class=\"hyper-link\">\n {{ field.label! | translate }}\n </mat-label>\n </div>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'section-title'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <div class=\"hrdivider-mid\">\n <span>{{ field.label | translate }}</span>\n </div>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'equation-builder'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"textReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\n </div>\n <mat-form-field appearance=\"outline\">\n <input class=\"app-input\" dir=\"ltr\"\n formControlName=\"{{ field.property }}\"\n matInput\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\n [readonly]=\"field.readonly\"\n [attr.tabindex]=\"field.readonly ? -1 : null\"\n [required]=\"field.required\"\n [attr.aria-required]=\"field.required\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n\n\n </ng-container>\n </ng-container>\n </ng-container>\n <!-- <ng-container *ngSwitchCase=\"'equation-builder'\" [formGroup]=\"formParam\">-->\n <!-- <ng-container *ngIf=\"showField(defaults, field)\">-->\n <!-- <ng-container *ngIf=\"!workflowEditableField(field)\">-->\n <!-- <ng-container-->\n <!-- [ngTemplateOutlet]=\"dateReadonly\"-->\n <!-- [ngTemplateOutletContext]=\"{ field: field }\">-->\n <!-- </ng-container>-->\n <!-- </ng-container>-->\n <!-- <ng-container *ngIf=\"workflowEditableField(field)\">-->\n <!-- <div style=\"display: flex; width: 350%\">-->\n <!-- <mat-label>{{ field.label! | translate }}</mat-label>-->\n <!-- <mat-form-field style=\"width: 400%\" appearance=\"outline\">-->\n <!-- <mat-chip-grid #chipGrid>-->\n <!-- <ng-container *ngFor=\"let equationValue of equationValues(); let i = index\">-->\n <!-- <mat-chip-row (removed)=\"remove(equationValue, i)\">-->\n <!-- {{ equationValue }}-->\n <!-- <button-->\n <!-- matChipRemove-->\n <!-- [attr.aria-label]=\"'remove ' + equationValue\">-->\n <!-- <mat-icon>cancel</mat-icon>-->\n <!-- </button>-->\n <!-- </mat-chip-row>-->\n <!-- </ng-container>-->\n <!-- </mat-chip-grid>-->\n <!-- <input-->\n <!-- [(ngModel)]=\"currentEquationValue\"-->\n <!-- [matChipInputFor]=\"chipGrid\"-->\n <!-- [matAutocomplete]=\"auto\"-->\n <!-- [ngModelOptions]=\"{ standalone: true }\"-->\n <!-- [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"-->\n <!-- (matChipInputTokenEnd)=\"add($event)\"-->\n <!-- aria-label=\"Add equation value\" />-->\n <!-- <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"selected($event)\">-->\n <!-- <ng-container *ngFor=\"let filteredField of (equationFilteredFields() | async)\">-->\n <!-- <mat-option [value]=\"filteredField\">{{ filteredField }}</mat-option>-->\n <!-- </ng-container>-->\n <!-- </mat-autocomplete>-->\n <!-- </mat-form-field>-->\n <!-- </div>-->\n <!-- <mat-error class=\"iq-error\" *ngIf=\"showError(field.property)\" aria-live=\"assertive\">-->\n <!-- {{ getErrors(field.property) | translate }}-->\n <!-- </mat-error>-->\n <!-- </ng-container>-->\n <!-- </ng-container>-->\n <!-- </ng-container>-->\n\n </ng-container>\n </div>\n </ng-container>\n </div>\n </ng-container>\n </div>\n </div>\n </form>\n </ng-container>\n </ng-container>\n </div>\n\n</div>\n<ng-template #dateReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <ng-container *ngIf=\"isReadonlyTextValueEmpty(defaults, field) && field.emptyReadonlyPlaceholderKey; else dateReadonlyHasValue\">\n <span class=\"readonly-value readonly-value--empty\">{{ field.emptyReadonlyPlaceholderKey | translate }}</span>\n </ng-container>\n <ng-template #dateReadonlyHasValue>\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) | date: getReadonlyDateFormat(field) }}</span>\n </ng-template>\n </div>\n</ng-template>\n\n<ng-template #timeReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <span class=\"readonly-value\">{{ formatTimeToDate(defaults[field.property]) | date: 'shortTime' }}</span>\n </div>\n</ng-template>\n\n<ng-template #phoneNumberReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\n </div>\n</ng-template>\n\n<ng-template #textReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\" *ngIf=\"!field.advancedFilter\"></label>\n <ng-container *ngIf=\"isReadonlyTextValueEmpty(defaults, field) && field.emptyReadonlyPlaceholderKey; else textReadonlyHasValue\">\n <span class=\"readonly-value readonly-value--empty\">{{ field.emptyReadonlyPlaceholderKey | translate }}</span>\n </ng-container>\n <ng-template #textReadonlyHasValue>\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\n </ng-template>\n </div>\n</ng-template>\n\n<ng-template #textareaReadonly let-field=\"field\">\n <ng-container *ngIf=\"field.textFormat === 'json'; else normalText\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <div class=\"readonly-value json-viewer\">\n <ngx-json-viewer [json]=\"extractJsonFieldName(defaults, field.property)\" [expanded]=\"true\"></ngx-json-viewer>\n </div>\n </div>\n </ng-container>\n <ng-template #normalText>\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\n </div>\n </ng-template>\n</ng-template>\n\n<ng-template #numberReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\n </div>\n</ng-template>\n\n<ng-template #currencyReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\n </div>\n</ng-template>\n\n<ng-template #radioButtonReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <span class=\"readonly-value\">{{ translateLable(defaults[field.property]) }}</span>\n </div>\n</ng-template>\n\n<ng-template #richTextReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <span class=\"readonly-value\" [innerHtml]=\"extractFieldName(defaults, field.property)\"></span>\n </div>\n</ng-template>\n\n<ng-template #checkboxReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <span class=\"readonly-value\">\n <mat-icon color=\"warn\" *ngIf=\"extractFieldName(defaults, field.property); else showNo\">done</mat-icon>\n <ng-template #showNo>\n <mat-icon color=\"warn\">close</mat-icon>\n </ng-template>\n </span>\n </div>\n</ng-template>\n\n<ng-template #toggleReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <span class=\"readonly-value\">\n <mat-icon color=\"warn\" *ngIf=\"extractFieldName(defaults, field.property); else showNo\">done</mat-icon>\n <ng-template #showNo>\n <mat-icon color=\"warn\">close</mat-icon>\n </ng-template>\n </span>\n </div>\n</ng-template>\n\n<ng-template #listReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <span class=\"readonly-value\" *ngIf=\"field.translate; else noTranslate\">\n {{ listShowValue(defaults, field) | translate }}\n </span>\n <ng-template #noTranslate>\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\n </ng-template>\n </div>\n</ng-template>\n\n<ng-template #sequenceReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\n </div>\n</ng-template>\n\n<ng-template #lookupReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <span class=\"readonly-value\">\n {{ extractFieldName(defaults, field.property)?.[translateService.getDefaultLang() === 'en' ? 'englishName' : 'arabicName'] }}\n </span>\n </div>\n</ng-template>\n\n<ng-template #amountReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <span class=\"readonly-value\">\n {{ extractFieldName(defaults, field.property) | currency: currency }}\n </span>\n </div>\n</ng-template>\n\n<ng-template #multiSelectReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <mat-chip-grid class=\"readonly-value chipList\">\n <mat-chip *ngFor=\"let filedProp of showMultiSelectValuesAsReadonly(field)\">\n {{ filedProp }}\n </mat-chip>\n </mat-chip-grid>\n </div>\n</ng-template>\n\n<ng-template #chipListReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHTML]=\"field.label | translate\"></label>\n <mat-chip-listbox class=\"readonly-value chipList\">\n <mat-chip-option *ngFor=\"let loc of splitReadonly(extractFieldName(defaults, field.property))\"\n [selectable]=\"true\"\n color=\"warn\"\n [removable]=\"false\">\n {{ loc }}\n </mat-chip-option>\n </mat-chip-listbox>\n </div>\n</ng-template>\n\n\n<ng-template #readonlyView>\n <div class=\"row-wrapper\">\n <div class=\"column-wrapper\">\n <ng-container *ngFor=\"let row of screenFields | keyvalue\">\n <div class=\"row-container\">\n <ng-container *ngFor=\"let field of row.value\">\n <div class=\"field-column readonly-item\" [style.flex]=\"field.fieldSize ? ('0 0 ' + field.fieldSize + '%') : '1 1 0'\">\n\n <ng-container [ngSwitch]=\"field.type\">\n\n <ng-container *ngSwitchCase=\"'attachment'\">\n <ng-container *ngIf=\"isAttachmentFieldEditable && showField(defaults, field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n </div>\n <app-attachment-uploader\n [acceptedTypes]=\"getAcceptedFileTypes(field)\"\n [ariaDescribedBy]=\"showError(field.property) ? 'error-' + field.property : null\"\n (fileSelected)=\"onAttachmentFileSelected($event, field)\"\n style=\"margin-top: 5px\">\n </app-attachment-uploader>\n <mat-error class=\"iq-error\"\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'date'\">\n <ng-container [ngTemplateOutlet]=\"dateReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'time'\">\n <ng-container [ngTemplateOutlet]=\"timeReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'phone-number'\">\n <ng-container [ngTemplateOutlet]=\"phoneNumberReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'text'\">\n <ng-container [ngTemplateOutlet]=\"textReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'textarea'\">\n <ng-container [ngTemplateOutlet]=\"textareaReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'number'\">\n <ng-container [ngTemplateOutlet]=\"numberReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'currency'\">\n <ng-container [ngTemplateOutlet]=\"currencyReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'radio-button'\">\n <ng-container [ngTemplateOutlet]=\"radioButtonReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'checkbox'\">\n <ng-container [ngTemplateOutlet]=\"checkboxReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'toggle'\">\n <ng-container [ngTemplateOutlet]=\"toggleReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'status'\">\n <ng-container [ngTemplateOutlet]=\"checkboxReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'lookup'\">\n <ng-container [ngTemplateOutlet]=\"lookupReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'amount'\">\n <ng-container [ngTemplateOutlet]=\"amountReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'multi-select'\">\n <ng-container [ngTemplateOutlet]=\"multiSelectReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'chip-list'\">\n <ng-container [ngTemplateOutlet]=\"chipListReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'sequence'\">\n <ng-container [ngTemplateOutlet]=\"sequenceReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'list'\">\n <ng-container [ngTemplateOutlet]=\"listReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'multi-state-checkbox'\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" *ngIf=\"!field.hideLabel\" [innerHtml]=\"field.label | translate\"></label>\n <span class=\"readonly-value\">{{ getMultiStateReadonlySummary(field, defaults) }}</span>\n </div>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'iban-text'\">\n <p class=\"label\">\n <span [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></span>\n <span> : </span>\n <span class=\"value\" [innerHtml]=\"extractFieldName(defaults, field.property)\"></span>\n </p>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'section-title'\">\n <div class=\"hrdivider-mid\">\n <span>{{ field.label | translate }}</span>\n </div>\n </ng-container>\n\n </ng-container>\n </div>\n </ng-container>\n </div>\n </ng-container>\n </div>\n </div>\n</ng-template>\n\n\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-label{font-weight:500;color:#9b9b9b;font-size:14px}.readonly-value{font-weight:500;color:#222;word-break:break-word;font-size:14px}.readonly-value--empty{font-style:italic;font-weight:500;color:#6b7280}.json-viewer{width:100%}.chipList{display:flex;flex-wrap:wrap;gap:4px}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}.time-picker-toggle .time-picker-toggle-button{--mdc-icon-button-state-layer-size: 40px;width:40px;height:40px;padding:0}.time-picker-toggle .mat-icon{width:20px;height:20px;font-size:20px}@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}:host ::ng-deep .mat-mdc-select-placeholder{color:#888!important}:host ::ng-deep .list-field .mat-mdc-text-field-wrapper{border-radius:8px;transition:border-color .16s ease}:host ::ng-deep .list-field .mdc-notched-outline__leading,:host ::ng-deep .list-field .mdc-notched-outline__notch,:host ::ng-deep .list-field .mdc-notched-outline__trailing{border-width:2px!important;border-color:#0d426147!important}:host ::ng-deep .list-field:hover .mdc-notched-outline__leading,:host ::ng-deep .list-field:hover .mdc-notched-outline__notch,:host ::ng-deep .list-field:hover .mdc-notched-outline__trailing,:host ::ng-deep .list-field.mat-focused .mdc-notched-outline__leading,:host ::ng-deep .list-field.mat-focused .mdc-notched-outline__notch,:host ::ng-deep .list-field.mat-focused .mdc-notched-outline__trailing{border-color:#0d42616b!important}::ng-deep .base-form-list-panel{padding:0!important;border:2px solid rgba(13,66,97,.18);border-radius:8px!important;overflow:hidden}::ng-deep .base-form-list-panel .mat-mdc-option{box-sizing:border-box;min-height:40px;margin:0;border:0;border-bottom:2px solid rgba(13,66,97,.14);border-radius:0;background-color:#fff;box-shadow:none;transition:background-color .16s ease,border-color .16s ease}::ng-deep .base-form-list-panel .mat-mdc-option:last-child{border-bottom:0}::ng-deep .base-form-list-panel .mat-mdc-option:hover,::ng-deep .base-form-list-panel .mat-mdc-option.mat-mdc-option-active,::ng-deep .base-form-list-panel .mat-mdc-option.mdc-list-item--selected{background-color:#0d42610f;border-color:#0d426138}.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"] }]
3057
+ ], template: "<div class=\"main-form-canvas\">\n <div class=\"form-wrapper\">\n <ng-container *ngIf=\"defaults\">\n <ng-container *ngIf=\"editable; else readonlyView\" class=\"form-container\">\n <form [formGroup]=\"formParam\" class=\"form-content\">\n <div class=\"form-row\">\n <div class=\"form-column\">\n <ng-container *ngFor=\"let row of screenFields | keyvalue\">\n <div class=\"row-container\">\n <ng-container *ngFor=\"let field of row.value\">\n <div class=\"field-column\" [style.flex]=\"field.fieldSize ? ('0 0 ' + field.fieldSize + '%') : '1 1 0'\">\n <ng-container [ngSwitch]=\"field.type\">\n <ng-container *ngSwitchCase=\"'date'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\n </div>\n\n <mat-form-field appearance=\"outline\">\n <input matInput\n [matDatepicker]=\"picker\"\n [min]=\"minDate\"\n (dateChange)=\"formParam.get(field.property).setValue($event.value)\"\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\n [readonly]=\"field.readonly\"\n [attr.tabindex]=\"field.readonly ? -1 : null\"\n formControlName=\"{{field.property}}\"\n [required]=\"field.required\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\n\n <mat-datepicker-toggle *ngIf=\"!field.readonly\" matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n\n <mat-datepicker #picker\n [startView]=\"getView(field)\"\n (yearSelected)=\"setMonthAndYear($event, picker, field)\"\n panelClass=\"example-month-picker\">\n </mat-datepicker>\n\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'phone-number'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container class=\"custom-ngx-mat-intl-tel-input\" *ngIf=\"workflowEditableField(field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\n </div>\n <mat-form-field appearance=\"outline\">\n <div class=\"phone-input-wrapper\">\n <ngx-mat-intl-tel-input\n formControlName=\"{{ field.property }}\"\n [inputPlaceholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\n [preferredCountries]=\"['qa']\"\n [enablePlaceholder]=\"true\"\n [enableSearch]=\"true\"\n [onlyCountries]=\"getCountryCodeList()\"\n [required]=\"field.required\"\n [attr.aria-required]=\"field.required\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\n </ngx-mat-intl-tel-input>\n </div>\n\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n\n </ng-container>\n </ng-container>\n </ng-container>\n\n\n <ng-container *ngSwitchCase=\"'iban-text'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"textReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\n </div>\n <mat-form-field appearance=\"outline\">\n <input class=\"app-input\"\n formControlName=\"{{ field.property }}\"\n matInput\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\n [readonly]=\"field.readonly\"\n [attr.tabindex]=\"field.readonly ? -1 : null\"\n [required]=\"field.required\"\n [attr.aria-required]=\"field.required\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n\n\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'password'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\n </div>\n <mat-form-field appearance=\"outline\">\n <input matInput\n class=\"app-input\"\n formControlName=\"{{ field.property }}\"\n [type]=\"hide && !field.disabled ? 'password' : 'text'\"\n [readonly]=\"field.readonly\"\n [attr.tabindex]=\"field.readonly ? -1 : null\"\n [required]=\"field.required\"\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\n [attr.aria-required]=\"field.required\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\n <!-- <mat-icon matSuffix-->\n <!-- (click)=\"hide = !hide\">-->\n <!-- {{ hide ? 'visibility_off' : 'visibility' }}-->\n <!-- </mat-icon>-->\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'text'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"textReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\n </div>\n <mat-form-field appearance=\"outline\">\n <mat-icon *ngIf=\"field.showSearchIcon\" matPrefix>search</mat-icon>\n <input class=\"app-input\"\n formControlName=\"{{ field.property }}\"\n matInput\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\n [readonly]=\"field.readonly\"\n [attr.tabindex]=\"field.readonly ? -1 : null\"\n [required]=\"field.required\"\n (keyup)=\"fixArabicNumbers($event.target)\"\n [attr.aria-required]=\"field.required\"\n [maxDigits]=\"field.maxLength\"\n [phoneNumberOnly]=\"field.phoneNumberOnly\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\n <span\n *ngIf=\"field.showSearchIcon && !field.readonly && (formParam?.get([field.property])?.value ?? '') !== ''\"\n matSuffix\n class=\"clear-icon-suffix\">\n <button\n mat-icon-button\n type=\"button\"\n class=\"clear-icon-button\"\n [attr.aria-label]=\"'BASE_TABLE.clearField' | translate\"\n (click)=\"clearFieldValue(field.property)\">\n <mat-icon aria-hidden=\"true\">close</mat-icon>\n </button>\n </span>\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n\n\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'multi-state-checkbox'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <div class=\"multi-state-filter\" [formGroup]=\"formParam\">\n <button\n type=\"button\"\n class=\"multi-state-filter__trigger\"\n [matMenuTriggerFor]=\"statusMultiMenu\"\n [attr.aria-haspopup]=\"true\"\n [attr.aria-expanded]=\"false\"\n [attr.aria-label]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : (field.label | translate)\">\n <span\n class=\"multi-state-filter__trigger-text\"\n [class.multi-state-filter__trigger-text--placeholder]=\"isMultiStateEmpty(field.property)\">\n {{\n getMultiStateFilterTriggerLabel(field)\n || (field.placeholder\n ? (labelKeyPlaceHolder(field) | translate)\n : ('FILTER-BUILDER.selectStatus' | translate))\n }}\n </span>\n <mat-icon class=\"multi-state-filter__chevron\" aria-hidden=\"true\">keyboard_arrow_down</mat-icon>\n </button>\n <mat-menu #statusMultiMenu=\"matMenu\" class=\"multi-state-filter__menu-panel\" [hasBackdrop]=\"true\">\n <div\n class=\"multi-state-filter__menu-inner\"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"onMultiStateMenuInnerKeydown($event, field)\">\n <div\n *ngFor=\"let code of field.listOptions || []\"\n mat-menu-item\n class=\"multi-state-filter__row\"\n [attr.data-multi-state-code]=\"code\"\n (click)=\"onMultiStateRowClick($event, field.property, code)\">\n <mat-checkbox\n tabindex=\"-1\"\n (click)=\"$event.stopPropagation()\"\n [checked]=\"isMultiStateSelected(field.property, code)\"\n (change)=\"toggleMultiStateFilter(field.property, code, $event.checked)\">\n </mat-checkbox>\n <span\n class=\"multi-state-filter__pill stateType\"\n [ngClass]=\"code\">\n {{ statusOptionLabelKey(field, code) | translate }}\n </span>\n </div>\n </div>\n </mat-menu>\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'chip-list'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\n </div>\n <mat-form-field appearance=\"outline\">\n\n <mat-chip-grid [attr.aria-labelledby]=\"'label-' + field.property\"\n formControlName=\"{{ field.property }}\">\n <mat-chip-row\n *ngFor=\"let mail of splittedChips(formParam, field.property); let idx = index\"\n [removable]=\"removable\"\n (removed)=\"removeChipsItem(formParam, field.property, idx)\">\n {{ mail }}\n <mat-icon matChipRemove *ngIf=\"removable\">cancel</mat-icon>\n </mat-chip-row>\n\n <input [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\n [matChipInputFor]=\"null\"\n [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n [matChipInputAddOnBlur]=\"addOnBlur\"\n (matChipInputTokenEnd)=\"addEmailToChips($event, formParam, field.property)\">\n </mat-chip-grid>\n <mat-error id=\"error-{{ field.property }}\" *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n\n\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'amount'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"amountReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\n </div>\n <mat-form-field appearance=\"outline\">\n <input class=\"app-input\"\n formControlName=\"{{ field.property }}\"\n matInput\n type=\"number\"\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\n [readonly]=\"field.readonly\"\n [attr.tabindex]=\"field.readonly ? -1 : null\"\n [required]=\"field.required\"\n [attr.aria-required]=\"field.required\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n\n\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'sequence'\">\n <ng-container\n *ngIf=\"referenceAttributeTrue(field.property, 'autoGenerated'); else noSequence\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\n </div>\n <mat-form-field appearance=\"outline\">\n <input class=\"app-input\"\n formControlName=\"{{ field.property }}\"\n matInput\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\n [readonly]=\"true\"\n [disabled]=\"true\"\n [attr.aria-labelledby]=\"'label-' + field.property\">\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n\n </ng-container>\n </ng-container>\n\n <ng-template #noSequence>\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\n </div>\n <mat-form-field appearance=\"outline\">\n <input class=\"app-input\"\n formControlName=\"{{ field.property }}\"\n matInput\n [readonly]=\"false\"\n [disabled]=\"false\"\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\n [required]=\"field.required\"\n [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-required]=\"field.required\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n\n </ng-template>\n\n <ng-container *ngSwitchCase=\"'textarea'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"textareaReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\n </div>\n <mat-form-field appearance=\"outline\">\n <textarea cdkFocusInitial\n formControlName=\"{{ field.property }}\"\n matInput\n cdkTextareaAutosize\n cdkAutosizeMinRows=\"3\"\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\n [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-required]=\"field.required\"\n [maxDigits]=\"field.maxLength\"\n [attr.maxlength]=\"field.maxLength || null\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\n [readonly]=\"field.readonly\"\n [attr.tabindex]=\"field.readonly ? -1 : null\"\n [required]=\"field.required\"></textarea>\n <mat-hint *ngIf=\"field.maxLength\" align=\"end\">\n {{ getFieldCurrentLength(field.property) }}/{{ field.maxLength }}\n </mat-hint>\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'number'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"numberReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\n </div>\n <mat-form-field appearance=\"outline\">\n <input class=\"app-input\"\n formControlName=\"{{ field.property }}\"\n matInput\n type=\"number\"\n [attr.min]=\"field.allowNegative ? null : 0\"\n (keydown)=\"blockNegativeNumberKeydown($event, field)\"\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\n [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-required]=\"field.required\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [maxDigits]=\"field.maxLength\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\n [required]=\"field.readonly ? false : field.required\"\n [readonly]=\"field.readonly\"\n [attr.tabindex]=\"field.readonly ? -1 : null\"\n [pattern]=\"field.pattern\">\n <mat-error id=\"error-{{ field.property }}\" *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'bigdecimal'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"numberReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\n </div>\n <mat-form-field appearance=\"outline\">\n <input\n matInput\n type=\"text\"\n inputmode=\"numeric\"\n formControlName=\"{{ field.property }}\"\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\n [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-required]=\"field.required\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [numbersOnly]=\"true\" [maxDecimals]=\"field.maxDecimals\"\n [maxDigits]=\"field.maxLength\"\n [pattern]=\"field.pattern\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\n [required]=\"field.readonly ? false : field.required\"\n [readonly]=\"field.readonly\"\n [attr.tabindex]=\"field.readonly ? -1 : null\">\n <mat-error id=\"error-{{ field.property }}\" *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'time'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"timeReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\n </div>\n <mat-form-field appearance=\"outline\">\n <input\n #timeInput\n matInput\n class=\"app-input\"\n formControlName=\"{{ field.property }}\"\n type=\"time\"\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\n [readonly]=\"field.readonly\"\n [attr.tabindex]=\"field.readonly ? -1 : null\"\n [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-required]=\"field.required\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\n [required]=\"field.required\">\n <span *ngIf=\"!field.readonly\" matSuffix class=\"mat-datepicker-toggle time-picker-toggle\">\n <button\n type=\"button\"\n mat-icon-button\n class=\"time-picker-toggle-button\"\n [attr.aria-label]=\"field.label! | translate\"\n (click)=\"openTimePicker(timeInput); $event.stopPropagation()\">\n <mat-icon>schedule</mat-icon>\n </button>\n </span>\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'checkbox'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"checkboxReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <mat-checkbox\n appearance=\"outline\"\n style=\"padding-bottom: 14px; padding-top: 14px;\"\n [disabled]=\"field.readonly\"\n [attr.aria-required]=\"field.required\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\n formControlName=\"{{ field.property }}\">\n {{ field.label! | translate }}\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-checkbox>\n\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'toggle'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"toggleReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\n </div>\n <mat-slide-toggle\n [disabled]=\"field.readonly\"\n [attr.aria-required]=\"field.required\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\n formControlName=\"{{ field.property }}\">\n </mat-slide-toggle>\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'color-picker'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <div fxLayout=\"row\" fxLayoutAlign=\"center\">\n <h4 style=\"margin-right: 10px\">{{ field.label! | translate }}</h4>\n <input\n ejs-colorpicker\n type=\"color\"\n id=\"colorpicker\"\n formControlName=\"{{ field.property }}\"\n [attr.aria-label]=\"field.label! | translate\"\n [attr.aria-required]=\"field.required\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\n />\n </div>\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </ng-container>\n </ng-container>\n\n\n <ng-container *ngSwitchCase=\"'radio-button'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"radioButtonReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <mat-radio-group\n formControlName=\"{{field.property}}\"\n class=\"app-radio\"\n [attr.aria-label]=\"field.label! | translate\"\n [attr.aria-required]=\"field.required\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\n <div class=\"field-row\">\n <div class=\"field-label\">\n <span class=\"custom-label\">{{ field.label! | translate }}</span>\n </div>\n <div class=\"field-input\">\n <div class=\"radio-group-custom\">\n <mat-radio-button\n *ngFor=\"let option of field.listOptions\"\n [value]=\"option\"\n [attr.aria-labelledby]=\"option\">\n {{ option | translate }}\n </mat-radio-button>\n </div>\n </div>\n </div>\n\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-radio-group>\n\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'list'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"listReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\n </div>\n <mat-form-field appearance=\"outline\" class=\"list-field\" style=\"width: 100%\">\n <mat-select\n panelClass=\"base-form-list-panel\"\n formControlName=\"{{field.property}}\"\n [attr.aria-label]=\"field.label! | translate\"\n [attr.aria-required]=\"field.required\"\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\n [disabled]=\"field.readonly\"\n [multiple]=\"field.multi || false\"\n [required]=\"field.readonly ? false : field.required\"\n [(value)]=\"field.defaultListOption\">\n <ng-container *ngIf=\"field.translate; else lookup_no_translation\">\n <mat-option\n *ngFor=\"let item of field.listOptions; let i = index\"\n [value]=\"item\">\n {{ friendlyName(field.label, field.property, item) | translate }}\n </mat-option>\n </ng-container>\n <ng-template #lookup_no_translation>\n <mat-option\n *ngFor=\"let item of field.listOptions\"\n [value]=\"item\">\n {{ getOptionValue(item) }}\n </mat-option>\n </ng-template>\n </mat-select>\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'attachment'\" [formGroup]=\"formParam\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\n </div>\n <app-attachment-uploader\n [acceptedTypes]=\"getAcceptedFileTypes(field)\"\n [ariaDescribedBy]=\"showError(field.property) ? 'error-' + field.property : null\"\n (fileSelected)=\"onAttachmentFileSelected($event, field)\"\n style=\"margin-top: 5px\">\n </app-attachment-uploader>\n </ng-container>\n <mat-error class=\"iq-error\"\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'lookup'\" [formGroup]=\"formParam\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"lookupReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <app-auto-complete\n [form]=\"formParam\"\n [field]=\"field\"\n [supportingAttributes]=\"supportingAttributes\"\n [defaultValue]=\"this.formParam.get(field.property)?.value\"\n (selectedValue)=\"patchLookupValue($event, field.property)\">\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </app-auto-complete>\n\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'currency'\" [formGroup]=\"formParam\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"currencyReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <!-- Uncomment and use the currency control when ready -->\n <!-- <app-currency\n [form]=\"formParam\"\n [field]=\"field\"\n [defaultValue]=\"this.formParam.get(field.property)?.value\"\n (selectedValue)=\"patchCurrencyValue($event, field.property)\">\n </app-currency> -->\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'multi-select'\" [formGroup]=\"formParam\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"multiSelectReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <app-multi-auto-complete\n [form]=\"formParam\"\n [field]=\"field\"\n [labelsSection]=\"pageInfo.labelsSection\"\n [defaultValue]=\"getMultiValue(field)\"\n (selectedValue)=\"patchMultiSelectValue($event, field.property)\">\n </app-multi-auto-complete>\n\n </ng-container>\n </ng-container>\n </ng-container>\n\n\n <ng-container *ngSwitchCase=\"'rich-text'\" [formGroup]=\"formParam\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <!-- Uncomment and use the rich text editor when ready -->\n <!-- <ckeditor\n [editor]=\"Editor\"\n [disabled]=\"field.readonly\"\n formControlName=\"{{field.property}}\">\n </ckeditor> -->\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'divider'\">\n <mat-divider></mat-divider>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'hyper-text'\">\n <div>\n <mat-label\n (click)=\"getHyperTextEvent()\"\n class=\"hyper-link\">\n {{ field.label! | translate }}\n </mat-label>\n </div>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'section-title'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <div class=\"hrdivider-mid\">\n <span>{{ field.label | translate }}</span>\n </div>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'equation-builder'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"textReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\n </div>\n <mat-form-field appearance=\"outline\">\n <input class=\"app-input\" dir=\"ltr\"\n formControlName=\"{{ field.property }}\"\n matInput\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\n [readonly]=\"field.readonly\"\n [attr.tabindex]=\"field.readonly ? -1 : null\"\n [required]=\"field.required\"\n [attr.aria-required]=\"field.required\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n\n\n </ng-container>\n </ng-container>\n </ng-container>\n <!-- <ng-container *ngSwitchCase=\"'equation-builder'\" [formGroup]=\"formParam\">-->\n <!-- <ng-container *ngIf=\"showField(defaults, field)\">-->\n <!-- <ng-container *ngIf=\"!workflowEditableField(field)\">-->\n <!-- <ng-container-->\n <!-- [ngTemplateOutlet]=\"dateReadonly\"-->\n <!-- [ngTemplateOutletContext]=\"{ field: field }\">-->\n <!-- </ng-container>-->\n <!-- </ng-container>-->\n <!-- <ng-container *ngIf=\"workflowEditableField(field)\">-->\n <!-- <div style=\"display: flex; width: 350%\">-->\n <!-- <mat-label>{{ field.label! | translate }}</mat-label>-->\n <!-- <mat-form-field style=\"width: 400%\" appearance=\"outline\">-->\n <!-- <mat-chip-grid #chipGrid>-->\n <!-- <ng-container *ngFor=\"let equationValue of equationValues(); let i = index\">-->\n <!-- <mat-chip-row (removed)=\"remove(equationValue, i)\">-->\n <!-- {{ equationValue }}-->\n <!-- <button-->\n <!-- matChipRemove-->\n <!-- [attr.aria-label]=\"'remove ' + equationValue\">-->\n <!-- <mat-icon>cancel</mat-icon>-->\n <!-- </button>-->\n <!-- </mat-chip-row>-->\n <!-- </ng-container>-->\n <!-- </mat-chip-grid>-->\n <!-- <input-->\n <!-- [(ngModel)]=\"currentEquationValue\"-->\n <!-- [matChipInputFor]=\"chipGrid\"-->\n <!-- [matAutocomplete]=\"auto\"-->\n <!-- [ngModelOptions]=\"{ standalone: true }\"-->\n <!-- [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"-->\n <!-- (matChipInputTokenEnd)=\"add($event)\"-->\n <!-- aria-label=\"Add equation value\" />-->\n <!-- <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"selected($event)\">-->\n <!-- <ng-container *ngFor=\"let filteredField of (equationFilteredFields() | async)\">-->\n <!-- <mat-option [value]=\"filteredField\">{{ filteredField }}</mat-option>-->\n <!-- </ng-container>-->\n <!-- </mat-autocomplete>-->\n <!-- </mat-form-field>-->\n <!-- </div>-->\n <!-- <mat-error class=\"iq-error\" *ngIf=\"showError(field.property)\" aria-live=\"assertive\">-->\n <!-- {{ getErrors(field.property) | translate }}-->\n <!-- </mat-error>-->\n <!-- </ng-container>-->\n <!-- </ng-container>-->\n <!-- </ng-container>-->\n\n </ng-container>\n </div>\n </ng-container>\n </div>\n </ng-container>\n </div>\n </div>\n </form>\n </ng-container>\n </ng-container>\n </div>\n\n</div>\n<ng-template #dateReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <ng-container *ngIf=\"isReadonlyTextValueEmpty(defaults, field) && field.emptyReadonlyPlaceholderKey; else dateReadonlyHasValue\">\n <span class=\"readonly-value readonly-value--empty\">{{ field.emptyReadonlyPlaceholderKey | translate }}</span>\n </ng-container>\n <ng-template #dateReadonlyHasValue>\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) | date: getReadonlyDateFormat(field) }}</span>\n </ng-template>\n </div>\n</ng-template>\n\n<ng-template #timeReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <span class=\"readonly-value\">{{ formatTimeToDate(defaults[field.property]) | date: 'shortTime' }}</span>\n </div>\n</ng-template>\n\n<ng-template #phoneNumberReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\n </div>\n</ng-template>\n\n<ng-template #textReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\" *ngIf=\"!field.advancedFilter\"></label>\n <ng-container *ngIf=\"isReadonlyTextValueEmpty(defaults, field) && field.emptyReadonlyPlaceholderKey; else textReadonlyHasValue\">\n <span class=\"readonly-value readonly-value--empty\">{{ field.emptyReadonlyPlaceholderKey | translate }}</span>\n </ng-container>\n <ng-template #textReadonlyHasValue>\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\n </ng-template>\n </div>\n</ng-template>\n\n<ng-template #textareaReadonly let-field=\"field\">\n <ng-container *ngIf=\"field.textFormat === 'json'; else normalText\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <div class=\"readonly-value json-viewer\">\n <ngx-json-viewer [json]=\"extractJsonFieldName(defaults, field.property)\" [expanded]=\"true\"></ngx-json-viewer>\n </div>\n </div>\n </ng-container>\n <ng-template #normalText>\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\n </div>\n </ng-template>\n</ng-template>\n\n<ng-template #numberReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\n </div>\n</ng-template>\n\n<ng-template #currencyReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\n </div>\n</ng-template>\n\n<ng-template #radioButtonReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <span class=\"readonly-value\">{{ translateLable(defaults[field.property]) }}</span>\n </div>\n</ng-template>\n\n<ng-template #richTextReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <span class=\"readonly-value\" [innerHtml]=\"extractFieldName(defaults, field.property)\"></span>\n </div>\n</ng-template>\n\n<ng-template #checkboxReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <span class=\"readonly-value\">\n <mat-icon color=\"warn\" *ngIf=\"extractFieldName(defaults, field.property); else showNo\">done</mat-icon>\n <ng-template #showNo>\n <mat-icon color=\"warn\">close</mat-icon>\n </ng-template>\n </span>\n </div>\n</ng-template>\n\n<ng-template #toggleReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <span class=\"readonly-value\">\n <mat-icon color=\"warn\" *ngIf=\"extractFieldName(defaults, field.property); else showNo\">done</mat-icon>\n <ng-template #showNo>\n <mat-icon color=\"warn\">close</mat-icon>\n </ng-template>\n </span>\n </div>\n</ng-template>\n\n<ng-template #listReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <span class=\"readonly-value\" *ngIf=\"field.translate; else noTranslate\">\n {{ listShowValue(defaults, field) | translate }}\n </span>\n <ng-template #noTranslate>\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\n </ng-template>\n </div>\n</ng-template>\n\n<ng-template #sequenceReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\n </div>\n</ng-template>\n\n<ng-template #lookupReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <span class=\"readonly-value\">\n {{ extractFieldName(defaults, field.property)?.[translateService.getDefaultLang() === 'en' ? 'englishName' : 'arabicName'] }}\n </span>\n </div>\n</ng-template>\n\n<ng-template #amountReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <span class=\"readonly-value\">\n {{ extractFieldName(defaults, field.property) | currency: currency }}\n </span>\n </div>\n</ng-template>\n\n<ng-template #multiSelectReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <mat-chip-grid class=\"readonly-value chipList\">\n <mat-chip *ngFor=\"let filedProp of showMultiSelectValuesAsReadonly(field)\">\n {{ filedProp }}\n </mat-chip>\n </mat-chip-grid>\n </div>\n</ng-template>\n\n<ng-template #chipListReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHTML]=\"field.label | translate\"></label>\n <mat-chip-listbox class=\"readonly-value chipList\">\n <mat-chip-option *ngFor=\"let loc of splitReadonly(extractFieldName(defaults, field.property))\"\n [selectable]=\"true\"\n color=\"warn\"\n [removable]=\"false\">\n {{ loc }}\n </mat-chip-option>\n </mat-chip-listbox>\n </div>\n</ng-template>\n\n\n<ng-template #readonlyView>\n <div class=\"row-wrapper\">\n <div class=\"column-wrapper\">\n <ng-container *ngFor=\"let row of screenFields | keyvalue\">\n <div class=\"row-container\">\n <ng-container *ngFor=\"let field of row.value\">\n <div class=\"field-column readonly-item\" [style.flex]=\"field.fieldSize ? ('0 0 ' + field.fieldSize + '%') : '1 1 0'\">\n\n <ng-container [ngSwitch]=\"field.type\">\n\n <ng-container *ngSwitchCase=\"'attachment'\">\n <ng-container *ngIf=\"isAttachmentFieldEditable && showField(defaults, field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n </div>\n <app-attachment-uploader\n [acceptedTypes]=\"getAcceptedFileTypes(field)\"\n [ariaDescribedBy]=\"showError(field.property) ? 'error-' + field.property : null\"\n (fileSelected)=\"onAttachmentFileSelected($event, field)\"\n style=\"margin-top: 5px\">\n </app-attachment-uploader>\n <mat-error class=\"iq-error\"\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'date'\">\n <ng-container [ngTemplateOutlet]=\"dateReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'time'\">\n <ng-container [ngTemplateOutlet]=\"timeReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'phone-number'\">\n <ng-container [ngTemplateOutlet]=\"phoneNumberReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'text'\">\n <ng-container [ngTemplateOutlet]=\"textReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'textarea'\">\n <ng-container [ngTemplateOutlet]=\"textareaReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'number'\">\n <ng-container [ngTemplateOutlet]=\"numberReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'currency'\">\n <ng-container [ngTemplateOutlet]=\"currencyReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'radio-button'\">\n <ng-container [ngTemplateOutlet]=\"radioButtonReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'checkbox'\">\n <ng-container [ngTemplateOutlet]=\"checkboxReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'toggle'\">\n <ng-container [ngTemplateOutlet]=\"toggleReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'status'\">\n <ng-container [ngTemplateOutlet]=\"checkboxReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'lookup'\">\n <ng-container [ngTemplateOutlet]=\"lookupReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'amount'\">\n <ng-container [ngTemplateOutlet]=\"amountReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'multi-select'\">\n <ng-container [ngTemplateOutlet]=\"multiSelectReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'chip-list'\">\n <ng-container [ngTemplateOutlet]=\"chipListReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'sequence'\">\n <ng-container [ngTemplateOutlet]=\"sequenceReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'list'\">\n <ng-container [ngTemplateOutlet]=\"listReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'multi-state-checkbox'\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" *ngIf=\"!field.hideLabel\" [innerHtml]=\"field.label | translate\"></label>\n <span class=\"readonly-value\">{{ getMultiStateReadonlySummary(field, defaults) }}</span>\n </div>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'iban-text'\">\n <p class=\"label\">\n <span [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></span>\n <span> : </span>\n <span class=\"value\" [innerHtml]=\"extractFieldName(defaults, field.property)\"></span>\n </p>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'section-title'\">\n <div class=\"hrdivider-mid\">\n <span>{{ field.label | translate }}</span>\n </div>\n </ng-container>\n\n </ng-container>\n </div>\n </ng-container>\n </div>\n </ng-container>\n </div>\n </div>\n</ng-template>\n\n\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-label{font-weight:500;color:#9b9b9b;font-size:14px}.readonly-value{font-weight:500;color:#222;word-break:break-word;font-size:14px}.readonly-value--empty{font-style:italic;font-weight:500;color:#6b7280}.json-viewer{width:100%}.chipList{display:flex;flex-wrap:wrap;gap:4px}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}.time-picker-toggle .time-picker-toggle-button{--mdc-icon-button-state-layer-size: 40px;width:40px;height:40px;padding:0}.time-picker-toggle .mat-icon{width:20px;height:20px;font-size:20px}@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}:host ::ng-deep .mat-mdc-select-placeholder{color:#888!important}:host ::ng-deep .list-field .mat-mdc-text-field-wrapper{border-radius:8px;transition:border-color .16s ease}:host ::ng-deep .list-field .mdc-notched-outline__leading,:host ::ng-deep .list-field .mdc-notched-outline__notch,:host ::ng-deep .list-field .mdc-notched-outline__trailing{border-width:2px!important;border-color:#0d426147!important}:host ::ng-deep .list-field:hover .mdc-notched-outline__leading,:host ::ng-deep .list-field:hover .mdc-notched-outline__notch,:host ::ng-deep .list-field:hover .mdc-notched-outline__trailing,:host ::ng-deep .list-field.mat-focused .mdc-notched-outline__leading,:host ::ng-deep .list-field.mat-focused .mdc-notched-outline__notch,:host ::ng-deep .list-field.mat-focused .mdc-notched-outline__trailing{border-color:#0d42616b!important}::ng-deep .base-form-list-panel{padding:0!important;border:2px solid rgba(13,66,97,.18);border-radius:8px!important;overflow:hidden}::ng-deep .base-form-list-panel .mat-mdc-option{box-sizing:border-box;min-height:40px;margin:0;border:0;border-bottom:2px solid rgba(13,66,97,.14);border-radius:0;background-color:#fff;box-shadow:none;transition:background-color .16s ease,border-color .16s ease}::ng-deep .base-form-list-panel .mat-mdc-option:last-child{border-bottom:0}::ng-deep .base-form-list-panel .mat-mdc-option:hover,::ng-deep .base-form-list-panel .mat-mdc-option.mat-mdc-option-active,::ng-deep .base-form-list-panel .mat-mdc-option.mdc-list-item--selected{background-color:#0d42610f;border-color:#0d426138}.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}textarea[readonly].mat-mdc-form-field-input-control.mat-mdc-input-element{field-sizing:content!important;height:auto!important;min-height:unset!important;max-height:none!important;line-height:1.4!important;overflow:hidden!important;white-space:pre-wrap!important;overflow-wrap:anywhere!important;resize:none!important}::ng-deep .mdc-text-field--outlined:has(textarea[readonly]) .mat-mdc-form-field-infix,::ng-deep .mat-mdc-form-field:has(textarea[readonly]) .mat-mdc-form-field-infix{height:auto!important;min-height:unset!important}\n"] }]
3058
3058
  }], ctorParameters: () => [{ type: i2.TranslateService }, { type: i3$3.ActivatedRoute }, { type: BackendService }, { type: i3.FormBuilder }, { type: i2$1.LiveAnnouncer }], propDecorators: { pageInfo: [{
3059
3059
  type: Input
3060
3060
  }], currency: [{
@@ -3151,6 +3151,7 @@ class FilterBuilderComponent {
3151
3151
  this.translate = inject(TranslateService);
3152
3152
  this.pendingFilters = [];
3153
3153
  this.showExportButton = false;
3154
+ this.exportDisabled = false;
3154
3155
  this.filters = [];
3155
3156
  this.dateRangeInvalid = false;
3156
3157
  this.filterResetNonce = 0;
@@ -3419,7 +3420,7 @@ class FilterBuilderComponent {
3419
3420
  return options.length === 0 || !options.every((code) => selected.includes(code));
3420
3421
  }
3421
3422
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FilterBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
3422
- 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\">\n\n <!-- Desktop View -->\n <div class=\"filterForm desktop-view\">\n <div class=\"filterForm__row\">\n <div class=\"filterForm__col\">\n <app-field-filter\n [editable]=\"isEditable()\"\n [filter]=\"filter\"\n [pageInfo]=\"pageInfo\"\n *ngIf=\"isEditable()\"\n [filterFields]=\"filterFields\"\n [filterResetNonce]=\"filterResetNonce\"\n (filterFieldInformation)=\"formChanges($event)\"\n class=\"filterForm__filed-filter\"\n >\n </app-field-filter>\n </div>\n <div class=\"button-group\">\n <button\n mat-flat-button\n class=\"btn-apply-filter\"\n type=\"button\"\n (click)=\"onClearFilters()\">\n <div class=\"button-text\">\n <mat-icon>clear_all</mat-icon>\n <span>{{ 'FILTER-BUILDER.clearFilters' | translate }}</span>\n </div>\n </button>\n <button\n mat-flat-button\n class=\"btn-apply-filter\"\n type=\"button\"\n [disabled]=\"dateRangeInvalid\"\n (click)=\"onApplyFilter()\">\n <div class=\"button-text\">\n <mat-icon>filter_list</mat-icon>\n <span>{{ 'FILTER-BUILDER.applyFilter' | translate }}</span>\n </div>\n </button>\n </div>\n </div>\n </div>\n\n <!-- Mobile View -->\n <div class=\"mobile-view\">\n <!-- Mobile Row 1: Search Field and Export Button -->\n <div class=\"mobile-search-row\">\n <div class=\"mobile-search-field\">\n <app-field-filter\n [editable]=\"isEditable()\"\n [filter]=\"filter\"\n [pageInfo]=\"pageInfo\"\n *ngIf=\"isEditable()\"\n [filterFields]=\"filterFields\"\n [filterResetNonce]=\"filterResetNonce\"\n (filterFieldInformation)=\"formChanges($event)\"\n class=\"mobile-field-filter\"\n >\n </app-field-filter>\n </div>\n <button\n *ngIf=\"showExportButton\"\n mat-flat-button\n class=\"btn-export-mobile\"\n [matMenuTriggerFor]=\"exportMenu\">\n <div class=\"button-content\">\n <mat-icon>file_export</mat-icon>\n <mat-icon class=\"arrow-icon\">keyboard_arrow_down</mat-icon>\n </div>\n </button>\n <mat-menu #exportMenu=\"matMenu\">\n <button mat-menu-item (click)=\"onExportClick('pdf')\">PDF</button>\n <button mat-menu-item (click)=\"onExportClick('xlsx')\">Excel</button>\n <button mat-menu-item (click)=\"onExportClick('csv')\">CSV</button>\n </mat-menu>\n </div>\n\n <!-- Mobile Row 2: Filter By and Sort By Buttons -->\n <div class=\"mobile-filter-row\">\n <button\n mat-flat-button\n class=\"btn-filter-by btn-filter-by--icon-only\"\n type=\"button\"\n (click)=\"onClearFilters()\"\n [attr.aria-label]=\"'FILTER-BUILDER.clearFilters' | translate\">\n <div class=\"button-content\">\n <mat-icon>delete_sweep</mat-icon>\n </div>\n </button>\n <button\n mat-flat-button\n class=\"btn-filter-by\"\n type=\"button\"\n [disabled]=\"dateRangeInvalid\"\n (click)=\"onApplyFilter()\">\n <div class=\"button-content\">\n <mat-icon>filter_list</mat-icon>\n <span>{{ 'FILTER-BUILDER.applyFilter' | translate }}</span>\n </div>\n </button>\n <button\n mat-flat-button\n class=\"btn-sort-by\"\n type=\"button\"\n [matMenuTriggerFor]=\"sortMenu\">\n <div class=\"button-content\">\n <mat-icon>unfold_more</mat-icon>\n <span>{{ 'FILTER-BUILDER.sortBy' | translate }}</span>\n <mat-icon class=\"arrow-icon\">keyboard_arrow_down</mat-icon>\n </div>\n </button>\n <mat-menu #sortMenu=\"matMenu\">\n <button\n *ngFor=\"let column of getSortableColumns()\"\n mat-menu-item\n (click)=\"onSortByClick(column.property)\">\n {{ labelKey(column) | translate }}\n </button>\n <button\n *ngIf=\"getSortableColumns().length === 0\"\n mat-menu-item\n disabled>\n {{ 'FILTER-BUILDER.noSortableColumns' | translate }}\n </button>\n </mat-menu>\n </div>\n </div>\n\n<!-- <div *ngIf=\"checkIsEmpty()\" class=\"line-top\">-->\n<!-- <mat-divider></mat-divider>-->\n<!-- </div>-->\n\n<!-- <div class=\"line-bottom\">-->\n<!-- <mat-divider></mat-divider>-->\n<!-- </div>-->\n\n<!-- <div class=\"action\">-->\n<!-- <button class=\"btn-none-background-primary action__clear\" mat-button (click)=\"deleteAll()\">-->\n<!-- {{'FILTER-BUILDER.clearAllFilters' | translate}}-->\n<!-- </button>-->\n<!-- <button class=\"btn-background-primary\" mat-button (click)=\"doSearch()\">-->\n<!-- {{'FILTER-BUILDER.search' | translate}}-->\n<!-- </button>-->\n<!-- </div>-->\n</div>\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:0!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:not(:disabled){background:#fafafa!important}.main-filter-builder .btn-apply-filter:disabled{opacity:.45;cursor:not-allowed}.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:not(:disabled),.main-filter-builder .btn-sort-by:hover:not(:disabled){background:#fafafa!important}.main-filter-builder .btn-filter-by:disabled,.main-filter-builder .btn-sort-by:disabled{opacity:.45;cursor:not-allowed}.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:wrap!important;gap:8px!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:flex!important;flex:1 1 100%!important;width:100%!important;min-width:0!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}@container base-table (min-width: 769px) and (max-width: 900px){.main-filter-builder{margin-bottom:0}.main-filter-builder .filterForm__row{align-items:flex-end}.main-filter-builder .filterForm__col{flex:1 1 auto;min-width:0;width:auto}.main-filter-builder .filterForm__filed-filter ::ng-deep .main-form-canvas,.main-filter-builder .filterForm__filed-filter ::ng-deep .form-wrapper,.main-filter-builder .filterForm__filed-filter ::ng-deep .form-content,.main-filter-builder .filterForm__filed-filter ::ng-deep .form-row,.main-filter-builder .filterForm__filed-filter ::ng-deep .form-column,.main-filter-builder .filterForm__filed-filter ::ng-deep .row-container{width:100%!important;flex-direction:row!important;flex-wrap:wrap!important}.main-filter-builder .filterForm__filed-filter ::ng-deep .row-container{display:flex!important;gap:12px!important}.main-filter-builder .filterForm__filed-filter ::ng-deep .field-column{flex:1 1 calc(50% - 12px)!important;width:calc(50% - 12px)!important;max-width:calc(50% - 12px)!important;min-width:180px!important}.main-filter-builder .filterForm__filed-filter ::ng-deep .multi-state-filter,.main-filter-builder .filterForm__filed-filter ::ng-deep .multi-state-filter__trigger,.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field{width:100%!important}.main-filter-builder .button-group{flex-direction:column-reverse!important;justify-content:flex-start!important;gap:12px!important}.main-filter-builder .btn-apply-filter{height:45px!important;margin-bottom:0!important}}@media (max-width: 768px){.main-filter-builder .desktop-view{display:none!important}.main-filter-builder .mobile-view{display:flex!important}}@media (min-width: 769px){.main-filter-builder .desktop-view{display:flex!important}.main-filter-builder .mobile-view{display:none!important}}:host-context([dir=ltr]) .main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-mdc-form-field-infix{padding-right:0!important}:host-context([dir=rtl]) .main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-mdc-form-field-infix{padding-left: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: "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"] }] }); }
3423
+ 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", exportDisabled: "exportDisabled" }, outputs: { filterInformation: "filterInformation", isEmpty: "isEmpty", applyFilter: "applyFilter", sortByClicked: "sortByClicked", exportClicked: "exportClicked" }, host: { listeners: { "keydown": "onKeyDown($event)" } }, ngImport: i0, template: "<div class=\"main-filter-builder\">\n\n <!-- Desktop View -->\n <div class=\"filterForm desktop-view\">\n <div class=\"filterForm__row\">\n <div class=\"filterForm__col\">\n <app-field-filter\n [editable]=\"isEditable()\"\n [filter]=\"filter\"\n [pageInfo]=\"pageInfo\"\n *ngIf=\"isEditable()\"\n [filterFields]=\"filterFields\"\n [filterResetNonce]=\"filterResetNonce\"\n (filterFieldInformation)=\"formChanges($event)\"\n class=\"filterForm__filed-filter\"\n >\n </app-field-filter>\n </div>\n <div class=\"button-group\">\n <button\n mat-flat-button\n class=\"btn-apply-filter\"\n type=\"button\"\n (click)=\"onClearFilters()\">\n <div class=\"button-text\">\n <mat-icon>clear_all</mat-icon>\n <span>{{ 'FILTER-BUILDER.clearFilters' | translate }}</span>\n </div>\n </button>\n <button\n mat-flat-button\n class=\"btn-apply-filter\"\n type=\"button\"\n [disabled]=\"dateRangeInvalid\"\n (click)=\"onApplyFilter()\">\n <div class=\"button-text\">\n <mat-icon>filter_list</mat-icon>\n <span>{{ 'FILTER-BUILDER.applyFilter' | translate }}</span>\n </div>\n </button>\n </div>\n </div>\n </div>\n\n <!-- Mobile View -->\n <div class=\"mobile-view\">\n <!-- Mobile Row 1: Search Field and Export Button -->\n <div class=\"mobile-search-row\">\n <div class=\"mobile-search-field\">\n <app-field-filter\n [editable]=\"isEditable()\"\n [filter]=\"filter\"\n [pageInfo]=\"pageInfo\"\n *ngIf=\"isEditable()\"\n [filterFields]=\"filterFields\"\n [filterResetNonce]=\"filterResetNonce\"\n (filterFieldInformation)=\"formChanges($event)\"\n class=\"mobile-field-filter\"\n >\n </app-field-filter>\n </div>\n <button\n *ngIf=\"showExportButton\"\n mat-flat-button\n class=\"btn-export-mobile\"\n [disabled]=\"exportDisabled\"\n [matMenuTriggerFor]=\"exportMenu\">\n <div class=\"button-content\">\n <mat-icon>file_export</mat-icon>\n <mat-icon class=\"arrow-icon\">keyboard_arrow_down</mat-icon>\n </div>\n </button>\n <mat-menu #exportMenu=\"matMenu\">\n <button mat-menu-item (click)=\"onExportClick('pdf')\">PDF</button>\n <button mat-menu-item (click)=\"onExportClick('xlsx')\">Excel</button>\n <button mat-menu-item (click)=\"onExportClick('csv')\">CSV</button>\n </mat-menu>\n </div>\n\n <!-- Mobile Row 2: Filter By and Sort By Buttons -->\n <div class=\"mobile-filter-row\">\n <button\n mat-flat-button\n class=\"btn-filter-by btn-filter-by--icon-only\"\n type=\"button\"\n (click)=\"onClearFilters()\"\n [attr.aria-label]=\"'FILTER-BUILDER.clearFilters' | translate\">\n <div class=\"button-content\">\n <mat-icon>delete_sweep</mat-icon>\n </div>\n </button>\n <button\n mat-flat-button\n class=\"btn-filter-by\"\n type=\"button\"\n [disabled]=\"dateRangeInvalid\"\n (click)=\"onApplyFilter()\">\n <div class=\"button-content\">\n <mat-icon>filter_list</mat-icon>\n <span>{{ 'FILTER-BUILDER.applyFilter' | translate }}</span>\n </div>\n </button>\n <button\n mat-flat-button\n class=\"btn-sort-by\"\n type=\"button\"\n [matMenuTriggerFor]=\"sortMenu\">\n <div class=\"button-content\">\n <mat-icon>unfold_more</mat-icon>\n <span>{{ 'FILTER-BUILDER.sortBy' | translate }}</span>\n <mat-icon class=\"arrow-icon\">keyboard_arrow_down</mat-icon>\n </div>\n </button>\n <mat-menu #sortMenu=\"matMenu\">\n <button\n *ngFor=\"let column of getSortableColumns()\"\n mat-menu-item\n (click)=\"onSortByClick(column.property)\">\n {{ labelKey(column) | translate }}\n </button>\n <button\n *ngIf=\"getSortableColumns().length === 0\"\n mat-menu-item\n disabled>\n {{ 'FILTER-BUILDER.noSortableColumns' | translate }}\n </button>\n </mat-menu>\n </div>\n </div>\n\n<!-- <div *ngIf=\"checkIsEmpty()\" class=\"line-top\">-->\n<!-- <mat-divider></mat-divider>-->\n<!-- </div>-->\n\n<!-- <div class=\"line-bottom\">-->\n<!-- <mat-divider></mat-divider>-->\n<!-- </div>-->\n\n<!-- <div class=\"action\">-->\n<!-- <button class=\"btn-none-background-primary action__clear\" mat-button (click)=\"deleteAll()\">-->\n<!-- {{'FILTER-BUILDER.clearAllFilters' | translate}}-->\n<!-- </button>-->\n<!-- <button class=\"btn-background-primary\" mat-button (click)=\"doSearch()\">-->\n<!-- {{'FILTER-BUILDER.search' | translate}}-->\n<!-- </button>-->\n<!-- </div>-->\n</div>\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:0!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:not(:disabled){background:#fafafa!important}.main-filter-builder .btn-apply-filter:disabled{opacity:.45;cursor:not-allowed}.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:not(:disabled),.main-filter-builder .btn-sort-by:hover:not(:disabled){background:#fafafa!important}.main-filter-builder .btn-filter-by:disabled,.main-filter-builder .btn-sort-by:disabled{opacity:.45;cursor:not-allowed}.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:not(:disabled){background:#fafafa!important}.main-filter-builder .btn-export-mobile:disabled,.main-filter-builder .btn-export-mobile.mat-mdc-button-disabled{opacity:.45;cursor:not-allowed;pointer-events:none}.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:wrap!important;gap:8px!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:flex!important;flex:1 1 100%!important;width:100%!important;min-width:0!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}@container base-table (min-width: 769px) and (max-width: 900px){.main-filter-builder{margin-bottom:0}.main-filter-builder .filterForm__row{align-items:flex-end}.main-filter-builder .filterForm__col{flex:1 1 auto;min-width:0;width:auto}.main-filter-builder .filterForm__filed-filter ::ng-deep .main-form-canvas,.main-filter-builder .filterForm__filed-filter ::ng-deep .form-wrapper,.main-filter-builder .filterForm__filed-filter ::ng-deep .form-content,.main-filter-builder .filterForm__filed-filter ::ng-deep .form-row,.main-filter-builder .filterForm__filed-filter ::ng-deep .form-column,.main-filter-builder .filterForm__filed-filter ::ng-deep .row-container{width:100%!important;flex-direction:row!important;flex-wrap:wrap!important}.main-filter-builder .filterForm__filed-filter ::ng-deep .row-container{display:flex!important;gap:12px!important}.main-filter-builder .filterForm__filed-filter ::ng-deep .field-column{flex:1 1 calc(50% - 12px)!important;width:calc(50% - 12px)!important;max-width:calc(50% - 12px)!important;min-width:180px!important}.main-filter-builder .filterForm__filed-filter ::ng-deep .multi-state-filter,.main-filter-builder .filterForm__filed-filter ::ng-deep .multi-state-filter__trigger,.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field{width:100%!important}.main-filter-builder .button-group{flex-direction:column-reverse!important;justify-content:flex-start!important;gap:12px!important}.main-filter-builder .btn-apply-filter{height:45px!important;margin-bottom:0!important}}@media (max-width: 768px){.main-filter-builder .desktop-view{display:none!important}.main-filter-builder .mobile-view{display:flex!important}}@media (min-width: 769px){.main-filter-builder .desktop-view{display:flex!important}.main-filter-builder .mobile-view{display:none!important}}:host-context([dir=ltr]) .main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-mdc-form-field-infix{padding-right:0!important}:host-context([dir=rtl]) .main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-mdc-form-field-infix{padding-left: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: "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"] }] }); }
3423
3424
  }
3424
3425
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FilterBuilderComponent, decorators: [{
3425
3426
  type: Component,
@@ -3433,7 +3434,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
3433
3434
  MatMenuItem,
3434
3435
  MatMenuTrigger,
3435
3436
  NgForOf
3436
- ], template: "<div class=\"main-filter-builder\">\n\n <!-- Desktop View -->\n <div class=\"filterForm desktop-view\">\n <div class=\"filterForm__row\">\n <div class=\"filterForm__col\">\n <app-field-filter\n [editable]=\"isEditable()\"\n [filter]=\"filter\"\n [pageInfo]=\"pageInfo\"\n *ngIf=\"isEditable()\"\n [filterFields]=\"filterFields\"\n [filterResetNonce]=\"filterResetNonce\"\n (filterFieldInformation)=\"formChanges($event)\"\n class=\"filterForm__filed-filter\"\n >\n </app-field-filter>\n </div>\n <div class=\"button-group\">\n <button\n mat-flat-button\n class=\"btn-apply-filter\"\n type=\"button\"\n (click)=\"onClearFilters()\">\n <div class=\"button-text\">\n <mat-icon>clear_all</mat-icon>\n <span>{{ 'FILTER-BUILDER.clearFilters' | translate }}</span>\n </div>\n </button>\n <button\n mat-flat-button\n class=\"btn-apply-filter\"\n type=\"button\"\n [disabled]=\"dateRangeInvalid\"\n (click)=\"onApplyFilter()\">\n <div class=\"button-text\">\n <mat-icon>filter_list</mat-icon>\n <span>{{ 'FILTER-BUILDER.applyFilter' | translate }}</span>\n </div>\n </button>\n </div>\n </div>\n </div>\n\n <!-- Mobile View -->\n <div class=\"mobile-view\">\n <!-- Mobile Row 1: Search Field and Export Button -->\n <div class=\"mobile-search-row\">\n <div class=\"mobile-search-field\">\n <app-field-filter\n [editable]=\"isEditable()\"\n [filter]=\"filter\"\n [pageInfo]=\"pageInfo\"\n *ngIf=\"isEditable()\"\n [filterFields]=\"filterFields\"\n [filterResetNonce]=\"filterResetNonce\"\n (filterFieldInformation)=\"formChanges($event)\"\n class=\"mobile-field-filter\"\n >\n </app-field-filter>\n </div>\n <button\n *ngIf=\"showExportButton\"\n mat-flat-button\n class=\"btn-export-mobile\"\n [matMenuTriggerFor]=\"exportMenu\">\n <div class=\"button-content\">\n <mat-icon>file_export</mat-icon>\n <mat-icon class=\"arrow-icon\">keyboard_arrow_down</mat-icon>\n </div>\n </button>\n <mat-menu #exportMenu=\"matMenu\">\n <button mat-menu-item (click)=\"onExportClick('pdf')\">PDF</button>\n <button mat-menu-item (click)=\"onExportClick('xlsx')\">Excel</button>\n <button mat-menu-item (click)=\"onExportClick('csv')\">CSV</button>\n </mat-menu>\n </div>\n\n <!-- Mobile Row 2: Filter By and Sort By Buttons -->\n <div class=\"mobile-filter-row\">\n <button\n mat-flat-button\n class=\"btn-filter-by btn-filter-by--icon-only\"\n type=\"button\"\n (click)=\"onClearFilters()\"\n [attr.aria-label]=\"'FILTER-BUILDER.clearFilters' | translate\">\n <div class=\"button-content\">\n <mat-icon>delete_sweep</mat-icon>\n </div>\n </button>\n <button\n mat-flat-button\n class=\"btn-filter-by\"\n type=\"button\"\n [disabled]=\"dateRangeInvalid\"\n (click)=\"onApplyFilter()\">\n <div class=\"button-content\">\n <mat-icon>filter_list</mat-icon>\n <span>{{ 'FILTER-BUILDER.applyFilter' | translate }}</span>\n </div>\n </button>\n <button\n mat-flat-button\n class=\"btn-sort-by\"\n type=\"button\"\n [matMenuTriggerFor]=\"sortMenu\">\n <div class=\"button-content\">\n <mat-icon>unfold_more</mat-icon>\n <span>{{ 'FILTER-BUILDER.sortBy' | translate }}</span>\n <mat-icon class=\"arrow-icon\">keyboard_arrow_down</mat-icon>\n </div>\n </button>\n <mat-menu #sortMenu=\"matMenu\">\n <button\n *ngFor=\"let column of getSortableColumns()\"\n mat-menu-item\n (click)=\"onSortByClick(column.property)\">\n {{ labelKey(column) | translate }}\n </button>\n <button\n *ngIf=\"getSortableColumns().length === 0\"\n mat-menu-item\n disabled>\n {{ 'FILTER-BUILDER.noSortableColumns' | translate }}\n </button>\n </mat-menu>\n </div>\n </div>\n\n<!-- <div *ngIf=\"checkIsEmpty()\" class=\"line-top\">-->\n<!-- <mat-divider></mat-divider>-->\n<!-- </div>-->\n\n<!-- <div class=\"line-bottom\">-->\n<!-- <mat-divider></mat-divider>-->\n<!-- </div>-->\n\n<!-- <div class=\"action\">-->\n<!-- <button class=\"btn-none-background-primary action__clear\" mat-button (click)=\"deleteAll()\">-->\n<!-- {{'FILTER-BUILDER.clearAllFilters' | translate}}-->\n<!-- </button>-->\n<!-- <button class=\"btn-background-primary\" mat-button (click)=\"doSearch()\">-->\n<!-- {{'FILTER-BUILDER.search' | translate}}-->\n<!-- </button>-->\n<!-- </div>-->\n</div>\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:0!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:not(:disabled){background:#fafafa!important}.main-filter-builder .btn-apply-filter:disabled{opacity:.45;cursor:not-allowed}.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:not(:disabled),.main-filter-builder .btn-sort-by:hover:not(:disabled){background:#fafafa!important}.main-filter-builder .btn-filter-by:disabled,.main-filter-builder .btn-sort-by:disabled{opacity:.45;cursor:not-allowed}.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:wrap!important;gap:8px!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:flex!important;flex:1 1 100%!important;width:100%!important;min-width:0!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}@container base-table (min-width: 769px) and (max-width: 900px){.main-filter-builder{margin-bottom:0}.main-filter-builder .filterForm__row{align-items:flex-end}.main-filter-builder .filterForm__col{flex:1 1 auto;min-width:0;width:auto}.main-filter-builder .filterForm__filed-filter ::ng-deep .main-form-canvas,.main-filter-builder .filterForm__filed-filter ::ng-deep .form-wrapper,.main-filter-builder .filterForm__filed-filter ::ng-deep .form-content,.main-filter-builder .filterForm__filed-filter ::ng-deep .form-row,.main-filter-builder .filterForm__filed-filter ::ng-deep .form-column,.main-filter-builder .filterForm__filed-filter ::ng-deep .row-container{width:100%!important;flex-direction:row!important;flex-wrap:wrap!important}.main-filter-builder .filterForm__filed-filter ::ng-deep .row-container{display:flex!important;gap:12px!important}.main-filter-builder .filterForm__filed-filter ::ng-deep .field-column{flex:1 1 calc(50% - 12px)!important;width:calc(50% - 12px)!important;max-width:calc(50% - 12px)!important;min-width:180px!important}.main-filter-builder .filterForm__filed-filter ::ng-deep .multi-state-filter,.main-filter-builder .filterForm__filed-filter ::ng-deep .multi-state-filter__trigger,.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field{width:100%!important}.main-filter-builder .button-group{flex-direction:column-reverse!important;justify-content:flex-start!important;gap:12px!important}.main-filter-builder .btn-apply-filter{height:45px!important;margin-bottom:0!important}}@media (max-width: 768px){.main-filter-builder .desktop-view{display:none!important}.main-filter-builder .mobile-view{display:flex!important}}@media (min-width: 769px){.main-filter-builder .desktop-view{display:flex!important}.main-filter-builder .mobile-view{display:none!important}}:host-context([dir=ltr]) .main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-mdc-form-field-infix{padding-right:0!important}:host-context([dir=rtl]) .main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-mdc-form-field-infix{padding-left:0!important}\n"] }]
3437
+ ], template: "<div class=\"main-filter-builder\">\n\n <!-- Desktop View -->\n <div class=\"filterForm desktop-view\">\n <div class=\"filterForm__row\">\n <div class=\"filterForm__col\">\n <app-field-filter\n [editable]=\"isEditable()\"\n [filter]=\"filter\"\n [pageInfo]=\"pageInfo\"\n *ngIf=\"isEditable()\"\n [filterFields]=\"filterFields\"\n [filterResetNonce]=\"filterResetNonce\"\n (filterFieldInformation)=\"formChanges($event)\"\n class=\"filterForm__filed-filter\"\n >\n </app-field-filter>\n </div>\n <div class=\"button-group\">\n <button\n mat-flat-button\n class=\"btn-apply-filter\"\n type=\"button\"\n (click)=\"onClearFilters()\">\n <div class=\"button-text\">\n <mat-icon>clear_all</mat-icon>\n <span>{{ 'FILTER-BUILDER.clearFilters' | translate }}</span>\n </div>\n </button>\n <button\n mat-flat-button\n class=\"btn-apply-filter\"\n type=\"button\"\n [disabled]=\"dateRangeInvalid\"\n (click)=\"onApplyFilter()\">\n <div class=\"button-text\">\n <mat-icon>filter_list</mat-icon>\n <span>{{ 'FILTER-BUILDER.applyFilter' | translate }}</span>\n </div>\n </button>\n </div>\n </div>\n </div>\n\n <!-- Mobile View -->\n <div class=\"mobile-view\">\n <!-- Mobile Row 1: Search Field and Export Button -->\n <div class=\"mobile-search-row\">\n <div class=\"mobile-search-field\">\n <app-field-filter\n [editable]=\"isEditable()\"\n [filter]=\"filter\"\n [pageInfo]=\"pageInfo\"\n *ngIf=\"isEditable()\"\n [filterFields]=\"filterFields\"\n [filterResetNonce]=\"filterResetNonce\"\n (filterFieldInformation)=\"formChanges($event)\"\n class=\"mobile-field-filter\"\n >\n </app-field-filter>\n </div>\n <button\n *ngIf=\"showExportButton\"\n mat-flat-button\n class=\"btn-export-mobile\"\n [disabled]=\"exportDisabled\"\n [matMenuTriggerFor]=\"exportMenu\">\n <div class=\"button-content\">\n <mat-icon>file_export</mat-icon>\n <mat-icon class=\"arrow-icon\">keyboard_arrow_down</mat-icon>\n </div>\n </button>\n <mat-menu #exportMenu=\"matMenu\">\n <button mat-menu-item (click)=\"onExportClick('pdf')\">PDF</button>\n <button mat-menu-item (click)=\"onExportClick('xlsx')\">Excel</button>\n <button mat-menu-item (click)=\"onExportClick('csv')\">CSV</button>\n </mat-menu>\n </div>\n\n <!-- Mobile Row 2: Filter By and Sort By Buttons -->\n <div class=\"mobile-filter-row\">\n <button\n mat-flat-button\n class=\"btn-filter-by btn-filter-by--icon-only\"\n type=\"button\"\n (click)=\"onClearFilters()\"\n [attr.aria-label]=\"'FILTER-BUILDER.clearFilters' | translate\">\n <div class=\"button-content\">\n <mat-icon>delete_sweep</mat-icon>\n </div>\n </button>\n <button\n mat-flat-button\n class=\"btn-filter-by\"\n type=\"button\"\n [disabled]=\"dateRangeInvalid\"\n (click)=\"onApplyFilter()\">\n <div class=\"button-content\">\n <mat-icon>filter_list</mat-icon>\n <span>{{ 'FILTER-BUILDER.applyFilter' | translate }}</span>\n </div>\n </button>\n <button\n mat-flat-button\n class=\"btn-sort-by\"\n type=\"button\"\n [matMenuTriggerFor]=\"sortMenu\">\n <div class=\"button-content\">\n <mat-icon>unfold_more</mat-icon>\n <span>{{ 'FILTER-BUILDER.sortBy' | translate }}</span>\n <mat-icon class=\"arrow-icon\">keyboard_arrow_down</mat-icon>\n </div>\n </button>\n <mat-menu #sortMenu=\"matMenu\">\n <button\n *ngFor=\"let column of getSortableColumns()\"\n mat-menu-item\n (click)=\"onSortByClick(column.property)\">\n {{ labelKey(column) | translate }}\n </button>\n <button\n *ngIf=\"getSortableColumns().length === 0\"\n mat-menu-item\n disabled>\n {{ 'FILTER-BUILDER.noSortableColumns' | translate }}\n </button>\n </mat-menu>\n </div>\n </div>\n\n<!-- <div *ngIf=\"checkIsEmpty()\" class=\"line-top\">-->\n<!-- <mat-divider></mat-divider>-->\n<!-- </div>-->\n\n<!-- <div class=\"line-bottom\">-->\n<!-- <mat-divider></mat-divider>-->\n<!-- </div>-->\n\n<!-- <div class=\"action\">-->\n<!-- <button class=\"btn-none-background-primary action__clear\" mat-button (click)=\"deleteAll()\">-->\n<!-- {{'FILTER-BUILDER.clearAllFilters' | translate}}-->\n<!-- </button>-->\n<!-- <button class=\"btn-background-primary\" mat-button (click)=\"doSearch()\">-->\n<!-- {{'FILTER-BUILDER.search' | translate}}-->\n<!-- </button>-->\n<!-- </div>-->\n</div>\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:0!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:not(:disabled){background:#fafafa!important}.main-filter-builder .btn-apply-filter:disabled{opacity:.45;cursor:not-allowed}.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:not(:disabled),.main-filter-builder .btn-sort-by:hover:not(:disabled){background:#fafafa!important}.main-filter-builder .btn-filter-by:disabled,.main-filter-builder .btn-sort-by:disabled{opacity:.45;cursor:not-allowed}.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:not(:disabled){background:#fafafa!important}.main-filter-builder .btn-export-mobile:disabled,.main-filter-builder .btn-export-mobile.mat-mdc-button-disabled{opacity:.45;cursor:not-allowed;pointer-events:none}.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:wrap!important;gap:8px!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:flex!important;flex:1 1 100%!important;width:100%!important;min-width:0!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}@container base-table (min-width: 769px) and (max-width: 900px){.main-filter-builder{margin-bottom:0}.main-filter-builder .filterForm__row{align-items:flex-end}.main-filter-builder .filterForm__col{flex:1 1 auto;min-width:0;width:auto}.main-filter-builder .filterForm__filed-filter ::ng-deep .main-form-canvas,.main-filter-builder .filterForm__filed-filter ::ng-deep .form-wrapper,.main-filter-builder .filterForm__filed-filter ::ng-deep .form-content,.main-filter-builder .filterForm__filed-filter ::ng-deep .form-row,.main-filter-builder .filterForm__filed-filter ::ng-deep .form-column,.main-filter-builder .filterForm__filed-filter ::ng-deep .row-container{width:100%!important;flex-direction:row!important;flex-wrap:wrap!important}.main-filter-builder .filterForm__filed-filter ::ng-deep .row-container{display:flex!important;gap:12px!important}.main-filter-builder .filterForm__filed-filter ::ng-deep .field-column{flex:1 1 calc(50% - 12px)!important;width:calc(50% - 12px)!important;max-width:calc(50% - 12px)!important;min-width:180px!important}.main-filter-builder .filterForm__filed-filter ::ng-deep .multi-state-filter,.main-filter-builder .filterForm__filed-filter ::ng-deep .multi-state-filter__trigger,.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field{width:100%!important}.main-filter-builder .button-group{flex-direction:column-reverse!important;justify-content:flex-start!important;gap:12px!important}.main-filter-builder .btn-apply-filter{height:45px!important;margin-bottom:0!important}}@media (max-width: 768px){.main-filter-builder .desktop-view{display:none!important}.main-filter-builder .mobile-view{display:flex!important}}@media (min-width: 769px){.main-filter-builder .desktop-view{display:flex!important}.main-filter-builder .mobile-view{display:none!important}}:host-context([dir=ltr]) .main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-mdc-form-field-infix{padding-right:0!important}:host-context([dir=rtl]) .main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-mdc-form-field-infix{padding-left:0!important}\n"] }]
3437
3438
  }], ctorParameters: () => [], propDecorators: { columns: [{
3438
3439
  type: Input
3439
3440
  }], isChecked: [{
@@ -3446,6 +3447,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
3446
3447
  type: Input
3447
3448
  }], showExportButton: [{
3448
3449
  type: Input
3450
+ }], exportDisabled: [{
3451
+ type: Input
3449
3452
  }], filterInformation: [{
3450
3453
  type: Output
3451
3454
  }], isEmpty: [{
@@ -4039,7 +4042,7 @@ class BaseTableComponent extends BaseUtils {
4039
4042
  return super.labelKeyByValue(column, row);
4040
4043
  }
4041
4044
  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 }); }
4042
- 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", pendingViewModeChanged: "pendingViewModeChanged", showDialog: "showDialog", clickRoutePage: "clickRoutePage" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"flex-column baseTable\">\n <div class=\"flex-row flex-100\" >\n <div class=\"flex-column align-start flex-100\" style=\"width: 100%;\">\n <app-title-bar\n [pageTitle]=\"pageInfo.hideTitle ? '' : pageInfo.labelsSection+'.list_title'\"\n [subTitle]=\"(pageInfo.hideTitle || pageInfo.hideSubtitle) ? '' : pageInfo.labelsSection+'.subtitle'\"\n [titleMode]=\"''\"\n [pageInfo]=\"pageInfo\"\n [newAction]=\"showAddNew()\"\n [showExtractButton]=\"!pageInfo.hideExtractButton\"\n [draftSupported]=\"pageInfo.draftSupported\"\n [isPending]=\"isPending\"\n [onViewModeChange]=\"switchViewMode.bind(this)\"\n [buttons]=\"extraActions\"\n [buttonsDisplayMode]=\"buttonsDisplayMode\"\n (newActionClicked)=\"onAddNewAction($event)\"\n (extractReport)=\"extractReport($event)\"\n (viewModeChanged)=\"onViewModeChangedReceived($event)\"\n (buttonClicked)=\"buttonClicked.emit($event)\"\n [totalElements]=\"pageInfo.hideTitle ? undefined : totalElements\">\n </app-title-bar>\n </div>\n </div>\n\n <div class=\"filter-row\" *ngIf=\"!pageInfo.hideAdvancedFilter\">\n <app-filter-builder\n *ngIf=\"!pageInfo.hideAdvancedFilter\"\n [pageInfo]=\"pageInfo\"\n [columns]=\"columns\"\n [filterFields]=\"filterFields\"\n [pendingFilters]=\"pendingFilters\"\n [showExportButton]=\"!pageInfo.hideExtractButton\"\n (filterInformation)=\"storePendingFilters($event)\"\n (isEmpty)=\"handleFilterEmpty($event)\"\n (applyFilter)=\"applyPendingFilters()\"\n (sortByClicked)=\"handleSortClick($event)\"\n (exportClicked)=\"extractReport($event)\">\n </app-filter-builder>\n\n <div class=\"button-group\" *ngIf=\"!pageInfo.hideExtractButton\">\n <button *ngIf=\"!pageInfo.hideExtractButton\"\n mat-flat-button\n type=\"button\"\n [matMenuTriggerFor]=\"exportMenu\"\n class=\"btn-export\"\n [attr.aria-label]=\"'export' | translate\"\n [attr.aria-haspopup]=\"true\"\n >\n <div class=\"button-text\">\n <mat-icon>file_export</mat-icon>\n <span>{{ 'export' | translate }}</span>\n <mat-icon class=\"arrow-icon\">keyboard_arrow_down</mat-icon>\n </div>\n </button>\n\n <mat-menu #exportMenu=\"matMenu\">\n <button mat-menu-item (click)=\"extractReport('pdf')\">PDF</button>\n <button mat-menu-item (click)=\"extractReport('xlsx')\">Excel</button>\n <button mat-menu-item (click)=\"extractReport('csv')\">CSV</button>\n </mat-menu>\n\n </div>\n </div>\n\n\n <div class=\"flex-row flex-100 baseTable__detailsColumn\">\n <div class=\"flex-100\">\n <div class=\"flex-row flex-100 mainTable\">\n <div\n class=\"table-container\"\n role=\"table\"\n [attr.aria-label]=\"\n pageInfo.labelsSection && !pageInfo.hideTitle\n ? (pageInfo.labelsSection + '.list_title' | translate)\n : null\n \">\n <div class=\"table-header\" [attr.data-sort]=\"sortState\" role=\"row\">\n <div *ngFor=\"let columnProp of visibleColumnsArray; let i = index\"\n class=\"table-header-cell\"\n role=\"columnheader\"\n [attr.aria-sort]=\"getColumnAriaSort(columnProp)\"\n [attr.tabindex]=\"getColumn(columnProp)?.enableSorting ? 0 : null\"\n [class.sortable]=\"getColumn(columnProp)?.enableSorting\"\n [class.first-cell]=\"i === 0\"\n [class.last-cell]=\"i === visibleColumnsArray.length - 1\"\n [class.actions-cell]=\"i === visibleColumnsArray.length - 1 && columnProp === 'actions'\"\n [class.has-width]=\"getColumn(columnProp)?.width\"\n [ngStyle]=\"getColumn(columnProp)?.width ? {'width': getColumn(columnProp)?.width + '%', 'flex-basis': getColumn(columnProp)?.width + '%'} : {}\"\n (click)=\"getColumn(columnProp)?.enableSorting && handleSortClick(columnProp)\"\n (keydown)=\"onSortHeaderKeydown($event, columnProp)\">\n <div class=\"table-header-content\">\n <span class=\"table-header-label\">{{ labelKey(getColumn(columnProp)) | translate }}</span>\n <ng-container *ngIf=\"getColumn(columnProp)?.enableSorting\">\n <mat-icon *ngIf=\"getSortDirection(columnProp) === 'asc'\"\n class=\"sort-icon sort-asc\">arrow_drop_up</mat-icon>\n <mat-icon *ngIf=\"getSortDirection(columnProp) === 'desc'\"\n class=\"sort-icon sort-desc\">arrow_drop_down</mat-icon>\n </ng-container>\n </div>\n </div>\n </div>\n\n <div class=\"table-body\" role=\"rowgroup\">\n <div *ngFor=\"let row of dataSource.data; let rowIndex = index\"\n class=\"table-row\"\n role=\"row\"\n [attr.tabindex]=\"-1\"\n [attr.id]=\"'table-row-' + (row?.id || row?.key || '')\"\n [ngClass]=\"{\n 'table-row--highlight': selectedRowIndex == row.id || (pageInfo.groupByProperty && pageInfo.groupByValue?.includes(row[pageInfo.groupByProperty])),\n 'table-row--dark-highlight': isDarkHighlight(row)\n }\"\n (auxclick)=\"openNewTab(row)\"\n (click)=\"$event.stopPropagation(); onSelectItem(row)\">\n <div *ngFor=\"let columnProp of visibleColumnsArray; let i = index\"\n class=\"table-cell\"\n role=\"cell\"\n [class.first-cell]=\"i === 0\"\n [class.last-cell]=\"i === visibleColumnsArray.length - 1\"\n [class.actions-cell]=\"i === visibleColumnsArray.length - 1 && columnProp === 'actions'\"\n [class.has-width]=\"getColumn(columnProp)?.width\"\n [ngStyle]=\"getColumn(columnProp)?.width ? {'width': getColumn(columnProp)?.width + '%', 'flex-basis': getColumn(columnProp)?.width + '%'} : {}\">\n <ng-container [ngSwitch]=\"getColumn(columnProp)?.type\">\n <ng-container *ngSwitchCase=\"'workflowStatus'\">\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>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'hyper-text'\">\n <span\n *ngIf=\"shouldRenderAsHyperLink(row); else plainHyperText\"\n class=\"mat-mdc-form-field-label hyper-link\"\n [attr.tabindex]=\"-1\"\n (click)=\"hyperLinkClicked(columnProp, row)\">\n {{ extractFieldName(row, columnProp) }}\n </span>\n <ng-template #plainHyperText>\n <span class=\"mat-mdc-form-field-label\">{{ extractFieldName(row, columnProp) }}</span>\n </ng-template>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'button'\">\n <button *ngIf=\"shouldShowButton(row)\" mat-button type=\"button\" class=\"primary\" (click)=\"$event.stopPropagation(); actionButtonClicked(columnProp, row)\" [attr.id]=\"'table-btn-action-'+columnProp\">\n {{ labelKey(getColumn(columnProp)) + '_title' | translate }}\n </button>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'icon'\">\n <mat-icon [ngClass]=\"{\n 'mainTable__td__icon-green': row[columnProp] === 'pass',\n 'mainTable__td__icon-orange': row[columnProp] === 'warning',\n 'mainTable__td__icon-red': row[columnProp] === 'error'\n }\"\n [attr.aria-label]=\"getIconAriaLabelKey(row[columnProp]) | translate\">\n {{ getIcon(row[columnProp]) }}\n </mat-icon>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'checkbox'\">\n <mat-checkbox class=\"primary\" [tabIndex]=\"-1\" [checked]=\"row[columnProp]\" (click)=\"$event.stopPropagation();actionCheckedClicked(columnProp,row)\"></mat-checkbox>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'stateType'\">\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>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'date'\">\n {{ extractFieldName(row, columnProp) | date:'dd/MM/yyyy' }}\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'croppedText'\">\n {{ getCroppedText(row[columnProp], row[getColumn(columnProp)?.width]) }}\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'download'\">\n <mat-icon class=\"mainTable__td__icon-blue\"\n [attr.aria-label]=\"'BASE_TABLE.downloadAction' | translate\">system_update_alt</mat-icon>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'onOff'\">\n <mat-icon *ngIf=\"row[columnProp] === null\" class=\"mainTable__td__icon-darkorange\"\n [attr.aria-label]=\"getOnOffFlagAriaLabelKey(null) | translate\">flag</mat-icon>\n <mat-icon *ngIf=\"row[columnProp] === false\" class=\"mainTable__td__icon-red\"\n [attr.aria-label]=\"getOnOffFlagAriaLabelKey(false) | translate\">flag</mat-icon>\n <mat-icon *ngIf=\"row[columnProp] === true\" class=\"mainTable__td__icon-green\"\n [attr.aria-label]=\"getOnOffFlagAriaLabelKey(true) | translate\">flag</mat-icon>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'status'\">\n <span *ngIf=\"row[columnProp] === null || row[columnProp] === false\">\n {{ pageInfo.labelsSection + '.' + getColumn(columnProp)?.label + 'InActive' | translate }}\n </span>\n <span *ngIf=\"row[columnProp] === true\">\n {{ pageInfo.labelsSection + '.' + getColumn(columnProp)?.label + 'Active' | translate }}\n </span>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'info'\">\n <button\n mat-icon-button\n type=\"button\"\n [attr.tabindex]=\"-1\"\n [attr.aria-label]=\"'BASE_TABLE.rowDetails' | translate\"\n (click)=\"$event.stopPropagation();emitEvent(row)\"\n [attr.id]=\"'table-btn-info-'+row.id\">\n <mat-icon aria-hidden=\"true\">info</mat-icon>\n </button>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'netAmount'\">\n <div class=\"mainTable__td__currency\" style=\"display:inline-block;\">{{ row[getColumn(columnProp)?.currency] }}</div>\n <span class=\"mainTable__td__property\" style=\"display:inline-block; margin-left:6px; margin-right:6px;\">\n {{ extractFieldName(row, columnProp) | currency:'':'' }}</span>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'localDateTime'\">\n {{ extractFieldName(row, columnProp) | date : extractFormat(getColumn(columnProp)) }}\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'bigdecimal'\">\n <small><sup class=\"mainTable__td__currency\">{{row[getColumn(columnProp)?.currency]}}</sup></small>\n {{ extractFieldName(row, columnProp) | number : (getColumn(columnProp)?.digitInfo || '1.3-5') }}\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'listAction'\">\n <app-button-actions\n [row]=\"row\"\n [buttonsAction]=\"getColumn(columnProp)?.viewType === 'buttonsAction'\"\n [listAction]=\"listAction\"\n [actions]=\"listAction\"\n (clickedButton)=\"actionListClicked($event,row)\">\n </app-button-actions>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'list'\">\n <ul class=\"mainTable__td__list\">\n <li *ngFor=\"let item of getListItems(row, columnProp)\">{{ item }}</li>\n </ul>\n </ng-container>\n\n <ng-container *ngSwitchDefault>\n <ng-container *ngIf=\"getColumn(columnProp)?.translate; else noTranslate\">\n <span\n [attr.tabindex]=\"-1\"\n (click)=\"$event.stopPropagation(); emitRoutePage(row)\">\n {{ pageInfo.labelsSection + \".\" + extractFieldName(row, columnProp) | translate }}\n </span>\n </ng-container>\n <ng-template #noTranslate>\n <span\n [attr.tabindex]=\"-1\"\n (click)=\"$event.stopPropagation(); emitRoutePage(row)\"\n [innerText]='extractFieldName(row, columnProp)'></span>\n </ng-template>\n </ng-container>\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Mobile Card View -->\n <div class=\"mobile-cards-container\">\n <div *ngFor=\"let row of dataSource.data; let rowIndex = index\"\n class=\"mobile-card\"\n [attr.id]=\"'mobile-card-' + (row?.id || row?.key || '')\"\n [ngClass]=\"{\n 'mobile-card--highlight': selectedRowIndex == row.id || (pageInfo.groupByProperty && pageInfo.groupByValue?.includes(row[pageInfo.groupByProperty])),\n 'mobile-card--dark-highlight': isDarkHighlight(row)\n }\"\n (auxclick)=\"openNewTab(row)\"\n (click)=\"$event.stopPropagation(); onSelectItem(row)\">\n\n <!-- Mobile Card Header: ID/Name and Status -->\n <div class=\"mobile-card__header\">\n <div class=\"mobile-card__header-id\">\n <span class=\"mobile-card__id-text\">{{ extractFieldName(row, getMobileCardIdColumn()?.property || 'id') }}</span>\n </div>\n <div class=\"mobile-card__header-status\" *ngIf=\"getMobileCardStatusColumn()\">\n <button mat-button class=\"stateType {{ row[getMobileCardStatusColumn()?.property]}}\"\n [attr.id]=\"'mobile-btn-state-'+getMobileCardStatusColumn()?.property\">\n {{ labelKeyByValue(getMobileCardStatusColumn(), row) | translate}}\n </button>\n </div>\n </div>\n\n <!-- Divider -->\n <div class=\"mobile-card__divider\"></div>\n\n <!-- Mobile Card Body: Other columns -->\n <div class=\"mobile-card__body\">\n <div *ngFor=\"let column of getMobileCardColumns()\" class=\"mobile-card__row\">\n <div class=\"mobile-card__row-label\">\n <span>{{ labelKey(column) | translate }} :</span>\n </div>\n <div class=\"mobile-card__row-value\">\n <ng-container [ngSwitch]=\"column.type\">\n <ng-container *ngSwitchCase=\"'stateType'\">\n <button mat-button class=\"stateType {{ row[column.property]}}\"\n [attr.id]=\"'mobile-btn-state-'+column.property\">\n {{ labelKeyByValue(column, row) | translate}}\n </button>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'date'\">\n {{ extractFieldName(row, column.property) | date:'dd/MM/yyyy' }}\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'netAmount'\">\n <span class=\"mobile-card__amount-currency\">{{ row[column.currency] }}</span>\n <span class=\"mobile-card__amount-value\">{{ extractFieldName(row, column.property) | currency:'':'' }}</span>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'localDateTime'\">\n {{ extractFieldName(row, column.property) | date : extractFormat(column) }}\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'bigdecimal'\">\n <small><sup class=\"mainTable__td__currency\">{{row[column.currency]}}</sup></small>\n {{ extractFieldName(row, column.property) | number : (column.digitInfo || '1.3-5') }}\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'list'\">\n <ul class=\"mainTable__td__list\">\n <li *ngFor=\"let item of getListItems(row, column.property)\">{{ item }}</li>\n </ul>\n </ng-container>\n\n <ng-container *ngSwitchDefault>\n <ng-container *ngIf=\"column.translate; else noTranslate\">\n <span>{{ pageInfo.labelsSection + \".\" + extractFieldName(row, column.property) | translate }}</span>\n </ng-container>\n <ng-template #noTranslate>\n <span [innerText]='extractFieldName(row, column.property)'></span>\n </ng-template>\n </ng-container>\n </ng-container>\n </div>\n </div>\n </div>\n\n <!-- Mobile Card Actions -->\n <div class=\"mobile-card__actions\" *ngIf=\"listAction && listAction.length > 0\">\n <app-button-actions\n [row]=\"row\"\n [buttonsAction]=\"true\"\n [listAction]=\"listAction\"\n [actions]=\"listAction\"\n (clickedButton)=\"actionListClicked($event,row)\">\n </app-button-actions>\n </div>\n </div>\n </div>\n\n <div *ngIf=\"noDataFound\" class=\"dataNotFound flex-column\">\n <img *ngIf=\"getDisplaySvgPath()\" [src]=\"getDisplaySvgPath()\" class=\"dataNotFound__icon\" alt=\"No data found\" />\n <span class=\"dataNotFound__title\">{{ getDisplayTitle() | translate}}</span>\n <span class=\"dataNotFound__subtitle\">{{ getDisplaySubtitle() | translate}}</span>\n </div>\n\n\n <div *ngIf=\"(dataSource.data?.length > 0 || customizedData) && !pageInfo.hidePagination\" class=\"main-pagination flex-row\">\n <ng-container *ngIf=\"enablePagination\">\n <div class=\"flex-column flex-100\">\n <app-paginator\n [currentPage]=\"pageIndex\"\n [totalItems]=\"totalElements\"\n [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"[5, 10, 25, 50]\"\n [mobileLoadMoreIncrement]=\"mobileLoadMoreIncrement\"\n [displayedItems]=\"mobileDisplayedItems || dataSource.data.length\"\n (pageChange)=\"onPageChange($event)\"\n (pageSizeChange)=\"onPageSizeChange($event)\"\n (loadMore)=\"onLoadMore($event)\">\n </app-paginator>\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n</div>\n", styles: [":host{display:block;width:100%;max-width:100%;box-sizing:border-box;container-type:inline-size;container-name:base-table}.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}@container base-table (min-width: 769px) and (max-width: 900px){.filter-row{align-items:flex-end!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}@container base-table (min-width: 769px) and (max-width: 900px){.filter-row .btn-export{margin-bottom:0!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}}.mainTable__td__list{margin:4px 0;padding:4px 8px 4px 1.25rem;list-style-type:disc}.mainTable__td__list li{word-break:break-word;line-height:1.35;padding:2px 0}.mainTable__td__list li+li{margin-top:2px}.table-cell:has(.mainTable__td__list){align-items:flex-start;padding-top:8px;padding-bottom:8px}.mobile-card__row-value:has(.mainTable__td__list){align-items:flex-start;padding:4px 0}\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: [] }); }
4045
+ 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", pendingViewModeChanged: "pendingViewModeChanged", showDialog: "showDialog", clickRoutePage: "clickRoutePage" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"flex-column baseTable\">\n <div class=\"flex-row flex-100\" >\n <div class=\"flex-column align-start flex-100\" style=\"width: 100%;\">\n <app-title-bar\n [pageTitle]=\"pageInfo.hideTitle ? '' : pageInfo.labelsSection+'.list_title'\"\n [subTitle]=\"(pageInfo.hideTitle || pageInfo.hideSubtitle) ? '' : pageInfo.labelsSection+'.subtitle'\"\n [titleMode]=\"''\"\n [pageInfo]=\"pageInfo\"\n [newAction]=\"showAddNew()\"\n [showExtractButton]=\"!pageInfo.hideExtractButton\"\n [draftSupported]=\"pageInfo.draftSupported\"\n [isPending]=\"isPending\"\n [onViewModeChange]=\"switchViewMode.bind(this)\"\n [buttons]=\"extraActions\"\n [buttonsDisplayMode]=\"buttonsDisplayMode\"\n (newActionClicked)=\"onAddNewAction($event)\"\n (extractReport)=\"extractReport($event)\"\n (viewModeChanged)=\"onViewModeChangedReceived($event)\"\n (buttonClicked)=\"buttonClicked.emit($event)\"\n [totalElements]=\"pageInfo.hideTitle ? undefined : totalElements\">\n </app-title-bar>\n </div>\n </div>\n\n <div class=\"filter-row\" *ngIf=\"!pageInfo.hideAdvancedFilter\">\n <app-filter-builder\n *ngIf=\"!pageInfo.hideAdvancedFilter\"\n [pageInfo]=\"pageInfo\"\n [columns]=\"columns\"\n [filterFields]=\"filterFields\"\n [pendingFilters]=\"pendingFilters\"\n [showExportButton]=\"!pageInfo.hideExtractButton\"\n [exportDisabled]=\"noDataFound || !dataSource?.data?.length\"\n (filterInformation)=\"storePendingFilters($event)\"\n (isEmpty)=\"handleFilterEmpty($event)\"\n (applyFilter)=\"applyPendingFilters()\"\n (sortByClicked)=\"handleSortClick($event)\"\n (exportClicked)=\"extractReport($event)\">\n </app-filter-builder>\n\n <div class=\"button-group\" *ngIf=\"!pageInfo.hideExtractButton\">\n <button *ngIf=\"!pageInfo.hideExtractButton\"\n mat-flat-button\n type=\"button\"\n [matMenuTriggerFor]=\"exportMenu\"\n class=\"btn-export\"\n [disabled]=\"noDataFound || !dataSource?.data?.length\"\n [attr.aria-label]=\"'export' | translate\"\n [attr.aria-haspopup]=\"true\"\n >\n <div class=\"button-text\">\n <mat-icon>file_export</mat-icon>\n <span>{{ 'export' | translate }}</span>\n <mat-icon class=\"arrow-icon\">keyboard_arrow_down</mat-icon>\n </div>\n </button>\n\n <mat-menu #exportMenu=\"matMenu\">\n <button mat-menu-item (click)=\"extractReport('pdf')\">PDF</button>\n <button mat-menu-item (click)=\"extractReport('xlsx')\">Excel</button>\n <button mat-menu-item (click)=\"extractReport('csv')\">CSV</button>\n </mat-menu>\n\n </div>\n </div>\n\n\n <div class=\"flex-row flex-100 baseTable__detailsColumn\">\n <div class=\"flex-100\">\n <div class=\"flex-row flex-100 mainTable\">\n <div\n class=\"table-container\"\n role=\"table\"\n [attr.aria-label]=\"\n pageInfo.labelsSection && !pageInfo.hideTitle\n ? (pageInfo.labelsSection + '.list_title' | translate)\n : null\n \">\n <div class=\"table-header\" [attr.data-sort]=\"sortState\" role=\"row\">\n <div *ngFor=\"let columnProp of visibleColumnsArray; let i = index\"\n class=\"table-header-cell\"\n role=\"columnheader\"\n [attr.aria-sort]=\"getColumnAriaSort(columnProp)\"\n [attr.tabindex]=\"getColumn(columnProp)?.enableSorting ? 0 : null\"\n [class.sortable]=\"getColumn(columnProp)?.enableSorting\"\n [class.first-cell]=\"i === 0\"\n [class.last-cell]=\"i === visibleColumnsArray.length - 1\"\n [class.actions-cell]=\"i === visibleColumnsArray.length - 1 && columnProp === 'actions'\"\n [class.has-width]=\"getColumn(columnProp)?.width\"\n [ngStyle]=\"getColumn(columnProp)?.width ? {'width': getColumn(columnProp)?.width + '%', 'flex-basis': getColumn(columnProp)?.width + '%'} : {}\"\n (click)=\"getColumn(columnProp)?.enableSorting && handleSortClick(columnProp)\"\n (keydown)=\"onSortHeaderKeydown($event, columnProp)\">\n <div class=\"table-header-content\">\n <span class=\"table-header-label\">{{ labelKey(getColumn(columnProp)) | translate }}</span>\n <ng-container *ngIf=\"getColumn(columnProp)?.enableSorting\">\n <mat-icon *ngIf=\"getSortDirection(columnProp) === 'asc'\"\n class=\"sort-icon sort-asc\">arrow_drop_up</mat-icon>\n <mat-icon *ngIf=\"getSortDirection(columnProp) === 'desc'\"\n class=\"sort-icon sort-desc\">arrow_drop_down</mat-icon>\n </ng-container>\n </div>\n </div>\n </div>\n\n <div class=\"table-body\" role=\"rowgroup\">\n <div *ngFor=\"let row of dataSource.data; let rowIndex = index\"\n class=\"table-row\"\n role=\"row\"\n [attr.tabindex]=\"-1\"\n [attr.id]=\"'table-row-' + (row?.id || row?.key || '')\"\n [ngClass]=\"{\n 'table-row--highlight': selectedRowIndex == row.id || (pageInfo.groupByProperty && pageInfo.groupByValue?.includes(row[pageInfo.groupByProperty])),\n 'table-row--dark-highlight': isDarkHighlight(row)\n }\"\n (auxclick)=\"openNewTab(row)\"\n (click)=\"$event.stopPropagation(); onSelectItem(row)\">\n <div *ngFor=\"let columnProp of visibleColumnsArray; let i = index\"\n class=\"table-cell\"\n role=\"cell\"\n [class.first-cell]=\"i === 0\"\n [class.last-cell]=\"i === visibleColumnsArray.length - 1\"\n [class.actions-cell]=\"i === visibleColumnsArray.length - 1 && columnProp === 'actions'\"\n [class.has-width]=\"getColumn(columnProp)?.width\"\n [ngStyle]=\"getColumn(columnProp)?.width ? {'width': getColumn(columnProp)?.width + '%', 'flex-basis': getColumn(columnProp)?.width + '%'} : {}\">\n <ng-container [ngSwitch]=\"getColumn(columnProp)?.type\">\n <ng-container *ngSwitchCase=\"'workflowStatus'\">\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>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'hyper-text'\">\n <span\n *ngIf=\"shouldRenderAsHyperLink(row); else plainHyperText\"\n class=\"mat-mdc-form-field-label hyper-link\"\n [attr.tabindex]=\"-1\"\n (click)=\"hyperLinkClicked(columnProp, row)\">\n {{ extractFieldName(row, columnProp) }}\n </span>\n <ng-template #plainHyperText>\n <span class=\"mat-mdc-form-field-label\">{{ extractFieldName(row, columnProp) }}</span>\n </ng-template>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'button'\">\n <button *ngIf=\"shouldShowButton(row)\" mat-button type=\"button\" class=\"primary\" (click)=\"$event.stopPropagation(); actionButtonClicked(columnProp, row)\" [attr.id]=\"'table-btn-action-'+columnProp\">\n {{ labelKey(getColumn(columnProp)) + '_title' | translate }}\n </button>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'icon'\">\n <mat-icon [ngClass]=\"{\n 'mainTable__td__icon-green': row[columnProp] === 'pass',\n 'mainTable__td__icon-orange': row[columnProp] === 'warning',\n 'mainTable__td__icon-red': row[columnProp] === 'error'\n }\"\n [attr.aria-label]=\"getIconAriaLabelKey(row[columnProp]) | translate\">\n {{ getIcon(row[columnProp]) }}\n </mat-icon>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'checkbox'\">\n <mat-checkbox class=\"primary\" [tabIndex]=\"-1\" [checked]=\"row[columnProp]\" (click)=\"$event.stopPropagation();actionCheckedClicked(columnProp,row)\"></mat-checkbox>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'stateType'\">\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>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'date'\">\n {{ extractFieldName(row, columnProp) | date:'dd/MM/yyyy':'UTC' }}\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'croppedText'\">\n {{ getCroppedText(row[columnProp], row[getColumn(columnProp)?.width]) }}\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'download'\">\n <mat-icon class=\"mainTable__td__icon-blue\"\n [attr.aria-label]=\"'BASE_TABLE.downloadAction' | translate\">system_update_alt</mat-icon>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'onOff'\">\n <mat-icon *ngIf=\"row[columnProp] === null\" class=\"mainTable__td__icon-darkorange\"\n [attr.aria-label]=\"getOnOffFlagAriaLabelKey(null) | translate\">flag</mat-icon>\n <mat-icon *ngIf=\"row[columnProp] === false\" class=\"mainTable__td__icon-red\"\n [attr.aria-label]=\"getOnOffFlagAriaLabelKey(false) | translate\">flag</mat-icon>\n <mat-icon *ngIf=\"row[columnProp] === true\" class=\"mainTable__td__icon-green\"\n [attr.aria-label]=\"getOnOffFlagAriaLabelKey(true) | translate\">flag</mat-icon>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'status'\">\n <span *ngIf=\"row[columnProp] === null || row[columnProp] === false\">\n {{ pageInfo.labelsSection + '.' + getColumn(columnProp)?.label + 'InActive' | translate }}\n </span>\n <span *ngIf=\"row[columnProp] === true\">\n {{ pageInfo.labelsSection + '.' + getColumn(columnProp)?.label + 'Active' | translate }}\n </span>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'info'\">\n <button\n mat-icon-button\n type=\"button\"\n [attr.tabindex]=\"-1\"\n [attr.aria-label]=\"'BASE_TABLE.rowDetails' | translate\"\n (click)=\"$event.stopPropagation();emitEvent(row)\"\n [attr.id]=\"'table-btn-info-'+row.id\">\n <mat-icon aria-hidden=\"true\">info</mat-icon>\n </button>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'netAmount'\">\n <div class=\"mainTable__td__currency\" style=\"display:inline-block;\">{{ row[getColumn(columnProp)?.currency] }}</div>\n <span class=\"mainTable__td__property\" style=\"display:inline-block; margin-left:6px; margin-right:6px;\">\n {{ extractFieldName(row, columnProp) | currency:'':'' }}</span>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'localDateTime'\">\n {{ extractFieldName(row, columnProp) | date : extractFormat(getColumn(columnProp)):'UTC' }}\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'bigdecimal'\">\n <small><sup class=\"mainTable__td__currency\">{{row[getColumn(columnProp)?.currency]}}</sup></small>\n {{ extractFieldName(row, columnProp) | number : (getColumn(columnProp)?.digitInfo || '1.3-5') }}\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'listAction'\">\n <app-button-actions\n [row]=\"row\"\n [buttonsAction]=\"getColumn(columnProp)?.viewType === 'buttonsAction'\"\n [listAction]=\"listAction\"\n [actions]=\"listAction\"\n (clickedButton)=\"actionListClicked($event,row)\">\n </app-button-actions>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'list'\">\n <ul class=\"mainTable__td__list\">\n <li *ngFor=\"let item of getListItems(row, columnProp)\">{{ item }}</li>\n </ul>\n </ng-container>\n\n <ng-container *ngSwitchDefault>\n <ng-container *ngIf=\"getColumn(columnProp)?.translate; else noTranslate\">\n <span\n [attr.tabindex]=\"-1\"\n (click)=\"$event.stopPropagation(); emitRoutePage(row)\">\n {{ pageInfo.labelsSection + \".\" + extractFieldName(row, columnProp) | translate }}\n </span>\n </ng-container>\n <ng-template #noTranslate>\n <span\n [attr.tabindex]=\"-1\"\n (click)=\"$event.stopPropagation(); emitRoutePage(row)\"\n [innerText]='extractFieldName(row, columnProp)'></span>\n </ng-template>\n </ng-container>\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Mobile Card View -->\n <div class=\"mobile-cards-container\">\n <div *ngFor=\"let row of dataSource.data; let rowIndex = index\"\n class=\"mobile-card\"\n [attr.id]=\"'mobile-card-' + (row?.id || row?.key || '')\"\n [ngClass]=\"{\n 'mobile-card--highlight': selectedRowIndex == row.id || (pageInfo.groupByProperty && pageInfo.groupByValue?.includes(row[pageInfo.groupByProperty])),\n 'mobile-card--dark-highlight': isDarkHighlight(row)\n }\"\n (auxclick)=\"openNewTab(row)\"\n (click)=\"$event.stopPropagation(); onSelectItem(row)\">\n\n <!-- Mobile Card Header: ID/Name and Status -->\n <div class=\"mobile-card__header\">\n <div class=\"mobile-card__header-id\">\n <span class=\"mobile-card__id-text\">{{ extractFieldName(row, getMobileCardIdColumn()?.property || 'id') }}</span>\n </div>\n <div class=\"mobile-card__header-status\" *ngIf=\"getMobileCardStatusColumn()\">\n <button mat-button class=\"stateType {{ row[getMobileCardStatusColumn()?.property]}}\"\n [attr.id]=\"'mobile-btn-state-'+getMobileCardStatusColumn()?.property\">\n {{ labelKeyByValue(getMobileCardStatusColumn(), row) | translate}}\n </button>\n </div>\n </div>\n\n <!-- Divider -->\n <div class=\"mobile-card__divider\"></div>\n\n <!-- Mobile Card Body: Other columns -->\n <div class=\"mobile-card__body\">\n <div *ngFor=\"let column of getMobileCardColumns()\" class=\"mobile-card__row\">\n <div class=\"mobile-card__row-label\">\n <span>{{ labelKey(column) | translate }} :</span>\n </div>\n <div class=\"mobile-card__row-value\">\n <ng-container [ngSwitch]=\"column.type\">\n <ng-container *ngSwitchCase=\"'stateType'\">\n <button mat-button class=\"stateType {{ row[column.property]}}\"\n [attr.id]=\"'mobile-btn-state-'+column.property\">\n {{ labelKeyByValue(column, row) | translate}}\n </button>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'date'\">\n {{ extractFieldName(row, column.property) | date:'dd/MM/yyyy':'UTC' }}\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'netAmount'\">\n <span class=\"mobile-card__amount-currency\">{{ row[column.currency] }}</span>\n <span class=\"mobile-card__amount-value\">{{ extractFieldName(row, column.property) | currency:'':'' }}</span>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'localDateTime'\">\n {{ extractFieldName(row, column.property) | date : extractFormat(column):'UTC' }}\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'bigdecimal'\">\n <small><sup class=\"mainTable__td__currency\">{{row[column.currency]}}</sup></small>\n {{ extractFieldName(row, column.property) | number : (column.digitInfo || '1.3-5') }}\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'list'\">\n <ul class=\"mainTable__td__list\">\n <li *ngFor=\"let item of getListItems(row, column.property)\">{{ item }}</li>\n </ul>\n </ng-container>\n\n <ng-container *ngSwitchDefault>\n <ng-container *ngIf=\"column.translate; else noTranslate\">\n <span>{{ pageInfo.labelsSection + \".\" + extractFieldName(row, column.property) | translate }}</span>\n </ng-container>\n <ng-template #noTranslate>\n <span [innerText]='extractFieldName(row, column.property)'></span>\n </ng-template>\n </ng-container>\n </ng-container>\n </div>\n </div>\n </div>\n\n <!-- Mobile Card Actions -->\n <div class=\"mobile-card__actions\" *ngIf=\"listAction && listAction.length > 0\">\n <app-button-actions\n [row]=\"row\"\n [buttonsAction]=\"true\"\n [listAction]=\"listAction\"\n [actions]=\"listAction\"\n (clickedButton)=\"actionListClicked($event,row)\">\n </app-button-actions>\n </div>\n </div>\n </div>\n\n <div *ngIf=\"noDataFound\" class=\"dataNotFound flex-column\">\n <img *ngIf=\"getDisplaySvgPath()\" [src]=\"getDisplaySvgPath()\" class=\"dataNotFound__icon\" alt=\"No data found\" />\n <span class=\"dataNotFound__title\">{{ getDisplayTitle() | translate}}</span>\n <span class=\"dataNotFound__subtitle\">{{ getDisplaySubtitle() | translate}}</span>\n </div>\n\n\n <div *ngIf=\"(dataSource.data?.length > 0 || customizedData) && !pageInfo.hidePagination\" class=\"main-pagination flex-row\">\n <ng-container *ngIf=\"enablePagination\">\n <div class=\"flex-column flex-100\">\n <app-paginator\n [currentPage]=\"pageIndex\"\n [totalItems]=\"totalElements\"\n [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"[5, 10, 25, 50]\"\n [mobileLoadMoreIncrement]=\"mobileLoadMoreIncrement\"\n [displayedItems]=\"mobileDisplayedItems || dataSource.data.length\"\n (pageChange)=\"onPageChange($event)\"\n (pageSizeChange)=\"onPageSizeChange($event)\"\n (loadMore)=\"onLoadMore($event)\">\n </app-paginator>\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n</div>\n", styles: [":host{display:block;width:100%;max-width:100%;box-sizing:border-box;container-type:inline-size;container-name:base-table}.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}@container base-table (min-width: 769px) and (max-width: 900px){.filter-row{align-items:flex-end!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:not(:disabled){background:#fafafa!important}.btn-export:disabled,.btn-export.mat-mdc-button-disabled{opacity:.45;cursor:not-allowed;pointer-events:none}@container base-table (min-width: 769px) and (max-width: 900px){.filter-row .btn-export{margin-bottom:0!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}:host-context([dir=rtl]) .table-row,:host-context(body.rtl) .table-row{overflow:visible;align-items:center}:host-context([dir=rtl]) .table-cell:not(.actions-cell),:host-context(body.rtl) .table-cell:not(.actions-cell){overflow:visible;align-items:center;line-height:1.7;padding-top:10px;padding-bottom:10px}:host-context([dir=rtl]) .table-cell:not(.actions-cell) span,:host-context(body.rtl) .table-cell:not(.actions-cell) span{display:inline;overflow:visible;line-height:1.7;-webkit-line-clamp:unset;line-clamp:unset}.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}}.mainTable__td__list{margin:4px 0;padding:4px 8px 4px 1.25rem;list-style-type:disc}.mainTable__td__list li{word-break:break-word;line-height:1.35;padding:2px 0}.mainTable__td__list li+li{margin-top:2px}.table-cell:has(.mainTable__td__list){align-items:flex-start;padding-top:8px;padding-bottom:8px}.mobile-card__row-value:has(.mainTable__td__list){align-items:flex-start;padding:4px 0}\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", "exportDisabled"], 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: [] }); }
4043
4046
  }
4044
4047
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BaseTableComponent, decorators: [{
4045
4048
  type: Component,
@@ -4069,7 +4072,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
4069
4072
  MatMenuTrigger,
4070
4073
  MatMenu,
4071
4074
  MatMenuItem,
4072
- ], template: "<div class=\"flex-column baseTable\">\n <div class=\"flex-row flex-100\" >\n <div class=\"flex-column align-start flex-100\" style=\"width: 100%;\">\n <app-title-bar\n [pageTitle]=\"pageInfo.hideTitle ? '' : pageInfo.labelsSection+'.list_title'\"\n [subTitle]=\"(pageInfo.hideTitle || pageInfo.hideSubtitle) ? '' : pageInfo.labelsSection+'.subtitle'\"\n [titleMode]=\"''\"\n [pageInfo]=\"pageInfo\"\n [newAction]=\"showAddNew()\"\n [showExtractButton]=\"!pageInfo.hideExtractButton\"\n [draftSupported]=\"pageInfo.draftSupported\"\n [isPending]=\"isPending\"\n [onViewModeChange]=\"switchViewMode.bind(this)\"\n [buttons]=\"extraActions\"\n [buttonsDisplayMode]=\"buttonsDisplayMode\"\n (newActionClicked)=\"onAddNewAction($event)\"\n (extractReport)=\"extractReport($event)\"\n (viewModeChanged)=\"onViewModeChangedReceived($event)\"\n (buttonClicked)=\"buttonClicked.emit($event)\"\n [totalElements]=\"pageInfo.hideTitle ? undefined : totalElements\">\n </app-title-bar>\n </div>\n </div>\n\n <div class=\"filter-row\" *ngIf=\"!pageInfo.hideAdvancedFilter\">\n <app-filter-builder\n *ngIf=\"!pageInfo.hideAdvancedFilter\"\n [pageInfo]=\"pageInfo\"\n [columns]=\"columns\"\n [filterFields]=\"filterFields\"\n [pendingFilters]=\"pendingFilters\"\n [showExportButton]=\"!pageInfo.hideExtractButton\"\n (filterInformation)=\"storePendingFilters($event)\"\n (isEmpty)=\"handleFilterEmpty($event)\"\n (applyFilter)=\"applyPendingFilters()\"\n (sortByClicked)=\"handleSortClick($event)\"\n (exportClicked)=\"extractReport($event)\">\n </app-filter-builder>\n\n <div class=\"button-group\" *ngIf=\"!pageInfo.hideExtractButton\">\n <button *ngIf=\"!pageInfo.hideExtractButton\"\n mat-flat-button\n type=\"button\"\n [matMenuTriggerFor]=\"exportMenu\"\n class=\"btn-export\"\n [attr.aria-label]=\"'export' | translate\"\n [attr.aria-haspopup]=\"true\"\n >\n <div class=\"button-text\">\n <mat-icon>file_export</mat-icon>\n <span>{{ 'export' | translate }}</span>\n <mat-icon class=\"arrow-icon\">keyboard_arrow_down</mat-icon>\n </div>\n </button>\n\n <mat-menu #exportMenu=\"matMenu\">\n <button mat-menu-item (click)=\"extractReport('pdf')\">PDF</button>\n <button mat-menu-item (click)=\"extractReport('xlsx')\">Excel</button>\n <button mat-menu-item (click)=\"extractReport('csv')\">CSV</button>\n </mat-menu>\n\n </div>\n </div>\n\n\n <div class=\"flex-row flex-100 baseTable__detailsColumn\">\n <div class=\"flex-100\">\n <div class=\"flex-row flex-100 mainTable\">\n <div\n class=\"table-container\"\n role=\"table\"\n [attr.aria-label]=\"\n pageInfo.labelsSection && !pageInfo.hideTitle\n ? (pageInfo.labelsSection + '.list_title' | translate)\n : null\n \">\n <div class=\"table-header\" [attr.data-sort]=\"sortState\" role=\"row\">\n <div *ngFor=\"let columnProp of visibleColumnsArray; let i = index\"\n class=\"table-header-cell\"\n role=\"columnheader\"\n [attr.aria-sort]=\"getColumnAriaSort(columnProp)\"\n [attr.tabindex]=\"getColumn(columnProp)?.enableSorting ? 0 : null\"\n [class.sortable]=\"getColumn(columnProp)?.enableSorting\"\n [class.first-cell]=\"i === 0\"\n [class.last-cell]=\"i === visibleColumnsArray.length - 1\"\n [class.actions-cell]=\"i === visibleColumnsArray.length - 1 && columnProp === 'actions'\"\n [class.has-width]=\"getColumn(columnProp)?.width\"\n [ngStyle]=\"getColumn(columnProp)?.width ? {'width': getColumn(columnProp)?.width + '%', 'flex-basis': getColumn(columnProp)?.width + '%'} : {}\"\n (click)=\"getColumn(columnProp)?.enableSorting && handleSortClick(columnProp)\"\n (keydown)=\"onSortHeaderKeydown($event, columnProp)\">\n <div class=\"table-header-content\">\n <span class=\"table-header-label\">{{ labelKey(getColumn(columnProp)) | translate }}</span>\n <ng-container *ngIf=\"getColumn(columnProp)?.enableSorting\">\n <mat-icon *ngIf=\"getSortDirection(columnProp) === 'asc'\"\n class=\"sort-icon sort-asc\">arrow_drop_up</mat-icon>\n <mat-icon *ngIf=\"getSortDirection(columnProp) === 'desc'\"\n class=\"sort-icon sort-desc\">arrow_drop_down</mat-icon>\n </ng-container>\n </div>\n </div>\n </div>\n\n <div class=\"table-body\" role=\"rowgroup\">\n <div *ngFor=\"let row of dataSource.data; let rowIndex = index\"\n class=\"table-row\"\n role=\"row\"\n [attr.tabindex]=\"-1\"\n [attr.id]=\"'table-row-' + (row?.id || row?.key || '')\"\n [ngClass]=\"{\n 'table-row--highlight': selectedRowIndex == row.id || (pageInfo.groupByProperty && pageInfo.groupByValue?.includes(row[pageInfo.groupByProperty])),\n 'table-row--dark-highlight': isDarkHighlight(row)\n }\"\n (auxclick)=\"openNewTab(row)\"\n (click)=\"$event.stopPropagation(); onSelectItem(row)\">\n <div *ngFor=\"let columnProp of visibleColumnsArray; let i = index\"\n class=\"table-cell\"\n role=\"cell\"\n [class.first-cell]=\"i === 0\"\n [class.last-cell]=\"i === visibleColumnsArray.length - 1\"\n [class.actions-cell]=\"i === visibleColumnsArray.length - 1 && columnProp === 'actions'\"\n [class.has-width]=\"getColumn(columnProp)?.width\"\n [ngStyle]=\"getColumn(columnProp)?.width ? {'width': getColumn(columnProp)?.width + '%', 'flex-basis': getColumn(columnProp)?.width + '%'} : {}\">\n <ng-container [ngSwitch]=\"getColumn(columnProp)?.type\">\n <ng-container *ngSwitchCase=\"'workflowStatus'\">\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>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'hyper-text'\">\n <span\n *ngIf=\"shouldRenderAsHyperLink(row); else plainHyperText\"\n class=\"mat-mdc-form-field-label hyper-link\"\n [attr.tabindex]=\"-1\"\n (click)=\"hyperLinkClicked(columnProp, row)\">\n {{ extractFieldName(row, columnProp) }}\n </span>\n <ng-template #plainHyperText>\n <span class=\"mat-mdc-form-field-label\">{{ extractFieldName(row, columnProp) }}</span>\n </ng-template>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'button'\">\n <button *ngIf=\"shouldShowButton(row)\" mat-button type=\"button\" class=\"primary\" (click)=\"$event.stopPropagation(); actionButtonClicked(columnProp, row)\" [attr.id]=\"'table-btn-action-'+columnProp\">\n {{ labelKey(getColumn(columnProp)) + '_title' | translate }}\n </button>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'icon'\">\n <mat-icon [ngClass]=\"{\n 'mainTable__td__icon-green': row[columnProp] === 'pass',\n 'mainTable__td__icon-orange': row[columnProp] === 'warning',\n 'mainTable__td__icon-red': row[columnProp] === 'error'\n }\"\n [attr.aria-label]=\"getIconAriaLabelKey(row[columnProp]) | translate\">\n {{ getIcon(row[columnProp]) }}\n </mat-icon>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'checkbox'\">\n <mat-checkbox class=\"primary\" [tabIndex]=\"-1\" [checked]=\"row[columnProp]\" (click)=\"$event.stopPropagation();actionCheckedClicked(columnProp,row)\"></mat-checkbox>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'stateType'\">\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>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'date'\">\n {{ extractFieldName(row, columnProp) | date:'dd/MM/yyyy' }}\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'croppedText'\">\n {{ getCroppedText(row[columnProp], row[getColumn(columnProp)?.width]) }}\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'download'\">\n <mat-icon class=\"mainTable__td__icon-blue\"\n [attr.aria-label]=\"'BASE_TABLE.downloadAction' | translate\">system_update_alt</mat-icon>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'onOff'\">\n <mat-icon *ngIf=\"row[columnProp] === null\" class=\"mainTable__td__icon-darkorange\"\n [attr.aria-label]=\"getOnOffFlagAriaLabelKey(null) | translate\">flag</mat-icon>\n <mat-icon *ngIf=\"row[columnProp] === false\" class=\"mainTable__td__icon-red\"\n [attr.aria-label]=\"getOnOffFlagAriaLabelKey(false) | translate\">flag</mat-icon>\n <mat-icon *ngIf=\"row[columnProp] === true\" class=\"mainTable__td__icon-green\"\n [attr.aria-label]=\"getOnOffFlagAriaLabelKey(true) | translate\">flag</mat-icon>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'status'\">\n <span *ngIf=\"row[columnProp] === null || row[columnProp] === false\">\n {{ pageInfo.labelsSection + '.' + getColumn(columnProp)?.label + 'InActive' | translate }}\n </span>\n <span *ngIf=\"row[columnProp] === true\">\n {{ pageInfo.labelsSection + '.' + getColumn(columnProp)?.label + 'Active' | translate }}\n </span>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'info'\">\n <button\n mat-icon-button\n type=\"button\"\n [attr.tabindex]=\"-1\"\n [attr.aria-label]=\"'BASE_TABLE.rowDetails' | translate\"\n (click)=\"$event.stopPropagation();emitEvent(row)\"\n [attr.id]=\"'table-btn-info-'+row.id\">\n <mat-icon aria-hidden=\"true\">info</mat-icon>\n </button>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'netAmount'\">\n <div class=\"mainTable__td__currency\" style=\"display:inline-block;\">{{ row[getColumn(columnProp)?.currency] }}</div>\n <span class=\"mainTable__td__property\" style=\"display:inline-block; margin-left:6px; margin-right:6px;\">\n {{ extractFieldName(row, columnProp) | currency:'':'' }}</span>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'localDateTime'\">\n {{ extractFieldName(row, columnProp) | date : extractFormat(getColumn(columnProp)) }}\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'bigdecimal'\">\n <small><sup class=\"mainTable__td__currency\">{{row[getColumn(columnProp)?.currency]}}</sup></small>\n {{ extractFieldName(row, columnProp) | number : (getColumn(columnProp)?.digitInfo || '1.3-5') }}\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'listAction'\">\n <app-button-actions\n [row]=\"row\"\n [buttonsAction]=\"getColumn(columnProp)?.viewType === 'buttonsAction'\"\n [listAction]=\"listAction\"\n [actions]=\"listAction\"\n (clickedButton)=\"actionListClicked($event,row)\">\n </app-button-actions>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'list'\">\n <ul class=\"mainTable__td__list\">\n <li *ngFor=\"let item of getListItems(row, columnProp)\">{{ item }}</li>\n </ul>\n </ng-container>\n\n <ng-container *ngSwitchDefault>\n <ng-container *ngIf=\"getColumn(columnProp)?.translate; else noTranslate\">\n <span\n [attr.tabindex]=\"-1\"\n (click)=\"$event.stopPropagation(); emitRoutePage(row)\">\n {{ pageInfo.labelsSection + \".\" + extractFieldName(row, columnProp) | translate }}\n </span>\n </ng-container>\n <ng-template #noTranslate>\n <span\n [attr.tabindex]=\"-1\"\n (click)=\"$event.stopPropagation(); emitRoutePage(row)\"\n [innerText]='extractFieldName(row, columnProp)'></span>\n </ng-template>\n </ng-container>\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Mobile Card View -->\n <div class=\"mobile-cards-container\">\n <div *ngFor=\"let row of dataSource.data; let rowIndex = index\"\n class=\"mobile-card\"\n [attr.id]=\"'mobile-card-' + (row?.id || row?.key || '')\"\n [ngClass]=\"{\n 'mobile-card--highlight': selectedRowIndex == row.id || (pageInfo.groupByProperty && pageInfo.groupByValue?.includes(row[pageInfo.groupByProperty])),\n 'mobile-card--dark-highlight': isDarkHighlight(row)\n }\"\n (auxclick)=\"openNewTab(row)\"\n (click)=\"$event.stopPropagation(); onSelectItem(row)\">\n\n <!-- Mobile Card Header: ID/Name and Status -->\n <div class=\"mobile-card__header\">\n <div class=\"mobile-card__header-id\">\n <span class=\"mobile-card__id-text\">{{ extractFieldName(row, getMobileCardIdColumn()?.property || 'id') }}</span>\n </div>\n <div class=\"mobile-card__header-status\" *ngIf=\"getMobileCardStatusColumn()\">\n <button mat-button class=\"stateType {{ row[getMobileCardStatusColumn()?.property]}}\"\n [attr.id]=\"'mobile-btn-state-'+getMobileCardStatusColumn()?.property\">\n {{ labelKeyByValue(getMobileCardStatusColumn(), row) | translate}}\n </button>\n </div>\n </div>\n\n <!-- Divider -->\n <div class=\"mobile-card__divider\"></div>\n\n <!-- Mobile Card Body: Other columns -->\n <div class=\"mobile-card__body\">\n <div *ngFor=\"let column of getMobileCardColumns()\" class=\"mobile-card__row\">\n <div class=\"mobile-card__row-label\">\n <span>{{ labelKey(column) | translate }} :</span>\n </div>\n <div class=\"mobile-card__row-value\">\n <ng-container [ngSwitch]=\"column.type\">\n <ng-container *ngSwitchCase=\"'stateType'\">\n <button mat-button class=\"stateType {{ row[column.property]}}\"\n [attr.id]=\"'mobile-btn-state-'+column.property\">\n {{ labelKeyByValue(column, row) | translate}}\n </button>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'date'\">\n {{ extractFieldName(row, column.property) | date:'dd/MM/yyyy' }}\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'netAmount'\">\n <span class=\"mobile-card__amount-currency\">{{ row[column.currency] }}</span>\n <span class=\"mobile-card__amount-value\">{{ extractFieldName(row, column.property) | currency:'':'' }}</span>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'localDateTime'\">\n {{ extractFieldName(row, column.property) | date : extractFormat(column) }}\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'bigdecimal'\">\n <small><sup class=\"mainTable__td__currency\">{{row[column.currency]}}</sup></small>\n {{ extractFieldName(row, column.property) | number : (column.digitInfo || '1.3-5') }}\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'list'\">\n <ul class=\"mainTable__td__list\">\n <li *ngFor=\"let item of getListItems(row, column.property)\">{{ item }}</li>\n </ul>\n </ng-container>\n\n <ng-container *ngSwitchDefault>\n <ng-container *ngIf=\"column.translate; else noTranslate\">\n <span>{{ pageInfo.labelsSection + \".\" + extractFieldName(row, column.property) | translate }}</span>\n </ng-container>\n <ng-template #noTranslate>\n <span [innerText]='extractFieldName(row, column.property)'></span>\n </ng-template>\n </ng-container>\n </ng-container>\n </div>\n </div>\n </div>\n\n <!-- Mobile Card Actions -->\n <div class=\"mobile-card__actions\" *ngIf=\"listAction && listAction.length > 0\">\n <app-button-actions\n [row]=\"row\"\n [buttonsAction]=\"true\"\n [listAction]=\"listAction\"\n [actions]=\"listAction\"\n (clickedButton)=\"actionListClicked($event,row)\">\n </app-button-actions>\n </div>\n </div>\n </div>\n\n <div *ngIf=\"noDataFound\" class=\"dataNotFound flex-column\">\n <img *ngIf=\"getDisplaySvgPath()\" [src]=\"getDisplaySvgPath()\" class=\"dataNotFound__icon\" alt=\"No data found\" />\n <span class=\"dataNotFound__title\">{{ getDisplayTitle() | translate}}</span>\n <span class=\"dataNotFound__subtitle\">{{ getDisplaySubtitle() | translate}}</span>\n </div>\n\n\n <div *ngIf=\"(dataSource.data?.length > 0 || customizedData) && !pageInfo.hidePagination\" class=\"main-pagination flex-row\">\n <ng-container *ngIf=\"enablePagination\">\n <div class=\"flex-column flex-100\">\n <app-paginator\n [currentPage]=\"pageIndex\"\n [totalItems]=\"totalElements\"\n [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"[5, 10, 25, 50]\"\n [mobileLoadMoreIncrement]=\"mobileLoadMoreIncrement\"\n [displayedItems]=\"mobileDisplayedItems || dataSource.data.length\"\n (pageChange)=\"onPageChange($event)\"\n (pageSizeChange)=\"onPageSizeChange($event)\"\n (loadMore)=\"onLoadMore($event)\">\n </app-paginator>\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n</div>\n", styles: [":host{display:block;width:100%;max-width:100%;box-sizing:border-box;container-type:inline-size;container-name:base-table}.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}@container base-table (min-width: 769px) and (max-width: 900px){.filter-row{align-items:flex-end!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}@container base-table (min-width: 769px) and (max-width: 900px){.filter-row .btn-export{margin-bottom:0!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}}.mainTable__td__list{margin:4px 0;padding:4px 8px 4px 1.25rem;list-style-type:disc}.mainTable__td__list li{word-break:break-word;line-height:1.35;padding:2px 0}.mainTable__td__list li+li{margin-top:2px}.table-cell:has(.mainTable__td__list){align-items:flex-start;padding-top:8px;padding-bottom:8px}.mobile-card__row-value:has(.mainTable__td__list){align-items:flex-start;padding:4px 0}\n"] }]
4075
+ ], template: "<div class=\"flex-column baseTable\">\n <div class=\"flex-row flex-100\" >\n <div class=\"flex-column align-start flex-100\" style=\"width: 100%;\">\n <app-title-bar\n [pageTitle]=\"pageInfo.hideTitle ? '' : pageInfo.labelsSection+'.list_title'\"\n [subTitle]=\"(pageInfo.hideTitle || pageInfo.hideSubtitle) ? '' : pageInfo.labelsSection+'.subtitle'\"\n [titleMode]=\"''\"\n [pageInfo]=\"pageInfo\"\n [newAction]=\"showAddNew()\"\n [showExtractButton]=\"!pageInfo.hideExtractButton\"\n [draftSupported]=\"pageInfo.draftSupported\"\n [isPending]=\"isPending\"\n [onViewModeChange]=\"switchViewMode.bind(this)\"\n [buttons]=\"extraActions\"\n [buttonsDisplayMode]=\"buttonsDisplayMode\"\n (newActionClicked)=\"onAddNewAction($event)\"\n (extractReport)=\"extractReport($event)\"\n (viewModeChanged)=\"onViewModeChangedReceived($event)\"\n (buttonClicked)=\"buttonClicked.emit($event)\"\n [totalElements]=\"pageInfo.hideTitle ? undefined : totalElements\">\n </app-title-bar>\n </div>\n </div>\n\n <div class=\"filter-row\" *ngIf=\"!pageInfo.hideAdvancedFilter\">\n <app-filter-builder\n *ngIf=\"!pageInfo.hideAdvancedFilter\"\n [pageInfo]=\"pageInfo\"\n [columns]=\"columns\"\n [filterFields]=\"filterFields\"\n [pendingFilters]=\"pendingFilters\"\n [showExportButton]=\"!pageInfo.hideExtractButton\"\n [exportDisabled]=\"noDataFound || !dataSource?.data?.length\"\n (filterInformation)=\"storePendingFilters($event)\"\n (isEmpty)=\"handleFilterEmpty($event)\"\n (applyFilter)=\"applyPendingFilters()\"\n (sortByClicked)=\"handleSortClick($event)\"\n (exportClicked)=\"extractReport($event)\">\n </app-filter-builder>\n\n <div class=\"button-group\" *ngIf=\"!pageInfo.hideExtractButton\">\n <button *ngIf=\"!pageInfo.hideExtractButton\"\n mat-flat-button\n type=\"button\"\n [matMenuTriggerFor]=\"exportMenu\"\n class=\"btn-export\"\n [disabled]=\"noDataFound || !dataSource?.data?.length\"\n [attr.aria-label]=\"'export' | translate\"\n [attr.aria-haspopup]=\"true\"\n >\n <div class=\"button-text\">\n <mat-icon>file_export</mat-icon>\n <span>{{ 'export' | translate }}</span>\n <mat-icon class=\"arrow-icon\">keyboard_arrow_down</mat-icon>\n </div>\n </button>\n\n <mat-menu #exportMenu=\"matMenu\">\n <button mat-menu-item (click)=\"extractReport('pdf')\">PDF</button>\n <button mat-menu-item (click)=\"extractReport('xlsx')\">Excel</button>\n <button mat-menu-item (click)=\"extractReport('csv')\">CSV</button>\n </mat-menu>\n\n </div>\n </div>\n\n\n <div class=\"flex-row flex-100 baseTable__detailsColumn\">\n <div class=\"flex-100\">\n <div class=\"flex-row flex-100 mainTable\">\n <div\n class=\"table-container\"\n role=\"table\"\n [attr.aria-label]=\"\n pageInfo.labelsSection && !pageInfo.hideTitle\n ? (pageInfo.labelsSection + '.list_title' | translate)\n : null\n \">\n <div class=\"table-header\" [attr.data-sort]=\"sortState\" role=\"row\">\n <div *ngFor=\"let columnProp of visibleColumnsArray; let i = index\"\n class=\"table-header-cell\"\n role=\"columnheader\"\n [attr.aria-sort]=\"getColumnAriaSort(columnProp)\"\n [attr.tabindex]=\"getColumn(columnProp)?.enableSorting ? 0 : null\"\n [class.sortable]=\"getColumn(columnProp)?.enableSorting\"\n [class.first-cell]=\"i === 0\"\n [class.last-cell]=\"i === visibleColumnsArray.length - 1\"\n [class.actions-cell]=\"i === visibleColumnsArray.length - 1 && columnProp === 'actions'\"\n [class.has-width]=\"getColumn(columnProp)?.width\"\n [ngStyle]=\"getColumn(columnProp)?.width ? {'width': getColumn(columnProp)?.width + '%', 'flex-basis': getColumn(columnProp)?.width + '%'} : {}\"\n (click)=\"getColumn(columnProp)?.enableSorting && handleSortClick(columnProp)\"\n (keydown)=\"onSortHeaderKeydown($event, columnProp)\">\n <div class=\"table-header-content\">\n <span class=\"table-header-label\">{{ labelKey(getColumn(columnProp)) | translate }}</span>\n <ng-container *ngIf=\"getColumn(columnProp)?.enableSorting\">\n <mat-icon *ngIf=\"getSortDirection(columnProp) === 'asc'\"\n class=\"sort-icon sort-asc\">arrow_drop_up</mat-icon>\n <mat-icon *ngIf=\"getSortDirection(columnProp) === 'desc'\"\n class=\"sort-icon sort-desc\">arrow_drop_down</mat-icon>\n </ng-container>\n </div>\n </div>\n </div>\n\n <div class=\"table-body\" role=\"rowgroup\">\n <div *ngFor=\"let row of dataSource.data; let rowIndex = index\"\n class=\"table-row\"\n role=\"row\"\n [attr.tabindex]=\"-1\"\n [attr.id]=\"'table-row-' + (row?.id || row?.key || '')\"\n [ngClass]=\"{\n 'table-row--highlight': selectedRowIndex == row.id || (pageInfo.groupByProperty && pageInfo.groupByValue?.includes(row[pageInfo.groupByProperty])),\n 'table-row--dark-highlight': isDarkHighlight(row)\n }\"\n (auxclick)=\"openNewTab(row)\"\n (click)=\"$event.stopPropagation(); onSelectItem(row)\">\n <div *ngFor=\"let columnProp of visibleColumnsArray; let i = index\"\n class=\"table-cell\"\n role=\"cell\"\n [class.first-cell]=\"i === 0\"\n [class.last-cell]=\"i === visibleColumnsArray.length - 1\"\n [class.actions-cell]=\"i === visibleColumnsArray.length - 1 && columnProp === 'actions'\"\n [class.has-width]=\"getColumn(columnProp)?.width\"\n [ngStyle]=\"getColumn(columnProp)?.width ? {'width': getColumn(columnProp)?.width + '%', 'flex-basis': getColumn(columnProp)?.width + '%'} : {}\">\n <ng-container [ngSwitch]=\"getColumn(columnProp)?.type\">\n <ng-container *ngSwitchCase=\"'workflowStatus'\">\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>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'hyper-text'\">\n <span\n *ngIf=\"shouldRenderAsHyperLink(row); else plainHyperText\"\n class=\"mat-mdc-form-field-label hyper-link\"\n [attr.tabindex]=\"-1\"\n (click)=\"hyperLinkClicked(columnProp, row)\">\n {{ extractFieldName(row, columnProp) }}\n </span>\n <ng-template #plainHyperText>\n <span class=\"mat-mdc-form-field-label\">{{ extractFieldName(row, columnProp) }}</span>\n </ng-template>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'button'\">\n <button *ngIf=\"shouldShowButton(row)\" mat-button type=\"button\" class=\"primary\" (click)=\"$event.stopPropagation(); actionButtonClicked(columnProp, row)\" [attr.id]=\"'table-btn-action-'+columnProp\">\n {{ labelKey(getColumn(columnProp)) + '_title' | translate }}\n </button>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'icon'\">\n <mat-icon [ngClass]=\"{\n 'mainTable__td__icon-green': row[columnProp] === 'pass',\n 'mainTable__td__icon-orange': row[columnProp] === 'warning',\n 'mainTable__td__icon-red': row[columnProp] === 'error'\n }\"\n [attr.aria-label]=\"getIconAriaLabelKey(row[columnProp]) | translate\">\n {{ getIcon(row[columnProp]) }}\n </mat-icon>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'checkbox'\">\n <mat-checkbox class=\"primary\" [tabIndex]=\"-1\" [checked]=\"row[columnProp]\" (click)=\"$event.stopPropagation();actionCheckedClicked(columnProp,row)\"></mat-checkbox>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'stateType'\">\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>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'date'\">\n {{ extractFieldName(row, columnProp) | date:'dd/MM/yyyy':'UTC' }}\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'croppedText'\">\n {{ getCroppedText(row[columnProp], row[getColumn(columnProp)?.width]) }}\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'download'\">\n <mat-icon class=\"mainTable__td__icon-blue\"\n [attr.aria-label]=\"'BASE_TABLE.downloadAction' | translate\">system_update_alt</mat-icon>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'onOff'\">\n <mat-icon *ngIf=\"row[columnProp] === null\" class=\"mainTable__td__icon-darkorange\"\n [attr.aria-label]=\"getOnOffFlagAriaLabelKey(null) | translate\">flag</mat-icon>\n <mat-icon *ngIf=\"row[columnProp] === false\" class=\"mainTable__td__icon-red\"\n [attr.aria-label]=\"getOnOffFlagAriaLabelKey(false) | translate\">flag</mat-icon>\n <mat-icon *ngIf=\"row[columnProp] === true\" class=\"mainTable__td__icon-green\"\n [attr.aria-label]=\"getOnOffFlagAriaLabelKey(true) | translate\">flag</mat-icon>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'status'\">\n <span *ngIf=\"row[columnProp] === null || row[columnProp] === false\">\n {{ pageInfo.labelsSection + '.' + getColumn(columnProp)?.label + 'InActive' | translate }}\n </span>\n <span *ngIf=\"row[columnProp] === true\">\n {{ pageInfo.labelsSection + '.' + getColumn(columnProp)?.label + 'Active' | translate }}\n </span>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'info'\">\n <button\n mat-icon-button\n type=\"button\"\n [attr.tabindex]=\"-1\"\n [attr.aria-label]=\"'BASE_TABLE.rowDetails' | translate\"\n (click)=\"$event.stopPropagation();emitEvent(row)\"\n [attr.id]=\"'table-btn-info-'+row.id\">\n <mat-icon aria-hidden=\"true\">info</mat-icon>\n </button>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'netAmount'\">\n <div class=\"mainTable__td__currency\" style=\"display:inline-block;\">{{ row[getColumn(columnProp)?.currency] }}</div>\n <span class=\"mainTable__td__property\" style=\"display:inline-block; margin-left:6px; margin-right:6px;\">\n {{ extractFieldName(row, columnProp) | currency:'':'' }}</span>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'localDateTime'\">\n {{ extractFieldName(row, columnProp) | date : extractFormat(getColumn(columnProp)):'UTC' }}\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'bigdecimal'\">\n <small><sup class=\"mainTable__td__currency\">{{row[getColumn(columnProp)?.currency]}}</sup></small>\n {{ extractFieldName(row, columnProp) | number : (getColumn(columnProp)?.digitInfo || '1.3-5') }}\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'listAction'\">\n <app-button-actions\n [row]=\"row\"\n [buttonsAction]=\"getColumn(columnProp)?.viewType === 'buttonsAction'\"\n [listAction]=\"listAction\"\n [actions]=\"listAction\"\n (clickedButton)=\"actionListClicked($event,row)\">\n </app-button-actions>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'list'\">\n <ul class=\"mainTable__td__list\">\n <li *ngFor=\"let item of getListItems(row, columnProp)\">{{ item }}</li>\n </ul>\n </ng-container>\n\n <ng-container *ngSwitchDefault>\n <ng-container *ngIf=\"getColumn(columnProp)?.translate; else noTranslate\">\n <span\n [attr.tabindex]=\"-1\"\n (click)=\"$event.stopPropagation(); emitRoutePage(row)\">\n {{ pageInfo.labelsSection + \".\" + extractFieldName(row, columnProp) | translate }}\n </span>\n </ng-container>\n <ng-template #noTranslate>\n <span\n [attr.tabindex]=\"-1\"\n (click)=\"$event.stopPropagation(); emitRoutePage(row)\"\n [innerText]='extractFieldName(row, columnProp)'></span>\n </ng-template>\n </ng-container>\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Mobile Card View -->\n <div class=\"mobile-cards-container\">\n <div *ngFor=\"let row of dataSource.data; let rowIndex = index\"\n class=\"mobile-card\"\n [attr.id]=\"'mobile-card-' + (row?.id || row?.key || '')\"\n [ngClass]=\"{\n 'mobile-card--highlight': selectedRowIndex == row.id || (pageInfo.groupByProperty && pageInfo.groupByValue?.includes(row[pageInfo.groupByProperty])),\n 'mobile-card--dark-highlight': isDarkHighlight(row)\n }\"\n (auxclick)=\"openNewTab(row)\"\n (click)=\"$event.stopPropagation(); onSelectItem(row)\">\n\n <!-- Mobile Card Header: ID/Name and Status -->\n <div class=\"mobile-card__header\">\n <div class=\"mobile-card__header-id\">\n <span class=\"mobile-card__id-text\">{{ extractFieldName(row, getMobileCardIdColumn()?.property || 'id') }}</span>\n </div>\n <div class=\"mobile-card__header-status\" *ngIf=\"getMobileCardStatusColumn()\">\n <button mat-button class=\"stateType {{ row[getMobileCardStatusColumn()?.property]}}\"\n [attr.id]=\"'mobile-btn-state-'+getMobileCardStatusColumn()?.property\">\n {{ labelKeyByValue(getMobileCardStatusColumn(), row) | translate}}\n </button>\n </div>\n </div>\n\n <!-- Divider -->\n <div class=\"mobile-card__divider\"></div>\n\n <!-- Mobile Card Body: Other columns -->\n <div class=\"mobile-card__body\">\n <div *ngFor=\"let column of getMobileCardColumns()\" class=\"mobile-card__row\">\n <div class=\"mobile-card__row-label\">\n <span>{{ labelKey(column) | translate }} :</span>\n </div>\n <div class=\"mobile-card__row-value\">\n <ng-container [ngSwitch]=\"column.type\">\n <ng-container *ngSwitchCase=\"'stateType'\">\n <button mat-button class=\"stateType {{ row[column.property]}}\"\n [attr.id]=\"'mobile-btn-state-'+column.property\">\n {{ labelKeyByValue(column, row) | translate}}\n </button>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'date'\">\n {{ extractFieldName(row, column.property) | date:'dd/MM/yyyy':'UTC' }}\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'netAmount'\">\n <span class=\"mobile-card__amount-currency\">{{ row[column.currency] }}</span>\n <span class=\"mobile-card__amount-value\">{{ extractFieldName(row, column.property) | currency:'':'' }}</span>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'localDateTime'\">\n {{ extractFieldName(row, column.property) | date : extractFormat(column):'UTC' }}\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'bigdecimal'\">\n <small><sup class=\"mainTable__td__currency\">{{row[column.currency]}}</sup></small>\n {{ extractFieldName(row, column.property) | number : (column.digitInfo || '1.3-5') }}\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'list'\">\n <ul class=\"mainTable__td__list\">\n <li *ngFor=\"let item of getListItems(row, column.property)\">{{ item }}</li>\n </ul>\n </ng-container>\n\n <ng-container *ngSwitchDefault>\n <ng-container *ngIf=\"column.translate; else noTranslate\">\n <span>{{ pageInfo.labelsSection + \".\" + extractFieldName(row, column.property) | translate }}</span>\n </ng-container>\n <ng-template #noTranslate>\n <span [innerText]='extractFieldName(row, column.property)'></span>\n </ng-template>\n </ng-container>\n </ng-container>\n </div>\n </div>\n </div>\n\n <!-- Mobile Card Actions -->\n <div class=\"mobile-card__actions\" *ngIf=\"listAction && listAction.length > 0\">\n <app-button-actions\n [row]=\"row\"\n [buttonsAction]=\"true\"\n [listAction]=\"listAction\"\n [actions]=\"listAction\"\n (clickedButton)=\"actionListClicked($event,row)\">\n </app-button-actions>\n </div>\n </div>\n </div>\n\n <div *ngIf=\"noDataFound\" class=\"dataNotFound flex-column\">\n <img *ngIf=\"getDisplaySvgPath()\" [src]=\"getDisplaySvgPath()\" class=\"dataNotFound__icon\" alt=\"No data found\" />\n <span class=\"dataNotFound__title\">{{ getDisplayTitle() | translate}}</span>\n <span class=\"dataNotFound__subtitle\">{{ getDisplaySubtitle() | translate}}</span>\n </div>\n\n\n <div *ngIf=\"(dataSource.data?.length > 0 || customizedData) && !pageInfo.hidePagination\" class=\"main-pagination flex-row\">\n <ng-container *ngIf=\"enablePagination\">\n <div class=\"flex-column flex-100\">\n <app-paginator\n [currentPage]=\"pageIndex\"\n [totalItems]=\"totalElements\"\n [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"[5, 10, 25, 50]\"\n [mobileLoadMoreIncrement]=\"mobileLoadMoreIncrement\"\n [displayedItems]=\"mobileDisplayedItems || dataSource.data.length\"\n (pageChange)=\"onPageChange($event)\"\n (pageSizeChange)=\"onPageSizeChange($event)\"\n (loadMore)=\"onLoadMore($event)\">\n </app-paginator>\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n</div>\n", styles: [":host{display:block;width:100%;max-width:100%;box-sizing:border-box;container-type:inline-size;container-name:base-table}.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}@container base-table (min-width: 769px) and (max-width: 900px){.filter-row{align-items:flex-end!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:not(:disabled){background:#fafafa!important}.btn-export:disabled,.btn-export.mat-mdc-button-disabled{opacity:.45;cursor:not-allowed;pointer-events:none}@container base-table (min-width: 769px) and (max-width: 900px){.filter-row .btn-export{margin-bottom:0!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}:host-context([dir=rtl]) .table-row,:host-context(body.rtl) .table-row{overflow:visible;align-items:center}:host-context([dir=rtl]) .table-cell:not(.actions-cell),:host-context(body.rtl) .table-cell:not(.actions-cell){overflow:visible;align-items:center;line-height:1.7;padding-top:10px;padding-bottom:10px}:host-context([dir=rtl]) .table-cell:not(.actions-cell) span,:host-context(body.rtl) .table-cell:not(.actions-cell) span{display:inline;overflow:visible;line-height:1.7;-webkit-line-clamp:unset;line-clamp:unset}.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}}.mainTable__td__list{margin:4px 0;padding:4px 8px 4px 1.25rem;list-style-type:disc}.mainTable__td__list li{word-break:break-word;line-height:1.35;padding:2px 0}.mainTable__td__list li+li{margin-top:2px}.table-cell:has(.mainTable__td__list){align-items:flex-start;padding-top:8px;padding-bottom:8px}.mobile-card__row-value:has(.mainTable__td__list){align-items:flex-start;padding:4px 0}\n"] }]
4073
4076
  }], ctorParameters: () => [{ type: BackendService }, { type: i2.TranslateService }, { type: ShareDataService }, { type: i4$2.BreakpointObserver }, { type: undefined, decorators: [{
4074
4077
  type: Inject,
4075
4078
  args: ['securityManager']
@@ -4236,7 +4239,7 @@ class AuditLogComponent {
4236
4239
  }, obj);
4237
4240
  }
4238
4241
  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 }); }
4239
- 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"] }] }); }
4242
+ 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\"><span dir=\"ltr\">{{ auditLog.createdOn | date: 'dd MMM, yyyy HH:mm a' }}</span></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;text-align:start}.log-timestamp span{direction:ltr;unicode-bidi:isolate}.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: "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: "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"] }] }); }
4240
4243
  }
4241
4244
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AuditLogComponent, decorators: [{
4242
4245
  type: Component,
@@ -4251,7 +4254,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
4251
4254
  MatExpansionPanelTitle,
4252
4255
  MatExpansionPanel,
4253
4256
  MatExpansionPanelHeader
4254
- ], 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"] }]
4257
+ ], 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\"><span dir=\"ltr\">{{ auditLog.createdOn | date: 'dd MMM, yyyy HH:mm a' }}</span></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;text-align:start}.log-timestamp span{direction:ltr;unicode-bidi:isolate}.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"] }]
4255
4258
  }], ctorParameters: () => [{ type: i1.MatDialog }, { type: i3$3.ActivatedRoute }, { type: i3$1.Directionality }, { type: undefined, decorators: [{
4256
4259
  type: Inject,
4257
4260
  args: ['securityManager']
@@ -6562,7 +6565,7 @@ class ActionCardComponent {
6562
6565
  this.buttonClick.emit();
6563
6566
  }
6564
6567
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ActionCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
6565
- 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\" \n [class.extended-variant]=\"variant === 'extended'\"\n [style.--top-border-gradient]=\"topBorderGradient || buttonGradient\" \n [style.--top-border-height]=\"topBorderHeight + 'px'\"\n [style.border-right-color]=\"borderRightColor || borderColor\" \n [style.border-bottom-color]=\"borderBottomColor || borderColor\" \n [style.border-left-color]=\"borderLeftColor || borderColor\">\n <div class=\"card-content\" [class.extended-content]=\"variant === 'extended'\">\n <div class=\"main-content\" [class.extended-main]=\"variant === 'extended'\">\n <div class=\"header-section\" [class.extended-header]=\"variant === 'extended'\">\n <div class=\"header-top-wrapper\" *ngIf=\"variant === 'default'\">\n <div class=\"icon-wrapper\" \n [style.color]=\"iconColor\"\n [style.width.px]=\"iconSize\"\n [style.height.px]=\"iconSize\">\n <img *ngIf=\"iconSvg\" [src]=\"iconSvg\" alt=\"\" class=\"icon-svg\" [style.width.px]=\"iconSize\" [style.height.px]=\"iconSize\" />\n <mat-icon *ngIf=\"!iconSvg && icon\" [style.font-size.px]=\"iconSize\" [style.width.px]=\"iconSize\" [style.height.px]=\"iconSize\">{{ icon }}</mat-icon>\n </div>\n <div class=\"header-top\">\n <h2 class=\"card-title\">\n <span *ngIf=\"titleKey\">{{ titleKey | translate }}</span>\n <span *ngIf=\"!titleKey\">{{ title }}</span>\n </h2>\n </div>\n </div>\n <div class=\"icon-wrapper\" \n *ngIf=\"variant === 'extended'\"\n [style.color]=\"iconColor\"\n [style.width.px]=\"iconSize\"\n [style.height.px]=\"iconSize\">\n <img *ngIf=\"iconSvg\" [src]=\"iconSvg\" alt=\"\" class=\"icon-svg\" [style.width.px]=\"iconSize\" [style.height.px]=\"iconSize\" />\n <mat-icon *ngIf=\"!iconSvg && icon\" [style.font-size.px]=\"iconSize\" [style.width.px]=\"iconSize\" [style.height.px]=\"iconSize\">{{ icon }}</mat-icon>\n </div>\n <div class=\"title-description-wrapper\" *ngIf=\"variant === 'extended'\">\n <h2 class=\"card-title\">\n <span *ngIf=\"titleKey\">{{ titleKey | translate }}</span>\n <span *ngIf=\"!titleKey\">{{ title }}</span>\n </h2>\n <p class=\"card-description\">\n <span *ngIf=\"descriptionKey\">{{ descriptionKey | translate }}</span>\n <span *ngIf=\"!descriptionKey\">{{ description }}</span>\n </p>\n </div>\n <p class=\"card-description\" *ngIf=\"variant === 'default'\">\n <span *ngIf=\"descriptionKey\">{{ descriptionKey | translate }}</span>\n <span *ngIf=\"!descriptionKey\">{{ description }}</span>\n </p>\n </div>\n <lib-action-button\n [buttonText]=\"buttonText\"\n [buttonTextKey]=\"buttonTextKey\"\n [buttonGradient]=\"buttonGradient\"\n (buttonClick)=\"onButtonClick()\">\n </lib-action-button>\n <div class=\"features-divider\" *ngIf=\"showDivider && features && features.length > 0\"></div>\n \n <div class=\"features-section\" *ngIf=\"features && features.length > 0\">\n <h3 class=\"features-heading\" *ngIf=\"featuresHeading || featuresHeadingKey\">\n <span *ngIf=\"featuresHeadingKey\">{{ featuresHeadingKey | translate }}</span>\n <span *ngIf=\"!featuresHeadingKey\">{{ featuresHeading }}</span>\n </h3>\n <div class=\"feature-item\" *ngFor=\"let feature of features\">\n <mat-icon class=\"feature-check-icon\" [style.color]=\"featureCheckIconColor || iconColor\">check_circle</mat-icon>\n <span class=\"feature-text\">\n <span *ngIf=\"feature.textKey\">{{ feature.textKey | translate }}</span>\n <span *ngIf=\"!feature.textKey\">{{ feature.text }}</span>\n </span>\n </div>\n </div>\n </div>\n <div class=\"decorative-icon-wrapper\" *ngIf=\"variant === 'default' && (icon || iconSvg)\">\n <div class=\"decorative-icon\">\n <img *ngIf=\"iconSvg\" [src]=\"iconSvg\" alt=\"\" class=\"decorative-icon-svg\" [style.filter]=\"'opacity(0.3)'\" />\n <mat-icon *ngIf=\"!iconSvg && icon\" [style.color]=\"decorativeIconColor\">{{ icon }}</mat-icon>\n </div>\n </div>\n </div>\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"] }] }); }
6568
+ 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\" \n [class.extended-variant]=\"variant === 'extended'\"\n [style.--top-border-gradient]=\"topBorderGradient || buttonGradient\" \n [style.--top-border-height]=\"topBorderHeight + 'px'\"\n [style.border-right-color]=\"borderRightColor || borderColor\" \n [style.border-bottom-color]=\"borderBottomColor || borderColor\" \n [style.border-left-color]=\"borderLeftColor || borderColor\">\n <div class=\"card-content\" [class.extended-content]=\"variant === 'extended'\">\n <div class=\"main-content\" [class.extended-main]=\"variant === 'extended'\">\n <div class=\"header-section\" [class.extended-header]=\"variant === 'extended'\">\n <div class=\"header-top-wrapper\" *ngIf=\"variant === 'default'\">\n <div class=\"icon-wrapper\" \n [style.color]=\"iconColor\"\n [style.width.px]=\"iconSize\"\n [style.height.px]=\"iconSize\">\n <img *ngIf=\"iconSvg\" [src]=\"iconSvg\" alt=\"\" class=\"icon-svg\" [style.width.px]=\"iconSize\" [style.height.px]=\"iconSize\" />\n <mat-icon *ngIf=\"!iconSvg && icon\" [style.font-size.px]=\"iconSize\" [style.width.px]=\"iconSize\" [style.height.px]=\"iconSize\">{{ icon }}</mat-icon>\n </div>\n <div class=\"header-top\">\n <h2 class=\"card-title\">\n <span *ngIf=\"titleKey\">{{ titleKey | translate }}</span>\n <span *ngIf=\"!titleKey\">{{ title }}</span>\n </h2>\n </div>\n </div>\n <div class=\"icon-wrapper\" \n *ngIf=\"variant === 'extended'\"\n [style.color]=\"iconColor\"\n [style.width.px]=\"iconSize\"\n [style.height.px]=\"iconSize\">\n <img *ngIf=\"iconSvg\" [src]=\"iconSvg\" alt=\"\" class=\"icon-svg\" [style.width.px]=\"iconSize\" [style.height.px]=\"iconSize\" />\n <mat-icon *ngIf=\"!iconSvg && icon\" [style.font-size.px]=\"iconSize\" [style.width.px]=\"iconSize\" [style.height.px]=\"iconSize\">{{ icon }}</mat-icon>\n </div>\n <div class=\"title-description-wrapper\" *ngIf=\"variant === 'extended'\">\n <h2 class=\"card-title\">\n <span *ngIf=\"titleKey\">{{ titleKey | translate }}</span>\n <span *ngIf=\"!titleKey\">{{ title }}</span>\n </h2>\n <p class=\"card-description\">\n <span *ngIf=\"descriptionKey\">{{ descriptionKey | translate }}</span>\n <span *ngIf=\"!descriptionKey\">{{ description }}</span>\n </p>\n </div>\n <p class=\"card-description\" *ngIf=\"variant === 'default'\">\n <span *ngIf=\"descriptionKey\">{{ descriptionKey | translate }}</span>\n <span *ngIf=\"!descriptionKey\">{{ description }}</span>\n </p>\n </div>\n <lib-action-button\n [buttonText]=\"buttonText\"\n [buttonTextKey]=\"buttonTextKey\"\n [buttonGradient]=\"buttonGradient\"\n (buttonClick)=\"onButtonClick()\">\n </lib-action-button>\n <div class=\"features-divider\" *ngIf=\"showDivider && features && features.length > 0\"></div>\n \n <div class=\"features-section\" *ngIf=\"features && features.length > 0\">\n <h3 class=\"features-heading\" *ngIf=\"featuresHeading || featuresHeadingKey\">\n <span *ngIf=\"featuresHeadingKey\">{{ featuresHeadingKey | translate }}</span>\n <span *ngIf=\"!featuresHeadingKey\">{{ featuresHeading }}</span>\n </h3>\n <div class=\"feature-item\" *ngFor=\"let feature of features\">\n <mat-icon class=\"feature-check-icon\" [style.color]=\"featureCheckIconColor || iconColor\">check_circle</mat-icon>\n <span class=\"feature-text\">\n <span *ngIf=\"feature.textKey\">{{ feature.textKey | translate }}</span>\n <span *ngIf=\"!feature.textKey\">{{ feature.text }}</span>\n </span>\n </div>\n </div>\n </div>\n <div class=\"decorative-icon-wrapper\" *ngIf=\"variant === 'default' && (icon || iconSvg)\">\n <div class=\"decorative-icon\">\n <img *ngIf=\"iconSvg\" [src]=\"iconSvg\" alt=\"\" class=\"decorative-icon-svg\" [style.filter]=\"'opacity(0.3)'\" />\n <mat-icon *ngIf=\"!iconSvg && icon\" [style.color]=\"decorativeIconColor\">{{ icon }}</mat-icon>\n </div>\n </div>\n </div>\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:center;width:100%}.header-top{display:flex;gap:8px;align-items:center;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:center;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"] }] }); }
6566
6569
  }
6567
6570
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ActionCardComponent, decorators: [{
6568
6571
  type: Component,
@@ -6571,7 +6574,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
6571
6574
  MatIconModule,
6572
6575
  TranslateModule,
6573
6576
  ActionButtonComponent
6574
- ], template: "<div class=\"action-card\" \n [class.extended-variant]=\"variant === 'extended'\"\n [style.--top-border-gradient]=\"topBorderGradient || buttonGradient\" \n [style.--top-border-height]=\"topBorderHeight + 'px'\"\n [style.border-right-color]=\"borderRightColor || borderColor\" \n [style.border-bottom-color]=\"borderBottomColor || borderColor\" \n [style.border-left-color]=\"borderLeftColor || borderColor\">\n <div class=\"card-content\" [class.extended-content]=\"variant === 'extended'\">\n <div class=\"main-content\" [class.extended-main]=\"variant === 'extended'\">\n <div class=\"header-section\" [class.extended-header]=\"variant === 'extended'\">\n <div class=\"header-top-wrapper\" *ngIf=\"variant === 'default'\">\n <div class=\"icon-wrapper\" \n [style.color]=\"iconColor\"\n [style.width.px]=\"iconSize\"\n [style.height.px]=\"iconSize\">\n <img *ngIf=\"iconSvg\" [src]=\"iconSvg\" alt=\"\" class=\"icon-svg\" [style.width.px]=\"iconSize\" [style.height.px]=\"iconSize\" />\n <mat-icon *ngIf=\"!iconSvg && icon\" [style.font-size.px]=\"iconSize\" [style.width.px]=\"iconSize\" [style.height.px]=\"iconSize\">{{ icon }}</mat-icon>\n </div>\n <div class=\"header-top\">\n <h2 class=\"card-title\">\n <span *ngIf=\"titleKey\">{{ titleKey | translate }}</span>\n <span *ngIf=\"!titleKey\">{{ title }}</span>\n </h2>\n </div>\n </div>\n <div class=\"icon-wrapper\" \n *ngIf=\"variant === 'extended'\"\n [style.color]=\"iconColor\"\n [style.width.px]=\"iconSize\"\n [style.height.px]=\"iconSize\">\n <img *ngIf=\"iconSvg\" [src]=\"iconSvg\" alt=\"\" class=\"icon-svg\" [style.width.px]=\"iconSize\" [style.height.px]=\"iconSize\" />\n <mat-icon *ngIf=\"!iconSvg && icon\" [style.font-size.px]=\"iconSize\" [style.width.px]=\"iconSize\" [style.height.px]=\"iconSize\">{{ icon }}</mat-icon>\n </div>\n <div class=\"title-description-wrapper\" *ngIf=\"variant === 'extended'\">\n <h2 class=\"card-title\">\n <span *ngIf=\"titleKey\">{{ titleKey | translate }}</span>\n <span *ngIf=\"!titleKey\">{{ title }}</span>\n </h2>\n <p class=\"card-description\">\n <span *ngIf=\"descriptionKey\">{{ descriptionKey | translate }}</span>\n <span *ngIf=\"!descriptionKey\">{{ description }}</span>\n </p>\n </div>\n <p class=\"card-description\" *ngIf=\"variant === 'default'\">\n <span *ngIf=\"descriptionKey\">{{ descriptionKey | translate }}</span>\n <span *ngIf=\"!descriptionKey\">{{ description }}</span>\n </p>\n </div>\n <lib-action-button\n [buttonText]=\"buttonText\"\n [buttonTextKey]=\"buttonTextKey\"\n [buttonGradient]=\"buttonGradient\"\n (buttonClick)=\"onButtonClick()\">\n </lib-action-button>\n <div class=\"features-divider\" *ngIf=\"showDivider && features && features.length > 0\"></div>\n \n <div class=\"features-section\" *ngIf=\"features && features.length > 0\">\n <h3 class=\"features-heading\" *ngIf=\"featuresHeading || featuresHeadingKey\">\n <span *ngIf=\"featuresHeadingKey\">{{ featuresHeadingKey | translate }}</span>\n <span *ngIf=\"!featuresHeadingKey\">{{ featuresHeading }}</span>\n </h3>\n <div class=\"feature-item\" *ngFor=\"let feature of features\">\n <mat-icon class=\"feature-check-icon\" [style.color]=\"featureCheckIconColor || iconColor\">check_circle</mat-icon>\n <span class=\"feature-text\">\n <span *ngIf=\"feature.textKey\">{{ feature.textKey | translate }}</span>\n <span *ngIf=\"!feature.textKey\">{{ feature.text }}</span>\n </span>\n </div>\n </div>\n </div>\n <div class=\"decorative-icon-wrapper\" *ngIf=\"variant === 'default' && (icon || iconSvg)\">\n <div class=\"decorative-icon\">\n <img *ngIf=\"iconSvg\" [src]=\"iconSvg\" alt=\"\" class=\"decorative-icon-svg\" [style.filter]=\"'opacity(0.3)'\" />\n <mat-icon *ngIf=\"!iconSvg && icon\" [style.color]=\"decorativeIconColor\">{{ icon }}</mat-icon>\n </div>\n </div>\n </div>\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"] }]
6577
+ ], template: "<div class=\"action-card\" \n [class.extended-variant]=\"variant === 'extended'\"\n [style.--top-border-gradient]=\"topBorderGradient || buttonGradient\" \n [style.--top-border-height]=\"topBorderHeight + 'px'\"\n [style.border-right-color]=\"borderRightColor || borderColor\" \n [style.border-bottom-color]=\"borderBottomColor || borderColor\" \n [style.border-left-color]=\"borderLeftColor || borderColor\">\n <div class=\"card-content\" [class.extended-content]=\"variant === 'extended'\">\n <div class=\"main-content\" [class.extended-main]=\"variant === 'extended'\">\n <div class=\"header-section\" [class.extended-header]=\"variant === 'extended'\">\n <div class=\"header-top-wrapper\" *ngIf=\"variant === 'default'\">\n <div class=\"icon-wrapper\" \n [style.color]=\"iconColor\"\n [style.width.px]=\"iconSize\"\n [style.height.px]=\"iconSize\">\n <img *ngIf=\"iconSvg\" [src]=\"iconSvg\" alt=\"\" class=\"icon-svg\" [style.width.px]=\"iconSize\" [style.height.px]=\"iconSize\" />\n <mat-icon *ngIf=\"!iconSvg && icon\" [style.font-size.px]=\"iconSize\" [style.width.px]=\"iconSize\" [style.height.px]=\"iconSize\">{{ icon }}</mat-icon>\n </div>\n <div class=\"header-top\">\n <h2 class=\"card-title\">\n <span *ngIf=\"titleKey\">{{ titleKey | translate }}</span>\n <span *ngIf=\"!titleKey\">{{ title }}</span>\n </h2>\n </div>\n </div>\n <div class=\"icon-wrapper\" \n *ngIf=\"variant === 'extended'\"\n [style.color]=\"iconColor\"\n [style.width.px]=\"iconSize\"\n [style.height.px]=\"iconSize\">\n <img *ngIf=\"iconSvg\" [src]=\"iconSvg\" alt=\"\" class=\"icon-svg\" [style.width.px]=\"iconSize\" [style.height.px]=\"iconSize\" />\n <mat-icon *ngIf=\"!iconSvg && icon\" [style.font-size.px]=\"iconSize\" [style.width.px]=\"iconSize\" [style.height.px]=\"iconSize\">{{ icon }}</mat-icon>\n </div>\n <div class=\"title-description-wrapper\" *ngIf=\"variant === 'extended'\">\n <h2 class=\"card-title\">\n <span *ngIf=\"titleKey\">{{ titleKey | translate }}</span>\n <span *ngIf=\"!titleKey\">{{ title }}</span>\n </h2>\n <p class=\"card-description\">\n <span *ngIf=\"descriptionKey\">{{ descriptionKey | translate }}</span>\n <span *ngIf=\"!descriptionKey\">{{ description }}</span>\n </p>\n </div>\n <p class=\"card-description\" *ngIf=\"variant === 'default'\">\n <span *ngIf=\"descriptionKey\">{{ descriptionKey | translate }}</span>\n <span *ngIf=\"!descriptionKey\">{{ description }}</span>\n </p>\n </div>\n <lib-action-button\n [buttonText]=\"buttonText\"\n [buttonTextKey]=\"buttonTextKey\"\n [buttonGradient]=\"buttonGradient\"\n (buttonClick)=\"onButtonClick()\">\n </lib-action-button>\n <div class=\"features-divider\" *ngIf=\"showDivider && features && features.length > 0\"></div>\n \n <div class=\"features-section\" *ngIf=\"features && features.length > 0\">\n <h3 class=\"features-heading\" *ngIf=\"featuresHeading || featuresHeadingKey\">\n <span *ngIf=\"featuresHeadingKey\">{{ featuresHeadingKey | translate }}</span>\n <span *ngIf=\"!featuresHeadingKey\">{{ featuresHeading }}</span>\n </h3>\n <div class=\"feature-item\" *ngFor=\"let feature of features\">\n <mat-icon class=\"feature-check-icon\" [style.color]=\"featureCheckIconColor || iconColor\">check_circle</mat-icon>\n <span class=\"feature-text\">\n <span *ngIf=\"feature.textKey\">{{ feature.textKey | translate }}</span>\n <span *ngIf=\"!feature.textKey\">{{ feature.text }}</span>\n </span>\n </div>\n </div>\n </div>\n <div class=\"decorative-icon-wrapper\" *ngIf=\"variant === 'default' && (icon || iconSvg)\">\n <div class=\"decorative-icon\">\n <img *ngIf=\"iconSvg\" [src]=\"iconSvg\" alt=\"\" class=\"decorative-icon-svg\" [style.filter]=\"'opacity(0.3)'\" />\n <mat-icon *ngIf=\"!iconSvg && icon\" [style.color]=\"decorativeIconColor\">{{ icon }}</mat-icon>\n </div>\n </div>\n </div>\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:center;width:100%}.header-top{display:flex;gap:8px;align-items:center;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:center;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"] }]
6575
6578
  }], propDecorators: { icon: [{
6576
6579
  type: Input
6577
6580
  }], iconSvg: [{