bpm-core 0.0.69 → 0.0.71

package/fesm2022/bpm-core.mjs

@@ -1325,11 +1325,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
 class ActionStateService {
     actionStatesSubject = new BehaviorSubject({});
     actionStates$ = this.actionStatesSubject.asObservable();
+    resetAction$ = new Subject();
     setActionValid(action, isValid) {
         const currentState = this.actionStatesSubject.value;
         currentState[action] = isValid;
         this.actionStatesSubject.next(currentState);
     }
+    resetForm() {
+        return this.resetAction$;
+    }
     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" });
 }
@@ -1754,6 +1758,7 @@ class ControlValueAccessorDirective {
     coreService;
     sanitizer;
     fb;
+    actionStateService;
     tooltip;
     isReadOnly;
     hint = '';
@@ -1791,13 +1796,14 @@ class ControlValueAccessorDirective {
     required;
     maxLength;
     isDisabled = false;
-    constructor(injector, i18n, toasterService, coreService, sanitizer, fb) {
+    constructor(injector, i18n, toasterService, coreService, sanitizer, fb, actionStateService) {
         this.injector = injector;
         this.i18n = i18n;
         this.toasterService = toasterService;
         this.coreService = coreService;
         this.sanitizer = sanitizer;
         this.fb = fb;
+        this.actionStateService = actionStateService;
     }
     ngOnInit() {
         this.setFormControl();
@@ -1838,9 +1844,9 @@ class ControlValueAccessorDirective {
     writeValue(value) {
         this.value = value;
         if (!this.value) {
-            this.startDateControl.setValue(null);
-            this.endDateControl.setValue(null);
-            this.telephoneControl.setValue(null);
+            this.startDateControl.reset();
+            this.endDateControl.reset();
+            this.telephoneControl.reset();
             this.attachments = [];
             this.searchControl.reset();
             this.employeeSearchControl.reset();
@@ -1851,7 +1857,7 @@ class ControlValueAccessorDirective {
             this.searchControl.setValue(value['value']);
             this.telephoneControl.setValue(value);
             if (this.value['value'] === '') {
-                this.control.setValue(null);
+                this.control.reset();
             }
             this.employeeSearchControl.setValue(value['personName']);
         }
@@ -1863,7 +1869,7 @@ class ControlValueAccessorDirective {
     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 }, { token: i2.ToastrService }, { token: CoreService }, { token: i3.DomSanitizer }, { token: i4.FormBuilder }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ControlValueAccessorDirective, deps: [{ token: i0.Injector }, { token: CoreI18nService }, { token: i2.ToastrService }, { token: CoreService }, { token: i3.DomSanitizer }, { token: i4.FormBuilder }, { token: ActionStateService }], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.8", type: ControlValueAccessorDirective, selector: "[appControlValueAccessor]", inputs: { tooltip: "tooltip", isReadOnly: "isReadOnly", hint: "hint", loading: "loading", placeholder: "placeholder", type: "type", showErrorMessage: "showErrorMessage", showHint: "showHint", showIfEmpty: "showIfEmpty", insideTable: "insideTable", mask: "mask", label: "label", matSuffix: "matSuffix", hasTooltip: "hasTooltip", name: "name", randomID: "randomID", multiple: "multiple", maxDate: "maxDate", minDate: "minDate", customMaxDate: "customMaxDate", customMinDate: "customMinDate" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ControlValueAccessorDirective, decorators: [{
@@ -1871,7 +1877,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
             args: [{
                     selector: '[appControlValueAccessor]',
                 }]
-        }], ctorParameters: () => [{ type: i0.Injector }, { type: CoreI18nService }, { type: i2.ToastrService }, { type: CoreService }, { type: i3.DomSanitizer }, { type: i4.FormBuilder }], propDecorators: { tooltip: [{
+        }], ctorParameters: () => [{ type: i0.Injector }, { type: CoreI18nService }, { type: i2.ToastrService }, { type: CoreService }, { type: i3.DomSanitizer }, { type: i4.FormBuilder }, { type: ActionStateService }], propDecorators: { tooltip: [{
                 type: Input
             }], isReadOnly: [{
                 type: Input
@@ -2237,12 +2243,20 @@ class CheckBoxComponent extends ControlValueAccessorDirective {
     link;
     termsBody;
     downloadCheckBox = new EventEmitter();
+    destroyRef = inject(DestroyRef);
     dialog = inject(MatDialog);
     ngOnInit() {
         super.ngOnInit();
         if (this.control.value == 'true') {
             this.control.setValue(true);
         }
+        this.actionStateService.resetAction$
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(res => {
+            if (!this.isReadOnly && this.control.enabled) {
+                this.control.reset();
+            }
+        });
     }
     openUrl() {
         window.open(this.hrefLink);
@@ -2307,11 +2321,22 @@ class CustomSearchableComponent extends ControlValueAccessorDirective {
     key = 'description';
     floatLabel = 'auto';
     className = 'bordered-input';
+    destroyRef = inject(DestroyRef);
+    ngOnInit() {
+        super.ngOnInit();
+        this.actionStateService.resetAction$
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(res => {
+            if (!this.isReadOnly && this.control.enabled) {
+                this.control.reset();
+            }
+        });
+    }
     noData = false;
     filteredOptions;
     clearInput() {
-        this.control.setValue(null);
-        this.searchControl.setValue(null);
+        this.control.reset();
+        this.searchControl.reset();
         if (!this.isReadOnly) {
             this.setFilteredOptions();
         }
@@ -2324,7 +2349,7 @@ class CustomSearchableComponent extends ControlValueAccessorDirective {
             //reset in case no value and delete or backspace pressed
             if ((e.keyCode == 8 || e.keyCode == 46) && !this.control.value) {
                 if (this.control) {
-                    this.control.setValue(null);
+                    this.control.reset();
                     this.control.markAsTouched();
                 }
                 input.focus();
@@ -2423,6 +2448,7 @@ class DatePickerComponent extends ControlValueAccessorDirective {
     showIslamic = false;
     error;
     dateFormat;
+    destroyRef = inject(DestroyRef);
     set format(_format) {
         if (_format) {
             this.dateFormat.updateDateFormat({ dateInput: _format }, { dateInput: _format });
@@ -2430,6 +2456,16 @@ class DatePickerComponent extends ControlValueAccessorDirective {
     }
     datepicker;
     floatLabel = 'auto';
+    ngOnInit() {
+        super.ngOnInit();
+        this.actionStateService.resetAction$
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(res => {
+            if (!this.isReadOnly && this.control.enabled) {
+                this.control.reset();
+            }
+        });
+    }
     ngAfterViewInit() {
         if (!this.isReadOnly && this.yearOnly)
             this.activateYearOnlyMode();
@@ -2477,7 +2513,7 @@ class DatePickerComponent extends ControlValueAccessorDirective {
         }
     }
     clearDateValue(event) {
-        this.control.setValue(null);
+        this.control.reset();
         this.control.markAsTouched();
     }
     activateYearOnlyMode() {
@@ -2570,7 +2606,18 @@ class DateRangePickerComponent extends ControlValueAccessorDirective {
     calendarType;
     startInputValue;
     endInputValue;
+    destroyRef = inject(DestroyRef);
     dateRange;
+    ngOnInit() {
+        super.ngOnInit();
+        this.actionStateService.resetAction$
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(res => {
+            if (!this.isReadOnly && this.control.enabled) {
+                this.control.reset();
+            }
+        });
+    }
     ngAfterViewInit() {
         if (!this.isReadOnly && this.yearOnly)
             this.activateYearOnlyMode();
@@ -2637,9 +2684,9 @@ class DateRangePickerComponent extends ControlValueAccessorDirective {
         this.dateRange = null;
         this.startInputValue = null;
         this.endInputValue = null;
-        this.control.setValue(null);
-        this.endDateControl.setValue(null);
-        this.startDateControl.setValue(null);
+        this.control.reset();
+        this.endDateControl.reset();
+        this.startDateControl.reset();
         this.control.markAsTouched();
         this.endDateControl.markAsTouched();
         this.startDateControl.markAsTouched();
@@ -2672,7 +2719,7 @@ class DateRangePickerComponent extends ControlValueAccessorDirective {
                 provide: MAT_DATE_FORMATS,
                 useClass: CustomDateFormat,
             },
-        ], viewQueries: [{ propertyName: "datepicker", first: true, predicate: MatDatepicker, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if(!isReadOnly) {\r\n  @if(label) {\r\n    <app-form-label [label]=\"label\" [optional]=\"!control.hasValidator(Validators['required'])\" [tooltip]=\"tooltip\"></app-form-label>\r\n  }\r\n\r\n<div class=\"datePicker\">\r\n  <mat-form-field class=\"date-range primary-form {{ className }}\"\r\n  [ngClass]=\"{\r\n    'custom-validation-error': !startDateControl.value && !endDateControl.value && startDateControl.touched\r\n   }\">\r\n    <label class=\"mat-form-content\">\r\n      <mat-date-range-input\r\n        [rangePicker]=\"picker\"\r\n        [min]=\"minDateValue\"\r\n        [max]=\"maxDateValue\"\r\n      >\r\n        <input\r\n          matStartDate\r\n          placeholder=\"{{ 'startDate' | translate }}\"\r\n          [formControl]=\"startDateControl\"\r\n          (dateInput)=\"startDateChange($event)\"\r\n          (click)=\"focusPicker(picker)\"\r\n          readonly\r\n        />\r\n        <input\r\n          matEndDate\r\n          placeholder=\"{{ 'endDate' | translate }}\"\r\n          [formControl]=\"endDateControl\"\r\n          (dateInput)=\"endDateChange($event)\"\r\n          (click)=\"focusPicker(picker)\"\r\n          readonly\r\n        />\r\n      </mat-date-range-input>\r\n    </label>\r\n\r\n    @if(control?.value) {\r\n    <ds-icon\r\n      matSuffix\r\n      icon=\"close\"\r\n      class=\"fc-coral fs-10 mx-2 cursor-pointer\"\r\n      (click)=\"clearDateValue($event)\"\r\n    ></ds-icon>\r\n    }\r\n\r\n    <mat-datepicker-toggle matSuffix [for]=\"picker\" [disableRipple]=\"true\">\r\n      <i class=\"sfi sfi-calendar-o fc-black font-18\" matDatepickerToggleIcon></i>\r\n    </mat-datepicker-toggle>\r\n\r\n    <mat-date-range-picker #picker></mat-date-range-picker>\r\n  </mat-form-field>\r\n</div>\r\n<app-validation-errors [errors]=\"control.errors\"></app-validation-errors>\r\n\r\n\r\n} @else {\r\n<ng-container>\r\n  <app-info-item\r\n    class=\"info-item w-100\"\r\n    type=\"date\"\r\n    [insideTable]=\"insideTable\"\r\n    [dateType]=\"calendarType\"\r\n    [label]=\"label\"\r\n    [value]=\"{\r\n      startDate: control.value?.startDate,\r\n      endDate: control.value?.endDate\r\n    }\"\r\n    [hasLabel]=\"!!label\"\r\n  >\r\n  </app-info-item>\r\n</ng-container>\r\n}\r\n", styles: [":host{flex-grow:1}\n"], dependencies: [{ kind: "component", type: i1$3.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: i1$3.MatDatepickerModule }, { kind: "directive", type: i1$3.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { kind: "component", type: i1$3.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i1$3.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i1$3.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i1$3.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "ngmodule", type: i2$1.MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: FormLabelComponent, selector: "app-form-label", inputs: ["tooltip", "label", "optional"] }, { kind: "component", type: ValidationErrorsComponent, selector: "app-validation-errors", inputs: ["errors", "customErrorMessages"] }, { kind: "component", type: InfoItemComponent, selector: "app-info-item", inputs: ["label", "value", "name", "type", "dateType", "multiple", "insideTable", "hasLabel", "arrayList", "actionType", "download"] }, { kind: "ngmodule", type: i4.ReactiveFormsModule }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+        ], viewQueries: [{ propertyName: "datepicker", first: true, predicate: MatDatepicker, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if(!isReadOnly) {\r\n  @if(label) {\r\n    <app-form-label [label]=\"label\" [optional]=\"!control.hasValidator(Validators['required'])\" [tooltip]=\"tooltip\"></app-form-label>\r\n  }\r\n\r\n<div class=\"datePicker\">\r\n  <mat-form-field class=\"date-range primary-form {{ className }}\"\r\n  [ngClass]=\"{\r\n    'custom-validation-error': !startDateControl.value && !endDateControl.value && startDateControl.touched\r\n   }\">\r\n    <label class=\"mat-form-content\">\r\n      <mat-date-range-input\r\n        [rangePicker]=\"picker\"\r\n        [min]=\"minDateValue\"\r\n        [max]=\"maxDateValue\"\r\n      >\r\n        <input\r\n          matStartDate\r\n          placeholder=\"{{ 'startDate' | translate }}\"\r\n          [formControl]=\"startDateControl\"\r\n          (dateInput)=\"startDateChange($event)\"\r\n          (click)=\"focusPicker(picker)\"\r\n          readonly\r\n        />\r\n        <input\r\n          matEndDate\r\n          placeholder=\"{{ 'endDate' | translate }}\"\r\n          [formControl]=\"endDateControl\"\r\n          (dateInput)=\"endDateChange($event)\"\r\n          (click)=\"focusPicker(picker)\"\r\n          readonly\r\n        />\r\n      </mat-date-range-input>\r\n    </label>\r\n\r\n    @if(control?.value) {\r\n    <ds-icon\r\n      matSuffix\r\n      icon=\"close\"\r\n      class=\"fc-coral fs-10 mx-2 cursor-pointer\"\r\n      (click)=\"clearDateValue($event)\"\r\n    ></ds-icon>\r\n    }\r\n\r\n    <mat-datepicker-toggle matSuffix [for]=\"picker\" [disableRipple]=\"true\">\r\n      <i class=\"sfi sfi-calendar-o fc-black font-18\" matDatepickerToggleIcon></i>\r\n    </mat-datepicker-toggle>\r\n\r\n    <mat-date-range-picker #picker></mat-date-range-picker>\r\n  </mat-form-field>\r\n</div>\r\n<app-validation-errors [errors]=\"control.errors\"></app-validation-errors>\r\n\r\n\r\n} @else {\r\n<ng-container>\r\n  <app-info-item\r\n    class=\"info-item w-100\"\r\n    type=\"date\"\r\n    [insideTable]=\"insideTable\"\r\n    [dateType]=\"calendarType\"\r\n    [label]=\"label\"\r\n    [value]=\"{\r\n      startDate: control?.value?.startDate,\r\n      endDate: control?.value?.endDate\r\n    }\"\r\n    [hasLabel]=\"!!label\"\r\n  >\r\n  </app-info-item>\r\n</ng-container>\r\n}\r\n", styles: [":host{flex-grow:1}\n"], dependencies: [{ kind: "component", type: i1$3.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: i1$3.MatDatepickerModule }, { kind: "directive", type: i1$3.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { kind: "component", type: i1$3.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i1$3.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i1$3.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i1$3.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "ngmodule", type: i2$1.MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: FormLabelComponent, selector: "app-form-label", inputs: ["tooltip", "label", "optional"] }, { kind: "component", type: ValidationErrorsComponent, selector: "app-validation-errors", inputs: ["errors", "customErrorMessages"] }, { kind: "component", type: InfoItemComponent, selector: "app-info-item", inputs: ["label", "value", "name", "type", "dateType", "multiple", "insideTable", "hasLabel", "arrayList", "actionType", "download"] }, { kind: "ngmodule", type: i4.ReactiveFormsModule }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: DateRangePickerComponent, decorators: [{
             type: Component,
@@ -2690,7 +2737,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                         ...MatDatePickerImports,
                         ...MatFormImports,
                         ...Shareds
-                    ], template: "@if(!isReadOnly) {\r\n  @if(label) {\r\n    <app-form-label [label]=\"label\" [optional]=\"!control.hasValidator(Validators['required'])\" [tooltip]=\"tooltip\"></app-form-label>\r\n  }\r\n\r\n<div class=\"datePicker\">\r\n  <mat-form-field class=\"date-range primary-form {{ className }}\"\r\n  [ngClass]=\"{\r\n    'custom-validation-error': !startDateControl.value && !endDateControl.value && startDateControl.touched\r\n   }\">\r\n    <label class=\"mat-form-content\">\r\n      <mat-date-range-input\r\n        [rangePicker]=\"picker\"\r\n        [min]=\"minDateValue\"\r\n        [max]=\"maxDateValue\"\r\n      >\r\n        <input\r\n          matStartDate\r\n          placeholder=\"{{ 'startDate' | translate }}\"\r\n          [formControl]=\"startDateControl\"\r\n          (dateInput)=\"startDateChange($event)\"\r\n          (click)=\"focusPicker(picker)\"\r\n          readonly\r\n        />\r\n        <input\r\n          matEndDate\r\n          placeholder=\"{{ 'endDate' | translate }}\"\r\n          [formControl]=\"endDateControl\"\r\n          (dateInput)=\"endDateChange($event)\"\r\n          (click)=\"focusPicker(picker)\"\r\n          readonly\r\n        />\r\n      </mat-date-range-input>\r\n    </label>\r\n\r\n    @if(control?.value) {\r\n    <ds-icon\r\n      matSuffix\r\n      icon=\"close\"\r\n      class=\"fc-coral fs-10 mx-2 cursor-pointer\"\r\n      (click)=\"clearDateValue($event)\"\r\n    ></ds-icon>\r\n    }\r\n\r\n    <mat-datepicker-toggle matSuffix [for]=\"picker\" [disableRipple]=\"true\">\r\n      <i class=\"sfi sfi-calendar-o fc-black font-18\" matDatepickerToggleIcon></i>\r\n    </mat-datepicker-toggle>\r\n\r\n    <mat-date-range-picker #picker></mat-date-range-picker>\r\n  </mat-form-field>\r\n</div>\r\n<app-validation-errors [errors]=\"control.errors\"></app-validation-errors>\r\n\r\n\r\n} @else {\r\n<ng-container>\r\n  <app-info-item\r\n    class=\"info-item w-100\"\r\n    type=\"date\"\r\n    [insideTable]=\"insideTable\"\r\n    [dateType]=\"calendarType\"\r\n    [label]=\"label\"\r\n    [value]=\"{\r\n      startDate: control.value?.startDate,\r\n      endDate: control.value?.endDate\r\n    }\"\r\n    [hasLabel]=\"!!label\"\r\n  >\r\n  </app-info-item>\r\n</ng-container>\r\n}\r\n", styles: [":host{flex-grow:1}\n"] }]
+                    ], template: "@if(!isReadOnly) {\r\n  @if(label) {\r\n    <app-form-label [label]=\"label\" [optional]=\"!control.hasValidator(Validators['required'])\" [tooltip]=\"tooltip\"></app-form-label>\r\n  }\r\n\r\n<div class=\"datePicker\">\r\n  <mat-form-field class=\"date-range primary-form {{ className }}\"\r\n  [ngClass]=\"{\r\n    'custom-validation-error': !startDateControl.value && !endDateControl.value && startDateControl.touched\r\n   }\">\r\n    <label class=\"mat-form-content\">\r\n      <mat-date-range-input\r\n        [rangePicker]=\"picker\"\r\n        [min]=\"minDateValue\"\r\n        [max]=\"maxDateValue\"\r\n      >\r\n        <input\r\n          matStartDate\r\n          placeholder=\"{{ 'startDate' | translate }}\"\r\n          [formControl]=\"startDateControl\"\r\n          (dateInput)=\"startDateChange($event)\"\r\n          (click)=\"focusPicker(picker)\"\r\n          readonly\r\n        />\r\n        <input\r\n          matEndDate\r\n          placeholder=\"{{ 'endDate' | translate }}\"\r\n          [formControl]=\"endDateControl\"\r\n          (dateInput)=\"endDateChange($event)\"\r\n          (click)=\"focusPicker(picker)\"\r\n          readonly\r\n        />\r\n      </mat-date-range-input>\r\n    </label>\r\n\r\n    @if(control?.value) {\r\n    <ds-icon\r\n      matSuffix\r\n      icon=\"close\"\r\n      class=\"fc-coral fs-10 mx-2 cursor-pointer\"\r\n      (click)=\"clearDateValue($event)\"\r\n    ></ds-icon>\r\n    }\r\n\r\n    <mat-datepicker-toggle matSuffix [for]=\"picker\" [disableRipple]=\"true\">\r\n      <i class=\"sfi sfi-calendar-o fc-black font-18\" matDatepickerToggleIcon></i>\r\n    </mat-datepicker-toggle>\r\n\r\n    <mat-date-range-picker #picker></mat-date-range-picker>\r\n  </mat-form-field>\r\n</div>\r\n<app-validation-errors [errors]=\"control.errors\"></app-validation-errors>\r\n\r\n\r\n} @else {\r\n<ng-container>\r\n  <app-info-item\r\n    class=\"info-item w-100\"\r\n    type=\"date\"\r\n    [insideTable]=\"insideTable\"\r\n    [dateType]=\"calendarType\"\r\n    [label]=\"label\"\r\n    [value]=\"{\r\n      startDate: control?.value?.startDate,\r\n      endDate: control?.value?.endDate\r\n    }\"\r\n    [hasLabel]=\"!!label\"\r\n  >\r\n  </app-info-item>\r\n</ng-container>\r\n}\r\n", styles: [":host{flex-grow:1}\n"] }]
         }], propDecorators: { className: [{
                 type: Input
             }], yearOnly: [{
@@ -2712,6 +2759,17 @@ class InputComponent extends ControlValueAccessorDirective {
     iconSuffixName;
     emitedChangedValue1 = new EventEmitter();
     customErrorMessages;
+    destroyRef = inject(DestroyRef);
+    ngOnInit() {
+        super.ngOnInit();
+        this.actionStateService.resetAction$
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(res => {
+            if (!this.isReadOnly && this.control.enabled) {
+                this.control.reset();
+            }
+        });
+    }
     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: { floatLabel: "floatLabel", className: "className", iconPrefixName: "iconPrefixName", iconSuffixName: "iconSuffixName", emitedChangedValue1: "emitedChangedValue1", customErrorMessages: "customErrorMessages" }, providers: [
             {
@@ -2825,7 +2883,18 @@ class InputNumberComponent extends ControlValueAccessorDirective {
     iconSuffixName;
     numberSuffixName;
     allowedPattern = '';
+    destroyRef = inject(DestroyRef);
     emitedChangedValue = new EventEmitter();
+    ngOnInit() {
+        super.ngOnInit();
+        this.actionStateService.resetAction$
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(res => {
+            if (!this.isReadOnly && this.control.enabled) {
+                this.control.reset();
+            }
+        });
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: InputNumberComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: InputNumberComponent, isStandalone: true, selector: "app-input-number", inputs: { floatLabel: "floatLabel", className: "className", iconPrefixName: "iconPrefixName", iconSuffixName: "iconSuffixName", numberSuffixName: "numberSuffixName", allowedPattern: "allowedPattern" }, outputs: { emitedChangedValue: "emitedChangedValue" }, providers: [
             {
@@ -2871,9 +2940,20 @@ class InputEmailComponent extends ControlValueAccessorDirective {
     iconPrefixName;
     iconSuffixName;
     numberSuffixName;
+    destroyRef = inject(DestroyRef);
     displayErrors(data) {
         console.log(this.control.errors);
     }
+    ngOnInit() {
+        super.ngOnInit();
+        this.actionStateService.resetAction$
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(res => {
+            if (!this.isReadOnly && this.control.enabled) {
+                this.control.reset();
+            }
+        });
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: InputEmailComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: InputEmailComponent, isStandalone: true, selector: "app-input-email", inputs: { floatLabel: "floatLabel", className: "className", matPrefix: "matPrefix", iconPrefixName: "iconPrefixName", iconSuffixName: "iconSuffixName", numberSuffixName: "numberSuffixName" }, providers: [
             {
@@ -3037,7 +3117,18 @@ class InputCurrencyComponent extends ControlValueAccessorDirective {
     iconPrefixName;
     iconSuffixName;
     numberSuffixName;
+    destroyRef = inject(DestroyRef);
     mycurrencyPipe;
+    ngOnInit() {
+        super.ngOnInit();
+        this.actionStateService.resetAction$
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(res => {
+            if (!this.isReadOnly && this.control.enabled) {
+                this.control.reset();
+            }
+        });
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: InputCurrencyComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: InputCurrencyComponent, isStandalone: true, selector: "app-input-currency", inputs: { floatLabel: "floatLabel", className: "className", iconPrefixName: "iconPrefixName", iconSuffixName: "iconSuffixName", numberSuffixName: "numberSuffixName" }, providers: [
             {
@@ -3082,6 +3173,7 @@ class InputTelephoneComponent extends ControlValueAccessorDirective {
     floatLabel = 'auto';
     className = 'bordered-input';
     controlValue = '';
+    destroyRef = inject(DestroyRef);
     errorMessages = {
         required: this.i18n.translate('thisFieldIsRequired'),
         validatePhoneNumber: this.i18n.translate('pleaseEnterValidNumber')
@@ -3095,6 +3187,13 @@ class InputTelephoneComponent extends ControlValueAccessorDirective {
             this.telephoneControl.setValidators(null);
         }
         this.telephoneControl.updateValueAndValidity;
+        this.actionStateService.resetAction$
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(res => {
+            if (!this.isReadOnly && this.control.enabled) {
+                this.control.reset();
+            }
+        });
     }
     CountryISO = CountryISO;
     SearchCountryField = SearchCountryField;
@@ -3106,7 +3205,7 @@ class InputTelephoneComponent extends ControlValueAccessorDirective {
             this.telephoneControl.setValue(controlValue['internationalNumber']);
         }
         if (!controlValue) {
-            this.control.setValue(null);
+            this.control.reset();
         }
         if (this.telephoneControl.invalid && this.telephoneControl.touched) {
             this.control.markAsTouched();
@@ -3159,6 +3258,16 @@ class SearchEmployeeComponent extends ControlValueAccessorDirective {
     userAlreadyExist = false;
     emitedDeletedValue = new EventEmitter();
     destroyRef = inject(DestroyRef);
+    ngOnInit() {
+        super.ngOnInit();
+        this.actionStateService.resetAction$
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(res => {
+            if (!this.isReadOnly && this.control.enabled) {
+                this.control.reset();
+            }
+        });
+    }
     deleteRow(ind, rowData) {
         if (!this.isReadOnly) {
             this.arrayList = this.arrayList?.filter((item, index) => {
@@ -3199,7 +3308,7 @@ class SearchEmployeeComponent extends ControlValueAccessorDirective {
             if (this.multiple) {
             }
             else {
-                this.control.setValue(null);
+                this.control.reset();
                 this.control.markAsTouched();
             }
         }
@@ -3361,7 +3470,7 @@ class SelectComponent extends BaseComponent {
     }
     resetKeyValue() {
         if (!this.isReadOnly) {
-            this.controller.setValue(null);
+            this.controller.reset();
             this.controller.markAsUntouched();
             if (this.multiple) {
                 this.field = [];
@@ -3485,6 +3594,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
 class TextareaComponent extends ControlValueAccessorDirective {
     className;
     preventSpecailChar;
+    destroyRef = inject(DestroyRef);
+    ngOnInit() {
+        super.ngOnInit();
+        this.actionStateService.resetAction$
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(res => {
+            if (!this.isReadOnly && this.control.enabled) {
+                this.control.reset();
+            }
+        });
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: TextareaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: TextareaComponent, isStandalone: true, selector: "app-textarea", inputs: { className: "className", preventSpecailChar: "preventSpecailChar" }, providers: [
             {
@@ -3561,6 +3681,17 @@ class ToggleButtonComponent extends ControlValueAccessorDirective {
     options;
     displayedLabel;
     key;
+    destroyRef = inject(DestroyRef);
+    ngOnInit() {
+        super.ngOnInit();
+        this.actionStateService.resetAction$
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(res => {
+            if (!this.isReadOnly && this.control.enabled) {
+                this.control.reset();
+            }
+        });
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ToggleButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: ToggleButtonComponent, isStandalone: true, selector: "app-toggle-button", inputs: { className: "className", data: "data", error: "error", optionAr: "optionAr", optionEn: "optionEn", hasHint: "hasHint", options: "options", displayedLabel: "displayedLabel", key: "key" }, outputs: { onChange: "onChange" }, providers: [
             {
@@ -3844,6 +3975,15 @@ class DocsUploaderComponent extends ControlValueAccessorDirective {
             this.allAttachments = [...this.attachments];
         }
     }
+    ngOnInit() {
+        this.actionStateService.resetAction$
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(res => {
+            if (!this.isReadOnly && this.control.enabled) {
+                this.control.reset();
+            }
+        });
+    }
     getFileType(attachment) {
         if (!attachment.fileName?.includes('.') && attachment.mimeType.includes('.')) {
             return this.checkFileType(attachment.mimeType);
@@ -3915,7 +4055,7 @@ class DocsUploaderComponent extends ControlValueAccessorDirective {
     }
     onValueChange(event) {
         const input = event.target;
-        this.control.setValue(null);
+        this.control.reset();
         if (input?.files?.length > 0) {
             this.handleFileInput(input);
             this.processUploadedFile(input);
@@ -4091,7 +4231,7 @@ class DocsUploaderComponent extends ControlValueAccessorDirective {
             this.inputFile.nativeElement.value = null;
         }
         this.emit(this.value);
-        this.control.setValue(null);
+        this.control.reset();
         this.selectedTemplateAttachment.emit(null);
     }
     downloadFile(event, field) {
@@ -4128,7 +4268,7 @@ class DocsUploaderComponent extends ControlValueAccessorDirective {
                 useExisting: forwardRef(() => DocsUploaderComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "inputFile", first: true, predicate: ["inputFile"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (!isReadOnly) {\r\n  <ng-container>\r\n    @if(label) {\r\n      <app-form-label [label]=\"label\" [optional]=\"!control.hasValidator(Validators['required'])\" [tooltip]=\"tooltip\"></app-form-label>\r\n    }\r\n    <section\r\n    (click)=\"fileAttached.click()\"\r\n      [ngClass]=\"insideTable ? 'file-uploader-table' : 'file-uploader'\" class=\" mb-2\"\r\n      [class.insideTableStyle]=\"insideTable\">\r\n      <div\r\n        [ngClass]=\"insideTable ? 'file-uploader-table-dev' : ''\" class=\"file-uploader-input\"\r\n        >\r\n        @if (!uploading) {\r\n          <div class=\"icon mb-1\">\r\n            <svg\r\n              [ngClass]=\"insideTable ? 'file-uploader-table-svg' : ''\" width=\"41\" height=\"38\" viewBox=\"0 0 41 38\"\r\n              fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n              <path\r\n                d=\"M0 22.1947V20.6736C0.0971303 20.1019 0.070094 19.5141 0.276371 18.9533C1.28372 16.2086 3.21231 14.5023 6.0421 13.8094C6.70499 13.6472 6.68497 13.6632 6.69899 12.9843C6.73203 11.3321 6.99839 9.71992 7.62423 8.17986C8.86289 5.13678 10.9467 2.83969 13.8816 1.39175C17.168 -0.230424 20.5956 -0.450719 24.0553 0.81598C27.4929 2.07467 29.9622 4.41581 31.4802 7.74828C31.7786 8.40316 32.027 9.08307 32.1712 9.79202C32.2402 10.1315 32.4035 10.2566 32.7529 10.3107C36.7012 10.9165 39.3358 13.1255 40.6946 16.8735C40.9069 17.4603 40.9199 18.0731 40.9599 18.6829C40.9649 18.7601 40.9389 18.8442 41 18.9113V20.5124C40.9109 20.995 40.969 21.4937 40.8608 21.9734C40.5244 23.4614 39.8454 24.7821 38.8501 25.9297C37.4522 27.5418 35.7059 28.5882 33.6161 29.0519C32.791 29.2351 31.9499 29.2521 31.1117 29.2922C30.6571 29.3142 30.584 29.193 30.592 28.7484C30.6451 25.8446 29.802 23.2571 27.8624 21.0591C25.9979 18.9463 23.6597 17.7167 20.867 17.4012C18.8553 17.1739 16.9057 17.4593 15.0612 18.3395C11.8319 19.8816 9.81416 22.4069 8.96102 25.8696C8.74273 26.7538 8.68265 27.658 8.70568 28.5702C8.7217 29.2111 8.60254 29.3122 7.95968 29.2972C5.95098 29.2511 4.10551 28.7234 2.58146 27.3596C1.07644 26.0168 0.0680913 24.3996 0.0400537 22.3028C0.0400537 22.2607 0.0250336 22.2257 0 22.1937V22.1947Z\"\r\n                fill=\"#DEE0E2\"/>\r\n              <path\r\n                d=\"M29.0303 28.2632C29.0604 33.4031 24.8657 37.6187 19.6838 37.6548C14.5169 37.6908 10.2852 33.4952 10.2521 28.3042C10.2201 23.1403 14.4297 18.9126 19.6227 18.8946C24.8037 18.8766 28.9993 23.0542 29.0303 28.2632Z\"\r\n                fill=\"#8E9AA0\"/>\r\n              <path\r\n                d=\"M20.5573 25.2644C20.4622 25.4477 20.5012 25.5939 20.5012 25.734C20.4982 28.2154 20.5002 30.6957 20.4982 33.177C20.4982 33.8099 20.2339 34.1704 19.7462 34.2234C19.2645 34.2765 18.88 33.9831 18.8169 33.5025C18.7959 33.3443 18.7969 33.183 18.7969 33.0238C18.7959 30.5826 18.7969 28.1423 18.7969 25.701C18.7969 25.5728 18.7969 25.4447 18.7969 25.2003C18.1971 25.8031 17.6774 26.3288 17.1527 26.8505C17.0115 26.9907 16.8683 27.1349 16.7061 27.2471C16.3566 27.4864 15.9341 27.4413 15.6457 27.154C15.3643 26.8746 15.3203 26.442 15.5486 26.0925C15.6207 25.9824 15.7128 25.8832 15.8069 25.7891C16.8613 24.7307 17.9167 23.6733 18.9732 22.6179C19.4017 22.1893 19.8784 22.1763 20.3039 22.5988C21.3914 23.6803 22.4739 24.7667 23.5533 25.8572C23.9809 26.2898 24.0129 26.8065 23.6534 27.167C23.299 27.5214 22.7753 27.4844 22.3437 27.0568C21.7499 26.47 21.1661 25.8732 20.5603 25.2644H20.5573Z\"\r\n                fill=\"#F9F9F9\"/>\r\n            </svg>\r\n          </div>\r\n        }\r\n        @if (uploading) {\r\n          <ds-icon class=\"sfi sfi-spinner d-inline-block spin fc-coral fs-30-imp\"></ds-icon>\r\n        }\r\n\r\n        <div class=\"f-14 fc-black fw-normal\">\r\n          <span class=\"fc-coral fw-medium\">{{ 'browse' | translate }}</span>\r\n        </div>\r\n        <div class=\"fs-10 fc-dark-gray\">\r\n          {{ allowedExtensions ? allowedExtensions : '' }}\r\n        </div>\r\n\r\n        <input type=\"file\" #inputFile [accept]=\"accept\" class=\"d-none\" #fileAttached (change)=\"onValueChange($event)\">\r\n      </div>\r\n    </section>\r\n\r\n    @if (hints) {\r\n      <div class=\"d-flex align-items-center gap-3 mb-3\">\r\n        @for (hint of hints; track hint) {\r\n          <ng-container>\r\n            <div class=\"d-flex align-items-center gap-1 fs-12\">\r\n              <ds-icon\r\n                icon=\"{{ hint.valid ? 'check-circle-f' : 'check-circle-o' }}\"\r\n                class=\"fs-24 {{ hint.valid ? 'fc-green' : 'fc-dark-gray' }}\"></ds-icon>\r\n              <span class=\"{{ hint.valid ? 'fc-black' : 'fc-dark-gray' }}\">{{ hint.label }}</span>\r\n            </div>\r\n          </ng-container>\r\n        }\r\n      </div>\r\n    }\r\n\r\n    @if (hint) {\r\n      <mat-hint class=\"d-flex align-items-center gap-1\">\r\n        <ds-icon icon=\"info\" class=\"fs-17 fc-dark-gray\"></ds-icon>\r\n        <span class=\"fs-12 fc-black line-height-1\">{{ hint }}</span>\r\n      </mat-hint>\r\n    }\r\n\r\n    @if (multiple) {\r\n      <section class=\"files-list\">\r\n        @for (file of displayedFiles; track file; let i = $index) {\r\n          <div class=\"file-item-container\">\r\n            <ds-attachments\r\n              [matTooltip]=\"file?.fileName\"\r\n              [file]=\"{ name: file.fileName }\"\r\n              (downloadEvent)=\"attachmentAction('download', i, file)\"\r\n              (deleteEvent)=\"attachmentAction('delete', i, file)\"\r\n              [showActions]=\"showActions\">\r\n            </ds-attachments>\r\n          </div>\r\n        }\r\n      </section>\r\n    }\r\n\r\n    @if (!multiple && (control.value?.fileContents || control.value?.attachmentId)) {\r\n      <section class=\"files-list\">\r\n        <div class=\"file-item-container file-item-container-actions\">\r\n          <ds-attachments\r\n            [matTooltip]=\"control.value?.fileName\"\r\n            [file]=\"{ name: control.value.fileName }\"\r\n            (downloadEvent)=\"attachmentAction('download', null, control.value)\"\r\n            (deleteEvent)=\"attachmentAction('delete', null, control.value)\"\r\n            [showActions]=\"showActions\">\r\n          </ds-attachments>\r\n        </div>\r\n      </section>\r\n    }\r\n\r\n    <div class=\"attachments-error\">\r\n      @if (!validExtension) {\r\n        <section class=\"files-list mt-2\">\r\n          <div class=\"file-item-container \">\r\n            <ds-attachments\r\n              [file]=\"wrongFile\" error [showActions]=\"false\">\r\n            </ds-attachments>\r\n          </div>\r\n        </section>\r\n      }\r\n\r\n      @if (!allowedFileSize) {\r\n        <mat-error class=\"fs-12 my-2\">\r\n          {{ maxSize === \"0.3\" ? ('support3' | translate ): ('support2' | translate) + maxSize + ('mb' | translate) }}\r\n        </mat-error>\r\n      }\r\n\r\n      @if (!fileNotDuplicated) {\r\n        <mat-error class=\"fs-12 my-2\">{{ 'duplicated-error' | translate }}</mat-error>\r\n      }\r\n\r\n      @if (lengthError) {\r\n        <mat-error class=\"fs-12\">{{ 'lengthError' | translate }} :{{ maxLength }}</mat-error>\r\n      }\r\n\r\n      @if (showErrorMessage) {\r\n        <!-- <mat-error class=\"fs-12\">{{errorMessage}} </mat-error> -->\r\n      }\r\n    </div>\r\n  </ng-container>\r\n}\r\n\r\n@if (isReadOnly) {\r\n  <ng-container>\r\n    @if (multiple && displayedFiles) {\r\n      <ng-container>\r\n        <div class=\"info-item\">\r\n          @if (label) {\r\n            <span class=\"name\">{{ label }}</span>\r\n          }\r\n          @if (displayedFiles?.length) {\r\n            <span>\r\n              @for (file of displayedFiles; track file; let i = $index) {\r\n                <div class=\"file-item-container\">\r\n                  <ds-attachments\r\n                    [matTooltip]=\"file?.fileName\"\r\n                    class=\"my-2\" [file]=\"{ name: file.fileName }\" readOnly (downloadEvent)=\"downloadFile($event, file)\"\r\n                    [showActions]=\"showActions\">\r\n                  </ds-attachments>\r\n                </div>\r\n              }\r\n            </span>\r\n          }\r\n          @if (!displayedFiles?.length) {\r\n            <span class=\"disc\">\r\n              {{ 'NoAttachments' | translate }}\r\n            </span>\r\n          }\r\n        </div>\r\n      </ng-container>\r\n    }\r\n\r\n    @if (!multiple && (control.value?.['attachmentId'] || control.value?.['fileContents'])) {\r\n      <ng-container>\r\n        <div class=\"info-item\">\r\n          @if (label) {\r\n            <span class=\"name\">{{ label }}</span>\r\n          }\r\n          <div class=\"disc file-item-container file-item-container-actions\" [ngClass]=\"{'insideTableWidth': insideTable}\">\r\n            @if (control.value?.['attachmentId'] || control.value?.['fileContents']) {\r\n              <ds-attachments\r\n                [matTooltip]=\"control.value?.fileName\" [file]=\"{ name: control.value.fileName }\" [showActions]=\"showActions\"\r\n                (downloadEvent)=\"attachmentAction('download', null, control.value)\"\r\n                (deleteEvent)=\"attachmentAction('delete', null, control.value)\"\r\n                readOnly>\r\n              </ds-attachments>\r\n            }\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    }\r\n  </ng-container>\r\n}", styles: [".file-uploader{--uploader-height: 150px;--uploader-width: 100%;--uploader-bg: var(--off-white);--uploader-border: 1px dashed var(--dark-gray);--uploader-radius: var(--box-radius);--uploader-padding: 1rem;height:var(--uploader-height);background-color:var(--uploader-bg);border:var(--uploader-border);border-radius:var(--uploader-radius);padding:var(--uploader-padding);text-align:center;cursor:pointer;display:flex;align-items:center;justify-content:center}.insideTableWidth{width:250px!important}.file-uploader-table{--uploader-height: 45px;--uploader-width: 100%;--uploader-bg: var(--off-white);--uploader-border: 1px dashed var(--dark-gray);--uploader-radius: var(--box-radius);--uploader-padding: 0 1rem;height:var(--uploader-height);background-color:var(--uploader-bg);border:var(--uploader-border);border-radius:var(--uploader-radius);padding:var(--uploader-padding);text-align:center;cursor:pointer;display:FLEX;align-items:CENTER;justify-content:CENTER}.file-uploader-table-dev{display:FLEX;align-items:CENTER;gap:1rem}.file-uploader-table-svg{width:70%}.insideTableStyle{width:272px}.files-list{--file-item-width: 300px;display:grid;grid-template-columns:repeat(auto-fill,var(--file-item-width));grid-gap:.5rem}@media (max-width: 768px){.files-list{grid-template-columns:repeat(auto-fill,minmax(var(--file-item-width),1fr))}}.files-list .file-item-container .uploaded-file-actions{margin-inline-start:20px}.files-list .file-item-container .uploaded-file-actions .button__wrapper{font-size:15px}.files-list .file-item-container .file-item{--file-bg: var(--off-white);--file-radius: var(--box-radius);--icon-color: var(--purple);--icon-size: 2rem;--file-border: transparent;display:flex;align-items:center;background-color:var(--file-bg);border:1px solid var(--file-border);border-radius:var(--file-radius);padding:0 1rem;height:70px;gap:.75rem}.files-list .file-item-container .file-item.error{--file-bg: rgba(var(--rgb-red), 10%);--file-border: var(--red);--icon-color: var(--red)}.files-list .file-item-container .file-item .icon{color:var(--icon-color);font-size:var(--icon-size)}.files-list .file-item-container .file-item .file-action{display:flex;align-items:center;gap:.5rem}ds-attachments::part(base){--file-width: 250px}.file-item-container-actions{display:flex;align-items:center}.file-item-container-actions .uploaded-file-actions{display:flex;align-items:center;gap:10px;margin-inline-start:25px}.file-item-container-actions .uploaded-file-actions .button__wrapper{font-size:15px}::ng-deep .file-item .name-size{display:flex;flex-direction:column;justify-content:center;flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:120px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: FormLabelComponent, selector: "app-form-label", inputs: ["tooltip", "label", "optional"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+        ], viewQueries: [{ propertyName: "inputFile", first: true, predicate: ["inputFile"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (!isReadOnly) {\r\n  <ng-container>\r\n    @if(label) {\r\n      <app-form-label [label]=\"label\" [optional]=\"!control?.hasValidator(Validators['required'])\" [tooltip]=\"tooltip\"></app-form-label>\r\n    }\r\n    <section\r\n    (click)=\"fileAttached.click()\"\r\n      [ngClass]=\"insideTable ? 'file-uploader-table' : 'file-uploader'\" class=\" mb-2\"\r\n      [class.insideTableStyle]=\"insideTable\">\r\n      <div\r\n        [ngClass]=\"insideTable ? 'file-uploader-table-dev' : ''\" class=\"file-uploader-input\"\r\n        >\r\n        @if (!uploading) {\r\n          <div class=\"icon mb-1\">\r\n            <svg\r\n              [ngClass]=\"insideTable ? 'file-uploader-table-svg' : ''\" width=\"41\" height=\"38\" viewBox=\"0 0 41 38\"\r\n              fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n              <path\r\n                d=\"M0 22.1947V20.6736C0.0971303 20.1019 0.070094 19.5141 0.276371 18.9533C1.28372 16.2086 3.21231 14.5023 6.0421 13.8094C6.70499 13.6472 6.68497 13.6632 6.69899 12.9843C6.73203 11.3321 6.99839 9.71992 7.62423 8.17986C8.86289 5.13678 10.9467 2.83969 13.8816 1.39175C17.168 -0.230424 20.5956 -0.450719 24.0553 0.81598C27.4929 2.07467 29.9622 4.41581 31.4802 7.74828C31.7786 8.40316 32.027 9.08307 32.1712 9.79202C32.2402 10.1315 32.4035 10.2566 32.7529 10.3107C36.7012 10.9165 39.3358 13.1255 40.6946 16.8735C40.9069 17.4603 40.9199 18.0731 40.9599 18.6829C40.9649 18.7601 40.9389 18.8442 41 18.9113V20.5124C40.9109 20.995 40.969 21.4937 40.8608 21.9734C40.5244 23.4614 39.8454 24.7821 38.8501 25.9297C37.4522 27.5418 35.7059 28.5882 33.6161 29.0519C32.791 29.2351 31.9499 29.2521 31.1117 29.2922C30.6571 29.3142 30.584 29.193 30.592 28.7484C30.6451 25.8446 29.802 23.2571 27.8624 21.0591C25.9979 18.9463 23.6597 17.7167 20.867 17.4012C18.8553 17.1739 16.9057 17.4593 15.0612 18.3395C11.8319 19.8816 9.81416 22.4069 8.96102 25.8696C8.74273 26.7538 8.68265 27.658 8.70568 28.5702C8.7217 29.2111 8.60254 29.3122 7.95968 29.2972C5.95098 29.2511 4.10551 28.7234 2.58146 27.3596C1.07644 26.0168 0.0680913 24.3996 0.0400537 22.3028C0.0400537 22.2607 0.0250336 22.2257 0 22.1937V22.1947Z\"\r\n                fill=\"#DEE0E2\"/>\r\n              <path\r\n                d=\"M29.0303 28.2632C29.0604 33.4031 24.8657 37.6187 19.6838 37.6548C14.5169 37.6908 10.2852 33.4952 10.2521 28.3042C10.2201 23.1403 14.4297 18.9126 19.6227 18.8946C24.8037 18.8766 28.9993 23.0542 29.0303 28.2632Z\"\r\n                fill=\"#8E9AA0\"/>\r\n              <path\r\n                d=\"M20.5573 25.2644C20.4622 25.4477 20.5012 25.5939 20.5012 25.734C20.4982 28.2154 20.5002 30.6957 20.4982 33.177C20.4982 33.8099 20.2339 34.1704 19.7462 34.2234C19.2645 34.2765 18.88 33.9831 18.8169 33.5025C18.7959 33.3443 18.7969 33.183 18.7969 33.0238C18.7959 30.5826 18.7969 28.1423 18.7969 25.701C18.7969 25.5728 18.7969 25.4447 18.7969 25.2003C18.1971 25.8031 17.6774 26.3288 17.1527 26.8505C17.0115 26.9907 16.8683 27.1349 16.7061 27.2471C16.3566 27.4864 15.9341 27.4413 15.6457 27.154C15.3643 26.8746 15.3203 26.442 15.5486 26.0925C15.6207 25.9824 15.7128 25.8832 15.8069 25.7891C16.8613 24.7307 17.9167 23.6733 18.9732 22.6179C19.4017 22.1893 19.8784 22.1763 20.3039 22.5988C21.3914 23.6803 22.4739 24.7667 23.5533 25.8572C23.9809 26.2898 24.0129 26.8065 23.6534 27.167C23.299 27.5214 22.7753 27.4844 22.3437 27.0568C21.7499 26.47 21.1661 25.8732 20.5603 25.2644H20.5573Z\"\r\n                fill=\"#F9F9F9\"/>\r\n            </svg>\r\n          </div>\r\n        }\r\n        @if (uploading) {\r\n          <ds-icon class=\"sfi sfi-spinner d-inline-block spin fc-coral fs-30-imp\"></ds-icon>\r\n        }\r\n\r\n        <div class=\"f-14 fc-black fw-normal\">\r\n          <span class=\"fc-coral fw-medium\">{{ 'browse' | translate }}</span>\r\n        </div>\r\n        <div class=\"fs-10 fc-dark-gray\">\r\n          {{ allowedExtensions ? allowedExtensions : '' }}\r\n        </div>\r\n\r\n        <input type=\"file\" #inputFile [accept]=\"accept\" class=\"d-none\" #fileAttached (change)=\"onValueChange($event)\">\r\n      </div>\r\n    </section>\r\n\r\n    @if (hints) {\r\n      <div class=\"d-flex align-items-center gap-3 mb-3\">\r\n        @for (hint of hints; track hint) {\r\n          <ng-container>\r\n            <div class=\"d-flex align-items-center gap-1 fs-12\">\r\n              <ds-icon\r\n                icon=\"{{ hint.valid ? 'check-circle-f' : 'check-circle-o' }}\"\r\n                class=\"fs-24 {{ hint.valid ? 'fc-green' : 'fc-dark-gray' }}\"></ds-icon>\r\n              <span class=\"{{ hint.valid ? 'fc-black' : 'fc-dark-gray' }}\">{{ hint.label }}</span>\r\n            </div>\r\n          </ng-container>\r\n        }\r\n      </div>\r\n    }\r\n\r\n    @if (hint) {\r\n      <mat-hint class=\"d-flex align-items-center gap-1\">\r\n        <ds-icon icon=\"info\" class=\"fs-17 fc-dark-gray\"></ds-icon>\r\n        <span class=\"fs-12 fc-black line-height-1\">{{ hint }}</span>\r\n      </mat-hint>\r\n    }\r\n\r\n    @if (multiple) {\r\n      <section class=\"files-list\">\r\n        @for (file of displayedFiles; track file; let i = $index) {\r\n          <div class=\"file-item-container\">\r\n            <ds-attachments\r\n              [matTooltip]=\"file?.fileName\"\r\n              [file]=\"{ name: file.fileName }\"\r\n              (downloadEvent)=\"attachmentAction('download', i, file)\"\r\n              (deleteEvent)=\"attachmentAction('delete', i, file)\"\r\n              [showActions]=\"showActions\">\r\n            </ds-attachments>\r\n          </div>\r\n        }\r\n      </section>\r\n    }\r\n\r\n    @if (!multiple && (control?.value?.fileContents || control?.value?.attachmentId)) {\r\n      <section class=\"files-list\">\r\n        <div class=\"file-item-container file-item-container-actions\">\r\n          <ds-attachments\r\n            [matTooltip]=\"control?.value?.fileName\"\r\n            [file]=\"{ name: control?.value.fileName }\"\r\n            (downloadEvent)=\"attachmentAction('download', null, control?.value)\"\r\n            (deleteEvent)=\"attachmentAction('delete', null, control?.value)\"\r\n            [showActions]=\"showActions\">\r\n          </ds-attachments>\r\n        </div>\r\n      </section>\r\n    }\r\n\r\n    <div class=\"attachments-error\">\r\n      @if (!validExtension) {\r\n        <section class=\"files-list mt-2\">\r\n          <div class=\"file-item-container \">\r\n            <ds-attachments\r\n              [file]=\"wrongFile\" error [showActions]=\"false\">\r\n            </ds-attachments>\r\n          </div>\r\n        </section>\r\n      }\r\n\r\n      @if (!allowedFileSize) {\r\n        <mat-error class=\"fs-12 my-2\">\r\n          {{ maxSize === \"0.3\" ? ('support3' | translate ): ('support2' | translate) + maxSize + ('mb' | translate) }}\r\n        </mat-error>\r\n      }\r\n\r\n      @if (!fileNotDuplicated) {\r\n        <mat-error class=\"fs-12 my-2\">{{ 'duplicated-error' | translate }}</mat-error>\r\n      }\r\n\r\n      @if (lengthError) {\r\n        <mat-error class=\"fs-12\">{{ 'lengthError' | translate }} :{{ maxLength }}</mat-error>\r\n      }\r\n\r\n      @if (showErrorMessage) {\r\n        <!-- <mat-error class=\"fs-12\">{{errorMessage}} </mat-error> -->\r\n      }\r\n    </div>\r\n  </ng-container>\r\n}\r\n\r\n@if (isReadOnly) {\r\n  <ng-container>\r\n    @if (multiple && displayedFiles) {\r\n      <ng-container>\r\n        <div class=\"info-item\">\r\n          @if (label) {\r\n            <span class=\"name\">{{ label }}</span>\r\n          }\r\n          @if (displayedFiles?.length) {\r\n            <span>\r\n              @for (file of displayedFiles; track file; let i = $index) {\r\n                <div class=\"file-item-container\">\r\n                  <ds-attachments\r\n                    [matTooltip]=\"file?.fileName\"\r\n                    class=\"my-2\" [file]=\"{ name: file.fileName }\" readOnly (downloadEvent)=\"downloadFile($event, file)\"\r\n                    [showActions]=\"showActions\">\r\n                  </ds-attachments>\r\n                </div>\r\n              }\r\n            </span>\r\n          }\r\n          @if (!displayedFiles?.length) {\r\n            <span class=\"disc\">\r\n              {{ 'NoAttachments' | translate }}\r\n            </span>\r\n          }\r\n        </div>\r\n      </ng-container>\r\n    }\r\n\r\n    @if (!multiple && (control?.value?.['attachmentId'] || control?.value?.['fileContents'])) {\r\n      <ng-container>\r\n        <div class=\"info-item\">\r\n          @if (label) {\r\n            <span class=\"name\">{{ label }}</span>\r\n          }\r\n          <div class=\"disc file-item-container file-item-container-actions\" [ngClass]=\"{'insideTableWidth': insideTable}\">\r\n            @if (control?.value?.['attachmentId'] || control?.value?.['fileContents']) {\r\n              <ds-attachments\r\n                [matTooltip]=\"control?.value?.fileName\" [file]=\"{ name: control?.value.fileName }\" [showActions]=\"showActions\"\r\n                (downloadEvent)=\"attachmentAction('download', null, control?.value)\"\r\n                (deleteEvent)=\"attachmentAction('delete', null, control?.value)\"\r\n                readOnly>\r\n              </ds-attachments>\r\n            }\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    }\r\n  </ng-container>\r\n}", styles: [".file-uploader{--uploader-height: 150px;--uploader-width: 100%;--uploader-bg: var(--off-white);--uploader-border: 1px dashed var(--dark-gray);--uploader-radius: var(--box-radius);--uploader-padding: 1rem;height:var(--uploader-height);background-color:var(--uploader-bg);border:var(--uploader-border);border-radius:var(--uploader-radius);padding:var(--uploader-padding);text-align:center;cursor:pointer;display:flex;align-items:center;justify-content:center}.insideTableWidth{width:250px!important}.file-uploader-table{--uploader-height: 45px;--uploader-width: 100%;--uploader-bg: var(--off-white);--uploader-border: 1px dashed var(--dark-gray);--uploader-radius: var(--box-radius);--uploader-padding: 0 1rem;height:var(--uploader-height);background-color:var(--uploader-bg);border:var(--uploader-border);border-radius:var(--uploader-radius);padding:var(--uploader-padding);text-align:center;cursor:pointer;display:FLEX;align-items:CENTER;justify-content:CENTER}.file-uploader-table-dev{display:FLEX;align-items:CENTER;gap:1rem}.file-uploader-table-svg{width:70%}.insideTableStyle{width:272px}.files-list{--file-item-width: 300px;display:grid;grid-template-columns:repeat(auto-fill,var(--file-item-width));grid-gap:.5rem}@media (max-width: 768px){.files-list{grid-template-columns:repeat(auto-fill,minmax(var(--file-item-width),1fr))}}.files-list .file-item-container .uploaded-file-actions{margin-inline-start:20px}.files-list .file-item-container .uploaded-file-actions .button__wrapper{font-size:15px}.files-list .file-item-container .file-item{--file-bg: var(--off-white);--file-radius: var(--box-radius);--icon-color: var(--purple);--icon-size: 2rem;--file-border: transparent;display:flex;align-items:center;background-color:var(--file-bg);border:1px solid var(--file-border);border-radius:var(--file-radius);padding:0 1rem;height:70px;gap:.75rem}.files-list .file-item-container .file-item.error{--file-bg: rgba(var(--rgb-red), 10%);--file-border: var(--red);--icon-color: var(--red)}.files-list .file-item-container .file-item .icon{color:var(--icon-color);font-size:var(--icon-size)}.files-list .file-item-container .file-item .file-action{display:flex;align-items:center;gap:.5rem}ds-attachments::part(base){--file-width: 250px}.file-item-container-actions{display:flex;align-items:center}.file-item-container-actions .uploaded-file-actions{display:flex;align-items:center;gap:10px;margin-inline-start:25px}.file-item-container-actions .uploaded-file-actions .button__wrapper{font-size:15px}::ng-deep .file-item .name-size{display:flex;flex-direction:column;justify-content:center;flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:120px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: FormLabelComponent, selector: "app-form-label", inputs: ["tooltip", "label", "optional"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: DocsUploaderComponent, decorators: [{
             type: Component,
@@ -4146,7 +4286,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                             useExisting: forwardRef(() => DocsUploaderComponent),
                             multi: true,
                         },
-                    ], template: "@if (!isReadOnly) {\r\n  <ng-container>\r\n    @if(label) {\r\n      <app-form-label [label]=\"label\" [optional]=\"!control.hasValidator(Validators['required'])\" [tooltip]=\"tooltip\"></app-form-label>\r\n    }\r\n    <section\r\n    (click)=\"fileAttached.click()\"\r\n      [ngClass]=\"insideTable ? 'file-uploader-table' : 'file-uploader'\" class=\" mb-2\"\r\n      [class.insideTableStyle]=\"insideTable\">\r\n      <div\r\n        [ngClass]=\"insideTable ? 'file-uploader-table-dev' : ''\" class=\"file-uploader-input\"\r\n        >\r\n        @if (!uploading) {\r\n          <div class=\"icon mb-1\">\r\n            <svg\r\n              [ngClass]=\"insideTable ? 'file-uploader-table-svg' : ''\" width=\"41\" height=\"38\" viewBox=\"0 0 41 38\"\r\n              fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n              <path\r\n                d=\"M0 22.1947V20.6736C0.0971303 20.1019 0.070094 19.5141 0.276371 18.9533C1.28372 16.2086 3.21231 14.5023 6.0421 13.8094C6.70499 13.6472 6.68497 13.6632 6.69899 12.9843C6.73203 11.3321 6.99839 9.71992 7.62423 8.17986C8.86289 5.13678 10.9467 2.83969 13.8816 1.39175C17.168 -0.230424 20.5956 -0.450719 24.0553 0.81598C27.4929 2.07467 29.9622 4.41581 31.4802 7.74828C31.7786 8.40316 32.027 9.08307 32.1712 9.79202C32.2402 10.1315 32.4035 10.2566 32.7529 10.3107C36.7012 10.9165 39.3358 13.1255 40.6946 16.8735C40.9069 17.4603 40.9199 18.0731 40.9599 18.6829C40.9649 18.7601 40.9389 18.8442 41 18.9113V20.5124C40.9109 20.995 40.969 21.4937 40.8608 21.9734C40.5244 23.4614 39.8454 24.7821 38.8501 25.9297C37.4522 27.5418 35.7059 28.5882 33.6161 29.0519C32.791 29.2351 31.9499 29.2521 31.1117 29.2922C30.6571 29.3142 30.584 29.193 30.592 28.7484C30.6451 25.8446 29.802 23.2571 27.8624 21.0591C25.9979 18.9463 23.6597 17.7167 20.867 17.4012C18.8553 17.1739 16.9057 17.4593 15.0612 18.3395C11.8319 19.8816 9.81416 22.4069 8.96102 25.8696C8.74273 26.7538 8.68265 27.658 8.70568 28.5702C8.7217 29.2111 8.60254 29.3122 7.95968 29.2972C5.95098 29.2511 4.10551 28.7234 2.58146 27.3596C1.07644 26.0168 0.0680913 24.3996 0.0400537 22.3028C0.0400537 22.2607 0.0250336 22.2257 0 22.1937V22.1947Z\"\r\n                fill=\"#DEE0E2\"/>\r\n              <path\r\n                d=\"M29.0303 28.2632C29.0604 33.4031 24.8657 37.6187 19.6838 37.6548C14.5169 37.6908 10.2852 33.4952 10.2521 28.3042C10.2201 23.1403 14.4297 18.9126 19.6227 18.8946C24.8037 18.8766 28.9993 23.0542 29.0303 28.2632Z\"\r\n                fill=\"#8E9AA0\"/>\r\n              <path\r\n                d=\"M20.5573 25.2644C20.4622 25.4477 20.5012 25.5939 20.5012 25.734C20.4982 28.2154 20.5002 30.6957 20.4982 33.177C20.4982 33.8099 20.2339 34.1704 19.7462 34.2234C19.2645 34.2765 18.88 33.9831 18.8169 33.5025C18.7959 33.3443 18.7969 33.183 18.7969 33.0238C18.7959 30.5826 18.7969 28.1423 18.7969 25.701C18.7969 25.5728 18.7969 25.4447 18.7969 25.2003C18.1971 25.8031 17.6774 26.3288 17.1527 26.8505C17.0115 26.9907 16.8683 27.1349 16.7061 27.2471C16.3566 27.4864 15.9341 27.4413 15.6457 27.154C15.3643 26.8746 15.3203 26.442 15.5486 26.0925C15.6207 25.9824 15.7128 25.8832 15.8069 25.7891C16.8613 24.7307 17.9167 23.6733 18.9732 22.6179C19.4017 22.1893 19.8784 22.1763 20.3039 22.5988C21.3914 23.6803 22.4739 24.7667 23.5533 25.8572C23.9809 26.2898 24.0129 26.8065 23.6534 27.167C23.299 27.5214 22.7753 27.4844 22.3437 27.0568C21.7499 26.47 21.1661 25.8732 20.5603 25.2644H20.5573Z\"\r\n                fill=\"#F9F9F9\"/>\r\n            </svg>\r\n          </div>\r\n        }\r\n        @if (uploading) {\r\n          <ds-icon class=\"sfi sfi-spinner d-inline-block spin fc-coral fs-30-imp\"></ds-icon>\r\n        }\r\n\r\n        <div class=\"f-14 fc-black fw-normal\">\r\n          <span class=\"fc-coral fw-medium\">{{ 'browse' | translate }}</span>\r\n        </div>\r\n        <div class=\"fs-10 fc-dark-gray\">\r\n          {{ allowedExtensions ? allowedExtensions : '' }}\r\n        </div>\r\n\r\n        <input type=\"file\" #inputFile [accept]=\"accept\" class=\"d-none\" #fileAttached (change)=\"onValueChange($event)\">\r\n      </div>\r\n    </section>\r\n\r\n    @if (hints) {\r\n      <div class=\"d-flex align-items-center gap-3 mb-3\">\r\n        @for (hint of hints; track hint) {\r\n          <ng-container>\r\n            <div class=\"d-flex align-items-center gap-1 fs-12\">\r\n              <ds-icon\r\n                icon=\"{{ hint.valid ? 'check-circle-f' : 'check-circle-o' }}\"\r\n                class=\"fs-24 {{ hint.valid ? 'fc-green' : 'fc-dark-gray' }}\"></ds-icon>\r\n              <span class=\"{{ hint.valid ? 'fc-black' : 'fc-dark-gray' }}\">{{ hint.label }}</span>\r\n            </div>\r\n          </ng-container>\r\n        }\r\n      </div>\r\n    }\r\n\r\n    @if (hint) {\r\n      <mat-hint class=\"d-flex align-items-center gap-1\">\r\n        <ds-icon icon=\"info\" class=\"fs-17 fc-dark-gray\"></ds-icon>\r\n        <span class=\"fs-12 fc-black line-height-1\">{{ hint }}</span>\r\n      </mat-hint>\r\n    }\r\n\r\n    @if (multiple) {\r\n      <section class=\"files-list\">\r\n        @for (file of displayedFiles; track file; let i = $index) {\r\n          <div class=\"file-item-container\">\r\n            <ds-attachments\r\n              [matTooltip]=\"file?.fileName\"\r\n              [file]=\"{ name: file.fileName }\"\r\n              (downloadEvent)=\"attachmentAction('download', i, file)\"\r\n              (deleteEvent)=\"attachmentAction('delete', i, file)\"\r\n              [showActions]=\"showActions\">\r\n            </ds-attachments>\r\n          </div>\r\n        }\r\n      </section>\r\n    }\r\n\r\n    @if (!multiple && (control.value?.fileContents || control.value?.attachmentId)) {\r\n      <section class=\"files-list\">\r\n        <div class=\"file-item-container file-item-container-actions\">\r\n          <ds-attachments\r\n            [matTooltip]=\"control.value?.fileName\"\r\n            [file]=\"{ name: control.value.fileName }\"\r\n            (downloadEvent)=\"attachmentAction('download', null, control.value)\"\r\n            (deleteEvent)=\"attachmentAction('delete', null, control.value)\"\r\n            [showActions]=\"showActions\">\r\n          </ds-attachments>\r\n        </div>\r\n      </section>\r\n    }\r\n\r\n    <div class=\"attachments-error\">\r\n      @if (!validExtension) {\r\n        <section class=\"files-list mt-2\">\r\n          <div class=\"file-item-container \">\r\n            <ds-attachments\r\n              [file]=\"wrongFile\" error [showActions]=\"false\">\r\n            </ds-attachments>\r\n          </div>\r\n        </section>\r\n      }\r\n\r\n      @if (!allowedFileSize) {\r\n        <mat-error class=\"fs-12 my-2\">\r\n          {{ maxSize === \"0.3\" ? ('support3' | translate ): ('support2' | translate) + maxSize + ('mb' | translate) }}\r\n        </mat-error>\r\n      }\r\n\r\n      @if (!fileNotDuplicated) {\r\n        <mat-error class=\"fs-12 my-2\">{{ 'duplicated-error' | translate }}</mat-error>\r\n      }\r\n\r\n      @if (lengthError) {\r\n        <mat-error class=\"fs-12\">{{ 'lengthError' | translate }} :{{ maxLength }}</mat-error>\r\n      }\r\n\r\n      @if (showErrorMessage) {\r\n        <!-- <mat-error class=\"fs-12\">{{errorMessage}} </mat-error> -->\r\n      }\r\n    </div>\r\n  </ng-container>\r\n}\r\n\r\n@if (isReadOnly) {\r\n  <ng-container>\r\n    @if (multiple && displayedFiles) {\r\n      <ng-container>\r\n        <div class=\"info-item\">\r\n          @if (label) {\r\n            <span class=\"name\">{{ label }}</span>\r\n          }\r\n          @if (displayedFiles?.length) {\r\n            <span>\r\n              @for (file of displayedFiles; track file; let i = $index) {\r\n                <div class=\"file-item-container\">\r\n                  <ds-attachments\r\n                    [matTooltip]=\"file?.fileName\"\r\n                    class=\"my-2\" [file]=\"{ name: file.fileName }\" readOnly (downloadEvent)=\"downloadFile($event, file)\"\r\n                    [showActions]=\"showActions\">\r\n                  </ds-attachments>\r\n                </div>\r\n              }\r\n            </span>\r\n          }\r\n          @if (!displayedFiles?.length) {\r\n            <span class=\"disc\">\r\n              {{ 'NoAttachments' | translate }}\r\n            </span>\r\n          }\r\n        </div>\r\n      </ng-container>\r\n    }\r\n\r\n    @if (!multiple && (control.value?.['attachmentId'] || control.value?.['fileContents'])) {\r\n      <ng-container>\r\n        <div class=\"info-item\">\r\n          @if (label) {\r\n            <span class=\"name\">{{ label }}</span>\r\n          }\r\n          <div class=\"disc file-item-container file-item-container-actions\" [ngClass]=\"{'insideTableWidth': insideTable}\">\r\n            @if (control.value?.['attachmentId'] || control.value?.['fileContents']) {\r\n              <ds-attachments\r\n                [matTooltip]=\"control.value?.fileName\" [file]=\"{ name: control.value.fileName }\" [showActions]=\"showActions\"\r\n                (downloadEvent)=\"attachmentAction('download', null, control.value)\"\r\n                (deleteEvent)=\"attachmentAction('delete', null, control.value)\"\r\n                readOnly>\r\n              </ds-attachments>\r\n            }\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    }\r\n  </ng-container>\r\n}", styles: [".file-uploader{--uploader-height: 150px;--uploader-width: 100%;--uploader-bg: var(--off-white);--uploader-border: 1px dashed var(--dark-gray);--uploader-radius: var(--box-radius);--uploader-padding: 1rem;height:var(--uploader-height);background-color:var(--uploader-bg);border:var(--uploader-border);border-radius:var(--uploader-radius);padding:var(--uploader-padding);text-align:center;cursor:pointer;display:flex;align-items:center;justify-content:center}.insideTableWidth{width:250px!important}.file-uploader-table{--uploader-height: 45px;--uploader-width: 100%;--uploader-bg: var(--off-white);--uploader-border: 1px dashed var(--dark-gray);--uploader-radius: var(--box-radius);--uploader-padding: 0 1rem;height:var(--uploader-height);background-color:var(--uploader-bg);border:var(--uploader-border);border-radius:var(--uploader-radius);padding:var(--uploader-padding);text-align:center;cursor:pointer;display:FLEX;align-items:CENTER;justify-content:CENTER}.file-uploader-table-dev{display:FLEX;align-items:CENTER;gap:1rem}.file-uploader-table-svg{width:70%}.insideTableStyle{width:272px}.files-list{--file-item-width: 300px;display:grid;grid-template-columns:repeat(auto-fill,var(--file-item-width));grid-gap:.5rem}@media (max-width: 768px){.files-list{grid-template-columns:repeat(auto-fill,minmax(var(--file-item-width),1fr))}}.files-list .file-item-container .uploaded-file-actions{margin-inline-start:20px}.files-list .file-item-container .uploaded-file-actions .button__wrapper{font-size:15px}.files-list .file-item-container .file-item{--file-bg: var(--off-white);--file-radius: var(--box-radius);--icon-color: var(--purple);--icon-size: 2rem;--file-border: transparent;display:flex;align-items:center;background-color:var(--file-bg);border:1px solid var(--file-border);border-radius:var(--file-radius);padding:0 1rem;height:70px;gap:.75rem}.files-list .file-item-container .file-item.error{--file-bg: rgba(var(--rgb-red), 10%);--file-border: var(--red);--icon-color: var(--red)}.files-list .file-item-container .file-item .icon{color:var(--icon-color);font-size:var(--icon-size)}.files-list .file-item-container .file-item .file-action{display:flex;align-items:center;gap:.5rem}ds-attachments::part(base){--file-width: 250px}.file-item-container-actions{display:flex;align-items:center}.file-item-container-actions .uploaded-file-actions{display:flex;align-items:center;gap:10px;margin-inline-start:25px}.file-item-container-actions .uploaded-file-actions .button__wrapper{font-size:15px}::ng-deep .file-item .name-size{display:flex;flex-direction:column;justify-content:center;flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:120px}\n"] }]
+                    ], template: "@if (!isReadOnly) {\r\n  <ng-container>\r\n    @if(label) {\r\n      <app-form-label [label]=\"label\" [optional]=\"!control?.hasValidator(Validators['required'])\" [tooltip]=\"tooltip\"></app-form-label>\r\n    }\r\n    <section\r\n    (click)=\"fileAttached.click()\"\r\n      [ngClass]=\"insideTable ? 'file-uploader-table' : 'file-uploader'\" class=\" mb-2\"\r\n      [class.insideTableStyle]=\"insideTable\">\r\n      <div\r\n        [ngClass]=\"insideTable ? 'file-uploader-table-dev' : ''\" class=\"file-uploader-input\"\r\n        >\r\n        @if (!uploading) {\r\n          <div class=\"icon mb-1\">\r\n            <svg\r\n              [ngClass]=\"insideTable ? 'file-uploader-table-svg' : ''\" width=\"41\" height=\"38\" viewBox=\"0 0 41 38\"\r\n              fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n              <path\r\n                d=\"M0 22.1947V20.6736C0.0971303 20.1019 0.070094 19.5141 0.276371 18.9533C1.28372 16.2086 3.21231 14.5023 6.0421 13.8094C6.70499 13.6472 6.68497 13.6632 6.69899 12.9843C6.73203 11.3321 6.99839 9.71992 7.62423 8.17986C8.86289 5.13678 10.9467 2.83969 13.8816 1.39175C17.168 -0.230424 20.5956 -0.450719 24.0553 0.81598C27.4929 2.07467 29.9622 4.41581 31.4802 7.74828C31.7786 8.40316 32.027 9.08307 32.1712 9.79202C32.2402 10.1315 32.4035 10.2566 32.7529 10.3107C36.7012 10.9165 39.3358 13.1255 40.6946 16.8735C40.9069 17.4603 40.9199 18.0731 40.9599 18.6829C40.9649 18.7601 40.9389 18.8442 41 18.9113V20.5124C40.9109 20.995 40.969 21.4937 40.8608 21.9734C40.5244 23.4614 39.8454 24.7821 38.8501 25.9297C37.4522 27.5418 35.7059 28.5882 33.6161 29.0519C32.791 29.2351 31.9499 29.2521 31.1117 29.2922C30.6571 29.3142 30.584 29.193 30.592 28.7484C30.6451 25.8446 29.802 23.2571 27.8624 21.0591C25.9979 18.9463 23.6597 17.7167 20.867 17.4012C18.8553 17.1739 16.9057 17.4593 15.0612 18.3395C11.8319 19.8816 9.81416 22.4069 8.96102 25.8696C8.74273 26.7538 8.68265 27.658 8.70568 28.5702C8.7217 29.2111 8.60254 29.3122 7.95968 29.2972C5.95098 29.2511 4.10551 28.7234 2.58146 27.3596C1.07644 26.0168 0.0680913 24.3996 0.0400537 22.3028C0.0400537 22.2607 0.0250336 22.2257 0 22.1937V22.1947Z\"\r\n                fill=\"#DEE0E2\"/>\r\n              <path\r\n                d=\"M29.0303 28.2632C29.0604 33.4031 24.8657 37.6187 19.6838 37.6548C14.5169 37.6908 10.2852 33.4952 10.2521 28.3042C10.2201 23.1403 14.4297 18.9126 19.6227 18.8946C24.8037 18.8766 28.9993 23.0542 29.0303 28.2632Z\"\r\n                fill=\"#8E9AA0\"/>\r\n              <path\r\n                d=\"M20.5573 25.2644C20.4622 25.4477 20.5012 25.5939 20.5012 25.734C20.4982 28.2154 20.5002 30.6957 20.4982 33.177C20.4982 33.8099 20.2339 34.1704 19.7462 34.2234C19.2645 34.2765 18.88 33.9831 18.8169 33.5025C18.7959 33.3443 18.7969 33.183 18.7969 33.0238C18.7959 30.5826 18.7969 28.1423 18.7969 25.701C18.7969 25.5728 18.7969 25.4447 18.7969 25.2003C18.1971 25.8031 17.6774 26.3288 17.1527 26.8505C17.0115 26.9907 16.8683 27.1349 16.7061 27.2471C16.3566 27.4864 15.9341 27.4413 15.6457 27.154C15.3643 26.8746 15.3203 26.442 15.5486 26.0925C15.6207 25.9824 15.7128 25.8832 15.8069 25.7891C16.8613 24.7307 17.9167 23.6733 18.9732 22.6179C19.4017 22.1893 19.8784 22.1763 20.3039 22.5988C21.3914 23.6803 22.4739 24.7667 23.5533 25.8572C23.9809 26.2898 24.0129 26.8065 23.6534 27.167C23.299 27.5214 22.7753 27.4844 22.3437 27.0568C21.7499 26.47 21.1661 25.8732 20.5603 25.2644H20.5573Z\"\r\n                fill=\"#F9F9F9\"/>\r\n            </svg>\r\n          </div>\r\n        }\r\n        @if (uploading) {\r\n          <ds-icon class=\"sfi sfi-spinner d-inline-block spin fc-coral fs-30-imp\"></ds-icon>\r\n        }\r\n\r\n        <div class=\"f-14 fc-black fw-normal\">\r\n          <span class=\"fc-coral fw-medium\">{{ 'browse' | translate }}</span>\r\n        </div>\r\n        <div class=\"fs-10 fc-dark-gray\">\r\n          {{ allowedExtensions ? allowedExtensions : '' }}\r\n        </div>\r\n\r\n        <input type=\"file\" #inputFile [accept]=\"accept\" class=\"d-none\" #fileAttached (change)=\"onValueChange($event)\">\r\n      </div>\r\n    </section>\r\n\r\n    @if (hints) {\r\n      <div class=\"d-flex align-items-center gap-3 mb-3\">\r\n        @for (hint of hints; track hint) {\r\n          <ng-container>\r\n            <div class=\"d-flex align-items-center gap-1 fs-12\">\r\n              <ds-icon\r\n                icon=\"{{ hint.valid ? 'check-circle-f' : 'check-circle-o' }}\"\r\n                class=\"fs-24 {{ hint.valid ? 'fc-green' : 'fc-dark-gray' }}\"></ds-icon>\r\n              <span class=\"{{ hint.valid ? 'fc-black' : 'fc-dark-gray' }}\">{{ hint.label }}</span>\r\n            </div>\r\n          </ng-container>\r\n        }\r\n      </div>\r\n    }\r\n\r\n    @if (hint) {\r\n      <mat-hint class=\"d-flex align-items-center gap-1\">\r\n        <ds-icon icon=\"info\" class=\"fs-17 fc-dark-gray\"></ds-icon>\r\n        <span class=\"fs-12 fc-black line-height-1\">{{ hint }}</span>\r\n      </mat-hint>\r\n    }\r\n\r\n    @if (multiple) {\r\n      <section class=\"files-list\">\r\n        @for (file of displayedFiles; track file; let i = $index) {\r\n          <div class=\"file-item-container\">\r\n            <ds-attachments\r\n              [matTooltip]=\"file?.fileName\"\r\n              [file]=\"{ name: file.fileName }\"\r\n              (downloadEvent)=\"attachmentAction('download', i, file)\"\r\n              (deleteEvent)=\"attachmentAction('delete', i, file)\"\r\n              [showActions]=\"showActions\">\r\n            </ds-attachments>\r\n          </div>\r\n        }\r\n      </section>\r\n    }\r\n\r\n    @if (!multiple && (control?.value?.fileContents || control?.value?.attachmentId)) {\r\n      <section class=\"files-list\">\r\n        <div class=\"file-item-container file-item-container-actions\">\r\n          <ds-attachments\r\n            [matTooltip]=\"control?.value?.fileName\"\r\n            [file]=\"{ name: control?.value.fileName }\"\r\n            (downloadEvent)=\"attachmentAction('download', null, control?.value)\"\r\n            (deleteEvent)=\"attachmentAction('delete', null, control?.value)\"\r\n            [showActions]=\"showActions\">\r\n          </ds-attachments>\r\n        </div>\r\n      </section>\r\n    }\r\n\r\n    <div class=\"attachments-error\">\r\n      @if (!validExtension) {\r\n        <section class=\"files-list mt-2\">\r\n          <div class=\"file-item-container \">\r\n            <ds-attachments\r\n              [file]=\"wrongFile\" error [showActions]=\"false\">\r\n            </ds-attachments>\r\n          </div>\r\n        </section>\r\n      }\r\n\r\n      @if (!allowedFileSize) {\r\n        <mat-error class=\"fs-12 my-2\">\r\n          {{ maxSize === \"0.3\" ? ('support3' | translate ): ('support2' | translate) + maxSize + ('mb' | translate) }}\r\n        </mat-error>\r\n      }\r\n\r\n      @if (!fileNotDuplicated) {\r\n        <mat-error class=\"fs-12 my-2\">{{ 'duplicated-error' | translate }}</mat-error>\r\n      }\r\n\r\n      @if (lengthError) {\r\n        <mat-error class=\"fs-12\">{{ 'lengthError' | translate }} :{{ maxLength }}</mat-error>\r\n      }\r\n\r\n      @if (showErrorMessage) {\r\n        <!-- <mat-error class=\"fs-12\">{{errorMessage}} </mat-error> -->\r\n      }\r\n    </div>\r\n  </ng-container>\r\n}\r\n\r\n@if (isReadOnly) {\r\n  <ng-container>\r\n    @if (multiple && displayedFiles) {\r\n      <ng-container>\r\n        <div class=\"info-item\">\r\n          @if (label) {\r\n            <span class=\"name\">{{ label }}</span>\r\n          }\r\n          @if (displayedFiles?.length) {\r\n            <span>\r\n              @for (file of displayedFiles; track file; let i = $index) {\r\n                <div class=\"file-item-container\">\r\n                  <ds-attachments\r\n                    [matTooltip]=\"file?.fileName\"\r\n                    class=\"my-2\" [file]=\"{ name: file.fileName }\" readOnly (downloadEvent)=\"downloadFile($event, file)\"\r\n                    [showActions]=\"showActions\">\r\n                  </ds-attachments>\r\n                </div>\r\n              }\r\n            </span>\r\n          }\r\n          @if (!displayedFiles?.length) {\r\n            <span class=\"disc\">\r\n              {{ 'NoAttachments' | translate }}\r\n            </span>\r\n          }\r\n        </div>\r\n      </ng-container>\r\n    }\r\n\r\n    @if (!multiple && (control?.value?.['attachmentId'] || control?.value?.['fileContents'])) {\r\n      <ng-container>\r\n        <div class=\"info-item\">\r\n          @if (label) {\r\n            <span class=\"name\">{{ label }}</span>\r\n          }\r\n          <div class=\"disc file-item-container file-item-container-actions\" [ngClass]=\"{'insideTableWidth': insideTable}\">\r\n            @if (control?.value?.['attachmentId'] || control?.value?.['fileContents']) {\r\n              <ds-attachments\r\n                [matTooltip]=\"control?.value?.fileName\" [file]=\"{ name: control?.value.fileName }\" [showActions]=\"showActions\"\r\n                (downloadEvent)=\"attachmentAction('download', null, control?.value)\"\r\n                (deleteEvent)=\"attachmentAction('delete', null, control?.value)\"\r\n                readOnly>\r\n              </ds-attachments>\r\n            }\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    }\r\n  </ng-container>\r\n}", styles: [".file-uploader{--uploader-height: 150px;--uploader-width: 100%;--uploader-bg: var(--off-white);--uploader-border: 1px dashed var(--dark-gray);--uploader-radius: var(--box-radius);--uploader-padding: 1rem;height:var(--uploader-height);background-color:var(--uploader-bg);border:var(--uploader-border);border-radius:var(--uploader-radius);padding:var(--uploader-padding);text-align:center;cursor:pointer;display:flex;align-items:center;justify-content:center}.insideTableWidth{width:250px!important}.file-uploader-table{--uploader-height: 45px;--uploader-width: 100%;--uploader-bg: var(--off-white);--uploader-border: 1px dashed var(--dark-gray);--uploader-radius: var(--box-radius);--uploader-padding: 0 1rem;height:var(--uploader-height);background-color:var(--uploader-bg);border:var(--uploader-border);border-radius:var(--uploader-radius);padding:var(--uploader-padding);text-align:center;cursor:pointer;display:FLEX;align-items:CENTER;justify-content:CENTER}.file-uploader-table-dev{display:FLEX;align-items:CENTER;gap:1rem}.file-uploader-table-svg{width:70%}.insideTableStyle{width:272px}.files-list{--file-item-width: 300px;display:grid;grid-template-columns:repeat(auto-fill,var(--file-item-width));grid-gap:.5rem}@media (max-width: 768px){.files-list{grid-template-columns:repeat(auto-fill,minmax(var(--file-item-width),1fr))}}.files-list .file-item-container .uploaded-file-actions{margin-inline-start:20px}.files-list .file-item-container .uploaded-file-actions .button__wrapper{font-size:15px}.files-list .file-item-container .file-item{--file-bg: var(--off-white);--file-radius: var(--box-radius);--icon-color: var(--purple);--icon-size: 2rem;--file-border: transparent;display:flex;align-items:center;background-color:var(--file-bg);border:1px solid var(--file-border);border-radius:var(--file-radius);padding:0 1rem;height:70px;gap:.75rem}.files-list .file-item-container .file-item.error{--file-bg: rgba(var(--rgb-red), 10%);--file-border: var(--red);--icon-color: var(--red)}.files-list .file-item-container .file-item .icon{color:var(--icon-color);font-size:var(--icon-size)}.files-list .file-item-container .file-item .file-action{display:flex;align-items:center;gap:.5rem}ds-attachments::part(base){--file-width: 250px}.file-item-container-actions{display:flex;align-items:center}.file-item-container-actions .uploaded-file-actions{display:flex;align-items:center;gap:10px;margin-inline-start:25px}.file-item-container-actions .uploaded-file-actions .button__wrapper{font-size:15px}::ng-deep .file-item .name-size{display:flex;flex-direction:column;justify-content:center;flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:120px}\n"] }]
         }], propDecorators: { useCrop: [{
                 type: Input
             }], formKey: [{
@@ -4241,8 +4381,8 @@ class AttachmentSectionDataComponent extends ControlValueAccessorDirective {
     section;
     formGroup;
     destroyRef = inject(DestroyRef);
-    constructor(injector, i18n, toasterService, coreService, sanitizer, fb, dialogRef, dialogData) {
-        super(injector, i18n, toasterService, coreService, sanitizer, fb);
+    constructor(injector, i18n, toasterService, coreService, sanitizer, fb, actionStateService, dialogRef, dialogData) {
+        super(injector, i18n, toasterService, coreService, sanitizer, fb, actionStateService);
         this.dialogRef = dialogRef;
         this.dialogData = dialogData;
     }
@@ -4306,7 +4446,7 @@ class AttachmentSectionDataComponent extends ControlValueAccessorDirective {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AttachmentSectionDataComponent, deps: [{ token: i0.Injector }, { token: CoreI18nService }, { token: i2.ToastrService }, { token: CoreService }, { token: i3.DomSanitizer }, { token: i4.FormBuilder }, { token: i1$1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AttachmentSectionDataComponent, deps: [{ token: i0.Injector }, { token: CoreI18nService }, { token: i2.ToastrService }, { token: CoreService }, { token: i3.DomSanitizer }, { token: i4.FormBuilder }, { token: ActionStateService }, { token: i1$1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: AttachmentSectionDataComponent, isStandalone: true, selector: "app-add-attachment-section", inputs: { hasColumnBreak: "hasColumnBreak", section: "section" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
@@ -4334,7 +4474,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                             multi: true,
                         },
                     ], template: "<div class=\"popup-container\">\r\n  <div class=\"d-flex align-items-center justify-content-end\" mat-dialog-title>\r\n    <h3 class=\"mb-0 font-16 fw-medium\">{{ 'addAttachments' | translate }}</h3>\r\n    <ds-button icon matDialogClose>\r\n      <ds-icon icon=\"close\" class=\"fs-20 fc-black\"></ds-icon>\r\n    </ds-button>\r\n  </div>\r\n  <mat-dialog-content>\r\n    <div class=\"px-md-4 mt-3\">\r\n      <form [formGroup]=\"formGroup\">\r\n        <app-file-uploader class=\"section-item full\" [field]=\"popupData\" name=\"file\" [attachments]=\"dialogData?.attachments\"\r\n          [labelTextReadMode]=\"'Attachment' | translate\" [labelTextWriteMode]=\"'Attachment' | translate\"\r\n          [hasColumnBreak]=\"false\" [label]=\"'Attachment' | translate\" [required]=\"true\" [multiple]=\"false\" \r\n          [allowedExtensions]=\"dialogData?.data\"\r\n          [isReadOnly]=\"section?.header?.readOnly\" [showActions]=\"false\"\r\n          formControlName=\"file\">\r\n        </app-file-uploader>\r\n\r\n        <app-textarea class=\"section-item d-block mt-4 mb-4\" [section]=\"section\" [field]=\"popupData?.fileDescription\" name=\"fileDescription\"\r\n          [labelTextReadMode]=\"'description' | translate\" [labelTextWriteMode]=\"'description' | translate\"\r\n          [hasColumnBreak]=\"false\" (emitedValue)=\"handleEmitValue($event,'fileDescription')\"\r\n          [label]=\"'description' | translate\" [required]=\"dialogData?.isRequired\" [minLength]='1' [maxLength]='500'\r\n          [isReadOnly]=\"section?.header?.readOnly\" [errorMessage]=\"'lenghtMin1Max500' | translate\"\r\n          formControlName=\"description\">\r\n        </app-textarea>\r\n\r\n        <app-textarea class=\"section-item\" [section]=\"section\" [field]=\"popupData?.attachmentcomment\" name=\"attachmentcomment\"\r\n          [labelTextReadMode]=\"'comments' | translate\" [labelTextWriteMode]=\"'comments' | translate\"\r\n          [hasColumnBreak]=\"false\" (emitedValue)=\"handleEmitValue($event,'attachmentcomment')\" \r\n          [label]=\"'comments' | translate\" [required]=\"false\" [minLength]='1' [maxLength]='500' \r\n          [isReadOnly]=\"section?.header?.readOnly\" [errorMessage]=\"'lenghtMin1Max500' | translate\"\r\n          formControlName=\"comments\">\r\n        </app-textarea>\r\n      </form>\r\n    </div>\r\n  </mat-dialog-content>\r\n  <mat-dialog-actions class=\"default-footer justify-content-end gap-3\">\r\n    <ds-button shape=\"outline\" matDialogClose [disabled]=\"uploading\">{{ 'cancel' | translate }}</ds-button>\r\n    <ds-button (click)=\"addAttachments()\" [loading]=\"uploading\"\r\n      [disabled]=\"(!(formGroup?.value?.file?.fileContents || formGroup?.value?.file?.attachmentId ) || (dialogData?.isRequired && !formGroup?.value?.description) || uploading || !formGroup.valid)\">\r\n      <ng-container *ngIf=\"!editMode; else editTemplate\">\r\n        <span>{{ 'add' | translate }}</span>\r\n      </ng-container>\r\n      <ng-template #editTemplate>\r\n        <span>{{ 'edit' | translate }}</span>\r\n      </ng-template>\r\n    </ds-button>\r\n  </mat-dialog-actions>\r\n</div>", styles: ["::ng-deep .add-attachment-dialog{--popup-max-width: 500px !important;--popup-width: 100% !important}::ng-deep .default-footer ds-button::part(base){--btn-min-width: 90px}\n"] }]
-        }], ctorParameters: () => [{ type: i0.Injector }, { type: CoreI18nService }, { type: i2.ToastrService }, { type: CoreService }, { type: i3.DomSanitizer }, { type: i4.FormBuilder }, { type: i1$1.MatDialogRef }, { type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: i0.Injector }, { type: CoreI18nService }, { type: i2.ToastrService }, { type: CoreService }, { type: i3.DomSanitizer }, { type: i4.FormBuilder }, { type: ActionStateService }, { type: i1$1.MatDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
                 }] }], propDecorators: { hasColumnBreak: [{
@@ -4374,6 +4514,13 @@ class AttachmentSectionComponent extends ControlValueAccessorDirective {
                 element.name = element.fileName;
             });
         }
+        this.actionStateService.resetAction$
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(res => {
+            if (!this.isReadOnly && this.control.enabled) {
+                this.control.reset();
+            }
+        });
     }
     ngAfterViewInit() {
         this.addDataToTable();
@@ -4553,6 +4700,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
 
 class RadioComponent extends ControlValueAccessorDirective {
     options;
+    destroyRef = inject(DestroyRef);
+    ngOnInit() {
+        super.ngOnInit();
+        this.actionStateService.resetAction$
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(res => {
+            if (!this.isReadOnly && this.control.enabled) {
+                this.control.reset();
+            }
+        });
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: RadioComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: RadioComponent, isStandalone: true, selector: "app-radio", inputs: { options: "options" }, providers: [
             {
@@ -6240,7 +6398,7 @@ class ServiceHeaderComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ServiceHeaderComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CoreService }, { token: CoreI18nService }, { token: FeedBackService }, { token: i1$1.MatDialog }, { token: SidenavService }, { token: i2.ToastrService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: ServiceHeaderComponent, isStandalone: true, selector: "core-service-header", inputs: { form: "form", showHistory: "showHistory", isLoading: "isLoading", isReadOnly: "isReadOnly", showApprovalHistory: "showApprovalHistory", approvalHistory: "approvalHistory", creationDate: "creationDate", formTitle: "formTitle", section: "section", serviceFaq: "serviceFaq" }, providers: [FeedBackService,
             { provide: MAT_DIALOG_DATA, useValue: {} },
-        ], ngImport: i0, template: "@if (form?.header?.status?.['key'] === 'NEW') {\r\n  <section\r\n    class=\"main-sidenav main-sidenav-full mb-4\"\r\n\r\n  >\r\n    <div class=\"sidenav-title\">\r\n      <div class=\"d-flex align-items-center gap-3 w-100\">\r\n        <!-- <ds-button icon class=\"rotate-arrow\" size=\"small\" (click)=\"goBack()\" *ngIf=\"!isInMobileApp() && showBack\">\r\n           <ds-icon icon=\"arrow-right\" class=\"fs-19 fc-black\"></ds-icon>\r\n         </ds-button>-->\r\n\r\n        <!--  <h3 class=\"flex-grow-0\">\r\n            {{ formTitle }}\r\n          </h3>-->\r\n\r\n        <section>\r\n          <p class=\"fs-14 fs-md-12 fw-normal fc-dark-gray mb-1\">\r\n            {{ i18n.translate('Hello') }}\r\n            {{ coreService.getShortName(form?.header?.requesterName) }}, {{ i18n.translate('welcomeBack') }}!\r\n          </p>\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            @if (serviceFaq.length) {\r\n              <ds-icon icon=\"info\" class=\"fs-22 fc-dark-gray cursor-pointer\" (click)=\"openFaq()\">\r\n              </ds-icon>\r\n            }\r\n          </h1>\r\n        </section>\r\n        <div class=\"d-flex align-items-center justify-content-end gap-2 flex-grow-1\">\r\n          @if (serviceFaq.length) {\r\n            <ds-button size=\"small\" icon>\r\n              <ds-icon icon=\"info\" class=\"fs-22 fc-dark-gray cursor-pointer\" (click)=\"openFaq()\">\r\n              </ds-icon>\r\n            </ds-button>\r\n          }\r\n          <!-- <ds-button size=\"small\" icon (click)=\"openWorkflow()\">\r\n            <ds-icon icon=\"bell-2-o\" class=\"fs-20 fc-coral\"></ds-icon>\r\n          </ds-button> -->\r\n          @if (!isReadOnly) {\r\n            <ds-button size=\"small\" icon (click)=\"showPreviousRequests()\">\r\n              <ds-icon icon=\"clock\" class=\"fs-20 fc-coral\"></ds-icon>\r\n            </ds-button>\r\n          }\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </section>\r\n\r\n  <!--  <header class=\"mb-4 mt-4 d-flex align-items-center justify-content-between align-items-end gap-2\">\r\n      <section>\r\n        <h6 class=\"fs-14 fs-md-12 fw-normal fc-dark-gray mb-0\">\r\n          {{ i18n.translate('Hello') }}\r\n          {{ coreService.getShortName(form?.header?.requesterName) }}, {{ i18n.translate('welcomeBack') }}!\r\n        </h6>\r\n        <h1 class=\"fs-26 fs-md-20 fw-bold fc-black d-flex align-items-center gap-2 mb-1\">\r\n          {{ formTitle }}\r\n          @if (serviceFaq.length) {\r\n            <ds-icon icon=\"info\" class=\"fs-22 fc-dark-gray cursor-pointer\" (click)=\"openFaq()\">\r\n            </ds-icon>\r\n          }\r\n        </h1>\r\n      </section>\r\n    </header>-->\r\n} @else {\r\n\r\n  <div class=\"w-100\">\r\n    <section class=\"request-main-info  {{statusClass(form?.header?.status?.['key'])}}\">\r\n      <section class=\"request-info\">\r\n        <div class=\"request-info--body\">\r\n          <div class=\"d-flex align-items-center gap-2 flex-grow-1\">\r\n            <img\r\n              alt=\"\"\r\n              src=\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMjkiIHZpZXdCb3g9IjAgMCAzMCAyOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTI1LjEgMEg0LjlDMi4yIDAgMCAyLjIgMCA0LjlWMjguNkgyNS4xQzI3LjggMjguNiAzMCAyNi40IDMwIDIzLjdWNC45QzMwIDIuMiAyNy44IDAgMjUuMSAwWk0yIDQuOUMyIDMuMyAzLjMgMiA0LjkgMkgyNS4xQzI2LjcgMiAyOCAzLjMgMjggNC45VjIzLjdDMjggMjUuMyAyNi43IDI2LjYgMjUuMSAyNi42SDJWNC45Wk0xMS41IDYuM0M3LjEgNi4zIDMuNSA5LjkgMy41IDE0LjNDMy41IDE4LjcgNy4xIDIyLjMgMTEuNSAyMi4zQzE1LjkgMjIuMyAxOS41IDE4LjcgMTkuNSAxNC4zQzE5LjUgOS45IDE1LjkgNi4zIDExLjUgNi4zWk0xNS4xIDE5QzE0LjEgMTkuOCAxMi44IDIwLjIgMTEuNSAyMC4yQzEwLjIgMjAuMiA4LjkgMTkuOCA3LjkgMTlDOC43IDE3LjcgMTAgMTcgMTEuNSAxN0MxMyAxNyAxNC40IDE3LjggMTUuMSAxOVpNMTMuMSAxMy40QzEzLjEgMTQuMyAxMi40IDE1IDExLjUgMTVDMTAuNiAxNSA5LjkgMTQuMyA5LjkgMTMuNEM5LjkgMTIuNSAxMC42IDExLjggMTEuNSAxMS44QzEyLjQgMTEuOCAxMy4xIDEyLjUgMTMuMSAxMy40Wk0xNS4xIDEzLjRDMTUuMSAxMS40IDEzLjUgOS44IDExLjUgOS44QzkuNSA5LjggNy45IDExLjQgNy45IDEzLjRDNy45IDE0LjIgOC4yIDE1IDguNyAxNS43QzcuOCAxNi4xIDcuMSAxNi44IDYuNSAxNy42QzUuOCAxNi42IDUuNSAxNS41IDUuNSAxNC4zQzUuNSAxMSA4LjIgOC4zIDExLjUgOC4zQzE0LjggOC4zIDE3LjUgMTEgMTcuNSAxNC4zQzE3LjUgMTUuNSAxNy4yIDE2LjYgMTYuNSAxNy42QzE1LjkgMTYuOCAxNS4yIDE2LjIgMTQuMyAxNS43QzE0LjggMTUuMSAxNS4xIDE0LjIgMTUuMSAxMy40Wk0yMSA5LjFDMjEgOC42IDIxLjQgOC4xIDIyIDguMUgyNS41QzI2IDguMSAyNi41IDguNSAyNi41IDkuMUMyNi41IDkuNiAyNi4xIDEwLjEgMjUuNSAxMC4xSDIyQzIxLjQgMTAuMSAyMSA5LjYgMjEgOS4xWk0yMSAxMi41QzIxIDEyIDIxLjQgMTEuNSAyMiAxMS41SDI1LjVDMjYgMTEuNSAyNi41IDExLjkgMjYuNSAxMi41QzI2LjUgMTMgMjYuMSAxMy41IDI1LjUgMTMuNUgyMkMyMS40IDEzLjUgMjEgMTMuMSAyMSAxMi41Wk0yMSAxNkMyMSAxNS41IDIxLjQgMTUgMjIgMTVIMjUuNUMyNiAxNSAyNi41IDE1LjQgMjYuNSAxNkMyNi41IDE2LjUgMjYuMSAxNyAyNS41IDE3SDIyQzIxLjQgMTcgMjEgMTYuNiAyMSAxNlpNMjUuNSAyMC41SDIyQzIxLjUgMjAuNSAyMSAyMC4xIDIxIDE5LjVDMjEgMTguOSAyMS40IDE4LjUgMjIgMTguNUgyNS41QzI2IDE4LjUgMjYuNSAxOC45IDI2LjUgMTkuNUMyNi41IDIwLjEgMjYuMSAyMC41IDI1LjUgMjAuNVoiIGZpbGw9IiNGRjM3NUUiLz4KPC9zdmc+Cg==\"/>\r\n            <h4 class=\"fs-22 fs-md-16 fc-black fw-medium mb-0 flex-grow-1 line-height-1-2\">\r\n              {{ formTitle }}\r\n            </h4>\r\n          </div>\r\n          <div class=\"d-flex align-items-center gap-2 request-info--status-action\">\r\n            <div class=\"d-inline-flex flex-column align-items-end\">\r\n              @if (!isLoading) {\r\n                <ds-status\r\n                  status=\"{{statusClass(form?.header?.status?.['key'])}}\" class=\"header-status\">{{ form?.header?.status?.['value'] }}\r\n                </ds-status>\r\n              }\r\n            </div>\r\n            <div class=\"d-flex align-items-center gap-2\">\r\n              <!-- <ds-button\r\n                 *ngIf=\"form?.inboxItem && (form?.inboxItem?.canRequestFeedback =='true'|| form?.inboxItem?.hasFeedback=='true')\"\r\n                 square icon size=\"small\">\r\n                 <ds-icon icon=\"chat-o\" class=\"fs-20 fs-md-17 fc-coral\">\r\n                   &lt;!&ndash;                  [ngClass]=\"{'fc-green':feedBackIcon == 'feedbackResponded' , 'fc-red': feedBackIcon == 'respondToFeedback' , 'fc-yellow': feedBackIcon == 'waitingFeedback'}\"&ndash;&gt;\r\n                 </ds-icon>\r\n               </ds-button>-->\r\n              <!-- history-->\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-content></ng-content>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"request-info--footer\">\r\n          @if (!isLoading) {\r\n            <ds-avatar\r\n              image=\"{{form?.header?.requesterPhoto}}\" size=\"xx-small\"\r\n              class=\"d-inline-flex cursor-pointer\" (click)=\"showUserInfo()\"></ds-avatar>\r\n          }\r\n          <div\r\n            class=\"d-flex align-items-center flex-wrap flex-grow-1 gap-1 gap-sm-2 line-height-1 request-info--header__details\">\r\n            <span\r\n              [ngClass]=\"{'loading-bg loading-width': isLoading}\"\r\n              class=\"fs-12 fw-medium d-none d-sm-inline-block\">{{ coreService.getShortName(form?.header?.['requesterName']) }}</span>\r\n            <span class=\"fs-20\">&#8226;</span>\r\n            <span class=\"fs-12\" [ngClass]=\"{'loading-bg loading-width': isLoading}\"> {{ form?.header?.formId }}</span>\r\n            <span class=\"fs-20\" *ngIf=\"creationDate\">&#8226;</span>\r\n            <span class=\"fs-12\" [ngClass]=\"{'loading-bg loading-width': isLoading}\"> {{ creationDate }}</span>\r\n          </div>\r\n        </div>\r\n      </section>\r\n    </section>\r\n\r\n  </div>\r\n\r\n\r\n  <!--<ng-container>\r\n    <div class=\"d-flex align-items-center justify-content-end gap-2 my-2\">\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      <ng-content></ng-content>\r\n    </div>\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          <h1 class=\"fs-20 fs-md-16 fw-bold fc-black header-title m-0\">{{ formTitle }}\r\n            @if (serviceFaq.length) {\r\n              <ds-icon icon=\"info\" class=\"fs-22 fc-dark-gray cursor-pointer\" (click)=\"openFaq()\">\r\n              </ds-icon>\r\n            }\r\n          </h1>\r\n          <div class=\"header-user d-flex align-items-sm-center gap-2 mt-sm-1\">\r\n            @if (!isLoading) {\r\n              <ds-avatar\r\n                image=\"{{form?.header?.requesterPhoto}}\" size=\"xx-small\"\r\n                class=\"d-inline-flex cursor-pointer\" (click)=\"showUserInfo()\"></ds-avatar>\r\n            }\r\n            <span\r\n              class=\"fs-12 text-truncate d-sm-block cursor-pointer\" (click)=\"showUserInfo()\"\r\n              [ngClass]=\"{'loading-bg loading-width': isLoading}\">{{ coreService.getShortName(form?.header?.requesterName) }}</span>\r\n            <mat-divider class=\"divider circle mx-2 d-none d-sm-block\"></mat-divider>\r\n            <span class=\"fs-12\" [ngClass]=\"{'loading-bg loading-width': isLoading}\">{{ form?.header?.formId }}</span>\r\n            @if (creationDate) {\r\n              <mat-divider class=\"divider circle mx-2 d-none d-sm-block\"></mat-divider>\r\n              <span class=\"fs-14\" [ngClass]=\"{'loading-bg loading-width': isLoading}\">{{ creationDate }}</span>\r\n            }\r\n          </div>\r\n\r\n        </div>\r\n        <div 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          @if (!isLoading) {\r\n            <ds-status\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            &lt;!&ndash; feedback&ndash;&gt;\r\n            &lt;!&ndash;            *ngIf=\"form?.inboxItem && (form?.inboxItem?.canRequestFeedback ==='true'|| form?.inboxItem?.hasFeedback==='true') && !isLoading\"&ndash;&gt;\r\n            &lt;!&ndash;  <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>&ndash;&gt;\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            @if (showApprovalHistory) {\r\n              <ng-container>\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                <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            }\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n    </header>\r\n  </ng-container>-->\r\n}\r\n", styles: [".loading-width{min-width:100px;width:40px;flex-grow:1}.request-main-info{--item-bg: var(--light-gray);--item-fc: var(--black);--status-container-bc: #e8ebec;--status-container-brc: var(--dark-gray)}.request-main-info.warning{--item-bg: var(--yellow);--status-container-bc: #fff8d9;--status-container-brc: var(--yellow)}.request-main-info.pending{--item-bg: #eff0f1;--status-container-bc: #e8ebec;--status-container-brc: #c8ced1}.request-main-info.expired{--item-bg: var(--dark-gray);--status-container-bc: #e8ebec;--status-container-brc: var(--dark-gray)}.request-main-info.success{--item-bg: var(--green);--status-container-bc: #e6f9f4;--status-container-brc: var(--green)}.request-main-info.info{--item-bg: var(--sea-light);--status-container-bc: #fff8d9;--status-container-brc: var(--sea-light)}.request-main-info.danger{--item-bg: var(--red);--status-container-bc: #fae9ec;--status-container-brc: var(--red)}.request-main-info.orange,.request-main-info.send_back{--item-bg: var(--orange);--status-container-bc: #fff0eb;--status-container-brc: var(--orange)}.request-info{border-radius:0;box-shadow:var(--box-shadow);background-color:var(--white);border-top:5px solid var(--item-bg)}.request-info--footer{padding:.3rem 2rem;min-height:45px;display:flex;align-items:center;gap:.75rem;border-top:1px solid var(--light-gray)}@media (max-width: 578px){.request-info--footer{padding:.3rem 1rem}}.request-info--footer__details{color:var(--item-fc)}.request-info--body{padding:2rem;display:flex;align-items:center;gap:.75rem;background-color:#fff}@media (max-width: 578px){.request-info--body{padding:1rem;flex-direction:column;align-items:stretch}}.request-info--body figure{min-width:30px;width:30px;text-align:center}.request-info--body figure svg{width:100%}@media (max-width: 578px){.request-info--status-action{justify-content:space-between}}.request-info--history{margin-top:-.5rem}.request-info--comment{background-color:#fff0eb;color:var(--orange);border-radius:0 0 4px 4px}.status-container{min-height:40px;padding:.5rem 1rem;display:flex;flex-direction:column;justify-content:center;gap:.5rem;margin-bottom:1.5rem}.status-container.danger{--item-bg: var(--red);--status-container-bc: #fae9ec;--status-container-brc: var(--red)}.status-container ::ng-deep ds-avatar .avatar{--default-size: 18px}.circle-status::part(base){--status-radius: 50%;--status-size: 19px;--status-fs: 100%}ds-button[square]::part(base){--btn-padding: 0;--default-size-sm: 30px}.send-back-container{background-color:#fff0eb;color:var(--orange);padding:.5rem;border-radius:4px}object,iframe,embed{height:79vh}::ng-deep .history-popup{--popup-width: 100vw;--popup-max-width: 100vw;--popup-radius: 15px 15px 0 0;position:absolute!important;bottom:0}:host ::ng-deep .mat-expansion-panel-content{background:#fff!important}:host .main-sidenav.main-sidenav-full .sidenav-title{border-bottom:transparent!important}:host .main-sidenav .sidenav-title{background-color:transparent!important}:host .main-sidenav{height:60px;min-height:10px!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: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SatPopoverModule }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+        ], ngImport: i0, template: "@if (form?.header?.status?.['key'] === 'NEW') {\r\n  <section\r\n    class=\"main-sidenav main-sidenav-full mb-4\"\r\n\r\n  >\r\n    <div class=\"sidenav-title\">\r\n      <div class=\"d-flex align-items-center gap-3 w-100\">\r\n        <!-- <ds-button icon class=\"rotate-arrow\" size=\"small\" (click)=\"goBack()\" *ngIf=\"!isInMobileApp() && showBack\">\r\n           <ds-icon icon=\"arrow-right\" class=\"fs-19 fc-black\"></ds-icon>\r\n         </ds-button>-->\r\n\r\n        <!--  <h3 class=\"flex-grow-0\">\r\n            {{ formTitle }}\r\n          </h3>-->\r\n\r\n        <section>\r\n          <p class=\"fs-14 fs-md-12 fw-normal fc-dark-gray mb-1\">\r\n            {{ i18n.translate('Hello') }}\r\n            {{ coreService.getShortName(form?.header?.requesterName) }}, {{ i18n.translate('welcomeBack') }}!\r\n          </p>\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            @if (serviceFaq.length) {\r\n              <ds-icon icon=\"info\" class=\"fs-22 fc-dark-gray cursor-pointer\" (click)=\"openFaq()\">\r\n              </ds-icon>\r\n            }\r\n          </h1>\r\n        </section>\r\n        <div class=\"d-flex align-items-center justify-content-end gap-2 flex-grow-1\">\r\n          @if (serviceFaq.length) {\r\n            <ds-button size=\"small\" icon>\r\n              <ds-icon icon=\"info\" class=\"fs-22 fc-dark-gray cursor-pointer\" (click)=\"openFaq()\">\r\n              </ds-icon>\r\n            </ds-button>\r\n          }\r\n          <!-- <ds-button size=\"small\" icon (click)=\"openWorkflow()\">\r\n            <ds-icon icon=\"bell-2-o\" class=\"fs-20 fc-coral\"></ds-icon>\r\n          </ds-button> -->\r\n          @if (!isReadOnly) {\r\n            <ds-button size=\"small\" icon (click)=\"showPreviousRequests()\">\r\n              <ds-icon icon=\"clock\" class=\"fs-20 fc-coral\"></ds-icon>\r\n            </ds-button>\r\n          }\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </section>\r\n\r\n  <!--  <header class=\"mb-4 mt-4 d-flex align-items-center justify-content-between align-items-end gap-2\">\r\n      <section>\r\n        <h6 class=\"fs-14 fs-md-12 fw-normal fc-dark-gray mb-0\">\r\n          {{ i18n.translate('Hello') }}\r\n          {{ coreService.getShortName(form?.header?.requesterName) }}, {{ i18n.translate('welcomeBack') }}!\r\n        </h6>\r\n        <h1 class=\"fs-26 fs-md-20 fw-bold fc-black d-flex align-items-center gap-2 mb-1\">\r\n          {{ formTitle }}\r\n          @if (serviceFaq.length) {\r\n            <ds-icon icon=\"info\" class=\"fs-22 fc-dark-gray cursor-pointer\" (click)=\"openFaq()\">\r\n            </ds-icon>\r\n          }\r\n        </h1>\r\n      </section>\r\n    </header>-->\r\n} @else {\r\n\r\n  <div class=\"w-100\">\r\n    <section class=\"request-main-info  {{statusClass(form?.header?.status?.['key'])}}\">\r\n      <section class=\"request-info\">\r\n        <div class=\"request-info--body\">\r\n          <div class=\"d-flex align-items-center gap-2 flex-grow-1\">\r\n            <img\r\n              alt=\"\"\r\n              src=\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMjkiIHZpZXdCb3g9IjAgMCAzMCAyOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTI1LjEgMEg0LjlDMi4yIDAgMCAyLjIgMCA0LjlWMjguNkgyNS4xQzI3LjggMjguNiAzMCAyNi40IDMwIDIzLjdWNC45QzMwIDIuMiAyNy44IDAgMjUuMSAwWk0yIDQuOUMyIDMuMyAzLjMgMiA0LjkgMkgyNS4xQzI2LjcgMiAyOCAzLjMgMjggNC45VjIzLjdDMjggMjUuMyAyNi43IDI2LjYgMjUuMSAyNi42SDJWNC45Wk0xMS41IDYuM0M3LjEgNi4zIDMuNSA5LjkgMy41IDE0LjNDMy41IDE4LjcgNy4xIDIyLjMgMTEuNSAyMi4zQzE1LjkgMjIuMyAxOS41IDE4LjcgMTkuNSAxNC4zQzE5LjUgOS45IDE1LjkgNi4zIDExLjUgNi4zWk0xNS4xIDE5QzE0LjEgMTkuOCAxMi44IDIwLjIgMTEuNSAyMC4yQzEwLjIgMjAuMiA4LjkgMTkuOCA3LjkgMTlDOC43IDE3LjcgMTAgMTcgMTEuNSAxN0MxMyAxNyAxNC40IDE3LjggMTUuMSAxOVpNMTMuMSAxMy40QzEzLjEgMTQuMyAxMi40IDE1IDExLjUgMTVDMTAuNiAxNSA5LjkgMTQuMyA5LjkgMTMuNEM5LjkgMTIuNSAxMC42IDExLjggMTEuNSAxMS44QzEyLjQgMTEuOCAxMy4xIDEyLjUgMTMuMSAxMy40Wk0xNS4xIDEzLjRDMTUuMSAxMS40IDEzLjUgOS44IDExLjUgOS44QzkuNSA5LjggNy45IDExLjQgNy45IDEzLjRDNy45IDE0LjIgOC4yIDE1IDguNyAxNS43QzcuOCAxNi4xIDcuMSAxNi44IDYuNSAxNy42QzUuOCAxNi42IDUuNSAxNS41IDUuNSAxNC4zQzUuNSAxMSA4LjIgOC4zIDExLjUgOC4zQzE0LjggOC4zIDE3LjUgMTEgMTcuNSAxNC4zQzE3LjUgMTUuNSAxNy4yIDE2LjYgMTYuNSAxNy42QzE1LjkgMTYuOCAxNS4yIDE2LjIgMTQuMyAxNS43QzE0LjggMTUuMSAxNS4xIDE0LjIgMTUuMSAxMy40Wk0yMSA5LjFDMjEgOC42IDIxLjQgOC4xIDIyIDguMUgyNS41QzI2IDguMSAyNi41IDguNSAyNi41IDkuMUMyNi41IDkuNiAyNi4xIDEwLjEgMjUuNSAxMC4xSDIyQzIxLjQgMTAuMSAyMSA5LjYgMjEgOS4xWk0yMSAxMi41QzIxIDEyIDIxLjQgMTEuNSAyMiAxMS41SDI1LjVDMjYgMTEuNSAyNi41IDExLjkgMjYuNSAxMi41QzI2LjUgMTMgMjYuMSAxMy41IDI1LjUgMTMuNUgyMkMyMS40IDEzLjUgMjEgMTMuMSAyMSAxMi41Wk0yMSAxNkMyMSAxNS41IDIxLjQgMTUgMjIgMTVIMjUuNUMyNiAxNSAyNi41IDE1LjQgMjYuNSAxNkMyNi41IDE2LjUgMjYuMSAxNyAyNS41IDE3SDIyQzIxLjQgMTcgMjEgMTYuNiAyMSAxNlpNMjUuNSAyMC41SDIyQzIxLjUgMjAuNSAyMSAyMC4xIDIxIDE5LjVDMjEgMTguOSAyMS40IDE4LjUgMjIgMTguNUgyNS41QzI2IDE4LjUgMjYuNSAxOC45IDI2LjUgMTkuNUMyNi41IDIwLjEgMjYuMSAyMC41IDI1LjUgMjAuNVoiIGZpbGw9IiNGRjM3NUUiLz4KPC9zdmc+Cg==\"/>\r\n            <h4 class=\"fs-22 fs-md-16 fc-black fw-medium mb-0 flex-grow-1 line-height-1-2\">\r\n              {{ formTitle }}\r\n            </h4>\r\n          </div>\r\n          <div class=\"d-flex align-items-center gap-2 request-info--status-action\">\r\n            <div class=\"d-inline-flex flex-column align-items-end\">\r\n              @if (!isLoading) {\r\n                <ds-status\r\n                  status=\"{{statusClass(form?.header?.status?.['key'])}}\" class=\"header-status\">{{ form?.header?.status?.['value'] }}\r\n                </ds-status>\r\n              }\r\n            </div>\r\n            <div class=\"d-flex align-items-center gap-2\">\r\n              <!-- <ds-button\r\n                 *ngIf=\"form?.inboxItem && (form?.inboxItem?.canRequestFeedback =='true'|| form?.inboxItem?.hasFeedback=='true')\"\r\n                 square icon size=\"small\">\r\n                 <ds-icon icon=\"chat-o\" class=\"fs-20 fs-md-17 fc-coral\">\r\n                   &lt;!&ndash;                  [ngClass]=\"{'fc-green':feedBackIcon == 'feedbackResponded' , 'fc-red': feedBackIcon == 'respondToFeedback' , 'fc-yellow': feedBackIcon == 'waitingFeedback'}\"&ndash;&gt;\r\n                 </ds-icon>\r\n               </ds-button>-->\r\n              <!-- history-->\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-content></ng-content>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"request-info--footer\">\r\n          @if (!isLoading) {\r\n            <ds-avatar\r\n              image=\"{{form?.header?.requesterPhoto}}\" size=\"xx-small\"\r\n              class=\"d-inline-flex cursor-pointer\" (click)=\"showUserInfo()\"></ds-avatar>\r\n          }\r\n          <div\r\n            class=\"d-flex align-items-center flex-wrap flex-grow-1 gap-1 gap-sm-2 line-height-1 request-info--header__details\">\r\n            <span\r\n              [ngClass]=\"{'loading-bg loading-width': isLoading}\"\r\n              class=\"fs-12 fw-medium d-none d-sm-inline-block\">{{ coreService.getShortName(form?.header?.['requesterName']) }}</span>\r\n            <span class=\"fs-20\">&#8226;</span>\r\n            <span class=\"fs-12\" [ngClass]=\"{'loading-bg loading-width': isLoading}\"> {{ form?.header?.formId }}</span>\r\n            <span class=\"fs-20\" *ngIf=\"creationDate\">&#8226;</span>\r\n            <span class=\"fs-12\" [ngClass]=\"{'loading-bg loading-width': isLoading}\"> {{ creationDate }}</span>\r\n          </div>\r\n        </div>\r\n      </section>\r\n    </section>\r\n\r\n  </div>\r\n\r\n\r\n  <!--<ng-container>\r\n    <div class=\"d-flex align-items-center justify-content-end gap-2 my-2\">\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      <ng-content></ng-content>\r\n    </div>\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          <h1 class=\"fs-20 fs-md-16 fw-bold fc-black header-title m-0\">{{ formTitle }}\r\n            @if (serviceFaq.length) {\r\n              <ds-icon icon=\"info\" class=\"fs-22 fc-dark-gray cursor-pointer\" (click)=\"openFaq()\">\r\n              </ds-icon>\r\n            }\r\n          </h1>\r\n          <div class=\"header-user d-flex align-items-sm-center gap-2 mt-sm-1\">\r\n            @if (!isLoading) {\r\n              <ds-avatar\r\n                image=\"{{form?.header?.requesterPhoto}}\" size=\"xx-small\"\r\n                class=\"d-inline-flex cursor-pointer\" (click)=\"showUserInfo()\"></ds-avatar>\r\n            }\r\n            <span\r\n              class=\"fs-12 text-truncate d-sm-block cursor-pointer\" (click)=\"showUserInfo()\"\r\n              [ngClass]=\"{'loading-bg loading-width': isLoading}\">{{ coreService.getShortName(form?.header?.requesterName) }}</span>\r\n            <mat-divider class=\"divider circle mx-2 d-none d-sm-block\"></mat-divider>\r\n            <span class=\"fs-12\" [ngClass]=\"{'loading-bg loading-width': isLoading}\">{{ form?.header?.formId }}</span>\r\n            @if (creationDate) {\r\n              <mat-divider class=\"divider circle mx-2 d-none d-sm-block\"></mat-divider>\r\n              <span class=\"fs-14\" [ngClass]=\"{'loading-bg loading-width': isLoading}\">{{ creationDate }}</span>\r\n            }\r\n          </div>\r\n\r\n        </div>\r\n        <div 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          @if (!isLoading) {\r\n            <ds-status\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            &lt;!&ndash; feedback&ndash;&gt;\r\n            &lt;!&ndash;            *ngIf=\"form?.inboxItem && (form?.inboxItem?.canRequestFeedback ==='true'|| form?.inboxItem?.hasFeedback==='true') && !isLoading\"&ndash;&gt;\r\n            &lt;!&ndash;  <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>&ndash;&gt;\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            @if (showApprovalHistory) {\r\n              <ng-container>\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                <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            }\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n    </header>\r\n  </ng-container>-->\r\n}\r\n", styles: [".loading-width{min-width:100px;width:40px;flex-grow:1}.request-main-info{--item-bg: var(--light-gray);--item-fc: var(--black);--status-container-bc: #e8ebec;--status-container-brc: var(--dark-gray)}.request-main-info.warning{--item-bg: var(--yellow);--status-container-bc: #fff8d9;--status-container-brc: var(--yellow)}.request-main-info.pending{--item-bg: #eff0f1;--status-container-bc: #e8ebec;--status-container-brc: #c8ced1}.request-main-info.expired{--item-bg: var(--dark-gray);--status-container-bc: #e8ebec;--status-container-brc: var(--dark-gray)}.request-main-info.success{--item-bg: var(--green);--status-container-bc: #e6f9f4;--status-container-brc: var(--green)}.request-main-info.info{--item-bg: var(--sea-light);--status-container-bc: #fff8d9;--status-container-brc: var(--sea-light)}.request-main-info.danger{--item-bg: var(--red);--status-container-bc: #fae9ec;--status-container-brc: var(--red)}.request-main-info.orange,.request-main-info.send_back{--item-bg: var(--orange);--status-container-bc: #fff0eb;--status-container-brc: var(--orange)}.request-info{border-radius:0;box-shadow:var(--box-shadow);background-color:var(--white);border-top:5px solid var(--item-bg)}.request-info--footer{padding:20px 24px;min-height:45px;display:flex;align-items:center;gap:.75rem;border-top:1px solid var(--light-gray)}@media (max-width: 578px){.request-info--footer{padding:.3rem 1rem}}.request-info--footer__details{color:var(--item-fc)}.request-info--body{padding:2rem;display:flex;align-items:center;gap:.75rem;background-color:#fff}@media (max-width: 578px){.request-info--body{padding:1rem;flex-direction:column;align-items:stretch}}.request-info--body figure{min-width:30px;width:30px;text-align:center}.request-info--body figure svg{width:100%}@media (max-width: 578px){.request-info--status-action{justify-content:space-between}}.request-info--history{margin-top:-.5rem}.request-info--comment{background-color:#fff0eb;color:var(--orange);border-radius:0 0 4px 4px}.status-container{min-height:40px;padding:.5rem 1rem;display:flex;flex-direction:column;justify-content:center;gap:.5rem;margin-bottom:1.5rem}.status-container.danger{--item-bg: var(--red);--status-container-bc: #fae9ec;--status-container-brc: var(--red)}.status-container ::ng-deep ds-avatar.user-avatar .avatar{min-width:var(--default-size, 45px);width:var(--default-size, 45px);height:var(--default-size, 45px);padding:var(--avatar-padding, 0);background-color:var(--avatar-bg, white);color:var(--avatar-color, black);border:var(--avatar-border, 0);border-radius:var(--avatar-radius, 50%);margin:var(--avatar-margin, 0);display:inline-flex;align-items:center;justify-content:center;overflow:hidden;--default-size: 25px}@media (min-width: 768px){.status-container ::ng-deep ds-avatar.user-avatar .avatar{--default-size: 31px;--avatar-border: 3px solid var(--light-gray)}}.circle-status::part(base){--status-radius: 50%;--status-size: 19px;--status-fs: 100%}ds-button[square]::part(base){--btn-padding: 0;--default-size-sm: 30px}.send-back-container{background-color:#fff0eb;color:var(--orange);padding:.5rem;border-radius:4px}object,iframe,embed{height:79vh}::ng-deep .history-popup{--popup-width: 100vw;--popup-max-width: 100vw;--popup-radius: 15px 15px 0 0;position:absolute!important;bottom:0}:host ::ng-deep .mat-expansion-panel-content{background:#fff!important}:host .main-sidenav.main-sidenav-full .sidenav-title{border-bottom:transparent!important}:host .main-sidenav .sidenav-title{background-color:transparent!important}:host .main-sidenav{height:60px;min-height:10px!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: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SatPopoverModule }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ServiceHeaderComponent, decorators: [{
             type: Component,
@@ -6254,7 +6412,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: "@if (form?.header?.status?.['key'] === 'NEW') {\r\n  <section\r\n    class=\"main-sidenav main-sidenav-full mb-4\"\r\n\r\n  >\r\n    <div class=\"sidenav-title\">\r\n      <div class=\"d-flex align-items-center gap-3 w-100\">\r\n        <!-- <ds-button icon class=\"rotate-arrow\" size=\"small\" (click)=\"goBack()\" *ngIf=\"!isInMobileApp() && showBack\">\r\n           <ds-icon icon=\"arrow-right\" class=\"fs-19 fc-black\"></ds-icon>\r\n         </ds-button>-->\r\n\r\n        <!--  <h3 class=\"flex-grow-0\">\r\n            {{ formTitle }}\r\n          </h3>-->\r\n\r\n        <section>\r\n          <p class=\"fs-14 fs-md-12 fw-normal fc-dark-gray mb-1\">\r\n            {{ i18n.translate('Hello') }}\r\n            {{ coreService.getShortName(form?.header?.requesterName) }}, {{ i18n.translate('welcomeBack') }}!\r\n          </p>\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            @if (serviceFaq.length) {\r\n              <ds-icon icon=\"info\" class=\"fs-22 fc-dark-gray cursor-pointer\" (click)=\"openFaq()\">\r\n              </ds-icon>\r\n            }\r\n          </h1>\r\n        </section>\r\n        <div class=\"d-flex align-items-center justify-content-end gap-2 flex-grow-1\">\r\n          @if (serviceFaq.length) {\r\n            <ds-button size=\"small\" icon>\r\n              <ds-icon icon=\"info\" class=\"fs-22 fc-dark-gray cursor-pointer\" (click)=\"openFaq()\">\r\n              </ds-icon>\r\n            </ds-button>\r\n          }\r\n          <!-- <ds-button size=\"small\" icon (click)=\"openWorkflow()\">\r\n            <ds-icon icon=\"bell-2-o\" class=\"fs-20 fc-coral\"></ds-icon>\r\n          </ds-button> -->\r\n          @if (!isReadOnly) {\r\n            <ds-button size=\"small\" icon (click)=\"showPreviousRequests()\">\r\n              <ds-icon icon=\"clock\" class=\"fs-20 fc-coral\"></ds-icon>\r\n            </ds-button>\r\n          }\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </section>\r\n\r\n  <!--  <header class=\"mb-4 mt-4 d-flex align-items-center justify-content-between align-items-end gap-2\">\r\n      <section>\r\n        <h6 class=\"fs-14 fs-md-12 fw-normal fc-dark-gray mb-0\">\r\n          {{ i18n.translate('Hello') }}\r\n          {{ coreService.getShortName(form?.header?.requesterName) }}, {{ i18n.translate('welcomeBack') }}!\r\n        </h6>\r\n        <h1 class=\"fs-26 fs-md-20 fw-bold fc-black d-flex align-items-center gap-2 mb-1\">\r\n          {{ formTitle }}\r\n          @if (serviceFaq.length) {\r\n            <ds-icon icon=\"info\" class=\"fs-22 fc-dark-gray cursor-pointer\" (click)=\"openFaq()\">\r\n            </ds-icon>\r\n          }\r\n        </h1>\r\n      </section>\r\n    </header>-->\r\n} @else {\r\n\r\n  <div class=\"w-100\">\r\n    <section class=\"request-main-info  {{statusClass(form?.header?.status?.['key'])}}\">\r\n      <section class=\"request-info\">\r\n        <div class=\"request-info--body\">\r\n          <div class=\"d-flex align-items-center gap-2 flex-grow-1\">\r\n            <img\r\n              alt=\"\"\r\n              src=\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMjkiIHZpZXdCb3g9IjAgMCAzMCAyOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTI1LjEgMEg0LjlDMi4yIDAgMCAyLjIgMCA0LjlWMjguNkgyNS4xQzI3LjggMjguNiAzMCAyNi40IDMwIDIzLjdWNC45QzMwIDIuMiAyNy44IDAgMjUuMSAwWk0yIDQuOUMyIDMuMyAzLjMgMiA0LjkgMkgyNS4xQzI2LjcgMiAyOCAzLjMgMjggNC45VjIzLjdDMjggMjUuMyAyNi43IDI2LjYgMjUuMSAyNi42SDJWNC45Wk0xMS41IDYuM0M3LjEgNi4zIDMuNSA5LjkgMy41IDE0LjNDMy41IDE4LjcgNy4xIDIyLjMgMTEuNSAyMi4zQzE1LjkgMjIuMyAxOS41IDE4LjcgMTkuNSAxNC4zQzE5LjUgOS45IDE1LjkgNi4zIDExLjUgNi4zWk0xNS4xIDE5QzE0LjEgMTkuOCAxMi44IDIwLjIgMTEuNSAyMC4yQzEwLjIgMjAuMiA4LjkgMTkuOCA3LjkgMTlDOC43IDE3LjcgMTAgMTcgMTEuNSAxN0MxMyAxNyAxNC40IDE3LjggMTUuMSAxOVpNMTMuMSAxMy40QzEzLjEgMTQuMyAxMi40IDE1IDExLjUgMTVDMTAuNiAxNSA5LjkgMTQuMyA5LjkgMTMuNEM5LjkgMTIuNSAxMC42IDExLjggMTEuNSAxMS44QzEyLjQgMTEuOCAxMy4xIDEyLjUgMTMuMSAxMy40Wk0xNS4xIDEzLjRDMTUuMSAxMS40IDEzLjUgOS44IDExLjUgOS44QzkuNSA5LjggNy45IDExLjQgNy45IDEzLjRDNy45IDE0LjIgOC4yIDE1IDguNyAxNS43QzcuOCAxNi4xIDcuMSAxNi44IDYuNSAxNy42QzUuOCAxNi42IDUuNSAxNS41IDUuNSAxNC4zQzUuNSAxMSA4LjIgOC4zIDExLjUgOC4zQzE0LjggOC4zIDE3LjUgMTEgMTcuNSAxNC4zQzE3LjUgMTUuNSAxNy4yIDE2LjYgMTYuNSAxNy42QzE1LjkgMTYuOCAxNS4yIDE2LjIgMTQuMyAxNS43QzE0LjggMTUuMSAxNS4xIDE0LjIgMTUuMSAxMy40Wk0yMSA5LjFDMjEgOC42IDIxLjQgOC4xIDIyIDguMUgyNS41QzI2IDguMSAyNi41IDguNSAyNi41IDkuMUMyNi41IDkuNiAyNi4xIDEwLjEgMjUuNSAxMC4xSDIyQzIxLjQgMTAuMSAyMSA5LjYgMjEgOS4xWk0yMSAxMi41QzIxIDEyIDIxLjQgMTEuNSAyMiAxMS41SDI1LjVDMjYgMTEuNSAyNi41IDExLjkgMjYuNSAxMi41QzI2LjUgMTMgMjYuMSAxMy41IDI1LjUgMTMuNUgyMkMyMS40IDEzLjUgMjEgMTMuMSAyMSAxMi41Wk0yMSAxNkMyMSAxNS41IDIxLjQgMTUgMjIgMTVIMjUuNUMyNiAxNSAyNi41IDE1LjQgMjYuNSAxNkMyNi41IDE2LjUgMjYuMSAxNyAyNS41IDE3SDIyQzIxLjQgMTcgMjEgMTYuNiAyMSAxNlpNMjUuNSAyMC41SDIyQzIxLjUgMjAuNSAyMSAyMC4xIDIxIDE5LjVDMjEgMTguOSAyMS40IDE4LjUgMjIgMTguNUgyNS41QzI2IDE4LjUgMjYuNSAxOC45IDI2LjUgMTkuNUMyNi41IDIwLjEgMjYuMSAyMC41IDI1LjUgMjAuNVoiIGZpbGw9IiNGRjM3NUUiLz4KPC9zdmc+Cg==\"/>\r\n            <h4 class=\"fs-22 fs-md-16 fc-black fw-medium mb-0 flex-grow-1 line-height-1-2\">\r\n              {{ formTitle }}\r\n            </h4>\r\n          </div>\r\n          <div class=\"d-flex align-items-center gap-2 request-info--status-action\">\r\n            <div class=\"d-inline-flex flex-column align-items-end\">\r\n              @if (!isLoading) {\r\n                <ds-status\r\n                  status=\"{{statusClass(form?.header?.status?.['key'])}}\" class=\"header-status\">{{ form?.header?.status?.['value'] }}\r\n                </ds-status>\r\n              }\r\n            </div>\r\n            <div class=\"d-flex align-items-center gap-2\">\r\n              <!-- <ds-button\r\n                 *ngIf=\"form?.inboxItem && (form?.inboxItem?.canRequestFeedback =='true'|| form?.inboxItem?.hasFeedback=='true')\"\r\n                 square icon size=\"small\">\r\n                 <ds-icon icon=\"chat-o\" class=\"fs-20 fs-md-17 fc-coral\">\r\n                   &lt;!&ndash;                  [ngClass]=\"{'fc-green':feedBackIcon == 'feedbackResponded' , 'fc-red': feedBackIcon == 'respondToFeedback' , 'fc-yellow': feedBackIcon == 'waitingFeedback'}\"&ndash;&gt;\r\n                 </ds-icon>\r\n               </ds-button>-->\r\n              <!-- history-->\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-content></ng-content>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"request-info--footer\">\r\n          @if (!isLoading) {\r\n            <ds-avatar\r\n              image=\"{{form?.header?.requesterPhoto}}\" size=\"xx-small\"\r\n              class=\"d-inline-flex cursor-pointer\" (click)=\"showUserInfo()\"></ds-avatar>\r\n          }\r\n          <div\r\n            class=\"d-flex align-items-center flex-wrap flex-grow-1 gap-1 gap-sm-2 line-height-1 request-info--header__details\">\r\n            <span\r\n              [ngClass]=\"{'loading-bg loading-width': isLoading}\"\r\n              class=\"fs-12 fw-medium d-none d-sm-inline-block\">{{ coreService.getShortName(form?.header?.['requesterName']) }}</span>\r\n            <span class=\"fs-20\">&#8226;</span>\r\n            <span class=\"fs-12\" [ngClass]=\"{'loading-bg loading-width': isLoading}\"> {{ form?.header?.formId }}</span>\r\n            <span class=\"fs-20\" *ngIf=\"creationDate\">&#8226;</span>\r\n            <span class=\"fs-12\" [ngClass]=\"{'loading-bg loading-width': isLoading}\"> {{ creationDate }}</span>\r\n          </div>\r\n        </div>\r\n      </section>\r\n    </section>\r\n\r\n  </div>\r\n\r\n\r\n  <!--<ng-container>\r\n    <div class=\"d-flex align-items-center justify-content-end gap-2 my-2\">\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      <ng-content></ng-content>\r\n    </div>\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          <h1 class=\"fs-20 fs-md-16 fw-bold fc-black header-title m-0\">{{ formTitle }}\r\n            @if (serviceFaq.length) {\r\n              <ds-icon icon=\"info\" class=\"fs-22 fc-dark-gray cursor-pointer\" (click)=\"openFaq()\">\r\n              </ds-icon>\r\n            }\r\n          </h1>\r\n          <div class=\"header-user d-flex align-items-sm-center gap-2 mt-sm-1\">\r\n            @if (!isLoading) {\r\n              <ds-avatar\r\n                image=\"{{form?.header?.requesterPhoto}}\" size=\"xx-small\"\r\n                class=\"d-inline-flex cursor-pointer\" (click)=\"showUserInfo()\"></ds-avatar>\r\n            }\r\n            <span\r\n              class=\"fs-12 text-truncate d-sm-block cursor-pointer\" (click)=\"showUserInfo()\"\r\n              [ngClass]=\"{'loading-bg loading-width': isLoading}\">{{ coreService.getShortName(form?.header?.requesterName) }}</span>\r\n            <mat-divider class=\"divider circle mx-2 d-none d-sm-block\"></mat-divider>\r\n            <span class=\"fs-12\" [ngClass]=\"{'loading-bg loading-width': isLoading}\">{{ form?.header?.formId }}</span>\r\n            @if (creationDate) {\r\n              <mat-divider class=\"divider circle mx-2 d-none d-sm-block\"></mat-divider>\r\n              <span class=\"fs-14\" [ngClass]=\"{'loading-bg loading-width': isLoading}\">{{ creationDate }}</span>\r\n            }\r\n          </div>\r\n\r\n        </div>\r\n        <div 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          @if (!isLoading) {\r\n            <ds-status\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            &lt;!&ndash; feedback&ndash;&gt;\r\n            &lt;!&ndash;            *ngIf=\"form?.inboxItem && (form?.inboxItem?.canRequestFeedback ==='true'|| form?.inboxItem?.hasFeedback==='true') && !isLoading\"&ndash;&gt;\r\n            &lt;!&ndash;  <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>&ndash;&gt;\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            @if (showApprovalHistory) {\r\n              <ng-container>\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                <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            }\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n    </header>\r\n  </ng-container>-->\r\n}\r\n", styles: [".loading-width{min-width:100px;width:40px;flex-grow:1}.request-main-info{--item-bg: var(--light-gray);--item-fc: var(--black);--status-container-bc: #e8ebec;--status-container-brc: var(--dark-gray)}.request-main-info.warning{--item-bg: var(--yellow);--status-container-bc: #fff8d9;--status-container-brc: var(--yellow)}.request-main-info.pending{--item-bg: #eff0f1;--status-container-bc: #e8ebec;--status-container-brc: #c8ced1}.request-main-info.expired{--item-bg: var(--dark-gray);--status-container-bc: #e8ebec;--status-container-brc: var(--dark-gray)}.request-main-info.success{--item-bg: var(--green);--status-container-bc: #e6f9f4;--status-container-brc: var(--green)}.request-main-info.info{--item-bg: var(--sea-light);--status-container-bc: #fff8d9;--status-container-brc: var(--sea-light)}.request-main-info.danger{--item-bg: var(--red);--status-container-bc: #fae9ec;--status-container-brc: var(--red)}.request-main-info.orange,.request-main-info.send_back{--item-bg: var(--orange);--status-container-bc: #fff0eb;--status-container-brc: var(--orange)}.request-info{border-radius:0;box-shadow:var(--box-shadow);background-color:var(--white);border-top:5px solid var(--item-bg)}.request-info--footer{padding:.3rem 2rem;min-height:45px;display:flex;align-items:center;gap:.75rem;border-top:1px solid var(--light-gray)}@media (max-width: 578px){.request-info--footer{padding:.3rem 1rem}}.request-info--footer__details{color:var(--item-fc)}.request-info--body{padding:2rem;display:flex;align-items:center;gap:.75rem;background-color:#fff}@media (max-width: 578px){.request-info--body{padding:1rem;flex-direction:column;align-items:stretch}}.request-info--body figure{min-width:30px;width:30px;text-align:center}.request-info--body figure svg{width:100%}@media (max-width: 578px){.request-info--status-action{justify-content:space-between}}.request-info--history{margin-top:-.5rem}.request-info--comment{background-color:#fff0eb;color:var(--orange);border-radius:0 0 4px 4px}.status-container{min-height:40px;padding:.5rem 1rem;display:flex;flex-direction:column;justify-content:center;gap:.5rem;margin-bottom:1.5rem}.status-container.danger{--item-bg: var(--red);--status-container-bc: #fae9ec;--status-container-brc: var(--red)}.status-container ::ng-deep ds-avatar .avatar{--default-size: 18px}.circle-status::part(base){--status-radius: 50%;--status-size: 19px;--status-fs: 100%}ds-button[square]::part(base){--btn-padding: 0;--default-size-sm: 30px}.send-back-container{background-color:#fff0eb;color:var(--orange);padding:.5rem;border-radius:4px}object,iframe,embed{height:79vh}::ng-deep .history-popup{--popup-width: 100vw;--popup-max-width: 100vw;--popup-radius: 15px 15px 0 0;position:absolute!important;bottom:0}:host ::ng-deep .mat-expansion-panel-content{background:#fff!important}:host .main-sidenav.main-sidenav-full .sidenav-title{border-bottom:transparent!important}:host .main-sidenav .sidenav-title{background-color:transparent!important}:host .main-sidenav{height:60px;min-height:10px!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"] }]
+                    ], template: "@if (form?.header?.status?.['key'] === 'NEW') {\r\n  <section\r\n    class=\"main-sidenav main-sidenav-full mb-4\"\r\n\r\n  >\r\n    <div class=\"sidenav-title\">\r\n      <div class=\"d-flex align-items-center gap-3 w-100\">\r\n        <!-- <ds-button icon class=\"rotate-arrow\" size=\"small\" (click)=\"goBack()\" *ngIf=\"!isInMobileApp() && showBack\">\r\n           <ds-icon icon=\"arrow-right\" class=\"fs-19 fc-black\"></ds-icon>\r\n         </ds-button>-->\r\n\r\n        <!--  <h3 class=\"flex-grow-0\">\r\n            {{ formTitle }}\r\n          </h3>-->\r\n\r\n        <section>\r\n          <p class=\"fs-14 fs-md-12 fw-normal fc-dark-gray mb-1\">\r\n            {{ i18n.translate('Hello') }}\r\n            {{ coreService.getShortName(form?.header?.requesterName) }}, {{ i18n.translate('welcomeBack') }}!\r\n          </p>\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            @if (serviceFaq.length) {\r\n              <ds-icon icon=\"info\" class=\"fs-22 fc-dark-gray cursor-pointer\" (click)=\"openFaq()\">\r\n              </ds-icon>\r\n            }\r\n          </h1>\r\n        </section>\r\n        <div class=\"d-flex align-items-center justify-content-end gap-2 flex-grow-1\">\r\n          @if (serviceFaq.length) {\r\n            <ds-button size=\"small\" icon>\r\n              <ds-icon icon=\"info\" class=\"fs-22 fc-dark-gray cursor-pointer\" (click)=\"openFaq()\">\r\n              </ds-icon>\r\n            </ds-button>\r\n          }\r\n          <!-- <ds-button size=\"small\" icon (click)=\"openWorkflow()\">\r\n            <ds-icon icon=\"bell-2-o\" class=\"fs-20 fc-coral\"></ds-icon>\r\n          </ds-button> -->\r\n          @if (!isReadOnly) {\r\n            <ds-button size=\"small\" icon (click)=\"showPreviousRequests()\">\r\n              <ds-icon icon=\"clock\" class=\"fs-20 fc-coral\"></ds-icon>\r\n            </ds-button>\r\n          }\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </section>\r\n\r\n  <!--  <header class=\"mb-4 mt-4 d-flex align-items-center justify-content-between align-items-end gap-2\">\r\n      <section>\r\n        <h6 class=\"fs-14 fs-md-12 fw-normal fc-dark-gray mb-0\">\r\n          {{ i18n.translate('Hello') }}\r\n          {{ coreService.getShortName(form?.header?.requesterName) }}, {{ i18n.translate('welcomeBack') }}!\r\n        </h6>\r\n        <h1 class=\"fs-26 fs-md-20 fw-bold fc-black d-flex align-items-center gap-2 mb-1\">\r\n          {{ formTitle }}\r\n          @if (serviceFaq.length) {\r\n            <ds-icon icon=\"info\" class=\"fs-22 fc-dark-gray cursor-pointer\" (click)=\"openFaq()\">\r\n            </ds-icon>\r\n          }\r\n        </h1>\r\n      </section>\r\n    </header>-->\r\n} @else {\r\n\r\n  <div class=\"w-100\">\r\n    <section class=\"request-main-info  {{statusClass(form?.header?.status?.['key'])}}\">\r\n      <section class=\"request-info\">\r\n        <div class=\"request-info--body\">\r\n          <div class=\"d-flex align-items-center gap-2 flex-grow-1\">\r\n            <img\r\n              alt=\"\"\r\n              src=\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMjkiIHZpZXdCb3g9IjAgMCAzMCAyOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTI1LjEgMEg0LjlDMi4yIDAgMCAyLjIgMCA0LjlWMjguNkgyNS4xQzI3LjggMjguNiAzMCAyNi40IDMwIDIzLjdWNC45QzMwIDIuMiAyNy44IDAgMjUuMSAwWk0yIDQuOUMyIDMuMyAzLjMgMiA0LjkgMkgyNS4xQzI2LjcgMiAyOCAzLjMgMjggNC45VjIzLjdDMjggMjUuMyAyNi43IDI2LjYgMjUuMSAyNi42SDJWNC45Wk0xMS41IDYuM0M3LjEgNi4zIDMuNSA5LjkgMy41IDE0LjNDMy41IDE4LjcgNy4xIDIyLjMgMTEuNSAyMi4zQzE1LjkgMjIuMyAxOS41IDE4LjcgMTkuNSAxNC4zQzE5LjUgOS45IDE1LjkgNi4zIDExLjUgNi4zWk0xNS4xIDE5QzE0LjEgMTkuOCAxMi44IDIwLjIgMTEuNSAyMC4yQzEwLjIgMjAuMiA4LjkgMTkuOCA3LjkgMTlDOC43IDE3LjcgMTAgMTcgMTEuNSAxN0MxMyAxNyAxNC40IDE3LjggMTUuMSAxOVpNMTMuMSAxMy40QzEzLjEgMTQuMyAxMi40IDE1IDExLjUgMTVDMTAuNiAxNSA5LjkgMTQuMyA5LjkgMTMuNEM5LjkgMTIuNSAxMC42IDExLjggMTEuNSAxMS44QzEyLjQgMTEuOCAxMy4xIDEyLjUgMTMuMSAxMy40Wk0xNS4xIDEzLjRDMTUuMSAxMS40IDEzLjUgOS44IDExLjUgOS44QzkuNSA5LjggNy45IDExLjQgNy45IDEzLjRDNy45IDE0LjIgOC4yIDE1IDguNyAxNS43QzcuOCAxNi4xIDcuMSAxNi44IDYuNSAxNy42QzUuOCAxNi42IDUuNSAxNS41IDUuNSAxNC4zQzUuNSAxMSA4LjIgOC4zIDExLjUgOC4zQzE0LjggOC4zIDE3LjUgMTEgMTcuNSAxNC4zQzE3LjUgMTUuNSAxNy4yIDE2LjYgMTYuNSAxNy42QzE1LjkgMTYuOCAxNS4yIDE2LjIgMTQuMyAxNS43QzE0LjggMTUuMSAxNS4xIDE0LjIgMTUuMSAxMy40Wk0yMSA5LjFDMjEgOC42IDIxLjQgOC4xIDIyIDguMUgyNS41QzI2IDguMSAyNi41IDguNSAyNi41IDkuMUMyNi41IDkuNiAyNi4xIDEwLjEgMjUuNSAxMC4xSDIyQzIxLjQgMTAuMSAyMSA5LjYgMjEgOS4xWk0yMSAxMi41QzIxIDEyIDIxLjQgMTEuNSAyMiAxMS41SDI1LjVDMjYgMTEuNSAyNi41IDExLjkgMjYuNSAxMi41QzI2LjUgMTMgMjYuMSAxMy41IDI1LjUgMTMuNUgyMkMyMS40IDEzLjUgMjEgMTMuMSAyMSAxMi41Wk0yMSAxNkMyMSAxNS41IDIxLjQgMTUgMjIgMTVIMjUuNUMyNiAxNSAyNi41IDE1LjQgMjYuNSAxNkMyNi41IDE2LjUgMjYuMSAxNyAyNS41IDE3SDIyQzIxLjQgMTcgMjEgMTYuNiAyMSAxNlpNMjUuNSAyMC41SDIyQzIxLjUgMjAuNSAyMSAyMC4xIDIxIDE5LjVDMjEgMTguOSAyMS40IDE4LjUgMjIgMTguNUgyNS41QzI2IDE4LjUgMjYuNSAxOC45IDI2LjUgMTkuNUMyNi41IDIwLjEgMjYuMSAyMC41IDI1LjUgMjAuNVoiIGZpbGw9IiNGRjM3NUUiLz4KPC9zdmc+Cg==\"/>\r\n            <h4 class=\"fs-22 fs-md-16 fc-black fw-medium mb-0 flex-grow-1 line-height-1-2\">\r\n              {{ formTitle }}\r\n            </h4>\r\n          </div>\r\n          <div class=\"d-flex align-items-center gap-2 request-info--status-action\">\r\n            <div class=\"d-inline-flex flex-column align-items-end\">\r\n              @if (!isLoading) {\r\n                <ds-status\r\n                  status=\"{{statusClass(form?.header?.status?.['key'])}}\" class=\"header-status\">{{ form?.header?.status?.['value'] }}\r\n                </ds-status>\r\n              }\r\n            </div>\r\n            <div class=\"d-flex align-items-center gap-2\">\r\n              <!-- <ds-button\r\n                 *ngIf=\"form?.inboxItem && (form?.inboxItem?.canRequestFeedback =='true'|| form?.inboxItem?.hasFeedback=='true')\"\r\n                 square icon size=\"small\">\r\n                 <ds-icon icon=\"chat-o\" class=\"fs-20 fs-md-17 fc-coral\">\r\n                   &lt;!&ndash;                  [ngClass]=\"{'fc-green':feedBackIcon == 'feedbackResponded' , 'fc-red': feedBackIcon == 'respondToFeedback' , 'fc-yellow': feedBackIcon == 'waitingFeedback'}\"&ndash;&gt;\r\n                 </ds-icon>\r\n               </ds-button>-->\r\n              <!-- history-->\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-content></ng-content>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"request-info--footer\">\r\n          @if (!isLoading) {\r\n            <ds-avatar\r\n              image=\"{{form?.header?.requesterPhoto}}\" size=\"xx-small\"\r\n              class=\"d-inline-flex cursor-pointer\" (click)=\"showUserInfo()\"></ds-avatar>\r\n          }\r\n          <div\r\n            class=\"d-flex align-items-center flex-wrap flex-grow-1 gap-1 gap-sm-2 line-height-1 request-info--header__details\">\r\n            <span\r\n              [ngClass]=\"{'loading-bg loading-width': isLoading}\"\r\n              class=\"fs-12 fw-medium d-none d-sm-inline-block\">{{ coreService.getShortName(form?.header?.['requesterName']) }}</span>\r\n            <span class=\"fs-20\">&#8226;</span>\r\n            <span class=\"fs-12\" [ngClass]=\"{'loading-bg loading-width': isLoading}\"> {{ form?.header?.formId }}</span>\r\n            <span class=\"fs-20\" *ngIf=\"creationDate\">&#8226;</span>\r\n            <span class=\"fs-12\" [ngClass]=\"{'loading-bg loading-width': isLoading}\"> {{ creationDate }}</span>\r\n          </div>\r\n        </div>\r\n      </section>\r\n    </section>\r\n\r\n  </div>\r\n\r\n\r\n  <!--<ng-container>\r\n    <div class=\"d-flex align-items-center justify-content-end gap-2 my-2\">\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      <ng-content></ng-content>\r\n    </div>\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          <h1 class=\"fs-20 fs-md-16 fw-bold fc-black header-title m-0\">{{ formTitle }}\r\n            @if (serviceFaq.length) {\r\n              <ds-icon icon=\"info\" class=\"fs-22 fc-dark-gray cursor-pointer\" (click)=\"openFaq()\">\r\n              </ds-icon>\r\n            }\r\n          </h1>\r\n          <div class=\"header-user d-flex align-items-sm-center gap-2 mt-sm-1\">\r\n            @if (!isLoading) {\r\n              <ds-avatar\r\n                image=\"{{form?.header?.requesterPhoto}}\" size=\"xx-small\"\r\n                class=\"d-inline-flex cursor-pointer\" (click)=\"showUserInfo()\"></ds-avatar>\r\n            }\r\n            <span\r\n              class=\"fs-12 text-truncate d-sm-block cursor-pointer\" (click)=\"showUserInfo()\"\r\n              [ngClass]=\"{'loading-bg loading-width': isLoading}\">{{ coreService.getShortName(form?.header?.requesterName) }}</span>\r\n            <mat-divider class=\"divider circle mx-2 d-none d-sm-block\"></mat-divider>\r\n            <span class=\"fs-12\" [ngClass]=\"{'loading-bg loading-width': isLoading}\">{{ form?.header?.formId }}</span>\r\n            @if (creationDate) {\r\n              <mat-divider class=\"divider circle mx-2 d-none d-sm-block\"></mat-divider>\r\n              <span class=\"fs-14\" [ngClass]=\"{'loading-bg loading-width': isLoading}\">{{ creationDate }}</span>\r\n            }\r\n          </div>\r\n\r\n        </div>\r\n        <div 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          @if (!isLoading) {\r\n            <ds-status\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            &lt;!&ndash; feedback&ndash;&gt;\r\n            &lt;!&ndash;            *ngIf=\"form?.inboxItem && (form?.inboxItem?.canRequestFeedback ==='true'|| form?.inboxItem?.hasFeedback==='true') && !isLoading\"&ndash;&gt;\r\n            &lt;!&ndash;  <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>&ndash;&gt;\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            @if (showApprovalHistory) {\r\n              <ng-container>\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                <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            }\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n    </header>\r\n  </ng-container>-->\r\n}\r\n", styles: [".loading-width{min-width:100px;width:40px;flex-grow:1}.request-main-info{--item-bg: var(--light-gray);--item-fc: var(--black);--status-container-bc: #e8ebec;--status-container-brc: var(--dark-gray)}.request-main-info.warning{--item-bg: var(--yellow);--status-container-bc: #fff8d9;--status-container-brc: var(--yellow)}.request-main-info.pending{--item-bg: #eff0f1;--status-container-bc: #e8ebec;--status-container-brc: #c8ced1}.request-main-info.expired{--item-bg: var(--dark-gray);--status-container-bc: #e8ebec;--status-container-brc: var(--dark-gray)}.request-main-info.success{--item-bg: var(--green);--status-container-bc: #e6f9f4;--status-container-brc: var(--green)}.request-main-info.info{--item-bg: var(--sea-light);--status-container-bc: #fff8d9;--status-container-brc: var(--sea-light)}.request-main-info.danger{--item-bg: var(--red);--status-container-bc: #fae9ec;--status-container-brc: var(--red)}.request-main-info.orange,.request-main-info.send_back{--item-bg: var(--orange);--status-container-bc: #fff0eb;--status-container-brc: var(--orange)}.request-info{border-radius:0;box-shadow:var(--box-shadow);background-color:var(--white);border-top:5px solid var(--item-bg)}.request-info--footer{padding:20px 24px;min-height:45px;display:flex;align-items:center;gap:.75rem;border-top:1px solid var(--light-gray)}@media (max-width: 578px){.request-info--footer{padding:.3rem 1rem}}.request-info--footer__details{color:var(--item-fc)}.request-info--body{padding:2rem;display:flex;align-items:center;gap:.75rem;background-color:#fff}@media (max-width: 578px){.request-info--body{padding:1rem;flex-direction:column;align-items:stretch}}.request-info--body figure{min-width:30px;width:30px;text-align:center}.request-info--body figure svg{width:100%}@media (max-width: 578px){.request-info--status-action{justify-content:space-between}}.request-info--history{margin-top:-.5rem}.request-info--comment{background-color:#fff0eb;color:var(--orange);border-radius:0 0 4px 4px}.status-container{min-height:40px;padding:.5rem 1rem;display:flex;flex-direction:column;justify-content:center;gap:.5rem;margin-bottom:1.5rem}.status-container.danger{--item-bg: var(--red);--status-container-bc: #fae9ec;--status-container-brc: var(--red)}.status-container ::ng-deep ds-avatar.user-avatar .avatar{min-width:var(--default-size, 45px);width:var(--default-size, 45px);height:var(--default-size, 45px);padding:var(--avatar-padding, 0);background-color:var(--avatar-bg, white);color:var(--avatar-color, black);border:var(--avatar-border, 0);border-radius:var(--avatar-radius, 50%);margin:var(--avatar-margin, 0);display:inline-flex;align-items:center;justify-content:center;overflow:hidden;--default-size: 25px}@media (min-width: 768px){.status-container ::ng-deep ds-avatar.user-avatar .avatar{--default-size: 31px;--avatar-border: 3px solid var(--light-gray)}}.circle-status::part(base){--status-radius: 50%;--status-size: 19px;--status-fs: 100%}ds-button[square]::part(base){--btn-padding: 0;--default-size-sm: 30px}.send-back-container{background-color:#fff0eb;color:var(--orange);padding:.5rem;border-radius:4px}object,iframe,embed{height:79vh}::ng-deep .history-popup{--popup-width: 100vw;--popup-max-width: 100vw;--popup-radius: 15px 15px 0 0;position:absolute!important;bottom:0}:host ::ng-deep .mat-expansion-panel-content{background:#fff!important}:host .main-sidenav.main-sidenav-full .sidenav-title{border-bottom:transparent!important}:host .main-sidenav .sidenav-title{background-color:transparent!important}:host .main-sidenav{height:60px;min-height:10px!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: i0.ChangeDetectorRef }, { type: CoreService }, { type: CoreI18nService }, { type: FeedBackService }, { type: i1$1.MatDialog }, { type: SidenavService }, { type: i2.ToastrService }], propDecorators: { form: [{
                 type: Input
             }], showHistory: [{
@@ -6518,7 +6676,7 @@ class FormSectionComponent {
         return statusStrategy.icon;
     }
     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: "17.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 class=\"mb-4\" [expanded]=\"isExpanded\" hideToggle #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          @if (section.header?.processedBy) {\r\n            <bdi class=\"fs-12 fc-dark-gray fw-normal line-height-1 d-block mt-1\">\r\n              {{ processingDate }}\r\n            </bdi>\r\n          }\r\n        </div>\r\n      </div>\r\n      <div class=\"approval-panel-details gap-1\">\r\n        @if (!section?.body?.details?.['stage0']?.['isStage0'] || section?.body?.details?.['stage0']?.['isStage0'] === 'false') {\r\n          <ng-container>\r\n            @if (section?.header?.personTo) {\r\n              <div\r\n                class=\"d-flex align-items-center gap-3\"\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                  @if (!section?.header?.delegatedTo) {\r\n                    <span\r\n                      class=\"fs-14 fw-medium d-inline-block panel-user-name text-truncate\"\r\n                      [ngClass]=\"{'panel-user-only': !section?.header?.delegatedTo}\"\r\n                    >{{ section?.header?.personTo }}</span>\r\n                  }\r\n                </div>\r\n                @if (section?.header?.delegatedTo) {\r\n                  <div\r\n                    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                  </div>\r\n                }\r\n              </div>\r\n            }\r\n          </ng-container>\r\n        }\r\n\r\n        @if (section?.body?.details?.['decision']?.key) {\r\n          <ds-status\r\n            class=\"main-status\"\r\n            status=\"{{statusClass(section?.body?.details?.['decision']?.key)}}\">{{ section?.body?.details?.['decision']?.value }}\r\n          </ds-status>\r\n        }\r\n      </div>\r\n\r\n      <div class=\"approval-panel-toggle\">\r\n        @if (approvalPanel.expanded) {\r\n          <ds-icon icon=\"minus\" class=\"fs-20 fc-dark-gray\"></ds-icon>\r\n        } @else {\r\n          <ds-icon icon=\"plus-1\" class=\"fs-20 fc-coral\"></ds-icon>\r\n        }\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", 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$5.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i2$5.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { 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$2.ComponentOutletInjectorDirective, selector: "[ngComponentOutlet]", exportAs: ["ndcComponentOutletInjector"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.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 class=\"mb-4\" [expanded]=\"isExpanded\" hideToggle #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          @if (section.header?.processedBy) {\r\n            <bdi class=\"fs-12 fc-dark-gray fw-normal line-height-1 d-block mt-1\">\r\n              {{ processingDate }}\r\n            </bdi>\r\n          }\r\n        </div>\r\n      </div>\r\n      <div class=\"approval-panel-details gap-1\">\r\n        @if (!section?.body?.details?.['stage0']?.['isStage0'] || section?.body?.details?.['stage0']?.['isStage0'] === 'false') {\r\n          <ng-container>\r\n            @if (section?.header?.personTo) {\r\n              <div\r\n                class=\"d-flex align-items-center gap-3\"\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                  @if (!section?.header?.delegatedTo) {\r\n                    <span\r\n                      class=\"fs-14 fw-medium d-inline-block panel-user-name text-truncate\"\r\n                      [ngClass]=\"{'panel-user-only': !section?.header?.delegatedTo}\"\r\n                    >{{ section?.header?.personTo }}</span>\r\n                  }\r\n                </div>\r\n                @if (section?.header?.delegatedTo) {\r\n                  <div\r\n                    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                  </div>\r\n                }\r\n              </div>\r\n            }\r\n          </ng-container>\r\n        }\r\n\r\n        @if (section?.body?.details?.['decision']?.key) {\r\n          <ds-status\r\n            class=\"main-status\"\r\n            status=\"{{statusClass(section?.body?.details?.['decision']?.key)}}\">{{ section?.body?.details?.['decision']?.value }}\r\n          </ds-status>\r\n        }\r\n      </div>\r\n\r\n      <div class=\"approval-panel-toggle\">\r\n        @if (approvalPanel.expanded) {\r\n          <ds-icon icon=\"minus\" class=\"fs-20 fc-dark-gray\"></ds-icon>\r\n        } @else {\r\n          <ds-icon icon=\"plus-1\" class=\"fs-20 fc-coral\"></ds-icon>\r\n        }\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", 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{min-width:var(--default-size, 45px);width:var(--default-size, 45px);height:var(--default-size, 45px);padding:var(--avatar-padding, 0);background-color:var(--avatar-bg, white);color:var(--avatar-color, black);border:var(--avatar-border, 0);border-radius:var(--avatar-radius, 50%);margin:var(--avatar-margin, 0);display:inline-flex;align-items:center;justify-content:center;overflow:hidden;--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$5.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i2$5.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { 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$2.ComponentOutletInjectorDirective, selector: "[ngComponentOutlet]", exportAs: ["ndcComponentOutletInjector"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: FormSectionComponent, decorators: [{
             type: Component,
@@ -6531,7 +6689,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                         SatPopoverModule,
                         NgClass,
                         DynamicModule
-                    ], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<mat-expansion-panel class=\"mb-4\" [expanded]=\"isExpanded\" hideToggle #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          @if (section.header?.processedBy) {\r\n            <bdi class=\"fs-12 fc-dark-gray fw-normal line-height-1 d-block mt-1\">\r\n              {{ processingDate }}\r\n            </bdi>\r\n          }\r\n        </div>\r\n      </div>\r\n      <div class=\"approval-panel-details gap-1\">\r\n        @if (!section?.body?.details?.['stage0']?.['isStage0'] || section?.body?.details?.['stage0']?.['isStage0'] === 'false') {\r\n          <ng-container>\r\n            @if (section?.header?.personTo) {\r\n              <div\r\n                class=\"d-flex align-items-center gap-3\"\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                  @if (!section?.header?.delegatedTo) {\r\n                    <span\r\n                      class=\"fs-14 fw-medium d-inline-block panel-user-name text-truncate\"\r\n                      [ngClass]=\"{'panel-user-only': !section?.header?.delegatedTo}\"\r\n                    >{{ section?.header?.personTo }}</span>\r\n                  }\r\n                </div>\r\n                @if (section?.header?.delegatedTo) {\r\n                  <div\r\n                    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                  </div>\r\n                }\r\n              </div>\r\n            }\r\n          </ng-container>\r\n        }\r\n\r\n        @if (section?.body?.details?.['decision']?.key) {\r\n          <ds-status\r\n            class=\"main-status\"\r\n            status=\"{{statusClass(section?.body?.details?.['decision']?.key)}}\">{{ section?.body?.details?.['decision']?.value }}\r\n          </ds-status>\r\n        }\r\n      </div>\r\n\r\n      <div class=\"approval-panel-toggle\">\r\n        @if (approvalPanel.expanded) {\r\n          <ds-icon icon=\"minus\" class=\"fs-20 fc-dark-gray\"></ds-icon>\r\n        } @else {\r\n          <ds-icon icon=\"plus-1\" class=\"fs-20 fc-coral\"></ds-icon>\r\n        }\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", 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 class=\"mb-4\" [expanded]=\"isExpanded\" hideToggle #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          @if (section.header?.processedBy) {\r\n            <bdi class=\"fs-12 fc-dark-gray fw-normal line-height-1 d-block mt-1\">\r\n              {{ processingDate }}\r\n            </bdi>\r\n          }\r\n        </div>\r\n      </div>\r\n      <div class=\"approval-panel-details gap-1\">\r\n        @if (!section?.body?.details?.['stage0']?.['isStage0'] || section?.body?.details?.['stage0']?.['isStage0'] === 'false') {\r\n          <ng-container>\r\n            @if (section?.header?.personTo) {\r\n              <div\r\n                class=\"d-flex align-items-center gap-3\"\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                  @if (!section?.header?.delegatedTo) {\r\n                    <span\r\n                      class=\"fs-14 fw-medium d-inline-block panel-user-name text-truncate\"\r\n                      [ngClass]=\"{'panel-user-only': !section?.header?.delegatedTo}\"\r\n                    >{{ section?.header?.personTo }}</span>\r\n                  }\r\n                </div>\r\n                @if (section?.header?.delegatedTo) {\r\n                  <div\r\n                    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                  </div>\r\n                }\r\n              </div>\r\n            }\r\n          </ng-container>\r\n        }\r\n\r\n        @if (section?.body?.details?.['decision']?.key) {\r\n          <ds-status\r\n            class=\"main-status\"\r\n            status=\"{{statusClass(section?.body?.details?.['decision']?.key)}}\">{{ section?.body?.details?.['decision']?.value }}\r\n          </ds-status>\r\n        }\r\n      </div>\r\n\r\n      <div class=\"approval-panel-toggle\">\r\n        @if (approvalPanel.expanded) {\r\n          <ds-icon icon=\"minus\" class=\"fs-20 fc-dark-gray\"></ds-icon>\r\n        } @else {\r\n          <ds-icon icon=\"plus-1\" class=\"fs-20 fc-coral\"></ds-icon>\r\n        }\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", 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{min-width:var(--default-size, 45px);width:var(--default-size, 45px);height:var(--default-size, 45px);padding:var(--avatar-padding, 0);background-color:var(--avatar-bg, white);color:var(--avatar-color, black);border:var(--avatar-border, 0);border-radius:var(--avatar-radius, 50%);margin:var(--avatar-margin, 0);display:inline-flex;align-items:center;justify-content:center;overflow:hidden;--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: [{
@@ -7314,7 +7472,7 @@ class RequestDetailsSectionComponent {
         this.formGroup = this.fb.group({
             input: new FormControl(null, [Validators.required]),
             currencyInput: new FormControl(null, Validators.required),
-            emailInput: new FormControl(null, Validators.required),
+            emailInput: new FormControl({ value: null, disabled: true }, Validators.required),
             numberInput: new FormControl(null, Validators.required),
             customSearchable: new FormControl(null, Validators.required),
             checkbox: new FormControl(null, [Validators.requiredTrue, Validators.required]),
@@ -7334,24 +7492,24 @@ class RequestDetailsSectionComponent {
             this.actionStateService.setActionValid(option.value, isActionValid);
             console.log(isActionValid);
         });
-        //   this.formGroup = this.fb.group({
-        //     input: new FormControl(null),
-        //     currencyInput: new FormControl(null),
-        //     emailInput: new FormControl(null),
-        //     numberInput: new FormControl(null),
-        //     customSearchable: new FormControl(null),
-        //     checkbox: new FormControl(null),
-        //     textArea: new FormControl(null),
-        //     datePicker: new FormControl(null),
-        //     datePickerRange: new FormControl(null),
-        //     radio: new FormControl(null),
-        //     toggle: new FormControl(null),
-        //     telephone: new FormControl(null),
-        //     searchEmployee: new FormControl(null),
-        //     // ...newForm,
-        //     attachment: new FormControl(null),
-        //     attachmentSection: new FormControl([]),
-        //   });
+        // this.formGroup = this.fb.group({
+        //   input: new FormControl(null),
+        //   currencyInput: new FormControl(null),
+        //   emailInput: new FormControl({value: null,disabled: true}),
+        //   numberInput: new FormControl(null),
+        //   customSearchable: new FormControl(null),
+        //   checkbox: new FormControl(null),
+        //   textArea: new FormControl(null),
+        //   datePicker: new FormControl(null),
+        //   datePickerRange: new FormControl(null),
+        //   radio: new FormControl(null),
+        //   toggle: new FormControl(null),
+        //   telephone: new FormControl(null),
+        //   searchEmployee: new FormControl(null),
+        //   // ...newForm,
+        //   attachment: new FormControl(null),
+        //   attachmentSection: new FormControl([]),
+        // });
         this.formGroup.setValue(this.section.body.details);
         //   console.log(this.section.body.detils);
         //   console.log(this.lov?.['approverActions']?.options)
@@ -7359,7 +7517,6 @@ class RequestDetailsSectionComponent {
             this.lov?.['decision']?.options?.forEach(option => {
                 let isActionValid = this.checkValidity(option.value);
                 this.actionStateService.setActionValid(option.value, isActionValid);
-                console.log(isActionValid);
             });
         });
     }
@@ -7438,14 +7595,14 @@ class RequestDetailsSectionComponent {
         console.log('customCallSubmit', action);
     }
     resetForm() {
-        this.formGroup.reset();
+        this.actionStateService.resetAction$.next();
     }
     pageChanged(event) {
         this.pageNumber = event.pageIndex;
         this.pageSize = event.pageSize;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: RequestDetailsSectionComponent, deps: [{ token: CoreI18nService }, { token: i4.FormBuilder }, { token: ActionStateService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: RequestDetailsSectionComponent, isStandalone: true, selector: "app-request-details-section", inputs: { isReadOnly: "isReadOnly", section: "section", form: "form", lov: "lov", className: "className" }, ngImport: i0, template: "<div>\r\n  <form [ngClass]=\"{'form-section-divide form-section':!section?.header?.readOnly,'info-section':section?.header?.readOnly}\" [formGroup]=\"formGroup\">\r\n\r\n    <app-search-employee\r\n      class=\"section-item full\"\r\n      [multiple]=\"true\"\r\n      [arrayList]=\"formGroup.get('searchEmployee').value\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"searchEmployee\"\r\n      label=\"Search-employee\"></app-search-employee>\r\n    <app-search-employee\r\n      class=\"section-item full\"\r\n      [multiple]=\"false\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"searchEmployee\"\r\n      label=\"Search-employee\"></app-search-employee>\r\n    <app-input class=\"section-item full\" [isReadOnly]=\"isReadOnly\" [loading]=\"true\" type=\"enOnly\" formControlName=\"input\" label=\"Input\"></app-input>\r\n    <app-input-currency class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"currencyInput\" label=\"currency\"></app-input-currency>\r\n    <app-input-email class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"emailInput\" label=\"email\"></app-input-email>\r\n    <app-input-number class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"numberInput\" label=\"number\"></app-input-number>\r\n    <app-custom-searchable\r\n      class=\"section-item mb-0 full\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"customSearchable\"\r\n      label=\"Custom-searchable\"\r\n      [options]=\"lov?.['approverActions']?.options\"\r\n      [displayedLabel]=\"'name'\"\r\n      [key]=\"'name'\"></app-custom-searchable>\r\n    <app-checkbox\r\n      class=\"section-item full\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"checkbox\"\r\n      termsLabel=\"Terms and conditions\"\r\n      label=\"check-box\"\r\n      [containTerms]=\"true\"></app-checkbox>\r\n    <app-textarea class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"textArea\" label=\"Text-area\"></app-textarea>\r\n    <app-datepicker\r\n      class=\"section-item full\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"datePicker\"\r\n      [matSuffix]=\"true\"\r\n      label=\"Date-picker\"></app-datepicker>\r\n    <app-date-range-picker\r\n      class=\"section-item full\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"datePickerRange\"\r\n      label=\"Date-picker-range\"\r\n      [matSuffix]=\"true\"></app-date-range-picker>\r\n    <app-radio class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"radio\" [options]=\"options\" label=\"Radio\"></app-radio>\r\n    <app-toggle-button\r\n      class=\"section-item full\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"toggle\"\r\n      [options]=\"lov?.['approverActions']?.options\"\r\n      label=\"Toggle-button\"\r\n      [displayedLabel]=\"'name'\"\r\n      [key]=\"'name'\"></app-toggle-button>\r\n    <app-input-telephone class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"telephone\" label=\"Telephone\"></app-input-telephone>\r\n    <app-file-uploader\r\n      class=\"section-item full\"\r\n      [callApi]=\"true\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      [multiple]=\"false\"\r\n      label=\"attachment\"\r\n      formControlName=\"attachment\"></app-file-uploader>\r\n    <app-attachment-section\r\n      class=\"section-item full\"\r\n      [descriptionRequired]=\"false\"\r\n      label=\"Attachment section\"\r\n      [commentsRequired]=\"false\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"attachmentSection\"></app-attachment-section>\r\n\r\n\r\n    <!-- <app-table\r\n    [columnsConfig]=\"columnsConfig\"\r\n    [columns]=\"columns\"\r\n    [isError]=\"isError\"\r\n    [isLoading]=\"isLoading\"\r\n    [rows]=\"categoryData\" [hasPaginator]=\"true\"\r\n    [pageSize]=\"pageSize\" [currentPage]=\"pageNumber\"\r\n    [totalElements]=\"totalElements\"\r\n    (pageChange)=\"pageChanged($event)\"\r\n    class=\"new-primary-table full\">\r\n    </app-table> -->\r\n\r\n\r\n  </form>\r\n\r\n\r\n</div>\r\n@if (!section?.header?.readOnly) {\r\n  <div class=\"mt-4\">\r\n    <lib-action-buttons\r\n      [lovOptions]=\"lov?.['decision']?.options\"\r\n      [lovType]=\"lov?.['decision']?.type\"\r\n      [section]=\"section\"\r\n      [form]=\"form\"\r\n      [sections]=\"form.sections\"\r\n      [showApprovalCycle]=\"true\"\r\n      [customCall]=\"false\"\r\n      [fieldsForm]=\"formGroup\"\r\n      (customCallEmit)=\"customCallSubmit($event)\"\r\n      (resetFormEmit)=\"resetForm()\"\r\n    />\r\n  </div>\r\n}\r\n", styles: [".form-section-divide{--form-section-columns: 1fr 1fr}@media (max-width: 756px){.form-section-divide{--form-section-columns: 100%}}.form-section-divide .full{grid-column:1/-1}.head-title{position:relative;margin-bottom:12px}.head-title h3{display:inline-block;color:#8e9aa0;font-size:14px;font-weight:500;background-color:#fff;padding-inline-end:20px;position:relative;z-index:2;margin:0}.head-title:after{content:\"\";position:absolute;width:100%;height:1px;background-color:#dee0e2;top:50%;left:0;right:0;transform:translateY(-50%);z-index:1}.chamber{margin-bottom:20px}.chamber .chamber-content{background-color:#f8f8f8;padding:20px}.chamber .chamber-content .chamber-select{display:flex}.chamber .chamber-content mat-checkbox{font-size:14px}.section-item{margin-bottom:20px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: InputComponent, selector: "app-input", inputs: ["floatLabel", "className", "iconPrefixName", "iconSuffixName", "emitedChangedValue1", "customErrorMessages"] }, { kind: "component", type: ActionButtonsComponent, selector: "lib-action-buttons", inputs: ["lovOptions", "lovType", "fieldsForm", "form", "section", "sections", "showApprovalCycle", "customCall"], outputs: ["resetFormEmit", "customCallEmit"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: CustomSearchableComponent, selector: "app-custom-searchable", inputs: ["options", "disabled", "displayedLabel", "key", "floatLabel", "className"], outputs: ["selectedValue", "isLengthGreaterThan4"] }, { kind: "component", type: CheckBoxComponent, selector: "app-checkbox", inputs: ["containTerms", "termsLabel", "linkText", "hrefLink", "link", "termsBody"], outputs: ["downloadCheckBox"] }, { kind: "component", type: TextareaComponent, selector: "app-textarea", inputs: ["className", "preventSpecailChar"] }, { kind: "component", type: InputCurrencyComponent, selector: "app-input-currency", inputs: ["floatLabel", "className", "iconPrefixName", "iconSuffixName", "numberSuffixName"] }, { kind: "component", type: DatePickerComponent, selector: "app-datepicker", inputs: ["className", "calendarType", "yearOnly", "error", "format"], outputs: ["dateValue"] }, { kind: "component", type: DateRangePickerComponent, selector: "app-date-range-picker", inputs: ["className", "yearOnly", "calendarType"] }, { kind: "component", type: InputEmailComponent, selector: "app-input-email", inputs: ["floatLabel", "className", "matPrefix", "iconPrefixName", "iconSuffixName", "numberSuffixName"] }, { kind: "component", type: InputNumberComponent, selector: "app-input-number", inputs: ["floatLabel", "className", "iconPrefixName", "iconSuffixName", "numberSuffixName", "allowedPattern"], outputs: ["emitedChangedValue"] }, { kind: "component", type: RadioComponent, selector: "app-radio", inputs: ["options"] }, { kind: "component", type: ToggleButtonComponent, selector: "app-toggle-button", inputs: ["className", "data", "error", "optionAr", "optionEn", "hasHint", "options", "displayedLabel", "key"], outputs: ["onChange"] }, { kind: "component", type: InputTelephoneComponent, selector: "app-input-telephone", inputs: ["floatLabel", "className"] }, { kind: "component", type: DocsUploaderComponent, selector: "app-file-uploader", inputs: ["useCrop", "formKey", "showLabel", "downloadLink", "showActions", "styleHeight", "fileInputHeight", "styleWidth", "hints", "allowedExtensions", "callApi", "display", "attachType", "error", "displayedFiles", "getDataFromTemplate", "allowFileContentsWithMultiAttachments", "accept", "signType", "customDownload", "showSignButton", "printType", "showPrintButton", "downloadType", "showDownloadButton", "preventFileContents", "maxSize"], outputs: ["selectedTemplateAttachment", "addSignatureClicked", "printActionClicked", "emitedValue", "downloadActionClicked"] }, { kind: "component", type: SearchEmployeeComponent, selector: "app-search-employee", inputs: ["valueName", "className", "optional", "data", "floatLabel", "error", "showEdit", "arrayList", "isUniqueUsers"], outputs: ["selectedEmp", "onInputChange", "editDirectManger", "deleteDirectManger", "emitedDeletedValue"] }, { kind: "component", type: AttachmentSectionComponent, selector: "app-attachment-section", inputs: ["className", "customDownload", "attachmentsMax", "isSortable", "downloadAll", "isRequired", "descriptionRequired", "commentsRequired", "allowedExtensions"], outputs: ["downloadActionClicked", "emitedValue"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: RequestDetailsSectionComponent, isStandalone: true, selector: "app-request-details-section", inputs: { isReadOnly: "isReadOnly", section: "section", form: "form", lov: "lov", className: "className" }, ngImport: i0, template: "<div>\r\n  <form [ngClass]=\"{'form-section-divide form-section':!section?.header?.readOnly,'info-section':section?.header?.readOnly}\" [formGroup]=\"formGroup\">\r\n\r\n    <app-search-employee\r\n      class=\"section-item full\"\r\n      [multiple]=\"true\"\r\n      [arrayList]=\"formGroup.get('searchEmployee').value\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"searchEmployee\"\r\n      label=\"Search-employee\"></app-search-employee>\r\n    <app-input class=\"section-item full\" [isReadOnly]=\"isReadOnly\" [loading]=\"true\" type=\"enOnly\" formControlName=\"input\" label=\"Input\"></app-input>\r\n    <app-input-currency class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"currencyInput\" label=\"currency\"></app-input-currency>\r\n    <app-input-email class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"emailInput\" label=\"email\"></app-input-email>\r\n    <app-input-number class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"numberInput\" label=\"number\"></app-input-number>\r\n    <app-custom-searchable\r\n      class=\"section-item mb-0 full\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"customSearchable\"\r\n      label=\"Custom-searchable\"\r\n      [options]=\"lov?.['approverActions']?.options\"\r\n      [displayedLabel]=\"'name'\"\r\n      [key]=\"'name'\"></app-custom-searchable>\r\n    <app-checkbox\r\n      class=\"section-item full\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"checkbox\"\r\n      termsLabel=\"Terms and conditions\"\r\n      label=\"check-box\"\r\n      [containTerms]=\"true\"></app-checkbox>\r\n    <app-textarea class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"textArea\" label=\"Text-area\"></app-textarea>\r\n    <app-datepicker\r\n      class=\"section-item full\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"datePicker\"\r\n      [matSuffix]=\"true\"\r\n      label=\"Date-picker\"></app-datepicker>\r\n    <app-date-range-picker\r\n      class=\"section-item full\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"datePickerRange\"\r\n      label=\"Date-picker-range\"\r\n      [matSuffix]=\"true\"></app-date-range-picker>\r\n    <app-radio class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"radio\" [options]=\"options\" label=\"Radio\"></app-radio>\r\n    <app-toggle-button\r\n      class=\"section-item full\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"toggle\"\r\n      [options]=\"lov?.['approverActions']?.options\"\r\n      label=\"Toggle-button\"\r\n      [displayedLabel]=\"'name'\"\r\n      [key]=\"'name'\"></app-toggle-button>\r\n    <app-input-telephone class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"telephone\" label=\"Telephone\"></app-input-telephone>\r\n    <app-file-uploader\r\n      class=\"section-item full\"\r\n      [callApi]=\"true\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      [multiple]=\"false\"\r\n      label=\"attachment\"\r\n      formControlName=\"attachment\"></app-file-uploader>\r\n    <app-attachment-section\r\n      class=\"section-item full\"\r\n      [descriptionRequired]=\"false\"\r\n      label=\"Attachment section\"\r\n      [commentsRequired]=\"false\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"attachmentSection\"></app-attachment-section>\r\n\r\n\r\n    <!-- <app-table\r\n    [columnsConfig]=\"columnsConfig\"\r\n    [columns]=\"columns\"\r\n    [isError]=\"isError\"\r\n    [isLoading]=\"isLoading\"\r\n    [rows]=\"categoryData\" [hasPaginator]=\"true\"\r\n    [pageSize]=\"pageSize\" [currentPage]=\"pageNumber\"\r\n    [totalElements]=\"totalElements\"\r\n    (pageChange)=\"pageChanged($event)\"\r\n    class=\"new-primary-table full\">\r\n    </app-table> -->\r\n\r\n\r\n  </form>\r\n\r\n\r\n</div>\r\n@if (!section?.header?.readOnly) {\r\n  <div class=\"mt-4\">\r\n    <lib-action-buttons\r\n      [lovOptions]=\"lov?.['decision']?.options\"\r\n      [lovType]=\"lov?.['decision']?.type\"\r\n      [section]=\"section\"\r\n      [form]=\"form\"\r\n      [sections]=\"form.sections\"\r\n      [showApprovalCycle]=\"true\"\r\n      [customCall]=\"false\"\r\n      [fieldsForm]=\"formGroup\"\r\n      (customCallEmit)=\"customCallSubmit($event)\"\r\n      (resetFormEmit)=\"resetForm()\"\r\n    />\r\n  </div>\r\n}\r\n", styles: [".form-section-divide{--form-section-columns: 1fr 1fr}@media (max-width: 756px){.form-section-divide{--form-section-columns: 100%}}.form-section-divide .full{grid-column:1/-1}.head-title{position:relative;margin-bottom:12px}.head-title h3{display:inline-block;color:#8e9aa0;font-size:14px;font-weight:500;background-color:#fff;padding-inline-end:20px;position:relative;z-index:2;margin:0}.head-title:after{content:\"\";position:absolute;width:100%;height:1px;background-color:#dee0e2;top:50%;left:0;right:0;transform:translateY(-50%);z-index:1}.chamber{margin-bottom:20px}.chamber .chamber-content{background-color:#f8f8f8;padding:20px}.chamber .chamber-content .chamber-select{display:flex}.chamber .chamber-content mat-checkbox{font-size:14px}.section-item{margin-bottom:20px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: InputComponent, selector: "app-input", inputs: ["floatLabel", "className", "iconPrefixName", "iconSuffixName", "emitedChangedValue1", "customErrorMessages"] }, { kind: "component", type: ActionButtonsComponent, selector: "lib-action-buttons", inputs: ["lovOptions", "lovType", "fieldsForm", "form", "section", "sections", "showApprovalCycle", "customCall"], outputs: ["resetFormEmit", "customCallEmit"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: CustomSearchableComponent, selector: "app-custom-searchable", inputs: ["options", "disabled", "displayedLabel", "key", "floatLabel", "className"], outputs: ["selectedValue", "isLengthGreaterThan4"] }, { kind: "component", type: CheckBoxComponent, selector: "app-checkbox", inputs: ["containTerms", "termsLabel", "linkText", "hrefLink", "link", "termsBody"], outputs: ["downloadCheckBox"] }, { kind: "component", type: TextareaComponent, selector: "app-textarea", inputs: ["className", "preventSpecailChar"] }, { kind: "component", type: InputCurrencyComponent, selector: "app-input-currency", inputs: ["floatLabel", "className", "iconPrefixName", "iconSuffixName", "numberSuffixName"] }, { kind: "component", type: DatePickerComponent, selector: "app-datepicker", inputs: ["className", "calendarType", "yearOnly", "error", "format"], outputs: ["dateValue"] }, { kind: "component", type: DateRangePickerComponent, selector: "app-date-range-picker", inputs: ["className", "yearOnly", "calendarType"] }, { kind: "component", type: InputEmailComponent, selector: "app-input-email", inputs: ["floatLabel", "className", "matPrefix", "iconPrefixName", "iconSuffixName", "numberSuffixName"] }, { kind: "component", type: InputNumberComponent, selector: "app-input-number", inputs: ["floatLabel", "className", "iconPrefixName", "iconSuffixName", "numberSuffixName", "allowedPattern"], outputs: ["emitedChangedValue"] }, { kind: "component", type: RadioComponent, selector: "app-radio", inputs: ["options"] }, { kind: "component", type: ToggleButtonComponent, selector: "app-toggle-button", inputs: ["className", "data", "error", "optionAr", "optionEn", "hasHint", "options", "displayedLabel", "key"], outputs: ["onChange"] }, { kind: "component", type: InputTelephoneComponent, selector: "app-input-telephone", inputs: ["floatLabel", "className"] }, { kind: "component", type: DocsUploaderComponent, selector: "app-file-uploader", inputs: ["useCrop", "formKey", "showLabel", "downloadLink", "showActions", "styleHeight", "fileInputHeight", "styleWidth", "hints", "allowedExtensions", "callApi", "display", "attachType", "error", "displayedFiles", "getDataFromTemplate", "allowFileContentsWithMultiAttachments", "accept", "signType", "customDownload", "showSignButton", "printType", "showPrintButton", "downloadType", "showDownloadButton", "preventFileContents", "maxSize"], outputs: ["selectedTemplateAttachment", "addSignatureClicked", "printActionClicked", "emitedValue", "downloadActionClicked"] }, { kind: "component", type: SearchEmployeeComponent, selector: "app-search-employee", inputs: ["valueName", "className", "optional", "data", "floatLabel", "error", "showEdit", "arrayList", "isUniqueUsers"], outputs: ["selectedEmp", "onInputChange", "editDirectManger", "deleteDirectManger", "emitedDeletedValue"] }, { kind: "component", type: AttachmentSectionComponent, selector: "app-attachment-section", inputs: ["className", "customDownload", "attachmentsMax", "isSortable", "downloadAll", "isRequired", "descriptionRequired", "commentsRequired", "allowedExtensions"], outputs: ["downloadActionClicked", "emitedValue"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: RequestDetailsSectionComponent, decorators: [{
             type: Component,
@@ -7470,7 +7627,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                         AttachmentSectionComponent,
                         TableComponent,
                         TranslatePipe
-                    ], template: "<div>\r\n  <form [ngClass]=\"{'form-section-divide form-section':!section?.header?.readOnly,'info-section':section?.header?.readOnly}\" [formGroup]=\"formGroup\">\r\n\r\n    <app-search-employee\r\n      class=\"section-item full\"\r\n      [multiple]=\"true\"\r\n      [arrayList]=\"formGroup.get('searchEmployee').value\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"searchEmployee\"\r\n      label=\"Search-employee\"></app-search-employee>\r\n    <app-search-employee\r\n      class=\"section-item full\"\r\n      [multiple]=\"false\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"searchEmployee\"\r\n      label=\"Search-employee\"></app-search-employee>\r\n    <app-input class=\"section-item full\" [isReadOnly]=\"isReadOnly\" [loading]=\"true\" type=\"enOnly\" formControlName=\"input\" label=\"Input\"></app-input>\r\n    <app-input-currency class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"currencyInput\" label=\"currency\"></app-input-currency>\r\n    <app-input-email class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"emailInput\" label=\"email\"></app-input-email>\r\n    <app-input-number class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"numberInput\" label=\"number\"></app-input-number>\r\n    <app-custom-searchable\r\n      class=\"section-item mb-0 full\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"customSearchable\"\r\n      label=\"Custom-searchable\"\r\n      [options]=\"lov?.['approverActions']?.options\"\r\n      [displayedLabel]=\"'name'\"\r\n      [key]=\"'name'\"></app-custom-searchable>\r\n    <app-checkbox\r\n      class=\"section-item full\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"checkbox\"\r\n      termsLabel=\"Terms and conditions\"\r\n      label=\"check-box\"\r\n      [containTerms]=\"true\"></app-checkbox>\r\n    <app-textarea class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"textArea\" label=\"Text-area\"></app-textarea>\r\n    <app-datepicker\r\n      class=\"section-item full\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"datePicker\"\r\n      [matSuffix]=\"true\"\r\n      label=\"Date-picker\"></app-datepicker>\r\n    <app-date-range-picker\r\n      class=\"section-item full\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"datePickerRange\"\r\n      label=\"Date-picker-range\"\r\n      [matSuffix]=\"true\"></app-date-range-picker>\r\n    <app-radio class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"radio\" [options]=\"options\" label=\"Radio\"></app-radio>\r\n    <app-toggle-button\r\n      class=\"section-item full\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"toggle\"\r\n      [options]=\"lov?.['approverActions']?.options\"\r\n      label=\"Toggle-button\"\r\n      [displayedLabel]=\"'name'\"\r\n      [key]=\"'name'\"></app-toggle-button>\r\n    <app-input-telephone class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"telephone\" label=\"Telephone\"></app-input-telephone>\r\n    <app-file-uploader\r\n      class=\"section-item full\"\r\n      [callApi]=\"true\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      [multiple]=\"false\"\r\n      label=\"attachment\"\r\n      formControlName=\"attachment\"></app-file-uploader>\r\n    <app-attachment-section\r\n      class=\"section-item full\"\r\n      [descriptionRequired]=\"false\"\r\n      label=\"Attachment section\"\r\n      [commentsRequired]=\"false\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"attachmentSection\"></app-attachment-section>\r\n\r\n\r\n    <!-- <app-table\r\n    [columnsConfig]=\"columnsConfig\"\r\n    [columns]=\"columns\"\r\n    [isError]=\"isError\"\r\n    [isLoading]=\"isLoading\"\r\n    [rows]=\"categoryData\" [hasPaginator]=\"true\"\r\n    [pageSize]=\"pageSize\" [currentPage]=\"pageNumber\"\r\n    [totalElements]=\"totalElements\"\r\n    (pageChange)=\"pageChanged($event)\"\r\n    class=\"new-primary-table full\">\r\n    </app-table> -->\r\n\r\n\r\n  </form>\r\n\r\n\r\n</div>\r\n@if (!section?.header?.readOnly) {\r\n  <div class=\"mt-4\">\r\n    <lib-action-buttons\r\n      [lovOptions]=\"lov?.['decision']?.options\"\r\n      [lovType]=\"lov?.['decision']?.type\"\r\n      [section]=\"section\"\r\n      [form]=\"form\"\r\n      [sections]=\"form.sections\"\r\n      [showApprovalCycle]=\"true\"\r\n      [customCall]=\"false\"\r\n      [fieldsForm]=\"formGroup\"\r\n      (customCallEmit)=\"customCallSubmit($event)\"\r\n      (resetFormEmit)=\"resetForm()\"\r\n    />\r\n  </div>\r\n}\r\n", styles: [".form-section-divide{--form-section-columns: 1fr 1fr}@media (max-width: 756px){.form-section-divide{--form-section-columns: 100%}}.form-section-divide .full{grid-column:1/-1}.head-title{position:relative;margin-bottom:12px}.head-title h3{display:inline-block;color:#8e9aa0;font-size:14px;font-weight:500;background-color:#fff;padding-inline-end:20px;position:relative;z-index:2;margin:0}.head-title:after{content:\"\";position:absolute;width:100%;height:1px;background-color:#dee0e2;top:50%;left:0;right:0;transform:translateY(-50%);z-index:1}.chamber{margin-bottom:20px}.chamber .chamber-content{background-color:#f8f8f8;padding:20px}.chamber .chamber-content .chamber-select{display:flex}.chamber .chamber-content mat-checkbox{font-size:14px}.section-item{margin-bottom:20px}\n"] }]
+                    ], template: "<div>\r\n  <form [ngClass]=\"{'form-section-divide form-section':!section?.header?.readOnly,'info-section':section?.header?.readOnly}\" [formGroup]=\"formGroup\">\r\n\r\n    <app-search-employee\r\n      class=\"section-item full\"\r\n      [multiple]=\"true\"\r\n      [arrayList]=\"formGroup.get('searchEmployee').value\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"searchEmployee\"\r\n      label=\"Search-employee\"></app-search-employee>\r\n    <app-input class=\"section-item full\" [isReadOnly]=\"isReadOnly\" [loading]=\"true\" type=\"enOnly\" formControlName=\"input\" label=\"Input\"></app-input>\r\n    <app-input-currency class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"currencyInput\" label=\"currency\"></app-input-currency>\r\n    <app-input-email class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"emailInput\" label=\"email\"></app-input-email>\r\n    <app-input-number class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"numberInput\" label=\"number\"></app-input-number>\r\n    <app-custom-searchable\r\n      class=\"section-item mb-0 full\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"customSearchable\"\r\n      label=\"Custom-searchable\"\r\n      [options]=\"lov?.['approverActions']?.options\"\r\n      [displayedLabel]=\"'name'\"\r\n      [key]=\"'name'\"></app-custom-searchable>\r\n    <app-checkbox\r\n      class=\"section-item full\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"checkbox\"\r\n      termsLabel=\"Terms and conditions\"\r\n      label=\"check-box\"\r\n      [containTerms]=\"true\"></app-checkbox>\r\n    <app-textarea class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"textArea\" label=\"Text-area\"></app-textarea>\r\n    <app-datepicker\r\n      class=\"section-item full\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"datePicker\"\r\n      [matSuffix]=\"true\"\r\n      label=\"Date-picker\"></app-datepicker>\r\n    <app-date-range-picker\r\n      class=\"section-item full\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"datePickerRange\"\r\n      label=\"Date-picker-range\"\r\n      [matSuffix]=\"true\"></app-date-range-picker>\r\n    <app-radio class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"radio\" [options]=\"options\" label=\"Radio\"></app-radio>\r\n    <app-toggle-button\r\n      class=\"section-item full\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"toggle\"\r\n      [options]=\"lov?.['approverActions']?.options\"\r\n      label=\"Toggle-button\"\r\n      [displayedLabel]=\"'name'\"\r\n      [key]=\"'name'\"></app-toggle-button>\r\n    <app-input-telephone class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"telephone\" label=\"Telephone\"></app-input-telephone>\r\n    <app-file-uploader\r\n      class=\"section-item full\"\r\n      [callApi]=\"true\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      [multiple]=\"false\"\r\n      label=\"attachment\"\r\n      formControlName=\"attachment\"></app-file-uploader>\r\n    <app-attachment-section\r\n      class=\"section-item full\"\r\n      [descriptionRequired]=\"false\"\r\n      label=\"Attachment section\"\r\n      [commentsRequired]=\"false\"\r\n      [isReadOnly]=\"isReadOnly\"\r\n      formControlName=\"attachmentSection\"></app-attachment-section>\r\n\r\n\r\n    <!-- <app-table\r\n    [columnsConfig]=\"columnsConfig\"\r\n    [columns]=\"columns\"\r\n    [isError]=\"isError\"\r\n    [isLoading]=\"isLoading\"\r\n    [rows]=\"categoryData\" [hasPaginator]=\"true\"\r\n    [pageSize]=\"pageSize\" [currentPage]=\"pageNumber\"\r\n    [totalElements]=\"totalElements\"\r\n    (pageChange)=\"pageChanged($event)\"\r\n    class=\"new-primary-table full\">\r\n    </app-table> -->\r\n\r\n\r\n  </form>\r\n\r\n\r\n</div>\r\n@if (!section?.header?.readOnly) {\r\n  <div class=\"mt-4\">\r\n    <lib-action-buttons\r\n      [lovOptions]=\"lov?.['decision']?.options\"\r\n      [lovType]=\"lov?.['decision']?.type\"\r\n      [section]=\"section\"\r\n      [form]=\"form\"\r\n      [sections]=\"form.sections\"\r\n      [showApprovalCycle]=\"true\"\r\n      [customCall]=\"false\"\r\n      [fieldsForm]=\"formGroup\"\r\n      (customCallEmit)=\"customCallSubmit($event)\"\r\n      (resetFormEmit)=\"resetForm()\"\r\n    />\r\n  </div>\r\n}\r\n", styles: [".form-section-divide{--form-section-columns: 1fr 1fr}@media (max-width: 756px){.form-section-divide{--form-section-columns: 100%}}.form-section-divide .full{grid-column:1/-1}.head-title{position:relative;margin-bottom:12px}.head-title h3{display:inline-block;color:#8e9aa0;font-size:14px;font-weight:500;background-color:#fff;padding-inline-end:20px;position:relative;z-index:2;margin:0}.head-title:after{content:\"\";position:absolute;width:100%;height:1px;background-color:#dee0e2;top:50%;left:0;right:0;transform:translateY(-50%);z-index:1}.chamber{margin-bottom:20px}.chamber .chamber-content{background-color:#f8f8f8;padding:20px}.chamber .chamber-content .chamber-select{display:flex}.chamber .chamber-content mat-checkbox{font-size:14px}.section-item{margin-bottom:20px}\n"] }]
         }], ctorParameters: () => [{ type: CoreI18nService }, { type: i4.FormBuilder }, { type: ActionStateService }], propDecorators: { isReadOnly: [{
                 type: Input
             }], section: [{
@@ -7699,9 +7856,9 @@ 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$3.Router }, { token: SidenavService }, { token: CoreI18nService }, { token: CoreService }, { token: PLATFORM_ID }], 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\r\n    @if (noError) {\r\n      <core-service-header\r\n        [isLoading]=\"false\"\r\n        [formTitle]=\"formTitle\"\r\n        [isReadOnly]=\"form.sections[0].header.readOnly\"\r\n        [form]=\"form\">\r\n      </core-service-header>\r\n      <app-workflow-section\r\n        workflow\r\n        [segmentDynamicLoaderService]=\"segmentDynamicLoader\"\r\n        [form]=\"form\" [sections]=\"form?.['sections']\">\r\n        <app-request-details-section\r\n          [section]=\"form.sections[0]\" [form]=\"form\" [lov]=\"form?.lovs\" className=\"form-section\"\r\n          [isReadOnly]=\"form.sections[0].header.readOnly\"></app-request-details-section>\r\n      </app-workflow-section>\r\n    } @else {\r\n      @if (errorMessage?.length) {\r\n        <ds-message></ds-message>\r\n        @for (item of errorMessage; track $index) {\r\n          <div class=\"d-flex justify-content-center\">\r\n            <span class=\"fc-coral fs-18\" >{{ item?.['message'] }}</span>\r\n          </div>\r\n        }\r\n      } @else {\r\n        <ds-message label=\"{{i18n.translate('pageErrorLoading')}}\"></ds-message>\r\n      }\r\n    }\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\r\n    @if (noError) {\r\n      <core-service-header\r\n        [isLoading]=\"false\"\r\n        [formTitle]=\"formTitle\"\r\n        [isReadOnly]=\"form.sections[0].header.readOnly\"\r\n        [form]=\"form\">\r\n      </core-service-header>\r\n      <app-workflow-section\r\n        workflow\r\n        [segmentDynamicLoaderService]=\"segmentDynamicLoader\"\r\n        [form]=\"form\" [sections]=\"form?.['sections']\">\r\n        <app-request-details-section\r\n          [section]=\"form.sections[0]\" [form]=\"form\" [lov]=\"form?.lovs\" className=\"form-section\"\r\n          [isReadOnly]=\"form.sections[0].header.readOnly\"></app-request-details-section>\r\n      </app-workflow-section>\r\n    } @else {\r\n      @if (errorMessage?.length) {\r\n        <ds-message></ds-message>\r\n        @for (item of errorMessage; track $index) {\r\n          <div class=\"d-flex justify-content-center\">\r\n            <span class=\"fc-coral fs-18\" >{{ item?.['message'] }}</span>\r\n          </div>\r\n        }\r\n      } @else {\r\n        <ds-message [label]=\"'pageErrorLoading' | translate\"></ds-message>\r\n      }\r\n    }\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", "hubContainerMini", "formTitle", "isLoading", "serviceBrief"] }, { kind: "component", type: ServiceHeaderComponent, selector: "core-service-header", inputs: ["form", "showHistory", "isLoading", "isReadOnly", "showApprovalHistory", "approvalHistory", "creationDate", "formTitle", "section", "serviceFaq"] }, { kind: "component", type: WorkflowSectionComponent, selector: "app-workflow-section", inputs: ["sections", "isReadOnly", "isLoading", "form", "contentClass", "sectionsController", "segmentDynamicLoaderService", "sectionFormComponent", "sectionName"], outputs: ["sectionSubmitted"] }, { kind: "component", type: RequestDetailsSectionComponent, selector: "app-request-details-section", inputs: ["isReadOnly", "section", "form", "lov", "className"] }] });
+                LayoutComponent, selector: "core-layout", inputs: ["form", "hubContainerMini", "formTitle", "isLoading", "serviceBrief"] }, { kind: "component", type: ServiceHeaderComponent, selector: "core-service-header", inputs: ["form", "showHistory", "isLoading", "isReadOnly", "showApprovalHistory", "approvalHistory", "creationDate", "formTitle", "section", "serviceFaq"] }, { kind: "component", type: WorkflowSectionComponent, selector: "app-workflow-section", inputs: ["sections", "isReadOnly", "isLoading", "form", "contentClass", "sectionsController", "segmentDynamicLoaderService", "sectionFormComponent", "sectionName"], outputs: ["sectionSubmitted"] }, { kind: "component", type: RequestDetailsSectionComponent, selector: "app-request-details-section", inputs: ["isReadOnly", "section", "form", "lov", "className"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: CoreAppComponent, decorators: [{
             type: Component,
@@ -7710,10 +7867,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                         LayoutComponent,
                         ServiceHeaderComponent,
                         WorkflowSectionComponent,
-                        RequestDetailsSectionComponent
+                        RequestDetailsSectionComponent,
+                        TranslatePipe
                     ], schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA], providers: [
                         { provide: DynamicComponentInjectorToken, useValue: { /* your value here */} }
-                    ], template: "<core-layout>\r\n  @if (!loading['form']) {\r\n\r\n    @if (noError) {\r\n      <core-service-header\r\n        [isLoading]=\"false\"\r\n        [formTitle]=\"formTitle\"\r\n        [isReadOnly]=\"form.sections[0].header.readOnly\"\r\n        [form]=\"form\">\r\n      </core-service-header>\r\n      <app-workflow-section\r\n        workflow\r\n        [segmentDynamicLoaderService]=\"segmentDynamicLoader\"\r\n        [form]=\"form\" [sections]=\"form?.['sections']\">\r\n        <app-request-details-section\r\n          [section]=\"form.sections[0]\" [form]=\"form\" [lov]=\"form?.lovs\" className=\"form-section\"\r\n          [isReadOnly]=\"form.sections[0].header.readOnly\"></app-request-details-section>\r\n      </app-workflow-section>\r\n    } @else {\r\n      @if (errorMessage?.length) {\r\n        <ds-message></ds-message>\r\n        @for (item of errorMessage; track $index) {\r\n          <div class=\"d-flex justify-content-center\">\r\n            <span class=\"fc-coral fs-18\" >{{ item?.['message'] }}</span>\r\n          </div>\r\n        }\r\n      } @else {\r\n        <ds-message label=\"{{i18n.translate('pageErrorLoading')}}\"></ds-message>\r\n      }\r\n    }\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\r\n    @if (noError) {\r\n      <core-service-header\r\n        [isLoading]=\"false\"\r\n        [formTitle]=\"formTitle\"\r\n        [isReadOnly]=\"form.sections[0].header.readOnly\"\r\n        [form]=\"form\">\r\n      </core-service-header>\r\n      <app-workflow-section\r\n        workflow\r\n        [segmentDynamicLoaderService]=\"segmentDynamicLoader\"\r\n        [form]=\"form\" [sections]=\"form?.['sections']\">\r\n        <app-request-details-section\r\n          [section]=\"form.sections[0]\" [form]=\"form\" [lov]=\"form?.lovs\" className=\"form-section\"\r\n          [isReadOnly]=\"form.sections[0].header.readOnly\"></app-request-details-section>\r\n      </app-workflow-section>\r\n    } @else {\r\n      @if (errorMessage?.length) {\r\n        <ds-message></ds-message>\r\n        @for (item of errorMessage; track $index) {\r\n          <div class=\"d-flex justify-content-center\">\r\n            <span class=\"fc-coral fs-18\" >{{ item?.['message'] }}</span>\r\n          </div>\r\n        }\r\n      } @else {\r\n        <ds-message [label]=\"'pageErrorLoading' | translate\"></ds-message>\r\n      }\r\n    }\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]