bpm-core 0.0.146 → 0.0.148

package/fesm2022/bpm-core.mjs

@@ -1,12 +1,12 @@
 import * as i0 from '@angular/core';
-import { Injectable, Inject, inject, DestroyRef, CUSTOM_ELEMENTS_SCHEMA, Component, Pipe, forwardRef, EventEmitter, Output, Input, Directive, ViewChild, HostListener, Optional, Self, ChangeDetectorRef, ChangeDetectionStrategy, ElementRef, NO_ERRORS_SCHEMA, PLATFORM_ID, InjectionToken } from '@angular/core';
+import { Injectable, Inject, inject, DestroyRef, CUSTOM_ELEMENTS_SCHEMA, Component, input, ElementRef, Renderer2, Directive, Pipe, forwardRef, EventEmitter, Output, Input, ViewChild, HostListener, Optional, Self, ChangeDetectorRef, ChangeDetectionStrategy, NO_ERRORS_SCHEMA, PLATFORM_ID, InjectionToken } from '@angular/core';
 import * as i1$1 from '@angular/material/dialog';
 import { MatDialogContent, MatDialogClose, MatDialogTitle, MAT_DIALOG_DATA, MatDialog, MatDialogActions, MatDialogModule } from '@angular/material/dialog';
-import { Subject, BehaviorSubject, ReplaySubject, catchError, throwError, switchMap, from, fromEvent, debounceTime } from 'rxjs';
+import { Subject, BehaviorSubject, ReplaySubject, catchError, throwError, switchMap, from, shareReplay, concat, EMPTY, Observable, fromEvent, debounceTime } from 'rxjs';
 import * as i1 from '@angular/common/http';
 import { HttpHeaders } from '@angular/common/http';
 import { map } from 'rxjs/operators';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
 import * as i5 from '@angular/common';
 import { NgIf, CommonModule, NgSwitchCase, DecimalPipe, DatePipe, NgClass, NgSwitchDefault, NgSwitch, NgForOf, NgTemplateOutlet, SlicePipe, NgFor, NgComponentOutlet, DOCUMENT, isPlatformBrowser } from '@angular/common';
 import * as i4$1 from '@angular/material/core';
@@ -77,6 +77,7 @@ const TRUE_STRING = 'TRUE';
 const FALSE_STRING = 'FALSE';
 const TRUE_BOOL = true;
 const FALSE_BOOL = false;
+const STRING = 'string';
 // State Machine statuses
 const STATE_MACHINE_STATUS_IDLE = 'idle';
 const STATE_MACHINE_STATUS_FETCHING = 'fetching';
@@ -675,6 +676,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                 }]
         }] });
 
+const PLACEHOLDER_URL = 'assets/images/user.svg';
+const PLACEHOLDER_KEY = 'PLACEHOLDER';
+
 class FeedBackService {
     http;
     config;
@@ -1365,6 +1369,160 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                     ], template: "<div class=\"popup-container\">\r\n    <div class=\"d-flex align-items-center justify-content-between\" mat-dialog-title>\r\n        <h3>  {{i18n.translate('delete')}}</h3>\r\n        <ds-button matDialogClose icon>\r\n            <ds-icon icon=\"close\" class=\"fs-20 fc-black\"></ds-icon>\r\n        </ds-button>\r\n    </div>\r\n    <mat-dialog-content>\r\n        <div class=\"d-flex flex-column align-items-center justify-content-center py-4\">\r\n            <h2 class=\"fs-16 fw-medium fc-black mb-4\">\r\n                {{i18n.translate('Areyousureyouwantdelete')}}\r\n            </h2>\r\n\r\n            <div class=\"d-flex align-items-center gap-3\">\r\n                <ds-button shape=\"outline\" color=\"dark-gray\" matDialogClose>{{i18n.translate('Cancel')}}</ds-button>\r\n                <ds-button color=\"red\" (click)=\"delete()\">{{i18n.translate('yes')}}</ds-button>\r\n            </div>\r\n        </div>\r\n    </mat-dialog-content>\r\n</div>", styles: ["::ng-deep .confirm-dialog{--popup-max-width: 350px}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.MatDialogRef }, { type: CoreI18nService }] });
 
+const EMAIL = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+class EmailUtil {
+    static isValidEmail(email) {
+        return EMAIL.test(email);
+    }
+    static isStcEmployee(email) {
+        if (!email || typeof email !== STRING)
+            return false;
+        return !email.split('@')[0].includes('.');
+    }
+}
+
+var CacheProps;
+(function (CacheProps) {
+    CacheProps["profileImg"] = "profileImg";
+})(CacheProps || (CacheProps = {}));
+
+class CacheService {
+    profileImg = new Map();
+    set(prop, key, value) {
+        this[prop].set(key, value);
+    }
+    get(prop, key) {
+        return this[prop].get(key);
+    }
+    has(prop, key) {
+        return this[prop].has(key);
+    }
+    delete(prop, key) {
+        this[prop].delete(key);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CacheService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CacheService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CacheService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class ProfileImageService {
+    http;
+    cacheService;
+    constructor(http, cacheService) {
+        this.http = http;
+        this.cacheService = cacheService;
+    }
+    load(email) {
+        if (!EmailUtil.isValidEmail(email)) {
+            return this.getPlaceholder();
+        }
+        if (this.cacheService.has(CacheProps.profileImg, email)) {
+            return this.cacheService.get(CacheProps.profileImg, email);
+        }
+        const url = `${IGATE_STATIC_ASSET_PROFILE_PHOTO_URL}${encodeURIComponent(email)}`;
+        const request$ = this.getImageAsBase64(url)
+            .pipe(shareReplay(1), catchError(() => {
+            const placeholder$ = this.getPlaceholder();
+            this.cacheService.set(CacheProps.profileImg, email, placeholder$);
+            return placeholder$;
+        }));
+        // Emit loading placeholder first, then real image
+        const result$ = concat(this.getPlaceholder(), request$);
+        this.cacheService.set(CacheProps.profileImg, email, result$);
+        return result$;
+    }
+    getPlaceholder() {
+        if (this.cacheService.has(CacheProps.profileImg, PLACEHOLDER_KEY)) {
+            return this.cacheService.get(CacheProps.profileImg, PLACEHOLDER_KEY);
+        }
+        const request$ = this.getImageAsBase64(PLACEHOLDER_URL)
+            .pipe(shareReplay(1), catchError(() => {
+            console.error('Failed to load placeholder image');
+            return EMPTY;
+        }));
+        this.cacheService.set(CacheProps.profileImg, PLACEHOLDER_KEY, request$);
+        return request$;
+    }
+    getImageAsBase64(url) {
+        return this.http.get(url, { responseType: 'blob' }).pipe(switchMap(blob => this.blobToBase64$(blob)));
+    }
+    blobToBase64$(blob) {
+        return new Observable(observer => {
+            const reader = new FileReader();
+            reader.onload = () => {
+                observer.next(reader.result);
+                observer.complete();
+            };
+            reader.onerror = err => observer.error(err);
+            reader.readAsDataURL(blob);
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ProfileImageService, deps: [{ token: i1.HttpClient }, { token: CacheService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ProfileImageService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ProfileImageService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: CacheService }] });
+
+/**
+ * Directive to load and cache a profile image based on an email address.
+ *
+ * It automatically updates the `src` of an `img` element or the `image` property of a `ds-avatar` element with the loaded Base64 image.
+ *
+ * Inputs:
+ * - `profileImageByEmail`: The email address to load the profile image for.
+ *
+ * Example usage:
+ * ```html
+ * <img profileImageByEmail="user@example.com" />
+ * <ds-avatar profileImageByEmail="user@example.com"></ds-avatar>
+ * ```
+ *
+ * @selector `img[profileImageByEmail], ds-avatar[profileImageByEmail]`
+ */
+class ProfileImageByEmailDirective {
+    /**
+     * The email address used to fetch the profile image.
+     */
+    profileImageByEmail = input();
+    hostRef = inject(ElementRef);
+    renderer = inject(Renderer2);
+    profileImgService = inject(ProfileImageService);
+    constructor() {
+        toObservable(this.profileImageByEmail).pipe(switchMap(email => this.profileImgService.load(email)), takeUntilDestroyed()).subscribe(imgSrc => this.setImage(imgSrc));
+    }
+    setImage(value) {
+        const host = this.hostRef.nativeElement;
+        const tag = host.tagName.toLowerCase();
+        if (tag === 'img') {
+            this.renderer.setAttribute(host, 'src', value);
+            return;
+        }
+        if (tag === 'ds-avatar') {
+            this.renderer.setProperty(host, 'image', value);
+            return;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ProfileImageByEmailDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.15", type: ProfileImageByEmailDirective, isStandalone: true, selector: "img[profileImageByEmail], ds-avatar[profileImageByEmail]", inputs: { profileImageByEmail: { classPropertyName: "profileImageByEmail", publicName: "profileImageByEmail", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ProfileImageByEmailDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'img[profileImageByEmail], ds-avatar[profileImageByEmail]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [] });
+
 class SubmitDialogComponent {
     data;
     i18n;
@@ -1378,14 +1536,6 @@ class SubmitDialogComponent {
         this.successData = data;
         this.inboxUri = window.wmConfig.inboxUri;
     }
-    getImage(email) {
-        if (email) {
-            return '/group/i-gate/wm-bpm/forms/-/proxy/portrait?email=' + email;
-        }
-        else {
-            return '';
-        }
-    }
     viewForm(formId, formName) {
         if (formId) {
             if (formId?.toLowerCase().includes('draft')) {
@@ -1412,7 +1562,7 @@ class SubmitDialogComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SubmitDialogComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: CoreI18nService }, { token: CoreService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: SubmitDialogComponent, isStandalone: true, selector: "app-submit-dialog", ngImport: i0, template: "<div class=\"popup-container\">\r\n  <div class=\"d-flex align-items-center justify-content-end\" mat-dialog-title>\r\n    <ds-button matDialogClose icon>\r\n      <ds-icon icon=\"close\" class=\"fs-20 fc-black\"></ds-icon>\r\n    </ds-button>\r\n  </div>\r\n  <mat-dialog-content>\r\n    <div class=\"d-flex flex-column align-items-center justify-content-center py-4\">\r\n      <div class=\"text-center mb-4\">\r\n        <svg width=\"79\" height=\"76\" viewBox=\"0 0 79 76\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n          <path\r\n            d=\"M59.9804 0.0998676L1.39239 19.2479C1.02223 19.3692 0.69498 19.5948 0.44999 19.8976C0.205 20.2005 0.0526985 20.5676 0.0113985 20.955C-0.0299016 21.3423 0.0415576 21.7333 0.217184 22.081C0.39281 22.4287 0.665128 22.7183 1.00139 22.9149L23.1454 35.7899C23.487 35.9886 23.8794 36.0828 24.274 36.0608C24.6686 36.0388 25.0481 35.9014 25.3654 35.6659L31.5894 31.0439L26.9674 37.2679C26.7318 37.5852 26.5944 37.9646 26.5722 38.3591C26.5499 38.7537 26.6439 39.1461 26.8424 39.4879L39.7174 61.6289C39.9138 61.9652 40.2031 62.2377 40.5506 62.4135C40.8981 62.5894 41.289 62.6611 41.6763 62.6201C42.0636 62.5791 42.4308 62.4272 42.7338 62.1825C43.0369 61.9378 43.2628 61.6108 43.3844 61.2409L62.5294 2.65187C62.6458 2.29686 62.6615 1.91654 62.5749 1.55313C62.4883 1.18971 62.3026 0.857401 62.0386 0.593071C61.7746 0.328741 61.4425 0.142726 61.0792 0.0556665C60.7159 -0.0313933 60.3355 -0.0160937 59.9804 0.0998676ZM40.9434 55.6999L31.0014 38.6069L42.9894 22.4689C43.2797 22.0798 43.4202 21.5993 43.3852 21.1152C43.3502 20.631 43.142 20.1757 42.7988 19.8325C42.4556 19.4893 42.0002 19.2811 41.5161 19.2461C41.032 19.2111 40.5514 19.3516 40.1624 19.6419L24.0254 31.6279L6.93339 21.6889L57.4514 5.18087L40.9434 55.6999ZM21.2134 44.2759L7.80139 57.6909C7.42253 58.0701 6.90853 58.2833 6.37246 58.2836C5.83638 58.2839 5.32215 58.0712 4.94289 57.6924C4.56363 57.3135 4.35041 56.7995 4.35013 56.2634C4.34985 55.7274 4.56253 55.2131 4.94139 54.8339L18.3564 41.4189C18.7353 41.04 19.2491 40.8272 19.7849 40.8272C20.3207 40.8272 20.8345 41.04 21.2134 41.4189C21.5923 41.7977 21.8051 42.3116 21.8051 42.8474C21.8051 43.3832 21.5923 43.897 21.2134 44.2759ZM3.49139 44.7839C3.30378 44.5963 3.15495 44.3736 3.05341 44.1285C2.95187 43.8834 2.89961 43.6207 2.89961 43.3554C2.89961 43.0901 2.95187 42.8274 3.05341 42.5823C3.15495 42.3371 3.30378 42.1144 3.49139 41.9269L8.78439 36.6339C9.16326 36.255 9.6771 36.0422 10.2129 36.0422C10.7487 36.0422 11.2625 36.255 11.6414 36.6339C12.0203 37.0127 12.2331 37.5266 12.2331 38.0624C12.2331 38.5982 12.0203 39.112 11.6414 39.4909L6.34939 44.7839C6.1618 44.9716 5.93903 45.1206 5.69384 45.2222C5.44864 45.3238 5.18582 45.3762 4.92039 45.3762C4.65497 45.3762 4.39215 45.3238 4.14695 45.2222C3.90176 45.1206 3.67899 44.9716 3.49139 44.7839ZM26.0014 50.9899C26.189 51.1774 26.3378 51.4001 26.4394 51.6453C26.5409 51.8904 26.5932 52.1531 26.5932 52.4184C26.5932 52.6837 26.5409 52.9464 26.4394 53.1915C26.3378 53.4366 26.189 53.6593 26.0014 53.8469L20.7014 59.1409C20.3225 59.5197 19.8087 59.7326 19.2729 59.7326C18.7371 59.7326 18.2233 59.5197 17.8444 59.1409C17.4655 58.762 17.2527 58.2482 17.2527 57.7124C17.2527 57.1766 17.4655 56.6627 17.8444 56.2839L23.1374 50.9909C23.325 50.8032 23.5477 50.6544 23.7928 50.5529C24.0379 50.4513 24.3006 50.3991 24.5659 50.3991C24.8312 50.3991 25.0939 50.4513 25.339 50.5529C25.5841 50.6544 25.8068 50.8032 25.9944 50.9909L26.0014 50.9899Z\"\r\n            fill=\"#8E9AA0\"/>\r\n          <path\r\n            d=\"M58.0015 75.3119C69.0472 75.3119 78.0015 66.3576 78.0015 55.3119C78.0015 44.2662 69.0472 35.3119 58.0015 35.3119C46.9558 35.3119 38.0015 44.2662 38.0015 55.3119C38.0015 66.3576 46.9558 75.3119 58.0015 75.3119Z\"\r\n            fill=\"#00C48C\"/>\r\n          <path\r\n            d=\"M56.8804 57.3183L54.0346 54.4725L52.9743 55.5336L56.8774 59.4367L65.8354 50.5267L65.4927 50.0138C63.8557 47.5812 61.1134 46.002 58.0015 46.002C53.0313 46.002 49.0015 50.031 49.0015 55.002C49.0015 59.9729 53.0305 64.002 58.0015 64.002C62.9716 64.002 67.0007 59.9729 67.0015 55.0035H65.5017C65.5017 55.005 65.5017 55.0072 65.5017 55.0095C65.5017 59.1503 62.1453 62.5067 58.0045 62.5067C53.8637 62.5067 50.5072 59.1503 50.5072 55.0095C50.5072 50.8686 53.8637 47.5122 58.0045 47.5122C60.3793 47.5122 62.4962 48.6168 63.87 50.3392L63.882 50.3542L56.8804 57.3183Z\"\r\n            fill=\"white\"/>\r\n        </svg>\r\n\r\n      </div>\r\n      <h2 class=\"fs-16 fw-medium fc-black mb-4 text-center\">\r\n        {{ i18n.translate('submittedSuccessfully') }}\r\n      </h2>\r\n\r\n      <div class=\"info-section reverse w-100\">\r\n        <div class=\"info-item  px-3\">\r\n          <span class=\"name fs-16-imp\">{{ i18n.translate('formTableFormId') }}</span>\r\n          <span class=\"disc fs-16-imp\">\r\n              <a class=\"cursor-pointer fc-black underline\" (click)=\"viewForm(successData.id, successData?.['formName'])\">\r\n                  {{ successData.id }}\r\n              </a>\r\n          </span>\r\n        </div>\r\n        <div class=\"info-item  px-3\">\r\n          <span class=\"name fs-16-imp\">{{ i18n.translate('formTableFormStatus') }}</span>\r\n          <ds-status class=\"disc\" status=\"{{getStatus(successData?.status?.['key'])}}\">\r\n            {{ successData.status?.['value'] }}\r\n          </ds-status>\r\n        </div>\r\n        @if (successData?.status?.['key'] === 'PENDING') {\r\n          <div class=\"info-item  px-3\">\r\n            <div class=\"d-flex align-items-center mt-2\">\r\n              <div class=\"img-card circled-img small\">\r\n                <img\r\n                  [src]=\"getImage(successData?.['nextApprover']?.['email'])\"\r\n                  onerror=\"this.onerror=null;this.src='assets/images/user.svg';\" alt=\"\">\r\n              </div>\r\n              <div class=\"line-height-1 mx-2\">\r\n                <h5 class=\"fs-14 fw-bold fc-black mb-0\">{{ successData?.['nextApprover']?.['name'] }}</h5>\r\n                <span class=\"fs-12 text-color-dark-gray\">{{ successData?.['nextApprover']?.['email'] }}</span>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        }\r\n      </div>\r\n      @if (!coreService.isMobileApp()) {\r\n        <div class=\"d-flex align-items-center gap-3 mt-3\">\r\n          <ds-button>\r\n            <a class=\"inboxUri\" href=\"{{inboxUri}}\">\r\n              {{ i18n.translate('formTableBackToInbox') }}</a>\r\n          </ds-button>\r\n        </div>\r\n      }\r\n    </div>\r\n  </mat-dialog-content>\r\n</div>\r\n", styles: [".inboxUri{color:#fff!important}.inboxUri:hover{color:#ff375e!important}ds-button:hover a{color:#ff375e!important}\n"], dependencies: [{ kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: SubmitDialogComponent, isStandalone: true, selector: "app-submit-dialog", ngImport: i0, template: "<div class=\"popup-container\">\r\n  <div class=\"d-flex align-items-center justify-content-end\" mat-dialog-title>\r\n    <ds-button matDialogClose icon>\r\n      <ds-icon icon=\"close\" class=\"fs-20 fc-black\"></ds-icon>\r\n    </ds-button>\r\n  </div>\r\n  <mat-dialog-content>\r\n    <div class=\"d-flex flex-column align-items-center justify-content-center py-4\">\r\n      <div class=\"text-center mb-4\">\r\n        <svg width=\"79\" height=\"76\" viewBox=\"0 0 79 76\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n          <path\r\n            d=\"M59.9804 0.0998676L1.39239 19.2479C1.02223 19.3692 0.69498 19.5948 0.44999 19.8976C0.205 20.2005 0.0526985 20.5676 0.0113985 20.955C-0.0299016 21.3423 0.0415576 21.7333 0.217184 22.081C0.39281 22.4287 0.665128 22.7183 1.00139 22.9149L23.1454 35.7899C23.487 35.9886 23.8794 36.0828 24.274 36.0608C24.6686 36.0388 25.0481 35.9014 25.3654 35.6659L31.5894 31.0439L26.9674 37.2679C26.7318 37.5852 26.5944 37.9646 26.5722 38.3591C26.5499 38.7537 26.6439 39.1461 26.8424 39.4879L39.7174 61.6289C39.9138 61.9652 40.2031 62.2377 40.5506 62.4135C40.8981 62.5894 41.289 62.6611 41.6763 62.6201C42.0636 62.5791 42.4308 62.4272 42.7338 62.1825C43.0369 61.9378 43.2628 61.6108 43.3844 61.2409L62.5294 2.65187C62.6458 2.29686 62.6615 1.91654 62.5749 1.55313C62.4883 1.18971 62.3026 0.857401 62.0386 0.593071C61.7746 0.328741 61.4425 0.142726 61.0792 0.0556665C60.7159 -0.0313933 60.3355 -0.0160937 59.9804 0.0998676ZM40.9434 55.6999L31.0014 38.6069L42.9894 22.4689C43.2797 22.0798 43.4202 21.5993 43.3852 21.1152C43.3502 20.631 43.142 20.1757 42.7988 19.8325C42.4556 19.4893 42.0002 19.2811 41.5161 19.2461C41.032 19.2111 40.5514 19.3516 40.1624 19.6419L24.0254 31.6279L6.93339 21.6889L57.4514 5.18087L40.9434 55.6999ZM21.2134 44.2759L7.80139 57.6909C7.42253 58.0701 6.90853 58.2833 6.37246 58.2836C5.83638 58.2839 5.32215 58.0712 4.94289 57.6924C4.56363 57.3135 4.35041 56.7995 4.35013 56.2634C4.34985 55.7274 4.56253 55.2131 4.94139 54.8339L18.3564 41.4189C18.7353 41.04 19.2491 40.8272 19.7849 40.8272C20.3207 40.8272 20.8345 41.04 21.2134 41.4189C21.5923 41.7977 21.8051 42.3116 21.8051 42.8474C21.8051 43.3832 21.5923 43.897 21.2134 44.2759ZM3.49139 44.7839C3.30378 44.5963 3.15495 44.3736 3.05341 44.1285C2.95187 43.8834 2.89961 43.6207 2.89961 43.3554C2.89961 43.0901 2.95187 42.8274 3.05341 42.5823C3.15495 42.3371 3.30378 42.1144 3.49139 41.9269L8.78439 36.6339C9.16326 36.255 9.6771 36.0422 10.2129 36.0422C10.7487 36.0422 11.2625 36.255 11.6414 36.6339C12.0203 37.0127 12.2331 37.5266 12.2331 38.0624C12.2331 38.5982 12.0203 39.112 11.6414 39.4909L6.34939 44.7839C6.1618 44.9716 5.93903 45.1206 5.69384 45.2222C5.44864 45.3238 5.18582 45.3762 4.92039 45.3762C4.65497 45.3762 4.39215 45.3238 4.14695 45.2222C3.90176 45.1206 3.67899 44.9716 3.49139 44.7839ZM26.0014 50.9899C26.189 51.1774 26.3378 51.4001 26.4394 51.6453C26.5409 51.8904 26.5932 52.1531 26.5932 52.4184C26.5932 52.6837 26.5409 52.9464 26.4394 53.1915C26.3378 53.4366 26.189 53.6593 26.0014 53.8469L20.7014 59.1409C20.3225 59.5197 19.8087 59.7326 19.2729 59.7326C18.7371 59.7326 18.2233 59.5197 17.8444 59.1409C17.4655 58.762 17.2527 58.2482 17.2527 57.7124C17.2527 57.1766 17.4655 56.6627 17.8444 56.2839L23.1374 50.9909C23.325 50.8032 23.5477 50.6544 23.7928 50.5529C24.0379 50.4513 24.3006 50.3991 24.5659 50.3991C24.8312 50.3991 25.0939 50.4513 25.339 50.5529C25.5841 50.6544 25.8068 50.8032 25.9944 50.9909L26.0014 50.9899Z\"\r\n            fill=\"#8E9AA0\"/>\r\n          <path\r\n            d=\"M58.0015 75.3119C69.0472 75.3119 78.0015 66.3576 78.0015 55.3119C78.0015 44.2662 69.0472 35.3119 58.0015 35.3119C46.9558 35.3119 38.0015 44.2662 38.0015 55.3119C38.0015 66.3576 46.9558 75.3119 58.0015 75.3119Z\"\r\n            fill=\"#00C48C\"/>\r\n          <path\r\n            d=\"M56.8804 57.3183L54.0346 54.4725L52.9743 55.5336L56.8774 59.4367L65.8354 50.5267L65.4927 50.0138C63.8557 47.5812 61.1134 46.002 58.0015 46.002C53.0313 46.002 49.0015 50.031 49.0015 55.002C49.0015 59.9729 53.0305 64.002 58.0015 64.002C62.9716 64.002 67.0007 59.9729 67.0015 55.0035H65.5017C65.5017 55.005 65.5017 55.0072 65.5017 55.0095C65.5017 59.1503 62.1453 62.5067 58.0045 62.5067C53.8637 62.5067 50.5072 59.1503 50.5072 55.0095C50.5072 50.8686 53.8637 47.5122 58.0045 47.5122C60.3793 47.5122 62.4962 48.6168 63.87 50.3392L63.882 50.3542L56.8804 57.3183Z\"\r\n            fill=\"white\"/>\r\n        </svg>\r\n\r\n      </div>\r\n      <h2 class=\"fs-16 fw-medium fc-black mb-4 text-center\">\r\n        {{ i18n.translate('submittedSuccessfully') }}\r\n      </h2>\r\n\r\n      <div class=\"info-section reverse w-100\">\r\n        <div class=\"info-item  px-3\">\r\n          <span class=\"name fs-16-imp\">{{ i18n.translate('formTableFormId') }}</span>\r\n          <span class=\"disc fs-16-imp\">\r\n              <a class=\"cursor-pointer fc-black underline\" (click)=\"viewForm(successData.id, successData?.['formName'])\">\r\n                  {{ successData.id }}\r\n              </a>\r\n          </span>\r\n        </div>\r\n        <div class=\"info-item  px-3\">\r\n          <span class=\"name fs-16-imp\">{{ i18n.translate('formTableFormStatus') }}</span>\r\n          <ds-status class=\"disc\" status=\"{{getStatus(successData?.status?.['key'])}}\">\r\n            {{ successData.status?.['value'] }}\r\n          </ds-status>\r\n        </div>\r\n        @if (successData?.status?.['key'] === 'PENDING') {\r\n          <div class=\"info-item  px-3\">\r\n            <div class=\"d-flex align-items-center mt-2\">\r\n              <div class=\"img-card circled-img small\">\r\n                <img\r\n                  [profileImageByEmail]=\"successData?.['nextApprover']?.['email']\" alt=\"\">\r\n              </div>\r\n              <div class=\"line-height-1 mx-2\">\r\n                <h5 class=\"fs-14 fw-bold fc-black mb-0\">{{ successData?.['nextApprover']?.['name'] }}</h5>\r\n                <span class=\"fs-12 text-color-dark-gray\">{{ successData?.['nextApprover']?.['email'] }}</span>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        }\r\n      </div>\r\n      @if (!coreService.isMobileApp()) {\r\n        <div class=\"d-flex align-items-center gap-3 mt-3\">\r\n          <ds-button>\r\n            <a class=\"inboxUri\" href=\"{{inboxUri}}\">\r\n              {{ i18n.translate('formTableBackToInbox') }}</a>\r\n          </ds-button>\r\n        </div>\r\n      }\r\n    </div>\r\n  </mat-dialog-content>\r\n</div>\r\n", styles: [".inboxUri{color:#fff!important}.inboxUri:hover{color:#ff375e!important}ds-button:hover a{color:#ff375e!important}\n"], dependencies: [{ kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: ProfileImageByEmailDirective, selector: "img[profileImageByEmail], ds-avatar[profileImageByEmail]", inputs: ["profileImageByEmail"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SubmitDialogComponent, decorators: [{
             type: Component,
@@ -1420,8 +1570,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                         MatDialogClose,
                         MatDialogContent,
                         NgIf,
-                        MatDialogTitle
-                    ], template: "<div class=\"popup-container\">\r\n  <div class=\"d-flex align-items-center justify-content-end\" mat-dialog-title>\r\n    <ds-button matDialogClose icon>\r\n      <ds-icon icon=\"close\" class=\"fs-20 fc-black\"></ds-icon>\r\n    </ds-button>\r\n  </div>\r\n  <mat-dialog-content>\r\n    <div class=\"d-flex flex-column align-items-center justify-content-center py-4\">\r\n      <div class=\"text-center mb-4\">\r\n        <svg width=\"79\" height=\"76\" viewBox=\"0 0 79 76\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n          <path\r\n            d=\"M59.9804 0.0998676L1.39239 19.2479C1.02223 19.3692 0.69498 19.5948 0.44999 19.8976C0.205 20.2005 0.0526985 20.5676 0.0113985 20.955C-0.0299016 21.3423 0.0415576 21.7333 0.217184 22.081C0.39281 22.4287 0.665128 22.7183 1.00139 22.9149L23.1454 35.7899C23.487 35.9886 23.8794 36.0828 24.274 36.0608C24.6686 36.0388 25.0481 35.9014 25.3654 35.6659L31.5894 31.0439L26.9674 37.2679C26.7318 37.5852 26.5944 37.9646 26.5722 38.3591C26.5499 38.7537 26.6439 39.1461 26.8424 39.4879L39.7174 61.6289C39.9138 61.9652 40.2031 62.2377 40.5506 62.4135C40.8981 62.5894 41.289 62.6611 41.6763 62.6201C42.0636 62.5791 42.4308 62.4272 42.7338 62.1825C43.0369 61.9378 43.2628 61.6108 43.3844 61.2409L62.5294 2.65187C62.6458 2.29686 62.6615 1.91654 62.5749 1.55313C62.4883 1.18971 62.3026 0.857401 62.0386 0.593071C61.7746 0.328741 61.4425 0.142726 61.0792 0.0556665C60.7159 -0.0313933 60.3355 -0.0160937 59.9804 0.0998676ZM40.9434 55.6999L31.0014 38.6069L42.9894 22.4689C43.2797 22.0798 43.4202 21.5993 43.3852 21.1152C43.3502 20.631 43.142 20.1757 42.7988 19.8325C42.4556 19.4893 42.0002 19.2811 41.5161 19.2461C41.032 19.2111 40.5514 19.3516 40.1624 19.6419L24.0254 31.6279L6.93339 21.6889L57.4514 5.18087L40.9434 55.6999ZM21.2134 44.2759L7.80139 57.6909C7.42253 58.0701 6.90853 58.2833 6.37246 58.2836C5.83638 58.2839 5.32215 58.0712 4.94289 57.6924C4.56363 57.3135 4.35041 56.7995 4.35013 56.2634C4.34985 55.7274 4.56253 55.2131 4.94139 54.8339L18.3564 41.4189C18.7353 41.04 19.2491 40.8272 19.7849 40.8272C20.3207 40.8272 20.8345 41.04 21.2134 41.4189C21.5923 41.7977 21.8051 42.3116 21.8051 42.8474C21.8051 43.3832 21.5923 43.897 21.2134 44.2759ZM3.49139 44.7839C3.30378 44.5963 3.15495 44.3736 3.05341 44.1285C2.95187 43.8834 2.89961 43.6207 2.89961 43.3554C2.89961 43.0901 2.95187 42.8274 3.05341 42.5823C3.15495 42.3371 3.30378 42.1144 3.49139 41.9269L8.78439 36.6339C9.16326 36.255 9.6771 36.0422 10.2129 36.0422C10.7487 36.0422 11.2625 36.255 11.6414 36.6339C12.0203 37.0127 12.2331 37.5266 12.2331 38.0624C12.2331 38.5982 12.0203 39.112 11.6414 39.4909L6.34939 44.7839C6.1618 44.9716 5.93903 45.1206 5.69384 45.2222C5.44864 45.3238 5.18582 45.3762 4.92039 45.3762C4.65497 45.3762 4.39215 45.3238 4.14695 45.2222C3.90176 45.1206 3.67899 44.9716 3.49139 44.7839ZM26.0014 50.9899C26.189 51.1774 26.3378 51.4001 26.4394 51.6453C26.5409 51.8904 26.5932 52.1531 26.5932 52.4184C26.5932 52.6837 26.5409 52.9464 26.4394 53.1915C26.3378 53.4366 26.189 53.6593 26.0014 53.8469L20.7014 59.1409C20.3225 59.5197 19.8087 59.7326 19.2729 59.7326C18.7371 59.7326 18.2233 59.5197 17.8444 59.1409C17.4655 58.762 17.2527 58.2482 17.2527 57.7124C17.2527 57.1766 17.4655 56.6627 17.8444 56.2839L23.1374 50.9909C23.325 50.8032 23.5477 50.6544 23.7928 50.5529C24.0379 50.4513 24.3006 50.3991 24.5659 50.3991C24.8312 50.3991 25.0939 50.4513 25.339 50.5529C25.5841 50.6544 25.8068 50.8032 25.9944 50.9909L26.0014 50.9899Z\"\r\n            fill=\"#8E9AA0\"/>\r\n          <path\r\n            d=\"M58.0015 75.3119C69.0472 75.3119 78.0015 66.3576 78.0015 55.3119C78.0015 44.2662 69.0472 35.3119 58.0015 35.3119C46.9558 35.3119 38.0015 44.2662 38.0015 55.3119C38.0015 66.3576 46.9558 75.3119 58.0015 75.3119Z\"\r\n            fill=\"#00C48C\"/>\r\n          <path\r\n            d=\"M56.8804 57.3183L54.0346 54.4725L52.9743 55.5336L56.8774 59.4367L65.8354 50.5267L65.4927 50.0138C63.8557 47.5812 61.1134 46.002 58.0015 46.002C53.0313 46.002 49.0015 50.031 49.0015 55.002C49.0015 59.9729 53.0305 64.002 58.0015 64.002C62.9716 64.002 67.0007 59.9729 67.0015 55.0035H65.5017C65.5017 55.005 65.5017 55.0072 65.5017 55.0095C65.5017 59.1503 62.1453 62.5067 58.0045 62.5067C53.8637 62.5067 50.5072 59.1503 50.5072 55.0095C50.5072 50.8686 53.8637 47.5122 58.0045 47.5122C60.3793 47.5122 62.4962 48.6168 63.87 50.3392L63.882 50.3542L56.8804 57.3183Z\"\r\n            fill=\"white\"/>\r\n        </svg>\r\n\r\n      </div>\r\n      <h2 class=\"fs-16 fw-medium fc-black mb-4 text-center\">\r\n        {{ i18n.translate('submittedSuccessfully') }}\r\n      </h2>\r\n\r\n      <div class=\"info-section reverse w-100\">\r\n        <div class=\"info-item  px-3\">\r\n          <span class=\"name fs-16-imp\">{{ i18n.translate('formTableFormId') }}</span>\r\n          <span class=\"disc fs-16-imp\">\r\n              <a class=\"cursor-pointer fc-black underline\" (click)=\"viewForm(successData.id, successData?.['formName'])\">\r\n                  {{ successData.id }}\r\n              </a>\r\n          </span>\r\n        </div>\r\n        <div class=\"info-item  px-3\">\r\n          <span class=\"name fs-16-imp\">{{ i18n.translate('formTableFormStatus') }}</span>\r\n          <ds-status class=\"disc\" status=\"{{getStatus(successData?.status?.['key'])}}\">\r\n            {{ successData.status?.['value'] }}\r\n          </ds-status>\r\n        </div>\r\n        @if (successData?.status?.['key'] === 'PENDING') {\r\n          <div class=\"info-item  px-3\">\r\n            <div class=\"d-flex align-items-center mt-2\">\r\n              <div class=\"img-card circled-img small\">\r\n                <img\r\n                  [src]=\"getImage(successData?.['nextApprover']?.['email'])\"\r\n                  onerror=\"this.onerror=null;this.src='assets/images/user.svg';\" alt=\"\">\r\n              </div>\r\n              <div class=\"line-height-1 mx-2\">\r\n                <h5 class=\"fs-14 fw-bold fc-black mb-0\">{{ successData?.['nextApprover']?.['name'] }}</h5>\r\n                <span class=\"fs-12 text-color-dark-gray\">{{ successData?.['nextApprover']?.['email'] }}</span>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        }\r\n      </div>\r\n      @if (!coreService.isMobileApp()) {\r\n        <div class=\"d-flex align-items-center gap-3 mt-3\">\r\n          <ds-button>\r\n            <a class=\"inboxUri\" href=\"{{inboxUri}}\">\r\n              {{ i18n.translate('formTableBackToInbox') }}</a>\r\n          </ds-button>\r\n        </div>\r\n      }\r\n    </div>\r\n  </mat-dialog-content>\r\n</div>\r\n", styles: [".inboxUri{color:#fff!important}.inboxUri:hover{color:#ff375e!important}ds-button:hover a{color:#ff375e!important}\n"] }]
+                        MatDialogTitle,
+                        ProfileImageByEmailDirective
+                    ], template: "<div class=\"popup-container\">\r\n  <div class=\"d-flex align-items-center justify-content-end\" mat-dialog-title>\r\n    <ds-button matDialogClose icon>\r\n      <ds-icon icon=\"close\" class=\"fs-20 fc-black\"></ds-icon>\r\n    </ds-button>\r\n  </div>\r\n  <mat-dialog-content>\r\n    <div class=\"d-flex flex-column align-items-center justify-content-center py-4\">\r\n      <div class=\"text-center mb-4\">\r\n        <svg width=\"79\" height=\"76\" viewBox=\"0 0 79 76\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n          <path\r\n            d=\"M59.9804 0.0998676L1.39239 19.2479C1.02223 19.3692 0.69498 19.5948 0.44999 19.8976C0.205 20.2005 0.0526985 20.5676 0.0113985 20.955C-0.0299016 21.3423 0.0415576 21.7333 0.217184 22.081C0.39281 22.4287 0.665128 22.7183 1.00139 22.9149L23.1454 35.7899C23.487 35.9886 23.8794 36.0828 24.274 36.0608C24.6686 36.0388 25.0481 35.9014 25.3654 35.6659L31.5894 31.0439L26.9674 37.2679C26.7318 37.5852 26.5944 37.9646 26.5722 38.3591C26.5499 38.7537 26.6439 39.1461 26.8424 39.4879L39.7174 61.6289C39.9138 61.9652 40.2031 62.2377 40.5506 62.4135C40.8981 62.5894 41.289 62.6611 41.6763 62.6201C42.0636 62.5791 42.4308 62.4272 42.7338 62.1825C43.0369 61.9378 43.2628 61.6108 43.3844 61.2409L62.5294 2.65187C62.6458 2.29686 62.6615 1.91654 62.5749 1.55313C62.4883 1.18971 62.3026 0.857401 62.0386 0.593071C61.7746 0.328741 61.4425 0.142726 61.0792 0.0556665C60.7159 -0.0313933 60.3355 -0.0160937 59.9804 0.0998676ZM40.9434 55.6999L31.0014 38.6069L42.9894 22.4689C43.2797 22.0798 43.4202 21.5993 43.3852 21.1152C43.3502 20.631 43.142 20.1757 42.7988 19.8325C42.4556 19.4893 42.0002 19.2811 41.5161 19.2461C41.032 19.2111 40.5514 19.3516 40.1624 19.6419L24.0254 31.6279L6.93339 21.6889L57.4514 5.18087L40.9434 55.6999ZM21.2134 44.2759L7.80139 57.6909C7.42253 58.0701 6.90853 58.2833 6.37246 58.2836C5.83638 58.2839 5.32215 58.0712 4.94289 57.6924C4.56363 57.3135 4.35041 56.7995 4.35013 56.2634C4.34985 55.7274 4.56253 55.2131 4.94139 54.8339L18.3564 41.4189C18.7353 41.04 19.2491 40.8272 19.7849 40.8272C20.3207 40.8272 20.8345 41.04 21.2134 41.4189C21.5923 41.7977 21.8051 42.3116 21.8051 42.8474C21.8051 43.3832 21.5923 43.897 21.2134 44.2759ZM3.49139 44.7839C3.30378 44.5963 3.15495 44.3736 3.05341 44.1285C2.95187 43.8834 2.89961 43.6207 2.89961 43.3554C2.89961 43.0901 2.95187 42.8274 3.05341 42.5823C3.15495 42.3371 3.30378 42.1144 3.49139 41.9269L8.78439 36.6339C9.16326 36.255 9.6771 36.0422 10.2129 36.0422C10.7487 36.0422 11.2625 36.255 11.6414 36.6339C12.0203 37.0127 12.2331 37.5266 12.2331 38.0624C12.2331 38.5982 12.0203 39.112 11.6414 39.4909L6.34939 44.7839C6.1618 44.9716 5.93903 45.1206 5.69384 45.2222C5.44864 45.3238 5.18582 45.3762 4.92039 45.3762C4.65497 45.3762 4.39215 45.3238 4.14695 45.2222C3.90176 45.1206 3.67899 44.9716 3.49139 44.7839ZM26.0014 50.9899C26.189 51.1774 26.3378 51.4001 26.4394 51.6453C26.5409 51.8904 26.5932 52.1531 26.5932 52.4184C26.5932 52.6837 26.5409 52.9464 26.4394 53.1915C26.3378 53.4366 26.189 53.6593 26.0014 53.8469L20.7014 59.1409C20.3225 59.5197 19.8087 59.7326 19.2729 59.7326C18.7371 59.7326 18.2233 59.5197 17.8444 59.1409C17.4655 58.762 17.2527 58.2482 17.2527 57.7124C17.2527 57.1766 17.4655 56.6627 17.8444 56.2839L23.1374 50.9909C23.325 50.8032 23.5477 50.6544 23.7928 50.5529C24.0379 50.4513 24.3006 50.3991 24.5659 50.3991C24.8312 50.3991 25.0939 50.4513 25.339 50.5529C25.5841 50.6544 25.8068 50.8032 25.9944 50.9909L26.0014 50.9899Z\"\r\n            fill=\"#8E9AA0\"/>\r\n          <path\r\n            d=\"M58.0015 75.3119C69.0472 75.3119 78.0015 66.3576 78.0015 55.3119C78.0015 44.2662 69.0472 35.3119 58.0015 35.3119C46.9558 35.3119 38.0015 44.2662 38.0015 55.3119C38.0015 66.3576 46.9558 75.3119 58.0015 75.3119Z\"\r\n            fill=\"#00C48C\"/>\r\n          <path\r\n            d=\"M56.8804 57.3183L54.0346 54.4725L52.9743 55.5336L56.8774 59.4367L65.8354 50.5267L65.4927 50.0138C63.8557 47.5812 61.1134 46.002 58.0015 46.002C53.0313 46.002 49.0015 50.031 49.0015 55.002C49.0015 59.9729 53.0305 64.002 58.0015 64.002C62.9716 64.002 67.0007 59.9729 67.0015 55.0035H65.5017C65.5017 55.005 65.5017 55.0072 65.5017 55.0095C65.5017 59.1503 62.1453 62.5067 58.0045 62.5067C53.8637 62.5067 50.5072 59.1503 50.5072 55.0095C50.5072 50.8686 53.8637 47.5122 58.0045 47.5122C60.3793 47.5122 62.4962 48.6168 63.87 50.3392L63.882 50.3542L56.8804 57.3183Z\"\r\n            fill=\"white\"/>\r\n        </svg>\r\n\r\n      </div>\r\n      <h2 class=\"fs-16 fw-medium fc-black mb-4 text-center\">\r\n        {{ i18n.translate('submittedSuccessfully') }}\r\n      </h2>\r\n\r\n      <div class=\"info-section reverse w-100\">\r\n        <div class=\"info-item  px-3\">\r\n          <span class=\"name fs-16-imp\">{{ i18n.translate('formTableFormId') }}</span>\r\n          <span class=\"disc fs-16-imp\">\r\n              <a class=\"cursor-pointer fc-black underline\" (click)=\"viewForm(successData.id, successData?.['formName'])\">\r\n                  {{ successData.id }}\r\n              </a>\r\n          </span>\r\n        </div>\r\n        <div class=\"info-item  px-3\">\r\n          <span class=\"name fs-16-imp\">{{ i18n.translate('formTableFormStatus') }}</span>\r\n          <ds-status class=\"disc\" status=\"{{getStatus(successData?.status?.['key'])}}\">\r\n            {{ successData.status?.['value'] }}\r\n          </ds-status>\r\n        </div>\r\n        @if (successData?.status?.['key'] === 'PENDING') {\r\n          <div class=\"info-item  px-3\">\r\n            <div class=\"d-flex align-items-center mt-2\">\r\n              <div class=\"img-card circled-img small\">\r\n                <img\r\n                  [profileImageByEmail]=\"successData?.['nextApprover']?.['email']\" alt=\"\">\r\n              </div>\r\n              <div class=\"line-height-1 mx-2\">\r\n                <h5 class=\"fs-14 fw-bold fc-black mb-0\">{{ successData?.['nextApprover']?.['name'] }}</h5>\r\n                <span class=\"fs-12 text-color-dark-gray\">{{ successData?.['nextApprover']?.['email'] }}</span>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        }\r\n      </div>\r\n      @if (!coreService.isMobileApp()) {\r\n        <div class=\"d-flex align-items-center gap-3 mt-3\">\r\n          <ds-button>\r\n            <a class=\"inboxUri\" href=\"{{inboxUri}}\">\r\n              {{ i18n.translate('formTableBackToInbox') }}</a>\r\n          </ds-button>\r\n        </div>\r\n      }\r\n    </div>\r\n  </mat-dialog-content>\r\n</div>\r\n", styles: [".inboxUri{color:#fff!important}.inboxUri:hover{color:#ff375e!important}ds-button:hover a{color:#ff375e!important}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -2168,14 +2319,11 @@ class InfoItemComponent {
     viewForm(url) {
         window.open('/group/i-gate/wm-bpm/forms?formId=' + url);
     }
-    getImage(email) {
-        return '/group/i-gate/wm-bpm/forms/-/proxy/portrait?email=' + email;
-    }
     getDate(date) {
         return format(new Date(date), "dd/MM/yyyy");
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: InfoItemComponent, deps: [{ token: CoreI18nService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: InfoItemComponent, isStandalone: true, selector: "app-info-item", inputs: { label: "label", value: "value", name: "name", type: "type", dateType: "dateType", multiple: "multiple", insideTable: "insideTable", hasLabel: "hasLabel", arrayList: "arrayList", actionType: "actionType", download: "download" }, ngImport: i0, template: "<ng-container [ngSwitch]=\"type\">\r\n  @if(label){\r\n    <span class=\"name \">{{ label }}</span>\r\n  }\r\n\r\n  <!-- class=\"disc\" -->\r\n  <span *ngSwitchCase=\"'attach'\">\r\n<!--    <app-docs-uploader [field]=\"value\" styleHeight=\"mini\" display=\"only-files\"></app-docs-uploader>-->\r\n  </span>\r\n  <span class=\"disc mt-2 \" *ngSwitchCase=\"'user-picker'\">\r\n    @if(!multiple){\r\n      <div class=\"d-flex align-items-center\">\r\n        <div class=\"img-card circled-img small\">\r\n          <img [src]=\"getImage(value)\" onerror=\"this.onerror=null;this.src='assets/images/user.svg';\" alt=\"\">\r\n        </div>\r\n        <div class=\"line-height-1 mx-2\" [ngClass]=\"{'flex-grow-1': actionType === 'delete'}\">\r\n          <h6 class=\"fs-14 fw-bold fc-onyx mb-0\">{{name}}</h6>\r\n          <span class=\"fs-12 fc-dark-gray\">{{value}}</span>\r\n        </div>\r\n      </div>\r\n    }\r\n\r\n    @if(multiple){\r\n      @if(multiple){\r\n        <ng-container>\r\n            @for (emails of arrayList; track $index; let ind = $index) {\r\n          <div class=\"d-flex flex-wrap\">\r\n              <ng-container>\r\n                <div class=\"img-card circled-img small mb-3\">\r\n                  <img [src]=\"getImage(value)\" onerror=\"this.onerror=null;this.src='assets/images/user.svg';\" alt=\"\">\r\n                </div>\r\n                <div class=\"line-height-1 mx-2 mb-3\" [ngClass]=\"{'flex-grow-1': actionType === 'delete'}\">\r\n                  <h6 class=\"fs-14 fw-bold fc-onyx mb-0\"> {{(emails?.['personName'])}}</h6>\r\n                  <span class=\"fs-12 fc-dark-gray\"> {{emails?.['personEmail']}}</span>\r\n                </div>\r\n              </ng-container>\r\n          </div>\r\n            }\r\n        </ng-container>\r\n      }\r\n    }\r\n  </span>\r\n\r\n  <span class=\"disc\" *ngSwitchCase=\"'toggle'\">\r\n    <mat-slide-toggle [checked]=\"value\"></mat-slide-toggle>\r\n  </span>\r\n\r\n  <span class=\"disc\" *ngSwitchCase=\"'toggleBtn'\">\r\n    <span>{{value}}</span>\r\n  </span>\r\n  <span class=\"disc\" *ngSwitchCase=\"'telephone'\">\r\n    <div class=\"d-flex align-items-center\">\r\n      <bdi>{{ value }}</bdi>\r\n    </div>\r\n  </span>\r\n\r\n  <span class=\"disc\" *ngSwitchCase=\"'currency'\">\r\n    <span>{{value  | number:'1.2-2'}}</span>\r\n  </span>\r\n\r\n  <span class=\"disc\" *ngSwitchCase=\"'date'\">\r\n    @if(dateType === 'hijri'){\r\n      <span>\r\n        {{ value }}\r\n      </span>\r\n    }\r\n   @if(dateType === 'yearOnly'){\r\n    <span>\r\n      {{ value }}\r\n    </span>\r\n   }\r\n@if(dateType !== 'hijri' && dateType !== 'yearOnly' && !value?.startDate){\r\n  <span>\r\n    {{value  | date :'dd/MM/yyyy' : 'GMT+3'}}\r\n<!--    {{ getDate(value) }}-->\r\n  </span>\r\n}\r\n  @if(dateType !== 'hijri' && dateType !== 'yearOnly' && value?.startDate){\r\n    <span>\r\n      {{value?.['startDate']  | date :'dd/MM/yyyy'}}\r\n      -\r\n      {{value?.['endDate']  | date :'dd/MM/yyyy'}}\r\n    </span>\r\n  }\r\n\r\n  </span>\r\n\r\n  <span class=\"disc\" *ngSwitchCase=\"'dateHijri'\">\r\n    {{ value }}\r\n  </span>\r\n\r\n  <span class=\"disc breakLine fc-coral cursor-pointer\" *ngSwitchCase=\"'link'\">\r\n    <a [href]=\"value\" target=\"_blank\">{{'View' | translate}} {{ label }} </a>\r\n  </span>\r\n  <span class=\"disc breakLine\" *ngSwitchCase=\"'formIdLink'\">\r\n    <a (click)=\"viewForm(value)\">{{ value }} </a>\r\n  </span>\r\n  <span [ngClass]=\"{'breakLine': !insideTable}\" class=\"disc \" *ngSwitchCase=\"'text'\">\r\n    {{ value }}\r\n  </span>\r\n  <span [ngClass]=\"{'breakLine': !insideTable}\" class=\"disc \"  *ngSwitchCase=\"'multipleSelect'\">\r\n    @for(item of value; track $index; let i =$index){\r\n      <span>{{item.value}}\r\n        @if(!(i === value.length-1)){\r\n          <span>, </span>\r\n        }\r\n    </span>\r\n    }\r\n\r\n  </span>\r\n  <span [ngClass]=\"{'breakLine': !insideTable}\" class=\"disc \" *ngSwitchCase=\"'time'\">\r\n    {{ value | date : 'shortTime' : 'GMT+3' }}\r\n  </span>\r\n  <span [ngClass]=\"{'breakLine': !insideTable}\" class=\"disc \" [innerHTML]=\"value\" *ngSwitchDefault>\r\n  </span>\r\n</ng-container>\r\n", styles: [":host.slide-end .disc{text-align:end}:host.user-picker{border-radius:4px;padding:1rem;background-color:var(--light-gray);max-width:320px;width:100%}:host.user-picker .name{display:none}:host.user-picker .disc{width:100%}.name{width:270px;font-size:.875rem;font-weight:var(--font-medium);color:var(--dark-gray);margin-bottom:0;display:inline-block}.disc{width:calc(100% - 270px);font-size:.875rem;font-weight:var(--font-regular);color:var(--black);display:inline-block}@media (max-width: 768px){.name,.disc{width:100%!important}}.breakLine{line-break:anywhere}a{color:#0d6efd!important}a:hover{cursor:pointer}\n"], dependencies: [{ 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", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: InfoItemComponent, isStandalone: true, selector: "app-info-item", inputs: { label: "label", value: "value", name: "name", type: "type", dateType: "dateType", multiple: "multiple", insideTable: "insideTable", hasLabel: "hasLabel", arrayList: "arrayList", actionType: "actionType", download: "download" }, ngImport: i0, template: "<ng-container [ngSwitch]=\"type\">\r\n  @if(label){\r\n    <span class=\"name \">{{ label }}</span>\r\n  }\r\n\r\n  <!-- class=\"disc\" -->\r\n  <span *ngSwitchCase=\"'attach'\">\r\n<!--    <app-docs-uploader [field]=\"value\" styleHeight=\"mini\" display=\"only-files\"></app-docs-uploader>-->\r\n  </span>\r\n  <span class=\"disc mt-2 \" *ngSwitchCase=\"'user-picker'\">\r\n    @if(!multiple){\r\n      <div class=\"d-flex align-items-center\">\r\n        <div class=\"img-card circled-img small\">\r\n          <img [profileImageByEmail]=\"value\" alt=\"\">\r\n        </div>\r\n        <div class=\"line-height-1 mx-2\" [ngClass]=\"{'flex-grow-1': actionType === 'delete'}\">\r\n          <h6 class=\"fs-14 fw-bold fc-onyx mb-0\">{{name}}</h6>\r\n          <span class=\"fs-12 fc-dark-gray\">{{value}}</span>\r\n        </div>\r\n      </div>\r\n    }\r\n\r\n    @if(multiple){\r\n      @if(multiple){\r\n        <ng-container>\r\n            @for (emails of arrayList; track $index; let ind = $index) {\r\n          <div class=\"d-flex flex-wrap\">\r\n              <ng-container>\r\n                <div class=\"img-card circled-img small mb-3\">\r\n                  <img [profileImageByEmail]=\"emails?.['personEmail']\"  alt=\"\">\r\n                </div>\r\n                <div class=\"line-height-1 mx-2 mb-3\" [ngClass]=\"{'flex-grow-1': actionType === 'delete'}\">\r\n                  <h6 class=\"fs-14 fw-bold fc-onyx mb-0\"> {{(emails?.['personName'])}}</h6>\r\n                  <span class=\"fs-12 fc-dark-gray\"> {{emails?.['personEmail']}}</span>\r\n                </div>\r\n              </ng-container>\r\n          </div>\r\n            }\r\n        </ng-container>\r\n      }\r\n    }\r\n  </span>\r\n\r\n  <span class=\"disc\" *ngSwitchCase=\"'toggle'\">\r\n    <mat-slide-toggle [checked]=\"value\"></mat-slide-toggle>\r\n  </span>\r\n\r\n  <span class=\"disc\" *ngSwitchCase=\"'toggleBtn'\">\r\n    <span>{{value}}</span>\r\n  </span>\r\n  <span class=\"disc\" *ngSwitchCase=\"'telephone'\">\r\n    <div class=\"d-flex align-items-center\">\r\n      <bdi>{{ value }}</bdi>\r\n    </div>\r\n  </span>\r\n\r\n  <span class=\"disc\" *ngSwitchCase=\"'currency'\">\r\n    <span>{{value  | number:'1.2-2'}}</span>\r\n  </span>\r\n\r\n  <span class=\"disc\" *ngSwitchCase=\"'date'\">\r\n    @if(dateType === 'hijri'){\r\n      <span>\r\n        {{ value }}\r\n      </span>\r\n    }\r\n   @if(dateType === 'yearOnly'){\r\n    <span>\r\n      {{ value }}\r\n    </span>\r\n   }\r\n@if(dateType !== 'hijri' && dateType !== 'yearOnly' && !value?.startDate){\r\n  <span>\r\n    {{value  | date :'dd/MM/yyyy' : 'GMT+3'}}\r\n<!--    {{ getDate(value) }}-->\r\n  </span>\r\n}\r\n  @if(dateType !== 'hijri' && dateType !== 'yearOnly' && value?.startDate){\r\n    <span>\r\n      {{value?.['startDate']  | date :'dd/MM/yyyy'}}\r\n      -\r\n      {{value?.['endDate']  | date :'dd/MM/yyyy'}}\r\n    </span>\r\n  }\r\n\r\n  </span>\r\n\r\n  <span class=\"disc\" *ngSwitchCase=\"'dateHijri'\">\r\n    {{ value }}\r\n  </span>\r\n\r\n  <span class=\"disc breakLine fc-coral cursor-pointer\" *ngSwitchCase=\"'link'\">\r\n    <a [href]=\"value\" target=\"_blank\">{{'View' | translate}} {{ label }} </a>\r\n  </span>\r\n  <span class=\"disc breakLine\" *ngSwitchCase=\"'formIdLink'\">\r\n    <a (click)=\"viewForm(value)\">{{ value }} </a>\r\n  </span>\r\n  <span [ngClass]=\"{'breakLine': !insideTable}\" class=\"disc \" *ngSwitchCase=\"'text'\">\r\n    {{ value }}\r\n  </span>\r\n  <span [ngClass]=\"{'breakLine': !insideTable}\" class=\"disc \"  *ngSwitchCase=\"'multipleSelect'\">\r\n    @for(item of value; track $index; let i =$index){\r\n      <span>{{item.value}}\r\n        @if(!(i === value.length-1)){\r\n          <span>, </span>\r\n        }\r\n    </span>\r\n    }\r\n\r\n  </span>\r\n  <span [ngClass]=\"{'breakLine': !insideTable}\" class=\"disc \" *ngSwitchCase=\"'time'\">\r\n    {{ value | date : 'shortTime' : 'GMT+3' }}\r\n  </span>\r\n  <span [ngClass]=\"{'breakLine': !insideTable}\" class=\"disc \" [innerHTML]=\"value\" *ngSwitchDefault>\r\n  </span>\r\n</ng-container>\r\n", styles: [":host.slide-end .disc{text-align:end}:host.user-picker{border-radius:4px;padding:1rem;background-color:var(--light-gray);max-width:320px;width:100%}:host.user-picker .name{display:none}:host.user-picker .disc{width:100%}.name{width:270px;font-size:.875rem;font-weight:var(--font-medium);color:var(--dark-gray);margin-bottom:0;display:inline-block}.disc{width:calc(100% - 270px);font-size:.875rem;font-weight:var(--font-regular);color:var(--black);display:inline-block}@media (max-width: 768px){.name,.disc{width:100%!important}}.breakLine{line-break:anywhere}a{color:#0d6efd!important}a:hover{cursor:pointer}\n"], dependencies: [{ 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", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "directive", type: ProfileImageByEmailDirective, selector: "img[profileImageByEmail], ds-avatar[profileImageByEmail]", inputs: ["profileImageByEmail"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: InfoItemComponent, decorators: [{
             type: Component,
@@ -2187,8 +2335,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                         NgClass,
                         NgSwitchDefault,
                         NgSwitch,
-                        TranslatePipe
-                    ], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<ng-container [ngSwitch]=\"type\">\r\n  @if(label){\r\n    <span class=\"name \">{{ label }}</span>\r\n  }\r\n\r\n  <!-- class=\"disc\" -->\r\n  <span *ngSwitchCase=\"'attach'\">\r\n<!--    <app-docs-uploader [field]=\"value\" styleHeight=\"mini\" display=\"only-files\"></app-docs-uploader>-->\r\n  </span>\r\n  <span class=\"disc mt-2 \" *ngSwitchCase=\"'user-picker'\">\r\n    @if(!multiple){\r\n      <div class=\"d-flex align-items-center\">\r\n        <div class=\"img-card circled-img small\">\r\n          <img [src]=\"getImage(value)\" onerror=\"this.onerror=null;this.src='assets/images/user.svg';\" alt=\"\">\r\n        </div>\r\n        <div class=\"line-height-1 mx-2\" [ngClass]=\"{'flex-grow-1': actionType === 'delete'}\">\r\n          <h6 class=\"fs-14 fw-bold fc-onyx mb-0\">{{name}}</h6>\r\n          <span class=\"fs-12 fc-dark-gray\">{{value}}</span>\r\n        </div>\r\n      </div>\r\n    }\r\n\r\n    @if(multiple){\r\n      @if(multiple){\r\n        <ng-container>\r\n            @for (emails of arrayList; track $index; let ind = $index) {\r\n          <div class=\"d-flex flex-wrap\">\r\n              <ng-container>\r\n                <div class=\"img-card circled-img small mb-3\">\r\n                  <img [src]=\"getImage(value)\" onerror=\"this.onerror=null;this.src='assets/images/user.svg';\" alt=\"\">\r\n                </div>\r\n                <div class=\"line-height-1 mx-2 mb-3\" [ngClass]=\"{'flex-grow-1': actionType === 'delete'}\">\r\n                  <h6 class=\"fs-14 fw-bold fc-onyx mb-0\"> {{(emails?.['personName'])}}</h6>\r\n                  <span class=\"fs-12 fc-dark-gray\"> {{emails?.['personEmail']}}</span>\r\n                </div>\r\n              </ng-container>\r\n          </div>\r\n            }\r\n        </ng-container>\r\n      }\r\n    }\r\n  </span>\r\n\r\n  <span class=\"disc\" *ngSwitchCase=\"'toggle'\">\r\n    <mat-slide-toggle [checked]=\"value\"></mat-slide-toggle>\r\n  </span>\r\n\r\n  <span class=\"disc\" *ngSwitchCase=\"'toggleBtn'\">\r\n    <span>{{value}}</span>\r\n  </span>\r\n  <span class=\"disc\" *ngSwitchCase=\"'telephone'\">\r\n    <div class=\"d-flex align-items-center\">\r\n      <bdi>{{ value }}</bdi>\r\n    </div>\r\n  </span>\r\n\r\n  <span class=\"disc\" *ngSwitchCase=\"'currency'\">\r\n    <span>{{value  | number:'1.2-2'}}</span>\r\n  </span>\r\n\r\n  <span class=\"disc\" *ngSwitchCase=\"'date'\">\r\n    @if(dateType === 'hijri'){\r\n      <span>\r\n        {{ value }}\r\n      </span>\r\n    }\r\n   @if(dateType === 'yearOnly'){\r\n    <span>\r\n      {{ value }}\r\n    </span>\r\n   }\r\n@if(dateType !== 'hijri' && dateType !== 'yearOnly' && !value?.startDate){\r\n  <span>\r\n    {{value  | date :'dd/MM/yyyy' : 'GMT+3'}}\r\n<!--    {{ getDate(value) }}-->\r\n  </span>\r\n}\r\n  @if(dateType !== 'hijri' && dateType !== 'yearOnly' && value?.startDate){\r\n    <span>\r\n      {{value?.['startDate']  | date :'dd/MM/yyyy'}}\r\n      -\r\n      {{value?.['endDate']  | date :'dd/MM/yyyy'}}\r\n    </span>\r\n  }\r\n\r\n  </span>\r\n\r\n  <span class=\"disc\" *ngSwitchCase=\"'dateHijri'\">\r\n    {{ value }}\r\n  </span>\r\n\r\n  <span class=\"disc breakLine fc-coral cursor-pointer\" *ngSwitchCase=\"'link'\">\r\n    <a [href]=\"value\" target=\"_blank\">{{'View' | translate}} {{ label }} </a>\r\n  </span>\r\n  <span class=\"disc breakLine\" *ngSwitchCase=\"'formIdLink'\">\r\n    <a (click)=\"viewForm(value)\">{{ value }} </a>\r\n  </span>\r\n  <span [ngClass]=\"{'breakLine': !insideTable}\" class=\"disc \" *ngSwitchCase=\"'text'\">\r\n    {{ value }}\r\n  </span>\r\n  <span [ngClass]=\"{'breakLine': !insideTable}\" class=\"disc \"  *ngSwitchCase=\"'multipleSelect'\">\r\n    @for(item of value; track $index; let i =$index){\r\n      <span>{{item.value}}\r\n        @if(!(i === value.length-1)){\r\n          <span>, </span>\r\n        }\r\n    </span>\r\n    }\r\n\r\n  </span>\r\n  <span [ngClass]=\"{'breakLine': !insideTable}\" class=\"disc \" *ngSwitchCase=\"'time'\">\r\n    {{ value | date : 'shortTime' : 'GMT+3' }}\r\n  </span>\r\n  <span [ngClass]=\"{'breakLine': !insideTable}\" class=\"disc \" [innerHTML]=\"value\" *ngSwitchDefault>\r\n  </span>\r\n</ng-container>\r\n", styles: [":host.slide-end .disc{text-align:end}:host.user-picker{border-radius:4px;padding:1rem;background-color:var(--light-gray);max-width:320px;width:100%}:host.user-picker .name{display:none}:host.user-picker .disc{width:100%}.name{width:270px;font-size:.875rem;font-weight:var(--font-medium);color:var(--dark-gray);margin-bottom:0;display:inline-block}.disc{width:calc(100% - 270px);font-size:.875rem;font-weight:var(--font-regular);color:var(--black);display:inline-block}@media (max-width: 768px){.name,.disc{width:100%!important}}.breakLine{line-break:anywhere}a{color:#0d6efd!important}a:hover{cursor:pointer}\n"] }]
+                        TranslatePipe,
+                        ProfileImageByEmailDirective
+                    ], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<ng-container [ngSwitch]=\"type\">\r\n  @if(label){\r\n    <span class=\"name \">{{ label }}</span>\r\n  }\r\n\r\n  <!-- class=\"disc\" -->\r\n  <span *ngSwitchCase=\"'attach'\">\r\n<!--    <app-docs-uploader [field]=\"value\" styleHeight=\"mini\" display=\"only-files\"></app-docs-uploader>-->\r\n  </span>\r\n  <span class=\"disc mt-2 \" *ngSwitchCase=\"'user-picker'\">\r\n    @if(!multiple){\r\n      <div class=\"d-flex align-items-center\">\r\n        <div class=\"img-card circled-img small\">\r\n          <img [profileImageByEmail]=\"value\" alt=\"\">\r\n        </div>\r\n        <div class=\"line-height-1 mx-2\" [ngClass]=\"{'flex-grow-1': actionType === 'delete'}\">\r\n          <h6 class=\"fs-14 fw-bold fc-onyx mb-0\">{{name}}</h6>\r\n          <span class=\"fs-12 fc-dark-gray\">{{value}}</span>\r\n        </div>\r\n      </div>\r\n    }\r\n\r\n    @if(multiple){\r\n      @if(multiple){\r\n        <ng-container>\r\n            @for (emails of arrayList; track $index; let ind = $index) {\r\n          <div class=\"d-flex flex-wrap\">\r\n              <ng-container>\r\n                <div class=\"img-card circled-img small mb-3\">\r\n                  <img [profileImageByEmail]=\"emails?.['personEmail']\"  alt=\"\">\r\n                </div>\r\n                <div class=\"line-height-1 mx-2 mb-3\" [ngClass]=\"{'flex-grow-1': actionType === 'delete'}\">\r\n                  <h6 class=\"fs-14 fw-bold fc-onyx mb-0\"> {{(emails?.['personName'])}}</h6>\r\n                  <span class=\"fs-12 fc-dark-gray\"> {{emails?.['personEmail']}}</span>\r\n                </div>\r\n              </ng-container>\r\n          </div>\r\n            }\r\n        </ng-container>\r\n      }\r\n    }\r\n  </span>\r\n\r\n  <span class=\"disc\" *ngSwitchCase=\"'toggle'\">\r\n    <mat-slide-toggle [checked]=\"value\"></mat-slide-toggle>\r\n  </span>\r\n\r\n  <span class=\"disc\" *ngSwitchCase=\"'toggleBtn'\">\r\n    <span>{{value}}</span>\r\n  </span>\r\n  <span class=\"disc\" *ngSwitchCase=\"'telephone'\">\r\n    <div class=\"d-flex align-items-center\">\r\n      <bdi>{{ value }}</bdi>\r\n    </div>\r\n  </span>\r\n\r\n  <span class=\"disc\" *ngSwitchCase=\"'currency'\">\r\n    <span>{{value  | number:'1.2-2'}}</span>\r\n  </span>\r\n\r\n  <span class=\"disc\" *ngSwitchCase=\"'date'\">\r\n    @if(dateType === 'hijri'){\r\n      <span>\r\n        {{ value }}\r\n      </span>\r\n    }\r\n   @if(dateType === 'yearOnly'){\r\n    <span>\r\n      {{ value }}\r\n    </span>\r\n   }\r\n@if(dateType !== 'hijri' && dateType !== 'yearOnly' && !value?.startDate){\r\n  <span>\r\n    {{value  | date :'dd/MM/yyyy' : 'GMT+3'}}\r\n<!--    {{ getDate(value) }}-->\r\n  </span>\r\n}\r\n  @if(dateType !== 'hijri' && dateType !== 'yearOnly' && value?.startDate){\r\n    <span>\r\n      {{value?.['startDate']  | date :'dd/MM/yyyy'}}\r\n      -\r\n      {{value?.['endDate']  | date :'dd/MM/yyyy'}}\r\n    </span>\r\n  }\r\n\r\n  </span>\r\n\r\n  <span class=\"disc\" *ngSwitchCase=\"'dateHijri'\">\r\n    {{ value }}\r\n  </span>\r\n\r\n  <span class=\"disc breakLine fc-coral cursor-pointer\" *ngSwitchCase=\"'link'\">\r\n    <a [href]=\"value\" target=\"_blank\">{{'View' | translate}} {{ label }} </a>\r\n  </span>\r\n  <span class=\"disc breakLine\" *ngSwitchCase=\"'formIdLink'\">\r\n    <a (click)=\"viewForm(value)\">{{ value }} </a>\r\n  </span>\r\n  <span [ngClass]=\"{'breakLine': !insideTable}\" class=\"disc \" *ngSwitchCase=\"'text'\">\r\n    {{ value }}\r\n  </span>\r\n  <span [ngClass]=\"{'breakLine': !insideTable}\" class=\"disc \"  *ngSwitchCase=\"'multipleSelect'\">\r\n    @for(item of value; track $index; let i =$index){\r\n      <span>{{item.value}}\r\n        @if(!(i === value.length-1)){\r\n          <span>, </span>\r\n        }\r\n    </span>\r\n    }\r\n\r\n  </span>\r\n  <span [ngClass]=\"{'breakLine': !insideTable}\" class=\"disc \" *ngSwitchCase=\"'time'\">\r\n    {{ value | date : 'shortTime' : 'GMT+3' }}\r\n  </span>\r\n  <span [ngClass]=\"{'breakLine': !insideTable}\" class=\"disc \" [innerHTML]=\"value\" *ngSwitchDefault>\r\n  </span>\r\n</ng-container>\r\n", styles: [":host.slide-end .disc{text-align:end}:host.user-picker{border-radius:4px;padding:1rem;background-color:var(--light-gray);max-width:320px;width:100%}:host.user-picker .name{display:none}:host.user-picker .disc{width:100%}.name{width:270px;font-size:.875rem;font-weight:var(--font-medium);color:var(--dark-gray);margin-bottom:0;display:inline-block}.disc{width:calc(100% - 270px);font-size:.875rem;font-weight:var(--font-regular);color:var(--black);display:inline-block}@media (max-width: 768px){.name,.disc{width:100%!important}}.breakLine{line-break:anywhere}a{color:#0d6efd!important}a:hover{cursor:pointer}\n"] }]
         }], ctorParameters: () => [{ type: CoreI18nService }], propDecorators: { label: [{
                 type: Input
             }], value: [{
@@ -3630,9 +3779,6 @@ class SearchEmployeeComponent extends ControlValueAccessorDirective {
             return false;
         }
     }
-    getImage(id) {
-        return '/group/i-gate/wm-bpm/forms/-/proxy/portrait?email=' + id;
-    }
     selectOption(object, ev) {
         this.selectedEmployee.emit(object);
         if (!this.control.touched)
@@ -3676,7 +3822,7 @@ class SearchEmployeeComponent extends ControlValueAccessorDirective {
                 useExisting: forwardRef(() => SearchEmployeeComponent),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "@if (!isReadOnly) {\r\n<ng-container>\r\n  @if(label) {\r\n  <app-form-label\r\n    [label]=\"label\"\r\n    [optional]=\"required || mandatory ? false : true\"\r\n    [tooltip]=\"tooltip\"\r\n  ></app-form-label>\r\n  }\r\n  <mat-form-field\r\n    class=\"primary-form {{ className }}\"\r\n    [floatLabel]=\"floatLabel\"\r\n    [ngClass]=\"{\r\n    'custom-validation': !control?.errors\r\n   }\"\r\n  >\r\n    <mat-label>{{ label }}</mat-label>\r\n    <ds-icon icon=\"search\" class=\"fc-coral fs-18\"></ds-icon>\r\n    <label class=\"mat-form-content\">\r\n      <input\r\n        type=\"text\"\r\n        aria-label=\"Number\"\r\n        (input)=\"onLoadOptions($event)\"\r\n        matInput\r\n        [disabled]=\"isDisabled\"\r\n        [matAutocomplete]=\"auto\"\r\n        [formControl]=\"employeeSearchControl\"\r\n        [placeholder]=\"placeholder || (label ? ('select' | translate) + ' ' + label : '')\"\r\n      />\r\n    </label>\r\n    @if (loading) {\r\n    <span class=\"sfi sfi-spinner d-inline-block spin fc-coral\" matSuffix></span>\r\n    }\r\n    <mat-autocomplete #auto=\"matAutocomplete\">\r\n      @for (option of data; track option) {\r\n          <mat-option\r\n          [value]=\"option?.['personName']\"\r\n          (onSelectionChange)=\"selectOption(option, $event)\"\r\n        >\r\n          <div class=\"d-flex align-items-center gap-3\">\r\n            <div class=\"dropdown-img\">\r\n              <ds-avatar\r\n                [image]=\"getImage(option?.email)\"\r\n                onerror=\"this.onerror=null;this.src='assets/images/user.svg';\"\r\n                slot=\"prefix\"\r\n                class=\"avatar\"\r\n                size=\"small\"\r\n              >\r\n              </ds-avatar>\r\n            </div>\r\n            <div class=\"line-height-1\">\r\n              <h6 class=\"fs-14 fw-medium fc-onyx mb-0 line-height-1\">\r\n                {{ option?.name }}\r\n              </h6>\r\n              <span class=\"fs-13 fw-normal fc-dark-gray\">{{\r\n                option?.description\r\n              }}</span>\r\n            </div>\r\n          </div>\r\n        </mat-option>\r\n\r\n      }\r\n    </mat-autocomplete>\r\n    @if (showHint) {\r\n    <mat-hint>\r\n      <span\r\n        class=\"sfi sfi-check-circle font-10 fc-dark-gray\"\r\n        [ngClass]=\"{ 'fc-oasis-light-imp': value }\"\r\n      ></span>\r\n      <span class=\"mx-1\"></span>\r\n      <span class=\"fs-12 fc-onyx\">{{ hint }}</span>\r\n    </mat-hint>\r\n    }\r\n  </mat-form-field>\r\n  @if (control.touched) {\r\n    <mat-error \r\n      app-validation-errors \r\n      [errors]=\"control?.errors\" \r\n      [customErrorMessages]=\"customErrorMessages\">\r\n    </mat-error>\r\n  }\r\n\r\n  @if (userAlreadyExist) {\r\n  <mat-error class=\"mb-2\">{{ \"userAlreadyExist\" | translate }}</mat-error>\r\n  } @if (arrayList?.length && !isReadOnly && multiple) {\r\n  <div class=\"col-12 mt-2\">\r\n    <div class=\"example-list n-results\">\r\n      @for (emails of arrayList; track $index) {\r\n      <div class=\"example-box n-col px-3\" [ngClass]=\"{ 'mt-0': $index === 0 }\">\r\n        <div class=\"d-flex flex-grow-1 w-100\">\r\n          <div class=\"user-info flex-grow-1\">\r\n            <ds-avatar\r\n              [image]=\"getImage(emails?.['personEmail'])\"\r\n              onerror=\"this.onerror=null;this.src='assets/images/user.svg';\"\r\n              slot=\"prefix\"\r\n              class=\"avatar prof-img\"\r\n            >\r\n            </ds-avatar>\r\n            @if (emails?.['personName']) {\r\n            <label>\r\n              {{ emails?.['personName'] }}\r\n              <span class=\"title\">{{ emails?.['personEmail'] }}</span>\r\n            </label>\r\n            }\r\n          </div>\r\n          @if (!isReadOnly) {\r\n          <ds-button\r\n            class=\"ds-btn-action\"\r\n            size=\"small\"\r\n            (click)=\"deleteRow($index, emails)\"\r\n            icon\r\n          >\r\n            <ds-icon icon=\"trash\" class=\"fc-coral fs-20\"></ds-icon>\r\n          </ds-button>\r\n          }\r\n        </div>\r\n      </div>\r\n      }\r\n    </div>\r\n  </div>\r\n  }\r\n</ng-container>\r\n} @if (isReadOnly && control.value) {\r\n<ng-container>\r\n  <app-info-item\r\n    class=\"info-item\"\r\n    type=\"user-picker\"\r\n    [hasLabel]=\"!!label\"\r\n    [multiple]=\"multiple\"\r\n    [ngClass]=\"{ 'user-picker': !isReadOnly }\"\r\n    [actionType]=\"!isReadOnly ? 'delete' : 'edit'\"\r\n    [label]=\"label\"\r\n    [name]=\"control.value['personName']\"\r\n    [value]=\"control.value['personEmail']\"\r\n    [arrayList]=\"arrayList\"\r\n  >\r\n  </app-info-item>\r\n</ng-container>\r\n}\r\n\r\n<sat-popover #searchEmpPopover [hasBackdrop]=\"true\" verticalAlign=\"below\">\r\n  <div class=\"default-popover p-3\">\r\n    <ol class=\"px-3 m-0\">\r\n      <li>{{ \"searchEmployeeTooltip_1\" | translate }}</li>\r\n      <li>{{ \"searchEmployeeTooltip_2\" | translate }}</li>\r\n      <li>{{ \"searchEmployeeTooltip_3\" | translate }}</li>\r\n      <li>{{ \"searchEmployeeTooltip_4\" | translate }}</li>\r\n    </ol>\r\n  </div>\r\n</sat-popover>\r\n", styles: [".small-input~.btn{height:41px}:host{flex-grow:1}.agenda-list.inside .mat-list-item{display:flex;align-items:center;padding:0 1rem;background-color:#fff;border:1px solid silver;height:88px!important}.agenda-list.inside .mat-list-item:before{position:relative;left:auto;right:auto}.agenda-list .mat-list-item{height:66px!important;background-color:#d3d3d3;margin-bottom:1.5rem;cursor:move}.agenda-list .mat-list-item:hover:before{opacity:1}.agenda-list .mat-list-item:before{content:\"\\e928\";font-family:stc-font-icons;left:-1.5rem;color:#a9a9a9;position:absolute;font-size:1.5rem;opacity:0;transition:all .3s linear}[dir=rtl] .agenda-list .mat-list-item:before{left:auto;right:-1.5rem}.agenda-list .mat-list-item:last-child{margin-bottom:0}.example-list{width:500px;max-width:100%;border:solid 1px #ccc;min-height:60px;display:block;background:#fff;border-radius:0;overflow:hidden}.example-box{color:#000000de;display:flex;box-sizing:border-box;cursor:move;font-size:14px;position:relative;background-color:#f3f3f1;padding:18px;justify-content:space-between;align-items:flex-start;margin-top:10px;padding-inline-start:50px;border:0;flex-direction:column;width:100%}.example-box .user-info{display:flex;align-items:center}.example-box .user-info .drag-icon{position:absolute;left:18px;cursor:move}html[dir=rtl] .example-box .user-info .drag-icon{left:auto;right:18px}.example-box .user-info .prof-img{width:40px;height:40px;border-radius:50%;border:2px solid #fff;margin-inline-end:10px}.example-box .user-info label{font-size:13px;font-weight:500;color:#1d242d;flex-grow:1}.example-box .user-info label .title{display:block;color:#ff375e;font-size:9px}.example-box .user-info-reviewer{display:flex;gap:.5rem;width:calc(100% + 68px);padding:10px 15px;margin:10px 0 -18px -50px;background-color:#dde0e1}[dir=rtl] .example-box .user-info-reviewer{margin:10px -50px -18px 0}.example-box .user-info-reviewer .drag-icon{position:absolute;transform:translateY(-50%);cursor:move}.example-box .user-info-reviewer .reviewer-info{display:flex}.example-box .user-info-reviewer .reviewer-info .prof-img{width:20px;height:20px;border-radius:50%;border:1px solid #fff;margin:0 5px}.example-box .user-info-reviewer .reviewer-info label{font-size:11px;font-weight:500;color:#000;width:100px;margin-top:1px}.example-box .user-info-reviewer .reviewer-info label .title{display:block;color:#ff375e;font-size:11px}.example-box .user-info-reviewer span{color:#a54ee1;font-size:11px;padding:0;margin-bottom:0;display:block;text-align:start}.example-box .icon{width:30px;height:30px;background-color:#ff375e33;text-align:center;line-height:26px;cursor:pointer;flex-shrink:0}.cdk-drag-preview{box-sizing:border-box;border-radius:0;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;overflow:hidden}.cdk-drag-preview .icon{display:none}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.n-content{max-width:700px;width:100%}.n-results{width:100%;border:0;counter-reset:section}.n-results .n-col{position:relative;background-color:#f3f3f1;padding:10px;justify-content:space-between;align-items:flex-start;margin-top:10px;padding-inline-start:50px;border:0;flex-direction:column;width:100%}.n-results .n-col:last-child{margin-bottom:30px}.n-results .n-col:after,.n-results .n-col:before{display:none}@media (max-width: 991px){.example-box .user-info:before{margin-inline-end:10px;flex-shrink:0}}@media (max-width: 767px){.n-col{padding-inline-start:40px}.n-col .user-info-reviewer span{margin-bottom:0}}@media (max-width: 321px){.n-results .n-col{flex-wrap:wrap;justify-content:center}.n-results .n-col .user-info{justify-content:center}.n-results .n-col .user-info:before{position:absolute;top:15px;left:15px}.n-results .n-col .user-info .prof-img{margin:0 10px 10px}.n-results .n-col .user-info label{width:100%;text-align:center}.n-results .n-col .icon{width:100%}}::ng-deep .default-popover{max-width:320px;right:-2.5rem!important}[dir=rtl] ::ng-deep .default-popover{left:-2.5rem!important;right:auto}.dropdown-img{width:30px;height:30px;border-radius:50%;border:2px solid #fff}.dropdown-img .avatar--medium{--default-size: 30px}:host ::ng-deep .avatar{border:0 none!important}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { 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", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i1$4.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i1$4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i1$4.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: SatPopoverModule }, { kind: "component", type: i1$2.SatPopoverComponent, selector: "sat-popover", inputs: ["anchor", "horizontalAlign", "xAlign", "verticalAlign", "yAlign", "forceAlignment", "lockAlignment", "autoFocus", "restoreFocus", "scrollStrategy", "hasBackdrop", "interactiveClose", "openTransition", "closeTransition", "openAnimationStartAtScale", "closeAnimationEndAtScale", "backdropClass", "panelClass"], outputs: ["opened", "closed", "afterOpen", "afterClose", "backdropClicked", "overlayKeydown"] }, { kind: "component", type: FormLabelComponent, selector: "app-form-label", inputs: ["tooltip", "label", "optional"] }, { kind: "component", type: ValidationErrorsComponent, selector: "app-validation-errors,[app-validation-errors]", inputs: ["errors", "customErrorMessages"] }, { kind: "component", type: InfoItemComponent, selector: "app-info-item", inputs: ["label", "value", "name", "type", "dateType", "multiple", "insideTable", "hasLabel", "arrayList", "actionType", "download"] }, { kind: "ngmodule", type: i4.ReactiveFormsModule }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+        ], usesInheritance: true, ngImport: i0, template: "@if (!isReadOnly) {\r\n<ng-container>\r\n  @if(label) {\r\n  <app-form-label\r\n    [label]=\"label\"\r\n    [optional]=\"required || mandatory ? false : true\"\r\n    [tooltip]=\"tooltip\"\r\n  ></app-form-label>\r\n  }\r\n  <mat-form-field\r\n    class=\"primary-form {{ className }}\"\r\n    [floatLabel]=\"floatLabel\"\r\n    [ngClass]=\"{\r\n    'custom-validation': !control?.errors\r\n   }\"\r\n  >\r\n    <mat-label>{{ label }}</mat-label>\r\n    <ds-icon icon=\"search\" class=\"fc-coral fs-18\"></ds-icon>\r\n    <label class=\"mat-form-content\">\r\n      <input\r\n        type=\"text\"\r\n        aria-label=\"Number\"\r\n        (input)=\"onLoadOptions($event)\"\r\n        matInput\r\n        [disabled]=\"isDisabled\"\r\n        [matAutocomplete]=\"auto\"\r\n        [formControl]=\"employeeSearchControl\"\r\n        [placeholder]=\"placeholder || (label ? ('select' | translate) + ' ' + label : '')\"\r\n      />\r\n    </label>\r\n    @if (loading) {\r\n    <span class=\"sfi sfi-spinner d-inline-block spin fc-coral\" matSuffix></span>\r\n    }\r\n    <mat-autocomplete #auto=\"matAutocomplete\">\r\n      @for (option of data; track option) {\r\n          <mat-option\r\n          [value]=\"option?.['personName']\"\r\n          (onSelectionChange)=\"selectOption(option, $event)\"\r\n        >\r\n          <div class=\"d-flex align-items-center gap-3\">\r\n            <div class=\"dropdown-img\">\r\n              <ds-avatar\r\n                [profileImageByEmail]=\"option?.email\"\r\n                slot=\"prefix\"\r\n                class=\"avatar\"\r\n                size=\"small\"\r\n              >\r\n              </ds-avatar>\r\n            </div>\r\n            <div class=\"line-height-1\">\r\n              <h6 class=\"fs-14 fw-medium fc-onyx mb-0 line-height-1\">\r\n                {{ option?.name }}\r\n              </h6>\r\n              <span class=\"fs-13 fw-normal fc-dark-gray\">{{\r\n                option?.description\r\n              }}</span>\r\n            </div>\r\n          </div>\r\n        </mat-option>\r\n\r\n      }\r\n    </mat-autocomplete>\r\n    @if (showHint) {\r\n    <mat-hint>\r\n      <span\r\n        class=\"sfi sfi-check-circle font-10 fc-dark-gray\"\r\n        [ngClass]=\"{ 'fc-oasis-light-imp': value }\"\r\n      ></span>\r\n      <span class=\"mx-1\"></span>\r\n      <span class=\"fs-12 fc-onyx\">{{ hint }}</span>\r\n    </mat-hint>\r\n    }\r\n  </mat-form-field>\r\n  @if (control.touched) {\r\n    <mat-error \r\n      app-validation-errors \r\n      [errors]=\"control?.errors\" \r\n      [customErrorMessages]=\"customErrorMessages\">\r\n    </mat-error>\r\n  }\r\n\r\n  @if (userAlreadyExist) {\r\n  <mat-error class=\"mb-2\">{{ \"userAlreadyExist\" | translate }}</mat-error>\r\n  } @if (arrayList?.length && !isReadOnly && multiple) {\r\n  <div class=\"col-12 mt-2\">\r\n    <div class=\"example-list n-results\">\r\n      @for (emails of arrayList; track $index) {\r\n      <div class=\"example-box n-col px-3\" [ngClass]=\"{ 'mt-0': $index === 0 }\">\r\n        <div class=\"d-flex flex-grow-1 w-100\">\r\n          <div class=\"user-info flex-grow-1\">\r\n            <ds-avatar\r\n              [profileImageByEmail]=\"emails?.['personEmail']\"\r\n              slot=\"prefix\"\r\n              class=\"avatar prof-img\"\r\n            >\r\n            </ds-avatar>\r\n            @if (emails?.['personName']) {\r\n            <label>\r\n              {{ emails?.['personName'] }}\r\n              <span class=\"title\">{{ emails?.['personEmail'] }}</span>\r\n            </label>\r\n            }\r\n          </div>\r\n          @if (!isReadOnly) {\r\n          <ds-button\r\n            class=\"ds-btn-action\"\r\n            size=\"small\"\r\n            (click)=\"deleteRow($index, emails)\"\r\n            icon\r\n          >\r\n            <ds-icon icon=\"trash\" class=\"fc-coral fs-20\"></ds-icon>\r\n          </ds-button>\r\n          }\r\n        </div>\r\n      </div>\r\n      }\r\n    </div>\r\n  </div>\r\n  }\r\n</ng-container>\r\n} @if (isReadOnly && control.value) {\r\n<ng-container>\r\n  <app-info-item\r\n    class=\"info-item\"\r\n    type=\"user-picker\"\r\n    [hasLabel]=\"!!label\"\r\n    [multiple]=\"multiple\"\r\n    [ngClass]=\"{ 'user-picker': !isReadOnly }\"\r\n    [actionType]=\"!isReadOnly ? 'delete' : 'edit'\"\r\n    [label]=\"label\"\r\n    [name]=\"control.value['personName']\"\r\n    [value]=\"control.value['personEmail']\"\r\n    [arrayList]=\"arrayList\"\r\n  >\r\n  </app-info-item>\r\n</ng-container>\r\n}\r\n\r\n<sat-popover #searchEmpPopover [hasBackdrop]=\"true\" verticalAlign=\"below\">\r\n  <div class=\"default-popover p-3\">\r\n    <ol class=\"px-3 m-0\">\r\n      <li>{{ \"searchEmployeeTooltip_1\" | translate }}</li>\r\n      <li>{{ \"searchEmployeeTooltip_2\" | translate }}</li>\r\n      <li>{{ \"searchEmployeeTooltip_3\" | translate }}</li>\r\n      <li>{{ \"searchEmployeeTooltip_4\" | translate }}</li>\r\n    </ol>\r\n  </div>\r\n</sat-popover>\r\n", styles: [".small-input~.btn{height:41px}:host{flex-grow:1}.agenda-list.inside .mat-list-item{display:flex;align-items:center;padding:0 1rem;background-color:#fff;border:1px solid silver;height:88px!important}.agenda-list.inside .mat-list-item:before{position:relative;left:auto;right:auto}.agenda-list .mat-list-item{height:66px!important;background-color:#d3d3d3;margin-bottom:1.5rem;cursor:move}.agenda-list .mat-list-item:hover:before{opacity:1}.agenda-list .mat-list-item:before{content:\"\\e928\";font-family:stc-font-icons;left:-1.5rem;color:#a9a9a9;position:absolute;font-size:1.5rem;opacity:0;transition:all .3s linear}[dir=rtl] .agenda-list .mat-list-item:before{left:auto;right:-1.5rem}.agenda-list .mat-list-item:last-child{margin-bottom:0}.example-list{width:500px;max-width:100%;border:solid 1px #ccc;min-height:60px;display:block;background:#fff;border-radius:0;overflow:hidden}.example-box{color:#000000de;display:flex;box-sizing:border-box;cursor:move;font-size:14px;position:relative;background-color:#f3f3f1;padding:18px;justify-content:space-between;align-items:flex-start;margin-top:10px;padding-inline-start:50px;border:0;flex-direction:column;width:100%}.example-box .user-info{display:flex;align-items:center}.example-box .user-info .drag-icon{position:absolute;left:18px;cursor:move}html[dir=rtl] .example-box .user-info .drag-icon{left:auto;right:18px}.example-box .user-info .prof-img{width:40px;height:40px;border-radius:50%;border:2px solid #fff;margin-inline-end:10px}.example-box .user-info label{font-size:13px;font-weight:500;color:#1d242d;flex-grow:1}.example-box .user-info label .title{display:block;color:#ff375e;font-size:9px}.example-box .user-info-reviewer{display:flex;gap:.5rem;width:calc(100% + 68px);padding:10px 15px;margin:10px 0 -18px -50px;background-color:#dde0e1}[dir=rtl] .example-box .user-info-reviewer{margin:10px -50px -18px 0}.example-box .user-info-reviewer .drag-icon{position:absolute;transform:translateY(-50%);cursor:move}.example-box .user-info-reviewer .reviewer-info{display:flex}.example-box .user-info-reviewer .reviewer-info .prof-img{width:20px;height:20px;border-radius:50%;border:1px solid #fff;margin:0 5px}.example-box .user-info-reviewer .reviewer-info label{font-size:11px;font-weight:500;color:#000;width:100px;margin-top:1px}.example-box .user-info-reviewer .reviewer-info label .title{display:block;color:#ff375e;font-size:11px}.example-box .user-info-reviewer span{color:#a54ee1;font-size:11px;padding:0;margin-bottom:0;display:block;text-align:start}.example-box .icon{width:30px;height:30px;background-color:#ff375e33;text-align:center;line-height:26px;cursor:pointer;flex-shrink:0}.cdk-drag-preview{box-sizing:border-box;border-radius:0;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;overflow:hidden}.cdk-drag-preview .icon{display:none}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.n-content{max-width:700px;width:100%}.n-results{width:100%;border:0;counter-reset:section}.n-results .n-col{position:relative;background-color:#f3f3f1;padding:10px;justify-content:space-between;align-items:flex-start;margin-top:10px;padding-inline-start:50px;border:0;flex-direction:column;width:100%}.n-results .n-col:last-child{margin-bottom:30px}.n-results .n-col:after,.n-results .n-col:before{display:none}@media (max-width: 991px){.example-box .user-info:before{margin-inline-end:10px;flex-shrink:0}}@media (max-width: 767px){.n-col{padding-inline-start:40px}.n-col .user-info-reviewer span{margin-bottom:0}}@media (max-width: 321px){.n-results .n-col{flex-wrap:wrap;justify-content:center}.n-results .n-col .user-info{justify-content:center}.n-results .n-col .user-info:before{position:absolute;top:15px;left:15px}.n-results .n-col .user-info .prof-img{margin:0 10px 10px}.n-results .n-col .user-info label{width:100%;text-align:center}.n-results .n-col .icon{width:100%}}::ng-deep .default-popover{max-width:320px;right:-2.5rem!important}[dir=rtl] ::ng-deep .default-popover{left:-2.5rem!important;right:auto}.dropdown-img{width:30px;height:30px;border-radius:50%;border:2px solid #fff}.dropdown-img .avatar--medium{--default-size: 30px}:host ::ng-deep .avatar{border:0 none!important}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { 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", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i1$4.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i1$4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i1$4.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: SatPopoverModule }, { kind: "component", type: i1$2.SatPopoverComponent, selector: "sat-popover", inputs: ["anchor", "horizontalAlign", "xAlign", "verticalAlign", "yAlign", "forceAlignment", "lockAlignment", "autoFocus", "restoreFocus", "scrollStrategy", "hasBackdrop", "interactiveClose", "openTransition", "closeTransition", "openAnimationStartAtScale", "closeAnimationEndAtScale", "backdropClass", "panelClass"], outputs: ["opened", "closed", "afterOpen", "afterClose", "backdropClicked", "overlayKeydown"] }, { kind: "directive", type: ProfileImageByEmailDirective, selector: "img[profileImageByEmail], ds-avatar[profileImageByEmail]", inputs: ["profileImageByEmail"] }, { kind: "component", type: FormLabelComponent, selector: "app-form-label", inputs: ["tooltip", "label", "optional"] }, { kind: "component", type: ValidationErrorsComponent, selector: "app-validation-errors,[app-validation-errors]", inputs: ["errors", "customErrorMessages"] }, { kind: "component", type: InfoItemComponent, selector: "app-info-item", inputs: ["label", "value", "name", "type", "dateType", "multiple", "insideTable", "hasLabel", "arrayList", "actionType", "download"] }, { kind: "ngmodule", type: i4.ReactiveFormsModule }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SearchEmployeeComponent, decorators: [{
             type: Component,
@@ -3688,6 +3834,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                         MatAutocompleteModule,
                         FormsModule,
                         SatPopoverModule,
+                        ProfileImageByEmailDirective,
                         ...Shareds,
                     ], providers: [
                         {
@@ -3695,7 +3842,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                             useExisting: forwardRef(() => SearchEmployeeComponent),
                             multi: true,
                         },
-                    ], template: "@if (!isReadOnly) {\r\n<ng-container>\r\n  @if(label) {\r\n  <app-form-label\r\n    [label]=\"label\"\r\n    [optional]=\"required || mandatory ? false : true\"\r\n    [tooltip]=\"tooltip\"\r\n  ></app-form-label>\r\n  }\r\n  <mat-form-field\r\n    class=\"primary-form {{ className }}\"\r\n    [floatLabel]=\"floatLabel\"\r\n    [ngClass]=\"{\r\n    'custom-validation': !control?.errors\r\n   }\"\r\n  >\r\n    <mat-label>{{ label }}</mat-label>\r\n    <ds-icon icon=\"search\" class=\"fc-coral fs-18\"></ds-icon>\r\n    <label class=\"mat-form-content\">\r\n      <input\r\n        type=\"text\"\r\n        aria-label=\"Number\"\r\n        (input)=\"onLoadOptions($event)\"\r\n        matInput\r\n        [disabled]=\"isDisabled\"\r\n        [matAutocomplete]=\"auto\"\r\n        [formControl]=\"employeeSearchControl\"\r\n        [placeholder]=\"placeholder || (label ? ('select' | translate) + ' ' + label : '')\"\r\n      />\r\n    </label>\r\n    @if (loading) {\r\n    <span class=\"sfi sfi-spinner d-inline-block spin fc-coral\" matSuffix></span>\r\n    }\r\n    <mat-autocomplete #auto=\"matAutocomplete\">\r\n      @for (option of data; track option) {\r\n          <mat-option\r\n          [value]=\"option?.['personName']\"\r\n          (onSelectionChange)=\"selectOption(option, $event)\"\r\n        >\r\n          <div class=\"d-flex align-items-center gap-3\">\r\n            <div class=\"dropdown-img\">\r\n              <ds-avatar\r\n                [image]=\"getImage(option?.email)\"\r\n                onerror=\"this.onerror=null;this.src='assets/images/user.svg';\"\r\n                slot=\"prefix\"\r\n                class=\"avatar\"\r\n                size=\"small\"\r\n              >\r\n              </ds-avatar>\r\n            </div>\r\n            <div class=\"line-height-1\">\r\n              <h6 class=\"fs-14 fw-medium fc-onyx mb-0 line-height-1\">\r\n                {{ option?.name }}\r\n              </h6>\r\n              <span class=\"fs-13 fw-normal fc-dark-gray\">{{\r\n                option?.description\r\n              }}</span>\r\n            </div>\r\n          </div>\r\n        </mat-option>\r\n\r\n      }\r\n    </mat-autocomplete>\r\n    @if (showHint) {\r\n    <mat-hint>\r\n      <span\r\n        class=\"sfi sfi-check-circle font-10 fc-dark-gray\"\r\n        [ngClass]=\"{ 'fc-oasis-light-imp': value }\"\r\n      ></span>\r\n      <span class=\"mx-1\"></span>\r\n      <span class=\"fs-12 fc-onyx\">{{ hint }}</span>\r\n    </mat-hint>\r\n    }\r\n  </mat-form-field>\r\n  @if (control.touched) {\r\n    <mat-error \r\n      app-validation-errors \r\n      [errors]=\"control?.errors\" \r\n      [customErrorMessages]=\"customErrorMessages\">\r\n    </mat-error>\r\n  }\r\n\r\n  @if (userAlreadyExist) {\r\n  <mat-error class=\"mb-2\">{{ \"userAlreadyExist\" | translate }}</mat-error>\r\n  } @if (arrayList?.length && !isReadOnly && multiple) {\r\n  <div class=\"col-12 mt-2\">\r\n    <div class=\"example-list n-results\">\r\n      @for (emails of arrayList; track $index) {\r\n      <div class=\"example-box n-col px-3\" [ngClass]=\"{ 'mt-0': $index === 0 }\">\r\n        <div class=\"d-flex flex-grow-1 w-100\">\r\n          <div class=\"user-info flex-grow-1\">\r\n            <ds-avatar\r\n              [image]=\"getImage(emails?.['personEmail'])\"\r\n              onerror=\"this.onerror=null;this.src='assets/images/user.svg';\"\r\n              slot=\"prefix\"\r\n              class=\"avatar prof-img\"\r\n            >\r\n            </ds-avatar>\r\n            @if (emails?.['personName']) {\r\n            <label>\r\n              {{ emails?.['personName'] }}\r\n              <span class=\"title\">{{ emails?.['personEmail'] }}</span>\r\n            </label>\r\n            }\r\n          </div>\r\n          @if (!isReadOnly) {\r\n          <ds-button\r\n            class=\"ds-btn-action\"\r\n            size=\"small\"\r\n            (click)=\"deleteRow($index, emails)\"\r\n            icon\r\n          >\r\n            <ds-icon icon=\"trash\" class=\"fc-coral fs-20\"></ds-icon>\r\n          </ds-button>\r\n          }\r\n        </div>\r\n      </div>\r\n      }\r\n    </div>\r\n  </div>\r\n  }\r\n</ng-container>\r\n} @if (isReadOnly && control.value) {\r\n<ng-container>\r\n  <app-info-item\r\n    class=\"info-item\"\r\n    type=\"user-picker\"\r\n    [hasLabel]=\"!!label\"\r\n    [multiple]=\"multiple\"\r\n    [ngClass]=\"{ 'user-picker': !isReadOnly }\"\r\n    [actionType]=\"!isReadOnly ? 'delete' : 'edit'\"\r\n    [label]=\"label\"\r\n    [name]=\"control.value['personName']\"\r\n    [value]=\"control.value['personEmail']\"\r\n    [arrayList]=\"arrayList\"\r\n  >\r\n  </app-info-item>\r\n</ng-container>\r\n}\r\n\r\n<sat-popover #searchEmpPopover [hasBackdrop]=\"true\" verticalAlign=\"below\">\r\n  <div class=\"default-popover p-3\">\r\n    <ol class=\"px-3 m-0\">\r\n      <li>{{ \"searchEmployeeTooltip_1\" | translate }}</li>\r\n      <li>{{ \"searchEmployeeTooltip_2\" | translate }}</li>\r\n      <li>{{ \"searchEmployeeTooltip_3\" | translate }}</li>\r\n      <li>{{ \"searchEmployeeTooltip_4\" | translate }}</li>\r\n    </ol>\r\n  </div>\r\n</sat-popover>\r\n", styles: [".small-input~.btn{height:41px}:host{flex-grow:1}.agenda-list.inside .mat-list-item{display:flex;align-items:center;padding:0 1rem;background-color:#fff;border:1px solid silver;height:88px!important}.agenda-list.inside .mat-list-item:before{position:relative;left:auto;right:auto}.agenda-list .mat-list-item{height:66px!important;background-color:#d3d3d3;margin-bottom:1.5rem;cursor:move}.agenda-list .mat-list-item:hover:before{opacity:1}.agenda-list .mat-list-item:before{content:\"\\e928\";font-family:stc-font-icons;left:-1.5rem;color:#a9a9a9;position:absolute;font-size:1.5rem;opacity:0;transition:all .3s linear}[dir=rtl] .agenda-list .mat-list-item:before{left:auto;right:-1.5rem}.agenda-list .mat-list-item:last-child{margin-bottom:0}.example-list{width:500px;max-width:100%;border:solid 1px #ccc;min-height:60px;display:block;background:#fff;border-radius:0;overflow:hidden}.example-box{color:#000000de;display:flex;box-sizing:border-box;cursor:move;font-size:14px;position:relative;background-color:#f3f3f1;padding:18px;justify-content:space-between;align-items:flex-start;margin-top:10px;padding-inline-start:50px;border:0;flex-direction:column;width:100%}.example-box .user-info{display:flex;align-items:center}.example-box .user-info .drag-icon{position:absolute;left:18px;cursor:move}html[dir=rtl] .example-box .user-info .drag-icon{left:auto;right:18px}.example-box .user-info .prof-img{width:40px;height:40px;border-radius:50%;border:2px solid #fff;margin-inline-end:10px}.example-box .user-info label{font-size:13px;font-weight:500;color:#1d242d;flex-grow:1}.example-box .user-info label .title{display:block;color:#ff375e;font-size:9px}.example-box .user-info-reviewer{display:flex;gap:.5rem;width:calc(100% + 68px);padding:10px 15px;margin:10px 0 -18px -50px;background-color:#dde0e1}[dir=rtl] .example-box .user-info-reviewer{margin:10px -50px -18px 0}.example-box .user-info-reviewer .drag-icon{position:absolute;transform:translateY(-50%);cursor:move}.example-box .user-info-reviewer .reviewer-info{display:flex}.example-box .user-info-reviewer .reviewer-info .prof-img{width:20px;height:20px;border-radius:50%;border:1px solid #fff;margin:0 5px}.example-box .user-info-reviewer .reviewer-info label{font-size:11px;font-weight:500;color:#000;width:100px;margin-top:1px}.example-box .user-info-reviewer .reviewer-info label .title{display:block;color:#ff375e;font-size:11px}.example-box .user-info-reviewer span{color:#a54ee1;font-size:11px;padding:0;margin-bottom:0;display:block;text-align:start}.example-box .icon{width:30px;height:30px;background-color:#ff375e33;text-align:center;line-height:26px;cursor:pointer;flex-shrink:0}.cdk-drag-preview{box-sizing:border-box;border-radius:0;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;overflow:hidden}.cdk-drag-preview .icon{display:none}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.n-content{max-width:700px;width:100%}.n-results{width:100%;border:0;counter-reset:section}.n-results .n-col{position:relative;background-color:#f3f3f1;padding:10px;justify-content:space-between;align-items:flex-start;margin-top:10px;padding-inline-start:50px;border:0;flex-direction:column;width:100%}.n-results .n-col:last-child{margin-bottom:30px}.n-results .n-col:after,.n-results .n-col:before{display:none}@media (max-width: 991px){.example-box .user-info:before{margin-inline-end:10px;flex-shrink:0}}@media (max-width: 767px){.n-col{padding-inline-start:40px}.n-col .user-info-reviewer span{margin-bottom:0}}@media (max-width: 321px){.n-results .n-col{flex-wrap:wrap;justify-content:center}.n-results .n-col .user-info{justify-content:center}.n-results .n-col .user-info:before{position:absolute;top:15px;left:15px}.n-results .n-col .user-info .prof-img{margin:0 10px 10px}.n-results .n-col .user-info label{width:100%;text-align:center}.n-results .n-col .icon{width:100%}}::ng-deep .default-popover{max-width:320px;right:-2.5rem!important}[dir=rtl] ::ng-deep .default-popover{left:-2.5rem!important;right:auto}.dropdown-img{width:30px;height:30px;border-radius:50%;border:2px solid #fff}.dropdown-img .avatar--medium{--default-size: 30px}:host ::ng-deep .avatar{border:0 none!important}\n"] }]
+                    ], template: "@if (!isReadOnly) {\r\n<ng-container>\r\n  @if(label) {\r\n  <app-form-label\r\n    [label]=\"label\"\r\n    [optional]=\"required || mandatory ? false : true\"\r\n    [tooltip]=\"tooltip\"\r\n  ></app-form-label>\r\n  }\r\n  <mat-form-field\r\n    class=\"primary-form {{ className }}\"\r\n    [floatLabel]=\"floatLabel\"\r\n    [ngClass]=\"{\r\n    'custom-validation': !control?.errors\r\n   }\"\r\n  >\r\n    <mat-label>{{ label }}</mat-label>\r\n    <ds-icon icon=\"search\" class=\"fc-coral fs-18\"></ds-icon>\r\n    <label class=\"mat-form-content\">\r\n      <input\r\n        type=\"text\"\r\n        aria-label=\"Number\"\r\n        (input)=\"onLoadOptions($event)\"\r\n        matInput\r\n        [disabled]=\"isDisabled\"\r\n        [matAutocomplete]=\"auto\"\r\n        [formControl]=\"employeeSearchControl\"\r\n        [placeholder]=\"placeholder || (label ? ('select' | translate) + ' ' + label : '')\"\r\n      />\r\n    </label>\r\n    @if (loading) {\r\n    <span class=\"sfi sfi-spinner d-inline-block spin fc-coral\" matSuffix></span>\r\n    }\r\n    <mat-autocomplete #auto=\"matAutocomplete\">\r\n      @for (option of data; track option) {\r\n          <mat-option\r\n          [value]=\"option?.['personName']\"\r\n          (onSelectionChange)=\"selectOption(option, $event)\"\r\n        >\r\n          <div class=\"d-flex align-items-center gap-3\">\r\n            <div class=\"dropdown-img\">\r\n              <ds-avatar\r\n                [profileImageByEmail]=\"option?.email\"\r\n                slot=\"prefix\"\r\n                class=\"avatar\"\r\n                size=\"small\"\r\n              >\r\n              </ds-avatar>\r\n            </div>\r\n            <div class=\"line-height-1\">\r\n              <h6 class=\"fs-14 fw-medium fc-onyx mb-0 line-height-1\">\r\n                {{ option?.name }}\r\n              </h6>\r\n              <span class=\"fs-13 fw-normal fc-dark-gray\">{{\r\n                option?.description\r\n              }}</span>\r\n            </div>\r\n          </div>\r\n        </mat-option>\r\n\r\n      }\r\n    </mat-autocomplete>\r\n    @if (showHint) {\r\n    <mat-hint>\r\n      <span\r\n        class=\"sfi sfi-check-circle font-10 fc-dark-gray\"\r\n        [ngClass]=\"{ 'fc-oasis-light-imp': value }\"\r\n      ></span>\r\n      <span class=\"mx-1\"></span>\r\n      <span class=\"fs-12 fc-onyx\">{{ hint }}</span>\r\n    </mat-hint>\r\n    }\r\n  </mat-form-field>\r\n  @if (control.touched) {\r\n    <mat-error \r\n      app-validation-errors \r\n      [errors]=\"control?.errors\" \r\n      [customErrorMessages]=\"customErrorMessages\">\r\n    </mat-error>\r\n  }\r\n\r\n  @if (userAlreadyExist) {\r\n  <mat-error class=\"mb-2\">{{ \"userAlreadyExist\" | translate }}</mat-error>\r\n  } @if (arrayList?.length && !isReadOnly && multiple) {\r\n  <div class=\"col-12 mt-2\">\r\n    <div class=\"example-list n-results\">\r\n      @for (emails of arrayList; track $index) {\r\n      <div class=\"example-box n-col px-3\" [ngClass]=\"{ 'mt-0': $index === 0 }\">\r\n        <div class=\"d-flex flex-grow-1 w-100\">\r\n          <div class=\"user-info flex-grow-1\">\r\n            <ds-avatar\r\n              [profileImageByEmail]=\"emails?.['personEmail']\"\r\n              slot=\"prefix\"\r\n              class=\"avatar prof-img\"\r\n            >\r\n            </ds-avatar>\r\n            @if (emails?.['personName']) {\r\n            <label>\r\n              {{ emails?.['personName'] }}\r\n              <span class=\"title\">{{ emails?.['personEmail'] }}</span>\r\n            </label>\r\n            }\r\n          </div>\r\n          @if (!isReadOnly) {\r\n          <ds-button\r\n            class=\"ds-btn-action\"\r\n            size=\"small\"\r\n            (click)=\"deleteRow($index, emails)\"\r\n            icon\r\n          >\r\n            <ds-icon icon=\"trash\" class=\"fc-coral fs-20\"></ds-icon>\r\n          </ds-button>\r\n          }\r\n        </div>\r\n      </div>\r\n      }\r\n    </div>\r\n  </div>\r\n  }\r\n</ng-container>\r\n} @if (isReadOnly && control.value) {\r\n<ng-container>\r\n  <app-info-item\r\n    class=\"info-item\"\r\n    type=\"user-picker\"\r\n    [hasLabel]=\"!!label\"\r\n    [multiple]=\"multiple\"\r\n    [ngClass]=\"{ 'user-picker': !isReadOnly }\"\r\n    [actionType]=\"!isReadOnly ? 'delete' : 'edit'\"\r\n    [label]=\"label\"\r\n    [name]=\"control.value['personName']\"\r\n    [value]=\"control.value['personEmail']\"\r\n    [arrayList]=\"arrayList\"\r\n  >\r\n  </app-info-item>\r\n</ng-container>\r\n}\r\n\r\n<sat-popover #searchEmpPopover [hasBackdrop]=\"true\" verticalAlign=\"below\">\r\n  <div class=\"default-popover p-3\">\r\n    <ol class=\"px-3 m-0\">\r\n      <li>{{ \"searchEmployeeTooltip_1\" | translate }}</li>\r\n      <li>{{ \"searchEmployeeTooltip_2\" | translate }}</li>\r\n      <li>{{ \"searchEmployeeTooltip_3\" | translate }}</li>\r\n      <li>{{ \"searchEmployeeTooltip_4\" | translate }}</li>\r\n    </ol>\r\n  </div>\r\n</sat-popover>\r\n", styles: [".small-input~.btn{height:41px}:host{flex-grow:1}.agenda-list.inside .mat-list-item{display:flex;align-items:center;padding:0 1rem;background-color:#fff;border:1px solid silver;height:88px!important}.agenda-list.inside .mat-list-item:before{position:relative;left:auto;right:auto}.agenda-list .mat-list-item{height:66px!important;background-color:#d3d3d3;margin-bottom:1.5rem;cursor:move}.agenda-list .mat-list-item:hover:before{opacity:1}.agenda-list .mat-list-item:before{content:\"\\e928\";font-family:stc-font-icons;left:-1.5rem;color:#a9a9a9;position:absolute;font-size:1.5rem;opacity:0;transition:all .3s linear}[dir=rtl] .agenda-list .mat-list-item:before{left:auto;right:-1.5rem}.agenda-list .mat-list-item:last-child{margin-bottom:0}.example-list{width:500px;max-width:100%;border:solid 1px #ccc;min-height:60px;display:block;background:#fff;border-radius:0;overflow:hidden}.example-box{color:#000000de;display:flex;box-sizing:border-box;cursor:move;font-size:14px;position:relative;background-color:#f3f3f1;padding:18px;justify-content:space-between;align-items:flex-start;margin-top:10px;padding-inline-start:50px;border:0;flex-direction:column;width:100%}.example-box .user-info{display:flex;align-items:center}.example-box .user-info .drag-icon{position:absolute;left:18px;cursor:move}html[dir=rtl] .example-box .user-info .drag-icon{left:auto;right:18px}.example-box .user-info .prof-img{width:40px;height:40px;border-radius:50%;border:2px solid #fff;margin-inline-end:10px}.example-box .user-info label{font-size:13px;font-weight:500;color:#1d242d;flex-grow:1}.example-box .user-info label .title{display:block;color:#ff375e;font-size:9px}.example-box .user-info-reviewer{display:flex;gap:.5rem;width:calc(100% + 68px);padding:10px 15px;margin:10px 0 -18px -50px;background-color:#dde0e1}[dir=rtl] .example-box .user-info-reviewer{margin:10px -50px -18px 0}.example-box .user-info-reviewer .drag-icon{position:absolute;transform:translateY(-50%);cursor:move}.example-box .user-info-reviewer .reviewer-info{display:flex}.example-box .user-info-reviewer .reviewer-info .prof-img{width:20px;height:20px;border-radius:50%;border:1px solid #fff;margin:0 5px}.example-box .user-info-reviewer .reviewer-info label{font-size:11px;font-weight:500;color:#000;width:100px;margin-top:1px}.example-box .user-info-reviewer .reviewer-info label .title{display:block;color:#ff375e;font-size:11px}.example-box .user-info-reviewer span{color:#a54ee1;font-size:11px;padding:0;margin-bottom:0;display:block;text-align:start}.example-box .icon{width:30px;height:30px;background-color:#ff375e33;text-align:center;line-height:26px;cursor:pointer;flex-shrink:0}.cdk-drag-preview{box-sizing:border-box;border-radius:0;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;overflow:hidden}.cdk-drag-preview .icon{display:none}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.n-content{max-width:700px;width:100%}.n-results{width:100%;border:0;counter-reset:section}.n-results .n-col{position:relative;background-color:#f3f3f1;padding:10px;justify-content:space-between;align-items:flex-start;margin-top:10px;padding-inline-start:50px;border:0;flex-direction:column;width:100%}.n-results .n-col:last-child{margin-bottom:30px}.n-results .n-col:after,.n-results .n-col:before{display:none}@media (max-width: 991px){.example-box .user-info:before{margin-inline-end:10px;flex-shrink:0}}@media (max-width: 767px){.n-col{padding-inline-start:40px}.n-col .user-info-reviewer span{margin-bottom:0}}@media (max-width: 321px){.n-results .n-col{flex-wrap:wrap;justify-content:center}.n-results .n-col .user-info{justify-content:center}.n-results .n-col .user-info:before{position:absolute;top:15px;left:15px}.n-results .n-col .user-info .prof-img{margin:0 10px 10px}.n-results .n-col .user-info label{width:100%;text-align:center}.n-results .n-col .icon{width:100%}}::ng-deep .default-popover{max-width:320px;right:-2.5rem!important}[dir=rtl] ::ng-deep .default-popover{left:-2.5rem!important;right:auto}.dropdown-img{width:30px;height:30px;border-radius:50%;border:2px solid #fff}.dropdown-img .avatar--medium{--default-size: 30px}:host ::ng-deep .avatar{border:0 none!important}\n"] }]
         }], propDecorators: { valueName: [{
                 type: Input
             }], className: [{
@@ -6109,16 +6256,17 @@ class ProfileSectionComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ProfileSectionComponent, deps: [{ token: CoreI18nService }, { token: SidenavService }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: ProfileSectionComponent, isStandalone: true, selector: "app-profile-section", inputs: { profileFormVisibility: "profileFormVisibility" }, outputs: { close: "close" }, providers: [
             { provide: MAT_DIALOG_DATA, useValue: {} }
-        ], ngImport: i0, template: "<div class=\"main-sidenav\">\r\n  <div class=\"sidenav-title bc-white\">\r\n    <h3> {{ profile?.fullName }}</h3>\r\n    <ds-icon icon=\"close\" class=\"fc-black fs-20 p-3 cursor-pointer\" (click)=\"closeSidenav()\"></ds-icon>\r\n  </div>\r\n  <div class=\"sidenav-body p-0\">\r\n    <div class=\"d-flex flex-column align-items-center gap-3 sidenav-user bc-off-white text-center\">\r\n      <ds-avatar image=\"/group/i-gate/wm-bpm/forms/-/proxy/portrait?email={{profile?.employeeEmail}}\" class=\"mb-2\"></ds-avatar>\r\n      <div class=\"d-flex flex-column gap-1\">\r\n        <h4 class=\"fs-16 fc-black fw-medium mb-0\">{{ profile?.fullName }}</h4>\r\n        <h6 class=\"fs-12 fc-dark-gray fw-normal mb-0\" *ngIf=\"profile?.jobPosition\">{{ profile?.jobPosition }}</h6>\r\n      </div>\r\n      <div class=\"d-flex flex-wrap gap-2\">\r\n        <div class=\"fs-12 fc-black d-flex align-items-center gap-2 box-shadow bc-white radius-4 p-2 profile-box\">\r\n          <ds-icon icon=\"mail-o\" class=\"fc-coral fs-20\"></ds-icon>\r\n          <a [href]=\"'mailTo:' + profile?.employeeEmail\" class=\"fc-black\">{{ profile?.employeeEmail }}</a>\r\n        </div>\r\n        <div class=\"fs-12 fc-black d-flex align-items-center gap-2 box-shadow bc-white radius-4 p-2 profile-box\" *ngIf=\"profile?.businessPhone\">\r\n          <ds-icon icon=\"phone\" class=\"fc-coral fs-20\"></ds-icon>\r\n          <a [href]=\"'tel:' + profile?.businessPhone\" class=\"fc-black\">\r\n            <bdi>{{ profile?.businessPhone }}</bdi>\r\n          </a>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div\r\n      class=\"info-section no-bg px-4 pb-4\"\r\n      *ngIf=\"\r\n        profile?.departmentName ||\r\n        profile?.generalDepartmentName ||\r\n        profile?.directManagerName ||\r\n        profile?.humanResourcesLocation ||\r\n        profile?.nationality ||\r\n        profile?.generalDepartmentCode\r\n      \"\r\n    >\r\n      <app-info-item\r\n        *ngIf=\"profile?.employeeNumber\"\r\n        class=\"info-item w-100\"\r\n        [label]=\"i18n.translate('employeeID')\"\r\n        [value]=\"profile?.employeeNumber\"\r\n      ></app-info-item>\r\n\r\n      <app-info-item\r\n        *ngIf=\"profile?.departmentName\"\r\n        class=\"info-item w-100\"\r\n        [label]=\"i18n.translate('departmentName')\"\r\n        [value]=\"profile?.departmentName\"\r\n      ></app-info-item>\r\n\r\n      <app-info-item\r\n        *ngIf=\"profile?.generalDepartmentName\"\r\n        class=\"info-item w-100\"\r\n        [label]=\"i18n.translate('generalDepartmentName')\"\r\n        [value]=\"profile?.generalDepartmentName\"\r\n      ></app-info-item>\r\n\r\n      <app-info-item\r\n        *ngIf=\"profile?.directManagerName\"\r\n        class=\"info-item w-100\"\r\n        [label]=\"i18n.translate('directManager')\"\r\n        [value]=\"profile?.directManagerName\"\r\n      ></app-info-item>\r\n\r\n      <app-info-item\r\n        *ngIf=\"profile?.humanResourcesLocation\"\r\n        class=\"info-item w-100\"\r\n        [label]=\"i18n.translate('humanResourcesLocation')\"\r\n        [value]=\"profile?.humanResourcesLocation\"\r\n      ></app-info-item>\r\n\r\n      <app-info-item\r\n        *ngIf=\"profile?.nationality\"\r\n        class=\"info-item w-100\"\r\n        [label]=\"i18n.translate('nationality') \"\r\n        [value]=\"profile?.nationality\"\r\n      ></app-info-item>\r\n\r\n      <app-info-item\r\n        *ngIf=\"profile?.sectorName\"\r\n        class=\"info-item w-100\"\r\n        [label]=\"i18n.translate('sector')\"\r\n        [value]=\"profile?.sectorName\"\r\n      ></app-info-item>\r\n\r\n    </div>\r\n    <ng-container\r\n      *ngIf=\"\r\n        !profile?.departmentName &&\r\n        !profile?.generalDepartmentName &&\r\n        !profile?.directManagerName &&\r\n        !profile?.humanResourcesLocation &&\r\n        !profile?.nationality &&\r\n        !profile?.generalDepartmentCode\r\n      \"\r\n    >\r\n      <ds-message type=\"emptyList\" [attr.label]=\"'noData' \"></ds-message>\r\n    </ng-container>\r\n  </div>\r\n</div>\r\n", styles: [":host ::ng-deep .main-sidenav{width:550px}@media (max-width: 871px){:host ::ng-deep .main-sidenav{width:100vw}}:host ::ng-deep .main-sidenav .sidenav-body .sidenav-user{padding:2.5rem 1.5rem}:host ::ng-deep .main-sidenav .sidenav-body .sidenav-user a{transition:var(--default-transition)}:host ::ng-deep .main-sidenav .sidenav-body .sidenav-user a:hover{text-decoration:underline}:host ::ng-deep .main-sidenav .sidenav-body ds-avatar .avatar{--default-size: 95px}:host ::ng-deep .main-sidenav .sidenav-body .employee-id:hover .copy-icon{opacity:1}:host ::ng-deep .main-sidenav .sidenav-body .employee-id .copy-icon{opacity:0;transition:all .2s linear}:host ::ng-deep .main-sidenav .sidenav-body .profile-box{justify-content:center}@media (min-width: 768px){:host ::ng-deep .main-sidenav .sidenav-body .profile-box{min-width:200px}}:host ::ng-deep .main-sidenav .sidenav-body .info-section>.info-item{padding:1.5rem 0;--info-gap: .5rem}:host ::ng-deep .main-sidenav .sidenav-body .info-section>.info-item.department-code bdi{unicode-bidi:plaintext}:host ::ng-deep .main-sidenav .sidenav-body .info-section>.info-item:not(:last-child){border-bottom:1px solid var(--gray)}:host ::ng-deep .main-sidenav .sidenav-body .info-section>.info-item>.name{--name-width: 100%;--name-fw: var(--font-regular)}:host ::ng-deep .main-sidenav .sidenav-body .info-section>.info-item>.disc{--disc-width: 100%}\n"], dependencies: [{ kind: "component", type: InfoItemComponent, selector: "app-info-item", inputs: ["label", "value", "name", "type", "dateType", "multiple", "insideTable", "hasLabel", "arrayList", "actionType", "download"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+        ], ngImport: i0, template: "<div class=\"main-sidenav\">\r\n  <div class=\"sidenav-title bc-white\">\r\n    <h3> {{ profile?.fullName }}</h3>\r\n    <ds-icon icon=\"close\" class=\"fc-black fs-20 p-3 cursor-pointer\" (click)=\"closeSidenav()\"></ds-icon>\r\n  </div>\r\n  <div class=\"sidenav-body p-0\">\r\n    <div class=\"d-flex flex-column align-items-center gap-3 sidenav-user bc-off-white text-center\">\r\n      <ds-avatar [profileImageByEmail]=\"profile?.employeeEmail\"  class=\"mb-2\"></ds-avatar>         \r\n      <div class=\"d-flex flex-column gap-1\">\r\n        <h4 class=\"fs-16 fc-black fw-medium mb-0\">{{ profile?.fullName }}</h4>\r\n        <h6 class=\"fs-12 fc-dark-gray fw-normal mb-0\" *ngIf=\"profile?.jobPosition\">{{ profile?.jobPosition }}</h6>\r\n      </div>\r\n      <div class=\"d-flex flex-wrap gap-2\">\r\n        <div class=\"fs-12 fc-black d-flex align-items-center gap-2 box-shadow bc-white radius-4 p-2 profile-box\">\r\n          <ds-icon icon=\"mail-o\" class=\"fc-coral fs-20\"></ds-icon>\r\n          <a [href]=\"'mailTo:' + profile?.employeeEmail\" class=\"fc-black\">{{ profile?.employeeEmail }}</a>\r\n        </div>\r\n        <div class=\"fs-12 fc-black d-flex align-items-center gap-2 box-shadow bc-white radius-4 p-2 profile-box\" *ngIf=\"profile?.businessPhone\">\r\n          <ds-icon icon=\"phone\" class=\"fc-coral fs-20\"></ds-icon>\r\n          <a [href]=\"'tel:' + profile?.businessPhone\" class=\"fc-black\">\r\n            <bdi>{{ profile?.businessPhone }}</bdi>\r\n          </a>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div\r\n      class=\"info-section no-bg px-4 pb-4\"\r\n      *ngIf=\"\r\n        profile?.departmentName ||\r\n        profile?.generalDepartmentName ||\r\n        profile?.directManagerName ||\r\n        profile?.humanResourcesLocation ||\r\n        profile?.nationality ||\r\n        profile?.generalDepartmentCode\r\n      \"\r\n    >\r\n      <app-info-item\r\n        *ngIf=\"profile?.employeeNumber\"\r\n        class=\"info-item w-100\"\r\n        [label]=\"i18n.translate('employeeID')\"\r\n        [value]=\"profile?.employeeNumber\"\r\n      ></app-info-item>\r\n\r\n      <app-info-item\r\n        *ngIf=\"profile?.departmentName\"\r\n        class=\"info-item w-100\"\r\n        [label]=\"i18n.translate('departmentName')\"\r\n        [value]=\"profile?.departmentName\"\r\n      ></app-info-item>\r\n\r\n      <app-info-item\r\n        *ngIf=\"profile?.generalDepartmentName\"\r\n        class=\"info-item w-100\"\r\n        [label]=\"i18n.translate('generalDepartmentName')\"\r\n        [value]=\"profile?.generalDepartmentName\"\r\n      ></app-info-item>\r\n\r\n      <app-info-item\r\n        *ngIf=\"profile?.directManagerName\"\r\n        class=\"info-item w-100\"\r\n        [label]=\"i18n.translate('directManager')\"\r\n        [value]=\"profile?.directManagerName\"\r\n      ></app-info-item>\r\n\r\n      <app-info-item\r\n        *ngIf=\"profile?.humanResourcesLocation\"\r\n        class=\"info-item w-100\"\r\n        [label]=\"i18n.translate('humanResourcesLocation')\"\r\n        [value]=\"profile?.humanResourcesLocation\"\r\n      ></app-info-item>\r\n\r\n      <app-info-item\r\n        *ngIf=\"profile?.nationality\"\r\n        class=\"info-item w-100\"\r\n        [label]=\"i18n.translate('nationality') \"\r\n        [value]=\"profile?.nationality\"\r\n      ></app-info-item>\r\n\r\n      <app-info-item\r\n        *ngIf=\"profile?.sectorName\"\r\n        class=\"info-item w-100\"\r\n        [label]=\"i18n.translate('sector')\"\r\n        [value]=\"profile?.sectorName\"\r\n      ></app-info-item>\r\n\r\n    </div>\r\n    <ng-container\r\n      *ngIf=\"\r\n        !profile?.departmentName &&\r\n        !profile?.generalDepartmentName &&\r\n        !profile?.directManagerName &&\r\n        !profile?.humanResourcesLocation &&\r\n        !profile?.nationality &&\r\n        !profile?.generalDepartmentCode\r\n      \"\r\n    >\r\n      <ds-message type=\"emptyList\" [attr.label]=\"'noData' \"></ds-message>\r\n    </ng-container>\r\n  </div>\r\n</div>\r\n", styles: [":host ::ng-deep .main-sidenav{width:550px}@media (max-width: 871px){:host ::ng-deep .main-sidenav{width:100vw}}:host ::ng-deep .main-sidenav .sidenav-body .sidenav-user{padding:2.5rem 1.5rem}:host ::ng-deep .main-sidenav .sidenav-body .sidenav-user a{transition:var(--default-transition)}:host ::ng-deep .main-sidenav .sidenav-body .sidenav-user a:hover{text-decoration:underline}:host ::ng-deep .main-sidenav .sidenav-body ds-avatar .avatar{--default-size: 95px}:host ::ng-deep .main-sidenav .sidenav-body .employee-id:hover .copy-icon{opacity:1}:host ::ng-deep .main-sidenav .sidenav-body .employee-id .copy-icon{opacity:0;transition:all .2s linear}:host ::ng-deep .main-sidenav .sidenav-body .profile-box{justify-content:center}@media (min-width: 768px){:host ::ng-deep .main-sidenav .sidenav-body .profile-box{min-width:200px}}:host ::ng-deep .main-sidenav .sidenav-body .info-section>.info-item{padding:1.5rem 0;--info-gap: .5rem}:host ::ng-deep .main-sidenav .sidenav-body .info-section>.info-item.department-code bdi{unicode-bidi:plaintext}:host ::ng-deep .main-sidenav .sidenav-body .info-section>.info-item:not(:last-child){border-bottom:1px solid var(--gray)}:host ::ng-deep .main-sidenav .sidenav-body .info-section>.info-item>.name{--name-width: 100%;--name-fw: var(--font-regular)}:host ::ng-deep .main-sidenav .sidenav-body .info-section>.info-item>.disc{--disc-width: 100%}\n"], dependencies: [{ kind: "component", type: InfoItemComponent, selector: "app-info-item", inputs: ["label", "value", "name", "type", "dateType", "multiple", "insideTable", "hasLabel", "arrayList", "actionType", "download"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ProfileImageByEmailDirective, selector: "img[profileImageByEmail], ds-avatar[profileImageByEmail]", inputs: ["profileImageByEmail"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ProfileSectionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-profile-section', standalone: true, imports: [
                         InfoItemComponent,
-                        NgIf
+                        NgIf,
+                        ProfileImageByEmailDirective
                     ], schemas: [CUSTOM_ELEMENTS_SCHEMA], providers: [
                         { provide: MAT_DIALOG_DATA, useValue: {} }
-                    ], template: "<div class=\"main-sidenav\">\r\n  <div class=\"sidenav-title bc-white\">\r\n    <h3> {{ profile?.fullName }}</h3>\r\n    <ds-icon icon=\"close\" class=\"fc-black fs-20 p-3 cursor-pointer\" (click)=\"closeSidenav()\"></ds-icon>\r\n  </div>\r\n  <div class=\"sidenav-body p-0\">\r\n    <div class=\"d-flex flex-column align-items-center gap-3 sidenav-user bc-off-white text-center\">\r\n      <ds-avatar image=\"/group/i-gate/wm-bpm/forms/-/proxy/portrait?email={{profile?.employeeEmail}}\" class=\"mb-2\"></ds-avatar>\r\n      <div class=\"d-flex flex-column gap-1\">\r\n        <h4 class=\"fs-16 fc-black fw-medium mb-0\">{{ profile?.fullName }}</h4>\r\n        <h6 class=\"fs-12 fc-dark-gray fw-normal mb-0\" *ngIf=\"profile?.jobPosition\">{{ profile?.jobPosition }}</h6>\r\n      </div>\r\n      <div class=\"d-flex flex-wrap gap-2\">\r\n        <div class=\"fs-12 fc-black d-flex align-items-center gap-2 box-shadow bc-white radius-4 p-2 profile-box\">\r\n          <ds-icon icon=\"mail-o\" class=\"fc-coral fs-20\"></ds-icon>\r\n          <a [href]=\"'mailTo:' + profile?.employeeEmail\" class=\"fc-black\">{{ profile?.employeeEmail }}</a>\r\n        </div>\r\n        <div class=\"fs-12 fc-black d-flex align-items-center gap-2 box-shadow bc-white radius-4 p-2 profile-box\" *ngIf=\"profile?.businessPhone\">\r\n          <ds-icon icon=\"phone\" class=\"fc-coral fs-20\"></ds-icon>\r\n          <a [href]=\"'tel:' + profile?.businessPhone\" class=\"fc-black\">\r\n            <bdi>{{ profile?.businessPhone }}</bdi>\r\n          </a>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div\r\n      class=\"info-section no-bg px-4 pb-4\"\r\n      *ngIf=\"\r\n        profile?.departmentName ||\r\n        profile?.generalDepartmentName ||\r\n        profile?.directManagerName ||\r\n        profile?.humanResourcesLocation ||\r\n        profile?.nationality ||\r\n        profile?.generalDepartmentCode\r\n      \"\r\n    >\r\n      <app-info-item\r\n        *ngIf=\"profile?.employeeNumber\"\r\n        class=\"info-item w-100\"\r\n        [label]=\"i18n.translate('employeeID')\"\r\n        [value]=\"profile?.employeeNumber\"\r\n      ></app-info-item>\r\n\r\n      <app-info-item\r\n        *ngIf=\"profile?.departmentName\"\r\n        class=\"info-item w-100\"\r\n        [label]=\"i18n.translate('departmentName')\"\r\n        [value]=\"profile?.departmentName\"\r\n      ></app-info-item>\r\n\r\n      <app-info-item\r\n        *ngIf=\"profile?.generalDepartmentName\"\r\n        class=\"info-item w-100\"\r\n        [label]=\"i18n.translate('generalDepartmentName')\"\r\n        [value]=\"profile?.generalDepartmentName\"\r\n      ></app-info-item>\r\n\r\n      <app-info-item\r\n        *ngIf=\"profile?.directManagerName\"\r\n        class=\"info-item w-100\"\r\n        [label]=\"i18n.translate('directManager')\"\r\n        [value]=\"profile?.directManagerName\"\r\n      ></app-info-item>\r\n\r\n      <app-info-item\r\n        *ngIf=\"profile?.humanResourcesLocation\"\r\n        class=\"info-item w-100\"\r\n        [label]=\"i18n.translate('humanResourcesLocation')\"\r\n        [value]=\"profile?.humanResourcesLocation\"\r\n      ></app-info-item>\r\n\r\n      <app-info-item\r\n        *ngIf=\"profile?.nationality\"\r\n        class=\"info-item w-100\"\r\n        [label]=\"i18n.translate('nationality') \"\r\n        [value]=\"profile?.nationality\"\r\n      ></app-info-item>\r\n\r\n      <app-info-item\r\n        *ngIf=\"profile?.sectorName\"\r\n        class=\"info-item w-100\"\r\n        [label]=\"i18n.translate('sector')\"\r\n        [value]=\"profile?.sectorName\"\r\n      ></app-info-item>\r\n\r\n    </div>\r\n    <ng-container\r\n      *ngIf=\"\r\n        !profile?.departmentName &&\r\n        !profile?.generalDepartmentName &&\r\n        !profile?.directManagerName &&\r\n        !profile?.humanResourcesLocation &&\r\n        !profile?.nationality &&\r\n        !profile?.generalDepartmentCode\r\n      \"\r\n    >\r\n      <ds-message type=\"emptyList\" [attr.label]=\"'noData' \"></ds-message>\r\n    </ng-container>\r\n  </div>\r\n</div>\r\n", styles: [":host ::ng-deep .main-sidenav{width:550px}@media (max-width: 871px){:host ::ng-deep .main-sidenav{width:100vw}}:host ::ng-deep .main-sidenav .sidenav-body .sidenav-user{padding:2.5rem 1.5rem}:host ::ng-deep .main-sidenav .sidenav-body .sidenav-user a{transition:var(--default-transition)}:host ::ng-deep .main-sidenav .sidenav-body .sidenav-user a:hover{text-decoration:underline}:host ::ng-deep .main-sidenav .sidenav-body ds-avatar .avatar{--default-size: 95px}:host ::ng-deep .main-sidenav .sidenav-body .employee-id:hover .copy-icon{opacity:1}:host ::ng-deep .main-sidenav .sidenav-body .employee-id .copy-icon{opacity:0;transition:all .2s linear}:host ::ng-deep .main-sidenav .sidenav-body .profile-box{justify-content:center}@media (min-width: 768px){:host ::ng-deep .main-sidenav .sidenav-body .profile-box{min-width:200px}}:host ::ng-deep .main-sidenav .sidenav-body .info-section>.info-item{padding:1.5rem 0;--info-gap: .5rem}:host ::ng-deep .main-sidenav .sidenav-body .info-section>.info-item.department-code bdi{unicode-bidi:plaintext}:host ::ng-deep .main-sidenav .sidenav-body .info-section>.info-item:not(:last-child){border-bottom:1px solid var(--gray)}:host ::ng-deep .main-sidenav .sidenav-body .info-section>.info-item>.name{--name-width: 100%;--name-fw: var(--font-regular)}:host ::ng-deep .main-sidenav .sidenav-body .info-section>.info-item>.disc{--disc-width: 100%}\n"] }]
+                    ], template: "<div class=\"main-sidenav\">\r\n  <div class=\"sidenav-title bc-white\">\r\n    <h3> {{ profile?.fullName }}</h3>\r\n    <ds-icon icon=\"close\" class=\"fc-black fs-20 p-3 cursor-pointer\" (click)=\"closeSidenav()\"></ds-icon>\r\n  </div>\r\n  <div class=\"sidenav-body p-0\">\r\n    <div class=\"d-flex flex-column align-items-center gap-3 sidenav-user bc-off-white text-center\">\r\n      <ds-avatar [profileImageByEmail]=\"profile?.employeeEmail\"  class=\"mb-2\"></ds-avatar>         \r\n      <div class=\"d-flex flex-column gap-1\">\r\n        <h4 class=\"fs-16 fc-black fw-medium mb-0\">{{ profile?.fullName }}</h4>\r\n        <h6 class=\"fs-12 fc-dark-gray fw-normal mb-0\" *ngIf=\"profile?.jobPosition\">{{ profile?.jobPosition }}</h6>\r\n      </div>\r\n      <div class=\"d-flex flex-wrap gap-2\">\r\n        <div class=\"fs-12 fc-black d-flex align-items-center gap-2 box-shadow bc-white radius-4 p-2 profile-box\">\r\n          <ds-icon icon=\"mail-o\" class=\"fc-coral fs-20\"></ds-icon>\r\n          <a [href]=\"'mailTo:' + profile?.employeeEmail\" class=\"fc-black\">{{ profile?.employeeEmail }}</a>\r\n        </div>\r\n        <div class=\"fs-12 fc-black d-flex align-items-center gap-2 box-shadow bc-white radius-4 p-2 profile-box\" *ngIf=\"profile?.businessPhone\">\r\n          <ds-icon icon=\"phone\" class=\"fc-coral fs-20\"></ds-icon>\r\n          <a [href]=\"'tel:' + profile?.businessPhone\" class=\"fc-black\">\r\n            <bdi>{{ profile?.businessPhone }}</bdi>\r\n          </a>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div\r\n      class=\"info-section no-bg px-4 pb-4\"\r\n      *ngIf=\"\r\n        profile?.departmentName ||\r\n        profile?.generalDepartmentName ||\r\n        profile?.directManagerName ||\r\n        profile?.humanResourcesLocation ||\r\n        profile?.nationality ||\r\n        profile?.generalDepartmentCode\r\n      \"\r\n    >\r\n      <app-info-item\r\n        *ngIf=\"profile?.employeeNumber\"\r\n        class=\"info-item w-100\"\r\n        [label]=\"i18n.translate('employeeID')\"\r\n        [value]=\"profile?.employeeNumber\"\r\n      ></app-info-item>\r\n\r\n      <app-info-item\r\n        *ngIf=\"profile?.departmentName\"\r\n        class=\"info-item w-100\"\r\n        [label]=\"i18n.translate('departmentName')\"\r\n        [value]=\"profile?.departmentName\"\r\n      ></app-info-item>\r\n\r\n      <app-info-item\r\n        *ngIf=\"profile?.generalDepartmentName\"\r\n        class=\"info-item w-100\"\r\n        [label]=\"i18n.translate('generalDepartmentName')\"\r\n        [value]=\"profile?.generalDepartmentName\"\r\n      ></app-info-item>\r\n\r\n      <app-info-item\r\n        *ngIf=\"profile?.directManagerName\"\r\n        class=\"info-item w-100\"\r\n        [label]=\"i18n.translate('directManager')\"\r\n        [value]=\"profile?.directManagerName\"\r\n      ></app-info-item>\r\n\r\n      <app-info-item\r\n        *ngIf=\"profile?.humanResourcesLocation\"\r\n        class=\"info-item w-100\"\r\n        [label]=\"i18n.translate('humanResourcesLocation')\"\r\n        [value]=\"profile?.humanResourcesLocation\"\r\n      ></app-info-item>\r\n\r\n      <app-info-item\r\n        *ngIf=\"profile?.nationality\"\r\n        class=\"info-item w-100\"\r\n        [label]=\"i18n.translate('nationality') \"\r\n        [value]=\"profile?.nationality\"\r\n      ></app-info-item>\r\n\r\n      <app-info-item\r\n        *ngIf=\"profile?.sectorName\"\r\n        class=\"info-item w-100\"\r\n        [label]=\"i18n.translate('sector')\"\r\n        [value]=\"profile?.sectorName\"\r\n      ></app-info-item>\r\n\r\n    </div>\r\n    <ng-container\r\n      *ngIf=\"\r\n        !profile?.departmentName &&\r\n        !profile?.generalDepartmentName &&\r\n        !profile?.directManagerName &&\r\n        !profile?.humanResourcesLocation &&\r\n        !profile?.nationality &&\r\n        !profile?.generalDepartmentCode\r\n      \"\r\n    >\r\n      <ds-message type=\"emptyList\" [attr.label]=\"'noData' \"></ds-message>\r\n    </ng-container>\r\n  </div>\r\n</div>\r\n", styles: [":host ::ng-deep .main-sidenav{width:550px}@media (max-width: 871px){:host ::ng-deep .main-sidenav{width:100vw}}:host ::ng-deep .main-sidenav .sidenav-body .sidenav-user{padding:2.5rem 1.5rem}:host ::ng-deep .main-sidenav .sidenav-body .sidenav-user a{transition:var(--default-transition)}:host ::ng-deep .main-sidenav .sidenav-body .sidenav-user a:hover{text-decoration:underline}:host ::ng-deep .main-sidenav .sidenav-body ds-avatar .avatar{--default-size: 95px}:host ::ng-deep .main-sidenav .sidenav-body .employee-id:hover .copy-icon{opacity:1}:host ::ng-deep .main-sidenav .sidenav-body .employee-id .copy-icon{opacity:0;transition:all .2s linear}:host ::ng-deep .main-sidenav .sidenav-body .profile-box{justify-content:center}@media (min-width: 768px){:host ::ng-deep .main-sidenav .sidenav-body .profile-box{min-width:200px}}:host ::ng-deep .main-sidenav .sidenav-body .info-section>.info-item{padding:1.5rem 0;--info-gap: .5rem}:host ::ng-deep .main-sidenav .sidenav-body .info-section>.info-item.department-code bdi{unicode-bidi:plaintext}:host ::ng-deep .main-sidenav .sidenav-body .info-section>.info-item:not(:last-child){border-bottom:1px solid var(--gray)}:host ::ng-deep .main-sidenav .sidenav-body .info-section>.info-item>.name{--name-width: 100%;--name-fw: var(--font-regular)}:host ::ng-deep .main-sidenav .sidenav-body .info-section>.info-item>.disc{--disc-width: 100%}\n"] }]
         }], ctorParameters: () => [{ type: CoreI18nService }, { type: SidenavService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -7140,7 +7288,7 @@ class ServiceHeaderComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ServiceHeaderComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CoreService }, { token: CoreI18nService }, { token: FeedBackService }, { token: i1$1.MatDialog }, { token: SidenavService }, { token: i2.ToastrService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ServiceHeaderComponent, isStandalone: true, selector: "core-service-header", inputs: { form: "form", showHistory: "showHistory", isLoading: "isLoading", isReadOnly: "isReadOnly", showApprovalHistory: "showApprovalHistory", approvalHistory: "approvalHistory", creationDate: "creationDate", formTitle: "formTitle", section: "section", serviceFaq: "serviceFaq" }, providers: [FeedBackService,
             { provide: MAT_DIALOG_DATA, useValue: {} },
-        ], ngImport: i0, template: "@if (form?.header?.status?.['key'] === 'NEW') {\r\n  <section\r\n    class=\"main-sidenav main-sidenav-full mb-4\"\r\n\r\n  >\r\n    <div class=\"sidenav-title\">\r\n      <div class=\"d-flex align-items-center gap-3 w-100\">\r\n        <!-- <ds-button icon class=\"rotate-arrow\" size=\"small\" (click)=\"goBack()\" *ngIf=\"!isInMobileApp() && showBack\">\r\n           <ds-icon icon=\"arrow-right\" class=\"fs-19 fc-black\"></ds-icon>\r\n         </ds-button>-->\r\n\r\n        <!--  <h3 class=\"flex-grow-0\">\r\n            {{ formTitle }}\r\n          </h3>-->\r\n\r\n        <section>\r\n          <p class=\"fs-14 fs-md-12 fw-normal fc-dark-gray mb-1\">\r\n            {{ i18n.translate('Hello') }}\r\n            {{ coreService.getShortName(form?.header?.requesterName) }}, {{ i18n.translate('welcomeBack') }}!\r\n          </p>\r\n          <h1 class=\"fs-26 fs-md-20 fw-bold fc-black d-flex align-items-center gap-2 mb-1\">\r\n            {{ formTitle }}\r\n            @if (serviceFaq.length) {\r\n              <ds-icon icon=\"info\" class=\"fs-22 fc-dark-gray cursor-pointer\" (click)=\"openFaq()\">\r\n              </ds-icon>\r\n            }\r\n          </h1>\r\n        </section>\r\n        <div class=\"d-flex align-items-center justify-content-end gap-2 flex-grow-1\">\r\n          @if (serviceFaq.length) {\r\n            <ds-button size=\"small\" icon>\r\n              <ds-icon icon=\"info\" class=\"fs-22 fc-dark-gray cursor-pointer\" (click)=\"openFaq()\">\r\n              </ds-icon>\r\n            </ds-button>\r\n          }\r\n          <!-- <ds-button size=\"small\" icon (click)=\"openWorkflow()\">\r\n            <ds-icon icon=\"bell-2-o\" class=\"fs-20 fc-coral\"></ds-icon>\r\n          </ds-button> -->\r\n          @if (!isReadOnly) {\r\n            <ds-button size=\"small\" icon (click)=\"showPreviousRequests()\">\r\n              <ds-icon icon=\"clock\" class=\"fs-20 fc-coral\"></ds-icon>\r\n            </ds-button>\r\n          }\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </section>\r\n\r\n  <!--  <header class=\"mb-4 mt-4 d-flex align-items-center justify-content-between align-items-end gap-2\">\r\n      <section>\r\n        <h6 class=\"fs-14 fs-md-12 fw-normal fc-dark-gray mb-0\">\r\n          {{ i18n.translate('Hello') }}\r\n          {{ coreService.getShortName(form?.header?.requesterName) }}, {{ i18n.translate('welcomeBack') }}!\r\n        </h6>\r\n        <h1 class=\"fs-26 fs-md-20 fw-bold fc-black d-flex align-items-center gap-2 mb-1\">\r\n          {{ formTitle }}\r\n          @if (serviceFaq.length) {\r\n            <ds-icon icon=\"info\" class=\"fs-22 fc-dark-gray cursor-pointer\" (click)=\"openFaq()\">\r\n            </ds-icon>\r\n          }\r\n        </h1>\r\n      </section>\r\n    </header>-->\r\n} @else {\r\n\r\n  <div class=\"w-100\">\r\n    <section class=\"request-main-info  {{statusClass(form?.header?.status?.['key'])}}\">\r\n      <section class=\"request-info\">\r\n        <div class=\"request-info--body\">\r\n          <div class=\"d-flex align-items-center gap-2 flex-grow-1\">\r\n            <img\r\n              alt=\"\"\r\n              src=\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMjkiIHZpZXdCb3g9IjAgMCAzMCAyOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTI1LjEgMEg0LjlDMi4yIDAgMCAyLjIgMCA0LjlWMjguNkgyNS4xQzI3LjggMjguNiAzMCAyNi40IDMwIDIzLjdWNC45QzMwIDIuMiAyNy44IDAgMjUuMSAwWk0yIDQuOUMyIDMuMyAzLjMgMiA0LjkgMkgyNS4xQzI2LjcgMiAyOCAzLjMgMjggNC45VjIzLjdDMjggMjUuMyAyNi43IDI2LjYgMjUuMSAyNi42SDJWNC45Wk0xMS41IDYuM0M3LjEgNi4zIDMuNSA5LjkgMy41IDE0LjNDMy41IDE4LjcgNy4xIDIyLjMgMTEuNSAyMi4zQzE1LjkgMjIuMyAxOS41IDE4LjcgMTkuNSAxNC4zQzE5LjUgOS45IDE1LjkgNi4zIDExLjUgNi4zWk0xNS4xIDE5QzE0LjEgMTkuOCAxMi44IDIwLjIgMTEuNSAyMC4yQzEwLjIgMjAuMiA4LjkgMTkuOCA3LjkgMTlDOC43IDE3LjcgMTAgMTcgMTEuNSAxN0MxMyAxNyAxNC40IDE3LjggMTUuMSAxOVpNMTMuMSAxMy40QzEzLjEgMTQuMyAxMi40IDE1IDExLjUgMTVDMTAuNiAxNSA5LjkgMTQuMyA5LjkgMTMuNEM5LjkgMTIuNSAxMC42IDExLjggMTEuNSAxMS44QzEyLjQgMTEuOCAxMy4xIDEyLjUgMTMuMSAxMy40Wk0xNS4xIDEzLjRDMTUuMSAxMS40IDEzLjUgOS44IDExLjUgOS44QzkuNSA5LjggNy45IDExLjQgNy45IDEzLjRDNy45IDE0LjIgOC4yIDE1IDguNyAxNS43QzcuOCAxNi4xIDcuMSAxNi44IDYuNSAxNy42QzUuOCAxNi42IDUuNSAxNS41IDUuNSAxNC4zQzUuNSAxMSA4LjIgOC4zIDExLjUgOC4zQzE0LjggOC4zIDE3LjUgMTEgMTcuNSAxNC4zQzE3LjUgMTUuNSAxNy4yIDE2LjYgMTYuNSAxNy42QzE1LjkgMTYuOCAxNS4yIDE2LjIgMTQuMyAxNS43QzE0LjggMTUuMSAxNS4xIDE0LjIgMTUuMSAxMy40Wk0yMSA5LjFDMjEgOC42IDIxLjQgOC4xIDIyIDguMUgyNS41QzI2IDguMSAyNi41IDguNSAyNi41IDkuMUMyNi41IDkuNiAyNi4xIDEwLjEgMjUuNSAxMC4xSDIyQzIxLjQgMTAuMSAyMSA5LjYgMjEgOS4xWk0yMSAxMi41QzIxIDEyIDIxLjQgMTEuNSAyMiAxMS41SDI1LjVDMjYgMTEuNSAyNi41IDExLjkgMjYuNSAxMi41QzI2LjUgMTMgMjYuMSAxMy41IDI1LjUgMTMuNUgyMkMyMS40IDEzLjUgMjEgMTMuMSAyMSAxMi41Wk0yMSAxNkMyMSAxNS41IDIxLjQgMTUgMjIgMTVIMjUuNUMyNiAxNSAyNi41IDE1LjQgMjYuNSAxNkMyNi41IDE2LjUgMjYuMSAxNyAyNS41IDE3SDIyQzIxLjQgMTcgMjEgMTYuNiAyMSAxNlpNMjUuNSAyMC41SDIyQzIxLjUgMjAuNSAyMSAyMC4xIDIxIDE5LjVDMjEgMTguOSAyMS40IDE4LjUgMjIgMTguNUgyNS41QzI2IDE4LjUgMjYuNSAxOC45IDI2LjUgMTkuNUMyNi41IDIwLjEgMjYuMSAyMC41IDI1LjUgMjAuNVoiIGZpbGw9IiNGRjM3NUUiLz4KPC9zdmc+Cg==\"/>\r\n            <h4 class=\"fs-22 fs-md-16 fc-black fw-medium mb-0 flex-grow-1 line-height-1-2\">\r\n              {{ formTitle }}\r\n            </h4>\r\n          </div>\r\n          <div class=\"d-flex align-items-center gap-2 request-info--status-action\">\r\n            <div class=\"d-inline-flex flex-column align-items-end\">\r\n              @if (!isLoading) {\r\n                <ds-status\r\n                  status=\"{{statusClass(form?.header?.status?.['key'])}}\" class=\"header-status\">{{ form?.header?.status?.['value'] }}\r\n                </ds-status>\r\n              }\r\n            </div>\r\n            <div class=\"d-flex align-items-center gap-2\">\r\n              <!-- <ds-button\r\n                 *ngIf=\"form?.inboxItem && (form?.inboxItem?.canRequestFeedback =='true'|| form?.inboxItem?.hasFeedback=='true')\"\r\n                 square icon size=\"small\">\r\n                 <ds-icon icon=\"chat-o\" class=\"fs-20 fs-md-17 fc-coral\">\r\n                   &lt;!&ndash;                  [ngClass]=\"{'fc-green':feedBackIcon == 'feedbackResponded' , 'fc-red': feedBackIcon == 'respondToFeedback' , 'fc-yellow': feedBackIcon == 'waitingFeedback'}\"&ndash;&gt;\r\n                 </ds-icon>\r\n               </ds-button>-->\r\n              <!-- history-->\r\n              <ds-button\r\n                *ngIf=\"form?.commentsDrop?.length > 0 && !isLoading\" square icon size=\"small\"\r\n                (click)=\"onCommentsFormClick()\" class=\"has-comments\">\r\n                <ds-icon icon=\"clock\" class=\"fc-coral fs-20 fs-md-17\"></ds-icon>\r\n              </ds-button>\r\n              <ng-content></ng-content>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"request-info--footer\">\r\n          @if (!isLoading) {\r\n            <ds-avatar\r\n              image=\"{{form?.header?.requesterPhoto}}\" size=\"xx-small\"\r\n              class=\"d-inline-flex cursor-pointer\" (click)=\"showUserInfo()\"></ds-avatar>\r\n          }\r\n          <div\r\n            class=\"d-flex align-items-center flex-wrap flex-grow-1 gap-1 gap-sm-2 line-height-1 request-info--header__details\">\r\n            <span\r\n              [ngClass]=\"{'loading-bg loading-width': isLoading}\"\r\n              class=\"fs-12 fw-medium d-none d-sm-inline-block\">{{ coreService.getShortName(form?.header?.['requesterName']) }}</span>\r\n            <span class=\"fs-20\">&#8226;</span>\r\n            <span class=\"fs-12\" [ngClass]=\"{'loading-bg loading-width': isLoading}\"> {{ form?.header?.formId }}</span>\r\n            <span class=\"fs-20\" *ngIf=\"creationDate\">&#8226;</span>\r\n            <span class=\"fs-12\" [ngClass]=\"{'loading-bg loading-width': isLoading}\"> {{ creationDate }}</span>\r\n          </div>\r\n        </div>\r\n      </section>\r\n    </section>\r\n\r\n  </div>\r\n\r\n\r\n  <!--<ng-container>\r\n    <div class=\"d-flex align-items-center justify-content-end gap-2 my-2\">\r\n      <ds-button\r\n        *ngIf=\"form?.inboxItem && !form.sections[form.sections.length -1].header.readOnly && !isLoading\"\r\n        square\r\n        icon\r\n        size=\"small\"\r\n        [matMenuTriggerFor]=\"menu\"\r\n        class=\"icon-btn-shadow\">\r\n        <ds-icon\r\n          [ngClass]=\"{'fc-purple' : (flagPriority === '0' ||  flagPriority === null),'fc-yellow' : flagPriority === '1','fc-green' : flagPriority === '2','fc-coral' : flagPriority === '3'}\"\r\n          icon=\"flag-o\" class=\"fs-20 fs-md-17 fc-purple\">\r\n        </ds-icon>\r\n      </ds-button>\r\n      <mat-menu #menu=\"matMenu\" panelClass=\"action-menu\">\r\n        <button mat-menu-item (click)=\"setFlagPriority('0')\">\r\n          <ds-icon icon=\"flag-o\" class=\"fc-purple fs-20 fs-md-17\"></ds-icon>\r\n        </button>\r\n        <button mat-menu-item (click)=\"setFlagPriority('1')\">\r\n          <ds-icon icon=\"flag-o\" class=\"fc-yellow fs-20 fs-md-17\"></ds-icon>\r\n        </button>\r\n        <button mat-menu-item (click)=\"setFlagPriority('2')\">\r\n          <ds-icon icon=\"flag-o\" class=\"fc-green fs-20 fs-md-17\"></ds-icon>\r\n        </button>\r\n        <button mat-menu-item (click)=\"setFlagPriority('3')\">\r\n          <ds-icon icon=\"flag-o\" class=\"fc-coral fs-20 fs-md-17\"></ds-icon>\r\n        </button>\r\n      </mat-menu>\r\n\r\n      <ng-content></ng-content>\r\n    </div>\r\n    <header class=\"service-header bc-white p-3 p-sm-4 py-4 gap-3 {{statusClass(form?.header?.status?.['key'])}}\">\r\n\r\n      <div class=\"service-header-icon\">\r\n        <img\r\n          alt=\"\"\r\n          src=\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMjkiIHZpZXdCb3g9IjAgMCAzMCAyOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTI1LjEgMEg0LjlDMi4yIDAgMCAyLjIgMCA0LjlWMjguNkgyNS4xQzI3LjggMjguNiAzMCAyNi40IDMwIDIzLjdWNC45QzMwIDIuMiAyNy44IDAgMjUuMSAwWk0yIDQuOUMyIDMuMyAzLjMgMiA0LjkgMkgyNS4xQzI2LjcgMiAyOCAzLjMgMjggNC45VjIzLjdDMjggMjUuMyAyNi43IDI2LjYgMjUuMSAyNi42SDJWNC45Wk0xMS41IDYuM0M3LjEgNi4zIDMuNSA5LjkgMy41IDE0LjNDMy41IDE4LjcgNy4xIDIyLjMgMTEuNSAyMi4zQzE1LjkgMjIuMyAxOS41IDE4LjcgMTkuNSAxNC4zQzE5LjUgOS45IDE1LjkgNi4zIDExLjUgNi4zWk0xNS4xIDE5QzE0LjEgMTkuOCAxMi44IDIwLjIgMTEuNSAyMC4yQzEwLjIgMjAuMiA4LjkgMTkuOCA3LjkgMTlDOC43IDE3LjcgMTAgMTcgMTEuNSAxN0MxMyAxNyAxNC40IDE3LjggMTUuMSAxOVpNMTMuMSAxMy40QzEzLjEgMTQuMyAxMi40IDE1IDExLjUgMTVDMTAuNiAxNSA5LjkgMTQuMyA5LjkgMTMuNEM5LjkgMTIuNSAxMC42IDExLjggMTEuNSAxMS44QzEyLjQgMTEuOCAxMy4xIDEyLjUgMTMuMSAxMy40Wk0xNS4xIDEzLjRDMTUuMSAxMS40IDEzLjUgOS44IDExLjUgOS44QzkuNSA5LjggNy45IDExLjQgNy45IDEzLjRDNy45IDE0LjIgOC4yIDE1IDguNyAxNS43QzcuOCAxNi4xIDcuMSAxNi44IDYuNSAxNy42QzUuOCAxNi42IDUuNSAxNS41IDUuNSAxNC4zQzUuNSAxMSA4LjIgOC4zIDExLjUgOC4zQzE0LjggOC4zIDE3LjUgMTEgMTcuNSAxNC4zQzE3LjUgMTUuNSAxNy4yIDE2LjYgMTYuNSAxNy42QzE1LjkgMTYuOCAxNS4yIDE2LjIgMTQuMyAxNS43QzE0LjggMTUuMSAxNS4xIDE0LjIgMTUuMSAxMy40Wk0yMSA5LjFDMjEgOC42IDIxLjQgOC4xIDIyIDguMUgyNS41QzI2IDguMSAyNi41IDguNSAyNi41IDkuMUMyNi41IDkuNiAyNi4xIDEwLjEgMjUuNSAxMC4xSDIyQzIxLjQgMTAuMSAyMSA5LjYgMjEgOS4xWk0yMSAxMi41QzIxIDEyIDIxLjQgMTEuNSAyMiAxMS41SDI1LjVDMjYgMTEuNSAyNi41IDExLjkgMjYuNSAxMi41QzI2LjUgMTMgMjYuMSAxMy41IDI1LjUgMTMuNUgyMkMyMS40IDEzLjUgMjEgMTMuMSAyMSAxMi41Wk0yMSAxNkMyMSAxNS41IDIxLjQgMTUgMjIgMTVIMjUuNUMyNiAxNSAyNi41IDE1LjQgMjYuNSAxNkMyNi41IDE2LjUgMjYuMSAxNyAyNS41IDE3SDIyQzIxLjQgMTcgMjEgMTYuNiAyMSAxNlpNMjUuNSAyMC41SDIyQzIxLjUgMjAuNSAyMSAyMC4xIDIxIDE5LjVDMjEgMTguOSAyMS40IDE4LjUgMjIgMTguNUgyNS41QzI2IDE4LjUgMjYuNSAxOC45IDI2LjUgMTkuNUMyNi41IDIwLjEgMjYuMSAyMC41IDI1LjUgMjAuNVoiIGZpbGw9IiNGRjM3NUUiLz4KPC9zdmc+Cg==\"/>\r\n      </div>\r\n\r\n      <div class=\"flex-grow-1 d-flex flex-column flex-sm-row align-items-sm-center gap-2\">\r\n        <div class=\"flex-grow-1\">\r\n          <h1 class=\"fs-20 fs-md-16 fw-bold fc-black header-title m-0\">{{ formTitle }}\r\n            @if (serviceFaq.length) {\r\n              <ds-icon icon=\"info\" class=\"fs-22 fc-dark-gray cursor-pointer\" (click)=\"openFaq()\">\r\n              </ds-icon>\r\n            }\r\n          </h1>\r\n          <div class=\"header-user d-flex align-items-sm-center gap-2 mt-sm-1\">\r\n            @if (!isLoading) {\r\n              <ds-avatar\r\n                image=\"{{form?.header?.requesterPhoto}}\" size=\"xx-small\"\r\n                class=\"d-inline-flex cursor-pointer\" (click)=\"showUserInfo()\"></ds-avatar>\r\n            }\r\n            <span\r\n              class=\"fs-12 text-truncate d-sm-block cursor-pointer\" (click)=\"showUserInfo()\"\r\n              [ngClass]=\"{'loading-bg loading-width': isLoading}\">{{ coreService.getShortName(form?.header?.requesterName) }}</span>\r\n            <mat-divider class=\"divider circle mx-2 d-none d-sm-block\"></mat-divider>\r\n            <span class=\"fs-12\" [ngClass]=\"{'loading-bg loading-width': isLoading}\">{{ form?.header?.formId }}</span>\r\n            @if (creationDate) {\r\n              <mat-divider class=\"divider circle mx-2 d-none d-sm-block\"></mat-divider>\r\n              <span class=\"fs-14\" [ngClass]=\"{'loading-bg loading-width': isLoading}\">{{ creationDate }}</span>\r\n            }\r\n          </div>\r\n\r\n        </div>\r\n        <div class=\"header-actions d-flex flex-row flex-sm-column justify-content-between justify-content-sm-center gap-2 mt-2 mt-sm-0\">\r\n          @if (!isLoading) {\r\n            <ds-status\r\n              status=\"{{statusClass(form?.header?.status?.['key'])}}\" class=\"header-status\">{{ form?.header?.status?.['value'] }}\r\n            </ds-status>\r\n          }\r\n          <div class=\"d-flex align-items-center justify-content-end gap-2\">\r\n            &lt;!&ndash; feedback&ndash;&gt;\r\n            &lt;!&ndash;            *ngIf=\"form?.inboxItem && (form?.inboxItem?.canRequestFeedback ==='true'|| form?.inboxItem?.hasFeedback==='true') && !isLoading\"&ndash;&gt;\r\n            &lt;!&ndash;  <ds-button\r\n                square icon size=\"small\" (click)=\"feedback()\">\r\n                <ds-icon\r\n                  icon=\"chat-o\" class=\"fs-20 fs-md-17 fc-coral\"\r\n                  [ngClass]=\"{'fc-green':feedBackIcon === 'feedbackResponded' , 'fc-red': feedBackIcon === 'respondToFeedback' , 'fc-yellow': feedBackIcon === 'waitingFeedback'}\">\r\n                </ds-icon>\r\n              </ds-button>&ndash;&gt;\r\n            <ds-button\r\n              *ngIf=\"form?.commentsDrop?.length > 0 && !isLoading\" square icon size=\"small\"\r\n              (click)=\"onCommentsFormClick()\" class=\"has-comments\">\r\n              <ds-icon icon=\"clock\" class=\"fc-coral fs-20 fs-md-17\"></ds-icon>\r\n            </ds-button>\r\n            @if (showApprovalHistory) {\r\n              <ng-container>\r\n                <ds-button\r\n                  color=\"white\" shape=\"text\" square size=\"small\" [satPopoverAnchor]=\"workflow\"\r\n                  #workflowAnchor=\"satPopoverAnchor\" (click)=\"workflowAnchor.popover.open()\">\r\n                  <slot name=\"prefix\">\r\n                    <ds-icon icon=\"workflow\" class=\"fs-24\"></ds-icon>\r\n                  </slot>\r\n                </ds-button>\r\n                <sat-popover\r\n                  #workflow [anchor]=\"workflowAnchor\" [hasBackdrop]=\"true\" verticalAlign=\"below\"\r\n                  horizontalAlign=\"end\">\r\n                  <div class=\"default-popover p-3\" style=\"min-width: 330px;\">\r\n                    <ds-approvals *ngIf=\"approvalHistory\" class=\"popover-approvals\" approvalsData=\"{{approvals}}\">\r\n                    </ds-approvals>\r\n                  </div>\r\n                </sat-popover>\r\n              </ng-container>\r\n            }\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n    </header>\r\n  </ng-container>-->\r\n}\r\n", styles: [".loading-width{min-width:100px;width:40px;flex-grow:1}.request-main-info{--item-bg: var(--light-gray);--item-fc: var(--black);--status-container-bc: #e8ebec;--status-container-brc: var(--dark-gray)}.request-main-info.warning{--item-bg: var(--yellow);--status-container-bc: #fff8d9;--status-container-brc: var(--yellow)}.request-main-info.pending{--item-bg: #eff0f1;--status-container-bc: #e8ebec;--status-container-brc: #c8ced1}.request-main-info.expired{--item-bg: var(--dark-gray);--status-container-bc: #e8ebec;--status-container-brc: var(--dark-gray)}.request-main-info.success{--item-bg: var(--green);--status-container-bc: #e6f9f4;--status-container-brc: var(--green)}.request-main-info.info{--item-bg: var(--sea-light);--status-container-bc: #fff8d9;--status-container-brc: var(--sea-light)}.request-main-info.danger{--item-bg: var(--red);--status-container-bc: #fae9ec;--status-container-brc: var(--red)}.request-main-info.orange,.request-main-info.send_back{--item-bg: var(--orange);--status-container-bc: #fff0eb;--status-container-brc: var(--orange)}.request-info{border-radius:0;box-shadow:var(--box-shadow);background-color:var(--white);border-top:5px solid var(--item-bg)}.request-info--footer{padding:20px 24px;min-height:45px;display:flex;align-items:center;gap:.75rem;border-top:1px solid var(--light-gray)}@media (max-width: 578px){.request-info--footer{padding:.3rem 1rem}}.request-info--footer__details{color:var(--item-fc)}.request-info--body{padding:2rem;display:flex;align-items:center;gap:.75rem;background-color:#fff}@media (max-width: 578px){.request-info--body{padding:1rem;flex-direction:column;align-items:stretch}}.request-info--body figure{min-width:30px;width:30px;text-align:center}.request-info--body figure svg{width:100%}@media (max-width: 578px){.request-info--status-action{justify-content:space-between}}.request-info--history{margin-top:-.5rem}.request-info--comment{background-color:#fff0eb;color:var(--orange);border-radius:0 0 4px 4px}.status-container{min-height:40px;padding:.5rem 1rem;display:flex;flex-direction:column;justify-content:center;gap:.5rem;margin-bottom:1.5rem}.status-container.danger{--item-bg: var(--red);--status-container-bc: #fae9ec;--status-container-brc: var(--red)}.status-container ::ng-deep ds-avatar.user-avatar .avatar{min-width:var(--default-size, 45px)!important;width:var(--default-size, 45px)!important;height:var(--default-size, 45px)!important;padding:var(--avatar-padding, 0)!important;background-color:var(--avatar-bg, white);color:var(--avatar-color, black)!important;border:var(--avatar-border, 0)!important;border-radius:var(--avatar-radius, 50%)!important;margin:var(--avatar-margin, 0)!important;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;--default-size: 25px}@media (min-width: 768px){.status-container ::ng-deep ds-avatar.user-avatar .avatar{--default-size: 31px;--avatar-border: 3px solid var(--light-gray)}}.circle-status::part(base){--status-radius: 50%;--status-size: 19px;--status-fs: 100%}ds-button[square]::part(base){--btn-padding: 0;--default-size-sm: 30px}.send-back-container{background-color:#fff0eb;color:var(--orange);padding:.5rem;border-radius:4px}object,iframe,embed{height:79vh}::ng-deep .history-popup{--popup-width: 100vw;--popup-max-width: 100vw;--popup-radius: 15px 15px 0 0;position:absolute!important;bottom:0}:host ::ng-deep .mat-expansion-panel-content{background:#fff!important}:host .main-sidenav.main-sidenav-full .sidenav-title{border-bottom:transparent!important}:host .main-sidenav .sidenav-title{background-color:transparent!important}:host .main-sidenav{height:60px;min-height:10px!important}:host .mat-expansion-panel-content{background:#fff!important}:host .approval-panel-container{display:grid;grid-template-columns:40% calc(60% - 45px) 20px;grid-template-areas:\"title details toggle\";gap:.75rem;place-content:space-between;align-items:center;flex-grow:1;width:100%}@media (max-width: 991px){:host .approval-panel-container{grid-template-columns:calc(100% - 45px) 20px;grid-template-areas:\"title toggle\" \"details details\"}}:host .approval-panel-container .approval-panel-title{grid-area:title}:host .approval-panel-container .panel-user-name{max-width:120px}@media (max-width: 768px){:host .approval-panel-container .panel-user-name.panel-ueser-only{max-width:140px}:host .approval-panel-container .panel-user-name:not(.panel-ueser-only){max-width:90px}}:host .approval-panel-container .approval-panel-details{display:flex;align-items:center;justify-content:space-between;grid-area:details}:host .approval-panel-container .approval-panel-toggle{grid-area:toggle;display:flex;align-items:center;justify-content:center;width:20px}:host ::ng-deep ds-avatar.user-avatar .avatar{min-width:var(--default-size, 45px)!important;width:var(--default-size, 45px)!important;height:var(--default-size, 45px)!important;padding:var(--avatar-padding, 0)!important;background-color:var(--avatar-bg, white);color:var(--avatar-color, black)!important;border:var(--avatar-border, 0)!important;border-radius:var(--avatar-radius, 50%)!important;margin:var(--avatar-margin, 0)!important;--default-size: 25px}@media (min-width: 768px){:host ::ng-deep ds-avatar.user-avatar .avatar{--default-size: 31px;--avatar-border: 3px solid var(--light-gray)}}@media (min-width: 768px){:host ::ng-deep .user-avatar-name{padding-inline-end:1rem!important}}:host .circle-status::part(base){--status-radius: 50%;--status-size: 18px;--status-fs: 80% }:host .panel-title{min-width:40%;width:40%}@media (max-width: 576px){:host .panel-title{min-width:100%!important;width:100%!important}}:host .panel-user-status{min-width:60%;width:60%;display:flex;align-items:center;justify-content:space-between}@media (max-width: 576px){:host .panel-user-status{min-width:100%!important;width:100%!important}:host .panel-user-status .user-delegate{min-width:auto}:host .panel-user-status .main-status::part(base){--status-width: 50px}}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SatPopoverModule }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+        ], ngImport: i0, template: "@if (form?.header?.status?.['key'] === 'NEW') {\r\n  <section\r\n    class=\"main-sidenav main-sidenav-full mb-4\"\r\n\r\n  >\r\n    <div class=\"sidenav-title\">\r\n      <div class=\"d-flex align-items-center gap-3 w-100\">\r\n        <!-- <ds-button icon class=\"rotate-arrow\" size=\"small\" (click)=\"goBack()\" *ngIf=\"!isInMobileApp() && showBack\">\r\n           <ds-icon icon=\"arrow-right\" class=\"fs-19 fc-black\"></ds-icon>\r\n         </ds-button>-->\r\n\r\n        <!--  <h3 class=\"flex-grow-0\">\r\n            {{ formTitle }}\r\n          </h3>-->\r\n\r\n        <section>\r\n          <p class=\"fs-14 fs-md-12 fw-normal fc-dark-gray mb-1\">\r\n            {{ i18n.translate('Hello') }}\r\n            {{ coreService.getShortName(form?.header?.requesterName) }}, {{ i18n.translate('welcomeBack') }}!\r\n          </p>\r\n          <h1 class=\"fs-26 fs-md-20 fw-bold fc-black d-flex align-items-center gap-2 mb-1\">\r\n            {{ formTitle }}\r\n            @if (serviceFaq.length) {\r\n              <ds-icon icon=\"info\" class=\"fs-22 fc-dark-gray cursor-pointer\" (click)=\"openFaq()\">\r\n              </ds-icon>\r\n            }\r\n          </h1>\r\n        </section>\r\n        <div class=\"d-flex align-items-center justify-content-end gap-2 flex-grow-1\">\r\n          @if (serviceFaq.length) {\r\n            <ds-button size=\"small\" icon>\r\n              <ds-icon icon=\"info\" class=\"fs-22 fc-dark-gray cursor-pointer\" (click)=\"openFaq()\">\r\n              </ds-icon>\r\n            </ds-button>\r\n          }\r\n          <!-- <ds-button size=\"small\" icon (click)=\"openWorkflow()\">\r\n            <ds-icon icon=\"bell-2-o\" class=\"fs-20 fc-coral\"></ds-icon>\r\n          </ds-button> -->\r\n          @if (!isReadOnly) {\r\n            <ds-button size=\"small\" icon (click)=\"showPreviousRequests()\">\r\n              <ds-icon icon=\"clock\" class=\"fs-20 fc-coral\"></ds-icon>\r\n            </ds-button>\r\n          }\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </section>\r\n\r\n  <!--  <header class=\"mb-4 mt-4 d-flex align-items-center justify-content-between align-items-end gap-2\">\r\n      <section>\r\n        <h6 class=\"fs-14 fs-md-12 fw-normal fc-dark-gray mb-0\">\r\n          {{ i18n.translate('Hello') }}\r\n          {{ coreService.getShortName(form?.header?.requesterName) }}, {{ i18n.translate('welcomeBack') }}!\r\n        </h6>\r\n        <h1 class=\"fs-26 fs-md-20 fw-bold fc-black d-flex align-items-center gap-2 mb-1\">\r\n          {{ formTitle }}\r\n          @if (serviceFaq.length) {\r\n            <ds-icon icon=\"info\" class=\"fs-22 fc-dark-gray cursor-pointer\" (click)=\"openFaq()\">\r\n            </ds-icon>\r\n          }\r\n        </h1>\r\n      </section>\r\n    </header>-->\r\n} @else {\r\n\r\n  <div class=\"w-100\">\r\n    <section class=\"request-main-info  {{statusClass(form?.header?.status?.['key'])}}\">\r\n      <section class=\"request-info\">\r\n        <div class=\"request-info--body\">\r\n          <div class=\"d-flex align-items-center gap-2 flex-grow-1\">\r\n            <img\r\n              alt=\"\"\r\n              src=\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMjkiIHZpZXdCb3g9IjAgMCAzMCAyOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTI1LjEgMEg0LjlDMi4yIDAgMCAyLjIgMCA0LjlWMjguNkgyNS4xQzI3LjggMjguNiAzMCAyNi40IDMwIDIzLjdWNC45QzMwIDIuMiAyNy44IDAgMjUuMSAwWk0yIDQuOUMyIDMuMyAzLjMgMiA0LjkgMkgyNS4xQzI2LjcgMiAyOCAzLjMgMjggNC45VjIzLjdDMjggMjUuMyAyNi43IDI2LjYgMjUuMSAyNi42SDJWNC45Wk0xMS41IDYuM0M3LjEgNi4zIDMuNSA5LjkgMy41IDE0LjNDMy41IDE4LjcgNy4xIDIyLjMgMTEuNSAyMi4zQzE1LjkgMjIuMyAxOS41IDE4LjcgMTkuNSAxNC4zQzE5LjUgOS45IDE1LjkgNi4zIDExLjUgNi4zWk0xNS4xIDE5QzE0LjEgMTkuOCAxMi44IDIwLjIgMTEuNSAyMC4yQzEwLjIgMjAuMiA4LjkgMTkuOCA3LjkgMTlDOC43IDE3LjcgMTAgMTcgMTEuNSAxN0MxMyAxNyAxNC40IDE3LjggMTUuMSAxOVpNMTMuMSAxMy40QzEzLjEgMTQuMyAxMi40IDE1IDExLjUgMTVDMTAuNiAxNSA5LjkgMTQuMyA5LjkgMTMuNEM5LjkgMTIuNSAxMC42IDExLjggMTEuNSAxMS44QzEyLjQgMTEuOCAxMy4xIDEyLjUgMTMuMSAxMy40Wk0xNS4xIDEzLjRDMTUuMSAxMS40IDEzLjUgOS44IDExLjUgOS44QzkuNSA5LjggNy45IDExLjQgNy45IDEzLjRDNy45IDE0LjIgOC4yIDE1IDguNyAxNS43QzcuOCAxNi4xIDcuMSAxNi44IDYuNSAxNy42QzUuOCAxNi42IDUuNSAxNS41IDUuNSAxNC4zQzUuNSAxMSA4LjIgOC4zIDExLjUgOC4zQzE0LjggOC4zIDE3LjUgMTEgMTcuNSAxNC4zQzE3LjUgMTUuNSAxNy4yIDE2LjYgMTYuNSAxNy42QzE1LjkgMTYuOCAxNS4yIDE2LjIgMTQuMyAxNS43QzE0LjggMTUuMSAxNS4xIDE0LjIgMTUuMSAxMy40Wk0yMSA5LjFDMjEgOC42IDIxLjQgOC4xIDIyIDguMUgyNS41QzI2IDguMSAyNi41IDguNSAyNi41IDkuMUMyNi41IDkuNiAyNi4xIDEwLjEgMjUuNSAxMC4xSDIyQzIxLjQgMTAuMSAyMSA5LjYgMjEgOS4xWk0yMSAxMi41QzIxIDEyIDIxLjQgMTEuNSAyMiAxMS41SDI1LjVDMjYgMTEuNSAyNi41IDExLjkgMjYuNSAxMi41QzI2LjUgMTMgMjYuMSAxMy41IDI1LjUgMTMuNUgyMkMyMS40IDEzLjUgMjEgMTMuMSAyMSAxMi41Wk0yMSAxNkMyMSAxNS41IDIxLjQgMTUgMjIgMTVIMjUuNUMyNiAxNSAyNi41IDE1LjQgMjYuNSAxNkMyNi41IDE2LjUgMjYuMSAxNyAyNS41IDE3SDIyQzIxLjQgMTcgMjEgMTYuNiAyMSAxNlpNMjUuNSAyMC41SDIyQzIxLjUgMjAuNSAyMSAyMC4xIDIxIDE5LjVDMjEgMTguOSAyMS40IDE4LjUgMjIgMTguNUgyNS41QzI2IDE4LjUgMjYuNSAxOC45IDI2LjUgMTkuNUMyNi41IDIwLjEgMjYuMSAyMC41IDI1LjUgMjAuNVoiIGZpbGw9IiNGRjM3NUUiLz4KPC9zdmc+Cg==\"/>\r\n            <h4 class=\"fs-22 fs-md-16 fc-black fw-medium mb-0 flex-grow-1 line-height-1-2\">\r\n              {{ formTitle }}\r\n            </h4>\r\n          </div>\r\n          <div class=\"d-flex align-items-center gap-2 request-info--status-action\">\r\n            <div class=\"d-inline-flex flex-column align-items-end\">\r\n              @if (!isLoading) {\r\n                <ds-status\r\n                  status=\"{{statusClass(form?.header?.status?.['key'])}}\" class=\"header-status\">{{ form?.header?.status?.['value'] }}\r\n                </ds-status>\r\n              }\r\n            </div>\r\n            <div class=\"d-flex align-items-center gap-2\">\r\n              <!-- <ds-button\r\n                 *ngIf=\"form?.inboxItem && (form?.inboxItem?.canRequestFeedback =='true'|| form?.inboxItem?.hasFeedback=='true')\"\r\n                 square icon size=\"small\">\r\n                 <ds-icon icon=\"chat-o\" class=\"fs-20 fs-md-17 fc-coral\">\r\n                   &lt;!&ndash;                  [ngClass]=\"{'fc-green':feedBackIcon == 'feedbackResponded' , 'fc-red': feedBackIcon == 'respondToFeedback' , 'fc-yellow': feedBackIcon == 'waitingFeedback'}\"&ndash;&gt;\r\n                 </ds-icon>\r\n               </ds-button>-->\r\n              <!-- history-->\r\n              <ds-button\r\n                *ngIf=\"form?.commentsDrop?.length > 0 && !isLoading\" square icon size=\"small\"\r\n                (click)=\"onCommentsFormClick()\" class=\"has-comments\">\r\n                <ds-icon icon=\"clock\" class=\"fc-coral fs-20 fs-md-17\"></ds-icon>\r\n              </ds-button>\r\n              <ng-content></ng-content>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"request-info--footer\">\r\n          @if (!isLoading) {\r\n            <ds-avatar\r\n              [profileImageByEmail]=\"form?.profileInfoDrop?.employeeEmail\" size=\"xx-small\"\r\n              class=\"d-inline-flex cursor-pointer\" (click)=\"showUserInfo()\"></ds-avatar>\r\n          }\r\n          <div\r\n            class=\"d-flex align-items-center flex-wrap flex-grow-1 gap-1 gap-sm-2 line-height-1 request-info--header__details\">\r\n            <span\r\n              [ngClass]=\"{'loading-bg loading-width': isLoading}\"\r\n              class=\"fs-12 fw-medium d-none d-sm-inline-block\">{{ coreService.getShortName(form?.header?.['requesterName']) }}</span>\r\n            <span class=\"fs-20\">&#8226;</span>\r\n            <span class=\"fs-12\" [ngClass]=\"{'loading-bg loading-width': isLoading}\"> {{ form?.header?.formId }}</span>\r\n            <span class=\"fs-20\" *ngIf=\"creationDate\">&#8226;</span>\r\n            <span class=\"fs-12\" [ngClass]=\"{'loading-bg loading-width': isLoading}\"> {{ creationDate }}</span>\r\n          </div>\r\n        </div>\r\n      </section>\r\n    </section>\r\n\r\n  </div>\r\n\r\n\r\n  <!--<ng-container>\r\n    <div class=\"d-flex align-items-center justify-content-end gap-2 my-2\">\r\n      <ds-button\r\n        *ngIf=\"form?.inboxItem && !form.sections[form.sections.length -1].header.readOnly && !isLoading\"\r\n        square\r\n        icon\r\n        size=\"small\"\r\n        [matMenuTriggerFor]=\"menu\"\r\n        class=\"icon-btn-shadow\">\r\n        <ds-icon\r\n          [ngClass]=\"{'fc-purple' : (flagPriority === '0' ||  flagPriority === null),'fc-yellow' : flagPriority === '1','fc-green' : flagPriority === '2','fc-coral' : flagPriority === '3'}\"\r\n          icon=\"flag-o\" class=\"fs-20 fs-md-17 fc-purple\">\r\n        </ds-icon>\r\n      </ds-button>\r\n      <mat-menu #menu=\"matMenu\" panelClass=\"action-menu\">\r\n        <button mat-menu-item (click)=\"setFlagPriority('0')\">\r\n          <ds-icon icon=\"flag-o\" class=\"fc-purple fs-20 fs-md-17\"></ds-icon>\r\n        </button>\r\n        <button mat-menu-item (click)=\"setFlagPriority('1')\">\r\n          <ds-icon icon=\"flag-o\" class=\"fc-yellow fs-20 fs-md-17\"></ds-icon>\r\n        </button>\r\n        <button mat-menu-item (click)=\"setFlagPriority('2')\">\r\n          <ds-icon icon=\"flag-o\" class=\"fc-green fs-20 fs-md-17\"></ds-icon>\r\n        </button>\r\n        <button mat-menu-item (click)=\"setFlagPriority('3')\">\r\n          <ds-icon icon=\"flag-o\" class=\"fc-coral fs-20 fs-md-17\"></ds-icon>\r\n        </button>\r\n      </mat-menu>\r\n\r\n      <ng-content></ng-content>\r\n    </div>\r\n    <header class=\"service-header bc-white p-3 p-sm-4 py-4 gap-3 {{statusClass(form?.header?.status?.['key'])}}\">\r\n\r\n      <div class=\"service-header-icon\">\r\n        <img\r\n          alt=\"\"\r\n          src=\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMjkiIHZpZXdCb3g9IjAgMCAzMCAyOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTI1LjEgMEg0LjlDMi4yIDAgMCAyLjIgMCA0LjlWMjguNkgyNS4xQzI3LjggMjguNiAzMCAyNi40IDMwIDIzLjdWNC45QzMwIDIuMiAyNy44IDAgMjUuMSAwWk0yIDQuOUMyIDMuMyAzLjMgMiA0LjkgMkgyNS4xQzI2LjcgMiAyOCAzLjMgMjggNC45VjIzLjdDMjggMjUuMyAyNi43IDI2LjYgMjUuMSAyNi42SDJWNC45Wk0xMS41IDYuM0M3LjEgNi4zIDMuNSA5LjkgMy41IDE0LjNDMy41IDE4LjcgNy4xIDIyLjMgMTEuNSAyMi4zQzE1LjkgMjIuMyAxOS41IDE4LjcgMTkuNSAxNC4zQzE5LjUgOS45IDE1LjkgNi4zIDExLjUgNi4zWk0xNS4xIDE5QzE0LjEgMTkuOCAxMi44IDIwLjIgMTEuNSAyMC4yQzEwLjIgMjAuMiA4LjkgMTkuOCA3LjkgMTlDOC43IDE3LjcgMTAgMTcgMTEuNSAxN0MxMyAxNyAxNC40IDE3LjggMTUuMSAxOVpNMTMuMSAxMy40QzEzLjEgMTQuMyAxMi40IDE1IDExLjUgMTVDMTAuNiAxNSA5LjkgMTQuMyA5LjkgMTMuNEM5LjkgMTIuNSAxMC42IDExLjggMTEuNSAxMS44QzEyLjQgMTEuOCAxMy4xIDEyLjUgMTMuMSAxMy40Wk0xNS4xIDEzLjRDMTUuMSAxMS40IDEzLjUgOS44IDExLjUgOS44QzkuNSA5LjggNy45IDExLjQgNy45IDEzLjRDNy45IDE0LjIgOC4yIDE1IDguNyAxNS43QzcuOCAxNi4xIDcuMSAxNi44IDYuNSAxNy42QzUuOCAxNi42IDUuNSAxNS41IDUuNSAxNC4zQzUuNSAxMSA4LjIgOC4zIDExLjUgOC4zQzE0LjggOC4zIDE3LjUgMTEgMTcuNSAxNC4zQzE3LjUgMTUuNSAxNy4yIDE2LjYgMTYuNSAxNy42QzE1LjkgMTYuOCAxNS4yIDE2LjIgMTQuMyAxNS43QzE0LjggMTUuMSAxNS4xIDE0LjIgMTUuMSAxMy40Wk0yMSA5LjFDMjEgOC42IDIxLjQgOC4xIDIyIDguMUgyNS41QzI2IDguMSAyNi41IDguNSAyNi41IDkuMUMyNi41IDkuNiAyNi4xIDEwLjEgMjUuNSAxMC4xSDIyQzIxLjQgMTAuMSAyMSA5LjYgMjEgOS4xWk0yMSAxMi41QzIxIDEyIDIxLjQgMTEuNSAyMiAxMS41SDI1LjVDMjYgMTEuNSAyNi41IDExLjkgMjYuNSAxMi41QzI2LjUgMTMgMjYuMSAxMy41IDI1LjUgMTMuNUgyMkMyMS40IDEzLjUgMjEgMTMuMSAyMSAxMi41Wk0yMSAxNkMyMSAxNS41IDIxLjQgMTUgMjIgMTVIMjUuNUMyNiAxNSAyNi41IDE1LjQgMjYuNSAxNkMyNi41IDE2LjUgMjYuMSAxNyAyNS41IDE3SDIyQzIxLjQgMTcgMjEgMTYuNiAyMSAxNlpNMjUuNSAyMC41SDIyQzIxLjUgMjAuNSAyMSAyMC4xIDIxIDE5LjVDMjEgMTguOSAyMS40IDE4LjUgMjIgMTguNUgyNS41QzI2IDE4LjUgMjYuNSAxOC45IDI2LjUgMTkuNUMyNi41IDIwLjEgMjYuMSAyMC41IDI1LjUgMjAuNVoiIGZpbGw9IiNGRjM3NUUiLz4KPC9zdmc+Cg==\"/>\r\n      </div>\r\n\r\n      <div class=\"flex-grow-1 d-flex flex-column flex-sm-row align-items-sm-center gap-2\">\r\n        <div class=\"flex-grow-1\">\r\n          <h1 class=\"fs-20 fs-md-16 fw-bold fc-black header-title m-0\">{{ formTitle }}\r\n            @if (serviceFaq.length) {\r\n              <ds-icon icon=\"info\" class=\"fs-22 fc-dark-gray cursor-pointer\" (click)=\"openFaq()\">\r\n              </ds-icon>\r\n            }\r\n          </h1>\r\n          <div class=\"header-user d-flex align-items-sm-center gap-2 mt-sm-1\">\r\n            @if (!isLoading) {\r\n              <ds-avatar\r\n                image=\"{{form?.header?.requesterPhoto}}\" size=\"xx-small\"\r\n                class=\"d-inline-flex cursor-pointer\" (click)=\"showUserInfo()\"></ds-avatar>\r\n            }\r\n            <span\r\n              class=\"fs-12 text-truncate d-sm-block cursor-pointer\" (click)=\"showUserInfo()\"\r\n              [ngClass]=\"{'loading-bg loading-width': isLoading}\">{{ coreService.getShortName(form?.header?.requesterName) }}</span>\r\n            <mat-divider class=\"divider circle mx-2 d-none d-sm-block\"></mat-divider>\r\n            <span class=\"fs-12\" [ngClass]=\"{'loading-bg loading-width': isLoading}\">{{ form?.header?.formId }}</span>\r\n            @if (creationDate) {\r\n              <mat-divider class=\"divider circle mx-2 d-none d-sm-block\"></mat-divider>\r\n              <span class=\"fs-14\" [ngClass]=\"{'loading-bg loading-width': isLoading}\">{{ creationDate }}</span>\r\n            }\r\n          </div>\r\n\r\n        </div>\r\n        <div class=\"header-actions d-flex flex-row flex-sm-column justify-content-between justify-content-sm-center gap-2 mt-2 mt-sm-0\">\r\n          @if (!isLoading) {\r\n            <ds-status\r\n              status=\"{{statusClass(form?.header?.status?.['key'])}}\" class=\"header-status\">{{ form?.header?.status?.['value'] }}\r\n            </ds-status>\r\n          }\r\n          <div class=\"d-flex align-items-center justify-content-end gap-2\">\r\n            &lt;!&ndash; feedback&ndash;&gt;\r\n            &lt;!&ndash;            *ngIf=\"form?.inboxItem && (form?.inboxItem?.canRequestFeedback ==='true'|| form?.inboxItem?.hasFeedback==='true') && !isLoading\"&ndash;&gt;\r\n            &lt;!&ndash;  <ds-button\r\n                square icon size=\"small\" (click)=\"feedback()\">\r\n                <ds-icon\r\n                  icon=\"chat-o\" class=\"fs-20 fs-md-17 fc-coral\"\r\n                  [ngClass]=\"{'fc-green':feedBackIcon === 'feedbackResponded' , 'fc-red': feedBackIcon === 'respondToFeedback' , 'fc-yellow': feedBackIcon === 'waitingFeedback'}\">\r\n                </ds-icon>\r\n              </ds-button>&ndash;&gt;\r\n            <ds-button\r\n              *ngIf=\"form?.commentsDrop?.length > 0 && !isLoading\" square icon size=\"small\"\r\n              (click)=\"onCommentsFormClick()\" class=\"has-comments\">\r\n              <ds-icon icon=\"clock\" class=\"fc-coral fs-20 fs-md-17\"></ds-icon>\r\n            </ds-button>\r\n            @if (showApprovalHistory) {\r\n              <ng-container>\r\n                <ds-button\r\n                  color=\"white\" shape=\"text\" square size=\"small\" [satPopoverAnchor]=\"workflow\"\r\n                  #workflowAnchor=\"satPopoverAnchor\" (click)=\"workflowAnchor.popover.open()\">\r\n                  <slot name=\"prefix\">\r\n                    <ds-icon icon=\"workflow\" class=\"fs-24\"></ds-icon>\r\n                  </slot>\r\n                </ds-button>\r\n                <sat-popover\r\n                  #workflow [anchor]=\"workflowAnchor\" [hasBackdrop]=\"true\" verticalAlign=\"below\"\r\n                  horizontalAlign=\"end\">\r\n                  <div class=\"default-popover p-3\" style=\"min-width: 330px;\">\r\n                    <ds-approvals *ngIf=\"approvalHistory\" class=\"popover-approvals\" approvalsData=\"{{approvals}}\">\r\n                    </ds-approvals>\r\n                  </div>\r\n                </sat-popover>\r\n              </ng-container>\r\n            }\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n    </header>\r\n  </ng-container>-->\r\n}\r\n", styles: [".loading-width{min-width:100px;width:40px;flex-grow:1}.request-main-info{--item-bg: var(--light-gray);--item-fc: var(--black);--status-container-bc: #e8ebec;--status-container-brc: var(--dark-gray)}.request-main-info.warning{--item-bg: var(--yellow);--status-container-bc: #fff8d9;--status-container-brc: var(--yellow)}.request-main-info.pending{--item-bg: #eff0f1;--status-container-bc: #e8ebec;--status-container-brc: #c8ced1}.request-main-info.expired{--item-bg: var(--dark-gray);--status-container-bc: #e8ebec;--status-container-brc: var(--dark-gray)}.request-main-info.success{--item-bg: var(--green);--status-container-bc: #e6f9f4;--status-container-brc: var(--green)}.request-main-info.info{--item-bg: var(--sea-light);--status-container-bc: #fff8d9;--status-container-brc: var(--sea-light)}.request-main-info.danger{--item-bg: var(--red);--status-container-bc: #fae9ec;--status-container-brc: var(--red)}.request-main-info.orange,.request-main-info.send_back{--item-bg: var(--orange);--status-container-bc: #fff0eb;--status-container-brc: var(--orange)}.request-info{border-radius:0;box-shadow:var(--box-shadow);background-color:var(--white);border-top:5px solid var(--item-bg)}.request-info--footer{padding:20px 24px;min-height:45px;display:flex;align-items:center;gap:.75rem;border-top:1px solid var(--light-gray)}@media (max-width: 578px){.request-info--footer{padding:.3rem 1rem}}.request-info--footer__details{color:var(--item-fc)}.request-info--body{padding:2rem;display:flex;align-items:center;gap:.75rem;background-color:#fff}@media (max-width: 578px){.request-info--body{padding:1rem;flex-direction:column;align-items:stretch}}.request-info--body figure{min-width:30px;width:30px;text-align:center}.request-info--body figure svg{width:100%}@media (max-width: 578px){.request-info--status-action{justify-content:space-between}}.request-info--history{margin-top:-.5rem}.request-info--comment{background-color:#fff0eb;color:var(--orange);border-radius:0 0 4px 4px}.status-container{min-height:40px;padding:.5rem 1rem;display:flex;flex-direction:column;justify-content:center;gap:.5rem;margin-bottom:1.5rem}.status-container.danger{--item-bg: var(--red);--status-container-bc: #fae9ec;--status-container-brc: var(--red)}.status-container ::ng-deep ds-avatar.user-avatar .avatar{min-width:var(--default-size, 45px)!important;width:var(--default-size, 45px)!important;height:var(--default-size, 45px)!important;padding:var(--avatar-padding, 0)!important;background-color:var(--avatar-bg, white);color:var(--avatar-color, black)!important;border:var(--avatar-border, 0)!important;border-radius:var(--avatar-radius, 50%)!important;margin:var(--avatar-margin, 0)!important;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;--default-size: 25px}@media (min-width: 768px){.status-container ::ng-deep ds-avatar.user-avatar .avatar{--default-size: 31px;--avatar-border: 3px solid var(--light-gray)}}.circle-status::part(base){--status-radius: 50%;--status-size: 19px;--status-fs: 100%}ds-button[square]::part(base){--btn-padding: 0;--default-size-sm: 30px}.send-back-container{background-color:#fff0eb;color:var(--orange);padding:.5rem;border-radius:4px}object,iframe,embed{height:79vh}::ng-deep .history-popup{--popup-width: 100vw;--popup-max-width: 100vw;--popup-radius: 15px 15px 0 0;position:absolute!important;bottom:0}:host ::ng-deep .mat-expansion-panel-content{background:#fff!important}:host .main-sidenav.main-sidenav-full .sidenav-title{border-bottom:transparent!important}:host .main-sidenav .sidenav-title{background-color:transparent!important}:host .main-sidenav{height:60px;min-height:10px!important}:host .mat-expansion-panel-content{background:#fff!important}:host .approval-panel-container{display:grid;grid-template-columns:40% calc(60% - 45px) 20px;grid-template-areas:\"title details toggle\";gap:.75rem;place-content:space-between;align-items:center;flex-grow:1;width:100%}@media (max-width: 991px){:host .approval-panel-container{grid-template-columns:calc(100% - 45px) 20px;grid-template-areas:\"title toggle\" \"details details\"}}:host .approval-panel-container .approval-panel-title{grid-area:title}:host .approval-panel-container .panel-user-name{max-width:120px}@media (max-width: 768px){:host .approval-panel-container .panel-user-name.panel-ueser-only{max-width:140px}:host .approval-panel-container .panel-user-name:not(.panel-ueser-only){max-width:90px}}:host .approval-panel-container .approval-panel-details{display:flex;align-items:center;justify-content:space-between;grid-area:details}:host .approval-panel-container .approval-panel-toggle{grid-area:toggle;display:flex;align-items:center;justify-content:center;width:20px}:host ::ng-deep ds-avatar.user-avatar .avatar{min-width:var(--default-size, 45px)!important;width:var(--default-size, 45px)!important;height:var(--default-size, 45px)!important;padding:var(--avatar-padding, 0)!important;background-color:var(--avatar-bg, white);color:var(--avatar-color, black)!important;border:var(--avatar-border, 0)!important;border-radius:var(--avatar-radius, 50%)!important;margin:var(--avatar-margin, 0)!important;--default-size: 25px}@media (min-width: 768px){:host ::ng-deep ds-avatar.user-avatar .avatar{--default-size: 31px;--avatar-border: 3px solid var(--light-gray)}}@media (min-width: 768px){:host ::ng-deep .user-avatar-name{padding-inline-end:1rem!important}}:host .circle-status::part(base){--status-radius: 50%;--status-size: 18px;--status-fs: 80% }:host .panel-title{min-width:40%;width:40%}@media (max-width: 576px){:host .panel-title{min-width:100%!important;width:100%!important}}:host .panel-user-status{min-width:60%;width:60%;display:flex;align-items:center;justify-content:space-between}@media (max-width: 576px){:host .panel-user-status{min-width:100%!important;width:100%!important}:host .panel-user-status .user-delegate{min-width:auto}:host .panel-user-status .main-status::part(base){--status-width: 50px}}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SatPopoverModule }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: ProfileImageByEmailDirective, selector: "img[profileImageByEmail], ds-avatar[profileImageByEmail]", inputs: ["profileImageByEmail"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ServiceHeaderComponent, decorators: [{
             type: Component,
@@ -7151,10 +7299,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                         MatMenuTrigger,
                         NgClass,
                         MatMenu,
-                        MatMenuItem
+                        MatMenuItem,
+                        ProfileImageByEmailDirective
                     ], schemas: [CUSTOM_ELEMENTS_SCHEMA], providers: [FeedBackService,
                         { provide: MAT_DIALOG_DATA, useValue: {} },
-                    ], template: "@if (form?.header?.status?.['key'] === 'NEW') {\r\n  <section\r\n    class=\"main-sidenav main-sidenav-full mb-4\"\r\n\r\n  >\r\n    <div class=\"sidenav-title\">\r\n      <div class=\"d-flex align-items-center gap-3 w-100\">\r\n        <!-- <ds-button icon class=\"rotate-arrow\" size=\"small\" (click)=\"goBack()\" *ngIf=\"!isInMobileApp() && showBack\">\r\n           <ds-icon icon=\"arrow-right\" class=\"fs-19 fc-black\"></ds-icon>\r\n         </ds-button>-->\r\n\r\n        <!--  <h3 class=\"flex-grow-0\">\r\n            {{ formTitle }}\r\n          </h3>-->\r\n\r\n        <section>\r\n          <p class=\"fs-14 fs-md-12 fw-normal fc-dark-gray mb-1\">\r\n            {{ i18n.translate('Hello') }}\r\n            {{ coreService.getShortName(form?.header?.requesterName) }}, {{ i18n.translate('welcomeBack') }}!\r\n          </p>\r\n          <h1 class=\"fs-26 fs-md-20 fw-bold fc-black d-flex align-items-center gap-2 mb-1\">\r\n            {{ formTitle }}\r\n            @if (serviceFaq.length) {\r\n              <ds-icon icon=\"info\" class=\"fs-22 fc-dark-gray cursor-pointer\" (click)=\"openFaq()\">\r\n              </ds-icon>\r\n            }\r\n          </h1>\r\n        </section>\r\n        <div class=\"d-flex align-items-center justify-content-end gap-2 flex-grow-1\">\r\n          @if (serviceFaq.length) {\r\n            <ds-button size=\"small\" icon>\r\n              <ds-icon icon=\"info\" class=\"fs-22 fc-dark-gray cursor-pointer\" (click)=\"openFaq()\">\r\n              </ds-icon>\r\n            </ds-button>\r\n          }\r\n          <!-- <ds-button size=\"small\" icon (click)=\"openWorkflow()\">\r\n            <ds-icon icon=\"bell-2-o\" class=\"fs-20 fc-coral\"></ds-icon>\r\n          </ds-button> -->\r\n          @if (!isReadOnly) {\r\n            <ds-button size=\"small\" icon (click)=\"showPreviousRequests()\">\r\n              <ds-icon icon=\"clock\" class=\"fs-20 fc-coral\"></ds-icon>\r\n            </ds-button>\r\n          }\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </section>\r\n\r\n  <!--  <header class=\"mb-4 mt-4 d-flex align-items-center justify-content-between align-items-end gap-2\">\r\n      <section>\r\n        <h6 class=\"fs-14 fs-md-12 fw-normal fc-dark-gray mb-0\">\r\n          {{ i18n.translate('Hello') }}\r\n          {{ coreService.getShortName(form?.header?.requesterName) }}, {{ i18n.translate('welcomeBack') }}!\r\n        </h6>\r\n        <h1 class=\"fs-26 fs-md-20 fw-bold fc-black d-flex align-items-center gap-2 mb-1\">\r\n          {{ formTitle }}\r\n          @if (serviceFaq.length) {\r\n            <ds-icon icon=\"info\" class=\"fs-22 fc-dark-gray cursor-pointer\" (click)=\"openFaq()\">\r\n            </ds-icon>\r\n          }\r\n        </h1>\r\n      </section>\r\n    </header>-->\r\n} @else {\r\n\r\n  <div class=\"w-100\">\r\n    <section class=\"request-main-info  {{statusClass(form?.header?.status?.['key'])}}\">\r\n      <section class=\"request-info\">\r\n        <div class=\"request-info--body\">\r\n          <div class=\"d-flex align-items-center gap-2 flex-grow-1\">\r\n            <img\r\n              alt=\"\"\r\n              src=\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMjkiIHZpZXdCb3g9IjAgMCAzMCAyOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTI1LjEgMEg0LjlDMi4yIDAgMCAyLjIgMCA0LjlWMjguNkgyNS4xQzI3LjggMjguNiAzMCAyNi40IDMwIDIzLjdWNC45QzMwIDIuMiAyNy44IDAgMjUuMSAwWk0yIDQuOUMyIDMuMyAzLjMgMiA0LjkgMkgyNS4xQzI2LjcgMiAyOCAzLjMgMjggNC45VjIzLjdDMjggMjUuMyAyNi43IDI2LjYgMjUuMSAyNi42SDJWNC45Wk0xMS41IDYuM0M3LjEgNi4zIDMuNSA5LjkgMy41IDE0LjNDMy41IDE4LjcgNy4xIDIyLjMgMTEuNSAyMi4zQzE1LjkgMjIuMyAxOS41IDE4LjcgMTkuNSAxNC4zQzE5LjUgOS45IDE1LjkgNi4zIDExLjUgNi4zWk0xNS4xIDE5QzE0LjEgMTkuOCAxMi44IDIwLjIgMTEuNSAyMC4yQzEwLjIgMjAuMiA4LjkgMTkuOCA3LjkgMTlDOC43IDE3LjcgMTAgMTcgMTEuNSAxN0MxMyAxNyAxNC40IDE3LjggMTUuMSAxOVpNMTMuMSAxMy40QzEzLjEgMTQuMyAxMi40IDE1IDExLjUgMTVDMTAuNiAxNSA5LjkgMTQuMyA5LjkgMTMuNEM5LjkgMTIuNSAxMC42IDExLjggMTEuNSAxMS44QzEyLjQgMTEuOCAxMy4xIDEyLjUgMTMuMSAxMy40Wk0xNS4xIDEzLjRDMTUuMSAxMS40IDEzLjUgOS44IDExLjUgOS44QzkuNSA5LjggNy45IDExLjQgNy45IDEzLjRDNy45IDE0LjIgOC4yIDE1IDguNyAxNS43QzcuOCAxNi4xIDcuMSAxNi44IDYuNSAxNy42QzUuOCAxNi42IDUuNSAxNS41IDUuNSAxNC4zQzUuNSAxMSA4LjIgOC4zIDExLjUgOC4zQzE0LjggOC4zIDE3LjUgMTEgMTcuNSAxNC4zQzE3LjUgMTUuNSAxNy4yIDE2LjYgMTYuNSAxNy42QzE1LjkgMTYuOCAxNS4yIDE2LjIgMTQuMyAxNS43QzE0LjggMTUuMSAxNS4xIDE0LjIgMTUuMSAxMy40Wk0yMSA5LjFDMjEgOC42IDIxLjQgOC4xIDIyIDguMUgyNS41QzI2IDguMSAyNi41IDguNSAyNi41IDkuMUMyNi41IDkuNiAyNi4xIDEwLjEgMjUuNSAxMC4xSDIyQzIxLjQgMTAuMSAyMSA5LjYgMjEgOS4xWk0yMSAxMi41QzIxIDEyIDIxLjQgMTEuNSAyMiAxMS41SDI1LjVDMjYgMTEuNSAyNi41IDExLjkgMjYuNSAxMi41QzI2LjUgMTMgMjYuMSAxMy41IDI1LjUgMTMuNUgyMkMyMS40IDEzLjUgMjEgMTMuMSAyMSAxMi41Wk0yMSAxNkMyMSAxNS41IDIxLjQgMTUgMjIgMTVIMjUuNUMyNiAxNSAyNi41IDE1LjQgMjYuNSAxNkMyNi41IDE2LjUgMjYuMSAxNyAyNS41IDE3SDIyQzIxLjQgMTcgMjEgMTYuNiAyMSAxNlpNMjUuNSAyMC41SDIyQzIxLjUgMjAuNSAyMSAyMC4xIDIxIDE5LjVDMjEgMTguOSAyMS40IDE4LjUgMjIgMTguNUgyNS41QzI2IDE4LjUgMjYuNSAxOC45IDI2LjUgMTkuNUMyNi41IDIwLjEgMjYuMSAyMC41IDI1LjUgMjAuNVoiIGZpbGw9IiNGRjM3NUUiLz4KPC9zdmc+Cg==\"/>\r\n            <h4 class=\"fs-22 fs-md-16 fc-black fw-medium mb-0 flex-grow-1 line-height-1-2\">\r\n              {{ formTitle }}\r\n            </h4>\r\n          </div>\r\n          <div class=\"d-flex align-items-center gap-2 request-info--status-action\">\r\n            <div class=\"d-inline-flex flex-column align-items-end\">\r\n              @if (!isLoading) {\r\n                <ds-status\r\n                  status=\"{{statusClass(form?.header?.status?.['key'])}}\" class=\"header-status\">{{ form?.header?.status?.['value'] }}\r\n                </ds-status>\r\n              }\r\n            </div>\r\n            <div class=\"d-flex align-items-center gap-2\">\r\n              <!-- <ds-button\r\n                 *ngIf=\"form?.inboxItem && (form?.inboxItem?.canRequestFeedback =='true'|| form?.inboxItem?.hasFeedback=='true')\"\r\n                 square icon size=\"small\">\r\n                 <ds-icon icon=\"chat-o\" class=\"fs-20 fs-md-17 fc-coral\">\r\n                   &lt;!&ndash;                  [ngClass]=\"{'fc-green':feedBackIcon == 'feedbackResponded' , 'fc-red': feedBackIcon == 'respondToFeedback' , 'fc-yellow': feedBackIcon == 'waitingFeedback'}\"&ndash;&gt;\r\n                 </ds-icon>\r\n               </ds-button>-->\r\n              <!-- history-->\r\n              <ds-button\r\n                *ngIf=\"form?.commentsDrop?.length > 0 && !isLoading\" square icon size=\"small\"\r\n                (click)=\"onCommentsFormClick()\" class=\"has-comments\">\r\n                <ds-icon icon=\"clock\" class=\"fc-coral fs-20 fs-md-17\"></ds-icon>\r\n              </ds-button>\r\n              <ng-content></ng-content>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"request-info--footer\">\r\n          @if (!isLoading) {\r\n            <ds-avatar\r\n              image=\"{{form?.header?.requesterPhoto}}\" size=\"xx-small\"\r\n              class=\"d-inline-flex cursor-pointer\" (click)=\"showUserInfo()\"></ds-avatar>\r\n          }\r\n          <div\r\n            class=\"d-flex align-items-center flex-wrap flex-grow-1 gap-1 gap-sm-2 line-height-1 request-info--header__details\">\r\n            <span\r\n              [ngClass]=\"{'loading-bg loading-width': isLoading}\"\r\n              class=\"fs-12 fw-medium d-none d-sm-inline-block\">{{ coreService.getShortName(form?.header?.['requesterName']) }}</span>\r\n            <span class=\"fs-20\">&#8226;</span>\r\n            <span class=\"fs-12\" [ngClass]=\"{'loading-bg loading-width': isLoading}\"> {{ form?.header?.formId }}</span>\r\n            <span class=\"fs-20\" *ngIf=\"creationDate\">&#8226;</span>\r\n            <span class=\"fs-12\" [ngClass]=\"{'loading-bg loading-width': isLoading}\"> {{ creationDate }}</span>\r\n          </div>\r\n        </div>\r\n      </section>\r\n    </section>\r\n\r\n  </div>\r\n\r\n\r\n  <!--<ng-container>\r\n    <div class=\"d-flex align-items-center justify-content-end gap-2 my-2\">\r\n      <ds-button\r\n        *ngIf=\"form?.inboxItem && !form.sections[form.sections.length -1].header.readOnly && !isLoading\"\r\n        square\r\n        icon\r\n        size=\"small\"\r\n        [matMenuTriggerFor]=\"menu\"\r\n        class=\"icon-btn-shadow\">\r\n        <ds-icon\r\n          [ngClass]=\"{'fc-purple' : (flagPriority === '0' ||  flagPriority === null),'fc-yellow' : flagPriority === '1','fc-green' : flagPriority === '2','fc-coral' : flagPriority === '3'}\"\r\n          icon=\"flag-o\" class=\"fs-20 fs-md-17 fc-purple\">\r\n        </ds-icon>\r\n      </ds-button>\r\n      <mat-menu #menu=\"matMenu\" panelClass=\"action-menu\">\r\n        <button mat-menu-item (click)=\"setFlagPriority('0')\">\r\n          <ds-icon icon=\"flag-o\" class=\"fc-purple fs-20 fs-md-17\"></ds-icon>\r\n        </button>\r\n        <button mat-menu-item (click)=\"setFlagPriority('1')\">\r\n          <ds-icon icon=\"flag-o\" class=\"fc-yellow fs-20 fs-md-17\"></ds-icon>\r\n        </button>\r\n        <button mat-menu-item (click)=\"setFlagPriority('2')\">\r\n          <ds-icon icon=\"flag-o\" class=\"fc-green fs-20 fs-md-17\"></ds-icon>\r\n        </button>\r\n        <button mat-menu-item (click)=\"setFlagPriority('3')\">\r\n          <ds-icon icon=\"flag-o\" class=\"fc-coral fs-20 fs-md-17\"></ds-icon>\r\n        </button>\r\n      </mat-menu>\r\n\r\n      <ng-content></ng-content>\r\n    </div>\r\n    <header class=\"service-header bc-white p-3 p-sm-4 py-4 gap-3 {{statusClass(form?.header?.status?.['key'])}}\">\r\n\r\n      <div class=\"service-header-icon\">\r\n        <img\r\n          alt=\"\"\r\n          src=\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMjkiIHZpZXdCb3g9IjAgMCAzMCAyOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTI1LjEgMEg0LjlDMi4yIDAgMCAyLjIgMCA0LjlWMjguNkgyNS4xQzI3LjggMjguNiAzMCAyNi40IDMwIDIzLjdWNC45QzMwIDIuMiAyNy44IDAgMjUuMSAwWk0yIDQuOUMyIDMuMyAzLjMgMiA0LjkgMkgyNS4xQzI2LjcgMiAyOCAzLjMgMjggNC45VjIzLjdDMjggMjUuMyAyNi43IDI2LjYgMjUuMSAyNi42SDJWNC45Wk0xMS41IDYuM0M3LjEgNi4zIDMuNSA5LjkgMy41IDE0LjNDMy41IDE4LjcgNy4xIDIyLjMgMTEuNSAyMi4zQzE1LjkgMjIuMyAxOS41IDE4LjcgMTkuNSAxNC4zQzE5LjUgOS45IDE1LjkgNi4zIDExLjUgNi4zWk0xNS4xIDE5QzE0LjEgMTkuOCAxMi44IDIwLjIgMTEuNSAyMC4yQzEwLjIgMjAuMiA4LjkgMTkuOCA3LjkgMTlDOC43IDE3LjcgMTAgMTcgMTEuNSAxN0MxMyAxNyAxNC40IDE3LjggMTUuMSAxOVpNMTMuMSAxMy40QzEzLjEgMTQuMyAxMi40IDE1IDExLjUgMTVDMTAuNiAxNSA5LjkgMTQuMyA5LjkgMTMuNEM5LjkgMTIuNSAxMC42IDExLjggMTEuNSAxMS44QzEyLjQgMTEuOCAxMy4xIDEyLjUgMTMuMSAxMy40Wk0xNS4xIDEzLjRDMTUuMSAxMS40IDEzLjUgOS44IDExLjUgOS44QzkuNSA5LjggNy45IDExLjQgNy45IDEzLjRDNy45IDE0LjIgOC4yIDE1IDguNyAxNS43QzcuOCAxNi4xIDcuMSAxNi44IDYuNSAxNy42QzUuOCAxNi42IDUuNSAxNS41IDUuNSAxNC4zQzUuNSAxMSA4LjIgOC4zIDExLjUgOC4zQzE0LjggOC4zIDE3LjUgMTEgMTcuNSAxNC4zQzE3LjUgMTUuNSAxNy4yIDE2LjYgMTYuNSAxNy42QzE1LjkgMTYuOCAxNS4yIDE2LjIgMTQuMyAxNS43QzE0LjggMTUuMSAxNS4xIDE0LjIgMTUuMSAxMy40Wk0yMSA5LjFDMjEgOC42IDIxLjQgOC4xIDIyIDguMUgyNS41QzI2IDguMSAyNi41IDguNSAyNi41IDkuMUMyNi41IDkuNiAyNi4xIDEwLjEgMjUuNSAxMC4xSDIyQzIxLjQgMTAuMSAyMSA5LjYgMjEgOS4xWk0yMSAxMi41QzIxIDEyIDIxLjQgMTEuNSAyMiAxMS41SDI1LjVDMjYgMTEuNSAyNi41IDExLjkgMjYuNSAxMi41QzI2LjUgMTMgMjYuMSAxMy41IDI1LjUgMTMuNUgyMkMyMS40IDEzLjUgMjEgMTMuMSAyMSAxMi41Wk0yMSAxNkMyMSAxNS41IDIxLjQgMTUgMjIgMTVIMjUuNUMyNiAxNSAyNi41IDE1LjQgMjYuNSAxNkMyNi41IDE2LjUgMjYuMSAxNyAyNS41IDE3SDIyQzIxLjQgMTcgMjEgMTYuNiAyMSAxNlpNMjUuNSAyMC41SDIyQzIxLjUgMjAuNSAyMSAyMC4xIDIxIDE5LjVDMjEgMTguOSAyMS40IDE4LjUgMjIgMTguNUgyNS41QzI2IDE4LjUgMjYuNSAxOC45IDI2LjUgMTkuNUMyNi41IDIwLjEgMjYuMSAyMC41IDI1LjUgMjAuNVoiIGZpbGw9IiNGRjM3NUUiLz4KPC9zdmc+Cg==\"/>\r\n      </div>\r\n\r\n      <div class=\"flex-grow-1 d-flex flex-column flex-sm-row align-items-sm-center gap-2\">\r\n        <div class=\"flex-grow-1\">\r\n          <h1 class=\"fs-20 fs-md-16 fw-bold fc-black header-title m-0\">{{ formTitle }}\r\n            @if (serviceFaq.length) {\r\n              <ds-icon icon=\"info\" class=\"fs-22 fc-dark-gray cursor-pointer\" (click)=\"openFaq()\">\r\n              </ds-icon>\r\n            }\r\n          </h1>\r\n          <div class=\"header-user d-flex align-items-sm-center gap-2 mt-sm-1\">\r\n            @if (!isLoading) {\r\n              <ds-avatar\r\n                image=\"{{form?.header?.requesterPhoto}}\" size=\"xx-small\"\r\n                class=\"d-inline-flex cursor-pointer\" (click)=\"showUserInfo()\"></ds-avatar>\r\n            }\r\n            <span\r\n              class=\"fs-12 text-truncate d-sm-block cursor-pointer\" (click)=\"showUserInfo()\"\r\n              [ngClass]=\"{'loading-bg loading-width': isLoading}\">{{ coreService.getShortName(form?.header?.requesterName) }}</span>\r\n            <mat-divider class=\"divider circle mx-2 d-none d-sm-block\"></mat-divider>\r\n            <span class=\"fs-12\" [ngClass]=\"{'loading-bg loading-width': isLoading}\">{{ form?.header?.formId }}</span>\r\n            @if (creationDate) {\r\n              <mat-divider class=\"divider circle mx-2 d-none d-sm-block\"></mat-divider>\r\n              <span class=\"fs-14\" [ngClass]=\"{'loading-bg loading-width': isLoading}\">{{ creationDate }}</span>\r\n            }\r\n          </div>\r\n\r\n        </div>\r\n        <div class=\"header-actions d-flex flex-row flex-sm-column justify-content-between justify-content-sm-center gap-2 mt-2 mt-sm-0\">\r\n          @if (!isLoading) {\r\n            <ds-status\r\n              status=\"{{statusClass(form?.header?.status?.['key'])}}\" class=\"header-status\">{{ form?.header?.status?.['value'] }}\r\n            </ds-status>\r\n          }\r\n          <div class=\"d-flex align-items-center justify-content-end gap-2\">\r\n            &lt;!&ndash; feedback&ndash;&gt;\r\n            &lt;!&ndash;            *ngIf=\"form?.inboxItem && (form?.inboxItem?.canRequestFeedback ==='true'|| form?.inboxItem?.hasFeedback==='true') && !isLoading\"&ndash;&gt;\r\n            &lt;!&ndash;  <ds-button\r\n                square icon size=\"small\" (click)=\"feedback()\">\r\n                <ds-icon\r\n                  icon=\"chat-o\" class=\"fs-20 fs-md-17 fc-coral\"\r\n                  [ngClass]=\"{'fc-green':feedBackIcon === 'feedbackResponded' , 'fc-red': feedBackIcon === 'respondToFeedback' , 'fc-yellow': feedBackIcon === 'waitingFeedback'}\">\r\n                </ds-icon>\r\n              </ds-button>&ndash;&gt;\r\n            <ds-button\r\n              *ngIf=\"form?.commentsDrop?.length > 0 && !isLoading\" square icon size=\"small\"\r\n              (click)=\"onCommentsFormClick()\" class=\"has-comments\">\r\n              <ds-icon icon=\"clock\" class=\"fc-coral fs-20 fs-md-17\"></ds-icon>\r\n            </ds-button>\r\n            @if (showApprovalHistory) {\r\n              <ng-container>\r\n                <ds-button\r\n                  color=\"white\" shape=\"text\" square size=\"small\" [satPopoverAnchor]=\"workflow\"\r\n                  #workflowAnchor=\"satPopoverAnchor\" (click)=\"workflowAnchor.popover.open()\">\r\n                  <slot name=\"prefix\">\r\n                    <ds-icon icon=\"workflow\" class=\"fs-24\"></ds-icon>\r\n                  </slot>\r\n                </ds-button>\r\n                <sat-popover\r\n                  #workflow [anchor]=\"workflowAnchor\" [hasBackdrop]=\"true\" verticalAlign=\"below\"\r\n                  horizontalAlign=\"end\">\r\n                  <div class=\"default-popover p-3\" style=\"min-width: 330px;\">\r\n                    <ds-approvals *ngIf=\"approvalHistory\" class=\"popover-approvals\" approvalsData=\"{{approvals}}\">\r\n                    </ds-approvals>\r\n                  </div>\r\n                </sat-popover>\r\n              </ng-container>\r\n            }\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n    </header>\r\n  </ng-container>-->\r\n}\r\n", styles: [".loading-width{min-width:100px;width:40px;flex-grow:1}.request-main-info{--item-bg: var(--light-gray);--item-fc: var(--black);--status-container-bc: #e8ebec;--status-container-brc: var(--dark-gray)}.request-main-info.warning{--item-bg: var(--yellow);--status-container-bc: #fff8d9;--status-container-brc: var(--yellow)}.request-main-info.pending{--item-bg: #eff0f1;--status-container-bc: #e8ebec;--status-container-brc: #c8ced1}.request-main-info.expired{--item-bg: var(--dark-gray);--status-container-bc: #e8ebec;--status-container-brc: var(--dark-gray)}.request-main-info.success{--item-bg: var(--green);--status-container-bc: #e6f9f4;--status-container-brc: var(--green)}.request-main-info.info{--item-bg: var(--sea-light);--status-container-bc: #fff8d9;--status-container-brc: var(--sea-light)}.request-main-info.danger{--item-bg: var(--red);--status-container-bc: #fae9ec;--status-container-brc: var(--red)}.request-main-info.orange,.request-main-info.send_back{--item-bg: var(--orange);--status-container-bc: #fff0eb;--status-container-brc: var(--orange)}.request-info{border-radius:0;box-shadow:var(--box-shadow);background-color:var(--white);border-top:5px solid var(--item-bg)}.request-info--footer{padding:20px 24px;min-height:45px;display:flex;align-items:center;gap:.75rem;border-top:1px solid var(--light-gray)}@media (max-width: 578px){.request-info--footer{padding:.3rem 1rem}}.request-info--footer__details{color:var(--item-fc)}.request-info--body{padding:2rem;display:flex;align-items:center;gap:.75rem;background-color:#fff}@media (max-width: 578px){.request-info--body{padding:1rem;flex-direction:column;align-items:stretch}}.request-info--body figure{min-width:30px;width:30px;text-align:center}.request-info--body figure svg{width:100%}@media (max-width: 578px){.request-info--status-action{justify-content:space-between}}.request-info--history{margin-top:-.5rem}.request-info--comment{background-color:#fff0eb;color:var(--orange);border-radius:0 0 4px 4px}.status-container{min-height:40px;padding:.5rem 1rem;display:flex;flex-direction:column;justify-content:center;gap:.5rem;margin-bottom:1.5rem}.status-container.danger{--item-bg: var(--red);--status-container-bc: #fae9ec;--status-container-brc: var(--red)}.status-container ::ng-deep ds-avatar.user-avatar .avatar{min-width:var(--default-size, 45px)!important;width:var(--default-size, 45px)!important;height:var(--default-size, 45px)!important;padding:var(--avatar-padding, 0)!important;background-color:var(--avatar-bg, white);color:var(--avatar-color, black)!important;border:var(--avatar-border, 0)!important;border-radius:var(--avatar-radius, 50%)!important;margin:var(--avatar-margin, 0)!important;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;--default-size: 25px}@media (min-width: 768px){.status-container ::ng-deep ds-avatar.user-avatar .avatar{--default-size: 31px;--avatar-border: 3px solid var(--light-gray)}}.circle-status::part(base){--status-radius: 50%;--status-size: 19px;--status-fs: 100%}ds-button[square]::part(base){--btn-padding: 0;--default-size-sm: 30px}.send-back-container{background-color:#fff0eb;color:var(--orange);padding:.5rem;border-radius:4px}object,iframe,embed{height:79vh}::ng-deep .history-popup{--popup-width: 100vw;--popup-max-width: 100vw;--popup-radius: 15px 15px 0 0;position:absolute!important;bottom:0}:host ::ng-deep .mat-expansion-panel-content{background:#fff!important}:host .main-sidenav.main-sidenav-full .sidenav-title{border-bottom:transparent!important}:host .main-sidenav .sidenav-title{background-color:transparent!important}:host .main-sidenav{height:60px;min-height:10px!important}:host .mat-expansion-panel-content{background:#fff!important}:host .approval-panel-container{display:grid;grid-template-columns:40% calc(60% - 45px) 20px;grid-template-areas:\"title details toggle\";gap:.75rem;place-content:space-between;align-items:center;flex-grow:1;width:100%}@media (max-width: 991px){:host .approval-panel-container{grid-template-columns:calc(100% - 45px) 20px;grid-template-areas:\"title toggle\" \"details details\"}}:host .approval-panel-container .approval-panel-title{grid-area:title}:host .approval-panel-container .panel-user-name{max-width:120px}@media (max-width: 768px){:host .approval-panel-container .panel-user-name.panel-ueser-only{max-width:140px}:host .approval-panel-container .panel-user-name:not(.panel-ueser-only){max-width:90px}}:host .approval-panel-container .approval-panel-details{display:flex;align-items:center;justify-content:space-between;grid-area:details}:host .approval-panel-container .approval-panel-toggle{grid-area:toggle;display:flex;align-items:center;justify-content:center;width:20px}:host ::ng-deep ds-avatar.user-avatar .avatar{min-width:var(--default-size, 45px)!important;width:var(--default-size, 45px)!important;height:var(--default-size, 45px)!important;padding:var(--avatar-padding, 0)!important;background-color:var(--avatar-bg, white);color:var(--avatar-color, black)!important;border:var(--avatar-border, 0)!important;border-radius:var(--avatar-radius, 50%)!important;margin:var(--avatar-margin, 0)!important;--default-size: 25px}@media (min-width: 768px){:host ::ng-deep ds-avatar.user-avatar .avatar{--default-size: 31px;--avatar-border: 3px solid var(--light-gray)}}@media (min-width: 768px){:host ::ng-deep .user-avatar-name{padding-inline-end:1rem!important}}:host .circle-status::part(base){--status-radius: 50%;--status-size: 18px;--status-fs: 80% }:host .panel-title{min-width:40%;width:40%}@media (max-width: 576px){:host .panel-title{min-width:100%!important;width:100%!important}}:host .panel-user-status{min-width:60%;width:60%;display:flex;align-items:center;justify-content:space-between}@media (max-width: 576px){:host .panel-user-status{min-width:100%!important;width:100%!important}:host .panel-user-status .user-delegate{min-width:auto}:host .panel-user-status .main-status::part(base){--status-width: 50px}}\n"] }]
+                    ], template: "@if (form?.header?.status?.['key'] === 'NEW') {\r\n  <section\r\n    class=\"main-sidenav main-sidenav-full mb-4\"\r\n\r\n  >\r\n    <div class=\"sidenav-title\">\r\n      <div class=\"d-flex align-items-center gap-3 w-100\">\r\n        <!-- <ds-button icon class=\"rotate-arrow\" size=\"small\" (click)=\"goBack()\" *ngIf=\"!isInMobileApp() && showBack\">\r\n           <ds-icon icon=\"arrow-right\" class=\"fs-19 fc-black\"></ds-icon>\r\n         </ds-button>-->\r\n\r\n        <!--  <h3 class=\"flex-grow-0\">\r\n            {{ formTitle }}\r\n          </h3>-->\r\n\r\n        <section>\r\n          <p class=\"fs-14 fs-md-12 fw-normal fc-dark-gray mb-1\">\r\n            {{ i18n.translate('Hello') }}\r\n            {{ coreService.getShortName(form?.header?.requesterName) }}, {{ i18n.translate('welcomeBack') }}!\r\n          </p>\r\n          <h1 class=\"fs-26 fs-md-20 fw-bold fc-black d-flex align-items-center gap-2 mb-1\">\r\n            {{ formTitle }}\r\n            @if (serviceFaq.length) {\r\n              <ds-icon icon=\"info\" class=\"fs-22 fc-dark-gray cursor-pointer\" (click)=\"openFaq()\">\r\n              </ds-icon>\r\n            }\r\n          </h1>\r\n        </section>\r\n        <div class=\"d-flex align-items-center justify-content-end gap-2 flex-grow-1\">\r\n          @if (serviceFaq.length) {\r\n            <ds-button size=\"small\" icon>\r\n              <ds-icon icon=\"info\" class=\"fs-22 fc-dark-gray cursor-pointer\" (click)=\"openFaq()\">\r\n              </ds-icon>\r\n            </ds-button>\r\n          }\r\n          <!-- <ds-button size=\"small\" icon (click)=\"openWorkflow()\">\r\n            <ds-icon icon=\"bell-2-o\" class=\"fs-20 fc-coral\"></ds-icon>\r\n          </ds-button> -->\r\n          @if (!isReadOnly) {\r\n            <ds-button size=\"small\" icon (click)=\"showPreviousRequests()\">\r\n              <ds-icon icon=\"clock\" class=\"fs-20 fc-coral\"></ds-icon>\r\n            </ds-button>\r\n          }\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </section>\r\n\r\n  <!--  <header class=\"mb-4 mt-4 d-flex align-items-center justify-content-between align-items-end gap-2\">\r\n      <section>\r\n        <h6 class=\"fs-14 fs-md-12 fw-normal fc-dark-gray mb-0\">\r\n          {{ i18n.translate('Hello') }}\r\n          {{ coreService.getShortName(form?.header?.requesterName) }}, {{ i18n.translate('welcomeBack') }}!\r\n        </h6>\r\n        <h1 class=\"fs-26 fs-md-20 fw-bold fc-black d-flex align-items-center gap-2 mb-1\">\r\n          {{ formTitle }}\r\n          @if (serviceFaq.length) {\r\n            <ds-icon icon=\"info\" class=\"fs-22 fc-dark-gray cursor-pointer\" (click)=\"openFaq()\">\r\n            </ds-icon>\r\n          }\r\n        </h1>\r\n      </section>\r\n    </header>-->\r\n} @else {\r\n\r\n  <div class=\"w-100\">\r\n    <section class=\"request-main-info  {{statusClass(form?.header?.status?.['key'])}}\">\r\n      <section class=\"request-info\">\r\n        <div class=\"request-info--body\">\r\n          <div class=\"d-flex align-items-center gap-2 flex-grow-1\">\r\n            <img\r\n              alt=\"\"\r\n              src=\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMjkiIHZpZXdCb3g9IjAgMCAzMCAyOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTI1LjEgMEg0LjlDMi4yIDAgMCAyLjIgMCA0LjlWMjguNkgyNS4xQzI3LjggMjguNiAzMCAyNi40IDMwIDIzLjdWNC45QzMwIDIuMiAyNy44IDAgMjUuMSAwWk0yIDQuOUMyIDMuMyAzLjMgMiA0LjkgMkgyNS4xQzI2LjcgMiAyOCAzLjMgMjggNC45VjIzLjdDMjggMjUuMyAyNi43IDI2LjYgMjUuMSAyNi42SDJWNC45Wk0xMS41IDYuM0M3LjEgNi4zIDMuNSA5LjkgMy41IDE0LjNDMy41IDE4LjcgNy4xIDIyLjMgMTEuNSAyMi4zQzE1LjkgMjIuMyAxOS41IDE4LjcgMTkuNSAxNC4zQzE5LjUgOS45IDE1LjkgNi4zIDExLjUgNi4zWk0xNS4xIDE5QzE0LjEgMTkuOCAxMi44IDIwLjIgMTEuNSAyMC4yQzEwLjIgMjAuMiA4LjkgMTkuOCA3LjkgMTlDOC43IDE3LjcgMTAgMTcgMTEuNSAxN0MxMyAxNyAxNC40IDE3LjggMTUuMSAxOVpNMTMuMSAxMy40QzEzLjEgMTQuMyAxMi40IDE1IDExLjUgMTVDMTAuNiAxNSA5LjkgMTQuMyA5LjkgMTMuNEM5LjkgMTIuNSAxMC42IDExLjggMTEuNSAxMS44QzEyLjQgMTEuOCAxMy4xIDEyLjUgMTMuMSAxMy40Wk0xNS4xIDEzLjRDMTUuMSAxMS40IDEzLjUgOS44IDExLjUgOS44QzkuNSA5LjggNy45IDExLjQgNy45IDEzLjRDNy45IDE0LjIgOC4yIDE1IDguNyAxNS43QzcuOCAxNi4xIDcuMSAxNi44IDYuNSAxNy42QzUuOCAxNi42IDUuNSAxNS41IDUuNSAxNC4zQzUuNSAxMSA4LjIgOC4zIDExLjUgOC4zQzE0LjggOC4zIDE3LjUgMTEgMTcuNSAxNC4zQzE3LjUgMTUuNSAxNy4yIDE2LjYgMTYuNSAxNy42QzE1LjkgMTYuOCAxNS4yIDE2LjIgMTQuMyAxNS43QzE0LjggMTUuMSAxNS4xIDE0LjIgMTUuMSAxMy40Wk0yMSA5LjFDMjEgOC42IDIxLjQgOC4xIDIyIDguMUgyNS41QzI2IDguMSAyNi41IDguNSAyNi41IDkuMUMyNi41IDkuNiAyNi4xIDEwLjEgMjUuNSAxMC4xSDIyQzIxLjQgMTAuMSAyMSA5LjYgMjEgOS4xWk0yMSAxMi41QzIxIDEyIDIxLjQgMTEuNSAyMiAxMS41SDI1LjVDMjYgMTEuNSAyNi41IDExLjkgMjYuNSAxMi41QzI2LjUgMTMgMjYuMSAxMy41IDI1LjUgMTMuNUgyMkMyMS40IDEzLjUgMjEgMTMuMSAyMSAxMi41Wk0yMSAxNkMyMSAxNS41IDIxLjQgMTUgMjIgMTVIMjUuNUMyNiAxNSAyNi41IDE1LjQgMjYuNSAxNkMyNi41IDE2LjUgMjYuMSAxNyAyNS41IDE3SDIyQzIxLjQgMTcgMjEgMTYuNiAyMSAxNlpNMjUuNSAyMC41SDIyQzIxLjUgMjAuNSAyMSAyMC4xIDIxIDE5LjVDMjEgMTguOSAyMS40IDE4LjUgMjIgMTguNUgyNS41QzI2IDE4LjUgMjYuNSAxOC45IDI2LjUgMTkuNUMyNi41IDIwLjEgMjYuMSAyMC41IDI1LjUgMjAuNVoiIGZpbGw9IiNGRjM3NUUiLz4KPC9zdmc+Cg==\"/>\r\n            <h4 class=\"fs-22 fs-md-16 fc-black fw-medium mb-0 flex-grow-1 line-height-1-2\">\r\n              {{ formTitle }}\r\n            </h4>\r\n          </div>\r\n          <div class=\"d-flex align-items-center gap-2 request-info--status-action\">\r\n            <div class=\"d-inline-flex flex-column align-items-end\">\r\n              @if (!isLoading) {\r\n                <ds-status\r\n                  status=\"{{statusClass(form?.header?.status?.['key'])}}\" class=\"header-status\">{{ form?.header?.status?.['value'] }}\r\n                </ds-status>\r\n              }\r\n            </div>\r\n            <div class=\"d-flex align-items-center gap-2\">\r\n              <!-- <ds-button\r\n                 *ngIf=\"form?.inboxItem && (form?.inboxItem?.canRequestFeedback =='true'|| form?.inboxItem?.hasFeedback=='true')\"\r\n                 square icon size=\"small\">\r\n                 <ds-icon icon=\"chat-o\" class=\"fs-20 fs-md-17 fc-coral\">\r\n                   &lt;!&ndash;                  [ngClass]=\"{'fc-green':feedBackIcon == 'feedbackResponded' , 'fc-red': feedBackIcon == 'respondToFeedback' , 'fc-yellow': feedBackIcon == 'waitingFeedback'}\"&ndash;&gt;\r\n                 </ds-icon>\r\n               </ds-button>-->\r\n              <!-- history-->\r\n              <ds-button\r\n                *ngIf=\"form?.commentsDrop?.length > 0 && !isLoading\" square icon size=\"small\"\r\n                (click)=\"onCommentsFormClick()\" class=\"has-comments\">\r\n                <ds-icon icon=\"clock\" class=\"fc-coral fs-20 fs-md-17\"></ds-icon>\r\n              </ds-button>\r\n              <ng-content></ng-content>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"request-info--footer\">\r\n          @if (!isLoading) {\r\n            <ds-avatar\r\n              [profileImageByEmail]=\"form?.profileInfoDrop?.employeeEmail\" size=\"xx-small\"\r\n              class=\"d-inline-flex cursor-pointer\" (click)=\"showUserInfo()\"></ds-avatar>\r\n          }\r\n          <div\r\n            class=\"d-flex align-items-center flex-wrap flex-grow-1 gap-1 gap-sm-2 line-height-1 request-info--header__details\">\r\n            <span\r\n              [ngClass]=\"{'loading-bg loading-width': isLoading}\"\r\n              class=\"fs-12 fw-medium d-none d-sm-inline-block\">{{ coreService.getShortName(form?.header?.['requesterName']) }}</span>\r\n            <span class=\"fs-20\">&#8226;</span>\r\n            <span class=\"fs-12\" [ngClass]=\"{'loading-bg loading-width': isLoading}\"> {{ form?.header?.formId }}</span>\r\n            <span class=\"fs-20\" *ngIf=\"creationDate\">&#8226;</span>\r\n            <span class=\"fs-12\" [ngClass]=\"{'loading-bg loading-width': isLoading}\"> {{ creationDate }}</span>\r\n          </div>\r\n        </div>\r\n      </section>\r\n    </section>\r\n\r\n  </div>\r\n\r\n\r\n  <!--<ng-container>\r\n    <div class=\"d-flex align-items-center justify-content-end gap-2 my-2\">\r\n      <ds-button\r\n        *ngIf=\"form?.inboxItem && !form.sections[form.sections.length -1].header.readOnly && !isLoading\"\r\n        square\r\n        icon\r\n        size=\"small\"\r\n        [matMenuTriggerFor]=\"menu\"\r\n        class=\"icon-btn-shadow\">\r\n        <ds-icon\r\n          [ngClass]=\"{'fc-purple' : (flagPriority === '0' ||  flagPriority === null),'fc-yellow' : flagPriority === '1','fc-green' : flagPriority === '2','fc-coral' : flagPriority === '3'}\"\r\n          icon=\"flag-o\" class=\"fs-20 fs-md-17 fc-purple\">\r\n        </ds-icon>\r\n      </ds-button>\r\n      <mat-menu #menu=\"matMenu\" panelClass=\"action-menu\">\r\n        <button mat-menu-item (click)=\"setFlagPriority('0')\">\r\n          <ds-icon icon=\"flag-o\" class=\"fc-purple fs-20 fs-md-17\"></ds-icon>\r\n        </button>\r\n        <button mat-menu-item (click)=\"setFlagPriority('1')\">\r\n          <ds-icon icon=\"flag-o\" class=\"fc-yellow fs-20 fs-md-17\"></ds-icon>\r\n        </button>\r\n        <button mat-menu-item (click)=\"setFlagPriority('2')\">\r\n          <ds-icon icon=\"flag-o\" class=\"fc-green fs-20 fs-md-17\"></ds-icon>\r\n        </button>\r\n        <button mat-menu-item (click)=\"setFlagPriority('3')\">\r\n          <ds-icon icon=\"flag-o\" class=\"fc-coral fs-20 fs-md-17\"></ds-icon>\r\n        </button>\r\n      </mat-menu>\r\n\r\n      <ng-content></ng-content>\r\n    </div>\r\n    <header class=\"service-header bc-white p-3 p-sm-4 py-4 gap-3 {{statusClass(form?.header?.status?.['key'])}}\">\r\n\r\n      <div class=\"service-header-icon\">\r\n        <img\r\n          alt=\"\"\r\n          src=\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMjkiIHZpZXdCb3g9IjAgMCAzMCAyOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTI1LjEgMEg0LjlDMi4yIDAgMCAyLjIgMCA0LjlWMjguNkgyNS4xQzI3LjggMjguNiAzMCAyNi40IDMwIDIzLjdWNC45QzMwIDIuMiAyNy44IDAgMjUuMSAwWk0yIDQuOUMyIDMuMyAzLjMgMiA0LjkgMkgyNS4xQzI2LjcgMiAyOCAzLjMgMjggNC45VjIzLjdDMjggMjUuMyAyNi43IDI2LjYgMjUuMSAyNi42SDJWNC45Wk0xMS41IDYuM0M3LjEgNi4zIDMuNSA5LjkgMy41IDE0LjNDMy41IDE4LjcgNy4xIDIyLjMgMTEuNSAyMi4zQzE1LjkgMjIuMyAxOS41IDE4LjcgMTkuNSAxNC4zQzE5LjUgOS45IDE1LjkgNi4zIDExLjUgNi4zWk0xNS4xIDE5QzE0LjEgMTkuOCAxMi44IDIwLjIgMTEuNSAyMC4yQzEwLjIgMjAuMiA4LjkgMTkuOCA3LjkgMTlDOC43IDE3LjcgMTAgMTcgMTEuNSAxN0MxMyAxNyAxNC40IDE3LjggMTUuMSAxOVpNMTMuMSAxMy40QzEzLjEgMTQuMyAxMi40IDE1IDExLjUgMTVDMTAuNiAxNSA5LjkgMTQuMyA5LjkgMTMuNEM5LjkgMTIuNSAxMC42IDExLjggMTEuNSAxMS44QzEyLjQgMTEuOCAxMy4xIDEyLjUgMTMuMSAxMy40Wk0xNS4xIDEzLjRDMTUuMSAxMS40IDEzLjUgOS44IDExLjUgOS44QzkuNSA5LjggNy45IDExLjQgNy45IDEzLjRDNy45IDE0LjIgOC4yIDE1IDguNyAxNS43QzcuOCAxNi4xIDcuMSAxNi44IDYuNSAxNy42QzUuOCAxNi42IDUuNSAxNS41IDUuNSAxNC4zQzUuNSAxMSA4LjIgOC4zIDExLjUgOC4zQzE0LjggOC4zIDE3LjUgMTEgMTcuNSAxNC4zQzE3LjUgMTUuNSAxNy4yIDE2LjYgMTYuNSAxNy42QzE1LjkgMTYuOCAxNS4yIDE2LjIgMTQuMyAxNS43QzE0LjggMTUuMSAxNS4xIDE0LjIgMTUuMSAxMy40Wk0yMSA5LjFDMjEgOC42IDIxLjQgOC4xIDIyIDguMUgyNS41QzI2IDguMSAyNi41IDguNSAyNi41IDkuMUMyNi41IDkuNiAyNi4xIDEwLjEgMjUuNSAxMC4xSDIyQzIxLjQgMTAuMSAyMSA5LjYgMjEgOS4xWk0yMSAxMi41QzIxIDEyIDIxLjQgMTEuNSAyMiAxMS41SDI1LjVDMjYgMTEuNSAyNi41IDExLjkgMjYuNSAxMi41QzI2LjUgMTMgMjYuMSAxMy41IDI1LjUgMTMuNUgyMkMyMS40IDEzLjUgMjEgMTMuMSAyMSAxMi41Wk0yMSAxNkMyMSAxNS41IDIxLjQgMTUgMjIgMTVIMjUuNUMyNiAxNSAyNi41IDE1LjQgMjYuNSAxNkMyNi41IDE2LjUgMjYuMSAxNyAyNS41IDE3SDIyQzIxLjQgMTcgMjEgMTYuNiAyMSAxNlpNMjUuNSAyMC41SDIyQzIxLjUgMjAuNSAyMSAyMC4xIDIxIDE5LjVDMjEgMTguOSAyMS40IDE4LjUgMjIgMTguNUgyNS41QzI2IDE4LjUgMjYuNSAxOC45IDI2LjUgMTkuNUMyNi41IDIwLjEgMjYuMSAyMC41IDI1LjUgMjAuNVoiIGZpbGw9IiNGRjM3NUUiLz4KPC9zdmc+Cg==\"/>\r\n      </div>\r\n\r\n      <div class=\"flex-grow-1 d-flex flex-column flex-sm-row align-items-sm-center gap-2\">\r\n        <div class=\"flex-grow-1\">\r\n          <h1 class=\"fs-20 fs-md-16 fw-bold fc-black header-title m-0\">{{ formTitle }}\r\n            @if (serviceFaq.length) {\r\n              <ds-icon icon=\"info\" class=\"fs-22 fc-dark-gray cursor-pointer\" (click)=\"openFaq()\">\r\n              </ds-icon>\r\n            }\r\n          </h1>\r\n          <div class=\"header-user d-flex align-items-sm-center gap-2 mt-sm-1\">\r\n            @if (!isLoading) {\r\n              <ds-avatar\r\n                image=\"{{form?.header?.requesterPhoto}}\" size=\"xx-small\"\r\n                class=\"d-inline-flex cursor-pointer\" (click)=\"showUserInfo()\"></ds-avatar>\r\n            }\r\n            <span\r\n              class=\"fs-12 text-truncate d-sm-block cursor-pointer\" (click)=\"showUserInfo()\"\r\n              [ngClass]=\"{'loading-bg loading-width': isLoading}\">{{ coreService.getShortName(form?.header?.requesterName) }}</span>\r\n            <mat-divider class=\"divider circle mx-2 d-none d-sm-block\"></mat-divider>\r\n            <span class=\"fs-12\" [ngClass]=\"{'loading-bg loading-width': isLoading}\">{{ form?.header?.formId }}</span>\r\n            @if (creationDate) {\r\n              <mat-divider class=\"divider circle mx-2 d-none d-sm-block\"></mat-divider>\r\n              <span class=\"fs-14\" [ngClass]=\"{'loading-bg loading-width': isLoading}\">{{ creationDate }}</span>\r\n            }\r\n          </div>\r\n\r\n        </div>\r\n        <div class=\"header-actions d-flex flex-row flex-sm-column justify-content-between justify-content-sm-center gap-2 mt-2 mt-sm-0\">\r\n          @if (!isLoading) {\r\n            <ds-status\r\n              status=\"{{statusClass(form?.header?.status?.['key'])}}\" class=\"header-status\">{{ form?.header?.status?.['value'] }}\r\n            </ds-status>\r\n          }\r\n          <div class=\"d-flex align-items-center justify-content-end gap-2\">\r\n            &lt;!&ndash; feedback&ndash;&gt;\r\n            &lt;!&ndash;            *ngIf=\"form?.inboxItem && (form?.inboxItem?.canRequestFeedback ==='true'|| form?.inboxItem?.hasFeedback==='true') && !isLoading\"&ndash;&gt;\r\n            &lt;!&ndash;  <ds-button\r\n                square icon size=\"small\" (click)=\"feedback()\">\r\n                <ds-icon\r\n                  icon=\"chat-o\" class=\"fs-20 fs-md-17 fc-coral\"\r\n                  [ngClass]=\"{'fc-green':feedBackIcon === 'feedbackResponded' , 'fc-red': feedBackIcon === 'respondToFeedback' , 'fc-yellow': feedBackIcon === 'waitingFeedback'}\">\r\n                </ds-icon>\r\n              </ds-button>&ndash;&gt;\r\n            <ds-button\r\n              *ngIf=\"form?.commentsDrop?.length > 0 && !isLoading\" square icon size=\"small\"\r\n              (click)=\"onCommentsFormClick()\" class=\"has-comments\">\r\n              <ds-icon icon=\"clock\" class=\"fc-coral fs-20 fs-md-17\"></ds-icon>\r\n            </ds-button>\r\n            @if (showApprovalHistory) {\r\n              <ng-container>\r\n                <ds-button\r\n                  color=\"white\" shape=\"text\" square size=\"small\" [satPopoverAnchor]=\"workflow\"\r\n                  #workflowAnchor=\"satPopoverAnchor\" (click)=\"workflowAnchor.popover.open()\">\r\n                  <slot name=\"prefix\">\r\n                    <ds-icon icon=\"workflow\" class=\"fs-24\"></ds-icon>\r\n                  </slot>\r\n                </ds-button>\r\n                <sat-popover\r\n                  #workflow [anchor]=\"workflowAnchor\" [hasBackdrop]=\"true\" verticalAlign=\"below\"\r\n                  horizontalAlign=\"end\">\r\n                  <div class=\"default-popover p-3\" style=\"min-width: 330px;\">\r\n                    <ds-approvals *ngIf=\"approvalHistory\" class=\"popover-approvals\" approvalsData=\"{{approvals}}\">\r\n                    </ds-approvals>\r\n                  </div>\r\n                </sat-popover>\r\n              </ng-container>\r\n            }\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n    </header>\r\n  </ng-container>-->\r\n}\r\n", styles: [".loading-width{min-width:100px;width:40px;flex-grow:1}.request-main-info{--item-bg: var(--light-gray);--item-fc: var(--black);--status-container-bc: #e8ebec;--status-container-brc: var(--dark-gray)}.request-main-info.warning{--item-bg: var(--yellow);--status-container-bc: #fff8d9;--status-container-brc: var(--yellow)}.request-main-info.pending{--item-bg: #eff0f1;--status-container-bc: #e8ebec;--status-container-brc: #c8ced1}.request-main-info.expired{--item-bg: var(--dark-gray);--status-container-bc: #e8ebec;--status-container-brc: var(--dark-gray)}.request-main-info.success{--item-bg: var(--green);--status-container-bc: #e6f9f4;--status-container-brc: var(--green)}.request-main-info.info{--item-bg: var(--sea-light);--status-container-bc: #fff8d9;--status-container-brc: var(--sea-light)}.request-main-info.danger{--item-bg: var(--red);--status-container-bc: #fae9ec;--status-container-brc: var(--red)}.request-main-info.orange,.request-main-info.send_back{--item-bg: var(--orange);--status-container-bc: #fff0eb;--status-container-brc: var(--orange)}.request-info{border-radius:0;box-shadow:var(--box-shadow);background-color:var(--white);border-top:5px solid var(--item-bg)}.request-info--footer{padding:20px 24px;min-height:45px;display:flex;align-items:center;gap:.75rem;border-top:1px solid var(--light-gray)}@media (max-width: 578px){.request-info--footer{padding:.3rem 1rem}}.request-info--footer__details{color:var(--item-fc)}.request-info--body{padding:2rem;display:flex;align-items:center;gap:.75rem;background-color:#fff}@media (max-width: 578px){.request-info--body{padding:1rem;flex-direction:column;align-items:stretch}}.request-info--body figure{min-width:30px;width:30px;text-align:center}.request-info--body figure svg{width:100%}@media (max-width: 578px){.request-info--status-action{justify-content:space-between}}.request-info--history{margin-top:-.5rem}.request-info--comment{background-color:#fff0eb;color:var(--orange);border-radius:0 0 4px 4px}.status-container{min-height:40px;padding:.5rem 1rem;display:flex;flex-direction:column;justify-content:center;gap:.5rem;margin-bottom:1.5rem}.status-container.danger{--item-bg: var(--red);--status-container-bc: #fae9ec;--status-container-brc: var(--red)}.status-container ::ng-deep ds-avatar.user-avatar .avatar{min-width:var(--default-size, 45px)!important;width:var(--default-size, 45px)!important;height:var(--default-size, 45px)!important;padding:var(--avatar-padding, 0)!important;background-color:var(--avatar-bg, white);color:var(--avatar-color, black)!important;border:var(--avatar-border, 0)!important;border-radius:var(--avatar-radius, 50%)!important;margin:var(--avatar-margin, 0)!important;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;--default-size: 25px}@media (min-width: 768px){.status-container ::ng-deep ds-avatar.user-avatar .avatar{--default-size: 31px;--avatar-border: 3px solid var(--light-gray)}}.circle-status::part(base){--status-radius: 50%;--status-size: 19px;--status-fs: 100%}ds-button[square]::part(base){--btn-padding: 0;--default-size-sm: 30px}.send-back-container{background-color:#fff0eb;color:var(--orange);padding:.5rem;border-radius:4px}object,iframe,embed{height:79vh}::ng-deep .history-popup{--popup-width: 100vw;--popup-max-width: 100vw;--popup-radius: 15px 15px 0 0;position:absolute!important;bottom:0}:host ::ng-deep .mat-expansion-panel-content{background:#fff!important}:host .main-sidenav.main-sidenav-full .sidenav-title{border-bottom:transparent!important}:host .main-sidenav .sidenav-title{background-color:transparent!important}:host .main-sidenav{height:60px;min-height:10px!important}:host .mat-expansion-panel-content{background:#fff!important}:host .approval-panel-container{display:grid;grid-template-columns:40% calc(60% - 45px) 20px;grid-template-areas:\"title details toggle\";gap:.75rem;place-content:space-between;align-items:center;flex-grow:1;width:100%}@media (max-width: 991px){:host .approval-panel-container{grid-template-columns:calc(100% - 45px) 20px;grid-template-areas:\"title toggle\" \"details details\"}}:host .approval-panel-container .approval-panel-title{grid-area:title}:host .approval-panel-container .panel-user-name{max-width:120px}@media (max-width: 768px){:host .approval-panel-container .panel-user-name.panel-ueser-only{max-width:140px}:host .approval-panel-container .panel-user-name:not(.panel-ueser-only){max-width:90px}}:host .approval-panel-container .approval-panel-details{display:flex;align-items:center;justify-content:space-between;grid-area:details}:host .approval-panel-container .approval-panel-toggle{grid-area:toggle;display:flex;align-items:center;justify-content:center;width:20px}:host ::ng-deep ds-avatar.user-avatar .avatar{min-width:var(--default-size, 45px)!important;width:var(--default-size, 45px)!important;height:var(--default-size, 45px)!important;padding:var(--avatar-padding, 0)!important;background-color:var(--avatar-bg, white);color:var(--avatar-color, black)!important;border:var(--avatar-border, 0)!important;border-radius:var(--avatar-radius, 50%)!important;margin:var(--avatar-margin, 0)!important;--default-size: 25px}@media (min-width: 768px){:host ::ng-deep ds-avatar.user-avatar .avatar{--default-size: 31px;--avatar-border: 3px solid var(--light-gray)}}@media (min-width: 768px){:host ::ng-deep .user-avatar-name{padding-inline-end:1rem!important}}:host .circle-status::part(base){--status-radius: 50%;--status-size: 18px;--status-fs: 80% }:host .panel-title{min-width:40%;width:40%}@media (max-width: 576px){:host .panel-title{min-width:100%!important;width:100%!important}}:host .panel-user-status{min-width:60%;width:60%;display:flex;align-items:center;justify-content:space-between}@media (max-width: 576px){:host .panel-user-status{min-width:100%!important;width:100%!important}:host .panel-user-status .user-delegate{min-width:auto}:host .panel-user-status .main-status::part(base){--status-width: 50px}}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: CoreService }, { type: CoreI18nService }, { type: FeedBackService }, { type: i1$1.MatDialog }, { type: SidenavService }, { type: i2.ToastrService }], propDecorators: { form: [{
                 type: Input
             }], showHistory: [{
@@ -7211,6 +7360,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                 type: Input
             }] } });
 
+class ExtractEmailFromProfileImagePipe {
+    transform(src) {
+        if (!src)
+            return null;
+        const url = new URL(src, window.location.origin);
+        const email = url.searchParams.get('email');
+        return email;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ExtractEmailFromProfileImagePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.15", ngImport: i0, type: ExtractEmailFromProfileImagePipe, isStandalone: true, name: "extractEmailFromProfileImage" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ExtractEmailFromProfileImagePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'extractEmailFromProfileImage',
+                    standalone: true,
+                }]
+        }] });
+
 const StatusMap = {
     [FORM_STATUS_REJECTED]: { class: 'danger', icon: 'close' },
     [FORM_STATUS_CANCELLED]: { class: 'danger', icon: 'close' },
@@ -7418,7 +7586,7 @@ class FormSectionComponent {
         return statusStrategy.icon;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: FormSectionComponent, deps: [{ token: CoreI18nService }, { token: CoreService }, { token: SidenavService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: FormSectionComponent, isStandalone: true, selector: "app-form-section", inputs: { requestDetails: "requestDetails", section: "section", form: "form", lov: "lov", isReadOnly: "isReadOnly", controllers: "controllers", segmentDynamicLoaderService: "segmentDynamicLoaderService", sectionFormComponent: "sectionFormComponent", sectionName: "sectionName" }, ngImport: i0, template: "<mat-expansion-panel class=\"mb-4\" [expanded]=\"isExpanded\" hideToggle #approvalPanel=\"matExpansionPanel\">\r\n  <mat-expansion-panel-header>\r\n\r\n    <div class=\"approval-panel-container\">\r\n      <div class=\"d-flex gap-2 flex-grow-1 approval-panel-title\">\r\n        <ds-status\r\n          status=\"{{statusClass(sectionStatusKey)}}\" no-opacity icon\r\n          class=\"circle-status d-none d-sm-inline-block\">\r\n          <ds-icon icon=\"{{statusIcon(sectionStatusKey)}}\"></ds-icon>\r\n        </ds-status>\r\n        <div class=\"d-flex flex-column flex-grow-1\">\r\n          <span class=\"fs-16 fw-medium m-0\"> {{ sectionName }}</span>\r\n          @if (section.header?.processedBy) {\r\n            <bdi class=\"fs-12 fc-dark-gray fw-normal line-height-1 d-block mt-1\">\r\n              {{ processingDate }}\r\n            </bdi>\r\n          }\r\n        </div>\r\n      </div>\r\n      <div class=\"approval-panel-details gap-1\">\r\n        @if (!section?.body?.details?.['stage0']?.['isStage0'] || section?.body?.details?.['stage0']?.['isStage0'] === 'false') {\r\n          <ng-container>\r\n            @if (section?.header?.personTo) {\r\n              <div\r\n                class=\"d-flex align-items-center gap-3\"\r\n                (click)=\"$event.stopImmediatePropagation();\">\r\n                <div\r\n                  (click)=\"toggleSmallProfileInfo($event, 'recipient')\"\r\n                  class=\"d-flex align-items-center gap-2 radius-3 h-40\"\r\n                  [ngClass]=\"{'user-avatar-name px-0 px-md-2': !section?.header?.delegatedTo, 'p-0': section?.header?.delegatedTo}\">\r\n                  <ds-avatar image=\"{{section?.header?.personToThumbnail}}\" size=\"small\" class=\"user-avatar\"></ds-avatar>\r\n                  @if (!section?.header?.delegatedTo) {\r\n                    <span\r\n                      class=\"fs-14 fw-medium d-inline-block panel-user-name text-truncate\"\r\n                      [ngClass]=\"{'panel-user-only': !section?.header?.delegatedTo}\"\r\n                    >{{ section?.header?.personTo }}</span>\r\n                  }\r\n                </div>\r\n                @if (section?.header?.delegatedTo) {\r\n                  <div\r\n                    class=\"d-flex align-items-center gap-3\"\r\n                    (click)=\"toggleSmallProfileInfo($event, 'delegate')\">\r\n                    <img\r\n                      class=\"rotate-arrow\"\r\n                      alt=\"\"\r\n                      src=\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMSIgaGVpZ2h0PSIxMyIgdmlld0JveD0iMCAwIDIxIDEzIj48cGF0aCBkPSJNMjEsNy43NjNhMS42MjEsMS42MjEsMCwwLDEtLjQ0Ny41OTMsMS4zMDYsMS4zMDYsMCwwLDEtLjc1LjE5NGMtNy4yODQsMC04LjU2OCwwLTE1Ljg1MywwSDMuNjY5TDMuNjMsOC42Yy4wNzcuMDY0LjE1OC4xMjQuMjI5LjE5NHExLjcxLDEuNjksMy40MiwzLjM4MWExLjAyMywxLjAyMywwLDAsMSwuMjkxLDEuMDc5Ljk5Mi45OTIsMCwwLDEtLjguNzE5LDEuMDUzLDEuMDUzLDAsMCwxLTEtLjMzMVEzLjgzMSwxMS43MTksMS44ODYsOS44Yy0uNDQyLS40MzctLjg3OS0uODgxLTEuMzMtMS4zMDlBNC41NzIsNC41NzIsMCwwLDEsMCw3LjgxNFY3LjE4NUEzMC43ODMsMzAuNzgzLDAsMCwxLDIuNzMsNC4zNzFjMS0xLjAyNywyLjAzOC0yLjAyNSwzLjA2My0zLjAzMkExLjA0OSwxLjA0OSwwLDEsMSw3LjI3NywyLjgyQzYuNCwzLjcsNS41MDksNC41Nyw0LjYyNSw1LjQ0NmMtLjMyMy4zMjEtLjY0NC42NDUtLjk3My45NzYuMDg0LjA1OS4xODEuMDI3LjI3LjAyNyw3LjI1OCwwLDguNTE2LDAsMTUuNzc1LDBBMS4xMjksMS4xMjksMCwwLDEsMjEsNy4yOXYuNDcyWiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAtMC45OTkpIiBmaWxsPSIjYTU0ZWUxIi8+PC9zdmc+\"/>\r\n                    <div class=\"d-flex align-items-center gap-2 px-0 px-md-2 radius-3 user-avatar-name h-40\">\r\n                      <ds-avatar image=\"{{section?.header?.delegatedToThumbnail}}\" size=\"small\" class=\"user-avatar\"></ds-avatar>\r\n                      <span\r\n                        class=\"fs-14 fw-medium d-inline-block panel-user-name text-truncate\">{{ section?.header?.delegatedTo }}</span>\r\n                    </div>\r\n                  </div>\r\n                }\r\n              </div>\r\n            }\r\n          </ng-container>\r\n        }\r\n\r\n        @if (section?.body?.details?.['decision']?.key) {\r\n          <ds-status\r\n            class=\"main-status\"\r\n            status=\"{{statusClass(section?.body?.details?.['decision']?.key)}}\">{{ section?.body?.details?.['decision']?.value }}\r\n          </ds-status>\r\n        }\r\n      </div>\r\n\r\n      <div class=\"approval-panel-toggle\">\r\n        @if (approvalPanel.expanded) {\r\n          <ds-icon icon=\"minus\" class=\"fs-20 fc-dark-gray\"></ds-icon>\r\n        } @else {\r\n          <ds-icon icon=\"plus-1\" class=\"fs-20 fc-coral\"></ds-icon>\r\n        }\r\n      </div>\r\n\r\n    </div>\r\n  </mat-expansion-panel-header>\r\n  <section class=\"border-top pt-4\">\r\n    <ng-container *ngComponentOutlet=\"sectionFormComponent; ndcDynamicInputs: input\"></ng-container>\r\n  </section>\r\n\r\n</mat-expansion-panel>\r\n", styles: [":host ::ng-deep .mat-expansion-panel-content{background:#fff!important}:host .mat-expansion-panel-content{background:#fff!important}:host .approval-panel-container{display:grid;grid-template-columns:40% calc(60% - 45px) 20px;grid-template-areas:\"title details toggle\";gap:.75rem;place-content:space-between;align-items:center;flex-grow:1;width:100%}@media (max-width: 991px){:host .approval-panel-container{grid-template-columns:calc(100% - 45px) 20px;grid-template-areas:\"title toggle\" \"details details\"}}:host .approval-panel-container .approval-panel-title{grid-area:title}:host .approval-panel-container .panel-user-name{max-width:120px}@media (max-width: 768px){:host .approval-panel-container .panel-user-name.panel-ueser-only{max-width:140px}:host .approval-panel-container .panel-user-name:not(.panel-ueser-only){max-width:90px}}:host .approval-panel-container .approval-panel-details{display:flex;align-items:center;justify-content:space-between;grid-area:details}:host .approval-panel-container .approval-panel-toggle{grid-area:toggle;display:flex;align-items:center;justify-content:center;width:20px}:host ::ng-deep ds-avatar.user-avatar .avatar{min-width:var(--default-size, 45px)!important;width:var(--default-size, 45px)!important;height:var(--default-size, 45px)!important;padding:var(--avatar-padding, 0)!important;background-color:var(--avatar-bg, white);color:var(--avatar-color, black)!important;border:var(--avatar-border, 0)!important;border-radius:var(--avatar-radius, 50%)!important;margin:var(--avatar-margin, 0)!important;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;--default-size: 25px}@media (min-width: 768px){:host ::ng-deep ds-avatar.user-avatar .avatar{--default-size: 31px;--avatar-border: 3px solid var(--light-gray)}}@media (min-width: 768px){:host ::ng-deep .user-avatar-name{padding-inline-end:1rem!important}}:host .circle-status::part(base){--status-radius: 50%;--status-size: 18px;--status-fs: 80% }:host .panel-title{min-width:40%;width:40%}@media (max-width: 576px){:host .panel-title{min-width:100%!important;width:100%!important}}:host .panel-user-status{min-width:60%;width:60%;display:flex;align-items:center;justify-content:space-between}@media (max-width: 576px){:host .panel-user-status{min-width:100%!important;width:100%!important}:host .panel-user-status .user-delegate{min-width:auto}:host .panel-user-status .main-status::part(base){--status-width: 50px}}\n"], dependencies: [{ kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i2$6.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i2$6.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: ComponentOutletIoDirective, selector: "[ngComponentOutletNdcDynamicInputs],[ngComponentOutletNdcDynamicOutputs]", inputs: ["ngComponentOutletNdcDynamicInputs", "ngComponentOutletNdcDynamicOutputs"], exportAs: ["ndcDynamicIo"] }, { kind: "ngmodule", type: SatPopoverModule }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: DynamicModule }, { kind: "directive", type: i3$1.ComponentOutletInjectorDirective, selector: "[ngComponentOutlet]", exportAs: ["ndcComponentOutletInjector"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: FormSectionComponent, isStandalone: true, selector: "app-form-section", inputs: { requestDetails: "requestDetails", section: "section", form: "form", lov: "lov", isReadOnly: "isReadOnly", controllers: "controllers", segmentDynamicLoaderService: "segmentDynamicLoaderService", sectionFormComponent: "sectionFormComponent", sectionName: "sectionName" }, ngImport: i0, template: "<mat-expansion-panel class=\"mb-4\" [expanded]=\"isExpanded\" hideToggle #approvalPanel=\"matExpansionPanel\">\r\n  <mat-expansion-panel-header>\r\n\r\n    <div class=\"approval-panel-container\">\r\n      <div class=\"d-flex gap-2 flex-grow-1 approval-panel-title\">\r\n        <ds-status\r\n          status=\"{{statusClass(sectionStatusKey)}}\" no-opacity icon\r\n          class=\"circle-status d-none d-sm-inline-block\">\r\n          <ds-icon icon=\"{{statusIcon(sectionStatusKey)}}\"></ds-icon>\r\n        </ds-status>\r\n        <div class=\"d-flex flex-column flex-grow-1\">\r\n          <span class=\"fs-16 fw-medium m-0\"> {{ sectionName }}</span>\r\n          @if (section.header?.processedBy) {\r\n            <bdi class=\"fs-12 fc-dark-gray fw-normal line-height-1 d-block mt-1\">\r\n              {{ processingDate }}\r\n            </bdi>\r\n          }\r\n        </div>\r\n      </div>\r\n      <div class=\"approval-panel-details gap-1\">\r\n        @if (!section?.body?.details?.['stage0']?.['isStage0'] || section?.body?.details?.['stage0']?.['isStage0'] === 'false') {\r\n          <ng-container>\r\n            @if (section?.header?.personTo) {\r\n              <div\r\n                class=\"d-flex align-items-center gap-3\"\r\n                (click)=\"$event.stopImmediatePropagation();\">\r\n                <div\r\n                  (click)=\"toggleSmallProfileInfo($event, 'recipient')\"\r\n                  class=\"d-flex align-items-center gap-2 radius-3 h-40\"\r\n                  [ngClass]=\"{'user-avatar-name px-0 px-md-2': !section?.header?.delegatedTo, 'p-0': section?.header?.delegatedTo}\">\r\n                  <ds-avatar [profileImageByEmail]=\"section?.header?.personToThumbnail | extractEmailFromProfileImage\" size=\"small\" class=\"user-avatar\"></ds-avatar>\r\n                  @if (!section?.header?.delegatedTo) {\r\n                    <span\r\n                      class=\"fs-14 fw-medium d-inline-block panel-user-name text-truncate\"\r\n                      [ngClass]=\"{'panel-user-only': !section?.header?.delegatedTo}\"\r\n                    >{{ section?.header?.personTo }}</span>\r\n                  }\r\n                </div>\r\n                @if (section?.header?.delegatedTo) {\r\n                  <div\r\n                    class=\"d-flex align-items-center gap-3\"\r\n                    (click)=\"toggleSmallProfileInfo($event, 'delegate')\">\r\n                    <img\r\n                      class=\"rotate-arrow\"\r\n                      alt=\"\"\r\n                      src=\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMSIgaGVpZ2h0PSIxMyIgdmlld0JveD0iMCAwIDIxIDEzIj48cGF0aCBkPSJNMjEsNy43NjNhMS42MjEsMS42MjEsMCwwLDEtLjQ0Ny41OTMsMS4zMDYsMS4zMDYsMCwwLDEtLjc1LjE5NGMtNy4yODQsMC04LjU2OCwwLTE1Ljg1MywwSDMuNjY5TDMuNjMsOC42Yy4wNzcuMDY0LjE1OC4xMjQuMjI5LjE5NHExLjcxLDEuNjksMy40MiwzLjM4MWExLjAyMywxLjAyMywwLDAsMSwuMjkxLDEuMDc5Ljk5Mi45OTIsMCwwLDEtLjguNzE5LDEuMDUzLDEuMDUzLDAsMCwxLTEtLjMzMVEzLjgzMSwxMS43MTksMS44ODYsOS44Yy0uNDQyLS40MzctLjg3OS0uODgxLTEuMzMtMS4zMDlBNC41NzIsNC41NzIsMCwwLDEsMCw3LjgxNFY3LjE4NUEzMC43ODMsMzAuNzgzLDAsMCwxLDIuNzMsNC4zNzFjMS0xLjAyNywyLjAzOC0yLjAyNSwzLjA2My0zLjAzMkExLjA0OSwxLjA0OSwwLDEsMSw3LjI3NywyLjgyQzYuNCwzLjcsNS41MDksNC41Nyw0LjYyNSw1LjQ0NmMtLjMyMy4zMjEtLjY0NC42NDUtLjk3My45NzYuMDg0LjA1OS4xODEuMDI3LjI3LjAyNyw3LjI1OCwwLDguNTE2LDAsMTUuNzc1LDBBMS4xMjksMS4xMjksMCwwLDEsMjEsNy4yOXYuNDcyWiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAtMC45OTkpIiBmaWxsPSIjYTU0ZWUxIi8+PC9zdmc+\"/>\r\n                    <div class=\"d-flex align-items-center gap-2 px-0 px-md-2 radius-3 user-avatar-name h-40\">\r\n                      <ds-avatar [profileImageByEmail]=\"section?.header?.delegatedToThumbnail | extractEmailFromProfileImage\"  size=\"small\" class=\"user-avatar\"></ds-avatar>\r\n                      <span\r\n                        class=\"fs-14 fw-medium d-inline-block panel-user-name text-truncate\">{{ section?.header?.delegatedTo }}</span>\r\n                    </div>\r\n                  </div>\r\n                }\r\n              </div>\r\n            }\r\n          </ng-container>\r\n        }\r\n\r\n        @if (section?.body?.details?.['decision']?.key) {\r\n          <ds-status\r\n            class=\"main-status\"\r\n            status=\"{{statusClass(section?.body?.details?.['decision']?.key)}}\">{{ section?.body?.details?.['decision']?.value }}\r\n          </ds-status>\r\n        }\r\n      </div>\r\n\r\n      <div class=\"approval-panel-toggle\">\r\n        @if (approvalPanel.expanded) {\r\n          <ds-icon icon=\"minus\" class=\"fs-20 fc-dark-gray\"></ds-icon>\r\n        } @else {\r\n          <ds-icon icon=\"plus-1\" class=\"fs-20 fc-coral\"></ds-icon>\r\n        }\r\n      </div>\r\n\r\n    </div>\r\n  </mat-expansion-panel-header>\r\n  <section class=\"border-top pt-4\">\r\n    <ng-container *ngComponentOutlet=\"sectionFormComponent; ndcDynamicInputs: input\"></ng-container>\r\n  </section>\r\n\r\n</mat-expansion-panel>\r\n", styles: [":host ::ng-deep .mat-expansion-panel-content{background:#fff!important}:host .mat-expansion-panel-content{background:#fff!important}:host .approval-panel-container{display:grid;grid-template-columns:40% calc(60% - 45px) 20px;grid-template-areas:\"title details toggle\";gap:.75rem;place-content:space-between;align-items:center;flex-grow:1;width:100%}@media (max-width: 991px){:host .approval-panel-container{grid-template-columns:calc(100% - 45px) 20px;grid-template-areas:\"title toggle\" \"details details\"}}:host .approval-panel-container .approval-panel-title{grid-area:title}:host .approval-panel-container .panel-user-name{max-width:120px}@media (max-width: 768px){:host .approval-panel-container .panel-user-name.panel-ueser-only{max-width:140px}:host .approval-panel-container .panel-user-name:not(.panel-ueser-only){max-width:90px}}:host .approval-panel-container .approval-panel-details{display:flex;align-items:center;justify-content:space-between;grid-area:details}:host .approval-panel-container .approval-panel-toggle{grid-area:toggle;display:flex;align-items:center;justify-content:center;width:20px}:host ::ng-deep ds-avatar.user-avatar .avatar{min-width:var(--default-size, 45px)!important;width:var(--default-size, 45px)!important;height:var(--default-size, 45px)!important;padding:var(--avatar-padding, 0)!important;background-color:var(--avatar-bg, white);color:var(--avatar-color, black)!important;border:var(--avatar-border, 0)!important;border-radius:var(--avatar-radius, 50%)!important;margin:var(--avatar-margin, 0)!important;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;--default-size: 25px}@media (min-width: 768px){:host ::ng-deep ds-avatar.user-avatar .avatar{--default-size: 31px;--avatar-border: 3px solid var(--light-gray)}}@media (min-width: 768px){:host ::ng-deep .user-avatar-name{padding-inline-end:1rem!important}}:host .circle-status::part(base){--status-radius: 50%;--status-size: 18px;--status-fs: 80% }:host .panel-title{min-width:40%;width:40%}@media (max-width: 576px){:host .panel-title{min-width:100%!important;width:100%!important}}:host .panel-user-status{min-width:60%;width:60%;display:flex;align-items:center;justify-content:space-between}@media (max-width: 576px){:host .panel-user-status{min-width:100%!important;width:100%!important}:host .panel-user-status .user-delegate{min-width:auto}:host .panel-user-status .main-status::part(base){--status-width: 50px}}\n"], dependencies: [{ kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i2$6.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i2$6.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: ComponentOutletIoDirective, selector: "[ngComponentOutletNdcDynamicInputs],[ngComponentOutletNdcDynamicOutputs]", inputs: ["ngComponentOutletNdcDynamicInputs", "ngComponentOutletNdcDynamicOutputs"], exportAs: ["ndcDynamicIo"] }, { kind: "ngmodule", type: SatPopoverModule }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: DynamicModule }, { kind: "directive", type: i3$1.ComponentOutletInjectorDirective, selector: "[ngComponentOutlet]", exportAs: ["ndcComponentOutletInjector"] }, { kind: "pipe", type: ExtractEmailFromProfileImagePipe, name: "extractEmailFromProfileImage" }, { kind: "directive", type: ProfileImageByEmailDirective, selector: "img[profileImageByEmail], ds-avatar[profileImageByEmail]", inputs: ["profileImageByEmail"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: FormSectionComponent, decorators: [{
             type: Component,
@@ -7430,8 +7598,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                         ComponentOutletIoDirective,
                         SatPopoverModule,
                         NgClass,
-                        DynamicModule
-                    ], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<mat-expansion-panel class=\"mb-4\" [expanded]=\"isExpanded\" hideToggle #approvalPanel=\"matExpansionPanel\">\r\n  <mat-expansion-panel-header>\r\n\r\n    <div class=\"approval-panel-container\">\r\n      <div class=\"d-flex gap-2 flex-grow-1 approval-panel-title\">\r\n        <ds-status\r\n          status=\"{{statusClass(sectionStatusKey)}}\" no-opacity icon\r\n          class=\"circle-status d-none d-sm-inline-block\">\r\n          <ds-icon icon=\"{{statusIcon(sectionStatusKey)}}\"></ds-icon>\r\n        </ds-status>\r\n        <div class=\"d-flex flex-column flex-grow-1\">\r\n          <span class=\"fs-16 fw-medium m-0\"> {{ sectionName }}</span>\r\n          @if (section.header?.processedBy) {\r\n            <bdi class=\"fs-12 fc-dark-gray fw-normal line-height-1 d-block mt-1\">\r\n              {{ processingDate }}\r\n            </bdi>\r\n          }\r\n        </div>\r\n      </div>\r\n      <div class=\"approval-panel-details gap-1\">\r\n        @if (!section?.body?.details?.['stage0']?.['isStage0'] || section?.body?.details?.['stage0']?.['isStage0'] === 'false') {\r\n          <ng-container>\r\n            @if (section?.header?.personTo) {\r\n              <div\r\n                class=\"d-flex align-items-center gap-3\"\r\n                (click)=\"$event.stopImmediatePropagation();\">\r\n                <div\r\n                  (click)=\"toggleSmallProfileInfo($event, 'recipient')\"\r\n                  class=\"d-flex align-items-center gap-2 radius-3 h-40\"\r\n                  [ngClass]=\"{'user-avatar-name px-0 px-md-2': !section?.header?.delegatedTo, 'p-0': section?.header?.delegatedTo}\">\r\n                  <ds-avatar image=\"{{section?.header?.personToThumbnail}}\" size=\"small\" class=\"user-avatar\"></ds-avatar>\r\n                  @if (!section?.header?.delegatedTo) {\r\n                    <span\r\n                      class=\"fs-14 fw-medium d-inline-block panel-user-name text-truncate\"\r\n                      [ngClass]=\"{'panel-user-only': !section?.header?.delegatedTo}\"\r\n                    >{{ section?.header?.personTo }}</span>\r\n                  }\r\n                </div>\r\n                @if (section?.header?.delegatedTo) {\r\n                  <div\r\n                    class=\"d-flex align-items-center gap-3\"\r\n                    (click)=\"toggleSmallProfileInfo($event, 'delegate')\">\r\n                    <img\r\n                      class=\"rotate-arrow\"\r\n                      alt=\"\"\r\n                      src=\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMSIgaGVpZ2h0PSIxMyIgdmlld0JveD0iMCAwIDIxIDEzIj48cGF0aCBkPSJNMjEsNy43NjNhMS42MjEsMS42MjEsMCwwLDEtLjQ0Ny41OTMsMS4zMDYsMS4zMDYsMCwwLDEtLjc1LjE5NGMtNy4yODQsMC04LjU2OCwwLTE1Ljg1MywwSDMuNjY5TDMuNjMsOC42Yy4wNzcuMDY0LjE1OC4xMjQuMjI5LjE5NHExLjcxLDEuNjksMy40MiwzLjM4MWExLjAyMywxLjAyMywwLDAsMSwuMjkxLDEuMDc5Ljk5Mi45OTIsMCwwLDEtLjguNzE5LDEuMDUzLDEuMDUzLDAsMCwxLTEtLjMzMVEzLjgzMSwxMS43MTksMS44ODYsOS44Yy0uNDQyLS40MzctLjg3OS0uODgxLTEuMzMtMS4zMDlBNC41NzIsNC41NzIsMCwwLDEsMCw3LjgxNFY3LjE4NUEzMC43ODMsMzAuNzgzLDAsMCwxLDIuNzMsNC4zNzFjMS0xLjAyNywyLjAzOC0yLjAyNSwzLjA2My0zLjAzMkExLjA0OSwxLjA0OSwwLDEsMSw3LjI3NywyLjgyQzYuNCwzLjcsNS41MDksNC41Nyw0LjYyNSw1LjQ0NmMtLjMyMy4zMjEtLjY0NC42NDUtLjk3My45NzYuMDg0LjA1OS4xODEuMDI3LjI3LjAyNyw3LjI1OCwwLDguNTE2LDAsMTUuNzc1LDBBMS4xMjksMS4xMjksMCwwLDEsMjEsNy4yOXYuNDcyWiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAtMC45OTkpIiBmaWxsPSIjYTU0ZWUxIi8+PC9zdmc+\"/>\r\n                    <div class=\"d-flex align-items-center gap-2 px-0 px-md-2 radius-3 user-avatar-name h-40\">\r\n                      <ds-avatar image=\"{{section?.header?.delegatedToThumbnail}}\" size=\"small\" class=\"user-avatar\"></ds-avatar>\r\n                      <span\r\n                        class=\"fs-14 fw-medium d-inline-block panel-user-name text-truncate\">{{ section?.header?.delegatedTo }}</span>\r\n                    </div>\r\n                  </div>\r\n                }\r\n              </div>\r\n            }\r\n          </ng-container>\r\n        }\r\n\r\n        @if (section?.body?.details?.['decision']?.key) {\r\n          <ds-status\r\n            class=\"main-status\"\r\n            status=\"{{statusClass(section?.body?.details?.['decision']?.key)}}\">{{ section?.body?.details?.['decision']?.value }}\r\n          </ds-status>\r\n        }\r\n      </div>\r\n\r\n      <div class=\"approval-panel-toggle\">\r\n        @if (approvalPanel.expanded) {\r\n          <ds-icon icon=\"minus\" class=\"fs-20 fc-dark-gray\"></ds-icon>\r\n        } @else {\r\n          <ds-icon icon=\"plus-1\" class=\"fs-20 fc-coral\"></ds-icon>\r\n        }\r\n      </div>\r\n\r\n    </div>\r\n  </mat-expansion-panel-header>\r\n  <section class=\"border-top pt-4\">\r\n    <ng-container *ngComponentOutlet=\"sectionFormComponent; ndcDynamicInputs: input\"></ng-container>\r\n  </section>\r\n\r\n</mat-expansion-panel>\r\n", styles: [":host ::ng-deep .mat-expansion-panel-content{background:#fff!important}:host .mat-expansion-panel-content{background:#fff!important}:host .approval-panel-container{display:grid;grid-template-columns:40% calc(60% - 45px) 20px;grid-template-areas:\"title details toggle\";gap:.75rem;place-content:space-between;align-items:center;flex-grow:1;width:100%}@media (max-width: 991px){:host .approval-panel-container{grid-template-columns:calc(100% - 45px) 20px;grid-template-areas:\"title toggle\" \"details details\"}}:host .approval-panel-container .approval-panel-title{grid-area:title}:host .approval-panel-container .panel-user-name{max-width:120px}@media (max-width: 768px){:host .approval-panel-container .panel-user-name.panel-ueser-only{max-width:140px}:host .approval-panel-container .panel-user-name:not(.panel-ueser-only){max-width:90px}}:host .approval-panel-container .approval-panel-details{display:flex;align-items:center;justify-content:space-between;grid-area:details}:host .approval-panel-container .approval-panel-toggle{grid-area:toggle;display:flex;align-items:center;justify-content:center;width:20px}:host ::ng-deep ds-avatar.user-avatar .avatar{min-width:var(--default-size, 45px)!important;width:var(--default-size, 45px)!important;height:var(--default-size, 45px)!important;padding:var(--avatar-padding, 0)!important;background-color:var(--avatar-bg, white);color:var(--avatar-color, black)!important;border:var(--avatar-border, 0)!important;border-radius:var(--avatar-radius, 50%)!important;margin:var(--avatar-margin, 0)!important;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;--default-size: 25px}@media (min-width: 768px){:host ::ng-deep ds-avatar.user-avatar .avatar{--default-size: 31px;--avatar-border: 3px solid var(--light-gray)}}@media (min-width: 768px){:host ::ng-deep .user-avatar-name{padding-inline-end:1rem!important}}:host .circle-status::part(base){--status-radius: 50%;--status-size: 18px;--status-fs: 80% }:host .panel-title{min-width:40%;width:40%}@media (max-width: 576px){:host .panel-title{min-width:100%!important;width:100%!important}}:host .panel-user-status{min-width:60%;width:60%;display:flex;align-items:center;justify-content:space-between}@media (max-width: 576px){:host .panel-user-status{min-width:100%!important;width:100%!important}:host .panel-user-status .user-delegate{min-width:auto}:host .panel-user-status .main-status::part(base){--status-width: 50px}}\n"] }]
+                        DynamicModule,
+                        ExtractEmailFromProfileImagePipe,
+                        ProfileImageByEmailDirective
+                    ], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<mat-expansion-panel class=\"mb-4\" [expanded]=\"isExpanded\" hideToggle #approvalPanel=\"matExpansionPanel\">\r\n  <mat-expansion-panel-header>\r\n\r\n    <div class=\"approval-panel-container\">\r\n      <div class=\"d-flex gap-2 flex-grow-1 approval-panel-title\">\r\n        <ds-status\r\n          status=\"{{statusClass(sectionStatusKey)}}\" no-opacity icon\r\n          class=\"circle-status d-none d-sm-inline-block\">\r\n          <ds-icon icon=\"{{statusIcon(sectionStatusKey)}}\"></ds-icon>\r\n        </ds-status>\r\n        <div class=\"d-flex flex-column flex-grow-1\">\r\n          <span class=\"fs-16 fw-medium m-0\"> {{ sectionName }}</span>\r\n          @if (section.header?.processedBy) {\r\n            <bdi class=\"fs-12 fc-dark-gray fw-normal line-height-1 d-block mt-1\">\r\n              {{ processingDate }}\r\n            </bdi>\r\n          }\r\n        </div>\r\n      </div>\r\n      <div class=\"approval-panel-details gap-1\">\r\n        @if (!section?.body?.details?.['stage0']?.['isStage0'] || section?.body?.details?.['stage0']?.['isStage0'] === 'false') {\r\n          <ng-container>\r\n            @if (section?.header?.personTo) {\r\n              <div\r\n                class=\"d-flex align-items-center gap-3\"\r\n                (click)=\"$event.stopImmediatePropagation();\">\r\n                <div\r\n                  (click)=\"toggleSmallProfileInfo($event, 'recipient')\"\r\n                  class=\"d-flex align-items-center gap-2 radius-3 h-40\"\r\n                  [ngClass]=\"{'user-avatar-name px-0 px-md-2': !section?.header?.delegatedTo, 'p-0': section?.header?.delegatedTo}\">\r\n                  <ds-avatar [profileImageByEmail]=\"section?.header?.personToThumbnail | extractEmailFromProfileImage\" size=\"small\" class=\"user-avatar\"></ds-avatar>\r\n                  @if (!section?.header?.delegatedTo) {\r\n                    <span\r\n                      class=\"fs-14 fw-medium d-inline-block panel-user-name text-truncate\"\r\n                      [ngClass]=\"{'panel-user-only': !section?.header?.delegatedTo}\"\r\n                    >{{ section?.header?.personTo }}</span>\r\n                  }\r\n                </div>\r\n                @if (section?.header?.delegatedTo) {\r\n                  <div\r\n                    class=\"d-flex align-items-center gap-3\"\r\n                    (click)=\"toggleSmallProfileInfo($event, 'delegate')\">\r\n                    <img\r\n                      class=\"rotate-arrow\"\r\n                      alt=\"\"\r\n                      src=\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMSIgaGVpZ2h0PSIxMyIgdmlld0JveD0iMCAwIDIxIDEzIj48cGF0aCBkPSJNMjEsNy43NjNhMS42MjEsMS42MjEsMCwwLDEtLjQ0Ny41OTMsMS4zMDYsMS4zMDYsMCwwLDEtLjc1LjE5NGMtNy4yODQsMC04LjU2OCwwLTE1Ljg1MywwSDMuNjY5TDMuNjMsOC42Yy4wNzcuMDY0LjE1OC4xMjQuMjI5LjE5NHExLjcxLDEuNjksMy40MiwzLjM4MWExLjAyMywxLjAyMywwLDAsMSwuMjkxLDEuMDc5Ljk5Mi45OTIsMCwwLDEtLjguNzE5LDEuMDUzLDEuMDUzLDAsMCwxLTEtLjMzMVEzLjgzMSwxMS43MTksMS44ODYsOS44Yy0uNDQyLS40MzctLjg3OS0uODgxLTEuMzMtMS4zMDlBNC41NzIsNC41NzIsMCwwLDEsMCw3LjgxNFY3LjE4NUEzMC43ODMsMzAuNzgzLDAsMCwxLDIuNzMsNC4zNzFjMS0xLjAyNywyLjAzOC0yLjAyNSwzLjA2My0zLjAzMkExLjA0OSwxLjA0OSwwLDEsMSw3LjI3NywyLjgyQzYuNCwzLjcsNS41MDksNC41Nyw0LjYyNSw1LjQ0NmMtLjMyMy4zMjEtLjY0NC42NDUtLjk3My45NzYuMDg0LjA1OS4xODEuMDI3LjI3LjAyNyw3LjI1OCwwLDguNTE2LDAsMTUuNzc1LDBBMS4xMjksMS4xMjksMCwwLDEsMjEsNy4yOXYuNDcyWiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAtMC45OTkpIiBmaWxsPSIjYTU0ZWUxIi8+PC9zdmc+\"/>\r\n                    <div class=\"d-flex align-items-center gap-2 px-0 px-md-2 radius-3 user-avatar-name h-40\">\r\n                      <ds-avatar [profileImageByEmail]=\"section?.header?.delegatedToThumbnail | extractEmailFromProfileImage\"  size=\"small\" class=\"user-avatar\"></ds-avatar>\r\n                      <span\r\n                        class=\"fs-14 fw-medium d-inline-block panel-user-name text-truncate\">{{ section?.header?.delegatedTo }}</span>\r\n                    </div>\r\n                  </div>\r\n                }\r\n              </div>\r\n            }\r\n          </ng-container>\r\n        }\r\n\r\n        @if (section?.body?.details?.['decision']?.key) {\r\n          <ds-status\r\n            class=\"main-status\"\r\n            status=\"{{statusClass(section?.body?.details?.['decision']?.key)}}\">{{ section?.body?.details?.['decision']?.value }}\r\n          </ds-status>\r\n        }\r\n      </div>\r\n\r\n      <div class=\"approval-panel-toggle\">\r\n        @if (approvalPanel.expanded) {\r\n          <ds-icon icon=\"minus\" class=\"fs-20 fc-dark-gray\"></ds-icon>\r\n        } @else {\r\n          <ds-icon icon=\"plus-1\" class=\"fs-20 fc-coral\"></ds-icon>\r\n        }\r\n      </div>\r\n\r\n    </div>\r\n  </mat-expansion-panel-header>\r\n  <section class=\"border-top pt-4\">\r\n    <ng-container *ngComponentOutlet=\"sectionFormComponent; ndcDynamicInputs: input\"></ng-container>\r\n  </section>\r\n\r\n</mat-expansion-panel>\r\n", styles: [":host ::ng-deep .mat-expansion-panel-content{background:#fff!important}:host .mat-expansion-panel-content{background:#fff!important}:host .approval-panel-container{display:grid;grid-template-columns:40% calc(60% - 45px) 20px;grid-template-areas:\"title details toggle\";gap:.75rem;place-content:space-between;align-items:center;flex-grow:1;width:100%}@media (max-width: 991px){:host .approval-panel-container{grid-template-columns:calc(100% - 45px) 20px;grid-template-areas:\"title toggle\" \"details details\"}}:host .approval-panel-container .approval-panel-title{grid-area:title}:host .approval-panel-container .panel-user-name{max-width:120px}@media (max-width: 768px){:host .approval-panel-container .panel-user-name.panel-ueser-only{max-width:140px}:host .approval-panel-container .panel-user-name:not(.panel-ueser-only){max-width:90px}}:host .approval-panel-container .approval-panel-details{display:flex;align-items:center;justify-content:space-between;grid-area:details}:host .approval-panel-container .approval-panel-toggle{grid-area:toggle;display:flex;align-items:center;justify-content:center;width:20px}:host ::ng-deep ds-avatar.user-avatar .avatar{min-width:var(--default-size, 45px)!important;width:var(--default-size, 45px)!important;height:var(--default-size, 45px)!important;padding:var(--avatar-padding, 0)!important;background-color:var(--avatar-bg, white);color:var(--avatar-color, black)!important;border:var(--avatar-border, 0)!important;border-radius:var(--avatar-radius, 50%)!important;margin:var(--avatar-margin, 0)!important;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;--default-size: 25px}@media (min-width: 768px){:host ::ng-deep ds-avatar.user-avatar .avatar{--default-size: 31px;--avatar-border: 3px solid var(--light-gray)}}@media (min-width: 768px){:host ::ng-deep .user-avatar-name{padding-inline-end:1rem!important}}:host .circle-status::part(base){--status-radius: 50%;--status-size: 18px;--status-fs: 80% }:host .panel-title{min-width:40%;width:40%}@media (max-width: 576px){:host .panel-title{min-width:100%!important;width:100%!important}}:host .panel-user-status{min-width:60%;width:60%;display:flex;align-items:center;justify-content:space-between}@media (max-width: 576px){:host .panel-user-status{min-width:100%!important;width:100%!important}:host .panel-user-status .user-delegate{min-width:auto}:host .panel-user-status .main-status::part(base){--status-width: 50px}}\n"] }]
         }], ctorParameters: () => [{ type: CoreI18nService }, { type: CoreService }, { type: SidenavService }], propDecorators: { requestDetails: [{
                 type: Input
             }], section: [{
@@ -7685,7 +7855,7 @@ class HeaderComponent {
     }
     location = location;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: HeaderComponent, deps: [{ token: CoreI18nService }, { token: SidenavService }, { token: CoreService }, { token: i2$5.Router }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: HeaderComponent, isStandalone: true, selector: "app-header", ngImport: i0, template: "<ng-container *ngIf=\"!isMobile\">\r\n  <mat-toolbar\r\n    class=\"align-items-center justify-content-between gap-3 border-bottom\"\r\n  >\r\n    <div class=\"d-flex align-items-center gap-3\">\r\n      <ds-button\r\n        shape=\"flat\"\r\n        icon\r\n        color=\"light-gray\"\r\n        square\r\n        (click)=\"toggleSideNav()\"\r\n      >\r\n        <ds-icon icon=\"burger-menu-1\" class=\"fs-24 fc-dark-gray\"></ds-icon>\r\n      </ds-button>\r\n\r\n      <a [href]=\"location.origin\">\r\n        <figure class=\"m-0 d-flex\">\r\n          <img class=\"main-logo\" src=\"assets/images/hub.svg\" alt=\"\" />\r\n        </figure>\r\n      </a>\r\n    </div>\r\n\r\n    <div class=\"d-flex align-items-center gap-3\">\r\n      <ds-button\r\n        shape=\"flat\"\r\n        color=\"light-gray\"\r\n        class=\"user-menu-btn\"\r\n        [matMenuTriggerFor]=\"userMenu\"\r\n      >\r\n        <ds-avatar\r\n          image=\"/group/i-gate/wm-bpm/forms/-/proxy/portrait?email={{userData?.email}}\"\r\n          onerror=\"this.onerror=null;this.src='assets/images/user2.jpg'\"\r\n          slot=\"prefix\"\r\n          class=\"avatar\"\r\n        >\r\n        </ds-avatar>\r\n\r\n        <span class=\"fs-14 fw-medium fc-black\">\r\n          {{ coreService.getShortName( coreService?.loggedInUserData?.['name']) }}\r\n        </span>\r\n\r\n        <ds-icon\r\n          slot=\"suffix\"\r\n          icon=\"arrow\"\r\n          class=\"fc-dark-gray fs-16\"\r\n        ></ds-icon>\r\n      </ds-button>\r\n    </div>\r\n  </mat-toolbar>\r\n\r\n  <!-- User Menu -->\r\n  <mat-menu #userMenu=\"matMenu\" class=\"user-menu\">\r\n    <div mat-menu-item>\r\n      <span class=\"fs-14\">{{ translate.translate('welcome') }}, </span>\r\n      <br />\r\n      <span class=\"fs-14 fw-medium line-height-1\">{{ coreService.getShortName( coreService?.loggedInUserData?.['name']) }}</span>\r\n    </div>\r\n    <button mat-menu-item (click)=\"setLanguage()\">\r\n      <div class=\"d-flex align-items-center gap-2\">\r\n        <ds-icon icon=\"globe\" class=\"fs-25 fc-purple\"></ds-icon>\r\n        <span class=\"fs-14 fw-medium fc-black\">{{\r\n            translate.translate('otherLang')\r\n          }}</span>\r\n      </div>\r\n    </button>\r\n    <button mat-menu-item (click)=\"logout()\">\r\n      <div class=\"d-flex align-items-center gap-2\">\r\n        <ds-icon icon=\"logout\" class=\"fs-25 fc-red\"></ds-icon>\r\n        <span class=\"fs-14 fw-medium fc-black\">{{\r\n            translate.translate('logout')\r\n          }}</span>\r\n      </div>\r\n    </button>\r\n  </mat-menu>\r\n</ng-container>\r\n", styles: [".test-user-agent{position:fixed;top:90px;width:100%;z-index:99999;color:#fff}ds-button[square].burger-menu::part(base){--btn-padding: 10px;margin-bottom:-1px;width:37px;height:37px;--default-size: 37px}[dir=rtl] :host ds-button::part(overlay){inset:0}mat-toolbar{background-color:var(--main-toolbar-bc);height:var(--main-toolbar-height);position:fixed;top:0;z-index:var(--main-toolbar-zIndex);border-bottom:1px solid var(--light-gray)!important}mat-toolbar .logo img{min-width:100px}.main-logo{display:block;width:auto;height:30px;object-fit:contain}@media (max-width: 991px){.user-menu-btn::part(base){border:0px;padding:0;--default-size: 40px}.user-menu-btn::part(overlay){border-radius:50%}.user-menu-btn::part(label),.user-menu-btn::part(suffix){display:none}}:host::ng-deep .avatar{min-width:24px;width:24px;height:24px;background-color:transparent}:host::ng-deep ds-button.add::part(base){--btn-bg-color: var(--coral)}@media (max-width: 991px){:host::ng-deep .avatar{min-width:40px;width:40px;height:40px}:host::ng-deep .avatar .avatar--x-small{--default-size: 40px}}.linkS{position:fixed;z-index:2;bottom:100px;right:20px}.dashboard-menu-icon{display:inline-flex;align-items:center;justify-content:center;min-width:56px;width:56px;height:56px;border-radius:50%;background-color:var(--coral);margin-bottom:10px}::ng-deep .inside-mobile-app{--main-toolbar-height: 0px}::ng-deep ds-button.transparent::part(base){--btn-bg-color: transparent;--btn-border-color: transparent;--btn-overlay-color: transparent}::ng-deep .mat-divider-vertical{border-right-color:var(--black)}.mat-divider{--mat-divider-width: 1px;--mat-divider-color: var(--dark-gray)}.header-search{width:500px}@media (max-width: 1130px){.header-search{width:200px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i4$2.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: i4$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$2.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: MatToolbarModule }, { kind: "component", type: i5$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: HeaderComponent, isStandalone: true, selector: "app-header", ngImport: i0, template: "<ng-container *ngIf=\"!isMobile\">\r\n  <mat-toolbar\r\n    class=\"align-items-center justify-content-between gap-3 border-bottom\"\r\n  >\r\n    <div class=\"d-flex align-items-center gap-3\">\r\n      <ds-button\r\n        shape=\"flat\"\r\n        icon\r\n        color=\"light-gray\"\r\n        square\r\n        (click)=\"toggleSideNav()\"\r\n      >\r\n        <ds-icon icon=\"burger-menu-1\" class=\"fs-24 fc-dark-gray\"></ds-icon>\r\n      </ds-button>\r\n\r\n      <a [href]=\"location.origin\">\r\n        <figure class=\"m-0 d-flex\">\r\n          <img class=\"main-logo\" src=\"assets/images/hub.svg\" alt=\"\" />\r\n        </figure>\r\n      </a>\r\n    </div>\r\n\r\n    <div class=\"d-flex align-items-center gap-3\">\r\n      <ds-button\r\n        shape=\"flat\"\r\n        color=\"light-gray\"\r\n        class=\"user-menu-btn\"\r\n        [matMenuTriggerFor]=\"userMenu\"\r\n      >\r\n        <ds-avatar\r\n          [profileImageByEmail]=\"userData?.email\"\r\n          slot=\"prefix\"\r\n          class=\"avatar\"\r\n        >\r\n        </ds-avatar>\r\n\r\n        <span class=\"fs-14 fw-medium fc-black\">\r\n          {{ coreService.getShortName( coreService?.loggedInUserData?.['name']) }}\r\n        </span>\r\n\r\n        <ds-icon\r\n          slot=\"suffix\"\r\n          icon=\"arrow\"\r\n          class=\"fc-dark-gray fs-16\"\r\n        ></ds-icon>\r\n      </ds-button>\r\n    </div>\r\n  </mat-toolbar>\r\n\r\n  <!-- User Menu -->\r\n  <mat-menu #userMenu=\"matMenu\" class=\"user-menu\">\r\n    <div mat-menu-item>\r\n      <span class=\"fs-14\">{{ translate.translate('welcome') }}, </span>\r\n      <br />\r\n      <span class=\"fs-14 fw-medium line-height-1\">{{ coreService.getShortName( coreService?.loggedInUserData?.['name']) }}</span>\r\n    </div>\r\n    <button mat-menu-item (click)=\"setLanguage()\">\r\n      <div class=\"d-flex align-items-center gap-2\">\r\n        <ds-icon icon=\"globe\" class=\"fs-25 fc-purple\"></ds-icon>\r\n        <span class=\"fs-14 fw-medium fc-black\">{{\r\n            translate.translate('otherLang')\r\n          }}</span>\r\n      </div>\r\n    </button>\r\n    <button mat-menu-item (click)=\"logout()\">\r\n      <div class=\"d-flex align-items-center gap-2\">\r\n        <ds-icon icon=\"logout\" class=\"fs-25 fc-red\"></ds-icon>\r\n        <span class=\"fs-14 fw-medium fc-black\">{{\r\n            translate.translate('logout')\r\n          }}</span>\r\n      </div>\r\n    </button>\r\n  </mat-menu>\r\n</ng-container>\r\n", styles: [".test-user-agent{position:fixed;top:90px;width:100%;z-index:99999;color:#fff}ds-button[square].burger-menu::part(base){--btn-padding: 10px;margin-bottom:-1px;width:37px;height:37px;--default-size: 37px}[dir=rtl] :host ds-button::part(overlay){inset:0}mat-toolbar{background-color:var(--main-toolbar-bc);height:var(--main-toolbar-height);position:fixed;top:0;z-index:var(--main-toolbar-zIndex);border-bottom:1px solid var(--light-gray)!important}mat-toolbar .logo img{min-width:100px}.main-logo{display:block;width:auto;height:30px;object-fit:contain}@media (max-width: 991px){.user-menu-btn::part(base){border:0px;padding:0;--default-size: 40px}.user-menu-btn::part(overlay){border-radius:50%}.user-menu-btn::part(label),.user-menu-btn::part(suffix){display:none}}:host::ng-deep .avatar{min-width:24px;width:24px;height:24px;background-color:transparent}:host::ng-deep ds-button.add::part(base){--btn-bg-color: var(--coral)}@media (max-width: 991px){:host::ng-deep .avatar{min-width:40px;width:40px;height:40px}:host::ng-deep .avatar .avatar--x-small{--default-size: 40px}}.linkS{position:fixed;z-index:2;bottom:100px;right:20px}.dashboard-menu-icon{display:inline-flex;align-items:center;justify-content:center;min-width:56px;width:56px;height:56px;border-radius:50%;background-color:var(--coral);margin-bottom:10px}::ng-deep .inside-mobile-app{--main-toolbar-height: 0px}::ng-deep ds-button.transparent::part(base){--btn-bg-color: transparent;--btn-border-color: transparent;--btn-overlay-color: transparent}::ng-deep .mat-divider-vertical{border-right-color:var(--black)}.mat-divider{--mat-divider-width: 1px;--mat-divider-color: var(--dark-gray)}.header-search{width:500px}@media (max-width: 1130px){.header-search{width:200px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i4$2.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: i4$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$2.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: MatToolbarModule }, { kind: "component", type: i5$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: ProfileImageByEmailDirective, selector: "img[profileImageByEmail], ds-avatar[profileImageByEmail]", inputs: ["profileImageByEmail"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: HeaderComponent, decorators: [{
             type: Component,
@@ -7694,8 +7864,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                         ReactiveFormsModule,
                         RouterModule,
                         MatMenuModule,
-                        MatToolbarModule
-                    ], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<ng-container *ngIf=\"!isMobile\">\r\n  <mat-toolbar\r\n    class=\"align-items-center justify-content-between gap-3 border-bottom\"\r\n  >\r\n    <div class=\"d-flex align-items-center gap-3\">\r\n      <ds-button\r\n        shape=\"flat\"\r\n        icon\r\n        color=\"light-gray\"\r\n        square\r\n        (click)=\"toggleSideNav()\"\r\n      >\r\n        <ds-icon icon=\"burger-menu-1\" class=\"fs-24 fc-dark-gray\"></ds-icon>\r\n      </ds-button>\r\n\r\n      <a [href]=\"location.origin\">\r\n        <figure class=\"m-0 d-flex\">\r\n          <img class=\"main-logo\" src=\"assets/images/hub.svg\" alt=\"\" />\r\n        </figure>\r\n      </a>\r\n    </div>\r\n\r\n    <div class=\"d-flex align-items-center gap-3\">\r\n      <ds-button\r\n        shape=\"flat\"\r\n        color=\"light-gray\"\r\n        class=\"user-menu-btn\"\r\n        [matMenuTriggerFor]=\"userMenu\"\r\n      >\r\n        <ds-avatar\r\n          image=\"/group/i-gate/wm-bpm/forms/-/proxy/portrait?email={{userData?.email}}\"\r\n          onerror=\"this.onerror=null;this.src='assets/images/user2.jpg'\"\r\n          slot=\"prefix\"\r\n          class=\"avatar\"\r\n        >\r\n        </ds-avatar>\r\n\r\n        <span class=\"fs-14 fw-medium fc-black\">\r\n          {{ coreService.getShortName( coreService?.loggedInUserData?.['name']) }}\r\n        </span>\r\n\r\n        <ds-icon\r\n          slot=\"suffix\"\r\n          icon=\"arrow\"\r\n          class=\"fc-dark-gray fs-16\"\r\n        ></ds-icon>\r\n      </ds-button>\r\n    </div>\r\n  </mat-toolbar>\r\n\r\n  <!-- User Menu -->\r\n  <mat-menu #userMenu=\"matMenu\" class=\"user-menu\">\r\n    <div mat-menu-item>\r\n      <span class=\"fs-14\">{{ translate.translate('welcome') }}, </span>\r\n      <br />\r\n      <span class=\"fs-14 fw-medium line-height-1\">{{ coreService.getShortName( coreService?.loggedInUserData?.['name']) }}</span>\r\n    </div>\r\n    <button mat-menu-item (click)=\"setLanguage()\">\r\n      <div class=\"d-flex align-items-center gap-2\">\r\n        <ds-icon icon=\"globe\" class=\"fs-25 fc-purple\"></ds-icon>\r\n        <span class=\"fs-14 fw-medium fc-black\">{{\r\n            translate.translate('otherLang')\r\n          }}</span>\r\n      </div>\r\n    </button>\r\n    <button mat-menu-item (click)=\"logout()\">\r\n      <div class=\"d-flex align-items-center gap-2\">\r\n        <ds-icon icon=\"logout\" class=\"fs-25 fc-red\"></ds-icon>\r\n        <span class=\"fs-14 fw-medium fc-black\">{{\r\n            translate.translate('logout')\r\n          }}</span>\r\n      </div>\r\n    </button>\r\n  </mat-menu>\r\n</ng-container>\r\n", styles: [".test-user-agent{position:fixed;top:90px;width:100%;z-index:99999;color:#fff}ds-button[square].burger-menu::part(base){--btn-padding: 10px;margin-bottom:-1px;width:37px;height:37px;--default-size: 37px}[dir=rtl] :host ds-button::part(overlay){inset:0}mat-toolbar{background-color:var(--main-toolbar-bc);height:var(--main-toolbar-height);position:fixed;top:0;z-index:var(--main-toolbar-zIndex);border-bottom:1px solid var(--light-gray)!important}mat-toolbar .logo img{min-width:100px}.main-logo{display:block;width:auto;height:30px;object-fit:contain}@media (max-width: 991px){.user-menu-btn::part(base){border:0px;padding:0;--default-size: 40px}.user-menu-btn::part(overlay){border-radius:50%}.user-menu-btn::part(label),.user-menu-btn::part(suffix){display:none}}:host::ng-deep .avatar{min-width:24px;width:24px;height:24px;background-color:transparent}:host::ng-deep ds-button.add::part(base){--btn-bg-color: var(--coral)}@media (max-width: 991px){:host::ng-deep .avatar{min-width:40px;width:40px;height:40px}:host::ng-deep .avatar .avatar--x-small{--default-size: 40px}}.linkS{position:fixed;z-index:2;bottom:100px;right:20px}.dashboard-menu-icon{display:inline-flex;align-items:center;justify-content:center;min-width:56px;width:56px;height:56px;border-radius:50%;background-color:var(--coral);margin-bottom:10px}::ng-deep .inside-mobile-app{--main-toolbar-height: 0px}::ng-deep ds-button.transparent::part(base){--btn-bg-color: transparent;--btn-border-color: transparent;--btn-overlay-color: transparent}::ng-deep .mat-divider-vertical{border-right-color:var(--black)}.mat-divider{--mat-divider-width: 1px;--mat-divider-color: var(--dark-gray)}.header-search{width:500px}@media (max-width: 1130px){.header-search{width:200px}}\n"] }]
+                        MatToolbarModule,
+                        ProfileImageByEmailDirective
+                    ], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<ng-container *ngIf=\"!isMobile\">\r\n  <mat-toolbar\r\n    class=\"align-items-center justify-content-between gap-3 border-bottom\"\r\n  >\r\n    <div class=\"d-flex align-items-center gap-3\">\r\n      <ds-button\r\n        shape=\"flat\"\r\n        icon\r\n        color=\"light-gray\"\r\n        square\r\n        (click)=\"toggleSideNav()\"\r\n      >\r\n        <ds-icon icon=\"burger-menu-1\" class=\"fs-24 fc-dark-gray\"></ds-icon>\r\n      </ds-button>\r\n\r\n      <a [href]=\"location.origin\">\r\n        <figure class=\"m-0 d-flex\">\r\n          <img class=\"main-logo\" src=\"assets/images/hub.svg\" alt=\"\" />\r\n        </figure>\r\n      </a>\r\n    </div>\r\n\r\n    <div class=\"d-flex align-items-center gap-3\">\r\n      <ds-button\r\n        shape=\"flat\"\r\n        color=\"light-gray\"\r\n        class=\"user-menu-btn\"\r\n        [matMenuTriggerFor]=\"userMenu\"\r\n      >\r\n        <ds-avatar\r\n          [profileImageByEmail]=\"userData?.email\"\r\n          slot=\"prefix\"\r\n          class=\"avatar\"\r\n        >\r\n        </ds-avatar>\r\n\r\n        <span class=\"fs-14 fw-medium fc-black\">\r\n          {{ coreService.getShortName( coreService?.loggedInUserData?.['name']) }}\r\n        </span>\r\n\r\n        <ds-icon\r\n          slot=\"suffix\"\r\n          icon=\"arrow\"\r\n          class=\"fc-dark-gray fs-16\"\r\n        ></ds-icon>\r\n      </ds-button>\r\n    </div>\r\n  </mat-toolbar>\r\n\r\n  <!-- User Menu -->\r\n  <mat-menu #userMenu=\"matMenu\" class=\"user-menu\">\r\n    <div mat-menu-item>\r\n      <span class=\"fs-14\">{{ translate.translate('welcome') }}, </span>\r\n      <br />\r\n      <span class=\"fs-14 fw-medium line-height-1\">{{ coreService.getShortName( coreService?.loggedInUserData?.['name']) }}</span>\r\n    </div>\r\n    <button mat-menu-item (click)=\"setLanguage()\">\r\n      <div class=\"d-flex align-items-center gap-2\">\r\n        <ds-icon icon=\"globe\" class=\"fs-25 fc-purple\"></ds-icon>\r\n        <span class=\"fs-14 fw-medium fc-black\">{{\r\n            translate.translate('otherLang')\r\n          }}</span>\r\n      </div>\r\n    </button>\r\n    <button mat-menu-item (click)=\"logout()\">\r\n      <div class=\"d-flex align-items-center gap-2\">\r\n        <ds-icon icon=\"logout\" class=\"fs-25 fc-red\"></ds-icon>\r\n        <span class=\"fs-14 fw-medium fc-black\">{{\r\n            translate.translate('logout')\r\n          }}</span>\r\n      </div>\r\n    </button>\r\n  </mat-menu>\r\n</ng-container>\r\n", styles: [".test-user-agent{position:fixed;top:90px;width:100%;z-index:99999;color:#fff}ds-button[square].burger-menu::part(base){--btn-padding: 10px;margin-bottom:-1px;width:37px;height:37px;--default-size: 37px}[dir=rtl] :host ds-button::part(overlay){inset:0}mat-toolbar{background-color:var(--main-toolbar-bc);height:var(--main-toolbar-height);position:fixed;top:0;z-index:var(--main-toolbar-zIndex);border-bottom:1px solid var(--light-gray)!important}mat-toolbar .logo img{min-width:100px}.main-logo{display:block;width:auto;height:30px;object-fit:contain}@media (max-width: 991px){.user-menu-btn::part(base){border:0px;padding:0;--default-size: 40px}.user-menu-btn::part(overlay){border-radius:50%}.user-menu-btn::part(label),.user-menu-btn::part(suffix){display:none}}:host::ng-deep .avatar{min-width:24px;width:24px;height:24px;background-color:transparent}:host::ng-deep ds-button.add::part(base){--btn-bg-color: var(--coral)}@media (max-width: 991px){:host::ng-deep .avatar{min-width:40px;width:40px;height:40px}:host::ng-deep .avatar .avatar--x-small{--default-size: 40px}}.linkS{position:fixed;z-index:2;bottom:100px;right:20px}.dashboard-menu-icon{display:inline-flex;align-items:center;justify-content:center;min-width:56px;width:56px;height:56px;border-radius:50%;background-color:var(--coral);margin-bottom:10px}::ng-deep .inside-mobile-app{--main-toolbar-height: 0px}::ng-deep ds-button.transparent::part(base){--btn-bg-color: transparent;--btn-border-color: transparent;--btn-overlay-color: transparent}::ng-deep .mat-divider-vertical{border-right-color:var(--black)}.mat-divider{--mat-divider-width: 1px;--mat-divider-color: var(--dark-gray)}.header-search{width:500px}@media (max-width: 1130px){.header-search{width:200px}}\n"] }]
         }], ctorParameters: () => [{ type: CoreI18nService }, { type: SidenavService }, { type: CoreService }, { type: i2$5.Router }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [PLATFORM_ID]
@@ -9066,5 +9237,5 @@ const MY_LIB_CONFIG_TOKEN = new InjectionToken('MyLibConfig');
  * Generated bundle index. Do not edit.
  */
 
-export { APPROVERS, ActionButtonsComponent, ActionStateService, AttachmentSectionComponent, AttachmentSectionDataComponent, BaseComponent, COMMENT_CONTAINER, CheckBoxComponent, CommentsDrop, ConfirmDialogComponent, CoreAppComponent, CoreI18nService, CoreService, CustomSearchableComponent, DATE_DASH, DATE_SLASH, DATE_TIME, DONT_SHOW, DataValidators, DatePickerComponent, DateRangePickerComponent, DeleteDialogComponent, DocsUploaderComponent, FALSE_BOOL, FALSE_STRING, FEEDBACK_CONTAINER, FEEDBACK_STATUS_REQUEST, FEEDBACK_STATUS_RESPOND, FEEDBACK_STATUS_RESPONDED, FEEDBACK_STATUS_WAITING, FORM_STATUS_APPROVE, FORM_STATUS_APPROVED, FORM_STATUS_CANCEL, FORM_STATUS_CANCELLED, FORM_STATUS_COMPLETED, FORM_STATUS_NEW, FORM_STATUS_PENDING, FORM_STATUS_REJECT, FORM_STATUS_REJECTED, FORM_STATUS_SEND_BACK, FeedBackService, FeedbackSectionComponent, Form, FormLabelComponent, FormSectionComponent, FormatAsPasswordPipe, FormatTimePipe, GETSIPORTENTRYGROUPS, GETSIPORTENTRYLOCATIONS, HAS_COMMENTS, HEADER_CONTENT_TYPE_FORM, HTTP_METHOD_GET, HTTP_METHOD_POST, HTTP_METHOD_PUT, HTTP_PROTOCOL_HTTP, HTTP_PROTOCOL_HTTPS, Header, IGATE_STATIC_ASSET_PROFILE_PHOTO_URL, INBOX_STATUS_PENDING, INBOX_STATUS_PROCESSED, INBOX_STATUS_SENT, InboxItem, InfoItemComponent, InputComponent, InputCurrencyComponent, InputEmailComponent, InputFilters, InputMapFilterDirective, InputMappers, InputMaskComponent, InputNumberComponent, InputTelephoneComponent, LANGUAGE_CODE_AR, LANGUAGE_CODE_EN, LOGOUT_URL, LayoutComponent, MY_LIB_CONFIG_TOKEN, MainRequestDetailsComponent, Messages, MultiselectComponent, MycurrencyPipe, NO_COMMENTS, NO_VALUE, PROCESS_NAME_CODE, PROFILE_CONTAINER, ProfileInfoDrop, ProfileSectionComponent, READ_ONLY, REPORT, ROLE_REQUESTER, RadioComponent, RegexPatterns, RepeatedListComponent, SECTION_ID_APPROVAL_PARTIAL_NAME, SECTION_ID_DM_PARTIAL_ROLE, SECTION_ID_EMP_INFO_APPROVAL_PARTIAL_ROLE, SECTION_ID_EXECUTE_PARTIAL_ROLE, SECTION_ID_GM_PARTIAL_ROLE, SECTION_ID_NOTHING_PARTIAL_NAME, SECTION_ID_PAYROLL_APPROVAL_PARTIAL_ROLE, SECTION_ID_PERFORM_PARTIAL_ROLE, SECTION_ID_REQUESTER_PARTIAL_NAME, SECTION_ID_REQUEST_DETAILS, SECTION_ID_SM_PARTIAL_ROLE, SECTION_ID_SVP_PARTIAL_ROLE, SECTION_ID_VP_PARTIAL_ROLE, SECTION_STATUS_APPROVED, SECTION_STATUS_PENDING, SECTION_STATUS_UNSATISFIED, SERVICE_NAME_CEP, SERVICE_NAME_DP_CREATE_FEEDBACK, SERVICE_NAME_DP_INBOX_ITEM, SERVICE_NAME_DP_LOAD_HISTORY, SERVICE_NAME_DP_SEARCH_EMPLOYEE, SERVICE_NAME_DP_UPDATE_FEEDBACK, SERVICE_NAME_DP_UPDATE_INBOX_ITEM, SERVICE_NAME_MAF, SERVICE_NAME_WM_CHILD_FORM, SERVICE_NAME_WM_DRAFT_FORM, SERVICE_NAME_WM_FORM, SERVICE_NAME_WM_GET_APPROVED_REQUEST, SERVICE_NAME_WM_GET_MY_APPROVED_REQUEST, SERVICE_NAME_WM_HTML_GENERATOR, STATE_MACHINE_ACTION_CALC, STATE_MACHINE_ACTION_COMMONAPI, STATE_MACHINE_ACTION_CONVERT, STATE_MACHINE_ACTION_EMPLOYEE_PROFILE, STATE_MACHINE_ACTION_FAILURE, STATE_MACHINE_ACTION_GET_APPROVED_REQUEST, STATE_MACHINE_ACTION_GET_APPROVED_REQUEST_RESPONSE, STATE_MACHINE_ACTION_GET_FEEDBACK, STATE_MACHINE_ACTION_GET_INBOX_ITEM, STATE_MACHINE_ACTION_HANDLE_ERROR, STATE_MACHINE_ACTION_INBOX_ITEM_RESPONSE, STATE_MACHINE_ACTION_LOAD_FILE, STATE_MACHINE_ACTION_LOAD_FORM, STATE_MACHINE_ACTION_LOAD_HISTORY, STATE_MACHINE_ACTION_PDF, STATE_MACHINE_ACTION_PPROVED_REQUESTS, STATE_MACHINE_ACTION_PROJECT_CEP, STATE_MACHINE_ACTION_PROJECT_MAF, STATE_MACHINE_ACTION_SEARCH, STATE_MACHINE_ACTION_SEARCH_EMPLOYEE, STATE_MACHINE_ACTION_SET_FLAG, STATE_MACHINE_ACTION_SHOW_PRINT, STATE_MACHINE_ACTION_SUBMIT_FEEDBACK, STATE_MACHINE_ACTION_SUBMIT_FORM, STATE_MACHINE_ACTION_SUCCESS, STATE_MACHINE_ACTION_SUCCESS_HISTORY, STATE_MACHINE_ACTION_SUCCESS_INBOX_ITEM, STATE_MACHINE_ACTION_SUCCESS_PRINT, STATE_MACHINE_ACTION_SUCCESS_RESPONSE, STATE_MACHINE_ACTION_SUCCESS_SERVICES, STATE_MACHINE_ACTION_SUCCESS_USERS, STATE_MACHINE_ACTION_SUCCESS_WM, STATE_MACHINE_ACTION_UPDATE_FEEDBACK, STATE_MACHINE_ACTION_USER_CEP, STATE_MACHINE_ACTION_USER_MAF, STATE_MACHINE_STATUS_ERROR, STATE_MACHINE_STATUS_FETCHING, STATE_MACHINE_STATUS_IDLE, STATE_MACHINE_STATUS_RESULT, STATE_MACHINE_STATUS_SENDING, STATE_NAME_DP_GET_FEEDBACK, SearchEmployeeComponent, Section, SectionHeader, SelectComponent, ServiceHeaderComponent, SidenavService, StatusComponent, SubmitDialogComponent, TARGET_SERVER_DP, TARGET_SERVER_WM, TRUE_BOOL, TRUE_STRING, TableComponent, TableListComponent, TermsConditionsComponent, TextDirective, TextareaComponent, TimepickerComponent, TitleSectionComponent, ToggleButtonComponent, URL_SEPARATOR, ValidationErrorsComponent, WM_ACTION_SAVE, WM_ACTION_SAVE_CHANGES, WM_ACTION_SUBMIT, WORKFLOW_ITEMS, WRITE_MODE, WorkflowSectionComponent, dataURItoBlob, encodePassword, getPaginatorIntl, handelErrorResponse, isValidForAction, logFormStatus, stringToBooleanPipe, updateValueAndValidity, validateIfAction, validateOnlyWhen, validateSAID };
+export { APPROVERS, ActionButtonsComponent, ActionStateService, AttachmentSectionComponent, AttachmentSectionDataComponent, BaseComponent, COMMENT_CONTAINER, CheckBoxComponent, CommentsDrop, ConfirmDialogComponent, CoreAppComponent, CoreI18nService, CoreService, CustomSearchableComponent, DATE_DASH, DATE_SLASH, DATE_TIME, DONT_SHOW, DataValidators, DatePickerComponent, DateRangePickerComponent, DeleteDialogComponent, DocsUploaderComponent, FALSE_BOOL, FALSE_STRING, FEEDBACK_CONTAINER, FEEDBACK_STATUS_REQUEST, FEEDBACK_STATUS_RESPOND, FEEDBACK_STATUS_RESPONDED, FEEDBACK_STATUS_WAITING, FORM_STATUS_APPROVE, FORM_STATUS_APPROVED, FORM_STATUS_CANCEL, FORM_STATUS_CANCELLED, FORM_STATUS_COMPLETED, FORM_STATUS_NEW, FORM_STATUS_PENDING, FORM_STATUS_REJECT, FORM_STATUS_REJECTED, FORM_STATUS_SEND_BACK, FeedBackService, FeedbackSectionComponent, Form, FormLabelComponent, FormSectionComponent, FormatAsPasswordPipe, FormatTimePipe, GETSIPORTENTRYGROUPS, GETSIPORTENTRYLOCATIONS, HAS_COMMENTS, HEADER_CONTENT_TYPE_FORM, HTTP_METHOD_GET, HTTP_METHOD_POST, HTTP_METHOD_PUT, HTTP_PROTOCOL_HTTP, HTTP_PROTOCOL_HTTPS, Header, IGATE_STATIC_ASSET_PROFILE_PHOTO_URL, INBOX_STATUS_PENDING, INBOX_STATUS_PROCESSED, INBOX_STATUS_SENT, InboxItem, InfoItemComponent, InputComponent, InputCurrencyComponent, InputEmailComponent, InputFilters, InputMapFilterDirective, InputMappers, InputMaskComponent, InputNumberComponent, InputTelephoneComponent, LANGUAGE_CODE_AR, LANGUAGE_CODE_EN, LOGOUT_URL, LayoutComponent, MY_LIB_CONFIG_TOKEN, MainRequestDetailsComponent, Messages, MultiselectComponent, MycurrencyPipe, NO_COMMENTS, NO_VALUE, PLACEHOLDER_KEY, PLACEHOLDER_URL, PROCESS_NAME_CODE, PROFILE_CONTAINER, ProfileImageByEmailDirective, ProfileInfoDrop, ProfileSectionComponent, READ_ONLY, REPORT, ROLE_REQUESTER, RadioComponent, RegexPatterns, RepeatedListComponent, SECTION_ID_APPROVAL_PARTIAL_NAME, SECTION_ID_DM_PARTIAL_ROLE, SECTION_ID_EMP_INFO_APPROVAL_PARTIAL_ROLE, SECTION_ID_EXECUTE_PARTIAL_ROLE, SECTION_ID_GM_PARTIAL_ROLE, SECTION_ID_NOTHING_PARTIAL_NAME, SECTION_ID_PAYROLL_APPROVAL_PARTIAL_ROLE, SECTION_ID_PERFORM_PARTIAL_ROLE, SECTION_ID_REQUESTER_PARTIAL_NAME, SECTION_ID_REQUEST_DETAILS, SECTION_ID_SM_PARTIAL_ROLE, SECTION_ID_SVP_PARTIAL_ROLE, SECTION_ID_VP_PARTIAL_ROLE, SECTION_STATUS_APPROVED, SECTION_STATUS_PENDING, SECTION_STATUS_UNSATISFIED, SERVICE_NAME_CEP, SERVICE_NAME_DP_CREATE_FEEDBACK, SERVICE_NAME_DP_INBOX_ITEM, SERVICE_NAME_DP_LOAD_HISTORY, SERVICE_NAME_DP_SEARCH_EMPLOYEE, SERVICE_NAME_DP_UPDATE_FEEDBACK, SERVICE_NAME_DP_UPDATE_INBOX_ITEM, SERVICE_NAME_MAF, SERVICE_NAME_WM_CHILD_FORM, SERVICE_NAME_WM_DRAFT_FORM, SERVICE_NAME_WM_FORM, SERVICE_NAME_WM_GET_APPROVED_REQUEST, SERVICE_NAME_WM_GET_MY_APPROVED_REQUEST, SERVICE_NAME_WM_HTML_GENERATOR, STATE_MACHINE_ACTION_CALC, STATE_MACHINE_ACTION_COMMONAPI, STATE_MACHINE_ACTION_CONVERT, STATE_MACHINE_ACTION_EMPLOYEE_PROFILE, STATE_MACHINE_ACTION_FAILURE, STATE_MACHINE_ACTION_GET_APPROVED_REQUEST, STATE_MACHINE_ACTION_GET_APPROVED_REQUEST_RESPONSE, STATE_MACHINE_ACTION_GET_FEEDBACK, STATE_MACHINE_ACTION_GET_INBOX_ITEM, STATE_MACHINE_ACTION_HANDLE_ERROR, STATE_MACHINE_ACTION_INBOX_ITEM_RESPONSE, STATE_MACHINE_ACTION_LOAD_FILE, STATE_MACHINE_ACTION_LOAD_FORM, STATE_MACHINE_ACTION_LOAD_HISTORY, STATE_MACHINE_ACTION_PDF, STATE_MACHINE_ACTION_PPROVED_REQUESTS, STATE_MACHINE_ACTION_PROJECT_CEP, STATE_MACHINE_ACTION_PROJECT_MAF, STATE_MACHINE_ACTION_SEARCH, STATE_MACHINE_ACTION_SEARCH_EMPLOYEE, STATE_MACHINE_ACTION_SET_FLAG, STATE_MACHINE_ACTION_SHOW_PRINT, STATE_MACHINE_ACTION_SUBMIT_FEEDBACK, STATE_MACHINE_ACTION_SUBMIT_FORM, STATE_MACHINE_ACTION_SUCCESS, STATE_MACHINE_ACTION_SUCCESS_HISTORY, STATE_MACHINE_ACTION_SUCCESS_INBOX_ITEM, STATE_MACHINE_ACTION_SUCCESS_PRINT, STATE_MACHINE_ACTION_SUCCESS_RESPONSE, STATE_MACHINE_ACTION_SUCCESS_SERVICES, STATE_MACHINE_ACTION_SUCCESS_USERS, STATE_MACHINE_ACTION_SUCCESS_WM, STATE_MACHINE_ACTION_UPDATE_FEEDBACK, STATE_MACHINE_ACTION_USER_CEP, STATE_MACHINE_ACTION_USER_MAF, STATE_MACHINE_STATUS_ERROR, STATE_MACHINE_STATUS_FETCHING, STATE_MACHINE_STATUS_IDLE, STATE_MACHINE_STATUS_RESULT, STATE_MACHINE_STATUS_SENDING, STATE_NAME_DP_GET_FEEDBACK, STRING, SearchEmployeeComponent, Section, SectionHeader, SelectComponent, ServiceHeaderComponent, SidenavService, StatusComponent, SubmitDialogComponent, TARGET_SERVER_DP, TARGET_SERVER_WM, TRUE_BOOL, TRUE_STRING, TableComponent, TableListComponent, TermsConditionsComponent, TextDirective, TextareaComponent, TimepickerComponent, TitleSectionComponent, ToggleButtonComponent, URL_SEPARATOR, ValidationErrorsComponent, WM_ACTION_SAVE, WM_ACTION_SAVE_CHANGES, WM_ACTION_SUBMIT, WORKFLOW_ITEMS, WRITE_MODE, WorkflowSectionComponent, dataURItoBlob, encodePassword, getPaginatorIntl, handelErrorResponse, isValidForAction, logFormStatus, stringToBooleanPipe, updateValueAndValidity, validateIfAction, validateOnlyWhen, validateSAID };
 //# sourceMappingURL=bpm-core.mjs.map