bpm-core 0.0.1 → 0.0.3

package/fesm2022/bpm-core.mjs

@@ -1,97 +1,200 @@
 import * as i0 from '@angular/core';
-import { Component, CUSTOM_ELEMENTS_SCHEMA, Inject, Injectable, Pipe, forwardRef, EventEmitter, Input, Output, ViewChild, Directive, HostListener, InjectionToken } from '@angular/core';
-import * as i1 from '@angular/material/dialog';
+import { Injectable, Inject, PLATFORM_ID, Component, CUSTOM_ELEMENTS_SCHEMA, Input, ViewChild, EventEmitter, Output, Pipe, forwardRef, Directive, HostListener, InjectionToken } from '@angular/core';
+import * as i4 from '@angular/common';
+import { CommonModule, NgIf, NgComponentOutlet, NgClass, NgForOf, NgTemplateOutlet, NgSwitchCase, DecimalPipe, DatePipe, NgSwitchDefault, NgSwitch, AsyncPipe, SlicePipe, DOCUMENT } from '@angular/common';
+import * as i3$1 from '@angular/material/sidenav';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import * as i1$1 from '@angular/router';
+import { RouterModule, RouterLinkActive, RouterLink, RouterOutlet } from '@angular/router';
+import * as i1$3 from '@angular/forms';
+import { FormControl, ReactiveFormsModule, FormsModule, NG_VALUE_ACCESSOR, ControlContainer, NgForm, Validators } from '@angular/forms';
+import * as i5 from '@angular/material/menu';
+import { MatMenuModule, MatMenu, MatMenuTrigger, MatMenuItem } from '@angular/material/menu';
+import * as i6 from '@angular/material/toolbar';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { Subject, ReplaySubject, BehaviorSubject, throwError, catchError } from 'rxjs';
+import * as i1 from '@angular/common/http';
+import { HttpHeaders } from '@angular/common/http';
+import { map, startWith } from 'rxjs/operators';
+import * as i3 from '@angular/material/tooltip';
+import { MatTooltipModule, MatTooltip } from '@angular/material/tooltip';
+import { MatExpansionPanel, MatAccordion, MatExpansionPanelTitle } from '@angular/material/expansion';
+import { ComponentOutletIoDirective } from 'ng-dynamic-component';
+import * as i1$2 from '@ncstate/sat-popover';
+import { SatPopoverModule } from '@ncstate/sat-popover';
+import * as moment from 'moment';
+import * as i1$4 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialogContent, MatDialogActions, MatDialogClose, MatDialogTitle } from '@angular/material/dialog';
 import { MatButton } from '@angular/material/button';
-import { NgIf, NgClass, NgForOf, NgTemplateOutlet, NgSwitchCase, DecimalPipe, DatePipe, NgSwitchDefault, NgSwitch, AsyncPipe, SlicePipe, NgComponentOutlet } from '@angular/common';
-import { Subject, ReplaySubject, BehaviorSubject, catchError, throwError } from 'rxjs';
 import { NoopScrollStrategy } from '@angular/cdk/overlay';
-import * as i4 from '@angular/material/core';
+import * as i4$1 from '@angular/material/core';
 import { MAT_DATE_FORMATS, DateAdapter, MAT_DATE_LOCALE } from '@angular/material/core';
-import * as i1$1 from '@angular/forms';
-import { NG_VALUE_ACCESSOR, FormControl, ControlContainer, NgForm, FormsModule, Validators, ReactiveFormsModule } from '@angular/forms';
-import * as i2 from '@angular/common/http';
-import { HttpHeaders } from '@angular/common/http';
 import * as i7 from '@angular/platform-browser';
 import * as FileSaver from 'file-saver';
 import { ImageCropperComponent } from 'ngx-image-cropper';
 import { MatError, MatHint, MatFormField } from '@angular/material/form-field';
 import { MatCheckbox } from '@angular/material/checkbox';
-import { startWith, map } from 'rxjs/operators';
 import { MatSlideToggle } from '@angular/material/slide-toggle';
-import * as i1$3 from '@angular/material/autocomplete';
+import * as i1$5 from '@angular/material/autocomplete';
 import { MatAutocomplete, MatOption, MatAutocompleteTrigger, MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MomentDateAdapter, MAT_MOMENT_DATE_ADAPTER_OPTIONS } from '@angular/material-moment-adapter';
 import { MatDatepicker, MatDatepickerToggle, MatDatepickerInput } from '@angular/material/datepicker';
-import * as moment from 'moment';
-import * as i1$2 from '@ncstate/sat-popover';
-import { SatPopoverModule } from '@ncstate/sat-popover';
 import { NgxMaskDirective } from 'ngx-mask';
 import { MatInput } from '@angular/material/input';
 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$1 from '@angular/material/table';
+import * as i2 from '@angular/material/table';
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
-import * as i1$4 from '@angular/material/paginator';
+import * as i1$6 from '@angular/material/paginator';
 import { MatPaginatorModule } from '@angular/material/paginator';
-import { RouterLink } from '@angular/router';
-import { MatMenu, MatMenuTrigger, MatMenuItem } from '@angular/material/menu';
 import { moveItemInArray, CdkDropList, CdkDrag } from '@angular/cdk/drag-drop';
-import { MatTooltip } from '@angular/material/tooltip';
 import { MatRadioButton, MatRadioGroup } from '@angular/material/radio';
-import { MatAccordion, MatExpansionPanel, MatExpansionPanelTitle } from '@angular/material/expansion';
 import { MatDivider } from '@angular/material/divider';
-import { ComponentOutletIoDirective } from 'ng-dynamic-component';
-
-/* eslint-disable @angular-eslint/component-selector */
-/* eslint-disable @typescript-eslint/no-explicit-any */
-class ConfirmationPopupComponent {
-    data;
-    dialogRef;
-    constructor(data, dialogRef) {
-        this.data = data;
-        this.dialogRef = dialogRef;
-    }
-    openForm() {
-        window.open("/group/i-gate/wm-bpm/forms?formId=" + this.data.id);
-        location.reload();
-    }
-    delete() {
-        this.dialogRef.close('yes');
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ConfirmationPopupComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: ConfirmationPopupComponent, isStandalone: true, selector: "app-delete-popup", 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 text-center justify-content-center mb-2 mx-5\">\r\n      <h2 class=\"fs-22 font-md-18 fw-medium fc-onyx my-3\">\r\n        <!-- {{ 'submittedSuccessfully' | transloco}} -->\r\n      </h2>\r\n      <h4 class=\"fs-14 fw-normal fst-italic fc-onyx bg-color-light-gray p-3 mb-1\">\r\n        <!-- <span>{{ 'formId' | transloco}}</span> -->\r\n        <span class=\"mx-1\"></span>\r\n        <span class=\"fs-weight-medium\">{{data.id}}</span>\r\n      </h4>\r\n    </div>\r\n  </mat-dialog-content>\r\n  <mat-dialog-actions>\r\n    <div class=\"d-flex justify-content-center w-100 mb-4 px-md-5\" *ngIf=\"data.type === 'view'\">\r\n      <button mat-stroked-button class=\"btn button-primary shadow-hover px-4\" matDialogClose>\r\n        <!-- {{ 'Close' | transloco}}  -->\r\n      </button>\r\n      <button mat-flat-button class=\"btn button-primary font-17 fw-medium px-4\" (click)=\"openForm()\">\r\n        <!-- {{ 'ViewRequest' | transloco}} -->\r\n        </button>\r\n    </div>\r\n    <div class=\"d-flex justify-content-center w-100 mb-4 px-md-5\"  *ngIf=\"data.type === 'delete'\">\r\n      <button mat-flat-button class=\"btn button-red\" [mat-dialog-close]='true' >\r\n        Delete\r\n      </button>\r\n      <span class=\"mx-2\"></span>\r\n      <button mat-flat-button class=\"btn button-primary\" matDialogClose>\r\n        Cancel\r\n      </button>\r\n    </div>\r\n    <div class=\"d-flex justify-content-center w-100 mb-4 px-md-5\" *ngIf=\"data.type === 'done'\">\r\n      <button mat-flat-button class=\"btn button-primary shadow-hover px-4\" matDialogClose>\r\n        Close\r\n      </button>\r\n    </div>\r\n  </mat-dialog-actions>\r\n\r\n</div>\r\n", styles: [".icon{font-size:40px;min-width:75px;width:75px;height:75px;background-color:#00c48c;padding:5px;display:flex;align-items:center;justify-content:center;margin:auto;color:#fff;border-radius:50%}\n"], dependencies: [{ kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ConfirmationPopupComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-delete-popup', schemas: [CUSTOM_ELEMENTS_SCHEMA], standalone: true, imports: [
-                        MatDialogContent,
-                        MatDialogActions,
-                        MatButton,
-                        MatDialogClose,
-                        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 text-center justify-content-center mb-2 mx-5\">\r\n      <h2 class=\"fs-22 font-md-18 fw-medium fc-onyx my-3\">\r\n        <!-- {{ 'submittedSuccessfully' | transloco}} -->\r\n      </h2>\r\n      <h4 class=\"fs-14 fw-normal fst-italic fc-onyx bg-color-light-gray p-3 mb-1\">\r\n        <!-- <span>{{ 'formId' | transloco}}</span> -->\r\n        <span class=\"mx-1\"></span>\r\n        <span class=\"fs-weight-medium\">{{data.id}}</span>\r\n      </h4>\r\n    </div>\r\n  </mat-dialog-content>\r\n  <mat-dialog-actions>\r\n    <div class=\"d-flex justify-content-center w-100 mb-4 px-md-5\" *ngIf=\"data.type === 'view'\">\r\n      <button mat-stroked-button class=\"btn button-primary shadow-hover px-4\" matDialogClose>\r\n        <!-- {{ 'Close' | transloco}}  -->\r\n      </button>\r\n      <button mat-flat-button class=\"btn button-primary font-17 fw-medium px-4\" (click)=\"openForm()\">\r\n        <!-- {{ 'ViewRequest' | transloco}} -->\r\n        </button>\r\n    </div>\r\n    <div class=\"d-flex justify-content-center w-100 mb-4 px-md-5\"  *ngIf=\"data.type === 'delete'\">\r\n      <button mat-flat-button class=\"btn button-red\" [mat-dialog-close]='true' >\r\n        Delete\r\n      </button>\r\n      <span class=\"mx-2\"></span>\r\n      <button mat-flat-button class=\"btn button-primary\" matDialogClose>\r\n        Cancel\r\n      </button>\r\n    </div>\r\n    <div class=\"d-flex justify-content-center w-100 mb-4 px-md-5\" *ngIf=\"data.type === 'done'\">\r\n      <button mat-flat-button class=\"btn button-primary shadow-hover px-4\" matDialogClose>\r\n        Close\r\n      </button>\r\n    </div>\r\n  </mat-dialog-actions>\r\n\r\n</div>\r\n", styles: [".icon{font-size:40px;min-width:75px;width:75px;height:75px;background-color:#00c48c;padding:5px;display:flex;align-items:center;justify-content:center;margin:auto;color:#fff;border-radius:50%}\n"] }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [MAT_DIALOG_DATA]
-                }] }, { type: i1.MatDialogRef }] });
 
-/* eslint-disable @angular-eslint/component-selector */
-/* eslint-disable @typescript-eslint/no-empty-function */
-class DeletePopupComponent {
-    constructor() { }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: DeletePopupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: DeletePopupComponent, isStandalone: true, selector: "app-delete-popup", ngImport: i0, template: "<div class=\"popup-container\">\r\n  <div class=\"d-flex align-items-center justify-content-end\" mat-dialog-title>\r\n    <button class=\"mat-close-modal\" matDialogClose>\r\n      <span class=\"sfi sfi-close fc-black\"></span>\r\n    </button>\r\n  </div>\r\n  <mat-dialog-content class=\"border-0 pt-0\">\r\n    <div class=\"d-flex flex-column align-items-center justify-content-center\">\r\n      <span class=\"sfi sfi-trash font-50 fc-coral mb-2\"></span>\r\n      <h2 class=\"fs-31 font-md-25 fw-bold fc-onyx mb-0\">\r\n        Are you sure !\r\n      </h2>\r\n      <h4 class=\"fs-15 fw-normal fc-dark-gray mb-0\">you want Delete This Car</h4>\r\n    </div>\r\n  </mat-dialog-content>\r\n  <mat-dialog-actions>\r\n    <div class=\"d-flex justify-content-center w-100 mb-4 px-md-5\">\r\n      <button class=\"btn button-secondary font-13 fw-medium h-51 w-100\" matDialogClose>\r\n        <span>Cancel</span>\r\n      </button>\r\n      <span class=\"mx-2\"></span>\r\n      <button class=\"btn button-primary font-13 fw-medium h-51 w-100\">\r\n        <span>Delete</span>\r\n      </button>\r\n    </div>\r\n  </mat-dialog-actions>\r\n\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: DeletePopupComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-delete-popup', schemas: [CUSTOM_ELEMENTS_SCHEMA], standalone: true, imports: [
-                        MatDialogContent,
-                        MatDialogClose,
-                        MatDialogActions
-                    ], template: "<div class=\"popup-container\">\r\n  <div class=\"d-flex align-items-center justify-content-end\" mat-dialog-title>\r\n    <button class=\"mat-close-modal\" matDialogClose>\r\n      <span class=\"sfi sfi-close fc-black\"></span>\r\n    </button>\r\n  </div>\r\n  <mat-dialog-content class=\"border-0 pt-0\">\r\n    <div class=\"d-flex flex-column align-items-center justify-content-center\">\r\n      <span class=\"sfi sfi-trash font-50 fc-coral mb-2\"></span>\r\n      <h2 class=\"fs-31 font-md-25 fw-bold fc-onyx mb-0\">\r\n        Are you sure !\r\n      </h2>\r\n      <h4 class=\"fs-15 fw-normal fc-dark-gray mb-0\">you want Delete This Car</h4>\r\n    </div>\r\n  </mat-dialog-content>\r\n  <mat-dialog-actions>\r\n    <div class=\"d-flex justify-content-center w-100 mb-4 px-md-5\">\r\n      <button class=\"btn button-secondary font-13 fw-medium h-51 w-100\" matDialogClose>\r\n        <span>Cancel</span>\r\n      </button>\r\n      <span class=\"mx-2\"></span>\r\n      <button class=\"btn button-primary font-13 fw-medium h-51 w-100\">\r\n        <span>Delete</span>\r\n      </button>\r\n    </div>\r\n  </mat-dialog-actions>\r\n\r\n</div>\r\n" }]
-        }], ctorParameters: () => [] });
+// Constant for basic validations
+const DONT_SHOW = null;
+const NO_COMMENTS = false;
+const HAS_COMMENTS = true;
+const URL_SEPARATOR = '/';
+const READ_ONLY = true;
+const WRITE_MODE = false;
+const NO_VALUE = null;
+const TRUE_STRING = 'TRUE';
+const FALSE_STRING = 'FALSE';
+const TRUE_BOOL = true;
+const FALSE_BOOL = false;
+// State Machine statuses
+const STATE_MACHINE_STATUS_IDLE = 'idle';
+const STATE_MACHINE_STATUS_FETCHING = 'fetching';
+const STATE_MACHINE_STATUS_SENDING = 'sending';
+const STATE_MACHINE_STATUS_RESULT = 'result';
+const STATE_MACHINE_STATUS_ERROR = 'error';
+// State Machine actions
+const STATE_MACHINE_ACTION_LOAD_FORM = 'loadForm';
+const STATE_MACHINE_ACTION_SUBMIT_FORM = 'submitForm';
+const STATE_MACHINE_ACTION_SEARCH_EMPLOYEE = 'searchEmployee';
+const STATE_MACHINE_ACTION_EMPLOYEE_PROFILE = 'employeeProfile';
+const STATE_MACHINE_ACTION_SUCCESS_WM = 'successWm';
+const STATE_MACHINE_ACTION_SUCCESS_RESPONSE = 'serviceResponce';
+const STATE_MACHINE_ACTION_SUCCESS_USERS = 'successUsers';
+const STATE_MACHINE_ACTION_CONVERT = 'convert';
+const STATE_MACHINE_ACTION_SUCCESS = 'success';
+const STATE_MACHINE_ACTION_FAILURE = 'failure';
+const STATE_MACHINE_ACTION_HANDLE_ERROR = 'handleError';
+const STATE_MACHINE_ACTION_LOAD_FILE = 'loadFile';
+const STATE_MACHINE_ACTION_USER_MAF = 'userDetails';
+const STATE_MACHINE_ACTION_USER_CEP = 'user';
+const STATE_MACHINE_ACTION_CALC = 'calc';
+const STATE_MACHINE_ACTION_SHOW_PRINT = 'showPrint';
+const STATE_MACHINE_ACTION_SUCCESS_PRINT = 'successPrint';
+const SERVICE_NAME_WM_HTML_GENERATOR = 'htmlGenerator';
+// Process name code
+const PROCESS_NAME_CODE = 'SCR';
+// HTTP protocols that are available
+const HTTP_PROTOCOL_HTTP = 'http://';
+const HTTP_PROTOCOL_HTTPS = 'https://';
+// Liferay constants
+// export const LR_AUTH_SERVICE_URL_PATH = '/group/i-gate/wm-bpm/forms/-/proxy/authenticate';
+// export const LR_SERVICE_URL_PATH = '/group/i-gate/wm-bpm/forms/-/proxy/execute';
+// export const LR_SERVICE_URL_HOST = '10.0.0.48';
+// export const LR_SERVICE_URL_HOST_DEV = '10.0.0.156';
+// export const LR_SERVICE_URL_PORT_DEV = '8000';
+// export const LR_SERVICE_URL_PATH_DEV = '/new.json';
+// export const LR_SERVICE_URL_PORT = '17899';
+// HTTP methods that are available are
+const HTTP_METHOD_GET = 'GET';
+const HTTP_METHOD_POST = 'POST';
+const HTTP_METHOD_PUT = 'PUT';
+// Available servers to the UI
+const TARGET_SERVER_WM = 'WM';
+const TARGET_SERVER_DP = 'DP';
+// Service Names that are available
+const SERVICE_NAME_WM_FORM = 'form';
+const SERVICE_NAME_WM_CHILD_FORM = '';
+const SERVICE_NAME_DP_SEARCH_EMPLOYEE = 'igate.users.search.v3';
+// Languages codes available in the application
+const LANGUAGE_CODE_EN = 'en';
+const LANGUAGE_CODE_AR = 'ar';
+// URLs form static assets
+const IGATE_STATIC_ASSET_PROFILE_PHOTO_URL = '/group/i-gate/wm-bpm/forms/-/proxy/portrait?email=';
+const HEADER_CONTENT_TYPE_FORM = 'application/x-www-form-urlencoded';
+// Roles constants
+const ROLE_REQUESTER = 'R';
+// Section IDs
+const SECTION_ID_REQUEST_DETAILS = 'requestDetails';
+const SECTION_ID_GM_PARTIAL_ROLE = 'GM';
+const SECTION_ID_SM_PARTIAL_ROLE = 'SM';
+const SECTION_ID_DM_PARTIAL_ROLE = 'DM';
+const SECTION_ID_VP_PARTIAL_ROLE = 'VP';
+const SECTION_ID_SVP_PARTIAL_ROLE = 'SVP';
+const SECTION_ID_EXECUTE_PARTIAL_ROLE = 'GovtRelationsLead';
+const SECTION_ID_PERFORM_PARTIAL_ROLE = 'GovtRelationsMember';
+const SECTION_ID_EMP_INFO_APPROVAL_PARTIAL_ROLE = 'EmpInfo';
+const SECTION_ID_PAYROLL_APPROVAL_PARTIAL_ROLE = 'Payroll';
+const SECTION_ID_REQUESTER_PARTIAL_NAME = 'Requester';
+const SECTION_ID_APPROVAL_PARTIAL_NAME = 'Approval';
+const SECTION_ID_NOTHING_PARTIAL_NAME = '';
+const SECTION_STATUS_PENDING = 'PENDING';
+const SECTION_STATUS_APPROVED = 'APPROVED';
+const SECTION_STATUS_UNSATISFIED = 'UNSATISFIED';
+const WM_ACTION_SAVE = 'SAVE';
+const WM_ACTION_SUBMIT = 'SUBMIT';
+const FORM_STATUS_NEW = 'NEW';
+const FORM_STATUS_PENDING = 'PENDING';
+const FORM_STATUS_APPROVED = 'APPROVED';
+const FORM_STATUS_REJECTED = 'REJECTED';
+const FORM_STATUS_SEND_BACK = 'SENDBACK';
+const FORM_STATUS_CANCELLED = 'CANCELLED';
+const FORM_STATUS_COMPLETED = 'COMPLETED';
+const STATE_MACHINE_ACTION_LOAD_HISTORY = 'loadHistory';
+const STATE_MACHINE_ACTION_SUCCESS_HISTORY = 'successHistory';
+const SERVICE_NAME_DP_LOAD_HISTORY = 'igate.get.inbox.item.workflow';
+const WM_ACTION_SAVE_CHANGES = 'SAVE_CHANGES';
+const SERVICE_NAME_WM_DRAFT_FORM = 'draft';
+// feedback and flag
+const STATE_MACHINE_ACTION_GET_INBOX_ITEM = 'getInboxItem';
+const SERVICE_NAME_DP_INBOX_ITEM = 'igate.get.inbox.item';
+const STATE_MACHINE_ACTION_SUCCESS_INBOX_ITEM = 'successInboxItem';
+const STATE_MACHINE_ACTION_SET_FLAG = 'setFlagPriority';
+const SERVICE_NAME_DP_UPDATE_INBOX_ITEM = 'igate.update.inbox.item';
+const STATE_MACHINE_ACTION_INBOX_ITEM_RESPONSE = 'inboxItemResponse';
+const FEEDBACK_STATUS_REQUEST = 'requestFeedback';
+const FEEDBACK_STATUS_RESPOND = 'respondToFeedback';
+const FEEDBACK_STATUS_WAITING = 'waitingFeedback';
+const FEEDBACK_STATUS_RESPONDED = 'feedbackResponded';
+const STATE_MACHINE_ACTION_SUBMIT_FEEDBACK = 'submitFeedback';
+const STATE_MACHINE_ACTION_GET_FEEDBACK = 'getFeedback';
+const STATE_MACHINE_ACTION_UPDATE_FEEDBACK = 'submitFeedbackResponse';
+const SERVICE_NAME_DP_CREATE_FEEDBACK = 'igate.create.inbox.item.feedback';
+const STATE_NAME_DP_GET_FEEDBACK = 'igate.get.inbox.item.feedback';
+const SERVICE_NAME_DP_UPDATE_FEEDBACK = 'igate.update.inbox.item.feedback';
+const PROFILE_CONTAINER = '#profileFormContent';
+const COMMENT_CONTAINER = '#commentsFormContent';
+const FEEDBACK_CONTAINER = '#feedbackFormContent';
+const INBOX_STATUS_PENDING = 'pending';
+const INBOX_STATUS_PROCESSED = 'processed';
+const INBOX_STATUS_SENT = 'sent';
+const REPORT = 'report';
+const DATE_TIME = 'DD/MM/YYYY HH:mm:ss';
+const DATE_DASH = 'DD-MMM-YYYY';
+const DATE_SLASH = 'DD/MM/YYYY';
+const SERVICE_NAME_WM_GET_APPROVED_REQUEST = 'requests';
+const SERVICE_NAME_WM_GET_MY_APPROVED_REQUEST = 'myRequests';
+const STATE_MACHINE_ACTION_GET_APPROVED_REQUEST = 'getApprovedRequest';
+const STATE_MACHINE_ACTION_GET_APPROVED_REQUEST_RESPONSE = 'getApprovedRequestResponse';
+const STATE_MACHINE_ACTION_PROJECT_MAF = 'projectDetails';
+const STATE_MACHINE_ACTION_PROJECT_CEP = 'project';
+const STATE_MACHINE_ACTION_COMMONAPI = 'commonApi';
+const STATE_MACHINE_ACTION_SEARCH = 'search';
+const STATE_MACHINE_ACTION_PPROVED_REQUESTS = 'approvedRequests';
+const GETSIPORTENTRYGROUPS = 'getSiportEntryGroups';
+const GETSIPORTENTRYLOCATIONS = 'getSiportEntryLocations';
+const STATE_MACHINE_ACTION_SUCCESS_SERVICES = 'serviceResponce';
+const SERVICE_NAME_MAF = 'MAF';
+const SERVICE_NAME_CEP = 'CEP';
+const STATE_MACHINE_ACTION_PDF = 'pdfAttachments';
+const LOGOUT_URL = '/c/portal/logout';
 
 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',
