bpm-core 0.0.25 → 0.0.26

package/fesm2022/bpm-core.mjs

@@ -2,18 +2,18 @@ import * as i0 from '@angular/core';
 import { Injectable, Inject, Component, CUSTOM_ELEMENTS_SCHEMA, Pipe, forwardRef, EventEmitter, Input, Output, ViewChild, Directive, HostListener, NO_ERRORS_SCHEMA, PLATFORM_ID, InjectionToken } from '@angular/core';
 import * as i1$1 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialogContent, MatDialogActions, MatDialogClose, MatDialogTitle } from '@angular/material/dialog';
-import { Subject, ReplaySubject, BehaviorSubject, catchError, throwError } from 'rxjs';
+import { Subject, ReplaySubject, BehaviorSubject, catchError, throwError, from } from 'rxjs';
 import * as i1 from '@angular/common/http';
 import { HttpHeaders } from '@angular/common/http';
 import { map, startWith } from 'rxjs/operators';
-import * as i4$1 from '@angular/common';
-import { NgIf, NgClass, NgForOf, NgTemplateOutlet, NgSwitchCase, DecimalPipe, DatePipe, NgSwitchDefault, NgSwitch, AsyncPipe, SlicePipe, NgComponentOutlet, CommonModule, DOCUMENT } from '@angular/common';
+import * as i1$2 from '@angular/common';
+import { NgIf, NgClass, NgForOf, NgTemplateOutlet, NgSwitchCase, DecimalPipe, DatePipe, NgSwitchDefault, NgSwitch, AsyncPipe, CommonModule, NgFor, SlicePipe, NgComponentOutlet, DOCUMENT } from '@angular/common';
 import { MatButton } from '@angular/material/button';
 import { NoopScrollStrategy } from '@angular/cdk/overlay';
 import * as i4 from '@angular/material/core';
 import { MAT_DATE_FORMATS, DateAdapter, MAT_DATE_LOCALE } from '@angular/material/core';
-import * as i1$2 from '@angular/forms';
-import { NG_VALUE_ACCESSOR, FormControl, ControlContainer, NgForm, FormsModule, Validators, ReactiveFormsModule, NgControl, FormControlName, FormGroupDirective } from '@angular/forms';
+import * as i2 from '@angular/forms';
+import { NG_VALUE_ACCESSOR, FormControl, ControlContainer, NgForm, FormsModule, Validators, ReactiveFormsModule, NgControl, FormControlName, FormGroupDirective, FormGroup } from '@angular/forms';
 import * as i7 from '@angular/platform-browser';
 import * as FileSaver from 'file-saver';
 import { ImageCropperComponent } from 'ngx-image-cropper';
@@ -27,16 +27,16 @@ import { MatDatepicker, MatDatepickerToggle, MatDatepickerInput } from '@angular
 import * as moment from 'moment';
 import * as i1$3 from '@ncstate/sat-popover';
 import { SatPopoverModule } from '@ncstate/sat-popover';
-import { NgxMaskDirective } from 'ngx-mask';
 import { MatInput } from '@angular/material/input';
+import { NgxMaskDirective } from 'ngx-mask';
 import { MatSelect, MatOption as MatOption$1, MatLabel, MatError as MatError$1, MatFormField as MatFormField$1 } from '@angular/material/select';
 import { MatProgressSpinner } from '@angular/material/progress-spinner';
 import { MatButtonToggleGroup, MatButtonToggle } from '@angular/material/button-toggle';
-import * as i2 from '@angular/material/table';
+import * as i2$1 from '@angular/material/table';
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
 import * as i1$5 from '@angular/material/paginator';
 import { MatPaginatorModule } from '@angular/material/paginator';
-import * as i2$2 from '@angular/router';
+import * as i2$4 from '@angular/router';
 import { RouterLink, RouterModule, RouterLinkActive, RouterOutlet } from '@angular/router';
 import * as i5 from '@angular/material/menu';
 import { MatMenu, MatMenuTrigger, MatMenuItem, MatMenuModule } from '@angular/material/menu';
@@ -44,7 +44,8 @@ import { moveItemInArray, CdkDropList, CdkDrag } from '@angular/cdk/drag-drop';
 import * as i3$1 from '@angular/material/tooltip';
 import { MatTooltip, MatTooltipModule } from '@angular/material/tooltip';
 import { MatRadioButton, MatRadioGroup } from '@angular/material/radio';
-import * as i2$1 from '@angular/material/expansion';
+import * as i2$2 from 'ngx-toastr';
+import * as i2$3 from '@angular/material/expansion';
 import { MatAccordion, MatExpansionPanel, MatExpansionPanelTitle, MatExpansionModule } from '@angular/material/expansion';
 import { MatDivider } from '@angular/material/divider';
 import * as i3 from 'ng-dynamic-component';
@@ -200,6 +201,8 @@ const SERVICE_NAME_MAF = 'MAF';
 const SERVICE_NAME_CEP = 'CEP';
 const STATE_MACHINE_ACTION_PDF = 'pdfAttachments';
 const LOGOUT_URL = '/c/portal/logout';
+const WORKFLOW_ITEMS = 'workflowItems';
+const APPROVERS = 'approvers';
 
 var en = {
     "pageTimeOut": 'Looks like the server is taking too long to respond, this can be caused by either poor connectivity or an error with our servers. Please try again in a while',
@@ -742,6 +745,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                     args: [MY_LIB_CONFIG_TOKEN]
                 }] }] });
 
+var saveFormHooks = {
+    beforeTranspileSection(section) {
+        const hookResult = section;
+        // Here should be the code to manipulate the section object before the transpile stage
+        return hookResult;
+    },
+    beforeSendPayload(submitPayload) {
+        const hookResult = submitPayload;
+        // Here should be the code to manipulate the submit payload before the request to backend
+        return hookResult;
+    },
+    afterSendPayload(responsePayload) {
+        const hookResult = responsePayload;
+        // Here should be the code to manipulate the response payload to a submit of a form
+        return hookResult;
+    }
+};
+
 class CoreService {
     http;
     config;
@@ -753,12 +774,18 @@ class CoreService {
     localUser;
     loggedInUserData;
     currentActor;
+    authorizedEmail;
+    requesterEmail;
+    currentSubmitter;
+    language;
+    activities = [];
+    approvals;
     constructor(http, config) {
         this.http = http;
         this.config = config;
         const language = window?.wmConfig?.language ? window.wmConfig.language : 'en';
         this.apiUrl = this.config.proxyServiceBaseUrl + language + this.config.proxyFullAddress + this.config.proxyServiceExecute;
-        console.log('Config: ', this.config); // for testing purposes only
+        console.log('Config: ', this.config);
         this.localUser = {
             "formPrefix": "CEP",
             "formId": "CEP5595432",
@@ -772,6 +799,7 @@ class CoreService {
         };
         this.projectConfig = (this.config.production) ? window['wmConfig'] : btoa(JSON.stringify(this.localUser));
         this.userData = JSON.parse(atob(this.projectConfig));
+        this.language = window?.wmConfig?.language ? window.wmConfig.language : "en";
     }
     getLoggedInUserData() {
         let loggedInEmail = this.loggedInUserId();
@@ -822,10 +850,10 @@ class CoreService {
     }
     employeeProfile(employeeEmail) {
         let body = {
-            method: "GET",
-            formName: "AAI",
-            destination: "DP",
-            serviceName: "igate.users.search.v3",
+            method: HTTP_METHOD_GET,
+            formName: this.config.formName,
+            destination: TARGET_SERVER_DP,
+            serviceName: SERVICE_NAME_DP_SEARCH_EMPLOYEE,
             parameters: {
                 q: employeeEmail
             }
@@ -851,333 +879,244 @@ class CoreService {
             observe: 'body'
         };
     }
+    getDraftId(val) {
+        return val.toUpperCase().startsWith('DRAFT');
+    }
+    submitForm(...args) {
+        const [section, action] = args;
+        const method = this.getHttpMethod();
+        let sectionId = this.beforeTranspileSectionWrapper(section).id;
+        let serviceName = this.getServiceName(action);
+        let formName = this.getFormName(action);
+        let body = this.getBodyObject(method, serviceName, action, formName, this.populatedPayload(sectionId, section), this.config.formId);
+        const options = this.getRequestOptions();
+        return this.submit(body, options);
+    }
+    getHttpMethod() {
+        return (this.config.formId && !this.getDraftId(this.config.formId)) ? HTTP_METHOD_PUT : HTTP_METHOD_POST;
+    }
+    beforeTranspileSectionWrapper(section) {
+        return saveFormHooks.beforeTranspileSection ? saveFormHooks.beforeTranspileSection(section) : section;
+    }
+    getServiceName(action) {
+        if (action === WM_ACTION_SAVE_CHANGES) {
+            return SERVICE_NAME_WM_DRAFT_FORM;
+        }
+        else {
+            return SERVICE_NAME_WM_FORM;
+        }
+    }
+    getFormName(action) {
+        if (action === WM_ACTION_SAVE_CHANGES) {
+            return 'common';
+        }
+        else {
+            return this.config.formName;
+        }
+    }
+    populatedPayload(sectionId, section) {
+        let payload;
+        if (sectionId === SECTION_ID_REQUEST_DETAILS) {
+            payload = { request: { details: section.body.details } };
+        }
+        else {
+            payload = { workflowSteps: {} };
+            payload.workflowSteps.details = section.body.details;
+            payload.workflowSteps.actor = this.currentSubmitter.actor;
+            payload.workflowSteps.actor.email = this.currentActor;
+            payload.workflowSteps.status = SECTION_STATUS_PENDING;
+        }
+        return payload;
+    }
+    getBodyObject(method, serviceName, action, formName, payload, formId) {
+        let body = {
+            method: method,
+            destination: TARGET_SERVER_WM,
+            serviceName: serviceName,
+            parameters: {
+                action: action
+            },
+            formName: formName,
+            body: payload,
+            formId: formId,
+            queryParameters: {},
+            payload
+        };
+        if (this.config.formId) {
+            body.formId = this.config.formId;
+        }
+        if (!this.authorizedEmail || !this.authorizedEmail.length || this.authorizedEmail === this.requesterEmail) {
+            delete body.queryParameters;
+        }
+        if (saveFormHooks.beforeSendPayload) {
+            body.payload = saveFormHooks.beforeSendPayload(body.payload);
+        }
+        return body;
+    }
     callPost(body, options) {
         const language = window?.wmConfig?.language ? window.wmConfig.language : "en";
         let apiUrl = this.config.proxyServiceBaseUrl + language + this.config.proxyFullAddress + this.config.proxyServiceExecute;
         return this.http.post(apiUrl, encodeURIComponent(JSON.stringify(body)), options).toPromise()
             .then((responseObject) => {
-            // let payload = responseObject.body;
             return this.successWm(responseObject);
         }).catch((httpError) => {
             return throwError(httpError);
         });
     }
-    /*successWm(...args: any[]) {
-      let [payload] = args;
-      let wasSendBack = false;
-      /!* Convert into Form Object *!/
-      let result = new Form(
-        constants.NO_VALUE,
-        constants.NO_VALUE,
-        constants.NO_VALUE,
-        constants.NO_VALUE,
-        constants.NO_VALUE,
-        constants.NO_VALUE,
-        constants.NO_VALUE
-      );
-      // keep emails on-track
-      let payloadFormDetails = payload.data.form;
-      let isReadOnly = (payloadFormDetails.readOnly.toUpperCase() === constants.TRUE_STRING ? constants.TRUE_BOOL : (payloadFormDetails.readOnly.toUpperCase() === constants.FALSE_STRING ? constants.FALSE_BOOL : constants.NO_VALUE))
-      result.header = new Header(
-        payload.data?.['requester'].fullName,
-        constants.IGATE_STATIC_ASSET_PROFILE_PHOTO_URL + payload.data.requester.employeeEmail,
-        (payloadFormDetails.formId ? payloadFormDetails.formId : constants.DONT_SHOW),
-        (payloadFormDetails.creationDate ? payloadFormDetails.creationDate : constants.DONT_SHOW),
-        payloadFormDetails.formStatus,
-        payloadFormDetails.details
-      );
-      // this.isReadOnly = payloadFormDetails.readOnly
-      /!* Generate Profile Information Object *!/
-      let payloadProfileInfo = payload.data?.['requester'];
-      result.profileInfoDrop = new ProfileInfoDrop(
-        (payloadProfileInfo.onBehalfAuthorized ? JSON.parse(payloadProfileInfo.onBehalfAuthorized) : null),
-        payloadProfileInfo?.['employeeId'],
-        payloadProfileInfo.employeeEmail,
-        payloadProfileInfo.fullName,
-        payloadProfileInfo.generalDepartmentName,
-        payloadProfileInfo.jobPosition,
-        payloadProfileInfo?.['sectorName'],
-        payloadProfileInfo.departmentName,
-        payloadProfileInfo.generalDepartmentCode,
-        payloadProfileInfo?.['humanResourceLocation'],
-        payloadProfileInfo.nationality,
-        payloadProfileInfo.businessPhone,
-        payloadProfileInfo?.['directManagerName']
-      );
-      /!* Generate Sections Object *!/
-      result.sections = [];
-      /!* Push as first object the section for the request details *!/
-      let requestDetailsHasComment = false;
-      if (payload.data.request.details.comment) {
-        requestDetailsHasComment = true;
-      }
-      result.sections.push(
-        new Section(
-          constants.SECTION_ID_REQUEST_DETAILS,
-          new SectionHeader(
-            constants.DONT_SHOW,
-            constants.DONT_SHOW,
-            constants.DONT_SHOW,
-            constants.DONT_SHOW,
-            constants.DONT_SHOW,
-            constants.DONT_SHOW,
-            constants.DONT_SHOW,
-            requestDetailsHasComment,
-            (payload.data.workflowSteps ? constants.READ_ONLY : isReadOnly)
-          ),
-          payload.data.request
-        )
-      );
-  
-  
-      let payloadWorkflowSteps = payload.data.workflowSteps;
-      if (payloadWorkflowSteps && payloadWorkflowSteps.constructor === Array && payloadWorkflowSteps.length > 0) {
-        payloadWorkflowSteps.forEach((step, index) => {
-          let currentIsRequesterSendBack = JSON.stringify(step.details) === JSON.stringify({});
-          let hasComments = (!currentIsRequesterSendBack && (step.details.comment || step.comment) ? constants.HAS_COMMENTS : constants.NO_COMMENTS);
-          this.currentActor = (step.actor.email === step.actor.recipient.email ? step.actor.recipient : (step.actor.delegate ? step.actor.delegate : null))
-          if (hasComments) {
-            result.commentsDrop = (!result.commentsDrop ? [] : result.commentsDrop);
-          }
-  
-          if (wasSendBack && step.actor.recipient.role === 'REQUESTER') {
-            console.log("wasSendBack && REQUESTER")
-            result.sections = [new Section(
-              constants.SECTION_ID_REQUEST_DETAILS,
-              new SectionHeader(
-                constants.DONT_SHOW,
-                constants.DONT_SHOW,
-                constants.DONT_SHOW,
-                constants.DONT_SHOW,
-                constants.DONT_SHOW,
-                constants.DONT_SHOW,
-                constants.DONT_SHOW,
-                requestDetailsHasComment,
-                (payload.data.workflowSteps ? constants.READ_ONLY : isReadOnly)
-              ),
-              payload.data.request
-            )]
-          } else if (wasSendBack) {
-            console.log("Pop")
-            if (result.sections.length > 1) {
-              result.sections.pop();
+    submit(body, options) {
+        const language = window?.wmConfig?.language ? window.wmConfig.language : "en";
+        const apiUrl = this.config.proxyServiceBaseUrl + language + this.config.proxyFullAddress + this.config.proxyServiceExecute;
+        // Convert the promise to an observable
+        return from(this.http.post(apiUrl, encodeURIComponent(JSON.stringify(body)), options).toPromise().then((responseObject) => {
+            let formResponse = responseObject.data.form;
+            if (saveFormHooks.afterSendPayload) {
+                formResponse = saveFormHooks.afterSendPayload(formResponse);
             }
-            wasSendBack = false;
-          }
-          if (step.details.decision && step.details.decision.key === constants.FORM_STATUS_SEND_BACK) {
-            wasSendBack = true;
-          } else if (JSON.stringify(step.details) !== JSON.stringify({})) {
-            result.sections.push(
-              new Section(
-                step.actor.recipient.role.toLowerCase() + constants.SECTION_ID_APPROVAL_PARTIAL_NAME,
-                new SectionHeader(
-                  (this.getShortName(this.currentActor?.name)),
-                  step.date,
-                  this.getShortName(step.actor.recipient.name),
-                  constants.IGATE_STATIC_ASSET_PROFILE_PHOTO_URL + step.actor.recipient.email,
-                  (step.actor.delegate && step.actor.delegate.name ? this.getShortName(step.actor.delegate.name) : null),
-                  (step.actor.delegate && step.actor.delegate.email ? constants.IGATE_STATIC_ASSET_PROFILE_PHOTO_URL + step.actor.delegate.email : null),
-                  step.actor.status,
-                  hasComments,
-                  (index < payloadWorkflowSteps.length - 1 ? constants.READ_ONLY : isReadOnly)
-                ),
-                {details: step.details, processingDate: step.date}
-              )
-            );
-            // this.generalService.currentSubmitter = {actor: step.actor, recipient: step.recipient, delegate: step.actor.delegate};
-  
-          }
-        });
-      }
-  
-  
-      /!* Create Lov Sections *!/
-      result.lovs = (payload.meta && payload.meta.lovs ? payload.meta.lovs : null);
-  
-      if (payload.meta && payload.meta.messages) {
-        result.messages = new Messages(
-          {},
-          [],
-          [],
-          []
-        );
-        payload.meta.messages.forEach((message: any) => {
-          result.messages[message.type].push(message.message);
-        });
-      }
-      // result.messages = (payload.meta && payload.meta.messages ? payload.meta.messages : null);
-      /!* Fix last section to be the RO/WM from the variable *!/
-      result.sections[result.sections.length - 1].header.readOnly = isReadOnly;
-      return result;
-    }*/
+            let result = {
+                id: null,
+                status: null,
+                nextApprover: {
+                    name: null,
+                    email: null,
+                    role: null
+                },
+                creationDate: null
+            };
+            result.id = formResponse.formId;
+            result.status = formResponse['formStatus'];
+            if (formResponse.currentActor) {
+                result.nextApprover = {
+                    name: formResponse.currentActor.name,
+                    email: formResponse.currentActor.email,
+                    role: formResponse['formStep']
+                };
+            }
+            result.creationDate = formResponse.creationDate;
+            return result;
+        }, (httpError) => {
+            throw httpError;
+        }));
+    }
     successWm(...args) {
         let [payload] = args;
-        // let wasSendBack = false;
+        let wasSendBack = false;
         /* Convert into Form Object */
         let result = new Form(NO_VALUE, NO_VALUE, NO_VALUE, NO_VALUE, NO_VALUE, NO_VALUE, NO_VALUE);
+        this.requesterEmail = payload.data['requester'].employeeEmail;
+        this.authorizedEmail = payload.data['requester'].authorizedEmail;
         /* Generate Header Object */
         let payloadFormDetails = payload.data.form;
         let isReadOnly = (payloadFormDetails.readOnly.toUpperCase() === TRUE_STRING ? TRUE_BOOL : (payloadFormDetails.readOnly.toUpperCase() === FALSE_STRING ? FALSE_BOOL : NO_VALUE));
         result.header = new Header(payload.data['requester'].fullName, IGATE_STATIC_ASSET_PROFILE_PHOTO_URL + payload.data['requester'].employeeEmail, (payloadFormDetails.formId ? payloadFormDetails.formId : DONT_SHOW), (payloadFormDetails.creationDate ? payloadFormDetails.creationDate : DONT_SHOW), payloadFormDetails['formStatus'], payloadFormDetails.details);
         /* Generate Profile Information Object */
         let payloadProfileInfo = payload.data['requester'];
-        result.profileInfoDrop = new ProfileInfoDrop((payloadProfileInfo.onBehalfAuthorized ? JSON.parse(payloadProfileInfo.onBehalfAuthorized) : null), payloadProfileInfo['employeeId'], payloadProfileInfo.employeeEmail, payloadProfileInfo.fullName, payloadProfileInfo.generalDepartmentName, payloadProfileInfo.jobPosition, payloadProfileInfo.sectorName, payloadProfileInfo.departmentName, payloadProfileInfo.generalDepartmentCode, payloadProfileInfo['humanResourceLocation'], payloadProfileInfo.nationality, payloadProfileInfo.businessPhone, payloadProfileInfo.directManagerName, payloadProfileInfo.seniorSectorName);
-        /* Generate Sections Object */
+        result.profileInfoDrop = new ProfileInfoDrop((payloadProfileInfo['onBehalfAuthorized'] ? JSON.parse(payloadProfileInfo['onBehalfAuthorized']) : null), payloadProfileInfo['employeeId'], payloadProfileInfo.employeeEmail, payloadProfileInfo.fullName, payloadProfileInfo.generalDepartmentName, payloadProfileInfo.jobPosition, payloadProfileInfo['sectorName'], payloadProfileInfo.departmentName, payloadProfileInfo.generalDepartmentCode, payloadProfileInfo['humanResourceLocation'], payloadProfileInfo.nationality, payloadProfileInfo.businessPhone, payloadProfileInfo['directManagerName'], payloadProfileInfo.seniorSectorName);
         result.sections = [];
-        /* Push as first object the section for the request details */
         let requestDetailsHasComment = false;
         if (payload.data.request.details.comment) {
             requestDetailsHasComment = true;
         }
         result.sections.push(new Section(SECTION_ID_REQUEST_DETAILS, new SectionHeader(DONT_SHOW, DONT_SHOW, DONT_SHOW, DONT_SHOW, DONT_SHOW, DONT_SHOW, DONT_SHOW, requestDetailsHasComment, (payload.data['workflowSteps'] ? READ_ONLY : isReadOnly)), payload.data.request));
-        /*if (result.header.formId) {
-          result.commentsDrop = (!result.commentsDrop ? [] : result.commentsDrop);
-          this.dispatch(constants.STATE_MACHINE_ACTION_LOAD_HISTORY, result.header.formId).then((responseObject: any) => {
-            if (responseObject) {
-              responseObject.items.forEach((item: any) => {
-                if (item.sequenceNumber !== '0' && item.processedBy) {
-                  const name = item.processedBy.firstName + ' ' + item.processedBy.secondMiddleName + ' ' + item.processedBy.familyName;
-                  result.commentsDrop.push(new CommentsDrop(
-                    constants.IGATE_STATIC_ASSET_PROFILE_PHOTO_URL + item.processedBy.email,
-                    name,
-                    item.comments,
-                    item.modifiedDate,
-                    item.attachments,
-                    item.processedBy.job
-                  ));
+        if (result.header.formId) {
+            result.commentsDrop = (!result.commentsDrop ? [] : result.commentsDrop);
+            this.loadHistory(result.header.formId).subscribe((response) => {
+                if (response) {
+                    response.items.forEach((item) => {
+                        if (item.sequenceNumber !== '0' && item.processedBy) {
+                            const name = item.processedBy['firstName'] + ' ' + item.processedBy['secondMiddleName'] + ' ' + item.processedBy['familyName'];
+                            result.commentsDrop.push(new CommentsDrop(IGATE_STATIC_ASSET_PROFILE_PHOTO_URL + item.processedBy.email, name, item.comments, item['modifiedDate'], item.attachments, item.processedBy.job));
+                        }
+                    });
                 }
-              });
-            }
-          });
-        }*/
-        /*if (result.header.formId && /^DYL/.test(result.header.formId)) {
-          this.state = constants.STATE_MACHINE_STATUS_IDLE;
-          result.confidentialComments = [];
-          this.dispatch('loadConfidentialComments', result.header.formId).then((responseObject: any) => {
-            if (responseObject && responseObject.items && responseObject.items.length > 0) {
-              responseObject.items.forEach((item: any) => {
-                result.confidentialComments.push(new CommentsDrop(
-                  constants.IGATE_STATIC_ASSET_PROFILE_PHOTO_URL + item.email,
-                  item.name,
-                  item.comment,
-                  item.modifiedDate,
-                  item.attachment,
-                  item.position
-                ));
-              })
-            }
-          });
-        }*/
-        /*const inboxType = this.getInboxType(result);
+            });
+        }
+        const inboxType = this.getInboxType(result);
         if (result.header.formId && (!this.isOpenOnInbox())) {
-          this.state = constants.STATE_MACHINE_STATUS_IDLE;
-          this.dispatch(constants.STATE_MACHINE_ACTION_GET_INBOX_ITEM, result.header.formId, inboxType).then((responseObject) => {
-            if (responseObject) {
-              const item = responseObject.item;
-              result.inboxItem = new InboxItem(
-                item.flagging.flagPriority,
-                item.flagging.isFlagged,
-                item.feedback.canRequestFeedback,
-                item.feedback.hasFeedback,
-                item.feedback.isPending,
-                item.feedback.isRequested,
-                item.feedback.isResponded
-              );
-            }
-          });
-        }*/
+            this.getInboxItem(result.header.formId, inboxType).subscribe((response) => {
+                if (response) {
+                    const item = response.item;
+                    result.inboxItem = new InboxItem(item['flagging'].flagPriority, item['flagging']['isFlagged'], item.feedback['canRequestFeedback'], item.feedback['hasFeedback'], item.feedback['isPending'], item.feedback['isRequested'], item.feedback['isResponded']);
+                }
+            });
+        }
         let payloadWorkflowSteps = payload.data.workflowSteps;
         if (payloadWorkflowSteps && payloadWorkflowSteps.constructor === Array && payloadWorkflowSteps.length > 0) {
             payloadWorkflowSteps.forEach((step, index) => {
                 let currentIsRequesterSendBack = JSON.stringify(step.details) === JSON.stringify({});
                 let hasComments = (!currentIsRequesterSendBack && (step.details.comment || step.comment) ? HAS_COMMENTS : NO_COMMENTS);
                 let currentActor = (step.actor.email === step.actor.recipient.email ? step.actor.recipient : (step.actor.delegate ? step.actor.delegate : null));
-                /*if (hasComments) {
-                  result.commentsDrop = (!result.commentsDrop ? [] : result.commentsDrop);
-                  if (step.details.attachment && step.details.attachment.attachmentId && this.config.production) {
-                    this.state = constants.STATE_MACHINE_STATUS_IDLE;
-                    this.dispatch(constants.STATE_MACHINE_ACTION_LOAD_FILE, step.details.attachment.attachmentId).then((responseObject) => {
-                      let fileInformation = responseObject.body;
-                      if (currentActor) {
-                        /!*this.dispatch(constants.STATE_MACHINE_ACTION_EMPLOYEE_PROFILE, currentActor.email).then((profile) => {
-                          result.commentsDrop.push(new CommentsDrop(
-                            constants.IGATE_STATIC_ASSET_PROFILE_PHOTO_URL + currentActor.email,
-                            currentActor.name,
-                            (step.details.comment ? step.details.comment : (step.comment ? step.comment : null)),
-                            step.date,
-                            fileInformation.fileName + "|data:" + fileInformation.mimeType + ";base64," + fileInformation.fileContents,
-                            profile.job.name
-                          ))
-                        })*!/
-                      }
-                    });
-                    this.state = constants.STATE_MACHINE_STATUS_FETCHING;
-                  } else if (step.details.attachmentId) {
-                    this.state = constants.STATE_MACHINE_STATUS_IDLE;
-                    this.dispatch(constants.STATE_MACHINE_ACTION_LOAD_FILE, step.details.attchmentId).then((responseObject) => {
-                      let fileInformation = responseObject.body;
-                      if (currentActor) {
-                        /!*this.dispatch(constants.STATE_MACHINE_ACTION_EMPLOYEE_PROFILE, currentActor.email).then((profile) => {
-                          result.commentsDrop.push(new CommentsDrop(
-                            constants.IGATE_STATIC_ASSET_PROFILE_PHOTO_URL + currentActor.email,
-                            currentActor.name,
-                            (step.details.comment ? step.details.comment : (step.comment ? step.comment : null)),
-                            step.date,
-                            fileInformation.fileName + "|data:" + fileInformation.mimeType + ";base64," + fileInformation.fileContents,
-                            profile.job.name
-                          ))
-                        })*!/
-                      }
-                    });
-                    this.state = constants.STATE_MACHINE_STATUS_FETCHING;
-                  } else {
-                    if (currentActor) {
-                      this.state = constants.STATE_MACHINE_STATUS_IDLE;
-                      /!*this.dispatch(constants.STATE_MACHINE_ACTION_EMPLOYEE_PROFILE, currentActor.email).then((profile) => {
-                        result.commentsDrop.push(new CommentsDrop(
-                          constants.IGATE_STATIC_ASSET_PROFILE_PHOTO_URL + currentActor.email,
-                          currentActor.name,
-                          (step.details.comment ? step.details.comment : (step.comment ? step.comment : null)),
-                          step.date,
-                          null,
-                          profile.job.name
-                        ))
-                      })*!/
-                    }
-                    this.state = constants.STATE_MACHINE_STATUS_FETCHING;
-                  }
-                }*/
-                /* if (wasSendBack && step.actor.recipient.role === 'REQUESTER') {
-                   console.log("wasSendBack && REQUESTER")
-                   result.sections = [new Section(
-                     constants.SECTION_ID_REQUEST_DETAILS,
-                     new SectionHeader(
-                       constants.DONT_SHOW,
-                       constants.DONT_SHOW,
-                       constants.DONT_SHOW,
-                       constants.DONT_SHOW,
-                       constants.DONT_SHOW,
-                       constants.DONT_SHOW,
-                       constants.DONT_SHOW,
-                       requestDetailsHasComment,
-                       (payload.data.workflowSteps ? constants.READ_ONLY : isReadOnly)
-                     ),
-                     payload.data.request
-                   )]
-                 } else if (wasSendBack) {
-                   console.log("Pop")
-                   if (result.sections.length > 1) {
-                     result.sections.pop();
+                /* if (hasComments) {
+                   result.commentsDrop = (!result.commentsDrop ? [] : result.commentsDrop);
+                   if (step.details.attachment && step.details.attachment.attachmentId && this.config.production) {
+                     // this.state = constants.STATE_MACHINE_STATUS_IDLE;
+                     /!*           this.dispatch(constants.STATE_MACHINE_ACTION_LOAD_FILE, step.details.attachment.attachmentId).then((responseObject) => {
+                                  let fileInformation = responseObject.body;
+                                  if (currentActor) {
+                                    /!*this.dispatch(constants.STATE_MACHINE_ACTION_EMPLOYEE_PROFILE, currentActor.email).then((profile) => {
+                                      result.commentsDrop.push(new CommentsDrop(
+                                        constants.IGATE_STATIC_ASSET_PROFILE_PHOTO_URL + currentActor.email,
+                                        currentActor.name,
+                                        (step.details.comment ? step.details.comment : (step.comment ? step.comment : null)),
+                                        step.date,
+                                        fileInformation.fileName + "|data:" + fileInformation.mimeType + ";base64," + fileInformation.fileContents,
+                                        profile.job.name
+                                      ))
+                                    })*!/
+                                  }
+                                });
+                                this.state = constants.STATE_MACHINE_STATUS_FETCHING;*!/
+                   } else if (step.details.attachmentId) {
+                     /!* this.state = constants.STATE_MACHINE_STATUS_IDLE;
+                      this.dispatch(constants.STATE_MACHINE_ACTION_LOAD_FILE, step.details.attchmentId).then((responseObject) => {
+                        let fileInformation = responseObject.body;
+                        if (currentActor) {
+                          /!*this.dispatch(constants.STATE_MACHINE_ACTION_EMPLOYEE_PROFILE, currentActor.email).then((profile) => {
+                            result.commentsDrop.push(new CommentsDrop(
+                              constants.IGATE_STATIC_ASSET_PROFILE_PHOTO_URL + currentActor.email,
+                              currentActor.name,
+                              (step.details.comment ? step.details.comment : (step.comment ? step.comment : null)),
+                              step.date,
+                              fileInformation.fileName + "|data:" + fileInformation.mimeType + ";base64," + fileInformation.fileContents,
+                              profile.job.name
+                            ))
+                          })*!/
+                        }
+                      });
+                      this.state = constants.STATE_MACHINE_STATUS_FETCHING;*!/
+                   } else {
+                     if (currentActor) {
+                       this.employeeProfile(currentActor.email).subscribe((profile: any) => {
+                         if (profile) {
+                           result.commentsDrop.push(new CommentsDrop(
+                             constants.IGATE_STATIC_ASSET_PROFILE_PHOTO_URL + currentActor.email,
+                             currentActor.name,
+                             (step.details.comment ? step.details.comment : (step.comment ? step.comment : null)),
+                             step.date,
+                             null,
+                             profile.job.name
+                           ))
+                         }
+                       });
+                     }
                    }
-                   wasSendBack = false;
-                 }
-                 */
+                 }*/
+                if (wasSendBack && step.actor.recipient.role === 'REQUESTER') {
+                    console.log("wasSendBack && REQUESTER");
+                    result.sections = [new Section(SECTION_ID_REQUEST_DETAILS, new SectionHeader(DONT_SHOW, DONT_SHOW, DONT_SHOW, DONT_SHOW, DONT_SHOW, DONT_SHOW, DONT_SHOW, requestDetailsHasComment, (payload.data.workflowSteps ? READ_ONLY : isReadOnly)), payload.data.request)];
+                }
+                else if (wasSendBack) {
+                    console.log("Pop");
+                    if (result.sections.length > 1) {
+                        result.sections.pop();
+                    }
+                    wasSendBack = false;
+                }
                 if (step.details.decision && step.details.decision.key === FORM_STATUS_SEND_BACK) {
-                    // wasSendBack = true;
+                    wasSendBack = true;
                 }
                 else if (JSON.stringify(step.details) !== JSON.stringify({})) {
                     result.sections.push(new Section(step.actor.recipient.role.toLowerCase() + SECTION_ID_APPROVAL_PARTIAL_NAME, new SectionHeader((currentActor ? this.getShortName(currentActor.name) : "").toString(), step.date, this.getShortName(step.actor.recipient.name).toString(), IGATE_STATIC_ASSET_PROFILE_PHOTO_URL + step.actor.recipient.email, (step.actor.delegate?.name ? this.getShortName(step.actor.delegate.name) : "").toString(), (step.actor.delegate?.email ? IGATE_STATIC_ASSET_PROFILE_PHOTO_URL + step.actor.delegate.email : ""), step.actor.status, hasComments, (index < payloadWorkflowSteps.length - 1 ? READ_ONLY : isReadOnly)), { details: step.details, processingDate: step.date }));
-                    // this.currentSubmitter = {actor: step.actor, recipient: step.recipient, delegate: step.actor.delegate};
+                    this.currentSubmitter = { actor: step.actor, recipient: step.recipient, delegate: step.actor.delegate };
                 }
             });
         }
@@ -1195,6 +1134,80 @@ class CoreService {
         result.sections[result.sections.length - 1].header.readOnly = isReadOnly;
         return result;
     }
+    loadFile(...args) {
+        const [id] = args;
+        return this.http.get(this.config.proxyFullAddress + this.config.proxyServiceForms + this.config.formId + this.config.proxyServiceAttachment + id, { observe: 'response' }).toPromise();
+    }
+    dataURItoBlob(dataURI) {
+        const byteString = atob(dataURI);
+        const arrayBuffer = new ArrayBuffer(byteString.length);
+        const int8Array = new Uint8Array(arrayBuffer);
+        for (let i = 0; i < byteString.length; i++) {
+            int8Array[i] = byteString.charCodeAt(i);
+        }
+        return new Blob([arrayBuffer], { type: 'image/jpeg' });
+    }
+    loadHistory(...args) {
+        const [id] = args;
+        const body = {
+            method: HTTP_METHOD_GET,
+            destination: TARGET_SERVER_WM,
+            serviceName: WORKFLOW_ITEMS,
+            formId: id ? id : this.config.formId,
+            formName: "bpm",
+        };
+        let options = this.getRequestOptions();
+        return this.generalCallApi(body, STATE_MACHINE_ACTION_LOAD_HISTORY, options);
+    }
+    getInboxItem(...args) {
+        const [id, inboxType] = args;
+        const body = {
+            formName: this.config.formName,
+            method: HTTP_METHOD_GET,
+            destination: TARGET_SERVER_DP,
+            serviceName: SERVICE_NAME_DP_INBOX_ITEM,
+            urlParameters: {
+                inboxid: id,
+                inboxtype: inboxType
+            }
+        };
+        let options = this.getRequestOptions();
+        return this.generalCallApi(body, STATE_MACHINE_ACTION_GET_INBOX_ITEM, options);
+    }
+    prespectiveApprovers(details) {
+        if (!this.config.production) {
+            details = {};
+        }
+        let serviceName = "form/" + this.config.formName;
+        if (this.config.formId) {
+            serviceName = "form/" + this.config.formId;
+        }
+        let body = {
+            method: HTTP_METHOD_POST,
+            destination: TARGET_SERVER_WM,
+            serviceName: serviceName,
+            formName: APPROVERS,
+            body: {
+                "request": {
+                    "details": details
+                }
+            }
+        };
+        let options = this.getRequestOptions();
+        return this.generalCallApi(body, STATE_MACHINE_ACTION_SUCCESS_RESPONSE, options);
+    }
+    generalCallApi(body, type, options) {
+        let apiUrl = this.config.proxyServiceBaseUrl + this.language + this.config.proxyFullAddress + this.config.proxyServiceExecute;
+        return this.http.post(apiUrl, encodeURIComponent(JSON.stringify(body)), options).pipe(map((responseObject) => {
+            return responseObject;
+            /*switch (type) {
+              case constants.STATE_MACHINE_ACTION_LOAD_HISTORY:
+                return responseObject
+            }*/
+        }), catchError((httpError) => {
+            return throwError(httpError);
+        }));
+    }
     loggedInUserId() {
         return this.userData['loggedInUserEmail'];
     }
@@ -1217,6 +1230,22 @@ class CoreService {
             return null;
         }
     }
+    isMobileApp() {
+        return window.wmConfig.isMobile;
+    }
+    getInboxType(result) {
+        let rtn = null;
+        if (this.loggedInUserId() === result.profileInfoDrop.employeeEmail) {
+            rtn = INBOX_STATUS_SENT;
+        }
+        else {
+            rtn = INBOX_STATUS_PENDING;
+        }
+        return rtn;
+    }
+    isOpenOnInbox() {
+        return window.wmConfig.outlook;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: CoreService, deps: [{ token: i1.HttpClient }, { token: MY_LIB_CONFIG_TOKEN }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: CoreService, providedIn: "any" });
 }
@@ -1320,24 +1349,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                     ], 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 }] });
 
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable @angular-eslint/component-selector */
 class SubmitDialogComponent {
     data;
     i18n;
+    coreService;
     successData;
     inboxUri;
-    constructor(data, i18n) {
+    constructor(data, i18n, coreService) {
         this.data = data;
         this.i18n = i18n;
+        this.coreService = coreService;
         this.successData = data;
         this.inboxUri = window.wmConfig.inboxUri;
     }
-    backHome() {
-        const url = window.wmConfig.inboxUri;
-        //console.log(" inboxUri ",url)
-        window.location.href = url;
-    }
     getImage(email) {
         if (email) {
             return '/group/i-gate/wm-bpm/forms/-/proxy/portrait?email=' + email;
@@ -1368,24 +1392,24 @@ class SubmitDialogComponent {
             case 'PENDING':
                 return 'warning';
             default:
-                return '';
-                break;
+                return 'success';
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SubmitDialogComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: CoreI18nService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", 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                <div class=\"info-item  px-3\" *ngIf=\"successData?.status?.key === 'PENDING'\">\r\n                    <!-- <span class=\"name fs-16-imp\">{{i18n.translate('formTablePendingWith')}}</span> -->\r\n\r\n                    <div class=\"d-flex align-items-center mt-2\">\r\n                        <div class=\"img-card circled-img small\">\r\n                            <img [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            </div>\r\n            <!--<div class=\"d-flex align-items-center gap-3 mt-3\"  *ngIf=\"!stateMachineService.isMobileApp()\">\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        </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: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", 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: "18.2.8", 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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SubmitDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-submit-dialog', schemas: [CUSTOM_ELEMENTS_SCHEMA], standalone: true, imports: [
                         MatDialogClose,
                         MatDialogContent,
-                        NgIf
-                    ], 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                <div class=\"info-item  px-3\" *ngIf=\"successData?.status?.key === 'PENDING'\">\r\n                    <!-- <span class=\"name fs-16-imp\">{{i18n.translate('formTablePendingWith')}}</span> -->\r\n\r\n                    <div class=\"d-flex align-items-center mt-2\">\r\n                        <div class=\"img-card circled-img small\">\r\n                            <img [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            </div>\r\n            <!--<div class=\"d-flex align-items-center gap-3 mt-3\"  *ngIf=\"!stateMachineService.isMobileApp()\">\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        </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"] }]
+                        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"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
-                }] }, { type: CoreI18nService }] });
+                }] }, { type: CoreI18nService }, { type: CoreService }] });
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @angular-eslint/component-selector */
@@ -1634,13 +1658,13 @@ class BaseComponent {
             this.emitedValue.emit(this.field);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: BaseComponent, deps: [{ token: CoreI18nService }, { token: i1.HttpClient }, { token: i1$2.FormBuilder }, { token: i4.DateAdapter }, { token: i0.ChangeDetectorRef }, { token: i1$1.MatDialog }, { token: i1$1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: MycurrencyPipe }, { token: MAT_DATE_FORMATS }, { token: i7.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: BaseComponent, deps: [{ token: CoreI18nService }, { token: i1.HttpClient }, { token: i2.FormBuilder }, { token: i4.DateAdapter }, { token: i0.ChangeDetectorRef }, { token: i1$1.MatDialog }, { token: i1$1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: MycurrencyPipe }, { token: MAT_DATE_FORMATS }, { token: i7.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: BaseComponent, isStandalone: true, selector: "app-base-component", inputs: { hideOption: "hideOption", type: "type", loading: "loading", field: "field", labelTextReadMode: "labelTextReadMode", labelTextWriteMode: "labelTextWriteMode", isReadOnly: "isReadOnly", name: "name", required: "required", mask: "mask", allowedExtensions: "allowedExtensions", link: "link", multiple: "multiple", insideTable: "insideTable", showIfEmpty: "showIfEmpty", showErrorMessage: "showErrorMessage", showHint: "showHint", hint: "hint", errorMessage: "errorMessage", placeholder: "placeholder", maxLength: "maxLength", minLength: "minLength", maxValue: "maxValue", minValue: "minValue", disabled: "disabled", lov: "lov", hasLabel: "hasLabel", section: "section", controller: "controller" }, outputs: { emitedValue: "emitedValue" }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR], ngImport: i0, template: '', isInline: true, styles: [""], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: BaseComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-base-component', template: '', providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], standalone: true }]
-        }], ctorParameters: () => [{ type: CoreI18nService }, { type: i1.HttpClient }, { type: i1$2.FormBuilder }, { type: i4.DateAdapter }, { type: i0.ChangeDetectorRef }, { type: i1$1.MatDialog }, { type: i1$1.MatDialogRef }, { type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: CoreI18nService }, { type: i1.HttpClient }, { type: i2.FormBuilder }, { type: i4.DateAdapter }, { type: i0.ChangeDetectorRef }, { type: i1$1.MatDialog }, { type: i1$1.MatDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
                 }] }, { type: MycurrencyPipe }, { type: CustomDateFormat, decorators: [{
@@ -2423,7 +2447,7 @@ class CheckBoxComponent extends BaseComponent {
         // });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: CheckBoxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: CheckBoxComponent, isStandalone: true, selector: "app-checkbox", inputs: { containTerms: "containTerms", termsLabel: "termsLabel", linkText: "linkText", hrefLink: "hrefLink" }, outputs: { downloadCheckBox: "downloadCheckBox" }, usesInheritance: true, ngImport: i0, template: "<mat-checkbox\r\n  class=\"my-3\" [disabled]=\"isReadOnly || disabled\" id=\"{{name}}{{randomID}}\" [(ngModel)]=\"value\" [name]=\"name\"\r\n  (change)=\"valueChange($event)\" [checked]=\"field\"\r\n>\r\n  <span class=\"fs-12 fw-medium fc-onyx\">\r\n    {{ isReadOnly ? labelTextReadMode : labelTextWriteMode }}\r\n  </span>\r\n  <span\r\n    class=\"fs-12 fw-bold fc-coral cursor-pointer mx-1\" *ngIf=\"containTerms\"\r\n    (click)=\"openTermsPopup(); false\">\r\n    {{ termsLabel ? termsLabel : i18n.translate('termsAndConditions') }}\r\n  </span>\r\n  <ng-container *ngIf=\"link\">\r\n    <span> | </span>\r\n    <a class=\"fs-12 fw-bold fc-coral cursor-pointer mx-1 d-inline-flex align-items-center gap-1\" href=\"{{hrefLink}}\" target=\"_blank\">\r\n      <ds-icon icon=\"external-link\"></ds-icon>\r\n      <span class=\"underline\">{{ linkText }}</span>\r\n    </a>\r\n  </ng-container>\r\n  <!-- <a *ngIf=\"containDownload\" style=\"color: blue;\" class=\"fs-12 fw-bold fc-coral cursor-pointer mx-1\" href=\"{{hrefLink}}\" target=\"_top\"> {{termsLabel}}</a> -->\r\n</mat-checkbox>\r\n", styles: [".checkbox{margin-top:10px!important;position:relative;margin-bottom:0!important}.checkbox label{padding-left:30px;font-size:14px;color:#414142}.checkbox input[type=checkbox]{opacity:0}.checkbox input[type=checkbox]+label.checkboxInput{position:absolute;width:25px;height:25px;top:0;left:0;padding-left:0}@media (max-width: 768px){.checkbox input[type=checkbox]+label.checkboxInput{top:8px!important}}.checkbox input[type=checkbox]+label.checkboxInput:before{content:\"\\f096\";font-family:FontAwesome;font-size:25px;display:block;margin-top:-7px;color:#ddd}.checkbox input[type=checkbox]:checked+label.checkboxInput:before{content:\"\\f14a\";color:#da3f7b;background-color:#fff}.rtlCheckbox.checkbox input[type=checkbox]+label.checkboxInput{left:inherit;right:0;padding-left:0;padding-right:0}.rtlCheckbox.checkbox label{padding-left:0;padding-right:30px}\n"], dependencies: [{ kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: CheckBoxComponent, isStandalone: true, selector: "app-checkbox", inputs: { containTerms: "containTerms", termsLabel: "termsLabel", linkText: "linkText", hrefLink: "hrefLink" }, outputs: { downloadCheckBox: "downloadCheckBox" }, usesInheritance: true, ngImport: i0, template: "<mat-checkbox\r\n  class=\"my-3\" [disabled]=\"isReadOnly || disabled\" id=\"{{name}}{{randomID}}\" [(ngModel)]=\"value\" [name]=\"name\"\r\n  (change)=\"valueChange($event)\" [checked]=\"field\"\r\n>\r\n  <span class=\"fs-12 fw-medium fc-onyx\">\r\n    {{ isReadOnly ? labelTextReadMode : labelTextWriteMode }}\r\n  </span>\r\n  <span\r\n    class=\"fs-12 fw-bold fc-coral cursor-pointer mx-1\" *ngIf=\"containTerms\"\r\n    (click)=\"openTermsPopup(); false\">\r\n    {{ termsLabel ? termsLabel : i18n.translate('termsAndConditions') }}\r\n  </span>\r\n  <ng-container *ngIf=\"link\">\r\n    <span> | </span>\r\n    <a class=\"fs-12 fw-bold fc-coral cursor-pointer mx-1 d-inline-flex align-items-center gap-1\" href=\"{{hrefLink}}\" target=\"_blank\">\r\n      <ds-icon icon=\"external-link\"></ds-icon>\r\n      <span class=\"underline\">{{ linkText }}</span>\r\n    </a>\r\n  </ng-container>\r\n  <!-- <a *ngIf=\"containDownload\" style=\"color: blue;\" class=\"fs-12 fw-bold fc-coral cursor-pointer mx-1\" href=\"{{hrefLink}}\" target=\"_top\"> {{termsLabel}}</a> -->\r\n</mat-checkbox>\r\n", styles: [".checkbox{margin-top:10px!important;position:relative;margin-bottom:0!important}.checkbox label{padding-left:30px;font-size:14px;color:#414142}.checkbox input[type=checkbox]{opacity:0}.checkbox input[type=checkbox]+label.checkboxInput{position:absolute;width:25px;height:25px;top:0;left:0;padding-left:0}@media (max-width: 768px){.checkbox input[type=checkbox]+label.checkboxInput{top:8px!important}}.checkbox input[type=checkbox]+label.checkboxInput:before{content:\"\\f096\";font-family:FontAwesome;font-size:25px;display:block;margin-top:-7px;color:#ddd}.checkbox input[type=checkbox]:checked+label.checkboxInput:before{content:\"\\f14a\";color:#da3f7b;background-color:#fff}.rtlCheckbox.checkbox input[type=checkbox]+label.checkboxInput{left:inherit;right:0;padding-left:0;padding-right:0}.rtlCheckbox.checkbox label{padding-left:0;padding-right:30px}\n"], dependencies: [{ kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: CheckBoxComponent, decorators: [{
             type: Component,
@@ -2662,7 +2686,7 @@ class CustomSearchableComponent extends BaseComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: CustomSearchableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: CustomSearchableComponent, isStandalone: true, selector: "app-custom-searchable", inputs: { myControl: "myControl", options: "options", label: "label", floatLabel: "floatLabel", className: "className" }, outputs: { selectedValue: "selectedValue", resetByDeleteBtn: "resetByDeleteBtn", isLengthGreaterThan4: "isLengthGreaterThan4" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"isReadOnly && field?.value\">\r\n  <app-info-item class=\"info-item w-100\" [label]=\"label\" [insideTable]=\"insideTable\" [hasLabel]=\"hasLabel\" [value]=\"field?.value\"></app-info-item>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"!isReadOnly\">\r\n  <div class=\"d-flex justify-content-between mb-1\" *ngIf=\"hasLabel\">\r\n    <span class=\"form-label mb-0\">{{label}}</span>\r\n    <span *ngIf=\"!required\" class=\"fs-11 fc-dark-gray\">\r\n      {{i18n.translate('Optional')}}\r\n    </span>\r\n  </div>\r\n  <mat-form-field class=\"primary-form {{className}}\" [ngClass]=\"{'input-disabled' : (disabled || loading) }\"\r\n    [floatLabel]=\"floatLabel\" >\r\n    <!-- (click)=\"clearInput()\" -->\r\n    <span class=\"sfi sfi-search fc-coral fs-18\" matPrefix></span>\r\n    <label class=\"mat-form-content\">\r\n      <!-- <bdi> -->\r\n      <input #autocompleteInput type=\"text\" (keydown)=\"onKeyDown($event, autocompleteInput)\" [attr.disabled]=\"disabled \" [placeholder]=\"label\" aria-label=\"Number\" matInput\r\n      (input)=\"onValueChange()\" [formControl]=\"myControl\"\r\n      [value]=\"field?.value\" ngDefaultControl [name]=\"name\" [matAutocomplete]=\"auto\">\r\n    <!-- </bdi> -->\r\n  </label>\r\n    <span class=\"sfi sfi-spinner d-inline-block spin fc-coral\" matSuffix *ngIf=\"loading\"></span>\r\n    <span class=\"sfi sfi-close d-inline-block fc-black cursor-pointer\" (click)=\"clearInput()\" matSuffix\r\n      *ngIf=\"!loading && field?.value\"></span>\r\n    <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\" [displayWith]=\"displayFn\" \r\n      (optionSelected)='getAutoComplete($event.option.value)'>\r\n      <ng-container *ngIf=\"!noData\">\r\n        <mat-option *ngFor=\"let option of filteredOptions | async\" [value]=\"option\">\r\n          <div class=\"d-flex align-items-center\">\r\n            <figure *ngIf=\"option['avatar_url']\" class=\"img-card small circled-img p-0 m-0\">\r\n              <img [src]=\"option['avatar_url']\" alt=\"\">\r\n            </figure>\r\n            <span *ngIf=\"option['avatar_url']\" class=\"mx-2\"></span>\r\n           <!-- <bdi> -->\r\n             {{option['description']}}\r\n           <!-- </bdi> -->\r\n          </div>\r\n        </mat-option>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"noData\">\r\n        <mat-option [disabled]=\"true\" class=\"text-center\">No Data</mat-option>\r\n      </ng-container>\r\n    </mat-autocomplete>\r\n    <mat-error class=\"mb-2\" *ngIf=\"(!myControl?.valid)\">{{i18n.translate('validSelectError')}}{{label}}\r\n    </mat-error>\r\n    <mat-hint *ngIf=\"showHint\">\r\n      <span class=\"sfi sfi-check-circle font-10 fc-dark-gray\" [ngClass]=\"{'fc-oasis-light-imp':value}\"></span>\r\n      <span class=\"mx-1\"></span>\r\n      <span class=\"fs-12 fc-onyx\">{{hint}}</span>\r\n    </mat-hint>\r\n  </mat-form-field>\r\n</ng-container>\r\n", styles: [".small-input~.btn{height:41px}:host{flex-grow:1}\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: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.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: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: CustomSearchableComponent, isStandalone: true, selector: "app-custom-searchable", inputs: { myControl: "myControl", options: "options", label: "label", floatLabel: "floatLabel", className: "className" }, outputs: { selectedValue: "selectedValue", resetByDeleteBtn: "resetByDeleteBtn", isLengthGreaterThan4: "isLengthGreaterThan4" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"isReadOnly && field?.value\">\r\n  <app-info-item class=\"info-item w-100\" [label]=\"label\" [insideTable]=\"insideTable\" [hasLabel]=\"hasLabel\" [value]=\"field?.value\"></app-info-item>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"!isReadOnly\">\r\n  <div class=\"d-flex justify-content-between mb-1\" *ngIf=\"hasLabel\">\r\n    <span class=\"form-label mb-0\">{{label}}</span>\r\n    <span *ngIf=\"!required\" class=\"fs-11 fc-dark-gray\">\r\n      {{i18n.translate('Optional')}}\r\n    </span>\r\n  </div>\r\n  <mat-form-field class=\"primary-form {{className}}\" [ngClass]=\"{'input-disabled' : (disabled || loading) }\"\r\n    [floatLabel]=\"floatLabel\" >\r\n    <!-- (click)=\"clearInput()\" -->\r\n    <span class=\"sfi sfi-search fc-coral fs-18\" matPrefix></span>\r\n    <label class=\"mat-form-content\">\r\n      <!-- <bdi> -->\r\n      <input #autocompleteInput type=\"text\" (keydown)=\"onKeyDown($event, autocompleteInput)\" [attr.disabled]=\"disabled \" [placeholder]=\"label\" aria-label=\"Number\" matInput\r\n      (input)=\"onValueChange()\" [formControl]=\"myControl\"\r\n      [value]=\"field?.value\" ngDefaultControl [name]=\"name\" [matAutocomplete]=\"auto\">\r\n    <!-- </bdi> -->\r\n  </label>\r\n    <span class=\"sfi sfi-spinner d-inline-block spin fc-coral\" matSuffix *ngIf=\"loading\"></span>\r\n    <span class=\"sfi sfi-close d-inline-block fc-black cursor-pointer\" (click)=\"clearInput()\" matSuffix\r\n      *ngIf=\"!loading && field?.value\"></span>\r\n    <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\" [displayWith]=\"displayFn\" \r\n      (optionSelected)='getAutoComplete($event.option.value)'>\r\n      <ng-container *ngIf=\"!noData\">\r\n        <mat-option *ngFor=\"let option of filteredOptions | async\" [value]=\"option\">\r\n          <div class=\"d-flex align-items-center\">\r\n            <figure *ngIf=\"option['avatar_url']\" class=\"img-card small circled-img p-0 m-0\">\r\n              <img [src]=\"option['avatar_url']\" alt=\"\">\r\n            </figure>\r\n            <span *ngIf=\"option['avatar_url']\" class=\"mx-2\"></span>\r\n           <!-- <bdi> -->\r\n             {{option['description']}}\r\n           <!-- </bdi> -->\r\n          </div>\r\n        </mat-option>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"noData\">\r\n        <mat-option [disabled]=\"true\" class=\"text-center\">No Data</mat-option>\r\n      </ng-container>\r\n    </mat-autocomplete>\r\n    <mat-error class=\"mb-2\" *ngIf=\"(!myControl?.valid)\">{{i18n.translate('validSelectError')}}{{label}}\r\n    </mat-error>\r\n    <mat-hint *ngIf=\"showHint\">\r\n      <span class=\"sfi sfi-check-circle font-10 fc-dark-gray\" [ngClass]=\"{'fc-oasis-light-imp':value}\"></span>\r\n      <span class=\"mx-1\"></span>\r\n      <span class=\"fs-12 fc-onyx\">{{hint}}</span>\r\n    </mat-hint>\r\n  </mat-form-field>\r\n</ng-container>\r\n", styles: [".small-input~.btn{height:41px}:host{flex-grow:1}\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: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: CustomSearchableComponent, decorators: [{
             type: Component,
@@ -2723,6 +2747,7 @@ class DatePickerComponent extends BaseComponent {
     minDateValue;
     maxDateValue;
     maxDate;
+    // @ViewChild('default')
     datepickerObj;
     minDate;
     customMaxDate;
@@ -2871,7 +2896,7 @@ class DatePickerComponent extends BaseComponent {
                 provide: MAT_DATE_FORMATS,
                 useClass: CustomDateFormat
             },
-        ], viewQueries: [{ propertyName: "datepickerObj", first: true, predicate: ["default"], descendants: true }, { propertyName: "datepicker", first: true, predicate: MatDatepicker, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"!isReadOnly\">\r\n  <div class=\"d-flex justify-content-between mb-1\" *ngIf=\"hasLabel\">\r\n    <span class=\"form-label mb-0\">{{labelTextWriteMode}}</span>\r\n    <span *ngIf=\"!required\" class=\"fs-11 fc-dark-gray\"> {{i18n.translate('optional')}} </span>\r\n  </div>\r\n  <div class=\"justify-content-between mb-1\">\r\n    <mat-form-field [ngClass]=\"{'input-disabled' : disabled }\" [floatLabel]=\"floatLabel\">\r\n      <label class=\"mat-form-content\">\r\n        <input matInput (dateInput)=\"dateChange($event)\" [placeholder]=\"hasLabel ? (i18n.translate('select') + ' ' + labelTextWriteMode) : ''\" (focus)=\"focusPicker(dp)\" [min]=\"minDateValue\"\r\n          [max]=\"maxDateValue\" readonly [matDatepicker]=\"dp\" [formControl]=\"date\">\r\n      </label>\r\n      <ds-icon *ngIf=\"date?.value\" matSuffix icon=\"close\" class=\"fc-onyx fs-10 mx-2 cursor-pointer\" (click)=\"clearDateValue($event)\"></ds-icon>\r\n      <mat-datepicker-toggle matSuffix [for]=\"dp\">\r\n        <ds-icon icon=\"calendar-o\" class=\"fc-black fs-18\" matDatepickerToggleIcon></ds-icon>\r\n      </mat-datepicker-toggle>\r\n      <mat-datepicker #dp>\r\n      </mat-datepicker>\r\n      <mat-error *ngIf=\"errorMessage\">{{errorMessage}}</mat-error>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"isReadOnly && field\">\r\n  <app-info-item class=\"info-item w-100\" type=\"date\" [insideTable]=\"insideTable\" [dateType]=\"calendarType\" [label]=\"labelTextReadMode\"\r\n    [value]=\"field\" [hasLabel]=\"hasLabel\">\r\n  </app-info-item>\r\n</ng-container>\r\n", styles: [":host{flex-grow:1}::ng-deep .year-only .mat-calendar-period-button{pointer-events:none}::ng-deep .year-only .mat-calendar-arrow{display:none}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: InfoItemComponent, selector: "app-info-item", inputs: ["label", "value", "name", "type", "dateType", "multiple", "insideTable", "hasLabel", "arrayList", "actionType", "download"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.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: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+        ], viewQueries: [{ propertyName: "datepicker", first: true, predicate: MatDatepicker, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"!isReadOnly\">\r\n  <div class=\"d-flex justify-content-between mb-1\" *ngIf=\"hasLabel\">\r\n    <span class=\"form-label mb-0\">{{labelTextWriteMode}}</span>\r\n    <span *ngIf=\"!required\" class=\"fs-11 fc-dark-gray\"> {{i18n.translate('optional')}} </span>\r\n  </div>\r\n  <div class=\"justify-content-between mb-1\">\r\n    <mat-form-field [ngClass]=\"{'input-disabled' : disabled }\" [floatLabel]=\"floatLabel\">\r\n      <label class=\"mat-form-content\">\r\n        <input matInput (dateInput)=\"dateChange($event)\" [placeholder]=\"hasLabel ? (i18n.translate('select') + ' ' + labelTextWriteMode) : ''\" (focus)=\"focusPicker(dp)\" [min]=\"minDateValue\"\r\n          [max]=\"maxDateValue\" readonly [matDatepicker]=\"dp\" [formControl]=\"date\">\r\n      </label>\r\n      <ds-icon *ngIf=\"date?.value\" matSuffix icon=\"close\" class=\"fc-onyx fs-10 mx-2 cursor-pointer\" (click)=\"clearDateValue($event)\"></ds-icon>\r\n      <mat-datepicker-toggle matSuffix [for]=\"dp\">\r\n        <ds-icon icon=\"calendar-o\" class=\"fc-black fs-18\" matDatepickerToggleIcon></ds-icon>\r\n      </mat-datepicker-toggle>\r\n      <mat-datepicker #dp>\r\n      </mat-datepicker>\r\n      <mat-error *ngIf=\"errorMessage\">{{errorMessage}}</mat-error>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"isReadOnly && field\">\r\n  <app-info-item class=\"info-item w-100\" type=\"date\" [insideTable]=\"insideTable\" [dateType]=\"calendarType\" [label]=\"labelTextReadMode\"\r\n    [value]=\"field\" [hasLabel]=\"hasLabel\">\r\n  </app-info-item>\r\n</ng-container>\r\n", styles: [":host{flex-grow:1}::ng-deep .year-only .mat-calendar-period-button{pointer-events:none}::ng-deep .year-only .mat-calendar-arrow{display:none}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: InfoItemComponent, selector: "app-info-item", inputs: ["label", "value", "name", "type", "dateType", "multiple", "insideTable", "hasLabel", "arrayList", "actionType", "download"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: DatePickerComponent, decorators: [{
             type: Component,
@@ -2913,9 +2938,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                 type: Input
             }], maxDate: [{
                 type: Input
-            }], datepickerObj: [{
-                type: ViewChild,
-                args: ['default']
             }], minDate: [{
                 type: Input
             }], customMaxDate: [{
@@ -2996,9 +3018,9 @@ class ControlValueAccessorDirective {
     showHint;
     showIfEmpty;
     insideTable;
-    maxLength;
     control;
     required = false;
+    maxLength;
     _isDisabled = false;
     constructor(injector, i18n) {
         this.injector = injector;
@@ -3006,9 +3028,6 @@ class ControlValueAccessorDirective {
     }
     ngOnInit() {
         this.setFormControl();
-        this.required = this.control?.hasValidator(Validators.required) ?? false;
-        const maxLengthValidator = this.control?.getError('maxlength');
-        maxLengthValidator ? this.maxLength = maxLengthValidator.requiredLength : this.maxLength = 0;
     }
     setFormControl() {
         try {
@@ -3028,11 +3047,14 @@ class ControlValueAccessorDirective {
         catch (err) {
             this.control = new FormControl();
         }
+        this.setFormValidators();
+    }
+    setFormValidators() {
+        console.log(this.control);
+        this.required = this.control?.hasValidator(Validators.required) ?? false;
     }
     writeValue(value) {
-        this.control
-            ? this.control.setValue(value)
-            : (this.control = new FormControl(value));
+        this.value = value;
     }
     registerOnChange(fn) {
     }
@@ -3042,7 +3064,7 @@ class ControlValueAccessorDirective {
         this._isDisabled = isDisabled;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ControlValueAccessorDirective, deps: [{ token: i0.Injector }, { token: CoreI18nService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.8", type: ControlValueAccessorDirective, selector: "[appControlValueAccessor]", inputs: { hasLabel: "hasLabel", isReadOnly: "isReadOnly", hideOption: "hideOption", labelTextWriteMode: "labelTextWriteMode", hint: "hint", loading: "loading", placeholder: "placeholder", type: "type", value: "value", showErrorMessage: "showErrorMessage", showHint: "showHint", showIfEmpty: "showIfEmpty", insideTable: "insideTable", maxLength: "maxLength" }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.8", type: ControlValueAccessorDirective, selector: "[appControlValueAccessor]", inputs: { hasLabel: "hasLabel", isReadOnly: "isReadOnly", hideOption: "hideOption", labelTextWriteMode: "labelTextWriteMode", hint: "hint", loading: "loading", placeholder: "placeholder", type: "type", value: "value", showErrorMessage: "showErrorMessage", showHint: "showHint", showIfEmpty: "showIfEmpty", insideTable: "insideTable" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ControlValueAccessorDirective, decorators: [{
             type: Directive,
@@ -3075,10 +3097,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                 type: Input
             }], insideTable: [{
                 type: Input
-            }], maxLength: [{
+            }] } });
+
+class ValidationErrorsComponent extends ControlValueAccessorDirective {
+    errors = {};
+    customErrorMessages = {};
+    label;
+    errorMessages = {
+        required: 'This field is required',
+        maxlength: 'This field max length',
+        minlength: 'This field min length',
+    };
+    ngOnChanges(changes) {
+        const { customErrorMessages } = changes;
+        if (customErrorMessages) {
+            this.errorMessages = {
+                ...this.errorMessages,
+                ...customErrorMessages.currentValue,
+            };
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ValidationErrorsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: ValidationErrorsComponent, isStandalone: true, selector: "app-validation-errors", inputs: { errors: "errors", customErrorMessages: "customErrorMessages", label: "label" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "  @if(control.touched) {\r\n    @for(error of errors | keyvalue; track error ) {\r\n            <mat-error class=\"mb-2\">\r\n                {{ errorMessages[error.key] }} {{errors['maxlength']?.requiredLength}} {{errors['minlength']?.requiredLength}}\r\n              </mat-error>\r\n    }\r\n  }\r\n\r\n  ", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$2.KeyValuePipe, name: "keyvalue" }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ValidationErrorsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-validation-errors', standalone: true, imports: [
+                        NgFor,
+                        CommonModule,
+                        MatError
+                    ], template: "  @if(control.touched) {\r\n    @for(error of errors | keyvalue; track error ) {\r\n            <mat-error class=\"mb-2\">\r\n                {{ errorMessages[error.key] }} {{errors['maxlength']?.requiredLength}} {{errors['minlength']?.requiredLength}}\r\n              </mat-error>\r\n    }\r\n  }\r\n\r\n  " }]
+        }], propDecorators: { errors: [{
+                type: Input
+            }], customErrorMessages: [{
+                type: Input
+            }], label: [{
                 type: Input
             }] } });
 
+/* eslint-disable @angular-eslint/use-lifecycle-interface */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @angular-eslint/component-selector */
 class InputComponent extends ControlValueAccessorDirective {
     label;
     hasTooltip = false;
@@ -3086,29 +3145,11 @@ class InputComponent extends ControlValueAccessorDirective {
     floatLabel = 'auto';
     className = 'bordered-input';
     showLabel = true;
-    matPrefix;
     iconPrefixName;
     matSuffix;
     iconSuffixName;
     emitedChangedValue1 = new EventEmitter();
     // ngOnInit(): void {
-    // this.resetPropagator.subscribe(this, this.resetData);
-    // this.field == undefined ? (this.field = '') : this.field;
-    // this.control.setValue(this.field);
-    // if (this.type == 'email') {
-    //   this.control.setValidators([
-    //     Validators.pattern('^[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,4}$'),
-    //   ]);
-    // }
-    // if (this.minLength) {
-    //   this.control.setValidators([Validators.minLength(+this.minLength)]);
-    // }
-    // if (this.maxLength) {
-    //   this.control.setValidators([Validators.maxLength(+this.maxLength)]);
-    // }
-    // if (this.maxValue) {
-    //   this.control.setValidators([Validators.max(+this.maxValue)]);
-    // }
     // }
     ngAfterViewChecked() {
         // this.cdRef.detectChanges();
@@ -3116,28 +3157,14 @@ class InputComponent extends ControlValueAccessorDirective {
     ngOnChanges(changes) {
         console.log(this.control.errors);
     }
-    onValueChange1(data) {
-        const currentValue = data.target.value;
-        this.emitedChangedValue1.emit(currentValue);
-    }
-    onValueChange(data) {
-        let currentValue = data.target.value;
-        console.log(this.control);
-        console.log("showErrorMessage :", this.control.errors);
-        // if (+currentValue.length > +this.maxLength) {
-        //   currentValue = currentValue.substr(0, +this.maxLength).toString();
-        // }
-        this.control.setValue(currentValue);
-        // this.emitedValue.emit(this.control.value.trim());
-    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: InputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: InputComponent, isStandalone: true, selector: "app-input", inputs: { label: "label", hasTooltip: "hasTooltip", tooltip: "tooltip", floatLabel: "floatLabel", className: "className", showLabel: "showLabel", matPrefix: "matPrefix", iconPrefixName: "iconPrefixName", matSuffix: "matSuffix", iconSuffixName: "iconSuffixName", emitedChangedValue1: "emitedChangedValue1" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: InputComponent, isStandalone: true, selector: "app-input", inputs: { label: "label", hasTooltip: "hasTooltip", tooltip: "tooltip", floatLabel: "floatLabel", className: "className", showLabel: "showLabel", iconPrefixName: "iconPrefixName", matSuffix: "matSuffix", iconSuffixName: "iconSuffixName", emitedChangedValue1: "emitedChangedValue1" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => InputComponent),
                 multi: true,
             },
-        ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if(!isReadOnly){\r\n<!--    <app-form-label [label]=\"label\" [optional]=\"!required\" [hideOption]=\"hideOption\" [showLabel]=\"showLabel\"></app-form-label>-->\r\n     @if(hasLabel){\r\n      <div class=\"d-flex justify-content-between mb-1\">\r\n        @if(!hasTooltip){<span class=\"form-label mb-0\">{{label}}</span>}\r\n        @if(!required && !hideOption){<span class=\"fs-11 fc-dark-gray\">{{i18n.translate('Optional')}}</span>}\r\n        @if(hasTooltip){\r\n          <span class=\"form-label mb-0\">\r\n            {{labelTextWriteMode}}\r\n            <ds-icon icon=\"info fs-22\" class=\"cursor-pointer\" [satPopoverAnchor]=\"popover\"\r\n              (click)=\"popover.toggle(); $event.stopImmediatePropagation()\"></ds-icon>\r\n         </span>\r\n        }\r\n      </div>\r\n     }\r\n    <mat-form-field class=\"primary-form {{className}}\" [ngClass]=\"{'input-disabled' : control.disabled}\"\r\n      [floatLabel]=\"floatLabel\">\r\n      @if(iconPrefixName){<span  matPrefix class=\"sfi {{iconPrefixName}}\"></span>}\r\n      @if(loading){<span class=\"sfi sfi-spinner d-inline-block spin fc-coral\" matSuffix></span>}\r\n\r\n      <label class=\"mat-form-content\">\r\n              <!-- add input for ar && en custom directive with add type = arOnly ||  type = enOnly-->\r\n               @if(type === 'arOnly'){\r\n                <input arOnly matInput [value]=\"value\"\r\n                 oninput=\"validity.valid || (value='');\" [formControl]=\"control\"\r\n                (input)=\"onValueChange($event)\" [required]=\"required\"\r\n                [placeholder]=\"placeholder\">\r\n               }\r\n        @if(type === 'enOnly'){\r\n          <input  enOnly matInput [value]=\"value\"\r\n           oninput=\"validity.valid || (value='');\" [formControl]=\"control\"\r\n          (input)=\"onValueChange($event)\" [required]=\"required\"\r\n          [placeholder]=\"placeholder\">\r\n        }\r\n              <!--  -->\r\n        @if(type !== 'enOnly' &&  type !== 'arOnly'){\r\n          <input  matInput [value]=\"value\"\r\n           oninput=\"validity.valid || (value='');\" [formControl]=\"control\" [type]=\"type\"\r\n           (input)=\"onValueChange($event)\" (change)=\"onValueChange1($event)\"\r\n          [placeholder]=\"placeholder\">\r\n\r\n        }\r\n      </label>\r\n      @if(matSuffix){<span matSuffix class=\"sfi {{iconSuffixName}}\"></span>}\r\n      @if(!control?.valid){\r\n        <mat-error class=\"mb-2\">\r\n          {{i18n.translate('validFieldError')}}{{label}}\r\n        </mat-error>\r\n      }\r\n    @if(showHint){\r\n      <mat-hint class=\"d-flex align-items-center gap-1 mt-1\">\r\n        <span class=\"sfi sfi-info fs-17 fc-dark-gray\" [ngClass]=\"{'fc-oasis-light-imp':value}\"></span>\r\n        <span class=\"fs-12 fc-black line-height-1\">{{hint}}</span>\r\n      </mat-hint>\r\n    }\r\n    </mat-form-field>\r\n\r\n      <span class=\"fc-coral\" style=\"color:#f44336\">\r\n        {{control.errors}}\r\n      </span>\r\n\r\n}\r\n\r\n@if(isReadOnly && (showIfEmpty || control)){\r\n  <ng-container  class=\"info-section\">\r\n    <app-info-item class=\"info-item w-100\" [label]=\"label\" [insideTable]=\"insideTable\"\r\n      [hasLabel]=\"hasLabel\" [type]=\"type\" [value]=\"control.value\"></app-info-item>\r\n      @if(showHint){\r\n        <mat-hint class=\"d-flex align-items-center gap-1 mt-1\">\r\n          <span class=\"sfi sfi-info fs-17 fc-dark-gray\" [ngClass]=\"{'fc-oasis-light-imp':value}\"></span>\r\n          <span class=\"fs-12 fc-black line-height-1\">{{hint}}</span>\r\n        </mat-hint>\r\n      }\r\n\r\n  </ng-container>\r\n}\r\n\r\n<!-- section tooltip -->\r\n<!-- <sat-popover #popover [hasBackdrop]=\"true\" verticalAlign=\"below\">\r\n  <div class=\"deafult-tooltip\">\r\n    {{tooltip}}\r\n  </div>\r\n</sat-popover> -->\r\n\r\n<sat-popover #popover [hasBackdrop]=\"true\"  verticalAlign=\"below\">\r\n  <div class=\"default-popover p-3 fs-14\">\r\n   <span class=\"fs-14 fw-bold signature-notes\" [innerHTML]='tooltip'></span>\r\n  </div>\r\n</sat-popover>\r\n", styles: [":host{flex-grow:1}.input-disabled{pointer-events:none;opacity:1.5}\n"], dependencies: [{ kind: "ngmodule", type: SatPopoverModule }, { kind: "component", type: i1$3.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: i1$3.SatPopoverAnchorDirective, selector: "[satPopoverAnchor]", inputs: ["satPopoverAnchor"], exportAs: ["satPopoverAnchor"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.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: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: InfoItemComponent, selector: "app-info-item", inputs: ["label", "value", "name", "type", "dateType", "multiple", "insideTable", "hasLabel", "arrayList", "actionType", "download"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }] });
+        ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if(!isReadOnly){\r\n<app-form-label\r\n  [label]=\"label\"\r\n  [optional]=\"!required\"\r\n  [hideOption]=\"hideOption\"\r\n  [showLabel]=\"showLabel\"\r\n></app-form-label>\r\n@if(hasLabel){\r\n<div class=\"d-flex justify-content-between mb-1\">\r\n  @if(!hasTooltip){<span class=\"form-label mb-0\">{{ label }}</span\r\n  >} @if(!required && !hideOption){<span class=\"fs-11 fc-dark-gray\">{{\r\n    i18n.translate(\"Optional\")\r\n  }}</span\r\n  >} @if(hasTooltip){\r\n  <span class=\"form-label mb-0\">\r\n    {{ labelTextWriteMode }}\r\n    <ds-icon\r\n      icon=\"info fs-22\"\r\n      class=\"cursor-pointer\"\r\n      [satPopoverAnchor]=\"popover\"\r\n      (click)=\"popover.toggle(); $event.stopImmediatePropagation()\"\r\n    ></ds-icon>\r\n  </span>\r\n  }\r\n</div>\r\n}\r\n<mat-form-field\r\n  class=\"primary-form {{ className }}\"\r\n  [ngClass]=\"{ 'input-disabled': control.disabled }\"\r\n  [floatLabel]=\"floatLabel\"\r\n>\r\n  @if(iconPrefixName){<span class=\"sfi {{ iconPrefixName }}\"></span>}\r\n  @if(loading){<span\r\n    class=\"sfi sfi-spinner d-inline-block spin fc-coral\"\r\n    matSuffix\r\n  ></span\r\n  >}\r\n\r\n  <label class=\"mat-form-content\">\r\n    <!-- add input for ar && en custom directive with add type = arOnly ||  type = enOnly-->\r\n    @if(type === 'arOnly'){\r\n    <input\r\n      arOnly\r\n      matInput\r\n      [value]=\"value\"\r\n      oninput=\"validity.valid || (value='');\"\r\n      [formControl]=\"control\"\r\n      [required]=\"required\"\r\n      [placeholder]=\"placeholder\"\r\n    />\r\n    } @else if(type === 'enOnly'){\r\n    <input\r\n      enOnly\r\n      matInput\r\n      [value]=\"value\"\r\n      oninput=\"validity.valid || (value='');\"\r\n      [formControl]=\"control\"\r\n      [required]=\"required\"\r\n      [placeholder]=\"placeholder\"\r\n    />\r\n    }\r\n    <!--  -->\r\n    @else{\r\n    <input\r\n      matInput\r\n      [value]=\"value\"\r\n      oninput=\"validity.valid || (value='');\"\r\n      [formControl]=\"control\"\r\n      [type]=\"type\"\r\n      [placeholder]=\"placeholder\"\r\n    />\r\n    }\r\n  </label>\r\n  \r\n  @if(matSuffix){<span matSuffix class=\"sfi {{ iconSuffixName }}\"></span>}\r\n  @if(!control?.valid){\r\n  <!-- <mat-error class=\"mb-2\">\r\n    {{ i18n.translate(\"validFieldError\") }}{{ label }}\r\n  </mat-error> -->\r\n  \r\n  } @if(showHint){\r\n  <mat-hint class=\"d-flex align-items-center gap-1 mt-1\">\r\n    <span\r\n      class=\"sfi sfi-info fs-17 fc-dark-gray\"\r\n      [ngClass]=\"{ 'fc-oasis-light-imp': value }\"\r\n    ></span>\r\n    <span class=\"fs-12 fc-black line-height-1\">{{ hint }}</span>\r\n  </mat-hint>\r\n  }\r\n</mat-form-field>\r\n<app-validation-errors [errors]=\"control.errors\"></app-validation-errors>\r\n\r\n\r\n\r\n\r\n<!-- <span class=\"fc-coral\" style=\"color: #f44336\">\r\n  {{ control.errors }}\r\n</span> -->\r\n\r\n} @if(isReadOnly && (showIfEmpty || control)){\r\n<ng-container class=\"info-section\">\r\n  <app-info-item\r\n    class=\"info-item w-100\"\r\n    [label]=\"label\"\r\n    [insideTable]=\"insideTable\"\r\n    [hasLabel]=\"hasLabel\"\r\n    [type]=\"type\"\r\n    [value]=\"control.value\"\r\n  ></app-info-item>\r\n  @if(showHint){\r\n  <mat-hint class=\"d-flex align-items-center gap-1 mt-1\">\r\n    <span\r\n      class=\"sfi sfi-info fs-17 fc-dark-gray\"\r\n      [ngClass]=\"{ 'fc-oasis-light-imp': value }\"\r\n    ></span>\r\n    <span class=\"fs-12 fc-black line-height-1\">{{ hint }}</span>\r\n  </mat-hint>\r\n  }\r\n</ng-container>\r\n}\r\n\r\n<!-- section tooltip -->\r\n<!-- <sat-popover #popover [hasBackdrop]=\"true\" verticalAlign=\"below\">\r\n  <div class=\"deafult-tooltip\">\r\n    {{tooltip}}\r\n  </div>\r\n</sat-popover> -->\r\n\r\n<sat-popover #popover [hasBackdrop]=\"true\" verticalAlign=\"below\">\r\n  <div class=\"default-popover p-3 fs-14\">\r\n    <span class=\"fs-14 fw-bold signature-notes\" [innerHTML]=\"tooltip\"></span>\r\n  </div>\r\n</sat-popover>\r\n", styles: [":host{flex-grow:1}.input-disabled{pointer-events:none;opacity:1.5}\n"], dependencies: [{ kind: "ngmodule", type: SatPopoverModule }, { kind: "component", type: i1$3.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: i1$3.SatPopoverAnchorDirective, selector: "[satPopoverAnchor]", inputs: ["satPopoverAnchor"], exportAs: ["satPopoverAnchor"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: InfoItemComponent, selector: "app-info-item", inputs: ["label", "value", "name", "type", "dateType", "multiple", "insideTable", "hasLabel", "arrayList", "actionType", "download"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: ValidationErrorsComponent, selector: "app-validation-errors", inputs: ["errors", "customErrorMessages", "label"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: InputComponent, decorators: [{
             type: Component,
@@ -3150,16 +3177,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                         NgClass,
                         InfoItemComponent,
                         MatFormField,
-                        NgxMaskDirective,
                         MatInput,
-                        FormLabelComponent,
+                        ValidationErrorsComponent
                     ], standalone: true, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => InputComponent),
                             multi: true,
                         },
-                    ], template: "@if(!isReadOnly){\r\n<!--    <app-form-label [label]=\"label\" [optional]=\"!required\" [hideOption]=\"hideOption\" [showLabel]=\"showLabel\"></app-form-label>-->\r\n     @if(hasLabel){\r\n      <div class=\"d-flex justify-content-between mb-1\">\r\n        @if(!hasTooltip){<span class=\"form-label mb-0\">{{label}}</span>}\r\n        @if(!required && !hideOption){<span class=\"fs-11 fc-dark-gray\">{{i18n.translate('Optional')}}</span>}\r\n        @if(hasTooltip){\r\n          <span class=\"form-label mb-0\">\r\n            {{labelTextWriteMode}}\r\n            <ds-icon icon=\"info fs-22\" class=\"cursor-pointer\" [satPopoverAnchor]=\"popover\"\r\n              (click)=\"popover.toggle(); $event.stopImmediatePropagation()\"></ds-icon>\r\n         </span>\r\n        }\r\n      </div>\r\n     }\r\n    <mat-form-field class=\"primary-form {{className}}\" [ngClass]=\"{'input-disabled' : control.disabled}\"\r\n      [floatLabel]=\"floatLabel\">\r\n      @if(iconPrefixName){<span  matPrefix class=\"sfi {{iconPrefixName}}\"></span>}\r\n      @if(loading){<span class=\"sfi sfi-spinner d-inline-block spin fc-coral\" matSuffix></span>}\r\n\r\n      <label class=\"mat-form-content\">\r\n              <!-- add input for ar && en custom directive with add type = arOnly ||  type = enOnly-->\r\n               @if(type === 'arOnly'){\r\n                <input arOnly matInput [value]=\"value\"\r\n                 oninput=\"validity.valid || (value='');\" [formControl]=\"control\"\r\n                (input)=\"onValueChange($event)\" [required]=\"required\"\r\n                [placeholder]=\"placeholder\">\r\n               }\r\n        @if(type === 'enOnly'){\r\n          <input  enOnly matInput [value]=\"value\"\r\n           oninput=\"validity.valid || (value='');\" [formControl]=\"control\"\r\n          (input)=\"onValueChange($event)\" [required]=\"required\"\r\n          [placeholder]=\"placeholder\">\r\n        }\r\n              <!--  -->\r\n        @if(type !== 'enOnly' &&  type !== 'arOnly'){\r\n          <input  matInput [value]=\"value\"\r\n           oninput=\"validity.valid || (value='');\" [formControl]=\"control\" [type]=\"type\"\r\n           (input)=\"onValueChange($event)\" (change)=\"onValueChange1($event)\"\r\n          [placeholder]=\"placeholder\">\r\n\r\n        }\r\n      </label>\r\n      @if(matSuffix){<span matSuffix class=\"sfi {{iconSuffixName}}\"></span>}\r\n      @if(!control?.valid){\r\n        <mat-error class=\"mb-2\">\r\n          {{i18n.translate('validFieldError')}}{{label}}\r\n        </mat-error>\r\n      }\r\n    @if(showHint){\r\n      <mat-hint class=\"d-flex align-items-center gap-1 mt-1\">\r\n        <span class=\"sfi sfi-info fs-17 fc-dark-gray\" [ngClass]=\"{'fc-oasis-light-imp':value}\"></span>\r\n        <span class=\"fs-12 fc-black line-height-1\">{{hint}}</span>\r\n      </mat-hint>\r\n    }\r\n    </mat-form-field>\r\n\r\n      <span class=\"fc-coral\" style=\"color:#f44336\">\r\n        {{control.errors}}\r\n      </span>\r\n\r\n}\r\n\r\n@if(isReadOnly && (showIfEmpty || control)){\r\n  <ng-container  class=\"info-section\">\r\n    <app-info-item class=\"info-item w-100\" [label]=\"label\" [insideTable]=\"insideTable\"\r\n      [hasLabel]=\"hasLabel\" [type]=\"type\" [value]=\"control.value\"></app-info-item>\r\n      @if(showHint){\r\n        <mat-hint class=\"d-flex align-items-center gap-1 mt-1\">\r\n          <span class=\"sfi sfi-info fs-17 fc-dark-gray\" [ngClass]=\"{'fc-oasis-light-imp':value}\"></span>\r\n          <span class=\"fs-12 fc-black line-height-1\">{{hint}}</span>\r\n        </mat-hint>\r\n      }\r\n\r\n  </ng-container>\r\n}\r\n\r\n<!-- section tooltip -->\r\n<!-- <sat-popover #popover [hasBackdrop]=\"true\" verticalAlign=\"below\">\r\n  <div class=\"deafult-tooltip\">\r\n    {{tooltip}}\r\n  </div>\r\n</sat-popover> -->\r\n\r\n<sat-popover #popover [hasBackdrop]=\"true\"  verticalAlign=\"below\">\r\n  <div class=\"default-popover p-3 fs-14\">\r\n   <span class=\"fs-14 fw-bold signature-notes\" [innerHTML]='tooltip'></span>\r\n  </div>\r\n</sat-popover>\r\n", styles: [":host{flex-grow:1}.input-disabled{pointer-events:none;opacity:1.5}\n"] }]
+                    ], template: "@if(!isReadOnly){\r\n<app-form-label\r\n  [label]=\"label\"\r\n  [optional]=\"!required\"\r\n  [hideOption]=\"hideOption\"\r\n  [showLabel]=\"showLabel\"\r\n></app-form-label>\r\n@if(hasLabel){\r\n<div class=\"d-flex justify-content-between mb-1\">\r\n  @if(!hasTooltip){<span class=\"form-label mb-0\">{{ label }}</span\r\n  >} @if(!required && !hideOption){<span class=\"fs-11 fc-dark-gray\">{{\r\n    i18n.translate(\"Optional\")\r\n  }}</span\r\n  >} @if(hasTooltip){\r\n  <span class=\"form-label mb-0\">\r\n    {{ labelTextWriteMode }}\r\n    <ds-icon\r\n      icon=\"info fs-22\"\r\n      class=\"cursor-pointer\"\r\n      [satPopoverAnchor]=\"popover\"\r\n      (click)=\"popover.toggle(); $event.stopImmediatePropagation()\"\r\n    ></ds-icon>\r\n  </span>\r\n  }\r\n</div>\r\n}\r\n<mat-form-field\r\n  class=\"primary-form {{ className }}\"\r\n  [ngClass]=\"{ 'input-disabled': control.disabled }\"\r\n  [floatLabel]=\"floatLabel\"\r\n>\r\n  @if(iconPrefixName){<span class=\"sfi {{ iconPrefixName }}\"></span>}\r\n  @if(loading){<span\r\n    class=\"sfi sfi-spinner d-inline-block spin fc-coral\"\r\n    matSuffix\r\n  ></span\r\n  >}\r\n\r\n  <label class=\"mat-form-content\">\r\n    <!-- add input for ar && en custom directive with add type = arOnly ||  type = enOnly-->\r\n    @if(type === 'arOnly'){\r\n    <input\r\n      arOnly\r\n      matInput\r\n      [value]=\"value\"\r\n      oninput=\"validity.valid || (value='');\"\r\n      [formControl]=\"control\"\r\n      [required]=\"required\"\r\n      [placeholder]=\"placeholder\"\r\n    />\r\n    } @else if(type === 'enOnly'){\r\n    <input\r\n      enOnly\r\n      matInput\r\n      [value]=\"value\"\r\n      oninput=\"validity.valid || (value='');\"\r\n      [formControl]=\"control\"\r\n      [required]=\"required\"\r\n      [placeholder]=\"placeholder\"\r\n    />\r\n    }\r\n    <!--  -->\r\n    @else{\r\n    <input\r\n      matInput\r\n      [value]=\"value\"\r\n      oninput=\"validity.valid || (value='');\"\r\n      [formControl]=\"control\"\r\n      [type]=\"type\"\r\n      [placeholder]=\"placeholder\"\r\n    />\r\n    }\r\n  </label>\r\n  \r\n  @if(matSuffix){<span matSuffix class=\"sfi {{ iconSuffixName }}\"></span>}\r\n  @if(!control?.valid){\r\n  <!-- <mat-error class=\"mb-2\">\r\n    {{ i18n.translate(\"validFieldError\") }}{{ label }}\r\n  </mat-error> -->\r\n  \r\n  } @if(showHint){\r\n  <mat-hint class=\"d-flex align-items-center gap-1 mt-1\">\r\n    <span\r\n      class=\"sfi sfi-info fs-17 fc-dark-gray\"\r\n      [ngClass]=\"{ 'fc-oasis-light-imp': value }\"\r\n    ></span>\r\n    <span class=\"fs-12 fc-black line-height-1\">{{ hint }}</span>\r\n  </mat-hint>\r\n  }\r\n</mat-form-field>\r\n<app-validation-errors [errors]=\"control.errors\"></app-validation-errors>\r\n\r\n\r\n\r\n\r\n<!-- <span class=\"fc-coral\" style=\"color: #f44336\">\r\n  {{ control.errors }}\r\n</span> -->\r\n\r\n} @if(isReadOnly && (showIfEmpty || control)){\r\n<ng-container class=\"info-section\">\r\n  <app-info-item\r\n    class=\"info-item w-100\"\r\n    [label]=\"label\"\r\n    [insideTable]=\"insideTable\"\r\n    [hasLabel]=\"hasLabel\"\r\n    [type]=\"type\"\r\n    [value]=\"control.value\"\r\n  ></app-info-item>\r\n  @if(showHint){\r\n  <mat-hint class=\"d-flex align-items-center gap-1 mt-1\">\r\n    <span\r\n      class=\"sfi sfi-info fs-17 fc-dark-gray\"\r\n      [ngClass]=\"{ 'fc-oasis-light-imp': value }\"\r\n    ></span>\r\n    <span class=\"fs-12 fc-black line-height-1\">{{ hint }}</span>\r\n  </mat-hint>\r\n  }\r\n</ng-container>\r\n}\r\n\r\n<!-- section tooltip -->\r\n<!-- <sat-popover #popover [hasBackdrop]=\"true\" verticalAlign=\"below\">\r\n  <div class=\"deafult-tooltip\">\r\n    {{tooltip}}\r\n  </div>\r\n</sat-popover> -->\r\n\r\n<sat-popover #popover [hasBackdrop]=\"true\" verticalAlign=\"below\">\r\n  <div class=\"default-popover p-3 fs-14\">\r\n    <span class=\"fs-14 fw-bold signature-notes\" [innerHTML]=\"tooltip\"></span>\r\n  </div>\r\n</sat-popover>\r\n", styles: [":host{flex-grow:1}.input-disabled{pointer-events:none;opacity:1.5}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], hasTooltip: [{
@@ -3172,8 +3198,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                 type: Input
             }], showLabel: [{
                 type: Input
-            }], matPrefix: [{
-                type: Input
             }], iconPrefixName: [{
                 type: Input
             }], matSuffix: [{
@@ -3273,7 +3297,7 @@ class InputNumberComponent extends BaseComponent {
         this.emitedChangedValue.emit(this.field.trim());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: InputNumberComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: InputNumberComponent, isStandalone: true, selector: "app-input-number", inputs: { label: "label", displayValue: "displayValue", hasError: "hasError", error: "error", tooltip: "tooltip", floatLabel: "floatLabel", className: "className", showLabel: "showLabel", matPrefix: "matPrefix", iconPrefixName: "iconPrefixName", matSuffix: "matSuffix", iconSuffixName: "iconSuffixName", numberSuffixName: "numberSuffixName", optional: "optional", showArrows: "showArrows", decimals: "decimals", allowedPattern: "allowedPattern" }, outputs: { emitedChangedValue: "emitedChangedValue" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"!isReadOnly\">\r\n  <div class=\"d-flex justify-content-between mb-1\" *ngIf=\"hasLabel\">\r\n    <span class=\"form-label mb-0\">{{label}}</span>\r\n    <span *ngIf=\"!required && !  hideOption\" class=\"fs-11 fc-dark-gray\">{{i18n.translate('Optional')}}\r\n    </span>\r\n  </div>\r\n  <mat-form-field class=\"primary-form {{className}}\" [ngClass]=\"{'input-disabled' : disabled }\"\r\n    [floatLabel]=\"floatLabel\">\r\n\r\n    <span *ngIf=\"iconPrefixName\" matPrefix class=\"sfi {{iconPrefixName}}\"></span>\r\n    <label class=\"mat-form-content\">\r\n      <!-- pattern=\"\\d*\" -->\r\n      <ng-container *ngIf=\"!allowedPattern\">\r\n        <input matInput [placeholder]=\"placeholder\" [value]=\"value\" [disabled]=\"disabled\" numberOnly\r\n          oninput=\"validity.valid || (value='');\" [formControl]=\"controller\" (input)=\"onValueChange($event)\"\r\n          (change)=\"onValueChangeEvent($event)\"\r\n          [required]=\"required\" [placeholder]=\"placeholder\"  [mask]=\"mask\" >\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"allowedPattern\">\r\n        <input matInput [placeholder]=\"placeholder\" [value]=\"value\" [disabled]=\"disabled\" numberOnly\r\n               oninput=\"validity.valid || (value='');\" [formControl]=\"controller\" (input)=\"onValueChange($event)\"\r\n          (change)=\"onValueChangeEvent($event)\"\r\n          [required]=\"required\" [placeholder]=\"placeholder\"  [mask]=\"mask\" >\r\n      </ng-container>\r\n    </label>\r\n    <span *ngIf=\"matSuffix\" matSuffix class=\"sfi {{iconSuffixName}}\"></span>\r\n    <div *ngIf=\"type === 'number'\" matSuffix class=\"d-flex align-items-center gap-2\">\r\n      <span class=\"fs-14 fw-medium\" *ngIf=\"numberSuffixName\">{{numberSuffixName}}</span>\r\n    </div>\r\n    <mat-error class=\"mb-2\" *ngIf=\"(!controller?.valid)\">\r\n      {{i18n.translate('validFieldError')}}{{label}}\r\n    </mat-error>\r\n\r\n    <mat-hint *ngIf=\"showHint\">\r\n      <span class=\"sfi sfi-check-circle font-10 fc-dark-gray\" [ngClass]=\"{'fc-oasis-light-imp':value}\"></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\r\n  </mat-form-field>\r\n  <span class=\"fc-coral\" style=\"color: rgb(207 37 67);font-size: 10px;\" *ngIf=\"( showErrorMessage )\">\r\n    {{errorMessage}}\r\n  </span>\r\n\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"isReadOnly && field\" class=\"info-section\">\r\n  <app-info-item class=\"info-item w-100\" [label]=\"label\" [insideTable]=\"insideTable\" [hasLabel]=\"hasLabel\"\r\n    [value]=\"field\"></app-info-item>\r\n</ng-container>\r\n\r\n\r\n<!-- section tooltip -->\r\n<sat-popover #popover [hasBackdrop]=\"true\" verticalAlign=\"below\">\r\n  <div class=\"deafult-tooltip\">\r\n    {{tooltip}}\r\n  </div>\r\n</sat-popover>\r\n", styles: [":host{flex-grow:1}.input-disabled{pointer-events:none;opacity:1.5}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.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: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "component", type: InfoItemComponent, selector: "app-info-item", inputs: ["label", "value", "name", "type", "dateType", "multiple", "insideTable", "hasLabel", "arrayList", "actionType", "download"] }, { kind: "ngmodule", type: SatPopoverModule }, { kind: "component", type: i1$3.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: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: InputNumberComponent, isStandalone: true, selector: "app-input-number", inputs: { label: "label", displayValue: "displayValue", hasError: "hasError", error: "error", tooltip: "tooltip", floatLabel: "floatLabel", className: "className", showLabel: "showLabel", matPrefix: "matPrefix", iconPrefixName: "iconPrefixName", matSuffix: "matSuffix", iconSuffixName: "iconSuffixName", numberSuffixName: "numberSuffixName", optional: "optional", showArrows: "showArrows", decimals: "decimals", allowedPattern: "allowedPattern" }, outputs: { emitedChangedValue: "emitedChangedValue" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"!isReadOnly\">\r\n  <div class=\"d-flex justify-content-between mb-1\" *ngIf=\"hasLabel\">\r\n    <span class=\"form-label mb-0\">{{label}}</span>\r\n    <span *ngIf=\"!required && !  hideOption\" class=\"fs-11 fc-dark-gray\">{{i18n.translate('Optional')}}\r\n    </span>\r\n  </div>\r\n  <mat-form-field class=\"primary-form {{className}}\" [ngClass]=\"{'input-disabled' : disabled }\"\r\n    [floatLabel]=\"floatLabel\">\r\n\r\n    <span *ngIf=\"iconPrefixName\" matPrefix class=\"sfi {{iconPrefixName}}\"></span>\r\n    <label class=\"mat-form-content\">\r\n      <!-- pattern=\"\\d*\" -->\r\n      <ng-container *ngIf=\"!allowedPattern\">\r\n        <input matInput [placeholder]=\"placeholder\" [value]=\"value\" [disabled]=\"disabled\" numberOnly\r\n          oninput=\"validity.valid || (value='');\" [formControl]=\"controller\" (input)=\"onValueChange($event)\"\r\n          (change)=\"onValueChangeEvent($event)\"\r\n          [required]=\"required\" [placeholder]=\"placeholder\"  [mask]=\"mask\" >\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"allowedPattern\">\r\n        <input matInput [placeholder]=\"placeholder\" [value]=\"value\" [disabled]=\"disabled\" numberOnly\r\n               oninput=\"validity.valid || (value='');\" [formControl]=\"controller\" (input)=\"onValueChange($event)\"\r\n          (change)=\"onValueChangeEvent($event)\"\r\n          [required]=\"required\" [placeholder]=\"placeholder\"  [mask]=\"mask\" >\r\n      </ng-container>\r\n    </label>\r\n    <span *ngIf=\"matSuffix\" matSuffix class=\"sfi {{iconSuffixName}}\"></span>\r\n    <div *ngIf=\"type === 'number'\" matSuffix class=\"d-flex align-items-center gap-2\">\r\n      <span class=\"fs-14 fw-medium\" *ngIf=\"numberSuffixName\">{{numberSuffixName}}</span>\r\n    </div>\r\n    <mat-error class=\"mb-2\" *ngIf=\"(!controller?.valid)\">\r\n      {{i18n.translate('validFieldError')}}{{label}}\r\n    </mat-error>\r\n\r\n    <mat-hint *ngIf=\"showHint\">\r\n      <span class=\"sfi sfi-check-circle font-10 fc-dark-gray\" [ngClass]=\"{'fc-oasis-light-imp':value}\"></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\r\n  </mat-form-field>\r\n  <span class=\"fc-coral\" style=\"color: rgb(207 37 67);font-size: 10px;\" *ngIf=\"( showErrorMessage )\">\r\n    {{errorMessage}}\r\n  </span>\r\n\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"isReadOnly && field\" class=\"info-section\">\r\n  <app-info-item class=\"info-item w-100\" [label]=\"label\" [insideTable]=\"insideTable\" [hasLabel]=\"hasLabel\"\r\n    [value]=\"field\"></app-info-item>\r\n</ng-container>\r\n\r\n\r\n<!-- section tooltip -->\r\n<sat-popover #popover [hasBackdrop]=\"true\" verticalAlign=\"below\">\r\n  <div class=\"deafult-tooltip\">\r\n    {{tooltip}}\r\n  </div>\r\n</sat-popover>\r\n", styles: [":host{flex-grow:1}.input-disabled{pointer-events:none;opacity:1.5}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "component", type: InfoItemComponent, selector: "app-info-item", inputs: ["label", "value", "name", "type", "dateType", "multiple", "insideTable", "hasLabel", "arrayList", "actionType", "download"] }, { kind: "ngmodule", type: SatPopoverModule }, { kind: "component", type: i1$3.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: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: InputNumberComponent, decorators: [{
             type: Component,
@@ -3383,7 +3407,7 @@ class InputEmailComponent extends BaseComponent {
         this.emitedValue.emit(this.field.trim());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: InputEmailComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: InputEmailComponent, isStandalone: true, selector: "app-input-email", inputs: { label: "label", displayValue: "displayValue", hasError: "hasError", error: "error", tooltip: "tooltip", floatLabel: "floatLabel", className: "className", showLabel: "showLabel", matPrefix: "matPrefix", iconPrefixName: "iconPrefixName", matSuffix: "matSuffix", iconSuffixName: "iconSuffixName", numberSuffixName: "numberSuffixName", optional: "optional", showArrows: "showArrows", decimals: "decimals" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"!isReadOnly\">\r\n  <!-- <app-form-label [label]=\"label\" [optional]=\"!required\" [hideOption]=\"hideOption\" [showLabel]=\"showLabel\"></app-form-label> -->\r\n  <div class=\"d-flex justify-content-between mb-1\" *ngIf=\"hasLabel\">\r\n    <span class=\"form-label mb-0\">{{label}}</span>\r\n    <span *ngIf=\"!required && !  hideOption\" class=\"fs-11 fc-dark-gray\">{{i18n.translate('Optional')}}\r\n    </span>\r\n  </div>\r\n  <mat-form-field class=\"primary-form {{className}}\" [ngClass]=\"{'input-disabled' : disabled }\"\r\n    [floatLabel]=\"floatLabel\" [disabled]=\"disabled\">\r\n\r\n    <span *ngIf=\"iconPrefixName\" matPrefix class=\"sfi {{iconPrefixName}}\"></span>\r\n    <label class=\"mat-form-content\">\r\n      <input matInput [placeholder]=\"placeholder\" [value]=\"value\" [disabled]=\"disabled\" \r\n        oninput=\"validity.valid || (value='');\" [formControl]=\"controller\" (input)=\"onValueChange($event)\"\r\n        [required]=\"required\" [placeholder]=\"placeholder\">\r\n    </label>\r\n\r\n    <span *ngIf=\"matSuffix\" matSuffix class=\"sfi {{iconSuffixName}}\"></span>\r\n    <div *ngIf=\"type === 'number'\" matSuffix class=\"d-flex align-items-center gap-2\">\r\n      <span class=\"fs-14 fw-medium\" *ngIf=\"numberSuffixName\">{{numberSuffixName}}</span>\r\n    </div>\r\n\r\n\r\n    <mat-error *ngIf=\"(!controller?.valid)\">\r\n      {{i18n.translate('validEmailError')}}\r\n    </mat-error>\r\n    <mat-hint *ngIf=\"showHint\">\r\n      <span class=\"sfi sfi-check-circle font-10 fc-dark-gray\" [ngClass]=\"{'fc-oasis-light-imp':value}\"></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\r\n  </mat-form-field>\r\n  <span class=\"fc-coral\" style=\"color:#f44336\" *ngIf=\"( showErrorMessage && controller.value)\">\r\n    {{errorMessage}}\r\n  </span>\r\n\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"isReadOnly && field\" class=\"info-section\">\r\n  <app-info-item class=\"info-item w-100\" [label]=\"label\" [insideTable]=\"insideTable\" [hasLabel]=\"hasLabel\"\r\n    [value]=\"field\"></app-info-item>\r\n</ng-container>\r\n\r\n\r\n<!-- section tooltip -->\r\n<sat-popover #popover [hasBackdrop]=\"true\" verticalAlign=\"below\">\r\n  <div class=\"deafult-tooltip\">\r\n    {{tooltip}}\r\n  </div>\r\n</sat-popover>\r\n", styles: [":host{flex-grow:1}.input-disabled{pointer-events:none;opacity:1.5}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: InfoItemComponent, selector: "app-info-item", inputs: ["label", "value", "name", "type", "dateType", "multiple", "insideTable", "hasLabel", "arrayList", "actionType", "download"] }, { kind: "ngmodule", type: SatPopoverModule }, { kind: "component", type: i1$3.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: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.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: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: InputEmailComponent, isStandalone: true, selector: "app-input-email", inputs: { label: "label", displayValue: "displayValue", hasError: "hasError", error: "error", tooltip: "tooltip", floatLabel: "floatLabel", className: "className", showLabel: "showLabel", matPrefix: "matPrefix", iconPrefixName: "iconPrefixName", matSuffix: "matSuffix", iconSuffixName: "iconSuffixName", numberSuffixName: "numberSuffixName", optional: "optional", showArrows: "showArrows", decimals: "decimals" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"!isReadOnly\">\r\n  <!-- <app-form-label [label]=\"label\" [optional]=\"!required\" [hideOption]=\"hideOption\" [showLabel]=\"showLabel\"></app-form-label> -->\r\n  <div class=\"d-flex justify-content-between mb-1\" *ngIf=\"hasLabel\">\r\n    <span class=\"form-label mb-0\">{{label}}</span>\r\n    <span *ngIf=\"!required && !  hideOption\" class=\"fs-11 fc-dark-gray\">{{i18n.translate('Optional')}}\r\n    </span>\r\n  </div>\r\n  <mat-form-field class=\"primary-form {{className}}\" [ngClass]=\"{'input-disabled' : disabled }\"\r\n    [floatLabel]=\"floatLabel\" [disabled]=\"disabled\">\r\n\r\n    <span *ngIf=\"iconPrefixName\" matPrefix class=\"sfi {{iconPrefixName}}\"></span>\r\n    <label class=\"mat-form-content\">\r\n      <input matInput [placeholder]=\"placeholder\" [value]=\"value\" [disabled]=\"disabled\" \r\n        oninput=\"validity.valid || (value='');\" [formControl]=\"controller\" (input)=\"onValueChange($event)\"\r\n        [required]=\"required\" [placeholder]=\"placeholder\">\r\n    </label>\r\n\r\n    <span *ngIf=\"matSuffix\" matSuffix class=\"sfi {{iconSuffixName}}\"></span>\r\n    <div *ngIf=\"type === 'number'\" matSuffix class=\"d-flex align-items-center gap-2\">\r\n      <span class=\"fs-14 fw-medium\" *ngIf=\"numberSuffixName\">{{numberSuffixName}}</span>\r\n    </div>\r\n\r\n\r\n    <mat-error *ngIf=\"(!controller?.valid)\">\r\n      {{i18n.translate('validEmailError')}}\r\n    </mat-error>\r\n    <mat-hint *ngIf=\"showHint\">\r\n      <span class=\"sfi sfi-check-circle font-10 fc-dark-gray\" [ngClass]=\"{'fc-oasis-light-imp':value}\"></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\r\n  </mat-form-field>\r\n  <span class=\"fc-coral\" style=\"color:#f44336\" *ngIf=\"( showErrorMessage && controller.value)\">\r\n    {{errorMessage}}\r\n  </span>\r\n\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"isReadOnly && field\" class=\"info-section\">\r\n  <app-info-item class=\"info-item w-100\" [label]=\"label\" [insideTable]=\"insideTable\" [hasLabel]=\"hasLabel\"\r\n    [value]=\"field\"></app-info-item>\r\n</ng-container>\r\n\r\n\r\n<!-- section tooltip -->\r\n<sat-popover #popover [hasBackdrop]=\"true\" verticalAlign=\"below\">\r\n  <div class=\"deafult-tooltip\">\r\n    {{tooltip}}\r\n  </div>\r\n</sat-popover>\r\n", styles: [":host{flex-grow:1}.input-disabled{pointer-events:none;opacity:1.5}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: InfoItemComponent, selector: "app-info-item", inputs: ["label", "value", "name", "type", "dateType", "multiple", "insideTable", "hasLabel", "arrayList", "actionType", "download"] }, { kind: "ngmodule", type: SatPopoverModule }, { kind: "component", type: i1$3.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: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: InputEmailComponent, decorators: [{
             type: Component,
@@ -3489,7 +3513,7 @@ class InputMaskComponent extends BaseComponent {
         this.emitedValue.emit(this.field.trim());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: InputMaskComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: InputMaskComponent, isStandalone: true, selector: "app-input-mask", inputs: { label: "label", displayValue: "displayValue", hasError: "hasError", error: "error", tooltip: "tooltip", floatLabel: "floatLabel", className: "className", showLabel: "showLabel", matPrefix: "matPrefix", iconPrefixName: "iconPrefixName", matSuffix: "matSuffix", iconSuffixName: "iconSuffixName", numberSuffixName: "numberSuffixName", optional: "optional", showArrows: "showArrows", decimals: "decimals" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"!isReadOnly\">\r\n  <!-- <app-form-label [label]=\"label\" [optional]=\"!required\" [hideOption]=\"hideOption\" [showLabel]=\"showLabel\"></app-form-label> -->\r\n  <div class=\"d-flex justify-content-between mb-1\" *ngIf=\"hasLabel\">\r\n    <span class=\"form-label mb-0\">{{label}}</span>\r\n    <span *ngIf=\"!required && !  hideOption\" class=\"fs-11 fc-dark-gray\">{{i18n.translate('Optional')}}\r\n    </span>\r\n  </div>\r\n  <mat-form-field class=\"primary-form {{className}}\" [ngClass]=\"{'input-disabled' : disabled }\"\r\n    [floatLabel]=\"floatLabel\">\r\n\r\n    <span *ngIf=\"iconPrefixName\" matPrefix class=\"sfi {{iconPrefixName}}\"></span>\r\n    <label class=\"mat-form-content\">\r\n      <input matInput [placeholder]=\"placeholder\" [value]=\"value\" [attr.disabled]=\"disabled\" [mask]=\"mask\"\r\n        [showMaskTyped]=\"false\" oninput=\"validity.valid || (value='');\" [formControl]=\"controller\"\r\n        (input)=\"onValueChange($event)\" [required]=\"required\" [placeholder]=\"placeholder\">\r\n    </label>\r\n\r\n    <span *ngIf=\"matSuffix\" matSuffix class=\"sfi {{iconSuffixName}}\"></span>\r\n    <div *ngIf=\"type === 'number'\" matSuffix class=\"d-flex align-items-center gap-2\">\r\n      <span class=\"fs-14 fw-medium\" *ngIf=\"numberSuffixName\">{{numberSuffixName}}</span>\r\n      <!-- <span class=\"sfi sfi-minus p-2 bc-light-gray fc-black\"></span>\r\n      <span class=\"sfi sfi-plus p-2 bc-light-gray fc-black\"></span> -->\r\n    </div>\r\n    <mat-error class=\"mb-2\" *ngIf=\"(type !=='email' && !controller?.valid)\">\r\n      {{i18n.translate('validFieldError')}}{{label}}\r\n    </mat-error>\r\n\r\n    <mat-error *ngIf=\"(type ==='email' && !controller?.valid)\">\r\n      {{i18n.translate('validEmailError')}}\r\n    </mat-error>\r\n    <mat-hint *ngIf=\"showHint\">\r\n      <span class=\"sfi sfi-check-circle font-10 fc-dark-gray\" [ngClass]=\"{'fc-oasis-light-imp':value}\"></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\r\n  </mat-form-field>\r\n  <span class=\"fc-coral\" style=\"color:#f44336\" *ngIf=\"( showErrorMessage && controller.value)\">\r\n    {{errorMessage}}\r\n  </span>\r\n\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"isReadOnly && field\" class=\"info-section\">\r\n  <app-info-item class=\"info-item w-100\" [label]=\"label\" [insideTable]=\"insideTable\" [hasLabel]=\"hasLabel\"\r\n    [value]=\"field\"></app-info-item>\r\n</ng-container>\r\n\r\n\r\n<!-- section tooltip -->\r\n<sat-popover #popover [hasBackdrop]=\"true\" verticalAlign=\"below\">\r\n  <div class=\"deafult-tooltip\">\r\n    {{tooltip}}\r\n  </div>\r\n</sat-popover>\r\n", styles: [":host{flex-grow:1}\n"], dependencies: [{ kind: "ngmodule", type: SatPopoverModule }, { kind: "component", type: i1$3.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: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: InfoItemComponent, selector: "app-info-item", inputs: ["label", "value", "name", "type", "dateType", "multiple", "insideTable", "hasLabel", "arrayList", "actionType", "download"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.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: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: InputMaskComponent, isStandalone: true, selector: "app-input-mask", inputs: { label: "label", displayValue: "displayValue", hasError: "hasError", error: "error", tooltip: "tooltip", floatLabel: "floatLabel", className: "className", showLabel: "showLabel", matPrefix: "matPrefix", iconPrefixName: "iconPrefixName", matSuffix: "matSuffix", iconSuffixName: "iconSuffixName", numberSuffixName: "numberSuffixName", optional: "optional", showArrows: "showArrows", decimals: "decimals" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"!isReadOnly\">\r\n  <!-- <app-form-label [label]=\"label\" [optional]=\"!required\" [hideOption]=\"hideOption\" [showLabel]=\"showLabel\"></app-form-label> -->\r\n  <div class=\"d-flex justify-content-between mb-1\" *ngIf=\"hasLabel\">\r\n    <span class=\"form-label mb-0\">{{label}}</span>\r\n    <span *ngIf=\"!required && !  hideOption\" class=\"fs-11 fc-dark-gray\">{{i18n.translate('Optional')}}\r\n    </span>\r\n  </div>\r\n  <mat-form-field class=\"primary-form {{className}}\" [ngClass]=\"{'input-disabled' : disabled }\"\r\n    [floatLabel]=\"floatLabel\">\r\n\r\n    <span *ngIf=\"iconPrefixName\" matPrefix class=\"sfi {{iconPrefixName}}\"></span>\r\n    <label class=\"mat-form-content\">\r\n      <input matInput [placeholder]=\"placeholder\" [value]=\"value\" [attr.disabled]=\"disabled\" [mask]=\"mask\"\r\n        [showMaskTyped]=\"false\" oninput=\"validity.valid || (value='');\" [formControl]=\"controller\"\r\n        (input)=\"onValueChange($event)\" [required]=\"required\" [placeholder]=\"placeholder\">\r\n    </label>\r\n\r\n    <span *ngIf=\"matSuffix\" matSuffix class=\"sfi {{iconSuffixName}}\"></span>\r\n    <div *ngIf=\"type === 'number'\" matSuffix class=\"d-flex align-items-center gap-2\">\r\n      <span class=\"fs-14 fw-medium\" *ngIf=\"numberSuffixName\">{{numberSuffixName}}</span>\r\n      <!-- <span class=\"sfi sfi-minus p-2 bc-light-gray fc-black\"></span>\r\n      <span class=\"sfi sfi-plus p-2 bc-light-gray fc-black\"></span> -->\r\n    </div>\r\n    <mat-error class=\"mb-2\" *ngIf=\"(type !=='email' && !controller?.valid)\">\r\n      {{i18n.translate('validFieldError')}}{{label}}\r\n    </mat-error>\r\n\r\n    <mat-error *ngIf=\"(type ==='email' && !controller?.valid)\">\r\n      {{i18n.translate('validEmailError')}}\r\n    </mat-error>\r\n    <mat-hint *ngIf=\"showHint\">\r\n      <span class=\"sfi sfi-check-circle font-10 fc-dark-gray\" [ngClass]=\"{'fc-oasis-light-imp':value}\"></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\r\n  </mat-form-field>\r\n  <span class=\"fc-coral\" style=\"color:#f44336\" *ngIf=\"( showErrorMessage && controller.value)\">\r\n    {{errorMessage}}\r\n  </span>\r\n\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"isReadOnly && field\" class=\"info-section\">\r\n  <app-info-item class=\"info-item w-100\" [label]=\"label\" [insideTable]=\"insideTable\" [hasLabel]=\"hasLabel\"\r\n    [value]=\"field\"></app-info-item>\r\n</ng-container>\r\n\r\n\r\n<!-- section tooltip -->\r\n<sat-popover #popover [hasBackdrop]=\"true\" verticalAlign=\"below\">\r\n  <div class=\"deafult-tooltip\">\r\n    {{tooltip}}\r\n  </div>\r\n</sat-popover>\r\n", styles: [":host{flex-grow:1}\n"], dependencies: [{ kind: "ngmodule", type: SatPopoverModule }, { kind: "component", type: i1$3.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: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: InfoItemComponent, selector: "app-info-item", inputs: ["label", "value", "name", "type", "dateType", "multiple", "insideTable", "hasLabel", "arrayList", "actionType", "download"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: InputMaskComponent, decorators: [{
             type: Component,
@@ -3623,7 +3647,7 @@ class InputCurrencyComponent extends BaseComponent {
         this.emitedValue.emit(this.field.trim());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: InputCurrencyComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: InputCurrencyComponent, isStandalone: true, selector: "app-input-currency", inputs: { label: "label", displayValue: "displayValue", hasError: "hasError", error: "error", tooltip: "tooltip", floatLabel: "floatLabel", className: "className", showLabel: "showLabel", showPlus: "showPlus", showMinus: "showMinus", matPrefix: "matPrefix", iconPrefixName: "iconPrefixName", matSuffix: "matSuffix", iconSuffixName: "iconSuffixName", numberSuffixName: "numberSuffixName", optional: "optional", showArrows: "showArrows", decimals: "decimals" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"!isReadOnly\">\r\n  <!-- <app-form-label [label]=\"label\" [optional]=\"!required\" [hideOption]=\"hideOption\" [showLabel]=\"showLabel\"></app-form-label> -->\r\n  <div class=\"d-flex justify-content-between mb-1\" *ngIf=\"hasLabel\">\r\n    <span class=\"form-label mb-0\">{{label}}</span>\r\n    <span *ngIf=\"!required && !  hideOption\" class=\"fs-11 fc-dark-gray\">{{i18n.translate('Optional')}}\r\n    </span>\r\n  </div>\r\n  <mat-form-field class=\"primary-form {{className}}\" [ngClass]=\"{'input-disabled' : disabled }\"\r\n    [floatLabel]=\"floatLabel\">\r\n\r\n    <span *ngIf=\"iconPrefixName\" matPrefix class=\"sfi {{iconPrefixName}}\"></span>\r\n    <label class=\"mat-form-content\">\r\n\r\n      <input matInput [placeholder]=\"placeholder\" [value]=\"value\" [disabled]=\"disabled\"\r\n        oninput=\"validity.valid || (value='');\" [formControl]=\"controller\" (input)=\"onValueChange($event)\"\r\n        (paste)=\"false\"\r\n        [required]=\"required\" [placeholder]=\"placeholder\" appMycurrency>\r\n    </label>\r\n\r\n    <span *ngIf=\"matSuffix\" matSuffix class=\"sfi {{iconSuffixName}}\"></span>\r\n    <div *ngIf=\"type === 'number'\" matSuffix class=\"d-flex align-items-center gap-2 position-relative\"\r\n      (click)=\"$event.stopPropagation()\">\r\n      <span class=\"fs-14 fw-medium\" *ngIf=\"numberSuffixName\">{{numberSuffixName}}</span>\r\n      <span class=\"sfi sfi-minus p-2 bc-light-gray fc-black cursor-pointer\" *ngIf=\"showMinus\" (click)=\"minus()\"></span>\r\n      <span class=\"sfi sfi-plus p-2 bc-light-gray fc-black cursor-pointer\" *ngIf=\"showPlus\" (click)=\"plus()\"></span>\r\n    </div>\r\n    <mat-error class=\"mb-2\" *ngIf=\"(type !=='email' && !controller?.valid)\">\r\n      {{i18n.translate('validFieldError')}}{{label}}\r\n    </mat-error>\r\n\r\n    <mat-error *ngIf=\"(type ==='email' && !controller?.valid)\">\r\n      {{i18n.translate('validEmailError')}}\r\n    </mat-error>\r\n    <mat-hint *ngIf=\"showHint\">\r\n      <span class=\"sfi sfi-check-circle font-10 fc-dark-gray\" [ngClass]=\"{'fc-oasis-light-imp':value}\"></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\r\n  </mat-form-field>\r\n  <span class=\"fc-coral\" style=\"color:#f44336\" *ngIf=\"( showErrorMessage && controller.value)\">\r\n    {{errorMessage}}\r\n  </span>\r\n\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"isReadOnly && (showIfEmpty || field)\" class=\"info-section\">\r\n  <app-info-item class=\"info-item w-100\" [type]=\"'currency'\" [label]=\"label\" [insideTable]=\"insideTable\"\r\n    [hasLabel]=\"hasLabel\" [value]=\"field\"></app-info-item>\r\n</ng-container>\r\n\r\n\r\n<!-- section tooltip -->\r\n<sat-popover #popover [hasBackdrop]=\"true\" verticalAlign=\"below\">\r\n  <div class=\"deafult-tooltip\">\r\n    {{tooltip}}\r\n  </div>\r\n</sat-popover>\r\n", styles: [":host{flex-grow:1}.input-disabled{pointer-events:none!important;opacity:1.5}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.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: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: InfoItemComponent, selector: "app-info-item", inputs: ["label", "value", "name", "type", "dateType", "multiple", "insideTable", "hasLabel", "arrayList", "actionType", "download"] }, { kind: "ngmodule", type: SatPopoverModule }, { kind: "component", type: i1$3.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: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: InputCurrencyComponent, isStandalone: true, selector: "app-input-currency", inputs: { label: "label", displayValue: "displayValue", hasError: "hasError", error: "error", tooltip: "tooltip", floatLabel: "floatLabel", className: "className", showLabel: "showLabel", showPlus: "showPlus", showMinus: "showMinus", matPrefix: "matPrefix", iconPrefixName: "iconPrefixName", matSuffix: "matSuffix", iconSuffixName: "iconSuffixName", numberSuffixName: "numberSuffixName", optional: "optional", showArrows: "showArrows", decimals: "decimals" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"!isReadOnly\">\r\n  <!-- <app-form-label [label]=\"label\" [optional]=\"!required\" [hideOption]=\"hideOption\" [showLabel]=\"showLabel\"></app-form-label> -->\r\n  <div class=\"d-flex justify-content-between mb-1\" *ngIf=\"hasLabel\">\r\n    <span class=\"form-label mb-0\">{{label}}</span>\r\n    <span *ngIf=\"!required && !  hideOption\" class=\"fs-11 fc-dark-gray\">{{i18n.translate('Optional')}}\r\n    </span>\r\n  </div>\r\n  <mat-form-field class=\"primary-form {{className}}\" [ngClass]=\"{'input-disabled' : disabled }\"\r\n    [floatLabel]=\"floatLabel\">\r\n\r\n    <span *ngIf=\"iconPrefixName\" matPrefix class=\"sfi {{iconPrefixName}}\"></span>\r\n    <label class=\"mat-form-content\">\r\n\r\n      <input matInput [placeholder]=\"placeholder\" [value]=\"value\" [disabled]=\"disabled\"\r\n        oninput=\"validity.valid || (value='');\" [formControl]=\"controller\" (input)=\"onValueChange($event)\"\r\n        (paste)=\"false\"\r\n        [required]=\"required\" [placeholder]=\"placeholder\" appMycurrency>\r\n    </label>\r\n\r\n    <span *ngIf=\"matSuffix\" matSuffix class=\"sfi {{iconSuffixName}}\"></span>\r\n    <div *ngIf=\"type === 'number'\" matSuffix class=\"d-flex align-items-center gap-2 position-relative\"\r\n      (click)=\"$event.stopPropagation()\">\r\n      <span class=\"fs-14 fw-medium\" *ngIf=\"numberSuffixName\">{{numberSuffixName}}</span>\r\n      <span class=\"sfi sfi-minus p-2 bc-light-gray fc-black cursor-pointer\" *ngIf=\"showMinus\" (click)=\"minus()\"></span>\r\n      <span class=\"sfi sfi-plus p-2 bc-light-gray fc-black cursor-pointer\" *ngIf=\"showPlus\" (click)=\"plus()\"></span>\r\n    </div>\r\n    <mat-error class=\"mb-2\" *ngIf=\"(type !=='email' && !controller?.valid)\">\r\n      {{i18n.translate('validFieldError')}}{{label}}\r\n    </mat-error>\r\n\r\n    <mat-error *ngIf=\"(type ==='email' && !controller?.valid)\">\r\n      {{i18n.translate('validEmailError')}}\r\n    </mat-error>\r\n    <mat-hint *ngIf=\"showHint\">\r\n      <span class=\"sfi sfi-check-circle font-10 fc-dark-gray\" [ngClass]=\"{'fc-oasis-light-imp':value}\"></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\r\n  </mat-form-field>\r\n  <span class=\"fc-coral\" style=\"color:#f44336\" *ngIf=\"( showErrorMessage && controller.value)\">\r\n    {{errorMessage}}\r\n  </span>\r\n\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"isReadOnly && (showIfEmpty || field)\" class=\"info-section\">\r\n  <app-info-item class=\"info-item w-100\" [type]=\"'currency'\" [label]=\"label\" [insideTable]=\"insideTable\"\r\n    [hasLabel]=\"hasLabel\" [value]=\"field\"></app-info-item>\r\n</ng-container>\r\n\r\n\r\n<!-- section tooltip -->\r\n<sat-popover #popover [hasBackdrop]=\"true\" verticalAlign=\"below\">\r\n  <div class=\"deafult-tooltip\">\r\n    {{tooltip}}\r\n  </div>\r\n</sat-popover>\r\n", styles: [":host{flex-grow:1}.input-disabled{pointer-events:none!important;opacity:1.5}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: InfoItemComponent, selector: "app-info-item", inputs: ["label", "value", "name", "type", "dateType", "multiple", "insideTable", "hasLabel", "arrayList", "actionType", "download"] }, { kind: "ngmodule", type: SatPopoverModule }, { kind: "component", type: i1$3.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: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: InputCurrencyComponent, decorators: [{
             type: Component,
@@ -4013,7 +4037,7 @@ class SearchEmployeeComponent extends BaseComponent {
         // this.sidenavService.publish('open', FaqSidenavComponent, 'end', 'over');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SearchEmployeeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: SearchEmployeeComponent, isStandalone: true, selector: "app-search-employee", inputs: { valueName: "valueName", label: "label", tooltip: "tooltip", className: "className", showLabel: "showLabel", optional: "optional", data: "data", floatLabel: "floatLabel", error: "error", showEdit: "showEdit", arrayList: "arrayList", isUniqueUsers: "isUniqueUsers" }, outputs: { selectedEmp: "selectedEmp", onInputChange: "onInputChange", editDirectManger: "editDirectManger", deleteDirectManger: "deleteDirectManger", emitedDeletedValue: "emitedDeletedValue" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"!isReadOnly\">\r\n  <div class=\"d-flex justify-content-between mb-1\" *ngIf=\"hasLabel\">\r\n    <span class=\"form-label mb-0\">\r\n      {{labelTextWriteMode}}\r\n      <ds-icon icon=\"info\" class=\"cursor-pointer\" [satPopoverAnchor]=\"searchEmpPopover\"\r\n        ></ds-icon>\r\n        <!-- (click)=\"searchEmpPopover.toggle(); $event.stopImmediatePropagation()\" -->\r\n    </span>\r\n\r\n    <span *ngIf=\"optional && !hideOption\" class=\"fs-11 fc-dark-gray\"> {{i18n.translate('Optional')}}\r\n    </span>\r\n  </div>\r\n  <mat-form-field class=\"primary-form {{className}}\" [floatLabel]=\"floatLabel\">\r\n    <mat-label>\r\n      {{label}}\r\n    </mat-label>\r\n    <ds-icon matPrefix icon=\"search\" class=\"fc-coral fs-18\"></ds-icon>\r\n    <label class=\"mat-form-content\">\r\n      <input type=\"text\" aria-label=\"Number\" (input)=\"onLoadOptions($event)\" matInput [disabled]=\"disabled\"\r\n        [formControl]=\"controller\" [matAutocomplete]=\"auto\">\r\n   \r\n    </label>\r\n    <mat-error class=\"mb-2\" *ngIf=\"showErrorMessage\">{{errorMessage}}\r\n    </mat-error>\r\n    <span class=\"sfi sfi-spinner d-inline-block spin fc-coral\" matSuffix *ngIf=\"loading\"></span>\r\n    <mat-autocomplete #auto=\"matAutocomplete\">\r\n      <mat-option *ngFor=\"let option of data\" [value]=\"option?.['personName']\"\r\n        (onSelectionChange)=\"selectOption(option , $event)\">\r\n        <div class=\"d-flex align-items-center\">\r\n          <div class=\"img-card circled-img small\">\r\n            <img [src]=\"getImage(option?.email)\" onerror=\"this.onerror=null;this.src='assets/images/user.svg';\" alt=\"\">\r\n          </div>\r\n          <span class=\"mx-2\"></span>\r\n          <div class=\"line-height-1\">\r\n            <h6 class=\"fs-17 fw-medium fc-onyx mb-0 line-height-1\">{{option?.name}}</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    </mat-autocomplete>\r\n    <mat-error class=\"mb-2\" *ngIf=\"(!controller?.valid)\">{{i18n.translate('validSearchError')}}{{label}}\r\n    </mat-error>\r\n    <mat-hint *ngIf=\"showHint\">\r\n      <span class=\"sfi sfi-check-circle font-10 fc-dark-gray\" [ngClass]=\"{'fc-oasis-light-imp':value}\"></span>\r\n      <span class=\"mx-1\"></span>\r\n      <span class=\"fs-12 fc-onyx\">{{hint}}</span>\r\n    </mat-hint>\r\n  </mat-form-field>\r\n  <mat-error class=\"mb-2\" *ngIf=\"showErrorMessage\">{{errorMessage}}\r\n  </mat-error>\r\n\r\n  <mat-error class=\"mb-2\" *ngIf=\"userAlreadyExist\">\r\n    {{ i18n.translate('userAlreadyExist') }}\r\n  </mat-error>\r\n\r\n  <div class=\"col-12\" *ngIf=\"arrayList?.length && !isReadOnly && multiple\">\r\n    <div class=\"example-list n-results\">\r\n      <div class=\"example-box n-col px-3\" [ngClass]=\"{'mt-0': ind === 0}\"\r\n        *ngFor=\"let emails of arrayList; let ind = index\">\r\n        <div class=\"d-flex flex-grow-1 w-100\">\r\n          <div class=\"user-info flex-grow-1\">\r\n            <img [src]=\"getImage(emails?.personEmail)\" onerror=\"this.onerror=null;this.src='assets/images/user.svg';\"\r\n              alt=\"\" class=\"prof-img\" draggable=\"false\">\r\n            <label *ngIf=\"emails?.personName\">\r\n              {{(emails?.personName)}}\r\n              <span class=\"title\">\r\n                {{emails?.personEmail}}\r\n              </span>\r\n            </label>\r\n          </div>\r\n          <ds-button class=\"ds-btn-action\" size=\"small\" *ngIf=\"!(isReadOnly)\" (click)=\"deleteRow(ind,emails)\" icon>\r\n            <ds-icon icon=\"trash\" class=\"fc-red fs-20\"></ds-icon>\r\n          </ds-button>\r\n\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"(isReadOnly && (field?.personName || multiple))\">\r\n  <app-info-item class=\"d-flex flex-wrap align-items-center info-item w-100 mb-2\" type=\"user-picker\" [hasLabel]=\"hasLabel\"\r\n    [multiple]=\"multiple\" [ngClass]=\"{'user-picker': !isReadOnly}\" [actionType]=\"!isReadOnly ? 'delete' : 'edit'\"\r\n    [label]=\"labelTextReadMode\" [name]=\"field?.personName\"  [value]=\"field?.personEmail\" [arrayList]=\"arrayList\">\r\n  </app-info-item>\r\n</ng-container>\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>{{i18n.translate('searchEmployeeTooltip_1')}}</li>\r\n      <li>{{i18n.translate('searchEmployeeTooltip_2')}}</li>\r\n      <li>{{i18n.translate('searchEmployeeTooltip_3')}}</li>\r\n      <li>{{i18n.translate('searchEmployeeTooltip_4')}}</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}\n"], dependencies: [{ 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: i4.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: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.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: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: SearchEmployeeComponent, isStandalone: true, selector: "app-search-employee", inputs: { valueName: "valueName", label: "label", tooltip: "tooltip", className: "className", showLabel: "showLabel", optional: "optional", data: "data", floatLabel: "floatLabel", error: "error", showEdit: "showEdit", arrayList: "arrayList", isUniqueUsers: "isUniqueUsers" }, outputs: { selectedEmp: "selectedEmp", onInputChange: "onInputChange", editDirectManger: "editDirectManger", deleteDirectManger: "deleteDirectManger", emitedDeletedValue: "emitedDeletedValue" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"!isReadOnly\">\r\n  <div class=\"d-flex justify-content-between mb-1\" *ngIf=\"hasLabel\">\r\n    <span class=\"form-label mb-0\">\r\n      {{labelTextWriteMode}}\r\n      <ds-icon icon=\"info\" class=\"cursor-pointer\" [satPopoverAnchor]=\"searchEmpPopover\"\r\n        ></ds-icon>\r\n        <!-- (click)=\"searchEmpPopover.toggle(); $event.stopImmediatePropagation()\" -->\r\n    </span>\r\n\r\n    <span *ngIf=\"optional && !hideOption\" class=\"fs-11 fc-dark-gray\"> {{i18n.translate('Optional')}}\r\n    </span>\r\n  </div>\r\n  <mat-form-field class=\"primary-form {{className}}\" [floatLabel]=\"floatLabel\">\r\n    <mat-label>\r\n      {{label}}\r\n    </mat-label>\r\n    <ds-icon matPrefix icon=\"search\" class=\"fc-coral fs-18\"></ds-icon>\r\n    <label class=\"mat-form-content\">\r\n      <input type=\"text\" aria-label=\"Number\" (input)=\"onLoadOptions($event)\" matInput [disabled]=\"disabled\"\r\n        [formControl]=\"controller\" [matAutocomplete]=\"auto\">\r\n   \r\n    </label>\r\n    <mat-error class=\"mb-2\" *ngIf=\"showErrorMessage\">{{errorMessage}}\r\n    </mat-error>\r\n    <span class=\"sfi sfi-spinner d-inline-block spin fc-coral\" matSuffix *ngIf=\"loading\"></span>\r\n    <mat-autocomplete #auto=\"matAutocomplete\">\r\n      <mat-option *ngFor=\"let option of data\" [value]=\"option?.['personName']\"\r\n        (onSelectionChange)=\"selectOption(option , $event)\">\r\n        <div class=\"d-flex align-items-center\">\r\n          <div class=\"img-card circled-img small\">\r\n            <img [src]=\"getImage(option?.email)\" onerror=\"this.onerror=null;this.src='assets/images/user.svg';\" alt=\"\">\r\n          </div>\r\n          <span class=\"mx-2\"></span>\r\n          <div class=\"line-height-1\">\r\n            <h6 class=\"fs-17 fw-medium fc-onyx mb-0 line-height-1\">{{option?.name}}</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    </mat-autocomplete>\r\n    <mat-error class=\"mb-2\" *ngIf=\"(!controller?.valid)\">{{i18n.translate('validSearchError')}}{{label}}\r\n    </mat-error>\r\n    <mat-hint *ngIf=\"showHint\">\r\n      <span class=\"sfi sfi-check-circle font-10 fc-dark-gray\" [ngClass]=\"{'fc-oasis-light-imp':value}\"></span>\r\n      <span class=\"mx-1\"></span>\r\n      <span class=\"fs-12 fc-onyx\">{{hint}}</span>\r\n    </mat-hint>\r\n  </mat-form-field>\r\n  <mat-error class=\"mb-2\" *ngIf=\"showErrorMessage\">{{errorMessage}}\r\n  </mat-error>\r\n\r\n  <mat-error class=\"mb-2\" *ngIf=\"userAlreadyExist\">\r\n    {{ i18n.translate('userAlreadyExist') }}\r\n  </mat-error>\r\n\r\n  <div class=\"col-12\" *ngIf=\"arrayList?.length && !isReadOnly && multiple\">\r\n    <div class=\"example-list n-results\">\r\n      <div class=\"example-box n-col px-3\" [ngClass]=\"{'mt-0': ind === 0}\"\r\n        *ngFor=\"let emails of arrayList; let ind = index\">\r\n        <div class=\"d-flex flex-grow-1 w-100\">\r\n          <div class=\"user-info flex-grow-1\">\r\n            <img [src]=\"getImage(emails?.personEmail)\" onerror=\"this.onerror=null;this.src='assets/images/user.svg';\"\r\n              alt=\"\" class=\"prof-img\" draggable=\"false\">\r\n            <label *ngIf=\"emails?.personName\">\r\n              {{(emails?.personName)}}\r\n              <span class=\"title\">\r\n                {{emails?.personEmail}}\r\n              </span>\r\n            </label>\r\n          </div>\r\n          <ds-button class=\"ds-btn-action\" size=\"small\" *ngIf=\"!(isReadOnly)\" (click)=\"deleteRow(ind,emails)\" icon>\r\n            <ds-icon icon=\"trash\" class=\"fc-red fs-20\"></ds-icon>\r\n          </ds-button>\r\n\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"(isReadOnly && (field?.personName || multiple))\">\r\n  <app-info-item class=\"d-flex flex-wrap align-items-center info-item w-100 mb-2\" type=\"user-picker\" [hasLabel]=\"hasLabel\"\r\n    [multiple]=\"multiple\" [ngClass]=\"{'user-picker': !isReadOnly}\" [actionType]=\"!isReadOnly ? 'delete' : 'edit'\"\r\n    [label]=\"labelTextReadMode\" [name]=\"field?.personName\"  [value]=\"field?.personEmail\" [arrayList]=\"arrayList\">\r\n  </app-info-item>\r\n</ng-container>\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>{{i18n.translate('searchEmployeeTooltip_1')}}</li>\r\n      <li>{{i18n.translate('searchEmployeeTooltip_2')}}</li>\r\n      <li>{{i18n.translate('searchEmployeeTooltip_3')}}</li>\r\n      <li>{{i18n.translate('searchEmployeeTooltip_4')}}</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}\n"], dependencies: [{ 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: i4.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: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SearchEmployeeComponent, decorators: [{
             type: Component,
@@ -4179,7 +4203,7 @@ class SelectComponent extends BaseComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: SelectComponent, isStandalone: true, selector: "app-select", inputs: { valueName: "valueName", parentKey: "parentKey", label: "label", tooltip: "tooltip", className: "className", showLabel: "showLabel", readonly: "readonly", optional: "optional", data: "data", error: "error", optionAr: "optionAr", optionEn: "optionEn", hasPlaceHolder: "hasPlaceHolder", parentValue: "parentValue" }, outputs: { onChange: "onChange", emitedMultiValue: "emitedMultiValue" }, viewQueries: [{ propertyName: "selectCtrl", first: true, predicate: ["selectCtrl"], descendants: true }, { propertyName: "selectAllOption", first: true, predicate: ["selectAllOption"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"!isReadOnly\">\r\n  <app-form-label [label]=\"label\" [optional]=\"optional\" [hideOption]=\"hideOption\" [showLabel]=\"showLabel\">\r\n  </app-form-label>\r\n  <mat-form-field class=\"{{className}}\" [floatLabel]=\"'auto'\">\r\n    <mat-label>\r\n      {{ hasPlaceHolder ? placeholder : i18n.translate('selectYourOption')}}\r\n    </mat-label>\r\n    <label class=\"mat-form-content\">\r\n      <ng-container *ngIf=\"!multiple\">\r\n        <mat-select disableOptionCentering [disabled]=\"disabled\" [formControl]=\"controller\"\r\n          (selectionChange)=\"emitSelectedValue($event)\"\r\n          [placeholder]=\"hasPlaceHolder ? placeholder : i18n.translate('selectYourOption')\">\r\n          <ng-container *ngIf=\"parentKey !== ''\">\r\n            <ng-container *ngFor=\"let element of lov?.options\">\r\n              <mat-option *ngIf=\"element?.parentValue === parentKey\" [value]=\"element.value\">\r\n                {{element.description}}\r\n              </mat-option>\r\n            </ng-container>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"parentKey ===''\">\r\n            <mat-option *ngFor=\"let element of lov?.options\" [value]=\"element.value\">\r\n              {{element.description}}\r\n            </mat-option>\r\n          </ng-container>\r\n        </mat-select>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"multiple\">\r\n        <mat-select  #selectCtrl  [disabled]=\"disabled\" [formControl]=\"controller\" multiple\r\n          (selectionChange)=\"handleOnOptionSelected($event?.value)\"\r\n          [placeholder]=\"hasPlaceHolder ? placeholder : i18n.translate('selectYourOption')\">\r\n\r\n          <mat-select-trigger *ngIf=\"selectAllEnabled\">\r\n            {{ transformSelectedData(controller?.getRawValue())}}\r\n            <span *ngIf=\"(controller.value?.length || 0) > 1\"  >\r\n              (+{{ (controller.value?.length || 0) - 1 }} {{ controller.value?.length === 2 ? i18n.translate('other') : i18n.translate('others') }})\r\n            </span>\r\n          </mat-select-trigger>\r\n\r\n          <ng-container *ngIf=\"parentKey !== ''\" >\r\n            <ng-container *ngFor=\"let element of lov?.options\" class=\"mx-2\">\r\n              <mat-option *ngIf=\"element?.parentValue === parentKey\" [value]=\"element.value\">\r\n                {{element.description}}\r\n              </mat-option>\r\n            </ng-container>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"parentKey ===''\" >\r\n\r\n            <mat-option #selectAllOption *ngIf=\"selectAllEnabled && lov?.options?.length\" value=\"all\" class=\"mx-2\" (click)=\"toggleAllOptions(selectAllOption)\">\r\n              {{i18n.translate('selectAll')}}\r\n            </mat-option>\r\n\r\n            <mat-option *ngFor=\"let element of lov?.options\" [value]=\"element.value\" class=\"mx-2\">\r\n              {{element.description}}\r\n            </mat-option>\r\n\r\n\r\n          </ng-container>\r\n        </mat-select>\r\n      </ng-container>\r\n\r\n\r\n\r\n\r\n\r\n      <mat-label *ngIf=\"loading\">\r\n        <div class=\"select-placeholder-container\">\r\n          <!-- <span>Loading...</span> -->\r\n          <mat-spinner class=\"spinner\" diameter=\"20\"></mat-spinner>\r\n        </div>\r\n      </mat-label>\r\n\r\n    </label>\r\n\r\n    <mat-error class=\"mb-2\" *ngIf=\"(!controller?.valid)\">{{i18n.translate('validSelectError')}}{{label}}\r\n    </mat-error>\r\n\r\n    <mat-hint *ngIf=\"showHint && hint\"  class=\"mb-2\">\r\n      <span class=\"mat-error\">{{hint}}</span>\r\n    </mat-hint>\r\n\r\n    <!-- <mat-error *ngIf=\"!controller.valid\">{{error}}</mat-error> -->\r\n  </mat-form-field>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"isReadOnly && (showIfEmpty || field?.value)\" class=\"info-section\">\r\n  <app-info-item class=\"info-item w-100\" [label]=\"label\" [hasLabel]=\"hasLabel\" [insideTable]=\"insideTable\"\r\n    [value]=\"field?.value || field?.key\"></app-info-item>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"isReadOnly && multiple\" class=\"info-section\">\r\n  <app-info-item class=\"info-item w-100\" [label]=\"label\" [type]=\"'multipleSelect'\" [hasLabel]=\"hasLabel\" [insideTable]=\"insideTable\"\r\n    [value]=\"field\"></app-info-item>\r\n</ng-container>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption$1, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: MatError$1, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: InfoItemComponent, selector: "app-info-item", inputs: ["label", "value", "name", "type", "dateType", "multiple", "insideTable", "hasLabel", "arrayList", "actionType", "download"] }, { kind: "component", type: FormLabelComponent, selector: "app-form-label", inputs: ["hideOption", "showLabel", "label", "optional"] }, { kind: "component", type: MatFormField$1, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: SelectComponent, isStandalone: true, selector: "app-select", inputs: { valueName: "valueName", parentKey: "parentKey", label: "label", tooltip: "tooltip", className: "className", showLabel: "showLabel", readonly: "readonly", optional: "optional", data: "data", error: "error", optionAr: "optionAr", optionEn: "optionEn", hasPlaceHolder: "hasPlaceHolder", parentValue: "parentValue" }, outputs: { onChange: "onChange", emitedMultiValue: "emitedMultiValue" }, viewQueries: [{ propertyName: "selectCtrl", first: true, predicate: ["selectCtrl"], descendants: true }, { propertyName: "selectAllOption", first: true, predicate: ["selectAllOption"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"!isReadOnly\">\r\n  <app-form-label [label]=\"label\" [optional]=\"optional\" [hideOption]=\"hideOption\" [showLabel]=\"showLabel\">\r\n  </app-form-label>\r\n  <mat-form-field class=\"{{className}}\" [floatLabel]=\"'auto'\">\r\n    <mat-label>\r\n      {{ hasPlaceHolder ? placeholder : i18n.translate('selectYourOption')}}\r\n    </mat-label>\r\n    <label class=\"mat-form-content\">\r\n      <ng-container *ngIf=\"!multiple\">\r\n        <mat-select disableOptionCentering [disabled]=\"disabled\" [formControl]=\"controller\"\r\n          (selectionChange)=\"emitSelectedValue($event)\"\r\n          [placeholder]=\"hasPlaceHolder ? placeholder : i18n.translate('selectYourOption')\">\r\n          <ng-container *ngIf=\"parentKey !== ''\">\r\n            <ng-container *ngFor=\"let element of lov?.options\">\r\n              <mat-option *ngIf=\"element?.parentValue === parentKey\" [value]=\"element.value\">\r\n                {{element.description}}\r\n              </mat-option>\r\n            </ng-container>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"parentKey ===''\">\r\n            <mat-option *ngFor=\"let element of lov?.options\" [value]=\"element.value\">\r\n              {{element.description}}\r\n            </mat-option>\r\n          </ng-container>\r\n        </mat-select>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"multiple\">\r\n        <mat-select  #selectCtrl  [disabled]=\"disabled\" [formControl]=\"controller\" multiple\r\n          (selectionChange)=\"handleOnOptionSelected($event?.value)\"\r\n          [placeholder]=\"hasPlaceHolder ? placeholder : i18n.translate('selectYourOption')\">\r\n\r\n          <mat-select-trigger *ngIf=\"selectAllEnabled\">\r\n            {{ transformSelectedData(controller?.getRawValue())}}\r\n            <span *ngIf=\"(controller.value?.length || 0) > 1\"  >\r\n              (+{{ (controller.value?.length || 0) - 1 }} {{ controller.value?.length === 2 ? i18n.translate('other') : i18n.translate('others') }})\r\n            </span>\r\n          </mat-select-trigger>\r\n\r\n          <ng-container *ngIf=\"parentKey !== ''\" >\r\n            <ng-container *ngFor=\"let element of lov?.options\" class=\"mx-2\">\r\n              <mat-option *ngIf=\"element?.parentValue === parentKey\" [value]=\"element.value\">\r\n                {{element.description}}\r\n              </mat-option>\r\n            </ng-container>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"parentKey ===''\" >\r\n\r\n            <mat-option #selectAllOption *ngIf=\"selectAllEnabled && lov?.options?.length\" value=\"all\" class=\"mx-2\" (click)=\"toggleAllOptions(selectAllOption)\">\r\n              {{i18n.translate('selectAll')}}\r\n            </mat-option>\r\n\r\n            <mat-option *ngFor=\"let element of lov?.options\" [value]=\"element.value\" class=\"mx-2\">\r\n              {{element.description}}\r\n            </mat-option>\r\n\r\n\r\n          </ng-container>\r\n        </mat-select>\r\n      </ng-container>\r\n\r\n\r\n\r\n\r\n\r\n      <mat-label *ngIf=\"loading\">\r\n        <div class=\"select-placeholder-container\">\r\n          <!-- <span>Loading...</span> -->\r\n          <mat-spinner class=\"spinner\" diameter=\"20\"></mat-spinner>\r\n        </div>\r\n      </mat-label>\r\n\r\n    </label>\r\n\r\n    <mat-error class=\"mb-2\" *ngIf=\"(!controller?.valid)\">{{i18n.translate('validSelectError')}}{{label}}\r\n    </mat-error>\r\n\r\n    <mat-hint *ngIf=\"showHint && hint\"  class=\"mb-2\">\r\n      <span class=\"mat-error\">{{hint}}</span>\r\n    </mat-hint>\r\n\r\n    <!-- <mat-error *ngIf=\"!controller.valid\">{{error}}</mat-error> -->\r\n  </mat-form-field>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"isReadOnly && (showIfEmpty || field?.value)\" class=\"info-section\">\r\n  <app-info-item class=\"info-item w-100\" [label]=\"label\" [hasLabel]=\"hasLabel\" [insideTable]=\"insideTable\"\r\n    [value]=\"field?.value || field?.key\"></app-info-item>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"isReadOnly && multiple\" class=\"info-section\">\r\n  <app-info-item class=\"info-item w-100\" [label]=\"label\" [type]=\"'multipleSelect'\" [hasLabel]=\"hasLabel\" [insideTable]=\"insideTable\"\r\n    [value]=\"field\"></app-info-item>\r\n</ng-container>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption$1, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: MatError$1, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: InfoItemComponent, selector: "app-info-item", inputs: ["label", "value", "name", "type", "dateType", "multiple", "insideTable", "hasLabel", "arrayList", "actionType", "download"] }, { kind: "component", type: FormLabelComponent, selector: "app-form-label", inputs: ["hideOption", "showLabel", "label", "optional"] }, { kind: "component", type: MatFormField$1, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
@@ -4293,7 +4317,7 @@ class TextareaComponent extends BaseComponent {
         this.emitedValue.emit(data.trim());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: TextareaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: TextareaComponent, isStandalone: true, selector: "app-textarea", inputs: { label: "label", tooltip: "tooltip", className: "className", preventSpecailChar: "preventSpecailChar" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"!isReadOnly\">\r\n  <div class=\"d-flex justify-content-between mb-1\" *ngIf=\"hasLabel\">\r\n    <span class=\"form-label mb-0\">{{ label }}</span>\r\n    <span *ngIf=\"!required\" class=\"fs-11 fc-dark-gray\">\r\n      <!-- {{'Optional'| transloco}}  -->{{ i18n.translate('Optional') }}\r\n    </span>\r\n  </div>\r\n  <mat-form-field class=\"custom-textarea bordered-input  {{className}}\">\r\n    <mat-label>{{ label }}</mat-label>\r\n    <label class=\"mat-form-content\">\r\n\r\n        <textarea *ngIf=\"type === 'arOnly'\" [placeholder]=\"placeholder\" [minlength]=\"minLength\" [maxlength]=\"maxLength\" min=\"minlength\" arOnly\r\n                  (input)=\"onValueChange($event)\" (focusout)=\"focusOutFunction()\" (focusin)=\"focusInFunction()\" max=\"maxValue\"\r\n                  [formControl]=\"controller\" matInput></textarea>\r\n\r\n      <textarea *ngIf=\"type === 'enOnly'\" [placeholder]=\"placeholder\" [minlength]=\"minLength\" [maxlength]=\"maxLength\" min=\"minlength\" enOnly\r\n                (input)=\"onValueChange($event)\" (focusout)=\"focusOutFunction()\" (focusin)=\"focusInFunction()\" max=\"maxValue\"\r\n                [formControl]=\"controller\" matInput></textarea>\r\n\r\n      <!--      <textarea *ngIf=\"preventSpecailChar\" [placeholder]=\"placeholder\" [minlength]=\"minLength\" [maxlength]=\"maxLength\" min=\"minlength\"\r\n                      specialIsAlphaNumeric\r\n                      (input)=\"onValueChange($event.target.value)\" (focusout)=\"focusOutFunction()\" (focusin)=\"focusInFunction()\" max=\"maxValue\"\r\n                      [formControl]=\"controller\" matInput></textarea>-->\r\n      <!--&& !preventSpecailChar-->\r\n      <textarea *ngIf=\"type !== 'enOnly' &&  type !== 'arOnly' \" [placeholder]=\"placeholder\" [minlength]=\"minLength\"\r\n                [maxlength]=\"maxLength\" min=\"minlength\" specialIsAlphaNumeric\r\n                (input)=\"onValueChange($event)\" (focusout)=\"focusOutFunction()\" (focusin)=\"focusInFunction()\" max=\"maxValue\"\r\n                [formControl]=\"controller\" matInput></textarea>\r\n\r\n    </label>\r\n    <!-- [(ngModel)]=\"field\" [name]=\"name\" -->\r\n    <mat-error *ngIf=\"field && field?.length < minLength\">{{ errorMessage }}</mat-error>\r\n    <mat-error *ngIf=\"field && field?.length > maxLength\">{{ errorMessage }}</mat-error>\r\n    <mat-error class=\"mb-2\" *ngIf=\"!field && (!controller?.valid)\">{{ i18n.translate('validFieldError') }}{{ label }}</mat-error>\r\n\r\n\r\n    <mat-hint class=\"d-flex align-items-center gap-1 mt-1\" *ngIf=\"showHint\">\r\n      <span class=\"sfi sfi-info fs-17 fc-dark-gray\" [ngClass]=\"{'fc-oasis-light-imp':value}\"></span>\r\n      <span class=\"fs-12 fc-black line-height-1\">{{ hint }}</span>\r\n    </mat-hint>\r\n\r\n\r\n  </mat-form-field>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"isReadOnly && (showIfEmpty || field)\">\r\n  <app-info-item class=\"info-item w-100\" [insideTable]=\"insideTable\" [label]=\"label\" [value]=\"field\" [type]=\"type\"></app-info-item>\r\n</ng-container>\r\n", styles: [":host{flex-grow:1}:host ::ng-deep mat-form-field.custom-textarea .mat-form-field-flex{padding:var(--input-padding)}:host ::ng-deep table mat-form-field.custom-textarea .mat-form-field-flex{--input-height: 80px}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.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: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: InfoItemComponent, selector: "app-info-item", inputs: ["label", "value", "name", "type", "dateType", "multiple", "insideTable", "hasLabel", "arrayList", "actionType", "download"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: TextareaComponent, isStandalone: true, selector: "app-textarea", inputs: { label: "label", tooltip: "tooltip", className: "className", preventSpecailChar: "preventSpecailChar" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"!isReadOnly\">\r\n  <div class=\"d-flex justify-content-between mb-1\" *ngIf=\"hasLabel\">\r\n    <span class=\"form-label mb-0\">{{ label }}</span>\r\n    <span *ngIf=\"!required\" class=\"fs-11 fc-dark-gray\">\r\n      <!-- {{'Optional'| transloco}}  -->{{ i18n.translate('Optional') }}\r\n    </span>\r\n  </div>\r\n  <mat-form-field class=\"custom-textarea bordered-input  {{className}}\">\r\n    <mat-label>{{ label }}</mat-label>\r\n    <label class=\"mat-form-content\">\r\n\r\n        <textarea *ngIf=\"type === 'arOnly'\" [placeholder]=\"placeholder\" [minlength]=\"minLength\" [maxlength]=\"maxLength\" min=\"minlength\" arOnly\r\n                  (input)=\"onValueChange($event)\" (focusout)=\"focusOutFunction()\" (focusin)=\"focusInFunction()\" max=\"maxValue\"\r\n                  [formControl]=\"controller\" matInput></textarea>\r\n\r\n      <textarea *ngIf=\"type === 'enOnly'\" [placeholder]=\"placeholder\" [minlength]=\"minLength\" [maxlength]=\"maxLength\" min=\"minlength\" enOnly\r\n                (input)=\"onValueChange($event)\" (focusout)=\"focusOutFunction()\" (focusin)=\"focusInFunction()\" max=\"maxValue\"\r\n                [formControl]=\"controller\" matInput></textarea>\r\n\r\n      <!--      <textarea *ngIf=\"preventSpecailChar\" [placeholder]=\"placeholder\" [minlength]=\"minLength\" [maxlength]=\"maxLength\" min=\"minlength\"\r\n                      specialIsAlphaNumeric\r\n                      (input)=\"onValueChange($event.target.value)\" (focusout)=\"focusOutFunction()\" (focusin)=\"focusInFunction()\" max=\"maxValue\"\r\n                      [formControl]=\"controller\" matInput></textarea>-->\r\n      <!--&& !preventSpecailChar-->\r\n      <textarea *ngIf=\"type !== 'enOnly' &&  type !== 'arOnly' \" [placeholder]=\"placeholder\" [minlength]=\"minLength\"\r\n                [maxlength]=\"maxLength\" min=\"minlength\" specialIsAlphaNumeric\r\n                (input)=\"onValueChange($event)\" (focusout)=\"focusOutFunction()\" (focusin)=\"focusInFunction()\" max=\"maxValue\"\r\n                [formControl]=\"controller\" matInput></textarea>\r\n\r\n    </label>\r\n    <!-- [(ngModel)]=\"field\" [name]=\"name\" -->\r\n    <mat-error *ngIf=\"field && field?.length < minLength\">{{ errorMessage }}</mat-error>\r\n    <mat-error *ngIf=\"field && field?.length > maxLength\">{{ errorMessage }}</mat-error>\r\n    <mat-error class=\"mb-2\" *ngIf=\"!field && (!controller?.valid)\">{{ i18n.translate('validFieldError') }}{{ label }}</mat-error>\r\n\r\n\r\n    <mat-hint class=\"d-flex align-items-center gap-1 mt-1\" *ngIf=\"showHint\">\r\n      <span class=\"sfi sfi-info fs-17 fc-dark-gray\" [ngClass]=\"{'fc-oasis-light-imp':value}\"></span>\r\n      <span class=\"fs-12 fc-black line-height-1\">{{ hint }}</span>\r\n    </mat-hint>\r\n\r\n\r\n  </mat-form-field>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"isReadOnly && (showIfEmpty || field)\">\r\n  <app-info-item class=\"info-item w-100\" [insideTable]=\"insideTable\" [label]=\"label\" [value]=\"field\" [type]=\"type\"></app-info-item>\r\n</ng-container>\r\n", styles: [":host{flex-grow:1}:host ::ng-deep mat-form-field.custom-textarea .mat-form-field-flex{padding:var(--input-padding)}:host ::ng-deep table mat-form-field.custom-textarea .mat-form-field-flex{--input-height: 80px}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: InfoItemComponent, selector: "app-info-item", inputs: ["label", "value", "name", "type", "dateType", "multiple", "insideTable", "hasLabel", "arrayList", "actionType", "download"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: TextareaComponent, decorators: [{
             type: Component,
@@ -4507,7 +4531,7 @@ class TableListComponent extends BaseComponent {
     sentBack() {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: TableListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: TableListComponent, isStandalone: true, selector: "app-table-list", inputs: { columns: "columns", columnsConfig: "columnsConfig", rows: "rows", actions: "actions", totalRecords: "totalRecords", className: "className" }, outputs: { pageChanged: "pageChanged", buttonAction: "buttonAction", emitDataRow: "emitDataRow" }, usesInheritance: true, ngImport: i0, template: "<div class=\"overflow-auto\">\r\n  <!-- #table  (scroll)=\"onPageChange($event)\" -->\r\n  <ng-container >\r\n    <!-- (matSortChange)=\"sortData($event)\" -->\r\n    <table mat-table [dataSource]=\"dataSource\" class=\"primary-table {{className}}\" matSort >\r\n      <ng-container *ngFor=\"let column of columns; let i = index;\">\r\n        <ng-container [matColumnDef]=\"column\">\r\n          <th mat-header-cell *matHeaderCellDef [ngClass]=\"{'last-column' : columnsConfig[i].type === 'actions', 'sortArrow': columnsConfig[i]?.sortName?.length }\" mat-sort-header>\r\n            {{i18n.translate(columnsConfig[i].label)}} </th>\r\n  \r\n          <td mat-cell  [ngClass]=\"{'account-disabled': element?.user?.disabledCleanUp===true}\"  *matCellDef=\"let element\">\r\n            <ng-container [ngSwitch]=\"columnsConfig[i].type\" *ngIf=\"rows.length\">\r\n              <a [ngClass]=\"columnsConfig[i].type\" [href]=\"element[column]\" *ngSwitchCase=\"'link'\">\r\n                {{ element[column] }}\r\n              </a>\r\n  \r\n              <a [ngClass]=\"columnsConfig[i].type\" [routerLink]=\"[element.id]\" [href]=\"element[column]\"\r\n                *ngSwitchCase=\"'rout'\">\r\n                {{ element[column] }}\r\n              </a>\r\n  \r\n              <span class=\"d-inline-flex align-items-center\" [ngClass]=\"columnsConfig[i].type\" *ngSwitchCase=\"'date'\">\r\n                <span class=\"sfi sfi-clock text-color-coral\" *ngIf=\"!loading\"></span>\r\n                <span class=\"mx-2\">\r\n                  <!-- {{ element?.Date.from }}\r\n                  <ng-container *ngIf=\"element?.Date.to\">\r\n                  : {{ element?.Date.to }}\r\n                </ng-container> -->\r\n                  {{ element[column] | date: 'dd/MM/YYYY' }}\r\n                </span>\r\n              </span>\r\n  \r\n              <div class=\"d-inline-flex align-items-center\" [ngClass]=\"columnsConfig[i].type\" *ngSwitchCase=\"'sla'\">\r\n                <app-sla [value]=\"element?.SLA.value\" [maxValue]=\"element?.SLA.max\" [canvasScale]=\"45\"\r\n                  [outerLineColor]=\"getSlaColor(element?.SLA.value, element?.SLA.max)\"></app-sla>\r\n              </div>\r\n  \r\n              <div class=\"img-card table-img\" [ngClass]=\"columnsConfig[i].type\" *ngSwitchCase=\"'image'\">\r\n                <img [src]=\"element?.image\" alt=\"\">\r\n              </div>\r\n  \r\n              <span class=\"{{ element[column].type }}\" [ngClass]=\"columnsConfig[i].type\" *ngSwitchCase=\"'status'\">\r\n                {{ element[column].label }}\r\n              </span>\r\n  \r\n  \r\n              <div class=\"d-flex mx-n1\" *ngSwitchCase=\"'RequestType'\">\r\n                <div class=\"request-type mx-1 {{item.status}}\" *ngFor=\"let item of element?.RequestType\">\r\n                  {{ item.label }}\r\n                  <span class=\"mx-1\" *ngIf=\"item.status === 'need-action'\"></span>\r\n                  <span class=\"sfi sfi-info \" *ngIf=\"item.status === 'need-action'\"></span>\r\n                </div>\r\n              </div>\r\n  \r\n  \r\n              <span class=\"{{ element[column].type }} {{ element[column] ? 'text-color-coral underline' : '' }}\"\r\n                [ngClass]=\"columnsConfig[i].type\" *ngSwitchCase=\"'number'\">\r\n                {{ element[column] ? element[column] : '-' }}\r\n              </span>\r\n  \r\n              <div class=\"text-nowrap d-flex align-items-center\" [ngClass]=\"columnsConfig[i].type\"\r\n                *ngSwitchCase=\"'group'\">\r\n                <span>{{element?.Group.groupName}}</span>\r\n                <span class=\"mx-2\"></span>\r\n                <app-repeated-list type=\"users-avatar\" [listOfItems]=\"element?.Group.users\"></app-repeated-list>\r\n              </div>\r\n  \r\n              <div class=\"d-flex align-items-center gap-2\" [ngClass]=\"columnsConfig[i].type\" *ngSwitchCase=\"'user'\">\r\n                <span class=\"img-card circled-img small\" *ngIf=\"!loading\">\r\n                  <img src=\"{{'data:image/png;base64,' + element?.user?.personalPhoto}}\"\r\n                    onerror=\"this.onerror=null;this.src='assets/images/user.svg';\" alt=\"\">\r\n                </span>\r\n                <div class=\"d-flex flex-column\">\r\n                  <span class=\"font-14 font-weight-medium\">{{element?.user?.name}}</span>\r\n                  <span class=\"font-12 font-weight-normal text-color-dark-gray mt-1\">{{element?.user?.email}}</span>\r\n                </div>\r\n              </div>\r\n  \r\n  \r\n              <div class=\"delegate d-flex align-items-center\" [ngClass]=\"columnsConfig[i].type\"\r\n                *ngSwitchCase=\"'assigned'\">\r\n                <div class=\"img-card x-small circled-img\">\r\n                  <img [src]=\"element?.AssignedTo.image\" alt=\"\">\r\n                </div>\r\n                <span class=\"mx-1\"></span>\r\n                <span class=\"font-14 font-weight-medium text-color-onyx\">{{element?.AssignedTo.name}}</span>\r\n                <span class=\"sfi sfi-close text-color-coral\"></span>\r\n              </div>\r\n  \r\n  \r\n              <ng-container *ngSwitchCase=\"'statusAction'\">\r\n                <div class=\"table-action\">\r\n  \r\n                  <div class=\"count-down mx-n1\" *ngIf=\"element[column] === 'need-action'\">\r\n                    <div class=\"item mx-1\">\r\n                      <span class=\"font-12 font-weight-medium text-color-onyx d-block\">01</span>\r\n                      <span class=\"font-8 font-weight-light text-color-onyx d-block\">Days</span>\r\n                    </div>\r\n                    <div class=\"item mx-1\">\r\n                      <span class=\"font-12 font-weight-medium text-color-onyx d-block\">18</span>\r\n                      <span class=\"font-8 font-weight-light text-color-onyx d-block\">Hours</span>\r\n                    </div>\r\n                    <div class=\"item mx-1\">\r\n                      <span class=\"font-12 font-weight-medium text-color-onyx d-block\">44</span>\r\n                      <span class=\"font-8 font-weight-light text-color-onyx d-block\">Mins</span>\r\n                    </div>\r\n                  </div>\r\n  \r\n                  <div class=\"d-flex align-items-center\" *ngIf=\"element[column] === 'approved'\">\r\n                    <span class=\"status approved\">\r\n                      Approved\r\n                    </span>\r\n                  </div>\r\n  \r\n                  <div class=\"d-flex align-items-center\" *ngIf=\"element[column] === 'sent-back'\">\r\n                    <span class=\"status rejected\">\r\n                      Sent Back\r\n                    </span>\r\n                    <span class=\"mx-2\"></span>\r\n                    <button mat-stroked-button class=\"btn button-primary square br-w-1 font-14 font-weight-medium\"\r\n                      (click)=\"sentBack()\">\r\n                      <span class=\"sfi sfi-chat-o\"></span>\r\n                    </button>\r\n                  </div>\r\n  \r\n                  <div class=\"d-flex align-items-center\" *ngIf=\"element[column] === 'pending'\">\r\n                    <span class=\"status pending\">\r\n                      Pending\r\n                    </span>\r\n                    <span class=\"mx-2\"></span>\r\n  \r\n                    <div class=\"d-flex align-items-center mx-n1\">\r\n                      <div class=\"img-card circled-img x-small mx-1\">\r\n                        <img [src]=\"element?.pendingWith.image\" alt=\"\">\r\n                      </div>\r\n  \r\n                      <div class=\"d-flex flex-column mx-1\">\r\n                        <span class=\"font-8 font-weight-medium text-color-yellow text-nowrap\">Pending With</span>\r\n                        <span class=\"font-11 font-weight-medium text-nowrap\">{{element?.pendingWith.name}}</span>\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n  \r\n  \r\n                </div>\r\n              </ng-container>\r\n  \r\n  \r\n              <ng-container *ngSwitchCase=\"'actions'\">\r\n  \r\n                <div class=\"d-flex justify-content-between mx-n2\">\r\n                  <ng-container *ngFor=\"let action of element[column]\">\r\n  \r\n                    <div class=\"flex-grow-1\">\r\n                      <ng-container *ngIf=\"action.type.buttonType === 'stroked'\">\r\n                        <button mat-stroked-button (click)=\"buttonClicked(element,action.fn, $event)\"\r\n                          class=\"btn button-{{action.type.buttonClass}} mx-2\">\r\n                          {{action.label}}\r\n                        </button>\r\n                      </ng-container>\r\n  \r\n                      <ng-container *ngIf=\"action.type.buttonType === 'flat'\">\r\n                        <button mat-flat-button (click)=\"buttonClicked(element,action.fn, $event)\"\r\n                          class=\"btn button-{{action.type.buttonClass}} mx-2\">\r\n                          {{action.label}}\r\n                        </button>\r\n                      </ng-container>\r\n  \r\n                      <ng-container *ngIf=\"action.type.buttonType === 'icon'\">\r\n                        <button mat-icon-button (click)=\"buttonClicked(element,action.fn, $event)\"\r\n                          class=\"btn button-{{action.type.buttonClass}} mx-2\">\r\n                          <span class=\"sfi sfi-{{action.type.icon}}\"></span>\r\n                        </button>\r\n                      </ng-container>\r\n                    </div>\r\n  \r\n                    <ng-container *ngIf=\"action.type.buttonType === 'all'\">\r\n                      <button mat-icon-button class=\"btn button-transparent square medium mx-2 text-end\"\r\n                        [matMenuTriggerFor]=\"menuAction\" (click)=\"$event.stopPropagation()\">\r\n                        <span class=\"sfi sfi-dots text-color-onyx\"></span>\r\n                      </button>\r\n                      <mat-menu #menuAction=\"matMenu\" xPosition=\"before\" class=\"actions-menu\">\r\n                        <button *ngIf=\"!element?.user?.email && element?.user?.disabledCleanUp!==true\" mat-menu-item class=\"text-color-onyx font-12\"\r\n                          (click)=\"buttonClicked(element,'CreateEmail', $event)\">\r\n                          {{i18n.translate('createEmail')}} \r\n                        </button>\r\n                        <button *ngIf=\"element?.user?.email && element?.user?.enabled==='true'\" mat-menu-item class=\"text-color-red font-12\"\r\n                          (click)=\"buttonClicked(element,'DisableEmail', $event)\">\r\n                          {{ i18n.translate('disableEmail')}}\r\n                        </button>\r\n                        <button *ngIf=\"element?.user?.email  && element?.user?.disabledCleanUp===true\" mat-menu-item class=\"text-color-red font-12\"\r\n                          (click)=\"buttonClicked(element,'EnableEmail', $event)\">\r\n                          {{ i18n.translate('enableEmail')}}\r\n                        </button>\r\n                        <button *ngIf=\"element?.user!==null && element?.user?.disabledCleanUp!==true\" mat-menu-item class=\"text-color-onyx font-12\"\r\n                          (click)=\"buttonClicked(element,'CreateEntryPermission', $event)\">\r\n                          {{ i18n.translate('createCEP')}}\r\n                        </button>\r\n                        <!-- <button  *ngIf=\"!element?.user?.email\" mat-menu-item class=\"text-color-red font-12\"\r\n                          (click)=\"buttonClicked(element,'DisableEntryPermission', $event)\">\r\n                          {{i18n.translate('disableEntryPermission')}}\r\n                        </button> -->\r\n                        <button  *ngIf=\"!element?.user?.email && element?.user?.disabledCleanUp!==true\" mat-menu-item class=\"text-color-red font-12\"\r\n                        (click)=\"buttonClicked(element,'DeleteAccount', $event)\">\r\n                        {{i18n.translate('deleteAccount')}}\r\n                      </button>\r\n\r\n                        <button *ngIf=\"element?.user?.email && element?.user?.disabledCleanUp!==true\" [disabled]=\"!element?.mailExtensionAllowed\" mat-menu-item class=\"text-color-onyx font-12\"\r\n                          (click)=\"buttonClicked(element,'ExtendAccount', $event)\">\r\n                          {{ i18n.translate('extendAccount')}}\r\n                        </button>\r\n                        <button mat-menu-item class=\"text-color-onyx font-12\" *ngIf=\"element?.user?.disabledCleanUp!==true\" (click)=\"buttonClicked(element,'update', $event)\">\r\n                          {{ i18n.translate('updateEmploymentInformation')}}\r\n                        </button>\r\n                      </mat-menu>\r\n                    </ng-container>\r\n                  </ng-container>\r\n                </div>\r\n              </ng-container>\r\n  \r\n              <span class=\"text-nowrap\" [ngClass]=\"columnsConfig[i].type\" *ngSwitchDefault>\r\n                {{ element[column] }}\r\n              </span>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"loading\">\r\n              <span class=\" d-block loading-bg\"></span>\r\n            </ng-container>\r\n  \r\n          </td>\r\n  \r\n  \r\n        </ng-container>\r\n      </ng-container>\r\n  \r\n      <tr mat-header-row  *matHeaderRowDef=\"columns\"></tr>\r\n      <tr mat-row *matRowDef=\"let row; columns: columns;\" class=\"cursor-pointer\" (click)=\"selectedRow(row)\"></tr>\r\n    </table>\r\n  </ng-container>\r\n  <!-- <ng-container *ngIf=\"loading\">\r\n    <span>loading...</span>\r\n  </ng-container> -->\r\n  <!--  <ng-container *ngIf=\"loading\">-->\r\n  <!--    <td *matCellDef=\"let element\" >loading....</td>-->\r\n  <!--  </ng-container>-->\r\n  <!--{{this.rows | json}}-->\r\n  \r\n<!-- <app-no-data-placeholder *ngIf=\"noData && !loading\" [noDataPlaceholder]=\"noDataObj\"></app-no-data-placeholder> -->\r\n\r\n  <mat-paginator [pageSize]=\"10\" [length]=\"totalRecords\" (page)=\"onPageChange($event)\" \r\n    [pageSizeOptions]=\"[5, 10, 25, 100]\" aria-label=\"Select page of users\"></mat-paginator>\r\n  <!-- style-paginator -->\r\n  <!-- showFirstLastButtons -->\r\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i1$5.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i2.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i2.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i2.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i2.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "component", type: RepeatedListComponent, selector: "app-repeated-list", inputs: ["listOfItems", "type"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: NgSwitchDefault, selector: "[ngSwitchDefault]" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: TableListComponent, isStandalone: true, selector: "app-table-list", inputs: { columns: "columns", columnsConfig: "columnsConfig", rows: "rows", actions: "actions", totalRecords: "totalRecords", className: "className" }, outputs: { pageChanged: "pageChanged", buttonAction: "buttonAction", emitDataRow: "emitDataRow" }, usesInheritance: true, ngImport: i0, template: "<div class=\"overflow-auto\">\r\n  <!-- #table  (scroll)=\"onPageChange($event)\" -->\r\n  <ng-container >\r\n    <!-- (matSortChange)=\"sortData($event)\" -->\r\n    <table mat-table [dataSource]=\"dataSource\" class=\"primary-table {{className}}\" matSort >\r\n      <ng-container *ngFor=\"let column of columns; let i = index;\">\r\n        <ng-container [matColumnDef]=\"column\">\r\n          <th mat-header-cell *matHeaderCellDef [ngClass]=\"{'last-column' : columnsConfig[i].type === 'actions', 'sortArrow': columnsConfig[i]?.sortName?.length }\" mat-sort-header>\r\n            {{i18n.translate(columnsConfig[i].label)}} </th>\r\n  \r\n          <td mat-cell  [ngClass]=\"{'account-disabled': element?.user?.disabledCleanUp===true}\"  *matCellDef=\"let element\">\r\n            <ng-container [ngSwitch]=\"columnsConfig[i].type\" *ngIf=\"rows.length\">\r\n              <a [ngClass]=\"columnsConfig[i].type\" [href]=\"element[column]\" *ngSwitchCase=\"'link'\">\r\n                {{ element[column] }}\r\n              </a>\r\n  \r\n              <a [ngClass]=\"columnsConfig[i].type\" [routerLink]=\"[element.id]\" [href]=\"element[column]\"\r\n                *ngSwitchCase=\"'rout'\">\r\n                {{ element[column] }}\r\n              </a>\r\n  \r\n              <span class=\"d-inline-flex align-items-center\" [ngClass]=\"columnsConfig[i].type\" *ngSwitchCase=\"'date'\">\r\n                <span class=\"sfi sfi-clock text-color-coral\" *ngIf=\"!loading\"></span>\r\n                <span class=\"mx-2\">\r\n                  <!-- {{ element?.Date.from }}\r\n                  <ng-container *ngIf=\"element?.Date.to\">\r\n                  : {{ element?.Date.to }}\r\n                </ng-container> -->\r\n                  {{ element[column] | date: 'dd/MM/YYYY' }}\r\n                </span>\r\n              </span>\r\n  \r\n              <div class=\"d-inline-flex align-items-center\" [ngClass]=\"columnsConfig[i].type\" *ngSwitchCase=\"'sla'\">\r\n                <app-sla [value]=\"element?.SLA.value\" [maxValue]=\"element?.SLA.max\" [canvasScale]=\"45\"\r\n                  [outerLineColor]=\"getSlaColor(element?.SLA.value, element?.SLA.max)\"></app-sla>\r\n              </div>\r\n  \r\n              <div class=\"img-card table-img\" [ngClass]=\"columnsConfig[i].type\" *ngSwitchCase=\"'image'\">\r\n                <img [src]=\"element?.image\" alt=\"\">\r\n              </div>\r\n  \r\n              <span class=\"{{ element[column].type }}\" [ngClass]=\"columnsConfig[i].type\" *ngSwitchCase=\"'status'\">\r\n                {{ element[column].label }}\r\n              </span>\r\n  \r\n  \r\n              <div class=\"d-flex mx-n1\" *ngSwitchCase=\"'RequestType'\">\r\n                <div class=\"request-type mx-1 {{item.status}}\" *ngFor=\"let item of element?.RequestType\">\r\n                  {{ item.label }}\r\n                  <span class=\"mx-1\" *ngIf=\"item.status === 'need-action'\"></span>\r\n                  <span class=\"sfi sfi-info \" *ngIf=\"item.status === 'need-action'\"></span>\r\n                </div>\r\n              </div>\r\n  \r\n  \r\n              <span class=\"{{ element[column].type }} {{ element[column] ? 'text-color-coral underline' : '' }}\"\r\n                [ngClass]=\"columnsConfig[i].type\" *ngSwitchCase=\"'number'\">\r\n                {{ element[column] ? element[column] : '-' }}\r\n              </span>\r\n  \r\n              <div class=\"text-nowrap d-flex align-items-center\" [ngClass]=\"columnsConfig[i].type\"\r\n                *ngSwitchCase=\"'group'\">\r\n                <span>{{element?.Group.groupName}}</span>\r\n                <span class=\"mx-2\"></span>\r\n                <app-repeated-list type=\"users-avatar\" [listOfItems]=\"element?.Group.users\"></app-repeated-list>\r\n              </div>\r\n  \r\n              <div class=\"d-flex align-items-center gap-2\" [ngClass]=\"columnsConfig[i].type\" *ngSwitchCase=\"'user'\">\r\n                <span class=\"img-card circled-img small\" *ngIf=\"!loading\">\r\n                  <img src=\"{{'data:image/png;base64,' + element?.user?.personalPhoto}}\"\r\n                    onerror=\"this.onerror=null;this.src='assets/images/user.svg';\" alt=\"\">\r\n                </span>\r\n                <div class=\"d-flex flex-column\">\r\n                  <span class=\"font-14 font-weight-medium\">{{element?.user?.name}}</span>\r\n                  <span class=\"font-12 font-weight-normal text-color-dark-gray mt-1\">{{element?.user?.email}}</span>\r\n                </div>\r\n              </div>\r\n  \r\n  \r\n              <div class=\"delegate d-flex align-items-center\" [ngClass]=\"columnsConfig[i].type\"\r\n                *ngSwitchCase=\"'assigned'\">\r\n                <div class=\"img-card x-small circled-img\">\r\n                  <img [src]=\"element?.AssignedTo.image\" alt=\"\">\r\n                </div>\r\n                <span class=\"mx-1\"></span>\r\n                <span class=\"font-14 font-weight-medium text-color-onyx\">{{element?.AssignedTo.name}}</span>\r\n                <span class=\"sfi sfi-close text-color-coral\"></span>\r\n              </div>\r\n  \r\n  \r\n              <ng-container *ngSwitchCase=\"'statusAction'\">\r\n                <div class=\"table-action\">\r\n  \r\n                  <div class=\"count-down mx-n1\" *ngIf=\"element[column] === 'need-action'\">\r\n                    <div class=\"item mx-1\">\r\n                      <span class=\"font-12 font-weight-medium text-color-onyx d-block\">01</span>\r\n                      <span class=\"font-8 font-weight-light text-color-onyx d-block\">Days</span>\r\n                    </div>\r\n                    <div class=\"item mx-1\">\r\n                      <span class=\"font-12 font-weight-medium text-color-onyx d-block\">18</span>\r\n                      <span class=\"font-8 font-weight-light text-color-onyx d-block\">Hours</span>\r\n                    </div>\r\n                    <div class=\"item mx-1\">\r\n                      <span class=\"font-12 font-weight-medium text-color-onyx d-block\">44</span>\r\n                      <span class=\"font-8 font-weight-light text-color-onyx d-block\">Mins</span>\r\n                    </div>\r\n                  </div>\r\n  \r\n                  <div class=\"d-flex align-items-center\" *ngIf=\"element[column] === 'approved'\">\r\n                    <span class=\"status approved\">\r\n                      Approved\r\n                    </span>\r\n                  </div>\r\n  \r\n                  <div class=\"d-flex align-items-center\" *ngIf=\"element[column] === 'sent-back'\">\r\n                    <span class=\"status rejected\">\r\n                      Sent Back\r\n                    </span>\r\n                    <span class=\"mx-2\"></span>\r\n                    <button mat-stroked-button class=\"btn button-primary square br-w-1 font-14 font-weight-medium\"\r\n                      (click)=\"sentBack()\">\r\n                      <span class=\"sfi sfi-chat-o\"></span>\r\n                    </button>\r\n                  </div>\r\n  \r\n                  <div class=\"d-flex align-items-center\" *ngIf=\"element[column] === 'pending'\">\r\n                    <span class=\"status pending\">\r\n                      Pending\r\n                    </span>\r\n                    <span class=\"mx-2\"></span>\r\n  \r\n                    <div class=\"d-flex align-items-center mx-n1\">\r\n                      <div class=\"img-card circled-img x-small mx-1\">\r\n                        <img [src]=\"element?.pendingWith.image\" alt=\"\">\r\n                      </div>\r\n  \r\n                      <div class=\"d-flex flex-column mx-1\">\r\n                        <span class=\"font-8 font-weight-medium text-color-yellow text-nowrap\">Pending With</span>\r\n                        <span class=\"font-11 font-weight-medium text-nowrap\">{{element?.pendingWith.name}}</span>\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n  \r\n  \r\n                </div>\r\n              </ng-container>\r\n  \r\n  \r\n              <ng-container *ngSwitchCase=\"'actions'\">\r\n  \r\n                <div class=\"d-flex justify-content-between mx-n2\">\r\n                  <ng-container *ngFor=\"let action of element[column]\">\r\n  \r\n                    <div class=\"flex-grow-1\">\r\n                      <ng-container *ngIf=\"action.type.buttonType === 'stroked'\">\r\n                        <button mat-stroked-button (click)=\"buttonClicked(element,action.fn, $event)\"\r\n                          class=\"btn button-{{action.type.buttonClass}} mx-2\">\r\n                          {{action.label}}\r\n                        </button>\r\n                      </ng-container>\r\n  \r\n                      <ng-container *ngIf=\"action.type.buttonType === 'flat'\">\r\n                        <button mat-flat-button (click)=\"buttonClicked(element,action.fn, $event)\"\r\n                          class=\"btn button-{{action.type.buttonClass}} mx-2\">\r\n                          {{action.label}}\r\n                        </button>\r\n                      </ng-container>\r\n  \r\n                      <ng-container *ngIf=\"action.type.buttonType === 'icon'\">\r\n                        <button mat-icon-button (click)=\"buttonClicked(element,action.fn, $event)\"\r\n                          class=\"btn button-{{action.type.buttonClass}} mx-2\">\r\n                          <span class=\"sfi sfi-{{action.type.icon}}\"></span>\r\n                        </button>\r\n                      </ng-container>\r\n                    </div>\r\n  \r\n                    <ng-container *ngIf=\"action.type.buttonType === 'all'\">\r\n                      <button mat-icon-button class=\"btn button-transparent square medium mx-2 text-end\"\r\n                        [matMenuTriggerFor]=\"menuAction\" (click)=\"$event.stopPropagation()\">\r\n                        <span class=\"sfi sfi-dots text-color-onyx\"></span>\r\n                      </button>\r\n                      <mat-menu #menuAction=\"matMenu\" xPosition=\"before\" class=\"actions-menu\">\r\n                        <button *ngIf=\"!element?.user?.email && element?.user?.disabledCleanUp!==true\" mat-menu-item class=\"text-color-onyx font-12\"\r\n                          (click)=\"buttonClicked(element,'CreateEmail', $event)\">\r\n                          {{i18n.translate('createEmail')}} \r\n                        </button>\r\n                        <button *ngIf=\"element?.user?.email && element?.user?.enabled==='true'\" mat-menu-item class=\"text-color-red font-12\"\r\n                          (click)=\"buttonClicked(element,'DisableEmail', $event)\">\r\n                          {{ i18n.translate('disableEmail')}}\r\n                        </button>\r\n                        <button *ngIf=\"element?.user?.email  && element?.user?.disabledCleanUp===true\" mat-menu-item class=\"text-color-red font-12\"\r\n                          (click)=\"buttonClicked(element,'EnableEmail', $event)\">\r\n                          {{ i18n.translate('enableEmail')}}\r\n                        </button>\r\n                        <button *ngIf=\"element?.user!==null && element?.user?.disabledCleanUp!==true\" mat-menu-item class=\"text-color-onyx font-12\"\r\n                          (click)=\"buttonClicked(element,'CreateEntryPermission', $event)\">\r\n                          {{ i18n.translate('createCEP')}}\r\n                        </button>\r\n                        <!-- <button  *ngIf=\"!element?.user?.email\" mat-menu-item class=\"text-color-red font-12\"\r\n                          (click)=\"buttonClicked(element,'DisableEntryPermission', $event)\">\r\n                          {{i18n.translate('disableEntryPermission')}}\r\n                        </button> -->\r\n                        <button  *ngIf=\"!element?.user?.email && element?.user?.disabledCleanUp!==true\" mat-menu-item class=\"text-color-red font-12\"\r\n                        (click)=\"buttonClicked(element,'DeleteAccount', $event)\">\r\n                        {{i18n.translate('deleteAccount')}}\r\n                      </button>\r\n\r\n                        <button *ngIf=\"element?.user?.email && element?.user?.disabledCleanUp!==true\" [disabled]=\"!element?.mailExtensionAllowed\" mat-menu-item class=\"text-color-onyx font-12\"\r\n                          (click)=\"buttonClicked(element,'ExtendAccount', $event)\">\r\n                          {{ i18n.translate('extendAccount')}}\r\n                        </button>\r\n                        <button mat-menu-item class=\"text-color-onyx font-12\" *ngIf=\"element?.user?.disabledCleanUp!==true\" (click)=\"buttonClicked(element,'update', $event)\">\r\n                          {{ i18n.translate('updateEmploymentInformation')}}\r\n                        </button>\r\n                      </mat-menu>\r\n                    </ng-container>\r\n                  </ng-container>\r\n                </div>\r\n              </ng-container>\r\n  \r\n              <span class=\"text-nowrap\" [ngClass]=\"columnsConfig[i].type\" *ngSwitchDefault>\r\n                {{ element[column] }}\r\n              </span>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"loading\">\r\n              <span class=\" d-block loading-bg\"></span>\r\n            </ng-container>\r\n  \r\n          </td>\r\n  \r\n  \r\n        </ng-container>\r\n      </ng-container>\r\n  \r\n      <tr mat-header-row  *matHeaderRowDef=\"columns\"></tr>\r\n      <tr mat-row *matRowDef=\"let row; columns: columns;\" class=\"cursor-pointer\" (click)=\"selectedRow(row)\"></tr>\r\n    </table>\r\n  </ng-container>\r\n  <!-- <ng-container *ngIf=\"loading\">\r\n    <span>loading...</span>\r\n  </ng-container> -->\r\n  <!--  <ng-container *ngIf=\"loading\">-->\r\n  <!--    <td *matCellDef=\"let element\" >loading....</td>-->\r\n  <!--  </ng-container>-->\r\n  <!--{{this.rows | json}}-->\r\n  \r\n<!-- <app-no-data-placeholder *ngIf=\"noData && !loading\" [noDataPlaceholder]=\"noDataObj\"></app-no-data-placeholder> -->\r\n\r\n  <mat-paginator [pageSize]=\"10\" [length]=\"totalRecords\" (page)=\"onPageChange($event)\" \r\n    [pageSizeOptions]=\"[5, 10, 25, 100]\" aria-label=\"Select page of users\"></mat-paginator>\r\n  <!-- style-paginator -->\r\n  <!-- showFirstLastButtons -->\r\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i1$5.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i2$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i2$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i2$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i2$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i2$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i2$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i2$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "component", type: RepeatedListComponent, selector: "app-repeated-list", inputs: ["listOfItems", "type"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: NgSwitchDefault, selector: "[ngSwitchDefault]" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: TableListComponent, decorators: [{
             type: Component,
@@ -4811,7 +4835,7 @@ class RadioComponent extends BaseComponent {
         this.emitedValue.emit(this.field);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: RadioComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: RadioComponent, isStandalone: true, selector: "app-radio", usesInheritance: true, ngImport: i0, template: "<mat-radio-group aria-label=\"Select an option\" [(ngModel)]=\"value\">\r\n\r\n  <mat-radio-button class=\"m-3\" [disabled]=\"isReadOnly || disabled\" id=\"{{name}}{{randomID}}\"\r\n    name=\"{{name}}{{randomID}}\" (change)=\"valueChange($event)\" [checked]=\"field\">\r\n    <span class=\"fs-12 fw-medium fc-onyx\">\r\n      {{isReadOnly ? labelTextReadMode : labelTextWriteMode}}\r\n    </span>\r\n  </mat-radio-button>\r\n\r\n</mat-radio-group>\r\n\r\n<!-- <mat-radio-group aria-label=\"Select an option\">\r\n  <mat-radio-button value=\"1\">Option 1</mat-radio-button>\r\n  <mat-radio-button value=\"2\">Option 2</mat-radio-button>\r\n</mat-radio-group> -->\r\n", styles: [""], dependencies: [{ kind: "component", type: MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "directive", type: MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: RadioComponent, isStandalone: true, selector: "app-radio", usesInheritance: true, ngImport: i0, template: "<mat-radio-group aria-label=\"Select an option\" [(ngModel)]=\"value\">\r\n\r\n  <mat-radio-button class=\"m-3\" [disabled]=\"isReadOnly || disabled\" id=\"{{name}}{{randomID}}\"\r\n    name=\"{{name}}{{randomID}}\" (change)=\"valueChange($event)\" [checked]=\"field\">\r\n    <span class=\"fs-12 fw-medium fc-onyx\">\r\n      {{isReadOnly ? labelTextReadMode : labelTextWriteMode}}\r\n    </span>\r\n  </mat-radio-button>\r\n\r\n</mat-radio-group>\r\n\r\n<!-- <mat-radio-group aria-label=\"Select an option\">\r\n  <mat-radio-button value=\"1\">Option 1</mat-radio-button>\r\n  <mat-radio-button value=\"2\">Option 2</mat-radio-button>\r\n</mat-radio-group> -->\r\n", styles: [""], dependencies: [{ kind: "component", type: MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "directive", type: MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: RadioComponent, decorators: [{
             type: Component,
@@ -4822,23 +4846,196 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                     ], template: "<mat-radio-group aria-label=\"Select an option\" [(ngModel)]=\"value\">\r\n\r\n  <mat-radio-button class=\"m-3\" [disabled]=\"isReadOnly || disabled\" id=\"{{name}}{{randomID}}\"\r\n    name=\"{{name}}{{randomID}}\" (change)=\"valueChange($event)\" [checked]=\"field\">\r\n    <span class=\"fs-12 fw-medium fc-onyx\">\r\n      {{isReadOnly ? labelTextReadMode : labelTextWriteMode}}\r\n    </span>\r\n  </mat-radio-button>\r\n\r\n</mat-radio-group>\r\n\r\n<!-- <mat-radio-group aria-label=\"Select an option\">\r\n  <mat-radio-button value=\"1\">Option 1</mat-radio-button>\r\n  <mat-radio-button value=\"2\">Option 2</mat-radio-button>\r\n</mat-radio-group> -->\r\n" }]
         }] });
 
+class ApprovalsComponent {
+    sidenavService;
+    i18n;
+    coreService;
+    constructor(sidenavService, i18n, coreService) {
+        this.sidenavService = sidenavService;
+        this.i18n = i18n;
+        this.coreService = coreService;
+    }
+    closeSidenav() {
+        this.sidenavService.publish('close', null);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ApprovalsComponent, deps: [{ token: SidenavService }, { token: CoreI18nService }, { token: CoreService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: ApprovalsComponent, isStandalone: true, selector: "app-approvals", ngImport: i0, template: "<section class=\"main-sidenav\">\r\n\r\n  <div class=\"sidenav-title\">\r\n    <h3>{{ i18n.translate('approvalcycle') }}</h3>\r\n\r\n    <ds-button (click)=\"closeSidenav()\" icon>\r\n      <ds-icon icon=\"close\" class=\"fs-20 fc-black\"></ds-icon>\r\n    </ds-button>\r\n\r\n  </div>\r\n  <div class=\"sidenav-body p-4\">\r\n    <ds-approvals *ngIf=\"coreService.approvals\" approvalsData=\"{{coreService.approvals}}\"></ds-approvals>\r\n    <ds-message *ngIf=\"!coreService.approvals\" label=\"{{i18n.translate('NoData2')}}\"></ds-message>\r\n  </div>\r\n</section>\r\n", styles: [""], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ApprovalsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-approvals', standalone: true, schemas: [CUSTOM_ELEMENTS_SCHEMA], imports: [
+                        NgIf
+                    ], template: "<section class=\"main-sidenav\">\r\n\r\n  <div class=\"sidenav-title\">\r\n    <h3>{{ i18n.translate('approvalcycle') }}</h3>\r\n\r\n    <ds-button (click)=\"closeSidenav()\" icon>\r\n      <ds-icon icon=\"close\" class=\"fs-20 fc-black\"></ds-icon>\r\n    </ds-button>\r\n\r\n  </div>\r\n  <div class=\"sidenav-body p-4\">\r\n    <ds-approvals *ngIf=\"coreService.approvals\" approvalsData=\"{{coreService.approvals}}\"></ds-approvals>\r\n    <ds-message *ngIf=\"!coreService.approvals\" label=\"{{i18n.translate('NoData2')}}\"></ds-message>\r\n  </div>\r\n</section>\r\n" }]
+        }], ctorParameters: () => [{ type: SidenavService }, { type: CoreI18nService }, { type: CoreService }] });
+
+class ApprovalsWorkflowComponent {
+    i18n;
+    sidenavService;
+    coreService;
+    toasterService;
+    section;
+    form;
+    approvals = [];
+    loading = false;
+    constructor(i18n, sidenavService, coreService, toasterService) {
+        this.i18n = i18n;
+        this.sidenavService = sidenavService;
+        this.coreService = coreService;
+        this.toasterService = toasterService;
+    }
+    getApproves() {
+        if (!this.loading) {
+            this.approvals = [];
+            this.loading = true;
+            this.coreService.prespectiveApprovers(this.section.body.details).subscribe((response) => {
+                this.loading = false;
+                if (response) {
+                    const resultData = [];
+                    for (let index = 0; index < response['approvals'].length; index++) {
+                        const element = response['approvals'][index];
+                        const stageDetails = this.form.sections.find((stage) => {
+                            return stage.id == ((element?.role)?.toLowerCase() + 'Approval');
+                        });
+                        const obj = {
+                            id: 1,
+                            name: element.value,
+                            // title: element.role ? this.i18n.translate((element?.role).toLowerCase() + 'Role') : '',
+                            title: element.key,
+                            image: '/group/i-gate/wm-bpm/forms/-/proxy/portrait?email=' + element.key,
+                            status: stageDetails ? this.statusClass(stageDetails.header.status) : '',
+                            statusLabel: stageDetails ? this.statusClass(stageDetails.header.status) : ''
+                            // status: '',
+                            // statusLabel: ''
+                        };
+                        resultData.push(obj);
+                    }
+                    this.approvals = resultData;
+                    this.showProspectiveApprovals();
+                }
+            }, (err) => {
+                this.loading = false;
+                err?.error?.meta?.messages?.forEach((msg) => {
+                    this.toasterService.error(msg.message);
+                });
+            });
+        }
+    }
+    statusClass(status) {
+        if (!status) {
+            return 'success';
+        }
+        else {
+            if (status === FORM_STATUS_REJECTED || status === FORM_STATUS_CANCELLED
+                || status?.toLowerCase().includes('deny')
+                || status?.toLowerCase().includes('reject')
+                || status?.toLowerCase() === 'reject' || status?.toLowerCase() === 'unsatisfied' || status?.toLowerCase() === 'cancel') {
+                return 'danger';
+            }
+            else if (status === FORM_STATUS_PENDING || status?.toLowerCase() === 'pending') {
+                return 'warning';
+            }
+            else {
+                return 'success';
+            }
+        }
+    }
+    showProspectiveApprovals() {
+        this.coreService.approvals = JSON.stringify(this.approvals);
+        this.sidenavService.publish('open', ApprovalsComponent);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ApprovalsWorkflowComponent, deps: [{ token: CoreI18nService }, { token: SidenavService }, { token: CoreService }, { token: i2$2.ToastrService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: ApprovalsWorkflowComponent, isStandalone: true, selector: "lib-approvals-workflow", inputs: { section: "section", form: "form" }, ngImport: i0, template: "<ds-button\r\n  color=\"white\" shape=\"text\" square size=\"small\"\r\n  (click)=\"getApproves()\">\r\n  <slot name=\"prefix\">\r\n    @if (loading) {\r\n      <ds-icon class=\"sfi sfi-spinner d-inline-block spin fc-coral fs-30-imp\"></ds-icon>\r\n    } @else {\r\n      <ds-icon icon=\"workflow\" class=\"fs-24\"></ds-icon>\r\n    }\r\n  </slot>\r\n</ds-button>\r\n", styles: ["::ng-deep .sat-popover-container.sat-popover-before .default-popover:before{display:none}\n"], dependencies: [{ kind: "ngmodule", type: SatPopoverModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ApprovalsWorkflowComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-approvals-workflow', standalone: true, imports: [
+                        SatPopoverModule,
+                        NgIf
+                    ], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<ds-button\r\n  color=\"white\" shape=\"text\" square size=\"small\"\r\n  (click)=\"getApproves()\">\r\n  <slot name=\"prefix\">\r\n    @if (loading) {\r\n      <ds-icon class=\"sfi sfi-spinner d-inline-block spin fc-coral fs-30-imp\"></ds-icon>\r\n    } @else {\r\n      <ds-icon icon=\"workflow\" class=\"fs-24\"></ds-icon>\r\n    }\r\n  </slot>\r\n</ds-button>\r\n", styles: ["::ng-deep .sat-popover-container.sat-popover-before .default-popover:before{display:none}\n"] }]
+        }], ctorParameters: () => [{ type: CoreI18nService }, { type: SidenavService }, { type: CoreService }, { type: i2$2.ToastrService }], propDecorators: { section: [{
+                type: Input
+            }], form: [{
+                type: Input
+            }] } });
+
 class ActionButtonsComponent {
     i18n;
     actionStateService;
+    coreService;
+    dialog;
+    toasterService;
+    cdRef;
+    sidenavService;
     lovOptions;
     lovType;
+    fieldsForm;
+    form;
+    section;
+    sections;
+    showApprovalCycle = true;
+    customCall = false;
+    resetFormEmit = new EventEmitter();
+    customCallEmit = new EventEmitter();
     actionStates;
-    constructor(i18n, actionStateService) {
+    isSubmitting = {};
+    submittingForm;
+    constructor(i18n, actionStateService, coreService, dialog, toasterService, cdRef, sidenavService) {
         this.i18n = i18n;
         this.actionStateService = actionStateService;
+        this.coreService = coreService;
+        this.dialog = dialog;
+        this.toasterService = toasterService;
+        this.cdRef = cdRef;
+        this.sidenavService = sidenavService;
         this.actionStateService.actionStates$.subscribe(states => this.actionStates = states);
     }
+    ngAfterViewInit() {
+        this.lovOptions?.forEach((item) => {
+            this.isSubmitting[item.value] = false;
+        });
+        this.cdRef.detectChanges();
+    }
     resetForm() {
+        this.resetFormEmit.emit();
     }
     onSubmit(action) {
+        if (this.customCall) {
+            this.customCallEmit.emit(action);
+        }
+        else {
+            this.submitForm(action, this.section);
+        }
     }
-    validForm(action) {
-        return true;
+    submitForm(action, section) {
+        const lastSection = this.sections[this.sections.length - 1];
+        if (lastSection.body.details.decision) {
+            lastSection.body.details.decision = { key: action };
+        }
+        this.isSubmitting[action] = true;
+        this.submittingForm = true;
+        this.coreService.submitForm(section, action).subscribe((response) => {
+            if (response) {
+                this.isSubmitting[action] = false;
+                this.success(response);
+            }
+        }, (err) => {
+            err?.error?.meta?.messages?.forEach((msg) => {
+                this.submittingForm = false;
+                this.isSubmitting[action] = false;
+                this.toasterService.error(msg.message);
+            });
+        });
+    }
+    success(response) {
+        console.log('success', response);
+        const dialogRef = this.dialog.open(SubmitDialogComponent, {
+            data: response,
+            panelClass: ['main-popup', 'confirm-dialog'],
+            scrollStrategy: new NoopScrollStrategy(),
+        });
+        dialogRef.afterClosed().subscribe(() => {
+            window.location.reload();
+        });
     }
     buttonShape(item) {
         if (item?.value === FORM_STATUS_REJECT || item?.value === FORM_STATUS_CANCEL || item?.value === FORM_STATUS_SEND_BACK) {
@@ -4852,8 +5049,8 @@ class ActionButtonsComponent {
         }
         return '';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ActionButtonsComponent, deps: [{ token: CoreI18nService }, { token: ActionStateService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: ActionButtonsComponent, isStandalone: true, selector: "lib-action-buttons", inputs: { lovOptions: "lovOptions", lovType: "lovType" }, ngImport: i0, template: "<div class=\"mt-4\">\r\n  @if (lovType === 'button') {\r\n    <div class=\"d-flex align-items-center gap-3\">\r\n      <ds-button shape=\"text\" color=\"red\" (click)=\"resetForm()\">\r\n        <span class=\"fs-16 fw-medium\">{{ i18n.translate('reset') }}</span>\r\n      </ds-button>\r\n      <div class=\"d-flex flex-wrap align-items-center flex-grow-1 flex-row-reverse gap-3\">\r\n        @for (item of lovOptions; track $index) {\r\n          <ds-button\r\n            [ngClass]=\"{'disabled': !actionStates[item.value]}\"\r\n            shape=\"{{ buttonShape(item) }}\"\r\n            color=\"{{ buttonColor(item) }}\"\r\n            (click)=\"onSubmit(item?.value)\">\r\n            {{ item?.['description'] }}\r\n          </ds-button>\r\n        }\r\n      </div>\r\n    </div>\r\n  } @else {\r\n    <div class=\"d-flex flex-wrap align-items-center flex-grow-1 justify-content-end gap-3\">\r\n      <ds-button shape=\"text\" color=\"red\" (click)=\"resetForm()\">\r\n        <span class=\"fs-16 fw-medium\">{{ i18n.translate('reset') }}</span>\r\n      </ds-button>\r\n      <ds-button\r\n        [ngClass]=\"{'disabled': !validForm('SUBMIT')}\"\r\n        (click)=\"onSubmit('SUBMIT')\">\r\n        {{ i18n.translate('submit') }}\r\n      </ds-button>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ActionButtonsComponent, deps: [{ token: CoreI18nService }, { token: ActionStateService }, { token: CoreService }, { token: i1$1.MatDialog }, { token: i2$2.ToastrService }, { token: i0.ChangeDetectorRef }, { token: SidenavService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: ActionButtonsComponent, isStandalone: true, selector: "lib-action-buttons", inputs: { lovOptions: "lovOptions", lovType: "lovType", fieldsForm: "fieldsForm", form: "form", section: "section", sections: "sections", showApprovalCycle: "showApprovalCycle", customCall: "customCall" }, outputs: { resetFormEmit: "resetFormEmit", customCallEmit: "customCallEmit" }, ngImport: i0, template: "<div class=\"mt-4\">\r\n  @if (lovType === 'button') {\r\n    <div class=\"d-flex align-items-center gap-3\">\r\n      <ds-button shape=\"text\" color=\"red\" (click)=\"resetForm()\">\r\n        <span class=\"fs-16 fw-medium\">{{ i18n.translate('reset') }}</span>\r\n      </ds-button>\r\n      @if (form?.sections?.length == 1 && showApprovalCycle) {\r\n        <lib-approvals-workflow [section]=\"section\" [form]=\"form\"></lib-approvals-workflow>\r\n      }\r\n      <div class=\"d-flex flex-wrap align-items-center flex-grow-1 flex-row-reverse gap-3\">\r\n        @for (item of lovOptions; track $index) {\r\n          <ds-button\r\n            loading=\"{{isSubmitting[item.value]}}\"\r\n            [ngClass]=\"{'disabled': !actionStates[item.value] || submittingForm}\"\r\n            shape=\"{{ buttonShape(item) }}\"\r\n            color=\"{{ buttonColor(item) }}\"\r\n            (click)=\"onSubmit(item?.value)\">\r\n            {{ item?.['description'] }}\r\n          </ds-button>\r\n        }\r\n      </div>\r\n    </div>\r\n  } @else {\r\n    <div class=\"d-flex flex-wrap align-items-center flex-grow-1 justify-content-end gap-3\">\r\n      <ds-button shape=\"text\" color=\"red\" (click)=\"resetForm()\">\r\n        <span class=\"fs-16 fw-medium\">{{ i18n.translate('reset') }}</span>\r\n      </ds-button>\r\n      @if (form?.sections?.length == 1 && showApprovalCycle) {\r\n        <lib-approvals-workflow [section]=\"section\" [form]=\"form\"></lib-approvals-workflow>\r\n      }\r\n      <ds-button\r\n        [ngClass]=\"{'disabled': !actionStates['SUBMIT'] || submittingForm}\"\r\n        loading=\"{{isSubmitting['SUBMIT']}}\"\r\n        (click)=\"onSubmit('SUBMIT')\">\r\n        {{ i18n.translate('submit') }}\r\n      </ds-button>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ApprovalsWorkflowComponent, selector: "lib-approvals-workflow", inputs: ["section", "form"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ActionButtonsComponent, decorators: [{
             type: Component,
@@ -4861,12 +5058,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                         NgClass,
                         InputComponent,
                         NgIf,
-                        NgForOf
-                    ], template: "<div class=\"mt-4\">\r\n  @if (lovType === 'button') {\r\n    <div class=\"d-flex align-items-center gap-3\">\r\n      <ds-button shape=\"text\" color=\"red\" (click)=\"resetForm()\">\r\n        <span class=\"fs-16 fw-medium\">{{ i18n.translate('reset') }}</span>\r\n      </ds-button>\r\n      <div class=\"d-flex flex-wrap align-items-center flex-grow-1 flex-row-reverse gap-3\">\r\n        @for (item of lovOptions; track $index) {\r\n          <ds-button\r\n            [ngClass]=\"{'disabled': !actionStates[item.value]}\"\r\n            shape=\"{{ buttonShape(item) }}\"\r\n            color=\"{{ buttonColor(item) }}\"\r\n            (click)=\"onSubmit(item?.value)\">\r\n            {{ item?.['description'] }}\r\n          </ds-button>\r\n        }\r\n      </div>\r\n    </div>\r\n  } @else {\r\n    <div class=\"d-flex flex-wrap align-items-center flex-grow-1 justify-content-end gap-3\">\r\n      <ds-button shape=\"text\" color=\"red\" (click)=\"resetForm()\">\r\n        <span class=\"fs-16 fw-medium\">{{ i18n.translate('reset') }}</span>\r\n      </ds-button>\r\n      <ds-button\r\n        [ngClass]=\"{'disabled': !validForm('SUBMIT')}\"\r\n        (click)=\"onSubmit('SUBMIT')\">\r\n        {{ i18n.translate('submit') }}\r\n      </ds-button>\r\n    </div>\r\n  }\r\n</div>\r\n" }]
-        }], ctorParameters: () => [{ type: CoreI18nService }, { type: ActionStateService }], propDecorators: { lovOptions: [{
+                        NgForOf,
+                        ApprovalsWorkflowComponent
+                    ], template: "<div class=\"mt-4\">\r\n  @if (lovType === 'button') {\r\n    <div class=\"d-flex align-items-center gap-3\">\r\n      <ds-button shape=\"text\" color=\"red\" (click)=\"resetForm()\">\r\n        <span class=\"fs-16 fw-medium\">{{ i18n.translate('reset') }}</span>\r\n      </ds-button>\r\n      @if (form?.sections?.length == 1 && showApprovalCycle) {\r\n        <lib-approvals-workflow [section]=\"section\" [form]=\"form\"></lib-approvals-workflow>\r\n      }\r\n      <div class=\"d-flex flex-wrap align-items-center flex-grow-1 flex-row-reverse gap-3\">\r\n        @for (item of lovOptions; track $index) {\r\n          <ds-button\r\n            loading=\"{{isSubmitting[item.value]}}\"\r\n            [ngClass]=\"{'disabled': !actionStates[item.value] || submittingForm}\"\r\n            shape=\"{{ buttonShape(item) }}\"\r\n            color=\"{{ buttonColor(item) }}\"\r\n            (click)=\"onSubmit(item?.value)\">\r\n            {{ item?.['description'] }}\r\n          </ds-button>\r\n        }\r\n      </div>\r\n    </div>\r\n  } @else {\r\n    <div class=\"d-flex flex-wrap align-items-center flex-grow-1 justify-content-end gap-3\">\r\n      <ds-button shape=\"text\" color=\"red\" (click)=\"resetForm()\">\r\n        <span class=\"fs-16 fw-medium\">{{ i18n.translate('reset') }}</span>\r\n      </ds-button>\r\n      @if (form?.sections?.length == 1 && showApprovalCycle) {\r\n        <lib-approvals-workflow [section]=\"section\" [form]=\"form\"></lib-approvals-workflow>\r\n      }\r\n      <ds-button\r\n        [ngClass]=\"{'disabled': !actionStates['SUBMIT'] || submittingForm}\"\r\n        loading=\"{{isSubmitting['SUBMIT']}}\"\r\n        (click)=\"onSubmit('SUBMIT')\">\r\n        {{ i18n.translate('submit') }}\r\n      </ds-button>\r\n    </div>\r\n  }\r\n</div>\r\n" }]
+        }], ctorParameters: () => [{ type: CoreI18nService }, { type: ActionStateService }, { type: CoreService }, { type: i1$1.MatDialog }, { type: i2$2.ToastrService }, { type: i0.ChangeDetectorRef }, { type: SidenavService }], propDecorators: { lovOptions: [{
                 type: Input
             }], lovType: [{
                 type: Input
+            }], fieldsForm: [{
+                type: Input
+            }], form: [{
+                type: Input
+            }], section: [{
+                type: Input
+            }], sections: [{
+                type: Input
+            }], showApprovalCycle: [{
+                type: Input
+            }], customCall: [{
+                type: Input
+            }], resetFormEmit: [{
+                type: Output
+            }], customCallEmit: [{
+                type: Output
             }] } });
 
 class TermsConditionsComponent {
@@ -5392,52 +5606,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
 class ActivitiesComponent {
     sidenavService;
     i18n;
-    constructor(sidenavService, i18n) {
+    coreService;
+    parsedData;
+    constructor(sidenavService, i18n, coreService) {
         this.sidenavService = sidenavService;
         this.i18n = i18n;
-    }
-    attch(data) {
-        console.log(data.detail);
-        if (data.detail.type == 'download') {
-            this.downloadFile(data);
-        }
+        this.coreService = coreService;
+        this.parsedData = JSON.stringify(this.coreService.activities);
     }
     downloadFile(event) {
-        /*   const placeholder = event.target.nextElementSibling;
-           this.coreStateMachineService.dispatch(Constants.STATE_MACHINE_ACTION_LOAD_FILE, event.detail.value.id).then((responseObject: { body: any; }) => {
-             const fileInformation = responseObject.body;
-             const fileBlob = this.dataURItoBlob(fileInformation.fileContents);
-             const file = new File([fileBlob], fileInformation.fileName, { type: fileInformation.mimeType });
-             placeholder.href = URL.createObjectURL(file);
-             placeholder.download = file.name;
-             placeholder.click();
-           });*/
-    }
-    dataURItoBlob(dataURI) {
-        const byteString = atob(dataURI);
-        const arrayBuffer = new ArrayBuffer(byteString.length);
-        const int8Array = new Uint8Array(arrayBuffer);
-        for (let i = 0; i < byteString.length; i++) {
-            int8Array[i] = byteString.charCodeAt(i);
-        }
-        const blob = new Blob([arrayBuffer], { type: 'image/jpeg' });
-        return blob;
+        console.log(event.detail.value);
+        const placeholder = event.target.nextElementSibling;
+        this.coreService.loadFile(event.detail.value.id).then((responseObject) => {
+            const fileInformation = responseObject.body;
+            const fileBlob = this.coreService.dataURItoBlob(fileInformation.fileContents);
+            const file = new File([fileBlob], fileInformation.fileName, { type: fileInformation.mimeType });
+            placeholder.href = URL.createObjectURL(file);
+            placeholder.download = file.name;
+            placeholder.click();
+        });
     }
     closeSidenav() {
         this.sidenavService.publish('close', null);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ActivitiesComponent, deps: [{ token: SidenavService }, { token: CoreI18nService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: ActivitiesComponent, isStandalone: true, selector: "app-activities", ngImport: i0, template: "<section class=\"main-sidenav\">\r\n  <div class=\"sidenav-title\">\r\n    <h3>{{ i18n.translate('commentHistory') }}</h3>\r\n\r\n    <ds-button (click)=\"closeSidenav()\" icon>\r\n      <ds-icon icon=\"close\" class=\"fs-20 fc-black\"></ds-icon>\r\n    </ds-button>\r\n\r\n  </div>\r\n<!--  <div class=\"sidenav-body\">\r\n    <ds-activity-log activitiesData=\"{{profileRequestorService.activities}}\" readOnly (attachmentEvent)=\"attch($event)\">\r\n    </ds-activity-log>\r\n    <a href=\"\" class=\"hidden-placeholder\"></a>\r\n    <ds-message *ngIf=\"!profileRequestorService.activities\" label=\"{{i18n.translate('NoData1')}}\"></ds-message>\r\n  </div>-->\r\n</section>\r\n", styles: [""] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ActivitiesComponent, deps: [{ token: SidenavService }, { token: CoreI18nService }, { token: CoreService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: ActivitiesComponent, isStandalone: true, selector: "app-activities", ngImport: i0, template: "<section class=\"main-sidenav\">\r\n  <div class=\"sidenav-title\">\r\n    <h3>{{ i18n.translate('commentHistory') }}</h3>\r\n\r\n    <ds-button (click)=\"closeSidenav()\" icon>\r\n      <ds-icon icon=\"close\" class=\"fs-20 fc-black\"></ds-icon>\r\n    </ds-button>\r\n\r\n  </div>\r\n  <div class=\"sidenav-body\">\r\n    @if (coreService.activities) {\r\n      <ds-activity-log activitiesData=\"{{parsedData}}\" readOnly (downloadEvent)=\"downloadFile($event)\">\r\n      </ds-activity-log>\r\n    } @else {\r\n      <ds-message *ngIf=\"!coreService.activities\" label=\"{{i18n.translate('NoData1')}}\"></ds-message>\r\n    }\r\n  </div>\r\n</section>\r\n", styles: [""] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ActivitiesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-activities', standalone: true, imports: [
-                        NgIf
-                    ], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<section class=\"main-sidenav\">\r\n  <div class=\"sidenav-title\">\r\n    <h3>{{ i18n.translate('commentHistory') }}</h3>\r\n\r\n    <ds-button (click)=\"closeSidenav()\" icon>\r\n      <ds-icon icon=\"close\" class=\"fs-20 fc-black\"></ds-icon>\r\n    </ds-button>\r\n\r\n  </div>\r\n<!--  <div class=\"sidenav-body\">\r\n    <ds-activity-log activitiesData=\"{{profileRequestorService.activities}}\" readOnly (attachmentEvent)=\"attch($event)\">\r\n    </ds-activity-log>\r\n    <a href=\"\" class=\"hidden-placeholder\"></a>\r\n    <ds-message *ngIf=\"!profileRequestorService.activities\" label=\"{{i18n.translate('NoData1')}}\"></ds-message>\r\n  </div>-->\r\n</section>\r\n" }]
-        }], ctorParameters: () => [{ type: SidenavService }, { type: CoreI18nService }] });
+            args: [{ selector: 'app-activities', standalone: true, imports: [], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<section class=\"main-sidenav\">\r\n  <div class=\"sidenav-title\">\r\n    <h3>{{ i18n.translate('commentHistory') }}</h3>\r\n\r\n    <ds-button (click)=\"closeSidenav()\" icon>\r\n      <ds-icon icon=\"close\" class=\"fs-20 fc-black\"></ds-icon>\r\n    </ds-button>\r\n\r\n  </div>\r\n  <div class=\"sidenav-body\">\r\n    @if (coreService.activities) {\r\n      <ds-activity-log activitiesData=\"{{parsedData}}\" readOnly (downloadEvent)=\"downloadFile($event)\">\r\n      </ds-activity-log>\r\n    } @else {\r\n      <ds-message *ngIf=\"!coreService.activities\" label=\"{{i18n.translate('NoData1')}}\"></ds-message>\r\n    }\r\n  </div>\r\n</section>\r\n" }]
+        }], ctorParameters: () => [{ type: SidenavService }, { type: CoreI18nService }, { type: CoreService }] });
 
 class ServiceHeaderComponent {
     cdRef;
+    coreService;
     i18n;
     feedBackService;
     dialog;
@@ -5454,8 +5656,9 @@ class ServiceHeaderComponent {
     approvals = [];
     feedBackIcon = null;
     flagPriority;
-    constructor(cdRef, i18n, feedBackService, dialog, sidenavService) {
+    constructor(cdRef, coreService, i18n, feedBackService, dialog, sidenavService) {
         this.cdRef = cdRef;
+        this.coreService = coreService;
         this.i18n = i18n;
         this.feedBackService = feedBackService;
         this.dialog = dialog;
@@ -5472,17 +5675,17 @@ class ServiceHeaderComponent {
         for (let index = 0; index < comments.length; index++) {
             const item = comments[index];
             const obj = {
-                name: item.employeeName,
+                name: item['employeeName'],
                 title: item.jobPosition,
-                image: item.profilePicture,
-                date: moment(item.commentDate).locale('en-US').format('YYYY-MM-DD'),
-                time: moment(item.commentDate).locale('en-US').format('h:mm a'),
-                comment: item.commentBody,
-                attachments: item.attachment
+                image: item['profilePicture'],
+                date: moment(item['commentDate']).locale('en-US').format('YYYY-MM-DD'),
+                time: moment(item['commentDate']).locale('en-US').format('h:mm a'),
+                comment: item['commentBody'],
+                attachments: item['attachment']
             };
             resultData.push(obj);
         }
-        // this.profileRequesterService.activities = resultData;
+        this.coreService.activities = resultData;
         this.sidenavService.publish('open', ActivitiesComponent);
     }
     feedback() {
@@ -5545,10 +5748,10 @@ class ServiceHeaderComponent {
             this.approvals.push(obj);
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ServiceHeaderComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CoreI18nService }, { token: FeedBackService }, { token: i1$1.MatDialog }, { token: SidenavService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ServiceHeaderComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CoreService }, { token: CoreI18nService }, { token: FeedBackService }, { token: i1$1.MatDialog }, { token: SidenavService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: ServiceHeaderComponent, isStandalone: true, selector: "core-service-header", inputs: { form: "form", showHistory: "showHistory", isLoading: "isLoading", showApprovalHistory: "showApprovalHistory", approvalHistory: "approvalHistory", creationDate: "creationDate", formTitle: "formTitle", section: "section", serviceBrief: "serviceBrief" }, providers: [FeedBackService,
             { provide: MAT_DIALOG_DATA, useValue: {} },
-        ], ngImport: i0, template: "<ng-container *ngIf=\"!(form?.header?.status?.['key'] === 'NEW')\">\r\n  <div class=\"d-flex align-items-center justify-content-end gap-2 my-2\" *ngIf=\"!(form?.header?.status?.['key'] === 'NEW')\">\r\n\r\n    <!-- flag-->\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    <!-- print-->\r\n    <ng-content></ng-content>\r\n  </div>\r\n\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        <!-- title-->\r\n        <h1 class=\"fs-20 fs-md-16 fw-bold fc-black header-title m-0\">{{ formTitle }}\r\n          <ds-icon\r\n            icon=\"info\" class=\"fs-22 fc-dark-gray cursor-pointer\" *ngIf=\"serviceBrief.length\"\r\n            (click)=\"openFaq()\"></ds-icon>\r\n        </h1>\r\n        <div\r\n          class=\"header-user d-flex align-items-sm-center gap-2 mt-sm-1\"\r\n          *ngIf=\"form?.header?.status?.['key'] !== 'NEW' || isLoading\">\r\n          <ds-avatar\r\n            *ngIf=\"!isLoading\" image=\"{{form?.header?.requesterPhoto}}\" size=\"xx-small\"\r\n            class=\"d-inline-flex cursor-pointer\" (click)=\"showUserInfo()\"></ds-avatar>\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}\">{{ (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          <mat-divider *ngIf=\"creationDate\" class=\"divider circle mx-2 d-none d-sm-block\"></mat-divider>\r\n          <span *ngIf=\"creationDate\" class=\"fs-14\" [ngClass]=\"{'loading-bg loading-width': isLoading}\">{{ creationDate }}</span>\r\n        </div>\r\n      </div>\r\n      <!-- header-actions-->\r\n      <div\r\n        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        *ngIf=\"!(form?.header?.status?.['key'] === 'NEW')\">\r\n        <ds-status\r\n          *ngIf=\"form?.header?.status?.['key'] !== 'NEW' && !isLoading\"\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          <!-- feedback-->\r\n<!--            *ngIf=\"form?.inboxItem && (form?.inboxItem?.canRequestFeedback ==='true'|| form?.inboxItem?.hasFeedback==='true') && !isLoading\"-->\r\n        <!--  <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>-->\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-container *ngIf=\"showApprovalHistory\">\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\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        </div>\r\n      </div>\r\n    </div>\r\n\r\n  </header>\r\n</ng-container>\r\n<header\r\n  class=\"mb-4 mt-4 d-flex align-items-center justify-content-between align-items-end gap-2\"\r\n  *ngIf=\"(form?.header?.status?.['key'] === 'NEW')\">\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      {{ (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      <ds-icon icon=\"info\" class=\"fs-22 fc-dark-gray cursor-pointer\" *ngIf=\"serviceBrief.length\" (click)=\"openFaq()\">\r\n      </ds-icon>\r\n    </h1>\r\n  </section>\r\n\r\n</header>\r\n", styles: [":host ::ng-deep .filter-section .select-form-field{--input-bg: var(--white);--input-border: var(--white);--placeholder-fc: var(--black);--input-width: 85px;--input-fs: .75rem;--placeholder-fs: .75rem;--label-fs: .75rem;--label-fw: var(--font-regular);--input-height: var(--default-size-sm);font-size:var(--label-fs);box-shadow:var(--box-shadow)}:host ::ng-deep ds-button::part(base){--default-size-sm: 30px;--btn-radius: 3px}@media (max-width: 576px){:host ::ng-deep ds-button::part(base){--default-size-sm: 25px}}:host ::ng-deep .loading-width{min-width:100px;width:40px;flex-grow:1}:host ::ng-deep ds-avatar::part(base){--default-size: 20px}:host ::ng-deep .service-header{--service-header-icon-size: var(--default-size-lg);--header-border-color: var(--coral);display:flex;align-items:flex-start;border-top:5px solid var(--header-border-color);box-shadow:0 7px 10px rgba(var(--rgb-black),3%)}@media (max-width: 576px){:host ::ng-deep .service-header{border-radius:3px 3px 0 0}}:host ::ng-deep .service-header.loading{--header-border-color: var(--off-white)}:host ::ng-deep .service-header.warning{--header-border-color: var(--yellow)}:host ::ng-deep .service-header.success{--header-border-color: var(--green)}:host ::ng-deep .service-header.danger{--header-border-color: var(--red)}@media (max-width: 576px){:host ::ng-deep .service-header{--service-header-icon-size: var(--default-size-sm)}}:host ::ng-deep .service-header .service-header-icon{min-width:var(--service-header-icon-size);width:var(--service-header-icon-size);height:var(--service-header-icon-size);display:inline-flex;align-items:center;justify-content:center;padding:.75rem;border-radius:6px 6px 6px 0;background-color:rgba(var(--rgb-coral),.1)}@media (max-width: 576px){:host ::ng-deep .service-header .service-header-icon{padding:.5rem}}:host ::ng-deep .service-header .header-title{text-align:start}:host ::ng-deep .service-header .divider.circle{min-width:5px;width:5px;min-height:5px;height:5px;border-radius:50%;background-color:var(--dark-gray)}:host ::ng-deep .service-header .header-actions{align-items:flex-end;justify-content:flex-end}:host ::ng-deep .service-header .header-actions .has-comments{position:relative}:host ::ng-deep .service-header .header-actions .has-comments:before{content:\"\";min-width:8px;height:8px;border-radius:50%;background-color:var(--coral);position:absolute;top:-3px;right:-3px;z-index:1}[dir=rtl] :host ::ng-deep .service-header .header-actions .has-comments:before{right:auto;left:-3px}:host ::ng-deep .service-header .header-actions ds-button::part(base){--btn-color: var(--coral);--btn-bg-color: var(--light-gray);--btn-border-color: var(--light-gray)}:host ::ng-deep .service-header .header-user{color:var(--dark-gray)}:host ::ng-deep .history-button::part(base){background-color:var(--white);--btn-height: var(--default-size-sm);--btn-shadow: 0 7px 10px rgba(var(--rgb-black), 3%)}@media (max-width: 576px){:host ::ng-deep .history-button::part(base){--btn-height: 35px;--btn-width: 35px}}@media (max-width: 576px){:host ::ng-deep .history-button::part(label){display:none}}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SatPopoverModule }, { kind: "component", type: i1$3.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: i1$3.SatPopoverAnchorDirective, selector: "[satPopoverAnchor]", inputs: ["satPopoverAnchor"], exportAs: ["satPopoverAnchor"] }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }] });
+        ], ngImport: i0, template: "<ng-container *ngIf=\"!(form?.header?.status?.['key'] === 'NEW')\">\r\n  <div class=\"d-flex align-items-center justify-content-end gap-2 my-2\" *ngIf=\"!(form?.header?.status?.['key'] === 'NEW')\">\r\n\r\n    <!-- flag-->\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    <!-- print-->\r\n    <ng-content></ng-content>\r\n  </div>\r\n\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        <!-- title-->\r\n        <h1 class=\"fs-20 fs-md-16 fw-bold fc-black header-title m-0\">{{ formTitle }}\r\n          <ds-icon\r\n            icon=\"info\" class=\"fs-22 fc-dark-gray cursor-pointer\" *ngIf=\"serviceBrief.length\"\r\n            (click)=\"openFaq()\"></ds-icon>\r\n        </h1>\r\n        <div\r\n          class=\"header-user d-flex align-items-sm-center gap-2 mt-sm-1\"\r\n          *ngIf=\"form?.header?.status?.['key'] !== 'NEW' || isLoading\">\r\n          <ds-avatar\r\n            *ngIf=\"!isLoading\" image=\"{{form?.header?.requesterPhoto}}\" size=\"xx-small\"\r\n            class=\"d-inline-flex cursor-pointer\" (click)=\"showUserInfo()\"></ds-avatar>\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          <mat-divider *ngIf=\"creationDate\" class=\"divider circle mx-2 d-none d-sm-block\"></mat-divider>\r\n          <span *ngIf=\"creationDate\" class=\"fs-14\" [ngClass]=\"{'loading-bg loading-width': isLoading}\">{{ creationDate }}</span>\r\n        </div>\r\n      </div>\r\n      <!-- header-actions-->\r\n      <div\r\n        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        *ngIf=\"!(form?.header?.status?.['key'] === 'NEW')\">\r\n        <ds-status\r\n          *ngIf=\"form?.header?.status?.['key'] !== 'NEW' && !isLoading\"\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          <!-- feedback-->\r\n<!--            *ngIf=\"form?.inboxItem && (form?.inboxItem?.canRequestFeedback ==='true'|| form?.inboxItem?.hasFeedback==='true') && !isLoading\"-->\r\n        <!--  <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>-->\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-container *ngIf=\"showApprovalHistory\">\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\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        </div>\r\n      </div>\r\n    </div>\r\n\r\n  </header>\r\n</ng-container>\r\n<header\r\n  class=\"mb-4 mt-4 d-flex align-items-center justify-content-between align-items-end gap-2\"\r\n  *ngIf=\"(form?.header?.status?.['key'] === 'NEW')\">\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      <ds-icon icon=\"info\" class=\"fs-22 fc-dark-gray cursor-pointer\" *ngIf=\"serviceBrief.length\" (click)=\"openFaq()\">\r\n      </ds-icon>\r\n    </h1>\r\n  </section>\r\n\r\n</header>\r\n", styles: [":host ::ng-deep .filter-section .select-form-field{--input-bg: var(--white);--input-border: var(--white);--placeholder-fc: var(--black);--input-width: 85px;--input-fs: .75rem;--placeholder-fs: .75rem;--label-fs: .75rem;--label-fw: var(--font-regular);--input-height: var(--default-size-sm);font-size:var(--label-fs);box-shadow:var(--box-shadow)}:host ::ng-deep ds-button::part(base){--default-size-sm: 30px;--btn-radius: 3px}@media (max-width: 576px){:host ::ng-deep ds-button::part(base){--default-size-sm: 25px}}:host ::ng-deep .loading-width{min-width:100px;width:40px;flex-grow:1}:host ::ng-deep ds-avatar::part(base){--default-size: 20px}:host ::ng-deep .service-header{--service-header-icon-size: var(--default-size-lg);--header-border-color: var(--coral);display:flex;align-items:flex-start;border-top:5px solid var(--header-border-color);box-shadow:0 7px 10px rgba(var(--rgb-black),3%)}@media (max-width: 576px){:host ::ng-deep .service-header{border-radius:3px 3px 0 0}}:host ::ng-deep .service-header.loading{--header-border-color: var(--off-white)}:host ::ng-deep .service-header.warning{--header-border-color: var(--yellow)}:host ::ng-deep .service-header.success{--header-border-color: var(--green)}:host ::ng-deep .service-header.danger{--header-border-color: var(--red)}@media (max-width: 576px){:host ::ng-deep .service-header{--service-header-icon-size: var(--default-size-sm)}}:host ::ng-deep .service-header .service-header-icon{min-width:var(--service-header-icon-size);width:var(--service-header-icon-size);height:var(--service-header-icon-size);display:inline-flex;align-items:center;justify-content:center;padding:.75rem;border-radius:6px 6px 6px 0;background-color:rgba(var(--rgb-coral),.1)}@media (max-width: 576px){:host ::ng-deep .service-header .service-header-icon{padding:.5rem}}:host ::ng-deep .service-header .header-title{text-align:start}:host ::ng-deep .service-header .divider.circle{min-width:5px;width:5px;min-height:5px;height:5px;border-radius:50%;background-color:var(--dark-gray)}:host ::ng-deep .service-header .header-actions{align-items:flex-end;justify-content:flex-end}:host ::ng-deep .service-header .header-actions .has-comments{position:relative}:host ::ng-deep .service-header .header-actions .has-comments:before{content:\"\";min-width:8px;height:8px;border-radius:50%;background-color:var(--coral);position:absolute;top:-3px;right:-3px;z-index:1}[dir=rtl] :host ::ng-deep .service-header .header-actions .has-comments:before{right:auto;left:-3px}:host ::ng-deep .service-header .header-actions ds-button::part(base){--btn-color: var(--coral);--btn-bg-color: var(--light-gray);--btn-border-color: var(--light-gray)}:host ::ng-deep .service-header .header-user{color:var(--dark-gray)}:host ::ng-deep .history-button::part(base){background-color:var(--white);--btn-height: var(--default-size-sm);--btn-shadow: 0 7px 10px rgba(var(--rgb-black), 3%)}@media (max-width: 576px){:host ::ng-deep .history-button::part(base){--btn-height: 35px;--btn-width: 35px}}@media (max-width: 576px){:host ::ng-deep .history-button::part(label){display:none}}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SatPopoverModule }, { kind: "component", type: i1$3.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: i1$3.SatPopoverAnchorDirective, selector: "[satPopoverAnchor]", inputs: ["satPopoverAnchor"], exportAs: ["satPopoverAnchor"] }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ServiceHeaderComponent, decorators: [{
             type: Component,
@@ -5562,8 +5765,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                         MatMenuItem
                     ], schemas: [CUSTOM_ELEMENTS_SCHEMA], providers: [FeedBackService,
                         { provide: MAT_DIALOG_DATA, useValue: {} },
-                    ], template: "<ng-container *ngIf=\"!(form?.header?.status?.['key'] === 'NEW')\">\r\n  <div class=\"d-flex align-items-center justify-content-end gap-2 my-2\" *ngIf=\"!(form?.header?.status?.['key'] === 'NEW')\">\r\n\r\n    <!-- flag-->\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    <!-- print-->\r\n    <ng-content></ng-content>\r\n  </div>\r\n\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        <!-- title-->\r\n        <h1 class=\"fs-20 fs-md-16 fw-bold fc-black header-title m-0\">{{ formTitle }}\r\n          <ds-icon\r\n            icon=\"info\" class=\"fs-22 fc-dark-gray cursor-pointer\" *ngIf=\"serviceBrief.length\"\r\n            (click)=\"openFaq()\"></ds-icon>\r\n        </h1>\r\n        <div\r\n          class=\"header-user d-flex align-items-sm-center gap-2 mt-sm-1\"\r\n          *ngIf=\"form?.header?.status?.['key'] !== 'NEW' || isLoading\">\r\n          <ds-avatar\r\n            *ngIf=\"!isLoading\" image=\"{{form?.header?.requesterPhoto}}\" size=\"xx-small\"\r\n            class=\"d-inline-flex cursor-pointer\" (click)=\"showUserInfo()\"></ds-avatar>\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}\">{{ (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          <mat-divider *ngIf=\"creationDate\" class=\"divider circle mx-2 d-none d-sm-block\"></mat-divider>\r\n          <span *ngIf=\"creationDate\" class=\"fs-14\" [ngClass]=\"{'loading-bg loading-width': isLoading}\">{{ creationDate }}</span>\r\n        </div>\r\n      </div>\r\n      <!-- header-actions-->\r\n      <div\r\n        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        *ngIf=\"!(form?.header?.status?.['key'] === 'NEW')\">\r\n        <ds-status\r\n          *ngIf=\"form?.header?.status?.['key'] !== 'NEW' && !isLoading\"\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          <!-- feedback-->\r\n<!--            *ngIf=\"form?.inboxItem && (form?.inboxItem?.canRequestFeedback ==='true'|| form?.inboxItem?.hasFeedback==='true') && !isLoading\"-->\r\n        <!--  <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>-->\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-container *ngIf=\"showApprovalHistory\">\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\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        </div>\r\n      </div>\r\n    </div>\r\n\r\n  </header>\r\n</ng-container>\r\n<header\r\n  class=\"mb-4 mt-4 d-flex align-items-center justify-content-between align-items-end gap-2\"\r\n  *ngIf=\"(form?.header?.status?.['key'] === 'NEW')\">\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      {{ (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      <ds-icon icon=\"info\" class=\"fs-22 fc-dark-gray cursor-pointer\" *ngIf=\"serviceBrief.length\" (click)=\"openFaq()\">\r\n      </ds-icon>\r\n    </h1>\r\n  </section>\r\n\r\n</header>\r\n", styles: [":host ::ng-deep .filter-section .select-form-field{--input-bg: var(--white);--input-border: var(--white);--placeholder-fc: var(--black);--input-width: 85px;--input-fs: .75rem;--placeholder-fs: .75rem;--label-fs: .75rem;--label-fw: var(--font-regular);--input-height: var(--default-size-sm);font-size:var(--label-fs);box-shadow:var(--box-shadow)}:host ::ng-deep ds-button::part(base){--default-size-sm: 30px;--btn-radius: 3px}@media (max-width: 576px){:host ::ng-deep ds-button::part(base){--default-size-sm: 25px}}:host ::ng-deep .loading-width{min-width:100px;width:40px;flex-grow:1}:host ::ng-deep ds-avatar::part(base){--default-size: 20px}:host ::ng-deep .service-header{--service-header-icon-size: var(--default-size-lg);--header-border-color: var(--coral);display:flex;align-items:flex-start;border-top:5px solid var(--header-border-color);box-shadow:0 7px 10px rgba(var(--rgb-black),3%)}@media (max-width: 576px){:host ::ng-deep .service-header{border-radius:3px 3px 0 0}}:host ::ng-deep .service-header.loading{--header-border-color: var(--off-white)}:host ::ng-deep .service-header.warning{--header-border-color: var(--yellow)}:host ::ng-deep .service-header.success{--header-border-color: var(--green)}:host ::ng-deep .service-header.danger{--header-border-color: var(--red)}@media (max-width: 576px){:host ::ng-deep .service-header{--service-header-icon-size: var(--default-size-sm)}}:host ::ng-deep .service-header .service-header-icon{min-width:var(--service-header-icon-size);width:var(--service-header-icon-size);height:var(--service-header-icon-size);display:inline-flex;align-items:center;justify-content:center;padding:.75rem;border-radius:6px 6px 6px 0;background-color:rgba(var(--rgb-coral),.1)}@media (max-width: 576px){:host ::ng-deep .service-header .service-header-icon{padding:.5rem}}:host ::ng-deep .service-header .header-title{text-align:start}:host ::ng-deep .service-header .divider.circle{min-width:5px;width:5px;min-height:5px;height:5px;border-radius:50%;background-color:var(--dark-gray)}:host ::ng-deep .service-header .header-actions{align-items:flex-end;justify-content:flex-end}:host ::ng-deep .service-header .header-actions .has-comments{position:relative}:host ::ng-deep .service-header .header-actions .has-comments:before{content:\"\";min-width:8px;height:8px;border-radius:50%;background-color:var(--coral);position:absolute;top:-3px;right:-3px;z-index:1}[dir=rtl] :host ::ng-deep .service-header .header-actions .has-comments:before{right:auto;left:-3px}:host ::ng-deep .service-header .header-actions ds-button::part(base){--btn-color: var(--coral);--btn-bg-color: var(--light-gray);--btn-border-color: var(--light-gray)}:host ::ng-deep .service-header .header-user{color:var(--dark-gray)}:host ::ng-deep .history-button::part(base){background-color:var(--white);--btn-height: var(--default-size-sm);--btn-shadow: 0 7px 10px rgba(var(--rgb-black), 3%)}@media (max-width: 576px){:host ::ng-deep .history-button::part(base){--btn-height: 35px;--btn-width: 35px}}@media (max-width: 576px){:host ::ng-deep .history-button::part(label){display:none}}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: CoreI18nService }, { type: FeedBackService }, { type: i1$1.MatDialog }, { type: SidenavService }], propDecorators: { form: [{
+                    ], template: "<ng-container *ngIf=\"!(form?.header?.status?.['key'] === 'NEW')\">\r\n  <div class=\"d-flex align-items-center justify-content-end gap-2 my-2\" *ngIf=\"!(form?.header?.status?.['key'] === 'NEW')\">\r\n\r\n    <!-- flag-->\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    <!-- print-->\r\n    <ng-content></ng-content>\r\n  </div>\r\n\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        <!-- title-->\r\n        <h1 class=\"fs-20 fs-md-16 fw-bold fc-black header-title m-0\">{{ formTitle }}\r\n          <ds-icon\r\n            icon=\"info\" class=\"fs-22 fc-dark-gray cursor-pointer\" *ngIf=\"serviceBrief.length\"\r\n            (click)=\"openFaq()\"></ds-icon>\r\n        </h1>\r\n        <div\r\n          class=\"header-user d-flex align-items-sm-center gap-2 mt-sm-1\"\r\n          *ngIf=\"form?.header?.status?.['key'] !== 'NEW' || isLoading\">\r\n          <ds-avatar\r\n            *ngIf=\"!isLoading\" image=\"{{form?.header?.requesterPhoto}}\" size=\"xx-small\"\r\n            class=\"d-inline-flex cursor-pointer\" (click)=\"showUserInfo()\"></ds-avatar>\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          <mat-divider *ngIf=\"creationDate\" class=\"divider circle mx-2 d-none d-sm-block\"></mat-divider>\r\n          <span *ngIf=\"creationDate\" class=\"fs-14\" [ngClass]=\"{'loading-bg loading-width': isLoading}\">{{ creationDate }}</span>\r\n        </div>\r\n      </div>\r\n      <!-- header-actions-->\r\n      <div\r\n        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        *ngIf=\"!(form?.header?.status?.['key'] === 'NEW')\">\r\n        <ds-status\r\n          *ngIf=\"form?.header?.status?.['key'] !== 'NEW' && !isLoading\"\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          <!-- feedback-->\r\n<!--            *ngIf=\"form?.inboxItem && (form?.inboxItem?.canRequestFeedback ==='true'|| form?.inboxItem?.hasFeedback==='true') && !isLoading\"-->\r\n        <!--  <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>-->\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-container *ngIf=\"showApprovalHistory\">\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\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        </div>\r\n      </div>\r\n    </div>\r\n\r\n  </header>\r\n</ng-container>\r\n<header\r\n  class=\"mb-4 mt-4 d-flex align-items-center justify-content-between align-items-end gap-2\"\r\n  *ngIf=\"(form?.header?.status?.['key'] === 'NEW')\">\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      <ds-icon icon=\"info\" class=\"fs-22 fc-dark-gray cursor-pointer\" *ngIf=\"serviceBrief.length\" (click)=\"openFaq()\">\r\n      </ds-icon>\r\n    </h1>\r\n  </section>\r\n\r\n</header>\r\n", styles: [":host ::ng-deep .filter-section .select-form-field{--input-bg: var(--white);--input-border: var(--white);--placeholder-fc: var(--black);--input-width: 85px;--input-fs: .75rem;--placeholder-fs: .75rem;--label-fs: .75rem;--label-fw: var(--font-regular);--input-height: var(--default-size-sm);font-size:var(--label-fs);box-shadow:var(--box-shadow)}:host ::ng-deep ds-button::part(base){--default-size-sm: 30px;--btn-radius: 3px}@media (max-width: 576px){:host ::ng-deep ds-button::part(base){--default-size-sm: 25px}}:host ::ng-deep .loading-width{min-width:100px;width:40px;flex-grow:1}:host ::ng-deep ds-avatar::part(base){--default-size: 20px}:host ::ng-deep .service-header{--service-header-icon-size: var(--default-size-lg);--header-border-color: var(--coral);display:flex;align-items:flex-start;border-top:5px solid var(--header-border-color);box-shadow:0 7px 10px rgba(var(--rgb-black),3%)}@media (max-width: 576px){:host ::ng-deep .service-header{border-radius:3px 3px 0 0}}:host ::ng-deep .service-header.loading{--header-border-color: var(--off-white)}:host ::ng-deep .service-header.warning{--header-border-color: var(--yellow)}:host ::ng-deep .service-header.success{--header-border-color: var(--green)}:host ::ng-deep .service-header.danger{--header-border-color: var(--red)}@media (max-width: 576px){:host ::ng-deep .service-header{--service-header-icon-size: var(--default-size-sm)}}:host ::ng-deep .service-header .service-header-icon{min-width:var(--service-header-icon-size);width:var(--service-header-icon-size);height:var(--service-header-icon-size);display:inline-flex;align-items:center;justify-content:center;padding:.75rem;border-radius:6px 6px 6px 0;background-color:rgba(var(--rgb-coral),.1)}@media (max-width: 576px){:host ::ng-deep .service-header .service-header-icon{padding:.5rem}}:host ::ng-deep .service-header .header-title{text-align:start}:host ::ng-deep .service-header .divider.circle{min-width:5px;width:5px;min-height:5px;height:5px;border-radius:50%;background-color:var(--dark-gray)}:host ::ng-deep .service-header .header-actions{align-items:flex-end;justify-content:flex-end}:host ::ng-deep .service-header .header-actions .has-comments{position:relative}:host ::ng-deep .service-header .header-actions .has-comments:before{content:\"\";min-width:8px;height:8px;border-radius:50%;background-color:var(--coral);position:absolute;top:-3px;right:-3px;z-index:1}[dir=rtl] :host ::ng-deep .service-header .header-actions .has-comments:before{right:auto;left:-3px}:host ::ng-deep .service-header .header-actions ds-button::part(base){--btn-color: var(--coral);--btn-bg-color: var(--light-gray);--btn-border-color: var(--light-gray)}:host ::ng-deep .service-header .header-user{color:var(--dark-gray)}:host ::ng-deep .history-button::part(base){background-color:var(--white);--btn-height: var(--default-size-sm);--btn-shadow: 0 7px 10px rgba(var(--rgb-black), 3%)}@media (max-width: 576px){:host ::ng-deep .history-button::part(base){--btn-height: 35px;--btn-width: 35px}}@media (max-width: 576px){:host ::ng-deep .history-button::part(label){display:none}}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: CoreService }, { type: CoreI18nService }, { type: FeedBackService }, { type: i1$1.MatDialog }, { type: SidenavService }], propDecorators: { form: [{
                 type: Input
             }], showHistory: [{
                 type: Input
@@ -5791,7 +5994,7 @@ class FormSectionComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: FormSectionComponent, deps: [{ token: CoreI18nService }, { token: CoreService }, { token: SidenavService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", 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\r\n  class=\"mb-4\" [expanded]=\"isExpanded\" *ngIf=\"form?.header?.status?.['key'] !== 'NEW' \" hideToggle\r\n  #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          <bdi class=\"fs-12 fc-dark-gray fw-normal line-height-1 d-block mt-1\" *ngIf=\"section.header?.processedBy\">\r\n            {{ processingDate }}\r\n          </bdi>\r\n        </div>\r\n      </div>\r\n      <div class=\"approval-panel-details gap-1\">\r\n\r\n        <ng-container *ngIf=\"(!section?.body?.details?.['stage0']?.['isStage0'] || section?.body?.details?.['stage0']?.['isStage0'] === 'false')\">\r\n          <div\r\n            class=\"d-flex align-items-center gap-3\" *ngIf=\"section?.header?.personTo;\"\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              <span\r\n                class=\"fs-14 fw-medium d-inline-block panel-user-name text-truncate\" [ngClass]=\"{'panel-user-only': !section?.header?.delegatedTo}\"\r\n                *ngIf=\"!section?.header?.delegatedTo\">{{ section?.header?.personTo }}</span>\r\n            </div>\r\n\r\n            <div\r\n              *ngIf=\"section?.header?.delegatedTo\" 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\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n        <ds-status\r\n          class=\"main-status\" *ngIf=\"section?.body?.details?.['decision']?.key;\"\r\n          status=\"{{statusClass(section?.body?.details?.['decision']?.key)}}\">{{ section?.body?.details?.['decision']?.value }}\r\n        </ds-status>\r\n      </div>\r\n\r\n      <div class=\"approval-panel-toggle\">\r\n        <ds-icon icon=\"plus-1\" class=\"fs-20 fc-coral\" *ngIf=\"!approvalPanel.expanded\"></ds-icon>\r\n        <ds-icon icon=\"minus\" class=\"fs-20 fc-dark-gray\" *ngIf=\"approvalPanel.expanded\"></ds-icon>\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<ng-container *ngIf=\"form?.header?.status?.['key'] == 'NEW' \">\r\n  <ng-container *ngComponentOutlet=\"sectionFormComponent; ndcDynamicInputs: input\"></ng-container>\r\n</ng-container>\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{--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$1.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i2$1.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { 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.ComponentOutletInjectorDirective, selector: "[ngComponentOutlet]", exportAs: ["ndcComponentOutletInjector"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", 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\r\n  class=\"mb-4\" [expanded]=\"isExpanded\" *ngIf=\"form?.header?.status?.['key'] !== 'NEW' \" hideToggle\r\n  #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          <bdi class=\"fs-12 fc-dark-gray fw-normal line-height-1 d-block mt-1\" *ngIf=\"section.header?.processedBy\">\r\n            {{ processingDate }}\r\n          </bdi>\r\n        </div>\r\n      </div>\r\n      <div class=\"approval-panel-details gap-1\">\r\n\r\n        <ng-container *ngIf=\"(!section?.body?.details?.['stage0']?.['isStage0'] || section?.body?.details?.['stage0']?.['isStage0'] === 'false')\">\r\n          <div\r\n            class=\"d-flex align-items-center gap-3\" *ngIf=\"section?.header?.personTo;\"\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              <span\r\n                class=\"fs-14 fw-medium d-inline-block panel-user-name text-truncate\" [ngClass]=\"{'panel-user-only': !section?.header?.delegatedTo}\"\r\n                *ngIf=\"!section?.header?.delegatedTo\">{{ section?.header?.personTo }}</span>\r\n            </div>\r\n\r\n            <div\r\n              *ngIf=\"section?.header?.delegatedTo\" 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\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n        <ds-status\r\n          class=\"main-status\" *ngIf=\"section?.body?.details?.['decision']?.key;\"\r\n          status=\"{{statusClass(section?.body?.details?.['decision']?.key)}}\">{{ section?.body?.details?.['decision']?.value }}\r\n        </ds-status>\r\n      </div>\r\n\r\n      <div class=\"approval-panel-toggle\">\r\n        <ds-icon icon=\"plus-1\" class=\"fs-20 fc-coral\" *ngIf=\"!approvalPanel.expanded\"></ds-icon>\r\n        <ds-icon icon=\"minus\" class=\"fs-20 fc-dark-gray\" *ngIf=\"approvalPanel.expanded\"></ds-icon>\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<ng-container *ngIf=\"form?.header?.status?.['key'] == 'NEW' \">\r\n  <ng-container *ngComponentOutlet=\"sectionFormComponent; ndcDynamicInputs: input\"></ng-container>\r\n</ng-container>\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{--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$3.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i2$3.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { 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.ComponentOutletInjectorDirective, selector: "[ngComponentOutlet]", exportAs: ["ndcComponentOutletInjector"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: FormSectionComponent, decorators: [{
             type: Component,
@@ -5837,7 +6040,7 @@ class MainRequestDetailsComponent {
         return this.section?.body?.details?.expandStage === 'true';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: MainRequestDetailsComponent, deps: [{ token: CoreI18nService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: MainRequestDetailsComponent, isStandalone: true, selector: "app-main-request-details", inputs: { section: "section", lov: "lov", form: "form" }, ngImport: i0, template: "<mat-accordion class=\"primary-accordion main-request-accordion border-top\">\r\n  <mat-expansion-panel [expanded]=\"isExpanded || (form?.sections?.length === 1 )\" class=\"mb-3\" hideToggle #requestPanel=\"matExpansionPanel\">\r\n    <mat-expansion-panel-header>\r\n      <h2 class=\"fs-16 fw-medium fc-coral m-0 flex-grow-1\">{{i18n.translate('requestDetailsTitle')}}</h2>\r\n      <div class=\"d-inline-flex align-items-center gap-2\" *ngIf=\"!requestPanel.expanded\">\r\n        <ds-icon icon=\"plus-1\" class=\"fs-20 fc-coral\"></ds-icon>\r\n      </div>\r\n      <div class=\"d-inline-flex align-items-center gap-2\" *ngIf=\"requestPanel.expanded\">\r\n        <ds-icon icon=\"minus\" class=\"fs-20 fc-dark-gray\"></ds-icon>\r\n      </div>\r\n    </mat-expansion-panel-header>\r\n    <section class=\"default-box box-shadow p-4\">\r\n      <ng-content ></ng-content>\r\n    </section>\r\n  </mat-expansion-panel>\r\n</mat-accordion>\r\n", styles: [".main-request-accordion{--accordion-height: 65px;--accordion-radius: 0 0 4px 4px;--accordion-shadow: 0 7px 10px rgba(var(--rgb-black), 3%);--accordion-border: 1px solid var(--light-gray);--accordion-border-active: 1px solid var(--gray);--panel-padding: 0 1.5rem;--panel-body-padding: 0 0 1.5rem;position:relative;z-index:1}@media (max-width: 576px){.main-request-accordion{--accordion-height: 55px;--panel-padding: 0 1rem;--panel-body-padding: 0 1rem 1rem}}.main-request-accordion .inner-accordion{--accordion-height: 44px;--accordion-bc: var(--light-gray);--accordion-bc-active: var(--white);--accordion-border: 1px solid var(--light-gray);--accordion-border-active: 1px solid var(--light-gray);--panel-body-padding: 0;--accordion-shadow: none;--panel-padding: 0 1.5rem}\n"], dependencies: [{ kind: "ngmodule", type: MatExpansionModule }, { kind: "directive", type: i2$1.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i2$1.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i2$1.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: MainRequestDetailsComponent, isStandalone: true, selector: "app-main-request-details", inputs: { section: "section", lov: "lov", form: "form" }, ngImport: i0, template: "<mat-accordion class=\"primary-accordion main-request-accordion border-top\">\r\n  <mat-expansion-panel [expanded]=\"isExpanded || (form?.sections?.length === 1 )\" class=\"mb-3\" hideToggle #requestPanel=\"matExpansionPanel\">\r\n    <mat-expansion-panel-header>\r\n      <h2 class=\"fs-16 fw-medium fc-coral m-0 flex-grow-1\">{{i18n.translate('requestDetailsTitle')}}</h2>\r\n      <div class=\"d-inline-flex align-items-center gap-2\" *ngIf=\"!requestPanel.expanded\">\r\n        <ds-icon icon=\"plus-1\" class=\"fs-20 fc-coral\"></ds-icon>\r\n      </div>\r\n      <div class=\"d-inline-flex align-items-center gap-2\" *ngIf=\"requestPanel.expanded\">\r\n        <ds-icon icon=\"minus\" class=\"fs-20 fc-dark-gray\"></ds-icon>\r\n      </div>\r\n    </mat-expansion-panel-header>\r\n    <section class=\"default-box box-shadow p-4\">\r\n      <ng-content ></ng-content>\r\n    </section>\r\n  </mat-expansion-panel>\r\n</mat-accordion>\r\n", styles: [".main-request-accordion{--accordion-height: 65px;--accordion-radius: 0 0 4px 4px;--accordion-shadow: 0 7px 10px rgba(var(--rgb-black), 3%);--accordion-border: 1px solid var(--light-gray);--accordion-border-active: 1px solid var(--gray);--panel-padding: 0 1.5rem;--panel-body-padding: 0 0 1.5rem;position:relative;z-index:1}@media (max-width: 576px){.main-request-accordion{--accordion-height: 55px;--panel-padding: 0 1rem;--panel-body-padding: 0 1rem 1rem}}.main-request-accordion .inner-accordion{--accordion-height: 44px;--accordion-bc: var(--light-gray);--accordion-bc-active: var(--white);--accordion-border: 1px solid var(--light-gray);--accordion-border-active: 1px solid var(--light-gray);--panel-body-padding: 0;--accordion-shadow: none;--panel-padding: 0 1.5rem}\n"], dependencies: [{ kind: "ngmodule", type: MatExpansionModule }, { kind: "directive", type: i2$3.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i2$3.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i2$3.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: MainRequestDetailsComponent, decorators: [{
             type: Component,
@@ -5968,7 +6171,7 @@ class WorkflowSectionComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: WorkflowSectionComponent, deps: [{ token: CoreI18nService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: WorkflowSectionComponent, isStandalone: true, selector: "app-workflow-section", inputs: { sections: "sections", isReadOnly: "isReadOnly", isLoading: "isLoading", form: "form", contentClass: "contentClass", sectionsController: "sectionsController", segmentDynamicLoaderService: "segmentDynamicLoaderService", sectionFormComponent: "sectionFormComponent", sectionName: "sectionName" }, outputs: { sectionSubmitted: "sectionSubmitted" }, viewQueries: [{ propertyName: "formStateObject", first: true, predicate: ["f"], descendants: true }], ngImport: i0, template: "<form #f=\"ngForm\" autocomplete=\"off\">\r\n  <div *ngIf=\"form?.header?.status?.key !== 'NEW' \" class=\"mt-n3\" id=\"accordion\" role=\"tablist\"\r\n    aria-multiselectable=\"true\">\r\n    <app-main-request-details [lov]=\"form?.lovs\" [form]=\"form\" [section]=\"form?.sections[0]\">\r\n      <ng-container *ngTemplateOutlet=\"contentReqDet\"></ng-container>\r\n    </app-main-request-details>\r\n    <header class=\"header-line fs-12 fw-medium fc-dark-gray mt-sm-5 mt-4 mb-4\" *ngIf=\"form?.sections.length > 1\">\r\n      {{i18n.translate('Approvals')}}\r\n    </header>\r\n    <mat-accordion class=\"primary-accordion main-approval\">\r\n      <ng-container *ngFor=\"let section of form?.sections; let i = index\">\r\n        <app-form-section *ngIf=\"i !== 0\" class=\"app-form-section\" [segmentDynamicLoaderService]=\"segmentDynamicLoaderService\" [section]=section [lov]=\"form?.lovs\"\r\n          [isReadOnly]=\"section.header.readOnly\" [form]=\"form\" [controllers]=\"sectionsController\">\r\n        </app-form-section>\r\n      </ng-container>\r\n    </mat-accordion>\r\n  </div>\r\n\r\n  <section *ngIf=\"form?.header?.status?.key === 'NEW' \" class=\"default-box box-shadow p-4\">\r\n    <ng-container *ngTemplateOutlet=\"contentReqDet\"></ng-container>\r\n  </section>\r\n\r\n</form>\r\n\r\n\r\n<ng-template #contentReqDet><ng-content></ng-content></ng-template>\r\n", styles: ["@charset \"UTF-8\";.primary-accordion{--accordion-height: auto;--indicator-bc: transparent;--indicator-bc-active: transparent;--indicator-icon: \"\\e9bc\";--indicator-icon-active: \"\\ea34\";--indicator-color: var(--coral);--indicator-color-active: var(--dark-gray);--accordion-radius: 4px;--accordion-border-active: 1px solid var(--gray);--accordion-shadow: 0 7px 10px 0 rgba(var(--rgb-black), 3%);--accordion-shadow-active: none;--panel-padding: 1.5rem;--panel-body-padding: 0 1.5rem 1.5rem}@media (max-width: 576px){.primary-accordion{--accordion-height: 110px;--panel-padding: 1.5rem 1rem;--panel-body-padding: 0 1rem 1rem}}.primary-accordion.main-approval{position:relative}.primary-accordion.main-approval:before{content:\"\";position:absolute;top:0;bottom:0;margin:2rem;width:1px;height:calc(100% - 2rem);background-color:var(--dark-gray);z-index:0}@media (max-width: 576px){.workflow-all-btns ds-button::part(base){--btn-padding: 0 .5rem;--btn-fs: .75rem;--btn-height: var(--default-size-sm);--btn-min-width: var(--default-size-sm)}}\n"], dependencies: [{ kind: "directive", type: MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FormSectionComponent, selector: "app-form-section", inputs: ["requestDetails", "section", "form", "lov", "isReadOnly", "controllers", "segmentDynamicLoaderService", "sectionFormComponent", "sectionName"] }, { kind: "component", type: MainRequestDetailsComponent, selector: "app-main-request-details", inputs: ["section", "lov", "form"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: WorkflowSectionComponent, isStandalone: true, selector: "app-workflow-section", inputs: { sections: "sections", isReadOnly: "isReadOnly", isLoading: "isLoading", form: "form", contentClass: "contentClass", sectionsController: "sectionsController", segmentDynamicLoaderService: "segmentDynamicLoaderService", sectionFormComponent: "sectionFormComponent", sectionName: "sectionName" }, outputs: { sectionSubmitted: "sectionSubmitted" }, viewQueries: [{ propertyName: "formStateObject", first: true, predicate: ["f"], descendants: true }], ngImport: i0, template: "<form #f=\"ngForm\" autocomplete=\"off\">\r\n  <div *ngIf=\"form?.header?.status?.key !== 'NEW' \" class=\"mt-n3\" id=\"accordion\" role=\"tablist\"\r\n    aria-multiselectable=\"true\">\r\n    <app-main-request-details [lov]=\"form?.lovs\" [form]=\"form\" [section]=\"form?.sections[0]\">\r\n      <ng-container *ngTemplateOutlet=\"contentReqDet\"></ng-container>\r\n    </app-main-request-details>\r\n    <header class=\"header-line fs-12 fw-medium fc-dark-gray mt-sm-5 mt-4 mb-4\" *ngIf=\"form?.sections.length > 1\">\r\n      {{i18n.translate('Approvals')}}\r\n    </header>\r\n    <mat-accordion class=\"primary-accordion main-approval\">\r\n      <ng-container *ngFor=\"let section of form?.sections; let i = index\">\r\n        <app-form-section *ngIf=\"i !== 0\" class=\"app-form-section\" [segmentDynamicLoaderService]=\"segmentDynamicLoaderService\" [section]=section [lov]=\"form?.lovs\"\r\n          [isReadOnly]=\"section.header.readOnly\" [form]=\"form\" [controllers]=\"sectionsController\">\r\n        </app-form-section>\r\n      </ng-container>\r\n    </mat-accordion>\r\n  </div>\r\n\r\n  <section *ngIf=\"form?.header?.status?.key === 'NEW' \" class=\"default-box box-shadow p-4\">\r\n    <ng-container *ngTemplateOutlet=\"contentReqDet\"></ng-container>\r\n  </section>\r\n\r\n</form>\r\n\r\n\r\n<ng-template #contentReqDet><ng-content></ng-content></ng-template>\r\n", styles: ["@charset \"UTF-8\";.primary-accordion{--accordion-height: auto;--indicator-bc: transparent;--indicator-bc-active: transparent;--indicator-icon: \"\\e9bc\";--indicator-icon-active: \"\\ea34\";--indicator-color: var(--coral);--indicator-color-active: var(--dark-gray);--accordion-radius: 4px;--accordion-border-active: 1px solid var(--gray);--accordion-shadow: 0 7px 10px 0 rgba(var(--rgb-black), 3%);--accordion-shadow-active: none;--panel-padding: 1.5rem;--panel-body-padding: 0 1.5rem 1.5rem}@media (max-width: 576px){.primary-accordion{--accordion-height: 110px;--panel-padding: 1.5rem 1rem;--panel-body-padding: 0 1rem 1rem}}.primary-accordion.main-approval{position:relative}.primary-accordion.main-approval:before{content:\"\";position:absolute;top:0;bottom:0;margin:2rem;width:1px;height:calc(100% - 2rem);background-color:var(--dark-gray);z-index:0}@media (max-width: 576px){.workflow-all-btns ds-button::part(base){--btn-padding: 0 .5rem;--btn-fs: .75rem;--btn-height: var(--default-size-sm);--btn-min-width: var(--default-size-sm)}}\n"], dependencies: [{ kind: "directive", type: MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FormSectionComponent, selector: "app-form-section", inputs: ["requestDetails", "section", "form", "lov", "isReadOnly", "controllers", "segmentDynamicLoaderService", "sectionFormComponent", "sectionName"] }, { kind: "component", type: MainRequestDetailsComponent, selector: "app-main-request-details", inputs: ["section", "lov", "form"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: WorkflowSectionComponent, decorators: [{
             type: Component,
@@ -6141,8 +6344,8 @@ class HeaderComponent {
         // this.sidenavSubscription.unsubscribe()
     }
     location = location;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: HeaderComponent, deps: [{ token: CoreI18nService }, { token: SidenavService }, { token: CoreService }, { token: i2$2.Router }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", 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}@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: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i5.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: i5.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i5.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: i6.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: HeaderComponent, deps: [{ token: CoreI18nService }, { token: SidenavService }, { token: CoreService }, { token: i2$4.Router }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", 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}@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: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i5.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: i5.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i5.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: i6.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: HeaderComponent, decorators: [{
             type: Component,
@@ -6153,7 +6356,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                         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}@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$2.Router }, { type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: CoreI18nService }, { type: SidenavService }, { type: CoreService }, { type: i2$4.Router }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [PLATFORM_ID]
                 }] }] });
@@ -6295,13 +6498,13 @@ class SideNavComponent {
         }
         this.router.navigate([url]);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SideNavComponent, deps: [{ token: SidenavService }, { token: i2$2.Router }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SideNavComponent, deps: [{ token: SidenavService }, { token: i2$4.Router }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: SideNavComponent, isStandalone: true, selector: "app-side-nav", inputs: { isOpened: "isOpened" }, viewQueries: [{ propertyName: "MenuTrigger", first: true, predicate: ["MenuTrigger"], descendants: true }], ngImport: i0, template: "<aside>\r\n  <div class=\"header d-flex d-lg-none\">\r\n    <div class=\"d-flex h-100 mt-auto justify-content-between w-100\">\r\n      <h1 class=\"fs-26 fw-bold fc-white logo\">academy</h1>\r\n      <ds-button size=\"small\" color=\"purple\" class=\"close purple\" (click)=\"closeSidenav()\">\r\n        <ds-icon icon=\"close\" class=\"fs-15 fc-white\"></ds-icon>\r\n      </ds-button>\r\n    </div>\r\n  </div>\r\n  <nav>\r\n    <ul>\r\n      <!--  (mouseenter)=\"menuMobile ? null : MenuTrigger.openMenu()\"-->\r\n      <!-- (click)=\"goto(item.routerLink,item.matmenu) -->\r\n      @for (item of Menu; track $index) {\r\n        @if (item.matmenu) {\r\n          <li\r\n            (click)=\"closeSidenav();navigateTo(item)\"  matTooltipPosition=\"right\" matTooltip=\"{{item.name }}\"\r\n            [routerLinkActive]=\"'active'\" (click)=\"goto(item.routerLink!,item.matmenu)\" #MenuTrigger=\"matMenuTrigger\"\r\n            [matMenuTriggerFor]=\"menuMenu\" [routerLinkActiveOptions]=\"{ exact: true }\" class=\"cursor-pointer\">\r\n            <ds-icon icon=\"{{item.icon}}\" class=\"icon\"></ds-icon>\r\n            <span class=\"menu-label\">\r\n              {{ item.name }}\r\n            </span>\r\n          </li>\r\n          <mat-menu #menuMenu=\"matMenu\" class=\"aside-menu  visible-{{item.matmenu}}\">\r\n            <app-mat-menu [title]=\"item.name \" [icon]=\"item.icon\" [list]=\"item.List\"></app-mat-menu>\r\n          </mat-menu>\r\n        } @else {\r\n          <li\r\n            (click)=\"closeSidenav();navigateTo(item)\"  matTooltipPosition=\"right\" matTooltip=\"{{item.name }}\"\r\n            [routerLinkActive]=\"'active'\" [routerLinkActiveOptions]=\"{ exact: true }\" class=\"cursor-pointer\">\r\n            <ds-icon icon=\"{{item.icon}}\" class=\"icon\"></ds-icon>\r\n            <span class=\"menu-label\">\r\n              {{ item.name }}\r\n            </span>\r\n          </li>\r\n        }\r\n      }\r\n    </ul>\r\n  </nav>\r\n</aside>\r\n", styles: [":host ::ng-deep aside{min-width:var(--main-aside-width);width:var(--main-aside-width);height:calc(100vh - var(--main-toolbar-height));display:flex;position:var(--main-aside-position);right:var(--main-aside-right);left:var(--main-aside-left);top:var(--main-toolbar-height);z-index:var(--main-toolbar-zIndex);background-color:var(--main-aside-bc);transform:var(--main-aside-transform);transition:all .5s cubic-bezier(.685,.0473,.346,1)}@media (max-width: 1024px){:host ::ng-deep aside{height:100%;flex-direction:column;--main-toolbar-height: 0}}:host ::ng-deep aside nav{width:100%}:host ::ng-deep aside ul{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:20px;padding:0rem;margin:37px 0;list-style:none;counter-reset:itemCounter}:host ::ng-deep aside ul li{display:flex;align-items:center;flex-wrap:nowrap;overflow:hidden;max-width:calc(var(--main-aside-width-active) - 15px);width:100%;gap:var(--gap-width, 2.5rem);padding:3px 0 3px 10px;cursor:pointer;color:var(--main-aside-item-fc);border-radius:0;transition:var(--default-transition)}[dir=rtl] :host ::ng-deep aside ul li{padding:3px 10px 3px 0!important}@media (max-width: 1024px){@keyframes liAnimation{0%{transform:translateY(-500px)}to{transform:translateY(0)}}}:host ::ng-deep aside ul li.active,:host ::ng-deep aside ul li:hover{background-color:var(--main-aside-item-bc)}[dir=ltr] :host ::ng-deep aside ul li.active,[dir=ltr] :host ::ng-deep aside ul li:hover{border-left:5px solid var(--coral)}[dir=rtl] :host ::ng-deep aside ul li.active,[dir=rtl] :host ::ng-deep aside ul li:hover{border-right:5px solid var(--coral)}:host ::ng-deep aside ul li .menu-label{font-size:var(--main-aside-item-fs);flex-grow:1;opacity:1;min-width:calc(var(--main-aside-width-active) - 2rem - 40px);display:var(--main-aside-item-display)}:host ::ng-deep aside .header{background-color:#0003!important;padding:15px;flex-direction:row}:host ::ng-deep aside .header div{display:flex;align-items:center;margin-top:auto}:host ::ng-deep aside .footer{margin-top:auto;margin-bottom:80px;padding:0 30px}:host ::ng-deep aside ds-icon{font-size:1.55rem;display:inline-flex;align-items:center;justify-content:center;border-radius:3px;min-width:40px;width:40px;height:40px}:host ::ng-deep ds-button.close::part(base){height:37px;width:37px}:host ::ng-deep ds-button.close ds-icon{font-size:18px;min-width:18px;width:18px;height:18px}:host ::ng-deep .viewAll:hover{background-color:var(--purple)}:host ::ng-deep .viewAll:hover span{color:var(--white)}:host ::ng-deep .justify-content-between{justify-content:space-between}:host ::ng-deep .flex-column{flex-direction:column}:host ::ng-deep .d-flex{display:flex}:host ::ng-deep .w-100{width:100%}:host ::ng-deep .gap-3{gap:1rem!important}:host ::ng-deep ds-button.purple::part(base){--btn-border-color: var(--purple)}:host ::ng-deep ds-button.purple::part(overlay){--btn-overlay-color: var(--purple)}:host ::ng-deep ds-button.secondary::part(base){--btn-border-color: var(--secondary)}:host ::ng-deep ds-button.secondary::part(overlay){--btn-overlay-color: var(--secondary)}@media (min-width: 1024px){:host ::ng-deep .d-md-none{display:none!important}}@media (max-height: 430px){:host ::ng-deep aside .header{margin-bottom:50px}:host ::ng-deep aside nav{padding:15px 0 0;overflow:auto}:host ::ng-deep aside .footer{margin-bottom:20px}}@media (max-height: 300px){:host ::ng-deep aside .header{margin-bottom:5px}}:host ::ng-deep .logo{color:#fff}::ng-deep .aside-menu .mat-mdc-menu-content{border:none;box-shadow:none;padding:0!important}\n"], dependencies: [{ kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SideNavComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-side-nav', standalone: true, imports: [RouterLinkActive, RouterLink, MatTooltipModule, MatMenu, MatMenuTrigger], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<aside>\r\n  <div class=\"header d-flex d-lg-none\">\r\n    <div class=\"d-flex h-100 mt-auto justify-content-between w-100\">\r\n      <h1 class=\"fs-26 fw-bold fc-white logo\">academy</h1>\r\n      <ds-button size=\"small\" color=\"purple\" class=\"close purple\" (click)=\"closeSidenav()\">\r\n        <ds-icon icon=\"close\" class=\"fs-15 fc-white\"></ds-icon>\r\n      </ds-button>\r\n    </div>\r\n  </div>\r\n  <nav>\r\n    <ul>\r\n      <!--  (mouseenter)=\"menuMobile ? null : MenuTrigger.openMenu()\"-->\r\n      <!-- (click)=\"goto(item.routerLink,item.matmenu) -->\r\n      @for (item of Menu; track $index) {\r\n        @if (item.matmenu) {\r\n          <li\r\n            (click)=\"closeSidenav();navigateTo(item)\"  matTooltipPosition=\"right\" matTooltip=\"{{item.name }}\"\r\n            [routerLinkActive]=\"'active'\" (click)=\"goto(item.routerLink!,item.matmenu)\" #MenuTrigger=\"matMenuTrigger\"\r\n            [matMenuTriggerFor]=\"menuMenu\" [routerLinkActiveOptions]=\"{ exact: true }\" class=\"cursor-pointer\">\r\n            <ds-icon icon=\"{{item.icon}}\" class=\"icon\"></ds-icon>\r\n            <span class=\"menu-label\">\r\n              {{ item.name }}\r\n            </span>\r\n          </li>\r\n          <mat-menu #menuMenu=\"matMenu\" class=\"aside-menu  visible-{{item.matmenu}}\">\r\n            <app-mat-menu [title]=\"item.name \" [icon]=\"item.icon\" [list]=\"item.List\"></app-mat-menu>\r\n          </mat-menu>\r\n        } @else {\r\n          <li\r\n            (click)=\"closeSidenav();navigateTo(item)\"  matTooltipPosition=\"right\" matTooltip=\"{{item.name }}\"\r\n            [routerLinkActive]=\"'active'\" [routerLinkActiveOptions]=\"{ exact: true }\" class=\"cursor-pointer\">\r\n            <ds-icon icon=\"{{item.icon}}\" class=\"icon\"></ds-icon>\r\n            <span class=\"menu-label\">\r\n              {{ item.name }}\r\n            </span>\r\n          </li>\r\n        }\r\n      }\r\n    </ul>\r\n  </nav>\r\n</aside>\r\n", styles: [":host ::ng-deep aside{min-width:var(--main-aside-width);width:var(--main-aside-width);height:calc(100vh - var(--main-toolbar-height));display:flex;position:var(--main-aside-position);right:var(--main-aside-right);left:var(--main-aside-left);top:var(--main-toolbar-height);z-index:var(--main-toolbar-zIndex);background-color:var(--main-aside-bc);transform:var(--main-aside-transform);transition:all .5s cubic-bezier(.685,.0473,.346,1)}@media (max-width: 1024px){:host ::ng-deep aside{height:100%;flex-direction:column;--main-toolbar-height: 0}}:host ::ng-deep aside nav{width:100%}:host ::ng-deep aside ul{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:20px;padding:0rem;margin:37px 0;list-style:none;counter-reset:itemCounter}:host ::ng-deep aside ul li{display:flex;align-items:center;flex-wrap:nowrap;overflow:hidden;max-width:calc(var(--main-aside-width-active) - 15px);width:100%;gap:var(--gap-width, 2.5rem);padding:3px 0 3px 10px;cursor:pointer;color:var(--main-aside-item-fc);border-radius:0;transition:var(--default-transition)}[dir=rtl] :host ::ng-deep aside ul li{padding:3px 10px 3px 0!important}@media (max-width: 1024px){@keyframes liAnimation{0%{transform:translateY(-500px)}to{transform:translateY(0)}}}:host ::ng-deep aside ul li.active,:host ::ng-deep aside ul li:hover{background-color:var(--main-aside-item-bc)}[dir=ltr] :host ::ng-deep aside ul li.active,[dir=ltr] :host ::ng-deep aside ul li:hover{border-left:5px solid var(--coral)}[dir=rtl] :host ::ng-deep aside ul li.active,[dir=rtl] :host ::ng-deep aside ul li:hover{border-right:5px solid var(--coral)}:host ::ng-deep aside ul li .menu-label{font-size:var(--main-aside-item-fs);flex-grow:1;opacity:1;min-width:calc(var(--main-aside-width-active) - 2rem - 40px);display:var(--main-aside-item-display)}:host ::ng-deep aside .header{background-color:#0003!important;padding:15px;flex-direction:row}:host ::ng-deep aside .header div{display:flex;align-items:center;margin-top:auto}:host ::ng-deep aside .footer{margin-top:auto;margin-bottom:80px;padding:0 30px}:host ::ng-deep aside ds-icon{font-size:1.55rem;display:inline-flex;align-items:center;justify-content:center;border-radius:3px;min-width:40px;width:40px;height:40px}:host ::ng-deep ds-button.close::part(base){height:37px;width:37px}:host ::ng-deep ds-button.close ds-icon{font-size:18px;min-width:18px;width:18px;height:18px}:host ::ng-deep .viewAll:hover{background-color:var(--purple)}:host ::ng-deep .viewAll:hover span{color:var(--white)}:host ::ng-deep .justify-content-between{justify-content:space-between}:host ::ng-deep .flex-column{flex-direction:column}:host ::ng-deep .d-flex{display:flex}:host ::ng-deep .w-100{width:100%}:host ::ng-deep .gap-3{gap:1rem!important}:host ::ng-deep ds-button.purple::part(base){--btn-border-color: var(--purple)}:host ::ng-deep ds-button.purple::part(overlay){--btn-overlay-color: var(--purple)}:host ::ng-deep ds-button.secondary::part(base){--btn-border-color: var(--secondary)}:host ::ng-deep ds-button.secondary::part(overlay){--btn-overlay-color: var(--secondary)}@media (min-width: 1024px){:host ::ng-deep .d-md-none{display:none!important}}@media (max-height: 430px){:host ::ng-deep aside .header{margin-bottom:50px}:host ::ng-deep aside nav{padding:15px 0 0;overflow:auto}:host ::ng-deep aside .footer{margin-bottom:20px}}@media (max-height: 300px){:host ::ng-deep aside .header{margin-bottom:5px}}:host ::ng-deep .logo{color:#fff}::ng-deep .aside-menu .mat-mdc-menu-content{border:none;box-shadow:none;padding:0!important}\n"] }]
-        }], ctorParameters: () => [{ type: SidenavService }, { type: i2$2.Router }], propDecorators: { isOpened: [{
+        }], ctorParameters: () => [{ type: SidenavService }, { type: i2$4.Router }], propDecorators: { isOpened: [{
                 type: Input
             }], MenuTrigger: [{
                 type: ViewChild,
@@ -6360,7 +6563,7 @@ class LayoutComponent {
     closeSideNav() {
         this.sidenav.close().then(r => { });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: LayoutComponent, deps: [{ token: DOCUMENT }, { token: i2$2.Router }, { token: SidenavService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: LayoutComponent, deps: [{ token: DOCUMENT }, { token: i2$4.Router }, { token: SidenavService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: LayoutComponent, isStandalone: true, selector: "core-layout", inputs: { form: "form", formTitle: "formTitle", isLoading: "isLoading", serviceBrief: "serviceBrief" }, viewQueries: [{ propertyName: "sidenav", first: true, predicate: ["sidenav"], descendants: true, static: true }], ngImport: i0, template: "<app-header></app-header>\r\n<section class=\"d-flex\">\r\n  <app-side-nav></app-side-nav>\r\n  <mat-sidenav-container\r\n    class=\"flex-grow-1\"\r\n    [hasBackdrop]=\"true\"\r\n    (backdropClick)=\"backdropClick()\"\r\n  >\r\n    <mat-sidenav\r\n      #sidenav\r\n      autoFocus=\"false\"\r\n      fixedInViewport\r\n      [position]=\"'end'\"\r\n      (closedStart)=\"onClose()\"\r\n    >\r\n      <ng-container *ngComponentOutlet=\"sideContent\">\r\n        <app-side-nav></app-side-nav>\r\n      </ng-container>\r\n    </mat-sidenav>\r\n    <mat-sidenav-content>\r\n      <main\r\n        class=\"hadPadding service-wrapper\"\r\n        [ngClass]=\"form?.header?.status?.key == 'NEW' ? 'hub-container-mini' : 'hub-container'\">\r\n\r\n        <ng-content ></ng-content>\r\n        <ng-content select=\"[workflow]\"></ng-content>\r\n\r\n      </main>\r\n    </mat-sidenav-content>\r\n  </mat-sidenav-container>\r\n</section>\r\n", styles: [":host ::ng-deep .mat-drawer-container{overflow:visible;margin-top:var(--main-toolbar-height);min-height:calc(100vh - var(--main-toolbar-height));background-color:var(--body-bg)!important;z-index:initial!important;min-width:calc(100% - var(--main-aside-width));width:calc(100% - var(--main-aside-width))}:host ::ng-deep .mat-drawer-container .mat-drawer-content{display:flex;flex-direction:column;overflow:visible}.hup-wrapper :host ::ng-deep .mat-drawer-container .mat-drawer-content{min-height:auto}:host ::ng-deep footer{bottom:-65px}.mat-drawer{border-radius:10px!important;margin:1rem;box-shadow:0 8px 16px 7px rgba(var(--rgb-black),.06);background-color:var(--white)}@media (max-width: 767px){.mat-drawer{padding:0;border-radius:0;margin:0;width:100%}}.customize-btn{min-width:166px}.zer-pt{padding-top:0!important}\n"], dependencies: [{ kind: "component", type: HeaderComponent, selector: "app-header" }, { kind: "component", type: SideNavComponent, selector: "app-side-nav", inputs: ["isOpened"] }, { kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i3$2.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i3$2.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i3$2.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: LayoutComponent, decorators: [{
@@ -6369,7 +6572,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
         }], ctorParameters: () => [{ type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
-                }] }, { type: i2$2.Router }, { type: SidenavService }], propDecorators: { sidenav: [{
+                }] }, { type: i2$4.Router }, { type: SidenavService }], propDecorators: { sidenav: [{
                 type: ViewChild,
                 args: ["sidenav", { static: true }]
             }], form: [{
@@ -6401,14 +6604,21 @@ class RequestDetailsSectionComponent {
     actionStateService;
     isReadOnly;
     section;
+    form;
     lov;
     className = "info-section";
-    form;
     fieldsForm;
+    numbers = [...Array(100).keys()].map(i => i + 1);
+    formGroup = new FormGroup({
+        name: new FormControl('', [Validators.required, Validators.maxLength(3), Validators.minLength(2)]),
+        countries: new FormControl('', Validators.required),
+    });
     constructor(i18n, fb, actionStateService) {
         this.i18n = i18n;
         this.fb = fb;
         this.actionStateService = actionStateService;
+    }
+    ngOnInit() {
         this.createForm();
     }
     createForm() {
@@ -6419,11 +6629,16 @@ class RequestDetailsSectionComponent {
             newForm[option.value] = [''];
         });
         this.fieldsForm = this.fb.group(newForm);
-        this.fieldsForm.valueChanges.subscribe(value => {
+        const checkValidityAndUpdate = () => {
             this.lov?.['decision']?.options?.forEach(option => {
                 let isActionValid = this.checkValidity(option.value);
                 this.actionStateService.setActionValid(option.value, isActionValid);
+                this.section.body.details = this.fieldsForm.value;
             });
+        };
+        checkValidityAndUpdate();
+        this.fieldsForm.valueChanges.subscribe(() => {
+            checkValidityAndUpdate();
         });
     }
     checkValidity(action) {
@@ -6438,8 +6653,14 @@ class RequestDetailsSectionComponent {
                 return false;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: RequestDetailsSectionComponent, deps: [{ token: CoreI18nService }, { token: i1$2.FormBuilder }, { token: ActionStateService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: RequestDetailsSectionComponent, isStandalone: true, selector: "app-request-details-section", inputs: { isReadOnly: "isReadOnly", section: "section", lov: "lov", className: "className" }, ngImport: i0, template: "<div\r\n  [ngClass]=\"{'form-section-divide form-section':!section?.header?.readOnly,'info-section':section?.header?.readOnly}\">\r\n\r\n\r\n  <ds-alert class=\"full\" type=\"warning\" icon=\"info\">\r\n\r\n    <div class=\"d-flex gap-2\">\r\n\r\n      Request details working fine\r\n\r\n    </div>\r\n\r\n  </ds-alert>\r\n\r\n  <form [formGroup]=\"fieldsForm\">\r\n    <app-input formControlName=\"input1\" ></app-input>\r\n  </form>\r\n\r\n</div>\r\n@if (!section?.header?.readOnly) {\r\n  <div class=\"mt-4\">\r\n    <lib-action-buttons\r\n      [lovOptions]=\"lov?.['decision']?.options\"\r\n      [lovType]=\"lov?.['decision']?.type\"\r\n    />\r\n  </div>\r\n}\r\n", styles: [".form-section-divide{--form-section-columns: 1fr 1fr}@media (max-width: 756px){.form-section-divide{--form-section-columns: 100%}}.form-section-divide .full{grid-column:1/-1}.head-title{position:relative;margin-bottom:12px}.head-title h3{display:inline-block;color:#8e9aa0;font-size:14px;font-weight:500;background-color:#fff;padding-inline-end:20px;position:relative;z-index:2;margin:0}.head-title:after{content:\"\";position:absolute;width:100%;height:1px;background-color:#dee0e2;top:50%;left:0;right:0;transform:translateY(-50%);z-index:1}.chamber{margin-bottom:20px}.chamber .chamber-content{background-color:#f8f8f8;padding:20px}.chamber .chamber-content .chamber-select{display:flex}.chamber .chamber-content mat-checkbox{font-size:14px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: InputComponent, selector: "app-input", inputs: ["label", "hasTooltip", "tooltip", "floatLabel", "className", "showLabel", "matPrefix", "iconPrefixName", "matSuffix", "iconSuffixName", "emitedChangedValue1"] }, { kind: "component", type: ActionButtonsComponent, selector: "lib-action-buttons", inputs: ["lovOptions", "lovType"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
+    customCallSubmit(action) {
+        console.log('customCallSubmit', action);
+    }
+    resetForm() {
+        this.fieldsForm.reset();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: RequestDetailsSectionComponent, deps: [{ token: CoreI18nService }, { token: i2.FormBuilder }, { token: ActionStateService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: RequestDetailsSectionComponent, isStandalone: true, selector: "app-request-details-section", inputs: { isReadOnly: "isReadOnly", section: "section", form: "form", lov: "lov", className: "className" }, ngImport: i0, template: "<div\r\n  [ngClass]=\"{'form-section-divide form-section':!section?.header?.readOnly,'info-section':section?.header?.readOnly}\">\r\n\r\n\r\n  <!--<form [formGroup]=\"formGroup\">\r\n      <app-input formControlName=\"name\"></app-input>\r\n      <app-custom-searchable formControlName=\"countries\" [options]=\"lov?.['approverActions']?.options\"></app-custom-searchable>\r\n  </form>-->\r\n\r\n\r\n  <ds-alert class=\"full\" type=\"warning\" icon=\"info\">\r\n\r\n    <div class=\"d-flex gap-2\">\r\n\r\n      Request details working fine\r\n\r\n    </div>\r\n\r\n  </ds-alert>\r\n\r\n  <form [formGroup]=\"fieldsForm\">\r\n    <app-input formControlName=\"input1\"></app-input>\r\n  </form>\r\n\r\n</div>\r\n@if (!section?.header?.readOnly) {\r\n  <div class=\"mt-4\">\r\n    <lib-action-buttons\r\n      [lovOptions]=\"lov?.['decision']?.options\"\r\n      [lovType]=\"lov?.['decision']?.type\"\r\n      [section]=\"section\"\r\n      [form]=\"form\"\r\n      [sections]=\"form.sections\"\r\n      [showApprovalCycle]=\"true\"\r\n      [customCall]=\"false\"\r\n      [fieldsForm]=\"fieldsForm\"\r\n      (customCallEmit)=\"customCallSubmit($event)\"\r\n      (resetFormEmit)=\"resetForm()\"\r\n    />\r\n  </div>\r\n}\r\n", styles: [".form-section-divide{--form-section-columns: 1fr 1fr}@media (max-width: 756px){.form-section-divide{--form-section-columns: 100%}}.form-section-divide .full{grid-column:1/-1}.head-title{position:relative;margin-bottom:12px}.head-title h3{display:inline-block;color:#8e9aa0;font-size:14px;font-weight:500;background-color:#fff;padding-inline-end:20px;position:relative;z-index:2;margin:0}.head-title:after{content:\"\";position:absolute;width:100%;height:1px;background-color:#dee0e2;top:50%;left:0;right:0;transform:translateY(-50%);z-index:1}.chamber{margin-bottom:20px}.chamber .chamber-content{background-color:#f8f8f8;padding:20px}.chamber .chamber-content .chamber-select{display:flex}.chamber .chamber-content mat-checkbox{font-size:14px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: InputComponent, selector: "app-input", inputs: ["label", "hasTooltip", "tooltip", "floatLabel", "className", "showLabel", "iconPrefixName", "matSuffix", "iconSuffixName", "emitedChangedValue1"] }, { kind: "component", type: ActionButtonsComponent, selector: "lib-action-buttons", inputs: ["lovOptions", "lovType", "fieldsForm", "form", "section", "sections", "showApprovalCycle", "customCall"], outputs: ["resetFormEmit", "customCallEmit"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: RequestDetailsSectionComponent, decorators: [{
             type: Component,
@@ -6450,17 +6671,115 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                         NgForOf,
                         ActionButtonsComponent,
                         ReactiveFormsModule,
-                    ], template: "<div\r\n  [ngClass]=\"{'form-section-divide form-section':!section?.header?.readOnly,'info-section':section?.header?.readOnly}\">\r\n\r\n\r\n  <ds-alert class=\"full\" type=\"warning\" icon=\"info\">\r\n\r\n    <div class=\"d-flex gap-2\">\r\n\r\n      Request details working fine\r\n\r\n    </div>\r\n\r\n  </ds-alert>\r\n\r\n  <form [formGroup]=\"fieldsForm\">\r\n    <app-input formControlName=\"input1\" ></app-input>\r\n  </form>\r\n\r\n</div>\r\n@if (!section?.header?.readOnly) {\r\n  <div class=\"mt-4\">\r\n    <lib-action-buttons\r\n      [lovOptions]=\"lov?.['decision']?.options\"\r\n      [lovType]=\"lov?.['decision']?.type\"\r\n    />\r\n  </div>\r\n}\r\n", styles: [".form-section-divide{--form-section-columns: 1fr 1fr}@media (max-width: 756px){.form-section-divide{--form-section-columns: 100%}}.form-section-divide .full{grid-column:1/-1}.head-title{position:relative;margin-bottom:12px}.head-title h3{display:inline-block;color:#8e9aa0;font-size:14px;font-weight:500;background-color:#fff;padding-inline-end:20px;position:relative;z-index:2;margin:0}.head-title:after{content:\"\";position:absolute;width:100%;height:1px;background-color:#dee0e2;top:50%;left:0;right:0;transform:translateY(-50%);z-index:1}.chamber{margin-bottom:20px}.chamber .chamber-content{background-color:#f8f8f8;padding:20px}.chamber .chamber-content .chamber-select{display:flex}.chamber .chamber-content mat-checkbox{font-size:14px}\n"] }]
-        }], ctorParameters: () => [{ type: CoreI18nService }, { type: i1$2.FormBuilder }, { type: ActionStateService }], propDecorators: { isReadOnly: [{
+                        ValidationErrorsComponent,
+                        CustomSearchableComponent
+                    ], template: "<div\r\n  [ngClass]=\"{'form-section-divide form-section':!section?.header?.readOnly,'info-section':section?.header?.readOnly}\">\r\n\r\n\r\n  <!--<form [formGroup]=\"formGroup\">\r\n      <app-input formControlName=\"name\"></app-input>\r\n      <app-custom-searchable formControlName=\"countries\" [options]=\"lov?.['approverActions']?.options\"></app-custom-searchable>\r\n  </form>-->\r\n\r\n\r\n  <ds-alert class=\"full\" type=\"warning\" icon=\"info\">\r\n\r\n    <div class=\"d-flex gap-2\">\r\n\r\n      Request details working fine\r\n\r\n    </div>\r\n\r\n  </ds-alert>\r\n\r\n  <form [formGroup]=\"fieldsForm\">\r\n    <app-input formControlName=\"input1\"></app-input>\r\n  </form>\r\n\r\n</div>\r\n@if (!section?.header?.readOnly) {\r\n  <div class=\"mt-4\">\r\n    <lib-action-buttons\r\n      [lovOptions]=\"lov?.['decision']?.options\"\r\n      [lovType]=\"lov?.['decision']?.type\"\r\n      [section]=\"section\"\r\n      [form]=\"form\"\r\n      [sections]=\"form.sections\"\r\n      [showApprovalCycle]=\"true\"\r\n      [customCall]=\"false\"\r\n      [fieldsForm]=\"fieldsForm\"\r\n      (customCallEmit)=\"customCallSubmit($event)\"\r\n      (resetFormEmit)=\"resetForm()\"\r\n    />\r\n  </div>\r\n}\r\n", styles: [".form-section-divide{--form-section-columns: 1fr 1fr}@media (max-width: 756px){.form-section-divide{--form-section-columns: 100%}}.form-section-divide .full{grid-column:1/-1}.head-title{position:relative;margin-bottom:12px}.head-title h3{display:inline-block;color:#8e9aa0;font-size:14px;font-weight:500;background-color:#fff;padding-inline-end:20px;position:relative;z-index:2;margin:0}.head-title:after{content:\"\";position:absolute;width:100%;height:1px;background-color:#dee0e2;top:50%;left:0;right:0;transform:translateY(-50%);z-index:1}.chamber{margin-bottom:20px}.chamber .chamber-content{background-color:#f8f8f8;padding:20px}.chamber .chamber-content .chamber-select{display:flex}.chamber .chamber-content mat-checkbox{font-size:14px}\n"] }]
+        }], ctorParameters: () => [{ type: CoreI18nService }, { type: i2.FormBuilder }, { type: ActionStateService }], propDecorators: { isReadOnly: [{
+                type: Input
+            }], section: [{
+                type: Input
+            }], form: [{
+                type: Input
+            }], lov: [{
+                type: Input
+            }], className: [{
+                type: Input
+            }] } });
+
+class GeneralApproverSectionComponent {
+    i18n;
+    fb;
+    actionStateService;
+    isReadOnly;
+    section;
+    form;
+    lov;
+    className = "info-section";
+    fieldsForm;
+    numbers = [...Array(100).keys()].map(i => i + 1);
+    formGroup = new FormGroup({
+        name: new FormControl('', [Validators.required, Validators.maxLength(3), Validators.minLength(2)]),
+        countries: new FormControl('', Validators.required),
+    });
+    constructor(i18n, fb, actionStateService) {
+        this.i18n = i18n;
+        this.fb = fb;
+        this.actionStateService = actionStateService;
+    }
+    ngOnInit() {
+        this.createForm();
+    }
+    createForm() {
+        let newForm = {
+            input1: ['', Validators.required]
+        };
+        this.lov?.['decision']?.options?.forEach(option => {
+            newForm[option.value] = [''];
+        });
+        this.fieldsForm = this.fb.group(newForm);
+        const checkValidityAndUpdate = () => {
+            this.lov?.['decision']?.options?.forEach(option => {
+                let isActionValid = this.checkValidity(option.value);
+                this.actionStateService.setActionValid(option.value, isActionValid);
+                this.section.body.details = this.fieldsForm.value;
+            });
+        };
+        checkValidityAndUpdate();
+        this.fieldsForm.valueChanges.subscribe(() => {
+            checkValidityAndUpdate();
+        });
+    }
+    checkValidity(action) {
+        switch (action) {
+            case 'APPROVE':
+                return true;
+            case 'REJECT':
+                return this.fieldsForm.valid;
+            case 'SENDBACK':
+                return this.fieldsForm.valid;
+            default:
+                return false;
+        }
+    }
+    customCallSubmit(action) {
+        console.log('customCallSubmit', action);
+    }
+    resetForm() {
+        this.fieldsForm.reset();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: GeneralApproverSectionComponent, deps: [{ token: CoreI18nService }, { token: i2.FormBuilder }, { token: ActionStateService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: GeneralApproverSectionComponent, isStandalone: true, selector: "app-general-approver-section", inputs: { isReadOnly: "isReadOnly", section: "section", form: "form", lov: "lov", className: "className" }, ngImport: i0, template: "<div\r\n  [ngClass]=\"{'form-section-divide form-section':!section?.header?.readOnly,'info-section':section?.header?.readOnly}\">\r\n\r\n  <ds-alert class=\"full\" type=\"warning\" icon=\"info\">\r\n\r\n    <div class=\"d-flex gap-2\">\r\n\r\n      Request details working fine\r\n\r\n    </div>\r\n\r\n  </ds-alert>\r\n\r\n  <form [formGroup]=\"fieldsForm\">\r\n    <app-input formControlName=\"input1\"></app-input>\r\n  </form>\r\n\r\n</div>\r\n@if (!section?.header?.readOnly) {\r\n  <div class=\"mt-4\">\r\n    <lib-action-buttons\r\n      [lovOptions]=\"lov?.['decision']?.options\"\r\n      [lovType]=\"lov?.['decision']?.type\"\r\n      [section]=\"section\"\r\n      [form]=\"form\"\r\n      [sections]=\"form.sections\"\r\n      [showApprovalCycle]=\"true\"\r\n      [customCall]=\"false\"\r\n      [fieldsForm]=\"fieldsForm\"\r\n      (customCallEmit)=\"customCallSubmit($event)\"\r\n      (resetFormEmit)=\"resetForm()\"\r\n    />\r\n  </div>\r\n}\r\n", styles: [".form-section-divide{--form-section-columns: 1fr 1fr}@media (max-width: 756px){.form-section-divide{--form-section-columns: 100%}}.form-section-divide .full{grid-column:1/-1}.head-title{position:relative;margin-bottom:12px}.head-title h3{display:inline-block;color:#8e9aa0;font-size:14px;font-weight:500;background-color:#fff;padding-inline-end:20px;position:relative;z-index:2;margin:0}.head-title:after{content:\"\";position:absolute;width:100%;height:1px;background-color:#dee0e2;top:50%;left:0;right:0;transform:translateY(-50%);z-index:1}.chamber{margin-bottom:20px}.chamber .chamber-content{background-color:#f8f8f8;padding:20px}.chamber .chamber-content .chamber-select{display:flex}.chamber .chamber-content mat-checkbox{font-size:14px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: InputComponent, selector: "app-input", inputs: ["label", "hasTooltip", "tooltip", "floatLabel", "className", "showLabel", "iconPrefixName", "matSuffix", "iconSuffixName", "emitedChangedValue1"] }, { kind: "component", type: ActionButtonsComponent, selector: "lib-action-buttons", inputs: ["lovOptions", "lovType", "fieldsForm", "form", "section", "sections", "showApprovalCycle", "customCall"], outputs: ["resetFormEmit", "customCallEmit"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: GeneralApproverSectionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-general-approver-section', standalone: true, schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA], imports: [
+                        NgClass,
+                        InputComponent,
+                        NgIf,
+                        NgForOf,
+                        ActionButtonsComponent,
+                        ReactiveFormsModule,
+                        ValidationErrorsComponent,
+                        CustomSearchableComponent
+                    ], template: "<div\r\n  [ngClass]=\"{'form-section-divide form-section':!section?.header?.readOnly,'info-section':section?.header?.readOnly}\">\r\n\r\n  <ds-alert class=\"full\" type=\"warning\" icon=\"info\">\r\n\r\n    <div class=\"d-flex gap-2\">\r\n\r\n      Request details working fine\r\n\r\n    </div>\r\n\r\n  </ds-alert>\r\n\r\n  <form [formGroup]=\"fieldsForm\">\r\n    <app-input formControlName=\"input1\"></app-input>\r\n  </form>\r\n\r\n</div>\r\n@if (!section?.header?.readOnly) {\r\n  <div class=\"mt-4\">\r\n    <lib-action-buttons\r\n      [lovOptions]=\"lov?.['decision']?.options\"\r\n      [lovType]=\"lov?.['decision']?.type\"\r\n      [section]=\"section\"\r\n      [form]=\"form\"\r\n      [sections]=\"form.sections\"\r\n      [showApprovalCycle]=\"true\"\r\n      [customCall]=\"false\"\r\n      [fieldsForm]=\"fieldsForm\"\r\n      (customCallEmit)=\"customCallSubmit($event)\"\r\n      (resetFormEmit)=\"resetForm()\"\r\n    />\r\n  </div>\r\n}\r\n", styles: [".form-section-divide{--form-section-columns: 1fr 1fr}@media (max-width: 756px){.form-section-divide{--form-section-columns: 100%}}.form-section-divide .full{grid-column:1/-1}.head-title{position:relative;margin-bottom:12px}.head-title h3{display:inline-block;color:#8e9aa0;font-size:14px;font-weight:500;background-color:#fff;padding-inline-end:20px;position:relative;z-index:2;margin:0}.head-title:after{content:\"\";position:absolute;width:100%;height:1px;background-color:#dee0e2;top:50%;left:0;right:0;transform:translateY(-50%);z-index:1}.chamber{margin-bottom:20px}.chamber .chamber-content{background-color:#f8f8f8;padding:20px}.chamber .chamber-content .chamber-select{display:flex}.chamber .chamber-content mat-checkbox{font-size:14px}\n"] }]
+        }], ctorParameters: () => [{ type: CoreI18nService }, { type: i2.FormBuilder }, { type: ActionStateService }], propDecorators: { isReadOnly: [{
                 type: Input
             }], section: [{
                 type: Input
+            }], form: [{
+                type: Input
             }], lov: [{
                 type: Input
             }], className: [{
                 type: Input
             }] } });
 
+var segmentDynamicLoaderConfiguration = {
+    roleToApprovalSectionMapping: {
+        vpr_d: GeneralApproverSectionComponent
+    }
+};
+
 class I18nService {
     locales;
     coreLocales;
@@ -6496,201 +6815,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
-class StateMachineService {
-    http;
-    coreStateMachineService;
-    currentSubmitter;
-    feedbackForm = false;
-    formName;
-    serviceName;
-    refreshToken;
-    pendingForm = false;
-    responderForm = false;
-    feedBackSent = false;
-    feedbackReponse = {
-        requestFrom: null,
-        requestTo: null,
-        requestFeedback: null,
-        responseFeedback: null
-    };
-    transitions;
-    state;
-    authToken;
-    formId;
-    isReadOnly;
-    inboxUrl;
-    isMobile;
-    requesterEmail;
-    authorizedEmail;
-    constructor(http, coreStateMachineService) {
-        this.http = http;
-        this.coreStateMachineService = coreStateMachineService;
-        this.isMobile = window.wmConfig.isMobile;
-        this.state = STATE_MACHINE_STATUS_IDLE;
-        this.currentSubmitter = null;
-        this.authToken = '';
-        this.refreshToken = '';
-        this.formId = window.wmConfig.formId;
-        this.formName = window.wmConfig.formPrefix;
-        if (this.formName.includes('-new')) {
-            const myArray = this.formName.split("-");
-            this.formName = myArray['0'];
-        }
-        this.inboxUrl = window.wmConfig.inboxUri;
-        console.log('inboxUrl', this.inboxUrl);
-        console.log('inboxUrl', location.host + this.inboxUrl);
-        /* istanbul ignore next  */
-        this.transitions = {
-            idle: {
-                mockApi: function (filterData, ...args) {
-                    let body = {
-                        method: HTTP_METHOD_GET, //GET - PUT - POST
-                        destination: TARGET_SERVER_WM,
-                        serviceName: 'serviceName', //,
-                        formName: this.formName,
-                        queryParameters: {}
-                    };
-                    let options = this.getRequestOptions();
-                    let succ = 'serviceResponce';
-                    return this.callPost(body, succ, options);
-                },
-                getFileTemplate: function (...args) {
-                    let [formID] = args;
-                    this.state = STATE_MACHINE_STATUS_FETCHING;
-                    let body = {
-                        method: HTTP_METHOD_GET,
-                        destination: TARGET_SERVER_WM,
-                        serviceName: "getFileTemplate",
-                        formName: "WPO",
-                        queryParameters: {
-                            formID: formID,
-                        }
-                    };
-                    let options = this.getRequestOptions();
-                    let succ = STATE_MACHINE_ACTION_SUCCESS_RESPONSE;
-                    return this.callPost(body, succ, options);
-                },
-            },
-            fetching: {
-                serviceResponce: function (...args) {
-                    let [payload] = args;
-                    let result = payload;
-                    this.state = STATE_MACHINE_STATUS_IDLE;
-                    return result;
-                },
-                failure: function (...args) {
-                    let [errors] = args;
-                    this.state = STATE_MACHINE_STATUS_ERROR;
-                    return this.dispatch(STATE_MACHINE_ACTION_HANDLE_ERROR, errors);
-                }
-            },
-            error: {
-                handleError: function (...args) {
-                    let [errors] = args;
-                    let result = new Messages({}, [], [], []);
-                    if (errors?.meta?.messages) {
-                        errors.meta.messages.forEach((message) => {
-                            result[message.type].push(message.message);
-                            if (message.payloadReference) {
-                                let payloadReferenceTokens = message.payloadReference.split('/');
-                                payloadReferenceTokens.slice(1, payloadReferenceTokens.length - 1);
-                                let element = result.errorFields;
-                                payloadReferenceTokens.forEach((token) => {
-                                    element[token] = {};
-                                    element = element[token];
-                                });
-                                element = true;
-                            }
-                        });
-                    }
-                    else if (errors?.errors) {
-                        errors.errors.forEach((message) => {
-                            result['error'].push(message.message);
-                        });
-                    }
-                    this.state = STATE_MACHINE_STATUS_IDLE;
-                    return result;
-                }
-            },
-            sending: {
-                failure: function (...args) {
-                    let [errors] = args;
-                    this.state = STATE_MACHINE_STATUS_ERROR;
-                    return this.dispatch(STATE_MACHINE_ACTION_HANDLE_ERROR, errors);
-                }
-            }
-        };
-    }
-    dispatch(actionName, ...args) {
-        const actions = this.transitions[this.state];
-        const action = actions[actionName];
-        if (action) {
-            return action.apply(this, args);
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: StateMachineService, deps: [{ token: i1.HttpClient }, { token: CoreService }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: StateMachineService, providedIn: 'any' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: StateMachineService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'any',
-                }]
-        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: CoreService }] });
-
-class GeneralApproverSectionComponent {
-    i18n;
-    StateMachineService;
-    isReadOnly;
-    section;
-    lov;
-    className = "info-section";
-    currentSectionId;
-    lastSectionId;
-    form;
-    constructor(i18n, 
-    // public profileRequestorService: ProfileRequestorService,
-    StateMachineService) {
-        this.i18n = i18n;
-        this.StateMachineService = StateMachineService;
-    }
-    ngAfterViewInit() {
-        this.ServicesSubScriptions();
-    }
-    ServicesSubScriptions() {
-        /*    this.profileRequestorService.getForm().subscribe(data => {
-              this.form = data;
-              this.lastSectionId = this.form.sections[this.form.sections.length - 1].id;
-              this.currentSectionId = this.section.id;
-            });*/
-    }
-    handleEmitValue(data, fieldName) {
-        this.section.body.details[fieldName] = data;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: GeneralApproverSectionComponent, deps: [{ token: I18nService }, { token: StateMachineService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: GeneralApproverSectionComponent, isStandalone: true, selector: "app-general-approver-section", inputs: { isReadOnly: "isReadOnly", section: "section", lov: "lov", className: "className" }, ngImport: i0, template: "<div\r\n  [ngClass]=\"{'form-section-divide form-section':!section?.header?.readOnly,'info-section':section?.header?.readOnly}\">\r\n  <ds-alert class=\"full\" type=\"warning\" icon=\"info\">\r\n\r\n    <div class=\"d-flex gap-2\">\r\n      General Approval working fine\r\n    </div>\r\n\r\n  </ds-alert>\r\n\r\n\r\n</div>\r\n\r\n\r\n<!--<div class=\"mt-4\" *ngIf=\"!section?.header?.readOnly\">\r\n\r\n  <div class=\"d-flex align-items-center gap-3\" *ngIf=\"lov?.decision?.type === 'button'\">\r\n    <ds-button shape=\"text\" color=\"red\" (click)=\"resetForm()\">\r\n      <span class=\"fs-16 fw-medium\">{{i18n.translate('reset')}}</span>\r\n    </ds-button>\r\n    <div class=\"d-flex flex-wrap align-items-center flex-grow-1 flex-row-reverse gap-3\">\r\n      <ng-container *ngFor=\"let item of lov?.decision?.options\">\r\n        <ds-button [ngClass]=\"{'disabled':!validForm(item?.value) || profileRequestorService.disableButtons}\"\r\n          (click)=\"onSubmit(item?.value) \" [loading]=\"profileRequestorService.isSubmitting[item?.value]\"\r\n          *ngIf=\"item?.value === 'SUBMIT'\">{{item?.description}}</ds-button>\r\n\r\n        <ds-button [ngClass]=\"{'disabled':!validForm(item?.value) || profileRequestorService.disableButtons}\"\r\n          (click)=\"onSubmit(item?.value) \" [loading]=\"profileRequestorService.isSubmitting[item?.value]\"\r\n          *ngIf=\"item?.value === 'APPROVE'\">{{item?.description}}</ds-button>\r\n        <ds-button [ngClass]=\"{'disabled':!validForm(item?.value) || profileRequestorService.disableButtons}\"\r\n          (click)=\"onSubmit(item?.value)\" shape=\"outline\" color=\"red\"\r\n          [loading]=\"profileRequestorService.isSubmitting[item?.value]\" *ngIf=\"item?.value === 'REJECT'\">\r\n          {{item?.description}}</ds-button>\r\n        <ds-button [ngClass]=\"{'disabled':!validForm(item?.value) || profileRequestorService.disableButtons}\"\r\n          (click)=\"onSubmit(item?.value)\" shape=\"outline\" color=\"red\"\r\n          [loading]=\"profileRequestorService.isSubmitting[item?.value]\" *ngIf=\"item?.value === 'CANCEL'\">\r\n          {{item?.description}}</ds-button>\r\n        <ds-button [ngClass]=\"{'disabled':!validForm(item?.value) || profileRequestorService.disableButtons}\"\r\n          (click)=\"onSubmit(item?.value)\" shape=\"outline\" [loading]=\"profileRequestorService.isSubmitting[item?.value]\"\r\n          *ngIf=\"item?.value === 'SENDBACK'\">\r\n          {{item?.description}}</ds-button>\r\n\r\n        <ds-button [ngClass]=\"{'disabled':!validForm(item?.value) || profileRequestorService.disableButtons}\"\r\n          (click)=\"onSubmit(item?.value) \" [loading]=\"profileRequestorService.isSubmitting[item?.value]\"\r\n          *ngIf=\"!(item?.value === 'SUBMIT' || item?.value === 'APPROVE' || item?.value === 'SENDBACK' || item?.value === 'REJECT' || item?.value === 'CANCEL')\">{{item?.description}}</ds-button>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"d-flex flex-wrap align-items-center flex-grow-1 justify-content-end gap-3\"\r\n    *ngIf=\"lov?.decision?.type !== 'button'\">\r\n    <ds-button shape=\"text\" color=\"red\" (click)=\"resetForm()\">\r\n      <span class=\"fs-16 fw-medium\">{{i18n.translate('reset')}}</span>\r\n    </ds-button>\r\n    <ds-button [ngClass]=\"{'disabled':!validForm('SUBMIT')}\"\r\n      [loading]=\"profileRequestorService.isSubmitting[item?.value]\"\r\n      (click)=\"onSubmit('SUBMIT') || profileRequestorService.disableButtons\">\r\n      {{i18n.translate('submit')}}\r\n    </ds-button>\r\n  </div>\r\n</div>-->\r\n", styles: [".form-section-divide{--form-section-columns: 1fr 1fr}@media (max-width: 756px){.form-section-divide{--form-section-columns: 100%}}.form-section-divide .full{grid-column:1/-1}.head-title{position:relative;margin-bottom:12px}.head-title h3{display:inline-block;color:#8e9aa0;font-size:14px;font-weight:500;background-color:#fff;padding-inline-end:20px;position:relative;z-index:2;margin:0}.head-title:after{content:\"\";position:absolute;width:100%;height:1px;background-color:#dee0e2;top:50%;left:0;right:0;transform:translateY(-50%);z-index:1}.chamber{margin-bottom:20px}.chamber .chamber-content{background-color:#f8f8f8;padding:20px}.chamber .chamber-content .chamber-select{display:flex}.chamber .chamber-content mat-checkbox{font-size:14px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: GeneralApproverSectionComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-general-approver-section', standalone: true, schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA], imports: [
-                        NgClass
-                    ], template: "<div\r\n  [ngClass]=\"{'form-section-divide form-section':!section?.header?.readOnly,'info-section':section?.header?.readOnly}\">\r\n  <ds-alert class=\"full\" type=\"warning\" icon=\"info\">\r\n\r\n    <div class=\"d-flex gap-2\">\r\n      General Approval working fine\r\n    </div>\r\n\r\n  </ds-alert>\r\n\r\n\r\n</div>\r\n\r\n\r\n<!--<div class=\"mt-4\" *ngIf=\"!section?.header?.readOnly\">\r\n\r\n  <div class=\"d-flex align-items-center gap-3\" *ngIf=\"lov?.decision?.type === 'button'\">\r\n    <ds-button shape=\"text\" color=\"red\" (click)=\"resetForm()\">\r\n      <span class=\"fs-16 fw-medium\">{{i18n.translate('reset')}}</span>\r\n    </ds-button>\r\n    <div class=\"d-flex flex-wrap align-items-center flex-grow-1 flex-row-reverse gap-3\">\r\n      <ng-container *ngFor=\"let item of lov?.decision?.options\">\r\n        <ds-button [ngClass]=\"{'disabled':!validForm(item?.value) || profileRequestorService.disableButtons}\"\r\n          (click)=\"onSubmit(item?.value) \" [loading]=\"profileRequestorService.isSubmitting[item?.value]\"\r\n          *ngIf=\"item?.value === 'SUBMIT'\">{{item?.description}}</ds-button>\r\n\r\n        <ds-button [ngClass]=\"{'disabled':!validForm(item?.value) || profileRequestorService.disableButtons}\"\r\n          (click)=\"onSubmit(item?.value) \" [loading]=\"profileRequestorService.isSubmitting[item?.value]\"\r\n          *ngIf=\"item?.value === 'APPROVE'\">{{item?.description}}</ds-button>\r\n        <ds-button [ngClass]=\"{'disabled':!validForm(item?.value) || profileRequestorService.disableButtons}\"\r\n          (click)=\"onSubmit(item?.value)\" shape=\"outline\" color=\"red\"\r\n          [loading]=\"profileRequestorService.isSubmitting[item?.value]\" *ngIf=\"item?.value === 'REJECT'\">\r\n          {{item?.description}}</ds-button>\r\n        <ds-button [ngClass]=\"{'disabled':!validForm(item?.value) || profileRequestorService.disableButtons}\"\r\n          (click)=\"onSubmit(item?.value)\" shape=\"outline\" color=\"red\"\r\n          [loading]=\"profileRequestorService.isSubmitting[item?.value]\" *ngIf=\"item?.value === 'CANCEL'\">\r\n          {{item?.description}}</ds-button>\r\n        <ds-button [ngClass]=\"{'disabled':!validForm(item?.value) || profileRequestorService.disableButtons}\"\r\n          (click)=\"onSubmit(item?.value)\" shape=\"outline\" [loading]=\"profileRequestorService.isSubmitting[item?.value]\"\r\n          *ngIf=\"item?.value === 'SENDBACK'\">\r\n          {{item?.description}}</ds-button>\r\n\r\n        <ds-button [ngClass]=\"{'disabled':!validForm(item?.value) || profileRequestorService.disableButtons}\"\r\n          (click)=\"onSubmit(item?.value) \" [loading]=\"profileRequestorService.isSubmitting[item?.value]\"\r\n          *ngIf=\"!(item?.value === 'SUBMIT' || item?.value === 'APPROVE' || item?.value === 'SENDBACK' || item?.value === 'REJECT' || item?.value === 'CANCEL')\">{{item?.description}}</ds-button>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"d-flex flex-wrap align-items-center flex-grow-1 justify-content-end gap-3\"\r\n    *ngIf=\"lov?.decision?.type !== 'button'\">\r\n    <ds-button shape=\"text\" color=\"red\" (click)=\"resetForm()\">\r\n      <span class=\"fs-16 fw-medium\">{{i18n.translate('reset')}}</span>\r\n    </ds-button>\r\n    <ds-button [ngClass]=\"{'disabled':!validForm('SUBMIT')}\"\r\n      [loading]=\"profileRequestorService.isSubmitting[item?.value]\"\r\n      (click)=\"onSubmit('SUBMIT') || profileRequestorService.disableButtons\">\r\n      {{i18n.translate('submit')}}\r\n    </ds-button>\r\n  </div>\r\n</div>-->\r\n", styles: [".form-section-divide{--form-section-columns: 1fr 1fr}@media (max-width: 756px){.form-section-divide{--form-section-columns: 100%}}.form-section-divide .full{grid-column:1/-1}.head-title{position:relative;margin-bottom:12px}.head-title h3{display:inline-block;color:#8e9aa0;font-size:14px;font-weight:500;background-color:#fff;padding-inline-end:20px;position:relative;z-index:2;margin:0}.head-title:after{content:\"\";position:absolute;width:100%;height:1px;background-color:#dee0e2;top:50%;left:0;right:0;transform:translateY(-50%);z-index:1}.chamber{margin-bottom:20px}.chamber .chamber-content{background-color:#f8f8f8;padding:20px}.chamber .chamber-content .chamber-select{display:flex}.chamber .chamber-content mat-checkbox{font-size:14px}\n"] }]
-        }], ctorParameters: () => [{ type: I18nService }, { type: StateMachineService }], propDecorators: { isReadOnly: [{
-                type: Input
-            }], section: [{
-                type: Input
-            }], lov: [{
-                type: Input
-            }], className: [{
-                type: Input
-            }] } });
-
-var segmentDynamicLoaderConfiguration = {
-    roleToApprovalSectionMapping: {
-        vpr_d: GeneralApproverSectionComponent
-    }
-};
-
 class SegmentDynamicLoaderService {
     i18n;
     requestDetailsSection = RequestDetailsSectionComponent;
@@ -6777,12 +6901,12 @@ class CoreAppComponent {
         }
         window.scrollTo(0, 0);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: CoreAppComponent, deps: [{ token: SegmentDynamicLoaderService }, { token: DOCUMENT }, { token: i2$2.Router }, { token: SidenavService }, { token: CoreService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: CoreAppComponent, deps: [{ token: SegmentDynamicLoaderService }, { token: DOCUMENT }, { token: i2$4.Router }, { token: SidenavService }, { token: CoreService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: CoreAppComponent, isStandalone: true, selector: "lib-app", providers: [
             { provide: DynamicComponentInjectorToken, useValue: { /* your value here */} }
-        ], ngImport: i0, template: "<core-layout>\r\n  @if (!loading['form']) {\r\n    <core-service-header\r\n      [isLoading]=\"false\"\r\n      [formTitle]=\"formTitle\"\r\n      [form]=\"form\">\r\n    </core-service-header>\r\n  <app-workflow-section\r\n      workflow\r\n      [form]=\"form\"\r\n       [segmentDynamicLoaderService]=\"segmentDynamicLoader\"\r\n      [sections]=\"form?.sections\">\r\n \r\n      <app-request-details-section [section]=\"form?.sections[0]\" [lov]=\"form?.lovs\" className=\"form-section\"></app-request-details-section>\r\n      <!--      [isReadOnly]=\"form.sections[0].header.readOnly\"-->\r\n    </app-workflow-section>\r\n  } @else {\r\n    <core-service-header header [formTitle]=\"formTitle\" [isLoading]=\"true\">\r\n    </core-service-header>\r\n  }\r\n</core-layout>\r\n", styles: [""], dependencies: [{ kind: "component", type: 
+        ], ngImport: i0, template: "<core-layout>\r\n  @if (!loading['form']) {\r\n    <core-service-header\r\n      [isLoading]=\"false\"\r\n      [formTitle]=\"formTitle\"\r\n      [form]=\"form\">\r\n    </core-service-header>\r\n  <app-workflow-section\r\n      workflow\r\n      [form]=\"form\"\r\n       [segmentDynamicLoaderService]=\"segmentDynamicLoader\"\r\n      [sections]=\"form?.sections\">\r\n\r\n      <app-request-details-section [form]=\"form\" [section]=\"form?.sections[0]\" [lov]=\"form?.lovs\" className=\"form-section\"></app-request-details-section>\r\n      <!--      [isReadOnly]=\"form.sections[0].header.readOnly\"-->\r\n    </app-workflow-section>\r\n  } @else {\r\n    <core-service-header header [formTitle]=\"formTitle\" [isLoading]=\"true\">\r\n    </core-service-header>\r\n  }\r\n</core-layout>\r\n", styles: [""], dependencies: [{ kind: "component", type: 
                 // DynamicModule,
-                LayoutComponent, selector: "core-layout", inputs: ["form", "formTitle", "isLoading", "serviceBrief"] }, { kind: "component", type: ServiceHeaderComponent, selector: "core-service-header", inputs: ["form", "showHistory", "isLoading", "showApprovalHistory", "approvalHistory", "creationDate", "formTitle", "section", "serviceBrief"] }, { kind: "component", type: WorkflowSectionComponent, selector: "app-workflow-section", inputs: ["sections", "isReadOnly", "isLoading", "form", "contentClass", "sectionsController", "segmentDynamicLoaderService", "sectionFormComponent", "sectionName"], outputs: ["sectionSubmitted"] }, { kind: "component", type: RequestDetailsSectionComponent, selector: "app-request-details-section", inputs: ["isReadOnly", "section", "lov", "className"] }] });
+                LayoutComponent, selector: "core-layout", inputs: ["form", "formTitle", "isLoading", "serviceBrief"] }, { kind: "component", type: ServiceHeaderComponent, selector: "core-service-header", inputs: ["form", "showHistory", "isLoading", "showApprovalHistory", "approvalHistory", "creationDate", "formTitle", "section", "serviceBrief"] }, { kind: "component", type: WorkflowSectionComponent, selector: "app-workflow-section", inputs: ["sections", "isReadOnly", "isLoading", "form", "contentClass", "sectionsController", "segmentDynamicLoaderService", "sectionFormComponent", "sectionName"], outputs: ["sectionSubmitted"] }, { kind: "component", type: RequestDetailsSectionComponent, selector: "app-request-details-section", inputs: ["isReadOnly", "section", "form", "lov", "className"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: CoreAppComponent, decorators: [{
             type: Component,
@@ -6794,11 +6918,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                         RequestDetailsSectionComponent
                     ], providers: [
                         { provide: DynamicComponentInjectorToken, useValue: { /* your value here */} }
-                    ], template: "<core-layout>\r\n  @if (!loading['form']) {\r\n    <core-service-header\r\n      [isLoading]=\"false\"\r\n      [formTitle]=\"formTitle\"\r\n      [form]=\"form\">\r\n    </core-service-header>\r\n  <app-workflow-section\r\n      workflow\r\n      [form]=\"form\"\r\n       [segmentDynamicLoaderService]=\"segmentDynamicLoader\"\r\n      [sections]=\"form?.sections\">\r\n \r\n      <app-request-details-section [section]=\"form?.sections[0]\" [lov]=\"form?.lovs\" className=\"form-section\"></app-request-details-section>\r\n      <!--      [isReadOnly]=\"form.sections[0].header.readOnly\"-->\r\n    </app-workflow-section>\r\n  } @else {\r\n    <core-service-header header [formTitle]=\"formTitle\" [isLoading]=\"true\">\r\n    </core-service-header>\r\n  }\r\n</core-layout>\r\n" }]
+                    ], template: "<core-layout>\r\n  @if (!loading['form']) {\r\n    <core-service-header\r\n      [isLoading]=\"false\"\r\n      [formTitle]=\"formTitle\"\r\n      [form]=\"form\">\r\n    </core-service-header>\r\n  <app-workflow-section\r\n      workflow\r\n      [form]=\"form\"\r\n       [segmentDynamicLoaderService]=\"segmentDynamicLoader\"\r\n      [sections]=\"form?.sections\">\r\n\r\n      <app-request-details-section [form]=\"form\" [section]=\"form?.sections[0]\" [lov]=\"form?.lovs\" className=\"form-section\"></app-request-details-section>\r\n      <!--      [isReadOnly]=\"form.sections[0].header.readOnly\"-->\r\n    </app-workflow-section>\r\n  } @else {\r\n    <core-service-header header [formTitle]=\"formTitle\" [isLoading]=\"true\">\r\n    </core-service-header>\r\n  }\r\n</core-layout>\r\n" }]
         }], ctorParameters: () => [{ type: SegmentDynamicLoaderService }, { type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
-                }] }, { type: i2$2.Router }, { type: SidenavService }, { type: CoreService }] });
+                }] }, { type: i2$4.Router }, { type: SidenavService }, { type: CoreService }] });
 
 function encodePassword(formId, password) {
     const formIdString = Array.from(new TextEncoder().encode(formId), (x) => String.fromCodePoint(x)).join('');
@@ -6957,24 +7081,6 @@ class BuiltInCustomValidators {
     }
 }
 
-var saveForm = {
-    beforeTranspileSection(section) {
-        const hookResult = section;
-        // Here should be the code to manipulate the section object before the transpile stage
-        return hookResult;
-    },
-    beforeSendPayload(submitPayload) {
-        const hookResult = submitPayload;
-        // Here should be the code to manipulate the submit payload before the request to backend
-        return hookResult;
-    },
-    afterSendPayload(responsePayload) {
-        const hookResult = responsePayload;
-        // Here should be the code to manipulate the response payload to a submit of a form
-        return hookResult;
-    }
-};
-
 /* eslint-disable @typescript-eslint/no-empty-function */
 /* eslint-disable @angular-eslint/directive-selector */
 class ArOnlyDirective {
@@ -7299,5 +7405,5 @@ const MY_LIB_CONFIG_TOKEN = new InjectionToken('MyLibConfig');
  * Generated bundle index. Do not edit.
  */
 
-export { ActionButtonsComponent, ActionStateService, ArOnlyDirective, AttachmentSectionComponent, AttachmentSectionDataComponent, BaseComponent, BuiltInCustomValidators, COMMENT_CONTAINER, CheckBoxComponent, CommentSectionComponent, CommentsDrop, ConfirmDialogComponent, ConfirmationPopupComponent, CoreAppComponent, CoreI18nService, CoreService, CustomSearchableComponent, DATE_DASH, DATE_SLASH, DATE_TIME, DONT_SHOW, DatePickerComponent, DateRangePickerComponent, DeleteDialogComponent, DeletePopupComponent, DocsUploaderComponent, EnOnlyDirective, 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, FormValidation, 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, InputMaskComponent, InputNumberComponent, InputTelephoneComponent, LANGUAGE_CODE_AR, LANGUAGE_CODE_EN, LOGOUT_URL, LayoutComponent, MY_LIB_CONFIG_TOKEN, MainRequestDetailsComponent, Messages, MycurrencyDirective, MycurrencyPipe, NO_COMMENTS, NO_VALUE, PROCESS_NAME_CODE, PROFILE_CONTAINER, ProfileInfoDrop, ProfileSectionComponent, READ_ONLY, REPORT, ROLE_REQUESTER, RadioComponent, 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, SpecialCharacterDirective, StatusComponent, SubmitDialogComponent, TARGET_SERVER_DP, TARGET_SERVER_WM, TRUE_BOOL, TRUE_STRING, TableListComponent, TermsConditionsComponent, TextDirective, TextareaComponent, TitleSectionComponent, ToggleButtonComponent, URL_SEPARATOR, WM_ACTION_SAVE, WM_ACTION_SAVE_CHANGES, WM_ACTION_SUBMIT, WRITE_MODE, WorkflowSectionComponent, dataURItoBlob, encodePassword, handelErrorResponse, isValidData, stringToBooleanPipe, validateSAID };
+export { APPROVERS, ActionButtonsComponent, ActionStateService, ArOnlyDirective, AttachmentSectionComponent, AttachmentSectionDataComponent, BaseComponent, BuiltInCustomValidators, COMMENT_CONTAINER, CheckBoxComponent, CommentSectionComponent, CommentsDrop, ConfirmDialogComponent, ConfirmationPopupComponent, CoreAppComponent, CoreI18nService, CoreService, CustomSearchableComponent, DATE_DASH, DATE_SLASH, DATE_TIME, DONT_SHOW, DatePickerComponent, DateRangePickerComponent, DeleteDialogComponent, DeletePopupComponent, DocsUploaderComponent, EnOnlyDirective, 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, FormValidation, 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, InputMaskComponent, InputNumberComponent, InputTelephoneComponent, LANGUAGE_CODE_AR, LANGUAGE_CODE_EN, LOGOUT_URL, LayoutComponent, MY_LIB_CONFIG_TOKEN, MainRequestDetailsComponent, Messages, MycurrencyDirective, MycurrencyPipe, NO_COMMENTS, NO_VALUE, PROCESS_NAME_CODE, PROFILE_CONTAINER, ProfileInfoDrop, ProfileSectionComponent, READ_ONLY, REPORT, ROLE_REQUESTER, RadioComponent, 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, SpecialCharacterDirective, StatusComponent, SubmitDialogComponent, TARGET_SERVER_DP, TARGET_SERVER_WM, TRUE_BOOL, TRUE_STRING, TableListComponent, TermsConditionsComponent, TextDirective, TextareaComponent, TitleSectionComponent, ToggleButtonComponent, URL_SEPARATOR, WM_ACTION_SAVE, WM_ACTION_SAVE_CHANGES, WM_ACTION_SUBMIT, WORKFLOW_ITEMS, WRITE_MODE, WorkflowSectionComponent, dataURItoBlob, encodePassword, handelErrorResponse, isValidData, stringToBooleanPipe, validateSAID };
 //# sourceMappingURL=bpm-core.mjs.map