bpm-core 0.0.111 → 0.0.113

package/fesm2022/bpm-core.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, Inject, inject, DestroyRef, CUSTOM_ELEMENTS_SCHEMA, Component, Pipe, forwardRef, EventEmitter, Output, Input, Directive, HostBinding, HostListener, ViewChild, ElementRef, NO_ERRORS_SCHEMA, PLATFORM_ID, InjectionToken } from '@angular/core';
+import { Injectable, Inject, inject, DestroyRef, CUSTOM_ELEMENTS_SCHEMA, Component, Pipe, forwardRef, EventEmitter, Output, Input, Directive, HostListener, ViewChild, ElementRef, NO_ERRORS_SCHEMA, PLATFORM_ID, InjectionToken } from '@angular/core';
 import * as i1$1 from '@angular/material/dialog';
 import { MatDialogContent, MatDialogClose, MatDialogTitle, MAT_DIALOG_DATA, MatDialog, MatDialogActions, MatDialogModule } from '@angular/material/dialog';
 import { Subject, BehaviorSubject, ReplaySubject, catchError, throwError, switchMap, from, fromEvent, debounceTime } from 'rxjs';
@@ -12,18 +12,19 @@ import { NgIf, CommonModule, NgSwitchCase, DecimalPipe, DatePipe, NgClass, NgSwi
 import * as i2 from '@angular/material/core';
 import { MAT_DATE_FORMATS, MatNativeDateModule } from '@angular/material/core';
 import * as i4 from '@angular/forms';
-import { NG_VALUE_ACCESSOR, FormControl, NgForm, ControlContainer, Validators, NgControl, FormControlName, FormGroupDirective, ReactiveFormsModule, FormsModule } from '@angular/forms';
+import { NG_VALUE_ACCESSOR, FormControl, NgForm, ControlContainer, Validators, NgControl, NgModel, FormControlName, FormGroupDirective, ReactiveFormsModule, FormsModule, FormGroup, FormArray } from '@angular/forms';
 import * as i3 from '@angular/platform-browser';
 import { MatCheckbox } from '@angular/material/checkbox';
 import * as i2$1 from 'ngx-toastr';
 import * as i1$3 from '@angular/material/datepicker';
 import { MatDatepickerToggle, MatDatepickerInput, MatDatepickerModule, MatDatepicker } from '@angular/material/datepicker';
 import * as i6 from '@angular/material/form-field';
-import { matFormFieldAnimations, MatError, MatFormFieldModule, MatFormField, MatHint } from '@angular/material/form-field';
+import { MatError, MatFormFieldModule, MatFormField, MatHint } from '@angular/material/form-field';
 import * as i7 from '@angular/material/input';
 import { MatInput, MatInputModule } from '@angular/material/input';
 import * as i1$2 from '@ncstate/sat-popover';
 import { SatPopoverModule } from '@ncstate/sat-popover';
+import { trigger, state, transition, style, animate } from '@angular/animations';
 import { MatSlideToggle } from '@angular/material/slide-toggle';
 import { format } from 'date-fns';
 import * as i1$4 from '@angular/material/autocomplete';
@@ -1756,8 +1757,9 @@ class ControlValueAccessorDirective {
     control;
     required; //hide optional label and add required validator from angular side
     mandatory; //only hide optional label
-    maxLength;
     isDisabled = false;
+    onChangeFn = () => { };
+    onTouchedFn = () => { };
     constructor(injector, i18n, toasterService, coreService, sanitizer, fb, actionStateService) {
         this.injector = injector;
         this.i18n = i18n;
@@ -1779,6 +1781,9 @@ class ControlValueAccessorDirective {
                         .get(FormGroupDirective)
                         .getControl(formControl);
                     break;
+                case NgModel:
+                    this.control = formControl.control;
+                    break;
                 default:
                     this.control = formControl
                         .form;
@@ -1827,12 +1832,17 @@ class ControlValueAccessorDirective {
         }
     }
     registerOnChange(fn) {
+        this.onChangeFn = fn;
     }
     registerOnTouched(fn) {
+        this.onTouchedFn = fn;
     }
     setDisabledState(isDisabled) {
         this.isDisabled = isDisabled;
     }
+    setValue(value) {
+        this.onChangeFn(value);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: ControlValueAccessorDirective, deps: [{ token: i0.Injector }, { token: CoreI18nService }, { token: i2$1.ToastrService }, { token: CoreService }, { token: i3.DomSanitizer }, { token: i4.FormBuilder }, { token: ActionStateService }], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.1", type: ControlValueAccessorDirective, isStandalone: true, 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", customErrorMessages: "customErrorMessages", maxDate: "maxDate", minDate: "minDate", customMaxDate: "customMaxDate", customMinDate: "customMinDate", required: "required", mandatory: "mandatory" }, ngImport: i0 });
 }
@@ -2005,15 +2015,15 @@ class ValidationErrorMessages {
 }
 
 class ValidationErrorsComponent {
-    display = 'none';
     errors = {};
     customErrorMessages;
     validationErrorMsgs = new ValidationErrorMessages({}, this.getDefaultErrorMsgs());
+    isErrorMsgVisible = false;
     ngOnChanges(changes) {
         if (changes?.errors || changes?.customErrorMessages) {
             const msgs = { ...this.getDefaultErrorMsgs(), ...this.customErrorMessages };
             this.validationErrorMsgs.update(this.errors, msgs);
-            this.display = this.validationErrorMsgs.msg ? undefined : 'none';
+            this.isErrorMsgVisible = this.validationErrorMsgs.msg ? true : false;
         }
     }
     getDefaultErrorMsgs() {
@@ -2040,21 +2050,39 @@ class ValidationErrorsComponent {
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: ValidationErrorsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: ValidationErrorsComponent, isStandalone: true, selector: "app-validation-errors,[app-validation-errors]", inputs: { errors: "errors", customErrorMessages: "customErrorMessages" }, host: { properties: { "@transitionMessages": "'enter'", "style.display": "this.display" }, classAttribute: "mat-mdc-form-field-error" }, usesOnChanges: true, ngImport: i0, template: "{{validationErrorMsgs.msg}}", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }], animations: [matFormFieldAnimations.transitionMessages] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: ValidationErrorsComponent, isStandalone: true, selector: "app-validation-errors,[app-validation-errors]", inputs: { errors: "errors", customErrorMessages: "customErrorMessages" }, host: { properties: { "@fadeInDown": "isErrorMsgVisible ? 'visible' : 'hidden'", "style.display": "isErrorMsgVisible ? '' : 'none'" }, classAttribute: "mat-mdc-form-field-error" }, usesOnChanges: true, ngImport: i0, template: "{{validationErrorMsgs.msg}}", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }], animations: [
+            trigger('fadeInDown', [
+                state('hidden', style({ opacity: 0, transform: 'translateY(-5px)' })),
+                state('visible', style({ opacity: 1, transform: 'translateY(0%)' })),
+                transition('void => visible', [
+                    style({ opacity: 0, transform: 'translateY(-5px)' }),
+                    animate('300ms ease-in-out')
+                ]),
+                transition('hidden => visible', [animate('300ms ease-in-out')])
+            ])
+        ] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: ValidationErrorsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-validation-errors,[app-validation-errors]', standalone: true, imports: [
                         CommonModule,
                         MatError
-                    ], animations: [matFormFieldAnimations.transitionMessages], host: {
+                    ], animations: [
+                        trigger('fadeInDown', [
+                            state('hidden', style({ opacity: 0, transform: 'translateY(-5px)' })),
+                            state('visible', style({ opacity: 1, transform: 'translateY(0%)' })),
+                            transition('void => visible', [
+                                style({ opacity: 0, transform: 'translateY(-5px)' }),
+                                animate('300ms ease-in-out')
+                            ]),
+                            transition('hidden => visible', [animate('300ms ease-in-out')])
+                        ])
+                    ], host: {
                         'class': 'mat-mdc-form-field-error',
-                        '[@transitionMessages]': "'enter'"
+                        '[@fadeInDown]': "isErrorMsgVisible ? 'visible' : 'hidden'",
+                        '[style.display]': "isErrorMsgVisible ? '' : 'none'",
                     }, template: "{{validationErrorMsgs.msg}}" }]