@@ -561,236 +664,1303 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                 }]
         }] });
 
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable @angular-eslint/component-selector */
-class DeleteDialogComponent {
-    dialogRef;
-    i18n;
-    constructor(dialogRef, i18n) {
-        this.dialogRef = dialogRef;
-        this.i18n = i18n;
-    }
-    delete() {
-        this.dialogRef.close('yes');
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: DeleteDialogComponent, deps: [{ token: i1.MatDialogRef }, { token: CoreI18nService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: DeleteDialogComponent, isStandalone: true, selector: "app-delete-dialog", ngImport: i0, 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"], dependencies: [{ kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: DeleteDialogComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-delete-dialog', schemas: [CUSTOM_ELEMENTS_SCHEMA], standalone: true, imports: [
-                        MatDialogContent,
-                        MatDialogClose
-                    ], 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.MatDialogRef }, { type: CoreI18nService }] });
-
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable @angular-eslint/component-selector */
-class SubmitDialogComponent {
-    data;
-    i18n;
-    successData;
-    inboxUri;
-    constructor(data, i18n) {
-        this.data = data;
-        this.i18n = i18n;
-        this.successData = data;
-        this.inboxUri = window.wmConfig.inboxUri;
+class CoreService {
+    http;
+    config;
+    apiUrl = '';
+    authToken;
+    refreshToken;
+    projectConfig;
+    userData;
+    localUser;
+    loggedInUserData;
+    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
+        this.localUser = {
+            "formPrefix": "CEP",
+            "formId": "CEP5595432",
+            "inboxUri": "\/group\/hub\/inbox",
+            "baseUrl": "\/group\/i-gate\/wm-bpm\/forms\/-\/proxy",
+            "showPrint": true,
+            "language": "en",
+            "isMobile": true,
+            "outlook": false,
+            "loggedInUserEmail": "ibrahimmaa.c@stc.com.sa"
+        };
+        this.projectConfig = (this.config.production) ? window['wmConfig'] : btoa(JSON.stringify(this.localUser));
+        this.userData = JSON.parse(atob(this.projectConfig));
+    }
+    getLoggedInUserData() {
+        let loggedInEmail = this.loggedInUserId();
+        this.employeeProfile(loggedInEmail).subscribe((response) => {
+            this.loggedInUserData = response?.["Users"]?.[0];
+            console.log('getLoggedInUserData', response);
+        });
     }
-    backHome() {
-        const url = window.wmConfig.inboxUri;
-        //console.log(" inboxUri ",url)
-        window.location.href = url;
+    loadForm() {
+        const authUrl = this.buildAuthUrl();
+        return this.http.get(authUrl, { observe: 'response' }).toPromise()
+            .then((res) => {
+            const tokenInformation = res.body;
+            this.authToken = tokenInformation.token;
+            this.getLoggedInUserData();
+            this.refreshToken = tokenInformation.refreshToken;
+            const body = this.buildBody();
+            const options = this.getRequestOptions();
+            return this.callPost(body, options);
+        })
+            .catch((httpError) => {
+            return throwError(httpError);
+        });
     }
-    getImage(email) {
-        if (email) {
-            return '/group/i-gate/wm-bpm/forms/-/proxy/portrait?email=' + email;
+    buildAuthUrl() {
+        const baseUrl = this.config.proxyServiceBaseUrl;
+        const language = window?.wmConfig?.language ? window.wmConfig.language : 'en';
+        const fullAddress = this.config.proxyFullAddress;
+        const authPart = this.config.proxyServiceAuthorization;
+        return `${baseUrl}${language}${fullAddress}${authPart}?ts=${(new Date()).valueOf()}`;
+    }
+    buildBody() {
+        const baseBody = {
+            method: HTTP_METHOD_GET,
+            destination: TARGET_SERVER_WM,
+            serviceName: SERVICE_NAME_WM_FORM,
+            formName: this.config.formName,
+            formId: "",
+            queryParameters: null
+        };
+        if (!this.config.formId) {
+            delete baseBody.formId;
         }
         else {
-            return '';
-        }
-    }
-    viewForm(formId, formName) {
-        if (formId) {
-            if (formId?.toLowerCase().includes('draft')) {
-                window.open(`/group/i-gate/wm-bpm/forms?formName=${formName}&formId=${formId}`);
-                return;
+            baseBody.formId = this.config.formId;
+        }
+        return baseBody;
+    }
+    employeeProfile(employeeEmail) {
+        let body = {
+            method: "GET",
+            formName: "AAI",
+            destination: "DP",
+            serviceName: "igate.users.search.v3",
+            parameters: {
+                q: employeeEmail
             }
-            window.open('/group/i-gate/wm-bpm/forms?formId=' + formId);
-        }
+        };
+        return this.http.post(this.apiUrl, body, {
+            headers: new HttpHeaders({
+                authToken: this.authToken,
+                "Content-Type": "application/x-www-form-urlencoded"
+            }),
+            observe: "body"
+        }).pipe(map((response) => {
+            return response;
+        }), catchError((err) => {
+            return throwError(err);
+        }));
     }
-    getStatus(statusKey) {
-        switch (statusKey) {
-            case 'APPROVED':
-                return 'success';
-            case 'COMPLETED':
-                return 'success';
-            case 'REJECTED':
-                return 'danger';
-            case 'CANCELLED':
-                return 'danger';
-            case 'PENDING':
-                return 'warning';
-            default:
-                return '';
-                break;
+    getRequestOptions() {
+        return {
+            headers: new HttpHeaders({
+                authToken: this.authToken,
+                'Content-Type': HEADER_CONTENT_TYPE_FORM
+            }),
+            observe: '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) {
+        let [payload] = args;
+        // 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);
+        /* 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.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 && /^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);
+           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
+                 );
+               }
+             });
+           }
+    
+           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);
+               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();
+                 }
+                 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(
+                       (currentActor ? this.getShortName(currentActor.name) : null),
+                       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.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) => {
+                result.messages.originalMsgs.push(message);
+                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;
     }
-    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"] }] });
+    loggedInUserId() {
+        return this.userData['loggedInUserEmail'];
+    }
+    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" });
 }
-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"] }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: CoreService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: "any"
+                }]
+        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: undefined, decorators: [{
                     type: Inject,
-                    args: [MAT_DIALOG_DATA]
-                }] }, { type: CoreI18nService }] });
+                    args: [MY_LIB_CONFIG_TOKEN]
+                }] }] });
 
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable @angular-eslint/component-selector */
-//import { CoreI18nService} from '../../../../services';
-class ConfirmDialogComponent {
-    dialogRef;
-    i18n;
-    constructor(dialogRef, i18n) {
-        this.dialogRef = dialogRef;
-        this.i18n = i18n;
+class HeaderComponent {
+    translate;
+    sidenavService;
+    coreService;
+    router;
+    platformId;
+    search = new FormControl('');
+    sidenavSubscription;
+    isSidenavOpened = false;
+    device = '';
+    isMobile;
+    userData;
+    userName;
+    constructor(translate, sidenavService, coreService, router, platformId) {
+        this.translate = translate;
+        this.sidenavService = sidenavService;
+        this.coreService = coreService;
+        this.router = router;
+        this.platformId = platformId;
+        this.device = navigator.userAgent;
+        if (this.isMobile) {
+            document.documentElement.classList.add('inside-mobile-app');
+        }
+    }
+    setLanguage() {
+        const targetLang = this.translate.getLanguage() === 'en' ? 'ar' : 'en';
+        let url = location.origin + `/${targetLang}/group/i-gate/asset-management`;
+        window.open(url, '_self');
+    }
+    logout() {
+        let logoutUrl = LOGOUT_URL;
+        localStorage.removeItem('token');
+        localStorage.removeItem('userName');
+        localStorage.removeItem('user');
+        const userSelectedLanguage = localStorage.getItem('language') ?? 'en';
+        sessionStorage.clear();
+        localStorage.setItem('language', userSelectedLanguage);
+        window.open(logoutUrl, '_self');
     }
-    confirm() {
-        this.dialogRef.close('yes');
-        //////
+    ngOnInit() {
+        this.sidenavSubscription = this.sidenavService.sideNavOpened.subscribe((val) => {
+            this.isSidenavOpened = val;
+        });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ConfirmDialogComponent, deps: [{ token: i1.MatDialogRef }, { token: CoreI18nService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: ConfirmDialogComponent, isStandalone: true, selector: "app-confirm-dialog", ngImport: i0, 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('drf-confirmatton-msg')}}\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('No-Discard')}}</ds-button>\r\n                <ds-button color=\"red\" (click)=\"confirm()\">{{i18n.translate('Yes-Proceed')}}</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"], dependencies: [{ kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }] });
+    ngAfterViewInit() {
+        setTimeout(() => {
+            console.log('xx', this.coreService.loggedInUserData);
+        }, 1000);
+    }
+    toggleSideNav() {
+        document.documentElement.classList.toggle('main-sidenav-opened');
+        this.sidenavService.sideNavOpened.next(!this.isSidenavOpened);
+    }
+    openDemandRequest() {
+        // this.sidenavService.publish('open', DemandRequestComponent, 'end', 'over');
+    }
+    openTicket() {
+        // this.sidenavService.publish('open', OpenTicketComponent, 'end', 'over');
+    }
+    openEService() {
+        // this.sidenavService.publish('open', VhrComponent, 'end', 'over');
+    }
+    // goToAdmin() {
+    //   this.router.navigate(['/admin']);
+    // }
+    openApp(url) {
+        window.open(url, '_blank')?.focus();
+    }
+    ngOnDestroy() {
+        // 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: i1$1.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          {{ userData?.firstName }} {{ userData?.lastName }}\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\">{{ userData?.firstName }}</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.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: ConfirmDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: HeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-confirm-dialog', schemas: [CUSTOM_ELEMENTS_SCHEMA], standalone: true, imports: [
-                        MatDialogContent,
-                        MatDialogClose
-                    ], 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('drf-confirmatton-msg')}}\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('No-Discard')}}</ds-button>\r\n                <ds-button color=\"red\" (click)=\"confirm()\">{{i18n.translate('Yes-Proceed')}}</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.MatDialogRef }, { type: CoreI18nService }] });
+            args: [{ selector: 'app-header', standalone: true, imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        RouterModule,
+                        MatMenuModule,
+                        MatToolbarModule
+                    ], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<ng-container *ngIf=\"!isMobile\">\r\n  <mat-toolbar\r\n    class=\"align-items-center justify-content-between gap-3 border-bottom\"\r\n  >\r\n    <div class=\"d-flex align-items-center gap-3\">\r\n      <ds-button\r\n        shape=\"flat\"\r\n        icon\r\n        color=\"light-gray\"\r\n        square\r\n        (click)=\"toggleSideNav()\"\r\n      >\r\n        <ds-icon icon=\"burger-menu-1\" class=\"fs-24 fc-dark-gray\"></ds-icon>\r\n      </ds-button>\r\n\r\n      <a [href]=\"location.origin\">\r\n        <figure class=\"m-0 d-flex\">\r\n          <img class=\"main-logo\" src=\"assets/images/hub.svg\" alt=\"\" />\r\n        </figure>\r\n      </a>\r\n    </div>\r\n\r\n    <div class=\"d-flex align-items-center gap-3\">\r\n      <ds-button\r\n        shape=\"flat\"\r\n        color=\"light-gray\"\r\n        class=\"user-menu-btn\"\r\n        [matMenuTriggerFor]=\"userMenu\"\r\n      >\r\n        <ds-avatar\r\n          image=\"/group/i-gate/wm-bpm/forms/-/proxy/portrait?email={{userData?.email}}\"\r\n          onerror=\"this.onerror=null;this.src='assets/images/user2.jpg'\"\r\n          slot=\"prefix\"\r\n          class=\"avatar\"\r\n        >\r\n        </ds-avatar>\r\n\r\n        <span class=\"fs-14 fw-medium fc-black\">\r\n          {{ userData?.firstName }} {{ userData?.lastName }}\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\">{{ userData?.firstName }}</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: i1$1.Router }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [PLATFORM_ID]
+                }] }] });
 
-class FormatAsPasswordPipe {
-    transform(value) {
-        if (typeof value === 'number')
-            value = value.toString();
-        const length = value.length;
-        return '*'.repeat(length);
+class SideNavComponent {
+    sidenavService;
+    router;
+    isOpened = false;
+    lang = '';
+    Menu = [
+        {
+            name: 'Home',
+            routerLink: '/group/hub/home1',
+            icon: 'home-o',
+            matmenu: false,
+            List: []
+        },
+        {
+            name: 'Inbox',
+            routerLink: '/group/hub/inbox',
+            icon: 'mail-o',
+            matmenu: false,
+            List: []
+        },
+        {
+            name: 'Dobox',
+            routerLink: '/group/hub/dobox',
+            icon: 'chick-sqaure',
+            matmenu: false,
+            List: []
+        },
+        {
+            name: 'Chat',
+            routerLink: '/group/hub/chat',
+            icon: 'chat-circle-2',
+            matmenu: false,
+            List: []
+        },
+        {
+            name: 'Mail',
+            routerLink: '/group/hub/mail',
+            icon: 'mail-f',
+            matmenu: false,
+            List: []
+        },
+        {
+            name: 'Meetings',
+            routerLink: '/group/hub/meetings',
+            icon: 'calendar',
+            matmenu: false,
+            List: []
+        },
+        {
+            name: 'Offers',
+            routerLink: '/group/hub/hub-offers',
+            icon: 'voucher',
+            matmenu: false,
+            List: []
+        },
+        {
+            name: 'stc today',
+            routerLink: '/group/hub/stc-profile',
+            icon: 'stc-profile-o',
+            matmenu: false,
+            List: []
+        },
+        {
+            name: 'Articles',
+            routerLink: '/group/hub/articles',
+            icon: 'file-returned',
+            matmenu: false,
+            List: []
+        },
+        {
+            name: 'Timeline',
+            routerLink: '/group/hub/timeline',
+            icon: 'list-dots',
+            matmenu: false,
+            List: []
+        },
+        {
+            name: 'eforms',
+            routerLink: '/group/hub/efroms',
+            icon: 'file-o',
+            matmenu: false,
+            List: []
+        },
+        {
+            name: 'Apps',
+            routerLink: '/group/hub/apps',
+            icon: 'card',
+            matmenu: false,
+            List: []
+        },
+    ];
+    constructor(sidenavService, router) {
+        this.sidenavService = sidenavService;
+        this.router = router;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: FormatAsPasswordPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.8", ngImport: i0, type: FormatAsPasswordPipe, name: "formatAsPassword" });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: FormatAsPasswordPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'formatAsPassword'
-                }]
-        }] });
-
-/* eslint-disable no-useless-escape */
-class MycurrencyPipe {
-    prefix;
-    decimal_separator;
-    thousands_separator;
-    suffix;
-    constructor() {
-        this.prefix = '';
-        this.suffix = '';
-        this.decimal_separator = '.';
-        this.thousands_separator = ',';
+    closeSidenav() {
+        document.documentElement.classList.remove('main-sidenav-opened');
+        // this.sidenavService.sideNavOpened.next(false);
     }
-    transform(value, allowNegative = false, decimalPrecision = 2) {
-        if (value == undefined || value === '') {
-            return null;
+    navigateTo(item) {
+        window.location.href = item.routerLink;
+    }
+    innerWidth;
+    menuMobile;
+    MenuTrigger;
+    ngOnInit() {
+        this.innerWidth = window.innerWidth;
+        if (this.innerWidth < 1024) {
+            this.menuMobile = true;
         }
-        if (allowNegative) {
-            value = value.toString();
-            if (value.startsWith('(') || value.startsWith('-')) {
-                value = '-' + value.substr(1, value.length).replace(/\(|\)|\$|\-/g, '');
+        else {
+            this.menuMobile = false;
+        }
+    }
+    mouseover(matmenu, i) {
+        if (!this.menuMobile) {
+            if (matmenu) {
+                document.documentElement.classList.remove('main-overlay-closed');
+                // this.MenuTrigger[i].openMenu();
             }
             else {
-                value = value.replace(/\(|\)|\$|\-/g, '');
+                document.documentElement.classList.add('main-overlay-closed');
+                // this.MenuTrigger[i].closeMenu();
             }
         }
-        let [integer, fraction = ''] = (value || '').toString().split(this.decimal_separator);
-        fraction = decimalPrecision > 0 ? this.decimal_separator + (fraction + '000000').substring(0, 2) : '';
-        integer = integer.replace(/\B(?=(\d{3})+(?!\d))/g, this.thousands_separator);
-        // If user types .xx we can display 0.xx
-        if (integer === '') {
-            integer = '0';
-        }
-        else if (integer.startsWith('$')) {
-            // If there are multiple transforms, remove the previous dollar sign (blur and change at the same time)
-            integer = integer.substr(1, integer.length);
-        }
-        else if (allowNegative && integer.startsWith('-')) {
-            // If user inputs negative number set to paranthesis format
-            integer = integer.substr(1, integer.length);
-            return '(' + this.prefix + integer + fraction + ')';
-        }
-        return this.prefix + integer + fraction;
     }
-    parse(value, allowNegative = false) {
-        let [integer, fraction = ''] = (value || '').split(this.decimal_separator);
-        integer = integer.replace(new RegExp(/[^\d\.]/, 'g'), '');
-        fraction = parseInt(fraction, 10) > 0 && 2 > 0 ? this.decimal_separator + (fraction + '000000').substring(0, 2) : '';
-        if (allowNegative && value.startsWith('(') && value.endsWith(')')) {
-            return (-1 * parseFloat(integer + fraction)).toString();
-        }
-        else {
-            return integer + fraction;
+    goto(url, matmenu) {
+        if (!this.menuMobile) {
+            if (matmenu) {
+                document.documentElement.classList.remove('main-overlay-closed');
+            }
+            else {
+                document.documentElement.classList.add('main-overlay-closed');
+            }
         }
+        this.router.navigate([url]);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: MycurrencyPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.8", ngImport: i0, type: MycurrencyPipe, name: "mycurrency" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SideNavComponent, deps: [{ token: SidenavService }, { token: i1$1.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.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: MycurrencyPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'mycurrency'
-                }]
-        }], ctorParameters: () => [] });
+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: i1$1.Router }], propDecorators: { isOpened: [{
+                type: Input
+            }], MenuTrigger: [{
+                type: ViewChild,
+                args: ['MenuTrigger']
+            }] } });
 
