bpm-core 0.0.19 → 0.0.21

package/fesm2022/bpm-core.mjs

@@ -36,18 +36,20 @@ import * as i2 from '@angular/material/table';
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
 import * as i1$5 from '@angular/material/paginator';
 import { MatPaginatorModule } from '@angular/material/paginator';
-import * as i2$1 from '@angular/router';
+import * as i2$2 from '@angular/router';
 import { RouterLink, RouterModule, RouterLinkActive, RouterOutlet } from '@angular/router';
 import * as i5 from '@angular/material/menu';
 import { MatMenu, MatMenuTrigger, MatMenuItem, MatMenuModule } from '@angular/material/menu';
 import { moveItemInArray, CdkDropList, CdkDrag } from '@angular/cdk/drag-drop';
-import * as i3 from '@angular/material/tooltip';
+import * as i3$1 from '@angular/material/tooltip';
 import { MatTooltip, MatTooltipModule } from '@angular/material/tooltip';
 import { MatRadioButton, MatRadioGroup } from '@angular/material/radio';
-import { MatAccordion, MatExpansionPanel, MatExpansionPanelTitle } from '@angular/material/expansion';
+import * as i2$1 from '@angular/material/expansion';
+import { MatAccordion, MatExpansionPanel, MatExpansionPanelTitle, MatExpansionModule } from '@angular/material/expansion';
 import { MatDivider } from '@angular/material/divider';
-import { ComponentOutletIoDirective, DynamicComponentInjectorToken } from 'ng-dynamic-component';
-import * as i3$1 from '@angular/material/sidenav';
+import * as i3 from 'ng-dynamic-component';
+import { ComponentOutletIoDirective, DynamicModule, DynamicComponentInjectorToken } from 'ng-dynamic-component';
+import * as i3$2 from '@angular/material/sidenav';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import * as i6 from '@angular/material/toolbar';
 import { MatToolbarModule } from '@angular/material/toolbar';