-        }], propDecorators: { display: [{
-                type: HostBinding,
-                args: ['style.display']
-            }], errors: [{
+        }], propDecorators: { errors: [{
                 type: Input
             }], customErrorMessages: [{
                 type: Input
@@ -3620,6 +3648,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
 class TextareaComponent extends ControlValueAccessorDirective {
     className;
     preventSpecailChar;
+    maxLength;
     destroyRef = inject(DestroyRef);
     ngOnInit() {
         super.ngOnInit();
@@ -3632,13 +3661,13 @@ class TextareaComponent extends ControlValueAccessorDirective {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: TextareaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: TextareaComponent, isStandalone: true, selector: "app-textarea", inputs: { className: "className", preventSpecailChar: "preventSpecailChar" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: TextareaComponent, isStandalone: true, selector: "app-textarea", inputs: { className: "className", preventSpecailChar: "preventSpecailChar", maxLength: "maxLength" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => TextareaComponent),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "@if(!isReadOnly){\r\n  <ng-container>\r\n    @if(label){\r\n      <app-form-label [label]=\"label\" [optional]=\"required || mandatory ? false : true\" [tooltip]=\"tooltip\"></app-form-label>\r\n      }\r\n    <mat-form-field class=\"custom-textarea bordered-input  {{className}}\">\r\n      <mat-label>{{ label }}</mat-label>\r\n      <label class=\"mat-form-content\">\r\n        @if (type === 'arOnly'){\r\n          <textarea [placeholder]=\"placeholder\"   min=\"minlength\" arOnly max=\"maxValue\"\r\n         [formControl]=\"control\" matInput></textarea>\r\n        }\r\n        @if (type === 'enOnly'){\r\n          <textarea  [placeholder]=\"placeholder\"  min=\"minlength\" enOnly max=\"maxValue\"\r\n         [formControl]=\"control\" matInput></textarea>\r\n        }\r\n       @if (type !== 'enOnly' &&  type !== 'arOnly' ){\r\n        <textarea [placeholder]=\"placeholder\"\r\n        [maxlength]=\"maxLength\" min=\"minlength\" specialIsAlphaNumeric max=\"maxValue\"\r\n        [formControl]=\"control\" matInput></textarea>\r\n       }\r\n\r\n      </label>\r\n      @if (showHint){\r\n        <mat-hint class=\"d-flex align-items-center gap-1 mt-1\">\r\n          <span class=\"sfi sfi-info fs-17 fc-dark-gray\" [ngClass]=\"{'fc-oasis-light-imp':value}\"></span>\r\n          <span class=\"fs-12 fc-black line-height-1\">{{ hint }}</span>\r\n        </mat-hint>\r\n      }\r\n      <mat-error \r\n        app-validation-errors \r\n        [errors]=\"control.errors\" \r\n        [customErrorMessages]=\"customErrorMessages\">\r\n      </mat-error>\r\n    </mat-form-field>\r\n\r\n  </ng-container>\r\n}\r\n@if (isReadOnly && control.value && (showIfEmpty || control)){\r\n  <ng-container>\r\n    <app-info-item class=\"info-item w-100\" [insideTable]=\"insideTable\" [label]=\"label\" [value]=\"control?.value\" [type]=\"type\"></app-info-item>\r\n  </ng-container>\r\n}\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: i6.MatFormFieldModule }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i6.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: FormLabelComponent, selector: "app-form-label", inputs: ["tooltip", "label", "optional"] }, { kind: "component", type: ValidationErrorsComponent, selector: "app-validation-errors,[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.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { 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: "directive", type: EnOnlyDirective, selector: "[enOnly]" }, { kind: "directive", type: ArOnlyDirective, selector: "[arOnly]" }] });
+        ], usesInheritance: true, ngImport: i0, template: "@if(!isReadOnly){\r\n  <ng-container>\r\n    @if(label){\r\n      <app-form-label [label]=\"label\" [optional]=\"required || mandatory ? false : true\" [tooltip]=\"tooltip\"></app-form-label>\r\n      }\r\n    <mat-form-field class=\"custom-textarea bordered-input  {{className}}\">\r\n      <mat-label>{{ label }}</mat-label>\r\n      <label class=\"mat-form-content\">\r\n        @if (type === 'arOnly'){\r\n          <textarea \r\n            arOnly\r\n            #textarea \r\n            [placeholder]=\"placeholder\"\r\n            [value]=\"value\"\r\n            (input)=\"setValue(textarea.value)\" \r\n            (blur)=\"onTouchedFn()\" \r\n            [attr.maxlength]=\"maxLength\"\r\n            matInput>\r\n          </textarea>\r\n        } @else if (type === 'enOnly'){\r\n          <textarea \r\n            enOnly\r\n            #textarea \r\n            [placeholder]=\"placeholder\"\r\n            [value]=\"value\"\r\n            (input)=\"setValue(textarea.value)\" \r\n            (blur)=\"onTouchedFn()\" \r\n            [attr.maxlength]=\"maxLength\"\r\n            matInput>\r\n          </textarea>\r\n        } @else {\r\n          <textarea \r\n            #textarea \r\n            [placeholder]=\"placeholder\"\r\n            [value]=\"value\"\r\n            (input)=\"setValue(textarea.value)\" \r\n            (blur)=\"onTouchedFn()\" \r\n            [attr.maxlength]=\"maxLength\"\r\n            matInput>\r\n          </textarea>\r\n       }\r\n\r\n      </label>\r\n      @if (showHint){\r\n        <mat-hint class=\"d-flex align-items-center gap-1 mt-1\">\r\n          <span class=\"sfi sfi-info fs-17 fc-dark-gray\" [ngClass]=\"{'fc-oasis-light-imp':value}\"></span>\r\n          <span class=\"fs-12 fc-black line-height-1\">{{ hint }}</span>\r\n        </mat-hint>\r\n      }\r\n    </mat-form-field>\r\n    @if (control.touched) {\r\n      <mat-error \r\n        app-validation-errors \r\n        [errors]=\"control.errors\" \r\n        [customErrorMessages]=\"customErrorMessages\">\r\n      </mat-error>\r\n    }\r\n\r\n  </ng-container>\r\n}\r\n@if (isReadOnly && control.value && (showIfEmpty || control)){\r\n  <ng-container>\r\n    <app-info-item class=\"info-item w-100\" [insideTable]=\"insideTable\" [label]=\"label\" [value]=\"control?.value\" [type]=\"type\"></app-info-item>\r\n  </ng-container>\r\n}\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: i6.MatFormFieldModule }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i6.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: FormLabelComponent, selector: "app-form-label", inputs: ["tooltip", "label", "optional"] }, { kind: "component", type: ValidationErrorsComponent, selector: "app-validation-errors,[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: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: EnOnlyDirective, selector: "[enOnly]" }, { kind: "directive", type: ArOnlyDirective, selector: "[arOnly]" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: TextareaComponent, decorators: [{
             type: Component,
@@ -3652,48 +3681,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                             useExisting: forwardRef(() => TextareaComponent),
                             multi: true,
                         },
-                    ], template: "@if(!isReadOnly){\r\n  <ng-container>\r\n    @if(label){\r\n      <app-form-label [label]=\"label\" [optional]=\"required || mandatory ? false : true\" [tooltip]=\"tooltip\"></app-form-label>\r\n      }\r\n    <mat-form-field class=\"custom-textarea bordered-input  {{className}}\">\r\n      <mat-label>{{ label }}</mat-label>\r\n      <label class=\"mat-form-content\">\r\n        @if (type === 'arOnly'){\r\n          <textarea [placeholder]=\"placeholder\"   min=\"minlength\" arOnly max=\"maxValue\"\r\n         [formControl]=\"control\" matInput></textarea>\r\n        }\r\n        @if (type === 'enOnly'){\r\n          <textarea  [placeholder]=\"placeholder\"  min=\"minlength\" enOnly max=\"maxValue\"\r\n         [formControl]=\"control\" matInput></textarea>\r\n        }\r\n       @if (type !== 'enOnly' &&  type !== 'arOnly' ){\r\n        <textarea [placeholder]=\"placeholder\"\r\n        [maxlength]=\"maxLength\" min=\"minlength\" specialIsAlphaNumeric max=\"maxValue\"\r\n        [formControl]=\"control\" matInput></textarea>\r\n       }\r\n\r\n      </label>\r\n      @if (showHint){\r\n        <mat-hint class=\"d-flex align-items-center gap-1 mt-1\">\r\n          <span class=\"sfi sfi-info fs-17 fc-dark-gray\" [ngClass]=\"{'fc-oasis-light-imp':value}\"></span>\r\n          <span class=\"fs-12 fc-black line-height-1\">{{ hint }}</span>\r\n        </mat-hint>\r\n      }\r\n      <mat-error \r\n        app-validation-errors \r\n        [errors]=\"control.errors\" \r\n        [customErrorMessages]=\"customErrorMessages\">\r\n      </mat-error>\r\n    </mat-form-field>\r\n\r\n  </ng-container>\r\n}\r\n@if (isReadOnly && control.value && (showIfEmpty || control)){\r\n  <ng-container>\r\n    <app-info-item class=\"info-item w-100\" [insideTable]=\"insideTable\" [label]=\"label\" [value]=\"control?.value\" [type]=\"type\"></app-info-item>\r\n  </ng-container>\r\n}\r\n" }]
+                    ], template: "@if(!isReadOnly){\r\n  <ng-container>\r\n    @if(label){\r\n      <app-form-label [label]=\"label\" [optional]=\"required || mandatory ? false : true\" [tooltip]=\"tooltip\"></app-form-label>\r\n      }\r\n    <mat-form-field class=\"custom-textarea bordered-input  {{className}}\">\r\n      <mat-label>{{ label }}</mat-label>\r\n      <label class=\"mat-form-content\">\r\n        @if (type === 'arOnly'){\r\n          <textarea \r\n            arOnly\r\n            #textarea \r\n            [placeholder]=\"placeholder\"\r\n            [value]=\"value\"\r\n            (input)=\"setValue(textarea.value)\" \r\n            (blur)=\"onTouchedFn()\" \r\n            [attr.maxlength]=\"maxLength\"\r\n            matInput>\r\n          </textarea>\r\n        } @else if (type === 'enOnly'){\r\n          <textarea \r\n            enOnly\r\n            #textarea \r\n            [placeholder]=\"placeholder\"\r\n            [value]=\"value\"\r\n            (input)=\"setValue(textarea.value)\" \r\n            (blur)=\"onTouchedFn()\" \r\n            [attr.maxlength]=\"maxLength\"\r\n            matInput>\r\n          </textarea>\r\n        } @else {\r\n          <textarea \r\n            #textarea \r\n            [placeholder]=\"placeholder\"\r\n            [value]=\"value\"\r\n            (input)=\"setValue(textarea.value)\" \r\n            (blur)=\"onTouchedFn()\" \r\n            [attr.maxlength]=\"maxLength\"\r\n            matInput>\r\n          </textarea>\r\n       }\r\n\r\n      </label>\r\n      @if (showHint){\r\n        <mat-hint class=\"d-flex align-items-center gap-1 mt-1\">\r\n          <span class=\"sfi sfi-info fs-17 fc-dark-gray\" [ngClass]=\"{'fc-oasis-light-imp':value}\"></span>\r\n          <span class=\"fs-12 fc-black line-height-1\">{{ hint }}</span>\r\n        </mat-hint>\r\n      }\r\n    </mat-form-field>\r\n    @if (control.touched) {\r\n      <mat-error \r\n        app-validation-errors \r\n        [errors]=\"control.errors\" \r\n        [customErrorMessages]=\"customErrorMessages\">\r\n      </mat-error>\r\n    }\r\n\r\n  </ng-container>\r\n}\r\n@if (isReadOnly && control.value && (showIfEmpty || control)){\r\n  <ng-container>\r\n    <app-info-item class=\"info-item w-100\" [insideTable]=\"insideTable\" [label]=\"label\" [value]=\"control?.value\" [type]=\"type\"></app-info-item>\r\n  </ng-container>\r\n}\r\n" }]
         }], propDecorators: { className: [{
                 type: Input
             }], preventSpecailChar: [{
                 type: Input
-            }] } });
-
-/* eslint-disable @angular-eslint/directive-selector */
-/* eslint-disable @typescript-eslint/no-empty-function */
-class SpecialCharacterDirective {
-    regexStr = '^[a-zA-Z0-9]*$';
-    constructor() {
-    }
-    onInputChange(event) {
-        const inputElement = event.target;
-        inputElement.value = inputElement.value.replace(/[\'\`]/g, '');
-    }
-    blockPaste(event) {
-        const inputElement = event.target;
-        inputElement.value = inputElement.value.replace(/[\'\`]/g, '');
-    }
-    onDrop(event) {
-        const inputElement = event.target;
-        inputElement.value = inputElement.value.replace(/[\'\`]/g, '');
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SpecialCharacterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.1", type: SpecialCharacterDirective, isStandalone: true, selector: "[specialIsAlphaNumeric]", host: { listeners: { "input": "onInputChange($event)", "paste": "blockPaste($event)", "drop": "onDrop($event)" } }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SpecialCharacterDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[specialIsAlphaNumeric]'
-                }]
-        }], ctorParameters: () => [], propDecorators: { onInputChange: [{
-                type: HostListener,
-                args: ['input', ['$event']]
-            }], blockPaste: [{
-                type: HostListener,
-                args: ['paste', ['$event']]
-            }], onDrop: [{
-                type: HostListener,
-                args: ['drop', ['$event']]
+            }], maxLength: [{
+                type: Input
             }] } });
 
 class ToggleButtonComponent extends ControlValueAccessorDirective {
@@ -3955,6 +3949,7 @@ class DocsUploaderComponent extends ControlValueAccessorDirective {
     inputFile;
     dialog = inject(MatDialog);
     destroyRef = inject(DestroyRef);
+    maxLength;
     validImageTypes = {
         jpg: ['image/jpeg', 'image/pjpeg'],
         JPG: ['image/jpeg', 'image/pjpeg'],
@@ -4505,7 +4500,7 @@ class AttachmentSectionDataComponent extends ControlValueAccessorDirective {
                 useExisting: forwardRef(() => AttachmentSectionDataComponent),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, 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\r\n          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          [allAttachments]=\"dialogData?.attachments\"\r\n          [isReadOnly]=\"section?.header?.readOnly\" [showActions]=\"false\"\r\n          formControlName=\"file\">\r\n        </app-file-uploader>\r\n\r\n        <app-textarea\r\n          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\r\n          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\" [class.disabled]=\"uploading\">{{ 'cancel' | translate }}</ds-button>\r\n    <ds-button\r\n      (click)=\"addAttachments()\" [loading]=\"uploading\"\r\n      [disabled]=\"(!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>\r\n", 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"], dependencies: [{ kind: "component", type: TextareaComponent, selector: "app-textarea", inputs: ["className", "preventSpecailChar"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { 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", "allAttachments", "signType", "customDownload", "showSignButton", "printType", "showPrintButton", "downloadType", "showDownloadButton", "preventFileContents", "maxSize"], outputs: ["selectedTemplateAttachment", "addSignatureClicked", "printActionClicked", "emitedValue", "downloadActionClicked"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { 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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { 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: "pipe", type: TranslatePipe, name: "translate" }] });
+        ], usesInheritance: true, ngImport: i0, 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\r\n          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          [allAttachments]=\"dialogData?.attachments\"\r\n          [isReadOnly]=\"section?.header?.readOnly\" [showActions]=\"false\"\r\n          formControlName=\"file\">\r\n        </app-file-uploader>\r\n\r\n        <app-textarea\r\n          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\r\n          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\" [class.disabled]=\"uploading\">{{ 'cancel' | translate }}</ds-button>\r\n    <ds-button\r\n      (click)=\"addAttachments()\" [loading]=\"uploading\"\r\n      [disabled]=\"(!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>\r\n", 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"], dependencies: [{ kind: "component", type: TextareaComponent, selector: "app-textarea", inputs: ["className", "preventSpecailChar", "maxLength"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { 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", "allAttachments", "signType", "customDownload", "showSignButton", "printType", "showPrintButton", "downloadType", "showDownloadButton", "preventFileContents", "maxSize"], outputs: ["selectedTemplateAttachment", "addSignatureClicked", "printActionClicked", "emitedValue", "downloadActionClicked"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { 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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { 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: "pipe", type: TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AttachmentSectionDataComponent, decorators: [{
             type: Component,
@@ -5814,7 +5809,7 @@ class FeedbackSectionComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: FeedbackSectionComponent, deps: [{ token: FeedBackService }, { token: CoreI18nService }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: FeedbackSectionComponent, isStandalone: true, selector: "app-feedback-section", inputs: { inboxItem: "inboxItem", profile: "profile" }, ngImport: i0, template: "<div class=\"popup-container\">\r\n  <div class=\"d-flex align-items-center justify-content-between\" mat-dialog-title>\r\n    <h3>{{i18n.translate('requestFeedback')}}</h3>\r\n    <ds-button square icon matDialogClose>\r\n      <ds-icon icon=\"close\" class=\"fs-20 fc-black\"></ds-icon>\r\n    </ds-button>\r\n  </div>\r\n  <mat-dialog-content>\r\n    <div class=\"d-flex flex-column align-items-center justify-content-center py-4\" *ngIf=\"submitted\">\r\n      <div class=\"text-center mb-4\">\r\n        <svg width=\"79\" height=\"76\" viewBox=\"0 0 79 76\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n          <path\r\n            d=\"M59.9804 0.0998676L1.39239 19.2479C1.02223 19.3692 0.69498 19.5948 0.44999 19.8976C0.205 20.2005 0.0526985 20.5676 0.0113985 20.955C-0.0299016 21.3423 0.0415576 21.7333 0.217184 22.081C0.39281 22.4287 0.665128 22.7183 1.00139 22.9149L23.1454 35.7899C23.487 35.9886 23.8794 36.0828 24.274 36.0608C24.6686 36.0388 25.0481 35.9014 25.3654 35.6659L31.5894 31.0439L26.9674 37.2679C26.7318 37.5852 26.5944 37.9646 26.5722 38.3591C26.5499 38.7537 26.6439 39.1461 26.8424 39.4879L39.7174 61.6289C39.9138 61.9652 40.2031 62.2377 40.5506 62.4135C40.8981 62.5894 41.289 62.6611 41.6763 62.6201C42.0636 62.5791 42.4308 62.4272 42.7338 62.1825C43.0369 61.9378 43.2628 61.6108 43.3844 61.2409L62.5294 2.65187C62.6458 2.29686 62.6615 1.91654 62.5749 1.55313C62.4883 1.18971 62.3026 0.857401 62.0386 0.593071C61.7746 0.328741 61.4425 0.142726 61.0792 0.0556665C60.7159 -0.0313933 60.3355 -0.0160937 59.9804 0.0998676ZM40.9434 55.6999L31.0014 38.6069L42.9894 22.4689C43.2797 22.0798 43.4202 21.5993 43.3852 21.1152C43.3502 20.631 43.142 20.1757 42.7988 19.8325C42.4556 19.4893 42.0002 19.2811 41.5161 19.2461C41.032 19.2111 40.5514 19.3516 40.1624 19.6419L24.0254 31.6279L6.93339 21.6889L57.4514 5.18087L40.9434 55.6999ZM21.2134 44.2759L7.80139 57.6909C7.42253 58.0701 6.90853 58.2833 6.37246 58.2836C5.83638 58.2839 5.32215 58.0712 4.94289 57.6924C4.56363 57.3135 4.35041 56.7995 4.35013 56.2634C4.34985 55.7274 4.56253 55.2131 4.94139 54.8339L18.3564 41.4189C18.7353 41.04 19.2491 40.8272 19.7849 40.8272C20.3207 40.8272 20.8345 41.04 21.2134 41.4189C21.5923 41.7977 21.8051 42.3116 21.8051 42.8474C21.8051 43.3832 21.5923 43.897 21.2134 44.2759ZM3.49139 44.7839C3.30378 44.5963 3.15495 44.3736 3.05341 44.1285C2.95187 43.8834 2.89961 43.6207 2.89961 43.3554C2.89961 43.0901 2.95187 42.8274 3.05341 42.5823C3.15495 42.3371 3.30378 42.1144 3.49139 41.9269L8.78439 36.6339C9.16326 36.255 9.6771 36.0422 10.2129 36.0422C10.7487 36.0422 11.2625 36.255 11.6414 36.6339C12.0203 37.0127 12.2331 37.5266 12.2331 38.0624C12.2331 38.5982 12.0203 39.112 11.6414 39.4909L6.34939 44.7839C6.1618 44.9716 5.93903 45.1206 5.69384 45.2222C5.44864 45.3238 5.18582 45.3762 4.92039 45.3762C4.65497 45.3762 4.39215 45.3238 4.14695 45.2222C3.90176 45.1206 3.67899 44.9716 3.49139 44.7839ZM26.0014 50.9899C26.189 51.1774 26.3378 51.4001 26.4394 51.6453C26.5409 51.8904 26.5932 52.1531 26.5932 52.4184C26.5932 52.6837 26.5409 52.9464 26.4394 53.1915C26.3378 53.4366 26.189 53.6593 26.0014 53.8469L20.7014 59.1409C20.3225 59.5197 19.8087 59.7326 19.2729 59.7326C18.7371 59.7326 18.2233 59.5197 17.8444 59.1409C17.4655 58.762 17.2527 58.2482 17.2527 57.7124C17.2527 57.1766 17.4655 56.6627 17.8444 56.2839L23.1374 50.9909C23.325 50.8032 23.5477 50.6544 23.7928 50.5529C24.0379 50.4513 24.3006 50.3991 24.5659 50.3991C24.8312 50.3991 25.0939 50.4513 25.339 50.5529C25.5841 50.6544 25.8068 50.8032 25.9944 50.9909L26.0014 50.9899Z\"\r\n            fill=\"#8E9AA0\" />\r\n          <path\r\n            d=\"M58.0015 75.3119C69.0472 75.3119 78.0015 66.3576 78.0015 55.3119C78.0015 44.2662 69.0472 35.3119 58.0015 35.3119C46.9558 35.3119 38.0015 44.2662 38.0015 55.3119C38.0015 66.3576 46.9558 75.3119 58.0015 75.3119Z\"\r\n            fill=\"#00C48C\" />\r\n          <path\r\n            d=\"M56.8804 57.3183L54.0346 54.4725L52.9743 55.5336L56.8774 59.4367L65.8354 50.5267L65.4927 50.0138C63.8557 47.5812 61.1134 46.002 58.0015 46.002C53.0313 46.002 49.0015 50.031 49.0015 55.002C49.0015 59.9729 53.0305 64.002 58.0015 64.002C62.9716 64.002 67.0007 59.9729 67.0015 55.0035H65.5017C65.5017 55.005 65.5017 55.0072 65.5017 55.0095C65.5017 59.1503 62.1453 62.5067 58.0045 62.5067C53.8637 62.5067 50.5072 59.1503 50.5072 55.0095C50.5072 50.8686 53.8637 47.5122 58.0045 47.5122C60.3793 47.5122 62.4962 48.6168 63.87 50.3392L63.882 50.3542L56.8804 57.3183Z\"\r\n            fill=\"white\" />\r\n        </svg>\r\n\r\n      </div>\r\n      <h2 class=\"fs-16 fw-medium fc-black mb-4 text-center\">\r\n        {{i18n.translate('submittedSuccessfully')}}\r\n      </h2>\r\n    </div>\r\n\r\n    <ng-container *ngIf=\"!submitted\">\r\n      <div class=\"mb-3\" *ngIf=\"feedBackService.feedbackForm \">\r\n        <app-search-employee #employee label=\"{{i18n.translate('requestTo')}}\" [field]=\"searchEmp\"\r\n          [labelTextReadMode]=\"i18n.translate('requestTo')\" [labelTextWriteMode]=\"i18n.translate('requestTo')\"\r\n          [name]=\"'searchEmp'\" (emitedValue)=\"handleUserSelected($event)\">\r\n        </app-search-employee>\r\n        <app-textarea #request [field]=\"employeeInput\" name=\"employeeInput\" label=\"{{i18n.translate('feedback')}}\"\r\n          [required]=\"true\" [minLength]='1' (emitedValue)=\"handleFeedbackQuestion($event)\" [maxLength]='500'\r\n          [errorMessage]=\"i18n.translate('lenghtMin1Max500')\">\r\n        </app-textarea>\r\n      </div>\r\n\r\n      <div class=\"info-section\" *ngIf=\"!feedBackService.feedbackForm\">\r\n        <ng-container *ngIf=\"feedBackService.responderForm\">\r\n          <app-info-item class=\"info-item w-100\" label=\"{{i18n.translate('requestFrom')}}\"\r\n            value=\"{{feedBackService?.feedbackResponse?.requestFrom}}\"></app-info-item>\r\n          <app-info-item class=\"info-item w-100\" label=\"{{i18n.translate('requestTo')}}\"\r\n            value=\"{{feedBackService?.feedbackResponse?.requestTo}}\"></app-info-item>\r\n          <app-info-item class=\"info-item w-100\" label=\"{{i18n.translate('feedbackQuestion')}}\"\r\n            value=\"{{feedBackService?.feedbackResponse?.requestFeedback}}\"></app-info-item>\r\n          <app-info-item class=\"info-item w-100\" label=\"{{i18n.translate('feedback')}}\"\r\n            value=\"{{feedBackService?.feedbackResponse?.responseFeedback}}\"></app-info-item>\r\n          <app-textarea #request class=\"full mx-3 mt-3 section-item\" [field]=\"employeeInput\" name=\"employeeInput\"\r\n            label=\"{{i18n.translate('feedback')}}\" [required]=\"true\" [minLength]='1'\r\n            (emitedValue)=\"handleFeedbackResponse($event)\" [maxLength]='500'\r\n            [errorMessage]=\"i18n.translate('lenghtMin1Max500')\">\r\n          </app-textarea>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"feedBackService.pendingForm\" id=\"responce_form\">\r\n          <app-info-item class=\"info-item w-100\" label=\"{{i18n.translate('requestFrom')}}\"\r\n            value=\"{{feedBackService?.feedbackResponse?.requestFrom}}\"></app-info-item>\r\n          <app-info-item class=\"info-item w-100\" label=\"{{i18n.translate('requestTo')}}\"\r\n            value=\"{{feedBackService?.feedbackResponse?.requestTo}}\"></app-info-item>\r\n          <app-info-item class=\"info-item w-100\" label=\"{{i18n.translate('feedbackQuestion')}}\"\r\n            value=\"{{feedBackService?.feedbackResponse?.requestFeedback}}\"></app-info-item>\r\n          <app-info-item class=\"info-item w-100\" label=\"{{i18n.translate('feedback')}}\"\r\n            value=\"{{feedBackService?.feedbackResponse?.responseFeedback}}\"></app-info-item>\r\n\r\n        </ng-container>\r\n      </div>\r\n\r\n      <div class=\"d-flex align-items-center justify-content-center w-100 gap-3\" *ngIf=\"!submitted\">\r\n        <ds-button shape=\"outline\" matDialogClose>\r\n          {{i18n.translate('Cancel')}}\r\n        </ds-button>\r\n        <ds-button *ngIf=\"feedBackService.feedbackForm\" (click)=\"addFeedback()\"\r\n          disabled=\"{{!(isFeedbackValidated)}}\">\r\n          {{i18n.translate('submit')}}\r\n        </ds-button>\r\n        <ds-button *ngIf=\"!feedBackService.feedbackForm && feedBackService.responderForm\"\r\n          disabled=\"{{!(isResponseValidated)}}\" (click)=\"addResponse()\">\r\n          {{i18n.translate('submit')}}\r\n        </ds-button>\r\n      </div>\r\n    </ng-container>\r\n\r\n  </mat-dialog-content>\r\n\r\n</div>\r\n", styles: ["::ng-deep .main-popup{--popup-max-width: 700px !important;--popup-width: 100% !important}\n"], dependencies: [{ kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SearchEmployeeComponent, selector: "app-search-employee", inputs: ["valueName", "className", "optional", "data", "floatLabel", "error", "showEdit", "arrayList", "isUniqueUsers"], outputs: ["selectedEmp", "onInputChange", "editDirectManger", "deleteDirectManger", "emitedDeletedValue"] }, { kind: "component", type: TextareaComponent, selector: "app-textarea", inputs: ["className", "preventSpecailChar"] }, { kind: "component", type: InfoItemComponent, selector: "app-info-item", inputs: ["label", "value", "name", "type", "dateType", "multiple", "insideTable", "hasLabel", "arrayList", "actionType", "download"] }, { kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: FeedbackSectionComponent, isStandalone: true, selector: "app-feedback-section", inputs: { inboxItem: "inboxItem", profile: "profile" }, ngImport: i0, template: "<div class=\"popup-container\">\r\n  <div class=\"d-flex align-items-center justify-content-between\" mat-dialog-title>\r\n    <h3>{{i18n.translate('requestFeedback')}}</h3>\r\n    <ds-button square icon matDialogClose>\r\n      <ds-icon icon=\"close\" class=\"fs-20 fc-black\"></ds-icon>\r\n    </ds-button>\r\n  </div>\r\n  <mat-dialog-content>\r\n    <div class=\"d-flex flex-column align-items-center justify-content-center py-4\" *ngIf=\"submitted\">\r\n      <div class=\"text-center mb-4\">\r\n        <svg width=\"79\" height=\"76\" viewBox=\"0 0 79 76\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n          <path\r\n            d=\"M59.9804 0.0998676L1.39239 19.2479C1.02223 19.3692 0.69498 19.5948 0.44999 19.8976C0.205 20.2005 0.0526985 20.5676 0.0113985 20.955C-0.0299016 21.3423 0.0415576 21.7333 0.217184 22.081C0.39281 22.4287 0.665128 22.7183 1.00139 22.9149L23.1454 35.7899C23.487 35.9886 23.8794 36.0828 24.274 36.0608C24.6686 36.0388 25.0481 35.9014 25.3654 35.6659L31.5894 31.0439L26.9674 37.2679C26.7318 37.5852 26.5944 37.9646 26.5722 38.3591C26.5499 38.7537 26.6439 39.1461 26.8424 39.4879L39.7174 61.6289C39.9138 61.9652 40.2031 62.2377 40.5506 62.4135C40.8981 62.5894 41.289 62.6611 41.6763 62.6201C42.0636 62.5791 42.4308 62.4272 42.7338 62.1825C43.0369 61.9378 43.2628 61.6108 43.3844 61.2409L62.5294 2.65187C62.6458 2.29686 62.6615 1.91654 62.5749 1.55313C62.4883 1.18971 62.3026 0.857401 62.0386 0.593071C61.7746 0.328741 61.4425 0.142726 61.0792 0.0556665C60.7159 -0.0313933 60.3355 -0.0160937 59.9804 0.0998676ZM40.9434 55.6999L31.0014 38.6069L42.9894 22.4689C43.2797 22.0798 43.4202 21.5993 43.3852 21.1152C43.3502 20.631 43.142 20.1757 42.7988 19.8325C42.4556 19.4893 42.0002 19.2811 41.5161 19.2461C41.032 19.2111 40.5514 19.3516 40.1624 19.6419L24.0254 31.6279L6.93339 21.6889L57.4514 5.18087L40.9434 55.6999ZM21.2134 44.2759L7.80139 57.6909C7.42253 58.0701 6.90853 58.2833 6.37246 58.2836C5.83638 58.2839 5.32215 58.0712 4.94289 57.6924C4.56363 57.3135 4.35041 56.7995 4.35013 56.2634C4.34985 55.7274 4.56253 55.2131 4.94139 54.8339L18.3564 41.4189C18.7353 41.04 19.2491 40.8272 19.7849 40.8272C20.3207 40.8272 20.8345 41.04 21.2134 41.4189C21.5923 41.7977 21.8051 42.3116 21.8051 42.8474C21.8051 43.3832 21.5923 43.897 21.2134 44.2759ZM3.49139 44.7839C3.30378 44.5963 3.15495 44.3736 3.05341 44.1285C2.95187 43.8834 2.89961 43.6207 2.89961 43.3554C2.89961 43.0901 2.95187 42.8274 3.05341 42.5823C3.15495 42.3371 3.30378 42.1144 3.49139 41.9269L8.78439 36.6339C9.16326 36.255 9.6771 36.0422 10.2129 36.0422C10.7487 36.0422 11.2625 36.255 11.6414 36.6339C12.0203 37.0127 12.2331 37.5266 12.2331 38.0624C12.2331 38.5982 12.0203 39.112 11.6414 39.4909L6.34939 44.7839C6.1618 44.9716 5.93903 45.1206 5.69384 45.2222C5.44864 45.3238 5.18582 45.3762 4.92039 45.3762C4.65497 45.3762 4.39215 45.3238 4.14695 45.2222C3.90176 45.1206 3.67899 44.9716 3.49139 44.7839ZM26.0014 50.9899C26.189 51.1774 26.3378 51.4001 26.4394 51.6453C26.5409 51.8904 26.5932 52.1531 26.5932 52.4184C26.5932 52.6837 26.5409 52.9464 26.4394 53.1915C26.3378 53.4366 26.189 53.6593 26.0014 53.8469L20.7014 59.1409C20.3225 59.5197 19.8087 59.7326 19.2729 59.7326C18.7371 59.7326 18.2233 59.5197 17.8444 59.1409C17.4655 58.762 17.2527 58.2482 17.2527 57.7124C17.2527 57.1766 17.4655 56.6627 17.8444 56.2839L23.1374 50.9909C23.325 50.8032 23.5477 50.6544 23.7928 50.5529C24.0379 50.4513 24.3006 50.3991 24.5659 50.3991C24.8312 50.3991 25.0939 50.4513 25.339 50.5529C25.5841 50.6544 25.8068 50.8032 25.9944 50.9909L26.0014 50.9899Z\"\r\n            fill=\"#8E9AA0\" />\r\n          <path\r\n            d=\"M58.0015 75.3119C69.0472 75.3119 78.0015 66.3576 78.0015 55.3119C78.0015 44.2662 69.0472 35.3119 58.0015 35.3119C46.9558 35.3119 38.0015 44.2662 38.0015 55.3119C38.0015 66.3576 46.9558 75.3119 58.0015 75.3119Z\"\r\n            fill=\"#00C48C\" />\r\n          <path\r\n            d=\"M56.8804 57.3183L54.0346 54.4725L52.9743 55.5336L56.8774 59.4367L65.8354 50.5267L65.4927 50.0138C63.8557 47.5812 61.1134 46.002 58.0015 46.002C53.0313 46.002 49.0015 50.031 49.0015 55.002C49.0015 59.9729 53.0305 64.002 58.0015 64.002C62.9716 64.002 67.0007 59.9729 67.0015 55.0035H65.5017C65.5017 55.005 65.5017 55.0072 65.5017 55.0095C65.5017 59.1503 62.1453 62.5067 58.0045 62.5067C53.8637 62.5067 50.5072 59.1503 50.5072 55.0095C50.5072 50.8686 53.8637 47.5122 58.0045 47.5122C60.3793 47.5122 62.4962 48.6168 63.87 50.3392L63.882 50.3542L56.8804 57.3183Z\"\r\n            fill=\"white\" />\r\n        </svg>\r\n\r\n      </div>\r\n      <h2 class=\"fs-16 fw-medium fc-black mb-4 text-center\">\r\n        {{i18n.translate('submittedSuccessfully')}}\r\n      </h2>\r\n    </div>\r\n\r\n    <ng-container *ngIf=\"!submitted\">\r\n      <div class=\"mb-3\" *ngIf=\"feedBackService.feedbackForm \">\r\n        <app-search-employee #employee label=\"{{i18n.translate('requestTo')}}\" [field]=\"searchEmp\"\r\n          [labelTextReadMode]=\"i18n.translate('requestTo')\" [labelTextWriteMode]=\"i18n.translate('requestTo')\"\r\n          [name]=\"'searchEmp'\" (emitedValue)=\"handleUserSelected($event)\">\r\n        </app-search-employee>\r\n        <app-textarea #request [field]=\"employeeInput\" name=\"employeeInput\" label=\"{{i18n.translate('feedback')}}\"\r\n          [required]=\"true\" [minLength]='1' (emitedValue)=\"handleFeedbackQuestion($event)\" [maxLength]='500'\r\n          [errorMessage]=\"i18n.translate('lenghtMin1Max500')\">\r\n        </app-textarea>\r\n      </div>\r\n\r\n      <div class=\"info-section\" *ngIf=\"!feedBackService.feedbackForm\">\r\n        <ng-container *ngIf=\"feedBackService.responderForm\">\r\n          <app-info-item class=\"info-item w-100\" label=\"{{i18n.translate('requestFrom')}}\"\r\n            value=\"{{feedBackService?.feedbackResponse?.requestFrom}}\"></app-info-item>\r\n          <app-info-item class=\"info-item w-100\" label=\"{{i18n.translate('requestTo')}}\"\r\n            value=\"{{feedBackService?.feedbackResponse?.requestTo}}\"></app-info-item>\r\n          <app-info-item class=\"info-item w-100\" label=\"{{i18n.translate('feedbackQuestion')}}\"\r\n            value=\"{{feedBackService?.feedbackResponse?.requestFeedback}}\"></app-info-item>\r\n          <app-info-item class=\"info-item w-100\" label=\"{{i18n.translate('feedback')}}\"\r\n            value=\"{{feedBackService?.feedbackResponse?.responseFeedback}}\"></app-info-item>\r\n          <app-textarea #request class=\"full mx-3 mt-3 section-item\" [field]=\"employeeInput\" name=\"employeeInput\"\r\n            label=\"{{i18n.translate('feedback')}}\" [required]=\"true\" [minLength]='1'\r\n            (emitedValue)=\"handleFeedbackResponse($event)\" [maxLength]='500'\r\n            [errorMessage]=\"i18n.translate('lenghtMin1Max500')\">\r\n          </app-textarea>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"feedBackService.pendingForm\" id=\"responce_form\">\r\n          <app-info-item class=\"info-item w-100\" label=\"{{i18n.translate('requestFrom')}}\"\r\n            value=\"{{feedBackService?.feedbackResponse?.requestFrom}}\"></app-info-item>\r\n          <app-info-item class=\"info-item w-100\" label=\"{{i18n.translate('requestTo')}}\"\r\n            value=\"{{feedBackService?.feedbackResponse?.requestTo}}\"></app-info-item>\r\n          <app-info-item class=\"info-item w-100\" label=\"{{i18n.translate('feedbackQuestion')}}\"\r\n            value=\"{{feedBackService?.feedbackResponse?.requestFeedback}}\"></app-info-item>\r\n          <app-info-item class=\"info-item w-100\" label=\"{{i18n.translate('feedback')}}\"\r\n            value=\"{{feedBackService?.feedbackResponse?.responseFeedback}}\"></app-info-item>\r\n\r\n        </ng-container>\r\n      </div>\r\n\r\n      <div class=\"d-flex align-items-center justify-content-center w-100 gap-3\" *ngIf=\"!submitted\">\r\n        <ds-button shape=\"outline\" matDialogClose>\r\n          {{i18n.translate('Cancel')}}\r\n        </ds-button>\r\n        <ds-button *ngIf=\"feedBackService.feedbackForm\" (click)=\"addFeedback()\"\r\n          disabled=\"{{!(isFeedbackValidated)}}\">\r\n          {{i18n.translate('submit')}}\r\n        </ds-button>\r\n        <ds-button *ngIf=\"!feedBackService.feedbackForm && feedBackService.responderForm\"\r\n          disabled=\"{{!(isResponseValidated)}}\" (click)=\"addResponse()\">\r\n          {{i18n.translate('submit')}}\r\n        </ds-button>\r\n      </div>\r\n    </ng-container>\r\n\r\n  </mat-dialog-content>\r\n\r\n</div>\r\n", styles: ["::ng-deep .main-popup{--popup-max-width: 700px !important;--popup-width: 100% !important}\n"], dependencies: [{ kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SearchEmployeeComponent, selector: "app-search-employee", inputs: ["valueName", "className", "optional", "data", "floatLabel", "error", "showEdit", "arrayList", "isUniqueUsers"], outputs: ["selectedEmp", "onInputChange", "editDirectManger", "deleteDirectManger", "emitedDeletedValue"] }, { kind: "component", type: TextareaComponent, selector: "app-textarea", inputs: ["className", "preventSpecailChar", "maxLength"] }, { kind: "component", type: InfoItemComponent, selector: "app-info-item", inputs: ["label", "value", "name", "type", "dateType", "multiple", "insideTable", "hasLabel", "arrayList", "actionType", "download"] }, { kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: FeedbackSectionComponent, decorators: [{
             type: Component,
@@ -7471,11 +7466,11 @@ class RequestDetailsSectionComponent {
     ngOnInit() {
         this.createForm();
         let data = this.section.body.details;
-        for (const key in data) {
-            if (key !== 'decision') {
-                this.formGroup.patchValue({ [key]: data[key] });
-            }
-        }
+        // for (const key in data) {
+        //   if (key !== 'decision') {
+        //     this.formGroup.patchValue({[key]: data[key]});
+        //   }
+        // }
         // this.initializeTableConfig()
         /*    this.formGroup.get('checkbox').valueChanges.subscribe(res=> {
               if (res){
@@ -7557,9 +7552,9 @@ class RequestDetailsSectionComponent {
             // currencyInput: 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),
+            customSearchable: new FormControl(null, Validators.required),
             // checkbox: new FormControl(null, [Validators.requiredTrue, Validators.required]),
-            // textArea: new FormControl(null, [Validators.required, Validators.maxLength(5)]),
+            textArea: new FormControl('defaultText', [Validators.required, Validators.maxLength(5)]),
             // datePicker: new FormControl(null, Validators.required),
             // datePickerRange: new FormControl(null, Validators.required),
             // radio: new FormControl(null, Validators.required),
@@ -7598,15 +7593,16 @@ class RequestDetailsSectionComponent {
         //   attachment: new FormControl(null),
         //   attachmentSection: new FormControl([]),
         // });
-        this.formGroup.setValue(this.section.body.details);
+        // this.formGroup.setValue(this.section.body.details);
         //   console.log(this.section.body.detils);
         //   console.log(this.lov?.['approverActions']?.options)
         this.formGroup.valueChanges.subscribe(value => {
-            this.lov?.['decision']?.options?.forEach(option => {
-                let isActionValid = this.checkValidity(option.value);
-                this.actionStateService.setActionValid(option.value, isActionValid);
-                this.section.body.details = { ...this.section.body.details, ...this.formGroup.value };
-            });
+            console.log(value.textArea);
+            // this.lov?.['decision']?.options?.forEach(option => {
+            //   let isActionValid = this.checkValidity(option.value);
+            //   this.actionStateService.setActionValid(option.value, isActionValid);
+            //   this.section.body.details = {...this.section.body.details, ...this.formGroup.value};
+            // })
         });
     }
     //   this.formGroup.valueChanges.subscribe(value => {
@@ -7646,6 +7642,7 @@ class RequestDetailsSectionComponent {
     //   this.formGroup.setValue(this.section.body.details);
     //   console.log('customCallSubmit', this.formGroup.value)
     // }
+    textArea = 'testtt';
     editAsset(asset) {
         console.log(asset);
     }
@@ -7661,6 +7658,7 @@ class RequestDetailsSectionComponent {
     deleteAsset(asset) {
         console.log(asset);
     }
+    log(d) { console.log(d); }
     formValue(form) {
         console.log(form.value);
     }
@@ -7691,7 +7689,7 @@ class RequestDetailsSectionComponent {
         this.pageSize = event.pageSize;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", 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: "19.2.1", 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-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<!--    {{formGroup.valid}}-->\r\n<!--    <app-input class=\"section-item full\" [isReadOnly]=\"false\" [mandatory]=\"true\" [loading]=\"true\" type=\"enOnly\" formControlName=\"input\" label=\"Input\"></app-input>-->\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    <!--\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\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?.['decision']?.options\"\r\n      label=\"Toggle-button\"\r\n      [displayedLabel]=\"'description'\"\r\n      [key]=\"'value'\"></app-toggle-button>-->\r\n    <!--<app-input-telephone class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"telephone\" label=\"Telephone\"></app-input-telephone>\r\n\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\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\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<!--      <app-datepicker\r\n      class=\"section-item full\"\r\n      [isReadOnly]=\"false\"\r\n      formControlName=\"datePicker\"\r\n      [matSuffix]=\"true\"\r\n      label=\"Date-picker\"></app-datepicker>-->\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: 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: 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: "19.2.1", 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-textarea \r\n  class=\"section-item full\" [isReadOnly]=\"isReadOnly\" \r\n  formControlName=\"textArea\" \r\n  label=\"Text-area\"></app-textarea>\r\n<!-- <app-textarea \r\n  class=\"section-item full\" [isReadOnly]=\"isReadOnly\" \r\n  [(ngModel)]=\"textArea\" (ngModelChange)=\"log($event)\"\r\n   [ngModelOptions]=\"{standalone: true}\" [required]=\"true\"\r\n  label=\"Text-area\"></app-textarea> -->\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\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<!--    {{formGroup.valid}}-->\r\n<!--    <app-input class=\"section-item full\" [isReadOnly]=\"false\" [mandatory]=\"true\" [loading]=\"true\" type=\"enOnly\" formControlName=\"input\" label=\"Input\"></app-input>-->\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    <!--\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\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?.['decision']?.options\"\r\n      label=\"Toggle-button\"\r\n      [displayedLabel]=\"'description'\"\r\n      [key]=\"'value'\"></app-toggle-button>-->\r\n    <!--<app-input-telephone class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"telephone\" label=\"Telephone\"></app-input-telephone>\r\n\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\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\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<!--      <app-datepicker\r\n      class=\"section-item full\"\r\n      [isReadOnly]=\"false\"\r\n      formControlName=\"datePicker\"\r\n      [matSuffix]=\"true\"\r\n      label=\"Date-picker\"></app-datepicker>-->\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: 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: TextareaComponent, selector: "app-textarea", inputs: ["className", "preventSpecailChar", "maxLength"] }, { kind: "ngmodule", type: FormsModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: RequestDetailsSectionComponent, decorators: [{
             type: Component,
@@ -7715,8 +7713,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                         SearchEmployeeComponent,
                         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-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<!--    {{formGroup.valid}}-->\r\n<!--    <app-input class=\"section-item full\" [isReadOnly]=\"false\" [mandatory]=\"true\" [loading]=\"true\" type=\"enOnly\" formControlName=\"input\" label=\"Input\"></app-input>-->\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    <!--\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\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?.['decision']?.options\"\r\n      label=\"Toggle-button\"\r\n      [displayedLabel]=\"'description'\"\r\n      [key]=\"'value'\"></app-toggle-button>-->\r\n    <!--<app-input-telephone class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"telephone\" label=\"Telephone\"></app-input-telephone>\r\n\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\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\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<!--      <app-datepicker\r\n      class=\"section-item full\"\r\n      [isReadOnly]=\"false\"\r\n      formControlName=\"datePicker\"\r\n      [matSuffix]=\"true\"\r\n      label=\"Date-picker\"></app-datepicker>-->\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"] }]
+                        TranslatePipe,
+                        FormsModule
+                    ], 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-textarea \r\n  class=\"section-item full\" [isReadOnly]=\"isReadOnly\" \r\n  formControlName=\"textArea\" \r\n  label=\"Text-area\"></app-textarea>\r\n<!-- <app-textarea \r\n  class=\"section-item full\" [isReadOnly]=\"isReadOnly\" \r\n  [(ngModel)]=\"textArea\" (ngModelChange)=\"log($event)\"\r\n   [ngModelOptions]=\"{standalone: true}\" [required]=\"true\"\r\n  label=\"Text-area\"></app-textarea> -->\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\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<!--    {{formGroup.valid}}-->\r\n<!--    <app-input class=\"section-item full\" [isReadOnly]=\"false\" [mandatory]=\"true\" [loading]=\"true\" type=\"enOnly\" formControlName=\"input\" label=\"Input\"></app-input>-->\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    <!--\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\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?.['decision']?.options\"\r\n      label=\"Toggle-button\"\r\n      [displayedLabel]=\"'description'\"\r\n      [key]=\"'value'\"></app-toggle-button>-->\r\n    <!--<app-input-telephone class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"telephone\" label=\"Telephone\"></app-input-telephone>\r\n\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\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\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<!--      <app-datepicker\r\n      class=\"section-item full\"\r\n      [isReadOnly]=\"false\"\r\n      formControlName=\"datePicker\"\r\n      [matSuffix]=\"true\"\r\n      label=\"Date-picker\"></app-datepicker>-->\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: [{
@@ -7783,7 +7782,7 @@ class GeneralApproverSectionComponent {
         this.fieldsForm.reset();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: GeneralApproverSectionComponent, deps: [{ token: CoreI18nService }, { token: i4.FormBuilder }, { token: ActionStateService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: GeneralApproverSectionComponent, isStandalone: true, selector: "app-general-approver-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}\"\r\n    [formGroup]=\"formGroup\">\r\n\r\n    <app-textarea class=\"section-item\" formControlName=\"comment\" [label]=\"'comment'\" [required]=\"false\"\r\n      [isReadOnly]=\"section?.header?.readOnly\">\r\n    </app-textarea>\r\n\r\n  </form>\r\n</div>\r\n\r\n\r\n@if (!section?.header?.readOnly) {\r\n<div class=\"mt-4\">\r\n  <lib-action-buttons [lovOptions]=\"lov?.['decision']?.options\" [lovType]=\"lov?.['decision']?.type\" [section]=\"section\"\r\n    [form]=\"form\" [sections]=\"form.sections\" [showApprovalCycle]=\"true\" [customCall]=\"false\" [fieldsForm]=\"formGroup\"\r\n    (customCallEmit)=\"customCallSubmit($event)\" (resetFormEmit)=\"resetForm()\" />\r\n</div>\r\n}\r\n", styles: [".form-section-divide{--form-section-columns: 1fr 1fr}@media (max-width: 756px){.form-section-divide{--form-section-columns: 100%}}.form-section-divide .full{grid-column:1/-1}.head-title{position:relative;margin-bottom:12px}.head-title h3{display:inline-block;color:#8e9aa0;font-size:14px;font-weight:500;background-color:#fff;padding-inline-end:20px;position:relative;z-index:2;margin:0}.head-title:after{content:\"\";position:absolute;width:100%;height:1px;background-color:#dee0e2;top:50%;left:0;right:0;transform:translateY(-50%);z-index:1}.chamber{margin-bottom:20px}.chamber .chamber-content{background-color:#f8f8f8;padding:20px}.chamber .chamber-content .chamber-select{display:flex}.chamber .chamber-content mat-checkbox{font-size:14px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: 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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { 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: TextareaComponent, selector: "app-textarea", inputs: ["className", "preventSpecailChar"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: GeneralApproverSectionComponent, isStandalone: true, selector: "app-general-approver-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}\"\r\n    [formGroup]=\"formGroup\">\r\n\r\n    <app-textarea class=\"section-item\" formControlName=\"comment\" [label]=\"'comment'\" [required]=\"false\"\r\n      [isReadOnly]=\"section?.header?.readOnly\">\r\n    </app-textarea>\r\n\r\n  </form>\r\n</div>\r\n\r\n\r\n@if (!section?.header?.readOnly) {\r\n<div class=\"mt-4\">\r\n  <lib-action-buttons [lovOptions]=\"lov?.['decision']?.options\" [lovType]=\"lov?.['decision']?.type\" [section]=\"section\"\r\n    [form]=\"form\" [sections]=\"form.sections\" [showApprovalCycle]=\"true\" [customCall]=\"false\" [fieldsForm]=\"formGroup\"\r\n    (customCallEmit)=\"customCallSubmit($event)\" (resetFormEmit)=\"resetForm()\" />\r\n</div>\r\n}\r\n", styles: [".form-section-divide{--form-section-columns: 1fr 1fr}@media (max-width: 756px){.form-section-divide{--form-section-columns: 100%}}.form-section-divide .full{grid-column:1/-1}.head-title{position:relative;margin-bottom:12px}.head-title h3{display:inline-block;color:#8e9aa0;font-size:14px;font-weight:500;background-color:#fff;padding-inline-end:20px;position:relative;z-index:2;margin:0}.head-title:after{content:\"\";position:absolute;width:100%;height:1px;background-color:#dee0e2;top:50%;left:0;right:0;transform:translateY(-50%);z-index:1}.chamber{margin-bottom:20px}.chamber .chamber-content{background-color:#f8f8f8;padding:20px}.chamber .chamber-content .chamber-select{display:flex}.chamber .chamber-content mat-checkbox{font-size:14px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: 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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { 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: TextareaComponent, selector: "app-textarea", inputs: ["className", "preventSpecailChar", "maxLength"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: GeneralApproverSectionComponent, decorators: [{
             type: Component,
@@ -7969,6 +7968,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                     args: [PLATFORM_ID]
                 }] }] });
 
+var loadForm = {
+    beforeTranspilePayload(payload) {
+        const hookResult = payload;
+        // Here should be the code to manipulate the payload before the transpile stage
+        return hookResult;
+    },
+    afterTranspilePayload(form) {
+        const hookResult = form;
+        // Here should be the code to manipulate the form object after the transpile stage
+        return hookResult;
+    }
+};
+
 function encodePassword(formId, password) {
     const formIdString = Array.from(new TextEncoder().encode(formId), (x) => String.fromCodePoint(x)).join('');
     let encodedFormId = btoa(formIdString);
@@ -7983,46 +7995,194 @@ function encodePassword(formId, password) {
     return newPassword;
 }
 
-const dataTypes = {
-    string: {
-        verifyDataType: (value) => typeof value === 'string',
-        isValid: (value) => !!value
-    },
-    attachmentsList: {
-        verifyDataType: (value) => Array.isArray(value) && value.every(item => (typeof item === 'object') && ('fileName' in item)),
-        isValid: (value) => !!value.length
-    },
-    select: {
-        verifyDataType: (value) => (typeof value === 'object') && ('key' in value),
-        isValid: (value) => (typeof value === 'object') && !!value.key
-    },
-    employee: {
-        verifyDataType: (value) => (typeof value === 'object') && ('personName' in value) && ('personEmail' in value),
-        isValid: (value) => (typeof value === 'object') && !!value.personName && !!value.personEmail
-    },
-    singleAttachment: {
-        verifyDataType: (value) => (typeof value === 'object') && ('fileName' in value) && ('mimeType' in value),
-        isValid: (value) => (typeof value === 'object') && !!value.fileName && !!value.mimeType
+const ACTION_ERROR_SUFFIX = '_ACTION';
+class ManageActionErrors {
+    /*
+      action error structure
+      {error_key}_{action_name}ACTION_ERROR_SUFFIX
+      e.g. required_REJECT_ACTION
+    */
+    hasActionError(errors, action) {
+        if (!errors)
+            return false;
+        return !!Object.keys(errors).filter(key => key.endsWith(`${action}${ACTION_ERROR_SUFFIX}`)).length;
+    }
+    hasOtherError(errors) {
+        if (!errors)
+            return false;
+        const actionErrorKeys = this.getActionErrorKeys(errors);
+        const allErrorKeys = this.getAllErrorKeys(errors);
+        if (actionErrorKeys.size === allErrorKeys.size)
+            return false;
+        return true;
+    }
+    getActionErrorKeys(errors) {
+        return new Set(
+        //required_REJECT_ACTION => required
+        Object.keys(errors).filter(actionKey => actionKey.endsWith(ACTION_ERROR_SUFFIX)).map(key => key.split('_')[0]));
+    }
+    getAllErrorKeys(errors) {
+        return new Set(Object.keys(errors).filter(key => !key.endsWith(ACTION_ERROR_SUFFIX)));
+    }
+    addActionError(actions, errors) {
+        const actionErrors = {};
+        actions.forEach(action => {
+            for (let key in errors) {
+                actionErrors[`${key}_${action}${ACTION_ERROR_SUFFIX}`] = errors[key];
+            }
+        });
+        return { ...errors, ...actionErrors };
+    }
+}
+/**
+ * Checks if the form group is valid for a specific action.
+ * You should use this function to check form validity if you use `validateIfAction` function.
+ * @param action The action to check against.
+ * @param formGroup The form group or form array to validate.
+ * @returns {boolean} True if all controls are valid for the action, false otherwise.
+ */
+function isValidForAction(action, formGroup) {
+    return Object.entries(formGroup.controls).every(([controlName, control]) => {
+        if (control instanceof FormGroup || control instanceof FormArray) {
+            return isValidForAction(action, control);
+        }
+        const errors = control.errors;
+        if (!errors)
+            return true;
+        const invalidAction = new ManageActionErrors().hasActionError(errors, action);
+        if (invalidAction)
+            return false;
+        const hasOtherError = new ManageActionErrors().hasOtherError(errors);
+        if (hasOtherError)
+            return false;
+        return true;
+    });
+}
+/**
+ * Updates the value and validity of all controls.
+ * Use this function when your validators depend on the values of other controls.
+ * @param formGroup The FormGroup or FormArray to update.
+ * @returns {void}
+ */
+function updateValueAndValidity(formGroup) {
+    Object.values(formGroup.controls).forEach((control) => {
+        if (control instanceof FormGroup || control instanceof FormArray) {
+            updateValueAndValidity(control);
+        }
+        else {
+            control.updateValueAndValidity({ emitEvent: false });
+        }
+    });
+}
+/**
+ * Validates a control only when a certain condition is met.
+ * @param condition A function that returns a boolean indicating whether to apply the validator.
+ * @param validator A single ValidatorFn or an array of ValidatorFns to apply if the condition is true.
+ * @returns {ValidatorFn} A ValidatorFn that applies the given validator only when the condition is true.
+ */
+function validateOnlyWhen(condition, validator) {
+    return (control) => {
+        if (condition()) {
+            return Array.isArray(validator) ? Validators.compose(validator)(control) : validator(control);
+        }
+        return null;
+    };
+}
+/**
+ * Validates a control if the current action is one of the specified actions.
+ * @param actions An array of action names to check against.
+ * @param validator A single ValidatorFn or an array of ValidatorFns to apply if the current action matches one of the actions.
+ * @returns {ValidatorFn} A ValidatorFn that applies the given validator only if the current action is one of the specified actions.
+ * */
+function validateIfAction(actions, validator) {
+    return (control) => {
+        const output = Array.isArray(validator) ? Validators.compose(validator)(control) : validator(control);
+        if (output) {
+            return new ManageActionErrors().addActionError(actions, output);
+        }
+        return null;
+    };
+}
+/**
+ * Logs the status of all controls in a FormGroup.
+ * It traverses the form structure and logs whether each control is valid or invalid.
+ * @param formGroup The FormGroup to log the status of.
+ * @returns {void} This function does not return anything, it logs the status to the console.
+ */
+function logFormStatus(formGroup) {
+    const stack = [{ controls: formGroup.controls, path: '' }];
+    const status = {
+        all: {},
+        valid: {},
+        invalid: {}
+    };
+    while (stack.length) {
+        const { controls, path } = stack.pop();
+        for (const key in controls) {
+            const control = controls[key];
+            const newPath = path ? `${path}.${key}` : key;
+            if (control instanceof FormGroup) {
+                stack.push({ controls: control.controls, path: newPath });
+            }
+            else if (control instanceof FormArray) {
+                const formArrayControlsAsObj = control.controls.reduce((prev, current, index) => {
+                    prev[index] = current;
+                    return prev;
+                }, {});
+                stack.push({ controls: formArrayControlsAsObj, path: newPath });
+            }
+            else {
+                status.all[newPath] = control.valid;
+                if (control.valid)
+                    status.valid[newPath] = control.valid;
+                else
+                    status.invalid[newPath] = control.valid;
+            }
+        }
+    }
+    console.log(status);
+}
+/**
+ * A collection of custom validators for various data types.
+ */
+class DataValidators {
+    /**
+     * Validates that the control's value is a valid employee object.
+     */
+    static employeeRequired(control) {
+        if (control.value?.personEmail)
+            return null;
+        return { required: true };
+    }
+    /**
+     * Validates that the control's value is a valid attachment object.
+     */
+    static fileUploaderRequired(control) {
+        if (control.value?.attachmentId)
+            return null;
+        return { required: true };
+    }
+    /**
+     * Validates that the control's value is a valid attachments list.
+     */
+    static multiFileUploaderRequired(control) {
+        if (!Array.isArray(control.value))
+            return { required: true };
+        if (!control.value.length)
+            return { required: true };
+        if (control.value.every(item => item.attachmentId))
+            return null;
+        return { required: true };
+    }
+    /**
+     * Validates that the control's value is a valid select object.
+     * The select object should have a 'key' property.
+     */
+    static selectRequired(control) {
+        if (control.value?.key)
+            return null;
+        return { required: true };
     }
-};
-function isValidData(data) {
-    if (data === undefined || data === null)
-        return false;
-    let requiredKey;
-    //get current data type
-    for (let item of Object.entries(dataTypes)) {
-        const type = item[0]; //string or attachmentsList or select ...
-        const verifyDataTypeFn = item[1].verifyDataType;
-        if (verifyDataTypeFn(data)) {
-            requiredKey = type;
-            break;
-        }
-    }
-    if (!requiredKey) {
-        throw Error('data type is not found');
-    }
-    //check if the current data type is valid
-    return dataTypes[requiredKey].isValid(data);
 }
 
 function handelErrorResponse(obj, errorMsgs) {
@@ -8047,98 +8207,6 @@ function dataURItoBlob(dataURI, mimeType) {
 }
 ;
 
-class FormValidation {
-    validators;
-    constructor(validators) {
-        this.validators = validators;
-    }
-    isFormValidForAction(section, action) {
-        return Object.entries(this.validators)
-            .every(([fieldName, fieldValidators]) => fieldValidators.every(fn => fn(fieldName, section, action) === null));
-    }
-    logFormControlsValidationStatus(section, action) {
-        console.log(Object.entries(this.validators).map(([fieldName, fieldValidators]) => {
-            const isValid = fieldValidators.every(fn => fn(fieldName, section, action) === null);
-            return { [fieldName]: fieldValidators.map(fn => fn(fieldName, section, action)), isValid };
-        }));
-    }
-}
-class BuiltInCustomValidators {
-    static required(fieldName, section, action) {
-        const value = section.body.details[fieldName];
-        if (isValidData(value))
-            return null;
-        return { required: true };
-    }
-    static requiredIfAction(action) {
-        return (fieldName, section, currentAction) => {
-            if (action.includes(currentAction)) {
-                return BuiltInCustomValidators.required(fieldName, section, currentAction);
-            }
-            return null;
-        };
-    }
-    static requiredOnlyWhen(conditionFn) {
-        return (fieldName, section, currentAction) => {
-            if (conditionFn()) {
-                return BuiltInCustomValidators.required(fieldName, section, currentAction);
-            }
-            return null;
-        };
-    }
-    static maxLength(max) {
-        return (fieldName, section, currentAction) => {
-            const value = section.body?.details?.[fieldName];
-            if (!value)
-                return null;
-            if (value.length > max)
-                return { maxLength: 'required', required: max };
-            return null;
-        };
-    }
-    static minLength(min) {
-        return (fieldName, section, currentAction) => {
-            const value = section.body?.details?.[fieldName];
-            if (!value)
-                return null;
-            if (value.length < min)
-                return { minLength: 'required', required: min };
-            return null;
-        };
-    }
-    static ifAction(actions, validators) {
-        return validators.map(fn => {
-            return (fieldName, section, currentAction) => {
-                if (!actions.includes(currentAction))
-                    return null;
-                return fn(fieldName, section, currentAction);
-            };
-        });
-    }
-    static validateOnlyWhen(conditionFn, validators) {
-        return validators.map(fn => {
-            return (fieldName, section, currentAction) => {
-                if (conditionFn())
-                    return fn(fieldName, section, currentAction);
-                return null;
-            };
-        });
-    }
-}
-
-var loadForm = {
-    beforeTranspilePayload(payload) {
-        const hookResult = payload;
-        // Here should be the code to manipulate the payload before the transpile stage
-        return hookResult;
-    },
-    afterTranspilePayload(form) {
-        const hookResult = form;
-        // Here should be the code to manipulate the form object after the transpile stage
-        return hookResult;
-    }
-};
-
 /* eslint-disable @typescript-eslint/no-explicit-any */
 function validateSAID() {
     if (this?.personalInfoFormTemp) {
@@ -8301,5 +8369,5 @@ const MY_LIB_CONFIG_TOKEN = new InjectionToken('MyLibConfig');
  * Generated bundle index. Do not edit.
  */
 
-export { APPROVERS, ActionButtonsComponent, ActionStateService, AttachmentSectionComponent, AttachmentSectionDataComponent, BaseComponent, BuiltInCustomValidators, COMMENT_CONTAINER, CheckBoxComponent, CommentsDrop, ConfirmDialogComponent, CoreAppComponent, CoreI18nService, CoreService, CustomSearchableComponent, DATE_DASH, DATE_SLASH, DATE_TIME, DONT_SHOW, DatePickerComponent, DateRangePickerComponent, DeleteDialogComponent, DocsUploaderComponent, FALSE_BOOL, FALSE_STRING, FEEDBACK_CONTAINER, FEEDBACK_STATUS_REQUEST, FEEDBACK_STATUS_RESPOND, FEEDBACK_STATUS_RESPONDED, FEEDBACK_STATUS_WAITING, FORM_STATUS_APPROVE, FORM_STATUS_APPROVED, FORM_STATUS_CANCEL, FORM_STATUS_CANCELLED, FORM_STATUS_COMPLETED, FORM_STATUS_NEW, FORM_STATUS_PENDING, FORM_STATUS_REJECT, FORM_STATUS_REJECTED, FORM_STATUS_SEND_BACK, FeedBackService, FeedbackSectionComponent, Form, FormLabelComponent, FormSectionComponent, FormValidation, FormatAsPasswordPipe, FormatTimePipe, GETSIPORTENTRYGROUPS, GETSIPORTENTRYLOCATIONS, HAS_COMMENTS, HEADER_CONTENT_TYPE_FORM, HTTP_METHOD_GET, HTTP_METHOD_POST, HTTP_METHOD_PUT, HTTP_PROTOCOL_HTTP, HTTP_PROTOCOL_HTTPS, Header, IGATE_STATIC_ASSET_PROFILE_PHOTO_URL, INBOX_STATUS_PENDING, INBOX_STATUS_PROCESSED, INBOX_STATUS_SENT, InboxItem, InfoItemComponent, InputComponent, InputCurrencyComponent, InputEmailComponent, InputMaskComponent, InputNumberComponent, InputTelephoneComponent, LANGUAGE_CODE_AR, LANGUAGE_CODE_EN, LOGOUT_URL, LayoutComponent, MY_LIB_CONFIG_TOKEN, MainRequestDetailsComponent, Messages, MycurrencyPipe, NO_COMMENTS, NO_VALUE, PROCESS_NAME_CODE, PROFILE_CONTAINER, ProfileInfoDrop, ProfileSectionComponent, READ_ONLY, REPORT, ROLE_REQUESTER, RadioComponent, RegexPatterns, RepeatedListComponent, SECTION_ID_APPROVAL_PARTIAL_NAME, SECTION_ID_DM_PARTIAL_ROLE, SECTION_ID_EMP_INFO_APPROVAL_PARTIAL_ROLE, SECTION_ID_EXECUTE_PARTIAL_ROLE, SECTION_ID_GM_PARTIAL_ROLE, SECTION_ID_NOTHING_PARTIAL_NAME, SECTION_ID_PAYROLL_APPROVAL_PARTIAL_ROLE, SECTION_ID_PERFORM_PARTIAL_ROLE, SECTION_ID_REQUESTER_PARTIAL_NAME, SECTION_ID_REQUEST_DETAILS, SECTION_ID_SM_PARTIAL_ROLE, SECTION_ID_SVP_PARTIAL_ROLE, SECTION_ID_VP_PARTIAL_ROLE, SECTION_STATUS_APPROVED, SECTION_STATUS_PENDING, SECTION_STATUS_UNSATISFIED, SERVICE_NAME_CEP, SERVICE_NAME_DP_CREATE_FEEDBACK, SERVICE_NAME_DP_INBOX_ITEM, SERVICE_NAME_DP_LOAD_HISTORY, SERVICE_NAME_DP_SEARCH_EMPLOYEE, SERVICE_NAME_DP_UPDATE_FEEDBACK, SERVICE_NAME_DP_UPDATE_INBOX_ITEM, SERVICE_NAME_MAF, SERVICE_NAME_WM_CHILD_FORM, SERVICE_NAME_WM_DRAFT_FORM, SERVICE_NAME_WM_FORM, SERVICE_NAME_WM_GET_APPROVED_REQUEST, SERVICE_NAME_WM_GET_MY_APPROVED_REQUEST, SERVICE_NAME_WM_HTML_GENERATOR, STATE_MACHINE_ACTION_CALC, STATE_MACHINE_ACTION_COMMONAPI, STATE_MACHINE_ACTION_CONVERT, STATE_MACHINE_ACTION_EMPLOYEE_PROFILE, STATE_MACHINE_ACTION_FAILURE, STATE_MACHINE_ACTION_GET_APPROVED_REQUEST, STATE_MACHINE_ACTION_GET_APPROVED_REQUEST_RESPONSE, STATE_MACHINE_ACTION_GET_FEEDBACK, STATE_MACHINE_ACTION_GET_INBOX_ITEM, STATE_MACHINE_ACTION_HANDLE_ERROR, STATE_MACHINE_ACTION_INBOX_ITEM_RESPONSE, STATE_MACHINE_ACTION_LOAD_FILE, STATE_MACHINE_ACTION_LOAD_FORM, STATE_MACHINE_ACTION_LOAD_HISTORY, STATE_MACHINE_ACTION_PDF, STATE_MACHINE_ACTION_PPROVED_REQUESTS, STATE_MACHINE_ACTION_PROJECT_CEP, STATE_MACHINE_ACTION_PROJECT_MAF, STATE_MACHINE_ACTION_SEARCH, STATE_MACHINE_ACTION_SEARCH_EMPLOYEE, STATE_MACHINE_ACTION_SET_FLAG, STATE_MACHINE_ACTION_SHOW_PRINT, STATE_MACHINE_ACTION_SUBMIT_FEEDBACK, STATE_MACHINE_ACTION_SUBMIT_FORM, STATE_MACHINE_ACTION_SUCCESS, STATE_MACHINE_ACTION_SUCCESS_HISTORY, STATE_MACHINE_ACTION_SUCCESS_INBOX_ITEM, STATE_MACHINE_ACTION_SUCCESS_PRINT, STATE_MACHINE_ACTION_SUCCESS_RESPONSE, STATE_MACHINE_ACTION_SUCCESS_SERVICES, STATE_MACHINE_ACTION_SUCCESS_USERS, STATE_MACHINE_ACTION_SUCCESS_WM, STATE_MACHINE_ACTION_UPDATE_FEEDBACK, STATE_MACHINE_ACTION_USER_CEP, STATE_MACHINE_ACTION_USER_MAF, STATE_MACHINE_STATUS_ERROR, STATE_MACHINE_STATUS_FETCHING, STATE_MACHINE_STATUS_IDLE, STATE_MACHINE_STATUS_RESULT, STATE_MACHINE_STATUS_SENDING, STATE_NAME_DP_GET_FEEDBACK, SearchEmployeeComponent, Section, SectionHeader, SelectComponent, ServiceHeaderComponent, SidenavService, SpecialCharacterDirective, StatusComponent, SubmitDialogComponent, TARGET_SERVER_DP, TARGET_SERVER_WM, TRUE_BOOL, TRUE_STRING, TableComponent, TableListComponent, TermsConditionsComponent, TextDirective, TextareaComponent, TitleSectionComponent, ToggleButtonComponent, URL_SEPARATOR, ValidationErrorsComponent, WM_ACTION_SAVE, WM_ACTION_SAVE_CHANGES, WM_ACTION_SUBMIT, WORKFLOW_ITEMS, WRITE_MODE, WorkflowSectionComponent, dataURItoBlob, encodePassword, handelErrorResponse, isValidData, stringToBooleanPipe, validateSAID };
+export { APPROVERS, ActionButtonsComponent, ActionStateService, AttachmentSectionComponent, AttachmentSectionDataComponent, BaseComponent, COMMENT_CONTAINER, CheckBoxComponent, CommentsDrop, ConfirmDialogComponent, CoreAppComponent, CoreI18nService, CoreService, CustomSearchableComponent, DATE_DASH, DATE_SLASH, DATE_TIME, DONT_SHOW, DataValidators, DatePickerComponent, DateRangePickerComponent, DeleteDialogComponent, DocsUploaderComponent, FALSE_BOOL, FALSE_STRING, FEEDBACK_CONTAINER, FEEDBACK_STATUS_REQUEST, FEEDBACK_STATUS_RESPOND, FEEDBACK_STATUS_RESPONDED, FEEDBACK_STATUS_WAITING, FORM_STATUS_APPROVE, FORM_STATUS_APPROVED, FORM_STATUS_CANCEL, FORM_STATUS_CANCELLED, FORM_STATUS_COMPLETED, FORM_STATUS_NEW, FORM_STATUS_PENDING, FORM_STATUS_REJECT, FORM_STATUS_REJECTED, FORM_STATUS_SEND_BACK, FeedBackService, FeedbackSectionComponent, Form, FormLabelComponent, FormSectionComponent, FormatAsPasswordPipe, FormatTimePipe, GETSIPORTENTRYGROUPS, GETSIPORTENTRYLOCATIONS, HAS_COMMENTS, HEADER_CONTENT_TYPE_FORM, HTTP_METHOD_GET, HTTP_METHOD_POST, HTTP_METHOD_PUT, HTTP_PROTOCOL_HTTP, HTTP_PROTOCOL_HTTPS, Header, IGATE_STATIC_ASSET_PROFILE_PHOTO_URL, INBOX_STATUS_PENDING, INBOX_STATUS_PROCESSED, INBOX_STATUS_SENT, InboxItem, InfoItemComponent, InputComponent, InputCurrencyComponent, InputEmailComponent, InputMaskComponent, InputNumberComponent, InputTelephoneComponent, LANGUAGE_CODE_AR, LANGUAGE_CODE_EN, LOGOUT_URL, LayoutComponent, MY_LIB_CONFIG_TOKEN, MainRequestDetailsComponent, Messages, MycurrencyPipe, NO_COMMENTS, NO_VALUE, PROCESS_NAME_CODE, PROFILE_CONTAINER, ProfileInfoDrop, ProfileSectionComponent, READ_ONLY, REPORT, ROLE_REQUESTER, RadioComponent, RegexPatterns, RepeatedListComponent, SECTION_ID_APPROVAL_PARTIAL_NAME, SECTION_ID_DM_PARTIAL_ROLE, SECTION_ID_EMP_INFO_APPROVAL_PARTIAL_ROLE, SECTION_ID_EXECUTE_PARTIAL_ROLE, SECTION_ID_GM_PARTIAL_ROLE, SECTION_ID_NOTHING_PARTIAL_NAME, SECTION_ID_PAYROLL_APPROVAL_PARTIAL_ROLE, SECTION_ID_PERFORM_PARTIAL_ROLE, SECTION_ID_REQUESTER_PARTIAL_NAME, SECTION_ID_REQUEST_DETAILS, SECTION_ID_SM_PARTIAL_ROLE, SECTION_ID_SVP_PARTIAL_ROLE, SECTION_ID_VP_PARTIAL_ROLE, SECTION_STATUS_APPROVED, SECTION_STATUS_PENDING, SECTION_STATUS_UNSATISFIED, SERVICE_NAME_CEP, SERVICE_NAME_DP_CREATE_FEEDBACK, SERVICE_NAME_DP_INBOX_ITEM, SERVICE_NAME_DP_LOAD_HISTORY, SERVICE_NAME_DP_SEARCH_EMPLOYEE, SERVICE_NAME_DP_UPDATE_FEEDBACK, SERVICE_NAME_DP_UPDATE_INBOX_ITEM, SERVICE_NAME_MAF, SERVICE_NAME_WM_CHILD_FORM, SERVICE_NAME_WM_DRAFT_FORM, SERVICE_NAME_WM_FORM, SERVICE_NAME_WM_GET_APPROVED_REQUEST, SERVICE_NAME_WM_GET_MY_APPROVED_REQUEST, SERVICE_NAME_WM_HTML_GENERATOR, STATE_MACHINE_ACTION_CALC, STATE_MACHINE_ACTION_COMMONAPI, STATE_MACHINE_ACTION_CONVERT, STATE_MACHINE_ACTION_EMPLOYEE_PROFILE, STATE_MACHINE_ACTION_FAILURE, STATE_MACHINE_ACTION_GET_APPROVED_REQUEST, STATE_MACHINE_ACTION_GET_APPROVED_REQUEST_RESPONSE, STATE_MACHINE_ACTION_GET_FEEDBACK, STATE_MACHINE_ACTION_GET_INBOX_ITEM, STATE_MACHINE_ACTION_HANDLE_ERROR, STATE_MACHINE_ACTION_INBOX_ITEM_RESPONSE, STATE_MACHINE_ACTION_LOAD_FILE, STATE_MACHINE_ACTION_LOAD_FORM, STATE_MACHINE_ACTION_LOAD_HISTORY, STATE_MACHINE_ACTION_PDF, STATE_MACHINE_ACTION_PPROVED_REQUESTS, STATE_MACHINE_ACTION_PROJECT_CEP, STATE_MACHINE_ACTION_PROJECT_MAF, STATE_MACHINE_ACTION_SEARCH, STATE_MACHINE_ACTION_SEARCH_EMPLOYEE, STATE_MACHINE_ACTION_SET_FLAG, STATE_MACHINE_ACTION_SHOW_PRINT, STATE_MACHINE_ACTION_SUBMIT_FEEDBACK, STATE_MACHINE_ACTION_SUBMIT_FORM, STATE_MACHINE_ACTION_SUCCESS, STATE_MACHINE_ACTION_SUCCESS_HISTORY, STATE_MACHINE_ACTION_SUCCESS_INBOX_ITEM, STATE_MACHINE_ACTION_SUCCESS_PRINT, STATE_MACHINE_ACTION_SUCCESS_RESPONSE, STATE_MACHINE_ACTION_SUCCESS_SERVICES, STATE_MACHINE_ACTION_SUCCESS_USERS, STATE_MACHINE_ACTION_SUCCESS_WM, STATE_MACHINE_ACTION_UPDATE_FEEDBACK, STATE_MACHINE_ACTION_USER_CEP, STATE_MACHINE_ACTION_USER_MAF, STATE_MACHINE_STATUS_ERROR, STATE_MACHINE_STATUS_FETCHING, STATE_MACHINE_STATUS_IDLE, STATE_MACHINE_STATUS_RESULT, STATE_MACHINE_STATUS_SENDING, STATE_NAME_DP_GET_FEEDBACK, SearchEmployeeComponent, Section, SectionHeader, SelectComponent, ServiceHeaderComponent, SidenavService, StatusComponent, SubmitDialogComponent, TARGET_SERVER_DP, TARGET_SERVER_WM, TRUE_BOOL, TRUE_STRING, TableComponent, TableListComponent, TermsConditionsComponent, TextDirective, TextareaComponent, TitleSectionComponent, ToggleButtonComponent, URL_SEPARATOR, ValidationErrorsComponent, WM_ACTION_SAVE, WM_ACTION_SAVE_CHANGES, WM_ACTION_SUBMIT, WORKFLOW_ITEMS, WRITE_MODE, WorkflowSectionComponent, dataURItoBlob, encodePassword, handelErrorResponse, isValidForAction, logFormStatus, stringToBooleanPipe, updateValueAndValidity, validateIfAction, validateOnlyWhen, validateSAID };
 //# sourceMappingURL=bpm-core.mjs.map