-class CustomDateFormat {
-    _parse = {
-        dateInput: 'DD/MM/YYYY'
+class FormSectionComponent {
+    i18n;
+    userType = 'receipient';
+    popover;
+    popoverType = 'receipient';
+    popoverPosition = { top: 0, left: 0 };
+    requestDetails;
+    userPopoverInfo = {};
+    section;
+    form;
+    lov;
+    isReadOnly;
+    isOpen;
+    isFinalApproval;
+    controllers;
+    segmentDynamicLoaderService;
+    sectionFormComponent = null;
+    sectionName = 'SECTION_NAME.requestDetails';
+    sectionNumber;
+    sectionStatusValue;
+    sectionStatusKey;
+    receipient = {
+        isShowing: false,
+        profile: null
     };
-    _display = {
-        dateInput: 'DD/MM/YYYY',
-        monthYearLabel: 'DD MMM YYYY',
-        dateA11yLabel: 'LL',
-        monthYearA11yLabel: 'MMMM YYYY'
+    delegate = {
+        isShowing: false,
+        profile: null
     };
-    set parse(parse) {
-        this._parse = Object.assign({}, this._parse, parse);
-    }
-    get parse() {
-        return this._parse;
-    }
-    set display(display) {
-        this._display = Object.assign({}, this._display, display);
-    }
-    get display() {
-        return this._display;
+    input;
+    highlightFlag;
+    processingDate;
+    randomID = Math.floor(Math.random() * (999999 - 100000)) + 100000;
+    constructor(
+    // private segmentDynamicLoaderService: SegmentDynamicLoaderService,
+    i18n) {
+        this.i18n = i18n;
+        this.highlightFlag = false;
     }
-    updateDateFormat(parse, display) {
-        this.parse = parse;
-        if (!display) {
-            display = parse;
+    ngOnInit() {
+        this.sectionFormComponent = this.segmentDynamicLoaderService.getComponent(this.section.id);
+        if (this.section.body.details.stageName) {
+            this.sectionName = this.section.body.details.stageName;
         }
-        this.display = display;
-    }
-}
-
-const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR = {
-    provide: NG_VALUE_ACCESSOR,
-    useExisting: forwardRef(() => BaseComponent),
+        else {
+            this.sectionName = this.segmentDynamicLoaderService.getSectionName(this.section.id);
+        }
+        this.input = {
+            isReadOnly: this.isReadOnly,
+            lov: this.lov,
+            section: this.section,
+            controllers: this.controllers,
+            requestDetails: this.requestDetails
+        };
+        if (this.section.header && this.section.header.processingDate) {
+            this.processingDate = moment(this.section.header.processingDate)
+                .locale('en-US')
+                .format('DD/MM/YYYY HH:mm:ss');
+        }
+        this.highlightFlag = this.isOpen;
+        const x = document.querySelectorAll('#collapse' + this.sectionId());
+        if (x.length > 0) {
+            this.sectionNumber = x.length;
+        }
+    }
+    ngOnChanges() {
+        if (this.section.id !== 'requestDetails' &&
+            this.section.id !== 'hrRequestDetails' &&
+            !this.sectionStatusKey &&
+            this.section.body.details.decision &&
+            this.section.body.details.decision.key) {
+            this.sectionStatusKey = this.section.body.details.decision.key;
+        }
+        if (this.section.id !== 'requestDetails' &&
+            this.section.id !== 'hrRequestDetails' &&
+            !this.sectionStatusValue &&
+            this.section.body.details.decision &&
+            this.section.body.details.decision.value) {
+            this.sectionStatusValue = this.section.body.details.decision.value;
+        }
+    }
+    ngAfterViewInit() {
+        this.ServicesSubScriptions();
+    }
+    get isExpanded() {
+        const isExpandableFromBackend = this.form?.sections?.length && this.form.sections.some(section => 'expandStage' in section?.body?.details);
+        if (!isExpandableFromBackend)
+            return true;
+        return this.section?.body?.details?.expandStage === 'true';
+    }
+    ServicesSubScriptions() {
+        /*  this.profileRequestorService.getForm().subscribe((data) => {
+            this.form = data;
+          });*/
+    }
+    ngAfterViewChecked() {
+        this.input = {
+            isReadOnly: this.isReadOnly,
+            lov: this.lov,
+            section: this.section,
+            controllers: this.controllers,
+            sectionId: this.section
+        };
+    }
+    sectionId() {
+        return this.section.id.split(' ').join('') + this.randomID;
+    }
+    getSectionName() {
+        return this.section.id;
+    }
+    getFormStepStatus(key) {
+        let status = 'NOT_FOUND_IN_LOV';
+        if (this.lov.formStepStatus && this.lov.formStepStatus.options) {
+            this.lov.formStepStatus.options.forEach((option) => {
+                if (option.value === key) {
+                    status = option.description;
+                }
+            });
+        }
+        return status;
+    }
+    toggleSmallProfileInfo(event, personType) {
+        this.userType = personType;
+        event.stopPropagation();
+        const userInfo = this[personType];
+        if (userInfo.profile === null) {
+            this.popoverType = personType;
+            const userEmail = personType === 'receipient'
+                ? this.section.header.personToThumbnail.split('=')[1]
+                : this?.section?.header?.delegatedToThumbnail.split('=')[1];
+            /*this.stateMachine
+              .dispatch(Constants.STATE_MACHINE_ACTION_EMPLOYEE_PROFILE, userEmail)
+              .then((response) => {
+                console.log(this, response);
+      
+                if (response) {
+                  this[personType].profile = response;
+                  this.popoverPosition = {
+                    top: 10,
+                    left:
+                      event.target.getBoundingClientRect().left +
+                      event.target.getBoundingClientRect().width / 4
+                  };
+                  this.popover.anchor = event.target;
+                  this.popover.open();
+                  this.userPopoverInfo = response;
+                }
+              });*/
+        }
+        else {
+            this.userPopoverInfo = this[personType].profile;
+            this.popoverPosition = {
+                top: 10,
+                left: event.target.getBoundingClientRect().left +
+                    event.target.getBoundingClientRect().width / 4
+            };
+            this.popover.anchor = event.target;
+            this.popover.open();
+        }
+    }
+    statusIconClass(status, type) {
+        if (status) {
+            if (status === FORM_STATUS_REJECTED ||
+                status === FORM_STATUS_CANCELLED ||
+                status.toLowerCase() === 'reject' ||
+                status.toLowerCase() === 'unsatisfied' ||
+                status.toLowerCase().includes('deny') ||
+                status.toLowerCase().includes('reject') ||
+                status.toLowerCase() === 'cancel') {
+                return type === 'status' ? 'danger' : 'close';
+            }
+            else if (status === FORM_STATUS_PENDING ||
+                status.toLowerCase() === 'pending') {
+                return type === 'status' ? 'warning' : 'clock';
+            }
+            else {
+                return type === 'status' ? 'success' : 'check';
+            }
+        }
+        else {
+            return type === 'status' ? 'success' : 'check';
+        }
+    }
+    locationHref(hrefLink) {
+        window.location.href = hrefLink;
+    }
+    statusClass(status) {
+        if (status) {
+            if (status === FORM_STATUS_REJECTED || status === FORM_STATUS_CANCELLED
+                || 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';
+            }
+        }
+        else {
+            return 'success';
+        }
+    }
+    statusIcon(status) {
+        if (status) {
+            if (status === FORM_STATUS_REJECTED || status === FORM_STATUS_CANCELLED
+                || status.toLowerCase() === 'reject' || status.toLowerCase() === 'unsatisfied' || status.toLowerCase() === 'cancel') {
+                return 'close';
+            }
+            else if (status === FORM_STATUS_PENDING || status.toLowerCase() === 'pending') {
+                return 'clock';
+            }
+            else {
+                return 'check';
+            }
+        }
+        else {
+            return 'check';
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: FormSectionComponent, deps: [{ token: CoreI18nService }], 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", isOpen: "isOpen", isFinalApproval: "isFinalApproval", controllers: "controllers", segmentDynamicLoaderService: "segmentDynamicLoaderService", sectionFormComponent: "sectionFormComponent", sectionName: "sectionName" }, viewQueries: [{ propertyName: "popover", first: true, predicate: ["popover"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- <div class=\"panel-heading\" role=\"button\" [id]=\"sectionId()\" *ngIf=\"showHeader()\"> -->\r\n<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=\"{{statusIconClass(sectionStatusKey,'status')}}\" no-opacity icon\r\n          class=\"circle-status d-none d-sm-inline-block\">\r\n          <ds-icon icon=\"{{statusIconClass(sectionStatusKey,'icon')}}\"></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\" *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        <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, 'receipient')\"\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\"\r\n                [ngClass]=\"{'panel-ueser-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                src=\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMSIgaGVpZ2h0PSIxMyIgdmlld0JveD0iMCAwIDIxIDEzIj48cGF0aCBkPSJNMjEsNy43NjNhMS42MjEsMS42MjEsMCwwLDEtLjQ0Ny41OTMsMS4zMDYsMS4zMDYsMCwwLDEtLjc1LjE5NGMtNy4yODQsMC04LjU2OCwwLTE1Ljg1MywwSDMuNjY5TDMuNjMsOC42Yy4wNzcuMDY0LjE1OC4xMjQuMjI5LjE5NHExLjcxLDEuNjksMy40MiwzLjM4MWExLjAyMywxLjAyMywwLDAsMSwuMjkxLDEuMDc5Ljk5Mi45OTIsMCwwLDEtLjguNzE5LDEuMDUzLDEuMDUzLDAsMCwxLTEtLjMzMVEzLjgzMSwxMS43MTksMS44ODYsOS44Yy0uNDQyLS40MzctLjg3OS0uODgxLTEuMzMtMS4zMDlBNC41NzIsNC41NzIsMCwwLDEsMCw3LjgxNFY3LjE4NUEzMC43ODMsMzAuNzgzLDAsMCwxLDIuNzMsNC4zNzFjMS0xLjAyNywyLjAzOC0yLjAyNSwzLjA2My0zLjAzMkExLjA0OSwxLjA0OSwwLDEsMSw3LjI3NywyLjgyQzYuNCwzLjcsNS41MDksNC41Nyw0LjYyNSw1LjQ0NmMtLjMyMy4zMjEtLjY0NC42NDUtLjk3My45NzYuMDg0LjA1OS4xODEuMDI3LjI3LjAyNyw3LjI1OCwwLDguNTE2LDAsMTUuNzc1LDBBMS4xMjksMS4xMjksMCwwLDEsMjEsNy4yOXYuNDcyWiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAtMC45OTkpIiBmaWxsPSIjYTU0ZWUxIi8+PC9zdmc+\"\r\n                alt=\"\" />\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\r\n          <ds-status\r\n            class=\"main-status\" *ngIf=\"section?.body?.details?.decision?.key\"\r\n            status=\"{{statusIconClass(sectionStatusKey,'status')}}\">{{ sectionStatusValue }}\r\n          </ds-status>\r\n        </ng-container>\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\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\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\r\n<sat-popover #popover [hasBackdrop]=\"true\" horizontalAlign=\"center\" verticalAlign=\"above\">\r\n  <div class=\"delegate-info-popup\">\r\n    <ds-avatar *ngIf=\"userType === 'receipient'\" image=\"{{section?.header?.personToThumbnail}}\" size=\"small\"></ds-avatar>\r\n    <ds-avatar *ngIf=\"userType === 'delegate'\" image=\"{{section?.header?.delegatedToThumbnail}}\" size=\"small\"></ds-avatar>\r\n    <div class=\"delegate-info mx-0\">\r\n      <div class=\"fs-16 fw-medium fc-black mb-0\">{{ userPopoverInfo?.name }}</div>\r\n      <div class=\"fs-12 fw-normal fc-black mb-2\">{{ userPopoverInfo?.job?.name }}</div>\r\n      <div class=\"user-info fc-black fs-10 mb-1\">\r\n        <ds-icon icon=\"phone\" class=\"fs-18 fc-dark-gray\"></ds-icon>\r\n        <bdi (click)=\"locationHref('tel:'+ userPopoverInfo?.contact?.work)\">{{ userPopoverInfo?.contact?.work }}</bdi>\r\n      </div>\r\n      <div class=\"user-info fc-black fs-10 mb-1\">\r\n        <ds-icon icon=\"phone\" class=\"fs-18 fc-dark-gray\"></ds-icon>\r\n        <bdi (click)=\"locationHref('tel:'+ userPopoverInfo?.contact?.mobile)\">{{ userPopoverInfo?.contact?.mobile }}</bdi>\r\n      </div>\r\n      <div class=\"user-info fc-black fs-10 mb-1\">\r\n        <ds-icon icon=\"mail-o\" class=\"fs-18 fc-dark-gray\"></ds-icon>\r\n        <span (click)=\"locationHref('mailto:'+ userPopoverInfo?.email)\">{{ userPopoverInfo?.email }}</span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</sat-popover>\r\n\r\n\r\n\r\n<!--\r\n<mat-expansion-panel\r\n  class=\"mb-4\" [expanded]=\"true\" 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        <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-ueser-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              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        <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\r\n    <app-workflow-approval\r\n      [isReadOnly]=\"input.isReadOnly\"\r\n      [lov]=\"input.lov\"\r\n      [section]=\"input.section\"\r\n      [requestDetails]=\"requestDetails\"\r\n    ></app-workflow-approval>\r\n    &lt;!&ndash;    <ng-container *ngComponentOutlet=\"sectionFormComponent; ndcDynamicInputs: input\"></ng-container>&ndash;&gt;\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-->\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: "component", type: MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { 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: "component", type: i1$2.SatPopoverComponent, selector: "sat-popover", inputs: ["anchor", "horizontalAlign", "xAlign", "verticalAlign", "yAlign", "forceAlignment", "lockAlignment", "autoFocus", "restoreFocus", "scrollStrategy", "hasBackdrop", "interactiveClose", "openTransition", "closeTransition", "openAnimationStartAtScale", "closeAnimationEndAtScale", "backdropClass", "panelClass"], outputs: ["opened", "closed", "afterOpen", "afterClose", "backdropClicked", "overlayKeydown"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: FormSectionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-form-section', standalone: true, imports: [
+                        MatExpansionPanel,
+                        NgIf,
+                        NgComponentOutlet,
+                        ComponentOutletIoDirective,
+                        SatPopoverModule,
+                        NgClass
+                    ], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<!-- <div class=\"panel-heading\" role=\"button\" [id]=\"sectionId()\" *ngIf=\"showHeader()\"> -->\r\n<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=\"{{statusIconClass(sectionStatusKey,'status')}}\" no-opacity icon\r\n          class=\"circle-status d-none d-sm-inline-block\">\r\n          <ds-icon icon=\"{{statusIconClass(sectionStatusKey,'icon')}}\"></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\" *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        <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, 'receipient')\"\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\"\r\n                [ngClass]=\"{'panel-ueser-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                src=\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMSIgaGVpZ2h0PSIxMyIgdmlld0JveD0iMCAwIDIxIDEzIj48cGF0aCBkPSJNMjEsNy43NjNhMS42MjEsMS42MjEsMCwwLDEtLjQ0Ny41OTMsMS4zMDYsMS4zMDYsMCwwLDEtLjc1LjE5NGMtNy4yODQsMC04LjU2OCwwLTE1Ljg1MywwSDMuNjY5TDMuNjMsOC42Yy4wNzcuMDY0LjE1OC4xMjQuMjI5LjE5NHExLjcxLDEuNjksMy40MiwzLjM4MWExLjAyMywxLjAyMywwLDAsMSwuMjkxLDEuMDc5Ljk5Mi45OTIsMCwwLDEtLjguNzE5LDEuMDUzLDEuMDUzLDAsMCwxLTEtLjMzMVEzLjgzMSwxMS43MTksMS44ODYsOS44Yy0uNDQyLS40MzctLjg3OS0uODgxLTEuMzMtMS4zMDlBNC41NzIsNC41NzIsMCwwLDEsMCw3LjgxNFY3LjE4NUEzMC43ODMsMzAuNzgzLDAsMCwxLDIuNzMsNC4zNzFjMS0xLjAyNywyLjAzOC0yLjAyNSwzLjA2My0zLjAzMkExLjA0OSwxLjA0OSwwLDEsMSw3LjI3NywyLjgyQzYuNCwzLjcsNS41MDksNC41Nyw0LjYyNSw1LjQ0NmMtLjMyMy4zMjEtLjY0NC42NDUtLjk3My45NzYuMDg0LjA1OS4xODEuMDI3LjI3LjAyNyw3LjI1OCwwLDguNTE2LDAsMTUuNzc1LDBBMS4xMjksMS4xMjksMCwwLDEsMjEsNy4yOXYuNDcyWiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAtMC45OTkpIiBmaWxsPSIjYTU0ZWUxIi8+PC9zdmc+\"\r\n                alt=\"\" />\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\r\n          <ds-status\r\n            class=\"main-status\" *ngIf=\"section?.body?.details?.decision?.key\"\r\n            status=\"{{statusIconClass(sectionStatusKey,'status')}}\">{{ sectionStatusValue }}\r\n          </ds-status>\r\n        </ng-container>\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\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\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\r\n<sat-popover #popover [hasBackdrop]=\"true\" horizontalAlign=\"center\" verticalAlign=\"above\">\r\n  <div class=\"delegate-info-popup\">\r\n    <ds-avatar *ngIf=\"userType === 'receipient'\" image=\"{{section?.header?.personToThumbnail}}\" size=\"small\"></ds-avatar>\r\n    <ds-avatar *ngIf=\"userType === 'delegate'\" image=\"{{section?.header?.delegatedToThumbnail}}\" size=\"small\"></ds-avatar>\r\n    <div class=\"delegate-info mx-0\">\r\n      <div class=\"fs-16 fw-medium fc-black mb-0\">{{ userPopoverInfo?.name }}</div>\r\n      <div class=\"fs-12 fw-normal fc-black mb-2\">{{ userPopoverInfo?.job?.name }}</div>\r\n      <div class=\"user-info fc-black fs-10 mb-1\">\r\n        <ds-icon icon=\"phone\" class=\"fs-18 fc-dark-gray\"></ds-icon>\r\n        <bdi (click)=\"locationHref('tel:'+ userPopoverInfo?.contact?.work)\">{{ userPopoverInfo?.contact?.work }}</bdi>\r\n      </div>\r\n      <div class=\"user-info fc-black fs-10 mb-1\">\r\n        <ds-icon icon=\"phone\" class=\"fs-18 fc-dark-gray\"></ds-icon>\r\n        <bdi (click)=\"locationHref('tel:'+ userPopoverInfo?.contact?.mobile)\">{{ userPopoverInfo?.contact?.mobile }}</bdi>\r\n      </div>\r\n      <div class=\"user-info fc-black fs-10 mb-1\">\r\n        <ds-icon icon=\"mail-o\" class=\"fs-18 fc-dark-gray\"></ds-icon>\r\n        <span (click)=\"locationHref('mailto:'+ userPopoverInfo?.email)\">{{ userPopoverInfo?.email }}</span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</sat-popover>\r\n\r\n\r\n\r\n<!--\r\n<mat-expansion-panel\r\n  class=\"mb-4\" [expanded]=\"true\" 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        <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-ueser-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              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        <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\r\n    <app-workflow-approval\r\n      [isReadOnly]=\"input.isReadOnly\"\r\n      [lov]=\"input.lov\"\r\n      [section]=\"input.section\"\r\n      [requestDetails]=\"requestDetails\"\r\n    ></app-workflow-approval>\r\n    &lt;!&ndash;    <ng-container *ngComponentOutlet=\"sectionFormComponent; ndcDynamicInputs: input\"></ng-container>&ndash;&gt;\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-->\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"] }]
+        }], ctorParameters: () => [{ type: CoreI18nService }], propDecorators: { popover: [{
+                type: ViewChild,
+                args: ['popover']
+            }], requestDetails: [{
+                type: Input
+            }], section: [{
+                type: Input
+            }], form: [{
+                type: Input
+            }], lov: [{
+                type: Input
+            }], isReadOnly: [{
+                type: Input
+            }], isOpen: [{
+                type: Input
+            }], isFinalApproval: [{
+                type: Input
+            }], controllers: [{
+                type: Input
+            }], segmentDynamicLoaderService: [{
+                type: Input
+            }], sectionFormComponent: [{
+                type: Input
+            }], sectionName: [{
+                type: Input
+            }] } });
+
+class MainRequestDetailsComponent {
+    i18n;
+    section;
+    lov;
+    form;
+    constructor(i18n) {
+        this.i18n = i18n;
+    }
+    get isExpanded() {
+        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: "directive", type: MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { 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,
+            args: [{ selector: 'app-main-request-details', standalone: true, schemas: [CUSTOM_ELEMENTS_SCHEMA], imports: [
+                        MatAccordion,
+                        MatExpansionPanel,
+                        NgIf
+                    ], 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"] }]
+        }], ctorParameters: () => [{ type: CoreI18nService }], propDecorators: { section: [{
+                type: Input
+            }], lov: [{
+                type: Input
+            }], form: [{
+                type: Input
+            }] } });
+
+class WorkflowSectionComponent {
+    i18n;
+    cdRef;
+    formStateObject;
+    sectionSubmitted = new EventEmitter();
+    sections;
+    isReadOnly;
+    isLoading;
+    form;
+    contentClass = 'default-box box-shadow p-4';
+    startedListener = false;
+    sectionsController;
+    showButtonMenu = false;
+    segmentDynamicLoaderService = null;
+    sectionFormComponent = null;
+    sectionName = SECTION_ID_REQUEST_DETAILS;
+    constructor(i18n, cdRef) {
+        this.i18n = i18n;
+        this.cdRef = cdRef;
+        /*    _listenerService.listen().subscribe((result: any) => {
+              if (result?.function == 'resetForm') {
+                this.resetForm();
+              } else if (result?.function == 'onSubmit') {
+                const sectionSize = this.sections.length - 1;
+                const section = this.sections[sectionSize];
+                const data = result.data ? result.data : section;
+                this.onSubmit(result?.action, data);
+              }
+            });*/
+    }
+    ngAfterViewChecked() {
+        this.cdRef.detectChanges();
+        if (this.formStateObject && this.form && !this.startedListener) {
+            this.formStateObject.valueChanges.subscribe(
+            /* istanbul ignore next  */
+            (form) => {
+                Object.keys(form).forEach((key) => {
+                    if (this.sections[this.sections.length - 1].body.details[key] !==
+                        form[key] &&
+                        form[key] !== undefined)
+                        this.sections[this.sections.length - 1].body.details[key] =
+                            form[key];
+                });
+            });
+            this.sectionsController = this.formStateObject.controls;
+            this.startedListener = true;
+        }
+        this.checkButtons();
+    }
+    /*  isSubmitting = {};
+      disableButtons = false;*/
+    /*  onSubmit(action: any, section: any) {
+        const sectionSize = this.sections.length - 1;
+        let sectionDecision = this.sections[sectionSize].body.details.decision;
+        if (sectionDecision && action === 'SUBMIT') {
+          sectionDecision = { key: action };
+        }
+        if (sectionDecision && action !== 'SUBMIT') {
+          sectionDecision = { key: action };
+        }
+        this.sections[sectionSize].body.details.decision = sectionDecision;
+        this.profileRequesterService.isSubmitting[action] = true;
+        this.profileRequesterService.disableButtons = true;
+        this.stateMachineService
+          .dispatch(
+            constants.STATE_MACHINE_ACTION_SUBMIT_FORM,
+            section,
+            action
+          )
+          .then((form: any) => {
+            this.profileRequesterService.isSubmitting[action] = true;
+            this.profileRequesterService.disableButtons = true;
+            const obj = {
+              form: form,
+              action: action
+            };
+            this.sectionSubmitted.emit(obj);
+          });
+      }*/
+    /*  resetForm() {
+        this.formStateObject.reset();
+        this.resetPropagator.propagate();
+      }*/
+    get isExpandableFromBackend() {
+        return this.form?.sections?.length && this.form.sections.some(section => 'expandStage' in section?.body?.details);
+    }
+    buttonTypes(type) {
+        switch (type) {
+            case 'APPROVE':
+                return '';
+            case 'SENDBACK':
+                return 'red';
+            case 'REJECT':
+                return 'red';
+            default:
+                return '';
+        }
+    }
+    checkButtons() {
+        const options = this.form?.lovs?.decision?.options;
+        if (!Array.isArray(options))
+            return;
+        options.forEach((item) => {
+            if (item?.value != 'APPROVE' &&
+                item?.value != 'REJECT' &&
+                item?.value != 'SENDBACK' &&
+                item?.value != 'SUBMIT' &&
+                item?.value != 'CANCEL') {
+                this.showButtonMenu = true;
+            }
+        });
+    }
+    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: "<!--\r\n<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-form-section\r\n      *ngIf=\"sections[1]?.body?.details?.stage0?.isStage0 === 'true'\"\r\n      class=\"app-form-section\"\r\n      [segmentDynamicLoaderService]=\"segmentDynamicLoaderService\"\r\n      [section]=\"sections[1]\"\r\n      [lov]=\"form?.lovs\"\r\n      [isReadOnly]=\"sections[1]?.header?.readOnly\"\r\n      [form]=\"form\"\r\n      [controllers]=\"sectionsController\"\r\n      >\r\n    </app-form-section>\r\n\r\n    <app-main-request-details [lov]=\"form?.lovs\" [form]=\"form\" [section]=\"sections[0]\">\r\n      <ng-container *ngTemplateOutlet=\"contentReqDet\"></ng-container>\r\n    </app-main-request-details>\r\n\r\n    <header class=\"header-line fs-12 fw-medium fc-dark-gray mt-sm-5 mt-4 mb-4\" *ngIf=\"sections.length > 1 && !(form?.header?.formId?.includes('MEO') || form?.header?.formId?.includes('MEX'))\">\r\n      {{i18n.translate('Approvals')}}\r\n    </header>\r\n\r\n\r\n    <header *ngIf=\"(form?.header?.formId?.includes('MEO') || form?.header?.formId?.includes('MEX')) && sections.length > 1\" class=\"header-line fs-12 fw-medium fc-dark-gray mt-sm-5 mt-4 mb-4\">\r\n      <ds-avatar *ngIf=\"!isLoading\" image={{form?.header?.requesterPhoto}} size=\"xx-small\"\r\n      class=\"d-inline-flex cursor-pointer\" ></ds-avatar>\r\n    <span class=\"fs-12 d-sm-block cursor-pointer\"\r\n      [ngClass]=\"{'loading-bg loading-width': isLoading}\">{{form?.header?.requesterName}}</span>\r\n\r\n      <span class=\"fs-12 d-sm-block cursor-pointer\"\r\n      [ngClass]=\"{'loading-bg loading-width': isLoading}\">{{form?.sections?.[0].body?.details?.gceoComment}}</span>\r\n\r\n    </header>\r\n\r\n    <mat-accordion class=\"primary-accordion main-approval\" [multi]=\"isExpandableFromBackend\">\r\n      <ng-container *ngFor=\"let section of sections; let i = index\">\r\n        <app-form-section *ngIf=\"i !== 0 && (!section?.body?.details?.stage0?.isStage0 || section?.body?.details?.stage0?.isStage0 === 'false')\" 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=\"{{contentClass}}\">\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-->\r\n<script src=\"../index.ts\"></script>\r\n<form #f=\"ngForm\">\r\n\r\n  <div\r\n    *ngIf=\"form?.header?.status?.['key'] != 'NEW' \" class=\"mt-3\" id=\"accordion\" role=\"tablist\"\r\n    aria-multiselectable=\"true\">\r\n\r\n\r\n    <app-main-request-details [section]=\"sections[0]\"></app-main-request-details>\r\n\r\n    <header class=\"header-line fs-12 fw-medium fc-dark-gray mt-sm-5 mt-4 mb-4\" *ngIf=\"sections.length > 1\"> {{ i18n.translate('Approvals') }}</header>\r\n    <mat-accordion class=\"primary-accordion main-approval\">\r\n      <ng-container *ngFor=\"let section of sections; let i = index\">\r\n       <!-- <app-form-section\r\n          class=\"app-form-section\"\r\n          [segmentDynamicLoaderService]=\"segmentDynamicLoaderService\"\r\n          [section]=section\r\n          [lov]=\"form?.lovs\"\r\n          [isReadOnly]=\"section.header.readOnly\"\r\n          [form]=\"form\"\r\n          [controllers]=\"sectionsController\">\r\n        </app-form-section>-->\r\n      </ng-container>\r\n    </mat-accordion>\r\n  </div>\r\n</form>\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: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.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,
+            args: [{ selector: 'app-workflow-section', schemas: [CUSTOM_ELEMENTS_SCHEMA], imports: [
+                        NgClass,
+                        MatAccordion,
+                        NgTemplateOutlet,
+                        NgIf,
+                        FormSectionComponent,
+                        MainRequestDetailsComponent,
+                        NgForOf,
+                        FormsModule
+                    ], standalone: true, template: "<!--\r\n<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-form-section\r\n      *ngIf=\"sections[1]?.body?.details?.stage0?.isStage0 === 'true'\"\r\n      class=\"app-form-section\"\r\n      [segmentDynamicLoaderService]=\"segmentDynamicLoaderService\"\r\n      [section]=\"sections[1]\"\r\n      [lov]=\"form?.lovs\"\r\n      [isReadOnly]=\"sections[1]?.header?.readOnly\"\r\n      [form]=\"form\"\r\n      [controllers]=\"sectionsController\"\r\n      >\r\n    </app-form-section>\r\n\r\n    <app-main-request-details [lov]=\"form?.lovs\" [form]=\"form\" [section]=\"sections[0]\">\r\n      <ng-container *ngTemplateOutlet=\"contentReqDet\"></ng-container>\r\n    </app-main-request-details>\r\n\r\n    <header class=\"header-line fs-12 fw-medium fc-dark-gray mt-sm-5 mt-4 mb-4\" *ngIf=\"sections.length > 1 && !(form?.header?.formId?.includes('MEO') || form?.header?.formId?.includes('MEX'))\">\r\n      {{i18n.translate('Approvals')}}\r\n    </header>\r\n\r\n\r\n    <header *ngIf=\"(form?.header?.formId?.includes('MEO') || form?.header?.formId?.includes('MEX')) && sections.length > 1\" class=\"header-line fs-12 fw-medium fc-dark-gray mt-sm-5 mt-4 mb-4\">\r\n      <ds-avatar *ngIf=\"!isLoading\" image={{form?.header?.requesterPhoto}} size=\"xx-small\"\r\n      class=\"d-inline-flex cursor-pointer\" ></ds-avatar>\r\n    <span class=\"fs-12 d-sm-block cursor-pointer\"\r\n      [ngClass]=\"{'loading-bg loading-width': isLoading}\">{{form?.header?.requesterName}}</span>\r\n\r\n      <span class=\"fs-12 d-sm-block cursor-pointer\"\r\n      [ngClass]=\"{'loading-bg loading-width': isLoading}\">{{form?.sections?.[0].body?.details?.gceoComment}}</span>\r\n\r\n    </header>\r\n\r\n    <mat-accordion class=\"primary-accordion main-approval\" [multi]=\"isExpandableFromBackend\">\r\n      <ng-container *ngFor=\"let section of sections; let i = index\">\r\n        <app-form-section *ngIf=\"i !== 0 && (!section?.body?.details?.stage0?.isStage0 || section?.body?.details?.stage0?.isStage0 === 'false')\" 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=\"{{contentClass}}\">\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-->\r\n<script src=\"../index.ts\"></script>\r\n<form #f=\"ngForm\">\r\n\r\n  <div\r\n    *ngIf=\"form?.header?.status?.['key'] != 'NEW' \" class=\"mt-3\" id=\"accordion\" role=\"tablist\"\r\n    aria-multiselectable=\"true\">\r\n\r\n\r\n    <app-main-request-details [section]=\"sections[0]\"></app-main-request-details>\r\n\r\n    <header class=\"header-line fs-12 fw-medium fc-dark-gray mt-sm-5 mt-4 mb-4\" *ngIf=\"sections.length > 1\"> {{ i18n.translate('Approvals') }}</header>\r\n    <mat-accordion class=\"primary-accordion main-approval\">\r\n      <ng-container *ngFor=\"let section of sections; let i = index\">\r\n       <!-- <app-form-section\r\n          class=\"app-form-section\"\r\n          [segmentDynamicLoaderService]=\"segmentDynamicLoaderService\"\r\n          [section]=section\r\n          [lov]=\"form?.lovs\"\r\n          [isReadOnly]=\"section.header.readOnly\"\r\n          [form]=\"form\"\r\n          [controllers]=\"sectionsController\">\r\n        </app-form-section>-->\r\n      </ng-container>\r\n    </mat-accordion>\r\n  </div>\r\n</form>\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"] }]
+        }], ctorParameters: () => [{ type: CoreI18nService }, { type: i0.ChangeDetectorRef }], propDecorators: { formStateObject: [{
+                type: ViewChild,
+                args: ['f']
+            }], sectionSubmitted: [{
+                type: Output
+            }], sections: [{
+                type: Input
+            }], isReadOnly: [{
+                type: Input
+            }], isLoading: [{
+                type: Input
+            }], form: [{
+                type: Input
+            }], contentClass: [{
+                type: Input
+            }], sectionsController: [{
+                type: Input
+            }], segmentDynamicLoaderService: [{
+                type: Input
+            }], sectionFormComponent: [{
+                type: Input
+            }], sectionName: [{
+                type: Input
+            }] } });
+
+/* eslint-disable @angular-eslint/component-selector */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+class ConfirmationPopupComponent {
+    data;
+    dialogRef;
+    constructor(data, dialogRef) {
+        this.data = data;
+        this.dialogRef = dialogRef;
+    }
+    openForm() {
+        window.open("/group/i-gate/wm-bpm/forms?formId=" + this.data.id);
+        location.reload();
+    }
+    delete() {
+        this.dialogRef.close('yes');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ConfirmationPopupComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1$4.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: ConfirmationPopupComponent, isStandalone: true, selector: "app-delete-popup", 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 text-center justify-content-center mb-2 mx-5\">\r\n      <h2 class=\"fs-22 font-md-18 fw-medium fc-onyx my-3\">\r\n        <!-- {{ 'submittedSuccessfully' | transloco}} -->\r\n      </h2>\r\n      <h4 class=\"fs-14 fw-normal fst-italic fc-onyx bg-color-light-gray p-3 mb-1\">\r\n        <!-- <span>{{ 'formId' | transloco}}</span> -->\r\n        <span class=\"mx-1\"></span>\r\n        <span class=\"fs-weight-medium\">{{data.id}}</span>\r\n      </h4>\r\n    </div>\r\n  </mat-dialog-content>\r\n  <mat-dialog-actions>\r\n    <div class=\"d-flex justify-content-center w-100 mb-4 px-md-5\" *ngIf=\"data.type === 'view'\">\r\n      <button mat-stroked-button class=\"btn button-primary shadow-hover px-4\" matDialogClose>\r\n        <!-- {{ 'Close' | transloco}}  -->\r\n      </button>\r\n      <button mat-flat-button class=\"btn button-primary font-17 fw-medium px-4\" (click)=\"openForm()\">\r\n        <!-- {{ 'ViewRequest' | transloco}} -->\r\n        </button>\r\n    </div>\r\n    <div class=\"d-flex justify-content-center w-100 mb-4 px-md-5\"  *ngIf=\"data.type === 'delete'\">\r\n      <button mat-flat-button class=\"btn button-red\" [mat-dialog-close]='true' >\r\n        Delete\r\n      </button>\r\n      <span class=\"mx-2\"></span>\r\n      <button mat-flat-button class=\"btn button-primary\" matDialogClose>\r\n        Cancel\r\n      </button>\r\n    </div>\r\n    <div class=\"d-flex justify-content-center w-100 mb-4 px-md-5\" *ngIf=\"data.type === 'done'\">\r\n      <button mat-flat-button class=\"btn button-primary shadow-hover px-4\" matDialogClose>\r\n        Close\r\n      </button>\r\n    </div>\r\n  </mat-dialog-actions>\r\n\r\n</div>\r\n", styles: [".icon{font-size:40px;min-width:75px;width:75px;height:75px;background-color:#00c48c;padding:5px;display:flex;align-items:center;justify-content:center;margin:auto;color:#fff;border-radius:50%}\n"], dependencies: [{ kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ConfirmationPopupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-delete-popup', schemas: [CUSTOM_ELEMENTS_SCHEMA], standalone: true, imports: [
+                        MatDialogContent,
+                        MatDialogActions,
+                        MatButton,
+                        MatDialogClose,
+                        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 text-center justify-content-center mb-2 mx-5\">\r\n      <h2 class=\"fs-22 font-md-18 fw-medium fc-onyx my-3\">\r\n        <!-- {{ 'submittedSuccessfully' | transloco}} -->\r\n      </h2>\r\n      <h4 class=\"fs-14 fw-normal fst-italic fc-onyx bg-color-light-gray p-3 mb-1\">\r\n        <!-- <span>{{ 'formId' | transloco}}</span> -->\r\n        <span class=\"mx-1\"></span>\r\n        <span class=\"fs-weight-medium\">{{data.id}}</span>\r\n      </h4>\r\n    </div>\r\n  </mat-dialog-content>\r\n  <mat-dialog-actions>\r\n    <div class=\"d-flex justify-content-center w-100 mb-4 px-md-5\" *ngIf=\"data.type === 'view'\">\r\n      <button mat-stroked-button class=\"btn button-primary shadow-hover px-4\" matDialogClose>\r\n        <!-- {{ 'Close' | transloco}}  -->\r\n      </button>\r\n      <button mat-flat-button class=\"btn button-primary font-17 fw-medium px-4\" (click)=\"openForm()\">\r\n        <!-- {{ 'ViewRequest' | transloco}} -->\r\n        </button>\r\n    </div>\r\n    <div class=\"d-flex justify-content-center w-100 mb-4 px-md-5\"  *ngIf=\"data.type === 'delete'\">\r\n      <button mat-flat-button class=\"btn button-red\" [mat-dialog-close]='true' >\r\n        Delete\r\n      </button>\r\n      <span class=\"mx-2\"></span>\r\n      <button mat-flat-button class=\"btn button-primary\" matDialogClose>\r\n        Cancel\r\n      </button>\r\n    </div>\r\n    <div class=\"d-flex justify-content-center w-100 mb-4 px-md-5\" *ngIf=\"data.type === 'done'\">\r\n      <button mat-flat-button class=\"btn button-primary shadow-hover px-4\" matDialogClose>\r\n        Close\r\n      </button>\r\n    </div>\r\n  </mat-dialog-actions>\r\n\r\n</div>\r\n", styles: [".icon{font-size:40px;min-width:75px;width:75px;height:75px;background-color:#00c48c;padding:5px;display:flex;align-items:center;justify-content:center;margin:auto;color:#fff;border-radius:50%}\n"] }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }, { type: i1$4.MatDialogRef }] });
+
+/* eslint-disable @angular-eslint/component-selector */
+/* eslint-disable @typescript-eslint/no-empty-function */
+class DeletePopupComponent {
+    constructor() { }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: DeletePopupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: DeletePopupComponent, isStandalone: true, selector: "app-delete-popup", ngImport: i0, template: "<div class=\"popup-container\">\r\n  <div class=\"d-flex align-items-center justify-content-end\" mat-dialog-title>\r\n    <button class=\"mat-close-modal\" matDialogClose>\r\n      <span class=\"sfi sfi-close fc-black\"></span>\r\n    </button>\r\n  </div>\r\n  <mat-dialog-content class=\"border-0 pt-0\">\r\n    <div class=\"d-flex flex-column align-items-center justify-content-center\">\r\n      <span class=\"sfi sfi-trash font-50 fc-coral mb-2\"></span>\r\n      <h2 class=\"fs-31 font-md-25 fw-bold fc-onyx mb-0\">\r\n        Are you sure !\r\n      </h2>\r\n      <h4 class=\"fs-15 fw-normal fc-dark-gray mb-0\">you want Delete This Car</h4>\r\n    </div>\r\n  </mat-dialog-content>\r\n  <mat-dialog-actions>\r\n    <div class=\"d-flex justify-content-center w-100 mb-4 px-md-5\">\r\n      <button class=\"btn button-secondary font-13 fw-medium h-51 w-100\" matDialogClose>\r\n        <span>Cancel</span>\r\n      </button>\r\n      <span class=\"mx-2\"></span>\r\n      <button class=\"btn button-primary font-13 fw-medium h-51 w-100\">\r\n        <span>Delete</span>\r\n      </button>\r\n    </div>\r\n  </mat-dialog-actions>\r\n\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: DeletePopupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-delete-popup', schemas: [CUSTOM_ELEMENTS_SCHEMA], standalone: true, imports: [
+                        MatDialogContent,
+                        MatDialogClose,
+                        MatDialogActions
+                    ], template: "<div class=\"popup-container\">\r\n  <div class=\"d-flex align-items-center justify-content-end\" mat-dialog-title>\r\n    <button class=\"mat-close-modal\" matDialogClose>\r\n      <span class=\"sfi sfi-close fc-black\"></span>\r\n    </button>\r\n  </div>\r\n  <mat-dialog-content class=\"border-0 pt-0\">\r\n    <div class=\"d-flex flex-column align-items-center justify-content-center\">\r\n      <span class=\"sfi sfi-trash font-50 fc-coral mb-2\"></span>\r\n      <h2 class=\"fs-31 font-md-25 fw-bold fc-onyx mb-0\">\r\n        Are you sure !\r\n      </h2>\r\n      <h4 class=\"fs-15 fw-normal fc-dark-gray mb-0\">you want Delete This Car</h4>\r\n    </div>\r\n  </mat-dialog-content>\r\n  <mat-dialog-actions>\r\n    <div class=\"d-flex justify-content-center w-100 mb-4 px-md-5\">\r\n      <button class=\"btn button-secondary font-13 fw-medium h-51 w-100\" matDialogClose>\r\n        <span>Cancel</span>\r\n      </button>\r\n      <span class=\"mx-2\"></span>\r\n      <button class=\"btn button-primary font-13 fw-medium h-51 w-100\">\r\n        <span>Delete</span>\r\n      </button>\r\n    </div>\r\n  </mat-dialog-actions>\r\n\r\n</div>\r\n" }]
+        }], ctorParameters: () => [] });
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @angular-eslint/component-selector */
+class DeleteDialogComponent {
+    dialogRef;
+    i18n;
+    constructor(dialogRef, i18n) {
+        this.dialogRef = dialogRef;
+        this.i18n = i18n;
+    }
+    delete() {
+        this.dialogRef.close('yes');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: DeleteDialogComponent, deps: [{ token: i1$4.MatDialogRef }, { token: CoreI18nService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: DeleteDialogComponent, isStandalone: true, selector: "app-delete-dialog", ngImport: i0, 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"], dependencies: [{ kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: DeleteDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-delete-dialog', schemas: [CUSTOM_ELEMENTS_SCHEMA], standalone: true, imports: [
+                        MatDialogContent,
+                        MatDialogClose
+                    ], 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$4.MatDialogRef }, { type: CoreI18nService }] });
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @angular-eslint/component-selector */
+class SubmitDialogComponent {
+    data;
+    i18n;
+    successData;
+    inboxUri;
+    constructor(data, i18n) {
+        this.data = data;
+        this.i18n = i18n;
+        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;
+        }
+        else {
+            return '';
+        }
+    }
+    viewForm(formId, formName) {
+        if (formId) {
+            if (formId?.toLowerCase().includes('draft')) {
+                window.open(`/group/i-gate/wm-bpm/forms?formName=${formName}&formId=${formId}`);
+                return;
+            }
+            window.open('/group/i-gate/wm-bpm/forms?formId=' + formId);
+        }
+    }
+    getStatus(statusKey) {
+        switch (statusKey) {
+            case 'APPROVED':
+                return 'success';
+            case 'COMPLETED':
+                return 'success';
+            case 'REJECTED':
+                return 'danger';
+            case 'CANCELLED':
+                return 'danger';
+            case 'PENDING':
+                return 'warning';
+            default:
+                return '';
+                break;
+        }
+    }
+    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"] }] });
+}
+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"] }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }, { type: CoreI18nService }] });
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @angular-eslint/component-selector */
+//import { CoreI18nService} from '../../../../services';
+class ConfirmDialogComponent {
+    dialogRef;
+    i18n;
+    constructor(dialogRef, i18n) {
+        this.dialogRef = dialogRef;
+        this.i18n = i18n;
+    }
+    confirm() {
+        this.dialogRef.close('yes');
+        //////
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ConfirmDialogComponent, deps: [{ token: i1$4.MatDialogRef }, { token: CoreI18nService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: ConfirmDialogComponent, isStandalone: true, selector: "app-confirm-dialog", ngImport: i0, 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('drf-confirmatton-msg')}}\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('No-Discard')}}</ds-button>\r\n                <ds-button color=\"red\" (click)=\"confirm()\">{{i18n.translate('Yes-Proceed')}}</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"], dependencies: [{ kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ConfirmDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-confirm-dialog', schemas: [CUSTOM_ELEMENTS_SCHEMA], standalone: true, imports: [
+                        MatDialogContent,
+                        MatDialogClose
+                    ], 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('drf-confirmatton-msg')}}\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('No-Discard')}}</ds-button>\r\n                <ds-button color=\"red\" (click)=\"confirm()\">{{i18n.translate('Yes-Proceed')}}</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$4.MatDialogRef }, { type: CoreI18nService }] });
+
+class FormatAsPasswordPipe {
+    transform(value) {
+        if (typeof value === 'number')
+            value = value.toString();
+        const length = value.length;
+        return '*'.repeat(length);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: FormatAsPasswordPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.8", ngImport: i0, type: FormatAsPasswordPipe, name: "formatAsPassword" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: FormatAsPasswordPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'formatAsPassword'
+                }]
+        }] });
+
+/* eslint-disable no-useless-escape */
+class MycurrencyPipe {
+    prefix;
+    decimal_separator;
+    thousands_separator;
+    suffix;
+    constructor() {
+        this.prefix = '';
+        this.suffix = '';
+        this.decimal_separator = '.';
+        this.thousands_separator = ',';
+    }
+    transform(value, allowNegative = false, decimalPrecision = 2) {
+        if (value == undefined || value === '') {
+            return null;
+        }
+        if (allowNegative) {
+            value = value.toString();
+            if (value.startsWith('(') || value.startsWith('-')) {
+                value = '-' + value.substr(1, value.length).replace(/\(|\)|\$|\-/g, '');
+            }
+            else {
+                value = value.replace(/\(|\)|\$|\-/g, '');
+            }
+        }
+        let [integer, fraction = ''] = (value || '').toString().split(this.decimal_separator);
+        fraction = decimalPrecision > 0 ? this.decimal_separator + (fraction + '000000').substring(0, 2) : '';
+        integer = integer.replace(/\B(?=(\d{3})+(?!\d))/g, this.thousands_separator);
+        // If user types .xx we can display 0.xx
+        if (integer === '') {
+            integer = '0';
+        }
+        else if (integer.startsWith('$')) {
+            // If there are multiple transforms, remove the previous dollar sign (blur and change at the same time)
+            integer = integer.substr(1, integer.length);
+        }
+        else if (allowNegative && integer.startsWith('-')) {
+            // If user inputs negative number set to paranthesis format
+            integer = integer.substr(1, integer.length);
+            return '(' + this.prefix + integer + fraction + ')';
+        }
+        return this.prefix + integer + fraction;
+    }
+    parse(value, allowNegative = false) {
+        let [integer, fraction = ''] = (value || '').split(this.decimal_separator);
+        integer = integer.replace(new RegExp(/[^\d\.]/, 'g'), '');
+        fraction = parseInt(fraction, 10) > 0 && 2 > 0 ? this.decimal_separator + (fraction + '000000').substring(0, 2) : '';
+        if (allowNegative && value.startsWith('(') && value.endsWith(')')) {
+            return (-1 * parseFloat(integer + fraction)).toString();
+        }
+        else {
+            return integer + fraction;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: MycurrencyPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.8", ngImport: i0, type: MycurrencyPipe, name: "mycurrency" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: MycurrencyPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'mycurrency'
+                }]
+        }], ctorParameters: () => [] });
+
+class CustomDateFormat {
+    _parse = {
+        dateInput: 'DD/MM/YYYY'
+    };
+    _display = {
+        dateInput: 'DD/MM/YYYY',
+        monthYearLabel: 'DD MMM YYYY',
+        dateA11yLabel: 'LL',
+        monthYearA11yLabel: 'MMMM YYYY'
+    };
+    set parse(parse) {
+        this._parse = Object.assign({}, this._parse, parse);
+    }
+    get parse() {
+        return this._parse;
+    }
+    set display(display) {
+        this._display = Object.assign({}, this._display, display);
+    }
+    get display() {
+        return this._display;
+    }
+    updateDateFormat(parse, display) {
+        this.parse = parse;
+        if (!display) {
+            display = parse;
+        }
+        this.display = display;
+    }
+}
+
+const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => BaseComponent),
     multi: true,
 };
 class BaseComponent {
@@ -898,13 +2068,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: i2.HttpClient }, { token: i1$1.FormBuilder }, { token: i4.DateAdapter }, { token: i0.ChangeDetectorRef }, { token: i1.MatDialog }, { token: i1.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: i1$3.FormBuilder }, { token: i4$1.DateAdapter }, { token: i0.ChangeDetectorRef }, { token: i1$4.MatDialog }, { token: i1$4.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: i2.HttpClient }, { type: i1$1.FormBuilder }, { type: i4.DateAdapter }, { type: i0.ChangeDetectorRef }, { type: i1.MatDialog }, { type: i1.MatDialogRef }, { type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: CoreI18nService }, { type: i1.HttpClient }, { type: i1$3.FormBuilder }, { type: i4$1.DateAdapter }, { type: i0.ChangeDetectorRef }, { type: i1$4.MatDialog }, { type: i1$4.MatDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
                 }] }, { type: MycurrencyPipe }, { type: CustomDateFormat, decorators: [{
@@ -1687,7 +2857,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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.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: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.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,
@@ -1926,7 +3096,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$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.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: i1$3.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.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,
@@ -2135,7 +3305,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$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+        ], 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$3.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.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,
@@ -2329,7 +3499,7 @@ class InputComponent extends BaseComponent {
         this.emitedValue.emit(this.field.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", displayValue: "displayValue", hasError: "hasError", hasTooltip: "hasTooltip", 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", emitedChangedValue1: "emitedChangedValue1", useCurrency: "useCurrency", useMask: "useMask" }, 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' : 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                [attr.disabled]=\"disabled\" oninput=\"validity.valid || (value='');\" [formControl]=\"controller\"\r\n                (input)=\"onValueChange($event)\" [required]=\"required\" [maxlength]=\"maxLength\" [minLength]=\"minLength\"\r\n                [placeholder]=\"placeholder\">\r\n               }\r\n        @if(type === 'enOnly'){\r\n          <input  enOnly matInput [value]=\"value\"\r\n          [attr.disabled]=\"disabled\" oninput=\"validity.valid || (value='');\" [formControl]=\"controller\"\r\n          (input)=\"onValueChange($event)\" [required]=\"required\" [maxlength]=\"maxLength\" [minLength]=\"minLength\"\r\n          [placeholder]=\"placeholder\">\r\n        }\r\n              <!--  -->\r\n        @if(type !== 'enOnly' &&  type !== 'arOnly'){\r\n          <input  matInput [value]=\"value\"\r\n          [attr.disabled]=\"disabled\" oninput=\"validity.valid || (value='');\" [formControl]=\"controller\" [type]=\"type\"\r\n          (input)=\"onValueChange($event)\" (change)=\"onValueChange1($event)\" [required]=\"required\" [maxlength]=\"maxLength\" [minLength]=\"minLength\"\r\n          [placeholder]=\"placeholder\">\r\n        }\r\n      </label>\r\n      @if(matSuffix){<span matSuffix class=\"sfi {{iconSuffixName}}\"></span>}\r\n      @if(!controller?.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    @if(showErrorMessage && controller.value){\r\n      <span class=\"fc-coral\" style=\"color:#f44336\">\r\n        {{errorMessage}}\r\n      </span>\r\n    }\r\n}\r\n\r\n@if(isReadOnly && (showIfEmpty || field)){\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]=\"field\"></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$2.SatPopoverComponent, selector: "sat-popover", inputs: ["anchor", "horizontalAlign", "xAlign", "verticalAlign", "yAlign", "forceAlignment", "lockAlignment", "autoFocus", "restoreFocus", "scrollStrategy", "hasBackdrop", "interactiveClose", "openTransition", "closeTransition", "openAnimationStartAtScale", "closeAnimationEndAtScale", "backdropClass", "panelClass"], outputs: ["opened", "closed", "afterOpen", "afterClose", "backdropClicked", "overlayKeydown"] }, { kind: "directive", type: i1$2.SatPopoverAnchorDirective, selector: "[satPopoverAnchor]", inputs: ["satPopoverAnchor"], exportAs: ["satPopoverAnchor"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$1.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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: InputComponent, isStandalone: true, selector: "app-input", inputs: { label: "label", displayValue: "displayValue", hasError: "hasError", hasTooltip: "hasTooltip", 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", emitedChangedValue1: "emitedChangedValue1", useCurrency: "useCurrency", useMask: "useMask" }, 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' : 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                [attr.disabled]=\"disabled\" oninput=\"validity.valid || (value='');\" [formControl]=\"controller\"\r\n                (input)=\"onValueChange($event)\" [required]=\"required\" [maxlength]=\"maxLength\" [minLength]=\"minLength\"\r\n                [placeholder]=\"placeholder\">\r\n               }\r\n        @if(type === 'enOnly'){\r\n          <input  enOnly matInput [value]=\"value\"\r\n          [attr.disabled]=\"disabled\" oninput=\"validity.valid || (value='');\" [formControl]=\"controller\"\r\n          (input)=\"onValueChange($event)\" [required]=\"required\" [maxlength]=\"maxLength\" [minLength]=\"minLength\"\r\n          [placeholder]=\"placeholder\">\r\n        }\r\n              <!--  -->\r\n        @if(type !== 'enOnly' &&  type !== 'arOnly'){\r\n          <input  matInput [value]=\"value\"\r\n          [attr.disabled]=\"disabled\" oninput=\"validity.valid || (value='');\" [formControl]=\"controller\" [type]=\"type\"\r\n          (input)=\"onValueChange($event)\" (change)=\"onValueChange1($event)\" [required]=\"required\" [maxlength]=\"maxLength\" [minLength]=\"minLength\"\r\n          [placeholder]=\"placeholder\">\r\n        }\r\n      </label>\r\n      @if(matSuffix){<span matSuffix class=\"sfi {{iconSuffixName}}\"></span>}\r\n      @if(!controller?.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    @if(showErrorMessage && controller.value){\r\n      <span class=\"fc-coral\" style=\"color:#f44336\">\r\n        {{errorMessage}}\r\n      </span>\r\n    }\r\n}\r\n\r\n@if(isReadOnly && (showIfEmpty || field)){\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]=\"field\"></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$2.SatPopoverComponent, selector: "sat-popover", inputs: ["anchor", "horizontalAlign", "xAlign", "verticalAlign", "yAlign", "forceAlignment", "lockAlignment", "autoFocus", "restoreFocus", "scrollStrategy", "hasBackdrop", "interactiveClose", "openTransition", "closeTransition", "openAnimationStartAtScale", "closeAnimationEndAtScale", "backdropClass", "panelClass"], outputs: ["opened", "closed", "afterOpen", "afterClose", "backdropClicked", "overlayKeydown"] }, { kind: "directive", type: i1$2.SatPopoverAnchorDirective, selector: "[satPopoverAnchor]", inputs: ["satPopoverAnchor"], exportAs: ["satPopoverAnchor"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$3.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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: InputComponent, decorators: [{
             type: Component,
@@ -2476,7 +3646,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$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.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$2.SatPopoverComponent, selector: "sat-popover", inputs: ["anchor", "horizontalAlign", "xAlign", "verticalAlign", "yAlign", "forceAlignment", "lockAlignment", "autoFocus", "restoreFocus", "scrollStrategy", "hasBackdrop", "interactiveClose", "openTransition", "closeTransition", "openAnimationStartAtScale", "closeAnimationEndAtScale", "backdropClass", "panelClass"], outputs: ["opened", "closed", "afterOpen", "afterClose", "backdropClicked", "overlayKeydown"] }, { kind: "directive", type: 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: i1$3.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.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$2.SatPopoverComponent, selector: "sat-popover", inputs: ["anchor", "horizontalAlign", "xAlign", "verticalAlign", "yAlign", "forceAlignment", "lockAlignment", "autoFocus", "restoreFocus", "scrollStrategy", "hasBackdrop", "interactiveClose", "openTransition", "closeTransition", "openAnimationStartAtScale", "closeAnimationEndAtScale", "backdropClass", "panelClass"], outputs: ["opened", "closed", "afterOpen", "afterClose", "backdropClicked", "overlayKeydown"] }, { kind: "directive", type: 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,
@@ -2586,7 +3756,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$2.SatPopoverComponent, selector: "sat-popover", inputs: ["anchor", "horizontalAlign", "xAlign", "verticalAlign", "yAlign", "forceAlignment", "lockAlignment", "autoFocus", "restoreFocus", "scrollStrategy", "hasBackdrop", "interactiveClose", "openTransition", "closeTransition", "openAnimationStartAtScale", "closeAnimationEndAtScale", "backdropClass", "panelClass"], outputs: ["opened", "closed", "afterOpen", "afterClose", "backdropClicked", "overlayKeydown"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.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$2.SatPopoverComponent, selector: "sat-popover", inputs: ["anchor", "horizontalAlign", "xAlign", "verticalAlign", "yAlign", "forceAlignment", "lockAlignment", "autoFocus", "restoreFocus", "scrollStrategy", "hasBackdrop", "interactiveClose", "openTransition", "closeTransition", "openAnimationStartAtScale", "closeAnimationEndAtScale", "backdropClass", "panelClass"], outputs: ["opened", "closed", "afterOpen", "afterClose", "backdropClicked", "overlayKeydown"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.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,
@@ -2692,7 +3862,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$2.SatPopoverComponent, selector: "sat-popover", inputs: ["anchor", "horizontalAlign", "xAlign", "verticalAlign", "yAlign", "forceAlignment", "lockAlignment", "autoFocus", "restoreFocus", "scrollStrategy", "hasBackdrop", "interactiveClose", "openTransition", "closeTransition", "openAnimationStartAtScale", "closeAnimationEndAtScale", "backdropClass", "panelClass"], outputs: ["opened", "closed", "afterOpen", "afterClose", "backdropClicked", "overlayKeydown"] }, { kind: "component", type: 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$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.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$2.SatPopoverComponent, selector: "sat-popover", inputs: ["anchor", "horizontalAlign", "xAlign", "verticalAlign", "yAlign", "forceAlignment", "lockAlignment", "autoFocus", "restoreFocus", "scrollStrategy", "hasBackdrop", "interactiveClose", "openTransition", "closeTransition", "openAnimationStartAtScale", "closeAnimationEndAtScale", "backdropClass", "panelClass"], outputs: ["opened", "closed", "afterOpen", "afterClose", "backdropClicked", "overlayKeydown"] }, { kind: "component", type: 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$3.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.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,
@@ -2826,7 +3996,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$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.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$2.SatPopoverComponent, selector: "sat-popover", inputs: ["anchor", "horizontalAlign", "xAlign", "verticalAlign", "yAlign", "forceAlignment", "lockAlignment", "autoFocus", "restoreFocus", "scrollStrategy", "hasBackdrop", "interactiveClose", "openTransition", "closeTransition", "openAnimationStartAtScale", "closeAnimationEndAtScale", "backdropClass", "panelClass"], outputs: ["opened", "closed", "afterOpen", "afterClose", "backdropClicked", "overlayKeydown"] }, { kind: "component", type: 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: i1$3.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.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$2.SatPopoverComponent, selector: "sat-popover", inputs: ["anchor", "horizontalAlign", "xAlign", "verticalAlign", "yAlign", "forceAlignment", "lockAlignment", "autoFocus", "restoreFocus", "scrollStrategy", "hasBackdrop", "interactiveClose", "openTransition", "closeTransition", "openAnimationStartAtScale", "closeAnimationEndAtScale", "backdropClass", "panelClass"], outputs: ["opened", "closed", "afterOpen", "afterClose", "backdropClicked", "overlayKeydown"] }, { kind: "component", type: 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,
@@ -3216,7 +4386,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$3.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$3.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$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.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$5.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$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i1$5.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$3.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.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,
@@ -3382,7 +4552,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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.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: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.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,
@@ -3496,7 +4666,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$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$1.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: i1$3.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1$3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$3.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,
@@ -3710,7 +4880,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$4.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]" }] });
+    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$6.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]" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: TableListComponent, decorators: [{
             type: Component,
@@ -4014,7 +5184,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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.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: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.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,
@@ -4036,7 +5206,7 @@ class TermsConditionsComponent {
         this.data = data;
         this.termsBody = data;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: TermsConditionsComponent, deps: [{ token: i1.MatDialogRef }, { token: CoreI18nService }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: TermsConditionsComponent, deps: [{ token: i1$4.MatDialogRef }, { token: CoreI18nService }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: TermsConditionsComponent, isStandalone: true, selector: "app-terms-conditions", ngImport: i0, template: "<div class=\"popup-container\">\r\n  <div class=\"d-flex align-items-center justify-content-between\" mat-dialog-title>\r\n    <h3 class=\"mb-0 font-16 fw-medium\" >{{i18n.translate('termsAndConditions')}}</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=\"px-md-4\">\r\n      <p class=\"fs-15 fw-normal bg-color-light-gray p-3 text-break\" [innerHTML]='termsBody' > </p>\r\n    </div>\r\n  </mat-dialog-content>\r\n</div>\r\n", styles: ["::ng-deep .main-popup{--popup-max-width: 800px;--popup-width: 800px}\n"], dependencies: [{ kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { 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: TermsConditionsComponent, decorators: [{
@@ -4046,7 +5216,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                         MatDialogClose,
                         MatDialogTitle
                     ], standalone: true, template: "<div class=\"popup-container\">\r\n  <div class=\"d-flex align-items-center justify-content-between\" mat-dialog-title>\r\n    <h3 class=\"mb-0 font-16 fw-medium\" >{{i18n.translate('termsAndConditions')}}</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=\"px-md-4\">\r\n      <p class=\"fs-15 fw-normal bg-color-light-gray p-3 text-break\" [innerHTML]='termsBody' > </p>\r\n    </div>\r\n  </mat-dialog-content>\r\n</div>\r\n", styles: ["::ng-deep .main-popup{--popup-max-width: 800px;--popup-width: 800px}\n"] }]
-        }], ctorParameters: () => [{ type: i1.MatDialogRef }, { type: CoreI18nService }, { type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: i1$4.MatDialogRef }, { type: CoreI18nService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
                 }] }] });
@@ -4061,217 +5231,73 @@ class FaqsComponent {
     ngOnInit() {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: FaqsComponent, deps: [{ token: CoreI18nService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: FaqsComponent, isStandalone: true, selector: "app-faqs", inputs: { adminView: "adminView", faqs: "faqs" }, ngImport: i0, template: "<mat-accordion class=\"primary-accordion\">\r\n  <mat-expansion-panel [expanded]=\"i==0\" class=\"mb-4\" *ngFor=\"let item of faqs; let i = index;\" hideToggle #expansionPanel=\"matExpansionPanel\">\r\n    <mat-expansion-panel-header *ngIf=\"item.title\" class=\"expansion-header\">\r\n\r\n      <mat-panel-title>\r\n        <h3 class=\"fs-14 fw-medium fc-black mb-0 flex-grow-1 align-self-center\">{{ item.title }}</h3>\r\n        <ds-icon icon=\"plus-1\" class=\"fs-20 fc-coral\" *ngIf=\"!expansionPanel.expanded\"></ds-icon>\r\n        <ds-icon icon=\"minus\" class=\"fs-20 fc-dark-gray\" *ngIf=\"expansionPanel.expanded\"></ds-icon>\r\n      </mat-panel-title>\r\n\r\n    </mat-expansion-panel-header>\r\n    <p class=\"fs-14 fc-dark-gray\">\r\n      {{ item.content }}\r\n    </p>\r\n  </mat-expansion-panel>\r\n</mat-accordion>\r\n", styles: ["::ng-deep .primary-accordion{--accordion-height: 60px;--accordion-radius: 6px;--accordion-bc: var(--light-gray);--accordion-bc-active: var(--white);--accordion-border: 0;--accordion-border-active: 0;--accordion-shadow: none;--accordion-shadow-active: 0 10px 7px rgba(var(--rgb-black), .06);--panel-body-padding: 0 1.5rem 1rem}::ng-deep .primary-accordion .mat-expansion-indicator{display:none}\n"], dependencies: [{ kind: "directive", type: MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "directive", type: MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: FaqsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-faqs', standalone: true, imports: [
-                        MatAccordion,
-                        MatExpansionPanel,
-                        MatExpansionPanelTitle,
-                        NgIf,
-                        NgForOf
-                    ], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<mat-accordion class=\"primary-accordion\">\r\n  <mat-expansion-panel [expanded]=\"i==0\" class=\"mb-4\" *ngFor=\"let item of faqs; let i = index;\" hideToggle #expansionPanel=\"matExpansionPanel\">\r\n    <mat-expansion-panel-header *ngIf=\"item.title\" class=\"expansion-header\">\r\n\r\n      <mat-panel-title>\r\n        <h3 class=\"fs-14 fw-medium fc-black mb-0 flex-grow-1 align-self-center\">{{ item.title }}</h3>\r\n        <ds-icon icon=\"plus-1\" class=\"fs-20 fc-coral\" *ngIf=\"!expansionPanel.expanded\"></ds-icon>\r\n        <ds-icon icon=\"minus\" class=\"fs-20 fc-dark-gray\" *ngIf=\"expansionPanel.expanded\"></ds-icon>\r\n      </mat-panel-title>\r\n\r\n    </mat-expansion-panel-header>\r\n    <p class=\"fs-14 fc-dark-gray\">\r\n      {{ item.content }}\r\n    </p>\r\n  </mat-expansion-panel>\r\n</mat-accordion>\r\n", styles: ["::ng-deep .primary-accordion{--accordion-height: 60px;--accordion-radius: 6px;--accordion-bc: var(--light-gray);--accordion-bc-active: var(--white);--accordion-border: 0;--accordion-border-active: 0;--accordion-shadow: none;--accordion-shadow-active: 0 10px 7px rgba(var(--rgb-black), .06);--panel-body-padding: 0 1.5rem 1rem}::ng-deep .primary-accordion .mat-expansion-indicator{display:none}\n"] }]
-        }], ctorParameters: () => [{ type: CoreI18nService }], propDecorators: { adminView: [{
-                type: Input
-            }], faqs: [{
-                type: Input
-            }] } });
-
-/* eslint-disable @angular-eslint/component-selector */
-class FaqSidenavComponent {
-    sidenavService;
-    i18n;
-    data = [];
-    constructor(sidenavService, i18n) {
-        this.sidenavService = sidenavService;
-        this.i18n = i18n;
-    }
-    ngOnInit() {
-        // this.data = this.sidenavService?.subject?.value['data'];
-    }
-    closeSidenav() {
-        this.sidenavService.publish('close', FaqSidenavComponent);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: FaqSidenavComponent, deps: [{ token: SidenavService }, { token: CoreI18nService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: FaqSidenavComponent, isStandalone: true, selector: "app-faq-sidenav", ngImport: i0, template: "<div class=\"main-sidenav\">\r\n  <div class=\"sidenav-title\">\r\n    <h3>{{i18n.translate('serviceBrief')}}</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  </div>\r\n  <div class=\"sidenav-body\">\r\n    <app-faqs [faqs]=\"data\"></app-faqs>\r\n  </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "component", type: FaqsComponent, selector: "app-faqs", inputs: ["adminView", "faqs"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: FaqSidenavComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-faq-sidenav', standalone: true, imports: [
-                        FaqsComponent
-                    ], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<div class=\"main-sidenav\">\r\n  <div class=\"sidenav-title\">\r\n    <h3>{{i18n.translate('serviceBrief')}}</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  </div>\r\n  <div class=\"sidenav-body\">\r\n    <app-faqs [faqs]=\"data\"></app-faqs>\r\n  </div>\r\n</div>\r\n" }]
-        }], ctorParameters: () => [{ type: SidenavService }, { type: CoreI18nService }] });
-
-/* eslint-disable @angular-eslint/component-selector */
-class TitleSectionComponent {
-    sidenavService;
-    dialog;
-    title = '';
-    tooltip = true;
-    // introJS = introJs();
-    constructor(sidenavService, dialog) {
-        this.sidenavService = sidenavService;
-        this.dialog = dialog;
-    }
-    openFaq() {
-        this.sidenavService.publish('open', FaqSidenavComponent, 'end', 'over');
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: TitleSectionComponent, deps: [{ token: SidenavService }, { token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: TitleSectionComponent, selector: "app-title-section", inputs: { title: "title", tooltip: "tooltip" }, ngImport: i0, template: "<header class=\"section-title\">\r\n  <div class=\"d-flex align-items-center\">\r\n    <h1 class=\"main-title mb-0\" >{{title}}</h1>\r\n    <!-- <span class=\"mx-1\"></span>\r\n    <button mat-icon-button class=\"btn button-transparent square\"  *ngIf=\"tooltip\" (click)=\"openFaq()\">\r\n      <span class=\"sfi sfi-info fc-dark-gray font-20-imp\" id=\"step1\"></span>\r\n    </button>\r\n    <span class=\"mx-1\"></span> -->\r\n  </div>\r\n  <div class=\"filter-actions\">\r\n    <div class=\"filter-section\">\r\n      <ng-content select=\"[filter]\"></ng-content>\r\n    </div>\r\n    <span class=\"mx-1\"></span>\r\n    <ng-content select=\"[action]\"></ng-content>\r\n    <ng-content select=\"[search]\"></ng-content>\r\n  </div>\r\n</header>\r\n", styles: [":host ::ng-deep .section-title{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap}:host ::ng-deep .section-title .filter-actions{display:flex;align-items:center;justify-content:space-between;flex-grow:1}:host ::ng-deep .section-title .filter-actions .filter-section{width:140px}:host ::ng-deep .section-title .filter-actions .filter-section .mat-form-field .mat-form-field-wrapper{padding-bottom:0}\n"] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: TitleSectionComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-title-section', template: "<header class=\"section-title\">\r\n  <div class=\"d-flex align-items-center\">\r\n    <h1 class=\"main-title mb-0\" >{{title}}</h1>\r\n    <!-- <span class=\"mx-1\"></span>\r\n    <button mat-icon-button class=\"btn button-transparent square\"  *ngIf=\"tooltip\" (click)=\"openFaq()\">\r\n      <span class=\"sfi sfi-info fc-dark-gray font-20-imp\" id=\"step1\"></span>\r\n    </button>\r\n    <span class=\"mx-1\"></span> -->\r\n  </div>\r\n  <div class=\"filter-actions\">\r\n    <div class=\"filter-section\">\r\n      <ng-content select=\"[filter]\"></ng-content>\r\n    </div>\r\n    <span class=\"mx-1\"></span>\r\n    <ng-content select=\"[action]\"></ng-content>\r\n    <ng-content select=\"[search]\"></ng-content>\r\n  </div>\r\n</header>\r\n", styles: [":host ::ng-deep .section-title{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap}:host ::ng-deep .section-title .filter-actions{display:flex;align-items:center;justify-content:space-between;flex-grow:1}:host ::ng-deep .section-title .filter-actions .filter-section{width:140px}:host ::ng-deep .section-title .filter-actions .filter-section .mat-form-field .mat-form-field-wrapper{padding-bottom:0}\n"] }]
-        }], ctorParameters: () => [{ type: SidenavService }, { type: i1.MatDialog }], propDecorators: { title: [{
-                type: Input
-            }], tooltip: [{
-                type: Input
-            }] } });
-
-// Constant for basic validations
-const DONT_SHOW = null;
-const NO_COMMENTS = false;
-const HAS_COMMENTS = true;
-const URL_SEPARATOR = '/';
-const READ_ONLY = true;
-const WRITE_MODE = false;
-const NO_VALUE = null;
-const TRUE_STRING = 'TRUE';
-const FALSE_STRING = 'FALSE';
-const TRUE_BOOL = true;
-const FALSE_BOOL = false;
-// State Machine statuses
-const STATE_MACHINE_STATUS_IDLE = 'idle';
-const STATE_MACHINE_STATUS_FETCHING = 'fetching';
-const STATE_MACHINE_STATUS_SENDING = 'sending';
-const STATE_MACHINE_STATUS_RESULT = 'result';
-const STATE_MACHINE_STATUS_ERROR = 'error';
-// State Machine actions
-const STATE_MACHINE_ACTION_LOAD_FORM = 'loadForm';
-const STATE_MACHINE_ACTION_SUBMIT_FORM = 'submitForm';
-const STATE_MACHINE_ACTION_SEARCH_EMPLOYEE = 'searchEmployee';
-const STATE_MACHINE_ACTION_EMPLOYEE_PROFILE = 'employeeProfile';
-const STATE_MACHINE_ACTION_SUCCESS_WM = 'successWm';
-const STATE_MACHINE_ACTION_SUCCESS_RESPONSE = 'serviceResponce';
-const STATE_MACHINE_ACTION_SUCCESS_USERS = 'successUsers';
-const STATE_MACHINE_ACTION_CONVERT = 'convert';
-const STATE_MACHINE_ACTION_SUCCESS = 'success';
-const STATE_MACHINE_ACTION_FAILURE = 'failure';
-const STATE_MACHINE_ACTION_HANDLE_ERROR = 'handleError';
-const STATE_MACHINE_ACTION_LOAD_FILE = 'loadFile';
-const STATE_MACHINE_ACTION_USER_MAF = 'userDetails';
-const STATE_MACHINE_ACTION_USER_CEP = 'user';
-const STATE_MACHINE_ACTION_CALC = 'calc';
-const STATE_MACHINE_ACTION_SHOW_PRINT = 'showPrint';
-const STATE_MACHINE_ACTION_SUCCESS_PRINT = 'successPrint';
-const SERVICE_NAME_WM_HTML_GENERATOR = 'htmlGenerator';
-// Process name code
-const PROCESS_NAME_CODE = 'SCR';
-// HTTP protocols that are available
-const HTTP_PROTOCOL_HTTP = 'http://';
-const HTTP_PROTOCOL_HTTPS = 'https://';
-// Liferay constants
-// export const LR_AUTH_SERVICE_URL_PATH = '/group/i-gate/wm-bpm/forms/-/proxy/authenticate';
-// export const LR_SERVICE_URL_PATH = '/group/i-gate/wm-bpm/forms/-/proxy/execute';
-// export const LR_SERVICE_URL_HOST = '10.0.0.48';
-// export const LR_SERVICE_URL_HOST_DEV = '10.0.0.156';
-// export const LR_SERVICE_URL_PORT_DEV = '8000';
-// export const LR_SERVICE_URL_PATH_DEV = '/new.json';
-// export const LR_SERVICE_URL_PORT = '17899';
-// HTTP methods that are available are
-const HTTP_METHOD_GET = 'GET';
-const HTTP_METHOD_POST = 'POST';
-const HTTP_METHOD_PUT = 'PUT';
-// Available servers to the UI
-const TARGET_SERVER_WM = 'WM';
-const TARGET_SERVER_DP = 'DP';
-// Service Names that are available
-const SERVICE_NAME_WM_FORM = 'form';
-const SERVICE_NAME_WM_CHILD_FORM = '';
-const SERVICE_NAME_DP_SEARCH_EMPLOYEE = 'igate.users.search.v3';
-// Languages codes available in the application
-const LANGUAGE_CODE_EN = 'en';
-const LANGUAGE_CODE_AR = 'ar';
-// URLs form static assets
-const IGATE_STATIC_ASSET_PROFILE_PHOTO_URL = '/group/i-gate/wm-bpm/forms/-/proxy/portrait?email=';
-const HEADER_CONTENT_TYPE_FORM = 'application/x-www-form-urlencoded';
-// Roles constants
-const ROLE_REQUESTER = 'R';
-// Section IDs
-const SECTION_ID_REQUEST_DETAILS = 'requestDetails';
-const SECTION_ID_GM_PARTIAL_ROLE = 'GM';
-const SECTION_ID_SM_PARTIAL_ROLE = 'SM';
-const SECTION_ID_DM_PARTIAL_ROLE = 'DM';
-const SECTION_ID_VP_PARTIAL_ROLE = 'VP';
-const SECTION_ID_SVP_PARTIAL_ROLE = 'SVP';
-const SECTION_ID_EXECUTE_PARTIAL_ROLE = 'GovtRelationsLead';
-const SECTION_ID_PERFORM_PARTIAL_ROLE = 'GovtRelationsMember';
-const SECTION_ID_EMP_INFO_APPROVAL_PARTIAL_ROLE = 'EmpInfo';
-const SECTION_ID_PAYROLL_APPROVAL_PARTIAL_ROLE = 'Payroll';
-const SECTION_ID_REQUESTER_PARTIAL_NAME = 'Requester';
-const SECTION_ID_APPROVAL_PARTIAL_NAME = 'Approval';
-const SECTION_ID_NOTHING_PARTIAL_NAME = '';
-const SECTION_STATUS_PENDING = 'PENDING';
-const SECTION_STATUS_APPROVED = 'APPROVED';
-const SECTION_STATUS_UNSATISFIED = 'UNSATISFIED';
-const WM_ACTION_SAVE = 'SAVE';
-const WM_ACTION_SUBMIT = 'SUBMIT';
-const FORM_STATUS_NEW = 'NEW';
-const FORM_STATUS_PENDING = 'PENDING';
-const FORM_STATUS_APPROVED = 'APPROVED';
-const FORM_STATUS_REJECTED = 'REJECTED';
-const FORM_STATUS_SEND_BACK = 'SENDBACK';
-const FORM_STATUS_CANCELLED = 'CANCELLED';
-const FORM_STATUS_COMPLETED = 'COMPLETED';
-const STATE_MACHINE_ACTION_LOAD_HISTORY = 'loadHistory';
-const STATE_MACHINE_ACTION_SUCCESS_HISTORY = 'successHistory';
-const SERVICE_NAME_DP_LOAD_HISTORY = 'igate.get.inbox.item.workflow';
-const WM_ACTION_SAVE_CHANGES = 'SAVE_CHANGES';
-const SERVICE_NAME_WM_DRAFT_FORM = 'draft';
-// feedback and flag
-const STATE_MACHINE_ACTION_GET_INBOX_ITEM = 'getInboxItem';
-const SERVICE_NAME_DP_INBOX_ITEM = 'igate.get.inbox.item';
-const STATE_MACHINE_ACTION_SUCCESS_INBOX_ITEM = 'successInboxItem';
-const STATE_MACHINE_ACTION_SET_FLAG = 'setFlagPriority';
-const SERVICE_NAME_DP_UPDATE_INBOX_ITEM = 'igate.update.inbox.item';
-const STATE_MACHINE_ACTION_INBOX_ITEM_RESPONSE = 'inboxItemResponse';
-const FEEDBACK_STATUS_REQUEST = 'requestFeedback';
-const FEEDBACK_STATUS_RESPOND = 'respondToFeedback';
-const FEEDBACK_STATUS_WAITING = 'waitingFeedback';
-const FEEDBACK_STATUS_RESPONDED = 'feedbackResponded';
-const STATE_MACHINE_ACTION_SUBMIT_FEEDBACK = 'submitFeedback';
-const STATE_MACHINE_ACTION_GET_FEEDBACK = 'getFeedback';
-const STATE_MACHINE_ACTION_UPDATE_FEEDBACK = 'submitFeedbackResponse';
-const SERVICE_NAME_DP_CREATE_FEEDBACK = 'igate.create.inbox.item.feedback';
-const STATE_NAME_DP_GET_FEEDBACK = 'igate.get.inbox.item.feedback';
-const SERVICE_NAME_DP_UPDATE_FEEDBACK = 'igate.update.inbox.item.feedback';
-const PROFILE_CONTAINER = '#profileFormContent';
-const COMMENT_CONTAINER = '#commentsFormContent';
-const FEEDBACK_CONTAINER = '#feedbackFormContent';
-const INBOX_STATUS_PENDING = 'pending';
-const INBOX_STATUS_PROCESSED = 'processed';
-const INBOX_STATUS_SENT = 'sent';
-const REPORT = 'report';
-const DATE_TIME = 'DD/MM/YYYY HH:mm:ss';
-const DATE_DASH = 'DD-MMM-YYYY';
-const DATE_SLASH = 'DD/MM/YYYY';
-const SERVICE_NAME_WM_GET_APPROVED_REQUEST = 'requests';
-const SERVICE_NAME_WM_GET_MY_APPROVED_REQUEST = 'myRequests';
-const STATE_MACHINE_ACTION_GET_APPROVED_REQUEST = 'getApprovedRequest';
-const STATE_MACHINE_ACTION_GET_APPROVED_REQUEST_RESPONSE = 'getApprovedRequestResponse';
-const STATE_MACHINE_ACTION_PROJECT_MAF = 'projectDetails';
-const STATE_MACHINE_ACTION_PROJECT_CEP = 'project';
-const STATE_MACHINE_ACTION_COMMONAPI = 'commonApi';
-const STATE_MACHINE_ACTION_SEARCH = 'search';
-const STATE_MACHINE_ACTION_PPROVED_REQUESTS = 'approvedRequests';
-const GETSIPORTENTRYGROUPS = 'getSiportEntryGroups';
-const GETSIPORTENTRYLOCATIONS = 'getSiportEntryLocations';
-const STATE_MACHINE_ACTION_SUCCESS_SERVICES = 'serviceResponce';
-const SERVICE_NAME_MAF = 'MAF';
-const SERVICE_NAME_CEP = 'CEP';
-const STATE_MACHINE_ACTION_PDF = 'pdfAttachments';
-const LOGOUT_URL = '/c/portal/logout';
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: FaqsComponent, isStandalone: true, selector: "app-faqs", inputs: { adminView: "adminView", faqs: "faqs" }, ngImport: i0, template: "<mat-accordion class=\"primary-accordion\">\r\n  <mat-expansion-panel [expanded]=\"i==0\" class=\"mb-4\" *ngFor=\"let item of faqs; let i = index;\" hideToggle #expansionPanel=\"matExpansionPanel\">\r\n    <mat-expansion-panel-header *ngIf=\"item.title\" class=\"expansion-header\">\r\n\r\n      <mat-panel-title>\r\n        <h3 class=\"fs-14 fw-medium fc-black mb-0 flex-grow-1 align-self-center\">{{ item.title }}</h3>\r\n        <ds-icon icon=\"plus-1\" class=\"fs-20 fc-coral\" *ngIf=\"!expansionPanel.expanded\"></ds-icon>\r\n        <ds-icon icon=\"minus\" class=\"fs-20 fc-dark-gray\" *ngIf=\"expansionPanel.expanded\"></ds-icon>\r\n      </mat-panel-title>\r\n\r\n    </mat-expansion-panel-header>\r\n    <p class=\"fs-14 fc-dark-gray\">\r\n      {{ item.content }}\r\n    </p>\r\n  </mat-expansion-panel>\r\n</mat-accordion>\r\n", styles: ["::ng-deep .primary-accordion{--accordion-height: 60px;--accordion-radius: 6px;--accordion-bc: var(--light-gray);--accordion-bc-active: var(--white);--accordion-border: 0;--accordion-border-active: 0;--accordion-shadow: none;--accordion-shadow-active: 0 10px 7px rgba(var(--rgb-black), .06);--panel-body-padding: 0 1.5rem 1rem}::ng-deep .primary-accordion .mat-expansion-indicator{display:none}\n"], dependencies: [{ kind: "directive", type: MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "directive", type: MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: FaqsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-faqs', standalone: true, imports: [
+                        MatAccordion,
+                        MatExpansionPanel,
+                        MatExpansionPanelTitle,
+                        NgIf,
+                        NgForOf
+                    ], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<mat-accordion class=\"primary-accordion\">\r\n  <mat-expansion-panel [expanded]=\"i==0\" class=\"mb-4\" *ngFor=\"let item of faqs; let i = index;\" hideToggle #expansionPanel=\"matExpansionPanel\">\r\n    <mat-expansion-panel-header *ngIf=\"item.title\" class=\"expansion-header\">\r\n\r\n      <mat-panel-title>\r\n        <h3 class=\"fs-14 fw-medium fc-black mb-0 flex-grow-1 align-self-center\">{{ item.title }}</h3>\r\n        <ds-icon icon=\"plus-1\" class=\"fs-20 fc-coral\" *ngIf=\"!expansionPanel.expanded\"></ds-icon>\r\n        <ds-icon icon=\"minus\" class=\"fs-20 fc-dark-gray\" *ngIf=\"expansionPanel.expanded\"></ds-icon>\r\n      </mat-panel-title>\r\n\r\n    </mat-expansion-panel-header>\r\n    <p class=\"fs-14 fc-dark-gray\">\r\n      {{ item.content }}\r\n    </p>\r\n  </mat-expansion-panel>\r\n</mat-accordion>\r\n", styles: ["::ng-deep .primary-accordion{--accordion-height: 60px;--accordion-radius: 6px;--accordion-bc: var(--light-gray);--accordion-bc-active: var(--white);--accordion-border: 0;--accordion-border-active: 0;--accordion-shadow: none;--accordion-shadow-active: 0 10px 7px rgba(var(--rgb-black), .06);--panel-body-padding: 0 1.5rem 1rem}::ng-deep .primary-accordion .mat-expansion-indicator{display:none}\n"] }]
+        }], ctorParameters: () => [{ type: CoreI18nService }], propDecorators: { adminView: [{
+                type: Input
+            }], faqs: [{
+                type: Input
+            }] } });
+
+/* eslint-disable @angular-eslint/component-selector */
+class FaqSidenavComponent {
+    sidenavService;
+    i18n;
+    data = [];
+    constructor(sidenavService, i18n) {
+        this.sidenavService = sidenavService;
+        this.i18n = i18n;
+    }
+    ngOnInit() {
+        // this.data = this.sidenavService?.subject?.value['data'];
+    }
+    closeSidenav() {
+        this.sidenavService.publish('close', FaqSidenavComponent);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: FaqSidenavComponent, deps: [{ token: SidenavService }, { token: CoreI18nService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: FaqSidenavComponent, isStandalone: true, selector: "app-faq-sidenav", ngImport: i0, template: "<div class=\"main-sidenav\">\r\n  <div class=\"sidenav-title\">\r\n    <h3>{{i18n.translate('serviceBrief')}}</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  </div>\r\n  <div class=\"sidenav-body\">\r\n    <app-faqs [faqs]=\"data\"></app-faqs>\r\n  </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "component", type: FaqsComponent, selector: "app-faqs", inputs: ["adminView", "faqs"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: FaqSidenavComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-faq-sidenav', standalone: true, imports: [
+                        FaqsComponent
+                    ], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<div class=\"main-sidenav\">\r\n  <div class=\"sidenav-title\">\r\n    <h3>{{i18n.translate('serviceBrief')}}</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  </div>\r\n  <div class=\"sidenav-body\">\r\n    <app-faqs [faqs]=\"data\"></app-faqs>\r\n  </div>\r\n</div>\r\n" }]
+        }], ctorParameters: () => [{ type: SidenavService }, { type: CoreI18nService }] });
+
+/* eslint-disable @angular-eslint/component-selector */
+class TitleSectionComponent {
+    sidenavService;
+    dialog;
+    title = '';
+    tooltip = true;
+    // introJS = introJs();
+    constructor(sidenavService, dialog) {
+        this.sidenavService = sidenavService;
+        this.dialog = dialog;
+    }
+    openFaq() {
+        this.sidenavService.publish('open', FaqSidenavComponent, 'end', 'over');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: TitleSectionComponent, deps: [{ token: SidenavService }, { token: i1$4.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: TitleSectionComponent, selector: "app-title-section", inputs: { title: "title", tooltip: "tooltip" }, ngImport: i0, template: "<header class=\"section-title\">\r\n  <div class=\"d-flex align-items-center\">\r\n    <h1 class=\"main-title mb-0\" >{{title}}</h1>\r\n    <!-- <span class=\"mx-1\"></span>\r\n    <button mat-icon-button class=\"btn button-transparent square\"  *ngIf=\"tooltip\" (click)=\"openFaq()\">\r\n      <span class=\"sfi sfi-info fc-dark-gray font-20-imp\" id=\"step1\"></span>\r\n    </button>\r\n    <span class=\"mx-1\"></span> -->\r\n  </div>\r\n  <div class=\"filter-actions\">\r\n    <div class=\"filter-section\">\r\n      <ng-content select=\"[filter]\"></ng-content>\r\n    </div>\r\n    <span class=\"mx-1\"></span>\r\n    <ng-content select=\"[action]\"></ng-content>\r\n    <ng-content select=\"[search]\"></ng-content>\r\n  </div>\r\n</header>\r\n", styles: [":host ::ng-deep .section-title{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap}:host ::ng-deep .section-title .filter-actions{display:flex;align-items:center;justify-content:space-between;flex-grow:1}:host ::ng-deep .section-title .filter-actions .filter-section{width:140px}:host ::ng-deep .section-title .filter-actions .filter-section .mat-form-field .mat-form-field-wrapper{padding-bottom:0}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: TitleSectionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-title-section', template: "<header class=\"section-title\">\r\n  <div class=\"d-flex align-items-center\">\r\n    <h1 class=\"main-title mb-0\" >{{title}}</h1>\r\n    <!-- <span class=\"mx-1\"></span>\r\n    <button mat-icon-button class=\"btn button-transparent square\"  *ngIf=\"tooltip\" (click)=\"openFaq()\">\r\n      <span class=\"sfi sfi-info fc-dark-gray font-20-imp\" id=\"step1\"></span>\r\n    </button>\r\n    <span class=\"mx-1\"></span> -->\r\n  </div>\r\n  <div class=\"filter-actions\">\r\n    <div class=\"filter-section\">\r\n      <ng-content select=\"[filter]\"></ng-content>\r\n    </div>\r\n    <span class=\"mx-1\"></span>\r\n    <ng-content select=\"[action]\"></ng-content>\r\n    <ng-content select=\"[search]\"></ng-content>\r\n  </div>\r\n</header>\r\n", styles: [":host ::ng-deep .section-title{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap}:host ::ng-deep .section-title .filter-actions{display:flex;align-items:center;justify-content:space-between;flex-grow:1}:host ::ng-deep .section-title .filter-actions .filter-section{width:140px}:host ::ng-deep .section-title .filter-actions .filter-section .mat-form-field .mat-form-field-wrapper{padding-bottom:0}\n"] }]
+        }], ctorParameters: () => [{ type: SidenavService }, { type: i1$4.MatDialog }], propDecorators: { title: [{
+                type: Input
+            }], tooltip: [{
+                type: Input
+            }] } });
 
 class ProfileSectionComponent {
     i18n;
@@ -4469,7 +5495,8 @@ class FeedBackService {
     constructor(http, config) {
         this.http = http;
         this.config = config;
-        this.apiUrl = this.config.proxyServiceBaseUrl + window.wmConfig.language + this.config.proxyFullAddress + this.config.proxyServiceExecute;
+        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
     }
     feedbackForm = false;
@@ -4521,7 +5548,7 @@ class FeedBackService {
         });
         return this.performPostRequest(body);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: FeedBackService, deps: [{ token: i2.HttpClient }, { token: MY_LIB_CONFIG_TOKEN }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: FeedBackService, 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: FeedBackService, providedIn: "any" });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: FeedBackService, decorators: [{
@@ -4529,7 +5556,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
             args: [{
                     providedIn: "any"
                 }]
-        }], ctorParameters: () => [{ type: i2.HttpClient }, { type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MY_LIB_CONFIG_TOKEN]
                 }] }] });
