bpm-core 0.0.20 → 0.0.22

package/fesm2022/bpm-core.mjs

@@ -13,7 +13,7 @@ import { NoopScrollStrategy } from '@angular/cdk/overlay';
 import * as i4 from '@angular/material/core';
 import { MAT_DATE_FORMATS, DateAdapter, MAT_DATE_LOCALE } from '@angular/material/core';
 import * as i1$2 from '@angular/forms';
-import { NG_VALUE_ACCESSOR, FormControl, ControlContainer, NgForm, FormsModule, Validators, ReactiveFormsModule } from '@angular/forms';
+import { NG_VALUE_ACCESSOR, FormControl, ControlContainer, NgForm, FormsModule, Validators, ReactiveFormsModule, NgControl, FormControlName, FormGroupDirective } from '@angular/forms';
 import * as i7 from '@angular/platform-browser';
 import * as FileSaver from 'file-saver';
 import { ImageCropperComponent } from 'ngx-image-cropper';
@@ -41,14 +41,15 @@ import { RouterLink, RouterModule, RouterLinkActive, RouterOutlet } from '@angul
 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 * 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';
@@ -144,9 +145,12 @@ const WM_ACTION_SUBMIT = 'SUBMIT';
 const FORM_STATUS_NEW = 'NEW';
 const FORM_STATUS_PENDING = 'PENDING';
 const FORM_STATUS_APPROVED = 'APPROVED';
+const FORM_STATUS_APPROVE = 'APPROVE';
 const FORM_STATUS_REJECTED = 'REJECTED';
+const FORM_STATUS_REJECT = 'REJECT';
 const FORM_STATUS_SEND_BACK = 'SENDBACK';
 const FORM_STATUS_CANCELLED = 'CANCELLED';
+const FORM_STATUS_CANCEL = 'CANCEL';
 const FORM_STATUS_COMPLETED = 'COMPLETED';
 const STATE_MACHINE_ACTION_LOAD_HISTORY = 'loadHistory';
 const STATE_MACHINE_ACTION_SUCCESS_HISTORY = 'successHistory';
@@ -382,7 +386,6 @@ var en = {
     NORMAL: '3 days',
     select: 'Select',
     addMultiAttachments: "Add Multi Attachments",
-    vpr_dRole: "Mahmoud Ali"
 };
 
 var ar = {
@@ -2959,15 +2962,108 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                 type: Input
             }] } });
 
-/* eslint-disable @angular-eslint/use-lifecycle-interface */
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable @angular-eslint/component-selector */
-class InputComponent extends BaseComponent {
+class ControlValueAccessorDirective {
+    injector;
+    i18n;
+    hasLabel = true;
+    isReadOnly;
+    hideOption = false;
+    labelTextWriteMode;
+    hint = '';
+    loading;
+    placeholder;
+    type;
+    value;
+    showErrorMessage;
+    showHint;
+    showIfEmpty;
+    insideTable;
+    maxLength;
+    control;
+    required = false;
+    _isDisabled = false;
+    constructor(injector, i18n) {
+        this.injector = injector;
+        this.i18n = i18n;
+    }
+    ngOnInit() {
+        this.setFormControl();
+        this.required = this.control?.hasValidator(Validators.required) ?? false;
+        const maxLengthValidator = this.control?.getError('maxlength');
+        maxLengthValidator ? this.maxLength = maxLengthValidator.requiredLength : this.maxLength = 0;
+    }
+    setFormControl() {
+        try {
+            const formControl = this.injector.get(NgControl);
+            switch (formControl.constructor) {
+                case FormControlName:
+                    this.control = this.injector
+                        .get(FormGroupDirective)
+                        .getControl(formControl);
+                    break;
+                default:
+                    this.control = formControl
+                        .form;
+                    break;
+            }
+        }
+        catch (err) {
+            this.control = new FormControl();
+        }
+    }
+    writeValue(value) {
+        this.control
+            ? this.control.setValue(value)
+            : (this.control = new FormControl(value));
+    }
+    registerOnChange(fn) {
+    }
+    registerOnTouched(fn) {
+    }
+    setDisabledState(isDisabled) {
+        this._isDisabled = isDisabled;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ControlValueAccessorDirective, deps: [{ token: i0.Injector }, { token: CoreI18nService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.8", type: ControlValueAccessorDirective, selector: "[appControlValueAccessor]", inputs: { hasLabel: "hasLabel", isReadOnly: "isReadOnly", hideOption: "hideOption", labelTextWriteMode: "labelTextWriteMode", hint: "hint", loading: "loading", placeholder: "placeholder", type: "type", value: "value", showErrorMessage: "showErrorMessage", showHint: "showHint", showIfEmpty: "showIfEmpty", insideTable: "insideTable", maxLength: "maxLength" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ControlValueAccessorDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[appControlValueAccessor]',
+                }]
+        }], ctorParameters: () => [{ type: i0.Injector }, { type: CoreI18nService }], propDecorators: { hasLabel: [{
+                type: Input
+            }], isReadOnly: [{
+                type: Input
+            }], hideOption: [{
+                type: Input
+            }], labelTextWriteMode: [{
+                type: Input
+            }], hint: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], showErrorMessage: [{
+                type: Input
+            }], showHint: [{
+                type: Input
+            }], showIfEmpty: [{
+                type: Input
+            }], insideTable: [{
+                type: Input
+            }], maxLength: [{
+                type: Input
+            }] } });
+
+class InputComponent extends ControlValueAccessorDirective {
     label;
-    displayValue;
-    hasError = false;
     hasTooltip = false;
-    error;
     tooltip;
     floatLabel = 'auto';
     className = 'bordered-input';
@@ -2976,52 +3072,31 @@ class InputComponent extends BaseComponent {
     iconPrefixName;
     matSuffix;
     iconSuffixName;
-    numberSuffixName;
-    optional = false;
-    showArrows = false;
-    decimals = 0;
     emitedChangedValue1 = new EventEmitter();
-    useCurrency;
-    useMask;
-    ngOnInit() {
-        // this.resetPropagator.subscribe(this, this.resetData);
-        this.field == undefined ? (this.field = '') : this.field;
-        this.controller.setValue(this.field);
-        if (this.type == 'email') {
-            this.controller.setValidators([
-                Validators.pattern('^[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,4}$'),
-            ]);
-        }
-        if (this.minLength) {
-            this.controller.setValidators([Validators.minLength(+this.minLength)]);
-        }
-        if (this.maxLength) {
-            this.controller.setValidators([Validators.maxLength(+this.maxLength)]);
-        }
-        if (this.maxValue) {
-            this.controller.setValidators([Validators.max(+this.maxValue)]);
-        }
-    }
+    // ngOnInit(): void {
+    // this.resetPropagator.subscribe(this, this.resetData);
+    // this.field == undefined ? (this.field = '') : this.field;
+    // this.control.setValue(this.field);
+    // if (this.type == 'email') {
+    //   this.control.setValidators([
+    //     Validators.pattern('^[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,4}$'),
+    //   ]);
+    // }
+    // if (this.minLength) {
+    //   this.control.setValidators([Validators.minLength(+this.minLength)]);
+    // }
+    // if (this.maxLength) {
+    //   this.control.setValidators([Validators.maxLength(+this.maxLength)]);
+    // }
+    // if (this.maxValue) {
+    //   this.control.setValidators([Validators.max(+this.maxValue)]);
+    // }
+    // }
     ngAfterViewChecked() {
-        this.cdRef.detectChanges();
+        // this.cdRef.detectChanges();
     }
     ngOnChanges(changes) {
-        if (changes?.['field']) {
-            if (changes?.['field'].currentValue == '' || changes?.['field'].currentValue == null) {
-                this.controller.setValue('');
-            }
-            else {
-                this.controller.setValue(changes['field'].currentValue);
-            }
-        }
-        if (changes?.['disabled']) {
-            if (changes['disabled'].currentValue) {
-                this.controller.disable();
-            }
-            else {
-                this.controller.enable();
-            }
-        }
+        console.log(this.control.errors);
     }
     onValueChange1(data) {
         const currentValue = data.target.value;
@@ -3029,22 +3104,22 @@ class InputComponent extends BaseComponent {
     }
     onValueChange(data) {
         let currentValue = data.target.value;
-        console.log("showErrorMessage :", this.showErrorMessage);
-        if (+currentValue.length > +this.maxLength) {
-            currentValue = currentValue.substr(0, +this.maxLength).toString();
-        }
-        if (+currentValue < +this.minValue) {
-            currentValue = this.minValue.toString();
-        }
-        if (+currentValue > +this.maxValue) {
-            currentValue = this.maxValue.toString();
-        }
-        this.field = currentValue;
-        this.controller.setValue(this.field);
-        this.emitedValue.emit(this.field.trim());
+        console.log(this.control);
+        console.log("showErrorMessage :", this.control.errors);
+        // if (+currentValue.length > +this.maxLength) {
+        //   currentValue = currentValue.substr(0, +this.maxLength).toString();
+        // }
+        this.control.setValue(currentValue);
+        // this.emitedValue.emit(this.control.value.trim());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: InputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: InputComponent, isStandalone: true, selector: "app-input", inputs: { label: "label", displayValue: "displayValue", hasError: "hasError", hasTooltip: "hasTooltip", error: "error", tooltip: "tooltip", floatLabel: "floatLabel", className: "className", showLabel: "showLabel", matPrefix: "matPrefix", iconPrefixName: "iconPrefixName", matSuffix: "matSuffix", iconSuffixName: "iconSuffixName", numberSuffixName: "numberSuffixName", optional: "optional", showArrows: "showArrows", decimals: "decimals", emitedChangedValue1: "emitedChangedValue1", useCurrency: "useCurrency", useMask: "useMask" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if(!isReadOnly){\r\n    <!-- <app-form-label [label]=\"label\" [optional]=\"!required\" [hideOption]=\"hideOption\" [showLabel]=\"showLabel\"></app-form-label> -->\r\n     @if(hasLabel){\r\n      <div class=\"d-flex justify-content-between mb-1\">\r\n        @if(!hasTooltip){<span class=\"form-label mb-0\">{{label}}</span>}\r\n        @if(!required && !hideOption){<span class=\"fs-11 fc-dark-gray\">{{i18n.translate('Optional')}}</span>}\r\n        @if(hasTooltip){\r\n          <span class=\"form-label mb-0\">\r\n            {{labelTextWriteMode}}\r\n            <ds-icon icon=\"info fs-22\" class=\"cursor-pointer\" [satPopoverAnchor]=\"popover\"\r\n              (click)=\"popover.toggle(); $event.stopImmediatePropagation()\"></ds-icon>\r\n         </span>\r\n        }\r\n      </div>\r\n     }\r\n    <mat-form-field class=\"primary-form {{className}}\" [ngClass]=\"{'input-disabled' : disabled }\"\r\n      [floatLabel]=\"floatLabel\">\r\n      @if(iconPrefixName){<span  matPrefix class=\"sfi {{iconPrefixName}}\"></span>}\r\n      @if(loading){<span class=\"sfi sfi-spinner d-inline-block spin fc-coral\" matSuffix></span>}\r\n      \r\n      <label class=\"mat-form-content\">\r\n              <!-- add input for ar && en custom directive with add type = arOnly ||  type = enOnly-->\r\n               @if(type === 'arOnly'){\r\n                <input arOnly matInput [value]=\"value\"\r\n                [attr.disabled]=\"disabled\" oninput=\"validity.valid || (value='');\" [formControl]=\"controller\"\r\n                (input)=\"onValueChange($event)\" [required]=\"required\" [maxlength]=\"maxLength\" [minLength]=\"minLength\"\r\n                [placeholder]=\"placeholder\">\r\n               }\r\n        @if(type === 'enOnly'){\r\n          <input  enOnly matInput [value]=\"value\"\r\n          [attr.disabled]=\"disabled\" oninput=\"validity.valid || (value='');\" [formControl]=\"controller\"\r\n          (input)=\"onValueChange($event)\" [required]=\"required\" [maxlength]=\"maxLength\" [minLength]=\"minLength\"\r\n          [placeholder]=\"placeholder\">\r\n        }\r\n              <!--  -->\r\n        @if(type !== 'enOnly' &&  type !== 'arOnly'){\r\n          <input  matInput [value]=\"value\"\r\n          [attr.disabled]=\"disabled\" oninput=\"validity.valid || (value='');\" [formControl]=\"controller\" [type]=\"type\"\r\n          (input)=\"onValueChange($event)\" (change)=\"onValueChange1($event)\" [required]=\"required\" [maxlength]=\"maxLength\" [minLength]=\"minLength\"\r\n          [placeholder]=\"placeholder\">\r\n        }\r\n      </label>\r\n      @if(matSuffix){<span matSuffix class=\"sfi {{iconSuffixName}}\"></span>}\r\n      @if(!controller?.valid){\r\n        <mat-error class=\"mb-2\">\r\n          {{i18n.translate('validFieldError')}}{{label}}\r\n        </mat-error>\r\n      }\r\n    @if(showHint){\r\n      <mat-hint class=\"d-flex align-items-center gap-1 mt-1\">\r\n        <span class=\"sfi sfi-info fs-17 fc-dark-gray\" [ngClass]=\"{'fc-oasis-light-imp':value}\"></span>\r\n        <span class=\"fs-12 fc-black line-height-1\">{{hint}}</span>\r\n      </mat-hint>\r\n    }\r\n    </mat-form-field>\r\n    @if(showErrorMessage && controller.value){\r\n      <span class=\"fc-coral\" style=\"color:#f44336\">\r\n        {{errorMessage}}\r\n      </span>\r\n    }\r\n}\r\n\r\n@if(isReadOnly && (showIfEmpty || field)){\r\n  <ng-container  class=\"info-section\">\r\n    <app-info-item class=\"info-item w-100\" [label]=\"label\" [insideTable]=\"insideTable\"\r\n      [hasLabel]=\"hasLabel\" [type]=\"type\" [value]=\"field\"></app-info-item>\r\n      @if(showHint){\r\n        <mat-hint class=\"d-flex align-items-center gap-1 mt-1\">\r\n          <span class=\"sfi sfi-info fs-17 fc-dark-gray\" [ngClass]=\"{'fc-oasis-light-imp':value}\"></span>\r\n          <span class=\"fs-12 fc-black line-height-1\">{{hint}}</span>\r\n        </mat-hint>\r\n      }\r\n     \r\n  </ng-container>\r\n}\r\n\r\n<!-- section tooltip -->\r\n<!-- <sat-popover #popover [hasBackdrop]=\"true\" verticalAlign=\"below\">\r\n  <div class=\"deafult-tooltip\">\r\n    {{tooltip}}\r\n  </div>\r\n</sat-popover> -->\r\n\r\n<sat-popover #popover [hasBackdrop]=\"true\"  verticalAlign=\"below\">\r\n  <div class=\"default-popover p-3 fs-14\">\r\n   <span class=\"fs-14 fw-bold signature-notes\" [innerHTML]='tooltip'></span>\r\n  </div>\r\n</sat-popover>\r\n", styles: [":host{flex-grow:1}.input-disabled{pointer-events:none;opacity:1.5}\n"], dependencies: [{ kind: "ngmodule", type: SatPopoverModule }, { kind: "component", type: i1$3.SatPopoverComponent, selector: "sat-popover", inputs: ["anchor", "horizontalAlign", "xAlign", "verticalAlign", "yAlign", "forceAlignment", "lockAlignment", "autoFocus", "restoreFocus", "scrollStrategy", "hasBackdrop", "interactiveClose", "openTransition", "closeTransition", "openAnimationStartAtScale", "closeAnimationEndAtScale", "backdropClass", "panelClass"], outputs: ["opened", "closed", "afterOpen", "afterClose", "backdropClicked", "overlayKeydown"] }, { kind: "directive", type: i1$3.SatPopoverAnchorDirective, selector: "[satPopoverAnchor]", inputs: ["satPopoverAnchor"], exportAs: ["satPopoverAnchor"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: InfoItemComponent, selector: "app-info-item", inputs: ["label", "value", "name", "type", "dateType", "multiple", "insideTable", "hasLabel", "arrayList", "actionType", "download"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: InputComponent, isStandalone: true, selector: "app-input", inputs: { label: "label", hasTooltip: "hasTooltip", tooltip: "tooltip", floatLabel: "floatLabel", className: "className", showLabel: "showLabel", matPrefix: "matPrefix", iconPrefixName: "iconPrefixName", matSuffix: "matSuffix", iconSuffixName: "iconSuffixName", emitedChangedValue1: "emitedChangedValue1" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => InputComponent),
+                multi: true,
+            },
+        ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if(!isReadOnly){\r\n<!--    <app-form-label [label]=\"label\" [optional]=\"!required\" [hideOption]=\"hideOption\" [showLabel]=\"showLabel\"></app-form-label>-->\r\n     @if(hasLabel){\r\n      <div class=\"d-flex justify-content-between mb-1\">\r\n        @if(!hasTooltip){<span class=\"form-label mb-0\">{{label}}</span>}\r\n        @if(!required && !hideOption){<span class=\"fs-11 fc-dark-gray\">{{i18n.translate('Optional')}}</span>}\r\n        @if(hasTooltip){\r\n          <span class=\"form-label mb-0\">\r\n            {{labelTextWriteMode}}\r\n            <ds-icon icon=\"info fs-22\" class=\"cursor-pointer\" [satPopoverAnchor]=\"popover\"\r\n              (click)=\"popover.toggle(); $event.stopImmediatePropagation()\"></ds-icon>\r\n         </span>\r\n        }\r\n      </div>\r\n     }\r\n    <mat-form-field class=\"primary-form {{className}}\" [ngClass]=\"{'input-disabled' : control.disabled}\"\r\n      [floatLabel]=\"floatLabel\">\r\n      @if(iconPrefixName){<span  matPrefix class=\"sfi {{iconPrefixName}}\"></span>}\r\n      @if(loading){<span class=\"sfi sfi-spinner d-inline-block spin fc-coral\" matSuffix></span>}\r\n\r\n      <label class=\"mat-form-content\">\r\n              <!-- add input for ar && en custom directive with add type = arOnly ||  type = enOnly-->\r\n               @if(type === 'arOnly'){\r\n                <input arOnly matInput [value]=\"value\"\r\n                 oninput=\"validity.valid || (value='');\" [formControl]=\"control\"\r\n                (input)=\"onValueChange($event)\" [required]=\"required\"\r\n                [placeholder]=\"placeholder\">\r\n               }\r\n        @if(type === 'enOnly'){\r\n          <input  enOnly matInput [value]=\"value\"\r\n           oninput=\"validity.valid || (value='');\" [formControl]=\"control\"\r\n          (input)=\"onValueChange($event)\" [required]=\"required\"\r\n          [placeholder]=\"placeholder\">\r\n        }\r\n              <!--  -->\r\n        @if(type !== 'enOnly' &&  type !== 'arOnly'){\r\n          <input  matInput [value]=\"value\"\r\n           oninput=\"validity.valid || (value='');\" [formControl]=\"control\" [type]=\"type\"\r\n           (input)=\"onValueChange($event)\" (change)=\"onValueChange1($event)\"\r\n          [placeholder]=\"placeholder\">\r\n\r\n        }\r\n      </label>\r\n      @if(matSuffix){<span matSuffix class=\"sfi {{iconSuffixName}}\"></span>}\r\n      @if(!control?.valid){\r\n        <mat-error class=\"mb-2\">\r\n          {{i18n.translate('validFieldError')}}{{label}}\r\n        </mat-error>\r\n      }\r\n    @if(showHint){\r\n      <mat-hint class=\"d-flex align-items-center gap-1 mt-1\">\r\n        <span class=\"sfi sfi-info fs-17 fc-dark-gray\" [ngClass]=\"{'fc-oasis-light-imp':value}\"></span>\r\n        <span class=\"fs-12 fc-black line-height-1\">{{hint}}</span>\r\n      </mat-hint>\r\n    }\r\n    </mat-form-field>\r\n\r\n      <span class=\"fc-coral\" style=\"color:#f44336\">\r\n        {{control.errors}}\r\n      </span>\r\n\r\n}\r\n\r\n@if(isReadOnly && (showIfEmpty || control)){\r\n  <ng-container  class=\"info-section\">\r\n    <app-info-item class=\"info-item w-100\" [label]=\"label\" [insideTable]=\"insideTable\"\r\n      [hasLabel]=\"hasLabel\" [type]=\"type\" [value]=\"control.value\"></app-info-item>\r\n      @if(showHint){\r\n        <mat-hint class=\"d-flex align-items-center gap-1 mt-1\">\r\n          <span class=\"sfi sfi-info fs-17 fc-dark-gray\" [ngClass]=\"{'fc-oasis-light-imp':value}\"></span>\r\n          <span class=\"fs-12 fc-black line-height-1\">{{hint}}</span>\r\n        </mat-hint>\r\n      }\r\n\r\n  </ng-container>\r\n}\r\n\r\n<!-- section tooltip -->\r\n<!-- <sat-popover #popover [hasBackdrop]=\"true\" verticalAlign=\"below\">\r\n  <div class=\"deafult-tooltip\">\r\n    {{tooltip}}\r\n  </div>\r\n</sat-popover> -->\r\n\r\n<sat-popover #popover [hasBackdrop]=\"true\"  verticalAlign=\"below\">\r\n  <div class=\"default-popover p-3 fs-14\">\r\n   <span class=\"fs-14 fw-bold signature-notes\" [innerHTML]='tooltip'></span>\r\n  </div>\r\n</sat-popover>\r\n", styles: [":host{flex-grow:1}.input-disabled{pointer-events:none;opacity:1.5}\n"], dependencies: [{ kind: "ngmodule", type: SatPopoverModule }, { kind: "component", type: i1$3.SatPopoverComponent, selector: "sat-popover", inputs: ["anchor", "horizontalAlign", "xAlign", "verticalAlign", "yAlign", "forceAlignment", "lockAlignment", "autoFocus", "restoreFocus", "scrollStrategy", "hasBackdrop", "interactiveClose", "openTransition", "closeTransition", "openAnimationStartAtScale", "closeAnimationEndAtScale", "backdropClass", "panelClass"], outputs: ["opened", "closed", "afterOpen", "afterClose", "backdropClicked", "overlayKeydown"] }, { kind: "directive", type: i1$3.SatPopoverAnchorDirective, selector: "[satPopoverAnchor]", inputs: ["satPopoverAnchor"], exportAs: ["satPopoverAnchor"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: InfoItemComponent, selector: "app-info-item", inputs: ["label", "value", "name", "type", "dateType", "multiple", "insideTable", "hasLabel", "arrayList", "actionType", "download"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: InputComponent, decorators: [{
             type: Component,
@@ -3059,17 +3134,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                         MatFormField,
                         NgxMaskDirective,
                         MatInput,
-                    ], standalone: true, template: "@if(!isReadOnly){\r\n    <!-- <app-form-label [label]=\"label\" [optional]=\"!required\" [hideOption]=\"hideOption\" [showLabel]=\"showLabel\"></app-form-label> -->\r\n     @if(hasLabel){\r\n      <div class=\"d-flex justify-content-between mb-1\">\r\n        @if(!hasTooltip){<span class=\"form-label mb-0\">{{label}}</span>}\r\n        @if(!required && !hideOption){<span class=\"fs-11 fc-dark-gray\">{{i18n.translate('Optional')}}</span>}\r\n        @if(hasTooltip){\r\n          <span class=\"form-label mb-0\">\r\n            {{labelTextWriteMode}}\r\n            <ds-icon icon=\"info fs-22\" class=\"cursor-pointer\" [satPopoverAnchor]=\"popover\"\r\n              (click)=\"popover.toggle(); $event.stopImmediatePropagation()\"></ds-icon>\r\n         </span>\r\n        }\r\n      </div>\r\n     }\r\n    <mat-form-field class=\"primary-form {{className}}\" [ngClass]=\"{'input-disabled' : disabled }\"\r\n      [floatLabel]=\"floatLabel\">\r\n      @if(iconPrefixName){<span  matPrefix class=\"sfi {{iconPrefixName}}\"></span>}\r\n      @if(loading){<span class=\"sfi sfi-spinner d-inline-block spin fc-coral\" matSuffix></span>}\r\n      \r\n      <label class=\"mat-form-content\">\r\n              <!-- add input for ar && en custom directive with add type = arOnly ||  type = enOnly-->\r\n               @if(type === 'arOnly'){\r\n                <input arOnly matInput [value]=\"value\"\r\n                [attr.disabled]=\"disabled\" oninput=\"validity.valid || (value='');\" [formControl]=\"controller\"\r\n                (input)=\"onValueChange($event)\" [required]=\"required\" [maxlength]=\"maxLength\" [minLength]=\"minLength\"\r\n                [placeholder]=\"placeholder\">\r\n               }\r\n        @if(type === 'enOnly'){\r\n          <input  enOnly matInput [value]=\"value\"\r\n          [attr.disabled]=\"disabled\" oninput=\"validity.valid || (value='');\" [formControl]=\"controller\"\r\n          (input)=\"onValueChange($event)\" [required]=\"required\" [maxlength]=\"maxLength\" [minLength]=\"minLength\"\r\n          [placeholder]=\"placeholder\">\r\n        }\r\n              <!--  -->\r\n        @if(type !== 'enOnly' &&  type !== 'arOnly'){\r\n          <input  matInput [value]=\"value\"\r\n          [attr.disabled]=\"disabled\" oninput=\"validity.valid || (value='');\" [formControl]=\"controller\" [type]=\"type\"\r\n          (input)=\"onValueChange($event)\" (change)=\"onValueChange1($event)\" [required]=\"required\" [maxlength]=\"maxLength\" [minLength]=\"minLength\"\r\n          [placeholder]=\"placeholder\">\r\n        }\r\n      </label>\r\n      @if(matSuffix){<span matSuffix class=\"sfi {{iconSuffixName}}\"></span>}\r\n      @if(!controller?.valid){\r\n        <mat-error class=\"mb-2\">\r\n          {{i18n.translate('validFieldError')}}{{label}}\r\n        </mat-error>\r\n      }\r\n    @if(showHint){\r\n      <mat-hint class=\"d-flex align-items-center gap-1 mt-1\">\r\n        <span class=\"sfi sfi-info fs-17 fc-dark-gray\" [ngClass]=\"{'fc-oasis-light-imp':value}\"></span>\r\n        <span class=\"fs-12 fc-black line-height-1\">{{hint}}</span>\r\n      </mat-hint>\r\n    }\r\n    </mat-form-field>\r\n    @if(showErrorMessage && controller.value){\r\n      <span class=\"fc-coral\" style=\"color:#f44336\">\r\n        {{errorMessage}}\r\n      </span>\r\n    }\r\n}\r\n\r\n@if(isReadOnly && (showIfEmpty || field)){\r\n  <ng-container  class=\"info-section\">\r\n    <app-info-item class=\"info-item w-100\" [label]=\"label\" [insideTable]=\"insideTable\"\r\n      [hasLabel]=\"hasLabel\" [type]=\"type\" [value]=\"field\"></app-info-item>\r\n      @if(showHint){\r\n        <mat-hint class=\"d-flex align-items-center gap-1 mt-1\">\r\n          <span class=\"sfi sfi-info fs-17 fc-dark-gray\" [ngClass]=\"{'fc-oasis-light-imp':value}\"></span>\r\n          <span class=\"fs-12 fc-black line-height-1\">{{hint}}</span>\r\n        </mat-hint>\r\n      }\r\n     \r\n  </ng-container>\r\n}\r\n\r\n<!-- section tooltip -->\r\n<!-- <sat-popover #popover [hasBackdrop]=\"true\" verticalAlign=\"below\">\r\n  <div class=\"deafult-tooltip\">\r\n    {{tooltip}}\r\n  </div>\r\n</sat-popover> -->\r\n\r\n<sat-popover #popover [hasBackdrop]=\"true\"  verticalAlign=\"below\">\r\n  <div class=\"default-popover p-3 fs-14\">\r\n   <span class=\"fs-14 fw-bold signature-notes\" [innerHTML]='tooltip'></span>\r\n  </div>\r\n</sat-popover>\r\n", styles: [":host{flex-grow:1}.input-disabled{pointer-events:none;opacity:1.5}\n"] }]
+                        FormLabelComponent,
+                    ], standalone: true, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => InputComponent),
+                            multi: true,
+                        },
+                    ], template: "@if(!isReadOnly){\r\n<!--    <app-form-label [label]=\"label\" [optional]=\"!required\" [hideOption]=\"hideOption\" [showLabel]=\"showLabel\"></app-form-label>-->\r\n     @if(hasLabel){\r\n      <div class=\"d-flex justify-content-between mb-1\">\r\n        @if(!hasTooltip){<span class=\"form-label mb-0\">{{label}}</span>}\r\n        @if(!required && !hideOption){<span class=\"fs-11 fc-dark-gray\">{{i18n.translate('Optional')}}</span>}\r\n        @if(hasTooltip){\r\n          <span class=\"form-label mb-0\">\r\n            {{labelTextWriteMode}}\r\n            <ds-icon icon=\"info fs-22\" class=\"cursor-pointer\" [satPopoverAnchor]=\"popover\"\r\n              (click)=\"popover.toggle(); $event.stopImmediatePropagation()\"></ds-icon>\r\n         </span>\r\n        }\r\n      </div>\r\n     }\r\n    <mat-form-field class=\"primary-form {{className}}\" [ngClass]=\"{'input-disabled' : control.disabled}\"\r\n      [floatLabel]=\"floatLabel\">\r\n      @if(iconPrefixName){<span  matPrefix class=\"sfi {{iconPrefixName}}\"></span>}\r\n      @if(loading){<span class=\"sfi sfi-spinner d-inline-block spin fc-coral\" matSuffix></span>}\r\n\r\n      <label class=\"mat-form-content\">\r\n              <!-- add input for ar && en custom directive with add type = arOnly ||  type = enOnly-->\r\n               @if(type === 'arOnly'){\r\n                <input arOnly matInput [value]=\"value\"\r\n                 oninput=\"validity.valid || (value='');\" [formControl]=\"control\"\r\n                (input)=\"onValueChange($event)\" [required]=\"required\"\r\n                [placeholder]=\"placeholder\">\r\n               }\r\n        @if(type === 'enOnly'){\r\n          <input  enOnly matInput [value]=\"value\"\r\n           oninput=\"validity.valid || (value='');\" [formControl]=\"control\"\r\n          (input)=\"onValueChange($event)\" [required]=\"required\"\r\n          [placeholder]=\"placeholder\">\r\n        }\r\n              <!--  -->\r\n        @if(type !== 'enOnly' &&  type !== 'arOnly'){\r\n          <input  matInput [value]=\"value\"\r\n           oninput=\"validity.valid || (value='');\" [formControl]=\"control\" [type]=\"type\"\r\n           (input)=\"onValueChange($event)\" (change)=\"onValueChange1($event)\"\r\n          [placeholder]=\"placeholder\">\r\n\r\n        }\r\n      </label>\r\n      @if(matSuffix){<span matSuffix class=\"sfi {{iconSuffixName}}\"></span>}\r\n      @if(!control?.valid){\r\n        <mat-error class=\"mb-2\">\r\n          {{i18n.translate('validFieldError')}}{{label}}\r\n        </mat-error>\r\n      }\r\n    @if(showHint){\r\n      <mat-hint class=\"d-flex align-items-center gap-1 mt-1\">\r\n        <span class=\"sfi sfi-info fs-17 fc-dark-gray\" [ngClass]=\"{'fc-oasis-light-imp':value}\"></span>\r\n        <span class=\"fs-12 fc-black line-height-1\">{{hint}}</span>\r\n      </mat-hint>\r\n    }\r\n    </mat-form-field>\r\n\r\n      <span class=\"fc-coral\" style=\"color:#f44336\">\r\n        {{control.errors}}\r\n      </span>\r\n\r\n}\r\n\r\n@if(isReadOnly && (showIfEmpty || control)){\r\n  <ng-container  class=\"info-section\">\r\n    <app-info-item class=\"info-item w-100\" [label]=\"label\" [insideTable]=\"insideTable\"\r\n      [hasLabel]=\"hasLabel\" [type]=\"type\" [value]=\"control.value\"></app-info-item>\r\n      @if(showHint){\r\n        <mat-hint class=\"d-flex align-items-center gap-1 mt-1\">\r\n          <span class=\"sfi sfi-info fs-17 fc-dark-gray\" [ngClass]=\"{'fc-oasis-light-imp':value}\"></span>\r\n          <span class=\"fs-12 fc-black line-height-1\">{{hint}}</span>\r\n        </mat-hint>\r\n      }\r\n\r\n  </ng-container>\r\n}\r\n\r\n<!-- section tooltip -->\r\n<!-- <sat-popover #popover [hasBackdrop]=\"true\" verticalAlign=\"below\">\r\n  <div class=\"deafult-tooltip\">\r\n    {{tooltip}}\r\n  </div>\r\n</sat-popover> -->\r\n\r\n<sat-popover #popover [hasBackdrop]=\"true\"  verticalAlign=\"below\">\r\n  <div class=\"default-popover p-3 fs-14\">\r\n   <span class=\"fs-14 fw-bold signature-notes\" [innerHTML]='tooltip'></span>\r\n  </div>\r\n</sat-popover>\r\n", styles: [":host{flex-grow:1}.input-disabled{pointer-events:none;opacity:1.5}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
-            }], displayValue: [{
-                type: Input
-            }], hasError: [{
-                type: Input
             }], hasTooltip: [{
                 type: Input
-            }], error: [{
-                type: Input
             }], tooltip: [{
                 type: Input
             }], floatLabel: [{
@@ -3086,20 +3162,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                 type: Input
             }], iconSuffixName: [{
                 type: Input
-            }], numberSuffixName: [{
-                type: Input
-            }], optional: [{
-                type: Input
-            }], showArrows: [{
-                type: Input
-            }], decimals: [{
-                type: Input
             }], emitedChangedValue1: [{
                 type: Input
-            }], useCurrency: [{
-                type: Input
-            }], useMask: [{
-                type: Input
             }] } });
 
 /* eslint-disable @angular-eslint/use-lifecycle-interface */
