bpm-core 0.0.21 → 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';
@@ -145,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';
@@ -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: [{
@@ -5662,7 +5726,7 @@ class FormSectionComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: FormSectionComponent, deps: [{ token: CoreI18nService }, { token: CoreService }, { token: SidenavService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: FormSectionComponent, isStandalone: true, selector: "app-form-section", inputs: { requestDetails: "requestDetails", section: "section", form: "form", lov: "lov", isReadOnly: "isReadOnly", controllers: "controllers", segmentDynamicLoaderService: "segmentDynamicLoaderService", sectionFormComponent: "sectionFormComponent", sectionName: "sectionName" }, ngImport: i0, template: "<mat-expansion-panel\r\n  class=\"mb-4\" [expanded]=\"isExpanded\" *ngIf=\"form?.header?.status?.['key'] !== 'NEW' \" hideToggle\r\n  #approvalPanel=\"matExpansionPanel\">\r\n  <mat-expansion-panel-header>\r\n\r\n    <div class=\"approval-panel-container\">\r\n      <div class=\"d-flex gap-2 flex-grow-1 approval-panel-title\">\r\n        <ds-status\r\n          status=\"{{statusClass(sectionStatusKey)}}\" no-opacity icon\r\n          class=\"circle-status d-none d-sm-inline-block\">\r\n          <ds-icon icon=\"{{statusIcon(sectionStatusKey)}}\"></ds-icon>\r\n        </ds-status>\r\n        <div class=\"d-flex flex-column flex-grow-1\">\r\n          <span class=\"fs-16 fw-medium m-0\"> {{ sectionName }}</span>\r\n          <bdi class=\"fs-12 fc-dark-gray fw-normal line-height-1 d-block mt-1\" *ngIf=\"section.header?.processedBy\">\r\n            {{ processingDate }}\r\n          </bdi>\r\n        </div>\r\n      </div>\r\n      <div class=\"approval-panel-details gap-1\">\r\n\r\n        <ng-container *ngIf=\"(!section?.body?.details?.['stage0']?.['isStage0'] || section?.body?.details?.['stage0']?.['isStage0'] === 'false')\">\r\n          <div\r\n            class=\"d-flex align-items-center gap-3\" *ngIf=\"section?.header?.personTo;\"\r\n            (click)=\"$event.stopImmediatePropagation();\">\r\n            <div\r\n              (click)=\"toggleSmallProfileInfo($event, 'recipient')\"\r\n              class=\"d-flex align-items-center gap-2 radius-3 h-40\"\r\n              [ngClass]=\"{'user-avatar-name px-0 px-md-2': !section?.header?.delegatedTo, 'p-0': section?.header?.delegatedTo}\">\r\n              <ds-avatar image=\"{{section?.header?.personToThumbnail}}\" size=\"small\" class=\"user-avatar\"></ds-avatar>\r\n              <span\r\n                class=\"fs-14 fw-medium d-inline-block panel-user-name text-truncate\" [ngClass]=\"{'panel-user-only': !section?.header?.delegatedTo}\"\r\n                *ngIf=\"!section?.header?.delegatedTo\">{{ section?.header?.personTo }}</span>\r\n            </div>\r\n\r\n            <div\r\n              *ngIf=\"section?.header?.delegatedTo\" class=\"d-flex align-items-center gap-3\"\r\n              (click)=\"toggleSmallProfileInfo($event, 'delegate')\">\r\n              <img\r\n                class=\"rotate-arrow\"\r\n                alt=\"\"\r\n                src=\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMSIgaGVpZ2h0PSIxMyIgdmlld0JveD0iMCAwIDIxIDEzIj48cGF0aCBkPSJNMjEsNy43NjNhMS42MjEsMS42MjEsMCwwLDEtLjQ0Ny41OTMsMS4zMDYsMS4zMDYsMCwwLDEtLjc1LjE5NGMtNy4yODQsMC04LjU2OCwwLTE1Ljg1MywwSDMuNjY5TDMuNjMsOC42Yy4wNzcuMDY0LjE1OC4xMjQuMjI5LjE5NHExLjcxLDEuNjksMy40MiwzLjM4MWExLjAyMywxLjAyMywwLDAsMSwuMjkxLDEuMDc5Ljk5Mi45OTIsMCwwLDEtLjguNzE5LDEuMDUzLDEuMDUzLDAsMCwxLTEtLjMzMVEzLjgzMSwxMS43MTksMS44ODYsOS44Yy0uNDQyLS40MzctLjg3OS0uODgxLTEuMzMtMS4zMDlBNC41NzIsNC41NzIsMCwwLDEsMCw3LjgxNFY3LjE4NUEzMC43ODMsMzAuNzgzLDAsMCwxLDIuNzMsNC4zNzFjMS0xLjAyNywyLjAzOC0yLjAyNSwzLjA2My0zLjAzMkExLjA0OSwxLjA0OSwwLDEsMSw3LjI3NywyLjgyQzYuNCwzLjcsNS41MDksNC41Nyw0LjYyNSw1LjQ0NmMtLjMyMy4zMjEtLjY0NC42NDUtLjk3My45NzYuMDg0LjA1OS4xODEuMDI3LjI3LjAyNyw3LjI1OCwwLDguNTE2LDAsMTUuNzc1LDBBMS4xMjksMS4xMjksMCwwLDEsMjEsNy4yOXYuNDcyWiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAtMC45OTkpIiBmaWxsPSIjYTU0ZWUxIi8+PC9zdmc+\"/>\r\n              <div class=\"d-flex align-items-center gap-2 px-0 px-md-2 radius-3 user-avatar-name h-40\">\r\n                <ds-avatar image=\"{{section?.header?.delegatedToThumbnail}}\" size=\"small\" class=\"user-avatar\"></ds-avatar>\r\n                <span\r\n                  class=\"fs-14 fw-medium d-inline-block panel-user-name text-truncate\">{{ section?.header?.delegatedTo }}</span>\r\n              </div>\r\n\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n        <ds-status\r\n          class=\"main-status\" *ngIf=\"section?.body?.details?.['decision']?.key;\"\r\n          status=\"{{statusClass(section?.body?.details?.['decision']?.key)}}\">{{ section?.body?.details?.['decision']?.value }}\r\n        </ds-status>\r\n      </div>\r\n\r\n      <div class=\"approval-panel-toggle\">\r\n        <ds-icon icon=\"plus-1\" class=\"fs-20 fc-coral\" *ngIf=\"!approvalPanel.expanded\"></ds-icon>\r\n        <ds-icon icon=\"minus\" class=\"fs-20 fc-dark-gray\" *ngIf=\"approvalPanel.expanded\"></ds-icon>\r\n      </div>\r\n\r\n    </div>\r\n  </mat-expansion-panel-header>\r\n  <section class=\"border-top pt-4\">\r\n    Test\r\n    <ng-container  *ngComponentOutlet=\"sectionFormComponent; ndcDynamicInputs: input\"></ng-container>\r\n  </section>\r\n\r\n</mat-expansion-panel>\r\n<ng-container *ngIf=\"form?.header?.status?.['key'] == 'NEW' \">\r\n  <ng-container *ngComponentOutlet=\"sectionFormComponent; ndcDynamicInputs: input\"></ng-container>\r\n</ng-container>\r\n", styles: [":host ::ng-deep .mat-expansion-panel-content{background:#fff!important}:host .mat-expansion-panel-content{background:#fff!important}:host .approval-panel-container{display:grid;grid-template-columns:40% calc(60% - 45px) 20px;grid-template-areas:\"title details toggle\";gap:.75rem;place-content:space-between;align-items:center;flex-grow:1;width:100%}@media (max-width: 991px){:host .approval-panel-container{grid-template-columns:calc(100% - 45px) 20px;grid-template-areas:\"title toggle\" \"details details\"}}:host .approval-panel-container .approval-panel-title{grid-area:title}:host .approval-panel-container .panel-user-name{max-width:120px}@media (max-width: 768px){:host .approval-panel-container .panel-user-name.panel-ueser-only{max-width:140px}:host .approval-panel-container .panel-user-name:not(.panel-ueser-only){max-width:90px}}:host .approval-panel-container .approval-panel-details{display:flex;align-items:center;justify-content:space-between;grid-area:details}:host .approval-panel-container .approval-panel-toggle{grid-area:toggle;display:flex;align-items:center;justify-content:center;width:20px}:host ::ng-deep ds-avatar.user-avatar .avatar{--default-size: 25px}@media (min-width: 768px){:host ::ng-deep ds-avatar.user-avatar .avatar{--default-size: 31px;--avatar-border: 3px solid var(--light-gray)}}@media (min-width: 768px){:host ::ng-deep .user-avatar-name{padding-inline-end:1rem!important}}:host .circle-status::part(base){--status-radius: 50%;--status-size: 18px;--status-fs: 80% }:host .panel-title{min-width:40%;width:40%}@media (max-width: 576px){:host .panel-title{min-width:100%!important;width:100%!important}}:host .panel-user-status{min-width:60%;width:60%;display:flex;align-items:center;justify-content:space-between}@media (max-width: 576px){:host .panel-user-status{min-width:100%!important;width:100%!important}:host .panel-user-status .user-delegate{min-width:auto}:host .panel-user-status .main-status::part(base){--status-width: 50px}}\n"], dependencies: [{ kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i2$1.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i2$1.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: ComponentOutletIoDirective, selector: "[ngComponentOutletNdcDynamicInputs],[ngComponentOutletNdcDynamicOutputs]", inputs: ["ngComponentOutletNdcDynamicInputs", "ngComponentOutletNdcDynamicOutputs"], exportAs: ["ndcDynamicIo"] }, { kind: "ngmodule", type: SatPopoverModule }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: DynamicModule }, { kind: "directive", type: i3.ComponentOutletInjectorDirective, selector: "[ngComponentOutlet]", exportAs: ["ndcComponentOutletInjector"] }] });
+    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,
@@ -5675,7 +5739,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                         SatPopoverModule,
                         NgClass,
                         DynamicModule
-                    ], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<mat-expansion-panel\r\n  class=\"mb-4\" [expanded]=\"isExpanded\" *ngIf=\"form?.header?.status?.['key'] !== 'NEW' \" hideToggle\r\n  #approvalPanel=\"matExpansionPanel\">\r\n  <mat-expansion-panel-header>\r\n\r\n    <div class=\"approval-panel-container\">\r\n      <div class=\"d-flex gap-2 flex-grow-1 approval-panel-title\">\r\n        <ds-status\r\n          status=\"{{statusClass(sectionStatusKey)}}\" no-opacity icon\r\n          class=\"circle-status d-none d-sm-inline-block\">\r\n          <ds-icon icon=\"{{statusIcon(sectionStatusKey)}}\"></ds-icon>\r\n        </ds-status>\r\n        <div class=\"d-flex flex-column flex-grow-1\">\r\n          <span class=\"fs-16 fw-medium m-0\"> {{ sectionName }}</span>\r\n          <bdi class=\"fs-12 fc-dark-gray fw-normal line-height-1 d-block mt-1\" *ngIf=\"section.header?.processedBy\">\r\n            {{ processingDate }}\r\n          </bdi>\r\n        </div>\r\n      </div>\r\n      <div class=\"approval-panel-details gap-1\">\r\n\r\n        <ng-container *ngIf=\"(!section?.body?.details?.['stage0']?.['isStage0'] || section?.body?.details?.['stage0']?.['isStage0'] === 'false')\">\r\n          <div\r\n            class=\"d-flex align-items-center gap-3\" *ngIf=\"section?.header?.personTo;\"\r\n            (click)=\"$event.stopImmediatePropagation();\">\r\n            <div\r\n              (click)=\"toggleSmallProfileInfo($event, 'recipient')\"\r\n              class=\"d-flex align-items-center gap-2 radius-3 h-40\"\r\n              [ngClass]=\"{'user-avatar-name px-0 px-md-2': !section?.header?.delegatedTo, 'p-0': section?.header?.delegatedTo}\">\r\n              <ds-avatar image=\"{{section?.header?.personToThumbnail}}\" size=\"small\" class=\"user-avatar\"></ds-avatar>\r\n              <span\r\n                class=\"fs-14 fw-medium d-inline-block panel-user-name text-truncate\" [ngClass]=\"{'panel-user-only': !section?.header?.delegatedTo}\"\r\n                *ngIf=\"!section?.header?.delegatedTo\">{{ section?.header?.personTo }}</span>\r\n            </div>\r\n\r\n            <div\r\n              *ngIf=\"section?.header?.delegatedTo\" class=\"d-flex align-items-center gap-3\"\r\n              (click)=\"toggleSmallProfileInfo($event, 'delegate')\">\r\n              <img\r\n                class=\"rotate-arrow\"\r\n                alt=\"\"\r\n                src=\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMSIgaGVpZ2h0PSIxMyIgdmlld0JveD0iMCAwIDIxIDEzIj48cGF0aCBkPSJNMjEsNy43NjNhMS42MjEsMS42MjEsMCwwLDEtLjQ0Ny41OTMsMS4zMDYsMS4zMDYsMCwwLDEtLjc1LjE5NGMtNy4yODQsMC04LjU2OCwwLTE1Ljg1MywwSDMuNjY5TDMuNjMsOC42Yy4wNzcuMDY0LjE1OC4xMjQuMjI5LjE5NHExLjcxLDEuNjksMy40MiwzLjM4MWExLjAyMywxLjAyMywwLDAsMSwuMjkxLDEuMDc5Ljk5Mi45OTIsMCwwLDEtLjguNzE5LDEuMDUzLDEuMDUzLDAsMCwxLTEtLjMzMVEzLjgzMSwxMS43MTksMS44ODYsOS44Yy0uNDQyLS40MzctLjg3OS0uODgxLTEuMzMtMS4zMDlBNC41NzIsNC41NzIsMCwwLDEsMCw3LjgxNFY3LjE4NUEzMC43ODMsMzAuNzgzLDAsMCwxLDIuNzMsNC4zNzFjMS0xLjAyNywyLjAzOC0yLjAyNSwzLjA2My0zLjAzMkExLjA0OSwxLjA0OSwwLDEsMSw3LjI3NywyLjgyQzYuNCwzLjcsNS41MDksNC41Nyw0LjYyNSw1LjQ0NmMtLjMyMy4zMjEtLjY0NC42NDUtLjk3My45NzYuMDg0LjA1OS4xODEuMDI3LjI3LjAyNyw3LjI1OCwwLDguNTE2LDAsMTUuNzc1LDBBMS4xMjksMS4xMjksMCwwLDEsMjEsNy4yOXYuNDcyWiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAtMC45OTkpIiBmaWxsPSIjYTU0ZWUxIi8+PC9zdmc+\"/>\r\n              <div class=\"d-flex align-items-center gap-2 px-0 px-md-2 radius-3 user-avatar-name h-40\">\r\n                <ds-avatar image=\"{{section?.header?.delegatedToThumbnail}}\" size=\"small\" class=\"user-avatar\"></ds-avatar>\r\n                <span\r\n                  class=\"fs-14 fw-medium d-inline-block panel-user-name text-truncate\">{{ section?.header?.delegatedTo }}</span>\r\n              </div>\r\n\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n        <ds-status\r\n          class=\"main-status\" *ngIf=\"section?.body?.details?.['decision']?.key;\"\r\n          status=\"{{statusClass(section?.body?.details?.['decision']?.key)}}\">{{ section?.body?.details?.['decision']?.value }}\r\n        </ds-status>\r\n      </div>\r\n\r\n      <div class=\"approval-panel-toggle\">\r\n        <ds-icon icon=\"plus-1\" class=\"fs-20 fc-coral\" *ngIf=\"!approvalPanel.expanded\"></ds-icon>\r\n        <ds-icon icon=\"minus\" class=\"fs-20 fc-dark-gray\" *ngIf=\"approvalPanel.expanded\"></ds-icon>\r\n      </div>\r\n\r\n    </div>\r\n  </mat-expansion-panel-header>\r\n  <section class=\"border-top pt-4\">\r\n    Test\r\n    <ng-container  *ngComponentOutlet=\"sectionFormComponent; ndcDynamicInputs: input\"></ng-container>\r\n  </section>\r\n\r\n</mat-expansion-panel>\r\n<ng-container *ngIf=\"form?.header?.status?.['key'] == 'NEW' \">\r\n  <ng-container *ngComponentOutlet=\"sectionFormComponent; ndcDynamicInputs: input\"></ng-container>\r\n</ng-container>\r\n", styles: [":host ::ng-deep .mat-expansion-panel-content{background:#fff!important}:host .mat-expansion-panel-content{background:#fff!important}:host .approval-panel-container{display:grid;grid-template-columns:40% calc(60% - 45px) 20px;grid-template-areas:\"title details toggle\";gap:.75rem;place-content:space-between;align-items:center;flex-grow:1;width:100%}@media (max-width: 991px){:host .approval-panel-container{grid-template-columns:calc(100% - 45px) 20px;grid-template-areas:\"title toggle\" \"details details\"}}:host .approval-panel-container .approval-panel-title{grid-area:title}:host .approval-panel-container .panel-user-name{max-width:120px}@media (max-width: 768px){:host .approval-panel-container .panel-user-name.panel-ueser-only{max-width:140px}:host .approval-panel-container .panel-user-name:not(.panel-ueser-only){max-width:90px}}:host .approval-panel-container .approval-panel-details{display:flex;align-items:center;justify-content:space-between;grid-area:details}:host .approval-panel-container .approval-panel-toggle{grid-area:toggle;display:flex;align-items:center;justify-content:center;width:20px}:host ::ng-deep ds-avatar.user-avatar .avatar{--default-size: 25px}@media (min-width: 768px){:host ::ng-deep ds-avatar.user-avatar .avatar{--default-size: 31px;--avatar-border: 3px solid var(--light-gray)}}@media (min-width: 768px){:host ::ng-deep .user-avatar-name{padding-inline-end:1rem!important}}:host .circle-status::part(base){--status-radius: 50%;--status-size: 18px;--status-fs: 80% }:host .panel-title{min-width:40%;width:40%}@media (max-width: 576px){:host .panel-title{min-width:100%!important;width:100%!important}}:host .panel-user-status{min-width:60%;width:60%;display:flex;align-items:center;justify-content:space-between}@media (max-width: 576px){:host .panel-user-status{min-width:100%!important;width:100%!important}:host .panel-user-status .user-delegate{min-width:auto}:host .panel-user-status .main-status::part(base){--status-width: 50px}}\n"] }]
+                    ], 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: [{
@@ -6266,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
@@ -6631,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"] }] });
 }
@@ -6645,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]
@@ -7150,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