@@ -4684,501 +5711,210 @@ class FeedbackSectionComponent {
                 else {
                     this.submitted = true;
                 }
-            });
-        }
-    }
-    errorOccured = false;
-    isSubmiting = false;
-    errorMsg = '';
-    showError(Response) {
-        if (!this.form) {
-            this.form = new Form(NO_VALUE, NO_VALUE, NO_VALUE, NO_VALUE, NO_VALUE, NO_VALUE, Response);
-        }
-        else {
-            this.errorOccured = true;
-            this.errorMsg = Response?.error[0];
-            // this.form.messages = Response;
-        }
-        window.scrollTo(0, 0);
-    }
-    handleFeedbackQuestion(event) {
-        this.feedBackQuestion = event;
-        this.handleFeedbackValidation();
-    }
-    handleFeedbackResponse(event) {
-        this.feedBackResponse = event;
-        this.handleResponseValidation();
-    }
-    handleUserSelected(event) {
-        this.searchEmp = {
-            personEmail: event.personEmail,
-            personName: event.personName
-        };
-        if (!this.feedBackQuestion) {
-            return;
-        }
-        this.handleFeedbackValidation();
-    }
-    handleResponseValidation() {
-        if (this.feedBackResponse.length >= 1 &&
-            this.feedBackResponse.length < 500) {
-            this.isResponseValidated = true;
-        }
-        else {
-            this.isResponseValidated = false;
-        }
-    }
-    handleFeedbackValidation() {
-        if (this.feedBackQuestion.length >= 1 &&
-            this.feedBackQuestion.length < 500 &&
-            this.searchEmp.personEmail) {
-            this.isFeedbackValidated = true;
-        }
-        else {
-            this.isFeedbackValidated = false;
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: FeedbackSectionComponent, deps: [{ token: FeedBackService }, { token: CoreI18nService }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: FeedbackSectionComponent, isStandalone: true, selector: "app-feedback-section", inputs: { inboxItem: "inboxItem", profile: "profile" }, ngImport: i0, 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('requestFeedback')}}</h3>\r\n    <ds-button square icon matDialogClose>\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\" *ngIf=\"submitted\">\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    </div>\r\n\r\n    <ng-container *ngIf=\"!submitted\">\r\n      <div class=\"mb-3\" *ngIf=\"feedBackService.feedbackForm \">\r\n        <app-search-employee #employee label=\"{{i18n.translate('requestTo')}}\" [field]=\"searchEmp\"\r\n          [labelTextReadMode]=\"i18n.translate('requestTo')\" [labelTextWriteMode]=\"i18n.translate('requestTo')\"\r\n          [name]=\"'searchEmp'\" (emitedValue)=\"handleUserSelected($event)\">\r\n        </app-search-employee>\r\n        <app-textarea #request [field]=\"employeeInput\" name=\"employeeInput\" label=\"{{i18n.translate('feedback')}}\"\r\n          [required]=\"true\" [minLength]='1' (emitedValue)=\"handleFeedbackQuestion($event)\" [maxLength]='500'\r\n          [errorMessage]=\"i18n.translate('lenghtMin1Max500')\">\r\n        </app-textarea>\r\n      </div>\r\n\r\n      <div class=\"info-section\" *ngIf=\"!feedBackService.feedbackForm\">\r\n        <ng-container *ngIf=\"feedBackService.responderForm\">\r\n          <app-info-item class=\"info-item w-100\" label=\"{{i18n.translate('requestFrom')}}\"\r\n            value=\"{{feedBackService?.feedbackResponse?.requestFrom}}\"></app-info-item>\r\n          <app-info-item class=\"info-item w-100\" label=\"{{i18n.translate('requestTo')}}\"\r\n            value=\"{{feedBackService?.feedbackResponse?.requestTo}}\"></app-info-item>\r\n          <app-info-item class=\"info-item w-100\" label=\"{{i18n.translate('feedbackQuestion')}}\"\r\n            value=\"{{feedBackService?.feedbackResponse?.requestFeedback}}\"></app-info-item>\r\n          <app-info-item class=\"info-item w-100\" label=\"{{i18n.translate('feedback')}}\"\r\n            value=\"{{feedBackService?.feedbackResponse?.responseFeedback}}\"></app-info-item>\r\n          <app-textarea #request class=\"full mx-3 mt-3 section-item\" [field]=\"employeeInput\" name=\"employeeInput\"\r\n            label=\"{{i18n.translate('feedback')}}\" [required]=\"true\" [minLength]='1'\r\n            (emitedValue)=\"handleFeedbackResponse($event)\" [maxLength]='500'\r\n            [errorMessage]=\"i18n.translate('lenghtMin1Max500')\">\r\n          </app-textarea>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"feedBackService.pendingForm\" id=\"responce_form\">\r\n          <app-info-item class=\"info-item w-100\" label=\"{{i18n.translate('requestFrom')}}\"\r\n            value=\"{{feedBackService?.feedbackResponse?.requestFrom}}\"></app-info-item>\r\n          <app-info-item class=\"info-item w-100\" label=\"{{i18n.translate('requestTo')}}\"\r\n            value=\"{{feedBackService?.feedbackResponse?.requestTo}}\"></app-info-item>\r\n          <app-info-item class=\"info-item w-100\" label=\"{{i18n.translate('feedbackQuestion')}}\"\r\n            value=\"{{feedBackService?.feedbackResponse?.requestFeedback}}\"></app-info-item>\r\n          <app-info-item class=\"info-item w-100\" label=\"{{i18n.translate('feedback')}}\"\r\n            value=\"{{feedBackService?.feedbackResponse?.responseFeedback}}\"></app-info-item>\r\n\r\n        </ng-container>\r\n      </div>\r\n\r\n      <div class=\"d-flex align-items-center justify-content-center w-100 gap-3\" *ngIf=\"!submitted\">\r\n        <ds-button shape=\"outline\" matDialogClose>\r\n          {{i18n.translate('Cancel')}}\r\n        </ds-button>\r\n        <ds-button *ngIf=\"feedBackService.feedbackForm\" (click)=\"addFeedback()\"\r\n          disabled=\"{{!(isFeedbackValidated)}}\">\r\n          {{i18n.translate('submit')}}\r\n        </ds-button>\r\n        <ds-button *ngIf=\"!feedBackService.feedbackForm && feedBackService.responderForm\"\r\n          disabled=\"{{!(isResponseValidated)}}\" (click)=\"addResponse()\">\r\n          {{i18n.translate('submit')}}\r\n        </ds-button>\r\n      </div>\r\n    </ng-container>\r\n\r\n  </mat-dialog-content>\r\n\r\n</div>\r\n", styles: ["::ng-deep .main-popup{--popup-max-width: 700px !important;--popup-width: 100% !important}\n"], dependencies: [{ kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SearchEmployeeComponent, selector: "app-search-employee", inputs: ["valueName", "label", "tooltip", "className", "showLabel", "optional", "data", "floatLabel", "error", "showEdit", "arrayList", "isUniqueUsers"], outputs: ["selectedEmp", "onInputChange", "editDirectManger", "deleteDirectManger", "emitedDeletedValue"] }, { kind: "component", type: TextareaComponent, selector: "app-textarea", inputs: ["label", "tooltip", "className", "preventSpecailChar"] }, { kind: "component", type: InfoItemComponent, selector: "app-info-item", inputs: ["label", "value", "name", "type", "dateType", "multiple", "insideTable", "hasLabel", "arrayList", "actionType", "download"] }, { kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: FeedbackSectionComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-feedback-section', schemas: [CUSTOM_ELEMENTS_SCHEMA], imports: [
-                        MatDialogContent,
-                        NgIf,
-                        SearchEmployeeComponent,
-                        TextareaComponent,
-                        InfoItemComponent,
-                        MatDialogTitle,
-                        MatDialogClose
-                    ], standalone: true, 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('requestFeedback')}}</h3>\r\n    <ds-button square icon matDialogClose>\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\" *ngIf=\"submitted\">\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    </div>\r\n\r\n    <ng-container *ngIf=\"!submitted\">\r\n      <div class=\"mb-3\" *ngIf=\"feedBackService.feedbackForm \">\r\n        <app-search-employee #employee label=\"{{i18n.translate('requestTo')}}\" [field]=\"searchEmp\"\r\n          [labelTextReadMode]=\"i18n.translate('requestTo')\" [labelTextWriteMode]=\"i18n.translate('requestTo')\"\r\n          [name]=\"'searchEmp'\" (emitedValue)=\"handleUserSelected($event)\">\r\n        </app-search-employee>\r\n        <app-textarea #request [field]=\"employeeInput\" name=\"employeeInput\" label=\"{{i18n.translate('feedback')}}\"\r\n          [required]=\"true\" [minLength]='1' (emitedValue)=\"handleFeedbackQuestion($event)\" [maxLength]='500'\r\n          [errorMessage]=\"i18n.translate('lenghtMin1Max500')\">\r\n        </app-textarea>\r\n      </div>\r\n\r\n      <div class=\"info-section\" *ngIf=\"!feedBackService.feedbackForm\">\r\n        <ng-container *ngIf=\"feedBackService.responderForm\">\r\n          <app-info-item class=\"info-item w-100\" label=\"{{i18n.translate('requestFrom')}}\"\r\n            value=\"{{feedBackService?.feedbackResponse?.requestFrom}}\"></app-info-item>\r\n          <app-info-item class=\"info-item w-100\" label=\"{{i18n.translate('requestTo')}}\"\r\n            value=\"{{feedBackService?.feedbackResponse?.requestTo}}\"></app-info-item>\r\n          <app-info-item class=\"info-item w-100\" label=\"{{i18n.translate('feedbackQuestion')}}\"\r\n            value=\"{{feedBackService?.feedbackResponse?.requestFeedback}}\"></app-info-item>\r\n          <app-info-item class=\"info-item w-100\" label=\"{{i18n.translate('feedback')}}\"\r\n            value=\"{{feedBackService?.feedbackResponse?.responseFeedback}}\"></app-info-item>\r\n          <app-textarea #request class=\"full mx-3 mt-3 section-item\" [field]=\"employeeInput\" name=\"employeeInput\"\r\n            label=\"{{i18n.translate('feedback')}}\" [required]=\"true\" [minLength]='1'\r\n            (emitedValue)=\"handleFeedbackResponse($event)\" [maxLength]='500'\r\n            [errorMessage]=\"i18n.translate('lenghtMin1Max500')\">\r\n          </app-textarea>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"feedBackService.pendingForm\" id=\"responce_form\">\r\n          <app-info-item class=\"info-item w-100\" label=\"{{i18n.translate('requestFrom')}}\"\r\n            value=\"{{feedBackService?.feedbackResponse?.requestFrom}}\"></app-info-item>\r\n          <app-info-item class=\"info-item w-100\" label=\"{{i18n.translate('requestTo')}}\"\r\n            value=\"{{feedBackService?.feedbackResponse?.requestTo}}\"></app-info-item>\r\n          <app-info-item class=\"info-item w-100\" label=\"{{i18n.translate('feedbackQuestion')}}\"\r\n            value=\"{{feedBackService?.feedbackResponse?.requestFeedback}}\"></app-info-item>\r\n          <app-info-item class=\"info-item w-100\" label=\"{{i18n.translate('feedback')}}\"\r\n            value=\"{{feedBackService?.feedbackResponse?.responseFeedback}}\"></app-info-item>\r\n\r\n        </ng-container>\r\n      </div>\r\n\r\n      <div class=\"d-flex align-items-center justify-content-center w-100 gap-3\" *ngIf=\"!submitted\">\r\n        <ds-button shape=\"outline\" matDialogClose>\r\n          {{i18n.translate('Cancel')}}\r\n        </ds-button>\r\n        <ds-button *ngIf=\"feedBackService.feedbackForm\" (click)=\"addFeedback()\"\r\n          disabled=\"{{!(isFeedbackValidated)}}\">\r\n          {{i18n.translate('submit')}}\r\n        </ds-button>\r\n        <ds-button *ngIf=\"!feedBackService.feedbackForm && feedBackService.responderForm\"\r\n          disabled=\"{{!(isResponseValidated)}}\" (click)=\"addResponse()\">\r\n          {{i18n.translate('submit')}}\r\n        </ds-button>\r\n      </div>\r\n    </ng-container>\r\n\r\n  </mat-dialog-content>\r\n\r\n</div>\r\n", styles: ["::ng-deep .main-popup{--popup-max-width: 700px !important;--popup-width: 100% !important}\n"] }]
-        }], ctorParameters: () => [{ type: FeedBackService }, { type: CoreI18nService }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [MAT_DIALOG_DATA]
-                }] }], propDecorators: { inboxItem: [{
-                type: Input
-            }], profile: [{
-                type: Input
-            }] } });
-
-class ActivitiesComponent {
-    sidenavService;
-    i18n;
-    constructor(sidenavService, i18n) {
-        this.sidenavService = sidenavService;
-        this.i18n = i18n;
-    }
-    attch(data) {
-        console.log(data.detail);
-        if (data.detail.type == 'download') {
-            this.downloadFile(data);
-        }
-    }
-    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;
-    }
-    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: [""] });
-}
-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 }] });
-
-class ServiceHeaderComponent {
-    i18n;
-    feedBackService;
-    dialog;
-    sidenavService;
-    form;
-    showHistory = false;
-    isLoading = false;
-    showApprovalHistory = false;
-    approvalHistory;
-    creationDate;
-    formTitle;
-    section;
-    serviceBrief = [];
-    approvals = [];
-    feedBackIcon = null;
-    flagPriority;
-    constructor(i18n, feedBackService, dialog, sidenavService) {
-        this.i18n = i18n;
-        this.feedBackService = feedBackService;
-        this.dialog = dialog;
-        this.sidenavService = sidenavService;
-    }
-    ngAfterViewInit() {
-        this.getApprovalHistory();
-        this.creationDate = moment(this.form.header.creationDate).locale('en-US').format("DD/MM/YYYY HH:mm:ss");
-    }
-    onCommentsFormClick() {
-        const comments = this.form.commentsDrop;
-        const resultData = [];
-        for (let index = 0; index < comments.length; index++) {
-            const item = comments[index];
-            const obj = {
-                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
-            };
-            resultData.push(obj);
-        }
-        // this.profileRequesterService.activities = resultData;
-        this.sidenavService.publish('open', ActivitiesComponent);
-    }
-    feedback() {
-        this.dialog.open(FeedbackSectionComponent, {
-            panelClass: ['main-popup'],
-            data: {
-                profile: this.form.profileInfoDrop,
-                inboxItem: this.form.inboxItem,
-                form: this.form
-            }
-        });
-    }
-    showUserInfo() {
-        if (!this.isLoading) {
-            this.sidenavService.data = this.form?.profileInfoDrop;
-            this.sidenavService.publish('open', ProfileSectionComponent);
-        }
-    }
-    setFlagPriority(id) {
-        this.flagPriority = id;
-        this.form.inboxItem.flagPriority = id;
-        // this.stateMachineService.dispatch(Constants.STATE_MACHINE_ACTION_SET_FLAG, id).then(() => {
-        // });
+            });
+        }
     }