@@ -5419,7 +5483,7 @@ class ServiceHeaderComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ServiceHeaderComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CoreI18nService }, { token: FeedBackService }, { token: i1$1.MatDialog }, { token: SidenavService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: ServiceHeaderComponent, isStandalone: true, selector: "core-service-header", inputs: { form: "form", showHistory: "showHistory", isLoading: "isLoading", showApprovalHistory: "showApprovalHistory", approvalHistory: "approvalHistory", creationDate: "creationDate", formTitle: "formTitle", section: "section", serviceBrief: "serviceBrief" }, providers: [FeedBackService,
             { provide: MAT_DIALOG_DATA, useValue: {} },
-        ], ngImport: i0, template: "<ng-container *ngIf=\"!(form?.header?.status?.['key'] === 'NEW')\">\r\n  <div class=\"d-flex align-items-center justify-content-end gap-2 my-2\" *ngIf=\"!(form?.header?.status?.['key'] === 'NEW')\">\r\n\r\n    <!-- flag-->\r\n    <!--<ds-button\r\n      *ngIf=\"form?.inboxItem && !form.sections[form.sections.length -1].header.readOnly && !isLoading\"\r\n      square\r\n      icon\r\n      size=\"small\"\r\n      [matMenuTriggerFor]=\"menu\"\r\n      class=\"icon-btn-shadow\">\r\n      <ds-icon\r\n        [ngClass]=\"{'fc-purple' : (flagPriority === '0' ||  flagPriority === null),'fc-yellow' : flagPriority === '1','fc-green' : flagPriority === '2','fc-coral' : flagPriority === '3'}\"\r\n        icon=\"flag-o\" class=\"fs-20 fs-md-17 fc-purple\">\r\n      </ds-icon>\r\n    </ds-button>\r\n    <mat-menu #menu=\"matMenu\" panelClass=\"action-menu\">\r\n      <button mat-menu-item (click)=\"setFlagPriority('0')\">\r\n        <ds-icon icon=\"flag-o\" class=\"fc-purple fs-20 fs-md-17\"></ds-icon>\r\n      </button>\r\n      <button mat-menu-item (click)=\"setFlagPriority('1')\">\r\n        <ds-icon icon=\"flag-o\" class=\"fc-yellow fs-20 fs-md-17\"></ds-icon>\r\n      </button>\r\n      <button mat-menu-item (click)=\"setFlagPriority('2')\">\r\n        <ds-icon icon=\"flag-o\" class=\"fc-green fs-20 fs-md-17\"></ds-icon>\r\n      </button>\r\n      <button mat-menu-item (click)=\"setFlagPriority('3')\">\r\n        <ds-icon icon=\"flag-o\" class=\"fc-coral fs-20 fs-md-17\"></ds-icon>\r\n      </button>\r\n    </mat-menu>-->\r\n\r\n    <!-- print-->\r\n    <ng-content></ng-content>\r\n  </div>\r\n\r\n  <header class=\"service-header bc-white p-3 p-sm-4 py-4 gap-3 {{statusClass(form?.header?.status?.['key'])}}\">\r\n\r\n    <div class=\"service-header-icon\">\r\n      <img\r\n        alt=\"\"\r\n        src=\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMjkiIHZpZXdCb3g9IjAgMCAzMCAyOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTI1LjEgMEg0LjlDMi4yIDAgMCAyLjIgMCA0LjlWMjguNkgyNS4xQzI3LjggMjguNiAzMCAyNi40IDMwIDIzLjdWNC45QzMwIDIuMiAyNy44IDAgMjUuMSAwWk0yIDQuOUMyIDMuMyAzLjMgMiA0LjkgMkgyNS4xQzI2LjcgMiAyOCAzLjMgMjggNC45VjIzLjdDMjggMjUuMyAyNi43IDI2LjYgMjUuMSAyNi42SDJWNC45Wk0xMS41IDYuM0M3LjEgNi4zIDMuNSA5LjkgMy41IDE0LjNDMy41IDE4LjcgNy4xIDIyLjMgMTEuNSAyMi4zQzE1LjkgMjIuMyAxOS41IDE4LjcgMTkuNSAxNC4zQzE5LjUgOS45IDE1LjkgNi4zIDExLjUgNi4zWk0xNS4xIDE5QzE0LjEgMTkuOCAxMi44IDIwLjIgMTEuNSAyMC4yQzEwLjIgMjAuMiA4LjkgMTkuOCA3LjkgMTlDOC43IDE3LjcgMTAgMTcgMTEuNSAxN0MxMyAxNyAxNC40IDE3LjggMTUuMSAxOVpNMTMuMSAxMy40QzEzLjEgMTQuMyAxMi40IDE1IDExLjUgMTVDMTAuNiAxNSA5LjkgMTQuMyA5LjkgMTMuNEM5LjkgMTIuNSAxMC42IDExLjggMTEuNSAxMS44QzEyLjQgMTEuOCAxMy4xIDEyLjUgMTMuMSAxMy40Wk0xNS4xIDEzLjRDMTUuMSAxMS40IDEzLjUgOS44IDExLjUgOS44QzkuNSA5LjggNy45IDExLjQgNy45IDEzLjRDNy45IDE0LjIgOC4yIDE1IDguNyAxNS43QzcuOCAxNi4xIDcuMSAxNi44IDYuNSAxNy42QzUuOCAxNi42IDUuNSAxNS41IDUuNSAxNC4zQzUuNSAxMSA4LjIgOC4zIDExLjUgOC4zQzE0LjggOC4zIDE3LjUgMTEgMTcuNSAxNC4zQzE3LjUgMTUuNSAxNy4yIDE2LjYgMTYuNSAxNy42QzE1LjkgMTYuOCAxNS4yIDE2LjIgMTQuMyAxNS43QzE0LjggMTUuMSAxNS4xIDE0LjIgMTUuMSAxMy40Wk0yMSA5LjFDMjEgOC42IDIxLjQgOC4xIDIyIDguMUgyNS41QzI2IDguMSAyNi41IDguNSAyNi41IDkuMUMyNi41IDkuNiAyNi4xIDEwLjEgMjUuNSAxMC4xSDIyQzIxLjQgMTAuMSAyMSA5LjYgMjEgOS4xWk0yMSAxMi41QzIxIDEyIDIxLjQgMTEuNSAyMiAxMS41SDI1LjVDMjYgMTEuNSAyNi41IDExLjkgMjYuNSAxMi41QzI2LjUgMTMgMjYuMSAxMy41IDI1LjUgMTMuNUgyMkMyMS40IDEzLjUgMjEgMTMuMSAyMSAxMi41Wk0yMSAxNkMyMSAxNS41IDIxLjQgMTUgMjIgMTVIMjUuNUMyNiAxNSAyNi41IDE1LjQgMjYuNSAxNkMyNi41IDE2LjUgMjYuMSAxNyAyNS41IDE3SDIyQzIxLjQgMTcgMjEgMTYuNiAyMSAxNlpNMjUuNSAyMC41SDIyQzIxLjUgMjAuNSAyMSAyMC4xIDIxIDE5LjVDMjEgMTguOSAyMS40IDE4LjUgMjIgMTguNUgyNS41QzI2IDE4LjUgMjYuNSAxOC45IDI2LjUgMTkuNUMyNi41IDIwLjEgMjYuMSAyMC41IDI1LjUgMjAuNVoiIGZpbGw9IiNGRjM3NUUiLz4KPC9zdmc+Cg==\"/>\r\n    </div>\r\n\r\n    <div class=\"flex-grow-1 d-flex flex-column flex-sm-row align-items-sm-center gap-2\">\r\n      <div class=\"flex-grow-1\">\r\n        <!-- title-->\r\n        <h1 class=\"fs-20 fs-md-16 fw-bold fc-black header-title m-0\">{{ formTitle }}\r\n          <ds-icon\r\n            icon=\"info\" class=\"fs-22 fc-dark-gray cursor-pointer\" *ngIf=\"serviceBrief.length\"\r\n            (click)=\"openFaq()\"></ds-icon>\r\n        </h1>\r\n        <div\r\n          class=\"header-user d-flex align-items-sm-center gap-2 mt-sm-1\"\r\n          *ngIf=\"form?.header?.status?.['key'] !== 'NEW' || isLoading\">\r\n          <ds-avatar\r\n            *ngIf=\"!isLoading\" image=\"{{form?.header?.requesterPhoto}}\" size=\"xx-small\"\r\n            class=\"d-inline-flex cursor-pointer\" (click)=\"showUserInfo()\"></ds-avatar>\r\n          <span\r\n            class=\"fs-12 text-truncate d-sm-block cursor-pointer\" (click)=\"showUserInfo()\"\r\n            [ngClass]=\"{'loading-bg loading-width': isLoading}\">{{ (form?.header?.requesterName) }}</span>\r\n          <mat-divider class=\"divider circle mx-2 d-none d-sm-block\"></mat-divider>\r\n          <span class=\"fs-12\" [ngClass]=\"{'loading-bg loading-width': isLoading}\">{{ form?.header?.formId }}</span>\r\n          <mat-divider *ngIf=\"creationDate\" class=\"divider circle mx-2 d-none d-sm-block\"></mat-divider>\r\n          <span *ngIf=\"creationDate\" class=\"fs-14\" [ngClass]=\"{'loading-bg loading-width': isLoading}\">{{ creationDate }}</span>\r\n        </div>\r\n      </div>\r\n      <!-- header-actions-->\r\n      <div\r\n        class=\"header-actions d-flex flex-row flex-sm-column justify-content-between justify-content-sm-center gap-2 mt-2 mt-sm-0\"\r\n        *ngIf=\"!(form?.header?.status?.['key'] === 'NEW')\">\r\n        <ds-status\r\n          *ngIf=\"form?.header?.status?.['key'] !== 'NEW' && !isLoading\"\r\n          status=\"{{statusClass(form?.header?.status?.['key'])}}\" class=\"header-status\">{{ form?.header?.status?.['value'] }}\r\n        </ds-status>\r\n\r\n        <div class=\"d-flex align-items-center justify-content-end gap-2\">\r\n          <!-- feedback-->\r\n<!--            *ngIf=\"form?.inboxItem && (form?.inboxItem?.canRequestFeedback ==='true'|| form?.inboxItem?.hasFeedback==='true') && !isLoading\"-->\r\n        <!--  <ds-button\r\n            square icon size=\"small\" (click)=\"feedback()\">\r\n            <ds-icon\r\n              icon=\"chat-o\" class=\"fs-20 fs-md-17 fc-coral\"\r\n              [ngClass]=\"{'fc-green':feedBackIcon === 'feedbackResponded' , 'fc-red': feedBackIcon === 'respondToFeedback' , 'fc-yellow': feedBackIcon === 'waitingFeedback'}\">\r\n            </ds-icon>\r\n          </ds-button>-->\r\n          <ds-button\r\n            *ngIf=\"form?.commentsDrop?.length > 0 && !isLoading\" square icon size=\"small\"\r\n            (click)=\"onCommentsFormClick()\" class=\"has-comments\">\r\n            <ds-icon icon=\"clock\" class=\"fc-coral fs-20 fs-md-17\"></ds-icon>\r\n          </ds-button>\r\n          <ng-container *ngIf=\"showApprovalHistory\">\r\n            <ds-button\r\n              color=\"white\" shape=\"text\" square size=\"small\" [satPopoverAnchor]=\"workflow\"\r\n              #workflowAnchor=\"satPopoverAnchor\" (click)=\"workflowAnchor.popover.open()\">\r\n              <slot name=\"prefix\">\r\n                <ds-icon icon=\"workflow\" class=\"fs-24\"></ds-icon>\r\n              </slot>\r\n            </ds-button>\r\n\r\n            <sat-popover\r\n              #workflow [anchor]=\"workflowAnchor\" [hasBackdrop]=\"true\" verticalAlign=\"below\"\r\n              horizontalAlign=\"end\">\r\n              <div class=\"default-popover p-3\" style=\"min-width: 330px;\">\r\n                <ds-approvals *ngIf=\"approvalHistory\" class=\"popover-approvals\" approvalsData=\"{{approvals}}\">\r\n                </ds-approvals>\r\n              </div>\r\n            </sat-popover>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n  </header>\r\n</ng-container>\r\n<header\r\n  class=\"mb-4 mt-4 d-flex align-items-center justify-content-between align-items-end gap-2\"\r\n  *ngIf=\"(form?.header?.status?.['key'] === 'NEW')\">\r\n  <section>\r\n    <h6 class=\"fs-14 fs-md-12 fw-normal fc-dark-gray mb-0\">\r\n      {{ i18n.translate('Hello') }}\r\n      {{ (form?.header?.requesterName) }}, {{ i18n.translate('welcomeBack') }}!\r\n    </h6>\r\n    <h1 class=\"fs-26 fs-md-20 fw-bold fc-black d-flex align-items-center gap-2 mb-1\">\r\n      {{ formTitle }}\r\n      <ds-icon icon=\"info\" class=\"fs-22 fc-dark-gray cursor-pointer\" *ngIf=\"serviceBrief.length\" (click)=\"openFaq()\">\r\n      </ds-icon>\r\n    </h1>\r\n  </section>\r\n\r\n</header>\r\n", styles: [":host ::ng-deep .filter-section .select-form-field{--input-bg: var(--white);--input-border: var(--white);--placeholder-fc: var(--black);--input-width: 85px;--input-fs: .75rem;--placeholder-fs: .75rem;--label-fs: .75rem;--label-fw: var(--font-regular);--input-height: var(--default-size-sm);font-size:var(--label-fs);box-shadow:var(--box-shadow)}:host ::ng-deep ds-button::part(base){--default-size-sm: 30px;--btn-radius: 3px}@media (max-width: 576px){:host ::ng-deep ds-button::part(base){--default-size-sm: 25px}}:host ::ng-deep .loading-width{min-width:100px;width:40px;flex-grow:1}:host ::ng-deep ds-avatar::part(base){--default-size: 20px}:host ::ng-deep .service-header{--service-header-icon-size: var(--default-size-lg);--header-border-color: var(--coral);display:flex;align-items:flex-start;border-top:5px solid var(--header-border-color);box-shadow:0 7px 10px rgba(var(--rgb-black),3%)}@media (max-width: 576px){:host ::ng-deep .service-header{border-radius:3px 3px 0 0}}:host ::ng-deep .service-header.loading{--header-border-color: var(--off-white)}:host ::ng-deep .service-header.warning{--header-border-color: var(--yellow)}:host ::ng-deep .service-header.success{--header-border-color: var(--green)}:host ::ng-deep .service-header.danger{--header-border-color: var(--red)}@media (max-width: 576px){:host ::ng-deep .service-header{--service-header-icon-size: var(--default-size-sm)}}:host ::ng-deep .service-header .service-header-icon{min-width:var(--service-header-icon-size);width:var(--service-header-icon-size);height:var(--service-header-icon-size);display:inline-flex;align-items:center;justify-content:center;padding:.75rem;border-radius:6px 6px 6px 0;background-color:rgba(var(--rgb-coral),.1)}@media (max-width: 576px){:host ::ng-deep .service-header .service-header-icon{padding:.5rem}}:host ::ng-deep .service-header .header-title{text-align:start}:host ::ng-deep .service-header .divider.circle{min-width:5px;width:5px;min-height:5px;height:5px;border-radius:50%;background-color:var(--dark-gray)}:host ::ng-deep .service-header .header-actions{align-items:flex-end;justify-content:flex-end}:host ::ng-deep .service-header .header-actions .has-comments{position:relative}:host ::ng-deep .service-header .header-actions .has-comments:before{content:\"\";min-width:8px;height:8px;border-radius:50%;background-color:var(--coral);position:absolute;top:-3px;right:-3px;z-index:1}[dir=rtl] :host ::ng-deep .service-header .header-actions .has-comments:before{right:auto;left:-3px}:host ::ng-deep .service-header .header-actions ds-button::part(base){--btn-color: var(--coral);--btn-bg-color: var(--light-gray);--btn-border-color: var(--light-gray)}:host ::ng-deep .service-header .header-user{color:var(--dark-gray)}:host ::ng-deep .history-button::part(base){background-color:var(--white);--btn-height: var(--default-size-sm);--btn-shadow: 0 7px 10px rgba(var(--rgb-black), 3%)}@media (max-width: 576px){:host ::ng-deep .history-button::part(base){--btn-height: 35px;--btn-width: 35px}}@media (max-width: 576px){:host ::ng-deep .history-button::part(label){display:none}}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SatPopoverModule }, { kind: "component", type: i1$3.SatPopoverComponent, selector: "sat-popover", inputs: ["anchor", "horizontalAlign", "xAlign", "verticalAlign", "yAlign", "forceAlignment", "lockAlignment", "autoFocus", "restoreFocus", "scrollStrategy", "hasBackdrop", "interactiveClose", "openTransition", "closeTransition", "openAnimationStartAtScale", "closeAnimationEndAtScale", "backdropClass", "panelClass"], outputs: ["opened", "closed", "afterOpen", "afterClose", "backdropClicked", "overlayKeydown"] }, { kind: "directive", type: i1$3.SatPopoverAnchorDirective, selector: "[satPopoverAnchor]", inputs: ["satPopoverAnchor"], exportAs: ["satPopoverAnchor"] }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+        ], ngImport: i0, template: "<ng-container *ngIf=\"!(form?.header?.status?.['key'] === 'NEW')\">\r\n  <div class=\"d-flex align-items-center justify-content-end gap-2 my-2\" *ngIf=\"!(form?.header?.status?.['key'] === 'NEW')\">\r\n\r\n    <!-- flag-->\r\n    <ds-button\r\n      *ngIf=\"form?.inboxItem && !form.sections[form.sections.length -1].header.readOnly && !isLoading\"\r\n      square\r\n      icon\r\n      size=\"small\"\r\n      [matMenuTriggerFor]=\"menu\"\r\n      class=\"icon-btn-shadow\">\r\n      <ds-icon\r\n        [ngClass]=\"{'fc-purple' : (flagPriority === '0' ||  flagPriority === null),'fc-yellow' : flagPriority === '1','fc-green' : flagPriority === '2','fc-coral' : flagPriority === '3'}\"\r\n        icon=\"flag-o\" class=\"fs-20 fs-md-17 fc-purple\">\r\n      </ds-icon>\r\n    </ds-button>\r\n    <mat-menu #menu=\"matMenu\" panelClass=\"action-menu\">\r\n      <button mat-menu-item (click)=\"setFlagPriority('0')\">\r\n        <ds-icon icon=\"flag-o\" class=\"fc-purple fs-20 fs-md-17\"></ds-icon>\r\n      </button>\r\n      <button mat-menu-item (click)=\"setFlagPriority('1')\">\r\n        <ds-icon icon=\"flag-o\" class=\"fc-yellow fs-20 fs-md-17\"></ds-icon>\r\n      </button>\r\n      <button mat-menu-item (click)=\"setFlagPriority('2')\">\r\n        <ds-icon icon=\"flag-o\" class=\"fc-green fs-20 fs-md-17\"></ds-icon>\r\n      </button>\r\n      <button mat-menu-item (click)=\"setFlagPriority('3')\">\r\n        <ds-icon icon=\"flag-o\" class=\"fc-coral fs-20 fs-md-17\"></ds-icon>\r\n      </button>\r\n    </mat-menu>\r\n\r\n    <!-- print-->\r\n    <ng-content></ng-content>\r\n  </div>\r\n\r\n  <header class=\"service-header bc-white p-3 p-sm-4 py-4 gap-3 {{statusClass(form?.header?.status?.['key'])}}\">\r\n\r\n    <div class=\"service-header-icon\">\r\n      <img\r\n        alt=\"\"\r\n        src=\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMjkiIHZpZXdCb3g9IjAgMCAzMCAyOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTI1LjEgMEg0LjlDMi4yIDAgMCAyLjIgMCA0LjlWMjguNkgyNS4xQzI3LjggMjguNiAzMCAyNi40IDMwIDIzLjdWNC45QzMwIDIuMiAyNy44IDAgMjUuMSAwWk0yIDQuOUMyIDMuMyAzLjMgMiA0LjkgMkgyNS4xQzI2LjcgMiAyOCAzLjMgMjggNC45VjIzLjdDMjggMjUuMyAyNi43IDI2LjYgMjUuMSAyNi42SDJWNC45Wk0xMS41IDYuM0M3LjEgNi4zIDMuNSA5LjkgMy41IDE0LjNDMy41IDE4LjcgNy4xIDIyLjMgMTEuNSAyMi4zQzE1LjkgMjIuMyAxOS41IDE4LjcgMTkuNSAxNC4zQzE5LjUgOS45IDE1LjkgNi4zIDExLjUgNi4zWk0xNS4xIDE5QzE0LjEgMTkuOCAxMi44IDIwLjIgMTEuNSAyMC4yQzEwLjIgMjAuMiA4LjkgMTkuOCA3LjkgMTlDOC43IDE3LjcgMTAgMTcgMTEuNSAxN0MxMyAxNyAxNC40IDE3LjggMTUuMSAxOVpNMTMuMSAxMy40QzEzLjEgMTQuMyAxMi40IDE1IDExLjUgMTVDMTAuNiAxNSA5LjkgMTQuMyA5LjkgMTMuNEM5LjkgMTIuNSAxMC42IDExLjggMTEuNSAxMS44QzEyLjQgMTEuOCAxMy4xIDEyLjUgMTMuMSAxMy40Wk0xNS4xIDEzLjRDMTUuMSAxMS40IDEzLjUgOS44IDExLjUgOS44QzkuNSA5LjggNy45IDExLjQgNy45IDEzLjRDNy45IDE0LjIgOC4yIDE1IDguNyAxNS43QzcuOCAxNi4xIDcuMSAxNi44IDYuNSAxNy42QzUuOCAxNi42IDUuNSAxNS41IDUuNSAxNC4zQzUuNSAxMSA4LjIgOC4zIDExLjUgOC4zQzE0LjggOC4zIDE3LjUgMTEgMTcuNSAxNC4zQzE3LjUgMTUuNSAxNy4yIDE2LjYgMTYuNSAxNy42QzE1LjkgMTYuOCAxNS4yIDE2LjIgMTQuMyAxNS43QzE0LjggMTUuMSAxNS4xIDE0LjIgMTUuMSAxMy40Wk0yMSA5LjFDMjEgOC42IDIxLjQgOC4xIDIyIDguMUgyNS41QzI2IDguMSAyNi41IDguNSAyNi41IDkuMUMyNi41IDkuNiAyNi4xIDEwLjEgMjUuNSAxMC4xSDIyQzIxLjQgMTAuMSAyMSA5LjYgMjEgOS4xWk0yMSAxMi41QzIxIDEyIDIxLjQgMTEuNSAyMiAxMS41SDI1LjVDMjYgMTEuNSAyNi41IDExLjkgMjYuNSAxMi41QzI2LjUgMTMgMjYuMSAxMy41IDI1LjUgMTMuNUgyMkMyMS40IDEzLjUgMjEgMTMuMSAyMSAxMi41Wk0yMSAxNkMyMSAxNS41IDIxLjQgMTUgMjIgMTVIMjUuNUMyNiAxNSAyNi41IDE1LjQgMjYuNSAxNkMyNi41IDE2LjUgMjYuMSAxNyAyNS41IDE3SDIyQzIxLjQgMTcgMjEgMTYuNiAyMSAxNlpNMjUuNSAyMC41SDIyQzIxLjUgMjAuNSAyMSAyMC4xIDIxIDE5LjVDMjEgMTguOSAyMS40IDE4LjUgMjIgMTguNUgyNS41QzI2IDE4LjUgMjYuNSAxOC45IDI2LjUgMTkuNUMyNi41IDIwLjEgMjYuMSAyMC41IDI1LjUgMjAuNVoiIGZpbGw9IiNGRjM3NUUiLz4KPC9zdmc+Cg==\"/>\r\n    </div>\r\n\r\n    <div class=\"flex-grow-1 d-flex flex-column flex-sm-row align-items-sm-center gap-2\">\r\n      <div class=\"flex-grow-1\">\r\n        <!-- title-->\r\n        <h1 class=\"fs-20 fs-md-16 fw-bold fc-black header-title m-0\">{{ formTitle }}\r\n          <ds-icon\r\n            icon=\"info\" class=\"fs-22 fc-dark-gray cursor-pointer\" *ngIf=\"serviceBrief.length\"\r\n            (click)=\"openFaq()\"></ds-icon>\r\n        </h1>\r\n        <div\r\n          class=\"header-user d-flex align-items-sm-center gap-2 mt-sm-1\"\r\n          *ngIf=\"form?.header?.status?.['key'] !== 'NEW' || isLoading\">\r\n          <ds-avatar\r\n            *ngIf=\"!isLoading\" image=\"{{form?.header?.requesterPhoto}}\" size=\"xx-small\"\r\n            class=\"d-inline-flex cursor-pointer\" (click)=\"showUserInfo()\"></ds-avatar>\r\n          <span\r\n            class=\"fs-12 text-truncate d-sm-block cursor-pointer\" (click)=\"showUserInfo()\"\r\n            [ngClass]=\"{'loading-bg loading-width': isLoading}\">{{ (form?.header?.requesterName) }}</span>\r\n          <mat-divider class=\"divider circle mx-2 d-none d-sm-block\"></mat-divider>\r\n          <span class=\"fs-12\" [ngClass]=\"{'loading-bg loading-width': isLoading}\">{{ form?.header?.formId }}</span>\r\n          <mat-divider *ngIf=\"creationDate\" class=\"divider circle mx-2 d-none d-sm-block\"></mat-divider>\r\n          <span *ngIf=\"creationDate\" class=\"fs-14\" [ngClass]=\"{'loading-bg loading-width': isLoading}\">{{ creationDate }}</span>\r\n        </div>\r\n      </div>\r\n      <!-- header-actions-->\r\n      <div\r\n        class=\"header-actions d-flex flex-row flex-sm-column justify-content-between justify-content-sm-center gap-2 mt-2 mt-sm-0\"\r\n        *ngIf=\"!(form?.header?.status?.['key'] === 'NEW')\">\r\n        <ds-status\r\n          *ngIf=\"form?.header?.status?.['key'] !== 'NEW' && !isLoading\"\r\n          status=\"{{statusClass(form?.header?.status?.['key'])}}\" class=\"header-status\">{{ form?.header?.status?.['value'] }}\r\n        </ds-status>\r\n\r\n        <div class=\"d-flex align-items-center justify-content-end gap-2\">\r\n          <!-- feedback-->\r\n<!--            *ngIf=\"form?.inboxItem && (form?.inboxItem?.canRequestFeedback ==='true'|| form?.inboxItem?.hasFeedback==='true') && !isLoading\"-->\r\n        <!--  <ds-button\r\n            square icon size=\"small\" (click)=\"feedback()\">\r\n            <ds-icon\r\n              icon=\"chat-o\" class=\"fs-20 fs-md-17 fc-coral\"\r\n              [ngClass]=\"{'fc-green':feedBackIcon === 'feedbackResponded' , 'fc-red': feedBackIcon === 'respondToFeedback' , 'fc-yellow': feedBackIcon === 'waitingFeedback'}\">\r\n            </ds-icon>\r\n          </ds-button>-->\r\n          <ds-button\r\n            *ngIf=\"form?.commentsDrop?.length > 0 && !isLoading\" square icon size=\"small\"\r\n            (click)=\"onCommentsFormClick()\" class=\"has-comments\">\r\n            <ds-icon icon=\"clock\" class=\"fc-coral fs-20 fs-md-17\"></ds-icon>\r\n          </ds-button>\r\n          <ng-container *ngIf=\"showApprovalHistory\">\r\n            <ds-button\r\n              color=\"white\" shape=\"text\" square size=\"small\" [satPopoverAnchor]=\"workflow\"\r\n              #workflowAnchor=\"satPopoverAnchor\" (click)=\"workflowAnchor.popover.open()\">\r\n              <slot name=\"prefix\">\r\n                <ds-icon icon=\"workflow\" class=\"fs-24\"></ds-icon>\r\n              </slot>\r\n            </ds-button>\r\n\r\n            <sat-popover\r\n              #workflow [anchor]=\"workflowAnchor\" [hasBackdrop]=\"true\" verticalAlign=\"below\"\r\n              horizontalAlign=\"end\">\r\n              <div class=\"default-popover p-3\" style=\"min-width: 330px;\">\r\n                <ds-approvals *ngIf=\"approvalHistory\" class=\"popover-approvals\" approvalsData=\"{{approvals}}\">\r\n                </ds-approvals>\r\n              </div>\r\n            </sat-popover>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n  </header>\r\n</ng-container>\r\n<header\r\n  class=\"mb-4 mt-4 d-flex align-items-center justify-content-between align-items-end gap-2\"\r\n  *ngIf=\"(form?.header?.status?.['key'] === 'NEW')\">\r\n  <section>\r\n    <h6 class=\"fs-14 fs-md-12 fw-normal fc-dark-gray mb-0\">\r\n      {{ i18n.translate('Hello') }}\r\n      {{ (form?.header?.requesterName) }}, {{ i18n.translate('welcomeBack') }}!\r\n    </h6>\r\n    <h1 class=\"fs-26 fs-md-20 fw-bold fc-black d-flex align-items-center gap-2 mb-1\">\r\n      {{ formTitle }}\r\n      <ds-icon icon=\"info\" class=\"fs-22 fc-dark-gray cursor-pointer\" *ngIf=\"serviceBrief.length\" (click)=\"openFaq()\">\r\n      </ds-icon>\r\n    </h1>\r\n  </section>\r\n\r\n</header>\r\n", styles: [":host ::ng-deep .filter-section .select-form-field{--input-bg: var(--white);--input-border: var(--white);--placeholder-fc: var(--black);--input-width: 85px;--input-fs: .75rem;--placeholder-fs: .75rem;--label-fs: .75rem;--label-fw: var(--font-regular);--input-height: var(--default-size-sm);font-size:var(--label-fs);box-shadow:var(--box-shadow)}:host ::ng-deep ds-button::part(base){--default-size-sm: 30px;--btn-radius: 3px}@media (max-width: 576px){:host ::ng-deep ds-button::part(base){--default-size-sm: 25px}}:host ::ng-deep .loading-width{min-width:100px;width:40px;flex-grow:1}:host ::ng-deep ds-avatar::part(base){--default-size: 20px}:host ::ng-deep .service-header{--service-header-icon-size: var(--default-size-lg);--header-border-color: var(--coral);display:flex;align-items:flex-start;border-top:5px solid var(--header-border-color);box-shadow:0 7px 10px rgba(var(--rgb-black),3%)}@media (max-width: 576px){:host ::ng-deep .service-header{border-radius:3px 3px 0 0}}:host ::ng-deep .service-header.loading{--header-border-color: var(--off-white)}:host ::ng-deep .service-header.warning{--header-border-color: var(--yellow)}:host ::ng-deep .service-header.success{--header-border-color: var(--green)}:host ::ng-deep .service-header.danger{--header-border-color: var(--red)}@media (max-width: 576px){:host ::ng-deep .service-header{--service-header-icon-size: var(--default-size-sm)}}:host ::ng-deep .service-header .service-header-icon{min-width:var(--service-header-icon-size);width:var(--service-header-icon-size);height:var(--service-header-icon-size);display:inline-flex;align-items:center;justify-content:center;padding:.75rem;border-radius:6px 6px 6px 0;background-color:rgba(var(--rgb-coral),.1)}@media (max-width: 576px){:host ::ng-deep .service-header .service-header-icon{padding:.5rem}}:host ::ng-deep .service-header .header-title{text-align:start}:host ::ng-deep .service-header .divider.circle{min-width:5px;width:5px;min-height:5px;height:5px;border-radius:50%;background-color:var(--dark-gray)}:host ::ng-deep .service-header .header-actions{align-items:flex-end;justify-content:flex-end}:host ::ng-deep .service-header .header-actions .has-comments{position:relative}:host ::ng-deep .service-header .header-actions .has-comments:before{content:\"\";min-width:8px;height:8px;border-radius:50%;background-color:var(--coral);position:absolute;top:-3px;right:-3px;z-index:1}[dir=rtl] :host ::ng-deep .service-header .header-actions .has-comments:before{right:auto;left:-3px}:host ::ng-deep .service-header .header-actions ds-button::part(base){--btn-color: var(--coral);--btn-bg-color: var(--light-gray);--btn-border-color: var(--light-gray)}:host ::ng-deep .service-header .header-user{color:var(--dark-gray)}:host ::ng-deep .history-button::part(base){background-color:var(--white);--btn-height: var(--default-size-sm);--btn-shadow: 0 7px 10px rgba(var(--rgb-black), 3%)}@media (max-width: 576px){:host ::ng-deep .history-button::part(base){--btn-height: 35px;--btn-width: 35px}}@media (max-width: 576px){:host ::ng-deep .history-button::part(label){display:none}}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SatPopoverModule }, { kind: "component", type: i1$3.SatPopoverComponent, selector: "sat-popover", inputs: ["anchor", "horizontalAlign", "xAlign", "verticalAlign", "yAlign", "forceAlignment", "lockAlignment", "autoFocus", "restoreFocus", "scrollStrategy", "hasBackdrop", "interactiveClose", "openTransition", "closeTransition", "openAnimationStartAtScale", "closeAnimationEndAtScale", "backdropClass", "panelClass"], outputs: ["opened", "closed", "afterOpen", "afterClose", "backdropClicked", "overlayKeydown"] }, { kind: "directive", type: i1$3.SatPopoverAnchorDirective, selector: "[satPopoverAnchor]", inputs: ["satPopoverAnchor"], exportAs: ["satPopoverAnchor"] }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ServiceHeaderComponent, decorators: [{
             type: Component,
@@ -5433,7 +5497,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                         MatMenuItem
                     ], schemas: [CUSTOM_ELEMENTS_SCHEMA], providers: [FeedBackService,
                         { provide: MAT_DIALOG_DATA, useValue: {} },
-                    ], template: "<ng-container *ngIf=\"!(form?.header?.status?.['key'] === 'NEW')\">\r\n  <div class=\"d-flex align-items-center justify-content-end gap-2 my-2\" *ngIf=\"!(form?.header?.status?.['key'] === 'NEW')\">\r\n\r\n    <!-- flag-->\r\n    <!--<ds-button\r\n      *ngIf=\"form?.inboxItem && !form.sections[form.sections.length -1].header.readOnly && !isLoading\"\r\n      square\r\n      icon\r\n      size=\"small\"\r\n      [matMenuTriggerFor]=\"menu\"\r\n      class=\"icon-btn-shadow\">\r\n      <ds-icon\r\n        [ngClass]=\"{'fc-purple' : (flagPriority === '0' ||  flagPriority === null),'fc-yellow' : flagPriority === '1','fc-green' : flagPriority === '2','fc-coral' : flagPriority === '3'}\"\r\n        icon=\"flag-o\" class=\"fs-20 fs-md-17 fc-purple\">\r\n      </ds-icon>\r\n    </ds-button>\r\n    <mat-menu #menu=\"matMenu\" panelClass=\"action-menu\">\r\n      <button mat-menu-item (click)=\"setFlagPriority('0')\">\r\n        <ds-icon icon=\"flag-o\" class=\"fc-purple fs-20 fs-md-17\"></ds-icon>\r\n      </button>\r\n      <button mat-menu-item (click)=\"setFlagPriority('1')\">\r\n        <ds-icon icon=\"flag-o\" class=\"fc-yellow fs-20 fs-md-17\"></ds-icon>\r\n      </button>\r\n      <button mat-menu-item (click)=\"setFlagPriority('2')\">\r\n        <ds-icon icon=\"flag-o\" class=\"fc-green fs-20 fs-md-17\"></ds-icon>\r\n      </button>\r\n      <button mat-menu-item (click)=\"setFlagPriority('3')\">\r\n        <ds-icon icon=\"flag-o\" class=\"fc-coral fs-20 fs-md-17\"></ds-icon>\r\n      </button>\r\n    </mat-menu>-->\r\n\r\n    <!-- print-->\r\n    <ng-content></ng-content>\r\n  </div>\r\n\r\n  <header class=\"service-header bc-white p-3 p-sm-4 py-4 gap-3 {{statusClass(form?.header?.status?.['key'])}}\">\r\n\r\n    <div class=\"service-header-icon\">\r\n      <img\r\n        alt=\"\"\r\n        src=\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMjkiIHZpZXdCb3g9IjAgMCAzMCAyOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTI1LjEgMEg0LjlDMi4yIDAgMCAyLjIgMCA0LjlWMjguNkgyNS4xQzI3LjggMjguNiAzMCAyNi40IDMwIDIzLjdWNC45QzMwIDIuMiAyNy44IDAgMjUuMSAwWk0yIDQuOUMyIDMuMyAzLjMgMiA0LjkgMkgyNS4xQzI2LjcgMiAyOCAzLjMgMjggNC45VjIzLjdDMjggMjUuMyAyNi43IDI2LjYgMjUuMSAyNi42SDJWNC45Wk0xMS41IDYuM0M3LjEgNi4zIDMuNSA5LjkgMy41IDE0LjNDMy41IDE4LjcgNy4xIDIyLjMgMTEuNSAyMi4zQzE1LjkgMjIuMyAxOS41IDE4LjcgMTkuNSAxNC4zQzE5LjUgOS45IDE1LjkgNi4zIDExLjUgNi4zWk0xNS4xIDE5QzE0LjEgMTkuOCAxMi44IDIwLjIgMTEuNSAyMC4yQzEwLjIgMjAuMiA4LjkgMTkuOCA3LjkgMTlDOC43IDE3LjcgMTAgMTcgMTEuNSAxN0MxMyAxNyAxNC40IDE3LjggMTUuMSAxOVpNMTMuMSAxMy40QzEzLjEgMTQuMyAxMi40IDE1IDExLjUgMTVDMTAuNiAxNSA5LjkgMTQuMyA5LjkgMTMuNEM5LjkgMTIuNSAxMC42IDExLjggMTEuNSAxMS44QzEyLjQgMTEuOCAxMy4xIDEyLjUgMTMuMSAxMy40Wk0xNS4xIDEzLjRDMTUuMSAxMS40IDEzLjUgOS44IDExLjUgOS44QzkuNSA5LjggNy45IDExLjQgNy45IDEzLjRDNy45IDE0LjIgOC4yIDE1IDguNyAxNS43QzcuOCAxNi4xIDcuMSAxNi44IDYuNSAxNy42QzUuOCAxNi42IDUuNSAxNS41IDUuNSAxNC4zQzUuNSAxMSA4LjIgOC4zIDExLjUgOC4zQzE0LjggOC4zIDE3LjUgMTEgMTcuNSAxNC4zQzE3LjUgMTUuNSAxNy4yIDE2LjYgMTYuNSAxNy42QzE1LjkgMTYuOCAxNS4yIDE2LjIgMTQuMyAxNS43QzE0LjggMTUuMSAxNS4xIDE0LjIgMTUuMSAxMy40Wk0yMSA5LjFDMjEgOC42IDIxLjQgOC4xIDIyIDguMUgyNS41QzI2IDguMSAyNi41IDguNSAyNi41IDkuMUMyNi41IDkuNiAyNi4xIDEwLjEgMjUuNSAxMC4xSDIyQzIxLjQgMTAuMSAyMSA5LjYgMjEgOS4xWk0yMSAxMi41QzIxIDEyIDIxLjQgMTEuNSAyMiAxMS41SDI1LjVDMjYgMTEuNSAyNi41IDExLjkgMjYuNSAxMi41QzI2LjUgMTMgMjYuMSAxMy41IDI1LjUgMTMuNUgyMkMyMS40IDEzLjUgMjEgMTMuMSAyMSAxMi41Wk0yMSAxNkMyMSAxNS41IDIxLjQgMTUgMjIgMTVIMjUuNUMyNiAxNSAyNi41IDE1LjQgMjYuNSAxNkMyNi41IDE2LjUgMjYuMSAxNyAyNS41IDE3SDIyQzIxLjQgMTcgMjEgMTYuNiAyMSAxNlpNMjUuNSAyMC41SDIyQzIxLjUgMjAuNSAyMSAyMC4xIDIxIDE5LjVDMjEgMTguOSAyMS40IDE4LjUgMjIgMTguNUgyNS41QzI2IDE4LjUgMjYuNSAxOC45IDI2LjUgMTkuNUMyNi41IDIwLjEgMjYuMSAyMC41IDI1LjUgMjAuNVoiIGZpbGw9IiNGRjM3NUUiLz4KPC9zdmc+Cg==\"/>\r\n    </div>\r\n\r\n    <div class=\"flex-grow-1 d-flex flex-column flex-sm-row align-items-sm-center gap-2\">\r\n      <div class=\"flex-grow-1\">\r\n        <!-- title-->\r\n        <h1 class=\"fs-20 fs-md-16 fw-bold fc-black header-title m-0\">{{ formTitle }}\r\n          <ds-icon\r\n            icon=\"info\" class=\"fs-22 fc-dark-gray cursor-pointer\" *ngIf=\"serviceBrief.length\"\r\n            (click)=\"openFaq()\"></ds-icon>\r\n        </h1>\r\n        <div\r\n          class=\"header-user d-flex align-items-sm-center gap-2 mt-sm-1\"\r\n          *ngIf=\"form?.header?.status?.['key'] !== 'NEW' || isLoading\">\r\n          <ds-avatar\r\n            *ngIf=\"!isLoading\" image=\"{{form?.header?.requesterPhoto}}\" size=\"xx-small\"\r\n            class=\"d-inline-flex cursor-pointer\" (click)=\"showUserInfo()\"></ds-avatar>\r\n          <span\r\n            class=\"fs-12 text-truncate d-sm-block cursor-pointer\" (click)=\"showUserInfo()\"\r\n            [ngClass]=\"{'loading-bg loading-width': isLoading}\">{{ (form?.header?.requesterName) }}</span>\r\n          <mat-divider class=\"divider circle mx-2 d-none d-sm-block\"></mat-divider>\r\n          <span class=\"fs-12\" [ngClass]=\"{'loading-bg loading-width': isLoading}\">{{ form?.header?.formId }}</span>\r\n          <mat-divider *ngIf=\"creationDate\" class=\"divider circle mx-2 d-none d-sm-block\"></mat-divider>\r\n          <span *ngIf=\"creationDate\" class=\"fs-14\" [ngClass]=\"{'loading-bg loading-width': isLoading}\">{{ creationDate }}</span>\r\n        </div>\r\n      </div>\r\n      <!-- header-actions-->\r\n      <div\r\n        class=\"header-actions d-flex flex-row flex-sm-column justify-content-between justify-content-sm-center gap-2 mt-2 mt-sm-0\"\r\n        *ngIf=\"!(form?.header?.status?.['key'] === 'NEW')\">\r\n        <ds-status\r\n          *ngIf=\"form?.header?.status?.['key'] !== 'NEW' && !isLoading\"\r\n          status=\"{{statusClass(form?.header?.status?.['key'])}}\" class=\"header-status\">{{ form?.header?.status?.['value'] }}\r\n        </ds-status>\r\n\r\n        <div class=\"d-flex align-items-center justify-content-end gap-2\">\r\n          <!-- feedback-->\r\n<!--            *ngIf=\"form?.inboxItem && (form?.inboxItem?.canRequestFeedback ==='true'|| form?.inboxItem?.hasFeedback==='true') && !isLoading\"-->\r\n        <!--  <ds-button\r\n            square icon size=\"small\" (click)=\"feedback()\">\r\n            <ds-icon\r\n              icon=\"chat-o\" class=\"fs-20 fs-md-17 fc-coral\"\r\n              [ngClass]=\"{'fc-green':feedBackIcon === 'feedbackResponded' , 'fc-red': feedBackIcon === 'respondToFeedback' , 'fc-yellow': feedBackIcon === 'waitingFeedback'}\">\r\n            </ds-icon>\r\n          </ds-button>-->\r\n          <ds-button\r\n            *ngIf=\"form?.commentsDrop?.length > 0 && !isLoading\" square icon size=\"small\"\r\n            (click)=\"onCommentsFormClick()\" class=\"has-comments\">\r\n            <ds-icon icon=\"clock\" class=\"fc-coral fs-20 fs-md-17\"></ds-icon>\r\n          </ds-button>\r\n          <ng-container *ngIf=\"showApprovalHistory\">\r\n            <ds-button\r\n              color=\"white\" shape=\"text\" square size=\"small\" [satPopoverAnchor]=\"workflow\"\r\n              #workflowAnchor=\"satPopoverAnchor\" (click)=\"workflowAnchor.popover.open()\">\r\n              <slot name=\"prefix\">\r\n                <ds-icon icon=\"workflow\" class=\"fs-24\"></ds-icon>\r\n              </slot>\r\n            </ds-button>\r\n\r\n            <sat-popover\r\n              #workflow [anchor]=\"workflowAnchor\" [hasBackdrop]=\"true\" verticalAlign=\"below\"\r\n              horizontalAlign=\"end\">\r\n              <div class=\"default-popover p-3\" style=\"min-width: 330px;\">\r\n                <ds-approvals *ngIf=\"approvalHistory\" class=\"popover-approvals\" approvalsData=\"{{approvals}}\">\r\n                </ds-approvals>\r\n              </div>\r\n            </sat-popover>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n  </header>\r\n</ng-container>\r\n<header\r\n  class=\"mb-4 mt-4 d-flex align-items-center justify-content-between align-items-end gap-2\"\r\n  *ngIf=\"(form?.header?.status?.['key'] === 'NEW')\">\r\n  <section>\r\n    <h6 class=\"fs-14 fs-md-12 fw-normal fc-dark-gray mb-0\">\r\n      {{ i18n.translate('Hello') }}\r\n      {{ (form?.header?.requesterName) }}, {{ i18n.translate('welcomeBack') }}!\r\n    </h6>\r\n    <h1 class=\"fs-26 fs-md-20 fw-bold fc-black d-flex align-items-center gap-2 mb-1\">\r\n      {{ formTitle }}\r\n      <ds-icon icon=\"info\" class=\"fs-22 fc-dark-gray cursor-pointer\" *ngIf=\"serviceBrief.length\" (click)=\"openFaq()\">\r\n      </ds-icon>\r\n    </h1>\r\n  </section>\r\n\r\n</header>\r\n", styles: [":host ::ng-deep .filter-section .select-form-field{--input-bg: var(--white);--input-border: var(--white);--placeholder-fc: var(--black);--input-width: 85px;--input-fs: .75rem;--placeholder-fs: .75rem;--label-fs: .75rem;--label-fw: var(--font-regular);--input-height: var(--default-size-sm);font-size:var(--label-fs);box-shadow:var(--box-shadow)}:host ::ng-deep ds-button::part(base){--default-size-sm: 30px;--btn-radius: 3px}@media (max-width: 576px){:host ::ng-deep ds-button::part(base){--default-size-sm: 25px}}:host ::ng-deep .loading-width{min-width:100px;width:40px;flex-grow:1}:host ::ng-deep ds-avatar::part(base){--default-size: 20px}:host ::ng-deep .service-header{--service-header-icon-size: var(--default-size-lg);--header-border-color: var(--coral);display:flex;align-items:flex-start;border-top:5px solid var(--header-border-color);box-shadow:0 7px 10px rgba(var(--rgb-black),3%)}@media (max-width: 576px){:host ::ng-deep .service-header{border-radius:3px 3px 0 0}}:host ::ng-deep .service-header.loading{--header-border-color: var(--off-white)}:host ::ng-deep .service-header.warning{--header-border-color: var(--yellow)}:host ::ng-deep .service-header.success{--header-border-color: var(--green)}:host ::ng-deep .service-header.danger{--header-border-color: var(--red)}@media (max-width: 576px){:host ::ng-deep .service-header{--service-header-icon-size: var(--default-size-sm)}}:host ::ng-deep .service-header .service-header-icon{min-width:var(--service-header-icon-size);width:var(--service-header-icon-size);height:var(--service-header-icon-size);display:inline-flex;align-items:center;justify-content:center;padding:.75rem;border-radius:6px 6px 6px 0;background-color:rgba(var(--rgb-coral),.1)}@media (max-width: 576px){:host ::ng-deep .service-header .service-header-icon{padding:.5rem}}:host ::ng-deep .service-header .header-title{text-align:start}:host ::ng-deep .service-header .divider.circle{min-width:5px;width:5px;min-height:5px;height:5px;border-radius:50%;background-color:var(--dark-gray)}:host ::ng-deep .service-header .header-actions{align-items:flex-end;justify-content:flex-end}:host ::ng-deep .service-header .header-actions .has-comments{position:relative}:host ::ng-deep .service-header .header-actions .has-comments:before{content:\"\";min-width:8px;height:8px;border-radius:50%;background-color:var(--coral);position:absolute;top:-3px;right:-3px;z-index:1}[dir=rtl] :host ::ng-deep .service-header .header-actions .has-comments:before{right:auto;left:-3px}:host ::ng-deep .service-header .header-actions ds-button::part(base){--btn-color: var(--coral);--btn-bg-color: var(--light-gray);--btn-border-color: var(--light-gray)}:host ::ng-deep .service-header .header-user{color:var(--dark-gray)}:host ::ng-deep .history-button::part(base){background-color:var(--white);--btn-height: var(--default-size-sm);--btn-shadow: 0 7px 10px rgba(var(--rgb-black), 3%)}@media (max-width: 576px){:host ::ng-deep .history-button::part(base){--btn-height: 35px;--btn-width: 35px}}@media (max-width: 576px){:host ::ng-deep .history-button::part(label){display:none}}\n"] }]
+                    ], template: "<ng-container *ngIf=\"!(form?.header?.status?.['key'] === 'NEW')\">\r\n  <div class=\"d-flex align-items-center justify-content-end gap-2 my-2\" *ngIf=\"!(form?.header?.status?.['key'] === 'NEW')\">\r\n\r\n    <!-- flag-->\r\n    <ds-button\r\n      *ngIf=\"form?.inboxItem && !form.sections[form.sections.length -1].header.readOnly && !isLoading\"\r\n      square\r\n      icon\r\n      size=\"small\"\r\n      [matMenuTriggerFor]=\"menu\"\r\n      class=\"icon-btn-shadow\">\r\n      <ds-icon\r\n        [ngClass]=\"{'fc-purple' : (flagPriority === '0' ||  flagPriority === null),'fc-yellow' : flagPriority === '1','fc-green' : flagPriority === '2','fc-coral' : flagPriority === '3'}\"\r\n        icon=\"flag-o\" class=\"fs-20 fs-md-17 fc-purple\">\r\n      </ds-icon>\r\n    </ds-button>\r\n    <mat-menu #menu=\"matMenu\" panelClass=\"action-menu\">\r\n      <button mat-menu-item (click)=\"setFlagPriority('0')\">\r\n        <ds-icon icon=\"flag-o\" class=\"fc-purple fs-20 fs-md-17\"></ds-icon>\r\n      </button>\r\n      <button mat-menu-item (click)=\"setFlagPriority('1')\">\r\n        <ds-icon icon=\"flag-o\" class=\"fc-yellow fs-20 fs-md-17\"></ds-icon>\r\n      </button>\r\n      <button mat-menu-item (click)=\"setFlagPriority('2')\">\r\n        <ds-icon icon=\"flag-o\" class=\"fc-green fs-20 fs-md-17\"></ds-icon>\r\n      </button>\r\n      <button mat-menu-item (click)=\"setFlagPriority('3')\">\r\n        <ds-icon icon=\"flag-o\" class=\"fc-coral fs-20 fs-md-17\"></ds-icon>\r\n      </button>\r\n    </mat-menu>\r\n\r\n    <!-- print-->\r\n    <ng-content></ng-content>\r\n  </div>\r\n\r\n  <header class=\"service-header bc-white p-3 p-sm-4 py-4 gap-3 {{statusClass(form?.header?.status?.['key'])}}\">\r\n\r\n    <div class=\"service-header-icon\">\r\n      <img\r\n        alt=\"\"\r\n        src=\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMjkiIHZpZXdCb3g9IjAgMCAzMCAyOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTI1LjEgMEg0LjlDMi4yIDAgMCAyLjIgMCA0LjlWMjguNkgyNS4xQzI3LjggMjguNiAzMCAyNi40IDMwIDIzLjdWNC45QzMwIDIuMiAyNy44IDAgMjUuMSAwWk0yIDQuOUMyIDMuMyAzLjMgMiA0LjkgMkgyNS4xQzI2LjcgMiAyOCAzLjMgMjggNC45VjIzLjdDMjggMjUuMyAyNi43IDI2LjYgMjUuMSAyNi42SDJWNC45Wk0xMS41IDYuM0M3LjEgNi4zIDMuNSA5LjkgMy41IDE0LjNDMy41IDE4LjcgNy4xIDIyLjMgMTEuNSAyMi4zQzE1LjkgMjIuMyAxOS41IDE4LjcgMTkuNSAxNC4zQzE5LjUgOS45IDE1LjkgNi4zIDExLjUgNi4zWk0xNS4xIDE5QzE0LjEgMTkuOCAxMi44IDIwLjIgMTEuNSAyMC4yQzEwLjIgMjAuMiA4LjkgMTkuOCA3LjkgMTlDOC43IDE3LjcgMTAgMTcgMTEuNSAxN0MxMyAxNyAxNC40IDE3LjggMTUuMSAxOVpNMTMuMSAxMy40QzEzLjEgMTQuMyAxMi40IDE1IDExLjUgMTVDMTAuNiAxNSA5LjkgMTQuMyA5LjkgMTMuNEM5LjkgMTIuNSAxMC42IDExLjggMTEuNSAxMS44QzEyLjQgMTEuOCAxMy4xIDEyLjUgMTMuMSAxMy40Wk0xNS4xIDEzLjRDMTUuMSAxMS40IDEzLjUgOS44IDExLjUgOS44QzkuNSA5LjggNy45IDExLjQgNy45IDEzLjRDNy45IDE0LjIgOC4yIDE1IDguNyAxNS43QzcuOCAxNi4xIDcuMSAxNi44IDYuNSAxNy42QzUuOCAxNi42IDUuNSAxNS41IDUuNSAxNC4zQzUuNSAxMSA4LjIgOC4zIDExLjUgOC4zQzE0LjggOC4zIDE3LjUgMTEgMTcuNSAxNC4zQzE3LjUgMTUuNSAxNy4yIDE2LjYgMTYuNSAxNy42QzE1LjkgMTYuOCAxNS4yIDE2LjIgMTQuMyAxNS43QzE0LjggMTUuMSAxNS4xIDE0LjIgMTUuMSAxMy40Wk0yMSA5LjFDMjEgOC42IDIxLjQgOC4xIDIyIDguMUgyNS41QzI2IDguMSAyNi41IDguNSAyNi41IDkuMUMyNi41IDkuNiAyNi4xIDEwLjEgMjUuNSAxMC4xSDIyQzIxLjQgMTAuMSAyMSA5LjYgMjEgOS4xWk0yMSAxMi41QzIxIDEyIDIxLjQgMTEuNSAyMiAxMS41SDI1LjVDMjYgMTEuNSAyNi41IDExLjkgMjYuNSAxMi41QzI2LjUgMTMgMjYuMSAxMy41IDI1LjUgMTMuNUgyMkMyMS40IDEzLjUgMjEgMTMuMSAyMSAxMi41Wk0yMSAxNkMyMSAxNS41IDIxLjQgMTUgMjIgMTVIMjUuNUMyNiAxNSAyNi41IDE1LjQgMjYuNSAxNkMyNi41IDE2LjUgMjYuMSAxNyAyNS41IDE3SDIyQzIxLjQgMTcgMjEgMTYuNiAyMSAxNlpNMjUuNSAyMC41SDIyQzIxLjUgMjAuNSAyMSAyMC4xIDIxIDE5LjVDMjEgMTguOSAyMS40IDE4LjUgMjIgMTguNUgyNS41QzI2IDE4LjUgMjYuNSAxOC45IDI2LjUgMTkuNUMyNi41IDIwLjEgMjYuMSAyMC41IDI1LjUgMjAuNVoiIGZpbGw9IiNGRjM3NUUiLz4KPC9zdmc+Cg==\"/>\r\n    </div>\r\n\r\n    <div class=\"flex-grow-1 d-flex flex-column flex-sm-row align-items-sm-center gap-2\">\r\n      <div class=\"flex-grow-1\">\r\n        <!-- title-->\r\n        <h1 class=\"fs-20 fs-md-16 fw-bold fc-black header-title m-0\">{{ formTitle }}\r\n          <ds-icon\r\n            icon=\"info\" class=\"fs-22 fc-dark-gray cursor-pointer\" *ngIf=\"serviceBrief.length\"\r\n            (click)=\"openFaq()\"></ds-icon>\r\n        </h1>\r\n        <div\r\n          class=\"header-user d-flex align-items-sm-center gap-2 mt-sm-1\"\r\n          *ngIf=\"form?.header?.status?.['key'] !== 'NEW' || isLoading\">\r\n          <ds-avatar\r\n            *ngIf=\"!isLoading\" image=\"{{form?.header?.requesterPhoto}}\" size=\"xx-small\"\r\n            class=\"d-inline-flex cursor-pointer\" (click)=\"showUserInfo()\"></ds-avatar>\r\n          <span\r\n            class=\"fs-12 text-truncate d-sm-block cursor-pointer\" (click)=\"showUserInfo()\"\r\n            [ngClass]=\"{'loading-bg loading-width': isLoading}\">{{ (form?.header?.requesterName) }}</span>\r\n          <mat-divider class=\"divider circle mx-2 d-none d-sm-block\"></mat-divider>\r\n          <span class=\"fs-12\" [ngClass]=\"{'loading-bg loading-width': isLoading}\">{{ form?.header?.formId }}</span>\r\n          <mat-divider *ngIf=\"creationDate\" class=\"divider circle mx-2 d-none d-sm-block\"></mat-divider>\r\n          <span *ngIf=\"creationDate\" class=\"fs-14\" [ngClass]=\"{'loading-bg loading-width': isLoading}\">{{ creationDate }}</span>\r\n        </div>\r\n      </div>\r\n      <!-- header-actions-->\r\n      <div\r\n        class=\"header-actions d-flex flex-row flex-sm-column justify-content-between justify-content-sm-center gap-2 mt-2 mt-sm-0\"\r\n        *ngIf=\"!(form?.header?.status?.['key'] === 'NEW')\">\r\n        <ds-status\r\n          *ngIf=\"form?.header?.status?.['key'] !== 'NEW' && !isLoading\"\r\n          status=\"{{statusClass(form?.header?.status?.['key'])}}\" class=\"header-status\">{{ form?.header?.status?.['value'] }}\r\n        </ds-status>\r\n\r\n        <div class=\"d-flex align-items-center justify-content-end gap-2\">\r\n          <!-- feedback-->\r\n<!--            *ngIf=\"form?.inboxItem && (form?.inboxItem?.canRequestFeedback ==='true'|| form?.inboxItem?.hasFeedback==='true') && !isLoading\"-->\r\n        <!--  <ds-button\r\n            square icon size=\"small\" (click)=\"feedback()\">\r\n            <ds-icon\r\n              icon=\"chat-o\" class=\"fs-20 fs-md-17 fc-coral\"\r\n              [ngClass]=\"{'fc-green':feedBackIcon === 'feedbackResponded' , 'fc-red': feedBackIcon === 'respondToFeedback' , 'fc-yellow': feedBackIcon === 'waitingFeedback'}\">\r\n            </ds-icon>\r\n          </ds-button>-->\r\n          <ds-button\r\n            *ngIf=\"form?.commentsDrop?.length > 0 && !isLoading\" square icon size=\"small\"\r\n            (click)=\"onCommentsFormClick()\" class=\"has-comments\">\r\n            <ds-icon icon=\"clock\" class=\"fc-coral fs-20 fs-md-17\"></ds-icon>\r\n          </ds-button>\r\n          <ng-container *ngIf=\"showApprovalHistory\">\r\n            <ds-button\r\n              color=\"white\" shape=\"text\" square size=\"small\" [satPopoverAnchor]=\"workflow\"\r\n              #workflowAnchor=\"satPopoverAnchor\" (click)=\"workflowAnchor.popover.open()\">\r\n              <slot name=\"prefix\">\r\n                <ds-icon icon=\"workflow\" class=\"fs-24\"></ds-icon>\r\n              </slot>\r\n            </ds-button>\r\n\r\n            <sat-popover\r\n              #workflow [anchor]=\"workflowAnchor\" [hasBackdrop]=\"true\" verticalAlign=\"below\"\r\n              horizontalAlign=\"end\">\r\n              <div class=\"default-popover p-3\" style=\"min-width: 330px;\">\r\n                <ds-approvals *ngIf=\"approvalHistory\" class=\"popover-approvals\" approvalsData=\"{{approvals}}\">\r\n                </ds-approvals>\r\n              </div>\r\n            </sat-popover>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n  </header>\r\n</ng-container>\r\n<header\r\n  class=\"mb-4 mt-4 d-flex align-items-center justify-content-between align-items-end gap-2\"\r\n  *ngIf=\"(form?.header?.status?.['key'] === 'NEW')\">\r\n  <section>\r\n    <h6 class=\"fs-14 fs-md-12 fw-normal fc-dark-gray mb-0\">\r\n      {{ i18n.translate('Hello') }}\r\n      {{ (form?.header?.requesterName) }}, {{ i18n.translate('welcomeBack') }}!\r\n    </h6>\r\n    <h1 class=\"fs-26 fs-md-20 fw-bold fc-black d-flex align-items-center gap-2 mb-1\">\r\n      {{ formTitle }}\r\n      <ds-icon icon=\"info\" class=\"fs-22 fc-dark-gray cursor-pointer\" *ngIf=\"serviceBrief.length\" (click)=\"openFaq()\">\r\n      </ds-icon>\r\n    </h1>\r\n  </section>\r\n\r\n</header>\r\n", styles: [":host ::ng-deep .filter-section .select-form-field{--input-bg: var(--white);--input-border: var(--white);--placeholder-fc: var(--black);--input-width: 85px;--input-fs: .75rem;--placeholder-fs: .75rem;--label-fs: .75rem;--label-fw: var(--font-regular);--input-height: var(--default-size-sm);font-size:var(--label-fs);box-shadow:var(--box-shadow)}:host ::ng-deep ds-button::part(base){--default-size-sm: 30px;--btn-radius: 3px}@media (max-width: 576px){:host ::ng-deep ds-button::part(base){--default-size-sm: 25px}}:host ::ng-deep .loading-width{min-width:100px;width:40px;flex-grow:1}:host ::ng-deep ds-avatar::part(base){--default-size: 20px}:host ::ng-deep .service-header{--service-header-icon-size: var(--default-size-lg);--header-border-color: var(--coral);display:flex;align-items:flex-start;border-top:5px solid var(--header-border-color);box-shadow:0 7px 10px rgba(var(--rgb-black),3%)}@media (max-width: 576px){:host ::ng-deep .service-header{border-radius:3px 3px 0 0}}:host ::ng-deep .service-header.loading{--header-border-color: var(--off-white)}:host ::ng-deep .service-header.warning{--header-border-color: var(--yellow)}:host ::ng-deep .service-header.success{--header-border-color: var(--green)}:host ::ng-deep .service-header.danger{--header-border-color: var(--red)}@media (max-width: 576px){:host ::ng-deep .service-header{--service-header-icon-size: var(--default-size-sm)}}:host ::ng-deep .service-header .service-header-icon{min-width:var(--service-header-icon-size);width:var(--service-header-icon-size);height:var(--service-header-icon-size);display:inline-flex;align-items:center;justify-content:center;padding:.75rem;border-radius:6px 6px 6px 0;background-color:rgba(var(--rgb-coral),.1)}@media (max-width: 576px){:host ::ng-deep .service-header .service-header-icon{padding:.5rem}}:host ::ng-deep .service-header .header-title{text-align:start}:host ::ng-deep .service-header .divider.circle{min-width:5px;width:5px;min-height:5px;height:5px;border-radius:50%;background-color:var(--dark-gray)}:host ::ng-deep .service-header .header-actions{align-items:flex-end;justify-content:flex-end}:host ::ng-deep .service-header .header-actions .has-comments{position:relative}:host ::ng-deep .service-header .header-actions .has-comments:before{content:\"\";min-width:8px;height:8px;border-radius:50%;background-color:var(--coral);position:absolute;top:-3px;right:-3px;z-index:1}[dir=rtl] :host ::ng-deep .service-header .header-actions .has-comments:before{right:auto;left:-3px}:host ::ng-deep .service-header .header-actions ds-button::part(base){--btn-color: var(--coral);--btn-bg-color: var(--light-gray);--btn-border-color: var(--light-gray)}:host ::ng-deep .service-header .header-user{color:var(--dark-gray)}:host ::ng-deep .history-button::part(base){background-color:var(--white);--btn-height: var(--default-size-sm);--btn-shadow: 0 7px 10px rgba(var(--rgb-black), 3%)}@media (max-width: 576px){:host ::ng-deep .history-button::part(base){--btn-height: 35px;--btn-width: 35px}}@media (max-width: 576px){:host ::ng-deep .history-button::part(label){display:none}}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: CoreI18nService }, { type: FeedBackService }, { type: i1$1.MatDialog }, { type: SidenavService }], propDecorators: { form: [{
                 type: Input
             }], showHistory: [{
@@ -5490,18 +5554,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;
@@ -5509,7 +5574,7 @@ class FormSectionComponent {
     sectionNumber;
     sectionStatusValue;
     sectionStatusKey;
-    receipient = {
+    recipient = {
         isShowing: false,
         profile: null
     };
@@ -5518,12 +5583,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);
@@ -5533,7 +5600,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,
@@ -5546,42 +5612,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,
@@ -5594,85 +5664,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
@@ -5707,8 +5725,8 @@ 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: "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: "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    <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,
@@ -5719,12 +5737,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                         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    <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
@@ -5734,10 +5750,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: [{
@@ -5891,7 +5903,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,
@@ -6219,7 +6231,7 @@ class SideNavComponent {
         this.router.navigate([url]);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SideNavComponent, deps: [{ token: SidenavService }, { token: i2$2.Router }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵ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 ɵ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,
@@ -6284,7 +6296,7 @@ class LayoutComponent {
         this.sidenav.close().then(r => { });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: LayoutComponent, deps: [{ token: DOCUMENT }, { token: i2$2.Router }, { token: SidenavService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵ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 ɵ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,
@@ -6318,43 +6330,128 @@ var loadFormHooks = {
     }
 };
 
+class ActionStateService {
+    actionStatesSubject = new BehaviorSubject({});
+    actionStates$ = this.actionStatesSubject.asObservable();
+    setActionValid(action, isValid) {
+        const currentState = this.actionStatesSubject.value;
+        currentState[action] = isValid;
+        this.actionStatesSubject.next(currentState);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ActionStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ActionStateService, providedIn: "any" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ActionStateService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: "any"
+                }]
+        }] });
+
+class ActionButtonsComponent {
+    i18n;
+    actionStateService;
+    lovOptions;
+    lovType;
+    actionStates;
+    constructor(i18n, actionStateService) {
+        this.i18n = i18n;
+        this.actionStateService = actionStateService;
+        this.actionStateService.actionStates$.subscribe(states => this.actionStates = states);
+    }
+    resetForm() {
+    }
+    onSubmit(action) {
+    }
+    validForm(action) {
+        return true;
+    }
+    buttonShape(item) {
+        if (item?.value === FORM_STATUS_REJECT || item?.value === FORM_STATUS_CANCEL || item?.value === FORM_STATUS_SEND_BACK) {
+            return 'outline';
+        }
+        return '';
+    }
+    buttonColor(item) {
+        if (item?.value === FORM_STATUS_REJECT || item?.value === FORM_STATUS_SEND_BACK) {
+            return 'red';
+        }
+        return '';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ActionButtonsComponent, deps: [{ token: CoreI18nService }, { token: ActionStateService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: ActionButtonsComponent, isStandalone: true, selector: "lib-action-buttons", inputs: { lovOptions: "lovOptions", lovType: "lovType" }, ngImport: i0, template: "<div class=\"mt-4\">\r\n  @if (lovType === 'button') {\r\n    <div class=\"d-flex align-items-center gap-3\">\r\n      <ds-button shape=\"text\" color=\"red\" (click)=\"resetForm()\">\r\n        <span class=\"fs-16 fw-medium\">{{ i18n.translate('reset') }}</span>\r\n      </ds-button>\r\n      <div class=\"d-flex flex-wrap align-items-center flex-grow-1 flex-row-reverse gap-3\">\r\n        @for (item of lovOptions; track $index) {\r\n          <ds-button\r\n            [ngClass]=\"{'disabled': !actionStates[item.value]}\"\r\n            shape=\"{{ buttonShape(item) }}\"\r\n            color=\"{{ buttonColor(item) }}\"\r\n            (click)=\"onSubmit(item?.value)\">\r\n            {{ item?.['description'] }}\r\n          </ds-button>\r\n        }\r\n      </div>\r\n    </div>\r\n  } @else {\r\n    <div class=\"d-flex flex-wrap align-items-center flex-grow-1 justify-content-end gap-3\">\r\n      <ds-button shape=\"text\" color=\"red\" (click)=\"resetForm()\">\r\n        <span class=\"fs-16 fw-medium\">{{ i18n.translate('reset') }}</span>\r\n      </ds-button>\r\n      <ds-button\r\n        [ngClass]=\"{'disabled': !validForm('SUBMIT')}\"\r\n        (click)=\"onSubmit('SUBMIT')\">\r\n        {{ i18n.translate('submit') }}\r\n      </ds-button>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ActionButtonsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-action-buttons', standalone: true, schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA], imports: [
+                        NgClass,
+                        InputComponent,
+                        NgIf,
+                        NgForOf
+                    ], template: "<div class=\"mt-4\">\r\n  @if (lovType === 'button') {\r\n    <div class=\"d-flex align-items-center gap-3\">\r\n      <ds-button shape=\"text\" color=\"red\" (click)=\"resetForm()\">\r\n        <span class=\"fs-16 fw-medium\">{{ i18n.translate('reset') }}</span>\r\n      </ds-button>\r\n      <div class=\"d-flex flex-wrap align-items-center flex-grow-1 flex-row-reverse gap-3\">\r\n        @for (item of lovOptions; track $index) {\r\n          <ds-button\r\n            [ngClass]=\"{'disabled': !actionStates[item.value]}\"\r\n            shape=\"{{ buttonShape(item) }}\"\r\n            color=\"{{ buttonColor(item) }}\"\r\n            (click)=\"onSubmit(item?.value)\">\r\n            {{ item?.['description'] }}\r\n          </ds-button>\r\n        }\r\n      </div>\r\n    </div>\r\n  } @else {\r\n    <div class=\"d-flex flex-wrap align-items-center flex-grow-1 justify-content-end gap-3\">\r\n      <ds-button shape=\"text\" color=\"red\" (click)=\"resetForm()\">\r\n        <span class=\"fs-16 fw-medium\">{{ i18n.translate('reset') }}</span>\r\n      </ds-button>\r\n      <ds-button\r\n        [ngClass]=\"{'disabled': !validForm('SUBMIT')}\"\r\n        (click)=\"onSubmit('SUBMIT')\">\r\n        {{ i18n.translate('submit') }}\r\n      </ds-button>\r\n    </div>\r\n  }\r\n</div>\r\n" }]
+        }], ctorParameters: () => [{ type: CoreI18nService }, { type: ActionStateService }], propDecorators: { lovOptions: [{
+                type: Input
+            }], lovType: [{
+                type: Input
+            }] } });
+
 class RequestDetailsSectionComponent {
     i18n;
+    fb;
+    actionStateService;
     isReadOnly;
     section;
     lov;
     className = "info-section";
-    currentSectionId;
-    lastSectionId;
     form;
-    constructor(i18n) {
+    fieldsForm;
+    constructor(i18n, fb, actionStateService) {
         this.i18n = i18n;
+        this.fb = fb;
+        this.actionStateService = actionStateService;
+        this.createForm();
     }
-    ngAfterViewInit() {
-        this.ServicesSubScriptions();
-    }
-    ServicesSubScriptions() {
-        /*  this.profileRequestorService.getForm().subscribe(data => {
-            this.form = data;
-            this.lastSectionId = this.form.sections[this.form.sections.length - 1].id;
-            this.currentSectionId = this.section.id;
-          });*/
-    }
-    handleAttachment(fieldName, data) {
-        this.section.body.details[fieldName] = data;
+    createForm() {
+        let newForm = {
+            input1: ['', Validators.required]
+        };
+        this.lov?.['decision']?.options?.forEach(option => {
+            newForm[option.value] = [''];
+        });
+        this.fieldsForm = this.fb.group(newForm);
+        this.fieldsForm.valueChanges.subscribe(value => {
+            this.lov?.['decision']?.options?.forEach(option => {
+                let isActionValid = this.checkValidity(option.value);
+                this.actionStateService.setActionValid(option.value, isActionValid);
+            });
+        });
     }
-    handleEmitValue(data, fieldName) {
-        this.section.body.details[fieldName] = data;
+    checkValidity(action) {
+        switch (action) {
+            case 'APPROVE':
+                return true;
+            case 'REJECT':
+                return this.fieldsForm.valid;
+            case 'SENDBACK':
+                return this.fieldsForm.valid;
+            default:
+                return false;
+        }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: RequestDetailsSectionComponent, deps: [{ token: CoreI18nService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: RequestDetailsSectionComponent, isStandalone: true, selector: "app-request-details-section", inputs: { isReadOnly: "isReadOnly", section: "section", lov: "lov", className: "className" }, ngImport: i0, template: "<div\r\n  [ngClass]=\"{'form-section-divide form-section':!section?.header?.readOnly,'info-section':section?.header?.readOnly}\">\r\n\r\n\r\n\r\n\r\n\r\n\r\n  <ds-alert class=\"full\" type=\"warning\" icon=\"info\">\r\n\r\n    <div class=\"d-flex gap-2\">\r\n\r\n     Request details working fine\r\n\r\n    </div>\r\n\r\n  </ds-alert>\r\n\r\n<!--\r\n\r\n\r\n  <app-textarea class=\"section-item\" [section]=\"section\" [field]=\"section?.body?.details?.agreementName\"\r\n    name=\"agreementName\" [labelTextReadMode]=\"i18n.translate('agreementName')\"\r\n    [labelTextWriteMode]=\"i18n.translate('agreementName')\" [hasColumnBreak]=\"false\"\r\n    [label]=\"i18n.translate('agreementName')\" [required]=\"true\" [minLength]='1' [maxLength]='300'\r\n    [isReadOnly]=\"section?.header?.readOnly\" (emitedValue)=\"handleEmitValue($event,'agreementName')\"\r\n    [errorMessage]=\"i18n.translate('lenghtMin1Max300')\">\r\n  </app-textarea>\r\n  <app-textarea class=\"section-item\" [section]=\"section\" [field]=\"section?.body?.details?.agreementDescription\"\r\n    name=\"agreementDescription\" [labelTextReadMode]=\"i18n.translate('agreementDescription')\"\r\n    [labelTextWriteMode]=\"i18n.translate('agreementDescription')\" [hasColumnBreak]=\"false\"\r\n    [label]=\"i18n.translate('agreementDescription')\" [required]=\"true\" [minLength]='1' [maxLength]='300'\r\n    [isReadOnly]=\"section?.header?.readOnly\" (emitedValue)=\"handleEmitValue($event,'agreementDescription')\"\r\n    [errorMessage]=\"i18n.translate('lenghtMin1Max300')\">\r\n  </app-textarea>\r\n  <app-textarea class=\"section-item\" [section]=\"section\" [field]=\"section?.body?.details?.agreementSTC\"\r\n    name=\"agreementSTC\" [labelTextReadMode]=\"i18n.translate('agreementSTC')\"\r\n    [labelTextWriteMode]=\"i18n.translate('agreementSTC')\" [hasColumnBreak]=\"false\"\r\n    [label]=\"i18n.translate('agreementSTC')\" [required]=\"true\" [minLength]='1' [maxLength]='300'\r\n    [isReadOnly]=\"section?.header?.readOnly\" (emitedValue)=\"handleEmitValue($event,'agreementSTC')\"\r\n    [errorMessage]=\"i18n.translate('lenghtMin1Max300')\">\r\n  </app-textarea>\r\n  <app-textarea class=\"section-item\" [section]=\"section\" [field]=\"section?.body?.details?.contractingPartyName\"\r\n    name=\"contractingPartyName\" [labelTextReadMode]=\"i18n.translate('contractingPartyName')\"\r\n    [labelTextWriteMode]=\"i18n.translate('contractingPartyName')\" [hasColumnBreak]=\"false\"\r\n    [label]=\"i18n.translate('contractingPartyName')\" [required]=\"true\" [minLength]='1' [maxLength]='300'\r\n    [isReadOnly]=\"section?.header?.readOnly\" (emitedValue)=\"handleEmitValue($event,'contractingPartyName')\"\r\n    [errorMessage]=\"i18n.translate('lenghtMin1Max300')\">\r\n  </app-textarea>\r\n\r\n\r\n  <app-input class=\"section-item\" [section]=\"section\" [field]=\"section?.body?.details?.representativeParty\"\r\n    name=\"representativeParty\" [labelTextReadMode]=\"i18n.translate('representativeParty')\"\r\n    [labelTextWriteMode]=\"i18n.translate('representativeParty')\" [hasColumnBreak]=\"false\"\r\n    [label]=\"i18n.translate('representativeParty')\" [required]=\"true\" [isReadOnly]=\"section?.header?.readOnly\"\r\n    (emitedValue)=\"handleEmitValue($event,'representativeParty')\">\r\n  </app-input>\r\n\r\n  <app-input class=\"section-item\" [section]=\"section\" [field]=\"section?.body?.details?.IBAN\" name=\"IBAN\"\r\n    [labelTextReadMode]=\"i18n.translate('IBAN')\" [labelTextWriteMode]=\"i18n.translate('IBAN')\" [hasColumnBreak]=\"false\"\r\n    [label]=\"i18n.translate('IBAN')\" [required]=\"false\" [isReadOnly]=\"section?.header?.readOnly\"\r\n    (emitedValue)=\"handleEmitValue($event,'IBAN')\">\r\n  </app-input>\r\n  <app-input class=\"section-item\" [section]=\"section\" [field]=\"section?.body?.details?.bankName\" name=\"bankName\"\r\n    [labelTextReadMode]=\"i18n.translate('bankName')\" [labelTextWriteMode]=\"i18n.translate('bankName')\"\r\n    [hasColumnBreak]=\"false\" [label]=\"i18n.translate('bankName')\" [required]=\"false\"\r\n    [isReadOnly]=\"section?.header?.readOnly\" (emitedValue)=\"handleEmitValue($event,'bankName')\">\r\n  </app-input>\r\n  <app-input class=\"section-item\" [section]=\"section\" [field]=\"section?.body?.details?.locationSystem\"\r\n    name=\"locationSystem\" [labelTextReadMode]=\"i18n.translate('locationSystem')\"\r\n    [labelTextWriteMode]=\"i18n.translate('locationSystem')\" [hasColumnBreak]=\"false\"\r\n    [label]=\"i18n.translate('locationSystem')\" [required]=\"true\" [isReadOnly]=\"section?.header?.readOnly\"\r\n    (emitedValue)=\"handleEmitValue($event,'locationSystem')\">\r\n  </app-input>\r\n  <app-input class=\"section-item\" [section]=\"section\" [field]=\"section?.body?.details?.addressSystem\"\r\n    name=\"addressSystem\" [labelTextReadMode]=\"i18n.translate('addressSystem')\"\r\n    [labelTextWriteMode]=\"i18n.translate('addressSystem')\" [hasColumnBreak]=\"false\"\r\n    [label]=\"i18n.translate('addressSystem')\" [required]=\"true\" [isReadOnly]=\"section?.header?.readOnly\"\r\n    (emitedValue)=\"handleEmitValue($event,'addressSystem')\">\r\n  </app-input>\r\n  <app-select class=\"section-item\" [section]=\"section\" [field]=\"section?.body?.details?.Currency\" name=\"Currency\"\r\n    [labelTextReadMode]=\"i18n.translate('Currency')\" [labelTextWriteMode]=\"i18n.translate('Currency')\"\r\n    [hasColumnBreak]=\"false\" [label]=\"i18n.translate('Currency')\" [lov]=\"lov?.Currency\" [required]=\"true\"\r\n    [isReadOnly]=\"section?.header?.readOnly\" (emitedValue)=\"handleEmitValue($event,'Currency')\">\r\n  </app-select>\r\n  <app-input class=\"section-item\" [section]=\"section\" [field]=\"section?.body?.details?.vendorNumber\" name=\"vendorNumber\"\r\n    [labelTextReadMode]=\"i18n.translate('vendorNumber')\" [labelTextWriteMode]=\"i18n.translate('vendorNumber')\"\r\n    [hasColumnBreak]=\"false\" [label]=\"i18n.translate('vendorNumber')\" [required]=\"true\"\r\n    [isReadOnly]=\"section?.header?.readOnly\" (emitedValue)=\"handleEmitValue($event,'vendorNumber')\">\r\n  </app-input>\r\n\r\n  <app-input-currency class=\"section-item\" [section]=\"section\" [field]=\"section?.body?.details?.agreementAmount\"\r\n    name=\"agreementAmount\" [labelTextReadMode]=\"i18n.translate('agreementAmount')\"\r\n    [labelTextWriteMode]=\"i18n.translate('agreementAmount')\" [hasColumnBreak]=\"false\"\r\n    [label]=\"i18n.translate('agreementAmount')\" [required]=\"true\" [isReadOnly]=\"section?.header?.readOnly\"\r\n    (emitedValue)=\"handleEmitValue($event,'agreementAmount')\">\r\n  </app-input-currency>\r\n\r\n  <app-input class=\"section-item\" [section]=\"section\" [field]=\"section?.body?.details?.FCS\" name=\"FCS\"\r\n    [labelTextReadMode]=\"i18n.translate('FCS')\" [labelTextWriteMode]=\"i18n.translate('FCS')\" [hasColumnBreak]=\"false\"\r\n    [label]=\"i18n.translate('FCS')\" [required]=\"true\" [isReadOnly]=\"section?.header?.readOnly\"\r\n    (emitedValue)=\"handleEmitValue($event,'FCS')\">\r\n  </app-input>\r\n  <app-textarea class=\"section-item\" [section]=\"section\" [field]=\"section?.body?.details?.agreementPeriod\"\r\n    name=\"agreementPeriod\" [labelTextReadMode]=\"i18n.translate('agreementPeriod')\"\r\n    [labelTextWriteMode]=\"i18n.translate('agreementPeriod')\" [hasColumnBreak]=\"false\"\r\n    [label]=\"i18n.translate('agreementPeriod')\" [required]=\"true\" [minLength]='1' [maxLength]='300'\r\n    [isReadOnly]=\"section?.header?.readOnly\" (emitedValue)=\"handleEmitValue($event,'agreementPeriod')\"\r\n    [errorMessage]=\"i18n.translate('lenghtMin1Max300')\">\r\n  </app-textarea>\r\n  <app-datepicker class=\"section-item\" [section]=\"section\" [field]=\"section?.body?.details?.startDate\" name=\"startDate\"\r\n    [labelTextReadMode]=\"i18n.translate('startDate')\" [labelTextWriteMode]=\"i18n.translate('startDate')\"\r\n    [hasColumnBreak]=\"false\" [label]=\"i18n.translate('startDate')\" [required]=\"true\"\r\n    [isReadOnly]=\"section?.header?.readOnly\" (emitedValue)=\"handleEmitValue($event,'startDate')\">\r\n  </app-datepicker>\r\n  <app-datepicker class=\"section-item\" [section]=\"section\" [field]=\"section?.body?.details?.endDate\" name=\"endDate\"\r\n    [labelTextReadMode]=\"i18n.translate('endDate')\" [labelTextWriteMode]=\"i18n.translate('endDate')\"\r\n    [hasColumnBreak]=\"false\" [label]=\"i18n.translate('endDate')\" [required]=\"true\"\r\n    [isReadOnly]=\"section?.header?.readOnly\" (emitedValue)=\"handleEmitValue($event,'endDate')\">\r\n  </app-datepicker>\r\n\r\n  <app-input-currency class=\"section-item\" [section]=\"section\" [field]=\"section?.body?.details?.purchaseOrderAmount\"\r\n    name=\"purchaseOrderAmount\" [labelTextReadMode]=\"i18n.translate('purchaseOrderAmount')\"\r\n    [labelTextWriteMode]=\"i18n.translate('purchaseOrderAmount')\" [hasColumnBreak]=\"false\"\r\n    [label]=\"i18n.translate('purchaseOrderAmount')\" [required]=\"true\" [isReadOnly]=\"section?.header?.readOnly\"\r\n    (emitedValue)=\"handleEmitValue($event,'purchaseOrderAmount')\">\r\n  </app-input-currency>\r\n\r\n  <app-select class=\"section-item\" [section]=\"section\" [field]=\"section?.body?.details?.currencyPurchaseOrder\"\r\n    name=\"currencyPurchaseOrder\" [labelTextReadMode]=\"i18n.translate('currencyPurchaseOrder')\"\r\n    [labelTextWriteMode]=\"i18n.translate('currencyPurchaseOrder')\" [hasColumnBreak]=\"false\"\r\n    [label]=\"i18n.translate('currencyPurchaseOrder')\" [lov]=\"lov?.currencyPurchaseOrder\" [required]=\"true\"\r\n    [isReadOnly]=\"section?.header?.readOnly\" (emitedValue)=\"handleEmitValue($event,'currencyPurchaseOrder')\">\r\n  </app-select>\r\n  <app-input class=\"section-item\" [section]=\"section\" [field]=\"section?.body?.details?.typeContract\" name=\"typeContract\"\r\n    [labelTextReadMode]=\"i18n.translate('typeContract')\" [labelTextWriteMode]=\"i18n.translate('typeContract')\"\r\n    [hasColumnBreak]=\"false\" [label]=\"i18n.translate('typeContract')\" [required]=\"true\"\r\n    [isReadOnly]=\"section?.header?.readOnly\" (emitedValue)=\"handleEmitValue($event,'typeContract')\">\r\n  </app-input>\r\n  <app-input class=\"section-item\" [section]=\"section\" [field]=\"section?.body?.details?.expenseNumber\"\r\n    name=\"expenseNumber\" [labelTextReadMode]=\"i18n.translate('expenseNumber')\"\r\n    [labelTextWriteMode]=\"i18n.translate('expenseNumber')\" [hasColumnBreak]=\"false\"\r\n    [label]=\"i18n.translate('expenseNumber')\" [required]=\"true\" [isReadOnly]=\"section?.header?.readOnly\"\r\n    (emitedValue)=\"handleEmitValue($event,'expenseNumber')\">\r\n  </app-input>\r\n  <app-input class=\"section-item\" [section]=\"section\" [field]=\"section?.body?.details?.depNo\" name=\"depNo\"\r\n    [labelTextReadMode]=\"i18n.translate('depNo')\" [labelTextWriteMode]=\"i18n.translate('depNo')\"\r\n    [hasColumnBreak]=\"false\" [label]=\"i18n.translate('depNo')\" [required]=\"true\"\r\n    [isReadOnly]=\"section?.header?.readOnly\" (emitedValue)=\"handleEmitValue($event,'depNo')\">\r\n  </app-input>\r\n  <app-input class=\"section-item\" [section]=\"section\" [field]=\"section?.body?.details?.depName\" name=\"depName\"\r\n    [labelTextReadMode]=\"i18n.translate('depName')\" [labelTextWriteMode]=\"i18n.translate('depName')\"\r\n    [hasColumnBreak]=\"false\" [label]=\"i18n.translate('depName')\" [required]=\"true\"\r\n    [isReadOnly]=\"section?.header?.readOnly\" (emitedValue)=\"handleEmitValue($event,'depName')\">\r\n  </app-input>\r\n  <app-input class=\"section-item\" [section]=\"section\" [field]=\"section?.body?.details?.PRNo\" name=\"PRNo\"\r\n    [labelTextReadMode]=\"i18n.translate('PRNo')\" [labelTextWriteMode]=\"i18n.translate('PRNo')\" [hasColumnBreak]=\"false\"\r\n    [label]=\"i18n.translate('PRNo')\" [required]=\"true\" [isReadOnly]=\"section?.header?.readOnly\"\r\n    (emitedValue)=\"handleEmitValue($event,'PRNo')\">\r\n  </app-input>\r\n  <app-input class=\"section-item\" [section]=\"section\" [field]=\"section?.body?.details?.POPeriod\" name=\"POPeriod\"\r\n    [labelTextReadMode]=\"i18n.translate('POPeriod')\" [labelTextWriteMode]=\"i18n.translate('POPeriod')\"\r\n    [hasColumnBreak]=\"false\" [label]=\"i18n.translate('POPeriod')\" [required]=\"true\"\r\n    [isReadOnly]=\"section?.header?.readOnly\" (emitedValue)=\"handleEmitValue($event,'POPeriod')\">\r\n  </app-input>\r\n\r\n\r\n\r\n  <app-textarea *ngIf=\"(section?.body?.details?.IS_SENDBACK == 'true')  || (!!section?.body?.details?.Comments)\"\r\n    class=\"section-item\" [section]=\"section\" [field]=\"section?.body?.details?.Comments\" name=\"Comments\"\r\n    [labelTextReadMode]=\"i18n.translate('Comments')\" [labelTextWriteMode]=\"i18n.translate('Comments')\"\r\n    [hasColumnBreak]=\"false\" [label]=\"i18n.translate('Comments')\" [required]=\"true\" [minLength]='1' [maxLength]='2000'\r\n    [isReadOnly]=\"section?.header?.readOnly\" (emitedValue)=\"handleEmitValue($event,'Comments')\"\r\n    [errorMessage]=\"i18n.translate('lenghtMin1Max2000')\">\r\n  </app-textarea>\r\n\r\n\r\n\r\n  &lt;!&ndash; <app-file-uploader   class=\"section-item\" [section]=\"section\" [field]=\"section?.body?.details?.attachment\" name=\"attachment\" [labelTextReadMode]=\"i18n.translate('attachment')\"\r\n    [labelTextWriteMode]=\"i18n.translate('attachment')\"   [hasColumnBreak]=\"false\"  [label]=\"i18n.translate('attachment')\"\r\n\r\n    [required]=\"true\"    [multiple]=\"true\"    [displayedFiles]=\"section?.body?.details?.attachment\"\r\n     [isReadOnly]=\"section?.header?.readOnly\"  (emitedValue)=\"handleEmitValue($event,'attachment')\"[callApi]=\"true\">\r\n  </app-file-uploader> &ndash;&gt;\r\n\r\n\r\n\r\n\r\n  <app-attachment-section class=\"section-item full\" [field]=\"section?.body?.details?.attachment\" [labelTextReadMode]=\"\"\r\n    [labelTextWriteMode]=\"\" [hasColumnBreak]=\"\" [label]=\"\" [required]=\"false\" [isRequired]=\"true\"\r\n    [isReadOnly]=\"section?.header?.readOnly\" [attachments]=\"section?.body?.details?.attachment\"\r\n    (emitedValue)=\"handleEmitValue($event,'attachment')\">\r\n  </app-attachment-section>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n-->\r\n\r\n</div>\r\n\r\n\r\n<!--<div class=\"mt-4\" *ngIf=\"!section?.header?.readOnly\">\r\n\r\n  <div class=\"d-flex align-items-center gap-3\" *ngIf=\"lov?.decision?.type === 'button'\">\r\n    <ds-button shape=\"text\" color=\"red\" (click)=\"resetForm()\">\r\n      <span class=\"fs-16 fw-medium\">{{i18n.translate('reset')}}</span>\r\n    </ds-button>\r\n    <div class=\"d-flex flex-wrap align-items-center flex-grow-1 flex-row-reverse gap-3\">\r\n      <ng-container *ngFor=\"let item of lov?.decision?.options\">\r\n        <ds-button [ngClass]=\"{'disabled':!validForm(item?.value) || profileRequestorService.disableButtons}\"\r\n          (click)=\"onSubmit(item?.value) \" [loading]=\"profileRequestorService.isSubmitting[item?.value]\"\r\n          *ngIf=\"item?.value === 'SUBMIT'\">{{item?.description}}</ds-button>\r\n\r\n        <ds-button [ngClass]=\"{'disabled':!validForm(item?.value) || profileRequestorService.disableButtons}\"\r\n          (click)=\"onSubmit(item?.value) \" [loading]=\"profileRequestorService.isSubmitting[item?.value]\"\r\n          *ngIf=\"item?.value === 'APPROVE'\">{{item?.description}}</ds-button>\r\n        <ds-button [ngClass]=\"{'disabled':!validForm(item?.value) || profileRequestorService.disableButtons}\"\r\n          (click)=\"onSubmit(item?.value)\" shape=\"outline\" color=\"red\"\r\n          [loading]=\"profileRequestorService.isSubmitting[item?.value]\" *ngIf=\"item?.value === 'REJECT'\">\r\n          {{item?.description}}</ds-button>\r\n        <ds-button [ngClass]=\"{'disabled':!validForm(item?.value) || profileRequestorService.disableButtons}\"\r\n          (click)=\"onSubmit(item?.value)\" shape=\"outline\" color=\"red\"\r\n          [loading]=\"profileRequestorService.isSubmitting[item?.value]\" *ngIf=\"item?.value === 'CANCEL'\">\r\n          {{item?.description}}</ds-button>\r\n        <ds-button [ngClass]=\"{'disabled':!validForm(item?.value) || profileRequestorService.disableButtons}\"\r\n          (click)=\"onSubmit(item?.value)\" shape=\"outline\" [loading]=\"profileRequestorService.isSubmitting[item?.value]\"\r\n          *ngIf=\"item?.value === 'SENDBACK'\">\r\n          {{item?.description}}</ds-button>\r\n\r\n        <ds-button [ngClass]=\"{'disabled':!validForm(item?.value) || profileRequestorService.disableButtons}\"\r\n          (click)=\"onSubmit(item?.value) \" [loading]=\"profileRequestorService.isSubmitting[item?.value]\"\r\n          *ngIf=\"!(item?.value === 'SUBMIT' || item?.value === 'APPROVE' || item?.value === 'SENDBACK' || item?.value === 'REJECT' || item?.value === 'CANCEL')\">\r\n          {{item?.description}}</ds-button>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"d-flex flex-wrap align-items-center flex-grow-1 justify-content-end gap-3\"\r\n    *ngIf=\"lov?.decision?.type !== 'button'\">\r\n    <ds-button shape=\"text\" color=\"red\" (click)=\"resetForm()\">\r\n      <span class=\"fs-16 fw-medium\">{{i18n.translate('reset')}}</span>\r\n    </ds-button>\r\n    <ds-button [ngClass]=\"{'disabled':!validForm('SUBMIT')}\"\r\n      [loading]=\"profileRequestorService.isSubmitting[item?.value]\"\r\n      (click)=\"onSubmit('SUBMIT') || profileRequestorService.disableButtons\">\r\n      {{i18n.translate('submit')}}\r\n    </ds-button>\r\n  </div>\r\n</div>-->\r\n", styles: [".form-section-divide{--form-section-columns: 1fr 1fr}@media (max-width: 756px){.form-section-divide{--form-section-columns: 100%}}.form-section-divide .full{grid-column:1/-1}.head-title{position:relative;margin-bottom:12px}.head-title h3{display:inline-block;color:#8e9aa0;font-size:14px;font-weight:500;background-color:#fff;padding-inline-end:20px;position:relative;z-index:2;margin:0}.head-title:after{content:\"\";position:absolute;width:100%;height:1px;background-color:#dee0e2;top:50%;left:0;right:0;transform:translateY(-50%);z-index:1}.chamber{margin-bottom:20px}.chamber .chamber-content{background-color:#f8f8f8;padding:20px}.chamber .chamber-content .chamber-select{display:flex}.chamber .chamber-content mat-checkbox{font-size:14px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: RequestDetailsSectionComponent, deps: [{ token: CoreI18nService }, { token: i1$2.FormBuilder }, { token: ActionStateService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: RequestDetailsSectionComponent, isStandalone: true, selector: "app-request-details-section", inputs: { isReadOnly: "isReadOnly", section: "section", lov: "lov", className: "className" }, ngImport: i0, template: "<div\r\n  [ngClass]=\"{'form-section-divide form-section':!section?.header?.readOnly,'info-section':section?.header?.readOnly}\">\r\n\r\n\r\n  <ds-alert class=\"full\" type=\"warning\" icon=\"info\">\r\n\r\n    <div class=\"d-flex gap-2\">\r\n\r\n      Request details working fine\r\n\r\n    </div>\r\n\r\n  </ds-alert>\r\n\r\n  <form [formGroup]=\"fieldsForm\">\r\n    <app-input formControlName=\"input1\" ></app-input>\r\n  </form>\r\n\r\n</div>\r\n@if (!section?.header?.readOnly) {\r\n  <div class=\"mt-4\">\r\n    <lib-action-buttons\r\n      [lovOptions]=\"lov?.['decision']?.options\"\r\n      [lovType]=\"lov?.['decision']?.type\"\r\n    />\r\n  </div>\r\n}\r\n", styles: [".form-section-divide{--form-section-columns: 1fr 1fr}@media (max-width: 756px){.form-section-divide{--form-section-columns: 100%}}.form-section-divide .full{grid-column:1/-1}.head-title{position:relative;margin-bottom:12px}.head-title h3{display:inline-block;color:#8e9aa0;font-size:14px;font-weight:500;background-color:#fff;padding-inline-end:20px;position:relative;z-index:2;margin:0}.head-title:after{content:\"\";position:absolute;width:100%;height:1px;background-color:#dee0e2;top:50%;left:0;right:0;transform:translateY(-50%);z-index:1}.chamber{margin-bottom:20px}.chamber .chamber-content{background-color:#f8f8f8;padding:20px}.chamber .chamber-content .chamber-select{display:flex}.chamber .chamber-content mat-checkbox{font-size:14px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: InputComponent, selector: "app-input", inputs: ["label", "hasTooltip", "tooltip", "floatLabel", "className", "showLabel", "matPrefix", "iconPrefixName", "matSuffix", "iconSuffixName", "emitedChangedValue1"] }, { kind: "component", type: ActionButtonsComponent, selector: "lib-action-buttons", inputs: ["lovOptions", "lovType"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: RequestDetailsSectionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-request-details-section', standalone: true, schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA], imports: [
-                        NgClass
-                    ], template: "<div\r\n  [ngClass]=\"{'form-section-divide form-section':!section?.header?.readOnly,'info-section':section?.header?.readOnly}\">\r\n\r\n\r\n\r\n\r\n\r\n\r\n  <ds-alert class=\"full\" type=\"warning\" icon=\"info\">\r\n\r\n    <div class=\"d-flex gap-2\">\r\n\r\n     Request details working fine\r\n\r\n    </div>\r\n\r\n  </ds-alert>\r\n\r\n<!--\r\n\r\n\r\n  <app-textarea class=\"section-item\" [section]=\"section\" [field]=\"section?.body?.details?.agreementName\"\r\n    name=\"agreementName\" [labelTextReadMode]=\"i18n.translate('agreementName')\"\r\n    [labelTextWriteMode]=\"i18n.translate('agreementName')\" [hasColumnBreak]=\"false\"\r\n    [label]=\"i18n.translate('agreementName')\" [required]=\"true\" [minLength]='1' [maxLength]='300'\r\n    [isReadOnly]=\"section?.header?.readOnly\" (emitedValue)=\"handleEmitValue($event,'agreementName')\"\r\n    [errorMessage]=\"i18n.translate('lenghtMin1Max300')\">\r\n  </app-textarea>\r\n  <app-textarea class=\"section-item\" [section]=\"section\" [field]=\"section?.body?.details?.agreementDescription\"\r\n    name=\"agreementDescription\" [labelTextReadMode]=\"i18n.translate('agreementDescription')\"\r\n    [labelTextWriteMode]=\"i18n.translate('agreementDescription')\" [hasColumnBreak]=\"false\"\r\n    [label]=\"i18n.translate('agreementDescription')\" [required]=\"true\" [minLength]='1' [maxLength]='300'\r\n    [isReadOnly]=\"section?.header?.readOnly\" (emitedValue)=\"handleEmitValue($event,'agreementDescription')\"\r\n    [errorMessage]=\"i18n.translate('lenghtMin1Max300')\">\r\n  </app-textarea>\r\n  <app-textarea class=\"section-item\" [section]=\"section\" [field]=\"section?.body?.details?.agreementSTC\"\r\n    name=\"agreementSTC\" [labelTextReadMode]=\"i18n.translate('agreementSTC')\"\r\n    [labelTextWriteMode]=\"i18n.translate('agreementSTC')\" [hasColumnBreak]=\"false\"\r\n    [label]=\"i18n.translate('agreementSTC')\" [required]=\"true\" [minLength]='1' [maxLength]='300'\r\n    [isReadOnly]=\"section?.header?.readOnly\" (emitedValue)=\"handleEmitValue($event,'agreementSTC')\"\r\n    [errorMessage]=\"i18n.translate('lenghtMin1Max300')\">\r\n  </app-textarea>\r\n  <app-textarea class=\"section-item\" [section]=\"section\" [field]=\"section?.body?.details?.contractingPartyName\"\r\n    name=\"contractingPartyName\" [labelTextReadMode]=\"i18n.translate('contractingPartyName')\"\r\n    [labelTextWriteMode]=\"i18n.translate('contractingPartyName')\" [hasColumnBreak]=\"false\"\r\n    [label]=\"i18n.translate('contractingPartyName')\" [required]=\"true\" [minLength]='1' [maxLength]='300'\r\n    [isReadOnly]=\"section?.header?.readOnly\" (emitedValue)=\"handleEmitValue($event,'contractingPartyName')\"\r\n    [errorMessage]=\"i18n.translate('lenghtMin1Max300')\">\r\n  </app-textarea>\r\n\r\n\r\n  <app-input class=\"section-item\" [section]=\"section\" [field]=\"section?.body?.details?.representativeParty\"\r\n    name=\"representativeParty\" [labelTextReadMode]=\"i18n.translate('representativeParty')\"\r\n    [labelTextWriteMode]=\"i18n.translate('representativeParty')\" [hasColumnBreak]=\"false\"\r\n    [label]=\"i18n.translate('representativeParty')\" [required]=\"true\" [isReadOnly]=\"section?.header?.readOnly\"\r\n    (emitedValue)=\"handleEmitValue($event,'representativeParty')\">\r\n  </app-input>\r\n\r\n  <app-input class=\"section-item\" [section]=\"section\" [field]=\"section?.body?.details?.IBAN\" name=\"IBAN\"\r\n    [labelTextReadMode]=\"i18n.translate('IBAN')\" [labelTextWriteMode]=\"i18n.translate('IBAN')\" [hasColumnBreak]=\"false\"\r\n    [label]=\"i18n.translate('IBAN')\" [required]=\"false\" [isReadOnly]=\"section?.header?.readOnly\"\r\n    (emitedValue)=\"handleEmitValue($event,'IBAN')\">\r\n  </app-input>\r\n  <app-input class=\"section-item\" [section]=\"section\" [field]=\"section?.body?.details?.bankName\" name=\"bankName\"\r\n    [labelTextReadMode]=\"i18n.translate('bankName')\" [labelTextWriteMode]=\"i18n.translate('bankName')\"\r\n    [hasColumnBreak]=\"false\" [label]=\"i18n.translate('bankName')\" [required]=\"false\"\r\n    [isReadOnly]=\"section?.header?.readOnly\" (emitedValue)=\"handleEmitValue($event,'bankName')\">\r\n  </app-input>\r\n  <app-input class=\"section-item\" [section]=\"section\" [field]=\"section?.body?.details?.locationSystem\"\r\n    name=\"locationSystem\" [labelTextReadMode]=\"i18n.translate('locationSystem')\"\r\n    [labelTextWriteMode]=\"i18n.translate('locationSystem')\" [hasColumnBreak]=\"false\"\r\n    [label]=\"i18n.translate('locationSystem')\" [required]=\"true\" [isReadOnly]=\"section?.header?.readOnly\"\r\n    (emitedValue)=\"handleEmitValue($event,'locationSystem')\">\r\n  </app-input>\r\n  <app-input class=\"section-item\" [section]=\"section\" [field]=\"section?.body?.details?.addressSystem\"\r\n    name=\"addressSystem\" [labelTextReadMode]=\"i18n.translate('addressSystem')\"\r\n    [labelTextWriteMode]=\"i18n.translate('addressSystem')\" [hasColumnBreak]=\"false\"\r\n    [label]=\"i18n.translate('addressSystem')\" [required]=\"true\" [isReadOnly]=\"section?.header?.readOnly\"\r\n    (emitedValue)=\"handleEmitValue($event,'addressSystem')\">\r\n  </app-input>\r\n  <app-select class=\"section-item\" [section]=\"section\" [field]=\"section?.body?.details?.Currency\" name=\"Currency\"\r\n    [labelTextReadMode]=\"i18n.translate('Currency')\" [labelTextWriteMode]=\"i18n.translate('Currency')\"\r\n    [hasColumnBreak]=\"false\" [label]=\"i18n.translate('Currency')\" [lov]=\"lov?.Currency\" [required]=\"true\"\r\n    [isReadOnly]=\"section?.header?.readOnly\" (emitedValue)=\"handleEmitValue($event,'Currency')\">\r\n  </app-select>\r\n  <app-input class=\"section-item\" [section]=\"section\" [field]=\"section?.body?.details?.vendorNumber\" name=\"vendorNumber\"\r\n    [labelTextReadMode]=\"i18n.translate('vendorNumber')\" [labelTextWriteMode]=\"i18n.translate('vendorNumber')\"\r\n    [hasColumnBreak]=\"false\" [label]=\"i18n.translate('vendorNumber')\" [required]=\"true\"\r\n    [isReadOnly]=\"section?.header?.readOnly\" (emitedValue)=\"handleEmitValue($event,'vendorNumber')\">\r\n  </app-input>\r\n\r\n  <app-input-currency class=\"section-item\" [section]=\"section\" [field]=\"section?.body?.details?.agreementAmount\"\r\n    name=\"agreementAmount\" [labelTextReadMode]=\"i18n.translate('agreementAmount')\"\r\n    [labelTextWriteMode]=\"i18n.translate('agreementAmount')\" [hasColumnBreak]=\"false\"\r\n    [label]=\"i18n.translate('agreementAmount')\" [required]=\"true\" [isReadOnly]=\"section?.header?.readOnly\"\r\n    (emitedValue)=\"handleEmitValue($event,'agreementAmount')\">\r\n  </app-input-currency>\r\n\r\n  <app-input class=\"section-item\" [section]=\"section\" [field]=\"section?.body?.details?.FCS\" name=\"FCS\"\r\n    [labelTextReadMode]=\"i18n.translate('FCS')\" [labelTextWriteMode]=\"i18n.translate('FCS')\" [hasColumnBreak]=\"false\"\r\n    [label]=\"i18n.translate('FCS')\" [required]=\"true\" [isReadOnly]=\"section?.header?.readOnly\"\r\n    (emitedValue)=\"handleEmitValue($event,'FCS')\">\r\n  </app-input>\r\n  <app-textarea class=\"section-item\" [section]=\"section\" [field]=\"section?.body?.details?.agreementPeriod\"\r\n    name=\"agreementPeriod\" [labelTextReadMode]=\"i18n.translate('agreementPeriod')\"\r\n    [labelTextWriteMode]=\"i18n.translate('agreementPeriod')\" [hasColumnBreak]=\"false\"\r\n    [label]=\"i18n.translate('agreementPeriod')\" [required]=\"true\" [minLength]='1' [maxLength]='300'\r\n    [isReadOnly]=\"section?.header?.readOnly\" (emitedValue)=\"handleEmitValue($event,'agreementPeriod')\"\r\n    [errorMessage]=\"i18n.translate('lenghtMin1Max300')\">\r\n  </app-textarea>\r\n  <app-datepicker class=\"section-item\" [section]=\"section\" [field]=\"section?.body?.details?.startDate\" name=\"startDate\"\r\n    [labelTextReadMode]=\"i18n.translate('startDate')\" [labelTextWriteMode]=\"i18n.translate('startDate')\"\r\n    [hasColumnBreak]=\"false\" [label]=\"i18n.translate('startDate')\" [required]=\"true\"\r\n    [isReadOnly]=\"section?.header?.readOnly\" (emitedValue)=\"handleEmitValue($event,'startDate')\">\r\n  </app-datepicker>\r\n  <app-datepicker class=\"section-item\" [section]=\"section\" [field]=\"section?.body?.details?.endDate\" name=\"endDate\"\r\n    [labelTextReadMode]=\"i18n.translate('endDate')\" [labelTextWriteMode]=\"i18n.translate('endDate')\"\r\n    [hasColumnBreak]=\"false\" [label]=\"i18n.translate('endDate')\" [required]=\"true\"\r\n    [isReadOnly]=\"section?.header?.readOnly\" (emitedValue)=\"handleEmitValue($event,'endDate')\">\r\n  </app-datepicker>\r\n\r\n  <app-input-currency class=\"section-item\" [section]=\"section\" [field]=\"section?.body?.details?.purchaseOrderAmount\"\r\n    name=\"purchaseOrderAmount\" [labelTextReadMode]=\"i18n.translate('purchaseOrderAmount')\"\r\n    [labelTextWriteMode]=\"i18n.translate('purchaseOrderAmount')\" [hasColumnBreak]=\"false\"\r\n    [label]=\"i18n.translate('purchaseOrderAmount')\" [required]=\"true\" [isReadOnly]=\"section?.header?.readOnly\"\r\n    (emitedValue)=\"handleEmitValue($event,'purchaseOrderAmount')\">\r\n  </app-input-currency>\r\n\r\n  <app-select class=\"section-item\" [section]=\"section\" [field]=\"section?.body?.details?.currencyPurchaseOrder\"\r\n    name=\"currencyPurchaseOrder\" [labelTextReadMode]=\"i18n.translate('currencyPurchaseOrder')\"\r\n    [labelTextWriteMode]=\"i18n.translate('currencyPurchaseOrder')\" [hasColumnBreak]=\"false\"\r\n    [label]=\"i18n.translate('currencyPurchaseOrder')\" [lov]=\"lov?.currencyPurchaseOrder\" [required]=\"true\"\r\n    [isReadOnly]=\"section?.header?.readOnly\" (emitedValue)=\"handleEmitValue($event,'currencyPurchaseOrder')\">\r\n  </app-select>\r\n  <app-input class=\"section-item\" [section]=\"section\" [field]=\"section?.body?.details?.typeContract\" name=\"typeContract\"\r\n    [labelTextReadMode]=\"i18n.translate('typeContract')\" [labelTextWriteMode]=\"i18n.translate('typeContract')\"\r\n    [hasColumnBreak]=\"false\" [label]=\"i18n.translate('typeContract')\" [required]=\"true\"\r\n    [isReadOnly]=\"section?.header?.readOnly\" (emitedValue)=\"handleEmitValue($event,'typeContract')\">\r\n  </app-input>\r\n  <app-input class=\"section-item\" [section]=\"section\" [field]=\"section?.body?.details?.expenseNumber\"\r\n    name=\"expenseNumber\" [labelTextReadMode]=\"i18n.translate('expenseNumber')\"\r\n    [labelTextWriteMode]=\"i18n.translate('expenseNumber')\" [hasColumnBreak]=\"false\"\r\n    [label]=\"i18n.translate('expenseNumber')\" [required]=\"true\" [isReadOnly]=\"section?.header?.readOnly\"\r\n    (emitedValue)=\"handleEmitValue($event,'expenseNumber')\">\r\n  </app-input>\r\n  <app-input class=\"section-item\" [section]=\"section\" [field]=\"section?.body?.details?.depNo\" name=\"depNo\"\r\n    [labelTextReadMode]=\"i18n.translate('depNo')\" [labelTextWriteMode]=\"i18n.translate('depNo')\"\r\n    [hasColumnBreak]=\"false\" [label]=\"i18n.translate('depNo')\" [required]=\"true\"\r\n    [isReadOnly]=\"section?.header?.readOnly\" (emitedValue)=\"handleEmitValue($event,'depNo')\">\r\n  </app-input>\r\n  <app-input class=\"section-item\" [section]=\"section\" [field]=\"section?.body?.details?.depName\" name=\"depName\"\r\n    [labelTextReadMode]=\"i18n.translate('depName')\" [labelTextWriteMode]=\"i18n.translate('depName')\"\r\n    [hasColumnBreak]=\"false\" [label]=\"i18n.translate('depName')\" [required]=\"true\"\r\n    [isReadOnly]=\"section?.header?.readOnly\" (emitedValue)=\"handleEmitValue($event,'depName')\">\r\n  </app-input>\r\n  <app-input class=\"section-item\" [section]=\"section\" [field]=\"section?.body?.details?.PRNo\" name=\"PRNo\"\r\n    [labelTextReadMode]=\"i18n.translate('PRNo')\" [labelTextWriteMode]=\"i18n.translate('PRNo')\" [hasColumnBreak]=\"false\"\r\n    [label]=\"i18n.translate('PRNo')\" [required]=\"true\" [isReadOnly]=\"section?.header?.readOnly\"\r\n    (emitedValue)=\"handleEmitValue($event,'PRNo')\">\r\n  </app-input>\r\n  <app-input class=\"section-item\" [section]=\"section\" [field]=\"section?.body?.details?.POPeriod\" name=\"POPeriod\"\r\n    [labelTextReadMode]=\"i18n.translate('POPeriod')\" [labelTextWriteMode]=\"i18n.translate('POPeriod')\"\r\n    [hasColumnBreak]=\"false\" [label]=\"i18n.translate('POPeriod')\" [required]=\"true\"\r\n    [isReadOnly]=\"section?.header?.readOnly\" (emitedValue)=\"handleEmitValue($event,'POPeriod')\">\r\n  </app-input>\r\n\r\n\r\n\r\n  <app-textarea *ngIf=\"(section?.body?.details?.IS_SENDBACK == 'true')  || (!!section?.body?.details?.Comments)\"\r\n    class=\"section-item\" [section]=\"section\" [field]=\"section?.body?.details?.Comments\" name=\"Comments\"\r\n    [labelTextReadMode]=\"i18n.translate('Comments')\" [labelTextWriteMode]=\"i18n.translate('Comments')\"\r\n    [hasColumnBreak]=\"false\" [label]=\"i18n.translate('Comments')\" [required]=\"true\" [minLength]='1' [maxLength]='2000'\r\n    [isReadOnly]=\"section?.header?.readOnly\" (emitedValue)=\"handleEmitValue($event,'Comments')\"\r\n    [errorMessage]=\"i18n.translate('lenghtMin1Max2000')\">\r\n  </app-textarea>\r\n\r\n\r\n\r\n  &lt;!&ndash; <app-file-uploader   class=\"section-item\" [section]=\"section\" [field]=\"section?.body?.details?.attachment\" name=\"attachment\" [labelTextReadMode]=\"i18n.translate('attachment')\"\r\n    [labelTextWriteMode]=\"i18n.translate('attachment')\"   [hasColumnBreak]=\"false\"  [label]=\"i18n.translate('attachment')\"\r\n\r\n    [required]=\"true\"    [multiple]=\"true\"    [displayedFiles]=\"section?.body?.details?.attachment\"\r\n     [isReadOnly]=\"section?.header?.readOnly\"  (emitedValue)=\"handleEmitValue($event,'attachment')\"[callApi]=\"true\">\r\n  </app-file-uploader> &ndash;&gt;\r\n\r\n\r\n\r\n\r\n  <app-attachment-section class=\"section-item full\" [field]=\"section?.body?.details?.attachment\" [labelTextReadMode]=\"\"\r\n    [labelTextWriteMode]=\"\" [hasColumnBreak]=\"\" [label]=\"\" [required]=\"false\" [isRequired]=\"true\"\r\n    [isReadOnly]=\"section?.header?.readOnly\" [attachments]=\"section?.body?.details?.attachment\"\r\n    (emitedValue)=\"handleEmitValue($event,'attachment')\">\r\n  </app-attachment-section>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n-->\r\n\r\n</div>\r\n\r\n\r\n<!--<div class=\"mt-4\" *ngIf=\"!section?.header?.readOnly\">\r\n\r\n  <div class=\"d-flex align-items-center gap-3\" *ngIf=\"lov?.decision?.type === 'button'\">\r\n    <ds-button shape=\"text\" color=\"red\" (click)=\"resetForm()\">\r\n      <span class=\"fs-16 fw-medium\">{{i18n.translate('reset')}}</span>\r\n    </ds-button>\r\n    <div class=\"d-flex flex-wrap align-items-center flex-grow-1 flex-row-reverse gap-3\">\r\n      <ng-container *ngFor=\"let item of lov?.decision?.options\">\r\n        <ds-button [ngClass]=\"{'disabled':!validForm(item?.value) || profileRequestorService.disableButtons}\"\r\n          (click)=\"onSubmit(item?.value) \" [loading]=\"profileRequestorService.isSubmitting[item?.value]\"\r\n          *ngIf=\"item?.value === 'SUBMIT'\">{{item?.description}}</ds-button>\r\n\r\n        <ds-button [ngClass]=\"{'disabled':!validForm(item?.value) || profileRequestorService.disableButtons}\"\r\n          (click)=\"onSubmit(item?.value) \" [loading]=\"profileRequestorService.isSubmitting[item?.value]\"\r\n          *ngIf=\"item?.value === 'APPROVE'\">{{item?.description}}</ds-button>\r\n        <ds-button [ngClass]=\"{'disabled':!validForm(item?.value) || profileRequestorService.disableButtons}\"\r\n          (click)=\"onSubmit(item?.value)\" shape=\"outline\" color=\"red\"\r\n          [loading]=\"profileRequestorService.isSubmitting[item?.value]\" *ngIf=\"item?.value === 'REJECT'\">\r\n          {{item?.description}}</ds-button>\r\n        <ds-button [ngClass]=\"{'disabled':!validForm(item?.value) || profileRequestorService.disableButtons}\"\r\n          (click)=\"onSubmit(item?.value)\" shape=\"outline\" color=\"red\"\r\n          [loading]=\"profileRequestorService.isSubmitting[item?.value]\" *ngIf=\"item?.value === 'CANCEL'\">\r\n          {{item?.description}}</ds-button>\r\n        <ds-button [ngClass]=\"{'disabled':!validForm(item?.value) || profileRequestorService.disableButtons}\"\r\n          (click)=\"onSubmit(item?.value)\" shape=\"outline\" [loading]=\"profileRequestorService.isSubmitting[item?.value]\"\r\n          *ngIf=\"item?.value === 'SENDBACK'\">\r\n          {{item?.description}}</ds-button>\r\n\r\n        <ds-button [ngClass]=\"{'disabled':!validForm(item?.value) || profileRequestorService.disableButtons}\"\r\n          (click)=\"onSubmit(item?.value) \" [loading]=\"profileRequestorService.isSubmitting[item?.value]\"\r\n          *ngIf=\"!(item?.value === 'SUBMIT' || item?.value === 'APPROVE' || item?.value === 'SENDBACK' || item?.value === 'REJECT' || item?.value === 'CANCEL')\">\r\n          {{item?.description}}</ds-button>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"d-flex flex-wrap align-items-center flex-grow-1 justify-content-end gap-3\"\r\n    *ngIf=\"lov?.decision?.type !== 'button'\">\r\n    <ds-button shape=\"text\" color=\"red\" (click)=\"resetForm()\">\r\n      <span class=\"fs-16 fw-medium\">{{i18n.translate('reset')}}</span>\r\n    </ds-button>\r\n    <ds-button [ngClass]=\"{'disabled':!validForm('SUBMIT')}\"\r\n      [loading]=\"profileRequestorService.isSubmitting[item?.value]\"\r\n      (click)=\"onSubmit('SUBMIT') || profileRequestorService.disableButtons\">\r\n      {{i18n.translate('submit')}}\r\n    </ds-button>\r\n  </div>\r\n</div>-->\r\n", styles: [".form-section-divide{--form-section-columns: 1fr 1fr}@media (max-width: 756px){.form-section-divide{--form-section-columns: 100%}}.form-section-divide .full{grid-column:1/-1}.head-title{position:relative;margin-bottom:12px}.head-title h3{display:inline-block;color:#8e9aa0;font-size:14px;font-weight:500;background-color:#fff;padding-inline-end:20px;position:relative;z-index:2;margin:0}.head-title:after{content:\"\";position:absolute;width:100%;height:1px;background-color:#dee0e2;top:50%;left:0;right:0;transform:translateY(-50%);z-index:1}.chamber{margin-bottom:20px}.chamber .chamber-content{background-color:#f8f8f8;padding:20px}.chamber .chamber-content .chamber-select{display:flex}.chamber .chamber-content mat-checkbox{font-size:14px}\n"] }]
-        }], ctorParameters: () => [{ type: CoreI18nService }], propDecorators: { isReadOnly: [{
+                        NgClass,
+                        InputComponent,
+                        NgIf,
+                        NgForOf,
+                        ActionButtonsComponent,
+                        ReactiveFormsModule,
+                    ], template: "<div\r\n  [ngClass]=\"{'form-section-divide form-section':!section?.header?.readOnly,'info-section':section?.header?.readOnly}\">\r\n\r\n\r\n  <ds-alert class=\"full\" type=\"warning\" icon=\"info\">\r\n\r\n    <div class=\"d-flex gap-2\">\r\n\r\n      Request details working fine\r\n\r\n    </div>\r\n\r\n  </ds-alert>\r\n\r\n  <form [formGroup]=\"fieldsForm\">\r\n    <app-input formControlName=\"input1\" ></app-input>\r\n  </form>\r\n\r\n</div>\r\n@if (!section?.header?.readOnly) {\r\n  <div class=\"mt-4\">\r\n    <lib-action-buttons\r\n      [lovOptions]=\"lov?.['decision']?.options\"\r\n      [lovType]=\"lov?.['decision']?.type\"\r\n    />\r\n  </div>\r\n}\r\n", styles: [".form-section-divide{--form-section-columns: 1fr 1fr}@media (max-width: 756px){.form-section-divide{--form-section-columns: 100%}}.form-section-divide .full{grid-column:1/-1}.head-title{position:relative;margin-bottom:12px}.head-title h3{display:inline-block;color:#8e9aa0;font-size:14px;font-weight:500;background-color:#fff;padding-inline-end:20px;position:relative;z-index:2;margin:0}.head-title:after{content:\"\";position:absolute;width:100%;height:1px;background-color:#dee0e2;top:50%;left:0;right:0;transform:translateY(-50%);z-index:1}.chamber{margin-bottom:20px}.chamber .chamber-content{background-color:#f8f8f8;padding:20px}.chamber .chamber-content .chamber-select{display:flex}.chamber .chamber-content mat-checkbox{font-size:14px}\n"] }]
+        }], ctorParameters: () => [{ type: CoreI18nService }, { type: i1$2.FormBuilder }, { type: ActionStateService }], propDecorators: { isReadOnly: [{
                 type: Input
             }], section: [{
                 type: Input
@@ -6590,8 +6687,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
 
 var segmentDynamicLoaderConfiguration = {
     roleToApprovalSectionMapping: {
-        wpo_d: GeneralApproverSectionComponent,
-        wpo_gm: GeneralApproverSectionComponent
+        vpr_d: GeneralApproverSectionComponent
     }
 };
 
@@ -6684,7 +6780,7 @@ class CoreAppComponent {
     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: 
+        ], ngImport: i0, template: "<core-layout>\r\n  @if (!loading['form']) {\r\n    <core-service-header\r\n      [isLoading]=\"false\"\r\n      [formTitle]=\"formTitle\"\r\n      [form]=\"form\">\r\n    </core-service-header>\r\n  <app-workflow-section\r\n      workflow\r\n      [form]=\"form\"\r\n       [segmentDynamicLoaderService]=\"segmentDynamicLoader\"\r\n      [sections]=\"form?.sections\">\r\n \r\n      <app-request-details-section [section]=\"form?.sections[0]\" [lov]=\"form?.lovs\" className=\"form-section\"></app-request-details-section>\r\n      <!--      [isReadOnly]=\"form.sections[0].header.readOnly\"-->\r\n    </app-workflow-section>\r\n  } @else {\r\n    <core-service-header header [formTitle]=\"formTitle\" [isLoading]=\"true\">\r\n    </core-service-header>\r\n  }\r\n</core-layout>\r\n", styles: [""], dependencies: [{ kind: "component", type: 
                 // DynamicModule,
                 LayoutComponent, selector: "core-layout", inputs: ["form", "formTitle", "isLoading", "serviceBrief"] }, { kind: "component", type: ServiceHeaderComponent, selector: "core-service-header", inputs: ["form", "showHistory", "isLoading", "showApprovalHistory", "approvalHistory", "creationDate", "formTitle", "section", "serviceBrief"] }, { kind: "component", type: WorkflowSectionComponent, selector: "app-workflow-section", inputs: ["sections", "isReadOnly", "isLoading", "form", "contentClass", "sectionsController", "segmentDynamicLoaderService", "sectionFormComponent", "sectionName"], outputs: ["sectionSubmitted"] }, { kind: "component", type: RequestDetailsSectionComponent, selector: "app-request-details-section", inputs: ["isReadOnly", "section", "lov", "className"] }] });
 }
@@ -6698,7 +6794,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                         RequestDetailsSectionComponent
                     ], providers: [
                         { provide: DynamicComponentInjectorToken, useValue: { /* your value here */} }
-                    ], template: "<core-layout>\r\n  @if (!loading['form']) {\r\n    <core-service-header\r\n      [isLoading]=\"false\"\r\n      [formTitle]=\"formTitle\"\r\n      [form]=\"form\">\r\n    </core-service-header>\r\n    <app-workflow-section\r\n      workflow\r\n      [form]=\"form\"\r\n       [segmentDynamicLoaderService]=\"segmentDynamicLoader\"\r\n      [sections]=\"form?.sections\">\r\n      <app-request-details-section [section]=\"form?.sections[0]\" [lov]=\"form?.lovs\" className=\"form-section\"></app-request-details-section>\r\n      <!--      [isReadOnly]=\"form.sections[0].header.readOnly\"-->\r\n    </app-workflow-section>\r\n  } @else {\r\n    <core-service-header header [formTitle]=\"formTitle\" [isLoading]=\"true\">\r\n    </core-service-header>\r\n  }\r\n</core-layout>\r\n" }]
+                    ], template: "<core-layout>\r\n  @if (!loading['form']) {\r\n    <core-service-header\r\n      [isLoading]=\"false\"\r\n      [formTitle]=\"formTitle\"\r\n      [form]=\"form\">\r\n    </core-service-header>\r\n  <app-workflow-section\r\n      workflow\r\n      [form]=\"form\"\r\n       [segmentDynamicLoaderService]=\"segmentDynamicLoader\"\r\n      [sections]=\"form?.sections\">\r\n \r\n      <app-request-details-section [section]=\"form?.sections[0]\" [lov]=\"form?.lovs\" className=\"form-section\"></app-request-details-section>\r\n      <!--      [isReadOnly]=\"form.sections[0].header.readOnly\"-->\r\n    </app-workflow-section>\r\n  } @else {\r\n    <core-service-header header [formTitle]=\"formTitle\" [isLoading]=\"true\">\r\n    </core-service-header>\r\n  }\r\n</core-layout>\r\n" }]
         }], ctorParameters: () => [{ type: SegmentDynamicLoaderService }, { type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
@@ -7203,5 +7299,5 @@ const MY_LIB_CONFIG_TOKEN = new InjectionToken('MyLibConfig');
  * Generated bundle index. Do not edit.
  */
 
-export { ArOnlyDirective, AttachmentSectionComponent, AttachmentSectionDataComponent, BaseComponent, BuiltInCustomValidators, COMMENT_CONTAINER, CheckBoxComponent, CommentSectionComponent, CommentsDrop, ConfirmDialogComponent, ConfirmationPopupComponent, CoreAppComponent, CoreI18nService, CoreService, CustomSearchableComponent, DATE_DASH, DATE_SLASH, DATE_TIME, DONT_SHOW, DatePickerComponent, DateRangePickerComponent, DeleteDialogComponent, DeletePopupComponent, DocsUploaderComponent, EnOnlyDirective, FALSE_BOOL, FALSE_STRING, FEEDBACK_CONTAINER, FEEDBACK_STATUS_REQUEST, FEEDBACK_STATUS_RESPOND, FEEDBACK_STATUS_RESPONDED, FEEDBACK_STATUS_WAITING, FORM_STATUS_APPROVED, FORM_STATUS_CANCELLED, FORM_STATUS_COMPLETED, FORM_STATUS_NEW, FORM_STATUS_PENDING, FORM_STATUS_REJECTED, FORM_STATUS_SEND_BACK, FeedBackService, FeedbackSectionComponent, Form, FormLabelComponent, FormSectionComponent, FormValidation, FormatAsPasswordPipe, FormatTimePipe, GETSIPORTENTRYGROUPS, GETSIPORTENTRYLOCATIONS, HAS_COMMENTS, HEADER_CONTENT_TYPE_FORM, HTTP_METHOD_GET, HTTP_METHOD_POST, HTTP_METHOD_PUT, HTTP_PROTOCOL_HTTP, HTTP_PROTOCOL_HTTPS, Header, IGATE_STATIC_ASSET_PROFILE_PHOTO_URL, INBOX_STATUS_PENDING, INBOX_STATUS_PROCESSED, INBOX_STATUS_SENT, InboxItem, InfoItemComponent, InputComponent, InputCurrencyComponent, InputEmailComponent, InputMaskComponent, InputNumberComponent, InputTelephoneComponent, LANGUAGE_CODE_AR, LANGUAGE_CODE_EN, LOGOUT_URL, LayoutComponent, MY_LIB_CONFIG_TOKEN, MainRequestDetailsComponent, Messages, MycurrencyDirective, MycurrencyPipe, NO_COMMENTS, NO_VALUE, PROCESS_NAME_CODE, PROFILE_CONTAINER, ProfileInfoDrop, ProfileSectionComponent, READ_ONLY, REPORT, ROLE_REQUESTER, RadioComponent, RepeatedListComponent, SECTION_ID_APPROVAL_PARTIAL_NAME, SECTION_ID_DM_PARTIAL_ROLE, SECTION_ID_EMP_INFO_APPROVAL_PARTIAL_ROLE, SECTION_ID_EXECUTE_PARTIAL_ROLE, SECTION_ID_GM_PARTIAL_ROLE, SECTION_ID_NOTHING_PARTIAL_NAME, SECTION_ID_PAYROLL_APPROVAL_PARTIAL_ROLE, SECTION_ID_PERFORM_PARTIAL_ROLE, SECTION_ID_REQUESTER_PARTIAL_NAME, SECTION_ID_REQUEST_DETAILS, SECTION_ID_SM_PARTIAL_ROLE, SECTION_ID_SVP_PARTIAL_ROLE, SECTION_ID_VP_PARTIAL_ROLE, SECTION_STATUS_APPROVED, SECTION_STATUS_PENDING, SECTION_STATUS_UNSATISFIED, SERVICE_NAME_CEP, SERVICE_NAME_DP_CREATE_FEEDBACK, SERVICE_NAME_DP_INBOX_ITEM, SERVICE_NAME_DP_LOAD_HISTORY, SERVICE_NAME_DP_SEARCH_EMPLOYEE, SERVICE_NAME_DP_UPDATE_FEEDBACK, SERVICE_NAME_DP_UPDATE_INBOX_ITEM, SERVICE_NAME_MAF, SERVICE_NAME_WM_CHILD_FORM, SERVICE_NAME_WM_DRAFT_FORM, SERVICE_NAME_WM_FORM, SERVICE_NAME_WM_GET_APPROVED_REQUEST, SERVICE_NAME_WM_GET_MY_APPROVED_REQUEST, SERVICE_NAME_WM_HTML_GENERATOR, STATE_MACHINE_ACTION_CALC, STATE_MACHINE_ACTION_COMMONAPI, STATE_MACHINE_ACTION_CONVERT, STATE_MACHINE_ACTION_EMPLOYEE_PROFILE, STATE_MACHINE_ACTION_FAILURE, STATE_MACHINE_ACTION_GET_APPROVED_REQUEST, STATE_MACHINE_ACTION_GET_APPROVED_REQUEST_RESPONSE, STATE_MACHINE_ACTION_GET_FEEDBACK, STATE_MACHINE_ACTION_GET_INBOX_ITEM, STATE_MACHINE_ACTION_HANDLE_ERROR, STATE_MACHINE_ACTION_INBOX_ITEM_RESPONSE, STATE_MACHINE_ACTION_LOAD_FILE, STATE_MACHINE_ACTION_LOAD_FORM, STATE_MACHINE_ACTION_LOAD_HISTORY, STATE_MACHINE_ACTION_PDF, STATE_MACHINE_ACTION_PPROVED_REQUESTS, STATE_MACHINE_ACTION_PROJECT_CEP, STATE_MACHINE_ACTION_PROJECT_MAF, STATE_MACHINE_ACTION_SEARCH, STATE_MACHINE_ACTION_SEARCH_EMPLOYEE, STATE_MACHINE_ACTION_SET_FLAG, STATE_MACHINE_ACTION_SHOW_PRINT, STATE_MACHINE_ACTION_SUBMIT_FEEDBACK, STATE_MACHINE_ACTION_SUBMIT_FORM, STATE_MACHINE_ACTION_SUCCESS, STATE_MACHINE_ACTION_SUCCESS_HISTORY, STATE_MACHINE_ACTION_SUCCESS_INBOX_ITEM, STATE_MACHINE_ACTION_SUCCESS_PRINT, STATE_MACHINE_ACTION_SUCCESS_RESPONSE, STATE_MACHINE_ACTION_SUCCESS_SERVICES, STATE_MACHINE_ACTION_SUCCESS_USERS, STATE_MACHINE_ACTION_SUCCESS_WM, STATE_MACHINE_ACTION_UPDATE_FEEDBACK, STATE_MACHINE_ACTION_USER_CEP, STATE_MACHINE_ACTION_USER_MAF, STATE_MACHINE_STATUS_ERROR, STATE_MACHINE_STATUS_FETCHING, STATE_MACHINE_STATUS_IDLE, STATE_MACHINE_STATUS_RESULT, STATE_MACHINE_STATUS_SENDING, STATE_NAME_DP_GET_FEEDBACK, SearchEmployeeComponent, Section, SectionHeader, SelectComponent, ServiceHeaderComponent, SidenavService, SpecialCharacterDirective, StatusComponent, SubmitDialogComponent, TARGET_SERVER_DP, TARGET_SERVER_WM, TRUE_BOOL, TRUE_STRING, TableListComponent, TermsConditionsComponent, TextDirective, TextareaComponent, TitleSectionComponent, ToggleButtonComponent, URL_SEPARATOR, WM_ACTION_SAVE, WM_ACTION_SAVE_CHANGES, WM_ACTION_SUBMIT, WRITE_MODE, WorkflowSectionComponent, dataURItoBlob, encodePassword, handelErrorResponse, isValidData, stringToBooleanPipe, validateSAID };
+export { ArOnlyDirective, AttachmentSectionComponent, AttachmentSectionDataComponent, BaseComponent, BuiltInCustomValidators, COMMENT_CONTAINER, CheckBoxComponent, CommentSectionComponent, CommentsDrop, ConfirmDialogComponent, ConfirmationPopupComponent, CoreAppComponent, CoreI18nService, CoreService, CustomSearchableComponent, DATE_DASH, DATE_SLASH, DATE_TIME, DONT_SHOW, DatePickerComponent, DateRangePickerComponent, DeleteDialogComponent, DeletePopupComponent, DocsUploaderComponent, EnOnlyDirective, FALSE_BOOL, FALSE_STRING, FEEDBACK_CONTAINER, FEEDBACK_STATUS_REQUEST, FEEDBACK_STATUS_RESPOND, FEEDBACK_STATUS_RESPONDED, FEEDBACK_STATUS_WAITING, FORM_STATUS_APPROVE, FORM_STATUS_APPROVED, FORM_STATUS_CANCEL, FORM_STATUS_CANCELLED, FORM_STATUS_COMPLETED, FORM_STATUS_NEW, FORM_STATUS_PENDING, FORM_STATUS_REJECT, FORM_STATUS_REJECTED, FORM_STATUS_SEND_BACK, FeedBackService, FeedbackSectionComponent, Form, FormLabelComponent, FormSectionComponent, FormValidation, FormatAsPasswordPipe, FormatTimePipe, GETSIPORTENTRYGROUPS, GETSIPORTENTRYLOCATIONS, HAS_COMMENTS, HEADER_CONTENT_TYPE_FORM, HTTP_METHOD_GET, HTTP_METHOD_POST, HTTP_METHOD_PUT, HTTP_PROTOCOL_HTTP, HTTP_PROTOCOL_HTTPS, Header, IGATE_STATIC_ASSET_PROFILE_PHOTO_URL, INBOX_STATUS_PENDING, INBOX_STATUS_PROCESSED, INBOX_STATUS_SENT, InboxItem, InfoItemComponent, InputComponent, InputCurrencyComponent, InputEmailComponent, InputMaskComponent, InputNumberComponent, InputTelephoneComponent, LANGUAGE_CODE_AR, LANGUAGE_CODE_EN, LOGOUT_URL, LayoutComponent, MY_LIB_CONFIG_TOKEN, MainRequestDetailsComponent, Messages, MycurrencyDirective, MycurrencyPipe, NO_COMMENTS, NO_VALUE, PROCESS_NAME_CODE, PROFILE_CONTAINER, ProfileInfoDrop, ProfileSectionComponent, READ_ONLY, REPORT, ROLE_REQUESTER, RadioComponent, RepeatedListComponent, SECTION_ID_APPROVAL_PARTIAL_NAME, SECTION_ID_DM_PARTIAL_ROLE, SECTION_ID_EMP_INFO_APPROVAL_PARTIAL_ROLE, SECTION_ID_EXECUTE_PARTIAL_ROLE, SECTION_ID_GM_PARTIAL_ROLE, SECTION_ID_NOTHING_PARTIAL_NAME, SECTION_ID_PAYROLL_APPROVAL_PARTIAL_ROLE, SECTION_ID_PERFORM_PARTIAL_ROLE, SECTION_ID_REQUESTER_PARTIAL_NAME, SECTION_ID_REQUEST_DETAILS, SECTION_ID_SM_PARTIAL_ROLE, SECTION_ID_SVP_PARTIAL_ROLE, SECTION_ID_VP_PARTIAL_ROLE, SECTION_STATUS_APPROVED, SECTION_STATUS_PENDING, SECTION_STATUS_UNSATISFIED, SERVICE_NAME_CEP, SERVICE_NAME_DP_CREATE_FEEDBACK, SERVICE_NAME_DP_INBOX_ITEM, SERVICE_NAME_DP_LOAD_HISTORY, SERVICE_NAME_DP_SEARCH_EMPLOYEE, SERVICE_NAME_DP_UPDATE_FEEDBACK, SERVICE_NAME_DP_UPDATE_INBOX_ITEM, SERVICE_NAME_MAF, SERVICE_NAME_WM_CHILD_FORM, SERVICE_NAME_WM_DRAFT_FORM, SERVICE_NAME_WM_FORM, SERVICE_NAME_WM_GET_APPROVED_REQUEST, SERVICE_NAME_WM_GET_MY_APPROVED_REQUEST, SERVICE_NAME_WM_HTML_GENERATOR, STATE_MACHINE_ACTION_CALC, STATE_MACHINE_ACTION_COMMONAPI, STATE_MACHINE_ACTION_CONVERT, STATE_MACHINE_ACTION_EMPLOYEE_PROFILE, STATE_MACHINE_ACTION_FAILURE, STATE_MACHINE_ACTION_GET_APPROVED_REQUEST, STATE_MACHINE_ACTION_GET_APPROVED_REQUEST_RESPONSE, STATE_MACHINE_ACTION_GET_FEEDBACK, STATE_MACHINE_ACTION_GET_INBOX_ITEM, STATE_MACHINE_ACTION_HANDLE_ERROR, STATE_MACHINE_ACTION_INBOX_ITEM_RESPONSE, STATE_MACHINE_ACTION_LOAD_FILE, STATE_MACHINE_ACTION_LOAD_FORM, STATE_MACHINE_ACTION_LOAD_HISTORY, STATE_MACHINE_ACTION_PDF, STATE_MACHINE_ACTION_PPROVED_REQUESTS, STATE_MACHINE_ACTION_PROJECT_CEP, STATE_MACHINE_ACTION_PROJECT_MAF, STATE_MACHINE_ACTION_SEARCH, STATE_MACHINE_ACTION_SEARCH_EMPLOYEE, STATE_MACHINE_ACTION_SET_FLAG, STATE_MACHINE_ACTION_SHOW_PRINT, STATE_MACHINE_ACTION_SUBMIT_FEEDBACK, STATE_MACHINE_ACTION_SUBMIT_FORM, STATE_MACHINE_ACTION_SUCCESS, STATE_MACHINE_ACTION_SUCCESS_HISTORY, STATE_MACHINE_ACTION_SUCCESS_INBOX_ITEM, STATE_MACHINE_ACTION_SUCCESS_PRINT, STATE_MACHINE_ACTION_SUCCESS_RESPONSE, STATE_MACHINE_ACTION_SUCCESS_SERVICES, STATE_MACHINE_ACTION_SUCCESS_USERS, STATE_MACHINE_ACTION_SUCCESS_WM, STATE_MACHINE_ACTION_UPDATE_FEEDBACK, STATE_MACHINE_ACTION_USER_CEP, STATE_MACHINE_ACTION_USER_MAF, STATE_MACHINE_STATUS_ERROR, STATE_MACHINE_STATUS_FETCHING, STATE_MACHINE_STATUS_IDLE, STATE_MACHINE_STATUS_RESULT, STATE_MACHINE_STATUS_SENDING, STATE_NAME_DP_GET_FEEDBACK, SearchEmployeeComponent, Section, SectionHeader, SelectComponent, ServiceHeaderComponent, SidenavService, SpecialCharacterDirective, StatusComponent, SubmitDialogComponent, TARGET_SERVER_DP, TARGET_SERVER_WM, TRUE_BOOL, TRUE_STRING, TableListComponent, TermsConditionsComponent, TextDirective, TextareaComponent, TitleSectionComponent, ToggleButtonComponent, URL_SEPARATOR, WM_ACTION_SAVE, WM_ACTION_SAVE_CHANGES, WM_ACTION_SUBMIT, WRITE_MODE, WorkflowSectionComponent, dataURItoBlob, encodePassword, handelErrorResponse, isValidData, stringToBooleanPipe, validateSAID };
 //# sourceMappingURL=bpm-core.mjs.map