@unifylib/ui-lib 1.0.69 → 1.0.71
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/components/action-comment/action-comment.component.mjs +3 -3
- package/esm2022/lib/components/base-form-canvas/base-form-canvas.component.mjs +3 -3
- package/esm2022/lib/components/base-table/base-table.component.mjs +3 -11
- package/esm2022/lib/components/section-form-canvas/section-form-canvas.component.mjs +11 -3
- package/esm2022/lib/components/snackbar-static/snackbar-static.component.mjs +2 -2
- package/esm2022/lib/components/title-bar/title-bar.component.mjs +3 -3
- package/fesm2022/iq-ui-lib.mjs +18 -18
- package/fesm2022/iq-ui-lib.mjs.map +1 -1
- package/fesm2022/unifylib-ui-lib.mjs +20 -20
- package/fesm2022/unifylib-ui-lib.mjs.map +1 -1
- package/lib/components/base-table/base-table.component.d.ts +0 -1
- package/lib/components/section-form-canvas/section-form-canvas.component.d.ts +3 -1
- package/package.json +1 -1
|
@@ -178,7 +178,7 @@ class ActionCommentComponent {
|
|
|
178
178
|
this.dialogRef.close();
|
|
179
179
|
}
|
|
180
180
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ActionCommentComponent, deps: [{ token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i2.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
181
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ActionCommentComponent, isStandalone: true, selector: "app-action-comment", host: { listeners: { "window:keyup.esc": "onKeyUp()" } }, ngImport: i0, template: "<div class=\"dialog-container\" [dir]=\"currentDirection\">\r\n\r\n <div class=\"desktop-view\">\r\n <h2 mat-dialog-title class=\"dialog-title\">\r\n {{ titleKey | translate}} {{itemName}}\r\n </h2>\r\n\r\n <p class=\"dialog-subtitle\">\r\n {{ subtitleKey | translate }}\r\n </p>\r\n\r\n <mat-dialog-content class=\"content-section\">\r\n\r\n <ng-container *ngIf=\"data?.options?.length; else textMode\">\r\n\r\n <mat-form-field appearance=\"outline\" class=\"w-100\">\r\n <mat-select\r\n [(ngModel)]=\"comment\"\r\n [placeholder]=\"placeholderKey | translate\">\r\n\r\n <mat-option *ngFor=\"let item of data.options\" [value]=\"item\">\r\n {{ data.translate ? (item | translate) : item }}\r\n </mat-option>\r\n\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <mat-form-field\r\n *ngIf=\"comment === 'OTHER'\"\r\n appearance=\"outline\"\r\n class=\"w-100\">\r\n <textarea\r\n matInput\r\n [(ngModel)]=\"otherComment\"\r\n [placeholder]=\"placeholderKey | translate\"\r\n cdkTextareaAutosize\r\n cdkAutosizeMinRows=\"4\"\r\n maxlength=\"1000\"\r\n cdkAutosizeMaxRows=\"5\">\r\n </textarea>\r\n </mat-form-field>\r\n\r\n </ng-container>\r\n\r\n <ng-template #textMode>\r\n <mat-form-field appearance=\"outline\" class=\"w-100\">\r\n <mat-label>{{ reasonLabelKey | translate }}</mat-label>\r\n <textarea\r\n matInput\r\n [(ngModel)]=\"comment\"\r\n [placeholder]=\"placeholderKey | translate\"\r\n cdkTextareaAutosize\r\n cdkAutosizeMinRows=\"4\"\r\n maxlength=\"1000\"\r\n cdkAutosizeMaxRows=\"5\">\r\n </textarea>\r\n </mat-form-field>\r\n </ng-template>\r\n\r\n <div class=\"info-box\">\r\n <mat-icon>info</mat-icon>\r\n <span class=\"info-text\">\r\n {{ warningKey | translate }}\r\n </span>\r\n </div>\r\n\r\n </mat-dialog-content>\r\n\r\n <mat-dialog-actions align=\"end\" class=\"footer-actions\">\r\n <button mat-stroked-button class=\"btn-none-background-primary cancel-btn\" (click)=\"cancel()\">\r\n {{ cancelKey | translate }}\r\n </button>\r\n\r\n <button\r\n mat-flat-button\r\n class=\"btn-background-primary warn-btn\"\r\n (click)=\"commentAndClose()\"\r\n [disabled]=\"!comment || (comment === 'OTHER' && !otherComment)\">\r\n {{ actionKey | translate }}\r\n </button>\r\n </mat-dialog-actions>\r\n </div>\r\n\r\n <div class=\"mobile-view\">\r\n <div class=\"modal-header\">\r\n <div class=\"handle\"></div>\r\n <div class=\"header-content\">\r\n <p class=\"modal-title\">{{ titleKey | translate }}</p>\r\n <button class=\"close-button\" (click)=\"cancel()\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"modal-body\">\r\n\r\n <ng-container *ngIf=\"data?.options?.length; else mobileText\">\r\n\r\n <mat-form-field appearance=\"outline\" class=\"textarea-field-mobile\">\r\n <mat-label>{{ reasonLabelKey | translate }} {{ itemName }}</mat-label>\r\n <mat-select\r\n [(ngModel)]=\"comment\"\r\n class=\"textarea-mobile\">\r\n\r\n <mat-option *ngFor=\"let item of data.options\" [value]=\"item\">\r\n {{ data.translate ? ( item | translate) : item }}\r\n </mat-option>\r\n\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <mat-form-field\r\n *ngIf=\"comment === 'OTHER'\"\r\n appearance=\"outline\"\r\n class=\"textarea-field-mobile\">\r\n <mat-label>{{ placeholderKey | translate }}</mat-label>\r\n <textarea\r\n matInput\r\n [(ngModel)]=\"otherComment\"\r\n [placeholder]=\"placeholderKey | translate\"\r\n cdkTextareaAutosize\r\n cdkAutosizeMinRows=\"4\"\r\n cdkAutosizeMaxRows=\"5\"\r\n maxlength=\"1000\"\r\n class=\"textarea-mobile\">\r\n </textarea>\r\n </mat-form-field>\r\n\r\n </ng-container>\r\n\r\n <ng-template #mobileText>\r\n <mat-form-field appearance=\"outline\" class=\"textarea-field-mobile\">\r\n <mat-label>{{ reasonLabelKey | translate }} {{ itemName }}</mat-label>\r\n <textarea\r\n matInput\r\n [(ngModel)]=\"comment\"\r\n [placeholder]=\"placeholderKey | translate\"\r\n cdkTextareaAutosize\r\n cdkAutosizeMinRows=\"4\"\r\n cdkAutosizeMaxRows=\"5\"\r\n maxlength=\"1000\"\r\n class=\"textarea-mobile\">\r\n </textarea>\r\n </mat-form-field>\r\n </ng-template>\r\n\r\n <div class=\"info-box-mobile\">\r\n <mat-icon class=\"info-icon-mobile\">info</mat-icon>\r\n <span class=\"info-text-mobile\">\r\n {{ warningKey | translate }}\r\n </span>\r\n </div>\r\n\r\n </div>\r\n\r\n <div class=\"modal-actions-mobile\">\r\n <div class=\"actions-buttons-container\">\r\n <button mat-stroked-button class=\"btn-cancel-mobile\" (click)=\"cancel()\">\r\n {{ cancelKey | translate }}\r\n </button>\r\n <button\r\n mat-flat-button\r\n class=\"btn-action-mobile\"\r\n (click)=\"commentAndClose()\"\r\n [disabled]=\"!comment || (comment === 'OTHER' && !otherComment)\">\r\n {{ actionKey | translate }}\r\n </button>\r\n </div>\r\n <div class=\"home-indicator\"></div>\r\n </div>\r\n </div>\r\n\r\n</div>\r\n", styles: [".dialog-container{position:relative}.desktop-view{display:block}.mobile-view{display:none}.dialog-title{font-size:20px;font-weight:600;padding:0 16px}.dialog-subtitle{color:#666;padding:0 20px}.textarea-label{font-weight:600;padding:5px 20px;margin:0;color:#000}.info-text{color:#888;font-family:Lusail,sans-serif;font-size:16px;font-style:normal;font-weight:400;line-height:120%}.info-box{display:flex;font-size:12px}.info-box mat-icon{font-size:18px;color:var(--primary-color-3nd)}.footer-actions{margin-top:0}.cancel-btn{width:121px!important}.warn-btn{width:171px!important}.content-section{padding:0 20px}.mobile-view{display:flex;flex-direction:column;gap:8px;background:#fff;padding:16px 24px;min-height:356px;box-sizing:border-box}.modal-header{display:flex;flex-direction:column;gap:8px;width:100%}.handle{width:36px;height:4px;background:#b7b7b7;border-radius:2px;margin:0 auto;flex-shrink:0}.header-content{display:flex;align-items:center;justify-content:space-between;width:100%;position:relative}.modal-title{font-family:Lusail,sans-serif;font-weight:500;font-size:14px;line-height:1.2;color:#161616;text-align:center;position:absolute;left:50%;transform:translate(-50%);margin:0;width:200px}.close-button{background:#f0eeee;border:none;border-radius:9999px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:8px;margin-left:auto;flex-shrink:0}.close-button mat-icon{font-size:20px;width:20px;height:20px;color:#000;overflow:visible}.close-button:hover{background:#e0e0e0}.modal-body{display:flex;flex-direction:column;gap:8px;width:100%;flex:1;min-height:0}.textarea-label-mobile{font-family:Lusail,sans-serif;font-weight:500;font-size:16px;line-height:1.2;color:#000;height:24px;max-height:24px;margin:0;padding:0}.textarea-field-mobile{width:100%;margin:0!important}:host ::ng-deep .textarea-field-mobile .mat-mdc-form-field-infix{min-height:107px;padding:16px!important}:host ::ng-deep .textarea-field-mobile .mat-mdc-form-field-outline{border:1px solid #b7b7b7!important;border-radius:8px!important}:host ::ng-deep .textarea-field-mobile textarea{font-family:Lusail,sans-serif;font-weight:300;font-size:16px;line-height:1.2;color:#888;resize:both}:host ::ng-deep .textarea-field-mobile textarea::placeholder{color:#888;font-weight:300;font-size:16px;line-height:1.2}.info-box-mobile{display:flex;gap:8px;align-items:flex-end;width:100%}.info-box-mobile .info-icon-mobile{font-size:18px;width:18px;height:20px;color:#b54708;flex-shrink:0;margin-top:2px}.info-box-mobile .info-text-mobile{font-family:Lusail,sans-serif;font-weight:300;font-size:16px;line-height:1;color:#5c5c5c;flex:1}.modal-actions-mobile{display:flex;flex-direction:column;gap:0;align-items:center;justify-content:center;width:100%;min-height:68px;position:relative}.actions-buttons-container{display:flex;gap:8px;align-items:center;justify-content:center;width:100%;margin-bottom:0;flex-shrink:0}.modal-actions-mobile>.actions-buttons-container>button{margin:0!important}.btn-cancel-mobile{width:160px!important;height:44px!important;border:1px solid #3e627b!important;border-radius:8px!important;background:#fff!important;font-family:Lusail,sans-serif;font-weight:500;font-size:16px;line-height:1.2;color:#0d4261!important}.btn-action-mobile{flex:1 1 0!important;min-width:0!important;height:44px!important;border-radius:8px!important;background:#0d4261!important;font-family:Lusail,sans-serif;font-weight:500;font-size:16px;line-height:1.2;color:#fff!important}.home-indicator{width:134px;height:5px;background:#161616;border-radius:100px;position:absolute;bottom:0;left:50%;transform:translate(-50%)}@media (max-width: 768px){.desktop-view{display:none!important}.mobile-view{display:flex!important}}:host ::ng-deep .mat-mdc-dialog-container{padding:0!important}@media (max-width: 768px){:host ::ng-deep .mat-mdc-dialog-container{max-width:100vw!important;width:100vw!important;margin:0!important;position:fixed!important;inset:auto 0 0!important;border-radius:0!important;max-height:90vh!important}:host ::ng-deep .cdk-overlay-backdrop{background-color:#00000080!important}}@media (min-width: 769px){.desktop-view{display:block!important}.mobile-view{display:none!important}}@media (max-width: 600px){::ng-deep cdk-global-overlay-wrapper{align-items:flex-end!important}}\n"], dependencies: [{ kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
|
181
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ActionCommentComponent, isStandalone: true, selector: "app-action-comment", host: { listeners: { "window:keyup.esc": "onKeyUp()" } }, ngImport: i0, template: "<div class=\"dialog-container\" [dir]=\"currentDirection\">\r\n\r\n <div class=\"desktop-view\">\r\n <h2 mat-dialog-title class=\"dialog-title\">\r\n {{ titleKey | translate}} {{itemName}}\r\n </h2>\r\n\r\n <p class=\"dialog-subtitle\">\r\n {{ subtitleKey | translate }}\r\n </p>\r\n\r\n <mat-dialog-content class=\"content-section\">\r\n\r\n <ng-container *ngIf=\"data?.options?.length; else textMode\">\r\n\r\n <mat-form-field appearance=\"outline\" class=\"w-100\">\r\n <mat-select\r\n [(ngModel)]=\"comment\"\r\n [placeholder]=\"placeholderKey | translate\">\r\n\r\n <mat-option *ngFor=\"let item of data.options\" [value]=\"item\">\r\n {{ data.translate ? (item | translate) : item }}\r\n </mat-option>\r\n\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <mat-form-field\r\n *ngIf=\"comment === 'OTHER'\"\r\n appearance=\"outline\"\r\n class=\"w-100\">\r\n <textarea\r\n matInput\r\n [(ngModel)]=\"otherComment\"\r\n [placeholder]=\"placeholderKey | translate\"\r\n cdkTextareaAutosize\r\n cdkAutosizeMinRows=\"4\"\r\n maxlength=\"1000\"\r\n cdkAutosizeMaxRows=\"5\">\r\n </textarea>\r\n </mat-form-field>\r\n\r\n </ng-container>\r\n\r\n <ng-template #textMode>\r\n <mat-form-field appearance=\"outline\" class=\"w-100\">\r\n <mat-label>{{ reasonLabelKey | translate }}</mat-label>\r\n <textarea\r\n matInput\r\n [(ngModel)]=\"comment\"\r\n [placeholder]=\"placeholderKey | translate\"\r\n cdkTextareaAutosize\r\n cdkAutosizeMinRows=\"4\"\r\n maxlength=\"1000\"\r\n cdkAutosizeMaxRows=\"5\">\r\n </textarea>\r\n </mat-form-field>\r\n </ng-template>\r\n\r\n <div class=\"info-box\">\r\n <mat-icon>info</mat-icon>\r\n <span class=\"info-text\">\r\n {{ warningKey | translate }}\r\n </span>\r\n </div>\r\n\r\n </mat-dialog-content>\r\n\r\n <mat-dialog-actions align=\"end\" class=\"footer-actions\">\r\n <button mat-stroked-button class=\"btn-none-background-primary cancel-btn\" (click)=\"cancel()\">\r\n {{ cancelKey | translate }}\r\n </button>\r\n\r\n <button\r\n mat-flat-button\r\n class=\"btn-background-primary warn-btn\"\r\n (click)=\"commentAndClose()\"\r\n [disabled]=\"!comment || (comment === 'OTHER' && !otherComment)\">\r\n {{ actionKey | translate }}\r\n </button>\r\n </mat-dialog-actions>\r\n </div>\r\n\r\n <div class=\"mobile-view\">\r\n <div class=\"modal-header\">\r\n <div class=\"handle\"></div>\r\n <div class=\"header-content\">\r\n <p class=\"modal-title\">{{ titleKey | translate }}</p>\r\n <button class=\"close-button\" (click)=\"cancel()\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"modal-body\">\r\n\r\n <ng-container *ngIf=\"data?.options?.length; else mobileText\">\r\n\r\n <mat-form-field appearance=\"outline\" class=\"textarea-field-mobile\">\r\n <mat-select\r\n [(ngModel)]=\"comment\"\r\n [placeholder]=\"placeholderKey | translate\"\r\n class=\"textarea-mobile\">\r\n\r\n <mat-option *ngFor=\"let item of data.options\" [value]=\"item\">\r\n {{ data.translate ? ( item | translate) : item }}\r\n </mat-option>\r\n\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <mat-form-field\r\n *ngIf=\"comment === 'OTHER'\"\r\n appearance=\"outline\"\r\n class=\"textarea-field-mobile\">\r\n <mat-label>{{ placeholderKey | translate }}</mat-label>\r\n <textarea\r\n matInput\r\n [(ngModel)]=\"otherComment\"\r\n [placeholder]=\"placeholderKey | translate\"\r\n cdkTextareaAutosize\r\n cdkAutosizeMinRows=\"4\"\r\n cdkAutosizeMaxRows=\"5\"\r\n maxlength=\"1000\"\r\n class=\"textarea-mobile\">\r\n </textarea>\r\n </mat-form-field>\r\n\r\n </ng-container>\r\n\r\n <ng-template #mobileText>\r\n <mat-form-field appearance=\"outline\" class=\"textarea-field-mobile\">\r\n <mat-label>{{ reasonLabelKey | translate }} {{ itemName }}</mat-label>\r\n <textarea\r\n matInput\r\n [(ngModel)]=\"comment\"\r\n [placeholder]=\"placeholderKey | translate\"\r\n cdkTextareaAutosize\r\n cdkAutosizeMinRows=\"4\"\r\n cdkAutosizeMaxRows=\"5\"\r\n maxlength=\"1000\"\r\n class=\"textarea-mobile\">\r\n </textarea>\r\n </mat-form-field>\r\n </ng-template>\r\n\r\n <div class=\"info-box-mobile\">\r\n <mat-icon class=\"info-icon-mobile\">info</mat-icon>\r\n <span class=\"info-text-mobile\">\r\n {{ warningKey | translate }}\r\n </span>\r\n </div>\r\n\r\n </div>\r\n\r\n <div class=\"modal-actions-mobile\">\r\n <div class=\"actions-buttons-container\">\r\n <button mat-stroked-button class=\"btn-cancel-mobile\" (click)=\"cancel()\">\r\n {{ cancelKey | translate }}\r\n </button>\r\n <button\r\n mat-flat-button\r\n class=\"btn-action-mobile\"\r\n (click)=\"commentAndClose()\"\r\n [disabled]=\"!comment || (comment === 'OTHER' && !otherComment)\">\r\n {{ actionKey | translate }}\r\n </button>\r\n </div>\r\n <div class=\"home-indicator\"></div>\r\n </div>\r\n </div>\r\n\r\n</div>\r\n", styles: [".dialog-container{position:relative}.desktop-view{display:block}.mobile-view{display:none}.dialog-title{font-size:20px;font-weight:600;padding:0 16px}.dialog-subtitle{color:#666;padding:0 20px}.textarea-label{font-weight:600;padding:5px 20px;margin:0;color:#000}.info-text{color:#888;font-family:Lusail,sans-serif;font-size:16px;font-style:normal;font-weight:400;line-height:120%}.info-box{display:flex;font-size:12px}.info-box mat-icon{font-size:18px;color:var(--primary-color-3nd)}.footer-actions{margin-top:0}.cancel-btn{width:121px!important}.warn-btn{width:171px!important}.content-section{padding:0 20px}.mobile-view{display:flex;flex-direction:column;gap:8px;background:#fff;padding:16px 24px;min-height:356px;box-sizing:border-box}.modal-header{display:flex;flex-direction:column;gap:8px;width:100%}.handle{width:36px;height:4px;background:#b7b7b7;border-radius:2px;margin:0 auto;flex-shrink:0}.header-content{display:flex;align-items:center;justify-content:space-between;width:100%;position:relative}.modal-title{font-family:Lusail,sans-serif;font-weight:500;font-size:14px;line-height:1.2;color:#161616;text-align:center;position:absolute;left:50%;transform:translate(-50%);margin:0;width:200px}.close-button{background:#f0eeee;border:none;border-radius:9999px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:8px;margin-left:auto;flex-shrink:0}.close-button mat-icon{font-size:20px;width:20px;height:20px;color:#000;overflow:visible}.close-button:hover{background:#e0e0e0}.modal-body{display:flex;flex-direction:column;gap:8px;width:100%;flex:1;min-height:0}.textarea-label-mobile{font-family:Lusail,sans-serif;font-weight:500;font-size:16px;line-height:1.2;color:#000;height:24px;max-height:24px;margin:0;padding:0}.textarea-field-mobile{width:100%;margin:0!important}:host ::ng-deep .textarea-field-mobile .mat-mdc-form-field-infix{min-height:107px;padding:16px!important}:host ::ng-deep .textarea-field-mobile .mat-mdc-form-field-outline{border:1px solid #b7b7b7!important;border-radius:8px!important}:host ::ng-deep .textarea-field-mobile textarea{font-family:Lusail,sans-serif;font-weight:300;font-size:16px;line-height:1.2;color:#888;resize:both}:host ::ng-deep .textarea-field-mobile textarea::placeholder{color:#888;font-weight:300;font-size:16px;line-height:1.2}.info-box-mobile{display:flex;gap:8px;align-items:flex-end;width:100%}.info-box-mobile .info-icon-mobile{font-size:18px;width:18px;height:20px;color:#b54708;flex-shrink:0;margin-top:2px}.info-box-mobile .info-text-mobile{font-family:Lusail,sans-serif;font-weight:300;font-size:16px;line-height:1;color:#5c5c5c;flex:1}.modal-actions-mobile{display:flex;flex-direction:column;gap:0;align-items:center;justify-content:center;width:100%;min-height:68px;position:relative}.actions-buttons-container{display:flex;gap:8px;align-items:center;justify-content:center;width:100%;margin-bottom:0;flex-shrink:0}.modal-actions-mobile>.actions-buttons-container>button{margin:0!important}.btn-cancel-mobile{flex:.5!important;height:44px!important;border:1px solid #3e627b!important;border-radius:8px!important;background:#fff!important;font-family:Lusail,sans-serif;font-weight:500;font-size:16px;line-height:1.2;color:#0d4261!important}.btn-action-mobile{flex:1 1 0!important;min-width:0!important;height:44px!important;border-radius:8px!important;background:#0d4261!important;font-family:Lusail,sans-serif;font-weight:500;font-size:16px;line-height:1.2;color:#fff!important}.home-indicator{width:134px;height:5px;background:#161616;border-radius:100px;position:absolute;bottom:0;left:50%;transform:translate(-50%)}@media (max-width: 768px){.desktop-view{display:none!important}.mobile-view{display:flex!important}}:host ::ng-deep .mat-mdc-dialog-container{padding:0!important}@media (max-width: 768px){:host ::ng-deep .mat-mdc-dialog-container{max-width:100vw!important;width:100vw!important;margin:0!important;position:fixed!important;inset:auto 0 0!important;border-radius:0!important;max-height:90vh!important}:host ::ng-deep .cdk-overlay-backdrop{background-color:#00000080!important}}@media (min-width: 769px){.desktop-view{display:block!important}.mobile-view{display:none!important}}@media (max-width: 600px){::ng-deep cdk-global-overlay-wrapper{align-items:flex-end!important}}\n"], dependencies: [{ kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
|
182
182
|
}
|
|
183
183
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ActionCommentComponent, decorators: [{
|
|
184
184
|
type: Component,
|
|
@@ -198,7 +198,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
198
198
|
MatSelect,
|
|
199
199
|
NgForOf,
|
|
200
200
|
NgIf
|
|
201
|
-
], template: "<div class=\"dialog-container\" [dir]=\"currentDirection\">\r\n\r\n <div class=\"desktop-view\">\r\n <h2 mat-dialog-title class=\"dialog-title\">\r\n {{ titleKey | translate}} {{itemName}}\r\n </h2>\r\n\r\n <p class=\"dialog-subtitle\">\r\n {{ subtitleKey | translate }}\r\n </p>\r\n\r\n <mat-dialog-content class=\"content-section\">\r\n\r\n <ng-container *ngIf=\"data?.options?.length; else textMode\">\r\n\r\n <mat-form-field appearance=\"outline\" class=\"w-100\">\r\n <mat-select\r\n [(ngModel)]=\"comment\"\r\n [placeholder]=\"placeholderKey | translate\">\r\n\r\n <mat-option *ngFor=\"let item of data.options\" [value]=\"item\">\r\n {{ data.translate ? (item | translate) : item }}\r\n </mat-option>\r\n\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <mat-form-field\r\n *ngIf=\"comment === 'OTHER'\"\r\n appearance=\"outline\"\r\n class=\"w-100\">\r\n <textarea\r\n matInput\r\n [(ngModel)]=\"otherComment\"\r\n [placeholder]=\"placeholderKey | translate\"\r\n cdkTextareaAutosize\r\n cdkAutosizeMinRows=\"4\"\r\n maxlength=\"1000\"\r\n cdkAutosizeMaxRows=\"5\">\r\n </textarea>\r\n </mat-form-field>\r\n\r\n </ng-container>\r\n\r\n <ng-template #textMode>\r\n <mat-form-field appearance=\"outline\" class=\"w-100\">\r\n <mat-label>{{ reasonLabelKey | translate }}</mat-label>\r\n <textarea\r\n matInput\r\n [(ngModel)]=\"comment\"\r\n [placeholder]=\"placeholderKey | translate\"\r\n cdkTextareaAutosize\r\n cdkAutosizeMinRows=\"4\"\r\n maxlength=\"1000\"\r\n cdkAutosizeMaxRows=\"5\">\r\n </textarea>\r\n </mat-form-field>\r\n </ng-template>\r\n\r\n <div class=\"info-box\">\r\n <mat-icon>info</mat-icon>\r\n <span class=\"info-text\">\r\n {{ warningKey | translate }}\r\n </span>\r\n </div>\r\n\r\n </mat-dialog-content>\r\n\r\n <mat-dialog-actions align=\"end\" class=\"footer-actions\">\r\n <button mat-stroked-button class=\"btn-none-background-primary cancel-btn\" (click)=\"cancel()\">\r\n {{ cancelKey | translate }}\r\n </button>\r\n\r\n <button\r\n mat-flat-button\r\n class=\"btn-background-primary warn-btn\"\r\n (click)=\"commentAndClose()\"\r\n [disabled]=\"!comment || (comment === 'OTHER' && !otherComment)\">\r\n {{ actionKey | translate }}\r\n </button>\r\n </mat-dialog-actions>\r\n </div>\r\n\r\n <div class=\"mobile-view\">\r\n <div class=\"modal-header\">\r\n <div class=\"handle\"></div>\r\n <div class=\"header-content\">\r\n <p class=\"modal-title\">{{ titleKey | translate }}</p>\r\n <button class=\"close-button\" (click)=\"cancel()\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"modal-body\">\r\n\r\n <ng-container *ngIf=\"data?.options?.length; else mobileText\">\r\n\r\n <mat-form-field appearance=\"outline\" class=\"textarea-field-mobile\">\r\n <mat-label>{{ reasonLabelKey | translate }} {{ itemName }}</mat-label>\r\n <mat-select\r\n [(ngModel)]=\"comment\"\r\n class=\"textarea-mobile\">\r\n\r\n <mat-option *ngFor=\"let item of data.options\" [value]=\"item\">\r\n {{ data.translate ? ( item | translate) : item }}\r\n </mat-option>\r\n\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <mat-form-field\r\n *ngIf=\"comment === 'OTHER'\"\r\n appearance=\"outline\"\r\n class=\"textarea-field-mobile\">\r\n <mat-label>{{ placeholderKey | translate }}</mat-label>\r\n <textarea\r\n matInput\r\n [(ngModel)]=\"otherComment\"\r\n [placeholder]=\"placeholderKey | translate\"\r\n cdkTextareaAutosize\r\n cdkAutosizeMinRows=\"4\"\r\n cdkAutosizeMaxRows=\"5\"\r\n maxlength=\"1000\"\r\n class=\"textarea-mobile\">\r\n </textarea>\r\n </mat-form-field>\r\n\r\n </ng-container>\r\n\r\n <ng-template #mobileText>\r\n <mat-form-field appearance=\"outline\" class=\"textarea-field-mobile\">\r\n <mat-label>{{ reasonLabelKey | translate }} {{ itemName }}</mat-label>\r\n <textarea\r\n matInput\r\n [(ngModel)]=\"comment\"\r\n [placeholder]=\"placeholderKey | translate\"\r\n cdkTextareaAutosize\r\n cdkAutosizeMinRows=\"4\"\r\n cdkAutosizeMaxRows=\"5\"\r\n maxlength=\"1000\"\r\n class=\"textarea-mobile\">\r\n </textarea>\r\n </mat-form-field>\r\n </ng-template>\r\n\r\n <div class=\"info-box-mobile\">\r\n <mat-icon class=\"info-icon-mobile\">info</mat-icon>\r\n <span class=\"info-text-mobile\">\r\n {{ warningKey | translate }}\r\n </span>\r\n </div>\r\n\r\n </div>\r\n\r\n <div class=\"modal-actions-mobile\">\r\n <div class=\"actions-buttons-container\">\r\n <button mat-stroked-button class=\"btn-cancel-mobile\" (click)=\"cancel()\">\r\n {{ cancelKey | translate }}\r\n </button>\r\n <button\r\n mat-flat-button\r\n class=\"btn-action-mobile\"\r\n (click)=\"commentAndClose()\"\r\n [disabled]=\"!comment || (comment === 'OTHER' && !otherComment)\">\r\n {{ actionKey | translate }}\r\n </button>\r\n </div>\r\n <div class=\"home-indicator\"></div>\r\n </div>\r\n </div>\r\n\r\n</div>\r\n", styles: [".dialog-container{position:relative}.desktop-view{display:block}.mobile-view{display:none}.dialog-title{font-size:20px;font-weight:600;padding:0 16px}.dialog-subtitle{color:#666;padding:0 20px}.textarea-label{font-weight:600;padding:5px 20px;margin:0;color:#000}.info-text{color:#888;font-family:Lusail,sans-serif;font-size:16px;font-style:normal;font-weight:400;line-height:120%}.info-box{display:flex;font-size:12px}.info-box mat-icon{font-size:18px;color:var(--primary-color-3nd)}.footer-actions{margin-top:0}.cancel-btn{width:121px!important}.warn-btn{width:171px!important}.content-section{padding:0 20px}.mobile-view{display:flex;flex-direction:column;gap:8px;background:#fff;padding:16px 24px;min-height:356px;box-sizing:border-box}.modal-header{display:flex;flex-direction:column;gap:8px;width:100%}.handle{width:36px;height:4px;background:#b7b7b7;border-radius:2px;margin:0 auto;flex-shrink:0}.header-content{display:flex;align-items:center;justify-content:space-between;width:100%;position:relative}.modal-title{font-family:Lusail,sans-serif;font-weight:500;font-size:14px;line-height:1.2;color:#161616;text-align:center;position:absolute;left:50%;transform:translate(-50%);margin:0;width:200px}.close-button{background:#f0eeee;border:none;border-radius:9999px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:8px;margin-left:auto;flex-shrink:0}.close-button mat-icon{font-size:20px;width:20px;height:20px;color:#000;overflow:visible}.close-button:hover{background:#e0e0e0}.modal-body{display:flex;flex-direction:column;gap:8px;width:100%;flex:1;min-height:0}.textarea-label-mobile{font-family:Lusail,sans-serif;font-weight:500;font-size:16px;line-height:1.2;color:#000;height:24px;max-height:24px;margin:0;padding:0}.textarea-field-mobile{width:100%;margin:0!important}:host ::ng-deep .textarea-field-mobile .mat-mdc-form-field-infix{min-height:107px;padding:16px!important}:host ::ng-deep .textarea-field-mobile .mat-mdc-form-field-outline{border:1px solid #b7b7b7!important;border-radius:8px!important}:host ::ng-deep .textarea-field-mobile textarea{font-family:Lusail,sans-serif;font-weight:300;font-size:16px;line-height:1.2;color:#888;resize:both}:host ::ng-deep .textarea-field-mobile textarea::placeholder{color:#888;font-weight:300;font-size:16px;line-height:1.2}.info-box-mobile{display:flex;gap:8px;align-items:flex-end;width:100%}.info-box-mobile .info-icon-mobile{font-size:18px;width:18px;height:20px;color:#b54708;flex-shrink:0;margin-top:2px}.info-box-mobile .info-text-mobile{font-family:Lusail,sans-serif;font-weight:300;font-size:16px;line-height:1;color:#5c5c5c;flex:1}.modal-actions-mobile{display:flex;flex-direction:column;gap:0;align-items:center;justify-content:center;width:100%;min-height:68px;position:relative}.actions-buttons-container{display:flex;gap:8px;align-items:center;justify-content:center;width:100%;margin-bottom:0;flex-shrink:0}.modal-actions-mobile>.actions-buttons-container>button{margin:0!important}.btn-cancel-mobile{width:160px!important;height:44px!important;border:1px solid #3e627b!important;border-radius:8px!important;background:#fff!important;font-family:Lusail,sans-serif;font-weight:500;font-size:16px;line-height:1.2;color:#0d4261!important}.btn-action-mobile{flex:1 1 0!important;min-width:0!important;height:44px!important;border-radius:8px!important;background:#0d4261!important;font-family:Lusail,sans-serif;font-weight:500;font-size:16px;line-height:1.2;color:#fff!important}.home-indicator{width:134px;height:5px;background:#161616;border-radius:100px;position:absolute;bottom:0;left:50%;transform:translate(-50%)}@media (max-width: 768px){.desktop-view{display:none!important}.mobile-view{display:flex!important}}:host ::ng-deep .mat-mdc-dialog-container{padding:0!important}@media (max-width: 768px){:host ::ng-deep .mat-mdc-dialog-container{max-width:100vw!important;width:100vw!important;margin:0!important;position:fixed!important;inset:auto 0 0!important;border-radius:0!important;max-height:90vh!important}:host ::ng-deep .cdk-overlay-backdrop{background-color:#00000080!important}}@media (min-width: 769px){.desktop-view{display:block!important}.mobile-view{display:none!important}}@media (max-width: 600px){::ng-deep cdk-global-overlay-wrapper{align-items:flex-end!important}}\n"] }]
|
|
201
|
+
], template: "<div class=\"dialog-container\" [dir]=\"currentDirection\">\r\n\r\n <div class=\"desktop-view\">\r\n <h2 mat-dialog-title class=\"dialog-title\">\r\n {{ titleKey | translate}} {{itemName}}\r\n </h2>\r\n\r\n <p class=\"dialog-subtitle\">\r\n {{ subtitleKey | translate }}\r\n </p>\r\n\r\n <mat-dialog-content class=\"content-section\">\r\n\r\n <ng-container *ngIf=\"data?.options?.length; else textMode\">\r\n\r\n <mat-form-field appearance=\"outline\" class=\"w-100\">\r\n <mat-select\r\n [(ngModel)]=\"comment\"\r\n [placeholder]=\"placeholderKey | translate\">\r\n\r\n <mat-option *ngFor=\"let item of data.options\" [value]=\"item\">\r\n {{ data.translate ? (item | translate) : item }}\r\n </mat-option>\r\n\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <mat-form-field\r\n *ngIf=\"comment === 'OTHER'\"\r\n appearance=\"outline\"\r\n class=\"w-100\">\r\n <textarea\r\n matInput\r\n [(ngModel)]=\"otherComment\"\r\n [placeholder]=\"placeholderKey | translate\"\r\n cdkTextareaAutosize\r\n cdkAutosizeMinRows=\"4\"\r\n maxlength=\"1000\"\r\n cdkAutosizeMaxRows=\"5\">\r\n </textarea>\r\n </mat-form-field>\r\n\r\n </ng-container>\r\n\r\n <ng-template #textMode>\r\n <mat-form-field appearance=\"outline\" class=\"w-100\">\r\n <mat-label>{{ reasonLabelKey | translate }}</mat-label>\r\n <textarea\r\n matInput\r\n [(ngModel)]=\"comment\"\r\n [placeholder]=\"placeholderKey | translate\"\r\n cdkTextareaAutosize\r\n cdkAutosizeMinRows=\"4\"\r\n maxlength=\"1000\"\r\n cdkAutosizeMaxRows=\"5\">\r\n </textarea>\r\n </mat-form-field>\r\n </ng-template>\r\n\r\n <div class=\"info-box\">\r\n <mat-icon>info</mat-icon>\r\n <span class=\"info-text\">\r\n {{ warningKey | translate }}\r\n </span>\r\n </div>\r\n\r\n </mat-dialog-content>\r\n\r\n <mat-dialog-actions align=\"end\" class=\"footer-actions\">\r\n <button mat-stroked-button class=\"btn-none-background-primary cancel-btn\" (click)=\"cancel()\">\r\n {{ cancelKey | translate }}\r\n </button>\r\n\r\n <button\r\n mat-flat-button\r\n class=\"btn-background-primary warn-btn\"\r\n (click)=\"commentAndClose()\"\r\n [disabled]=\"!comment || (comment === 'OTHER' && !otherComment)\">\r\n {{ actionKey | translate }}\r\n </button>\r\n </mat-dialog-actions>\r\n </div>\r\n\r\n <div class=\"mobile-view\">\r\n <div class=\"modal-header\">\r\n <div class=\"handle\"></div>\r\n <div class=\"header-content\">\r\n <p class=\"modal-title\">{{ titleKey | translate }}</p>\r\n <button class=\"close-button\" (click)=\"cancel()\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"modal-body\">\r\n\r\n <ng-container *ngIf=\"data?.options?.length; else mobileText\">\r\n\r\n <mat-form-field appearance=\"outline\" class=\"textarea-field-mobile\">\r\n <mat-select\r\n [(ngModel)]=\"comment\"\r\n [placeholder]=\"placeholderKey | translate\"\r\n class=\"textarea-mobile\">\r\n\r\n <mat-option *ngFor=\"let item of data.options\" [value]=\"item\">\r\n {{ data.translate ? ( item | translate) : item }}\r\n </mat-option>\r\n\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <mat-form-field\r\n *ngIf=\"comment === 'OTHER'\"\r\n appearance=\"outline\"\r\n class=\"textarea-field-mobile\">\r\n <mat-label>{{ placeholderKey | translate }}</mat-label>\r\n <textarea\r\n matInput\r\n [(ngModel)]=\"otherComment\"\r\n [placeholder]=\"placeholderKey | translate\"\r\n cdkTextareaAutosize\r\n cdkAutosizeMinRows=\"4\"\r\n cdkAutosizeMaxRows=\"5\"\r\n maxlength=\"1000\"\r\n class=\"textarea-mobile\">\r\n </textarea>\r\n </mat-form-field>\r\n\r\n </ng-container>\r\n\r\n <ng-template #mobileText>\r\n <mat-form-field appearance=\"outline\" class=\"textarea-field-mobile\">\r\n <mat-label>{{ reasonLabelKey | translate }} {{ itemName }}</mat-label>\r\n <textarea\r\n matInput\r\n [(ngModel)]=\"comment\"\r\n [placeholder]=\"placeholderKey | translate\"\r\n cdkTextareaAutosize\r\n cdkAutosizeMinRows=\"4\"\r\n cdkAutosizeMaxRows=\"5\"\r\n maxlength=\"1000\"\r\n class=\"textarea-mobile\">\r\n </textarea>\r\n </mat-form-field>\r\n </ng-template>\r\n\r\n <div class=\"info-box-mobile\">\r\n <mat-icon class=\"info-icon-mobile\">info</mat-icon>\r\n <span class=\"info-text-mobile\">\r\n {{ warningKey | translate }}\r\n </span>\r\n </div>\r\n\r\n </div>\r\n\r\n <div class=\"modal-actions-mobile\">\r\n <div class=\"actions-buttons-container\">\r\n <button mat-stroked-button class=\"btn-cancel-mobile\" (click)=\"cancel()\">\r\n {{ cancelKey | translate }}\r\n </button>\r\n <button\r\n mat-flat-button\r\n class=\"btn-action-mobile\"\r\n (click)=\"commentAndClose()\"\r\n [disabled]=\"!comment || (comment === 'OTHER' && !otherComment)\">\r\n {{ actionKey | translate }}\r\n </button>\r\n </div>\r\n <div class=\"home-indicator\"></div>\r\n </div>\r\n </div>\r\n\r\n</div>\r\n", styles: [".dialog-container{position:relative}.desktop-view{display:block}.mobile-view{display:none}.dialog-title{font-size:20px;font-weight:600;padding:0 16px}.dialog-subtitle{color:#666;padding:0 20px}.textarea-label{font-weight:600;padding:5px 20px;margin:0;color:#000}.info-text{color:#888;font-family:Lusail,sans-serif;font-size:16px;font-style:normal;font-weight:400;line-height:120%}.info-box{display:flex;font-size:12px}.info-box mat-icon{font-size:18px;color:var(--primary-color-3nd)}.footer-actions{margin-top:0}.cancel-btn{width:121px!important}.warn-btn{width:171px!important}.content-section{padding:0 20px}.mobile-view{display:flex;flex-direction:column;gap:8px;background:#fff;padding:16px 24px;min-height:356px;box-sizing:border-box}.modal-header{display:flex;flex-direction:column;gap:8px;width:100%}.handle{width:36px;height:4px;background:#b7b7b7;border-radius:2px;margin:0 auto;flex-shrink:0}.header-content{display:flex;align-items:center;justify-content:space-between;width:100%;position:relative}.modal-title{font-family:Lusail,sans-serif;font-weight:500;font-size:14px;line-height:1.2;color:#161616;text-align:center;position:absolute;left:50%;transform:translate(-50%);margin:0;width:200px}.close-button{background:#f0eeee;border:none;border-radius:9999px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:8px;margin-left:auto;flex-shrink:0}.close-button mat-icon{font-size:20px;width:20px;height:20px;color:#000;overflow:visible}.close-button:hover{background:#e0e0e0}.modal-body{display:flex;flex-direction:column;gap:8px;width:100%;flex:1;min-height:0}.textarea-label-mobile{font-family:Lusail,sans-serif;font-weight:500;font-size:16px;line-height:1.2;color:#000;height:24px;max-height:24px;margin:0;padding:0}.textarea-field-mobile{width:100%;margin:0!important}:host ::ng-deep .textarea-field-mobile .mat-mdc-form-field-infix{min-height:107px;padding:16px!important}:host ::ng-deep .textarea-field-mobile .mat-mdc-form-field-outline{border:1px solid #b7b7b7!important;border-radius:8px!important}:host ::ng-deep .textarea-field-mobile textarea{font-family:Lusail,sans-serif;font-weight:300;font-size:16px;line-height:1.2;color:#888;resize:both}:host ::ng-deep .textarea-field-mobile textarea::placeholder{color:#888;font-weight:300;font-size:16px;line-height:1.2}.info-box-mobile{display:flex;gap:8px;align-items:flex-end;width:100%}.info-box-mobile .info-icon-mobile{font-size:18px;width:18px;height:20px;color:#b54708;flex-shrink:0;margin-top:2px}.info-box-mobile .info-text-mobile{font-family:Lusail,sans-serif;font-weight:300;font-size:16px;line-height:1;color:#5c5c5c;flex:1}.modal-actions-mobile{display:flex;flex-direction:column;gap:0;align-items:center;justify-content:center;width:100%;min-height:68px;position:relative}.actions-buttons-container{display:flex;gap:8px;align-items:center;justify-content:center;width:100%;margin-bottom:0;flex-shrink:0}.modal-actions-mobile>.actions-buttons-container>button{margin:0!important}.btn-cancel-mobile{flex:.5!important;height:44px!important;border:1px solid #3e627b!important;border-radius:8px!important;background:#fff!important;font-family:Lusail,sans-serif;font-weight:500;font-size:16px;line-height:1.2;color:#0d4261!important}.btn-action-mobile{flex:1 1 0!important;min-width:0!important;height:44px!important;border-radius:8px!important;background:#0d4261!important;font-family:Lusail,sans-serif;font-weight:500;font-size:16px;line-height:1.2;color:#fff!important}.home-indicator{width:134px;height:5px;background:#161616;border-radius:100px;position:absolute;bottom:0;left:50%;transform:translate(-50%)}@media (max-width: 768px){.desktop-view{display:none!important}.mobile-view{display:flex!important}}:host ::ng-deep .mat-mdc-dialog-container{padding:0!important}@media (max-width: 768px){:host ::ng-deep .mat-mdc-dialog-container{max-width:100vw!important;width:100vw!important;margin:0!important;position:fixed!important;inset:auto 0 0!important;border-radius:0!important;max-height:90vh!important}:host ::ng-deep .cdk-overlay-backdrop{background-color:#00000080!important}}@media (min-width: 769px){.desktop-view{display:block!important}.mobile-view{display:none!important}}@media (max-width: 600px){::ng-deep cdk-global-overlay-wrapper{align-items:flex-end!important}}\n"] }]
|
|
202
202
|
}], ctorParameters: () => [{ type: i1.MatDialogRef }, { type: undefined, decorators: [{
|
|
203
203
|
type: Inject,
|
|
204
204
|
args: [MAT_DIALOG_DATA]
|
|
@@ -726,7 +726,7 @@ class TitleBarComponent {
|
|
|
726
726
|
this.onViewModeChanged(value === 'PENDING');
|
|
727
727
|
}
|
|
728
728
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TitleBarComponent, deps: [{ token: i1$1.Location }, { token: i3$1.Directionality }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
729
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TitleBarComponent, isStandalone: true, selector: "app-title-bar", inputs: { pageTitle: "pageTitle", showExtractButton: "showExtractButton", totalElements: "totalElements", titleMode: "titleMode", pageInfo: "pageInfo", subTitle: "subTitle", statusDesc: "statusDesc", newAction: "newAction", extraButton: "extraButton", showDetails: "showDetails", showImport: "showImport", showButton: "showButton", extraData: "extraData", titleCorporateAdmin: "titleCorporateAdmin", hideBackButton: "hideBackButton", buttons: "buttons", buttonsDisplayMode: "buttonsDisplayMode", draftSupported: "draftSupported", isPending: "isPending", onViewModeChange: "onViewModeChange" }, outputs: { newActionClicked: "newActionClicked", extraButtonClicked: "extraButtonClicked", extractReport: "extractReport", buttonClicked: "buttonClicked", viewModeChanged: "viewModeChanged" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"row mainTitleBar gap-20 default-align\">\r\n\r\n <div class=\"column flex-auto textTitle\" >\r\n <h2 *ngIf=\"!pageInfo.hideTitle\" style=\"margin: 0;\">\r\n <span class=\"textTitle__titleMode\">{{ titleMode | translate }}</span>\r\n {{ listTitle | translate }}\r\n <span *ngIf=\"titleCorporateAdmin && isRoot\">({{ titleCorporateAdmin }})</span>\r\n {{ extraData }}\r\n </h2>\r\n <span *ngIf=\"subTitle\" class=\"textTitle__subTitle\">{{ subTitle | translate }}</span>\r\n <div *ngIf=\"pageInfo.draftSupported\" class=\"chips-container\">\r\n <mat-chip-listbox #box [attr.aria-label]=\"'BASE_TABLE.documentStatus' | translate\" [multiple]=\"false\" [value]=\"currentIsPending ? 'PENDING' : 'COMPLETED'\" (click)=\"$event.stopPropagation()\" (change)=\"onChipSelectionChange($event, box)\">\r\n <mat-chip-option [selected]=\"!currentIsPending\" [color]=\"'accent'\" value=\"COMPLETED\" (click)=\"$event.stopPropagation()\">\r\n <mat-icon *ngIf=\"!currentIsPending\" style=\"font-size: 14px; width: 14px; height: 14px; margin-right: 4px;\">check</mat-icon>\r\n {{'finished' | translate}}\r\n </mat-chip-option>\r\n <mat-chip-option [selected]=\"currentIsPending\" [color]=\"'accent'\" value=\"PENDING\" (click)=\"$event.stopPropagation()\">\r\n <mat-icon *ngIf=\"currentIsPending\" style=\"font-size: 14px; width: 14px; height: 14px; margin-right: 4px;\">check</mat-icon>\r\n {{'todo' | translate}}\r\n </mat-chip-option>\r\n </mat-chip-listbox>\r\n </div>\r\n </div>\r\n\r\n <div class=\"column end-items gap-20\">\r\n <button type=\"button\" mat-flat-button color=\"primary\" style=\"width: 100px\" *ngIf=\"!hideBackButton\" (click)=\"goBack()\" id=\"title-bar-back-btn\">\r\n <mat-icon color=\"second\">{{ backIcon }}</mat-icon>\r\n <span style=\"font-weight: bold\">{{ 'back' | translate }}</span>\r\n </button>\r\n\r\n <div class=\"row flex-auto gap-20 buttons-wrapper\">\r\n <ng-container *ngIf=\"buttonsDisplayMode === 'dropdown'\">\r\n <button\r\n type=\"button\"\r\n *ngIf=\"buttons && buttons.length > 0\"\r\n mat-flat-button\r\n [matMenuTriggerFor]=\"actionMenu\"\r\n class=\"title-bar-action-button\"\r\n [attr.id]=\"'title-bar-action-button'\">\r\n <div class=\"button-content\">\r\n <mat-icon class=\"button-icon\">{{ buttons[0].icon }}</mat-icon>\r\n <span class=\"button-label\">{{ buttons[0].label | translate }}</span>\r\n <mat-icon class=\"button-arrow\">keyboard_arrow_down</mat-icon>\r\n </div>\r\n </button>\r\n <mat-menu #actionMenu=\"matMenu\" class=\"title-bar-action-menu\">\r\n <ng-container *ngFor=\"let btn of buttons\">\r\n <a\r\n *ngIf=\"resolveButtonHref(btn) as href\"\r\n mat-menu-item\r\n [href]=\"href\"\r\n (click)=\"onButtonClick(btn, $event)\"\r\n [attr.id]=\"btn.id || ('title-bar-menu-btn-' + (btn.action || btn.label || btn.key))\">\r\n <mat-icon>{{ btn.icon }}</mat-icon>\r\n <span>{{ btn.label | translate }}</span>\r\n </a>\r\n <button\r\n *ngIf=\"!resolveButtonHref(btn)\"\r\n type=\"button\"\r\n mat-menu-item\r\n (click)=\"onButtonClick(btn)\"\r\n [attr.id]=\"btn.id || ('title-bar-menu-btn-' + (btn.action || btn.label || btn.key))\">\r\n <mat-icon>{{ btn.icon }}</mat-icon>\r\n <span>{{ btn.label | translate }}</span>\r\n </button>\r\n </ng-container>\r\n </mat-menu>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"buttonsDisplayMode === 'list'\">\r\n <ng-container *ngFor=\"let btn of buttons\">\r\n <a\r\n *ngIf=\"resolveButtonHref(btn) as href\"\r\n mat-flat-button\r\n color=\"primary\"\r\n class=\"title-bar-list-button\"\r\n [href]=\"href\"\r\n (click)=\"onButtonClick(btn, $event)\"\r\n [attr.id]=\"btn.id || ('title-bar-list-btn-' + (btn.action || btn.label || btn.key))\">\r\n <mat-icon>{{ btn.icon }}</mat-icon>\r\n <span>{{ btn.label | translate }}</span>\r\n </a>\r\n <button\r\n *ngIf=\"!resolveButtonHref(btn)\"\r\n type=\"button\"\r\n mat-flat-button\r\n color=\"primary\"\r\n class=\"title-bar-list-button\"\r\n (click)=\"onButtonClick(btn)\"\r\n [attr.id]=\"btn.id || ('title-bar-list-btn-' + (btn.action || btn.label || btn.key))\">\r\n <mat-icon>{{ btn.icon }}</mat-icon>\r\n <span>{{ btn.label | translate }}</span>\r\n </button>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: ["", ":host{display:block;width:100%}.mainTitleBar{display:flex;width:100%;gap:20px;align-items:center;justify-content:flex-start}.mainTitleBar.row{flex-direction:row;margin-left:0!important;margin-right:0!important;padding-bottom:20px;border-bottom:1px solid #F0EEEE}.mainTitleBar.column{flex-direction:column}.mainTitleBar .textTitle{flex:1 1 0;display:flex;flex-direction:column;width:auto;gap:12px}.mainTitleBar .textTitle h2{margin:0;padding:0;line-height:1.2}.mainTitleBar .textTitle__titleMode{font-weight:200;color:gray}.mainTitleBar .textTitle__subTitle{color:#888;font-size:16px;font-weight:300;font-style:normal}.mainTitleBar .textTitle .chips-container{margin-top:0}.mainTitleBar .end-items{display:flex;flex-direction:row;align-items:center;gap:20px}.mainTitleBar .buttons-wrapper{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex-direction:row;text-align-last:end;margin-left:0!important;margin-right:0!important}.mainTitleBar .buttons-wrapper .action-btn{width:210px!important}.mainTitleBar .title-bar-action-button{background:#0d4261!important;color:#fff!important;border-radius:8px!important;height:44px!important;padding:8px 12px!important;min-width:209px!important;box-shadow:none!important}.mainTitleBar .title-bar-action-button:hover{background:#0a3550!important}.mainTitleBar .title-bar-action-button .button-content{display:flex;align-items:center;justify-content:center;gap:8px;width:100%}.mainTitleBar .title-bar-action-button .button-icon{font-size:14px;width:14px;height:14px;color:#fff}.mainTitleBar .title-bar-action-button .button-label{font-weight:500;font-size:16px;line-height:1.2;color:#fff;white-space:nowrap;height:16px}.mainTitleBar .title-bar-action-button .button-arrow{font-size:14px;width:14px;height:14px;color:#fff;margin-left:auto}.mainTitleBar .actionButton{width:100%}.mainTitleBar .actionButton__expand{font-size:20px!important;color:var(--accent-color);margin-top:5px}.mainTitleBar .title-bar-list-button{background:#0d4261!important;color:#fff!important;border-radius:8px!important;height:44px!important;padding:8px 16px!important;min-width:auto!important;box-shadow:none!important;display:flex!important;align-items:center!important;gap:8px!important;font-weight:500!important;font-size:16px!important;line-height:1.2!important;white-space:nowrap!important;text-decoration:none!important;box-sizing:border-box!important;outline:none!important;cursor:pointer!important}.mainTitleBar .title-bar-list-button:hover{background:#0a3550!important}.mainTitleBar .title-bar-list-button mat-icon{font-size:20px!important;width:20px!important;height:28px!important;color:#fff!important;margin:0!important}.mainTitleBar .title-bar-list-button span{color:#fff!important}.mainTitleBar mat-chip-listbox{display:flex;flex-direction:row;gap:8px;align-items:center}.mainTitleBar mat-chip-listbox mat-chip-option{height:32px!important;min-height:32px!important;border-radius:8px!important;font-size:16px!important;line-height:1.2!important;font-weight:400!important;border:none!important;box-shadow:none!important;transition:all .2s ease;font-family:Lusail,sans-serif!important;padding:0!important}.mainTitleBar mat-chip-listbox mat-chip-option.mdc-evolution-chip--selected,.mainTitleBar mat-chip-listbox mat-chip-option[selected=true],.mainTitleBar mat-chip-listbox mat-chip-option[aria-selected=true]{background:#0d4261!important;color:#fff!important;font-weight:500!important}.mainTitleBar mat-chip-listbox mat-chip-option.mdc-evolution-chip--selected .mdc-evolution-chip__text-label,.mainTitleBar mat-chip-listbox mat-chip-option[selected=true] .mdc-evolution-chip__text-label,.mainTitleBar mat-chip-listbox mat-chip-option[aria-selected=true] .mdc-evolution-chip__text-label{color:#fff!important;font-weight:500!important;padding-left:4px!important}.mainTitleBar mat-chip-listbox mat-chip-option.mdc-evolution-chip--selected mat-icon,.mainTitleBar mat-chip-listbox mat-chip-option[selected=true] mat-icon,.mainTitleBar mat-chip-listbox mat-chip-option[aria-selected=true] mat-icon{color:#fff!important}.mainTitleBar mat-chip-listbox mat-chip-option:not(.mdc-evolution-chip--selected):not([selected=true]):not([aria-selected=true]){background:#e9e9e9!important;color:#000!important;font-weight:400!important}.mainTitleBar mat-chip-listbox mat-chip-option:not(.mdc-evolution-chip--selected):not([selected=true]):not([aria-selected=true]) .mdc-evolution-chip__text-label{color:#000!important;font-weight:400!important}.mainTitleBar mat-chip-listbox mat-chip-option .mdc-evolution-chip__action{padding:8px 12px!important;min-height:32px!important;display:flex!important;align-items:center!important;gap:4px!important}.mainTitleBar mat-chip-listbox mat-chip-option .mdc-evolution-chip__text-label{padding:0!important;font-size:16px!important;line-height:1.2!important;font-family:Lusail,sans-serif!important}.mainTitleBar mat-chip-listbox mat-chip-option mat-icon{font-size:14px!important;width:14px!important;height:14px!important;margin-right:4px!important}.mainTitleBar mat-chip-listbox mat-chip-option ::ng-deep .mdc-evolution-chip__graphic,.mainTitleBar mat-chip-listbox mat-chip-option ::ng-deep .mdc-evolution-chip__checkmark{display:none!important}.mainTitleBar mat-chip-listbox mat-chip-option ::ng-deep .mdc-evolution-chip__action--primary{padding:10px!important}.mainTitleBar mat-chip-listbox mat-chip-option:hover{opacity:.9}.row{display:flex;flex-direction:row;width:100%}.column{display:flex;flex-direction:column;width:auto}.fx-flex-fill{width:100%;height:100%;flex:1 1 auto}.flex-auto{flex:1 1 auto;display:flex;flex-direction:column}.end-items{align-items:flex-end}.gap-20{gap:20px}@media (max-width: 960px){.mainTitleBar.row.default-align{justify-content:flex-end}}@media (max-width: 768px){.mainTitleBar.row,.mainTitleBar.column{flex-direction:column;align-items:flex-start;gap:20px}.end-items{align-items:flex-start}}@media (max-width: 600px){.gap-20{gap:10px}}:host-context(html.high-contrast) .mainTitleBar .title-bar-list-button.mat-mdc-button-base,:host-context(html.high-contrast) .mainTitleBar a.title-bar-list-button,:host-context(html.high-contrast) .mainTitleBar button.title-bar-list-button{--mdc-filled-button-container-color: #000 !important;--mdc-filled-button-label-text-color: #fff !important;--mat-filled-button-state-layer-color: #fff !important;--mdc-filled-button-hover-state-layer-color: #fff !important;--mdc-filled-button-focus-state-layer-color: #fff !important;--mdc-filled-button-pressed-state-layer-color: #fff !important;background-color:#000!important;background:#000!important;color:#fff!important;border:2px solid #000!important;text-decoration:none!important}:host-context(html.high-contrast) .mainTitleBar .title-bar-list-button.mat-mdc-button-base:hover,:host-context(html.high-contrast) .mainTitleBar a.title-bar-list-button:hover,:host-context(html.high-contrast) .mainTitleBar button.title-bar-list-button:hover{background-color:#000!important;background:#000!important}:host-context(html.high-contrast) .mainTitleBar .title-bar-list-button.mat-mdc-button-base mat-icon,:host-context(html.high-contrast) .mainTitleBar .title-bar-list-button.mat-mdc-button-base .mat-icon,:host-context(html.high-contrast) .mainTitleBar a.title-bar-list-button mat-icon,:host-context(html.high-contrast) .mainTitleBar a.title-bar-list-button .mat-icon,:host-context(html.high-contrast) .mainTitleBar button.title-bar-list-button mat-icon,:host-context(html.high-contrast) .mainTitleBar button.title-bar-list-button .mat-icon{color:#fff!important}:host-context(html.high-contrast) .mainTitleBar .title-bar-list-button.mat-mdc-button-base span,:host-context(html.high-contrast) .mainTitleBar a.title-bar-list-button span,:host-context(html.high-contrast) .mainTitleBar button.title-bar-list-button span{color:#fff!important}:host-context(html.high-contrast) .mainTitleBar .title-bar-list-button.mat-mdc-button-base .mdc-button__label,:host-context(html.high-contrast) .mainTitleBar a.title-bar-list-button .mdc-button__label,:host-context(html.high-contrast) .mainTitleBar button.title-bar-list-button .mdc-button__label{color:#fff!important}:host-context(html.high-contrast) .mainTitleBar .title-bar-action-button.mat-mdc-button-base,:host-context(html.high-contrast) .mainTitleBar button.title-bar-action-button{--mdc-filled-button-container-color: #000 !important;--mdc-filled-button-label-text-color: #fff !important;--mat-filled-button-state-layer-color: #fff !important;--mdc-filled-button-hover-state-layer-color: #fff !important;--mdc-filled-button-focus-state-layer-color: #fff !important;--mdc-filled-button-pressed-state-layer-color: #fff !important;background-color:#000!important;background:#000!important;color:#fff!important;border:2px solid #000!important}:host-context(html.high-contrast) .mainTitleBar .title-bar-action-button.mat-mdc-button-base:hover,:host-context(html.high-contrast) .mainTitleBar button.title-bar-action-button:hover{background-color:#000!important;background:#000!important}:host-context(html.high-contrast) .mainTitleBar .title-bar-action-button.mat-mdc-button-base .button-icon,:host-context(html.high-contrast) .mainTitleBar .title-bar-action-button.mat-mdc-button-base .button-label,:host-context(html.high-contrast) .mainTitleBar .title-bar-action-button.mat-mdc-button-base .button-arrow,:host-context(html.high-contrast) .mainTitleBar button.title-bar-action-button .button-icon,:host-context(html.high-contrast) .mainTitleBar button.title-bar-action-button .button-label,:host-context(html.high-contrast) .mainTitleBar button.title-bar-action-button .button-arrow{color:#fff!important}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "component", type: MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }] }); }
|
|
729
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TitleBarComponent, isStandalone: true, selector: "app-title-bar", inputs: { pageTitle: "pageTitle", showExtractButton: "showExtractButton", totalElements: "totalElements", titleMode: "titleMode", pageInfo: "pageInfo", subTitle: "subTitle", statusDesc: "statusDesc", newAction: "newAction", extraButton: "extraButton", showDetails: "showDetails", showImport: "showImport", showButton: "showButton", extraData: "extraData", titleCorporateAdmin: "titleCorporateAdmin", hideBackButton: "hideBackButton", buttons: "buttons", buttonsDisplayMode: "buttonsDisplayMode", draftSupported: "draftSupported", isPending: "isPending", onViewModeChange: "onViewModeChange" }, outputs: { newActionClicked: "newActionClicked", extraButtonClicked: "extraButtonClicked", extractReport: "extractReport", buttonClicked: "buttonClicked", viewModeChanged: "viewModeChanged" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"row mainTitleBar gap-20 default-align\">\r\n\r\n <div class=\"column flex-auto textTitle\" >\r\n <h2 *ngIf=\"!pageInfo.hideTitle\" style=\"margin: 0;\">\r\n <span class=\"textTitle__titleMode\">{{ titleMode | translate }}</span>\r\n {{ listTitle | translate }}\r\n <span *ngIf=\"titleCorporateAdmin && isRoot\">({{ titleCorporateAdmin }})</span>\r\n {{ extraData }}\r\n </h2>\r\n <span *ngIf=\"subTitle\" class=\"textTitle__subTitle\">{{ subTitle | translate }}</span>\r\n <div *ngIf=\"pageInfo.draftSupported\" class=\"chips-container\">\r\n <mat-chip-listbox #box [attr.aria-label]=\"'BASE_TABLE.documentStatus' | translate\" [multiple]=\"false\" [value]=\"currentIsPending ? 'PENDING' : 'COMPLETED'\" (click)=\"$event.stopPropagation()\" (change)=\"onChipSelectionChange($event, box)\">\r\n <mat-chip-option [selected]=\"!currentIsPending\" [color]=\"'accent'\" value=\"COMPLETED\" (click)=\"$event.stopPropagation()\">\r\n <mat-icon *ngIf=\"!currentIsPending\" style=\"font-size: 14px; width: 14px; height: 14px; margin-right: 4px;\">check</mat-icon>\r\n {{'finished' | translate}}\r\n </mat-chip-option>\r\n <mat-chip-option [selected]=\"currentIsPending\" [color]=\"'accent'\" value=\"PENDING\" (click)=\"$event.stopPropagation()\">\r\n <mat-icon *ngIf=\"currentIsPending\" style=\"font-size: 14px; width: 14px; height: 14px; margin-right: 4px;\">check</mat-icon>\r\n {{'todo' | translate}}\r\n </mat-chip-option>\r\n </mat-chip-listbox>\r\n </div>\r\n </div>\r\n\r\n <div class=\"column end-items gap-20\">\r\n <button type=\"button\" mat-flat-button color=\"primary\" style=\"width: 100px\" *ngIf=\"!hideBackButton\" (click)=\"goBack()\" id=\"title-bar-back-btn\">\r\n <mat-icon color=\"second\">{{ backIcon }}</mat-icon>\r\n <span style=\"font-weight: bold\">{{ 'back' | translate }}</span>\r\n </button>\r\n\r\n <div class=\"row flex-auto gap-20 buttons-wrapper\">\r\n <ng-container *ngIf=\"buttonsDisplayMode === 'dropdown'\">\r\n <button\r\n type=\"button\"\r\n *ngIf=\"buttons && buttons.length > 0\"\r\n mat-flat-button\r\n [matMenuTriggerFor]=\"actionMenu\"\r\n class=\"title-bar-action-button\"\r\n [attr.id]=\"'title-bar-action-button'\">\r\n <div class=\"button-content\">\r\n <mat-icon class=\"button-icon\">{{ buttons[0].icon }}</mat-icon>\r\n <span class=\"button-label\">{{ buttons[0].label | translate }}</span>\r\n <mat-icon class=\"button-arrow\">keyboard_arrow_down</mat-icon>\r\n </div>\r\n </button>\r\n <mat-menu #actionMenu=\"matMenu\" class=\"title-bar-action-menu\">\r\n <ng-container *ngFor=\"let btn of buttons\">\r\n <a\r\n *ngIf=\"resolveButtonHref(btn) as href\"\r\n mat-menu-item\r\n [href]=\"href\"\r\n (click)=\"onButtonClick(btn, $event)\"\r\n [attr.id]=\"btn.id || ('title-bar-menu-btn-' + (btn.action || btn.label || btn.key))\">\r\n <mat-icon>{{ btn.icon }}</mat-icon>\r\n <span>{{ btn.label | translate }}</span>\r\n </a>\r\n <button\r\n *ngIf=\"!resolveButtonHref(btn)\"\r\n type=\"button\"\r\n mat-menu-item\r\n (click)=\"onButtonClick(btn)\"\r\n [attr.id]=\"btn.id || ('title-bar-menu-btn-' + (btn.action || btn.label || btn.key))\">\r\n <mat-icon>{{ btn.icon }}</mat-icon>\r\n <span>{{ btn.label | translate }}</span>\r\n </button>\r\n </ng-container>\r\n </mat-menu>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"buttonsDisplayMode === 'list'\">\r\n <ng-container *ngFor=\"let btn of buttons\">\r\n <a\r\n *ngIf=\"resolveButtonHref(btn) as href\"\r\n mat-flat-button\r\n color=\"primary\"\r\n class=\"title-bar-list-button\"\r\n [href]=\"href\"\r\n (click)=\"onButtonClick(btn, $event)\"\r\n [attr.id]=\"btn.id || ('title-bar-list-btn-' + (btn.action || btn.label || btn.key))\">\r\n <mat-icon>{{ btn.icon }}</mat-icon>\r\n <span>{{ btn.label | translate }}</span>\r\n </a>\r\n <button\r\n *ngIf=\"!resolveButtonHref(btn)\"\r\n type=\"button\"\r\n mat-flat-button\r\n color=\"primary\"\r\n class=\"title-bar-list-button\"\r\n (click)=\"onButtonClick(btn)\"\r\n [attr.id]=\"btn.id || ('title-bar-list-btn-' + (btn.action || btn.label || btn.key))\">\r\n <mat-icon>{{ btn.icon }}</mat-icon>\r\n <span>{{ btn.label | translate }}</span>\r\n </button>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: ["", ":host{display:block;width:100%}.mainTitleBar{display:flex;width:100%;gap:20px;align-items:center;justify-content:flex-start}.mainTitleBar.row{flex-direction:row;margin-left:0!important;margin-right:0!important;padding-bottom:20px;border-bottom:1px solid #F0EEEE}.mainTitleBar.column{flex-direction:column}.mainTitleBar .textTitle{flex:1 1 0;display:flex;flex-direction:column;width:auto;gap:12px}.mainTitleBar .textTitle h2{margin:0;padding:0;line-height:1.2}.mainTitleBar .textTitle__titleMode{font-weight:200;color:gray}.mainTitleBar .textTitle__subTitle{color:#888;font-size:16px;font-weight:300;font-style:normal}.mainTitleBar .textTitle .chips-container{margin-top:0}.mainTitleBar .end-items{display:flex;flex-direction:row;align-items:center;gap:20px}.mainTitleBar .buttons-wrapper{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex-direction:row;text-align-last:end;margin-left:0!important;margin-right:0!important}.mainTitleBar .buttons-wrapper .action-btn{width:210px!important}.mainTitleBar .title-bar-action-button{background:#0d4261!important;color:#fff!important;border-radius:8px!important;height:44px!important;padding:8px 12px!important;min-width:209px!important;box-shadow:none!important}.mainTitleBar .title-bar-action-button:focus-visible{outline:3px solid #fff!important;outline-offset:3px!important;position:relative;z-index:1}.mainTitleBar .title-bar-action-button:hover{background:#0a3550!important}.mainTitleBar .title-bar-action-button .button-content{display:flex;align-items:center;justify-content:center;gap:8px;width:100%}.mainTitleBar .title-bar-action-button .button-icon{font-size:14px;width:14px;height:14px;color:#fff}.mainTitleBar .title-bar-action-button .button-label{font-weight:500;font-size:16px;line-height:1.2;color:#fff;white-space:nowrap;height:16px}.mainTitleBar .title-bar-action-button .button-arrow{font-size:14px;width:14px;height:14px;color:#fff;margin-left:auto}.mainTitleBar .actionButton{width:100%}.mainTitleBar .actionButton__expand{font-size:20px!important;color:var(--accent-color);margin-top:5px}.mainTitleBar .title-bar-list-button{background:#0d4261!important;color:#fff!important;border-radius:8px!important;height:44px!important;padding:8px 16px!important;min-width:auto!important;box-shadow:none!important;display:flex!important;align-items:center!important;gap:8px!important;font-weight:500!important;font-size:16px!important;line-height:1.2!important;white-space:nowrap!important;text-decoration:none!important;box-sizing:border-box!important;cursor:pointer!important}.mainTitleBar .title-bar-list-button:focus-visible{outline:3px solid #0d4261!important;outline-offset:3px!important;position:relative;z-index:1}.mainTitleBar .title-bar-list-button:hover{background:#0a3550!important}.mainTitleBar .title-bar-list-button mat-icon{font-size:20px!important;width:20px!important;height:28px!important;color:#fff!important;margin:0!important}.mainTitleBar .title-bar-list-button span{color:#fff!important}.mainTitleBar mat-chip-listbox{display:flex;flex-direction:row;gap:8px;align-items:center}.mainTitleBar mat-chip-listbox mat-chip-option{height:32px!important;min-height:32px!important;border-radius:8px!important;font-size:16px!important;line-height:1.2!important;font-weight:400!important;border:none!important;box-shadow:none!important;transition:all .2s ease;font-family:Lusail,sans-serif!important;padding:0!important}.mainTitleBar mat-chip-listbox mat-chip-option.mdc-evolution-chip--selected,.mainTitleBar mat-chip-listbox mat-chip-option[selected=true],.mainTitleBar mat-chip-listbox mat-chip-option[aria-selected=true]{background:#0d4261!important;color:#fff!important;font-weight:500!important}.mainTitleBar mat-chip-listbox mat-chip-option.mdc-evolution-chip--selected .mdc-evolution-chip__text-label,.mainTitleBar mat-chip-listbox mat-chip-option[selected=true] .mdc-evolution-chip__text-label,.mainTitleBar mat-chip-listbox mat-chip-option[aria-selected=true] .mdc-evolution-chip__text-label{color:#fff!important;font-weight:500!important;padding-left:4px!important}.mainTitleBar mat-chip-listbox mat-chip-option.mdc-evolution-chip--selected mat-icon,.mainTitleBar mat-chip-listbox mat-chip-option[selected=true] mat-icon,.mainTitleBar mat-chip-listbox mat-chip-option[aria-selected=true] mat-icon{color:#fff!important}.mainTitleBar mat-chip-listbox mat-chip-option:not(.mdc-evolution-chip--selected):not([selected=true]):not([aria-selected=true]){background:#e9e9e9!important;color:#000!important;font-weight:400!important}.mainTitleBar mat-chip-listbox mat-chip-option:not(.mdc-evolution-chip--selected):not([selected=true]):not([aria-selected=true]) .mdc-evolution-chip__text-label{color:#000!important;font-weight:400!important}.mainTitleBar mat-chip-listbox mat-chip-option .mdc-evolution-chip__action{padding:8px 12px!important;min-height:32px!important;display:flex!important;align-items:center!important;gap:4px!important}.mainTitleBar mat-chip-listbox mat-chip-option .mdc-evolution-chip__text-label{padding:0!important;font-size:16px!important;line-height:1.2!important;font-family:Lusail,sans-serif!important}.mainTitleBar mat-chip-listbox mat-chip-option mat-icon{font-size:14px!important;width:14px!important;height:14px!important;margin-right:4px!important}.mainTitleBar mat-chip-listbox mat-chip-option ::ng-deep .mdc-evolution-chip__graphic,.mainTitleBar mat-chip-listbox mat-chip-option ::ng-deep .mdc-evolution-chip__checkmark{display:none!important}.mainTitleBar mat-chip-listbox mat-chip-option ::ng-deep .mdc-evolution-chip__action--primary{padding:10px!important}.mainTitleBar mat-chip-listbox mat-chip-option:hover{opacity:.9}.row{display:flex;flex-direction:row;width:100%}.column{display:flex;flex-direction:column;width:auto}.fx-flex-fill{width:100%;height:100%;flex:1 1 auto}.flex-auto{flex:1 1 auto;display:flex;flex-direction:column}.end-items{align-items:flex-end}.gap-20{gap:20px}@media (max-width: 960px){.mainTitleBar.row.default-align{justify-content:flex-end}}@media (max-width: 768px){.mainTitleBar.row,.mainTitleBar.column{flex-direction:column;align-items:flex-start;gap:20px}.end-items{align-items:flex-start}}@media (max-width: 600px){.gap-20{gap:10px}}:host-context(html.high-contrast) .mainTitleBar .title-bar-list-button.mat-mdc-button-base,:host-context(html.high-contrast) .mainTitleBar a.title-bar-list-button,:host-context(html.high-contrast) .mainTitleBar button.title-bar-list-button{--mdc-filled-button-container-color: #000 !important;--mdc-filled-button-label-text-color: #fff !important;--mat-filled-button-state-layer-color: #fff !important;--mdc-filled-button-hover-state-layer-color: #fff !important;--mdc-filled-button-focus-state-layer-color: #fff !important;--mdc-filled-button-pressed-state-layer-color: #fff !important;background-color:#000!important;background:#000!important;color:#fff!important;border:2px solid #000!important;text-decoration:none!important}:host-context(html.high-contrast) .mainTitleBar .title-bar-list-button.mat-mdc-button-base:hover,:host-context(html.high-contrast) .mainTitleBar a.title-bar-list-button:hover,:host-context(html.high-contrast) .mainTitleBar button.title-bar-list-button:hover{background-color:#000!important;background:#000!important}:host-context(html.high-contrast) .mainTitleBar .title-bar-list-button.mat-mdc-button-base mat-icon,:host-context(html.high-contrast) .mainTitleBar .title-bar-list-button.mat-mdc-button-base .mat-icon,:host-context(html.high-contrast) .mainTitleBar a.title-bar-list-button mat-icon,:host-context(html.high-contrast) .mainTitleBar a.title-bar-list-button .mat-icon,:host-context(html.high-contrast) .mainTitleBar button.title-bar-list-button mat-icon,:host-context(html.high-contrast) .mainTitleBar button.title-bar-list-button .mat-icon{color:#fff!important}:host-context(html.high-contrast) .mainTitleBar .title-bar-list-button.mat-mdc-button-base span,:host-context(html.high-contrast) .mainTitleBar a.title-bar-list-button span,:host-context(html.high-contrast) .mainTitleBar button.title-bar-list-button span{color:#fff!important}:host-context(html.high-contrast) .mainTitleBar .title-bar-list-button.mat-mdc-button-base .mdc-button__label,:host-context(html.high-contrast) .mainTitleBar a.title-bar-list-button .mdc-button__label,:host-context(html.high-contrast) .mainTitleBar button.title-bar-list-button .mdc-button__label{color:#fff!important}:host-context(html.high-contrast) .mainTitleBar .title-bar-action-button.mat-mdc-button-base,:host-context(html.high-contrast) .mainTitleBar button.title-bar-action-button{--mdc-filled-button-container-color: #000 !important;--mdc-filled-button-label-text-color: #fff !important;--mat-filled-button-state-layer-color: #fff !important;--mdc-filled-button-hover-state-layer-color: #fff !important;--mdc-filled-button-focus-state-layer-color: #fff !important;--mdc-filled-button-pressed-state-layer-color: #fff !important;background-color:#000!important;background:#000!important;color:#fff!important;border:2px solid #000!important}:host-context(html.high-contrast) .mainTitleBar .title-bar-action-button.mat-mdc-button-base:hover,:host-context(html.high-contrast) .mainTitleBar button.title-bar-action-button:hover{background-color:#000!important;background:#000!important}:host-context(html.high-contrast) .mainTitleBar .title-bar-action-button.mat-mdc-button-base .button-icon,:host-context(html.high-contrast) .mainTitleBar .title-bar-action-button.mat-mdc-button-base .button-label,:host-context(html.high-contrast) .mainTitleBar .title-bar-action-button.mat-mdc-button-base .button-arrow,:host-context(html.high-contrast) .mainTitleBar button.title-bar-action-button .button-icon,:host-context(html.high-contrast) .mainTitleBar button.title-bar-action-button .button-label,:host-context(html.high-contrast) .mainTitleBar button.title-bar-action-button .button-arrow{color:#fff!important}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "component", type: MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }] }); }
|
|
730
730
|
}
|
|
731
731
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TitleBarComponent, decorators: [{
|
|
732
732
|
type: Component,
|
|
@@ -741,7 +741,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
741
741
|
TranslateModule,
|
|
742
742
|
MatChipListbox,
|
|
743
743
|
MatChipOption,
|
|
744
|
-
], template: "<div class=\"row mainTitleBar gap-20 default-align\">\r\n\r\n <div class=\"column flex-auto textTitle\" >\r\n <h2 *ngIf=\"!pageInfo.hideTitle\" style=\"margin: 0;\">\r\n <span class=\"textTitle__titleMode\">{{ titleMode | translate }}</span>\r\n {{ listTitle | translate }}\r\n <span *ngIf=\"titleCorporateAdmin && isRoot\">({{ titleCorporateAdmin }})</span>\r\n {{ extraData }}\r\n </h2>\r\n <span *ngIf=\"subTitle\" class=\"textTitle__subTitle\">{{ subTitle | translate }}</span>\r\n <div *ngIf=\"pageInfo.draftSupported\" class=\"chips-container\">\r\n <mat-chip-listbox #box [attr.aria-label]=\"'BASE_TABLE.documentStatus' | translate\" [multiple]=\"false\" [value]=\"currentIsPending ? 'PENDING' : 'COMPLETED'\" (click)=\"$event.stopPropagation()\" (change)=\"onChipSelectionChange($event, box)\">\r\n <mat-chip-option [selected]=\"!currentIsPending\" [color]=\"'accent'\" value=\"COMPLETED\" (click)=\"$event.stopPropagation()\">\r\n <mat-icon *ngIf=\"!currentIsPending\" style=\"font-size: 14px; width: 14px; height: 14px; margin-right: 4px;\">check</mat-icon>\r\n {{'finished' | translate}}\r\n </mat-chip-option>\r\n <mat-chip-option [selected]=\"currentIsPending\" [color]=\"'accent'\" value=\"PENDING\" (click)=\"$event.stopPropagation()\">\r\n <mat-icon *ngIf=\"currentIsPending\" style=\"font-size: 14px; width: 14px; height: 14px; margin-right: 4px;\">check</mat-icon>\r\n {{'todo' | translate}}\r\n </mat-chip-option>\r\n </mat-chip-listbox>\r\n </div>\r\n </div>\r\n\r\n <div class=\"column end-items gap-20\">\r\n <button type=\"button\" mat-flat-button color=\"primary\" style=\"width: 100px\" *ngIf=\"!hideBackButton\" (click)=\"goBack()\" id=\"title-bar-back-btn\">\r\n <mat-icon color=\"second\">{{ backIcon }}</mat-icon>\r\n <span style=\"font-weight: bold\">{{ 'back' | translate }}</span>\r\n </button>\r\n\r\n <div class=\"row flex-auto gap-20 buttons-wrapper\">\r\n <ng-container *ngIf=\"buttonsDisplayMode === 'dropdown'\">\r\n <button\r\n type=\"button\"\r\n *ngIf=\"buttons && buttons.length > 0\"\r\n mat-flat-button\r\n [matMenuTriggerFor]=\"actionMenu\"\r\n class=\"title-bar-action-button\"\r\n [attr.id]=\"'title-bar-action-button'\">\r\n <div class=\"button-content\">\r\n <mat-icon class=\"button-icon\">{{ buttons[0].icon }}</mat-icon>\r\n <span class=\"button-label\">{{ buttons[0].label | translate }}</span>\r\n <mat-icon class=\"button-arrow\">keyboard_arrow_down</mat-icon>\r\n </div>\r\n </button>\r\n <mat-menu #actionMenu=\"matMenu\" class=\"title-bar-action-menu\">\r\n <ng-container *ngFor=\"let btn of buttons\">\r\n <a\r\n *ngIf=\"resolveButtonHref(btn) as href\"\r\n mat-menu-item\r\n [href]=\"href\"\r\n (click)=\"onButtonClick(btn, $event)\"\r\n [attr.id]=\"btn.id || ('title-bar-menu-btn-' + (btn.action || btn.label || btn.key))\">\r\n <mat-icon>{{ btn.icon }}</mat-icon>\r\n <span>{{ btn.label | translate }}</span>\r\n </a>\r\n <button\r\n *ngIf=\"!resolveButtonHref(btn)\"\r\n type=\"button\"\r\n mat-menu-item\r\n (click)=\"onButtonClick(btn)\"\r\n [attr.id]=\"btn.id || ('title-bar-menu-btn-' + (btn.action || btn.label || btn.key))\">\r\n <mat-icon>{{ btn.icon }}</mat-icon>\r\n <span>{{ btn.label | translate }}</span>\r\n </button>\r\n </ng-container>\r\n </mat-menu>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"buttonsDisplayMode === 'list'\">\r\n <ng-container *ngFor=\"let btn of buttons\">\r\n <a\r\n *ngIf=\"resolveButtonHref(btn) as href\"\r\n mat-flat-button\r\n color=\"primary\"\r\n class=\"title-bar-list-button\"\r\n [href]=\"href\"\r\n (click)=\"onButtonClick(btn, $event)\"\r\n [attr.id]=\"btn.id || ('title-bar-list-btn-' + (btn.action || btn.label || btn.key))\">\r\n <mat-icon>{{ btn.icon }}</mat-icon>\r\n <span>{{ btn.label | translate }}</span>\r\n </a>\r\n <button\r\n *ngIf=\"!resolveButtonHref(btn)\"\r\n type=\"button\"\r\n mat-flat-button\r\n color=\"primary\"\r\n class=\"title-bar-list-button\"\r\n (click)=\"onButtonClick(btn)\"\r\n [attr.id]=\"btn.id || ('title-bar-list-btn-' + (btn.action || btn.label || btn.key))\">\r\n <mat-icon>{{ btn.icon }}</mat-icon>\r\n <span>{{ btn.label | translate }}</span>\r\n </button>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [":host{display:block;width:100%}.mainTitleBar{display:flex;width:100%;gap:20px;align-items:center;justify-content:flex-start}.mainTitleBar.row{flex-direction:row;margin-left:0!important;margin-right:0!important;padding-bottom:20px;border-bottom:1px solid #F0EEEE}.mainTitleBar.column{flex-direction:column}.mainTitleBar .textTitle{flex:1 1 0;display:flex;flex-direction:column;width:auto;gap:12px}.mainTitleBar .textTitle h2{margin:0;padding:0;line-height:1.2}.mainTitleBar .textTitle__titleMode{font-weight:200;color:gray}.mainTitleBar .textTitle__subTitle{color:#888;font-size:16px;font-weight:300;font-style:normal}.mainTitleBar .textTitle .chips-container{margin-top:0}.mainTitleBar .end-items{display:flex;flex-direction:row;align-items:center;gap:20px}.mainTitleBar .buttons-wrapper{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex-direction:row;text-align-last:end;margin-left:0!important;margin-right:0!important}.mainTitleBar .buttons-wrapper .action-btn{width:210px!important}.mainTitleBar .title-bar-action-button{background:#0d4261!important;color:#fff!important;border-radius:8px!important;height:44px!important;padding:8px 12px!important;min-width:209px!important;box-shadow:none!important}.mainTitleBar .title-bar-action-button:hover{background:#0a3550!important}.mainTitleBar .title-bar-action-button .button-content{display:flex;align-items:center;justify-content:center;gap:8px;width:100%}.mainTitleBar .title-bar-action-button .button-icon{font-size:14px;width:14px;height:14px;color:#fff}.mainTitleBar .title-bar-action-button .button-label{font-weight:500;font-size:16px;line-height:1.2;color:#fff;white-space:nowrap;height:16px}.mainTitleBar .title-bar-action-button .button-arrow{font-size:14px;width:14px;height:14px;color:#fff;margin-left:auto}.mainTitleBar .actionButton{width:100%}.mainTitleBar .actionButton__expand{font-size:20px!important;color:var(--accent-color);margin-top:5px}.mainTitleBar .title-bar-list-button{background:#0d4261!important;color:#fff!important;border-radius:8px!important;height:44px!important;padding:8px 16px!important;min-width:auto!important;box-shadow:none!important;display:flex!important;align-items:center!important;gap:8px!important;font-weight:500!important;font-size:16px!important;line-height:1.2!important;white-space:nowrap!important;text-decoration:none!important;box-sizing:border-box!important;outline:none!important;cursor:pointer!important}.mainTitleBar .title-bar-list-button:hover{background:#0a3550!important}.mainTitleBar .title-bar-list-button mat-icon{font-size:20px!important;width:20px!important;height:28px!important;color:#fff!important;margin:0!important}.mainTitleBar .title-bar-list-button span{color:#fff!important}.mainTitleBar mat-chip-listbox{display:flex;flex-direction:row;gap:8px;align-items:center}.mainTitleBar mat-chip-listbox mat-chip-option{height:32px!important;min-height:32px!important;border-radius:8px!important;font-size:16px!important;line-height:1.2!important;font-weight:400!important;border:none!important;box-shadow:none!important;transition:all .2s ease;font-family:Lusail,sans-serif!important;padding:0!important}.mainTitleBar mat-chip-listbox mat-chip-option.mdc-evolution-chip--selected,.mainTitleBar mat-chip-listbox mat-chip-option[selected=true],.mainTitleBar mat-chip-listbox mat-chip-option[aria-selected=true]{background:#0d4261!important;color:#fff!important;font-weight:500!important}.mainTitleBar mat-chip-listbox mat-chip-option.mdc-evolution-chip--selected .mdc-evolution-chip__text-label,.mainTitleBar mat-chip-listbox mat-chip-option[selected=true] .mdc-evolution-chip__text-label,.mainTitleBar mat-chip-listbox mat-chip-option[aria-selected=true] .mdc-evolution-chip__text-label{color:#fff!important;font-weight:500!important;padding-left:4px!important}.mainTitleBar mat-chip-listbox mat-chip-option.mdc-evolution-chip--selected mat-icon,.mainTitleBar mat-chip-listbox mat-chip-option[selected=true] mat-icon,.mainTitleBar mat-chip-listbox mat-chip-option[aria-selected=true] mat-icon{color:#fff!important}.mainTitleBar mat-chip-listbox mat-chip-option:not(.mdc-evolution-chip--selected):not([selected=true]):not([aria-selected=true]){background:#e9e9e9!important;color:#000!important;font-weight:400!important}.mainTitleBar mat-chip-listbox mat-chip-option:not(.mdc-evolution-chip--selected):not([selected=true]):not([aria-selected=true]) .mdc-evolution-chip__text-label{color:#000!important;font-weight:400!important}.mainTitleBar mat-chip-listbox mat-chip-option .mdc-evolution-chip__action{padding:8px 12px!important;min-height:32px!important;display:flex!important;align-items:center!important;gap:4px!important}.mainTitleBar mat-chip-listbox mat-chip-option .mdc-evolution-chip__text-label{padding:0!important;font-size:16px!important;line-height:1.2!important;font-family:Lusail,sans-serif!important}.mainTitleBar mat-chip-listbox mat-chip-option mat-icon{font-size:14px!important;width:14px!important;height:14px!important;margin-right:4px!important}.mainTitleBar mat-chip-listbox mat-chip-option ::ng-deep .mdc-evolution-chip__graphic,.mainTitleBar mat-chip-listbox mat-chip-option ::ng-deep .mdc-evolution-chip__checkmark{display:none!important}.mainTitleBar mat-chip-listbox mat-chip-option ::ng-deep .mdc-evolution-chip__action--primary{padding:10px!important}.mainTitleBar mat-chip-listbox mat-chip-option:hover{opacity:.9}.row{display:flex;flex-direction:row;width:100%}.column{display:flex;flex-direction:column;width:auto}.fx-flex-fill{width:100%;height:100%;flex:1 1 auto}.flex-auto{flex:1 1 auto;display:flex;flex-direction:column}.end-items{align-items:flex-end}.gap-20{gap:20px}@media (max-width: 960px){.mainTitleBar.row.default-align{justify-content:flex-end}}@media (max-width: 768px){.mainTitleBar.row,.mainTitleBar.column{flex-direction:column;align-items:flex-start;gap:20px}.end-items{align-items:flex-start}}@media (max-width: 600px){.gap-20{gap:10px}}:host-context(html.high-contrast) .mainTitleBar .title-bar-list-button.mat-mdc-button-base,:host-context(html.high-contrast) .mainTitleBar a.title-bar-list-button,:host-context(html.high-contrast) .mainTitleBar button.title-bar-list-button{--mdc-filled-button-container-color: #000 !important;--mdc-filled-button-label-text-color: #fff !important;--mat-filled-button-state-layer-color: #fff !important;--mdc-filled-button-hover-state-layer-color: #fff !important;--mdc-filled-button-focus-state-layer-color: #fff !important;--mdc-filled-button-pressed-state-layer-color: #fff !important;background-color:#000!important;background:#000!important;color:#fff!important;border:2px solid #000!important;text-decoration:none!important}:host-context(html.high-contrast) .mainTitleBar .title-bar-list-button.mat-mdc-button-base:hover,:host-context(html.high-contrast) .mainTitleBar a.title-bar-list-button:hover,:host-context(html.high-contrast) .mainTitleBar button.title-bar-list-button:hover{background-color:#000!important;background:#000!important}:host-context(html.high-contrast) .mainTitleBar .title-bar-list-button.mat-mdc-button-base mat-icon,:host-context(html.high-contrast) .mainTitleBar .title-bar-list-button.mat-mdc-button-base .mat-icon,:host-context(html.high-contrast) .mainTitleBar a.title-bar-list-button mat-icon,:host-context(html.high-contrast) .mainTitleBar a.title-bar-list-button .mat-icon,:host-context(html.high-contrast) .mainTitleBar button.title-bar-list-button mat-icon,:host-context(html.high-contrast) .mainTitleBar button.title-bar-list-button .mat-icon{color:#fff!important}:host-context(html.high-contrast) .mainTitleBar .title-bar-list-button.mat-mdc-button-base span,:host-context(html.high-contrast) .mainTitleBar a.title-bar-list-button span,:host-context(html.high-contrast) .mainTitleBar button.title-bar-list-button span{color:#fff!important}:host-context(html.high-contrast) .mainTitleBar .title-bar-list-button.mat-mdc-button-base .mdc-button__label,:host-context(html.high-contrast) .mainTitleBar a.title-bar-list-button .mdc-button__label,:host-context(html.high-contrast) .mainTitleBar button.title-bar-list-button .mdc-button__label{color:#fff!important}:host-context(html.high-contrast) .mainTitleBar .title-bar-action-button.mat-mdc-button-base,:host-context(html.high-contrast) .mainTitleBar button.title-bar-action-button{--mdc-filled-button-container-color: #000 !important;--mdc-filled-button-label-text-color: #fff !important;--mat-filled-button-state-layer-color: #fff !important;--mdc-filled-button-hover-state-layer-color: #fff !important;--mdc-filled-button-focus-state-layer-color: #fff !important;--mdc-filled-button-pressed-state-layer-color: #fff !important;background-color:#000!important;background:#000!important;color:#fff!important;border:2px solid #000!important}:host-context(html.high-contrast) .mainTitleBar .title-bar-action-button.mat-mdc-button-base:hover,:host-context(html.high-contrast) .mainTitleBar button.title-bar-action-button:hover{background-color:#000!important;background:#000!important}:host-context(html.high-contrast) .mainTitleBar .title-bar-action-button.mat-mdc-button-base .button-icon,:host-context(html.high-contrast) .mainTitleBar .title-bar-action-button.mat-mdc-button-base .button-label,:host-context(html.high-contrast) .mainTitleBar .title-bar-action-button.mat-mdc-button-base .button-arrow,:host-context(html.high-contrast) .mainTitleBar button.title-bar-action-button .button-icon,:host-context(html.high-contrast) .mainTitleBar button.title-bar-action-button .button-label,:host-context(html.high-contrast) .mainTitleBar button.title-bar-action-button .button-arrow{color:#fff!important}\n"] }]
|
|
744
|
+
], template: "<div class=\"row mainTitleBar gap-20 default-align\">\r\n\r\n <div class=\"column flex-auto textTitle\" >\r\n <h2 *ngIf=\"!pageInfo.hideTitle\" style=\"margin: 0;\">\r\n <span class=\"textTitle__titleMode\">{{ titleMode | translate }}</span>\r\n {{ listTitle | translate }}\r\n <span *ngIf=\"titleCorporateAdmin && isRoot\">({{ titleCorporateAdmin }})</span>\r\n {{ extraData }}\r\n </h2>\r\n <span *ngIf=\"subTitle\" class=\"textTitle__subTitle\">{{ subTitle | translate }}</span>\r\n <div *ngIf=\"pageInfo.draftSupported\" class=\"chips-container\">\r\n <mat-chip-listbox #box [attr.aria-label]=\"'BASE_TABLE.documentStatus' | translate\" [multiple]=\"false\" [value]=\"currentIsPending ? 'PENDING' : 'COMPLETED'\" (click)=\"$event.stopPropagation()\" (change)=\"onChipSelectionChange($event, box)\">\r\n <mat-chip-option [selected]=\"!currentIsPending\" [color]=\"'accent'\" value=\"COMPLETED\" (click)=\"$event.stopPropagation()\">\r\n <mat-icon *ngIf=\"!currentIsPending\" style=\"font-size: 14px; width: 14px; height: 14px; margin-right: 4px;\">check</mat-icon>\r\n {{'finished' | translate}}\r\n </mat-chip-option>\r\n <mat-chip-option [selected]=\"currentIsPending\" [color]=\"'accent'\" value=\"PENDING\" (click)=\"$event.stopPropagation()\">\r\n <mat-icon *ngIf=\"currentIsPending\" style=\"font-size: 14px; width: 14px; height: 14px; margin-right: 4px;\">check</mat-icon>\r\n {{'todo' | translate}}\r\n </mat-chip-option>\r\n </mat-chip-listbox>\r\n </div>\r\n </div>\r\n\r\n <div class=\"column end-items gap-20\">\r\n <button type=\"button\" mat-flat-button color=\"primary\" style=\"width: 100px\" *ngIf=\"!hideBackButton\" (click)=\"goBack()\" id=\"title-bar-back-btn\">\r\n <mat-icon color=\"second\">{{ backIcon }}</mat-icon>\r\n <span style=\"font-weight: bold\">{{ 'back' | translate }}</span>\r\n </button>\r\n\r\n <div class=\"row flex-auto gap-20 buttons-wrapper\">\r\n <ng-container *ngIf=\"buttonsDisplayMode === 'dropdown'\">\r\n <button\r\n type=\"button\"\r\n *ngIf=\"buttons && buttons.length > 0\"\r\n mat-flat-button\r\n [matMenuTriggerFor]=\"actionMenu\"\r\n class=\"title-bar-action-button\"\r\n [attr.id]=\"'title-bar-action-button'\">\r\n <div class=\"button-content\">\r\n <mat-icon class=\"button-icon\">{{ buttons[0].icon }}</mat-icon>\r\n <span class=\"button-label\">{{ buttons[0].label | translate }}</span>\r\n <mat-icon class=\"button-arrow\">keyboard_arrow_down</mat-icon>\r\n </div>\r\n </button>\r\n <mat-menu #actionMenu=\"matMenu\" class=\"title-bar-action-menu\">\r\n <ng-container *ngFor=\"let btn of buttons\">\r\n <a\r\n *ngIf=\"resolveButtonHref(btn) as href\"\r\n mat-menu-item\r\n [href]=\"href\"\r\n (click)=\"onButtonClick(btn, $event)\"\r\n [attr.id]=\"btn.id || ('title-bar-menu-btn-' + (btn.action || btn.label || btn.key))\">\r\n <mat-icon>{{ btn.icon }}</mat-icon>\r\n <span>{{ btn.label | translate }}</span>\r\n </a>\r\n <button\r\n *ngIf=\"!resolveButtonHref(btn)\"\r\n type=\"button\"\r\n mat-menu-item\r\n (click)=\"onButtonClick(btn)\"\r\n [attr.id]=\"btn.id || ('title-bar-menu-btn-' + (btn.action || btn.label || btn.key))\">\r\n <mat-icon>{{ btn.icon }}</mat-icon>\r\n <span>{{ btn.label | translate }}</span>\r\n </button>\r\n </ng-container>\r\n </mat-menu>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"buttonsDisplayMode === 'list'\">\r\n <ng-container *ngFor=\"let btn of buttons\">\r\n <a\r\n *ngIf=\"resolveButtonHref(btn) as href\"\r\n mat-flat-button\r\n color=\"primary\"\r\n class=\"title-bar-list-button\"\r\n [href]=\"href\"\r\n (click)=\"onButtonClick(btn, $event)\"\r\n [attr.id]=\"btn.id || ('title-bar-list-btn-' + (btn.action || btn.label || btn.key))\">\r\n <mat-icon>{{ btn.icon }}</mat-icon>\r\n <span>{{ btn.label | translate }}</span>\r\n </a>\r\n <button\r\n *ngIf=\"!resolveButtonHref(btn)\"\r\n type=\"button\"\r\n mat-flat-button\r\n color=\"primary\"\r\n class=\"title-bar-list-button\"\r\n (click)=\"onButtonClick(btn)\"\r\n [attr.id]=\"btn.id || ('title-bar-list-btn-' + (btn.action || btn.label || btn.key))\">\r\n <mat-icon>{{ btn.icon }}</mat-icon>\r\n <span>{{ btn.label | translate }}</span>\r\n </button>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [":host{display:block;width:100%}.mainTitleBar{display:flex;width:100%;gap:20px;align-items:center;justify-content:flex-start}.mainTitleBar.row{flex-direction:row;margin-left:0!important;margin-right:0!important;padding-bottom:20px;border-bottom:1px solid #F0EEEE}.mainTitleBar.column{flex-direction:column}.mainTitleBar .textTitle{flex:1 1 0;display:flex;flex-direction:column;width:auto;gap:12px}.mainTitleBar .textTitle h2{margin:0;padding:0;line-height:1.2}.mainTitleBar .textTitle__titleMode{font-weight:200;color:gray}.mainTitleBar .textTitle__subTitle{color:#888;font-size:16px;font-weight:300;font-style:normal}.mainTitleBar .textTitle .chips-container{margin-top:0}.mainTitleBar .end-items{display:flex;flex-direction:row;align-items:center;gap:20px}.mainTitleBar .buttons-wrapper{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex-direction:row;text-align-last:end;margin-left:0!important;margin-right:0!important}.mainTitleBar .buttons-wrapper .action-btn{width:210px!important}.mainTitleBar .title-bar-action-button{background:#0d4261!important;color:#fff!important;border-radius:8px!important;height:44px!important;padding:8px 12px!important;min-width:209px!important;box-shadow:none!important}.mainTitleBar .title-bar-action-button:focus-visible{outline:3px solid #fff!important;outline-offset:3px!important;position:relative;z-index:1}.mainTitleBar .title-bar-action-button:hover{background:#0a3550!important}.mainTitleBar .title-bar-action-button .button-content{display:flex;align-items:center;justify-content:center;gap:8px;width:100%}.mainTitleBar .title-bar-action-button .button-icon{font-size:14px;width:14px;height:14px;color:#fff}.mainTitleBar .title-bar-action-button .button-label{font-weight:500;font-size:16px;line-height:1.2;color:#fff;white-space:nowrap;height:16px}.mainTitleBar .title-bar-action-button .button-arrow{font-size:14px;width:14px;height:14px;color:#fff;margin-left:auto}.mainTitleBar .actionButton{width:100%}.mainTitleBar .actionButton__expand{font-size:20px!important;color:var(--accent-color);margin-top:5px}.mainTitleBar .title-bar-list-button{background:#0d4261!important;color:#fff!important;border-radius:8px!important;height:44px!important;padding:8px 16px!important;min-width:auto!important;box-shadow:none!important;display:flex!important;align-items:center!important;gap:8px!important;font-weight:500!important;font-size:16px!important;line-height:1.2!important;white-space:nowrap!important;text-decoration:none!important;box-sizing:border-box!important;cursor:pointer!important}.mainTitleBar .title-bar-list-button:focus-visible{outline:3px solid #0d4261!important;outline-offset:3px!important;position:relative;z-index:1}.mainTitleBar .title-bar-list-button:hover{background:#0a3550!important}.mainTitleBar .title-bar-list-button mat-icon{font-size:20px!important;width:20px!important;height:28px!important;color:#fff!important;margin:0!important}.mainTitleBar .title-bar-list-button span{color:#fff!important}.mainTitleBar mat-chip-listbox{display:flex;flex-direction:row;gap:8px;align-items:center}.mainTitleBar mat-chip-listbox mat-chip-option{height:32px!important;min-height:32px!important;border-radius:8px!important;font-size:16px!important;line-height:1.2!important;font-weight:400!important;border:none!important;box-shadow:none!important;transition:all .2s ease;font-family:Lusail,sans-serif!important;padding:0!important}.mainTitleBar mat-chip-listbox mat-chip-option.mdc-evolution-chip--selected,.mainTitleBar mat-chip-listbox mat-chip-option[selected=true],.mainTitleBar mat-chip-listbox mat-chip-option[aria-selected=true]{background:#0d4261!important;color:#fff!important;font-weight:500!important}.mainTitleBar mat-chip-listbox mat-chip-option.mdc-evolution-chip--selected .mdc-evolution-chip__text-label,.mainTitleBar mat-chip-listbox mat-chip-option[selected=true] .mdc-evolution-chip__text-label,.mainTitleBar mat-chip-listbox mat-chip-option[aria-selected=true] .mdc-evolution-chip__text-label{color:#fff!important;font-weight:500!important;padding-left:4px!important}.mainTitleBar mat-chip-listbox mat-chip-option.mdc-evolution-chip--selected mat-icon,.mainTitleBar mat-chip-listbox mat-chip-option[selected=true] mat-icon,.mainTitleBar mat-chip-listbox mat-chip-option[aria-selected=true] mat-icon{color:#fff!important}.mainTitleBar mat-chip-listbox mat-chip-option:not(.mdc-evolution-chip--selected):not([selected=true]):not([aria-selected=true]){background:#e9e9e9!important;color:#000!important;font-weight:400!important}.mainTitleBar mat-chip-listbox mat-chip-option:not(.mdc-evolution-chip--selected):not([selected=true]):not([aria-selected=true]) .mdc-evolution-chip__text-label{color:#000!important;font-weight:400!important}.mainTitleBar mat-chip-listbox mat-chip-option .mdc-evolution-chip__action{padding:8px 12px!important;min-height:32px!important;display:flex!important;align-items:center!important;gap:4px!important}.mainTitleBar mat-chip-listbox mat-chip-option .mdc-evolution-chip__text-label{padding:0!important;font-size:16px!important;line-height:1.2!important;font-family:Lusail,sans-serif!important}.mainTitleBar mat-chip-listbox mat-chip-option mat-icon{font-size:14px!important;width:14px!important;height:14px!important;margin-right:4px!important}.mainTitleBar mat-chip-listbox mat-chip-option ::ng-deep .mdc-evolution-chip__graphic,.mainTitleBar mat-chip-listbox mat-chip-option ::ng-deep .mdc-evolution-chip__checkmark{display:none!important}.mainTitleBar mat-chip-listbox mat-chip-option ::ng-deep .mdc-evolution-chip__action--primary{padding:10px!important}.mainTitleBar mat-chip-listbox mat-chip-option:hover{opacity:.9}.row{display:flex;flex-direction:row;width:100%}.column{display:flex;flex-direction:column;width:auto}.fx-flex-fill{width:100%;height:100%;flex:1 1 auto}.flex-auto{flex:1 1 auto;display:flex;flex-direction:column}.end-items{align-items:flex-end}.gap-20{gap:20px}@media (max-width: 960px){.mainTitleBar.row.default-align{justify-content:flex-end}}@media (max-width: 768px){.mainTitleBar.row,.mainTitleBar.column{flex-direction:column;align-items:flex-start;gap:20px}.end-items{align-items:flex-start}}@media (max-width: 600px){.gap-20{gap:10px}}:host-context(html.high-contrast) .mainTitleBar .title-bar-list-button.mat-mdc-button-base,:host-context(html.high-contrast) .mainTitleBar a.title-bar-list-button,:host-context(html.high-contrast) .mainTitleBar button.title-bar-list-button{--mdc-filled-button-container-color: #000 !important;--mdc-filled-button-label-text-color: #fff !important;--mat-filled-button-state-layer-color: #fff !important;--mdc-filled-button-hover-state-layer-color: #fff !important;--mdc-filled-button-focus-state-layer-color: #fff !important;--mdc-filled-button-pressed-state-layer-color: #fff !important;background-color:#000!important;background:#000!important;color:#fff!important;border:2px solid #000!important;text-decoration:none!important}:host-context(html.high-contrast) .mainTitleBar .title-bar-list-button.mat-mdc-button-base:hover,:host-context(html.high-contrast) .mainTitleBar a.title-bar-list-button:hover,:host-context(html.high-contrast) .mainTitleBar button.title-bar-list-button:hover{background-color:#000!important;background:#000!important}:host-context(html.high-contrast) .mainTitleBar .title-bar-list-button.mat-mdc-button-base mat-icon,:host-context(html.high-contrast) .mainTitleBar .title-bar-list-button.mat-mdc-button-base .mat-icon,:host-context(html.high-contrast) .mainTitleBar a.title-bar-list-button mat-icon,:host-context(html.high-contrast) .mainTitleBar a.title-bar-list-button .mat-icon,:host-context(html.high-contrast) .mainTitleBar button.title-bar-list-button mat-icon,:host-context(html.high-contrast) .mainTitleBar button.title-bar-list-button .mat-icon{color:#fff!important}:host-context(html.high-contrast) .mainTitleBar .title-bar-list-button.mat-mdc-button-base span,:host-context(html.high-contrast) .mainTitleBar a.title-bar-list-button span,:host-context(html.high-contrast) .mainTitleBar button.title-bar-list-button span{color:#fff!important}:host-context(html.high-contrast) .mainTitleBar .title-bar-list-button.mat-mdc-button-base .mdc-button__label,:host-context(html.high-contrast) .mainTitleBar a.title-bar-list-button .mdc-button__label,:host-context(html.high-contrast) .mainTitleBar button.title-bar-list-button .mdc-button__label{color:#fff!important}:host-context(html.high-contrast) .mainTitleBar .title-bar-action-button.mat-mdc-button-base,:host-context(html.high-contrast) .mainTitleBar button.title-bar-action-button{--mdc-filled-button-container-color: #000 !important;--mdc-filled-button-label-text-color: #fff !important;--mat-filled-button-state-layer-color: #fff !important;--mdc-filled-button-hover-state-layer-color: #fff !important;--mdc-filled-button-focus-state-layer-color: #fff !important;--mdc-filled-button-pressed-state-layer-color: #fff !important;background-color:#000!important;background:#000!important;color:#fff!important;border:2px solid #000!important}:host-context(html.high-contrast) .mainTitleBar .title-bar-action-button.mat-mdc-button-base:hover,:host-context(html.high-contrast) .mainTitleBar button.title-bar-action-button:hover{background-color:#000!important;background:#000!important}:host-context(html.high-contrast) .mainTitleBar .title-bar-action-button.mat-mdc-button-base .button-icon,:host-context(html.high-contrast) .mainTitleBar .title-bar-action-button.mat-mdc-button-base .button-label,:host-context(html.high-contrast) .mainTitleBar .title-bar-action-button.mat-mdc-button-base .button-arrow,:host-context(html.high-contrast) .mainTitleBar button.title-bar-action-button .button-icon,:host-context(html.high-contrast) .mainTitleBar button.title-bar-action-button .button-label,:host-context(html.high-contrast) .mainTitleBar button.title-bar-action-button .button-arrow{color:#fff!important}\n"] }]
|
|
745
745
|
}], ctorParameters: () => [{ type: i1$1.Location }, { type: i3$1.Directionality }], propDecorators: { pageTitle: [{
|
|
746
746
|
type: Input
|
|
747
747
|
}], showExtractButton: [{
|
|
@@ -2722,7 +2722,7 @@ class BaseFormCanvasComponent {
|
|
|
2722
2722
|
},
|
|
2723
2723
|
{ provide: MAT_DATE_FORMATS, useValue: DD_MM_YYYY_Format },
|
|
2724
2724
|
{ provide: MAT_DATE_LOCALE, useValue: 'en-GB' }
|
|
2725
|
-
], viewQueries: [{ propertyName: "fieldsInput", first: true, predicate: ["EquationValueInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"main-form-canvas\">\r\n <div class=\"form-wrapper\">\r\n <ng-container *ngIf=\"defaults\">\r\n <ng-container *ngIf=\"editable; else readonlyView\" class=\"form-container\">\r\n <form [formGroup]=\"formParam\" class=\"form-content\">\r\n <div class=\"form-row\">\r\n <div class=\"form-column\">\r\n <ng-container *ngFor=\"let row of screenFields | keyvalue\">\r\n <div class=\"row-container\">\r\n <ng-container *ngFor=\"let field of row.value\">\r\n <div class=\"field-column\" [style.flex]=\"field.fieldSize ? ('0 0 ' + field.fieldSize + '%') : '1 1 0'\">\r\n <ng-container [ngSwitch]=\"field.type\">\r\n <ng-container *ngSwitchCase=\"'date'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n </div>\r\n\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput\r\n [matDatepicker]=\"picker\"\r\n [min]=\"minDate\"\r\n (dateChange)=\"formParam.get(field.property).setValue($event.value)\"\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [readonly]=\"field.readonly\"\r\n formControlName=\"{{field.property}}\"\r\n [required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\r\n\r\n <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n\r\n <mat-datepicker #picker\r\n [startView]=\"getView(field)\"\r\n (yearSelected)=\"setMonthAndYear($event, picker, field)\"\r\n panelClass=\"example-month-picker\">\r\n </mat-datepicker>\r\n\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'phone-number'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container class=\"custom-ngx-mat-intl-tel-input\" *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <div class=\"phone-input-wrapper\">\r\n <ngx-mat-intl-tel-input\r\n formControlName=\"{{ field.property }}\"\r\n [inputPlaceholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [preferredCountries]=\"['qa']\"\r\n [enablePlaceholder]=\"true\"\r\n [enableSearch]=\"true\"\r\n [onlyCountries]=\"getCountryCodeList()\"\r\n [required]=\"field.required\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\r\n </ngx-mat-intl-tel-input>\r\n </div>\r\n\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n\r\n <ng-container *ngSwitchCase=\"'iban-text'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"textReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <input class=\"app-input\"\r\n formControlName=\"{{ field.property }}\"\r\n matInput\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [readonly]=\"field.readonly\"\r\n [required]=\"field.required\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'password'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput\r\n class=\"app-input\"\r\n formControlName=\"{{ field.property }}\"\r\n [type]=\"hide && !field.disabled ? 'password' : 'text'\"\r\n [readonly]=\"field.readonly\"\r\n [required]=\"field.required\"\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\r\n <!-- <mat-icon matSuffix-->\r\n <!-- (click)=\"hide = !hide\">-->\r\n <!-- {{ hide ? 'visibility_off' : 'visibility' }}-->\r\n <!-- </mat-icon>-->\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'text'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"textReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <mat-icon *ngIf=\"field.showSearchIcon\" matPrefix>search</mat-icon>\r\n <input class=\"app-input\"\r\n formControlName=\"{{ field.property }}\"\r\n matInput\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [readonly]=\"field.readonly\"\r\n [required]=\"field.required\"\r\n (keyup)=\"fixArabicNumbers($event.target)\"\r\n [attr.aria-required]=\"field.required\"\r\n [maxDigits]=\"field.maxLength\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\r\n <span\r\n *ngIf=\"field.showSearchIcon && !field.readonly && (formParam?.get([field.property])?.value ?? '') !== ''\"\r\n matSuffix\r\n class=\"clear-icon-suffix\">\r\n <button\r\n mat-icon-button\r\n type=\"button\"\r\n class=\"clear-icon-button\"\r\n [attr.aria-label]=\"'BASE_TABLE.clearField' | translate\"\r\n (click)=\"clearFieldValue(field.property)\">\r\n <mat-icon aria-hidden=\"true\">close</mat-icon>\r\n </button>\r\n </span>\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'multi-state-checkbox'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"multi-state-filter\" [formGroup]=\"formParam\">\r\n <button\r\n type=\"button\"\r\n class=\"multi-state-filter__trigger\"\r\n [matMenuTriggerFor]=\"statusMultiMenu\"\r\n [attr.aria-haspopup]=\"true\"\r\n [attr.aria-expanded]=\"false\"\r\n [attr.aria-label]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : (field.label | translate)\">\r\n <span\r\n class=\"multi-state-filter__trigger-text\"\r\n [class.multi-state-filter__trigger-text--placeholder]=\"isMultiStateEmpty(field.property)\">\r\n {{\r\n getMultiStateFilterTriggerLabel(field)\r\n || (field.placeholder\r\n ? (labelKeyPlaceHolder(field) | translate)\r\n : ('FILTER-BUILDER.selectStatus' | translate))\r\n }}\r\n </span>\r\n <mat-icon class=\"multi-state-filter__chevron\" aria-hidden=\"true\">keyboard_arrow_down</mat-icon>\r\n </button>\r\n <mat-menu #statusMultiMenu=\"matMenu\" class=\"multi-state-filter__menu-panel\" [hasBackdrop]=\"true\">\r\n <div\r\n class=\"multi-state-filter__menu-inner\"\r\n (click)=\"$event.stopPropagation()\"\r\n (keydown)=\"onMultiStateMenuInnerKeydown($event, field)\">\r\n <div\r\n *ngFor=\"let code of field.listOptions || []\"\r\n mat-menu-item\r\n class=\"multi-state-filter__row\"\r\n [attr.data-multi-state-code]=\"code\"\r\n (click)=\"onMultiStateRowClick($event, field.property, code)\">\r\n <mat-checkbox\r\n tabindex=\"-1\"\r\n (click)=\"$event.stopPropagation()\"\r\n [checked]=\"isMultiStateSelected(field.property, code)\"\r\n (change)=\"toggleMultiStateFilter(field.property, code, $event.checked)\">\r\n </mat-checkbox>\r\n <span\r\n class=\"multi-state-filter__pill stateType\"\r\n [ngClass]=\"code\">\r\n {{ statusOptionLabelKey(field, code) | translate }}\r\n </span>\r\n </div>\r\n </div>\r\n </mat-menu>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'chip-list'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n\r\n <mat-chip-grid [attr.aria-labelledby]=\"'label-' + field.property\"\r\n formControlName=\"{{ field.property }}\">\r\n <mat-chip-row\r\n *ngFor=\"let mail of splittedChips(formParam, field.property); let idx = index\"\r\n [removable]=\"removable\"\r\n (removed)=\"removeChipsItem(formParam, field.property, idx)\">\r\n {{ mail }}\r\n <mat-icon matChipRemove *ngIf=\"removable\">cancel</mat-icon>\r\n </mat-chip-row>\r\n\r\n <input [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\r\n [matChipInputFor]=\"null\"\r\n [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\r\n [matChipInputAddOnBlur]=\"addOnBlur\"\r\n (matChipInputTokenEnd)=\"addEmailToChips($event, formParam, field.property)\">\r\n </mat-chip-grid>\r\n <mat-error id=\"error-{{ field.property }}\" *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'amount'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"amountReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <input class=\"app-input\"\r\n formControlName=\"{{ field.property }}\"\r\n matInput\r\n type=\"number\"\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [readonly]=\"field.readonly\"\r\n [required]=\"field.required\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'sequence'\">\r\n <ng-container\r\n *ngIf=\"referenceAttributeTrue(field.property, 'autoGenerated'); else noSequence\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <input class=\"app-input\"\r\n formControlName=\"{{ field.property }}\"\r\n matInput\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [readonly]=\"true\"\r\n [disabled]=\"true\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\">\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-template #noSequence>\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <input class=\"app-input\"\r\n formControlName=\"{{ field.property }}\"\r\n matInput\r\n [readonly]=\"false\"\r\n [disabled]=\"false\"\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [required]=\"field.required\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n </ng-template>\r\n\r\n <ng-container *ngSwitchCase=\"'textarea'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"textareaReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <textarea cdkFocusInitial\r\n formControlName=\"{{ field.property }}\"\r\n matInput\r\n cdkTextareaAutosize\r\n cdkAutosizeMinRows=\"3\"\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\r\n [readonly]=\"field.readonly\"\r\n [required]=\"field.required\"></textarea>\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'number'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"numberReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <input class=\"app-input\"\r\n formControlName=\"{{ field.property }}\"\r\n matInput\r\n type=\"number\"\r\n [attr.min]=\"field.allowNegative ? null : 0\"\r\n (keydown)=\"blockNegativeNumberKeydown($event, field)\"\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [maxDigits]=\"field.maxLength\"\r\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\r\n [required]=\"field.readonly ? false : field.required\"\r\n [readonly]=\"field.readonly\"\r\n [pattern]=\"field.pattern\">\r\n <mat-error id=\"error-{{ field.property }}\" *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'bigdecimal'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"numberReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <input\r\n matInput\r\n type=\"text\"\r\n inputmode=\"numeric\"\r\n formControlName=\"{{ field.property }}\"\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n numbersOnly [maxDecimals]=\"field.maxDecimals\"\r\n [maxDigits]=\"field.maxLength\"\r\n [pattern]=\"field.pattern\"\r\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\r\n [required]=\"field.readonly ? false : field.required\"\r\n [readonly]=\"field.readonly\">\r\n <mat-error id=\"error-{{ field.property }}\" *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'time'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"timeReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <input\r\n matInput\r\n class=\"app-input\"\r\n formControlName=\"{{ field.property }}\"\r\n type=\"time\"\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [readonly]=\"field.readonly\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\r\n [required]=\"field.required\">\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'checkbox'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"checkboxReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <mat-checkbox\r\n appearance=\"outline\"\r\n style=\"padding-bottom: 14px; padding-top: 14px;\"\r\n [disabled]=\"field.readonly\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\r\n formControlName=\"{{ field.property }}\">\r\n {{ field.label! | translate }}\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-checkbox>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'toggle'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"toggleReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n </div>\r\n <mat-slide-toggle\r\n [disabled]=\"field.readonly\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\r\n formControlName=\"{{ field.property }}\">\r\n </mat-slide-toggle>\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'color-picker'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <div fxLayout=\"row\" fxLayoutAlign=\"center\">\r\n <h4 style=\"margin-right: 10px\">{{ field.label! | translate }}</h4>\r\n <input\r\n ejs-colorpicker\r\n type=\"color\"\r\n id=\"colorpicker\"\r\n formControlName=\"{{ field.property }}\"\r\n [attr.aria-label]=\"field.label! | translate\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\r\n />\r\n </div>\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </ng-container>\r\n </ng-container>\r\n\r\n\r\n <ng-container *ngSwitchCase=\"'radio-button'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"radioButtonReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <mat-radio-group\r\n formControlName=\"{{field.property}}\"\r\n class=\"app-radio\"\r\n [attr.aria-label]=\"field.label! | translate\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\r\n <div class=\"field-row\">\r\n <div class=\"field-label\">\r\n <span class=\"custom-label\">{{ field.label! | translate }}</span>\r\n </div>\r\n <div class=\"field-input\">\r\n <div class=\"radio-group-custom\">\r\n <mat-radio-button\r\n *ngFor=\"let option of field.listOptions\"\r\n [value]=\"option\"\r\n [attr.aria-labelledby]=\"option\">\r\n {{ option | translate }}\r\n </mat-radio-button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-radio-group>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'list'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"listReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\" style=\"width: 100%\">\r\n <mat-select\r\n formControlName=\"{{field.property}}\"\r\n [attr.aria-label]=\"field.label! | translate\"\r\n [attr.aria-required]=\"field.required\"\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\r\n [disabled]=\"field.readonly\"\r\n [multiple]=\"field.multi || false\"\r\n [required]=\"field.readonly ? false : field.required\"\r\n [(value)]=\"field.defaultListOption\">\r\n <ng-container *ngIf=\"field.translate; else lookup_no_translation\">\r\n <mat-option\r\n *ngFor=\"let item of field.listOptions; let i = index\"\r\n [value]=\"item\">\r\n {{ friendlyName(field.label, field.property, item) | translate }}\r\n </mat-option>\r\n </ng-container>\r\n <ng-template #lookup_no_translation>\r\n <mat-option\r\n *ngFor=\"let item of field.listOptions\"\r\n [value]=\"item\">\r\n {{ getOptionValue(item) }}\r\n </mat-option>\r\n </ng-template>\r\n </mat-select>\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'attachment'\" [formGroup]=\"formParam\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n </div>\r\n <app-attachment-uploader\r\n [acceptedTypes]=\"getAcceptedFileTypes(field)\"\r\n [ariaDescribedBy]=\"showError(field.property) ? 'error-' + field.property : null\"\r\n (fileSelected)=\"onAttachmentFileSelected($event, field)\"\r\n style=\"margin-top: 5px\">\r\n </app-attachment-uploader>\r\n </ng-container>\r\n <mat-error class=\"iq-error\"\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'lookup'\" [formGroup]=\"formParam\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"lookupReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <app-auto-complete\r\n [form]=\"formParam\"\r\n [field]=\"field\"\r\n [supportingAttributes]=\"supportingAttributes\"\r\n [defaultValue]=\"this.formParam.get(field.property)?.value\"\r\n (selectedValue)=\"patchLookupValue($event, field.property)\">\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </app-auto-complete>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'currency'\" [formGroup]=\"formParam\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"currencyReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <!-- Uncomment and use the currency control when ready -->\r\n <!-- <app-currency\r\n [form]=\"formParam\"\r\n [field]=\"field\"\r\n [defaultValue]=\"this.formParam.get(field.property)?.value\"\r\n (selectedValue)=\"patchCurrencyValue($event, field.property)\">\r\n </app-currency> -->\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'multi-select'\" [formGroup]=\"formParam\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"multiSelectReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <app-multi-auto-complete\r\n [form]=\"formParam\"\r\n [field]=\"field\"\r\n [defaultValue]=\"getMultiValue(field)\"\r\n (selectedValue)=\"patchMultiSelectValue($event, field.property)\">\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </app-multi-auto-complete>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n\r\n <ng-container *ngSwitchCase=\"'rich-text'\" [formGroup]=\"formParam\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <!-- Uncomment and use the rich text editor when ready -->\r\n <!-- <ckeditor\r\n [editor]=\"Editor\"\r\n [disabled]=\"field.readonly\"\r\n formControlName=\"{{field.property}}\">\r\n </ckeditor> -->\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'divider'\">\r\n <mat-divider></mat-divider>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'hyper-text'\">\r\n <div>\r\n <mat-label\r\n (click)=\"getHyperTextEvent()\"\r\n class=\"hyper-link\">\r\n {{ field.label! | translate }}\r\n </mat-label>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'section-title'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <div class=\"hrdivider-mid\">\r\n <span>{{ field.label | translate }}</span>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'equation-builder'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"textReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <input class=\"app-input\" dir=\"ltr\"\r\n formControlName=\"{{ field.property }}\"\r\n matInput\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [readonly]=\"field.readonly\"\r\n [required]=\"field.required\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n <!-- <ng-container *ngSwitchCase=\"'equation-builder'\" [formGroup]=\"formParam\">-->\r\n <!-- <ng-container *ngIf=\"showField(defaults, field)\">-->\r\n <!-- <ng-container *ngIf=\"!workflowEditableField(field)\">-->\r\n <!-- <ng-container-->\r\n <!-- [ngTemplateOutlet]=\"dateReadonly\"-->\r\n <!-- [ngTemplateOutletContext]=\"{ field: field }\">-->\r\n <!-- </ng-container>-->\r\n <!-- </ng-container>-->\r\n <!-- <ng-container *ngIf=\"workflowEditableField(field)\">-->\r\n <!-- <div style=\"display: flex; width: 350%\">-->\r\n <!-- <mat-label>{{ field.label! | translate }}</mat-label>-->\r\n <!-- <mat-form-field style=\"width: 400%\" appearance=\"outline\">-->\r\n <!-- <mat-chip-grid #chipGrid>-->\r\n <!-- <ng-container *ngFor=\"let equationValue of equationValues(); let i = index\">-->\r\n <!-- <mat-chip-row (removed)=\"remove(equationValue, i)\">-->\r\n <!-- {{ equationValue }}-->\r\n <!-- <button-->\r\n <!-- matChipRemove-->\r\n <!-- [attr.aria-label]=\"'remove ' + equationValue\">-->\r\n <!-- <mat-icon>cancel</mat-icon>-->\r\n <!-- </button>-->\r\n <!-- </mat-chip-row>-->\r\n <!-- </ng-container>-->\r\n <!-- </mat-chip-grid>-->\r\n <!-- <input-->\r\n <!-- [(ngModel)]=\"currentEquationValue\"-->\r\n <!-- [matChipInputFor]=\"chipGrid\"-->\r\n <!-- [matAutocomplete]=\"auto\"-->\r\n <!-- [ngModelOptions]=\"{ standalone: true }\"-->\r\n <!-- [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"-->\r\n <!-- (matChipInputTokenEnd)=\"add($event)\"-->\r\n <!-- aria-label=\"Add equation value\" />-->\r\n <!-- <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"selected($event)\">-->\r\n <!-- <ng-container *ngFor=\"let filteredField of (equationFilteredFields() | async)\">-->\r\n <!-- <mat-option [value]=\"filteredField\">{{ filteredField }}</mat-option>-->\r\n <!-- </ng-container>-->\r\n <!-- </mat-autocomplete>-->\r\n <!-- </mat-form-field>-->\r\n <!-- </div>-->\r\n <!-- <mat-error class=\"iq-error\" *ngIf=\"showError(field.property)\" aria-live=\"assertive\">-->\r\n <!-- {{ getErrors(field.property) | translate }}-->\r\n <!-- </mat-error>-->\r\n <!-- </ng-container>-->\r\n <!-- </ng-container>-->\r\n <!-- </ng-container>-->\r\n\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </form>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n\r\n</div>\r\n<ng-template #dateReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) | date: getReadonlyDateFormat(field) }}</span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #timeReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">{{ formatTimeToDate(defaults[field.property]) | date: 'shortTime' }}</span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #phoneNumberReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #textReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\" *ngIf=\"!field.advancedFilter\"></label>\r\n <ng-container *ngIf=\"isReadonlyTextValueEmpty(defaults, field) && field.emptyReadonlyPlaceholderKey; else textReadonlyHasValue\">\r\n <span class=\"readonly-value readonly-value--empty\">{{ field.emptyReadonlyPlaceholderKey | translate }}</span>\r\n </ng-container>\r\n <ng-template #textReadonlyHasValue>\r\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\r\n </ng-template>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #textareaReadonly let-field=\"field\">\r\n <ng-container *ngIf=\"field.textFormat === 'json'; else normalText\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <div class=\"readonly-value json-viewer\">\r\n <ngx-json-viewer [json]=\"extractJsonFieldName(defaults, field.property)\" [expanded]=\"true\"></ngx-json-viewer>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-template #normalText>\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\r\n </div>\r\n </ng-template>\r\n</ng-template>\r\n\r\n<ng-template #numberReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #currencyReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #radioButtonReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">{{ translateLable(defaults[field.property]) }}</span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #richTextReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\" [innerHtml]=\"extractFieldName(defaults, field.property)\"></span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #checkboxReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">\r\n <mat-icon color=\"warn\" *ngIf=\"extractFieldName(defaults, field.property); else showNo\">done</mat-icon>\r\n <ng-template #showNo>\r\n <mat-icon color=\"warn\">close</mat-icon>\r\n </ng-template>\r\n </span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #toggleReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">\r\n <mat-icon color=\"warn\" *ngIf=\"extractFieldName(defaults, field.property); else showNo\">done</mat-icon>\r\n <ng-template #showNo>\r\n <mat-icon color=\"warn\">close</mat-icon>\r\n </ng-template>\r\n </span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #listReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\" *ngIf=\"field.translate; else noTranslate\">\r\n {{ listShowValue(defaults, field) | translate }}\r\n </span>\r\n <ng-template #noTranslate>\r\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\r\n </ng-template>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #sequenceReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #lookupReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">\r\n {{ extractFieldName(defaults, field.property)?.[translateService.getDefaultLang() === 'en' ? 'englishName' : 'arabicName'] }}\r\n </span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #amountReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">\r\n {{ extractFieldName(defaults, field.property) | currency: currency }}\r\n </span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #multiSelectReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <mat-chip-grid class=\"readonly-value chipList\">\r\n <mat-chip *ngFor=\"let filedProp of showMultiSelectValuesAsReadonly(field)\">\r\n {{ filedProp }}\r\n </mat-chip>\r\n </mat-chip-grid>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #chipListReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHTML]=\"field.label | translate\"></label>\r\n <mat-chip-listbox class=\"readonly-value chipList\">\r\n <mat-chip-option *ngFor=\"let loc of splitReadonly(extractFieldName(defaults, field.property))\"\r\n [selectable]=\"true\"\r\n color=\"warn\"\r\n [removable]=\"false\">\r\n {{ loc }}\r\n </mat-chip-option>\r\n </mat-chip-listbox>\r\n </div>\r\n</ng-template>\r\n\r\n\r\n<ng-template #readonlyView>\r\n <div class=\"row-wrapper\">\r\n <div class=\"column-wrapper\">\r\n <ng-container *ngFor=\"let row of screenFields | keyvalue\">\r\n <div class=\"row-container\">\r\n <ng-container *ngFor=\"let field of row.value\">\r\n <div class=\"field-column readonly-item\" [style.flex]=\"field.fieldSize ? ('0 0 ' + field.fieldSize + '%') : '1 1 0'\">\r\n\r\n <ng-container [ngSwitch]=\"field.type\">\r\n\r\n <ng-container *ngSwitchCase=\"'date'\">\r\n <ng-container [ngTemplateOutlet]=\"dateReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'time'\">\r\n <ng-container [ngTemplateOutlet]=\"timeReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'phone-number'\">\r\n <ng-container [ngTemplateOutlet]=\"phoneNumberReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'text'\">\r\n <ng-container [ngTemplateOutlet]=\"textReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'textarea'\">\r\n <ng-container [ngTemplateOutlet]=\"textareaReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'number'\">\r\n <ng-container [ngTemplateOutlet]=\"numberReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'currency'\">\r\n <ng-container [ngTemplateOutlet]=\"currencyReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'radio-button'\">\r\n <ng-container [ngTemplateOutlet]=\"radioButtonReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'checkbox'\">\r\n <ng-container [ngTemplateOutlet]=\"checkboxReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'toggle'\">\r\n <ng-container [ngTemplateOutlet]=\"toggleReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'status'\">\r\n <ng-container [ngTemplateOutlet]=\"checkboxReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'lookup'\">\r\n <ng-container [ngTemplateOutlet]=\"lookupReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'amount'\">\r\n <ng-container [ngTemplateOutlet]=\"amountReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'multi-select'\">\r\n <ng-container [ngTemplateOutlet]=\"multiSelectReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'chip-list'\">\r\n <ng-container [ngTemplateOutlet]=\"chipListReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'sequence'\">\r\n <ng-container [ngTemplateOutlet]=\"sequenceReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'list'\">\r\n <ng-container [ngTemplateOutlet]=\"listReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'multi-state-checkbox'\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" *ngIf=\"!field.hideLabel\" [innerHtml]=\"field.label | translate\"></label>\r\n <span class=\"readonly-value\">{{ getMultiStateReadonlySummary(field, defaults) }}</span>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'iban-text'\">\r\n <p class=\"label\">\r\n <span [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></span>\r\n <span> : </span>\r\n <span class=\"value\" [innerHtml]=\"extractFieldName(defaults, field.property)\"></span>\r\n </p>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'section-title'\">\r\n <div class=\"hrdivider-mid\">\r\n <span>{{ field.label | translate }}</span>\r\n </div>\r\n </ng-container>\r\n\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n\r\n", styles: [".main-form-canvas{display:flex;flex-direction:row;gap:10px;align-items:flex-start;justify-content:flex-start;width:100%;flex-wrap:wrap}.form-wrapper{display:flex;flex-direction:column;flex:1}.form-container{display:flex;flex-direction:column;width:100%}.row-container{display:flex;flex-direction:row;gap:20px;flex-wrap:wrap;width:100%}.field-column{display:flex;flex-direction:column;flex:1}.label-and-asterisk-container{display:flex;align-items:center;gap:4px}.optional-text{color:#9b9b9b;font-size:11px;font-weight:400;line-height:1.4}.full-width{width:100%}.readonly-item{display:flex;flex-direction:column;align-items:flex-start;gap:2px;font-size:14px;padding:4px 0;width:100%}.readonly-item .readonly-label{font-weight:500;color:#9b9b9b;font-size:14px}.readonly-item .readonly-value{font-weight:500;color:#222;word-break:break-word;font-size:14px}.readonly-item .readonly-value--empty{font-style:italic;font-weight:500;color:#6b7280}.readonly-item .json-viewer{width:100%}.readonly-item .chipList{display:flex;flex-wrap:wrap;gap:4px}.readonly-item mat-icon{font-size:18px;vertical-align:middle}.row-wrapper{display:flex;flex-direction:row;gap:20px;width:100%;flex-wrap:wrap}.column-wrapper{display:flex;flex-direction:column;width:100%;align-items:flex-start}.row-container{display:flex;flex-direction:row;gap:20px;width:100%;flex-wrap:wrap}.field-column{display:flex;flex-direction:column;min-width:50px!important}.field-row{display:flex;flex-direction:row;gap:10px;width:100%;align-items:flex-start}.field-label{flex:0 0 40%;display:flex;flex-direction:column;justify-content:center}.field-input{flex:0 0 60%;display:flex;flex-direction:column}.radio-group-custom{display:flex;flex-direction:row;flex-wrap:wrap;gap:10px}.clear-icon-button{width:40px!important;height:40px!important;min-width:40px!important;padding:8px!important;margin:0!important;margin-inline-start:4px!important;display:flex!important;align-items:center!important;justify-content:center!important;cursor:pointer!important}.clear-icon-button mat-icon{width:24px!important;height:24px!important;font-size:24px!important;line-height:24px!important;margin-top:0!important}.clear-icon-suffix{display:flex!important;align-items:center!important;align-content:center!important;height:100%!important}@media (max-width: 600px){.main-form-canvas{flex-direction:column}.row-container{flex-direction:column;gap:10px}.field-column{width:100%;flex:1 1 100%!important}.column-wrapper{align-items:center}.field-row{flex-direction:column}.field-label,.field-input{flex:1 1 100%}.radio-group-custom{flex-direction:column;gap:5px}}.custom-ngx-mat-intl-tel-input[readonly] input,.custom-ngx-mat-intl-tel-input.ngx-mat-intl-tel-input input[disabled]{pointer-events:none!important;background-color:#f5f5f5!important;color:#444!important}.custom-ngx-mat-intl-tel-input .iti__flag-container,.custom-ngx-mat-intl-tel-input .iti__selected-flag{pointer-events:none!important;opacity:.6}.custom-ngx-mat-intl-tel-input{pointer-events:none!important}::ng-deep .mat-datepicker-content-container mat-calendar.example-month-picker~.mat-datepicker-close-button{display:none!important}@media (max-width: 960px){.row-wrapper,.row-container{flex-direction:column}.row-container{gap:15px}.field-column{flex:1 1 100%!important}}.multi-state-filter{display:flex;flex-direction:column;align-items:flex-start}.multi-state-filter__trigger{display:flex;align-items:center;justify-content:space-between;gap:4px;min-height:45px;padding:0 16px;margin:0;border:1px solid #b7b7b7;border-radius:8px;background:#fff;cursor:pointer;font-family:inherit;font-size:16px;font-weight:300;line-height:1.2;color:#000;box-sizing:border-box;width:100%}.multi-state-filter__trigger:focus-visible{outline:2px solid #0d4261;outline-offset:2px}.multi-state-filter__trigger-text{flex:1 1 auto;text-align:left;color:#000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}.multi-state-filter__trigger-text--placeholder{color:#888}.multi-state-filter__chevron{flex-shrink:0;width:24px;height:24px;font-size:24px;color:#0d4261}::ng-deep .multi-state-filter__menu-panel{max-width:320px;min-width:250px}.multi-state-filter__menu-inner{padding:4px 0}.multi-state-filter__row{display:flex;align-items:center;gap:8px;min-height:28px;max-height:34px;padding:4px 8px;box-sizing:border-box}.multi-state-filter__pill{display:inline-flex;align-items:center;justify-content:center;min-height:24px;padding:0 16px;font-size:14px;font-weight:400;line-height:1.2;white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i6.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3$1.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i9.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "directive", type: MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "component", type: MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled", "tabIndex"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "component", type: MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption$2, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "ngmodule", type: NgxJsonViewerModule }, { kind: "component", type: i10.NgxJsonViewerComponent, selector: "ngx-json-viewer", inputs: ["json", "expanded", "depth", "_currentDepth"] }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "component", type: NgxMatIntlTelInputComponent, selector: "ngx-mat-intl-tel-input", inputs: ["preferredCountries", "enablePlaceholder", "inputPlaceholder", "cssClass", "name", "onlyCountries", "errorStateMatcher", "enableSearch", "searchPlaceholder", "describedBy", "format", "placeholder", "required", "disabled"], outputs: ["countryChanged"] }, { kind: "component", type: MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "component", type: MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "component", type: MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "component", type: MultiAutoCompleteComponent, selector: "app-multi-auto-complete", inputs: ["field", "form", "defaultValue", "pathParam", "readonly"], outputs: ["selectedValue"] }, { kind: "component", type: AutoCompleteComponent, selector: "app-auto-complete", inputs: ["field", "form", "defaultValue", "readonly", "supportingAttributes"], outputs: ["selectedValue"] }, { kind: "directive", type: MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: AttachmentUploaderComponent, selector: "app-attachment-uploader", inputs: ["acceptedTypes", "ariaDescribedBy"], outputs: ["fileSelected"] }, { kind: "directive", type: DecimalOnlyDirective, selector: "[numbersOnly]", inputs: ["maxDecimals"] }, { kind: "directive", type: MaxDigitsDirective, selector: "[maxDigits]", inputs: ["maxDigits"] }] }); }
|
|
2725
|
+
], viewQueries: [{ propertyName: "fieldsInput", first: true, predicate: ["EquationValueInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"main-form-canvas\">\r\n <div class=\"form-wrapper\">\r\n <ng-container *ngIf=\"defaults\">\r\n <ng-container *ngIf=\"editable; else readonlyView\" class=\"form-container\">\r\n <form [formGroup]=\"formParam\" class=\"form-content\">\r\n <div class=\"form-row\">\r\n <div class=\"form-column\">\r\n <ng-container *ngFor=\"let row of screenFields | keyvalue\">\r\n <div class=\"row-container\">\r\n <ng-container *ngFor=\"let field of row.value\">\r\n <div class=\"field-column\" [style.flex]=\"field.fieldSize ? ('0 0 ' + field.fieldSize + '%') : '1 1 0'\">\r\n <ng-container [ngSwitch]=\"field.type\">\r\n <ng-container *ngSwitchCase=\"'date'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n </div>\r\n\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput\r\n [matDatepicker]=\"picker\"\r\n [min]=\"minDate\"\r\n (dateChange)=\"formParam.get(field.property).setValue($event.value)\"\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [readonly]=\"field.readonly\"\r\n [attr.tabindex]=\"field.readonly ? -1 : null\"\r\n formControlName=\"{{field.property}}\"\r\n [required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\r\n\r\n <mat-datepicker-toggle *ngIf=\"!field.readonly\" matSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n\r\n <mat-datepicker #picker\r\n [startView]=\"getView(field)\"\r\n (yearSelected)=\"setMonthAndYear($event, picker, field)\"\r\n panelClass=\"example-month-picker\">\r\n </mat-datepicker>\r\n\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'phone-number'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container class=\"custom-ngx-mat-intl-tel-input\" *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <div class=\"phone-input-wrapper\">\r\n <ngx-mat-intl-tel-input\r\n formControlName=\"{{ field.property }}\"\r\n [inputPlaceholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [preferredCountries]=\"['qa']\"\r\n [enablePlaceholder]=\"true\"\r\n [enableSearch]=\"true\"\r\n [onlyCountries]=\"getCountryCodeList()\"\r\n [required]=\"field.required\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\r\n </ngx-mat-intl-tel-input>\r\n </div>\r\n\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n\r\n <ng-container *ngSwitchCase=\"'iban-text'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"textReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <input class=\"app-input\"\r\n formControlName=\"{{ field.property }}\"\r\n matInput\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [readonly]=\"field.readonly\"\r\n [attr.tabindex]=\"field.readonly ? -1 : null\"\r\n [required]=\"field.required\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'password'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput\r\n class=\"app-input\"\r\n formControlName=\"{{ field.property }}\"\r\n [type]=\"hide && !field.disabled ? 'password' : 'text'\"\r\n [readonly]=\"field.readonly\"\r\n [attr.tabindex]=\"field.readonly ? -1 : null\"\r\n [required]=\"field.required\"\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\r\n <!-- <mat-icon matSuffix-->\r\n <!-- (click)=\"hide = !hide\">-->\r\n <!-- {{ hide ? 'visibility_off' : 'visibility' }}-->\r\n <!-- </mat-icon>-->\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'text'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"textReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <mat-icon *ngIf=\"field.showSearchIcon\" matPrefix>search</mat-icon>\r\n <input class=\"app-input\"\r\n formControlName=\"{{ field.property }}\"\r\n matInput\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [readonly]=\"field.readonly\"\r\n [attr.tabindex]=\"field.readonly ? -1 : null\"\r\n [required]=\"field.required\"\r\n (keyup)=\"fixArabicNumbers($event.target)\"\r\n [attr.aria-required]=\"field.required\"\r\n [maxDigits]=\"field.maxLength\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\r\n <span\r\n *ngIf=\"field.showSearchIcon && !field.readonly && (formParam?.get([field.property])?.value ?? '') !== ''\"\r\n matSuffix\r\n class=\"clear-icon-suffix\">\r\n <button\r\n mat-icon-button\r\n type=\"button\"\r\n class=\"clear-icon-button\"\r\n [attr.aria-label]=\"'BASE_TABLE.clearField' | translate\"\r\n (click)=\"clearFieldValue(field.property)\">\r\n <mat-icon aria-hidden=\"true\">close</mat-icon>\r\n </button>\r\n </span>\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'multi-state-checkbox'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"multi-state-filter\" [formGroup]=\"formParam\">\r\n <button\r\n type=\"button\"\r\n class=\"multi-state-filter__trigger\"\r\n [matMenuTriggerFor]=\"statusMultiMenu\"\r\n [attr.aria-haspopup]=\"true\"\r\n [attr.aria-expanded]=\"false\"\r\n [attr.aria-label]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : (field.label | translate)\">\r\n <span\r\n class=\"multi-state-filter__trigger-text\"\r\n [class.multi-state-filter__trigger-text--placeholder]=\"isMultiStateEmpty(field.property)\">\r\n {{\r\n getMultiStateFilterTriggerLabel(field)\r\n || (field.placeholder\r\n ? (labelKeyPlaceHolder(field) | translate)\r\n : ('FILTER-BUILDER.selectStatus' | translate))\r\n }}\r\n </span>\r\n <mat-icon class=\"multi-state-filter__chevron\" aria-hidden=\"true\">keyboard_arrow_down</mat-icon>\r\n </button>\r\n <mat-menu #statusMultiMenu=\"matMenu\" class=\"multi-state-filter__menu-panel\" [hasBackdrop]=\"true\">\r\n <div\r\n class=\"multi-state-filter__menu-inner\"\r\n (click)=\"$event.stopPropagation()\"\r\n (keydown)=\"onMultiStateMenuInnerKeydown($event, field)\">\r\n <div\r\n *ngFor=\"let code of field.listOptions || []\"\r\n mat-menu-item\r\n class=\"multi-state-filter__row\"\r\n [attr.data-multi-state-code]=\"code\"\r\n (click)=\"onMultiStateRowClick($event, field.property, code)\">\r\n <mat-checkbox\r\n tabindex=\"-1\"\r\n (click)=\"$event.stopPropagation()\"\r\n [checked]=\"isMultiStateSelected(field.property, code)\"\r\n (change)=\"toggleMultiStateFilter(field.property, code, $event.checked)\">\r\n </mat-checkbox>\r\n <span\r\n class=\"multi-state-filter__pill stateType\"\r\n [ngClass]=\"code\">\r\n {{ statusOptionLabelKey(field, code) | translate }}\r\n </span>\r\n </div>\r\n </div>\r\n </mat-menu>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'chip-list'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n\r\n <mat-chip-grid [attr.aria-labelledby]=\"'label-' + field.property\"\r\n formControlName=\"{{ field.property }}\">\r\n <mat-chip-row\r\n *ngFor=\"let mail of splittedChips(formParam, field.property); let idx = index\"\r\n [removable]=\"removable\"\r\n (removed)=\"removeChipsItem(formParam, field.property, idx)\">\r\n {{ mail }}\r\n <mat-icon matChipRemove *ngIf=\"removable\">cancel</mat-icon>\r\n </mat-chip-row>\r\n\r\n <input [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\r\n [matChipInputFor]=\"null\"\r\n [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\r\n [matChipInputAddOnBlur]=\"addOnBlur\"\r\n (matChipInputTokenEnd)=\"addEmailToChips($event, formParam, field.property)\">\r\n </mat-chip-grid>\r\n <mat-error id=\"error-{{ field.property }}\" *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'amount'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"amountReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <input class=\"app-input\"\r\n formControlName=\"{{ field.property }}\"\r\n matInput\r\n type=\"number\"\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [readonly]=\"field.readonly\"\r\n [attr.tabindex]=\"field.readonly ? -1 : null\"\r\n [required]=\"field.required\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'sequence'\">\r\n <ng-container\r\n *ngIf=\"referenceAttributeTrue(field.property, 'autoGenerated'); else noSequence\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <input class=\"app-input\"\r\n formControlName=\"{{ field.property }}\"\r\n matInput\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [readonly]=\"true\"\r\n [disabled]=\"true\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\">\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-template #noSequence>\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <input class=\"app-input\"\r\n formControlName=\"{{ field.property }}\"\r\n matInput\r\n [readonly]=\"false\"\r\n [disabled]=\"false\"\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [required]=\"field.required\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n </ng-template>\r\n\r\n <ng-container *ngSwitchCase=\"'textarea'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"textareaReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <textarea cdkFocusInitial\r\n formControlName=\"{{ field.property }}\"\r\n matInput\r\n cdkTextareaAutosize\r\n cdkAutosizeMinRows=\"3\"\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\r\n [readonly]=\"field.readonly\"\r\n [attr.tabindex]=\"field.readonly ? -1 : null\"\r\n [required]=\"field.required\"></textarea>\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'number'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"numberReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <input class=\"app-input\"\r\n formControlName=\"{{ field.property }}\"\r\n matInput\r\n type=\"number\"\r\n [attr.min]=\"field.allowNegative ? null : 0\"\r\n (keydown)=\"blockNegativeNumberKeydown($event, field)\"\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [maxDigits]=\"field.maxLength\"\r\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\r\n [required]=\"field.readonly ? false : field.required\"\r\n [readonly]=\"field.readonly\"\r\n [attr.tabindex]=\"field.readonly ? -1 : null\"\r\n [pattern]=\"field.pattern\">\r\n <mat-error id=\"error-{{ field.property }}\" *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'bigdecimal'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"numberReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <input\r\n matInput\r\n type=\"text\"\r\n inputmode=\"numeric\"\r\n formControlName=\"{{ field.property }}\"\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n numbersOnly [maxDecimals]=\"field.maxDecimals\"\r\n [maxDigits]=\"field.maxLength\"\r\n [pattern]=\"field.pattern\"\r\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\r\n [required]=\"field.readonly ? false : field.required\"\r\n [readonly]=\"field.readonly\"\r\n [attr.tabindex]=\"field.readonly ? -1 : null\">\r\n <mat-error id=\"error-{{ field.property }}\" *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'time'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"timeReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <input\r\n matInput\r\n class=\"app-input\"\r\n formControlName=\"{{ field.property }}\"\r\n type=\"time\"\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [readonly]=\"field.readonly\"\r\n [attr.tabindex]=\"field.readonly ? -1 : null\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\r\n [required]=\"field.required\">\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'checkbox'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"checkboxReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <mat-checkbox\r\n appearance=\"outline\"\r\n style=\"padding-bottom: 14px; padding-top: 14px;\"\r\n [disabled]=\"field.readonly\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\r\n formControlName=\"{{ field.property }}\">\r\n {{ field.label! | translate }}\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-checkbox>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'toggle'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"toggleReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n </div>\r\n <mat-slide-toggle\r\n [disabled]=\"field.readonly\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\r\n formControlName=\"{{ field.property }}\">\r\n </mat-slide-toggle>\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'color-picker'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <div fxLayout=\"row\" fxLayoutAlign=\"center\">\r\n <h4 style=\"margin-right: 10px\">{{ field.label! | translate }}</h4>\r\n <input\r\n ejs-colorpicker\r\n type=\"color\"\r\n id=\"colorpicker\"\r\n formControlName=\"{{ field.property }}\"\r\n [attr.aria-label]=\"field.label! | translate\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\r\n />\r\n </div>\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </ng-container>\r\n </ng-container>\r\n\r\n\r\n <ng-container *ngSwitchCase=\"'radio-button'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"radioButtonReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <mat-radio-group\r\n formControlName=\"{{field.property}}\"\r\n class=\"app-radio\"\r\n [attr.aria-label]=\"field.label! | translate\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\r\n <div class=\"field-row\">\r\n <div class=\"field-label\">\r\n <span class=\"custom-label\">{{ field.label! | translate }}</span>\r\n </div>\r\n <div class=\"field-input\">\r\n <div class=\"radio-group-custom\">\r\n <mat-radio-button\r\n *ngFor=\"let option of field.listOptions\"\r\n [value]=\"option\"\r\n [attr.aria-labelledby]=\"option\">\r\n {{ option | translate }}\r\n </mat-radio-button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-radio-group>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'list'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"listReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\" style=\"width: 100%\">\r\n <mat-select\r\n formControlName=\"{{field.property}}\"\r\n [attr.aria-label]=\"field.label! | translate\"\r\n [attr.aria-required]=\"field.required\"\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\r\n [disabled]=\"field.readonly\"\r\n [multiple]=\"field.multi || false\"\r\n [required]=\"field.readonly ? false : field.required\"\r\n [(value)]=\"field.defaultListOption\">\r\n <ng-container *ngIf=\"field.translate; else lookup_no_translation\">\r\n <mat-option\r\n *ngFor=\"let item of field.listOptions; let i = index\"\r\n [value]=\"item\">\r\n {{ friendlyName(field.label, field.property, item) | translate }}\r\n </mat-option>\r\n </ng-container>\r\n <ng-template #lookup_no_translation>\r\n <mat-option\r\n *ngFor=\"let item of field.listOptions\"\r\n [value]=\"item\">\r\n {{ getOptionValue(item) }}\r\n </mat-option>\r\n </ng-template>\r\n </mat-select>\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'attachment'\" [formGroup]=\"formParam\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n </div>\r\n <app-attachment-uploader\r\n [acceptedTypes]=\"getAcceptedFileTypes(field)\"\r\n [ariaDescribedBy]=\"showError(field.property) ? 'error-' + field.property : null\"\r\n (fileSelected)=\"onAttachmentFileSelected($event, field)\"\r\n style=\"margin-top: 5px\">\r\n </app-attachment-uploader>\r\n </ng-container>\r\n <mat-error class=\"iq-error\"\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'lookup'\" [formGroup]=\"formParam\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"lookupReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <app-auto-complete\r\n [form]=\"formParam\"\r\n [field]=\"field\"\r\n [supportingAttributes]=\"supportingAttributes\"\r\n [defaultValue]=\"this.formParam.get(field.property)?.value\"\r\n (selectedValue)=\"patchLookupValue($event, field.property)\">\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </app-auto-complete>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'currency'\" [formGroup]=\"formParam\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"currencyReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <!-- Uncomment and use the currency control when ready -->\r\n <!-- <app-currency\r\n [form]=\"formParam\"\r\n [field]=\"field\"\r\n [defaultValue]=\"this.formParam.get(field.property)?.value\"\r\n (selectedValue)=\"patchCurrencyValue($event, field.property)\">\r\n </app-currency> -->\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'multi-select'\" [formGroup]=\"formParam\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"multiSelectReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <app-multi-auto-complete\r\n [form]=\"formParam\"\r\n [field]=\"field\"\r\n [defaultValue]=\"getMultiValue(field)\"\r\n (selectedValue)=\"patchMultiSelectValue($event, field.property)\">\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </app-multi-auto-complete>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n\r\n <ng-container *ngSwitchCase=\"'rich-text'\" [formGroup]=\"formParam\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <!-- Uncomment and use the rich text editor when ready -->\r\n <!-- <ckeditor\r\n [editor]=\"Editor\"\r\n [disabled]=\"field.readonly\"\r\n formControlName=\"{{field.property}}\">\r\n </ckeditor> -->\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'divider'\">\r\n <mat-divider></mat-divider>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'hyper-text'\">\r\n <div>\r\n <mat-label\r\n (click)=\"getHyperTextEvent()\"\r\n class=\"hyper-link\">\r\n {{ field.label! | translate }}\r\n </mat-label>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'section-title'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <div class=\"hrdivider-mid\">\r\n <span>{{ field.label | translate }}</span>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'equation-builder'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"textReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <input class=\"app-input\" dir=\"ltr\"\r\n formControlName=\"{{ field.property }}\"\r\n matInput\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [readonly]=\"field.readonly\"\r\n [attr.tabindex]=\"field.readonly ? -1 : null\"\r\n [required]=\"field.required\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n <!-- <ng-container *ngSwitchCase=\"'equation-builder'\" [formGroup]=\"formParam\">-->\r\n <!-- <ng-container *ngIf=\"showField(defaults, field)\">-->\r\n <!-- <ng-container *ngIf=\"!workflowEditableField(field)\">-->\r\n <!-- <ng-container-->\r\n <!-- [ngTemplateOutlet]=\"dateReadonly\"-->\r\n <!-- [ngTemplateOutletContext]=\"{ field: field }\">-->\r\n <!-- </ng-container>-->\r\n <!-- </ng-container>-->\r\n <!-- <ng-container *ngIf=\"workflowEditableField(field)\">-->\r\n <!-- <div style=\"display: flex; width: 350%\">-->\r\n <!-- <mat-label>{{ field.label! | translate }}</mat-label>-->\r\n <!-- <mat-form-field style=\"width: 400%\" appearance=\"outline\">-->\r\n <!-- <mat-chip-grid #chipGrid>-->\r\n <!-- <ng-container *ngFor=\"let equationValue of equationValues(); let i = index\">-->\r\n <!-- <mat-chip-row (removed)=\"remove(equationValue, i)\">-->\r\n <!-- {{ equationValue }}-->\r\n <!-- <button-->\r\n <!-- matChipRemove-->\r\n <!-- [attr.aria-label]=\"'remove ' + equationValue\">-->\r\n <!-- <mat-icon>cancel</mat-icon>-->\r\n <!-- </button>-->\r\n <!-- </mat-chip-row>-->\r\n <!-- </ng-container>-->\r\n <!-- </mat-chip-grid>-->\r\n <!-- <input-->\r\n <!-- [(ngModel)]=\"currentEquationValue\"-->\r\n <!-- [matChipInputFor]=\"chipGrid\"-->\r\n <!-- [matAutocomplete]=\"auto\"-->\r\n <!-- [ngModelOptions]=\"{ standalone: true }\"-->\r\n <!-- [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"-->\r\n <!-- (matChipInputTokenEnd)=\"add($event)\"-->\r\n <!-- aria-label=\"Add equation value\" />-->\r\n <!-- <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"selected($event)\">-->\r\n <!-- <ng-container *ngFor=\"let filteredField of (equationFilteredFields() | async)\">-->\r\n <!-- <mat-option [value]=\"filteredField\">{{ filteredField }}</mat-option>-->\r\n <!-- </ng-container>-->\r\n <!-- </mat-autocomplete>-->\r\n <!-- </mat-form-field>-->\r\n <!-- </div>-->\r\n <!-- <mat-error class=\"iq-error\" *ngIf=\"showError(field.property)\" aria-live=\"assertive\">-->\r\n <!-- {{ getErrors(field.property) | translate }}-->\r\n <!-- </mat-error>-->\r\n <!-- </ng-container>-->\r\n <!-- </ng-container>-->\r\n <!-- </ng-container>-->\r\n\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </form>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n\r\n</div>\r\n<ng-template #dateReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) | date: getReadonlyDateFormat(field) }}</span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #timeReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">{{ formatTimeToDate(defaults[field.property]) | date: 'shortTime' }}</span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #phoneNumberReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #textReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\" *ngIf=\"!field.advancedFilter\"></label>\r\n <ng-container *ngIf=\"isReadonlyTextValueEmpty(defaults, field) && field.emptyReadonlyPlaceholderKey; else textReadonlyHasValue\">\r\n <span class=\"readonly-value readonly-value--empty\">{{ field.emptyReadonlyPlaceholderKey | translate }}</span>\r\n </ng-container>\r\n <ng-template #textReadonlyHasValue>\r\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\r\n </ng-template>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #textareaReadonly let-field=\"field\">\r\n <ng-container *ngIf=\"field.textFormat === 'json'; else normalText\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <div class=\"readonly-value json-viewer\">\r\n <ngx-json-viewer [json]=\"extractJsonFieldName(defaults, field.property)\" [expanded]=\"true\"></ngx-json-viewer>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-template #normalText>\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\r\n </div>\r\n </ng-template>\r\n</ng-template>\r\n\r\n<ng-template #numberReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #currencyReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #radioButtonReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">{{ translateLable(defaults[field.property]) }}</span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #richTextReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\" [innerHtml]=\"extractFieldName(defaults, field.property)\"></span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #checkboxReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">\r\n <mat-icon color=\"warn\" *ngIf=\"extractFieldName(defaults, field.property); else showNo\">done</mat-icon>\r\n <ng-template #showNo>\r\n <mat-icon color=\"warn\">close</mat-icon>\r\n </ng-template>\r\n </span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #toggleReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">\r\n <mat-icon color=\"warn\" *ngIf=\"extractFieldName(defaults, field.property); else showNo\">done</mat-icon>\r\n <ng-template #showNo>\r\n <mat-icon color=\"warn\">close</mat-icon>\r\n </ng-template>\r\n </span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #listReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\" *ngIf=\"field.translate; else noTranslate\">\r\n {{ listShowValue(defaults, field) | translate }}\r\n </span>\r\n <ng-template #noTranslate>\r\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\r\n </ng-template>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #sequenceReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #lookupReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">\r\n {{ extractFieldName(defaults, field.property)?.[translateService.getDefaultLang() === 'en' ? 'englishName' : 'arabicName'] }}\r\n </span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #amountReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">\r\n {{ extractFieldName(defaults, field.property) | currency: currency }}\r\n </span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #multiSelectReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <mat-chip-grid class=\"readonly-value chipList\">\r\n <mat-chip *ngFor=\"let filedProp of showMultiSelectValuesAsReadonly(field)\">\r\n {{ filedProp }}\r\n </mat-chip>\r\n </mat-chip-grid>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #chipListReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHTML]=\"field.label | translate\"></label>\r\n <mat-chip-listbox class=\"readonly-value chipList\">\r\n <mat-chip-option *ngFor=\"let loc of splitReadonly(extractFieldName(defaults, field.property))\"\r\n [selectable]=\"true\"\r\n color=\"warn\"\r\n [removable]=\"false\">\r\n {{ loc }}\r\n </mat-chip-option>\r\n </mat-chip-listbox>\r\n </div>\r\n</ng-template>\r\n\r\n\r\n<ng-template #readonlyView>\r\n <div class=\"row-wrapper\">\r\n <div class=\"column-wrapper\">\r\n <ng-container *ngFor=\"let row of screenFields | keyvalue\">\r\n <div class=\"row-container\">\r\n <ng-container *ngFor=\"let field of row.value\">\r\n <div class=\"field-column readonly-item\" [style.flex]=\"field.fieldSize ? ('0 0 ' + field.fieldSize + '%') : '1 1 0'\">\r\n\r\n <ng-container [ngSwitch]=\"field.type\">\r\n\r\n <ng-container *ngSwitchCase=\"'date'\">\r\n <ng-container [ngTemplateOutlet]=\"dateReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'time'\">\r\n <ng-container [ngTemplateOutlet]=\"timeReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'phone-number'\">\r\n <ng-container [ngTemplateOutlet]=\"phoneNumberReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'text'\">\r\n <ng-container [ngTemplateOutlet]=\"textReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'textarea'\">\r\n <ng-container [ngTemplateOutlet]=\"textareaReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'number'\">\r\n <ng-container [ngTemplateOutlet]=\"numberReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'currency'\">\r\n <ng-container [ngTemplateOutlet]=\"currencyReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'radio-button'\">\r\n <ng-container [ngTemplateOutlet]=\"radioButtonReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'checkbox'\">\r\n <ng-container [ngTemplateOutlet]=\"checkboxReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'toggle'\">\r\n <ng-container [ngTemplateOutlet]=\"toggleReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'status'\">\r\n <ng-container [ngTemplateOutlet]=\"checkboxReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'lookup'\">\r\n <ng-container [ngTemplateOutlet]=\"lookupReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'amount'\">\r\n <ng-container [ngTemplateOutlet]=\"amountReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'multi-select'\">\r\n <ng-container [ngTemplateOutlet]=\"multiSelectReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'chip-list'\">\r\n <ng-container [ngTemplateOutlet]=\"chipListReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'sequence'\">\r\n <ng-container [ngTemplateOutlet]=\"sequenceReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'list'\">\r\n <ng-container [ngTemplateOutlet]=\"listReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'multi-state-checkbox'\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" *ngIf=\"!field.hideLabel\" [innerHtml]=\"field.label | translate\"></label>\r\n <span class=\"readonly-value\">{{ getMultiStateReadonlySummary(field, defaults) }}</span>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'iban-text'\">\r\n <p class=\"label\">\r\n <span [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></span>\r\n <span> : </span>\r\n <span class=\"value\" [innerHtml]=\"extractFieldName(defaults, field.property)\"></span>\r\n </p>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'section-title'\">\r\n <div class=\"hrdivider-mid\">\r\n <span>{{ field.label | translate }}</span>\r\n </div>\r\n </ng-container>\r\n\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n\r\n", styles: [".main-form-canvas{display:flex;flex-direction:row;gap:10px;align-items:flex-start;justify-content:flex-start;width:100%;flex-wrap:wrap}.form-wrapper{display:flex;flex-direction:column;flex:1}.form-container{display:flex;flex-direction:column;width:100%}.row-container{display:flex;flex-direction:row;gap:20px;flex-wrap:wrap;width:100%}.field-column{display:flex;flex-direction:column;flex:1}.label-and-asterisk-container{display:flex;align-items:center;gap:4px}.optional-text{color:#9b9b9b;font-size:11px;font-weight:400;line-height:1.4}.full-width{width:100%}.readonly-item{display:flex;flex-direction:column;align-items:flex-start;gap:2px;font-size:14px;padding:4px 0;width:100%}.readonly-item .readonly-label{font-weight:500;color:#9b9b9b;font-size:14px}.readonly-item .readonly-value{font-weight:500;color:#222;word-break:break-word;font-size:14px}.readonly-item .readonly-value--empty{font-style:italic;font-weight:500;color:#6b7280}.readonly-item .json-viewer{width:100%}.readonly-item .chipList{display:flex;flex-wrap:wrap;gap:4px}.readonly-item mat-icon{font-size:18px;vertical-align:middle}.row-wrapper{display:flex;flex-direction:row;gap:20px;width:100%;flex-wrap:wrap}.column-wrapper{display:flex;flex-direction:column;width:100%;align-items:flex-start}.row-container{display:flex;flex-direction:row;gap:20px;width:100%;flex-wrap:wrap}.field-column{display:flex;flex-direction:column;min-width:50px!important}.field-row{display:flex;flex-direction:row;gap:10px;width:100%;align-items:flex-start}.field-label{flex:0 0 40%;display:flex;flex-direction:column;justify-content:center}.field-input{flex:0 0 60%;display:flex;flex-direction:column}.radio-group-custom{display:flex;flex-direction:row;flex-wrap:wrap;gap:10px}.clear-icon-button{width:40px!important;height:40px!important;min-width:40px!important;padding:8px!important;margin:0!important;margin-inline-start:4px!important;display:flex!important;align-items:center!important;justify-content:center!important;cursor:pointer!important}.clear-icon-button mat-icon{width:24px!important;height:24px!important;font-size:24px!important;line-height:24px!important;margin-top:0!important}.clear-icon-suffix{display:flex!important;align-items:center!important;align-content:center!important;height:100%!important}@media (max-width: 600px){.main-form-canvas{flex-direction:column}.row-container{flex-direction:column;gap:10px}.field-column{width:100%;flex:1 1 100%!important}.column-wrapper{align-items:center}.field-row{flex-direction:column}.field-label,.field-input{flex:1 1 100%}.radio-group-custom{flex-direction:column;gap:5px}}.custom-ngx-mat-intl-tel-input[readonly] input,.custom-ngx-mat-intl-tel-input.ngx-mat-intl-tel-input input[disabled]{pointer-events:none!important;background-color:#f5f5f5!important;color:#444!important}.custom-ngx-mat-intl-tel-input .iti__flag-container,.custom-ngx-mat-intl-tel-input .iti__selected-flag{pointer-events:none!important;opacity:.6}.custom-ngx-mat-intl-tel-input{pointer-events:none!important}::ng-deep .mat-datepicker-content-container mat-calendar.example-month-picker~.mat-datepicker-close-button{display:none!important}@media (max-width: 960px){.row-wrapper,.row-container{flex-direction:column}.row-container{gap:15px}.field-column{flex:1 1 100%!important}}.multi-state-filter{display:flex;flex-direction:column;align-items:flex-start}.multi-state-filter__trigger{display:flex;align-items:center;justify-content:space-between;gap:4px;min-height:45px;padding:0 16px;margin:0;border:1px solid #b7b7b7;border-radius:8px;background:#fff;cursor:pointer;font-family:inherit;font-size:16px;font-weight:300;line-height:1.2;color:#000;box-sizing:border-box;width:100%}.multi-state-filter__trigger:focus-visible{outline:2px solid #0d4261;outline-offset:2px}.multi-state-filter__trigger-text{flex:1 1 auto;text-align:left;color:#000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}.multi-state-filter__trigger-text--placeholder{color:#888}.multi-state-filter__chevron{flex-shrink:0;width:24px;height:24px;font-size:24px;color:#0d4261}::ng-deep .multi-state-filter__menu-panel{max-width:320px;min-width:250px}.multi-state-filter__menu-inner{padding:4px 0}.multi-state-filter__row{display:flex;align-items:center;gap:8px;min-height:28px;max-height:34px;padding:4px 8px;box-sizing:border-box}.multi-state-filter__pill{display:inline-flex;align-items:center;justify-content:center;min-height:24px;padding:0 16px;font-size:14px;font-weight:400;line-height:1.2;white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i6.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3$1.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i9.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "directive", type: MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "component", type: MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled", "tabIndex"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "component", type: MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption$2, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "ngmodule", type: NgxJsonViewerModule }, { kind: "component", type: i10.NgxJsonViewerComponent, selector: "ngx-json-viewer", inputs: ["json", "expanded", "depth", "_currentDepth"] }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "component", type: NgxMatIntlTelInputComponent, selector: "ngx-mat-intl-tel-input", inputs: ["preferredCountries", "enablePlaceholder", "inputPlaceholder", "cssClass", "name", "onlyCountries", "errorStateMatcher", "enableSearch", "searchPlaceholder", "describedBy", "format", "placeholder", "required", "disabled"], outputs: ["countryChanged"] }, { kind: "component", type: MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "component", type: MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "component", type: MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "component", type: MultiAutoCompleteComponent, selector: "app-multi-auto-complete", inputs: ["field", "form", "defaultValue", "pathParam", "readonly"], outputs: ["selectedValue"] }, { kind: "component", type: AutoCompleteComponent, selector: "app-auto-complete", inputs: ["field", "form", "defaultValue", "readonly", "supportingAttributes"], outputs: ["selectedValue"] }, { kind: "directive", type: MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: AttachmentUploaderComponent, selector: "app-attachment-uploader", inputs: ["acceptedTypes", "ariaDescribedBy"], outputs: ["fileSelected"] }, { kind: "directive", type: DecimalOnlyDirective, selector: "[numbersOnly]", inputs: ["maxDecimals"] }, { kind: "directive", type: MaxDigitsDirective, selector: "[maxDigits]", inputs: ["maxDigits"] }] }); }
|
|
2726
2726
|
}
|
|
2727
2727
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BaseFormCanvasComponent, decorators: [{
|
|
2728
2728
|
type: Component,
|
|
@@ -2790,7 +2790,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
2790
2790
|
},
|
|
2791
2791
|
{ provide: MAT_DATE_FORMATS, useValue: DD_MM_YYYY_Format },
|
|
2792
2792
|
{ provide: MAT_DATE_LOCALE, useValue: 'en-GB' }
|
|
2793
|
-
], template: "<div class=\"main-form-canvas\">\r\n <div class=\"form-wrapper\">\r\n <ng-container *ngIf=\"defaults\">\r\n <ng-container *ngIf=\"editable; else readonlyView\" class=\"form-container\">\r\n <form [formGroup]=\"formParam\" class=\"form-content\">\r\n <div class=\"form-row\">\r\n <div class=\"form-column\">\r\n <ng-container *ngFor=\"let row of screenFields | keyvalue\">\r\n <div class=\"row-container\">\r\n <ng-container *ngFor=\"let field of row.value\">\r\n <div class=\"field-column\" [style.flex]=\"field.fieldSize ? ('0 0 ' + field.fieldSize + '%') : '1 1 0'\">\r\n <ng-container [ngSwitch]=\"field.type\">\r\n <ng-container *ngSwitchCase=\"'date'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n </div>\r\n\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput\r\n [matDatepicker]=\"picker\"\r\n [min]=\"minDate\"\r\n (dateChange)=\"formParam.get(field.property).setValue($event.value)\"\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [readonly]=\"field.readonly\"\r\n formControlName=\"{{field.property}}\"\r\n [required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\r\n\r\n <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n\r\n <mat-datepicker #picker\r\n [startView]=\"getView(field)\"\r\n (yearSelected)=\"setMonthAndYear($event, picker, field)\"\r\n panelClass=\"example-month-picker\">\r\n </mat-datepicker>\r\n\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'phone-number'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container class=\"custom-ngx-mat-intl-tel-input\" *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <div class=\"phone-input-wrapper\">\r\n <ngx-mat-intl-tel-input\r\n formControlName=\"{{ field.property }}\"\r\n [inputPlaceholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [preferredCountries]=\"['qa']\"\r\n [enablePlaceholder]=\"true\"\r\n [enableSearch]=\"true\"\r\n [onlyCountries]=\"getCountryCodeList()\"\r\n [required]=\"field.required\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\r\n </ngx-mat-intl-tel-input>\r\n </div>\r\n\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n\r\n <ng-container *ngSwitchCase=\"'iban-text'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"textReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <input class=\"app-input\"\r\n formControlName=\"{{ field.property }}\"\r\n matInput\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [readonly]=\"field.readonly\"\r\n [required]=\"field.required\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'password'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput\r\n class=\"app-input\"\r\n formControlName=\"{{ field.property }}\"\r\n [type]=\"hide && !field.disabled ? 'password' : 'text'\"\r\n [readonly]=\"field.readonly\"\r\n [required]=\"field.required\"\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\r\n <!-- <mat-icon matSuffix-->\r\n <!-- (click)=\"hide = !hide\">-->\r\n <!-- {{ hide ? 'visibility_off' : 'visibility' }}-->\r\n <!-- </mat-icon>-->\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'text'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"textReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <mat-icon *ngIf=\"field.showSearchIcon\" matPrefix>search</mat-icon>\r\n <input class=\"app-input\"\r\n formControlName=\"{{ field.property }}\"\r\n matInput\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [readonly]=\"field.readonly\"\r\n [required]=\"field.required\"\r\n (keyup)=\"fixArabicNumbers($event.target)\"\r\n [attr.aria-required]=\"field.required\"\r\n [maxDigits]=\"field.maxLength\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\r\n <span\r\n *ngIf=\"field.showSearchIcon && !field.readonly && (formParam?.get([field.property])?.value ?? '') !== ''\"\r\n matSuffix\r\n class=\"clear-icon-suffix\">\r\n <button\r\n mat-icon-button\r\n type=\"button\"\r\n class=\"clear-icon-button\"\r\n [attr.aria-label]=\"'BASE_TABLE.clearField' | translate\"\r\n (click)=\"clearFieldValue(field.property)\">\r\n <mat-icon aria-hidden=\"true\">close</mat-icon>\r\n </button>\r\n </span>\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'multi-state-checkbox'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"multi-state-filter\" [formGroup]=\"formParam\">\r\n <button\r\n type=\"button\"\r\n class=\"multi-state-filter__trigger\"\r\n [matMenuTriggerFor]=\"statusMultiMenu\"\r\n [attr.aria-haspopup]=\"true\"\r\n [attr.aria-expanded]=\"false\"\r\n [attr.aria-label]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : (field.label | translate)\">\r\n <span\r\n class=\"multi-state-filter__trigger-text\"\r\n [class.multi-state-filter__trigger-text--placeholder]=\"isMultiStateEmpty(field.property)\">\r\n {{\r\n getMultiStateFilterTriggerLabel(field)\r\n || (field.placeholder\r\n ? (labelKeyPlaceHolder(field) | translate)\r\n : ('FILTER-BUILDER.selectStatus' | translate))\r\n }}\r\n </span>\r\n <mat-icon class=\"multi-state-filter__chevron\" aria-hidden=\"true\">keyboard_arrow_down</mat-icon>\r\n </button>\r\n <mat-menu #statusMultiMenu=\"matMenu\" class=\"multi-state-filter__menu-panel\" [hasBackdrop]=\"true\">\r\n <div\r\n class=\"multi-state-filter__menu-inner\"\r\n (click)=\"$event.stopPropagation()\"\r\n (keydown)=\"onMultiStateMenuInnerKeydown($event, field)\">\r\n <div\r\n *ngFor=\"let code of field.listOptions || []\"\r\n mat-menu-item\r\n class=\"multi-state-filter__row\"\r\n [attr.data-multi-state-code]=\"code\"\r\n (click)=\"onMultiStateRowClick($event, field.property, code)\">\r\n <mat-checkbox\r\n tabindex=\"-1\"\r\n (click)=\"$event.stopPropagation()\"\r\n [checked]=\"isMultiStateSelected(field.property, code)\"\r\n (change)=\"toggleMultiStateFilter(field.property, code, $event.checked)\">\r\n </mat-checkbox>\r\n <span\r\n class=\"multi-state-filter__pill stateType\"\r\n [ngClass]=\"code\">\r\n {{ statusOptionLabelKey(field, code) | translate }}\r\n </span>\r\n </div>\r\n </div>\r\n </mat-menu>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'chip-list'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n\r\n <mat-chip-grid [attr.aria-labelledby]=\"'label-' + field.property\"\r\n formControlName=\"{{ field.property }}\">\r\n <mat-chip-row\r\n *ngFor=\"let mail of splittedChips(formParam, field.property); let idx = index\"\r\n [removable]=\"removable\"\r\n (removed)=\"removeChipsItem(formParam, field.property, idx)\">\r\n {{ mail }}\r\n <mat-icon matChipRemove *ngIf=\"removable\">cancel</mat-icon>\r\n </mat-chip-row>\r\n\r\n <input [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\r\n [matChipInputFor]=\"null\"\r\n [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\r\n [matChipInputAddOnBlur]=\"addOnBlur\"\r\n (matChipInputTokenEnd)=\"addEmailToChips($event, formParam, field.property)\">\r\n </mat-chip-grid>\r\n <mat-error id=\"error-{{ field.property }}\" *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'amount'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"amountReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <input class=\"app-input\"\r\n formControlName=\"{{ field.property }}\"\r\n matInput\r\n type=\"number\"\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [readonly]=\"field.readonly\"\r\n [required]=\"field.required\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'sequence'\">\r\n <ng-container\r\n *ngIf=\"referenceAttributeTrue(field.property, 'autoGenerated'); else noSequence\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <input class=\"app-input\"\r\n formControlName=\"{{ field.property }}\"\r\n matInput\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [readonly]=\"true\"\r\n [disabled]=\"true\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\">\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-template #noSequence>\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <input class=\"app-input\"\r\n formControlName=\"{{ field.property }}\"\r\n matInput\r\n [readonly]=\"false\"\r\n [disabled]=\"false\"\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [required]=\"field.required\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n </ng-template>\r\n\r\n <ng-container *ngSwitchCase=\"'textarea'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"textareaReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <textarea cdkFocusInitial\r\n formControlName=\"{{ field.property }}\"\r\n matInput\r\n cdkTextareaAutosize\r\n cdkAutosizeMinRows=\"3\"\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\r\n [readonly]=\"field.readonly\"\r\n [required]=\"field.required\"></textarea>\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'number'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"numberReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <input class=\"app-input\"\r\n formControlName=\"{{ field.property }}\"\r\n matInput\r\n type=\"number\"\r\n [attr.min]=\"field.allowNegative ? null : 0\"\r\n (keydown)=\"blockNegativeNumberKeydown($event, field)\"\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [maxDigits]=\"field.maxLength\"\r\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\r\n [required]=\"field.readonly ? false : field.required\"\r\n [readonly]=\"field.readonly\"\r\n [pattern]=\"field.pattern\">\r\n <mat-error id=\"error-{{ field.property }}\" *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'bigdecimal'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"numberReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <input\r\n matInput\r\n type=\"text\"\r\n inputmode=\"numeric\"\r\n formControlName=\"{{ field.property }}\"\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n numbersOnly [maxDecimals]=\"field.maxDecimals\"\r\n [maxDigits]=\"field.maxLength\"\r\n [pattern]=\"field.pattern\"\r\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\r\n [required]=\"field.readonly ? false : field.required\"\r\n [readonly]=\"field.readonly\">\r\n <mat-error id=\"error-{{ field.property }}\" *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'time'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"timeReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <input\r\n matInput\r\n class=\"app-input\"\r\n formControlName=\"{{ field.property }}\"\r\n type=\"time\"\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [readonly]=\"field.readonly\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\r\n [required]=\"field.required\">\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'checkbox'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"checkboxReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <mat-checkbox\r\n appearance=\"outline\"\r\n style=\"padding-bottom: 14px; padding-top: 14px;\"\r\n [disabled]=\"field.readonly\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\r\n formControlName=\"{{ field.property }}\">\r\n {{ field.label! | translate }}\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-checkbox>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'toggle'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"toggleReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n </div>\r\n <mat-slide-toggle\r\n [disabled]=\"field.readonly\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\r\n formControlName=\"{{ field.property }}\">\r\n </mat-slide-toggle>\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'color-picker'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <div fxLayout=\"row\" fxLayoutAlign=\"center\">\r\n <h4 style=\"margin-right: 10px\">{{ field.label! | translate }}</h4>\r\n <input\r\n ejs-colorpicker\r\n type=\"color\"\r\n id=\"colorpicker\"\r\n formControlName=\"{{ field.property }}\"\r\n [attr.aria-label]=\"field.label! | translate\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\r\n />\r\n </div>\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </ng-container>\r\n </ng-container>\r\n\r\n\r\n <ng-container *ngSwitchCase=\"'radio-button'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"radioButtonReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <mat-radio-group\r\n formControlName=\"{{field.property}}\"\r\n class=\"app-radio\"\r\n [attr.aria-label]=\"field.label! | translate\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\r\n <div class=\"field-row\">\r\n <div class=\"field-label\">\r\n <span class=\"custom-label\">{{ field.label! | translate }}</span>\r\n </div>\r\n <div class=\"field-input\">\r\n <div class=\"radio-group-custom\">\r\n <mat-radio-button\r\n *ngFor=\"let option of field.listOptions\"\r\n [value]=\"option\"\r\n [attr.aria-labelledby]=\"option\">\r\n {{ option | translate }}\r\n </mat-radio-button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-radio-group>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'list'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"listReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\" style=\"width: 100%\">\r\n <mat-select\r\n formControlName=\"{{field.property}}\"\r\n [attr.aria-label]=\"field.label! | translate\"\r\n [attr.aria-required]=\"field.required\"\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\r\n [disabled]=\"field.readonly\"\r\n [multiple]=\"field.multi || false\"\r\n [required]=\"field.readonly ? false : field.required\"\r\n [(value)]=\"field.defaultListOption\">\r\n <ng-container *ngIf=\"field.translate; else lookup_no_translation\">\r\n <mat-option\r\n *ngFor=\"let item of field.listOptions; let i = index\"\r\n [value]=\"item\">\r\n {{ friendlyName(field.label, field.property, item) | translate }}\r\n </mat-option>\r\n </ng-container>\r\n <ng-template #lookup_no_translation>\r\n <mat-option\r\n *ngFor=\"let item of field.listOptions\"\r\n [value]=\"item\">\r\n {{ getOptionValue(item) }}\r\n </mat-option>\r\n </ng-template>\r\n </mat-select>\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'attachment'\" [formGroup]=\"formParam\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n </div>\r\n <app-attachment-uploader\r\n [acceptedTypes]=\"getAcceptedFileTypes(field)\"\r\n [ariaDescribedBy]=\"showError(field.property) ? 'error-' + field.property : null\"\r\n (fileSelected)=\"onAttachmentFileSelected($event, field)\"\r\n style=\"margin-top: 5px\">\r\n </app-attachment-uploader>\r\n </ng-container>\r\n <mat-error class=\"iq-error\"\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'lookup'\" [formGroup]=\"formParam\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"lookupReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <app-auto-complete\r\n [form]=\"formParam\"\r\n [field]=\"field\"\r\n [supportingAttributes]=\"supportingAttributes\"\r\n [defaultValue]=\"this.formParam.get(field.property)?.value\"\r\n (selectedValue)=\"patchLookupValue($event, field.property)\">\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </app-auto-complete>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'currency'\" [formGroup]=\"formParam\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"currencyReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <!-- Uncomment and use the currency control when ready -->\r\n <!-- <app-currency\r\n [form]=\"formParam\"\r\n [field]=\"field\"\r\n [defaultValue]=\"this.formParam.get(field.property)?.value\"\r\n (selectedValue)=\"patchCurrencyValue($event, field.property)\">\r\n </app-currency> -->\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'multi-select'\" [formGroup]=\"formParam\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"multiSelectReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <app-multi-auto-complete\r\n [form]=\"formParam\"\r\n [field]=\"field\"\r\n [defaultValue]=\"getMultiValue(field)\"\r\n (selectedValue)=\"patchMultiSelectValue($event, field.property)\">\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </app-multi-auto-complete>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n\r\n <ng-container *ngSwitchCase=\"'rich-text'\" [formGroup]=\"formParam\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <!-- Uncomment and use the rich text editor when ready -->\r\n <!-- <ckeditor\r\n [editor]=\"Editor\"\r\n [disabled]=\"field.readonly\"\r\n formControlName=\"{{field.property}}\">\r\n </ckeditor> -->\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'divider'\">\r\n <mat-divider></mat-divider>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'hyper-text'\">\r\n <div>\r\n <mat-label\r\n (click)=\"getHyperTextEvent()\"\r\n class=\"hyper-link\">\r\n {{ field.label! | translate }}\r\n </mat-label>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'section-title'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <div class=\"hrdivider-mid\">\r\n <span>{{ field.label | translate }}</span>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'equation-builder'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"textReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <input class=\"app-input\" dir=\"ltr\"\r\n formControlName=\"{{ field.property }}\"\r\n matInput\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [readonly]=\"field.readonly\"\r\n [required]=\"field.required\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n <!-- <ng-container *ngSwitchCase=\"'equation-builder'\" [formGroup]=\"formParam\">-->\r\n <!-- <ng-container *ngIf=\"showField(defaults, field)\">-->\r\n <!-- <ng-container *ngIf=\"!workflowEditableField(field)\">-->\r\n <!-- <ng-container-->\r\n <!-- [ngTemplateOutlet]=\"dateReadonly\"-->\r\n <!-- [ngTemplateOutletContext]=\"{ field: field }\">-->\r\n <!-- </ng-container>-->\r\n <!-- </ng-container>-->\r\n <!-- <ng-container *ngIf=\"workflowEditableField(field)\">-->\r\n <!-- <div style=\"display: flex; width: 350%\">-->\r\n <!-- <mat-label>{{ field.label! | translate }}</mat-label>-->\r\n <!-- <mat-form-field style=\"width: 400%\" appearance=\"outline\">-->\r\n <!-- <mat-chip-grid #chipGrid>-->\r\n <!-- <ng-container *ngFor=\"let equationValue of equationValues(); let i = index\">-->\r\n <!-- <mat-chip-row (removed)=\"remove(equationValue, i)\">-->\r\n <!-- {{ equationValue }}-->\r\n <!-- <button-->\r\n <!-- matChipRemove-->\r\n <!-- [attr.aria-label]=\"'remove ' + equationValue\">-->\r\n <!-- <mat-icon>cancel</mat-icon>-->\r\n <!-- </button>-->\r\n <!-- </mat-chip-row>-->\r\n <!-- </ng-container>-->\r\n <!-- </mat-chip-grid>-->\r\n <!-- <input-->\r\n <!-- [(ngModel)]=\"currentEquationValue\"-->\r\n <!-- [matChipInputFor]=\"chipGrid\"-->\r\n <!-- [matAutocomplete]=\"auto\"-->\r\n <!-- [ngModelOptions]=\"{ standalone: true }\"-->\r\n <!-- [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"-->\r\n <!-- (matChipInputTokenEnd)=\"add($event)\"-->\r\n <!-- aria-label=\"Add equation value\" />-->\r\n <!-- <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"selected($event)\">-->\r\n <!-- <ng-container *ngFor=\"let filteredField of (equationFilteredFields() | async)\">-->\r\n <!-- <mat-option [value]=\"filteredField\">{{ filteredField }}</mat-option>-->\r\n <!-- </ng-container>-->\r\n <!-- </mat-autocomplete>-->\r\n <!-- </mat-form-field>-->\r\n <!-- </div>-->\r\n <!-- <mat-error class=\"iq-error\" *ngIf=\"showError(field.property)\" aria-live=\"assertive\">-->\r\n <!-- {{ getErrors(field.property) | translate }}-->\r\n <!-- </mat-error>-->\r\n <!-- </ng-container>-->\r\n <!-- </ng-container>-->\r\n <!-- </ng-container>-->\r\n\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </form>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n\r\n</div>\r\n<ng-template #dateReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) | date: getReadonlyDateFormat(field) }}</span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #timeReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">{{ formatTimeToDate(defaults[field.property]) | date: 'shortTime' }}</span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #phoneNumberReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #textReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\" *ngIf=\"!field.advancedFilter\"></label>\r\n <ng-container *ngIf=\"isReadonlyTextValueEmpty(defaults, field) && field.emptyReadonlyPlaceholderKey; else textReadonlyHasValue\">\r\n <span class=\"readonly-value readonly-value--empty\">{{ field.emptyReadonlyPlaceholderKey | translate }}</span>\r\n </ng-container>\r\n <ng-template #textReadonlyHasValue>\r\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\r\n </ng-template>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #textareaReadonly let-field=\"field\">\r\n <ng-container *ngIf=\"field.textFormat === 'json'; else normalText\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <div class=\"readonly-value json-viewer\">\r\n <ngx-json-viewer [json]=\"extractJsonFieldName(defaults, field.property)\" [expanded]=\"true\"></ngx-json-viewer>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-template #normalText>\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\r\n </div>\r\n </ng-template>\r\n</ng-template>\r\n\r\n<ng-template #numberReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #currencyReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #radioButtonReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">{{ translateLable(defaults[field.property]) }}</span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #richTextReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\" [innerHtml]=\"extractFieldName(defaults, field.property)\"></span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #checkboxReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">\r\n <mat-icon color=\"warn\" *ngIf=\"extractFieldName(defaults, field.property); else showNo\">done</mat-icon>\r\n <ng-template #showNo>\r\n <mat-icon color=\"warn\">close</mat-icon>\r\n </ng-template>\r\n </span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #toggleReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">\r\n <mat-icon color=\"warn\" *ngIf=\"extractFieldName(defaults, field.property); else showNo\">done</mat-icon>\r\n <ng-template #showNo>\r\n <mat-icon color=\"warn\">close</mat-icon>\r\n </ng-template>\r\n </span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #listReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\" *ngIf=\"field.translate; else noTranslate\">\r\n {{ listShowValue(defaults, field) | translate }}\r\n </span>\r\n <ng-template #noTranslate>\r\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\r\n </ng-template>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #sequenceReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #lookupReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">\r\n {{ extractFieldName(defaults, field.property)?.[translateService.getDefaultLang() === 'en' ? 'englishName' : 'arabicName'] }}\r\n </span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #amountReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">\r\n {{ extractFieldName(defaults, field.property) | currency: currency }}\r\n </span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #multiSelectReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <mat-chip-grid class=\"readonly-value chipList\">\r\n <mat-chip *ngFor=\"let filedProp of showMultiSelectValuesAsReadonly(field)\">\r\n {{ filedProp }}\r\n </mat-chip>\r\n </mat-chip-grid>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #chipListReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHTML]=\"field.label | translate\"></label>\r\n <mat-chip-listbox class=\"readonly-value chipList\">\r\n <mat-chip-option *ngFor=\"let loc of splitReadonly(extractFieldName(defaults, field.property))\"\r\n [selectable]=\"true\"\r\n color=\"warn\"\r\n [removable]=\"false\">\r\n {{ loc }}\r\n </mat-chip-option>\r\n </mat-chip-listbox>\r\n </div>\r\n</ng-template>\r\n\r\n\r\n<ng-template #readonlyView>\r\n <div class=\"row-wrapper\">\r\n <div class=\"column-wrapper\">\r\n <ng-container *ngFor=\"let row of screenFields | keyvalue\">\r\n <div class=\"row-container\">\r\n <ng-container *ngFor=\"let field of row.value\">\r\n <div class=\"field-column readonly-item\" [style.flex]=\"field.fieldSize ? ('0 0 ' + field.fieldSize + '%') : '1 1 0'\">\r\n\r\n <ng-container [ngSwitch]=\"field.type\">\r\n\r\n <ng-container *ngSwitchCase=\"'date'\">\r\n <ng-container [ngTemplateOutlet]=\"dateReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'time'\">\r\n <ng-container [ngTemplateOutlet]=\"timeReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'phone-number'\">\r\n <ng-container [ngTemplateOutlet]=\"phoneNumberReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'text'\">\r\n <ng-container [ngTemplateOutlet]=\"textReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'textarea'\">\r\n <ng-container [ngTemplateOutlet]=\"textareaReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'number'\">\r\n <ng-container [ngTemplateOutlet]=\"numberReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'currency'\">\r\n <ng-container [ngTemplateOutlet]=\"currencyReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'radio-button'\">\r\n <ng-container [ngTemplateOutlet]=\"radioButtonReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'checkbox'\">\r\n <ng-container [ngTemplateOutlet]=\"checkboxReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'toggle'\">\r\n <ng-container [ngTemplateOutlet]=\"toggleReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'status'\">\r\n <ng-container [ngTemplateOutlet]=\"checkboxReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'lookup'\">\r\n <ng-container [ngTemplateOutlet]=\"lookupReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'amount'\">\r\n <ng-container [ngTemplateOutlet]=\"amountReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'multi-select'\">\r\n <ng-container [ngTemplateOutlet]=\"multiSelectReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'chip-list'\">\r\n <ng-container [ngTemplateOutlet]=\"chipListReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'sequence'\">\r\n <ng-container [ngTemplateOutlet]=\"sequenceReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'list'\">\r\n <ng-container [ngTemplateOutlet]=\"listReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'multi-state-checkbox'\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" *ngIf=\"!field.hideLabel\" [innerHtml]=\"field.label | translate\"></label>\r\n <span class=\"readonly-value\">{{ getMultiStateReadonlySummary(field, defaults) }}</span>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'iban-text'\">\r\n <p class=\"label\">\r\n <span [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></span>\r\n <span> : </span>\r\n <span class=\"value\" [innerHtml]=\"extractFieldName(defaults, field.property)\"></span>\r\n </p>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'section-title'\">\r\n <div class=\"hrdivider-mid\">\r\n <span>{{ field.label | translate }}</span>\r\n </div>\r\n </ng-container>\r\n\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n\r\n", styles: [".main-form-canvas{display:flex;flex-direction:row;gap:10px;align-items:flex-start;justify-content:flex-start;width:100%;flex-wrap:wrap}.form-wrapper{display:flex;flex-direction:column;flex:1}.form-container{display:flex;flex-direction:column;width:100%}.row-container{display:flex;flex-direction:row;gap:20px;flex-wrap:wrap;width:100%}.field-column{display:flex;flex-direction:column;flex:1}.label-and-asterisk-container{display:flex;align-items:center;gap:4px}.optional-text{color:#9b9b9b;font-size:11px;font-weight:400;line-height:1.4}.full-width{width:100%}.readonly-item{display:flex;flex-direction:column;align-items:flex-start;gap:2px;font-size:14px;padding:4px 0;width:100%}.readonly-item .readonly-label{font-weight:500;color:#9b9b9b;font-size:14px}.readonly-item .readonly-value{font-weight:500;color:#222;word-break:break-word;font-size:14px}.readonly-item .readonly-value--empty{font-style:italic;font-weight:500;color:#6b7280}.readonly-item .json-viewer{width:100%}.readonly-item .chipList{display:flex;flex-wrap:wrap;gap:4px}.readonly-item mat-icon{font-size:18px;vertical-align:middle}.row-wrapper{display:flex;flex-direction:row;gap:20px;width:100%;flex-wrap:wrap}.column-wrapper{display:flex;flex-direction:column;width:100%;align-items:flex-start}.row-container{display:flex;flex-direction:row;gap:20px;width:100%;flex-wrap:wrap}.field-column{display:flex;flex-direction:column;min-width:50px!important}.field-row{display:flex;flex-direction:row;gap:10px;width:100%;align-items:flex-start}.field-label{flex:0 0 40%;display:flex;flex-direction:column;justify-content:center}.field-input{flex:0 0 60%;display:flex;flex-direction:column}.radio-group-custom{display:flex;flex-direction:row;flex-wrap:wrap;gap:10px}.clear-icon-button{width:40px!important;height:40px!important;min-width:40px!important;padding:8px!important;margin:0!important;margin-inline-start:4px!important;display:flex!important;align-items:center!important;justify-content:center!important;cursor:pointer!important}.clear-icon-button mat-icon{width:24px!important;height:24px!important;font-size:24px!important;line-height:24px!important;margin-top:0!important}.clear-icon-suffix{display:flex!important;align-items:center!important;align-content:center!important;height:100%!important}@media (max-width: 600px){.main-form-canvas{flex-direction:column}.row-container{flex-direction:column;gap:10px}.field-column{width:100%;flex:1 1 100%!important}.column-wrapper{align-items:center}.field-row{flex-direction:column}.field-label,.field-input{flex:1 1 100%}.radio-group-custom{flex-direction:column;gap:5px}}.custom-ngx-mat-intl-tel-input[readonly] input,.custom-ngx-mat-intl-tel-input.ngx-mat-intl-tel-input input[disabled]{pointer-events:none!important;background-color:#f5f5f5!important;color:#444!important}.custom-ngx-mat-intl-tel-input .iti__flag-container,.custom-ngx-mat-intl-tel-input .iti__selected-flag{pointer-events:none!important;opacity:.6}.custom-ngx-mat-intl-tel-input{pointer-events:none!important}::ng-deep .mat-datepicker-content-container mat-calendar.example-month-picker~.mat-datepicker-close-button{display:none!important}@media (max-width: 960px){.row-wrapper,.row-container{flex-direction:column}.row-container{gap:15px}.field-column{flex:1 1 100%!important}}.multi-state-filter{display:flex;flex-direction:column;align-items:flex-start}.multi-state-filter__trigger{display:flex;align-items:center;justify-content:space-between;gap:4px;min-height:45px;padding:0 16px;margin:0;border:1px solid #b7b7b7;border-radius:8px;background:#fff;cursor:pointer;font-family:inherit;font-size:16px;font-weight:300;line-height:1.2;color:#000;box-sizing:border-box;width:100%}.multi-state-filter__trigger:focus-visible{outline:2px solid #0d4261;outline-offset:2px}.multi-state-filter__trigger-text{flex:1 1 auto;text-align:left;color:#000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}.multi-state-filter__trigger-text--placeholder{color:#888}.multi-state-filter__chevron{flex-shrink:0;width:24px;height:24px;font-size:24px;color:#0d4261}::ng-deep .multi-state-filter__menu-panel{max-width:320px;min-width:250px}.multi-state-filter__menu-inner{padding:4px 0}.multi-state-filter__row{display:flex;align-items:center;gap:8px;min-height:28px;max-height:34px;padding:4px 8px;box-sizing:border-box}.multi-state-filter__pill{display:inline-flex;align-items:center;justify-content:center;min-height:24px;padding:0 16px;font-size:14px;font-weight:400;line-height:1.2;white-space:nowrap}\n"] }]
|
|
2793
|
+
], template: "<div class=\"main-form-canvas\">\r\n <div class=\"form-wrapper\">\r\n <ng-container *ngIf=\"defaults\">\r\n <ng-container *ngIf=\"editable; else readonlyView\" class=\"form-container\">\r\n <form [formGroup]=\"formParam\" class=\"form-content\">\r\n <div class=\"form-row\">\r\n <div class=\"form-column\">\r\n <ng-container *ngFor=\"let row of screenFields | keyvalue\">\r\n <div class=\"row-container\">\r\n <ng-container *ngFor=\"let field of row.value\">\r\n <div class=\"field-column\" [style.flex]=\"field.fieldSize ? ('0 0 ' + field.fieldSize + '%') : '1 1 0'\">\r\n <ng-container [ngSwitch]=\"field.type\">\r\n <ng-container *ngSwitchCase=\"'date'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n </div>\r\n\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput\r\n [matDatepicker]=\"picker\"\r\n [min]=\"minDate\"\r\n (dateChange)=\"formParam.get(field.property).setValue($event.value)\"\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [readonly]=\"field.readonly\"\r\n [attr.tabindex]=\"field.readonly ? -1 : null\"\r\n formControlName=\"{{field.property}}\"\r\n [required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\r\n\r\n <mat-datepicker-toggle *ngIf=\"!field.readonly\" matSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n\r\n <mat-datepicker #picker\r\n [startView]=\"getView(field)\"\r\n (yearSelected)=\"setMonthAndYear($event, picker, field)\"\r\n panelClass=\"example-month-picker\">\r\n </mat-datepicker>\r\n\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'phone-number'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container class=\"custom-ngx-mat-intl-tel-input\" *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <div class=\"phone-input-wrapper\">\r\n <ngx-mat-intl-tel-input\r\n formControlName=\"{{ field.property }}\"\r\n [inputPlaceholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [preferredCountries]=\"['qa']\"\r\n [enablePlaceholder]=\"true\"\r\n [enableSearch]=\"true\"\r\n [onlyCountries]=\"getCountryCodeList()\"\r\n [required]=\"field.required\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\r\n </ngx-mat-intl-tel-input>\r\n </div>\r\n\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n\r\n <ng-container *ngSwitchCase=\"'iban-text'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"textReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <input class=\"app-input\"\r\n formControlName=\"{{ field.property }}\"\r\n matInput\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [readonly]=\"field.readonly\"\r\n [attr.tabindex]=\"field.readonly ? -1 : null\"\r\n [required]=\"field.required\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'password'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput\r\n class=\"app-input\"\r\n formControlName=\"{{ field.property }}\"\r\n [type]=\"hide && !field.disabled ? 'password' : 'text'\"\r\n [readonly]=\"field.readonly\"\r\n [attr.tabindex]=\"field.readonly ? -1 : null\"\r\n [required]=\"field.required\"\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\r\n <!-- <mat-icon matSuffix-->\r\n <!-- (click)=\"hide = !hide\">-->\r\n <!-- {{ hide ? 'visibility_off' : 'visibility' }}-->\r\n <!-- </mat-icon>-->\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'text'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"textReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <mat-icon *ngIf=\"field.showSearchIcon\" matPrefix>search</mat-icon>\r\n <input class=\"app-input\"\r\n formControlName=\"{{ field.property }}\"\r\n matInput\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [readonly]=\"field.readonly\"\r\n [attr.tabindex]=\"field.readonly ? -1 : null\"\r\n [required]=\"field.required\"\r\n (keyup)=\"fixArabicNumbers($event.target)\"\r\n [attr.aria-required]=\"field.required\"\r\n [maxDigits]=\"field.maxLength\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\r\n <span\r\n *ngIf=\"field.showSearchIcon && !field.readonly && (formParam?.get([field.property])?.value ?? '') !== ''\"\r\n matSuffix\r\n class=\"clear-icon-suffix\">\r\n <button\r\n mat-icon-button\r\n type=\"button\"\r\n class=\"clear-icon-button\"\r\n [attr.aria-label]=\"'BASE_TABLE.clearField' | translate\"\r\n (click)=\"clearFieldValue(field.property)\">\r\n <mat-icon aria-hidden=\"true\">close</mat-icon>\r\n </button>\r\n </span>\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'multi-state-checkbox'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"multi-state-filter\" [formGroup]=\"formParam\">\r\n <button\r\n type=\"button\"\r\n class=\"multi-state-filter__trigger\"\r\n [matMenuTriggerFor]=\"statusMultiMenu\"\r\n [attr.aria-haspopup]=\"true\"\r\n [attr.aria-expanded]=\"false\"\r\n [attr.aria-label]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : (field.label | translate)\">\r\n <span\r\n class=\"multi-state-filter__trigger-text\"\r\n [class.multi-state-filter__trigger-text--placeholder]=\"isMultiStateEmpty(field.property)\">\r\n {{\r\n getMultiStateFilterTriggerLabel(field)\r\n || (field.placeholder\r\n ? (labelKeyPlaceHolder(field) | translate)\r\n : ('FILTER-BUILDER.selectStatus' | translate))\r\n }}\r\n </span>\r\n <mat-icon class=\"multi-state-filter__chevron\" aria-hidden=\"true\">keyboard_arrow_down</mat-icon>\r\n </button>\r\n <mat-menu #statusMultiMenu=\"matMenu\" class=\"multi-state-filter__menu-panel\" [hasBackdrop]=\"true\">\r\n <div\r\n class=\"multi-state-filter__menu-inner\"\r\n (click)=\"$event.stopPropagation()\"\r\n (keydown)=\"onMultiStateMenuInnerKeydown($event, field)\">\r\n <div\r\n *ngFor=\"let code of field.listOptions || []\"\r\n mat-menu-item\r\n class=\"multi-state-filter__row\"\r\n [attr.data-multi-state-code]=\"code\"\r\n (click)=\"onMultiStateRowClick($event, field.property, code)\">\r\n <mat-checkbox\r\n tabindex=\"-1\"\r\n (click)=\"$event.stopPropagation()\"\r\n [checked]=\"isMultiStateSelected(field.property, code)\"\r\n (change)=\"toggleMultiStateFilter(field.property, code, $event.checked)\">\r\n </mat-checkbox>\r\n <span\r\n class=\"multi-state-filter__pill stateType\"\r\n [ngClass]=\"code\">\r\n {{ statusOptionLabelKey(field, code) | translate }}\r\n </span>\r\n </div>\r\n </div>\r\n </mat-menu>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'chip-list'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n\r\n <mat-chip-grid [attr.aria-labelledby]=\"'label-' + field.property\"\r\n formControlName=\"{{ field.property }}\">\r\n <mat-chip-row\r\n *ngFor=\"let mail of splittedChips(formParam, field.property); let idx = index\"\r\n [removable]=\"removable\"\r\n (removed)=\"removeChipsItem(formParam, field.property, idx)\">\r\n {{ mail }}\r\n <mat-icon matChipRemove *ngIf=\"removable\">cancel</mat-icon>\r\n </mat-chip-row>\r\n\r\n <input [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\r\n [matChipInputFor]=\"null\"\r\n [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\r\n [matChipInputAddOnBlur]=\"addOnBlur\"\r\n (matChipInputTokenEnd)=\"addEmailToChips($event, formParam, field.property)\">\r\n </mat-chip-grid>\r\n <mat-error id=\"error-{{ field.property }}\" *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'amount'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"amountReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <input class=\"app-input\"\r\n formControlName=\"{{ field.property }}\"\r\n matInput\r\n type=\"number\"\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [readonly]=\"field.readonly\"\r\n [attr.tabindex]=\"field.readonly ? -1 : null\"\r\n [required]=\"field.required\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'sequence'\">\r\n <ng-container\r\n *ngIf=\"referenceAttributeTrue(field.property, 'autoGenerated'); else noSequence\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <input class=\"app-input\"\r\n formControlName=\"{{ field.property }}\"\r\n matInput\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [readonly]=\"true\"\r\n [disabled]=\"true\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\">\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-template #noSequence>\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <input class=\"app-input\"\r\n formControlName=\"{{ field.property }}\"\r\n matInput\r\n [readonly]=\"false\"\r\n [disabled]=\"false\"\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [required]=\"field.required\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n </ng-template>\r\n\r\n <ng-container *ngSwitchCase=\"'textarea'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"textareaReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <textarea cdkFocusInitial\r\n formControlName=\"{{ field.property }}\"\r\n matInput\r\n cdkTextareaAutosize\r\n cdkAutosizeMinRows=\"3\"\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\r\n [readonly]=\"field.readonly\"\r\n [attr.tabindex]=\"field.readonly ? -1 : null\"\r\n [required]=\"field.required\"></textarea>\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'number'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"numberReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <input class=\"app-input\"\r\n formControlName=\"{{ field.property }}\"\r\n matInput\r\n type=\"number\"\r\n [attr.min]=\"field.allowNegative ? null : 0\"\r\n (keydown)=\"blockNegativeNumberKeydown($event, field)\"\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [maxDigits]=\"field.maxLength\"\r\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\r\n [required]=\"field.readonly ? false : field.required\"\r\n [readonly]=\"field.readonly\"\r\n [attr.tabindex]=\"field.readonly ? -1 : null\"\r\n [pattern]=\"field.pattern\">\r\n <mat-error id=\"error-{{ field.property }}\" *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'bigdecimal'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"numberReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <input\r\n matInput\r\n type=\"text\"\r\n inputmode=\"numeric\"\r\n formControlName=\"{{ field.property }}\"\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n numbersOnly [maxDecimals]=\"field.maxDecimals\"\r\n [maxDigits]=\"field.maxLength\"\r\n [pattern]=\"field.pattern\"\r\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\r\n [required]=\"field.readonly ? false : field.required\"\r\n [readonly]=\"field.readonly\"\r\n [attr.tabindex]=\"field.readonly ? -1 : null\">\r\n <mat-error id=\"error-{{ field.property }}\" *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'time'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"timeReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <input\r\n matInput\r\n class=\"app-input\"\r\n formControlName=\"{{ field.property }}\"\r\n type=\"time\"\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [readonly]=\"field.readonly\"\r\n [attr.tabindex]=\"field.readonly ? -1 : null\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\r\n [required]=\"field.required\">\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'checkbox'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"checkboxReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <mat-checkbox\r\n appearance=\"outline\"\r\n style=\"padding-bottom: 14px; padding-top: 14px;\"\r\n [disabled]=\"field.readonly\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\r\n formControlName=\"{{ field.property }}\">\r\n {{ field.label! | translate }}\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-checkbox>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'toggle'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"toggleReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n </div>\r\n <mat-slide-toggle\r\n [disabled]=\"field.readonly\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\r\n formControlName=\"{{ field.property }}\">\r\n </mat-slide-toggle>\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'color-picker'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <div fxLayout=\"row\" fxLayoutAlign=\"center\">\r\n <h4 style=\"margin-right: 10px\">{{ field.label! | translate }}</h4>\r\n <input\r\n ejs-colorpicker\r\n type=\"color\"\r\n id=\"colorpicker\"\r\n formControlName=\"{{ field.property }}\"\r\n [attr.aria-label]=\"field.label! | translate\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\r\n />\r\n </div>\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </ng-container>\r\n </ng-container>\r\n\r\n\r\n <ng-container *ngSwitchCase=\"'radio-button'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"radioButtonReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <mat-radio-group\r\n formControlName=\"{{field.property}}\"\r\n class=\"app-radio\"\r\n [attr.aria-label]=\"field.label! | translate\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\r\n <div class=\"field-row\">\r\n <div class=\"field-label\">\r\n <span class=\"custom-label\">{{ field.label! | translate }}</span>\r\n </div>\r\n <div class=\"field-input\">\r\n <div class=\"radio-group-custom\">\r\n <mat-radio-button\r\n *ngFor=\"let option of field.listOptions\"\r\n [value]=\"option\"\r\n [attr.aria-labelledby]=\"option\">\r\n {{ option | translate }}\r\n </mat-radio-button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-radio-group>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'list'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"listReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\" style=\"width: 100%\">\r\n <mat-select\r\n formControlName=\"{{field.property}}\"\r\n [attr.aria-label]=\"field.label! | translate\"\r\n [attr.aria-required]=\"field.required\"\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\r\n [disabled]=\"field.readonly\"\r\n [multiple]=\"field.multi || false\"\r\n [required]=\"field.readonly ? false : field.required\"\r\n [(value)]=\"field.defaultListOption\">\r\n <ng-container *ngIf=\"field.translate; else lookup_no_translation\">\r\n <mat-option\r\n *ngFor=\"let item of field.listOptions; let i = index\"\r\n [value]=\"item\">\r\n {{ friendlyName(field.label, field.property, item) | translate }}\r\n </mat-option>\r\n </ng-container>\r\n <ng-template #lookup_no_translation>\r\n <mat-option\r\n *ngFor=\"let item of field.listOptions\"\r\n [value]=\"item\">\r\n {{ getOptionValue(item) }}\r\n </mat-option>\r\n </ng-template>\r\n </mat-select>\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'attachment'\" [formGroup]=\"formParam\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n </div>\r\n <app-attachment-uploader\r\n [acceptedTypes]=\"getAcceptedFileTypes(field)\"\r\n [ariaDescribedBy]=\"showError(field.property) ? 'error-' + field.property : null\"\r\n (fileSelected)=\"onAttachmentFileSelected($event, field)\"\r\n style=\"margin-top: 5px\">\r\n </app-attachment-uploader>\r\n </ng-container>\r\n <mat-error class=\"iq-error\"\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'lookup'\" [formGroup]=\"formParam\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"lookupReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <app-auto-complete\r\n [form]=\"formParam\"\r\n [field]=\"field\"\r\n [supportingAttributes]=\"supportingAttributes\"\r\n [defaultValue]=\"this.formParam.get(field.property)?.value\"\r\n (selectedValue)=\"patchLookupValue($event, field.property)\">\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </app-auto-complete>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'currency'\" [formGroup]=\"formParam\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"currencyReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <!-- Uncomment and use the currency control when ready -->\r\n <!-- <app-currency\r\n [form]=\"formParam\"\r\n [field]=\"field\"\r\n [defaultValue]=\"this.formParam.get(field.property)?.value\"\r\n (selectedValue)=\"patchCurrencyValue($event, field.property)\">\r\n </app-currency> -->\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'multi-select'\" [formGroup]=\"formParam\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"multiSelectReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <app-multi-auto-complete\r\n [form]=\"formParam\"\r\n [field]=\"field\"\r\n [defaultValue]=\"getMultiValue(field)\"\r\n (selectedValue)=\"patchMultiSelectValue($event, field.property)\">\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </app-multi-auto-complete>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n\r\n <ng-container *ngSwitchCase=\"'rich-text'\" [formGroup]=\"formParam\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <!-- Uncomment and use the rich text editor when ready -->\r\n <!-- <ckeditor\r\n [editor]=\"Editor\"\r\n [disabled]=\"field.readonly\"\r\n formControlName=\"{{field.property}}\">\r\n </ckeditor> -->\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'divider'\">\r\n <mat-divider></mat-divider>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'hyper-text'\">\r\n <div>\r\n <mat-label\r\n (click)=\"getHyperTextEvent()\"\r\n class=\"hyper-link\">\r\n {{ field.label! | translate }}\r\n </mat-label>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'section-title'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <div class=\"hrdivider-mid\">\r\n <span>{{ field.label | translate }}</span>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'equation-builder'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"textReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <input class=\"app-input\" dir=\"ltr\"\r\n formControlName=\"{{ field.property }}\"\r\n matInput\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [readonly]=\"field.readonly\"\r\n [attr.tabindex]=\"field.readonly ? -1 : null\"\r\n [required]=\"field.required\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n <!-- <ng-container *ngSwitchCase=\"'equation-builder'\" [formGroup]=\"formParam\">-->\r\n <!-- <ng-container *ngIf=\"showField(defaults, field)\">-->\r\n <!-- <ng-container *ngIf=\"!workflowEditableField(field)\">-->\r\n <!-- <ng-container-->\r\n <!-- [ngTemplateOutlet]=\"dateReadonly\"-->\r\n <!-- [ngTemplateOutletContext]=\"{ field: field }\">-->\r\n <!-- </ng-container>-->\r\n <!-- </ng-container>-->\r\n <!-- <ng-container *ngIf=\"workflowEditableField(field)\">-->\r\n <!-- <div style=\"display: flex; width: 350%\">-->\r\n <!-- <mat-label>{{ field.label! | translate }}</mat-label>-->\r\n <!-- <mat-form-field style=\"width: 400%\" appearance=\"outline\">-->\r\n <!-- <mat-chip-grid #chipGrid>-->\r\n <!-- <ng-container *ngFor=\"let equationValue of equationValues(); let i = index\">-->\r\n <!-- <mat-chip-row (removed)=\"remove(equationValue, i)\">-->\r\n <!-- {{ equationValue }}-->\r\n <!-- <button-->\r\n <!-- matChipRemove-->\r\n <!-- [attr.aria-label]=\"'remove ' + equationValue\">-->\r\n <!-- <mat-icon>cancel</mat-icon>-->\r\n <!-- </button>-->\r\n <!-- </mat-chip-row>-->\r\n <!-- </ng-container>-->\r\n <!-- </mat-chip-grid>-->\r\n <!-- <input-->\r\n <!-- [(ngModel)]=\"currentEquationValue\"-->\r\n <!-- [matChipInputFor]=\"chipGrid\"-->\r\n <!-- [matAutocomplete]=\"auto\"-->\r\n <!-- [ngModelOptions]=\"{ standalone: true }\"-->\r\n <!-- [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"-->\r\n <!-- (matChipInputTokenEnd)=\"add($event)\"-->\r\n <!-- aria-label=\"Add equation value\" />-->\r\n <!-- <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"selected($event)\">-->\r\n <!-- <ng-container *ngFor=\"let filteredField of (equationFilteredFields() | async)\">-->\r\n <!-- <mat-option [value]=\"filteredField\">{{ filteredField }}</mat-option>-->\r\n <!-- </ng-container>-->\r\n <!-- </mat-autocomplete>-->\r\n <!-- </mat-form-field>-->\r\n <!-- </div>-->\r\n <!-- <mat-error class=\"iq-error\" *ngIf=\"showError(field.property)\" aria-live=\"assertive\">-->\r\n <!-- {{ getErrors(field.property) | translate }}-->\r\n <!-- </mat-error>-->\r\n <!-- </ng-container>-->\r\n <!-- </ng-container>-->\r\n <!-- </ng-container>-->\r\n\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </form>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n\r\n</div>\r\n<ng-template #dateReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) | date: getReadonlyDateFormat(field) }}</span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #timeReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">{{ formatTimeToDate(defaults[field.property]) | date: 'shortTime' }}</span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #phoneNumberReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #textReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\" *ngIf=\"!field.advancedFilter\"></label>\r\n <ng-container *ngIf=\"isReadonlyTextValueEmpty(defaults, field) && field.emptyReadonlyPlaceholderKey; else textReadonlyHasValue\">\r\n <span class=\"readonly-value readonly-value--empty\">{{ field.emptyReadonlyPlaceholderKey | translate }}</span>\r\n </ng-container>\r\n <ng-template #textReadonlyHasValue>\r\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\r\n </ng-template>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #textareaReadonly let-field=\"field\">\r\n <ng-container *ngIf=\"field.textFormat === 'json'; else normalText\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <div class=\"readonly-value json-viewer\">\r\n <ngx-json-viewer [json]=\"extractJsonFieldName(defaults, field.property)\" [expanded]=\"true\"></ngx-json-viewer>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-template #normalText>\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\r\n </div>\r\n </ng-template>\r\n</ng-template>\r\n\r\n<ng-template #numberReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #currencyReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #radioButtonReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">{{ translateLable(defaults[field.property]) }}</span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #richTextReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\" [innerHtml]=\"extractFieldName(defaults, field.property)\"></span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #checkboxReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">\r\n <mat-icon color=\"warn\" *ngIf=\"extractFieldName(defaults, field.property); else showNo\">done</mat-icon>\r\n <ng-template #showNo>\r\n <mat-icon color=\"warn\">close</mat-icon>\r\n </ng-template>\r\n </span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #toggleReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">\r\n <mat-icon color=\"warn\" *ngIf=\"extractFieldName(defaults, field.property); else showNo\">done</mat-icon>\r\n <ng-template #showNo>\r\n <mat-icon color=\"warn\">close</mat-icon>\r\n </ng-template>\r\n </span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #listReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\" *ngIf=\"field.translate; else noTranslate\">\r\n {{ listShowValue(defaults, field) | translate }}\r\n </span>\r\n <ng-template #noTranslate>\r\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\r\n </ng-template>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #sequenceReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #lookupReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">\r\n {{ extractFieldName(defaults, field.property)?.[translateService.getDefaultLang() === 'en' ? 'englishName' : 'arabicName'] }}\r\n </span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #amountReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">\r\n {{ extractFieldName(defaults, field.property) | currency: currency }}\r\n </span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #multiSelectReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <mat-chip-grid class=\"readonly-value chipList\">\r\n <mat-chip *ngFor=\"let filedProp of showMultiSelectValuesAsReadonly(field)\">\r\n {{ filedProp }}\r\n </mat-chip>\r\n </mat-chip-grid>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #chipListReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHTML]=\"field.label | translate\"></label>\r\n <mat-chip-listbox class=\"readonly-value chipList\">\r\n <mat-chip-option *ngFor=\"let loc of splitReadonly(extractFieldName(defaults, field.property))\"\r\n [selectable]=\"true\"\r\n color=\"warn\"\r\n [removable]=\"false\">\r\n {{ loc }}\r\n </mat-chip-option>\r\n </mat-chip-listbox>\r\n </div>\r\n</ng-template>\r\n\r\n\r\n<ng-template #readonlyView>\r\n <div class=\"row-wrapper\">\r\n <div class=\"column-wrapper\">\r\n <ng-container *ngFor=\"let row of screenFields | keyvalue\">\r\n <div class=\"row-container\">\r\n <ng-container *ngFor=\"let field of row.value\">\r\n <div class=\"field-column readonly-item\" [style.flex]=\"field.fieldSize ? ('0 0 ' + field.fieldSize + '%') : '1 1 0'\">\r\n\r\n <ng-container [ngSwitch]=\"field.type\">\r\n\r\n <ng-container *ngSwitchCase=\"'date'\">\r\n <ng-container [ngTemplateOutlet]=\"dateReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'time'\">\r\n <ng-container [ngTemplateOutlet]=\"timeReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'phone-number'\">\r\n <ng-container [ngTemplateOutlet]=\"phoneNumberReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'text'\">\r\n <ng-container [ngTemplateOutlet]=\"textReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'textarea'\">\r\n <ng-container [ngTemplateOutlet]=\"textareaReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'number'\">\r\n <ng-container [ngTemplateOutlet]=\"numberReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'currency'\">\r\n <ng-container [ngTemplateOutlet]=\"currencyReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'radio-button'\">\r\n <ng-container [ngTemplateOutlet]=\"radioButtonReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'checkbox'\">\r\n <ng-container [ngTemplateOutlet]=\"checkboxReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'toggle'\">\r\n <ng-container [ngTemplateOutlet]=\"toggleReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'status'\">\r\n <ng-container [ngTemplateOutlet]=\"checkboxReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'lookup'\">\r\n <ng-container [ngTemplateOutlet]=\"lookupReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'amount'\">\r\n <ng-container [ngTemplateOutlet]=\"amountReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'multi-select'\">\r\n <ng-container [ngTemplateOutlet]=\"multiSelectReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'chip-list'\">\r\n <ng-container [ngTemplateOutlet]=\"chipListReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'sequence'\">\r\n <ng-container [ngTemplateOutlet]=\"sequenceReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'list'\">\r\n <ng-container [ngTemplateOutlet]=\"listReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'multi-state-checkbox'\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" *ngIf=\"!field.hideLabel\" [innerHtml]=\"field.label | translate\"></label>\r\n <span class=\"readonly-value\">{{ getMultiStateReadonlySummary(field, defaults) }}</span>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'iban-text'\">\r\n <p class=\"label\">\r\n <span [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></span>\r\n <span> : </span>\r\n <span class=\"value\" [innerHtml]=\"extractFieldName(defaults, field.property)\"></span>\r\n </p>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'section-title'\">\r\n <div class=\"hrdivider-mid\">\r\n <span>{{ field.label | translate }}</span>\r\n </div>\r\n </ng-container>\r\n\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n\r\n", styles: [".main-form-canvas{display:flex;flex-direction:row;gap:10px;align-items:flex-start;justify-content:flex-start;width:100%;flex-wrap:wrap}.form-wrapper{display:flex;flex-direction:column;flex:1}.form-container{display:flex;flex-direction:column;width:100%}.row-container{display:flex;flex-direction:row;gap:20px;flex-wrap:wrap;width:100%}.field-column{display:flex;flex-direction:column;flex:1}.label-and-asterisk-container{display:flex;align-items:center;gap:4px}.optional-text{color:#9b9b9b;font-size:11px;font-weight:400;line-height:1.4}.full-width{width:100%}.readonly-item{display:flex;flex-direction:column;align-items:flex-start;gap:2px;font-size:14px;padding:4px 0;width:100%}.readonly-item .readonly-label{font-weight:500;color:#9b9b9b;font-size:14px}.readonly-item .readonly-value{font-weight:500;color:#222;word-break:break-word;font-size:14px}.readonly-item .readonly-value--empty{font-style:italic;font-weight:500;color:#6b7280}.readonly-item .json-viewer{width:100%}.readonly-item .chipList{display:flex;flex-wrap:wrap;gap:4px}.readonly-item mat-icon{font-size:18px;vertical-align:middle}.row-wrapper{display:flex;flex-direction:row;gap:20px;width:100%;flex-wrap:wrap}.column-wrapper{display:flex;flex-direction:column;width:100%;align-items:flex-start}.row-container{display:flex;flex-direction:row;gap:20px;width:100%;flex-wrap:wrap}.field-column{display:flex;flex-direction:column;min-width:50px!important}.field-row{display:flex;flex-direction:row;gap:10px;width:100%;align-items:flex-start}.field-label{flex:0 0 40%;display:flex;flex-direction:column;justify-content:center}.field-input{flex:0 0 60%;display:flex;flex-direction:column}.radio-group-custom{display:flex;flex-direction:row;flex-wrap:wrap;gap:10px}.clear-icon-button{width:40px!important;height:40px!important;min-width:40px!important;padding:8px!important;margin:0!important;margin-inline-start:4px!important;display:flex!important;align-items:center!important;justify-content:center!important;cursor:pointer!important}.clear-icon-button mat-icon{width:24px!important;height:24px!important;font-size:24px!important;line-height:24px!important;margin-top:0!important}.clear-icon-suffix{display:flex!important;align-items:center!important;align-content:center!important;height:100%!important}@media (max-width: 600px){.main-form-canvas{flex-direction:column}.row-container{flex-direction:column;gap:10px}.field-column{width:100%;flex:1 1 100%!important}.column-wrapper{align-items:center}.field-row{flex-direction:column}.field-label,.field-input{flex:1 1 100%}.radio-group-custom{flex-direction:column;gap:5px}}.custom-ngx-mat-intl-tel-input[readonly] input,.custom-ngx-mat-intl-tel-input.ngx-mat-intl-tel-input input[disabled]{pointer-events:none!important;background-color:#f5f5f5!important;color:#444!important}.custom-ngx-mat-intl-tel-input .iti__flag-container,.custom-ngx-mat-intl-tel-input .iti__selected-flag{pointer-events:none!important;opacity:.6}.custom-ngx-mat-intl-tel-input{pointer-events:none!important}::ng-deep .mat-datepicker-content-container mat-calendar.example-month-picker~.mat-datepicker-close-button{display:none!important}@media (max-width: 960px){.row-wrapper,.row-container{flex-direction:column}.row-container{gap:15px}.field-column{flex:1 1 100%!important}}.multi-state-filter{display:flex;flex-direction:column;align-items:flex-start}.multi-state-filter__trigger{display:flex;align-items:center;justify-content:space-between;gap:4px;min-height:45px;padding:0 16px;margin:0;border:1px solid #b7b7b7;border-radius:8px;background:#fff;cursor:pointer;font-family:inherit;font-size:16px;font-weight:300;line-height:1.2;color:#000;box-sizing:border-box;width:100%}.multi-state-filter__trigger:focus-visible{outline:2px solid #0d4261;outline-offset:2px}.multi-state-filter__trigger-text{flex:1 1 auto;text-align:left;color:#000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}.multi-state-filter__trigger-text--placeholder{color:#888}.multi-state-filter__chevron{flex-shrink:0;width:24px;height:24px;font-size:24px;color:#0d4261}::ng-deep .multi-state-filter__menu-panel{max-width:320px;min-width:250px}.multi-state-filter__menu-inner{padding:4px 0}.multi-state-filter__row{display:flex;align-items:center;gap:8px;min-height:28px;max-height:34px;padding:4px 8px;box-sizing:border-box}.multi-state-filter__pill{display:inline-flex;align-items:center;justify-content:center;min-height:24px;padding:0 16px;font-size:14px;font-weight:400;line-height:1.2;white-space:nowrap}\n"] }]
|
|
2794
2794
|
}], ctorParameters: () => [{ type: i2.TranslateService }, { type: i3$3.ActivatedRoute }, { type: BackendService }, { type: i3.FormBuilder }, { type: i5.LiveAnnouncer }], propDecorators: { pageInfo: [{
|
|
2795
2795
|
type: Input
|
|
2796
2796
|
}], currency: [{
|
|
@@ -3363,14 +3363,6 @@ class BaseTableComponent extends BaseUtils {
|
|
|
3363
3363
|
}
|
|
3364
3364
|
return 'none';
|
|
3365
3365
|
}
|
|
3366
|
-
onDefaultCellLinkKeydown(event, row) {
|
|
3367
|
-
if (event.key !== 'Enter' && event.key !== ' ') {
|
|
3368
|
-
return;
|
|
3369
|
-
}
|
|
3370
|
-
event.preventDefault();
|
|
3371
|
-
event.stopPropagation();
|
|
3372
|
-
this.emitRoutePage(row);
|
|
3373
|
-
}
|
|
3374
3366
|
getNext(pageIndex) {
|
|
3375
3367
|
this.reportRequest.filterRequest.pageIndex = pageIndex;
|
|
3376
3368
|
this.reportRequest.filterRequest.pageSize = this.pageSize;
|
|
@@ -3752,7 +3744,7 @@ class BaseTableComponent extends BaseUtils {
|
|
|
3752
3744
|
return super.labelKeyByValue(column, row);
|
|
3753
3745
|
}
|
|
3754
3746
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BaseTableComponent, deps: [{ token: BackendService }, { token: i2.TranslateService }, { token: ShareDataService }, { token: 'securityManager' }, { token: i3$3.Router }, { token: i5.LiveAnnouncer }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3755
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: BaseTableComponent, isStandalone: true, selector: "app-base-table", inputs: { filterFields: "filterFields", noDataFoundSvgPath: "noDataFoundSvgPath", noDataFoundTitle: "noDataFoundTitle", noDataFoundSubtitle: "noDataFoundSubtitle", noResultSvgPath: "noResultSvgPath", noResultTitle: "noResultTitle", noResultSubtitle: "noResultSubtitle", pageInfo: "pageInfo", enablePagination: "enablePagination", mobilePageSize: "mobilePageSize", mobileLoadMoreIncrement: "mobileLoadMoreIncrement", data: "data", listAction: "listAction", extraActions: "extraActions", buttonsDisplayMode: "buttonsDisplayMode", columns: "columns", filters: "filters", pathParam: "pathParam", extraButton: "extraButton", enforceRefresh: "enforceRefresh", isPending: "isPending", trigger: "trigger", reportRequest: "reportRequest", separateEndpointData: "separateEndpointData", manageablePages: "manageablePages", totalPagesCount: "totalPagesCount", currentPageIndex: "currentPageIndex", customizedData: "customizedData" }, outputs: { buttonClicked: "buttonClicked", pageChange: "pageChange", userAction: "userAction", hyperLinkAction: "hyperLinkAction", extraAction: "extraAction", selectedColumn: "selectedColumn", listActionClicked: "listActionClicked", showDialog: "showDialog", clickRoutePage: "clickRoutePage" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"flex-column baseTable\">\r\n <div class=\"flex-row flex-100\" >\r\n <div class=\"flex-column align-start flex-100\" style=\"width: 100%;\">\r\n <app-title-bar\r\n [pageTitle]=\"pageInfo.hideTitle ? '' : pageInfo.labelsSection+'.list_title'\"\r\n [subTitle]=\"(pageInfo.hideTitle || pageInfo.hideSubtitle) ? '' : pageInfo.labelsSection+'.subtitle'\"\r\n [titleMode]=\"''\"\r\n [pageInfo]=\"pageInfo\"\r\n [newAction]=\"showAddNew()\"\r\n [showExtractButton]=\"!pageInfo.hideExtractButton\"\r\n [draftSupported]=\"pageInfo.draftSupported\"\r\n [isPending]=\"isPending\"\r\n [onViewModeChange]=\"switchViewMode.bind(this)\"\r\n [buttons]=\"extraActions\"\r\n [buttonsDisplayMode]=\"buttonsDisplayMode\"\r\n (newActionClicked)=\"onAddNewAction($event)\"\r\n (extractReport)=\"extractReport($event)\"\r\n (viewModeChanged)=\"onViewModeChangedReceived($event)\"\r\n (buttonClicked)=\"buttonClicked.emit($event)\"\r\n [totalElements]=\"pageInfo.hideTitle ? undefined : totalElements\">\r\n </app-title-bar>\r\n </div>\r\n </div>\r\n\r\n <div class=\"filter-row\" *ngIf=\"!pageInfo.hideAdvancedFilter\">\r\n <app-filter-builder\r\n *ngIf=\"!pageInfo.hideAdvancedFilter\"\r\n [pageInfo]=\"pageInfo\"\r\n [columns]=\"columns\"\r\n [filterFields]=\"filterFields\"\r\n [pendingFilters]=\"pendingFilters\"\r\n [showExportButton]=\"!pageInfo.hideExtractButton\"\r\n (filterInformation)=\"storePendingFilters($event)\"\r\n (isEmpty)=\"handleFilterEmpty($event)\"\r\n (applyFilter)=\"applyPendingFilters()\"\r\n (sortByClicked)=\"handleSortClick($event)\"\r\n (exportClicked)=\"extractReport($event)\">\r\n </app-filter-builder>\r\n\r\n <div class=\"button-group\" *ngIf=\"!pageInfo.hideExtractButton\">\r\n <button *ngIf=\"!pageInfo.hideExtractButton\"\r\n mat-flat-button\r\n type=\"button\"\r\n [matMenuTriggerFor]=\"exportMenu\"\r\n class=\"btn-export\"\r\n [attr.aria-label]=\"'export' | translate\"\r\n [attr.aria-haspopup]=\"true\"\r\n >\r\n <div class=\"button-text\">\r\n <mat-icon>file_export</mat-icon>\r\n <span>{{ 'export' | translate }}</span>\r\n <mat-icon class=\"arrow-icon\">keyboard_arrow_down</mat-icon>\r\n </div>\r\n </button>\r\n\r\n <mat-menu #exportMenu=\"matMenu\">\r\n <button mat-menu-item (click)=\"extractReport('pdf')\">PDF</button>\r\n <button mat-menu-item (click)=\"extractReport('xlsx')\">Excel</button>\r\n <button mat-menu-item (click)=\"extractReport('csv')\">CSV</button>\r\n </mat-menu>\r\n\r\n </div>\r\n </div>\r\n\r\n\r\n <div class=\"flex-row flex-100 baseTable__detailsColumn\">\r\n <div class=\"flex-100\">\r\n <div class=\"flex-row flex-100 mainTable\">\r\n <div\r\n class=\"table-container\"\r\n role=\"table\"\r\n [attr.aria-label]=\"\r\n pageInfo.labelsSection && !pageInfo.hideTitle\r\n ? (pageInfo.labelsSection + '.list_title' | translate)\r\n : null\r\n \">\r\n <div class=\"table-header\" [attr.data-sort]=\"sortState\" role=\"row\">\r\n <div *ngFor=\"let columnProp of visibleColumnsArray; let i = index\"\r\n class=\"table-header-cell\"\r\n role=\"columnheader\"\r\n [attr.aria-sort]=\"getColumnAriaSort(columnProp)\"\r\n [attr.tabindex]=\"getColumn(columnProp)?.enableSorting ? 0 : null\"\r\n [class.sortable]=\"getColumn(columnProp)?.enableSorting\"\r\n [class.first-cell]=\"i === 0\"\r\n [class.last-cell]=\"i === visibleColumnsArray.length - 1\"\r\n [class.actions-cell]=\"i === visibleColumnsArray.length - 1 && columnProp === 'actions'\"\r\n [class.has-width]=\"getColumn(columnProp)?.width\"\r\n [ngStyle]=\"getColumn(columnProp)?.width ? {'width': getColumn(columnProp)?.width + '%', 'flex-basis': getColumn(columnProp)?.width + '%'} : {}\"\r\n (click)=\"getColumn(columnProp)?.enableSorting && handleSortClick(columnProp)\"\r\n (keydown)=\"onSortHeaderKeydown($event, columnProp)\">\r\n <div class=\"table-header-content\">\r\n <span class=\"table-header-label\">{{ labelKey(getColumn(columnProp)) | translate }}</span>\r\n <ng-container *ngIf=\"getColumn(columnProp)?.enableSorting\">\r\n <mat-icon *ngIf=\"getSortDirection(columnProp) === 'asc'\"\r\n class=\"sort-icon sort-asc\">arrow_drop_up</mat-icon>\r\n <mat-icon *ngIf=\"getSortDirection(columnProp) === 'desc'\"\r\n class=\"sort-icon sort-desc\">arrow_drop_down</mat-icon>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"table-body\" role=\"rowgroup\">\r\n <div *ngFor=\"let row of dataSource.data; let rowIndex = index\"\r\n class=\"table-row\"\r\n role=\"row\"\r\n [attr.id]=\"'table-row-' + (row?.id || row?.key || '')\"\r\n [ngClass]=\"{\r\n 'table-row--highlight': selectedRowIndex == row.id || (pageInfo.groupByProperty && pageInfo.groupByValue?.includes(row[pageInfo.groupByProperty])),\r\n 'table-row--dark-highlight': isDarkHighlight(row)\r\n }\"\r\n (auxclick)=\"openNewTab(row)\"\r\n (click)=\"$event.stopPropagation(); onSelectItem(row)\">\r\n <div *ngFor=\"let columnProp of visibleColumnsArray; let i = index\"\r\n class=\"table-cell\"\r\n role=\"cell\"\r\n [class.first-cell]=\"i === 0\"\r\n [class.last-cell]=\"i === visibleColumnsArray.length - 1\"\r\n [class.actions-cell]=\"i === visibleColumnsArray.length - 1 && columnProp === 'actions'\"\r\n [class.has-width]=\"getColumn(columnProp)?.width\"\r\n [ngStyle]=\"getColumn(columnProp)?.width ? {'width': getColumn(columnProp)?.width + '%', 'flex-basis': getColumn(columnProp)?.width + '%'} : {}\">\r\n <ng-container [ngSwitch]=\"getColumn(columnProp)?.type\">\r\n <ng-container *ngSwitchCase=\"'workflowStatus'\">\r\n <button mat-button class=\"wfStatus {{ getStatusDescription(row)}}\" [attr.id]=\"'table-btn-wf-'+columnProp+'-'+(row.id || row.key || '')\">{{ getStatusDescription(row) }}</button>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'hyper-text'\">\r\n <span\r\n *ngIf=\"shouldRenderAsHyperLink(row); else plainHyperText\"\r\n role=\"link\"\r\n tabindex=\"0\"\r\n class=\"mat-mdc-form-field-label hyper-link\"\r\n (click)=\"hyperLinkClicked(columnProp, row)\"\r\n (keydown.enter)=\"hyperLinkClicked(columnProp, row)\"\r\n (keydown.space)=\"$event.preventDefault(); hyperLinkClicked(columnProp, row)\">\r\n {{ extractFieldName(row, columnProp) }}\r\n </span>\r\n <ng-template #plainHyperText>\r\n <span class=\"mat-mdc-form-field-label\">{{ extractFieldName(row, columnProp) }}</span>\r\n </ng-template>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'button'\">\r\n <button *ngIf=\"shouldShowButton(row)\" mat-button class=\"primary\" (click)=\"$event.stopPropagation(); actionButtonClicked(columnProp, row)\" [attr.id]=\"'table-btn-action-'+columnProp\">\r\n {{ labelKey(getColumn(columnProp)) + '_title' | translate }}\r\n </button>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'icon'\">\r\n <mat-icon [ngClass]=\"{\r\n 'mainTable__td__icon-green': row[columnProp] === 'pass',\r\n 'mainTable__td__icon-orange': row[columnProp] === 'warning',\r\n 'mainTable__td__icon-red': row[columnProp] === 'error'\r\n }\"\r\n [attr.aria-label]=\"getIconAriaLabelKey(row[columnProp]) | translate\">\r\n {{ getIcon(row[columnProp]) }}\r\n </mat-icon>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'checkbox'\">\r\n <mat-checkbox class=\"primary\" [checked]=\"row[columnProp]\" (click)=\"$event.stopPropagation();actionCheckedClicked(columnProp,row)\"></mat-checkbox>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'stateType'\">\r\n <button mat-button class=\"stateType {{ row[columnProp]}}\" [attr.id]=\"'table-btn-state-'+columnProp\">{{ labelKeyByValue(getColumn(columnProp), row) | translate}}</button>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'date'\">\r\n {{ extractFieldName(row, columnProp) | date:'dd/MM/yyyy' }}\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'croppedText'\">\r\n {{ getCroppedText(row[columnProp], row[getColumn(columnProp)?.width]) }}\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'download'\">\r\n <mat-icon class=\"mainTable__td__icon-blue\"\r\n [attr.aria-label]=\"'BASE_TABLE.downloadAction' | translate\">system_update_alt</mat-icon>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'onOff'\">\r\n <mat-icon *ngIf=\"row[columnProp] === null\" class=\"mainTable__td__icon-darkorange\"\r\n [attr.aria-label]=\"getOnOffFlagAriaLabelKey(null) | translate\">flag</mat-icon>\r\n <mat-icon *ngIf=\"row[columnProp] === false\" class=\"mainTable__td__icon-red\"\r\n [attr.aria-label]=\"getOnOffFlagAriaLabelKey(false) | translate\">flag</mat-icon>\r\n <mat-icon *ngIf=\"row[columnProp] === true\" class=\"mainTable__td__icon-green\"\r\n [attr.aria-label]=\"getOnOffFlagAriaLabelKey(true) | translate\">flag</mat-icon>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'status'\">\r\n <span *ngIf=\"row[columnProp] === null || row[columnProp] === false\">\r\n {{ pageInfo.labelsSection + '.' + getColumn(columnProp)?.label + 'InActive' | translate }}\r\n </span>\r\n <span *ngIf=\"row[columnProp] === true\">\r\n {{ pageInfo.labelsSection + '.' + getColumn(columnProp)?.label + 'Active' | translate }}\r\n </span>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'info'\">\r\n <button\r\n mat-icon-button\r\n type=\"button\"\r\n [attr.aria-label]=\"'BASE_TABLE.rowDetails' | translate\"\r\n (click)=\"$event.stopPropagation();emitEvent(row)\"\r\n [attr.id]=\"'table-btn-info-'+row.id\">\r\n <mat-icon aria-hidden=\"true\">info</mat-icon>\r\n </button>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'netAmount'\">\r\n <div class=\"mainTable__td__currency\" style=\"display:inline-block;\">{{ row[getColumn(columnProp)?.currency] }}</div>\r\n <span class=\"mainTable__td__property\" style=\"display:inline-block; margin-left:6px; margin-right:6px;\">\r\n {{ extractFieldName(row, columnProp) | currency:'':'' }}</span>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'localDateTime'\">\r\n {{ extractFieldName(row, columnProp) | date : extractFormat(getColumn(columnProp)) }}\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'bigdecimal'\">\r\n <small><sup class=\"mainTable__td__currency\">{{row[getColumn(columnProp)?.currency]}}</sup></small>\r\n {{ extractFieldName(row, columnProp) | number : (getColumn(columnProp)?.digitInfo || '1.3-5') }}\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'listAction'\">\r\n <app-button-actions\r\n [row]=\"row\"\r\n [buttonsAction]=\"getColumn(columnProp)?.viewType === 'buttonsAction'\"\r\n [listAction]=\"listAction\"\r\n [actions]=\"listAction\"\r\n (clickedButton)=\"actionListClicked($event,row)\">\r\n </app-button-actions>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchDefault>\r\n <ng-container *ngIf=\"getColumn(columnProp)?.translate; else noTranslate\">\r\n <span\r\n role=\"link\"\r\n tabindex=\"0\"\r\n (click)=\"$event.stopPropagation(); emitRoutePage(row)\"\r\n (keydown)=\"onDefaultCellLinkKeydown($event, row)\">\r\n {{ pageInfo.labelsSection + \".\" + extractFieldName(row, columnProp) | translate }}\r\n </span>\r\n </ng-container>\r\n <ng-template #noTranslate>\r\n <span\r\n role=\"link\"\r\n tabindex=\"0\"\r\n (click)=\"$event.stopPropagation(); emitRoutePage(row)\"\r\n (keydown)=\"onDefaultCellLinkKeydown($event, row)\"\r\n [innerText]='extractFieldName(row, columnProp)'></span>\r\n </ng-template>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Mobile Card View -->\r\n <div class=\"mobile-cards-container\">\r\n <div *ngFor=\"let row of dataSource.data; let rowIndex = index\"\r\n class=\"mobile-card\"\r\n [attr.id]=\"'mobile-card-' + (row?.id || row?.key || '')\"\r\n [ngClass]=\"{\r\n 'mobile-card--highlight': selectedRowIndex == row.id || (pageInfo.groupByProperty && pageInfo.groupByValue?.includes(row[pageInfo.groupByProperty])),\r\n 'mobile-card--dark-highlight': isDarkHighlight(row)\r\n }\"\r\n (auxclick)=\"openNewTab(row)\"\r\n (click)=\"$event.stopPropagation(); onSelectItem(row)\">\r\n\r\n <!-- Mobile Card Header: ID/Name and Status -->\r\n <div class=\"mobile-card__header\">\r\n <div class=\"mobile-card__header-id\">\r\n <span class=\"mobile-card__id-text\">{{ extractFieldName(row, getMobileCardIdColumn()?.property || 'id') }}</span>\r\n </div>\r\n <div class=\"mobile-card__header-status\" *ngIf=\"getMobileCardStatusColumn()\">\r\n <button mat-button class=\"stateType {{ row[getMobileCardStatusColumn()?.property]}}\"\r\n [attr.id]=\"'mobile-btn-state-'+getMobileCardStatusColumn()?.property\">\r\n {{ labelKeyByValue(getMobileCardStatusColumn(), row) | translate}}\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <!-- Divider -->\r\n <div class=\"mobile-card__divider\"></div>\r\n\r\n <!-- Mobile Card Body: Other columns -->\r\n <div class=\"mobile-card__body\">\r\n <div *ngFor=\"let column of getMobileCardColumns()\" class=\"mobile-card__row\">\r\n <div class=\"mobile-card__row-label\">\r\n <span>{{ labelKey(column) | translate }} :</span>\r\n </div>\r\n <div class=\"mobile-card__row-value\">\r\n <ng-container [ngSwitch]=\"column.type\">\r\n <ng-container *ngSwitchCase=\"'stateType'\">\r\n <button mat-button class=\"stateType {{ row[column.property]}}\"\r\n [attr.id]=\"'mobile-btn-state-'+column.property\">\r\n {{ labelKeyByValue(column, row) | translate}}\r\n </button>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'date'\">\r\n {{ extractFieldName(row, column.property) | date:'dd/MM/yyyy' }}\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'netAmount'\">\r\n <span class=\"mobile-card__amount-currency\">{{ row[column.currency] }}</span>\r\n <span class=\"mobile-card__amount-value\">{{ extractFieldName(row, column.property) | currency:'':'' }}</span>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'localDateTime'\">\r\n {{ extractFieldName(row, column.property) | date : extractFormat(column) }}\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'bigdecimal'\">\r\n <small><sup class=\"mainTable__td__currency\">{{row[column.currency]}}</sup></small>\r\n {{ extractFieldName(row, column.property) | number : (column.digitInfo || '1.3-5') }}\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchDefault>\r\n <ng-container *ngIf=\"column.translate; else noTranslate\">\r\n <span>{{ pageInfo.labelsSection + \".\" + extractFieldName(row, column.property) | translate }}</span>\r\n </ng-container>\r\n <ng-template #noTranslate>\r\n <span [innerText]='extractFieldName(row, column.property)'></span>\r\n </ng-template>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Mobile Card Actions -->\r\n <div class=\"mobile-card__actions\" *ngIf=\"listAction && listAction.length > 0\">\r\n <app-button-actions\r\n [row]=\"row\"\r\n [buttonsAction]=\"true\"\r\n [listAction]=\"listAction\"\r\n [actions]=\"listAction\"\r\n (clickedButton)=\"actionListClicked($event,row)\">\r\n </app-button-actions>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"noDataFound\" class=\"dataNotFound flex-column\">\r\n <img *ngIf=\"getDisplaySvgPath()\" [src]=\"getDisplaySvgPath()\" class=\"dataNotFound__icon\" alt=\"No data found\" />\r\n <span class=\"dataNotFound__title\">{{ getDisplayTitle() | translate}}</span>\r\n <span class=\"dataNotFound__subtitle\">{{ getDisplaySubtitle() | translate}}</span>\r\n </div>\r\n\r\n\r\n <div *ngIf=\"(dataSource.data?.length > 0 || customizedData) && !pageInfo.hidePagination\" class=\"main-pagination flex-row\">\r\n <ng-container *ngIf=\"enablePagination\">\r\n <div class=\"flex-column flex-100\">\r\n <app-paginator\r\n [currentPage]=\"pageIndex\"\r\n [totalItems]=\"totalElements\"\r\n [pageSize]=\"pageSize\"\r\n [pageSizeOptions]=\"[5, 10, 25, 50]\"\r\n [mobileLoadMoreIncrement]=\"mobileLoadMoreIncrement\"\r\n [displayedItems]=\"mobileDisplayedItems || dataSource.data.length\"\r\n (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"\r\n (loadMore)=\"onLoadMore($event)\">\r\n </app-paginator>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [":host{display:block;width:100%;max-width:100%;box-sizing:border-box}.baseTable{width:100%!important;max-width:100%!important;box-sizing:border-box}.flex-row{display:flex;flex-direction:row}.flex-column{display:flex;flex-direction:column;width:100%;max-width:100%;box-sizing:border-box}.flex-100{flex:1 1 100%}.flex-49{flex:0 0 49%}.flex-50{flex:0 0 50%}.align-start{justify-content:flex-start;align-items:flex-start}.align-center{justify-content:center;align-items:center}.align-end{justify-content:flex-end;align-items:flex-end}.gap-0{gap:0}.gap-5{gap:5px}.gap-10{gap:10px}.dataNotFound{display:flex;flex-direction:column;justify-content:center;align-items:center;height:auto;min-height:280px;text-align:center;margin-top:0;padding:40px 0}.dataNotFound__icon{height:auto;width:auto;max-width:200px;max-height:200px;margin-bottom:8px;object-fit:contain}.dataNotFound__title{color:#6a6a6a;font-size:20px;font-weight:700;margin-bottom:4px}.dataNotFound__subtitle{color:#6a6a6a;font-size:20px;font-weight:400}@media (max-width: 960px){.flex-column-sm{flex-direction:column}.align-center-sm{justify-content:center;align-items:flex-start}}.filter-row{display:flex!important;flex-direction:row!important;align-items:center!important;width:100%!important;max-width:100%!important;gap:16px!important;box-sizing:border-box;margin-top:20px;margin-bottom:16px;padding:0;flex-wrap:nowrap!important;min-width:0!important;min-height:48px!important;overflow:visible!important}.filter-row app-filter-builder{flex:1 1 auto!important;min-width:0!important;max-width:none!important;width:auto!important;flex-shrink:1!important;display:flex!important;align-items:center!important;overflow:visible!important}.button-group{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-end;gap:8px!important;flex-shrink:0!important;flex-grow:0!important;flex-basis:auto!important;height:46px!important;white-space:nowrap!important;z-index:1!important}.mainTable{margin-top:0!important}.btn-apply-filter{background:#fff!important;border:1px solid #3e627b!important;border-radius:8px!important;height:46px!important;min-width:120px!important;padding:0 16px!important;box-shadow:none!important}.btn-apply-filter .button-text{display:flex;align-items:center;justify-content:center;gap:4px;width:100%}.btn-apply-filter mat-icon{font-size:24px;width:24px;height:30px;color:#0d4261}.btn-apply-filter span{font-family:Lusail,sans-serif;font-weight:500;font-size:16px;line-height:1.2;color:#0d4261;white-space:nowrap}.btn-apply-filter:hover{background:#fafafa!important}.btn-export{background:#fff!important;border:1px solid #0d4261!important;border-radius:8px!important;height:46px!important;min-width:109px!important;padding:0 16px!important;box-shadow:none!important;margin-bottom:7px!important}.btn-export .button-text{display:flex;align-items:center;justify-content:center;gap:4px;width:100%}.btn-export mat-icon{font-size:24px;width:24px;height:30px;color:#0d4261}.btn-export .arrow-icon{font-size:16px;width:16px;height:16px;margin-left:0}.btn-export span{font-family:Lusail,sans-serif;font-weight:500;font-size:16px;line-height:1.2;color:#0d4261;white-space:nowrap}.btn-export:hover{background:#fafafa!important}.arrow-icon{font-size:16px;width:16px;height:16px}@media (max-width: 1024px){.button-group{width:auto}}@media (max-width: 768px){.filter-row{flex-direction:column;align-items:stretch}.button-group{display:none!important}.btn-export{width:100%}}.table-container{width:100%;overflow:hidden;background:#f7f7f7;box-sizing:border-box;display:flex;flex-direction:column}.table-header{display:flex;align-items:center;background:#f7f7f7;border:1px solid #f0eeee;max-height:48px;height:48px;margin-bottom:16px;border-radius:8px;overflow:hidden;width:100%;box-sizing:border-box;min-width:0}.table-header-cell{display:flex;align-items:center;max-height:48px;height:48px;padding:8px 16px;flex:1;min-width:100px;position:sticky;top:0;background:none;z-index:10;box-sizing:border-box}.table-header-cell.has-width{flex:0 0 auto!important;min-width:0!important;max-width:none!important}.table-header-cell:last-child{border-right:none}.table-header-cell.first-cell{border-top-left-radius:8px;border-bottom-left-radius:8px}.table-header-cell.last-cell{border-top-right-radius:8px;border-bottom-right-radius:8px}.table-header-cell.actions-cell{justify-content:center;text-align:center}.table-header-cell.actions-cell .table-header-content{justify-content:center}.table-header-cell.sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.table-header-cell.sortable:hover{background:#fafafa}.table-header-content{display:flex;align-items:center;gap:8px;width:100%}.table-header-label{font-family:Lusail,sans-serif;font-weight:500;font-size:16px;line-height:1.2;color:#0d4261;white-space:nowrap}.sort-icon{font-size:18px;width:18px;height:18px;color:#5c5c5c;display:flex;align-items:center;justify-content:center;transition:color .2s}.sort-icon.sort-asc,.sort-icon.sort-desc{color:#0d4261}.table-body{display:flex;flex-direction:column;gap:8px;background:#f7f7f7}.table-row{display:flex;align-items:center;min-height:48px;background:#fff;border-bottom:1px solid #f0eeee;transition:background-color .2s;border-radius:8px;overflow:hidden;width:100%;box-sizing:border-box;min-width:0}.table-row:hover{background:#fafafa}.table-row--highlight{background:#f0f8ff}.table-row--dark-highlight{background:#e8f4f8}.table-row .table-cell.first-cell{border-top-left-radius:8px;border-bottom-left-radius:8px}.table-row .table-cell.last-cell{border-top-right-radius:8px;border-bottom-right-radius:8px}.table-cell{display:flex;align-items:center;min-height:48px;max-height:none;padding:8px 16px;flex:1;min-width:100px;font-family:Lusail,sans-serif;font-weight:400;font-size:16px;line-height:1.2;color:#000;box-sizing:border-box}.table-cell.has-width{flex:0 0 auto!important;min-width:0!important;max-width:none!important}.table-cell:last-child{border-right:none}.table-cell.actions-cell{justify-content:center;text-align:center}.mobile-cards-container{display:none;flex-direction:column;gap:12px;width:100%;box-sizing:border-box}.mobile-card{background:#fff;border:1px solid #f0eeee;border-radius:8px;padding:12px 20px;display:flex;flex-direction:column;gap:4px;cursor:pointer;transition:background-color .2s;box-sizing:border-box;width:100%}.mobile-card:hover{background:#fafafa}.mobile-card--highlight{background:#f0f8ff}.mobile-card--dark-highlight{background:#e8f4f8}.mobile-card__header{display:flex;align-items:center;justify-content:space-between;height:48px;width:100%;box-sizing:border-box}.mobile-card__header-id{display:flex;flex-direction:column;justify-content:center;flex:1}.mobile-card__id-text{font-family:Lusail,sans-serif;font-weight:700;font-size:14px;line-height:1.2;color:#222;text-align:left;white-space:nowrap}.mobile-card__header-status{display:flex;align-items:center;justify-content:flex-end;flex-shrink:0}.mobile-card__divider{height:.347px;width:100%;background:#f0eeee;margin:0;flex-shrink:0}.mobile-card__body{display:flex;flex-direction:column;gap:0;width:100%;box-sizing:border-box}.mobile-card__row{display:flex;align-items:center;justify-content:space-between;height:40px;width:100%;overflow:hidden;box-sizing:border-box}.mobile-card__row-label{display:flex;flex-direction:column;justify-content:center;flex-shrink:0}.mobile-card__row-label span{font-family:Lusail,sans-serif;font-weight:400;font-size:14px;line-height:1.2;color:#222;white-space:nowrap}.mobile-card__row-value{display:flex;flex-direction:column;justify-content:center;flex-shrink:0;text-align:right}.mobile-card__row-value span{font-family:Lusail,sans-serif;font-weight:400;font-size:14px;line-height:1.2;color:#222;white-space:nowrap}.mobile-card__amount-currency{font-family:Lusail,sans-serif;font-weight:400;font-size:14px;line-height:1.2;color:#222;display:inline-block}.mobile-card__amount-value{font-family:Lusail,sans-serif;font-weight:700;font-size:14px;line-height:1.2;color:#222;display:inline-block;margin-left:6px;margin-right:6px}.mobile-card__actions{border-top:1px solid #f0eeee;padding-top:8px;margin-top:4px;display:flex;align-items:center;justify-content:center;min-height:48px;max-height:48px;width:100%;box-sizing:border-box}@media (max-width: 768px){.table-container{display:none}.mobile-cards-container{display:flex}}@media (min-width: 769px){.mobile-cards-container{display:none}.table-container{display:flex}}:host ::ng-deep button.mat-mdc-button.stateType,:host ::ng-deep button.mdc-button.stateType{white-space:normal!important;height:auto!important;min-height:28px!important;max-width:100%!important;align-items:center!important;justify-content:center!important;cursor:default!important}:host ::ng-deep button.mat-mdc-button.stateType .mdc-button__label,:host ::ng-deep button.mdc-button.stateType .mdc-button__label{white-space:normal!important;display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:2!important;line-clamp:2!important;overflow:hidden!important;word-break:break-word!important;line-height:1.25!important;max-width:100%!important;text-align:center!important}\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: i6$1.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i6$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "ngmodule", type: NgxPaginationModule }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ButtonActionsComponent, selector: "app-button-actions", inputs: ["actions", "disabled", "buttonsAction", "listAction", "row"], outputs: ["clickedButton"] }, { kind: "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: [] }); }
|
|
3747
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: BaseTableComponent, isStandalone: true, selector: "app-base-table", inputs: { filterFields: "filterFields", noDataFoundSvgPath: "noDataFoundSvgPath", noDataFoundTitle: "noDataFoundTitle", noDataFoundSubtitle: "noDataFoundSubtitle", noResultSvgPath: "noResultSvgPath", noResultTitle: "noResultTitle", noResultSubtitle: "noResultSubtitle", pageInfo: "pageInfo", enablePagination: "enablePagination", mobilePageSize: "mobilePageSize", mobileLoadMoreIncrement: "mobileLoadMoreIncrement", data: "data", listAction: "listAction", extraActions: "extraActions", buttonsDisplayMode: "buttonsDisplayMode", columns: "columns", filters: "filters", pathParam: "pathParam", extraButton: "extraButton", enforceRefresh: "enforceRefresh", isPending: "isPending", trigger: "trigger", reportRequest: "reportRequest", separateEndpointData: "separateEndpointData", manageablePages: "manageablePages", totalPagesCount: "totalPagesCount", currentPageIndex: "currentPageIndex", customizedData: "customizedData" }, outputs: { buttonClicked: "buttonClicked", pageChange: "pageChange", userAction: "userAction", hyperLinkAction: "hyperLinkAction", extraAction: "extraAction", selectedColumn: "selectedColumn", listActionClicked: "listActionClicked", showDialog: "showDialog", clickRoutePage: "clickRoutePage" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"flex-column baseTable\">\r\n <div class=\"flex-row flex-100\" >\r\n <div class=\"flex-column align-start flex-100\" style=\"width: 100%;\">\r\n <app-title-bar\r\n [pageTitle]=\"pageInfo.hideTitle ? '' : pageInfo.labelsSection+'.list_title'\"\r\n [subTitle]=\"(pageInfo.hideTitle || pageInfo.hideSubtitle) ? '' : pageInfo.labelsSection+'.subtitle'\"\r\n [titleMode]=\"''\"\r\n [pageInfo]=\"pageInfo\"\r\n [newAction]=\"showAddNew()\"\r\n [showExtractButton]=\"!pageInfo.hideExtractButton\"\r\n [draftSupported]=\"pageInfo.draftSupported\"\r\n [isPending]=\"isPending\"\r\n [onViewModeChange]=\"switchViewMode.bind(this)\"\r\n [buttons]=\"extraActions\"\r\n [buttonsDisplayMode]=\"buttonsDisplayMode\"\r\n (newActionClicked)=\"onAddNewAction($event)\"\r\n (extractReport)=\"extractReport($event)\"\r\n (viewModeChanged)=\"onViewModeChangedReceived($event)\"\r\n (buttonClicked)=\"buttonClicked.emit($event)\"\r\n [totalElements]=\"pageInfo.hideTitle ? undefined : totalElements\">\r\n </app-title-bar>\r\n </div>\r\n </div>\r\n\r\n <div class=\"filter-row\" *ngIf=\"!pageInfo.hideAdvancedFilter\">\r\n <app-filter-builder\r\n *ngIf=\"!pageInfo.hideAdvancedFilter\"\r\n [pageInfo]=\"pageInfo\"\r\n [columns]=\"columns\"\r\n [filterFields]=\"filterFields\"\r\n [pendingFilters]=\"pendingFilters\"\r\n [showExportButton]=\"!pageInfo.hideExtractButton\"\r\n (filterInformation)=\"storePendingFilters($event)\"\r\n (isEmpty)=\"handleFilterEmpty($event)\"\r\n (applyFilter)=\"applyPendingFilters()\"\r\n (sortByClicked)=\"handleSortClick($event)\"\r\n (exportClicked)=\"extractReport($event)\">\r\n </app-filter-builder>\r\n\r\n <div class=\"button-group\" *ngIf=\"!pageInfo.hideExtractButton\">\r\n <button *ngIf=\"!pageInfo.hideExtractButton\"\r\n mat-flat-button\r\n type=\"button\"\r\n [matMenuTriggerFor]=\"exportMenu\"\r\n class=\"btn-export\"\r\n [attr.aria-label]=\"'export' | translate\"\r\n [attr.aria-haspopup]=\"true\"\r\n >\r\n <div class=\"button-text\">\r\n <mat-icon>file_export</mat-icon>\r\n <span>{{ 'export' | translate }}</span>\r\n <mat-icon class=\"arrow-icon\">keyboard_arrow_down</mat-icon>\r\n </div>\r\n </button>\r\n\r\n <mat-menu #exportMenu=\"matMenu\">\r\n <button mat-menu-item (click)=\"extractReport('pdf')\">PDF</button>\r\n <button mat-menu-item (click)=\"extractReport('xlsx')\">Excel</button>\r\n <button mat-menu-item (click)=\"extractReport('csv')\">CSV</button>\r\n </mat-menu>\r\n\r\n </div>\r\n </div>\r\n\r\n\r\n <div class=\"flex-row flex-100 baseTable__detailsColumn\">\r\n <div class=\"flex-100\">\r\n <div class=\"flex-row flex-100 mainTable\">\r\n <div\r\n class=\"table-container\"\r\n role=\"table\"\r\n [attr.aria-label]=\"\r\n pageInfo.labelsSection && !pageInfo.hideTitle\r\n ? (pageInfo.labelsSection + '.list_title' | translate)\r\n : null\r\n \">\r\n <div class=\"table-header\" [attr.data-sort]=\"sortState\" role=\"row\">\r\n <div *ngFor=\"let columnProp of visibleColumnsArray; let i = index\"\r\n class=\"table-header-cell\"\r\n role=\"columnheader\"\r\n [attr.aria-sort]=\"getColumnAriaSort(columnProp)\"\r\n [attr.tabindex]=\"getColumn(columnProp)?.enableSorting ? 0 : null\"\r\n [class.sortable]=\"getColumn(columnProp)?.enableSorting\"\r\n [class.first-cell]=\"i === 0\"\r\n [class.last-cell]=\"i === visibleColumnsArray.length - 1\"\r\n [class.actions-cell]=\"i === visibleColumnsArray.length - 1 && columnProp === 'actions'\"\r\n [class.has-width]=\"getColumn(columnProp)?.width\"\r\n [ngStyle]=\"getColumn(columnProp)?.width ? {'width': getColumn(columnProp)?.width + '%', 'flex-basis': getColumn(columnProp)?.width + '%'} : {}\"\r\n (click)=\"getColumn(columnProp)?.enableSorting && handleSortClick(columnProp)\"\r\n (keydown)=\"onSortHeaderKeydown($event, columnProp)\">\r\n <div class=\"table-header-content\">\r\n <span class=\"table-header-label\">{{ labelKey(getColumn(columnProp)) | translate }}</span>\r\n <ng-container *ngIf=\"getColumn(columnProp)?.enableSorting\">\r\n <mat-icon *ngIf=\"getSortDirection(columnProp) === 'asc'\"\r\n class=\"sort-icon sort-asc\">arrow_drop_up</mat-icon>\r\n <mat-icon *ngIf=\"getSortDirection(columnProp) === 'desc'\"\r\n class=\"sort-icon sort-desc\">arrow_drop_down</mat-icon>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"table-body\" role=\"rowgroup\">\r\n <div *ngFor=\"let row of dataSource.data; let rowIndex = index\"\r\n class=\"table-row\"\r\n role=\"row\"\r\n [attr.tabindex]=\"-1\"\r\n [attr.id]=\"'table-row-' + (row?.id || row?.key || '')\"\r\n [ngClass]=\"{\r\n 'table-row--highlight': selectedRowIndex == row.id || (pageInfo.groupByProperty && pageInfo.groupByValue?.includes(row[pageInfo.groupByProperty])),\r\n 'table-row--dark-highlight': isDarkHighlight(row)\r\n }\"\r\n (auxclick)=\"openNewTab(row)\"\r\n (click)=\"$event.stopPropagation(); onSelectItem(row)\">\r\n <div *ngFor=\"let columnProp of visibleColumnsArray; let i = index\"\r\n class=\"table-cell\"\r\n role=\"cell\"\r\n [class.first-cell]=\"i === 0\"\r\n [class.last-cell]=\"i === visibleColumnsArray.length - 1\"\r\n [class.actions-cell]=\"i === visibleColumnsArray.length - 1 && columnProp === 'actions'\"\r\n [class.has-width]=\"getColumn(columnProp)?.width\"\r\n [ngStyle]=\"getColumn(columnProp)?.width ? {'width': getColumn(columnProp)?.width + '%', 'flex-basis': getColumn(columnProp)?.width + '%'} : {}\">\r\n <ng-container [ngSwitch]=\"getColumn(columnProp)?.type\">\r\n <ng-container *ngSwitchCase=\"'workflowStatus'\">\r\n <button mat-button type=\"button\" class=\"wfStatus {{ getStatusDescription(row)}}\" [attr.id]=\"'table-btn-wf-'+columnProp+'-'+(row.id || row.key || '')\" [attr.tabindex]=\"-1\">{{ getStatusDescription(row) }}</button>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'hyper-text'\">\r\n <span\r\n *ngIf=\"shouldRenderAsHyperLink(row); else plainHyperText\"\r\n class=\"mat-mdc-form-field-label hyper-link\"\r\n [attr.tabindex]=\"-1\"\r\n (click)=\"hyperLinkClicked(columnProp, row)\">\r\n {{ extractFieldName(row, columnProp) }}\r\n </span>\r\n <ng-template #plainHyperText>\r\n <span class=\"mat-mdc-form-field-label\">{{ extractFieldName(row, columnProp) }}</span>\r\n </ng-template>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'button'\">\r\n <button *ngIf=\"shouldShowButton(row)\" mat-button type=\"button\" class=\"primary\" (click)=\"$event.stopPropagation(); actionButtonClicked(columnProp, row)\" [attr.id]=\"'table-btn-action-'+columnProp\">\r\n {{ labelKey(getColumn(columnProp)) + '_title' | translate }}\r\n </button>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'icon'\">\r\n <mat-icon [ngClass]=\"{\r\n 'mainTable__td__icon-green': row[columnProp] === 'pass',\r\n 'mainTable__td__icon-orange': row[columnProp] === 'warning',\r\n 'mainTable__td__icon-red': row[columnProp] === 'error'\r\n }\"\r\n [attr.aria-label]=\"getIconAriaLabelKey(row[columnProp]) | translate\">\r\n {{ getIcon(row[columnProp]) }}\r\n </mat-icon>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'checkbox'\">\r\n <mat-checkbox class=\"primary\" [tabIndex]=\"-1\" [checked]=\"row[columnProp]\" (click)=\"$event.stopPropagation();actionCheckedClicked(columnProp,row)\"></mat-checkbox>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'stateType'\">\r\n <button mat-button type=\"button\" class=\"stateType {{ row[columnProp]}}\" [attr.id]=\"'table-btn-state-'+columnProp\" [attr.tabindex]=\"-1\">{{ labelKeyByValue(getColumn(columnProp), row) | translate}}</button>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'date'\">\r\n {{ extractFieldName(row, columnProp) | date:'dd/MM/yyyy' }}\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'croppedText'\">\r\n {{ getCroppedText(row[columnProp], row[getColumn(columnProp)?.width]) }}\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'download'\">\r\n <mat-icon class=\"mainTable__td__icon-blue\"\r\n [attr.aria-label]=\"'BASE_TABLE.downloadAction' | translate\">system_update_alt</mat-icon>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'onOff'\">\r\n <mat-icon *ngIf=\"row[columnProp] === null\" class=\"mainTable__td__icon-darkorange\"\r\n [attr.aria-label]=\"getOnOffFlagAriaLabelKey(null) | translate\">flag</mat-icon>\r\n <mat-icon *ngIf=\"row[columnProp] === false\" class=\"mainTable__td__icon-red\"\r\n [attr.aria-label]=\"getOnOffFlagAriaLabelKey(false) | translate\">flag</mat-icon>\r\n <mat-icon *ngIf=\"row[columnProp] === true\" class=\"mainTable__td__icon-green\"\r\n [attr.aria-label]=\"getOnOffFlagAriaLabelKey(true) | translate\">flag</mat-icon>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'status'\">\r\n <span *ngIf=\"row[columnProp] === null || row[columnProp] === false\">\r\n {{ pageInfo.labelsSection + '.' + getColumn(columnProp)?.label + 'InActive' | translate }}\r\n </span>\r\n <span *ngIf=\"row[columnProp] === true\">\r\n {{ pageInfo.labelsSection + '.' + getColumn(columnProp)?.label + 'Active' | translate }}\r\n </span>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'info'\">\r\n <button\r\n mat-icon-button\r\n type=\"button\"\r\n [attr.tabindex]=\"-1\"\r\n [attr.aria-label]=\"'BASE_TABLE.rowDetails' | translate\"\r\n (click)=\"$event.stopPropagation();emitEvent(row)\"\r\n [attr.id]=\"'table-btn-info-'+row.id\">\r\n <mat-icon aria-hidden=\"true\">info</mat-icon>\r\n </button>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'netAmount'\">\r\n <div class=\"mainTable__td__currency\" style=\"display:inline-block;\">{{ row[getColumn(columnProp)?.currency] }}</div>\r\n <span class=\"mainTable__td__property\" style=\"display:inline-block; margin-left:6px; margin-right:6px;\">\r\n {{ extractFieldName(row, columnProp) | currency:'':'' }}</span>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'localDateTime'\">\r\n {{ extractFieldName(row, columnProp) | date : extractFormat(getColumn(columnProp)) }}\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'bigdecimal'\">\r\n <small><sup class=\"mainTable__td__currency\">{{row[getColumn(columnProp)?.currency]}}</sup></small>\r\n {{ extractFieldName(row, columnProp) | number : (getColumn(columnProp)?.digitInfo || '1.3-5') }}\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'listAction'\">\r\n <app-button-actions\r\n [row]=\"row\"\r\n [buttonsAction]=\"getColumn(columnProp)?.viewType === 'buttonsAction'\"\r\n [listAction]=\"listAction\"\r\n [actions]=\"listAction\"\r\n (clickedButton)=\"actionListClicked($event,row)\">\r\n </app-button-actions>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchDefault>\r\n <ng-container *ngIf=\"getColumn(columnProp)?.translate; else noTranslate\">\r\n <span\r\n [attr.tabindex]=\"-1\"\r\n (click)=\"$event.stopPropagation(); emitRoutePage(row)\">\r\n {{ pageInfo.labelsSection + \".\" + extractFieldName(row, columnProp) | translate }}\r\n </span>\r\n </ng-container>\r\n <ng-template #noTranslate>\r\n <span\r\n [attr.tabindex]=\"-1\"\r\n (click)=\"$event.stopPropagation(); emitRoutePage(row)\"\r\n [innerText]='extractFieldName(row, columnProp)'></span>\r\n </ng-template>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Mobile Card View -->\r\n <div class=\"mobile-cards-container\">\r\n <div *ngFor=\"let row of dataSource.data; let rowIndex = index\"\r\n class=\"mobile-card\"\r\n [attr.id]=\"'mobile-card-' + (row?.id || row?.key || '')\"\r\n [ngClass]=\"{\r\n 'mobile-card--highlight': selectedRowIndex == row.id || (pageInfo.groupByProperty && pageInfo.groupByValue?.includes(row[pageInfo.groupByProperty])),\r\n 'mobile-card--dark-highlight': isDarkHighlight(row)\r\n }\"\r\n (auxclick)=\"openNewTab(row)\"\r\n (click)=\"$event.stopPropagation(); onSelectItem(row)\">\r\n\r\n <!-- Mobile Card Header: ID/Name and Status -->\r\n <div class=\"mobile-card__header\">\r\n <div class=\"mobile-card__header-id\">\r\n <span class=\"mobile-card__id-text\">{{ extractFieldName(row, getMobileCardIdColumn()?.property || 'id') }}</span>\r\n </div>\r\n <div class=\"mobile-card__header-status\" *ngIf=\"getMobileCardStatusColumn()\">\r\n <button mat-button class=\"stateType {{ row[getMobileCardStatusColumn()?.property]}}\"\r\n [attr.id]=\"'mobile-btn-state-'+getMobileCardStatusColumn()?.property\">\r\n {{ labelKeyByValue(getMobileCardStatusColumn(), row) | translate}}\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <!-- Divider -->\r\n <div class=\"mobile-card__divider\"></div>\r\n\r\n <!-- Mobile Card Body: Other columns -->\r\n <div class=\"mobile-card__body\">\r\n <div *ngFor=\"let column of getMobileCardColumns()\" class=\"mobile-card__row\">\r\n <div class=\"mobile-card__row-label\">\r\n <span>{{ labelKey(column) | translate }} :</span>\r\n </div>\r\n <div class=\"mobile-card__row-value\">\r\n <ng-container [ngSwitch]=\"column.type\">\r\n <ng-container *ngSwitchCase=\"'stateType'\">\r\n <button mat-button class=\"stateType {{ row[column.property]}}\"\r\n [attr.id]=\"'mobile-btn-state-'+column.property\">\r\n {{ labelKeyByValue(column, row) | translate}}\r\n </button>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'date'\">\r\n {{ extractFieldName(row, column.property) | date:'dd/MM/yyyy' }}\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'netAmount'\">\r\n <span class=\"mobile-card__amount-currency\">{{ row[column.currency] }}</span>\r\n <span class=\"mobile-card__amount-value\">{{ extractFieldName(row, column.property) | currency:'':'' }}</span>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'localDateTime'\">\r\n {{ extractFieldName(row, column.property) | date : extractFormat(column) }}\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'bigdecimal'\">\r\n <small><sup class=\"mainTable__td__currency\">{{row[column.currency]}}</sup></small>\r\n {{ extractFieldName(row, column.property) | number : (column.digitInfo || '1.3-5') }}\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchDefault>\r\n <ng-container *ngIf=\"column.translate; else noTranslate\">\r\n <span>{{ pageInfo.labelsSection + \".\" + extractFieldName(row, column.property) | translate }}</span>\r\n </ng-container>\r\n <ng-template #noTranslate>\r\n <span [innerText]='extractFieldName(row, column.property)'></span>\r\n </ng-template>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Mobile Card Actions -->\r\n <div class=\"mobile-card__actions\" *ngIf=\"listAction && listAction.length > 0\">\r\n <app-button-actions\r\n [row]=\"row\"\r\n [buttonsAction]=\"true\"\r\n [listAction]=\"listAction\"\r\n [actions]=\"listAction\"\r\n (clickedButton)=\"actionListClicked($event,row)\">\r\n </app-button-actions>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"noDataFound\" class=\"dataNotFound flex-column\">\r\n <img *ngIf=\"getDisplaySvgPath()\" [src]=\"getDisplaySvgPath()\" class=\"dataNotFound__icon\" alt=\"No data found\" />\r\n <span class=\"dataNotFound__title\">{{ getDisplayTitle() | translate}}</span>\r\n <span class=\"dataNotFound__subtitle\">{{ getDisplaySubtitle() | translate}}</span>\r\n </div>\r\n\r\n\r\n <div *ngIf=\"(dataSource.data?.length > 0 || customizedData) && !pageInfo.hidePagination\" class=\"main-pagination flex-row\">\r\n <ng-container *ngIf=\"enablePagination\">\r\n <div class=\"flex-column flex-100\">\r\n <app-paginator\r\n [currentPage]=\"pageIndex\"\r\n [totalItems]=\"totalElements\"\r\n [pageSize]=\"pageSize\"\r\n [pageSizeOptions]=\"[5, 10, 25, 50]\"\r\n [mobileLoadMoreIncrement]=\"mobileLoadMoreIncrement\"\r\n [displayedItems]=\"mobileDisplayedItems || dataSource.data.length\"\r\n (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"\r\n (loadMore)=\"onLoadMore($event)\">\r\n </app-paginator>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [":host{display:block;width:100%;max-width:100%;box-sizing:border-box}.baseTable{width:100%!important;max-width:100%!important;box-sizing:border-box}.flex-row{display:flex;flex-direction:row}.flex-column{display:flex;flex-direction:column;width:100%;max-width:100%;box-sizing:border-box}.flex-100{flex:1 1 100%}.flex-49{flex:0 0 49%}.flex-50{flex:0 0 50%}.align-start{justify-content:flex-start;align-items:flex-start}.align-center{justify-content:center;align-items:center}.align-end{justify-content:flex-end;align-items:flex-end}.gap-0{gap:0}.gap-5{gap:5px}.gap-10{gap:10px}.dataNotFound{display:flex;flex-direction:column;justify-content:center;align-items:center;height:auto;min-height:280px;text-align:center;margin-top:0;padding:40px 0}.dataNotFound__icon{height:auto;width:auto;max-width:200px;max-height:200px;margin-bottom:8px;object-fit:contain}.dataNotFound__title{color:#6a6a6a;font-size:20px;font-weight:700;margin-bottom:4px}.dataNotFound__subtitle{color:#6a6a6a;font-size:20px;font-weight:400}@media (max-width: 960px){.flex-column-sm{flex-direction:column}.align-center-sm{justify-content:center;align-items:flex-start}}.filter-row{display:flex!important;flex-direction:row!important;align-items:center!important;width:100%!important;max-width:100%!important;gap:16px!important;box-sizing:border-box;margin-top:20px;margin-bottom:16px;padding:0;flex-wrap:nowrap!important;min-width:0!important;min-height:48px!important;overflow:visible!important}.filter-row app-filter-builder{flex:1 1 auto!important;min-width:0!important;max-width:none!important;width:auto!important;flex-shrink:1!important;display:flex!important;align-items:center!important;overflow:visible!important}.button-group{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-end;gap:8px!important;flex-shrink:0!important;flex-grow:0!important;flex-basis:auto!important;height:46px!important;white-space:nowrap!important;z-index:1!important}.mainTable{margin-top:0!important}.btn-apply-filter{background:#fff!important;border:1px solid #3e627b!important;border-radius:8px!important;height:46px!important;min-width:120px!important;padding:0 16px!important;box-shadow:none!important}.btn-apply-filter .button-text{display:flex;align-items:center;justify-content:center;gap:4px;width:100%}.btn-apply-filter mat-icon{font-size:24px;width:24px;height:30px;color:#0d4261}.btn-apply-filter span{font-family:Lusail,sans-serif;font-weight:500;font-size:16px;line-height:1.2;color:#0d4261;white-space:nowrap}.btn-apply-filter:hover{background:#fafafa!important}.btn-export{background:#fff!important;border:1px solid #0d4261!important;border-radius:8px!important;height:46px!important;min-width:109px!important;padding:0 16px!important;box-shadow:none!important;margin-bottom:7px!important}.btn-export .button-text{display:flex;align-items:center;justify-content:center;gap:4px;width:100%}.btn-export mat-icon{font-size:24px;width:24px;height:30px;color:#0d4261}.btn-export .arrow-icon{font-size:16px;width:16px;height:16px;margin-left:0}.btn-export span{font-family:Lusail,sans-serif;font-weight:500;font-size:16px;line-height:1.2;color:#0d4261;white-space:nowrap}.btn-export:hover{background:#fafafa!important}.arrow-icon{font-size:16px;width:16px;height:16px}@media (max-width: 1024px){.button-group{width:auto}}@media (max-width: 768px){.filter-row{flex-direction:column;align-items:stretch}.button-group{display:none!important}.btn-export{width:100%}}.table-container{width:100%;overflow:hidden;background:#f7f7f7;box-sizing:border-box;display:flex;flex-direction:column}.table-header{display:flex;align-items:center;background:#f7f7f7;border:1px solid #f0eeee;max-height:48px;height:48px;margin-bottom:16px;border-radius:8px;overflow:hidden;width:100%;box-sizing:border-box;min-width:0}.table-header-cell{display:flex;align-items:center;max-height:48px;height:48px;padding:8px 16px;flex:1;min-width:100px;position:sticky;top:0;background:none;z-index:10;box-sizing:border-box}.table-header-cell.has-width{flex:0 0 auto!important;min-width:0!important;max-width:none!important}.table-header-cell:last-child{border-right:none}.table-header-cell.first-cell{border-top-left-radius:8px;border-bottom-left-radius:8px}.table-header-cell.last-cell{border-top-right-radius:8px;border-bottom-right-radius:8px}.table-header-cell.actions-cell{justify-content:center;text-align:center}.table-header-cell.actions-cell .table-header-content{justify-content:center}.table-header-cell.sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.table-header-cell.sortable:hover{background:#fafafa}.table-header-content{display:flex;align-items:center;gap:8px;width:100%}.table-header-label{font-family:Lusail,sans-serif;font-weight:500;font-size:16px;line-height:1.2;color:#0d4261;white-space:nowrap}.sort-icon{font-size:18px;width:18px;height:18px;color:#5c5c5c;display:flex;align-items:center;justify-content:center;transition:color .2s}.sort-icon.sort-asc,.sort-icon.sort-desc{color:#0d4261}.table-body{display:flex;flex-direction:column;gap:8px;background:#f7f7f7}.table-row{display:flex;align-items:center;min-height:48px;background:#fff;border-bottom:1px solid #f0eeee;transition:background-color .2s;border-radius:8px;overflow:hidden;width:100%;box-sizing:border-box;min-width:0}.table-row:hover{background:#fafafa}.table-row--highlight{background:#f0f8ff}.table-row--dark-highlight{background:#e8f4f8}.table-row .table-cell.first-cell{border-top-left-radius:8px;border-bottom-left-radius:8px}.table-row .table-cell.last-cell{border-top-right-radius:8px;border-bottom-right-radius:8px}.table-cell{display:flex;align-items:center;min-height:48px;max-height:none;padding:8px 16px;flex:1;min-width:100px;font-family:Lusail,sans-serif;font-weight:400;font-size:16px;line-height:1.2;color:#000;box-sizing:border-box}.table-cell.has-width{flex:0 0 auto!important;min-width:0!important;max-width:none!important}.table-cell:last-child{border-right:none}.table-cell.actions-cell{justify-content:center;text-align:center}.mobile-cards-container{display:none;flex-direction:column;gap:12px;width:100%;box-sizing:border-box}.mobile-card{background:#fff;border:1px solid #f0eeee;border-radius:8px;padding:12px 20px;display:flex;flex-direction:column;gap:4px;cursor:pointer;transition:background-color .2s;box-sizing:border-box;width:100%}.mobile-card:hover{background:#fafafa}.mobile-card--highlight{background:#f0f8ff}.mobile-card--dark-highlight{background:#e8f4f8}.mobile-card__header{display:flex;align-items:center;justify-content:space-between;height:48px;width:100%;box-sizing:border-box}.mobile-card__header-id{display:flex;flex-direction:column;justify-content:center;flex:1}.mobile-card__id-text{font-family:Lusail,sans-serif;font-weight:700;font-size:14px;line-height:1.2;color:#222;text-align:left;white-space:nowrap}.mobile-card__header-status{display:flex;align-items:center;justify-content:flex-end;flex-shrink:0}.mobile-card__divider{height:.347px;width:100%;background:#f0eeee;margin:0;flex-shrink:0}.mobile-card__body{display:flex;flex-direction:column;gap:0;width:100%;box-sizing:border-box}.mobile-card__row{display:flex;align-items:center;justify-content:space-between;height:40px;width:100%;overflow:hidden;box-sizing:border-box}.mobile-card__row-label{display:flex;flex-direction:column;justify-content:center;flex-shrink:0}.mobile-card__row-label span{font-family:Lusail,sans-serif;font-weight:400;font-size:14px;line-height:1.2;color:#222;white-space:nowrap}.mobile-card__row-value{display:flex;flex-direction:column;justify-content:center;flex-shrink:0;text-align:right}.mobile-card__row-value span{font-family:Lusail,sans-serif;font-weight:400;font-size:14px;line-height:1.2;color:#222;white-space:nowrap}.mobile-card__amount-currency{font-family:Lusail,sans-serif;font-weight:400;font-size:14px;line-height:1.2;color:#222;display:inline-block}.mobile-card__amount-value{font-family:Lusail,sans-serif;font-weight:700;font-size:14px;line-height:1.2;color:#222;display:inline-block;margin-left:6px;margin-right:6px}.mobile-card__actions{border-top:1px solid #f0eeee;padding-top:8px;margin-top:4px;display:flex;align-items:center;justify-content:center;min-height:48px;max-height:48px;width:100%;box-sizing:border-box}@media (max-width: 768px){.table-container{display:none}.mobile-cards-container{display:flex}}@media (min-width: 769px){.mobile-cards-container{display:none}.table-container{display:flex}}:host ::ng-deep button.mat-mdc-button.stateType,:host ::ng-deep button.mdc-button.stateType{white-space:normal!important;height:auto!important;min-height:28px!important;max-width:100%!important;align-items:center!important;justify-content:center!important;cursor:default!important}:host ::ng-deep button.mat-mdc-button.stateType .mdc-button__label,:host ::ng-deep button.mdc-button.stateType .mdc-button__label{white-space:normal!important;display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:2!important;line-clamp:2!important;overflow:hidden!important;word-break:break-word!important;line-height:1.25!important;max-width:100%!important;text-align:center!important}@media (max-width: 450px){.mobile-card__header{flex-direction:column;justify-content:flex-start;height:auto;width:100%;box-sizing:border-box;gap:8px}}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6$1.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i6$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "ngmodule", type: NgxPaginationModule }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ButtonActionsComponent, selector: "app-button-actions", inputs: ["actions", "disabled", "buttonsAction", "listAction", "row"], outputs: ["clickedButton"] }, { kind: "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: [] }); }
|
|
3756
3748
|
}
|
|
3757
3749
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BaseTableComponent, decorators: [{
|
|
3758
3750
|
type: Component,
|
|
@@ -3782,7 +3774,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
3782
3774
|
MatMenuTrigger,
|
|
3783
3775
|
MatMenu,
|
|
3784
3776
|
MatMenuItem,
|
|
3785
|
-
], template: "<div class=\"flex-column baseTable\">\r\n <div class=\"flex-row flex-100\" >\r\n <div class=\"flex-column align-start flex-100\" style=\"width: 100%;\">\r\n <app-title-bar\r\n [pageTitle]=\"pageInfo.hideTitle ? '' : pageInfo.labelsSection+'.list_title'\"\r\n [subTitle]=\"(pageInfo.hideTitle || pageInfo.hideSubtitle) ? '' : pageInfo.labelsSection+'.subtitle'\"\r\n [titleMode]=\"''\"\r\n [pageInfo]=\"pageInfo\"\r\n [newAction]=\"showAddNew()\"\r\n [showExtractButton]=\"!pageInfo.hideExtractButton\"\r\n [draftSupported]=\"pageInfo.draftSupported\"\r\n [isPending]=\"isPending\"\r\n [onViewModeChange]=\"switchViewMode.bind(this)\"\r\n [buttons]=\"extraActions\"\r\n [buttonsDisplayMode]=\"buttonsDisplayMode\"\r\n (newActionClicked)=\"onAddNewAction($event)\"\r\n (extractReport)=\"extractReport($event)\"\r\n (viewModeChanged)=\"onViewModeChangedReceived($event)\"\r\n (buttonClicked)=\"buttonClicked.emit($event)\"\r\n [totalElements]=\"pageInfo.hideTitle ? undefined : totalElements\">\r\n </app-title-bar>\r\n </div>\r\n </div>\r\n\r\n <div class=\"filter-row\" *ngIf=\"!pageInfo.hideAdvancedFilter\">\r\n <app-filter-builder\r\n *ngIf=\"!pageInfo.hideAdvancedFilter\"\r\n [pageInfo]=\"pageInfo\"\r\n [columns]=\"columns\"\r\n [filterFields]=\"filterFields\"\r\n [pendingFilters]=\"pendingFilters\"\r\n [showExportButton]=\"!pageInfo.hideExtractButton\"\r\n (filterInformation)=\"storePendingFilters($event)\"\r\n (isEmpty)=\"handleFilterEmpty($event)\"\r\n (applyFilter)=\"applyPendingFilters()\"\r\n (sortByClicked)=\"handleSortClick($event)\"\r\n (exportClicked)=\"extractReport($event)\">\r\n </app-filter-builder>\r\n\r\n <div class=\"button-group\" *ngIf=\"!pageInfo.hideExtractButton\">\r\n <button *ngIf=\"!pageInfo.hideExtractButton\"\r\n mat-flat-button\r\n type=\"button\"\r\n [matMenuTriggerFor]=\"exportMenu\"\r\n class=\"btn-export\"\r\n [attr.aria-label]=\"'export' | translate\"\r\n [attr.aria-haspopup]=\"true\"\r\n >\r\n <div class=\"button-text\">\r\n <mat-icon>file_export</mat-icon>\r\n <span>{{ 'export' | translate }}</span>\r\n <mat-icon class=\"arrow-icon\">keyboard_arrow_down</mat-icon>\r\n </div>\r\n </button>\r\n\r\n <mat-menu #exportMenu=\"matMenu\">\r\n <button mat-menu-item (click)=\"extractReport('pdf')\">PDF</button>\r\n <button mat-menu-item (click)=\"extractReport('xlsx')\">Excel</button>\r\n <button mat-menu-item (click)=\"extractReport('csv')\">CSV</button>\r\n </mat-menu>\r\n\r\n </div>\r\n </div>\r\n\r\n\r\n <div class=\"flex-row flex-100 baseTable__detailsColumn\">\r\n <div class=\"flex-100\">\r\n <div class=\"flex-row flex-100 mainTable\">\r\n <div\r\n class=\"table-container\"\r\n role=\"table\"\r\n [attr.aria-label]=\"\r\n pageInfo.labelsSection && !pageInfo.hideTitle\r\n ? (pageInfo.labelsSection + '.list_title' | translate)\r\n : null\r\n \">\r\n <div class=\"table-header\" [attr.data-sort]=\"sortState\" role=\"row\">\r\n <div *ngFor=\"let columnProp of visibleColumnsArray; let i = index\"\r\n class=\"table-header-cell\"\r\n role=\"columnheader\"\r\n [attr.aria-sort]=\"getColumnAriaSort(columnProp)\"\r\n [attr.tabindex]=\"getColumn(columnProp)?.enableSorting ? 0 : null\"\r\n [class.sortable]=\"getColumn(columnProp)?.enableSorting\"\r\n [class.first-cell]=\"i === 0\"\r\n [class.last-cell]=\"i === visibleColumnsArray.length - 1\"\r\n [class.actions-cell]=\"i === visibleColumnsArray.length - 1 && columnProp === 'actions'\"\r\n [class.has-width]=\"getColumn(columnProp)?.width\"\r\n [ngStyle]=\"getColumn(columnProp)?.width ? {'width': getColumn(columnProp)?.width + '%', 'flex-basis': getColumn(columnProp)?.width + '%'} : {}\"\r\n (click)=\"getColumn(columnProp)?.enableSorting && handleSortClick(columnProp)\"\r\n (keydown)=\"onSortHeaderKeydown($event, columnProp)\">\r\n <div class=\"table-header-content\">\r\n <span class=\"table-header-label\">{{ labelKey(getColumn(columnProp)) | translate }}</span>\r\n <ng-container *ngIf=\"getColumn(columnProp)?.enableSorting\">\r\n <mat-icon *ngIf=\"getSortDirection(columnProp) === 'asc'\"\r\n class=\"sort-icon sort-asc\">arrow_drop_up</mat-icon>\r\n <mat-icon *ngIf=\"getSortDirection(columnProp) === 'desc'\"\r\n class=\"sort-icon sort-desc\">arrow_drop_down</mat-icon>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"table-body\" role=\"rowgroup\">\r\n <div *ngFor=\"let row of dataSource.data; let rowIndex = index\"\r\n class=\"table-row\"\r\n role=\"row\"\r\n [attr.id]=\"'table-row-' + (row?.id || row?.key || '')\"\r\n [ngClass]=\"{\r\n 'table-row--highlight': selectedRowIndex == row.id || (pageInfo.groupByProperty && pageInfo.groupByValue?.includes(row[pageInfo.groupByProperty])),\r\n 'table-row--dark-highlight': isDarkHighlight(row)\r\n }\"\r\n (auxclick)=\"openNewTab(row)\"\r\n (click)=\"$event.stopPropagation(); onSelectItem(row)\">\r\n <div *ngFor=\"let columnProp of visibleColumnsArray; let i = index\"\r\n class=\"table-cell\"\r\n role=\"cell\"\r\n [class.first-cell]=\"i === 0\"\r\n [class.last-cell]=\"i === visibleColumnsArray.length - 1\"\r\n [class.actions-cell]=\"i === visibleColumnsArray.length - 1 && columnProp === 'actions'\"\r\n [class.has-width]=\"getColumn(columnProp)?.width\"\r\n [ngStyle]=\"getColumn(columnProp)?.width ? {'width': getColumn(columnProp)?.width + '%', 'flex-basis': getColumn(columnProp)?.width + '%'} : {}\">\r\n <ng-container [ngSwitch]=\"getColumn(columnProp)?.type\">\r\n <ng-container *ngSwitchCase=\"'workflowStatus'\">\r\n <button mat-button class=\"wfStatus {{ getStatusDescription(row)}}\" [attr.id]=\"'table-btn-wf-'+columnProp+'-'+(row.id || row.key || '')\">{{ getStatusDescription(row) }}</button>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'hyper-text'\">\r\n <span\r\n *ngIf=\"shouldRenderAsHyperLink(row); else plainHyperText\"\r\n role=\"link\"\r\n tabindex=\"0\"\r\n class=\"mat-mdc-form-field-label hyper-link\"\r\n (click)=\"hyperLinkClicked(columnProp, row)\"\r\n (keydown.enter)=\"hyperLinkClicked(columnProp, row)\"\r\n (keydown.space)=\"$event.preventDefault(); hyperLinkClicked(columnProp, row)\">\r\n {{ extractFieldName(row, columnProp) }}\r\n </span>\r\n <ng-template #plainHyperText>\r\n <span class=\"mat-mdc-form-field-label\">{{ extractFieldName(row, columnProp) }}</span>\r\n </ng-template>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'button'\">\r\n <button *ngIf=\"shouldShowButton(row)\" mat-button class=\"primary\" (click)=\"$event.stopPropagation(); actionButtonClicked(columnProp, row)\" [attr.id]=\"'table-btn-action-'+columnProp\">\r\n {{ labelKey(getColumn(columnProp)) + '_title' | translate }}\r\n </button>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'icon'\">\r\n <mat-icon [ngClass]=\"{\r\n 'mainTable__td__icon-green': row[columnProp] === 'pass',\r\n 'mainTable__td__icon-orange': row[columnProp] === 'warning',\r\n 'mainTable__td__icon-red': row[columnProp] === 'error'\r\n }\"\r\n [attr.aria-label]=\"getIconAriaLabelKey(row[columnProp]) | translate\">\r\n {{ getIcon(row[columnProp]) }}\r\n </mat-icon>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'checkbox'\">\r\n <mat-checkbox class=\"primary\" [checked]=\"row[columnProp]\" (click)=\"$event.stopPropagation();actionCheckedClicked(columnProp,row)\"></mat-checkbox>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'stateType'\">\r\n <button mat-button class=\"stateType {{ row[columnProp]}}\" [attr.id]=\"'table-btn-state-'+columnProp\">{{ labelKeyByValue(getColumn(columnProp), row) | translate}}</button>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'date'\">\r\n {{ extractFieldName(row, columnProp) | date:'dd/MM/yyyy' }}\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'croppedText'\">\r\n {{ getCroppedText(row[columnProp], row[getColumn(columnProp)?.width]) }}\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'download'\">\r\n <mat-icon class=\"mainTable__td__icon-blue\"\r\n [attr.aria-label]=\"'BASE_TABLE.downloadAction' | translate\">system_update_alt</mat-icon>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'onOff'\">\r\n <mat-icon *ngIf=\"row[columnProp] === null\" class=\"mainTable__td__icon-darkorange\"\r\n [attr.aria-label]=\"getOnOffFlagAriaLabelKey(null) | translate\">flag</mat-icon>\r\n <mat-icon *ngIf=\"row[columnProp] === false\" class=\"mainTable__td__icon-red\"\r\n [attr.aria-label]=\"getOnOffFlagAriaLabelKey(false) | translate\">flag</mat-icon>\r\n <mat-icon *ngIf=\"row[columnProp] === true\" class=\"mainTable__td__icon-green\"\r\n [attr.aria-label]=\"getOnOffFlagAriaLabelKey(true) | translate\">flag</mat-icon>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'status'\">\r\n <span *ngIf=\"row[columnProp] === null || row[columnProp] === false\">\r\n {{ pageInfo.labelsSection + '.' + getColumn(columnProp)?.label + 'InActive' | translate }}\r\n </span>\r\n <span *ngIf=\"row[columnProp] === true\">\r\n {{ pageInfo.labelsSection + '.' + getColumn(columnProp)?.label + 'Active' | translate }}\r\n </span>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'info'\">\r\n <button\r\n mat-icon-button\r\n type=\"button\"\r\n [attr.aria-label]=\"'BASE_TABLE.rowDetails' | translate\"\r\n (click)=\"$event.stopPropagation();emitEvent(row)\"\r\n [attr.id]=\"'table-btn-info-'+row.id\">\r\n <mat-icon aria-hidden=\"true\">info</mat-icon>\r\n </button>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'netAmount'\">\r\n <div class=\"mainTable__td__currency\" style=\"display:inline-block;\">{{ row[getColumn(columnProp)?.currency] }}</div>\r\n <span class=\"mainTable__td__property\" style=\"display:inline-block; margin-left:6px; margin-right:6px;\">\r\n {{ extractFieldName(row, columnProp) | currency:'':'' }}</span>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'localDateTime'\">\r\n {{ extractFieldName(row, columnProp) | date : extractFormat(getColumn(columnProp)) }}\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'bigdecimal'\">\r\n <small><sup class=\"mainTable__td__currency\">{{row[getColumn(columnProp)?.currency]}}</sup></small>\r\n {{ extractFieldName(row, columnProp) | number : (getColumn(columnProp)?.digitInfo || '1.3-5') }}\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'listAction'\">\r\n <app-button-actions\r\n [row]=\"row\"\r\n [buttonsAction]=\"getColumn(columnProp)?.viewType === 'buttonsAction'\"\r\n [listAction]=\"listAction\"\r\n [actions]=\"listAction\"\r\n (clickedButton)=\"actionListClicked($event,row)\">\r\n </app-button-actions>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchDefault>\r\n <ng-container *ngIf=\"getColumn(columnProp)?.translate; else noTranslate\">\r\n <span\r\n role=\"link\"\r\n tabindex=\"0\"\r\n (click)=\"$event.stopPropagation(); emitRoutePage(row)\"\r\n (keydown)=\"onDefaultCellLinkKeydown($event, row)\">\r\n {{ pageInfo.labelsSection + \".\" + extractFieldName(row, columnProp) | translate }}\r\n </span>\r\n </ng-container>\r\n <ng-template #noTranslate>\r\n <span\r\n role=\"link\"\r\n tabindex=\"0\"\r\n (click)=\"$event.stopPropagation(); emitRoutePage(row)\"\r\n (keydown)=\"onDefaultCellLinkKeydown($event, row)\"\r\n [innerText]='extractFieldName(row, columnProp)'></span>\r\n </ng-template>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Mobile Card View -->\r\n <div class=\"mobile-cards-container\">\r\n <div *ngFor=\"let row of dataSource.data; let rowIndex = index\"\r\n class=\"mobile-card\"\r\n [attr.id]=\"'mobile-card-' + (row?.id || row?.key || '')\"\r\n [ngClass]=\"{\r\n 'mobile-card--highlight': selectedRowIndex == row.id || (pageInfo.groupByProperty && pageInfo.groupByValue?.includes(row[pageInfo.groupByProperty])),\r\n 'mobile-card--dark-highlight': isDarkHighlight(row)\r\n }\"\r\n (auxclick)=\"openNewTab(row)\"\r\n (click)=\"$event.stopPropagation(); onSelectItem(row)\">\r\n\r\n <!-- Mobile Card Header: ID/Name and Status -->\r\n <div class=\"mobile-card__header\">\r\n <div class=\"mobile-card__header-id\">\r\n <span class=\"mobile-card__id-text\">{{ extractFieldName(row, getMobileCardIdColumn()?.property || 'id') }}</span>\r\n </div>\r\n <div class=\"mobile-card__header-status\" *ngIf=\"getMobileCardStatusColumn()\">\r\n <button mat-button class=\"stateType {{ row[getMobileCardStatusColumn()?.property]}}\"\r\n [attr.id]=\"'mobile-btn-state-'+getMobileCardStatusColumn()?.property\">\r\n {{ labelKeyByValue(getMobileCardStatusColumn(), row) | translate}}\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <!-- Divider -->\r\n <div class=\"mobile-card__divider\"></div>\r\n\r\n <!-- Mobile Card Body: Other columns -->\r\n <div class=\"mobile-card__body\">\r\n <div *ngFor=\"let column of getMobileCardColumns()\" class=\"mobile-card__row\">\r\n <div class=\"mobile-card__row-label\">\r\n <span>{{ labelKey(column) | translate }} :</span>\r\n </div>\r\n <div class=\"mobile-card__row-value\">\r\n <ng-container [ngSwitch]=\"column.type\">\r\n <ng-container *ngSwitchCase=\"'stateType'\">\r\n <button mat-button class=\"stateType {{ row[column.property]}}\"\r\n [attr.id]=\"'mobile-btn-state-'+column.property\">\r\n {{ labelKeyByValue(column, row) | translate}}\r\n </button>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'date'\">\r\n {{ extractFieldName(row, column.property) | date:'dd/MM/yyyy' }}\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'netAmount'\">\r\n <span class=\"mobile-card__amount-currency\">{{ row[column.currency] }}</span>\r\n <span class=\"mobile-card__amount-value\">{{ extractFieldName(row, column.property) | currency:'':'' }}</span>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'localDateTime'\">\r\n {{ extractFieldName(row, column.property) | date : extractFormat(column) }}\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'bigdecimal'\">\r\n <small><sup class=\"mainTable__td__currency\">{{row[column.currency]}}</sup></small>\r\n {{ extractFieldName(row, column.property) | number : (column.digitInfo || '1.3-5') }}\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchDefault>\r\n <ng-container *ngIf=\"column.translate; else noTranslate\">\r\n <span>{{ pageInfo.labelsSection + \".\" + extractFieldName(row, column.property) | translate }}</span>\r\n </ng-container>\r\n <ng-template #noTranslate>\r\n <span [innerText]='extractFieldName(row, column.property)'></span>\r\n </ng-template>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Mobile Card Actions -->\r\n <div class=\"mobile-card__actions\" *ngIf=\"listAction && listAction.length > 0\">\r\n <app-button-actions\r\n [row]=\"row\"\r\n [buttonsAction]=\"true\"\r\n [listAction]=\"listAction\"\r\n [actions]=\"listAction\"\r\n (clickedButton)=\"actionListClicked($event,row)\">\r\n </app-button-actions>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"noDataFound\" class=\"dataNotFound flex-column\">\r\n <img *ngIf=\"getDisplaySvgPath()\" [src]=\"getDisplaySvgPath()\" class=\"dataNotFound__icon\" alt=\"No data found\" />\r\n <span class=\"dataNotFound__title\">{{ getDisplayTitle() | translate}}</span>\r\n <span class=\"dataNotFound__subtitle\">{{ getDisplaySubtitle() | translate}}</span>\r\n </div>\r\n\r\n\r\n <div *ngIf=\"(dataSource.data?.length > 0 || customizedData) && !pageInfo.hidePagination\" class=\"main-pagination flex-row\">\r\n <ng-container *ngIf=\"enablePagination\">\r\n <div class=\"flex-column flex-100\">\r\n <app-paginator\r\n [currentPage]=\"pageIndex\"\r\n [totalItems]=\"totalElements\"\r\n [pageSize]=\"pageSize\"\r\n [pageSizeOptions]=\"[5, 10, 25, 50]\"\r\n [mobileLoadMoreIncrement]=\"mobileLoadMoreIncrement\"\r\n [displayedItems]=\"mobileDisplayedItems || dataSource.data.length\"\r\n (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"\r\n (loadMore)=\"onLoadMore($event)\">\r\n </app-paginator>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [":host{display:block;width:100%;max-width:100%;box-sizing:border-box}.baseTable{width:100%!important;max-width:100%!important;box-sizing:border-box}.flex-row{display:flex;flex-direction:row}.flex-column{display:flex;flex-direction:column;width:100%;max-width:100%;box-sizing:border-box}.flex-100{flex:1 1 100%}.flex-49{flex:0 0 49%}.flex-50{flex:0 0 50%}.align-start{justify-content:flex-start;align-items:flex-start}.align-center{justify-content:center;align-items:center}.align-end{justify-content:flex-end;align-items:flex-end}.gap-0{gap:0}.gap-5{gap:5px}.gap-10{gap:10px}.dataNotFound{display:flex;flex-direction:column;justify-content:center;align-items:center;height:auto;min-height:280px;text-align:center;margin-top:0;padding:40px 0}.dataNotFound__icon{height:auto;width:auto;max-width:200px;max-height:200px;margin-bottom:8px;object-fit:contain}.dataNotFound__title{color:#6a6a6a;font-size:20px;font-weight:700;margin-bottom:4px}.dataNotFound__subtitle{color:#6a6a6a;font-size:20px;font-weight:400}@media (max-width: 960px){.flex-column-sm{flex-direction:column}.align-center-sm{justify-content:center;align-items:flex-start}}.filter-row{display:flex!important;flex-direction:row!important;align-items:center!important;width:100%!important;max-width:100%!important;gap:16px!important;box-sizing:border-box;margin-top:20px;margin-bottom:16px;padding:0;flex-wrap:nowrap!important;min-width:0!important;min-height:48px!important;overflow:visible!important}.filter-row app-filter-builder{flex:1 1 auto!important;min-width:0!important;max-width:none!important;width:auto!important;flex-shrink:1!important;display:flex!important;align-items:center!important;overflow:visible!important}.button-group{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-end;gap:8px!important;flex-shrink:0!important;flex-grow:0!important;flex-basis:auto!important;height:46px!important;white-space:nowrap!important;z-index:1!important}.mainTable{margin-top:0!important}.btn-apply-filter{background:#fff!important;border:1px solid #3e627b!important;border-radius:8px!important;height:46px!important;min-width:120px!important;padding:0 16px!important;box-shadow:none!important}.btn-apply-filter .button-text{display:flex;align-items:center;justify-content:center;gap:4px;width:100%}.btn-apply-filter mat-icon{font-size:24px;width:24px;height:30px;color:#0d4261}.btn-apply-filter span{font-family:Lusail,sans-serif;font-weight:500;font-size:16px;line-height:1.2;color:#0d4261;white-space:nowrap}.btn-apply-filter:hover{background:#fafafa!important}.btn-export{background:#fff!important;border:1px solid #0d4261!important;border-radius:8px!important;height:46px!important;min-width:109px!important;padding:0 16px!important;box-shadow:none!important;margin-bottom:7px!important}.btn-export .button-text{display:flex;align-items:center;justify-content:center;gap:4px;width:100%}.btn-export mat-icon{font-size:24px;width:24px;height:30px;color:#0d4261}.btn-export .arrow-icon{font-size:16px;width:16px;height:16px;margin-left:0}.btn-export span{font-family:Lusail,sans-serif;font-weight:500;font-size:16px;line-height:1.2;color:#0d4261;white-space:nowrap}.btn-export:hover{background:#fafafa!important}.arrow-icon{font-size:16px;width:16px;height:16px}@media (max-width: 1024px){.button-group{width:auto}}@media (max-width: 768px){.filter-row{flex-direction:column;align-items:stretch}.button-group{display:none!important}.btn-export{width:100%}}.table-container{width:100%;overflow:hidden;background:#f7f7f7;box-sizing:border-box;display:flex;flex-direction:column}.table-header{display:flex;align-items:center;background:#f7f7f7;border:1px solid #f0eeee;max-height:48px;height:48px;margin-bottom:16px;border-radius:8px;overflow:hidden;width:100%;box-sizing:border-box;min-width:0}.table-header-cell{display:flex;align-items:center;max-height:48px;height:48px;padding:8px 16px;flex:1;min-width:100px;position:sticky;top:0;background:none;z-index:10;box-sizing:border-box}.table-header-cell.has-width{flex:0 0 auto!important;min-width:0!important;max-width:none!important}.table-header-cell:last-child{border-right:none}.table-header-cell.first-cell{border-top-left-radius:8px;border-bottom-left-radius:8px}.table-header-cell.last-cell{border-top-right-radius:8px;border-bottom-right-radius:8px}.table-header-cell.actions-cell{justify-content:center;text-align:center}.table-header-cell.actions-cell .table-header-content{justify-content:center}.table-header-cell.sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.table-header-cell.sortable:hover{background:#fafafa}.table-header-content{display:flex;align-items:center;gap:8px;width:100%}.table-header-label{font-family:Lusail,sans-serif;font-weight:500;font-size:16px;line-height:1.2;color:#0d4261;white-space:nowrap}.sort-icon{font-size:18px;width:18px;height:18px;color:#5c5c5c;display:flex;align-items:center;justify-content:center;transition:color .2s}.sort-icon.sort-asc,.sort-icon.sort-desc{color:#0d4261}.table-body{display:flex;flex-direction:column;gap:8px;background:#f7f7f7}.table-row{display:flex;align-items:center;min-height:48px;background:#fff;border-bottom:1px solid #f0eeee;transition:background-color .2s;border-radius:8px;overflow:hidden;width:100%;box-sizing:border-box;min-width:0}.table-row:hover{background:#fafafa}.table-row--highlight{background:#f0f8ff}.table-row--dark-highlight{background:#e8f4f8}.table-row .table-cell.first-cell{border-top-left-radius:8px;border-bottom-left-radius:8px}.table-row .table-cell.last-cell{border-top-right-radius:8px;border-bottom-right-radius:8px}.table-cell{display:flex;align-items:center;min-height:48px;max-height:none;padding:8px 16px;flex:1;min-width:100px;font-family:Lusail,sans-serif;font-weight:400;font-size:16px;line-height:1.2;color:#000;box-sizing:border-box}.table-cell.has-width{flex:0 0 auto!important;min-width:0!important;max-width:none!important}.table-cell:last-child{border-right:none}.table-cell.actions-cell{justify-content:center;text-align:center}.mobile-cards-container{display:none;flex-direction:column;gap:12px;width:100%;box-sizing:border-box}.mobile-card{background:#fff;border:1px solid #f0eeee;border-radius:8px;padding:12px 20px;display:flex;flex-direction:column;gap:4px;cursor:pointer;transition:background-color .2s;box-sizing:border-box;width:100%}.mobile-card:hover{background:#fafafa}.mobile-card--highlight{background:#f0f8ff}.mobile-card--dark-highlight{background:#e8f4f8}.mobile-card__header{display:flex;align-items:center;justify-content:space-between;height:48px;width:100%;box-sizing:border-box}.mobile-card__header-id{display:flex;flex-direction:column;justify-content:center;flex:1}.mobile-card__id-text{font-family:Lusail,sans-serif;font-weight:700;font-size:14px;line-height:1.2;color:#222;text-align:left;white-space:nowrap}.mobile-card__header-status{display:flex;align-items:center;justify-content:flex-end;flex-shrink:0}.mobile-card__divider{height:.347px;width:100%;background:#f0eeee;margin:0;flex-shrink:0}.mobile-card__body{display:flex;flex-direction:column;gap:0;width:100%;box-sizing:border-box}.mobile-card__row{display:flex;align-items:center;justify-content:space-between;height:40px;width:100%;overflow:hidden;box-sizing:border-box}.mobile-card__row-label{display:flex;flex-direction:column;justify-content:center;flex-shrink:0}.mobile-card__row-label span{font-family:Lusail,sans-serif;font-weight:400;font-size:14px;line-height:1.2;color:#222;white-space:nowrap}.mobile-card__row-value{display:flex;flex-direction:column;justify-content:center;flex-shrink:0;text-align:right}.mobile-card__row-value span{font-family:Lusail,sans-serif;font-weight:400;font-size:14px;line-height:1.2;color:#222;white-space:nowrap}.mobile-card__amount-currency{font-family:Lusail,sans-serif;font-weight:400;font-size:14px;line-height:1.2;color:#222;display:inline-block}.mobile-card__amount-value{font-family:Lusail,sans-serif;font-weight:700;font-size:14px;line-height:1.2;color:#222;display:inline-block;margin-left:6px;margin-right:6px}.mobile-card__actions{border-top:1px solid #f0eeee;padding-top:8px;margin-top:4px;display:flex;align-items:center;justify-content:center;min-height:48px;max-height:48px;width:100%;box-sizing:border-box}@media (max-width: 768px){.table-container{display:none}.mobile-cards-container{display:flex}}@media (min-width: 769px){.mobile-cards-container{display:none}.table-container{display:flex}}:host ::ng-deep button.mat-mdc-button.stateType,:host ::ng-deep button.mdc-button.stateType{white-space:normal!important;height:auto!important;min-height:28px!important;max-width:100%!important;align-items:center!important;justify-content:center!important;cursor:default!important}:host ::ng-deep button.mat-mdc-button.stateType .mdc-button__label,:host ::ng-deep button.mdc-button.stateType .mdc-button__label{white-space:normal!important;display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:2!important;line-clamp:2!important;overflow:hidden!important;word-break:break-word!important;line-height:1.25!important;max-width:100%!important;text-align:center!important}\n"] }]
|
|
3777
|
+
], template: "<div class=\"flex-column baseTable\">\r\n <div class=\"flex-row flex-100\" >\r\n <div class=\"flex-column align-start flex-100\" style=\"width: 100%;\">\r\n <app-title-bar\r\n [pageTitle]=\"pageInfo.hideTitle ? '' : pageInfo.labelsSection+'.list_title'\"\r\n [subTitle]=\"(pageInfo.hideTitle || pageInfo.hideSubtitle) ? '' : pageInfo.labelsSection+'.subtitle'\"\r\n [titleMode]=\"''\"\r\n [pageInfo]=\"pageInfo\"\r\n [newAction]=\"showAddNew()\"\r\n [showExtractButton]=\"!pageInfo.hideExtractButton\"\r\n [draftSupported]=\"pageInfo.draftSupported\"\r\n [isPending]=\"isPending\"\r\n [onViewModeChange]=\"switchViewMode.bind(this)\"\r\n [buttons]=\"extraActions\"\r\n [buttonsDisplayMode]=\"buttonsDisplayMode\"\r\n (newActionClicked)=\"onAddNewAction($event)\"\r\n (extractReport)=\"extractReport($event)\"\r\n (viewModeChanged)=\"onViewModeChangedReceived($event)\"\r\n (buttonClicked)=\"buttonClicked.emit($event)\"\r\n [totalElements]=\"pageInfo.hideTitle ? undefined : totalElements\">\r\n </app-title-bar>\r\n </div>\r\n </div>\r\n\r\n <div class=\"filter-row\" *ngIf=\"!pageInfo.hideAdvancedFilter\">\r\n <app-filter-builder\r\n *ngIf=\"!pageInfo.hideAdvancedFilter\"\r\n [pageInfo]=\"pageInfo\"\r\n [columns]=\"columns\"\r\n [filterFields]=\"filterFields\"\r\n [pendingFilters]=\"pendingFilters\"\r\n [showExportButton]=\"!pageInfo.hideExtractButton\"\r\n (filterInformation)=\"storePendingFilters($event)\"\r\n (isEmpty)=\"handleFilterEmpty($event)\"\r\n (applyFilter)=\"applyPendingFilters()\"\r\n (sortByClicked)=\"handleSortClick($event)\"\r\n (exportClicked)=\"extractReport($event)\">\r\n </app-filter-builder>\r\n\r\n <div class=\"button-group\" *ngIf=\"!pageInfo.hideExtractButton\">\r\n <button *ngIf=\"!pageInfo.hideExtractButton\"\r\n mat-flat-button\r\n type=\"button\"\r\n [matMenuTriggerFor]=\"exportMenu\"\r\n class=\"btn-export\"\r\n [attr.aria-label]=\"'export' | translate\"\r\n [attr.aria-haspopup]=\"true\"\r\n >\r\n <div class=\"button-text\">\r\n <mat-icon>file_export</mat-icon>\r\n <span>{{ 'export' | translate }}</span>\r\n <mat-icon class=\"arrow-icon\">keyboard_arrow_down</mat-icon>\r\n </div>\r\n </button>\r\n\r\n <mat-menu #exportMenu=\"matMenu\">\r\n <button mat-menu-item (click)=\"extractReport('pdf')\">PDF</button>\r\n <button mat-menu-item (click)=\"extractReport('xlsx')\">Excel</button>\r\n <button mat-menu-item (click)=\"extractReport('csv')\">CSV</button>\r\n </mat-menu>\r\n\r\n </div>\r\n </div>\r\n\r\n\r\n <div class=\"flex-row flex-100 baseTable__detailsColumn\">\r\n <div class=\"flex-100\">\r\n <div class=\"flex-row flex-100 mainTable\">\r\n <div\r\n class=\"table-container\"\r\n role=\"table\"\r\n [attr.aria-label]=\"\r\n pageInfo.labelsSection && !pageInfo.hideTitle\r\n ? (pageInfo.labelsSection + '.list_title' | translate)\r\n : null\r\n \">\r\n <div class=\"table-header\" [attr.data-sort]=\"sortState\" role=\"row\">\r\n <div *ngFor=\"let columnProp of visibleColumnsArray; let i = index\"\r\n class=\"table-header-cell\"\r\n role=\"columnheader\"\r\n [attr.aria-sort]=\"getColumnAriaSort(columnProp)\"\r\n [attr.tabindex]=\"getColumn(columnProp)?.enableSorting ? 0 : null\"\r\n [class.sortable]=\"getColumn(columnProp)?.enableSorting\"\r\n [class.first-cell]=\"i === 0\"\r\n [class.last-cell]=\"i === visibleColumnsArray.length - 1\"\r\n [class.actions-cell]=\"i === visibleColumnsArray.length - 1 && columnProp === 'actions'\"\r\n [class.has-width]=\"getColumn(columnProp)?.width\"\r\n [ngStyle]=\"getColumn(columnProp)?.width ? {'width': getColumn(columnProp)?.width + '%', 'flex-basis': getColumn(columnProp)?.width + '%'} : {}\"\r\n (click)=\"getColumn(columnProp)?.enableSorting && handleSortClick(columnProp)\"\r\n (keydown)=\"onSortHeaderKeydown($event, columnProp)\">\r\n <div class=\"table-header-content\">\r\n <span class=\"table-header-label\">{{ labelKey(getColumn(columnProp)) | translate }}</span>\r\n <ng-container *ngIf=\"getColumn(columnProp)?.enableSorting\">\r\n <mat-icon *ngIf=\"getSortDirection(columnProp) === 'asc'\"\r\n class=\"sort-icon sort-asc\">arrow_drop_up</mat-icon>\r\n <mat-icon *ngIf=\"getSortDirection(columnProp) === 'desc'\"\r\n class=\"sort-icon sort-desc\">arrow_drop_down</mat-icon>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"table-body\" role=\"rowgroup\">\r\n <div *ngFor=\"let row of dataSource.data; let rowIndex = index\"\r\n class=\"table-row\"\r\n role=\"row\"\r\n [attr.tabindex]=\"-1\"\r\n [attr.id]=\"'table-row-' + (row?.id || row?.key || '')\"\r\n [ngClass]=\"{\r\n 'table-row--highlight': selectedRowIndex == row.id || (pageInfo.groupByProperty && pageInfo.groupByValue?.includes(row[pageInfo.groupByProperty])),\r\n 'table-row--dark-highlight': isDarkHighlight(row)\r\n }\"\r\n (auxclick)=\"openNewTab(row)\"\r\n (click)=\"$event.stopPropagation(); onSelectItem(row)\">\r\n <div *ngFor=\"let columnProp of visibleColumnsArray; let i = index\"\r\n class=\"table-cell\"\r\n role=\"cell\"\r\n [class.first-cell]=\"i === 0\"\r\n [class.last-cell]=\"i === visibleColumnsArray.length - 1\"\r\n [class.actions-cell]=\"i === visibleColumnsArray.length - 1 && columnProp === 'actions'\"\r\n [class.has-width]=\"getColumn(columnProp)?.width\"\r\n [ngStyle]=\"getColumn(columnProp)?.width ? {'width': getColumn(columnProp)?.width + '%', 'flex-basis': getColumn(columnProp)?.width + '%'} : {}\">\r\n <ng-container [ngSwitch]=\"getColumn(columnProp)?.type\">\r\n <ng-container *ngSwitchCase=\"'workflowStatus'\">\r\n <button mat-button type=\"button\" class=\"wfStatus {{ getStatusDescription(row)}}\" [attr.id]=\"'table-btn-wf-'+columnProp+'-'+(row.id || row.key || '')\" [attr.tabindex]=\"-1\">{{ getStatusDescription(row) }}</button>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'hyper-text'\">\r\n <span\r\n *ngIf=\"shouldRenderAsHyperLink(row); else plainHyperText\"\r\n class=\"mat-mdc-form-field-label hyper-link\"\r\n [attr.tabindex]=\"-1\"\r\n (click)=\"hyperLinkClicked(columnProp, row)\">\r\n {{ extractFieldName(row, columnProp) }}\r\n </span>\r\n <ng-template #plainHyperText>\r\n <span class=\"mat-mdc-form-field-label\">{{ extractFieldName(row, columnProp) }}</span>\r\n </ng-template>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'button'\">\r\n <button *ngIf=\"shouldShowButton(row)\" mat-button type=\"button\" class=\"primary\" (click)=\"$event.stopPropagation(); actionButtonClicked(columnProp, row)\" [attr.id]=\"'table-btn-action-'+columnProp\">\r\n {{ labelKey(getColumn(columnProp)) + '_title' | translate }}\r\n </button>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'icon'\">\r\n <mat-icon [ngClass]=\"{\r\n 'mainTable__td__icon-green': row[columnProp] === 'pass',\r\n 'mainTable__td__icon-orange': row[columnProp] === 'warning',\r\n 'mainTable__td__icon-red': row[columnProp] === 'error'\r\n }\"\r\n [attr.aria-label]=\"getIconAriaLabelKey(row[columnProp]) | translate\">\r\n {{ getIcon(row[columnProp]) }}\r\n </mat-icon>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'checkbox'\">\r\n <mat-checkbox class=\"primary\" [tabIndex]=\"-1\" [checked]=\"row[columnProp]\" (click)=\"$event.stopPropagation();actionCheckedClicked(columnProp,row)\"></mat-checkbox>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'stateType'\">\r\n <button mat-button type=\"button\" class=\"stateType {{ row[columnProp]}}\" [attr.id]=\"'table-btn-state-'+columnProp\" [attr.tabindex]=\"-1\">{{ labelKeyByValue(getColumn(columnProp), row) | translate}}</button>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'date'\">\r\n {{ extractFieldName(row, columnProp) | date:'dd/MM/yyyy' }}\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'croppedText'\">\r\n {{ getCroppedText(row[columnProp], row[getColumn(columnProp)?.width]) }}\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'download'\">\r\n <mat-icon class=\"mainTable__td__icon-blue\"\r\n [attr.aria-label]=\"'BASE_TABLE.downloadAction' | translate\">system_update_alt</mat-icon>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'onOff'\">\r\n <mat-icon *ngIf=\"row[columnProp] === null\" class=\"mainTable__td__icon-darkorange\"\r\n [attr.aria-label]=\"getOnOffFlagAriaLabelKey(null) | translate\">flag</mat-icon>\r\n <mat-icon *ngIf=\"row[columnProp] === false\" class=\"mainTable__td__icon-red\"\r\n [attr.aria-label]=\"getOnOffFlagAriaLabelKey(false) | translate\">flag</mat-icon>\r\n <mat-icon *ngIf=\"row[columnProp] === true\" class=\"mainTable__td__icon-green\"\r\n [attr.aria-label]=\"getOnOffFlagAriaLabelKey(true) | translate\">flag</mat-icon>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'status'\">\r\n <span *ngIf=\"row[columnProp] === null || row[columnProp] === false\">\r\n {{ pageInfo.labelsSection + '.' + getColumn(columnProp)?.label + 'InActive' | translate }}\r\n </span>\r\n <span *ngIf=\"row[columnProp] === true\">\r\n {{ pageInfo.labelsSection + '.' + getColumn(columnProp)?.label + 'Active' | translate }}\r\n </span>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'info'\">\r\n <button\r\n mat-icon-button\r\n type=\"button\"\r\n [attr.tabindex]=\"-1\"\r\n [attr.aria-label]=\"'BASE_TABLE.rowDetails' | translate\"\r\n (click)=\"$event.stopPropagation();emitEvent(row)\"\r\n [attr.id]=\"'table-btn-info-'+row.id\">\r\n <mat-icon aria-hidden=\"true\">info</mat-icon>\r\n </button>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'netAmount'\">\r\n <div class=\"mainTable__td__currency\" style=\"display:inline-block;\">{{ row[getColumn(columnProp)?.currency] }}</div>\r\n <span class=\"mainTable__td__property\" style=\"display:inline-block; margin-left:6px; margin-right:6px;\">\r\n {{ extractFieldName(row, columnProp) | currency:'':'' }}</span>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'localDateTime'\">\r\n {{ extractFieldName(row, columnProp) | date : extractFormat(getColumn(columnProp)) }}\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'bigdecimal'\">\r\n <small><sup class=\"mainTable__td__currency\">{{row[getColumn(columnProp)?.currency]}}</sup></small>\r\n {{ extractFieldName(row, columnProp) | number : (getColumn(columnProp)?.digitInfo || '1.3-5') }}\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'listAction'\">\r\n <app-button-actions\r\n [row]=\"row\"\r\n [buttonsAction]=\"getColumn(columnProp)?.viewType === 'buttonsAction'\"\r\n [listAction]=\"listAction\"\r\n [actions]=\"listAction\"\r\n (clickedButton)=\"actionListClicked($event,row)\">\r\n </app-button-actions>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchDefault>\r\n <ng-container *ngIf=\"getColumn(columnProp)?.translate; else noTranslate\">\r\n <span\r\n [attr.tabindex]=\"-1\"\r\n (click)=\"$event.stopPropagation(); emitRoutePage(row)\">\r\n {{ pageInfo.labelsSection + \".\" + extractFieldName(row, columnProp) | translate }}\r\n </span>\r\n </ng-container>\r\n <ng-template #noTranslate>\r\n <span\r\n [attr.tabindex]=\"-1\"\r\n (click)=\"$event.stopPropagation(); emitRoutePage(row)\"\r\n [innerText]='extractFieldName(row, columnProp)'></span>\r\n </ng-template>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Mobile Card View -->\r\n <div class=\"mobile-cards-container\">\r\n <div *ngFor=\"let row of dataSource.data; let rowIndex = index\"\r\n class=\"mobile-card\"\r\n [attr.id]=\"'mobile-card-' + (row?.id || row?.key || '')\"\r\n [ngClass]=\"{\r\n 'mobile-card--highlight': selectedRowIndex == row.id || (pageInfo.groupByProperty && pageInfo.groupByValue?.includes(row[pageInfo.groupByProperty])),\r\n 'mobile-card--dark-highlight': isDarkHighlight(row)\r\n }\"\r\n (auxclick)=\"openNewTab(row)\"\r\n (click)=\"$event.stopPropagation(); onSelectItem(row)\">\r\n\r\n <!-- Mobile Card Header: ID/Name and Status -->\r\n <div class=\"mobile-card__header\">\r\n <div class=\"mobile-card__header-id\">\r\n <span class=\"mobile-card__id-text\">{{ extractFieldName(row, getMobileCardIdColumn()?.property || 'id') }}</span>\r\n </div>\r\n <div class=\"mobile-card__header-status\" *ngIf=\"getMobileCardStatusColumn()\">\r\n <button mat-button class=\"stateType {{ row[getMobileCardStatusColumn()?.property]}}\"\r\n [attr.id]=\"'mobile-btn-state-'+getMobileCardStatusColumn()?.property\">\r\n {{ labelKeyByValue(getMobileCardStatusColumn(), row) | translate}}\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <!-- Divider -->\r\n <div class=\"mobile-card__divider\"></div>\r\n\r\n <!-- Mobile Card Body: Other columns -->\r\n <div class=\"mobile-card__body\">\r\n <div *ngFor=\"let column of getMobileCardColumns()\" class=\"mobile-card__row\">\r\n <div class=\"mobile-card__row-label\">\r\n <span>{{ labelKey(column) | translate }} :</span>\r\n </div>\r\n <div class=\"mobile-card__row-value\">\r\n <ng-container [ngSwitch]=\"column.type\">\r\n <ng-container *ngSwitchCase=\"'stateType'\">\r\n <button mat-button class=\"stateType {{ row[column.property]}}\"\r\n [attr.id]=\"'mobile-btn-state-'+column.property\">\r\n {{ labelKeyByValue(column, row) | translate}}\r\n </button>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'date'\">\r\n {{ extractFieldName(row, column.property) | date:'dd/MM/yyyy' }}\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'netAmount'\">\r\n <span class=\"mobile-card__amount-currency\">{{ row[column.currency] }}</span>\r\n <span class=\"mobile-card__amount-value\">{{ extractFieldName(row, column.property) | currency:'':'' }}</span>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'localDateTime'\">\r\n {{ extractFieldName(row, column.property) | date : extractFormat(column) }}\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'bigdecimal'\">\r\n <small><sup class=\"mainTable__td__currency\">{{row[column.currency]}}</sup></small>\r\n {{ extractFieldName(row, column.property) | number : (column.digitInfo || '1.3-5') }}\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchDefault>\r\n <ng-container *ngIf=\"column.translate; else noTranslate\">\r\n <span>{{ pageInfo.labelsSection + \".\" + extractFieldName(row, column.property) | translate }}</span>\r\n </ng-container>\r\n <ng-template #noTranslate>\r\n <span [innerText]='extractFieldName(row, column.property)'></span>\r\n </ng-template>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Mobile Card Actions -->\r\n <div class=\"mobile-card__actions\" *ngIf=\"listAction && listAction.length > 0\">\r\n <app-button-actions\r\n [row]=\"row\"\r\n [buttonsAction]=\"true\"\r\n [listAction]=\"listAction\"\r\n [actions]=\"listAction\"\r\n (clickedButton)=\"actionListClicked($event,row)\">\r\n </app-button-actions>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"noDataFound\" class=\"dataNotFound flex-column\">\r\n <img *ngIf=\"getDisplaySvgPath()\" [src]=\"getDisplaySvgPath()\" class=\"dataNotFound__icon\" alt=\"No data found\" />\r\n <span class=\"dataNotFound__title\">{{ getDisplayTitle() | translate}}</span>\r\n <span class=\"dataNotFound__subtitle\">{{ getDisplaySubtitle() | translate}}</span>\r\n </div>\r\n\r\n\r\n <div *ngIf=\"(dataSource.data?.length > 0 || customizedData) && !pageInfo.hidePagination\" class=\"main-pagination flex-row\">\r\n <ng-container *ngIf=\"enablePagination\">\r\n <div class=\"flex-column flex-100\">\r\n <app-paginator\r\n [currentPage]=\"pageIndex\"\r\n [totalItems]=\"totalElements\"\r\n [pageSize]=\"pageSize\"\r\n [pageSizeOptions]=\"[5, 10, 25, 50]\"\r\n [mobileLoadMoreIncrement]=\"mobileLoadMoreIncrement\"\r\n [displayedItems]=\"mobileDisplayedItems || dataSource.data.length\"\r\n (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"\r\n (loadMore)=\"onLoadMore($event)\">\r\n </app-paginator>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [":host{display:block;width:100%;max-width:100%;box-sizing:border-box}.baseTable{width:100%!important;max-width:100%!important;box-sizing:border-box}.flex-row{display:flex;flex-direction:row}.flex-column{display:flex;flex-direction:column;width:100%;max-width:100%;box-sizing:border-box}.flex-100{flex:1 1 100%}.flex-49{flex:0 0 49%}.flex-50{flex:0 0 50%}.align-start{justify-content:flex-start;align-items:flex-start}.align-center{justify-content:center;align-items:center}.align-end{justify-content:flex-end;align-items:flex-end}.gap-0{gap:0}.gap-5{gap:5px}.gap-10{gap:10px}.dataNotFound{display:flex;flex-direction:column;justify-content:center;align-items:center;height:auto;min-height:280px;text-align:center;margin-top:0;padding:40px 0}.dataNotFound__icon{height:auto;width:auto;max-width:200px;max-height:200px;margin-bottom:8px;object-fit:contain}.dataNotFound__title{color:#6a6a6a;font-size:20px;font-weight:700;margin-bottom:4px}.dataNotFound__subtitle{color:#6a6a6a;font-size:20px;font-weight:400}@media (max-width: 960px){.flex-column-sm{flex-direction:column}.align-center-sm{justify-content:center;align-items:flex-start}}.filter-row{display:flex!important;flex-direction:row!important;align-items:center!important;width:100%!important;max-width:100%!important;gap:16px!important;box-sizing:border-box;margin-top:20px;margin-bottom:16px;padding:0;flex-wrap:nowrap!important;min-width:0!important;min-height:48px!important;overflow:visible!important}.filter-row app-filter-builder{flex:1 1 auto!important;min-width:0!important;max-width:none!important;width:auto!important;flex-shrink:1!important;display:flex!important;align-items:center!important;overflow:visible!important}.button-group{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-end;gap:8px!important;flex-shrink:0!important;flex-grow:0!important;flex-basis:auto!important;height:46px!important;white-space:nowrap!important;z-index:1!important}.mainTable{margin-top:0!important}.btn-apply-filter{background:#fff!important;border:1px solid #3e627b!important;border-radius:8px!important;height:46px!important;min-width:120px!important;padding:0 16px!important;box-shadow:none!important}.btn-apply-filter .button-text{display:flex;align-items:center;justify-content:center;gap:4px;width:100%}.btn-apply-filter mat-icon{font-size:24px;width:24px;height:30px;color:#0d4261}.btn-apply-filter span{font-family:Lusail,sans-serif;font-weight:500;font-size:16px;line-height:1.2;color:#0d4261;white-space:nowrap}.btn-apply-filter:hover{background:#fafafa!important}.btn-export{background:#fff!important;border:1px solid #0d4261!important;border-radius:8px!important;height:46px!important;min-width:109px!important;padding:0 16px!important;box-shadow:none!important;margin-bottom:7px!important}.btn-export .button-text{display:flex;align-items:center;justify-content:center;gap:4px;width:100%}.btn-export mat-icon{font-size:24px;width:24px;height:30px;color:#0d4261}.btn-export .arrow-icon{font-size:16px;width:16px;height:16px;margin-left:0}.btn-export span{font-family:Lusail,sans-serif;font-weight:500;font-size:16px;line-height:1.2;color:#0d4261;white-space:nowrap}.btn-export:hover{background:#fafafa!important}.arrow-icon{font-size:16px;width:16px;height:16px}@media (max-width: 1024px){.button-group{width:auto}}@media (max-width: 768px){.filter-row{flex-direction:column;align-items:stretch}.button-group{display:none!important}.btn-export{width:100%}}.table-container{width:100%;overflow:hidden;background:#f7f7f7;box-sizing:border-box;display:flex;flex-direction:column}.table-header{display:flex;align-items:center;background:#f7f7f7;border:1px solid #f0eeee;max-height:48px;height:48px;margin-bottom:16px;border-radius:8px;overflow:hidden;width:100%;box-sizing:border-box;min-width:0}.table-header-cell{display:flex;align-items:center;max-height:48px;height:48px;padding:8px 16px;flex:1;min-width:100px;position:sticky;top:0;background:none;z-index:10;box-sizing:border-box}.table-header-cell.has-width{flex:0 0 auto!important;min-width:0!important;max-width:none!important}.table-header-cell:last-child{border-right:none}.table-header-cell.first-cell{border-top-left-radius:8px;border-bottom-left-radius:8px}.table-header-cell.last-cell{border-top-right-radius:8px;border-bottom-right-radius:8px}.table-header-cell.actions-cell{justify-content:center;text-align:center}.table-header-cell.actions-cell .table-header-content{justify-content:center}.table-header-cell.sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.table-header-cell.sortable:hover{background:#fafafa}.table-header-content{display:flex;align-items:center;gap:8px;width:100%}.table-header-label{font-family:Lusail,sans-serif;font-weight:500;font-size:16px;line-height:1.2;color:#0d4261;white-space:nowrap}.sort-icon{font-size:18px;width:18px;height:18px;color:#5c5c5c;display:flex;align-items:center;justify-content:center;transition:color .2s}.sort-icon.sort-asc,.sort-icon.sort-desc{color:#0d4261}.table-body{display:flex;flex-direction:column;gap:8px;background:#f7f7f7}.table-row{display:flex;align-items:center;min-height:48px;background:#fff;border-bottom:1px solid #f0eeee;transition:background-color .2s;border-radius:8px;overflow:hidden;width:100%;box-sizing:border-box;min-width:0}.table-row:hover{background:#fafafa}.table-row--highlight{background:#f0f8ff}.table-row--dark-highlight{background:#e8f4f8}.table-row .table-cell.first-cell{border-top-left-radius:8px;border-bottom-left-radius:8px}.table-row .table-cell.last-cell{border-top-right-radius:8px;border-bottom-right-radius:8px}.table-cell{display:flex;align-items:center;min-height:48px;max-height:none;padding:8px 16px;flex:1;min-width:100px;font-family:Lusail,sans-serif;font-weight:400;font-size:16px;line-height:1.2;color:#000;box-sizing:border-box}.table-cell.has-width{flex:0 0 auto!important;min-width:0!important;max-width:none!important}.table-cell:last-child{border-right:none}.table-cell.actions-cell{justify-content:center;text-align:center}.mobile-cards-container{display:none;flex-direction:column;gap:12px;width:100%;box-sizing:border-box}.mobile-card{background:#fff;border:1px solid #f0eeee;border-radius:8px;padding:12px 20px;display:flex;flex-direction:column;gap:4px;cursor:pointer;transition:background-color .2s;box-sizing:border-box;width:100%}.mobile-card:hover{background:#fafafa}.mobile-card--highlight{background:#f0f8ff}.mobile-card--dark-highlight{background:#e8f4f8}.mobile-card__header{display:flex;align-items:center;justify-content:space-between;height:48px;width:100%;box-sizing:border-box}.mobile-card__header-id{display:flex;flex-direction:column;justify-content:center;flex:1}.mobile-card__id-text{font-family:Lusail,sans-serif;font-weight:700;font-size:14px;line-height:1.2;color:#222;text-align:left;white-space:nowrap}.mobile-card__header-status{display:flex;align-items:center;justify-content:flex-end;flex-shrink:0}.mobile-card__divider{height:.347px;width:100%;background:#f0eeee;margin:0;flex-shrink:0}.mobile-card__body{display:flex;flex-direction:column;gap:0;width:100%;box-sizing:border-box}.mobile-card__row{display:flex;align-items:center;justify-content:space-between;height:40px;width:100%;overflow:hidden;box-sizing:border-box}.mobile-card__row-label{display:flex;flex-direction:column;justify-content:center;flex-shrink:0}.mobile-card__row-label span{font-family:Lusail,sans-serif;font-weight:400;font-size:14px;line-height:1.2;color:#222;white-space:nowrap}.mobile-card__row-value{display:flex;flex-direction:column;justify-content:center;flex-shrink:0;text-align:right}.mobile-card__row-value span{font-family:Lusail,sans-serif;font-weight:400;font-size:14px;line-height:1.2;color:#222;white-space:nowrap}.mobile-card__amount-currency{font-family:Lusail,sans-serif;font-weight:400;font-size:14px;line-height:1.2;color:#222;display:inline-block}.mobile-card__amount-value{font-family:Lusail,sans-serif;font-weight:700;font-size:14px;line-height:1.2;color:#222;display:inline-block;margin-left:6px;margin-right:6px}.mobile-card__actions{border-top:1px solid #f0eeee;padding-top:8px;margin-top:4px;display:flex;align-items:center;justify-content:center;min-height:48px;max-height:48px;width:100%;box-sizing:border-box}@media (max-width: 768px){.table-container{display:none}.mobile-cards-container{display:flex}}@media (min-width: 769px){.mobile-cards-container{display:none}.table-container{display:flex}}:host ::ng-deep button.mat-mdc-button.stateType,:host ::ng-deep button.mdc-button.stateType{white-space:normal!important;height:auto!important;min-height:28px!important;max-width:100%!important;align-items:center!important;justify-content:center!important;cursor:default!important}:host ::ng-deep button.mat-mdc-button.stateType .mdc-button__label,:host ::ng-deep button.mdc-button.stateType .mdc-button__label{white-space:normal!important;display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:2!important;line-clamp:2!important;overflow:hidden!important;word-break:break-word!important;line-height:1.25!important;max-width:100%!important;text-align:center!important}@media (max-width: 450px){.mobile-card__header{flex-direction:column;justify-content:flex-start;height:auto;width:100%;box-sizing:border-box;gap:8px}}\n"] }]
|
|
3786
3778
|
}], ctorParameters: () => [{ type: BackendService }, { type: i2.TranslateService }, { type: ShareDataService }, { type: undefined, decorators: [{
|
|
3787
3779
|
type: Inject,
|
|
3788
3780
|
args: ['securityManager']
|
|
@@ -4833,6 +4825,7 @@ class SectionFormCanvasComponent {
|
|
|
4833
4825
|
this.hideToggle = true;
|
|
4834
4826
|
this.isExpanded = true;
|
|
4835
4827
|
this.alwaysOpen = true;
|
|
4828
|
+
this.expansionHeaderTabIndex = -1;
|
|
4836
4829
|
this.actionEdit = new EventEmitter();
|
|
4837
4830
|
this.formEdit = new EventEmitter();
|
|
4838
4831
|
this.buttons = [];
|
|
@@ -4844,6 +4837,11 @@ class SectionFormCanvasComponent {
|
|
|
4844
4837
|
toggleExpand() {
|
|
4845
4838
|
this.isExpanded = !this.isExpanded;
|
|
4846
4839
|
}
|
|
4840
|
+
onPanelHeaderChildKeydown(event) {
|
|
4841
|
+
if (event.key === 'Enter' || event.key === ' ') {
|
|
4842
|
+
event.stopPropagation();
|
|
4843
|
+
}
|
|
4844
|
+
}
|
|
4847
4845
|
onButtonClick(btn, sectionKey) {
|
|
4848
4846
|
this.buttonClicked.emit({ ...btn, sectionKey: sectionKey });
|
|
4849
4847
|
}
|
|
@@ -4854,7 +4852,7 @@ class SectionFormCanvasComponent {
|
|
|
4854
4852
|
return this.buttons.filter(btn => btn.id !== 'download');
|
|
4855
4853
|
}
|
|
4856
4854
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SectionFormCanvasComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4857
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SectionFormCanvasComponent, isStandalone: true, selector: "lib-section-form-canvas", inputs: { pageInfo: "pageInfo", fields: "fields", itemId: "itemId", editable: "editable", hideBackButton: "hideBackButton", item: "item", title: "title", subtitle: "subtitle", isTranslateTitle: "isTranslateTitle", isTranslateSubtitle: "isTranslateSubtitle", key: "key", hideToggle: "hideToggle", isExpanded: "isExpanded", alwaysOpen: "alwaysOpen", buttons: "buttons", itemStatus: "itemStatus" }, outputs: { actionEdit: "actionEdit", formEdit: "formEdit", buttonClicked: "buttonClicked" }, ngImport: i0, template: "<mat-expansion-panel class=\"location-card\"\r\n #panel=\"matExpansionPanel\"\r\n [expanded]=\"isExpanded\"\r\n [hideToggle]=\"hideToggle\"\r\n (opened)=\"alwaysOpen ? panel.open() : null\"\r\n (closed)=\"alwaysOpen ? panel.open() : null\">\r\n <mat-expansion-panel-header class=\"card-header\" (click)=\"toggleExpand()\">\r\n <mat-panel-title>\r\n <div class=\"title-container\">\r\n <h3 class=\"card-title\" *ngIf=\"isTranslateTitle\">\r\n {{ pageInfo.labelsSection + '.' + title | translate }}\r\n </h3>\r\n <h3 class=\"card-title\" *ngIf=\"!isTranslateTitle\">{{ title }}</h3>\r\n <p class=\"card-subtitle\" *ngIf=\"subtitle\">\r\n <span *ngIf=\"isTranslateSubtitle\">{{ pageInfo.labelsSection + '.' + subtitle | translate }}</span>\r\n <span *ngIf=\"!isTranslateSubtitle\">{{ subtitle }}</span>\r\n </p>\r\n <button mat-button *ngIf=\"itemStatus\" class=\"stateType\" [ngClass]=\"itemStatus\">\r\n {{ pageInfo.labelsSection + '.' + itemStatus | translate }}\r\n </button>\r\n </div>\r\n </mat-panel-title>\r\n\r\n <mat-panel-description class=\"panel-description\" *ngIf=\"buttons && buttons.length > 0\">\r\n <div class=\"row flex-auto buttons-wrapper desktop-buttons\" [class.show-on-mobile]=\"!getDownloadButton()\">\r\n <button\r\n mat-flat-button\r\n *ngFor=\"let btn of buttons\"\r\n type=\"button\"\r\n [color]=\"btn.color || 'primary'\"\r\n (click)=\"onButtonClick(btn , key); $event.stopPropagation()\"\r\n class=\"btn-none-background-primary action\"\r\n [attr.id]=\"btn.id || ('section-btn-' + (btn.action || btn.label || btn.key))\"\r\n >\r\n <div class=\"button-text\">\r\n <mat-icon *ngIf=\"btn.icon\">{{ btn.icon }}</mat-icon>\r\n <span>{{ btn.label | translate }}</span>\r\n </div>\r\n </button>\r\n </div>\r\n \r\n <div class=\"mobile-buttons\" *ngIf=\"getDownloadButton()\">\r\n <button\r\n mat-flat-button\r\n type=\"button\"\r\n color=\"primary\"\r\n (click)=\"onButtonClick(getDownloadButton()!, key); $event.stopPropagation()\"\r\n class=\"btn-download-mobile\"\r\n [attr.id]=\"getDownloadButton()?.id\"\r\n [attr.aria-label]=\"'BASE_TABLE.downloadAction' | translate\"\r\n >\r\n <mat-icon aria-hidden=\"true\">{{ getDownloadButton()?.icon }}</mat-icon>\r\n </button>\r\n <button\r\n *ngIf=\"getMenuButtons().length > 0\"\r\n mat-stroked-button\r\n type=\"button\"\r\n [matMenuTriggerFor]=\"menu\"\r\n class=\"btn-menu-mobile\"\r\n >\r\n <mat-icon>more_vert</mat-icon>\r\n </button>\r\n <mat-menu #menu=\"matMenu\">\r\n <button\r\n mat-menu-item\r\n *ngFor=\"let btn of getMenuButtons()\"\r\n (click)=\"onButtonClick(btn, key); $event.stopPropagation()\"\r\n [attr.id]=\"btn.id\"\r\n >\r\n <mat-icon>{{ btn.icon }}</mat-icon>\r\n <span>{{ btn.label | translate }}</span>\r\n </button>\r\n </mat-menu>\r\n </div>\r\n </mat-panel-description>\r\n </mat-expansion-panel-header>\r\n <div class=\"panel-body\">\r\n <hr class=\"divider\"/>\r\n <ng-content></ng-content>\r\n <app-base-form-canvas\r\n [pageInfo]=\"pageInfo\"\r\n [fields]=\"fields\"\r\n [editable]=\"editable\"\r\n [item]=\"item\"\r\n (formUpdated)=\"formUpdated($event)\"\r\n ></app-base-form-canvas>\r\n </div>\r\n</mat-expansion-panel>\r\n", styles: [".location-card{border:1px solid #dcdcdc;border-radius:8px;background:#fff;margin:18px auto;overflow:hidden}.location-card .mat-expansion-panel-header{padding:0 15px}.location-card .mat-expansion-panel-header ::ng-deep .mat-content{margin:0!important}.location-card .panel-body{padding:20px 15px;padding-top:0!important}.location-card .panel-body ::ng-deep app-base-form-canvas .main-form-canvas{margin-top:20px!important}.location-card .panel-description{justify-content:end!important;margin:0!important}.location-card .card-header{display:flex;justify-content:space-between;align-items:center;padding:10px 16px!important;cursor:default}.location-card .card-header .title-container{display:flex;flex-direction:column;gap:8px;align-items:flex-start;justify-content:center}.location-card .card-header .card-title{margin:0;font-size:24px;font-weight:700;line-height:1.2;color:#000;width:fit-content;white-space:nowrap}.location-card .card-header .card-subtitle{margin:0;font-family:lusail-light,sans-serif;font-weight:300;font-size:16px;line-height:1.2;color:#888;width:fit-content}.location-card .card-header .btn-edit{width:120px;min-height:32px!important;border-radius:9999px!important;font-size:16px!important}.location-card .card-header .expand-icon{color:#339dff;font-size:16px}.location-card .divider{border:none;border-top:2px solid var(--primary-color-3nd);margin-bottom:20px;margin-top:0}.flex-auto{flex:1 1 auto;display:flex;flex-direction:column}.row{display:flex;flex-direction:row;width:100%}.gap-20{gap:20px}.buttons-wrapper{display:flex;text-align-last:end;margin:0!important;gap:16px;justify-content:flex-end}.buttons-wrapper .action{min-height:44px!important;min-width:135px!important;width:auto!important}.button-text span{font-size:18px}.button-text mat-icon{font-size:18px!important}.btn-none-background-primary{margin:0!important}@media (max-width: 768px){.desktop-buttons{display:none!important}.desktop-buttons.show-on-mobile{display:flex!important}.mobile-buttons{display:flex;gap:12px;align-items:center;justify-content:flex-end}.btn-download-mobile{width:45px!important;height:44px!important;min-width:45px!important;padding:0!important;border-radius:8px!important;background:#0d4261!important;display:flex;align-items:center;justify-content:center}.btn-download-mobile mat-icon{color:#fff!important;font-size:24px!important;width:24px!important;height:28px!important;margin:0!important}.btn-download-mobile .mdc-button__label{padding:0!important}.btn-menu-mobile{width:44px!important;height:44px!important;min-width:44px!important;padding:0!important;border-radius:8px!important;border:1px solid #3e627b!important;background:#fff!important;display:flex;align-items:center;justify-content:center}.btn-menu-mobile mat-icon{color:#0d4261!important;font-size:24px!important;width:25px!important;height:24px!important;margin:0!important;rotate:90deg}.btn-menu-mobile .mdc-button__label{padding:0!important}}@media (min-width: 769px){.mobile-buttons{display:none!important}}@media (max-width: 600px){::ng-deep .main-form-canvas{display:block!important}}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: BaseFormCanvasComponent, selector: "app-base-form-canvas", inputs: ["pageInfo", "currency", "fields", "errors", "workflowEditableFields", "isWorkflowEditableManaged", "supportingAttributes", "editable", "emitOnValueChanges", "filterResetNonce", "item", "equationSuggestedFields", "currentEquationValue"], outputs: ["attachmentEmitter", "actionEmitter", "formUpdated", "hyperTextEvent", "currentEquationValueChange"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "component", type: MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "directive", type: MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: MatExpansionPanelDescription, selector: "mat-panel-description" }, { kind: "component", type: MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }] }); }
|
|
4855
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SectionFormCanvasComponent, isStandalone: true, selector: "lib-section-form-canvas", inputs: { pageInfo: "pageInfo", fields: "fields", itemId: "itemId", editable: "editable", hideBackButton: "hideBackButton", item: "item", title: "title", subtitle: "subtitle", isTranslateTitle: "isTranslateTitle", isTranslateSubtitle: "isTranslateSubtitle", key: "key", hideToggle: "hideToggle", isExpanded: "isExpanded", alwaysOpen: "alwaysOpen", expansionHeaderTabIndex: "expansionHeaderTabIndex", buttons: "buttons", itemStatus: "itemStatus" }, outputs: { actionEdit: "actionEdit", formEdit: "formEdit", buttonClicked: "buttonClicked" }, ngImport: i0, template: "<mat-expansion-panel class=\"location-card\"\r\n #panel=\"matExpansionPanel\"\r\n [expanded]=\"isExpanded\"\r\n [hideToggle]=\"hideToggle\"\r\n (opened)=\"alwaysOpen ? panel.open() : null\"\r\n (closed)=\"alwaysOpen ? panel.open() : null\">\r\n <mat-expansion-panel-header\r\n class=\"card-header\"\r\n (click)=\"toggleExpand()\"\r\n [tabIndex]=\"expansionHeaderTabIndex\">\r\n <mat-panel-title>\r\n <div class=\"title-container\">\r\n <h3 class=\"card-title\" *ngIf=\"isTranslateTitle\">\r\n {{ pageInfo.labelsSection + '.' + title | translate }}\r\n </h3>\r\n <h3 class=\"card-title\" *ngIf=\"!isTranslateTitle\">{{ title }}</h3>\r\n <p class=\"card-subtitle\" *ngIf=\"subtitle\">\r\n <span *ngIf=\"isTranslateSubtitle\">{{ pageInfo.labelsSection + '.' + subtitle | translate }}</span>\r\n <span *ngIf=\"!isTranslateSubtitle\">{{ subtitle }}</span>\r\n </p>\r\n <button\r\n mat-button\r\n *ngIf=\"itemStatus\"\r\n type=\"button\"\r\n class=\"stateType\"\r\n [ngClass]=\"itemStatus\"\r\n (keydown)=\"onPanelHeaderChildKeydown($event)\">\r\n {{ pageInfo.labelsSection + '.' + itemStatus | translate }}\r\n </button>\r\n </div>\r\n </mat-panel-title>\r\n\r\n <mat-panel-description class=\"panel-description\" *ngIf=\"buttons && buttons.length > 0\">\r\n <div class=\"row flex-auto buttons-wrapper desktop-buttons\" [class.show-on-mobile]=\"!getDownloadButton()\">\r\n <button\r\n mat-flat-button\r\n *ngFor=\"let btn of buttons\"\r\n type=\"button\"\r\n [color]=\"btn.color || 'primary'\"\r\n (click)=\"onButtonClick(btn , key); $event.stopPropagation()\"\r\n (keydown)=\"onPanelHeaderChildKeydown($event)\"\r\n class=\"btn-none-background-primary action\"\r\n [attr.id]=\"btn.id || ('section-btn-' + (btn.action || btn.label || btn.key))\"\r\n >\r\n <div class=\"button-text\">\r\n <mat-icon *ngIf=\"btn.icon\">{{ btn.icon }}</mat-icon>\r\n <span>{{ btn.label | translate }}</span>\r\n </div>\r\n </button>\r\n </div>\r\n \r\n <div class=\"mobile-buttons\" *ngIf=\"getDownloadButton()\">\r\n <button\r\n mat-flat-button\r\n type=\"button\"\r\n color=\"primary\"\r\n (click)=\"onButtonClick(getDownloadButton()!, key); $event.stopPropagation()\"\r\n (keydown)=\"onPanelHeaderChildKeydown($event)\"\r\n class=\"btn-download-mobile\"\r\n [attr.id]=\"getDownloadButton()?.id\"\r\n [attr.aria-label]=\"'BASE_TABLE.downloadAction' | translate\"\r\n >\r\n <mat-icon aria-hidden=\"true\">{{ getDownloadButton()?.icon }}</mat-icon>\r\n </button>\r\n <button\r\n *ngIf=\"getMenuButtons().length > 0\"\r\n mat-stroked-button\r\n type=\"button\"\r\n [matMenuTriggerFor]=\"menu\"\r\n (keydown)=\"onPanelHeaderChildKeydown($event)\"\r\n class=\"btn-menu-mobile\"\r\n >\r\n <mat-icon>more_vert</mat-icon>\r\n </button>\r\n <mat-menu #menu=\"matMenu\">\r\n <button\r\n mat-menu-item\r\n *ngFor=\"let btn of getMenuButtons()\"\r\n (click)=\"onButtonClick(btn, key); $event.stopPropagation()\"\r\n [attr.id]=\"btn.id\"\r\n >\r\n <mat-icon>{{ btn.icon }}</mat-icon>\r\n <span>{{ btn.label | translate }}</span>\r\n </button>\r\n </mat-menu>\r\n </div>\r\n </mat-panel-description>\r\n </mat-expansion-panel-header>\r\n <div class=\"panel-body\">\r\n <hr class=\"divider\"/>\r\n <ng-content></ng-content>\r\n <app-base-form-canvas\r\n [pageInfo]=\"pageInfo\"\r\n [fields]=\"fields\"\r\n [editable]=\"editable\"\r\n [item]=\"item\"\r\n (formUpdated)=\"formUpdated($event)\"\r\n ></app-base-form-canvas>\r\n </div>\r\n</mat-expansion-panel>\r\n", styles: [".location-card{border:1px solid #dcdcdc;border-radius:8px;background:#fff;margin:18px auto;overflow:hidden}.location-card .mat-expansion-panel-header{padding:0 15px}.location-card .mat-expansion-panel-header ::ng-deep .mat-content{margin:0!important}@media (max-width: 450px){.location-card .mat-expansion-panel-header ::ng-deep .mat-content{flex-direction:column!important;align-items:stretch;gap:12px}.location-card .panel-description{justify-content:flex-start!important;width:100%}.location-card .buttons-wrapper{justify-content:flex-start;width:100%}}.location-card .panel-body{padding:20px 15px;padding-top:0!important}.location-card .panel-body ::ng-deep app-base-form-canvas .main-form-canvas{margin-top:20px!important}.location-card .panel-description{justify-content:end!important;margin:0!important}.location-card .card-header{display:flex;justify-content:space-between;align-items:center;padding:16px!important;cursor:default}.location-card .card-header .title-container{display:flex;flex-direction:column;gap:8px;align-items:flex-start;justify-content:center}.location-card .card-header .card-title{margin:0;font-size:24px;font-weight:700;line-height:1.2;color:#000;width:fit-content;white-space:nowrap}.location-card .card-header .card-subtitle{margin:0;font-family:lusail-light,sans-serif;font-weight:300;font-size:16px;line-height:1.2;color:#888;width:fit-content}.location-card .card-header .btn-edit{width:120px;min-height:32px!important;border-radius:9999px!important;font-size:16px!important}.location-card .card-header .expand-icon{color:#339dff;font-size:16px}.location-card .divider{border:none;border-top:2px solid var(--primary-color-3nd);margin-bottom:20px;margin-top:0}.flex-auto{flex:1 1 auto;display:flex;flex-direction:column}.row{display:flex;flex-direction:row;width:100%}.gap-20{gap:20px}.buttons-wrapper{display:flex;text-align-last:end;margin:0!important;gap:16px;justify-content:flex-end}.buttons-wrapper .action{min-height:44px!important;min-width:135px!important;width:auto!important}.button-text span{font-size:18px}.button-text mat-icon{font-size:18px!important}.btn-none-background-primary{margin:0!important}@media (max-width: 768px){.desktop-buttons{display:none!important}.desktop-buttons.show-on-mobile{display:flex!important}.mobile-buttons{display:flex;gap:12px;align-items:center;justify-content:flex-end}.btn-download-mobile{width:45px!important;height:44px!important;min-width:45px!important;padding:0!important;border-radius:8px!important;background:#0d4261!important;display:flex;align-items:center;justify-content:center}.btn-download-mobile mat-icon{color:#fff!important;font-size:24px!important;width:24px!important;height:28px!important;margin:0!important}.btn-download-mobile .mdc-button__label{padding:0!important}.btn-menu-mobile{width:44px!important;height:44px!important;min-width:44px!important;padding:0!important;border-radius:8px!important;border:1px solid #3e627b!important;background:#fff!important;display:flex;align-items:center;justify-content:center}.btn-menu-mobile mat-icon{color:#0d4261!important;font-size:24px!important;width:25px!important;height:24px!important;margin:0!important;rotate:90deg}.btn-menu-mobile .mdc-button__label{padding:0!important}}@media (min-width: 769px){.mobile-buttons{display:none!important}}@media (max-width: 600px){::ng-deep .main-form-canvas{display:block!important}}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: BaseFormCanvasComponent, selector: "app-base-form-canvas", inputs: ["pageInfo", "currency", "fields", "errors", "workflowEditableFields", "isWorkflowEditableManaged", "supportingAttributes", "editable", "emitOnValueChanges", "filterResetNonce", "item", "equationSuggestedFields", "currentEquationValue"], outputs: ["attachmentEmitter", "actionEmitter", "formUpdated", "hyperTextEvent", "currentEquationValueChange"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "component", type: MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "directive", type: MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: MatExpansionPanelDescription, selector: "mat-panel-description" }, { kind: "component", type: MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }] }); }
|
|
4858
4856
|
}
|
|
4859
4857
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SectionFormCanvasComponent, decorators: [{
|
|
4860
4858
|
type: Component,
|
|
@@ -4874,7 +4872,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
4874
4872
|
MatMenu,
|
|
4875
4873
|
MatMenuTrigger,
|
|
4876
4874
|
MatMenuItem
|
|
4877
|
-
], template: "<mat-expansion-panel class=\"location-card\"\r\n #panel=\"matExpansionPanel\"\r\n [expanded]=\"isExpanded\"\r\n [hideToggle]=\"hideToggle\"\r\n (opened)=\"alwaysOpen ? panel.open() : null\"\r\n (closed)=\"alwaysOpen ? panel.open() : null\">\r\n <mat-expansion-panel-header
|
|
4875
|
+
], template: "<mat-expansion-panel class=\"location-card\"\r\n #panel=\"matExpansionPanel\"\r\n [expanded]=\"isExpanded\"\r\n [hideToggle]=\"hideToggle\"\r\n (opened)=\"alwaysOpen ? panel.open() : null\"\r\n (closed)=\"alwaysOpen ? panel.open() : null\">\r\n <mat-expansion-panel-header\r\n class=\"card-header\"\r\n (click)=\"toggleExpand()\"\r\n [tabIndex]=\"expansionHeaderTabIndex\">\r\n <mat-panel-title>\r\n <div class=\"title-container\">\r\n <h3 class=\"card-title\" *ngIf=\"isTranslateTitle\">\r\n {{ pageInfo.labelsSection + '.' + title | translate }}\r\n </h3>\r\n <h3 class=\"card-title\" *ngIf=\"!isTranslateTitle\">{{ title }}</h3>\r\n <p class=\"card-subtitle\" *ngIf=\"subtitle\">\r\n <span *ngIf=\"isTranslateSubtitle\">{{ pageInfo.labelsSection + '.' + subtitle | translate }}</span>\r\n <span *ngIf=\"!isTranslateSubtitle\">{{ subtitle }}</span>\r\n </p>\r\n <button\r\n mat-button\r\n *ngIf=\"itemStatus\"\r\n type=\"button\"\r\n class=\"stateType\"\r\n [ngClass]=\"itemStatus\"\r\n (keydown)=\"onPanelHeaderChildKeydown($event)\">\r\n {{ pageInfo.labelsSection + '.' + itemStatus | translate }}\r\n </button>\r\n </div>\r\n </mat-panel-title>\r\n\r\n <mat-panel-description class=\"panel-description\" *ngIf=\"buttons && buttons.length > 0\">\r\n <div class=\"row flex-auto buttons-wrapper desktop-buttons\" [class.show-on-mobile]=\"!getDownloadButton()\">\r\n <button\r\n mat-flat-button\r\n *ngFor=\"let btn of buttons\"\r\n type=\"button\"\r\n [color]=\"btn.color || 'primary'\"\r\n (click)=\"onButtonClick(btn , key); $event.stopPropagation()\"\r\n (keydown)=\"onPanelHeaderChildKeydown($event)\"\r\n class=\"btn-none-background-primary action\"\r\n [attr.id]=\"btn.id || ('section-btn-' + (btn.action || btn.label || btn.key))\"\r\n >\r\n <div class=\"button-text\">\r\n <mat-icon *ngIf=\"btn.icon\">{{ btn.icon }}</mat-icon>\r\n <span>{{ btn.label | translate }}</span>\r\n </div>\r\n </button>\r\n </div>\r\n \r\n <div class=\"mobile-buttons\" *ngIf=\"getDownloadButton()\">\r\n <button\r\n mat-flat-button\r\n type=\"button\"\r\n color=\"primary\"\r\n (click)=\"onButtonClick(getDownloadButton()!, key); $event.stopPropagation()\"\r\n (keydown)=\"onPanelHeaderChildKeydown($event)\"\r\n class=\"btn-download-mobile\"\r\n [attr.id]=\"getDownloadButton()?.id\"\r\n [attr.aria-label]=\"'BASE_TABLE.downloadAction' | translate\"\r\n >\r\n <mat-icon aria-hidden=\"true\">{{ getDownloadButton()?.icon }}</mat-icon>\r\n </button>\r\n <button\r\n *ngIf=\"getMenuButtons().length > 0\"\r\n mat-stroked-button\r\n type=\"button\"\r\n [matMenuTriggerFor]=\"menu\"\r\n (keydown)=\"onPanelHeaderChildKeydown($event)\"\r\n class=\"btn-menu-mobile\"\r\n >\r\n <mat-icon>more_vert</mat-icon>\r\n </button>\r\n <mat-menu #menu=\"matMenu\">\r\n <button\r\n mat-menu-item\r\n *ngFor=\"let btn of getMenuButtons()\"\r\n (click)=\"onButtonClick(btn, key); $event.stopPropagation()\"\r\n [attr.id]=\"btn.id\"\r\n >\r\n <mat-icon>{{ btn.icon }}</mat-icon>\r\n <span>{{ btn.label | translate }}</span>\r\n </button>\r\n </mat-menu>\r\n </div>\r\n </mat-panel-description>\r\n </mat-expansion-panel-header>\r\n <div class=\"panel-body\">\r\n <hr class=\"divider\"/>\r\n <ng-content></ng-content>\r\n <app-base-form-canvas\r\n [pageInfo]=\"pageInfo\"\r\n [fields]=\"fields\"\r\n [editable]=\"editable\"\r\n [item]=\"item\"\r\n (formUpdated)=\"formUpdated($event)\"\r\n ></app-base-form-canvas>\r\n </div>\r\n</mat-expansion-panel>\r\n", styles: [".location-card{border:1px solid #dcdcdc;border-radius:8px;background:#fff;margin:18px auto;overflow:hidden}.location-card .mat-expansion-panel-header{padding:0 15px}.location-card .mat-expansion-panel-header ::ng-deep .mat-content{margin:0!important}@media (max-width: 450px){.location-card .mat-expansion-panel-header ::ng-deep .mat-content{flex-direction:column!important;align-items:stretch;gap:12px}.location-card .panel-description{justify-content:flex-start!important;width:100%}.location-card .buttons-wrapper{justify-content:flex-start;width:100%}}.location-card .panel-body{padding:20px 15px;padding-top:0!important}.location-card .panel-body ::ng-deep app-base-form-canvas .main-form-canvas{margin-top:20px!important}.location-card .panel-description{justify-content:end!important;margin:0!important}.location-card .card-header{display:flex;justify-content:space-between;align-items:center;padding:16px!important;cursor:default}.location-card .card-header .title-container{display:flex;flex-direction:column;gap:8px;align-items:flex-start;justify-content:center}.location-card .card-header .card-title{margin:0;font-size:24px;font-weight:700;line-height:1.2;color:#000;width:fit-content;white-space:nowrap}.location-card .card-header .card-subtitle{margin:0;font-family:lusail-light,sans-serif;font-weight:300;font-size:16px;line-height:1.2;color:#888;width:fit-content}.location-card .card-header .btn-edit{width:120px;min-height:32px!important;border-radius:9999px!important;font-size:16px!important}.location-card .card-header .expand-icon{color:#339dff;font-size:16px}.location-card .divider{border:none;border-top:2px solid var(--primary-color-3nd);margin-bottom:20px;margin-top:0}.flex-auto{flex:1 1 auto;display:flex;flex-direction:column}.row{display:flex;flex-direction:row;width:100%}.gap-20{gap:20px}.buttons-wrapper{display:flex;text-align-last:end;margin:0!important;gap:16px;justify-content:flex-end}.buttons-wrapper .action{min-height:44px!important;min-width:135px!important;width:auto!important}.button-text span{font-size:18px}.button-text mat-icon{font-size:18px!important}.btn-none-background-primary{margin:0!important}@media (max-width: 768px){.desktop-buttons{display:none!important}.desktop-buttons.show-on-mobile{display:flex!important}.mobile-buttons{display:flex;gap:12px;align-items:center;justify-content:flex-end}.btn-download-mobile{width:45px!important;height:44px!important;min-width:45px!important;padding:0!important;border-radius:8px!important;background:#0d4261!important;display:flex;align-items:center;justify-content:center}.btn-download-mobile mat-icon{color:#fff!important;font-size:24px!important;width:24px!important;height:28px!important;margin:0!important}.btn-download-mobile .mdc-button__label{padding:0!important}.btn-menu-mobile{width:44px!important;height:44px!important;min-width:44px!important;padding:0!important;border-radius:8px!important;border:1px solid #3e627b!important;background:#fff!important;display:flex;align-items:center;justify-content:center}.btn-menu-mobile mat-icon{color:#0d4261!important;font-size:24px!important;width:25px!important;height:24px!important;margin:0!important;rotate:90deg}.btn-menu-mobile .mdc-button__label{padding:0!important}}@media (min-width: 769px){.mobile-buttons{display:none!important}}@media (max-width: 600px){::ng-deep .main-form-canvas{display:block!important}}\n"] }]
|
|
4878
4876
|
}], propDecorators: { pageInfo: [{
|
|
4879
4877
|
type: Input
|
|
4880
4878
|
}], fields: [{
|
|
@@ -4903,6 +4901,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
4903
4901
|
type: Input
|
|
4904
4902
|
}], alwaysOpen: [{
|
|
4905
4903
|
type: Input
|
|
4904
|
+
}], expansionHeaderTabIndex: [{
|
|
4905
|
+
type: Input
|
|
4906
4906
|
}], actionEdit: [{
|
|
4907
4907
|
type: Output
|
|
4908
4908
|
}], formEdit: [{
|
|
@@ -6127,11 +6127,11 @@ class SnackbarStaticComponent {
|
|
|
6127
6127
|
this.actionBtn.emit();
|
|
6128
6128
|
}
|
|
6129
6129
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SnackbarStaticComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6130
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SnackbarStaticComponent, isStandalone: true, selector: "app-snackbar-static", inputs: { messageKey: "messageKey", titleKey: "titleKey", params: "params", paramsTitle: "paramsTitle", type: "type", width: "width", textBtn: "textBtn" }, outputs: { actionBtn: "actionBtn" }, ngImport: i0, template: "<div class=\"snackbar snackbar-{{type}}\" [ngStyle]=\"{'width': width == 'auto' ? 'auto' : width}\">\r\n <div class=\"sub-snackbar\">\r\n <mat-icon *ngIf=\"type === 'error'\">error</mat-icon>\r\n <mat-icon *ngIf=\"type === 'success'\">check_box</mat-icon>\r\n <mat-icon *ngIf=\"type === 'warning'\">warning</mat-icon>\r\n <mat-icon *ngIf=\"type === 'info'\">info</mat-icon>\r\n <mat-icon *ngIf=\"type === 'help'\">help</mat-icon>\r\n\r\n <div class=\"text-content\">\r\n <div class=\"title\">{{ titleKey | translate : paramsTitle }}</div>\r\n <div class=\"subtitle\">{{ messageKey | translate: params }}</div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"action\" *ngIf=\"textBtn\">\r\n <button mat-stroked-button class=\"btn-none-background-primary action-btn\" (click)=\"submit()\" id=\"snackbar-action-btn\">\r\n {{ textBtn | translate}}\r\n </button>\r\n </div>\r\n</div>\r\n", styles: [".snackbar{position:relative;width:auto;max-width:100%;box-sizing:border-box;background:#fff;border:1.5px solid #1c8c7a;border-radius:10px;padding:12px 20px;display:flex;flex-direction:column;color:#1c8c7a;box-shadow:0 2px 4px #00000014;overflow:hidden;word-break:break-word;overflow-wrap:anywhere;--snackbar-icon-size: clamp(16px, 2.4vw, 20px);--snackbar-title-size: clamp(14px, 2.6vw, 16px);--snackbar-subtitle-size: clamp(12px, 2.3vw, 14px)}.snackbar .sub-snackbar{display:flex;gap:10px;align-items:start}.snackbar .sub-snackbar mat-icon{font-size:var(--snackbar-icon-size);line-height:1;width:1em;height:1em;flex:0 0 auto}.snackbar .sub-snackbar .text-content{display:flex;flex-direction:column;line-height:24px}.snackbar .sub-snackbar .text-content .title{font-weight:400;color:inherit;font-family:lusail-regular,sans-serif;font-size:var(--snackbar-title-size)}.snackbar .sub-snackbar .text-content .subtitle{font-weight:400;color:#888;font-family:lusail-light,sans-serif;font-size:var(--snackbar-subtitle-size);margin-top:3px!important}.snackbar .action{display:flex;justify-content:flex-end}.snackbar .action .action-btn{font-size:var(--snackbar-title-size);font-weight:400;border-radius:8px;min-height:
|
|
6130
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SnackbarStaticComponent, isStandalone: true, selector: "app-snackbar-static", inputs: { messageKey: "messageKey", titleKey: "titleKey", params: "params", paramsTitle: "paramsTitle", type: "type", width: "width", textBtn: "textBtn" }, outputs: { actionBtn: "actionBtn" }, ngImport: i0, template: "<div class=\"snackbar snackbar-{{type}}\" [ngStyle]=\"{'width': width == 'auto' ? 'auto' : width}\">\r\n <div class=\"sub-snackbar\">\r\n <mat-icon *ngIf=\"type === 'error'\">error</mat-icon>\r\n <mat-icon *ngIf=\"type === 'success'\">check_box</mat-icon>\r\n <mat-icon *ngIf=\"type === 'warning'\">warning</mat-icon>\r\n <mat-icon *ngIf=\"type === 'info'\">info</mat-icon>\r\n <mat-icon *ngIf=\"type === 'help'\">help</mat-icon>\r\n\r\n <div class=\"text-content\">\r\n <div class=\"title\">{{ titleKey | translate : paramsTitle }}</div>\r\n <div class=\"subtitle\">{{ messageKey | translate: params }}</div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"action\" *ngIf=\"textBtn\">\r\n <button mat-stroked-button class=\"btn-none-background-primary action-btn\" (click)=\"submit()\" id=\"snackbar-action-btn\">\r\n {{ textBtn | translate}}\r\n </button>\r\n </div>\r\n</div>\r\n", styles: [".snackbar{position:relative;width:auto;max-width:100%;box-sizing:border-box;background:#fff;border:1.5px solid #1c8c7a;border-radius:10px;padding:12px 20px;display:flex;flex-direction:column;color:#1c8c7a;box-shadow:0 2px 4px #00000014;overflow:hidden;word-break:break-word;overflow-wrap:anywhere;--snackbar-icon-size: clamp(16px, 2.4vw, 20px);--snackbar-title-size: clamp(14px, 2.6vw, 16px);--snackbar-subtitle-size: clamp(12px, 2.3vw, 14px)}.snackbar .sub-snackbar{display:flex;gap:10px;align-items:start}.snackbar .sub-snackbar mat-icon{font-size:var(--snackbar-icon-size);line-height:1;width:1em;height:1em;flex:0 0 auto}.snackbar .sub-snackbar .text-content{display:flex;flex-direction:column;line-height:24px}.snackbar .sub-snackbar .text-content .title{font-weight:400;color:inherit;font-family:lusail-regular,sans-serif;font-size:var(--snackbar-title-size)}.snackbar .sub-snackbar .text-content .subtitle{font-weight:400;color:#888;font-family:lusail-light,sans-serif;font-size:var(--snackbar-subtitle-size);margin-top:3px!important}.snackbar .action{display:flex;justify-content:flex-end}.snackbar .action .action-btn{font-size:var(--snackbar-title-size);font-weight:400;border-radius:8px;min-height:44px!important;margin:0!important;min-width:fit-content;max-width:100%}.snackbar .action .action-btn mat-icon{font-size:var(--snackbar-icon-size)}.snackbar-success{border-color:#0d7d6a;color:#0d7d6a}.snackbar-error{border-color:#a42b2b;color:#a42b2b}.snackbar-warning{border-color:#b54708;color:#b54708}.snackbar-info{border-color:#0d47a1;color:#0d47a1}.snackbar-help{border-color:var(--primary-color-3nd);color:var(--primary-color-3nd)}@media (max-width: 600px){.snackbar{padding:10px 14px;--snackbar-icon-size: clamp(16px, 3.6vw, 18px);--snackbar-title-size: clamp(14px, 3.8vw, 15px);--snackbar-subtitle-size: clamp(12px, 3.4vw, 13px)}.snackbar .sub-snackbar{gap:8px}.snackbar .sub-snackbar .text-content{line-height:22px}.snackbar .action{margin-top:8px}.snackbar .action .action-btn{width:100%;font-size:var(--snackbar-title-size)}}@media (max-width: 360px){.snackbar{padding:8px 10px;border-radius:8px;--snackbar-icon-size: clamp(14px, 4.5vw, 16px);--snackbar-title-size: clamp(13px, 4.6vw, 14px);--snackbar-subtitle-size: clamp(11px, 4.2vw, 12px)}}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "component", type: MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
|
|
6131
6131
|
}
|
|
6132
6132
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SnackbarStaticComponent, decorators: [{
|
|
6133
6133
|
type: Component,
|
|
6134
|
-
args: [{ selector: 'app-snackbar-static', standalone: true, imports: [MatIcon, NgIf, TranslateModule, MatIconButton, MatButton, NgStyle], template: "<div class=\"snackbar snackbar-{{type}}\" [ngStyle]=\"{'width': width == 'auto' ? 'auto' : width}\">\r\n <div class=\"sub-snackbar\">\r\n <mat-icon *ngIf=\"type === 'error'\">error</mat-icon>\r\n <mat-icon *ngIf=\"type === 'success'\">check_box</mat-icon>\r\n <mat-icon *ngIf=\"type === 'warning'\">warning</mat-icon>\r\n <mat-icon *ngIf=\"type === 'info'\">info</mat-icon>\r\n <mat-icon *ngIf=\"type === 'help'\">help</mat-icon>\r\n\r\n <div class=\"text-content\">\r\n <div class=\"title\">{{ titleKey | translate : paramsTitle }}</div>\r\n <div class=\"subtitle\">{{ messageKey | translate: params }}</div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"action\" *ngIf=\"textBtn\">\r\n <button mat-stroked-button class=\"btn-none-background-primary action-btn\" (click)=\"submit()\" id=\"snackbar-action-btn\">\r\n {{ textBtn | translate}}\r\n </button>\r\n </div>\r\n</div>\r\n", styles: [".snackbar{position:relative;width:auto;max-width:100%;box-sizing:border-box;background:#fff;border:1.5px solid #1c8c7a;border-radius:10px;padding:12px 20px;display:flex;flex-direction:column;color:#1c8c7a;box-shadow:0 2px 4px #00000014;overflow:hidden;word-break:break-word;overflow-wrap:anywhere;--snackbar-icon-size: clamp(16px, 2.4vw, 20px);--snackbar-title-size: clamp(14px, 2.6vw, 16px);--snackbar-subtitle-size: clamp(12px, 2.3vw, 14px)}.snackbar .sub-snackbar{display:flex;gap:10px;align-items:start}.snackbar .sub-snackbar mat-icon{font-size:var(--snackbar-icon-size);line-height:1;width:1em;height:1em;flex:0 0 auto}.snackbar .sub-snackbar .text-content{display:flex;flex-direction:column;line-height:24px}.snackbar .sub-snackbar .text-content .title{font-weight:400;color:inherit;font-family:lusail-regular,sans-serif;font-size:var(--snackbar-title-size)}.snackbar .sub-snackbar .text-content .subtitle{font-weight:400;color:#888;font-family:lusail-light,sans-serif;font-size:var(--snackbar-subtitle-size);margin-top:3px!important}.snackbar .action{display:flex;justify-content:flex-end}.snackbar .action .action-btn{font-size:var(--snackbar-title-size);font-weight:400;border-radius:8px;min-height:
|
|
6134
|
+
args: [{ selector: 'app-snackbar-static', standalone: true, imports: [MatIcon, NgIf, TranslateModule, MatIconButton, MatButton, NgStyle], template: "<div class=\"snackbar snackbar-{{type}}\" [ngStyle]=\"{'width': width == 'auto' ? 'auto' : width}\">\r\n <div class=\"sub-snackbar\">\r\n <mat-icon *ngIf=\"type === 'error'\">error</mat-icon>\r\n <mat-icon *ngIf=\"type === 'success'\">check_box</mat-icon>\r\n <mat-icon *ngIf=\"type === 'warning'\">warning</mat-icon>\r\n <mat-icon *ngIf=\"type === 'info'\">info</mat-icon>\r\n <mat-icon *ngIf=\"type === 'help'\">help</mat-icon>\r\n\r\n <div class=\"text-content\">\r\n <div class=\"title\">{{ titleKey | translate : paramsTitle }}</div>\r\n <div class=\"subtitle\">{{ messageKey | translate: params }}</div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"action\" *ngIf=\"textBtn\">\r\n <button mat-stroked-button class=\"btn-none-background-primary action-btn\" (click)=\"submit()\" id=\"snackbar-action-btn\">\r\n {{ textBtn | translate}}\r\n </button>\r\n </div>\r\n</div>\r\n", styles: [".snackbar{position:relative;width:auto;max-width:100%;box-sizing:border-box;background:#fff;border:1.5px solid #1c8c7a;border-radius:10px;padding:12px 20px;display:flex;flex-direction:column;color:#1c8c7a;box-shadow:0 2px 4px #00000014;overflow:hidden;word-break:break-word;overflow-wrap:anywhere;--snackbar-icon-size: clamp(16px, 2.4vw, 20px);--snackbar-title-size: clamp(14px, 2.6vw, 16px);--snackbar-subtitle-size: clamp(12px, 2.3vw, 14px)}.snackbar .sub-snackbar{display:flex;gap:10px;align-items:start}.snackbar .sub-snackbar mat-icon{font-size:var(--snackbar-icon-size);line-height:1;width:1em;height:1em;flex:0 0 auto}.snackbar .sub-snackbar .text-content{display:flex;flex-direction:column;line-height:24px}.snackbar .sub-snackbar .text-content .title{font-weight:400;color:inherit;font-family:lusail-regular,sans-serif;font-size:var(--snackbar-title-size)}.snackbar .sub-snackbar .text-content .subtitle{font-weight:400;color:#888;font-family:lusail-light,sans-serif;font-size:var(--snackbar-subtitle-size);margin-top:3px!important}.snackbar .action{display:flex;justify-content:flex-end}.snackbar .action .action-btn{font-size:var(--snackbar-title-size);font-weight:400;border-radius:8px;min-height:44px!important;margin:0!important;min-width:fit-content;max-width:100%}.snackbar .action .action-btn mat-icon{font-size:var(--snackbar-icon-size)}.snackbar-success{border-color:#0d7d6a;color:#0d7d6a}.snackbar-error{border-color:#a42b2b;color:#a42b2b}.snackbar-warning{border-color:#b54708;color:#b54708}.snackbar-info{border-color:#0d47a1;color:#0d47a1}.snackbar-help{border-color:var(--primary-color-3nd);color:var(--primary-color-3nd)}@media (max-width: 600px){.snackbar{padding:10px 14px;--snackbar-icon-size: clamp(16px, 3.6vw, 18px);--snackbar-title-size: clamp(14px, 3.8vw, 15px);--snackbar-subtitle-size: clamp(12px, 3.4vw, 13px)}.snackbar .sub-snackbar{gap:8px}.snackbar .sub-snackbar .text-content{line-height:22px}.snackbar .action{margin-top:8px}.snackbar .action .action-btn{width:100%;font-size:var(--snackbar-title-size)}}@media (max-width: 360px){.snackbar{padding:8px 10px;border-radius:8px;--snackbar-icon-size: clamp(14px, 4.5vw, 16px);--snackbar-title-size: clamp(13px, 4.6vw, 14px);--snackbar-subtitle-size: clamp(11px, 4.2vw, 12px)}}\n"] }]
|
|
6135
6135
|
}], propDecorators: { messageKey: [{
|
|
6136
6136
|
type: Input
|
|
6137
6137
|
}], titleKey: [{
|