bpm-core 0.0.52 → 0.0.53

package/fesm2022/bpm-core.mjs

@@ -1,32 +1,31 @@
 import * as i0 from '@angular/core';
 import { Injectable, Inject, Component, CUSTOM_ELEMENTS_SCHEMA, Pipe, forwardRef, EventEmitter, Input, Output, Directive, inject, ViewChild, HostListener, NO_ERRORS_SCHEMA, PLATFORM_ID, InjectionToken } from '@angular/core';
-import * as i1$1 from '@angular/material/dialog';
-import { MAT_DIALOG_DATA, MatDialogContent, MatDialogActions, MatDialogClose, MatDialogTitle, MatDialog, MatDialogModule } from '@angular/material/dialog';
+import * as i5 from '@angular/material/dialog';
+import { MatDialogContent, MatDialogClose, MatDialogTitle, MAT_DIALOG_DATA, MatDialog, MatDialogActions, MatDialogModule } from '@angular/material/dialog';
 import { Subject, ReplaySubject, BehaviorSubject, catchError, throwError, switchMap, from } from 'rxjs';
 import * as i1 from '@angular/common/http';
 import { HttpHeaders } from '@angular/common/http';
 import { map } from 'rxjs/operators';
-import * as i5 from '@angular/common';
-import { NgIf, NgSwitchCase, DecimalPipe, DatePipe, NgClass, NgSwitchDefault, NgSwitch, CommonModule, NgForOf, NgTemplateOutlet, SlicePipe, NgComponentOutlet, DOCUMENT } from '@angular/common';
-import { MatButton } from '@angular/material/button';
+import * as i5$1 from '@angular/common';
+import { NgIf, NgSwitchCase, DecimalPipe, DatePipe, NgClass, NgSwitchDefault, NgSwitch, CommonModule, NgForOf, NgTemplateOutlet, SlicePipe, NgComponentOutlet, DOCUMENT, isPlatformBrowser } from '@angular/common';
 import * as i4 from '@angular/material/core';
 import { MAT_DATE_FORMATS, MatNativeDateModule } from '@angular/material/core';
 import * as i2 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormControl, ControlContainer, NgForm, NgControl, FormControlName, FormGroupDirective, Validators, FormsModule, ReactiveFormsModule, FormGroup } from '@angular/forms';
-import * as i7 from '@angular/platform-browser';
+import * as i3 from '@angular/platform-browser';
 import { MatCheckbox } from '@angular/material/checkbox';
-import * as i3 from 'ngx-toastr';
+import * as i2$1 from 'ngx-toastr';
 import { MatSlideToggle } from '@angular/material/slide-toggle';
-import * as i1$3 from '@angular/material/autocomplete';
+import * as i1$2 from '@angular/material/autocomplete';
 import { MatAutocomplete, MatOption, MatAutocompleteTrigger, MatAutocompleteModule } from '@angular/material/autocomplete';
 import * as i4$1 from '@angular/material/input';
 import { MatInputModule, MatInput } from '@angular/material/input';
 import * as i3$1 from '@angular/material/form-field';
 import { MatError, MatFormFieldModule, MatFormField, MatHint } from '@angular/material/form-field';
 import { format } from 'date-fns';
-import * as i2$1 from '@angular/material/datepicker';
+import * as i2$2 from '@angular/material/datepicker';
 import { MatDatepickerToggle, MatDatepickerInput, MatDatepickerModule, MatDatepicker } from '@angular/material/datepicker';
-import * as i1$2 from '@ncstate/sat-popover';
+import * as i1$1 from '@ncstate/sat-popover';
 import { SatPopoverModule } from '@ncstate/sat-popover';
 import { NgxMaskDirective } from 'ngx-mask';
 import * as i3$2 from 'ngx-intl-tel-input-gg';
@@ -35,21 +34,22 @@ import { MatSelect, MatOption as MatOption$1, MatLabel, MatError as MatError$1,
 import { MatProgressSpinner } from '@angular/material/progress-spinner';
 import * as i6 from '@angular/material/button-toggle';
 import { MatButtonToggleGroup, MatButtonToggle, MatButtonToggleModule } from '@angular/material/button-toggle';
-import * as i2$2 from '@angular/material/table';
-import { MatTableDataSource, MatTableModule } from '@angular/material/table';
-import * as i1$4 from '@angular/material/paginator';
-import { MatPaginatorModule } from '@angular/material/paginator';
-import * as i2$4 from '@angular/router';
+import * as i2$3 from '@angular/material/table';
+import { MatTableDataSource, MatTableModule, MatTable, MatColumnDef, MatCell, MatCellDef, MatHeaderCellDef, MatHeaderCell, MatRow, MatHeaderRow, MatHeaderRowDef, MatRowDef } from '@angular/material/table';
+import * as i1$3 from '@angular/material/paginator';
+import { MatPaginatorModule, MatPaginator } from '@angular/material/paginator';
+import * as i2$5 from '@angular/router';
 import { RouterLink, RouterModule, RouterLinkActive, RouterOutlet } from '@angular/router';
+import { MatButton } from '@angular/material/button';
 import * as i4$2 from '@angular/material/menu';
 import { MatMenu, MatMenuTrigger, MatMenuItem, MatMenuModule } from '@angular/material/menu';
-import { moveItemInArray, CdkDropList, CdkDrag } from '@angular/cdk/drag-drop';
-import * as i3$4 from '@angular/material/tooltip';
-import { MatTooltip, MatTooltipModule } from '@angular/material/tooltip';
 import { NoopScrollStrategy, CdkOverlayOrigin, CdkConnectedOverlay } from '@angular/cdk/overlay';
 import * as FileSaver from 'file-saver';
+import * as i3$4 from '@angular/material/tooltip';
+import { MatTooltip, MatTooltipModule } from '@angular/material/tooltip';
+import { moveItemInArray, CdkDropList, CdkDrag } from '@angular/cdk/drag-drop';
 import { MatRadioButton, MatRadioGroup } from '@angular/material/radio';
-import * as i2$3 from '@angular/material/expansion';
+import * as i2$4 from '@angular/material/expansion';
 import { MatAccordion, MatExpansionPanel, MatExpansionPanelTitle, MatExpansionModule } from '@angular/material/expansion';
 import { MatDivider } from '@angular/material/divider';
 import { TranslateModule } from '@ngx-translate/core';
@@ -57,7 +57,7 @@ import * as i3$3 from 'ng-dynamic-component';
 import { ComponentOutletIoDirective, DynamicModule, DynamicComponentInjectorToken } from 'ng-dynamic-component';
 import * as i3$5 from '@angular/material/sidenav';
 import { MatSidenavModule } from '@angular/material/sidenav';
-import * as i5$1 from '@angular/material/toolbar';
+import * as i5$2 from '@angular/material/toolbar';
 import { MatToolbarModule } from '@angular/material/toolbar';
 
 // Constant for basic validations
@@ -401,7 +401,9 @@ var en = {
     "filters": "Filters",
     month: "Month",
     year: "Year",
-    status: "Status"
+    status: "Status",
+    downloadAll: 'Download All Attachment',
+    itemsPerPage: "Items per page"
 };
 
 var ar = {
@@ -592,7 +594,9 @@ var ar = {
     "filters": "تصفية",
     month: "الشهر",
     year: "السنة",
-    status: "الحالة"
+    status: "الحالة",
+    downloadAll: 'تحميل جميع المرفقات',
+    itemsPerPage: "عدد العناصر بالصفحة"
 };
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
@@ -600,8 +604,8 @@ class CoreI18nService {
     coreLocales;
     language;
     constructor() {
-        this.language = "en";
-        // this.language = (window as any).wmConfig.language;
+        // this.language = "en";
+        this.language = window.wmConfig.language;
         this.coreLocales = { en: en, ar: ar };
     }
     translate(key) {
@@ -1110,6 +1114,16 @@ class CoreService {
         }
         return new Blob([arrayBuffer], { type: 'image/jpeg' });
     }
+    saveFile(fileInformation) {
+        const fileBlob = this.dataURItoBlob(fileInformation.fileContents);
+        const file = new File([fileBlob], fileInformation.fileName, { type: fileInformation.mimeType });
+        const blobUrl = URL.createObjectURL(file);
+        const link = document.createElement('a');
+        link.href = blobUrl;
+        link.download = fileInformation.fileName;
+        link.click();
+        URL.revokeObjectURL(blobUrl);
+    }
     setFlagPriority(id) {
         let body = {
             method: HTTP_METHOD_PUT,
@@ -1301,55 +1315,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                 }]
         }] });
 
-/* eslint-disable @angular-eslint/component-selector */
-/* eslint-disable @typescript-eslint/no-explicit-any */
-class ConfirmationPopupComponent {
-    data;
-    dialogRef;
-    constructor(data, dialogRef) {
-        this.data = data;
-        this.dialogRef = dialogRef;
-    }
-    openForm() {
-        window.open("/group/i-gate/wm-bpm/forms?formId=" + this.data.id);
-        location.reload();
-    }
-    delete() {
-        this.dialogRef.close('yes');
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ConfirmationPopupComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1$1.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: ConfirmationPopupComponent, isStandalone: true, selector: "app-delete-popup", ngImport: i0, template: "<div class=\"popup-container\">\r\n  <div class=\"d-flex align-items-center justify-content-end\" mat-dialog-title>\r\n    <ds-button matDialogClose icon>\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 text-center justify-content-center mb-2 mx-5\">\r\n      <h2 class=\"fs-22 font-md-18 fw-medium fc-onyx my-3\">\r\n        <!-- {{ 'submittedSuccessfully' | transloco}} -->\r\n      </h2>\r\n      <h4 class=\"fs-14 fw-normal fst-italic fc-onyx bg-color-light-gray p-3 mb-1\">\r\n        <!-- <span>{{ 'formId' | transloco}}</span> -->\r\n        <span class=\"mx-1\"></span>\r\n        <span class=\"fs-weight-medium\">{{data.id}}</span>\r\n      </h4>\r\n    </div>\r\n  </mat-dialog-content>\r\n  <mat-dialog-actions>\r\n    <div class=\"d-flex justify-content-center w-100 mb-4 px-md-5\" *ngIf=\"data.type === 'view'\">\r\n      <button mat-stroked-button class=\"btn button-primary shadow-hover px-4\" matDialogClose>\r\n        <!-- {{ 'Close' | transloco}}  -->\r\n      </button>\r\n      <button mat-flat-button class=\"btn button-primary font-17 fw-medium px-4\" (click)=\"openForm()\">\r\n        <!-- {{ 'ViewRequest' | transloco}} -->\r\n        </button>\r\n    </div>\r\n    <div class=\"d-flex justify-content-center w-100 mb-4 px-md-5\"  *ngIf=\"data.type === 'delete'\">\r\n      <button mat-flat-button class=\"btn button-red\" [mat-dialog-close]='true' >\r\n        Delete\r\n      </button>\r\n      <span class=\"mx-2\"></span>\r\n      <button mat-flat-button class=\"btn button-primary\" matDialogClose>\r\n        Cancel\r\n      </button>\r\n    </div>\r\n    <div class=\"d-flex justify-content-center w-100 mb-4 px-md-5\" *ngIf=\"data.type === 'done'\">\r\n      <button mat-flat-button class=\"btn button-primary shadow-hover px-4\" matDialogClose>\r\n        Close\r\n      </button>\r\n    </div>\r\n  </mat-dialog-actions>\r\n\r\n</div>\r\n", styles: [".icon{font-size:40px;min-width:75px;width:75px;height:75px;background-color:#00c48c;padding:5px;display:flex;align-items:center;justify-content:center;margin:auto;color:#fff;border-radius:50%}\n"], dependencies: [{ kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ConfirmationPopupComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-delete-popup', schemas: [CUSTOM_ELEMENTS_SCHEMA], standalone: true, imports: [
-                        MatDialogContent,
-                        MatDialogActions,
-                        MatButton,
-                        MatDialogClose,
-                        NgIf
-                    ], template: "<div class=\"popup-container\">\r\n  <div class=\"d-flex align-items-center justify-content-end\" mat-dialog-title>\r\n    <ds-button matDialogClose icon>\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 text-center justify-content-center mb-2 mx-5\">\r\n      <h2 class=\"fs-22 font-md-18 fw-medium fc-onyx my-3\">\r\n        <!-- {{ 'submittedSuccessfully' | transloco}} -->\r\n      </h2>\r\n      <h4 class=\"fs-14 fw-normal fst-italic fc-onyx bg-color-light-gray p-3 mb-1\">\r\n        <!-- <span>{{ 'formId' | transloco}}</span> -->\r\n        <span class=\"mx-1\"></span>\r\n        <span class=\"fs-weight-medium\">{{data.id}}</span>\r\n      </h4>\r\n    </div>\r\n  </mat-dialog-content>\r\n  <mat-dialog-actions>\r\n    <div class=\"d-flex justify-content-center w-100 mb-4 px-md-5\" *ngIf=\"data.type === 'view'\">\r\n      <button mat-stroked-button class=\"btn button-primary shadow-hover px-4\" matDialogClose>\r\n        <!-- {{ 'Close' | transloco}}  -->\r\n      </button>\r\n      <button mat-flat-button class=\"btn button-primary font-17 fw-medium px-4\" (click)=\"openForm()\">\r\n        <!-- {{ 'ViewRequest' | transloco}} -->\r\n        </button>\r\n    </div>\r\n    <div class=\"d-flex justify-content-center w-100 mb-4 px-md-5\"  *ngIf=\"data.type === 'delete'\">\r\n      <button mat-flat-button class=\"btn button-red\" [mat-dialog-close]='true' >\r\n        Delete\r\n      </button>\r\n      <span class=\"mx-2\"></span>\r\n      <button mat-flat-button class=\"btn button-primary\" matDialogClose>\r\n        Cancel\r\n      </button>\r\n    </div>\r\n    <div class=\"d-flex justify-content-center w-100 mb-4 px-md-5\" *ngIf=\"data.type === 'done'\">\r\n      <button mat-flat-button class=\"btn button-primary shadow-hover px-4\" matDialogClose>\r\n        Close\r\n      </button>\r\n    </div>\r\n  </mat-dialog-actions>\r\n\r\n</div>\r\n", styles: [".icon{font-size:40px;min-width:75px;width:75px;height:75px;background-color:#00c48c;padding:5px;display:flex;align-items:center;justify-content:center;margin:auto;color:#fff;border-radius:50%}\n"] }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [MAT_DIALOG_DATA]
-                }] }, { type: i1$1.MatDialogRef }] });
-
-/* eslint-disable @angular-eslint/component-selector */
-/* eslint-disable @typescript-eslint/no-empty-function */
-class DeletePopupComponent {
-    constructor() { }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: DeletePopupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: DeletePopupComponent, isStandalone: true, selector: "app-delete-popup", ngImport: i0, template: "<div class=\"popup-container\">\r\n  <div class=\"d-flex align-items-center justify-content-end\" mat-dialog-title>\r\n    <button class=\"mat-close-modal\" matDialogClose>\r\n      <span class=\"sfi sfi-close fc-black\"></span>\r\n    </button>\r\n  </div>\r\n  <mat-dialog-content class=\"border-0 pt-0\">\r\n    <div class=\"d-flex flex-column align-items-center justify-content-center\">\r\n      <span class=\"sfi sfi-trash font-50 fc-coral mb-2\"></span>\r\n      <h2 class=\"fs-31 font-md-25 fw-bold fc-onyx mb-0\">\r\n        Are you sure !\r\n      </h2>\r\n      <h4 class=\"fs-15 fw-normal fc-dark-gray mb-0\">you want Delete This Car</h4>\r\n    </div>\r\n  </mat-dialog-content>\r\n  <mat-dialog-actions>\r\n    <div class=\"d-flex justify-content-center w-100 mb-4 px-md-5\">\r\n      <button class=\"btn button-secondary font-13 fw-medium h-51 w-100\" matDialogClose>\r\n        <span>Cancel</span>\r\n      </button>\r\n      <span class=\"mx-2\"></span>\r\n      <button class=\"btn button-primary font-13 fw-medium h-51 w-100\">\r\n        <span>Delete</span>\r\n      </button>\r\n    </div>\r\n  </mat-dialog-actions>\r\n\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: DeletePopupComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-delete-popup', schemas: [CUSTOM_ELEMENTS_SCHEMA], standalone: true, imports: [
-                        MatDialogContent,
-                        MatDialogClose,
-                        MatDialogActions
-                    ], template: "<div class=\"popup-container\">\r\n  <div class=\"d-flex align-items-center justify-content-end\" mat-dialog-title>\r\n    <button class=\"mat-close-modal\" matDialogClose>\r\n      <span class=\"sfi sfi-close fc-black\"></span>\r\n    </button>\r\n  </div>\r\n  <mat-dialog-content class=\"border-0 pt-0\">\r\n    <div class=\"d-flex flex-column align-items-center justify-content-center\">\r\n      <span class=\"sfi sfi-trash font-50 fc-coral mb-2\"></span>\r\n      <h2 class=\"fs-31 font-md-25 fw-bold fc-onyx mb-0\">\r\n        Are you sure !\r\n      </h2>\r\n      <h4 class=\"fs-15 fw-normal fc-dark-gray mb-0\">you want Delete This Car</h4>\r\n    </div>\r\n  </mat-dialog-content>\r\n  <mat-dialog-actions>\r\n    <div class=\"d-flex justify-content-center w-100 mb-4 px-md-5\">\r\n      <button class=\"btn button-secondary font-13 fw-medium h-51 w-100\" matDialogClose>\r\n        <span>Cancel</span>\r\n      </button>\r\n      <span class=\"mx-2\"></span>\r\n      <button class=\"btn button-primary font-13 fw-medium h-51 w-100\">\r\n        <span>Delete</span>\r\n      </button>\r\n    </div>\r\n  </mat-dialog-actions>\r\n\r\n</div>\r\n" }]
-        }], ctorParameters: () => [] });
-
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @angular-eslint/component-selector */
 class DeleteDialogComponent {
@@ -1362,16 +1327,17 @@ class DeleteDialogComponent {
     delete() {
         this.dialogRef.close('yes');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: DeleteDialogComponent, deps: [{ token: i1$1.MatDialogRef }, { token: CoreI18nService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: DeleteDialogComponent, isStandalone: true, selector: "app-delete-dialog", 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('delete')}}</h3>\r\n        <ds-button matDialogClose icon>\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\">\r\n            <h2 class=\"fs-16 fw-medium fc-black mb-4\">\r\n                {{i18n.translate('Areyousureyouwantdelete')}}\r\n            </h2>\r\n\r\n            <div class=\"d-flex align-items-center gap-3\">\r\n                <ds-button shape=\"outline\" color=\"dark-gray\" matDialogClose>{{i18n.translate('Cancel')}}</ds-button>\r\n                <ds-button color=\"red\" (click)=\"delete()\">{{i18n.translate('yes')}}</ds-button>\r\n            </div>\r\n        </div>\r\n    </mat-dialog-content>\r\n</div>", styles: ["::ng-deep .confirm-dialog{--popup-max-width: 350px}\n"], dependencies: [{ kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: DeleteDialogComponent, deps: [{ token: i5.MatDialogRef }, { token: CoreI18nService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: DeleteDialogComponent, isStandalone: true, selector: "app-delete-dialog", 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('delete')}}</h3>\r\n        <ds-button matDialogClose icon>\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\">\r\n            <h2 class=\"fs-16 fw-medium fc-black mb-4\">\r\n                {{i18n.translate('Areyousureyouwantdelete')}}\r\n            </h2>\r\n\r\n            <div class=\"d-flex align-items-center gap-3\">\r\n                <ds-button shape=\"outline\" color=\"dark-gray\" matDialogClose>{{i18n.translate('Cancel')}}</ds-button>\r\n                <ds-button color=\"red\" (click)=\"delete()\">{{i18n.translate('yes')}}</ds-button>\r\n            </div>\r\n        </div>\r\n    </mat-dialog-content>\r\n</div>", styles: ["::ng-deep .confirm-dialog{--popup-max-width: 350px}\n"], dependencies: [{ kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: DeleteDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-delete-dialog', schemas: [CUSTOM_ELEMENTS_SCHEMA], standalone: true, imports: [
                         MatDialogContent,
-                        MatDialogClose
+                        MatDialogClose,
+                        MatDialogTitle
                     ], 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('delete')}}</h3>\r\n        <ds-button matDialogClose icon>\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\">\r\n            <h2 class=\"fs-16 fw-medium fc-black mb-4\">\r\n                {{i18n.translate('Areyousureyouwantdelete')}}\r\n            </h2>\r\n\r\n            <div class=\"d-flex align-items-center gap-3\">\r\n                <ds-button shape=\"outline\" color=\"dark-gray\" matDialogClose>{{i18n.translate('Cancel')}}</ds-button>\r\n                <ds-button color=\"red\" (click)=\"delete()\">{{i18n.translate('yes')}}</ds-button>\r\n            </div>\r\n        </div>\r\n    </mat-dialog-content>\r\n</div>", styles: ["::ng-deep .confirm-dialog{--popup-max-width: 350px}\n"] }]
-        }], ctorParameters: () => [{ type: i1$1.MatDialogRef }, { type: CoreI18nService }] });
+        }], ctorParameters: () => [{ type: i5.MatDialogRef }, { type: CoreI18nService }] });
 
 class SubmitDialogComponent {
     data;
@@ -1449,7 +1415,7 @@ class ConfirmDialogComponent {
         this.dialogRef.close('yes');
         //////
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ConfirmDialogComponent, deps: [{ token: i1$1.MatDialogRef }, { token: CoreI18nService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ConfirmDialogComponent, deps: [{ token: i5.MatDialogRef }, { token: CoreI18nService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: ConfirmDialogComponent, isStandalone: true, selector: "app-confirm-dialog", 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('delete')}}</h3>\r\n        <ds-button matDialogClose icon>\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\">\r\n            <h2 class=\"fs-16 fw-medium fc-black mb-4\">\r\n                {{i18n.translate('drf-confirmatton-msg')}}\r\n            </h2>\r\n\r\n            <div class=\"d-flex align-items-center gap-3\">\r\n                <ds-button shape=\"outline\" color=\"dark-gray\" matDialogClose>{{i18n.translate('No-Discard')}}</ds-button>\r\n                <ds-button color=\"red\" (click)=\"confirm()\">{{i18n.translate('Yes-Proceed')}}</ds-button>\r\n            </div>\r\n        </div>\r\n    </mat-dialog-content>\r\n</div>", styles: ["::ng-deep .confirm-dialog{--popup-max-width: 350px}\n"], dependencies: [{ kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { 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: "18.2.8", ngImport: i0, type: ConfirmDialogComponent, decorators: [{
@@ -1458,7 +1424,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                         MatDialogContent,
                         MatDialogClose
                     ], 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('delete')}}</h3>\r\n        <ds-button matDialogClose icon>\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\">\r\n            <h2 class=\"fs-16 fw-medium fc-black mb-4\">\r\n                {{i18n.translate('drf-confirmatton-msg')}}\r\n            </h2>\r\n\r\n            <div class=\"d-flex align-items-center gap-3\">\r\n                <ds-button shape=\"outline\" color=\"dark-gray\" matDialogClose>{{i18n.translate('No-Discard')}}</ds-button>\r\n                <ds-button color=\"red\" (click)=\"confirm()\">{{i18n.translate('Yes-Proceed')}}</ds-button>\r\n            </div>\r\n        </div>\r\n    </mat-dialog-content>\r\n</div>", styles: ["::ng-deep .confirm-dialog{--popup-max-width: 350px}\n"] }]
-        }], ctorParameters: () => [{ type: i1$1.MatDialogRef }, { type: CoreI18nService }] });
+        }], ctorParameters: () => [{ type: i5.MatDialogRef }, { type: CoreI18nService }] });
 
 class FormatAsPasswordPipe {
     transform(value) {
@@ -1682,19 +1648,19 @@ class BaseComponent {
             this.emitedValue.emit(this.field);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: BaseComponent, deps: [{ token: CoreI18nService }, { token: i1.HttpClient }, { token: i2.FormBuilder }, { token: i4.DateAdapter }, { token: i0.ChangeDetectorRef }, { token: i1$1.MatDialog }, { token: i1$1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: MycurrencyPipe }, { token: MAT_DATE_FORMATS }, { token: i7.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: BaseComponent, deps: [{ token: CoreI18nService }, { token: i1.HttpClient }, { token: i2.FormBuilder }, { token: i4.DateAdapter }, { token: i0.ChangeDetectorRef }, { token: i5.MatDialog }, { token: i5.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: MycurrencyPipe }, { token: MAT_DATE_FORMATS }, { token: i3.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: BaseComponent, isStandalone: true, selector: "app-base-component", inputs: { hideOption: "hideOption", type: "type", loading: "loading", field: "field", labelTextReadMode: "labelTextReadMode", labelTextWriteMode: "labelTextWriteMode", isReadOnly: "isReadOnly", name: "name", required: "required", mask: "mask", allowedExtensions: "allowedExtensions", link: "link", multiple: "multiple", insideTable: "insideTable", showIfEmpty: "showIfEmpty", showErrorMessage: "showErrorMessage", showHint: "showHint", hint: "hint", errorMessage: "errorMessage", placeholder: "placeholder", maxLength: "maxLength", minLength: "minLength", maxValue: "maxValue", minValue: "minValue", disabled: "disabled", lov: "lov", hasLabel: "hasLabel", section: "section", controller: "controller" }, outputs: { emitedValue: "emitedValue" }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR], ngImport: i0, template: '', isInline: true, styles: [""], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: BaseComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-base-component', template: '', providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], standalone: true }]
-        }], ctorParameters: () => [{ type: CoreI18nService }, { type: i1.HttpClient }, { type: i2.FormBuilder }, { type: i4.DateAdapter }, { type: i0.ChangeDetectorRef }, { type: i1$1.MatDialog }, { type: i1$1.MatDialogRef }, { type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: CoreI18nService }, { type: i1.HttpClient }, { type: i2.FormBuilder }, { type: i4.DateAdapter }, { type: i0.ChangeDetectorRef }, { type: i5.MatDialog }, { type: i5.MatDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
                 }] }, { type: MycurrencyPipe }, { type: CustomDateFormat, decorators: [{
                     type: Inject,
                     args: [MAT_DATE_FORMATS]
-                }] }, { type: i7.DomSanitizer }], propDecorators: { hideOption: [{
+                }] }, { type: i3.DomSanitizer }], propDecorators: { hideOption: [{
                 type: Input
             }], type: [{
                 type: Input
@@ -1762,6 +1728,7 @@ class ControlValueAccessorDirective {
     toasterService;
     coreService;
     sanitizer;
+    fb;
     isReadOnly;
     hint = '';
     loading;
@@ -1777,8 +1744,10 @@ class ControlValueAccessorDirective {
     hasTooltip = false;
     name;
     randomID;
-    multiple;
+    multiple = false;
     searchControl = new FormControl();
+    employeeSearchControl = new FormControl();
+    attachments = [];
     startDateControl = new FormControl();
     endDateControl = new FormControl();
     minDateValue;
@@ -1794,12 +1763,13 @@ class ControlValueAccessorDirective {
     required = false;
     maxLength;
     isDisabled = false;
-    constructor(injector, i18n, toasterService, coreService, sanitizer) {
+    constructor(injector, i18n, toasterService, coreService, sanitizer, fb) {
         this.injector = injector;
         this.i18n = i18n;
         this.toasterService = toasterService;
         this.coreService = coreService;
         this.sanitizer = sanitizer;
+        this.fb = fb;
     }
     ngOnInit() {
         this.setFormControl();
@@ -1832,11 +1802,13 @@ class ControlValueAccessorDirective {
         if (!this.value) {
             this.startDateControl.setValue(null);
             this.endDateControl.setValue(null);
+            this.attachments = [];
         }
         else {
             this.startDateControl.setValue(this.value.startDate);
             this.endDateControl.setValue(this.value.endDate);
             this.searchControl.setValue(value['value']);
+            this.employeeSearchControl.setValue(value['personName']);
         }
     }
     registerOnChange(fn) {
@@ -1846,7 +1818,7 @@ class ControlValueAccessorDirective {
     setDisabledState(isDisabled) {
         this.isDisabled = isDisabled;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ControlValueAccessorDirective, deps: [{ token: i0.Injector }, { token: CoreI18nService }, { token: i3.ToastrService }, { token: CoreService }, { token: i7.DomSanitizer }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ControlValueAccessorDirective, deps: [{ token: i0.Injector }, { token: CoreI18nService }, { token: i2$1.ToastrService }, { token: CoreService }, { token: i3.DomSanitizer }, { token: i2.FormBuilder }], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.8", type: ControlValueAccessorDirective, selector: "[appControlValueAccessor]", inputs: { isReadOnly: "isReadOnly", hint: "hint", loading: "loading", placeholder: "placeholder", type: "type", showErrorMessage: "showErrorMessage", showHint: "showHint", showIfEmpty: "showIfEmpty", insideTable: "insideTable", mask: "mask", label: "label", matSuffix: "matSuffix", hasTooltip: "hasTooltip", name: "name", randomID: "randomID", multiple: "multiple", maxDate: "maxDate", minDate: "minDate", customMaxDate: "customMaxDate", customMinDate: "customMinDate" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ControlValueAccessorDirective, decorators: [{
@@ -1854,7 +1826,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
             args: [{
                     selector: '[appControlValueAccessor]',
                 }]
-        }], ctorParameters: () => [{ type: i0.Injector }, { type: CoreI18nService }, { type: i3.ToastrService }, { type: CoreService }, { type: i7.DomSanitizer }], propDecorators: { isReadOnly: [{
+        }], ctorParameters: () => [{ type: i0.Injector }, { type: CoreI18nService }, { type: i2$1.ToastrService }, { type: CoreService }, { type: i3.DomSanitizer }, { type: i2.FormBuilder }], propDecorators: { isReadOnly: [{
                 type: Input
             }], hint: [{
                 type: Input
@@ -1907,7 +1879,7 @@ class TermsConditionsComponent {
         this.data = data;
         this.termsBody = data;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: TermsConditionsComponent, deps: [{ token: i1$1.MatDialogRef }, { token: CoreI18nService }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: TermsConditionsComponent, deps: [{ token: i5.MatDialogRef }, { token: CoreI18nService }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: TermsConditionsComponent, isStandalone: true, selector: "app-terms-conditions", 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 class=\"mb-0 font-16 fw-medium\" >{{i18n.translate('termsAndConditions')}}</h3>\r\n    <ds-button matDialogClose icon>\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\">\r\n      <p class=\"fs-15 fw-normal bg-color-light-gray p-3 text-break\" [innerHTML]='termsBody' > </p>\r\n    </div>\r\n  </mat-dialog-content>\r\n</div>\r\n", styles: ["::ng-deep .main-popup{--popup-max-width: 800px;--popup-width: 800px}\n"], dependencies: [{ kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: TermsConditionsComponent, decorators: [{
@@ -1917,7 +1889,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                         MatDialogClose,
                         MatDialogTitle
                     ], standalone: true, template: "<div class=\"popup-container\">\r\n  <div class=\"d-flex align-items-center justify-content-between\" mat-dialog-title>\r\n    <h3 class=\"mb-0 font-16 fw-medium\" >{{i18n.translate('termsAndConditions')}}</h3>\r\n    <ds-button matDialogClose icon>\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\">\r\n      <p class=\"fs-15 fw-normal bg-color-light-gray p-3 text-break\" [innerHTML]='termsBody' > </p>\r\n    </div>\r\n  </mat-dialog-content>\r\n</div>\r\n", styles: ["::ng-deep .main-popup{--popup-max-width: 800px;--popup-width: 800px}\n"] }]
-        }], ctorParameters: () => [{ type: i1$1.MatDialogRef }, { type: CoreI18nService }, { type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: i5.MatDialogRef }, { type: CoreI18nService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
                 }] }] });
@@ -1950,7 +1922,7 @@ class InfoItemComponent {
         return '/group/i-gate/wm-bpm/forms/-/proxy/portrait?email=' + email;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: InfoItemComponent, deps: [{ token: CoreI18nService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: InfoItemComponent, isStandalone: true, selector: "app-info-item", inputs: { label: "label", value: "value", name: "name", type: "type", dateType: "dateType", multiple: "multiple", insideTable: "insideTable", hasLabel: "hasLabel", arrayList: "arrayList", actionType: "actionType", download: "download" }, ngImport: i0, template: "<ng-container [ngSwitch]=\"type\">\r\n  @if(label){\r\n    <span class=\"name \">{{ label }}</span>\r\n  }\r\n\r\n  <!-- class=\"disc\" -->\r\n  <span *ngSwitchCase=\"'attach'\">\r\n<!--    <app-docs-uploader [field]=\"value\" styleHeight=\"mini\" display=\"only-files\"></app-docs-uploader>-->\r\n  </span>\r\n  <span class=\"disc mt-2 \" *ngSwitchCase=\"'user-picker'\">\r\n    @if(!multiple){\r\n      <div class=\"d-flex align-items-center\">\r\n        <div class=\"img-card circled-img small\">\r\n          <img [src]=\"getImage(value)\" onerror=\"this.onerror=null;this.src='assets/images/user.svg';\" alt=\"\">\r\n        </div>\r\n        <div class=\"line-height-1 mx-2\" [ngClass]=\"{'flex-grow-1': actionType === 'delete'}\">\r\n          <h6 class=\"fs-14 fw-bold fc-onyx mb-0\">{{name}}</h6>\r\n          <span class=\"fs-12 fc-dark-gray\">{{value}}</span>\r\n        </div>\r\n      </div>\r\n    }\r\n \r\n    @if(multiple){\r\n      @if(multiple){\r\n        <ng-container>\r\n          <div class=\"d-flex flex-wrap\">\r\n            @for(emails of arrayList; track $index; let ind = $index){\r\n              <ng-container>\r\n                <div class=\"img-card circled-img small mb-3\">\r\n                  <img [src]=\"getImage(value)\" onerror=\"this.onerror=null;this.src='assets/images/user.svg';\" alt=\"\">\r\n                </div>\r\n                <div class=\"line-height-1 mx-2 mb-3\" [ngClass]=\"{'flex-grow-1': actionType === 'delete'}\">\r\n                  <h6 class=\"fs-14 fw-bold fc-onyx mb-0\"> {{(emails?.['personName'])}}</h6>\r\n                  <span class=\"fs-12 fc-dark-gray\"> {{emails?.['personEmail']}}</span>\r\n                </div>\r\n              </ng-container>\r\n            }\r\n           \r\n    \r\n          </div>\r\n        </ng-container>\r\n      }\r\n    \r\n    }\r\n   \r\n  </span>\r\n\r\n  <span class=\"disc\" *ngSwitchCase=\"'toggle'\">\r\n    <mat-slide-toggle [checked]=\"value\"></mat-slide-toggle>\r\n  </span>\r\n\r\n  <span class=\"disc\" *ngSwitchCase=\"'toggleBtn'\">\r\n    <span>{{value}}</span>\r\n  </span>\r\n  <span class=\"disc\" *ngSwitchCase=\"'telephone'\">\r\n    <div class=\"d-flex align-items-center\">\r\n      <bdi>{{ value }}</bdi>\r\n    </div>\r\n  </span>\r\n\r\n  <span class=\"disc\" *ngSwitchCase=\"'currency'\">\r\n    <span>{{value  | number:'1.2-2'}}</span>\r\n  </span>\r\n\r\n  <span class=\"disc\" *ngSwitchCase=\"'date'\">\r\n    @if(dateType === 'hijri'){\r\n      <span>\r\n        {{ value }}\r\n      </span>\r\n    }\r\n   @if(dateType === 'yearOnly'){\r\n    <span>\r\n      {{ value }}\r\n    </span>\r\n   }\r\n@if(dateType !== 'hijri' && dateType !== 'yearOnly' && !value?.startDate){\r\n  <span>\r\n    {{value  | date :'dd/MM/yyyy'}}\r\n  </span>\r\n}\r\n  @if(dateType !== 'hijri' && dateType !== 'yearOnly' && value?.startDate){\r\n    <span>\r\n      {{value?.startDate  | date :'dd/MM/yyyy'}}\r\n      -\r\n      {{value?.endDate  | date :'dd/MM/yyyy'}}\r\n    </span>\r\n  }\r\n   \r\n  </span>\r\n\r\n  <span class=\"disc\" *ngSwitchCase=\"'dateHijri'\">\r\n    {{ value }}\r\n  </span>\r\n\r\n  <span class=\"disc breakLine\" *ngSwitchCase=\"'link'\">\r\n    <a [href]=\"value\" target=\"_blank\">{{i18n.translate('View')}} {{ label }} </a>\r\n  </span>\r\n  <span class=\"disc breakLine\" *ngSwitchCase=\"'formIdLink'\">\r\n    <a (click)=\"viewForm(value)\">{{ value }} </a>\r\n  </span>\r\n  <span [ngClass]=\"{'breakLine': !insideTable}\" class=\"disc \" *ngSwitchCase=\"'text'\">\r\n    {{ value }}\r\n  </span>\r\n  <span [ngClass]=\"{'breakLine': !insideTable}\" class=\"disc \"  *ngSwitchCase=\"'multipleSelect'\">\r\n    @for(item of value; track $index; let i =$index){\r\n      <span>{{item.value}}\r\n        @if(!(i === value.length-1)){\r\n          <span>, </span>\r\n  \r\n        }\r\n    </span>\r\n    }\r\n  \r\n  </span>\r\n  <span [ngClass]=\"{'breakLine': !insideTable}\" class=\"disc \" [innerHTML]=\"value\" *ngSwitchDefault>\r\n  </span>\r\n</ng-container>\r\n", styles: [":host.slide-end .disc{text-align:end}:host.user-picker{border-radius:4px;padding:1rem;background-color:var(--light-gray);max-width:320px;width:100%}:host.user-picker .name{display:none}:host.user-picker .disc{width:100%}.name{width:270px;font-size:.875rem;font-weight:var(--font-medium);color:var(--dark-gray);margin-bottom:0;display:inline-block}.disc{width:calc(100% - 270px);font-size:.875rem;font-weight:var(--font-regular);color:var(--black);display:inline-block}@media (max-width: 768px){.name,.disc{width:100%!important}}.breakLine{line-break:anywhere}a{color:#0d6efd!important}a:hover{cursor:pointer}\n"], dependencies: [{ kind: "component", type: MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: InfoItemComponent, isStandalone: true, selector: "app-info-item", inputs: { label: "label", value: "value", name: "name", type: "type", dateType: "dateType", multiple: "multiple", insideTable: "insideTable", hasLabel: "hasLabel", arrayList: "arrayList", actionType: "actionType", download: "download" }, ngImport: i0, template: "<ng-container [ngSwitch]=\"type\">\r\n  @if(label){\r\n    <span class=\"name \">{{ label }}</span>\r\n  }\r\n\r\n  <!-- class=\"disc\" -->\r\n  <span *ngSwitchCase=\"'attach'\">\r\n<!--    <app-docs-uploader [field]=\"value\" styleHeight=\"mini\" display=\"only-files\"></app-docs-uploader>-->\r\n  </span>\r\n  <span class=\"disc mt-2 \" *ngSwitchCase=\"'user-picker'\">\r\n    @if(!multiple){\r\n      <div class=\"d-flex align-items-center\">\r\n        <div class=\"img-card circled-img small\">\r\n          <img [src]=\"getImage(value)\" onerror=\"this.onerror=null;this.src='assets/images/user.svg';\" alt=\"\">\r\n        </div>\r\n        <div class=\"line-height-1 mx-2\" [ngClass]=\"{'flex-grow-1': actionType === 'delete'}\">\r\n          <h6 class=\"fs-14 fw-bold fc-onyx mb-0\">{{name}}</h6>\r\n          <span class=\"fs-12 fc-dark-gray\">{{value}}</span>\r\n        </div>\r\n      </div>\r\n    }\r\n\r\n    @if(multiple){\r\n      @if(multiple){\r\n        <ng-container>\r\n            @for (emails of arrayList; track $index; let ind = $index) {\r\n          <div class=\"d-flex flex-wrap\">\r\n              <ng-container>\r\n                <div class=\"img-card circled-img small mb-3\">\r\n                  <img [src]=\"getImage(value)\" onerror=\"this.onerror=null;this.src='assets/images/user.svg';\" alt=\"\">\r\n                </div>\r\n                <div class=\"line-height-1 mx-2 mb-3\" [ngClass]=\"{'flex-grow-1': actionType === 'delete'}\">\r\n                  <h6 class=\"fs-14 fw-bold fc-onyx mb-0\"> {{(emails?.['personName'])}}</h6>\r\n                  <span class=\"fs-12 fc-dark-gray\"> {{emails?.['personEmail']}}</span>\r\n                </div>\r\n              </ng-container>\r\n          </div>\r\n            }\r\n        </ng-container>\r\n      }\r\n    }\r\n  </span>\r\n\r\n  <span class=\"disc\" *ngSwitchCase=\"'toggle'\">\r\n    <mat-slide-toggle [checked]=\"value\"></mat-slide-toggle>\r\n  </span>\r\n\r\n  <span class=\"disc\" *ngSwitchCase=\"'toggleBtn'\">\r\n    <span>{{value}}</span>\r\n  </span>\r\n  <span class=\"disc\" *ngSwitchCase=\"'telephone'\">\r\n    <div class=\"d-flex align-items-center\">\r\n      <bdi>{{ value }}</bdi>\r\n    </div>\r\n  </span>\r\n\r\n  <span class=\"disc\" *ngSwitchCase=\"'currency'\">\r\n    <span>{{value  | number:'1.2-2'}}</span>\r\n  </span>\r\n\r\n  <span class=\"disc\" *ngSwitchCase=\"'date'\">\r\n    @if(dateType === 'hijri'){\r\n      <span>\r\n        {{ value }}\r\n      </span>\r\n    }\r\n   @if(dateType === 'yearOnly'){\r\n    <span>\r\n      {{ value }}\r\n    </span>\r\n   }\r\n@if(dateType !== 'hijri' && dateType !== 'yearOnly' && !value?.startDate){\r\n  <span>\r\n    {{value  | date :'dd/MM/yyyy'}}\r\n  </span>\r\n}\r\n  @if(dateType !== 'hijri' && dateType !== 'yearOnly' && value?.startDate){\r\n    <span>\r\n      {{value?.['startDate']  | date :'dd/MM/yyyy'}}\r\n      -\r\n      {{value?.['endDate']  | date :'dd/MM/yyyy'}}\r\n    </span>\r\n  }\r\n\r\n  </span>\r\n\r\n  <span class=\"disc\" *ngSwitchCase=\"'dateHijri'\">\r\n    {{ value }}\r\n  </span>\r\n\r\n  <span class=\"disc breakLine\" *ngSwitchCase=\"'link'\">\r\n    <a [href]=\"value\" target=\"_blank\">{{i18n.translate('View')}} {{ label }} </a>\r\n  </span>\r\n  <span class=\"disc breakLine\" *ngSwitchCase=\"'formIdLink'\">\r\n    <a (click)=\"viewForm(value)\">{{ value }} </a>\r\n  </span>\r\n  <span [ngClass]=\"{'breakLine': !insideTable}\" class=\"disc \" *ngSwitchCase=\"'text'\">\r\n    {{ value }}\r\n  </span>\r\n  <span [ngClass]=\"{'breakLine': !insideTable}\" class=\"disc \"  *ngSwitchCase=\"'multipleSelect'\">\r\n    @for(item of value; track $index; let i =$index){\r\n      <span>{{item.value}}\r\n        @if(!(i === value.length-1)){\r\n          <span>, </span>\r\n        }\r\n    </span>\r\n    }\r\n\r\n  </span>\r\n  <span [ngClass]=\"{'breakLine': !insideTable}\" class=\"disc \" [innerHTML]=\"value\" *ngSwitchDefault>\r\n  </span>\r\n</ng-container>\r\n", styles: [":host.slide-end .disc{text-align:end}:host.user-picker{border-radius:4px;padding:1rem;background-color:var(--light-gray);max-width:320px;width:100%}:host.user-picker .name{display:none}:host.user-picker .disc{width:100%}.name{width:270px;font-size:.875rem;font-weight:var(--font-medium);color:var(--dark-gray);margin-bottom:0;display:inline-block}.disc{width:calc(100% - 270px);font-size:.875rem;font-weight:var(--font-regular);color:var(--black);display:inline-block}@media (max-width: 768px){.name,.disc{width:100%!important}}.breakLine{line-break:anywhere}a{color:#0d6efd!important}a:hover{cursor:pointer}\n"], dependencies: [{ kind: "component", type: MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: InfoItemComponent, decorators: [{
             type: Component,
@@ -1962,7 +1934,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                         NgClass,
                         NgSwitchDefault,
                         NgSwitch
-                    ], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<ng-container [ngSwitch]=\"type\">\r\n  @if(label){\r\n    <span class=\"name \">{{ label }}</span>\r\n  }\r\n\r\n  <!-- class=\"disc\" -->\r\n  <span *ngSwitchCase=\"'attach'\">\r\n<!--    <app-docs-uploader [field]=\"value\" styleHeight=\"mini\" display=\"only-files\"></app-docs-uploader>-->\r\n  </span>\r\n  <span class=\"disc mt-2 \" *ngSwitchCase=\"'user-picker'\">\r\n    @if(!multiple){\r\n      <div class=\"d-flex align-items-center\">\r\n        <div class=\"img-card circled-img small\">\r\n          <img [src]=\"getImage(value)\" onerror=\"this.onerror=null;this.src='assets/images/user.svg';\" alt=\"\">\r\n        </div>\r\n        <div class=\"line-height-1 mx-2\" [ngClass]=\"{'flex-grow-1': actionType === 'delete'}\">\r\n          <h6 class=\"fs-14 fw-bold fc-onyx mb-0\">{{name}}</h6>\r\n          <span class=\"fs-12 fc-dark-gray\">{{value}}</span>\r\n        </div>\r\n      </div>\r\n    }\r\n \r\n    @if(multiple){\r\n      @if(multiple){\r\n        <ng-container>\r\n          <div class=\"d-flex flex-wrap\">\r\n            @for(emails of arrayList; track $index; let ind = $index){\r\n              <ng-container>\r\n                <div class=\"img-card circled-img small mb-3\">\r\n                  <img [src]=\"getImage(value)\" onerror=\"this.onerror=null;this.src='assets/images/user.svg';\" alt=\"\">\r\n                </div>\r\n                <div class=\"line-height-1 mx-2 mb-3\" [ngClass]=\"{'flex-grow-1': actionType === 'delete'}\">\r\n                  <h6 class=\"fs-14 fw-bold fc-onyx mb-0\"> {{(emails?.['personName'])}}</h6>\r\n                  <span class=\"fs-12 fc-dark-gray\"> {{emails?.['personEmail']}}</span>\r\n                </div>\r\n              </ng-container>\r\n            }\r\n           \r\n    \r\n          </div>\r\n        </ng-container>\r\n      }\r\n    \r\n    }\r\n   \r\n  </span>\r\n\r\n  <span class=\"disc\" *ngSwitchCase=\"'toggle'\">\r\n    <mat-slide-toggle [checked]=\"value\"></mat-slide-toggle>\r\n  </span>\r\n\r\n  <span class=\"disc\" *ngSwitchCase=\"'toggleBtn'\">\r\n    <span>{{value}}</span>\r\n  </span>\r\n  <span class=\"disc\" *ngSwitchCase=\"'telephone'\">\r\n    <div class=\"d-flex align-items-center\">\r\n      <bdi>{{ value }}</bdi>\r\n    </div>\r\n  </span>\r\n\r\n  <span class=\"disc\" *ngSwitchCase=\"'currency'\">\r\n    <span>{{value  | number:'1.2-2'}}</span>\r\n  </span>\r\n\r\n  <span class=\"disc\" *ngSwitchCase=\"'date'\">\r\n    @if(dateType === 'hijri'){\r\n      <span>\r\n        {{ value }}\r\n      </span>\r\n    }\r\n   @if(dateType === 'yearOnly'){\r\n    <span>\r\n      {{ value }}\r\n    </span>\r\n   }\r\n@if(dateType !== 'hijri' && dateType !== 'yearOnly' && !value?.startDate){\r\n  <span>\r\n    {{value  | date :'dd/MM/yyyy'}}\r\n  </span>\r\n}\r\n  @if(dateType !== 'hijri' && dateType !== 'yearOnly' && value?.startDate){\r\n    <span>\r\n      {{value?.startDate  | date :'dd/MM/yyyy'}}\r\n      -\r\n      {{value?.endDate  | date :'dd/MM/yyyy'}}\r\n    </span>\r\n  }\r\n   \r\n  </span>\r\n\r\n  <span class=\"disc\" *ngSwitchCase=\"'dateHijri'\">\r\n    {{ value }}\r\n  </span>\r\n\r\n  <span class=\"disc breakLine\" *ngSwitchCase=\"'link'\">\r\n    <a [href]=\"value\" target=\"_blank\">{{i18n.translate('View')}} {{ label }} </a>\r\n  </span>\r\n  <span class=\"disc breakLine\" *ngSwitchCase=\"'formIdLink'\">\r\n    <a (click)=\"viewForm(value)\">{{ value }} </a>\r\n  </span>\r\n  <span [ngClass]=\"{'breakLine': !insideTable}\" class=\"disc \" *ngSwitchCase=\"'text'\">\r\n    {{ value }}\r\n  </span>\r\n  <span [ngClass]=\"{'breakLine': !insideTable}\" class=\"disc \"  *ngSwitchCase=\"'multipleSelect'\">\r\n    @for(item of value; track $index; let i =$index){\r\n      <span>{{item.value}}\r\n        @if(!(i === value.length-1)){\r\n          <span>, </span>\r\n  \r\n        }\r\n    </span>\r\n    }\r\n  \r\n  </span>\r\n  <span [ngClass]=\"{'breakLine': !insideTable}\" class=\"disc \" [innerHTML]=\"value\" *ngSwitchDefault>\r\n  </span>\r\n</ng-container>\r\n", styles: [":host.slide-end .disc{text-align:end}:host.user-picker{border-radius:4px;padding:1rem;background-color:var(--light-gray);max-width:320px;width:100%}:host.user-picker .name{display:none}:host.user-picker .disc{width:100%}.name{width:270px;font-size:.875rem;font-weight:var(--font-medium);color:var(--dark-gray);margin-bottom:0;display:inline-block}.disc{width:calc(100% - 270px);font-size:.875rem;font-weight:var(--font-regular);color:var(--black);display:inline-block}@media (max-width: 768px){.name,.disc{width:100%!important}}.breakLine{line-break:anywhere}a{color:#0d6efd!important}a:hover{cursor:pointer}\n"] }]
+                    ], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<ng-container [ngSwitch]=\"type\">\r\n  @if(label){\r\n    <span class=\"name \">{{ label }}</span>\r\n  }\r\n\r\n  <!-- class=\"disc\" -->\r\n  <span *ngSwitchCase=\"'attach'\">\r\n<!--    <app-docs-uploader [field]=\"value\" styleHeight=\"mini\" display=\"only-files\"></app-docs-uploader>-->\r\n  </span>\r\n  <span class=\"disc mt-2 \" *ngSwitchCase=\"'user-picker'\">\r\n    @if(!multiple){\r\n      <div class=\"d-flex align-items-center\">\r\n        <div class=\"img-card circled-img small\">\r\n          <img [src]=\"getImage(value)\" onerror=\"this.onerror=null;this.src='assets/images/user.svg';\" alt=\"\">\r\n        </div>\r\n        <div class=\"line-height-1 mx-2\" [ngClass]=\"{'flex-grow-1': actionType === 'delete'}\">\r\n          <h6 class=\"fs-14 fw-bold fc-onyx mb-0\">{{name}}</h6>\r\n          <span class=\"fs-12 fc-dark-gray\">{{value}}</span>\r\n        </div>\r\n      </div>\r\n    }\r\n\r\n    @if(multiple){\r\n      @if(multiple){\r\n        <ng-container>\r\n            @for (emails of arrayList; track $index; let ind = $index) {\r\n          <div class=\"d-flex flex-wrap\">\r\n              <ng-container>\r\n                <div class=\"img-card circled-img small mb-3\">\r\n                  <img [src]=\"getImage(value)\" onerror=\"this.onerror=null;this.src='assets/images/user.svg';\" alt=\"\">\r\n                </div>\r\n                <div class=\"line-height-1 mx-2 mb-3\" [ngClass]=\"{'flex-grow-1': actionType === 'delete'}\">\r\n                  <h6 class=\"fs-14 fw-bold fc-onyx mb-0\"> {{(emails?.['personName'])}}</h6>\r\n                  <span class=\"fs-12 fc-dark-gray\"> {{emails?.['personEmail']}}</span>\r\n                </div>\r\n              </ng-container>\r\n          </div>\r\n            }\r\n        </ng-container>\r\n      }\r\n    }\r\n  </span>\r\n\r\n  <span class=\"disc\" *ngSwitchCase=\"'toggle'\">\r\n    <mat-slide-toggle [checked]=\"value\"></mat-slide-toggle>\r\n  </span>\r\n\r\n  <span class=\"disc\" *ngSwitchCase=\"'toggleBtn'\">\r\n    <span>{{value}}</span>\r\n  </span>\r\n  <span class=\"disc\" *ngSwitchCase=\"'telephone'\">\r\n    <div class=\"d-flex align-items-center\">\r\n      <bdi>{{ value }}</bdi>\r\n    </div>\r\n  </span>\r\n\r\n  <span class=\"disc\" *ngSwitchCase=\"'currency'\">\r\n    <span>{{value  | number:'1.2-2'}}</span>\r\n  </span>\r\n\r\n  <span class=\"disc\" *ngSwitchCase=\"'date'\">\r\n    @if(dateType === 'hijri'){\r\n      <span>\r\n        {{ value }}\r\n      </span>\r\n    }\r\n   @if(dateType === 'yearOnly'){\r\n    <span>\r\n      {{ value }}\r\n    </span>\r\n   }\r\n@if(dateType !== 'hijri' && dateType !== 'yearOnly' && !value?.startDate){\r\n  <span>\r\n    {{value  | date :'dd/MM/yyyy'}}\r\n  </span>\r\n}\r\n  @if(dateType !== 'hijri' && dateType !== 'yearOnly' && value?.startDate){\r\n    <span>\r\n      {{value?.['startDate']  | date :'dd/MM/yyyy'}}\r\n      -\r\n      {{value?.['endDate']  | date :'dd/MM/yyyy'}}\r\n    </span>\r\n  }\r\n\r\n  </span>\r\n\r\n  <span class=\"disc\" *ngSwitchCase=\"'dateHijri'\">\r\n    {{ value }}\r\n  </span>\r\n\r\n  <span class=\"disc breakLine\" *ngSwitchCase=\"'link'\">\r\n    <a [href]=\"value\" target=\"_blank\">{{i18n.translate('View')}} {{ label }} </a>\r\n  </span>\r\n  <span class=\"disc breakLine\" *ngSwitchCase=\"'formIdLink'\">\r\n    <a (click)=\"viewForm(value)\">{{ value }} </a>\r\n  </span>\r\n  <span [ngClass]=\"{'breakLine': !insideTable}\" class=\"disc \" *ngSwitchCase=\"'text'\">\r\n    {{ value }}\r\n  </span>\r\n  <span [ngClass]=\"{'breakLine': !insideTable}\" class=\"disc \"  *ngSwitchCase=\"'multipleSelect'\">\r\n    @for(item of value; track $index; let i =$index){\r\n      <span>{{item.value}}\r\n        @if(!(i === value.length-1)){\r\n          <span>, </span>\r\n        }\r\n    </span>\r\n    }\r\n\r\n  </span>\r\n  <span [ngClass]=\"{'breakLine': !insideTable}\" class=\"disc \" [innerHTML]=\"value\" *ngSwitchDefault>\r\n  </span>\r\n</ng-container>\r\n", styles: [":host.slide-end .disc{text-align:end}:host.user-picker{border-radius:4px;padding:1rem;background-color:var(--light-gray);max-width:320px;width:100%}:host.user-picker .name{display:none}:host.user-picker .disc{width:100%}.name{width:270px;font-size:.875rem;font-weight:var(--font-medium);color:var(--dark-gray);margin-bottom:0;display:inline-block}.disc{width:calc(100% - 270px);font-size:.875rem;font-weight:var(--font-regular);color:var(--black);display:inline-block}@media (max-width: 768px){.name,.disc{width:100%!important}}.breakLine{line-break:anywhere}a{color:#0d6efd!important}a:hover{cursor:pointer}\n"] }]
         }], ctorParameters: () => [{ type: CoreI18nService }], propDecorators: { label: [{
                 type: Input
             }], value: [{
@@ -1987,9 +1959,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                 type: Input
             }] } });
 
-/* eslint-disable @typescript-eslint/no-empty-function */
-/* eslint-disable @angular-eslint/use-lifecycle-interface */
-/* eslint-disable @angular-eslint/component-selector */
 class CheckBoxComponent extends ControlValueAccessorDirective {
     containTerms;
     termsLabel;
@@ -2022,21 +1991,22 @@ class CheckBoxComponent extends ControlValueAccessorDirective {
                 useExisting: forwardRef(() => CheckBoxComponent),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "\r\n@if(isReadOnly && control?.value){\r\n  <ng-container>\r\n    <app-info-item\r\n      class=\"info-item w-100\"\r\n      [label]=\"label\"\r\n      [insideTable]=\"insideTable\"\r\n      [hasLabel]=\"!!label\"\r\n      [value]=\"control?.value\"\r\n    ></app-info-item>\r\n  </ng-container>\r\n  } @else {\r\n    <mat-checkbox\r\n    class=\"my-3\" [disabled]=\"isDisabled\" id=\"{{name}}{{randomID}}\" [name]=\"name\"\r\n    (change)=\"valueChange($event)\" [checked]=\"control.value\">\r\n    <span class=\"fs-12 fw-medium fc-onyx\">\r\n      {{ label }}\r\n    </span>\r\n    @if(containTerms){\r\n      <span\r\n      class=\"fs-12 fw-bold fc-coral cursor-pointer mx-1\"\r\n      (click)=\"openTermsPopup(); false\">\r\n      {{ termsLabel ? termsLabel : i18n.translate('termsAndConditions') }}\r\n    </span>\r\n    }\r\n   @if (link){\r\n    <ng-container>\r\n      <span> | </span>\r\n      <a class=\"fs-12 fw-bold fc-coral cursor-pointer mx-1 d-inline-flex align-items-center gap-1\" href=\"{{hrefLink}}\" target=\"_blank\">\r\n        <ds-icon icon=\"external-link\"></ds-icon>\r\n        <span class=\"underline\">{{ linkText }}</span>\r\n      </a>\r\n    </ng-container>\r\n   }\r\n    <!-- <a *ngIf=\"containDownload\" style=\"color: blue;\" class=\"fs-12 fw-bold fc-coral cursor-pointer mx-1\" href=\"{{hrefLink}}\" target=\"_top\"> {{termsLabel}}</a> -->\r\n  </mat-checkbox>\r\n  \r\n  }\r\n", styles: [".checkbox{margin-top:10px!important;position:relative;margin-bottom:0!important}.checkbox label{padding-left:30px;font-size:14px;color:#414142}.checkbox input[type=checkbox]{opacity:0}.checkbox input[type=checkbox]+label.checkboxInput{position:absolute;width:25px;height:25px;top:0;left:0;padding-left:0}@media (max-width: 768px){.checkbox input[type=checkbox]+label.checkboxInput{top:8px!important}}.checkbox input[type=checkbox]+label.checkboxInput:before{content:\"\\f096\";font-family:FontAwesome;font-size:25px;display:block;margin-top:-7px;color:#ddd}.checkbox input[type=checkbox]:checked+label.checkboxInput:before{content:\"\\f14a\";color:#da3f7b;background-color:#fff}.rtlCheckbox.checkbox input[type=checkbox]+label.checkboxInput{left:inherit;right:0;padding-left:0;padding-right:0}.rtlCheckbox.checkbox label{padding-left:0;padding-right:30px}\n"], dependencies: [{ kind: "component", type: InfoItemComponent, selector: "app-info-item", inputs: ["label", "value", "name", "type", "dateType", "multiple", "insideTable", "hasLabel", "arrayList", "actionType", "download"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: FormsModule }] });
+        ], usesInheritance: true, ngImport: i0, template: "    <mat-checkbox\r\n      [ngClass]=\"{'mx-4':isReadOnly}\"\r\n      class=\"my-3\" [disabled]=\"isDisabled || isReadOnly\" id=\"{{name}}{{randomID}}\" [name]=\"name\"\r\n    (change)=\"valueChange($event)\" [checked]=\"control.value\">\r\n    <span class=\"fs-12 fw-medium fc-onyx\">\r\n      {{ label }}\r\n    </span>\r\n    @if(containTerms){\r\n      <span\r\n      class=\"fs-12 fw-bold fc-coral cursor-pointer mx-1\"\r\n      (click)=\"openTermsPopup(); false\">\r\n      {{ termsLabel ? termsLabel : i18n.translate('termsAndConditions') }}\r\n    </span>\r\n    }\r\n   @if (link){\r\n    <ng-container>\r\n      <span> | </span>\r\n      <a class=\"fs-12 fw-bold fc-coral cursor-pointer mx-1 d-inline-flex align-items-center gap-1\" href=\"{{hrefLink}}\" target=\"_blank\">\r\n        <ds-icon icon=\"external-link\"></ds-icon>\r\n        <span class=\"underline\">{{ linkText }}</span>\r\n      </a>\r\n    </ng-container>\r\n   }\r\n  </mat-checkbox>\r\n", styles: [".checkbox{margin-top:10px!important;position:relative;margin-bottom:0!important}.checkbox label{padding-left:30px;font-size:14px;color:#414142}.checkbox input[type=checkbox]{opacity:0}.checkbox input[type=checkbox]+label.checkboxInput{position:absolute;width:25px;height:25px;top:0;left:0;padding-left:0}@media (max-width: 768px){.checkbox input[type=checkbox]+label.checkboxInput{top:8px!important}}.checkbox input[type=checkbox]+label.checkboxInput:before{content:\"\\f096\";font-family:FontAwesome;font-size:25px;display:block;margin-top:-7px;color:#ddd}.checkbox input[type=checkbox]:checked+label.checkboxInput:before{content:\"\\f14a\";color:#da3f7b;background-color:#fff}.rtlCheckbox.checkbox input[type=checkbox]+label.checkboxInput{left:inherit;right:0;padding-left:0;padding-right:0}.rtlCheckbox.checkbox label{padding-left:0;padding-right:30px}\n"], dependencies: [{ kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: CheckBoxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-checkbox', schemas: [CUSTOM_ELEMENTS_SCHEMA], imports: [
                         InfoItemComponent,
                         MatCheckbox,
-                        FormsModule
+                        FormsModule,
+                        NgClass
                     ], standalone: true, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => CheckBoxComponent),
                             multi: true,
                         },
-                    ], template: "\r\n@if(isReadOnly && control?.value){\r\n  <ng-container>\r\n    <app-info-item\r\n      class=\"info-item w-100\"\r\n      [label]=\"label\"\r\n      [insideTable]=\"insideTable\"\r\n      [hasLabel]=\"!!label\"\r\n      [value]=\"control?.value\"\r\n    ></app-info-item>\r\n  </ng-container>\r\n  } @else {\r\n    <mat-checkbox\r\n    class=\"my-3\" [disabled]=\"isDisabled\" id=\"{{name}}{{randomID}}\" [name]=\"name\"\r\n    (change)=\"valueChange($event)\" [checked]=\"control.value\">\r\n    <span class=\"fs-12 fw-medium fc-onyx\">\r\n      {{ label }}\r\n    </span>\r\n    @if(containTerms){\r\n      <span\r\n      class=\"fs-12 fw-bold fc-coral cursor-pointer mx-1\"\r\n      (click)=\"openTermsPopup(); false\">\r\n      {{ termsLabel ? termsLabel : i18n.translate('termsAndConditions') }}\r\n    </span>\r\n    }\r\n   @if (link){\r\n    <ng-container>\r\n      <span> | </span>\r\n      <a class=\"fs-12 fw-bold fc-coral cursor-pointer mx-1 d-inline-flex align-items-center gap-1\" href=\"{{hrefLink}}\" target=\"_blank\">\r\n        <ds-icon icon=\"external-link\"></ds-icon>\r\n        <span class=\"underline\">{{ linkText }}</span>\r\n      </a>\r\n    </ng-container>\r\n   }\r\n    <!-- <a *ngIf=\"containDownload\" style=\"color: blue;\" class=\"fs-12 fw-bold fc-coral cursor-pointer mx-1\" href=\"{{hrefLink}}\" target=\"_top\"> {{termsLabel}}</a> -->\r\n  </mat-checkbox>\r\n  \r\n  }\r\n", styles: [".checkbox{margin-top:10px!important;position:relative;margin-bottom:0!important}.checkbox label{padding-left:30px;font-size:14px;color:#414142}.checkbox input[type=checkbox]{opacity:0}.checkbox input[type=checkbox]+label.checkboxInput{position:absolute;width:25px;height:25px;top:0;left:0;padding-left:0}@media (max-width: 768px){.checkbox input[type=checkbox]+label.checkboxInput{top:8px!important}}.checkbox input[type=checkbox]+label.checkboxInput:before{content:\"\\f096\";font-family:FontAwesome;font-size:25px;display:block;margin-top:-7px;color:#ddd}.checkbox input[type=checkbox]:checked+label.checkboxInput:before{content:\"\\f14a\";color:#da3f7b;background-color:#fff}.rtlCheckbox.checkbox input[type=checkbox]+label.checkboxInput{left:inherit;right:0;padding-left:0;padding-right:0}.rtlCheckbox.checkbox label{padding-left:0;padding-right:30px}\n"] }]
+                    ], template: "    <mat-checkbox\r\n      [ngClass]=\"{'mx-4':isReadOnly}\"\r\n      class=\"my-3\" [disabled]=\"isDisabled || isReadOnly\" id=\"{{name}}{{randomID}}\" [name]=\"name\"\r\n    (change)=\"valueChange($event)\" [checked]=\"control.value\">\r\n    <span class=\"fs-12 fw-medium fc-onyx\">\r\n      {{ label }}\r\n    </span>\r\n    @if(containTerms){\r\n      <span\r\n      class=\"fs-12 fw-bold fc-coral cursor-pointer mx-1\"\r\n      (click)=\"openTermsPopup(); false\">\r\n      {{ termsLabel ? termsLabel : i18n.translate('termsAndConditions') }}\r\n    </span>\r\n    }\r\n   @if (link){\r\n    <ng-container>\r\n      <span> | </span>\r\n      <a class=\"fs-12 fw-bold fc-coral cursor-pointer mx-1 d-inline-flex align-items-center gap-1\" href=\"{{hrefLink}}\" target=\"_blank\">\r\n        <ds-icon icon=\"external-link\"></ds-icon>\r\n        <span class=\"underline\">{{ linkText }}</span>\r\n      </a>\r\n    </ng-container>\r\n   }\r\n  </mat-checkbox>\r\n", styles: [".checkbox{margin-top:10px!important;position:relative;margin-bottom:0!important}.checkbox label{padding-left:30px;font-size:14px;color:#414142}.checkbox input[type=checkbox]{opacity:0}.checkbox input[type=checkbox]+label.checkboxInput{position:absolute;width:25px;height:25px;top:0;left:0;padding-left:0}@media (max-width: 768px){.checkbox input[type=checkbox]+label.checkboxInput{top:8px!important}}.checkbox input[type=checkbox]+label.checkboxInput:before{content:\"\\f096\";font-family:FontAwesome;font-size:25px;display:block;margin-top:-7px;color:#ddd}.checkbox input[type=checkbox]:checked+label.checkboxInput:before{content:\"\\f14a\";color:#da3f7b;background-color:#fff}.rtlCheckbox.checkbox input[type=checkbox]+label.checkboxInput{left:inherit;right:0;padding-left:0;padding-right:0}.rtlCheckbox.checkbox label{padding-left:0;padding-right:30px}\n"] }]
         }], propDecorators: { containTerms: [{
                 type: Input
             }], termsLabel: [{
@@ -2080,7 +2050,7 @@ class ValidationErrorsComponent extends ControlValueAccessorDirective {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ValidationErrorsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: ValidationErrorsComponent, isStandalone: true, selector: "app-validation-errors", inputs: { errors: "errors", customErrorMessages: "customErrorMessages" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "  @if(control.touched) {\r\n    @for(error of errors | keyvalue; track error ) {\r\n            <mat-error class=\"mb-2\">\r\n                {{ errorMessages[error.key] }} {{errors['maxlength']?.requiredLength}} {{errors['minlength']?.requiredLength}}\r\n              </mat-error>\r\n    }\r\n  }", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i5.KeyValuePipe, name: "keyvalue" }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: ValidationErrorsComponent, isStandalone: true, selector: "app-validation-errors", inputs: { errors: "errors", customErrorMessages: "customErrorMessages" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "  @if(control.touched) {\r\n    @for(error of errors | keyvalue; track error ) {\r\n            <mat-error class=\"mb-2\">\r\n                {{ errorMessages[error.key] }} {{errors['maxlength']?.requiredLength}} {{errors['minlength']?.requiredLength}}\r\n              </mat-error>\r\n    }\r\n  }", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i5$1.KeyValuePipe, name: "keyvalue" }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ValidationErrorsComponent, decorators: [{
             type: Component,
@@ -2123,6 +2093,7 @@ class CustomSearchableComponent extends ControlValueAccessorDirective {
             if ((e.keyCode == 8 || e.keyCode == 46) && !this.control.value) {
                 if (this.control) {
                     this.control.setValue(null);
+                    this.control.markAsTouched();
                 }
                 input.focus();
             }
@@ -2317,7 +2288,7 @@ class DatePickerComponent extends ControlValueAccessorDirective {
                 provide: MAT_DATE_FORMATS,
                 useClass: CustomDateFormat,
             },
-        ], viewQueries: [{ propertyName: "datepicker", first: true, predicate: MatDatepicker, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if(!isReadOnly){\r\n<ng-container>\r\n  @if(label){\r\n  <div class=\"d-flex justify-content-between mb-1\">\r\n    <span class=\"form-label mb-0\">{{ label }}</span>\r\n    @if(!required){\r\n    <span class=\"fs-11 fc-dark-gray\"> {{ i18n.translate(\"optional\") }} </span>\r\n    }\r\n  </div>\r\n  }\r\n  <div class=\"justify-content-between mb-1\">\r\n    <mat-form-field\r\n      [ngClass]=\"{ 'input-disabled': isDisabled }\"\r\n      [floatLabel]=\"floatLabel\"\r\n    >\r\n      <label class=\"mat-form-content\">\r\n        <input\r\n          matInput\r\n          (dateInput)=\"dateChange($event)\"\r\n          [placeholder]=\"label ? i18n.translate('select') + ' ' + label : ''\"\r\n          (focus)=\"focusPicker(dp)\"\r\n          [min]=\"minDateValue\"\r\n          [max]=\"maxDateValue\"\r\n          readonly\r\n          [matDatepicker]=\"dp\"\r\n          [formControl]=\"control\"\r\n        />\r\n      </label>\r\n      @if(control?.value){\r\n      <ds-icon\r\n        matSuffix\r\n        icon=\"close\"\r\n        class=\"fc-onyx fs-10 mx-2 cursor-pointer\"\r\n        (click)=\"clearDateValue($event)\"\r\n      ></ds-icon>\r\n      }\r\n      <mat-datepicker-toggle matSuffix [for]=\"dp\">\r\n        <ds-icon\r\n          icon=\"calendar-o\"\r\n          class=\"fc-black fs-18\"\r\n          matDatepickerToggleIcon\r\n        ></ds-icon>\r\n      </mat-datepicker-toggle>\r\n      <mat-datepicker #dp> </mat-datepicker>\r\n      <!-- <mat-error *ngIf=\"errorMessage\">{{errorMessage}}</mat-error> -->\r\n    </mat-form-field>\r\n    <app-validation-errors [errors]=\"control.errors\"></app-validation-errors>\r\n  </div>\r\n</ng-container>\r\n} @if(isReadOnly && control){\r\n<ng-container>\r\n  <app-info-item\r\n    class=\"info-item w-100\"\r\n    type=\"date\"\r\n    [insideTable]=\"insideTable\"\r\n    [dateType]=\"calendarType\"\r\n    [label]=\"label\"\r\n    [value]=\"control.value\"\r\n    [hasLabel]=\"!!label\"\r\n  >\r\n  </app-info-item>\r\n</ng-container>\r\n}\r\n", styles: [":host{flex-grow:1}::ng-deep .year-only .mat-calendar-period-button{pointer-events:none}::ng-deep .year-only .mat-calendar-arrow{display:none}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: ValidationErrorsComponent, selector: "app-validation-errors", inputs: ["errors", "customErrorMessages"] }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "component", type: MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "component", type: i2$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i2$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "ngmodule", type: i2$1.MatDatepickerModule }, { kind: "directive", type: i2$1.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { kind: "ngmodule", type: i3$1.MatFormFieldModule }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: InfoItemComponent, selector: "app-info-item", inputs: ["label", "value", "name", "type", "dateType", "multiple", "insideTable", "hasLabel", "arrayList", "actionType", "download"] }] });
+        ], viewQueries: [{ propertyName: "datepicker", first: true, predicate: MatDatepicker, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if(!isReadOnly){\r\n<ng-container>\r\n  @if(label){\r\n  <div class=\"d-flex justify-content-between mb-1\">\r\n    <span class=\"form-label mb-0\">{{ label }}</span>\r\n    @if(!required){\r\n    <span class=\"fs-11 fc-dark-gray\"> {{ i18n.translate(\"optional\") }} </span>\r\n    }\r\n  </div>\r\n  }\r\n  <div class=\"justify-content-between mb-1\">\r\n    <mat-form-field\r\n      [ngClass]=\"{ 'input-disabled': isDisabled }\"\r\n      [floatLabel]=\"floatLabel\"\r\n    >\r\n      <label class=\"mat-form-content\">\r\n        <input\r\n          matInput\r\n          (dateInput)=\"dateChange($event)\"\r\n          [placeholder]=\"label ? i18n.translate('select') + ' ' + label : ''\"\r\n          (focus)=\"focusPicker(dp)\"\r\n          [min]=\"minDateValue\"\r\n          [max]=\"maxDateValue\"\r\n          readonly\r\n          [matDatepicker]=\"dp\"\r\n          [formControl]=\"control\"\r\n        />\r\n      </label>\r\n      @if(control?.value){\r\n      <ds-icon\r\n        matSuffix\r\n        icon=\"close\"\r\n        class=\"fc-onyx fs-10 mx-2 cursor-pointer\"\r\n        (click)=\"clearDateValue($event)\"\r\n      ></ds-icon>\r\n      }\r\n      <mat-datepicker-toggle matSuffix [for]=\"dp\">\r\n        <ds-icon\r\n          icon=\"calendar-o\"\r\n          class=\"fc-black fs-18\"\r\n          matDatepickerToggleIcon\r\n        ></ds-icon>\r\n      </mat-datepicker-toggle>\r\n      <mat-datepicker #dp> </mat-datepicker>\r\n      <!-- <mat-error *ngIf=\"errorMessage\">{{errorMessage}}</mat-error> -->\r\n    </mat-form-field>\r\n    <app-validation-errors [errors]=\"control.errors\"></app-validation-errors>\r\n  </div>\r\n</ng-container>\r\n} @if(isReadOnly && control){\r\n<ng-container>\r\n  <app-info-item\r\n    class=\"info-item w-100\"\r\n    type=\"date\"\r\n    [insideTable]=\"insideTable\"\r\n    [dateType]=\"calendarType\"\r\n    [label]=\"label\"\r\n    [value]=\"control.value\"\r\n    [hasLabel]=\"!!label\"\r\n  >\r\n  </app-info-item>\r\n</ng-container>\r\n}\r\n", styles: [":host{flex-grow:1}::ng-deep .year-only .mat-calendar-period-button{pointer-events:none}::ng-deep .year-only .mat-calendar-arrow{display:none}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: ValidationErrorsComponent, selector: "app-validation-errors", inputs: ["errors", "customErrorMessages"] }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "component", type: MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "component", type: i2$2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i2$2.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "ngmodule", type: i2$2.MatDatepickerModule }, { kind: "directive", type: i2$2.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { kind: "ngmodule", type: i3$1.MatFormFieldModule }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: InfoItemComponent, selector: "app-info-item", inputs: ["label", "value", "name", "type", "dateType", "multiple", "insideTable", "hasLabel", "arrayList", "actionType", "download"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: DatePickerComponent, decorators: [{
             type: Component,
@@ -2399,7 +2370,6 @@ class DateRangePickerComponent extends ControlValueAccessorDirective {
         if (this.minDate) {
             if (this.minDate == 'today') {
                 this.minDateValue = new Date(currentYear, currentMonth, currentDay);
-                console.log(this.minDateValue);
             }
         }
         if (this.maxDate) {
@@ -2483,7 +2453,7 @@ class DateRangePickerComponent extends ControlValueAccessorDirective {
                 provide: MAT_DATE_FORMATS,
                 useClass: CustomDateFormat,
             },
-        ], viewQueries: [{ propertyName: "datepicker", first: true, predicate: MatDatepicker, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if(!isReadOnly){ @if(label){\r\n<div class=\"d-flex justify-content-between mb-1\">\r\n  <span class=\"form-label mb-0\">{{ label }}</span>\r\n  @if(!required){\r\n  <span class=\"fs-11 fc-dark-gray\"> {{ i18n.translate(\"optional\") }} </span>\r\n  }\r\n</div>\r\n}\r\n<mat-form-field class=\"date-range primary-form {{ className }}\">\r\n  <label class=\"mat-form-content\">\r\n        <mat-date-range-input [rangePicker]=\"picker\"  [min]=\"minDateValue\" [max]=\"maxDateValue\">\r\n      <input\r\n        matStartDate\r\n        placeholder=\"Start date\"\r\n        [formControl]=\"startDateControl\"\r\n        (dateInput)=\"startDateChange($event)\"\r\n        (focus)=\"focusPicker(picker)\"\r\n        readonly\r\n      />\r\n      <input\r\n        matEndDate\r\n        placeholder=\"End date\"\r\n        [formControl]=\"endDateControl\"\r\n        (dateInput)=\"endDateChange($event)\"\r\n        (focus)=\"focusPicker(picker)\"\r\n        readonly\r\n      />\r\n    </mat-date-range-input>\r\n  </label>\r\n  @if(control?.value){\r\n  <ds-icon\r\n    matSuffix\r\n    icon=\"close\"\r\n    class=\"fc-onyx fs-10 mx-2 cursor-pointer\"\r\n    (click)=\"clearDateValue($event)\"\r\n  ></ds-icon>\r\n  }\r\n  <mat-datepicker-toggle matSuffix [for]=\"picker\" [disableRipple]=\"true\">\r\n    <i class=\"sfi sfi-calendar-o fc-onyx font-18\" matDatepickerToggleIcon></i>\r\n  </mat-datepicker-toggle>\r\n  <mat-date-range-picker #picker></mat-date-range-picker>\r\n</mat-form-field>\r\n<app-validation-errors [errors]=\"control.errors\"></app-validation-errors>\r\n} @else {\r\n<ng-container>\r\n  <app-info-item\r\n    class=\"info-item w-100\"\r\n    type=\"date\"\r\n    [insideTable]=\"insideTable\"\r\n    [dateType]=\"calendarType\"\r\n    [label]=\"label\"\r\n    [value]=\"{\r\n      startDate: control.value.startDate,\r\n      endDate: control.value.endDate\r\n    }\"\r\n    [hasLabel]=\"!!label\"\r\n  >\r\n  </app-info-item>\r\n</ng-container>\r\n}\r\n", styles: [":host{flex-grow:1}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: ValidationErrorsComponent, selector: "app-validation-errors", inputs: ["errors", "customErrorMessages"] }, { kind: "component", type: i2$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: i2$1.MatDatepickerModule }, { kind: "directive", type: i2$1.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { kind: "component", type: i2$1.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i2$1.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i2$1.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i2$1.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "ngmodule", type: i3$1.MatFormFieldModule }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: InfoItemComponent, selector: "app-info-item", inputs: ["label", "value", "name", "type", "dateType", "multiple", "insideTable", "hasLabel", "arrayList", "actionType", "download"] }] });
+        ], viewQueries: [{ propertyName: "datepicker", first: true, predicate: MatDatepicker, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if(!isReadOnly){ @if(label){\r\n<div class=\"d-flex justify-content-between mb-1\">\r\n  <span class=\"form-label mb-0\">{{ label }}</span>\r\n  @if(!required){\r\n  <span class=\"fs-11 fc-dark-gray\"> {{ i18n.translate(\"optional\") }} </span>\r\n  }\r\n</div>\r\n}\r\n<mat-form-field class=\"date-range primary-form {{ className }}\">\r\n  <label class=\"mat-form-content\">\r\n        <mat-date-range-input [rangePicker]=\"picker\"  [min]=\"minDateValue\" [max]=\"maxDateValue\">\r\n      <input\r\n        matStartDate\r\n        placeholder=\"Start date\"\r\n        [formControl]=\"startDateControl\"\r\n        (dateInput)=\"startDateChange($event)\"\r\n        (focus)=\"focusPicker(picker)\"\r\n        readonly\r\n      />\r\n      <input\r\n        matEndDate\r\n        placeholder=\"End date\"\r\n        [formControl]=\"endDateControl\"\r\n        (dateInput)=\"endDateChange($event)\"\r\n        (focus)=\"focusPicker(picker)\"\r\n        readonly\r\n      />\r\n    </mat-date-range-input>\r\n  </label>\r\n  @if(control?.value){\r\n  <ds-icon\r\n    matSuffix\r\n    icon=\"close\"\r\n    class=\"fc-onyx fs-10 mx-2 cursor-pointer\"\r\n    (click)=\"clearDateValue($event)\"\r\n  ></ds-icon>\r\n  }\r\n  <mat-datepicker-toggle matSuffix [for]=\"picker\" [disableRipple]=\"true\">\r\n    <i class=\"sfi sfi-calendar-o fc-onyx font-18\" matDatepickerToggleIcon></i>\r\n  </mat-datepicker-toggle>\r\n  <mat-date-range-picker #picker></mat-date-range-picker>\r\n</mat-form-field>\r\n<app-validation-errors [errors]=\"control.errors\"></app-validation-errors>\r\n} @else {\r\n<ng-container>\r\n  <app-info-item\r\n    class=\"info-item w-100\"\r\n    type=\"date\"\r\n    [insideTable]=\"insideTable\"\r\n    [dateType]=\"calendarType\"\r\n    [label]=\"label\"\r\n    [value]=\"{\r\n      startDate: control.value?.startDate,\r\n      endDate: control.value?.endDate\r\n    }\"\r\n    [hasLabel]=\"!!label\"\r\n  >\r\n  </app-info-item>\r\n</ng-container>\r\n}\r\n", styles: [":host{flex-grow:1}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: ValidationErrorsComponent, selector: "app-validation-errors", inputs: ["errors", "customErrorMessages"] }, { kind: "component", type: i2$2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: i2$2.MatDatepickerModule }, { kind: "directive", type: i2$2.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { kind: "component", type: i2$2.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i2$2.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i2$2.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i2$2.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "ngmodule", type: i3$1.MatFormFieldModule }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: InfoItemComponent, selector: "app-info-item", inputs: ["label", "value", "name", "type", "dateType", "multiple", "insideTable", "hasLabel", "arrayList", "actionType", "download"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: DateRangePickerComponent, decorators: [{
             type: Component,
@@ -2503,7 +2473,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                         ...MatDatePickerImports,
                         ...MatFormImports,
                         InfoItemComponent,
-                    ], template: "@if(!isReadOnly){ @if(label){\r\n<div class=\"d-flex justify-content-between mb-1\">\r\n  <span class=\"form-label mb-0\">{{ label }}</span>\r\n  @if(!required){\r\n  <span class=\"fs-11 fc-dark-gray\"> {{ i18n.translate(\"optional\") }} </span>\r\n  }\r\n</div>\r\n}\r\n<mat-form-field class=\"date-range primary-form {{ className }}\">\r\n  <label class=\"mat-form-content\">\r\n        <mat-date-range-input [rangePicker]=\"picker\"  [min]=\"minDateValue\" [max]=\"maxDateValue\">\r\n      <input\r\n        matStartDate\r\n        placeholder=\"Start date\"\r\n        [formControl]=\"startDateControl\"\r\n        (dateInput)=\"startDateChange($event)\"\r\n        (focus)=\"focusPicker(picker)\"\r\n        readonly\r\n      />\r\n      <input\r\n        matEndDate\r\n        placeholder=\"End date\"\r\n        [formControl]=\"endDateControl\"\r\n        (dateInput)=\"endDateChange($event)\"\r\n        (focus)=\"focusPicker(picker)\"\r\n        readonly\r\n      />\r\n    </mat-date-range-input>\r\n  </label>\r\n  @if(control?.value){\r\n  <ds-icon\r\n    matSuffix\r\n    icon=\"close\"\r\n    class=\"fc-onyx fs-10 mx-2 cursor-pointer\"\r\n    (click)=\"clearDateValue($event)\"\r\n  ></ds-icon>\r\n  }\r\n  <mat-datepicker-toggle matSuffix [for]=\"picker\" [disableRipple]=\"true\">\r\n    <i class=\"sfi sfi-calendar-o fc-onyx font-18\" matDatepickerToggleIcon></i>\r\n  </mat-datepicker-toggle>\r\n  <mat-date-range-picker #picker></mat-date-range-picker>\r\n</mat-form-field>\r\n<app-validation-errors [errors]=\"control.errors\"></app-validation-errors>\r\n} @else {\r\n<ng-container>\r\n  <app-info-item\r\n    class=\"info-item w-100\"\r\n    type=\"date\"\r\n    [insideTable]=\"insideTable\"\r\n    [dateType]=\"calendarType\"\r\n    [label]=\"label\"\r\n    [value]=\"{\r\n      startDate: control.value.startDate,\r\n      endDate: control.value.endDate\r\n    }\"\r\n    [hasLabel]=\"!!label\"\r\n  >\r\n  </app-info-item>\r\n</ng-container>\r\n}\r\n", styles: [":host{flex-grow:1}\n"] }]
+                    ], template: "@if(!isReadOnly){ @if(label){\r\n<div class=\"d-flex justify-content-between mb-1\">\r\n  <span class=\"form-label mb-0\">{{ label }}</span>\r\n  @if(!required){\r\n  <span class=\"fs-11 fc-dark-gray\"> {{ i18n.translate(\"optional\") }} </span>\r\n  }\r\n</div>\r\n}\r\n<mat-form-field class=\"date-range primary-form {{ className }}\">\r\n  <label class=\"mat-form-content\">\r\n        <mat-date-range-input [rangePicker]=\"picker\"  [min]=\"minDateValue\" [max]=\"maxDateValue\">\r\n      <input\r\n        matStartDate\r\n        placeholder=\"Start date\"\r\n        [formControl]=\"startDateControl\"\r\n        (dateInput)=\"startDateChange($event)\"\r\n        (focus)=\"focusPicker(picker)\"\r\n        readonly\r\n      />\r\n      <input\r\n        matEndDate\r\n        placeholder=\"End date\"\r\n        [formControl]=\"endDateControl\"\r\n        (dateInput)=\"endDateChange($event)\"\r\n        (focus)=\"focusPicker(picker)\"\r\n        readonly\r\n      />\r\n    </mat-date-range-input>\r\n  </label>\r\n  @if(control?.value){\r\n  <ds-icon\r\n    matSuffix\r\n    icon=\"close\"\r\n    class=\"fc-onyx fs-10 mx-2 cursor-pointer\"\r\n    (click)=\"clearDateValue($event)\"\r\n  ></ds-icon>\r\n  }\r\n  <mat-datepicker-toggle matSuffix [for]=\"picker\" [disableRipple]=\"true\">\r\n    <i class=\"sfi sfi-calendar-o fc-onyx font-18\" matDatepickerToggleIcon></i>\r\n  </mat-datepicker-toggle>\r\n  <mat-date-range-picker #picker></mat-date-range-picker>\r\n</mat-form-field>\r\n<app-validation-errors [errors]=\"control.errors\"></app-validation-errors>\r\n} @else {\r\n<ng-container>\r\n  <app-info-item\r\n    class=\"info-item w-100\"\r\n    type=\"date\"\r\n    [insideTable]=\"insideTable\"\r\n    [dateType]=\"calendarType\"\r\n    [label]=\"label\"\r\n    [value]=\"{\r\n      startDate: control.value?.startDate,\r\n      endDate: control.value?.endDate\r\n    }\"\r\n    [hasLabel]=\"!!label\"\r\n  >\r\n  </app-info-item>\r\n</ng-container>\r\n}\r\n", styles: [":host{flex-grow:1}\n"] }]
         }], propDecorators: { className: [{
                 type: Input
             }], yearOnly: [{
@@ -2663,7 +2633,7 @@ class InputComponent extends ControlValueAccessorDirective {
                 useExisting: forwardRef(() => InputComponent),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "@if(!isReadOnly){\r\n@if(label){\r\n<div class=\"d-flex justify-content-between mb-1\">\r\n  <span class=\"form-label mb-0\">{{ label }}</span\r\n  > @if(!required){<span class=\"fs-11 fc-dark-gray\">{{\r\n    i18n.translate(\"Optional\")\r\n  }}</span\r\n  >} @if(hasTooltip){\r\n  <span class=\"form-label mb-0\">\r\n    {{ tooltip }}\r\n    <ds-icon\r\n      icon=\"info fs-22\"\r\n      class=\"cursor-pointer\"\r\n      [satPopoverAnchor]=\"popover\"\r\n      (click)=\"popover.toggle(); $event.stopImmediatePropagation()\"\r\n    ></ds-icon>\r\n  </span>\r\n  }\r\n</div>\r\n}\r\n<mat-form-field\r\n  class=\"primary-form {{ className }}\"\r\n  [ngClass]=\"{ 'input-disabled': control.disabled }\"\r\n  [floatLabel]=\"floatLabel\"\r\n>\r\n  @if(iconPrefixName){<span class=\"sfi {{ iconPrefixName }}\"></span>}\r\n  <label class=\"mat-form-content\">\r\n    <!-- add input for ar && en custom directive with add type = arOnly ||  type = enOnly-->\r\n    @if(type === 'arOnly'){\r\n    <input\r\n      arOnly\r\n      matInput\r\n      [value]=\"value\"\r\n      oninput=\"validity.valid || (value='');\"\r\n      [formControl]=\"control\"\r\n      [required]=\"required\"\r\n      [placeholder]=\"placeholder\"\r\n    />\r\n    } @else if(type === 'enOnly'){\r\n    <input\r\n      enOnly\r\n      matInput\r\n      [value]=\"value\"\r\n      oninput=\"validity.valid || (value='');\"\r\n      [formControl]=\"control\"\r\n      [required]=\"required\"\r\n      [placeholder]=\"placeholder\"\r\n    />\r\n    }\r\n    @else{\r\n    <input\r\n      matInput\r\n      [value]=\"value\"\r\n      oninput=\"validity.valid || (value='');\"\r\n      [formControl]=\"control\"\r\n      [type]=\"type\"\r\n      [placeholder]=\"placeholder\"\r\n    />\r\n    }\r\n  </label>\r\n  \r\n  @if(iconSuffixName){<span matSuffix class=\"sfi {{ iconSuffixName }}\"></span>}\r\n  @if(hint){\r\n  <mat-hint class=\"d-flex align-items-center gap-1 mt-1\">\r\n    <span\r\n      class=\"sfi sfi-info fs-17 fc-dark-gray\"\r\n      [ngClass]=\"{ 'fc-oasis-light-imp': value }\"\r\n    ></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<app-validation-errors [errors]=\"control.errors\"></app-validation-errors>\r\n\r\n} @if(isReadOnly && (showIfEmpty || control)){\r\n<ng-container class=\"info-section\">\r\n  <app-info-item\r\n    class=\"info-item w-100\"\r\n    [label]=\"label\"\r\n    [insideTable]=\"insideTable\"\r\n    [hasLabel]=\"!!label\"\r\n    [type]=\"type\"\r\n    [value]=\"control.value\"\r\n  ></app-info-item>\r\n</ng-container>\r\n}\r\n\r\n<sat-popover #popover [hasBackdrop]=\"true\" verticalAlign=\"below\">\r\n  <div class=\"default-popover p-3 fs-14\">\r\n    <span class=\"fs-14 fw-bold signature-notes\" [innerHTML]=\"tooltip\"></span>\r\n  </div>\r\n</sat-popover>\r\n", styles: [":host{flex-grow:1}.input-disabled{pointer-events:none;opacity:1.5}\n"], dependencies: [{ kind: "ngmodule", type: SatPopoverModule }, { kind: "component", type: i1$2.SatPopoverComponent, selector: "sat-popover", inputs: ["anchor", "horizontalAlign", "xAlign", "verticalAlign", "yAlign", "forceAlignment", "lockAlignment", "autoFocus", "restoreFocus", "scrollStrategy", "hasBackdrop", "interactiveClose", "openTransition", "closeTransition", "openAnimationStartAtScale", "closeAnimationEndAtScale", "backdropClass", "panelClass"], outputs: ["opened", "closed", "afterOpen", "afterClose", "backdropClicked", "overlayKeydown"] }, { kind: "directive", type: i1$2.SatPopoverAnchorDirective, selector: "[satPopoverAnchor]", inputs: ["satPopoverAnchor"], exportAs: ["satPopoverAnchor"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: InfoItemComponent, selector: "app-info-item", inputs: ["label", "value", "name", "type", "dateType", "multiple", "insideTable", "hasLabel", "arrayList", "actionType", "download"] }, { kind: "component", type: ValidationErrorsComponent, selector: "app-validation-errors", inputs: ["errors", "customErrorMessages"] }, { kind: "directive", type: EnOnlyDirective, selector: "[enOnly]" }, { kind: "directive", type: ArOnlyDirective, selector: "[arOnly]" }, { kind: "ngmodule", type: i3$1.MatFormFieldModule }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }] });
+        ], usesInheritance: true, ngImport: i0, template: "@if(!isReadOnly){\r\n@if(label){\r\n<div class=\"d-flex justify-content-between mb-1\">\r\n  <span class=\"form-label mb-0\">{{ label }}</span\r\n  > @if(!required){<span class=\"fs-11 fc-dark-gray\">{{\r\n    i18n.translate(\"Optional\")\r\n  }}</span\r\n  >} @if(hasTooltip){\r\n  <span class=\"form-label mb-0\">\r\n    {{ tooltip }}\r\n    <ds-icon\r\n      icon=\"info fs-22\"\r\n      class=\"cursor-pointer\"\r\n      [satPopoverAnchor]=\"popover\"\r\n      (click)=\"popover.toggle(); $event.stopImmediatePropagation()\"\r\n    ></ds-icon>\r\n  </span>\r\n  }\r\n</div>\r\n}\r\n<mat-form-field\r\n  class=\"primary-form {{ className }}\"\r\n  [ngClass]=\"{ 'input-disabled': control.disabled }\"\r\n  [floatLabel]=\"floatLabel\"\r\n>\r\n  @if(iconPrefixName){<span class=\"sfi {{ iconPrefixName }}\"></span>}\r\n  <label class=\"mat-form-content\">\r\n    <!-- add input for ar && en custom directive with add type = arOnly ||  type = enOnly-->\r\n    @if(type === 'arOnly'){\r\n    <input\r\n      arOnly\r\n      matInput\r\n      [value]=\"value\"\r\n      oninput=\"validity.valid || (value='');\"\r\n      [formControl]=\"control\"\r\n      [required]=\"required\"\r\n      [placeholder]=\"placeholder\"\r\n    />\r\n    } @else if(type === 'enOnly'){\r\n    <input\r\n      enOnly\r\n      matInput\r\n      [value]=\"value\"\r\n      oninput=\"validity.valid || (value='');\"\r\n      [formControl]=\"control\"\r\n      [required]=\"required\"\r\n      [placeholder]=\"placeholder\"\r\n    />\r\n    }\r\n    @else{\r\n    <input\r\n      matInput\r\n      [value]=\"value\"\r\n      oninput=\"validity.valid || (value='');\"\r\n      [formControl]=\"control\"\r\n      [type]=\"type\"\r\n      [placeholder]=\"placeholder\"\r\n    />\r\n    }\r\n  </label>\r\n  \r\n  @if(iconSuffixName){<span matSuffix class=\"sfi {{ iconSuffixName }}\"></span>}\r\n  @if(hint){\r\n  <mat-hint class=\"d-flex align-items-center gap-1 mt-1\">\r\n    <span\r\n      class=\"sfi sfi-info fs-17 fc-dark-gray\"\r\n      [ngClass]=\"{ 'fc-oasis-light-imp': value }\"\r\n    ></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<app-validation-errors [errors]=\"control.errors\"></app-validation-errors>\r\n\r\n} @if(isReadOnly && (showIfEmpty || control)){\r\n<ng-container class=\"info-section\">\r\n  <app-info-item\r\n    class=\"info-item w-100\"\r\n    [label]=\"label\"\r\n    [insideTable]=\"insideTable\"\r\n    [hasLabel]=\"!!label\"\r\n    [type]=\"type\"\r\n    [value]=\"control.value\"\r\n  ></app-info-item>\r\n</ng-container>\r\n}\r\n\r\n<sat-popover #popover [hasBackdrop]=\"true\" verticalAlign=\"below\">\r\n  <div class=\"default-popover p-3 fs-14\">\r\n    <span class=\"fs-14 fw-bold signature-notes\" [innerHTML]=\"tooltip\"></span>\r\n  </div>\r\n</sat-popover>\r\n", styles: [":host{flex-grow:1}.input-disabled{pointer-events:none;opacity:1.5}\n"], dependencies: [{ kind: "ngmodule", type: SatPopoverModule }, { kind: "component", type: i1$1.SatPopoverComponent, selector: "sat-popover", inputs: ["anchor", "horizontalAlign", "xAlign", "verticalAlign", "yAlign", "forceAlignment", "lockAlignment", "autoFocus", "restoreFocus", "scrollStrategy", "hasBackdrop", "interactiveClose", "openTransition", "closeTransition", "openAnimationStartAtScale", "closeAnimationEndAtScale", "backdropClass", "panelClass"], outputs: ["opened", "closed", "afterOpen", "afterClose", "backdropClicked", "overlayKeydown"] }, { kind: "directive", type: i1$1.SatPopoverAnchorDirective, selector: "[satPopoverAnchor]", inputs: ["satPopoverAnchor"], exportAs: ["satPopoverAnchor"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: InfoItemComponent, selector: "app-info-item", inputs: ["label", "value", "name", "type", "dateType", "multiple", "insideTable", "hasLabel", "arrayList", "actionType", "download"] }, { kind: "component", type: ValidationErrorsComponent, selector: "app-validation-errors", inputs: ["errors", "customErrorMessages"] }, { kind: "directive", type: EnOnlyDirective, selector: "[enOnly]" }, { kind: "directive", type: ArOnlyDirective, selector: "[arOnly]" }, { kind: "ngmodule", type: i3$1.MatFormFieldModule }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: InputComponent, decorators: [{
             type: Component,
@@ -2785,7 +2755,7 @@ class InputNumberComponent extends ControlValueAccessorDirective {
                 useExisting: forwardRef(() => InputNumberComponent),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "@if(!isReadOnly){\r\n  @if(label){\r\n  <div class=\"d-flex justify-content-between mb-1\">\r\n    <span class=\"form-label mb-0\">{{ label }}</span\r\n    > @if(!required){<span class=\"fs-11 fc-dark-gray\">{{\r\n      i18n.translate(\"Optional\")\r\n    }}</span\r\n    >} @if(hasTooltip){\r\n    <span class=\"form-label mb-0\">\r\n      {{ tooltip }}\r\n      <ds-icon\r\n        icon=\"info fs-22\"\r\n        class=\"cursor-pointer\"\r\n        [satPopoverAnchor]=\"popover\"\r\n        (click)=\"popover.toggle(); $event.stopImmediatePropagation()\"\r\n      ></ds-icon>\r\n    </span>\r\n    }\r\n  </div>\r\n  }\r\n  <mat-form-field\r\n    class=\"primary-form {{ className }}\"\r\n    [ngClass]=\"{ 'input-disabled': control.disabled }\"\r\n    [floatLabel]=\"floatLabel\"\r\n  >\r\n    @if(iconPrefixName){<span class=\"sfi {{ iconPrefixName }}\"></span>}\r\n    @if(loading){<span\r\n      class=\"sfi sfi-spinner d-inline-block spin fc-coral\"\r\n      matSuffix\r\n    ></span\r\n    >}\r\n    <label class=\"mat-form-content\">\r\n      <!-- add input for ar && en custom directive with add type = arOnly ||  type = enOnly-->\r\n      <input\r\n        matInput\r\n        [value]=\"value\"\r\n        oninput=\"validity.valid || (value='');\"\r\n        [formControl]=\"control\"\r\n        [type]=\"type\"\r\n        [placeholder]=\"placeholder\"\r\n        numberOnly\r\n      />\r\n    </label>\r\n    @if(iconSuffixName){<span matSuffix class=\"sfi {{ iconSuffixName }}\"></span>}\r\n    @if(hint){\r\n    <mat-hint class=\"d-flex align-items-center gap-1 mt-1\">\r\n      <span\r\n        class=\"sfi sfi-info fs-17 fc-dark-gray\"\r\n        [ngClass]=\"{ 'fc-oasis-light-imp': value }\"\r\n      ></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  <app-validation-errors [errors]=\"control.errors\"></app-validation-errors>\r\n  } @if(isReadOnly && (showIfEmpty || control)){\r\n  <ng-container class=\"info-section\">\r\n    <app-info-item\r\n      class=\"info-item w-100\"\r\n      [label]=\"label\"\r\n      [insideTable]=\"insideTable\"\r\n      [hasLabel]=\"!!label\"\r\n      [type]=\"type\"\r\n      [value]=\"control.value\"\r\n    ></app-info-item>\r\n  </ng-container>\r\n  }\r\n  <sat-popover #popover [hasBackdrop]=\"true\" verticalAlign=\"below\">\r\n    <div class=\"default-popover p-3 fs-14\">\r\n      <span class=\"fs-14 fw-bold signature-notes\" [innerHTML]=\"tooltip\"></span>\r\n    </div>\r\n  </sat-popover>\r\n  ", styles: [":host{flex-grow:1}.input-disabled{pointer-events:none;opacity:1.5}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: InfoItemComponent, selector: "app-info-item", inputs: ["label", "value", "name", "type", "dateType", "multiple", "insideTable", "hasLabel", "arrayList", "actionType", "download"] }, { kind: "ngmodule", type: SatPopoverModule }, { kind: "component", type: i1$2.SatPopoverComponent, selector: "sat-popover", inputs: ["anchor", "horizontalAlign", "xAlign", "verticalAlign", "yAlign", "forceAlignment", "lockAlignment", "autoFocus", "restoreFocus", "scrollStrategy", "hasBackdrop", "interactiveClose", "openTransition", "closeTransition", "openAnimationStartAtScale", "closeAnimationEndAtScale", "backdropClass", "panelClass"], outputs: ["opened", "closed", "afterOpen", "afterClose", "backdropClicked", "overlayKeydown"] }, { kind: "directive", type: i1$2.SatPopoverAnchorDirective, selector: "[satPopoverAnchor]", inputs: ["satPopoverAnchor"], exportAs: ["satPopoverAnchor"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: NumberDirective, selector: "[numberOnly]", inputs: ["decimals"] }, { kind: "component", type: ValidationErrorsComponent, selector: "app-validation-errors", inputs: ["errors", "customErrorMessages"] }] });
+        ], usesInheritance: true, ngImport: i0, template: "@if(!isReadOnly){\r\n  @if(label){\r\n  <div class=\"d-flex justify-content-between mb-1\">\r\n    <span class=\"form-label mb-0\">{{ label }}</span\r\n    > @if(!required){<span class=\"fs-11 fc-dark-gray\">{{\r\n      i18n.translate(\"Optional\")\r\n    }}</span\r\n    >} @if(hasTooltip){\r\n    <span class=\"form-label mb-0\">\r\n      {{ tooltip }}\r\n      <ds-icon\r\n        icon=\"info fs-22\"\r\n        class=\"cursor-pointer\"\r\n        [satPopoverAnchor]=\"popover\"\r\n        (click)=\"popover.toggle(); $event.stopImmediatePropagation()\"\r\n      ></ds-icon>\r\n    </span>\r\n    }\r\n  </div>\r\n  }\r\n  <mat-form-field\r\n    class=\"primary-form {{ className }}\"\r\n    [ngClass]=\"{ 'input-disabled': control.disabled }\"\r\n    [floatLabel]=\"floatLabel\"\r\n  >\r\n    @if(iconPrefixName){<span class=\"sfi {{ iconPrefixName }}\"></span>}\r\n    @if(loading){<span\r\n      class=\"sfi sfi-spinner d-inline-block spin fc-coral\"\r\n      matSuffix\r\n    ></span\r\n    >}\r\n    <label class=\"mat-form-content\">\r\n      <!-- add input for ar && en custom directive with add type = arOnly ||  type = enOnly-->\r\n      <input\r\n        matInput\r\n        [value]=\"value\"\r\n        oninput=\"validity.valid || (value='');\"\r\n        [formControl]=\"control\"\r\n        [type]=\"type\"\r\n        [placeholder]=\"placeholder\"\r\n        numberOnly\r\n      />\r\n    </label>\r\n    @if(iconSuffixName){<span matSuffix class=\"sfi {{ iconSuffixName }}\"></span>}\r\n    @if(hint){\r\n    <mat-hint class=\"d-flex align-items-center gap-1 mt-1\">\r\n      <span\r\n        class=\"sfi sfi-info fs-17 fc-dark-gray\"\r\n        [ngClass]=\"{ 'fc-oasis-light-imp': value }\"\r\n      ></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  <app-validation-errors [errors]=\"control.errors\"></app-validation-errors>\r\n  } @if(isReadOnly && (showIfEmpty || control)){\r\n  <ng-container class=\"info-section\">\r\n    <app-info-item\r\n      class=\"info-item w-100\"\r\n      [label]=\"label\"\r\n      [insideTable]=\"insideTable\"\r\n      [hasLabel]=\"!!label\"\r\n      [type]=\"type\"\r\n      [value]=\"control.value\"\r\n    ></app-info-item>\r\n  </ng-container>\r\n  }\r\n  <sat-popover #popover [hasBackdrop]=\"true\" verticalAlign=\"below\">\r\n    <div class=\"default-popover p-3 fs-14\">\r\n      <span class=\"fs-14 fw-bold signature-notes\" [innerHTML]=\"tooltip\"></span>\r\n    </div>\r\n  </sat-popover>\r\n  ", styles: [":host{flex-grow:1}.input-disabled{pointer-events:none;opacity:1.5}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: InfoItemComponent, selector: "app-info-item", inputs: ["label", "value", "name", "type", "dateType", "multiple", "insideTable", "hasLabel", "arrayList", "actionType", "download"] }, { kind: "ngmodule", type: SatPopoverModule }, { kind: "component", type: i1$1.SatPopoverComponent, selector: "sat-popover", inputs: ["anchor", "horizontalAlign", "xAlign", "verticalAlign", "yAlign", "forceAlignment", "lockAlignment", "autoFocus", "restoreFocus", "scrollStrategy", "hasBackdrop", "interactiveClose", "openTransition", "closeTransition", "openAnimationStartAtScale", "closeAnimationEndAtScale", "backdropClass", "panelClass"], outputs: ["opened", "closed", "afterOpen", "afterClose", "backdropClicked", "overlayKeydown"] }, { kind: "directive", type: i1$1.SatPopoverAnchorDirective, selector: "[satPopoverAnchor]", inputs: ["satPopoverAnchor"], exportAs: ["satPopoverAnchor"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: NumberDirective, selector: "[numberOnly]", inputs: ["decimals"] }, { kind: "component", type: ValidationErrorsComponent, selector: "app-validation-errors", inputs: ["errors", "customErrorMessages"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: InputNumberComponent, decorators: [{
             type: Component,
@@ -2844,7 +2814,7 @@ class InputEmailComponent extends ControlValueAccessorDirective {
                 useExisting: forwardRef(() => InputEmailComponent),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "@if(!isReadOnly){\r\n  @if(label){\r\n  <div class=\"d-flex justify-content-between mb-1\">\r\n    <span class=\"form-label mb-0\">{{ label }}</span\r\n    > @if(!required){<span class=\"fs-11 fc-dark-gray\">{{\r\n      i18n.translate(\"Optional\")\r\n    }}</span\r\n    >} @if(hasTooltip){\r\n    <span class=\"form-label mb-0\">\r\n      {{ tooltip }}\r\n      <ds-icon\r\n        icon=\"info fs-22\"\r\n        class=\"cursor-pointer\"\r\n        [satPopoverAnchor]=\"popover\"\r\n        (click)=\"popover.toggle(); $event.stopImmediatePropagation()\"\r\n      ></ds-icon>\r\n    </span>\r\n    }\r\n  </div>\r\n  }\r\n  <mat-form-field\r\n    class=\"primary-form {{ className }}\"\r\n    [ngClass]=\"{ 'input-disabled': control.disabled }\"\r\n    [floatLabel]=\"floatLabel\"\r\n  >\r\n    @if(iconPrefixName){<span class=\"sfi {{ iconPrefixName }}\"></span>}\r\n    @if(loading){<span\r\n      class=\"sfi sfi-spinner d-inline-block spin fc-coral\"\r\n      matSuffix\r\n    ></span\r\n    >}\r\n    <label class=\"mat-form-content\">\r\n      <!-- add input for ar && en custom directive with add type = arOnly ||  type = enOnly-->\r\n      <input\r\n        matInput\r\n        [value]=\"value\"\r\n        oninput=\"validity.valid || (value='');\"\r\n        [formControl]=\"control\"\r\n        [type]=\"type\"\r\n        [placeholder]=\"placeholder\"\r\n        (change)=\"displayErrors($event)\"\r\n      />\r\n    </label>\r\n    @if(iconSuffixName){<span matSuffix class=\"sfi {{ iconSuffixName }}\"></span>}\r\n    @if(hint){\r\n    <mat-hint class=\"d-flex align-items-center gap-1 mt-1\">\r\n      <span\r\n        class=\"sfi sfi-info fs-17 fc-dark-gray\"\r\n        [ngClass]=\"{ 'fc-oasis-light-imp': value }\"\r\n      ></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  <app-validation-errors [errors]=\"control.errors\"></app-validation-errors>\r\n  } @if(isReadOnly && (showIfEmpty || control)){\r\n  <ng-container class=\"info-section\">\r\n    <app-info-item\r\n      class=\"info-item w-100\"\r\n      [label]=\"label\"\r\n      [insideTable]=\"insideTable\"\r\n      [hasLabel]=\"!!label\"\r\n      [type]=\"type\"\r\n      [value]=\"control.value\"\r\n    ></app-info-item>\r\n  </ng-container>\r\n  }\r\n  <sat-popover #popover [hasBackdrop]=\"true\" verticalAlign=\"below\">\r\n    <div class=\"default-popover p-3 fs-14\">\r\n      <span class=\"fs-14 fw-bold signature-notes\" [innerHTML]=\"tooltip\"></span>\r\n    </div>\r\n  </sat-popover>\r\n  ", styles: [":host{flex-grow:1}.input-disabled{pointer-events:none;opacity:1.5}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: InfoItemComponent, selector: "app-info-item", inputs: ["label", "value", "name", "type", "dateType", "multiple", "insideTable", "hasLabel", "arrayList", "actionType", "download"] }, { kind: "ngmodule", type: SatPopoverModule }, { kind: "component", type: i1$2.SatPopoverComponent, selector: "sat-popover", inputs: ["anchor", "horizontalAlign", "xAlign", "verticalAlign", "yAlign", "forceAlignment", "lockAlignment", "autoFocus", "restoreFocus", "scrollStrategy", "hasBackdrop", "interactiveClose", "openTransition", "closeTransition", "openAnimationStartAtScale", "closeAnimationEndAtScale", "backdropClass", "panelClass"], outputs: ["opened", "closed", "afterOpen", "afterClose", "backdropClicked", "overlayKeydown"] }, { kind: "directive", type: i1$2.SatPopoverAnchorDirective, selector: "[satPopoverAnchor]", inputs: ["satPopoverAnchor"], exportAs: ["satPopoverAnchor"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: ValidationErrorsComponent, selector: "app-validation-errors", inputs: ["errors", "customErrorMessages"] }] });
+        ], usesInheritance: true, ngImport: i0, template: "@if(!isReadOnly){\r\n  @if(label){\r\n  <div class=\"d-flex justify-content-between mb-1\">\r\n    <span class=\"form-label mb-0\">{{ label }}</span\r\n    > @if(!required){<span class=\"fs-11 fc-dark-gray\">{{\r\n      i18n.translate(\"Optional\")\r\n    }}</span\r\n    >} @if(hasTooltip){\r\n    <span class=\"form-label mb-0\">\r\n      {{ tooltip }}\r\n      <ds-icon\r\n        icon=\"info fs-22\"\r\n        class=\"cursor-pointer\"\r\n        [satPopoverAnchor]=\"popover\"\r\n        (click)=\"popover.toggle(); $event.stopImmediatePropagation()\"\r\n      ></ds-icon>\r\n    </span>\r\n    }\r\n  </div>\r\n  }\r\n  <mat-form-field\r\n    class=\"primary-form {{ className }}\"\r\n    [ngClass]=\"{ 'input-disabled': control.disabled }\"\r\n    [floatLabel]=\"floatLabel\"\r\n  >\r\n    @if(iconPrefixName){<span class=\"sfi {{ iconPrefixName }}\"></span>}\r\n    @if(loading){<span\r\n      class=\"sfi sfi-spinner d-inline-block spin fc-coral\"\r\n      matSuffix\r\n    ></span\r\n    >}\r\n    <label class=\"mat-form-content\">\r\n      <!-- add input for ar && en custom directive with add type = arOnly ||  type = enOnly-->\r\n      <input\r\n        matInput\r\n        [value]=\"value\"\r\n        oninput=\"validity.valid || (value='');\"\r\n        [formControl]=\"control\"\r\n        [type]=\"type\"\r\n        [placeholder]=\"placeholder\"\r\n        (change)=\"displayErrors($event)\"\r\n      />\r\n    </label>\r\n    @if(iconSuffixName){<span matSuffix class=\"sfi {{ iconSuffixName }}\"></span>}\r\n    @if(hint){\r\n    <mat-hint class=\"d-flex align-items-center gap-1 mt-1\">\r\n      <span\r\n        class=\"sfi sfi-info fs-17 fc-dark-gray\"\r\n        [ngClass]=\"{ 'fc-oasis-light-imp': value }\"\r\n      ></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  <app-validation-errors [errors]=\"control.errors\"></app-validation-errors>\r\n  } @if(isReadOnly && (showIfEmpty || control)){\r\n  <ng-container class=\"info-section\">\r\n    <app-info-item\r\n      class=\"info-item w-100\"\r\n      [label]=\"label\"\r\n      [insideTable]=\"insideTable\"\r\n      [hasLabel]=\"!!label\"\r\n      [type]=\"type\"\r\n      [value]=\"control.value\"\r\n    ></app-info-item>\r\n  </ng-container>\r\n  }\r\n  <sat-popover #popover [hasBackdrop]=\"true\" verticalAlign=\"below\">\r\n    <div class=\"default-popover p-3 fs-14\">\r\n      <span class=\"fs-14 fw-bold signature-notes\" [innerHTML]=\"tooltip\"></span>\r\n    </div>\r\n  </sat-popover>\r\n  ", styles: [":host{flex-grow:1}.input-disabled{pointer-events:none;opacity:1.5}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: InfoItemComponent, selector: "app-info-item", inputs: ["label", "value", "name", "type", "dateType", "multiple", "insideTable", "hasLabel", "arrayList", "actionType", "download"] }, { kind: "ngmodule", type: SatPopoverModule }, { kind: "component", type: i1$1.SatPopoverComponent, selector: "sat-popover", inputs: ["anchor", "horizontalAlign", "xAlign", "verticalAlign", "yAlign", "forceAlignment", "lockAlignment", "autoFocus", "restoreFocus", "scrollStrategy", "hasBackdrop", "interactiveClose", "openTransition", "closeTransition", "openAnimationStartAtScale", "closeAnimationEndAtScale", "backdropClass", "panelClass"], outputs: ["opened", "closed", "afterOpen", "afterClose", "backdropClicked", "overlayKeydown"] }, { kind: "directive", type: i1$1.SatPopoverAnchorDirective, selector: "[satPopoverAnchor]", inputs: ["satPopoverAnchor"], exportAs: ["satPopoverAnchor"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: ValidationErrorsComponent, selector: "app-validation-errors", inputs: ["errors", "customErrorMessages"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: InputEmailComponent, decorators: [{
             type: Component,
@@ -2898,7 +2868,7 @@ class InputMaskComponent extends ControlValueAccessorDirective {
                 useExisting: forwardRef(() => InputMaskComponent),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "\r\n@if(!isReadOnly){\r\n  <ng-container>\r\n    <!-- <app-form-label [label]=\"label\" [optional]=\"!required\" [hideOption]=\"hideOption\" [showLabel]=\"showLabel\"></app-form-label> -->\r\n     @if(label){\r\n      <div class=\"d-flex justify-content-between mb-1\">\r\n        <span class=\"form-label mb-0\">{{label}}</span>\r\n        @if(!required){\r\n          <span class=\"fs-11 fc-dark-gray\">{{i18n.translate('Optional')}}\r\n          </span>\r\n        }\r\n      </div>\r\n     }\r\n    \r\n    <mat-form-field class=\"primary-form {{className}}\" [ngClass]=\"{'input-disabled' : isDisabled }\"\r\n      [floatLabel]=\"floatLabel\">\r\n  \r\n      @if(iconPrefixName){\r\n        <span matPrefix class=\"sfi {{iconPrefixName}}\"></span>\r\n      }\r\n      <label class=\"mat-form-content\">\r\n        <input matInput [placeholder]=\"placeholder\" [value]=\"value\" [attr.disabled]=\"isDisabled\" [mask]=\"mask\"\r\n          [showMaskTyped]=\"false\" oninput=\"validity.valid || (value='');\" [formControl]=\"control\"\r\n          [required]=\"required\" [placeholder]=\"placeholder\">\r\n      </label>\r\n  \r\n      @if(matSuffix){\r\n      <span  matSuffix class=\"sfi {{iconSuffixName}}\"></span>\r\n      }\r\n      @if(type === 'number'){\r\n        <div  matSuffix class=\"d-flex align-items-center gap-2\">\r\n          @if(numberSuffixName){\r\n          <span class=\"fs-14 fw-medium\">{{numberSuffixName}}</span>\r\n          }\r\n          <!-- <span class=\"sfi sfi-minus p-2 bc-light-gray fc-black\"></span>\r\n          <span class=\"sfi sfi-plus p-2 bc-light-gray fc-black\"></span> -->\r\n        </div>\r\n      }\r\n   <!-- @if((!control?.valid)){\r\n    <mat-error class=\"mb-2\">\r\n      {{i18n.translate('validFieldError')}}{{label}}\r\n    </mat-error>\r\n   } -->\r\n     \r\n  \r\n      <!-- <mat-error *ngIf=\"(type ==='email' && !control?.valid)\">\r\n        {{i18n.translate('validEmailError')}}\r\n      </mat-error> -->\r\n      @if(showHint){\r\n        <mat-hint>\r\n          <span class=\"sfi sfi-check-circle font-10 fc-dark-gray\" [ngClass]=\"{'fc-oasis-light-imp':value}\"></span>\r\n          <span class=\"mx-1\"></span>\r\n          <span class=\"fs-12 fc-onyx\">{{hint}}</span>\r\n        </mat-hint>\r\n      }\r\n    </mat-form-field>\r\n    <!-- <span class=\"fc-coral\" style=\"color:#f44336\" *ngIf=\"( showErrorMessage && control.value)\">\r\n      {{errorMessage}}\r\n    </span> -->\r\n  \r\n  </ng-container>\r\n}\r\n\r\n@if(isReadOnly && control){\r\n  <ng-container class=\"info-section\">\r\n    <app-info-item class=\"info-item w-100\" [label]=\"label\" [insideTable]=\"insideTable\" [hasLabel]=\"label ? true: false\"\r\n      [value]=\"control\"></app-info-item>\r\n  </ng-container>\r\n  \r\n}\r\n\r\n\r\n<!-- section tooltip -->\r\n<sat-popover #popover [hasBackdrop]=\"true\" verticalAlign=\"below\">\r\n  <div class=\"deafult-tooltip\">\r\n    {{tooltip}}\r\n  </div>\r\n</sat-popover>\r\n", styles: [":host{flex-grow:1}\n"], dependencies: [{ kind: "ngmodule", type: SatPopoverModule }, { kind: "component", type: i1$2.SatPopoverComponent, selector: "sat-popover", inputs: ["anchor", "horizontalAlign", "xAlign", "verticalAlign", "yAlign", "forceAlignment", "lockAlignment", "autoFocus", "restoreFocus", "scrollStrategy", "hasBackdrop", "interactiveClose", "openTransition", "closeTransition", "openAnimationStartAtScale", "closeAnimationEndAtScale", "backdropClass", "panelClass"], outputs: ["opened", "closed", "afterOpen", "afterClose", "backdropClicked", "overlayKeydown"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "component", type: InfoItemComponent, selector: "app-info-item", inputs: ["label", "value", "name", "type", "dateType", "multiple", "insideTable", "hasLabel", "arrayList", "actionType", "download"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+        ], usesInheritance: true, ngImport: i0, template: "\r\n@if(!isReadOnly){\r\n  <ng-container>\r\n    <!-- <app-form-label [label]=\"label\" [optional]=\"!required\" [hideOption]=\"hideOption\" [showLabel]=\"showLabel\"></app-form-label> -->\r\n     @if(label){\r\n      <div class=\"d-flex justify-content-between mb-1\">\r\n        <span class=\"form-label mb-0\">{{label}}</span>\r\n        @if(!required){\r\n          <span class=\"fs-11 fc-dark-gray\">{{i18n.translate('Optional')}}\r\n          </span>\r\n        }\r\n      </div>\r\n     }\r\n    \r\n    <mat-form-field class=\"primary-form {{className}}\" [ngClass]=\"{'input-disabled' : isDisabled }\"\r\n      [floatLabel]=\"floatLabel\">\r\n  \r\n      @if(iconPrefixName){\r\n        <span matPrefix class=\"sfi {{iconPrefixName}}\"></span>\r\n      }\r\n      <label class=\"mat-form-content\">\r\n        <input matInput [placeholder]=\"placeholder\" [value]=\"value\" [attr.disabled]=\"isDisabled\" [mask]=\"mask\"\r\n          [showMaskTyped]=\"false\" oninput=\"validity.valid || (value='');\" [formControl]=\"control\"\r\n          [required]=\"required\" [placeholder]=\"placeholder\">\r\n      </label>\r\n  \r\n      @if(matSuffix){\r\n      <span  matSuffix class=\"sfi {{iconSuffixName}}\"></span>\r\n      }\r\n      @if(type === 'number'){\r\n        <div  matSuffix class=\"d-flex align-items-center gap-2\">\r\n          @if(numberSuffixName){\r\n          <span class=\"fs-14 fw-medium\">{{numberSuffixName}}</span>\r\n          }\r\n          <!-- <span class=\"sfi sfi-minus p-2 bc-light-gray fc-black\"></span>\r\n          <span class=\"sfi sfi-plus p-2 bc-light-gray fc-black\"></span> -->\r\n        </div>\r\n      }\r\n   <!-- @if((!control?.valid)){\r\n    <mat-error class=\"mb-2\">\r\n      {{i18n.translate('validFieldError')}}{{label}}\r\n    </mat-error>\r\n   } -->\r\n     \r\n  \r\n      <!-- <mat-error *ngIf=\"(type ==='email' && !control?.valid)\">\r\n        {{i18n.translate('validEmailError')}}\r\n      </mat-error> -->\r\n      @if(showHint){\r\n        <mat-hint>\r\n          <span class=\"sfi sfi-check-circle font-10 fc-dark-gray\" [ngClass]=\"{'fc-oasis-light-imp':value}\"></span>\r\n          <span class=\"mx-1\"></span>\r\n          <span class=\"fs-12 fc-onyx\">{{hint}}</span>\r\n        </mat-hint>\r\n      }\r\n    </mat-form-field>\r\n    <!-- <span class=\"fc-coral\" style=\"color:#f44336\" *ngIf=\"( showErrorMessage && control.value)\">\r\n      {{errorMessage}}\r\n    </span> -->\r\n  \r\n  </ng-container>\r\n}\r\n\r\n@if(isReadOnly && control){\r\n  <ng-container class=\"info-section\">\r\n    <app-info-item class=\"info-item w-100\" [label]=\"label\" [insideTable]=\"insideTable\" [hasLabel]=\"label ? true: false\"\r\n      [value]=\"control\"></app-info-item>\r\n  </ng-container>\r\n  \r\n}\r\n\r\n\r\n<!-- section tooltip -->\r\n<sat-popover #popover [hasBackdrop]=\"true\" verticalAlign=\"below\">\r\n  <div class=\"deafult-tooltip\">\r\n    {{tooltip}}\r\n  </div>\r\n</sat-popover>\r\n", styles: [":host{flex-grow:1}\n"], dependencies: [{ kind: "ngmodule", type: SatPopoverModule }, { kind: "component", type: i1$1.SatPopoverComponent, selector: "sat-popover", inputs: ["anchor", "horizontalAlign", "xAlign", "verticalAlign", "yAlign", "forceAlignment", "lockAlignment", "autoFocus", "restoreFocus", "scrollStrategy", "hasBackdrop", "interactiveClose", "openTransition", "closeTransition", "openAnimationStartAtScale", "closeAnimationEndAtScale", "backdropClass", "panelClass"], outputs: ["opened", "closed", "afterOpen", "afterClose", "backdropClicked", "overlayKeydown"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "component", type: InfoItemComponent, selector: "app-info-item", inputs: ["label", "value", "name", "type", "dateType", "multiple", "insideTable", "hasLabel", "arrayList", "actionType", "download"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: InputMaskComponent, decorators: [{
             type: Component,
@@ -2908,7 +2878,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                             useExisting: forwardRef(() => InputMaskComponent),
                             multi: true,
                         },
-                    ], imports: [SatPopoverModule, MatFormField, NgxMaskDirective, NgIf, InfoItemComponent, ReactiveFormsModule, NgClass], template: "\r\n@if(!isReadOnly){\r\n  <ng-container>\r\n    <!-- <app-form-label [label]=\"label\" [optional]=\"!required\" [hideOption]=\"hideOption\" [showLabel]=\"showLabel\"></app-form-label> -->\r\n     @if(label){\r\n      <div class=\"d-flex justify-content-between mb-1\">\r\n        <span class=\"form-label mb-0\">{{label}}</span>\r\n        @if(!required){\r\n          <span class=\"fs-11 fc-dark-gray\">{{i18n.translate('Optional')}}\r\n          </span>\r\n        }\r\n      </div>\r\n     }\r\n    \r\n    <mat-form-field class=\"primary-form {{className}}\" [ngClass]=\"{'input-disabled' : isDisabled }\"\r\n      [floatLabel]=\"floatLabel\">\r\n  \r\n      @if(iconPrefixName){\r\n        <span matPrefix class=\"sfi {{iconPrefixName}}\"></span>\r\n      }\r\n      <label class=\"mat-form-content\">\r\n        <input matInput [placeholder]=\"placeholder\" [value]=\"value\" [attr.disabled]=\"isDisabled\" [mask]=\"mask\"\r\n          [showMaskTyped]=\"false\" oninput=\"validity.valid || (value='');\" [formControl]=\"control\"\r\n          [required]=\"required\" [placeholder]=\"placeholder\">\r\n      </label>\r\n  \r\n      @if(matSuffix){\r\n      <span  matSuffix class=\"sfi {{iconSuffixName}}\"></span>\r\n      }\r\n      @if(type === 'number'){\r\n        <div  matSuffix class=\"d-flex align-items-center gap-2\">\r\n          @if(numberSuffixName){\r\n          <span class=\"fs-14 fw-medium\">{{numberSuffixName}}</span>\r\n          }\r\n          <!-- <span class=\"sfi sfi-minus p-2 bc-light-gray fc-black\"></span>\r\n          <span class=\"sfi sfi-plus p-2 bc-light-gray fc-black\"></span> -->\r\n        </div>\r\n      }\r\n   <!-- @if((!control?.valid)){\r\n    <mat-error class=\"mb-2\">\r\n      {{i18n.translate('validFieldError')}}{{label}}\r\n    </mat-error>\r\n   } -->\r\n     \r\n  \r\n      <!-- <mat-error *ngIf=\"(type ==='email' && !control?.valid)\">\r\n        {{i18n.translate('validEmailError')}}\r\n      </mat-error> -->\r\n      @if(showHint){\r\n        <mat-hint>\r\n          <span class=\"sfi sfi-check-circle font-10 fc-dark-gray\" [ngClass]=\"{'fc-oasis-light-imp':value}\"></span>\r\n          <span class=\"mx-1\"></span>\r\n          <span class=\"fs-12 fc-onyx\">{{hint}}</span>\r\n        </mat-hint>\r\n      }\r\n    </mat-form-field>\r\n    <!-- <span class=\"fc-coral\" style=\"color:#f44336\" *ngIf=\"( showErrorMessage && control.value)\">\r\n      {{errorMessage}}\r\n    </span> -->\r\n  \r\n  </ng-container>\r\n}\r\n\r\n@if(isReadOnly && control){\r\n  <ng-container class=\"info-section\">\r\n    <app-info-item class=\"info-item w-100\" [label]=\"label\" [insideTable]=\"insideTable\" [hasLabel]=\"label ? true: false\"\r\n      [value]=\"control\"></app-info-item>\r\n  </ng-container>\r\n  \r\n}\r\n\r\n\r\n<!-- section tooltip -->\r\n<sat-popover #popover [hasBackdrop]=\"true\" verticalAlign=\"below\">\r\n  <div class=\"deafult-tooltip\">\r\n    {{tooltip}}\r\n  </div>\r\n</sat-popover>\r\n", styles: [":host{flex-grow:1}\n"] }]
+                    ], imports: [
+                        SatPopoverModule,
+                        MatFormField,
+                        NgxMaskDirective,
+                        InfoItemComponent,
+                        ReactiveFormsModule,
+                        NgClass,
+                    ], template: "\r\n@if(!isReadOnly){\r\n  <ng-container>\r\n    <!-- <app-form-label [label]=\"label\" [optional]=\"!required\" [hideOption]=\"hideOption\" [showLabel]=\"showLabel\"></app-form-label> -->\r\n     @if(label){\r\n      <div class=\"d-flex justify-content-between mb-1\">\r\n        <span class=\"form-label mb-0\">{{label}}</span>\r\n        @if(!required){\r\n          <span class=\"fs-11 fc-dark-gray\">{{i18n.translate('Optional')}}\r\n          </span>\r\n        }\r\n      </div>\r\n     }\r\n    \r\n    <mat-form-field class=\"primary-form {{className}}\" [ngClass]=\"{'input-disabled' : isDisabled }\"\r\n      [floatLabel]=\"floatLabel\">\r\n  \r\n      @if(iconPrefixName){\r\n        <span matPrefix class=\"sfi {{iconPrefixName}}\"></span>\r\n      }\r\n      <label class=\"mat-form-content\">\r\n        <input matInput [placeholder]=\"placeholder\" [value]=\"value\" [attr.disabled]=\"isDisabled\" [mask]=\"mask\"\r\n          [showMaskTyped]=\"false\" oninput=\"validity.valid || (value='');\" [formControl]=\"control\"\r\n          [required]=\"required\" [placeholder]=\"placeholder\">\r\n      </label>\r\n  \r\n      @if(matSuffix){\r\n      <span  matSuffix class=\"sfi {{iconSuffixName}}\"></span>\r\n      }\r\n      @if(type === 'number'){\r\n        <div  matSuffix class=\"d-flex align-items-center gap-2\">\r\n          @if(numberSuffixName){\r\n          <span class=\"fs-14 fw-medium\">{{numberSuffixName}}</span>\r\n          }\r\n          <!-- <span class=\"sfi sfi-minus p-2 bc-light-gray fc-black\"></span>\r\n          <span class=\"sfi sfi-plus p-2 bc-light-gray fc-black\"></span> -->\r\n        </div>\r\n      }\r\n   <!-- @if((!control?.valid)){\r\n    <mat-error class=\"mb-2\">\r\n      {{i18n.translate('validFieldError')}}{{label}}\r\n    </mat-error>\r\n   } -->\r\n     \r\n  \r\n      <!-- <mat-error *ngIf=\"(type ==='email' && !control?.valid)\">\r\n        {{i18n.translate('validEmailError')}}\r\n      </mat-error> -->\r\n      @if(showHint){\r\n        <mat-hint>\r\n          <span class=\"sfi sfi-check-circle font-10 fc-dark-gray\" [ngClass]=\"{'fc-oasis-light-imp':value}\"></span>\r\n          <span class=\"mx-1\"></span>\r\n          <span class=\"fs-12 fc-onyx\">{{hint}}</span>\r\n        </mat-hint>\r\n      }\r\n    </mat-form-field>\r\n    <!-- <span class=\"fc-coral\" style=\"color:#f44336\" *ngIf=\"( showErrorMessage && control.value)\">\r\n      {{errorMessage}}\r\n    </span> -->\r\n  \r\n  </ng-container>\r\n}\r\n\r\n@if(isReadOnly && control){\r\n  <ng-container class=\"info-section\">\r\n    <app-info-item class=\"info-item w-100\" [label]=\"label\" [insideTable]=\"insideTable\" [hasLabel]=\"label ? true: false\"\r\n      [value]=\"control\"></app-info-item>\r\n  </ng-container>\r\n  \r\n}\r\n\r\n\r\n<!-- section tooltip -->\r\n<sat-popover #popover [hasBackdrop]=\"true\" verticalAlign=\"below\">\r\n  <div class=\"deafult-tooltip\">\r\n    {{tooltip}}\r\n  </div>\r\n</sat-popover>\r\n", styles: [":host{flex-grow:1}\n"] }]
         }], propDecorators: { tooltip: [{
                 type: Input
             }], floatLabel: [{
@@ -3017,7 +2994,7 @@ class InputCurrencyComponent extends ControlValueAccessorDirective {
                 multi: true,
             },
             MycurrencyPipe
-        ], usesInheritance: true, ngImport: i0, template: "@if(!isReadOnly){\r\n  @if(label){\r\n  <div class=\"d-flex justify-content-between mb-1\">\r\n    <span class=\"form-label mb-0\">{{ label }}</span\r\n    > @if(!required){<span class=\"fs-11 fc-dark-gray\">{{\r\n      i18n.translate(\"Optional\")\r\n    }}</span\r\n    >} @if(hasTooltip){\r\n    <span class=\"form-label mb-0\">\r\n      {{ tooltip }}\r\n      <ds-icon\r\n        icon=\"info fs-22\"\r\n        class=\"cursor-pointer\"\r\n        [satPopoverAnchor]=\"popover\"\r\n        (click)=\"popover.toggle(); $event.stopImmediatePropagation()\"\r\n      ></ds-icon>\r\n    </span>\r\n    }\r\n  </div>\r\n  }\r\n  <mat-form-field\r\n    class=\"primary-form {{ className }}\"\r\n    [ngClass]=\"{ 'input-disabled': control.disabled }\"\r\n    [floatLabel]=\"floatLabel\"\r\n  >\r\n    @if(iconPrefixName){<span class=\"sfi {{ iconPrefixName }}\"></span>}\r\n    @if(loading){<span\r\n      class=\"sfi sfi-spinner d-inline-block spin fc-coral\"\r\n      matSuffix\r\n    ></span\r\n    >}\r\n    <label class=\"mat-form-content\">\r\n      <!-- add input for ar && en custom directive with add type = arOnly ||  type = enOnly-->\r\n      <input\r\n        matInput\r\n        [value]=\"value\"\r\n        oninput=\"validity.valid || (value='');\"\r\n        [formControl]=\"control\"\r\n        [type]=\"type\"\r\n        [placeholder]=\"placeholder\"\r\n        appMycurrency\r\n      />\r\n    </label>\r\n    @if(iconSuffixName){<span matSuffix class=\"sfi {{ iconSuffixName }}\"></span>}\r\n    @if(hint){\r\n    <mat-hint class=\"d-flex align-items-center gap-1 mt-1\">\r\n      <span\r\n        class=\"sfi sfi-info fs-17 fc-dark-gray\"\r\n        [ngClass]=\"{ 'fc-oasis-light-imp': value }\"\r\n      ></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  <app-validation-errors [errors]=\"control.errors\"></app-validation-errors>\r\n  } @if(isReadOnly && (showIfEmpty || control)){\r\n  <ng-container class=\"info-section\">\r\n    <app-info-item\r\n      class=\"info-item w-100\"\r\n      [label]=\"label\"\r\n      [insideTable]=\"insideTable\"\r\n      [hasLabel]=\"!!label\"\r\n      [type]=\"type\"\r\n      [value]=\"control.value\"\r\n    ></app-info-item>\r\n  </ng-container>\r\n  }\r\n  <sat-popover #popover [hasBackdrop]=\"true\" verticalAlign=\"below\">\r\n    <div class=\"default-popover p-3 fs-14\">\r\n      <span class=\"fs-14 fw-bold signature-notes\" [innerHTML]=\"tooltip\"></span>\r\n    </div>\r\n  </sat-popover>\r\n  ", styles: [":host{flex-grow:1}.input-disabled{pointer-events:none!important;opacity:1.5}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: InfoItemComponent, selector: "app-info-item", inputs: ["label", "value", "name", "type", "dateType", "multiple", "insideTable", "hasLabel", "arrayList", "actionType", "download"] }, { kind: "ngmodule", type: SatPopoverModule }, { kind: "component", type: i1$2.SatPopoverComponent, selector: "sat-popover", inputs: ["anchor", "horizontalAlign", "xAlign", "verticalAlign", "yAlign", "forceAlignment", "lockAlignment", "autoFocus", "restoreFocus", "scrollStrategy", "hasBackdrop", "interactiveClose", "openTransition", "closeTransition", "openAnimationStartAtScale", "closeAnimationEndAtScale", "backdropClass", "panelClass"], outputs: ["opened", "closed", "afterOpen", "afterClose", "backdropClicked", "overlayKeydown"] }, { kind: "directive", type: i1$2.SatPopoverAnchorDirective, selector: "[satPopoverAnchor]", inputs: ["satPopoverAnchor"], exportAs: ["satPopoverAnchor"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: MycurrencyDirective, selector: "[appMycurrency]", inputs: ["decimals"] }, { kind: "component", type: ValidationErrorsComponent, selector: "app-validation-errors", inputs: ["errors", "customErrorMessages"] }] });
+        ], usesInheritance: true, ngImport: i0, template: "@if(!isReadOnly){\r\n  @if(label){\r\n  <div class=\"d-flex justify-content-between mb-1\">\r\n    <span class=\"form-label mb-0\">{{ label }}</span\r\n    > @if(!required){<span class=\"fs-11 fc-dark-gray\">{{\r\n      i18n.translate(\"Optional\")\r\n    }}</span\r\n    >} @if(hasTooltip){\r\n    <span class=\"form-label mb-0\">\r\n      {{ tooltip }}\r\n      <ds-icon\r\n        icon=\"info fs-22\"\r\n        class=\"cursor-pointer\"\r\n        [satPopoverAnchor]=\"popover\"\r\n        (click)=\"popover.toggle(); $event.stopImmediatePropagation()\"\r\n      ></ds-icon>\r\n    </span>\r\n    }\r\n  </div>\r\n  }\r\n  <mat-form-field\r\n    class=\"primary-form {{ className }}\"\r\n    [ngClass]=\"{ 'input-disabled': control.disabled }\"\r\n    [floatLabel]=\"floatLabel\"\r\n  >\r\n    @if(iconPrefixName){<span class=\"sfi {{ iconPrefixName }}\"></span>}\r\n    @if(loading){<span\r\n      class=\"sfi sfi-spinner d-inline-block spin fc-coral\"\r\n      matSuffix\r\n    ></span\r\n    >}\r\n    <label class=\"mat-form-content\">\r\n      <!-- add input for ar && en custom directive with add type = arOnly ||  type = enOnly-->\r\n      <input\r\n        matInput\r\n        [value]=\"value\"\r\n        oninput=\"validity.valid || (value='');\"\r\n        [formControl]=\"control\"\r\n        [type]=\"type\"\r\n        [placeholder]=\"placeholder\"\r\n        appMycurrency\r\n      />\r\n    </label>\r\n    @if(iconSuffixName){<span matSuffix class=\"sfi {{ iconSuffixName }}\"></span>}\r\n    @if(hint){\r\n    <mat-hint class=\"d-flex align-items-center gap-1 mt-1\">\r\n      <span\r\n        class=\"sfi sfi-info fs-17 fc-dark-gray\"\r\n        [ngClass]=\"{ 'fc-oasis-light-imp': value }\"\r\n      ></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  <app-validation-errors [errors]=\"control.errors\"></app-validation-errors>\r\n  } @if(isReadOnly && (showIfEmpty || control)){\r\n  <ng-container class=\"info-section\">\r\n    <app-info-item\r\n      class=\"info-item w-100\"\r\n      [label]=\"label\"\r\n      [insideTable]=\"insideTable\"\r\n      [hasLabel]=\"!!label\"\r\n      [type]=\"type\"\r\n      [value]=\"control.value\"\r\n    ></app-info-item>\r\n  </ng-container>\r\n  }\r\n  <sat-popover #popover [hasBackdrop]=\"true\" verticalAlign=\"below\">\r\n    <div class=\"default-popover p-3 fs-14\">\r\n      <span class=\"fs-14 fw-bold signature-notes\" [innerHTML]=\"tooltip\"></span>\r\n    </div>\r\n  </sat-popover>\r\n  ", styles: [":host{flex-grow:1}.input-disabled{pointer-events:none!important;opacity:1.5}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: InfoItemComponent, selector: "app-info-item", inputs: ["label", "value", "name", "type", "dateType", "multiple", "insideTable", "hasLabel", "arrayList", "actionType", "download"] }, { kind: "ngmodule", type: SatPopoverModule }, { kind: "component", type: i1$1.SatPopoverComponent, selector: "sat-popover", inputs: ["anchor", "horizontalAlign", "xAlign", "verticalAlign", "yAlign", "forceAlignment", "lockAlignment", "autoFocus", "restoreFocus", "scrollStrategy", "hasBackdrop", "interactiveClose", "openTransition", "closeTransition", "openAnimationStartAtScale", "closeAnimationEndAtScale", "backdropClass", "panelClass"], outputs: ["opened", "closed", "afterOpen", "afterClose", "backdropClicked", "overlayKeydown"] }, { kind: "directive", type: i1$1.SatPopoverAnchorDirective, selector: "[satPopoverAnchor]", inputs: ["satPopoverAnchor"], exportAs: ["satPopoverAnchor"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: MycurrencyDirective, selector: "[appMycurrency]", inputs: ["decimals"] }, { kind: "component", type: ValidationErrorsComponent, selector: "app-validation-errors", inputs: ["errors", "customErrorMessages"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: InputCurrencyComponent, decorators: [{
             type: Component,
@@ -3068,7 +3045,7 @@ class InputTelephoneComponent extends ControlValueAccessorDirective {
                 useExisting: forwardRef(() => InputTelephoneComponent),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "@if(!isReadOnly){\r\n  <ng-container>\r\n    @if(label){\r\n      <div class=\"d-flex justify-content-between mb-1\">\r\n        <span class=\"form-label mb-0\">{{label}}</span>\r\n        <span *ngIf=\"!required\" class=\"fs-11 fc-dark-gray\"> {{i18n.translate('Optional')}}\r\n        </span>\r\n      </div>\r\n    }\r\n    <!-- <mat-form-field style=\"height: 50px;\" class=\"primary-form input-telephone {{className}}\" floatLabel=\"always\"> -->\r\n      <div class=\"primary-form input-telephone {{className}}\" floatLabel=\"always\">\r\n        <label class=\"mat-form-content\">\r\n          <!-- [placeholder]=\"label\" -->\r\n        <!--  <input matInput [disabled]=\"disabled\" ng2TelInput numberOnly #phone\r\n            [ng2TelInputOptions]=\"{initialCountry: 'sa', utilsScript: 'assets/js/utils.js'}\" (hasError)=\"hasError($event)\"\r\n            (ng2TelOutput)=\"getNumber($event)\" (intlTelInputObject)=\"telInputObject($event)\"\r\n            (countryChange)=\"onCountryChange($event)\" [(ngModel)]=\"field\" [name]=\"name\"\r\n            oninput=\"this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\\..*)\\./g, '$1');\"\r\n            [maxlength]=\"maxLength\" [minLength]=\"minLength\" />-->\r\n          <!-- <input matInput [hidden]=\"true\"/> -->\r\n            <ngx-intl-tel-input\r\n            [formControl]=\"control\"\r\n            [cssClass]=\"'custom'\"\r\n            [preferredCountries]=\"[CountryISO.UnitedStates, CountryISO.UnitedKingdom]\"\r\n            [enableAutoCountrySelect]=\"false\"\r\n            [enablePlaceholder]=\"true\"\r\n            [searchCountryFlag]=\"true\"\r\n            [searchCountryField]=\"[SearchCountryField.Iso2, SearchCountryField.Name]\"\r\n            [selectFirstCountry]=\"false\"\r\n            [selectedCountryISO]=\"CountryISO.SaudiArabia\"\r\n            [maxLength]=\"15\"\r\n            [phoneValidation]=\"true\"\r\n            [inputId]=\"\"\r\n            name=\"phone\"\r\n          ></ngx-intl-tel-input>\r\n          </label>\r\n      </div>\r\n      <!-- </mat-form-field> -->\r\n      <app-validation-errors [errors]=\"control.errors\"></app-validation-errors>\r\n  </ng-container>\r\n}\r\n@if(isReadOnly){\r\n  <ng-container>\r\n    <app-info-item class=\"info-item w-100\"  [type]=\"'telephone'\" [label]=\"label\"\r\n      [value]=\"control.value\"></app-info-item>\r\n  </ng-container>\r\n}\r\n\r\n", styles: ["[dir=rtl] :host .mat-input-element{direction:ltr;text-align:right}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: InfoItemComponent, selector: "app-info-item", inputs: ["label", "value", "name", "type", "dateType", "multiple", "insideTable", "hasLabel", "arrayList", "actionType", "download"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: NgxIntlTelInputModule }, { kind: "component", type: i3$2.NgxIntlTelInputComponent, selector: "ngx-intl-tel-input", inputs: ["value", "preferredCountries", "enablePlaceholder", "customPlaceholder", "numberFormat", "cssClass", "onlyCountries", "enableAutoCountrySelect", "searchCountryFlag", "searchCountryField", "searchCountryPlaceholder", "maxLength", "selectFirstCountry", "selectedCountryISO", "phoneValidation", "inputId", "separateDialCode"], outputs: ["countryChange"] }, { kind: "directive", type: i3$2.NativeElementInjectorDirective, selector: "[ngModel], [formControl], [formControlName]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: ValidationErrorsComponent, selector: "app-validation-errors", inputs: ["errors", "customErrorMessages"] }] });
+        ], usesInheritance: true, ngImport: i0, template: "@if(!isReadOnly){\r\n  <ng-container>\r\n    @if(label){\r\n      <div class=\"d-flex justify-content-between mb-1\">\r\n        <span class=\"form-label mb-0\">{{label}}</span>\r\n        <span *ngIf=\"!required\" class=\"fs-11 fc-dark-gray\"> {{i18n.translate('Optional')}}\r\n        </span>\r\n      </div>\r\n    }\r\n    <!-- <mat-form-field style=\"height: 50px;\" class=\"primary-form input-telephone {{className}}\" floatLabel=\"always\"> -->\r\n      <div class=\"primary-form input-telephone {{className}}\" floatLabel=\"always\">\r\n        <label class=\"mat-form-content\">\r\n          <!-- [placeholder]=\"label\" -->\r\n        <!--  <input matInput [disabled]=\"disabled\" ng2TelInput numberOnly #phone\r\n            [ng2TelInputOptions]=\"{initialCountry: 'sa', utilsScript: 'assets/js/utils.js'}\" (hasError)=\"hasError($event)\"\r\n            (ng2TelOutput)=\"getNumber($event)\" (intlTelInputObject)=\"telInputObject($event)\"\r\n            (countryChange)=\"onCountryChange($event)\" [(ngModel)]=\"field\" [name]=\"name\"\r\n            oninput=\"this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\\..*)\\./g, '$1');\"\r\n            [maxlength]=\"maxLength\" [minLength]=\"minLength\" />-->\r\n          <!-- <input matInput [hidden]=\"true\"/> -->\r\n            <ngx-intl-tel-input\r\n            [formControl]=\"control\"\r\n            [cssClass]=\"'custom'\"\r\n            [preferredCountries]=\"[CountryISO.UnitedStates, CountryISO.UnitedKingdom]\"\r\n            [enableAutoCountrySelect]=\"false\"\r\n            [enablePlaceholder]=\"true\"\r\n            [searchCountryFlag]=\"true\"\r\n            [searchCountryField]=\"[SearchCountryField.Iso2, SearchCountryField.Name]\"\r\n            [selectFirstCountry]=\"false\"\r\n            [selectedCountryISO]=\"CountryISO.SaudiArabia\"\r\n            [maxLength]=\"15\"\r\n            [phoneValidation]=\"true\"\r\n            [inputId]=\"\"\r\n            name=\"phone\"\r\n          ></ngx-intl-tel-input>\r\n          </label>\r\n      </div>\r\n      <!-- </mat-form-field> -->\r\n      <app-validation-errors [errors]=\"control.errors\"></app-validation-errors>\r\n  </ng-container>\r\n}\r\n@if(isReadOnly){\r\n  <ng-container>\r\n    <app-info-item class=\"info-item w-100\"  [type]=\"'telephone'\" [label]=\"label\"\r\n      [value]=\"control.value\"></app-info-item>\r\n  </ng-container>\r\n}\r\n\r\n", styles: ["[dir=rtl] :host .mat-input-element{direction:ltr;text-align:right}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: InfoItemComponent, selector: "app-info-item", inputs: ["label", "value", "name", "type", "dateType", "multiple", "insideTable", "hasLabel", "arrayList", "actionType", "download"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: NgxIntlTelInputModule }, { kind: "component", type: i3$2.NgxIntlTelInputComponent, selector: "ngx-intl-tel-input", inputs: ["value", "preferredCountries", "enablePlaceholder", "customPlaceholder", "numberFormat", "cssClass", "onlyCountries", "enableAutoCountrySelect", "searchCountryFlag", "searchCountryField", "searchCountryPlaceholder", "maxLength", "selectFirstCountry", "selectedCountryISO", "phoneValidation", "inputId", "separateDialCode"], outputs: ["countryChange"] }, { kind: "directive", type: i3$2.NativeElementInjectorDirective, selector: "[ngModel], [formControl], [formControlName]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: ValidationErrorsComponent, selector: "app-validation-errors", inputs: ["errors", "customErrorMessages"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: InputTelephoneComponent, decorators: [{
             type: Component,
@@ -3099,33 +3076,18 @@ class SearchEmployeeComponent extends ControlValueAccessorDirective {
     showLabel = true;
     optional = false;
     data;
-    filteredOptions;
-    // @Input() floatLabel: FloatLabelType = 'auto';
     floatLabel = 'auto';
     error;
-    selectedItems = new Array();
     selected = false;
     selectedEmp = new EventEmitter();
     onInputChange = new EventEmitter();
     showEdit = false;
     editDirectManger = new EventEmitter();
     deleteDirectManger = new EventEmitter();
-    searchingForEmp = false;
     arrayList = [];
     isUniqueUsers = false;
     userAlreadyExist = false;
     emitedDeletedValue = new EventEmitter();
-    // ngOnInit() {
-    //   // this.resetPropagator.subscribe(this, this.resetSearchEmpData);
-    //   if (!this.field) {
-    //     this.field = {
-    //       personEmail: null,
-    //       personName: null,
-    //     };
-    //   } else {
-    //     this.control.setValue(this.field?.personName);
-    //   }
-    // }
     deleteRow(ind, rowData) {
         if (!this.isReadOnly) {
             this.arrayList = this.arrayList.filter((item, index) => {
@@ -3138,42 +3100,6 @@ class SearchEmployeeComponent extends ControlValueAccessorDirective {
             this.emitedDeletedValue.emit(obj);
         }
     }
-    ngOnChanges(changes) {
-        if (changes?.['field']) {
-            if (changes['field']?.currentValue?.personEmail == '' || changes['field']?.currentValue?.personEmail == null) {
-                this.control.setValue('');
-            }
-            else {
-                this.control.setValue(changes['field']?.currentValue?.personName);
-            }
-        }
-        if (changes?.['disabled']) {
-            if (changes['disabled'].currentValue) {
-                this.control.disable();
-            }
-            else {
-                this.control.enable();
-            }
-        }
-    }
-    resetSearchEmpData() {
-        if (!this.isReadOnly) {
-            if (this.multiple) {
-                this.arrayList = [];
-                // this.field = {
-                //   personName: null,
-                //   personEmail: null,
-                // };
-            }
-            else {
-                // this.field = {
-                //   personName: null,
-                //   personEmail: null,
-                // };
-                this.control.setValue(null);
-            }
-        }
-    }
     onLoadOptions(event) {
         const input = event.target.value;
         this.data = [];
@@ -3183,7 +3109,7 @@ class SearchEmployeeComponent extends ControlValueAccessorDirective {
             this.coreService.searchEmployee(input).subscribe({
                 next: (form) => {
                     this.loading = false;
-                    this.data = form.options;
+                    this.data = form.Users;
                 },
                 error: (err) => {
                 }, complete: () => {
@@ -3192,14 +3118,10 @@ class SearchEmployeeComponent extends ControlValueAccessorDirective {
         }
         else if (input.length == 0) {
             if (this.multiple) {
-                // const obj = {
-                //   arrayList: this.arrayList,
-                //   field: this.field
-                // }
-                // this.emitedValue.emit(obj);
             }
             else {
-                // this.emitedValue.emit(null);
+                this.control.setValue(null);
+                this.control.markAsTouched();
             }
         }
     }
@@ -3219,46 +3141,35 @@ class SearchEmployeeComponent extends ControlValueAccessorDirective {
         this.userAlreadyExist = false;
         this.selected = true;
         this.data = [];
-        // this.field = {
-        //   personName: object.description,
-        //   personEmail: object.email,
-        //   job:object.jobPosition,
-        //   jobCode:object.jobCode,
-        //   manager: object.manager,
-        //   department: object.department,
-        //   generalDepartment: object.generalDepartment,
-        //   sector: object.sector,
-        //   section: object.section,
-        //   seniorSectorName: object.seniorSectorName
-        // };
         if (this.multiple) {
-            if (this.isUniqueUsers && this.arrayList.some((item) => item?.personEmail === object?.email)) {
+            if (this.arrayList.some((item) => item?.personEmail === object?.email)) {
                 this.userAlreadyExist = true;
                 return;
             }
-            // this.arrayList.push(this.field);
-            // const obj = {
-            //   arrayList: this.arrayList,
-            //   field: this.field
-            // };
-            // this.emitedValue.emit(obj);
-            // this.emitedValue.emit(this.field);
-            this.control.setValue(null);
-            // this.field = {
-            //   personEmail: null,
-            //   personName: null,
-            //   job:null,
-            //   jobCode:null
-            // };
+            let obj = {
+                personName: object.name,
+                personEmail: object.email,
+                job: object.job.name,
+                jobCode: object.job.code,
+                manager: object.manager,
+                department: object.department,
+                generalDepartment: object.generalDepartment,
+                sector: object.sector,
+                section: object.section,
+                seniorSectorName: object.seniorSectorName
+            };
+            this.arrayList.push(obj);
+            this.control.setValue(this.arrayList);
         }
         else {
-            // this.emitedValue.emit(this.field);
-            this.control.setValue(object.description);
+            const controlValue = {
+                personName: object.name,
+                personEmail: object.email
+            };
+            this.control.setValue(controlValue);
+            this.employeeSearchControl.setValue(object.name);
         }
     }
-    openHints() {
-        // this.sidenavService.publish('open', FaqSidenavComponent, 'end', 'over');
-    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SearchEmployeeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: SearchEmployeeComponent, isStandalone: true, selector: "app-search-employee", inputs: { valueName: "valueName", tooltip: "tooltip", className: "className", showLabel: "showLabel", optional: "optional", data: "data", floatLabel: "floatLabel", error: "error", showEdit: "showEdit", arrayList: "arrayList", isUniqueUsers: "isUniqueUsers" }, outputs: { selectedEmp: "selectedEmp", onInputChange: "onInputChange", editDirectManger: "editDirectManger", deleteDirectManger: "deleteDirectManger", emitedDeletedValue: "emitedDeletedValue" }, providers: [
             {
@@ -3266,22 +3177,28 @@ class SearchEmployeeComponent extends ControlValueAccessorDirective {
                 useExisting: forwardRef(() => SearchEmployeeComponent),
                 multi: true,
             },
-        ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if(!isReadOnly){\r\n  <ng-container>\r\n    @if(label){\r\n      <div class=\"d-flex justify-content-between mb-1\">\r\n        <span class=\"form-label mb-0\">\r\n          {{label}}\r\n          <ds-icon icon=\"info\" class=\"cursor-pointer\" [satPopoverAnchor]=\"searchEmpPopover\"\r\n            ></ds-icon>\r\n            <!-- (click)=\"searchEmpPopover.toggle(); $event.stopImmediatePropagation()\" -->\r\n        </span>\r\n    @if(optional){\r\n      <span class=\"fs-11 fc-dark-gray\"> {{i18n.translate('Optional')}}\r\n      </span>\r\n    }\r\n      </div>\r\n    }\r\n    <mat-form-field class=\"primary-form {{className}}\" [floatLabel]=\"floatLabel\">\r\n      <mat-label>\r\n        {{label}}\r\n      </mat-label>\r\n      <ds-icon matPrefix icon=\"search\" class=\"fc-coral fs-18\"></ds-icon>\r\n      <label class=\"mat-form-content\">\r\n        <input type=\"text\" aria-label=\"Number\" (input)=\"onLoadOptions($event)\" matInput [disabled]=\"isDisabled\"\r\n          [formControl]=\"control\" [matAutocomplete]=\"auto\">\r\n     \r\n      </label>\r\n      <!-- <mat-error class=\"mb-2\" *ngIf=\"showErrorMessage\">{{errorMessage}}\r\n      </mat-error> -->\r\n      @if(loading){\r\n        <span class=\"sfi sfi-spinner d-inline-block spin fc-coral\" matSuffix></span>\r\n      }\r\n      <mat-autocomplete #auto=\"matAutocomplete\">\r\n        @for(option of data; track option){\r\n          <mat-option [value]=\"option?.['personName']\"\r\n          (onSelectionChange)=\"selectOption(option , $event)\">\r\n          <div class=\"d-flex align-items-center\">\r\n            <div class=\"img-card circled-img small\">\r\n              <img [src]=\"getImage(option?.email)\" onerror=\"this.onerror=null;this.src='assets/images/user.svg';\" alt=\"\">\r\n            </div>\r\n            <span class=\"mx-2\"></span>\r\n            <div class=\"line-height-1\">\r\n              <h6 class=\"fs-17 fw-medium fc-onyx mb-0 line-height-1\">{{option?.name}}</h6>\r\n              <span class=\"fs-13 fw-normal fc-dark-gray\">\r\n                {{option?.description}}\r\n              </span>\r\n            </div>\r\n          </div>\r\n        </mat-option>\r\n        }\r\n      </mat-autocomplete>\r\n      @if(!control?.valid){\r\n        <mat-error class=\"mb-2\">{{i18n.translate('validSearchError')}}{{label}}\r\n        </mat-error>\r\n      }\r\n   @if(showHint){\r\n    <mat-hint>\r\n      <span class=\"sfi sfi-check-circle font-10 fc-dark-gray\" [ngClass]=\"{'fc-oasis-light-imp':value}\"></span>\r\n      <span class=\"mx-1\"></span>\r\n      <span class=\"fs-12 fc-onyx\">{{hint}}</span>\r\n    </mat-hint>\r\n   }\r\n    </mat-form-field>\r\n    <!-- @if(showErrorMessage){\r\n      <mat-error class=\"mb-2\">{{errorMessage}}\r\n      </mat-error>\r\n    } -->\r\n  @if(userAlreadyExist){\r\n    <mat-error class=\"mb-2\">\r\n      {{ i18n.translate('userAlreadyExist') }}\r\n    </mat-error>\r\n  }\r\n  @if(arrayList?.length && !isReadOnly && multiple){\r\n    <div class=\"col-12\">\r\n      <div class=\"example-list n-results\">\r\n        @for(emails of arrayList;track $index){\r\n          <div class=\"example-box n-col px-3\" [ngClass]=\"{'mt-0': $index === 0}\">\r\n          <div class=\"d-flex flex-grow-1 w-100\">\r\n            <div class=\"user-info flex-grow-1\">\r\n              <img [src]=\"getImage(emails?.personEmail)\" onerror=\"this.onerror=null;this.src='assets/images/user.svg';\"\r\n                alt=\"\" class=\"prof-img\" draggable=\"false\">\r\n                @if(emails?.personName){\r\n                  <label>\r\n                    {{(emails?.personName)}}\r\n                    <span class=\"title\">\r\n                      {{emails?.personEmail}}\r\n                    </span>\r\n                  </label>\r\n                }\r\n            </div>\r\n            @if(!(isReadOnly)){\r\n              <ds-button class=\"ds-btn-action\" size=\"small\" (click)=\"deleteRow($index,emails)\" icon>\r\n                <ds-icon icon=\"trash\" class=\"fc-red fs-20\"></ds-icon>\r\n              </ds-button>\r\n            }\r\n           \r\n          </div>\r\n        </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  }\r\n \r\n  \r\n  </ng-container>\r\n}\r\n@if(!isReadOnly){\r\n  <ng-container>\r\n    <div class=\"d-flex justify-content-between mb-1\" *ngIf=\"label\">\r\n      <span class=\"form-label mb-0\">\r\n        {{label}}\r\n        <ds-icon icon=\"info\" class=\"cursor-pointer\" [satPopoverAnchor]=\"searchEmpPopover\"\r\n          ></ds-icon>\r\n          <!-- (click)=\"searchEmpPopover.toggle(); $event.stopImmediatePropagation()\" -->\r\n      </span>\r\n  \r\n      <span *ngIf=\"optional\" class=\"fs-11 fc-dark-gray\"> {{i18n.translate('Optional')}}\r\n      </span>\r\n    </div>\r\n    <mat-form-field class=\"primary-form {{className}}\" [floatLabel]=\"floatLabel\">\r\n      <mat-label>\r\n        {{label}}\r\n      </mat-label>\r\n      <ds-icon matPrefix icon=\"search\" class=\"fc-coral fs-18\"></ds-icon>\r\n      <label class=\"mat-form-content\">\r\n        <input type=\"text\" aria-label=\"Number\" (input)=\"onLoadOptions($event)\" matInput [disabled]=\"isDisabled\"\r\n          [formControl]=\"control\" [matAutocomplete]=\"auto\">\r\n     \r\n      </label>\r\n      <!-- <mat-error class=\"mb-2\" *ngIf=\"showErrorMessage\">{{errorMessage}}\r\n      </mat-error> -->\r\n      <span class=\"sfi sfi-spinner d-inline-block spin fc-coral\" matSuffix *ngIf=\"loading\"></span>\r\n      <mat-autocomplete #auto=\"matAutocomplete\">\r\n        <mat-option *ngFor=\"let option of data\" [value]=\"option?.['personName']\"\r\n          (onSelectionChange)=\"selectOption(option , $event)\">\r\n          <div class=\"d-flex align-items-center\">\r\n            <div class=\"img-card circled-img small\">\r\n              <img [src]=\"getImage(option?.email)\" onerror=\"this.onerror=null;this.src='assets/images/user.svg';\" alt=\"\">\r\n            </div>\r\n            <span class=\"mx-2\"></span>\r\n            <div class=\"line-height-1\">\r\n              <h6 class=\"fs-17 fw-medium fc-onyx mb-0 line-height-1\">{{option?.name}}</h6>\r\n              <span class=\"fs-13 fw-normal fc-dark-gray\">\r\n                {{option?.description}}\r\n              </span>\r\n            </div>\r\n          </div>\r\n        </mat-option>\r\n      </mat-autocomplete>\r\n      <mat-error class=\"mb-2\" *ngIf=\"(!control?.valid)\">{{i18n.translate('validSearchError')}}{{label}}\r\n      </mat-error>\r\n      <mat-hint *ngIf=\"showHint\">\r\n        <span class=\"sfi sfi-check-circle font-10 fc-dark-gray\" [ngClass]=\"{'fc-oasis-light-imp':value}\"></span>\r\n        <span class=\"mx-1\"></span>\r\n        <span class=\"fs-12 fc-onyx\">{{hint}}</span>\r\n      </mat-hint>\r\n    </mat-form-field>\r\n    <!-- <mat-error class=\"mb-2\" *ngIf=\"showErrorMessage\">{{errorMessage}}\r\n    </mat-error> -->\r\n  \r\n    <mat-error class=\"mb-2\" *ngIf=\"userAlreadyExist\">\r\n      {{ i18n.translate('userAlreadyExist') }}\r\n    </mat-error>\r\n  \r\n    <div class=\"col-12\" *ngIf=\"arrayList?.length && !isReadOnly && multiple\">\r\n      <div class=\"example-list n-results\">\r\n        <div class=\"example-box n-col px-3\" [ngClass]=\"{'mt-0': ind === 0}\"\r\n          *ngFor=\"let emails of arrayList; let ind = index\">\r\n          <div class=\"d-flex flex-grow-1 w-100\">\r\n            <div class=\"user-info flex-grow-1\">\r\n              <img [src]=\"getImage(emails?.personEmail)\" onerror=\"this.onerror=null;this.src='assets/images/user.svg';\"\r\n                alt=\"\" class=\"prof-img\" draggable=\"false\">\r\n              <label *ngIf=\"emails?.personName\">\r\n                {{(emails?.personName)}}\r\n                <span class=\"title\">\r\n                  {{emails?.personEmail}}\r\n                </span>\r\n              </label>\r\n            </div>\r\n            <ds-button class=\"ds-btn-action\" size=\"small\" *ngIf=\"!(isReadOnly)\" (click)=\"deleteRow(ind,emails)\" icon>\r\n              <ds-icon icon=\"trash\" class=\"fc-red fs-20\"></ds-icon>\r\n            </ds-button>\r\n  \r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  \r\n  </ng-container>\r\n}\r\n\r\n@if(isReadOnly){\r\n  <ng-container>\r\n    <!-- && (field?.personName || multiple) -->\r\n    <app-info-item class=\"d-flex flex-wrap align-items-center info-item w-100 mb-2\" type=\"user-picker\" [hasLabel]=\"!!label\"\r\n      [multiple]=\"multiple\" [ngClass]=\"{'user-picker': !isReadOnly}\" [actionType]=\"!isReadOnly ? 'delete' : 'edit'\"\r\n      [label]=\"label\"  [arrayList]=\"arrayList\">\r\n      <!-- [name]=\"field?.personName\"  [value]=\"field?.personEmail\" -->\r\n    </app-info-item>\r\n  </ng-container>\r\n}\r\n\r\n\r\n<sat-popover #searchEmpPopover [hasBackdrop]=\"true\" verticalAlign=\"below\">\r\n  <div class=\"default-popover p-3\">\r\n    <ol class=\"px-3 m-0\">\r\n      <li>{{i18n.translate('searchEmployeeTooltip_1')}}</li>\r\n      <li>{{i18n.translate('searchEmployeeTooltip_2')}}</li>\r\n      <li>{{i18n.translate('searchEmployeeTooltip_3')}}</li>\r\n      <li>{{i18n.translate('searchEmployeeTooltip_4')}}</li>\r\n    </ol>\r\n  </div>\r\n</sat-popover>\r\n", styles: [".small-input~.btn{height:41px}:host{flex-grow:1}.agenda-list.inside .mat-list-item{display:flex;align-items:center;padding:0 1rem;background-color:#fff;border:1px solid silver;height:88px!important}.agenda-list.inside .mat-list-item:before{position:relative;left:auto;right:auto}.agenda-list .mat-list-item{height:66px!important;background-color:#d3d3d3;margin-bottom:1.5rem;cursor:move}.agenda-list .mat-list-item:hover:before{opacity:1}.agenda-list .mat-list-item:before{content:\"\\e928\";font-family:stc-font-icons;left:-1.5rem;color:#a9a9a9;position:absolute;font-size:1.5rem;opacity:0;transition:all .3s linear}[dir=rtl] .agenda-list .mat-list-item:before{left:auto;right:-1.5rem}.agenda-list .mat-list-item:last-child{margin-bottom:0}.example-list{width:500px;max-width:100%;border:solid 1px #ccc;min-height:60px;display:block;background:#fff;border-radius:0;overflow:hidden}.example-box{color:#000000de;display:flex;box-sizing:border-box;cursor:move;font-size:14px;position:relative;background-color:#f3f3f1;padding:18px;justify-content:space-between;align-items:flex-start;margin-top:10px;padding-inline-start:50px;border:0;flex-direction:column;width:100%}.example-box .user-info{display:flex;align-items:center}.example-box .user-info .drag-icon{position:absolute;left:18px;cursor:move}html[dir=rtl] .example-box .user-info .drag-icon{left:auto;right:18px}.example-box .user-info .prof-img{width:40px;height:40px;border-radius:50%;border:2px solid #fff;margin-inline-end:10px}.example-box .user-info label{font-size:13px;font-weight:500;color:#1d242d;flex-grow:1}.example-box .user-info label .title{display:block;color:#ff375e;font-size:9px}.example-box .user-info-reviewer{display:flex;gap:.5rem;width:calc(100% + 68px);padding:10px 15px;margin:10px 0 -18px -50px;background-color:#dde0e1}[dir=rtl] .example-box .user-info-reviewer{margin:10px -50px -18px 0}.example-box .user-info-reviewer .drag-icon{position:absolute;transform:translateY(-50%);cursor:move}.example-box .user-info-reviewer .reviewer-info{display:flex}.example-box .user-info-reviewer .reviewer-info .prof-img{width:20px;height:20px;border-radius:50%;border:1px solid #fff;margin:0 5px}.example-box .user-info-reviewer .reviewer-info label{font-size:11px;font-weight:500;color:#000;width:100px;margin-top:1px}.example-box .user-info-reviewer .reviewer-info label .title{display:block;color:#ff375e;font-size:11px}.example-box .user-info-reviewer span{color:#a54ee1;font-size:11px;padding:0;margin-bottom:0;display:block;text-align:start}.example-box .icon{width:30px;height:30px;background-color:#ff375e33;text-align:center;line-height:26px;cursor:pointer;flex-shrink:0}.cdk-drag-preview{box-sizing:border-box;border-radius:0;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;overflow:hidden}.cdk-drag-preview .icon{display:none}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.n-content{max-width:700px;width:100%}.n-results{width:100%;border:0;counter-reset:section}.n-results .n-col{position:relative;background-color:#f3f3f1;padding:10px;justify-content:space-between;align-items:flex-start;margin-top:10px;padding-inline-start:50px;border:0;flex-direction:column;width:100%}.n-results .n-col:last-child{margin-bottom:30px}.n-results .n-col:after,.n-results .n-col:before{display:none}@media (max-width: 991px){.example-box .user-info:before{margin-inline-end:10px;flex-shrink:0}}@media (max-width: 767px){.n-col{padding-inline-start:40px}.n-col .user-info-reviewer span{margin-bottom:0}}@media (max-width: 321px){.n-results .n-col{flex-wrap:wrap;justify-content:center}.n-results .n-col .user-info{justify-content:center}.n-results .n-col .user-info:before{position:absolute;top:15px;left:15px}.n-results .n-col .user-info .prof-img{margin:0 10px 10px}.n-results .n-col .user-info label{width:100%;text-align:center}.n-results .n-col .icon{width:100%}}::ng-deep .default-popover{max-width:320px;right:-2.5rem!important}[dir=rtl] ::ng-deep .default-popover{left:-2.5rem!important;right:auto}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i1$3.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i1$3.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+        ], usesInheritance: true, ngImport: i0, template: "@if (!isReadOnly) {\r\n  <ng-container>\r\n    @if (label) {\r\n      <div class=\"d-flex justify-content-between mb-1\">\r\n        <span class=\"form-label mb-0\">\r\n          {{ label }}\r\n          <ds-icon icon=\"info\" class=\"cursor-pointer\" [satPopoverAnchor]=\"searchEmpPopover\"></ds-icon>\r\n        </span>\r\n        @if (optional) {\r\n          <span class=\"fs-11 fc-dark-gray\"> {{ i18n.translate('Optional') }}</span>\r\n        }\r\n      </div>\r\n    }\r\n    <mat-form-field class=\"primary-form {{className}}\" [floatLabel]=\"floatLabel\">\r\n      <mat-label>{{ label }}</mat-label>\r\n      <ds-icon icon=\"search\" class=\"fc-coral fs-18\"></ds-icon>\r\n      <label class=\"mat-form-content\">\r\n        <input\r\n          type=\"text\" aria-label=\"Number\" (input)=\"onLoadOptions($event)\" matInput [disabled]=\"isDisabled\"\r\n          [matAutocomplete]=\"auto\" [formControl]=\"employeeSearchControl\" [value]=\"control.value\">\r\n      </label>\r\n      @if (loading) {\r\n        <span class=\"sfi sfi-spinner d-inline-block spin fc-coral\" matSuffix></span>\r\n      }\r\n      <mat-autocomplete #auto=\"matAutocomplete\">\r\n        @for (option of data; track option) {\r\n          <mat-option\r\n            [value]=\"option?.['personName']\"\r\n            (onSelectionChange)=\"selectOption(option , $event)\">\r\n            <div class=\"d-flex align-items-center\">\r\n              <div class=\"img-card circled-img small\">\r\n                <img [src]=\"getImage(option?.email)\" onerror=\"this.onerror=null;this.src='assets/images/user.svg';\" alt=\"\">\r\n              </div>\r\n              <span class=\"mx-2\"></span>\r\n              <div class=\"line-height-1\">\r\n                <h6 class=\"fs-17 fw-medium fc-onyx mb-0 line-height-1\">{{ option?.name }}</h6>\r\n                <span class=\"fs-13 fw-normal fc-dark-gray\">\r\n                {{ option?.description }}\r\n              </span>\r\n              </div>\r\n            </div>\r\n          </mat-option>\r\n        }\r\n      </mat-autocomplete>\r\n      @if (showHint) {\r\n        <mat-hint>\r\n          <span class=\"sfi sfi-check-circle font-10 fc-dark-gray\" [ngClass]=\"{'fc-oasis-light-imp':value}\"></span>\r\n          <span class=\"mx-1\"></span>\r\n          <span class=\"fs-12 fc-onyx\">{{ hint }}</span>\r\n        </mat-hint>\r\n      }\r\n    </mat-form-field>\r\n    <app-validation-errors [errors]=\"control.errors\"></app-validation-errors>\r\n    @if (userAlreadyExist) {\r\n      <mat-error class=\"mb-2\">\r\n        {{ i18n.translate('userAlreadyExist') }}\r\n      </mat-error>\r\n    }\r\n    @if (arrayList?.length && !isReadOnly && multiple) {\r\n      <div class=\"col-12 mt-2\">\r\n        <div class=\"example-list n-results\">\r\n          @for (emails of arrayList; track $index) {\r\n            <div class=\"example-box n-col px-3\" [ngClass]=\"{'mt-0': $index === 0}\">\r\n              <div class=\"d-flex flex-grow-1 w-100\">\r\n                <div class=\"user-info flex-grow-1\">\r\n                  <img alt=\"user image\" [src]=\"getImage(emails?.['personEmail'])\" onerror=\"this.onerror=null;this.src='assets/images/user.svg';\"\r\n                    alt=\"\" class=\"prof-img\" draggable=\"false\">\r\n                  @if (emails?.['personName']) {\r\n                    <label>\r\n                      {{ (emails?.['personName']) }}\r\n                      <span class=\"title\">\r\n                      {{ emails?.['personEmail'] }}\r\n                    </span>\r\n                    </label>\r\n                  }\r\n                </div>\r\n                @if (!(isReadOnly)) {\r\n                  <ds-button class=\"ds-btn-action\" size=\"small\" (click)=\"deleteRow($index,emails)\" icon>\r\n                    <ds-icon icon=\"trash\" class=\"fc-red fs-20\"></ds-icon>\r\n                  </ds-button>\r\n                }\r\n\r\n              </div>\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n    }\r\n\r\n\r\n  </ng-container>\r\n}\r\n@if (isReadOnly) {\r\n  <ng-container>\r\n    <!-- && (field?.personName || multiple) -->\r\n    <app-info-item\r\n      class=\"info-item\" type=\"user-picker\" [hasLabel]=\"!!label\"\r\n      [multiple]=\"multiple\" [ngClass]=\"{'user-picker': !isReadOnly}\" [actionType]=\"!isReadOnly ? 'delete' : 'edit'\"\r\n      [label]=\"label\" [name]=\"control.value['personName']\" [value]=\"control.value['personEmail']\" [arrayList]=\"arrayList\">\r\n      <!-- [arrayList]=\"arrayList\" -->\r\n    </app-info-item>\r\n  </ng-container>\r\n}\r\n\r\n\r\n<sat-popover #searchEmpPopover [hasBackdrop]=\"true\" verticalAlign=\"below\">\r\n  <div class=\"default-popover p-3\">\r\n    <ol class=\"px-3 m-0\">\r\n      <li>{{ i18n.translate('searchEmployeeTooltip_1') }}</li>\r\n      <li>{{ i18n.translate('searchEmployeeTooltip_2') }}</li>\r\n      <li>{{ i18n.translate('searchEmployeeTooltip_3') }}</li>\r\n      <li>{{ i18n.translate('searchEmployeeTooltip_4') }}</li>\r\n    </ol>\r\n  </div>\r\n</sat-popover>\r\n", styles: [".small-input~.btn{height:41px}:host{flex-grow:1}.agenda-list.inside .mat-list-item{display:flex;align-items:center;padding:0 1rem;background-color:#fff;border:1px solid silver;height:88px!important}.agenda-list.inside .mat-list-item:before{position:relative;left:auto;right:auto}.agenda-list .mat-list-item{height:66px!important;background-color:#d3d3d3;margin-bottom:1.5rem;cursor:move}.agenda-list .mat-list-item:hover:before{opacity:1}.agenda-list .mat-list-item:before{content:\"\\e928\";font-family:stc-font-icons;left:-1.5rem;color:#a9a9a9;position:absolute;font-size:1.5rem;opacity:0;transition:all .3s linear}[dir=rtl] .agenda-list .mat-list-item:before{left:auto;right:-1.5rem}.agenda-list .mat-list-item:last-child{margin-bottom:0}.example-list{width:500px;max-width:100%;border:solid 1px #ccc;min-height:60px;display:block;background:#fff;border-radius:0;overflow:hidden}.example-box{color:#000000de;display:flex;box-sizing:border-box;cursor:move;font-size:14px;position:relative;background-color:#f3f3f1;padding:18px;justify-content:space-between;align-items:flex-start;margin-top:10px;padding-inline-start:50px;border:0;flex-direction:column;width:100%}.example-box .user-info{display:flex;align-items:center}.example-box .user-info .drag-icon{position:absolute;left:18px;cursor:move}html[dir=rtl] .example-box .user-info .drag-icon{left:auto;right:18px}.example-box .user-info .prof-img{width:40px;height:40px;border-radius:50%;border:2px solid #fff;margin-inline-end:10px}.example-box .user-info label{font-size:13px;font-weight:500;color:#1d242d;flex-grow:1}.example-box .user-info label .title{display:block;color:#ff375e;font-size:9px}.example-box .user-info-reviewer{display:flex;gap:.5rem;width:calc(100% + 68px);padding:10px 15px;margin:10px 0 -18px -50px;background-color:#dde0e1}[dir=rtl] .example-box .user-info-reviewer{margin:10px -50px -18px 0}.example-box .user-info-reviewer .drag-icon{position:absolute;transform:translateY(-50%);cursor:move}.example-box .user-info-reviewer .reviewer-info{display:flex}.example-box .user-info-reviewer .reviewer-info .prof-img{width:20px;height:20px;border-radius:50%;border:1px solid #fff;margin:0 5px}.example-box .user-info-reviewer .reviewer-info label{font-size:11px;font-weight:500;color:#000;width:100px;margin-top:1px}.example-box .user-info-reviewer .reviewer-info label .title{display:block;color:#ff375e;font-size:11px}.example-box .user-info-reviewer span{color:#a54ee1;font-size:11px;padding:0;margin-bottom:0;display:block;text-align:start}.example-box .icon{width:30px;height:30px;background-color:#ff375e33;text-align:center;line-height:26px;cursor:pointer;flex-shrink:0}.cdk-drag-preview{box-sizing:border-box;border-radius:0;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;overflow:hidden}.cdk-drag-preview .icon{display:none}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.n-content{max-width:700px;width:100%}.n-results{width:100%;border:0;counter-reset:section}.n-results .n-col{position:relative;background-color:#f3f3f1;padding:10px;justify-content:space-between;align-items:flex-start;margin-top:10px;padding-inline-start:50px;border:0;flex-direction:column;width:100%}.n-results .n-col:last-child{margin-bottom:30px}.n-results .n-col:after,.n-results .n-col:before{display:none}@media (max-width: 991px){.example-box .user-info:before{margin-inline-end:10px;flex-shrink:0}}@media (max-width: 767px){.n-col{padding-inline-start:40px}.n-col .user-info-reviewer span{margin-bottom:0}}@media (max-width: 321px){.n-results .n-col{flex-wrap:wrap;justify-content:center}.n-results .n-col .user-info{justify-content:center}.n-results .n-col .user-info:before{position:absolute;top:15px;left:15px}.n-results .n-col .user-info .prof-img{margin:0 10px 10px}.n-results .n-col .user-info label{width:100%;text-align:center}.n-results .n-col .icon{width:100%}}::ng-deep .default-popover{max-width:320px;right:-2.5rem!important}[dir=rtl] ::ng-deep .default-popover{left:-2.5rem!important;right:auto}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i1$2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i1$2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: SatPopoverModule }, { kind: "component", type: i1$1.SatPopoverComponent, selector: "sat-popover", inputs: ["anchor", "horizontalAlign", "xAlign", "verticalAlign", "yAlign", "forceAlignment", "lockAlignment", "autoFocus", "restoreFocus", "scrollStrategy", "hasBackdrop", "interactiveClose", "openTransition", "closeTransition", "openAnimationStartAtScale", "closeAnimationEndAtScale", "backdropClass", "panelClass"], outputs: ["opened", "closed", "afterOpen", "afterClose", "backdropClicked", "overlayKeydown"] }, { kind: "directive", type: i1$1.SatPopoverAnchorDirective, selector: "[satPopoverAnchor]", inputs: ["satPopoverAnchor"], exportAs: ["satPopoverAnchor"] }, { kind: "component", type: ValidationErrorsComponent, selector: "app-validation-errors", inputs: ["errors", "customErrorMessages"] }, { kind: "component", type: InfoItemComponent, selector: "app-info-item", inputs: ["label", "value", "name", "type", "dateType", "multiple", "insideTable", "hasLabel", "arrayList", "actionType", "download"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SearchEmployeeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-search-employee', schemas: [CUSTOM_ELEMENTS_SCHEMA], standalone: true, imports: [
+                        MatFormField,
+                        MatInput,
                         NgClass,
                         MatAutocompleteModule,
-                        NgIf,
-                        ReactiveFormsModule
+                        ReactiveFormsModule,
+                        FormsModule,
+                        SatPopoverModule,
+                        ValidationErrorsComponent,
+                        InfoItemComponent,
+                        MatError
                     ], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => SearchEmployeeComponent),
                             multi: true,
                         },
-                    ], template: "@if(!isReadOnly){\r\n  <ng-container>\r\n    @if(label){\r\n      <div class=\"d-flex justify-content-between mb-1\">\r\n        <span class=\"form-label mb-0\">\r\n          {{label}}\r\n          <ds-icon icon=\"info\" class=\"cursor-pointer\" [satPopoverAnchor]=\"searchEmpPopover\"\r\n            ></ds-icon>\r\n            <!-- (click)=\"searchEmpPopover.toggle(); $event.stopImmediatePropagation()\" -->\r\n        </span>\r\n    @if(optional){\r\n      <span class=\"fs-11 fc-dark-gray\"> {{i18n.translate('Optional')}}\r\n      </span>\r\n    }\r\n      </div>\r\n    }\r\n    <mat-form-field class=\"primary-form {{className}}\" [floatLabel]=\"floatLabel\">\r\n      <mat-label>\r\n        {{label}}\r\n      </mat-label>\r\n      <ds-icon matPrefix icon=\"search\" class=\"fc-coral fs-18\"></ds-icon>\r\n      <label class=\"mat-form-content\">\r\n        <input type=\"text\" aria-label=\"Number\" (input)=\"onLoadOptions($event)\" matInput [disabled]=\"isDisabled\"\r\n          [formControl]=\"control\" [matAutocomplete]=\"auto\">\r\n     \r\n      </label>\r\n      <!-- <mat-error class=\"mb-2\" *ngIf=\"showErrorMessage\">{{errorMessage}}\r\n      </mat-error> -->\r\n      @if(loading){\r\n        <span class=\"sfi sfi-spinner d-inline-block spin fc-coral\" matSuffix></span>\r\n      }\r\n      <mat-autocomplete #auto=\"matAutocomplete\">\r\n        @for(option of data; track option){\r\n          <mat-option [value]=\"option?.['personName']\"\r\n          (onSelectionChange)=\"selectOption(option , $event)\">\r\n          <div class=\"d-flex align-items-center\">\r\n            <div class=\"img-card circled-img small\">\r\n              <img [src]=\"getImage(option?.email)\" onerror=\"this.onerror=null;this.src='assets/images/user.svg';\" alt=\"\">\r\n            </div>\r\n            <span class=\"mx-2\"></span>\r\n            <div class=\"line-height-1\">\r\n              <h6 class=\"fs-17 fw-medium fc-onyx mb-0 line-height-1\">{{option?.name}}</h6>\r\n              <span class=\"fs-13 fw-normal fc-dark-gray\">\r\n                {{option?.description}}\r\n              </span>\r\n            </div>\r\n          </div>\r\n        </mat-option>\r\n        }\r\n      </mat-autocomplete>\r\n      @if(!control?.valid){\r\n        <mat-error class=\"mb-2\">{{i18n.translate('validSearchError')}}{{label}}\r\n        </mat-error>\r\n      }\r\n   @if(showHint){\r\n    <mat-hint>\r\n      <span class=\"sfi sfi-check-circle font-10 fc-dark-gray\" [ngClass]=\"{'fc-oasis-light-imp':value}\"></span>\r\n      <span class=\"mx-1\"></span>\r\n      <span class=\"fs-12 fc-onyx\">{{hint}}</span>\r\n    </mat-hint>\r\n   }\r\n    </mat-form-field>\r\n    <!-- @if(showErrorMessage){\r\n      <mat-error class=\"mb-2\">{{errorMessage}}\r\n      </mat-error>\r\n    } -->\r\n  @if(userAlreadyExist){\r\n    <mat-error class=\"mb-2\">\r\n      {{ i18n.translate('userAlreadyExist') }}\r\n    </mat-error>\r\n  }\r\n  @if(arrayList?.length && !isReadOnly && multiple){\r\n    <div class=\"col-12\">\r\n      <div class=\"example-list n-results\">\r\n        @for(emails of arrayList;track $index){\r\n          <div class=\"example-box n-col px-3\" [ngClass]=\"{'mt-0': $index === 0}\">\r\n          <div class=\"d-flex flex-grow-1 w-100\">\r\n            <div class=\"user-info flex-grow-1\">\r\n              <img [src]=\"getImage(emails?.personEmail)\" onerror=\"this.onerror=null;this.src='assets/images/user.svg';\"\r\n                alt=\"\" class=\"prof-img\" draggable=\"false\">\r\n                @if(emails?.personName){\r\n                  <label>\r\n                    {{(emails?.personName)}}\r\n                    <span class=\"title\">\r\n                      {{emails?.personEmail}}\r\n                    </span>\r\n                  </label>\r\n                }\r\n            </div>\r\n            @if(!(isReadOnly)){\r\n              <ds-button class=\"ds-btn-action\" size=\"small\" (click)=\"deleteRow($index,emails)\" icon>\r\n                <ds-icon icon=\"trash\" class=\"fc-red fs-20\"></ds-icon>\r\n              </ds-button>\r\n            }\r\n           \r\n          </div>\r\n        </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  }\r\n \r\n  \r\n  </ng-container>\r\n}\r\n@if(!isReadOnly){\r\n  <ng-container>\r\n    <div class=\"d-flex justify-content-between mb-1\" *ngIf=\"label\">\r\n      <span class=\"form-label mb-0\">\r\n        {{label}}\r\n        <ds-icon icon=\"info\" class=\"cursor-pointer\" [satPopoverAnchor]=\"searchEmpPopover\"\r\n          ></ds-icon>\r\n          <!-- (click)=\"searchEmpPopover.toggle(); $event.stopImmediatePropagation()\" -->\r\n      </span>\r\n  \r\n      <span *ngIf=\"optional\" class=\"fs-11 fc-dark-gray\"> {{i18n.translate('Optional')}}\r\n      </span>\r\n    </div>\r\n    <mat-form-field class=\"primary-form {{className}}\" [floatLabel]=\"floatLabel\">\r\n      <mat-label>\r\n        {{label}}\r\n      </mat-label>\r\n      <ds-icon matPrefix icon=\"search\" class=\"fc-coral fs-18\"></ds-icon>\r\n      <label class=\"mat-form-content\">\r\n        <input type=\"text\" aria-label=\"Number\" (input)=\"onLoadOptions($event)\" matInput [disabled]=\"isDisabled\"\r\n          [formControl]=\"control\" [matAutocomplete]=\"auto\">\r\n     \r\n      </label>\r\n      <!-- <mat-error class=\"mb-2\" *ngIf=\"showErrorMessage\">{{errorMessage}}\r\n      </mat-error> -->\r\n      <span class=\"sfi sfi-spinner d-inline-block spin fc-coral\" matSuffix *ngIf=\"loading\"></span>\r\n      <mat-autocomplete #auto=\"matAutocomplete\">\r\n        <mat-option *ngFor=\"let option of data\" [value]=\"option?.['personName']\"\r\n          (onSelectionChange)=\"selectOption(option , $event)\">\r\n          <div class=\"d-flex align-items-center\">\r\n            <div class=\"img-card circled-img small\">\r\n              <img [src]=\"getImage(option?.email)\" onerror=\"this.onerror=null;this.src='assets/images/user.svg';\" alt=\"\">\r\n            </div>\r\n            <span class=\"mx-2\"></span>\r\n            <div class=\"line-height-1\">\r\n              <h6 class=\"fs-17 fw-medium fc-onyx mb-0 line-height-1\">{{option?.name}}</h6>\r\n              <span class=\"fs-13 fw-normal fc-dark-gray\">\r\n                {{option?.description}}\r\n              </span>\r\n            </div>\r\n          </div>\r\n        </mat-option>\r\n      </mat-autocomplete>\r\n      <mat-error class=\"mb-2\" *ngIf=\"(!control?.valid)\">{{i18n.translate('validSearchError')}}{{label}}\r\n      </mat-error>\r\n      <mat-hint *ngIf=\"showHint\">\r\n        <span class=\"sfi sfi-check-circle font-10 fc-dark-gray\" [ngClass]=\"{'fc-oasis-light-imp':value}\"></span>\r\n        <span class=\"mx-1\"></span>\r\n        <span class=\"fs-12 fc-onyx\">{{hint}}</span>\r\n      </mat-hint>\r\n    </mat-form-field>\r\n    <!-- <mat-error class=\"mb-2\" *ngIf=\"showErrorMessage\">{{errorMessage}}\r\n    </mat-error> -->\r\n  \r\n    <mat-error class=\"mb-2\" *ngIf=\"userAlreadyExist\">\r\n      {{ i18n.translate('userAlreadyExist') }}\r\n    </mat-error>\r\n  \r\n    <div class=\"col-12\" *ngIf=\"arrayList?.length && !isReadOnly && multiple\">\r\n      <div class=\"example-list n-results\">\r\n        <div class=\"example-box n-col px-3\" [ngClass]=\"{'mt-0': ind === 0}\"\r\n          *ngFor=\"let emails of arrayList; let ind = index\">\r\n          <div class=\"d-flex flex-grow-1 w-100\">\r\n            <div class=\"user-info flex-grow-1\">\r\n              <img [src]=\"getImage(emails?.personEmail)\" onerror=\"this.onerror=null;this.src='assets/images/user.svg';\"\r\n                alt=\"\" class=\"prof-img\" draggable=\"false\">\r\n              <label *ngIf=\"emails?.personName\">\r\n                {{(emails?.personName)}}\r\n                <span class=\"title\">\r\n                  {{emails?.personEmail}}\r\n                </span>\r\n              </label>\r\n            </div>\r\n            <ds-button class=\"ds-btn-action\" size=\"small\" *ngIf=\"!(isReadOnly)\" (click)=\"deleteRow(ind,emails)\" icon>\r\n              <ds-icon icon=\"trash\" class=\"fc-red fs-20\"></ds-icon>\r\n            </ds-button>\r\n  \r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  \r\n  </ng-container>\r\n}\r\n\r\n@if(isReadOnly){\r\n  <ng-container>\r\n    <!-- && (field?.personName || multiple) -->\r\n    <app-info-item class=\"d-flex flex-wrap align-items-center info-item w-100 mb-2\" type=\"user-picker\" [hasLabel]=\"!!label\"\r\n      [multiple]=\"multiple\" [ngClass]=\"{'user-picker': !isReadOnly}\" [actionType]=\"!isReadOnly ? 'delete' : 'edit'\"\r\n      [label]=\"label\"  [arrayList]=\"arrayList\">\r\n      <!-- [name]=\"field?.personName\"  [value]=\"field?.personEmail\" -->\r\n    </app-info-item>\r\n  </ng-container>\r\n}\r\n\r\n\r\n<sat-popover #searchEmpPopover [hasBackdrop]=\"true\" verticalAlign=\"below\">\r\n  <div class=\"default-popover p-3\">\r\n    <ol class=\"px-3 m-0\">\r\n      <li>{{i18n.translate('searchEmployeeTooltip_1')}}</li>\r\n      <li>{{i18n.translate('searchEmployeeTooltip_2')}}</li>\r\n      <li>{{i18n.translate('searchEmployeeTooltip_3')}}</li>\r\n      <li>{{i18n.translate('searchEmployeeTooltip_4')}}</li>\r\n    </ol>\r\n  </div>\r\n</sat-popover>\r\n", styles: [".small-input~.btn{height:41px}:host{flex-grow:1}.agenda-list.inside .mat-list-item{display:flex;align-items:center;padding:0 1rem;background-color:#fff;border:1px solid silver;height:88px!important}.agenda-list.inside .mat-list-item:before{position:relative;left:auto;right:auto}.agenda-list .mat-list-item{height:66px!important;background-color:#d3d3d3;margin-bottom:1.5rem;cursor:move}.agenda-list .mat-list-item:hover:before{opacity:1}.agenda-list .mat-list-item:before{content:\"\\e928\";font-family:stc-font-icons;left:-1.5rem;color:#a9a9a9;position:absolute;font-size:1.5rem;opacity:0;transition:all .3s linear}[dir=rtl] .agenda-list .mat-list-item:before{left:auto;right:-1.5rem}.agenda-list .mat-list-item:last-child{margin-bottom:0}.example-list{width:500px;max-width:100%;border:solid 1px #ccc;min-height:60px;display:block;background:#fff;border-radius:0;overflow:hidden}.example-box{color:#000000de;display:flex;box-sizing:border-box;cursor:move;font-size:14px;position:relative;background-color:#f3f3f1;padding:18px;justify-content:space-between;align-items:flex-start;margin-top:10px;padding-inline-start:50px;border:0;flex-direction:column;width:100%}.example-box .user-info{display:flex;align-items:center}.example-box .user-info .drag-icon{position:absolute;left:18px;cursor:move}html[dir=rtl] .example-box .user-info .drag-icon{left:auto;right:18px}.example-box .user-info .prof-img{width:40px;height:40px;border-radius:50%;border:2px solid #fff;margin-inline-end:10px}.example-box .user-info label{font-size:13px;font-weight:500;color:#1d242d;flex-grow:1}.example-box .user-info label .title{display:block;color:#ff375e;font-size:9px}.example-box .user-info-reviewer{display:flex;gap:.5rem;width:calc(100% + 68px);padding:10px 15px;margin:10px 0 -18px -50px;background-color:#dde0e1}[dir=rtl] .example-box .user-info-reviewer{margin:10px -50px -18px 0}.example-box .user-info-reviewer .drag-icon{position:absolute;transform:translateY(-50%);cursor:move}.example-box .user-info-reviewer .reviewer-info{display:flex}.example-box .user-info-reviewer .reviewer-info .prof-img{width:20px;height:20px;border-radius:50%;border:1px solid #fff;margin:0 5px}.example-box .user-info-reviewer .reviewer-info label{font-size:11px;font-weight:500;color:#000;width:100px;margin-top:1px}.example-box .user-info-reviewer .reviewer-info label .title{display:block;color:#ff375e;font-size:11px}.example-box .user-info-reviewer span{color:#a54ee1;font-size:11px;padding:0;margin-bottom:0;display:block;text-align:start}.example-box .icon{width:30px;height:30px;background-color:#ff375e33;text-align:center;line-height:26px;cursor:pointer;flex-shrink:0}.cdk-drag-preview{box-sizing:border-box;border-radius:0;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;overflow:hidden}.cdk-drag-preview .icon{display:none}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.n-content{max-width:700px;width:100%}.n-results{width:100%;border:0;counter-reset:section}.n-results .n-col{position:relative;background-color:#f3f3f1;padding:10px;justify-content:space-between;align-items:flex-start;margin-top:10px;padding-inline-start:50px;border:0;flex-direction:column;width:100%}.n-results .n-col:last-child{margin-bottom:30px}.n-results .n-col:after,.n-results .n-col:before{display:none}@media (max-width: 991px){.example-box .user-info:before{margin-inline-end:10px;flex-shrink:0}}@media (max-width: 767px){.n-col{padding-inline-start:40px}.n-col .user-info-reviewer span{margin-bottom:0}}@media (max-width: 321px){.n-results .n-col{flex-wrap:wrap;justify-content:center}.n-results .n-col .user-info{justify-content:center}.n-results .n-col .user-info:before{position:absolute;top:15px;left:15px}.n-results .n-col .user-info .prof-img{margin:0 10px 10px}.n-results .n-col .user-info label{width:100%;text-align:center}.n-results .n-col .icon{width:100%}}::ng-deep .default-popover{max-width:320px;right:-2.5rem!important}[dir=rtl] ::ng-deep .default-popover{left:-2.5rem!important;right:auto}\n"] }]
+                    ], template: "@if (!isReadOnly) {\r\n  <ng-container>\r\n    @if (label) {\r\n      <div class=\"d-flex justify-content-between mb-1\">\r\n        <span class=\"form-label mb-0\">\r\n          {{ label }}\r\n          <ds-icon icon=\"info\" class=\"cursor-pointer\" [satPopoverAnchor]=\"searchEmpPopover\"></ds-icon>\r\n        </span>\r\n        @if (optional) {\r\n          <span class=\"fs-11 fc-dark-gray\"> {{ i18n.translate('Optional') }}</span>\r\n        }\r\n      </div>\r\n    }\r\n    <mat-form-field class=\"primary-form {{className}}\" [floatLabel]=\"floatLabel\">\r\n      <mat-label>{{ label }}</mat-label>\r\n      <ds-icon icon=\"search\" class=\"fc-coral fs-18\"></ds-icon>\r\n      <label class=\"mat-form-content\">\r\n        <input\r\n          type=\"text\" aria-label=\"Number\" (input)=\"onLoadOptions($event)\" matInput [disabled]=\"isDisabled\"\r\n          [matAutocomplete]=\"auto\" [formControl]=\"employeeSearchControl\" [value]=\"control.value\">\r\n      </label>\r\n      @if (loading) {\r\n        <span class=\"sfi sfi-spinner d-inline-block spin fc-coral\" matSuffix></span>\r\n      }\r\n      <mat-autocomplete #auto=\"matAutocomplete\">\r\n        @for (option of data; track option) {\r\n          <mat-option\r\n            [value]=\"option?.['personName']\"\r\n            (onSelectionChange)=\"selectOption(option , $event)\">\r\n            <div class=\"d-flex align-items-center\">\r\n              <div class=\"img-card circled-img small\">\r\n                <img [src]=\"getImage(option?.email)\" onerror=\"this.onerror=null;this.src='assets/images/user.svg';\" alt=\"\">\r\n              </div>\r\n              <span class=\"mx-2\"></span>\r\n              <div class=\"line-height-1\">\r\n                <h6 class=\"fs-17 fw-medium fc-onyx mb-0 line-height-1\">{{ option?.name }}</h6>\r\n                <span class=\"fs-13 fw-normal fc-dark-gray\">\r\n                {{ option?.description }}\r\n              </span>\r\n              </div>\r\n            </div>\r\n          </mat-option>\r\n        }\r\n      </mat-autocomplete>\r\n      @if (showHint) {\r\n        <mat-hint>\r\n          <span class=\"sfi sfi-check-circle font-10 fc-dark-gray\" [ngClass]=\"{'fc-oasis-light-imp':value}\"></span>\r\n          <span class=\"mx-1\"></span>\r\n          <span class=\"fs-12 fc-onyx\">{{ hint }}</span>\r\n        </mat-hint>\r\n      }\r\n    </mat-form-field>\r\n    <app-validation-errors [errors]=\"control.errors\"></app-validation-errors>\r\n    @if (userAlreadyExist) {\r\n      <mat-error class=\"mb-2\">\r\n        {{ i18n.translate('userAlreadyExist') }}\r\n      </mat-error>\r\n    }\r\n    @if (arrayList?.length && !isReadOnly && multiple) {\r\n      <div class=\"col-12 mt-2\">\r\n        <div class=\"example-list n-results\">\r\n          @for (emails of arrayList; track $index) {\r\n            <div class=\"example-box n-col px-3\" [ngClass]=\"{'mt-0': $index === 0}\">\r\n              <div class=\"d-flex flex-grow-1 w-100\">\r\n                <div class=\"user-info flex-grow-1\">\r\n                  <img alt=\"user image\" [src]=\"getImage(emails?.['personEmail'])\" onerror=\"this.onerror=null;this.src='assets/images/user.svg';\"\r\n                    alt=\"\" class=\"prof-img\" draggable=\"false\">\r\n                  @if (emails?.['personName']) {\r\n                    <label>\r\n                      {{ (emails?.['personName']) }}\r\n                      <span class=\"title\">\r\n                      {{ emails?.['personEmail'] }}\r\n                    </span>\r\n                    </label>\r\n                  }\r\n                </div>\r\n                @if (!(isReadOnly)) {\r\n                  <ds-button class=\"ds-btn-action\" size=\"small\" (click)=\"deleteRow($index,emails)\" icon>\r\n                    <ds-icon icon=\"trash\" class=\"fc-red fs-20\"></ds-icon>\r\n                  </ds-button>\r\n                }\r\n\r\n              </div>\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n    }\r\n\r\n\r\n  </ng-container>\r\n}\r\n@if (isReadOnly) {\r\n  <ng-container>\r\n    <!-- && (field?.personName || multiple) -->\r\n    <app-info-item\r\n      class=\"info-item\" type=\"user-picker\" [hasLabel]=\"!!label\"\r\n      [multiple]=\"multiple\" [ngClass]=\"{'user-picker': !isReadOnly}\" [actionType]=\"!isReadOnly ? 'delete' : 'edit'\"\r\n      [label]=\"label\" [name]=\"control.value['personName']\" [value]=\"control.value['personEmail']\" [arrayList]=\"arrayList\">\r\n      <!-- [arrayList]=\"arrayList\" -->\r\n    </app-info-item>\r\n  </ng-container>\r\n}\r\n\r\n\r\n<sat-popover #searchEmpPopover [hasBackdrop]=\"true\" verticalAlign=\"below\">\r\n  <div class=\"default-popover p-3\">\r\n    <ol class=\"px-3 m-0\">\r\n      <li>{{ i18n.translate('searchEmployeeTooltip_1') }}</li>\r\n      <li>{{ i18n.translate('searchEmployeeTooltip_2') }}</li>\r\n      <li>{{ i18n.translate('searchEmployeeTooltip_3') }}</li>\r\n      <li>{{ i18n.translate('searchEmployeeTooltip_4') }}</li>\r\n    </ol>\r\n  </div>\r\n</sat-popover>\r\n", styles: [".small-input~.btn{height:41px}:host{flex-grow:1}.agenda-list.inside .mat-list-item{display:flex;align-items:center;padding:0 1rem;background-color:#fff;border:1px solid silver;height:88px!important}.agenda-list.inside .mat-list-item:before{position:relative;left:auto;right:auto}.agenda-list .mat-list-item{height:66px!important;background-color:#d3d3d3;margin-bottom:1.5rem;cursor:move}.agenda-list .mat-list-item:hover:before{opacity:1}.agenda-list .mat-list-item:before{content:\"\\e928\";font-family:stc-font-icons;left:-1.5rem;color:#a9a9a9;position:absolute;font-size:1.5rem;opacity:0;transition:all .3s linear}[dir=rtl] .agenda-list .mat-list-item:before{left:auto;right:-1.5rem}.agenda-list .mat-list-item:last-child{margin-bottom:0}.example-list{width:500px;max-width:100%;border:solid 1px #ccc;min-height:60px;display:block;background:#fff;border-radius:0;overflow:hidden}.example-box{color:#000000de;display:flex;box-sizing:border-box;cursor:move;font-size:14px;position:relative;background-color:#f3f3f1;padding:18px;justify-content:space-between;align-items:flex-start;margin-top:10px;padding-inline-start:50px;border:0;flex-direction:column;width:100%}.example-box .user-info{display:flex;align-items:center}.example-box .user-info .drag-icon{position:absolute;left:18px;cursor:move}html[dir=rtl] .example-box .user-info .drag-icon{left:auto;right:18px}.example-box .user-info .prof-img{width:40px;height:40px;border-radius:50%;border:2px solid #fff;margin-inline-end:10px}.example-box .user-info label{font-size:13px;font-weight:500;color:#1d242d;flex-grow:1}.example-box .user-info label .title{display:block;color:#ff375e;font-size:9px}.example-box .user-info-reviewer{display:flex;gap:.5rem;width:calc(100% + 68px);padding:10px 15px;margin:10px 0 -18px -50px;background-color:#dde0e1}[dir=rtl] .example-box .user-info-reviewer{margin:10px -50px -18px 0}.example-box .user-info-reviewer .drag-icon{position:absolute;transform:translateY(-50%);cursor:move}.example-box .user-info-reviewer .reviewer-info{display:flex}.example-box .user-info-reviewer .reviewer-info .prof-img{width:20px;height:20px;border-radius:50%;border:1px solid #fff;margin:0 5px}.example-box .user-info-reviewer .reviewer-info label{font-size:11px;font-weight:500;color:#000;width:100px;margin-top:1px}.example-box .user-info-reviewer .reviewer-info label .title{display:block;color:#ff375e;font-size:11px}.example-box .user-info-reviewer span{color:#a54ee1;font-size:11px;padding:0;margin-bottom:0;display:block;text-align:start}.example-box .icon{width:30px;height:30px;background-color:#ff375e33;text-align:center;line-height:26px;cursor:pointer;flex-shrink:0}.cdk-drag-preview{box-sizing:border-box;border-radius:0;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;overflow:hidden}.cdk-drag-preview .icon{display:none}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.n-content{max-width:700px;width:100%}.n-results{width:100%;border:0;counter-reset:section}.n-results .n-col{position:relative;background-color:#f3f3f1;padding:10px;justify-content:space-between;align-items:flex-start;margin-top:10px;padding-inline-start:50px;border:0;flex-direction:column;width:100%}.n-results .n-col:last-child{margin-bottom:30px}.n-results .n-col:after,.n-results .n-col:before{display:none}@media (max-width: 991px){.example-box .user-info:before{margin-inline-end:10px;flex-shrink:0}}@media (max-width: 767px){.n-col{padding-inline-start:40px}.n-col .user-info-reviewer span{margin-bottom:0}}@media (max-width: 321px){.n-results .n-col{flex-wrap:wrap;justify-content:center}.n-results .n-col .user-info{justify-content:center}.n-results .n-col .user-info:before{position:absolute;top:15px;left:15px}.n-results .n-col .user-info .prof-img{margin:0 10px 10px}.n-results .n-col .user-info label{width:100%;text-align:center}.n-results .n-col .icon{width:100%}}::ng-deep .default-popover{max-width:320px;right:-2.5rem!important}[dir=rtl] ::ng-deep .default-popover{left:-2.5rem!important;right:auto}\n"] }]
         }], propDecorators: { valueName: [{
                 type: Input
             }], tooltip: [{
@@ -3599,7 +3516,7 @@ class ToggleButtonComponent extends ControlValueAccessorDirective {
                 useExisting: forwardRef(() => ToggleButtonComponent),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "@if(!isReadOnly){\r\n  <ng-container>\r\n    @if(label){\r\n      <div class=\"d-flex justify-content-between mb-1\">\r\n        <span class=\"form-label mb-0\">{{label}}</span>\r\n        @if(!required){\r\n          <span class=\"fs-11 fc-dark-gray\">   {{i18n.translate('Optional')}}\r\n          </span>\r\n        }\r\n      \r\n      </div>\r\n    }\r\n  \r\n  @if(options){\r\n    <mat-button-toggle-group class=\"mb-3 secondary-toggle\" [value]=\"control.value\" [formControl]=\"control\"\r\n    aria-label=\"Font Style\" [multiple]=\"multiple\">\r\n    @for(item of options; track item){\r\n      <mat-button-toggle [value]=\"item[displayedLable]\" (click)=\"hasHint ? hintSection?.toggle() : null\" [satPopoverAnchor]=\"hintSection\">\r\n        <span>\r\n          {{item[displayedLable]}}\r\n        </span>\r\n        <sat-popover #hintSection [hasBackdrop]=\" true\" verticalAlign=\"below\">\r\n          <div class=\"default-tooltip\">\r\n            <p class=\"m-0\" [innerHTML]=\"item[displayedLable]\"></p>\r\n          </div>\r\n        </sat-popover>\r\n      </mat-button-toggle>\r\n    }\r\n\r\n </mat-button-toggle-group>\r\n  }\r\n  </ng-container>\r\n}\r\n\r\n@if(isReadOnly && control.value){\r\n  <ng-container>\r\n    <app-info-item class=\"info-item w-100\" [insideTable]=\"insideTable\" [type]=\"'toggleBtn'\" [label]=\"label\" [value]=\"control?.value\"></app-info-item>\r\n  </ng-container>\r\n  \r\n}\r\n", styles: [":host{flex-grow:1}\n"], dependencies: [{ kind: "directive", type: MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: SatPopoverModule }, { kind: "component", type: i1$2.SatPopoverComponent, selector: "sat-popover", inputs: ["anchor", "horizontalAlign", "xAlign", "verticalAlign", "yAlign", "forceAlignment", "lockAlignment", "autoFocus", "restoreFocus", "scrollStrategy", "hasBackdrop", "interactiveClose", "openTransition", "closeTransition", "openAnimationStartAtScale", "closeAnimationEndAtScale", "backdropClass", "panelClass"], outputs: ["opened", "closed", "afterOpen", "afterClose", "backdropClicked", "overlayKeydown"] }, { kind: "directive", type: i1$2.SatPopoverAnchorDirective, selector: "[satPopoverAnchor]", inputs: ["satPopoverAnchor"], exportAs: ["satPopoverAnchor"] }, { kind: "component", type: InfoItemComponent, selector: "app-info-item", inputs: ["label", "value", "name", "type", "dateType", "multiple", "insideTable", "hasLabel", "arrayList", "actionType", "download"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+        ], usesInheritance: true, ngImport: i0, template: "@if(!isReadOnly){\r\n  <ng-container>\r\n    @if(label){\r\n      <div class=\"d-flex justify-content-between mb-1\">\r\n        <span class=\"form-label mb-0\">{{label}}</span>\r\n        @if(!required){\r\n          <span class=\"fs-11 fc-dark-gray\">   {{i18n.translate('Optional')}}\r\n          </span>\r\n        }\r\n      \r\n      </div>\r\n    }\r\n  \r\n  @if(options){\r\n    <mat-button-toggle-group class=\"mb-3 secondary-toggle\" [value]=\"control.value\" [formControl]=\"control\"\r\n    aria-label=\"Font Style\" [multiple]=\"multiple\">\r\n    @for(item of options; track item){\r\n      <mat-button-toggle [value]=\"item[displayedLable]\" (click)=\"hasHint ? hintSection?.toggle() : null\" [satPopoverAnchor]=\"hintSection\">\r\n        <span>\r\n          {{item[displayedLable]}}\r\n        </span>\r\n        <sat-popover #hintSection [hasBackdrop]=\" true\" verticalAlign=\"below\">\r\n          <div class=\"default-tooltip\">\r\n            <p class=\"m-0\" [innerHTML]=\"item[displayedLable]\"></p>\r\n          </div>\r\n        </sat-popover>\r\n      </mat-button-toggle>\r\n    }\r\n\r\n </mat-button-toggle-group>\r\n  }\r\n  </ng-container>\r\n}\r\n\r\n@if(isReadOnly && control.value){\r\n  <ng-container>\r\n    <app-info-item class=\"info-item w-100\" [insideTable]=\"insideTable\" [type]=\"'toggleBtn'\" [label]=\"label\" [value]=\"control?.value\"></app-info-item>\r\n  </ng-container>\r\n  \r\n}\r\n", styles: [":host{flex-grow:1}\n"], dependencies: [{ kind: "directive", type: MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: SatPopoverModule }, { kind: "component", type: i1$1.SatPopoverComponent, selector: "sat-popover", inputs: ["anchor", "horizontalAlign", "xAlign", "verticalAlign", "yAlign", "forceAlignment", "lockAlignment", "autoFocus", "restoreFocus", "scrollStrategy", "hasBackdrop", "interactiveClose", "openTransition", "closeTransition", "openAnimationStartAtScale", "closeAnimationEndAtScale", "backdropClass", "panelClass"], outputs: ["opened", "closed", "afterOpen", "afterClose", "backdropClicked", "overlayKeydown"] }, { kind: "directive", type: i1$1.SatPopoverAnchorDirective, selector: "[satPopoverAnchor]", inputs: ["satPopoverAnchor"], exportAs: ["satPopoverAnchor"] }, { kind: "component", type: InfoItemComponent, selector: "app-info-item", inputs: ["label", "value", "name", "type", "dateType", "multiple", "insideTable", "hasLabel", "arrayList", "actionType", "download"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ToggleButtonComponent, decorators: [{
             type: Component,
@@ -3653,7 +3570,7 @@ class RepeatedListComponent {
         return "/group/i-gate/wm-bpm/forms/-/proxy/portrait?email=" + email;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: RepeatedListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: RepeatedListComponent, isStandalone: true, selector: "app-repeated-list", inputs: { listOfItems: "listOfItems", type: "type" }, ngImport: i0, template: "<div class=\"{{type}}\">\r\n  <ng-container *ngFor=\"let item of listOfItems; let i = index\">\r\n    <div class=\"item\" *ngIf=\"i <= 1\">\r\n      <span class=\"img-card circled-img x-small\" *ngIf=\"item.image\">\r\n        <img [src]=\"item.image\" [alt]=\"item.personName\">\r\n      </span>\r\n      <span class=\"name font-12\">\r\n        {{item.personName}}\r\n      </span>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <span class=\"text-color-onyx font-14 font-weight-medium cursor-pointer more\" *ngIf=\"listOfItems.length > 2\"\r\n    [satPopoverAnchor]=\"tooltipOfItems\" (mouseenter)=\"tooltipOfItems.open()\" (mouseleave)=\"tooltipOfItems.close()\">\r\n    {{listOfItems.length - 2 !== 0 ? '+' + (listOfItems.length - 2) : ''}}\r\n  </span>\r\n  <sat-popover #tooltipOfItems horizontalAlign=\"center\" verticalAlign=\"above\">\r\n    <div class=\"border bg-color-white\">\r\n      <div class=\"d-flex align-items-center border-bottom p-2\" [ngClass]=\"{'border-0': last}\"\r\n        *ngFor=\"let item of listOfItems; let i = index; let last = last\">\r\n        <span class=\"img-card circled-img x-small\" *ngIf=\"item.image\">\r\n          <img [src]=\"item.image\" [alt]=\"item.personName\">\r\n        </span>\r\n        <span class=\"mx-1\" *ngIf=\"item.image\"></span>\r\n        <span class=\"name font-12\">\r\n          {{item.personName}}\r\n        </span>\r\n\r\n      </div>\r\n    </div>\r\n  </sat-popover>\r\n\r\n\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: SatPopoverModule }, { kind: "component", type: i1$2.SatPopoverComponent, selector: "sat-popover", inputs: ["anchor", "horizontalAlign", "xAlign", "verticalAlign", "yAlign", "forceAlignment", "lockAlignment", "autoFocus", "restoreFocus", "scrollStrategy", "hasBackdrop", "interactiveClose", "openTransition", "closeTransition", "openAnimationStartAtScale", "closeAnimationEndAtScale", "backdropClass", "panelClass"], outputs: ["opened", "closed", "afterOpen", "afterClose", "backdropClicked", "overlayKeydown"] }, { kind: "directive", type: i1$2.SatPopoverAnchorDirective, selector: "[satPopoverAnchor]", inputs: ["satPopoverAnchor"], exportAs: ["satPopoverAnchor"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: RepeatedListComponent, isStandalone: true, selector: "app-repeated-list", inputs: { listOfItems: "listOfItems", type: "type" }, ngImport: i0, template: "<div class=\"{{type}}\">\r\n  <ng-container *ngFor=\"let item of listOfItems; let i = index\">\r\n    <div class=\"item\" *ngIf=\"i <= 1\">\r\n      <span class=\"img-card circled-img x-small\" *ngIf=\"item.image\">\r\n        <img [src]=\"item.image\" [alt]=\"item.personName\">\r\n      </span>\r\n      <span class=\"name font-12\">\r\n        {{item.personName}}\r\n      </span>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <span class=\"text-color-onyx font-14 font-weight-medium cursor-pointer more\" *ngIf=\"listOfItems.length > 2\"\r\n    [satPopoverAnchor]=\"tooltipOfItems\" (mouseenter)=\"tooltipOfItems.open()\" (mouseleave)=\"tooltipOfItems.close()\">\r\n    {{listOfItems.length - 2 !== 0 ? '+' + (listOfItems.length - 2) : ''}}\r\n  </span>\r\n  <sat-popover #tooltipOfItems horizontalAlign=\"center\" verticalAlign=\"above\">\r\n    <div class=\"border bg-color-white\">\r\n      <div class=\"d-flex align-items-center border-bottom p-2\" [ngClass]=\"{'border-0': last}\"\r\n        *ngFor=\"let item of listOfItems; let i = index; let last = last\">\r\n        <span class=\"img-card circled-img x-small\" *ngIf=\"item.image\">\r\n          <img [src]=\"item.image\" [alt]=\"item.personName\">\r\n        </span>\r\n        <span class=\"mx-1\" *ngIf=\"item.image\"></span>\r\n        <span class=\"name font-12\">\r\n          {{item.personName}}\r\n        </span>\r\n\r\n      </div>\r\n    </div>\r\n  </sat-popover>\r\n\r\n\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: SatPopoverModule }, { kind: "component", type: i1$1.SatPopoverComponent, selector: "sat-popover", inputs: ["anchor", "horizontalAlign", "xAlign", "verticalAlign", "yAlign", "forceAlignment", "lockAlignment", "autoFocus", "restoreFocus", "scrollStrategy", "hasBackdrop", "interactiveClose", "openTransition", "closeTransition", "openAnimationStartAtScale", "closeAnimationEndAtScale", "backdropClass", "panelClass"], outputs: ["opened", "closed", "afterOpen", "afterClose", "backdropClicked", "overlayKeydown"] }, { kind: "directive", type: i1$1.SatPopoverAnchorDirective, selector: "[satPopoverAnchor]", inputs: ["satPopoverAnchor"], exportAs: ["satPopoverAnchor"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: RepeatedListComponent, decorators: [{
             type: Component,
@@ -3731,7 +3648,7 @@ class TableListComponent extends BaseComponent {
     sentBack() {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: TableListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: TableListComponent, isStandalone: true, selector: "app-table-list", inputs: { columns: "columns", columnsConfig: "columnsConfig", rows: "rows", actions: "actions", totalRecords: "totalRecords", className: "className" }, outputs: { pageChanged: "pageChanged", buttonAction: "buttonAction", emitDataRow: "emitDataRow" }, usesInheritance: true, ngImport: i0, template: "<div class=\"overflow-auto\">\r\n  <!-- #table  (scroll)=\"onPageChange($event)\" -->\r\n  <ng-container >\r\n    <!-- (matSortChange)=\"sortData($event)\" -->\r\n    <table mat-table [dataSource]=\"dataSource\" class=\"primary-table {{className}}\" matSort >\r\n      <ng-container *ngFor=\"let column of columns; let i = index;\">\r\n        <ng-container [matColumnDef]=\"column\">\r\n          <th mat-header-cell *matHeaderCellDef [ngClass]=\"{'last-column' : columnsConfig[i].type === 'actions', 'sortArrow': columnsConfig[i]?.sortName?.length }\" mat-sort-header>\r\n            {{i18n.translate(columnsConfig[i].label)}} </th>\r\n  \r\n          <td mat-cell  [ngClass]=\"{'account-disabled': element?.user?.disabledCleanUp===true}\"  *matCellDef=\"let element\">\r\n            <ng-container [ngSwitch]=\"columnsConfig[i].type\" *ngIf=\"rows.length\">\r\n              <a [ngClass]=\"columnsConfig[i].type\" [href]=\"element[column]\" *ngSwitchCase=\"'link'\">\r\n                {{ element[column] }}\r\n              </a>\r\n  \r\n              <a [ngClass]=\"columnsConfig[i].type\" [routerLink]=\"[element.id]\" [href]=\"element[column]\"\r\n                *ngSwitchCase=\"'rout'\">\r\n                {{ element[column] }}\r\n              </a>\r\n  \r\n              <span class=\"d-inline-flex align-items-center\" [ngClass]=\"columnsConfig[i].type\" *ngSwitchCase=\"'date'\">\r\n                <span class=\"sfi sfi-clock text-color-coral\" *ngIf=\"!loading\"></span>\r\n                <span class=\"mx-2\">\r\n                  <!-- {{ element?.Date.from }}\r\n                  <ng-container *ngIf=\"element?.Date.to\">\r\n                  : {{ element?.Date.to }}\r\n                </ng-container> -->\r\n                  {{ element[column] | date: 'dd/MM/YYYY' }}\r\n                </span>\r\n              </span>\r\n  \r\n              <div class=\"d-inline-flex align-items-center\" [ngClass]=\"columnsConfig[i].type\" *ngSwitchCase=\"'sla'\">\r\n                <app-sla [value]=\"element?.SLA.value\" [maxValue]=\"element?.SLA.max\" [canvasScale]=\"45\"\r\n                  [outerLineColor]=\"getSlaColor(element?.SLA.value, element?.SLA.max)\"></app-sla>\r\n              </div>\r\n  \r\n              <div class=\"img-card table-img\" [ngClass]=\"columnsConfig[i].type\" *ngSwitchCase=\"'image'\">\r\n                <img [src]=\"element?.image\" alt=\"\">\r\n              </div>\r\n  \r\n              <span class=\"{{ element[column].type }}\" [ngClass]=\"columnsConfig[i].type\" *ngSwitchCase=\"'status'\">\r\n                {{ element[column].label }}\r\n              </span>\r\n  \r\n  \r\n              <div class=\"d-flex mx-n1\" *ngSwitchCase=\"'RequestType'\">\r\n                <div class=\"request-type mx-1 {{item.status}}\" *ngFor=\"let item of element?.RequestType\">\r\n                  {{ item.label }}\r\n                  <span class=\"mx-1\" *ngIf=\"item.status === 'need-action'\"></span>\r\n                  <span class=\"sfi sfi-info \" *ngIf=\"item.status === 'need-action'\"></span>\r\n                </div>\r\n              </div>\r\n  \r\n  \r\n              <span class=\"{{ element[column].type }} {{ element[column] ? 'text-color-coral underline' : '' }}\"\r\n                [ngClass]=\"columnsConfig[i].type\" *ngSwitchCase=\"'number'\">\r\n                {{ element[column] ? element[column] : '-' }}\r\n              </span>\r\n  \r\n              <div class=\"text-nowrap d-flex align-items-center\" [ngClass]=\"columnsConfig[i].type\"\r\n                *ngSwitchCase=\"'group'\">\r\n                <span>{{element?.Group.groupName}}</span>\r\n                <span class=\"mx-2\"></span>\r\n                <app-repeated-list type=\"users-avatar\" [listOfItems]=\"element?.Group.users\"></app-repeated-list>\r\n              </div>\r\n  \r\n              <div class=\"d-flex align-items-center gap-2\" [ngClass]=\"columnsConfig[i].type\" *ngSwitchCase=\"'user'\">\r\n                <span class=\"img-card circled-img small\" *ngIf=\"!loading\">\r\n                  <img src=\"{{'data:image/png;base64,' + element?.user?.personalPhoto}}\"\r\n                    onerror=\"this.onerror=null;this.src='assets/images/user.svg';\" alt=\"\">\r\n                </span>\r\n                <div class=\"d-flex flex-column\">\r\n                  <span class=\"font-14 font-weight-medium\">{{element?.user?.name}}</span>\r\n                  <span class=\"font-12 font-weight-normal text-color-dark-gray mt-1\">{{element?.user?.email}}</span>\r\n                </div>\r\n              </div>\r\n  \r\n  \r\n              <div class=\"delegate d-flex align-items-center\" [ngClass]=\"columnsConfig[i].type\"\r\n                *ngSwitchCase=\"'assigned'\">\r\n                <div class=\"img-card x-small circled-img\">\r\n                  <img [src]=\"element?.AssignedTo.image\" alt=\"\">\r\n                </div>\r\n                <span class=\"mx-1\"></span>\r\n                <span class=\"font-14 font-weight-medium text-color-onyx\">{{element?.AssignedTo.name}}</span>\r\n                <span class=\"sfi sfi-close text-color-coral\"></span>\r\n              </div>\r\n  \r\n  \r\n              <ng-container *ngSwitchCase=\"'statusAction'\">\r\n                <div class=\"table-action\">\r\n  \r\n                  <div class=\"count-down mx-n1\" *ngIf=\"element[column] === 'need-action'\">\r\n                    <div class=\"item mx-1\">\r\n                      <span class=\"font-12 font-weight-medium text-color-onyx d-block\">01</span>\r\n                      <span class=\"font-8 font-weight-light text-color-onyx d-block\">Days</span>\r\n                    </div>\r\n                    <div class=\"item mx-1\">\r\n                      <span class=\"font-12 font-weight-medium text-color-onyx d-block\">18</span>\r\n                      <span class=\"font-8 font-weight-light text-color-onyx d-block\">Hours</span>\r\n                    </div>\r\n                    <div class=\"item mx-1\">\r\n                      <span class=\"font-12 font-weight-medium text-color-onyx d-block\">44</span>\r\n                      <span class=\"font-8 font-weight-light text-color-onyx d-block\">Mins</span>\r\n                    </div>\r\n                  </div>\r\n  \r\n                  <div class=\"d-flex align-items-center\" *ngIf=\"element[column] === 'approved'\">\r\n                    <span class=\"status approved\">\r\n                      Approved\r\n                    </span>\r\n                  </div>\r\n  \r\n                  <div class=\"d-flex align-items-center\" *ngIf=\"element[column] === 'sent-back'\">\r\n                    <span class=\"status rejected\">\r\n                      Sent Back\r\n                    </span>\r\n                    <span class=\"mx-2\"></span>\r\n                    <button mat-stroked-button class=\"btn button-primary square br-w-1 font-14 font-weight-medium\"\r\n                      (click)=\"sentBack()\">\r\n                      <span class=\"sfi sfi-chat-o\"></span>\r\n                    </button>\r\n                  </div>\r\n  \r\n                  <div class=\"d-flex align-items-center\" *ngIf=\"element[column] === 'pending'\">\r\n                    <span class=\"status pending\">\r\n                      Pending\r\n                    </span>\r\n                    <span class=\"mx-2\"></span>\r\n  \r\n                    <div class=\"d-flex align-items-center mx-n1\">\r\n                      <div class=\"img-card circled-img x-small mx-1\">\r\n                        <img [src]=\"element?.pendingWith.image\" alt=\"\">\r\n                      </div>\r\n  \r\n                      <div class=\"d-flex flex-column mx-1\">\r\n                        <span class=\"font-8 font-weight-medium text-color-yellow text-nowrap\">Pending With</span>\r\n                        <span class=\"font-11 font-weight-medium text-nowrap\">{{element?.pendingWith.name}}</span>\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n  \r\n  \r\n                </div>\r\n              </ng-container>\r\n  \r\n  \r\n              <ng-container *ngSwitchCase=\"'actions'\">\r\n  \r\n                <div class=\"d-flex justify-content-between mx-n2\">\r\n                  <ng-container *ngFor=\"let action of element[column]\">\r\n  \r\n                    <div class=\"flex-grow-1\">\r\n                      <ng-container *ngIf=\"action.type.buttonType === 'stroked'\">\r\n                        <button mat-stroked-button (click)=\"buttonClicked(element,action.fn, $event)\"\r\n                          class=\"btn button-{{action.type.buttonClass}} mx-2\">\r\n                          {{action.label}}\r\n                        </button>\r\n                      </ng-container>\r\n  \r\n                      <ng-container *ngIf=\"action.type.buttonType === 'flat'\">\r\n                        <button mat-flat-button (click)=\"buttonClicked(element,action.fn, $event)\"\r\n                          class=\"btn button-{{action.type.buttonClass}} mx-2\">\r\n                          {{action.label}}\r\n                        </button>\r\n                      </ng-container>\r\n  \r\n                      <ng-container *ngIf=\"action.type.buttonType === 'icon'\">\r\n                        <button mat-icon-button (click)=\"buttonClicked(element,action.fn, $event)\"\r\n                          class=\"btn button-{{action.type.buttonClass}} mx-2\">\r\n                          <span class=\"sfi sfi-{{action.type.icon}}\"></span>\r\n                        </button>\r\n                      </ng-container>\r\n                    </div>\r\n  \r\n                    <ng-container *ngIf=\"action.type.buttonType === 'all'\">\r\n                      <button mat-icon-button class=\"btn button-transparent square medium mx-2 text-end\"\r\n                        [matMenuTriggerFor]=\"menuAction\" (click)=\"$event.stopPropagation()\">\r\n                        <span class=\"sfi sfi-dots text-color-onyx\"></span>\r\n                      </button>\r\n                      <mat-menu #menuAction=\"matMenu\" xPosition=\"before\" class=\"actions-menu\">\r\n                        <button *ngIf=\"!element?.user?.email && element?.user?.disabledCleanUp!==true\" mat-menu-item class=\"text-color-onyx font-12\"\r\n                          (click)=\"buttonClicked(element,'CreateEmail', $event)\">\r\n                          {{i18n.translate('createEmail')}} \r\n                        </button>\r\n                        <button *ngIf=\"element?.user?.email && element?.user?.enabled==='true'\" mat-menu-item class=\"text-color-red font-12\"\r\n                          (click)=\"buttonClicked(element,'DisableEmail', $event)\">\r\n                          {{ i18n.translate('disableEmail')}}\r\n                        </button>\r\n                        <button *ngIf=\"element?.user?.email  && element?.user?.disabledCleanUp===true\" mat-menu-item class=\"text-color-red font-12\"\r\n                          (click)=\"buttonClicked(element,'EnableEmail', $event)\">\r\n                          {{ i18n.translate('enableEmail')}}\r\n                        </button>\r\n                        <button *ngIf=\"element?.user!==null && element?.user?.disabledCleanUp!==true\" mat-menu-item class=\"text-color-onyx font-12\"\r\n                          (click)=\"buttonClicked(element,'CreateEntryPermission', $event)\">\r\n                          {{ i18n.translate('createCEP')}}\r\n                        </button>\r\n                        <!-- <button  *ngIf=\"!element?.user?.email\" mat-menu-item class=\"text-color-red font-12\"\r\n                          (click)=\"buttonClicked(element,'DisableEntryPermission', $event)\">\r\n                          {{i18n.translate('disableEntryPermission')}}\r\n                        </button> -->\r\n                        <button  *ngIf=\"!element?.user?.email && element?.user?.disabledCleanUp!==true\" mat-menu-item class=\"text-color-red font-12\"\r\n                        (click)=\"buttonClicked(element,'DeleteAccount', $event)\">\r\n                        {{i18n.translate('deleteAccount')}}\r\n                      </button>\r\n\r\n                        <button *ngIf=\"element?.user?.email && element?.user?.disabledCleanUp!==true\" [disabled]=\"!element?.mailExtensionAllowed\" mat-menu-item class=\"text-color-onyx font-12\"\r\n                          (click)=\"buttonClicked(element,'ExtendAccount', $event)\">\r\n                          {{ i18n.translate('extendAccount')}}\r\n                        </button>\r\n                        <button mat-menu-item class=\"text-color-onyx font-12\" *ngIf=\"element?.user?.disabledCleanUp!==true\" (click)=\"buttonClicked(element,'update', $event)\">\r\n                          {{ i18n.translate('updateEmploymentInformation')}}\r\n                        </button>\r\n                      </mat-menu>\r\n                    </ng-container>\r\n                  </ng-container>\r\n                </div>\r\n              </ng-container>\r\n  \r\n              <span class=\"text-nowrap\" [ngClass]=\"columnsConfig[i].type\" *ngSwitchDefault>\r\n                {{ element[column] }}\r\n              </span>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"loading\">\r\n              <span class=\" d-block loading-bg\"></span>\r\n            </ng-container>\r\n  \r\n          </td>\r\n  \r\n  \r\n        </ng-container>\r\n      </ng-container>\r\n  \r\n      <tr mat-header-row  *matHeaderRowDef=\"columns\"></tr>\r\n      <tr mat-row *matRowDef=\"let row; columns: columns;\" class=\"cursor-pointer\" (click)=\"selectedRow(row)\"></tr>\r\n    </table>\r\n  </ng-container>\r\n  <!-- <ng-container *ngIf=\"loading\">\r\n    <span>loading...</span>\r\n  </ng-container> -->\r\n  <!--  <ng-container *ngIf=\"loading\">-->\r\n  <!--    <td *matCellDef=\"let element\" >loading....</td>-->\r\n  <!--  </ng-container>-->\r\n  <!--{{this.rows | json}}-->\r\n  \r\n<!-- <app-no-data-placeholder *ngIf=\"noData && !loading\" [noDataPlaceholder]=\"noDataObj\"></app-no-data-placeholder> -->\r\n\r\n  <mat-paginator [pageSize]=\"10\" [length]=\"totalRecords\" (page)=\"onPageChange($event)\" \r\n    [pageSizeOptions]=\"[5, 10, 25, 100]\" aria-label=\"Select page of users\"></mat-paginator>\r\n  <!-- style-paginator -->\r\n  <!-- showFirstLastButtons -->\r\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i1$4.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i2$2.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i2$2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2$2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i2$2.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i2$2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2$2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i2$2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2$2.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i2$2.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i2$2.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "component", type: RepeatedListComponent, selector: "app-repeated-list", inputs: ["listOfItems", "type"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: NgSwitchDefault, selector: "[ngSwitchDefault]" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: TableListComponent, isStandalone: true, selector: "app-table-list", inputs: { columns: "columns", columnsConfig: "columnsConfig", rows: "rows", actions: "actions", totalRecords: "totalRecords", className: "className" }, outputs: { pageChanged: "pageChanged", buttonAction: "buttonAction", emitDataRow: "emitDataRow" }, usesInheritance: true, ngImport: i0, template: "<div class=\"overflow-auto\">\r\n  <!-- #table  (scroll)=\"onPageChange($event)\" -->\r\n  <ng-container >\r\n    <!-- (matSortChange)=\"sortData($event)\" -->\r\n    <table mat-table [dataSource]=\"dataSource\" class=\"primary-table {{className}}\" matSort >\r\n      <ng-container *ngFor=\"let column of columns; let i = index;\">\r\n        <ng-container [matColumnDef]=\"column\">\r\n          <th mat-header-cell *matHeaderCellDef [ngClass]=\"{'last-column' : columnsConfig[i].type === 'actions', 'sortArrow': columnsConfig[i]?.sortName?.length }\" mat-sort-header>\r\n            {{i18n.translate(columnsConfig[i].label)}} </th>\r\n  \r\n          <td mat-cell  [ngClass]=\"{'account-disabled': element?.user?.disabledCleanUp===true}\"  *matCellDef=\"let element\">\r\n            <ng-container [ngSwitch]=\"columnsConfig[i].type\" *ngIf=\"rows.length\">\r\n              <a [ngClass]=\"columnsConfig[i].type\" [href]=\"element[column]\" *ngSwitchCase=\"'link'\">\r\n                {{ element[column] }}\r\n              </a>\r\n  \r\n              <a [ngClass]=\"columnsConfig[i].type\" [routerLink]=\"[element.id]\" [href]=\"element[column]\"\r\n                *ngSwitchCase=\"'rout'\">\r\n                {{ element[column] }}\r\n              </a>\r\n  \r\n              <span class=\"d-inline-flex align-items-center\" [ngClass]=\"columnsConfig[i].type\" *ngSwitchCase=\"'date'\">\r\n                <span class=\"sfi sfi-clock text-color-coral\" *ngIf=\"!loading\"></span>\r\n                <span class=\"mx-2\">\r\n                  <!-- {{ element?.Date.from }}\r\n                  <ng-container *ngIf=\"element?.Date.to\">\r\n                  : {{ element?.Date.to }}\r\n                </ng-container> -->\r\n                  {{ element[column] | date: 'dd/MM/YYYY' }}\r\n                </span>\r\n              </span>\r\n  \r\n              <div class=\"d-inline-flex align-items-center\" [ngClass]=\"columnsConfig[i].type\" *ngSwitchCase=\"'sla'\">\r\n                <app-sla [value]=\"element?.SLA.value\" [maxValue]=\"element?.SLA.max\" [canvasScale]=\"45\"\r\n                  [outerLineColor]=\"getSlaColor(element?.SLA.value, element?.SLA.max)\"></app-sla>\r\n              </div>\r\n  \r\n              <div class=\"img-card table-img\" [ngClass]=\"columnsConfig[i].type\" *ngSwitchCase=\"'image'\">\r\n                <img [src]=\"element?.image\" alt=\"\">\r\n              </div>\r\n  \r\n              <span class=\"{{ element[column].type }}\" [ngClass]=\"columnsConfig[i].type\" *ngSwitchCase=\"'status'\">\r\n                {{ element[column].label }}\r\n              </span>\r\n  \r\n  \r\n              <div class=\"d-flex mx-n1\" *ngSwitchCase=\"'RequestType'\">\r\n                <div class=\"request-type mx-1 {{item.status}}\" *ngFor=\"let item of element?.RequestType\">\r\n                  {{ item.label }}\r\n                  <span class=\"mx-1\" *ngIf=\"item.status === 'need-action'\"></span>\r\n                  <span class=\"sfi sfi-info \" *ngIf=\"item.status === 'need-action'\"></span>\r\n                </div>\r\n              </div>\r\n  \r\n  \r\n              <span class=\"{{ element[column].type }} {{ element[column] ? 'text-color-coral underline' : '' }}\"\r\n                [ngClass]=\"columnsConfig[i].type\" *ngSwitchCase=\"'number'\">\r\n                {{ element[column] ? element[column] : '-' }}\r\n              </span>\r\n  \r\n              <div class=\"text-nowrap d-flex align-items-center\" [ngClass]=\"columnsConfig[i].type\"\r\n                *ngSwitchCase=\"'group'\">\r\n                <span>{{element?.Group.groupName}}</span>\r\n                <span class=\"mx-2\"></span>\r\n                <app-repeated-list type=\"users-avatar\" [listOfItems]=\"element?.Group.users\"></app-repeated-list>\r\n              </div>\r\n  \r\n              <div class=\"d-flex align-items-center gap-2\" [ngClass]=\"columnsConfig[i].type\" *ngSwitchCase=\"'user'\">\r\n                <span class=\"img-card circled-img small\" *ngIf=\"!loading\">\r\n                  <img src=\"{{'data:image/png;base64,' + element?.user?.personalPhoto}}\"\r\n                    onerror=\"this.onerror=null;this.src='assets/images/user.svg';\" alt=\"\">\r\n                </span>\r\n                <div class=\"d-flex flex-column\">\r\n                  <span class=\"font-14 font-weight-medium\">{{element?.user?.name}}</span>\r\n                  <span class=\"font-12 font-weight-normal text-color-dark-gray mt-1\">{{element?.user?.email}}</span>\r\n                </div>\r\n              </div>\r\n  \r\n  \r\n              <div class=\"delegate d-flex align-items-center\" [ngClass]=\"columnsConfig[i].type\"\r\n                *ngSwitchCase=\"'assigned'\">\r\n                <div class=\"img-card x-small circled-img\">\r\n                  <img [src]=\"element?.AssignedTo.image\" alt=\"\">\r\n                </div>\r\n                <span class=\"mx-1\"></span>\r\n                <span class=\"font-14 font-weight-medium text-color-onyx\">{{element?.AssignedTo.name}}</span>\r\n                <span class=\"sfi sfi-close text-color-coral\"></span>\r\n              </div>\r\n  \r\n  \r\n              <ng-container *ngSwitchCase=\"'statusAction'\">\r\n                <div class=\"table-action\">\r\n  \r\n                  <div class=\"count-down mx-n1\" *ngIf=\"element[column] === 'need-action'\">\r\n                    <div class=\"item mx-1\">\r\n                      <span class=\"font-12 font-weight-medium text-color-onyx d-block\">01</span>\r\n                      <span class=\"font-8 font-weight-light text-color-onyx d-block\">Days</span>\r\n                    </div>\r\n                    <div class=\"item mx-1\">\r\n                      <span class=\"font-12 font-weight-medium text-color-onyx d-block\">18</span>\r\n                      <span class=\"font-8 font-weight-light text-color-onyx d-block\">Hours</span>\r\n                    </div>\r\n                    <div class=\"item mx-1\">\r\n                      <span class=\"font-12 font-weight-medium text-color-onyx d-block\">44</span>\r\n                      <span class=\"font-8 font-weight-light text-color-onyx d-block\">Mins</span>\r\n                    </div>\r\n                  </div>\r\n  \r\n                  <div class=\"d-flex align-items-center\" *ngIf=\"element[column] === 'approved'\">\r\n                    <span class=\"status approved\">\r\n                      Approved\r\n                    </span>\r\n                  </div>\r\n  \r\n                  <div class=\"d-flex align-items-center\" *ngIf=\"element[column] === 'sent-back'\">\r\n                    <span class=\"status rejected\">\r\n                      Sent Back\r\n                    </span>\r\n                    <span class=\"mx-2\"></span>\r\n                    <button mat-stroked-button class=\"btn button-primary square br-w-1 font-14 font-weight-medium\"\r\n                      (click)=\"sentBack()\">\r\n                      <span class=\"sfi sfi-chat-o\"></span>\r\n                    </button>\r\n                  </div>\r\n  \r\n                  <div class=\"d-flex align-items-center\" *ngIf=\"element[column] === 'pending'\">\r\n                    <span class=\"status pending\">\r\n                      Pending\r\n                    </span>\r\n                    <span class=\"mx-2\"></span>\r\n  \r\n                    <div class=\"d-flex align-items-center mx-n1\">\r\n                      <div class=\"img-card circled-img x-small mx-1\">\r\n                        <img [src]=\"element?.pendingWith.image\" alt=\"\">\r\n                      </div>\r\n  \r\n                      <div class=\"d-flex flex-column mx-1\">\r\n                        <span class=\"font-8 font-weight-medium text-color-yellow text-nowrap\">Pending With</span>\r\n                        <span class=\"font-11 font-weight-medium text-nowrap\">{{element?.pendingWith.name}}</span>\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n  \r\n  \r\n                </div>\r\n              </ng-container>\r\n  \r\n  \r\n              <ng-container *ngSwitchCase=\"'actions'\">\r\n  \r\n                <div class=\"d-flex justify-content-between mx-n2\">\r\n                  <ng-container *ngFor=\"let action of element[column]\">\r\n  \r\n                    <div class=\"flex-grow-1\">\r\n                      <ng-container *ngIf=\"action.type.buttonType === 'stroked'\">\r\n                        <button mat-stroked-button (click)=\"buttonClicked(element,action.fn, $event)\"\r\n                          class=\"btn button-{{action.type.buttonClass}} mx-2\">\r\n                          {{action.label}}\r\n                        </button>\r\n                      </ng-container>\r\n  \r\n                      <ng-container *ngIf=\"action.type.buttonType === 'flat'\">\r\n                        <button mat-flat-button (click)=\"buttonClicked(element,action.fn, $event)\"\r\n                          class=\"btn button-{{action.type.buttonClass}} mx-2\">\r\n                          {{action.label}}\r\n                        </button>\r\n                      </ng-container>\r\n  \r\n                      <ng-container *ngIf=\"action.type.buttonType === 'icon'\">\r\n                        <button mat-icon-button (click)=\"buttonClicked(element,action.fn, $event)\"\r\n                          class=\"btn button-{{action.type.buttonClass}} mx-2\">\r\n                          <span class=\"sfi sfi-{{action.type.icon}}\"></span>\r\n                        </button>\r\n                      </ng-container>\r\n                    </div>\r\n  \r\n                    <ng-container *ngIf=\"action.type.buttonType === 'all'\">\r\n                      <button mat-icon-button class=\"btn button-transparent square medium mx-2 text-end\"\r\n                        [matMenuTriggerFor]=\"menuAction\" (click)=\"$event.stopPropagation()\">\r\n                        <span class=\"sfi sfi-dots text-color-onyx\"></span>\r\n                      </button>\r\n                      <mat-menu #menuAction=\"matMenu\" xPosition=\"before\" class=\"actions-menu\">\r\n                        <button *ngIf=\"!element?.user?.email && element?.user?.disabledCleanUp!==true\" mat-menu-item class=\"text-color-onyx font-12\"\r\n                          (click)=\"buttonClicked(element,'CreateEmail', $event)\">\r\n                          {{i18n.translate('createEmail')}} \r\n                        </button>\r\n                        <button *ngIf=\"element?.user?.email && element?.user?.enabled==='true'\" mat-menu-item class=\"text-color-red font-12\"\r\n                          (click)=\"buttonClicked(element,'DisableEmail', $event)\">\r\n                          {{ i18n.translate('disableEmail')}}\r\n                        </button>\r\n                        <button *ngIf=\"element?.user?.email  && element?.user?.disabledCleanUp===true\" mat-menu-item class=\"text-color-red font-12\"\r\n                          (click)=\"buttonClicked(element,'EnableEmail', $event)\">\r\n                          {{ i18n.translate('enableEmail')}}\r\n                        </button>\r\n                        <button *ngIf=\"element?.user!==null && element?.user?.disabledCleanUp!==true\" mat-menu-item class=\"text-color-onyx font-12\"\r\n                          (click)=\"buttonClicked(element,'CreateEntryPermission', $event)\">\r\n                          {{ i18n.translate('createCEP')}}\r\n                        </button>\r\n                        <!-- <button  *ngIf=\"!element?.user?.email\" mat-menu-item class=\"text-color-red font-12\"\r\n                          (click)=\"buttonClicked(element,'DisableEntryPermission', $event)\">\r\n                          {{i18n.translate('disableEntryPermission')}}\r\n                        </button> -->\r\n                        <button  *ngIf=\"!element?.user?.email && element?.user?.disabledCleanUp!==true\" mat-menu-item class=\"text-color-red font-12\"\r\n                        (click)=\"buttonClicked(element,'DeleteAccount', $event)\">\r\n                        {{i18n.translate('deleteAccount')}}\r\n                      </button>\r\n\r\n                        <button *ngIf=\"element?.user?.email && element?.user?.disabledCleanUp!==true\" [disabled]=\"!element?.mailExtensionAllowed\" mat-menu-item class=\"text-color-onyx font-12\"\r\n                          (click)=\"buttonClicked(element,'ExtendAccount', $event)\">\r\n                          {{ i18n.translate('extendAccount')}}\r\n                        </button>\r\n                        <button mat-menu-item class=\"text-color-onyx font-12\" *ngIf=\"element?.user?.disabledCleanUp!==true\" (click)=\"buttonClicked(element,'update', $event)\">\r\n                          {{ i18n.translate('updateEmploymentInformation')}}\r\n                        </button>\r\n                      </mat-menu>\r\n                    </ng-container>\r\n                  </ng-container>\r\n                </div>\r\n              </ng-container>\r\n  \r\n              <span class=\"text-nowrap\" [ngClass]=\"columnsConfig[i].type\" *ngSwitchDefault>\r\n                {{ element[column] }}\r\n              </span>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"loading\">\r\n              <span class=\" d-block loading-bg\"></span>\r\n            </ng-container>\r\n  \r\n          </td>\r\n  \r\n  \r\n        </ng-container>\r\n      </ng-container>\r\n  \r\n      <tr mat-header-row  *matHeaderRowDef=\"columns\"></tr>\r\n      <tr mat-row *matRowDef=\"let row; columns: columns;\" class=\"cursor-pointer\" (click)=\"selectedRow(row)\"></tr>\r\n    </table>\r\n  </ng-container>\r\n  <!-- <ng-container *ngIf=\"loading\">\r\n    <span>loading...</span>\r\n  </ng-container> -->\r\n  <!--  <ng-container *ngIf=\"loading\">-->\r\n  <!--    <td *matCellDef=\"let element\" >loading....</td>-->\r\n  <!--  </ng-container>-->\r\n  <!--{{this.rows | json}}-->\r\n  \r\n<!-- <app-no-data-placeholder *ngIf=\"noData && !loading\" [noDataPlaceholder]=\"noDataObj\"></app-no-data-placeholder> -->\r\n\r\n  <mat-paginator [pageSize]=\"10\" [length]=\"totalRecords\" (page)=\"onPageChange($event)\" \r\n    [pageSizeOptions]=\"[5, 10, 25, 100]\" aria-label=\"Select page of users\"></mat-paginator>\r\n  <!-- style-paginator -->\r\n  <!-- showFirstLastButtons -->\r\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i1$3.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i2$3.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i2$3.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2$3.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i2$3.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i2$3.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2$3.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i2$3.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2$3.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i2$3.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i2$3.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "component", type: RepeatedListComponent, selector: "app-repeated-list", inputs: ["listOfItems", "type"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: NgSwitchDefault, selector: "[ngSwitchDefault]" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: TableListComponent, decorators: [{
             type: Component,
@@ -3788,7 +3705,6 @@ class DocsUploaderComponent extends ControlValueAccessorDirective {
     allowedExtensions = '';
     callApi;
     tooltip;
-    attachments;
     optional = false;
     display = '';
     validExtension = true;
@@ -3805,7 +3721,8 @@ class DocsUploaderComponent extends ControlValueAccessorDirective {
     wrongFile = {
         mimeType: "",
         fileContents: "",
-        fileName: this.i18n.language == 'ar' ? "امتداد الملف خاطىء" : "Wrong File Extension"
+        fileName: this.i18n.language == 'ar' ? "امتداد الملف خاطىء" : "Wrong File Extension",
+        name: this.i18n.language == 'ar' ? "امتداد الملف خاطىء" : "Wrong File Extension"
     };
     allAttachments = [];
     uploadForm;
@@ -3818,10 +3735,11 @@ class DocsUploaderComponent extends ControlValueAccessorDirective {
     preventFileContents = false;
     addSignatureClicked = new EventEmitter();
     printActionClicked = new EventEmitter();
+    emitedValue = new EventEmitter();
     downloadActionClicked = new EventEmitter();
     maxSize = '10';
     inputFile;
-    dialog;
+    dialog = inject(MatDialog);
     validImageTypes = {
         jpg: ['image/jpeg', 'image/pjpeg'],
         JPG: ['image/jpeg', 'image/pjpeg'],
@@ -3874,37 +3792,11 @@ class DocsUploaderComponent extends ControlValueAccessorDirective {
     };
     uploading;
     lengthError;
-    downloadUrl;
     ngOnChanges(changes) {
         if (this.attachments?.length) {
             this.allAttachments = [...this.attachments];
         }
     }
-    // ngOnInit(): void {
-    /*  this.resetPropagator.subscribe(this, this.resetAttachmentData);
-      this.uploadForm = this.fb.group({
-        file: [''],
-        name: '',
-      });*/
-    // }
-    resetAttachmentData() {
-        if (!this.isReadOnly) {
-            if (this.multiple) {
-                this.displayedFiles = [];
-                this.allAttachments = [];
-                this.emit(this.displayedFiles);
-            }
-            else {
-                const emptyObj = {
-                    mimeType: "",
-                    fileContents: "",
-                    fileName: "",
-                };
-                this.emit(emptyObj);
-                this.selectedTemplateAttachment.emit(null);
-            }
-        }
-    }
     getFileType(attachment) {
         if (!attachment.fileName?.includes('.') && attachment.mimeType.includes('.')) {
             return this.checkFileType(attachment.mimeType);
@@ -3928,18 +3820,16 @@ class DocsUploaderComponent extends ControlValueAccessorDirective {
         }
         return attachmentData.split('.').pop();
     }
-    attch(type, index, field) {
+    attachmentAction(type, index, field) {
         if (type == "download") {
             if (this.downloadLink) {
                 window.open(field?.attachmentId, '_blank', 'top=0,left=0,height=auto,width=auto');
             }
-            else {
-                if (field && field.attachmentId) {
-                    this.downloadFile(type, field);
-                }
-                else if (field && field.fileContents) {
-                    this.downloadFileNew(field);
-                }
+            else if (field?.attachmentId) {
+                this.downloadFile(type, field);
+            }
+            else if (field?.fileContents) {
+                this.downloadFileNew(field);
             }
         }
         if (type == "delete") {
@@ -3977,127 +3867,99 @@ class DocsUploaderComponent extends ControlValueAccessorDirective {
         FileSaver.saveAs(blob, `${fileData.fileName}`);
     }
     onValueChange(event) {
-        if (event?.target?.files?.length > 0) {
-            if (this.formKey == 'TSV') {
-                const input = event.target;
-                this.selectedTemplateAttachment.emit(input.files[0]); ///// test
-            }
-            const file = event.target.files[0];
-            let fileType;
-            if (file.name !== null && file.name !== undefined && file.name.endsWith(".msg")) {
-                fileType = 'application/vnd.ms-outlook';
-            }
-            if (this.accept?.length) {
-                if (!this.accept.includes(file.type) && !this.accept.includes(fileType)) {
-                    alert(this.i18n.translate('thisIsInvalidFile'));
-                    return;
-                }
-            }
-            this.uploadForm?.get('file')?.setValue(file);
-            this.uploadForm?.get('name')?.setValue(file?.name);
+        const input = event.target;
+        this.control.setValue(null);
+        if (input?.files?.length > 0) {
+            this.handleFileInput(input);
+            this.processUploadedFile(input);
+        }
+    }
+    handleFileInput(input) {
+        if (input.files && this.formKey === 'TSV') {
+            this.selectedTemplateAttachment.emit(input.files[0]);
         }
+        const file = input.files[0];
+        let fileType = file.name?.endsWith(".msg") ? 'application/vnd.ms-outlook' : file.type;
+        if (this.accept?.length && !this.accept.includes(fileType)) {
+            alert(this.i18n.translate('thisIsInvalidFile'));
+            return;
+        }
+        this.uploadForm?.get('file')?.setValue(file);
+        this.uploadForm?.get('name')?.setValue(file?.name);
+    }
+    processUploadedFile(input) {
         if (!this.uploading) {
-            const input = event.target;
-            if (this.maxSize) {
-                this.filesize = ((input.files[0].size / 1024) / 1024).toFixed(4); // MB
-                this.maxSizeValue = this.maxSize;
+            const fileData = new FileInfo(input.files[0].name, input.files[0].name, input.files[0].type, '', this.filesize);
+            this.updateFileProperties(input, fileData);
+            if (!this.lengthError && +this.filesize < +this.maxSize) {
+                this.allowedFileSize = true;
+                this.uploadValidAndNonDuplicateFile(input, fileData);
             }
             else {
-                this.filesize = ((input.files[0].size / 1024) / 1024).toFixed(4); // MB
-                this.maxSizeValue = 1;
+                this.allowedFileSize = false;
             }
-            this.maxSizeFlag = +this.filesize < +this.maxSize;
-            this.lengthError = this.displayedFiles?.length >= +this.maxLength;
-            this.wrongExtensionFlag = this.isValidMimeType(input.files[0].type);
-            this.validExtension = this.isValidExtension(input.files[0].name.split('.').pop(), this.type);
-            if (!this.lengthError) {
-                if (+this.filesize < +this.maxSize) {
-                    this.allowedFileSize = true;
-                    if (this.validExtension) {
-                        if (this.getDataFromTemplate) {
-                            this.selectedTemplateAttachment.emit(event);
-                        }
-                        const obj = new AttatchmentFile(input.files[0].name, input.files[0].name, input.files[0].type, '', this.filesize);
-                        this.value = new AttatchmentFile(input.files[0].name, input.files[0].name, input.files[0].type, '', this.filesize);
-                        const reader = new FileReader();
-                        reader.onload = () => {
-                            obj.fileContents = reader.result.split(',')[1];
-                            obj.filesize = this.filesize;
-                            if (!this.multiple) {
-                                this.fileNotDuplicated = this.checkFileExistance(obj);
-                                if (!this.fileNotDuplicated) {
-                                    return;
-                                }
-                                this.value.fileContents = reader.result.split(',')[1];
-                                this.control.setValue(this.value);
-                                if (this.callApi) {
-                                    this.addAttachments();
-                                }
-                                else {
-                                    this.selectedTemplateAttachment.emit(event);
-                                }
-                            }
-                            else {
-                                this.fileNotDuplicated = this.checkFileExistance(obj);
-                                if (this.fileNotDuplicated) {
-                                    this.addMultiAttachments(obj);
-                                }
-                            }
-                        };
-                        reader.readAsDataURL(input.files[0]);
-                    }
-                    else {
-                        if (this.multiple) {
-                            return;
-                        }
-                        const emptyObj = {
-                            mimeType: "",
-                            fileContents: "",
-                            fileName: "",
-                        };
-                        this.emit(emptyObj);
-                        this.selectedTemplateAttachment.emit(null);
-                    }
-                }
-                else {
-                    this.allowedFileSize = false;
-                }
+            input.value = '';
+        }
+    }
+    updateFileProperties(input, fileInfo) {
+        this.maxSizeValue = this.maxSize ? this.maxSize : 1;
+        this.filesize = ((input.files[0].size / 1024) / 1024).toFixed(4);
+        this.maxSizeFlag = +this.filesize < +this.maxSize;
+        this.lengthError = this.displayedFiles?.length >= +this.maxLength;
+        this.wrongExtensionFlag = this.isValidMimeType(input.files[0].type);
+        this.validExtension = this.isValidExtension(input.files[0].name.split('.').pop(), this.type);
+        this.value = fileInfo;
+    }
+    uploadValidAndNonDuplicateFile(input, fileData) {
+        if (this.validExtension) {
+            if (this.getDataFromTemplate)
+                this.selectedTemplateAttachment.emit(input);
+            this.readFileAndUpload(input.files[0], fileData);
+        }
+        else if (!this.multiple) {
+            this.emitEmptyFile();
+        }
+    }
+    readFileAndUpload(file, fileInfo) {
+        const reader = new FileReader();
+        reader.onload = () => {
+            const fileContents = reader.result.split(',')[1];
+            fileInfo.fileContents = fileContents;
+            fileInfo.filesize = this.filesize;
+            if (!this.multiple) {
+                this.uploadSingleFile(fileContents, fileInfo);
+            }
+            else if (this.isFileNotDuplicate(fileInfo)) {
+                this.addMultiAttachments(fileInfo);
             }
-            event.target.value = '';
+        };
+        reader.readAsDataURL(file);
+    }
+    uploadSingleFile(fileContents, fileInfo) {
+        this.fileNotDuplicated = this.isFileNotDuplicate(fileInfo);
+        if (!this.fileNotDuplicated) {
+            return;
+        }
+        this.value.fileContents = fileContents;
+        this.control.setValue(this.value);
+        this.emitedValue.emit(this.value);
+        if (this.callApi) {
+            this.addAttachments();
+        }
+        else {
+            this.selectedTemplateAttachment.emit(this.value);
         }
     }
-    addAttachments() {
-        const data = {
-            "fileDescription": "",
-            "attachmentcomment": "",
-            "fileName": this.control.value.fileName,
-            "mimeType": this.control.value.mimeType,
-            "fileContents": this.control.value.fileContents,
+    emitEmptyFile() {
+        const emptyObj = {
+            mimeType: "",
+            fileContents: "",
+            fileName: "",
         };
-        this.uploading = true;
-        this.coreService.getAttachments(data).subscribe({
-            next: (form) => {
-                const newObj = {
-                    "fileName": this.control.value.fileName,
-                    "name": this.control.value.fileName,
-                    "attachmentId": form.attachment.attachmentId,
-                    "mimeType": form.attachment.mimeType
-                };
-                this.control.setValue(newObj);
-                this.uploading = false;
-                /*this.field = newObj
-                this.selectedTemplateAttachment.emit(this.field);
-                this.emit(this.field)*/
-            },
-            error: (err) => {
-                this.uploading = false;
-                /* this.noError = false;
-                 this.loading['form'] = false
-                 this.errorMessage = err?.error?.meta?.messages*/
-            }
-        });
+        this.emit(emptyObj);
+        this.selectedTemplateAttachment.emit(null);
     }
-    addMultiAttachments(field) {
+    processAttachments(field, allowMultiAttachments) {
         const data = {
             "fileDescription": "",
             "attachmentcomment": "",
@@ -4111,27 +3973,39 @@ class DocsUploaderComponent extends ControlValueAccessorDirective {
                 const newObj = {
                     "fileName": field.fileName,
                     "attachmentId": form.attachment.attachmentId,
-                    "mimeType": field.mimeType
+                    "mimeType": form.attachment.mimeType,
+                    "fileContents": field.fileContents
                 };
-                if (this.allowFileContentsWithMultiAttachments)
-                    newObj['fileContents'] = field.fileContents;
-                this.displayedFiles = this.displayedFiles?.length ? this.displayedFiles : [];
-                this.displayedFiles.push(newObj);
-                this.allAttachments.push(newObj);
-                this.emit(this.displayedFiles);
-                this.control.setValue(newObj);
-                /*this.field = newObj
-                this.selectedTemplateAttachment.emit(this.field);
-                this.emit(this.field)*/
+                if (allowMultiAttachments) {
+                    if (this.allowFileContentsWithMultiAttachments)
+                        newObj['fileContents'] = field.fileContents;
+                    this.displayedFiles = this.displayedFiles?.length ? this.displayedFiles : [];
+                    this.displayedFiles.push(newObj);
+                    this.allAttachments.push(newObj);
+                    this.emit(this.displayedFiles);
+                    this.control.setValue(this.displayedFiles);
+                }
+                else {
+                    this.control.setValue(newObj);
+                    this.emitedValue.emit(newObj);
+                }
+                this.uploading = false;
             },
             error: (err) => {
-                /* this.noError = false;
-                 this.loading['form'] = false
-                 this.errorMessage = err?.error?.meta?.messages*/
+                this.uploading = false;
+                err?.error?.meta?.messages?.forEach((msg) => {
+                    this.toasterService.error(msg.message);
+                });
             }
         });
     }
-    checkFileExistance(file) {
+    addAttachments() {
+        this.processAttachments(this.control.value, false);
+    }
+    addMultiAttachments(field) {
+        this.processAttachments(field, true);
+    }
+    isFileNotDuplicate(file) {
         if (this.allAttachments?.length) {
             return this.allAttachments?.findIndex(($file) => (file.fileName === $file.fileName)) === -1;
         }
@@ -4165,61 +4039,37 @@ class DocsUploaderComponent extends ControlValueAccessorDirective {
         }
     }
     removeAttachedFile() {
-        // this.field = this.value = new AttatchmentFile(null, null, null, null, null);
-        this.control.setValue(new AttatchmentFile(null, null, null, null, null));
+        // this.field = this.value = new FileInfo(null, null, null, null, null);
+        this.control.setValue(new FileInfo(null, null, null, null, null));
         if (this.inputFile) {
             this.inputFile.nativeElement.value = null;
         }
         // this.controller.setValue(this.field);
         this.emit(this.value);
+        this.control.setValue(null);
         this.selectedTemplateAttachment.emit(null);
     }
     downloadFile(event, field) {
         this.coreService.loadFile(field.attachmentId).subscribe((responseObject) => {
             const fileInformation = responseObject.body;
-            const fileBlob = this.coreService.dataURItoBlob(fileInformation.fileContents);
-            const file = new File([fileBlob], fileInformation.fileName, { type: fileInformation.mimeType });
+            this.coreService.saveFile(fileInformation);
+            /*const fileBlob = this.coreService.dataURItoBlob(fileInformation.fileContents);
+            const file = new File([fileBlob], fileInformation.fileName, {type: fileInformation.mimeType});
             const blobUrl = URL.createObjectURL(file);
             const link = document.createElement('a');
             link.href = blobUrl;
             link.download = fileInformation.fileName;
             link.click();
-            URL.revokeObjectURL(blobUrl);
+            URL.revokeObjectURL(blobUrl);*/
         }, error => {
             this.toasterService.error(error.error?.['message']);
         });
     }
-    addSignature(event) {
-        const obj = {
-            type: 'openPopupDialog'
-        };
-        this.addSignatureClicked.emit(obj);
-        event?.stopPropagation();
-        event?.preventDefault();
-    }
-    printFileData(event) {
-        this.printActionClicked.emit({ event, field: this.control.value });
-    }
-    downloadFileData(event) {
-        this.downloadActionClicked.emit({ event, field: this.control.value });
-    }
-    getExtension(attachment) {
-        if (attachment) {
-            if (attachment.split('.').pop() == 'msg') {
-                return 'email-icon';
-            }
-            else if (attachment.split('.').pop() == 'jpeg') {
-                return 'jpg';
-            }
-            return attachment.split('.').pop();
-        }
-    }
     emit(value) {
         if (this.preventFileContents) {
             value = JSON.parse(JSON.stringify(value));
             this.deleteFileContents(value);
         }
-        // this.emitedValue.emit(value);
     }
     deleteFileContents(data) {
         if (typeof data === 'object' && 'fileContents' in data) {
@@ -4230,13 +4080,13 @@ class DocsUploaderComponent extends ControlValueAccessorDirective {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: DocsUploaderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: DocsUploaderComponent, isStandalone: true, selector: "app-file-uploader", inputs: { useCrop: "useCrop", formKey: "formKey", showLabel: "showLabel", downloadLink: "downloadLink", showActions: "showActions", styleHeight: "styleHeight", fileInputHeight: "fileInputHeight", styleWidth: "styleWidth", hints: "hints", allowedExtensions: "allowedExtensions", callApi: "callApi", tooltip: "tooltip", attachments: "attachments", optional: "optional", display: "display", attachType: "attachType", error: "error", displayedFiles: "displayedFiles", getDataFromTemplate: "getDataFromTemplate", allowFileContentsWithMultiAttachments: "allowFileContentsWithMultiAttachments", accept: "accept", signType: "signType", showSignButton: "showSignButton", printType: "printType", showPrintButton: "showPrintButton", downloadType: "downloadType", showDownloadButton: "showDownloadButton", preventFileContents: "preventFileContents", maxSize: "maxSize" }, outputs: { selectedTemplateAttachment: "selectedTemplateAttachment", addSignatureClicked: "addSignatureClicked", printActionClicked: "printActionClicked", downloadActionClicked: "downloadActionClicked" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: DocsUploaderComponent, isStandalone: true, selector: "app-file-uploader", inputs: { useCrop: "useCrop", formKey: "formKey", showLabel: "showLabel", downloadLink: "downloadLink", showActions: "showActions", styleHeight: "styleHeight", fileInputHeight: "fileInputHeight", styleWidth: "styleWidth", hints: "hints", allowedExtensions: "allowedExtensions", callApi: "callApi", tooltip: "tooltip", optional: "optional", display: "display", attachType: "attachType", error: "error", displayedFiles: "displayedFiles", getDataFromTemplate: "getDataFromTemplate", allowFileContentsWithMultiAttachments: "allowFileContentsWithMultiAttachments", accept: "accept", signType: "signType", showSignButton: "showSignButton", printType: "printType", showPrintButton: "showPrintButton", downloadType: "downloadType", showDownloadButton: "showDownloadButton", preventFileContents: "preventFileContents", maxSize: "maxSize" }, outputs: { selectedTemplateAttachment: "selectedTemplateAttachment", addSignatureClicked: "addSignatureClicked", printActionClicked: "printActionClicked", emitedValue: "emitedValue", downloadActionClicked: "downloadActionClicked" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => DocsUploaderComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "inputFile", first: true, predicate: ["inputFile"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (!isReadOnly) {\r\n  <ng-container>\r\n    @if (label) {\r\n      <div class=\"d-flex justify-content-between mb-1\">\r\n        <span class=\"form-label mb-0\">{{ label }}</span>\r\n        @if (!required) {\r\n          <span class=\"fs-11 fc-dark-gray\">\r\n            {{ i18n.translate('Optional') }}\r\n          </span>\r\n        }\r\n\r\n      </div>\r\n    }\r\n\r\n\r\n\r\n    <section\r\n      [ngClass]=\"insideTable ? 'file-uploader-table' : 'file-uploader'\" class=\" mb-2\"\r\n      [class.insideTableStyle]=\"insideTable\">\r\n      <div\r\n        [ngClass]=\"insideTable ? 'file-uploader-table-dev' : ''\" class=\"file-uploader-input\"\r\n        (click)=\"fileAttached.click()\">\r\n        @if (!uploading) {\r\n          <div class=\"icon mb-1\">\r\n            <svg\r\n              [ngClass]=\"insideTable ? 'file-uploader-table-svg' : ''\" width=\"41\" height=\"38\" viewBox=\"0 0 41 38\"\r\n              fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n              <path\r\n                d=\"M0 22.1947V20.6736C0.0971303 20.1019 0.070094 19.5141 0.276371 18.9533C1.28372 16.2086 3.21231 14.5023 6.0421 13.8094C6.70499 13.6472 6.68497 13.6632 6.69899 12.9843C6.73203 11.3321 6.99839 9.71992 7.62423 8.17986C8.86289 5.13678 10.9467 2.83969 13.8816 1.39175C17.168 -0.230424 20.5956 -0.450719 24.0553 0.81598C27.4929 2.07467 29.9622 4.41581 31.4802 7.74828C31.7786 8.40316 32.027 9.08307 32.1712 9.79202C32.2402 10.1315 32.4035 10.2566 32.7529 10.3107C36.7012 10.9165 39.3358 13.1255 40.6946 16.8735C40.9069 17.4603 40.9199 18.0731 40.9599 18.6829C40.9649 18.7601 40.9389 18.8442 41 18.9113V20.5124C40.9109 20.995 40.969 21.4937 40.8608 21.9734C40.5244 23.4614 39.8454 24.7821 38.8501 25.9297C37.4522 27.5418 35.7059 28.5882 33.6161 29.0519C32.791 29.2351 31.9499 29.2521 31.1117 29.2922C30.6571 29.3142 30.584 29.193 30.592 28.7484C30.6451 25.8446 29.802 23.2571 27.8624 21.0591C25.9979 18.9463 23.6597 17.7167 20.867 17.4012C18.8553 17.1739 16.9057 17.4593 15.0612 18.3395C11.8319 19.8816 9.81416 22.4069 8.96102 25.8696C8.74273 26.7538 8.68265 27.658 8.70568 28.5702C8.7217 29.2111 8.60254 29.3122 7.95968 29.2972C5.95098 29.2511 4.10551 28.7234 2.58146 27.3596C1.07644 26.0168 0.0680913 24.3996 0.0400537 22.3028C0.0400537 22.2607 0.0250336 22.2257 0 22.1937V22.1947Z\"\r\n                fill=\"#DEE0E2\"/>\r\n              <path\r\n                d=\"M29.0303 28.2632C29.0604 33.4031 24.8657 37.6187 19.6838 37.6548C14.5169 37.6908 10.2852 33.4952 10.2521 28.3042C10.2201 23.1403 14.4297 18.9126 19.6227 18.8946C24.8037 18.8766 28.9993 23.0542 29.0303 28.2632Z\"\r\n                fill=\"#8E9AA0\"/>\r\n              <path\r\n                d=\"M20.5573 25.2644C20.4622 25.4477 20.5012 25.5939 20.5012 25.734C20.4982 28.2154 20.5002 30.6957 20.4982 33.177C20.4982 33.8099 20.2339 34.1704 19.7462 34.2234C19.2645 34.2765 18.88 33.9831 18.8169 33.5025C18.7959 33.3443 18.7969 33.183 18.7969 33.0238C18.7959 30.5826 18.7969 28.1423 18.7969 25.701C18.7969 25.5728 18.7969 25.4447 18.7969 25.2003C18.1971 25.8031 17.6774 26.3288 17.1527 26.8505C17.0115 26.9907 16.8683 27.1349 16.7061 27.2471C16.3566 27.4864 15.9341 27.4413 15.6457 27.154C15.3643 26.8746 15.3203 26.442 15.5486 26.0925C15.6207 25.9824 15.7128 25.8832 15.8069 25.7891C16.8613 24.7307 17.9167 23.6733 18.9732 22.6179C19.4017 22.1893 19.8784 22.1763 20.3039 22.5988C21.3914 23.6803 22.4739 24.7667 23.5533 25.8572C23.9809 26.2898 24.0129 26.8065 23.6534 27.167C23.299 27.5214 22.7753 27.4844 22.3437 27.0568C21.7499 26.47 21.1661 25.8732 20.5603 25.2644H20.5573Z\"\r\n                fill=\"#F9F9F9\"/>\r\n            </svg>\r\n          </div>\r\n        }\r\n        @if (uploading) {\r\n          <ds-icon class=\"sfi sfi-spinner d-inline-block spin fc-coral fs-30-imp\"></ds-icon>\r\n        }\r\n\r\n        <div class=\"f-14 fc-black fw-normal\">\r\n          <span class=\"fc-coral fw-medium\">{{ i18n.translate('browse') }}</span>\r\n        </div>\r\n        <div class=\"fs-10 fc-dark-gray\">\r\n          {{ allowedExtensions ? allowedExtensions : '' }}\r\n        </div>\r\n\r\n        <input type=\"file\" #inputFile [accept]=\"accept\" class=\"d-none\" #fileAttached (change)=\"onValueChange($event)\">\r\n      </div>\r\n\r\n    </section>\r\n\r\n    @if (hints) {\r\n      <div class=\"d-flex align-items-center gap-3 mb-3\">\r\n        @for (hint of hints; track hint) {\r\n          <ng-container>\r\n            <div class=\"d-flex align-items-center gap-1 fs-12\">\r\n              <ds-icon\r\n                icon=\"{{hint.valid ? 'check-circle-f' : 'check-circle-o'}}\"\r\n                class=\"fs-24 {{hint.valid ? 'fc-green' : 'fc-dark-gray'}}\"></ds-icon>\r\n              <span class=\"{{hint.valid ? 'fc-black' : 'fc-dark-gray'}}\">{{ hint.label }}</span>\r\n            </div>\r\n          </ng-container>\r\n        }\r\n      </div>\r\n    }\r\n\r\n    @if (hint) {\r\n      <mat-hint class=\"d-flex align-items-center gap-1\">\r\n        <ds-icon icon=\"info\" class=\"fs-17 fc-dark-gray\"></ds-icon>\r\n        <span class=\"fs-12 fc-black line-height-1\">{{ hint }}</span>\r\n      </mat-hint>\r\n    }\r\n\r\n\r\n    @if (multiple) {\r\n      <section class=\"files-list\">\r\n        @for (file of displayedFiles; track file; let i = $index) {\r\n          <div class=\"file-item-container\">\r\n            <ds-attachments\r\n              [file]=\"file\"\r\n              (downloadEvent)=\"attch('download',i,file)\"\r\n              (deleteEvent)=\"attch('delete',i,file)\"\r\n              [showActions]=\"showActions\">\r\n            </ds-attachments>\r\n            <a href=\"\" class=\"hidden-placeholder\"></a>\r\n            <!-- <mat-error class=\"fs-12\">Test error </mat-error> -->\r\n          </div>\r\n        }\r\n\r\n      </section>\r\n    }\r\n\r\n    @if (!multiple && (control.value?.fileContents || control.value?.attachmentId)) {\r\n      <section class=\"files-list\">\r\n\r\n        <!-- {{field | json }} -->\r\n        <div class=\"file-item-container file-item-container-actions\">\r\n          <ds-attachments\r\n            [file]=\"control.value\"\r\n            (downloadEvent)=\"attch('download',null,control.value)\"\r\n            (deleteEvent)=\"attch('delete',null,control.value)\"\r\n            [showActions]=\"showActions\">\r\n          </ds-attachments>\r\n          <a href=\"\" class=\"hidden-placeholder\"></a>\r\n          <ng-container *ngTemplateOutlet=\"attachmentCustomActions\"></ng-container>\r\n          <!-- <mat-error class=\"fs-12\">Test error </mat-error> -->\r\n        </div>\r\n\r\n\r\n      </section>\r\n    }\r\n    <div class=\"attachments-error\">\r\n\r\n      <!-- (!validExtension )  && !multiple -->\r\n      @if ((!validExtension)) {\r\n        <section class=\"files-list mt-2\">\r\n          <div class=\"file-item-container \">\r\n            <ds-attachments\r\n              [file]=\"wrongFile\" error [showActions]=\"false\">\r\n            </ds-attachments>\r\n          </div>\r\n        </section>\r\n      }\r\n\r\n      @if (!allowedFileSize) {\r\n        <mat-error class=\"fs-12 my-2\">\r\n          {{ maxSize === \"0.3\" ? i18n.translate('support3') : i18n.translate('support2') + maxSize + i18n.translate('mb') }}\r\n        </mat-error>\r\n      }\r\n      @if ((!fileNotDuplicated)) {\r\n        <mat-error class=\"fs-12 my-2\">{{ i18n.translate('duplicated-error') }}</mat-error>\r\n      }\r\n      @if (lengthError) {\r\n        <mat-error class=\"fs-12\">{{ i18n.translate('lengthError') }} :{{ maxLength }}</mat-error>\r\n      }\r\n      @if (showErrorMessage) {\r\n        <!-- <mat-error class=\"fs-12\">{{errorMessage}} </mat-error> -->\r\n      }\r\n\r\n    </div>\r\n  </ng-container>\r\n}\r\n\r\n\r\n@if (isReadOnly) {\r\n  <ng-container>\r\n    @if (multiple && displayedFiles) {\r\n      <ng-container>\r\n        <div class=\"info-item\">\r\n          @if (label) {\r\n            <span class=\"name\">{{ label }}</span>\r\n          }\r\n          @if (displayedFiles?.length) {\r\n            <span class=\"disc\">\r\n              @for (file of displayedFiles; track file; let i = $index) {\r\n                <div class=\"file-item-container\">\r\n                  <ds-attachments\r\n                    class=\"my-2\" [file]=\"file\" readOnly (attachmentEvent)=\"downloadFile($event,file)\"\r\n                    [showActions]=\"showActions\">\r\n                    <a href=\"\" class=\"hidden-placeholder\"></a>\r\n                  </ds-attachments>\r\n                  <a href=\"\" class=\"hidden-placeholder\"></a>\r\n                </div>\r\n              }\r\n\r\n              <a href=\"\" class=\"hidden-placeholder\"></a>\r\n            </span>\r\n          }\r\n          @if (!displayedFiles?.length) {\r\n            <span class=\"disc\">\r\n          {{ i18n.translate('NoAttachments') }}\r\n        </span>\r\n          }\r\n\r\n        </div>\r\n      </ng-container>\r\n    }\r\n\r\n    @if (!multiple && (control.value?.attachmentId || control.value?.fileContents)) {\r\n      <ng-container>\r\n        <div class=\"info-item\">\r\n          @if (label) {\r\n            <span class=\"name\">{{ label }}</span>\r\n          }\r\n          <div class=\"disc file-item-container file-item-container-actions\" [ngClass]=\"{'insideTableWidth':insideTable}\">\r\n            @if (control.value?.attachmentId || control.value?.fileContents) {\r\n              <ds-attachments\r\n                [matTooltip]=\"control.value?.fileName\" [file]=\"control.value\" [showActions]=\"showActions\"\r\n                (attachmentEvent)=\"attch($event,null,control.value)\" readOnly>\r\n              </ds-attachments>\r\n            }\r\n\r\n            <a href=\"\" class=\"hidden-placeholder\"></a>\r\n            <ng-container *ngTemplateOutlet=\"attachmentCustomActions\"></ng-container>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    }\r\n  </ng-container>\r\n}\r\n\r\n<ng-template #attachmentCustomActions>\r\n  @if (!isDisabled) {\r\n    <div class=\"uploaded-file-actions\">\r\n      @if (showSignButton) {\r\n        <ds-button shape=\"outline\" (click)=\"addSignature($event)\" color=\"red\">\r\n          {{ signType }}\r\n        </ds-button>\r\n      }\r\n      @if (showDownloadButton) {\r\n        <ds-button shape=\"outline\" (click)=\"downloadFileData($event)\" color=\"red\">\r\n          {{ downloadType }}\r\n        </ds-button>\r\n      }\r\n\r\n      @if (showDownloadButton) {\r\n        <a href=\"\" class=\"hidden-placeholder\"></a>\r\n      }\r\n      @if (showPrintButton) {\r\n        <ds-button shape=\"outline\" (click)=\"printFileData($event)\" color=\"red\">\r\n          {{ printType }}\r\n        </ds-button>\r\n      }\r\n    </div>\r\n  }\r\n</ng-template>\r\n", styles: [".file-uploader{--uploader-height: 150px;--uploader-width: 100%;--uploader-bg: var(--off-white);--uploader-border: 1px dashed var(--dark-gray);--uploader-radius: var(--box-radius);--uploader-padding: 1rem;height:var(--uploader-height);background-color:var(--uploader-bg);border:var(--uploader-border);border-radius:var(--uploader-radius);padding:var(--uploader-padding);text-align:center;cursor:pointer}.insideTableWidth{width:250px!important}.file-uploader-table{--uploader-height: 45PX;--uploader-width: 100%;--uploader-bg: var(--off-white);--uploader-border: 1px dashed var(--dark-gray);--uploader-radius: var(--box-radius);--uploader-padding: 0 1rem;height:var(--uploader-height);background-color:var(--uploader-bg);border:var(--uploader-border);border-radius:var(--uploader-radius);padding:var(--uploader-padding);text-align:center;cursor:pointer;DISPLAY:FLEX;ALIGN-ITEMS:CENTER;JUSTIFY-CONTENT:CENTER}.file-uploader-table-dev{DISPLAY:FLEX;ALIGN-ITEMS:CENTER;GAP:1REM}.file-uploader-table-svg{width:70%}.insideTableStyle{width:272px}.files-list{--file-item-width: 300px;display:grid;grid-template-columns:repeat(auto-fill,var(--file-item-width));grid-gap:.5rem}@media (max-width: 768px){.files-list{grid-template-columns:repeat(auto-fill,minmax(var(--file-item-width),1fr))}}.files-list .file-item-container .uploaded-file-actions{margin-inline-start:20px}.files-list .file-item-container .uploaded-file-actions .button__wrapper{font-size:15px}.files-list .file-item-container .file-item{--file-bg: var(--off-white);--file-radius: var(--box-radius);--icon-color: var(--purple);--icon-size: 2rem;--file-border: transparent;display:flex;align-items:center;background-color:var(--file-bg);border:1px solid var(--file-border);border-radius:var(--file-radius);padding:0 1rem;height:70px;gap:.75rem}.files-list .file-item-container .file-item.error{--file-bg: rgba(var(--rgb-red), 10%);--file-border: var(--red);--icon-color: var(--red)}.files-list .file-item-container .file-item .icon{color:var(--icon-color);font-size:var(--icon-size)}.files-list .file-item-container .file-item .file-action{display:flex;align-items:center;gap:.5rem}ds-attachments::part(base){--file-width: 250px}.file-item-container-actions{display:flex;align-items:center}.file-item-container-actions .uploaded-file-actions{display:flex;align-items:center;gap:10px;margin-inline-start:25px}.file-item-container-actions .uploaded-file-actions .button__wrapper{font-size:15px}::ng-deep .file-item .name-size{display:flex;flex-direction:column;justify-content:center;flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:120px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }] });
+        ], viewQueries: [{ propertyName: "inputFile", first: true, predicate: ["inputFile"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (!isReadOnly) {\r\n  <ng-container>\r\n    @if (label) {\r\n      <div class=\"d-flex justify-content-between mb-1\">\r\n        <span class=\"form-label mb-0\">{{ label }}</span>\r\n        @if (!required) {\r\n          <span class=\"fs-11 fc-dark-gray\">\r\n            {{ i18n.translate('Optional') }}\r\n          </span>\r\n        }\r\n      </div>\r\n    }\r\n\r\n\r\n\r\n    <section\r\n      [ngClass]=\"insideTable ? 'file-uploader-table' : 'file-uploader'\" class=\" mb-2\"\r\n      [class.insideTableStyle]=\"insideTable\">\r\n      <div\r\n        [ngClass]=\"insideTable ? 'file-uploader-table-dev' : ''\" class=\"file-uploader-input\"\r\n        (click)=\"fileAttached.click()\">\r\n        @if (!uploading) {\r\n          <div class=\"icon mb-1\">\r\n            <svg\r\n              [ngClass]=\"insideTable ? 'file-uploader-table-svg' : ''\" width=\"41\" height=\"38\" viewBox=\"0 0 41 38\"\r\n              fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n              <path\r\n                d=\"M0 22.1947V20.6736C0.0971303 20.1019 0.070094 19.5141 0.276371 18.9533C1.28372 16.2086 3.21231 14.5023 6.0421 13.8094C6.70499 13.6472 6.68497 13.6632 6.69899 12.9843C6.73203 11.3321 6.99839 9.71992 7.62423 8.17986C8.86289 5.13678 10.9467 2.83969 13.8816 1.39175C17.168 -0.230424 20.5956 -0.450719 24.0553 0.81598C27.4929 2.07467 29.9622 4.41581 31.4802 7.74828C31.7786 8.40316 32.027 9.08307 32.1712 9.79202C32.2402 10.1315 32.4035 10.2566 32.7529 10.3107C36.7012 10.9165 39.3358 13.1255 40.6946 16.8735C40.9069 17.4603 40.9199 18.0731 40.9599 18.6829C40.9649 18.7601 40.9389 18.8442 41 18.9113V20.5124C40.9109 20.995 40.969 21.4937 40.8608 21.9734C40.5244 23.4614 39.8454 24.7821 38.8501 25.9297C37.4522 27.5418 35.7059 28.5882 33.6161 29.0519C32.791 29.2351 31.9499 29.2521 31.1117 29.2922C30.6571 29.3142 30.584 29.193 30.592 28.7484C30.6451 25.8446 29.802 23.2571 27.8624 21.0591C25.9979 18.9463 23.6597 17.7167 20.867 17.4012C18.8553 17.1739 16.9057 17.4593 15.0612 18.3395C11.8319 19.8816 9.81416 22.4069 8.96102 25.8696C8.74273 26.7538 8.68265 27.658 8.70568 28.5702C8.7217 29.2111 8.60254 29.3122 7.95968 29.2972C5.95098 29.2511 4.10551 28.7234 2.58146 27.3596C1.07644 26.0168 0.0680913 24.3996 0.0400537 22.3028C0.0400537 22.2607 0.0250336 22.2257 0 22.1937V22.1947Z\"\r\n                fill=\"#DEE0E2\"/>\r\n              <path\r\n                d=\"M29.0303 28.2632C29.0604 33.4031 24.8657 37.6187 19.6838 37.6548C14.5169 37.6908 10.2852 33.4952 10.2521 28.3042C10.2201 23.1403 14.4297 18.9126 19.6227 18.8946C24.8037 18.8766 28.9993 23.0542 29.0303 28.2632Z\"\r\n                fill=\"#8E9AA0\"/>\r\n              <path\r\n                d=\"M20.5573 25.2644C20.4622 25.4477 20.5012 25.5939 20.5012 25.734C20.4982 28.2154 20.5002 30.6957 20.4982 33.177C20.4982 33.8099 20.2339 34.1704 19.7462 34.2234C19.2645 34.2765 18.88 33.9831 18.8169 33.5025C18.7959 33.3443 18.7969 33.183 18.7969 33.0238C18.7959 30.5826 18.7969 28.1423 18.7969 25.701C18.7969 25.5728 18.7969 25.4447 18.7969 25.2003C18.1971 25.8031 17.6774 26.3288 17.1527 26.8505C17.0115 26.9907 16.8683 27.1349 16.7061 27.2471C16.3566 27.4864 15.9341 27.4413 15.6457 27.154C15.3643 26.8746 15.3203 26.442 15.5486 26.0925C15.6207 25.9824 15.7128 25.8832 15.8069 25.7891C16.8613 24.7307 17.9167 23.6733 18.9732 22.6179C19.4017 22.1893 19.8784 22.1763 20.3039 22.5988C21.3914 23.6803 22.4739 24.7667 23.5533 25.8572C23.9809 26.2898 24.0129 26.8065 23.6534 27.167C23.299 27.5214 22.7753 27.4844 22.3437 27.0568C21.7499 26.47 21.1661 25.8732 20.5603 25.2644H20.5573Z\"\r\n                fill=\"#F9F9F9\"/>\r\n            </svg>\r\n          </div>\r\n        }\r\n        @if (uploading) {\r\n          <ds-icon class=\"sfi sfi-spinner d-inline-block spin fc-coral fs-30-imp\"></ds-icon>\r\n        }\r\n\r\n        <div class=\"f-14 fc-black fw-normal\">\r\n          <span class=\"fc-coral fw-medium\">{{ i18n.translate('browse') }}</span>\r\n        </div>\r\n        <div class=\"fs-10 fc-dark-gray\">\r\n          {{ allowedExtensions ? allowedExtensions : '' }}\r\n        </div>\r\n\r\n        <input type=\"file\" #inputFile [accept]=\"accept\" class=\"d-none\" #fileAttached (change)=\"onValueChange($event)\">\r\n      </div>\r\n\r\n    </section>\r\n\r\n    @if (hints) {\r\n      <div class=\"d-flex align-items-center gap-3 mb-3\">\r\n        @for (hint of hints; track hint) {\r\n          <ng-container>\r\n            <div class=\"d-flex align-items-center gap-1 fs-12\">\r\n              <ds-icon\r\n                icon=\"{{hint.valid ? 'check-circle-f' : 'check-circle-o'}}\"\r\n                class=\"fs-24 {{hint.valid ? 'fc-green' : 'fc-dark-gray'}}\"></ds-icon>\r\n              <span class=\"{{hint.valid ? 'fc-black' : 'fc-dark-gray'}}\">{{ hint.label }}</span>\r\n            </div>\r\n          </ng-container>\r\n        }\r\n      </div>\r\n    }\r\n\r\n    @if (hint) {\r\n      <mat-hint class=\"d-flex align-items-center gap-1\">\r\n        <ds-icon icon=\"info\" class=\"fs-17 fc-dark-gray\"></ds-icon>\r\n        <span class=\"fs-12 fc-black line-height-1\">{{ hint }}</span>\r\n      </mat-hint>\r\n    }\r\n\r\n\r\n    @if (multiple) {\r\n      <section class=\"files-list\">\r\n        @for (file of displayedFiles; track file; let i = $index) {\r\n          <div class=\"file-item-container\">\r\n            <ds-attachments\r\n              [matTooltip]=\"file?.fileName\"\r\n              [file]=\"{name :file.fileName}\"\r\n              (downloadEvent)=\"attachmentAction('download',i,file)\"\r\n              (deleteEvent)=\"attachmentAction('delete',i,file)\"\r\n              [showActions]=\"showActions\">\r\n            </ds-attachments>\r\n            <!-- <mat-error class=\"fs-12\">Test error </mat-error> -->\r\n          </div>\r\n        }\r\n\r\n      </section>\r\n    }\r\n\r\n    @if (!multiple && (control.value?.fileContents || control.value?.attachmentId)) {\r\n      <section class=\"files-list\">\r\n        <div class=\"file-item-container file-item-container-actions\">\r\n          <ds-attachments\r\n            [matTooltip]=\"control.value?.fileName\"\r\n            [file]=\"{name :control.value.fileName}\"\r\n            (downloadEvent)=\"attachmentAction('download',null,control.value)\"\r\n            (deleteEvent)=\"attachmentAction('delete',null,control.value)\"\r\n            [showActions]=\"showActions\">\r\n          </ds-attachments>\r\n        </div>\r\n\r\n\r\n      </section>\r\n    }\r\n    <div class=\"attachments-error\">\r\n\r\n      <!-- (!validExtension )  && !multiple -->\r\n      @if ((!validExtension)) {\r\n        <section class=\"files-list mt-2\">\r\n          <div class=\"file-item-container \">\r\n            <ds-attachments\r\n              [file]=\"wrongFile\" error [showActions]=\"false\">\r\n            </ds-attachments>\r\n          </div>\r\n        </section>\r\n      }\r\n\r\n      @if (!allowedFileSize) {\r\n        <mat-error class=\"fs-12 my-2\">\r\n          {{ maxSize === \"0.3\" ? i18n.translate('support3') : i18n.translate('support2') + maxSize + i18n.translate('mb') }}\r\n        </mat-error>\r\n      }\r\n      @if ((!fileNotDuplicated)) {\r\n        <mat-error class=\"fs-12 my-2\">{{ i18n.translate('duplicated-error') }}</mat-error>\r\n      }\r\n      @if (lengthError) {\r\n        <mat-error class=\"fs-12\">{{ i18n.translate('lengthError') }} :{{ maxLength }}</mat-error>\r\n      }\r\n      @if (showErrorMessage) {\r\n        <!-- <mat-error class=\"fs-12\">{{errorMessage}} </mat-error> -->\r\n      }\r\n\r\n    </div>\r\n  </ng-container>\r\n}\r\n\r\n\r\n@if (isReadOnly) {\r\n  <ng-container>\r\n    @if (multiple && displayedFiles) {\r\n      <ng-container>\r\n        <div class=\"info-item\">\r\n          @if (label) {\r\n            <span class=\"name\">{{ label }}</span>\r\n          }\r\n          @if (displayedFiles?.length) {\r\n            <span>\r\n              @for (file of displayedFiles; track file; let i = $index) {\r\n                <div class=\"file-item-container\">\r\n                  <ds-attachments\r\n                    [matTooltip]=\"file?.fileName\"\r\n                    class=\"my-2\" [file]=\"{name :file.fileName}\" readOnly (downloadEvent)=\"downloadFile($event,file)\"\r\n                    [showActions]=\"showActions\">\r\n                  </ds-attachments>\r\n                </div>\r\n              }\r\n            </span>\r\n          }\r\n          @if (!displayedFiles?.length) {\r\n            <span class=\"disc\">\r\n          {{ i18n.translate('NoAttachments') }}\r\n        </span>\r\n          }\r\n\r\n        </div>\r\n      </ng-container>\r\n    }\r\n\r\n    @if (!multiple && (control.value?.['attachmentId'] || control.value?.['fileContents'])) {\r\n      <ng-container>\r\n        <div class=\"info-item\">\r\n          @if (label) {\r\n            <span class=\"name\">{{ label }}</span>\r\n          }\r\n          <div class=\"disc file-item-container file-item-container-actions\" [ngClass]=\"{'insideTableWidth':insideTable}\">\r\n            @if (control.value?.['attachmentId'] || control.value?.['fileContents']) {\r\n              <ds-attachments\r\n                [matTooltip]=\"control.value?.fileName\" [file]=\"{name :control.value.fileName}\" [showActions]=\"showActions\"\r\n                (downloadEvent)=\"attachmentAction('download',null,control.value)\"\r\n                (deleteEvent)=\"attachmentAction('delete',null,control.value)\"\r\n                readOnly>\r\n              </ds-attachments>\r\n            }\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    }\r\n  </ng-container>\r\n}\r\n", styles: [".file-uploader{--uploader-height: 150px;--uploader-width: 100%;--uploader-bg: var(--off-white);--uploader-border: 1px dashed var(--dark-gray);--uploader-radius: var(--box-radius);--uploader-padding: 1rem;height:var(--uploader-height);background-color:var(--uploader-bg);border:var(--uploader-border);border-radius:var(--uploader-radius);padding:var(--uploader-padding);text-align:center;cursor:pointer}.insideTableWidth{width:250px!important}.file-uploader-table{--uploader-height: 45PX;--uploader-width: 100%;--uploader-bg: var(--off-white);--uploader-border: 1px dashed var(--dark-gray);--uploader-radius: var(--box-radius);--uploader-padding: 0 1rem;height:var(--uploader-height);background-color:var(--uploader-bg);border:var(--uploader-border);border-radius:var(--uploader-radius);padding:var(--uploader-padding);text-align:center;cursor:pointer;DISPLAY:FLEX;ALIGN-ITEMS:CENTER;JUSTIFY-CONTENT:CENTER}.file-uploader-table-dev{DISPLAY:FLEX;ALIGN-ITEMS:CENTER;GAP:1REM}.file-uploader-table-svg{width:70%}.insideTableStyle{width:272px}.files-list{--file-item-width: 300px;display:grid;grid-template-columns:repeat(auto-fill,var(--file-item-width));grid-gap:.5rem}@media (max-width: 768px){.files-list{grid-template-columns:repeat(auto-fill,minmax(var(--file-item-width),1fr))}}.files-list .file-item-container .uploaded-file-actions{margin-inline-start:20px}.files-list .file-item-container .uploaded-file-actions .button__wrapper{font-size:15px}.files-list .file-item-container .file-item{--file-bg: var(--off-white);--file-radius: var(--box-radius);--icon-color: var(--purple);--icon-size: 2rem;--file-border: transparent;display:flex;align-items:center;background-color:var(--file-bg);border:1px solid var(--file-border);border-radius:var(--file-radius);padding:0 1rem;height:70px;gap:.75rem}.files-list .file-item-container .file-item.error{--file-bg: rgba(var(--rgb-red), 10%);--file-border: var(--red);--icon-color: var(--red)}.files-list .file-item-container .file-item .icon{color:var(--icon-color);font-size:var(--icon-size)}.files-list .file-item-container .file-item .file-action{display:flex;align-items:center;gap:.5rem}ds-attachments::part(base){--file-width: 250px}.file-item-container-actions{display:flex;align-items:center}.file-item-container-actions .uploaded-file-actions{display:flex;align-items:center;gap:10px;margin-inline-start:25px}.file-item-container-actions .uploaded-file-actions .button__wrapper{font-size:15px}::ng-deep .file-item .name-size{display:flex;flex-direction:column;justify-content:center;flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:120px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: DocsUploaderComponent, decorators: [{
             type: Component,
@@ -4246,14 +4096,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                         NgForOf,
                         MatError,
                         NgTemplateOutlet,
-                        MatHint
+                        MatHint,
+                        MatTooltip
                     ], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => DocsUploaderComponent),
                             multi: true,
                         },
-                    ], template: "@if (!isReadOnly) {\r\n  <ng-container>\r\n    @if (label) {\r\n      <div class=\"d-flex justify-content-between mb-1\">\r\n        <span class=\"form-label mb-0\">{{ label }}</span>\r\n        @if (!required) {\r\n          <span class=\"fs-11 fc-dark-gray\">\r\n            {{ i18n.translate('Optional') }}\r\n          </span>\r\n        }\r\n\r\n      </div>\r\n    }\r\n\r\n\r\n\r\n    <section\r\n      [ngClass]=\"insideTable ? 'file-uploader-table' : 'file-uploader'\" class=\" mb-2\"\r\n      [class.insideTableStyle]=\"insideTable\">\r\n      <div\r\n        [ngClass]=\"insideTable ? 'file-uploader-table-dev' : ''\" class=\"file-uploader-input\"\r\n        (click)=\"fileAttached.click()\">\r\n        @if (!uploading) {\r\n          <div class=\"icon mb-1\">\r\n            <svg\r\n              [ngClass]=\"insideTable ? 'file-uploader-table-svg' : ''\" width=\"41\" height=\"38\" viewBox=\"0 0 41 38\"\r\n              fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n              <path\r\n                d=\"M0 22.1947V20.6736C0.0971303 20.1019 0.070094 19.5141 0.276371 18.9533C1.28372 16.2086 3.21231 14.5023 6.0421 13.8094C6.70499 13.6472 6.68497 13.6632 6.69899 12.9843C6.73203 11.3321 6.99839 9.71992 7.62423 8.17986C8.86289 5.13678 10.9467 2.83969 13.8816 1.39175C17.168 -0.230424 20.5956 -0.450719 24.0553 0.81598C27.4929 2.07467 29.9622 4.41581 31.4802 7.74828C31.7786 8.40316 32.027 9.08307 32.1712 9.79202C32.2402 10.1315 32.4035 10.2566 32.7529 10.3107C36.7012 10.9165 39.3358 13.1255 40.6946 16.8735C40.9069 17.4603 40.9199 18.0731 40.9599 18.6829C40.9649 18.7601 40.9389 18.8442 41 18.9113V20.5124C40.9109 20.995 40.969 21.4937 40.8608 21.9734C40.5244 23.4614 39.8454 24.7821 38.8501 25.9297C37.4522 27.5418 35.7059 28.5882 33.6161 29.0519C32.791 29.2351 31.9499 29.2521 31.1117 29.2922C30.6571 29.3142 30.584 29.193 30.592 28.7484C30.6451 25.8446 29.802 23.2571 27.8624 21.0591C25.9979 18.9463 23.6597 17.7167 20.867 17.4012C18.8553 17.1739 16.9057 17.4593 15.0612 18.3395C11.8319 19.8816 9.81416 22.4069 8.96102 25.8696C8.74273 26.7538 8.68265 27.658 8.70568 28.5702C8.7217 29.2111 8.60254 29.3122 7.95968 29.2972C5.95098 29.2511 4.10551 28.7234 2.58146 27.3596C1.07644 26.0168 0.0680913 24.3996 0.0400537 22.3028C0.0400537 22.2607 0.0250336 22.2257 0 22.1937V22.1947Z\"\r\n                fill=\"#DEE0E2\"/>\r\n              <path\r\n                d=\"M29.0303 28.2632C29.0604 33.4031 24.8657 37.6187 19.6838 37.6548C14.5169 37.6908 10.2852 33.4952 10.2521 28.3042C10.2201 23.1403 14.4297 18.9126 19.6227 18.8946C24.8037 18.8766 28.9993 23.0542 29.0303 28.2632Z\"\r\n                fill=\"#8E9AA0\"/>\r\n              <path\r\n                d=\"M20.5573 25.2644C20.4622 25.4477 20.5012 25.5939 20.5012 25.734C20.4982 28.2154 20.5002 30.6957 20.4982 33.177C20.4982 33.8099 20.2339 34.1704 19.7462 34.2234C19.2645 34.2765 18.88 33.9831 18.8169 33.5025C18.7959 33.3443 18.7969 33.183 18.7969 33.0238C18.7959 30.5826 18.7969 28.1423 18.7969 25.701C18.7969 25.5728 18.7969 25.4447 18.7969 25.2003C18.1971 25.8031 17.6774 26.3288 17.1527 26.8505C17.0115 26.9907 16.8683 27.1349 16.7061 27.2471C16.3566 27.4864 15.9341 27.4413 15.6457 27.154C15.3643 26.8746 15.3203 26.442 15.5486 26.0925C15.6207 25.9824 15.7128 25.8832 15.8069 25.7891C16.8613 24.7307 17.9167 23.6733 18.9732 22.6179C19.4017 22.1893 19.8784 22.1763 20.3039 22.5988C21.3914 23.6803 22.4739 24.7667 23.5533 25.8572C23.9809 26.2898 24.0129 26.8065 23.6534 27.167C23.299 27.5214 22.7753 27.4844 22.3437 27.0568C21.7499 26.47 21.1661 25.8732 20.5603 25.2644H20.5573Z\"\r\n                fill=\"#F9F9F9\"/>\r\n            </svg>\r\n          </div>\r\n        }\r\n        @if (uploading) {\r\n          <ds-icon class=\"sfi sfi-spinner d-inline-block spin fc-coral fs-30-imp\"></ds-icon>\r\n        }\r\n\r\n        <div class=\"f-14 fc-black fw-normal\">\r\n          <span class=\"fc-coral fw-medium\">{{ i18n.translate('browse') }}</span>\r\n        </div>\r\n        <div class=\"fs-10 fc-dark-gray\">\r\n          {{ allowedExtensions ? allowedExtensions : '' }}\r\n        </div>\r\n\r\n        <input type=\"file\" #inputFile [accept]=\"accept\" class=\"d-none\" #fileAttached (change)=\"onValueChange($event)\">\r\n      </div>\r\n\r\n    </section>\r\n\r\n    @if (hints) {\r\n      <div class=\"d-flex align-items-center gap-3 mb-3\">\r\n        @for (hint of hints; track hint) {\r\n          <ng-container>\r\n            <div class=\"d-flex align-items-center gap-1 fs-12\">\r\n              <ds-icon\r\n                icon=\"{{hint.valid ? 'check-circle-f' : 'check-circle-o'}}\"\r\n                class=\"fs-24 {{hint.valid ? 'fc-green' : 'fc-dark-gray'}}\"></ds-icon>\r\n              <span class=\"{{hint.valid ? 'fc-black' : 'fc-dark-gray'}}\">{{ hint.label }}</span>\r\n            </div>\r\n          </ng-container>\r\n        }\r\n      </div>\r\n    }\r\n\r\n    @if (hint) {\r\n      <mat-hint class=\"d-flex align-items-center gap-1\">\r\n        <ds-icon icon=\"info\" class=\"fs-17 fc-dark-gray\"></ds-icon>\r\n        <span class=\"fs-12 fc-black line-height-1\">{{ hint }}</span>\r\n      </mat-hint>\r\n    }\r\n\r\n\r\n    @if (multiple) {\r\n      <section class=\"files-list\">\r\n        @for (file of displayedFiles; track file; let i = $index) {\r\n          <div class=\"file-item-container\">\r\n            <ds-attachments\r\n              [file]=\"file\"\r\n              (downloadEvent)=\"attch('download',i,file)\"\r\n              (deleteEvent)=\"attch('delete',i,file)\"\r\n              [showActions]=\"showActions\">\r\n            </ds-attachments>\r\n            <a href=\"\" class=\"hidden-placeholder\"></a>\r\n            <!-- <mat-error class=\"fs-12\">Test error </mat-error> -->\r\n          </div>\r\n        }\r\n\r\n      </section>\r\n    }\r\n\r\n    @if (!multiple && (control.value?.fileContents || control.value?.attachmentId)) {\r\n      <section class=\"files-list\">\r\n\r\n        <!-- {{field | json }} -->\r\n        <div class=\"file-item-container file-item-container-actions\">\r\n          <ds-attachments\r\n            [file]=\"control.value\"\r\n            (downloadEvent)=\"attch('download',null,control.value)\"\r\n            (deleteEvent)=\"attch('delete',null,control.value)\"\r\n            [showActions]=\"showActions\">\r\n          </ds-attachments>\r\n          <a href=\"\" class=\"hidden-placeholder\"></a>\r\n          <ng-container *ngTemplateOutlet=\"attachmentCustomActions\"></ng-container>\r\n          <!-- <mat-error class=\"fs-12\">Test error </mat-error> -->\r\n        </div>\r\n\r\n\r\n      </section>\r\n    }\r\n    <div class=\"attachments-error\">\r\n\r\n      <!-- (!validExtension )  && !multiple -->\r\n      @if ((!validExtension)) {\r\n        <section class=\"files-list mt-2\">\r\n          <div class=\"file-item-container \">\r\n            <ds-attachments\r\n              [file]=\"wrongFile\" error [showActions]=\"false\">\r\n            </ds-attachments>\r\n          </div>\r\n        </section>\r\n      }\r\n\r\n      @if (!allowedFileSize) {\r\n        <mat-error class=\"fs-12 my-2\">\r\n          {{ maxSize === \"0.3\" ? i18n.translate('support3') : i18n.translate('support2') + maxSize + i18n.translate('mb') }}\r\n        </mat-error>\r\n      }\r\n      @if ((!fileNotDuplicated)) {\r\n        <mat-error class=\"fs-12 my-2\">{{ i18n.translate('duplicated-error') }}</mat-error>\r\n      }\r\n      @if (lengthError) {\r\n        <mat-error class=\"fs-12\">{{ i18n.translate('lengthError') }} :{{ maxLength }}</mat-error>\r\n      }\r\n      @if (showErrorMessage) {\r\n        <!-- <mat-error class=\"fs-12\">{{errorMessage}} </mat-error> -->\r\n      }\r\n\r\n    </div>\r\n  </ng-container>\r\n}\r\n\r\n\r\n@if (isReadOnly) {\r\n  <ng-container>\r\n    @if (multiple && displayedFiles) {\r\n      <ng-container>\r\n        <div class=\"info-item\">\r\n          @if (label) {\r\n            <span class=\"name\">{{ label }}</span>\r\n          }\r\n          @if (displayedFiles?.length) {\r\n            <span class=\"disc\">\r\n              @for (file of displayedFiles; track file; let i = $index) {\r\n                <div class=\"file-item-container\">\r\n                  <ds-attachments\r\n                    class=\"my-2\" [file]=\"file\" readOnly (attachmentEvent)=\"downloadFile($event,file)\"\r\n                    [showActions]=\"showActions\">\r\n                    <a href=\"\" class=\"hidden-placeholder\"></a>\r\n                  </ds-attachments>\r\n                  <a href=\"\" class=\"hidden-placeholder\"></a>\r\n                </div>\r\n              }\r\n\r\n              <a href=\"\" class=\"hidden-placeholder\"></a>\r\n            </span>\r\n          }\r\n          @if (!displayedFiles?.length) {\r\n            <span class=\"disc\">\r\n          {{ i18n.translate('NoAttachments') }}\r\n        </span>\r\n          }\r\n\r\n        </div>\r\n      </ng-container>\r\n    }\r\n\r\n    @if (!multiple && (control.value?.attachmentId || control.value?.fileContents)) {\r\n      <ng-container>\r\n        <div class=\"info-item\">\r\n          @if (label) {\r\n            <span class=\"name\">{{ label }}</span>\r\n          }\r\n          <div class=\"disc file-item-container file-item-container-actions\" [ngClass]=\"{'insideTableWidth':insideTable}\">\r\n            @if (control.value?.attachmentId || control.value?.fileContents) {\r\n              <ds-attachments\r\n                [matTooltip]=\"control.value?.fileName\" [file]=\"control.value\" [showActions]=\"showActions\"\r\n                (attachmentEvent)=\"attch($event,null,control.value)\" readOnly>\r\n              </ds-attachments>\r\n            }\r\n\r\n            <a href=\"\" class=\"hidden-placeholder\"></a>\r\n            <ng-container *ngTemplateOutlet=\"attachmentCustomActions\"></ng-container>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    }\r\n  </ng-container>\r\n}\r\n\r\n<ng-template #attachmentCustomActions>\r\n  @if (!isDisabled) {\r\n    <div class=\"uploaded-file-actions\">\r\n      @if (showSignButton) {\r\n        <ds-button shape=\"outline\" (click)=\"addSignature($event)\" color=\"red\">\r\n          {{ signType }}\r\n        </ds-button>\r\n      }\r\n      @if (showDownloadButton) {\r\n        <ds-button shape=\"outline\" (click)=\"downloadFileData($event)\" color=\"red\">\r\n          {{ downloadType }}\r\n        </ds-button>\r\n      }\r\n\r\n      @if (showDownloadButton) {\r\n        <a href=\"\" class=\"hidden-placeholder\"></a>\r\n      }\r\n      @if (showPrintButton) {\r\n        <ds-button shape=\"outline\" (click)=\"printFileData($event)\" color=\"red\">\r\n          {{ printType }}\r\n        </ds-button>\r\n      }\r\n    </div>\r\n  }\r\n</ng-template>\r\n", styles: [".file-uploader{--uploader-height: 150px;--uploader-width: 100%;--uploader-bg: var(--off-white);--uploader-border: 1px dashed var(--dark-gray);--uploader-radius: var(--box-radius);--uploader-padding: 1rem;height:var(--uploader-height);background-color:var(--uploader-bg);border:var(--uploader-border);border-radius:var(--uploader-radius);padding:var(--uploader-padding);text-align:center;cursor:pointer}.insideTableWidth{width:250px!important}.file-uploader-table{--uploader-height: 45PX;--uploader-width: 100%;--uploader-bg: var(--off-white);--uploader-border: 1px dashed var(--dark-gray);--uploader-radius: var(--box-radius);--uploader-padding: 0 1rem;height:var(--uploader-height);background-color:var(--uploader-bg);border:var(--uploader-border);border-radius:var(--uploader-radius);padding:var(--uploader-padding);text-align:center;cursor:pointer;DISPLAY:FLEX;ALIGN-ITEMS:CENTER;JUSTIFY-CONTENT:CENTER}.file-uploader-table-dev{DISPLAY:FLEX;ALIGN-ITEMS:CENTER;GAP:1REM}.file-uploader-table-svg{width:70%}.insideTableStyle{width:272px}.files-list{--file-item-width: 300px;display:grid;grid-template-columns:repeat(auto-fill,var(--file-item-width));grid-gap:.5rem}@media (max-width: 768px){.files-list{grid-template-columns:repeat(auto-fill,minmax(var(--file-item-width),1fr))}}.files-list .file-item-container .uploaded-file-actions{margin-inline-start:20px}.files-list .file-item-container .uploaded-file-actions .button__wrapper{font-size:15px}.files-list .file-item-container .file-item{--file-bg: var(--off-white);--file-radius: var(--box-radius);--icon-color: var(--purple);--icon-size: 2rem;--file-border: transparent;display:flex;align-items:center;background-color:var(--file-bg);border:1px solid var(--file-border);border-radius:var(--file-radius);padding:0 1rem;height:70px;gap:.75rem}.files-list .file-item-container .file-item.error{--file-bg: rgba(var(--rgb-red), 10%);--file-border: var(--red);--icon-color: var(--red)}.files-list .file-item-container .file-item .icon{color:var(--icon-color);font-size:var(--icon-size)}.files-list .file-item-container .file-item .file-action{display:flex;align-items:center;gap:.5rem}ds-attachments::part(base){--file-width: 250px}.file-item-container-actions{display:flex;align-items:center}.file-item-container-actions .uploaded-file-actions{display:flex;align-items:center;gap:10px;margin-inline-start:25px}.file-item-container-actions .uploaded-file-actions .button__wrapper{font-size:15px}::ng-deep .file-item .name-size{display:flex;flex-direction:column;justify-content:center;flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:120px}\n"] }]
+                    ], template: "@if (!isReadOnly) {\r\n  <ng-container>\r\n    @if (label) {\r\n      <div class=\"d-flex justify-content-between mb-1\">\r\n        <span class=\"form-label mb-0\">{{ label }}</span>\r\n        @if (!required) {\r\n          <span class=\"fs-11 fc-dark-gray\">\r\n            {{ i18n.translate('Optional') }}\r\n          </span>\r\n        }\r\n      </div>\r\n    }\r\n\r\n\r\n\r\n    <section\r\n      [ngClass]=\"insideTable ? 'file-uploader-table' : 'file-uploader'\" class=\" mb-2\"\r\n      [class.insideTableStyle]=\"insideTable\">\r\n      <div\r\n        [ngClass]=\"insideTable ? 'file-uploader-table-dev' : ''\" class=\"file-uploader-input\"\r\n        (click)=\"fileAttached.click()\">\r\n        @if (!uploading) {\r\n          <div class=\"icon mb-1\">\r\n            <svg\r\n              [ngClass]=\"insideTable ? 'file-uploader-table-svg' : ''\" width=\"41\" height=\"38\" viewBox=\"0 0 41 38\"\r\n              fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n              <path\r\n                d=\"M0 22.1947V20.6736C0.0971303 20.1019 0.070094 19.5141 0.276371 18.9533C1.28372 16.2086 3.21231 14.5023 6.0421 13.8094C6.70499 13.6472 6.68497 13.6632 6.69899 12.9843C6.73203 11.3321 6.99839 9.71992 7.62423 8.17986C8.86289 5.13678 10.9467 2.83969 13.8816 1.39175C17.168 -0.230424 20.5956 -0.450719 24.0553 0.81598C27.4929 2.07467 29.9622 4.41581 31.4802 7.74828C31.7786 8.40316 32.027 9.08307 32.1712 9.79202C32.2402 10.1315 32.4035 10.2566 32.7529 10.3107C36.7012 10.9165 39.3358 13.1255 40.6946 16.8735C40.9069 17.4603 40.9199 18.0731 40.9599 18.6829C40.9649 18.7601 40.9389 18.8442 41 18.9113V20.5124C40.9109 20.995 40.969 21.4937 40.8608 21.9734C40.5244 23.4614 39.8454 24.7821 38.8501 25.9297C37.4522 27.5418 35.7059 28.5882 33.6161 29.0519C32.791 29.2351 31.9499 29.2521 31.1117 29.2922C30.6571 29.3142 30.584 29.193 30.592 28.7484C30.6451 25.8446 29.802 23.2571 27.8624 21.0591C25.9979 18.9463 23.6597 17.7167 20.867 17.4012C18.8553 17.1739 16.9057 17.4593 15.0612 18.3395C11.8319 19.8816 9.81416 22.4069 8.96102 25.8696C8.74273 26.7538 8.68265 27.658 8.70568 28.5702C8.7217 29.2111 8.60254 29.3122 7.95968 29.2972C5.95098 29.2511 4.10551 28.7234 2.58146 27.3596C1.07644 26.0168 0.0680913 24.3996 0.0400537 22.3028C0.0400537 22.2607 0.0250336 22.2257 0 22.1937V22.1947Z\"\r\n                fill=\"#DEE0E2\"/>\r\n              <path\r\n                d=\"M29.0303 28.2632C29.0604 33.4031 24.8657 37.6187 19.6838 37.6548C14.5169 37.6908 10.2852 33.4952 10.2521 28.3042C10.2201 23.1403 14.4297 18.9126 19.6227 18.8946C24.8037 18.8766 28.9993 23.0542 29.0303 28.2632Z\"\r\n                fill=\"#8E9AA0\"/>\r\n              <path\r\n                d=\"M20.5573 25.2644C20.4622 25.4477 20.5012 25.5939 20.5012 25.734C20.4982 28.2154 20.5002 30.6957 20.4982 33.177C20.4982 33.8099 20.2339 34.1704 19.7462 34.2234C19.2645 34.2765 18.88 33.9831 18.8169 33.5025C18.7959 33.3443 18.7969 33.183 18.7969 33.0238C18.7959 30.5826 18.7969 28.1423 18.7969 25.701C18.7969 25.5728 18.7969 25.4447 18.7969 25.2003C18.1971 25.8031 17.6774 26.3288 17.1527 26.8505C17.0115 26.9907 16.8683 27.1349 16.7061 27.2471C16.3566 27.4864 15.9341 27.4413 15.6457 27.154C15.3643 26.8746 15.3203 26.442 15.5486 26.0925C15.6207 25.9824 15.7128 25.8832 15.8069 25.7891C16.8613 24.7307 17.9167 23.6733 18.9732 22.6179C19.4017 22.1893 19.8784 22.1763 20.3039 22.5988C21.3914 23.6803 22.4739 24.7667 23.5533 25.8572C23.9809 26.2898 24.0129 26.8065 23.6534 27.167C23.299 27.5214 22.7753 27.4844 22.3437 27.0568C21.7499 26.47 21.1661 25.8732 20.5603 25.2644H20.5573Z\"\r\n                fill=\"#F9F9F9\"/>\r\n            </svg>\r\n          </div>\r\n        }\r\n        @if (uploading) {\r\n          <ds-icon class=\"sfi sfi-spinner d-inline-block spin fc-coral fs-30-imp\"></ds-icon>\r\n        }\r\n\r\n        <div class=\"f-14 fc-black fw-normal\">\r\n          <span class=\"fc-coral fw-medium\">{{ i18n.translate('browse') }}</span>\r\n        </div>\r\n        <div class=\"fs-10 fc-dark-gray\">\r\n          {{ allowedExtensions ? allowedExtensions : '' }}\r\n        </div>\r\n\r\n        <input type=\"file\" #inputFile [accept]=\"accept\" class=\"d-none\" #fileAttached (change)=\"onValueChange($event)\">\r\n      </div>\r\n\r\n    </section>\r\n\r\n    @if (hints) {\r\n      <div class=\"d-flex align-items-center gap-3 mb-3\">\r\n        @for (hint of hints; track hint) {\r\n          <ng-container>\r\n            <div class=\"d-flex align-items-center gap-1 fs-12\">\r\n              <ds-icon\r\n                icon=\"{{hint.valid ? 'check-circle-f' : 'check-circle-o'}}\"\r\n                class=\"fs-24 {{hint.valid ? 'fc-green' : 'fc-dark-gray'}}\"></ds-icon>\r\n              <span class=\"{{hint.valid ? 'fc-black' : 'fc-dark-gray'}}\">{{ hint.label }}</span>\r\n            </div>\r\n          </ng-container>\r\n        }\r\n      </div>\r\n    }\r\n\r\n    @if (hint) {\r\n      <mat-hint class=\"d-flex align-items-center gap-1\">\r\n        <ds-icon icon=\"info\" class=\"fs-17 fc-dark-gray\"></ds-icon>\r\n        <span class=\"fs-12 fc-black line-height-1\">{{ hint }}</span>\r\n      </mat-hint>\r\n    }\r\n\r\n\r\n    @if (multiple) {\r\n      <section class=\"files-list\">\r\n        @for (file of displayedFiles; track file; let i = $index) {\r\n          <div class=\"file-item-container\">\r\n            <ds-attachments\r\n              [matTooltip]=\"file?.fileName\"\r\n              [file]=\"{name :file.fileName}\"\r\n              (downloadEvent)=\"attachmentAction('download',i,file)\"\r\n              (deleteEvent)=\"attachmentAction('delete',i,file)\"\r\n              [showActions]=\"showActions\">\r\n            </ds-attachments>\r\n            <!-- <mat-error class=\"fs-12\">Test error </mat-error> -->\r\n          </div>\r\n        }\r\n\r\n      </section>\r\n    }\r\n\r\n    @if (!multiple && (control.value?.fileContents || control.value?.attachmentId)) {\r\n      <section class=\"files-list\">\r\n        <div class=\"file-item-container file-item-container-actions\">\r\n          <ds-attachments\r\n            [matTooltip]=\"control.value?.fileName\"\r\n            [file]=\"{name :control.value.fileName}\"\r\n            (downloadEvent)=\"attachmentAction('download',null,control.value)\"\r\n            (deleteEvent)=\"attachmentAction('delete',null,control.value)\"\r\n            [showActions]=\"showActions\">\r\n          </ds-attachments>\r\n        </div>\r\n\r\n\r\n      </section>\r\n    }\r\n    <div class=\"attachments-error\">\r\n\r\n      <!-- (!validExtension )  && !multiple -->\r\n      @if ((!validExtension)) {\r\n        <section class=\"files-list mt-2\">\r\n          <div class=\"file-item-container \">\r\n            <ds-attachments\r\n              [file]=\"wrongFile\" error [showActions]=\"false\">\r\n            </ds-attachments>\r\n          </div>\r\n        </section>\r\n      }\r\n\r\n      @if (!allowedFileSize) {\r\n        <mat-error class=\"fs-12 my-2\">\r\n          {{ maxSize === \"0.3\" ? i18n.translate('support3') : i18n.translate('support2') + maxSize + i18n.translate('mb') }}\r\n        </mat-error>\r\n      }\r\n      @if ((!fileNotDuplicated)) {\r\n        <mat-error class=\"fs-12 my-2\">{{ i18n.translate('duplicated-error') }}</mat-error>\r\n      }\r\n      @if (lengthError) {\r\n        <mat-error class=\"fs-12\">{{ i18n.translate('lengthError') }} :{{ maxLength }}</mat-error>\r\n      }\r\n      @if (showErrorMessage) {\r\n        <!-- <mat-error class=\"fs-12\">{{errorMessage}} </mat-error> -->\r\n      }\r\n\r\n    </div>\r\n  </ng-container>\r\n}\r\n\r\n\r\n@if (isReadOnly) {\r\n  <ng-container>\r\n    @if (multiple && displayedFiles) {\r\n      <ng-container>\r\n        <div class=\"info-item\">\r\n          @if (label) {\r\n            <span class=\"name\">{{ label }}</span>\r\n          }\r\n          @if (displayedFiles?.length) {\r\n            <span>\r\n              @for (file of displayedFiles; track file; let i = $index) {\r\n                <div class=\"file-item-container\">\r\n                  <ds-attachments\r\n                    [matTooltip]=\"file?.fileName\"\r\n                    class=\"my-2\" [file]=\"{name :file.fileName}\" readOnly (downloadEvent)=\"downloadFile($event,file)\"\r\n                    [showActions]=\"showActions\">\r\n                  </ds-attachments>\r\n                </div>\r\n              }\r\n            </span>\r\n          }\r\n          @if (!displayedFiles?.length) {\r\n            <span class=\"disc\">\r\n          {{ i18n.translate('NoAttachments') }}\r\n        </span>\r\n          }\r\n\r\n        </div>\r\n      </ng-container>\r\n    }\r\n\r\n    @if (!multiple && (control.value?.['attachmentId'] || control.value?.['fileContents'])) {\r\n      <ng-container>\r\n        <div class=\"info-item\">\r\n          @if (label) {\r\n            <span class=\"name\">{{ label }}</span>\r\n          }\r\n          <div class=\"disc file-item-container file-item-container-actions\" [ngClass]=\"{'insideTableWidth':insideTable}\">\r\n            @if (control.value?.['attachmentId'] || control.value?.['fileContents']) {\r\n              <ds-attachments\r\n                [matTooltip]=\"control.value?.fileName\" [file]=\"{name :control.value.fileName}\" [showActions]=\"showActions\"\r\n                (downloadEvent)=\"attachmentAction('download',null,control.value)\"\r\n                (deleteEvent)=\"attachmentAction('delete',null,control.value)\"\r\n                readOnly>\r\n              </ds-attachments>\r\n            }\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    }\r\n  </ng-container>\r\n}\r\n", styles: [".file-uploader{--uploader-height: 150px;--uploader-width: 100%;--uploader-bg: var(--off-white);--uploader-border: 1px dashed var(--dark-gray);--uploader-radius: var(--box-radius);--uploader-padding: 1rem;height:var(--uploader-height);background-color:var(--uploader-bg);border:var(--uploader-border);border-radius:var(--uploader-radius);padding:var(--uploader-padding);text-align:center;cursor:pointer}.insideTableWidth{width:250px!important}.file-uploader-table{--uploader-height: 45PX;--uploader-width: 100%;--uploader-bg: var(--off-white);--uploader-border: 1px dashed var(--dark-gray);--uploader-radius: var(--box-radius);--uploader-padding: 0 1rem;height:var(--uploader-height);background-color:var(--uploader-bg);border:var(--uploader-border);border-radius:var(--uploader-radius);padding:var(--uploader-padding);text-align:center;cursor:pointer;DISPLAY:FLEX;ALIGN-ITEMS:CENTER;JUSTIFY-CONTENT:CENTER}.file-uploader-table-dev{DISPLAY:FLEX;ALIGN-ITEMS:CENTER;GAP:1REM}.file-uploader-table-svg{width:70%}.insideTableStyle{width:272px}.files-list{--file-item-width: 300px;display:grid;grid-template-columns:repeat(auto-fill,var(--file-item-width));grid-gap:.5rem}@media (max-width: 768px){.files-list{grid-template-columns:repeat(auto-fill,minmax(var(--file-item-width),1fr))}}.files-list .file-item-container .uploaded-file-actions{margin-inline-start:20px}.files-list .file-item-container .uploaded-file-actions .button__wrapper{font-size:15px}.files-list .file-item-container .file-item{--file-bg: var(--off-white);--file-radius: var(--box-radius);--icon-color: var(--purple);--icon-size: 2rem;--file-border: transparent;display:flex;align-items:center;background-color:var(--file-bg);border:1px solid var(--file-border);border-radius:var(--file-radius);padding:0 1rem;height:70px;gap:.75rem}.files-list .file-item-container .file-item.error{--file-bg: rgba(var(--rgb-red), 10%);--file-border: var(--red);--icon-color: var(--red)}.files-list .file-item-container .file-item .icon{color:var(--icon-color);font-size:var(--icon-size)}.files-list .file-item-container .file-item .file-action{display:flex;align-items:center;gap:.5rem}ds-attachments::part(base){--file-width: 250px}.file-item-container-actions{display:flex;align-items:center}.file-item-container-actions .uploaded-file-actions{display:flex;align-items:center;gap:10px;margin-inline-start:25px}.file-item-container-actions .uploaded-file-actions .button__wrapper{font-size:15px}::ng-deep .file-item .name-size{display:flex;flex-direction:column;justify-content:center;flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:120px}\n"] }]
         }], propDecorators: { useCrop: [{
                 type: Input
             }], formKey: [{
@@ -4278,8 +4129,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                 type: Input
             }], tooltip: [{
                 type: Input
-            }], attachments: [{
-                type: Input
             }], optional: [{
                 type: Input
             }], display: [{
@@ -4316,6 +4165,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                 type: Output
             }], printActionClicked: [{
                 type: Output
+            }], emitedValue: [{
+                type: Output
             }], downloadActionClicked: [{
                 type: Output
             }], maxSize: [{
@@ -4324,7 +4175,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                 type: ViewChild,
                 args: ['inputFile']
             }] } });
-class AttatchmentFile {
+class FileInfo {
     fileName;
     name;
     mimeType;
@@ -4339,27 +4190,153 @@ class AttatchmentFile {
     }
 }
 
-/* eslint-disable @angular-eslint/use-lifecycle-interface */
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable @angular-eslint/component-selector */
-class AttachmentSectionComponent extends BaseComponent {
+class AttachmentSectionDataComponent extends ControlValueAccessorDirective {
+    dialogRef;
+    dialogData;
+    popupData = {};
+    popupDataOrg = {};
+    uploading;
+    editMode;
+    hasColumnBreak;
+    section;
+    formGroup;
+    constructor(injector, i18n, toasterService, coreService, sanitizer, fb, dialogRef, dialogData) {
+        super(injector, i18n, toasterService, coreService, sanitizer, fb);
+        this.dialogRef = dialogRef;
+        this.dialogData = dialogData;
+    }
+    ngOnInit() {
+        // super.ngOnInit()
+        this.createForm();
+        if (this.dialogData?.attachmentListData) {
+            this.popupData = this.dialogData.attachmentListData;
+            this.popupDataOrg = Object.assign({}, this.popupData);
+            this.formGroup.controls['file'].setValue(this.dialogData.attachmentListData);
+            this.formGroup.controls['description'].setValue(this.dialogData.attachmentListData.fileDescription);
+            this.formGroup.controls['comments'].setValue(this.dialogData.attachmentListData.fileComments);
+            this.editMode = true;
+        }
+    }
+    createForm() {
+        this.formGroup = this.fb.group({
+            file: new FormControl(null, Validators.required),
+            description: new FormControl(null, this.dialogData.descriptionRequired ? Validators.required : null),
+            comments: new FormControl(null, this.dialogData.commentsRequired ? Validators.required : null),
+        });
+    }
+    close() {
+        this.dialogRef.close(this.popupDataOrg);
+    }
+    handleEmitValue(data, fieldName) {
+        this.popupData[fieldName] = data;
+    }
+    handleAttachmentEmitValue(data) {
+        this.popupData = {
+            fileContents: data?.fileContents,
+            fileName: data?.fileName,
+            mimeType: data?.mimeType,
+            fileDescription: this.popupData?.fileDescription,
+            attachmentcomment: this.popupData?.attachmentcomment,
+            fileComments: this.popupData?.attachmentcomment,
+        };
+    }
+    addAttachments() {
+        const data = {
+            fileDescription: this.formGroup.controls['description'].value,
+            attachmentcomment: this.formGroup.controls['comments'].value,
+            fileComments: this.formGroup.controls['comments'].value,
+            fileName: this.formGroup.controls['file'].value.fileName,
+            mimeType: this.formGroup.controls['file'].value.mimeType,
+            fileContents: this.formGroup.controls['file'].value.fileContents,
+        };
+        this.uploading = true;
+        this.coreService.getAttachments(data).subscribe((Response) => {
+            this.uploading = false;
+            if (Response) {
+                const newObj = {
+                    fileDescription: this.formGroup.controls['description'].value,
+                    attachmentcomment: this.formGroup.controls['comments'].value,
+                    fileComments: this.formGroup.controls['comments'].value,
+                    fileName: this.formGroup.controls['file'].value.fileName,
+                    attachmentId: Response.attachment.attachmentId,
+                    mimeType: this.formGroup.controls['file'].value.mimeType,
+                };
+                this.dialogRef.close(newObj);
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AttachmentSectionDataComponent, deps: [{ token: i0.Injector }, { token: CoreI18nService }, { token: i2$1.ToastrService }, { token: CoreService }, { token: i3.DomSanitizer }, { token: i2.FormBuilder }, { token: i5.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: AttachmentSectionDataComponent, isStandalone: true, selector: "app-add-attachment-section", inputs: { hasColumnBreak: "hasColumnBreak", section: "section" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                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\">{{i18n.translate('addAttachments')}}</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      <!-- add [callApi]=\"true\"  input mobile issue not able to download it by base 64 -->\r\n<form [formGroup]=\"formGroup\">\r\n  <app-file-uploader class=\"section-item full\" [field]=\"popupData\" name=\"file\" [attachments]=\"dialogData?.attachments\"\r\n  [labelTextReadMode]=\"i18n.translate('Attachment')\" [labelTextWriteMode]=\"i18n.translate('Attachment')\"\r\n  [hasColumnBreak]=\"false\" [label]=\"i18n.translate('Attachment')\" [required]=\"true\" [multiple]=\"false\" [allowedExtensions]=\"dialogData?.data\"\r\n  [isReadOnly]=\"section?.header?.readOnly\" [showActions]=\"false\"\r\n  formControlName=\"file\"\r\n  >\r\n</app-file-uploader>\r\n\r\n<app-textarea class=\"section-item d-block mt-4 mb-4\" [section]=\"section\" [field]=\"popupData?.fileDescription\" name=\"fileDescription\"\r\n  [labelTextReadMode]=\"i18n.translate('description')\" [labelTextWriteMode]=\"i18n.translate('description')\"\r\n  [hasColumnBreak]=\"false\" (emitedValue)=\"handleEmitValue($event,'fileDescription')\"\r\n  [label]=\"i18n.translate('description')\" [required]=\"dialogData?.isRequired\" [minLength]='1' [maxLength]='500'\r\n  [isReadOnly]=\"section?.header?.readOnly\" [errorMessage]=\"i18n.translate('lenghtMin1Max500')\"\r\n  formControlName=\"description\" >\r\n  \r\n</app-textarea>\r\n\r\n<app-textarea class=\"section-item\" [section]=\"section\" [field]=\"popupData?.attachmentcomment\" name=\"attachmentcomment\"\r\n  [labelTextReadMode]=\"i18n.translate('comments')\" [labelTextWriteMode]=\"i18n.translate('comments')\"\r\n  [hasColumnBreak]=\"false\" (emitedValue)=\"handleEmitValue($event,'attachmentcomment')\" [label]=\"i18n.translate('comments')\"\r\n  [required]=\"false\" [minLength]='1' [maxLength]='500' [isReadOnly]=\"section?.header?.readOnly\"\r\n  [errorMessage]=\"i18n.translate('lenghtMin1Max500')\"\r\n  formControlName=\"comments\">\r\n</app-textarea>\r\n</form>\r\n   \r\n\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)\" color=\"red\">{{i18n.translate('cancel')}}\r\n    </ds-button>\r\n    <ds-button (click)=\"addAttachments()\" [loading]=\"uploading\"\r\n      [disabled]=\"(!(formGroup?.value?.file?.fileContents || formGroup?.value?.file?.attachmentId ) ||( dialogData?.isRequired && !formGroup?.value?.description )|| uploading || !formGroup.valid)\">\r\n      @if(!editMode){\r\n      <span>{{i18n.translate('add')}}</span>\r\n      }\r\n      @if(editMode){\r\n      <span>{{i18n.translate('edit')}}</span>\r\n      }\r\n\r\n    </ds-button>\r\n  </mat-dialog-actions>\r\n\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", "tooltip", "optional", "display", "attachType", "error", "displayedFiles", "getDataFromTemplate", "allowFileContentsWithMultiAttachments", "accept", "signType", "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: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i5.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i5.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AttachmentSectionDataComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-add-attachment-section', standalone: true, schemas: [CUSTOM_ELEMENTS_SCHEMA], imports: [
+                        TextareaComponent,
+                        MatDialogContent,
+                        DocsUploaderComponent,
+                        MatDialogActions,
+                        NgIf,
+                        MatDialogModule,
+                        ReactiveFormsModule,
+                        MatDialogClose,
+                    ], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => AttachmentSectionDataComponent),
+                            multi: true,
+                        },
+                    ], template: "<div class=\"popup-container\">\r\n  <div class=\"d-flex align-items-center justify-content-end\" mat-dialog-title>\r\n    <h3 class=\"mb-0 font-16 fw-medium\">{{i18n.translate('addAttachments')}}</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      <!-- add [callApi]=\"true\"  input mobile issue not able to download it by base 64 -->\r\n<form [formGroup]=\"formGroup\">\r\n  <app-file-uploader class=\"section-item full\" [field]=\"popupData\" name=\"file\" [attachments]=\"dialogData?.attachments\"\r\n  [labelTextReadMode]=\"i18n.translate('Attachment')\" [labelTextWriteMode]=\"i18n.translate('Attachment')\"\r\n  [hasColumnBreak]=\"false\" [label]=\"i18n.translate('Attachment')\" [required]=\"true\" [multiple]=\"false\" [allowedExtensions]=\"dialogData?.data\"\r\n  [isReadOnly]=\"section?.header?.readOnly\" [showActions]=\"false\"\r\n  formControlName=\"file\"\r\n  >\r\n</app-file-uploader>\r\n\r\n<app-textarea class=\"section-item d-block mt-4 mb-4\" [section]=\"section\" [field]=\"popupData?.fileDescription\" name=\"fileDescription\"\r\n  [labelTextReadMode]=\"i18n.translate('description')\" [labelTextWriteMode]=\"i18n.translate('description')\"\r\n  [hasColumnBreak]=\"false\" (emitedValue)=\"handleEmitValue($event,'fileDescription')\"\r\n  [label]=\"i18n.translate('description')\" [required]=\"dialogData?.isRequired\" [minLength]='1' [maxLength]='500'\r\n  [isReadOnly]=\"section?.header?.readOnly\" [errorMessage]=\"i18n.translate('lenghtMin1Max500')\"\r\n  formControlName=\"description\" >\r\n  \r\n</app-textarea>\r\n\r\n<app-textarea class=\"section-item\" [section]=\"section\" [field]=\"popupData?.attachmentcomment\" name=\"attachmentcomment\"\r\n  [labelTextReadMode]=\"i18n.translate('comments')\" [labelTextWriteMode]=\"i18n.translate('comments')\"\r\n  [hasColumnBreak]=\"false\" (emitedValue)=\"handleEmitValue($event,'attachmentcomment')\" [label]=\"i18n.translate('comments')\"\r\n  [required]=\"false\" [minLength]='1' [maxLength]='500' [isReadOnly]=\"section?.header?.readOnly\"\r\n  [errorMessage]=\"i18n.translate('lenghtMin1Max500')\"\r\n  formControlName=\"comments\">\r\n</app-textarea>\r\n</form>\r\n   \r\n\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)\" color=\"red\">{{i18n.translate('cancel')}}\r\n    </ds-button>\r\n    <ds-button (click)=\"addAttachments()\" [loading]=\"uploading\"\r\n      [disabled]=\"(!(formGroup?.value?.file?.fileContents || formGroup?.value?.file?.attachmentId ) ||( dialogData?.isRequired && !formGroup?.value?.description )|| uploading || !formGroup.valid)\">\r\n      @if(!editMode){\r\n      <span>{{i18n.translate('add')}}</span>\r\n      }\r\n      @if(editMode){\r\n      <span>{{i18n.translate('edit')}}</span>\r\n      }\r\n\r\n    </ds-button>\r\n  </mat-dialog-actions>\r\n\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"] }]
+        }], ctorParameters: () => [{ type: i0.Injector }, { type: CoreI18nService }, { type: i2$1.ToastrService }, { type: CoreService }, { type: i3.DomSanitizer }, { type: i2.FormBuilder }, { type: i5.MatDialogRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }], propDecorators: { hasColumnBreak: [{
+                type: Input
+            }], section: [{
+                type: Input
+            }] } });
+
+class AttachmentSectionComponent extends ControlValueAccessorDirective {
     className = 'info-section';
-    attachments = [];
-    label = '';
     attachmentsMax = 1000;
     isSortable = false;
     downloadAll = false;
     popupData = {};
     isRequired = false;
-    placeholderElement;
+    descriptionRequired;
+    commentsRequired;
+    allowedExtensions = '';
+    emitedValue = new EventEmitter();
+    dialog = inject(MatDialog);
+    displayedColumns = ["index", "file", "description", "comment", "actions"];
+    dataSource;
+    paginator;
+    totalRecords = 0;
+    pageSize = 5;
+    pageNumber = 0;
     ngOnInit() {
-        // this.resetPropagator.subscribe(this, this.resetAttachmentData);
+        super.ngOnInit();
+        if (this.control.value) {
+            this.attachments = this.control.value;
+        }
         if (this.attachments) {
             this.attachments.forEach(element => {
                 element.name = element.fileName;
             });
         }
     }
+    ngAfterViewInit() {
+        this.addDataToTable();
+        this.paginator._intl.itemsPerPageLabel = this.i18n.translate('itemsPerPage');
+    }
+    onPaginateChange(event) {
+        this.pageNumber = event.pageIndex;
+    }
     drop(event) {
         moveItemInArray(this.attachments, event.previousIndex, event.currentIndex);
     }
@@ -4367,121 +4344,126 @@ class AttachmentSectionComponent extends BaseComponent {
         if (!this.isReadOnly) {
             this.attachments = [];
             this.emitedValue.emit(this.attachments);
-            // if (this.multiple) {
-            // } else {
-            //   const emptyObj = {
-            //     mimeType: "",
-            //     fileContents: "",
-            //     fileName: "",
-            //   }
-            //   this.emitedValue.emit(emptyObj)
-            //   this.emitedValue.emit(this.attachments)
-            // }
         }
     }
+    addDataToTable() {
+        this.dataSource = new MatTableDataSource(this.attachments);
+        this.totalRecords = this.dataSource.data.length;
+        this.dataSource.paginator = this.paginator;
+    }
     handleEmitValue(data, fieldName) {
         this.popupData[fieldName] = data;
     }
-    addAttahment() {
-        /*   this.coreStateMachineService.attachmentListData = null;
-           const dialogRef = this.dialog.open(AttachmentSectionDataComponent, {
-             panelClass: ['main-popup', 'add-attachment-dialog'],
-             data: {
-               data: this.allowedExtensions,
-               isRequired: this.isRequired,
-               multiple: this.multiple,
-               attachments: this.attachments
-             }
-           });
-           dialogRef.afterClosed().subscribe((resultData) => {
-             if (resultData != 'close') {
-               if (resultData?.attachmentId) {
-                 this.attachments.push(resultData);
-                 this.emitedValue.emit(this.attachments);
-               }
-             }
-           });*/
+    addAttachment() {
+        const dialogRef = this.dialog.open(AttachmentSectionDataComponent, {
+            panelClass: ['main-popup', 'add-attachment-dialog'],
+            data: {
+                attachmentListData: null,
+                data: this.allowedExtensions,
+                isRequired: this.isRequired,
+                multiple: this.multiple,
+                attachments: this.attachments,
+                descriptionRequired: this.descriptionRequired,
+                commentsRequired: this.commentsRequired
+            }
+        });
+        dialogRef.afterClosed().subscribe((resultData) => {
+            if (resultData != 'close') {
+                if (resultData?.attachmentId) {
+                    this.attachments.push(resultData);
+                    this.addDataToTable();
+                }
+            }
+            this.control.setValue(this.attachments);
+        });
     }
     deleteAttachments(index, item) {
-        // const dialogRef = this.dialog.open(DeleteDialogComponent, {
-        //   panelClass: ['main-popup', 'add-attachment-dialog']
-        // });
-        // dialogRef.afterClosed().subscribe((resultData) => {
-        //   if (resultData == 'yes') {
-        //     this.deleteAttachment(index, item);
-        //   }
-        // });
+        const dialogRef = this.dialog.open(DeleteDialogComponent, {
+            panelClass: ['main-popup', 'add-attachment-dialog']
+        });
+        dialogRef.afterClosed().subscribe((resultData) => {
+            if (resultData == 'yes') {
+                this.deleteAttachment(index, item);
+            }
+        });
     }
     deleteAttachment(index, item) {
         this.attachments = this.attachments.filter((row) => {
             return row.attachmentId != item.attachmentId;
         });
-        this.emitedValue.emit(this.attachments);
+        this.addDataToTable();
+        this.control.setValue(this.attachments);
     }
     editRow(rowData, index) {
-        /* this.coreStateMachineService.attachmentListData = Object.assign(rowData);
-         const dialogRef = this.dialog.open(AttachmentSectionDataComponent, {
-           panelClass: ['main-popup', 'add-attachment-dialog'],
-           data: {
-             data: this.allowedExtensions,
-             isRequired: this.isRequired,
-             multiple: this.multiple,
-             attachments: this.attachments
-           }
-         });
-         dialogRef.afterClosed().subscribe((resultData) => {
-           if (resultData != 'close') {
-             if (resultData?.attachmentId) {
-               this.attachments[index] = resultData;
-               this.emitedValue.emit(this.attachments);
-             }
-           }
-         });*/
+        const dialogRef = this.dialog.open(AttachmentSectionDataComponent, {
+            panelClass: ['main-popup', 'add-attachment-dialog'],
+            data: {
+                attachmentListData: Object.assign(rowData),
+                data: this.allowedExtensions,
+                isRequired: this.isRequired,
+                multiple: this.multiple,
+                attachments: this.attachments,
+            }
+        });
+        dialogRef.afterClosed().subscribe((resultData) => {
+            if (resultData != 'close') {
+                if (resultData?.attachmentId) {
+                    this.attachments[index] = resultData;
+                    this.emitedValue.emit(this.attachments);
+                    this.addDataToTable();
+                }
+            }
+        });
     }
     downloadAllAttachments(event) {
-        this.attachments.forEach((file) => {
-            this.downloadFile(event, file);
+        this.loading = true;
+        const downloads = this.attachments.map((file) => this.downloadFile(event, file));
+        Promise.all(downloads)
+            .then(() => {
+            this.loading = false;
+        })
+            .catch((error) => {
+            this.loading = false;
         });
     }
-    /*downloadFile(event, field) {
-      const placeholder = event.target.nextElementSibling;
-      this.coreStateMachineService.dispatch(Constants.STATE_MACHINE_ACTION_LOAD_FILE, field.attachmentId).then((responseObject) => {
-        const fileInformation = responseObject.body;
-        const fileBlob = this.dataURItoBlob(fileInformation.fileContents);
-        const file = new File([fileBlob], fileInformation.fileName, { type: fileInformation.mimeType });
-        placeholder.href = URL.createObjectURL(file);
-        placeholder.download = file.name;
-        placeholder.click();
-      });
-    }*/
     downloadFile(event, field) {
-        /* this.coreStateMachineService.dispatch(Constants.STATE_MACHINE_ACTION_LOAD_FILE, field.attachmentId).then((responseObject) => {
-           const fileInformation = responseObject.body;
-           const fileBlob = this.dataURItoBlob(fileInformation.fileContents);
-           const file = new File([fileBlob], fileInformation.fileName, { type: fileInformation.mimeType });
-           this.placeholderElement.nativeElement.href = URL.createObjectURL(file);
-           this.placeholderElement.nativeElement.download = file.name;
-           this.placeholderElement.nativeElement.click();
-         });*/
-    }
-    dataURItoBlob(dataURI) {
-        const byteString = atob(dataURI);
-        const arrayBuffer = new ArrayBuffer(byteString.length);
-        const int8Array = new Uint8Array(arrayBuffer);
-        for (let i = 0; i < byteString.length; i++) {
-            int8Array[i] = byteString.charCodeAt(i);
-        }
-        const blob = new Blob([arrayBuffer], { type: 'image/jpeg' });
-        return blob;
+        return new Promise((resolve, reject) => {
+            this.coreService.loadFile(field.attachmentId).subscribe((responseObject) => {
+                const fileInformation = responseObject.body;
+                /*const fileInformation = responseObject.body;
+                const fileBlob = this.coreService.dataURItoBlob(fileInformation.fileContents);
+                const file = new File([fileBlob], fileInformation.fileName, {type: fileInformation.mimeType});
+                const blobUrl = URL.createObjectURL(file);
+                const link = document.createElement('a');
+                link.href = blobUrl;
+                link.download = fileInformation.fileName;
+                link.click();
+                URL.revokeObjectURL(blobUrl);*/
+                this.coreService.saveFile(fileInformation);
+                resolve();
+            }, error => {
+                this.toasterService.error(error.error?.['message']);
+            });
+        });
     }
-    onmouseleave = onmouseleave;
-    isNaN = isNaN;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AttachmentSectionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: AttachmentSectionComponent, isStandalone: true, selector: "app-attachment-section", inputs: { className: "className", attachments: "attachments", label: "label", attachmentsMax: "attachmentsMax", isSortable: "isSortable", downloadAll: "downloadAll", isRequired: "isRequired" }, viewQueries: [{ propertyName: "placeholderElement", first: true, predicate: ["placeholder"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"mt-2 p-0\">\r\n\r\n  @if(hasLabel){\r\n    <div class=\"d-flex justify-content-between mb-1\">\r\n      <span class=\"form-label mb-0\">{{ label }}</span>\r\n    </div>\r\n  }\r\n  \r\n  @if(!isReadOnly){\r\n  <div style=\"text-align-last: end\">\r\n    @if(!required && !hideOption){\r\n    <span class=\"fs-11 fc-dark-gray\">\r\n      {{ i18n.translate(\"Optional\") }}\r\n    </span>\r\n    }\r\n  </div>\r\n  } @if(!attachments?.length && !isReadOnly){\r\n  <section\r\n    [ngClass]=\"insideTable ? 'file-uploader-table' : 'file-uploader'\"\r\n    class=\"mb-2\"\r\n    [class.insideTableStyle]=\"insideTable\"\r\n    (click)=\"addAttahment(); $event.stopPropagation()\"\r\n  >\r\n    <div\r\n      [ngClass]=\"insideTable ? 'file-uploader-table-dev' : ''\"\r\n      class=\"file-uploader-input\"\r\n    >\r\n      <div class=\"icon mb-1\">\r\n        <svg\r\n          [ngClass]=\"insideTable ? 'file-uploader-table-svg' : ''\"\r\n          width=\"41\"\r\n          height=\"38\"\r\n          viewBox=\"0 0 41 38\"\r\n          fill=\"none\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n        >\r\n          <path\r\n            d=\"M0 22.1947V20.6736C0.0971303 20.1019 0.070094 19.5141 0.276371 18.9533C1.28372 16.2086 3.21231 14.5023 6.0421 13.8094C6.70499 13.6472 6.68497 13.6632 6.69899 12.9843C6.73203 11.3321 6.99839 9.71992 7.62423 8.17986C8.86289 5.13678 10.9467 2.83969 13.8816 1.39175C17.168 -0.230424 20.5956 -0.450719 24.0553 0.81598C27.4929 2.07467 29.9622 4.41581 31.4802 7.74828C31.7786 8.40316 32.027 9.08307 32.1712 9.79202C32.2402 10.1315 32.4035 10.2566 32.7529 10.3107C36.7012 10.9165 39.3358 13.1255 40.6946 16.8735C40.9069 17.4603 40.9199 18.0731 40.9599 18.6829C40.9649 18.7601 40.9389 18.8442 41 18.9113V20.5124C40.9109 20.995 40.969 21.4937 40.8608 21.9734C40.5244 23.4614 39.8454 24.7821 38.8501 25.9297C37.4522 27.5418 35.7059 28.5882 33.6161 29.0519C32.791 29.2351 31.9499 29.2521 31.1117 29.2922C30.6571 29.3142 30.584 29.193 30.592 28.7484C30.6451 25.8446 29.802 23.2571 27.8624 21.0591C25.9979 18.9463 23.6597 17.7167 20.867 17.4012C18.8553 17.1739 16.9057 17.4593 15.0612 18.3395C11.8319 19.8816 9.81416 22.4069 8.96102 25.8696C8.74273 26.7538 8.68265 27.658 8.70568 28.5702C8.7217 29.2111 8.60254 29.3122 7.95968 29.2972C5.95098 29.2511 4.10551 28.7234 2.58146 27.3596C1.07644 26.0168 0.0680913 24.3996 0.0400537 22.3028C0.0400537 22.2607 0.0250336 22.2257 0 22.1937V22.1947Z\"\r\n            fill=\"#DEE0E2\"\r\n          />\r\n          <path\r\n            d=\"M29.0303 28.2632C29.0604 33.4031 24.8657 37.6187 19.6838 37.6548C14.5169 37.6908 10.2852 33.4952 10.2521 28.3042C10.2201 23.1403 14.4297 18.9126 19.6227 18.8946C24.8037 18.8766 28.9993 23.0542 29.0303 28.2632Z\"\r\n            fill=\"#8E9AA0\"\r\n          />\r\n          <path\r\n            d=\"M20.5573 25.2644C20.4622 25.4477 20.5012 25.5939 20.5012 25.734C20.4982 28.2154 20.5002 30.6957 20.4982 33.177C20.4982 33.8099 20.2339 34.1704 19.7462 34.2234C19.2645 34.2765 18.88 33.9831 18.8169 33.5025C18.7959 33.3443 18.7969 33.183 18.7969 33.0238C18.7959 30.5826 18.7969 28.1423 18.7969 25.701C18.7969 25.5728 18.7969 25.4447 18.7969 25.2003C18.1971 25.8031 17.6774 26.3288 17.1527 26.8505C17.0115 26.9907 16.8683 27.1349 16.7061 27.2471C16.3566 27.4864 15.9341 27.4413 15.6457 27.154C15.3643 26.8746 15.3203 26.442 15.5486 26.0925C15.6207 25.9824 15.7128 25.8832 15.8069 25.7891C16.8613 24.7307 17.9167 23.6733 18.9732 22.6179C19.4017 22.1893 19.8784 22.1763 20.3039 22.5988C21.3914 23.6803 22.4739 24.7667 23.5533 25.8572C23.9809 26.2898 24.0129 26.8065 23.6534 27.167C23.299 27.5214 22.7753 27.4844 22.3437 27.0568C21.7499 26.47 21.1661 25.8732 20.5603 25.2644H20.5573Z\"\r\n            fill=\"#F9F9F9\"\r\n          />\r\n        </svg>\r\n      </div>\r\n      <div class=\"f-14 fc-black fw-normal\">\r\n        <span class=\"fc-coral fw-medium\">{{ i18n.translate(\"browse\") }}</span>\r\n      </div>\r\n      <div class=\"fs-10 fc-dark-gray\">\r\n        {{ i18n.translate(\"addMultiAttachments\") }}\r\n      </div>\r\n    </div>\r\n  </section>\r\n  }\r\n\r\n  <!--  <ds-message class=\"full\" *ngIf=\"!attachments?.length && !isReadOnly\" label=\"{{i18n.translate('NoAttachments')}}\"></ds-message>-->\r\n @if(attachments?.length){\r\n  <div\r\n  class=\"table-responsive full\"\r\n  cdkDropList\r\n  [cdkDropListData]=\"attachments\"\r\n  (cdkDropListDropped)=\"drop($event)\"\r\n>\r\n  <table>\r\n    <thead>\r\n      <tr>\r\n     @if(downloadAll){\r\n      <th>\r\n        <ds-button\r\n          square\r\n          icon\r\n          size=\"small\"\r\n          (click)=\"downloadAllAttachments($event)\"\r\n          class=\"icon-btn-shadow\"\r\n        >\r\n          <ds-icon\r\n            icon=\"download\"\r\n            class=\"fs-20 fs-md-17 fc-purple\"\r\n          ></ds-icon>\r\n        </ds-button>\r\n        <a #placeholder></a>\r\n      </th>\r\n     }\r\n        <th class=\"width30\">{{ i18n.translate(\"FileName\") }}</th>\r\n        <th>{{ i18n.translate(\"FileDescription\") }}</th>\r\n        <th>{{ i18n.translate(\"comment\") }}</th>\r\n        @if(!isReadOnly){\r\n          <th></th>\r\n        }\r\n      </tr>\r\n    </thead>\r\n    <tbody>\r\n      <tr\r\n        *ngFor=\"let data of attachments; index as i\"\r\n        cdkDrag\r\n        [cdkDragDisabled]=\"\r\n          attachments?.length == 0 || (!isSortable && !isReadOnly)\r\n        \"\r\n      >\r\n      @if(downloadAll){\r\n        <td>{{ i + 1 }}</td>\r\n      }\r\n        <td>\r\n          <app-file-uploader\r\n            [allowedExtensions]=\"allowedExtensions\"\r\n            class=\"white-attached\"\r\n            [field]=\"data\"\r\n            name=\"attachment\"\r\n            [hasLabel]=\"false\"\r\n            [showActions]=\"true\"\r\n            [isReadOnly]=\"true\"\r\n          >\r\n          </app-file-uploader>\r\n        </td>\r\n        <td class=\"maxWidth px-2\">\r\n          <!--               (mouseover)=\"isSortable ? fileDescriptionAnchor.popover.open():$event.stopPropagation();\"-->\r\n          <a\r\n            class=\"fw-medium fc-black underline cursor-pointer fs-12\"\r\n            [hidden]=\"!data?.fileDescription\"\r\n            (click)=\"\r\n              $event.stopPropagation(); fileDescriptionAnchor.popover.open()\r\n            \"\r\n            [satPopoverAnchor]=\"fileDescriptionPopover\"\r\n            #fileDescriptionAnchor=\"satPopoverAnchor\"\r\n            [matTooltip]=\"data?.fileDescription\"\r\n          >\r\n            {{ data?.fileDescription | slice : 0 : 10 }}....\r\n          </a>\r\n          <!--          {{ i18n.translate('View') }}-->\r\n          <sat-popover\r\n            #fileDescriptionPopover\r\n            [anchor]=\"fileDescriptionAnchor\"\r\n            [hasBackdrop]=\"true\"\r\n            [restoreFocus]=\"false\"\r\n            verticalAlign=\"below\"\r\n            horizontalAlign=\"center\"\r\n          >\r\n            <div\r\n              class=\"default-popover p-3 fs-14 text-break view-note-popover\"\r\n            >\r\n              <bdi class=\"fc-black\">\r\n                {{ data?.fileDescription }}\r\n              </bdi>\r\n            </div>\r\n          </sat-popover>\r\n        </td>\r\n        <td class=\"maxWidth px-2\">\r\n          <!--               (mouseover)=\"isSortable ? commentsAnchor.popover.open():$event.stopPropagation();\"-->\r\n          <a\r\n            class=\"fw-medium fc-black underline cursor-pointer fs-12\"\r\n            [hidden]=\"!data?.attachmentcomment\"\r\n            (click)=\"$event.stopPropagation(); commentsAnchor.popover.open()\"\r\n            [satPopoverAnchor]=\"commentsPopover\"\r\n            [matTooltip]=\"data?.attachmentcomment\"\r\n            #commentsAnchor=\"satPopoverAnchor\"\r\n          >\r\n            {{ data?.attachmentcomment | slice : 0 : 10 }}...\r\n          </a>\r\n          <!--          {{ i18n.translate('View') }}-->\r\n          <sat-popover\r\n            #commentsPopover\r\n            [anchor]=\"commentsAnchor\"\r\n            [hasBackdrop]=\"true\"\r\n            [restoreFocus]=\"false\"\r\n            verticalAlign=\"below\"\r\n            horizontalAlign=\"center\"\r\n          >\r\n            <div\r\n              class=\"default-popover p-3 fs-14 text-break view-note-popover\"\r\n            >\r\n              <bdi class=\"fc-black\">\r\n                {{ data?.attachmentcomment }}\r\n              </bdi>\r\n            </div>\r\n          </sat-popover>\r\n        </td>\r\n       @if(!isReadOnly){\r\n        <td>\r\n          <div class=\"d-flex gap-2\">\r\n            <ds-button\r\n              square\r\n              icon\r\n              size=\"small\"\r\n              (click)=\"deleteAttachments(i, data)\"\r\n              class=\"icon-btn-shadow\"\r\n            >\r\n              <ds-icon icon=\"trash\" class=\"fs-20 fs-md-17 fc-red\"></ds-icon>\r\n            </ds-button>\r\n\r\n            <ds-button\r\n              square\r\n              icon\r\n              size=\"small\"\r\n              (click)=\"editRow(data, i)\"\r\n              class=\"icon-btn-shadow\"\r\n            >\r\n              <ds-icon icon=\"pen\" class=\"fs-20 fs-md-17 fc-purple\"></ds-icon>\r\n            </ds-button>\r\n          </div>\r\n        </td>\r\n       }\r\n      </tr>\r\n    </tbody>\r\n  </table>\r\n</div>\r\n }\r\n\r\n @if(!isReadOnly && attachments?.length && attachments?.length < attachmentsMax){\r\n  <div\r\n  class=\"text-center full mt-3\"\r\n>\r\n  <ds-button\r\n    shape=\"{{ attachments?.length ? 'outline' : '' }}\"\r\n    [ngClass]=\"{ 'full-add-btn w-100': attachments?.length }\"\r\n    (click)=\"addAttahment(); $event.stopPropagation()\"\r\n  >\r\n    <ds-icon slot=\"prefix\" icon=\"plus\" class=\"fs-22\"></ds-icon>\r\n    {{ i18n.translate(\"addAttachments\") }}\r\n  </ds-button>\r\n</div>\r\n }\r\n \r\n</div>\r\n", styles: ["::ng-deep .add-attachment-dialog{--popup-max-width: 500px;--popup-width: 100%}::ng-deep .view-note-popover{max-width:250px;max-height:300px;overflow:auto;--popover-bc: var(--black);color:var(--white);--popover-before-width: .6rem}::ng-deep .mat-tooltip{max-width:500px;background:#1d252d}:host ::ng-deep .table-responsive table{--th-bg: var(--white);--th-fc: var(--dark-gray)}:host ::ng-deep .white-attached ds-attachments::part(base){--file-bg: transparent}:host ::ng-deep .full-add-btn::part(base){--btn-min-width: 100%;--btn-bg-color: var(--light-gray);--btn-height: 70px;--btn-radius: 6px;border:1px dashed var(--dark-gray)}.file-uploader{--uploader-height: 150px;--uploader-width: 100%;--uploader-bg: var(--off-white);--uploader-border: 1px dashed var(--dark-gray);--uploader-radius: var(--box-radius);--uploader-padding: 1rem;height:var(--uploader-height);background-color:var(--uploader-bg);border:var(--uploader-border);border-radius:var(--uploader-radius);padding:var(--uploader-padding);text-align:center;cursor:pointer}.insideTableWidth{width:250px!important}.file-uploader-table{--uploader-height: 45PX;--uploader-width: 100%;--uploader-bg: var(--off-white);--uploader-border: 1px dashed var(--dark-gray);--uploader-radius: var(--box-radius);--uploader-padding: 0 1rem;height:var(--uploader-height);background-color:var(--uploader-bg);border:var(--uploader-border);border-radius:var(--uploader-radius);padding:var(--uploader-padding);text-align:center;cursor:pointer;DISPLAY:FLEX;ALIGN-ITEMS:CENTER;JUSTIFY-CONTENT:CENTER}.file-uploader-table-dev{DISPLAY:FLEX;ALIGN-ITEMS:CENTER;GAP:1REM}.file-uploader-table-svg{width:70%}.insideTableStyle{width:272px}.files-list{--file-item-width: 300px;display:grid;grid-template-columns:repeat(auto-fill,var(--file-item-width));grid-gap:.5rem}@media (max-width: 768px){.files-list{grid-template-columns:repeat(auto-fill,minmax(var(--file-item-width),1fr))}}.files-list .file-item-container .uploaded-file-actions{margin-inline-start:20px}.files-list .file-item-container .uploaded-file-actions .button__wrapper{font-size:15px}.files-list .file-item-container .file-item{--file-bg: var(--off-white);--file-radius: var(--box-radius);--icon-color: var(--purple);--icon-size: 2rem;--file-border: transparent;display:flex;align-items:center;background-color:var(--file-bg);border:1px solid var(--file-border);border-radius:var(--file-radius);padding:0 1rem;height:70px;gap:.75rem}.files-list .file-item-container .file-item.error{--file-bg: rgba(var(--rgb-red), 10%);--file-border: var(--red);--icon-color: var(--red)}.files-list .file-item-container .file-item .icon{color:var(--icon-color);font-size:var(--icon-size)}.files-list .file-item-container .file-item .file-action{display:flex;align-items:center;gap:.5rem}ds-attachments::part(base){--file-width: 250px}.file-item-container-actions{display:flex;align-items:center}.file-item-container-actions .uploaded-file-actions{display:flex;align-items:center;gap:10px;margin-inline-start:25px}.file-item-container-actions .uploaded-file-actions .button__wrapper{font-size:15px}::ng-deep .file-item .name-size{display:flex;flex-direction:column;justify-content:center;flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:120px}\n"], dependencies: [{ kind: "ngmodule", type: SatPopoverModule }, { kind: "component", type: i1$2.SatPopoverComponent, selector: "sat-popover", inputs: ["anchor", "horizontalAlign", "xAlign", "verticalAlign", "yAlign", "forceAlignment", "lockAlignment", "autoFocus", "restoreFocus", "scrollStrategy", "hasBackdrop", "interactiveClose", "openTransition", "closeTransition", "openAnimationStartAtScale", "closeAnimationEndAtScale", "backdropClass", "panelClass"], outputs: ["opened", "closed", "afterOpen", "afterClose", "backdropClicked", "overlayKeydown"] }, { kind: "directive", type: i1$2.SatPopoverAnchorDirective, selector: "[satPopoverAnchor]", inputs: ["satPopoverAnchor"], exportAs: ["satPopoverAnchor"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "component", type: DocsUploaderComponent, selector: "app-file-uploader", inputs: ["useCrop", "formKey", "showLabel", "downloadLink", "showActions", "styleHeight", "fileInputHeight", "styleWidth", "hints", "allowedExtensions", "callApi", "tooltip", "attachments", "optional", "display", "attachType", "error", "displayedFiles", "getDataFromTemplate", "allowFileContentsWithMultiAttachments", "accept", "signType", "showSignButton", "printType", "showPrintButton", "downloadType", "showDownloadButton", "preventFileContents", "maxSize"], outputs: ["selectedTemplateAttachment", "addSignatureClicked", "printActionClicked", "downloadActionClicked"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "pipe", type: SlicePipe, name: "slice" }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: AttachmentSectionComponent, isStandalone: true, selector: "app-attachment-section", inputs: { className: "className", attachmentsMax: "attachmentsMax", isSortable: "isSortable", downloadAll: "downloadAll", isRequired: "isRequired", descriptionRequired: "descriptionRequired", commentsRequired: "commentsRequired", allowedExtensions: "allowedExtensions" }, outputs: { emitedValue: "emitedValue" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => AttachmentSectionComponent),
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "paginator", first: true, predicate: ["paginator"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"mt-2 p-0\">\r\n\r\n  @if (label) {\r\n    <div class=\"d-flex justify-content-between mb-1\">\r\n      <span class=\"form-label mb-0\">{{ label }}</span>\r\n    </div>\r\n  }\r\n\r\n  @if (!isReadOnly) {\r\n    <div style=\"text-align-last: end\">\r\n      @if (!required) {\r\n        <span class=\"fs-11 fc-dark-gray\">\r\n      {{ i18n.translate(\"Optional\") }}\r\n    </span>\r\n      }\r\n    </div>\r\n  }\r\n  @if (!attachments?.length && !isReadOnly) {\r\n    <section\r\n      [ngClass]=\"insideTable ? 'file-uploader-table' : 'file-uploader'\"\r\n      class=\"mb-2\"\r\n      [class.insideTableStyle]=\"insideTable\"\r\n      (click)=\"addAttachment(); $event.stopPropagation()\">\r\n      <div\r\n        [ngClass]=\"insideTable ? 'file-uploader-table-dev' : ''\"\r\n        class=\"file-uploader-input\">\r\n        <div class=\"icon mb-1\">\r\n          <svg\r\n            [ngClass]=\"insideTable ? 'file-uploader-table-svg' : ''\"\r\n            width=\"41\"\r\n            height=\"38\"\r\n            viewBox=\"0 0 41 38\"\r\n            fill=\"none\"\r\n            xmlns=\"http://www.w3.org/2000/svg\">\r\n            <path\r\n              d=\"M0 22.1947V20.6736C0.0971303 20.1019 0.070094 19.5141 0.276371 18.9533C1.28372 16.2086 3.21231 14.5023 6.0421 13.8094C6.70499 13.6472 6.68497 13.6632 6.69899 12.9843C6.73203 11.3321 6.99839 9.71992 7.62423 8.17986C8.86289 5.13678 10.9467 2.83969 13.8816 1.39175C17.168 -0.230424 20.5956 -0.450719 24.0553 0.81598C27.4929 2.07467 29.9622 4.41581 31.4802 7.74828C31.7786 8.40316 32.027 9.08307 32.1712 9.79202C32.2402 10.1315 32.4035 10.2566 32.7529 10.3107C36.7012 10.9165 39.3358 13.1255 40.6946 16.8735C40.9069 17.4603 40.9199 18.0731 40.9599 18.6829C40.9649 18.7601 40.9389 18.8442 41 18.9113V20.5124C40.9109 20.995 40.969 21.4937 40.8608 21.9734C40.5244 23.4614 39.8454 24.7821 38.8501 25.9297C37.4522 27.5418 35.7059 28.5882 33.6161 29.0519C32.791 29.2351 31.9499 29.2521 31.1117 29.2922C30.6571 29.3142 30.584 29.193 30.592 28.7484C30.6451 25.8446 29.802 23.2571 27.8624 21.0591C25.9979 18.9463 23.6597 17.7167 20.867 17.4012C18.8553 17.1739 16.9057 17.4593 15.0612 18.3395C11.8319 19.8816 9.81416 22.4069 8.96102 25.8696C8.74273 26.7538 8.68265 27.658 8.70568 28.5702C8.7217 29.2111 8.60254 29.3122 7.95968 29.2972C5.95098 29.2511 4.10551 28.7234 2.58146 27.3596C1.07644 26.0168 0.0680913 24.3996 0.0400537 22.3028C0.0400537 22.2607 0.0250336 22.2257 0 22.1937V22.1947Z\"\r\n              fill=\"#DEE0E2\"/>\r\n            <path\r\n              d=\"M29.0303 28.2632C29.0604 33.4031 24.8657 37.6187 19.6838 37.6548C14.5169 37.6908 10.2852 33.4952 10.2521 28.3042C10.2201 23.1403 14.4297 18.9126 19.6227 18.8946C24.8037 18.8766 28.9993 23.0542 29.0303 28.2632Z\"\r\n              fill=\"#8E9AA0\"/>\r\n            <path\r\n              d=\"M20.5573 25.2644C20.4622 25.4477 20.5012 25.5939 20.5012 25.734C20.4982 28.2154 20.5002 30.6957 20.4982 33.177C20.4982 33.8099 20.2339 34.1704 19.7462 34.2234C19.2645 34.2765 18.88 33.9831 18.8169 33.5025C18.7959 33.3443 18.7969 33.183 18.7969 33.0238C18.7959 30.5826 18.7969 28.1423 18.7969 25.701C18.7969 25.5728 18.7969 25.4447 18.7969 25.2003C18.1971 25.8031 17.6774 26.3288 17.1527 26.8505C17.0115 26.9907 16.8683 27.1349 16.7061 27.2471C16.3566 27.4864 15.9341 27.4413 15.6457 27.154C15.3643 26.8746 15.3203 26.442 15.5486 26.0925C15.6207 25.9824 15.7128 25.8832 15.8069 25.7891C16.8613 24.7307 17.9167 23.6733 18.9732 22.6179C19.4017 22.1893 19.8784 22.1763 20.3039 22.5988C21.3914 23.6803 22.4739 24.7667 23.5533 25.8572C23.9809 26.2898 24.0129 26.8065 23.6534 27.167C23.299 27.5214 22.7753 27.4844 22.3437 27.0568C21.7499 26.47 21.1661 25.8732 20.5603 25.2644H20.5573Z\"\r\n              fill=\"#F9F9F9\"/>\r\n          </svg>\r\n        </div>\r\n        <div class=\"f-14 fc-black fw-normal\">\r\n          <span class=\"fc-coral fw-medium\">{{ i18n.translate(\"browse\") }}</span>\r\n        </div>\r\n        <div class=\"fs-10 fc-dark-gray\">\r\n          {{ i18n.translate(\"addMultiAttachments\") }}\r\n        </div>\r\n      </div>\r\n    </section>\r\n  }\r\n\r\n  <!--  <ds-message class=\"full\" *ngIf=\"!attachments?.length && !isReadOnly\" label=\"{{i18n.translate('NoAttachments')}}\"></ds-message>-->\r\n  @if (attachments?.length) {\r\n    <div\r\n      class=\"table-responsive full\"\r\n      cdkDropList\r\n      [cdkDropListData]=\"attachments\"\r\n      (cdkDropListDropped)=\"drop($event)\"\r\n    >\r\n\r\n      <table mat-table [dataSource]=\"dataSource\">\r\n\r\n        <!-- index Column -->\r\n        <ng-container matColumnDef=\"index\">\r\n          <th mat-header-cell *matHeaderCellDef>\r\n            <ds-button\r\n              [matTooltip]=\"i18n.translate('downloadAll')\"\r\n              square icon size=\"small\"\r\n              (click)=\"downloadAllAttachments($event)\"\r\n              class=\"icon-btn-shadow\">\r\n              @if (loading) {\r\n                <ds-icon class=\"sfi sfi-spinner d-inline-block spin fc-coral fs-30-imp\"></ds-icon>\r\n              } @else {\r\n                <ds-icon\r\n                  icon=\"download\"\r\n                  class=\"fs-20 fs-md-17 fc-purple\"></ds-icon>\r\n              }\r\n            </ds-button>\r\n          </th>\r\n          <td mat-cell *matCellDef=\"let element; let i = index\"> {{ i+1 + pageSize*(pageNumber) }}</td>\r\n        </ng-container>\r\n\r\n        <!-- Name Column -->\r\n        <ng-container matColumnDef=\"file\">\r\n          <th mat-header-cell *matHeaderCellDef> {{ i18n.translate(\"FileName\") }}</th>\r\n          <td mat-cell *matCellDef=\"let element\">\r\n            <app-file-uploader\r\n              [allowedExtensions]=\"allowedExtensions\"\r\n              [displayedFiles]=\"[element]\"\r\n              name=\"attachment\"\r\n              [showActions]=\"true\"\r\n              [isReadOnly]=\"true\"\r\n              [multiple]=\"true\">\r\n            </app-file-uploader>\r\n          </td>\r\n        </ng-container>\r\n\r\n        <!-- description Column -->\r\n        <ng-container matColumnDef=\"description\">\r\n          <th mat-header-cell *matHeaderCellDef> {{ i18n.translate(\"FileDescription\") }}</th>\r\n          <td mat-cell *matCellDef=\"let element\">\r\n            <a\r\n              class=\"fw-medium fc-black underline cursor-pointer fs-12\"\r\n              [hidden]=\"!element?.['fileDescription']\"\r\n              (click)=\"$event.stopPropagation(); fileDescriptionAnchor.popover.open()\"\r\n              [satPopoverAnchor]=\"fileDescriptionPopover\"\r\n              #fileDescriptionAnchor=\"satPopoverAnchor\"\r\n              [matTooltip]=\"element?.['fileDescription']\">\r\n              {{ element?.['fileDescription']?.length > 10 ? (element?.['fileDescription'] | slice : 0 : 10) + '....' : element?.['fileDescription'] }}\r\n            </a>\r\n            <sat-popover\r\n              #fileDescriptionPopover\r\n              [anchor]=\"fileDescriptionAnchor\"\r\n              [hasBackdrop]=\"true\"\r\n              [restoreFocus]=\"false\"\r\n              verticalAlign=\"below\"\r\n              horizontalAlign=\"center\"\r\n            >\r\n              <div class=\"default-popover p-3 fs-14 text-break view-note-popover\">\r\n                <bdi class=\"fc-black\">\r\n                  {{ element?.['fileDescription'] }}\r\n                </bdi>\r\n              </div>\r\n            </sat-popover>\r\n          </td>\r\n        </ng-container>\r\n\r\n        <!-- comment Column -->\r\n        <ng-container matColumnDef=\"comment\">\r\n          <th mat-header-cell *matHeaderCellDef> {{ i18n.translate(\"comment\") }}</th>\r\n          <td mat-cell *matCellDef=\"let element\">\r\n            <a\r\n              class=\"fw-medium fc-black underline cursor-pointer fs-12\"\r\n              [hidden]=\"!element?.['attachmentcomment']\"\r\n              (click)=\"$event.stopPropagation(); commentsAnchor.popover.open()\"\r\n              [satPopoverAnchor]=\"commentsPopover\"\r\n              [matTooltip]=\"element?.['attachmentcomment']\"\r\n              #commentsAnchor=\"satPopoverAnchor\">\r\n              {{ element?.['attachmentcomment'] | slice : 0 : 10 }}...\r\n            </a>\r\n            <sat-popover\r\n              #commentsPopover\r\n              [anchor]=\"commentsAnchor\"\r\n              [hasBackdrop]=\"true\"\r\n              [restoreFocus]=\"false\"\r\n              verticalAlign=\"below\"\r\n              horizontalAlign=\"center\">\r\n              <div class=\"default-popover p-3 fs-14 text-break view-note-popover\">\r\n                <bdi class=\"fc-black\">\r\n                  {{ element?.['attachmentcomment'] }}\r\n                </bdi>\r\n              </div>\r\n            </sat-popover>\r\n          </td>\r\n        </ng-container>\r\n\r\n        <ng-container matColumnDef=\"actions\">\r\n          <th mat-header-cell *matHeaderCellDef></th>\r\n          <td mat-cell *matCellDef=\"let element; let i = index\">\r\n            @if (!isReadOnly) {\r\n              <td>\r\n                <div class=\"d-flex gap-2\">\r\n                  <ds-button\r\n                    square\r\n                    icon\r\n                    size=\"small\"\r\n                    (click)=\"deleteAttachments(i, element)\"\r\n                    class=\"icon-btn-shadow\">\r\n                    <ds-icon icon=\"trash\" class=\"fs-20 fs-md-17 fc-red\"></ds-icon>\r\n                  </ds-button>\r\n\r\n                  <ds-button\r\n                    square\r\n                    icon\r\n                    size=\"small\"\r\n                    (click)=\"editRow(element, i)\"\r\n                    class=\"icon-btn-shadow\">\r\n                    <ds-icon icon=\"pen\" class=\"fs-20 fs-md-17 fc-purple\"></ds-icon>\r\n                  </ds-button>\r\n                </div>\r\n              </td>\r\n            }\r\n          </td>\r\n        </ng-container>\r\n\r\n        <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n        <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\r\n      </table>\r\n\r\n      <mat-paginator\r\n        #paginator\r\n        [pageSizeOptions]=\"[5]\"\r\n        (page)=\"onPaginateChange($event)\"\r\n        [length]=\"attachments.length\"\r\n        [pageSize]=\"pageSize\"\r\n        showFirstLastButtons></mat-paginator>\r\n\r\n    </div>\r\n  }\r\n\r\n  @if (!isReadOnly && attachments?.length && attachments?.length < attachmentsMax) {\r\n    <div class=\"text-center full mt-3\">\r\n      <ds-button\r\n        shape=\"{{ attachments?.length ? 'outline' : '' }}\"\r\n        [ngClass]=\"{ 'full-add-btn w-100': attachments?.length }\"\r\n        (click)=\"addAttachment(); $event.stopPropagation()\">\r\n        <ds-icon slot=\"prefix\" icon=\"plus\" class=\"fs-22\"></ds-icon>\r\n        {{ i18n.translate(\"addAttachments\") }}\r\n      </ds-button>\r\n    </div>\r\n  }\r\n\r\n</div>\r\n", styles: ["::ng-deep .add-attachment-dialog{--popup-max-width: 500px;--popup-width: 100%}::ng-deep .view-note-popover{max-width:250px;max-height:300px;overflow:auto;--popover-bc: var(--black);color:var(--white);--popover-before-width: .6rem}::ng-deep .mat-tooltip{max-width:500px;background:#1d252d}:host ::ng-deep .table-responsive table{--th-bg: var(--white);--th-fc: var(--dark-gray)}:host ::ng-deep .white-attached ds-attachments::part(base){--file-bg: transparent}:host ::ng-deep .full-add-btn::part(base){--btn-min-width: 100%;--btn-bg-color: var(--light-gray);--btn-height: 70px;--btn-radius: 6px;border:1px dashed var(--dark-gray)}.file-uploader{--uploader-height: 150px;--uploader-width: 100%;--uploader-bg: var(--off-white);--uploader-border: 1px dashed var(--dark-gray);--uploader-radius: var(--box-radius);--uploader-padding: 1rem;height:var(--uploader-height);background-color:var(--uploader-bg);border:var(--uploader-border);border-radius:var(--uploader-radius);padding:var(--uploader-padding);text-align:center;cursor:pointer}.insideTableWidth{width:250px!important}.file-uploader-table{--uploader-height: 45PX;--uploader-width: 100%;--uploader-bg: var(--off-white);--uploader-border: 1px dashed var(--dark-gray);--uploader-radius: var(--box-radius);--uploader-padding: 0 1rem;height:var(--uploader-height);background-color:var(--uploader-bg);border:var(--uploader-border);border-radius:var(--uploader-radius);padding:var(--uploader-padding);text-align:center;cursor:pointer;DISPLAY:FLEX;ALIGN-ITEMS:CENTER;JUSTIFY-CONTENT:CENTER}.file-uploader-table-dev{DISPLAY:FLEX;ALIGN-ITEMS:CENTER;GAP:1REM}.file-uploader-table-svg{width:70%}.insideTableStyle{width:272px}.files-list{--file-item-width: 300px;display:grid;grid-template-columns:repeat(auto-fill,var(--file-item-width));grid-gap:.5rem}@media (max-width: 768px){.files-list{grid-template-columns:repeat(auto-fill,minmax(var(--file-item-width),1fr))}}.files-list .file-item-container .uploaded-file-actions{margin-inline-start:20px}.files-list .file-item-container .uploaded-file-actions .button__wrapper{font-size:15px}.files-list .file-item-container .file-item{--file-bg: var(--off-white);--file-radius: var(--box-radius);--icon-color: var(--purple);--icon-size: 2rem;--file-border: transparent;display:flex;align-items:center;background-color:var(--file-bg);border:1px solid var(--file-border);border-radius:var(--file-radius);padding:0 1rem;height:70px;gap:.75rem}.files-list .file-item-container .file-item.error{--file-bg: rgba(var(--rgb-red), 10%);--file-border: var(--red);--icon-color: var(--red)}.files-list .file-item-container .file-item .icon{color:var(--icon-color);font-size:var(--icon-size)}.files-list .file-item-container .file-item .file-action{display:flex;align-items:center;gap:.5rem}ds-attachments::part(base){--file-width: 250px}.file-item-container-actions{display:flex;align-items:center}.file-item-container-actions .uploaded-file-actions{display:flex;align-items:center;gap:10px;margin-inline-start:25px}.file-item-container-actions .uploaded-file-actions .button__wrapper{font-size:15px}::ng-deep .file-item .name-size{display:flex;flex-direction:column;justify-content:center;flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:120px}\n"], dependencies: [{ kind: "ngmodule", type: SatPopoverModule }, { kind: "component", type: i1$1.SatPopoverComponent, selector: "sat-popover", inputs: ["anchor", "horizontalAlign", "xAlign", "verticalAlign", "yAlign", "forceAlignment", "lockAlignment", "autoFocus", "restoreFocus", "scrollStrategy", "hasBackdrop", "interactiveClose", "openTransition", "closeTransition", "openAnimationStartAtScale", "closeAnimationEndAtScale", "backdropClass", "panelClass"], outputs: ["opened", "closed", "afterOpen", "afterClose", "backdropClicked", "overlayKeydown"] }, { kind: "directive", type: i1$1.SatPopoverAnchorDirective, selector: "[satPopoverAnchor]", inputs: ["satPopoverAnchor"], exportAs: ["satPopoverAnchor"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "component", type: DocsUploaderComponent, selector: "app-file-uploader", inputs: ["useCrop", "formKey", "showLabel", "downloadLink", "showActions", "styleHeight", "fileInputHeight", "styleWidth", "hints", "allowedExtensions", "callApi", "tooltip", "optional", "display", "attachType", "error", "displayedFiles", "getDataFromTemplate", "allowFileContentsWithMultiAttachments", "accept", "signType", "showSignButton", "printType", "showPrintButton", "downloadType", "showDownloadButton", "preventFileContents", "maxSize"], outputs: ["selectedTemplateAttachment", "addSignatureClicked", "printActionClicked", "emitedValue", "downloadActionClicked"] }, { kind: "pipe", type: SlicePipe, name: "slice" }, { kind: "component", type: MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AttachmentSectionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-attachment-section', schemas: [CUSTOM_ELEMENTS_SCHEMA], imports: [
+            args: [{ selector: 'app-attachment-section', schemas: [CUSTOM_ELEMENTS_SCHEMA], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => AttachmentSectionComponent),
+                            multi: true,
+                        },
+                    ], imports: [
                         SatPopoverModule,
                         MatTooltip,
                         NgIf,
@@ -4490,14 +4472,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                         DocsUploaderComponent,
                         CdkDrag,
                         SlicePipe,
-                        NgForOf
-                    ], standalone: true, template: "<div class=\"mt-2 p-0\">\r\n\r\n  @if(hasLabel){\r\n    <div class=\"d-flex justify-content-between mb-1\">\r\n      <span class=\"form-label mb-0\">{{ label }}</span>\r\n    </div>\r\n  }\r\n  \r\n  @if(!isReadOnly){\r\n  <div style=\"text-align-last: end\">\r\n    @if(!required && !hideOption){\r\n    <span class=\"fs-11 fc-dark-gray\">\r\n      {{ i18n.translate(\"Optional\") }}\r\n    </span>\r\n    }\r\n  </div>\r\n  } @if(!attachments?.length && !isReadOnly){\r\n  <section\r\n    [ngClass]=\"insideTable ? 'file-uploader-table' : 'file-uploader'\"\r\n    class=\"mb-2\"\r\n    [class.insideTableStyle]=\"insideTable\"\r\n    (click)=\"addAttahment(); $event.stopPropagation()\"\r\n  >\r\n    <div\r\n      [ngClass]=\"insideTable ? 'file-uploader-table-dev' : ''\"\r\n      class=\"file-uploader-input\"\r\n    >\r\n      <div class=\"icon mb-1\">\r\n        <svg\r\n          [ngClass]=\"insideTable ? 'file-uploader-table-svg' : ''\"\r\n          width=\"41\"\r\n          height=\"38\"\r\n          viewBox=\"0 0 41 38\"\r\n          fill=\"none\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n        >\r\n          <path\r\n            d=\"M0 22.1947V20.6736C0.0971303 20.1019 0.070094 19.5141 0.276371 18.9533C1.28372 16.2086 3.21231 14.5023 6.0421 13.8094C6.70499 13.6472 6.68497 13.6632 6.69899 12.9843C6.73203 11.3321 6.99839 9.71992 7.62423 8.17986C8.86289 5.13678 10.9467 2.83969 13.8816 1.39175C17.168 -0.230424 20.5956 -0.450719 24.0553 0.81598C27.4929 2.07467 29.9622 4.41581 31.4802 7.74828C31.7786 8.40316 32.027 9.08307 32.1712 9.79202C32.2402 10.1315 32.4035 10.2566 32.7529 10.3107C36.7012 10.9165 39.3358 13.1255 40.6946 16.8735C40.9069 17.4603 40.9199 18.0731 40.9599 18.6829C40.9649 18.7601 40.9389 18.8442 41 18.9113V20.5124C40.9109 20.995 40.969 21.4937 40.8608 21.9734C40.5244 23.4614 39.8454 24.7821 38.8501 25.9297C37.4522 27.5418 35.7059 28.5882 33.6161 29.0519C32.791 29.2351 31.9499 29.2521 31.1117 29.2922C30.6571 29.3142 30.584 29.193 30.592 28.7484C30.6451 25.8446 29.802 23.2571 27.8624 21.0591C25.9979 18.9463 23.6597 17.7167 20.867 17.4012C18.8553 17.1739 16.9057 17.4593 15.0612 18.3395C11.8319 19.8816 9.81416 22.4069 8.96102 25.8696C8.74273 26.7538 8.68265 27.658 8.70568 28.5702C8.7217 29.2111 8.60254 29.3122 7.95968 29.2972C5.95098 29.2511 4.10551 28.7234 2.58146 27.3596C1.07644 26.0168 0.0680913 24.3996 0.0400537 22.3028C0.0400537 22.2607 0.0250336 22.2257 0 22.1937V22.1947Z\"\r\n            fill=\"#DEE0E2\"\r\n          />\r\n          <path\r\n            d=\"M29.0303 28.2632C29.0604 33.4031 24.8657 37.6187 19.6838 37.6548C14.5169 37.6908 10.2852 33.4952 10.2521 28.3042C10.2201 23.1403 14.4297 18.9126 19.6227 18.8946C24.8037 18.8766 28.9993 23.0542 29.0303 28.2632Z\"\r\n            fill=\"#8E9AA0\"\r\n          />\r\n          <path\r\n            d=\"M20.5573 25.2644C20.4622 25.4477 20.5012 25.5939 20.5012 25.734C20.4982 28.2154 20.5002 30.6957 20.4982 33.177C20.4982 33.8099 20.2339 34.1704 19.7462 34.2234C19.2645 34.2765 18.88 33.9831 18.8169 33.5025C18.7959 33.3443 18.7969 33.183 18.7969 33.0238C18.7959 30.5826 18.7969 28.1423 18.7969 25.701C18.7969 25.5728 18.7969 25.4447 18.7969 25.2003C18.1971 25.8031 17.6774 26.3288 17.1527 26.8505C17.0115 26.9907 16.8683 27.1349 16.7061 27.2471C16.3566 27.4864 15.9341 27.4413 15.6457 27.154C15.3643 26.8746 15.3203 26.442 15.5486 26.0925C15.6207 25.9824 15.7128 25.8832 15.8069 25.7891C16.8613 24.7307 17.9167 23.6733 18.9732 22.6179C19.4017 22.1893 19.8784 22.1763 20.3039 22.5988C21.3914 23.6803 22.4739 24.7667 23.5533 25.8572C23.9809 26.2898 24.0129 26.8065 23.6534 27.167C23.299 27.5214 22.7753 27.4844 22.3437 27.0568C21.7499 26.47 21.1661 25.8732 20.5603 25.2644H20.5573Z\"\r\n            fill=\"#F9F9F9\"\r\n          />\r\n        </svg>\r\n      </div>\r\n      <div class=\"f-14 fc-black fw-normal\">\r\n        <span class=\"fc-coral fw-medium\">{{ i18n.translate(\"browse\") }}</span>\r\n      </div>\r\n      <div class=\"fs-10 fc-dark-gray\">\r\n        {{ i18n.translate(\"addMultiAttachments\") }}\r\n      </div>\r\n    </div>\r\n  </section>\r\n  }\r\n\r\n  <!--  <ds-message class=\"full\" *ngIf=\"!attachments?.length && !isReadOnly\" label=\"{{i18n.translate('NoAttachments')}}\"></ds-message>-->\r\n @if(attachments?.length){\r\n  <div\r\n  class=\"table-responsive full\"\r\n  cdkDropList\r\n  [cdkDropListData]=\"attachments\"\r\n  (cdkDropListDropped)=\"drop($event)\"\r\n>\r\n  <table>\r\n    <thead>\r\n      <tr>\r\n     @if(downloadAll){\r\n      <th>\r\n        <ds-button\r\n          square\r\n          icon\r\n          size=\"small\"\r\n          (click)=\"downloadAllAttachments($event)\"\r\n          class=\"icon-btn-shadow\"\r\n        >\r\n          <ds-icon\r\n            icon=\"download\"\r\n            class=\"fs-20 fs-md-17 fc-purple\"\r\n          ></ds-icon>\r\n        </ds-button>\r\n        <a #placeholder></a>\r\n      </th>\r\n     }\r\n        <th class=\"width30\">{{ i18n.translate(\"FileName\") }}</th>\r\n        <th>{{ i18n.translate(\"FileDescription\") }}</th>\r\n        <th>{{ i18n.translate(\"comment\") }}</th>\r\n        @if(!isReadOnly){\r\n          <th></th>\r\n        }\r\n      </tr>\r\n    </thead>\r\n    <tbody>\r\n      <tr\r\n        *ngFor=\"let data of attachments; index as i\"\r\n        cdkDrag\r\n        [cdkDragDisabled]=\"\r\n          attachments?.length == 0 || (!isSortable && !isReadOnly)\r\n        \"\r\n      >\r\n      @if(downloadAll){\r\n        <td>{{ i + 1 }}</td>\r\n      }\r\n        <td>\r\n          <app-file-uploader\r\n            [allowedExtensions]=\"allowedExtensions\"\r\n            class=\"white-attached\"\r\n            [field]=\"data\"\r\n            name=\"attachment\"\r\n            [hasLabel]=\"false\"\r\n            [showActions]=\"true\"\r\n            [isReadOnly]=\"true\"\r\n          >\r\n          </app-file-uploader>\r\n        </td>\r\n        <td class=\"maxWidth px-2\">\r\n          <!--               (mouseover)=\"isSortable ? fileDescriptionAnchor.popover.open():$event.stopPropagation();\"-->\r\n          <a\r\n            class=\"fw-medium fc-black underline cursor-pointer fs-12\"\r\n            [hidden]=\"!data?.fileDescription\"\r\n            (click)=\"\r\n              $event.stopPropagation(); fileDescriptionAnchor.popover.open()\r\n            \"\r\n            [satPopoverAnchor]=\"fileDescriptionPopover\"\r\n            #fileDescriptionAnchor=\"satPopoverAnchor\"\r\n            [matTooltip]=\"data?.fileDescription\"\r\n          >\r\n            {{ data?.fileDescription | slice : 0 : 10 }}....\r\n          </a>\r\n          <!--          {{ i18n.translate('View') }}-->\r\n          <sat-popover\r\n            #fileDescriptionPopover\r\n            [anchor]=\"fileDescriptionAnchor\"\r\n            [hasBackdrop]=\"true\"\r\n            [restoreFocus]=\"false\"\r\n            verticalAlign=\"below\"\r\n            horizontalAlign=\"center\"\r\n          >\r\n            <div\r\n              class=\"default-popover p-3 fs-14 text-break view-note-popover\"\r\n            >\r\n              <bdi class=\"fc-black\">\r\n                {{ data?.fileDescription }}\r\n              </bdi>\r\n            </div>\r\n          </sat-popover>\r\n        </td>\r\n        <td class=\"maxWidth px-2\">\r\n          <!--               (mouseover)=\"isSortable ? commentsAnchor.popover.open():$event.stopPropagation();\"-->\r\n          <a\r\n            class=\"fw-medium fc-black underline cursor-pointer fs-12\"\r\n            [hidden]=\"!data?.attachmentcomment\"\r\n            (click)=\"$event.stopPropagation(); commentsAnchor.popover.open()\"\r\n            [satPopoverAnchor]=\"commentsPopover\"\r\n            [matTooltip]=\"data?.attachmentcomment\"\r\n            #commentsAnchor=\"satPopoverAnchor\"\r\n          >\r\n            {{ data?.attachmentcomment | slice : 0 : 10 }}...\r\n          </a>\r\n          <!--          {{ i18n.translate('View') }}-->\r\n          <sat-popover\r\n            #commentsPopover\r\n            [anchor]=\"commentsAnchor\"\r\n            [hasBackdrop]=\"true\"\r\n            [restoreFocus]=\"false\"\r\n            verticalAlign=\"below\"\r\n            horizontalAlign=\"center\"\r\n          >\r\n            <div\r\n              class=\"default-popover p-3 fs-14 text-break view-note-popover\"\r\n            >\r\n              <bdi class=\"fc-black\">\r\n                {{ data?.attachmentcomment }}\r\n              </bdi>\r\n            </div>\r\n          </sat-popover>\r\n        </td>\r\n       @if(!isReadOnly){\r\n        <td>\r\n          <div class=\"d-flex gap-2\">\r\n            <ds-button\r\n              square\r\n              icon\r\n              size=\"small\"\r\n              (click)=\"deleteAttachments(i, data)\"\r\n              class=\"icon-btn-shadow\"\r\n            >\r\n              <ds-icon icon=\"trash\" class=\"fs-20 fs-md-17 fc-red\"></ds-icon>\r\n            </ds-button>\r\n\r\n            <ds-button\r\n              square\r\n              icon\r\n              size=\"small\"\r\n              (click)=\"editRow(data, i)\"\r\n              class=\"icon-btn-shadow\"\r\n            >\r\n              <ds-icon icon=\"pen\" class=\"fs-20 fs-md-17 fc-purple\"></ds-icon>\r\n            </ds-button>\r\n          </div>\r\n        </td>\r\n       }\r\n      </tr>\r\n    </tbody>\r\n  </table>\r\n</div>\r\n }\r\n\r\n @if(!isReadOnly && attachments?.length && attachments?.length < attachmentsMax){\r\n  <div\r\n  class=\"text-center full mt-3\"\r\n>\r\n  <ds-button\r\n    shape=\"{{ attachments?.length ? 'outline' : '' }}\"\r\n    [ngClass]=\"{ 'full-add-btn w-100': attachments?.length }\"\r\n    (click)=\"addAttahment(); $event.stopPropagation()\"\r\n  >\r\n    <ds-icon slot=\"prefix\" icon=\"plus\" class=\"fs-22\"></ds-icon>\r\n    {{ i18n.translate(\"addAttachments\") }}\r\n  </ds-button>\r\n</div>\r\n }\r\n \r\n</div>\r\n", styles: ["::ng-deep .add-attachment-dialog{--popup-max-width: 500px;--popup-width: 100%}::ng-deep .view-note-popover{max-width:250px;max-height:300px;overflow:auto;--popover-bc: var(--black);color:var(--white);--popover-before-width: .6rem}::ng-deep .mat-tooltip{max-width:500px;background:#1d252d}:host ::ng-deep .table-responsive table{--th-bg: var(--white);--th-fc: var(--dark-gray)}:host ::ng-deep .white-attached ds-attachments::part(base){--file-bg: transparent}:host ::ng-deep .full-add-btn::part(base){--btn-min-width: 100%;--btn-bg-color: var(--light-gray);--btn-height: 70px;--btn-radius: 6px;border:1px dashed var(--dark-gray)}.file-uploader{--uploader-height: 150px;--uploader-width: 100%;--uploader-bg: var(--off-white);--uploader-border: 1px dashed var(--dark-gray);--uploader-radius: var(--box-radius);--uploader-padding: 1rem;height:var(--uploader-height);background-color:var(--uploader-bg);border:var(--uploader-border);border-radius:var(--uploader-radius);padding:var(--uploader-padding);text-align:center;cursor:pointer}.insideTableWidth{width:250px!important}.file-uploader-table{--uploader-height: 45PX;--uploader-width: 100%;--uploader-bg: var(--off-white);--uploader-border: 1px dashed var(--dark-gray);--uploader-radius: var(--box-radius);--uploader-padding: 0 1rem;height:var(--uploader-height);background-color:var(--uploader-bg);border:var(--uploader-border);border-radius:var(--uploader-radius);padding:var(--uploader-padding);text-align:center;cursor:pointer;DISPLAY:FLEX;ALIGN-ITEMS:CENTER;JUSTIFY-CONTENT:CENTER}.file-uploader-table-dev{DISPLAY:FLEX;ALIGN-ITEMS:CENTER;GAP:1REM}.file-uploader-table-svg{width:70%}.insideTableStyle{width:272px}.files-list{--file-item-width: 300px;display:grid;grid-template-columns:repeat(auto-fill,var(--file-item-width));grid-gap:.5rem}@media (max-width: 768px){.files-list{grid-template-columns:repeat(auto-fill,minmax(var(--file-item-width),1fr))}}.files-list .file-item-container .uploaded-file-actions{margin-inline-start:20px}.files-list .file-item-container .uploaded-file-actions .button__wrapper{font-size:15px}.files-list .file-item-container .file-item{--file-bg: var(--off-white);--file-radius: var(--box-radius);--icon-color: var(--purple);--icon-size: 2rem;--file-border: transparent;display:flex;align-items:center;background-color:var(--file-bg);border:1px solid var(--file-border);border-radius:var(--file-radius);padding:0 1rem;height:70px;gap:.75rem}.files-list .file-item-container .file-item.error{--file-bg: rgba(var(--rgb-red), 10%);--file-border: var(--red);--icon-color: var(--red)}.files-list .file-item-container .file-item .icon{color:var(--icon-color);font-size:var(--icon-size)}.files-list .file-item-container .file-item .file-action{display:flex;align-items:center;gap:.5rem}ds-attachments::part(base){--file-width: 250px}.file-item-container-actions{display:flex;align-items:center}.file-item-container-actions .uploaded-file-actions{display:flex;align-items:center;gap:10px;margin-inline-start:25px}.file-item-container-actions .uploaded-file-actions .button__wrapper{font-size:15px}::ng-deep .file-item .name-size{display:flex;flex-direction:column;justify-content:center;flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:120px}\n"] }]
+                        NgForOf,
+                        MatPaginator,
+                        MatTable,
+                        MatColumnDef,
+                        MatCell,
+                        MatCellDef,
+                        MatHeaderCellDef,
+                        MatHeaderCell,
+                        MatRow,
+                        MatHeaderRow,
+                        MatHeaderRowDef,
+                        MatRowDef
+                    ], standalone: true, template: "<div class=\"mt-2 p-0\">\r\n\r\n  @if (label) {\r\n    <div class=\"d-flex justify-content-between mb-1\">\r\n      <span class=\"form-label mb-0\">{{ label }}</span>\r\n    </div>\r\n  }\r\n\r\n  @if (!isReadOnly) {\r\n    <div style=\"text-align-last: end\">\r\n      @if (!required) {\r\n        <span class=\"fs-11 fc-dark-gray\">\r\n      {{ i18n.translate(\"Optional\") }}\r\n    </span>\r\n      }\r\n    </div>\r\n  }\r\n  @if (!attachments?.length && !isReadOnly) {\r\n    <section\r\n      [ngClass]=\"insideTable ? 'file-uploader-table' : 'file-uploader'\"\r\n      class=\"mb-2\"\r\n      [class.insideTableStyle]=\"insideTable\"\r\n      (click)=\"addAttachment(); $event.stopPropagation()\">\r\n      <div\r\n        [ngClass]=\"insideTable ? 'file-uploader-table-dev' : ''\"\r\n        class=\"file-uploader-input\">\r\n        <div class=\"icon mb-1\">\r\n          <svg\r\n            [ngClass]=\"insideTable ? 'file-uploader-table-svg' : ''\"\r\n            width=\"41\"\r\n            height=\"38\"\r\n            viewBox=\"0 0 41 38\"\r\n            fill=\"none\"\r\n            xmlns=\"http://www.w3.org/2000/svg\">\r\n            <path\r\n              d=\"M0 22.1947V20.6736C0.0971303 20.1019 0.070094 19.5141 0.276371 18.9533C1.28372 16.2086 3.21231 14.5023 6.0421 13.8094C6.70499 13.6472 6.68497 13.6632 6.69899 12.9843C6.73203 11.3321 6.99839 9.71992 7.62423 8.17986C8.86289 5.13678 10.9467 2.83969 13.8816 1.39175C17.168 -0.230424 20.5956 -0.450719 24.0553 0.81598C27.4929 2.07467 29.9622 4.41581 31.4802 7.74828C31.7786 8.40316 32.027 9.08307 32.1712 9.79202C32.2402 10.1315 32.4035 10.2566 32.7529 10.3107C36.7012 10.9165 39.3358 13.1255 40.6946 16.8735C40.9069 17.4603 40.9199 18.0731 40.9599 18.6829C40.9649 18.7601 40.9389 18.8442 41 18.9113V20.5124C40.9109 20.995 40.969 21.4937 40.8608 21.9734C40.5244 23.4614 39.8454 24.7821 38.8501 25.9297C37.4522 27.5418 35.7059 28.5882 33.6161 29.0519C32.791 29.2351 31.9499 29.2521 31.1117 29.2922C30.6571 29.3142 30.584 29.193 30.592 28.7484C30.6451 25.8446 29.802 23.2571 27.8624 21.0591C25.9979 18.9463 23.6597 17.7167 20.867 17.4012C18.8553 17.1739 16.9057 17.4593 15.0612 18.3395C11.8319 19.8816 9.81416 22.4069 8.96102 25.8696C8.74273 26.7538 8.68265 27.658 8.70568 28.5702C8.7217 29.2111 8.60254 29.3122 7.95968 29.2972C5.95098 29.2511 4.10551 28.7234 2.58146 27.3596C1.07644 26.0168 0.0680913 24.3996 0.0400537 22.3028C0.0400537 22.2607 0.0250336 22.2257 0 22.1937V22.1947Z\"\r\n              fill=\"#DEE0E2\"/>\r\n            <path\r\n              d=\"M29.0303 28.2632C29.0604 33.4031 24.8657 37.6187 19.6838 37.6548C14.5169 37.6908 10.2852 33.4952 10.2521 28.3042C10.2201 23.1403 14.4297 18.9126 19.6227 18.8946C24.8037 18.8766 28.9993 23.0542 29.0303 28.2632Z\"\r\n              fill=\"#8E9AA0\"/>\r\n            <path\r\n              d=\"M20.5573 25.2644C20.4622 25.4477 20.5012 25.5939 20.5012 25.734C20.4982 28.2154 20.5002 30.6957 20.4982 33.177C20.4982 33.8099 20.2339 34.1704 19.7462 34.2234C19.2645 34.2765 18.88 33.9831 18.8169 33.5025C18.7959 33.3443 18.7969 33.183 18.7969 33.0238C18.7959 30.5826 18.7969 28.1423 18.7969 25.701C18.7969 25.5728 18.7969 25.4447 18.7969 25.2003C18.1971 25.8031 17.6774 26.3288 17.1527 26.8505C17.0115 26.9907 16.8683 27.1349 16.7061 27.2471C16.3566 27.4864 15.9341 27.4413 15.6457 27.154C15.3643 26.8746 15.3203 26.442 15.5486 26.0925C15.6207 25.9824 15.7128 25.8832 15.8069 25.7891C16.8613 24.7307 17.9167 23.6733 18.9732 22.6179C19.4017 22.1893 19.8784 22.1763 20.3039 22.5988C21.3914 23.6803 22.4739 24.7667 23.5533 25.8572C23.9809 26.2898 24.0129 26.8065 23.6534 27.167C23.299 27.5214 22.7753 27.4844 22.3437 27.0568C21.7499 26.47 21.1661 25.8732 20.5603 25.2644H20.5573Z\"\r\n              fill=\"#F9F9F9\"/>\r\n          </svg>\r\n        </div>\r\n        <div class=\"f-14 fc-black fw-normal\">\r\n          <span class=\"fc-coral fw-medium\">{{ i18n.translate(\"browse\") }}</span>\r\n        </div>\r\n        <div class=\"fs-10 fc-dark-gray\">\r\n          {{ i18n.translate(\"addMultiAttachments\") }}\r\n        </div>\r\n      </div>\r\n    </section>\r\n  }\r\n\r\n  <!--  <ds-message class=\"full\" *ngIf=\"!attachments?.length && !isReadOnly\" label=\"{{i18n.translate('NoAttachments')}}\"></ds-message>-->\r\n  @if (attachments?.length) {\r\n    <div\r\n      class=\"table-responsive full\"\r\n      cdkDropList\r\n      [cdkDropListData]=\"attachments\"\r\n      (cdkDropListDropped)=\"drop($event)\"\r\n    >\r\n\r\n      <table mat-table [dataSource]=\"dataSource\">\r\n\r\n        <!-- index Column -->\r\n        <ng-container matColumnDef=\"index\">\r\n          <th mat-header-cell *matHeaderCellDef>\r\n            <ds-button\r\n              [matTooltip]=\"i18n.translate('downloadAll')\"\r\n              square icon size=\"small\"\r\n              (click)=\"downloadAllAttachments($event)\"\r\n              class=\"icon-btn-shadow\">\r\n              @if (loading) {\r\n                <ds-icon class=\"sfi sfi-spinner d-inline-block spin fc-coral fs-30-imp\"></ds-icon>\r\n              } @else {\r\n                <ds-icon\r\n                  icon=\"download\"\r\n                  class=\"fs-20 fs-md-17 fc-purple\"></ds-icon>\r\n              }\r\n            </ds-button>\r\n          </th>\r\n          <td mat-cell *matCellDef=\"let element; let i = index\"> {{ i+1 + pageSize*(pageNumber) }}</td>\r\n        </ng-container>\r\n\r\n        <!-- Name Column -->\r\n        <ng-container matColumnDef=\"file\">\r\n          <th mat-header-cell *matHeaderCellDef> {{ i18n.translate(\"FileName\") }}</th>\r\n          <td mat-cell *matCellDef=\"let element\">\r\n            <app-file-uploader\r\n              [allowedExtensions]=\"allowedExtensions\"\r\n              [displayedFiles]=\"[element]\"\r\n              name=\"attachment\"\r\n              [showActions]=\"true\"\r\n              [isReadOnly]=\"true\"\r\n              [multiple]=\"true\">\r\n            </app-file-uploader>\r\n          </td>\r\n        </ng-container>\r\n\r\n        <!-- description Column -->\r\n        <ng-container matColumnDef=\"description\">\r\n          <th mat-header-cell *matHeaderCellDef> {{ i18n.translate(\"FileDescription\") }}</th>\r\n          <td mat-cell *matCellDef=\"let element\">\r\n            <a\r\n              class=\"fw-medium fc-black underline cursor-pointer fs-12\"\r\n              [hidden]=\"!element?.['fileDescription']\"\r\n              (click)=\"$event.stopPropagation(); fileDescriptionAnchor.popover.open()\"\r\n              [satPopoverAnchor]=\"fileDescriptionPopover\"\r\n              #fileDescriptionAnchor=\"satPopoverAnchor\"\r\n              [matTooltip]=\"element?.['fileDescription']\">\r\n              {{ element?.['fileDescription']?.length > 10 ? (element?.['fileDescription'] | slice : 0 : 10) + '....' : element?.['fileDescription'] }}\r\n            </a>\r\n            <sat-popover\r\n              #fileDescriptionPopover\r\n              [anchor]=\"fileDescriptionAnchor\"\r\n              [hasBackdrop]=\"true\"\r\n              [restoreFocus]=\"false\"\r\n              verticalAlign=\"below\"\r\n              horizontalAlign=\"center\"\r\n            >\r\n              <div class=\"default-popover p-3 fs-14 text-break view-note-popover\">\r\n                <bdi class=\"fc-black\">\r\n                  {{ element?.['fileDescription'] }}\r\n                </bdi>\r\n              </div>\r\n            </sat-popover>\r\n          </td>\r\n        </ng-container>\r\n\r\n        <!-- comment Column -->\r\n        <ng-container matColumnDef=\"comment\">\r\n          <th mat-header-cell *matHeaderCellDef> {{ i18n.translate(\"comment\") }}</th>\r\n          <td mat-cell *matCellDef=\"let element\">\r\n            <a\r\n              class=\"fw-medium fc-black underline cursor-pointer fs-12\"\r\n              [hidden]=\"!element?.['attachmentcomment']\"\r\n              (click)=\"$event.stopPropagation(); commentsAnchor.popover.open()\"\r\n              [satPopoverAnchor]=\"commentsPopover\"\r\n              [matTooltip]=\"element?.['attachmentcomment']\"\r\n              #commentsAnchor=\"satPopoverAnchor\">\r\n              {{ element?.['attachmentcomment'] | slice : 0 : 10 }}...\r\n            </a>\r\n            <sat-popover\r\n              #commentsPopover\r\n              [anchor]=\"commentsAnchor\"\r\n              [hasBackdrop]=\"true\"\r\n              [restoreFocus]=\"false\"\r\n              verticalAlign=\"below\"\r\n              horizontalAlign=\"center\">\r\n              <div class=\"default-popover p-3 fs-14 text-break view-note-popover\">\r\n                <bdi class=\"fc-black\">\r\n                  {{ element?.['attachmentcomment'] }}\r\n                </bdi>\r\n              </div>\r\n            </sat-popover>\r\n          </td>\r\n        </ng-container>\r\n\r\n        <ng-container matColumnDef=\"actions\">\r\n          <th mat-header-cell *matHeaderCellDef></th>\r\n          <td mat-cell *matCellDef=\"let element; let i = index\">\r\n            @if (!isReadOnly) {\r\n              <td>\r\n                <div class=\"d-flex gap-2\">\r\n                  <ds-button\r\n                    square\r\n                    icon\r\n                    size=\"small\"\r\n                    (click)=\"deleteAttachments(i, element)\"\r\n                    class=\"icon-btn-shadow\">\r\n                    <ds-icon icon=\"trash\" class=\"fs-20 fs-md-17 fc-red\"></ds-icon>\r\n                  </ds-button>\r\n\r\n                  <ds-button\r\n                    square\r\n                    icon\r\n                    size=\"small\"\r\n                    (click)=\"editRow(element, i)\"\r\n                    class=\"icon-btn-shadow\">\r\n                    <ds-icon icon=\"pen\" class=\"fs-20 fs-md-17 fc-purple\"></ds-icon>\r\n                  </ds-button>\r\n                </div>\r\n              </td>\r\n            }\r\n          </td>\r\n        </ng-container>\r\n\r\n        <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n        <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\r\n      </table>\r\n\r\n      <mat-paginator\r\n        #paginator\r\n        [pageSizeOptions]=\"[5]\"\r\n        (page)=\"onPaginateChange($event)\"\r\n        [length]=\"attachments.length\"\r\n        [pageSize]=\"pageSize\"\r\n        showFirstLastButtons></mat-paginator>\r\n\r\n    </div>\r\n  }\r\n\r\n  @if (!isReadOnly && attachments?.length && attachments?.length < attachmentsMax) {\r\n    <div class=\"text-center full mt-3\">\r\n      <ds-button\r\n        shape=\"{{ attachments?.length ? 'outline' : '' }}\"\r\n        [ngClass]=\"{ 'full-add-btn w-100': attachments?.length }\"\r\n        (click)=\"addAttachment(); $event.stopPropagation()\">\r\n        <ds-icon slot=\"prefix\" icon=\"plus\" class=\"fs-22\"></ds-icon>\r\n        {{ i18n.translate(\"addAttachments\") }}\r\n      </ds-button>\r\n    </div>\r\n  }\r\n\r\n</div>\r\n", styles: ["::ng-deep .add-attachment-dialog{--popup-max-width: 500px;--popup-width: 100%}::ng-deep .view-note-popover{max-width:250px;max-height:300px;overflow:auto;--popover-bc: var(--black);color:var(--white);--popover-before-width: .6rem}::ng-deep .mat-tooltip{max-width:500px;background:#1d252d}:host ::ng-deep .table-responsive table{--th-bg: var(--white);--th-fc: var(--dark-gray)}:host ::ng-deep .white-attached ds-attachments::part(base){--file-bg: transparent}:host ::ng-deep .full-add-btn::part(base){--btn-min-width: 100%;--btn-bg-color: var(--light-gray);--btn-height: 70px;--btn-radius: 6px;border:1px dashed var(--dark-gray)}.file-uploader{--uploader-height: 150px;--uploader-width: 100%;--uploader-bg: var(--off-white);--uploader-border: 1px dashed var(--dark-gray);--uploader-radius: var(--box-radius);--uploader-padding: 1rem;height:var(--uploader-height);background-color:var(--uploader-bg);border:var(--uploader-border);border-radius:var(--uploader-radius);padding:var(--uploader-padding);text-align:center;cursor:pointer}.insideTableWidth{width:250px!important}.file-uploader-table{--uploader-height: 45PX;--uploader-width: 100%;--uploader-bg: var(--off-white);--uploader-border: 1px dashed var(--dark-gray);--uploader-radius: var(--box-radius);--uploader-padding: 0 1rem;height:var(--uploader-height);background-color:var(--uploader-bg);border:var(--uploader-border);border-radius:var(--uploader-radius);padding:var(--uploader-padding);text-align:center;cursor:pointer;DISPLAY:FLEX;ALIGN-ITEMS:CENTER;JUSTIFY-CONTENT:CENTER}.file-uploader-table-dev{DISPLAY:FLEX;ALIGN-ITEMS:CENTER;GAP:1REM}.file-uploader-table-svg{width:70%}.insideTableStyle{width:272px}.files-list{--file-item-width: 300px;display:grid;grid-template-columns:repeat(auto-fill,var(--file-item-width));grid-gap:.5rem}@media (max-width: 768px){.files-list{grid-template-columns:repeat(auto-fill,minmax(var(--file-item-width),1fr))}}.files-list .file-item-container .uploaded-file-actions{margin-inline-start:20px}.files-list .file-item-container .uploaded-file-actions .button__wrapper{font-size:15px}.files-list .file-item-container .file-item{--file-bg: var(--off-white);--file-radius: var(--box-radius);--icon-color: var(--purple);--icon-size: 2rem;--file-border: transparent;display:flex;align-items:center;background-color:var(--file-bg);border:1px solid var(--file-border);border-radius:var(--file-radius);padding:0 1rem;height:70px;gap:.75rem}.files-list .file-item-container .file-item.error{--file-bg: rgba(var(--rgb-red), 10%);--file-border: var(--red);--icon-color: var(--red)}.files-list .file-item-container .file-item .icon{color:var(--icon-color);font-size:var(--icon-size)}.files-list .file-item-container .file-item .file-action{display:flex;align-items:center;gap:.5rem}ds-attachments::part(base){--file-width: 250px}.file-item-container-actions{display:flex;align-items:center}.file-item-container-actions .uploaded-file-actions{display:flex;align-items:center;gap:10px;margin-inline-start:25px}.file-item-container-actions .uploaded-file-actions .button__wrapper{font-size:15px}::ng-deep .file-item .name-size{display:flex;flex-direction:column;justify-content:center;flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:120px}\n"] }]
         }], propDecorators: { className: [{
                 type: Input
-            }], attachments: [{
-                type: Input
-            }], label: [{
-                type: Input
             }], attachmentsMax: [{
                 type: Input
             }], isSortable: [{
@@ -4506,99 +4495,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                 type: Input
             }], isRequired: [{
                 type: Input
-            }], placeholderElement: [{
-                type: ViewChild,
-                args: ['placeholder']
-            }] } });
-
-class AttachmentSectionDataComponent extends ControlValueAccessorDirective {
-    popupData = {};
-    popupDataOrg = {};
-    uploading;
-    editMode;
-    hasColumnBreak;
-    section;
-    dialogData;
-    dialogRef;
-    // ngOnInit() {
-    /*if (this.coreStateMachineService?.attachmentListData) {
-      this.popupData = this.coreStateMachineService.attachmentListData
-      this.popupDataOrg = Object.assign({} , this.popupData)   ///// ibrahim solve isse related to discard data whenn click close
-      this.editMode = true;
-    }
-    if(this.dialogData){
-      console.log(this.dialogData);
-
-    }*/
-    // }
-    close() {
-        this.dialogRef.close(this.popupDataOrg);
-    }
-    handleEmitValue(data, fieldName) {
-        this.popupData[fieldName] = data;
-    }
-    handleAttachmentEmitValue(data) {
-        this.popupData = {
-            "fileContents": data?.fileContents,
-            "fileName": data?.fileName,
-            "mimeType": data?.mimeType,
-            "fileDescription": this.popupData?.fileDescription,
-            "attachmentcomment": this.popupData?.attachmentcomment,
-            "fileComments": this.popupData?.attachmentcomment,
-        };
-    }
-    addAttachments() {
-        const data = {
-            "fileDescription": this.popupData?.fileDescription,
-            "attachmentcomment": this.popupData?.attachmentcomment,
-            "fileComments": this.popupData?.attachmentcomment,
-            "fileName": this.popupData?.fileName,
-            "mimeType": this.popupData?.mimeType,
-            "fileContents": this.popupData?.fileContents,
-        };
-        this.uploading = true;
-        /*this.coreStateMachineService.dispatch('getAttachments', data)
-          .then((Response: any) => {
-            this.uploading = false;
-            if (Response) {
-              this.coreStateMachineService.attachmentListData = null
-              const newObj = {
-                "fileDescription": this.popupData?.fileDescription,
-                "attachmentcomment": this.popupData?.attachmentcomment,
-                "fileComments": this.popupData?.attachmentcomment,
-                "fileName": this.popupData?.fileName,
-                "attachmentId": Response.attachment.attachmentId,
-                "mimeType": this.popupData?.mimeType
-              }
-              this.dialogRef.close(newObj);
-            }
-          });*/
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AttachmentSectionDataComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: AttachmentSectionDataComponent, isStandalone: true, selector: "app-add-attachment-section", inputs: { hasColumnBreak: "hasColumnBreak", section: "section" }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                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\">{{i18n.translate('addAttachments')}}</h3>\r\n    <ds-button (click)=\"close()\" icon>\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      <!-- add [callApi]=\"true\"  input mobile issue not able to download it by base 64 -->\r\n\r\n      <app-file-uploader class=\"section-item full\" [field]=\"popupData\" name=\"file\" [attachments]=\"dialogData?.attachments\"\r\n        [labelTextReadMode]=\"i18n.translate('Attachment')\" [labelTextWriteMode]=\"i18n.translate('Attachment')\"\r\n        [hasColumnBreak]=\"false\" [label]=\"i18n.translate('Attachment')\" [required]=\"true\" [multiple]=\"dialogData?.multiple\" [allowedExtensions]=\"dialogData?.data\"\r\n        [isReadOnly]=\"section?.header?.readOnly\" [showActions]=\"false\" (emitedValue)=\"handleAttachmentEmitValue($event)\"\r\n        >\r\n      </app-file-uploader>\r\n\r\n      <app-textarea class=\"section-item d-block mt-4\" [section]=\"section\" [field]=\"popupData?.fileDescription\" name=\"fileDescription\"\r\n        [labelTextReadMode]=\"i18n.translate('description')\" [labelTextWriteMode]=\"i18n.translate('description')\"\r\n        [hasColumnBreak]=\"false\" (emitedValue)=\"handleEmitValue($event,'fileDescription')\"\r\n        [label]=\"i18n.translate('description')\" [required]=\"dialogData.isRequired\" [minLength]='1' [maxLength]='500'\r\n        [isReadOnly]=\"section?.header?.readOnly\" [errorMessage]=\"i18n.translate('lenghtMin1Max500')\">\r\n      </app-textarea>\r\n\r\n      <app-textarea class=\"section-item\" [section]=\"section\" [field]=\"popupData?.attachmentcomment\" name=\"attachmentcomment\"\r\n        [labelTextReadMode]=\"i18n.translate('comments')\" [labelTextWriteMode]=\"i18n.translate('comments')\"\r\n        [hasColumnBreak]=\"false\" (emitedValue)=\"handleEmitValue($event,'attachmentcomment')\" [label]=\"i18n.translate('comments')\"\r\n        [required]=\"false\" [minLength]='1' [maxLength]='500' [isReadOnly]=\"section?.header?.readOnly\"\r\n        [errorMessage]=\"i18n.translate('lenghtMin1Max500')\">\r\n      </app-textarea>\r\n\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\" (click)=\"close()\" [disabled]=\"(uploading)\" color=\"red\">{{i18n.translate('cancel')}}\r\n    </ds-button>\r\n    <ds-button (click)=\"addAttachments()\" [loading]=\"uploading\"\r\n      [disabled]=\"(!(popupData?.fileContents || popupData?.attachmentId ) ||( dialogData.isRequired && !popupData?.fileDescription )|| uploading)\">\r\n      @if(!editMode){\r\n      <span>{{i18n.translate('add')}}</span>\r\n      }\r\n      @if(editMode){\r\n      <span>{{i18n.translate('edit')}}</span>\r\n      }\r\n\r\n    </ds-button>\r\n  </mat-dialog-actions>\r\n\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", "tooltip", "attachments", "optional", "display", "attachType", "error", "displayedFiles", "getDataFromTemplate", "allowFileContentsWithMultiAttachments", "accept", "signType", "showSignButton", "printType", "showPrintButton", "downloadType", "showDownloadButton", "preventFileContents", "maxSize"], outputs: ["selectedTemplateAttachment", "addSignatureClicked", "printActionClicked", "downloadActionClicked"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AttachmentSectionDataComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-add-attachment-section', standalone: true, schemas: [CUSTOM_ELEMENTS_SCHEMA], imports: [TextareaComponent, MatDialogContent, DocsUploaderComponent, MatDialogActions, NgIf, MatDialogModule], providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => AttachmentSectionDataComponent),
-                            multi: true,
-                        },
-                    ], template: "<div class=\"popup-container\">\r\n  <div class=\"d-flex align-items-center justify-content-end\" mat-dialog-title>\r\n    <h3 class=\"mb-0 font-16 fw-medium\">{{i18n.translate('addAttachments')}}</h3>\r\n    <ds-button (click)=\"close()\" icon>\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      <!-- add [callApi]=\"true\"  input mobile issue not able to download it by base 64 -->\r\n\r\n      <app-file-uploader class=\"section-item full\" [field]=\"popupData\" name=\"file\" [attachments]=\"dialogData?.attachments\"\r\n        [labelTextReadMode]=\"i18n.translate('Attachment')\" [labelTextWriteMode]=\"i18n.translate('Attachment')\"\r\n        [hasColumnBreak]=\"false\" [label]=\"i18n.translate('Attachment')\" [required]=\"true\" [multiple]=\"dialogData?.multiple\" [allowedExtensions]=\"dialogData?.data\"\r\n        [isReadOnly]=\"section?.header?.readOnly\" [showActions]=\"false\" (emitedValue)=\"handleAttachmentEmitValue($event)\"\r\n        >\r\n      </app-file-uploader>\r\n\r\n      <app-textarea class=\"section-item d-block mt-4\" [section]=\"section\" [field]=\"popupData?.fileDescription\" name=\"fileDescription\"\r\n        [labelTextReadMode]=\"i18n.translate('description')\" [labelTextWriteMode]=\"i18n.translate('description')\"\r\n        [hasColumnBreak]=\"false\" (emitedValue)=\"handleEmitValue($event,'fileDescription')\"\r\n        [label]=\"i18n.translate('description')\" [required]=\"dialogData.isRequired\" [minLength]='1' [maxLength]='500'\r\n        [isReadOnly]=\"section?.header?.readOnly\" [errorMessage]=\"i18n.translate('lenghtMin1Max500')\">\r\n      </app-textarea>\r\n\r\n      <app-textarea class=\"section-item\" [section]=\"section\" [field]=\"popupData?.attachmentcomment\" name=\"attachmentcomment\"\r\n        [labelTextReadMode]=\"i18n.translate('comments')\" [labelTextWriteMode]=\"i18n.translate('comments')\"\r\n        [hasColumnBreak]=\"false\" (emitedValue)=\"handleEmitValue($event,'attachmentcomment')\" [label]=\"i18n.translate('comments')\"\r\n        [required]=\"false\" [minLength]='1' [maxLength]='500' [isReadOnly]=\"section?.header?.readOnly\"\r\n        [errorMessage]=\"i18n.translate('lenghtMin1Max500')\">\r\n      </app-textarea>\r\n\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\" (click)=\"close()\" [disabled]=\"(uploading)\" color=\"red\">{{i18n.translate('cancel')}}\r\n    </ds-button>\r\n    <ds-button (click)=\"addAttachments()\" [loading]=\"uploading\"\r\n      [disabled]=\"(!(popupData?.fileContents || popupData?.attachmentId ) ||( dialogData.isRequired && !popupData?.fileDescription )|| uploading)\">\r\n      @if(!editMode){\r\n      <span>{{i18n.translate('add')}}</span>\r\n      }\r\n      @if(editMode){\r\n      <span>{{i18n.translate('edit')}}</span>\r\n      }\r\n\r\n    </ds-button>\r\n  </mat-dialog-actions>\r\n\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"] }]
-        }], propDecorators: { hasColumnBreak: [{
+            }], descriptionRequired: [{
                 type: Input
-            }], section: [{
+            }], commentsRequired: [{
                 type: Input
-            }], dialogData: [{
-                type: Inject,
-                args: [MAT_DIALOG_DATA]
+            }], allowedExtensions: [{
+                type: Input
+            }], emitedValue: [{
+                type: Output
+            }], paginator: [{
+                type: ViewChild,
+                args: ['paginator']
             }] } });
 
 /* eslint-disable @typescript-eslint/no-empty-function */
@@ -4613,7 +4520,7 @@ class RadioComponent extends ControlValueAccessorDirective {
                 useExisting: forwardRef(() => RadioComponent),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "@if(!isReadOnly){\r\n  @if(label){\r\n    <div class=\"d-flex justify-content-between mb-1\">\r\n      <span class=\"form-label mb-0\">{{ label }}</span> @if(!required){<span\r\n        class=\"fs-11 fc-dark-gray\"\r\n        >{{ i18n.translate(\"Optional\") }}</span\r\n      >}\r\n    </div>\r\n    }\r\n    <mat-radio-group\r\n      aria-label=\"Select an option\"\r\n      [formControl]=\"control\"\r\n      id=\"{{ name }}{{ randomID }}\"\r\n      name=\"{{ name }}{{ randomID }}\"\r\n    >\r\n      @for(option of options; track $index){\r\n      <mat-radio-button\r\n        class=\"m-3\"\r\n        [disabled]=\"isReadOnly || isDisabled\"\r\n        [value]=\"option\"\r\n        [checked]=\"option === control.value\"\r\n      >\r\n        <span class=\"fs-12 fw-medium fc-onyx\">\r\n          {{ option }}\r\n        </span>\r\n      </mat-radio-button>\r\n      }\r\n    </mat-radio-group>\r\n    \r\n}@else {\r\n  <ng-container>\r\n    <app-info-item\r\n      class=\"info-item w-100\"\r\n      [insideTable]=\"insideTable\"\r\n      [label]=\"label\"\r\n      [value]=\"control.value\"\r\n      [hasLabel]=\"!!label\"\r\n    >\r\n    </app-info-item>\r\n  </ng-container>\r\n}\r\n", styles: [""], dependencies: [{ kind: "component", type: MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "directive", type: MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: InfoItemComponent, selector: "app-info-item", inputs: ["label", "value", "name", "type", "dateType", "multiple", "insideTable", "hasLabel", "arrayList", "actionType", "download"] }] });
+        ], usesInheritance: true, ngImport: i0, template: "@if(!isReadOnly){\r\n  @if(label){\r\n    <div class=\"d-flex justify-content-between mb-1\">\r\n      <span class=\"form-label mb-0\">{{ label }}</span> @if(!required){<span\r\n        class=\"fs-11 fc-dark-gray\"\r\n        >{{ i18n.translate(\"Optional\") }}</span\r\n      >}\r\n    </div>\r\n    }\r\n    <mat-radio-group\r\n      aria-label=\"Select an option\"\r\n      [formControl]=\"control\"\r\n      id=\"{{ name }}{{ randomID }}\"\r\n      name=\"{{ name }}{{ randomID }}\"\r\n    >\r\n      @for(option of options; track $index){\r\n      <mat-radio-button\r\n        class=\"m-3\"\r\n        [disabled]=\"isReadOnly || isDisabled\"\r\n        [value]=\"option\"\r\n        [checked]=\"option === control.value\"\r\n      >\r\n        <span class=\"fs-12 fw-medium fc-onyx\">\r\n          {{ option }}\r\n        </span>\r\n      </mat-radio-button>\r\n      }\r\n    </mat-radio-group>\r\n\r\n}@else {\r\n  <ng-container>\r\n    <app-info-item\r\n      class=\"info-item w-100\"\r\n      [insideTable]=\"insideTable\"\r\n      [label]=\"label\"\r\n      [type]=\"'toggleBtn'\"\r\n      [value]=\"control.value\"\r\n      [hasLabel]=\"!!label\"\r\n    >\r\n    </app-info-item>\r\n  </ng-container>\r\n}\r\n", styles: [""], dependencies: [{ kind: "component", type: MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "directive", type: MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: InfoItemComponent, selector: "app-info-item", inputs: ["label", "value", "name", "type", "dateType", "multiple", "insideTable", "hasLabel", "arrayList", "actionType", "download"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: RadioComponent, decorators: [{
             type: Component,
@@ -4622,14 +4529,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                         MatRadioGroup,
                         FormsModule,
                         ReactiveFormsModule,
-                        InfoItemComponent
+                        InfoItemComponent,
+                        NgSwitchCase
                     ], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => RadioComponent),
                             multi: true,
                         },
-                    ], template: "@if(!isReadOnly){\r\n  @if(label){\r\n    <div class=\"d-flex justify-content-between mb-1\">\r\n      <span class=\"form-label mb-0\">{{ label }}</span> @if(!required){<span\r\n        class=\"fs-11 fc-dark-gray\"\r\n        >{{ i18n.translate(\"Optional\") }}</span\r\n      >}\r\n    </div>\r\n    }\r\n    <mat-radio-group\r\n      aria-label=\"Select an option\"\r\n      [formControl]=\"control\"\r\n      id=\"{{ name }}{{ randomID }}\"\r\n      name=\"{{ name }}{{ randomID }}\"\r\n    >\r\n      @for(option of options; track $index){\r\n      <mat-radio-button\r\n        class=\"m-3\"\r\n        [disabled]=\"isReadOnly || isDisabled\"\r\n        [value]=\"option\"\r\n        [checked]=\"option === control.value\"\r\n      >\r\n        <span class=\"fs-12 fw-medium fc-onyx\">\r\n          {{ option }}\r\n        </span>\r\n      </mat-radio-button>\r\n      }\r\n    </mat-radio-group>\r\n    \r\n}@else {\r\n  <ng-container>\r\n    <app-info-item\r\n      class=\"info-item w-100\"\r\n      [insideTable]=\"insideTable\"\r\n      [label]=\"label\"\r\n      [value]=\"control.value\"\r\n      [hasLabel]=\"!!label\"\r\n    >\r\n    </app-info-item>\r\n  </ng-container>\r\n}\r\n" }]
+                    ], template: "@if(!isReadOnly){\r\n  @if(label){\r\n    <div class=\"d-flex justify-content-between mb-1\">\r\n      <span class=\"form-label mb-0\">{{ label }}</span> @if(!required){<span\r\n        class=\"fs-11 fc-dark-gray\"\r\n        >{{ i18n.translate(\"Optional\") }}</span\r\n      >}\r\n    </div>\r\n    }\r\n    <mat-radio-group\r\n      aria-label=\"Select an option\"\r\n      [formControl]=\"control\"\r\n      id=\"{{ name }}{{ randomID }}\"\r\n      name=\"{{ name }}{{ randomID }}\"\r\n    >\r\n      @for(option of options; track $index){\r\n      <mat-radio-button\r\n        class=\"m-3\"\r\n        [disabled]=\"isReadOnly || isDisabled\"\r\n        [value]=\"option\"\r\n        [checked]=\"option === control.value\"\r\n      >\r\n        <span class=\"fs-12 fw-medium fc-onyx\">\r\n          {{ option }}\r\n        </span>\r\n      </mat-radio-button>\r\n      }\r\n    </mat-radio-group>\r\n\r\n}@else {\r\n  <ng-container>\r\n    <app-info-item\r\n      class=\"info-item w-100\"\r\n      [insideTable]=\"insideTable\"\r\n      [label]=\"label\"\r\n      [type]=\"'toggleBtn'\"\r\n      [value]=\"control.value\"\r\n      [hasLabel]=\"!!label\"\r\n    >\r\n    </app-info-item>\r\n  </ng-container>\r\n}\r\n" }]
         }], propDecorators: { options: [{
                 type: Input
             }] } });
@@ -4731,7 +4639,7 @@ class ApprovalsWorkflowComponent {
         this.coreService.approvals = JSON.stringify(this.approvals);
         this.sidenavService.publish('open', ApprovalsComponent);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ApprovalsWorkflowComponent, deps: [{ token: CoreI18nService }, { token: SidenavService }, { token: CoreService }, { token: i3.ToastrService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ApprovalsWorkflowComponent, deps: [{ token: CoreI18nService }, { token: SidenavService }, { token: CoreService }, { token: i2$1.ToastrService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: ApprovalsWorkflowComponent, isStandalone: true, selector: "lib-approvals-workflow", inputs: { section: "section", form: "form" }, ngImport: i0, template: "<ds-button\r\n  color=\"white\" shape=\"text\" square size=\"small\"\r\n  (click)=\"getApproves()\">\r\n  <slot name=\"prefix\">\r\n    @if (loading) {\r\n      <ds-icon class=\"sfi sfi-spinner d-inline-block spin fc-coral fs-30-imp\"></ds-icon>\r\n    } @else {\r\n      <ds-icon icon=\"workflow\" class=\"fs-24\"></ds-icon>\r\n    }\r\n  </slot>\r\n</ds-button>\r\n", styles: ["::ng-deep .sat-popover-container.sat-popover-before .default-popover:before{display:none}\n"], dependencies: [{ kind: "ngmodule", type: SatPopoverModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ApprovalsWorkflowComponent, decorators: [{
@@ -4740,7 +4648,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                         SatPopoverModule,
                         NgIf
                     ], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<ds-button\r\n  color=\"white\" shape=\"text\" square size=\"small\"\r\n  (click)=\"getApproves()\">\r\n  <slot name=\"prefix\">\r\n    @if (loading) {\r\n      <ds-icon class=\"sfi sfi-spinner d-inline-block spin fc-coral fs-30-imp\"></ds-icon>\r\n    } @else {\r\n      <ds-icon icon=\"workflow\" class=\"fs-24\"></ds-icon>\r\n    }\r\n  </slot>\r\n</ds-button>\r\n", styles: ["::ng-deep .sat-popover-container.sat-popover-before .default-popover:before{display:none}\n"] }]
-        }], ctorParameters: () => [{ type: CoreI18nService }, { type: SidenavService }, { type: CoreService }, { type: i3.ToastrService }], propDecorators: { section: [{
+        }], ctorParameters: () => [{ type: CoreI18nService }, { type: SidenavService }, { type: CoreService }, { type: i2$1.ToastrService }], propDecorators: { section: [{
                 type: Input
             }], form: [{
                 type: Input
@@ -4753,7 +4661,6 @@ class ActionButtonsComponent {
     dialog;
     toasterService;
     cdRef;
-    sidenavService;
     lovOptions;
     lovType;
     fieldsForm;
@@ -4769,14 +4676,13 @@ class ActionButtonsComponent {
         'SUBMIT': false
     };
     submittingForm;
-    constructor(i18n, actionStateService, coreService, dialog, toasterService, cdRef, sidenavService) {
+    constructor(i18n, actionStateService, coreService, dialog, toasterService, cdRef) {
         this.i18n = i18n;
         this.actionStateService = actionStateService;
         this.coreService = coreService;
         this.dialog = dialog;
         this.toasterService = toasterService;
         this.cdRef = cdRef;
-        this.sidenavService = sidenavService;
         this.actionStateService.actionStates$.subscribe(states => this.actionStates = states);
     }
     ngAfterViewInit() {
@@ -4839,7 +4745,7 @@ class ActionButtonsComponent {
         }
         return '';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ActionButtonsComponent, deps: [{ token: CoreI18nService }, { token: ActionStateService }, { token: CoreService }, { token: i1$1.MatDialog }, { token: i3.ToastrService }, { token: i0.ChangeDetectorRef }, { token: SidenavService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ActionButtonsComponent, deps: [{ token: CoreI18nService }, { token: ActionStateService }, { token: CoreService }, { token: i5.MatDialog }, { token: i2$1.ToastrService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: ActionButtonsComponent, isStandalone: true, selector: "lib-action-buttons", inputs: { lovOptions: "lovOptions", lovType: "lovType", fieldsForm: "fieldsForm", form: "form", section: "section", sections: "sections", showApprovalCycle: "showApprovalCycle", customCall: "customCall" }, outputs: { resetFormEmit: "resetFormEmit", customCallEmit: "customCallEmit" }, ngImport: i0, template: "<div class=\"mt-4\">\r\n  @if (lovType === 'button') {\r\n    <div class=\"d-flex align-items-center gap-3\">\r\n      <ds-button shape=\"text\" color=\"red\" (click)=\"resetForm()\">\r\n        <span class=\"fs-16 fw-medium\">{{ i18n.translate('reset') }}</span>\r\n      </ds-button>\r\n      @if (form?.sections?.length == 1 && showApprovalCycle) {\r\n        <lib-approvals-workflow [section]=\"section\" [form]=\"form\"></lib-approvals-workflow>\r\n      }\r\n      <div class=\"d-flex flex-wrap align-items-center flex-grow-1 flex-row-reverse gap-3\">\r\n        @for (item of lovOptions; track $index) {\r\n          <ds-button\r\n            loading=\"{{isSubmitting[item.value]}}\"\r\n            [ngClass]=\"{'disabled': !actionStates[item.value] || submittingForm}\"\r\n            shape=\"{{ buttonShape(item) }}\"\r\n            color=\"{{ buttonColor(item) }}\"\r\n            (click)=\"onSubmit(item?.value)\">\r\n            {{ item?.['description'] }}\r\n          </ds-button>\r\n        }\r\n      </div>\r\n    </div>\r\n  } @else {\r\n    <div class=\"d-flex align-items-center gap-3\">\r\n      <ds-button shape=\"text\" color=\"red\" (click)=\"resetForm()\">\r\n        <span class=\"fs-16 fw-medium\">{{ i18n.translate('reset') }}</span>\r\n      </ds-button>\r\n      @if (form?.sections?.length == 1 && showApprovalCycle) {\r\n        <lib-approvals-workflow [section]=\"section\" [form]=\"form\"></lib-approvals-workflow>\r\n      }\r\n      <div class=\"d-flex flex-wrap align-items-center flex-grow-1 flex-row-reverse gap-3\">\r\n      <ds-button\r\n        [ngClass]=\"{'disabled': !actionStates['SUBMIT'] || submittingForm}\"\r\n        loading=\"{{isSubmitting['SUBMIT']}}\"\r\n        (click)=\"onSubmit('SUBMIT')\">\r\n        {{ i18n.translate('submit') }}\r\n      </ds-button>\r\n    </div>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ApprovalsWorkflowComponent, selector: "lib-approvals-workflow", inputs: ["section", "form"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ActionButtonsComponent, decorators: [{
@@ -4851,7 +4757,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                         NgForOf,
                         ApprovalsWorkflowComponent
                     ], template: "<div class=\"mt-4\">\r\n  @if (lovType === 'button') {\r\n    <div class=\"d-flex align-items-center gap-3\">\r\n      <ds-button shape=\"text\" color=\"red\" (click)=\"resetForm()\">\r\n        <span class=\"fs-16 fw-medium\">{{ i18n.translate('reset') }}</span>\r\n      </ds-button>\r\n      @if (form?.sections?.length == 1 && showApprovalCycle) {\r\n        <lib-approvals-workflow [section]=\"section\" [form]=\"form\"></lib-approvals-workflow>\r\n      }\r\n      <div class=\"d-flex flex-wrap align-items-center flex-grow-1 flex-row-reverse gap-3\">\r\n        @for (item of lovOptions; track $index) {\r\n          <ds-button\r\n            loading=\"{{isSubmitting[item.value]}}\"\r\n            [ngClass]=\"{'disabled': !actionStates[item.value] || submittingForm}\"\r\n            shape=\"{{ buttonShape(item) }}\"\r\n            color=\"{{ buttonColor(item) }}\"\r\n            (click)=\"onSubmit(item?.value)\">\r\n            {{ item?.['description'] }}\r\n          </ds-button>\r\n        }\r\n      </div>\r\n    </div>\r\n  } @else {\r\n    <div class=\"d-flex align-items-center gap-3\">\r\n      <ds-button shape=\"text\" color=\"red\" (click)=\"resetForm()\">\r\n        <span class=\"fs-16 fw-medium\">{{ i18n.translate('reset') }}</span>\r\n      </ds-button>\r\n      @if (form?.sections?.length == 1 && showApprovalCycle) {\r\n        <lib-approvals-workflow [section]=\"section\" [form]=\"form\"></lib-approvals-workflow>\r\n      }\r\n      <div class=\"d-flex flex-wrap align-items-center flex-grow-1 flex-row-reverse gap-3\">\r\n      <ds-button\r\n        [ngClass]=\"{'disabled': !actionStates['SUBMIT'] || submittingForm}\"\r\n        loading=\"{{isSubmitting['SUBMIT']}}\"\r\n        (click)=\"onSubmit('SUBMIT')\">\r\n        {{ i18n.translate('submit') }}\r\n      </ds-button>\r\n    </div>\r\n    </div>\r\n  }\r\n</div>\r\n" }]
-        }], ctorParameters: () => [{ type: CoreI18nService }, { type: ActionStateService }, { type: CoreService }, { type: i1$1.MatDialog }, { type: i3.ToastrService }, { type: i0.ChangeDetectorRef }, { type: SidenavService }], propDecorators: { lovOptions: [{
+        }], ctorParameters: () => [{ type: CoreI18nService }, { type: ActionStateService }, { type: CoreService }, { type: i5.MatDialog }, { type: i2$1.ToastrService }, { type: i0.ChangeDetectorRef }], propDecorators: { lovOptions: [{
                 type: Input
             }], lovType: [{
                 type: Input
@@ -4931,13 +4837,13 @@ class TitleSectionComponent {
     openFaq() {
         this.sidenavService.publish('open', FaqSidenavComponent, 'end', 'over');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: TitleSectionComponent, deps: [{ token: SidenavService }, { token: i1$1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: TitleSectionComponent, deps: [{ token: SidenavService }, { token: i5.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: TitleSectionComponent, selector: "app-title-section", inputs: { title: "title", tooltip: "tooltip" }, ngImport: i0, template: "<header class=\"section-title\">\r\n  <div class=\"d-flex align-items-center\">\r\n    <h1 class=\"main-title mb-0\" >{{title}}</h1>\r\n    <!-- <span class=\"mx-1\"></span>\r\n    <button mat-icon-button class=\"btn button-transparent square\"  *ngIf=\"tooltip\" (click)=\"openFaq()\">\r\n      <span class=\"sfi sfi-info fc-dark-gray font-20-imp\" id=\"step1\"></span>\r\n    </button>\r\n    <span class=\"mx-1\"></span> -->\r\n  </div>\r\n  <div class=\"filter-actions\">\r\n    <div class=\"filter-section\">\r\n      <ng-content select=\"[filter]\"></ng-content>\r\n    </div>\r\n    <span class=\"mx-1\"></span>\r\n    <ng-content select=\"[action]\"></ng-content>\r\n    <ng-content select=\"[search]\"></ng-content>\r\n  </div>\r\n</header>\r\n", styles: [":host ::ng-deep .section-title{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap}:host ::ng-deep .section-title .filter-actions{display:flex;align-items:center;justify-content:space-between;flex-grow:1}:host ::ng-deep .section-title .filter-actions .filter-section{width:140px}:host ::ng-deep .section-title .filter-actions .filter-section .mat-form-field .mat-form-field-wrapper{padding-bottom:0}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: TitleSectionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-title-section', template: "<header class=\"section-title\">\r\n  <div class=\"d-flex align-items-center\">\r\n    <h1 class=\"main-title mb-0\" >{{title}}</h1>\r\n    <!-- <span class=\"mx-1\"></span>\r\n    <button mat-icon-button class=\"btn button-transparent square\"  *ngIf=\"tooltip\" (click)=\"openFaq()\">\r\n      <span class=\"sfi sfi-info fc-dark-gray font-20-imp\" id=\"step1\"></span>\r\n    </button>\r\n    <span class=\"mx-1\"></span> -->\r\n  </div>\r\n  <div class=\"filter-actions\">\r\n    <div class=\"filter-section\">\r\n      <ng-content select=\"[filter]\"></ng-content>\r\n    </div>\r\n    <span class=\"mx-1\"></span>\r\n    <ng-content select=\"[action]\"></ng-content>\r\n    <ng-content select=\"[search]\"></ng-content>\r\n  </div>\r\n</header>\r\n", styles: [":host ::ng-deep .section-title{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap}:host ::ng-deep .section-title .filter-actions{display:flex;align-items:center;justify-content:space-between;flex-grow:1}:host ::ng-deep .section-title .filter-actions .filter-section{width:140px}:host ::ng-deep .section-title .filter-actions .filter-section .mat-form-field .mat-form-field-wrapper{padding-bottom:0}\n"] }]
-        }], ctorParameters: () => [{ type: SidenavService }, { type: i1$1.MatDialog }], propDecorators: { title: [{
+        }], ctorParameters: () => [{ type: SidenavService }, { type: i5.MatDialog }], propDecorators: { title: [{
                 type: Input
             }], tooltip: [{
                 type: Input
@@ -5546,12 +5452,10 @@ class PreviousRequestsComponent {
             this.previousRequests = [];
             this.coreService.myRequests(this.searchData).subscribe({
                 next: (response) => {
-                    // setTimeout(() => {
                     this.coreService.historyData = response.history;
                     this.previousRequests = this.coreService.historyData;
                     this.coreService.historyDataLoaded = true;
                     this.filterStatus();
-                    // }, 500)
                 },
                 error: (err) => {
                     this.loading = false;
@@ -5582,8 +5486,8 @@ class PreviousRequestsComponent {
             window.open('/group/i-gate/wm-bpm/forms?formId=' + formId);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: PreviousRequestsComponent, deps: [{ token: i1$1.MatDialog }, { token: SidenavService }, { token: CoreService }, { token: i3.ToastrService }, { token: CoreI18nService }, { token: i2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: PreviousRequestsComponent, isStandalone: true, selector: "app-history", ngImport: i0, template: "<section class=\"main-sidenav history-sidenav\">\r\n  <div class=\"sidenav-title\">\r\n    <h3>{{ i18n.translate('PreviousRequests') }}</h3>\r\n    <ds-button class=\"close-sidenav\" (click)=\"sidenavService.closeSidenav()\" icon>\r\n      <ds-icon icon=\"close\" class=\"fs-20 fc-black\"></ds-icon>\r\n    </ds-button>\r\n  </div>\r\n\r\n  <div\r\n    class=\"sidenav-body bc-light-gray\"\r\n  >\r\n    <section class=\"p-3\">\r\n      <header class=\"d-flex align-items-center justify-content-between gap-2 mb-3\">\r\n        <h2 class=\"fs-20 fw-medium fc-black mb-0 d-flex align-items-center flex-grow-1 gap-3\">\r\n          {{ i18n.translate('AllRequests') }}\r\n          <span class=\"title-count fs-14 fw-normal\">{{ previousRequests?.length ? previousRequests?.length : '0' }}</span>\r\n        </h2>\r\n        <ds-button icon size=\"small\" (click)=\"isOpen = !isOpen\" cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\">\r\n          <ds-icon icon=\"filter\" class=\"fc-coral fs-20\" slot=\"prefix\"></ds-icon>\r\n        </ds-button>\r\n        <mat-button-toggle-group\r\n          class=\"icon-toggle flex-nowrap\"\r\n          #pageView=\"matButtonToggleGroup\"\r\n          (click)=\"$event.stopImmediatePropagation()\"\r\n          value=\"list\"\r\n        >\r\n          <mat-button-toggle value=\"card\">\r\n            <span class=\"sfi sfi-card fs-20\"></span>\r\n          </mat-button-toggle>\r\n          <mat-button-toggle value=\"list\">\r\n            <span class=\"sfi sfi-list-dots fs-20\"></span>\r\n          </mat-button-toggle>\r\n        </mat-button-toggle-group>\r\n      </header>\r\n\r\n      @if (previousRequests?.length) {\r\n        <div class=\"history-cards-container\" *ngIf=\"pageView.value === 'card'\">\r\n          <div class=\"p-4 line-height-1 bc-white radius-6 box-shadow\" *ngFor=\"let row of previousRequests\">\r\n            <div class=\"d-flex align-items-center gap-2 mb-3\">\r\n              <h3\r\n                class=\"fs-16 fw-medium flex-grow-1 mb-0 cursor-pointer underline fw-bold\"\r\n                (click)=\"viewForm(row?.form?.['formId'])\">{{ row?.form?.['formId'] }}</h3>\r\n            </div>\r\n            <div class=\"row g-3\">\r\n              <div class=\"d-flex flex-column col-6\">\r\n                <span class=\"fs-11 fc-dark-gray mb-2\">{{ i18n.translate('formTableCreationDate') }}</span>\r\n                <span class=\"fs-12 fw-medium fc-black\">{{ row?.form?.['creationDate'] | date: 'dd/MM/yyyy hh:mm a' }}</span>\r\n              </div>\r\n              <div class=\"d-flex flex-column col-6 justify-content-end align-items-end\">\r\n\r\n                <ds-status [attr.status]=\"row?.form?.formStatus?.key | statusClass\">\r\n                  {{ row?.form?.formStatus?.value }}\r\n                </ds-status>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"table-responsive\" *ngIf=\"pageView.value === 'list'\">\r\n          <table *ngIf=\"previousRequests?.length\">\r\n            <thead>\r\n            <tr>\r\n              <th>{{ i18n.translate('formTableFormId') }}</th>\r\n              <th>{{ i18n.translate('formTableCreationDate') }}</th>\r\n              <th>{{ i18n.translate('Status') }}</th>\r\n            </tr>\r\n            </thead>\r\n\r\n            <tbody *ngFor=\"let row of previousRequests\">\r\n            <tr>\r\n              <td>\r\n                <span class=\"fw-medium cursor-pointer underline fw-bold \" (click)=\"viewForm(row?.form?.['formId'])\">\r\n                  {{ row?.form?.['formId'] }}\r\n                </span>\r\n              </td>\r\n              <td>{{ row?.form?.['creationDate']  | date: 'dd/MM/yyyy hh:mm a' }}</td>\r\n              <td>\r\n                <ds-status [attr.status]=\"row?.form?.formStatus?.key | statusClass\">\r\n                  {{ row?.form?.formStatus?.value }}\r\n                </ds-status>\r\n              </td>\r\n            </tr>\r\n            </tbody>\r\n          </table>\r\n          <ds-loading-table *ngIf=\"loading\" [cols]=\"4\" [rows]=\"4\"></ds-loading-table>\r\n        </div>\r\n      } @else {\r\n        <ng-container *ngTemplateOutlet=\"emptyMessage\"></ng-container>\r\n      }\r\n    </section>\r\n  </div>\r\n</section>\r\n\r\n<ng-template\r\n  cdkConnectedOverlay\r\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\r\n  (backdropClick)=\"isOpen = false\"\r\n  [cdkConnectedOverlayGrowAfterOpen]=\"true\"\r\n  [cdkConnectedOverlayOrigin]=\"trigger\"\r\n  [cdkConnectedOverlayOpen]=\"isOpen\"\r\n>\r\n  <form [formGroup]=\"filterFormGroup\">\r\n    <div class=\"filter-container\">\r\n      <div class=\"popup-header border-bottom pb-2\">\r\n        <h3 class=\"fs-16 fc-black fw-medium\">{{ i18n.translate('filters') }}</h3>\r\n      </div>\r\n      <div class=\"d-flex flex-column gap-4 gap-md-3 filter-section bc-white mt-0 pt-3\">\r\n\r\n        <app-custom-searchable\r\n          class=\"section-item\"\r\n          formControlName=\"status\"\r\n          label=\"{{ i18n.translate('status') }}\"\r\n          [options]=\"statuses\"\r\n          [displayedLabel]=\"'value'\"\r\n          [key]=\"'key'\">\r\n        </app-custom-searchable>\r\n\r\n        <app-custom-searchable\r\n          class=\"section-item\"\r\n          formControlName=\"year\"\r\n          label=\"{{ i18n.translate('year') }}\"\r\n          [options]=\"yearsOptions\"\r\n          [displayedLabel]=\"'value'\"\r\n          [key]=\"'key'\">\r\n        </app-custom-searchable>\r\n\r\n        <app-custom-searchable\r\n          class=\"section-item\"\r\n          formControlName=\"month\"\r\n          label=\"{{ i18n.translate('month') }}\"\r\n          [options]=\"monthsOptions\"\r\n          [displayedLabel]=\"'value'\"\r\n          [key]=\"'key'\">\r\n        </app-custom-searchable>\r\n\r\n        <div class=\"d-flex align-items-center gap-3 mt-4\">\r\n          <ds-button shape=\"outline\" size=\"small\" (click)=\"clearFilters()\">\r\n            <span class=\"fs-12\"> {{ i18n.translate('clear') }} </span>\r\n          </ds-button>\r\n          <ds-button class=\"w-100\" size=\"small\" (click)=\"applyFilters()\">\r\n            <span class=\"fs-12\">{{ i18n.translate('applyFilters') }}  </span>\r\n          </ds-button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </form>\r\n</ng-template>\r\n\r\n\r\n<ng-template #emptyMessage>\r\n  <ds-message label=\"{{i18n.translate('NoData')}}\"></ds-message>\r\n</ng-template>\r\n", styles: [".history-cards-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1rem;padding:1rem 0}.filter-section ::ng-deep .mat-form-field.mat-primary{margin-bottom:0}.filter-section ::ng-deep .select-form-field{--placeholder-fc: var(--dark-gray)}.filter-section ::ng-deep .select-datepicker{--input-width: 200px}table thead{display:none}:host .mat-button-toggle-group{--toggle-bg: var(--white);box-shadow:var(--box-shadow)}:host table{--th-bg: var(--gray);--td-bg: var(--white);--tr-even-bc: var(--white);--tr-odd-bc: var(--white)}ds-button[square]::part(base){--btn-padding: 0}@media (min-width: 768px){.history-sidenav{--sidenav-width: 800px}}:host ::ng-deep .select-filter{--input-height: 35px;--input-width: 120px;--input-border: 1px solid var(--white) !important;--input-border-focuse: 1px solid var(--white);--input-border-active: 1px solid var(--white);box-shadow:var(--box-shadow);--input-bg: var(--white) !important}:host ::ng-deep .decisions-container{max-height:340px;overflow:auto;scroll-behavior:smooth;transition:scroll-behavior .5s ease-in-out;height:340px}@media (max-width: 768px){:host ::ng-deep .decisions-container{max-height:320px;height:320px}}[dir=rtl] :host ::ng-deep .decisions-container--btn.reRequest{transform:scaleX(-1)}@media (min-width: 1200px){:host ::ng-deep .decisions-container--name,:host ::ng-deep .decisions-container--date{max-width:120px}}@media (min-width: 1200px){[dir=rtl] :host ::ng-deep .decisions-container--name{max-width:initial}}:host ::ng-deep .decisions-container--item{display:flex;align-items:center;gap:1rem;min-height:105px;overflow:hidden;position:relative;cursor:pointer}@media (min-width: 991px){:host ::ng-deep .decisions-container--item h4{max-width:calc(100% - 200px);display:inline-block}}:host ::ng-deep .decisions-container--item:not(:last-child){margin-bottom:.75rem}:host ::ng-deep .decisions-container--item ds-status::part(base){--status-width: 60px}:host ::ng-deep .decisions-container--info span{position:relative;display:flex;align-items:center;gap:.5rem}:host ::ng-deep .decisions-container--info span:not(:first-of-type):before{content:\"\";min-width:3px;width:3px;height:3px;border-radius:50%;background-color:var(--black)}@media (min-width: 991px){:host ::ng-deep .decisions-container--status{position:absolute;top:1rem;right:0}}:host ::ng-deep .decisions-title{display:block;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:1}::ng-deep .main-portal mat-form-field.no-padding .mat-form-field-wrapper{padding-bottom:0!important}::ng-deep ds-button[hidden]{display:none!important}ds-button[circle]::part(base){--btn-color: inherit;--btn-border-color: inherit;--btn-bg-color: inherit;--btn-height: 25px;--btn-min-width: 25px}ds-button[circle][color=red]{--btn-bg-color: var(--red)}ds-button[circle][color=red]:hover{--btn-bg-color: var(--white)}ds-button[circle][color=green]{--btn-bg-color: var(--green)}ds-button[circle][color=green]:hover{--btn-bg-color: var(--white)}ds-button[circle][color=yellow]{--btn-bg-color: var(--yellow)}ds-button[circle][color=yellow]:hover{--btn-bg-color: var(--white)}ds-button[circle][color=coral]{--btn-bg-color: var(--coral)}ds-button[circle][color=coral]:hover{--btn-bg-color: var(--white)}ds-button[circle][color=coral]:hover svg path,ds-button[circle][color=coral]:hover svg line{fill:var(--coral)}ds-button[circle][color=orange]{--btn-bg-color: var(--orange)}ds-button[circle][color=orange]:hover{--btn-bg-color: var(--white)}@media (min-width: 991px){.decisions-container--item .decisions-container--status{width:0;transition:var(--default-transition)}}@media (min-width: 991px){.decisions-container--item:hover .decisions-container--status{transition:var(--default-transition);width:auto;height:auto;right:1.5rem}}::ng-deep .mat-tooltip{max-width:187px;background:#1d252d}::ng-deep ds-button.dots::part(base){text-decoration:none;padding:0;min-width:auto}@media (max-width: 300px){::ng-deep ds-button[shape=text]::part(base){padding:0 5px}::ng-deep ds-button.mat-menu-trigger::part(base){padding:0 5px}}.search-form-input{color:var(--black);font-weight:var(--font-medium);padding:0 .75rem;border:none;height:100%}.search-form-input::placeholder{color:var(--dark-gray);font-weight:var(--font-regular)}::ng-deep .select-user-dropdown{min-width:300px}::ng-deep .filter-container{background-color:var(--white);padding:1.5rem;border-radius:4px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i5.DatePipe, name: "date" }, { kind: "ngmodule", type: MatMenuModule }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i6.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i6.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "pipe", type: StatusStylePipe, name: "statusClass" }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: CustomSearchableComponent, selector: "app-custom-searchable", inputs: ["options", "disabled", "displayedLabel", "key", "floatLabel", "className"], outputs: ["selectedValue", "isLengthGreaterThan4"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: PreviousRequestsComponent, deps: [{ token: i5.MatDialog }, { token: SidenavService }, { token: CoreService }, { token: i2$1.ToastrService }, { token: CoreI18nService }, { token: i2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: PreviousRequestsComponent, isStandalone: true, selector: "app-history", ngImport: i0, template: "<section class=\"main-sidenav history-sidenav\">\r\n  <div class=\"sidenav-title\">\r\n    <h3>{{ i18n.translate('PreviousRequests') }}</h3>\r\n    <ds-button class=\"close-sidenav\" (click)=\"sidenavService.closeSidenav()\" icon>\r\n      <ds-icon icon=\"close\" class=\"fs-20 fc-black\"></ds-icon>\r\n    </ds-button>\r\n  </div>\r\n\r\n  <div class=\"sidenav-body bc-light-gray\">\r\n    <section class=\"p-3\">\r\n      <header class=\"d-flex align-items-center justify-content-between gap-2 mb-3\">\r\n        <h2 class=\"fs-20 fw-medium fc-black mb-0 d-flex align-items-center flex-grow-1 gap-3\">\r\n          {{ i18n.translate('AllRequests') }}\r\n          <span class=\"title-count fs-14 fw-normal\">{{ previousRequests?.length ? previousRequests?.length : '0' }}</span>\r\n        </h2>\r\n        <ds-button icon size=\"small\" (click)=\"isOpen = !isOpen\" cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\">\r\n          <ds-icon icon=\"filter\" class=\"fc-coral fs-20\" slot=\"prefix\"></ds-icon>\r\n        </ds-button>\r\n        <mat-button-toggle-group\r\n          class=\"icon-toggle flex-nowrap\"\r\n          #pageView=\"matButtonToggleGroup\"\r\n          (click)=\"$event.stopImmediatePropagation()\"\r\n          value=\"list\"\r\n        >\r\n          <mat-button-toggle value=\"card\">\r\n            <span class=\"sfi sfi-card fs-20\"></span>\r\n          </mat-button-toggle>\r\n          <mat-button-toggle value=\"list\">\r\n            <span class=\"sfi sfi-list-dots fs-20\"></span>\r\n          </mat-button-toggle>\r\n        </mat-button-toggle-group>\r\n      </header>\r\n\r\n      @if (previousRequests?.length) {\r\n        <div class=\"history-cards-container\" *ngIf=\"pageView.value === 'card'\">\r\n          @if (loading) {\r\n            <ng-container>\r\n              <div class=\"p-4 line-height-1 bc-white radius-6 box-shadow\" *ngFor=\"let row of [0,1,2,3]\">\r\n                <div class=\"d-flex align-items-center gap-2 mb-3\">\r\n                  <h3 class=\"loading-bg fs-16 fw-medium flex-grow-1 mb-0 cursor-pointer underline fw-bold\"></h3>\r\n                </div>\r\n                <div class=\"row g-3\">\r\n                  <div class=\"d-flex flex-column col-6\">\r\n                    <span class=\"fs-11 fc-dark-gray mb-2 loading-bg\"></span>\r\n                    <span class=\"fs-12 fw-medium fc-black loading-bg\"></span>\r\n                  </div>\r\n                  <div class=\"d-flex flex-column col-6 justify-content-end align-items-end\">\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </ng-container>\r\n          } @else {\r\n            <div class=\"p-4 line-height-1 bc-white radius-6 box-shadow\" *ngFor=\"let row of previousRequests\">\r\n              <div class=\"d-flex align-items-center gap-2 mb-3\">\r\n                <h3\r\n                  class=\"fs-16 fw-medium flex-grow-1 mb-0 cursor-pointer underline fw-bold\"\r\n                  (click)=\"viewForm(row?.form?.['formId'])\">{{ row?.form?.['formId'] }}</h3>\r\n              </div>\r\n              <div class=\"row g-3\">\r\n                <div class=\"d-flex flex-column col-6\">\r\n                  <span class=\"fs-11 fc-dark-gray mb-2\">{{ i18n.translate('formTableCreationDate') }}</span>\r\n                  <span class=\"fs-12 fw-medium fc-black\">{{ row?.form?.['creationDate'] | date: 'dd/MM/yyyy hh:mm a' }}</span>\r\n                </div>\r\n                <div class=\"d-flex flex-column col-6 justify-content-end align-items-end\">\r\n\r\n                  <ds-status [attr.status]=\"row?.form?.formStatus?.key | statusClass\">\r\n                    {{ row?.form?.formStatus?.value }}\r\n                  </ds-status>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          }\r\n\r\n        </div>\r\n        <div class=\"table-responsive\" *ngIf=\"pageView.value === 'list'\">\r\n          <table *ngIf=\"previousRequests?.length && !loading\">\r\n            <thead>\r\n            <tr>\r\n              <th>{{ i18n.translate('formTableFormId') }}</th>\r\n              <th>{{ i18n.translate('formTableCreationDate') }}</th>\r\n              <th>{{ i18n.translate('Status') }}</th>\r\n            </tr>\r\n            </thead>\r\n\r\n            <tbody *ngFor=\"let row of previousRequests\">\r\n            <tr>\r\n              <td>\r\n                <span class=\"fw-medium cursor-pointer underline fw-bold \" (click)=\"viewForm(row?.form?.['formId'])\">\r\n                  {{ row?.form?.['formId'] }}\r\n                </span>\r\n              </td>\r\n              <td>{{ row?.form?.['creationDate']  | date: 'dd/MM/yyyy hh:mm a' }}</td>\r\n              <td>\r\n                <ds-status [attr.status]=\"row?.form?.formStatus?.key | statusClass\">\r\n                  {{ row?.form?.formStatus?.value }}\r\n                </ds-status>\r\n              </td>\r\n            </tr>\r\n            </tbody>\r\n          </table>\r\n          <ds-loading-table *ngIf=\"loading\" [cols]=\"4\" [rows]=\"4\"></ds-loading-table>\r\n        </div>\r\n      } @else {\r\n        <ng-container *ngTemplateOutlet=\"emptyMessage\"></ng-container>\r\n      }\r\n    </section>\r\n  </div>\r\n</section>\r\n\r\n<ng-template\r\n  cdkConnectedOverlay\r\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\r\n  (backdropClick)=\"isOpen = false\"\r\n  [cdkConnectedOverlayGrowAfterOpen]=\"true\"\r\n  [cdkConnectedOverlayOrigin]=\"trigger\"\r\n  [cdkConnectedOverlayOpen]=\"isOpen\"\r\n>\r\n  <form [formGroup]=\"filterFormGroup\">\r\n    <div class=\"filter-container\">\r\n      <div class=\"popup-header border-bottom pb-2\">\r\n        <h3 class=\"fs-16 fc-black fw-medium\">{{ i18n.translate('filters') }}</h3>\r\n      </div>\r\n      <div class=\"d-flex flex-column gap-4 gap-md-3 filter-section bc-white mt-0 pt-3\">\r\n\r\n        <app-custom-searchable\r\n          class=\"section-item\"\r\n          formControlName=\"status\"\r\n          label=\"{{ i18n.translate('status') }}\"\r\n          [options]=\"statuses\"\r\n          [displayedLabel]=\"'value'\"\r\n          [key]=\"'key'\">\r\n        </app-custom-searchable>\r\n\r\n        <app-custom-searchable\r\n          class=\"section-item\"\r\n          formControlName=\"year\"\r\n          label=\"{{ i18n.translate('year') }}\"\r\n          [options]=\"yearsOptions\"\r\n          [displayedLabel]=\"'value'\"\r\n          [key]=\"'key'\">\r\n        </app-custom-searchable>\r\n\r\n        <app-custom-searchable\r\n          class=\"section-item\"\r\n          formControlName=\"month\"\r\n          label=\"{{ i18n.translate('month') }}\"\r\n          [options]=\"monthsOptions\"\r\n          [displayedLabel]=\"'value'\"\r\n          [key]=\"'key'\">\r\n        </app-custom-searchable>\r\n\r\n        <div class=\"d-flex align-items-center gap-3 mt-4\">\r\n          <ds-button shape=\"outline\" size=\"small\" (click)=\"clearFilters()\">\r\n            <span class=\"fs-12\"> {{ i18n.translate('clear') }} </span>\r\n          </ds-button>\r\n          <ds-button class=\"w-100\" size=\"small\" (click)=\"applyFilters()\">\r\n            <span class=\"fs-12\">{{ i18n.translate('applyFilters') }}  </span>\r\n          </ds-button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </form>\r\n</ng-template>\r\n\r\n\r\n<ng-template #emptyMessage>\r\n  <ds-message label=\"{{i18n.translate('NoData')}}\"></ds-message>\r\n</ng-template>\r\n", styles: [".history-cards-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1rem;padding:1rem 0}.filter-section ::ng-deep .mat-form-field.mat-primary{margin-bottom:0}.filter-section ::ng-deep .select-form-field{--placeholder-fc: var(--dark-gray)}.filter-section ::ng-deep .select-datepicker{--input-width: 200px}table thead{display:none}:host .mat-button-toggle-group{--toggle-bg: var(--white);box-shadow:var(--box-shadow)}:host table{--th-bg: var(--gray);--td-bg: var(--white);--tr-even-bc: var(--white);--tr-odd-bc: var(--white)}ds-button[square]::part(base){--btn-padding: 0}@media (min-width: 768px){.history-sidenav{--sidenav-width: 800px}}:host ::ng-deep .select-filter{--input-height: 35px;--input-width: 120px;--input-border: 1px solid var(--white) !important;--input-border-focuse: 1px solid var(--white);--input-border-active: 1px solid var(--white);box-shadow:var(--box-shadow);--input-bg: var(--white) !important}:host ::ng-deep .decisions-container{max-height:340px;overflow:auto;scroll-behavior:smooth;transition:scroll-behavior .5s ease-in-out;height:340px}@media (max-width: 768px){:host ::ng-deep .decisions-container{max-height:320px;height:320px}}[dir=rtl] :host ::ng-deep .decisions-container--btn.reRequest{transform:scaleX(-1)}@media (min-width: 1200px){:host ::ng-deep .decisions-container--name,:host ::ng-deep .decisions-container--date{max-width:120px}}@media (min-width: 1200px){[dir=rtl] :host ::ng-deep .decisions-container--name{max-width:initial}}:host ::ng-deep .decisions-container--item{display:flex;align-items:center;gap:1rem;min-height:105px;overflow:hidden;position:relative;cursor:pointer}@media (min-width: 991px){:host ::ng-deep .decisions-container--item h4{max-width:calc(100% - 200px);display:inline-block}}:host ::ng-deep .decisions-container--item:not(:last-child){margin-bottom:.75rem}:host ::ng-deep .decisions-container--item ds-status::part(base){--status-width: 60px}:host ::ng-deep .decisions-container--info span{position:relative;display:flex;align-items:center;gap:.5rem}:host ::ng-deep .decisions-container--info span:not(:first-of-type):before{content:\"\";min-width:3px;width:3px;height:3px;border-radius:50%;background-color:var(--black)}@media (min-width: 991px){:host ::ng-deep .decisions-container--status{position:absolute;top:1rem;right:0}}:host ::ng-deep .decisions-title{display:block;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:1}::ng-deep .main-portal mat-form-field.no-padding .mat-form-field-wrapper{padding-bottom:0!important}::ng-deep ds-button[hidden]{display:none!important}ds-button[circle]::part(base){--btn-color: inherit;--btn-border-color: inherit;--btn-bg-color: inherit;--btn-height: 25px;--btn-min-width: 25px}ds-button[circle][color=red]{--btn-bg-color: var(--red)}ds-button[circle][color=red]:hover{--btn-bg-color: var(--white)}ds-button[circle][color=green]{--btn-bg-color: var(--green)}ds-button[circle][color=green]:hover{--btn-bg-color: var(--white)}ds-button[circle][color=yellow]{--btn-bg-color: var(--yellow)}ds-button[circle][color=yellow]:hover{--btn-bg-color: var(--white)}ds-button[circle][color=coral]{--btn-bg-color: var(--coral)}ds-button[circle][color=coral]:hover{--btn-bg-color: var(--white)}ds-button[circle][color=coral]:hover svg path,ds-button[circle][color=coral]:hover svg line{fill:var(--coral)}ds-button[circle][color=orange]{--btn-bg-color: var(--orange)}ds-button[circle][color=orange]:hover{--btn-bg-color: var(--white)}@media (min-width: 991px){.decisions-container--item .decisions-container--status{width:0;transition:var(--default-transition)}}@media (min-width: 991px){.decisions-container--item:hover .decisions-container--status{transition:var(--default-transition);width:auto;height:auto;right:1.5rem}}::ng-deep .mat-tooltip{max-width:187px;background:#1d252d}::ng-deep ds-button.dots::part(base){text-decoration:none;padding:0;min-width:auto}@media (max-width: 300px){::ng-deep ds-button[shape=text]::part(base){padding:0 5px}::ng-deep ds-button.mat-menu-trigger::part(base){padding:0 5px}}.search-form-input{color:var(--black);font-weight:var(--font-medium);padding:0 .75rem;border:none;height:100%}.search-form-input::placeholder{color:var(--dark-gray);font-weight:var(--font-regular)}::ng-deep .select-user-dropdown{min-width:300px}::ng-deep .filter-container{background-color:var(--white);padding:1.5rem;border-radius:4px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i5$1.DatePipe, name: "date" }, { kind: "ngmodule", type: MatMenuModule }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i6.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i6.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "pipe", type: StatusStylePipe, name: "statusClass" }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: CustomSearchableComponent, selector: "app-custom-searchable", inputs: ["options", "disabled", "displayedLabel", "key", "floatLabel", "className"], outputs: ["selectedValue", "isLengthGreaterThan4"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: PreviousRequestsComponent, decorators: [{
             type: Component,
@@ -5599,8 +5503,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                         CdkOverlayOrigin,
                         CustomSearchableComponent,
                         CdkConnectedOverlay
-                    ], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<section class=\"main-sidenav history-sidenav\">\r\n  <div class=\"sidenav-title\">\r\n    <h3>{{ i18n.translate('PreviousRequests') }}</h3>\r\n    <ds-button class=\"close-sidenav\" (click)=\"sidenavService.closeSidenav()\" icon>\r\n      <ds-icon icon=\"close\" class=\"fs-20 fc-black\"></ds-icon>\r\n    </ds-button>\r\n  </div>\r\n\r\n  <div\r\n    class=\"sidenav-body bc-light-gray\"\r\n  >\r\n    <section class=\"p-3\">\r\n      <header class=\"d-flex align-items-center justify-content-between gap-2 mb-3\">\r\n        <h2 class=\"fs-20 fw-medium fc-black mb-0 d-flex align-items-center flex-grow-1 gap-3\">\r\n          {{ i18n.translate('AllRequests') }}\r\n          <span class=\"title-count fs-14 fw-normal\">{{ previousRequests?.length ? previousRequests?.length : '0' }}</span>\r\n        </h2>\r\n        <ds-button icon size=\"small\" (click)=\"isOpen = !isOpen\" cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\">\r\n          <ds-icon icon=\"filter\" class=\"fc-coral fs-20\" slot=\"prefix\"></ds-icon>\r\n        </ds-button>\r\n        <mat-button-toggle-group\r\n          class=\"icon-toggle flex-nowrap\"\r\n          #pageView=\"matButtonToggleGroup\"\r\n          (click)=\"$event.stopImmediatePropagation()\"\r\n          value=\"list\"\r\n        >\r\n          <mat-button-toggle value=\"card\">\r\n            <span class=\"sfi sfi-card fs-20\"></span>\r\n          </mat-button-toggle>\r\n          <mat-button-toggle value=\"list\">\r\n            <span class=\"sfi sfi-list-dots fs-20\"></span>\r\n          </mat-button-toggle>\r\n        </mat-button-toggle-group>\r\n      </header>\r\n\r\n      @if (previousRequests?.length) {\r\n        <div class=\"history-cards-container\" *ngIf=\"pageView.value === 'card'\">\r\n          <div class=\"p-4 line-height-1 bc-white radius-6 box-shadow\" *ngFor=\"let row of previousRequests\">\r\n            <div class=\"d-flex align-items-center gap-2 mb-3\">\r\n              <h3\r\n                class=\"fs-16 fw-medium flex-grow-1 mb-0 cursor-pointer underline fw-bold\"\r\n                (click)=\"viewForm(row?.form?.['formId'])\">{{ row?.form?.['formId'] }}</h3>\r\n            </div>\r\n            <div class=\"row g-3\">\r\n              <div class=\"d-flex flex-column col-6\">\r\n                <span class=\"fs-11 fc-dark-gray mb-2\">{{ i18n.translate('formTableCreationDate') }}</span>\r\n                <span class=\"fs-12 fw-medium fc-black\">{{ row?.form?.['creationDate'] | date: 'dd/MM/yyyy hh:mm a' }}</span>\r\n              </div>\r\n              <div class=\"d-flex flex-column col-6 justify-content-end align-items-end\">\r\n\r\n                <ds-status [attr.status]=\"row?.form?.formStatus?.key | statusClass\">\r\n                  {{ row?.form?.formStatus?.value }}\r\n                </ds-status>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"table-responsive\" *ngIf=\"pageView.value === 'list'\">\r\n          <table *ngIf=\"previousRequests?.length\">\r\n            <thead>\r\n            <tr>\r\n              <th>{{ i18n.translate('formTableFormId') }}</th>\r\n              <th>{{ i18n.translate('formTableCreationDate') }}</th>\r\n              <th>{{ i18n.translate('Status') }}</th>\r\n            </tr>\r\n            </thead>\r\n\r\n            <tbody *ngFor=\"let row of previousRequests\">\r\n            <tr>\r\n              <td>\r\n                <span class=\"fw-medium cursor-pointer underline fw-bold \" (click)=\"viewForm(row?.form?.['formId'])\">\r\n                  {{ row?.form?.['formId'] }}\r\n                </span>\r\n              </td>\r\n              <td>{{ row?.form?.['creationDate']  | date: 'dd/MM/yyyy hh:mm a' }}</td>\r\n              <td>\r\n                <ds-status [attr.status]=\"row?.form?.formStatus?.key | statusClass\">\r\n                  {{ row?.form?.formStatus?.value }}\r\n                </ds-status>\r\n              </td>\r\n            </tr>\r\n            </tbody>\r\n          </table>\r\n          <ds-loading-table *ngIf=\"loading\" [cols]=\"4\" [rows]=\"4\"></ds-loading-table>\r\n        </div>\r\n      } @else {\r\n        <ng-container *ngTemplateOutlet=\"emptyMessage\"></ng-container>\r\n      }\r\n    </section>\r\n  </div>\r\n</section>\r\n\r\n<ng-template\r\n  cdkConnectedOverlay\r\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\r\n  (backdropClick)=\"isOpen = false\"\r\n  [cdkConnectedOverlayGrowAfterOpen]=\"true\"\r\n  [cdkConnectedOverlayOrigin]=\"trigger\"\r\n  [cdkConnectedOverlayOpen]=\"isOpen\"\r\n>\r\n  <form [formGroup]=\"filterFormGroup\">\r\n    <div class=\"filter-container\">\r\n      <div class=\"popup-header border-bottom pb-2\">\r\n        <h3 class=\"fs-16 fc-black fw-medium\">{{ i18n.translate('filters') }}</h3>\r\n      </div>\r\n      <div class=\"d-flex flex-column gap-4 gap-md-3 filter-section bc-white mt-0 pt-3\">\r\n\r\n        <app-custom-searchable\r\n          class=\"section-item\"\r\n          formControlName=\"status\"\r\n          label=\"{{ i18n.translate('status') }}\"\r\n          [options]=\"statuses\"\r\n          [displayedLabel]=\"'value'\"\r\n          [key]=\"'key'\">\r\n        </app-custom-searchable>\r\n\r\n        <app-custom-searchable\r\n          class=\"section-item\"\r\n          formControlName=\"year\"\r\n          label=\"{{ i18n.translate('year') }}\"\r\n          [options]=\"yearsOptions\"\r\n          [displayedLabel]=\"'value'\"\r\n          [key]=\"'key'\">\r\n        </app-custom-searchable>\r\n\r\n        <app-custom-searchable\r\n          class=\"section-item\"\r\n          formControlName=\"month\"\r\n          label=\"{{ i18n.translate('month') }}\"\r\n          [options]=\"monthsOptions\"\r\n          [displayedLabel]=\"'value'\"\r\n          [key]=\"'key'\">\r\n        </app-custom-searchable>\r\n\r\n        <div class=\"d-flex align-items-center gap-3 mt-4\">\r\n          <ds-button shape=\"outline\" size=\"small\" (click)=\"clearFilters()\">\r\n            <span class=\"fs-12\"> {{ i18n.translate('clear') }} </span>\r\n          </ds-button>\r\n          <ds-button class=\"w-100\" size=\"small\" (click)=\"applyFilters()\">\r\n            <span class=\"fs-12\">{{ i18n.translate('applyFilters') }}  </span>\r\n          </ds-button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </form>\r\n</ng-template>\r\n\r\n\r\n<ng-template #emptyMessage>\r\n  <ds-message label=\"{{i18n.translate('NoData')}}\"></ds-message>\r\n</ng-template>\r\n", styles: [".history-cards-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1rem;padding:1rem 0}.filter-section ::ng-deep .mat-form-field.mat-primary{margin-bottom:0}.filter-section ::ng-deep .select-form-field{--placeholder-fc: var(--dark-gray)}.filter-section ::ng-deep .select-datepicker{--input-width: 200px}table thead{display:none}:host .mat-button-toggle-group{--toggle-bg: var(--white);box-shadow:var(--box-shadow)}:host table{--th-bg: var(--gray);--td-bg: var(--white);--tr-even-bc: var(--white);--tr-odd-bc: var(--white)}ds-button[square]::part(base){--btn-padding: 0}@media (min-width: 768px){.history-sidenav{--sidenav-width: 800px}}:host ::ng-deep .select-filter{--input-height: 35px;--input-width: 120px;--input-border: 1px solid var(--white) !important;--input-border-focuse: 1px solid var(--white);--input-border-active: 1px solid var(--white);box-shadow:var(--box-shadow);--input-bg: var(--white) !important}:host ::ng-deep .decisions-container{max-height:340px;overflow:auto;scroll-behavior:smooth;transition:scroll-behavior .5s ease-in-out;height:340px}@media (max-width: 768px){:host ::ng-deep .decisions-container{max-height:320px;height:320px}}[dir=rtl] :host ::ng-deep .decisions-container--btn.reRequest{transform:scaleX(-1)}@media (min-width: 1200px){:host ::ng-deep .decisions-container--name,:host ::ng-deep .decisions-container--date{max-width:120px}}@media (min-width: 1200px){[dir=rtl] :host ::ng-deep .decisions-container--name{max-width:initial}}:host ::ng-deep .decisions-container--item{display:flex;align-items:center;gap:1rem;min-height:105px;overflow:hidden;position:relative;cursor:pointer}@media (min-width: 991px){:host ::ng-deep .decisions-container--item h4{max-width:calc(100% - 200px);display:inline-block}}:host ::ng-deep .decisions-container--item:not(:last-child){margin-bottom:.75rem}:host ::ng-deep .decisions-container--item ds-status::part(base){--status-width: 60px}:host ::ng-deep .decisions-container--info span{position:relative;display:flex;align-items:center;gap:.5rem}:host ::ng-deep .decisions-container--info span:not(:first-of-type):before{content:\"\";min-width:3px;width:3px;height:3px;border-radius:50%;background-color:var(--black)}@media (min-width: 991px){:host ::ng-deep .decisions-container--status{position:absolute;top:1rem;right:0}}:host ::ng-deep .decisions-title{display:block;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:1}::ng-deep .main-portal mat-form-field.no-padding .mat-form-field-wrapper{padding-bottom:0!important}::ng-deep ds-button[hidden]{display:none!important}ds-button[circle]::part(base){--btn-color: inherit;--btn-border-color: inherit;--btn-bg-color: inherit;--btn-height: 25px;--btn-min-width: 25px}ds-button[circle][color=red]{--btn-bg-color: var(--red)}ds-button[circle][color=red]:hover{--btn-bg-color: var(--white)}ds-button[circle][color=green]{--btn-bg-color: var(--green)}ds-button[circle][color=green]:hover{--btn-bg-color: var(--white)}ds-button[circle][color=yellow]{--btn-bg-color: var(--yellow)}ds-button[circle][color=yellow]:hover{--btn-bg-color: var(--white)}ds-button[circle][color=coral]{--btn-bg-color: var(--coral)}ds-button[circle][color=coral]:hover{--btn-bg-color: var(--white)}ds-button[circle][color=coral]:hover svg path,ds-button[circle][color=coral]:hover svg line{fill:var(--coral)}ds-button[circle][color=orange]{--btn-bg-color: var(--orange)}ds-button[circle][color=orange]:hover{--btn-bg-color: var(--white)}@media (min-width: 991px){.decisions-container--item .decisions-container--status{width:0;transition:var(--default-transition)}}@media (min-width: 991px){.decisions-container--item:hover .decisions-container--status{transition:var(--default-transition);width:auto;height:auto;right:1.5rem}}::ng-deep .mat-tooltip{max-width:187px;background:#1d252d}::ng-deep ds-button.dots::part(base){text-decoration:none;padding:0;min-width:auto}@media (max-width: 300px){::ng-deep ds-button[shape=text]::part(base){padding:0 5px}::ng-deep ds-button.mat-menu-trigger::part(base){padding:0 5px}}.search-form-input{color:var(--black);font-weight:var(--font-medium);padding:0 .75rem;border:none;height:100%}.search-form-input::placeholder{color:var(--dark-gray);font-weight:var(--font-regular)}::ng-deep .select-user-dropdown{min-width:300px}::ng-deep .filter-container{background-color:var(--white);padding:1.5rem;border-radius:4px}\n"] }]
-        }], ctorParameters: () => [{ type: i1$1.MatDialog }, { type: SidenavService }, { type: CoreService }, { type: i3.ToastrService }, { type: CoreI18nService }, { type: i2.FormBuilder }] });
+                    ], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<section class=\"main-sidenav history-sidenav\">\r\n  <div class=\"sidenav-title\">\r\n    <h3>{{ i18n.translate('PreviousRequests') }}</h3>\r\n    <ds-button class=\"close-sidenav\" (click)=\"sidenavService.closeSidenav()\" icon>\r\n      <ds-icon icon=\"close\" class=\"fs-20 fc-black\"></ds-icon>\r\n    </ds-button>\r\n  </div>\r\n\r\n  <div class=\"sidenav-body bc-light-gray\">\r\n    <section class=\"p-3\">\r\n      <header class=\"d-flex align-items-center justify-content-between gap-2 mb-3\">\r\n        <h2 class=\"fs-20 fw-medium fc-black mb-0 d-flex align-items-center flex-grow-1 gap-3\">\r\n          {{ i18n.translate('AllRequests') }}\r\n          <span class=\"title-count fs-14 fw-normal\">{{ previousRequests?.length ? previousRequests?.length : '0' }}</span>\r\n        </h2>\r\n        <ds-button icon size=\"small\" (click)=\"isOpen = !isOpen\" cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\">\r\n          <ds-icon icon=\"filter\" class=\"fc-coral fs-20\" slot=\"prefix\"></ds-icon>\r\n        </ds-button>\r\n        <mat-button-toggle-group\r\n          class=\"icon-toggle flex-nowrap\"\r\n          #pageView=\"matButtonToggleGroup\"\r\n          (click)=\"$event.stopImmediatePropagation()\"\r\n          value=\"list\"\r\n        >\r\n          <mat-button-toggle value=\"card\">\r\n            <span class=\"sfi sfi-card fs-20\"></span>\r\n          </mat-button-toggle>\r\n          <mat-button-toggle value=\"list\">\r\n            <span class=\"sfi sfi-list-dots fs-20\"></span>\r\n          </mat-button-toggle>\r\n        </mat-button-toggle-group>\r\n      </header>\r\n\r\n      @if (previousRequests?.length) {\r\n        <div class=\"history-cards-container\" *ngIf=\"pageView.value === 'card'\">\r\n          @if (loading) {\r\n            <ng-container>\r\n              <div class=\"p-4 line-height-1 bc-white radius-6 box-shadow\" *ngFor=\"let row of [0,1,2,3]\">\r\n                <div class=\"d-flex align-items-center gap-2 mb-3\">\r\n                  <h3 class=\"loading-bg fs-16 fw-medium flex-grow-1 mb-0 cursor-pointer underline fw-bold\"></h3>\r\n                </div>\r\n                <div class=\"row g-3\">\r\n                  <div class=\"d-flex flex-column col-6\">\r\n                    <span class=\"fs-11 fc-dark-gray mb-2 loading-bg\"></span>\r\n                    <span class=\"fs-12 fw-medium fc-black loading-bg\"></span>\r\n                  </div>\r\n                  <div class=\"d-flex flex-column col-6 justify-content-end align-items-end\">\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </ng-container>\r\n          } @else {\r\n            <div class=\"p-4 line-height-1 bc-white radius-6 box-shadow\" *ngFor=\"let row of previousRequests\">\r\n              <div class=\"d-flex align-items-center gap-2 mb-3\">\r\n                <h3\r\n                  class=\"fs-16 fw-medium flex-grow-1 mb-0 cursor-pointer underline fw-bold\"\r\n                  (click)=\"viewForm(row?.form?.['formId'])\">{{ row?.form?.['formId'] }}</h3>\r\n              </div>\r\n              <div class=\"row g-3\">\r\n                <div class=\"d-flex flex-column col-6\">\r\n                  <span class=\"fs-11 fc-dark-gray mb-2\">{{ i18n.translate('formTableCreationDate') }}</span>\r\n                  <span class=\"fs-12 fw-medium fc-black\">{{ row?.form?.['creationDate'] | date: 'dd/MM/yyyy hh:mm a' }}</span>\r\n                </div>\r\n                <div class=\"d-flex flex-column col-6 justify-content-end align-items-end\">\r\n\r\n                  <ds-status [attr.status]=\"row?.form?.formStatus?.key | statusClass\">\r\n                    {{ row?.form?.formStatus?.value }}\r\n                  </ds-status>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          }\r\n\r\n        </div>\r\n        <div class=\"table-responsive\" *ngIf=\"pageView.value === 'list'\">\r\n          <table *ngIf=\"previousRequests?.length && !loading\">\r\n            <thead>\r\n            <tr>\r\n              <th>{{ i18n.translate('formTableFormId') }}</th>\r\n              <th>{{ i18n.translate('formTableCreationDate') }}</th>\r\n              <th>{{ i18n.translate('Status') }}</th>\r\n            </tr>\r\n            </thead>\r\n\r\n            <tbody *ngFor=\"let row of previousRequests\">\r\n            <tr>\r\n              <td>\r\n                <span class=\"fw-medium cursor-pointer underline fw-bold \" (click)=\"viewForm(row?.form?.['formId'])\">\r\n                  {{ row?.form?.['formId'] }}\r\n                </span>\r\n              </td>\r\n              <td>{{ row?.form?.['creationDate']  | date: 'dd/MM/yyyy hh:mm a' }}</td>\r\n              <td>\r\n                <ds-status [attr.status]=\"row?.form?.formStatus?.key | statusClass\">\r\n                  {{ row?.form?.formStatus?.value }}\r\n                </ds-status>\r\n              </td>\r\n            </tr>\r\n            </tbody>\r\n          </table>\r\n          <ds-loading-table *ngIf=\"loading\" [cols]=\"4\" [rows]=\"4\"></ds-loading-table>\r\n        </div>\r\n      } @else {\r\n        <ng-container *ngTemplateOutlet=\"emptyMessage\"></ng-container>\r\n      }\r\n    </section>\r\n  </div>\r\n</section>\r\n\r\n<ng-template\r\n  cdkConnectedOverlay\r\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\r\n  (backdropClick)=\"isOpen = false\"\r\n  [cdkConnectedOverlayGrowAfterOpen]=\"true\"\r\n  [cdkConnectedOverlayOrigin]=\"trigger\"\r\n  [cdkConnectedOverlayOpen]=\"isOpen\"\r\n>\r\n  <form [formGroup]=\"filterFormGroup\">\r\n    <div class=\"filter-container\">\r\n      <div class=\"popup-header border-bottom pb-2\">\r\n        <h3 class=\"fs-16 fc-black fw-medium\">{{ i18n.translate('filters') }}</h3>\r\n      </div>\r\n      <div class=\"d-flex flex-column gap-4 gap-md-3 filter-section bc-white mt-0 pt-3\">\r\n\r\n        <app-custom-searchable\r\n          class=\"section-item\"\r\n          formControlName=\"status\"\r\n          label=\"{{ i18n.translate('status') }}\"\r\n          [options]=\"statuses\"\r\n          [displayedLabel]=\"'value'\"\r\n          [key]=\"'key'\">\r\n        </app-custom-searchable>\r\n\r\n        <app-custom-searchable\r\n          class=\"section-item\"\r\n          formControlName=\"year\"\r\n          label=\"{{ i18n.translate('year') }}\"\r\n          [options]=\"yearsOptions\"\r\n          [displayedLabel]=\"'value'\"\r\n          [key]=\"'key'\">\r\n        </app-custom-searchable>\r\n\r\n        <app-custom-searchable\r\n          class=\"section-item\"\r\n          formControlName=\"month\"\r\n          label=\"{{ i18n.translate('month') }}\"\r\n          [options]=\"monthsOptions\"\r\n          [displayedLabel]=\"'value'\"\r\n          [key]=\"'key'\">\r\n        </app-custom-searchable>\r\n\r\n        <div class=\"d-flex align-items-center gap-3 mt-4\">\r\n          <ds-button shape=\"outline\" size=\"small\" (click)=\"clearFilters()\">\r\n            <span class=\"fs-12\"> {{ i18n.translate('clear') }} </span>\r\n          </ds-button>\r\n          <ds-button class=\"w-100\" size=\"small\" (click)=\"applyFilters()\">\r\n            <span class=\"fs-12\">{{ i18n.translate('applyFilters') }}  </span>\r\n          </ds-button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </form>\r\n</ng-template>\r\n\r\n\r\n<ng-template #emptyMessage>\r\n  <ds-message label=\"{{i18n.translate('NoData')}}\"></ds-message>\r\n</ng-template>\r\n", styles: [".history-cards-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1rem;padding:1rem 0}.filter-section ::ng-deep .mat-form-field.mat-primary{margin-bottom:0}.filter-section ::ng-deep .select-form-field{--placeholder-fc: var(--dark-gray)}.filter-section ::ng-deep .select-datepicker{--input-width: 200px}table thead{display:none}:host .mat-button-toggle-group{--toggle-bg: var(--white);box-shadow:var(--box-shadow)}:host table{--th-bg: var(--gray);--td-bg: var(--white);--tr-even-bc: var(--white);--tr-odd-bc: var(--white)}ds-button[square]::part(base){--btn-padding: 0}@media (min-width: 768px){.history-sidenav{--sidenav-width: 800px}}:host ::ng-deep .select-filter{--input-height: 35px;--input-width: 120px;--input-border: 1px solid var(--white) !important;--input-border-focuse: 1px solid var(--white);--input-border-active: 1px solid var(--white);box-shadow:var(--box-shadow);--input-bg: var(--white) !important}:host ::ng-deep .decisions-container{max-height:340px;overflow:auto;scroll-behavior:smooth;transition:scroll-behavior .5s ease-in-out;height:340px}@media (max-width: 768px){:host ::ng-deep .decisions-container{max-height:320px;height:320px}}[dir=rtl] :host ::ng-deep .decisions-container--btn.reRequest{transform:scaleX(-1)}@media (min-width: 1200px){:host ::ng-deep .decisions-container--name,:host ::ng-deep .decisions-container--date{max-width:120px}}@media (min-width: 1200px){[dir=rtl] :host ::ng-deep .decisions-container--name{max-width:initial}}:host ::ng-deep .decisions-container--item{display:flex;align-items:center;gap:1rem;min-height:105px;overflow:hidden;position:relative;cursor:pointer}@media (min-width: 991px){:host ::ng-deep .decisions-container--item h4{max-width:calc(100% - 200px);display:inline-block}}:host ::ng-deep .decisions-container--item:not(:last-child){margin-bottom:.75rem}:host ::ng-deep .decisions-container--item ds-status::part(base){--status-width: 60px}:host ::ng-deep .decisions-container--info span{position:relative;display:flex;align-items:center;gap:.5rem}:host ::ng-deep .decisions-container--info span:not(:first-of-type):before{content:\"\";min-width:3px;width:3px;height:3px;border-radius:50%;background-color:var(--black)}@media (min-width: 991px){:host ::ng-deep .decisions-container--status{position:absolute;top:1rem;right:0}}:host ::ng-deep .decisions-title{display:block;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:1}::ng-deep .main-portal mat-form-field.no-padding .mat-form-field-wrapper{padding-bottom:0!important}::ng-deep ds-button[hidden]{display:none!important}ds-button[circle]::part(base){--btn-color: inherit;--btn-border-color: inherit;--btn-bg-color: inherit;--btn-height: 25px;--btn-min-width: 25px}ds-button[circle][color=red]{--btn-bg-color: var(--red)}ds-button[circle][color=red]:hover{--btn-bg-color: var(--white)}ds-button[circle][color=green]{--btn-bg-color: var(--green)}ds-button[circle][color=green]:hover{--btn-bg-color: var(--white)}ds-button[circle][color=yellow]{--btn-bg-color: var(--yellow)}ds-button[circle][color=yellow]:hover{--btn-bg-color: var(--white)}ds-button[circle][color=coral]{--btn-bg-color: var(--coral)}ds-button[circle][color=coral]:hover{--btn-bg-color: var(--white)}ds-button[circle][color=coral]:hover svg path,ds-button[circle][color=coral]:hover svg line{fill:var(--coral)}ds-button[circle][color=orange]{--btn-bg-color: var(--orange)}ds-button[circle][color=orange]:hover{--btn-bg-color: var(--white)}@media (min-width: 991px){.decisions-container--item .decisions-container--status{width:0;transition:var(--default-transition)}}@media (min-width: 991px){.decisions-container--item:hover .decisions-container--status{transition:var(--default-transition);width:auto;height:auto;right:1.5rem}}::ng-deep .mat-tooltip{max-width:187px;background:#1d252d}::ng-deep ds-button.dots::part(base){text-decoration:none;padding:0;min-width:auto}@media (max-width: 300px){::ng-deep ds-button[shape=text]::part(base){padding:0 5px}::ng-deep ds-button.mat-menu-trigger::part(base){padding:0 5px}}.search-form-input{color:var(--black);font-weight:var(--font-medium);padding:0 .75rem;border:none;height:100%}.search-form-input::placeholder{color:var(--dark-gray);font-weight:var(--font-regular)}::ng-deep .select-user-dropdown{min-width:300px}::ng-deep .filter-container{background-color:var(--white);padding:1.5rem;border-radius:4px}\n"] }]
+        }], ctorParameters: () => [{ type: i5.MatDialog }, { type: SidenavService }, { type: CoreService }, { type: i2$1.ToastrService }, { type: CoreI18nService }, { type: i2.FormBuilder }] });
 
 const StatusMap$1 = {
     [FORM_STATUS_REJECTED]: { class: 'danger', icon: 'close' },
@@ -5622,6 +5526,7 @@ class ServiceHeaderComponent {
     form;
     showHistory = false;
     isLoading = false;
+    isReadOnly = false;
     showApprovalHistory = false;
     approvalHistory;
     creationDate;
@@ -5629,7 +5534,6 @@ class ServiceHeaderComponent {
     section;
     serviceFaq = [];
     approvals = [];
-    feedBackIcon = null;
     flagPriority;
     constructor(cdRef, coreService, i18n, feedBackService, dialog, sidenavService, toasterService) {
         this.cdRef = cdRef;
@@ -5813,10 +5717,10 @@ class ServiceHeaderComponent {
     showPreviousRequests() {
         this.sidenavService.publish('open', PreviousRequestsComponent);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ServiceHeaderComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CoreService }, { token: CoreI18nService }, { token: FeedBackService }, { token: i1$1.MatDialog }, { token: SidenavService }, { token: i3.ToastrService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: ServiceHeaderComponent, isStandalone: true, selector: "core-service-header", inputs: { form: "form", showHistory: "showHistory", isLoading: "isLoading", showApprovalHistory: "showApprovalHistory", approvalHistory: "approvalHistory", creationDate: "creationDate", formTitle: "formTitle", section: "section", serviceFaq: "serviceFaq" }, providers: [FeedBackService,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ServiceHeaderComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CoreService }, { token: CoreI18nService }, { token: FeedBackService }, { token: i5.MatDialog }, { token: SidenavService }, { token: i2$1.ToastrService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: ServiceHeaderComponent, isStandalone: true, selector: "core-service-header", inputs: { form: "form", showHistory: "showHistory", isLoading: "isLoading", isReadOnly: "isReadOnly", showApprovalHistory: "showApprovalHistory", approvalHistory: "approvalHistory", creationDate: "creationDate", formTitle: "formTitle", section: "section", serviceFaq: "serviceFaq" }, providers: [FeedBackService,
             { provide: MAT_DIALOG_DATA, useValue: {} },
-        ], ngImport: i0, template: "@if (form?.header?.status?.['key'] === 'NEW') {\r\n  <section\r\n    class=\"main-sidenav main-sidenav-full mb-4\"\r\n\r\n  >\r\n    <div class=\"sidenav-title\">\r\n      <div class=\"d-flex align-items-center gap-3 w-100\">\r\n        <!-- <ds-button icon class=\"rotate-arrow\" size=\"small\" (click)=\"goBack()\" *ngIf=\"!isInMobileApp() && showBack\">\r\n           <ds-icon icon=\"arrow-right\" class=\"fs-19 fc-black\"></ds-icon>\r\n         </ds-button>-->\r\n\r\n        <!--  <h3 class=\"flex-grow-0\">\r\n            {{ formTitle }}\r\n          </h3>-->\r\n\r\n        <section>\r\n          <h6 class=\"fs-14 fs-md-12 fw-normal fc-dark-gray mb-0\">\r\n            {{ i18n.translate('Hello') }}\r\n            {{ coreService.getShortName(form?.header?.requesterName) }}, {{ i18n.translate('welcomeBack') }}!\r\n          </h6>\r\n          <h1 class=\"fs-26 fs-md-20 fw-bold fc-black d-flex align-items-center gap-2 mb-1\">\r\n            {{ formTitle }}\r\n            @if (serviceFaq.length) {\r\n              <ds-icon icon=\"info\" class=\"fs-22 fc-dark-gray cursor-pointer\" (click)=\"openFaq()\">\r\n              </ds-icon>\r\n            }\r\n          </h1>\r\n        </section>\r\n        <div class=\"d-flex align-items-center justify-content-end gap-2 flex-grow-1\">\r\n          @if (serviceFaq.length) {\r\n            <ds-button size=\"small\" icon>\r\n              <ds-icon icon=\"info\" class=\"fs-22 fc-dark-gray cursor-pointer\" (click)=\"openFaq()\">\r\n              </ds-icon>\r\n            </ds-button>\r\n          }\r\n          <!-- <ds-button size=\"small\" icon (click)=\"openWorkflow()\">\r\n            <ds-icon icon=\"bell-2-o\" class=\"fs-20 fc-coral\"></ds-icon>\r\n          </ds-button> -->\r\n          <ds-button size=\"small\" icon (click)=\"showPreviousRequests()\" >\r\n            <ds-icon icon=\"clock\" class=\"fs-20 fc-coral\"></ds-icon>\r\n          </ds-button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </section>\r\n\r\n  <!--  <header class=\"mb-4 mt-4 d-flex align-items-center justify-content-between align-items-end gap-2\">\r\n      <section>\r\n        <h6 class=\"fs-14 fs-md-12 fw-normal fc-dark-gray mb-0\">\r\n          {{ i18n.translate('Hello') }}\r\n          {{ coreService.getShortName(form?.header?.requesterName) }}, {{ i18n.translate('welcomeBack') }}!\r\n        </h6>\r\n        <h1 class=\"fs-26 fs-md-20 fw-bold fc-black d-flex align-items-center gap-2 mb-1\">\r\n          {{ formTitle }}\r\n          @if (serviceFaq.length) {\r\n            <ds-icon icon=\"info\" class=\"fs-22 fc-dark-gray cursor-pointer\" (click)=\"openFaq()\">\r\n            </ds-icon>\r\n          }\r\n        </h1>\r\n      </section>\r\n    </header>-->\r\n} @else {\r\n\r\n  <div class=\"w-100\">\r\n    <section class=\"request-main-info  {{statusClass(form?.header?.status?.['key'])}}\">\r\n      <section class=\"request-info\">\r\n        <div class=\"request-info--body\">\r\n          <div class=\"d-flex align-items-center gap-2 flex-grow-1\">\r\n            <img\r\n              alt=\"\"\r\n              src=\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMjkiIHZpZXdCb3g9IjAgMCAzMCAyOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTI1LjEgMEg0LjlDMi4yIDAgMCAyLjIgMCA0LjlWMjguNkgyNS4xQzI3LjggMjguNiAzMCAyNi40IDMwIDIzLjdWNC45QzMwIDIuMiAyNy44IDAgMjUuMSAwWk0yIDQuOUMyIDMuMyAzLjMgMiA0LjkgMkgyNS4xQzI2LjcgMiAyOCAzLjMgMjggNC45VjIzLjdDMjggMjUuMyAyNi43IDI2LjYgMjUuMSAyNi42SDJWNC45Wk0xMS41IDYuM0M3LjEgNi4zIDMuNSA5LjkgMy41IDE0LjNDMy41IDE4LjcgNy4xIDIyLjMgMTEuNSAyMi4zQzE1LjkgMjIuMyAxOS41IDE4LjcgMTkuNSAxNC4zQzE5LjUgOS45IDE1LjkgNi4zIDExLjUgNi4zWk0xNS4xIDE5QzE0LjEgMTkuOCAxMi44IDIwLjIgMTEuNSAyMC4yQzEwLjIgMjAuMiA4LjkgMTkuOCA3LjkgMTlDOC43IDE3LjcgMTAgMTcgMTEuNSAxN0MxMyAxNyAxNC40IDE3LjggMTUuMSAxOVpNMTMuMSAxMy40QzEzLjEgMTQuMyAxMi40IDE1IDExLjUgMTVDMTAuNiAxNSA5LjkgMTQuMyA5LjkgMTMuNEM5LjkgMTIuNSAxMC42IDExLjggMTEuNSAxMS44QzEyLjQgMTEuOCAxMy4xIDEyLjUgMTMuMSAxMy40Wk0xNS4xIDEzLjRDMTUuMSAxMS40IDEzLjUgOS44IDExLjUgOS44QzkuNSA5LjggNy45IDExLjQgNy45IDEzLjRDNy45IDE0LjIgOC4yIDE1IDguNyAxNS43QzcuOCAxNi4xIDcuMSAxNi44IDYuNSAxNy42QzUuOCAxNi42IDUuNSAxNS41IDUuNSAxNC4zQzUuNSAxMSA4LjIgOC4zIDExLjUgOC4zQzE0LjggOC4zIDE3LjUgMTEgMTcuNSAxNC4zQzE3LjUgMTUuNSAxNy4yIDE2LjYgMTYuNSAxNy42QzE1LjkgMTYuOCAxNS4yIDE2LjIgMTQuMyAxNS43QzE0LjggMTUuMSAxNS4xIDE0LjIgMTUuMSAxMy40Wk0yMSA5LjFDMjEgOC42IDIxLjQgOC4xIDIyIDguMUgyNS41QzI2IDguMSAyNi41IDguNSAyNi41IDkuMUMyNi41IDkuNiAyNi4xIDEwLjEgMjUuNSAxMC4xSDIyQzIxLjQgMTAuMSAyMSA5LjYgMjEgOS4xWk0yMSAxMi41QzIxIDEyIDIxLjQgMTEuNSAyMiAxMS41SDI1LjVDMjYgMTEuNSAyNi41IDExLjkgMjYuNSAxMi41QzI2LjUgMTMgMjYuMSAxMy41IDI1LjUgMTMuNUgyMkMyMS40IDEzLjUgMjEgMTMuMSAyMSAxMi41Wk0yMSAxNkMyMSAxNS41IDIxLjQgMTUgMjIgMTVIMjUuNUMyNiAxNSAyNi41IDE1LjQgMjYuNSAxNkMyNi41IDE2LjUgMjYuMSAxNyAyNS41IDE3SDIyQzIxLjQgMTcgMjEgMTYuNiAyMSAxNlpNMjUuNSAyMC41SDIyQzIxLjUgMjAuNSAyMSAyMC4xIDIxIDE5LjVDMjEgMTguOSAyMS40IDE4LjUgMjIgMTguNUgyNS41QzI2IDE4LjUgMjYuNSAxOC45IDI2LjUgMTkuNUMyNi41IDIwLjEgMjYuMSAyMC41IDI1LjUgMjAuNVoiIGZpbGw9IiNGRjM3NUUiLz4KPC9zdmc+Cg==\"/>\r\n            <h4 class=\"fs-22 fs-md-16 fc-black fw-medium mb-0 flex-grow-1 line-height-1-2\">\r\n              {{ formTitle }}\r\n            </h4>\r\n          </div>\r\n          <div class=\"d-flex align-items-center gap-2 request-info--status-action\">\r\n            <div class=\"d-inline-flex flex-column align-items-end\">\r\n              @if (!isLoading) {\r\n                <ds-status\r\n                  status=\"{{statusClass(form?.header?.status?.['key'])}}\" class=\"header-status\">{{ form?.header?.status?.['value'] }}\r\n                </ds-status>\r\n              }\r\n            </div>\r\n            <div class=\"d-flex align-items-center gap-2\">\r\n              <!-- <ds-button\r\n                 *ngIf=\"form?.inboxItem && (form?.inboxItem?.canRequestFeedback =='true'|| form?.inboxItem?.hasFeedback=='true')\"\r\n                 square icon size=\"small\">\r\n                 <ds-icon icon=\"chat-o\" class=\"fs-20 fs-md-17 fc-coral\">\r\n                   &lt;!&ndash;                  [ngClass]=\"{'fc-green':feedBackIcon == 'feedbackResponded' , 'fc-red': feedBackIcon == 'respondToFeedback' , 'fc-yellow': feedBackIcon == 'waitingFeedback'}\"&ndash;&gt;\r\n                 </ds-icon>\r\n               </ds-button>-->\r\n              <!-- history-->\r\n              <ds-button\r\n                *ngIf=\"form?.commentsDrop?.length > 0 && !isLoading\" square icon size=\"small\"\r\n                (click)=\"onCommentsFormClick()\" class=\"has-comments\">\r\n                <ds-icon icon=\"clock\" class=\"fc-coral fs-20 fs-md-17\"></ds-icon>\r\n              </ds-button>\r\n              <ng-content></ng-content>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"request-info--footer\">\r\n          @if (!isLoading) {\r\n            <ds-avatar\r\n              image=\"{{form?.header?.requesterPhoto}}\" size=\"xx-small\"\r\n              class=\"d-inline-flex cursor-pointer\" (click)=\"showUserInfo()\"></ds-avatar>\r\n          }\r\n          <div\r\n            class=\"d-flex align-items-center flex-wrap flex-grow-1 gap-1 gap-sm-2 line-height-1 request-info--header__details\">\r\n            <span\r\n              [ngClass]=\"{'loading-bg loading-width': isLoading}\"\r\n              class=\"fs-12 fw-medium d-none d-sm-inline-block\">{{ coreService.getShortName(form?.header?.['requesterName']) }}</span>\r\n            <span class=\"fs-20\">&#8226;</span>\r\n            <span class=\"fs-12\" [ngClass]=\"{'loading-bg loading-width': isLoading}\"> {{ form?.header?.formId }}</span>\r\n            <span class=\"fs-20\" *ngIf=\"creationDate\">&#8226;</span>\r\n            <span class=\"fs-12\" [ngClass]=\"{'loading-bg loading-width': isLoading}\"> {{ creationDate }}</span>\r\n          </div>\r\n        </div>\r\n      </section>\r\n    </section>\r\n\r\n  </div>\r\n\r\n\r\n  <!--<ng-container>\r\n    <div class=\"d-flex align-items-center justify-content-end gap-2 my-2\">\r\n      <ds-button\r\n        *ngIf=\"form?.inboxItem && !form.sections[form.sections.length -1].header.readOnly && !isLoading\"\r\n        square\r\n        icon\r\n        size=\"small\"\r\n        [matMenuTriggerFor]=\"menu\"\r\n        class=\"icon-btn-shadow\">\r\n        <ds-icon\r\n          [ngClass]=\"{'fc-purple' : (flagPriority === '0' ||  flagPriority === null),'fc-yellow' : flagPriority === '1','fc-green' : flagPriority === '2','fc-coral' : flagPriority === '3'}\"\r\n          icon=\"flag-o\" class=\"fs-20 fs-md-17 fc-purple\">\r\n        </ds-icon>\r\n      </ds-button>\r\n      <mat-menu #menu=\"matMenu\" panelClass=\"action-menu\">\r\n        <button mat-menu-item (click)=\"setFlagPriority('0')\">\r\n          <ds-icon icon=\"flag-o\" class=\"fc-purple fs-20 fs-md-17\"></ds-icon>\r\n        </button>\r\n        <button mat-menu-item (click)=\"setFlagPriority('1')\">\r\n          <ds-icon icon=\"flag-o\" class=\"fc-yellow fs-20 fs-md-17\"></ds-icon>\r\n        </button>\r\n        <button mat-menu-item (click)=\"setFlagPriority('2')\">\r\n          <ds-icon icon=\"flag-o\" class=\"fc-green fs-20 fs-md-17\"></ds-icon>\r\n        </button>\r\n        <button mat-menu-item (click)=\"setFlagPriority('3')\">\r\n          <ds-icon icon=\"flag-o\" class=\"fc-coral fs-20 fs-md-17\"></ds-icon>\r\n        </button>\r\n      </mat-menu>\r\n\r\n      <ng-content></ng-content>\r\n    </div>\r\n    <header class=\"service-header bc-white p-3 p-sm-4 py-4 gap-3 {{statusClass(form?.header?.status?.['key'])}}\">\r\n\r\n      <div class=\"service-header-icon\">\r\n        <img\r\n          alt=\"\"\r\n          src=\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMjkiIHZpZXdCb3g9IjAgMCAzMCAyOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTI1LjEgMEg0LjlDMi4yIDAgMCAyLjIgMCA0LjlWMjguNkgyNS4xQzI3LjggMjguNiAzMCAyNi40IDMwIDIzLjdWNC45QzMwIDIuMiAyNy44IDAgMjUuMSAwWk0yIDQuOUMyIDMuMyAzLjMgMiA0LjkgMkgyNS4xQzI2LjcgMiAyOCAzLjMgMjggNC45VjIzLjdDMjggMjUuMyAyNi43IDI2LjYgMjUuMSAyNi42SDJWNC45Wk0xMS41IDYuM0M3LjEgNi4zIDMuNSA5LjkgMy41IDE0LjNDMy41IDE4LjcgNy4xIDIyLjMgMTEuNSAyMi4zQzE1LjkgMjIuMyAxOS41IDE4LjcgMTkuNSAxNC4zQzE5LjUgOS45IDE1LjkgNi4zIDExLjUgNi4zWk0xNS4xIDE5QzE0LjEgMTkuOCAxMi44IDIwLjIgMTEuNSAyMC4yQzEwLjIgMjAuMiA4LjkgMTkuOCA3LjkgMTlDOC43IDE3LjcgMTAgMTcgMTEuNSAxN0MxMyAxNyAxNC40IDE3LjggMTUuMSAxOVpNMTMuMSAxMy40QzEzLjEgMTQuMyAxMi40IDE1IDExLjUgMTVDMTAuNiAxNSA5LjkgMTQuMyA5LjkgMTMuNEM5LjkgMTIuNSAxMC42IDExLjggMTEuNSAxMS44QzEyLjQgMTEuOCAxMy4xIDEyLjUgMTMuMSAxMy40Wk0xNS4xIDEzLjRDMTUuMSAxMS40IDEzLjUgOS44IDExLjUgOS44QzkuNSA5LjggNy45IDExLjQgNy45IDEzLjRDNy45IDE0LjIgOC4yIDE1IDguNyAxNS43QzcuOCAxNi4xIDcuMSAxNi44IDYuNSAxNy42QzUuOCAxNi42IDUuNSAxNS41IDUuNSAxNC4zQzUuNSAxMSA4LjIgOC4zIDExLjUgOC4zQzE0LjggOC4zIDE3LjUgMTEgMTcuNSAxNC4zQzE3LjUgMTUuNSAxNy4yIDE2LjYgMTYuNSAxNy42QzE1LjkgMTYuOCAxNS4yIDE2LjIgMTQuMyAxNS43QzE0LjggMTUuMSAxNS4xIDE0LjIgMTUuMSAxMy40Wk0yMSA5LjFDMjEgOC42IDIxLjQgOC4xIDIyIDguMUgyNS41QzI2IDguMSAyNi41IDguNSAyNi41IDkuMUMyNi41IDkuNiAyNi4xIDEwLjEgMjUuNSAxMC4xSDIyQzIxLjQgMTAuMSAyMSA5LjYgMjEgOS4xWk0yMSAxMi41QzIxIDEyIDIxLjQgMTEuNSAyMiAxMS41SDI1LjVDMjYgMTEuNSAyNi41IDExLjkgMjYuNSAxMi41QzI2LjUgMTMgMjYuMSAxMy41IDI1LjUgMTMuNUgyMkMyMS40IDEzLjUgMjEgMTMuMSAyMSAxMi41Wk0yMSAxNkMyMSAxNS41IDIxLjQgMTUgMjIgMTVIMjUuNUMyNiAxNSAyNi41IDE1LjQgMjYuNSAxNkMyNi41IDE2LjUgMjYuMSAxNyAyNS41IDE3SDIyQzIxLjQgMTcgMjEgMTYuNiAyMSAxNlpNMjUuNSAyMC41SDIyQzIxLjUgMjAuNSAyMSAyMC4xIDIxIDE5LjVDMjEgMTguOSAyMS40IDE4LjUgMjIgMTguNUgyNS41QzI2IDE4LjUgMjYuNSAxOC45IDI2LjUgMTkuNUMyNi41IDIwLjEgMjYuMSAyMC41IDI1LjUgMjAuNVoiIGZpbGw9IiNGRjM3NUUiLz4KPC9zdmc+Cg==\"/>\r\n      </div>\r\n\r\n      <div class=\"flex-grow-1 d-flex flex-column flex-sm-row align-items-sm-center gap-2\">\r\n        <div class=\"flex-grow-1\">\r\n          <h1 class=\"fs-20 fs-md-16 fw-bold fc-black header-title m-0\">{{ formTitle }}\r\n            @if (serviceFaq.length) {\r\n              <ds-icon icon=\"info\" class=\"fs-22 fc-dark-gray cursor-pointer\" (click)=\"openFaq()\">\r\n              </ds-icon>\r\n            }\r\n          </h1>\r\n          <div class=\"header-user d-flex align-items-sm-center gap-2 mt-sm-1\">\r\n            @if (!isLoading) {\r\n              <ds-avatar\r\n                image=\"{{form?.header?.requesterPhoto}}\" size=\"xx-small\"\r\n                class=\"d-inline-flex cursor-pointer\" (click)=\"showUserInfo()\"></ds-avatar>\r\n            }\r\n            <span\r\n              class=\"fs-12 text-truncate d-sm-block cursor-pointer\" (click)=\"showUserInfo()\"\r\n              [ngClass]=\"{'loading-bg loading-width': isLoading}\">{{ coreService.getShortName(form?.header?.requesterName) }}</span>\r\n            <mat-divider class=\"divider circle mx-2 d-none d-sm-block\"></mat-divider>\r\n            <span class=\"fs-12\" [ngClass]=\"{'loading-bg loading-width': isLoading}\">{{ form?.header?.formId }}</span>\r\n            @if (creationDate) {\r\n              <mat-divider class=\"divider circle mx-2 d-none d-sm-block\"></mat-divider>\r\n              <span class=\"fs-14\" [ngClass]=\"{'loading-bg loading-width': isLoading}\">{{ creationDate }}</span>\r\n            }\r\n          </div>\r\n\r\n        </div>\r\n        <div class=\"header-actions d-flex flex-row flex-sm-column justify-content-between justify-content-sm-center gap-2 mt-2 mt-sm-0\">\r\n          @if (!isLoading) {\r\n            <ds-status\r\n              status=\"{{statusClass(form?.header?.status?.['key'])}}\" class=\"header-status\">{{ form?.header?.status?.['value'] }}\r\n            </ds-status>\r\n          }\r\n          <div class=\"d-flex align-items-center justify-content-end gap-2\">\r\n            &lt;!&ndash; feedback&ndash;&gt;\r\n            &lt;!&ndash;            *ngIf=\"form?.inboxItem && (form?.inboxItem?.canRequestFeedback ==='true'|| form?.inboxItem?.hasFeedback==='true') && !isLoading\"&ndash;&gt;\r\n            &lt;!&ndash;  <ds-button\r\n                square icon size=\"small\" (click)=\"feedback()\">\r\n                <ds-icon\r\n                  icon=\"chat-o\" class=\"fs-20 fs-md-17 fc-coral\"\r\n                  [ngClass]=\"{'fc-green':feedBackIcon === 'feedbackResponded' , 'fc-red': feedBackIcon === 'respondToFeedback' , 'fc-yellow': feedBackIcon === 'waitingFeedback'}\">\r\n                </ds-icon>\r\n              </ds-button>&ndash;&gt;\r\n            <ds-button\r\n              *ngIf=\"form?.commentsDrop?.length > 0 && !isLoading\" square icon size=\"small\"\r\n              (click)=\"onCommentsFormClick()\" class=\"has-comments\">\r\n              <ds-icon icon=\"clock\" class=\"fc-coral fs-20 fs-md-17\"></ds-icon>\r\n            </ds-button>\r\n            @if (showApprovalHistory) {\r\n              <ng-container>\r\n                <ds-button\r\n                  color=\"white\" shape=\"text\" square size=\"small\" [satPopoverAnchor]=\"workflow\"\r\n                  #workflowAnchor=\"satPopoverAnchor\" (click)=\"workflowAnchor.popover.open()\">\r\n                  <slot name=\"prefix\">\r\n                    <ds-icon icon=\"workflow\" class=\"fs-24\"></ds-icon>\r\n                  </slot>\r\n                </ds-button>\r\n                <sat-popover\r\n                  #workflow [anchor]=\"workflowAnchor\" [hasBackdrop]=\"true\" verticalAlign=\"below\"\r\n                  horizontalAlign=\"end\">\r\n                  <div class=\"default-popover p-3\" style=\"min-width: 330px;\">\r\n                    <ds-approvals *ngIf=\"approvalHistory\" class=\"popover-approvals\" approvalsData=\"{{approvals}}\">\r\n                    </ds-approvals>\r\n                  </div>\r\n                </sat-popover>\r\n              </ng-container>\r\n            }\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n    </header>\r\n  </ng-container>-->\r\n}\r\n", styles: [".loading-width{min-width:100px;width:40px;flex-grow:1}.request-main-info{--item-bg: var(--light-gray);--item-fc: var(--black);--status-container-bc: #e8ebec;--status-container-brc: var(--dark-gray)}.request-main-info.warning{--item-bg: var(--yellow);--status-container-bc: #fff8d9;--status-container-brc: var(--yellow)}.request-main-info.pending{--item-bg: #eff0f1;--status-container-bc: #e8ebec;--status-container-brc: #c8ced1}.request-main-info.expired{--item-bg: var(--dark-gray);--status-container-bc: #e8ebec;--status-container-brc: var(--dark-gray)}.request-main-info.success{--item-bg: var(--green);--status-container-bc: #e6f9f4;--status-container-brc: var(--green)}.request-main-info.info{--item-bg: var(--sea-light);--status-container-bc: #fff8d9;--status-container-brc: var(--sea-light)}.request-main-info.danger{--item-bg: var(--red);--status-container-bc: #fae9ec;--status-container-brc: var(--red)}.request-main-info.orange,.request-main-info.send_back{--item-bg: var(--orange);--status-container-bc: #fff0eb;--status-container-brc: var(--orange)}.request-info{border-radius:0;box-shadow:var(--box-shadow);background-color:var(--white);border-top:5px solid var(--item-bg)}.request-info--footer{padding:.3rem 2rem;min-height:45px;display:flex;align-items:center;gap:.75rem;border-top:1px solid var(--light-gray)}@media (max-width: 578px){.request-info--footer{padding:.3rem 1rem}}.request-info--footer__details{color:var(--item-fc)}.request-info--body{padding:2rem;display:flex;align-items:center;gap:.75rem;background-color:#fff}@media (max-width: 578px){.request-info--body{padding:1rem;flex-direction:column;align-items:stretch}}.request-info--body figure{min-width:30px;width:30px;text-align:center}.request-info--body figure svg{width:100%}@media (max-width: 578px){.request-info--status-action{justify-content:space-between}}.request-info--history{margin-top:-.5rem}.request-info--comment{background-color:#fff0eb;color:var(--orange);border-radius:0 0 4px 4px}.status-container{min-height:40px;padding:.5rem 1rem;display:flex;flex-direction:column;justify-content:center;gap:.5rem;margin-bottom:1.5rem}.status-container.danger{--item-bg: var(--red);--status-container-bc: #fae9ec;--status-container-brc: var(--red)}.status-container ::ng-deep ds-avatar .avatar{--default-size: 18px}.circle-status::part(base){--status-radius: 50%;--status-size: 19px;--status-fs: 100%}ds-button[square]::part(base){--btn-padding: 0;--default-size-sm: 30px}.send-back-container{background-color:#fff0eb;color:var(--orange);padding:.5rem;border-radius:4px}object,iframe,embed{height:79vh}::ng-deep .history-popup{--popup-width: 100vw;--popup-max-width: 100vw;--popup-radius: 15px 15px 0 0;position:absolute!important;bottom:0}:host ::ng-deep .mat-expansion-panel-content{background:#fff!important}:host .main-sidenav.main-sidenav-full .sidenav-title{border-bottom:transparent!important}:host .main-sidenav .sidenav-title{background-color:transparent!important}:host .main-sidenav{height:60px;min-height:10px!important}:host .mat-expansion-panel-content{background:#fff!important}:host .approval-panel-container{display:grid;grid-template-columns:40% calc(60% - 45px) 20px;grid-template-areas:\"title details toggle\";gap:.75rem;place-content:space-between;align-items:center;flex-grow:1;width:100%}@media (max-width: 991px){:host .approval-panel-container{grid-template-columns:calc(100% - 45px) 20px;grid-template-areas:\"title toggle\" \"details details\"}}:host .approval-panel-container .approval-panel-title{grid-area:title}:host .approval-panel-container .panel-user-name{max-width:120px}@media (max-width: 768px){:host .approval-panel-container .panel-user-name.panel-ueser-only{max-width:140px}:host .approval-panel-container .panel-user-name:not(.panel-ueser-only){max-width:90px}}:host .approval-panel-container .approval-panel-details{display:flex;align-items:center;justify-content:space-between;grid-area:details}:host .approval-panel-container .approval-panel-toggle{grid-area:toggle;display:flex;align-items:center;justify-content:center;width:20px}:host ::ng-deep ds-avatar.user-avatar .avatar{--default-size: 25px}@media (min-width: 768px){:host ::ng-deep ds-avatar.user-avatar .avatar{--default-size: 31px;--avatar-border: 3px solid var(--light-gray)}}@media (min-width: 768px){:host ::ng-deep .user-avatar-name{padding-inline-end:1rem!important}}:host .circle-status::part(base){--status-radius: 50%;--status-size: 18px;--status-fs: 80% }:host .panel-title{min-width:40%;width:40%}@media (max-width: 576px){:host .panel-title{min-width:100%!important;width:100%!important}}:host .panel-user-status{min-width:60%;width:60%;display:flex;align-items:center;justify-content:space-between}@media (max-width: 576px){:host .panel-user-status{min-width:100%!important;width:100%!important}:host .panel-user-status .user-delegate{min-width:auto}:host .panel-user-status .main-status::part(base){--status-width: 50px}}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SatPopoverModule }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+        ], ngImport: i0, template: "@if (form?.header?.status?.['key'] === 'NEW') {\r\n  <section\r\n    class=\"main-sidenav main-sidenav-full mb-4\"\r\n\r\n  >\r\n    <div class=\"sidenav-title\">\r\n      <div class=\"d-flex align-items-center gap-3 w-100\">\r\n        <!-- <ds-button icon class=\"rotate-arrow\" size=\"small\" (click)=\"goBack()\" *ngIf=\"!isInMobileApp() && showBack\">\r\n           <ds-icon icon=\"arrow-right\" class=\"fs-19 fc-black\"></ds-icon>\r\n         </ds-button>-->\r\n\r\n        <!--  <h3 class=\"flex-grow-0\">\r\n            {{ formTitle }}\r\n          </h3>-->\r\n\r\n        <section>\r\n          <h6 class=\"fs-14 fs-md-12 fw-normal fc-dark-gray mb-0\">\r\n            {{ i18n.translate('Hello') }}\r\n            {{ coreService.getShortName(form?.header?.requesterName) }}, {{ i18n.translate('welcomeBack') }}!\r\n          </h6>\r\n          <h1 class=\"fs-26 fs-md-20 fw-bold fc-black d-flex align-items-center gap-2 mb-1\">\r\n            {{ formTitle }}\r\n            @if (serviceFaq.length) {\r\n              <ds-icon icon=\"info\" class=\"fs-22 fc-dark-gray cursor-pointer\" (click)=\"openFaq()\">\r\n              </ds-icon>\r\n            }\r\n          </h1>\r\n        </section>\r\n        <div class=\"d-flex align-items-center justify-content-end gap-2 flex-grow-1\">\r\n          @if (serviceFaq.length) {\r\n            <ds-button size=\"small\" icon>\r\n              <ds-icon icon=\"info\" class=\"fs-22 fc-dark-gray cursor-pointer\" (click)=\"openFaq()\">\r\n              </ds-icon>\r\n            </ds-button>\r\n          }\r\n          <!-- <ds-button size=\"small\" icon (click)=\"openWorkflow()\">\r\n            <ds-icon icon=\"bell-2-o\" class=\"fs-20 fc-coral\"></ds-icon>\r\n          </ds-button> -->\r\n          @if (!isReadOnly) {\r\n            <ds-button size=\"small\" icon (click)=\"showPreviousRequests()\">\r\n              <ds-icon icon=\"clock\" class=\"fs-20 fc-coral\"></ds-icon>\r\n            </ds-button>\r\n          }\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </section>\r\n\r\n  <!--  <header class=\"mb-4 mt-4 d-flex align-items-center justify-content-between align-items-end gap-2\">\r\n      <section>\r\n        <h6 class=\"fs-14 fs-md-12 fw-normal fc-dark-gray mb-0\">\r\n          {{ i18n.translate('Hello') }}\r\n          {{ coreService.getShortName(form?.header?.requesterName) }}, {{ i18n.translate('welcomeBack') }}!\r\n        </h6>\r\n        <h1 class=\"fs-26 fs-md-20 fw-bold fc-black d-flex align-items-center gap-2 mb-1\">\r\n          {{ formTitle }}\r\n          @if (serviceFaq.length) {\r\n            <ds-icon icon=\"info\" class=\"fs-22 fc-dark-gray cursor-pointer\" (click)=\"openFaq()\">\r\n            </ds-icon>\r\n          }\r\n        </h1>\r\n      </section>\r\n    </header>-->\r\n} @else {\r\n\r\n  <div class=\"w-100\">\r\n    <section class=\"request-main-info  {{statusClass(form?.header?.status?.['key'])}}\">\r\n      <section class=\"request-info\">\r\n        <div class=\"request-info--body\">\r\n          <div class=\"d-flex align-items-center gap-2 flex-grow-1\">\r\n            <img\r\n              alt=\"\"\r\n              src=\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMjkiIHZpZXdCb3g9IjAgMCAzMCAyOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTI1LjEgMEg0LjlDMi4yIDAgMCAyLjIgMCA0LjlWMjguNkgyNS4xQzI3LjggMjguNiAzMCAyNi40IDMwIDIzLjdWNC45QzMwIDIuMiAyNy44IDAgMjUuMSAwWk0yIDQuOUMyIDMuMyAzLjMgMiA0LjkgMkgyNS4xQzI2LjcgMiAyOCAzLjMgMjggNC45VjIzLjdDMjggMjUuMyAyNi43IDI2LjYgMjUuMSAyNi42SDJWNC45Wk0xMS41IDYuM0M3LjEgNi4zIDMuNSA5LjkgMy41IDE0LjNDMy41IDE4LjcgNy4xIDIyLjMgMTEuNSAyMi4zQzE1LjkgMjIuMyAxOS41IDE4LjcgMTkuNSAxNC4zQzE5LjUgOS45IDE1LjkgNi4zIDExLjUgNi4zWk0xNS4xIDE5QzE0LjEgMTkuOCAxMi44IDIwLjIgMTEuNSAyMC4yQzEwLjIgMjAuMiA4LjkgMTkuOCA3LjkgMTlDOC43IDE3LjcgMTAgMTcgMTEuNSAxN0MxMyAxNyAxNC40IDE3LjggMTUuMSAxOVpNMTMuMSAxMy40QzEzLjEgMTQuMyAxMi40IDE1IDExLjUgMTVDMTAuNiAxNSA5LjkgMTQuMyA5LjkgMTMuNEM5LjkgMTIuNSAxMC42IDExLjggMTEuNSAxMS44QzEyLjQgMTEuOCAxMy4xIDEyLjUgMTMuMSAxMy40Wk0xNS4xIDEzLjRDMTUuMSAxMS40IDEzLjUgOS44IDExLjUgOS44QzkuNSA5LjggNy45IDExLjQgNy45IDEzLjRDNy45IDE0LjIgOC4yIDE1IDguNyAxNS43QzcuOCAxNi4xIDcuMSAxNi44IDYuNSAxNy42QzUuOCAxNi42IDUuNSAxNS41IDUuNSAxNC4zQzUuNSAxMSA4LjIgOC4zIDExLjUgOC4zQzE0LjggOC4zIDE3LjUgMTEgMTcuNSAxNC4zQzE3LjUgMTUuNSAxNy4yIDE2LjYgMTYuNSAxNy42QzE1LjkgMTYuOCAxNS4yIDE2LjIgMTQuMyAxNS43QzE0LjggMTUuMSAxNS4xIDE0LjIgMTUuMSAxMy40Wk0yMSA5LjFDMjEgOC42IDIxLjQgOC4xIDIyIDguMUgyNS41QzI2IDguMSAyNi41IDguNSAyNi41IDkuMUMyNi41IDkuNiAyNi4xIDEwLjEgMjUuNSAxMC4xSDIyQzIxLjQgMTAuMSAyMSA5LjYgMjEgOS4xWk0yMSAxMi41QzIxIDEyIDIxLjQgMTEuNSAyMiAxMS41SDI1LjVDMjYgMTEuNSAyNi41IDExLjkgMjYuNSAxMi41QzI2LjUgMTMgMjYuMSAxMy41IDI1LjUgMTMuNUgyMkMyMS40IDEzLjUgMjEgMTMuMSAyMSAxMi41Wk0yMSAxNkMyMSAxNS41IDIxLjQgMTUgMjIgMTVIMjUuNUMyNiAxNSAyNi41IDE1LjQgMjYuNSAxNkMyNi41IDE2LjUgMjYuMSAxNyAyNS41IDE3SDIyQzIxLjQgMTcgMjEgMTYuNiAyMSAxNlpNMjUuNSAyMC41SDIyQzIxLjUgMjAuNSAyMSAyMC4xIDIxIDE5LjVDMjEgMTguOSAyMS40IDE4LjUgMjIgMTguNUgyNS41QzI2IDE4LjUgMjYuNSAxOC45IDI2LjUgMTkuNUMyNi41IDIwLjEgMjYuMSAyMC41IDI1LjUgMjAuNVoiIGZpbGw9IiNGRjM3NUUiLz4KPC9zdmc+Cg==\"/>\r\n            <h4 class=\"fs-22 fs-md-16 fc-black fw-medium mb-0 flex-grow-1 line-height-1-2\">\r\n              {{ formTitle }}\r\n            </h4>\r\n          </div>\r\n          <div class=\"d-flex align-items-center gap-2 request-info--status-action\">\r\n            <div class=\"d-inline-flex flex-column align-items-end\">\r\n              @if (!isLoading) {\r\n                <ds-status\r\n                  status=\"{{statusClass(form?.header?.status?.['key'])}}\" class=\"header-status\">{{ form?.header?.status?.['value'] }}\r\n                </ds-status>\r\n              }\r\n            </div>\r\n            <div class=\"d-flex align-items-center gap-2\">\r\n              <!-- <ds-button\r\n                 *ngIf=\"form?.inboxItem && (form?.inboxItem?.canRequestFeedback =='true'|| form?.inboxItem?.hasFeedback=='true')\"\r\n                 square icon size=\"small\">\r\n                 <ds-icon icon=\"chat-o\" class=\"fs-20 fs-md-17 fc-coral\">\r\n                   &lt;!&ndash;                  [ngClass]=\"{'fc-green':feedBackIcon == 'feedbackResponded' , 'fc-red': feedBackIcon == 'respondToFeedback' , 'fc-yellow': feedBackIcon == 'waitingFeedback'}\"&ndash;&gt;\r\n                 </ds-icon>\r\n               </ds-button>-->\r\n              <!-- history-->\r\n              <ds-button\r\n                *ngIf=\"form?.commentsDrop?.length > 0 && !isLoading\" square icon size=\"small\"\r\n                (click)=\"onCommentsFormClick()\" class=\"has-comments\">\r\n                <ds-icon icon=\"clock\" class=\"fc-coral fs-20 fs-md-17\"></ds-icon>\r\n              </ds-button>\r\n              <ng-content></ng-content>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"request-info--footer\">\r\n          @if (!isLoading) {\r\n            <ds-avatar\r\n              image=\"{{form?.header?.requesterPhoto}}\" size=\"xx-small\"\r\n              class=\"d-inline-flex cursor-pointer\" (click)=\"showUserInfo()\"></ds-avatar>\r\n          }\r\n          <div\r\n            class=\"d-flex align-items-center flex-wrap flex-grow-1 gap-1 gap-sm-2 line-height-1 request-info--header__details\">\r\n            <span\r\n              [ngClass]=\"{'loading-bg loading-width': isLoading}\"\r\n              class=\"fs-12 fw-medium d-none d-sm-inline-block\">{{ coreService.getShortName(form?.header?.['requesterName']) }}</span>\r\n            <span class=\"fs-20\">&#8226;</span>\r\n            <span class=\"fs-12\" [ngClass]=\"{'loading-bg loading-width': isLoading}\"> {{ form?.header?.formId }}</span>\r\n            <span class=\"fs-20\" *ngIf=\"creationDate\">&#8226;</span>\r\n            <span class=\"fs-12\" [ngClass]=\"{'loading-bg loading-width': isLoading}\"> {{ creationDate }}</span>\r\n          </div>\r\n        </div>\r\n      </section>\r\n    </section>\r\n\r\n  </div>\r\n\r\n\r\n  <!--<ng-container>\r\n    <div class=\"d-flex align-items-center justify-content-end gap-2 my-2\">\r\n      <ds-button\r\n        *ngIf=\"form?.inboxItem && !form.sections[form.sections.length -1].header.readOnly && !isLoading\"\r\n        square\r\n        icon\r\n        size=\"small\"\r\n        [matMenuTriggerFor]=\"menu\"\r\n        class=\"icon-btn-shadow\">\r\n        <ds-icon\r\n          [ngClass]=\"{'fc-purple' : (flagPriority === '0' ||  flagPriority === null),'fc-yellow' : flagPriority === '1','fc-green' : flagPriority === '2','fc-coral' : flagPriority === '3'}\"\r\n          icon=\"flag-o\" class=\"fs-20 fs-md-17 fc-purple\">\r\n        </ds-icon>\r\n      </ds-button>\r\n      <mat-menu #menu=\"matMenu\" panelClass=\"action-menu\">\r\n        <button mat-menu-item (click)=\"setFlagPriority('0')\">\r\n          <ds-icon icon=\"flag-o\" class=\"fc-purple fs-20 fs-md-17\"></ds-icon>\r\n        </button>\r\n        <button mat-menu-item (click)=\"setFlagPriority('1')\">\r\n          <ds-icon icon=\"flag-o\" class=\"fc-yellow fs-20 fs-md-17\"></ds-icon>\r\n        </button>\r\n        <button mat-menu-item (click)=\"setFlagPriority('2')\">\r\n          <ds-icon icon=\"flag-o\" class=\"fc-green fs-20 fs-md-17\"></ds-icon>\r\n        </button>\r\n        <button mat-menu-item (click)=\"setFlagPriority('3')\">\r\n          <ds-icon icon=\"flag-o\" class=\"fc-coral fs-20 fs-md-17\"></ds-icon>\r\n        </button>\r\n      </mat-menu>\r\n\r\n      <ng-content></ng-content>\r\n    </div>\r\n    <header class=\"service-header bc-white p-3 p-sm-4 py-4 gap-3 {{statusClass(form?.header?.status?.['key'])}}\">\r\n\r\n      <div class=\"service-header-icon\">\r\n        <img\r\n          alt=\"\"\r\n          src=\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMjkiIHZpZXdCb3g9IjAgMCAzMCAyOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTI1LjEgMEg0LjlDMi4yIDAgMCAyLjIgMCA0LjlWMjguNkgyNS4xQzI3LjggMjguNiAzMCAyNi40IDMwIDIzLjdWNC45QzMwIDIuMiAyNy44IDAgMjUuMSAwWk0yIDQuOUMyIDMuMyAzLjMgMiA0LjkgMkgyNS4xQzI2LjcgMiAyOCAzLjMgMjggNC45VjIzLjdDMjggMjUuMyAyNi43IDI2LjYgMjUuMSAyNi42SDJWNC45Wk0xMS41IDYuM0M3LjEgNi4zIDMuNSA5LjkgMy41IDE0LjNDMy41IDE4LjcgNy4xIDIyLjMgMTEuNSAyMi4zQzE1LjkgMjIuMyAxOS41IDE4LjcgMTkuNSAxNC4zQzE5LjUgOS45IDE1LjkgNi4zIDExLjUgNi4zWk0xNS4xIDE5QzE0LjEgMTkuOCAxMi44IDIwLjIgMTEuNSAyMC4yQzEwLjIgMjAuMiA4LjkgMTkuOCA3LjkgMTlDOC43IDE3LjcgMTAgMTcgMTEuNSAxN0MxMyAxNyAxNC40IDE3LjggMTUuMSAxOVpNMTMuMSAxMy40QzEzLjEgMTQuMyAxMi40IDE1IDExLjUgMTVDMTAuNiAxNSA5LjkgMTQuMyA5LjkgMTMuNEM5LjkgMTIuNSAxMC42IDExLjggMTEuNSAxMS44QzEyLjQgMTEuOCAxMy4xIDEyLjUgMTMuMSAxMy40Wk0xNS4xIDEzLjRDMTUuMSAxMS40IDEzLjUgOS44IDExLjUgOS44QzkuNSA5LjggNy45IDExLjQgNy45IDEzLjRDNy45IDE0LjIgOC4yIDE1IDguNyAxNS43QzcuOCAxNi4xIDcuMSAxNi44IDYuNSAxNy42QzUuOCAxNi42IDUuNSAxNS41IDUuNSAxNC4zQzUuNSAxMSA4LjIgOC4zIDExLjUgOC4zQzE0LjggOC4zIDE3LjUgMTEgMTcuNSAxNC4zQzE3LjUgMTUuNSAxNy4yIDE2LjYgMTYuNSAxNy42QzE1LjkgMTYuOCAxNS4yIDE2LjIgMTQuMyAxNS43QzE0LjggMTUuMSAxNS4xIDE0LjIgMTUuMSAxMy40Wk0yMSA5LjFDMjEgOC42IDIxLjQgOC4xIDIyIDguMUgyNS41QzI2IDguMSAyNi41IDguNSAyNi41IDkuMUMyNi41IDkuNiAyNi4xIDEwLjEgMjUuNSAxMC4xSDIyQzIxLjQgMTAuMSAyMSA5LjYgMjEgOS4xWk0yMSAxMi41QzIxIDEyIDIxLjQgMTEuNSAyMiAxMS41SDI1LjVDMjYgMTEuNSAyNi41IDExLjkgMjYuNSAxMi41QzI2LjUgMTMgMjYuMSAxMy41IDI1LjUgMTMuNUgyMkMyMS40IDEzLjUgMjEgMTMuMSAyMSAxMi41Wk0yMSAxNkMyMSAxNS41IDIxLjQgMTUgMjIgMTVIMjUuNUMyNiAxNSAyNi41IDE1LjQgMjYuNSAxNkMyNi41IDE2LjUgMjYuMSAxNyAyNS41IDE3SDIyQzIxLjQgMTcgMjEgMTYuNiAyMSAxNlpNMjUuNSAyMC41SDIyQzIxLjUgMjAuNSAyMSAyMC4xIDIxIDE5LjVDMjEgMTguOSAyMS40IDE4LjUgMjIgMTguNUgyNS41QzI2IDE4LjUgMjYuNSAxOC45IDI2LjUgMTkuNUMyNi41IDIwLjEgMjYuMSAyMC41IDI1LjUgMjAuNVoiIGZpbGw9IiNGRjM3NUUiLz4KPC9zdmc+Cg==\"/>\r\n      </div>\r\n\r\n      <div class=\"flex-grow-1 d-flex flex-column flex-sm-row align-items-sm-center gap-2\">\r\n        <div class=\"flex-grow-1\">\r\n          <h1 class=\"fs-20 fs-md-16 fw-bold fc-black header-title m-0\">{{ formTitle }}\r\n            @if (serviceFaq.length) {\r\n              <ds-icon icon=\"info\" class=\"fs-22 fc-dark-gray cursor-pointer\" (click)=\"openFaq()\">\r\n              </ds-icon>\r\n            }\r\n          </h1>\r\n          <div class=\"header-user d-flex align-items-sm-center gap-2 mt-sm-1\">\r\n            @if (!isLoading) {\r\n              <ds-avatar\r\n                image=\"{{form?.header?.requesterPhoto}}\" size=\"xx-small\"\r\n                class=\"d-inline-flex cursor-pointer\" (click)=\"showUserInfo()\"></ds-avatar>\r\n            }\r\n            <span\r\n              class=\"fs-12 text-truncate d-sm-block cursor-pointer\" (click)=\"showUserInfo()\"\r\n              [ngClass]=\"{'loading-bg loading-width': isLoading}\">{{ coreService.getShortName(form?.header?.requesterName) }}</span>\r\n            <mat-divider class=\"divider circle mx-2 d-none d-sm-block\"></mat-divider>\r\n            <span class=\"fs-12\" [ngClass]=\"{'loading-bg loading-width': isLoading}\">{{ form?.header?.formId }}</span>\r\n            @if (creationDate) {\r\n              <mat-divider class=\"divider circle mx-2 d-none d-sm-block\"></mat-divider>\r\n              <span class=\"fs-14\" [ngClass]=\"{'loading-bg loading-width': isLoading}\">{{ creationDate }}</span>\r\n            }\r\n          </div>\r\n\r\n        </div>\r\n        <div class=\"header-actions d-flex flex-row flex-sm-column justify-content-between justify-content-sm-center gap-2 mt-2 mt-sm-0\">\r\n          @if (!isLoading) {\r\n            <ds-status\r\n              status=\"{{statusClass(form?.header?.status?.['key'])}}\" class=\"header-status\">{{ form?.header?.status?.['value'] }}\r\n            </ds-status>\r\n          }\r\n          <div class=\"d-flex align-items-center justify-content-end gap-2\">\r\n            &lt;!&ndash; feedback&ndash;&gt;\r\n            &lt;!&ndash;            *ngIf=\"form?.inboxItem && (form?.inboxItem?.canRequestFeedback ==='true'|| form?.inboxItem?.hasFeedback==='true') && !isLoading\"&ndash;&gt;\r\n            &lt;!&ndash;  <ds-button\r\n                square icon size=\"small\" (click)=\"feedback()\">\r\n                <ds-icon\r\n                  icon=\"chat-o\" class=\"fs-20 fs-md-17 fc-coral\"\r\n                  [ngClass]=\"{'fc-green':feedBackIcon === 'feedbackResponded' , 'fc-red': feedBackIcon === 'respondToFeedback' , 'fc-yellow': feedBackIcon === 'waitingFeedback'}\">\r\n                </ds-icon>\r\n              </ds-button>&ndash;&gt;\r\n            <ds-button\r\n              *ngIf=\"form?.commentsDrop?.length > 0 && !isLoading\" square icon size=\"small\"\r\n              (click)=\"onCommentsFormClick()\" class=\"has-comments\">\r\n              <ds-icon icon=\"clock\" class=\"fc-coral fs-20 fs-md-17\"></ds-icon>\r\n            </ds-button>\r\n            @if (showApprovalHistory) {\r\n              <ng-container>\r\n                <ds-button\r\n                  color=\"white\" shape=\"text\" square size=\"small\" [satPopoverAnchor]=\"workflow\"\r\n                  #workflowAnchor=\"satPopoverAnchor\" (click)=\"workflowAnchor.popover.open()\">\r\n                  <slot name=\"prefix\">\r\n                    <ds-icon icon=\"workflow\" class=\"fs-24\"></ds-icon>\r\n                  </slot>\r\n                </ds-button>\r\n                <sat-popover\r\n                  #workflow [anchor]=\"workflowAnchor\" [hasBackdrop]=\"true\" verticalAlign=\"below\"\r\n                  horizontalAlign=\"end\">\r\n                  <div class=\"default-popover p-3\" style=\"min-width: 330px;\">\r\n                    <ds-approvals *ngIf=\"approvalHistory\" class=\"popover-approvals\" approvalsData=\"{{approvals}}\">\r\n                    </ds-approvals>\r\n                  </div>\r\n                </sat-popover>\r\n              </ng-container>\r\n            }\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n    </header>\r\n  </ng-container>-->\r\n}\r\n", styles: [".loading-width{min-width:100px;width:40px;flex-grow:1}.request-main-info{--item-bg: var(--light-gray);--item-fc: var(--black);--status-container-bc: #e8ebec;--status-container-brc: var(--dark-gray)}.request-main-info.warning{--item-bg: var(--yellow);--status-container-bc: #fff8d9;--status-container-brc: var(--yellow)}.request-main-info.pending{--item-bg: #eff0f1;--status-container-bc: #e8ebec;--status-container-brc: #c8ced1}.request-main-info.expired{--item-bg: var(--dark-gray);--status-container-bc: #e8ebec;--status-container-brc: var(--dark-gray)}.request-main-info.success{--item-bg: var(--green);--status-container-bc: #e6f9f4;--status-container-brc: var(--green)}.request-main-info.info{--item-bg: var(--sea-light);--status-container-bc: #fff8d9;--status-container-brc: var(--sea-light)}.request-main-info.danger{--item-bg: var(--red);--status-container-bc: #fae9ec;--status-container-brc: var(--red)}.request-main-info.orange,.request-main-info.send_back{--item-bg: var(--orange);--status-container-bc: #fff0eb;--status-container-brc: var(--orange)}.request-info{border-radius:0;box-shadow:var(--box-shadow);background-color:var(--white);border-top:5px solid var(--item-bg)}.request-info--footer{padding:.3rem 2rem;min-height:45px;display:flex;align-items:center;gap:.75rem;border-top:1px solid var(--light-gray)}@media (max-width: 578px){.request-info--footer{padding:.3rem 1rem}}.request-info--footer__details{color:var(--item-fc)}.request-info--body{padding:2rem;display:flex;align-items:center;gap:.75rem;background-color:#fff}@media (max-width: 578px){.request-info--body{padding:1rem;flex-direction:column;align-items:stretch}}.request-info--body figure{min-width:30px;width:30px;text-align:center}.request-info--body figure svg{width:100%}@media (max-width: 578px){.request-info--status-action{justify-content:space-between}}.request-info--history{margin-top:-.5rem}.request-info--comment{background-color:#fff0eb;color:var(--orange);border-radius:0 0 4px 4px}.status-container{min-height:40px;padding:.5rem 1rem;display:flex;flex-direction:column;justify-content:center;gap:.5rem;margin-bottom:1.5rem}.status-container.danger{--item-bg: var(--red);--status-container-bc: #fae9ec;--status-container-brc: var(--red)}.status-container ::ng-deep ds-avatar .avatar{--default-size: 18px}.circle-status::part(base){--status-radius: 50%;--status-size: 19px;--status-fs: 100%}ds-button[square]::part(base){--btn-padding: 0;--default-size-sm: 30px}.send-back-container{background-color:#fff0eb;color:var(--orange);padding:.5rem;border-radius:4px}object,iframe,embed{height:79vh}::ng-deep .history-popup{--popup-width: 100vw;--popup-max-width: 100vw;--popup-radius: 15px 15px 0 0;position:absolute!important;bottom:0}:host ::ng-deep .mat-expansion-panel-content{background:#fff!important}:host .main-sidenav.main-sidenav-full .sidenav-title{border-bottom:transparent!important}:host .main-sidenav .sidenav-title{background-color:transparent!important}:host .main-sidenav{height:60px;min-height:10px!important}:host .mat-expansion-panel-content{background:#fff!important}:host .approval-panel-container{display:grid;grid-template-columns:40% calc(60% - 45px) 20px;grid-template-areas:\"title details toggle\";gap:.75rem;place-content:space-between;align-items:center;flex-grow:1;width:100%}@media (max-width: 991px){:host .approval-panel-container{grid-template-columns:calc(100% - 45px) 20px;grid-template-areas:\"title toggle\" \"details details\"}}:host .approval-panel-container .approval-panel-title{grid-area:title}:host .approval-panel-container .panel-user-name{max-width:120px}@media (max-width: 768px){:host .approval-panel-container .panel-user-name.panel-ueser-only{max-width:140px}:host .approval-panel-container .panel-user-name:not(.panel-ueser-only){max-width:90px}}:host .approval-panel-container .approval-panel-details{display:flex;align-items:center;justify-content:space-between;grid-area:details}:host .approval-panel-container .approval-panel-toggle{grid-area:toggle;display:flex;align-items:center;justify-content:center;width:20px}:host ::ng-deep ds-avatar.user-avatar .avatar{--default-size: 25px}@media (min-width: 768px){:host ::ng-deep ds-avatar.user-avatar .avatar{--default-size: 31px;--avatar-border: 3px solid var(--light-gray)}}@media (min-width: 768px){:host ::ng-deep .user-avatar-name{padding-inline-end:1rem!important}}:host .circle-status::part(base){--status-radius: 50%;--status-size: 18px;--status-fs: 80% }:host .panel-title{min-width:40%;width:40%}@media (max-width: 576px){:host .panel-title{min-width:100%!important;width:100%!important}}:host .panel-user-status{min-width:60%;width:60%;display:flex;align-items:center;justify-content:space-between}@media (max-width: 576px){:host .panel-user-status{min-width:100%!important;width:100%!important}:host .panel-user-status .user-delegate{min-width:auto}:host .panel-user-status .main-status::part(base){--status-width: 50px}}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SatPopoverModule }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ServiceHeaderComponent, decorators: [{
             type: Component,
@@ -5830,13 +5734,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                         MatMenuItem
                     ], schemas: [CUSTOM_ELEMENTS_SCHEMA], providers: [FeedBackService,
                         { provide: MAT_DIALOG_DATA, useValue: {} },
-                    ], template: "@if (form?.header?.status?.['key'] === 'NEW') {\r\n  <section\r\n    class=\"main-sidenav main-sidenav-full mb-4\"\r\n\r\n  >\r\n    <div class=\"sidenav-title\">\r\n      <div class=\"d-flex align-items-center gap-3 w-100\">\r\n        <!-- <ds-button icon class=\"rotate-arrow\" size=\"small\" (click)=\"goBack()\" *ngIf=\"!isInMobileApp() && showBack\">\r\n           <ds-icon icon=\"arrow-right\" class=\"fs-19 fc-black\"></ds-icon>\r\n         </ds-button>-->\r\n\r\n        <!--  <h3 class=\"flex-grow-0\">\r\n            {{ formTitle }}\r\n          </h3>-->\r\n\r\n        <section>\r\n          <h6 class=\"fs-14 fs-md-12 fw-normal fc-dark-gray mb-0\">\r\n            {{ i18n.translate('Hello') }}\r\n            {{ coreService.getShortName(form?.header?.requesterName) }}, {{ i18n.translate('welcomeBack') }}!\r\n          </h6>\r\n          <h1 class=\"fs-26 fs-md-20 fw-bold fc-black d-flex align-items-center gap-2 mb-1\">\r\n            {{ formTitle }}\r\n            @if (serviceFaq.length) {\r\n              <ds-icon icon=\"info\" class=\"fs-22 fc-dark-gray cursor-pointer\" (click)=\"openFaq()\">\r\n              </ds-icon>\r\n            }\r\n          </h1>\r\n        </section>\r\n        <div class=\"d-flex align-items-center justify-content-end gap-2 flex-grow-1\">\r\n          @if (serviceFaq.length) {\r\n            <ds-button size=\"small\" icon>\r\n              <ds-icon icon=\"info\" class=\"fs-22 fc-dark-gray cursor-pointer\" (click)=\"openFaq()\">\r\n              </ds-icon>\r\n            </ds-button>\r\n          }\r\n          <!-- <ds-button size=\"small\" icon (click)=\"openWorkflow()\">\r\n            <ds-icon icon=\"bell-2-o\" class=\"fs-20 fc-coral\"></ds-icon>\r\n          </ds-button> -->\r\n          <ds-button size=\"small\" icon (click)=\"showPreviousRequests()\" >\r\n            <ds-icon icon=\"clock\" class=\"fs-20 fc-coral\"></ds-icon>\r\n          </ds-button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </section>\r\n\r\n  <!--  <header class=\"mb-4 mt-4 d-flex align-items-center justify-content-between align-items-end gap-2\">\r\n      <section>\r\n        <h6 class=\"fs-14 fs-md-12 fw-normal fc-dark-gray mb-0\">\r\n          {{ i18n.translate('Hello') }}\r\n          {{ coreService.getShortName(form?.header?.requesterName) }}, {{ i18n.translate('welcomeBack') }}!\r\n        </h6>\r\n        <h1 class=\"fs-26 fs-md-20 fw-bold fc-black d-flex align-items-center gap-2 mb-1\">\r\n          {{ formTitle }}\r\n          @if (serviceFaq.length) {\r\n            <ds-icon icon=\"info\" class=\"fs-22 fc-dark-gray cursor-pointer\" (click)=\"openFaq()\">\r\n            </ds-icon>\r\n          }\r\n        </h1>\r\n      </section>\r\n    </header>-->\r\n} @else {\r\n\r\n  <div class=\"w-100\">\r\n    <section class=\"request-main-info  {{statusClass(form?.header?.status?.['key'])}}\">\r\n      <section class=\"request-info\">\r\n        <div class=\"request-info--body\">\r\n          <div class=\"d-flex align-items-center gap-2 flex-grow-1\">\r\n            <img\r\n              alt=\"\"\r\n              src=\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMjkiIHZpZXdCb3g9IjAgMCAzMCAyOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTI1LjEgMEg0LjlDMi4yIDAgMCAyLjIgMCA0LjlWMjguNkgyNS4xQzI3LjggMjguNiAzMCAyNi40IDMwIDIzLjdWNC45QzMwIDIuMiAyNy44IDAgMjUuMSAwWk0yIDQuOUMyIDMuMyAzLjMgMiA0LjkgMkgyNS4xQzI2LjcgMiAyOCAzLjMgMjggNC45VjIzLjdDMjggMjUuMyAyNi43IDI2LjYgMjUuMSAyNi42SDJWNC45Wk0xMS41IDYuM0M3LjEgNi4zIDMuNSA5LjkgMy41IDE0LjNDMy41IDE4LjcgNy4xIDIyLjMgMTEuNSAyMi4zQzE1LjkgMjIuMyAxOS41IDE4LjcgMTkuNSAxNC4zQzE5LjUgOS45IDE1LjkgNi4zIDExLjUgNi4zWk0xNS4xIDE5QzE0LjEgMTkuOCAxMi44IDIwLjIgMTEuNSAyMC4yQzEwLjIgMjAuMiA4LjkgMTkuOCA3LjkgMTlDOC43IDE3LjcgMTAgMTcgMTEuNSAxN0MxMyAxNyAxNC40IDE3LjggMTUuMSAxOVpNMTMuMSAxMy40QzEzLjEgMTQuMyAxMi40IDE1IDExLjUgMTVDMTAuNiAxNSA5LjkgMTQuMyA5LjkgMTMuNEM5LjkgMTIuNSAxMC42IDExLjggMTEuNSAxMS44QzEyLjQgMTEuOCAxMy4xIDEyLjUgMTMuMSAxMy40Wk0xNS4xIDEzLjRDMTUuMSAxMS40IDEzLjUgOS44IDExLjUgOS44QzkuNSA5LjggNy45IDExLjQgNy45IDEzLjRDNy45IDE0LjIgOC4yIDE1IDguNyAxNS43QzcuOCAxNi4xIDcuMSAxNi44IDYuNSAxNy42QzUuOCAxNi42IDUuNSAxNS41IDUuNSAxNC4zQzUuNSAxMSA4LjIgOC4zIDExLjUgOC4zQzE0LjggOC4zIDE3LjUgMTEgMTcuNSAxNC4zQzE3LjUgMTUuNSAxNy4yIDE2LjYgMTYuNSAxNy42QzE1LjkgMTYuOCAxNS4yIDE2LjIgMTQuMyAxNS43QzE0LjggMTUuMSAxNS4xIDE0LjIgMTUuMSAxMy40Wk0yMSA5LjFDMjEgOC42IDIxLjQgOC4xIDIyIDguMUgyNS41QzI2IDguMSAyNi41IDguNSAyNi41IDkuMUMyNi41IDkuNiAyNi4xIDEwLjEgMjUuNSAxMC4xSDIyQzIxLjQgMTAuMSAyMSA5LjYgMjEgOS4xWk0yMSAxMi41QzIxIDEyIDIxLjQgMTEuNSAyMiAxMS41SDI1LjVDMjYgMTEuNSAyNi41IDExLjkgMjYuNSAxMi41QzI2LjUgMTMgMjYuMSAxMy41IDI1LjUgMTMuNUgyMkMyMS40IDEzLjUgMjEgMTMuMSAyMSAxMi41Wk0yMSAxNkMyMSAxNS41IDIxLjQgMTUgMjIgMTVIMjUuNUMyNiAxNSAyNi41IDE1LjQgMjYuNSAxNkMyNi41IDE2LjUgMjYuMSAxNyAyNS41IDE3SDIyQzIxLjQgMTcgMjEgMTYuNiAyMSAxNlpNMjUuNSAyMC41SDIyQzIxLjUgMjAuNSAyMSAyMC4xIDIxIDE5LjVDMjEgMTguOSAyMS40IDE4LjUgMjIgMTguNUgyNS41QzI2IDE4LjUgMjYuNSAxOC45IDI2LjUgMTkuNUMyNi41IDIwLjEgMjYuMSAyMC41IDI1LjUgMjAuNVoiIGZpbGw9IiNGRjM3NUUiLz4KPC9zdmc+Cg==\"/>\r\n            <h4 class=\"fs-22 fs-md-16 fc-black fw-medium mb-0 flex-grow-1 line-height-1-2\">\r\n              {{ formTitle }}\r\n            </h4>\r\n          </div>\r\n          <div class=\"d-flex align-items-center gap-2 request-info--status-action\">\r\n            <div class=\"d-inline-flex flex-column align-items-end\">\r\n              @if (!isLoading) {\r\n                <ds-status\r\n                  status=\"{{statusClass(form?.header?.status?.['key'])}}\" class=\"header-status\">{{ form?.header?.status?.['value'] }}\r\n                </ds-status>\r\n              }\r\n            </div>\r\n            <div class=\"d-flex align-items-center gap-2\">\r\n              <!-- <ds-button\r\n                 *ngIf=\"form?.inboxItem && (form?.inboxItem?.canRequestFeedback =='true'|| form?.inboxItem?.hasFeedback=='true')\"\r\n                 square icon size=\"small\">\r\n                 <ds-icon icon=\"chat-o\" class=\"fs-20 fs-md-17 fc-coral\">\r\n                   &lt;!&ndash;                  [ngClass]=\"{'fc-green':feedBackIcon == 'feedbackResponded' , 'fc-red': feedBackIcon == 'respondToFeedback' , 'fc-yellow': feedBackIcon == 'waitingFeedback'}\"&ndash;&gt;\r\n                 </ds-icon>\r\n               </ds-button>-->\r\n              <!-- history-->\r\n              <ds-button\r\n                *ngIf=\"form?.commentsDrop?.length > 0 && !isLoading\" square icon size=\"small\"\r\n                (click)=\"onCommentsFormClick()\" class=\"has-comments\">\r\n                <ds-icon icon=\"clock\" class=\"fc-coral fs-20 fs-md-17\"></ds-icon>\r\n              </ds-button>\r\n              <ng-content></ng-content>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"request-info--footer\">\r\n          @if (!isLoading) {\r\n            <ds-avatar\r\n              image=\"{{form?.header?.requesterPhoto}}\" size=\"xx-small\"\r\n              class=\"d-inline-flex cursor-pointer\" (click)=\"showUserInfo()\"></ds-avatar>\r\n          }\r\n          <div\r\n            class=\"d-flex align-items-center flex-wrap flex-grow-1 gap-1 gap-sm-2 line-height-1 request-info--header__details\">\r\n            <span\r\n              [ngClass]=\"{'loading-bg loading-width': isLoading}\"\r\n              class=\"fs-12 fw-medium d-none d-sm-inline-block\">{{ coreService.getShortName(form?.header?.['requesterName']) }}</span>\r\n            <span class=\"fs-20\">&#8226;</span>\r\n            <span class=\"fs-12\" [ngClass]=\"{'loading-bg loading-width': isLoading}\"> {{ form?.header?.formId }}</span>\r\n            <span class=\"fs-20\" *ngIf=\"creationDate\">&#8226;</span>\r\n            <span class=\"fs-12\" [ngClass]=\"{'loading-bg loading-width': isLoading}\"> {{ creationDate }}</span>\r\n          </div>\r\n        </div>\r\n      </section>\r\n    </section>\r\n\r\n  </div>\r\n\r\n\r\n  <!--<ng-container>\r\n    <div class=\"d-flex align-items-center justify-content-end gap-2 my-2\">\r\n      <ds-button\r\n        *ngIf=\"form?.inboxItem && !form.sections[form.sections.length -1].header.readOnly && !isLoading\"\r\n        square\r\n        icon\r\n        size=\"small\"\r\n        [matMenuTriggerFor]=\"menu\"\r\n        class=\"icon-btn-shadow\">\r\n        <ds-icon\r\n          [ngClass]=\"{'fc-purple' : (flagPriority === '0' ||  flagPriority === null),'fc-yellow' : flagPriority === '1','fc-green' : flagPriority === '2','fc-coral' : flagPriority === '3'}\"\r\n          icon=\"flag-o\" class=\"fs-20 fs-md-17 fc-purple\">\r\n        </ds-icon>\r\n      </ds-button>\r\n      <mat-menu #menu=\"matMenu\" panelClass=\"action-menu\">\r\n        <button mat-menu-item (click)=\"setFlagPriority('0')\">\r\n          <ds-icon icon=\"flag-o\" class=\"fc-purple fs-20 fs-md-17\"></ds-icon>\r\n        </button>\r\n        <button mat-menu-item (click)=\"setFlagPriority('1')\">\r\n          <ds-icon icon=\"flag-o\" class=\"fc-yellow fs-20 fs-md-17\"></ds-icon>\r\n        </button>\r\n        <button mat-menu-item (click)=\"setFlagPriority('2')\">\r\n          <ds-icon icon=\"flag-o\" class=\"fc-green fs-20 fs-md-17\"></ds-icon>\r\n        </button>\r\n        <button mat-menu-item (click)=\"setFlagPriority('3')\">\r\n          <ds-icon icon=\"flag-o\" class=\"fc-coral fs-20 fs-md-17\"></ds-icon>\r\n        </button>\r\n      </mat-menu>\r\n\r\n      <ng-content></ng-content>\r\n    </div>\r\n    <header class=\"service-header bc-white p-3 p-sm-4 py-4 gap-3 {{statusClass(form?.header?.status?.['key'])}}\">\r\n\r\n      <div class=\"service-header-icon\">\r\n        <img\r\n          alt=\"\"\r\n          src=\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMjkiIHZpZXdCb3g9IjAgMCAzMCAyOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTI1LjEgMEg0LjlDMi4yIDAgMCAyLjIgMCA0LjlWMjguNkgyNS4xQzI3LjggMjguNiAzMCAyNi40IDMwIDIzLjdWNC45QzMwIDIuMiAyNy44IDAgMjUuMSAwWk0yIDQuOUMyIDMuMyAzLjMgMiA0LjkgMkgyNS4xQzI2LjcgMiAyOCAzLjMgMjggNC45VjIzLjdDMjggMjUuMyAyNi43IDI2LjYgMjUuMSAyNi42SDJWNC45Wk0xMS41IDYuM0M3LjEgNi4zIDMuNSA5LjkgMy41IDE0LjNDMy41IDE4LjcgNy4xIDIyLjMgMTEuNSAyMi4zQzE1LjkgMjIuMyAxOS41IDE4LjcgMTkuNSAxNC4zQzE5LjUgOS45IDE1LjkgNi4zIDExLjUgNi4zWk0xNS4xIDE5QzE0LjEgMTkuOCAxMi44IDIwLjIgMTEuNSAyMC4yQzEwLjIgMjAuMiA4LjkgMTkuOCA3LjkgMTlDOC43IDE3LjcgMTAgMTcgMTEuNSAxN0MxMyAxNyAxNC40IDE3LjggMTUuMSAxOVpNMTMuMSAxMy40QzEzLjEgMTQuMyAxMi40IDE1IDExLjUgMTVDMTAuNiAxNSA5LjkgMTQuMyA5LjkgMTMuNEM5LjkgMTIuNSAxMC42IDExLjggMTEuNSAxMS44QzEyLjQgMTEuOCAxMy4xIDEyLjUgMTMuMSAxMy40Wk0xNS4xIDEzLjRDMTUuMSAxMS40IDEzLjUgOS44IDExLjUgOS44QzkuNSA5LjggNy45IDExLjQgNy45IDEzLjRDNy45IDE0LjIgOC4yIDE1IDguNyAxNS43QzcuOCAxNi4xIDcuMSAxNi44IDYuNSAxNy42QzUuOCAxNi42IDUuNSAxNS41IDUuNSAxNC4zQzUuNSAxMSA4LjIgOC4zIDExLjUgOC4zQzE0LjggOC4zIDE3LjUgMTEgMTcuNSAxNC4zQzE3LjUgMTUuNSAxNy4yIDE2LjYgMTYuNSAxNy42QzE1LjkgMTYuOCAxNS4yIDE2LjIgMTQuMyAxNS43QzE0LjggMTUuMSAxNS4xIDE0LjIgMTUuMSAxMy40Wk0yMSA5LjFDMjEgOC42IDIxLjQgOC4xIDIyIDguMUgyNS41QzI2IDguMSAyNi41IDguNSAyNi41IDkuMUMyNi41IDkuNiAyNi4xIDEwLjEgMjUuNSAxMC4xSDIyQzIxLjQgMTAuMSAyMSA5LjYgMjEgOS4xWk0yMSAxMi41QzIxIDEyIDIxLjQgMTEuNSAyMiAxMS41SDI1LjVDMjYgMTEuNSAyNi41IDExLjkgMjYuNSAxMi41QzI2LjUgMTMgMjYuMSAxMy41IDI1LjUgMTMuNUgyMkMyMS40IDEzLjUgMjEgMTMuMSAyMSAxMi41Wk0yMSAxNkMyMSAxNS41IDIxLjQgMTUgMjIgMTVIMjUuNUMyNiAxNSAyNi41IDE1LjQgMjYuNSAxNkMyNi41IDE2LjUgMjYuMSAxNyAyNS41IDE3SDIyQzIxLjQgMTcgMjEgMTYuNiAyMSAxNlpNMjUuNSAyMC41SDIyQzIxLjUgMjAuNSAyMSAyMC4xIDIxIDE5LjVDMjEgMTguOSAyMS40IDE4LjUgMjIgMTguNUgyNS41QzI2IDE4LjUgMjYuNSAxOC45IDI2LjUgMTkuNUMyNi41IDIwLjEgMjYuMSAyMC41IDI1LjUgMjAuNVoiIGZpbGw9IiNGRjM3NUUiLz4KPC9zdmc+Cg==\"/>\r\n      </div>\r\n\r\n      <div class=\"flex-grow-1 d-flex flex-column flex-sm-row align-items-sm-center gap-2\">\r\n        <div class=\"flex-grow-1\">\r\n          <h1 class=\"fs-20 fs-md-16 fw-bold fc-black header-title m-0\">{{ formTitle }}\r\n            @if (serviceFaq.length) {\r\n              <ds-icon icon=\"info\" class=\"fs-22 fc-dark-gray cursor-pointer\" (click)=\"openFaq()\">\r\n              </ds-icon>\r\n            }\r\n          </h1>\r\n          <div class=\"header-user d-flex align-items-sm-center gap-2 mt-sm-1\">\r\n            @if (!isLoading) {\r\n              <ds-avatar\r\n                image=\"{{form?.header?.requesterPhoto}}\" size=\"xx-small\"\r\n                class=\"d-inline-flex cursor-pointer\" (click)=\"showUserInfo()\"></ds-avatar>\r\n            }\r\n            <span\r\n              class=\"fs-12 text-truncate d-sm-block cursor-pointer\" (click)=\"showUserInfo()\"\r\n              [ngClass]=\"{'loading-bg loading-width': isLoading}\">{{ coreService.getShortName(form?.header?.requesterName) }}</span>\r\n            <mat-divider class=\"divider circle mx-2 d-none d-sm-block\"></mat-divider>\r\n            <span class=\"fs-12\" [ngClass]=\"{'loading-bg loading-width': isLoading}\">{{ form?.header?.formId }}</span>\r\n            @if (creationDate) {\r\n              <mat-divider class=\"divider circle mx-2 d-none d-sm-block\"></mat-divider>\r\n              <span class=\"fs-14\" [ngClass]=\"{'loading-bg loading-width': isLoading}\">{{ creationDate }}</span>\r\n            }\r\n          </div>\r\n\r\n        </div>\r\n        <div class=\"header-actions d-flex flex-row flex-sm-column justify-content-between justify-content-sm-center gap-2 mt-2 mt-sm-0\">\r\n          @if (!isLoading) {\r\n            <ds-status\r\n              status=\"{{statusClass(form?.header?.status?.['key'])}}\" class=\"header-status\">{{ form?.header?.status?.['value'] }}\r\n            </ds-status>\r\n          }\r\n          <div class=\"d-flex align-items-center justify-content-end gap-2\">\r\n            &lt;!&ndash; feedback&ndash;&gt;\r\n            &lt;!&ndash;            *ngIf=\"form?.inboxItem && (form?.inboxItem?.canRequestFeedback ==='true'|| form?.inboxItem?.hasFeedback==='true') && !isLoading\"&ndash;&gt;\r\n            &lt;!&ndash;  <ds-button\r\n                square icon size=\"small\" (click)=\"feedback()\">\r\n                <ds-icon\r\n                  icon=\"chat-o\" class=\"fs-20 fs-md-17 fc-coral\"\r\n                  [ngClass]=\"{'fc-green':feedBackIcon === 'feedbackResponded' , 'fc-red': feedBackIcon === 'respondToFeedback' , 'fc-yellow': feedBackIcon === 'waitingFeedback'}\">\r\n                </ds-icon>\r\n              </ds-button>&ndash;&gt;\r\n            <ds-button\r\n              *ngIf=\"form?.commentsDrop?.length > 0 && !isLoading\" square icon size=\"small\"\r\n              (click)=\"onCommentsFormClick()\" class=\"has-comments\">\r\n              <ds-icon icon=\"clock\" class=\"fc-coral fs-20 fs-md-17\"></ds-icon>\r\n            </ds-button>\r\n            @if (showApprovalHistory) {\r\n              <ng-container>\r\n                <ds-button\r\n                  color=\"white\" shape=\"text\" square size=\"small\" [satPopoverAnchor]=\"workflow\"\r\n                  #workflowAnchor=\"satPopoverAnchor\" (click)=\"workflowAnchor.popover.open()\">\r\n                  <slot name=\"prefix\">\r\n                    <ds-icon icon=\"workflow\" class=\"fs-24\"></ds-icon>\r\n                  </slot>\r\n                </ds-button>\r\n                <sat-popover\r\n                  #workflow [anchor]=\"workflowAnchor\" [hasBackdrop]=\"true\" verticalAlign=\"below\"\r\n                  horizontalAlign=\"end\">\r\n                  <div class=\"default-popover p-3\" style=\"min-width: 330px;\">\r\n                    <ds-approvals *ngIf=\"approvalHistory\" class=\"popover-approvals\" approvalsData=\"{{approvals}}\">\r\n                    </ds-approvals>\r\n                  </div>\r\n                </sat-popover>\r\n              </ng-container>\r\n            }\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n    </header>\r\n  </ng-container>-->\r\n}\r\n", styles: [".loading-width{min-width:100px;width:40px;flex-grow:1}.request-main-info{--item-bg: var(--light-gray);--item-fc: var(--black);--status-container-bc: #e8ebec;--status-container-brc: var(--dark-gray)}.request-main-info.warning{--item-bg: var(--yellow);--status-container-bc: #fff8d9;--status-container-brc: var(--yellow)}.request-main-info.pending{--item-bg: #eff0f1;--status-container-bc: #e8ebec;--status-container-brc: #c8ced1}.request-main-info.expired{--item-bg: var(--dark-gray);--status-container-bc: #e8ebec;--status-container-brc: var(--dark-gray)}.request-main-info.success{--item-bg: var(--green);--status-container-bc: #e6f9f4;--status-container-brc: var(--green)}.request-main-info.info{--item-bg: var(--sea-light);--status-container-bc: #fff8d9;--status-container-brc: var(--sea-light)}.request-main-info.danger{--item-bg: var(--red);--status-container-bc: #fae9ec;--status-container-brc: var(--red)}.request-main-info.orange,.request-main-info.send_back{--item-bg: var(--orange);--status-container-bc: #fff0eb;--status-container-brc: var(--orange)}.request-info{border-radius:0;box-shadow:var(--box-shadow);background-color:var(--white);border-top:5px solid var(--item-bg)}.request-info--footer{padding:.3rem 2rem;min-height:45px;display:flex;align-items:center;gap:.75rem;border-top:1px solid var(--light-gray)}@media (max-width: 578px){.request-info--footer{padding:.3rem 1rem}}.request-info--footer__details{color:var(--item-fc)}.request-info--body{padding:2rem;display:flex;align-items:center;gap:.75rem;background-color:#fff}@media (max-width: 578px){.request-info--body{padding:1rem;flex-direction:column;align-items:stretch}}.request-info--body figure{min-width:30px;width:30px;text-align:center}.request-info--body figure svg{width:100%}@media (max-width: 578px){.request-info--status-action{justify-content:space-between}}.request-info--history{margin-top:-.5rem}.request-info--comment{background-color:#fff0eb;color:var(--orange);border-radius:0 0 4px 4px}.status-container{min-height:40px;padding:.5rem 1rem;display:flex;flex-direction:column;justify-content:center;gap:.5rem;margin-bottom:1.5rem}.status-container.danger{--item-bg: var(--red);--status-container-bc: #fae9ec;--status-container-brc: var(--red)}.status-container ::ng-deep ds-avatar .avatar{--default-size: 18px}.circle-status::part(base){--status-radius: 50%;--status-size: 19px;--status-fs: 100%}ds-button[square]::part(base){--btn-padding: 0;--default-size-sm: 30px}.send-back-container{background-color:#fff0eb;color:var(--orange);padding:.5rem;border-radius:4px}object,iframe,embed{height:79vh}::ng-deep .history-popup{--popup-width: 100vw;--popup-max-width: 100vw;--popup-radius: 15px 15px 0 0;position:absolute!important;bottom:0}:host ::ng-deep .mat-expansion-panel-content{background:#fff!important}:host .main-sidenav.main-sidenav-full .sidenav-title{border-bottom:transparent!important}:host .main-sidenav .sidenav-title{background-color:transparent!important}:host .main-sidenav{height:60px;min-height:10px!important}:host .mat-expansion-panel-content{background:#fff!important}:host .approval-panel-container{display:grid;grid-template-columns:40% calc(60% - 45px) 20px;grid-template-areas:\"title details toggle\";gap:.75rem;place-content:space-between;align-items:center;flex-grow:1;width:100%}@media (max-width: 991px){:host .approval-panel-container{grid-template-columns:calc(100% - 45px) 20px;grid-template-areas:\"title toggle\" \"details details\"}}:host .approval-panel-container .approval-panel-title{grid-area:title}:host .approval-panel-container .panel-user-name{max-width:120px}@media (max-width: 768px){:host .approval-panel-container .panel-user-name.panel-ueser-only{max-width:140px}:host .approval-panel-container .panel-user-name:not(.panel-ueser-only){max-width:90px}}:host .approval-panel-container .approval-panel-details{display:flex;align-items:center;justify-content:space-between;grid-area:details}:host .approval-panel-container .approval-panel-toggle{grid-area:toggle;display:flex;align-items:center;justify-content:center;width:20px}:host ::ng-deep ds-avatar.user-avatar .avatar{--default-size: 25px}@media (min-width: 768px){:host ::ng-deep ds-avatar.user-avatar .avatar{--default-size: 31px;--avatar-border: 3px solid var(--light-gray)}}@media (min-width: 768px){:host ::ng-deep .user-avatar-name{padding-inline-end:1rem!important}}:host .circle-status::part(base){--status-radius: 50%;--status-size: 18px;--status-fs: 80% }:host .panel-title{min-width:40%;width:40%}@media (max-width: 576px){:host .panel-title{min-width:100%!important;width:100%!important}}:host .panel-user-status{min-width:60%;width:60%;display:flex;align-items:center;justify-content:space-between}@media (max-width: 576px){:host .panel-user-status{min-width:100%!important;width:100%!important}:host .panel-user-status .user-delegate{min-width:auto}:host .panel-user-status .main-status::part(base){--status-width: 50px}}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: CoreService }, { type: CoreI18nService }, { type: FeedBackService }, { type: i1$1.MatDialog }, { type: SidenavService }, { type: i3.ToastrService }], propDecorators: { form: [{
+                    ], template: "@if (form?.header?.status?.['key'] === 'NEW') {\r\n  <section\r\n    class=\"main-sidenav main-sidenav-full mb-4\"\r\n\r\n  >\r\n    <div class=\"sidenav-title\">\r\n      <div class=\"d-flex align-items-center gap-3 w-100\">\r\n        <!-- <ds-button icon class=\"rotate-arrow\" size=\"small\" (click)=\"goBack()\" *ngIf=\"!isInMobileApp() && showBack\">\r\n           <ds-icon icon=\"arrow-right\" class=\"fs-19 fc-black\"></ds-icon>\r\n         </ds-button>-->\r\n\r\n        <!--  <h3 class=\"flex-grow-0\">\r\n            {{ formTitle }}\r\n          </h3>-->\r\n\r\n        <section>\r\n          <h6 class=\"fs-14 fs-md-12 fw-normal fc-dark-gray mb-0\">\r\n            {{ i18n.translate('Hello') }}\r\n            {{ coreService.getShortName(form?.header?.requesterName) }}, {{ i18n.translate('welcomeBack') }}!\r\n          </h6>\r\n          <h1 class=\"fs-26 fs-md-20 fw-bold fc-black d-flex align-items-center gap-2 mb-1\">\r\n            {{ formTitle }}\r\n            @if (serviceFaq.length) {\r\n              <ds-icon icon=\"info\" class=\"fs-22 fc-dark-gray cursor-pointer\" (click)=\"openFaq()\">\r\n              </ds-icon>\r\n            }\r\n          </h1>\r\n        </section>\r\n        <div class=\"d-flex align-items-center justify-content-end gap-2 flex-grow-1\">\r\n          @if (serviceFaq.length) {\r\n            <ds-button size=\"small\" icon>\r\n              <ds-icon icon=\"info\" class=\"fs-22 fc-dark-gray cursor-pointer\" (click)=\"openFaq()\">\r\n              </ds-icon>\r\n            </ds-button>\r\n          }\r\n          <!-- <ds-button size=\"small\" icon (click)=\"openWorkflow()\">\r\n            <ds-icon icon=\"bell-2-o\" class=\"fs-20 fc-coral\"></ds-icon>\r\n          </ds-button> -->\r\n          @if (!isReadOnly) {\r\n            <ds-button size=\"small\" icon (click)=\"showPreviousRequests()\">\r\n              <ds-icon icon=\"clock\" class=\"fs-20 fc-coral\"></ds-icon>\r\n            </ds-button>\r\n          }\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </section>\r\n\r\n  <!--  <header class=\"mb-4 mt-4 d-flex align-items-center justify-content-between align-items-end gap-2\">\r\n      <section>\r\n        <h6 class=\"fs-14 fs-md-12 fw-normal fc-dark-gray mb-0\">\r\n          {{ i18n.translate('Hello') }}\r\n          {{ coreService.getShortName(form?.header?.requesterName) }}, {{ i18n.translate('welcomeBack') }}!\r\n        </h6>\r\n        <h1 class=\"fs-26 fs-md-20 fw-bold fc-black d-flex align-items-center gap-2 mb-1\">\r\n          {{ formTitle }}\r\n          @if (serviceFaq.length) {\r\n            <ds-icon icon=\"info\" class=\"fs-22 fc-dark-gray cursor-pointer\" (click)=\"openFaq()\">\r\n            </ds-icon>\r\n          }\r\n        </h1>\r\n      </section>\r\n    </header>-->\r\n} @else {\r\n\r\n  <div class=\"w-100\">\r\n    <section class=\"request-main-info  {{statusClass(form?.header?.status?.['key'])}}\">\r\n      <section class=\"request-info\">\r\n        <div class=\"request-info--body\">\r\n          <div class=\"d-flex align-items-center gap-2 flex-grow-1\">\r\n            <img\r\n              alt=\"\"\r\n              src=\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMjkiIHZpZXdCb3g9IjAgMCAzMCAyOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTI1LjEgMEg0LjlDMi4yIDAgMCAyLjIgMCA0LjlWMjguNkgyNS4xQzI3LjggMjguNiAzMCAyNi40IDMwIDIzLjdWNC45QzMwIDIuMiAyNy44IDAgMjUuMSAwWk0yIDQuOUMyIDMuMyAzLjMgMiA0LjkgMkgyNS4xQzI2LjcgMiAyOCAzLjMgMjggNC45VjIzLjdDMjggMjUuMyAyNi43IDI2LjYgMjUuMSAyNi42SDJWNC45Wk0xMS41IDYuM0M3LjEgNi4zIDMuNSA5LjkgMy41IDE0LjNDMy41IDE4LjcgNy4xIDIyLjMgMTEuNSAyMi4zQzE1LjkgMjIuMyAxOS41IDE4LjcgMTkuNSAxNC4zQzE5LjUgOS45IDE1LjkgNi4zIDExLjUgNi4zWk0xNS4xIDE5QzE0LjEgMTkuOCAxMi44IDIwLjIgMTEuNSAyMC4yQzEwLjIgMjAuMiA4LjkgMTkuOCA3LjkgMTlDOC43IDE3LjcgMTAgMTcgMTEuNSAxN0MxMyAxNyAxNC40IDE3LjggMTUuMSAxOVpNMTMuMSAxMy40QzEzLjEgMTQuMyAxMi40IDE1IDExLjUgMTVDMTAuNiAxNSA5LjkgMTQuMyA5LjkgMTMuNEM5LjkgMTIuNSAxMC42IDExLjggMTEuNSAxMS44QzEyLjQgMTEuOCAxMy4xIDEyLjUgMTMuMSAxMy40Wk0xNS4xIDEzLjRDMTUuMSAxMS40IDEzLjUgOS44IDExLjUgOS44QzkuNSA5LjggNy45IDExLjQgNy45IDEzLjRDNy45IDE0LjIgOC4yIDE1IDguNyAxNS43QzcuOCAxNi4xIDcuMSAxNi44IDYuNSAxNy42QzUuOCAxNi42IDUuNSAxNS41IDUuNSAxNC4zQzUuNSAxMSA4LjIgOC4zIDExLjUgOC4zQzE0LjggOC4zIDE3LjUgMTEgMTcuNSAxNC4zQzE3LjUgMTUuNSAxNy4yIDE2LjYgMTYuNSAxNy42QzE1LjkgMTYuOCAxNS4yIDE2LjIgMTQuMyAxNS43QzE0LjggMTUuMSAxNS4xIDE0LjIgMTUuMSAxMy40Wk0yMSA5LjFDMjEgOC42IDIxLjQgOC4xIDIyIDguMUgyNS41QzI2IDguMSAyNi41IDguNSAyNi41IDkuMUMyNi41IDkuNiAyNi4xIDEwLjEgMjUuNSAxMC4xSDIyQzIxLjQgMTAuMSAyMSA5LjYgMjEgOS4xWk0yMSAxMi41QzIxIDEyIDIxLjQgMTEuNSAyMiAxMS41SDI1LjVDMjYgMTEuNSAyNi41IDExLjkgMjYuNSAxMi41QzI2LjUgMTMgMjYuMSAxMy41IDI1LjUgMTMuNUgyMkMyMS40IDEzLjUgMjEgMTMuMSAyMSAxMi41Wk0yMSAxNkMyMSAxNS41IDIxLjQgMTUgMjIgMTVIMjUuNUMyNiAxNSAyNi41IDE1LjQgMjYuNSAxNkMyNi41IDE2LjUgMjYuMSAxNyAyNS41IDE3SDIyQzIxLjQgMTcgMjEgMTYuNiAyMSAxNlpNMjUuNSAyMC41SDIyQzIxLjUgMjAuNSAyMSAyMC4xIDIxIDE5LjVDMjEgMTguOSAyMS40IDE4LjUgMjIgMTguNUgyNS41QzI2IDE4LjUgMjYuNSAxOC45IDI2LjUgMTkuNUMyNi41IDIwLjEgMjYuMSAyMC41IDI1LjUgMjAuNVoiIGZpbGw9IiNGRjM3NUUiLz4KPC9zdmc+Cg==\"/>\r\n            <h4 class=\"fs-22 fs-md-16 fc-black fw-medium mb-0 flex-grow-1 line-height-1-2\">\r\n              {{ formTitle }}\r\n            </h4>\r\n          </div>\r\n          <div class=\"d-flex align-items-center gap-2 request-info--status-action\">\r\n            <div class=\"d-inline-flex flex-column align-items-end\">\r\n              @if (!isLoading) {\r\n                <ds-status\r\n                  status=\"{{statusClass(form?.header?.status?.['key'])}}\" class=\"header-status\">{{ form?.header?.status?.['value'] }}\r\n                </ds-status>\r\n              }\r\n            </div>\r\n            <div class=\"d-flex align-items-center gap-2\">\r\n              <!-- <ds-button\r\n                 *ngIf=\"form?.inboxItem && (form?.inboxItem?.canRequestFeedback =='true'|| form?.inboxItem?.hasFeedback=='true')\"\r\n                 square icon size=\"small\">\r\n                 <ds-icon icon=\"chat-o\" class=\"fs-20 fs-md-17 fc-coral\">\r\n                   &lt;!&ndash;                  [ngClass]=\"{'fc-green':feedBackIcon == 'feedbackResponded' , 'fc-red': feedBackIcon == 'respondToFeedback' , 'fc-yellow': feedBackIcon == 'waitingFeedback'}\"&ndash;&gt;\r\n                 </ds-icon>\r\n               </ds-button>-->\r\n              <!-- history-->\r\n              <ds-button\r\n                *ngIf=\"form?.commentsDrop?.length > 0 && !isLoading\" square icon size=\"small\"\r\n                (click)=\"onCommentsFormClick()\" class=\"has-comments\">\r\n                <ds-icon icon=\"clock\" class=\"fc-coral fs-20 fs-md-17\"></ds-icon>\r\n              </ds-button>\r\n              <ng-content></ng-content>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"request-info--footer\">\r\n          @if (!isLoading) {\r\n            <ds-avatar\r\n              image=\"{{form?.header?.requesterPhoto}}\" size=\"xx-small\"\r\n              class=\"d-inline-flex cursor-pointer\" (click)=\"showUserInfo()\"></ds-avatar>\r\n          }\r\n          <div\r\n            class=\"d-flex align-items-center flex-wrap flex-grow-1 gap-1 gap-sm-2 line-height-1 request-info--header__details\">\r\n            <span\r\n              [ngClass]=\"{'loading-bg loading-width': isLoading}\"\r\n              class=\"fs-12 fw-medium d-none d-sm-inline-block\">{{ coreService.getShortName(form?.header?.['requesterName']) }}</span>\r\n            <span class=\"fs-20\">&#8226;</span>\r\n            <span class=\"fs-12\" [ngClass]=\"{'loading-bg loading-width': isLoading}\"> {{ form?.header?.formId }}</span>\r\n            <span class=\"fs-20\" *ngIf=\"creationDate\">&#8226;</span>\r\n            <span class=\"fs-12\" [ngClass]=\"{'loading-bg loading-width': isLoading}\"> {{ creationDate }}</span>\r\n          </div>\r\n        </div>\r\n      </section>\r\n    </section>\r\n\r\n  </div>\r\n\r\n\r\n  <!--<ng-container>\r\n    <div class=\"d-flex align-items-center justify-content-end gap-2 my-2\">\r\n      <ds-button\r\n        *ngIf=\"form?.inboxItem && !form.sections[form.sections.length -1].header.readOnly && !isLoading\"\r\n        square\r\n        icon\r\n        size=\"small\"\r\n        [matMenuTriggerFor]=\"menu\"\r\n        class=\"icon-btn-shadow\">\r\n        <ds-icon\r\n          [ngClass]=\"{'fc-purple' : (flagPriority === '0' ||  flagPriority === null),'fc-yellow' : flagPriority === '1','fc-green' : flagPriority === '2','fc-coral' : flagPriority === '3'}\"\r\n          icon=\"flag-o\" class=\"fs-20 fs-md-17 fc-purple\">\r\n        </ds-icon>\r\n      </ds-button>\r\n      <mat-menu #menu=\"matMenu\" panelClass=\"action-menu\">\r\n        <button mat-menu-item (click)=\"setFlagPriority('0')\">\r\n          <ds-icon icon=\"flag-o\" class=\"fc-purple fs-20 fs-md-17\"></ds-icon>\r\n        </button>\r\n        <button mat-menu-item (click)=\"setFlagPriority('1')\">\r\n          <ds-icon icon=\"flag-o\" class=\"fc-yellow fs-20 fs-md-17\"></ds-icon>\r\n        </button>\r\n        <button mat-menu-item (click)=\"setFlagPriority('2')\">\r\n          <ds-icon icon=\"flag-o\" class=\"fc-green fs-20 fs-md-17\"></ds-icon>\r\n        </button>\r\n        <button mat-menu-item (click)=\"setFlagPriority('3')\">\r\n          <ds-icon icon=\"flag-o\" class=\"fc-coral fs-20 fs-md-17\"></ds-icon>\r\n        </button>\r\n      </mat-menu>\r\n\r\n      <ng-content></ng-content>\r\n    </div>\r\n    <header class=\"service-header bc-white p-3 p-sm-4 py-4 gap-3 {{statusClass(form?.header?.status?.['key'])}}\">\r\n\r\n      <div class=\"service-header-icon\">\r\n        <img\r\n          alt=\"\"\r\n          src=\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMjkiIHZpZXdCb3g9IjAgMCAzMCAyOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTI1LjEgMEg0LjlDMi4yIDAgMCAyLjIgMCA0LjlWMjguNkgyNS4xQzI3LjggMjguNiAzMCAyNi40IDMwIDIzLjdWNC45QzMwIDIuMiAyNy44IDAgMjUuMSAwWk0yIDQuOUMyIDMuMyAzLjMgMiA0LjkgMkgyNS4xQzI2LjcgMiAyOCAzLjMgMjggNC45VjIzLjdDMjggMjUuMyAyNi43IDI2LjYgMjUuMSAyNi42SDJWNC45Wk0xMS41IDYuM0M3LjEgNi4zIDMuNSA5LjkgMy41IDE0LjNDMy41IDE4LjcgNy4xIDIyLjMgMTEuNSAyMi4zQzE1LjkgMjIuMyAxOS41IDE4LjcgMTkuNSAxNC4zQzE5LjUgOS45IDE1LjkgNi4zIDExLjUgNi4zWk0xNS4xIDE5QzE0LjEgMTkuOCAxMi44IDIwLjIgMTEuNSAyMC4yQzEwLjIgMjAuMiA4LjkgMTkuOCA3LjkgMTlDOC43IDE3LjcgMTAgMTcgMTEuNSAxN0MxMyAxNyAxNC40IDE3LjggMTUuMSAxOVpNMTMuMSAxMy40QzEzLjEgMTQuMyAxMi40IDE1IDExLjUgMTVDMTAuNiAxNSA5LjkgMTQuMyA5LjkgMTMuNEM5LjkgMTIuNSAxMC42IDExLjggMTEuNSAxMS44QzEyLjQgMTEuOCAxMy4xIDEyLjUgMTMuMSAxMy40Wk0xNS4xIDEzLjRDMTUuMSAxMS40IDEzLjUgOS44IDExLjUgOS44QzkuNSA5LjggNy45IDExLjQgNy45IDEzLjRDNy45IDE0LjIgOC4yIDE1IDguNyAxNS43QzcuOCAxNi4xIDcuMSAxNi44IDYuNSAxNy42QzUuOCAxNi42IDUuNSAxNS41IDUuNSAxNC4zQzUuNSAxMSA4LjIgOC4zIDExLjUgOC4zQzE0LjggOC4zIDE3LjUgMTEgMTcuNSAxNC4zQzE3LjUgMTUuNSAxNy4yIDE2LjYgMTYuNSAxNy42QzE1LjkgMTYuOCAxNS4yIDE2LjIgMTQuMyAxNS43QzE0LjggMTUuMSAxNS4xIDE0LjIgMTUuMSAxMy40Wk0yMSA5LjFDMjEgOC42IDIxLjQgOC4xIDIyIDguMUgyNS41QzI2IDguMSAyNi41IDguNSAyNi41IDkuMUMyNi41IDkuNiAyNi4xIDEwLjEgMjUuNSAxMC4xSDIyQzIxLjQgMTAuMSAyMSA5LjYgMjEgOS4xWk0yMSAxMi41QzIxIDEyIDIxLjQgMTEuNSAyMiAxMS41SDI1LjVDMjYgMTEuNSAyNi41IDExLjkgMjYuNSAxMi41QzI2LjUgMTMgMjYuMSAxMy41IDI1LjUgMTMuNUgyMkMyMS40IDEzLjUgMjEgMTMuMSAyMSAxMi41Wk0yMSAxNkMyMSAxNS41IDIxLjQgMTUgMjIgMTVIMjUuNUMyNiAxNSAyNi41IDE1LjQgMjYuNSAxNkMyNi41IDE2LjUgMjYuMSAxNyAyNS41IDE3SDIyQzIxLjQgMTcgMjEgMTYuNiAyMSAxNlpNMjUuNSAyMC41SDIyQzIxLjUgMjAuNSAyMSAyMC4xIDIxIDE5LjVDMjEgMTguOSAyMS40IDE4LjUgMjIgMTguNUgyNS41QzI2IDE4LjUgMjYuNSAxOC45IDI2LjUgMTkuNUMyNi41IDIwLjEgMjYuMSAyMC41IDI1LjUgMjAuNVoiIGZpbGw9IiNGRjM3NUUiLz4KPC9zdmc+Cg==\"/>\r\n      </div>\r\n\r\n      <div class=\"flex-grow-1 d-flex flex-column flex-sm-row align-items-sm-center gap-2\">\r\n        <div class=\"flex-grow-1\">\r\n          <h1 class=\"fs-20 fs-md-16 fw-bold fc-black header-title m-0\">{{ formTitle }}\r\n            @if (serviceFaq.length) {\r\n              <ds-icon icon=\"info\" class=\"fs-22 fc-dark-gray cursor-pointer\" (click)=\"openFaq()\">\r\n              </ds-icon>\r\n            }\r\n          </h1>\r\n          <div class=\"header-user d-flex align-items-sm-center gap-2 mt-sm-1\">\r\n            @if (!isLoading) {\r\n              <ds-avatar\r\n                image=\"{{form?.header?.requesterPhoto}}\" size=\"xx-small\"\r\n                class=\"d-inline-flex cursor-pointer\" (click)=\"showUserInfo()\"></ds-avatar>\r\n            }\r\n            <span\r\n              class=\"fs-12 text-truncate d-sm-block cursor-pointer\" (click)=\"showUserInfo()\"\r\n              [ngClass]=\"{'loading-bg loading-width': isLoading}\">{{ coreService.getShortName(form?.header?.requesterName) }}</span>\r\n            <mat-divider class=\"divider circle mx-2 d-none d-sm-block\"></mat-divider>\r\n            <span class=\"fs-12\" [ngClass]=\"{'loading-bg loading-width': isLoading}\">{{ form?.header?.formId }}</span>\r\n            @if (creationDate) {\r\n              <mat-divider class=\"divider circle mx-2 d-none d-sm-block\"></mat-divider>\r\n              <span class=\"fs-14\" [ngClass]=\"{'loading-bg loading-width': isLoading}\">{{ creationDate }}</span>\r\n            }\r\n          </div>\r\n\r\n        </div>\r\n        <div class=\"header-actions d-flex flex-row flex-sm-column justify-content-between justify-content-sm-center gap-2 mt-2 mt-sm-0\">\r\n          @if (!isLoading) {\r\n            <ds-status\r\n              status=\"{{statusClass(form?.header?.status?.['key'])}}\" class=\"header-status\">{{ form?.header?.status?.['value'] }}\r\n            </ds-status>\r\n          }\r\n          <div class=\"d-flex align-items-center justify-content-end gap-2\">\r\n            &lt;!&ndash; feedback&ndash;&gt;\r\n            &lt;!&ndash;            *ngIf=\"form?.inboxItem && (form?.inboxItem?.canRequestFeedback ==='true'|| form?.inboxItem?.hasFeedback==='true') && !isLoading\"&ndash;&gt;\r\n            &lt;!&ndash;  <ds-button\r\n                square icon size=\"small\" (click)=\"feedback()\">\r\n                <ds-icon\r\n                  icon=\"chat-o\" class=\"fs-20 fs-md-17 fc-coral\"\r\n                  [ngClass]=\"{'fc-green':feedBackIcon === 'feedbackResponded' , 'fc-red': feedBackIcon === 'respondToFeedback' , 'fc-yellow': feedBackIcon === 'waitingFeedback'}\">\r\n                </ds-icon>\r\n              </ds-button>&ndash;&gt;\r\n            <ds-button\r\n              *ngIf=\"form?.commentsDrop?.length > 0 && !isLoading\" square icon size=\"small\"\r\n              (click)=\"onCommentsFormClick()\" class=\"has-comments\">\r\n              <ds-icon icon=\"clock\" class=\"fc-coral fs-20 fs-md-17\"></ds-icon>\r\n            </ds-button>\r\n            @if (showApprovalHistory) {\r\n              <ng-container>\r\n                <ds-button\r\n                  color=\"white\" shape=\"text\" square size=\"small\" [satPopoverAnchor]=\"workflow\"\r\n                  #workflowAnchor=\"satPopoverAnchor\" (click)=\"workflowAnchor.popover.open()\">\r\n                  <slot name=\"prefix\">\r\n                    <ds-icon icon=\"workflow\" class=\"fs-24\"></ds-icon>\r\n                  </slot>\r\n                </ds-button>\r\n                <sat-popover\r\n                  #workflow [anchor]=\"workflowAnchor\" [hasBackdrop]=\"true\" verticalAlign=\"below\"\r\n                  horizontalAlign=\"end\">\r\n                  <div class=\"default-popover p-3\" style=\"min-width: 330px;\">\r\n                    <ds-approvals *ngIf=\"approvalHistory\" class=\"popover-approvals\" approvalsData=\"{{approvals}}\">\r\n                    </ds-approvals>\r\n                  </div>\r\n                </sat-popover>\r\n              </ng-container>\r\n            }\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n    </header>\r\n  </ng-container>-->\r\n}\r\n", styles: [".loading-width{min-width:100px;width:40px;flex-grow:1}.request-main-info{--item-bg: var(--light-gray);--item-fc: var(--black);--status-container-bc: #e8ebec;--status-container-brc: var(--dark-gray)}.request-main-info.warning{--item-bg: var(--yellow);--status-container-bc: #fff8d9;--status-container-brc: var(--yellow)}.request-main-info.pending{--item-bg: #eff0f1;--status-container-bc: #e8ebec;--status-container-brc: #c8ced1}.request-main-info.expired{--item-bg: var(--dark-gray);--status-container-bc: #e8ebec;--status-container-brc: var(--dark-gray)}.request-main-info.success{--item-bg: var(--green);--status-container-bc: #e6f9f4;--status-container-brc: var(--green)}.request-main-info.info{--item-bg: var(--sea-light);--status-container-bc: #fff8d9;--status-container-brc: var(--sea-light)}.request-main-info.danger{--item-bg: var(--red);--status-container-bc: #fae9ec;--status-container-brc: var(--red)}.request-main-info.orange,.request-main-info.send_back{--item-bg: var(--orange);--status-container-bc: #fff0eb;--status-container-brc: var(--orange)}.request-info{border-radius:0;box-shadow:var(--box-shadow);background-color:var(--white);border-top:5px solid var(--item-bg)}.request-info--footer{padding:.3rem 2rem;min-height:45px;display:flex;align-items:center;gap:.75rem;border-top:1px solid var(--light-gray)}@media (max-width: 578px){.request-info--footer{padding:.3rem 1rem}}.request-info--footer__details{color:var(--item-fc)}.request-info--body{padding:2rem;display:flex;align-items:center;gap:.75rem;background-color:#fff}@media (max-width: 578px){.request-info--body{padding:1rem;flex-direction:column;align-items:stretch}}.request-info--body figure{min-width:30px;width:30px;text-align:center}.request-info--body figure svg{width:100%}@media (max-width: 578px){.request-info--status-action{justify-content:space-between}}.request-info--history{margin-top:-.5rem}.request-info--comment{background-color:#fff0eb;color:var(--orange);border-radius:0 0 4px 4px}.status-container{min-height:40px;padding:.5rem 1rem;display:flex;flex-direction:column;justify-content:center;gap:.5rem;margin-bottom:1.5rem}.status-container.danger{--item-bg: var(--red);--status-container-bc: #fae9ec;--status-container-brc: var(--red)}.status-container ::ng-deep ds-avatar .avatar{--default-size: 18px}.circle-status::part(base){--status-radius: 50%;--status-size: 19px;--status-fs: 100%}ds-button[square]::part(base){--btn-padding: 0;--default-size-sm: 30px}.send-back-container{background-color:#fff0eb;color:var(--orange);padding:.5rem;border-radius:4px}object,iframe,embed{height:79vh}::ng-deep .history-popup{--popup-width: 100vw;--popup-max-width: 100vw;--popup-radius: 15px 15px 0 0;position:absolute!important;bottom:0}:host ::ng-deep .mat-expansion-panel-content{background:#fff!important}:host .main-sidenav.main-sidenav-full .sidenav-title{border-bottom:transparent!important}:host .main-sidenav .sidenav-title{background-color:transparent!important}:host .main-sidenav{height:60px;min-height:10px!important}:host .mat-expansion-panel-content{background:#fff!important}:host .approval-panel-container{display:grid;grid-template-columns:40% calc(60% - 45px) 20px;grid-template-areas:\"title details toggle\";gap:.75rem;place-content:space-between;align-items:center;flex-grow:1;width:100%}@media (max-width: 991px){:host .approval-panel-container{grid-template-columns:calc(100% - 45px) 20px;grid-template-areas:\"title toggle\" \"details details\"}}:host .approval-panel-container .approval-panel-title{grid-area:title}:host .approval-panel-container .panel-user-name{max-width:120px}@media (max-width: 768px){:host .approval-panel-container .panel-user-name.panel-ueser-only{max-width:140px}:host .approval-panel-container .panel-user-name:not(.panel-ueser-only){max-width:90px}}:host .approval-panel-container .approval-panel-details{display:flex;align-items:center;justify-content:space-between;grid-area:details}:host .approval-panel-container .approval-panel-toggle{grid-area:toggle;display:flex;align-items:center;justify-content:center;width:20px}:host ::ng-deep ds-avatar.user-avatar .avatar{--default-size: 25px}@media (min-width: 768px){:host ::ng-deep ds-avatar.user-avatar .avatar{--default-size: 31px;--avatar-border: 3px solid var(--light-gray)}}@media (min-width: 768px){:host ::ng-deep .user-avatar-name{padding-inline-end:1rem!important}}:host .circle-status::part(base){--status-radius: 50%;--status-size: 18px;--status-fs: 80% }:host .panel-title{min-width:40%;width:40%}@media (max-width: 576px){:host .panel-title{min-width:100%!important;width:100%!important}}:host .panel-user-status{min-width:60%;width:60%;display:flex;align-items:center;justify-content:space-between}@media (max-width: 576px){:host .panel-user-status{min-width:100%!important;width:100%!important}:host .panel-user-status .user-delegate{min-width:auto}:host .panel-user-status .main-status::part(base){--status-width: 50px}}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: CoreService }, { type: CoreI18nService }, { type: FeedBackService }, { type: i5.MatDialog }, { type: SidenavService }, { type: i2$1.ToastrService }], propDecorators: { form: [{
                 type: Input
             }], showHistory: [{
                 type: Input
             }], isLoading: [{
                 type: Input
+            }], isReadOnly: [{
+                type: Input
             }], showApprovalHistory: [{
                 type: Input
             }], approvalHistory: [{
@@ -6091,7 +5997,7 @@ class FormSectionComponent {
         return statusStrategy.icon;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: FormSectionComponent, deps: [{ token: CoreI18nService }, { token: CoreService }, { token: SidenavService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: FormSectionComponent, isStandalone: true, selector: "app-form-section", inputs: { requestDetails: "requestDetails", section: "section", form: "form", lov: "lov", isReadOnly: "isReadOnly", controllers: "controllers", segmentDynamicLoaderService: "segmentDynamicLoaderService", sectionFormComponent: "sectionFormComponent", sectionName: "sectionName" }, ngImport: i0, template: "<mat-expansion-panel class=\"mb-4\" [expanded]=\"isExpanded\" hideToggle #approvalPanel=\"matExpansionPanel\">\r\n  <mat-expansion-panel-header>\r\n\r\n    <div class=\"approval-panel-container\">\r\n      <div class=\"d-flex gap-2 flex-grow-1 approval-panel-title\">\r\n        <ds-status\r\n          status=\"{{statusClass(sectionStatusKey)}}\" no-opacity icon\r\n          class=\"circle-status d-none d-sm-inline-block\">\r\n          <ds-icon icon=\"{{statusIcon(sectionStatusKey)}}\"></ds-icon>\r\n        </ds-status>\r\n        <div class=\"d-flex flex-column flex-grow-1\">\r\n          <span class=\"fs-16 fw-medium m-0\"> {{ sectionName }}</span>\r\n          @if (section.header?.processedBy) {\r\n            <bdi class=\"fs-12 fc-dark-gray fw-normal line-height-1 d-block mt-1\">\r\n              {{ processingDate }}\r\n            </bdi>\r\n          }\r\n        </div>\r\n      </div>\r\n      <div class=\"approval-panel-details gap-1\">\r\n        @if (!section?.body?.details?.['stage0']?.['isStage0'] || section?.body?.details?.['stage0']?.['isStage0'] === 'false') {\r\n          <ng-container>\r\n            @if (section?.header?.personTo) {\r\n              <div\r\n                class=\"d-flex align-items-center gap-3\"\r\n                (click)=\"$event.stopImmediatePropagation();\">\r\n                <div\r\n                  (click)=\"toggleSmallProfileInfo($event, 'recipient')\"\r\n                  class=\"d-flex align-items-center gap-2 radius-3 h-40\"\r\n                  [ngClass]=\"{'user-avatar-name px-0 px-md-2': !section?.header?.delegatedTo, 'p-0': section?.header?.delegatedTo}\">\r\n                  <ds-avatar image=\"{{section?.header?.personToThumbnail}}\" size=\"small\" class=\"user-avatar\"></ds-avatar>\r\n                  @if (!section?.header?.delegatedTo) {\r\n                    <span\r\n                      class=\"fs-14 fw-medium d-inline-block panel-user-name text-truncate\"\r\n                      [ngClass]=\"{'panel-user-only': !section?.header?.delegatedTo}\"\r\n                    >{{ section?.header?.personTo }}</span>\r\n                  }\r\n                </div>\r\n                @if (section?.header?.delegatedTo) {\r\n                  <div\r\n                    class=\"d-flex align-items-center gap-3\"\r\n                    (click)=\"toggleSmallProfileInfo($event, 'delegate')\">\r\n                    <img\r\n                      class=\"rotate-arrow\"\r\n                      alt=\"\"\r\n                      src=\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMSIgaGVpZ2h0PSIxMyIgdmlld0JveD0iMCAwIDIxIDEzIj48cGF0aCBkPSJNMjEsNy43NjNhMS42MjEsMS42MjEsMCwwLDEtLjQ0Ny41OTMsMS4zMDYsMS4zMDYsMCwwLDEtLjc1LjE5NGMtNy4yODQsMC04LjU2OCwwLTE1Ljg1MywwSDMuNjY5TDMuNjMsOC42Yy4wNzcuMDY0LjE1OC4xMjQuMjI5LjE5NHExLjcxLDEuNjksMy40MiwzLjM4MWExLjAyMywxLjAyMywwLDAsMSwuMjkxLDEuMDc5Ljk5Mi45OTIsMCwwLDEtLjguNzE5LDEuMDUzLDEuMDUzLDAsMCwxLTEtLjMzMVEzLjgzMSwxMS43MTksMS44ODYsOS44Yy0uNDQyLS40MzctLjg3OS0uODgxLTEuMzMtMS4zMDlBNC41NzIsNC41NzIsMCwwLDEsMCw3LjgxNFY3LjE4NUEzMC43ODMsMzAuNzgzLDAsMCwxLDIuNzMsNC4zNzFjMS0xLjAyNywyLjAzOC0yLjAyNSwzLjA2My0zLjAzMkExLjA0OSwxLjA0OSwwLDEsMSw3LjI3NywyLjgyQzYuNCwzLjcsNS41MDksNC41Nyw0LjYyNSw1LjQ0NmMtLjMyMy4zMjEtLjY0NC42NDUtLjk3My45NzYuMDg0LjA1OS4xODEuMDI3LjI3LjAyNyw3LjI1OCwwLDguNTE2LDAsMTUuNzc1LDBBMS4xMjksMS4xMjksMCwwLDEsMjEsNy4yOXYuNDcyWiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAtMC45OTkpIiBmaWxsPSIjYTU0ZWUxIi8+PC9zdmc+\"/>\r\n                    <div class=\"d-flex align-items-center gap-2 px-0 px-md-2 radius-3 user-avatar-name h-40\">\r\n                      <ds-avatar image=\"{{section?.header?.delegatedToThumbnail}}\" size=\"small\" class=\"user-avatar\"></ds-avatar>\r\n                      <span\r\n                        class=\"fs-14 fw-medium d-inline-block panel-user-name text-truncate\">{{ section?.header?.delegatedTo }}</span>\r\n                    </div>\r\n                  </div>\r\n                }\r\n              </div>\r\n            }\r\n          </ng-container>\r\n        }\r\n\r\n        @if (section?.body?.details?.['decision']?.key) {\r\n          <ds-status\r\n            class=\"main-status\"\r\n            status=\"{{statusClass(section?.body?.details?.['decision']?.key)}}\">{{ section?.body?.details?.['decision']?.value }}\r\n          </ds-status>\r\n        }\r\n      </div>\r\n\r\n      <div class=\"approval-panel-toggle\">\r\n        @if (approvalPanel.expanded) {\r\n          <ds-icon icon=\"minus\" class=\"fs-20 fc-dark-gray\"></ds-icon>\r\n        } @else {\r\n          <ds-icon icon=\"plus-1\" class=\"fs-20 fc-coral\"></ds-icon>\r\n        }\r\n      </div>\r\n\r\n    </div>\r\n  </mat-expansion-panel-header>\r\n  <section class=\"border-top pt-4\">\r\n    <ng-container *ngComponentOutlet=\"sectionFormComponent; ndcDynamicInputs: input\"></ng-container>\r\n  </section>\r\n\r\n</mat-expansion-panel>\r\n", styles: [":host ::ng-deep .mat-expansion-panel-content{background:#fff!important}:host .mat-expansion-panel-content{background:#fff!important}:host .approval-panel-container{display:grid;grid-template-columns:40% calc(60% - 45px) 20px;grid-template-areas:\"title details toggle\";gap:.75rem;place-content:space-between;align-items:center;flex-grow:1;width:100%}@media (max-width: 991px){:host .approval-panel-container{grid-template-columns:calc(100% - 45px) 20px;grid-template-areas:\"title toggle\" \"details details\"}}:host .approval-panel-container .approval-panel-title{grid-area:title}:host .approval-panel-container .panel-user-name{max-width:120px}@media (max-width: 768px){:host .approval-panel-container .panel-user-name.panel-ueser-only{max-width:140px}:host .approval-panel-container .panel-user-name:not(.panel-ueser-only){max-width:90px}}:host .approval-panel-container .approval-panel-details{display:flex;align-items:center;justify-content:space-between;grid-area:details}:host .approval-panel-container .approval-panel-toggle{grid-area:toggle;display:flex;align-items:center;justify-content:center;width:20px}:host ::ng-deep ds-avatar.user-avatar .avatar{--default-size: 25px}@media (min-width: 768px){:host ::ng-deep ds-avatar.user-avatar .avatar{--default-size: 31px;--avatar-border: 3px solid var(--light-gray)}}@media (min-width: 768px){:host ::ng-deep .user-avatar-name{padding-inline-end:1rem!important}}:host .circle-status::part(base){--status-radius: 50%;--status-size: 18px;--status-fs: 80% }:host .panel-title{min-width:40%;width:40%}@media (max-width: 576px){:host .panel-title{min-width:100%!important;width:100%!important}}:host .panel-user-status{min-width:60%;width:60%;display:flex;align-items:center;justify-content:space-between}@media (max-width: 576px){:host .panel-user-status{min-width:100%!important;width:100%!important}:host .panel-user-status .user-delegate{min-width:auto}:host .panel-user-status .main-status::part(base){--status-width: 50px}}\n"], dependencies: [{ kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i2$3.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i2$3.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: ComponentOutletIoDirective, selector: "[ngComponentOutletNdcDynamicInputs],[ngComponentOutletNdcDynamicOutputs]", inputs: ["ngComponentOutletNdcDynamicInputs", "ngComponentOutletNdcDynamicOutputs"], exportAs: ["ndcDynamicIo"] }, { kind: "ngmodule", type: SatPopoverModule }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: DynamicModule }, { kind: "directive", type: i3$3.ComponentOutletInjectorDirective, selector: "[ngComponentOutlet]", exportAs: ["ndcComponentOutletInjector"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: FormSectionComponent, isStandalone: true, selector: "app-form-section", inputs: { requestDetails: "requestDetails", section: "section", form: "form", lov: "lov", isReadOnly: "isReadOnly", controllers: "controllers", segmentDynamicLoaderService: "segmentDynamicLoaderService", sectionFormComponent: "sectionFormComponent", sectionName: "sectionName" }, ngImport: i0, template: "<mat-expansion-panel class=\"mb-4\" [expanded]=\"isExpanded\" hideToggle #approvalPanel=\"matExpansionPanel\">\r\n  <mat-expansion-panel-header>\r\n\r\n    <div class=\"approval-panel-container\">\r\n      <div class=\"d-flex gap-2 flex-grow-1 approval-panel-title\">\r\n        <ds-status\r\n          status=\"{{statusClass(sectionStatusKey)}}\" no-opacity icon\r\n          class=\"circle-status d-none d-sm-inline-block\">\r\n          <ds-icon icon=\"{{statusIcon(sectionStatusKey)}}\"></ds-icon>\r\n        </ds-status>\r\n        <div class=\"d-flex flex-column flex-grow-1\">\r\n          <span class=\"fs-16 fw-medium m-0\"> {{ sectionName }}</span>\r\n          @if (section.header?.processedBy) {\r\n            <bdi class=\"fs-12 fc-dark-gray fw-normal line-height-1 d-block mt-1\">\r\n              {{ processingDate }}\r\n            </bdi>\r\n          }\r\n        </div>\r\n      </div>\r\n      <div class=\"approval-panel-details gap-1\">\r\n        @if (!section?.body?.details?.['stage0']?.['isStage0'] || section?.body?.details?.['stage0']?.['isStage0'] === 'false') {\r\n          <ng-container>\r\n            @if (section?.header?.personTo) {\r\n              <div\r\n                class=\"d-flex align-items-center gap-3\"\r\n                (click)=\"$event.stopImmediatePropagation();\">\r\n                <div\r\n                  (click)=\"toggleSmallProfileInfo($event, 'recipient')\"\r\n                  class=\"d-flex align-items-center gap-2 radius-3 h-40\"\r\n                  [ngClass]=\"{'user-avatar-name px-0 px-md-2': !section?.header?.delegatedTo, 'p-0': section?.header?.delegatedTo}\">\r\n                  <ds-avatar image=\"{{section?.header?.personToThumbnail}}\" size=\"small\" class=\"user-avatar\"></ds-avatar>\r\n                  @if (!section?.header?.delegatedTo) {\r\n                    <span\r\n                      class=\"fs-14 fw-medium d-inline-block panel-user-name text-truncate\"\r\n                      [ngClass]=\"{'panel-user-only': !section?.header?.delegatedTo}\"\r\n                    >{{ section?.header?.personTo }}</span>\r\n                  }\r\n                </div>\r\n                @if (section?.header?.delegatedTo) {\r\n                  <div\r\n                    class=\"d-flex align-items-center gap-3\"\r\n                    (click)=\"toggleSmallProfileInfo($event, 'delegate')\">\r\n                    <img\r\n                      class=\"rotate-arrow\"\r\n                      alt=\"\"\r\n                      src=\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMSIgaGVpZ2h0PSIxMyIgdmlld0JveD0iMCAwIDIxIDEzIj48cGF0aCBkPSJNMjEsNy43NjNhMS42MjEsMS42MjEsMCwwLDEtLjQ0Ny41OTMsMS4zMDYsMS4zMDYsMCwwLDEtLjc1LjE5NGMtNy4yODQsMC04LjU2OCwwLTE1Ljg1MywwSDMuNjY5TDMuNjMsOC42Yy4wNzcuMDY0LjE1OC4xMjQuMjI5LjE5NHExLjcxLDEuNjksMy40MiwzLjM4MWExLjAyMywxLjAyMywwLDAsMSwuMjkxLDEuMDc5Ljk5Mi45OTIsMCwwLDEtLjguNzE5LDEuMDUzLDEuMDUzLDAsMCwxLTEtLjMzMVEzLjgzMSwxMS43MTksMS44ODYsOS44Yy0uNDQyLS40MzctLjg3OS0uODgxLTEuMzMtMS4zMDlBNC41NzIsNC41NzIsMCwwLDEsMCw3LjgxNFY3LjE4NUEzMC43ODMsMzAuNzgzLDAsMCwxLDIuNzMsNC4zNzFjMS0xLjAyNywyLjAzOC0yLjAyNSwzLjA2My0zLjAzMkExLjA0OSwxLjA0OSwwLDEsMSw3LjI3NywyLjgyQzYuNCwzLjcsNS41MDksNC41Nyw0LjYyNSw1LjQ0NmMtLjMyMy4zMjEtLjY0NC42NDUtLjk3My45NzYuMDg0LjA1OS4xODEuMDI3LjI3LjAyNyw3LjI1OCwwLDguNTE2LDAsMTUuNzc1LDBBMS4xMjksMS4xMjksMCwwLDEsMjEsNy4yOXYuNDcyWiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAtMC45OTkpIiBmaWxsPSIjYTU0ZWUxIi8+PC9zdmc+\"/>\r\n                    <div class=\"d-flex align-items-center gap-2 px-0 px-md-2 radius-3 user-avatar-name h-40\">\r\n                      <ds-avatar image=\"{{section?.header?.delegatedToThumbnail}}\" size=\"small\" class=\"user-avatar\"></ds-avatar>\r\n                      <span\r\n                        class=\"fs-14 fw-medium d-inline-block panel-user-name text-truncate\">{{ section?.header?.delegatedTo }}</span>\r\n                    </div>\r\n                  </div>\r\n                }\r\n              </div>\r\n            }\r\n          </ng-container>\r\n        }\r\n\r\n        @if (section?.body?.details?.['decision']?.key) {\r\n          <ds-status\r\n            class=\"main-status\"\r\n            status=\"{{statusClass(section?.body?.details?.['decision']?.key)}}\">{{ section?.body?.details?.['decision']?.value }}\r\n          </ds-status>\r\n        }\r\n      </div>\r\n\r\n      <div class=\"approval-panel-toggle\">\r\n        @if (approvalPanel.expanded) {\r\n          <ds-icon icon=\"minus\" class=\"fs-20 fc-dark-gray\"></ds-icon>\r\n        } @else {\r\n          <ds-icon icon=\"plus-1\" class=\"fs-20 fc-coral\"></ds-icon>\r\n        }\r\n      </div>\r\n\r\n    </div>\r\n  </mat-expansion-panel-header>\r\n  <section class=\"border-top pt-4\">\r\n    <ng-container *ngComponentOutlet=\"sectionFormComponent; ndcDynamicInputs: input\"></ng-container>\r\n  </section>\r\n\r\n</mat-expansion-panel>\r\n", styles: [":host ::ng-deep .mat-expansion-panel-content{background:#fff!important}:host .mat-expansion-panel-content{background:#fff!important}:host .approval-panel-container{display:grid;grid-template-columns:40% calc(60% - 45px) 20px;grid-template-areas:\"title details toggle\";gap:.75rem;place-content:space-between;align-items:center;flex-grow:1;width:100%}@media (max-width: 991px){:host .approval-panel-container{grid-template-columns:calc(100% - 45px) 20px;grid-template-areas:\"title toggle\" \"details details\"}}:host .approval-panel-container .approval-panel-title{grid-area:title}:host .approval-panel-container .panel-user-name{max-width:120px}@media (max-width: 768px){:host .approval-panel-container .panel-user-name.panel-ueser-only{max-width:140px}:host .approval-panel-container .panel-user-name:not(.panel-ueser-only){max-width:90px}}:host .approval-panel-container .approval-panel-details{display:flex;align-items:center;justify-content:space-between;grid-area:details}:host .approval-panel-container .approval-panel-toggle{grid-area:toggle;display:flex;align-items:center;justify-content:center;width:20px}:host ::ng-deep ds-avatar.user-avatar .avatar{--default-size: 25px}@media (min-width: 768px){:host ::ng-deep ds-avatar.user-avatar .avatar{--default-size: 31px;--avatar-border: 3px solid var(--light-gray)}}@media (min-width: 768px){:host ::ng-deep .user-avatar-name{padding-inline-end:1rem!important}}:host .circle-status::part(base){--status-radius: 50%;--status-size: 18px;--status-fs: 80% }:host .panel-title{min-width:40%;width:40%}@media (max-width: 576px){:host .panel-title{min-width:100%!important;width:100%!important}}:host .panel-user-status{min-width:60%;width:60%;display:flex;align-items:center;justify-content:space-between}@media (max-width: 576px){:host .panel-user-status{min-width:100%!important;width:100%!important}:host .panel-user-status .user-delegate{min-width:auto}:host .panel-user-status .main-status::part(base){--status-width: 50px}}\n"], dependencies: [{ kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i2$4.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i2$4.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: ComponentOutletIoDirective, selector: "[ngComponentOutletNdcDynamicInputs],[ngComponentOutletNdcDynamicOutputs]", inputs: ["ngComponentOutletNdcDynamicInputs", "ngComponentOutletNdcDynamicOutputs"], exportAs: ["ndcDynamicIo"] }, { kind: "ngmodule", type: SatPopoverModule }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: DynamicModule }, { kind: "directive", type: i3$3.ComponentOutletInjectorDirective, selector: "[ngComponentOutlet]", exportAs: ["ndcComponentOutletInjector"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: FormSectionComponent, decorators: [{
             type: Component,
@@ -6137,7 +6043,7 @@ class MainRequestDetailsComponent {
         return this.section?.body?.details?.['expandStage'] === 'true';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: MainRequestDetailsComponent, deps: [{ token: CoreI18nService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: MainRequestDetailsComponent, isStandalone: true, selector: "app-main-request-details", inputs: { section: "section", lov: "lov", form: "form" }, ngImport: i0, template: "<mat-accordion class=\"primary-accordion main-request-accordion border-top\">\r\n  <mat-expansion-panel [expanded]=\"isExpanded || (form?.sections?.length === 1 )\" class=\"mb-3\" hideToggle #requestPanel=\"matExpansionPanel\">\r\n    <mat-expansion-panel-header>\r\n      <h2 class=\"fs-16 fw-medium fc-coral m-0 flex-grow-1\">{{ i18n.translate('requestDetailsTitle') }}</h2>\r\n      @if (requestPanel.expanded) {\r\n        <div class=\"d-inline-flex align-items-center gap-2\">\r\n          <ds-icon icon=\"minus\" class=\"fs-20 fc-dark-gray\"></ds-icon>\r\n        </div>\r\n      } @else {\r\n        <div class=\"d-inline-flex align-items-center gap-2\">\r\n          <ds-icon icon=\"plus-1\" class=\"fs-20 fc-coral\"></ds-icon>\r\n        </div>\r\n      }\r\n    </mat-expansion-panel-header>\r\n    <section class=\"default-box box-shadow p-4\">\r\n      <ng-content></ng-content>\r\n    </section>\r\n  </mat-expansion-panel>\r\n</mat-accordion>\r\n", styles: [".main-request-accordion{--accordion-height: 65px;--accordion-radius: 0 0 4px 4px;--accordion-shadow: 0 7px 10px rgba(var(--rgb-black), 3%);--accordion-border: 1px solid var(--light-gray);--accordion-border-active: 1px solid var(--gray);--panel-padding: 0 1.5rem;--panel-body-padding: 0 0 1.5rem;position:relative;z-index:1}@media (max-width: 576px){.main-request-accordion{--accordion-height: 55px;--panel-padding: 0 1rem;--panel-body-padding: 0 1rem 1rem}}.main-request-accordion .inner-accordion{--accordion-height: 44px;--accordion-bc: var(--light-gray);--accordion-bc-active: var(--white);--accordion-border: 1px solid var(--light-gray);--accordion-border-active: 1px solid var(--light-gray);--panel-body-padding: 0;--accordion-shadow: none;--panel-padding: 0 1.5rem}\n"], dependencies: [{ kind: "ngmodule", type: MatExpansionModule }, { kind: "directive", type: i2$3.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i2$3.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i2$3.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: MainRequestDetailsComponent, isStandalone: true, selector: "app-main-request-details", inputs: { section: "section", lov: "lov", form: "form" }, ngImport: i0, template: "<mat-accordion class=\"primary-accordion main-request-accordion border-top\">\r\n  <mat-expansion-panel [expanded]=\"isExpanded || (form?.sections?.length === 1 )\" class=\"mb-3\" hideToggle #requestPanel=\"matExpansionPanel\">\r\n    <mat-expansion-panel-header>\r\n      <h2 class=\"fs-16 fw-medium fc-coral m-0 flex-grow-1\">{{ i18n.translate('requestDetailsTitle') }}</h2>\r\n      @if (requestPanel.expanded) {\r\n        <div class=\"d-inline-flex align-items-center gap-2\">\r\n          <ds-icon icon=\"minus\" class=\"fs-20 fc-dark-gray\"></ds-icon>\r\n        </div>\r\n      } @else {\r\n        <div class=\"d-inline-flex align-items-center gap-2\">\r\n          <ds-icon icon=\"plus-1\" class=\"fs-20 fc-coral\"></ds-icon>\r\n        </div>\r\n      }\r\n    </mat-expansion-panel-header>\r\n    <section class=\"default-box box-shadow p-4\">\r\n      <ng-content></ng-content>\r\n    </section>\r\n  </mat-expansion-panel>\r\n</mat-accordion>\r\n", styles: [".main-request-accordion{--accordion-height: 65px;--accordion-radius: 0 0 4px 4px;--accordion-shadow: 0 7px 10px rgba(var(--rgb-black), 3%);--accordion-border: 1px solid var(--light-gray);--accordion-border-active: 1px solid var(--gray);--panel-padding: 0 1.5rem;--panel-body-padding: 0 0 1.5rem;position:relative;z-index:1}@media (max-width: 576px){.main-request-accordion{--accordion-height: 55px;--panel-padding: 0 1rem;--panel-body-padding: 0 1rem 1rem}}.main-request-accordion .inner-accordion{--accordion-height: 44px;--accordion-bc: var(--light-gray);--accordion-bc-active: var(--white);--accordion-border: 1px solid var(--light-gray);--accordion-border-active: 1px solid var(--light-gray);--panel-body-padding: 0;--accordion-shadow: none;--panel-padding: 0 1.5rem}\n"], dependencies: [{ kind: "ngmodule", type: MatExpansionModule }, { kind: "directive", type: i2$4.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i2$4.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i2$4.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: MainRequestDetailsComponent, decorators: [{
             type: Component,
@@ -6378,8 +6284,8 @@ class HeaderComponent {
         // this.sidenavSubscription.unsubscribe()
     }
     location = location;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: HeaderComponent, deps: [{ token: CoreI18nService }, { token: SidenavService }, { token: CoreService }, { token: i2$4.Router }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: HeaderComponent, isStandalone: true, selector: "app-header", ngImport: i0, template: "<ng-container *ngIf=\"!isMobile\">\r\n  <mat-toolbar\r\n    class=\"align-items-center justify-content-between gap-3 border-bottom\"\r\n  >\r\n    <div class=\"d-flex align-items-center gap-3\">\r\n      <ds-button\r\n        shape=\"flat\"\r\n        icon\r\n        color=\"light-gray\"\r\n        square\r\n        (click)=\"toggleSideNav()\"\r\n      >\r\n        <ds-icon icon=\"burger-menu-1\" class=\"fs-24 fc-dark-gray\"></ds-icon>\r\n      </ds-button>\r\n\r\n      <a [href]=\"location.origin\">\r\n        <figure class=\"m-0 d-flex\">\r\n          <img class=\"main-logo\" src=\"assets/images/hub.svg\" alt=\"\" />\r\n        </figure>\r\n      </a>\r\n    </div>\r\n\r\n    <div class=\"d-flex align-items-center gap-3\">\r\n      <ds-button\r\n        shape=\"flat\"\r\n        color=\"light-gray\"\r\n        class=\"user-menu-btn\"\r\n        [matMenuTriggerFor]=\"userMenu\"\r\n      >\r\n        <ds-avatar\r\n          image=\"/group/i-gate/wm-bpm/forms/-/proxy/portrait?email={{userData?.email}}\"\r\n          onerror=\"this.onerror=null;this.src='assets/images/user2.jpg'\"\r\n          slot=\"prefix\"\r\n          class=\"avatar\"\r\n        >\r\n        </ds-avatar>\r\n\r\n        <span class=\"fs-14 fw-medium fc-black\">\r\n          {{ coreService.getShortName( coreService?.loggedInUserData?.['name']) }}\r\n        </span>\r\n\r\n        <ds-icon\r\n          slot=\"suffix\"\r\n          icon=\"arrow\"\r\n          class=\"fc-dark-gray fs-16\"\r\n        ></ds-icon>\r\n      </ds-button>\r\n    </div>\r\n  </mat-toolbar>\r\n\r\n  <!-- User Menu -->\r\n  <mat-menu #userMenu=\"matMenu\" class=\"user-menu\">\r\n    <div mat-menu-item>\r\n      <span class=\"fs-14\">{{ translate.translate('welcome') }}, </span>\r\n      <br />\r\n      <span class=\"fs-14 fw-medium line-height-1\">{{ coreService.getShortName( coreService?.loggedInUserData?.['name']) }}</span>\r\n    </div>\r\n    <button mat-menu-item (click)=\"setLanguage()\">\r\n      <div class=\"d-flex align-items-center gap-2\">\r\n        <ds-icon icon=\"globe\" class=\"fs-25 fc-purple\"></ds-icon>\r\n        <span class=\"fs-14 fw-medium fc-black\">{{\r\n            translate.translate('otherLang')\r\n          }}</span>\r\n      </div>\r\n    </button>\r\n    <button mat-menu-item (click)=\"logout()\">\r\n      <div class=\"d-flex align-items-center gap-2\">\r\n        <ds-icon icon=\"logout\" class=\"fs-25 fc-red\"></ds-icon>\r\n        <span class=\"fs-14 fw-medium fc-black\">{{\r\n            translate.translate('logout')\r\n          }}</span>\r\n      </div>\r\n    </button>\r\n  </mat-menu>\r\n</ng-container>\r\n", styles: [".test-user-agent{position:fixed;top:90px;width:100%;z-index:99999;color:#fff}ds-button[square].burger-menu::part(base){--btn-padding: 10px;margin-bottom:-1px;width:37px;height:37px;--default-size: 37px}[dir=rtl] :host ds-button::part(overlay){inset:0}mat-toolbar{background-color:var(--main-toolbar-bc);height:var(--main-toolbar-height);position:fixed;top:0;z-index:var(--main-toolbar-zIndex);border-bottom:1px solid var(--light-gray)!important}mat-toolbar .logo img{min-width:100px}.main-logo{display:block;width:auto;height:30px;object-fit:contain}@media (max-width: 991px){.user-menu-btn::part(base){border:0px;padding:0;--default-size: 40px}.user-menu-btn::part(overlay){border-radius:50%}.user-menu-btn::part(label),.user-menu-btn::part(suffix){display:none}}:host::ng-deep .avatar{min-width:24px;width:24px;height:24px;background-color:transparent}:host::ng-deep ds-button.add::part(base){--btn-bg-color: var(--coral)}@media (max-width: 991px){:host::ng-deep .avatar{min-width:40px;width:40px;height:40px}:host::ng-deep .avatar .avatar--x-small{--default-size: 40px}}.linkS{position:fixed;z-index:2;bottom:100px;right:20px}.dashboard-menu-icon{display:inline-flex;align-items:center;justify-content:center;min-width:56px;width:56px;height:56px;border-radius:50%;background-color:var(--coral);margin-bottom:10px}::ng-deep .inside-mobile-app{--main-toolbar-height: 0px}::ng-deep ds-button.transparent::part(base){--btn-bg-color: transparent;--btn-border-color: transparent;--btn-overlay-color: transparent}::ng-deep .mat-divider-vertical{border-right-color:var(--black)}.mat-divider{--mat-divider-width: 1px;--mat-divider-color: var(--dark-gray)}.header-search{width:500px}@media (max-width: 1130px){.header-search{width:200px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i4$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i5$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: HeaderComponent, deps: [{ token: CoreI18nService }, { token: SidenavService }, { token: CoreService }, { token: i2$5.Router }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: HeaderComponent, isStandalone: true, selector: "app-header", ngImport: i0, template: "<ng-container *ngIf=\"!isMobile\">\r\n  <mat-toolbar\r\n    class=\"align-items-center justify-content-between gap-3 border-bottom\"\r\n  >\r\n    <div class=\"d-flex align-items-center gap-3\">\r\n      <ds-button\r\n        shape=\"flat\"\r\n        icon\r\n        color=\"light-gray\"\r\n        square\r\n        (click)=\"toggleSideNav()\"\r\n      >\r\n        <ds-icon icon=\"burger-menu-1\" class=\"fs-24 fc-dark-gray\"></ds-icon>\r\n      </ds-button>\r\n\r\n      <a [href]=\"location.origin\">\r\n        <figure class=\"m-0 d-flex\">\r\n          <img class=\"main-logo\" src=\"assets/images/hub.svg\" alt=\"\" />\r\n        </figure>\r\n      </a>\r\n    </div>\r\n\r\n    <div class=\"d-flex align-items-center gap-3\">\r\n      <ds-button\r\n        shape=\"flat\"\r\n        color=\"light-gray\"\r\n        class=\"user-menu-btn\"\r\n        [matMenuTriggerFor]=\"userMenu\"\r\n      >\r\n        <ds-avatar\r\n          image=\"/group/i-gate/wm-bpm/forms/-/proxy/portrait?email={{userData?.email}}\"\r\n          onerror=\"this.onerror=null;this.src='assets/images/user2.jpg'\"\r\n          slot=\"prefix\"\r\n          class=\"avatar\"\r\n        >\r\n        </ds-avatar>\r\n\r\n        <span class=\"fs-14 fw-medium fc-black\">\r\n          {{ coreService.getShortName( coreService?.loggedInUserData?.['name']) }}\r\n        </span>\r\n\r\n        <ds-icon\r\n          slot=\"suffix\"\r\n          icon=\"arrow\"\r\n          class=\"fc-dark-gray fs-16\"\r\n        ></ds-icon>\r\n      </ds-button>\r\n    </div>\r\n  </mat-toolbar>\r\n\r\n  <!-- User Menu -->\r\n  <mat-menu #userMenu=\"matMenu\" class=\"user-menu\">\r\n    <div mat-menu-item>\r\n      <span class=\"fs-14\">{{ translate.translate('welcome') }}, </span>\r\n      <br />\r\n      <span class=\"fs-14 fw-medium line-height-1\">{{ coreService.getShortName( coreService?.loggedInUserData?.['name']) }}</span>\r\n    </div>\r\n    <button mat-menu-item (click)=\"setLanguage()\">\r\n      <div class=\"d-flex align-items-center gap-2\">\r\n        <ds-icon icon=\"globe\" class=\"fs-25 fc-purple\"></ds-icon>\r\n        <span class=\"fs-14 fw-medium fc-black\">{{\r\n            translate.translate('otherLang')\r\n          }}</span>\r\n      </div>\r\n    </button>\r\n    <button mat-menu-item (click)=\"logout()\">\r\n      <div class=\"d-flex align-items-center gap-2\">\r\n        <ds-icon icon=\"logout\" class=\"fs-25 fc-red\"></ds-icon>\r\n        <span class=\"fs-14 fw-medium fc-black\">{{\r\n            translate.translate('logout')\r\n          }}</span>\r\n      </div>\r\n    </button>\r\n  </mat-menu>\r\n</ng-container>\r\n", styles: [".test-user-agent{position:fixed;top:90px;width:100%;z-index:99999;color:#fff}ds-button[square].burger-menu::part(base){--btn-padding: 10px;margin-bottom:-1px;width:37px;height:37px;--default-size: 37px}[dir=rtl] :host ds-button::part(overlay){inset:0}mat-toolbar{background-color:var(--main-toolbar-bc);height:var(--main-toolbar-height);position:fixed;top:0;z-index:var(--main-toolbar-zIndex);border-bottom:1px solid var(--light-gray)!important}mat-toolbar .logo img{min-width:100px}.main-logo{display:block;width:auto;height:30px;object-fit:contain}@media (max-width: 991px){.user-menu-btn::part(base){border:0px;padding:0;--default-size: 40px}.user-menu-btn::part(overlay){border-radius:50%}.user-menu-btn::part(label),.user-menu-btn::part(suffix){display:none}}:host::ng-deep .avatar{min-width:24px;width:24px;height:24px;background-color:transparent}:host::ng-deep ds-button.add::part(base){--btn-bg-color: var(--coral)}@media (max-width: 991px){:host::ng-deep .avatar{min-width:40px;width:40px;height:40px}:host::ng-deep .avatar .avatar--x-small{--default-size: 40px}}.linkS{position:fixed;z-index:2;bottom:100px;right:20px}.dashboard-menu-icon{display:inline-flex;align-items:center;justify-content:center;min-width:56px;width:56px;height:56px;border-radius:50%;background-color:var(--coral);margin-bottom:10px}::ng-deep .inside-mobile-app{--main-toolbar-height: 0px}::ng-deep ds-button.transparent::part(base){--btn-bg-color: transparent;--btn-border-color: transparent;--btn-overlay-color: transparent}::ng-deep .mat-divider-vertical{border-right-color:var(--black)}.mat-divider{--mat-divider-width: 1px;--mat-divider-color: var(--dark-gray)}.header-search{width:500px}@media (max-width: 1130px){.header-search{width:200px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i4$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i5$2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: HeaderComponent, decorators: [{
             type: Component,
@@ -6390,7 +6296,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                         MatMenuModule,
                         MatToolbarModule
                     ], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<ng-container *ngIf=\"!isMobile\">\r\n  <mat-toolbar\r\n    class=\"align-items-center justify-content-between gap-3 border-bottom\"\r\n  >\r\n    <div class=\"d-flex align-items-center gap-3\">\r\n      <ds-button\r\n        shape=\"flat\"\r\n        icon\r\n        color=\"light-gray\"\r\n        square\r\n        (click)=\"toggleSideNav()\"\r\n      >\r\n        <ds-icon icon=\"burger-menu-1\" class=\"fs-24 fc-dark-gray\"></ds-icon>\r\n      </ds-button>\r\n\r\n      <a [href]=\"location.origin\">\r\n        <figure class=\"m-0 d-flex\">\r\n          <img class=\"main-logo\" src=\"assets/images/hub.svg\" alt=\"\" />\r\n        </figure>\r\n      </a>\r\n    </div>\r\n\r\n    <div class=\"d-flex align-items-center gap-3\">\r\n      <ds-button\r\n        shape=\"flat\"\r\n        color=\"light-gray\"\r\n        class=\"user-menu-btn\"\r\n        [matMenuTriggerFor]=\"userMenu\"\r\n      >\r\n        <ds-avatar\r\n          image=\"/group/i-gate/wm-bpm/forms/-/proxy/portrait?email={{userData?.email}}\"\r\n          onerror=\"this.onerror=null;this.src='assets/images/user2.jpg'\"\r\n          slot=\"prefix\"\r\n          class=\"avatar\"\r\n        >\r\n        </ds-avatar>\r\n\r\n        <span class=\"fs-14 fw-medium fc-black\">\r\n          {{ coreService.getShortName( coreService?.loggedInUserData?.['name']) }}\r\n        </span>\r\n\r\n        <ds-icon\r\n          slot=\"suffix\"\r\n          icon=\"arrow\"\r\n          class=\"fc-dark-gray fs-16\"\r\n        ></ds-icon>\r\n      </ds-button>\r\n    </div>\r\n  </mat-toolbar>\r\n\r\n  <!-- User Menu -->\r\n  <mat-menu #userMenu=\"matMenu\" class=\"user-menu\">\r\n    <div mat-menu-item>\r\n      <span class=\"fs-14\">{{ translate.translate('welcome') }}, </span>\r\n      <br />\r\n      <span class=\"fs-14 fw-medium line-height-1\">{{ coreService.getShortName( coreService?.loggedInUserData?.['name']) }}</span>\r\n    </div>\r\n    <button mat-menu-item (click)=\"setLanguage()\">\r\n      <div class=\"d-flex align-items-center gap-2\">\r\n        <ds-icon icon=\"globe\" class=\"fs-25 fc-purple\"></ds-icon>\r\n        <span class=\"fs-14 fw-medium fc-black\">{{\r\n            translate.translate('otherLang')\r\n          }}</span>\r\n      </div>\r\n    </button>\r\n    <button mat-menu-item (click)=\"logout()\">\r\n      <div class=\"d-flex align-items-center gap-2\">\r\n        <ds-icon icon=\"logout\" class=\"fs-25 fc-red\"></ds-icon>\r\n        <span class=\"fs-14 fw-medium fc-black\">{{\r\n            translate.translate('logout')\r\n          }}</span>\r\n      </div>\r\n    </button>\r\n  </mat-menu>\r\n</ng-container>\r\n", styles: [".test-user-agent{position:fixed;top:90px;width:100%;z-index:99999;color:#fff}ds-button[square].burger-menu::part(base){--btn-padding: 10px;margin-bottom:-1px;width:37px;height:37px;--default-size: 37px}[dir=rtl] :host ds-button::part(overlay){inset:0}mat-toolbar{background-color:var(--main-toolbar-bc);height:var(--main-toolbar-height);position:fixed;top:0;z-index:var(--main-toolbar-zIndex);border-bottom:1px solid var(--light-gray)!important}mat-toolbar .logo img{min-width:100px}.main-logo{display:block;width:auto;height:30px;object-fit:contain}@media (max-width: 991px){.user-menu-btn::part(base){border:0px;padding:0;--default-size: 40px}.user-menu-btn::part(overlay){border-radius:50%}.user-menu-btn::part(label),.user-menu-btn::part(suffix){display:none}}:host::ng-deep .avatar{min-width:24px;width:24px;height:24px;background-color:transparent}:host::ng-deep ds-button.add::part(base){--btn-bg-color: var(--coral)}@media (max-width: 991px){:host::ng-deep .avatar{min-width:40px;width:40px;height:40px}:host::ng-deep .avatar .avatar--x-small{--default-size: 40px}}.linkS{position:fixed;z-index:2;bottom:100px;right:20px}.dashboard-menu-icon{display:inline-flex;align-items:center;justify-content:center;min-width:56px;width:56px;height:56px;border-radius:50%;background-color:var(--coral);margin-bottom:10px}::ng-deep .inside-mobile-app{--main-toolbar-height: 0px}::ng-deep ds-button.transparent::part(base){--btn-bg-color: transparent;--btn-border-color: transparent;--btn-overlay-color: transparent}::ng-deep .mat-divider-vertical{border-right-color:var(--black)}.mat-divider{--mat-divider-width: 1px;--mat-divider-color: var(--dark-gray)}.header-search{width:500px}@media (max-width: 1130px){.header-search{width:200px}}\n"] }]
-        }], ctorParameters: () => [{ type: CoreI18nService }, { type: SidenavService }, { type: CoreService }, { type: i2$4.Router }, { type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: CoreI18nService }, { type: SidenavService }, { type: CoreService }, { type: i2$5.Router }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [PLATFORM_ID]
                 }] }] });
@@ -6532,13 +6438,13 @@ class SideNavComponent {
         }
         this.router.navigate([url]);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SideNavComponent, deps: [{ token: SidenavService }, { token: i2$4.Router }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SideNavComponent, deps: [{ token: SidenavService }, { token: i2$5.Router }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: SideNavComponent, isStandalone: true, selector: "app-side-nav", inputs: { isOpened: "isOpened" }, viewQueries: [{ propertyName: "MenuTrigger", first: true, predicate: ["MenuTrigger"], descendants: true }], ngImport: i0, template: "<aside>\r\n  <div class=\"header d-flex d-lg-none\">\r\n    <div class=\"d-flex h-100 mt-auto justify-content-between w-100\">\r\n      <h1 class=\"fs-26 fw-bold fc-white logo\">academy</h1>\r\n      <ds-button size=\"small\" color=\"purple\" class=\"close purple\" (click)=\"closeSidenav()\">\r\n        <ds-icon icon=\"close\" class=\"fs-15 fc-white\"></ds-icon>\r\n      </ds-button>\r\n    </div>\r\n  </div>\r\n  <nav>\r\n    <ul>\r\n      <!--  (mouseenter)=\"menuMobile ? null : MenuTrigger.openMenu()\"-->\r\n      <!-- (click)=\"goto(item.routerLink,item.matmenu) -->\r\n      @for (item of Menu; track $index) {\r\n        @if (item.matmenu) {\r\n          <li\r\n            (click)=\"closeSidenav();navigateTo(item)\"  matTooltipPosition=\"right\" matTooltip=\"{{item.name }}\"\r\n            [routerLinkActive]=\"'active'\" (click)=\"goto(item.routerLink!,item.matmenu)\" #MenuTrigger=\"matMenuTrigger\"\r\n            [matMenuTriggerFor]=\"menuMenu\" [routerLinkActiveOptions]=\"{ exact: true }\" class=\"cursor-pointer\">\r\n            <ds-icon icon=\"{{item.icon}}\" class=\"icon\"></ds-icon>\r\n            <span class=\"menu-label\">\r\n              {{ item.name }}\r\n            </span>\r\n          </li>\r\n          <mat-menu #menuMenu=\"matMenu\" class=\"aside-menu  visible-{{item.matmenu}}\">\r\n            <app-mat-menu [title]=\"item.name \" [icon]=\"item.icon\" [list]=\"item.List\"></app-mat-menu>\r\n          </mat-menu>\r\n        } @else {\r\n          <li\r\n            (click)=\"closeSidenav();navigateTo(item)\"  matTooltipPosition=\"right\" matTooltip=\"{{item.name }}\"\r\n            [routerLinkActive]=\"'active'\" [routerLinkActiveOptions]=\"{ exact: true }\" class=\"cursor-pointer\">\r\n            <ds-icon icon=\"{{item.icon}}\" class=\"icon\"></ds-icon>\r\n            <span class=\"menu-label\">\r\n              {{ item.name }}\r\n            </span>\r\n          </li>\r\n        }\r\n      }\r\n    </ul>\r\n  </nav>\r\n</aside>\r\n", styles: [":host ::ng-deep aside{min-width:var(--main-aside-width);width:var(--main-aside-width);height:calc(100vh - var(--main-toolbar-height));display:flex;position:var(--main-aside-position);right:var(--main-aside-right);left:var(--main-aside-left);top:var(--main-toolbar-height);z-index:var(--main-toolbar-zIndex);background-color:var(--main-aside-bc);transform:var(--main-aside-transform);transition:all .5s cubic-bezier(.685,.0473,.346,1)}@media (max-width: 1024px){:host ::ng-deep aside{height:100%;flex-direction:column;--main-toolbar-height: 0}}:host ::ng-deep aside nav{width:100%}:host ::ng-deep aside ul{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:20px;padding:0rem;margin:37px 0;list-style:none;counter-reset:itemCounter}:host ::ng-deep aside ul li{display:flex;align-items:center;flex-wrap:nowrap;overflow:hidden;max-width:calc(var(--main-aside-width-active) - 15px);width:100%;gap:var(--gap-width, 2.5rem);padding:3px 0 3px 10px;cursor:pointer;color:var(--main-aside-item-fc);border-radius:0;transition:var(--default-transition)}[dir=rtl] :host ::ng-deep aside ul li{padding:3px 10px 3px 0!important}@media (max-width: 1024px){@keyframes liAnimation{0%{transform:translateY(-500px)}to{transform:translateY(0)}}}:host ::ng-deep aside ul li.active,:host ::ng-deep aside ul li:hover{background-color:var(--main-aside-item-bc)}[dir=ltr] :host ::ng-deep aside ul li.active,[dir=ltr] :host ::ng-deep aside ul li:hover{border-left:5px solid var(--coral)}[dir=rtl] :host ::ng-deep aside ul li.active,[dir=rtl] :host ::ng-deep aside ul li:hover{border-right:5px solid var(--coral)}:host ::ng-deep aside ul li .menu-label{font-size:var(--main-aside-item-fs);flex-grow:1;opacity:1;min-width:calc(var(--main-aside-width-active) - 2rem - 40px);display:var(--main-aside-item-display)}:host ::ng-deep aside .header{background-color:#0003!important;padding:15px;flex-direction:row}:host ::ng-deep aside .header div{display:flex;align-items:center;margin-top:auto}:host ::ng-deep aside .footer{margin-top:auto;margin-bottom:80px;padding:0 30px}:host ::ng-deep aside ds-icon{font-size:1.55rem;display:inline-flex;align-items:center;justify-content:center;border-radius:3px;min-width:40px;width:40px;height:40px}:host ::ng-deep ds-button.close::part(base){height:37px;width:37px}:host ::ng-deep ds-button.close ds-icon{font-size:18px;min-width:18px;width:18px;height:18px}:host ::ng-deep .viewAll:hover{background-color:var(--purple)}:host ::ng-deep .viewAll:hover span{color:var(--white)}:host ::ng-deep .justify-content-between{justify-content:space-between}:host ::ng-deep .flex-column{flex-direction:column}:host ::ng-deep .d-flex{display:flex}:host ::ng-deep .w-100{width:100%}:host ::ng-deep .gap-3{gap:1rem!important}:host ::ng-deep ds-button.purple::part(base){--btn-border-color: var(--purple)}:host ::ng-deep ds-button.purple::part(overlay){--btn-overlay-color: var(--purple)}:host ::ng-deep ds-button.secondary::part(base){--btn-border-color: var(--secondary)}:host ::ng-deep ds-button.secondary::part(overlay){--btn-overlay-color: var(--secondary)}@media (min-width: 1024px){:host ::ng-deep .d-md-none{display:none!important}}@media (max-height: 430px){:host ::ng-deep aside .header{margin-bottom:50px}:host ::ng-deep aside nav{padding:15px 0 0;overflow:auto}:host ::ng-deep aside .footer{margin-bottom:20px}}@media (max-height: 300px){:host ::ng-deep aside .header{margin-bottom:5px}}:host ::ng-deep .logo{color:#fff}::ng-deep .aside-menu .mat-mdc-menu-content{border:none;box-shadow:none;padding:0!important}\n"], dependencies: [{ kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SideNavComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-side-nav', standalone: true, imports: [RouterLinkActive, RouterLink, MatTooltipModule, MatMenu, MatMenuTrigger], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<aside>\r\n  <div class=\"header d-flex d-lg-none\">\r\n    <div class=\"d-flex h-100 mt-auto justify-content-between w-100\">\r\n      <h1 class=\"fs-26 fw-bold fc-white logo\">academy</h1>\r\n      <ds-button size=\"small\" color=\"purple\" class=\"close purple\" (click)=\"closeSidenav()\">\r\n        <ds-icon icon=\"close\" class=\"fs-15 fc-white\"></ds-icon>\r\n      </ds-button>\r\n    </div>\r\n  </div>\r\n  <nav>\r\n    <ul>\r\n      <!--  (mouseenter)=\"menuMobile ? null : MenuTrigger.openMenu()\"-->\r\n      <!-- (click)=\"goto(item.routerLink,item.matmenu) -->\r\n      @for (item of Menu; track $index) {\r\n        @if (item.matmenu) {\r\n          <li\r\n            (click)=\"closeSidenav();navigateTo(item)\"  matTooltipPosition=\"right\" matTooltip=\"{{item.name }}\"\r\n            [routerLinkActive]=\"'active'\" (click)=\"goto(item.routerLink!,item.matmenu)\" #MenuTrigger=\"matMenuTrigger\"\r\n            [matMenuTriggerFor]=\"menuMenu\" [routerLinkActiveOptions]=\"{ exact: true }\" class=\"cursor-pointer\">\r\n            <ds-icon icon=\"{{item.icon}}\" class=\"icon\"></ds-icon>\r\n            <span class=\"menu-label\">\r\n              {{ item.name }}\r\n            </span>\r\n          </li>\r\n          <mat-menu #menuMenu=\"matMenu\" class=\"aside-menu  visible-{{item.matmenu}}\">\r\n            <app-mat-menu [title]=\"item.name \" [icon]=\"item.icon\" [list]=\"item.List\"></app-mat-menu>\r\n          </mat-menu>\r\n        } @else {\r\n          <li\r\n            (click)=\"closeSidenav();navigateTo(item)\"  matTooltipPosition=\"right\" matTooltip=\"{{item.name }}\"\r\n            [routerLinkActive]=\"'active'\" [routerLinkActiveOptions]=\"{ exact: true }\" class=\"cursor-pointer\">\r\n            <ds-icon icon=\"{{item.icon}}\" class=\"icon\"></ds-icon>\r\n            <span class=\"menu-label\">\r\n              {{ item.name }}\r\n            </span>\r\n          </li>\r\n        }\r\n      }\r\n    </ul>\r\n  </nav>\r\n</aside>\r\n", styles: [":host ::ng-deep aside{min-width:var(--main-aside-width);width:var(--main-aside-width);height:calc(100vh - var(--main-toolbar-height));display:flex;position:var(--main-aside-position);right:var(--main-aside-right);left:var(--main-aside-left);top:var(--main-toolbar-height);z-index:var(--main-toolbar-zIndex);background-color:var(--main-aside-bc);transform:var(--main-aside-transform);transition:all .5s cubic-bezier(.685,.0473,.346,1)}@media (max-width: 1024px){:host ::ng-deep aside{height:100%;flex-direction:column;--main-toolbar-height: 0}}:host ::ng-deep aside nav{width:100%}:host ::ng-deep aside ul{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:20px;padding:0rem;margin:37px 0;list-style:none;counter-reset:itemCounter}:host ::ng-deep aside ul li{display:flex;align-items:center;flex-wrap:nowrap;overflow:hidden;max-width:calc(var(--main-aside-width-active) - 15px);width:100%;gap:var(--gap-width, 2.5rem);padding:3px 0 3px 10px;cursor:pointer;color:var(--main-aside-item-fc);border-radius:0;transition:var(--default-transition)}[dir=rtl] :host ::ng-deep aside ul li{padding:3px 10px 3px 0!important}@media (max-width: 1024px){@keyframes liAnimation{0%{transform:translateY(-500px)}to{transform:translateY(0)}}}:host ::ng-deep aside ul li.active,:host ::ng-deep aside ul li:hover{background-color:var(--main-aside-item-bc)}[dir=ltr] :host ::ng-deep aside ul li.active,[dir=ltr] :host ::ng-deep aside ul li:hover{border-left:5px solid var(--coral)}[dir=rtl] :host ::ng-deep aside ul li.active,[dir=rtl] :host ::ng-deep aside ul li:hover{border-right:5px solid var(--coral)}:host ::ng-deep aside ul li .menu-label{font-size:var(--main-aside-item-fs);flex-grow:1;opacity:1;min-width:calc(var(--main-aside-width-active) - 2rem - 40px);display:var(--main-aside-item-display)}:host ::ng-deep aside .header{background-color:#0003!important;padding:15px;flex-direction:row}:host ::ng-deep aside .header div{display:flex;align-items:center;margin-top:auto}:host ::ng-deep aside .footer{margin-top:auto;margin-bottom:80px;padding:0 30px}:host ::ng-deep aside ds-icon{font-size:1.55rem;display:inline-flex;align-items:center;justify-content:center;border-radius:3px;min-width:40px;width:40px;height:40px}:host ::ng-deep ds-button.close::part(base){height:37px;width:37px}:host ::ng-deep ds-button.close ds-icon{font-size:18px;min-width:18px;width:18px;height:18px}:host ::ng-deep .viewAll:hover{background-color:var(--purple)}:host ::ng-deep .viewAll:hover span{color:var(--white)}:host ::ng-deep .justify-content-between{justify-content:space-between}:host ::ng-deep .flex-column{flex-direction:column}:host ::ng-deep .d-flex{display:flex}:host ::ng-deep .w-100{width:100%}:host ::ng-deep .gap-3{gap:1rem!important}:host ::ng-deep ds-button.purple::part(base){--btn-border-color: var(--purple)}:host ::ng-deep ds-button.purple::part(overlay){--btn-overlay-color: var(--purple)}:host ::ng-deep ds-button.secondary::part(base){--btn-border-color: var(--secondary)}:host ::ng-deep ds-button.secondary::part(overlay){--btn-overlay-color: var(--secondary)}@media (min-width: 1024px){:host ::ng-deep .d-md-none{display:none!important}}@media (max-height: 430px){:host ::ng-deep aside .header{margin-bottom:50px}:host ::ng-deep aside nav{padding:15px 0 0;overflow:auto}:host ::ng-deep aside .footer{margin-bottom:20px}}@media (max-height: 300px){:host ::ng-deep aside .header{margin-bottom:5px}}:host ::ng-deep .logo{color:#fff}::ng-deep .aside-menu .mat-mdc-menu-content{border:none;box-shadow:none;padding:0!important}\n"] }]
-        }], ctorParameters: () => [{ type: SidenavService }, { type: i2$4.Router }], propDecorators: { isOpened: [{
+        }], ctorParameters: () => [{ type: SidenavService }, { type: i2$5.Router }], propDecorators: { isOpened: [{
                 type: Input
             }], MenuTrigger: [{
                 type: ViewChild,
@@ -6597,7 +6503,7 @@ class LayoutComponent {
     closeSideNav() {
         this.sidenav.close().then(r => { });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: LayoutComponent, deps: [{ token: DOCUMENT }, { token: i2$4.Router }, { token: SidenavService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: LayoutComponent, deps: [{ token: DOCUMENT }, { token: i2$5.Router }, { token: SidenavService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: LayoutComponent, isStandalone: true, selector: "core-layout", inputs: { form: "form", formTitle: "formTitle", isLoading: "isLoading", serviceBrief: "serviceBrief" }, viewQueries: [{ propertyName: "sidenav", first: true, predicate: ["sidenav"], descendants: true, static: true }], ngImport: i0, template: "<app-header></app-header>\r\n<section class=\"d-flex\">\r\n  <app-side-nav></app-side-nav>\r\n  <mat-sidenav-container\r\n    class=\"flex-grow-1\"\r\n    [hasBackdrop]=\"true\"\r\n    (backdropClick)=\"backdropClick()\"\r\n  >\r\n    <mat-sidenav\r\n      #sidenav\r\n      autoFocus=\"false\"\r\n      fixedInViewport\r\n      [position]=\"'end'\"\r\n      (closedStart)=\"onClose()\"\r\n    >\r\n      <ng-container *ngComponentOutlet=\"sideContent\">\r\n        <app-side-nav></app-side-nav>\r\n      </ng-container>\r\n    </mat-sidenav>\r\n    <mat-sidenav-content>\r\n      <main\r\n        class=\"hadPadding service-wrapper\"\r\n        [ngClass]=\"form?.header?.status?.key == 'NEW' ? 'hub-container-mini' : 'hub-container'\">\r\n\r\n        <ng-content ></ng-content>\r\n        <ng-content select=\"[workflow]\"></ng-content>\r\n\r\n      </main>\r\n    </mat-sidenav-content>\r\n  </mat-sidenav-container>\r\n</section>\r\n", styles: [":host ::ng-deep .mat-drawer-container{overflow:visible;margin-top:var(--main-toolbar-height);min-height:calc(100vh - var(--main-toolbar-height));background-color:var(--body-bg)!important;z-index:initial!important;min-width:calc(100% - var(--main-aside-width));width:calc(100% - var(--main-aside-width))}:host ::ng-deep .mat-drawer-container .mat-drawer-content{display:flex;flex-direction:column;overflow:visible}.hup-wrapper :host ::ng-deep .mat-drawer-container .mat-drawer-content{min-height:auto}:host ::ng-deep footer{bottom:-65px}.mat-drawer{border-radius:10px!important;margin:1rem;box-shadow:0 8px 16px 7px rgba(var(--rgb-black),.06);background-color:var(--white)}@media (max-width: 767px){.mat-drawer{padding:0;border-radius:0;margin:0;width:100%}}.customize-btn{min-width:166px}.zer-pt{padding-top:0!important}\n"], dependencies: [{ kind: "component", type: HeaderComponent, selector: "app-header" }, { kind: "component", type: SideNavComponent, selector: "app-side-nav", inputs: ["isOpened"] }, { kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i3$5.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i3$5.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i3$5.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: LayoutComponent, decorators: [{
@@ -6606,7 +6512,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
         }], ctorParameters: () => [{ type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
-                }] }, { type: i2$4.Router }, { type: SidenavService }], propDecorators: { sidenav: [{
+                }] }, { type: i2$5.Router }, { type: SidenavService }], propDecorators: { sidenav: [{
                 type: ViewChild,
                 args: ["sidenav", { static: true }]
             }], form: [{
@@ -6628,9 +6534,6 @@ class RequestDetailsSectionComponent {
     form;
     lov;
     className = "info-section";
-    // fieldsForm: FormGroup;
-    currentSectionId;
-    lastSectionId;
     formGroup;
     options = ['Option 1', 'Option 2', 'Option 3'];
     constructor(i18n, fb, actionStateService) {
@@ -6640,6 +6543,7 @@ class RequestDetailsSectionComponent {
     }
     ngOnInit() {
         this.createForm();
+        this.formGroup.setValue(this.section.body.details);
     }
     createForm() {
         let newForm = {
@@ -6649,20 +6553,22 @@ class RequestDetailsSectionComponent {
             newForm[option.value] = [''];
         });
         this.formGroup = this.fb.group({
-            input: new FormControl('inp', [Validators.required, Validators.maxLength(3), Validators.minLength(2)]),
-            currencyInput: new FormControl(100, Validators.required),
-            emailInput: new FormControl('ana@gmail.com', [Validators.required, Validators.pattern(RegexPatterns.email)]),
-            numberInput: new FormControl(100, [Validators.required]),
-            customSearchable: new FormControl({ key: 'Reject', value: 'Reject' }, Validators.required),
-            checkbox: new FormControl(true, Validators.requiredTrue),
-            textArea: new FormControl('text-area', [Validators.required, Validators.maxLength(10), Validators.minLength(5)]),
-            datePicker: new FormControl('2024-11-11'),
-            datePickerRange: new FormControl({ startDate: '2024-11-11', endDate: '2024-11-20' }),
-            radio: new FormControl('Option 1', Validators.required),
-            toggle: new FormControl('Endorse', Validators.required),
-            telephone: new FormControl('0532614213'),
+            input: new FormControl(null, Validators.required),
+            currencyInput: new FormControl(null, Validators.required),
+            emailInput: new FormControl(null, Validators.required),
+            numberInput: new FormControl(null, Validators.required),
+            customSearchable: new FormControl(null, Validators.required),
+            checkbox: new FormControl(null, Validators.required),
+            textArea: new FormControl(null, Validators.required),
+            datePicker: new FormControl(null, Validators.required),
+            datePickerRange: new FormControl(null, Validators.required),
+            radio: new FormControl(null, Validators.required),
+            toggle: new FormControl(null, Validators.required),
+            telephone: new FormControl(null, Validators.required),
+            searchEmployee: new FormControl(null, Validators.required),
             // ...newForm,
-            file: new FormControl('Endorse', Validators.required),
+            attachment: new FormControl(null, Validators.required),
+            attachmentSection: new FormControl([], Validators.required),
         });
         this.formGroup.valueChanges.subscribe(value => {
             this.lov?.['decision']?.options?.forEach(option => {
@@ -6699,7 +6605,7 @@ class RequestDetailsSectionComponent {
         this.formGroup.reset();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: RequestDetailsSectionComponent, deps: [{ token: CoreI18nService }, { token: i2.FormBuilder }, { token: ActionStateService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: RequestDetailsSectionComponent, isStandalone: true, selector: "app-request-details-section", inputs: { isReadOnly: "isReadOnly", section: "section", form: "form", lov: "lov", className: "className" }, ngImport: i0, template: "<div>\r\n<form [ngClass]=\"{'form-section-divide form-section':!section?.header?.readOnly,'info-section':section?.header?.readOnly}\" [formGroup]=\"formGroup\">\r\n    <app-input [isReadOnly]=\"isReadOnly\" [loading]=\"true\" type=\"enOnly\" formControlName=\"input\" label=\"Input\" class=\"section-item\"></app-input>\r\n    <app-input-currency class=\"section-item\" [isReadOnly]=\"isReadOnly\" formControlName=\"currencyInput\" label=\"currency\"></app-input-currency>\r\n    <app-input-email class=\"section-item\" [isReadOnly]=\"isReadOnly\" formControlName=\"emailInput\" label=\"email\"></app-input-email>\r\n    <app-input-number class=\"section-item\" [isReadOnly]=\"isReadOnly\" formControlName=\"numberInput\" label=\"number\"></app-input-number>\r\n    <app-custom-searchable [isReadOnly]=\"isReadOnly\" class=\"section-item\" formControlName=\"customSearchable\" label=\"Custom-searchable\" [options]=\"lov?.['approverActions']?.options\" [displayedLabel]=\"'name'\" [key]=\"'name'\"></app-custom-searchable>\r\n    <app-checkbox  [isReadOnly]=\"isReadOnly\" class=\"section-item\" formControlName=\"checkbox\" termsLabel=\"Terms and condtions\" label=\"check-box\" [containTerms]=\"true\"></app-checkbox>\r\n    <app-textarea  [isReadOnly]=\"isReadOnly\" class=\"section-item\" formControlName=\"textArea\" label=\"Text-area\"></app-textarea>\r\n    <app-datepicker [isReadOnly]=\"isReadOnly\" class=\"section-item\" formControlName=\"datePicker\" [matSuffix]=\"true\" label=\"Date-picker\" minDate=\"today\" maxDate=\"today\"></app-datepicker>\r\n    <app-date-range-picker [isReadOnly]=\"isReadOnly\" class=\"section-item\" formControlName=\"datePickerRange\" label=\"Date-picker-range\" [matSuffix]=\"true\"></app-date-range-picker>\r\n    <app-radio [isReadOnly]=\"isReadOnly\" class=\"section-item\" formControlName=\"radio\" [options]=\"options\" label=\"Radio\"></app-radio>\r\n    <app-toggle-button [isReadOnly]=\"isReadOnly\" class=\"section-item\"  formControlName=\"toggle\" [options]=\"lov?.['approverActions']?.options\" label=\"Toggle-button\" [displayedLable]=\"'name'\" [key]=\"'name'\"></app-toggle-button>\r\n    <app-input-telephone  [isReadOnly]=\"isReadOnly\" class=\"section-item\"  formControlName=\"telephone\"  label=\"Telephone\"></app-input-telephone>\r\n    <!-- <app-input [isReadOnly]=\"isReadOnly\" class=\"section-item\" formControlName=\"input1\"></app-input> -->\r\n\r\n\r\n  <app-file-uploader [callApi]=\"true\"  [isReadOnly]=\"isReadOnly\" class=\"section-item\" formControlName=\"file\"></app-file-uploader>\r\n</form>\r\n<ds-button\r\n(click)=\"formValue(formGroup)\"\r\n[ngClass]=\"{'disabled': !formGroup.valid}\"\r\n>\r\n{{ i18n.translate('submit') }}\r\n</ds-button>\r\n  <ds-alert class=\"full\" type=\"warning\" icon=\"info\">\r\n    <div class=\"d-flex gap-2\">\r\n      Request details working fine\r\n    </div>\r\n  </ds-alert>\r\n  <!-- <form [formGroup]=\"fieldsForm\">\r\n    <app-input formControlName=\"input1\" ></app-input>\r\n  </form> -->\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}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: InputComponent, selector: "app-input", inputs: ["tooltip", "floatLabel", "className", "iconPrefixName", "iconSuffixName", "emitedChangedValue1"] }, { 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: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: CustomSearchableComponent, selector: "app-custom-searchable", inputs: ["options", "disabled", "displayedLabel", "key", "floatLabel", "className"], outputs: ["selectedValue", "isLengthGreaterThan4"] }, { kind: "component", type: CheckBoxComponent, selector: "app-checkbox", inputs: ["containTerms", "termsLabel", "linkText", "hrefLink", "link", "termsBody"], outputs: ["downloadCheckBox"] }, { kind: "component", type: TextareaComponent, selector: "app-textarea", inputs: ["className", "preventSpecailChar"] }, { kind: "component", type: InputCurrencyComponent, selector: "app-input-currency", inputs: ["tooltip", "floatLabel", "className", "iconPrefixName", "iconSuffixName", "numberSuffixName"] }, { kind: "component", type: DatePickerComponent, selector: "app-datepicker", inputs: ["className", "calendarType", "showLabel", "yearOnly", "error", "format"], outputs: ["dateValue"] }, { kind: "component", type: DateRangePickerComponent, selector: "app-date-range-picker", inputs: ["className", "yearOnly", "calendarType"] }, { kind: "component", type: InputEmailComponent, selector: "app-input-email", inputs: ["tooltip", "floatLabel", "className", "matPrefix", "iconPrefixName", "iconSuffixName", "numberSuffixName"] }, { kind: "component", type: InputNumberComponent, selector: "app-input-number", inputs: ["tooltip", "floatLabel", "className", "iconPrefixName", "iconSuffixName", "numberSuffixName", "allowedPattern"], outputs: ["emitedChangedValue"] }, { kind: "component", type: RadioComponent, selector: "app-radio", inputs: ["options"] }, { kind: "component", type: ToggleButtonComponent, selector: "app-toggle-button", inputs: ["tooltip", "className", "showLabel", "data", "error", "optionAr", "optionEn", "hasHint", "options", "displayedLable", "key"], outputs: ["onChange"] }, { kind: "component", type: InputTelephoneComponent, selector: "app-input-telephone", inputs: ["floatLabel", "className"] }, { kind: "component", type: DocsUploaderComponent, selector: "app-file-uploader", inputs: ["useCrop", "formKey", "showLabel", "downloadLink", "showActions", "styleHeight", "fileInputHeight", "styleWidth", "hints", "allowedExtensions", "callApi", "tooltip", "attachments", "optional", "display", "attachType", "error", "displayedFiles", "getDataFromTemplate", "allowFileContentsWithMultiAttachments", "accept", "signType", "showSignButton", "printType", "showPrintButton", "downloadType", "showDownloadButton", "preventFileContents", "maxSize"], outputs: ["selectedTemplateAttachment", "addSignatureClicked", "printActionClicked", "downloadActionClicked"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: RequestDetailsSectionComponent, isStandalone: true, selector: "app-request-details-section", inputs: { isReadOnly: "isReadOnly", section: "section", form: "form", lov: "lov", className: "className" }, ngImport: i0, template: "<div>\r\n<form [ngClass]=\"{'form-section-divide form-section':!section?.header?.readOnly,'info-section':section?.header?.readOnly}\" [formGroup]=\"formGroup\">\r\n    <app-search-employee [multiple]=\"true\" [arrayList]=\"formGroup.get('searchEmployee').value\" [isReadOnly]=\"isReadOnly\" formControlName=\"searchEmployee\" label=\"Search-employee\"></app-search-employee>\r\n    <app-input [isReadOnly]=\"isReadOnly\" [loading]=\"true\" type=\"enOnly\" formControlName=\"input\" label=\"Input\" class=\"section-item\"></app-input>\r\n    <app-input-currency class=\"section-item\" [isReadOnly]=\"isReadOnly\" formControlName=\"currencyInput\" label=\"currency\"></app-input-currency>\r\n    <app-input-email class=\"section-item\" [isReadOnly]=\"isReadOnly\" formControlName=\"emailInput\" label=\"email\"></app-input-email>\r\n    <app-input-number class=\"section-item\" [isReadOnly]=\"isReadOnly\" formControlName=\"numberInput\" label=\"number\"></app-input-number>\r\n    <app-custom-searchable [isReadOnly]=\"isReadOnly\" class=\"section-item\" formControlName=\"customSearchable\" label=\"Custom-searchable\" [options]=\"lov?.['approverActions']?.options\" [displayedLabel]=\"'name'\" [key]=\"'name'\"></app-custom-searchable>\r\n    <app-checkbox  [isReadOnly]=\"isReadOnly\" class=\"section-item\" formControlName=\"checkbox\" termsLabel=\"Terms and condtions\" label=\"check-box\" [containTerms]=\"true\"></app-checkbox>\r\n    <app-textarea  [isReadOnly]=\"isReadOnly\" class=\"section-item\" formControlName=\"textArea\" label=\"Text-area\"></app-textarea>\r\n    <app-datepicker [isReadOnly]=\"isReadOnly\" class=\"section-item\" formControlName=\"datePicker\" [matSuffix]=\"true\" label=\"Date-picker\"></app-datepicker>\r\n    <app-date-range-picker [isReadOnly]=\"isReadOnly\" class=\"section-item\" formControlName=\"datePickerRange\" label=\"Date-picker-range\" [matSuffix]=\"true\"></app-date-range-picker>\r\n    <app-radio [isReadOnly]=\"isReadOnly\" class=\"section-item\" formControlName=\"radio\" [options]=\"options\" label=\"Radio\"></app-radio>\r\n    <app-toggle-button [isReadOnly]=\"isReadOnly\" class=\"section-item\"  formControlName=\"toggle\" [options]=\"lov?.['approverActions']?.options\" label=\"Toggle-button\" [displayedLable]=\"'name'\" [key]=\"'name'\"></app-toggle-button>\r\n    <app-input-telephone  [isReadOnly]=\"isReadOnly\" class=\"section-item\"  formControlName=\"telephone\"  label=\"Telephone\"></app-input-telephone>\r\n  <app-file-uploader [isReadOnly]=\"isReadOnly\" [multiple]=\"true\" class=\"section-item\" label=\"attachment\" formControlName=\"attachment\"></app-file-uploader>\r\n  <app-attachment-section [descriptionRequired]=\"true\" [commentsRequired]=\"true\" [isReadOnly]=\"isReadOnly\" class=\"section-item\" formControlName=\"attachmentSection\"></app-attachment-section>\r\n\r\n</form>\r\n<ds-button\r\n(click)=\"formValue(formGroup)\"\r\n[ngClass]=\"{'disabled': !formGroup.valid}\"\r\n>\r\n{{ i18n.translate('submit') }}\r\n</ds-button>\r\n  <ds-alert class=\"full\" type=\"warning\" icon=\"info\">\r\n    <div class=\"d-flex gap-2\">\r\n      Request details working fine\r\n    </div>\r\n  </ds-alert>\r\n  <!-- <form [formGroup]=\"fieldsForm\">\r\n    <app-input formControlName=\"input1\" ></app-input>\r\n  </form> -->\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}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: InputComponent, selector: "app-input", inputs: ["tooltip", "floatLabel", "className", "iconPrefixName", "iconSuffixName", "emitedChangedValue1"] }, { 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: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: CustomSearchableComponent, selector: "app-custom-searchable", inputs: ["options", "disabled", "displayedLabel", "key", "floatLabel", "className"], outputs: ["selectedValue", "isLengthGreaterThan4"] }, { kind: "component", type: CheckBoxComponent, selector: "app-checkbox", inputs: ["containTerms", "termsLabel", "linkText", "hrefLink", "link", "termsBody"], outputs: ["downloadCheckBox"] }, { kind: "component", type: TextareaComponent, selector: "app-textarea", inputs: ["className", "preventSpecailChar"] }, { kind: "component", type: InputCurrencyComponent, selector: "app-input-currency", inputs: ["tooltip", "floatLabel", "className", "iconPrefixName", "iconSuffixName", "numberSuffixName"] }, { kind: "component", type: DatePickerComponent, selector: "app-datepicker", inputs: ["className", "calendarType", "showLabel", "yearOnly", "error", "format"], outputs: ["dateValue"] }, { kind: "component", type: DateRangePickerComponent, selector: "app-date-range-picker", inputs: ["className", "yearOnly", "calendarType"] }, { kind: "component", type: InputEmailComponent, selector: "app-input-email", inputs: ["tooltip", "floatLabel", "className", "matPrefix", "iconPrefixName", "iconSuffixName", "numberSuffixName"] }, { kind: "component", type: InputNumberComponent, selector: "app-input-number", inputs: ["tooltip", "floatLabel", "className", "iconPrefixName", "iconSuffixName", "numberSuffixName", "allowedPattern"], outputs: ["emitedChangedValue"] }, { kind: "component", type: RadioComponent, selector: "app-radio", inputs: ["options"] }, { kind: "component", type: ToggleButtonComponent, selector: "app-toggle-button", inputs: ["tooltip", "className", "showLabel", "data", "error", "optionAr", "optionEn", "hasHint", "options", "displayedLable", "key"], outputs: ["onChange"] }, { kind: "component", type: InputTelephoneComponent, selector: "app-input-telephone", inputs: ["floatLabel", "className"] }, { kind: "component", type: DocsUploaderComponent, selector: "app-file-uploader", inputs: ["useCrop", "formKey", "showLabel", "downloadLink", "showActions", "styleHeight", "fileInputHeight", "styleWidth", "hints", "allowedExtensions", "callApi", "tooltip", "optional", "display", "attachType", "error", "displayedFiles", "getDataFromTemplate", "allowFileContentsWithMultiAttachments", "accept", "signType", "showSignButton", "printType", "showPrintButton", "downloadType", "showDownloadButton", "preventFileContents", "maxSize"], outputs: ["selectedTemplateAttachment", "addSignatureClicked", "printActionClicked", "emitedValue", "downloadActionClicked"] }, { kind: "component", type: SearchEmployeeComponent, selector: "app-search-employee", inputs: ["valueName", "tooltip", "className", "showLabel", "optional", "data", "floatLabel", "error", "showEdit", "arrayList", "isUniqueUsers"], outputs: ["selectedEmp", "onInputChange", "editDirectManger", "deleteDirectManger", "emitedDeletedValue"] }, { kind: "component", type: AttachmentSectionComponent, selector: "app-attachment-section", inputs: ["className", "attachmentsMax", "isSortable", "downloadAll", "isRequired", "descriptionRequired", "commentsRequired", "allowedExtensions"], outputs: ["emitedValue"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: RequestDetailsSectionComponent, decorators: [{
             type: Component,
@@ -6719,8 +6625,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                         RadioComponent,
                         ToggleButtonComponent,
                         InputTelephoneComponent,
-                        DocsUploaderComponent
-                    ], template: "<div>\r\n<form [ngClass]=\"{'form-section-divide form-section':!section?.header?.readOnly,'info-section':section?.header?.readOnly}\" [formGroup]=\"formGroup\">\r\n    <app-input [isReadOnly]=\"isReadOnly\" [loading]=\"true\" type=\"enOnly\" formControlName=\"input\" label=\"Input\" class=\"section-item\"></app-input>\r\n    <app-input-currency class=\"section-item\" [isReadOnly]=\"isReadOnly\" formControlName=\"currencyInput\" label=\"currency\"></app-input-currency>\r\n    <app-input-email class=\"section-item\" [isReadOnly]=\"isReadOnly\" formControlName=\"emailInput\" label=\"email\"></app-input-email>\r\n    <app-input-number class=\"section-item\" [isReadOnly]=\"isReadOnly\" formControlName=\"numberInput\" label=\"number\"></app-input-number>\r\n    <app-custom-searchable [isReadOnly]=\"isReadOnly\" class=\"section-item\" formControlName=\"customSearchable\" label=\"Custom-searchable\" [options]=\"lov?.['approverActions']?.options\" [displayedLabel]=\"'name'\" [key]=\"'name'\"></app-custom-searchable>\r\n    <app-checkbox  [isReadOnly]=\"isReadOnly\" class=\"section-item\" formControlName=\"checkbox\" termsLabel=\"Terms and condtions\" label=\"check-box\" [containTerms]=\"true\"></app-checkbox>\r\n    <app-textarea  [isReadOnly]=\"isReadOnly\" class=\"section-item\" formControlName=\"textArea\" label=\"Text-area\"></app-textarea>\r\n    <app-datepicker [isReadOnly]=\"isReadOnly\" class=\"section-item\" formControlName=\"datePicker\" [matSuffix]=\"true\" label=\"Date-picker\" minDate=\"today\" maxDate=\"today\"></app-datepicker>\r\n    <app-date-range-picker [isReadOnly]=\"isReadOnly\" class=\"section-item\" formControlName=\"datePickerRange\" label=\"Date-picker-range\" [matSuffix]=\"true\"></app-date-range-picker>\r\n    <app-radio [isReadOnly]=\"isReadOnly\" class=\"section-item\" formControlName=\"radio\" [options]=\"options\" label=\"Radio\"></app-radio>\r\n    <app-toggle-button [isReadOnly]=\"isReadOnly\" class=\"section-item\"  formControlName=\"toggle\" [options]=\"lov?.['approverActions']?.options\" label=\"Toggle-button\" [displayedLable]=\"'name'\" [key]=\"'name'\"></app-toggle-button>\r\n    <app-input-telephone  [isReadOnly]=\"isReadOnly\" class=\"section-item\"  formControlName=\"telephone\"  label=\"Telephone\"></app-input-telephone>\r\n    <!-- <app-input [isReadOnly]=\"isReadOnly\" class=\"section-item\" formControlName=\"input1\"></app-input> -->\r\n\r\n\r\n  <app-file-uploader [callApi]=\"true\"  [isReadOnly]=\"isReadOnly\" class=\"section-item\" formControlName=\"file\"></app-file-uploader>\r\n</form>\r\n<ds-button\r\n(click)=\"formValue(formGroup)\"\r\n[ngClass]=\"{'disabled': !formGroup.valid}\"\r\n>\r\n{{ i18n.translate('submit') }}\r\n</ds-button>\r\n  <ds-alert class=\"full\" type=\"warning\" icon=\"info\">\r\n    <div class=\"d-flex gap-2\">\r\n      Request details working fine\r\n    </div>\r\n  </ds-alert>\r\n  <!-- <form [formGroup]=\"fieldsForm\">\r\n    <app-input formControlName=\"input1\" ></app-input>\r\n  </form> -->\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}\n"] }]
+                        DocsUploaderComponent,
+                        SearchEmployeeComponent,
+                        AttachmentSectionComponent
+                    ], template: "<div>\r\n<form [ngClass]=\"{'form-section-divide form-section':!section?.header?.readOnly,'info-section':section?.header?.readOnly}\" [formGroup]=\"formGroup\">\r\n    <app-search-employee [multiple]=\"true\" [arrayList]=\"formGroup.get('searchEmployee').value\" [isReadOnly]=\"isReadOnly\" formControlName=\"searchEmployee\" label=\"Search-employee\"></app-search-employee>\r\n    <app-input [isReadOnly]=\"isReadOnly\" [loading]=\"true\" type=\"enOnly\" formControlName=\"input\" label=\"Input\" class=\"section-item\"></app-input>\r\n    <app-input-currency class=\"section-item\" [isReadOnly]=\"isReadOnly\" formControlName=\"currencyInput\" label=\"currency\"></app-input-currency>\r\n    <app-input-email class=\"section-item\" [isReadOnly]=\"isReadOnly\" formControlName=\"emailInput\" label=\"email\"></app-input-email>\r\n    <app-input-number class=\"section-item\" [isReadOnly]=\"isReadOnly\" formControlName=\"numberInput\" label=\"number\"></app-input-number>\r\n    <app-custom-searchable [isReadOnly]=\"isReadOnly\" class=\"section-item\" formControlName=\"customSearchable\" label=\"Custom-searchable\" [options]=\"lov?.['approverActions']?.options\" [displayedLabel]=\"'name'\" [key]=\"'name'\"></app-custom-searchable>\r\n    <app-checkbox  [isReadOnly]=\"isReadOnly\" class=\"section-item\" formControlName=\"checkbox\" termsLabel=\"Terms and condtions\" label=\"check-box\" [containTerms]=\"true\"></app-checkbox>\r\n    <app-textarea  [isReadOnly]=\"isReadOnly\" class=\"section-item\" formControlName=\"textArea\" label=\"Text-area\"></app-textarea>\r\n    <app-datepicker [isReadOnly]=\"isReadOnly\" class=\"section-item\" formControlName=\"datePicker\" [matSuffix]=\"true\" label=\"Date-picker\"></app-datepicker>\r\n    <app-date-range-picker [isReadOnly]=\"isReadOnly\" class=\"section-item\" formControlName=\"datePickerRange\" label=\"Date-picker-range\" [matSuffix]=\"true\"></app-date-range-picker>\r\n    <app-radio [isReadOnly]=\"isReadOnly\" class=\"section-item\" formControlName=\"radio\" [options]=\"options\" label=\"Radio\"></app-radio>\r\n    <app-toggle-button [isReadOnly]=\"isReadOnly\" class=\"section-item\"  formControlName=\"toggle\" [options]=\"lov?.['approverActions']?.options\" label=\"Toggle-button\" [displayedLable]=\"'name'\" [key]=\"'name'\"></app-toggle-button>\r\n    <app-input-telephone  [isReadOnly]=\"isReadOnly\" class=\"section-item\"  formControlName=\"telephone\"  label=\"Telephone\"></app-input-telephone>\r\n  <app-file-uploader [isReadOnly]=\"isReadOnly\" [multiple]=\"true\" class=\"section-item\" label=\"attachment\" formControlName=\"attachment\"></app-file-uploader>\r\n  <app-attachment-section [descriptionRequired]=\"true\" [commentsRequired]=\"true\" [isReadOnly]=\"isReadOnly\" class=\"section-item\" formControlName=\"attachmentSection\"></app-attachment-section>\r\n\r\n</form>\r\n<ds-button\r\n(click)=\"formValue(formGroup)\"\r\n[ngClass]=\"{'disabled': !formGroup.valid}\"\r\n>\r\n{{ i18n.translate('submit') }}\r\n</ds-button>\r\n  <ds-alert class=\"full\" type=\"warning\" icon=\"info\">\r\n    <div class=\"d-flex gap-2\">\r\n      Request details working fine\r\n    </div>\r\n  </ds-alert>\r\n  <!-- <form [formGroup]=\"fieldsForm\">\r\n    <app-input formControlName=\"input1\" ></app-input>\r\n  </form> -->\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}\n"] }]
         }], ctorParameters: () => [{ type: CoreI18nService }, { type: i2.FormBuilder }, { type: ActionStateService }], propDecorators: { isReadOnly: [{
                 type: Input
             }], section: [{
@@ -6832,8 +6740,8 @@ class I18nService {
     coreLocales;
     language;
     constructor() {
-        // this.language = (window as any).wmConfig.language;
-        this.language = "en";
+        this.language = window.wmConfig.language;
+        // this.language = "en";
         this.locales = { en: en, ar: ar };
     }
     translate(key) {
@@ -6917,6 +6825,7 @@ class CoreAppComponent {
     sidenavService;
     i18n;
     coreService;
+    platformId;
     loading = {
         form: false
     };
@@ -6924,13 +6833,14 @@ class CoreAppComponent {
     formTitle = 'Test';
     noError = true;
     errorMessage;
-    constructor(segmentDynamicLoader, document, router, sidenavService, i18n, coreService) {
+    constructor(segmentDynamicLoader, document, router, sidenavService, i18n, coreService, platformId) {
         this.segmentDynamicLoader = segmentDynamicLoader;
         this.document = document;
         this.router = router;
         this.sidenavService = sidenavService;
         this.i18n = i18n;
         this.coreService = coreService;
+        this.platformId = platformId;
         this.loading['form'] = true;
         this.coreService.loadForm().subscribe({
             next: (form) => {
@@ -6944,12 +6854,18 @@ class CoreAppComponent {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: CoreAppComponent, deps: [{ token: SegmentDynamicLoaderService }, { token: DOCUMENT }, { token: i2$4.Router }, { token: SidenavService }, { token: CoreI18nService }, { token: CoreService }], target: i0.ɵɵFactoryTarget.Component });
+    ngAfterViewInit() {
+        if (isPlatformBrowser(this.platformId)) {
+            const direction = this.i18n.language == 'en' ? 'ltr' : 'rtl';
+            document.documentElement.setAttribute('dir', direction);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: CoreAppComponent, deps: [{ token: SegmentDynamicLoaderService }, { token: DOCUMENT }, { token: i2$5.Router }, { token: SidenavService }, { token: CoreI18nService }, { token: CoreService }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: CoreAppComponent, isStandalone: true, selector: "lib-app", providers: [
             { provide: DynamicComponentInjectorToken, useValue: { /* your value here */} }
-        ], ngImport: i0, template: "<core-layout>\r\n  @if (!loading['form']) {\r\n\r\n    @if (noError) {\r\n      <core-service-header\r\n        [isLoading]=\"false\"\r\n        [formTitle]=\"formTitle\"\r\n        [form]=\"form\">\r\n      </core-service-header>\r\n      <app-workflow-section\r\n        workflow\r\n        [segmentDynamicLoaderService]=\"segmentDynamicLoader\"\r\n        [form]=\"form\" [sections]=\"form?.['sections']\">\r\n        <app-request-details-section\r\n          [section]=\"form.sections[0]\" [form]=\"form\" [lov]=\"form?.lovs\" className=\"form-section\"\r\n          [isReadOnly]=\"form.sections[0].header.readOnly\"></app-request-details-section>\r\n      </app-workflow-section>\r\n    } @else {\r\n      @if (errorMessage?.length) {\r\n        <ds-message></ds-message>\r\n        @for (item of errorMessage; track $index) {\r\n          <div class=\"d-flex justify-content-center\">\r\n            <span class=\"fc-coral fs-18\" >{{ item?.['message'] }}</span>\r\n          </div>\r\n        }\r\n      } @else {\r\n        <ds-message label=\"{{i18n.translate('pageErrorLoading')}}\"></ds-message>\r\n      }\r\n    }\r\n  } @else {\r\n    <core-service-header header [formTitle]=\"formTitle\" [isLoading]=\"true\">\r\n    </core-service-header>\r\n  }\r\n</core-layout>\r\n", styles: [""], dependencies: [{ kind: "component", type: 
+        ], ngImport: i0, template: "<core-layout>\r\n  @if (!loading['form']) {\r\n\r\n    @if (noError) {\r\n      <core-service-header\r\n        [isLoading]=\"false\"\r\n        [formTitle]=\"formTitle\"\r\n        [isReadOnly]=\"form.sections[0].header.readOnly\"\r\n        [form]=\"form\">\r\n      </core-service-header>\r\n      <app-workflow-section\r\n        workflow\r\n        [segmentDynamicLoaderService]=\"segmentDynamicLoader\"\r\n        [form]=\"form\" [sections]=\"form?.['sections']\">\r\n        <app-request-details-section\r\n          [section]=\"form.sections[0]\" [form]=\"form\" [lov]=\"form?.lovs\" className=\"form-section\"\r\n          [isReadOnly]=\"form.sections[0].header.readOnly\"></app-request-details-section>\r\n      </app-workflow-section>\r\n    } @else {\r\n      @if (errorMessage?.length) {\r\n        <ds-message></ds-message>\r\n        @for (item of errorMessage; track $index) {\r\n          <div class=\"d-flex justify-content-center\">\r\n            <span class=\"fc-coral fs-18\" >{{ item?.['message'] }}</span>\r\n          </div>\r\n        }\r\n      } @else {\r\n        <ds-message label=\"{{i18n.translate('pageErrorLoading')}}\"></ds-message>\r\n      }\r\n    }\r\n  } @else {\r\n    <core-service-header header [formTitle]=\"formTitle\" [isLoading]=\"true\">\r\n    </core-service-header>\r\n  }\r\n</core-layout>\r\n", styles: [""], dependencies: [{ kind: "component", type: 
                 // DynamicModule,
-                LayoutComponent, selector: "core-layout", inputs: ["form", "formTitle", "isLoading", "serviceBrief"] }, { kind: "component", type: ServiceHeaderComponent, selector: "core-service-header", inputs: ["form", "showHistory", "isLoading", "showApprovalHistory", "approvalHistory", "creationDate", "formTitle", "section", "serviceFaq"] }, { kind: "component", type: WorkflowSectionComponent, selector: "app-workflow-section", inputs: ["sections", "isReadOnly", "isLoading", "form", "contentClass", "sectionsController", "segmentDynamicLoaderService", "sectionFormComponent", "sectionName"], outputs: ["sectionSubmitted"] }, { kind: "component", type: RequestDetailsSectionComponent, selector: "app-request-details-section", inputs: ["isReadOnly", "section", "form", "lov", "className"] }] });
+                LayoutComponent, selector: "core-layout", inputs: ["form", "formTitle", "isLoading", "serviceBrief"] }, { kind: "component", type: ServiceHeaderComponent, selector: "core-service-header", inputs: ["form", "showHistory", "isLoading", "isReadOnly", "showApprovalHistory", "approvalHistory", "creationDate", "formTitle", "section", "serviceFaq"] }, { kind: "component", type: WorkflowSectionComponent, selector: "app-workflow-section", inputs: ["sections", "isReadOnly", "isLoading", "form", "contentClass", "sectionsController", "segmentDynamicLoaderService", "sectionFormComponent", "sectionName"], outputs: ["sectionSubmitted"] }, { kind: "component", type: RequestDetailsSectionComponent, selector: "app-request-details-section", inputs: ["isReadOnly", "section", "form", "lov", "className"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: CoreAppComponent, decorators: [{
             type: Component,
@@ -6961,11 +6877,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                         RequestDetailsSectionComponent
                     ], schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA], providers: [
                         { provide: DynamicComponentInjectorToken, useValue: { /* your value here */} }
-                    ], template: "<core-layout>\r\n  @if (!loading['form']) {\r\n\r\n    @if (noError) {\r\n      <core-service-header\r\n        [isLoading]=\"false\"\r\n        [formTitle]=\"formTitle\"\r\n        [form]=\"form\">\r\n      </core-service-header>\r\n      <app-workflow-section\r\n        workflow\r\n        [segmentDynamicLoaderService]=\"segmentDynamicLoader\"\r\n        [form]=\"form\" [sections]=\"form?.['sections']\">\r\n        <app-request-details-section\r\n          [section]=\"form.sections[0]\" [form]=\"form\" [lov]=\"form?.lovs\" className=\"form-section\"\r\n          [isReadOnly]=\"form.sections[0].header.readOnly\"></app-request-details-section>\r\n      </app-workflow-section>\r\n    } @else {\r\n      @if (errorMessage?.length) {\r\n        <ds-message></ds-message>\r\n        @for (item of errorMessage; track $index) {\r\n          <div class=\"d-flex justify-content-center\">\r\n            <span class=\"fc-coral fs-18\" >{{ item?.['message'] }}</span>\r\n          </div>\r\n        }\r\n      } @else {\r\n        <ds-message label=\"{{i18n.translate('pageErrorLoading')}}\"></ds-message>\r\n      }\r\n    }\r\n  } @else {\r\n    <core-service-header header [formTitle]=\"formTitle\" [isLoading]=\"true\">\r\n    </core-service-header>\r\n  }\r\n</core-layout>\r\n" }]
+                    ], template: "<core-layout>\r\n  @if (!loading['form']) {\r\n\r\n    @if (noError) {\r\n      <core-service-header\r\n        [isLoading]=\"false\"\r\n        [formTitle]=\"formTitle\"\r\n        [isReadOnly]=\"form.sections[0].header.readOnly\"\r\n        [form]=\"form\">\r\n      </core-service-header>\r\n      <app-workflow-section\r\n        workflow\r\n        [segmentDynamicLoaderService]=\"segmentDynamicLoader\"\r\n        [form]=\"form\" [sections]=\"form?.['sections']\">\r\n        <app-request-details-section\r\n          [section]=\"form.sections[0]\" [form]=\"form\" [lov]=\"form?.lovs\" className=\"form-section\"\r\n          [isReadOnly]=\"form.sections[0].header.readOnly\"></app-request-details-section>\r\n      </app-workflow-section>\r\n    } @else {\r\n      @if (errorMessage?.length) {\r\n        <ds-message></ds-message>\r\n        @for (item of errorMessage; track $index) {\r\n          <div class=\"d-flex justify-content-center\">\r\n            <span class=\"fc-coral fs-18\" >{{ item?.['message'] }}</span>\r\n          </div>\r\n        }\r\n      } @else {\r\n        <ds-message label=\"{{i18n.translate('pageErrorLoading')}}\"></ds-message>\r\n      }\r\n    }\r\n  } @else {\r\n    <core-service-header header [formTitle]=\"formTitle\" [isLoading]=\"true\">\r\n    </core-service-header>\r\n  }\r\n</core-layout>\r\n" }]
         }], ctorParameters: () => [{ type: SegmentDynamicLoaderService }, { type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
-                }] }, { type: i2$4.Router }, { type: SidenavService }, { type: CoreI18nService }, { type: CoreService }] });
+                }] }, { type: i2$5.Router }, { type: SidenavService }, { type: CoreI18nService }, { type: CoreService }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [PLATFORM_ID]
+                }] }] });
 
 function encodePassword(formId, password) {
     const formIdString = Array.from(new TextEncoder().encode(formId), (x) => String.fromCodePoint(x)).join('');
@@ -7295,5 +7214,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, ConfirmationPopupComponent, CoreAppComponent, CoreI18nService, CoreService, CustomSearchableComponent, DATE_DASH, DATE_SLASH, DATE_TIME, DONT_SHOW, DatePickerComponent, DateRangePickerComponent, DeleteDialogComponent, DeletePopupComponent, 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, RepeatedListComponent, SECTION_ID_APPROVAL_PARTIAL_NAME, SECTION_ID_DM_PARTIAL_ROLE, SECTION_ID_EMP_INFO_APPROVAL_PARTIAL_ROLE, SECTION_ID_EXECUTE_PARTIAL_ROLE, SECTION_ID_GM_PARTIAL_ROLE, SECTION_ID_NOTHING_PARTIAL_NAME, SECTION_ID_PAYROLL_APPROVAL_PARTIAL_ROLE, SECTION_ID_PERFORM_PARTIAL_ROLE, SECTION_ID_REQUESTER_PARTIAL_NAME, SECTION_ID_REQUEST_DETAILS, SECTION_ID_SM_PARTIAL_ROLE, SECTION_ID_SVP_PARTIAL_ROLE, SECTION_ID_VP_PARTIAL_ROLE, SECTION_STATUS_APPROVED, SECTION_STATUS_PENDING, SECTION_STATUS_UNSATISFIED, SERVICE_NAME_CEP, SERVICE_NAME_DP_CREATE_FEEDBACK, SERVICE_NAME_DP_INBOX_ITEM, SERVICE_NAME_DP_LOAD_HISTORY, SERVICE_NAME_DP_SEARCH_EMPLOYEE, SERVICE_NAME_DP_UPDATE_FEEDBACK, SERVICE_NAME_DP_UPDATE_INBOX_ITEM, SERVICE_NAME_MAF, SERVICE_NAME_WM_CHILD_FORM, SERVICE_NAME_WM_DRAFT_FORM, SERVICE_NAME_WM_FORM, SERVICE_NAME_WM_GET_APPROVED_REQUEST, SERVICE_NAME_WM_GET_MY_APPROVED_REQUEST, SERVICE_NAME_WM_HTML_GENERATOR, STATE_MACHINE_ACTION_CALC, STATE_MACHINE_ACTION_COMMONAPI, STATE_MACHINE_ACTION_CONVERT, STATE_MACHINE_ACTION_EMPLOYEE_PROFILE, STATE_MACHINE_ACTION_FAILURE, STATE_MACHINE_ACTION_GET_APPROVED_REQUEST, STATE_MACHINE_ACTION_GET_APPROVED_REQUEST_RESPONSE, STATE_MACHINE_ACTION_GET_FEEDBACK, STATE_MACHINE_ACTION_GET_INBOX_ITEM, STATE_MACHINE_ACTION_HANDLE_ERROR, STATE_MACHINE_ACTION_INBOX_ITEM_RESPONSE, STATE_MACHINE_ACTION_LOAD_FILE, STATE_MACHINE_ACTION_LOAD_FORM, STATE_MACHINE_ACTION_LOAD_HISTORY, STATE_MACHINE_ACTION_PDF, STATE_MACHINE_ACTION_PPROVED_REQUESTS, STATE_MACHINE_ACTION_PROJECT_CEP, STATE_MACHINE_ACTION_PROJECT_MAF, STATE_MACHINE_ACTION_SEARCH, STATE_MACHINE_ACTION_SEARCH_EMPLOYEE, STATE_MACHINE_ACTION_SET_FLAG, STATE_MACHINE_ACTION_SHOW_PRINT, STATE_MACHINE_ACTION_SUBMIT_FEEDBACK, STATE_MACHINE_ACTION_SUBMIT_FORM, STATE_MACHINE_ACTION_SUCCESS, STATE_MACHINE_ACTION_SUCCESS_HISTORY, STATE_MACHINE_ACTION_SUCCESS_INBOX_ITEM, STATE_MACHINE_ACTION_SUCCESS_PRINT, STATE_MACHINE_ACTION_SUCCESS_RESPONSE, STATE_MACHINE_ACTION_SUCCESS_SERVICES, STATE_MACHINE_ACTION_SUCCESS_USERS, STATE_MACHINE_ACTION_SUCCESS_WM, STATE_MACHINE_ACTION_UPDATE_FEEDBACK, STATE_MACHINE_ACTION_USER_CEP, STATE_MACHINE_ACTION_USER_MAF, STATE_MACHINE_STATUS_ERROR, STATE_MACHINE_STATUS_FETCHING, STATE_MACHINE_STATUS_IDLE, STATE_MACHINE_STATUS_RESULT, STATE_MACHINE_STATUS_SENDING, STATE_NAME_DP_GET_FEEDBACK, SearchEmployeeComponent, Section, SectionHeader, SelectComponent, ServiceHeaderComponent, SidenavService, SpecialCharacterDirective, StatusComponent, SubmitDialogComponent, TARGET_SERVER_DP, TARGET_SERVER_WM, TRUE_BOOL, TRUE_STRING, TableListComponent, TermsConditionsComponent, TextDirective, TextareaComponent, TitleSectionComponent, ToggleButtonComponent, URL_SEPARATOR, WM_ACTION_SAVE, WM_ACTION_SAVE_CHANGES, WM_ACTION_SUBMIT, WORKFLOW_ITEMS, WRITE_MODE, WorkflowSectionComponent, dataURItoBlob, encodePassword, handelErrorResponse, isValidData, stringToBooleanPipe, validateSAID };
+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, RepeatedListComponent, SECTION_ID_APPROVAL_PARTIAL_NAME, SECTION_ID_DM_PARTIAL_ROLE, SECTION_ID_EMP_INFO_APPROVAL_PARTIAL_ROLE, SECTION_ID_EXECUTE_PARTIAL_ROLE, SECTION_ID_GM_PARTIAL_ROLE, SECTION_ID_NOTHING_PARTIAL_NAME, SECTION_ID_PAYROLL_APPROVAL_PARTIAL_ROLE, SECTION_ID_PERFORM_PARTIAL_ROLE, SECTION_ID_REQUESTER_PARTIAL_NAME, SECTION_ID_REQUEST_DETAILS, SECTION_ID_SM_PARTIAL_ROLE, SECTION_ID_SVP_PARTIAL_ROLE, SECTION_ID_VP_PARTIAL_ROLE, SECTION_STATUS_APPROVED, SECTION_STATUS_PENDING, SECTION_STATUS_UNSATISFIED, SERVICE_NAME_CEP, SERVICE_NAME_DP_CREATE_FEEDBACK, SERVICE_NAME_DP_INBOX_ITEM, SERVICE_NAME_DP_LOAD_HISTORY, SERVICE_NAME_DP_SEARCH_EMPLOYEE, SERVICE_NAME_DP_UPDATE_FEEDBACK, SERVICE_NAME_DP_UPDATE_INBOX_ITEM, SERVICE_NAME_MAF, SERVICE_NAME_WM_CHILD_FORM, SERVICE_NAME_WM_DRAFT_FORM, SERVICE_NAME_WM_FORM, SERVICE_NAME_WM_GET_APPROVED_REQUEST, SERVICE_NAME_WM_GET_MY_APPROVED_REQUEST, SERVICE_NAME_WM_HTML_GENERATOR, STATE_MACHINE_ACTION_CALC, STATE_MACHINE_ACTION_COMMONAPI, STATE_MACHINE_ACTION_CONVERT, STATE_MACHINE_ACTION_EMPLOYEE_PROFILE, STATE_MACHINE_ACTION_FAILURE, STATE_MACHINE_ACTION_GET_APPROVED_REQUEST, STATE_MACHINE_ACTION_GET_APPROVED_REQUEST_RESPONSE, STATE_MACHINE_ACTION_GET_FEEDBACK, STATE_MACHINE_ACTION_GET_INBOX_ITEM, STATE_MACHINE_ACTION_HANDLE_ERROR, STATE_MACHINE_ACTION_INBOX_ITEM_RESPONSE, STATE_MACHINE_ACTION_LOAD_FILE, STATE_MACHINE_ACTION_LOAD_FORM, STATE_MACHINE_ACTION_LOAD_HISTORY, STATE_MACHINE_ACTION_PDF, STATE_MACHINE_ACTION_PPROVED_REQUESTS, STATE_MACHINE_ACTION_PROJECT_CEP, STATE_MACHINE_ACTION_PROJECT_MAF, STATE_MACHINE_ACTION_SEARCH, STATE_MACHINE_ACTION_SEARCH_EMPLOYEE, STATE_MACHINE_ACTION_SET_FLAG, STATE_MACHINE_ACTION_SHOW_PRINT, STATE_MACHINE_ACTION_SUBMIT_FEEDBACK, STATE_MACHINE_ACTION_SUBMIT_FORM, STATE_MACHINE_ACTION_SUCCESS, STATE_MACHINE_ACTION_SUCCESS_HISTORY, STATE_MACHINE_ACTION_SUCCESS_INBOX_ITEM, STATE_MACHINE_ACTION_SUCCESS_PRINT, STATE_MACHINE_ACTION_SUCCESS_RESPONSE, STATE_MACHINE_ACTION_SUCCESS_SERVICES, STATE_MACHINE_ACTION_SUCCESS_USERS, STATE_MACHINE_ACTION_SUCCESS_WM, STATE_MACHINE_ACTION_UPDATE_FEEDBACK, STATE_MACHINE_ACTION_USER_CEP, STATE_MACHINE_ACTION_USER_MAF, STATE_MACHINE_STATUS_ERROR, STATE_MACHINE_STATUS_FETCHING, STATE_MACHINE_STATUS_IDLE, STATE_MACHINE_STATUS_RESULT, STATE_MACHINE_STATUS_SENDING, STATE_NAME_DP_GET_FEEDBACK, SearchEmployeeComponent, Section, SectionHeader, SelectComponent, ServiceHeaderComponent, SidenavService, SpecialCharacterDirective, StatusComponent, SubmitDialogComponent, TARGET_SERVER_DP, TARGET_SERVER_WM, TRUE_BOOL, TRUE_STRING, TableListComponent, TermsConditionsComponent, TextDirective, TextareaComponent, TitleSectionComponent, ToggleButtonComponent, URL_SEPARATOR, WM_ACTION_SAVE, WM_ACTION_SAVE_CHANGES, WM_ACTION_SUBMIT, WORKFLOW_ITEMS, WRITE_MODE, WorkflowSectionComponent, dataURItoBlob, encodePassword, handelErrorResponse, isValidData, stringToBooleanPipe, validateSAID };
 //# sourceMappingURL=bpm-core.mjs.map