-    statusClass(status) {
-        if (status) {
-            if (this.isLoading) {
-                return 'loading';
-            }
-            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';
-            }
+    errorOccured = false;
+    isSubmiting = false;
+    errorMsg = '';
+    showError(Response) {
+        if (!this.form) {
+            this.form = new Form(NO_VALUE, NO_VALUE, NO_VALUE, NO_VALUE, NO_VALUE, NO_VALUE, Response);
         }
         else {
-            return 'success';
+            this.errorOccured = true;
+            this.errorMsg = Response?.error[0];
+            // this.form.messages = Response;
         }
+        window.scrollTo(0, 0);
     }
-    openFaq() {
-        this.sidenavService.publish('open', FaqSidenavComponent, 'end', 'over', this.serviceBrief);
+    handleFeedbackQuestion(event) {
+        this.feedBackQuestion = event;
+        this.handleFeedbackValidation();
     }
-    getApprovalHistory() {
-        this.approvalHistory?.forEach((element, index) => {
-            const obj = {
-                id: index + 1,
-                name: element.approver.personName,
-                title: element.positionType,
-                image: '/group/i-gate/wm-bpm/forms/-/proxy/portrait?email=' + element.approver.personEmail,
-                status: this.form.sections[index + 1] ? this.statusClass(this.form.sections[index + 1].body.details.decision.key) : '',
-                statusLabel: this.form.sections[index + 1] ? this.form.sections[index + 1].body.details.decision.value : ''
-            };
-            this.approvals.push(obj);
-        });
+    handleFeedbackResponse(event) {
+        this.feedBackResponse = event;
+        this.handleResponseValidation();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ServiceHeaderComponent, deps: [{ token: CoreI18nService }, { token: FeedBackService }, { token: i1.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$2.SatPopoverComponent, selector: "sat-popover", inputs: ["anchor", "horizontalAlign", "xAlign", "verticalAlign", "yAlign", "forceAlignment", "lockAlignment", "autoFocus", "restoreFocus", "scrollStrategy", "hasBackdrop", "interactiveClose", "openTransition", "closeTransition", "openAnimationStartAtScale", "closeAnimationEndAtScale", "backdropClass", "panelClass"], outputs: ["opened", "closed", "afterOpen", "afterClose", "backdropClicked", "overlayKeydown"] }, { kind: "directive", type: i1$2.SatPopoverAnchorDirective, selector: "[satPopoverAnchor]", inputs: ["satPopoverAnchor"], exportAs: ["satPopoverAnchor"] }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ServiceHeaderComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'core-service-header', standalone: true, imports: [
-                        NgIf,
-                        SatPopoverModule,
-                        MatDivider,
-                        MatMenuTrigger,
-                        NgClass,
-                        MatMenu,
-                        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: CoreI18nService }, { type: FeedBackService }, { type: i1.MatDialog }, { type: SidenavService }], propDecorators: { form: [{
-                type: Input
-            }], showHistory: [{
-                type: Input
-            }], isLoading: [{
-                type: Input
-            }], showApprovalHistory: [{
-                type: Input
-            }], approvalHistory: [{
-                type: Input
-            }], creationDate: [{
-                type: Input
-            }], formTitle: [{
-                type: Input
-            }], section: [{
-                type: Input
-            }], serviceBrief: [{
-                type: Input
-            }] } });
-
-class StatusComponent {
-    form;
-    statusClass(status) {
-        if (status === FORM_STATUS_REJECTED || status === FORM_STATUS_CANCELLED) {
-            return {
-                status: true,
-                danger: status === FORM_STATUS_REJECTED || status === FORM_STATUS_CANCELLED
-            };
+    handleUserSelected(event) {
+        this.searchEmp = {
+            personEmail: event.personEmail,
+            personName: event.personName
+        };
+        if (!this.feedBackQuestion) {
+            return;
         }
-        else if (status === FORM_STATUS_PENDING) {
-            return {
-                status: true,
-                warning: status === FORM_STATUS_PENDING
-            };
+        this.handleFeedbackValidation();
+    }
+    handleResponseValidation() {
+        if (this.feedBackResponse.length >= 1 &&
+            this.feedBackResponse.length < 500) {
+            this.isResponseValidated = true;
         }
         else {
-            return {
-                status: true,
-                success: status === FORM_STATUS_COMPLETED || FORM_STATUS_APPROVED
-            };
+            this.isResponseValidated = false;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: StatusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: StatusComponent, isStandalone: true, selector: "app-status", inputs: { form: "form" }, ngImport: i0, template: "<div [ngClass]=\"statusClass(form.header.status?.['key'])\">{{form.header.status?.['value']}}</div>\r\n", styles: ["@media only screen and (max-width: 767px){.status{display:none}.mobileStatus{display:block}}.status{font-size:14px;padding:5px 10px;border-radius:5px;color:#fff;margin-left:15px;float:right;margin-top:13px;cursor:default}.danger{background-color:#f44336}.success{background-color:#5cb85c}.warning{background-color:#ffc5191f!important;color:#ffc519!important;font-weight:500!important}.info{background-color:#1691f9}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    handleFeedbackValidation() {
+        if (this.feedBackQuestion.length >= 1 &&
+            this.feedBackQuestion.length < 500 &&
+            this.searchEmp.personEmail) {
+            this.isFeedbackValidated = true;
+        }
+        else {
+            this.isFeedbackValidated = false;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: FeedbackSectionComponent, deps: [{ token: FeedBackService }, { token: CoreI18nService }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: FeedbackSectionComponent, isStandalone: true, selector: "app-feedback-section", inputs: { inboxItem: "inboxItem", profile: "profile" }, ngImport: i0, 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('requestFeedback')}}</h3>\r\n    <ds-button square icon matDialogClose>\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\" *ngIf=\"submitted\">\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    </div>\r\n\r\n    <ng-container *ngIf=\"!submitted\">\r\n      <div class=\"mb-3\" *ngIf=\"feedBackService.feedbackForm \">\r\n        <app-search-employee #employee label=\"{{i18n.translate('requestTo')}}\" [field]=\"searchEmp\"\r\n          [labelTextReadMode]=\"i18n.translate('requestTo')\" [labelTextWriteMode]=\"i18n.translate('requestTo')\"\r\n          [name]=\"'searchEmp'\" (emitedValue)=\"handleUserSelected($event)\">\r\n        </app-search-employee>\r\n        <app-textarea #request [field]=\"employeeInput\" name=\"employeeInput\" label=\"{{i18n.translate('feedback')}}\"\r\n          [required]=\"true\" [minLength]='1' (emitedValue)=\"handleFeedbackQuestion($event)\" [maxLength]='500'\r\n          [errorMessage]=\"i18n.translate('lenghtMin1Max500')\">\r\n        </app-textarea>\r\n      </div>\r\n\r\n      <div class=\"info-section\" *ngIf=\"!feedBackService.feedbackForm\">\r\n        <ng-container *ngIf=\"feedBackService.responderForm\">\r\n          <app-info-item class=\"info-item w-100\" label=\"{{i18n.translate('requestFrom')}}\"\r\n            value=\"{{feedBackService?.feedbackResponse?.requestFrom}}\"></app-info-item>\r\n          <app-info-item class=\"info-item w-100\" label=\"{{i18n.translate('requestTo')}}\"\r\n            value=\"{{feedBackService?.feedbackResponse?.requestTo}}\"></app-info-item>\r\n          <app-info-item class=\"info-item w-100\" label=\"{{i18n.translate('feedbackQuestion')}}\"\r\n            value=\"{{feedBackService?.feedbackResponse?.requestFeedback}}\"></app-info-item>\r\n          <app-info-item class=\"info-item w-100\" label=\"{{i18n.translate('feedback')}}\"\r\n            value=\"{{feedBackService?.feedbackResponse?.responseFeedback}}\"></app-info-item>\r\n          <app-textarea #request class=\"full mx-3 mt-3 section-item\" [field]=\"employeeInput\" name=\"employeeInput\"\r\n            label=\"{{i18n.translate('feedback')}}\" [required]=\"true\" [minLength]='1'\r\n            (emitedValue)=\"handleFeedbackResponse($event)\" [maxLength]='500'\r\n            [errorMessage]=\"i18n.translate('lenghtMin1Max500')\">\r\n          </app-textarea>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"feedBackService.pendingForm\" id=\"responce_form\">\r\n          <app-info-item class=\"info-item w-100\" label=\"{{i18n.translate('requestFrom')}}\"\r\n            value=\"{{feedBackService?.feedbackResponse?.requestFrom}}\"></app-info-item>\r\n          <app-info-item class=\"info-item w-100\" label=\"{{i18n.translate('requestTo')}}\"\r\n            value=\"{{feedBackService?.feedbackResponse?.requestTo}}\"></app-info-item>\r\n          <app-info-item class=\"info-item w-100\" label=\"{{i18n.translate('feedbackQuestion')}}\"\r\n            value=\"{{feedBackService?.feedbackResponse?.requestFeedback}}\"></app-info-item>\r\n          <app-info-item class=\"info-item w-100\" label=\"{{i18n.translate('feedback')}}\"\r\n            value=\"{{feedBackService?.feedbackResponse?.responseFeedback}}\"></app-info-item>\r\n\r\n        </ng-container>\r\n      </div>\r\n\r\n      <div class=\"d-flex align-items-center justify-content-center w-100 gap-3\" *ngIf=\"!submitted\">\r\n        <ds-button shape=\"outline\" matDialogClose>\r\n          {{i18n.translate('Cancel')}}\r\n        </ds-button>\r\n        <ds-button *ngIf=\"feedBackService.feedbackForm\" (click)=\"addFeedback()\"\r\n          disabled=\"{{!(isFeedbackValidated)}}\">\r\n          {{i18n.translate('submit')}}\r\n        </ds-button>\r\n        <ds-button *ngIf=\"!feedBackService.feedbackForm && feedBackService.responderForm\"\r\n          disabled=\"{{!(isResponseValidated)}}\" (click)=\"addResponse()\">\r\n          {{i18n.translate('submit')}}\r\n        </ds-button>\r\n      </div>\r\n    </ng-container>\r\n\r\n  </mat-dialog-content>\r\n\r\n</div>\r\n", styles: ["::ng-deep .main-popup{--popup-max-width: 700px !important;--popup-width: 100% !important}\n"], dependencies: [{ kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SearchEmployeeComponent, selector: "app-search-employee", inputs: ["valueName", "label", "tooltip", "className", "showLabel", "optional", "data", "floatLabel", "error", "showEdit", "arrayList", "isUniqueUsers"], outputs: ["selectedEmp", "onInputChange", "editDirectManger", "deleteDirectManger", "emitedDeletedValue"] }, { kind: "component", type: TextareaComponent, selector: "app-textarea", inputs: ["label", "tooltip", "className", "preventSpecailChar"] }, { kind: "component", type: InfoItemComponent, selector: "app-info-item", inputs: ["label", "value", "name", "type", "dateType", "multiple", "insideTable", "hasLabel", "arrayList", "actionType", "download"] }, { kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: StatusComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: FeedbackSectionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-status', schemas: [CUSTOM_ELEMENTS_SCHEMA], standalone: true, imports: [
-                        NgClass
-                    ], template: "<div [ngClass]=\"statusClass(form.header.status?.['key'])\">{{form.header.status?.['value']}}</div>\r\n", styles: ["@media only screen and (max-width: 767px){.status{display:none}.mobileStatus{display:block}}.status{font-size:14px;padding:5px 10px;border-radius:5px;color:#fff;margin-left:15px;float:right;margin-top:13px;cursor:default}.danger{background-color:#f44336}.success{background-color:#5cb85c}.warning{background-color:#ffc5191f!important;color:#ffc519!important;font-weight:500!important}.info{background-color:#1691f9}\n"] }]
-        }], propDecorators: { form: [{
+            args: [{ selector: 'app-feedback-section', schemas: [CUSTOM_ELEMENTS_SCHEMA], imports: [
+                        MatDialogContent,
+                        NgIf,
+                        SearchEmployeeComponent,
+                        TextareaComponent,
+                        InfoItemComponent,
+                        MatDialogTitle,
+                        MatDialogClose
+                    ], standalone: true, 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('requestFeedback')}}</h3>\r\n    <ds-button square icon matDialogClose>\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\" *ngIf=\"submitted\">\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    </div>\r\n\r\n    <ng-container *ngIf=\"!submitted\">\r\n      <div class=\"mb-3\" *ngIf=\"feedBackService.feedbackForm \">\r\n        <app-search-employee #employee label=\"{{i18n.translate('requestTo')}}\" [field]=\"searchEmp\"\r\n          [labelTextReadMode]=\"i18n.translate('requestTo')\" [labelTextWriteMode]=\"i18n.translate('requestTo')\"\r\n          [name]=\"'searchEmp'\" (emitedValue)=\"handleUserSelected($event)\">\r\n        </app-search-employee>\r\n        <app-textarea #request [field]=\"employeeInput\" name=\"employeeInput\" label=\"{{i18n.translate('feedback')}}\"\r\n          [required]=\"true\" [minLength]='1' (emitedValue)=\"handleFeedbackQuestion($event)\" [maxLength]='500'\r\n          [errorMessage]=\"i18n.translate('lenghtMin1Max500')\">\r\n        </app-textarea>\r\n      </div>\r\n\r\n      <div class=\"info-section\" *ngIf=\"!feedBackService.feedbackForm\">\r\n        <ng-container *ngIf=\"feedBackService.responderForm\">\r\n          <app-info-item class=\"info-item w-100\" label=\"{{i18n.translate('requestFrom')}}\"\r\n            value=\"{{feedBackService?.feedbackResponse?.requestFrom}}\"></app-info-item>\r\n          <app-info-item class=\"info-item w-100\" label=\"{{i18n.translate('requestTo')}}\"\r\n            value=\"{{feedBackService?.feedbackResponse?.requestTo}}\"></app-info-item>\r\n          <app-info-item class=\"info-item w-100\" label=\"{{i18n.translate('feedbackQuestion')}}\"\r\n            value=\"{{feedBackService?.feedbackResponse?.requestFeedback}}\"></app-info-item>\r\n          <app-info-item class=\"info-item w-100\" label=\"{{i18n.translate('feedback')}}\"\r\n            value=\"{{feedBackService?.feedbackResponse?.responseFeedback}}\"></app-info-item>\r\n          <app-textarea #request class=\"full mx-3 mt-3 section-item\" [field]=\"employeeInput\" name=\"employeeInput\"\r\n            label=\"{{i18n.translate('feedback')}}\" [required]=\"true\" [minLength]='1'\r\n            (emitedValue)=\"handleFeedbackResponse($event)\" [maxLength]='500'\r\n            [errorMessage]=\"i18n.translate('lenghtMin1Max500')\">\r\n          </app-textarea>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"feedBackService.pendingForm\" id=\"responce_form\">\r\n          <app-info-item class=\"info-item w-100\" label=\"{{i18n.translate('requestFrom')}}\"\r\n            value=\"{{feedBackService?.feedbackResponse?.requestFrom}}\"></app-info-item>\r\n          <app-info-item class=\"info-item w-100\" label=\"{{i18n.translate('requestTo')}}\"\r\n            value=\"{{feedBackService?.feedbackResponse?.requestTo}}\"></app-info-item>\r\n          <app-info-item class=\"info-item w-100\" label=\"{{i18n.translate('feedbackQuestion')}}\"\r\n            value=\"{{feedBackService?.feedbackResponse?.requestFeedback}}\"></app-info-item>\r\n          <app-info-item class=\"info-item w-100\" label=\"{{i18n.translate('feedback')}}\"\r\n            value=\"{{feedBackService?.feedbackResponse?.responseFeedback}}\"></app-info-item>\r\n\r\n        </ng-container>\r\n      </div>\r\n\r\n      <div class=\"d-flex align-items-center justify-content-center w-100 gap-3\" *ngIf=\"!submitted\">\r\n        <ds-button shape=\"outline\" matDialogClose>\r\n          {{i18n.translate('Cancel')}}\r\n        </ds-button>\r\n        <ds-button *ngIf=\"feedBackService.feedbackForm\" (click)=\"addFeedback()\"\r\n          disabled=\"{{!(isFeedbackValidated)}}\">\r\n          {{i18n.translate('submit')}}\r\n        </ds-button>\r\n        <ds-button *ngIf=\"!feedBackService.feedbackForm && feedBackService.responderForm\"\r\n          disabled=\"{{!(isResponseValidated)}}\" (click)=\"addResponse()\">\r\n          {{i18n.translate('submit')}}\r\n        </ds-button>\r\n      </div>\r\n    </ng-container>\r\n\r\n  </mat-dialog-content>\r\n\r\n</div>\r\n", styles: ["::ng-deep .main-popup{--popup-max-width: 700px !important;--popup-width: 100% !important}\n"] }]
+        }], ctorParameters: () => [{ type: FeedBackService }, { type: CoreI18nService }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }], propDecorators: { inboxItem: [{
+                type: Input
+            }], profile: [{
                 type: Input
             }] } });
 
-class FormSectionComponent {
+class ActivitiesComponent {
+    sidenavService;
     i18n;
-    userType = 'receipient';
-    popover;
-    popoverType = 'receipient';
-    popoverPosition = { top: 0, left: 0 };
-    requestDetails;
-    userPopoverInfo = {};
-    section;
-    form;
-    lov;
-    isReadOnly;
-    isOpen;
-    isFinalApproval;
-    controllers;
-    segmentDynamicLoaderService;
-    sectionFormComponent = null;
-    sectionName = 'SECTION_NAME.requestDetails';
-    sectionNumber;
-    sectionStatusValue;
-    sectionStatusKey;
-    receipient = {
-        isShowing: false,
-        profile: null
-    };
-    delegate = {
-        isShowing: false,
-        profile: null
-    };
-    input;
-    highlightFlag;
-    processingDate;
-    randomID = Math.floor(Math.random() * (999999 - 100000)) + 100000;
-    constructor(
-    // private segmentDynamicLoaderService: SegmentDynamicLoaderService,
-    i18n) {
-        this.i18n = i18n;
-        this.highlightFlag = false;
-    }
-    ngOnInit() {
-        this.sectionFormComponent = this.segmentDynamicLoaderService.getComponent(this.section.id);
-        if (this.section.body.details.stageName) {
-            this.sectionName = this.section.body.details.stageName;
-        }
-        else {
-            this.sectionName = this.segmentDynamicLoaderService.getSectionName(this.section.id);
-        }
-        this.input = {
-            isReadOnly: this.isReadOnly,
-            lov: this.lov,
-            section: this.section,
-            controllers: this.controllers,
-            requestDetails: this.requestDetails
-        };
-        if (this.section.header && this.section.header.processingDate) {
-            this.processingDate = moment(this.section.header.processingDate)
-                .locale('en-US')
-                .format('DD/MM/YYYY HH:mm:ss');
-        }
-        this.highlightFlag = this.isOpen;
-        const x = document.querySelectorAll('#collapse' + this.sectionId());
-        if (x.length > 0) {
-            this.sectionNumber = x.length;
-        }
-    }
-    ngOnChanges() {
-        if (this.section.id !== 'requestDetails' &&
-            this.section.id !== 'hrRequestDetails' &&
-            !this.sectionStatusKey &&
-            this.section.body.details.decision &&
-            this.section.body.details.decision.key) {
-            this.sectionStatusKey = this.section.body.details.decision.key;
-        }
-        if (this.section.id !== 'requestDetails' &&
-            this.section.id !== 'hrRequestDetails' &&
-            !this.sectionStatusValue &&
-            this.section.body.details.decision &&
-            this.section.body.details.decision.value) {
-            this.sectionStatusValue = this.section.body.details.decision.value;
-        }
-    }
-    ngAfterViewInit() {
-        this.ServicesSubScriptions();
-    }
-    get isExpanded() {
-        const isExpandableFromBackend = this.form?.sections?.length && this.form.sections.some(section => 'expandStage' in section?.body?.details);
-        if (!isExpandableFromBackend)
-            return true;
-        return this.section?.body?.details?.expandStage === 'true';
-    }
-    ServicesSubScriptions() {
-        /*  this.profileRequestorService.getForm().subscribe((data) => {
-            this.form = data;
-          });*/
-    }
-    ngAfterViewChecked() {
-        this.input = {
-            isReadOnly: this.isReadOnly,
-            lov: this.lov,
-            section: this.section,
-            controllers: this.controllers,
-            sectionId: this.section
-        };
+    constructor(sidenavService, i18n) {
+        this.sidenavService = sidenavService;
+        this.i18n = i18n;
     }
-    sectionId() {
-        return this.section.id.split(' ').join('') + this.randomID;
+    attch(data) {
+        console.log(data.detail);
+        if (data.detail.type == 'download') {
+            this.downloadFile(data);
+        }
     }
-    getSectionName() {
-        return this.section.id;
+    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();
+           });*/
     }
-    getFormStepStatus(key) {
-        let status = 'NOT_FOUND_IN_LOV';
-        if (this.lov.formStepStatus && this.lov.formStepStatus.options) {
-            this.lov.formStepStatus.options.forEach((option) => {
-                if (option.value === key) {
-                    status = option.description;
-                }
-            });
+    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 status;
+        const blob = new Blob([arrayBuffer], { type: 'image/jpeg' });
+        return blob;
     }
-    toggleSmallProfileInfo(event, personType) {
-        this.userType = personType;
-        event.stopPropagation();
-        const userInfo = this[personType];
-        if (userInfo.profile === null) {
-            this.popoverType = personType;
-            const userEmail = personType === 'receipient'
-                ? this.section.header.personToThumbnail.split('=')[1]
-                : this?.section?.header?.delegatedToThumbnail.split('=')[1];
-            /*this.stateMachine
-              .dispatch(Constants.STATE_MACHINE_ACTION_EMPLOYEE_PROFILE, userEmail)
-              .then((response) => {
-                console.log(this, response);
-      
-                if (response) {
-                  this[personType].profile = response;
-                  this.popoverPosition = {
-                    top: 10,
-                    left:
-                      event.target.getBoundingClientRect().left +
-                      event.target.getBoundingClientRect().width / 4
-                  };
-                  this.popover.anchor = event.target;
-                  this.popover.open();
-                  this.userPopoverInfo = response;
-                }
-              });*/
-        }
-        else {
-            this.userPopoverInfo = this[personType].profile;
-            this.popoverPosition = {
-                top: 10,
-                left: event.target.getBoundingClientRect().left +
-                    event.target.getBoundingClientRect().width / 4
+    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: [""] });
+}
+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 }] });
+
+class ServiceHeaderComponent {
+    i18n;
+    feedBackService;
+    dialog;
+    sidenavService;
+    form;
+    showHistory = false;
+    isLoading = false;
+    showApprovalHistory = false;
+    approvalHistory;
+    creationDate;
+    formTitle;
+    section;
+    serviceBrief = [];
+    approvals = [];
+    feedBackIcon = null;
+    flagPriority;
+    constructor(i18n, feedBackService, dialog, sidenavService) {
+        this.i18n = i18n;
+        this.feedBackService = feedBackService;
+        this.dialog = dialog;
+        this.sidenavService = sidenavService;
+    }
+    ngAfterViewInit() {
+        this.getApprovalHistory();
+        this.creationDate = moment(this.form.header.creationDate).locale('en-US').format("DD/MM/YYYY HH:mm:ss");
+    }
+    onCommentsFormClick() {
+        const comments = this.form.commentsDrop;
+        const resultData = [];
+        for (let index = 0; index < comments.length; index++) {
+            const item = comments[index];
+            const obj = {
+                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
             };
-            this.popover.anchor = event.target;
-            this.popover.open();
+            resultData.push(obj);
         }
+        // this.profileRequesterService.activities = resultData;
+        this.sidenavService.publish('open', ActivitiesComponent);
     }
-    statusIconClass(status, type) {
-        if (status) {
-            if (status === FORM_STATUS_REJECTED ||
-                status === FORM_STATUS_CANCELLED ||
-                status.toLowerCase() === 'reject' ||
-                status.toLowerCase() === 'unsatisfied' ||
-                status.toLowerCase().includes('deny') ||
-                status.toLowerCase().includes('reject') ||
-                status.toLowerCase() === 'cancel') {
-                return type === 'status' ? 'danger' : 'close';
-            }
-            else if (status === FORM_STATUS_PENDING ||
-                status.toLowerCase() === 'pending') {
-                return type === 'status' ? 'warning' : 'clock';
-            }
-            else {
-                return type === 'status' ? 'success' : 'check';
+    feedback() {
+        this.dialog.open(FeedbackSectionComponent, {
+            panelClass: ['main-popup'],
+            data: {
+                profile: this.form.profileInfoDrop,
+                inboxItem: this.form.inboxItem,
+                form: this.form
             }
-        }
-        else {
-            return type === 'status' ? 'success' : 'check';
+        });
+    }
+    showUserInfo() {
+        if (!this.isLoading) {
+            this.sidenavService.data = this.form?.profileInfoDrop;
+            this.sidenavService.publish('open', ProfileSectionComponent);
         }
     }
-    locationHref(hrefLink) {
-        window.location.href = hrefLink;
+    setFlagPriority(id) {
+        this.flagPriority = id;
+        this.form.inboxItem.flagPriority = id;
+        // this.stateMachineService.dispatch(Constants.STATE_MACHINE_ACTION_SET_FLAG, id).then(() => {
+        // });
     }
     statusClass(status) {
         if (status) {
-            if (status === FORM_STATUS_REJECTED || status === FORM_STATUS_CANCELLED
-                || status.toLowerCase() === 'reject' || status.toLowerCase() === 'unsatisfied' || status.toLowerCase() === 'cancel') {
+            if (this.isLoading) {
+                return 'loading';
+            }
+            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') {
+            else if (status === FORM_STATUS_PENDING || status?.toLowerCase() === 'pending') {
                 return 'warning';
             }
             else {
@@ -5189,241 +5925,217 @@ class FormSectionComponent {
             return 'success';
         }
     }
-    statusIcon(status) {
-        if (status) {
-            if (status === FORM_STATUS_REJECTED || status === FORM_STATUS_CANCELLED
-                || status.toLowerCase() === 'reject' || status.toLowerCase() === 'unsatisfied' || status.toLowerCase() === 'cancel') {
-                return 'close';
-            }
-            else if (status === FORM_STATUS_PENDING || status.toLowerCase() === 'pending') {
-                return 'clock';
-            }
-            else {
-                return 'check';
-            }
-        }
-        else {
-            return 'check';
-        }
+    openFaq() {
+        this.sidenavService.publish('open', FaqSidenavComponent, 'end', 'over', this.serviceBrief);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: FormSectionComponent, deps: [{ token: CoreI18nService }], 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", isOpen: "isOpen", isFinalApproval: "isFinalApproval", controllers: "controllers", segmentDynamicLoaderService: "segmentDynamicLoaderService", sectionFormComponent: "sectionFormComponent", sectionName: "sectionName" }, viewQueries: [{ propertyName: "popover", first: true, predicate: ["popover"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- <div class=\"panel-heading\" role=\"button\" [id]=\"sectionId()\" *ngIf=\"showHeader()\"> -->\r\n<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=\"{{statusIconClass(sectionStatusKey,'status')}}\" no-opacity icon\r\n          class=\"circle-status d-none d-sm-inline-block\">\r\n          <ds-icon icon=\"{{statusIconClass(sectionStatusKey,'icon')}}\"></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\" *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        <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, 'receipient')\"\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\"\r\n                [ngClass]=\"{'panel-ueser-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                src=\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMSIgaGVpZ2h0PSIxMyIgdmlld0JveD0iMCAwIDIxIDEzIj48cGF0aCBkPSJNMjEsNy43NjNhMS42MjEsMS42MjEsMCwwLDEtLjQ0Ny41OTMsMS4zMDYsMS4zMDYsMCwwLDEtLjc1LjE5NGMtNy4yODQsMC04LjU2OCwwLTE1Ljg1MywwSDMuNjY5TDMuNjMsOC42Yy4wNzcuMDY0LjE1OC4xMjQuMjI5LjE5NHExLjcxLDEuNjksMy40MiwzLjM4MWExLjAyMywxLjAyMywwLDAsMSwuMjkxLDEuMDc5Ljk5Mi45OTIsMCwwLDEtLjguNzE5LDEuMDUzLDEuMDUzLDAsMCwxLTEtLjMzMVEzLjgzMSwxMS43MTksMS44ODYsOS44Yy0uNDQyLS40MzctLjg3OS0uODgxLTEuMzMtMS4zMDlBNC41NzIsNC41NzIsMCwwLDEsMCw3LjgxNFY3LjE4NUEzMC43ODMsMzAuNzgzLDAsMCwxLDIuNzMsNC4zNzFjMS0xLjAyNywyLjAzOC0yLjAyNSwzLjA2My0zLjAzMkExLjA0OSwxLjA0OSwwLDEsMSw3LjI3NywyLjgyQzYuNCwzLjcsNS41MDksNC41Nyw0LjYyNSw1LjQ0NmMtLjMyMy4zMjEtLjY0NC42NDUtLjk3My45NzYuMDg0LjA1OS4xODEuMDI3LjI3LjAyNyw3LjI1OCwwLDguNTE2LDAsMTUuNzc1LDBBMS4xMjksMS4xMjksMCwwLDEsMjEsNy4yOXYuNDcyWiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAtMC45OTkpIiBmaWxsPSIjYTU0ZWUxIi8+PC9zdmc+\"\r\n                alt=\"\" />\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\r\n          <ds-status\r\n            class=\"main-status\" *ngIf=\"section?.body?.details?.decision?.key\"\r\n            status=\"{{statusIconClass(sectionStatusKey,'status')}}\">{{ sectionStatusValue }}\r\n          </ds-status>\r\n        </ng-container>\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\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\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\r\n<sat-popover #popover [hasBackdrop]=\"true\" horizontalAlign=\"center\" verticalAlign=\"above\">\r\n  <div class=\"delegate-info-popup\">\r\n    <ds-avatar *ngIf=\"userType === 'receipient'\" image=\"{{section?.header?.personToThumbnail}}\" size=\"small\"></ds-avatar>\r\n    <ds-avatar *ngIf=\"userType === 'delegate'\" image=\"{{section?.header?.delegatedToThumbnail}}\" size=\"small\"></ds-avatar>\r\n    <div class=\"delegate-info mx-0\">\r\n      <div class=\"fs-16 fw-medium fc-black mb-0\">{{ userPopoverInfo?.name }}</div>\r\n      <div class=\"fs-12 fw-normal fc-black mb-2\">{{ userPopoverInfo?.job?.name }}</div>\r\n      <div class=\"user-info fc-black fs-10 mb-1\">\r\n        <ds-icon icon=\"phone\" class=\"fs-18 fc-dark-gray\"></ds-icon>\r\n        <bdi (click)=\"locationHref('tel:'+ userPopoverInfo?.contact?.work)\">{{ userPopoverInfo?.contact?.work }}</bdi>\r\n      </div>\r\n      <div class=\"user-info fc-black fs-10 mb-1\">\r\n        <ds-icon icon=\"phone\" class=\"fs-18 fc-dark-gray\"></ds-icon>\r\n        <bdi (click)=\"locationHref('tel:'+ userPopoverInfo?.contact?.mobile)\">{{ userPopoverInfo?.contact?.mobile }}</bdi>\r\n      </div>\r\n      <div class=\"user-info fc-black fs-10 mb-1\">\r\n        <ds-icon icon=\"mail-o\" class=\"fs-18 fc-dark-gray\"></ds-icon>\r\n        <span (click)=\"locationHref('mailto:'+ userPopoverInfo?.email)\">{{ userPopoverInfo?.email }}</span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</sat-popover>\r\n\r\n\r\n\r\n<!--\r\n<mat-expansion-panel\r\n  class=\"mb-4\" [expanded]=\"true\" 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        <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-ueser-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              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        <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\r\n    <app-workflow-approval\r\n      [isReadOnly]=\"input.isReadOnly\"\r\n      [lov]=\"input.lov\"\r\n      [section]=\"input.section\"\r\n      [requestDetails]=\"requestDetails\"\r\n    ></app-workflow-approval>\r\n    &lt;!&ndash;    <ng-container *ngComponentOutlet=\"sectionFormComponent; ndcDynamicInputs: input\"></ng-container>&ndash;&gt;\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-->\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: "component", type: MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { 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: "component", type: i1$2.SatPopoverComponent, selector: "sat-popover", inputs: ["anchor", "horizontalAlign", "xAlign", "verticalAlign", "yAlign", "forceAlignment", "lockAlignment", "autoFocus", "restoreFocus", "scrollStrategy", "hasBackdrop", "interactiveClose", "openTransition", "closeTransition", "openAnimationStartAtScale", "closeAnimationEndAtScale", "backdropClass", "panelClass"], outputs: ["opened", "closed", "afterOpen", "afterClose", "backdropClicked", "overlayKeydown"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    getApprovalHistory() {
+        this.approvalHistory?.forEach((element, index) => {
+            const obj = {
+                id: index + 1,
+                name: element.approver.personName,
+                title: element.positionType,
+                image: '/group/i-gate/wm-bpm/forms/-/proxy/portrait?email=' + element.approver.personEmail,
+                status: this.form.sections[index + 1] ? this.statusClass(this.form.sections[index + 1].body.details.decision.key) : '',
+                statusLabel: this.form.sections[index + 1] ? this.form.sections[index + 1].body.details.decision.value : ''
+            };
+            this.approvals.push(obj);
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ServiceHeaderComponent, deps: [{ token: CoreI18nService }, { token: FeedBackService }, { token: i1$4.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$2.SatPopoverComponent, selector: "sat-popover", inputs: ["anchor", "horizontalAlign", "xAlign", "verticalAlign", "yAlign", "forceAlignment", "lockAlignment", "autoFocus", "restoreFocus", "scrollStrategy", "hasBackdrop", "interactiveClose", "openTransition", "closeTransition", "openAnimationStartAtScale", "closeAnimationEndAtScale", "backdropClass", "panelClass"], outputs: ["opened", "closed", "afterOpen", "afterClose", "backdropClicked", "overlayKeydown"] }, { kind: "directive", type: i1$2.SatPopoverAnchorDirective, selector: "[satPopoverAnchor]", inputs: ["satPopoverAnchor"], exportAs: ["satPopoverAnchor"] }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: FormSectionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ServiceHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-form-section', standalone: true, imports: [
-                        MatExpansionPanel,
+            args: [{ selector: 'core-service-header', standalone: true, imports: [
                         NgIf,
-                        NgComponentOutlet,
-                        ComponentOutletIoDirective,
                         SatPopoverModule,
-                        NgClass
-                    ], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<!-- <div class=\"panel-heading\" role=\"button\" [id]=\"sectionId()\" *ngIf=\"showHeader()\"> -->\r\n<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=\"{{statusIconClass(sectionStatusKey,'status')}}\" no-opacity icon\r\n          class=\"circle-status d-none d-sm-inline-block\">\r\n          <ds-icon icon=\"{{statusIconClass(sectionStatusKey,'icon')}}\"></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\" *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        <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, 'receipient')\"\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\"\r\n                [ngClass]=\"{'panel-ueser-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                src=\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMSIgaGVpZ2h0PSIxMyIgdmlld0JveD0iMCAwIDIxIDEzIj48cGF0aCBkPSJNMjEsNy43NjNhMS42MjEsMS42MjEsMCwwLDEtLjQ0Ny41OTMsMS4zMDYsMS4zMDYsMCwwLDEtLjc1LjE5NGMtNy4yODQsMC04LjU2OCwwLTE1Ljg1MywwSDMuNjY5TDMuNjMsOC42Yy4wNzcuMDY0LjE1OC4xMjQuMjI5LjE5NHExLjcxLDEuNjksMy40MiwzLjM4MWExLjAyMywxLjAyMywwLDAsMSwuMjkxLDEuMDc5Ljk5Mi45OTIsMCwwLDEtLjguNzE5LDEuMDUzLDEuMDUzLDAsMCwxLTEtLjMzMVEzLjgzMSwxMS43MTksMS44ODYsOS44Yy0uNDQyLS40MzctLjg3OS0uODgxLTEuMzMtMS4zMDlBNC41NzIsNC41NzIsMCwwLDEsMCw3LjgxNFY3LjE4NUEzMC43ODMsMzAuNzgzLDAsMCwxLDIuNzMsNC4zNzFjMS0xLjAyNywyLjAzOC0yLjAyNSwzLjA2My0zLjAzMkExLjA0OSwxLjA0OSwwLDEsMSw3LjI3NywyLjgyQzYuNCwzLjcsNS41MDksNC41Nyw0LjYyNSw1LjQ0NmMtLjMyMy4zMjEtLjY0NC42NDUtLjk3My45NzYuMDg0LjA1OS4xODEuMDI3LjI3LjAyNyw3LjI1OCwwLDguNTE2LDAsMTUuNzc1LDBBMS4xMjksMS4xMjksMCwwLDEsMjEsNy4yOXYuNDcyWiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAtMC45OTkpIiBmaWxsPSIjYTU0ZWUxIi8+PC9zdmc+\"\r\n                alt=\"\" />\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\r\n          <ds-status\r\n            class=\"main-status\" *ngIf=\"section?.body?.details?.decision?.key\"\r\n            status=\"{{statusIconClass(sectionStatusKey,'status')}}\">{{ sectionStatusValue }}\r\n          </ds-status>\r\n        </ng-container>\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\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\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\r\n<sat-popover #popover [hasBackdrop]=\"true\" horizontalAlign=\"center\" verticalAlign=\"above\">\r\n  <div class=\"delegate-info-popup\">\r\n    <ds-avatar *ngIf=\"userType === 'receipient'\" image=\"{{section?.header?.personToThumbnail}}\" size=\"small\"></ds-avatar>\r\n    <ds-avatar *ngIf=\"userType === 'delegate'\" image=\"{{section?.header?.delegatedToThumbnail}}\" size=\"small\"></ds-avatar>\r\n    <div class=\"delegate-info mx-0\">\r\n      <div class=\"fs-16 fw-medium fc-black mb-0\">{{ userPopoverInfo?.name }}</div>\r\n      <div class=\"fs-12 fw-normal fc-black mb-2\">{{ userPopoverInfo?.job?.name }}</div>\r\n      <div class=\"user-info fc-black fs-10 mb-1\">\r\n        <ds-icon icon=\"phone\" class=\"fs-18 fc-dark-gray\"></ds-icon>\r\n        <bdi (click)=\"locationHref('tel:'+ userPopoverInfo?.contact?.work)\">{{ userPopoverInfo?.contact?.work }}</bdi>\r\n      </div>\r\n      <div class=\"user-info fc-black fs-10 mb-1\">\r\n        <ds-icon icon=\"phone\" class=\"fs-18 fc-dark-gray\"></ds-icon>\r\n        <bdi (click)=\"locationHref('tel:'+ userPopoverInfo?.contact?.mobile)\">{{ userPopoverInfo?.contact?.mobile }}</bdi>\r\n      </div>\r\n      <div class=\"user-info fc-black fs-10 mb-1\">\r\n        <ds-icon icon=\"mail-o\" class=\"fs-18 fc-dark-gray\"></ds-icon>\r\n        <span (click)=\"locationHref('mailto:'+ userPopoverInfo?.email)\">{{ userPopoverInfo?.email }}</span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</sat-popover>\r\n\r\n\r\n\r\n<!--\r\n<mat-expansion-panel\r\n  class=\"mb-4\" [expanded]=\"true\" 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        <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-ueser-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              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        <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\r\n    <app-workflow-approval\r\n      [isReadOnly]=\"input.isReadOnly\"\r\n      [lov]=\"input.lov\"\r\n      [section]=\"input.section\"\r\n      [requestDetails]=\"requestDetails\"\r\n    ></app-workflow-approval>\r\n    &lt;!&ndash;    <ng-container *ngComponentOutlet=\"sectionFormComponent; ndcDynamicInputs: input\"></ng-container>&ndash;&gt;\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-->\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"] }]
-        }], ctorParameters: () => [{ type: CoreI18nService }], propDecorators: { popover: [{
-                type: ViewChild,
-                args: ['popover']
-            }], requestDetails: [{
-                type: Input
-            }], section: [{
-                type: Input
-            }], form: [{
+                        MatDivider,
+                        MatMenuTrigger,
+                        NgClass,
+                        MatMenu,
+                        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: CoreI18nService }, { type: FeedBackService }, { type: i1$4.MatDialog }, { type: SidenavService }], propDecorators: { form: [{
                 type: Input
-            }], lov: [{
+            }], showHistory: [{
                 type: Input
-            }], isReadOnly: [{
+            }], isLoading: [{
                 type: Input
-            }], isOpen: [{
+            }], showApprovalHistory: [{
                 type: Input
-            }], isFinalApproval: [{
+            }], approvalHistory: [{
                 type: Input
-            }], controllers: [{
+            }], creationDate: [{
                 type: Input
-            }], segmentDynamicLoaderService: [{
+            }], formTitle: [{
                 type: Input
-            }], sectionFormComponent: [{
+            }], section: [{
                 type: Input
-            }], sectionName: [{
+            }], serviceBrief: [{
                 type: Input
             }] } });
 
-class MainRequestDetailsComponent {
-    i18n;
-    section;
-    lov;
+const environment = {
+    production: false,
+    CONFIG_NAME: 'wmConfig',
+    proxyAddress: '',
+    proxyPort: '',
+    formConfigApproval: '',
+    formConfigPerGov: '',
+    formConfigPerGovAr: '',
+    formConfigExecute: '',
+    formConfigPayroll: '',
+    formName: 'MEO',
+    formId: '',
+    authToken: '',
+    proxyServiceBaseUrl: 'http://localhost' + ':' + '3000/',
+    proxyFullAddress: '',
+    proxyServiceAuthorization: '/authenticate',
+    proxyServiceExecute: '/execute?debug=success',
+    proxyServiceAttachment: '/attachments/',
+    proxyServiceForms: '/forms/',
+    proxyServiceLanguageURLPart: '',
+    formConfigAproval: 'eyJpbmJveFVyaSI6IlwvZ3JvdXBcL2ktZ2F0ZVwvZS1zZXJ2aWNlc1wvYWR2YW5jZWQtaW5ib3giLCJmb3JtSWQiOiJuZXdfYXByb3ZhbCIsImZvcm1QcmVmaXgiOiJTQ1IiLCJsYW5ndWFnZSI6ImVuIn0=',
+    formConfigNew: 'eyJpbmJveFVyaSI6IlwvZ3JvdXBcL2ktZ2F0ZVwvZS1zZXJ2aWNlc1wvYWR2YW5jZWQtaW5ib3giLCJmb3JtUHJlZml4IjoiQ09FIiwibGFuZ3VhZ2UiOiJlbiJ9',
+    formConfigNewAr: 'eyJpbmJveFVyaSI6IlwvZ3JvdXBcL2ktZ2F0ZVwvZS1zZXJ2aWNlc1wvYWR2YW5jZWQtaW5ib3giLCJmb3JtUHJlZml4IjoiSFNUIiwibGFuZ3VhZ2UiOiJhciJ9',
+    formConfigSubmit: 'eyJpbmJveFVyaSI6IlwvZ3JvdXBcL2ktZ2F0ZVwvZS1zZXJ2aWNlc1wvYWR2YW5jZWQtaW5ib3giLCJmb3JtSWQiOiJuZXdfc3VibWl0IiwiaXNNb2JpbGUiOnRydWUsImZvcm1QcmVmaXgiOiJTQ1IiLCJsYW5ndWFnZSI6ImVuIn0=',
+    formConfigSubmitAr: 'eyJpbmJveFVyaSI6IlwvZ3JvdXBcL2ktZ2F0ZVwvZS1zZXJ2aWNlc1wvYWR2YW5jZWQtaW5ib3giLCJmb3JtSWQiOiJuZXdfc3VibWl0IiwiZm9ybVByZWZpeCI6IlNDUiIsImxhbmd1YWdlIjoiYXIifQ=='
+};
+
+class LayoutComponent {
+    document;
+    router;
+    sidenavService;
+    sidenav;
+    sideContent;
+    sidenavSubscription;
     form;
-    constructor(i18n) {
-        this.i18n = i18n;
+    formTitle;
+    isLoading = false;
+    serviceBrief = [];
+    constructor(document, router, sidenavService) {
+        this.document = document;
+        this.router = router;
+        this.sidenavService = sidenavService;
     }
-    get isExpanded() {
-        return this.section?.body?.details?.expandStage === 'true';
+    ngOnInit() {
+        this.sidenavSubscription = this.sidenavService.subject.subscribe((value) => {
+            this.sideContent = value.componentName;
+            this.sidenav.mode = value.mode;
+            this.sidenav.position = value.position;
+            if (value.eventName === "open") {
+                this.openSideNav();
+            }
+            else {
+                this.closeSideNav();
+            }
+        });
     }
-    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: "directive", type: MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    ngOnDestroy() {
+        if (this.sidenavSubscription) {
+            this.sidenavSubscription.unsubscribe();
+        }
+    }
+    onClose() {
+        this.document.body.classList.remove("NoScroll");
+        this.document.documentElement.classList.remove("NoScroll");
+    }
+    backdropClick() {
+        this.sidenav.close().then(r => { });
+        this.sidenavService.closeSidenav();
+        this.document.body.classList.remove("NoScroll");
+        this.document.documentElement.classList.remove("NoScroll");
+    }
+    openSideNav() {
+        this.sidenav.open().then(r => { });
+        this.document.body.classList.add("NoScroll");
+        this.document.documentElement.classList.add("NoScroll");
+    }
+    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: i1$1.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" }, providers: [
+            CoreService,
+            {
+                provide: MY_LIB_CONFIG_TOKEN,
+                useValue: environment
+            }
+        ], 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$1.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i3$1.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i3$1.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: MainRequestDetailsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: LayoutComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-main-request-details', standalone: true, schemas: [CUSTOM_ELEMENTS_SCHEMA], imports: [
-                        MatAccordion,
-                        MatExpansionPanel,
-                        NgIf
-                    ], 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"] }]
-        }], ctorParameters: () => [{ type: CoreI18nService }], propDecorators: { section: [{
+            args: [{ selector: "core-layout", standalone: true, imports: [HeaderComponent, SideNavComponent, MatSidenavModule, RouterOutlet, NgComponentOutlet, WorkflowSectionComponent, ServiceHeaderComponent, NgClass, NgIf], providers: [
+                        CoreService,
+                        {
+                            provide: MY_LIB_CONFIG_TOKEN,
+                            useValue: environment
+                        }
+                    ], 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"] }]
+        }], ctorParameters: () => [{ type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }, { type: i1$1.Router }, { type: SidenavService }], propDecorators: { sidenav: [{
+                type: ViewChild,
+                args: ["sidenav", { static: true }]
+            }], form: [{
                 type: Input
-            }], lov: [{
+            }], formTitle: [{
                 type: Input
-            }], form: [{
+            }], isLoading: [{
+                type: Input
+            }], serviceBrief: [{
                 type: Input
             }] } });
 
-class WorkflowSectionComponent {
-    i18n;
-    cdRef;
-    formStateObject;
-    sectionSubmitted = new EventEmitter();
-    sections;
-    isReadOnly;
-    isLoading;
-    form;
-    contentClass = 'default-box box-shadow p-4';
-    startedListener = false;
-    sectionsController;
-    showButtonMenu = false;
-    segmentDynamicLoaderService = null;
-    sectionFormComponent = null;
-    sectionName = SECTION_ID_REQUEST_DETAILS;
-    constructor(i18n, cdRef) {
-        this.i18n = i18n;
-        this.cdRef = cdRef;
-        /*    _listenerService.listen().subscribe((result: any) => {
-              if (result?.function == 'resetForm') {
-                this.resetForm();
-              } else if (result?.function == 'onSubmit') {
-                const sectionSize = this.sections.length - 1;
-                const section = this.sections[sectionSize];
-                const data = result.data ? result.data : section;
-                this.onSubmit(result?.action, data);
-              }
-            });*/
-    }
-    ngAfterViewChecked() {
-        this.cdRef.detectChanges();
-        if (this.formStateObject && this.form && !this.startedListener) {
-            this.formStateObject.valueChanges.subscribe(
-            /* istanbul ignore next  */
-            (form) => {
-                Object.keys(form).forEach((key) => {
-                    if (this.sections[this.sections.length - 1].body.details[key] !==
-                        form[key] &&
-                        form[key] !== undefined)
-                        this.sections[this.sections.length - 1].body.details[key] =
-                            form[key];
-                });
-            });
-            this.sectionsController = this.formStateObject.controls;
-            this.startedListener = true;
-        }
-        this.checkButtons();
+var loadFormHooks = {
+    beforeTranspilePayload(payload) {
+        const hookResult = payload;
+        // Here should be the code to manipulate the payload before the transpile stage
+        return hookResult;
+    },
+    afterTranspilePayload(form) {
+        const hookResult = form;
+        // Here should be the code to manipulate the form object after the transpile stage
+        return hookResult;
     }
-    /*  isSubmitting = {};
-      disableButtons = false;*/
-    /*  onSubmit(action: any, section: any) {
-        const sectionSize = this.sections.length - 1;
-        let sectionDecision = this.sections[sectionSize].body.details.decision;
-        if (sectionDecision && action === 'SUBMIT') {
-          sectionDecision = { key: action };
+};
+
+class StatusComponent {
+    form;
+    statusClass(status) {
+        if (status === FORM_STATUS_REJECTED || status === FORM_STATUS_CANCELLED) {
+            return {
+                status: true,
+                danger: status === FORM_STATUS_REJECTED || status === FORM_STATUS_CANCELLED
+            };
         }
-        if (sectionDecision && action !== 'SUBMIT') {
-          sectionDecision = { key: action };
+        else if (status === FORM_STATUS_PENDING) {
+            return {
+                status: true,
+                warning: status === FORM_STATUS_PENDING
+            };
         }
-        this.sections[sectionSize].body.details.decision = sectionDecision;
-        this.profileRequesterService.isSubmitting[action] = true;
-        this.profileRequesterService.disableButtons = true;
-        this.stateMachineService
-          .dispatch(
-            constants.STATE_MACHINE_ACTION_SUBMIT_FORM,
-            section,
-            action
-          )
-          .then((form: any) => {
-            this.profileRequesterService.isSubmitting[action] = true;
-            this.profileRequesterService.disableButtons = true;
-            const obj = {
-              form: form,
-              action: action
+        else {
+            return {
+                status: true,
+                success: status === FORM_STATUS_COMPLETED || FORM_STATUS_APPROVED
             };
-            this.sectionSubmitted.emit(obj);
-          });
-      }*/
-    /*  resetForm() {
-        this.formStateObject.reset();
-        this.resetPropagator.propagate();
-      }*/
-    get isExpandableFromBackend() {
-        return this.form?.sections?.length && this.form.sections.some(section => 'expandStage' in section?.body?.details);
-    }
-    buttonTypes(type) {
-        switch (type) {
-            case 'APPROVE':
-                return '';
-            case 'SENDBACK':
-                return 'red';
-            case 'REJECT':
-                return 'red';
-            default:
-                return '';
         }
     }
-    checkButtons() {
-        const options = this.form?.lovs?.decision?.options;
-        if (!Array.isArray(options))
-            return;
-        options.forEach((item) => {
-            if (item?.value != 'APPROVE' &&
-                item?.value != 'REJECT' &&
-                item?.value != 'SENDBACK' &&
-                item?.value != 'SUBMIT' &&
-                item?.value != 'CANCEL') {
-                this.showButtonMenu = true;
-            }
-        });
-    }
-    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: "<!--\r\n<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-form-section\r\n      *ngIf=\"sections[1]?.body?.details?.stage0?.isStage0 === 'true'\"\r\n      class=\"app-form-section\"\r\n      [segmentDynamicLoaderService]=\"segmentDynamicLoaderService\"\r\n      [section]=\"sections[1]\"\r\n      [lov]=\"form?.lovs\"\r\n      [isReadOnly]=\"sections[1]?.header?.readOnly\"\r\n      [form]=\"form\"\r\n      [controllers]=\"sectionsController\"\r\n      >\r\n    </app-form-section>\r\n\r\n    <app-main-request-details [lov]=\"form?.lovs\" [form]=\"form\" [section]=\"sections[0]\">\r\n      <ng-container *ngTemplateOutlet=\"contentReqDet\"></ng-container>\r\n    </app-main-request-details>\r\n\r\n    <header class=\"header-line fs-12 fw-medium fc-dark-gray mt-sm-5 mt-4 mb-4\" *ngIf=\"sections.length > 1 && !(form?.header?.formId?.includes('MEO') || form?.header?.formId?.includes('MEX'))\">\r\n      {{i18n.translate('Approvals')}}\r\n    </header>\r\n\r\n\r\n    <header *ngIf=\"(form?.header?.formId?.includes('MEO') || form?.header?.formId?.includes('MEX')) && sections.length > 1\" class=\"header-line fs-12 fw-medium fc-dark-gray mt-sm-5 mt-4 mb-4\">\r\n      <ds-avatar *ngIf=\"!isLoading\" image={{form?.header?.requesterPhoto}} size=\"xx-small\"\r\n      class=\"d-inline-flex cursor-pointer\" ></ds-avatar>\r\n    <span class=\"fs-12 d-sm-block cursor-pointer\"\r\n      [ngClass]=\"{'loading-bg loading-width': isLoading}\">{{form?.header?.requesterName}}</span>\r\n\r\n      <span class=\"fs-12 d-sm-block cursor-pointer\"\r\n      [ngClass]=\"{'loading-bg loading-width': isLoading}\">{{form?.sections?.[0].body?.details?.gceoComment}}</span>\r\n\r\n    </header>\r\n\r\n    <mat-accordion class=\"primary-accordion main-approval\" [multi]=\"isExpandableFromBackend\">\r\n      <ng-container *ngFor=\"let section of sections; let i = index\">\r\n        <app-form-section *ngIf=\"i !== 0 && (!section?.body?.details?.stage0?.isStage0 || section?.body?.details?.stage0?.isStage0 === 'false')\" 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=\"{{contentClass}}\">\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-->\r\n<script src=\"../index.ts\"></script>\r\n<form #f=\"ngForm\">\r\n\r\n  <div\r\n    *ngIf=\"form?.header?.status?.['key'] != 'NEW' \" class=\"mt-3\" id=\"accordion\" role=\"tablist\"\r\n    aria-multiselectable=\"true\">\r\n\r\n\r\n    <app-main-request-details [section]=\"sections[0]\"></app-main-request-details>\r\n\r\n    <header class=\"header-line fs-12 fw-medium fc-dark-gray mt-sm-5 mt-4 mb-4\" *ngIf=\"sections.length > 1\"> {{ i18n.translate('Approvals') }}</header>\r\n    <mat-accordion class=\"primary-accordion main-approval\">\r\n      <ng-container *ngFor=\"let section of sections; let i = index\">\r\n       <!-- <app-form-section\r\n          class=\"app-form-section\"\r\n          [segmentDynamicLoaderService]=\"segmentDynamicLoaderService\"\r\n          [section]=section\r\n          [lov]=\"form?.lovs\"\r\n          [isReadOnly]=\"section.header.readOnly\"\r\n          [form]=\"form\"\r\n          [controllers]=\"sectionsController\">\r\n        </app-form-section>-->\r\n      </ng-container>\r\n    </mat-accordion>\r\n  </div>\r\n</form>\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: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: StatusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: StatusComponent, isStandalone: true, selector: "app-status", inputs: { form: "form" }, ngImport: i0, template: "<div [ngClass]=\"statusClass(form.header.status?.['key'])\">{{form.header.status?.['value']}}</div>\r\n", styles: ["@media only screen and (max-width: 767px){.status{display:none}.mobileStatus{display:block}}.status{font-size:14px;padding:5px 10px;border-radius:5px;color:#fff;margin-left:15px;float:right;margin-top:13px;cursor:default}.danger{background-color:#f44336}.success{background-color:#5cb85c}.warning{background-color:#ffc5191f!important;color:#ffc519!important;font-weight:500!important}.info{background-color:#1691f9}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: WorkflowSectionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: StatusComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-workflow-section', schemas: [CUSTOM_ELEMENTS_SCHEMA], imports: [
-                        NgClass,
-                        MatAccordion,
-                        NgTemplateOutlet,
-                        NgIf,
-                        FormSectionComponent,
-                        MainRequestDetailsComponent,
-                        NgForOf,
-                        FormsModule
-                    ], standalone: true, template: "<!--\r\n<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-form-section\r\n      *ngIf=\"sections[1]?.body?.details?.stage0?.isStage0 === 'true'\"\r\n      class=\"app-form-section\"\r\n      [segmentDynamicLoaderService]=\"segmentDynamicLoaderService\"\r\n      [section]=\"sections[1]\"\r\n      [lov]=\"form?.lovs\"\r\n      [isReadOnly]=\"sections[1]?.header?.readOnly\"\r\n      [form]=\"form\"\r\n      [controllers]=\"sectionsController\"\r\n      >\r\n    </app-form-section>\r\n\r\n    <app-main-request-details [lov]=\"form?.lovs\" [form]=\"form\" [section]=\"sections[0]\">\r\n      <ng-container *ngTemplateOutlet=\"contentReqDet\"></ng-container>\r\n    </app-main-request-details>\r\n\r\n    <header class=\"header-line fs-12 fw-medium fc-dark-gray mt-sm-5 mt-4 mb-4\" *ngIf=\"sections.length > 1 && !(form?.header?.formId?.includes('MEO') || form?.header?.formId?.includes('MEX'))\">\r\n      {{i18n.translate('Approvals')}}\r\n    </header>\r\n\r\n\r\n    <header *ngIf=\"(form?.header?.formId?.includes('MEO') || form?.header?.formId?.includes('MEX')) && sections.length > 1\" class=\"header-line fs-12 fw-medium fc-dark-gray mt-sm-5 mt-4 mb-4\">\r\n      <ds-avatar *ngIf=\"!isLoading\" image={{form?.header?.requesterPhoto}} size=\"xx-small\"\r\n      class=\"d-inline-flex cursor-pointer\" ></ds-avatar>\r\n    <span class=\"fs-12 d-sm-block cursor-pointer\"\r\n      [ngClass]=\"{'loading-bg loading-width': isLoading}\">{{form?.header?.requesterName}}</span>\r\n\r\n      <span class=\"fs-12 d-sm-block cursor-pointer\"\r\n      [ngClass]=\"{'loading-bg loading-width': isLoading}\">{{form?.sections?.[0].body?.details?.gceoComment}}</span>\r\n\r\n    </header>\r\n\r\n    <mat-accordion class=\"primary-accordion main-approval\" [multi]=\"isExpandableFromBackend\">\r\n      <ng-container *ngFor=\"let section of sections; let i = index\">\r\n        <app-form-section *ngIf=\"i !== 0 && (!section?.body?.details?.stage0?.isStage0 || section?.body?.details?.stage0?.isStage0 === 'false')\" 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=\"{{contentClass}}\">\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-->\r\n<script src=\"../index.ts\"></script>\r\n<form #f=\"ngForm\">\r\n\r\n  <div\r\n    *ngIf=\"form?.header?.status?.['key'] != 'NEW' \" class=\"mt-3\" id=\"accordion\" role=\"tablist\"\r\n    aria-multiselectable=\"true\">\r\n\r\n\r\n    <app-main-request-details [section]=\"sections[0]\"></app-main-request-details>\r\n\r\n    <header class=\"header-line fs-12 fw-medium fc-dark-gray mt-sm-5 mt-4 mb-4\" *ngIf=\"sections.length > 1\"> {{ i18n.translate('Approvals') }}</header>\r\n    <mat-accordion class=\"primary-accordion main-approval\">\r\n      <ng-container *ngFor=\"let section of sections; let i = index\">\r\n       <!-- <app-form-section\r\n          class=\"app-form-section\"\r\n          [segmentDynamicLoaderService]=\"segmentDynamicLoaderService\"\r\n          [section]=section\r\n          [lov]=\"form?.lovs\"\r\n          [isReadOnly]=\"section.header.readOnly\"\r\n          [form]=\"form\"\r\n          [controllers]=\"sectionsController\">\r\n        </app-form-section>-->\r\n      </ng-container>\r\n    </mat-accordion>\r\n  </div>\r\n</form>\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"] }]
-        }], ctorParameters: () => [{ type: CoreI18nService }, { type: i0.ChangeDetectorRef }], propDecorators: { formStateObject: [{
-                type: ViewChild,
-                args: ['f']
-            }], sectionSubmitted: [{
-                type: Output
-            }], sections: [{
-                type: Input
-            }], isReadOnly: [{
-                type: Input
-            }], isLoading: [{
-                type: Input
-            }], form: [{
-                type: Input
-            }], contentClass: [{
-                type: Input
-            }], sectionsController: [{
-                type: Input
-            }], segmentDynamicLoaderService: [{
-                type: Input
-            }], sectionFormComponent: [{
-                type: Input
-            }], sectionName: [{
+            args: [{ selector: 'app-status', schemas: [CUSTOM_ELEMENTS_SCHEMA], standalone: true, imports: [
+                        NgClass
+                    ], template: "<div [ngClass]=\"statusClass(form.header.status?.['key'])\">{{form.header.status?.['value']}}</div>\r\n", styles: ["@media only screen and (max-width: 767px){.status{display:none}.mobileStatus{display:block}}.status{font-size:14px;padding:5px 10px;border-radius:5px;color:#fff;margin-left:15px;float:right;margin-top:13px;cursor:default}.danger{background-color:#f44336}.success{background-color:#5cb85c}.warning{background-color:#ffc5191f!important;color:#ffc519!important;font-weight:500!important}.info{background-color:#1691f9}\n"] }]
+        }], propDecorators: { form: [{
                 type: Input
             }] } });
 
@@ -5489,6 +6201,57 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                 type: Output
             }] } });
 
+class AppComponent {
+    document;
+    router;
+    sidenavService;
+    coreService;
+    loading = {
+        form: false
+    };
+    form;
+    formTitle = 'Test';
+    constructor(document, router, sidenavService, coreService) {
+        this.document = document;
+        this.router = router;
+        this.sidenavService = sidenavService;
+        this.coreService = coreService;
+        this.loading['form'] = true;
+        this.coreService.loadForm().then((form) => {
+            this.loading['form'] = false;
+            if (form instanceof Form) {
+                this.form = form;
+            }
+            else if (form instanceof Messages) {
+                this.errorResponse(form);
+            }
+        });
+    }
+    errorResponse(form) {
+        if (!this.form) {
+            this.form = new Form(NO_VALUE, NO_VALUE, NO_VALUE, NO_VALUE, NO_VALUE, NO_VALUE, form);
+        }
+        else {
+            this.form.messages = form;
+            this.form = loadFormHooks.afterTranspilePayload(this.form);
+        }
+        window.scrollTo(0, 0);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AppComponent, deps: [{ token: DOCUMENT }, { token: i1$1.Router }, { token: SidenavService }, { token: CoreService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: AppComponent, isStandalone: true, selector: "lib-app", 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      [sections]=\"form?.sections\">\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: 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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AppComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-app', standalone: true, imports: [
+                        LayoutComponent,
+                        ServiceHeaderComponent,
+                        WorkflowSectionComponent
+                    ], 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      [sections]=\"form?.sections\">\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: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }, { type: i1$1.Router }, { type: SidenavService }, { type: CoreService }] });
+
 function encodePassword(formId, password) {
     const formIdString = Array.from(new TextEncoder().encode(formId), (x) => String.fromCodePoint(x)).join('');
     let encodedFormId = btoa(formIdString);
@@ -5646,19 +6409,6 @@ class BuiltInCustomValidators {
     }
 }
 
-var loadForm = {
-    beforeTranspilePayload(payload) {
-        const hookResult = payload;
-        // Here should be the code to manipulate the payload before the transpile stage
-        return hookResult;
-    },
-    afterTranspilePayload(form) {
-        const hookResult = form;
-        // Here should be the code to manipulate the form object after the transpile stage
-        return hookResult;
-    }
-};
-
 var saveForm = {
     beforeTranspileSection(section) {
         const hookResult = section;
@@ -6001,5 +6751,5 @@ const MY_LIB_CONFIG_TOKEN = new InjectionToken('MyLibConfig');
  * Generated bundle index. Do not edit.
  */
 
-export { ArOnlyDirective, AttachmentSectionComponent, AttachmentSectionDataComponent, BaseComponent, BuiltInCustomValidators, COMMENT_CONTAINER, CheckBoxComponent, CommentSectionComponent, CommentsDrop, ConfirmDialogComponent, ConfirmationPopupComponent, 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_APPROVED, FORM_STATUS_CANCELLED, FORM_STATUS_COMPLETED, FORM_STATUS_NEW, FORM_STATUS_PENDING, FORM_STATUS_REJECTED, FORM_STATUS_SEND_BACK, 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, 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, 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 { AppComponent, ArOnlyDirective, AttachmentSectionComponent, AttachmentSectionDataComponent, BaseComponent, BuiltInCustomValidators, COMMENT_CONTAINER, CheckBoxComponent, CommentSectionComponent, CommentsDrop, ConfirmDialogComponent, ConfirmationPopupComponent, 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_APPROVED, FORM_STATUS_CANCELLED, FORM_STATUS_COMPLETED, FORM_STATUS_NEW, FORM_STATUS_PENDING, FORM_STATUS_REJECTED, FORM_STATUS_SEND_BACK, 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, 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 };
 //# sourceMappingURL=bpm-core.mjs.map