@@ -5488,18 +5490,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
 
 class FormSectionComponent {
     i18n;
-    userType = 'receipient';
-    popover;
-    popoverType = 'receipient';
-    popoverPosition = { top: 0, left: 0 };
+    coreService;
+    sidenavService;
+    userType = 'recipient';
+    // @ViewChild('popover') popover?: any;
+    popoverType = 'recipient';
     requestDetails;
     userPopoverInfo = {};
     section;
     form;
     lov;
     isReadOnly;
-    isOpen;
-    isFinalApproval;
+    // @Input() isOpen: boolean;
+    // @Input() isFinalApproval: boolean;
     controllers;
     segmentDynamicLoaderService;
     sectionFormComponent = null;
@@ -5507,7 +5510,7 @@ class FormSectionComponent {
     sectionNumber;
     sectionStatusValue;
     sectionStatusKey;
-    receipient = {
+    recipient = {
         isShowing: false,
         profile: null
     };
@@ -5516,12 +5519,14 @@ class FormSectionComponent {
         profile: null
     };
     input;
-    highlightFlag;
+    // highlightFlag: boolean;
     processingDate;
     randomID = Math.floor(Math.random() * (999999 - 100000)) + 100000;
-    constructor(i18n) {
+    constructor(i18n, coreService, sidenavService) {
         this.i18n = i18n;
-        this.highlightFlag = false;
+        this.coreService = coreService;
+        this.sidenavService = sidenavService;
+        // this.highlightFlag = false;
     }
     ngOnInit() {
         this.sectionFormComponent = this.segmentDynamicLoaderService.getComponent(this.section.id);
@@ -5531,7 +5536,6 @@ class FormSectionComponent {
         else {
             this.sectionName = this.segmentDynamicLoaderService.getSectionName(this.section.id);
         }
-        console.log('sectionFormComponent', this.sectionFormComponent);
         this.input = {
             isReadOnly: this.isReadOnly,
             lov: this.lov,
@@ -5544,42 +5548,46 @@ class FormSectionComponent {
                 .locale('en-US')
                 .format('DD/MM/YYYY HH:mm:ss');
         }
-        this.highlightFlag = this.isOpen;
+        // 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;
+    /*  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;
         }
-        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();
-    }
+      }*/
+    /* 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;
-          });*/
-    }
+    /* public ServicesSubScriptions() {
+       /!*  this.profileRequestorService.getForm().subscribe((data) => {
+           this.form = data;
+         });*!/
+     }*/
     ngAfterViewChecked() {
         this.input = {
             isReadOnly: this.isReadOnly,
@@ -5592,85 +5600,33 @@ class FormSectionComponent {
     sectionId() {
         return this.section.id.split(' ').join('') + this.randomID;
     }
-    getSectionName() {
-        return this.section.id;
+    createUserProfileFromResponse(response) {
+        return new ProfileInfoDrop(false, response?.["Users"][0]?.employeeNumber, response?.["Users"][0]?.email, response?.["Users"][0]?.name, response?.["Users"][0]?.generalDepartment?.name, response?.["Users"][0]?.position?.name, response?.["Users"][0]?.sector?.name, response?.["Users"][0]?.department?.name, response?.["Users"][0]?.generalDepartment?.code, response?.["Users"][0]?.location, response?.["Users"][0]?.nationality?.desc, response?.["Users"][0]?.contact?.mobile, response?.["Users"][0]?.manager?.name, response?.["Users"][0]?.seniorSectorName?.name);
     }
-    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;
+    openOrCreateUserProfile(userData, personType) {
+        this.sidenavService.data = userData;
+        this.userPopoverInfo = userData;
+        this[personType].profile = userData;
+        this.sidenavService.publish('open', ProfileSectionComponent);
     }
     toggleSmallProfileInfo(event, personType) {
         this.userType = personType;
         event.stopPropagation();
-        const userInfo = this[personType];
+        let 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);
-      
+            let userEmail = (personType === 'recipient' ? this.section.header.personToThumbnail.split('=')[1] : this?.section?.header?.delegatedToThumbnail.split('=')[1]);
+            this.coreService.employeeProfile(userEmail).subscribe((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;
+                    let userData = this.createUserProfileFromResponse(response);
+                    this.openOrCreateUserProfile(userData, personType);
                 }
-              });*/
-        }
-        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';
+            this.openOrCreateUserProfile(this[personType].profile, personType);
         }
     }
-    locationHref(hrefLink) {
-        window.location.href = hrefLink;
-    }
     statusClass(status) {
         if (status) {
             if (status === FORM_STATUS_REJECTED || status === FORM_STATUS_CANCELLED
@@ -5705,23 +5661,22 @@ class FormSectionComponent {
             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", 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$3.SatPopoverComponent, selector: "sat-popover", inputs: ["anchor", "horizontalAlign", "xAlign", "verticalAlign", "yAlign", "forceAlignment", "lockAlignment", "autoFocus", "restoreFocus", "scrollStrategy", "hasBackdrop", "interactiveClose", "openTransition", "closeTransition", "openAnimationStartAtScale", "closeAnimationEndAtScale", "backdropClass", "panelClass"], outputs: ["opened", "closed", "afterOpen", "afterClose", "backdropClicked", "overlayKeydown"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: FormSectionComponent, deps: [{ token: CoreI18nService }, { token: CoreService }, { token: SidenavService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: FormSectionComponent, isStandalone: true, selector: "app-form-section", inputs: { requestDetails: "requestDetails", section: "section", form: "form", lov: "lov", isReadOnly: "isReadOnly", controllers: "controllers", segmentDynamicLoaderService: "segmentDynamicLoaderService", sectionFormComponent: "sectionFormComponent", sectionName: "sectionName" }, ngImport: i0, template: "<mat-expansion-panel\r\n  class=\"mb-4\" [expanded]=\"isExpanded\" *ngIf=\"form?.header?.status?.['key'] !== 'NEW' \" hideToggle\r\n  #approvalPanel=\"matExpansionPanel\">\r\n  <mat-expansion-panel-header>\r\n\r\n    <div class=\"approval-panel-container\">\r\n      <div class=\"d-flex gap-2 flex-grow-1 approval-panel-title\">\r\n        <ds-status\r\n          status=\"{{statusClass(sectionStatusKey)}}\" no-opacity icon\r\n          class=\"circle-status d-none d-sm-inline-block\">\r\n          <ds-icon icon=\"{{statusIcon(sectionStatusKey)}}\"></ds-icon>\r\n        </ds-status>\r\n        <div class=\"d-flex flex-column flex-grow-1\">\r\n          <span class=\"fs-16 fw-medium m-0\"> {{ sectionName }}</span>\r\n          <bdi class=\"fs-12 fc-dark-gray fw-normal line-height-1 d-block mt-1\" *ngIf=\"section.header?.processedBy\">\r\n            {{ processingDate }}\r\n          </bdi>\r\n        </div>\r\n      </div>\r\n      <div class=\"approval-panel-details gap-1\">\r\n\r\n        <ng-container *ngIf=\"(!section?.body?.details?.['stage0']?.['isStage0'] || section?.body?.details?.['stage0']?.['isStage0'] === 'false')\">\r\n          <div\r\n            class=\"d-flex align-items-center gap-3\" *ngIf=\"section?.header?.personTo;\"\r\n            (click)=\"$event.stopImmediatePropagation();\">\r\n            <div\r\n              (click)=\"toggleSmallProfileInfo($event, 'recipient')\"\r\n              class=\"d-flex align-items-center gap-2 radius-3 h-40\"\r\n              [ngClass]=\"{'user-avatar-name px-0 px-md-2': !section?.header?.delegatedTo, 'p-0': section?.header?.delegatedTo}\">\r\n              <ds-avatar image=\"{{section?.header?.personToThumbnail}}\" size=\"small\" class=\"user-avatar\"></ds-avatar>\r\n              <span\r\n                class=\"fs-14 fw-medium d-inline-block panel-user-name text-truncate\" [ngClass]=\"{'panel-user-only': !section?.header?.delegatedTo}\"\r\n                *ngIf=\"!section?.header?.delegatedTo\">{{ section?.header?.personTo }}</span>\r\n            </div>\r\n\r\n            <div\r\n              *ngIf=\"section?.header?.delegatedTo\" class=\"d-flex align-items-center gap-3\"\r\n              (click)=\"toggleSmallProfileInfo($event, 'delegate')\">\r\n              <img\r\n                class=\"rotate-arrow\"\r\n                alt=\"\"\r\n                src=\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMSIgaGVpZ2h0PSIxMyIgdmlld0JveD0iMCAwIDIxIDEzIj48cGF0aCBkPSJNMjEsNy43NjNhMS42MjEsMS42MjEsMCwwLDEtLjQ0Ny41OTMsMS4zMDYsMS4zMDYsMCwwLDEtLjc1LjE5NGMtNy4yODQsMC04LjU2OCwwLTE1Ljg1MywwSDMuNjY5TDMuNjMsOC42Yy4wNzcuMDY0LjE1OC4xMjQuMjI5LjE5NHExLjcxLDEuNjksMy40MiwzLjM4MWExLjAyMywxLjAyMywwLDAsMSwuMjkxLDEuMDc5Ljk5Mi45OTIsMCwwLDEtLjguNzE5LDEuMDUzLDEuMDUzLDAsMCwxLTEtLjMzMVEzLjgzMSwxMS43MTksMS44ODYsOS44Yy0uNDQyLS40MzctLjg3OS0uODgxLTEuMzMtMS4zMDlBNC41NzIsNC41NzIsMCwwLDEsMCw3LjgxNFY3LjE4NUEzMC43ODMsMzAuNzgzLDAsMCwxLDIuNzMsNC4zNzFjMS0xLjAyNywyLjAzOC0yLjAyNSwzLjA2My0zLjAzMkExLjA0OSwxLjA0OSwwLDEsMSw3LjI3NywyLjgyQzYuNCwzLjcsNS41MDksNC41Nyw0LjYyNSw1LjQ0NmMtLjMyMy4zMjEtLjY0NC42NDUtLjk3My45NzYuMDg0LjA1OS4xODEuMDI3LjI3LjAyNyw3LjI1OCwwLDguNTE2LDAsMTUuNzc1LDBBMS4xMjksMS4xMjksMCwwLDEsMjEsNy4yOXYuNDcyWiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAtMC45OTkpIiBmaWxsPSIjYTU0ZWUxIi8+PC9zdmc+\"/>\r\n              <div class=\"d-flex align-items-center gap-2 px-0 px-md-2 radius-3 user-avatar-name h-40\">\r\n                <ds-avatar image=\"{{section?.header?.delegatedToThumbnail}}\" size=\"small\" class=\"user-avatar\"></ds-avatar>\r\n                <span\r\n                  class=\"fs-14 fw-medium d-inline-block panel-user-name text-truncate\">{{ section?.header?.delegatedTo }}</span>\r\n              </div>\r\n\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n        <ds-status\r\n          class=\"main-status\" *ngIf=\"section?.body?.details?.['decision']?.key;\"\r\n          status=\"{{statusClass(section?.body?.details?.['decision']?.key)}}\">{{ section?.body?.details?.['decision']?.value }}\r\n        </ds-status>\r\n      </div>\r\n\r\n      <div class=\"approval-panel-toggle\">\r\n        <ds-icon icon=\"plus-1\" class=\"fs-20 fc-coral\" *ngIf=\"!approvalPanel.expanded\"></ds-icon>\r\n        <ds-icon icon=\"minus\" class=\"fs-20 fc-dark-gray\" *ngIf=\"approvalPanel.expanded\"></ds-icon>\r\n      </div>\r\n\r\n    </div>\r\n  </mat-expansion-panel-header>\r\n  <section class=\"border-top pt-4\">\r\n    Test\r\n    <ng-container  *ngComponentOutlet=\"sectionFormComponent; ndcDynamicInputs: input\"></ng-container>\r\n  </section>\r\n\r\n</mat-expansion-panel>\r\n<ng-container *ngIf=\"form?.header?.status?.['key'] == 'NEW' \">\r\n  <ng-container *ngComponentOutlet=\"sectionFormComponent; ndcDynamicInputs: input\"></ng-container>\r\n</ng-container>\r\n", styles: [":host ::ng-deep .mat-expansion-panel-content{background:#fff!important}:host .mat-expansion-panel-content{background:#fff!important}:host .approval-panel-container{display:grid;grid-template-columns:40% calc(60% - 45px) 20px;grid-template-areas:\"title details toggle\";gap:.75rem;place-content:space-between;align-items:center;flex-grow:1;width:100%}@media (max-width: 991px){:host .approval-panel-container{grid-template-columns:calc(100% - 45px) 20px;grid-template-areas:\"title toggle\" \"details details\"}}:host .approval-panel-container .approval-panel-title{grid-area:title}:host .approval-panel-container .panel-user-name{max-width:120px}@media (max-width: 768px){:host .approval-panel-container .panel-user-name.panel-ueser-only{max-width:140px}:host .approval-panel-container .panel-user-name:not(.panel-ueser-only){max-width:90px}}:host .approval-panel-container .approval-panel-details{display:flex;align-items:center;justify-content:space-between;grid-area:details}:host .approval-panel-container .approval-panel-toggle{grid-area:toggle;display:flex;align-items:center;justify-content:center;width:20px}:host ::ng-deep ds-avatar.user-avatar .avatar{--default-size: 25px}@media (min-width: 768px){:host ::ng-deep ds-avatar.user-avatar .avatar{--default-size: 31px;--avatar-border: 3px solid var(--light-gray)}}@media (min-width: 768px){:host ::ng-deep .user-avatar-name{padding-inline-end:1rem!important}}:host .circle-status::part(base){--status-radius: 50%;--status-size: 18px;--status-fs: 80% }:host .panel-title{min-width:40%;width:40%}@media (max-width: 576px){:host .panel-title{min-width:100%!important;width:100%!important}}:host .panel-user-status{min-width:60%;width:60%;display:flex;align-items:center;justify-content:space-between}@media (max-width: 576px){:host .panel-user-status{min-width:100%!important;width:100%!important}:host .panel-user-status .user-delegate{min-width:auto}:host .panel-user-status .main-status::part(base){--status-width: 50px}}\n"], dependencies: [{ kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i2$1.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i2$1.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: ComponentOutletIoDirective, selector: "[ngComponentOutletNdcDynamicInputs],[ngComponentOutletNdcDynamicOutputs]", inputs: ["ngComponentOutletNdcDynamicInputs", "ngComponentOutletNdcDynamicOutputs"], exportAs: ["ndcDynamicIo"] }, { kind: "ngmodule", type: SatPopoverModule }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: DynamicModule }, { kind: "directive", type: i3.ComponentOutletInjectorDirective, selector: "[ngComponentOutlet]", exportAs: ["ndcComponentOutletInjector"] }] });
 }
 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: [
+                        MatExpansionModule,
                         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", 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: [{
+                        NgClass,
+                        DynamicModule
+                    ], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<mat-expansion-panel\r\n  class=\"mb-4\" [expanded]=\"isExpanded\" *ngIf=\"form?.header?.status?.['key'] !== 'NEW' \" hideToggle\r\n  #approvalPanel=\"matExpansionPanel\">\r\n  <mat-expansion-panel-header>\r\n\r\n    <div class=\"approval-panel-container\">\r\n      <div class=\"d-flex gap-2 flex-grow-1 approval-panel-title\">\r\n        <ds-status\r\n          status=\"{{statusClass(sectionStatusKey)}}\" no-opacity icon\r\n          class=\"circle-status d-none d-sm-inline-block\">\r\n          <ds-icon icon=\"{{statusIcon(sectionStatusKey)}}\"></ds-icon>\r\n        </ds-status>\r\n        <div class=\"d-flex flex-column flex-grow-1\">\r\n          <span class=\"fs-16 fw-medium m-0\"> {{ sectionName }}</span>\r\n          <bdi class=\"fs-12 fc-dark-gray fw-normal line-height-1 d-block mt-1\" *ngIf=\"section.header?.processedBy\">\r\n            {{ processingDate }}\r\n          </bdi>\r\n        </div>\r\n      </div>\r\n      <div class=\"approval-panel-details gap-1\">\r\n\r\n        <ng-container *ngIf=\"(!section?.body?.details?.['stage0']?.['isStage0'] || section?.body?.details?.['stage0']?.['isStage0'] === 'false')\">\r\n          <div\r\n            class=\"d-flex align-items-center gap-3\" *ngIf=\"section?.header?.personTo;\"\r\n            (click)=\"$event.stopImmediatePropagation();\">\r\n            <div\r\n              (click)=\"toggleSmallProfileInfo($event, 'recipient')\"\r\n              class=\"d-flex align-items-center gap-2 radius-3 h-40\"\r\n              [ngClass]=\"{'user-avatar-name px-0 px-md-2': !section?.header?.delegatedTo, 'p-0': section?.header?.delegatedTo}\">\r\n              <ds-avatar image=\"{{section?.header?.personToThumbnail}}\" size=\"small\" class=\"user-avatar\"></ds-avatar>\r\n              <span\r\n                class=\"fs-14 fw-medium d-inline-block panel-user-name text-truncate\" [ngClass]=\"{'panel-user-only': !section?.header?.delegatedTo}\"\r\n                *ngIf=\"!section?.header?.delegatedTo\">{{ section?.header?.personTo }}</span>\r\n            </div>\r\n\r\n            <div\r\n              *ngIf=\"section?.header?.delegatedTo\" class=\"d-flex align-items-center gap-3\"\r\n              (click)=\"toggleSmallProfileInfo($event, 'delegate')\">\r\n              <img\r\n                class=\"rotate-arrow\"\r\n                alt=\"\"\r\n                src=\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMSIgaGVpZ2h0PSIxMyIgdmlld0JveD0iMCAwIDIxIDEzIj48cGF0aCBkPSJNMjEsNy43NjNhMS42MjEsMS42MjEsMCwwLDEtLjQ0Ny41OTMsMS4zMDYsMS4zMDYsMCwwLDEtLjc1LjE5NGMtNy4yODQsMC04LjU2OCwwLTE1Ljg1MywwSDMuNjY5TDMuNjMsOC42Yy4wNzcuMDY0LjE1OC4xMjQuMjI5LjE5NHExLjcxLDEuNjksMy40MiwzLjM4MWExLjAyMywxLjAyMywwLDAsMSwuMjkxLDEuMDc5Ljk5Mi45OTIsMCwwLDEtLjguNzE5LDEuMDUzLDEuMDUzLDAsMCwxLTEtLjMzMVEzLjgzMSwxMS43MTksMS44ODYsOS44Yy0uNDQyLS40MzctLjg3OS0uODgxLTEuMzMtMS4zMDlBNC41NzIsNC41NzIsMCwwLDEsMCw3LjgxNFY3LjE4NUEzMC43ODMsMzAuNzgzLDAsMCwxLDIuNzMsNC4zNzFjMS0xLjAyNywyLjAzOC0yLjAyNSwzLjA2My0zLjAzMkExLjA0OSwxLjA0OSwwLDEsMSw3LjI3NywyLjgyQzYuNCwzLjcsNS41MDksNC41Nyw0LjYyNSw1LjQ0NmMtLjMyMy4zMjEtLjY0NC42NDUtLjk3My45NzYuMDg0LjA1OS4xODEuMDI3LjI3LjAyNyw3LjI1OCwwLDguNTE2LDAsMTUuNzc1LDBBMS4xMjksMS4xMjksMCwwLDEsMjEsNy4yOXYuNDcyWiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAtMC45OTkpIiBmaWxsPSIjYTU0ZWUxIi8+PC9zdmc+\"/>\r\n              <div class=\"d-flex align-items-center gap-2 px-0 px-md-2 radius-3 user-avatar-name h-40\">\r\n                <ds-avatar image=\"{{section?.header?.delegatedToThumbnail}}\" size=\"small\" class=\"user-avatar\"></ds-avatar>\r\n                <span\r\n                  class=\"fs-14 fw-medium d-inline-block panel-user-name text-truncate\">{{ section?.header?.delegatedTo }}</span>\r\n              </div>\r\n\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n        <ds-status\r\n          class=\"main-status\" *ngIf=\"section?.body?.details?.['decision']?.key;\"\r\n          status=\"{{statusClass(section?.body?.details?.['decision']?.key)}}\">{{ section?.body?.details?.['decision']?.value }}\r\n        </ds-status>\r\n      </div>\r\n\r\n      <div class=\"approval-panel-toggle\">\r\n        <ds-icon icon=\"plus-1\" class=\"fs-20 fc-coral\" *ngIf=\"!approvalPanel.expanded\"></ds-icon>\r\n        <ds-icon icon=\"minus\" class=\"fs-20 fc-dark-gray\" *ngIf=\"approvalPanel.expanded\"></ds-icon>\r\n      </div>\r\n\r\n    </div>\r\n  </mat-expansion-panel-header>\r\n  <section class=\"border-top pt-4\">\r\n    Test\r\n    <ng-container  *ngComponentOutlet=\"sectionFormComponent; ndcDynamicInputs: input\"></ng-container>\r\n  </section>\r\n\r\n</mat-expansion-panel>\r\n<ng-container *ngIf=\"form?.header?.status?.['key'] == 'NEW' \">\r\n  <ng-container *ngComponentOutlet=\"sectionFormComponent; ndcDynamicInputs: input\"></ng-container>\r\n</ng-container>\r\n", styles: [":host ::ng-deep .mat-expansion-panel-content{background:#fff!important}:host .mat-expansion-panel-content{background:#fff!important}:host .approval-panel-container{display:grid;grid-template-columns:40% calc(60% - 45px) 20px;grid-template-areas:\"title details toggle\";gap:.75rem;place-content:space-between;align-items:center;flex-grow:1;width:100%}@media (max-width: 991px){:host .approval-panel-container{grid-template-columns:calc(100% - 45px) 20px;grid-template-areas:\"title toggle\" \"details details\"}}:host .approval-panel-container .approval-panel-title{grid-area:title}:host .approval-panel-container .panel-user-name{max-width:120px}@media (max-width: 768px){:host .approval-panel-container .panel-user-name.panel-ueser-only{max-width:140px}:host .approval-panel-container .panel-user-name:not(.panel-ueser-only){max-width:90px}}:host .approval-panel-container .approval-panel-details{display:flex;align-items:center;justify-content:space-between;grid-area:details}:host .approval-panel-container .approval-panel-toggle{grid-area:toggle;display:flex;align-items:center;justify-content:center;width:20px}:host ::ng-deep ds-avatar.user-avatar .avatar{--default-size: 25px}@media (min-width: 768px){:host ::ng-deep ds-avatar.user-avatar .avatar{--default-size: 31px;--avatar-border: 3px solid var(--light-gray)}}@media (min-width: 768px){:host ::ng-deep .user-avatar-name{padding-inline-end:1rem!important}}:host .circle-status::part(base){--status-radius: 50%;--status-size: 18px;--status-fs: 80% }:host .panel-title{min-width:40%;width:40%}@media (max-width: 576px){:host .panel-title{min-width:100%!important;width:100%!important}}:host .panel-user-status{min-width:60%;width:60%;display:flex;align-items:center;justify-content:space-between}@media (max-width: 576px){:host .panel-user-status{min-width:100%!important;width:100%!important}:host .panel-user-status .user-delegate{min-width:auto}:host .panel-user-status .main-status::part(base){--status-width: 50px}}\n"] }]
+        }], ctorParameters: () => [{ type: CoreI18nService }, { type: CoreService }, { type: SidenavService }], propDecorators: { requestDetails: [{
                 type: Input
             }], section: [{
                 type: Input
@@ -5731,10 +5686,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                 type: Input
             }], isReadOnly: [{
                 type: Input
-            }], isOpen: [{
-                type: Input
-            }], isFinalApproval: [{
-                type: Input
             }], controllers: [{
                 type: Input
             }], segmentDynamicLoaderService: [{
@@ -5757,11 +5708,12 @@ class MainRequestDetailsComponent {
         return this.section?.body?.details?.expandStage === 'true';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: MainRequestDetailsComponent, deps: [{ token: CoreI18nService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: MainRequestDetailsComponent, isStandalone: true, selector: "app-main-request-details", inputs: { section: "section", lov: "lov", form: "form" }, ngImport: i0, template: "<mat-accordion class=\"primary-accordion main-request-accordion border-top\">\r\n  <mat-expansion-panel [expanded]=\"isExpanded || (form?.sections?.length === 1 )\" class=\"mb-3\" hideToggle #requestPanel=\"matExpansionPanel\">\r\n    <mat-expansion-panel-header>\r\n      <h2 class=\"fs-16 fw-medium fc-coral m-0 flex-grow-1\">{{i18n.translate('requestDetailsTitle')}}</h2>\r\n      <div class=\"d-inline-flex align-items-center gap-2\" *ngIf=\"!requestPanel.expanded\">\r\n        <ds-icon icon=\"plus-1\" class=\"fs-20 fc-coral\"></ds-icon>\r\n      </div>\r\n      <div class=\"d-inline-flex align-items-center gap-2\" *ngIf=\"requestPanel.expanded\">\r\n        <ds-icon icon=\"minus\" class=\"fs-20 fc-dark-gray\"></ds-icon>\r\n      </div>\r\n    </mat-expansion-panel-header>\r\n    <section class=\"default-box box-shadow p-4\">\r\n      <ng-content ></ng-content>\r\n    </section>\r\n  </mat-expansion-panel>\r\n</mat-accordion>\r\n", styles: [".main-request-accordion{--accordion-height: 65px;--accordion-radius: 0 0 4px 4px;--accordion-shadow: 0 7px 10px rgba(var(--rgb-black), 3%);--accordion-border: 1px solid var(--light-gray);--accordion-border-active: 1px solid var(--gray);--panel-padding: 0 1.5rem;--panel-body-padding: 0 0 1.5rem;position:relative;z-index:1}@media (max-width: 576px){.main-request-accordion{--accordion-height: 55px;--panel-padding: 0 1rem;--panel-body-padding: 0 1rem 1rem}}.main-request-accordion .inner-accordion{--accordion-height: 44px;--accordion-bc: var(--light-gray);--accordion-bc-active: var(--white);--accordion-border: 1px solid var(--light-gray);--accordion-border-active: 1px solid var(--light-gray);--panel-body-padding: 0;--accordion-shadow: none;--panel-padding: 0 1.5rem}\n"], dependencies: [{ kind: "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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: MainRequestDetailsComponent, isStandalone: true, selector: "app-main-request-details", inputs: { section: "section", lov: "lov", form: "form" }, ngImport: i0, template: "<mat-accordion class=\"primary-accordion main-request-accordion border-top\">\r\n  <mat-expansion-panel [expanded]=\"isExpanded || (form?.sections?.length === 1 )\" class=\"mb-3\" hideToggle #requestPanel=\"matExpansionPanel\">\r\n    <mat-expansion-panel-header>\r\n      <h2 class=\"fs-16 fw-medium fc-coral m-0 flex-grow-1\">{{i18n.translate('requestDetailsTitle')}}</h2>\r\n      <div class=\"d-inline-flex align-items-center gap-2\" *ngIf=\"!requestPanel.expanded\">\r\n        <ds-icon icon=\"plus-1\" class=\"fs-20 fc-coral\"></ds-icon>\r\n      </div>\r\n      <div class=\"d-inline-flex align-items-center gap-2\" *ngIf=\"requestPanel.expanded\">\r\n        <ds-icon icon=\"minus\" class=\"fs-20 fc-dark-gray\"></ds-icon>\r\n      </div>\r\n    </mat-expansion-panel-header>\r\n    <section class=\"default-box box-shadow p-4\">\r\n      <ng-content ></ng-content>\r\n    </section>\r\n  </mat-expansion-panel>\r\n</mat-accordion>\r\n", styles: [".main-request-accordion{--accordion-height: 65px;--accordion-radius: 0 0 4px 4px;--accordion-shadow: 0 7px 10px rgba(var(--rgb-black), 3%);--accordion-border: 1px solid var(--light-gray);--accordion-border-active: 1px solid var(--gray);--panel-padding: 0 1.5rem;--panel-body-padding: 0 0 1.5rem;position:relative;z-index:1}@media (max-width: 576px){.main-request-accordion{--accordion-height: 55px;--panel-padding: 0 1rem;--panel-body-padding: 0 1rem 1rem}}.main-request-accordion .inner-accordion{--accordion-height: 44px;--accordion-bc: var(--light-gray);--accordion-bc-active: var(--white);--accordion-border: 1px solid var(--light-gray);--accordion-border-active: 1px solid var(--light-gray);--panel-body-padding: 0;--accordion-shadow: none;--panel-padding: 0 1.5rem}\n"], dependencies: [{ kind: "ngmodule", type: MatExpansionModule }, { kind: "directive", type: i2$1.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i2$1.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i2$1.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 }
 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: [
+                        MatExpansionModule,
                         MatAccordion,
                         MatExpansionPanel,
                         NgIf
@@ -5887,7 +5839,7 @@ class WorkflowSectionComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: WorkflowSectionComponent, deps: [{ token: CoreI18nService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: WorkflowSectionComponent, isStandalone: true, selector: "app-workflow-section", inputs: { sections: "sections", isReadOnly: "isReadOnly", isLoading: "isLoading", form: "form", contentClass: "contentClass", sectionsController: "sectionsController", segmentDynamicLoaderService: "segmentDynamicLoaderService", sectionFormComponent: "sectionFormComponent", sectionName: "sectionName" }, outputs: { sectionSubmitted: "sectionSubmitted" }, viewQueries: [{ propertyName: "formStateObject", first: true, predicate: ["f"], descendants: true }], ngImport: i0, template: "<form #f=\"ngForm\" autocomplete=\"off\">\r\n  <div *ngIf=\"form?.header?.status?.key !== 'NEW' \" class=\"mt-n3\" id=\"accordion\" role=\"tablist\"\r\n    aria-multiselectable=\"true\">\r\n    <app-main-request-details [lov]=\"form?.lovs\" [form]=\"form\" [section]=\"form?.sections[0]\">\r\n      <ng-container *ngTemplateOutlet=\"contentReqDet\"></ng-container>\r\n    </app-main-request-details>\r\n    <header class=\"header-line fs-12 fw-medium fc-dark-gray mt-sm-5 mt-4 mb-4\" *ngIf=\"form?.sections.length > 1\">\r\n      {{i18n.translate('Approvals')}}\r\n    </header>\r\n    <mat-accordion class=\"primary-accordion main-approval\">\r\n      <ng-container *ngFor=\"let section of form?.sections; let i = index\">\r\n        <app-form-section *ngIf=\"i !== 0\" class=\"app-form-section\" [segmentDynamicLoaderService]=\"segmentDynamicLoaderService\" [section]=section [lov]=\"form?.lovs\"\r\n          [isReadOnly]=\"section.header.readOnly\" [form]=\"form\" [controllers]=\"sectionsController\">\r\n        </app-form-section>\r\n      </ng-container>\r\n    </mat-accordion>\r\n  </div>\r\n\r\n  <section *ngIf=\"form?.header?.status?.key === 'NEW' \" class=\"default-box box-shadow p-4\">\r\n    <ng-container *ngTemplateOutlet=\"contentReqDet\"></ng-container>\r\n  </section>\r\n\r\n</form>\r\n\r\n\r\n<ng-template #contentReqDet><ng-content></ng-content></ng-template>\r\n", styles: ["@charset \"UTF-8\";.primary-accordion{--accordion-height: auto;--indicator-bc: transparent;--indicator-bc-active: transparent;--indicator-icon: \"\\e9bc\";--indicator-icon-active: \"\\ea34\";--indicator-color: var(--coral);--indicator-color-active: var(--dark-gray);--accordion-radius: 4px;--accordion-border-active: 1px solid var(--gray);--accordion-shadow: 0 7px 10px 0 rgba(var(--rgb-black), 3%);--accordion-shadow-active: none;--panel-padding: 1.5rem;--panel-body-padding: 0 1.5rem 1.5rem}@media (max-width: 576px){.primary-accordion{--accordion-height: 110px;--panel-padding: 1.5rem 1rem;--panel-body-padding: 0 1rem 1rem}}.primary-accordion.main-approval{position:relative}.primary-accordion.main-approval:before{content:\"\";position:absolute;top:0;bottom:0;margin:2rem;width:1px;height:calc(100% - 2rem);background-color:var(--dark-gray);z-index:0}@media (max-width: 576px){.workflow-all-btns ds-button::part(base){--btn-padding: 0 .5rem;--btn-fs: .75rem;--btn-height: var(--default-size-sm);--btn-min-width: var(--default-size-sm)}}\n"], dependencies: [{ kind: "directive", type: MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FormSectionComponent, selector: "app-form-section", inputs: ["requestDetails", "section", "form", "lov", "isReadOnly", "isOpen", "isFinalApproval", "controllers", "segmentDynamicLoaderService", "sectionFormComponent", "sectionName"] }, { kind: "component", type: MainRequestDetailsComponent, selector: "app-main-request-details", inputs: ["section", "lov", "form"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: WorkflowSectionComponent, isStandalone: true, selector: "app-workflow-section", inputs: { sections: "sections", isReadOnly: "isReadOnly", isLoading: "isLoading", form: "form", contentClass: "contentClass", sectionsController: "sectionsController", segmentDynamicLoaderService: "segmentDynamicLoaderService", sectionFormComponent: "sectionFormComponent", sectionName: "sectionName" }, outputs: { sectionSubmitted: "sectionSubmitted" }, viewQueries: [{ propertyName: "formStateObject", first: true, predicate: ["f"], descendants: true }], ngImport: i0, template: "<form #f=\"ngForm\" autocomplete=\"off\">\r\n  <div *ngIf=\"form?.header?.status?.key !== 'NEW' \" class=\"mt-n3\" id=\"accordion\" role=\"tablist\"\r\n    aria-multiselectable=\"true\">\r\n    <app-main-request-details [lov]=\"form?.lovs\" [form]=\"form\" [section]=\"form?.sections[0]\">\r\n      <ng-container *ngTemplateOutlet=\"contentReqDet\"></ng-container>\r\n    </app-main-request-details>\r\n    <header class=\"header-line fs-12 fw-medium fc-dark-gray mt-sm-5 mt-4 mb-4\" *ngIf=\"form?.sections.length > 1\">\r\n      {{i18n.translate('Approvals')}}\r\n    </header>\r\n    <mat-accordion class=\"primary-accordion main-approval\">\r\n      <ng-container *ngFor=\"let section of form?.sections; let i = index\">\r\n        <app-form-section *ngIf=\"i !== 0\" class=\"app-form-section\" [segmentDynamicLoaderService]=\"segmentDynamicLoaderService\" [section]=section [lov]=\"form?.lovs\"\r\n          [isReadOnly]=\"section.header.readOnly\" [form]=\"form\" [controllers]=\"sectionsController\">\r\n        </app-form-section>\r\n      </ng-container>\r\n    </mat-accordion>\r\n  </div>\r\n\r\n  <section *ngIf=\"form?.header?.status?.key === 'NEW' \" class=\"default-box box-shadow p-4\">\r\n    <ng-container *ngTemplateOutlet=\"contentReqDet\"></ng-container>\r\n  </section>\r\n\r\n</form>\r\n\r\n\r\n<ng-template #contentReqDet><ng-content></ng-content></ng-template>\r\n", styles: ["@charset \"UTF-8\";.primary-accordion{--accordion-height: auto;--indicator-bc: transparent;--indicator-bc-active: transparent;--indicator-icon: \"\\e9bc\";--indicator-icon-active: \"\\ea34\";--indicator-color: var(--coral);--indicator-color-active: var(--dark-gray);--accordion-radius: 4px;--accordion-border-active: 1px solid var(--gray);--accordion-shadow: 0 7px 10px 0 rgba(var(--rgb-black), 3%);--accordion-shadow-active: none;--panel-padding: 1.5rem;--panel-body-padding: 0 1.5rem 1.5rem}@media (max-width: 576px){.primary-accordion{--accordion-height: 110px;--panel-padding: 1.5rem 1rem;--panel-body-padding: 0 1rem 1rem}}.primary-accordion.main-approval{position:relative}.primary-accordion.main-approval:before{content:\"\";position:absolute;top:0;bottom:0;margin:2rem;width:1px;height:calc(100% - 2rem);background-color:var(--dark-gray);z-index:0}@media (max-width: 576px){.workflow-all-btns ds-button::part(base){--btn-padding: 0 .5rem;--btn-fs: .75rem;--btn-height: var(--default-size-sm);--btn-min-width: var(--default-size-sm)}}\n"], dependencies: [{ kind: "directive", type: MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FormSectionComponent, selector: "app-form-section", inputs: ["requestDetails", "section", "form", "lov", "isReadOnly", "controllers", "segmentDynamicLoaderService", "sectionFormComponent", "sectionName"] }, { kind: "component", type: MainRequestDetailsComponent, selector: "app-main-request-details", inputs: ["section", "lov", "form"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: WorkflowSectionComponent, decorators: [{
             type: Component,
@@ -6060,7 +6012,7 @@ class HeaderComponent {
         // this.sidenavSubscription.unsubscribe()
     }
     location = location;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: HeaderComponent, deps: [{ token: CoreI18nService }, { token: SidenavService }, { token: CoreService }, { token: i2$1.Router }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: HeaderComponent, deps: [{ token: CoreI18nService }, { token: SidenavService }, { token: CoreService }, { token: i2$2.Router }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: HeaderComponent, isStandalone: true, selector: "app-header", ngImport: i0, template: "<ng-container *ngIf=\"!isMobile\">\r\n  <mat-toolbar\r\n    class=\"align-items-center justify-content-between gap-3 border-bottom\"\r\n  >\r\n    <div class=\"d-flex align-items-center gap-3\">\r\n      <ds-button\r\n        shape=\"flat\"\r\n        icon\r\n        color=\"light-gray\"\r\n        square\r\n        (click)=\"toggleSideNav()\"\r\n      >\r\n        <ds-icon icon=\"burger-menu-1\" class=\"fs-24 fc-dark-gray\"></ds-icon>\r\n      </ds-button>\r\n\r\n      <a [href]=\"location.origin\">\r\n        <figure class=\"m-0 d-flex\">\r\n          <img class=\"main-logo\" src=\"assets/images/hub.svg\" alt=\"\" />\r\n        </figure>\r\n      </a>\r\n    </div>\r\n\r\n    <div class=\"d-flex align-items-center gap-3\">\r\n      <ds-button\r\n        shape=\"flat\"\r\n        color=\"light-gray\"\r\n        class=\"user-menu-btn\"\r\n        [matMenuTriggerFor]=\"userMenu\"\r\n      >\r\n        <ds-avatar\r\n          image=\"/group/i-gate/wm-bpm/forms/-/proxy/portrait?email={{userData?.email}}\"\r\n          onerror=\"this.onerror=null;this.src='assets/images/user2.jpg'\"\r\n          slot=\"prefix\"\r\n          class=\"avatar\"\r\n        >\r\n        </ds-avatar>\r\n\r\n        <span class=\"fs-14 fw-medium fc-black\">\r\n          {{ coreService.getShortName( coreService?.loggedInUserData?.['name']) }}\r\n        </span>\r\n\r\n        <ds-icon\r\n          slot=\"suffix\"\r\n          icon=\"arrow\"\r\n          class=\"fc-dark-gray fs-16\"\r\n        ></ds-icon>\r\n      </ds-button>\r\n    </div>\r\n  </mat-toolbar>\r\n\r\n  <!-- User Menu -->\r\n  <mat-menu #userMenu=\"matMenu\" class=\"user-menu\">\r\n    <div mat-menu-item>\r\n      <span class=\"fs-14\">{{ translate.translate('welcome') }}, </span>\r\n      <br />\r\n      <span class=\"fs-14 fw-medium line-height-1\">{{ coreService.getShortName( coreService?.loggedInUserData?.['name']) }}</span>\r\n    </div>\r\n    <button mat-menu-item (click)=\"setLanguage()\">\r\n      <div class=\"d-flex align-items-center gap-2\">\r\n        <ds-icon icon=\"globe\" class=\"fs-25 fc-purple\"></ds-icon>\r\n        <span class=\"fs-14 fw-medium fc-black\">{{\r\n            translate.translate('otherLang')\r\n          }}</span>\r\n      </div>\r\n    </button>\r\n    <button mat-menu-item (click)=\"logout()\">\r\n      <div class=\"d-flex align-items-center gap-2\">\r\n        <ds-icon icon=\"logout\" class=\"fs-25 fc-red\"></ds-icon>\r\n        <span class=\"fs-14 fw-medium fc-black\">{{\r\n            translate.translate('logout')\r\n          }}</span>\r\n      </div>\r\n    </button>\r\n  </mat-menu>\r\n</ng-container>\r\n", styles: [".test-user-agent{position:fixed;top:90px;width:100%;z-index:99999;color:#fff}ds-button[square].burger-menu::part(base){--btn-padding: 10px;margin-bottom:-1px;width:37px;height:37px;--default-size: 37px}[dir=rtl] :host ds-button::part(overlay){inset:0}mat-toolbar{background-color:var(--main-toolbar-bc);height:var(--main-toolbar-height);position:fixed;top:0;z-index:var(--main-toolbar-zIndex);border-bottom:1px solid var(--light-gray)!important}mat-toolbar .logo img{min-width:100px}@media (max-width: 991px){.user-menu-btn::part(base){border:0px;padding:0;--default-size: 40px}.user-menu-btn::part(overlay){border-radius:50%}.user-menu-btn::part(label),.user-menu-btn::part(suffix){display:none}}:host::ng-deep .avatar{min-width:24px;width:24px;height:24px;background-color:transparent}:host::ng-deep ds-button.add::part(base){--btn-bg-color: var(--coral)}@media (max-width: 991px){:host::ng-deep .avatar{min-width:40px;width:40px;height:40px}:host::ng-deep .avatar .avatar--x-small{--default-size: 40px}}.linkS{position:fixed;z-index:2;bottom:100px;right:20px}.dashboard-menu-icon{display:inline-flex;align-items:center;justify-content:center;min-width:56px;width:56px;height:56px;border-radius:50%;background-color:var(--coral);margin-bottom:10px}::ng-deep .inside-mobile-app{--main-toolbar-height: 0px}::ng-deep ds-button.transparent::part(base){--btn-bg-color: transparent;--btn-border-color: transparent;--btn-overlay-color: transparent}::ng-deep .mat-divider-vertical{border-right-color:var(--black)}.mat-divider{--mat-divider-width: 1px;--mat-divider-color: var(--dark-gray)}.header-search{width:500px}@media (max-width: 1130px){.header-search{width:200px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i5.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i5.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i5.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i6.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: HeaderComponent, decorators: [{
@@ -6072,7 +6024,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                         MatMenuModule,
                         MatToolbarModule
                     ], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<ng-container *ngIf=\"!isMobile\">\r\n  <mat-toolbar\r\n    class=\"align-items-center justify-content-between gap-3 border-bottom\"\r\n  >\r\n    <div class=\"d-flex align-items-center gap-3\">\r\n      <ds-button\r\n        shape=\"flat\"\r\n        icon\r\n        color=\"light-gray\"\r\n        square\r\n        (click)=\"toggleSideNav()\"\r\n      >\r\n        <ds-icon icon=\"burger-menu-1\" class=\"fs-24 fc-dark-gray\"></ds-icon>\r\n      </ds-button>\r\n\r\n      <a [href]=\"location.origin\">\r\n        <figure class=\"m-0 d-flex\">\r\n          <img class=\"main-logo\" src=\"assets/images/hub.svg\" alt=\"\" />\r\n        </figure>\r\n      </a>\r\n    </div>\r\n\r\n    <div class=\"d-flex align-items-center gap-3\">\r\n      <ds-button\r\n        shape=\"flat\"\r\n        color=\"light-gray\"\r\n        class=\"user-menu-btn\"\r\n        [matMenuTriggerFor]=\"userMenu\"\r\n      >\r\n        <ds-avatar\r\n          image=\"/group/i-gate/wm-bpm/forms/-/proxy/portrait?email={{userData?.email}}\"\r\n          onerror=\"this.onerror=null;this.src='assets/images/user2.jpg'\"\r\n          slot=\"prefix\"\r\n          class=\"avatar\"\r\n        >\r\n        </ds-avatar>\r\n\r\n        <span class=\"fs-14 fw-medium fc-black\">\r\n          {{ coreService.getShortName( coreService?.loggedInUserData?.['name']) }}\r\n        </span>\r\n\r\n        <ds-icon\r\n          slot=\"suffix\"\r\n          icon=\"arrow\"\r\n          class=\"fc-dark-gray fs-16\"\r\n        ></ds-icon>\r\n      </ds-button>\r\n    </div>\r\n  </mat-toolbar>\r\n\r\n  <!-- User Menu -->\r\n  <mat-menu #userMenu=\"matMenu\" class=\"user-menu\">\r\n    <div mat-menu-item>\r\n      <span class=\"fs-14\">{{ translate.translate('welcome') }}, </span>\r\n      <br />\r\n      <span class=\"fs-14 fw-medium line-height-1\">{{ coreService.getShortName( coreService?.loggedInUserData?.['name']) }}</span>\r\n    </div>\r\n    <button mat-menu-item (click)=\"setLanguage()\">\r\n      <div class=\"d-flex align-items-center gap-2\">\r\n        <ds-icon icon=\"globe\" class=\"fs-25 fc-purple\"></ds-icon>\r\n        <span class=\"fs-14 fw-medium fc-black\">{{\r\n            translate.translate('otherLang')\r\n          }}</span>\r\n      </div>\r\n    </button>\r\n    <button mat-menu-item (click)=\"logout()\">\r\n      <div class=\"d-flex align-items-center gap-2\">\r\n        <ds-icon icon=\"logout\" class=\"fs-25 fc-red\"></ds-icon>\r\n        <span class=\"fs-14 fw-medium fc-black\">{{\r\n            translate.translate('logout')\r\n          }}</span>\r\n      </div>\r\n    </button>\r\n  </mat-menu>\r\n</ng-container>\r\n", styles: [".test-user-agent{position:fixed;top:90px;width:100%;z-index:99999;color:#fff}ds-button[square].burger-menu::part(base){--btn-padding: 10px;margin-bottom:-1px;width:37px;height:37px;--default-size: 37px}[dir=rtl] :host ds-button::part(overlay){inset:0}mat-toolbar{background-color:var(--main-toolbar-bc);height:var(--main-toolbar-height);position:fixed;top:0;z-index:var(--main-toolbar-zIndex);border-bottom:1px solid var(--light-gray)!important}mat-toolbar .logo img{min-width:100px}@media (max-width: 991px){.user-menu-btn::part(base){border:0px;padding:0;--default-size: 40px}.user-menu-btn::part(overlay){border-radius:50%}.user-menu-btn::part(label),.user-menu-btn::part(suffix){display:none}}:host::ng-deep .avatar{min-width:24px;width:24px;height:24px;background-color:transparent}:host::ng-deep ds-button.add::part(base){--btn-bg-color: var(--coral)}@media (max-width: 991px){:host::ng-deep .avatar{min-width:40px;width:40px;height:40px}:host::ng-deep .avatar .avatar--x-small{--default-size: 40px}}.linkS{position:fixed;z-index:2;bottom:100px;right:20px}.dashboard-menu-icon{display:inline-flex;align-items:center;justify-content:center;min-width:56px;width:56px;height:56px;border-radius:50%;background-color:var(--coral);margin-bottom:10px}::ng-deep .inside-mobile-app{--main-toolbar-height: 0px}::ng-deep ds-button.transparent::part(base){--btn-bg-color: transparent;--btn-border-color: transparent;--btn-overlay-color: transparent}::ng-deep .mat-divider-vertical{border-right-color:var(--black)}.mat-divider{--mat-divider-width: 1px;--mat-divider-color: var(--dark-gray)}.header-search{width:500px}@media (max-width: 1130px){.header-search{width:200px}}\n"] }]
-        }], ctorParameters: () => [{ type: CoreI18nService }, { type: SidenavService }, { type: CoreService }, { type: i2$1.Router }, { type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: CoreI18nService }, { type: SidenavService }, { type: CoreService }, { type: i2$2.Router }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [PLATFORM_ID]
                 }] }] });
@@ -6214,13 +6166,13 @@ class SideNavComponent {
         }
         this.router.navigate([url]);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SideNavComponent, deps: [{ token: SidenavService }, { token: i2$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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SideNavComponent, deps: [{ token: SidenavService }, { token: i2$2.Router }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: SideNavComponent, isStandalone: true, selector: "app-side-nav", inputs: { isOpened: "isOpened" }, viewQueries: [{ propertyName: "MenuTrigger", first: true, predicate: ["MenuTrigger"], descendants: true }], ngImport: i0, template: "<aside>\r\n  <div class=\"header d-flex d-lg-none\">\r\n    <div class=\"d-flex h-100 mt-auto justify-content-between w-100\">\r\n      <h1 class=\"fs-26 fw-bold fc-white logo\">academy</h1>\r\n      <ds-button size=\"small\" color=\"purple\" class=\"close purple\" (click)=\"closeSidenav()\">\r\n        <ds-icon icon=\"close\" class=\"fs-15 fc-white\"></ds-icon>\r\n      </ds-button>\r\n    </div>\r\n  </div>\r\n  <nav>\r\n    <ul>\r\n      <!--  (mouseenter)=\"menuMobile ? null : MenuTrigger.openMenu()\"-->\r\n      <!-- (click)=\"goto(item.routerLink,item.matmenu) -->\r\n      @for (item of Menu; track $index) {\r\n        @if (item.matmenu) {\r\n          <li\r\n            (click)=\"closeSidenav();navigateTo(item)\"  matTooltipPosition=\"right\" matTooltip=\"{{item.name }}\"\r\n            [routerLinkActive]=\"'active'\" (click)=\"goto(item.routerLink!,item.matmenu)\" #MenuTrigger=\"matMenuTrigger\"\r\n            [matMenuTriggerFor]=\"menuMenu\" [routerLinkActiveOptions]=\"{ exact: true }\" class=\"cursor-pointer\">\r\n            <ds-icon icon=\"{{item.icon}}\" class=\"icon\"></ds-icon>\r\n            <span class=\"menu-label\">\r\n              {{ item.name }}\r\n            </span>\r\n          </li>\r\n          <mat-menu #menuMenu=\"matMenu\" class=\"aside-menu  visible-{{item.matmenu}}\">\r\n            <app-mat-menu [title]=\"item.name \" [icon]=\"item.icon\" [list]=\"item.List\"></app-mat-menu>\r\n          </mat-menu>\r\n        } @else {\r\n          <li\r\n            (click)=\"closeSidenav();navigateTo(item)\"  matTooltipPosition=\"right\" matTooltip=\"{{item.name }}\"\r\n            [routerLinkActive]=\"'active'\" [routerLinkActiveOptions]=\"{ exact: true }\" class=\"cursor-pointer\">\r\n            <ds-icon icon=\"{{item.icon}}\" class=\"icon\"></ds-icon>\r\n            <span class=\"menu-label\">\r\n              {{ item.name }}\r\n            </span>\r\n          </li>\r\n        }\r\n      }\r\n    </ul>\r\n  </nav>\r\n</aside>\r\n", styles: [":host ::ng-deep aside{min-width:var(--main-aside-width);width:var(--main-aside-width);height:calc(100vh - var(--main-toolbar-height));display:flex;position:var(--main-aside-position);right:var(--main-aside-right);left:var(--main-aside-left);top:var(--main-toolbar-height);z-index:var(--main-toolbar-zIndex);background-color:var(--main-aside-bc);transform:var(--main-aside-transform);transition:all .5s cubic-bezier(.685,.0473,.346,1)}@media (max-width: 1024px){:host ::ng-deep aside{height:100%;flex-direction:column;--main-toolbar-height: 0}}:host ::ng-deep aside nav{width:100%}:host ::ng-deep aside ul{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:20px;padding:0rem;margin:37px 0;list-style:none;counter-reset:itemCounter}:host ::ng-deep aside ul li{display:flex;align-items:center;flex-wrap:nowrap;overflow:hidden;max-width:calc(var(--main-aside-width-active) - 15px);width:100%;gap:var(--gap-width, 2.5rem);padding:3px 0 3px 10px;cursor:pointer;color:var(--main-aside-item-fc);border-radius:0;transition:var(--default-transition)}[dir=rtl] :host ::ng-deep aside ul li{padding:3px 10px 3px 0!important}@media (max-width: 1024px){@keyframes liAnimation{0%{transform:translateY(-500px)}to{transform:translateY(0)}}}:host ::ng-deep aside ul li.active,:host ::ng-deep aside ul li:hover{background-color:var(--main-aside-item-bc)}[dir=ltr] :host ::ng-deep aside ul li.active,[dir=ltr] :host ::ng-deep aside ul li:hover{border-left:5px solid var(--coral)}[dir=rtl] :host ::ng-deep aside ul li.active,[dir=rtl] :host ::ng-deep aside ul li:hover{border-right:5px solid var(--coral)}:host ::ng-deep aside ul li .menu-label{font-size:var(--main-aside-item-fs);flex-grow:1;opacity:1;min-width:calc(var(--main-aside-width-active) - 2rem - 40px);display:var(--main-aside-item-display)}:host ::ng-deep aside .header{background-color:#0003!important;padding:15px;flex-direction:row}:host ::ng-deep aside .header div{display:flex;align-items:center;margin-top:auto}:host ::ng-deep aside .footer{margin-top:auto;margin-bottom:80px;padding:0 30px}:host ::ng-deep aside ds-icon{font-size:1.55rem;display:inline-flex;align-items:center;justify-content:center;border-radius:3px;min-width:40px;width:40px;height:40px}:host ::ng-deep ds-button.close::part(base){height:37px;width:37px}:host ::ng-deep ds-button.close ds-icon{font-size:18px;min-width:18px;width:18px;height:18px}:host ::ng-deep .viewAll:hover{background-color:var(--purple)}:host ::ng-deep .viewAll:hover span{color:var(--white)}:host ::ng-deep .justify-content-between{justify-content:space-between}:host ::ng-deep .flex-column{flex-direction:column}:host ::ng-deep .d-flex{display:flex}:host ::ng-deep .w-100{width:100%}:host ::ng-deep .gap-3{gap:1rem!important}:host ::ng-deep ds-button.purple::part(base){--btn-border-color: var(--purple)}:host ::ng-deep ds-button.purple::part(overlay){--btn-overlay-color: var(--purple)}:host ::ng-deep ds-button.secondary::part(base){--btn-border-color: var(--secondary)}:host ::ng-deep ds-button.secondary::part(overlay){--btn-overlay-color: var(--secondary)}@media (min-width: 1024px){:host ::ng-deep .d-md-none{display:none!important}}@media (max-height: 430px){:host ::ng-deep aside .header{margin-bottom:50px}:host ::ng-deep aside nav{padding:15px 0 0;overflow:auto}:host ::ng-deep aside .footer{margin-bottom:20px}}@media (max-height: 300px){:host ::ng-deep aside .header{margin-bottom:5px}}:host ::ng-deep .logo{color:#fff}::ng-deep .aside-menu .mat-mdc-menu-content{border:none;box-shadow:none;padding:0!important}\n"], dependencies: [{ kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SideNavComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-side-nav', standalone: true, imports: [RouterLinkActive, RouterLink, MatTooltipModule, MatMenu, MatMenuTrigger], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<aside>\r\n  <div class=\"header d-flex d-lg-none\">\r\n    <div class=\"d-flex h-100 mt-auto justify-content-between w-100\">\r\n      <h1 class=\"fs-26 fw-bold fc-white logo\">academy</h1>\r\n      <ds-button size=\"small\" color=\"purple\" class=\"close purple\" (click)=\"closeSidenav()\">\r\n        <ds-icon icon=\"close\" class=\"fs-15 fc-white\"></ds-icon>\r\n      </ds-button>\r\n    </div>\r\n  </div>\r\n  <nav>\r\n    <ul>\r\n      <!--  (mouseenter)=\"menuMobile ? null : MenuTrigger.openMenu()\"-->\r\n      <!-- (click)=\"goto(item.routerLink,item.matmenu) -->\r\n      @for (item of Menu; track $index) {\r\n        @if (item.matmenu) {\r\n          <li\r\n            (click)=\"closeSidenav();navigateTo(item)\"  matTooltipPosition=\"right\" matTooltip=\"{{item.name }}\"\r\n            [routerLinkActive]=\"'active'\" (click)=\"goto(item.routerLink!,item.matmenu)\" #MenuTrigger=\"matMenuTrigger\"\r\n            [matMenuTriggerFor]=\"menuMenu\" [routerLinkActiveOptions]=\"{ exact: true }\" class=\"cursor-pointer\">\r\n            <ds-icon icon=\"{{item.icon}}\" class=\"icon\"></ds-icon>\r\n            <span class=\"menu-label\">\r\n              {{ item.name }}\r\n            </span>\r\n          </li>\r\n          <mat-menu #menuMenu=\"matMenu\" class=\"aside-menu  visible-{{item.matmenu}}\">\r\n            <app-mat-menu [title]=\"item.name \" [icon]=\"item.icon\" [list]=\"item.List\"></app-mat-menu>\r\n          </mat-menu>\r\n        } @else {\r\n          <li\r\n            (click)=\"closeSidenav();navigateTo(item)\"  matTooltipPosition=\"right\" matTooltip=\"{{item.name }}\"\r\n            [routerLinkActive]=\"'active'\" [routerLinkActiveOptions]=\"{ exact: true }\" class=\"cursor-pointer\">\r\n            <ds-icon icon=\"{{item.icon}}\" class=\"icon\"></ds-icon>\r\n            <span class=\"menu-label\">\r\n              {{ item.name }}\r\n            </span>\r\n          </li>\r\n        }\r\n      }\r\n    </ul>\r\n  </nav>\r\n</aside>\r\n", styles: [":host ::ng-deep aside{min-width:var(--main-aside-width);width:var(--main-aside-width);height:calc(100vh - var(--main-toolbar-height));display:flex;position:var(--main-aside-position);right:var(--main-aside-right);left:var(--main-aside-left);top:var(--main-toolbar-height);z-index:var(--main-toolbar-zIndex);background-color:var(--main-aside-bc);transform:var(--main-aside-transform);transition:all .5s cubic-bezier(.685,.0473,.346,1)}@media (max-width: 1024px){:host ::ng-deep aside{height:100%;flex-direction:column;--main-toolbar-height: 0}}:host ::ng-deep aside nav{width:100%}:host ::ng-deep aside ul{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:20px;padding:0rem;margin:37px 0;list-style:none;counter-reset:itemCounter}:host ::ng-deep aside ul li{display:flex;align-items:center;flex-wrap:nowrap;overflow:hidden;max-width:calc(var(--main-aside-width-active) - 15px);width:100%;gap:var(--gap-width, 2.5rem);padding:3px 0 3px 10px;cursor:pointer;color:var(--main-aside-item-fc);border-radius:0;transition:var(--default-transition)}[dir=rtl] :host ::ng-deep aside ul li{padding:3px 10px 3px 0!important}@media (max-width: 1024px){@keyframes liAnimation{0%{transform:translateY(-500px)}to{transform:translateY(0)}}}:host ::ng-deep aside ul li.active,:host ::ng-deep aside ul li:hover{background-color:var(--main-aside-item-bc)}[dir=ltr] :host ::ng-deep aside ul li.active,[dir=ltr] :host ::ng-deep aside ul li:hover{border-left:5px solid var(--coral)}[dir=rtl] :host ::ng-deep aside ul li.active,[dir=rtl] :host ::ng-deep aside ul li:hover{border-right:5px solid var(--coral)}:host ::ng-deep aside ul li .menu-label{font-size:var(--main-aside-item-fs);flex-grow:1;opacity:1;min-width:calc(var(--main-aside-width-active) - 2rem - 40px);display:var(--main-aside-item-display)}:host ::ng-deep aside .header{background-color:#0003!important;padding:15px;flex-direction:row}:host ::ng-deep aside .header div{display:flex;align-items:center;margin-top:auto}:host ::ng-deep aside .footer{margin-top:auto;margin-bottom:80px;padding:0 30px}:host ::ng-deep aside ds-icon{font-size:1.55rem;display:inline-flex;align-items:center;justify-content:center;border-radius:3px;min-width:40px;width:40px;height:40px}:host ::ng-deep ds-button.close::part(base){height:37px;width:37px}:host ::ng-deep ds-button.close ds-icon{font-size:18px;min-width:18px;width:18px;height:18px}:host ::ng-deep .viewAll:hover{background-color:var(--purple)}:host ::ng-deep .viewAll:hover span{color:var(--white)}:host ::ng-deep .justify-content-between{justify-content:space-between}:host ::ng-deep .flex-column{flex-direction:column}:host ::ng-deep .d-flex{display:flex}:host ::ng-deep .w-100{width:100%}:host ::ng-deep .gap-3{gap:1rem!important}:host ::ng-deep ds-button.purple::part(base){--btn-border-color: var(--purple)}:host ::ng-deep ds-button.purple::part(overlay){--btn-overlay-color: var(--purple)}:host ::ng-deep ds-button.secondary::part(base){--btn-border-color: var(--secondary)}:host ::ng-deep ds-button.secondary::part(overlay){--btn-overlay-color: var(--secondary)}@media (min-width: 1024px){:host ::ng-deep .d-md-none{display:none!important}}@media (max-height: 430px){:host ::ng-deep aside .header{margin-bottom:50px}:host ::ng-deep aside nav{padding:15px 0 0;overflow:auto}:host ::ng-deep aside .footer{margin-bottom:20px}}@media (max-height: 300px){:host ::ng-deep aside .header{margin-bottom:5px}}:host ::ng-deep .logo{color:#fff}::ng-deep .aside-menu .mat-mdc-menu-content{border:none;box-shadow:none;padding:0!important}\n"] }]
-        }], ctorParameters: () => [{ type: SidenavService }, { type: i2$1.Router }], propDecorators: { isOpened: [{
+        }], ctorParameters: () => [{ type: SidenavService }, { type: i2$2.Router }], propDecorators: { isOpened: [{
                 type: Input
             }], MenuTrigger: [{
                 type: ViewChild,
@@ -6279,8 +6231,8 @@ class LayoutComponent {
     closeSideNav() {
         this.sidenav.close().then(r => { });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: LayoutComponent, deps: [{ token: DOCUMENT }, { token: i2$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" }, 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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: LayoutComponent, deps: [{ token: DOCUMENT }, { token: i2$2.Router }, { token: SidenavService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: LayoutComponent, isStandalone: true, selector: "core-layout", inputs: { form: "form", formTitle: "formTitle", isLoading: "isLoading", serviceBrief: "serviceBrief" }, viewQueries: [{ propertyName: "sidenav", first: true, predicate: ["sidenav"], descendants: true, static: true }], ngImport: i0, template: "<app-header></app-header>\r\n<section class=\"d-flex\">\r\n  <app-side-nav></app-side-nav>\r\n  <mat-sidenav-container\r\n    class=\"flex-grow-1\"\r\n    [hasBackdrop]=\"true\"\r\n    (backdropClick)=\"backdropClick()\"\r\n  >\r\n    <mat-sidenav\r\n      #sidenav\r\n      autoFocus=\"false\"\r\n      fixedInViewport\r\n      [position]=\"'end'\"\r\n      (closedStart)=\"onClose()\"\r\n    >\r\n      <ng-container *ngComponentOutlet=\"sideContent\">\r\n        <app-side-nav></app-side-nav>\r\n      </ng-container>\r\n    </mat-sidenav>\r\n    <mat-sidenav-content>\r\n      <main\r\n        class=\"hadPadding service-wrapper\"\r\n        [ngClass]=\"form?.header?.status?.key == 'NEW' ? 'hub-container-mini' : 'hub-container'\">\r\n\r\n        <ng-content ></ng-content>\r\n        <ng-content select=\"[workflow]\"></ng-content>\r\n\r\n      </main>\r\n    </mat-sidenav-content>\r\n  </mat-sidenav-container>\r\n</section>\r\n", styles: [":host ::ng-deep .mat-drawer-container{overflow:visible;margin-top:var(--main-toolbar-height);min-height:calc(100vh - var(--main-toolbar-height));background-color:var(--body-bg)!important;z-index:initial!important;min-width:calc(100% - var(--main-aside-width));width:calc(100% - var(--main-aside-width))}:host ::ng-deep .mat-drawer-container .mat-drawer-content{display:flex;flex-direction:column;overflow:visible}.hup-wrapper :host ::ng-deep .mat-drawer-container .mat-drawer-content{min-height:auto}:host ::ng-deep footer{bottom:-65px}.mat-drawer{border-radius:10px!important;margin:1rem;box-shadow:0 8px 16px 7px rgba(var(--rgb-black),.06);background-color:var(--white)}@media (max-width: 767px){.mat-drawer{padding:0;border-radius:0;margin:0;width:100%}}.customize-btn{min-width:166px}.zer-pt{padding-top:0!important}\n"], dependencies: [{ kind: "component", type: HeaderComponent, selector: "app-header" }, { kind: "component", type: SideNavComponent, selector: "app-side-nav", inputs: ["isOpened"] }, { kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i3$2.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i3$2.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i3$2.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: LayoutComponent, decorators: [{
             type: Component,
@@ -6288,7 +6240,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
         }], ctorParameters: () => [{ type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
-                }] }, { type: i2$1.Router }, { type: SidenavService }], propDecorators: { sidenav: [{
+                }] }, { type: i2$2.Router }, { type: SidenavService }], propDecorators: { sidenav: [{
                 type: ViewChild,
                 args: ["sidenav", { static: true }]
             }], form: [{
@@ -6586,8 +6538,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
 
 var segmentDynamicLoaderConfiguration = {
     roleToApprovalSectionMapping: {
-        wpo_d: GeneralApproverSectionComponent,
-        wpo_gm: GeneralApproverSectionComponent
+        vpr_d: GeneralApproverSectionComponent
     }
 };
 
@@ -6677,7 +6628,7 @@ class CoreAppComponent {
         }
         window.scrollTo(0, 0);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: CoreAppComponent, deps: [{ token: SegmentDynamicLoaderService }, { token: DOCUMENT }, { token: i2$1.Router }, { token: SidenavService }, { token: CoreService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: CoreAppComponent, deps: [{ token: SegmentDynamicLoaderService }, { token: DOCUMENT }, { token: i2$2.Router }, { token: SidenavService }, { token: CoreService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: CoreAppComponent, isStandalone: true, selector: "lib-app", providers: [
             { provide: DynamicComponentInjectorToken, useValue: { /* your value here */} }
         ], ngImport: i0, template: "<core-layout>\r\n  @if (!loading['form']) {\r\n    <core-service-header\r\n      [isLoading]=\"false\"\r\n      [formTitle]=\"formTitle\"\r\n      [form]=\"form\">\r\n    </core-service-header>\r\n    <app-workflow-section\r\n      workflow\r\n      [form]=\"form\"\r\n       [segmentDynamicLoaderService]=\"segmentDynamicLoader\"\r\n      [sections]=\"form?.sections\">\r\n      <app-request-details-section [section]=\"form?.sections[0]\" [lov]=\"form?.lovs\" className=\"form-section\"></app-request-details-section>\r\n      <!--      [isReadOnly]=\"form.sections[0].header.readOnly\"-->\r\n    </app-workflow-section>\r\n  } @else {\r\n    <core-service-header header [formTitle]=\"formTitle\" [isLoading]=\"true\">\r\n    </core-service-header>\r\n  }\r\n</core-layout>\r\n", styles: [""], dependencies: [{ kind: "component", type: 
@@ -6698,7 +6649,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
         }], ctorParameters: () => [{ type: SegmentDynamicLoaderService }, { type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
-                }] }, { type: i2$1.Router }, { type: SidenavService }, { type: CoreService }] });
+                }] }, { type: i2$2.Router }, { type: SidenavService }, { type: CoreService }] });
 
 function encodePassword(formId, password) {
     const formIdString = Array.from(new TextEncoder().encode(formId), (x) => String.fromCodePoint(x)).join('');